:root{--font-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;--font-mono:"Space Grotesk",monospace;--ease-spring:cubic-bezier(.175,.885,.32,1.275);--ease-smooth:cubic-bezier(.16,1,.3,1);color:var(--text);background:var(--bg);font-family:var(--font-sans);-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;overflow-x:hidden}*{box-sizing:border-box;touch-action:manipulation}:root[data-theme=dark]{--bg:#06040c;--card-bg:#140c2659;--card-border:#ffffff0f;--card-shadow:0 30px 60px #000000a6,inset 0 1px 0 #ffffff05;--card-glow:0 0 35px #9d7aff05;--text:#f5f3ff;--text-muted:#8d81b3;--violet:#9d7aff;--cyan:#3de1ff;--green:#0df28a;--red:#ff3b5c;--dialog-bg:#0d081d;--active-glow:#9d7aff1a;--btn-glass-bg:#ffffff08;--btn-glass-border:#ffffff0f;--btn-glass-hover:#ffffff12}:root[data-theme=light]{--bg:#f8f7fc;--card-bg:#ffffffd9;--card-border:#7044ff0f;--card-shadow:0 15px 35px #7044ff08,inset 0 1px 0 #ffffffe6;--card-glow:0 0 30px #7044ff03;--text:#110b22;--text-muted:#6b6088;--violet:#794cff;--cyan:#00b2d6;--green:#00a355;--red:#db1a3b;--dialog-bg:#fff;--active-glow:#7044ff0a;--btn-glass-bg:#7044ff05;--btn-glass-border:#7044ff0f;--btn-glass-hover:#7044ff0d}body{background-color:var(--bg);-webkit-font-smoothing:antialiased;min-height:100svh;transition:background-color .8s var(--ease-smooth), color .5s var(--ease-smooth);justify-content:center;align-items:center;margin:0;padding:clamp(12px,3vw,24px);display:flex}.app-container{grid-template-rows:auto 1fr;gap:16px;width:100%;max-width:820px;display:grid;position:relative}.app-header{justify-content:space-between;align-items:center;padding:4px 0;display:flex}.brand h1{font-family:var(--font-mono);letter-spacing:-.03em;color:var(--text);margin:0;font-size:24px;font-weight:700}.badge{letter-spacing:.2em;color:var(--violet);background:var(--card-bg);border:1px solid var(--card-border);border-radius:99px;padding:4px 10px;font-size:9px;font-weight:800;display:inline-block}.actions{gap:8px;display:flex}.bento-layout{grid-template-columns:repeat(12,1fr);gap:16px;display:grid}.bento-card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow),var(--card-glow);-webkit-backdrop-filter:blur(30px);transition:transform .4s var(--ease-smooth),border-color .4s var(--ease-smooth),box-shadow .4s var(--ease-smooth);border-radius:24px;overflow:hidden}.bento-card:hover{box-shadow:var(--card-shadow),0 10px 20px #9d7aff08;border-color:#9d7aff38;transform:translateY(-1px)}.card-inner{flex-direction:column;justify-content:space-between;gap:12px;height:100%;padding:24px;display:flex}h3{font-family:var(--font-mono);letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase;margin:0;font-size:10px;font-weight:700}.col-span-12{grid-column:span 12}.col-span-8{grid-column:span 8}.col-span-4{grid-column:span 4}@media (width>=769px){.md\:col-span-7{grid-column:span 7}.md\:col-span-5{grid-column:span 5}}.card-timeline{min-height:auto}.card-timeline .card-inner{gap:8px;padding:16px 24px}.timeline-track{gap:10px;width:100%;display:flex}.pill{border:1px solid var(--card-border);transition:all .35s var(--ease-smooth);background:#00000005;border-radius:16px;flex:1;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}:root[data-theme=dark] .pill{background:#ffffff03}.pill b{color:var(--text);font-size:12px;font-weight:700}.pill span{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:11px}.pill.active{border-color:var(--violet);background:var(--active-glow);transform:scale(1.02);box-shadow:0 0 12px #9d7aff0f}.pill.done{border-color:var(--green);color:var(--text);background:#0df28a05}.card-main-timer{min-height:280px}.card-main-timer .card-inner{justify-content:space-between;align-items:center;gap:12px}.status-indicator{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--text-muted);border:1px solid var(--card-border);background:#00000008;border-radius:99px;padding:6px 14px;font-size:9px;font-weight:800}:root[data-theme=dark] .status-indicator{background:#ffffff03}.timer-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timer-numbers{font-family:var(--font-sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;transition:transform .4s var(--ease-spring), color .3s;font-size:clamp(64px,14vw,90px);font-weight:800;line-height:.9}.progress-section{gap:12px;width:100%;display:grid}.progress-track{background:#0000000d;border-radius:99px;width:100%;height:6px;overflow:hidden}:root[data-theme=dark] .progress-track{background:#ffffff08}.progress-bar{background:linear-gradient(90deg,var(--violet),var(--cyan));border-radius:99px;width:0;height:100%;transition:width 50ms linear}.timer-footer-meta{justify-content:space-between;align-items:center;width:100%;display:flex}.phase-name-badge{color:var(--violet);font-size:13px;font-weight:800}.hint-label{color:var(--text-muted);text-align:right;font-size:12px;font-weight:500}.card-controls-panel .card-inner{justify-content:flex-start;gap:16px}.controls-group{flex-direction:column;justify-content:center;gap:12px;width:100%;height:100%;display:flex}button{font-family:var(--font-sans);border:1px solid var(--card-border);cursor:pointer;transition:all .2s var(--ease-smooth);border-radius:14px;outline:none;justify-content:center;align-items:center;gap:8px;min-height:50px;padding:14px 22px;font-size:14px;font-weight:700;display:inline-flex}button:hover{transform:translateY(-1px);box-shadow:0 8px 16px #0000000d}button:active{transform:scale(.985)}.btn-primary{background:var(--green);color:#000;border-color:#0000;box-shadow:0 8px 24px #0df28a1f}:root[data-theme=dark] .btn-primary{color:#000}.btn-primary:hover{filter:brightness(1.08)}.btn-accent{background:var(--cyan);color:#000;border-color:#0000;box-shadow:0 8px 24px #3de1ff1f}:root[data-theme=dark] .btn-accent{color:#000}.btn-accent:hover{filter:brightness(1.08)}.btn-danger-outline{color:var(--red);border-color:var(--red);background:0 0}.btn-danger-outline:hover{background:var(--red);color:#fff}.btn-glass{background:var(--btn-glass-bg);color:var(--text);border-color:var(--btn-glass-border)}.btn-glass:hover{background:var(--btn-glass-hover)}.btn-icon{background:var(--btn-glass-bg);border:1px solid var(--btn-glass-border);width:40px;height:40px;color:var(--text);cursor:pointer;border-radius:50%;place-items:center;padding:0;transition:all .2s;display:grid}.btn-icon:hover{transform:translateY(-1px)}.btn-icon:active{transform:translateY(1px)}.btn-icon svg{width:18px;height:18px}.sun-icon,:root[data-theme=light] .moon-icon{display:none}:root[data-theme=light] .sun-icon{display:block}.card-insights{min-height:120px}.card-insights .card-inner{gap:12px;padding:20px 24px}.insight-text{color:var(--text);margin:0;font-size:15px;font-weight:500;line-height:1.5}dialog{border:1px solid var(--card-border);background:var(--dialog-bg);color:var(--text);border-radius:24px;width:min(400px,90vw);padding:0;box-shadow:0 24px 50px #0000004d}dialog::backdrop{-webkit-backdrop-filter:blur(8px);background:#00000073}.sheet{gap:16px;padding:24px;display:grid}.sheet h2{font-family:var(--font-mono);letter-spacing:-.02em;margin:0;font-size:18px}.sheet p{color:var(--text-muted);margin:0;font-size:13px;line-height:1.5}.form-inputs{gap:12px;display:grid}.form-inputs label{color:var(--text-muted);flex-direction:column;gap:6px;font-size:12px;font-weight:700;display:flex}.form-inputs input{border:1px solid var(--card-border);color:var(--text);font-family:var(--font-sans);background:#00000008;border-radius:12px;outline:none;padding:12px 14px;font-size:14px;transition:border-color .2s}.form-inputs input:focus{border-color:var(--violet)}.form-actions{justify-content:flex-end;gap:10px;margin-top:10px;display:flex}.form-actions button{min-height:42px;padding:10px 18px}:root[data-state=ok]{--bg:#072412;--card-bg:#0df28a0f}:root[data-state=ok][data-theme=light]{--bg:#dcfce7;--card-bg:#00a3550f}:root[data-state=ok] .bento-card{box-shadow:0 0 30px #0df28a0d, var(--card-shadow);border-color:#0df28a40}:root[data-state=ok] .card-main-timer{animation:greenPulse 3s var(--ease-smooth) infinite;border-color:var(--green)}:root[data-state=ok] .timer-numbers{color:var(--green);transform:scale(1.03)}:root[data-state=ok] .progress-bar{background:var(--green)}:root[data-state=danger]{--bg:#4c0617;--card-bg:#ff3b5c14}:root[data-state=danger][data-theme=light]{--bg:#ffe4e6;--card-bg:#db1a3b0f}:root[data-state=danger] .bento-card{box-shadow:0 0 40px #ff3b5c14, var(--card-shadow);border-color:#ff3b5c4d}:root[data-state=danger] .card-main-timer{animation:redPulse 1s var(--ease-smooth) infinite;border-color:var(--red)}:root[data-state=danger] .timer-numbers{color:var(--red);animation:.5s infinite shake;transform:scale(1.05)}:root[data-state=danger] .progress-bar{background:var(--red)}@keyframes greenPulse{0%,to{box-shadow:0 0 0 0 #0df28a1f,var(--card-shadow)}50%{box-shadow:0 0 20px 2px #0df28a33,var(--card-shadow)}}@keyframes redPulse{0%,to{box-shadow:0 0 0 0 #ff3b5c1f,var(--card-shadow)}50%{box-shadow:0 0 25px 3px #ff3b5c40,var(--card-shadow)}}@keyframes shake{0%,to{transform:scale(1.05)translate(0)}25%{transform:scale(1.05)translate(-1px,.5px)}50%{transform:scale(1.05)translate(1px,-.5px)}75%{transform:scale(1.05)translate(-.5px,-.5px)}}@media (width<=768px){body{padding:14px}.app-container{grid-template-rows:auto;gap:12px;height:calc(100svh - 28px);min-height:calc(100svh - 28px)}.bento-layout{grid-template-rows:auto 1fr auto auto;grid-template-columns:1fr;gap:12px;height:calc(100% - 46px)}.col-span-8,.col-span-4{grid-column:span 12}.card-timeline{order:1}.card-timeline h3{display:none}.card-timeline .card-inner{padding:12px 16px}.timeline-track{flex-direction:row;gap:8px}.pill{text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:10px 14px}.pill b{font-size:12px}.pill span{margin-top:0;font-size:10px}.card-main-timer{flex-grow:1;order:2;min-height:auto}.card-main-timer .card-inner{justify-content:center;gap:12px;padding:20px}.timer-numbers{margin:12px 0;font-size:clamp(62px,16vw,78px)}.timer-footer-meta{display:none}.progress-section{margin-top:8px}.card-insights{order:3;min-height:auto}.card-insights h3{display:none}.card-insights .card-inner{padding:16px 20px}.insight-text{font-size:13px;line-height:1.45}.card-controls-panel{order:4}.card-controls-panel h3{display:none}.card-controls-panel .card-inner{padding:14px 18px}.controls-group{flex-flow:wrap;gap:10px}button{border-radius:12px;min-height:48px;padding:10px 16px;font-size:13px}#startBtn{flex:45%}.btn-primary{box-shadow:none}#nextBtn{flex:45%}.btn-accent{box-shadow:none}#resetBtn{order:3;flex:100%!important}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;transform:none!important}}