@charset "UTF-8";:root{--bg: #0f1220;--card: #171a2b;--text: #e6e9f5;--accent: #00d1b2;--danger: #ff5a7a;--warn: #ffb86b;--ok: #28d17c;--space: clamp(10px, 2.5vw, 24px);--gap: clamp(10px, 2.2vw, 24px);--btn: clamp(68px, 11vw, 96px);--btn-fs: clamp(28px, 4vw, 40px);--btn-small: clamp(36px, 6vw, 48px);--btn-small-fs: clamp(14px, 2.8vw, 24px);--input-h: 48px;--field-w: calc(16ch + 20px) }*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Bebas Neue,Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}.app{min-height:100%;display:grid;grid-template-rows:auto 1fr}.app__header{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center}.app__header h1{margin:0;text-transform:uppercase;letter-spacing:3px;font-weight:900;font-size:clamp(22px,5vw,40px);background:linear-gradient(90deg,#ff3b55,#ffb86b 50%,#28d17c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 0 rgba(0,0,0,.35)}.app__main{padding:var(--space);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.card{background:transparent;border:none;border-radius:0;box-shadow:none;width:100%;height:100%;display:flex;flex-direction:column;align-items:center}.card--settings{height:auto;justify-content:flex-start;align-items:stretch;padding-top:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.grow{flex:1 1 200px}button{appearance:none;cursor:pointer;background:var(--accent);border:none;color:#0a0c16;padding:10px 14px;border-radius:10px;font-weight:700}.btn-icon{width:var(--btn);height:var(--btn);padding:0;display:inline-grid;place-items:center;font-size:var(--btn-fs)}.btn-icon.small{width:var(--btn-small);height:var(--btn-small);font-size:var(--btn-small-fs);border-radius:8px}.btn-play{background:var(--ok);color:#0a0c16}.btn-pause{background:var(--warn);color:#0a0c16}.btn-icon:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:#2b3152;color:var(--text)}button.danger{background:var(--danger);color:#fff;width:var(--btn)}.settings.settings--stack{width:clamp(260px,70vw,360px);margin-inline:auto;display:grid;justify-items:center}.settings.settings--stack .row.compact{display:grid;grid-template-columns:1fr 1fr;gap:16px;justify-items:center;width:100%}.settings.settings--stack .row.compact .btn-reset-rounds{grid-column:1;grid-row:2;justify-self:center}.input-block{--w: var(--field-w);width:var(--w);display:grid;grid-template-rows:auto auto;justify-items:stretch;align-items:center;gap:6px}.input-focus{box-sizing:border-box;inline-size:auto;min-width:3ch;max-width:var(--field-w);height:var(--input-h);padding:0 6px;line-height:1;text-align:center;font-size:clamp(24px,7vw,34px);font-weight:800;letter-spacing:normal;background:#0f1326;border:1px solid #2b3152;border-radius:10px;color:var(--text);-moz-appearance:textfield;appearance:none}.input-focus::-webkit-inner-spin-button,.input-focus::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-block label{box-sizing:border-box;inline-size:100%;padding:6px 10px;border-radius:6px;background:#2b3152;color:var(--text);font-size:.9rem;letter-spacing:.5px;text-transform:uppercase;font-weight:900;opacity:.95;text-align:center;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}.btn-reset-rounds{height:var(--input-h);width:var(--input-h);border-radius:10px;background:var(--accent);color:#0a0c16;display:grid;place-items:center;font-size:1.2rem;margin-top:8px}.timer__display{font-variant-numeric:tabular-nums;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;font-size:80px;line-height:1;letter-spacing:1px}.timer__panel{display:grid;justify-items:center;gap:10px;position:relative}.panel-actions{position:static;right:auto;top:auto;display:flex;justify-content:center;gap:8px;width:100%;margin-top:var(--gap)}.panel-actions .btn-icon{width:calc(var(--btn) * .7);height:calc(var(--btn) * .7);font-size:calc(var(--btn-fs) * .7)}.timer__phase{opacity:.95;font-weight:900;font-size:clamp(16px,4.5vw,48px);letter-spacing:2px;text-align:center}.fullscreen .timer__phase{font-size:clamp(24px,9vw,96px)}.timer__rounds{opacity:.8}.timer__circle{display:grid;place-items:center;margin:6px 0 10px}.timer__circle svg{width:clamp(220px,65vw,400px);height:auto}.circular{position:relative}.circular.running .circular__progress{stroke:var(--danger);filter:drop-shadow(0 0 12px rgba(255,90,122,.35))}.circular.paused .circular__progress{stroke:var(--ok);filter:drop-shadow(0 0 12px rgba(40,209,124,.35))}.circular__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(100px,12vw,140px);font-weight:800;letter-spacing:2px;white-space:nowrap}.circular__colon{opacity:.7;padding:0 6px}.settings{display:grid;gap:12px;margin-top:16px}.custom__row{display:grid;grid-template-columns:auto 1fr 1fr;gap:16px;align-items:center;background:#111428;padding:12px;border-radius:12px}.custom__row .grow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%}.custom__row .preview-block{width:100%;min-width:100px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#22263d;font-weight:700;font-size:1.2rem;text-align:center}.custom__row label{text-align:center;width:100%}.custom__row .danger{padding:0;display:flex;align-items:center;justify-content:center}.custom__row .danger.btn-icon.small{background:#55222a;color:#fff}.controls{display:flex;gap:calc(var(--gap) * .75);flex-wrap:wrap;justify-content:center}.controls.controls--main{justify-content:center;gap:var(--gap)}.fullscreen .controls.controls--main{gap:calc(var(--gap) * 1.25)}.controls-row{display:flex;justify-content:center;gap:var(--gap);flex-wrap:wrap}.phase--work{outline:2px solid rgb(76.5,222.8,201.1)}.phase--rest{outline:2px solid rgb(255,139.5,161.9)}.fullscreen .app__main{padding:max(2vw,10px)}.fullscreen .card{width:100%;height:100%;max-width:none;display:grid;place-items:center}.fullscreen .timer__circle{margin:0}.fullscreen .circular__center{font-size:clamp(100px,23vw,240px)}@media (max-width: 320px){:root{--btn: clamp(58px, 20vw, 72px);--btn-fs: clamp(22px, 7vw, 30px);--gap: clamp(8px, 5vw, 14px)}.timer__phase{font-size:clamp(20px,12vw,72px)}}