:root{--bg: #ffffff;--fg: #1a1a1a;--muted: #6b7280;--border: #e5e7eb;--surface: #f9fafb;--accent: #4e79a7;--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:light dark}@media (prefers-color-scheme: dark){:root{--bg: #111315;--fg: #f3f4f6;--muted: #9ca3af;--border: #2b2f33;--surface: #171a1d}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased}.muted{color:var(--muted)}.error{color:#b91c1c}@media (prefers-color-scheme: dark){.error{color:#f87171}}.toasts{position:fixed;z-index:40;left:1rem;right:1rem;bottom:calc(4.75rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;pointer-events:none}@media (min-width: 768px){.toasts{right:auto;bottom:calc(1.25rem + env(safe-area-inset-bottom));max-width:28rem}}.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;max-width:100%;padding:.6rem .7rem .6rem .85rem;font-size:.9rem;line-height:1.35;color:#fff;background:#99231f;border-radius:8px;box-shadow:0 8px 24px #00000059;animation:toast-in .16s ease-out}.toast-text{min-width:0;overflow-wrap:anywhere}.toast-close{flex:none;font:inherit;font-size:.8rem;line-height:1.35;color:inherit;background:none;border:none;padding:0 .15rem;opacity:.8;cursor:pointer}.toast-close:hover{opacity:1}@keyframes toast-in{0%{opacity:0;transform:translateY(.5rem)}}.spinner-wrap{display:inline-flex;align-items:center;gap:.5rem}.spinner{flex:none;width:1.15rem;height:1.15rem;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}.spinner-wrap.small .spinner{width:.9rem;height:.9rem;border-width:2px}@keyframes spin{to{transform:rotate(1turn)}}.skeleton-box{background:var(--border);cursor:default;animation:skeleton-pulse 1.6s ease-in-out infinite alternate}@keyframes skeleton-pulse{0%{opacity:.55}to{opacity:.9}}@media (prefers-reduced-motion: reduce){.toast,.skeleton-box{animation:none}.spinner{animation-duration:2s}}.signin{display:flex;align-items:center;justify-content:center;height:100%;padding:24px}.signin-card{text-align:center;max-width:22rem}.signin-card h1{margin:0 0 .25rem;font-size:2rem;letter-spacing:-.02em}.signin-card p{margin:0 0 1.5rem}button.primary{font:inherit;font-weight:600;color:#fff;background:#4e79a7;border:none;border-radius:8px;padding:.6rem 1.4rem;cursor:pointer}button.primary:hover:not(:disabled){background:#43678f}button.primary:disabled{opacity:.6;cursor:default}button.link{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}.app-shell{display:flex;flex-direction:column;height:100%}.app-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1rem;border-bottom:1px solid var(--border)}.brand{font-weight:600;letter-spacing:-.01em}.app-header-right{display:flex;align-items:center;gap:1rem;font-size:.9rem;min-width:0}.app-header-right>.muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-header a{color:inherit}.app-main{flex:1;min-height:0;display:flex;flex-direction:column}.page-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:24px;text-align:center}.treemap-page{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.treemap{position:relative;flex:1;min-height:0}.treemap-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center;padding:24px}.area-box{position:absolute;display:flex;flex-direction:column;justify-content:space-between;gap:.25rem;padding:.5rem .6rem;border-radius:6px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease}.area-box.dragging,.treemap.no-anim .area-box{transition:none}.area-box.dragging{z-index:5;box-shadow:0 12px 30px #00000059}@media (prefers-reduced-motion: reduce){.area-box{transition:none}}.area-box:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.area-box-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.4rem;min-width:0;overflow:hidden;padding-right:1.2rem}.area-box-name{font-weight:600;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.area-box.compact{padding:.3rem .35rem;font-size:.75rem}.area-badge{flex:none;font-size:.75rem;line-height:1;padding:.15rem .35rem;min-width:1.25rem;text-align:center;border:1px solid currentColor;border-radius:999px}.area-box-pct{font-size:.8rem;opacity:.8}.area-edit{position:absolute;top:.15rem;right:.25rem;font:inherit;font-size:.9rem;line-height:1;padding:.2rem .3rem;background:none;border:none;border-radius:4px;cursor:pointer;opacity:0}.area-box:hover .area-edit,.area-box:focus-within .area-edit,.area-edit:focus-visible{opacity:.85}@media (hover: none){.area-edit{opacity:.7}}.area-resize{position:absolute;right:0;bottom:0;width:26px;height:26px;cursor:nwse-resize;touch-action:none;opacity:0}.area-resize:after{content:"";position:absolute;right:5px;bottom:5px;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;border-bottom-right-radius:4px}.area-box:hover .area-resize,.area-resize.active{opacity:.9}@media (max-width: 767px){.area-resize{display:none}}.area-popover{position:absolute;z-index:10;width:15rem;max-width:calc(100vw - 16px);display:flex;flex-direction:column;gap:.6rem;padding:.7rem;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px #00000040;cursor:default;text-align:left;font-size:.9rem}.area-popover-confirm{margin:0}.area-popover-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.area-popover .error{margin:0;font-size:.85rem}.fab{position:absolute;right:1.25rem;bottom:1.25rem;z-index:10;width:3rem;height:3rem;font:inherit;font-size:1.75rem;line-height:1;color:#fff;background:#4e79a7;border:none;border-radius:999px;box-shadow:0 4px 14px #0000004d;cursor:pointer}.fab:hover:not(:disabled){background:#43678f}.fab:disabled,.adjust-sizes:disabled{opacity:.5;cursor:default}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:#00000073}.modal{width:24rem;max-width:100%;max-height:100%;overflow-y:auto;padding:1.1rem 1.2rem 1.2rem;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 36px #00000059}.modal h2{margin:0 0 .8rem;font-size:1.1rem}.modal form{display:flex;flex-direction:column;gap:.8rem}.modal .error{margin:0;font-size:.85rem}.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}.modal-actions.between{justify-content:space-between;gap:.75rem}.modal input,.modal textarea,.modal select,.area-popover input,.detail-body input:not([type=checkbox]),.detail-body textarea,.detail-body select{font:inherit;width:100%;padding:.45rem .6rem;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:6px}.modal input:focus-visible,.modal textarea:focus-visible,.modal select:focus-visible,.detail-body input:focus-visible,.detail-body textarea:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}.name-row{display:flex;align-items:center;gap:.4rem}.name-row input{flex:1;min-width:0}button.primary.small{flex:none;font-size:.85rem;padding:.4rem .7rem;border-radius:6px}.swatches{display:flex;flex-wrap:wrap;gap:.35rem}.swatch{width:1.4rem;height:1.4rem;padding:0;border:1px solid var(--border);border-radius:4px;cursor:pointer}.swatch.selected{outline:2px solid var(--fg);outline-offset:1px}.swatch.custom{position:relative;display:inline-block;overflow:hidden;background:conic-gradient(#b8618c,#b86c61,#b8a161,#78b861,#61b8b5,#6189b8,#7561b8,#a461b8,#b8618c)}.swatch.custom input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:0;border:none;background:none;opacity:0;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.swatch:disabled,button.link:disabled,button.danger:disabled,button.danger-solid:disabled{opacity:.6;cursor:default}button.danger{color:#b91c1c}@media (prefers-color-scheme: dark){button.danger{color:#f87171}}button.danger-solid{font:inherit;font-weight:600;color:#fff;background:#b91c1c;border:none;border-radius:6px;padding:.35rem .8rem;cursor:pointer}.adjust-sizes{position:absolute;left:1.25rem;bottom:1.25rem;z-index:10;font:inherit;font-size:.9rem;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:.55rem 1rem;box-shadow:0 4px 14px #00000040;cursor:pointer}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:flex-end;background:#00000073}.sheet{width:100%;max-height:80%;overflow-y:auto;display:flex;flex-direction:column;gap:.9rem;padding:.9rem 1rem calc(1rem + env(safe-area-inset-bottom));background:var(--bg);color:var(--fg);border-top:1px solid var(--border);border-radius:14px 14px 0 0;box-shadow:0 -8px 30px #00000059}.sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.sheet-head h2{margin:0;font-size:1.05rem}.sheet-row{display:flex;flex-direction:column;gap:.35rem}.sheet-row-head{display:flex;align-items:center;gap:.5rem;font-size:.95rem}.sheet-dot{flex:none;width:.8rem;height:.8rem;border-radius:3px}.sheet-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sheet-pct{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}.sheet input[type=range]{width:100%;margin:0;touch-action:none;accent-color:#4e79a7}.sheet-note,.sheet .error{margin:0;font-size:.85rem}.detail-page{flex:1;min-height:0;display:flex;flex-direction:column}.detail-head{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--border)}.detail-back{font-size:1.1rem;line-height:1;color:inherit;text-decoration:none;padding:.2rem .35rem;border-radius:6px}.detail-back:hover{background:var(--border)}.detail-dot{flex:none;width:.9rem;height:.9rem;border-radius:3px}.detail-name{margin:0;min-width:0;font-size:1.15rem;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail-open{margin-left:auto;flex:none;font-size:.8rem;line-height:1;padding:.3rem .55rem;border:1px solid var(--border);border-radius:999px;white-space:nowrap}.detail-body{flex:1;min-height:0;overflow-y:auto;width:100%;max-width:42rem;margin:0 auto;padding:1rem 1rem calc(2rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:1rem}.detail-empty{margin:0;font-size:.9rem;line-height:1.45}.subtopic{display:flex;flex-direction:column;padding:.5rem .75rem .35rem;background:var(--surface);border:1px solid var(--border);border-radius:10px}.subtopic-head{display:flex;align-items:center;gap:.45rem;min-height:2rem}.subtopic-name{margin:0;min-width:0;font-size:.95rem;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subtopic-count{flex:none;font-size:.7rem;line-height:1;padding:.2rem .4rem;color:var(--muted);border:1px solid var(--border);border-radius:999px}.subtopic-actions{display:flex;align-items:center;gap:.1rem;margin-left:auto}.subtopic-head .name-row{flex:1}button.icon-button{font:inherit;font-size:.85rem;line-height:1;color:var(--muted);background:none;border:none;border-radius:4px;padding:.3rem .35rem;cursor:pointer;opacity:.45}.subtopic:hover button.icon-button,.subtopic:focus-within button.icon-button,button.icon-button:focus-visible{opacity:1}@media (hover: none){button.icon-button{opacity:.7}}button.icon-button:disabled{cursor:default}.subtopic-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.9rem}.subtopic .error{margin:.3rem 0 0;font-size:.85rem}.completed-toggle{align-self:flex-start;margin:.35rem 0 .1rem;font-size:.8rem;color:var(--muted);text-decoration:none}.completed-toggle:hover{color:var(--fg)}.task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.task{display:flex;align-items:flex-start;gap:.55rem;padding:.45rem .25rem;margin:0 -.25rem;border-radius:6px;border-top:1px solid var(--border)}.task:first-child{border-top:none}.task:hover{background:var(--bg)}.task-check{flex:none;width:1.15rem;height:1.15rem;margin:.1rem 0 0;accent-color:#4e79a7;cursor:pointer}.task-check:disabled{cursor:default}.task-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;font:inherit;color:inherit;text-align:left;background:none;border:none;padding:0;cursor:pointer}.task-body:disabled{cursor:default}.task-title{line-height:1.35;overflow-wrap:anywhere}.task-rec{margin-right:.3rem;color:var(--muted)}.task-notes{font-size:.85rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task.done .task-title{text-decoration:line-through;color:var(--muted)}.chip{flex:none;margin-top:.1rem;font-size:.75rem;line-height:1;padding:.25rem .45rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;white-space:nowrap}.chip-overdue{color:#b91c1c;border-color:currentColor}.chip-today{color:#b45309;border-color:currentColor}@media (prefers-color-scheme: dark){.chip-overdue{color:#f87171}.chip-today{color:#fbbf24}}.quick-add{display:flex;flex-direction:column;gap:.2rem;padding-top:.15rem}.quick-add-row{display:flex;align-items:center;gap:.45rem}.quick-add-plus{flex:none;width:1.15rem;text-align:center;font-size:1.1rem;line-height:1;color:var(--muted)}.detail-body .quick-add-input{padding:.35rem .2rem;background:none;border:none;border-radius:0;border-bottom:1px solid transparent}.detail-body .quick-add-input:hover{border-bottom-color:var(--border)}.detail-body .quick-add-input:focus,.detail-body .quick-add-input:focus-visible{border-bottom-color:var(--accent);outline:none}.quick-add-hint,.quick-add .error{margin:0 0 .15rem 1.6rem;font-size:.8rem}.quick-add-more{flex:none}.add-subtopic{display:flex;flex-direction:column;gap:.4rem;padding-top:.2rem}.add-subtopic .error{margin:0;font-size:.85rem}.modal .field{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}.modal .field>input,.modal .field>textarea,.modal .field>select{font-size:1rem;color:var(--fg)}.modal textarea{resize:vertical}.modal .hint{margin:0;font-size:.8rem}.rec{display:flex;flex-direction:column;gap:.5rem;color:var(--fg)}.segmented{display:flex;flex-wrap:wrap;gap:.3rem}button.segment{font:inherit;font-size:.85rem;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:.3rem .6rem;cursor:pointer}button.segment.selected{color:#fff;background:#4e79a7;border-color:#4e79a7}.rec-field{display:flex;align-items:center;gap:.4rem;font-size:.9rem}.rec-field input{width:4.5rem}.weekday-chips{display:flex;gap:.25rem}button.weekday-chip{flex:1;font:inherit;font-size:.85rem;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.35rem 0;cursor:pointer}button.weekday-chip.selected{color:#fff;background:#4e79a7;border-color:#4e79a7}button.segment:disabled,button.weekday-chip:disabled{opacity:.6;cursor:default}