:root{--bg: #f5f5f8;--surface: #ffffff;--surface-2: #f0f0f4;--border: #e7e7ee;--border-strong: #d7d7e0;--text: #1a1a22;--muted: #71717f;--accent: #6d4ad6;--accent-weak: #efeafc;--green: #1aa251;--red: #e0463c;--p-high: #e0463c;--p-mid: #ef8d2e;--p-low: #3a6df0;--grad: linear-gradient(120deg, #3a6df0 0%, #7c3aed 52%, #e23a6e 100%);--shadow-sm: 0 1px 2px rgba(20, 20, 40, .05);--shadow-md: 0 8px 26px -14px rgba(40, 30, 90, .28);--shadow-lg: 0 18px 50px -18px rgba(30, 20, 70, .45);--r: 14px;--sidebar-w: 244px;font-synthesis:none}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}html,body{margin:0;min-height:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Hiragino Sans,Noto Sans JP,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.45}button{font-family:inherit;cursor:pointer}svg{display:block}.boot{display:grid;place-items:center;min-height:100dvh;color:var(--muted)}.signin{display:grid;place-items:center;min-height:100dvh;padding:24px}.signin-card{width:100%;max-width:360px;text-align:center}.signin-card h1{font-size:clamp(34px,8.5vw,44px);margin:0 0 30px;letter-spacing:-.03em;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.muted{color:var(--muted);margin:0 0 32px;font-size:15px}.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:12px;padding:13px 16px;font-size:15px;font-weight:500;letter-spacing:.01em;box-shadow:0 1px 2px #3c40431a;transition:background .15s ease,box-shadow .15s ease,border-color .15s ease}.btn-google:hover{background:#f7f8fa;border-color:#d0d3d9;box-shadow:0 1px 3px #3c40432e}.btn-google:active{background:#f1f3f6}.g-logo{flex:none}.btn-primary{display:inline-flex;align-items:center;gap:9px;width:100%;justify-content:center;background:var(--grad);color:#fff;border:none;border-radius:13px;padding:15px 20px;font-size:15.5px;font-weight:650;box-shadow:var(--shadow-md);transition:transform .08s ease,filter .18s ease}.btn-primary:hover{filter:brightness(1.04)}.btn-primary:active{transform:translateY(1px)}.dev-note{margin-top:18px;font-size:12px;color:var(--muted)}.layout{display:flex;min-height:100dvh}.sidebar{width:var(--sidebar-w);flex:none;align-self:flex-start;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);padding:calc(env(safe-area-inset-top) + 14px) 12px 12px}.side-brand{display:flex;align-items:center;gap:9px;padding:4px 10px 14px}.side-brand h1{font-size:21px;margin:0;letter-spacing:-.025em;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.side-nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px}.nav-section{font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:14px 10px 6px}.nav-item{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:none;color:var(--text);border-radius:9px;padding:9px 10px;font-size:14.5px;text-align:left;transition:background .14s ease,color .14s ease}.nav-item:hover{background:var(--surface-2)}.nav-item.active{background:var(--accent-weak);color:var(--accent)}.nav-item.active svg{color:var(--accent)}.nav-main{display:flex;align-items:center;gap:9px;flex:1;min-width:0;background:none;border:none;color:inherit;font:inherit;text-align:left;padding:0}.nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-count{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent);border-radius:999px;padding:0 7px;min-width:20px;text-align:center}.nav-item.active .nav-count{color:var(--accent);background:#fff}.nav-act{flex:none;background:none;border:none;color:var(--muted);padding:3px;border-radius:6px;display:grid;place-items:center;opacity:0;transition:opacity .14s ease,color .14s ease,background .14s ease}.nav-item:hover .nav-act{opacity:1}.nav-act:hover{color:var(--text);background:var(--surface-2)}.nav-del:hover{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}.confirm{display:inline-flex;gap:4px}.confirm-yes,.confirm-no{border:none;border-radius:6px;font-size:11.5px;padding:3px 7px}.confirm-yes{background:var(--red);color:#fff}.confirm-no{background:var(--surface-2);color:var(--muted)}.nav-add{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:none;color:var(--muted);border-radius:9px;padding:9px 10px;font-size:13.5px;margin-top:2px;transition:background .14s ease,color .14s ease}.nav-add:hover{background:var(--surface-2);color:var(--text)}.nav-edit,.add-project input{width:100%;background:var(--surface);border:1px solid var(--accent);color:var(--text);border-radius:8px;padding:8px 10px;font-size:14px;outline:none;box-shadow:0 0 0 3px var(--accent-weak)}.add-project{margin-top:2px}.side-bottom{margin-top:auto;padding-top:10px;border-top:1px solid var(--border)}.logout-sm{display:inline-flex;align-items:center;gap:7px;background:none;border:none;color:var(--muted);font-size:12.5px;padding:7px 10px;border-radius:8px;transition:background .14s ease,color .14s ease}.logout-sm:hover{background:var(--surface-2);color:var(--text)}.main{flex:1;min-width:0}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 14px) 20px 12px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}.page-title{font-size:20px;font-weight:750;letter-spacing:-.02em;margin:0}.page-title.editable{cursor:text;border-radius:8px;padding:2px 7px;margin:-2px -7px;transition:background .14s ease}.page-title.editable:hover{background:var(--surface-2)}.page-title-edit{font-size:20px;font-weight:750;letter-spacing:-.02em;color:var(--text);background:var(--surface);border:1px solid var(--accent);border-radius:8px;padding:2px 7px;margin:-3px 0;outline:none;box-shadow:0 0 0 3px var(--accent-weak);min-width:0;max-width:60vw}.icon-btn{background:transparent;border:none;color:var(--muted);padding:8px;border-radius:10px;display:grid;place-items:center;transition:background .15s ease,color .15s ease}.icon-btn:hover{background:var(--surface-2);color:var(--text)}.menu-btn{display:none}.status-dot{width:9px;height:9px;border-radius:999px;flex:none;cursor:default}.status-dot.online{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)}.status-dot.offline{background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent)}.content{max-width:680px;margin:0 auto;padding:8px 20px calc(env(safe-area-inset-bottom) + 40px)}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#14122852;z-index:18}.addbar{display:flex;gap:9px;margin-bottom:16px}.addbar input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);border-radius:12px;padding:13px 15px;font-size:16px;outline:none;box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .15s ease}.addbar input::placeholder{color:var(--muted)}.addbar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}.btn-add{flex:none;background:var(--grad);color:#fff;border:none;border-radius:12px;width:48px;display:grid;place-items:center;box-shadow:var(--shadow-md);transition:transform .08s ease,filter .18s ease,opacity .15s ease}.btn-add:hover{filter:brightness(1.05)}.btn-add:active{transform:translateY(1px)}.btn-add:disabled{opacity:.38;box-shadow:none;filter:none}.filters{display:flex;gap:6px;margin-bottom:16px;background:var(--surface-2);padding:4px;border-radius:12px}.filter{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;color:var(--muted);border-radius:9px;padding:8px 10px;font-size:13.5px;font-weight:550;transition:background .15s ease,color .15s ease,box-shadow .15s ease}.filter:hover{color:var(--text)}.filter.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}.filter .count{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent);border-radius:999px;padding:0 6px;min-width:18px;text-align:center}.filter.active .count{color:var(--accent);background:var(--accent-weak)}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.item{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:7px 12px 7px 6px;box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .15s ease}.item:hover{border-color:var(--border-strong)}.item.dragging{box-shadow:var(--shadow-lg);border-color:var(--accent)}.item.done{background:#fbfbfd}.item.done .title{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 55%,transparent)}.drag{flex:none;background:none;border:none;color:var(--border-strong);padding:4px 2px;display:grid;place-items:center;cursor:grab;touch-action:none;transition:color .14s ease,opacity .14s ease}.drag:active{cursor:grabbing}.drag:hover{color:var(--muted)}.check{flex:none;width:23px;height:23px;border-radius:999px;border:2px solid var(--border-strong);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;padding:0;color:#fff;transition:background .14s ease,border-color .14s ease}.check:hover{border-color:var(--accent)}.check .check-icon{opacity:0;transition:opacity .12s ease}.check.checked{background:var(--accent);border-color:var(--accent)}.check.checked .check-icon{opacity:1}.item-body{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:none;padding:2px 0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}.item.p-high{background:color-mix(in srgb,var(--p-high) 7%,var(--surface));border-color:color-mix(in srgb,var(--p-high) 34%,var(--border))}.item.p-mid{background:color-mix(in srgb,var(--p-mid) 9%,var(--surface));border-color:color-mix(in srgb,var(--p-mid) 38%,var(--border))}.item.p-low{background:color-mix(in srgb,var(--p-low) 7%,var(--surface));border-color:color-mix(in srgb,var(--p-low) 34%,var(--border))}.item.p-high:hover{border-color:color-mix(in srgb,var(--p-high) 55%,var(--border))}.item.p-mid:hover{border-color:color-mix(in srgb,var(--p-mid) 58%,var(--border))}.item.p-low:hover{border-color:color-mix(in srgb,var(--p-low) 55%,var(--border))}.check.p-high{border-color:var(--p-high)}.check.p-mid{border-color:var(--p-mid)}.check.p-low{border-color:var(--p-low)}.check.p-high.checked{background:var(--p-high);border-color:var(--p-high)}.check.p-mid.checked{background:var(--p-mid);border-color:var(--p-mid)}.check.p-low.checked{background:var(--p-low);border-color:var(--p-low)}.title{min-width:0;font-size:15.5px;word-break:break-word}.proj-chip{flex:none;font-size:11px;color:var(--accent);background:var(--accent-weak);border-radius:999px;padding:1px 8px;white-space:nowrap}.edit{flex:1;min-width:0;background:var(--surface);border:1px solid var(--accent);color:var(--text);border-radius:9px;padding:6px 9px;font-size:15.5px;outline:none;box-shadow:0 0 0 3px var(--accent-weak)}.del{flex:none;background:transparent;border:none;color:var(--muted);padding:5px;border-radius:9px;display:grid;place-items:center;transition:opacity .15s ease,background .15s ease,color .15s ease}.del:hover{background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red)}@media (hover: hover){.drag{opacity:0}.item:hover .drag,.drag:focus-visible{opacity:1}}.empty{text-align:center;color:var(--muted);margin-top:56px;font-size:14.5px}@media (max-width: 767px){.menu-btn{display:grid}.sidebar{position:fixed;top:0;left:0;z-index:20;width:min(82vw,300px);transform:translate(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg)}.sidebar.open{transform:translate(0)}.content{padding-left:16px;padding-right:16px}.topbar{padding-left:14px;padding-right:14px}.del,.drag,.nav-act{opacity:1}}@media (min-width: 768px){.scrim{display:none}}.modal-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#14122857;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:18px}.modal{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:16px 18px 18px;animation:pop .14s ease}@keyframes pop{0%{transform:translateY(6px) scale(.985);opacity:0}to{transform:none;opacity:1}}.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.modal-head-label{flex:1;font-size:13px;font-weight:650;color:var(--muted);letter-spacing:.02em}.modal-title{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:11px;padding:11px 12px;font:inherit;font-size:16px;color:var(--text);outline:none;margin-bottom:16px}.modal-title:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}.field{display:block;margin-bottom:16px}.field-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}.field-select{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;color:var(--text);outline:none}.field-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}.prio-group{display:flex;gap:8px}.prio{flex:1;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--muted);border-radius:10px;padding:9px 8px;font-size:13.5px;font-weight:600;transition:all .14s ease}.prio-high.active{background:color-mix(in srgb,var(--p-high) 12%,white);border-color:var(--p-high);color:var(--p-high)}.prio-mid.active{background:color-mix(in srgb,var(--p-mid) 14%,white);border-color:var(--p-mid);color:var(--p-mid)}.prio-low.active{background:color-mix(in srgb,var(--p-low) 12%,white);border-color:var(--p-low);color:var(--p-low)}.modal-foot{display:flex;justify-content:flex-end;margin-top:4px}.modal-del{display:inline-flex;align-items:center;gap:7px;background:none;border:none;color:var(--muted);font-size:13.5px;padding:8px 10px;border-radius:9px;transition:background .14s ease,color .14s ease}.modal-del:hover{background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red)}