:root{--bg:#f3f1ea;--surface:#fbfaf6;--surface-2:#eeece4;--ink:#20231f;--muted:#777a70;--line:#deddd5;--green:#44634f;--green-2:#dce6dd;--orange:#d87845;--shadow:0 18px 50px rgba(52,58,48,.07);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans","Noto Sans SC",sans-serif;min-height:100vh;transition:background .25s,color .25s}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(68,99,79,.23);outline-offset:2px}.app-shell{max-width:1240px;margin:auto;padding:0 32px 64px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-size:19px;font-weight:700;letter-spacing:.12em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--green);color:#fff;border-radius:50% 50% 48% 52% / 55% 45% 55% 45%;font-family:serif;font-size:16px}.topbar-actions{display:flex;align-items:center;gap:13px}.icon-button{border:0;background:transparent;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:var(--ink)}.icon-button:hover{background:var(--surface-2)}.icon-button svg{width:20px;fill:currentColor}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#d9b79e;color:#5c3a28;font-weight:700;border:2px solid var(--surface)}.hero{display:flex;justify-content:space-between;align-items:flex-end;padding:54px 0 36px}.eyebrow,.section-kicker{margin:0 0 10px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.hero h1{font-family:"Noto Sans SC",sans-serif;font-size:clamp(29px,4vw,46px);letter-spacing:-.04em;margin:0;font-weight:600}.hero-subtitle{margin:12px 0 0;color:var(--muted);font-size:15px}.primary-button,.secondary-button{border:0;border-radius:99px;padding:12px 20px;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}.primary-button{background:var(--green);color:white;box-shadow:0 7px 20px rgba(68,99,79,.18)}.primary-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(68,99,79,.25)}.primary-button span{font-size:19px;margin-right:5px}.secondary-button{background:var(--surface-2);color:var(--ink)}.date-strip{background:rgba(251,250,246,.7);border:1px solid var(--line);border-radius:18px;padding:10px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:24px}.date-item{border:0;background:transparent;padding:10px 4px;border-radius:12px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:9px;transition:.2s}.date-item span{font-size:12px}.date-item strong{font-size:15px;color:var(--ink)}.date-item:hover{background:var(--surface-2)}.date-item.active{background:var(--green);color:rgba(255,255,255,.75)}.date-item.active strong{color:white}.date-item.today:not(.active) strong{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:5px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.8fr);gap:24px}.main-column,.side-column{display:flex;flex-direction:column;gap:16px}.card{background:var(--surface);border:1px solid rgba(222,221,213,.78);border-radius:20px;box-shadow:var(--shadow)}.progress-card{padding:25px 28px;display:flex;align-items:center;gap:34px;background:linear-gradient(130deg,var(--surface),#eef1e8)}.progress-copy{flex:1}.section-heading{display:flex;align-items:flex-end;justify-content:space-between}.section-heading h2{margin:0;font-size:22px;letter-spacing:-.02em}.section-heading.compact{align-items:center}.section-heading.compact h2{font-size:17px}.section-heading.compact .section-kicker{margin-bottom:5px}.progress-fraction{font-size:21px}.progress-track{height:7px;background:#dfe3db;border-radius:99px;overflow:hidden;margin:18px 0 11px}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--green);transition:width .45s ease}.progress-copy>p{font-size:13px;color:var(--muted);margin:0}.progress-ring{--progress:0;width:105px;height:105px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) calc(var(--progress)*1%),var(--green-2) 0);position:relative;transition:.4s}.progress-ring:before{content:"";position:absolute;inset:8px;background:var(--surface);border-radius:50%}.progress-ring div{position:relative;text-align:center;display:flex;flex-direction:column}.progress-ring strong{font-size:22px}.progress-ring span{font-size:10px;color:var(--muted)}.habits-heading{margin:15px 3px 3px}.text-button{border:0;background:transparent;color:var(--green);font-size:13px;font-weight:600}.habit-list{display:flex;flex-direction:column;gap:12px}.habit-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:17px 18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;transition:transform .2s,border .2s,opacity .25s}.habit-card:hover{transform:translateY(-2px);border-color:#c7c9bf}.habit-card.checked{opacity:.72}.habit-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:22px}.habit-icon.sage{background:#dfe9df}.habit-icon.orange{background:#fae3d4}.habit-icon.blue{background:#dce7ec}.habit-icon.rose{background:#f1ddda}.habit-icon.purple{background:#e7dff0}.habit-copy h3{font-size:16px;margin:0 0 4px}.habit-copy p{font-size:12px;color:var(--muted);margin:0}.habit-meta{display:flex;align-items:center;gap:14px}.mini-streak{text-align:right}.mini-streak b{display:block;font-size:13px}.mini-streak span{font-size:10px;color:var(--muted)}.check-button{width:42px;height:42px;border-radius:50%;border:1.5px solid #c8cac1;color:transparent;background:transparent;font-size:18px;transition:.2s}.check-button:hover{border-color:var(--green);color:#a6b4aa}.checked .check-button{background:var(--green);border-color:var(--green);color:white}.delete-button{width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:#a1a397;font-size:16px;display:none}.managing .delete-button{display:block}.managing .mini-streak{display:none}.empty-state{text-align:center;padding:50px 20px;border:1px dashed #c9c9bf;border-radius:20px}.empty-state span{font-size:28px;color:var(--orange)}.empty-state h3{margin:8px 0}.empty-state p{color:var(--muted);font-size:13px;margin-bottom:20px}.hidden{display:none!important}.stat-card,.weekly-card,.heatmap-card,.note-card{padding:21px}.flame{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#f8e3d6;color:var(--orange);font-size:20px}.streak-number{display:flex;align-items:center;gap:12px;margin-top:22px}.streak-number strong{font-size:54px;line-height:1;letter-spacing:-.06em}.streak-number span{font-size:11px;color:var(--muted);line-height:1.5}.streak-best{font-size:11px;color:var(--muted);padding-top:15px;margin:17px 0 0;border-top:1px solid var(--line)}.streak-best b{float:right;color:var(--ink)}.weekly-card .section-heading>strong{color:var(--green);font-size:20px}.week-chart{height:105px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:9px;margin-top:20px}.bar-item{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px}.bar-track{height:76px;width:100%;max-width:18px;background:var(--surface-2);border-radius:8px;position:relative;overflow:hidden}.bar-fill{position:absolute;bottom:0;width:100%;border-radius:8px;background:#a8b9aa;min-height:3px}.bar-item.today .bar-fill{background:var(--orange)}.bar-item span{font-size:9px;color:var(--muted)}.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:20px}.heat-cell{aspect-ratio:1;border-radius:5px;background:var(--surface-2)}.heat-cell[data-level="1"]{background:#dce6dd}.heat-cell[data-level="2"]{background:#a9bfac}.heat-cell[data-level="3"]{background:#6f9278}.heat-cell[data-level="4"]{background:var(--green)}.heat-cell.selected{box-shadow:0 0 0 2px var(--orange)}.heatmap-legend{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:12px;color:var(--muted);font-size:9px}.heatmap-legend i{width:8px;height:8px;border-radius:2px;background:#dce6dd}.heatmap-legend i:nth-of-type(2){background:#a9bfac}.heatmap-legend i:nth-of-type(3){background:#6f9278}.heatmap-legend i:nth-of-type(4){background:var(--green)}.note-card{background:var(--green);color:white}.note-title{display:flex;gap:9px;align-items:center}.note-title span{font-family:serif;font-size:30px;color:#b9cbbd;line-height:.5}.note-title h2{margin:0;font-size:16px}.note-card textarea{border:0;background:transparent;color:white;width:100%;height:65px;resize:none;margin-top:12px;line-height:1.6;font-size:13px}.note-card textarea::placeholder{color:rgba(255,255,255,.48)}.note-card textarea:focus{outline:0}.note-footer{border-top:1px solid rgba(255,255,255,.14);padding-top:9px;display:flex;justify-content:space-between;font-size:9px;color:rgba(255,255,255,.56)}.modal-backdrop{position:fixed;inset:0;background:rgba(25,28,24,.48);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;z-index:10}.modal{width:min(480px,100%);background:var(--surface);border-radius:24px;padding:28px;box-shadow:0 25px 90px rgba(0,0,0,.2);animation:modalIn .22s ease}.modal-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:24px}.modal-header h2{margin:0;font-size:24px}.modal-header .icon-button{font-size:26px}.modal label{display:block;color:var(--muted);font-size:12px;margin:16px 0}.modal input,.modal select{display:block;width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;padding:12px 13px;margin-top:7px}.form-row{display:grid;grid-template-columns:1fr 1.5fr;gap:12px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#222821;color:white;border-radius:99px;padding:11px 18px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}}
.site-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:42px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:.035em}.site-footer a{display:inline-flex;align-items:center;min-height:34px;padding:8px 13px;border:1px solid transparent;border-radius:99px;color:inherit;background:var(--surface);text-decoration:none;transition:color .2s,border-color .2s,background .2s,transform .2s}.site-footer a::before{content:"";width:5px;height:5px;margin-right:8px;border-radius:50%;background:var(--green);opacity:.58}.site-footer a:hover{color:var(--green);border-color:var(--line);background:var(--surface-2);transform:translateY(-1px)}.site-footer span{opacity:.3}
body.dark{--bg:#191c19;--surface:#232723;--surface-2:#2d322d;--ink:#eff1eb;--muted:#a2a79f;--line:#383e38;--green:#88a98f;--green-2:#354238;--shadow:0 18px 50px rgba(0,0,0,.14);color-scheme:dark}body.dark .progress-card{background:linear-gradient(130deg,var(--surface),#293029)}body.dark .progress-ring:before{background:#262b26}body.dark .date-strip{background:rgba(35,39,35,.7)}body.dark .note-card{background:#344c3a}
@media(max-width:850px){.dashboard-grid{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr}.heatmap-card,.note-card{grid-column:auto}.hero{padding-top:38px}}
@media(max-width:620px){.app-shell{padding:0 16px 40px}.topbar{height:68px}.hero{align-items:flex-start;gap:22px;padding:34px 2px 25px;flex-direction:column}.hero h1{font-size:29px;line-height:1.3}.date-strip{overflow-x:auto;grid-template-columns:repeat(7,minmax(68px,1fr));padding:7px}.date-item{flex-direction:column;gap:3px}.progress-card{padding:20px}.progress-ring{width:82px;height:82px}.section-heading h2{font-size:20px}.habit-card{grid-template-columns:auto 1fr auto;padding:14px;gap:11px}.habit-icon{width:43px;height:43px}.habit-copy p{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-streak{display:none}.side-column{display:flex}.stat-card,.weekly-card,.heatmap-card,.note-card{padding:20px}.form-row{grid-template-columns:1fr}.modal{padding:22px}.site-footer{flex-direction:column;gap:6px}.site-footer span{display:none}.site-footer a{justify-content:center;width:100%;max-width:290px}}