@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   Powder 5 — Studio Monitor theme
   Original CSS replaced. Selector names preserved to keep JS happy.
   Aesthetic: high-end Japanese audio receiver. Brushed metal, hairline
   rules, monospace technical readouts, restrained amber LED accent,
   muted cool blue for primary actions. Light + dark.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Type */
    --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;

    /* Surfaces — neutral grays (slight cool cast, like brushed aluminum) */
    --bg-app:        #e6e7e9;   /* outer chassis */
    --bg-panel:      #f3f4f5;   /* control panel face */
    --bg-stage:      #ffffff;   /* chart / results stage */
    --bg-inset:      #dcdee1;   /* recessed input wells */
    --bg-inset-2:    #d2d5d9;
    --bg-elevated:   #ffffff;   /* modals, popovers */
    --bg-hover:      rgba(0,0,0,0.045);

    /* Brushed-metal gradient (very subtle) for chrome surfaces */
    --metal:         linear-gradient(180deg, #f6f7f8 0%, #ebecee 100%);
    --metal-deep:    linear-gradient(180deg, #d8dadd 0%, #c8cbcf 100%);

    /* Text */
    --fg:            #1a1c1f;
    --fg-2:          #4a4e54;     /* secondary */
    --fg-3:          #7a7f86;     /* tertiary / labels */
    --fg-4:          #a0a4ab;     /* disabled */

    /* Hairlines — the workhorse separator */
    --rule:          #c4c7cb;
    --rule-soft:     #d8dadd;
    --rule-strong:   #9ea2a8;

    /* Accents */
    --accent:        #4a7fb5;     /* muted cool blue — primary action */
    --accent-hover:  #3d6fa3;
    --accent-tint:   rgba(74,127,181,0.14);
    --accent-ring:   rgba(74,127,181,0.30);

    --led:           #d68a2a;     /* amber indicator LED */
    --led-glow:      rgba(214,138,42,0.5);

    --danger:        #b03a3a;
    --success:       #3a7a4a;
    --warning:       #b88318;

    /* Shadows — minimal. Hardware UIs don't float. */
    --shadow-1:      0 1px 0 rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-2:      0 8px 24px rgba(0,0,0,0.12);

    /* Corner radii — keep tight (rx ≈ 2) per chosen language */
    --r-1: 2px;
    --r-2: 3px;
    --r-3: 4px;

    /* Legacy token aliases (so existing inline styles + JS keep working) */
    --system-blue:                var(--accent);
    --system-gray-1:              var(--fg-3);
    --system-gray-2:              var(--fg-4);
    --system-gray-3:              #b8bcc1;
    --system-gray-4:              var(--rule);
    --system-gray-5:              var(--rule-soft);
    --system-gray-6:              var(--bg-inset);
    --system-background:          var(--bg-stage);
    --system-grouped-background:  var(--bg-app);
    --system-material-thin:       rgba(255,255,255,0.7);
    --system-material-regular:    rgba(255,255,255,0.85);
    --system-label:               var(--fg);
    --system-secondary-label:     var(--fg-2);
    --system-tertiary-label:      var(--fg-3);
    --system-separator:           var(--rule);
    --system-fill:                rgba(60,70,80,0.08);
    --system-secondary-fill:      rgba(60,70,80,0.05);
    --system-shadow:              rgba(0,0,0,0.10);
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg-app:        #1a1c1e;
    --bg-panel:      #232629;
    --bg-stage:      #15171a;
    --bg-inset:      #14161a;
    --bg-inset-2:    #0f1114;
    --bg-elevated:   #2a2d31;
    --bg-hover:      rgba(255,255,255,0.05);

    --metal:         linear-gradient(180deg, #2c2f33 0%, #232629 100%);
    --metal-deep:    linear-gradient(180deg, #1a1c1e 0%, #131517 100%);

    --fg:            #e8eaed;
    --fg-2:          #c0c4c9;
    --fg-3:          #8a8f96;
    --fg-4:          #50545a;

    --rule:          #44474c;
    --rule-soft:     #3a3d42;
    --rule-strong:   #4a4e54;

    --accent:        #5b91c7;
    --accent-hover:  #6ea3d8;
    --accent-tint:   rgba(91,145,199,0.18);
    --accent-ring:   rgba(91,145,199,0.40);

    --led:           #e09a3a;
    --led-glow:      rgba(224,154,58,0.55);

    --danger:        #e06868;
    --success:       #6abf7e;
    --warning:       #e0b04a;

    --shadow-1:      0 1px 0 rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
    --shadow-2:      0 8px 24px rgba(0,0,0,0.55);

    --system-gray-3: #4a4e54;
    --system-gray-4: var(--rule);
    --system-gray-5: var(--rule-soft);
    --system-gray-6: var(--bg-inset);
    --system-fill:               rgba(255,255,255,0.06);
    --system-secondary-fill:     rgba(255,255,255,0.04);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.4;
    color: var(--fg);
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.005em;
}

/* numeric inputs & readouts get monospace */
input[type="number"],
.control-input[type="number"],
input[type="text"].sg-search-row input,
.slider-value-display,
.result-card-value,
#app-version-footer,
.sg-list-item .num,
.sg-explain-grid dd {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1, "zero" 1;
    letter-spacing: 0;
}

/* ---------- App shell ---------- */

#app-container {
    display: flex;
    width: 100%;
    flex-grow: 1;
    min-height: 0;
    background: var(--bg-app);
}

#controls-panel {
    width: 380px;
    min-width: 320px;
    max-width: 500px;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 20;
    box-shadow: none;
    border-radius: 0;
}

/* The only element inside #controls-panel that scrolls. Everything that
   isn't the action-button-bar footer lives in here, so the footer itself
   never has to "catch up" via position:sticky — it simply isn't part of
   the scrolling flow, and is always visible regardless of tab content
   height or scroll position. */
#controls-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 14px 14px 16px;
    display: flex;
    flex-direction: column;
}
#controls-scroll::-webkit-scrollbar { width: 8px; }
#controls-scroll::-webkit-scrollbar-track { background: transparent; }
#controls-scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
#controls-scroll::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); }

