@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;1,300;1,400;1,600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&family=DM+Mono:wght@400;500&display=swap');

/* ── TOKENS ── */
:root {
  --toolbar-h: 52px;
  --nav-h: 44px;
  --sticky-offset: 96px; /* toolbar + sticky-nav */
  --bg:#F3F4F8;--bg2:#E9EBF2;--surface:#FFFFFF;--surface2:#F7F8FC;--surface3:#ECEEF6;
  --glass:rgba(255,255,255,0.88);--text:#0F1729;--text2:#3D4A6B;--muted:#6E7A9A;--muted2:#9AA3BE;
  --border:rgba(15,23,41,0.07);--border2:rgba(15,23,41,0.12);
  --accent:#6366F1;--accent2:#818CF8;--accent-glow:rgba(99,102,241,0.14);
  --green:#10B981;--green2:#34D399;--green-bg:rgba(16,185,129,0.07);--green-border:rgba(16,185,129,0.2);
  --amber:#F59E0B;--amber-bg:rgba(245,158,11,0.07);--red:#EF4444;--purple:#A78BFA;
  --shadow-xs:0 1px 3px rgba(15,23,41,0.05);--shadow-sm:0 2px 8px rgba(15,23,41,0.07),0 1px 3px rgba(15,23,41,0.04);
  --shadow-md:0 8px 24px rgba(15,23,41,0.09),0 2px 8px rgba(15,23,41,0.05);
  --shadow-lg:0 20px 48px rgba(15,23,41,0.12),0 6px 16px rgba(15,23,41,0.06);
  --shadow-xl:0 32px 80px rgba(15,23,41,0.16);
  --radius:14px;--radius-sm:9px;--radius-lg:20px;--radius-xl:28px;
  --ease:cubic-bezier(0.23,1,0.32,1);--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --t:0.18s;--t-slow:0.36s;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-display:'Fraunces',Georgia,serif;--font-mono:'DM Mono',monospace;
  --lsb-width:200px;
}
[data-theme="dark"] {
  --bg:#080C18;--bg2:#0C1020;--surface:#111827;--surface2:#161E30;--surface3:#1E2840;
  --glass:rgba(17,24,39,0.92);--text:#E8EDF8;--text2:#8A9BBC;--muted:#4A5A7A;--muted2:#364060;
  --border:rgba(255,255,255,0.055);--border2:rgba(255,255,255,0.09);
  --green-bg:rgba(16,185,129,0.1);--green-border:rgba(16,185,129,0.25);--amber-bg:rgba(245,158,11,0.1);
  --shadow-xs:0 1px 3px rgba(0,0,0,0.3);--shadow-sm:0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:0 8px 24px rgba(0,0,0,0.5);--shadow-lg:0 20px 48px rgba(0,0,0,0.6);--shadow-xl:0 32px 80px rgba(0,0,0,0.7);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;transition:background var(--t-slow) var(--ease),color var(--t-slow) var(--ease)}

/* ── GLOBAL PROGRESS BAR ── */
#global-progress-bar-track{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:transparent}
#global-progress-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#6366F1,#38BDF8,#10B981);transition:width 0.8s var(--ease);box-shadow:0 0 12px rgba(99,102,241,0.6)}

