@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f3ed;--card:#fffefa;--ink:#343a35;--muted:#858b82;--sage:#879b87;--sage2:#dfe8dc;--peach:#f0ded2;--line:#eeece5}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);max-width:760px;margin:auto}
.top{display:flex;justify-content:space-between;align-items:center;padding:28px 22px 16px}.eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--muted);font-weight:700;margin:0 0 7px}.top h1{font:700 31px Manrope,sans-serif;letter-spacing:-1.2px;margin:0}.top h1 span{color:var(--sage)}.avatar{width:42px;height:42px;border-radius:50%;background:var(--sage2);display:grid;place-items:center;color:#607760;font-size:22px}
.tabs{display:flex;gap:5px;padding:0 16px 16px;overflow:auto}.tab{border:0;background:transparent;color:var(--muted);padding:10px 13px;border-radius:22px;font:600 12px 'DM Sans';white-space:nowrap}.tab.active{background:#e4e9df;color:#526b55}
main{padding:0 17px 24px}.page{display:none}.page.active{display:block}.card{background:var(--card);border:1px solid rgba(80,90,70,.04);border-radius:23px;box-shadow:0 6px 22px rgba(60,65,50,.035)}
.hero{padding:20px;display:flex;align-items:center;gap:18px}.ring{width:104px;height:104px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--sage) 0deg,#e8ece4 0deg);position:relative}.ring:before{content:"";position:absolute;inset:9px;background:var(--card);border-radius:50%}.ring>div{position:relative;display:grid;text-align:center}.ring strong{font:700 24px Manrope}.ring small{font-size:10px;color:var(--muted)}.hero-copy h2{font:700 18px Manrope;margin:0 0 5px}.muted,.section-head p{color:var(--muted);font-size:12px;margin:0}.section-head{display:flex;justify-content:space-between;align-items:center;margin:24px 3px 12px}.section-head h2{font:700 19px Manrope;margin:0 0 4px}.sparkle{color:var(--sage);font-size:22px}
.list{padding:3px 15px}.habit{display:flex;align-items:center;gap:12px;padding:13px 1px;border-bottom:1px solid var(--line)}.habit:last-child{border:0}.habit-icon{width:39px;height:39px;border-radius:14px;background:#f0f2eb;display:grid;place-items:center;color:#758b75;font-size:17px}.habit-name{font-size:13px;font-weight:600;flex:1}.habit-category{font-size:10px;color:var(--muted);margin-top:3px}.check{border:1.5px solid #d7ddd3;background:transparent;color:white;width:25px;height:25px;border-radius:50%;font-size:13px}.check.done{background:var(--sage);border-color:var(--sage)}.add-form{display:flex;gap:8px;background:white;border-radius:30px;padding:7px 8px 7px 16px;margin-top:11px}.add-form input,.goal-form input{border:0;outline:0;background:transparent;min-width:0;flex:1;font:13px 'DM Sans';color:var(--ink)}.add-form button{border:0;border-radius:50%;width:36px;height:36px;background:var(--sage);color:white;font-size:22px}
.goal-card{padding:17px}.goal-card b{font:600 14px Manrope}.goal-card small{display:block;color:var(--muted);font-size:11px;margin:5px 0 12px}.bar{height:7px;background:#e9ede6;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;width:30%;background:var(--sage);border-radius:9px}
.goal-list{display:grid;gap:12px}.goal-item{padding:17px}.goal-top{display:flex;justify-content:space-between;gap:10px}.goal-item h3{font:700 14px Manrope;margin:0 0 4px}.goal-item p{font-size:11px;color:var(--muted);margin:0 0 13px}.goal-percent{font:700 13px Manrope;color:var(--sage)}.goal-controls{display:flex;align-items:center;justify-content:space-between;margin-top:11px}.goal-controls small{color:var(--muted);font-size:11px}.goal-controls button{border:0;background:#edf1e9;border-radius:20px;padding:7px 13px;color:#607760;font-weight:700}.goal-form{padding:18px;margin-top:16px;display:grid;gap:12px}.goal-form h3{font:700 15px Manrope;margin:0}.goal-form input{padding:12px;background:#f6f5f0;border-radius:12px;width:100%}.inline-inputs{display:flex;gap:8px}.primary{background:var(--sage);color:white;border:0;padding:13px;border-radius:14px;font-weight:700}.note{font-size:11px;color:var(--muted);line-height:1.55;margin:15px 3px}
.widget-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.widget{background:#e8ede4;border-radius:24px;padding:16px;min-height:164px;display:flex;flex-direction:column;justify-content:space-between;color:#3e5141}.widget-brand{font-size:9px;letter-spacing:1.4px;font-weight:800}.widget small{font-size:9px;letter-spacing:.8px;color:#758474}.widget-ring{width:82px;height:82px;border-radius:50%;border:7px solid #cbd7c9;display:grid;place-items:center;align-self:center;position:relative}.widget-ring:after{content:"";position:absolute;inset:-7px;border-radius:50%;border:7px solid var(--sage);border-left-color:transparent;border-bottom-color:transparent;transform:rotate(35deg)}.widget-ring b{font:700 20px Manrope}.habits-widget{background:#f1e5dc;color:#594d45}.habits-widget>b{font:700 27px Manrope}.dots{display:flex;gap:5px}.dots i{width:10px;height:10px;border-radius:50%;background:#e0c9ba}.dots i.on{background:#a77d67}.w-wide{grid-column:span 2;min-height:132px;background:#eeeee5}.w-wide>b{font:700 17px Manrope}.w-wide .bar{background:#dfe3d8}.w-wide .bar i{background:#879b87}.week{display:flex;justify-content:space-between;gap:5px}.week span{flex:1;text-align:center;background:#e1e7dd;padding:8px 0;border-radius:10px;font-size:10px;color:#657864}.week span.on{background:#8ca18b;color:white}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat{padding:18px;display:flex;flex-direction:column;gap:9px}.stat span,.stat small{font-size:11px;color:var(--muted)}.stat b{font:700 28px Manrope}
footer{text-align:center;padding:18px;color:#a0a397;font-size:9px;letter-spacing:1.5px}footer span{color:var(--sage)}
@media(min-width:600px){main{padding-left:28px;padding-right:28px}.top{padding-left:32px;padding-right:32px}}