/* ═══════════════════════════════════════════════════════════════
   XERO v2 · EXECUTION ENGINE · STYLESHEET
   Architecture: Core Engine + Time Credit Module (add-on layer)
   Design: Pure black · Lime accent · Cyan credit · Pixel mono
   Fonts: Share Tech Mono · Bebas Neue · Barlow Condensed
   ═══════════════════════════════════════════════════════════════ */

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

   :root {
     --black:      #000000;
     --bg:         #060606;
     --surface:    #0d0d0d;
     --surface2:   #121212;
     --surface3:   #181818;
     --border:     #1a1a1a;
     --border2:    #242424;
     --border3:    #303030;
   
     --lime:       #7AEB3C;
     --lime-dim:   rgba(122,235,60,0.10);
     --lime-glow:  rgba(122,235,60,0.06);
   
     /* Credit module accent — separated from core lime */
     --credit:     #00e5ff;
     --credit-dim: rgba(0,229,255,0.10);
   
     --white:      #ffffff;
     --white2:     #d8d8d8;
     --gray:       #454545;
     --gray2:      #2e2e2e;
     --red:        #ff3333;
     --orange:     #ff8800;
   
     /* Speed tier colors */
     --c-drift:     #3d4f6b;
     --c-steady:    #2d5a8e;
     --c-momentum:  #7AEB3C;
     --c-velocity:  #ff8c00;
     --c-overdrive: #ff3333;
   
     /* Difficulty tier colors */
     --diff-easy:    #4a9eff;
     --diff-medium:  #7AEB3C;
     --diff-hard:    #ff8800;
     --diff-veteran: #ff3333;
   
     --f-mono:    'Share Tech Mono', monospace;
     --f-display: 'Bebas Neue', sans-serif;
     --f-cond:    'Barlow Condensed', sans-serif;
     --f-body:    'Barlow', sans-serif;
   
     --ease:      cubic-bezier(0.16, 1, 0.3, 1);
     --t:         180ms var(--ease);
     --t-slow:    450ms var(--ease);
   }
   
   html { font-size: 14px; }
   
   body {
     background: var(--bg);
     color: var(--white2);
     font-family: var(--f-body);
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
   }
   
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
   input[type="number"] { -moz-appearance: textfield; }
   
   ::-webkit-scrollbar { width: 3px; height: 3px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--border3); }
   
   /* ── TOPNAV ─────────────────────────────────────────── */
   .topnav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 32px;
     border-bottom: 1px solid var(--border);
     background: var(--black);
     position: sticky;
     top: 0;
     z-index: 200;
   }
   
   .nav-logo { display: flex; align-items: center; gap: 10px; }
   .logo-mark { width: 36px; height: 30px; }
   .logo-wordmark {
     font-family: var(--f-display); font-size: 22px;
     letter-spacing: 0.12em; color: var(--white); line-height: 1;
   }
   .logo-ver {
     font-family: var(--f-mono); font-size: 9px; color: var(--lime);
     letter-spacing: 0.14em; align-self: flex-end; margin-bottom: 2px;
   }
   
   .nav-actions { display: flex; align-items: center; gap: 8px; }
   
   .nav-btn {
     display: flex; align-items: center; gap: 6px;
     font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em;
     background: none; border: 1px solid var(--border2); color: var(--gray);
     padding: 6px 14px; cursor: pointer; transition: all var(--t);
   }
   .nav-btn:hover { border-color: var(--border3); color: var(--white2); }
   .nav-btn-primary { border-color: var(--border3); color: var(--white2); }
   .nav-btn-primary:hover { border-color: var(--lime); color: var(--lime); }
   
   /* ── APP ──────────────────────────────────────────────── */
   .app { max-width: 1100px; margin: 0 auto; padding: 24px 32px 100px; }
   
   /* ── TOOLBAR ─────────────────────────────────────────── */
   .toolbar {
     display: flex; align-items: center; justify-content: space-between;
     margin-bottom: 24px;
   }
   .toolbar-left { display: flex; align-items: center; gap: 16px; }
   .toolbar-right { display: flex; align-items: center; gap: 16px; }
   
   .unit-group { display: flex; border: 1px solid var(--border2); }
   .unit-btn {
     font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; font-weight: 600;
     padding: 7px 16px; background: var(--surface); border: none;
     border-right: 1px solid var(--border2); color: var(--gray); cursor: pointer;
     transition: all var(--t);
   }
   .unit-btn:last-child { border-right: none; }
   .unit-btn.active { background: var(--lime); color: var(--black); }
   .unit-btn:not(.active):hover { background: var(--surface2); color: var(--white2); }
   
   .global-stat {
     display: flex; align-items: center; gap: 5px;
     font-family: var(--f-mono); font-size: 10px; color: var(--gray); letter-spacing: 0.06em;
   }
   .global-stat .val { color: var(--lime); }
   
   .btn-new {
     font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; font-weight: 600;
     background: none; border: 1px solid var(--border3); color: var(--white2);
     padding: 7px 18px; cursor: pointer; transition: all var(--t);
   }
   .btn-new:hover { border-color: var(--lime); color: var(--lime); }
   
   /* ── EMPTY STATE ─────────────────────────────────────── */
   .empty-state { text-align: center; padding: 80px 20px; border: 1px dashed var(--border2); }
   .es-icon { width: 64px; height: 64px; margin: 0 auto 16px; }
   .es-title {
     font-family: var(--f-display); font-size: 24px;
     letter-spacing: 0.1em; color: var(--border3); margin-bottom: 8px;
   }
   .es-sub { font-family: var(--f-mono); font-size: 10px; color: var(--gray2); letter-spacing: 0.06em; }
   
   /* ── PROJECT CARD ────────────────────────────────────── */
   .project-card {
     background: var(--surface); border: 1px solid var(--border2);
     border-radius: 6px; margin-bottom: 20px; overflow: hidden;
     transition: border-color var(--t);
   }
   .project-card:hover { border-color: var(--border3); }
   .project-card.flash-border {
     animation: flashBorder 0.6s var(--ease) forwards;
   }
   @keyframes flashBorder {
     0%   { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(122,235,60,0.2); }
     100% { border-color: var(--border2); box-shadow: none; }
   }
   
   /* ── PROJECT HEADER ──────────────────────────────────── */
   .pj-hdr {
     display: flex; align-items: stretch;
     border-bottom: 1px solid var(--border2);
     background: var(--surface2); min-height: 60px;
   }
   .pj-num-col {
     display: flex; align-items: center; justify-content: center;
     padding: 0 18px; border-right: 1px solid var(--border2); min-width: 72px;
   }
   .pj-num { font-family: var(--f-display); font-size: 38px; letter-spacing: 0.04em; color: var(--white); line-height: 1; }
   .pj-title-col { display: flex; align-items: center; gap: 10px; flex: 1; padding: 0 16px; }
   
   .pj-live-dot {
     width: 6px; height: 6px; border-radius: 50%;
     background: var(--border3); flex-shrink: 0;
     transition: background var(--t), box-shadow var(--t);
   }
   .pj-live-dot.live {
     background: var(--lime); box-shadow: 0 0 8px var(--lime);
     animation: pulseDot 1.6s ease-in-out infinite;
   }
   @keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:0.3} }
   
   .pj-title-inp {
     font-family: var(--f-display); font-size: 22px; letter-spacing: 0.06em;
     background: none; border: none; color: var(--white); outline: none;
     flex: 1; border-bottom: 1px solid transparent; padding: 2px 0;
     transition: border-color var(--t); text-transform: uppercase;
   }
   .pj-title-inp:focus { border-bottom-color: var(--lime); }
   
   .pj-hdr-right {
     display: flex; align-items: center; gap: 8px; padding: 0 14px;
     border-left: 1px solid var(--border2);
   }
   .pj-compl-badge {
     display: flex; align-items: center; gap: 5px;
     font-family: var(--f-mono); font-size: 11px;
     padding: 5px 10px; border: 1px solid var(--border2);
     background: var(--surface); color: var(--gray);
   }
   .pj-compl-pct { color: var(--lime); font-weight: 600; }
   
   .pj-btn {
     width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
     background: none; border: 1px solid var(--border2); color: var(--gray);
     cursor: pointer; transition: all var(--t);
   }
   .pj-btn:hover { border-color: var(--lime); color: var(--lime); }
   .pj-btn.danger:hover { border-color: var(--red); color: var(--red); }
   
   /* ── DUAL CLOCK ──────────────────────────────────────── */
   .pj-clocks {
     display: grid; grid-template-columns: 1fr auto 1fr auto;
     align-items: center; background: var(--black);
     border-bottom: 1px solid var(--border2); padding: 18px 24px;
   }
   .clk-block { text-align: center; }
   .clk-tag {
     display: flex; align-items: center; justify-content: center; gap: 5px;
     font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em;
     color: var(--gray); margin-bottom: 7px;
   }
   .clk-tag.lime { color: var(--lime); opacity: 0.9; }
   .clk-digits {
     font-family: var(--f-mono); font-size: 42px; font-weight: 400;
     letter-spacing: 0.04em; color: var(--border3); margin-bottom: 4px;
     transition: color var(--t-slow); font-variant-numeric: tabular-nums; line-height: 1;
   }
   .clk-digits.running { color: var(--white); }
   .clk-digits.lime { color: var(--lime); filter: drop-shadow(0 0 8px rgba(122,235,60,0.35)); }
   .clk-digits.lime.running { filter: drop-shadow(0 0 14px rgba(122,235,60,0.6)); }
   .clk-sub { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--border3); }
   .clk-sub.lime { color: rgba(122,235,60,0.5); }
   .clk-sep {
     display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 22px;
   }
   .clk-sep-bar { width: 1px; height: 20px; background: var(--border2); }
   .clk-vs { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--border3); }
   .clk-ctrl {
     display: flex; flex-direction: column; align-items: stretch;
     gap: 6px; padding-left: 20px; border-left: 1px solid var(--border2);
   }
   .btn-start {
     display: flex; align-items: center; justify-content: center; gap: 7px;
     font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; font-weight: 600;
     background: var(--lime); border: none; color: var(--black);
     padding: 9px 16px; cursor: pointer; transition: all var(--t);
   }
   .btn-start:hover { background: #8ef248; }
   .btn-start.running { background: var(--red); }
   .btn-start.running:hover { background: #ff5555; }
   .btn-start.complete {
     background: var(--lime); color: var(--black);
     animation: completePulse 2s ease-in-out infinite;
   }
   .btn-start.complete:hover { background: #8ef248; }
   @keyframes completePulse {
     0%,100% { box-shadow: 0 0 0 0 rgba(122,235,60,0.4); }
     50%      { box-shadow: 0 0 0 6px rgba(122,235,60,0); }
   }
   .clk-mini-row { display: flex; gap: 5px; }
   .btn-mini {
     flex: 1; display: flex; align-items: center; justify-content: center;
     background: none; border: 1px solid var(--border2); color: var(--gray);
     padding: 6px; cursor: pointer; transition: all var(--t);
   }
   .btn-mini:not(:disabled):hover { border-color: var(--border3); color: var(--white2); }
   .btn-mini:disabled { opacity: 0.25; cursor: not-allowed; }
   
   /* ── STATS BAND ──────────────────────────────────────── */
   .pj-stats {
     display: grid; grid-template-columns: repeat(6, 1fr);
     border-bottom: 1px solid var(--border2); background: var(--surface2);
   }
   .st-cell { padding: 12px 14px; border-right: 1px solid var(--border2); }
   .st-cell:last-child { border-right: none; }
   .st-cell.accent { background: color-mix(in srgb, var(--lime) 4%, var(--surface2)); }
   .st-cell.credit-stat { background: color-mix(in srgb, var(--credit) 4%, var(--surface2)); }
   .st-lbl {
     font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.12em;
     color: var(--gray); margin-bottom: 6px; text-transform: uppercase;
   }
   .st-val {
     font-family: var(--f-display); font-size: 19px; letter-spacing: 0.04em;
     color: var(--white2); line-height: 1; transition: all var(--t);
   }
   .st-cell.accent .st-val { color: var(--lime); }
   .st-cell.credit-stat .st-val { color: var(--credit); }
   .st-val.updating { animation: statRoll 0.22s var(--ease); }
   @keyframes statRoll { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:translateY(0)} }
   
   /* ── PROGRESS ────────────────────────────────────────── */
   .pj-progress { padding: 16px 22px; border-bottom: 1px solid var(--border2); }
   .tp-row {
     display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px;
   }
   .tp-label {
     display: flex; align-items: center; gap: 6px;
     font-family: var(--f-cond); font-size: 14px; font-weight: 700;
     letter-spacing: 0.08em; color: var(--white2);
   }
   .tp-pct { font-family: var(--f-mono); font-size: 13px; color: var(--lime); }
   .tp-track {
     height: 8px; background: var(--surface3); border: 1px solid var(--border2);
     position: relative; overflow: visible;
   }
   .tp-fill {
     height: 100%; background: var(--lime); width: 0%;
     transition: width 0.5s var(--ease); position: relative;
   }
   .tp-credit-zone {
     position: absolute; top: 0; height: 100%;
     background: var(--credit); opacity: 0.55;
     transition: left 0.5s var(--ease), width 0.5s var(--ease);
     pointer-events: none; display: none;
   }
   .tp-glow {
     position: absolute; top: -5px; bottom: -5px; left: 0; width: 0%;
     background: var(--lime); opacity: 0.07; filter: blur(10px);
     pointer-events: none; transition: width 0.5s var(--ease);
   }
   .tp-hint {
     font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.06em;
     color: var(--gray2); margin-top: 7px;
     display: flex; align-items: center; gap: 16px;
   }
   .tp-hint-item { display: flex; align-items: center; gap: 4px; }
   .tp-hint-dot { width: 6px; height: 6px; }
   
   /* ── SPEED ───────────────────────────────────────────── */
   .pj-speed { padding: 14px 22px; border-bottom: 1px solid var(--border2); }
   .sec-label {
     display: flex; align-items: center; gap: 7px;
     font-family: var(--f-cond); font-size: 14px; font-weight: 700;
     letter-spacing: 0.08em; color: var(--white2); margin-bottom: 10px;
   }
   .tsp-btns { display: flex; gap: 5px; margin-bottom: 7px; }
   .sp-btn {
     flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
     padding: 11px 5px; background: var(--surface2); border: 1px solid var(--border2);
     cursor: pointer; transition: all var(--t); position: relative; overflow: hidden;
   }
   .sp-btn::after {
     content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
     background: var(--spd-c, var(--lime)); transform: scaleX(0); transition: transform var(--t);
   }
   .sp-btn[data-speed="drift"]     { --spd-c: var(--c-drift); }
   .sp-btn[data-speed="steady"]    { --spd-c: var(--c-steady); }
   .sp-btn[data-speed="momentum"]  { --spd-c: var(--c-momentum); }
   .sp-btn[data-speed="velocity"]  { --spd-c: var(--c-velocity); }
   .sp-btn[data-speed="overdrive"] { --spd-c: var(--c-overdrive); }
   .sp-btn:hover { border-color: var(--spd-c); background: color-mix(in srgb, var(--spd-c) 8%, var(--surface2)); }
   .sp-btn.active { background: var(--spd-c); border-color: var(--spd-c); }
   .sp-btn.active::after, .sp-btn:hover::after { transform: scaleX(1); }
   .sp-icon { display: flex; align-items: center; justify-content: center; color: var(--gray); transition: color var(--t); }
   .sp-btn:hover .sp-icon { color: var(--spd-c); }
   .sp-btn.active .sp-icon { color: rgba(255,255,255,0.85); }
   /* momentum active = green bg (#7AEB3C) → black text for readability */
   .sp-btn[data-speed="momentum"].active .sp-icon { color: rgba(0,0,0,0.75); }
   .sp-btn[data-speed="momentum"].active .sp-name { color: rgba(0,0,0,0.9); }
   .sp-btn[data-speed="momentum"].active .sp-mult { color: rgba(0,0,0,0.6); }
   .sp-name {
     font-family: var(--f-cond); font-size: 11px; font-weight: 900;
     letter-spacing: 0.08em; color: var(--gray); transition: color var(--t);
   }
   .sp-btn:hover .sp-name { color: var(--white2); }
   .sp-btn.active .sp-name { color: rgba(255,255,255,0.9); }
   .sp-mult { font-family: var(--f-mono); font-size: 10px; color: var(--gray2); transition: color var(--t); }
   .sp-btn:hover .sp-mult { color: var(--spd-c); }
   .sp-btn.active .sp-mult { color: rgba(255,255,255,0.65); }
   .sp-cooldown-bar { height: 2px; background: var(--surface3); border: 1px solid var(--border2); overflow: hidden; margin-bottom: 5px; display: flex; }
   .sp-cd-fill { height: 100%; background: var(--orange); width: 0%; transition: width 0.1s linear; }
   .sp-cd-label { font-family: var(--f-mono); font-size: 8px; color: var(--orange); letter-spacing: 0.06em; margin-left: 4px; }
   .sp-status { font-family: var(--f-mono); font-size: 9px; color: var(--gray); min-height: 13px; letter-spacing: 0.05em; }
   .sp-status.warn    { color: var(--orange); }
   .sp-status.penalty { color: var(--red); }
   
   /* ── TIME CREDIT MODULE ──────────────────────────────── */
   .pj-credit {
     padding: 14px 22px;
     border-bottom: 1px solid var(--border2);
     background: color-mix(in srgb, var(--credit) 2.5%, var(--surface));
   }
   .credit-header {
     display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
   }
   .credit-title {
     display: flex; align-items: center; gap: 7px;
     font-family: var(--f-cond); font-size: 14px; font-weight: 700;
     letter-spacing: 0.08em; color: var(--white2);
   }
   .credit-title svg { color: var(--credit); }
   .credit-module-tag {
     font-family: var(--f-mono); font-size: 8px; color: var(--gray);
     font-weight: 400; letter-spacing: 0.1em; margin-left: 4px;
   }
   .credit-apply-zone { display: flex; align-items: center; gap: 10px; }
   .credit-amount-display { display: flex; flex-direction: column; align-items: flex-end; }
   .credit-amount-lbl { font-family: var(--f-mono); font-size: 8px; color: var(--gray); letter-spacing: 0.1em; margin-bottom: 2px; }
   .credit-amount-val { font-family: var(--f-display); font-size: 22px; color: var(--credit); letter-spacing: 0.04em; line-height: 1; }
   .credit-amount-val.zero { color: var(--gray); }
   .btn-apply-credit {
     font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; font-weight: 600;
     background: none; border: 1px solid var(--credit); color: var(--credit);
     padding: 8px 16px; cursor: pointer; transition: all var(--t);
     display: flex; align-items: center; gap: 6px;
   }
   .btn-apply-credit:hover:not(:disabled) { background: var(--credit); color: var(--black); }
   .btn-apply-credit:disabled { opacity: 0.3; cursor: not-allowed; border-color: var(--gray); color: var(--gray); }
   .credit-bar-row { display: flex; align-items: center; gap: 10px; }
   .credit-track { flex: 1; height: 4px; background: var(--surface3); border: 1px solid var(--border2); overflow: hidden; }
   .credit-fill { height: 100%; background: var(--credit); width: 0%; transition: width 0.8s var(--ease); }
   .credit-cap-lbl { font-family: var(--f-mono); font-size: 8px; color: var(--gray); letter-spacing: 0.06em; white-space: nowrap; }
   .credit-events { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; max-height: 60px; overflow-y: auto; }
   .credit-event { font-family: var(--f-mono); font-size: 9px; color: var(--gray); letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
   .credit-event .ev-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--credit); flex-shrink: 0; }
   .credit-event .ev-amount { color: var(--credit); }
   .credit-cooldown { font-family: var(--f-mono); font-size: 8px; color: var(--orange); letter-spacing: 0.06em; margin-top: 5px; min-height: 12px; }
   
   /* ── TASKS SECTION ───────────────────────────────────── */
   .pj-tasks { border-bottom: 1px solid var(--border2); }
   .tasks-header {
     display: flex; align-items: center; justify-content: space-between;
     padding: 12px 22px 10px; border-bottom: 1px solid var(--border2);
   }
   .tasks-title {
     display: flex; align-items: center; gap: 7px;
     font-family: var(--f-cond); font-size: 14px; font-weight: 700;
     letter-spacing: 0.08em; color: var(--white2);
   }
   .tasks-subtitle { font-family: var(--f-mono); font-size: 8px; color: var(--gray); letter-spacing: 0.08em; margin-left: 6px; }
   .btn-add-task {
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
     background: none; border: 1px solid var(--border2); color: var(--gray);
     padding: 5px 12px; cursor: pointer; transition: all var(--t);
     display: flex; align-items: center; gap: 5px;
   }
   .btn-add-task:hover { border-color: var(--lime); color: var(--lime); }
   
   /* Weight Legend */
   .weight-legend {
     display: flex; align-items: center; gap: 12px;
     padding: 6px 22px; border-bottom: 1px solid var(--border);
     background: var(--surface2);
   }
   .wl-item { display: flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.06em; }
   .wl-dot { width: 6px; height: 6px; border-radius: 1px; }
   .wl-lbl { color: var(--gray); }
   .wl-wt { color: var(--gray); }
   .wl-hint { font-family: var(--f-mono); font-size: 8px; color: var(--gray2); letter-spacing: 0.06em; margin-left: auto; }
   
   /* Task Row */
   .task-row {
     border-bottom: 1px solid var(--border);
     background: var(--surface); transition: background var(--t);
   }
   .task-row:last-child { border-bottom: none; }
   .task-row:hover { background: var(--surface2); }
   
   .task-hdr {
     display: flex; align-items: center; gap: 0;
     padding: 0; cursor: pointer; min-height: 48px;
     border-bottom: 1px solid transparent; transition: border-color var(--t);
   }
   .task-row.expanded .task-hdr { border-bottom-color: var(--border); }
   
   .task-collapse-btn {
     width: 48px; height: 48px;
     display: flex; align-items: center; justify-content: center;
     color: var(--gray); flex-shrink: 0;
     transition: transform var(--t), color var(--t);
   }
   .task-row.expanded .task-collapse-btn { transform: rotate(90deg); color: var(--lime); }
   
   .task-title-inp {
     font-family: var(--f-cond); font-size: 16px; font-weight: 700;
     letter-spacing: 0.06em; background: none; border: none;
     color: var(--white2); outline: none; flex: 1;
     text-transform: uppercase; padding: 0; transition: color var(--t);
   }
   .task-title-inp:focus { color: var(--white); }
   
   .task-meta {
     display: flex; align-items: center; gap: 8px;
     padding: 0 16px; flex-shrink: 0;
   }
   
   .diff-badge {
     font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em;
     padding: 3px 8px; border: 1px solid; cursor: pointer;
     transition: all var(--t); white-space: nowrap;
   }
   .diff-badge[data-diff="easy"]    { border-color: var(--diff-easy); color: var(--diff-easy); }
   .diff-badge[data-diff="medium"]  { border-color: var(--diff-medium); color: var(--diff-medium); }
   .diff-badge[data-diff="hard"]    { border-color: var(--diff-hard); color: var(--diff-hard); }
   .diff-badge[data-diff="veteran"] { border-color: var(--diff-veteran); color: var(--diff-veteran); }
   .diff-badge:hover { opacity: 0.7; }
   
   .task-ratio { font-family: var(--f-mono); font-size: 10px; color: var(--gray); white-space: nowrap; }
   .task-ratio .done { color: var(--lime); }
   
   .task-mini-bar { width: 48px; height: 3px; background: var(--surface3); border: 1px solid var(--border); overflow: hidden; }
   .task-mini-fill { height: 100%; background: var(--lime); width: 0%; transition: width 0.5s var(--ease); }
   
   .task-del-btn {
     width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
     background: none; border: none; color: var(--gray);
     cursor: pointer; transition: all var(--t); flex-shrink: 0; margin-right: 4px;
   }
   .task-del-btn:hover { color: var(--red); }
   

/* ═══════════════════════════════════════════════════════
   TASK TIME POOL DISPLAY
   ─────────────────────────────────────────────────────
   Shown in the task group header row.
   Appears only once meaningful time has been spent
   OR a budget has been set. Hidden otherwise.
   ═══════════════════════════════════════════════════════ */

.task-pool {
  display: none;           /* shown via JS when relevant */
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 0 4px;
}

/* Horizontal mini progress bar */
.tp-bar {
  width: 36px; height: 3px;
  background: var(--surface3);
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 1px;
}
.tp-fill {
  height: 100%;
  width: 0%;
  background: var(--lime);
  transition: width 0.4s var(--ease), background 0.2s;
  border-radius: 1px;
}

/* Text label: "2h 10m / 10h" */
.tp-label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.tp-used   { color: var(--white2); font-weight: 600; }
.tp-sep    { color: var(--gray2); }
.tp-budget { color: var(--gray); }

/* Over-budget: used text goes red */
.task-pool.tp-over .tp-used { color: var(--red); }
.task-pool.tp-warn .tp-used { color: var(--orange); }

/* Clock icon button — sets/edits the budget */
.tp-set-btn {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: none;
  border: 1px solid var(--border2);
  color: var(--gray);
  cursor: pointer;
  transition: all var(--t);
  border-radius: 2px;
  flex-shrink: 0;
}
.tp-set-btn:hover {
  border-color: var(--lime);
  color: var(--lime);
}

/* Inline hours input — slides in on clock click */
.tp-input-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
}
.tp-hrs-inp {
  width: 52px;
  font-family: var(--f-mono);
  font-size: 9px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--white2);
  padding: 2px 5px;
  outline: none;
  letter-spacing: 0.04em;
  -moz-appearance: textfield;
}
.tp-hrs-inp:focus { border-color: var(--lime); }
.tp-hrs-inp::-webkit-inner-spin-button,
.tp-hrs-inp::-webkit-outer-spin-button { -webkit-appearance: none; }