/* A true fixed footer (flex-shrink:0, outside #controls-scroll) rather than
   a sticky element inside the scroll flow — sticky only keeps an element
   from scrolling OUT of view once you've already scrolled to it; it does
   nothing for the very first render, so on tall panels (e.g. Profile with
   many parameters) the buttons stayed below the fold until manually
   scrolled down. As a direct, non-scrolling flex child of #controls-panel,
   this bar is visible immediately on every tab, with no scrolling needed. */
#action-button-bar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 14px 14px 16px;
    background: var(--bg-panel);
    border-top: 1px solid var(--rule);
    z-index: 5;
}

#drag-handle {
    width: 1px;
    cursor: col-resize;
    background: var(--rule);
    flex-shrink: 0;
    transition: background 0.15s, box-shadow 0.15s;
    position: relative;
}
#drag-handle::after {
    content: "";
    position: absolute;
    inset: 0 -3px;
}
#drag-handle:hover, #drag-handle:active {
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-ring);
}

#results-area {
    flex-grow: 1;
    position: relative;
    background: var(--bg-stage);
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 22px 20px;
    z-index: 10;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    border-left: 1px solid var(--rule);
}

/* App version footer (model-number tag) */
#app-version-footer {
    position: absolute;
    bottom: 8px;
    right: 14px;
    font-size: 9.5px !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-3) !important;
    user-select: none;
    pointer-events: none;
}

/* ---------- Controls panel sections (flat, hairline-separated) ---------- */

.control-group {
    padding: 14px 0 16px 0;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.control-group:first-child { padding-top: 6px; }
.control-group:last-child  { border-bottom: none; }

/* Section header — small caps + monospace index would be ideal, but we
   only have the title text. Treat h2 as a precise hardware-style label. */
.control-group h2,
.profile-section-header {
    margin: 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

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

.control-label {
    display: block;
    font-weight: 500;
    color: var(--fg-2);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

/* ---------- Inputs ---------- */

.control-input,
.control-select {
    width: 100%;
    background: var(--bg-inset);
    border: 1px solid var(--rule);
    color: var(--fg);
    border-radius: var(--r-1);
    padding: 6px 10px;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
    box-sizing: border-box;
    font-size: 13px;
    height: 30px;
    font-family: inherit;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.03);
}
[data-theme="dark"] .control-input,
[data-theme="dark"] .control-select {
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.5);
}
.control-input:hover:not(:disabled),
.control-select:hover:not(:disabled) {
    border-color: var(--rule-strong);
}
.control-input:focus,
.control-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
    background: var(--bg-stage);
}
.control-input:disabled {
    background: var(--bg-inset);
    color: var(--fg-4);
    cursor: not-allowed;
    opacity: 0.7;
}

/* native dropdown chevron */
.control-select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--fg-2) 50%),
        linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 12px,
        calc(100% - 9px) 12px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 26px;
}

/* number-input spinners — keep them but tone down */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }

/* ---------- Buttons ---------- */

.btn {
    padding: 0 16px;
    border-radius: var(--r-1);
    font-weight: 600;
    transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s, transform 0.05s;
    cursor: pointer;
    border: 1px solid var(--rule);
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--metal);
    color: var(--fg);
    box-shadow: var(--shadow-1);
    font-family: inherit;
}
.btn:hover:not(:disabled) {
    border-color: var(--rule-strong);
    background: var(--bg-stage);
}
[data-theme="dark"] .btn:hover:not(:disabled) {
    background: var(--bg-elevated);
}
.btn:active:not(:disabled) { transform: translateY(0.5px); }

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-1);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}
.btn-primary:active:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 1px 2px rgba(0,0,0,0.20) inset;
}

