:root{--ink:#0f172a;--ink-muted:#475569;--ink-light:#94a3b8;--bg:#fff;--surface:#f8fafc;--surface-hover:#f1f5f9;--rule:#e2e8f0;--rule-strong:#cbd5e1;--accent:#155e75;--accent-hover:#0e7490;--accent-light:#ecfeff;--accent-ink:#fff;--success:#16a34a;--success-hover:#15803d;--success-light:#dcfce7;--error:#dc2626;--error-hover:#b91c1c;--font-size-sm:.875rem;--font-size-xs:.75rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--space-xs:.25rem;--space-sm:.5rem;--space-base:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-base:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--measure:60ch;scrollbar-color:var(--rule-strong) transparent;caret-color:var(--accent);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--ink:#f8fafc;--ink-muted:#94a3b8;--ink-light:#64748b;--bg:#0f172a;--surface:#1e293b;--surface-hover:#334155;--rule:#334155;--rule-strong:#475569;--accent:#22d3ee;--accent-hover:#06b6d4;--accent-light:#164e63;--accent-ink:#0f172a;--success:#4ade80;--success-hover:#22c55e;--success-light:#14532d;--error:#f87171;--error-hover:#ef4444}}*,:before,:after{box-sizing:border-box}html{overflow-x:clip}body{-webkit-font-smoothing:antialiased;color:var(--ink);background:var(--bg);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}.screen{min-height:100vh}p{text-wrap:pretty}h1,h2,h3{text-wrap:balance}::selection{background:var(--accent);color:var(--accent-ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:var(--accent);text-underline-offset:.18em}.num{font-variant-numeric:tabular-nums}button,[role=button],summary,select,input[type=checkbox],input[type=radio]{min-height:44px}button{min-width:44px}input,select,textarea{font:inherit;font-size:max(1rem,16px)}img,video,canvas,svg{max-width:100%;height:auto}pre{overflow-x:auto}.app-container{flex-direction:column;min-height:100vh;display:flex}.screen{padding:var(--space-lg) var(--space-base);flex:1;width:100%;max-width:48rem;margin:0 auto}.tab-bar{border-top:1px solid var(--rule);background:var(--bg);display:flex;position:sticky;bottom:0}.tab-button{padding:var(--space-base);color:var(--ink-muted);font-family:inherit;font-size:var(--font-size-sm);cursor:pointer;background:0 0;border:none;flex:1;font-weight:500;transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}.tab-button:hover{background:var(--surface-hover);color:var(--ink)}.tab-button.active{color:var(--accent);background:var(--accent-light)}h1{font-size:var(--font-size-2xl);margin-bottom:var(--space-xl);font-weight:700;line-height:1.3}h2{font-size:var(--font-size-xl);margin-bottom:var(--space-lg);font-weight:600;line-height:1.3}h3{font-size:var(--font-size-lg);margin-bottom:var(--space-sm);font-weight:600;line-height:1.3}.btn{padding:var(--space-sm) var(--space-base);cursor:pointer;border:none;border-radius:6px;font-family:inherit;font-size:1rem;font-weight:500;transition:all .15s cubic-bezier(.4,0,.2,1)}.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-base)}.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--rule-strong)}.btn-secondary:hover{background:var(--surface-hover)}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover{background:var(--error-hover)}.btn-icon{padding:var(--space-sm);color:var(--ink-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;transition:all .15s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-icon:hover{background:var(--surface-hover);color:var(--ink)}input[type=text],input[type=color]{padding:var(--space-sm) var(--space-base);border:1px solid var(--rule-strong);background:var(--bg);color:var(--ink);border-radius:6px;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}input[type=text]:focus,input[type=color]:focus{border-color:var(--accent);outline:none}input[type=color]{cursor:pointer;width:60px;padding:var(--space-xs)}label{font-size:var(--font-size-sm);color:var(--ink);margin-bottom:var(--space-xs);font-weight:600;display:block}.habit-list{gap:var(--space-base);flex-direction:column;display:flex}.habit-card{background:var(--surface);border:1px solid var(--rule);padding:var(--space-base);align-items:center;gap:var(--space-base);border-radius:8px;transition:box-shadow .15s cubic-bezier(.4,0,.2,1);display:flex}.habit-card:hover{box-shadow:var(--shadow-base)}.habit-indicator{border-radius:2px;flex-shrink:0;width:4px;height:48px}.habit-content{flex:1;min-width:0}.habit-name{font-size:var(--font-size-lg);color:var(--ink);margin-bottom:var(--space-xs);font-weight:600}.habit-meta{font-size:var(--font-size-sm);color:var(--ink-muted);gap:var(--space-base);align-items:center;display:flex}.streak{align-items:center;gap:var(--space-xs);color:var(--success);font-variant-numeric:tabular-nums;font-weight:600;display:inline-flex}.weekly-grid{gap:var(--space-xs);margin-top:var(--space-sm);grid-template-columns:repeat(7,1fr);display:grid}.day-cell{aspect-ratio:1;background:var(--surface-hover);border:1px solid var(--rule);font-size:var(--font-size-xs);color:var(--ink-light);font-variant-numeric:tabular-nums;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;display:flex}.day-cell.completed{background:var(--success-light);border-color:var(--success);color:var(--success);font-weight:600}.day-cell.today{border-width:2px;border-color:var(--accent)}.day-cell.today.completed{border-color:var(--success)}.checkbox-container{cursor:pointer;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:background-color .15s cubic-bezier(.4,0,.2,1);display:inline-flex}.checkbox-container:hover{background:var(--surface-hover)}.checkbox{appearance:none;border:2px solid var(--rule-strong);cursor:pointer;border-radius:6px;width:32px;height:32px;margin:0;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative}.checkbox:checked{background:var(--success);border-color:var(--success)}.checkbox:checked:after{content:"✓";color:#fff;font-size:1.25rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.checkbox:hover{border-color:var(--accent)}.empty-state{text-align:center;padding:var(--space-2xl) var(--space-base)}.empty-icon{color:var(--ink-light);margin-bottom:var(--space-base);font-size:4rem}.empty-title{font-size:var(--font-size-xl);color:var(--ink);margin-bottom:var(--space-sm);font-weight:600}.empty-text{color:var(--ink-muted);margin-bottom:var(--space-xl);font-size:1rem}.form-group{margin-bottom:var(--space-lg)}.form-row{gap:var(--space-base);align-items:end;display:flex}.form-row .form-group{flex:1}.form-row .form-group:last-child{margin-bottom:0}.modal-overlay{z-index:1000;padding:var(--space-base);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg);padding:var(--space-xl);width:100%;max-width:32rem;box-shadow:var(--shadow-md);border-radius:12px}.modal-header{margin-bottom:var(--space-lg);justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:var(--font-size-xl);color:var(--ink);font-weight:600}.modal-actions{gap:var(--space-sm);margin-top:var(--space-xl);justify-content:flex-end;display:flex}@media (width<=480px){.screen{padding-inline:1rem}}@media (width>=640px){.screen{padding:var(--space-xl) var(--space-lg)}.tab-bar{border-top:none;border-bottom:1px solid var(--rule);justify-content:center;gap:var(--space-sm);position:static}.tab-button{border-radius:6px;flex:0 auto;min-width:120px}.weekly-grid{gap:var(--space-sm)}}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}@media (width<=480px){body,.container,[class*=container],section,header,footer,nav,main,article{padding-inline:max(1rem,16px)}}