/* ===================== DESIGN TOKENS ===================== */
/* Palette: Soft Blush #FFDBDA · Old Rose #DB7F8E · Pale Slate #D5C5C8
   Cool Steel #9DA3A4 · Taupe Grey #604D53                                */
:root{
  --blush:        #FFDBDA;
  --blush-pale:   #FFF3F1;
  --rose:         #DB7F8E;
  --rose-deep:    #C05F70;
  --rose-tint:    #F8DEE2;
  --slate:        #D5C5C8;
  --slate-strong: #BCA7AC;
  --steel:        #9DA3A4;
  --steel-deep:   #7C8284;
  --taupe:        #604D53;
  --taupe-deep:   #3F3136;
  --terracotta:   #A85D68;     /* SJT — deliberately distinct from QR's rose */
  --terracotta-tint: #EFD9DC;

  --paper:        var(--blush-pale);
  --paper-raised: #FFFFFF;
  --ink:          var(--taupe-deep);
  --ink-soft:     #7C6A6F;
  --line:         var(--slate);
  --line-strong:  var(--slate-strong);

  --qr:      var(--rose);
  --qr-soft: var(--rose-tint);
  --dm:      var(--taupe);
  --dm-soft: #E3D9DB;
  --vr:      var(--steel-deep);
  --vr-soft: #E4E7E7;
  --sjt:      var(--terracotta);
  --sjt-soft: var(--terracotta-tint);

  --good:     #4F7A5B;
  --good-bg:  #E1ECE2;
  --bad:      #AD4A48;
  --bad-bg:   #F6E0DE;
  --neutral:  var(--steel-deep);
  --neutral-bg: #EAE3E2;
  --gold:     var(--rose-deep);

  /* Sidebar / scorecard chrome — deliberately decoupled from --taupe/--taupe-deep
     so those two tokens stay free to flip per theme (light text needs a dark
     ink on light themes, a light ink on dark themes) without ever breaking the
     hardcoded light-colored labels inside the sidebar or scorecard, which are
     always rendered against this dark chrome regardless of theme. */
  --chrome-deep:  #3F3136;
  --chrome:       #604D53;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(96,77,83,0.08), 0 8px 22px rgba(96,77,83,0.07);
}

/* ===================== THEMES ===================== */
/* Pastel Pink is the default palette above (:root). The themes below override
   the same token set; everything else in this file consumes the tokens only,
   so no other rule needs to change when the theme switches. */

[data-theme="charcoal"]{
  --chrome-deep:  #0D0B0C;
  --chrome:       #1F1A1C;
  --blush:        #2E2024;
  --blush-pale:   #161315;
  --rose:         #E8909F;
  --rose-deep:    #D9748A;
  --rose-tint:    #34242A;
  --slate:        #362F33;
  --slate-strong: #463E42;
  --steel:        #6E7577;
  --steel-deep:   #9DA6A8;
  --taupe:        #8C5C68;
  --taupe-deep:   #F1E8EA;
  --terracotta:   #CC8569;
  --terracotta-tint: #34241D;

  --paper-raised: #221D20;
  --ink-soft:     #B7A8AC;
  --dm-soft:      #2A1F22;
  --vr-soft:      #232627;

  --good:     #7FC08C;
  --good-bg:  #1E2C22;
  --bad:      #E2837F;
  --bad-bg:   #34201F;
  --neutral-bg: #25282A;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.6), 0 8px 22px rgba(0,0,0,0.5);
}

