/* =================================================================
   settings-panel.css — Preferences window.
   Left-sidebar nav + card-based content; also the new accent /
   appearance widgets (swatches, preset templates, token pills), the
   prefs-zoom row (grid zoom slider), and the settings panel's own
   preview / library-root / path-row chrome. Keeps "shared dialog
   chrome" in modals.css.
   ================================================================= */

.prefs-zoom-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prefs-zoom-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent-primary);
}

.prefs-zoom-label {
    min-width: 48px;
    text-align: right;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

/* =================================================================
   Settings window — left-sidebar nav + card-based content
   ================================================================= */

.prefs-content {
    /* Settings window aims for 880×640 — collapses gracefully on 720p
       desktops where the available width inside a 1280px viewport
       (minus the 240px sidebar) is only ~1040px. min() keeps the
       intent ("at most 880px") clear and reachable on every res. */
    width: min(880px, 96vw) !important;
    max-width: 96vw !important;
    height: min(640px, 92vh) !important;
    max-height: 92vh !important;
    display: grid !important;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 1fr;
    overflow: hidden !important;
    padding: 0;
}

/* ---- Left sidebar nav ---- */
.prefs-nav {
    background: var(--bg-dark);
    border-right: 1px solid var(--border-subtle);
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.prefs-nav-header {
    padding: 4px 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 10px;
}

.prefs-nav-header h2 {
    font-size: 16px;
    margin: 0;
    font-weight: 700;
}

.prefs-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.prefs-nav-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.prefs-nav-item.active {
    background: rgba(var(--accent-primary-rgb), 0.12);
    color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.2);
}

.prefs-nav-item .icon-svg {
    opacity: 0.8;
}
.prefs-nav-item.active .icon-svg { opacity: 1; }

/* ---- Category groups in the nav rail ---- */
.prefs-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.prefs-nav-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, var(--text-secondary));
    opacity: 0.65;
    padding: 8px 12px 4px;
    user-select: none;
}

/* ---- Search box at the top of the nav rail ---- */
.prefs-search {
    position: relative;
    margin-top: 10px;
}

.prefs-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 28px 7px 30px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.prefs-search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.prefs-search-input:focus {
    outline: none;
    border-color: rgba(var(--accent-primary-rgb), 0.5);
    background: var(--bg-dark);
}

.prefs-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    opacity: 0.7;
    pointer-events: none;
    display: inline-flex;
}

.prefs-search-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prefs-search-clear:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.prefs-search-empty {
    padding: 12px;
    margin: 4px 4px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
    border: 1px dashed var(--border-subtle);
    border-radius: 8px;
}

/* ---- Search hit/miss highlighting on cards ---- */
/* When the search filter is active, every card gets either .search-hit
   or .search-miss. Misses dim out so the user's eye lands on hits. */
.prefs-card.search-miss {
    opacity: 0.35;
    filter: saturate(0.6);
    transition: opacity 0.15s ease, filter 0.15s ease;
}
.prefs-card.search-hit {
    border-color: rgba(var(--accent-primary-rgb), 0.45);
    box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb), 0.25),
                0 4px 12px rgba(var(--accent-primary-rgb), 0.08);
}

/* ---- Right body ---- */
.prefs-body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 0;
    overflow: hidden;
}

.prefs-body-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle);
}

.prefs-body-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.prefs-scroll {
    padding: 22px;
    overflow-y: auto;
    min-height: 0;
}

.prefs-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-card);
}

/* ---- Panels ---- */
.prefs-panel { display: none; }
.prefs-panel.visible { display: block; animation: fadeIn 0.18s ease-out; }

.prefs-card {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.prefs-card-head {
    margin-bottom: 14px;
}

.prefs-card-head h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
}

.prefs-card-head p {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.prefs-card-head code {
    background: var(--overlay-selected);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--accent-primary);
}

/* Inline tag next to a card heading — used for "Recommended" / "Beta"
   labels that signpost a feature without inflating the heading text. */
.prefs-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.5;
}
.prefs-badge-recommended {
    background: rgba(var(--accent-primary-rgb), 0.18);
    color: var(--accent-primary);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
}

.prefs-field {
    margin-top: 14px;
}

