#pdb-view {
    --rcsb-panel: rgb(208.69, 223.425, 238.16);      /* #D1DFEE */
    --rcsb-base: #e9f0f7;
    --rcsb-control: rgb(242.35, 246.375, 250.4);     /* #F2F6FA */
    --rcsb-hover: rgb(223.65, 233.625, 243.6);       /* #E0EAF4 */
    --rcsb-border: rgb(176.9, 201.75, 226.6);        /* #B1CAE3 */
    --rcsb-hover-border: rgb(167.55, 195.375, 223.2);/* #A8C3DF */
    --rcsb-footer: rgb(214.3, 227.25, 240.2);        /* #D6E3F0 */
    --rcsb-log-row: rgb(227.39, 236.175, 244.96);    /* #E3ECF5 */
    --rcsb-scroll-track: rgb(223.65, 233.625, 243.6);
    --rcsb-scroll-thumb: rgb(148.85, 182.625, 216.4);
    --rcsb-text: #333;
    --rcsb-label: hsl(0, 0%, 35%);
    --rcsb-muted: hsl(0, 0%, 53%);
    --rcsb-active: #325880;
    --rcsb-accent: hsl(28.1632653061, 79.674796748%, 56.7647058824%);
}

/* ---------- Root / border ---------- */

#pdb-view .msp-plugin {
    width: 100%;
    height: 100%;
    color: var(--rcsb-text);
    font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
}

#pdb-view .msp-layout-standard {
    border-color: var(--rcsb-border) !important;
}

/* ---------- Main Mol* panel backgrounds ---------- */

#pdb-view .msp-layout-right,
#pdb-view .msp-layout-left,
#pdb-view .msp-viewport-controls-panel {
    background: var(--rcsb-panel) !important;
}

#pdb-view .msp-viewport {
    background: var(--rcsb-base) !important;
}

/* ---------- Sequence ---------- */

#pdb-view .msp-sequence-select {
    background: var(--rcsb-panel) !important;
}

#pdb-view .msp-sequence-select > select {
    background-color: var(--rcsb-panel) !important;
}

#pdb-view .msp-sequence-wrapper-non-empty {
    background: var(--rcsb-control) !important;
}

#pdb-view .msp-sequence-wrapper .msp-sequence-label,
#pdb-view .msp-sequence-wrapper .msp-sequence-number {
    color: var(--rcsb-active) !important;
}

/* ---------- Base rows / headers ---------- */

#pdb-view .msp-default-bg,
#pdb-view .msp-control-row,
#pdb-view .msp-control-current,
#pdb-view .msp-control-group-header,
#pdb-view .msp-row-text,
#pdb-view .msp-help-text,
#pdb-view .msp-flex-row,
#pdb-view .msp-state-image-row,
#pdb-view .msp-section-header,
#pdb-view .msp-description,
#pdb-view .msp-simple-help-section {
    background: var(--rcsb-base) !important;
}

/* Mol* intentionally uses a slightly lighter right side in parameter rows. */
#pdb-view .msp-control-row > div,
#pdb-view .msp-help-row > div {
    background: var(--rcsb-control) !important;
}

#pdb-view .msp-control-row > .msp-flex-row,
#pdb-view .msp-control-row > .msp-state-image-row {
    background: var(--rcsb-base) !important;
}

/* Compact subgroup headers, e.g. Apply Representation / Add Representation. */
#pdb-view .msp-control-group-header > button,
#pdb-view .msp-control-group-header > div,
#pdb-view .msp-control-group-header > span {
    background: var(--rcsb-base) !important;
    color: var(--rcsb-label) !important;
}

#pdb-view .msp-control-group-footer {
    background: var(--rcsb-footer) !important;
}

/* ---------- Controls / buttons / form fields ---------- */

#pdb-view .msp-form-control,
#pdb-view .msp-control-row select,
#pdb-view .msp-control-row button,
#pdb-view .msp-control-row input[type="text"],
#pdb-view .msp-btn {
    background: var(--rcsb-control) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--rcsb-text);
}

#pdb-view .msp-form-control:hover,
#pdb-view .msp-control-row select:hover,
#pdb-view .msp-control-row button:hover,
#pdb-view .msp-control-row input[type="text"]:hover,
#pdb-view .msp-btn:hover {
    color: var(--rcsb-active) !important;
    background: var(--rcsb-hover) !important;
    border: none !important;
    outline: 1px solid var(--rcsb-hover-border) !important;
    outline-offset: -1px !important;
}

