:root{--ink:#27342f;--muted:#84908a;--line:#e8ebe5;--paper:#f7f8f4;--white:#fff;--green:#486b5a;--soft-green:#dce9df;--cream:#f4ead7;--coral:#e78f74;--shadow:0 18px 50px rgba(56,73,62,.09)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#e8eee9;color:var(--ink);font-family:'DM Sans','Noto Sans SC',sans-serif}body{display:flex;justify-content:center}.app-shell{width:100%;max-width:480px;min-height:100vh;background:var(--paper);position:relative;box-shadow:0 0 70px rgba(37,55,44,.08)}.app-main{padding:26px 20px 106px;min-height:100vh}.view{display:none;animation:fade-in .35s ease}.view.active{display:block}@keyframes fade-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}button{font:inherit;color:inherit;border:0;cursor:pointer}.topbar,.detail-topbar,.home-intro,.section-heading,.detail-meta{display:flex;align-items:center;justify-content:space-between}.brand-mark{font-size:16px;font-weight:700;letter-spacing:2px}.brand-dot{display:inline-block;width:9px;height:9px;background:var(--coral);border-radius:50%;margin-right:7px}.avatar-button{width:38px;height:38px;border-radius:50%;background:#cad8ce;color:#426151;font-size:12px;font-weight:700}.avatar-button span{display:block;font-size:10px;margin-top:-1px}.home-intro{margin:32px 0 23px}.eyebrow{margin:0 0 9px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase}.home-intro h1{font-size:25px;line-height:1.25;letter-spacing:-.4px;margin:0;font-weight:700}.wave{color:var(--coral);font-size:20px;margin-left:5px}.icon-button{height:38px;width:38px;border-radius:50%;background:var(--white);position:relative;color:#8b958e;font-size:19px}.icon-button i{position:absolute;width:6px;height:6px;background:var(--coral);border:2px solid var(--white);border-radius:50%;top:8px;right:8px}.focus-card{height:260px;background:var(--green);border-radius:8px;position:relative;overflow:hidden;color:#f7f9f4;padding:25px 24px;box-shadow:var(--shadow)}.focus-copy{position:relative;z-index:2}.tag{display:inline-block;padding:6px 10px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.5px}.tag-light{background:rgba(255,255,255,.18);color:#f7f9f4}.focus-card h2{font-size:27px;line-height:1.23;margin:15px 0 9px;letter-spacing:-.8px}.focus-card h2 em{font-style:normal;color:#cfe0d0}.focus-card p{font-size:12px;color:#cbdacf;margin:0}.primary-button{margin-top:19px;border-radius:5px;background:#f3f7ef;padding:11px 14px;color:var(--green);font-weight:700;font-size:12px}.primary-button span,.text-button span,.start-button span{font-size:17px;margin-left:13px}.focus-visual{position:absolute;right:-12px;bottom:-11px;width:220px;height:220px;border-radius:50%;background:#718f76;opacity:.85}.sun-disc{position:absolute;width:80px;height:80px;border-radius:50%;background:#f4c985;top:31px;right:40px;box-shadow:0 0 0 20px rgba(244,201,133,.12)}.leaf{position:absolute;background:#aac4a9;border-radius:100% 0 100% 0;transform:rotate(20deg)}.leaf-a{width:125px;height:42px;right:4px;bottom:61px}.leaf-b{width:92px;height:30px;right:70px;bottom:18px;transform:rotate(-25deg)}.leaf-c{width:70px;height:25px;right:4px;bottom:130px;transform:rotate(-45deg)}.section-block{margin-top:29px}.section-heading h2{font-size:16px;margin:0;font-weight:700}.text-button{font-size:11px;color:var(--muted);background:transparent}.text-button span{color:var(--green);margin-left:5px;font-size:15px}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:13px}.status-card{border-radius:8px;padding:16px 15px 14px;min-height:172px;position:relative;overflow:hidden}.status-mint{background:var(--soft-green)}.status-cream{background:var(--cream)}.status-icon{height:27px;color:#658275;font-size:22px}.status-card p{color:#718079;font-size:11px;margin:7px 0 3px}.status-card strong{font-size:26px;letter-spacing:-.8px}.status-card strong span{font-size:12px;font-weight:500;margin-left:2px;color:#7c8c83}.status-card small{display:block;color:#87948d;font-size:9px;margin-top:2px}.mini-bars{display:flex;align-items:end;height:28px;gap:4px;position:absolute;bottom:14px;left:15px}.mini-bars i{width:6px;border-radius:5px;background:#86a694}.mini-bars i:nth-child(1){height:10px}.mini-bars i:nth-child(2){height:16px}.mini-bars i:nth-child(3){height:12px}.mini-bars i:nth-child(4){height:22px}.mini-bars i:nth-child(5){height:17px}.mini-bars i:nth-child(6){height:25px}.mini-bars i:nth-child(7){height:21px}.energy-line{position:absolute;left:15px;right:15px;bottom:19px;height:7px;background:#dfcfae;border-radius:10px}.energy-line i{display:block;width:74%;height:100%;background:#c49d65;border-radius:10px}.round-plus{background:var(--white);border-radius:50%;width:26px;height:26px;color:var(--green);font-size:19px;line-height:20px}.routine-section{margin-top:28px}.routine-list{margin-top:12px;background:var(--white);border-radius:8px;padding:4px 14px;box-shadow:0 8px 26px rgba(55,76,62,.04)}.routine-item{width:100%;min-height:66px;display:flex;align-items:center;background:transparent;border-bottom:1px solid var(--line);text-align:left}.routine-item:last-child{border-bottom:0}.routine-time{width:43px;color:#9ba59f;font-size:10px}.routine-symbol{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;margin-right:11px}.symbol-sun{background:#f9e9c8;color:#bc8b4b}.symbol-water{background:#deebef;color:#6b9ba1}.symbol-moon{background:#e7e0ef;color:#86769c}.routine-info{flex:1}.routine-info strong{display:block;font-size:12px}.routine-info small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.check-dot{width:19px;height:19px;border-radius:50%;border:1.5px solid #cdd7d0}.check-dot.done{background:var(--green);border-color:var(--green);color:#fff;display:grid;place-items:center;font-size:11px}.bottom-nav{height:76px;position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid rgba(215,222,215,.7);display:flex;justify-content:space-around;align-items:center;padding:7px 11px calc(7px + env(safe-area-inset-bottom))}.nav-item{min-width:47px;height:53px;background:transparent;color:#a2aba5;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}.nav-item span{font-size:20px;line-height:20px}.nav-item small{font-size:9px}.nav-item.active{color:var(--green)}.nav-center{width:50px;height:50px;min-width:50px;background:var(--green);color:#fff!important;border-radius:50%;box-shadow:0 7px 16px rgba(72,107,90,.28);margin-top:-21px}.nav-center span{font-size:27px;font-weight:300}.detail-topbar{margin-bottom:22px;color:var(--muted);font-size:12px;font-weight:600}.back-button{font-size:27px;background:transparent;color:var(--ink);line-height:20px;padding:0}.detail-topbar .icon-button{background:transparent;width:auto;font-size:16px}.detail-hero{height:260px;border-radius:8px;overflow:hidden;position:relative;background:#637a64}.detail-image{position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(43,69,49,.05) 20%,rgba(35,53,40,.75)),url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=900&q=85');background-size:cover;background-position:center}.detail-overlay{position:absolute;left:22px;right:22px;bottom:22px;color:#fff}.detail-overlay h1{font-size:31px;margin:13px 0 0;letter-spacing:-1px}.detail-body{padding:22px 2px}.detail-meta{justify-content:flex-start;gap:17px;color:var(--muted);font-size:10px}.detail-meta b{color:var(--green);font-size:15px;vertical-align:-1px;margin-right:3px}.detail-lead{color:#66746c;font-size:13px;line-height:1.75;margin:20px 0 28px}.detail-body h2{font-size:16px;margin:0 0 15px}.steps{list-style:none;padding:0;margin:0}.steps li{display:flex;gap:13px;margin-bottom:20px}.steps li>span{color:#a6b2aa;font-size:11px;padding-top:2px}.steps strong{display:block;font-size:12px}.steps small{display:block;color:var(--muted);font-size:10px;line-height:1.6;margin-top:4px}.start-button{width:100%;background:var(--green);color:#fff;border-radius:5px;padding:15px;font-size:13px;font-weight:700;margin-top:7px}.placeholder-view{text-align:center;padding:90px 20px}.placeholder-icon{width:54px;height:54px;display:grid;place-items:center;background:var(--soft-green);border-radius:50%;color:var(--green);font-size:25px;margin:0 auto 23px}.placeholder-view h1{font-size:29px;line-height:1.3;margin:10px 0 17px;letter-spacing:-1px}.placeholder-view>p:last-child{color:var(--muted);font-size:12px;line-height:1.9}.toast{position:fixed;z-index:20;left:50%;bottom:93px;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:#27342f;color:#fff;border-radius:5px;padding:12px 17px;font-size:11px;white-space:nowrap;transition:all .3s ease}.toast.show{transform:translate(-50%,0);opacity:1}@media(min-width:700px){.app-shell{margin:22px 0;min-height:calc(100vh - 44px);border-radius:18px;overflow:hidden}.bottom-nav{bottom:22px;border-radius:0 0 18px 18px}.app-main{min-height:calc(100vh - 44px)}}