.btn-secondary {
    background: var(--metal);
    color: var(--fg);
    border: 1px solid var(--rule);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--bg-stage);
    color: var(--fg);
    border-color: var(--rule-strong);
    transform: none;
    box-shadow: var(--shadow-1);
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    background: var(--bg-elevated);
}

.btn:disabled {
    background: var(--bg-inset);
    color: var(--fg-4);
    border-color: var(--rule-soft);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

/* ---------- Chart rubber-band zoom selection ---------- */

#main-chart { cursor: crosshair; }

#zoom-selection-box {
    position: absolute;
    display: none;
    pointer-events: none;
    z-index: 4;
    border: 1px solid var(--accent);
    background: var(--accent-tint);
    box-shadow: 0 0 0 1px var(--accent-ring);
}

/* ---------- File input ---------- */

.file-input-label {
    display: block;
    padding: 10px 14px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--r-1);
    text-align: center;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--accent);
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-1);
}
.file-input-label:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}
.file-input-label:active {
    background: var(--accent-hover);
    box-shadow: 0 1px 2px rgba(0,0,0,0.20) inset;
}
[data-theme="dark"] .file-input-label:hover {
    background: var(--accent-hover);
}

/* ---------- Results grid (numeric readout cards) ---------- */

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(80px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    overflow: hidden;
}
.result-card {
    background: var(--bg-inset);
    padding: 8px 10px;
    border-radius: 0;
    text-align: left;
    transition: background 0.12s;
}
.result-card-label {
    font-size: 9.5px;
    color: var(--fg-3);
    margin-bottom: 2px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 500;
}
.result-card-value {
    font-size: 16px;
    font-weight: 500;
    color: var(--fg);
    letter-spacing: 0;
}

/* ---------- Fit checkbox (square LED) ---------- */

.fit-checkbox {
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-inset);
    width: 16px;
    height: 16px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.06);
}
[data-theme="dark"] .fit-checkbox {
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.5);
}
.fit-checkbox:hover { border-color: var(--led); }
.fit-checkbox:checked {
    background: var(--led);
    border-color: var(--led);
    box-shadow: 0 0 6px var(--led-glow), inset 0 0 0 1px rgba(255,255,255,0.15);
}
.fit-checkbox:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: rgba(255,255,255,0.92);
    border-radius: 1px;
}

/* ---------- Tabs ---------- */

.tab-buttons {
    display: flex;
    background: var(--bg-inset);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    padding: 2px;
    margin-bottom: 14px;
    gap: 0;
}
.tab-btn {
    flex: 1;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: var(--fg-2);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--r-1);
    transition: background 0.12s, color 0.12s;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-family: inherit;
}
.tab-btn:hover { color: var(--fg); background: var(--bg-hover); }
.tab-btn.active {
    color: var(--fg);
    background: var(--bg-stage);
    box-shadow: var(--shadow-1);
}
[data-theme="dark"] .tab-btn.active {
    background: var(--bg-elevated);
}


.tab-content-panels { position: relative; padding-top: 0; }
.tab-content-panel { display: none; flex-direction: column; }
.tab-content-panel.active { display: flex; }
.tab-content-panel > .control-group { border-top: none; }

#lattice-parameters-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bottom-actions {
    margin-top: auto;
    padding-top: 14px;
}

/* ---------- Sliders ---------- */

.slider-value-track {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    height: 30px;
}
.slider-value-track > * { grid-column: 1; grid-row: 1; }
.slider-value-display {
    text-align: center;
    color: var(--fg-2);
    font-weight: 500;
    font-size: 11.5px;
    pointer-events: none;
    text-shadow: 0 1px 0 var(--bg-panel);
}

input[type="range"].custom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    outline: none;
    padding: 0;
    margin: 0;
}
input[type="range"].custom-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--bg-inset);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
}
input[type="range"].custom-slider::-moz-range-track {
    height: 4px;
    background: var(--bg-inset);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
}
input[type="range"].custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 18px;
    background: var(--metal);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
    cursor: pointer;
    margin-top: -8px;
    box-shadow: var(--shadow-1);
    transition: border-color 0.12s, background 0.12s;
}
input[type="range"].custom-slider::-webkit-slider-thumb:hover {
    border-color: var(--accent);
}
input[type="range"].custom-slider::-moz-range-thumb {
    width: 14px;
    height: 18px;
    background: var(--metal);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
    cursor: pointer;
    box-shadow: var(--shadow-1);
}
input[type="range"].custom-slider:disabled::-webkit-slider-thumb { opacity: 0.4; cursor: not-allowed; }
input[type="range"].custom-slider:disabled::-moz-range-thumb     { opacity: 0.4; cursor: not-allowed; }

/* ---------- Anchor / spline points list ---------- */

