/* ── Tokens ── */
:root {
  --bg:           #0a0a0a;
  --bg2:          #0d0d0d;
  --bg3:          #111111;
  --border:       #1a1a1a;
  --border2:      #222222;
  --text:         #e8e8e8;
  --text2:        #888888;
  --text3:        #444444;
  --text4:        #333333;
  --accent:       #22c55e;
  --accent-dim:   rgba(34,197,94,0.12);
  --accent-dark:  rgba(34,197,94,0.5);
  --immutable:    #141414;
  --glow-color:   rgba(34,197,94,0.6);
  /* Brightness base values (1.0 look). settings.js sets these and the live tokens above. */
  --text2-base:   #888888;
  --text3-base:   #444444;
  --text4-base:   #333333;
  --border-base:  #1a1a1a;
  --border2-base: #222222;
}

/* Brightness exemption: Settings and sidebar icons always use the 1.0 look */
#view-settings,
.sb-icon {
  --text2:   var(--text2-base);
  --text3:   var(--text3-base);
  --text4:   var(--text4-base);
  --border:  var(--border-base);
  --border2: var(--border2-base);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color:       var(--text);
  font-family: 'JetBrains Mono', monospace;
  height:      100vh;
  overflow:    hidden;
  display:     flex;
}

/* ── Reduced motion: disable all transitions & animations ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
  .glow-now, .glow-soon, .glow-grace { animation: none !important; }
}


/* ═══════════════════════════════════════════════════
   # SIDEBAR NAV
   ═══════════════════════════════════════════════════ */
.sidebar {
  width:           52px;
  background:      var(--bg2);
  border-right:    0.5px solid var(--border);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding:         16px 0;
  gap:             8px;
  flex-shrink:     0;
  height:          100vh;
}

.sb-logo {
  display:         flex;
  justify-content: center;
  margin-bottom:   16px;
  padding-bottom:  16px;
  border-bottom:   0.5px solid var(--border);
  width:           100%;
}

.sb-logo svg {
  display: block;
  fill:    var(--accent);
  filter:  drop-shadow(0 0 2px var(--glow-color));
}

.sb-icon {
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   8px;
  cursor:          pointer;
  color:           var(--text3);
  font-size:       18px;
  transition:      all 0.15s;
}
.sb-icon:hover  { color: var(--accent); background: var(--bg3); }
.sb-icon.active { color: var(--accent); background: var(--accent-dim); }
.sb-bottom      { margin-top: auto; display: flex; flex-direction: column; gap: 8px; align-items: center; }


/* ═══════════════════════════════════════════════════
   # MAIN CONTENT AREA
   ═══════════════════════════════════════════════════ */
.main {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  height:          100vh;
  min-width:       0;
}

