: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;--on-accent: #ffffff;--raised: #ffffff;--work-hover: #0e6c4e;--break-hover: #095d9f;--break-strong: #073f6d;--danger-hover: #9a1c13;--hold-border: #d9d3e7;--hold-hover: #e6e1f0;--surface-hover: #f7f9fb;--chip-hover: #f2f5f8;--ghost-hover: #eef1f5;--callout-border: #cfe3f5;--callout-text: #2b4a63;--header-bg: rgb(244 246 248 / 92%);--backdrop: rgb(16 24 40 / 42%);--hatch: rgb(107 95 138 / 6%);--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%);--shadow-dialog: 0 24px 48px rgb(16 24 40 / 14%);--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}[data-theme=dark]{--bg: #10141a;--surface: #191e26;--border: #2a313c;--border-strong: #3b4350;--text: #eef1f5;--text-muted: #a7b1be;--text-faint: #7e8896;--ready: #94a3b5;--ready-soft: #232a34;--work: #3fbe8d;--work-soft: #16302a;--break: #5fb0f2;--break-soft: #15283a;--hold: #ab9cd4;--hold-soft: #262338;--done: #78c45f;--done-soft: #17271b;--warn: #e8a33d;--urgent: #ff7264;--danger: #ff7264;--danger-soft: #33191a;--on-accent: #0d1117;--raised: #212833;--work-hover: #58ce9f;--break-hover: #7cc0f6;--break-strong: #9fd0f8;--danger-hover: #ff8f84;--hold-border: #3c3653;--hold-hover: #322c47;--surface-hover: #1f2530;--chip-hover: #232a34;--ghost-hover: #232a34;--callout-border: #26425c;--callout-text: #b9d4ea;--header-bg: rgb(16 20 26 / 92%);--backdrop: rgb(0 0 0 / 62%);--hatch: rgb(171 156 212 / 10%);--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);--shadow-lift: 0 4px 16px rgb(0 0 0 / 45%);--shadow-dialog: 0 24px 48px rgb(0 0 0 / 55%)}*{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:var(--header-bg);-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,var(--hatch) 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:var(--on-accent)}.state-chip-paused{background:var(--hold);color:var(--on-accent)}.state-chip-finished{background:var(--done);color:var(--on-accent)}.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:var(--raised);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:var(--surface-hover)}.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:var(--on-accent)}.btn-primary:hover{background:var(--work-hover);border-color:var(--work-hover)}.btn-break{background:var(--break);border-color:var(--break);color:var(--on-accent)}.btn-break:hover{background:var(--break-hover);border-color:var(--break-hover)}.btn-hold{background:var(--hold-soft);border-color:var(--hold-border);color:var(--hold);flex:0 0 auto}.btn-hold:hover{background:var(--hold-hover)}.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--on-accent)}.btn-danger:hover{background:var(--danger-hover);border-color:var(--danger-hover)}.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted)}.btn-ghost:hover{background:var(--ghost-hover)}.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:var(--ghost-hover);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:var(--break-strong)}.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{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:18px 26px 24px}.help:focus{outline:none}.help-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 26px 14px;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 var(--callout-border)}.help-callout h3{color:var(--break)}.help-callout p{color:var(--callout-text)}.help-install{margin:0 0 10px;padding-left:20px;color:var(--text-muted);line-height:1.6}.help-actions{flex:none;display:flex;justify-content:flex-end;padding:14px 26px;background:var(--surface);border-top:1px solid var(--border)}@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),var(--shadow-dialog);background:var(--surface);color:var(--text)}.dialog::backdrop{background:var(--backdrop)}.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:var(--chip-hover)}.chip[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--on-accent)}.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}}