:root {
  --bg:#f5f1ea; --surface:#fffdf9; --soft:#f2e8de; --ink:#302c28; --muted:#817a72;
  --line:#e5ddd2; --primary:#d77957; --primary-deep:#aa593e; --pink:#d99ca1;
  --yellow:#d5bd82; --mint:#87a792; --mint-soft:#e5eee8; --dark:#37312c;
  --peach-fill:#f3e7de; --rose-fill:#f2e5e6; --sand-fill:#f1ead9; --sage-fill:#e4ede7;
  --success:#607f6b; --shadow:0 16px 42px rgba(76,62,49,.07); --sidebar:224px;
}
body[data-theme="pink"] {
  --bg:#f7f2f2; --soft:#f1e5e7; --line:#e5dadd; --primary:#c9818c;
  --primary-deep:#a8616d; --pink:#d99ca1; --dark:#3a3133;
  --peach-fill:#f2e5e2; --rose-fill:#f3e4e8; --sand-fill:#f0e8dc; --sage-fill:#e6ece8;
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { color:inherit; }
.app-shell { height:100vh; display:grid; grid-template-columns:var(--sidebar) 1fr; }

.sidebar { min-height:0; background:var(--surface); border-right:1px solid var(--line); padding:24px 18px 17px; display:flex; flex-direction:column; position:relative; z-index:20; overflow:hidden; }
.brand { display:flex; align-items:center; gap:11px; padding:0 8px 20px; }
.brand>span { width:42px; height:42px; display:grid; place-items:center; background:var(--soft); border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.brand-mark img { width:37px; height:32px; object-fit:contain; image-rendering:pixelated; }
.brand strong,.brand small,.greeting strong,.greeting span { display:block; }
.brand strong { font-size:18px; }.brand small { margin-top:2px; color:var(--muted); font-size:10px; }
.greeting { padding:13px 12px 15px; border-top:1px solid var(--line); }
.greeting strong { font-size:12px; }.greeting span { color:var(--muted); font-size:9px; margin-top:4px; }
nav { display:grid; gap:4px; }
.nav-item { border:0; background:transparent; border-radius:10px; display:flex; align-items:center; gap:12px; padding:11px 12px; color:var(--muted); cursor:pointer; text-align:left; }
.nav-item>img { width:27px; height:22px; object-fit:contain; image-rendering:pixelated; opacity:.78; transition:.18s; }.nav-item span { font-size:12px; font-weight:650; }
.nav-item:hover { background:var(--soft); color:var(--ink); }.nav-item.active { background:var(--dark); color:#fff; }
.nav-item:hover>img,.nav-item.active>img { opacity:1; transform:translateY(-1px); }
.side-illustration { margin-top:auto; height:140px; overflow:hidden; position:relative; }
.side-illustration::before { content:""; position:absolute; inset:25px 5px 5px; background:var(--soft); border-radius:50% 50% 18px 18px; }
.side-illustration img { width:190px; height:135px; position:relative; z-index:1; object-fit:contain; object-position:right bottom; transform:translateX(-1px); }
.device-status { display:flex; align-items:center; gap:9px; padding:12px; border-radius:13px; background:var(--soft); border:1px solid var(--line); }
.device-pet { width:32px; height:27px; object-fit:contain; image-rendering:pixelated; flex:0 0 auto; }
.device-status strong,.device-status small { display:block; }.device-status strong { font-size:10px; }.device-status small { color:var(--muted); font-size:8px; margin-top:2px; }

main { min-width:0; height:100vh; padding:0 30px 22px; display:grid; grid-template-rows:78px 1fr; }
.topbar { display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--line); }
.page-heading { margin-right:auto; }.page-heading small { color:var(--muted); font-size:9px; }.page-heading h1 { margin:2px 0 0; font-size:21px; letter-spacing:-.04em; }
.top-actions { display:flex; align-items:center; gap:8px; }
.demo-badge { color:var(--muted); font-size:8px; margin-right:3px; }
.pet-control { height:42px; min-width:106px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:3px 5px 3px 10px; display:flex; align-items:center; justify-content:flex-end; gap:7px; cursor:pointer; box-shadow:0 5px 16px rgba(76,62,49,.04); }
.pet-control>span { text-align:right; line-height:1.05; }.pet-control small,.pet-control strong { display:block; white-space:nowrap; }.pet-control small { color:var(--muted); font-size:7px; }.pet-control strong { margin-top:4px; font-size:9px; }
.pet-control img { width:40px; height:34px; object-fit:contain; image-rendering:pixelated; }.pet-control:hover { background:var(--soft); }.pet-control:hover img { transform:translateY(-2px); }
.pet-pop { animation:petPop .36s ease both; } @keyframes petPop { 0%{transform:scale(.86) rotate(-3deg)} 70%{transform:scale(1.07) rotate(2deg)} 100%{transform:none} }
.child-switcher,.period-switcher { display:flex; padding:4px; border-radius:11px; background:var(--soft); }
.child,.period { border:0; background:transparent; border-radius:8px; padding:7px 11px; color:var(--muted); cursor:pointer; font-size:9px; }
.child.active,.period.active { background:var(--surface); color:var(--ink); box-shadow:0 3px 12px rgba(71,43,26,.06); }
.theme-button,.mobile-menu { height:35px; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:0 10px; display:flex; align-items:center; gap:6px; font-size:9px; font-weight:700; cursor:pointer; }
.theme-button i { width:12px; height:12px; border-radius:4px; background:var(--primary); }.mobile-menu { display:none; }

.page-stage { min-height:0; padding-top:20px; }
.page { display:none; height:100%; min-height:0; animation:pageIn .32s ease both; }
.page.active { display:grid; }
@keyframes pageIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.eyebrow { color:var(--primary-deep); font-size:8px; font-weight:800; letter-spacing:.15em; }

.page[data-page="overview"] { grid-template-rows:auto 132px minmax(230px,1fr); gap:14px; }
.overview-title { display:flex; align-items:end; justify-content:space-between; }
.overview-title h2 { margin:4px 0 0; font-size:26px; letter-spacing:-.05em; }.overview-title h2 b { color:var(--primary-deep); }
.live-pill { display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:9px; background:var(--mint-soft); color:var(--success); font-size:9px; font-weight:700; }
.live-pill i { width:6px; height:6px; border-radius:50%; background:var(--mint); }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.metric-card { min-width:0; border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:16px 18px; position:relative; overflow:hidden; }
.metric-card.orange-card { background:var(--peach-fill); }.metric-card:nth-child(2){background:var(--sage-fill)}.metric-card:nth-child(3){background:var(--rose-fill)}.metric-card:nth-child(4){background:var(--sand-fill)}.metric-card>span { display:block; color:var(--muted); font-size:9px; }.metric-card>strong { display:block; margin-top:5px; font-size:25px; letter-spacing:-.05em; }.metric-card strong small { color:var(--muted); font-size:9px; margin-left:4px; letter-spacing:0; }
.spark-bars { position:absolute; right:15px; bottom:15px; height:45px; width:82px; display:flex; align-items:end; gap:5px; }.spark-bars i { flex:1; background:var(--primary); border-radius:4px 4px 1px 1px; }
.mini-line { position:absolute; right:16px; bottom:20px; width:85px; height:34px; border-bottom:1px solid var(--line); transform:skewY(-14deg); }.mini-line i,.mini-line b { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--mint); }.mini-line i { left:8px; bottom:3px; }.mini-line b { right:7px; top:1px; }
.dot-row { position:absolute; right:17px; bottom:19px; display:flex; gap:5px; }.dot-row i { width:11px; height:11px; border-radius:50%; background:var(--primary); }.dot-row i:nth-child(2){background:var(--pink)}.dot-row i:nth-child(3){background:var(--yellow)}.dot-row i:nth-child(4){background:var(--mint)}
.comfort-badge { position:absolute; right:15px; bottom:17px; color:var(--success); background:var(--mint-soft); padding:6px 8px; border-radius:8px; font-size:8px; }
.overview-bottom { min-height:0; display:grid; grid-template-columns:1.18fr .82fr; gap:12px; }
.panel { min-width:0; min-height:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; }.panel-head span { color:var(--muted); font-size:8px; }.panel-head h3 { margin:3px 0 0; font-size:15px; }.panel-head>strong { font-size:12px; }.panel-head>strong small { color:var(--muted); font-size:8px; margin-left:3px; }
.week-chart { height:calc(100% - 43px); min-height:120px; display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:11px; padding:16px 8px 16px; border-bottom:1px solid var(--line); }
.week-bar { height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; }.week-bar i { display:block; width:min(28px,65%); min-height:7px; background:var(--primary); border-radius:7px 7px 2px 2px; }.week-bar span { color:var(--muted); font-size:7px; margin-bottom:-14px; transform:translateY(13px); }
.live-panel { background:var(--soft); position:relative; display:flex; align-items:flex-start; }.live-copy { position:relative; z-index:2; }.live-copy>span { color:var(--muted); font-size:8px; }.live-copy>strong { display:block; margin:7px 0 10px; font-size:34px; letter-spacing:-.06em; }.live-copy div { display:flex; gap:5px; flex-wrap:wrap; }.live-copy b { padding:6px 8px; border-radius:8px; background:var(--surface); font-size:8px; }
.live-panel img { position:absolute; z-index:1; width:78%; height:100%; object-fit:contain; object-position:right bottom; right:-8%; bottom:-8%; }

.feature-page { grid-template-rows:minmax(205px,.9fr) minmax(220px,1fr); gap:14px; }
.feature-hero { min-height:0; position:relative; overflow:hidden; border-radius:19px; padding:25px 30px; display:flex; align-items:center; border:1px solid var(--line); }
.peach-hero { background:var(--peach-fill); }.yellow-hero { background:var(--sand-fill); }.pink-hero { background:var(--rose-fill); }.mint-hero { background:var(--sage-fill); }
.feature-copy { position:relative; z-index:2; min-width:250px; }.feature-copy h2 { margin:6px 0 10px; font-size:27px; letter-spacing:-.05em; }.feature-copy p { color:var(--muted); font-size:9px; margin:7px 0 0; }.feature-number { display:flex; align-items:baseline; gap:5px; }.feature-number strong { font-size:48px; color:var(--primary-deep); letter-spacing:-.07em; }.feature-number span { color:var(--muted); font-size:10px; }.feature-number.text-number strong { font-size:37px; }
.feature-hero img { position:absolute; z-index:1; right:0; bottom:-7%; width:62%; height:112%; object-fit:contain; object-position:right bottom; }
.feature-grid { min-height:0; display:grid; gap:12px; }.three-columns { grid-template-columns:1.2fr .85fr .8fr; }.study-columns { grid-template-columns:1.12fr .9fr .76fr; }
.distance-panel { display:flex; flex-direction:column; }.distance-scale { margin-top:auto; height:8px; border-radius:8px; background:var(--soft); position:relative; }.distance-scale i { position:absolute; left:31%; right:31%; height:100%; background:var(--mint); opacity:.78; }.distance-scale b { position:absolute; top:50%; left:50%; width:15px; height:15px; border:3px solid var(--surface); border-radius:50%; background:var(--primary); transform:translate(-50%,-50%); box-shadow:0 0 0 1px var(--primary); }.scale-label { display:flex; justify-content:space-between; color:var(--muted); font-size:7px; margin-top:7px; }.good-text { color:var(--success)!important; font-weight:700; }
.event-compact { margin-top:21px; display:flex; flex-direction:column; gap:6px; }.event-compact b { color:var(--primary-deep); font-size:18px; }.event-compact span { color:var(--muted); font-size:8px; }
.reminder-panel { position:relative; }.alert-bars { position:absolute; left:18px; right:18px; bottom:18px; height:42px; display:flex; align-items:end; gap:5px; }.alert-bars i { flex:1; min-height:3px; border-radius:4px 4px 1px 1px; background:var(--primary); opacity:.68; }
.switches { display:grid; grid-template-columns:70px 1fr; grid-template-rows:1fr 1fr; align-items:center; column-gap:14px; }.eye-ring { grid-row:1/3; width:66px; height:66px; border-radius:50%; display:grid; place-content:center; text-align:center; background:conic-gradient(var(--primary) var(--ring-value,92%),var(--soft) 0); position:relative; }.eye-ring::after { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--surface); }.eye-ring strong,.eye-ring span { position:relative; z-index:1; display:block; }.eye-ring strong { font-size:17px; }.eye-ring span { color:var(--muted); font-size:7px; }.switches label { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:9px; }.switches label:last-child { border:0; }.switches input { display:none; }.switches label i { width:34px; height:20px; border-radius:20px; background:#d6d0c8; position:relative; cursor:pointer; }.switches label i::after { content:""; position:absolute; width:14px; height:14px; left:3px; top:3px; border-radius:50%; background:var(--surface); transition:.2s; }.switches input:checked+i { background:var(--primary); }.switches input:checked+i::after { transform:translateX(14px); }
.compact-chart { height:calc(100% - 38px); min-height:110px; }.light-panel { background:var(--soft); }.light-balance { height:calc(100% - 41px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; }.light-balance div { text-align:center; }.light-balance span,.light-balance b { display:block; }.light-balance span { color:var(--muted); font-size:8px; }.light-balance div>b { font-size:23px; margin-top:3px; }.light-balance>i { height:8px; background:#fff; border-radius:8px; position:relative; }.light-balance>i b { position:absolute; top:50%; left:53%; width:15px; height:15px; border-radius:50%; background:var(--primary); border:3px solid #fff; transform:translate(-50%,-50%); box-shadow:0 0 0 1px var(--primary); }
.report-panel { background:var(--primary); color:#fff; position:relative; }.report-big span,.report-big strong { display:block; }.report-big span { font-size:8px; opacity:.72; }.report-big strong { margin-top:1px; font-size:50px; letter-spacing:-.07em; }.report-bars { display:grid; gap:7px; margin-top:12px; }.report-row { display:grid; grid-template-columns:34px 1fr 20px; gap:6px; align-items:center; font-size:7px; }.report-row i { height:5px; border-radius:8px; background:rgba(255,255,255,.25); overflow:hidden; }.report-row i b { display:block; height:100%; border-radius:8px; background:#fff; }.report-panel button { position:absolute; top:15px; right:15px; border:1px solid rgba(255,255,255,.38); color:#fff; background:transparent; border-radius:8px; padding:6px 8px; font-size:8px; cursor:pointer; }

.qa-layout { min-height:0; display:grid; grid-template-columns:1.25fr .75fr; gap:12px; }.qa-panel { padding:16px 18px; }.qa-list { margin-top:8px; }.qa-row { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }.qa-row>span { display:grid; place-items:center; height:27px; border-radius:8px; background:var(--soft); color:var(--primary-deep); font-size:8px; font-weight:700; }.qa-row strong,.qa-row small { display:block; }.qa-row strong { font-size:9px; }.qa-row small { margin-top:3px; color:var(--muted); font-size:7px; }.qa-row>b { color:var(--success); font-size:8px; }.qa-row>b.review { color:#98744f; }
.subject-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }.subject-top span { color:var(--muted); font-size:8px; }.subject-top h3 { font-size:20px; margin:5px 0 0; }.subject-donut { --donut-value:75%; flex:0 0 auto; width:63px; height:63px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--primary) var(--donut-value),var(--soft) 0); position:relative; }.subject-donut::after { content:""; position:absolute; inset:8px; border-radius:50%; background:#fff; }.subject-donut strong { position:relative; z-index:1; font-size:13px; }.subject-donut strong::after { content:"%"; font-size:6px; margin-left:1px; color:var(--muted); }.subject-bars { display:grid; gap:11px; margin-top:15px; }.subject-row div:first-child { display:flex; justify-content:space-between; font-size:8px; margin-bottom:5px; }.subject-row div:last-child { height:7px; background:var(--soft); border-radius:8px; overflow:hidden; }.subject-row i { display:block; height:100%; border-radius:8px; background:var(--primary); }
.environment-grid { min-height:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.environment-card { border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }.environment-card.warm{background:var(--peach-fill)}.environment-card.rose{background:var(--rose-fill)}.environment-card.yellow{background:var(--sand-fill)}.environment-card.mint{background:var(--sage-fill)}.environment-card span,.environment-card strong,.environment-card b { display:block; }.environment-card>span { color:var(--muted); font-size:8px; }.environment-card>strong { font-size:29px; margin-top:6px; letter-spacing:-.04em; }.environment-card>strong small { font-size:9px; margin-left:3px; }.environment-card>b { color:var(--success); font-size:8px; margin-top:7px; }.micro-bars { position:absolute; right:18px; bottom:20px; width:70px; height:55px; display:flex; align-items:end; gap:5px; }.micro-bars i { flex:1; border-radius:4px 4px 1px 1px; background:var(--primary); opacity:.65; }.micro-line { position:absolute; right:18px; bottom:26px; width:78px; height:44px; border-bottom:1px solid rgba(217,156,161,.35); transform:skewY(-12deg); }.micro-line i,.micro-line b,.micro-line em { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--pink); }.micro-line i { left:4px; bottom:4px; }.micro-line b { left:34px; bottom:16px; }.micro-line em { right:2px; top:2px; }.air-dots { position:absolute; right:19px; bottom:31px; display:flex; gap:5px; }.air-dots i { width:12px; height:12px; border-radius:50%; background:var(--yellow); }.air-dots i:nth-child(2){opacity:.85}.air-dots i:nth-child(3){opacity:.65}.air-dots i:nth-child(4){opacity:.45}.air-dots i:nth-child(5){opacity:.25}.device-ring { position:absolute; right:18px; bottom:17px; width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--mint) 98%,rgba(135,167,146,.18) 0); }.device-ring::after { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--sage-fill); }.device-ring span { position:relative; z-index:1; color:var(--success); font-size:10px; font-weight:800; }
.toast { position:fixed; z-index:60; right:20px; bottom:20px; padding:11px 14px; border-radius:10px; background:var(--dark); color:#fff; font-size:9px; opacity:0; transform:translateY(8px); transition:.2s; pointer-events:none; }.toast.show { opacity:1; transform:none; }.backdrop { display:none; }

@media(max-width:1050px){:root{--sidebar:195px}.sidebar{padding-left:14px;padding-right:14px}main{padding-left:20px;padding-right:20px}.demo-badge{display:none}.feature-hero img{width:67%}.side-illustration{height:115px}.metric-card{padding:13px}.metric-card>strong{font-size:21px}.study-columns{grid-template-columns:1fr 1fr}.report-panel{position:absolute;right:42px;bottom:37px;width:210px;height:180px}.page[data-page="study"] .feature-grid{padding-right:222px;grid-template-columns:1fr}}
@media(max-width:800px){html,body{overflow:hidden}.app-shell{display:block}.sidebar{position:fixed;inset:0 auto 0 0;width:220px;transform:translateX(-100%);transition:.22s;box-shadow:var(--shadow)}body.menu-open .sidebar{transform:none}.backdrop{position:fixed;inset:0;z-index:10;background:rgba(45,35,30,.3)}body.menu-open .backdrop{display:block}main{height:100vh;padding:0 14px 14px;grid-template-rows:100px 1fr}.topbar{flex-wrap:wrap;padding:12px 0;gap:10px}.mobile-menu{display:flex}.page-heading{margin-right:auto}.page-heading small{display:none}.top-actions{width:100%;overflow-x:auto}.page-stage{padding-top:11px}.page[data-page="overview"]{grid-template-rows:auto 105px 1fr;gap:9px}.overview-title h2{font-size:21px}.metric-grid{grid-template-columns:repeat(4,150px);overflow:hidden}.metric-card{padding:12px}.spark-bars,.mini-line,.dot-row,.comfort-badge{display:none}.overview-bottom{grid-template-columns:1fr}.live-panel{display:none}.feature-page{grid-template-rows:180px 1fr;gap:9px}.feature-hero{padding:18px}.feature-copy h2{font-size:22px}.feature-number strong{font-size:39px}.feature-hero img{width:64%;height:100%;bottom:0}.three-columns,.study-columns,.qa-layout,.environment-grid{grid-template-columns:1fr 1fr}.three-columns .switches{display:none}.study-columns{padding-right:0!important}.report-panel{position:static!important;width:auto!important;height:auto!important}.study-columns .focus-panel{grid-row:1/3}.qa-panel{grid-row:1/3}.environment-card{padding:14px}.side-illustration{display:none}}
@media(max-width:520px){main{grid-template-rows:96px 1fr}.theme-button span{display:none}.period,.child{padding:6px 8px}.page[data-page="overview"]{grid-template-rows:auto 92px 1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}.metric-card:nth-child(n+3){display:none}.overview-bottom{height:100%}.focus-panel{height:100%}.feature-page{grid-template-rows:170px 1fr}.feature-copy{min-width:160px}.feature-hero img{width:70%;right:-15%}.three-columns{grid-template-columns:1fr 1fr}.three-columns .distance-panel{grid-row:1/3}.event-compact{margin-top:20px}.study-columns{grid-template-columns:1fr 1fr}.study-columns .focus-panel{display:none}.qa-layout{grid-template-columns:1fr}.subject-panel{display:none}.qa-panel{grid-row:auto}.environment-grid{grid-template-columns:1fr 1fr}.environment-card strong{font-size:23px}.week-chart{gap:5px}.week-bar i{width:18px}}
@media(max-width:800px){.pet-control{min-width:40px;width:40px;height:35px;padding:0;justify-content:center}.pet-control>span{display:none}.pet-control img{width:34px;height:29px}}
@media(max-width:520px){.nav-item>img{width:19px;height:17px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}