.anchor-point-item {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    padding: 6px 8px;
    background: var(--bg-inset);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-1);
}
.anchor-point-item span {
    font-size: 12px;
    padding: 0 4px;
    text-align: right;
    font-family: var(--font-mono);
    color: var(--fg-2);
}
.anchor-point-item .control-input {
    height: 26px;
    padding: 4px 8px;
    font-size: 12px;
}
.anchor-remove-btn {
    background: transparent;
    border: none;
    color: var(--fg-3);
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    transition: color 0.12s;
}
.anchor-remove-btn:hover { color: var(--danger); }

#spline-points-list {
    background: var(--bg-stage);
}

/* ---------- Form grids ---------- */

.profile-controls-container + .profile-controls-container {
    margin-top: 18px;
}

.parameter-grid-3col,
.parameter-grid-2col,
.slider-group,
.form-row {
    display: grid;
    gap: 10px 12px;
    align-items: center;
}
.parameter-grid-3col { grid-template-columns: minmax(96px, auto) 1fr 22px; }
.parameter-grid-2col,
.slider-group,
.form-row { grid-template-columns: minmax(96px, auto) 1fr; }

.parameter-grid-3col > .control-label,
.parameter-grid-2col > .control-label,
.slider-group       > .control-label,
.form-row           > .control-label {
    grid-column: 1;
    margin-bottom: 0;
}

.parameter-grid-2col > *:not(label),
.slider-group        > .slider-value-track,
.form-row            > *:not(label) { grid-column: 2; }

.parameter-grid-3col > .control-input { grid-column: 2; }
.parameter-grid-3col > .fit-checkbox  { grid-column: 3; justify-self: center; }

.profile-controls-container {
    display: grid;
    grid-template-columns: minmax(96px, auto) 1fr 22px;
    gap: 10px 12px;
    align-items: center;
}
.profile-controls-container > .control-label  { grid-column: 1; text-align: left; margin-bottom: 0; }
.profile-controls-container > input[type="number"] { grid-column: 2; }
.profile-controls-container > input[type="checkbox"] { grid-column: 3; justify-self: center; }
.profile-controls-container > .profile-section-header { grid-column: 1 / -1; margin-top: 10px; }
.profile-controls-container > .profile-section-header:first-child { margin-top: 0; }

/* ---------- Toasts ---------- */

#toast-container {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}
.toast {
    padding: 10px 16px;
    border-radius: var(--r-1);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    background: var(--bg-elevated);
    border: 1px solid var(--rule-strong);
    color: var(--fg);
    box-shadow: var(--shadow-2);
    opacity: 0;
    transform: translateX(110%);
    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.21,1.02,0.73,1);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.error   { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.toast.success { background: var(--success); border-color: var(--success); color: #fff; }

/* ---------- Bottom actions section ---------- */

.bottom-actions > .control-group {
    display: grid;
    grid-template-columns: minmax(96px, auto) 1fr;
    gap: 12px;
    align-items: center;
    border: none;
    padding: 0;
}
.bottom-actions > .control-group > h2,
.bottom-actions > .control-group > .slider-group,
.bottom-actions > .control-group > #progress-bar-container,
.bottom-actions > .control-group > .results-grid {
    grid-column: 1 / -1;
}
.bottom-actions > .control-group > label[for="algorithm-select"] {
    grid-column: 1;
    margin-bottom: 0;
}
.bottom-actions > .control-group > #algorithm-select {
    grid-column: 2;
    margin-bottom: 0;
}

/* ---------- Help tooltip ---------- */

.help-tooltip-container { position: relative; display: inline-block; }
.help-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--metal);
    color: var(--fg-2);
    border: 1px solid var(--rule);
    border-radius: 50%;
    font-weight: 600;
    font-size: 16px;
    font-family: var(--font-mono);
    cursor: help;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    box-shadow: var(--shadow-1);
}
.help-icon:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.tooltip-content {
    visibility: hidden;
    opacity: 0;
    width: 280px;
    background: var(--bg-elevated);
    color: var(--fg);
    text-align: left;
    border-radius: var(--r-1);
    padding: 14px;
    position: absolute;
    z-index: 1001;
    top: -12px;
    right: 115%;
    margin-right: 10px;
    transition: opacity 0.25s;
    font-size: 12px;
    border: 1px solid var(--rule-strong);
    box-shadow: var(--shadow-2);
}
.tooltip-content::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--rule-strong);
}
.tooltip-content.visible { visibility: visible; opacity: 1; }
.tooltip-content h4 {
    color: var(--fg);
    font-size: 11px;
    margin-top: 0;
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.tooltip-content p {
    margin: 0 0 5px 0;
    line-height: 1.45;
    color: var(--fg-2);
    font-size: 12px;
}
.tooltip-content a { color: var(--accent); }
.tooltip-content hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 10px 0;
}

.hidden { display: none !important; }

/* ---------- Progress bar ---------- */

#progress-bar-container {
    height: 4px;
    background: var(--bg-inset);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    overflow: hidden;
}
#progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 0;
    transition: width 0.25s ease;
    box-shadow: 0 0 6px var(--accent-ring);
}

/* ---------- Placeholder (empty stage) ---------- */