/* ── Top bar ── */
.topbar {
  height:        48px;
  border-bottom: 0.5px solid var(--border);
  display:       flex;
  align-items:   center;
  padding:       0 20px;
  gap:           10px;
  background:    var(--bg2);
  flex-shrink:   0;
}
.topbar-title { font-size: 13px; font-weight: 500; }
.topbar-sub   { font-size: 11px; color: var(--text3); }
.topbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── Buttons ── */
.btn {
  padding:     5px 12px;
  font-size:   11px;
  font-family: inherit;
  border:      0.5px solid var(--border2);
  background:  transparent;
  color:       var(--text2);
  border-radius: 8px;
  cursor:      pointer;
  transition:  all 0.15s;
}
.btn:hover         { border-color: var(--accent); color: var(--accent); }
.btn-accent        { background: var(--accent); color: #0a0a0a; border-color: var(--accent); font-weight: 500; }
.btn-accent:hover  { background: #1aab4f; }
.btn-back {
  color: var(--text3); cursor: pointer; font-size: 16px;
  background: none; border: none; display: flex; align-items: center;
}
.btn-back:hover { color: var(--accent); }

/* ── Views (shown/hidden) ── */
.view              { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.view.active       { display: flex; }


/* ═══════════════════════════════════════════════════
   # STATS ROW
   ═══════════════════════════════════════════════════ */
.stats-row {
  display: flex;
  gap:     12px;
}
.stat {
  background:    var(--bg2);
  border:        0.5px solid var(--border);
  border-radius: 8px;
  padding:       8px 12px;
  flex:          1;
}
.stat-label          { font-size: 10px; color: var(--text3); margin-bottom: 2px; }
.stat-val            { font-size: 16px; font-weight: 500; }
.stat-val span       { font-size: 11px; color: var(--accent); margin-left: 4px; }
.progress-bar        { height: 3px; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.progress-fill       { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s ease; }


/* ═══════════════════════════════════════════════════
   # DASHBOARD — MAIN HOME SCREEN
   Responsive 4-panel layout that collapses gracefully
   ═══════════════════════════════════════════════════ */
.dashboard {
  flex:    1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap:     10px;
  overflow: hidden;
}

/* ── Top half: month + day sidebar ── */
.dash-top {
  display: flex;
  gap:     10px;
  flex:    1;
  min-height: 0;
  overflow: hidden;
}

/* ── Bottom half: mini grid strip + focus timer ── */
.dash-bottom {
  display: flex;
  gap:     10px;
  height:  180px;
  flex-shrink: 0;
}

/* ── Panel base style ── */
.dash-panel {
  background:    var(--bg2);
  border:        0.5px solid var(--border);
  border-radius: 10px;
  overflow:      hidden;
  display:       flex;
  flex-direction:column;
}

.panel-header {
  font-size:     10px;
  color:         var(--text3);
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:       8px 12px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink:   0;
}


/* ═══════════════════════════════════════════════════
   # MONTH VIEW PANEL
   ═══════════════════════════════════════════════════ */
.month-panel {
  flex: 1.4;
  min-width: 0;
}

.month-grid-wrap {
  flex:       1;
  padding:    8px 10px;
  overflow-y: auto;
}
.month-grid-wrap::-webkit-scrollbar       { width: 3px; }
.month-grid-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.month-header-row {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   3px;
  margin-bottom:         4px;
}
.month-dow {
  font-size:  9px;
  color:      var(--text3);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.month-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   3px;
}

.month-day {
  aspect-ratio:    1;
  border-radius:   4px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  padding-top:     3px;
  font-size:       10px;
  color:           var(--text3);
  cursor:          pointer;
  border:          0.5px solid transparent;
  position:        relative;
  transition:      border-color 0.15s;
}
.month-day:hover    { border-color: var(--border2); color: var(--text2); }
.month-day.today    { border-color: var(--accent); color: var(--accent); }
.month-day.selected { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.month-day.other-month { opacity: 0.25; }

/* dot indicator for days with tasks */
.month-dot {
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--accent);
  margin-top:    2px;
}


/* ═══════════════════════════════════════════════════
   # DAY SIDEBAR PANEL
   Shows selected day's schedule + queue
   ═══════════════════════════════════════════════════ */
.day-sidebar {
  width:     220px;
  flex-shrink: 0;
}

.day-sidebar-scroll {
  flex:       1;
  overflow-y: auto;
  padding:    6px 8px;
}
.day-sidebar-scroll::-webkit-scrollbar       { width: 3px; }
.day-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Time block rows in sidebar ── */
.side-row {
  display:   flex;
  gap:       5px;
  min-height:16px;
  margin-bottom: 1px;
}
.side-time {
  width:     28px;
  font-size: 9px;
  color:     var(--text3);
  text-align:right;
  flex-shrink:0;
  padding-top:2px;
}
.side-block {
  flex:          1;
  height:        16px;
  border-radius: 2px;
  font-size:     9px;
  padding:       0 4px;
  display:       flex;
  align-items:   center;
  overflow:      hidden;
  white-space:   nowrap;
}

/* block type colours */
.side-immutable { background-color: var(--accent-dim); background-image: linear-gradient(var(--accent-dark) 1px, transparent 1px), linear-gradient(90deg, var(--accent-dark) 1px, transparent 1px); background-size: 6px 6px; opacity: 0.7; }
.side-done       { background: var(--accent); color: #0a0a0a; font-weight: 500; }
.side-scheduled  { background: transparent; border: 0.5px solid var(--accent); color: var(--accent); cursor: pointer; }
.side-scheduled:hover { background: var(--accent-dim); }
.side-break      { background: #0f3320; color: var(--accent); }
.side-empty      { background: transparent; border-bottom: 0.5px solid #1a1a1a; cursor: pointer; }
.side-empty:hover { border-color: var(--accent); }

/* ── Active session enlarged ── */
.side-block.active-block {
  height:    26px;
  font-size: 10px;
}


/* ═══════════════════════════════════════════════════
   # MINI GRAPH PAPER GRID STRIP
   Bottom left — all 7 days, 48 squares each
   ═══════════════════════════════════════════════════ */
.mini-strip-panel {
  flex: 1;
}

.mini-strip-wrap {
  flex:       1;
  padding:    8px 10px;
  display:    flex;
  gap:        6px;
  align-items:flex-start;
  overflow-y: auto;
}
.mini-strip-wrap::-webkit-scrollbar       { width: 3px; }
.mini-strip-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.mini-day-col {
  display:   flex;
  flex-direction: column;
  gap:       2px;
  flex:      1;
}
.mini-day-label {
  font-size:  8px;
  color:      var(--text3);
  text-align: center;
  margin-bottom: 3px;
}
.mini-day-label.today { color: var(--accent); }

.mini-grid-col {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.5px;
}

.mg-sq {
  aspect-ratio:  1;
  border-radius: 1px;
  transition:    background 0.3s, box-shadow 0.3s;
}

/* square types */
.mg-empty     { background: transparent; border: 0.5px solid #1e1e1e; }
.mg-immutable { background-color: var(--accent-dim); background-image: linear-gradient(var(--accent-dark) 1px, transparent 1px), linear-gradient(90deg, var(--accent-dark) 1px, transparent 1px); background-size: 6px 6px; opacity: 0.7; }
.mg-done      { background: var(--accent); }
.mg-scheduled { background: transparent; border: 1px solid var(--accent); }
.mg-break     { background: var(--accent); opacity: 0.25; }
.mg-test      { background: transparent; border: 1px solid #c55e00; }
.mg-lab       { background: transparent; border: 1px solid #a300c5; }


/* ═══════════════════════════════════════════════════
   # GLOW SYSTEM
   Live clock — current slot glows, warnings pulse
   ═══════════════════════════════════════════════════ */

/* Currently active time slot */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 4px 1px var(--glow-color), inset 0 0 4px var(--glow-color); }
  50%      { box-shadow: 0 0 8px 3px var(--glow-color), inset 0 0 6px var(--glow-color); }
}

/* 7 min warning — faster pulse */
@keyframes glow-warn {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(255,180,0,0.7), inset 0 0 4px rgba(255,180,0,0.4); }
  50%      { box-shadow: 0 0 12px 4px rgba(255,180,0,0.9), inset 0 0 8px rgba(255,180,0,0.6); }
}

/* 7 min grace — fading trail */
@keyframes glow-grace {
  0%   { box-shadow: 0 0 6px 2px var(--glow-color); }
  100% { box-shadow: 0 0 2px 0px var(--glow-color); }
}

/* Done = glowing accent fill. Steady, no animation. */
.side-done,
.db-done { box-shadow: 0 0 6px 0 var(--glow-color); }
.mg-done { box-shadow: 0 0 3px 0 var(--glow-color); }

.glow-now   { animation: glow-pulse 2s ease-in-out infinite; border-radius: 2px; }
.glow-soon  { animation: glow-warn  1s ease-in-out infinite; border-radius: 2px; }
.glow-grace { animation: glow-grace 7s ease-out forwards;    border-radius: 2px; }

/* reduced motion fallback — static highlight */
@media (prefers-reduced-motion: reduce) {
  .glow-now   { box-shadow: 0 0 0 1px var(--accent); }
  .glow-soon  { box-shadow: 0 0 0 1px #ffb400; }
  .glow-grace { box-shadow: none; opacity: 0.6; }
}


/* ═══════════════════════════════════════════════════
   # FOCUS TIMER PANEL
   Bottom right — always visible, session countdown
   ═══════════════════════════════════════════════════ */
.focus-panel {
  width: 280px;
  flex-shrink: 0;
}

.focus-idle {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         12px;
}
.focus-idle-label { font-size: 11px; color: var(--text3); text-align: center; }
.focus-idle-next  { font-size: 12px; color: var(--text2); text-align: center; }

.focus-active {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         10px 12px;
}

.focus-phase-badge {
  font-size:     9px;
  padding:       2px 8px;
  border-radius: 2px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.focus-task-name {
  font-size:   12px;
  font-weight: 500;
  text-align:  center;
  color:       var(--text);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   240px;
}

.focus-countdown {
  font-size:     40px;
  font-weight:   500;
  letter-spacing:-1px;
  line-height:   1;
}

.focus-track {
  width:         220px;
  height:        3px;
  background:    var(--border);
  border-radius: 2px;
  overflow:      hidden;
}
.focus-fill {
  height:        100%;
  border-radius: 2px;
  transition:    width 1s linear;
}

.focus-mini-controls {
  display:    flex;
  gap:        8px;
  align-items:center;
}
.focus-mini-btn {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          0.5px solid var(--border2);
  background:      transparent;
  color:           var(--text3);
  font-size:       13px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     inherit;
}
.focus-mini-btn:hover      { border-color: var(--accent); color: var(--accent); }
.focus-mini-btn.play-pause {
  width:  36px;
  height: 36px;
  font-size: 16px;
}

.focus-dots {
  display: flex;
  gap:     4px;
  align-items: center;
}
.f-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--border);
  border:        0.5px solid var(--border);
  transition:    all 0.3s;
}
.f-dot.done   { background: var(--accent-dark); border-color: var(--accent-dark); }
.f-dot.active { width: 18px; border-radius: 3px; background: var(--accent); border-color: var(--accent); }
.f-dot.brk    { background: #0a1a0a; border-color: #1a3a1a; }


/* ═══════════════════════════════════════════════════
   # RESPONSIVE COLLAPSE
   ResizeObserver on .main triggers these classes
   ═══════════════════════════════════════════════════ */

/* large: all 4 panels visible (default) */
.dash-top  { }
.dash-bottom { }

/* medium: hide month, show week grid instead */
.main.size-medium .month-panel   { display: none; }
.main.size-medium .week-fallback { display: flex; }
.main.size-medium .mini-strip-panel { display: flex; }

/* small: hide mini strip too */
.main.size-small .month-panel    { display: none; }
.main.size-small .week-fallback  { display: none; }
.main.size-small .mini-strip-panel { display: none; }

/* tiny: focus timer only, everything else hidden */
.main.size-tiny .month-panel     { display: none; }
.main.size-tiny .week-fallback   { display: none; }
.main.size-tiny .mini-strip-panel{ display: none; }
.main.size-tiny .day-sidebar     { display: none; }
.main.size-tiny .stats-row       { display: none; }
.main.size-tiny .dash-top        { display: flex; }
.main.size-tiny .focus-panel     { width: 100%; }

/* fallback week grid (medium breakpoint) */
.week-fallback {
  display:               none;
  flex:                  1;
  flex-direction:        column;
  gap:                   4px;
  overflow:              hidden;
}
.week-fallback-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   6px;
  flex:                  1;
}


/* ═══════════════════════════════════════════════════
   # LEGACY VIEWS (day detail, add workload, settings)
   These slide in over the dashboard when navigated to
   ═══════════════════════════════════════════════════ */

/* ── Day view ── */
.day-content   { flex: 1; display: flex; overflow: hidden; }
.grid-panel    { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.grid-panel::-webkit-scrollbar       { width: 4px; }
.grid-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.time-row      { display: flex; align-items: stretch; gap: 6px; min-height: 20px; }
.time-label    { width: 36px; font-size: 10px; color: var(--immutable); flex-shrink: 0; padding-top: 2px; text-align: right; }
.time-label.show { color: var(--text3); }
.dblock        { height: 18px; border-radius: 2px; width: 100%; display: flex; align-items: center; padding: 0 6px; font-size: 10px; overflow: hidden; white-space: nowrap; cursor: default; }
.dblock.active-block { height: 32px; font-size: 11px; }
.db-immutable { background-color: var(--accent-dim); background-image: linear-gradient(var(--accent-dark) 1px, transparent 1px), linear-gradient(90deg, var(--accent-dark) 1px, transparent 1px); background-size: 6px 6px; opacity: 0.7; color: var(--text3); }
.db-done       { background: var(--accent); color: #0a0a0a; font-weight: 500; }
.db-break-done { background: #0f3320; color: var(--accent); }
.db-project    { background: transparent; border: 0.5px solid var(--accent); color: var(--accent); }
.db-project.active-block { background: var(--accent-dim); }
.db-empty      { background: transparent; border-bottom: 1px solid #1c1c1c; }

/* ── Queue panel ── */
.queue-panel     { width: 200px; background: var(--bg2); border-left: 0.5px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
.queue-header    { padding: 12px 14px; border-bottom: 0.5px solid var(--border); font-size: 11px; color: var(--text3); font-weight: 500; }
.queue-list      { flex: 1; overflow-y: auto; padding: 8px; }
.queue-list::-webkit-scrollbar       { width: 3px; }
.queue-list::-webkit-scrollbar-thumb { background: var(--border); }
.q-item          { padding: 8px 10px; border-radius: 8px; margin-bottom: 4px; border: 0.5px solid var(--border); cursor: pointer; }
.q-item.done     { opacity: 0.4; }
.q-item.q-active { border-color: var(--accent); background: var(--accent-dim); }
.q-label         { font-size: 11px; margin-bottom: 3px; }
.q-item.done .q-label { text-decoration: line-through; color: var(--text3); }
.q-meta          { font-size: 10px; color: var(--text3); display: flex; justify-content: space-between; }
.q-item.q-active .q-meta { color: var(--accent); }
.q-type          { font-size: 9px; padding: 1px 5px; border-radius: 2px; background: var(--border); color: var(--text3); display: inline-block; margin-bottom: 4px; }
.q-type.project  { background: #001a1a; color: #00a3a3; }
.q-type.break    { background: #0f1f0f; color: var(--accent); }
.progress-wrap   { padding: 10px 14px; border-top: 0.5px solid var(--border); }
.prog-label      { font-size: 10px; color: var(--text3); margin-bottom: 5px; display: flex; justify-content: space-between; }
.focus-btn       { margin: 10px; padding: 8px; font-size: 11px; font-family: inherit; border: 0.5px solid var(--accent); background: var(--accent-dim); color: var(--accent); border-radius: 8px; cursor: pointer; text-align: center; }
.focus-btn:hover { background: #0f3320; }

/* ── Add workload form ── */
.add-content        { flex: 1; overflow-y: auto; padding: 20px; }
.add-content::-webkit-scrollbar       { width: 4px; }
.add-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.type-tabs    { display: flex; gap: 6px; margin-bottom: 20px; }
.tab          { padding: 6px 14px; font-size: 11px; font-family: inherit; border: 0.5px solid var(--border2); background: transparent; color: var(--text3); border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.tab:hover    { border-color: var(--border2); color: var(--text2); }
.tab.active   { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.field        { margin-bottom: 14px; }
.flabel       { font-size: 10px; color: var(--text3); letter-spacing: 0.5px; margin-bottom: 6px; display: block; }
.finput       { width: 100%; background: var(--bg2); border: 0.5px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 8px 10px; border-radius: 8px; outline: none; }
.finput:focus { border-color: var(--accent); }
.finput::placeholder { color: var(--text4); }
.frow         { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fdivider     { height: 0.5px; background: var(--border); margin: 16px 0; }
.preset-row   { display: flex; gap: 6px; flex-wrap: wrap; }
.fpreset      { padding: 5px 10px; font-size: 10px; font-family: inherit; border: 0.5px solid var(--border); background: transparent; color: var(--text3); border-radius: 8px; cursor: pointer; }
.fpreset:hover  { border-color: var(--border2); color: var(--text2); }
.fpreset.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.day-grid     { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-top: 6px; }
.day-btn      { padding: 6px 4px; font-size: 10px; font-family: inherit; border: 0.5px solid var(--border); background: transparent; color: var(--text3); border-radius: 8px; cursor: pointer; text-align: center; }
.day-btn:hover { border-color: var(--border2); color: var(--text2); }
.day-btn.sel   { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.subtask-row  { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.sub-input    { flex: 1; background: var(--bg2); border: 0.5px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 7px 10px; border-radius: 8px; outline: none; }
.sub-dur      { width: 70px; background: var(--bg2); border: 0.5px solid var(--border); color: var(--text); font-family: inherit; font-size: 12px; padding: 7px 8px; border-radius: 8px; outline: none; }
.sub-del      { padding: 4px 8px; font-size: 14px; background: transparent; border: none; color: var(--text3); cursor: pointer; }
.sub-del:hover { color: #c55e22; }
.add-sub-btn  { padding: 7px 10px; font-size: 11px; font-family: inherit; border: 0.5px solid var(--border); background: transparent; color: var(--text3); border-radius: 8px; cursor: pointer; }
.add-sub-btn:hover { border-color: var(--accent); color: var(--accent); }
.summary-box  { background: var(--bg2); border: 0.5px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.sum-row      { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; color: var(--text3); }
.sum-row span { color: var(--text2); }
.sum-row.hi span { color: var(--accent); }
.form-footer  { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }
input[type="range"] { accent-color: var(--accent); }
input[type="range"]::-webkit-slider-runnable-track { background: var(--border2); border-radius: 4px; height: 3px; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: -4.5px; cursor: pointer; }
/* ── Settings ── */
.settings-content { flex: 1; display: flex; overflow: hidden; }
.settings-nav     { width: 160px; border-right: 0.5px solid var(--border); padding: 16px 0; flex-shrink: 0; }
.snav-item        { padding: 8px 16px; font-size: 11px; color: var(--text3); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.snav-item:hover  { color: var(--text2); }
.snav-item.active { color: var(--accent); background: var(--accent-dim); }
.snav-section     { font-size: 9px; color: #222; letter-spacing: 1px; padding: 12px 16px 4px; text-transform: uppercase; }
.s-panel          { flex: 1; padding: 24px; overflow-y: auto; }
.s-panel::-webkit-scrollbar       { width: 4px; }
.s-panel::-webkit-scrollbar-thumb { background: var(--border); }
.s-section        { font-size: 12px; color: var(--text3); font-weight: 500; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 0.5px solid var(--border); }
.s-row            { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 0.5px solid #0f0f0f; }
.s-label          { font-size: 12px; color: var(--text2); }
.s-sub            { font-size: 10px; color: var(--text4); margin-top: 2px; }
.toggle           { width: 36px; height: 20px; border-radius: 10px; border: 0.5px solid var(--border2); background: var(--bg3); cursor: pointer; position: relative; flex-shrink: 0; transition: background 0.2s; }
.toggle.on        { background: var(--accent-dark); border-color: var(--accent); }
.toggle::after    { content:''; width: 14px; height: 14px; border-radius: 50%; background: var(--border2); position: absolute; top: 2px; left: 2px; transition: all 0.2s; }
.toggle.on::after { background: var(--accent); left: 18px; }
.theme-grid       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.theme-card       { border: 0.5px solid var(--border); border-radius: 8px; padding: 12px; cursor: pointer; }
.theme-card:hover { border-color: var(--border2); }
.theme-card.active{ border-color: var(--accent); }
.theme-preview    { height: 48px; border-radius: 4px; margin-bottom: 8px; display: flex; gap: 3px; padding: 6px; align-items: flex-end; }
.t-bar            { border-radius: 2px; flex: 1; }
.theme-name       { font-size: 11px; color: var(--text2); }
.theme-card.active .theme-name { color: var(--accent); }
.accent-row       { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.accent-swatch    { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.accent-swatch.active { border-color: var(--text); }
.accent-custom    { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid var(--border2); padding: 0; background: transparent; appearance: none; -webkit-appearance: none; overflow: hidden; }
.accent-custom::-webkit-color-swatch-wrapper { padding: 0; }
.accent-custom::-webkit-color-swatch { border: none; border-radius: 50%; }
.accent-custom::-moz-color-swatch    { border: none; border-radius: 50%; }
.accent-custom.active { border-color: var(--text); }
.bright-row       { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.bright-controls  { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.bright-controls input[type="range"] { flex: 1; }
.bright-val       { font-size: 11px; color: var(--text2); min-width: 32px; text-align: right; }
.bright-reset     { font-size: 10px; font-family: inherit; background: none; border: none; color: var(--text3); cursor: pointer; text-decoration: underline; }
.bright-reset:hover { color: var(--accent); }
/* Preview box: settings.js sets the live --text2..--border2 on it, so it is not exempt */
.bright-preview   { width: 180px; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 8px; padding: 10px 12px; }
.bp-label         { font-size: 12px; color: var(--text2); }
.bp-hint          { font-size: 10px; color: var(--text3); margin-top: 2px; }
.bp-faint         { font-size: 10px; color: var(--text4); margin-top: 2px; }
.bp-block         { margin-top: 8px; font-size: 10px; color: var(--text3); border: 0.5px solid var(--border); border-radius: 4px; padding: 6px 8px; }
.block-size-row   { display: flex; gap: 6px; margin-top: 8px; }
.size-btn         { padding: 6px 12px; font-size: 10px; font-family: inherit; border: 0.5px solid var(--border); background: transparent; color: var(--text3); border-radius: 8px; cursor: pointer; }
.size-btn.active  { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.preset-list      { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.preset-item      { display: flex; align-items: center; justify-content: space-between; background: var(--bg2); border: 0.5px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.preset-name      { font-size: 11px; color: var(--text2); }
.preset-val       { font-size: 10px; color: var(--accent); }
.preset-del       { font-size: 14px; color: var(--text3); background: none; border: none; cursor: pointer; }
.preset-del:hover { color: #c55e22; }
.add-preset-btn   { margin-top: 8px; padding: 7px 12px; font-size: 11px; font-family: inherit; border: 0.5px solid var(--border); background: transparent; color: var(--text3); border-radius: 8px; cursor: pointer; width: 100%; }
.add-preset-btn:hover { border-color: var(--accent); color: var(--accent); }
.s-save           { margin-top: 24px; display: flex; justify-content: flex-end; }
.toast            { background: var(--accent-dim); border: 0.5px solid var(--accent); border-radius: 8px; padding: 6px 12px; font-size: 11px; color: var(--accent); display: none; align-items: center; gap: 6px; }
.toast.show       { display: flex; }

/* ── Legend ── */
.legend   { display: flex; gap: 16px; align-items: center; padding-top: 8px; border-top: 0.5px solid var(--border); flex-wrap: wrap; }
.leg-item { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text3); }
.leg-dot  { width: 10px; height: 10px; border-radius: 2px; }