.tp-confirm-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--lime);
  font-size: 9px;
  padding: 2px 5px;
  cursor: pointer;
  transition: all var(--t);
  font-family: var(--f-mono);
}
.tp-confirm-btn:hover {
  background: var(--lime-dim);
  border-color: var(--lime);
}

   /* Subtask List */
   .subtask-list { padding: 0 0 4px 48px; display: none; }
   .task-row.expanded .subtask-list { display: block; }
   
   .subtask-item {
     display: flex; align-items: center; gap: 8px;
     padding: 7px 16px 7px 0; border-bottom: 1px solid var(--border);
     cursor: pointer; transition: background var(--t);
   }
   .subtask-item:last-child { border-bottom: none; }
   .subtask-item:not(.completed):hover { background: var(--surface3); }
   
   .st-cb {
     width: 13px; height: 13px; border: 1.5px solid var(--border3);
     display: flex; align-items: center; justify-content: center;
     flex-shrink: 0; transition: all var(--t);
   }
   .subtask-item.completed .st-cb { background: var(--lime); border-color: var(--lime); }
   .st-check { display: none; font-size: 8px; color: var(--black); font-family: var(--f-mono); }
   .subtask-item.completed .st-check { display: block; }
   
   .st-text {
     font-family: var(--f-mono); font-size: 10px; color: var(--gray); flex: 1;
     transition: color var(--t);
   }
   .subtask-item:not(.completed):hover .st-text { color: var(--white2); }
   .subtask-item.completed .st-text { text-decoration: line-through; color: var(--border3); }
   .subtask-item.just-checked .st-text { animation: flashGreen 1s ease; }
   @keyframes flashGreen { 0%{color:var(--lime)} 100%{color:var(--border3)} }
   
   .st-ts { font-family: var(--f-mono); font-size: 8px; color: var(--border3); white-space: nowrap; }
   
   .subtask-add-row { display: flex; gap: 4px; padding: 8px 16px 8px 0; }
   .st-inp {
     flex: 1; background: var(--surface2); border: 1px solid var(--border2);
     color: var(--white2); font-family: var(--f-mono); font-size: 10px;
     padding: 6px 10px; outline: none; transition: border-color var(--t);
   }
   .st-inp::placeholder { color: var(--border3); }
   .st-inp:focus { border-color: var(--lime); }
   .btn-st-add {
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
     background: var(--surface2); border: 1px solid var(--border2); color: var(--gray);
     padding: 6px 10px; cursor: pointer; transition: all var(--t);
   }
   .btn-st-add:hover { border-color: var(--lime); color: var(--lime); }
   
   /* ── CONFIG ROW ──────────────────────────────────────── */
   .pj-cfg {
     display: grid; grid-template-columns: 1fr 1fr 1fr;
     border-bottom: 1px solid var(--border2);
   }
   .cfg-f {
     padding: 10px 16px; border-right: 1px solid var(--border2);
     display: flex; flex-direction: column; gap: 5px;
   }
   .cfg-f:last-child { border-right: none; }
   .cfg-lbl { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--gray); text-transform: uppercase; }
   .cfg-inp {
     background: none; border: none; border-bottom: 1px solid var(--border2);
     color: var(--white2); font-family: var(--f-mono); font-size: 12px;
     outline: none; padding: 3px 0; transition: border-color var(--t); color-scheme: dark;
   }
   .cfg-inp:focus { border-bottom-color: var(--lime); }
   .stab-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
   .stab-track { flex: 1; height: 3px; background: var(--surface3); border: 1px solid var(--border2); overflow: hidden; }
   .stab-fill { height: 100%; background: var(--lime); transition: width 0.6s var(--ease), background 0.6s; }
   .stab-lbl { font-family: var(--f-mono); font-size: 9px; color: var(--white2); min-width: 32px; text-align: right; }
   
   /* ── TIMELINE ────────────────────────────────────────── */
   .pj-tl { padding: 12px 22px 16px; background: var(--black); }
   .tl-bar { display: flex; height: 20px; gap: 2px; margin-bottom: 7px; }
   .tl-done { height: 100%; background: var(--surface3); border-right: 3px solid var(--lime); width: 0%; transition: width 0.5s var(--ease); }
   .tl-credit-block { height: 100%; background: var(--credit); opacity: 0.4; width: 0%; transition: width 0.5s var(--ease); }
   .tl-left { height: 100%; flex: 1; transition: background 0.5s; }
   .tl-marks { position: relative; height: 14px; }
   .tlm {
     position: absolute; font-family: var(--f-mono); font-size: 8px;
     letter-spacing: 0.08em; color: var(--gray2);
     transform: translateX(-50%); white-space: nowrap;
     transition: left 0.5s var(--ease);
   }
   .tlm-start { left: 0; transform: none; }
   .tlm-end   { right: 0; transform: none; }
   .tlm-now   { color: var(--lime); font-weight: 600; }
   .tlm-credit { color: var(--credit); font-size: 7px; }
   
   /* ── FOCUS OVERLAY ───────────────────────────────────── */
   .focus-overlay {
     position: fixed; inset: 0; background: var(--black); z-index: 500;
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     gap: 28px; transition: opacity 0.3s ease;
   }
   .focus-overlay.hidden { opacity: 0; pointer-events: none; }
   .focus-exit {
     position: absolute; top: 20px; right: 24px;
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
     background: none; border: 1px solid var(--border2); color: var(--gray);
     padding: 7px 14px; cursor: pointer; transition: all var(--t);
   }
   .focus-exit:hover { border-color: var(--red); color: var(--red); }
   .fo-logo { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.2em; color: var(--border3); }
   .fo-task-name {
     font-family: var(--f-display); font-size: clamp(30px, 5vw, 54px);
     letter-spacing: 0.06em; color: var(--white); text-align: center;
   }
   .fo-clocks { display: flex; align-items: center; gap: 28px; }
   .fo-clock-block { text-align: center; }
   .fo-clk-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--gray); margin-bottom: 7px; }
   .fo-clk-label.lime { color: var(--lime); }
   .fo-clk-digits {
     font-family: var(--f-mono); font-size: clamp(44px, 8vw, 76px);
     color: var(--border3); letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
   }
   .fo-clk-digits.lime { color: var(--lime); filter: drop-shadow(0 0 18px rgba(122,235,60,0.4)); }
   .fo-clk-sub { font-family: var(--f-mono); font-size: 8px; color: var(--border3); letter-spacing: 0.12em; }
   .fo-clk-sub.lime { color: rgba(122,235,60,0.4); }
   .fo-vs { font-family: var(--f-mono); font-size: 11px; color: var(--border2); letter-spacing: 0.1em; }
   .fo-progress { width: min(580px, 90vw); }
   .fo-prog-track { height: 5px; background: var(--surface2); border: 1px solid var(--border2); margin-bottom: 9px; overflow: hidden; }
   .fo-prog-fill { height: 100%; background: var(--lime); width: 0%; transition: width 0.3s var(--ease); }
   .fo-prog-row { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; }
   .fo-prog-pct { color: var(--lime); }
   .fo-finish { color: var(--gray); }
   .fo-speed-row { display: flex; gap: 5px; }
   .fo-spd-pill {
     flex: 1; text-align: center; padding: 7px;
     border: 1px solid var(--border2); font-family: var(--f-mono); font-size: 10px;
     color: var(--gray); cursor: pointer; background: var(--surface); transition: all var(--t);
   }
   .fo-spd-pill:hover { border-color: var(--border3); color: var(--white2); }
   .fo-spd-pill.active { background: var(--lime); color: var(--black); border-color: var(--lime); font-weight: 700; }
   
   /* ── RESPONSIVE ──────────────────────────────────────── */
   @media (max-width: 768px) {
     .app { padding: 14px; }
     .topnav { padding: 12px 14px; }
     .pj-stats { grid-template-columns: repeat(3, 1fr); }
     .pj-clocks { grid-template-columns: 1fr 1fr; }
     .clk-sep { display: none; }
     .clk-ctrl {
       grid-column: span 2; padding: 12px 0 0; border-left: none;
       border-top: 1px solid var(--border2); flex-direction: row;
     }
     .tsp-btns { flex-wrap: wrap; }
     .sp-btn { min-width: calc(50% - 3px); }
     .pj-cfg { grid-template-columns: 1fr 1fr; }
     .pj-cfg .cfg-f:last-child { grid-column: span 2; border-top: 1px solid var(--border2); border-right: none; }
     .weight-legend { flex-wrap: wrap; gap: 8px; }
     .wl-hint { display: none; }
   }
   
   /* ═══════════════════════════════════════════════════════
      PERSISTENCE MODULE STYLES — Layer 3 Add-on
      ═══════════════════════════════════════════════════════ */
   
   /* ── AUTO-SAVE INDICATOR DOT ─────────────────────────── */
   .persist-indicator {
     width: 6px; height: 6px; border-radius: 50%;
     background: var(--border3); flex-shrink: 0;
     transition: background 0.3s ease, box-shadow 0.3s ease;
     align-self: center;
   }
   .persist-indicator.saved {
     background: var(--lime);
     box-shadow: 0 0 6px rgba(122,235,60,0.6);
     animation: savePulse 1.2s ease forwards;
   }
   .persist-indicator.error {
     background: var(--red);
     box-shadow: 0 0 6px rgba(255,51,51,0.6);
   }
   @keyframes savePulse {
     0%   { transform: scale(1.6); opacity: 1; }
     60%  { transform: scale(1.0); opacity: 1; }
     100% { transform: scale(1.0); opacity: 0.4; }
   }
   
   /* ── RESTORE NOTICE (inline card banner) ─────────────── */
   .restore-notice {
     background: color-mix(in srgb, var(--credit) 8%, var(--surface));
     border-bottom: 1px solid rgba(0,229,255,0.2);
     padding: 0;
     animation: slideDown 0.28s var(--ease);
     overflow: hidden;
   }
   @keyframes slideDown {
     from { max-height: 0; opacity: 0; }
     to   { max-height: 60px; opacity: 1; }
   }
   .rn-content {
     display: flex; align-items: center; justify-content: space-between;
     padding: 9px 16px; gap: 12px;
   }
   .rn-msg {
     font-family: var(--f-mono); font-size: 10px;
     color: var(--credit); letter-spacing: 0.05em; flex: 1;
   }
   .rn-dismiss {
     background: none; border: none; color: var(--gray);
     font-size: 10px; cursor: pointer; padding: 2px 6px;
     transition: color var(--t); flex-shrink: 0;
   }
   .rn-dismiss:hover { color: var(--white2); }
   
   /* ── RESUME OVERLAY ──────────────────────────────────── */
   .resume-overlay {
     position: fixed; inset: 0; z-index: 400;
     background: rgba(0,0,0,0.85);
     display: flex; align-items: center; justify-content: center;
     backdrop-filter: blur(4px);
     transition: opacity 0.25s ease;
   }
   .resume-overlay.hidden { opacity: 0; pointer-events: none; }
   
   .resume-panel {
     background: var(--surface);
     border: 1px solid var(--border2);
     width: min(640px, 94vw);
     max-height: 85vh;
     display: flex; flex-direction: column;
     overflow: hidden;
     animation: panelIn 0.28s var(--ease);
   }
   @keyframes panelIn {
     from { transform: translateY(16px) scale(0.98); opacity: 0; }
     to   { transform: translateY(0) scale(1); opacity: 1; }
   }
   
   .resume-panel-hdr {
     display: flex; align-items: center; justify-content: space-between;
     padding: 16px 20px; border-bottom: 1px solid var(--border2);
     background: var(--surface2); flex-shrink: 0;
   }
   .resume-panel-title {
     display: flex; align-items: center; gap: 8px;
     font-family: var(--f-display); font-size: 18px;
     letter-spacing: 0.1em; color: var(--white);
   }
   .resume-panel-title svg { color: var(--credit); }
   .resume-close {
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
     background: none; border: 1px solid var(--border2); color: var(--gray);
     padding: 6px 12px; cursor: pointer; transition: all var(--t);
   }
   .resume-close:hover { border-color: var(--red); color: var(--red); }
   
   .resume-sub {
     font-family: var(--f-mono); font-size: 10px; color: var(--gray);
     letter-spacing: 0.05em; padding: 10px 20px;
     border-bottom: 1px solid var(--border); flex-shrink: 0;
   }
   
   .resume-list {
     overflow-y: auto; flex: 1; padding: 12px;
     display: flex; flex-direction: column; gap: 8px;
   }
   
   /* ── RESUME LOADING ──────────────────────────────────── */
   .resume-loading {
     display: flex; align-items: center; gap: 8px; padding: 28px 16px;
     font-family: var(--f-mono); font-size: 10px; color: var(--gray);
     justify-content: center; letter-spacing: 0.08em;
   }
   .rl-dot {
     width: 6px; height: 6px; border-radius: 50%; background: var(--credit);
     animation: pulseDot 1s ease-in-out infinite;
   }
   
   .resume-empty {
     text-align: center; padding: 40px 20px;
   }
   .re-title {
     font-family: var(--f-display); font-size: 20px;
     letter-spacing: 0.1em; color: var(--border3); margin-bottom: 8px;
   }
   .re-sub {
     font-family: var(--f-mono); font-size: 10px;
     color: var(--gray2); letter-spacing: 0.06em;
   }
   
   /* ── RESUME CARD ─────────────────────────────────────── */
   .resume-card {
     border: 1px solid var(--border2); background: var(--surface2);
     transition: border-color var(--t);
   }
   .resume-card:hover { border-color: var(--border3); }
   .resume-card.was-running { border-color: rgba(0,229,255,0.25); }
   
   .rc-header {
     display: flex; align-items: center; justify-content: space-between;
     padding: 12px 14px 8px;
   }
   .rc-title {
     font-family: var(--f-display); font-size: 18px;
     letter-spacing: 0.06em; color: var(--white);
   }
   .rc-state {
     font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em;
     padding: 3px 8px; border: 1px solid var(--border2); color: var(--gray);
   }
   .rc-state.running  { border-color: var(--credit); color: var(--credit); }
   .rc-state.paused   { border-color: var(--orange); color: var(--orange); }
   .rc-state.idle     { border-color: var(--border3); color: var(--border3); }
   
   .rc-stats {
     display: grid; grid-template-columns: repeat(4, 1fr);
     border-top: 1px solid var(--border); margin: 0 14px;
   }
   .rc-stat {
     padding: 8px 10px; border-right: 1px solid var(--border);
   }
   .rc-stat:last-child { border-right: none; }
   .rcs-lbl {
     font-family: var(--f-mono); font-size: 8px;
     letter-spacing: 0.1em; color: var(--gray); margin-bottom: 4px;
   }
   .rcs-val {
     font-family: var(--f-display); font-size: 17px;
     letter-spacing: 0.04em; color: var(--white2); line-height: 1;
   }
   .rcs-val.compl { color: var(--lime); }
   
   .rc-ts {
     font-family: var(--f-mono); font-size: 9px; color: var(--gray2);
     letter-spacing: 0.06em; padding: 6px 14px 4px;
   }
   .rc-offline-notice {
     font-family: var(--f-mono); font-size: 9px;
     color: rgba(0,229,255,0.6); padding: 4px 14px;
     letter-spacing: 0.05em;
   }
   
   .rc-actions {
     display: flex; gap: 6px; padding: 10px 14px;
     border-top: 1px solid var(--border);
   }
   .rc-btn-resume {
     display: flex; align-items: center; gap: 6px;
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; font-weight: 600;
     background: none; border: 1px solid var(--lime); color: var(--lime);
     padding: 7px 16px; cursor: pointer; transition: all var(--t);
   }
   .rc-btn-resume:hover { background: var(--lime); color: var(--black); }
   .rc-btn-delete {
     display: flex; align-items: center; gap: 5px;
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
     background: none; border: 1px solid var(--border2); color: var(--gray);
     padding: 7px 12px; cursor: pointer; transition: all var(--t);
   }
   .rc-btn-delete:hover { border-color: var(--red); color: var(--red); }
   
   /* ── CONFIRM PANEL (inside resume card) ──────────────── */
   .rc-confirm {
     padding: 14px;
   }
   .rcc-title {
     font-family: var(--f-display); font-size: 16px;
     letter-spacing: 0.08em; color: var(--white); margin-bottom: 10px;
   }
   
   .confirm-reconstruction {
     background: var(--surface3); border: 1px solid var(--border2);
     padding: 10px 12px; margin-bottom: 10px;
   }
   .cr-title {
     font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.12em;
     color: var(--credit); margin-bottom: 7px;
   }
   .cr-row {
     display: flex; justify-content: space-between; align-items: center;
     font-family: var(--f-mono); font-size: 10px; color: var(--gray);
     padding: 3px 0; border-bottom: 1px solid var(--border);
   }
   .cr-row:last-of-type { border-bottom: none; }
   .cr-row .highlight { color: var(--lime); font-weight: 600; }
   .cr-flag {
     font-family: var(--f-mono); font-size: 9px; color: var(--orange);
     padding: 4px 0; letter-spacing: 0.06em;
   }
   
   .rcc-note {
     font-family: var(--f-mono); font-size: 9px; color: var(--gray);
     letter-spacing: 0.06em; margin-bottom: 10px;
   }
   .rcc-actions { display: flex; gap: 8px; }
   .rcc-btn-confirm {
     display: flex; align-items: center; gap: 6px;
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; font-weight: 600;
     background: var(--lime); border: 1px solid var(--lime); color: var(--black);
     padding: 8px 16px; cursor: pointer; transition: all var(--t);
   }
   .rcc-btn-confirm:hover { background: #8ef248; border-color: #8ef248; }
   .rcc-btn-cancel {
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
     background: none; border: 1px solid var(--border2); color: var(--gray);
     padding: 8px 14px; cursor: pointer; transition: all var(--t);
   }
   .rcc-btn-cancel:hover { border-color: var(--border3); color: var(--white2); }
   
   /* ── SUBTASK COMPLETION HOOK flash ───────────────────── */
   .subtask-item.persist-flash .st-cb {
     animation: creditFlash 0.4s ease;
   }
   @keyframes creditFlash {
     0%   { box-shadow: 0 0 0 3px rgba(0,229,255,0.5); }
     100% { box-shadow: none; }
   }
   
   /* ── STARTUP BANNER ──────────────────────────────────── */
   .startup-banner {
     background: color-mix(in srgb, var(--credit) 10%, var(--black));
     border-bottom: 1px solid rgba(0,229,255,0.35);
     animation: slideDown 0.3s var(--ease);
   }
   .sb-content {
     display: flex; align-items: center; gap: 10px;
     padding: 10px 32px; max-width: 1100px; margin: 0 auto;
   }
   .sb-dot {
     width: 7px; height: 7px; border-radius: 50%;
     background: var(--credit); flex-shrink: 0;
     box-shadow: 0 0 8px rgba(0,229,255,0.7);
     animation: pulseDot 1.4s ease-in-out infinite;
   }
   .sb-msg {
     font-family: var(--f-mono); font-size: 11px;
     color: rgba(0,229,255,0.8); letter-spacing: 0.06em; flex: 1;
   }
   .sb-msg strong { color: var(--credit); }
   .sb-open {
     font-family: var(--f-mono); font-size: 11px; font-weight: 700;
     letter-spacing: 0.08em; background: var(--credit); border: none;
     color: var(--black); padding: 7px 16px; cursor: pointer;
     transition: all var(--t); flex-shrink: 0;
   }
   .sb-open:hover { background: #33eeff; }
   .sb-dismiss {
     background: none; border: none; color: var(--gray);
     font-size: 11px; cursor: pointer; padding: 4px 8px;
     transition: color var(--t); flex-shrink: 0;
   }
   .sb-dismiss:hover { color: var(--white2); }
   
   /* ═══════════════════════════════════════════════════════
      CELEBRATION GIF SYSTEM — Layer 4 (Giphy embedded)
      ═══════════════════════════════════════════════════════ */
   
   /* ── CONFIG GRID — 4 cols with GIF picker ────────────── */
   .pj-cfg { grid-template-columns: 1fr 1fr 1fr 1.6fr; }
   .cfg-f-gif { grid-column: 4; }
   
   /* ── GIF PICK BUTTON ─────────────────────────────────── */
   .gif-btn-row { display: flex; gap: 5px; align-items: center; margin-top: 4px; }
   
   .gif-pick-btn {
     flex: 1; display: flex; align-items: center; gap: 7px;
     background: none; border: 1px solid var(--border2);
     padding: 5px 9px; cursor: pointer;
     transition: all var(--t); min-height: 28px; overflow: hidden;
   }
   .gif-pick-btn:hover { border-color: var(--lime); }
   .gif-pick-btn.has-gif { border-color: rgba(122,235,60,0.35); }
   
   .gif-thumb {
     width: 32px; height: 22px; object-fit: cover;
     border-radius: 1px; flex-shrink: 0; display: none;
   }
   .gif-btn-label {
     font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em;
     color: var(--gray); white-space: nowrap; overflow: hidden;
     text-overflow: ellipsis; transition: color var(--t);
   }
   .gif-pick-btn:hover .gif-btn-label { color: var(--lime); }
   .gif-pick-btn.has-gif .gif-btn-label { color: var(--white2); }
   .gif-btn-icon { color: var(--border3); flex-shrink: 0; margin-left: auto; transition: color var(--t); }
   .gif-pick-btn:hover .gif-btn-icon { color: var(--lime); }
   
   .gif-clear-btn {
     display: none; align-items: center; justify-content: center;
     background: none; border: 1px solid var(--border2);
     color: var(--gray); font-size: 9px; padding: 5px 8px;
     cursor: pointer; transition: all var(--t); flex-shrink: 0;
   }
   .gif-clear-btn:hover { border-color: var(--red); color: var(--red); }
   
   /* ── GIPHY PICKER PANEL ──────────────────────────────── */
   .giphy-backdrop {
     position: fixed; inset: 0; z-index: 299;
   }
   .giphy-backdrop.hidden { display: none; }
   
   .giphy-picker {
     position: absolute; z-index: 300;
     background: var(--surface2);
     border: 1px solid var(--border2);
     display: flex; flex-direction: column;
     max-height: 480px;
     box-shadow: 0 16px 48px rgba(0,0,0,0.7);
     animation: gpSlideIn 0.2s var(--ease);
   }
   .giphy-picker.hidden { display: none; }
   
   @keyframes gpSlideIn {
     from { opacity: 0; transform: translateY(-6px) scale(0.98); }
     to   { opacity: 1; transform: translateY(0) scale(1); }
   }
   
   .gp-header {
     display: flex; align-items: center; gap: 10px;
     padding: 10px 14px; border-bottom: 1px solid var(--border2);
     background: var(--surface3); flex-shrink: 0;
   }
   .gp-title {
     display: flex; align-items: center; gap: 6px;
     font-family: var(--f-mono); font-size: 11px; font-weight: 700;
     letter-spacing: 0.1em; color: var(--white2);
   }
   .gp-powered {
     font-family: var(--f-mono); font-size: 8px;
     color: var(--border3); letter-spacing: 0.06em; margin-left: 2px;
   }
   .gp-close {
     margin-left: auto; background: none; border: none;
     color: var(--gray); font-size: 10px; cursor: pointer;
     padding: 3px 8px; transition: color var(--t); font-family: var(--f-mono);
   }
   .gp-close:hover { color: var(--red); }
   
   .gp-search-row {
     display: flex; flex-direction: column; gap: 4px;
     padding: 8px 12px; border-bottom: 1px solid var(--border);
     flex-shrink: 0;
   }
   .gp-search-wrap {
     display: flex; align-items: center; gap: 7px;
     background: var(--surface3); border: 1px solid var(--border2);
     padding: 5px 10px; transition: border-color var(--t);
   }
   .gp-search-wrap:focus-within { border-color: var(--lime); }
   .gp-search-wrap svg { color: var(--border3); flex-shrink: 0; }
   .gp-search-inp {
     flex: 1; background: none; border: none; outline: none;
     font-family: var(--f-mono); font-size: 11px; color: var(--white2);
     letter-spacing: 0.05em;
   }
   .gp-search-inp::placeholder { color: var(--border3); }
   .gp-search-clear {
     background: none; border: none; color: var(--border3);
     font-size: 10px; cursor: pointer; padding: 0 3px;
     transition: color var(--t); display: none;
     align-items: center; justify-content: center;
   }
   .gp-search-clear:hover { color: var(--red); }
   .gp-status {
     font-family: var(--f-mono); font-size: 8px;
     color: var(--gray); letter-spacing: 0.08em;
     min-height: 10px; padding-left: 2px;
   }
   
   .gp-scroll {
     flex: 1; overflow-y: auto; overflow-x: hidden;
     padding: 8px;
   }
   .gp-scroll::-webkit-scrollbar { width: 3px; }
   .gp-scroll::-webkit-scrollbar-thumb { background: var(--border2); }
   
   .gp-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 4px;
   }
   
   .gp-tile {
     position: relative; overflow: hidden;
     cursor: pointer; aspect-ratio: 4/3;
     background: var(--surface3);
     border: 1px solid transparent;
     transition: border-color 0.15s, transform 0.15s;
   }
   .gp-tile:hover { border-color: var(--lime); transform: scale(1.02); z-index: 1; }
   .gp-tile.active { border-color: var(--lime); }
   .gp-tile.selected { border-color: var(--lime); animation: tileFlash 0.5s ease; }
   @keyframes tileFlash {
     0%,100% { border-color: var(--lime); }
     50%      { border-color: #fff; box-shadow: 0 0 12px rgba(122,235,60,0.7); }
   }
   
   .gp-img {
     width: 100%; height: 100%; object-fit: cover;
     display: block; transition: opacity 0.2s;
   }
   .gp-img:not([src]) { opacity: 0; }
   
   .gp-loading {
     grid-column: 1/-1; display: flex; align-items: center;
     justify-content: center; gap: 10px; padding: 40px 0;
     font-family: var(--f-mono); font-size: 10px;
     color: var(--gray); letter-spacing: 0.1em;
   }
   .gp-loading-more {
     grid-column: 1/-1; display: flex; justify-content: center;
     padding: 12px 0;
   }
   
   .gp-spinner {
     width: 8px; height: 8px; border-radius: 50%;
     border: 1.5px solid var(--border2);
     border-top-color: var(--lime);
     animation: spin 0.7s linear infinite; display: inline-block;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   .gp-empty {
     grid-column: 1/-1; text-align: center; padding: 36px 16px;
     font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em;
     color: var(--gray);
   }
   .gp-empty span { font-size: 9px; color: var(--border3); display: block; margin-top: 6px; }
   
   .gp-error {
     grid-column: 1/-1; text-align: center; padding: 36px 16px;
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
     color: var(--orange);
   }
   .gp-err-icon { font-size: 22px; margin-bottom: 8px; }
   .gp-err-sub { font-size: 9px; color: var(--gray); margin-top: 6px; }
   
   .gp-sentinel { grid-column: 1/-1; height: 1px; }
   
   .gp-footer {
     display: flex; align-items: center; justify-content: space-between;
     padding: 6px 12px; border-top: 1px solid var(--border);
     flex-shrink: 0;
   }
   .gp-logo { height: 16px; opacity: 0.6; }
   .gp-footer-hint {
     font-family: var(--f-mono); font-size: 8px;
     color: var(--border3); letter-spacing: 0.06em;
   }
   
   /* ── RESPONSIVE ──────────────────────────────────────── */
   @media (max-width: 768px) {
     .pj-cfg { grid-template-columns: 1fr 1fr; }
     .cfg-f-gif { grid-column: span 2; border-top: 1px solid var(--border2); border-right: none; }
     .gp-grid { grid-template-columns: repeat(3, 1fr); }
     .cel-panel { padding: 28px 16px 24px; }
   }
   
   
   .celebration-overlay {
     position: fixed; inset: 0; z-index: 600;
     display: flex; align-items: center; justify-content: center;
     transition: opacity 0.28s ease;
   }
   .celebration-overlay.hidden        { opacity: 0; pointer-events: none; }
   .celebration-overlay.hiding        { opacity: 0; pointer-events: none; }
   .celebration-overlay:not(.hidden)  { opacity: 1; }
   
   .cel-backdrop {
     position: absolute; inset: 0;
     background: rgba(0, 0, 0, 0.92);
     cursor: pointer;
   }
   
   .cel-panel {
     position: relative; z-index: 1;
     display: flex; flex-direction: column; align-items: center;
     gap: 16px; padding: 40px 32px 32px;
     max-width: min(560px, 94vw);
     width: 100%;
     animation: celPanelIn 0.38s cubic-bezier(0.16, 1, 0.3, 1);
   }
   @keyframes celPanelIn {
     from { transform: translateY(24px) scale(0.96); opacity: 0; }
     to   { transform: translateY(0) scale(1);       opacity: 1; }
   }
   
   .cel-close {
     position: absolute; top: 0; right: 0;
     background: none; border: 1px solid var(--border2);
     color: var(--gray); font-size: 11px; font-family: var(--f-mono);
     padding: 6px 12px; cursor: pointer; transition: all var(--t);
     letter-spacing: 0.08em;
   }
   .cel-close:hover { border-color: var(--red); color: var(--red); }
   
   .cel-badge {
     display: flex; align-items: center; gap: 8px;
     background: var(--lime); color: var(--black);
     font-family: var(--f-mono); font-size: 12px; font-weight: 700;
     letter-spacing: 0.14em; padding: 8px 20px;
     animation: celBadgeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
   }
   @keyframes celBadgeIn {
     from { transform: scale(0.8); opacity: 0; }
     to   { transform: scale(1);   opacity: 1; }
   }
   
   .cel-title {
     font-family: var(--f-display); font-size: clamp(28px, 5vw, 52px);
     letter-spacing: 0.08em; color: var(--white); text-align: center;
     line-height: 1; animation: celFadeUp 0.4s ease 0.25s both;
   }
   @keyframes celFadeUp {
     from { transform: translateY(10px); opacity: 0; }
     to   { transform: translateY(0);    opacity: 1; }
   }
   
   .cel-sub {
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
     color: var(--gray); animation: celFadeUp 0.4s ease 0.32s both;
   }
   
   /* ── GIF ZONE ────────────────────────────────────────── */
   .cel-gif-zone {
     width: 100%; max-width: 460px;
     min-height: 120px;
     display: flex; align-items: center; justify-content: center;
     position: relative;
     animation: celFadeUp 0.45s ease 0.38s both;
   }
   
   .cel-gif-zone.loading::before {
     content: 'LOADING GIF...';
     font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em;
     color: var(--gray);
     animation: loadingPulse 1.2s ease-in-out infinite;
   }
   @keyframes loadingPulse { 0%,100%{opacity:0.3} 50%{opacity:1} }
   
   .cel-gif-img {
     width: 100%; max-height: 340px;
     object-fit: contain; display: none;
     border: 1px solid rgba(255,255,255,0.05);
     border-radius: 3px;
   }
   
   .cel-gif-fallback {
     display: none; flex-direction: column; align-items: center;
     gap: 14px; padding: 32px 0;
   }
   .cel-gif-zone.loaded  .cel-gif-fallback { display: none; }
   .cel-gif-zone:not(.loaded):not(.loading) .cel-gif-fallback { display: flex; }
   
   .cel-fallback-icon { opacity: 0.6; }
   .cel-fallback-text {
     font-family: var(--f-display); font-size: 28px;
     letter-spacing: 0.12em; color: var(--lime); opacity: 0.7;
   }
   
   .cel-gif-error {
     font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em;
     color: var(--orange); margin-top: 6px; text-align: center;
     display: none;
   }
   
   .cel-hint {
     font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em;
     color: var(--border3); animation: celFadeUp 0.4s ease 0.5s both;
   }
   
   /* ── RESPONSIVE ──────────────────────────────────────── */
   @media (max-width: 768px) {
     .pj-cfg { grid-template-columns: 1fr 1fr; }
     .cfg-f-gif { grid-column: span 2; border-top: 1px solid var(--border2); border-right: none; }
     .cel-panel { padding: 28px 16px 24px; }
   }
   
   /* ═══════════════════════════════════════════════════════
      SOUND SYSTEM — SFX mute button
      ═══════════════════════════════════════════════════════ */
   .sfx-mute-btn { min-width: 56px; }
   .sfx-mute-btn.muted { color: var(--border3); border-color: var(--border2); }
   .sfx-mute-btn.muted:hover { border-color: var(--lime); color: var(--lime); }
   .sfx-icon { display: flex; align-items: center; }
   
   /* ═══════════════════════════════════════════════════════
      SURPRISE MODE — nav toggle + overlay additions
      ═══════════════════════════════════════════════════════ */
   
   /* Nav toggle */
   .surprise-toggle-btn { min-width: 100px; transition: all var(--t); }
   .surprise-toggle-btn.active {
     border-color: var(--lime);
     color: var(--lime);
     box-shadow: 0 0 8px rgba(122,235,60,0.2);
   }
   .surprise-toggle-btn:not(.active) { color: var(--border3); border-color: var(--border2); }
   .surprise-toggle-btn:not(.active):hover { border-color: var(--gray); color: var(--gray); }
   .sm-label { font-size: 10px; letter-spacing: 0.1em; }
   
   /* Tag label — shows which theme was used */
   .cel-tag-label {
     font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em;
     color: var(--border3); min-height: 12px;
     animation: celFadeUp 0.4s ease 0.45s both;
   }
   
   /* Action buttons row */
   .cel-actions {
     display: flex; gap: 10px; align-items: center;
     animation: celFadeUp 0.4s ease 0.52s both;
   }
   
   .cel-btn {
     display: flex; align-items: center; gap: 7px;
     background: none; font-family: var(--f-mono);
     font-size: 10px; letter-spacing: 0.1em;
     padding: 8px 18px; cursor: pointer;
     transition: all var(--t);
   }
   
   .cel-btn-replay {
     border: 1px solid var(--border2); color: var(--gray);
   }
   .cel-btn-replay:hover {
     border-color: var(--lime); color: var(--lime);
     box-shadow: 0 0 8px rgba(122,235,60,0.15);
   }
   
   .cel-btn-dismiss {
     border: 1px solid var(--border2); color: var(--gray);
   }
   .cel-btn-dismiss:hover { border-color: var(--red); color: var(--red); }
   
   /* Hide replay btn when surprise mode is off */
   .cel-btn-replay.disabled { opacity: 0.3; pointer-events: none; }
   
   /* ═══════════════════════════════════════════════════════
      EXECUTION VELOCITY DISPLAY  (replaces speed buttons)
      ═══════════════════════════════════════════════════════ */
   
   .vel-display {
     display: flex; flex-direction: column; gap: 8px;
     padding: 12px 14px;
     background: var(--surface2);
     border: 1px solid var(--border2);
     transition: border-color 0.4s ease, box-shadow 0.4s ease;
   }
   
   /* Color states */
   .vel-display.vel-fast {
     border-color: rgba(122,235,60,0.5);
     box-shadow: 0 0 12px rgba(122,235,60,0.08);
   }
   .vel-display.vel-slow {
     border-color: rgba(255,51,51,0.4);
     box-shadow: 0 0 12px rgba(255,51,51,0.06);
   }
   .vel-display.vel-neutral { border-color: var(--border2); }
   .vel-display.vel-calibrating { border-color: var(--border2); opacity: 0.7; }
   
   /* Main readout row */
   .vel-main {
     display: flex; align-items: center; gap: 8px;
   }
   .vel-icon {
     font-size: 14px; line-height: 1;
     transition: filter 0.3s;
   }
   .vel-fast  .vel-icon { filter: drop-shadow(0 0 6px #7AEB3C); }
   .vel-slow  .vel-icon { filter: drop-shadow(0 0 6px #ff3333); filter: grayscale(1); }
   
   .vel-mult {
     font-family: var(--f-mono); font-size: 22px; font-weight: 700;
     letter-spacing: 0.04em; transition: color 0.35s ease;
     color: var(--white);
   }
   .vel-fast  .vel-mult { color: var(--lime); }
   .vel-slow  .vel-mult { color: #ff5555; }
   .vel-neutral .vel-mult { color: var(--white2); }
   .vel-calibrating .vel-mult { color: var(--gray); }
   
   .vel-label {
     font-family: var(--f-mono); font-size: 9px;
     letter-spacing: 0.15em; color: var(--gray);
     margin-left: 2px;
   }
   
   /* Velocity bar */
   .vel-bar-track {
     position: relative; height: 3px;
     background: var(--border2); border-radius: 2px;
     overflow: visible;
   }
   .vel-fill {
     height: 100%; border-radius: 2px;
     background: var(--gray2);
     transition: width 0.6s cubic-bezier(0.16,1,0.3,1), background 0.4s;
     min-width: 2%;
   }
   .vel-fast    .vel-fill { background: var(--lime); }
   .vel-slow    .vel-fill { background: #ff5555; }
   .vel-neutral .vel-fill { background: var(--white2); }
   
   /* Center mark = 1.0× baseline */
   .vel-center-mark {
     position: absolute; top: -3px;
     left: calc(((1.0 - 0.5) / (3.0 - 0.5)) * 100%);
     width: 1px; height: 9px;
     background: var(--border3);
   }
   
   /* Status */
   .vel-status {
     font-family: var(--f-mono); font-size: 9px;
     letter-spacing: 0.1em; transition: color 0.35s;
     color: var(--gray);
   }
   .vel-fast    .vel-status { color: var(--lime); }
   .vel-slow    .vel-status { color: #ff5555; }
   .vel-neutral .vel-status { color: var(--white2); }
   
   /* Stats row */
   .vel-stats {
     display: flex; gap: 16px; padding-top: 4px;
     border-top: 1px solid var(--border2);
   }
   .vel-stat {
     display: flex; flex-direction: column; gap: 2px;
   }
   .vel-stat-lbl {
     font-family: var(--f-mono); font-size: 8px;
     letter-spacing: 0.12em; color: var(--gray2);
   }
   .vel-est, .vel-act, .vel-tasks {
     font-family: var(--f-mono); font-size: 11px;
     color: var(--white2); letter-spacing: 0.06em;
   }
   
   /* ── MOMENTUM BOOST additions ─────────────────────────── */
   
   /* Boosting state — intense lime glow */
   .vel-display.vel-boosting {
     border-color: var(--lime);
     box-shadow: 0 0 18px rgba(122,235,60,0.18), 0 0 4px rgba(122,235,60,0.1);
     animation: velBoostPulse 1.8s ease-in-out infinite;
   }
   @keyframes velBoostPulse {
     0%,100% { box-shadow: 0 0 12px rgba(122,235,60,0.12); }
     50%      { box-shadow: 0 0 24px rgba(122,235,60,0.28); }
   }
   
   .vel-boosting .vel-icon {
     animation: velIconSpin 0.6s ease-in-out;
     display: inline-block;
   }
   @keyframes velIconSpin {
     0%   { transform: scale(1); }
     50%  { transform: scale(1.6) rotate(-15deg); filter: drop-shadow(0 0 8px #7AEB3C); }
     100% { transform: scale(1); }
   }
   
   /* Boost decay bar row */
   .vel-boost-row {
     display: flex; align-items: center; gap: 8px;
     animation: velFadeIn 0.25s ease;
   }
   @keyframes velFadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; } }
   
   .vel-boost-lbl {
     font-family: var(--f-mono); font-size: 8px;
     letter-spacing: 0.14em; color: var(--lime);
     min-width: 32px;
   }
   
   .vel-boost-track {
     flex: 1; height: 4px; background: rgba(122,235,60,0.12);
     border-radius: 2px; overflow: hidden;
   }
   
   .vel-boost-fill {
     height: 100%; background: var(--lime);
     border-radius: 2px;
     transition: width 0.28s linear;
     box-shadow: 0 0 6px rgba(122,235,60,0.6);
   }
   
   .vel-boost-timer {
     font-family: var(--f-mono); font-size: 8px;
     color: var(--lime); min-width: 24px; text-align: right;
   }
   
   /* Baseline stat value */
   .vel-baseline-val {
     font-family: var(--f-mono); font-size: 11px;
     color: var(--white2); letter-spacing: 0.06em;
     transition: color 0.3s;
   }
   .vel-fast    .vel-baseline-val { color: var(--lime); }
   .vel-slow    .vel-baseline-val { color: #ff5555; }
   .vel-neutral .vel-baseline-val { color: var(--white2); }
   
   /* Mult flash on new boost */
   .vel-mult-flash {
     animation: velMultFlash 0.5s ease;
   }
   @keyframes velMultFlash {
     0%,100% { transform: scale(1); }
     40%     { transform: scale(1.3); color: #fff; }
   }
   
   /* ═══════════════════════════════════════════════════════
      GROUP / SUBTASK ARCHITECTURE STYLES
      ═══════════════════════════════════════════════════════ */
   
   /* Task group badge — computed display, not interactive scoring */
   .task-grp-badge {
     font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em;
     border: 1px solid var(--border3); color: var(--gray);
     padding: 2px 6px; white-space: nowrap;
     transition: color 0.3s, border-color 0.3s;
     /* Not cursor:pointer — it's informational only */
   }
   
   /* Subtask diff badge — inline, clickable on incomplete subtasks */
   .st-diff {
     font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.08em;
     border: 1px solid var(--border3); color: var(--gray);
     padding: 1px 5px; white-space: nowrap; flex-shrink: 0;
     cursor: pointer; transition: opacity 0.2s;
     user-select: none;
   }
   .st-diff:hover { opacity: 0.7; }
   .subtask-item.completed .st-diff {
     cursor: default; opacity: 0.4; pointer-events: none;
   }
   
   /* Subtask layout now has diff badge between text and timestamp */
   .subtask-item {
     display: grid;
     grid-template-columns: 18px 1fr auto auto;
     align-items: center; gap: 8px;
     padding: 7px 16px 7px 0; border-bottom: 1px solid var(--border);
     cursor: pointer; transition: background var(--t);
   }
   .subtask-item:last-child { border-bottom: none; }
   .subtask-item:not(.completed):hover { background: var(--surface3); }
   
   /* Subtask add row — now has difficulty badge selector */
   .subtask-add-row {
     display: flex; gap: 4px; padding: 8px 16px 8px 0;
     align-items: center;
   }
   .st-new-diff {
     font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.08em;
     border: 1px solid var(--border3); color: var(--gray);
     padding: 5px 7px; white-space: nowrap; flex-shrink: 0;
     cursor: pointer; transition: all 0.2s;
     user-select: none;
   }
   .st-new-diff:hover { opacity: 0.75; }
   
   /* Anti-farming warning */
   .st-farm-warn {
     font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em;
     color: #ff8800; padding: 5px 0 5px 0;
     border-top: 1px solid rgba(255,136,0,0.2);
     animation: farmWarnFade 0.3s ease;
   }
   @keyframes farmWarnFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; } }
   
   /* ═══════════════════════════════════════════════════════
      SAFEZONE / VISIBILITY LAYER STYLES
      ═══════════════════════════════════════════════════════ */
   
   /* ── Subtask item layout (9-column grid) ────────────── */
   .subtask-item {
     display: grid;
     grid-template-columns: 18px 14px 1fr auto auto auto auto auto auto;
     grid-template-rows: auto auto;
     align-items: center; gap: 6px;
     padding: 7px 16px 7px 0; border-bottom: 1px solid var(--border);
     cursor: pointer; transition: background var(--t);
   }
   .subtask-item:last-child { border-bottom: none; }
   .subtask-item:not(.completed):hover { background: var(--surface3); }
   
   /* Notes zone spans full width in row 2 */
   .st-notes-zone {
     grid-column: 1 / -1;
     padding: 0 0 4px 18px;
   }
   .st-notes-inp {
     width: 100%; min-height: 52px; resize: vertical;
     background: var(--surface3); border: 1px solid var(--border2);
     color: var(--white2); font-family: var(--f-mono); font-size: 10px;
     padding: 7px 9px; outline: none; line-height: 1.5;
     transition: border-color var(--t);
     box-sizing: border-box;
   }
   .st-notes-inp:focus { border-color: var(--lime); }
   .st-notes-inp::placeholder { color: var(--border3); }
   
   /* ── Subtask mini-timer ──────────────────────────────── */
   .st-timer {
     font-family: var(--f-mono); font-size: 9px;
     letter-spacing: 0.04em; white-space: nowrap;
     color: var(--gray); min-width: 72px; text-align: right;
     transition: color 0.3s;
   }
   .st-timer-ok   { color: var(--lime); }
   .st-timer-warn { color: #ff8800; }
   .st-timer-over { color: #ff4444; }
   .st-timer-neutral { color: var(--gray2); }
   
   /* ── Custom Timer ────────────────────────────────────── */
   .st-custom-btn {
     background: none; border: 1px solid transparent; color: var(--gray2);
     padding: 2px 4px; cursor: pointer; transition: all var(--t);
     line-height: 0;
   }
   .st-custom-btn:hover { color: var(--lime); }
   .st-custom-wrap { display: flex; align-items: center; gap: 4px; }
   .st-custom-inp {
     width: 40px; background: var(--surface3); border: 1px solid var(--border2);
     color: var(--white); font-family: var(--f-mono); font-size: 9px;
     padding: 2px 4px; outline: none; text-align: center;
   }
   .st-custom-inp:focus { border-color: var(--lime); }
   .st-custom-ok {
     background: var(--surface3); border: 1px solid var(--border2);
     color: var(--lime); font-family: var(--f-mono); font-size: 9px;
     padding: 2px 5px; cursor: pointer;
   }
   .st-custom-ok:hover { background: var(--lime); color: var(--black); }
   
   /* ── Notes toggle button ─────────────────────────────── */
   .st-notes-btn {
     background: none; border: 1px solid var(--border2);
     color: var(--gray2); padding: 3px 4px; cursor: pointer;
     transition: all var(--t); flex-shrink: 0; line-height: 0;
   }
   .st-notes-btn:hover { border-color: var(--lime); color: var(--lime); }
   .st-notes-btn.active { border-color: var(--lime); color: var(--lime); background: rgba(122,235,60,0.08); }
   
   /* ── Lock state ──────────────────────────────────────── */
   .subtask-item.locked { opacity: 0.6; cursor: default; }
   .subtask-item.locked:hover { background: none; }
   .st-lock-icon { color: var(--border3); }
   
   /* Flash when user tries to complete locked subtask */
   @keyframes lockedFlash {
     0%, 100% { background: none; }
     30% { background: rgba(255,136,0,0.12); }
   }
   .subtask-item.locked-flash { animation: lockedFlash 0.5s ease; }
   
   /* Flash when user tries to tick a pre-queued subtask */
   @keyframes queuedFlash {
     0%, 100% { background: rgba(255,180,0,0.04); }
     35% { background: rgba(255,180,0,0.22); box-shadow: inset 2px 0 12px rgba(255,180,0,0.3); }
   }
   .subtask-item.queued-flash { animation: queuedFlash 0.6s ease; }
   
   /* ── Execution Status Panel ──────────────────────────── */
   .pj-exec-status {
     border-bottom: 1px solid var(--border2);
     padding: 10px 16px 12px;
     background: var(--black);
   }
   .exs-header {
     display: flex; align-items: center; gap: 6px;
     font-family: var(--f-mono); font-size: 8px;
     letter-spacing: 0.14em; color: var(--gray);
     margin-bottom: 10px;
   }
   .exs-grid {
     display: grid; grid-template-columns: repeat(3, 1fr);
     gap: 2px;
   }
   .exs-item {
     display: flex; flex-direction: column; gap: 4px;
     padding: 8px 12px;
     background: var(--surface2); border: 1px solid var(--border2);
   }
   .exs-lbl {
     font-family: var(--f-mono); font-size: 7px;
     letter-spacing: 0.14em; color: var(--gray2);
   }
   .exs-val {
     font-family: var(--f-mono); font-size: 16px; font-weight: 600;
     letter-spacing: 0.04em; color: var(--white2);
     transition: color 0.35s;
   }
   .exs-pos { color: var(--lime); }
   .exs-neg { color: #ff4444; }
   
   /* ═══════════════════════════════════════════════════════
      SEQUENTIAL SUBTASK EXECUTION STATES
      ═══════════════════════════════════════════════════════ */
   
   /* Active subtask — lime left border glow, slightly elevated */
   .subtask-item.active-subtask {
     background: rgba(122,235,60,0.04);
     border-left: 2px solid var(--lime);
     padding-left: 6px;
     box-shadow: inset 2px 0 8px rgba(122,235,60,0.08);
   }
   
   /* Pre-selected to start first (idle only) — amber glow */
   .subtask-item.queued-first {
     background: rgba(255,180,0,0.04);
     border-left: 2px solid #ffb400;
     padding-left: 6px;
     box-shadow: inset 2px 0 8px rgba(255,180,0,0.08);
   }
   .subtask-item.queued-first .st-text::before {
     content: '⬡ ';
     color: #ffb400;
     font-size: 8px;
   }
   /* The star/activate button when queued */
   .st-activate-btn.st-queued {
     color: #ffb400 !important;
   }
   
   /* ▶ indicator via pseudo-element on text */
   .subtask-item.active-subtask .st-text::before {
     content: '▶ ';
     color: var(--lime);
     font-size: 8px;
     letter-spacing: 0.04em;
   }
   
   /* Waiting subtasks — dimmed, shows they're queued */
   .subtask-item.waiting {
     opacity: 0.45;
   }
   .subtask-item.waiting .st-text::before {
     content: '· ';
     color: var(--gray2);
     font-size: 10px;
   }
   /* Don't dim timer text for waiting (shows estimate) */
   .subtask-item.waiting .st-timer {
     opacity: 0.7;
   }
   
   /* Active timer text gets lime when running */
   .subtask-item.active-subtask .st-timer {
     color: var(--lime);
     font-weight: 600;
   }
   
   /* ── Notes indicator dot ─────────────────────────────── */
   .st-notes-btn {
     position: relative;
   }
   .notes-dot {
     position: absolute; top: 2px; right: 2px;
     width: 5px; height: 5px; border-radius: 50%;
     background: var(--lime);
     pointer-events: none;
   }
   .st-notes-btn.has-notes { border-color: rgba(122,235,60,0.35); }
   
   /* ═══════════════════════════════════════════════════════
      NOTES RICH EDITOR
      ═══════════════════════════════════════════════════════ */
   
   /* ── Toolbar ─────────────────────────────────────────── */
   .notes-toolbar {
     display: none;
     align-items: center; gap: 2px;
     padding: 4px 6px; margin-bottom: 4px;
     background: var(--surface3);
     border: 1px solid var(--border2);
     border-bottom: none;
     flex-wrap: wrap;
   }
   
   .ntb {
     background: none; border: 1px solid transparent;
     color: var(--gray); font-family: var(--f-mono); font-size: 10px;
     padding: 3px 6px; cursor: pointer; line-height: 1;
     transition: all 0.15s; user-select: none; flex-shrink: 0;
     min-width: 22px; text-align: center;
   }
   .ntb:hover { border-color: var(--border3); color: var(--white2); background: var(--surface2); }
   .ntb-bold   { font-weight: 700; }
   .ntb-italic { font-style: italic; }
   .ntb-under  { text-decoration: underline; }
   .ntb-strike { text-decoration: line-through; }
   .ntb-code   { font-family: var(--f-mono); letter-spacing: 0; }
   .ntb-quote  { font-size: 13px; line-height: 1; }
   
   .ntb-sep {
     width: 1px; height: 14px; background: var(--border2);
     margin: 0 3px; flex-shrink: 0;
   }
   
   /* ── Editor body ─────────────────────────────────────── */
   .st-notes-editor {
     width: 100%; min-height: 52px;
     background: var(--surface3); border: 1px solid var(--border2);
     color: var(--white2); font-family: var(--f-mono); font-size: 10px;
     padding: 8px 10px; outline: none; line-height: 1.6;
     transition: border-color var(--t);
     box-sizing: border-box;
     white-space: pre-wrap; word-break: break-word;
     cursor: text;
   }
   .st-notes-editor:focus { border-color: var(--lime); }
   .st-notes-editor:empty::before {
     content: attr(data-placeholder);
     color: var(--border3); pointer-events: none;
   }
   
   /* Standard formatting */
   .st-notes-editor b,
   .st-notes-editor strong { color: var(--white); }
   .st-notes-editor i,
   .st-notes-editor em     { color: var(--white2); }
   .st-notes-editor u      { text-decoration-color: var(--gray); }
   .st-notes-editor s      { color: var(--gray); }
   
   /* Lists */
   .st-notes-editor ul,
   .st-notes-editor ol {
     margin: 4px 0; padding-left: 18px;
   }
   .st-notes-editor li { margin: 2px 0; }
   
   /* Checklist */
   .nc-item {
     display: flex; align-items: flex-start; gap: 6px;
     margin: 3px 0; padding: 2px 0;
   }
   .nc-box {
     color: var(--gray); font-size: 11px; flex-shrink: 0;
     cursor: pointer; user-select: none; margin-top: 1px;
     transition: color 0.2s;
   }
   .nc-box:hover { color: var(--lime); }
   .nc-item.nc-checked .nc-box { color: var(--lime); }
   .nc-item.nc-checked .nc-text {
     text-decoration: line-through;
     color: var(--gray);
   }
   .nc-text { flex: 1; min-width: 0; }
   
   /* Inline code */
   .note-code {
     font-family: var(--f-mono); font-size: 9.5px;
     background: rgba(122,235,60,0.08); border: 1px solid rgba(122,235,60,0.2);
     color: var(--lime); padding: 0 5px 1px; border-radius: 2px;
     white-space: nowrap;
   }
   
   /* Divider */
   .note-hr, .st-notes-editor hr {
     border: none; border-top: 1px solid var(--border3);
     margin: 8px 0;
   }
   
   /* Quote block */
   .st-notes-editor blockquote {
     border-left: 2px solid var(--border3);
     margin: 4px 0; padding: 2px 0 2px 10px;
     color: var(--gray); font-style: italic;
   }
   
   /* Image */
   .note-img {
     max-width: 100%; height: auto;
     display: block; margin: 6px 0;
     border: 1px solid var(--border2);
     opacity: 0.85;
   }
   
   /* ── Remove old textarea styles ──────────────────────── */
   .st-notes-inp { display: none; }
   
   /* ═══════════════════════════════════════════════════════
      DAILY WORK LOG CHART
      ═══════════════════════════════════════════════════════ */
   
   .worklog-panel {
     max-width: 1100px; margin: 0 auto 40px;
     padding: 0 32px;
   }
   
   .wl-header {
     display: flex; align-items: center; justify-content: space-between;
     margin-bottom: 16px;
   }
   
   .wl-title {
     display: flex; align-items: center; gap: 8px;
     font-family: var(--f-mono); font-size: 11px;
     letter-spacing: 0.14em; color: var(--gray);
   }
   
   .wl-range-btns { display: flex; gap: 4px; }
   
   .wl-range-btn {
     background: none; border: 1px solid var(--border2);
     color: var(--gray); font-family: var(--f-mono); font-size: 9px;
     letter-spacing: 0.1em; padding: 4px 10px; cursor: pointer;
     transition: all var(--t);
   }
   .wl-range-btn:hover        { border-color: var(--border3); color: var(--white2); }
   .wl-range-btn.active       { border-color: var(--lime); color: var(--lime); background: rgba(122,235,60,0.06); }
   
   /* Summary row */
   .wl-summary {
     display: flex; gap: 2px; margin-bottom: 14px;
   }
   .wl-stat {
     flex: 1; padding: 8px 12px;
     background: var(--surface2); border: 1px solid var(--border2);
     display: flex; flex-direction: column; gap: 4px;
   }
   .wl-stat-lbl {
     font-family: var(--f-mono); font-size: 7px;
     letter-spacing: 0.14em; color: var(--gray2);
   }
   .wl-stat-val {
     font-family: var(--f-mono); font-size: 18px; font-weight: 600;
     color: var(--white2); letter-spacing: 0.04em;
   }
   .wl-stat-val.wl-accent { color: var(--lime); }
   
   /* Chart wrap */
   .wl-chart-wrap {
     background: var(--surface2); border: 1px solid var(--border2);
     padding: 16px 16px 8px;
     min-height: 120px;
   }
   
   /* ═══════════════════════════════════════════════════════
      STATS PAGE
      ═══════════════════════════════════════════════════════ */
   
   .stats-page {
     min-height: calc(100vh - 52px);
     background: var(--black);
   }
   .stats-page.hidden { display: none; }
   #dashboardPage.hidden { display: none; }
   
   .stats-inner {
     max-width: 1100px; margin: 0 auto;
     padding: 32px 32px 80px;
   }
   
   .stats-hdr {
     display: flex; align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
     padding-bottom: 16px;
     border-bottom: 1px solid var(--border2);
   }
   
   .stats-title {
     display: flex; align-items: center; gap: 10px;
     font-family: var(--f-mono); font-size: 18px;
     letter-spacing: 0.18em; color: var(--white);
   }
   
   /* Active state on STATS nav button */
   #statsNavBtn.active {
     border-color: var(--lime);
     color: var(--lime);
     background: rgba(122,235,60,0.07);
   }
   
   /* ═══════════════════════════════════════════════════════
      HUSKY CYCLE — DISCIPLINE SYSTEM STYLES
      ═══════════════════════════════════════════════════════ */
   
   /* ── Divider ─────────────────────────────────────────── */
   .hk-divider {
     display: flex; align-items: center; gap: 14px;
     margin: 28px 0 20px;
   }
   .hk-divider-line { flex: 1; height: 1px; background: var(--border2); }
   .hk-divider-label {
     font-family: var(--f-mono); font-size: 9px;
     letter-spacing: .2em; color: var(--gray2);
     white-space: nowrap;
   }
   
   /* ── Section wrapper ─────────────────────────────────── */
   .hk-section {
     background: var(--surface2); border: 1px solid var(--border2);
     padding: 16px 18px; margin-bottom: 12px;
   }
   .hk-panel {
     background: var(--surface2); border: 1px solid var(--border2);
     padding: 16px 18px;
   }
   .hk-panel-lbl {
     display: flex; align-items: center; gap: 7px;
     font-family: var(--f-mono); font-size: 9px;
     letter-spacing: .16em; color: var(--gray2);
     margin-bottom: 14px;
   }
   
   /* ── Layouts ─────────────────────────────────────────── */
   .hk-3col {
     display: grid; grid-template-columns: 1fr 240px 1fr; gap: 12px;
   }
   .hk-2col {
     display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
   }
   
   /* ── KPIs ────────────────────────────────────────────── */
   .hk-kpi-grid {
     display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
   }
   .hk-kpi {
     background: var(--surface3); border: 1px solid var(--border);
     padding: 12px 14px;
   }
   .hk-kpi-val {
     font-family: var(--f-mono); font-size: 30px; font-weight: 600;
     line-height: 1; color: var(--white);
   }
   .hk-kpi-sub { font-size: 14px; font-weight: 400; color: var(--gray); }
   .hk-kpi-lbl {
     font-family: var(--f-mono); font-size: 8px;
     letter-spacing: .14em; color: var(--gray2); margin-top: 6px;
   }
   .hk-kpi-pct { font-family: var(--f-mono); font-size: 20px; color: var(--white2); }
   .hk-kpi-bar-track {
     height: 3px; background: var(--border2); margin: 6px 0 4px;
     border-radius: 1px; overflow: hidden;
   }
   .hk-kpi-bar-fill { height: 100%; background: var(--lime); border-radius: 1px; }
   .hk-lime { color: var(--lime) !important; }
   .hk-dim  { color: var(--gray2); }
   
   /* ── Buttons ─────────────────────────────────────────── */
   .hk-btn {
     background: none; border: 1px solid var(--border2);
     color: var(--gray); font-family: var(--f-mono); font-size: 9px;
     letter-spacing: .12em; padding: 6px 14px; cursor: pointer;
     transition: all .2s;
   }
   .hk-btn:hover { border-color: var(--lime); color: var(--lime); }
   .hk-btn-warn:hover { border-color: var(--red); color: var(--red); }
   .hk-small-lbl {
     font-family: var(--f-mono); font-size: 9px;
     letter-spacing: .1em; color: var(--gray2);
   }
   
   /* ── Heat grid ───────────────────────────────────────── */
   .hk-heat-row {
     display: flex; align-items: center; gap: 3px; margin-bottom: 3px;
   }
   .hk-heat-wlbl {
     font-family: var(--f-mono); font-size: 9px; color: var(--gray2);
     width: 24px; text-align: right; padding-right: 6px; flex-shrink: 0;
   }
   .hk-heat-cell {
     width: 16px; height: 16px; border-radius: 2px;
     border: 1px solid var(--border2); cursor: pointer;
     transition: transform .12s, border-color .12s;
     flex-shrink: 0;
   }
   .hk-heat-cell:hover { transform: scale(1.2); border-color: var(--lime); }
   .hk-d0 { background: transparent; }
   .hk-d1 { background: rgba(122,235,60,.28); border-color: rgba(122,235,60,.35) !important; }
   .hk-d2 { background: rgba(122,235,60,.65); border-color: var(--lime) !important; }
   .hk-week-sym {
     margin-left: 8px; font-size: 16px; line-height: 1;
     font-family: var(--f-mono); flex-shrink: 0;
   }
   .hk-active-lbl {
     margin-left: 6px; font-family: var(--f-mono); font-size: 8px;
     letter-spacing: .12em; color: #ffaa00;
   }
   .hk-heat-legend {
     display: flex; align-items: center; gap: 12px;
     margin-top: 10px; padding-top: 10px;
     border-top: 1px solid var(--border2);
   }
   .hk-legend-item {
     display: flex; align-items: center; gap: 5px;
     font-family: var(--f-mono); font-size: 9px; color: var(--gray2);
   }
   .hk-total {
     margin-left: auto; font-family: var(--f-mono);
     font-size: 9px; color: var(--gray2);
   }
   
   /* ── Timeline ────────────────────────────────────────── */
   .hk-timeline-grid {
     display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
     margin-bottom: 10px;
   }
   .hk-week-card {
     border: 1px solid var(--border); padding: 10px 6px;
     text-align: center; transition: border-color .2s;
   }
   .hk-week-num { font-family: var(--f-mono); font-size: 8px; color: var(--gray2); margin-bottom: 5px; }
   .hk-week-sym-lg { font-size: 22px; line-height: 1; margin-bottom: 4px; }
   .hk-week-days { font-family: var(--f-mono); font-size: 9px; color: var(--gray); }
   .hk-week-tag { font-family: var(--f-mono); font-size: 8px; letter-spacing: .08em; margin-top: 4px; }
   .hk-week-prog { height: 2px; background: var(--border2); border-radius: 1px; overflow: hidden; margin-top: 6px; }
   .hk-active-card { border-color: #ffaa00 !important; background: rgba(255,170,0,.04); }
   .hk-sp2 { border-color: rgba(122,235,60,.45); }
   .hk-sp  { border-color: rgba(122,235,60,.3); }
   .hk-eq  { border-color: var(--border2); }
   .hk-def { border-color: rgba(255,170,0,.35); }
   .hk-mis, .hk-ob { border-color: rgba(255,68,68,.35); }
   .hk-timeline-legend {
     display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
     padding-top: 10px; border-top: 1px solid var(--border2);
   }
   .hk-tl-sym { font-family: var(--f-mono); font-size: 11px; }
   .hk-c-amber { color: #ffaa00 !important; }
   
   /* ── Radar ───────────────────────────────────────────── */
   .hk-sig-box {
     background: var(--surface3); border: 1px solid var(--border);
     padding: 10px 12px; margin-top: 10px;
   }
   .hk-sig-lbl {
     font-family: var(--f-mono); font-size: 8px;
     letter-spacing: .12em; color: var(--gray2); margin-bottom: 5px;
   }
   .hk-sig-val { font-family: var(--f-mono); font-size: 11px; color: var(--white2); line-height: 1.5; }
   
   /* ── Metrics ─────────────────────────────────────────── */
   .hk-metric { padding-bottom: 16px; }
   .hk-metric-sep { border-bottom: 1px solid var(--border2); margin-bottom: 16px; }
   .hk-metric-header {
     display: flex; justify-content: space-between; align-items: baseline;
     margin-bottom: 5px;
   }
   .hk-metric-lbl {
     font-family: var(--f-mono); font-size: 9px;
     letter-spacing: .1em; color: var(--gray2);
   }
   .hk-metric-val { font-family: var(--f-mono); font-size: 26px; font-weight: 600; line-height: 1; }
   .hk-metric-bar-track { height: 2px; background: var(--border2); border-radius: 1px; overflow: hidden; }
   .hk-metric-bar-fill  { height: 100%; border-radius: 1px; transition: width .4s; }
   .hk-metric-bands {
     display: flex; justify-content: space-between;
     font-family: var(--f-mono); font-size: 8px; color: var(--gray2);
     margin: 3px 0 4px;
   }
   .hk-metric-interp { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; }
   
   /* ── Reservoir ───────────────────────────────────────── */
   .hk-res-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
   .hk-res-card { background: var(--surface3); border: 1px solid var(--border); padding: 10px; }
   .hk-res-sym   { font-size: 22px; line-height: 1; margin-bottom: 3px; }
   .hk-res-count { font-family: var(--f-mono); font-size: 30px; font-weight: 600; line-height: 1; margin-bottom: 5px; }
   .hk-res-lbl   { font-family: var(--f-mono); font-size: 8px; letter-spacing: .12em; color: var(--gray2); margin-bottom: 8px; }
   .hk-dot-grid  { display: flex; flex-wrap: wrap; gap: 3px; }
   .hk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); }
   .hk-cap-track { width: 60px; height: 2px; background: var(--border2); border-radius: 1px; overflow: hidden; }
   .hk-cap-fill  { height: 100%; background: var(--lime); border-radius: 1px; }
   .hk-rules-row {
     display: flex; flex-wrap: wrap; gap: 14px;
     padding: 8px 10px; background: var(--surface3);
     border: 1px solid var(--border);
     font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em;
   }
   
   /* ── Surplus progress ────────────────────────────────── */
   .hk-prog-row { margin-bottom: 14px; }
   .hk-prog-labels {
     display: flex; justify-content: space-between; align-items: baseline;
     margin-bottom: 5px;
   }
   .hk-prog-name { font-family: var(--f-mono); font-size: 10px; color: var(--white2); letter-spacing: .06em; }
   .hk-prog-val  { font-family: var(--f-mono); font-size: 12px; color: var(--white2); }
   .hk-prog-earned { font-size: 9px; color: var(--lime); }
   .hk-prog-track { height: 3px; background: var(--border2); border-radius: 1px; overflow: hidden; }
   .hk-prog-fill  { height: 100%; border-radius: 1px; transition: width .4s; }
   .hk-fill-lime  { background: var(--lime); }
   
   /* ═══════════════════════════════════════════════════════
      HUSKY MANUAL PAGE
      ═══════════════════════════════════════════════════════ */
   
   .manual-page { min-height: calc(100vh - 52px); background: var(--black); }
   .manual-page.hidden { display: none; }
   #manualNavBtn.active { border-color: var(--lime); color: var(--lime); background: rgba(122,235,60,0.07); }
   
   .manual-inner {
     max-width: 860px; margin: 0 auto;
     padding: 40px 32px 100px;
   }
   
   /* Masthead */
   .manual-masthead { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border2); }
   .manual-wordmark {
     font-family: var(--f-mono); font-size: 48px; font-weight: 700;
     letter-spacing: .32em; color: var(--white);
     line-height: 1;
   }
   .manual-subtitle {
     font-family: var(--f-mono); font-size: 10px;
     letter-spacing: .18em; color: var(--gray2); margin-top: 6px;
   }
   
   /* TOC */
   .manual-toc {
     display: flex; flex-wrap: wrap; gap: 4px;
     margin-bottom: 40px; padding-bottom: 20px;
     border-bottom: 1px solid var(--border);
   }
   .manual-toc-item {
     font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em;
     color: var(--gray2); text-decoration: none; padding: 5px 12px;
     border: 1px solid var(--border); transition: all .2s;
   }
   .manual-toc-item:hover { border-color: var(--lime); color: var(--lime); }
   
   /* Sections */
   .manual-section {
     display: grid; grid-template-columns: 56px 1fr; gap: 0 24px;
     margin-bottom: 48px; padding-bottom: 48px;
     border-bottom: 1px solid var(--border);
   }
   .manual-section:last-child { border-bottom: none; }
   
   .manual-sec-num {
     font-family: var(--f-mono); font-size: 11px;
     letter-spacing: .1em; color: var(--border3);
     padding-top: 5px; text-align: right;
   }
   
   .manual-h2 {
     font-family: var(--f-mono); font-size: 16px;
     letter-spacing: .14em; color: var(--white);
     margin-bottom: 16px; font-weight: 400;
   }
   
   .manual-p {
     font-family: var(--f-mono); font-size: 12px; line-height: 1.85;
     color: var(--white2); margin-bottom: 14px; max-width: 640px;
   }
   
   .manual-callout {
     background: var(--surface3); border-left: 2px solid var(--lime);
     padding: 12px 16px; margin: 20px 0;
     font-family: var(--f-mono); font-size: 11px; line-height: 1.8;
     color: var(--lime); letter-spacing: .04em;
   }
   
   /* Triple concept row */
   .manual-triple {
     display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
     margin: 20px 0;
   }
   .manual-triple-item {
     background: var(--surface2); border: 1px solid var(--border2);
     padding: 14px; text-align: center;
   }
   .manual-triple-sym { font-size: 22px; color: var(--lime); margin-bottom: 8px; line-height: 1; }
   .manual-triple-lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--white2); margin-bottom: 4px; }
   .manual-triple-desc { font-family: var(--f-mono); font-size: 9px; color: var(--gray); line-height: 1.5; }
   
   /* Cycle diagram */
   .manual-cycle-diagram {
     display: flex; align-items: flex-start; gap: 16px;
     margin: 20px 0; padding: 20px;
     background: var(--surface2); border: 1px solid var(--border2);
   }
   .manual-cycle-col { flex: 1; }
   .manual-cycle-header {
     font-family: var(--f-mono); font-size: 8px;
     letter-spacing: .18em; color: var(--gray2);
     padding-bottom: 8px; border-bottom: 1px solid var(--border);
     margin-bottom: 8px;
   }
   .manual-cycle-footer {
     font-family: var(--f-mono); font-size: 8px;
     letter-spacing: .12em; color: var(--border3);
     padding-top: 8px; border-top: 1px solid var(--border);
     margin-top: 6px;
   }
   .manual-cycle-body { display: flex; flex-direction: column; gap: 3px; }
   .manual-cycle-center { align-items: center; text-align: center; }
   .manual-week-row {
     font-family: var(--f-mono); font-size: 10px;
     color: var(--white2); padding: 3px 6px;
     background: var(--surface3); border: 1px solid var(--border);
   }
   .manual-result-row {
     font-family: var(--f-mono); font-size: 16px;
     padding: 2px 6px; line-height: 1.6;
   }
   .manual-cycle-arrow {
     font-family: var(--f-mono); font-size: 18px;
     color: var(--border3); padding-top: 24px; flex-shrink: 0;
   }
   
   /* Symbol table */
   .manual-sym-table { margin: 20px 0; display: flex; flex-direction: column; gap: 0; }
   .manual-sym-row {
     display: grid; grid-template-columns: 44px 80px 120px 1fr;
     gap: 16px; align-items: start;
     padding: 14px 0; border-bottom: 1px solid var(--border);
   }
   .manual-sym-row:last-child { border-bottom: none; }
   .manual-sym-glyph { font-size: 22px; line-height: 1.2; font-family: var(--f-mono); }
   .manual-sym-threshold { font-family: var(--f-mono); font-size: 10px; color: var(--gray2); padding-top: 4px; letter-spacing: .06em; }
   .manual-sym-name { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--white2); padding-top: 3px; }
   .manual-sym-desc { font-family: var(--f-mono); font-size: 11px; line-height: 1.7; color: var(--gray); }
   
   /* Conversion grid */
   .manual-conversion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
   .manual-conv-card {
     background: var(--surface2); border: 1px solid var(--border2);
     padding: 18px;
   }
   .manual-conv-equation {
     font-family: var(--f-mono); font-size: 20px;
     color: var(--white); margin-bottom: 6px; letter-spacing: .08em;
   }
   .mc-sym { color: var(--lime); }
   .mc-x   { color: var(--lime); font-size: 24px; }
   .manual-conv-name {
     font-family: var(--f-mono); font-size: 9px;
     letter-spacing: .16em; color: var(--lime); margin-bottom: 10px;
   }
   .manual-conv-desc { font-family: var(--f-mono); font-size: 11px; line-height: 1.7; color: var(--gray); }
   
   /* Step list */
   .manual-step-list { margin: 16px 0; display: flex; flex-direction: column; gap: 0; }
   .manual-step {
     display: grid; grid-template-columns: 20px 1fr; gap: 14px;
     padding: 16px 0; border-bottom: 1px solid var(--border);
   }
   .manual-step:last-child { border-bottom: none; }
   .manual-step-num { font-family: var(--f-mono); font-size: 12px; color: var(--lime); padding-top: 2px; }
   .manual-step-title { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--white2); margin-bottom: 6px; }
   .manual-step-desc { font-family: var(--f-mono); font-size: 11px; line-height: 1.75; color: var(--gray); }
   
   /* ── Husky paused notices ────────────────────────────── */
   .hk-paused-notice {
     display: flex; align-items: center; gap: 8px;
     padding: 10px 14px; margin-bottom: 14px;
     background: var(--surface3); border: 1px solid var(--border2);
     font-family: var(--f-mono); font-size: 10px;
     letter-spacing: .06em; color: var(--gray);
   }
   
   .manual-paused-banner {
     display: flex; align-items: center; gap: 8px;
     margin-top: 10px; padding: 9px 14px;
     background: var(--surface2); border: 1px solid var(--border2);
     font-family: var(--f-mono); font-size: 10px;
     letter-spacing: .06em; color: var(--gray);
   }
   
   /* ═══════════════════════════════════════════════════════
   
   /* ═══════════════════════════════════════════════════════
      FIGJAM CANVAS — THINKING SPACE
      ═══════════════════════════════════════════════════════ */
   
   /* ── Nav button active ───────────────────────────────── */
   #notesNavBtn.active { border-color:var(--lime); color:var(--lime); background:rgba(122,235,60,.07); }
   
   /* ── Page shell ─────────────────────────────────────── */
   .notes-page {
     display: flex; flex-direction: column;
     height: calc(100vh - 52px);
     background: #f4f3ef;
   }
   .notes-page.hidden { display: none; }
   
   /* ── Canvas toolbar (top, floating pill) ────────────── */
   .cv-toolbar {
     display: flex; align-items: center; justify-content: space-between;
     padding: 6px 16px;
     background: rgba(10,10,10,.97);
     border-bottom: 1px solid #1a1a1a;
     gap: 12px;
     flex-shrink: 0;
     z-index: 30;
   }
   .cv-tb-left {
     display: flex; align-items: center; gap: 10px; flex-shrink: 0;
     font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; color: var(--gray2);
   }
   .cv-tools-center {
     display: flex; align-items: center; gap: 2px;
     background: #111; border: 1px solid #2a2a2a;
     padding: 4px 6px; border-radius: 6px;
   }
   .cv-tool-btn {
     background: none; border: none; color: var(--gray);
     width: 30px; height: 28px;
     display: flex; align-items: center; justify-content: center;
     cursor: pointer; border-radius: 4px;
     transition: background .12s, color .12s;
   }
   .cv-tool-btn:hover { background: #222; color: var(--white2); }
   .cv-tool-btn.active { background: var(--lime); color: var(--black); }
   .cv-tool-sep { width:1px; height:18px; background:#2a2a2a; margin: 0 4px; }
   .cv-tb-right {
     display: flex; align-items: center; gap: 6px; flex-shrink: 0;
   }
   
   /* ── Board tab bar ──────────────────────────────────── */
   .cv-board-bar {
     background: #0e0e0e; border-bottom: 1px solid #1a1a1a;
     padding: 0 16px; flex-shrink: 0; overflow-x: auto;
   }
   .cv-board-list {
     display: flex; gap: 2px; align-items: flex-end; padding: 4px 0 0;
   }
   .cv-board-tab {
     background: none; border: 1px solid #222; border-bottom: none;
     color: var(--gray); font-family: var(--f-mono); font-size: 9px;
     letter-spacing: .1em; padding: 5px 14px;
     cursor: pointer; white-space: nowrap;
     transition: all .15s; border-radius: 3px 3px 0 0;
     display: flex; align-items: center; gap: 6px;
   }
   .cv-board-tab:hover { color: var(--white2); border-color: #333; }
   .cv-board-tab.active {
     background: #f4f3ef; color: #1a1a1a;
     border-color: #2a2a2a;
   }
   .cv-board-del {
     font-size: 9px; color: #555; line-height: 1;
     padding: 0 2px; transition: color .12s;
   }
   .cv-board-del:hover { color: #ff4444; }
   
   /* ── Board (viewport) ───────────────────────────────── */
   .nb-board {
     flex: 1; position: relative; overflow: hidden;
     background: #f4f3ef;
   }
   /* Cursor per tool — uses data-tool attribute now */
   .nb-board[data-tool="select"] { cursor: default; }
   .nb-board[data-tool="hand"]   { cursor: grab; }
   .nb-board[data-tool="hand"]:active { cursor: grabbing; }
   .nb-board[data-tool="note"],
   .nb-board[data-tool="text"],
   .nb-board[data-tool="rect"],
   .nb-board[data-tool="circle"] { cursor: crosshair; }
   .nb-board[data-tool="image"]  { cursor: copy; }
   
   /* Keep legacy class-based rules too (used during transitions) */
   .nb-board.tool-select { cursor: default; }
   .nb-board.tool-hand   { cursor: grab; }
   .nb-board.tool-hand:active { cursor: grabbing; }
   .nb-board.tool-note,
   .nb-board.tool-text,
   .nb-board.tool-rect,
   .nb-board.tool-circle { cursor: crosshair; }
   .nb-board.tool-image  { cursor: copy; }
   
   /* Rubber-band selection box */
   .cv-selbox {
     position: absolute;
     border: 1px solid rgba(100,150,255,.7);
     background: rgba(100,150,255,.08);
     pointer-events: none;
     z-index: 500;
   }
   
   /* Shape SVG fill layer */
   .cv-shape-svg {
     position: absolute; inset: 0;
     width: 100%; height: 100%;
     pointer-events: none;
   }
   
   /* Dragging: grab cursor on all objects while _drag is active */
   .cv-obj.cv-dragging { cursor: grabbing !important; }
   
   /* ── Grid canvas ────────────────────────────────────── */
   .cv-grid-canvas {
     position: absolute; inset: 0;
     pointer-events: none; z-index: 0;
   }
   
   /* ── Transform layer ────────────────────────────────── */
   .nb-canvas {
     position: absolute; top:0; left:0;
     transform-origin: 0 0;
     will-change: transform;
     z-index: 1;
   }
   
   /* ── Empty state ────────────────────────────────────── */
   .sn-empty {
     position: absolute; inset: 0; z-index: 2;
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     gap: 10px; pointer-events: none;
   }
   .sn-empty-icon { color: #ccc; }
   .sn-empty-title { font-family: var(--f-mono); font-size: 12px; color: #bbb; letter-spacing: .08em; }
   .sn-empty-sub   { font-family: var(--f-mono); font-size: 10px; color: #ccc; letter-spacing: .04em; }
   
   /* ── Zoom HUD ───────────────────────────────────────── */
   .sn-hud {
     position: absolute; bottom: 14px; right: 16px; z-index: 50;
     display: flex; align-items: center; gap: 2px;
     background: rgba(10,10,10,.92); border: 1px solid #2a2a2a;
     padding: 4px 6px; box-shadow: 0 2px 8px rgba(0,0,0,.2);
   }
   .sn-hud-btn {
     background: none; border: none; color: #555;
     width: 22px; height: 22px;
     display: flex; align-items: center; justify-content: center;
     cursor: pointer; transition: color .12s; font-family: var(--f-mono); font-size: 9px;
   }
   .sn-hud-btn:hover { color: #ccc; }
   .sn-zoom-lbl {
     font-family: var(--f-mono); font-size: 10px; color: #555;
     min-width: 36px; text-align: center; letter-spacing: .04em;
   }
   .sn-hud-sep { width:1px; height:16px; background:#2a2a2a; margin: 0 4px; }
   .sn-hud-reset { gap:4px; width:auto; padding: 0 6px; letter-spacing: .08em; }
   
   /* ── Canvas object base ─────────────────────────────── */
   .cv-obj {
     position: absolute;
     box-sizing: border-box;
     transition: box-shadow .15s;
   }
   /* ── Selection: minimal corner handles, no boxy outline ─ */
   .cv-obj.cv-active {
     z-index: 40 !important;
   }
   /* Four corner handles — pure CSS, no heavy box */
   .cv-obj.cv-active::before,
   .cv-obj.cv-active::after {
     content: '';
     position: absolute;
     width: 7px; height: 7px;
     background: #fff;
     border: 1.5px solid rgba(80,80,200,.55);
     border-radius: 1px;
     z-index: 60;
     pointer-events: none;
   }
   .cv-obj.cv-active::before { top: -4px; left: -4px; }
   .cv-obj.cv-active::after  { top: -4px; right: -4px; }
   
   /* Pseudo-elements only give us 2 corners; use a wrapper glow for the feel */
   .cv-obj.cv-active {
     box-shadow: 0 0 0 1.5px rgba(100,120,255,.28) !important;
   }
   .cv-obj.cv-dragging {
     box-shadow: 0 8px 28px rgba(0,0,0,.2) !important;
     z-index: 200 !important;
     opacity: .96;
   }
   /* Multi-select: lime tint */
   .cv-obj.cv-selected:not(.cv-active) {
     box-shadow: 0 0 0 1.5px rgba(122,235,60,.45) !important;
   }
   
   /* ── Resize handle (SE corner) ──────────────────────── */
   .cv-resize-handle {
     position: absolute; bottom: -5px; right: -5px;
     width: 10px; height: 10px;
     background: #fff;
     border: 1.5px solid rgba(80,80,200,.55);
     border-radius: 1px;
     cursor: se-resize; z-index: 60;
     opacity: 0; transition: opacity .12s;
   }
   .cv-obj:hover .cv-resize-handle,
   .cv-obj.cv-active .cv-resize-handle { opacity: 1; }
   
   /* ── Sticky note ────────────────────────────────────── */
   .cv-sticky {
     min-height: 200px;
     background: var(--note-bg, #fafaf7);
     border: 1px solid var(--note-border, #ddddd5);
     box-shadow: 2px 3px 8px rgba(0,0,0,.09);
     display: flex; flex-direction: column;
     overflow: visible;
   }
   .cv-sticky:hover { box-shadow: 4px 8px 20px rgba(0,0,0,.13); }
   
   /* Note tools strip (hover-on-active replaced by focus-based class) */
   .sn-tools {
     position: absolute; bottom: calc(100% + 3px); right: -1px;
     display: flex; align-items: center; gap: 1px; padding: 4px 6px;
     background: rgba(18,18,18,.97); border: 1px solid #2a2a2a;
     border-radius: 4px; white-space: nowrap; z-index: 50;
     opacity: 0; transform: translateY(5px); pointer-events: none;
     transition: opacity 140ms ease-out, transform 140ms ease-out;
   }
   .cv-obj.cv-active .sn-tools { opacity:1; transform:translateY(0); pointer-events:all; }
   .sn-header { display:flex; align-items:center; gap:8px; padding:9px 10px 7px; cursor:grab; border-bottom:1px solid var(--note-border,#ddddd5); flex-shrink:0; user-select:none; }
   .cv-obj.cv-dragging .sn-header { cursor:grabbing; }
   .sn-hole { width:10px; height:10px; border-radius:50%; border:1.5px solid var(--note-border,#ccc); background:rgba(0,0,0,.07); flex-shrink:0; }
   .sn-title { flex:1; min-width:0; background:none; border:none; outline:none; font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--note-text,#1a1a1a); letter-spacing:.03em; cursor:text; }
   .sn-title::placeholder { color:rgba(0,0,0,.22); font-weight:400; }
   
   /* Note body */
   .sn-body {
     flex:1; padding:10px 14px; font-family:var(--f-mono); font-size:11px;
     line-height:22px; color:var(--note-text,#1a1a1a); outline:none;
     overflow-y:auto; cursor:text;
     background-image: repeating-linear-gradient(
       to bottom, transparent 0, transparent 9px,
       rgba(0,0,0,.07) 9px, rgba(0,0,0,.07) 10px,
       transparent 10px, transparent 22px
     );
   }
   .sn-body:empty::before { content:attr(data-placeholder); color:rgba(0,0,0,.25); pointer-events:none; }
   .sn-body p, .sn-body div:not(.nc-item) { margin:0; padding:0; line-height:22px; }
   .sn-body ul { margin:0; padding-left:22px; list-style-position:outside; }
   .sn-body ol { margin:0; padding-left:26px; list-style-position:outside; }
   .sn-body li { margin:0; padding:0; line-height:22px; }
   
   /* Note footer */
   .sn-footer { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; border-top:1px solid var(--note-border,#ddddd5); flex-shrink:0; }
   .sn-ts { font-family:var(--f-mono); font-size:8px; color:#bbb; letter-spacing:.06em; }
   .sn-convert-btn { font-family:var(--f-mono); font-size:8px; letter-spacing:.1em; color:#aaa; background:none; border:none; cursor:pointer; padding:2px 4px; transition:color .12s; }
   .sn-convert-btn:hover { color:#333; }
   
   /* Format toolbar buttons (inside .sn-tools) */
   .sni-btn { background:none; border:none; color:rgba(255,255,255,.45); font-family:var(--f-mono); font-size:10px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:2px; transition:background .1s,color .1s; padding:0; line-height:1; flex-shrink:0; }
   .sni-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
   .sni-b { font-weight:700; } .sni-i { font-style:italic; } .sni-u { text-decoration:underline; } .sni-s { text-decoration:line-through; }
   .sni-sep { width:1px; height:12px; background:rgba(255,255,255,.12); margin:0 2px; flex-shrink:0; }
   .sni-sep-wide { margin: 0 4px; }
   .sn-del { background:none; border:none; color:rgba(255,255,255,.3); font-size:10px; cursor:pointer; padding:2px 3px; transition:color .12s; margin-left:1px; }
   .sn-del:hover { color:#f55; }
   .sn-color-dots { display:flex; gap:4px; align-items:center; }
   .sn-cdot { width:11px; height:11px; border-radius:50%; cursor:pointer; opacity:.6; transition:opacity .12s,transform .12s; border:1.5px solid transparent; flex-shrink:0; }
   .sn-cdot:hover { opacity:1; transform:scale(1.25); }
   .sn-cdot.active { opacity:1; border-color:rgba(255,255,255,.5); }
   
   /* ── Text block ─────────────────────────────────────── */
   .cv-text {
     min-width: 80px; min-height: 28px;
     background: transparent; border: none;
   }
   .cv-text-body {
     width: 100%; min-height: 28px; outline: none;
     font-family: var(--f-mono); color: #1a1a1a;
     word-break: break-word;
   }
   .cv-text-body:empty::before { content: attr(data-placeholder); color: #aaa; pointer-events: none; }
   .cv-text.cv-active .cv-text-body { border-bottom: 1px dashed rgba(0,0,0,.15); }
   
   /* ── Shape ──────────────────────────────────────────── */
   .cv-shape { background: transparent; border: none; }
   
   /* ── Image ──────────────────────────────────────────── */
   .cv-image { overflow: hidden; }
   .cv-img { width:100%; height:100%; object-fit:cover; display:block; }
   .cv-del-btn {
     position: absolute; top:4px; right:4px;
     background: rgba(0,0,0,.5); border: none; color: #fff;
     font-size: 10px; width:20px; height:20px;
     display: flex; align-items: center; justify-content: center;
     cursor: pointer; border-radius: 2px; opacity:0;
     transition: opacity .12s;
   }
   .cv-image:hover .cv-del-btn,
   .cv-image.cv-active .cv-del-btn { opacity:1; }
   
   /* ── Checklist ──────────────────────────────────────── */
   .nc-item { display:flex; align-items:flex-start; gap:6px; line-height:22px; }
   .nc-box { cursor:pointer; flex-shrink:0; user-select:none; }
   .nc-item.nc-checked .nc-text { text-decoration:line-through; opacity:.5; }
   .nc-item.nc-checked .nc-box { color:var(--lime); }
   
   /* ── Drawing object ─────────────────────────────────── */
   .cv-drawing {
     background: transparent;
     border: none;
     overflow: visible;
     pointer-events: auto;
   }
   .cv-drawing svg { overflow: visible; }
   
   /* Drawing tool cursors */
   .nb-board[data-tool="pen"]         { cursor: crosshair; }
   .nb-board[data-tool="pencil"]      { cursor: crosshair; }
   .nb-board[data-tool="highlighter"] { cursor: crosshair; }
   
   /* ── Floating text format toolbar ───────────────────── */
   .cv-text-toolbar {
     position: fixed;
     display: none;
     align-items: center;
     gap: 2px;
     background: #1a1a1a;
     border: 1px solid #2e2e2e;
     border-radius: 5px;
     padding: 5px 8px;
     box-shadow: 0 4px 20px rgba(0,0,0,.35);
     z-index: 9000;
     pointer-events: all;
     user-select: none;
   }
   
   .cvtb-group {
     display: flex;
     align-items: center;
     gap: 2px;
   }
   
   .cvtb-sep {
     width: 1px; height: 18px;
     background: #333;
     margin: 0 5px;
     flex-shrink: 0;
   }
   
   .cvtb-btn {
     background: none;
     border: none;
     color: #999;
     font-family: var(--f-mono);
     font-size: 10px;
     min-width: 24px; height: 24px;
     display: flex; align-items: center; justify-content: center;
     cursor: pointer;
     border-radius: 3px;
     transition: background .1s, color .1s;
     padding: 0 4px;
     white-space: nowrap;
   }
   .cvtb-btn:hover { background: #2a2a2a; color: #fff; }
   .cvtb-btn.active { background: var(--lime); color: #000; }
   .cvtb-btn b { font-weight: 700; }
   .cvtb-btn i { font-style: italic; }
   .cvtb-btn s { text-decoration: line-through; }
   
   .cvtb-size-input {
     width: 36px; height: 24px;
     background: #111; border: 1px solid #333;
     color: #ccc; font-family: var(--f-mono); font-size: 10px;
     text-align: center; outline: none;
     border-radius: 2px;
   }
   .cvtb-size-input:focus { border-color: #555; }
   
   .cvtb-color {
     width: 24px; height: 24px;
     border: 1px solid #333; border-radius: 3px;
     cursor: pointer; padding: 0;
     background: none; overflow: hidden;
   }
   
   /* ── nb-search shared ───────────────────────────────── */
   .nb-search-wrap { display:flex; align-items:center; gap:6px; background:#111; border:1px solid #222; padding:5px 10px; color:#555; }
   .nb-search { background:none; border:none; font-family:var(--f-mono); font-size:10px; color:#ccc; outline:none; width:120px; }
   .nb-search::placeholder { color:#444; }
   .nb-btn { font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; padding:6px 12px; background:none; border:1px solid #2a2a2a; color:#555; cursor:pointer; transition:all .15s; }
   .nb-btn:hover { border-color:#555; color:#ccc; }
   .nb-btn-primary { border-color:#444; color:#999; background:#111; }
   .nb-btn-primary:hover { border-color:var(--lime); color:var(--lime); }
   .nb-rule-sep { color:#2a2a2a; } .nb-page-tag { letter-spacing:.16em; } .nb-note-count { color:#333; }
   
   /* ═══════════════════════════════════════════════════════
      FOCUS POPOUT — PiP mini timer
      ═══════════════════════════════════════════════════════ */
   
   #focusPopout {
     position: fixed;
     z-index: 800;
     width: 320px;
     background: #0a0a0a;
     border: 1px solid #2a2a2a;
     box-shadow: 0 8px 32px rgba(0,0,0,.65), 0 0 0 1px rgba(122,235,60,.06);
     font-family: var(--f-mono);
     transition: box-shadow .22s, opacity .18s;
     overflow: hidden;
   }
   #focusPopout.fp-hidden { display: none; }
   
   /* Mini state: compact PiP */
   #focusPopout.fp-mini {
     /* position set by JS on init/open */
   }
   
   /* Full state: covers entire viewport */
   #focusPopout.fp-full {
     inset: 0;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 28px;
     border: none;
   }
   
   /* Running: faint lime border glow */
   #focusPopout.fp-running {
     box-shadow: 0 8px 32px rgba(0,0,0,.65), 0 0 0 1px rgba(122,235,60,.28);
   }
   /* Paused: amber tint */
   #focusPopout.fp-paused {
     box-shadow: 0 8px 32px rgba(0,0,0,.65), 0 0 0 1px rgba(255,170,0,.22);
   }
   
   /* ── Grip / title bar ───────────────────────────── */
   .fp-grip {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
     border-bottom: 1px solid #161616;
     cursor: grab;
     user-select: none;
     background: #080808;
   }
   .fp-grip:active { cursor: grabbing; }
   #focusPopout.fp-dragging .fp-grip { cursor: grabbing; }
   
   .fp-grip-dots { display: flex; gap: 4px; flex-shrink: 0; }
   .fp-grip-dots span {
     width: 7px; height: 7px;
     border-radius: 50%;
     background: #252525;
   }
   
   .fp-title {
     flex: 1;
     font-size: 9px;
     letter-spacing: .14em;
     color: #484848;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     text-transform: uppercase;
   }
   
   .fp-grip-btns { display: flex; gap: 3px; flex-shrink: 0; }
   
   .fp-btn {
     background: none;
     border: none;
     color: #444;
     font-size: 9px;
     width: 22px; height: 22px;
     display: flex; align-items: center; justify-content: center;
     cursor: pointer;
     transition: color .12s, background .12s;
     border-radius: 2px;
     flex-shrink: 0;
   }
   .fp-btn:hover { color: #ccc; background: rgba(255,255,255,.05); }
   .fp-btn-close:hover { color: #ff4444; background: rgba(255,68,68,.08); }
   
   /* ── Dual clocks ────────────────────────────────── */
   .fp-clocks {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 14px;
     padding: 14px 16px 8px;
   }
   
   .fp-clock-block { text-align: center; }
   
   .fp-clk-lbl {
     font-size: 8px;
     letter-spacing: .16em;
     color: #383838;
     margin-bottom: 3px;
   }
   
   .fp-clk {
     font-size: 23px;
     color: #484848;
     letter-spacing: .04em;
     font-variant-numeric: tabular-nums;
     line-height: 1;
   }
   
   .fp-lime  { color: var(--lime) !important; }
   .fp-vs    { font-size: 9px; color: #222; }
   
   /* ── Progress ───────────────────────────────────── */
   .fp-prog-wrap { padding: 0 14px 13px; }
   
   .fp-prog-track {
     height: 3px;
     background: #151515;
     border: 1px solid #202020;
     overflow: hidden;
     margin-bottom: 6px;
     border-radius: 1px;
   }
   .fp-prog-fill {
     height: 100%;
     background: var(--lime);
     width: 0%;
     transition: width .3s var(--ease);
     border-radius: 1px;
   }
   
   .fp-prog-row {
     display: flex;
     justify-content: space-between;
     font-size: 9px;
     letter-spacing: .1em;
   }
   .fp-vel { color: #383838; }
   
   /* ── Full-screen overrides ──────────────────────── */
   #focusPopout.fp-full .fp-grip {
     position: absolute;
     top: 0; left: 0; right: 0;
     border-bottom: 1px solid #1a1a1a;
     background: rgba(0,0,0,.6);
   }
   #focusPopout.fp-full .fp-clocks { gap: 36px; padding: 0; }
   #focusPopout.fp-full .fp-clk { font-size: 60px; }
   #focusPopout.fp-full .fp-clk-lbl { font-size: 10px; margin-bottom: 6px; }
   #focusPopout.fp-full .fp-vs { font-size: 13px; }
   #focusPopout.fp-full .fp-prog-wrap {
     width: min(520px, 86vw);
     padding: 0;
   }
   #focusPopout.fp-full .fp-prog-track { height: 5px; }
   #focusPopout.fp-full .fp-prog-row { font-size: 11px; margin-top: 8px; }
   
   /* ── Nav PIP button active state ────────────────── */
   #popoutBtn.active {
     border-color: var(--lime);
     color: var(--lime);
     background: rgba(122,235,60,.07);
   }

/* ═══════════════════════════════════════════════════════
   FILE LOAD NOTICE BANNER
   ═══════════════════════════════════════════════════════ */
#xeroFileNotice {
  position: fixed;
  top: 52px;          /* directly below nav */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  border: 1px solid;
  max-width: 560px;
  animation: fn-slide-in 180ms ease;
}
@keyframes fn-slide-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.file-notice-ok {
  background: var(--surface2);
  border-color: var(--lime);
  color: var(--lime);
}
.file-notice-warn {
  background: var(--surface2);
  border-color: var(--orange);
  color: var(--orange);
}
.file-notice-error {
  background: var(--surface2);
  border-color: var(--red);
  color: var(--red);
}
.fn-msg   { flex: 1; }
.fn-dismiss {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 10px;
  padding: 1px 3px;
  transition: opacity var(--t);
}
.fn-dismiss:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   THEME PANEL — FULL REBUILD
   ═══════════════════════════════════════════════════════ */

#themeNavBtn.active {
  border-color: var(--lime);
  color: var(--lime);
  background: var(--lime-dim);
}

.xtp-panel {
  position: fixed;
  top: 58px; right: 16px;
  width: 340px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--surface2);
  border: 1px solid var(--border2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 9900;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.xtp-panel.xtp-visible {
  opacity: 1; transform: none; pointer-events: all;
}

.xtp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border2);
  position: sticky; top: 0; background: var(--surface2); z-index: 2;
}
.xtp-title {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--gray);
}
.xtp-close {
  background: none; border: none; color: var(--gray); font-size: 10px;
  cursor: pointer; padding: 2px 6px; transition: color var(--t);
}
.xtp-close:hover { color: var(--white2); }

/* ── Body / scrollable area ─── */
.xtp-body { padding: 10px 12px 14px; }

/* ── Group label ─── */
.xtp-group-label {
  font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.16em;
  color: var(--gray2); margin: 10px 0 6px;
  border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
.xtp-group-label:first-child { margin-top: 2px; }

/* ── Theme grid ─── */
.xtp-group-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 2px;
}

/* ── Theme card ─── */
.xtp-card {
  cursor: pointer; border: 1px solid var(--border2); border-radius: 3px;
  overflow: hidden; transition: border-color 120ms, transform 120ms;
  position: relative;
}
.xtp-card:hover { border-color: var(--border3); transform: translateY(-1px); }
.xtp-card.xtp-active { border-color: var(--lime); }
.xtp-card.xtp-active::after {
  content: '✓'; position: absolute; top: 3px; right: 4px;
  font-size: 7px; color: var(--lime); font-family: var(--f-mono); font-weight: 700;
}

/* ── Swatch ─── */
.xtp-swatch {
  height: 48px; position: relative; padding: 6px;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.xtp-swatch-surface {
  width: 58%; height: 35px; border: 1px solid;
  border-radius: 2px; padding: 4px; display: flex; flex-direction: column; gap: 3px;
}
.xtp-swatch-bar  { height: 3px; border-radius: 1px; }
.xtp-swatch-line { height: 2px; border-radius: 1px; width: 100%; }
.xtp-swatch-accent { font-size: 13px; align-self: center; margin-right: 2px; }

/* ── Card info ─── */
.xtp-card-info {
  padding: 4px 6px 5px; background: var(--surface);
  border-top: 1px solid var(--border);
}
.xtp-card-name  { font-family: var(--f-mono); font-size: 7px; letter-spacing: 0.12em; color: var(--white2); font-weight: 600; line-height:1; margin-bottom:2px; }
.xtp-card-label { font-family: var(--f-mono); font-size: 7px; letter-spacing: 0.06em; color: var(--gray); line-height:1; }

/* ══════════════════════════════════════════════════════
   HUE BUILDER
   ══════════════════════════════════════════════════════ */
.xtp-custom-hue {
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 3px;
}
.xth-title {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--white2); font-weight: 600; margin-bottom: 3px;
}
.xth-desc {
  font-family: var(--f-mono); font-size: 8px; color: var(--gray); margin-bottom: 10px;
}
.xth-slider-row { position: relative; margin-bottom: 8px; }
.xth-hue-strip {
  height: 10px; border-radius: 5px; margin-bottom: 4px;
  background: linear-gradient(to right,
    hsl(0,80%,55%),hsl(30,80%,55%),hsl(60,80%,55%),hsl(90,80%,55%),
    hsl(120,80%,55%),hsl(150,80%,55%),hsl(180,80%,55%),hsl(210,80%,55%),
    hsl(240,80%,55%),hsl(270,80%,55%),hsl(300,80%,55%),hsl(330,80%,55%),hsl(360,80%,55%));
}
.xth-slider {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; outline: none;
  background: var(--border2); cursor: pointer;
}
.xth-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--white2); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer;
}
.xth-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white2); border: 2px solid var(--surface); cursor: pointer;
}
.xth-preview-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.xth-swatch-live {
  width: 32px; height: 32px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid var(--border2);
}
.xth-hue-val {
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  color: var(--white2); letter-spacing: 0.06em; min-width: 34px;
}
.xth-apply-btn {
  margin-left: auto; background: none;
  border: 1px solid var(--lime); color: var(--lime);
  font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.12em;
  padding: 4px 10px; cursor: pointer; transition: all var(--t);
}
.xth-apply-btn:hover { background: var(--lime-dim); }

/* ═══════════════════════════════════════════════════════
   STYLE NODE EDITOR
   ═══════════════════════════════════════════════════════ */

/* ── Tab bar ─────────────────────────────────────────── */
.xtp-tabs {
  display: flex; gap: 2px; margin: 0 8px;
}
.xtp-tab {
  background: none; border: 1px solid var(--border2);
  color: var(--gray); font-family: var(--f-mono);
  font-size: 8px; letter-spacing: 0.12em;
  padding: 3px 9px; cursor: pointer;
  transition: all 120ms; border-radius: 2px;
}
.xtp-tab:hover { color: var(--white2); border-color: var(--border3); }
.xtp-tab.xtp-tab-active {
  color: var(--lime); border-color: var(--lime);
  background: var(--lime-dim);
}

/* ── Tab content wrapper ─────────────────────────────── */
.xtp-tab-content { padding: 10px 12px 14px; }

/* ── Node editor outer ───────────────────────────────── */
.xtn-editor { display: flex; flex-direction: column; gap: 14px; }

/* ── Node group ──────────────────────────────────────── */
.xtn-group {}
.xtn-group-label {
  font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.16em;
  color: var(--gray2); border-bottom: 1px solid var(--border);
  padding-bottom: 4px; margin-bottom: 7px;
}

/* ── Individual node row ─────────────────────────────── */
.xtn-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; margin-bottom: 3px;
  border: 1px solid transparent;
  border-radius: 3px; transition: border-color 120ms;
}
.xtn-row:hover { border-color: var(--border2); background: var(--surface3); }
.xtn-row-font { flex-wrap: wrap; }

/* ── Color swatch + picker ───────────────────────────── */
.xtn-swatch-wrap {
  position: relative; flex-shrink: 0;
  width: 28px; height: 28px;
}
.xtn-color {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: none; padding: 0;
}
.xtn-swatch-dot {
  width: 28px; height: 28px; border-radius: 3px;
  border: 1px solid var(--border2);
  background: var(--lime); pointer-events: none;
  transition: background 120ms;
}

/* ── Node info ───────────────────────────────────────── */
.xtn-info { flex: 1; min-width: 0; }
.xtn-label {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--white2); line-height: 1; margin-bottom: 3px;
}
.xtn-varname {
  font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.06em;
  color: var(--gray2); line-height: 1;
}

/* ── Reset per-node button ───────────────────────────── */
.xtn-reset-btn {
  background: none; border: 1px solid var(--border2);
  color: var(--gray); font-size: 10px; padding: 2px 5px;
  cursor: pointer; transition: all var(--t); border-radius: 2px;
  flex-shrink: 0;
}
.xtn-reset-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ── Font selector ───────────────────────────────────── */
.xtn-font-wrap {
  display: flex; align-items: center; gap: 5px;
  margin-top: 5px; width: 100%;
}
.xtn-font-sel {
  flex: 1; background: var(--surface2); border: 1px solid var(--border2);
  color: var(--white2); font-family: var(--f-mono); font-size: 9px;
  padding: 4px 6px; cursor: pointer; outline: none;
}
.xtn-font-sel:focus { border-color: var(--lime); }
.xtn-font-sel option { background: var(--surface2); }

/* ── Footer ──────────────────────────────────────────── */
.xtn-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--border2);
  margin-top: 4px;
}
.xtn-override-count {
  font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.08em;
  color: var(--lime); opacity: 0.8;
}
.xtn-reset-all {
  background: none; border: 1px solid var(--border2);
  color: var(--gray); font-family: var(--f-mono); font-size: 8px;
  letter-spacing: 0.1em; padding: 4px 10px; cursor: pointer;
  transition: all var(--t);
}
.xtn-reset-all:hover { border-color: var(--red); color: var(--red); }