#placeholder {
    background: transparent;
    border-radius: 0;
    padding: 40px;
    color: var(--fg-3) !important;
}
#placeholder svg { color: var(--fg-4); }
#placeholder h2 {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase;
    color: var(--fg-2) !important;
    margin-bottom: 8px !important;
}
#placeholder p {
    font-size: 12px !important;
    color: var(--fg-3) !important;
    letter-spacing: 0.04em;
}

#results-area {
    background-image: none;
    background-color: var(--bg-stage);
}
[data-theme="dark"] #results-area {
    background-image: none;
}

/* ---------- Animations & focus ---------- */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.btn:focus-visible,
.control-input:focus-visible,
.control-select:focus-visible,
.fit-checkbox:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ---------- Space Group modal ---------- */

.sg-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}
.sg-modal-overlay.open { display: flex; }
.sg-modal {
    background: var(--bg-elevated);
    width: min(880px, 95vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-2);
    border: 1px solid var(--rule-strong);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    font-family: inherit;
    color: var(--fg);
}
.sg-modal-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--rule);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg);
    background: var(--metal);
}
[data-theme="dark"] .sg-modal-header { background: var(--metal); }
.sg-modal-body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    min-height: 0;
    flex: 1;
}
.sg-modal-left {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    gap: 10px;
    min-width: 0;
    border-right: 1px solid var(--rule);
    overflow: hidden;
}
.sg-modal-right {
    padding: 14px 16px;
    overflow-y: auto;
    min-width: 0;
}
.sg-filter-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sg-filter-label {
    font-size: 9.5px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    width: 100%;
    margin: 4px 0 -2px 0;
}
.sg-chip {
    padding: 3px 9px;
    border-radius: var(--r-1);
    border: 1px solid var(--rule);
    background: var(--bg-inset);
    color: var(--fg-2);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    font-family: var(--font-mono);
}
.sg-chip:hover:not(.disabled) {
    background: var(--bg-stage);
    color: var(--fg);
    border-color: var(--rule-strong);
}
.sg-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.sg-chip.disabled { opacity: 0.35; cursor: not-allowed; }

.sg-search-row { display: grid; grid-template-columns: 1fr 1.7fr; gap: 8px; }
.sg-search-row input {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--r-1);
    border: 1px solid var(--rule);
    background: var(--bg-inset);
    color: var(--fg);
    outline: none;
    min-width: 0;
    height: 28px;
    font-family: inherit;
}
.sg-search-row input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
}
.sg-list-wrap {
    flex: 1;
    min-height: 220px;
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    overflow-y: auto;
    background: var(--bg-stage);
}
.sg-list-item {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--rule-soft);
    display: grid;
    grid-template-columns: 48px 1fr 110px;
    gap: 8px;
    align-items: baseline;
}
.sg-list-item:last-child { border-bottom: none; }
.sg-list-item:hover { background: var(--bg-hover); }
.sg-list-item.selected {
    background: var(--accent);
    color: #fff;
}
.sg-list-item .num { color: var(--fg-3); }
.sg-list-item.selected .num { color: rgba(255,255,255,0.85); }
.sg-list-item .sys { font-size: 10px; color: var(--fg-3); text-align: right; letter-spacing: 0.06em; text-transform: uppercase; }
.sg-list-item.selected .sys { color: rgba(255,255,255,0.85); }
.sg-list-empty {
    padding: 24px;
    text-align: center;
    color: var(--fg-3);
    font-size: 12px;
}

.sg-explain { font-size: 12px; line-height: 1.5; }
.sg-explain h3 {
    margin: 0 0 10px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg);
}
.sg-explain-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 14px;
    font-size: 11.5px;
}
.sg-explain-grid dt {
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 10px;
    padding-top: 2px;
    font-weight: 600;
}
.sg-explain-grid dd { margin: 0; }
.sg-explain-cond-table {
    margin-top: 8px;
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    font-family: var(--font-mono);
}
.sg-explain-cond-table th,
.sg-explain-cond-table td {
    text-align: left;
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--fg);
}
.sg-explain-cond-table th {
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 10px;
    font-family: var(--font-sans);
}
.sg-explain-empty,
.sg-explain-warning {
    padding: 14px;
    border-radius: var(--r-1);
    font-size: 12px;
    line-height: 1.45;
    border: 1px solid var(--rule);
}
.sg-explain-empty {
    background: var(--bg-inset);
    color: var(--fg-3);
}
.sg-explain-warning {
    background: rgba(214,138,42,0.10);
    color: var(--warning);
    border-color: rgba(214,138,42,0.45);
}
[data-theme="dark"] .sg-explain-warning {
    color: #ecb86a;
    background: rgba(224,154,58,0.12);
}
.sg-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--rule);
    background: var(--bg-panel);
}
.sg-btn {
    padding: 6px 16px;
    border-radius: var(--r-1);
    border: 1px solid var(--rule);
    background: var(--metal);
    color: var(--fg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
}
.sg-btn:hover:not(:disabled) {
    border-color: var(--rule-strong);
    background: var(--bg-stage);
}
[data-theme="dark"] .sg-btn:hover:not(:disabled) { background: var(--bg-elevated); }
.sg-btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.sg-btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
.sg-btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 720px) {
    .sg-modal-body { grid-template-columns: 1fr; }
    .sg-modal-left { border-right: none; border-bottom: 1px solid var(--rule); }
}

