/* ============================================================
   Pantry Tracker — app mock screens for the home page.

   HTML/CSS recreations of the real Compose screens, filled with
   demo data (no real account, no real products). Everything is
   authored on the app's own 416 x 876 canvas and scaled as one
   block by --k, so a mock stays pixel-true at any phone width.

   Layouts mirror the Android composables — keep them in step
   with the app (PantryCards.kt, ShoppingListPage.kt, …) rather
   than inventing UI here.

   Theme: the app is dark-only today, so every colour in this file
   is a literal and the mocks stay dark even when the site is
   switched to light. When the app ships a light theme, add
   [data-theme="light"] overrides here.
   ============================================================ */

/* ---------- device frame ---------- */
.pt-phone{--pw:270;--k:calc(var(--pw)/440);position:relative;flex:none;width:calc(var(--pw)*1px);aspect-ratio:440/900;padding:calc(12px*var(--k));border-radius:calc(50px*var(--k));background:#06070A;border:1px solid rgba(230,225,230,0.16);box-shadow:0 28px 70px var(--phone-shadow,rgba(8,6,16,0.6)),0 0 0 calc(8px*var(--k)) var(--phone-ring,rgba(208,188,255,0.05))}
.pt-phone-screen{position:relative;width:100%;height:100%;border-radius:calc(39px*var(--k));overflow:hidden;background:#0F1115;contain:paint}
.app-pager{position:absolute;top:0;left:0;display:flex;transform-origin:0 0;transform:scale(var(--k)) translate3d(calc(var(--page,0)*-416px),0,0);transition:transform .7s cubic-bezier(.6,.05,.25,1),opacity .35s ease}
.app-pager.is-wrapping{transition:none;opacity:0}
.pt-phone-screen>.app{position:absolute;top:0;left:0;transform-origin:0 0;transform:scale(var(--k))}

/* ---------- one app screen (416 x 876 canvas) ---------- */
.app{position:relative;flex:none;width:416px;height:876px;overflow:hidden;padding:26px 20px 0;background:#0F1115;color:#E6E1E6;font-size:14px;line-height:1.35;text-align:left;-webkit-user-select:none;user-select:none}
.app *,.frag *{box-sizing:border-box}
.app svg,.frag svg{display:block}
.app svg.ln,.frag svg.ln{fill:none;stroke:#E6E1E6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app svg.acc,.frag svg.acc{stroke:#D0BCFF}
.app svg.red{stroke:#FF6B6B}
.app svg.ink,.frag svg.ink{stroke:#1A102C;stroke-width:2.2}
.app svg.grn,.frag svg.grn{stroke:#3DDC84;stroke-width:2.6}
.app svg.dots{fill:#C9C3D0}

/* header */
.a-hdr{display:flex;align-items:center;justify-content:space-between;height:48px}
.a-title{font-size:22px;font-weight:700;letter-spacing:.2px}
.a-hicons{display:flex;align-items:center}
.a-hbtn{width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.a-hbtn svg{width:21px;height:21px}

/* search field */
.a-search{margin-top:12px;height:48px;border-radius:14px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);display:flex;align-items:center;gap:12px;padding:0 9px}
.a-search i{width:33px;height:33px;border-radius:10px;background:rgba(208,188,255,0.14);display:flex;align-items:center;justify-content:center}
.a-search i svg{width:18px;height:18px}
.a-search span{font-size:14px;font-weight:600;color:rgba(230,225,230,0.62)}

/* product thumbnail (demo artwork from the sprite in index.html) */
.a-thumb{flex:none;width:60px;height:60px;border-radius:9px;overflow:hidden;border:1px solid rgba(230,225,230,0.12);background:#2B2E3A}
.a-thumb.s{width:53px;height:53px}
.a-thumb svg{width:100%;height:100%}

/* pantry / shopping item card */
.a-card{position:relative;margin-top:13px;border-radius:15px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);padding:15px}
.a-card::before{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,rgba(208,188,255,0),rgba(208,188,255,0.25),rgba(208,188,255,0))}
.a-card.low{border-color:rgba(229,115,115,0.45)}
.a-row{display:flex;gap:11px;align-items:flex-start}
.a-meta{flex:1;min-width:0}
.a-name{font-size:15.5px;font-weight:700;line-height:20px}
.a-sub{margin-top:3px;font-size:12px;color:#C9C3D0;letter-spacing:.3px;line-height:15px}
.a-sub+.a-sub{margin-top:2px;letter-spacing:0}
.a-div{height:1px;background:rgba(230,225,230,0.12);margin:8px 0 11px}
.a-div.s{margin:11px 0}
.a-fill{display:flex;align-items:center;gap:9px;margin-top:8px}
.a-fill b{flex:1;height:11px;border-radius:999px;background:#2B2E3A;overflow:hidden}
.a-fill b i{display:block;height:100%;border-radius:999px;background:#D0BCFF}
.a-fill span{min-width:64px;text-align:right;font-size:12px;font-weight:700;color:#D0BCFF}
.a-card.low .a-fill b i{background:#FF6B6B}
.a-card.low .a-fill span{color:#FF6B6B}
.a-qbox{border-radius:13px;background:#2B2E3A;border:1px solid rgba(208,188,255,0.12);padding:11px 13px;text-align:center}
.a-qlabel{font-size:11px;font-weight:700;letter-spacing:.9px;color:#C9C3D0}
.a-qnum{margin-top:5px;font-size:31px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.a-qctl{position:relative;margin-top:10px;height:44px;display:flex;align-items:center;justify-content:center}
.a-qctl.s{margin-top:9px;height:38px}
.a-ql{position:absolute;left:0;font-size:12px;color:#C9C3D0}
.a-qr{position:absolute;right:0;font-size:12px;color:#C9C3D0}
.a-pencil{width:35px;height:35px;border-radius:11px;border:1px solid rgba(230,225,230,0.12);display:flex;align-items:center;justify-content:center}
.a-pencil svg{width:15px;height:15px}
.a-step{display:flex;gap:4px}
.a-step i{font-style:normal;background:#2B2E3A;border:1px solid rgba(230,225,230,0.12);color:#D0BCFF;font-size:21px;font-weight:700;line-height:24px;padding:8px 34px}
.a-step i:first-child{border-radius:999px 7px 7px 999px}
.a-step i:last-child{border-radius:7px 999px 999px 7px}
.a-step.s{gap:3px}
.a-step.s i{font-size:20px;line-height:22px;padding:6px 20px}

/* shopping-only bits */
.a-shead{display:flex;gap:12px;align-items:center}
.a-shead .a-name{font-weight:600}
.a-cluster{display:flex;gap:7px;align-items:center;flex:none}
.a-cb{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#151823;border:1px solid rgba(230,225,230,0.12)}
.a-cb svg{width:17px;height:17px}
.a-cb.tick{background:#D0BCFF;border:0}
.a-cb.tick svg{width:13px;height:13px;stroke-width:2.4}
.a-cb.done{background:rgba(61,220,132,0.15);border:0}
.a-cb.scan{width:38px;height:38px}
.a-cb.scan svg{width:21px;height:21px;stroke:#C9C3D0;stroke-width:2}
.a-cb.trash{border-color:rgba(255,107,107,0.4)}
.a-sqbox{border-radius:13px;background:linear-gradient(180deg,#2B2E3A 0%,rgba(31,35,50,0.8) 100%);border:1px solid rgba(208,188,255,0.12);padding:13px 15px;text-align:center}
.a-sqfield{margin:5px auto 0;width:121px;background:#2B2E3A;border:1px solid rgba(230,225,230,0.12);border-radius:9px;padding:3px 6px;font-size:31px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}

/* bottom primary bar + mic FAB */
.a-bar{position:absolute;left:14px;right:14px;bottom:16px}
.a-bar::before{content:"";position:absolute;left:6px;right:6px;top:4px;bottom:0;border-radius:999px;background:rgba(208,188,255,0.30);filter:blur(16px)}
.a-bar>div{position:relative;height:54px;border-radius:999px;background:#D0BCFF;display:flex;align-items:center;justify-content:center;gap:9px;color:#1A102C;font-size:16.5px;font-weight:700;letter-spacing:.2px}
.a-bar>div.s{font-size:15.5px}
.a-bar svg{width:19px;height:19px}
.a-bar i{width:24px;height:24px;border-radius:50%;background:#1A102C;display:flex;align-items:center;justify-content:center}
.a-bar i svg{width:13px;height:13px;stroke:#D0BCFF;stroke-width:2.4}
/* Shopping: "Clear selection" sits above the CTA whenever the list has items (ShoppingListPage.kt, bottom actions) */
.a-clear{display:flex;align-items:center;justify-content:center;height:47px;margin-bottom:9px;border-radius:9px;border:1px solid rgba(230,225,230,0.24);background:#0F1115;font-size:15.5px;font-weight:600;color:#C9C3D0}
.a-bar.c::before{top:60px}
.a-fade.c{height:150px;background:linear-gradient(180deg,rgba(15,17,21,0),#0F1115 20%)}
.a-fab{position:absolute;right:18px;bottom:92px;width:64px;height:64px;border-radius:50%;background:#D0BCFF;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.a-fab svg{width:29px;height:29px;stroke:#1A102C;stroke-width:2}
.a-fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(15,17,21,0),#0F1115 62%);pointer-events:none}

/* generic surface card (calories, dashboard, exercise, routines) */
.a-tcard{margin-top:14px;border-radius:20px;background:#1B1E2A;border:1px solid rgba(230,225,230,0.12);padding:16px}
.a-trow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.a-tleft{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700}
.a-tico{flex:none;width:38px;height:38px;border-radius:11px;border:1px solid rgba(230,225,230,0.24);background:#2B2840;display:flex;align-items:center;justify-content:center}
.a-tico svg{width:20px;height:20px}
.a-dw{display:flex;border-radius:11px;background:#232736;padding:3px;font-size:14px;font-weight:600}
.a-dw span{padding:6px 13px;border-radius:9px;color:#A49EB0}
.a-dw span.on{background:#D0BCFF;color:#1A102C}
.a-kcal{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px}
.a-kbig{font-size:52px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.a-kof{font-size:17px;color:#A49EB0;margin-left:8px}
.a-chip-g{font-size:15px;font-weight:700;color:#3DDC84;background:rgba(61,220,132,0.14);border:1px solid rgba(61,220,132,0.3);padding:8px 12px;border-radius:11px;font-variant-numeric:tabular-nums}
.a-mac{display:flex;align-items:center;margin-top:13px;font-size:15px;font-weight:600}
.a-mac b{width:72px;font-weight:600}
.a-mac i{display:block;flex:1;height:9px;border-radius:5px;background:#232736;overflow:hidden}
.a-mac i u{display:block;height:100%;border-radius:5px;background:#D0BCFF}
.a-mac span{width:96px;text-align:right;font-size:14px;color:#A49EB0;font-variant-numeric:tabular-nums}
.a-mac.top{margin-top:16px;padding-bottom:13px;border-bottom:1px solid rgba(230,225,230,0.12)}
.a-mac.top span{width:118px;color:#E6E1E6;font-weight:700}
.a-slots{display:flex;gap:8px;margin-top:15px;padding-top:14px;border-top:1px solid rgba(230,225,230,0.12);overflow:hidden}
.a-slots span{flex:none;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.6px;color:#A49EB0;background:#161924;border-radius:999px;padding:6px 11px;font-variant-numeric:tabular-nums}
.a-slots span::before{content:"";width:7px;height:7px;border-radius:50%;background:#6E5FA3}
.a-tfoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:13px;color:#A49EB0}
.a-tfoot b{display:flex;align-items:center;gap:6px;font-size:14px;color:#D0BCFF}
.a-tfoot svg{width:14px;height:14px}
.a-tico.m{background:#232736}
.app svg.a-down{width:18px;height:18px;margin:0 10px 0 auto;transform:rotate(90deg);stroke:#C9C3D0;stroke-width:2}
.a-meal{display:flex;align-items:center;gap:12px;margin-top:10px;border-radius:14px;background:#161924;border:1px solid rgba(230,225,230,0.12);padding:11px 12px}
.a-meal .a-tico{width:42px;height:42px}
.a-meal b{display:block;font-size:17px;font-weight:700}
.a-meal small{display:block;font-size:13.5px;color:#A49EB0;margin-top:2px}
.a-meal small.ok{color:#C9C3D0;font-weight:600}
.a-plus,.a-ok{margin-left:auto;flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.a-plus{background:#D0BCFF}
.a-plus svg{width:15px;height:15px}
.a-ok{background:rgba(61,220,132,0.16)}
.a-ok svg{width:18px;height:18px}

/* overrides that must beat `.app svg.ln` */
.app .a-fab svg{stroke:#1A102C;stroke-width:2}
.app .a-bar i svg{stroke:#D0BCFF;stroke-width:2.4}
.app .a-cb.tick svg{stroke-width:2.4}
.app .a-cb.scan svg{stroke:#C9C3D0;stroke-width:2}
.app svg.mut{stroke:#C9C3D0}
.a-fade.s{height:70px}
.a-meal.first{margin-top:13px}
/* bar fills (no inline styles — the site CSP forbids them) */
.w12{width:12%}.w47{width:47%}.w58{width:58%}.w60{width:60%}.w61{width:61%}.w66{width:66%}.w70{width:70%}

/* ---------- page 0 · Home (DashboardPage.kt) ---------- */
.a-scroll{transition:transform .5s ease}
/* fits inside the demo's 3s beat: starts at .35s, settles by ~2.4s */
.app-home.is-live .a-scroll{transform:translateY(-328px);transition:transform 2.05s cubic-bezier(.45,0,.3,1) .35s}
.a-greet{display:flex;align-items:center;gap:9px;height:48px}
.a-greet b{flex:1;min-width:0;font-size:26px;font-weight:700;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-tier{flex:none;font-size:12px;font-weight:700;color:#9E9E9E;background:rgba(158,158,158,0.18);border-radius:999px;padding:3px 10px}
.a-burger{flex:none;width:38px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.5px}
.a-burger i{display:block;width:22px;height:2.2px;border-radius:1px;background:#E6E1E6}
.app-home{padding-left:17.6px;padding-right:17.6px}
.a-dcard{position:relative;margin-top:13px;border-radius:13px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);padding:17.6px}
.a-dcard::before{content:"";position:absolute;top:0;left:17.6px;right:17.6px;height:1px;background:linear-gradient(90deg,rgba(208,188,255,0),rgba(208,188,255,0.5),rgba(208,188,255,0))}
.a-dtitle{font-size:17.6px;font-weight:700;line-height:1.25}
.a-dtitle.s{font-size:15.4px}
.a-dhead{display:flex;align-items:center;justify-content:space-between}
.a-chev,.a-addc{flex:none;width:33px;height:33px;display:flex;align-items:center;justify-content:center}
.a-chev{border-radius:8.8px;border:1px solid rgba(230,225,230,0.24)}
.a-chev svg{width:15.4px;height:15.4px;stroke-width:2}
.a-addc{border-radius:50%;background:#D0BCFF}
.app .a-addc svg{width:16.5px;height:16.5px;stroke-width:1.9}
.a-bar10{margin-top:11px;height:11px;border-radius:5.5px;background:#2B2E3A;overflow:hidden}
.a-bar10 i{display:block;height:100%;border-radius:5.5px;background:#D0BCFF}
.a-kline{margin-top:10px;font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums}
.a-macros{display:flex;justify-content:space-evenly;margin-top:10px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.a-macros span{color:#C9C3D0}
.a-macros small{display:block;margin-top:1px;font-size:12px;color:#C9C3D0}
/* Workouts: bare header row + two tiles (no wrapping card) */
.a-wkmod{margin-top:13px}
.a-wk{display:flex;gap:11px;margin-top:11px}
.a-wk>div{position:relative;flex:1;min-width:0;border-radius:13px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);padding:15.4px}
.a-wk>div::before{content:"";position:absolute;top:0;left:15px;right:15px;height:1px;background:linear-gradient(90deg,rgba(208,188,255,0),rgba(208,188,255,0.5),rgba(208,188,255,0))}
.a-wkrow{display:flex;align-items:center;gap:9px}
.a-wkico{flex:none;width:33px;height:33px;border-radius:11px;background:rgba(208,188,255,0.10);border:1px solid rgba(208,188,255,0.22);display:flex;align-items:center;justify-content:center}
.a-wkico.m{background:#2B2E3A;border-color:rgba(230,225,230,0.12)}
.a-wkico svg{width:17.6px;height:17.6px;stroke-width:2}
.a-wklabel{font-size:11px;font-weight:700;letter-spacing:.55px;color:#C9C3D0}
.a-wkname{margin-top:11px;font-size:16.5px;font-weight:700;line-height:19.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-wksub{font-size:12px;line-height:1.4;color:#C9C3D0}
.a-pill{margin-top:11px;padding:8.8px 0;border-radius:999px;background:#D0BCFF;color:#1A102C;font-size:13.2px;font-weight:700;line-height:1.3;display:flex;align-items:center;justify-content:center;gap:6.6px}
.a-pill svg{width:12px;height:12px;fill:#1A102C}
.a-prow,.a-rrow{display:flex;align-items:center;gap:11px;margin-top:8.8px;font-size:15.4px}
.a-prow i{flex:none;width:24px;height:24px;border-radius:5.5px;background:rgba(208,188,255,0.10);border:1px solid rgba(208,188,255,0.19);display:flex;align-items:center;justify-content:center}
.a-prow i svg{width:13px;height:13px;stroke-width:2}
.a-prow b,.a-rrow b{flex:1;min-width:0;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-prow small{font-size:12px;color:#C9C3D0}
.a-food{position:relative;display:flex;align-items:center;gap:6.6px;margin-top:8.8px;border-radius:11px;background:#151823;border:1px solid rgba(230,225,230,0.12);padding:8.8px 11px 8.8px 11px;overflow:hidden}
.a-food::before{content:"";position:absolute;left:0;top:6.6px;bottom:6.6px;width:3.3px;border-radius:0 2.2px 2.2px 0;background:rgba(208,188,255,0.45)}
.a-food>div{flex:1;min-width:0}
.a-food b{display:block;font-size:14.3px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-food small{font-size:11px;color:#C9C3D0}
/* row actions: the app's CircleIconButton (30dp, V2Surface) with its real glyphs */
.a-ib{flex:none;width:33px;height:33px;border-radius:50%;background:#151823;border:1px solid rgba(230,225,230,0.12);display:flex;align-items:center;justify-content:center}
.a-ib svg{width:16.5px;height:16.5px}
.a-ib:first-of-type svg{width:15.4px;height:15.4px}
.a-ib.del{border-color:rgba(255,107,107,0.4)}
.a-rchip{flex:none;font-size:12px;font-weight:700;border-radius:8.8px;padding:4.4px 11px}
.a-additems{margin-top:13px;border-radius:999px;background:#D0BCFF;color:#1A102C;padding:13.2px 0;display:flex;align-items:center;justify-content:center;gap:8.8px;font-size:15.4px;font-weight:700;line-height:1.3}
.a-additems i{width:24px;height:24px;border-radius:50%;background:#1A102C;display:flex;align-items:center;justify-content:center}
.app .a-additems i svg{width:13px;height:13px;stroke:#D0BCFF;stroke-width:2.4}
.a-rchip.low{background:rgba(208,188,255,0.15);color:#D0BCFF}
.a-rchip.ess{background:rgba(208,188,255,0.25);color:#E8DEFF}
.a-dlink{display:flex;align-items:center;gap:11px;padding:15.4px 17.6px}
.a-dlink>div{flex:1;min-width:0}
.a-dlink small{display:block;margin-top:2px;font-size:12px;color:#C9C3D0}

/* ---------- page 3 · Suggestions (RecommendationsPage.kt) ---------- */
.a-editp{margin-top:13px;border-radius:12px;background:rgba(208,188,255,0.07);border:1px solid rgba(208,188,255,0.12);padding:13px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.3px;font-weight:700;color:#D0BCFF}
.a-editp svg{width:15px;height:15px;stroke-width:2}
.a-sug{position:relative;margin-top:13px;border-radius:15px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);padding:13px 15px;display:flex;align-items:center;gap:13px}
.a-sug::before{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,rgba(208,188,255,0),rgba(208,188,255,0.25),rgba(208,188,255,0))}
.a-sug .a-thumb{width:53px;height:53px}
.a-sug b{display:block;font-size:15.4px;font-weight:700;line-height:1.25}
.a-sug small{display:block;margin-top:3px;font-size:12px;color:#C9C3D0}
.a-chips{display:flex;gap:7px;margin-top:6px}
.a-chips span{font-size:12px;font-weight:700;line-height:1.3;border-radius:8px;padding:4px 10px;white-space:nowrap}
.c-low{background:#5C3A46;color:#FFD8E4}
.c-ess{background:#5C1A1F;color:#FFDAD6}
.c-rem{background:#4A4458;color:#E8DEF8}
.c-def{background:#2B2E3A;color:#C9C3D0}
.c-in{background:rgba(61,220,132,0.15);color:#3DDC84}

/* ---------- page 4 · Recipes (RecipesPage.kt) ---------- */
.a-hround{width:38px;height:38px;border-radius:50%;border:1px solid rgba(230,225,230,0.24);display:flex;align-items:center;justify-content:center;margin-right:2px}
.a-hround svg{width:18px;height:18px}
.a-cta{position:relative;margin-top:14px}
.a-cta::before{content:"";position:absolute;left:8px;right:8px;top:6px;bottom:-2px;border-radius:999px;background:rgba(208,188,255,0.30);filter:blur(14px)}
.a-cta>div{position:relative;height:52px;border-radius:999px;background:#D0BCFF;color:#1A102C;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px}
.a-cta i{width:24px;height:24px;border-radius:50%;background:#1A102C;display:flex;align-items:center;justify-content:center}
.app .a-cta i svg{width:13px;height:13px;stroke:#D0BCFF;stroke-width:2.4}
.app .a-cta>div>svg{width:13px;height:13px;fill:#1A102C;stroke:none}
.a-opill{margin-top:11px;height:50px;border-radius:999px;border:1px solid rgba(230,225,230,0.24);display:flex;align-items:center;justify-content:center;gap:9px;font-size:15.5px;font-weight:600}
.a-opill svg{width:17px;height:17px;stroke-width:2}
.a-rcard{position:relative;margin-top:13px;border-radius:13px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);padding:15px;display:flex;gap:13px;align-items:flex-start}
.a-rthumb{flex:none;width:62px;height:62px;border-radius:13px;overflow:hidden;background:#2B2E3A}
.a-rthumb svg{width:100%;height:100%}
.a-rcard b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.a-rcard small{display:block;margin-top:5px;font-size:13px;color:#C9C3D0}
.a-tags{display:flex;gap:7px;margin-top:8px}
.a-tags span{font-size:11px;font-weight:700;color:#D0BCFF;background:rgba(208,188,255,0.12);border-radius:6.5px;padding:2px 9px}

/* ---------- page 6 · Exercise Dashboard (ExercisePage.kt) ---------- */
.a-tabs{margin-top:12px;display:flex;border-radius:14px;background:#151823;border:1px solid rgba(230,225,230,0.24);padding:4px;font-size:14px;font-weight:600;color:#C9C3D0}
.a-tabs span{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 0;border-radius:10px;white-space:nowrap}
.a-tabs span.on{background:#1F2332;color:#E6E1E6;font-weight:700}
.a-tabs em{font-style:normal;font-size:12px;font-weight:700;background:#2B2E3A;border-radius:999px;padding:1px 8px}
.a-week{margin-top:13px;border-radius:15px;background:#151823;border:1px solid rgba(230,225,230,0.12);padding:13px 9px 9px}
.a-wkhead{display:flex;justify-content:space-between;align-items:baseline;padding:0 6px;font-size:15.5px}
.a-wkhead span{font-size:13.5px;color:#C9C3D0}
.a-days{display:flex;margin-top:8px}
.a-days>div{flex:1;text-align:center;border-radius:11px;padding:8px 0 7px}
.a-days i{display:block;font-style:normal;font-size:12px;font-weight:700;color:#C9C3D0}
.a-days b{display:block;margin-top:5px;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.a-days u{display:flex;align-items:center;justify-content:center;height:22px;margin-top:3px;text-decoration:none}
.a-days u:empty::before{content:"";width:16px;height:2px;border-radius:1px;background:#3A3D4B}
.a-days u svg{width:19px;height:19px;padding:4px;border-radius:50%;background:rgba(208,188,255,0.22);stroke-width:2.6}
.a-days small{display:block;margin-top:3px;font-size:10px;font-weight:600;letter-spacing:.3px;color:#C9C3D0}
.a-days>div.on{background:#D0BCFF;color:#1A102C}
.a-days>div.on i,.a-days>div.on small{color:#1A102C}
.a-days>div.on u:empty::before{background:rgba(26,16,44,0.45)}
.a-prog{margin-top:13px;border-radius:15px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);padding:13px}
.a-proghead{display:flex;justify-content:space-between;align-items:flex-start}
.a-proghead small{display:block;font-size:12px;letter-spacing:.4px;color:#C9C3D0}
.a-proghead b{display:block;margin-top:2px;font-size:17px;font-weight:700;color:#3DDC84}
.a-range{display:flex;gap:2px;font-size:12.5px;font-weight:600;color:#8E8A99}
.a-range span{padding:4px 9px;border-radius:8px}
.a-range span.on{background:rgba(208,188,255,0.18);color:#D0BCFF}
.a-plot{position:relative;margin-top:10px;height:172px;border-radius:11px;background:#151823;border:1px solid rgba(230,225,230,0.08);overflow:hidden}
.a-plot svg{position:absolute;inset:0;width:100%;height:100%}
.a-plot em{position:absolute;left:9px;font-style:normal;font-size:10.5px;color:#8E8A99;font-variant-numeric:tabular-nums}
.a-plot em.y1{top:16px}.a-plot em.y2{top:78px}.a-plot em.y3{top:140px}
.a-progfoot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px}
.a-progfoot small{display:block;font-size:12px;color:#C9C3D0}
.a-progfoot b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.a-progfoot b span{font-size:12px;font-weight:500;color:#C9C3D0}
.a-gain{font-size:12.5px;font-weight:700;color:#3DDC84;background:rgba(61,220,132,0.14);border-radius:8px;padding:4px 9px}
.a-run{position:relative;margin-top:13px;border-radius:15px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);padding:16px}
.a-runtop{display:flex;gap:12px;align-items:flex-start}
.a-runico{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(208,188,255,0.12);border:1px solid rgba(208,188,255,0.22);display:flex;align-items:center;justify-content:center}
.a-runico svg{width:22px;height:22px;stroke-width:2}
.a-runmain{flex:1;min-width:0}
.a-runmain>b{display:block;font-size:17.5px;font-weight:700;line-height:1.2}
.a-km{margin-top:6px;font-size:38px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.a-km span{margin-left:5px;font-size:14px;font-weight:600;color:#C9C3D0}
.a-cells{display:flex;gap:14px;margin-top:9px}
.a-cells div+div{border-left:1px solid rgba(230,225,230,0.12);padding-left:14px}
.a-cells small{display:block;font-size:11px;color:#C9C3D0}
.a-cells b{font-size:14.5px;font-variant-numeric:tabular-nums}
.a-runside{flex:none;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.a-runside span{height:38px;padding:0 15px;border-radius:999px;border:1px solid rgba(230,225,230,0.24);display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600}
.a-runside svg{width:16px;height:16px}

/* ---------- page 7 · Routine Dashboard (routine/RoutinePage.kt) ---------- */
.a-datenav{display:flex;align-items:center;gap:8px;margin-top:12px}
.a-datenav svg{width:20px;height:20px;stroke-width:2}
.a-datenav svg.flip{transform:scaleX(-1)}
.a-datenav b{flex:1;text-align:center;font-size:16px;font-weight:700}
.a-datenav span{font-size:12px;font-weight:700;color:#D0BCFF;border:1px solid rgba(230,225,230,0.24);border-radius:999px;padding:4px 11px}
.a-pills{margin-top:12px;border-radius:15px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);padding:14px}
.a-pillshead{display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:700}
.a-pillshead i{width:8px;height:8px;border-radius:50%;background:#80DEEA}
.a-pillshead em{flex:1;font-style:normal;font-size:13px;font-weight:600;color:#C9C3D0;font-variant-numeric:tabular-nums}
.a-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.a-pgrid div{min-height:44px;border-radius:13px;border:1px solid rgba(230,225,230,0.24);padding:6px 11px;display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.25}
.a-pgrid b{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700}
.a-pgrid div.ok{background:rgba(61,220,132,0.22);border-color:#3DDC84}
.a-tl{position:relative;margin-top:12px;border-radius:15px;background:#1F2332;border:1px solid rgba(230,225,230,0.12);padding:12px}
.a-allday{border-radius:11px;background:rgba(255,215,64,0.14);border:1px solid rgba(255,215,64,0.5);border-left:3px solid #FFD740;padding:7px 12px;font-size:13.5px;font-weight:600}
.a-allday small{font-weight:400;color:#C9C3D0}
.a-hours{position:relative;margin-top:14px;height:440px}
.a-hr{position:absolute;left:0;right:0;height:1px;background:rgba(230,225,230,0.08)}
.a-hr span{position:absolute;left:0;top:-8px;padding-right:7px;background:#1F2332;font:11px/16px ui-monospace,"Cascadia Mono",Consolas,monospace;color:#8E8A99}
.a-hr.h0{top:0}.a-hr.h1{top:54px}.a-hr.h2{top:108px}.a-hr.h3{top:162px}.a-hr.h4{top:216px}.a-hr.h5{top:270px}.a-hr.h6{top:324px}.a-hr.h7{top:378px}.a-hr.h8{top:432px}
.a-blk{position:absolute;left:50px;right:2px;border-radius:11px;border:1px solid;padding:5px 10px 5px 15px;font-size:14px;font-weight:600;line-height:1.3;overflow:hidden}
.a-blk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3.3px}
.a-blk small{display:block;font:11.5px/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;color:#C9C3D0}
.a-blk em{display:block;font-style:normal;font-size:11px;font-weight:600;color:#3DDC84}
.k-gym{top:2px;height:64px;background:rgba(61,220,132,0.2);border-color:rgba(61,220,132,0.6)}
.k-gym::before{background:#3DDC84}
.k-work{top:110px;height:212px;background:rgba(130,177,255,0.2);border-color:rgba(130,177,255,0.6)}
.k-work::before{background:#82B1FF}
.k-errand{top:353px;height:48px;background:rgba(239,184,200,0.2);border-color:rgba(239,184,200,0.6)}
.k-errand::before{background:#EFB8C8}
.a-now{position:absolute;left:44px;right:0;top:196px;height:2px;background:#FF6B6B}
.a-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#FF6B6B}

/* ---------- UI fragments (single components lifted out of a screen) ---------- */
.frag{position:absolute;left:50%;top:0;width:376px;transform-origin:top center;transform:translateX(-50%) scale(var(--fk,.74));color:#E6E1E6;font-size:14px;line-height:1.35;text-align:left;-webkit-user-select:none;user-select:none}
.frag .a-card,.frag .a-tcard,.frag .a-rcard{margin-top:0}
.frag .a-rcard+.a-rcard{margin-top:11px}
.frag.f-scan{top:24px}
.frag.f-track{top:20px}
.frag.f-cook{top:22px;--fk:.8}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* scan fragment: viewfinder + match sheet */
.f-finder{position:relative;margin:0 auto;width:236px;height:132px}
.f-finder u{position:absolute;width:30px;height:30px;border:0 solid #D0BCFF}
.f-finder u:nth-child(1){left:0;top:0;border-width:4px 0 0 4px;border-radius:11px 0 0 0}
.f-finder u:nth-child(2){right:0;top:0;border-width:4px 4px 0 0;border-radius:0 11px 0 0}
.f-finder u:nth-child(3){left:0;bottom:0;border-width:0 0 4px 4px;border-radius:0 0 0 11px}
.f-finder u:nth-child(4){right:0;bottom:0;border-width:0 4px 4px 0;border-radius:0 0 11px 0}
.f-code{position:absolute;left:33px;right:33px;top:20px;bottom:20px;border-radius:6px;background:#F4F2F7;padding:11px 12px 15px}
.f-code svg{width:100%;height:100%;fill:#111}
.f-beam{position:absolute;left:10px;right:10px;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:#3DDC84;box-shadow:0 0 16px 3px rgba(61,220,132,0.55)}
.f-sheet{margin-top:18px;border-radius:22px;background:#1E1A2E;border:1px solid rgba(230,225,230,0.24);padding:16px 18px;display:flex;align-items:center;gap:14px}
.f-sheet .a-thumb{width:56px;height:56px;border-radius:12px}
.f-sheet em{display:flex;align-items:center;gap:8px;font-style:normal;font-size:13.5px;font-weight:600;color:#3DDC84}
.f-sheet em::before{content:"";width:9px;height:9px;border-radius:50%;background:#3DDC84}
.f-sheet b{display:block;margin-top:3px;font-size:20px;font-weight:700;line-height:1.2}
.f-sheet small{display:block;font-size:13.5px;color:#A49EB0}

/* Scan laser: one continuous, even glide up and down. `alternate` means it
   never has a frame to jump back to, and nothing (hover, reveal, focus)
   restarts it — the whole illustration is pointer-events:none in site.css.
   Reduced-motion users get the still beam at mid-height. */
@keyframes f-sweep{from{transform:translateY(-44px)}to{transform:translateY(44px)}}
@media (prefers-reduced-motion:no-preference){
  .f-beam{animation:f-sweep 1.7s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
}

@media (prefers-reduced-motion:reduce){
  .app-pager,.a-scroll,.app-home.is-live .a-scroll{transition:none}
  .app-home.is-live .a-scroll{transform:none}
}