/* ══════ HERO ══════ */
.hero{position:relative;background:linear-gradient(135deg,#1E1B4B 0%,#312E81 15%,#1D4ED8 35%,#0369A1 55%,#0F766E 75%,#065F46 100%);min-height:88vh;display:flex;flex-direction:column;overflow:hidden;color:white}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0.35;z-index:0}
.hero-mesh{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 60% 50% at 20% 80%,rgba(99,102,241,0.35) 0%,transparent 60%),radial-gradient(ellipse 50% 60% at 80% 20%,rgba(14,165,233,0.3) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 55% 55%,rgba(16,185,129,0.2) 0%,transparent 55%);animation:mesh-shift 16s ease-in-out infinite}
@keyframes mesh-shift{0%,100%{opacity:1}50%{opacity:.7}}
.hero-nav{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:24px 56px;border-bottom:1px solid rgba(255,255,255,0.08)}
.hero-nav-logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,0.2),rgba(255,255,255,0.06));border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1rem;font-style:italic;font-weight:600;color:white}
.logo-text{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:rgba(255,255,255,0.9);letter-spacing:.01em}
.hero-nav-right{display:flex;align-items:center;gap:10px}
.hero-live-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:99px;padding:5px 14px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600}
.live-dot{width:6px;height:6px;border-radius:50%;background:#34D399;box-shadow:0 0 8px #34D399;animation:live-pulse 2s infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hn-btn{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65);cursor:pointer;font-size:1rem;transition:all var(--t) var(--ease);display:flex;align-items:center;justify-content:center}
.hn-btn:hover{background:rgba(255,255,255,.15);color:white}
.hero-body{flex:1;position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:48px;padding:72px 56px 80px}
.hero-left{flex:1;max-width:580px;animation:hero-in .9s var(--ease-bounce) both}
.hero-right{flex-shrink:0;animation:hero-in .9s .15s var(--ease-bounce) both}
@keyframes hero-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.hero-tag{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:5px 16px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-bottom:28px;background:rgba(255,255,255,.06)}
.hero-h1{font-family:var(--font-display);font-size:clamp(2.8rem,5.5vw,4.6rem);font-weight:400;line-height:1.06;letter-spacing:-.03em;margin-bottom:20px;color:white}
.hero-h1-gradient{font-style:italic;background:linear-gradient(135deg,#A5F3FC 0%,#67E8F9 30%,#34D399 60%,#6EE7B7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:1.05rem;color:rgba(255,255,255,.42);font-weight:300;margin-bottom:40px;line-height:1.7;letter-spacing:.01em}
.hero-exam-btn{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);border-radius:12px;padding:13px 26px;font-family:var(--font-body);font-size:.88rem;font-weight:600;cursor:pointer;letter-spacing:.01em;transition:all var(--t) var(--ease)}
.hero-exam-btn:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.35);color:white;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.25)}
.countdown-ticker{margin-top:28px}
.countdown-ticker-label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);font-weight:600;margin-bottom:12px}
.countdown-ticker-units{display:flex;align-items:center;gap:8px}
.countdown-unit{text-align:center}
.countdown-num{display:block;font-family:var(--font-mono);font-size:1.7rem;color:white;line-height:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:8px 12px;min-width:52px;letter-spacing:-.02em}
.countdown-lbl{display:block;font-size:.55rem;color:rgba(255,255,255,.3);letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.countdown-sep{font-size:1.4rem;color:rgba(255,255,255,.2);margin-bottom:14px}
.hero-stats-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:28px;min-width:280px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.hsc-row{display:flex;align-items:center;gap:0;margin-bottom:24px}
.hsc-stat{flex:1;text-align:center}
.hsc-n{font-family:var(--font-display);font-size:2rem;font-style:italic;color:white;line-height:1;letter-spacing:-.03em}
.hsc-l{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38);font-weight:600;margin-top:5px}
.hsc-divider{width:1px;height:40px;background:rgba(255,255,255,.12);flex-shrink:0}
.hsc-progress-label{display:flex;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.4);margin-bottom:8px;font-weight:500}
.hsc-progress-track{height:5px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-bottom:20px}
.hsc-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#818CF8,#38BDF8,#34D399);transition:width 1s var(--ease)}
.hsc-bottom{display:flex;flex-direction:column;gap:8px}
.hsc-item{display:flex;align-items:center;gap:8px;font-size:.76rem;color:rgba(255,255,255,.5)}
.hsc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hsc-dot.green{background:#34D399;box-shadow:0 0 6px #34D399}
.hsc-dot.amber{background:#F59E0B;box-shadow:0 0 6px #F59E0B}
.hsc-dot.blue{background:#38BDF8;box-shadow:0 0 6px #38BDF8}

/* ══════ LEFT SIDEBAR ══════ */
#left-sidebar{position:fixed;left:0;top:50%;transform:translateY(-50%);width:var(--lsb-width);background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border2);border-left:none;border-radius:0 var(--radius-lg) var(--radius-lg) 0;z-index:400;box-shadow:var(--shadow-lg);transition:width var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease);overflow:hidden}
#left-sidebar.collapsed{width:0;opacity:0;border-width:0;padding:0;overflow:hidden}
#left-sidebar-toggle{position:fixed;left:0;top:50%;transform:translateY(-50%);width:28px;height:52px;background:var(--surface);border:1px solid var(--border2);border-left:none;border-radius:0 10px 10px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all var(--t) var(--ease);z-index:402;box-shadow:2px 0 8px rgba(0,0,0,0.08)}
#left-sidebar-toggle:hover{color:var(--text);background:var(--surface2);width:32px}
#left-sidebar:not(.collapsed) + #left-sidebar-toggle{left:var(--lsb-width)}
#left-sidebar.collapsed + #left-sidebar-toggle #lsb-arrow{transform:rotate(180deg)}
#lsb-arrow{transition:transform var(--t-slow) var(--ease)}
.lsb-content{padding:18px 14px;display:flex;flex-direction:column;gap:14px}
.lsb-section{display:flex;flex-direction:column;align-items:center;gap:8px}
.lsb-label{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;align-self:flex-start}
.lsb-ring-svg{width:120px;height:120px;transform:rotate(-90deg);filter:drop-shadow(0 4px 16px rgba(99,102,241,.25))}
.lsb-ring-bg{fill:none;stroke:var(--surface3);stroke-width:8}
.lsb-ring-fill{fill:none;stroke:url(#goalGrad);stroke-width:8;stroke-linecap:round;stroke-dasharray:263.9;stroke-dashoffset:263.9;transition:stroke-dashoffset .9s var(--ease-bounce)}
.ring-num{fill:var(--text);font-family:var(--font-display);font-style:italic;font-size:22px;transform:rotate(90deg);transform-origin:50px 50px}
.ring-den{fill:var(--muted);font-size:8px;font-family:var(--font-mono);transform:rotate(90deg);transform-origin:50px 50px}
.lsb-goal-controls{display:flex;align-items:center;gap:8px}
.lsb-adj-btn{width:24px;height:24px;border-radius:50%;background:var(--surface3);border:1px solid var(--border2);color:var(--text2);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all var(--t) var(--ease)}
.lsb-adj-btn:hover{background:var(--accent);color:white;border-color:var(--accent)}
.lsb-goal-val{font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--text);min-width:24px;text-align:center}
.lsb-milestones{display:flex;gap:5px;width:100%;justify-content:center}
.lsb-ms{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.35;transition:opacity var(--t) var(--ease)}
.lsb-ms.reached{opacity:1}
.lsb-ms-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:all .4s var(--ease-bounce);border:2px solid var(--border2)}
.lsb-ms.reached .lsb-ms-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px rgba(99,102,241,.5);transform:scale(1.25)}
.lsb-ms span{font-size:.5rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.lsb-divider{width:100%;height:1px;background:var(--border)}
.lsb-timer-display{font-family:var(--font-mono);font-size:1.3rem;font-weight:500;color:var(--text);letter-spacing:.04em;text-align:center;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;width:100%}
.lsb-timer-controls{display:flex;gap:6px;width:100%}
.lsb-timer-btn{flex:1;padding:7px;border-radius:var(--radius-sm);border:1px solid var(--border2);background:var(--surface2);color:var(--text2);font-family:var(--font-body);font-size:.73rem;font-weight:600;cursor:pointer;transition:all var(--t) var(--ease)}
.lsb-timer-btn.active{background:var(--accent);border-color:var(--accent);color:white}
.lsb-timer-btn:hover:not(.active){border-color:var(--accent);color:var(--accent)}
.lsb-timer-stats{display:flex;gap:8px;width:100%}
.lsb-ts-item{flex:1;text-align:center;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 4px}
.lsb-ts-val{display:block;font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--text)}
.lsb-ts-label{display:block;font-size:.52rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:2px}

/* ══════ DASHBOARD ══════ */
#dashboard{max-width:1240px;margin:0 auto;padding:36px 28px 0}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;margin-bottom:10px}
.dash-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px 15px;position:relative;overflow:hidden;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);animation:card-rise .5s var(--ease-bounce) both;cursor:default}
.dash-card:nth-child(1){animation-delay:.04s}.dash-card:nth-child(2){animation-delay:.08s}.dash-card:nth-child(3){animation-delay:.12s}.dash-card:nth-child(4){animation-delay:.16s}.dash-card:nth-child(5){animation-delay:.20s}.dash-card:nth-child(6){animation-delay:.24s}.dash-card:nth-child(7){animation-delay:.28s}
@keyframes card-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.dash-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--card-accent,var(--accent));opacity:.6}
.dash-card::after{content:'';position:absolute;top:-40px;right:-40px;width:100px;height:100px;border-radius:50%;background:var(--card-accent,var(--accent));opacity:.04;pointer-events:none;transition:opacity var(--t)}
.dash-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border2)}
.dash-card:hover::after{opacity:.09}
.dc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.dc-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.dc-val{font-family:var(--font-display);font-size:2rem;font-weight:400;font-style:italic;color:var(--text);line-height:1;letter-spacing:-.03em;margin-bottom:5px}
.dc-label{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.dc-sub{font-size:.68rem;color:var(--muted2);margin-bottom:12px}
.dc-bar{height:3px;background:var(--surface3);border-radius:99px;overflow:hidden}
.dc-bar-fill{height:100%;border-radius:99px;transition:width 1.2s var(--ease-bounce);position:relative}
.dc-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:bar-shimmer 2.5s ease-in-out infinite}
@keyframes bar-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.progress-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow-xs)}
.progress-section-title{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.progress-bar-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.progress-bar-row:last-child{margin-bottom:0}
.progress-bar-label{font-size:.78rem;font-weight:600;color:var(--text2);min-width:130px}
.progress-bar-track{flex:1;height:8px;background:var(--surface3);border-radius:99px;overflow:hidden;position:relative}
.progress-bar-fill{height:100%;border-radius:99px;position:relative;transition:width 1s var(--ease-bounce)}
.pbf-glow{position:absolute;top:0;left:0;bottom:0;width:60px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:pbf-sweep 2s ease-in-out infinite}
@keyframes pbf-sweep{0%{left:-60px}100%{left:110%}}
.pct-tasks .progress-bar-fill{background:linear-gradient(90deg,#6366F1,#818CF8)}
.pct-days .progress-bar-fill{background:linear-gradient(90deg,#0EA5E9,#38BDF8)}
.progress-bar-pct{font-size:.75rem;font-weight:700;min-width:38px;text-align:right;color:var(--text);font-family:var(--font-mono)}

/* ══════ TOOLBAR ══════ */
#toolbar{position:sticky;top:0;z-index:300;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.toolbar-inner{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:12px;height:52px}
.search-wrap{display:flex;align-items:center;gap:9px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;height:34px;flex:1;max-width:320px;color:var(--muted);transition:all var(--t) var(--ease)}
.search-wrap:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-glow)}
.search-wrap input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:.83rem}
.search-wrap input::placeholder{color:var(--muted)}
.filter-group{display:flex;gap:4px}
.filter-btn{padding:5px 13px;border-radius:99px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-family:var(--font-body);font-size:.74rem;font-weight:600;cursor:pointer;transition:all var(--t) var(--ease);white-space:nowrap}
.filter-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 2px 8px rgba(99,102,241,.3)}

/* ══════ REVISION PANEL ══════ */
#revision-panel{max-width:1240px;margin:0 auto 8px;padding:0 28px;display:none}
#revision-panel.open{display:block}
.revision-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow-sm)}
.revision-title{font-family:var(--font-display);font-size:1.1rem;font-weight:400;font-style:italic;margin-bottom:5px}
.revision-sub{font-size:.79rem;color:var(--muted);margin-bottom:14px}
.revision-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.revision-col-title{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.revision-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);margin-bottom:5px;font-size:.79rem;cursor:pointer;transition:all var(--t) var(--ease)}
.revision-item:hover{background:var(--surface3);border-color:var(--accent);transform:translateX(2px)}
.revision-item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ══════ STICKY NAV ══════ */
#sticky-nav{position:sticky;top:52px;z-index:290;background:var(--glass);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);border-bottom:1px solid var(--border);padding:0 28px;display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
#sticky-nav::-webkit-scrollbar{display:none}
.nav-tab{padding:12px 15px;border:none;background:none;cursor:pointer;font-family:var(--font-body);font-size:.75rem;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;transition:all var(--t) var(--ease);position:relative;letter-spacing:.01em}
.nav-tab:hover{color:var(--text)}
.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.nav-tab.day-done{color:var(--green)}
.day-check-indicator{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-left:4px;vertical-align:middle;opacity:0;transition:opacity var(--t);box-shadow:0 0 6px var(--green)}
.nav-tab.day-done .day-check-indicator{opacity:1}

