/* ── Ring timer ───────────────────────────────────────────────────────────── */
#tz{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:300px;height:300px;margin-bottom:36px}
#tz::before{content:'';position:absolute;inset:-54px;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(0,212,255,.16),rgba(124,58,237,.08) 36%,transparent 68%);filter:blur(18px);opacity:.58;transition:opacity .6s ease,transform .6s ease}
#tz>*{position:relative;z-index:1}
#rsvg{position:absolute;inset:0;transform:rotate(-90deg);overflow:visible}
#rbg{fill:none;stroke:#0a111c;stroke-width:3}
#rglow{fill:none;stroke:rgba(0,212,255,.05);stroke-width:22;stroke-linecap:round}
#rprog{fill:none;stroke:var(--ac);stroke-width:3;stroke-linecap:round;stroke-dasharray:880;stroke-dashoffset:880;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 8px rgba(0,212,255,.9)) drop-shadow(0 0 16px rgba(0,212,255,.3))}
#rprog.brk{stroke:var(--gn);filter:drop-shadow(0 0 8px rgba(0,255,136,.9)) drop-shadow(0 0 16px rgba(0,255,136,.3))}

/* ── Timer info ───────────────────────────────────────────────────────────── */
#ti{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:2}
#tlbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.35em;color:rgba(120,145,170,.8);text-transform:uppercase}
#goal-display{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ac);letter-spacing:.1em;max-width:240px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity .4s;margin-top:2px;}
#goal-display.show{opacity:1}
#tdsp{font-family:'JetBrains Mono',monospace;font-size:clamp(72px,7.2vw,92px);font-weight:500;color:var(--tx);letter-spacing:-.075em;line-height:.95;font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(255,255,255,.05),0 0 70px rgba(0,212,255,.06);transition:color .5s,text-shadow .5s,transform .45s ease}
#tdsp.fc{color:#fff;text-shadow:0 0 40px rgba(0,212,255,.28),0 0 86px rgba(0,212,255,.10);animation:activeTimerPulse 2.8s ease-in-out infinite}
#tdsp.br{color:var(--gn);text-shadow:0 0 40px rgba(0,255,136,.30),0 0 80px rgba(0,255,136,.12)}
@keyframes activeTimerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
#tpct{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(120,145,170,.75);min-height:16px}
#distraction-counter{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--rd);text-align:center;opacity:0;transition:opacity .3s;margin-top:2px;}
#distraction-counter.show{opacity:1}

/* ── Under-timer ──────────────────────────────────────────────────────────── */
#under-timer{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(360px,82vw);margin-bottom:20px;opacity:0;transition:opacity .5s}
body.session-started #under-timer{opacity:1}
#linear-prog-wrap{width:100%;height:4px;background:rgba(25,34,51,.8);border-radius:999px;overflow:hidden}
#linear-prog-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--ac2),var(--pu),var(--ac));border-radius:999px;transition:width .8s linear;box-shadow:0 0 10px rgba(0,212,255,.6),0 0 20px rgba(0,212,255,.2)}
#under-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(203,213,225,.86);line-height:1.6;}
#under-stats span:not(:nth-child(2)):not(:nth-child(4)){padding:3px 8px;border:1px solid rgba(148,163,184,.13);border-radius:999px;background:rgba(15,23,42,.35);}
#under-stats span:nth-child(2),#under-stats span:nth-child(4){color:rgba(148,163,184,.35);}
#under-streak{display:flex;gap:5px;margin-top:2px;min-height:10px}

/* ── Session XP HUD ──────────────────────────────────────────────────────── */
#session-xp-hud{position:fixed;left:calc(50% + 285px);top:50%;transform:translateY(-50%);z-index:25;width:104px;padding:14px 12px;border:1px solid rgba(148,163,184,.14);border-radius:24px;background:linear-gradient(180deg,rgba(15,23,42,.58),rgba(3,7,18,.74));box-shadow:0 18px 42px rgba(0,0,0,.38),inset 0 0 20px rgba(255,255,255,.025);backdrop-filter:blur(10px);display:none;flex-direction:column;align-items:center;gap:10px;pointer-events:none;transition:transform .35s ease;}
body.session-started #session-xp-hud{display:flex;}
.sx-title{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--mu);}
.sx-value{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--tx);}
#sx-track{width:12px;height:min(38vh,300px);min-height:190px;position:relative;overflow:hidden;border-radius:999px;background:rgba(15,23,42,.96);border:1px solid rgba(148,163,184,.22);box-shadow:inset 0 0 14px rgba(0,0,0,.8);}
#sx-fill{position:absolute;left:0;bottom:0;width:100%;height:0%;border-radius:999px;background:linear-gradient(0deg,var(--ac),var(--pu));box-shadow:0 0 14px rgba(0,212,255,.55),0 0 28px rgba(255,0,255,.32);transition:height .45s ease;}
.sx-penalty{min-height:14px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#fb7185;}
#session-xp-hud.penalty-hit #sx-fill{animation:xpPenaltyFlash .45s ease;}
@keyframes xpPenaltyFlash{0%,100%{filter:brightness(1)}35%{filter:brightness(1.9) saturate(1.5)}}
.sx-meta{width:100%;display:flex;justify-content:space-between;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--mu);}
.sx-meta strong{color:var(--tx);font-weight:700;}