[data-theme="light"]{
  --chrome-deep:  #1E2330;
  --chrome:       #2B3142;
  --blush:        #E7E9EE;
  --blush-pale:   #FAFBFC;
  --rose:         #5C6AC4;
  --rose-deep:    #4451B0;
  --rose-tint:    #E9EBFA;
  --slate:        #E1E4E9;
  --slate-strong: #C7CCD3;
  --steel:        #9AA1AC;
  --steel-deep:   #5B6472;
  --taupe:        #6B5645;
  --taupe-deep:   #1E2330;
  --terracotta:   #B5663D;
  --terracotta-tint: #F3E2D6;

  --paper-raised: #FFFFFF;
  --ink-soft:     #5B6472;
  --dm-soft:      #EFE6DE;
  --vr-soft:      #E7E9EC;

  --good:     #3C8C53;
  --good-bg:  #E3F3E6;
  --bad:      #C24B43;
  --bad-bg:   #FBE4E1;
  --neutral-bg: #EBEDEF;

  --shadow-card: 0 1px 2px rgba(30,35,48,0.06), 0 8px 22px rgba(30,35,48,0.07);
}

[data-theme="pastel-blue"]{
  --chrome-deep:  #1F2E3D;
  --chrome:       #2E4258;
  --blush:        #D9E8F5;
  --blush-pale:   #F1F7FC;
  --rose:         #5B92C7;
  --rose-deep:    #3E709E;
  --rose-tint:    #DCEAF6;
  --slate:        #D7E2EC;
  --slate-strong: #B9CADC;
  --steel:        #94A8B8;
  --steel-deep:   #5E7689;
  --taupe:        #6E7F95;
  --taupe-deep:   #28384A;
  --terracotta:   #C77A52;
  --terracotta-tint: #F1DCCB;

  --paper-raised: #FFFFFF;
  --ink-soft:     #5E7689;
  --dm-soft:      #E4E9F0;
  --vr-soft:      #E6EDEF;

  --good:     #3F8F6B;
  --good-bg:  #DFF1E7;
  --bad:      #C2564E;
  --bad-bg:   #FAE1DE;
  --neutral-bg: #E6ECF1;

  --shadow-card: 0 1px 2px rgba(40,56,74,0.08), 0 8px 22px rgba(40,56,74,0.07);
}

