:root{color-scheme:light dark;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;--tg-viewport-height: 100vh;--tg-viewport-stable-height: 100vh;--tg-safe-area-inset-top: 0px;--tg-safe-area-inset-bottom: 0px;--tg-safe-area-inset-left: 0px;--tg-safe-area-inset-right: 0px;--tg-content-safe-area-inset-top: 0px;--tg-content-safe-area-inset-bottom: 0px;--tg-content-safe-area-inset-left: 0px;--tg-content-safe-area-inset-right: 0px;--app-bg: #ffffff;--app-text: #000000;--app-secondary-bg: #f1f1f1;--app-button: #2481cc;--app-button-text: #ffffff;--app-hint: #999999;--app-destructive: #ff3b30}*{box-sizing:border-box}html,body,#root{min-height:var(--tg-viewport-stable-height, 100vh)}body{margin:0;min-width:320px;color:var(--app-text);background-color:var(--app-bg)}.app-shell{min-height:var(--tg-viewport-stable-height, 100vh);max-width:40rem;margin:0 auto;padding-top:calc(1.25rem + var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top));padding-right:calc(1.25rem + var(--tg-safe-area-inset-right) + var(--tg-content-safe-area-inset-right));padding-bottom:calc(1.25rem + var(--tg-safe-area-inset-bottom) + var(--tg-content-safe-area-inset-bottom));padding-left:calc(1.25rem + var(--tg-safe-area-inset-left) + var(--tg-content-safe-area-inset-left));display:flex;flex-direction:column;gap:1.5rem}.app-shell__brand{margin:0;font-size:clamp(1.75rem,5vw,2.25rem);font-weight:700;letter-spacing:-.02em}.app-shell__subtitle{margin:.5rem 0 0;color:var(--app-hint);font-size:1rem}.app-shell__body{flex:1;background:var(--app-secondary-bg);border-radius:1rem;padding:1.25rem}.shell-probe{margin:0;font-size:.95rem}.shell-probe--error{color:var(--app-destructive)}.shell-probe--ok{color:var(--app-text)}.app-state{min-height:var(--tg-viewport-stable-height, 100vh);max-width:40rem;margin:0 auto;padding:calc(2rem + var(--tg-safe-area-inset-top)) 1.25rem calc(2rem + var(--tg-safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;gap:.75rem;color:var(--app-text);background:var(--app-bg)}.app-state h1{margin:0;font-size:1.75rem}.app-state h2{margin:0;font-size:1.15rem;font-weight:600}.app-state p{margin:0;color:var(--app-hint)}.app-state--loading{align-items:center;text-align:center}.app-state__spinner{width:2rem;height:2rem;border-radius:50%;border:2px solid var(--app-hint);border-top-color:var(--app-button);animation:app-spin .8s linear infinite}@media(prefers-reduced-motion:reduce){.app-state__spinner{animation:none;border-top-color:var(--app-hint)}}@keyframes app-spin{to{transform:rotate(360deg)}}:root{--timer-color-coral: #e86a5c;--timer-color-amber: #e0a100;--timer-color-lime: #7cb518;--timer-color-teal: #1a9e8f;--timer-color-sky: #3a8fd4;--timer-color-violet: #7c6bc4;--timer-color-rose: #d46a8e;--timer-color-slate: #6b7c8a;--timer-color-none: var(--app-hint)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.touch-target{min-width:44px;min-height:44px}.btn-primary,.btn-secondary,.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.65rem 1.1rem;border-radius:.75rem;border:none;font:inherit;font-weight:600;cursor:pointer}.btn-primary{color:var(--app-button-text);background:var(--app-button)}.btn-secondary{color:var(--app-text);background:var(--app-bg);border:1px solid color-mix(in srgb,var(--app-hint) 45%,transparent)}.btn-danger{color:#fff;background:var(--app-destructive)}.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-danger:focus-visible,.timer-card__menu-button:focus-visible,.timer-card__menu-item:focus-visible,.timer-form__input:focus-visible,.timer-form__color-option input:focus-visible+.timer-form__swatch{outline:2px solid var(--app-button);outline-offset:2px}.timers-screen{display:flex;flex-direction:column;gap:1rem;min-height:12rem}.timers-screen--loading{align-items:center;justify-content:center;text-align:center;gap:.75rem;color:var(--app-hint)}.timers-screen--empty,.timers-screen--error{align-items:flex-start;gap:.75rem}.timers-screen__heading{margin:0;font-size:1.15rem;font-weight:600}.timers-screen__message{margin:0;color:var(--app-hint)}.timers-screen--error .timers-screen__message{color:var(--app-destructive)}.timers-screen__toolbar{display:flex;flex-wrap:wrap;gap:.75rem}.timers-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}.timers-list__item{margin:0}.timer-card{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:start;padding:.9rem .85rem;border-radius:.85rem;background:var(--app-bg);border:1px solid color-mix(in srgb,var(--app-hint) 28%,transparent)}.timer-card__accent{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:2.5rem;padding-top:.15rem}.timer-card__swatch{width:1.25rem;height:1.25rem;border-radius:999px;background:var(--swatch, var(--timer-color-none))}.timer-card__swatch[data-color=coral]{--swatch: var(--timer-color-coral)}.timer-card__swatch[data-color=amber]{--swatch: var(--timer-color-amber)}.timer-card__swatch[data-color=lime]{--swatch: var(--timer-color-lime)}.timer-card__swatch[data-color=teal]{--swatch: var(--timer-color-teal)}.timer-card__swatch[data-color=sky]{--swatch: var(--timer-color-sky)}.timer-card__swatch[data-color=violet]{--swatch: var(--timer-color-violet)}.timer-card__swatch[data-color=rose]{--swatch: var(--timer-color-rose)}.timer-card__swatch[data-color=slate]{--swatch: var(--timer-color-slate)}.timer-card__swatch[data-color=none]{--swatch: var(--timer-color-none);opacity:.35}.timer-card__emoji{font-size:1.35rem;line-height:1;min-height:1.35rem}.timer-card__body{min-width:0;display:flex;flex-direction:column;gap:.25rem}.timer-card__title{margin:0;font-size:1.05rem;font-weight:600;overflow-wrap:anywhere}.timer-card__elapsed{margin:0;font-variant-numeric:tabular-nums;font-size:1.2rem;font-weight:700;letter-spacing:-.01em}.timer-card__started{margin:0;color:var(--app-hint);font-size:.9rem}.timer-card__actions{position:relative}.timer-card__menu-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:.65rem;background:transparent;color:var(--app-text);font:inherit;font-size:1.35rem;line-height:1;cursor:pointer;padding:0}.timer-card__menu{position:absolute;top:calc(100% + .25rem);right:0;z-index:2;margin:0;padding:.35rem;list-style:none;min-width:10rem;border-radius:.75rem;background:var(--app-bg);border:1px solid color-mix(in srgb,var(--app-hint) 35%,transparent);box-shadow:0 8px 24px color-mix(in srgb,#000 12%,transparent)}.timer-card__menu-item{display:flex;width:100%;align-items:center;justify-content:flex-start;padding:.55rem .75rem;border:none;border-radius:.55rem;background:transparent;color:var(--app-text);font:inherit;cursor:pointer;text-align:left}.timer-card__menu-item:hover{background:var(--app-secondary-bg)}.timer-card__menu-item--danger{color:var(--app-destructive)}@media(prefers-reduced-motion:reduce){.timer-card__menu{box-shadow:none}}.timer-form-screen{display:flex;flex-direction:column;gap:1rem}.timer-form-screen__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}.timer-form-screen__heading{margin:0;font-size:1.15rem;font-weight:600}.timer-form{display:flex;flex-direction:column;gap:.95rem}.timer-form__row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}@media(max-width:360px){.timer-form__row{grid-template-columns:1fr}}.timer-form__field{display:flex;flex-direction:column;gap:.35rem;min-width:0}.timer-form__label{font-size:.92rem;font-weight:600}.timer-form__optional{font-weight:400;color:var(--app-hint)}.timer-form__input{width:100%;min-height:44px;padding:.55rem .75rem;border-radius:.75rem;border:1px solid color-mix(in srgb,var(--app-hint) 45%,transparent);background:var(--app-bg);color:var(--app-text);font:inherit}.timer-form__input--emoji{max-width:6rem;font-size:1.35rem;text-align:center}.timer-form__input:disabled{opacity:.65}.timer-form__error{margin:0;color:var(--app-destructive);font-size:.88rem}.timer-form__error--form{padding:.65rem .75rem;border-radius:.75rem;background:color-mix(in srgb,var(--app-destructive) 12%,var(--app-bg))}.timer-form__fieldset{margin:0;padding:0;border:none;display:flex;flex-direction:column;gap:.5rem}.timer-form__colors{display:flex;flex-wrap:wrap;gap:.5rem}.timer-form__color-option{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.25rem .55rem;border-radius:.75rem;border:1px solid color-mix(in srgb,var(--app-hint) 35%,transparent);background:var(--app-bg);cursor:pointer;font-size:.88rem}.timer-form__color-option input{position:absolute;opacity:0;pointer-events:none}.timer-form__color-option:has(input:checked){border-color:var(--app-button);box-shadow:inset 0 0 0 1px var(--app-button)}.timer-form__swatch{width:1.1rem;height:1.1rem;border-radius:999px;background:var(--swatch, var(--timer-color-none));flex-shrink:0}.timer-form__swatch[data-color=coral]{--swatch: var(--timer-color-coral)}.timer-form__swatch[data-color=amber]{--swatch: var(--timer-color-amber)}.timer-form__swatch[data-color=lime]{--swatch: var(--timer-color-lime)}.timer-form__swatch[data-color=teal]{--swatch: var(--timer-color-teal)}.timer-form__swatch[data-color=sky]{--swatch: var(--timer-color-sky)}.timer-form__swatch[data-color=violet]{--swatch: var(--timer-color-violet)}.timer-form__swatch[data-color=rose]{--swatch: var(--timer-color-rose)}.timer-form__swatch[data-color=slate]{--swatch: var(--timer-color-slate)}.timer-form__swatch[data-color=none]{--swatch: var(--timer-color-none);opacity:.35}.timer-form__actions{display:flex;flex-wrap:wrap;gap:.75rem;padding-top:.25rem}.btn-primary:disabled,.btn-secondary:disabled,.btn-danger:disabled{opacity:.6;cursor:not-allowed}.delete-dialog-root{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:1.25rem}.delete-dialog__backdrop{position:absolute;inset:0;background:color-mix(in srgb,#000 45%,transparent)}.delete-dialog{position:relative;z-index:1;width:min(100%,22rem);display:flex;flex-direction:column;gap:.75rem;padding:1.15rem 1.2rem;border-radius:1rem;background:var(--app-bg);color:var(--app-text);border:1px solid color-mix(in srgb,var(--app-hint) 35%,transparent);box-shadow:0 12px 32px color-mix(in srgb,#000 18%,transparent)}.delete-dialog__title{margin:0;font-size:1.1rem;font-weight:700}.delete-dialog__message{margin:0;color:var(--app-hint);font-size:.95rem;overflow-wrap:anywhere}.delete-dialog__error{margin:0;color:var(--app-destructive);font-size:.9rem}.delete-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.65rem;padding-top:.25rem}@media(prefers-reduced-motion:reduce){.delete-dialog{box-shadow:none}}