/* ── Session Debrief ─────────────────────────────────────────────────────── */
.debrief{width:100%;font-family:'JetBrains Mono',monospace;display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--mu);border-top:1px solid rgba(148,163,184,.12);padding-top:10px;margin-top:2px;}
.debrief:empty{display:none;}
.db-goal{font-size:13px;color:var(--tx);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
.db-row{display:flex;justify-content:space-between;gap:12px;}
.db-lbl{color:var(--mu);}
.db-val{color:var(--tx);font-weight:600;}
.db-bonus{color:var(--gn);}
.db-penalty{color:#fb7185;}
.db-status{margin-top:4px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);}

/* ── Session complete / break overlay ────────────────────────────────────── */
#brkov{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;background:transparent;transition:background .5s}
#brkov.show{display:flex;background:rgba(5,8,16,.97);backdrop-filter:blur(12px)}
.bov{display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0;transform:translateY(16px);transition:all .5s ease}
#brkov.show .bov{opacity:1;transform:translateY(0)}
.bov-tag{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gn);letter-spacing:.45em;text-transform:uppercase}
.bov-title{font-size:50px;font-weight:300;text-align:center;line-height:1.1}
.bov-title span{color:var(--ac)}
.bov-div{width:280px;height:1px;background:linear-gradient(90deg,transparent,var(--br),transparent);margin:4px 0}
.bov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(360px,92vw)}
.bov-card{background:rgba(9,13,20,.9);border:1px solid rgba(25,34,51,.9);border-radius:10px;padding:16px;text-align:center;transition:border-color .2s,box-shadow .2s}
.bov-card:hover{border-color:rgba(0,212,255,.2);box-shadow:0 0 16px rgba(0,212,255,.05)}
.bov-cv{font-size:26px;font-weight:600;margin-bottom:4px;color:rgba(224,237,248,1)}
.bov-cl{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--mu);letter-spacing:.15em;text-transform:uppercase}
.bov-xp{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--ac);animation:pg 2s ease-in-out infinite}
@keyframes pg{0%,100%{text-shadow:0 0 10px rgba(0,212,255,.3)}50%{text-shadow:0 0 28px rgba(0,212,255,.9)}}
.bov-ach{display:flex;align-items:center;gap:10px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.3);border-radius:9px;padding:10px 20px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--pu);max-width:360px;opacity:0;transform:translateY(6px);transition:all .4s .3s ease}
#brkov.show .bov-ach.show{opacity:1;transform:translateY(0)}
.bov-acts{display:flex;gap:10px;margin-top:6px}
.bov-btn{padding:11px 30px;border:1px solid;border-radius:9px;font-size:13px;font-weight:500;letter-spacing:.04em;transition:all .22s;min-height:44px}
.bov-btn.pr{border-color:var(--gn);color:var(--gn)}
.bov-btn.pr:hover{background:rgba(0,255,136,.09);box-shadow:0 0 22px rgba(0,255,136,.12);transform:translateY(-1px)}
.bov-btn.sc{border-color:var(--br);color:var(--mu)}
.bov-btn.sc:hover{border-color:rgba(180,196,216,.4);color:var(--tx)}

/* Break timer screen */
#brk-wrap{display:none;flex-direction:column;align-items:center;gap:18px}
#brkov.brk-on #brk-wrap{display:flex}
#brkov.brk-on .bov{display:none}
.brk-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.35em;color:rgba(0,255,136,.5);text-transform:uppercase}
.brk-time{font-family:'JetBrains Mono',monospace;font-size:80px;font-weight:300;color:var(--gn);text-shadow:0 0 50px rgba(0,255,136,.35),0 0 90px rgba(0,255,136,.1)}
.brk-hint{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mu);text-align:center}
#brk-content{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px;width:360px;}
.brk-motivation{font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;color:rgba(226,232,240,.65);text-align:center;font-style:italic;}
.brk-fact{background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.15);border-radius:10px;padding:12px 18px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(0,212,255,.75);text-align:center;line-height:1.65;max-width:360px;}
.brk-exercise{background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.15);border-radius:10px;padding:12px 18px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(0,255,136,.75);text-align:center;line-height:1.65;}
#brklogs{display:flex;flex-direction:column;gap:4px;align-items:center;margin-top:8px}
.brk-log{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(0,255,136,.4);opacity:0;transform:translateY(4px);transition:all .4s}
.brk-log.in{opacity:1;transform:translateY(0)}
.brk-skip{margin-top:20px;padding:10px 28px;border:1px solid rgba(0,255,136,.25);border-radius:8px;color:rgba(0,255,136,.6);font-family:'JetBrains Mono',monospace;font-size:10.5px;transition:all .22s;min-height:40px}
.brk-skip:hover{border-color:var(--gn);color:var(--gn);background:rgba(0,255,136,.05);box-shadow:0 0 16px rgba(0,255,136,.08)}