[data-theme="pastel-green"]{
  --chrome-deep:  #1E2E22;
  --chrome:       #2C4232;
  --blush:        #DCEFDD;
  --blush-pale:   #F3FAF3;
  --rose:         #5E9B6C;
  --rose-deep:    #447951;
  --rose-tint:    #DDEFE0;
  --slate:        #D7E7D9;
  --slate-strong: #B7D2BC;
  --steel:        #94B49B;
  --steel-deep:   #5C7D63;
  --taupe:        #8C8350;
  --taupe-deep:   #243426;
  --terracotta:   #BD6E50;
  --terracotta-tint: #EFDACB;

  --paper-raised: #FFFFFF;
  --ink-soft:     #5C7D63;
  --dm-soft:      #EFEBD9;
  --vr-soft:      #E3ECE4;

  --good:     #3C8C53;
  --good-bg:  #DFF1E2;
  --bad:      #BD5046;
  --bad-bg:   #F9E0DC;
  --neutral-bg: #E6EDE6;

  --shadow-card: 0 1px 2px rgba(36,52,38,0.08), 0 8px 22px rgba(36,52,38,0.07);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  background-image:
    radial-gradient(circle at 8% 0%, var(--blush) 0%, transparent 45%),
    radial-gradient(circle at 100% 10%, var(--rose-tint) 0%, transparent 40%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
  background-attachment: fixed;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.app, .card, .kpi, .sidebar, .scorecard, .data-table, .nav-link, input, select, textarea, .tag, .btn-primary, .btn-ghost, .btn-danger{
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
*:focus-visible{ outline: 2px solid var(--rose-deep); outline-offset: 2px; }

h1,h2,h3{ font-family: var(--font-display); margin:0; color: var(--taupe-deep); font-weight: 600; }
p{ margin: 0 0 8px; color: var(--ink-soft); line-height:1.5; }
button{ font-family: var(--font-body); cursor:pointer; }
input, select, textarea{ font-family: var(--font-body); }

/* ===================== APP SHELL ===================== */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width: 248px;
  flex-shrink:0;
  background: linear-gradient(165deg, var(--chrome-deep), var(--chrome) 130%);
  color: #F3E9EA;
  display:flex;
  flex-direction:column;
  padding: 20px 14px;
  position: sticky;
  top:0;
  height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; padding: 4px 8px 18px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 14px;}
.brand-mark{
  width:34px;height:34px;border-radius:8px;
  background: linear-gradient(135deg, var(--rose), var(--terracotta));
  display:flex;align-items:center;justify-content:center;
  font-family: var(--font-display); font-weight:700; color:#fff; font-size:18px;
  box-shadow: 0 2px 8px rgba(219,127,142,0.45);
}
.brand-text strong{ display:block; font-size:14px; letter-spacing:0.2px; color:#FBEFEF;}
.brand-text small{ display:block; font-size:11px; color:#C9B3B8; text-transform: uppercase; letter-spacing: 0.08em;}

.nav{ flex:1; overflow-y:auto; }
.nav-group-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color:#B89BA0; margin: 16px 10px 6px; }
.nav-group-label:first-child{ margin-top:4px; }
.nav-link{
  width:100%; text-align:left; background:none; border:none; color:#E2D2D5;
  padding: 9px 10px; border-radius: 8px; font-size: 13.5px; margin-bottom:2px;
  display:flex; align-items:center; gap:8px;
}
.nav-link:hover{ background: rgba(255,255,255,0.08); color:#fff; }
.nav-link.active{ background: rgba(255,255,255,0.16); color:#fff; font-weight:600; }
.nav-link.tab-qr::before{ content:""; width:8px;height:8px;border-radius:50%; background:var(--qr); flex-shrink:0;}
.nav-link.tab-dm::before{ content:""; width:8px;height:8px;border-radius:50%; background:var(--dm); flex-shrink:0;}
.nav-link.tab-vr::before{ content:""; width:8px;height:8px;border-radius:50%; background:var(--vr); flex-shrink:0;}
.nav-link.tab-sjt::before{ content:""; width:8px;height:8px;border-radius:50%; background:var(--sjt); flex-shrink:0;}

.sidebar-foot{ padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); display:flex; flex-direction:column; gap:8px;}
.full{ width:100%; }
.btn-repeat{
  width:100%; background: rgba(255,255,255,0.08); color:#F3E9EA; border:1px solid rgba(255,255,255,0.18);
  padding:9px 12px; border-radius:8px; font-size:12.5px; font-weight:600;
}
.btn-repeat:hover{ background: rgba(255,255,255,0.14); }

.main{ flex:1; padding: 30px 38px 60px; max-width: 1320px; }

.page{ display:none; }
.page.active{ display:block; animation: fadein 0.25s ease; }
@keyframes fadein{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

.page-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.eyebrow{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color: var(--gold); margin:0 0 4px; }
.page-head h1{ font-size: 28px; }
.head-meta{ font-family: var(--font-mono); font-size:12px; color: var(--ink-soft); background: var(--paper-raised); border:1px solid var(--line); padding:6px 12px; border-radius: 20px; }

/* ===================== SCORECARD (signature element) ===================== */
.scorecard{
  display:flex; gap:0; background: linear-gradient(160deg, var(--chrome-deep), var(--chrome) 140%); border-radius: var(--radius-lg);
  padding: 22px 10px; margin-bottom: 22px; box-shadow: var(--shadow-card);
  overflow-x:auto;
}
.dial{
  flex:1; min-width: 150px; text-align:center; padding: 6px 14px; position:relative;
}
.dial:not(:last-child)::after{
  content:""; position:absolute; right:0; top:14px; bottom:14px; width:1px; background: rgba(255,255,255,0.14);
}
.dial-label{ font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:#CBB1B6; margin-bottom:6px;}
.dial-arc{ width:108px; height:60px; margin: 0 auto 4px; }
.dial-value{ font-family: var(--font-display); font-size: 26px; font-weight:700; color:#fff; }
.dial-delta{ font-family: var(--font-mono); font-size:11.5px; margin-top:2px; }
.delta-up{ color: #9FD6AE; }
.delta-down{ color: #F0A8A5; }
.delta-flat{ color: #C9B3B8; }
.dial-total{ font-size:11px; color:#C9B3B8; margin-top:2px;}

/* SJT band badge inside scorecard / wherever a compact band display is needed */
.band-badge{ display:inline-flex; flex-direction:column; align-items:center; gap:6px; }
.band-tiers{ display:flex; gap:4px; margin: 4px 0 2px; }
.band-tier{ width:18px; height:22px; border-radius:4px; background: rgba(255,255,255,0.14); }
.band-tier.filled{ background: var(--terracotta); box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset; }
.band-tier-label{ font-family: var(--font-mono); font-size:9.5px; color:#C9B3B8; margin-top:2px; }
.band-pill{
  display:inline-block; padding:3px 11px; border-radius:20px; font-family: var(--font-mono);
  font-size:12px; font-weight:700; letter-spacing:0.02em;
}
.band-pill.b1{ background:#E1ECE2; color:#4F7A5B; }
.band-pill.b2{ background:#F3EAD2; color:#9C7A1F; }
.band-pill.b3{ background:#F6E2D7; color:#A8693A; }
.band-pill.b4{ background:#F6E0DE; color:#AD4A48; }
.band-pill.bnone{ background: var(--neutral-bg); color:var(--neutral); }

/* ===================== KPI GRID ===================== */
.kpi-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 12px; margin-bottom: 22px; }
.kpi{
  background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px; box-shadow: var(--shadow-card);
}
.kpi-label{ font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:6px;}
.kpi-value{ font-family: var(--font-display); font-size:24px; font-weight:700; color:var(--taupe-deep); }
.kpi-sub{ font-family: var(--font-mono); font-size:11.5px; margin-top:3px; display:inline-block; padding:2px 7px; border-radius: 10px; }
.kpi-sub.good{ background: var(--good-bg); color: var(--good); }
.kpi-sub.bad{ background: var(--bad-bg); color: var(--bad); }
.kpi-sub.neutral{ background: var(--neutral-bg); color: var(--neutral); }

/* ===================== CARDS / GRID ===================== */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 980px){ .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-card); margin-bottom: 18px;
}
.grid-2 > .card{ margin-bottom:0; }
.card-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; flex-wrap:wrap; gap:4px;}
.card-head h3{ font-size:16px; }
.card-sub{ font-family: var(--font-mono); font-size:11px; color: var(--ink-soft); }
.card-note{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-soft); margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }

/* ===================== FORM ===================== */
.form-card form{ display:flex; flex-direction:column; gap:16px; }
#singleSectionBlock{ display:flex; flex-direction:column; gap:16px; }
.form-intro{ font-family: var(--font-mono); font-size:11.5px; background: var(--rose-tint); border:1px dashed var(--slate-strong); border-radius:8px; padding:8px 10px; margin:0 0 4px; color:var(--taupe); }
.field-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }

.callout{
  font-family: var(--font-mono); font-size:11.5px; color:var(--taupe);
  background: var(--terracotta-tint); border:1px solid #DCB8BC; border-radius:8px; padding:8px 10px; margin:0;
}
.callout:empty{ display:none; }

/* explicit class instead of tag+ancestor selectors so nested labels (e.g. chips) are never affected */
.form-field{
  display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-soft); font-weight:600;
  flex:1; min-width:150px;
}
label.grow{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-soft); font-weight:600; flex-basis:100%; }
.form-field.grow-2{ flex:2; }
.form-field.third{ flex:1; min-width:130px; }

input[type=text],input[type=number],input[type=date],select,textarea{
  font-size:14px; padding:9px 10px; border-radius:8px; border:1px solid var(--line-strong); background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus{ border-color: var(--rose-deep); }

.field-note{ font-family: var(--font-mono); font-size:10.5px; font-weight:400; color:#A6898E; }
.field-note.inline{ display:inline; margin-left:4px; }
.hint{ font-weight:400; color:#A6898E; }

.readout{
  font-family: var(--font-mono); font-weight:600; font-size:15px; color: var(--taupe-deep);
  background: var(--paper); border:1px solid var(--line); border-radius:8px; padding:9px 10px; display:block;
}
.readout.band-readout{ display:flex; align-items:center; gap:8px; }

.toggle-row{ margin-top:-4px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.check{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--ink-soft); font-weight:600; flex-wrap:wrap; }
.check input{ width:16px;height:16px; accent-color: var(--rose-deep); }
.hidden{ display:none !important; }

.advanced-fields{ border:1px solid var(--line); border-radius:10px; background: var(--paper); }
.advanced-fields summary{
  cursor:pointer; padding:10px 14px; font-size:13px; font-weight:600; color: var(--taupe-deep); list-style:none;
}
.advanced-fields summary::-webkit-details-marker{ display:none; }
.advanced-fields summary::before{ content:"▸ "; color: var(--gold); }
.advanced-fields[open] summary::before{ content:"▾ "; }
.advanced-inner{ padding: 4px 14px 14px; display:flex; flex-direction:column; gap:14px; }

.convert-hint{ font-family: var(--font-mono); font-size:11.5px; background: var(--paper); border:1px dashed var(--line-strong); border-radius:8px; padding:8px 10px; margin:0; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.chip{ display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line-strong); border-radius: 20px; padding: 5px 12px; font-size:12.5px; font-weight:500; color: var(--ink-soft); flex: 0 0 auto; }
.chip input{ width:13px;height:13px; accent-color: var(--rose-deep); }

.mini-table{ width:100%; border-collapse:collapse; }
.mini-table th, .mini-table td{ padding:8px; border-bottom:1px solid var(--line); text-align:left; font-size:13px;}
.mini-table input{ width:90px; padding:6px 7px; }
.mini-table .m_band_out{ font-weight:700; }

.form-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.btn-primary{ background: var(--rose-deep); color:#fff; border:none; padding:10px 18px; border-radius:8px; font-weight:600; font-size:13.5px; }
.btn-primary:hover{ background: var(--taupe); }
.btn-ghost{ background:transparent; border:1px solid var(--line-strong); padding:10px 18px; border-radius:8px; font-weight:600; font-size:13.5px; color:var(--ink); }
.btn-ghost:hover{ background:#fff; }
.btn-danger{ background: var(--bad-bg); color:var(--bad); border:1px solid #e8bdb9; padding:10px 18px; border-radius:8px; font-weight:600; font-size:13.5px;}
.file-btn{ display:inline-flex; align-items:center; }
.save-msg{ font-family: var(--font-mono); font-size:12px; color: var(--good); }

/* ===================== TABLES ===================== */
.filter-bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
.filter-bar label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-soft); font-weight:600;}
.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{ text-align:left; font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-soft); border-bottom:2px solid var(--line-strong); padding:8px 10px; white-space:nowrap;}
.data-table td{ padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.data-table tr:hover td{ background: var(--paper); }
.tag{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; font-family: var(--font-mono); }
.tag-qr{ background:var(--qr-soft); color:var(--qr); }
.tag-dm{ background:var(--dm-soft); color:var(--dm); }
.tag-vr{ background:var(--vr-soft); color:var(--vr); }
.tag-sjt{ background:var(--sjt-soft); color:var(--sjt); }
.entry-actions{ display:flex; gap:8px; white-space:nowrap; }
.edit-btn{ background:none; border:1px solid var(--line-strong); color:var(--taupe-deep); font-size:12px; font-weight:600; padding:4px 10px; border-radius:14px; }
.edit-btn:hover{ background:#fff; border-color:var(--rose-deep); color:var(--rose-deep); }
.del-btn{ background:none; border:none; color:var(--bad); font-size:13px; }

/* ===================== STATS LIST ===================== */
.stat-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-item{ background: var(--paper); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.stat-item .v{ font-family: var(--font-display); font-size:19px; font-weight:700; color:var(--taupe-deep); }
.stat-item .k{ font-family: var(--font-mono); font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em;}

/* ===================== PROGRESS ===================== */
.progress-list{ display:flex; flex-direction:column; gap:16px; }
.progress-item .top-row{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; font-weight:600;}
.progress-track{ height:10px; border-radius:6px; background: var(--paper); border:1px solid var(--line); overflow:hidden;}
.progress-fill{ height:100%; border-radius:6px; }
.band-progress{ display:flex; gap:5px; }
.band-progress .seg{ flex:1; height:10px; border-radius:5px; background:var(--paper); border:1px solid var(--line); }
.band-progress .seg.on{ background: var(--terracotta); border-color: var(--terracotta); }
.prediction-block{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.pred-item{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center;}
.pred-item .v{ font-family: var(--font-display); font-size:24px; font-weight:700; }
.pred-item .k{ font-family: var(--font-mono); font-size:10.5px; color:var(--ink-soft); text-transform:uppercase;}

/* ===================== BAND REFERENCE TABLE ===================== */
.band-ref{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:6px; }
.band-ref th{ text-align:left; font-family: var(--font-mono); font-size:10px; text-transform:uppercase; color:var(--ink-soft); padding:5px 8px; border-bottom:1px solid var(--line-strong); }
.band-ref td{ padding:6px 8px; border-bottom:1px solid var(--line); }


::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius:8px; }

/* ===================== THEME PICKER ===================== */
.theme-picker{ display:flex; flex-direction:column; gap:7px; padding:2px 6px 10px; }
.theme-picker-label{ font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:#B89BA0; }
.theme-swatches{ display:flex; gap:9px; flex-wrap:wrap; }
.theme-swatch{
  width:22px; height:22px; border-radius:50%; padding:0; cursor:pointer;
  border:2px solid rgba(255,255,255,0.22); box-shadow:0 0 0 0 transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position:relative;
}
.theme-swatch:hover{ transform: scale(1.14); }
.theme-swatch.active{ border-color:#fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.32); }
.theme-swatch.active::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.theme-swatch[data-theme="pastel-pink"]{ background: linear-gradient(135deg, #FFDBDA, #DB7F8E); }
.theme-swatch[data-theme="pastel-blue"]{ background: linear-gradient(135deg, #D9E8F5, #5B92C7); }
.theme-swatch[data-theme="pastel-green"]{ background: linear-gradient(135deg, #DCEFDD, #5E9B6C); }
.theme-swatch[data-theme="light"]{ background: linear-gradient(135deg, #FAFBFC, #5C6AC4); }
.theme-swatch[data-theme="charcoal"]{ background: linear-gradient(135deg, #1F1A1C, #E8909F); }

/* Larger variant used inside the Data & Backup page's Appearance card, where
   the surrounding background is theme-dependent rather than the fixed-dark
   sidebar chrome, so labels use the normal ink tokens instead of hardcoded
   light text. */
.theme-picker.theme-picker-page{ padding:6px 0 4px; }
.theme-picker.theme-picker-page .theme-picker-label{ color: var(--ink-soft); font-size:11px; }
.theme-picker.theme-picker-page .theme-swatch{ width:30px; height:30px; border:2px solid var(--line-strong); }
.theme-picker.theme-picker-page .theme-swatch.active{ border-color: var(--rose-deep); box-shadow: 0 0 0 2px var(--rose-tint); }
.theme-picker.theme-picker-page .theme-swatch.active::after{ text-shadow:0 1px 2px rgba(0,0,0,0.35); }
.theme-name-readout{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-soft); margin-top:2px; }