.prefs-field:first-child {
    margin-top: 0;
}

.prefs-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}

.prefs-label-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--text-muted);
    font-size: 10px;
}

.prefs-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.prefs-input:hover {
    border-color: var(--border-strong);
}

.prefs-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.04);
}

/* Work/movement catalogue-marker textarea: monospace so commas/spaces are
   visible and the user can see exactly what will be matched. */
.prefs-markers-input {
    font-family: "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
    font-size: 12.5px;
    min-height: 96px;
    resize: vertical;
    line-height: 1.7;
    white-space: pre;
}

.prefs-mono {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
}

.prefs-path-row {
    display: flex;
    gap: 8px;
}

.prefs-path-row .prefs-input,
.prefs-path-row #settings-library-root {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* ---- Live preview card ---- */
.prefs-preview-card {
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.06), rgba(var(--accent-cyan-rgb), 0.02));
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.25);
    border-radius: 10px;
}

.prefs-preview-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-cyan);
    font-weight: 700;
    margin-bottom: 8px;
}

.prefs-preview-path {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.6;
}

/* ---- Section subheaders ---- */
.prefs-subhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 18px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.prefs-subhead h5 {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-secondary);
    font-weight: 700;
}

.prefs-subhead-hint {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Presets ---- */
.prefs-presets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.prefs-preset {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.prefs-preset:hover {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.04);
}

.prefs-preset-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.prefs-preset-tpl {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.prefs-preset-tpl code {
    background: transparent;
    padding: 0;
    color: var(--accent-primary);
}

/* ---- Token pills ---- */
.prefs-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.token-pill {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.1s ease;
}

.token-pill:hover {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.06);
    transform: translateY(-1px);
}

.token-pill code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--accent-primary);
    background: transparent;
    padding: 0;
}

/* ---- Radio group (Import section) ---- */
.prefs-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prefs-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.prefs-radio:hover {
    border-color: rgba(var(--accent-primary-rgb), 0.3);
}

.prefs-radio.checked {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.06);
}

.prefs-radio input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.prefs-radio > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.prefs-radio strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.prefs-radio span {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.prefs-radio code {
    background: var(--overlay-selected);
    padding: 0 4px;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 10px;
}

/* ---- Toggle switch — same visual language as .prefs-radio, but binary. ---- */
.prefs-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.prefs-switch + .prefs-switch {
    margin-top: 8px;
}

/* Flat variant used inside .prefs-stat-row — the row already provides
   its own background + border + grip. */
.prefs-switch-flat {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 !important;
}

/* ---- Draggable stat-row picker (Settings → Home / Library tabs). ---- */
.prefs-stat-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prefs-stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.05s ease;
}
.prefs-stat-row:hover {
    border-color: var(--border-strong);
}
.prefs-stat-row.dragging {
    opacity: 0.45;
    cursor: grabbing;
    transform: scale(0.99);
}
.prefs-stat-row.drop-above {
    box-shadow: 0 -2px 0 0 var(--accent-primary, #ff6b35) inset;
}
.prefs-stat-row.drop-below {
    box-shadow: 0 2px 0 0 var(--accent-primary, #ff6b35) inset;
}
.prefs-stat-grip {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: grab;
    user-select: none;
    padding: 4px 6px;
    letter-spacing: -2px;
}
.prefs-stat-grip:active { cursor: grabbing; }

.prefs-switch:hover {
    border-color: rgba(var(--accent-primary-rgb), 0.3);
}

.prefs-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.prefs-switch-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--border-strong);
    border-radius: 999px;
    flex: 0 0 auto;
    transition: background 0.15s ease;
}

.prefs-switch-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text-on-accent);
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.prefs-switch input[type="checkbox"]:checked + .prefs-switch-slider {
    background: var(--accent-primary);
}

.prefs-switch input[type="checkbox"]:checked + .prefs-switch-slider::after {
    transform: translateX(16px);
}

.prefs-switch-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.prefs-switch-label strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.prefs-switch-label span {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ---- Appearance: accent color ---- */
.prefs-accent-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.prefs-accent-row input[type="color"] {
    width: 56px;
    height: 40px;
    padding: 3px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
}

.prefs-swatches {
    display: flex;
    gap: 8px;
}

.settings-swatch.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-dark), 0 0 0 3px var(--accent-primary);
    transform: scale(1.05);
}

