:root{--focus-violet:#a17cff;--focus-cyan:#52e1d2;--focus-lime:#d3ff4e;--focus-panel:linear-gradient(145deg,#191a25f2,#14151df5);--focus-line:#ffffff17}
*{box-sizing:border-box}
html{min-width:320px;min-height:100%;scroll-behavior:smooth}
body{min-height:100vh;margin:0;color:#f4f0ff;font-family:Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #d3ff4e;outline-offset:3px}
.page-shell{width:min(1030px,calc(100% - 48px));padding-top:36px;padding-bottom:44px}
.header-tools{display:flex;align-items:center;gap:10px}.settings-trigger{display:flex;align-items:center;gap:7px;min-height:33px;padding:0 10px;border:1px solid #ffffff20;border-radius:9px;background:#ffffff08;color:#dcd6e9;font:700 9px Inter,'Segoe UI',Arial,sans-serif;cursor:pointer;transition:.18s}.settings-trigger:hover{border-color:#a17cff80;background:#a17cff16;color:#fff}.settings-trigger svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.intro{margin-bottom:25px}.intro h1 span{background:linear-gradient(95deg,#d3ff4e,#52e1d2 52%,#ff55b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.focus-layout{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(310px,.86fr);align-items:stretch;gap:16px}
.timer-card,.task-card,.stats-card,.history-card{position:relative;overflow:hidden;border:1px solid var(--focus-line);border-radius:17px;background:var(--focus-panel);box-shadow:0 20px 58px #0005,0 1px 0 #ffffff08 inset;backdrop-filter:blur(16px)}
.timer-card{display:flex;min-height:600px;flex-direction:column;align-items:center;padding:21px 24px 18px}.timer-card:before{position:absolute;top:0;left:18%;width:64%;height:1px;background:linear-gradient(90deg,transparent,#d3ff4e75,#a17cff99,#52e1d275,transparent);content:''}.timer-card-glow{position:absolute;top:19%;left:50%;width:330px;height:330px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#a17cff17,transparent 68%);pointer-events:none}.timer-topline,.phase-tabs,.timer-display,.timer-controls,.cycle-progress{position:relative;z-index:1}.timer-topline{display:flex;width:100%;align-items:center;justify-content:space-between}.section-kicker{display:inline-flex;align-items:center;gap:7px;color:#d3ff4e;font-size:8px;font-weight:850;letter-spacing:1.05px}.section-kicker i{width:5px;height:5px;border-radius:50%;background:#d3ff4e;box-shadow:0 0 0 4px #d3ff4e19,0 0 10px #d3ff4e}.sound-toggle{display:flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid #ffffff14;border-radius:8px;background:#ffffff05;color:#aaa3b7;font:700 8px Inter,'Segoe UI',Arial,sans-serif;cursor:pointer;transition:.18s}.sound-toggle:hover{border-color:#52e1d255;color:#d8f8f2}.sound-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.sound-toggle .sound-off,.sound-toggle:not(.is-on) .sound-on{display:none}.sound-toggle:not(.is-on) .sound-off{display:block}
.phase-tabs{display:grid;width:min(100%,340px);grid-template-columns:repeat(3,1fr);gap:4px;margin-top:22px;padding:4px;border:1px solid #ffffff10;border-radius:10px;background:#0e0f16}.phase-tab{min-height:32px;padding:0 7px;border:0;border-radius:7px;background:transparent;color:#918a9f;font:700 8px Inter,'Segoe UI',Arial,sans-serif;cursor:pointer;transition:.18s}.phase-tab:hover{color:#eee8f7}.phase-tab.is-active{background:linear-gradient(110deg,#a17cff32,#52e1d21c);color:#eee8ff;box-shadow:0 2px 9px #0003,0 0 0 1px #a17cff22 inset}
.timer-display{display:grid;width:min(100%,310px);aspect-ratio:1;place-items:center;margin:7px 0 0}.timer-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}.ring-track,.ring-progress{fill:none;stroke-width:3}.ring-track{stroke:#ffffff12}.ring-progress{stroke:url(#ringGradient);stroke-linecap:round;stroke-dasharray:748.8;stroke-dashoffset:0;filter:drop-shadow(0 0 7px #a17cff88);transition:stroke-dashoffset .35s linear,filter .25s}.timer-display[data-mode=short] .ring-progress{filter:drop-shadow(0 0 7px #52e1d288)}.timer-display[data-mode=long] .ring-progress{filter:drop-shadow(0 0 8px #d3ff4e77)}.timer-center{display:flex;flex-direction:column;align-items:center;text-align:center}.timer-caption{color:#c8b4fa;font-size:8px;font-weight:850;letter-spacing:1.6px}.timer-display[data-mode=short] .timer-caption{color:#87e7dc}.timer-display[data-mode=long] .timer-caption{color:#dcf896}.timer-center strong{margin:8px 0 4px;color:#f6f2ff;font-size:clamp(48px,7vw,68px);font-weight:650;letter-spacing:-3.8px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 4px 25px #a17cff24}.timer-subcaption{color:#8f899e;font-size:9px}.ring-orbit{position:absolute;width:8px;height:8px;border:2px solid #1b1b27;border-radius:50%;background:#d3ff4e;box-shadow:0 0 0 1px #d3ff4e9c,0 0 15px #d3ff4e88}.orbit-one{top:17%;right:19%}.orbit-two{bottom:18%;left:13%;width:5px;height:5px;background:#52e1d2;box-shadow:0 0 0 1px #52e1d288,0 0 12px #52e1d288}
.timer-controls{display:grid;width:min(100%,295px);grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;margin:3px 0 19px}.timer-action{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff1c;cursor:pointer;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.timer-action:hover{transform:translateY(-2px)}.timer-action svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.timer-action.secondary{width:42px;height:42px;border-radius:12px;background:#ffffff08;color:#b4adc1}.timer-action.secondary:hover{border-color:#a17cff6b;background:#a17cff15;color:#fff}.timer-action.primary{min-height:46px;gap:9px;border-color:transparent;border-radius:12px;background:linear-gradient(105deg,#ad71ff,#8158f4 53%,#39c9bb);color:#fff;font:800 10px Inter,'Segoe UI',Arial,sans-serif;box-shadow:0 8px 23px #874cff35,0 1px 0 #ffffff4a inset}.timer-action.primary:hover{box-shadow:0 10px 29px #874cff54,0 1px 0 #ffffff55 inset}.timer-action.primary .pause-icon{display:none}.timer-action.primary.is-running .play-icon{display:none}.timer-action.primary.is-running .pause-icon{display:block}
.cycle-progress{width:min(100%,330px);padding-top:14px;border-top:1px solid #ffffff10}.cycle-label{display:flex;justify-content:space-between;color:#8c859b;font-size:7px;font-weight:850;letter-spacing:.9px}.cycle-label span:last-child{color:#b7afc5;font-variant-numeric:tabular-nums}.cycle-dots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px}.cycle-dot{height:4px;border-radius:99px;background:#ffffff14;transition:background .3s,box-shadow .3s}.cycle-dot.is-complete{background:linear-gradient(90deg,#a17cff,#52e1d2);box-shadow:0 0 9px #a17cff47}.cycle-dot.is-current{background:#a17cff8f;box-shadow:0 0 8px #a17cff43}
.focus-side{display:grid;grid-template-rows:auto auto 1fr;gap:13px}.task-card,.stats-card,.history-card{padding:17px 18px}.task-card{min-height:145px}.side-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.side-heading h2{margin:6px 0 0;color:#f0ecf8;font-size:14px;font-weight:750;letter-spacing:-.25px}.task-spark{display:grid;width:30px;height:30px;place-items:center;border:1px solid #a17cff29;border-radius:9px;background:#a17cff12;color:#c5aaff;font-size:14px}.task-card textarea{display:block;width:100%;min-height:47px;resize:vertical;margin:13px 0 0;padding:10px 11px;border:1px solid #ffffff16;border-radius:9px;outline:0;background:#0e0f16;color:#f2edf9;font:500 10px/1.55 Inter,'Segoe UI',Arial,sans-serif;transition:border-color .18s,box-shadow .18s}.task-card textarea::placeholder{color:#777286}.task-card textarea:focus{border-color:#a17cff72;box-shadow:0 0 0 3px #a17cff12}.task-foot{display:flex;justify-content:space-between;gap:10px;margin-top:7px;color:#777286;font-size:7px}.task-foot span:last-child{color:#93d7bd;font-size:6px;font-weight:850;letter-spacing:.7px}
.stats-card{min-height:149px}.stats-heading{margin-bottom:13px}.today-date{padding:5px 7px;border:1px solid #ffffff13;border-radius:7px;background:#ffffff05;color:#a19aae;font-size:7px;font-weight:700;white-space:nowrap}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stat-item{display:flex;align-items:center;gap:9px;min-height:61px;padding:9px;border:1px solid #ffffff11;border-radius:10px;background:linear-gradient(135deg,#ffffff08,#ffffff03)}.stat-icon{display:grid;flex:none;width:30px;height:30px;place-items:center;border:1px solid #a17cff2e;border-radius:9px;background:#a17cff11;color:#c5aaff}.stat-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.session-icon{border-color:#52e1d227;background:#52e1d20d;color:#8ceadd}.stat-item>div{display:grid;gap:3px}.stat-item strong{color:#f2eef9;font-size:18px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.stat-item>div>span{color:#8b8499;font-size:6px;font-weight:850;letter-spacing:.65px;white-space:nowrap}
.history-card{min-height:169px}.history-heading{margin-bottom:11px}.history-count{display:grid;min-width:24px;height:24px;place-items:center;padding:0 5px;border:1px solid #ffffff16;border-radius:8px;background:#ffffff07;color:#bcb4ca;font-size:8px;font-weight:800;font-variant-numeric:tabular-nums}.history-list{display:grid;gap:6px}.history-empty{display:grid;min-height:64px;place-items:center;padding:12px;border:1px dashed #ffffff18;border-radius:9px;color:#777286;text-align:center;font-size:8px;line-height:1.6}.history-row{display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:8px;padding:7px 8px;border:1px solid #ffffff0e;border-radius:9px;background:#ffffff04}.history-check{display:grid;width:25px;height:25px;place-items:center;border:1px solid #d3ff4e2c;border-radius:8px;background:#d3ff4e0d;color:#d3ff4e;font-size:11px}.history-row div{display:grid;gap:2px;min-width:0}.history-row strong{overflow:hidden;color:#e8e3f0;font-size:8px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.history-row small{color:#888196;font-size:7px}.history-row time{color:#a49cb2;font-size:7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.toast{position:fixed;right:24px;bottom:22px;z-index:30;max-width:min(360px,calc(100vw - 32px));padding:11px 14px;border:1px solid #a17cff70;border-radius:10px;background:#201b2e;color:#f9f6ff;font-size:9px;box-shadow:0 10px 30px #0008;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.is-visible{opacity:1;transform:translateY(0)}
.settings-dialog{width:min(460px,calc(100% - 28px));max-height:calc(100% - 28px);padding:0;overflow:auto;border:1px solid #ffffff20;border-radius:17px;background:linear-gradient(145deg,#1a1b27,#12131c);color:#f4f0ff;box-shadow:0 26px 90px #000b}.settings-dialog::backdrop{background:#080910d9;backdrop-filter:blur(10px)}.settings-panel{padding:21px}.settings-heading{display:flex;align-items:center;justify-content:space-between}.settings-heading h2{margin:6px 0 0;font-size:19px;letter-spacing:-.45px}.settings-close{display:grid;width:33px;height:33px;place-items:center;border:1px solid #ffffff18;border-radius:9px;background:#ffffff08;color:#c5bdcf;cursor:pointer}.settings-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.settings-description{margin:11px 0 17px;color:#a29caf;font-size:9px;line-height:1.6}.duration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.duration-grid label,.cycle-setting{display:grid;gap:7px;color:#bcb5c9;font-size:8px;font-weight:700}.duration-grid label>div,.cycle-setting>div{display:flex;align-items:center;gap:6px;min-width:0;padding:0 8px;border:1px solid #ffffff19;border-radius:9px;background:#101119}.duration-grid input,.cycle-setting input{width:100%;height:39px;padding:0;border:0;outline:0;background:transparent;color:#f2edfa;font:750 12px Inter,'Segoe UI',Arial,sans-serif;font-variant-numeric:tabular-nums}.duration-grid input:focus,.cycle-setting input:focus{outline:none}.duration-grid small,.cycle-setting small{color:#898296;font-size:7px;white-space:nowrap}.cycle-setting{grid-template-columns:1fr 160px;align-items:center;margin-top:13px}.cycle-setting>div{padding-left:10px}.cycle-setting input{height:35px}.auto-start-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff05;cursor:pointer}.auto-start-setting>span{display:grid;gap:4px}.auto-start-setting strong{color:#e7e1ee;font-size:8px}.auto-start-setting small{color:#8f899c;font-size:7px}.auto-start-setting input{position:absolute;width:1px;height:1px;opacity:0}.auto-start-setting i{position:relative;flex:none;width:34px;height:19px;border:1px solid #ffffff22;border-radius:99px;background:#292a36;transition:.18s}.auto-start-setting i:after{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#aaa4b3;transition:.18s;content:''}.auto-start-setting input:checked+i{border-color:#a17cff70;background:#a17cff47}.auto-start-setting input:checked+i:after{left:17px;background:#fff;box-shadow:0 0 9px #a17cff}.settings-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.settings-actions button{min-height:38px;padding:0 12px;border:1px solid #ffffff1c;border-radius:9px;background:#ffffff08;color:#d5cde5;font:750 8px Inter,'Segoe UI',Arial,sans-serif;cursor:pointer}.settings-actions .settings-save{border-color:transparent;background:linear-gradient(105deg,#ad71ff,#8158f4 53%,#39c9bb);color:#fff}.settings-actions button:hover{filter:brightness(1.12)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.focus-layout{grid-template-columns:minmax(0,1fr);width:min(100%,560px);margin:0 auto}.timer-card{min-height:0;padding:20px}.timer-display{width:min(100%,300px)}.focus-side{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.task-card{grid-column:1/-1}.stats-card,.history-card{min-height:165px}}
@media(max-width:520px){.topbar,.page-shell{width:calc(100% - 30px)}.topbar{height:61px}.page-shell{padding-top:30px;padding-bottom:28px}.header-tools{gap:6px}.privacy-pill{padding:7px 8px;font-size:6px}.settings-trigger{min-height:30px;padding:0 7px;font-size:8px}.intro{margin-bottom:18px}.intro h1{font-size:32px;letter-spacing:-1.5px}.intro p{font-size:10px}.timer-card{padding:16px 13px 15px;border-radius:14px}.phase-tabs{margin-top:17px}.phase-tab{font-size:7px}.timer-display{width:min(100%,270px);margin-top:5px}.timer-center strong{font-size:56px}.timer-subcaption{font-size:8px}.timer-controls{width:min(100%,270px);grid-template-columns:40px 1fr 40px;gap:9px;margin-bottom:15px}.timer-action.secondary{width:39px;height:39px;border-radius:11px}.timer-action.primary{min-height:43px}.cycle-progress{padding-top:12px}.focus-side{gap:10px}.task-card,.stats-card,.history-card{padding:14px;border-radius:13px}.task-card{min-height:140px}.side-heading h2{font-size:13px}.stats-grid{gap:6px}.stat-item{gap:6px;min-height:55px;padding:7px}.stat-icon{width:26px;height:26px;border-radius:8px}.stat-item strong{font-size:16px}.stat-item>div>span{font-size:5px;letter-spacing:.35px}.today-date{font-size:6px;padding:5px}.history-row{grid-template-columns:23px 1fr auto;gap:6px;padding:6px}.history-check{width:22px;height:22px}.history-row strong{font-size:7px}.history-row small,.history-row time{font-size:6px}.settings-panel{padding:17px}.cycle-setting{grid-template-columns:1fr 140px}}
@media(max-width:370px){.focus-side{grid-template-columns:1fr}.task-card{grid-column:auto}.stats-card,.history-card{min-height:0}.stats-grid{gap:8px}.stat-item{padding:9px}.stat-item>div>span{font-size:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition:none!important}}