#pdb-view .msp-form-control:active,
#pdb-view .msp-form-control:focus,
#pdb-view .msp-control-row select:active,
#pdb-view .msp-control-row select:focus,
#pdb-view .msp-control-row button:active,
#pdb-view .msp-control-row button:focus,
#pdb-view .msp-control-row input[type="text"]:active,
#pdb-view .msp-control-row input[type="text"]:focus,
#pdb-view .msp-btn:active,
#pdb-view .msp-btn:focus {
    color: var(--rcsb-text) !important;
    background: var(--rcsb-control) !important;
    border: none !important;
    outline: none !important;
}

/* Disabled state */
#pdb-view .msp-form-control[disabled],
#pdb-view .msp-control-row select[disabled],
#pdb-view .msp-control-row button[disabled],
#pdb-view .msp-control-row input[disabled][type="text"],
#pdb-view .msp-btn[disabled] {
    background: var(--rcsb-base) !important;
    opacity: .35 !important;
}

/* Link-like icon buttons */
#pdb-view .msp-btn-link,
#pdb-view .msp-btn-link:active,
#pdb-view .msp-btn-link:focus {
    color: var(--rcsb-text);
}

#pdb-view .msp-btn-link:hover {
    color: var(--rcsb-active) !important;
}

#pdb-view .msp-btn-link-toggle-off,
#pdb-view .msp-btn-link-toggle-off:active,
#pdb-view .msp-btn-link-toggle-off:focus {
    color: var(--rcsb-muted) !important;
}

/* ---------- Labels / help ---------- */

#pdb-view .msp-control-row > span.msp-control-row-label,
#pdb-view .msp-control-row > button.msp-control-button-label,
#pdb-view .msp-help-text > div,
#pdb-view .msp-help-text > p,
#pdb-view .msp-row-text > div {
    color: var(--rcsb-label) !important;
}

#pdb-view .msp-control-row > button.msp-control-button-label {
    background: var(--rcsb-base) !important;
}

/* ---------- Expansion accent ---------- */

#pdb-view .msp-accent-offset {
    border-left-color: var(--rcsb-accent) !important;
}

/* Keep Mol* representation/type color stripes intact. */
#pdb-view .msp-type-class-Group {
    border-left-color: var(--rcsb-accent) !important;
}

/* ---------- Viewport floating controls ---------- */

/* RCSB uses a translucent blue-gray plate behind transparent icon buttons. */
#pdb-view .msp-semi-transparent-background {
    background: var(--rcsb-base) !important;
    opacity: .8 !important;
}

#pdb-view .msp-viewport-controls-buttons button,
#pdb-view .msp-viewport-controls .msp-btn-link {
    background: transparent !important;
    box-shadow: none !important;
}

#pdb-view .msp-viewport-controls-buttons .msp-btn-link:hover {
    color: var(--rcsb-active) !important;
}

/* ---------- Scrollbars ---------- */

#pdb-view .msp-plugin ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#pdb-view .msp-plugin ::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: var(--rcsb-scroll-track);
}

#pdb-view .msp-plugin ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--rcsb-scroll-thumb);
    border: 1px solid transparent;
    background-clip: content-box;
}

#pdb-view .msp-plugin {
    scrollbar-width: thin;
    scrollbar-color: var(--rcsb-scroll-thumb) var(--rcsb-scroll-track);
}

/* ---------- Optional log area ---------- */

#pdb-view .msp-log {
    background: var(--rcsb-panel) !important;
    color: hsl(0, 0%, 25%) !important;
}

#pdb-view .msp-log li {
    background: var(--rcsb-base) !important;
}

#pdb-view .msp-log li:not(:last-child) {
    border-bottom-color: var(--rcsb-border) !important;
}

#pdb-view .msp-log .msp-log-entry {
    background: var(--rcsb-log-row) !important;
}

/* ---------- Expanded / fullscreen z-index ---------- */

.viewer-wrap:has(.msp-layout-expanded) {
    z-index: 200000 !important;
}

.viewer-grid .ten.wide.column:has(.msp-layout-expanded) {
    z-index: 200001 !important;
}

.structure-view:has(.msp-layout-expanded) {
    z-index: 200002 !important;
    overflow: visible !important;
}

.structure-view .msp-layout-expanded {
    z-index: 200003 !important;
}