/* ---------- Mode toggle (top-right of stage) ---------- */

#mode-toggle {
    position: absolute;
    top: 12px;
    right: 50px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--bg-inset);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    padding: 2px;
    box-shadow: var(--shadow-1);
}
#mode-toggle button {
    appearance: none;
    background: transparent;
    border: none;
    width: 28px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-3);
    cursor: pointer;
    border-radius: var(--r-1);
    transition: color 0.12s, background 0.12s;
    padding: 0;
}
#mode-toggle button:hover { color: var(--fg); }
#mode-toggle button.active {
    background: var(--bg-stage);
    color: var(--fg);
    box-shadow: var(--shadow-1);
}
[data-theme="dark"] #mode-toggle button.active { background: var(--bg-elevated); }
#mode-toggle svg { width: 13px; height: 13px; display: block; }

/* ---------- Brand mark / model number, top-left of stage ---------- */

#brand-mark {
    position: absolute;
    top: 14px;
    left: 22px;
    z-index: 55;
    display: flex;
    align-items: baseline;
    gap: 10px;
    pointer-events: none;
    user-select: none;
}
#brand-mark .mark {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--fg-2);
}
#brand-mark .model {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--fg-3);
    text-transform: uppercase;
}
#brand-mark .led {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--led);
    box-shadow: 0 0 4px var(--led-glow);
    align-self: center;
}

/* Don't show brand mark when chart fills the stage — would overlap. Keep
   subtle: it stays, but with a very low contrast over chart area. */

/* ---------- Misc safety: tighten anything inline-styled in old CSS ----- */

#spline-points-list {
    border: 1px solid var(--rule) !important;
    border-radius: var(--r-1) !important;
}

/* Make the "Select Group »" button match other inputs visually */
#space-group-open-modal {
    background: var(--bg-inset) !important;
    border: 1px solid var(--rule) !important;
    color: var(--fg) !important;
    text-align: left !important;
    padding-left: 10px !important;
}
#space-group-open-modal:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}


/* ---------- Space-group probability test (Markvardsen et al. 2001) ---------- */

.sg-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 6px 0;
}
.sg-info-row > #space-group-info {
    flex: 1 1 auto;
    margin: 0 !important;
}
#sg-test-button {
    flex: 0 0 auto;
    margin-left: auto;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--bg-inset);
    color: var(--fg-2);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .12s, border-color .12s, background .12s;
}
#sg-test-button:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--bg-stage);
}
#sg-test-button:disabled { opacity: .3; cursor: not-allowed; }

.sgt-intro { font-size: 11.5px; line-height: 1.5; color: var(--fg-2); }
.sgt-note  { font-size: 10.5px; line-height: 1.5; color: var(--fg-3); }

.sgt-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 11.5px;
}
.sgt-table th {
    text-align: left;
    padding: 4px 8px 5px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 9.5px;
    white-space: nowrap;
}
.sgt-table td {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
    color: var(--fg);
}
.sgt-table tr.sgt-top td { background: var(--bg-inset); }
.sgt-num { text-align: right; font-family: var(--font-mono); color: var(--fg-2); white-space: nowrap; }

.sgt-bar {
    height: 5px;
    width: 100%;
    background: var(--bg-stage);
    border: 1px solid var(--rule-soft);
    border-radius: 2px;
    overflow: hidden;
}
.sgt-bar > span { display: block; height: 100%; background: var(--accent); }
.sgt-pct { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-2); margin-top: 2px; }

.sgt-chip {
    display: inline-block;
    margin: 0 4px 3px 0;
    padding: 2px 7px;
    border-radius: var(--r-1);
    border: 1px solid var(--rule);
    background: var(--bg-inset);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
}
.sgt-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-stage); }
.sgt-more { font-size: 10px; color: var(--fg-3); margin-left: 2px; }
.sgt-flag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: var(--r-1);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--warning);
    border: 1px solid rgba(214,138,42,0.45);
    background: rgba(214,138,42,0.10);
}

/* ============================================================================
   CHARGE FLIPPING & RIGHT-PANEL RESULTS TABS
   Moved here from an inline <style> block in powder5.html so all styling
   lives in one place. These rules use the same --system-* / theme tokens as
   the rest of this sheet, so they follow light/dark automatically.
   ============================================================================ */
