:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,system-ui,sans-serif;line-height:1.5;font-weight:400;color:#020617;background-color:#020617;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,#1d4ed8 0,transparent 55%),radial-gradient(circle at bottom right,#22c55e 0,transparent 55%),#020617;color:inherit}#root{min-height:100vh}a{color:inherit;text-decoration:none}button{font-family:inherit}ul{list-style:none;margin:0;padding:0}input,select,button{font-family:inherit}.app-root{max-width:1120px;margin:0 auto;padding:2.5rem 1.5rem 3rem;color:#0b1120}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;color:#e5e7eb}.app-title{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;font-size:1.2rem;gap:2rem}.app-logo{width:200px}.app-subtitle{margin:.25rem 0 0;color:#9ca3af}.app-layout{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1.7fr);gap:1.5rem}.sidebar,.content{display:flex;flex-direction:column;gap:1rem}.panel{background-color:#0f172ac7;border-radius:1rem;padding:1.25rem 1.2rem 1.35rem;border:1px solid rgba(148,163,184,.23);box-shadow:0 18px 45px #0f172ab3,0 0 0 1px #0f172a99;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#e5e7eb}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}.panel-title{margin:0;font-size:1.02rem;font-weight:600}.muted{margin:0;font-size:.82rem;color:#9ca3af}.badge{border-radius:999px;display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;padding:0 .35rem;font-size:.72rem;font-weight:600;background:#0f172acc;color:#e5e7eb;border:1px solid rgba(148,163,184,.45)}.field-group{margin-bottom:.75rem}.field-row{display:flex;gap:.75rem}.field-label{display:block;margin-bottom:.25rem;font-size:.8rem;font-weight:500;color:#e5e7eb}.field-input{width:100%;padding:.5rem .6rem;border-radius:.65rem;border:1px solid rgba(148,163,184,.6);background:#0f172ab3;color:#e5e7eb;font-size:.86rem}.field-input::placeholder{color:#6b7280}.field-input:focus-visible{outline:2px solid #6366f1;outline-offset:1px;border-color:transparent}.color-input-wrapper{display:inline-flex;padding:.25rem;border-radius:999px;background:radial-gradient(circle at top left,#38bdf8,#4f46e5)}.color-input{width:2.2rem;height:2.2rem;padding:0;border-radius:999px;border:none;background:transparent;cursor:pointer}.color-input::-webkit-color-swatch{border-radius:999px;border:2px solid #020617}.frequency-row{display:flex;align-items:center;gap:.5rem}.frequency-number{max-width:4rem}.primary-button{width:100%;margin-top:.25rem;padding:.6rem .9rem;border-radius:.75rem;border:none;cursor:pointer;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;font-size:.9rem;font-weight:600;box-shadow:0 12px 30px #4f46e58c;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.primary-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 40px #4f46e5b3;filter:brightness(1.03)}.primary-button:disabled{opacity:.6;cursor:default;box-shadow:none}.habit-list{max-height:320px;overflow:visible;display:flex;flex-direction:column}.habit-list-items{margin-top:.25rem;padding:.35rem .35rem .45rem;overflow-y:auto;max-height:260px;scrollbar-width:thin;scrollbar-gutter:stable}.habit-list-items::-webkit-scrollbar{width:6px}.habit-list-items::-webkit-scrollbar-thumb{background:#94a3b8b3;border-radius:999px}.habit-list-item{width:100%;margin-bottom:.35rem;padding:.55rem .65rem;border-radius:1rem;border:1px solid rgba(51,65,85,.9);color:inherit;opacity:.5;display:flex;align-items:center;justify-content:space-between;gap:.75rem;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,transform .12s ease,opacity .15s ease}.habit-list-item--active{border-color:#818cf8f2;opacity:1}.habit-list-item-main{display:flex;align-items:center;gap:.6rem}.habit-name{font-size:.9rem;font-weight:500}.habit-meta{display:flex;gap:.35rem;margin-top:.1rem;font-size:.78rem;color:inherit}.habit-meta-frequency{transition:color .15s ease}.habit-meta-frequency--on-track{color:#bbf7d0}.habit-list-item--on-track{background:radial-gradient(circle at top left,rgba(16,185,129,.3),transparent),#0f172af2;border-color:#22c55ee6;box-shadow:none}.habit-list-item-stats{font-size:.78rem;display:flex;align-items:center;gap:.4rem}.stat-pill{border-radius:999px;display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .45rem;background-color:#1e40af99;color:#e5e7eb}.stat-pill-label{text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;color:#bfdbfe}.icon-button{border-radius:999px;border:none;padding:.15rem .5rem;font-size:.78rem;cursor:pointer;background:#0f172ae6;color:#e5e7eb;transition:background-color .12s ease,transform .1s ease,opacity .12s ease}.icon-button--danger{background:#7f1d1de6}.icon-button:hover{opacity:.9;transform:translateY(-.5px)}.icon-button:focus-visible{outline:2px solid #f97373;outline-offset:1px}.calendar-panel{flex:1}.calendar-legend{display:flex;gap:.5rem;font-size:.75rem;color:#9ca3af;align-items:center;flex-wrap:wrap}.legend-item{display:inline-flex;align-items:center;gap:.25rem}.chip-button{border-radius:999px;border:1px solid rgba(148,163,184,.6);padding:.25rem .6rem;font-size:.75rem;cursor:pointer;background:transparent;color:#e5e7eb;display:inline-flex;align-items:center;gap:.25rem;transition:background-color .12s ease,border-color .12s ease,transform .1s ease,opacity .12s ease}.chip-button--ghost:hover{background-color:#1e40afb3;border-color:#818cf8f2}.chip-button:focus-visible{outline:2px solid #6366f1;outline-offset:1px}.legend-dot{width:.7rem;height:.7rem;border-radius:999px;border:1px solid rgba(148,163,184,.7);background-color:transparent}.legend-dot--completed{background-color:#22c55e;border-color:#22c55e}.legend-dot--today{background-color:transparent;border-color:#e5e7eb}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem;margin-top:.75rem}.calendar-grid-header{text-align:center;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af}.calendar-day{position:relative;width:100%;aspect-ratio:1/1;border-radius:.75rem;border:1px solid rgba(51,65,85,.95);background-color:#0f172ae6;color:#e5e7eb;font-size:.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,transform 80ms ease}.calendar-day--other-month{opacity:.4}.calendar-day--today{box-shadow:0 0 0 1px #f8fafcb3}.calendar-day--completed{color:#f9fafb;box-shadow:0 10px 18px #22c55e80}.calendar-day:disabled{opacity:.55;cursor:default}.calendar-day:not(:disabled):hover{transform:translateY(-1px);border-color:#94a3b8e6}.stats-panel{margin-top:.8rem}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:.5rem}.stat-card{padding:.7rem .75rem;border-radius:.9rem;background:radial-gradient(circle at top left,rgba(59,130,246,.25),transparent),#0f172ae6;border:1px solid rgba(51,65,85,.9)}.stat-card--goal-met{border-color:#22c55ef2;background:radial-gradient(circle at top left,rgba(34,197,94,.3),transparent),#0f172af5;box-shadow:0 0 0 1px #22c55eb3,0 12px 26px #22c55e73}.stat-label{display:block;font-size:.75rem;color:#9ca3af;margin-bottom:.1rem}.stat-value{font-size:1.05rem;font-weight:600;display:flex;align-items:baseline;gap:.2rem}.stat-unit{font-size:.75rem;color:#9ca3af}.stat-sub{margin-top:.15rem;font-size:.75rem;color:#9ca3af}.habit-name-inline{font-weight:500}.stat-progress{margin-top:.45rem}.stat-progress-track{position:relative;width:100%;height:.55rem;border-radius:999px;background:#0f172af2;overflow:hidden;border:1px solid rgba(30,64,175,.9)}.stat-progress-fill{position:absolute;inset:0;border-radius:inherit;transition:width .2s ease-out}.empty-state{padding:2.25rem 2rem;text-align:center;color:#e5e7eb}.empty-state h2{margin:0 0 .5rem}.empty-state p{margin:0;color:#9ca3af;font-size:.9rem}@media(max-width:880px){.app-root{padding-top:1.75rem}.app-layout{grid-template-columns:minmax(0,1fr)}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.panel{padding:1rem .85rem 1.1rem}.field-row{flex-direction:column}.stats-grid{grid-template-columns:minmax(0,1fr)}.calendar-grid{gap:.2rem}}