:root{--bg:#eef7fb;--bg-elevated:#fff;--bg-muted:#dceff7;--text:#16324a;--text-muted:#5a7a8f;--border:#3ba8d02e;--border-subtle:#3ba8d01a;--accent:#3ba8d0;--accent-soft:#82c8e447;--accent-strong:#82c8e4;--accent-deep:#2b8fb8;--danger:#dc2626;--success:#4bafcf;--shadow:0 10px 30px #3ba8d01f;--shadow-sm:0 4px 14px #3ba8d01a;--radius:18px;--radius-sm:12px;--sidebar-width:260px;--mobile-nav-height:72px;--font-sans:"DM Sans", sans-serif;--font-display:"Fraunces", Georgia, serif;--gradient-bg:radial-gradient(circle at 0% 0%, #82c8e473, transparent 44%), radial-gradient(circle at 100% 0%, #38bdf838, transparent 38%), radial-gradient(circle at 50% 100%, #bae6fd59, transparent 45%), linear-gradient(180deg, #f4fbfe 0%, #e4f3fa 55%, #d9eef8 100%)}[data-theme=dark],[data-bs-theme=dark]{--bg:#0b1620;--bg-elevated:#122231;--bg-muted:#1a3347;--text:#e8f4fb;--text-muted:#8fb0c4;--border:#82c8e429;--border-subtle:#82c8e41a;--accent:#82c8e4;--accent-soft:#82c8e433;--accent-strong:#a8dbef;--accent-deep:#5bb8dc;--success:#82c8e4;--shadow:0 12px 32px #08182473;--shadow-sm:0 6px 18px #08182459;--gradient-bg:radial-gradient(circle at 0% 0%, #82c8e42e, transparent 42%), radial-gradient(circle at 100% 0%, #38bdf81f, transparent 36%), linear-gradient(180deg, #0e1a26 0%, #0b1620 100%)}*,:before,:after{box-sizing:border-box}html,body{max-width:100vw;overflow-x:hidden}body{font-family:var(--font-sans);color:var(--text);background:var(--gradient-bg);-webkit-font-smoothing:antialiased;background-attachment:fixed;margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh;display:flex}.app-sidebar{width:var(--sidebar-width);background:color-mix(in srgb, var(--bg-elevated) 92%, transparent);border-right:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;height:100vh;position:sticky;top:0}.sidebar-brand{align-items:center;gap:.85rem;display:flex}.brand-mark{background:linear-gradient(135deg, var(--accent-strong), var(--accent-deep));color:#fff;letter-spacing:.02em;border-radius:12px;place-items:center;width:42px;height:42px;font-weight:700;display:grid}.brand-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;line-height:1.1}.brand-subtitle{color:var(--text-muted);font-size:.8rem}.sidebar-link{color:var(--text-muted);border-radius:12px;align-items:center;gap:.75rem;padding:.75rem .9rem;transition:background .2s,color .2s,transform .2s;display:flex}.sidebar-link:hover{background:var(--bg-muted);color:var(--text);transform:translate(2px)}.sidebar-link.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.sidebar-link-icon{text-align:center;opacity:.9;width:1.25rem}.app-main{flex:1;min-width:0}.app-content{width:min(1120px,100%);padding:1.5rem 1.25rem calc(var(--mobile-nav-height) + 1.5rem);margin:0 auto}@media (min-width:992px){.app-content{padding:2rem 2rem 2.5rem}}.app-header-title{font-family:var(--font-display);letter-spacing:-.02em;font-size:clamp(1.75rem,2.5vw,2.35rem);font-weight:700}.app-header-subtitle{color:var(--text-muted);font-size:.95rem}.section-title{letter-spacing:-.01em;font-size:1.05rem;font-weight:650}.surface-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.25rem;transition:box-shadow .2s,transform .2s}.surface-card:hover{box-shadow:var(--shadow)}.btn-accent{--bs-btn-color:#fff;--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--accent-deep);--bs-btn-hover-border-color:var(--accent-deep);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--accent-deep);--bs-btn-active-border-color:var(--accent-deep);--bs-btn-active-color:#fff;border-radius:999px;padding-inline:1.1rem;font-weight:600}.btn-ghost{background:var(--bg-muted);border:1px solid var(--border);color:var(--text);border-radius:999px;font-weight:600}.btn-ghost:hover{background:var(--accent-soft);color:var(--accent);border-color:#0000}.progress-card .progress-percent{font-family:var(--font-display);color:var(--accent);font-size:2rem;font-weight:700;line-height:1}.progress-hero{background:var(--bg-muted);border-radius:999px;height:12px;overflow:hidden}.progress-hero .progress-bar{background:linear-gradient(90deg, var(--accent-strong), var(--accent-deep));border-radius:999px;transition:width .45s}.stat-pill{background:var(--bg-muted);border-radius:12px;flex-direction:column;gap:.15rem;min-width:110px;padding:.65rem .9rem;display:flex}.stat-pill-label{color:var(--text-muted);font-size:.75rem}.streak-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.streak-item{background:var(--bg-muted);border-radius:14px;padding:1rem}.streak-value{font-family:var(--font-display);color:var(--accent);font-size:1.8rem;font-weight:700}.streak-label{color:var(--text-muted);font-size:.85rem}.week-bars{grid-template-columns:repeat(7,1fr);align-items:end;gap:.65rem;min-height:140px;display:grid}.week-bar-item{flex-direction:column;align-items:center;gap:.35rem;display:flex}.week-bar-track{background:var(--bg-muted);border-radius:999px;align-items:flex-end;width:100%;height:100px;padding:4px;display:flex;overflow:hidden}.week-bar-fill{background:linear-gradient(180deg, var(--accent-strong), var(--accent));border-radius:999px;width:100%;min-height:0;transition:height .35s}.week-bar-label{color:var(--text-muted);font-size:.75rem}.week-bar-meta{font-size:.72rem;font-weight:600}.habit-list{flex-direction:column;gap:.85rem;display:flex}.habit-card{background:var(--bg-elevated);border:1px solid var(--border);border-left:4px solid var(--habit-color,var(--accent));border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem;transition:transform .2s,box-shadow .2s,opacity .25s,background .25s;display:flex}.habit-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.habit-card.is-completed{background:color-mix(in srgb, var(--accent-soft) 55%, var(--bg-elevated))}.habit-card.is-completed .habit-card-title{opacity:.78;text-decoration:line-through}.habit-card-main{flex:1;align-items:flex-start;gap:.9rem;min-width:0;display:flex}.habit-check{border:2px solid var(--habit-color,var(--accent));color:#fff;background:0 0;border-radius:50%;flex-shrink:0;place-items:center;width:34px;height:34px;transition:transform .2s,background .2s,box-shadow .2s;display:grid}.habit-check.checked{background:var(--habit-color,var(--accent));box-shadow:0 0 0 4px color-mix(in srgb, var(--habit-color,var(--accent)) 20%, transparent);animation:.35s pop-in}.habit-card-title{align-items:center;gap:.45rem;margin:0 0 .35rem;font-size:1.05rem;font-weight:650;display:flex}.habit-icon{font-size:1.15rem}.habit-card-desc{color:var(--text-muted);font-size:.9rem}.habit-category-badge{font-weight:500;border:1px solid #3ba8d0!important}.habit-streak-chip{color:var(--text-muted);font-size:.8rem}.habit-card-actions{flex-wrap:wrap;gap:.45rem;display:flex}@keyframes pop-in{0%{transform:scale(.7)}60%{transform:scale(1.12)}to{transform:scale(1)}}.habit-filters{padding:1rem 1.15rem}.emoji-grid,.color-grid,.day-toggle-row{flex-wrap:wrap;gap:.5rem;display:flex}.emoji-option,.day-toggle{border:1px solid var(--border);background:var(--bg-muted);border-radius:10px;padding:.45rem .6rem;transition:background .2s,border-color .2s,transform .15s}.emoji-option:hover,.day-toggle:hover,.color-option:hover{transform:translateY(-1px)}.emoji-option.selected,.day-toggle.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}.color-option{border:2px solid #0000;border-radius:50%;width:30px;height:30px;box-shadow:inset 0 0 0 1px #ffffff40}.color-option.selected{outline:2px solid var(--text);outline-offset:2px}.stats-card-label{color:var(--text-muted);margin-bottom:.35rem;font-size:.85rem}.stats-card-value{font-family:var(--font-display);font-size:1.85rem;font-weight:700}.stats-card.accent{background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, var(--bg-elevated)), var(--bg-elevated))}.stats-card-hint{color:var(--text-muted);margin-top:.25rem;font-size:.8rem}.chart-wrap{width:100%;min-height:260px}.chart-tooltip{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:10px;padding:.55rem .75rem;font-size:.85rem}.category-legend{flex-wrap:wrap;justify-content:center;gap:.65rem 1rem;display:flex}.category-legend-item{color:var(--text-muted);align-items:center;gap:.4rem;font-size:.82rem;display:inline-flex}.legend-swatch{border-radius:50%;width:10px;height:10px}.ranked-list{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.ranked-list li{border-bottom:1px solid var(--border-subtle);justify-content:space-between;gap:.75rem;padding-bottom:.75rem;font-size:.92rem;display:flex}.ranked-list li:last-child{border-bottom:0;padding-bottom:0}.ranked-list strong{color:var(--text-muted);white-space:nowrap;font-weight:600}.calendar-weekdays,.calendar-grid{grid-template-columns:repeat(7,1fr);gap:.4rem;display:grid}.calendar-weekday{text-align:center;color:var(--text-muted);margin-bottom:.35rem;font-size:.75rem}.calendar-day{aspect-ratio:1;background:var(--bg-muted);color:var(--text-muted);border-radius:12px;place-items:center;font-size:.85rem;font-weight:600;transition:transform .15s;display:grid}.calendar-day:hover{transform:scale(1.04)}.calendar-day.completed{background:color-mix(in srgb, var(--accent) 75%, white);color:#fff}[data-theme=dark] .calendar-day.completed,[data-bs-theme=dark] .calendar-day.completed{background:color-mix(in srgb, var(--accent) 55%, #0b1620)}.calendar-day.missed{background:color-mix(in srgb, #ef4444 18%, var(--bg-muted));color:#b91c1c}[data-theme=dark] .calendar-day.missed,[data-bs-theme=dark] .calendar-day.missed{color:#fca5a5}.calendar-day.outside,.calendar-day.unscheduled{opacity:.35}.calendar-day.future{opacity:.55}.calendar-legend{color:var(--text-muted);flex-wrap:wrap;gap:.85rem;font-size:.8rem;display:flex}.calendar-legend span{align-items:center;gap:.35rem;display:inline-flex}.legend-dot{border-radius:50%;width:10px;height:10px;display:inline-block}.legend-dot.completed{background:var(--accent)}.legend-dot.missed{background:#ef4444}.legend-dot.unscheduled{background:var(--bg-muted);border:1px solid var(--border)}.heatmap-grid{grid-template-columns:repeat(17,minmax(0,1fr));gap:4px;display:grid}.heatmap-cell{aspect-ratio:1;background:var(--bg-muted);border-radius:3px;display:inline-block}.heatmap-cell.level-1{background:color-mix(in srgb, var(--habit-color,var(--accent)) 25%, var(--bg-muted))}.heatmap-cell.level-3{background:var(--habit-color,var(--accent))}.heatmap-legend{align-items:center;gap:.35rem;display:flex}.heatmap-legend .heatmap-cell{width:12px;height:12px}.empty-state-icon{font-size:2.4rem}.empty-state-desc{max-width:360px}.loading-state{min-height:40vh}.text-accent{color:var(--accent)!important}.mobile-nav{height:var(--mobile-nav-height);background:color-mix(in srgb, var(--bg-elevated) 94%, transparent);border-top:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:30;padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom));grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.mobile-nav-item{color:var(--text-muted);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;font-size:.68rem;transition:color .2s,background .2s;display:flex}.mobile-nav-item.active{color:var(--accent);background:var(--accent-soft);font-weight:600}.mobile-nav-icon{font-size:1rem}.toast-stack .app-toast{border:1px solid var(--border);box-shadow:var(--shadow)}.modal-content{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);border-radius:18px}.form-control,.form-select{background-color:var(--bg-elevated);border-color:var(--border);color:var(--text);border-radius:12px}.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem var(--accent-soft);background-color:var(--bg-elevated);color:var(--text)}.form-label{font-size:.9rem;font-weight:560}@media (max-width:575.98px){.habit-card-actions{width:100%}.habit-card-actions .btn{flex:1}.week-bars{gap:.35rem}.heatmap-grid{grid-template-columns:repeat(10,minmax(0,1fr))}}