.cf-summary-grid {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
    font-size: 12px; margin-bottom: 12px;
}
.cf-summary-grid dt { color: var(--system-secondary-label); }
.cf-summary-grid dd { margin: 0; font-variant-numeric: tabular-nums; }
.cf-peak-table {
    width: 100%; border-collapse: collapse; font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.cf-peak-table th, .cf-peak-table td {
    padding: 3px 6px; text-align: right; white-space: nowrap;
}
.cf-peak-table th {
    text-align: right; font-weight: 600; position: sticky; top: 0;
    background: var(--system-background, #1c1c1e);
    color: var(--system-secondary-label);
    border-bottom: 1px solid var(--system-gray-5);
}
.cf-peak-table th:first-child, .cf-peak-table td:first-child { text-align: left; }
.cf-peak-table tbody tr:nth-child(even) { background: rgba(127,127,127,0.06); }
.cf-table-scroll { max-height: 240px; overflow-y: auto; }
/* ---------- Charge-flipping density section ----------
   Three columns: the map with its colour bar and caption, the controls that
   choose what is drawn, and the exports. Flex rather than grid so a narrow
   right-hand panel wraps the columns instead of crushing them. */
.cf-section-grid {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
}
/* The section image, its colour bar and the tick labels form one figure, so
   the bar always sits directly under the map it describes and matches its
   width however the panel is resized. */
.cf-section-figure {
    flex: 1 1 260px; min-width: 190px; max-width: 520px;
    display: flex; flex-direction: column; gap: 4px;
}
#cf-section-canvas {
    image-rendering: pixelated;
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
    border: 1px solid var(--system-gray-5); border-radius: 6px;
}
#cf-section-scalebar {
    display: block; width: 100%; height: 10px;
    border: 1px solid var(--system-gray-5); border-radius: 3px;
}
/* The 3D canvas matches the section image so the two read as a pair.
   touch-action is off because the pointer handlers own drag and wheel. */
#cf-iso-canvas {
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
    border: 1px solid var(--system-gray-5); border-radius: 6px;
    background: transparent; cursor: grab; touch-action: none;
}
#cf-iso-canvas:active { cursor: grabbing; }
.cf-scale-ticks {
    display: flex; justify-content: space-between;
    font-variant-numeric: tabular-nums;
}
/* Deliberately narrow: at full width the select and the range input dwarfed
   the map they control. */
.cf-section-controls { flex: 0 1 190px; min-width: 150px; }
.cf-section-controls .control-select,
.cf-section-controls input[type="range"] { width: 100%; }
.cf-section-controls input[type="range"] { margin: 2px 0 4px; display: block; }
.cf-checkbox-label {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 10px;
    cursor: pointer; font-weight: 400; font-size: 11px;
    color: var(--system-secondary-label); line-height: 1.35;
}
.cf-checkbox-label input { margin: 1px 0 0; flex: none; }
/* Export buttons, matching the Save Report treatment used in the run-history
   panels: same width, hard right. */
