/* =====================================================================
   1. DESIGN TOKENS  (edit these first; everything else reads from them)
   ===================================================================== */
:root{
  /* brand */
  --lime:#A2FF88;            /* Zesty Apple – fills only, always with dark text */
  --lime-soft:rgba(162,255,136,.38);
  --emerald-900:#05382B;
  --emerald-700:#0A5C45;
  --emerald-600:#0E7A5A;
  --emerald-500:#14A37A;

  /* surfaces (light) */
  --bg:#EEF7F1;
  --card:#FBFFFC;
  --ink:#0B2A20;
  --ink-2:#4A6B5E;
  --ink-3:#86A196;
  --line:rgba(11,42,32,.08);

  /* liquid glass */
  --glass:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.78);
  --glass-hi:rgba(255,255,255,.95);
  --glass-shadow:0 10px 34px rgba(6,70,50,.12);
  --blur:blur(24px) saturate(190%);

  /* text on primary */
  --on-primary:#fff;
  --primary-top:#12906A; --primary-bot:#0A5C45;
  --price-bg:var(--lime); --price-ink:#06402D;

  /* status */
  --st-pending:#8A5A00;   --st-pending-bg:#FFF1CC;
  --st-processing:#0B5E7A;--st-processing-bg:#D9F1FA;
  --st-shipped:#3A4FB0;   --st-shipped-bg:#E3E8FF;
  --st-delivered:#0A5C45; --st-delivered-bg:#D3F7C5;
  --st-cancelled:#9B2C2C; --st-cancelled-bg:#FFE0E0;
  --st-refund:#7A3E9D;    --st-refund-bg:#F2E1FB;
  --danger:#C0392B;

  /* shape + motion */
  --r-card:26px; --r-md:18px; --r-pill:999px;
  --spring:cubic-bezier(.32,.72,0,1);          /* iOS-style ease */
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --font-latin:"Fraunces","New York",Georgia,serif;  /* botanical Latin names */
}
[data-theme="dark"]{
  --danger:#FF8F85;
  --bg:#04120D; --card:#0E2119; --ink:#EAFBF2; --ink-2:#9BBBAD; --ink-3:#5F8072;
  --line:rgba(255,255,255,.08);
  --glass:rgba(18,48,38,.5); --glass-border:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.2);
  --glass-shadow:0 10px 34px rgba(0,0,0,.45);
  --primary-top:#1FBE8D; --primary-bot:#0E7A5A; --on-primary:#03221A;
  --st-pending:#FFD27A; --st-pending-bg:rgba(255,210,122,.14);
  --st-processing:#8ADBF5; --st-processing-bg:rgba(138,219,245,.14);
  --st-shipped:#B5C0FF; --st-shipped-bg:rgba(181,192,255,.14);
  --st-delivered:#A2FF88; --st-delivered-bg:rgba(162,255,136,.14);
  --st-cancelled:#FFA3A3; --st-cancelled-bg:rgba(255,163,163,.14);
  --st-refund:#E3B6FA; --st-refund-bg:rgba(227,182,250,.14);
}

