:root{color-scheme:light;--font-ui: "SF Pro Text", "Avenir Next", "Helvetica Neue", "Segoe UI", Arial, sans-serif;--font-display: "SF Pro Display", "Avenir Next", "Helvetica Neue", "Segoe UI", Arial, sans-serif;--bg: #f3f6fb;--bg-elevated: rgba(252, 253, 255, .96);--surface: rgba(252, 253, 255, .84);--surface-strong: rgba(255, 255, 255, .98);--surface-muted: rgba(244, 247, 252, .92);--border: rgba(79, 94, 117, .12);--border-strong: rgba(79, 94, 117, .18);--text: #1d2733;--muted: #677485;--accent: #496ad6;--accent-strong: #3553b5;--accent-soft: rgba(73, 106, 214, .12);--success: #4e6fb1;--success-soft: rgba(78, 111, 177, .12);--danger: #b45f74;--danger-soft: rgba(180, 95, 116, .12);--shadow-sm: 0 10px 28px rgba(41, 49, 56, .06);--shadow-md: 0 18px 40px rgba(41, 49, 56, .08);--radius-card: 24px;--radius-control: 18px;--radius-small: 14px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--content-width: 32rem;--control-height: 52px;--header-offset: calc(max(env(safe-area-inset-top, 0px), 18px) + 10px) ;--bottom-offset: calc(env(safe-area-inset-bottom, 0) + 10px) ;font-family:var(--font-ui);font-synthesis:none;line-height:1.4;font-weight:400;background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,transparent 28%),linear-gradient(180deg,#f7f9fd,#f2f5fb 54%,#edf1f8);color:var(--text);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root[data-theme=dark]{color-scheme:dark;--bg: #0f1623;--bg-elevated: rgba(19, 28, 43, .96);--surface: rgba(22, 31, 46, .88);--surface-strong: rgba(22, 31, 46, .98);--surface-muted: rgba(17, 24, 37, .92);--border: rgba(130, 146, 170, .16);--border-strong: rgba(130, 146, 170, .24);--text: #f2f5fa;--muted: #a3afc0;--accent: #7d96ff;--accent-strong: #a2b5ff;--accent-soft: rgba(125, 150, 255, .16);--success: #89a1e8;--success-soft: rgba(137, 161, 232, .16);--danger: #d68aa2;--danger-soft: rgba(214, 138, 162, .16);--shadow-sm: 0 14px 30px rgba(0, 0, 0, .24);--shadow-md: 0 24px 48px rgba(0, 0, 0, .32);background:linear-gradient(180deg,rgba(125,150,255,.08) 0%,transparent 24%),linear-gradient(180deg,#101826,#0d1420 48%,#0a1018)}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}html{background:var(--bg)}body{min-width:320px;background:var(--bg);color:var(--text);overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}body,button,input,select,textarea{font:inherit}button{cursor:pointer}button,input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}input,select,textarea{font-size:16px}img,svg{max-width:100%}.app-shell{min-height:100dvh;display:flex;flex-direction:column;padding-top:var(--header-offset);padding-bottom:env(safe-area-inset-bottom,0)}.app-main{flex:1;width:min(100%,var(--content-width));margin:0 auto;padding:0 var(--space-4) calc(116px + env(safe-area-inset-bottom,0));scroll-padding-top:calc(var(--header-offset) + 88px);scroll-padding-bottom:calc(116px + env(safe-area-inset-bottom,0))}.onboarding-shell{padding-top:max(20px,var(--header-offset))}.onboarding-main{display:grid;align-items:center;min-height:calc(100dvh - var(--header-offset));padding-bottom:var(--space-6)}.onboarding-card,.panel,.habit-card,.progress-card,.detail-sheet{border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.onboarding-card{display:grid;gap:var(--space-6);padding:var(--space-6);background:var(--surface-strong)}.onboarding-progress{display:flex;gap:var(--space-2)}.onboarding-dot{width:8px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--muted) 28%,transparent)}.onboarding-dot.active{width:20px;background:var(--accent)}.onboarding-copy{display:grid;gap:var(--space-3)}.onboarding-copy h1,.screen-header h1{margin:0;font-family:var(--font-display);letter-spacing:-.035em;line-height:1.04;font-weight:500}.onboarding-copy h1{font-size:clamp(2rem,8vw,2.6rem)}.onboarding-text{margin:0;color:var(--muted);font-size:1rem;line-height:1.48}.onboarding-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.screen-header{position:relative;margin-bottom:var(--space-5);padding:var(--space-4) var(--space-5);background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}.screen-header-copy{display:grid;gap:var(--space-1)}.screen-header h1{font-size:clamp(1.9rem,7vw,2.5rem)}.eyebrow{margin:0;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.subtle,.habit-meta,.habit-note,.progress-card-header p,.toggle-row small,.comparison-line,.empty-state p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.45}.panel,.detail-sheet{padding:var(--space-5)}.panel h2,.empty-state h2{margin:0;font-size:1.02rem;font-weight:600;letter-spacing:-.015em}.screen-section,.habit-list,.habit-section,.progress-list,.settings-actions,.month-plan-list,.month-selection-list,.form-grid{display:grid;gap:var(--space-3)}.stack{display:grid;gap:var(--space-4)}.notice{margin-bottom:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface-strong);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.notice.error{border-color:color-mix(in srgb,var(--danger) 28%,var(--border));background:color-mix(in srgb,var(--danger-soft) 72%,var(--surface-strong))}.notice.success{border-color:color-mix(in srgb,var(--success) 28%,var(--border));background:color-mix(in srgb,var(--success-soft) 72%,var(--surface-strong))}.habit-card{width:100%;min-height:88px;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:var(--space-4);padding:var(--space-4);text-align:left;color:inherit;background:var(--surface-strong);border-color:color-mix(in srgb,var(--habit-accent, var(--border)) 14%,var(--border));touch-action:manipulation;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease}.habit-card:active,.progress-card:active,.bottom-nav button:active,.primary-button:active,.ghost-button:active,.weekday-pill:active,.color-swatch:active,.theme-toggle-option:active,.icon-option:active,.grid-day.selectable:active{transform:scale(.985)}.habit-card.open{box-shadow:inset 0 1px color-mix(in srgb,var(--habit-accent, var(--accent)) 10%,transparent),var(--shadow-sm)}.habit-card.done{background:color-mix(in srgb,var(--success-soft) 66%,var(--surface-strong));border-color:color-mix(in srgb,var(--success) 28%,var(--border))}.habit-card.muted{opacity:.76;box-shadow:none}.habit-card.toggle-animate{animation:habit-toggle-settle .12s ease-out}.habit-content,.progress-card-copy,.month-habit-copy,.onboarding-copy,.screen-header-copy{min-width:0}.habit-content{display:grid;gap:2px}.habit-name,.progress-card h2{margin:0;font-family:var(--font-display);font-size:1.03rem;font-weight:500;letter-spacing:-.022em}.habit-note{font-size:.86rem}.habit-section{gap:var(--space-2)}.habit-section-label,.habit-group-label{margin:0;padding-inline:var(--space-1);color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.habit-symbol-group{display:grid;gap:var(--space-2)}.habit-status-divider{height:1px;margin:var(--space-1) var(--space-2);background:color-mix(in srgb,var(--border-strong) 72%,transparent)}.habit-color-dot,.habit-icon-token{width:36px;height:36px;flex:0 0 auto;border-radius:999px}.habit-color-dot{border:2px solid color-mix(in srgb,var(--habit-accent, var(--accent)) 72%,white 10%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--habit-accent, var(--accent)) 10%,transparent)}.habit-icon-token,.icon-option-mark{display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--habit-accent, var(--accent)) 16%,transparent);color:color-mix(in srgb,var(--habit-accent, var(--accent-strong)) 76%,var(--text));border:1px solid color-mix(in srgb,var(--habit-accent, var(--accent)) 18%,transparent);font-size:.82rem;font-weight:700}.icon-option-mark{border-radius:10px}.habit-card.done .habit-icon-token{background:color-mix(in srgb,var(--habit-accent, var(--success)) 82%,white 18%);color:#fff}.habit-icon-token svg,.icon-option-mark svg{width:14px;height:14px;display:block}.habit-row,.progress-card-header,.month-plan-item,.detail-header,.toggle-row,.toggle-card,.inline-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.month-habit-row{align-items:flex-start}.month-habit-row.is-editing{flex-wrap:wrap;row-gap:var(--space-2)}.month-habit-copy{flex:1 1 220px;display:grid;gap:var(--space-1)}.month-habit-row.is-editing .month-habit-copy{flex-basis:100%}.habit-name-row{display:flex;align-items:center;gap:var(--space-3)}.month-habit-name span:last-child{min-width:0}.month-habit-name .month-habit-title-input{min-width:0;width:100%;min-height:auto;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-size:1em;font-weight:inherit;letter-spacing:inherit;line-height:inherit;box-shadow:none}.month-habit-name .month-habit-title-input::placeholder{color:var(--muted)}.month-habit-name .month-habit-title-input:focus-visible{outline:none;border:0;box-shadow:none}.month-habit-cadence{display:block;margin-left:48px;color:var(--muted);font-size:.92rem}.month-habit-actions{flex:0 0 auto;min-width:158px;justify-content:flex-end;align-items:center;gap:var(--space-2)}.month-habit-row.is-editing .month-habit-actions{width:100%;min-width:0}.month-habit-actions .subtle{text-align:right;line-height:1.24}.month-habit-row.is-editing .month-habit-actions .subtle{text-align:left}.month-habit-button-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}.month-habit-row+.month-habit-button-row{margin-top:var(--space-3)}.month-order-actions,.month-row-actions{flex-wrap:wrap}.month-order-actions{gap:var(--space-3)}.month-order-actions .compact-button{width:48px;min-width:48px;min-height:48px;padding:0;border-radius:18px;font-size:1.2rem;line-height:1}.month-row-actions{margin-left:auto}.edit-icon-button{width:48px;min-width:48px;min-height:48px;padding:0;border-radius:18px}.edit-icon-button svg{width:18px;height:18px;display:block}.archive-row{justify-content:flex-end}.nested-panel{padding:var(--space-4);border-radius:20px;background:var(--surface-muted);border:1px solid color-mix(in srgb,var(--border) 96%,transparent)}.progress-overview-panel{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.progress-overview-copy{display:grid;gap:var(--space-1)}.progress-overview-value{margin:0;font-size:2rem;line-height:1;letter-spacing:-.04em;font-weight:600}.progress-card{padding:var(--space-4);text-align:left;background:var(--surface-strong);border-color:color-mix(in srgb,var(--habit-accent, var(--border)) 18%,var(--border))}.progress-card-header{align-items:flex-start}.progress-card-copy{display:grid;gap:var(--space-1)}.progress-summary{flex:0 0 auto;text-align:right}.progress-summary strong{display:block;font-size:1rem;font-weight:600;letter-spacing:-.02em}.progress-summary span{color:var(--muted);font-size:.9rem}.comparison-line{margin-top:var(--space-2);font-size:.86rem}.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%;margin-top:var(--space-3)}.month-grid.compact{gap:5px}.grid-day-empty{aspect-ratio:1}.grid-day{aspect-ratio:1;min-height:36px;border-radius:12px;display:grid;place-items:center;position:relative;background:color-mix(in srgb,var(--surface-muted) 90%,transparent);border:1px solid color-mix(in srgb,var(--border) 92%,transparent);color:var(--muted);font-size:.75rem}.grid-day.done{background:color-mix(in srgb,var(--habit-accent, var(--accent)) 76%,white 12%);color:#fff;border-color:color-mix(in srgb,var(--habit-accent, var(--accent)) 36%,transparent)}.grid-day.today{border-color:color-mix(in srgb,var(--habit-accent, var(--accent)) 28%,var(--text))}.grid-day.perfect{box-shadow:inset 0 0 0 1px #b892443d}.grid-day.selectable{cursor:pointer}.grid-day.disabled{opacity:.54}.grid-day.off-cadence{border-style:dashed;opacity:.38}.grid-day-number,.grid-day-mark{position:relative;z-index:1}.grid-day-today-ring{position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:9px;border:1px solid color-mix(in srgb,var(--habit-accent, var(--accent)) 24%,transparent)}.grid-day-perfect-ring,.grid-day-perfect-mark{display:none}.grid-day-mark{position:absolute;top:5px;right:6px;font-size:.46rem}.bottom-nav{position:fixed;left:var(--space-3);right:var(--space-3);bottom:var(--bottom-offset);z-index:12;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--border-strong);border-radius:26px;background:color-mix(in srgb,var(--bg-elevated) 92%,transparent);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.bottom-nav button,.primary-button,.ghost-button,.weekday-pill,.color-swatch,.icon-option,.theme-toggle-option{min-height:var(--control-height);border-radius:var(--radius-control);border:1px solid transparent}.bottom-nav button{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--muted);padding:0 var(--space-2);font-weight:600}.bottom-nav button.active{background:var(--accent-soft);color:var(--accent-strong);border-color:color-mix(in srgb,var(--accent) 24%,var(--border))}.bottom-nav-more{position:relative}.bottom-nav-more>button{min-width:54px;padding-inline:0}.bottom-nav-more-icon{display:inline-grid;gap:4px;justify-items:center;align-items:center}.bottom-nav-more-icon span{width:4px;height:4px;border-radius:999px;background:currentColor}.bottom-nav-menu{position:absolute;right:0;bottom:calc(100% + var(--space-2));min-width:172px;display:grid;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--border-strong);border-radius:20px;background:color-mix(in srgb,var(--bg-elevated) 96%,transparent);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.bottom-nav-menu button{justify-content:flex-start;padding-inline:var(--space-4)}.bottom-nav-label{display:block;line-height:1;letter-spacing:-.01em}.primary-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-4);touch-action:manipulation}.primary-button{width:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 90%,white 10%) 0%,var(--accent) 100%);color:#fff;border-color:color-mix(in srgb,var(--accent) 56%,transparent);box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 22%,transparent);font-weight:600}.ghost-button{background:color-mix(in srgb,var(--surface-strong) 94%,transparent);border-color:var(--border);color:var(--text);font-weight:500}.destructive-button{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 22%,var(--border))}.compact-button{width:auto}.validation-hint{margin:0;color:var(--danger);font-size:.9rem}.form-grid label,.form-grid>div{display:grid;gap:var(--space-2)}.form-grid .inline-actions{justify-content:flex-end}.field-label,.form-grid span{font-size:.93rem;color:var(--muted)}input[type=text],input[type=time],input[type=number],select{min-height:var(--control-height);width:100%;padding:0 var(--space-4);border-radius:var(--radius-control);border:1px solid var(--border);background:var(--surface-strong);color:var(--text);transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;margin:0;flex:0 0 auto;cursor:pointer;border-radius:9px;border:1px solid color-mix(in srgb,var(--border-strong) 88%,transparent);background:var(--surface-strong);box-shadow:inset 0 1px #ffffffb8;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease,transform .12s ease}input[type=checkbox]:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--border-strong))}input[type=checkbox]:checked{border-color:color-mix(in srgb,var(--accent) 72%,var(--accent-strong));background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.1 3.1L15.5 5.7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:18px 18px;box-shadow:inset 0 1px #ffffff29,0 8px 18px color-mix(in srgb,var(--accent-soft) 92%,transparent)}input[type=checkbox]:active{transform:scale(.96)}input[type=checkbox]:focus-visible{border-color:color-mix(in srgb,var(--accent) 34%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-soft) 88%,transparent),inset 0 1px #ffffffb8}input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 88%,white 12%)}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:none;border-color:color-mix(in srgb,var(--accent) 34%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-soft) 88%,transparent)}.option-row,.weekday-selector{display:flex;flex-wrap:wrap;gap:var(--space-2)}.color-option-row,.icon-option-row{width:100%}.weekday-pill,.icon-option{padding:0 var(--space-4);background:var(--surface-strong);border-color:var(--border);color:var(--text)}.weekday-pill.active,.icon-option.active,.theme-toggle-option.active{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 28%,var(--border));color:var(--accent-strong)}.color-swatch{width:48px;background-clip:padding-box}.color-swatch.active{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:2px}.icon-option{display:inline-flex;align-items:center;gap:var(--space-3)}.icon-option-mark{min-width:24px;height:24px}.theme-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);padding:6px;border-radius:20px;border:1px solid var(--border);background:var(--surface-muted)}.theme-toggle-option{background:transparent;color:var(--muted);font-weight:600}.empty-state{display:grid;gap:var(--space-3)}.settings-signature{padding:var(--space-1) var(--space-2) 0;text-align:center;color:var(--muted)}.settings-signature p{margin:0}.settings-signature p:first-child{font-size:.95rem;font-weight:600}.settings-signature p:last-child{margin-top:var(--space-1);font-size:.82rem}.detail-dialog{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:30;border:0;padding:0;background:#10161d57}.detail-dialog::backdrop{background:#10161d57}.detail-sheet{position:absolute;inset:auto 0 0;width:min(100%,var(--content-width));max-height:min(86dvh,760px);margin:0 auto;border-radius:28px 28px 0 0;background:var(--surface-strong);border-top-color:color-mix(in srgb,var(--habit-accent, var(--accent)) 24%,var(--border));padding:var(--space-3) var(--space-4) calc(var(--space-7) + env(safe-area-inset-bottom,0));overflow-y:auto;overscroll-behavior:contain;animation:rise .18s ease}.detail-handle{width:44px;height:5px;margin:0 auto var(--space-4);border-radius:999px;background:color-mix(in srgb,var(--muted) 28%,transparent)}.detail-header{align-items:flex-start}.detail-title{margin:0}.detail-header .ghost-button{width:48px;min-width:48px;padding:0;font-size:1.55rem;line-height:1}.loading-state{padding:calc(var(--space-7) * 2) var(--space-5);text-align:center;color:var(--muted)}.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}@keyframes habit-toggle-settle{0%{transform:scale(.985)}to{transform:scale(1)}}@keyframes rise{0%{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 389px){.app-main{padding-inline:var(--space-3)}.screen-header,.panel,.detail-sheet{padding-inline:var(--space-4)}.bottom-nav{left:var(--space-2);right:var(--space-2)}.month-habit-actions{min-width:132px}}@media (max-width: 559px){.progress-card-header,.notice,.detail-header{flex-direction:column;align-items:stretch}.month-habit-row{display:grid;grid-template-columns:1fr;align-items:stretch;gap:var(--space-3)}.month-habit-row.is-editing{grid-template-columns:1fr}.month-habit-copy,.month-habit-row.is-editing .month-habit-copy{flex:0 0 auto;min-width:0}.month-habit-actions,.month-row-actions{width:100%;min-width:0}.month-habit-actions{width:100%;justify-content:space-between;align-items:center;align-self:stretch}.month-habit-actions .subtle,.month-habit-row.is-editing .month-habit-actions .subtle{flex:1 1 auto;min-width:0;text-align:left}.month-habit-button-row{justify-content:flex-start;align-items:flex-start}.month-row-actions{margin-left:0;width:auto;display:flex}.month-habit-cadence,.month-habit-status{margin-left:0}.color-option-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.color-swatch{width:100%;max-width:92px;min-height:0;aspect-ratio:1;justify-self:start}.icon-option-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.icon-option{width:100%;justify-content:flex-start;padding-inline:var(--space-3)}.form-grid .inline-actions{display:grid;grid-template-columns:1fr;gap:var(--space-2)}.form-grid .inline-actions .ghost-button,.form-grid .inline-actions .primary-button{width:100%}.progress-summary{text-align:left}.onboarding-actions{grid-template-columns:1fr}.onboarding-actions span{display:none}}@media (min-width: 700px){.app-main{width:min(100%,36rem)}.bottom-nav{left:50%;right:auto;width:min(calc(100% - 24px),36rem);transform:translate(-50%)}}