.settings-path-row {
    display: flex;
    gap: 8px;
}

.settings-path-row input {
    flex: 1;
}

.settings-color-swatches {
    display: flex;
    gap: 6px;
}

.settings-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, border-color 0.15s ease;
}

.settings-swatch:hover {
    transform: scale(1.15);
    border-color: var(--border-strong);
}

.settings-preview {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px;
}

.settings-preview-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.settings-preview-path {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    color: var(--accent-cyan);
    word-break: break-all;
}

.settings-tokens {
    margin-top: 10px;
}

.settings-tokens-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.settings-tokens-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}

.token-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.token-item:hover {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.05);
}

.token-item code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--accent-primary);
    white-space: nowrap;
}

.token-desc {
    color: var(--text-muted);
    font-size: 11px;
}

/* ---- Audio section helpers ---- */
.prefs-muted {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.4;
}

.prefs-radio-disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Align the test-tone status next to the button in the Audio section. */
.prefs-panel[data-panel="audio"] .prefs-field button + .prefs-muted {
    margin-top: 0;
    margin-left: 12px;
    align-self: center;
    display: inline-block;
}

.prefs-panel[data-panel="audio"] #settings-audio-test-card .prefs-field {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =================================================================
   Tag Fields panel (Settings → Tag Fields).
   Lists every mp3tag-mappable field grouped by category. Each row
   has a checkbox, the field key, and a per-format support legend.
   Tier-1 fields are locked-on with a small lock icon.
   ================================================================= */
.tf-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 12px;
}
.tf-preset-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-right: 4px;
}
.tf-sections {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tf-section {
    background: var(--overlay-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
}
.tf-section[open] {
    background: var(--overlay-hover);
}
.tf-section-head {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    color: var(--text-primary);
    font-weight: 600;
}
.tf-section-head::-webkit-details-marker { display: none; }
.tf-section-head::before {
    content: "▸";
    margin-right: 8px;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.tf-section[open] .tf-section-head::before {
    transform: rotate(90deg);
    display: inline-block;
}
.tf-section-count {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--overlay-hover);
    padding: 2px 8px;
    border-radius: 10px;
}
.tf-section-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-subtle);
}
.tf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--overlay-hover);
    cursor: pointer;
    transition: background 0.1s;
}
.tf-row:last-child { border-bottom: none; }
.tf-row:hover { background: var(--overlay-hover); }
.tf-row-locked { cursor: default; opacity: 0.85; }
.tf-row-locked:hover { background: transparent; }
.tf-checkbox { flex: 0 0 auto; }
.tf-row-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tf-row-label { font-size: 13px; color: var(--text-primary); }
.tf-row-key { font-size: 10.5px; color: var(--text-muted); font-family: Consolas, "SF Mono", monospace; }
.tf-row-formats { display: flex; gap: 6px; flex: 0 0 auto; }
.tf-fmt {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
}
.tf-fmt-on  { background: rgba(255,107,53,0.18); color: var(--accent-color, #ff6b35); }
.tf-fmt-off { background: var(--overlay-hover); color: rgba(255,255,255,0.25); }
.tf-row-lock {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted);
}
.tf-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    gap: 8px;
}


