:root{--bg: #f4f6f8;--surface: #ffffff;--border: #e3e7ec;--border-strong: #d0d6de;--text: #16191d;--text-muted: #5f6b7a;--text-faint: #8a94a2;--ready: #64748b;--ready-soft: #eef1f5;--work: #12805c;--work-soft: #e6f5ef;--break: #0a6ebd;--break-soft: #e6f1fb;--hold: #6b5f8a;--hold-soft: #efecf5;--done: #3d6b2e;--done-soft: #edf4e9;--warn: #a45a05;--urgent: #b42318;--danger: #b42318;--danger-soft: #fdeceb;--radius: 14px;--shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 4%);--shadow-lift: 0 4px 16px rgb(16 24 40 / 8%);--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-num: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}.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}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,4vw,40px);background:#f4f6f8eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.brand h1{margin:0;font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700;letter-spacing:-.02em}.brand-summary{margin:2px 0 0;font-size:.9rem;color:var(--text-muted)}.app-main{flex:1;padding:clamp(16px,3vw,32px) clamp(16px,4vw,40px) 56px}.grid{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));max-width:1600px;margin:0 auto}.card{background:var(--surface);border:1px solid var(--border);border-top:5px solid var(--ready);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px}.card-working{border-top-color:var(--work)}.card-break{border-top-color:var(--break);background:var(--break-soft)}.card-paused{border-top-color:var(--hold);background-image:repeating-linear-gradient(135deg,rgb(107 95 138 / 6%) 0 10px,transparent 10px 20px)}.card-finished{border-top-color:var(--done);background:var(--done-soft)}.card-head{display:flex;align-items:center;gap:8px}.card-tools{display:flex;gap:2px;flex:none;margin-right:-6px}.card-name{margin:0;flex:1 1 auto;min-width:0;font-size:1.3rem;font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.state-chip{display:inline-flex;align-items:center;gap:5px;flex:none;padding:5px 14px;border-radius:999px;font-size:.95rem;font-weight:650;letter-spacing:.01em;background:var(--ready-soft);color:var(--ready)}.state-chip svg{width:14px;height:14px}.state-chip-working{background:var(--work-soft);color:var(--work)}.state-chip-break{background:var(--break);color:#fff}.state-chip-paused{background:var(--hold);color:#fff}.state-chip-finished{background:var(--done);color:#fff}.countdown-block{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:2px 0 4px}.countdown{font-family:var(--font-num);font-size:clamp(3.4rem,7.5vw,4.4rem);font-weight:700;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--text)}.countdown-warn{color:var(--warn)}.countdown-urgent{color:var(--urgent);animation:soft-pulse 1.8s ease-in-out infinite}.countdown-state-break,.countdown-state-paused,.countdown-state-ready{color:var(--text-faint)}.countdown-state-finished{color:var(--done)}@keyframes soft-pulse{0%,to{opacity:1}50%{opacity:.55}}.countdown-caption{margin:-2px 0 0;font-size:.85rem;font-weight:550;color:var(--text-muted)}.card-break .countdown-caption{color:var(--break)}.card-paused .countdown-caption{color:var(--hold)}.card-finished .countdown-caption{color:var(--done)}.break-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--ready-soft);color:var(--text-muted);font-size:.92rem}.break-bar svg{width:16px;height:16px;flex:none}.break-bar-label{font-weight:550}.break-bar-value{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:1.05rem;color:var(--text)}.break-bar.is-active{background:#fff;border:1px solid var(--break);color:var(--break)}.break-bar.is-active .break-bar-value{color:var(--break);font-size:1.5rem;line-height:1.1}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--border)}.stat dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:650;color:var(--text-faint)}.stat dd{margin:2px 0 0;font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 13px;min-height:40px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:inherit;font-size:.92rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.btn:hover{background:#f7f9fb}.btn:focus-visible{outline:2px solid var(--break);outline-offset:2px}.btn-lead{flex:1 1 auto;min-width:0}.btn-primary{background:var(--work);border-color:var(--work);color:#fff}.btn-primary:hover{background:#0e6c4e;border-color:#0e6c4e}.btn-break{background:var(--break);border-color:var(--break);color:#fff}.btn-break:hover{background:#095d9f;border-color:#095d9f}.btn-hold{background:var(--hold-soft);border-color:#d9d3e7;color:var(--hold);flex:0 0 auto}.btn-hold:hover{background:#e6e1f0}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-danger:hover{background:#9a1c13;border-color:#9a1c13}.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted)}.btn-ghost:hover{background:#eef1f5}.btn-icon{padding:8px;min-width:36px;min-height:36px;flex:none;color:var(--text-muted);border-color:transparent;background:transparent}.btn-icon:hover{background:#eef1f5;color:var(--text)}.btn-add{flex:none}.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto}.actions-confirm{background:var(--danger-soft);border-radius:10px;padding:8px 8px 8px 12px;justify-content:flex-start}.confirm-text{flex:0 1 auto;max-width:45%;margin-right:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:.94rem;color:var(--danger)}.empty{max-width:460px;margin:clamp(40px,10vh,110px) auto 0;text-align:center;color:var(--text-muted)}.empty h2{margin:0 0 6px;font-size:1.35rem;color:var(--text)}.empty p{margin:0 0 20px}.empty-help{margin:18px 0 0}.link-button{border:none;background:none;padding:0;font:inherit;font-size:.92rem;color:var(--break);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.link-button:hover{color:#073f6d}.link-button:focus-visible{outline:2px solid var(--break);outline-offset:3px;border-radius:4px}.header-actions{display:flex;align-items:center;gap:8px;flex:none}.btn-help{border-color:var(--border-strong);background:var(--surface);min-width:40px;min-height:40px}.dialog.dialog-help{width:min(620px,calc(100vw - 32px));max-height:min(88vh,900px);overflow:hidden}.dialog.dialog-help[open]{display:flex;flex-direction:column}.help{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:4px 26px 24px}.help:focus{outline:none}.help-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0 14px;margin-bottom:4px;background:var(--surface);border-bottom:1px solid var(--border)}.help-head h2{margin:0;font-size:1.3rem;font-weight:680}.help-section{padding:18px 0 0}.help-section h3{margin:0 0 8px;font-size:1rem;font-weight:680}.help-section p{margin:0 0 10px;color:var(--text-muted);line-height:1.55}.help-section p:last-child{margin-bottom:0}.help-section strong{color:var(--text)}.help-section code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;padding:1px 5px;border-radius:5px;background:var(--ready-soft);color:var(--text)}.help-steps{margin:0;padding-left:20px;color:var(--text-muted);line-height:1.55}.help-steps li{margin-bottom:7px}.help-steps li:last-child{margin-bottom:0}.help-states{margin:0;display:flex;flex-direction:column;gap:12px}.help-states>div{display:grid;grid-template-columns:116px 1fr;gap:12px;align-items:start}.help-states dt{display:flex}.help-states dt .state-chip{font-size:.82rem;padding:4px 10px}.help-states dd{margin:0;color:var(--text-muted);line-height:1.5;padding-top:1px}.help-callout{margin-top:18px;padding:16px 18px;border-radius:12px;background:var(--break-soft);border:1px solid #cfe3f5}.help-callout h3{color:var(--break)}.help-callout p{color:#2b4a63}.help-install{margin:0 0 10px;padding-left:20px;color:var(--text-muted);line-height:1.6}.help-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:18px 0 4px;margin-top:8px;background:linear-gradient(transparent,var(--surface) 40%)}@media(max-width:520px){.help-states>div{grid-template-columns:1fr;gap:5px}}.dialog{border:none;border-radius:16px;padding:0;width:min(480px,calc(100vw - 32px));box-shadow:var(--shadow-lift),0 24px 48px #10182824;color:var(--text)}.dialog::backdrop{background:#1018286b}.form{padding:24px;display:flex;flex-direction:column;gap:18px}.form-title{margin:0;font-size:1.25rem;font-weight:680}.field{display:flex;flex-direction:column;gap:8px}.field-label{font-size:.95rem;font-weight:650}.field-hint{margin:-4px 0 0;font-size:.85rem;color:var(--text-muted)}.field-error{margin:0;font-size:.85rem;color:var(--danger)}.text-input,.minutes-input input{width:100%;padding:10px 12px;font:inherit;font-size:1rem;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text)}.text-input:focus,.minutes-input input:focus{outline:2px solid var(--break);outline-offset:0;border-color:var(--break)}.text-input.is-invalid{border-color:var(--danger)}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:7px 13px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);font:inherit;font-size:.9rem;font-weight:600;color:var(--text-muted);cursor:pointer}.chip:hover{background:#f2f5f8}.chip[aria-pressed=true]{background:var(--text);border-color:var(--text);color:#fff}.chip:focus-visible{outline:2px solid var(--break);outline-offset:2px}.minutes-input{display:flex;align-items:center;gap:10px}.minutes-input input{width:110px;font-variant-numeric:tabular-nums}.minutes-unit{font-size:.9rem;color:var(--text-muted)}.input-hint{margin:-2px 0 0;font-size:.82rem;color:var(--text-faint)}.input-hint code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95em;padding:1px 5px;border-radius:5px;background:var(--ready-soft);color:var(--text-muted)}.form-summary{margin:0;padding:12px 14px;border-radius:10px;background:var(--ready-soft);font-size:.92rem;color:var(--text-muted)}.form-summary strong{color:var(--text)}.form-note{margin:-8px 0 0;font-size:.85rem;color:var(--text-muted)}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:4px}@media(max-width:560px){.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.stat:last-child{display:none}}@media(prefers-reduced-motion:reduce){.countdown-urgent{animation:none}*{transition-duration:.01ms!important}}