:root{--accent-primary: #2563eb;--accent-light: #3b82f6;--bg: #f7f8fa;--surface: #ffffff;--surface-2: #f0f2f5;--border: #e2e5ea;--text: #1a1c20;--text-muted: #6b7280;--danger: #dc2626;--radius: 8px;--icon-bar-size: 56px}@media(prefers-color-scheme:dark){:root{--bg: #16181d;--surface: #1e2127;--surface-2: #262a31;--border: #333842;--text: #e8eaed;--text-muted: #9aa0aa}}*{box-sizing:border-box}html,body,#root{block-size:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.app{display:flex;block-size:100vh}.icon-bar{inline-size:var(--icon-bar-size);flex:0 0 var(--icon-bar-size);background:var(--surface);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:4px;padding-block:12px}.icon-brand{color:var(--accent-primary);font-size:20px;margin-block-end:12px}.icon-btn{inline-size:40px;block-size:40px;display:grid;place-items:center;font-size:20px;background:transparent;border:none;border-radius:var(--radius);cursor:pointer;color:var(--text)}.icon-btn:hover:not(:disabled){background:var(--surface-2)}.icon-btn.is-active{background:color-mix(in srgb,var(--accent-primary) 18%,transparent)}.icon-btn:disabled{opacity:.35;cursor:default}.icon-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.main{flex:1;display:flex;flex-direction:column;min-inline-size:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding-inline:20px;padding-block:10px;background:var(--surface);border-block-end:1px solid var(--border)}.topbar .brand-name{font-weight:700;color:var(--accent-primary)}.topbar-right{display:flex;align-items:center;gap:14px}.user-ws{font-weight:600}.user-name{color:var(--text-muted)}.content{flex:1;overflow:auto;padding:24px}.view{max-inline-size:760px;margin-inline:auto}.view-header h1{font-size:22px;margin-block:0 16px}.view-footer{color:var(--text-muted);margin-block-start:12px;font-size:13px}.task-group{margin-block-end:24px}.group-header{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);display:flex;align-items:center;justify-content:space-between;margin-block:0 8px}.group-count{color:var(--text-muted)}.empty-state{text-align:center;padding-block:48px;color:var(--text-muted)}.empty-title{font-size:17px;font-weight:600;color:var(--text);margin-block:0 4px}.muted{color:var(--text-muted)}.quick-add{margin-block-end:20px}.quick-add-input{inline-size:100%;padding:12px 14px;font-size:15px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text)}.quick-add-input:focus-visible{outline:2px solid var(--accent-primary);outline-offset:1px}.quick-add-hint{font-size:12px;color:var(--text-muted);margin-block:4px 0}.quick-add-preview{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:8px}.chip{font-size:12px;padding-inline:8px;padding-block:2px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2)}.chip.is-matched{border-color:var(--accent-primary);color:var(--accent-primary)}.chip.is-unmatched{opacity:.6;border-style:dashed}.context-chip{background:transparent}.task-list{list-style:none;margin:0;padding:0}.task-row{display:flex;align-items:flex-start;gap:10px;padding-block:10px;padding-inline:4px;border-block-end:1px solid var(--border)}.task-row.is-done .task-title{text-decoration:line-through;color:var(--text-muted)}.task-check{margin-block-start:3px;inline-size:16px;block-size:16px}.task-star{background:none;border:none;cursor:pointer;font-size:17px;color:var(--text-muted);padding:0;line-height:1.3}.task-star.is-on{color:#f5b301}.task-star:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:4px}.task-body{flex:1;min-inline-size:0}.task-title{display:block}.task-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);margin-block-start:2px}.task-project{font-weight:600}.task-due.is-overdue{color:var(--danger);font-weight:600}.task-process,.new-project input,.lang-switch select{font:inherit;font-size:13px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);padding-inline:6px;padding-block:3px}.task-delete{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;padding-inline:4px}.task-delete:hover{color:var(--danger)}.projects-layout{display:flex;gap:24px;align-items:flex-start}.project-list{inline-size:220px;flex:0 0 220px}.project-list ul{list-style:none;margin:0;padding:0}.project-item{inline-size:100%;text-align:start;background:none;border:none;cursor:pointer;padding-block:8px;padding-inline:10px;border-radius:var(--radius);color:var(--text)}.project-item:hover{background:var(--surface-2)}.project-item.is-active{background:color-mix(in srgb,var(--accent-primary) 15%,transparent);font-weight:600}.new-project{display:flex;gap:6px;margin-block-start:12px}.new-project input{flex:1}.project-detail{flex:1;min-inline-size:0}.project-detail-header{display:flex;align-items:baseline;justify-content:space-between;margin-block-end:12px}.project-detail-header h2{margin:0;font-size:18px}.btn{font:inherit;cursor:pointer;padding-inline:14px;padding-block:8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text)}.btn-primary{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.link-btn{background:none;border:none;color:var(--accent-primary);cursor:pointer;font:inherit}.auth-loading{display:grid;place-items:center;color:var(--text-muted)}.login-gate{display:grid;place-items:center}.login-card{background:var(--surface);padding:40px;border-radius:16px;border:1px solid var(--border);text-align:center;max-inline-size:360px}.brand{display:inline-flex;align-items:center;gap:8px}.brand-lg{font-size:26px}.brand-mark{color:var(--accent-primary)}.brand-name{font-weight:700}.tagline{color:var(--text-muted);margin-block:8px 24px}.login-btn{display:inline-block;text-decoration:none}.login-note{font-size:12px;color:var(--text-muted);margin-block-start:16px}@media(max-width:640px){.projects-layout{flex-direction:column}.project-list{inline-size:100%;flex-basis:auto}.content{padding:16px}}