/* ---- Tag Fields drag-reorder + lock indicators -------------------- */
.tf-section-drag,
.tf-section-locked {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-family: Consolas, "SF Mono", monospace;
    font-size: 12px;
    line-height: 1;
    margin-right: 6px;
    user-select: none;
    cursor: grab;
}
.tf-section-locked { cursor: default; opacity: 0.55; }
.tf-section-fixed > .tf-section-head { background: rgba(255,255,255,0.012); }
.tf-section-draggable[draggable="true"] > .tf-section-head { cursor: grab; }
.tf-dragging { opacity: 0.45; }
.tf-drop-above { box-shadow: 0 -2px 0 var(--accent-color, #ff6b35); }
.tf-drop-below { box-shadow: 0  2px 0 var(--accent-color, #ff6b35); }

/* =====================================================================
   Theme picker (Settings → Appearance) + theme editor modal.
   The picker is a row of: dropdown + New theme button + Edit + Delete.
   The editor is a tabbed modal: Quick (anchor-driven) + Advanced
   (full token grid). Live-previews into :root via AuditoraThemes.
   ===================================================================== */
.prefs-theme-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.prefs-theme-row #settings-theme {
    flex: 1 1 220px;
    min-width: 200px;
}

/* Editor modal — wide so the Advanced grid has room for ~30 tokens
   without horizontal scroll. */
.theme-editor-content {
    width: min(760px, 95vw);
    max-width: 95vw;
    max-height: 90vh;
}
.theme-edit-meta {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px 14px;
    margin-bottom: 14px;
}
.theme-edit-meta-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.theme-edit-meta-row input,
.theme-edit-meta-row select {
    background: var(--surface-card, var(--bg-card));
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
}
.theme-edit-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 14px;
}
.theme-edit-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-size: 13px;
}
.theme-edit-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}
.theme-edit-intro {
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 0 0 12px 0;
    line-height: 1.45;
}
.theme-edit-anchors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.theme-edit-anchor {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.theme-edit-anchor input[type="color"] {
    width: 100%;
    height: 32px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.theme-edit-anchor select {
    background: var(--surface-card, var(--bg-card));
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
}

.theme-edit-section-head {
    margin: 14px 0 6px 0;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
}
.theme-edit-section-head:first-child {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}
.theme-edit-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}
.theme-edit-row {
    display: grid;
    grid-template-columns: 1fr 36px auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.theme-edit-label {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theme-edit-row input[type="color"] {
    width: 36px;
    height: 26px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.theme-edit-row input[type="text"] {
    grid-column: 2 / 4;
    background: var(--surface-card, var(--bg-card));
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-family: ui-monospace, monospace;
}
.theme-edit-key {
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--text-muted);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* =================================================================
   Track-grouping levels list (Settings → Navigation → Track grouping)
   ================================================================= */

.prefs-tg-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prefs-tg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: grab;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.prefs-tg-row:hover {
    border-color: var(--text-secondary);
    background: var(--bg-card-hover);
}

.prefs-tg-row.prefs-tg-dragging {
    opacity: 0.5;
}

.prefs-tg-row.prefs-tg-drop-above {
    box-shadow: 0 -2px 0 0 var(--accent-primary);
}
.prefs-tg-row.prefs-tg-drop-below {
    box-shadow: 0 2px 0 0 var(--accent-primary);
}

.prefs-tg-grip {
    color: var(--text-muted);
    font-size: 14px;
    width: 16px;
    text-align: center;
    line-height: 1;
    user-select: none;
}

.prefs-tg-pos {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
    color: var(--accent-primary);
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prefs-tg-label {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.prefs-tg-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.prefs-tg-remove:hover {
    color: var(--state-danger);
    background: color-mix(in srgb, var(--state-danger) 10%, transparent);
}

.prefs-tg-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
    font-style: italic;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-subtle);
    border-radius: 8px;
    list-style: none;
}

.prefs-tg-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.prefs-tg-add-row .prefs-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* =================================================================
   Cache resync progress bar (Settings → Library → Local cache)
   ================================================================= */

.prefs-cache-progress {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prefs-cache-progress[hidden] {
    display: none;
}

/* Live lock-status line under the toggle. Subtle accent border so it
   reads as live status info, not as a critical warning. */
.prefs-cache-lock-status {
    margin: 10px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    background: rgba(var(--accent-primary-rgb), 0.08);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.20);
    border-radius: 6px;
}
.prefs-cache-lock-status[hidden] {
    display: none;
}

.prefs-cache-progress-bar {
    height: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.prefs-cache-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg,
        var(--accent-primary),
        color-mix(in srgb, var(--accent-primary) 60%, white));
    transition: width 0.25s ease;
    border-radius: 999px;
}

.prefs-cache-progress-label {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- Discord Rich Presence connection-status pill ----
   The dot's data-state attribute carries the live state — green for
   connected, amber for "enabled but Discord not running" or "client
   ID unset", grey for "feature off". The text next to it explains
   exactly what the user needs to do, if anything. */
.prefs-discord-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.prefs-discord-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.prefs-discord-dot[data-state="on"] {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.55), 0 0 0 2px rgba(46, 204, 113, 0.25);
}
.prefs-discord-dot[data-state="warn"] {
    background: var(--state-warning, #f7c548);
    box-shadow: 0 0 8px rgba(247, 197, 72, 0.45), 0 0 0 2px rgba(247, 197, 72, 0.25);
}
.prefs-discord-dot[data-state="off"] {
    background: var(--text-muted);
    opacity: 0.6;
}

.prefs-discord-status-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- About panel ---- */
.about-hero {
    text-align: center;
    padding: 28px 24px;
}
.about-hero h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.about-tagline {
    margin: 0 0 18px;
    color: var(--text-muted, #999);
    font-size: 13px;
    line-height: 1.5;
}
.about-hero-meta {
    display: inline-grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
    font-size: 12.5px;
    text-align: left;
}
.about-hero-meta dt {
    color: var(--text-muted, #999);
    font-weight: 500;
}
.about-hero-meta dd {
    margin: 0;
}

.about-credits {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.about-credit {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13.5px;
}
.about-credit:last-child {
    border-bottom: none;
}
.about-credit-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 4px;
}
.about-credit-name {
    color: var(--text-primary, #f5f5f5);
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
}
.about-credit-name:hover {
    color: var(--accent, #b078ff);
    text-decoration: underline;
}
.about-credit-license {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 3px 10px;
    color: var(--text-muted, #999);
    font-size: 11px;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.about-credit-license:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #f5f5f5);
    border-color: rgba(255, 255, 255, 0.18);
}
.about-credit-license-chevron {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    color: var(--text-muted, #999);
    transition: transform 150ms ease;
}
.about-credit-license[aria-expanded="true"] .about-credit-license-chevron {
    transform: rotate(90deg);
}
.about-credit-license[aria-expanded="true"] {
    background: rgba(176, 120, 255, 0.08);
    border-color: rgba(176, 120, 255, 0.25);
    color: var(--accent, #b078ff);
}
.about-credit-text {
    margin: 4px 4px 12px;
}
.about-licenses {
    max-height: 320px;
    overflow: auto;
    padding: 14px;
    margin: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-muted, #c0c0c0);
}

/* Marker pills (Appearance -> catalogue numbers). One pill per marker,
   pill order = sort priority. Commits on Enter; arrows reorder. */
.marker-pills {
    position: relative;
    width: 100%;
}

.marker-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.marker-pills-list:empty {
    margin-bottom: 0;
}

.marker-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px 3px 10px;
    background: rgba(var(--accent-primary-rgb, 74,144,226), 0.14);
    border: 1px solid rgba(var(--accent-primary-rgb, 74,144,226), 0.35);
    color: var(--text-primary);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.2;
    user-select: none;
}

.marker-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.marker-pill-move,
.marker-pill-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary, #9aa0ac);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.marker-pill-move:hover:not(:disabled),
.marker-pill-x:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary, #fff);
}

.marker-pill-move:disabled {
    opacity: 0.25;
    cursor: default;
}

.marker-pills-input-row {
    position: relative;
}

.marker-pills-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-dark);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}

.marker-pills-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.marker-pills-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 180px;
    overflow-y: auto;
    background: var(--bg-card, #16181d);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 8px;
    padding: 4px;
}

.marker-pills-item {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}

.marker-pills-item.active,
.marker-pills-item:hover {
    background: rgba(var(--accent-primary-rgb, 74,144,226), 0.18);
}

/* =============================================================================
   Streaming server panel (settings/sections/server.js)

   Purpose-built rather than assembled from generic prefs-field boxes: the
   status line and the URL list are the most-read part of this panel (people
   open it to get the address to type on a phone), so they get real styling.
   Everything else is deliberately quiet: segmented choices over dropdowns,
   two-column field grids that collapse on narrow windows, and the tuning
   knobs behind a <details>.
   ========================================================================== */

.srv-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

.srv-urls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.srv-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 7px 8px 7px 10px;
}

.srv-url-scheme {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.srv-url-scheme.secure {
    background: rgba(var(--accent-primary-rgb, 74,144,226), 0.18);
    color: var(--accent-primary);
}

.srv-url-scheme.plain {
    background: rgba(224, 160, 60, 0.18);
    color: #d99a3c;
}

.srv-url-value {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: all;
}

.srv-copy {
    flex-shrink: 0;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11.5px;
    cursor: pointer;
}

.srv-copy:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.srv-warn {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    background: rgba(224, 160, 60, 0.12);
    border: 1px solid rgba(224, 160, 60, 0.35);
    color: #e0b775;
}

.srv-warn strong {
    color: #f0c98d;
}

/* ---- Segmented choice ---- */
.srv-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    flex-wrap: wrap;
}

.srv-seg-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.srv-seg-btn:hover {
    color: var(--text-primary);
}

.srv-seg-btn.active {
    background: rgba(var(--accent-primary-rgb, 74,144,226), 0.2);
    color: var(--accent-primary);
    font-weight: 600;
}

/* ---- Field grid ---- */
.srv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 16px;
    margin-top: 14px;
}

.srv-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.srv-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.srv-field input,
.srv-field select {
    width: 100%;
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 7px;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
}

.srv-field input:focus,
.srv-field select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.srv-field input[type=number] {
    font-variant-numeric: tabular-nums;
}

.srv-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: .85;
}

.srv-input-suffix {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.srv-input-suffix input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.srv-input-suffix span {
    display: flex;
    align-items: center;
    padding: 0 9px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-left: none;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    white-space: nowrap;
}

.srv-pathrow {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.srv-pathrow .srv-field {
    flex: 1;
}

.srv-browse {
    flex-shrink: 0;
    margin-bottom: 1px;
}

/* ---- Collapsed advanced block ---- */
.srv-details summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 2px 0;
}

.srv-details summary::-webkit-details-marker {
    display: none;
}

.srv-details summary::before {
    content: "▸";
    font-size: 11px;
    color: var(--text-secondary);
    transition: transform .15s ease;
}

.srv-details[open] summary::before {
    transform: rotate(90deg);
}

.srv-summary-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: .8;
}

/* ---- Accounts ---- */
.srv-users {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.srv-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    background: var(--bg-light);
    /* The row opens the account card, so it has to look clickable and answer
       the keyboard. `cursor` alone is not enough — a row that cannot be
       Tab-reached is a trap for anyone not using a mouse. */
    cursor: pointer;
    transition: border-color 0.12s ease-out, background 0.12s ease-out;
}
.srv-user:hover {
    border-color: var(--border-strong, #444);
    background: var(--bg-lighter, #26262e);
}
.srv-user:focus-visible {
    outline: 2px solid var(--accent, #7c6cf0);
    outline-offset: 2px;
}

/* The small face in each row. Square-ish rather than a circle, to match the
   rounded card it sits in. */
.srv-user-face {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    color: var(--text-secondary, #aaa);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}
.srv-user-face img {
    width: 100%;
    height: 100%;
    /* Same reasoning as the modal picture: never crop someone's face/logo. */
    object-fit: contain;
    display: block;
}

/* The description, as a quiet second line under the name. Capped to one line
   so a long bio cannot push the row's controls out of line. */
.srv-user-bio {
    flex-basis: 100%;
    color: var(--text-secondary, #aaa);
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: -2px;
}

.srv-user-name {
    font-weight: 600;
    font-size: 13.5px;
    min-width: 8rem;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srv-user select {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 12.5px;
    cursor: pointer;
}

.srv-user .srv-check {
    margin-right: auto;
}

.srv-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.srv-check input {
    cursor: pointer;
    margin: 0;
    accent-color: var(--accent-primary);
}

.srv-user button {
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12.5px;
    cursor: pointer;
}

.srv-user button:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.srv-user button.srv-danger:hover {
    border-color: #d96a5a;
    color: #d96a5a;
}

.srv-user button[disabled] {
    opacity: .45;
    cursor: default;
}

.srv-empty {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 10px 12px;
    border: 1px dashed var(--border-subtle);
    border-radius: 9px;
    text-align: center;
}

.srv-add {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.srv-add-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* ============================================================================
   Server account card
   ============================================================================
   Opened by clicking an account in the streaming-server list. Centred in the
   window, above everything (the settings panel is itself a modal, so the
   z-index has to clear it), with the picture large at the top — that image is
   the reason to open this screen at all. */
.srv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    /* Above .modal-overlay (the settings panel itself), which is 120000. */
    z-index: 130000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: srvModalFade 0.14s ease-out;
}
@keyframes srvModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.srv-modal {
    position: relative;
    width: 420px;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 28px 22px;
    border-radius: 16px;
    border: 1px solid var(--border-strong, #3a3a44);
    background: var(--surface-elevated, #22222c);
    color: var(--text-primary, #eee);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* The large picture. A circle, because a face reads as a face. Falls back to
   the first letter of the name at the same size, so the block never collapses
   and the layout below does not jump when a picture is added or removed. */
.srv-modal-pic {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* `box-sizing` keeps the padding inside the 132px, so the circle does not
     * grow when a picture needs breathing room. */
    box-sizing: border-box;
    padding: 6px;
    background: var(--bg-dark, #14141a);
    border: 2px solid var(--border-subtle, #333);
    color: var(--text-secondary, #aaa);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.srv-modal-pic img {
    width: 100%;
    height: 100%;
    /* `contain`, not `cover`.
     *
     * `cover` scales the picture until it fills the circle and then throws the
     * overflow away. For album art that is right — a cover is a square photo
     * and cropping a square is invisible. An ACCOUNT PICTURE is different: a
     * logo is usually wide, and filling a circle with it cut off most of the
     * image, leaving unreadable fragments of the letters.
     *
     * `contain` shows the whole picture and centres it, letterboxing only the
     * bars a non-square image leaves behind. Nothing is ever lost, which is the
     * only honest thing to do with something a person chose to represent
     * themselves.
     */
    object-fit: contain;
    display: block;
}
/* The letter fallback used to be the container's own text node. It is now a
   child <span>, swapped against the <img> when a picture is set or removed, so
   it has to carry the same type treatment itself. */
.srv-modal-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.srv-modal-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #eee);
    word-break: break-word;
}
.srv-modal-sub {
    font-size: 12.5px;
    color: var(--text-secondary, #aaa);
    margin-bottom: 18px;
}

.srv-modal-label {
    align-self: flex-start;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #aaa);
    margin-bottom: 6px;
}
.srv-modal-bio {
    align-self: stretch;
    min-height: 42px;
    max-height: 96px;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, #333);
    background: var(--bg-dark, #14141a);
    color: var(--text-primary, #eee);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
    resize: vertical;
    box-sizing: border-box;
}
.srv-modal-bio:focus {
    outline: none;
    border-color: var(--accent, #7c6cf0);
}

.srv-modal-foot {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}
.srv-modal-count {
    font-size: 11.5px;
    color: var(--text-secondary, #aaa);
    font-variant-numeric: tabular-nums;
}
.srv-modal-save {
    padding: 6px 16px;
    border-radius: 7px;
    border: 1px solid var(--border-subtle, #333);
    background: var(--accent, #7c6cf0);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.srv-modal-save:disabled {
    /* A dimmed accent fill on a dark card reads as a rendering glitch rather
       than a disabled control — at 0.4 the purple was still the only saturated
       thing in the row, so it looked like a broken sliver of a button. Drop
       the fill entirely and let the label do the work. */
    background: transparent;
    color: var(--text-secondary, #888);
    border-color: var(--border-subtle, #333);
    opacity: 1;
    cursor: default;
}

.srv-modal-pics {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle, #2a2a33);
    width: 100%;
}
.srv-modal-pics button {
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--border-subtle, #333);
    background: var(--bg-light, #2a2a33);
    color: var(--text-primary, #eee);
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
}
.srv-modal-pics button:hover { background: var(--bg-lighter, #33333d); }

.srv-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary, #aaa);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srv-modal-close:hover {
    background: var(--bg-light, #2a2a33);
    color: var(--text-primary, #eee);
}

/* =============================================================================
   MCP panel (settings/sections/mcp.js) — reuses the streaming-server styles;
   only the client-config snippets need their own block.
   ========================================================================== */
.mcp-snippet {
    margin: 6px 0 6px;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-primary);
    white-space: pre;
    overflow-x: auto;
    user-select: text;
}