/* =====================================================================
   2. BASE + DEMO STAGE (the stage/panel is only for this prototype)
   ===================================================================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);background:#DCEBE2;display:grid;place-items:center;overflow:hidden;transition:background .5s}
[data-theme="dark"] body{background:#020A07}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.stage{display:flex;gap:56px;align-items:center;padding:16px}
.panel{width:280px;display:grid;gap:14px}
.panel h1{font-family:var(--font-latin);font-size:30px;margin:0;font-weight:600}
.panel p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.panel .nav{display:grid;gap:8px}
.panel .nav button{padding:11px 14px;border-radius:14px;text-align:left;font-size:14px;font-weight:500;background:var(--glass);border:1px solid var(--glass-border);transition:transform .25s var(--spring),background .25s}
.panel .nav button:hover{transform:translateX(4px)}
.panel .nav button.on{background:var(--lime);color:var(--price-ink)}
.wrap{position:relative}
.phone{width:390px;height:844px;border-radius:56px;position:relative;overflow:hidden;background:var(--bg);
  box-shadow:0 0 0 10px #0c1411,0 0 0 11px #2a3a33,0 40px 90px rgba(5,40,28,.35);transform-origin:top left;isolation:isolate}
@media (max-width:900px){.panel{display:none}}
@media (max-width:480px){
  .stage{padding:0}.wrap{width:100vw!important;height:100dvh!important}
  .phone{width:100vw;height:100dvh;border-radius:0;box-shadow:none;transform:none!important}
}

/* animated aurora behind everything – gives the glass something to refract */
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(50px);opacity:.75;animation:drift 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:300px;height:300px;background:var(--lime);top:-90px;right:-70px}
.aurora i:nth-child(2){width:340px;height:340px;background:#3DD6A5;top:300px;left:-150px;opacity:.45;animation-duration:24s}
.aurora i:nth-child(3){width:280px;height:280px;background:#8EEBD3;bottom:-80px;right:-60px;opacity:.5;animation-duration:21s}
[data-theme="dark"] .aurora i{opacity:.28}
@keyframes drift{to{transform:translate3d(-40px,50px,0) scale(1.15)}}

.statusbar{position:absolute;top:0;left:0;right:0;height:50px;z-index:40;display:flex;justify-content:space-between;align-items:flex-end;padding:0 30px 8px;font-size:15px;font-weight:600;pointer-events:none}
.statusbar span:last-child{display:flex;gap:6px;align-items:center}
.statusbar .batt{width:25px;height:12px;border-radius:4px;border:1.5px solid currentColor;position:relative;opacity:.9}
.statusbar .batt::after{content:'';position:absolute;inset:1.5px;right:5px;background:currentColor;border-radius:2px}
@media (max-width:480px){.statusbar{display:none}}

/* =====================================================================
   3. SHARED COMPONENTS
   ===================================================================== */
.glass{background:var(--glass);border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi)}
.btn{height:50px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15.5px;
  background:linear-gradient(180deg,var(--primary-top),var(--primary-bot));color:var(--on-primary);width:100%;
  box-shadow:0 8px 20px rgba(10,92,69,.28),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .25s var(--spring),box-shadow .25s,opacity .2s}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.sm{height:38px;font-size:13.5px}
.btn.ghost{background:var(--glass);color:var(--ink);box-shadow:inset 0 1px 0 var(--glass-hi);border:1px solid var(--glass-border)}
.btn.lime{background:var(--lime);color:var(--price-ink);box-shadow:0 8px 20px rgba(120,230,90,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;background:var(--price-bg);color:var(--price-ink)}
.chip{padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:500;background:var(--lime-soft);color:var(--emerald-700)}
[data-theme="dark"] .chip{color:var(--lime);background:rgba(162,255,136,.12)}
.status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600}
.status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.st-pending{color:var(--st-pending);background:var(--st-pending-bg)}.st-processing{color:var(--st-processing);background:var(--st-processing-bg)}
.st-shipped{color:var(--st-shipped);background:var(--st-shipped-bg)}.st-delivered{color:var(--st-delivered);background:var(--st-delivered-bg)}
.st-cancelled{color:var(--st-cancelled);background:var(--st-cancelled-bg)}.st-refund{color:var(--st-refund);background:var(--st-refund-bg)}
.stepper{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:3px;gap:2px;background:var(--glass);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi)}
.stepper button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transition:transform .2s var(--bounce),background .2s}
.stepper button:last-child{background:var(--primary-bot);color:#fff}
[data-theme="dark"] .stepper button:last-child{background:var(--lime);color:var(--price-ink)}
.stepper button:active{transform:scale(.82)}
.stepper button:disabled{opacity:.3;pointer-events:none}
.stepper b{min-width:30px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.latin{font-family:var(--font-latin);font-style:italic;font-weight:600;letter-spacing:-.01em}

/* product image slot – ALWAYS square, same radius, photo or type-tile */
.slot{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;display:grid;place-items:center}
.slot.has-img{background:linear-gradient(160deg,#F4FBF7,#D4EEE0)}
.slot.has-img svg{width:100%;height:100%}
.slot .ticon{width:46%;height:46%;stroke-width:1.5;fill:none;stroke:var(--emerald-700);position:relative;z-index:1}
.slot .mono{position:absolute;right:-6%;bottom:-18%;font-family:var(--font-latin);font-style:italic;font-weight:600;font-size:150px;line-height:1;color:var(--emerald-600);opacity:.09;pointer-events:none}
.slot .photo-tag{position:absolute}
.t-dilution{background:linear-gradient(150deg,#E8FBEF,#C9F2DC)}
.t-tincture{background:linear-gradient(150deg,#EEF8DC,#D8EDB3)}
.t-tablet{background:linear-gradient(150deg,#E3F6F2,#C4E8E1)}
.t-ointment{background:linear-gradient(150deg,#F0F9DE,#DCEFB9)}
.t-shampoo{background:linear-gradient(150deg,#E0F3F8,#C2E5EE)}
.t-cream{background:linear-gradient(150deg,#F4F8DA,#E4EEB4)}
[data-theme="dark"] .slot .ticon{stroke:var(--lime)}

/* =====================================================================
   4. SCREEN SYSTEM + TRANSITIONS
   ===================================================================== */
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:60px 18px 130px;opacity:0;pointer-events:none;transform:scale(.985) translateY(10px);
  transition:opacity .38s var(--spring),transform .55s var(--spring);scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen.active{opacity:1;pointer-events:auto;transform:none}
.screen.pushed{transform:translateX(34px)}
.screen.behind{transform:scale(.96) translateX(-24px);opacity:0;pointer-events:none}
.rise{animation:rise .65s var(--spring) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
h2.title{font-size:32px;letter-spacing:-.03em;margin:4px 0 2px;font-weight:700}
.sub{color:var(--ink-2);font-size:14px;margin:0 0 14px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,var(--lime),#4FD9A8);display:grid;place-items:center;font-weight:700;color:var(--price-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;transition:transform .25s var(--bounce)}
.iconbtn:active{transform:scale(.88)}

/* ---------- floating liquid-glass tab bar ---------- */
.tabbar{position:absolute;left:18px;right:18px;bottom:16px;height:68px;border-radius:34px;z-index:30;display:grid;grid-template-columns:repeat(var(--n,4),1fr);padding:6px;
  transition:transform .55s var(--spring),opacity .35s}
.tabbar.hide{transform:translateY(120px);opacity:0;pointer-events:none}
.tabbar .ind{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/var(--n,4));border-radius:28px;transform:translateX(calc(var(--idx,0)*100%));
  background:linear-gradient(180deg,rgba(162,255,136,.85),rgba(162,255,136,.55));box-shadow:0 4px 16px rgba(120,230,90,.4),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .55s var(--spring)}
.tabbar button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--ink-2);transition:color .3s,transform .3s var(--bounce)}
.tabbar button.on{color:var(--price-ink)}
[data-theme="dark"] .tabbar button.on{color:#06402D}
.tabbar button:active{transform:scale(.9)}
.badge{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--emerald-700);color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 5px;
  border:2px solid var(--card);transition:transform .4s var(--bounce)}
.badge.pop{animation:pop .45s var(--bounce)}
@keyframes pop{40%{transform:scale(1.5)}}

/* ---------- in-app banner (foreground push) ---------- */
.banner{position:absolute;left:12px;right:12px;top:10px;z-index:80;border-radius:26px;padding:12px 14px;display:flex;gap:12px;align-items:center;
  transform:translateY(-160%) scale(.92);opacity:0;transition:transform .7s var(--spring),opacity .4s;cursor:pointer}
.banner.show{transform:none;opacity:1}
.banner .bi{width:38px;height:38px;border-radius:11px;background:var(--lime);color:var(--price-ink);display:grid;place-items:center;flex:none}
.banner b{font-size:14px;display:block}.banner span{font-size:12.5px;color:var(--ink-2)}
.banner small{margin-left:auto;font-size:11px;color:var(--ink-3);align-self:flex-start;margin-top:2px}

/* ---------- bottom sheet ---------- */
.scrim{position:absolute;inset:0;background:rgba(3,25,18,.35);z-index:60;opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:8px;right:8px;bottom:8px;z-index:70;border-radius:36px;padding:10px 20px 22px;transform:translateY(110%);transition:transform .6s var(--spring)}
.sheet.show{transform:none}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--ink-3);opacity:.5;margin:2px auto 14px}
.sheet h3{margin:0 0 12px;font-size:19px}

/* ---------- success overlay ---------- */
.success{position:absolute;inset:0;z-index:90;display:grid;place-content:center;justify-items:center;gap:16px;background:rgba(238,247,241,.7);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);opacity:0;pointer-events:none;transition:opacity .4s}
[data-theme="dark"] .success{background:rgba(4,18,13,.7)}
.success.show{opacity:1;pointer-events:auto}
.success .ring{width:112px;height:112px;border-radius:50%;background:var(--lime);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(162,255,136,.6);transform:scale(.4)}
.success.show .ring{animation:ringIn .8s var(--bounce) forwards,pulse 1.6s .8s ease-out infinite}
.success path{stroke:var(--price-ink);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.success.show path{animation:draw .6s .45s var(--spring) forwards}
@keyframes ringIn{to{transform:scale(1)}}@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{to{box-shadow:0 0 0 34px rgba(162,255,136,0)}}
.success h3{margin:0;font-size:22px}.success p{margin:0;color:var(--ink-2);font-size:14px}

/* =====================================================================
   5. CATALOGUE
   ===================================================================== */
.search{height:48px;border-radius:var(--r-pill);display:flex;align-items:center;gap:10px;padding:0 16px;color:var(--ink-2);margin-bottom:12px}
.search input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:15px;color:var(--ink);min-width:0}
.search input::placeholder{color:var(--ink-3)}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 14px;padding:2px 18px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.fchip{flex:none;padding:9px 15px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--ink-2);transition:all .35s var(--spring)}
.fchip.on{background:var(--emerald-700);color:#fff;border-color:transparent;transform:scale(1.04)}
[data-theme="dark"] .fchip.on{background:var(--lime);color:var(--price-ink)}
.toolrow{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 12px;font-size:13px;color:var(--ink-2)}
.toolrow .seg{display:flex;padding:3px;border-radius:var(--r-pill)}
.toolrow .seg button{width:34px;height:30px;border-radius:15px;display:grid;place-items:center;transition:background .3s}
.toolrow .seg button.on{background:var(--lime);color:var(--price-ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pcard{background:var(--card);border-radius:var(--r-card);padding:8px;position:relative;box-shadow:0 10px 28px rgba(6,70,50,.09),0 1px 0 rgba(255,255,255,.9) inset;
  display:flex;flex-direction:column;cursor:pointer;transition:transform .4s var(--spring),box-shadow .4s}
.pcard:active{transform:scale(.97)}
.media{position:relative}
.notch{position:absolute;top:-8px;left:-8px;z-index:2;background:var(--card);padding:9px 14px 9px 14px;border-radius:26px 0 16px 0;font-size:11px;font-weight:600;color:var(--ink-2)}
.notch::after,.notch::before{content:'';position:absolute;width:16px;height:16px;background:radial-gradient(circle at 100% 100%,transparent 15.5px,var(--card) 16px)}
.notch::after{left:100%;top:8px}.notch::before{top:100%;left:8px}
.pcard .body{padding:10px 6px 4px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{margin:0;font-size:17px;line-height:1.15}
.pcard .common{margin:0;font-size:12px;color:var(--ink-2)}
.pcard .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pcard .btn{margin-top:auto}
.list{display:grid;gap:10px}
.prow{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:22px;padding:10px;box-shadow:0 8px 22px rgba(6,70,50,.07);cursor:pointer;transition:transform .35s var(--spring)}
.prow:active{transform:scale(.98)}
.prow .slot{width:64px;border-radius:16px;flex:none}.prow .slot .mono{font-size:70px}
.prow h3{margin:0;font-size:16px}.prow p{margin:2px 0 6px;font-size:12px;color:var(--ink-2)}
.prow .go{margin-left:auto;color:var(--ink-3)}
.reqrow{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:22px;margin-top:18px;font-size:13.5px;color:var(--ink-2)}
.reqrow b{color:var(--ink);display:block;font-size:14px}
.reqrow .btn{width:auto;padding:0 16px;margin-left:auto}
.empty{text-align:center;padding:50px 20px;color:var(--ink-2);font-size:14px;display:grid;gap:14px;justify-items:center}

/* =====================================================================
   6. ITEM DETAIL
   ===================================================================== */
.back{position:absolute;top:58px;left:16px;z-index:5}
#detail{padding-top:60px}
.hero{margin-top:46px}
.hero .slot{border-radius:30px}
.hero .notch{padding:12px 18px;font-size:12.5px}
.hero .notch::after,.hero .notch::before{width:20px;height:20px;background:radial-gradient(circle at 100% 100%,transparent 19.5px,var(--card) 20px)}
.hero .media{background:var(--card);padding:8px;border-radius:38px;box-shadow:0 14px 34px rgba(6,70,50,.1)}
.hero .media .notch{top:0;left:0;border-radius:38px 0 18px 0}
.dname{font-size:30px;margin:18px 2px 2px;line-height:1.1}
.dcommon{color:var(--ink-2);margin:0 2px 10px;font-size:15px}
.ddesc{color:var(--ink-2);font-size:14px;line-height:1.55;margin:0 2px 18px}
.sectionlabel{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 4px 10px}
.vcard{background:var(--card);border-radius:24px;padding:14px 16px;margin-bottom:10px;box-shadow:0 8px 22px rgba(6,70,50,.07);transition:box-shadow .4s}
.vcard.active{box-shadow:0 0 0 2px var(--lime),0 12px 28px rgba(110,220,80,.25)}
.vtop{display:flex;align-items:center;gap:12px}
.vtop .meta{flex:1;min-width:0}
.vtop .meta b{font-size:16px;display:block}
.pricing{display:flex;gap:8px;align-items:baseline;margin-top:3px}
.pricing .now{font-size:15px;font-weight:700}
.pricing s{color:var(--ink-3);font-size:13px}
.unlock{display:inline-flex;gap:5px;align-items:center;margin-top:7px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);background:var(--lime);color:var(--price-ink);animation:pop .5s var(--bounce)}
.tiertoggle{display:flex;align-items:center;gap:4px;color:var(--emerald-600);font-size:12.5px;font-weight:600;margin-top:10px}
[data-theme="dark"] .tiertoggle{color:var(--lime)}
.tiertoggle svg{width:16px;height:16px;transition:transform .4s var(--spring)}
.tiertoggle.open svg{transform:rotate(180deg)}
.tiers{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--spring)}
.tiers.open{grid-template-rows:1fr}
.tiers>div{overflow:hidden}
.tier{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;margin-top:6px;border-radius:14px;font-size:13px;background:var(--lime-soft);background:rgba(10,92,69,.05)}
[data-theme="dark"] .tier{background:rgba(255,255,255,.05)}
.tier.on{background:var(--lime);color:var(--price-ink);font-weight:700}
.tier button{font-size:12px;font-weight:700;color:var(--emerald-600)}
.tier.on button{color:var(--price-ink)}
[data-theme="dark"] .tier:not(.on) button{color:var(--lime)}
.actionbar{position:absolute;left:16px;right:16px;bottom:18px;z-index:30;border-radius:32px;padding:10px 10px 10px 22px;display:flex;align-items:center;gap:14px;
  transform:translateY(130px);transition:transform .6s var(--spring)}
.actionbar.show{transform:none}
.actionbar .sum{flex:1;line-height:1.25}.actionbar .sum b{font-size:17px;display:block}.actionbar .sum span{font-size:12px;color:var(--ink-2)}
.actionbar .btn{width:auto;padding:0 22px;height:48px}

/* =====================================================================
   7. CART + CHECKOUT
   ===================================================================== */
.steps{display:flex;align-items:center;gap:8px;margin:0 2px 16px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.steps .s{display:flex;gap:7px;align-items:center;transition:color .3s}
.steps .s i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--line);font-size:11.5px}
.steps .s.on{color:var(--ink)}.steps .s.on i{background:var(--lime);color:var(--price-ink)}
.steps hr{flex:1;border:0;height:2px;background:var(--line);margin:0;border-radius:1px}
.save{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:22px;margin-bottom:14px;background:linear-gradient(120deg,rgba(162,255,136,.55),rgba(162,255,136,.2));border:1px solid rgba(255,255,255,.6);font-size:13.5px}
.save b{font-size:15.5px;display:block}
.save .ic{width:38px;height:38px;border-radius:12px;background:var(--lime);display:grid;place-items:center;color:var(--price-ink);flex:none}
.ccard{background:var(--card);border-radius:26px;padding:12px;margin-bottom:12px;box-shadow:0 8px 24px rgba(6,70,50,.08)}
.ctop{display:flex;gap:12px;align-items:center}
.ctop .slot{width:62px;border-radius:16px;flex:none}.ctop .slot .mono{font-size:70px}
.ctop .meta{flex:1;min-width:0}.ctop h3{margin:0;font-size:16px}.ctop .vl{font-size:12.5px;color:var(--ink-2);margin-top:1px}
.ctop .rm{color:var(--ink-3);align-self:flex-start;width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.ctop .rm svg{width:17px;height:17px}
.crow{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.cprice b{font-size:16px}.cprice s{color:var(--ink-3);font-size:12.5px;margin-left:6px}
.upsell{margin-top:12px;padding:11px 12px;border-radius:18px;background:rgba(10,92,69,.06);font-size:12.5px}
[data-theme="dark"] .upsell{background:rgba(255,255,255,.05)}
.upsell .ut{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.upsell .ut button{padding:5px 12px;border-radius:var(--r-pill);background:var(--lime);color:var(--price-ink);font-weight:700;font-size:12px;transition:transform .25s var(--bounce)}
.upsell .ut button:active{transform:scale(.88)}
.bar{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--lime),var(--emerald-500));transition:width .7s var(--spring)}
.sumcard{background:var(--card);border-radius:26px;padding:18px;margin-top:6px;box-shadow:0 8px 24px rgba(6,70,50,.08)}
.sumrow{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2);padding:5px 0}
.sumrow.total{color:var(--ink);font-size:18px;font-weight:700;border-top:1px dashed var(--line);margin-top:8px;padding-top:14px}
.addr{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:24px;margin-bottom:12px}
.addr .ic{width:40px;height:40px;border-radius:13px;background:var(--lime);color:var(--price-ink);display:grid;place-items:center;flex:none}
.addr b{font-size:15px}.addr p{margin:3px 0 0;font-size:13px;color:var(--ink-2);line-height:1.4}
.addr .change{margin-left:auto;font-weight:700;font-size:13px;color:var(--emerald-600)}
[data-theme="dark"] .addr .change{color:var(--lime)}
.quick{display:flex;gap:8px;margin-bottom:16px}
.quick button{flex:1;height:42px;border-radius:var(--r-pill);display:flex;gap:7px;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.reviewline{display:flex;justify-content:space-between;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--line)}
.reviewline:last-child{border:0}
.reviewline span{color:var(--ink-2)}
.opt{display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;margin-bottom:8px;background:var(--card);border:2px solid transparent;transition:border-color .3s}
.opt.sel{border-color:var(--lime)}
.opt .rad{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink-3);display:grid;place-items:center;flex:none;transition:all .3s var(--bounce)}
.opt.sel .rad{border-color:var(--emerald-600);background:var(--lime);box-shadow:inset 0 0 0 4px var(--lime),inset 0 0 0 20px var(--emerald-600)}
.opt p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.opt .del{margin-left:auto;color:var(--ink-3)}

/* =====================================================================
   8. ORDERS
   ===================================================================== */
.ocard{background:var(--card);border-radius:28px;padding:16px;margin-bottom:14px;box-shadow:0 10px 28px rgba(6,70,50,.08)}
.otop{display:flex;justify-content:space-between;align-items:center}
.otop b{font-size:16px}.otop small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.track{display:flex;align-items:center;margin:16px 4px 6px}
.track i{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none;transition:background .4s}
.track i.done{background:var(--emerald-500)}.track i.now{background:var(--lime);box-shadow:0 0 0 4px rgba(162,255,136,.45)}
.track hr{flex:1;height:3px;border:0;margin:0;background:var(--line);border-radius:2px}.track hr.done{background:var(--emerald-500)}
.tlabels{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-3);margin-bottom:10px}
.oline{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;border-top:1px solid var(--line)}
.oline span{color:var(--ink-2)}
.ototal{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--line);font-size:15px;font-weight:700}
.refundnote{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:16px;margin:10px 0;background:var(--st-refund-bg);color:var(--st-refund);font-size:12.5px;font-weight:500}
.oact{display:flex;gap:8px;margin-top:12px}
.oact .btn{flex:1}

/* =====================================================================
   9. PROFILE
   ===================================================================== */
.pcenter{display:grid;justify-items:center;text-align:center;gap:4px;margin:6px 0 18px}
.bigav{width:92px;height:92px;border-radius:50%;font-size:32px;position:relative;margin-bottom:8px;box-shadow:0 12px 30px rgba(110,220,80,.35),inset 0 1px 0 rgba(255,255,255,.7)}
.bigav .vb{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--emerald-700);color:var(--lime);display:grid;place-items:center;border:3px solid var(--bg)}
.vbanner{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:22px;margin-bottom:14px}
.vbanner .ic{width:38px;height:38px;border-radius:12px;background:var(--lime);color:var(--price-ink);display:grid;place-items:center;flex:none}
.vbanner b{font-size:14.5px;display:block}.vbanner span{font-size:12.5px;color:var(--ink-2)}
.spend{border-radius:26px;padding:18px;margin-bottom:18px;background:linear-gradient(140deg,var(--emerald-700),var(--emerald-900));color:#fff;position:relative;overflow:hidden;box-shadow:0 14px 30px rgba(5,56,43,.3)}
.spend::after{content:'';position:absolute;right:-40px;top:-50px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(162,255,136,.55),transparent 70%)}
.spend small{opacity:.75;font-size:12.5px}.spend b{display:block;font-size:30px;letter-spacing:-.02em;margin:2px 0 14px}
.bars{display:flex;gap:7px;align-items:flex-end;height:46px;position:relative;z-index:1}
.bars i{flex:1;border-radius:6px;background:rgba(255,255,255,.22);transform-origin:bottom;animation:grow .9s var(--spring) both}
.bars i:last-child{background:var(--lime)}
@keyframes grow{from{transform:scaleY(.1)}}
.group{border-radius:26px;overflow:hidden;margin-bottom:18px}
.group .li{display:flex;align-items:center;gap:13px;padding:14px 16px;width:100%;text-align:left;font-size:15px;transition:background .25s}
.group .li+.li{border-top:1px solid var(--line)}
.group .li:active{background:var(--lime-soft)}
.group .li .ic{width:32px;height:32px;border-radius:10px;background:var(--lime-soft);color:var(--emerald-700);display:grid;place-items:center}
[data-theme="dark"] .group .li .ic{color:var(--lime)}
.group .li .ic svg{width:18px;height:18px}
.group .li>svg:last-child{margin-left:auto;color:var(--ink-3);width:18px;height:18px}
.seg3{display:flex;margin:0 16px 14px;padding:4px;border-radius:var(--r-pill)}
.seg3 button{flex:1;height:34px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--ink-2);transition:all .4s var(--spring)}
.seg3 button.on{background:var(--lime);color:var(--price-ink);box-shadow:0 3px 10px rgba(120,230,90,.4)}
.signout{color:#C0392B;font-weight:600}