.cf-export-column {
    flex: 0 0 auto; margin-left: auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.cf-export-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.cf-hint { font-size: 11px; color: var(--system-secondary-label); }
.cf-warn {
    font-size: 11px; margin-top: 8px; padding: 6px 8px; border-radius: 6px;
    background: rgba(255,159,10,0.12); color: var(--system-orange, #ff9f0a);
}
/* Neutral toast variant used by the charge-flipping cancel path.
   (.toast.error and .toast.success are defined above.) */
.toast.info {
    background: var(--system-gray-5, #3a3a3c);
    color: var(--system-label, #f2f2f7);
}

/* ---- Right-panel results tabs ---- */
#rp-tabbar {
    display: flex; gap: 2px; align-items: flex-end;
    /* extra right padding leaves room for the floating mode-toggle
       and help icon (both absolute at the top-right) */
    padding: 6px 92px 0 10px; flex: 0 0 auto;
    border-bottom: 1px solid var(--system-gray-5);
    position: relative; z-index: 40;
}
.rp-tab {
    appearance: none; border: none; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600;
    padding: 7px 14px; border-radius: 8px 8px 0 0;
    color: var(--system-secondary-label);
    background: transparent; white-space: nowrap;
}
.rp-tab:hover { color: var(--system-label); }

.rp-tab.active {
    color: var(--fg);
    /* Uses the theme's solid gray to pop out against the dark canvas */
    background: var(--rule-soft); 
    border-radius: 4px;
    box-shadow: var(--shadow-1);
}
.rp-tab:disabled { opacity: 0.4; cursor: default; }
#rp-panels { position: relative; flex: 1 1 auto; min-height: 0; }
.rp-panel { display: none; position: absolute; inset: 0; }
.rp-panel.active { display: block; }
/* The Plot panel hosts the chart machinery and must fill the area
   exactly as the old results-area did, so it is a full-size flow box
   rather than a scroller. */
#rp-panel-plot { display: none; }
#rp-panel-plot.active { display: block; }
/* The three results panels scroll their content. */
#rp-panel-lebail, #rp-panel-pawley, #rp-panel-cf { overflow-y: auto; padding: 14px 16px; }
.rp-results-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.rp-results-head h2 { margin: 0; }
/* The picker and the export buttons are stacked, both right-aligned, so the
   right edge of Generate PDF lines up with the right edge of the Run selector
   instead of drifting with the button text. */
.rp-results-actions {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    margin-left: auto;
}
.rp-run-picker { display: flex; align-items: center; gap: 8px; }
.rp-action-row { display: flex; justify-content: flex-end; gap: 8px; }
.rp-run-label { font-size: 12px; color: var(--system-secondary-label); }
/* A fixed width, not a minimum. As a flex item the selector inherited
   width:100% from .control-select and so came out a different size on the
   Charge Flipping tab, where it has no buttons beside it to compete with.
   308px = two action buttons plus the gap between them, which is what makes
   the two stacked rows share a right edge. */
.rp-run-select {
    width: 308px; min-width: 308px; flex: 0 0 auto; height: auto;
}
/* One width for every export button in the right-hand panels, so Save Report,
   Generate PDF and the charge-flipping exports all match. The horizontal
   padding is trimmed from the .btn default of 16px to keep the longest label
   inside that width at 12px uppercase with letter-spacing. */
.rp-action-btn {
    width: 150px; min-width: 150px; flex: 0 0 auto; padding: 0 12px;
}
.rp-empty { font-size: 13px; color: var(--system-secondary-label); padding: 20px 0; }
.rp-run-meta {
    font-size: 12px; color: var(--system-secondary-label);
    margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.rp-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px; margin-bottom: 14px;
}
.rp-stat-card {
    background: var(--system-gray-6, rgba(127,127,127,0.08));
    border-radius: 8px; padding: 8px 10px;
}
.rp-stat-card .k { font-size: 11px; color: var(--system-secondary-label); }
.rp-stat-card .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes rpFlash { 0%,100% { background: transparent; } 30% { background: var(--system-blue, #0a84ff); color:#fff; } }
.rp-tab-flash { animation: rpFlash 1.2s ease; }
/* #3: compact, evenly-sized export buttons in the CF results, instead
   of three stacked full-width bars. */
.cf-btn-row { display: flex; gap: 8px; margin-top: 12px; }
.cf-btn-row .btn { flex: 1; }
/* A disabled left-panel tab (e.g. Charge before a Pawley fit exists)
   must read clearly as unavailable. */
.tab-btn:disabled,
.tab-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--system-secondary-label);
}
.tab-btn:disabled:hover,
.tab-btn[disabled]:hover { color: var(--system-secondary-label); }


/* --- 3D isosurface: per-site legend -------------------------------------
   One row per unique site: rank, the colour density3d.js draws it in, the
   peak height and a show/hide toggle. It sits in the controls column where
   the old "Atom positions" checkbox was; "hide all" does what that checkbox
   used to do, one row at a time or all at once.

   The list shows ten rows and scrolls beyond that, so a solution with forty
   sites cannot push the rest of the panel off the screen. The cap is written
   in rows rather than pixels, and the row height is fixed, so the two cannot
   disagree about what ten rows measures. */
.cf-site-legend {
    --cf-site-row-h: 20px;
    --cf-site-rows: 10;
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 10px; width: 100%;
}
.cf-site-legend.hidden { display: none; }
.cf-site-legend-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 6px; font-size: 11px; color: var(--system-secondary-label);
    font-weight: 500; flex: none;
}
.cf-site-legend-all {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--system-blue, #0a84ff); text-decoration: underline;
}
.cf-site-legend-all:hover { opacity: 0.75; }
.cf-site-legend-all:disabled {
    color: var(--system-secondary-label); text-decoration: none;
    cursor: default; opacity: 0.5;
}
.cf-site-legend-list {
    overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--system-gray-5); border-radius: 6px;
    padding: 2px;
    /* ten rows, plus this element's own padding and borders */
    max-height: calc(var(--cf-site-row-h) * var(--cf-site-rows) + 6px);
}
.cf-site-row {
    display: flex; align-items: center; gap: 6px;
    box-sizing: border-box; height: var(--cf-site-row-h);
    padding: 0 4px; border-radius: 4px;
    font-size: 11px; line-height: 1;
    color: var(--system-label, inherit);
    cursor: pointer; user-select: none;
    font-variant-numeric: tabular-nums;
}
.cf-site-row:hover { background: var(--system-gray-6, rgba(127,127,127,0.14)); }
.cf-site-row.is-hidden { opacity: 0.4; }
.cf-site-rank { flex: none; width: 1.6em; text-align: right; font-weight: 600; }
.cf-site-swatch {
    flex: none; width: 11px; height: 11px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
}
.cf-site-row.is-hidden .cf-site-swatch { background: transparent !important; }
.cf-site-height { flex: 1 1 auto; text-align: right; }
.cf-site-mult { flex: none; color: var(--system-secondary-label); }
.cf-site-eye { flex: none; width: 13px; text-align: center; opacity: 0.75; }
.cf-site-legend-empty {
    padding: 4px; font-size: 11px; color: var(--system-secondary-label);
}