/* ══════ LEGEND ══════ */
.legend-wrap{max-width:1240px;margin:12px auto 0;padding:0 28px}
.legend-inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:11px 16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;box-shadow:var(--shadow-xs)}
.legend-title{font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.legend-badge{display:inline-block;padding:3px 9px;border-radius:6px;font-size:.67rem;font-weight:700;color:white;opacity:.9}

/* ══════ DAY SECTIONS ══════ */
.day-section{max-width:1240px;margin:20px auto 0;padding:0 28px;opacity:0;animation:section-reveal .6s var(--ease) forwards}
.day-section:nth-child(1){animation-delay:.05s}.day-section:nth-child(2){animation-delay:.10s}.day-section:nth-child(3){animation-delay:.15s}.day-section:nth-child(4){animation-delay:.20s}.day-section:nth-child(5){animation-delay:.25s}.day-section:nth-child(6){animation-delay:.30s}.day-section:nth-child(7){animation-delay:.35s}.day-section:nth-child(8){animation-delay:.40s}.day-section:nth-child(9){animation-delay:.45s}.day-section:nth-child(10){animation-delay:.50s}.day-section:nth-child(11){animation-delay:.55s}.day-section:nth-child(12){animation-delay:.60s}
@keyframes section-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.day-section.collapsed .day-body{display:none}
.day-header{border-radius:16px 16px 0 0;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;color:white;cursor:pointer;user-select:none;transition:filter var(--t) var(--ease);position:relative;overflow:hidden}
.day-header::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.09) 0%,transparent 60%);pointer-events:none}
.day-header:hover{filter:brightness(1.07)}
.day-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0;position:relative;z-index:1}
.day-header-right{display:flex;align-items:center;gap:10px;flex-shrink:0;position:relative;z-index:1}
.day-num-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);border-radius:7px;padding:4px 12px;font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-mono)}
.day-emoji{font-size:1.3rem;flex-shrink:0}
.day-title{font-family:var(--font-display);font-style:italic;font-size:1.1rem;font-weight:400;line-height:1.2;letter-spacing:-.01em}
.day-sub{font-size:.72rem;opacity:.6;margin-top:3px}
.day-stat-box{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);border-radius:9px;padding:7px 14px;text-align:center;backdrop-filter:blur(10px)}
.stat-num{font-family:var(--font-display);font-style:italic;font-size:1.4rem;font-weight:400;display:block;line-height:1;letter-spacing:-.02em}
.stat-lbl{font-size:.58rem;opacity:.6;letter-spacing:.08em;text-transform:uppercase}
.day-collapse-icon{font-size:.9rem;opacity:.6;transition:transform var(--t) var(--ease)}
.day-section.collapsed .day-collapse-icon{transform:rotate(-90deg)}
.mark-all-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:white;border-radius:99px;padding:5px 14px;font-family:var(--font-body);font-size:.7rem;font-weight:700;cursor:pointer;transition:background var(--t);white-space:nowrap}
.mark-all-btn:hover{background:rgba(255,255,255,.22)}
.day-progress-bar{height:3px;background:rgba(255,255,255,.15);overflow:hidden}
.day-progress-fill{height:100%;background:rgba(255,255,255,.8);transition:width .6s var(--ease-bounce);box-shadow:0 0 8px rgba(255,255,255,.5)}
.day-body{display:block}
.table-wrap{background:var(--surface);border:1px solid var(--border);border-top:none;overflow-x:auto}
.schedule-table{width:100%;border-collapse:collapse;font-size:.83rem;min-width:700px}
.schedule-table thead th{background:var(--surface2);font-weight:700;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:10px 12px;text-align:left;border-bottom:1px solid var(--border2);position:sticky;top:0;z-index:5;box-shadow:0 2px 0 var(--border)}
.schedule-table tbody tr{border-bottom:1px solid var(--border);transition:background var(--t) var(--ease)}
.schedule-table tbody tr:hover{background:var(--surface2)}
.schedule-table td{padding:10px 12px;vertical-align:middle}
.schedule-table tbody tr.row-done{background:var(--green-bg)!important;opacity:.75}
.schedule-table tbody tr.row-done .topic-name{text-decoration:line-through;color:var(--muted)}
.schedule-table tbody tr.row-hidden{display:none}
.cb-cell{width:36px;padding:10px 8px 10px 14px!important}
.topic-checkbox{width:17px;height:17px;cursor:pointer;accent-color:var(--accent);border-radius:4px}
.topic-name{font-weight:600;color:var(--text);transition:color var(--t),text-decoration var(--t)}
.subsys-cell{font-size:.69rem;color:var(--muted)}
.badges-cell{min-width:130px}
.badge{display:inline-block;color:white;border-radius:5px;padding:2px 7px;font-size:.64rem;font-weight:700;margin:2px 2px 2px 0;letter-spacing:.02em}
.qid-count-badge{display:inline-block;background:var(--accent);color:white;border-radius:5px;padding:2px 8px;font-size:.64rem;font-weight:800;font-family:var(--font-mono);margin-right:5px;box-shadow:0 2px 6px rgba(99,102,241,.3)}
.qid-list{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.percentile-input{width:66px;padding:4px 7px;border:1px solid var(--border2);border-radius:7px;font-size:.78rem;font-family:var(--font-mono);text-align:center;background:var(--surface2);color:var(--text);transition:all var(--t) var(--ease)}
.percentile-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--surface)}
.percentile-input.score-weak{border-color:var(--red);background:rgba(239,68,68,.07);color:var(--red)}
.percentile-input.score-strong{border-color:var(--green);background:var(--green-bg);color:var(--green)}
.diff-cell{width:86px}
.diff-tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.67rem;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:all var(--t) var(--ease);white-space:nowrap}
.diff-tag.easy{background:#DCFCE7;color:#15803D;border-color:#BBF7D0}
.diff-tag.medium{background:#FEF9C3;color:#A16207;border-color:#FDE68A}
.diff-tag.hard{background:#FEE2E2;color:#B91C1C;border-color:#FECACA}
.diff-tag.unset{background:var(--surface3);color:var(--muted);border-color:var(--border2)}
[data-theme="dark"] .diff-tag.easy{background:rgba(21,128,61,.18);color:#4ADE80;border-color:rgba(74,222,128,.3)}
[data-theme="dark"] .diff-tag.medium{background:rgba(161,98,7,.18);color:#FCD34D;border-color:rgba(252,211,77,.3)}
[data-theme="dark"] .diff-tag.hard{background:rgba(185,28,28,.18);color:#F87171;border-color:rgba(248,113,113,.3)}
[data-theme="dark"] .diff-tag.unset{background:var(--surface3);color:var(--muted);border-color:var(--border2)}
.notes-cell{min-width:100px}
.notes-toggle{background:none;border:1px dashed var(--border2);border-radius:7px;padding:4px 9px;font-size:.69rem;color:var(--muted);cursor:pointer;transition:all var(--t) var(--ease);font-family:var(--font-body);white-space:nowrap}
.notes-toggle:hover{border-color:var(--accent);color:var(--accent);border-style:solid}
.notes-toggle.has-note{border-style:solid;border-color:var(--accent2);color:var(--accent2);background:var(--accent-glow)}
.notes-row td{padding:0 12px 12px 36px!important;background:var(--surface2)!important;border-bottom:2px solid var(--border)!important}
.notes-area{width:100%;min-height:68px;padding:9px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:.81rem;line-height:1.55;resize:vertical;transition:border-color var(--t)}
.notes-area:focus{outline:none;border-color:var(--accent)}
.notes-area::placeholder{color:var(--muted)}
.master-row{background:linear-gradient(135deg,var(--green-bg) 0%,rgba(240,255,248,.4) 100%);border:1px solid var(--border);border-top:none;border-bottom:3px solid rgba(16,185,129,.25);border-radius:0 0 16px 16px;padding:16px 20px;position:relative}
[data-theme="dark"] .master-row{background:linear-gradient(135deg,rgba(16,185,129,.07) 0%,rgba(10,80,50,.04) 100%)}
.master-row::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--green),var(--green2),transparent)}
.master-label{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.master-text{font-weight:700;font-size:.84rem;color:var(--green)}
.master-count{background:var(--green);color:white;border-radius:99px;padding:2px 11px;font-size:.7rem;font-weight:800}
.chips-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.qid-chip{font-family:var(--font-mono);font-size:.68rem;background:var(--surface);color:var(--accent);border:1px solid rgba(99,102,241,.2);border-radius:5px;padding:2px 7px;display:inline-block;transition:transform var(--t),box-shadow var(--t)}
.qid-chip:hover{transform:translateY(-1px);box-shadow:0 3px 8px var(--accent-glow)}
.master-actions{display:flex;gap:8px;flex-wrap:wrap}
.copy-btn{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:white;border:none;border-radius:8px;padding:7px 15px;font-family:var(--font-body);font-size:.77rem;font-weight:700;cursor:pointer;transition:all var(--t) var(--ease)}
.copy-btn:hover{background:#047857;transform:translateY(-1px);box-shadow:0 4px 12px rgba(5,150,105,.4)}
.copy-btn.copied{background:#0891B2}
.day-notes-wrap{background:var(--surface2);border:1px solid var(--border);border-top:none;padding:13px 18px}
.day-notes-label{font-size:.63rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.day-notes-area{width:100%;min-height:56px;padding:9px 12px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:.81rem;line-height:1.55;resize:vertical}
.day-notes-area:focus{outline:none;border-color:var(--accent)}
.day-daily-stats{display:flex;align-items:center;gap:12px;padding:9px 18px;background:var(--surface2);border:1px solid var(--border);border-top:none;font-size:.78rem;color:var(--text2);flex-wrap:wrap}
.day-avg-score{font-weight:700;font-family:var(--font-mono)}
.day-avg-score.weak{color:var(--red)}.day-avg-score.strong{color:var(--green)}

/* ══════ RIGHT FEATURE DRAWER ══════ */
#feature-drawer-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border2);border-right:none;border-radius:12px 0 0 12px;padding:14px 10px;cursor:pointer;z-index:500;box-shadow:var(--shadow-md);transition:all var(--t) var(--ease)}
#feature-drawer-tab:hover{background:var(--surface2);padding-right:14px}
.fdt-pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(99,102,241,.7);animation:fdt-ring 2.5s infinite}
@keyframes fdt-ring{0%{box-shadow:0 0 0 0 rgba(99,102,241,.7)}65%{box-shadow:0 0 0 8px rgba(99,102,241,0)}100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}}
.fdt-label{font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg)}
#feature-drawer{position:fixed;right:-260px;top:0;bottom:0;width:260px;background:var(--glass);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border-left:1px solid var(--border2);z-index:501;transition:right .38s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-xl);padding:0}
#feature-drawer.open{right:0}
#feature-drawer-close{position:absolute;left:-38px;top:50%;transform:translateY(-50%);width:34px;height:56px;background:var(--surface);border:1px solid var(--border2);border-right:none;border-radius:10px 0 0 10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:all var(--t) var(--ease)}
#feature-drawer-close:hover{color:var(--text);background:var(--surface2)}
.fd-header{padding:24px 20px 14px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:1px solid var(--border)}
.fd-tools{flex:1;overflow-y:auto;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.fd-tool{display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;padding:11px 12px;border-radius:var(--radius-sm);transition:all var(--t) var(--ease);width:100%;text-align:left}
.fd-tool:hover{background:var(--surface2)}
.fd-tool-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;transition:transform var(--t) var(--ease-bounce)}
.fd-tool:hover .fd-tool-icon{transform:scale(1.1)}
.fd-tool-info{display:flex;flex-direction:column;gap:2px}
.fd-tool-name{font-size:.83rem;font-weight:600;color:var(--text2);transition:color var(--t)}
.fd-tool:hover .fd-tool-name{color:var(--text)}
.fd-tool-sub{font-size:.68rem;color:var(--muted)}

/* ══════ POMODORO ══════ */
#pomo-panel{position:fixed;bottom:90px;right:24px;background:var(--glass);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:22px 24px;min-width:250px;box-shadow:var(--shadow-xl);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);z-index:499;transform:translateY(calc(100% + 100px)) scale(.95);transition:transform .4s var(--ease-bounce),opacity .3s var(--ease);opacity:0;pointer-events:none}
#pomo-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
.pomo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pomo-title{font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pomo-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:3px 7px;border-radius:6px;transition:all var(--t)}
.pomo-close:hover{color:var(--text);background:var(--surface3)}
.pomo-mode-tabs{display:flex;background:var(--surface3);border-radius:9px;padding:3px;gap:2px;margin-bottom:16px}
.pomo-mode-btn{flex:1;padding:6px;border:none;border-radius:7px;background:none;font-family:var(--font-body);font-size:.72rem;font-weight:700;color:var(--muted);cursor:pointer;transition:all var(--t) var(--ease);text-align:center}
.pomo-mode-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)}
.pomo-progress-ring{display:block;margin:0 auto 4px;filter:drop-shadow(0 4px 16px rgba(99,102,241,.3))}
.pomo-ring-bg{fill:none;stroke:var(--surface3);stroke-width:5}
.pomo-ring-fill{fill:none;stroke:url(#pomoGrad);stroke-width:5;stroke-linecap:round;stroke-dasharray:251.2;stroke-dashoffset:251.2;transition:stroke-dashoffset 1s linear;transform-origin:50% 50%;transform:rotate(-90deg)}
.pomo-ring-fill.break{stroke:var(--green)}
.pomo-time-display{font-family:var(--font-display);font-size:3.2rem;font-style:italic;font-weight:400;text-align:center;color:var(--text);line-height:1;margin-bottom:4px;letter-spacing:-.04em}
.pomo-phase-label{text-align:center;font-size:.71rem;color:var(--muted);margin-bottom:16px;font-weight:500}
.pomo-controls{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.pomo-btn{padding:8px 18px;border-radius:99px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-family:var(--font-body);font-size:.79rem;font-weight:700;cursor:pointer;transition:all var(--t) var(--ease)}
.pomo-btn.primary{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 3px 12px rgba(99,102,241,.35)}
.pomo-btn.primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.pomo-btn:hover:not(.primary){border-color:var(--accent);transform:translateY(-1px)}
.pomo-session-count{text-align:center;font-size:.7rem;color:var(--muted);margin-bottom:8px}
.pomo-session-dots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.pomo-session-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);transition:all var(--t)}
.pomo-session-dot.done{background:var(--accent);box-shadow:0 0 8px rgba(99,102,241,.5)}
.pomo-settings{border-top:1px solid var(--border);padding-top:12px;display:flex;gap:10px;margin-bottom:12px}
.pomo-setting{flex:1}
.pomo-setting label{font-size:.63rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.pomo-setting input{width:100%;padding:5px 7px;border:1px solid var(--border2);border-radius:7px;background:var(--surface2);color:var(--text);font-family:var(--font-mono);font-size:.81rem;text-align:center;transition:border-color var(--t)}
.pomo-setting input:focus{outline:none;border-color:var(--accent)}
.pomo-sounds{border-top:1px solid var(--border);padding-top:12px}
.pomo-sounds-label{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.pomo-sound-btns{display:flex;gap:4px;flex-wrap:wrap}
.sound-btn{background:var(--surface2);border:1px solid var(--border2);color:var(--muted);border-radius:7px;padding:4px 9px;font-size:.69rem;cursor:pointer;transition:all var(--t) var(--ease);font-family:var(--font-body);font-weight:600}
.sound-btn.active{background:var(--accent-glow);border-color:var(--accent2);color:var(--accent2)}
#pomo-fab{position:fixed;bottom:28px;right:28px;width:50px;height:50px;border-radius:50%;background:var(--accent);color:white;border:none;font-size:1.2rem;cursor:pointer;z-index:498;box-shadow:0 4px 20px rgba(99,102,241,.5);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);display:flex;align-items:center;justify-content:center}
#pomo-fab:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(99,102,241,.6)}
#pomo-fab .pomo-fab-timer{font-family:var(--font-mono);font-size:.67rem;font-weight:700;line-height:1;display:none}
#pomo-fab.running{background:var(--red);box-shadow:0 4px 20px rgba(239,68,68,.5)}
#pomo-fab.running .pomo-fab-icon{display:none}
#pomo-fab.running .pomo-fab-timer{display:block}

/* ══════ PANELS ══════ */
#lofi-panel,#ambient-panel,#breathe-panel,#buddy-panel{position:fixed;bottom:32px;right:32px;width:340px;background:var(--glass);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border:1px solid var(--border2);border-radius:var(--radius-lg);z-index:500;box-shadow:var(--shadow-xl);padding:20px;transform:translateY(14px) scale(.97);opacity:0;pointer-events:none;transition:all .3s var(--ease)}
#lofi-panel.open,#ambient-panel.open,#breathe-panel.open,#buddy-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.panel-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:3px 7px;border-radius:6px;transition:all var(--t)}
.panel-close:hover{color:var(--text);background:var(--surface3)}
#lofi-canvas{display:block;width:100%;border-radius:10px;border:1px solid var(--border);margin-bottom:12px;image-rendering:pixelated}
.lofi-controls{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.lofi-scene-btn{flex:1;padding:7px 8px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);color:var(--text2);font-family:var(--font-body);font-size:.72rem;font-weight:600;cursor:pointer;transition:all var(--t) var(--ease);white-space:nowrap}
.lofi-scene-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.lofi-volume-row{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted)}
.lofi-volume-row input{flex:1;accent-color:var(--accent)}
.ambient-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.ambient-sound-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:var(--radius-sm);padding:10px 8px;font-size:.78rem;cursor:pointer;transition:all var(--t) var(--ease);font-family:var(--font-body);font-weight:500;text-align:left}
.ambient-sound-btn:hover{background:var(--surface3);border-color:var(--border2)}
.ambient-sound-btn.active{border-color:var(--accent2);color:var(--accent2);background:var(--accent-glow)}
.ambient-volume{display:flex;align-items:center;gap:10px}
.ambient-volume label{font-size:.66rem;color:var(--muted);white-space:nowrap;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ambient-volume input{flex:1;accent-color:var(--accent)}
.breathe-circle-wrap{display:flex;justify-content:center;align-items:center;padding:16px 0}
.breathe-circle{width:110px;height:110px;border-radius:50%;border:2px solid var(--green2);color:var(--green2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;transition:transform 4s ease-in-out,border-color .5s,color .5s,box-shadow .5s;box-shadow:0 0 24px rgba(52,211,153,.2)}
.breathe-circle.inhale{transform:scale(1.32)}
.breathe-circle.hold-in{transform:scale(1.32);border-color:var(--amber);color:var(--amber);box-shadow:0 0 24px rgba(245,158,11,.2)}
.breathe-circle.exhale{transform:scale(1);border-color:var(--accent2);color:var(--accent2);box-shadow:0 0 24px rgba(129,140,248,.2)}
.breathe-circle.hold-out{transform:scale(1);border-color:var(--purple);color:var(--purple);box-shadow:0 0 24px rgba(167,139,250,.2)}
.breathe-controls{display:flex;justify-content:center;margin-bottom:10px}
.breathe-note{font-size:.7rem;color:var(--muted);text-align:center;line-height:1.7}
.buddy-body{display:flex;flex-direction:column;gap:10px}
.buddy-link-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.buddy-link-box{background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;font-family:var(--font-mono);font-size:.66rem;color:var(--text2);word-break:break-all;line-height:1.5}
.buddy-copy-btn{background:var(--accent);color:white;border:none;border-radius:8px;padding:9px 16px;font-family:var(--font-body);font-size:.79rem;font-weight:700;cursor:pointer;transition:all var(--t) var(--ease);width:100%}
.buddy-copy-btn:hover{filter:brightness(1.1)}
.buddy-divider{text-align:center;font-size:.68rem;color:var(--muted);font-weight:500}
.buddy-input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:9px 12px;font-family:var(--font-body);font-size:.82rem;color:var(--text);outline:none;transition:border-color var(--t)}
.buddy-input:focus{border-color:var(--accent)}
.buddy-load-btn{background:var(--surface2);border:1px solid var(--border2);color:var(--text2);border-radius:8px;padding:9px;font-family:var(--font-body);font-size:.79rem;font-weight:600;cursor:pointer;transition:all var(--t) var(--ease);width:100%}
.buddy-load-btn:hover{border-color:var(--accent);color:var(--accent)}
.buddy-status{font-size:.75rem;color:var(--muted);text-align:center;min-height:18px}
.buddy-preview{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px}
.buddy-preview-title{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.buddy-preview-stats{font-size:.8rem;color:var(--text2);line-height:1.8}

/* ══════ FOCUS OVERLAY ══════ */
#focus-overlay{position:fixed;inset:0;z-index:2000;background:rgba(8,12,24,.97);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease}
#focus-overlay.hidden{display:none}
.focus-content{text-align:center}
.focus-icon-big{font-size:2.5rem;margin-bottom:16px;display:inline-block;animation:focus-spin 8s linear infinite}
@keyframes focus-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.focus-title{font-family:var(--font-display);font-size:2.8rem;font-style:italic;color:white;margin-bottom:8px;letter-spacing:-.03em}
.focus-sub{color:rgba(255,255,255,.35);margin-bottom:20px;font-weight:300}
.focus-timer{font-family:var(--font-mono);font-size:3rem;color:rgba(255,255,255,.7);margin-bottom:28px;letter-spacing:.04em}
#focus-exit{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);border-radius:99px;padding:11px 32px;font-family:var(--font-body);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--t) var(--ease)}
#focus-exit:hover{background:rgba(255,255,255,.12);color:white}

/* ══════ MODALS ══════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);padding:32px 36px;max-width:500px;width:100%;box-shadow:var(--shadow-xl);border:1px solid var(--border2);transform:scale(.92) translateY(8px);transition:transform .3s var(--ease-bounce)}
.modal-overlay.open .modal-box{transform:scale(1) translateY(0)}
.modal-title{font-family:var(--font-display);font-style:italic;font-size:1.45rem;font-weight:400;margin-bottom:7px;letter-spacing:-.02em}
.modal-sub{font-size:.83rem;color:var(--muted);margin-bottom:20px}
.modal-input{width:100%;padding:11px 13px;border:1px solid var(--border2);border-radius:9px;background:var(--surface2);color:var(--text);font-family:var(--font-body);font-size:.93rem;margin-bottom:16px;transition:border-color var(--t),box-shadow var(--t)}
.modal-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.modal-btn{padding:10px 22px;border-radius:9px;font-family:var(--font-body);font-size:.85rem;font-weight:700;cursor:pointer;transition:all var(--t) var(--ease)}
.modal-btn.secondary{background:none;border:1px solid var(--border2);color:var(--text2)}
.modal-btn.secondary:hover{border-color:var(--accent);color:var(--accent)}
.modal-btn.primary{background:var(--accent);border:1px solid var(--accent);color:white;box-shadow:0 2px 8px rgba(99,102,241,.35)}
.modal-btn.primary:hover{filter:brightness(1.1);box-shadow:0 4px 14px rgba(99,102,241,.45)}

/* ══════ FOOTER ══════ */
.footer{text-align:center;padding:44px 28px;color:var(--muted);font-size:.76rem;margin-top:44px;border-top:1px solid var(--border)}
.footer-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.footer-btn{padding:7px 16px;border-radius:99px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);font-family:var(--font-body);font-size:.75rem;font-weight:600;cursor:pointer;transition:all var(--t) var(--ease)}
.footer-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.footer-btn.danger:hover{border-color:var(--red);color:var(--red)}

/* ══════ UTILS ══════ */
#toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-80px);background:var(--text);color:var(--bg);padding:11px 24px;border-radius:99px;font-size:.82rem;font-weight:600;z-index:9999;pointer-events:none;transition:transform .35s var(--ease-bounce);white-space:nowrap;box-shadow:var(--shadow-lg);font-family:var(--font-body)}
#toast.show{transform:translateX(-50%) translateY(0)}
#scroll-top{position:fixed;bottom:90px;right:28px;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border2);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:490;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:all var(--t) var(--ease);font-size:.95rem}
#scroll-top.visible{opacity:1;pointer-events:all}
#scroll-top:hover{transform:translateY(-2px);color:var(--accent);border-color:var(--accent)}
@keyframes confetti-fall{from{transform:translateY(-20px) rotate(0deg) scale(1);opacity:1}80%{opacity:1}to{transform:translateY(100vh) rotate(720deg) scale(.5);opacity:0}}
.confetti-piece{position:fixed;pointer-events:none;z-index:9998;border-radius:3px;animation:confetti-fall 2.8s var(--ease) forwards}
@keyframes row-complete{0%{background:var(--green-bg);box-shadow:0 0 0 0 rgba(16,185,129,.2)}50%{background:rgba(16,185,129,.15);box-shadow:0 0 0 4px rgba(16,185,129,.1)}100%{background:var(--green-bg);box-shadow:0 0 0 0 transparent}}
.row-complete-anim{animation:row-complete .6s var(--ease)}
@keyframes pulse-once{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.pulse{animation:pulse-once .35s var(--ease-bounce)}
@keyframes slide-in-row{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.slide-in{animation:slide-in-row .3s var(--ease) forwards}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--muted2)}
.hidden{display:none!important}

/* ══════ RESPONSIVE ══════ */
@media(max-width:1024px){#left-sidebar-toggle{display:none}#feature-drawer-tab{top:auto;bottom:80px;transform:none}}
@media(max-width:768px){.hero-body{flex-direction:column;padding:48px 24px 64px}.hero-nav{padding:18px 24px}.hero-h1{font-size:2.6rem}.hero-right{width:100%}.hero-stats-card{min-width:unset;width:100%}#dashboard{padding:20px 16px 0}.dash-grid{grid-template-columns:repeat(2,1fr)}#toolbar{padding:0 16px}.toolbar-inner{padding:0 16px}#pomo-fab{bottom:18px;right:18px;width:46px;height:46px}#feature-drawer-tab{display:none}#lofi-panel,#ambient-panel,#breathe-panel,#buddy-panel{width:calc(100vw - 32px);right:16px}}