/* Jcommerce & Tech: phone app screens for the walkthrough pages.
   Every foundation's phone is its own app (sample brand, palette, type and device finish).
   Screens are drawn at 214 × 452 and scaled with zoom to whichever frame holds them.
   Markup comes from mob() and friends in tools/build_abouts.py. */

/* ── skins ── */
.sk-store{--bg:#F7F3EE;--card:#fff;--ink:#1A1714;--mut:#8A8178;--line:#ECE4D9;--acc:#B4532A;--acc-ink:#fff;--soft:#F2E9DE;--f-disp:'Fraunces',Georgia,serif;--r:14px}
.sk-fleet{--bg:#0E1013;--card:#191C21;--ink:#F2F3F5;--mut:#8B919C;--line:#262A31;--acc:#F5A524;--acc-ink:#1A1205;--soft:#22262D;--f-disp:'Hanken Grotesk',system-ui,sans-serif;--r:14px}
.sk-eatery{--bg:#14100D;--card:#1F1915;--ink:#F6ECDF;--mut:#A39484;--line:#30271F;--acc:#F07A2B;--acc-ink:#1A0C03;--soft:#2A211B;--f-disp:'Fraunces',Georgia,serif;--r:16px}
.sk-counter{--bg:#F6F7FB;--card:#fff;--ink:#0E1726;--mut:#6B7385;--line:#E6E9F2;--acc:#4F46E5;--acc-ink:#fff;--soft:#EEF0FF;--f-disp:'Hanken Grotesk',system-ui,sans-serif;--r:12px}
.sk-resi{--bg:#EFF5F5;--card:#fff;--ink:#0B2A33;--mut:#6A8389;--line:#DCE8E9;--acc:#0E7C86;--acc-ink:#fff;--soft:#E1EFF0;--f-disp:'Fraunces',Georgia,serif;--r:18px}
.sk-learn{--bg:#F5F2FF;--card:#fff;--ink:#1B1440;--mut:#6F6890;--line:#E8E2FA;--acc:#6D4AFF;--acc-ink:#fff;--soft:#ECE6FF;--yel:#FFC93C;--f-disp:'Hanken Grotesk',system-ui,sans-serif;--r:16px}
.sk-jobs{--bg:#F3F6F2;--card:#fff;--ink:#0F2219;--mut:#66766C;--line:#E0E7E1;--acc:#0F6B48;--acc-ink:#fff;--soft:#E3EEE6;--lime:#C6F36B;--f-disp:'Hanken Grotesk',system-ui,sans-serif;--r:14px}

/* ── device finishes ── */
.phone[class*="ph-"]{padding:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 30px 60px -24px rgba(0,0,0,.75)}
.phone.ph-store{background:linear-gradient(155deg,#4A4A4D,#141416 30%,#2C2C2F 62%,#0B0B0C)}
.phone.ph-fleet{background:linear-gradient(155deg,#5C6068,#202328 35%,#3A3E45 65%,#15171A)}
.phone.ph-eatery{background:linear-gradient(155deg,#F1B98E,#9A5A33 30%,#D08A5A 60%,#6E3A1E)}
.phone.ph-counter{background:linear-gradient(155deg,#FFFFFF,#B9BEC8 30%,#E6E9EF 62%,#9097A3)}
.phone.ph-resi{background:linear-gradient(155deg,#FFFFFF,#D7DEE0 35%,#F4F7F8 65%,#BFC9CC)}
.phone.ph-learn{background:linear-gradient(155deg,#CDBDFF,#6E55C9 32%,#A892F0 62%,#4B3699)}
.phone.ph-jobs{background:linear-gradient(155deg,#9CC9AE,#2F6A4C 32%,#6FA486 62%,#1D4A33)}
.phone .scr:has(.mob){background:#000;border-radius:28px}
.phone[class*="ph-"] .scr::before{z-index:30;top:8px;width:56px;height:16px;margin-left:-28px}

/* ── backdrops behind each product's pair of phones ── */
.phone-wrap[class*="pw-"]{position:relative;overflow:hidden;border-color:rgba(255,255,255,.08);gap:28px}
.phone-wrap[class*="pw-"]::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.phone-wrap[class*="pw-"] .phone{position:relative}
.pw-store{background:radial-gradient(85% 90% at 50% 30%,#C7653A 0%,#6E2E16 55%,#2A120A 100%)}
.pw-fleet{background:radial-gradient(85% 90% at 50% 30%,#5A4521 0%,#1F1B15 55%,#0B0B0C 100%)}
.pw-eatery{background:radial-gradient(85% 90% at 50% 30%,#8E3A14 0%,#3A1709 55%,#140805 100%)}
.pw-counter{background:radial-gradient(85% 90% at 50% 30%,#4F46E5 0%,#24207A 55%,#0E0C33 100%)}
.pw-resi{background:radial-gradient(85% 90% at 50% 30%,#1C9AA5 0%,#0B5159 55%,#04252A 100%)}
.pw-learn{background:radial-gradient(85% 90% at 50% 30%,#7C5CFF 0%,#3A1F9E 55%,#160A45 100%)}
.pw-jobs{background:radial-gradient(85% 90% at 50% 30%,#1D8A5D 0%,#0B3E29 55%,#04170F 100%)}

/* ── the screen ── */
.mob{position:absolute;left:0;top:0;width:214px;height:452px;zoom:var(--mz,1);display:flex;flex-direction:column;overflow:hidden;text-align:left;
  background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:10px;line-height:1.4;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.mob *{box-sizing:border-box}
.devices .phone .mob{--mz:.813}
@media (max-width:640px){
  .phone-wrap .phone .mob{--mz:.86}
  .devices .phone .mob{--mz:.477}
}
.mb-sb{height:30px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:3px 17px 0 22px;font-size:10px;font-weight:700}
.mb-sb span{display:flex;gap:4px;align-items:center}
.mb-sb svg{height:7px;width:auto;fill:currentColor}
.mb-body{flex:1;min-height:0;overflow:hidden;padding:2px 12px 10px;display:flex;flex-direction:column;gap:9px}
.mb-body>*{flex:none}
.mb-tabs{flex:none;display:flex;justify-content:space-around;padding:7px 6px 3px;border-top:1px solid var(--line);background:var(--card)}
.mb-tabs span{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mut);font-size:7.5px;font-weight:600;min-width:36px}
.mb-tabs svg{width:16px;height:16px}
.mb-tabs .on{color:var(--acc)}
.mb-home{flex:none;display:block;height:14px;position:relative}
.mb-tabs+.mb-home{background:var(--card)}
.mb-home::after{content:"";position:absolute;left:50%;bottom:5px;width:70px;height:3.5px;margin-left:-35px;border-radius:3px;background:var(--ink);opacity:.85}

/* ── shared parts ── */
.mb-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.mb-hd>span{display:flex;align-items:center}
.mb-hd .mid{flex:1;justify-content:center;font-size:11.5px}
.mb-hd .mid b{font-weight:700}
.mb-hd svg{width:17px;height:17px}
.badge-i{position:relative;display:inline-flex}
.badge-i em{position:absolute;top:-4px;right:-5px;min-width:13px;height:13px;padding:0 3px;border-radius:99px;background:var(--acc);color:var(--acc-ink);font-size:7.5px;font-style:normal;font-weight:800;display:grid;place-items:center;border:1.5px solid var(--bg)}
.badge-i em:empty{min-width:9px;width:9px;height:9px;padding:0;top:-1px;right:-1px}
.rs-hi,.ln-hi,.jb-hi{display:flex;flex-direction:column;line-height:1.15}
.rs-hi small,.ln-hi small,.jb-hi small{font-size:8.5px;color:var(--mut);font-weight:500}
.rs-hi b,.ln-hi b,.jb-hi b{font-family:var(--f-disp);font-size:17px;font-weight:700;letter-spacing:-.01em}
.rs-hi b{font-weight:400}
.mb-h{font-family:var(--f-disp);font-weight:400;font-size:21px;line-height:1.05;letter-spacing:-.02em}
.mb-h em{font-style:italic;color:var(--acc)}
.mb-kick{display:block;font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700}
.mb-lbl{font-size:8.5px;font-weight:700;color:var(--mut);margin-bottom:-4px}
.mb-sec{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:700;margin-top:2px}
.mb-sec span{color:var(--acc);font-weight:600;font-size:9px}
.mb-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2px 10px}
.mb-row{display:flex;align-items:center;gap:9px;padding:7px 0}
.mb-card .mb-row+.mb-row,.mb-card .mb-row+.mb-tog,.mb-card .mb-tog+.mb-tog{border-top:1px solid var(--line)}
.mb-row .th{width:30px;height:30px;flex:none;border-radius:9px;background:var(--soft);color:var(--acc);display:grid;place-items:center;overflow:hidden;font-weight:800;font-size:11px}
.mb-row .th>svg{width:15px;height:15px}
.mb-row .th>svg[preserveAspectRatio]{width:100%;height:100%}
.mb-row .th .lg{width:100%;height:100%;border-radius:inherit}
.mb-row.dish .th{width:42px;height:42px;border-radius:50%;background:transparent}
.mb-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mb-row .tx b{font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-row .tx small{font-size:8.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-row .rt{font-size:10px;font-weight:700;display:flex;align-items:center;gap:6px;flex:none}
.mb-row .rt>svg{width:15px;height:15px;color:#2E9E6A}
.mb-row .rt i.add{width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center}
.mb-row .rt i.add svg{width:12px;height:12px}
.mb-row.ok .th{background:#DDF3E6;color:#137048}
.mb-row.bad .th{background:#FDE4E4;color:#C0352B}
.mb-a{color:var(--acc);font-size:9px}
.lg{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:10px;flex:none;letter-spacing:-.02em}
.mb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border-radius:99px;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:10.5px;white-space:nowrap}
.mb-btn svg{width:13px;height:13px}
.mb-btn.full{width:100%}
.mb-btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.mb-btn.light{background:#fff;color:var(--acc);height:26px;font-size:9.5px;padding:0 12px}
.mb-btn.lime{background:var(--lime);color:#0B2A1C}
.mb-link{text-align:center;font-size:9.5px;font-weight:600;color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.mb-chips{display:flex;gap:5px;overflow:hidden}
.mb-chips span{flex:none;padding:5px 10px;border-radius:99px;border:1px solid var(--line);font-size:9px;font-weight:600;color:var(--mut);background:var(--card)}
.mb-chips .on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill{font-style:normal;font-size:8px;font-weight:700;padding:3px 7px;border-radius:99px;background:var(--soft);color:var(--mut);white-space:nowrap}
.pill.ok{background:#DDF3E6;color:#137048}
.pill.warn{background:#FCEFD6;color:#A2610E}
.pill.acc{background:var(--acc);color:var(--acc-ink)}
.mb-bar{display:block;height:5px;border-radius:5px;background:var(--soft);overflow:hidden;margin:4px 0}
.mb-bar i{display:block;height:100%;width:var(--p);background:var(--acc);border-radius:inherit}
.mb-card>.mb-bar{margin:0 0 9px}
.mb-g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mb-pc .im{position:relative;aspect-ratio:4/4.4;border-radius:12px;background:var(--ib);overflow:hidden}
.mb-pc .im>svg{width:100%;height:100%}
.mb-pc .im em{position:absolute;top:6px;left:6px;font-style:normal;font-size:7.5px;font-weight:800;padding:2px 6px;border-radius:99px;background:var(--acc);color:#fff}
.mb-pc .im i{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center}
.mb-pc .im i svg{width:11px;height:11px}
.mb-pc b{display:block;font-size:10px;font-weight:600;margin-top:5px}
.mb-pc span{font-size:10px;font-weight:800}
.mb-pc s{color:var(--mut);font-weight:400;font-size:8.5px}
.mb-ring{position:relative;width:var(--sz);height:var(--sz);flex:none}
.mb-ring svg{width:100%;height:100%;fill:none}
.mb-ring .tr{stroke:var(--soft)}
.mb-ring .fg{stroke:var(--acc);stroke-linecap:round}
.mb-ring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.mb-ring b{font-size:calc(var(--sz) * .22);font-weight:800;line-height:1;letter-spacing:-.02em}
.mb-ring small{font-size:8px;color:var(--mut);margin-top:3px;font-weight:600}
.mb-tl>div{display:flex;gap:9px;position:relative;padding-bottom:9px}
.mb-tl>div:not(:last-child)::before{content:"";position:absolute;left:7.25px;top:17px;bottom:1px;width:1.5px;background:var(--line)}
.mb-tl>div.done::before{background:var(--acc)}
.mb-tl i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);flex:none;display:grid;place-items:center}
.mb-tl .done i{background:var(--acc);border-color:var(--acc);color:#fff}
.mb-tl i svg{width:10px;height:10px}
.mb-tl .now i{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 20%,transparent)}
.mb-tl .now i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.mb-tl b{display:block;font-size:10px}
.mb-tl small{font-size:8.5px;color:var(--mut)}
.mb-tl div:not(.done):not(.now) b{color:var(--mut);font-weight:500}
.mb-stages{display:flex}
.mb-stages span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:8px;color:var(--mut);font-weight:600;position:relative}
.mb-stages span::before{content:"";position:absolute;top:4px;left:-50%;right:50%;height:2px;background:var(--line)}
.mb-stages span:first-child::before{display:none}
.mb-stages .done::before,.mb-stages .now::before{background:var(--acc)}
.mb-stages i{width:10px;height:10px;border-radius:50%;background:var(--line);position:relative;z-index:1}
.mb-stages .done i{background:var(--acc)}
.mb-stages .now i{background:var(--card);border:2.5px solid var(--acc)}
.mb-stages .now{color:var(--ink)}
.mb-map{border-radius:var(--r);overflow:hidden;height:118px;border:1px solid var(--line)}
.mb-map svg{width:100%;height:100%}
.mb-map .land{fill:#EFE9DF}
.mb-map .water{fill:#CFE3EA}
.mb-map .blocks rect{fill:#E2D9CA}
.mb-map .roads path{stroke:#fff;stroke-width:7}
.mb-map .route{stroke:var(--acc);stroke-width:3;stroke-dasharray:6 5;stroke-linecap:round;animation:mbdash 1.2s linear infinite}
.mb-map .me{fill:var(--ink);stroke:#fff;stroke-width:2.5}
.mb-map .dest{fill:var(--acc)}
@keyframes mbdash{to{stroke-dashoffset:-22}}
.mb-toast{display:flex;gap:8px;align-items:center;padding:9px 11px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:9px}
.mb-toast>svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#2E9E6A;color:#fff;flex:none}
.mb-toast b{display:block;font-size:10px}
.mb-search{display:flex;align-items:center;gap:7px;height:32px;padding:0 5px 0 11px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-size:9.5px}
.mb-search>svg{width:13px;height:13px}
.mb-search span{flex:1}
.mb-search i{width:23px;height:23px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center}
.mb-search i svg{width:12px;height:12px}
.mb-sel,.mb-ta{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:9.5px;display:flex;justify-content:space-between}
.mb-sel i{font-style:normal;color:var(--mut)}
.mb-ta{min-height:42px;color:var(--mut)}
.mb-tog{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0}
.mb-tog b{display:block;font-size:10px}
.mb-tog small{font-size:8.5px;color:var(--mut)}
.mb-tog i{width:28px;height:16px;border-radius:99px;background:var(--line);position:relative;flex:none}
.mb-tog i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.mb-tog i.on{background:var(--acc)}
.mb-tog i.on::after{left:14px}
.mb-slide{position:relative;height:38px;border-radius:99px;background:var(--acc);color:var(--acc-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;padding-left:24px}
.mb-slide i{position:absolute;left:4px;top:4px;width:30px;height:30px;border-radius:50%;background:var(--acc-ink);color:var(--acc);display:grid;place-items:center}
.mb-slide svg{width:14px;height:14px}
.mb-cart{flex:none;margin:0 10px 4px;height:40px;border-radius:99px;background:var(--acc);color:var(--acc-ink);display:flex;align-items:center;justify-content:space-between;padding:0 7px;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--acc) 70%,transparent)}
.mb-cart span{display:flex;align-items:center;gap:7px;font-weight:800;font-size:10.5px}
.mb-cart em{font-style:normal;width:27px;height:27px;border-radius:50%;background:rgba(0,0,0,.18);display:grid;place-items:center}
.mb-cart b{padding-right:8px;font-size:11px}
.mb-utabs{display:flex;gap:14px;border-bottom:1px solid var(--line)}
.mb-utabs span{padding:0 0 6px;font-size:10px;font-weight:600;color:var(--mut)}
.mb-utabs .on{color:var(--ink);box-shadow:inset 0 -2px var(--acc)}

/* ── store · KORA ── */
.sk-store .logo{font-family:var(--f-disp);letter-spacing:.34em;font-weight:500;font-size:14px;padding-left:.34em}
.st-banner{position:relative;border-radius:16px;background:linear-gradient(135deg,#C2643A,#9C4422);color:#fff;height:112px;overflow:hidden;display:flex;padding:14px}
.st-banner>div{position:relative;z-index:1;display:flex;flex-direction:column}
.st-banner small{font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;font-weight:700}
.st-banner b{font-family:var(--f-disp);font-weight:300;font-size:25px;line-height:.98;margin:5px 0 auto;letter-spacing:-.01em}
.st-banner b em{font-style:italic}
.st-banner span{font-size:9px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.6);align-self:flex-start;padding-bottom:1px}
.st-banner>svg{position:absolute;right:-30px;bottom:-22px;width:118px;height:118px;transform:rotate(-8deg);filter:drop-shadow(0 10px 14px rgba(60,20,5,.35))}
.st-order{padding:4px 10px 0}
.st-order .oh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0 10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.st-order .oh small{font-size:8px;color:var(--mut);font-weight:700;letter-spacing:.06em}
.st-order .oh b{display:block;font-family:var(--f-disp);font-size:13px;font-weight:400}
.st-order .thumbs{display:flex;padding-left:8px}
.st-order .thumbs i{width:30px;height:30px;border-radius:9px;background:var(--soft);overflow:hidden;border:2px solid var(--card);margin-left:-8px}
.st-order .thumbs svg{width:100%;height:100%}
.sk-store .mb-body>.mb-row .th{background:var(--soft);width:36px;height:36px}

/* ── store driver app ── */
.fl-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.fl-top b{font-size:12px;font-weight:800}
.fl-top>svg{width:16px;height:16px}
.fl-top .live{font-size:8.5px;font-weight:800;color:#3DD68C;display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:99px;background:rgba(61,214,140,.12)}
.fl-top .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3DD68C;box-shadow:0 0 8px #3DD68C}
.sk-fleet .mb-map{height:178px;border:0}
.sk-fleet .mb-map .land{fill:#1A1E24}
.sk-fleet .mb-map .water{fill:#122A33}
.sk-fleet .mb-map .blocks rect{fill:#232831}
.sk-fleet .mb-map .roads path{stroke:#303741}
.sk-fleet .mb-map .me{stroke:#0E1013;fill:#fff}
.fl-sheet{background:var(--card);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:2px;margin-top:-34px;position:relative;box-shadow:0 -12px 30px rgba(0,0,0,.45)}
.fl-sheet small{font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:800}
.fl-sheet b{font-size:15px;font-weight:800}
.fl-sheet>span{font-size:9px;color:var(--mut)}
.fl-sheet .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0}
.fl-sheet .mb-btn.ghost{height:30px}
.fl-prog{background:var(--card);border-radius:14px;padding:11px 12px}
.fl-prog span{font-size:10px;color:var(--mut)}
.fl-prog span b{font-size:21px;color:var(--ink);font-weight:800}
.fl-prog small{font-size:8.5px;color:var(--mut)}
.fl-prog .mb-bar{height:6px;margin:7px 0}
.fl-stops{display:flex;flex-direction:column;gap:6px}
.fl-stops .mb-row{background:var(--card);border-radius:12px;padding:8px 10px}
.fl-stops .th{border-radius:50%;background:var(--soft);color:var(--ink);width:26px;height:26px;font-size:10px}
.fl-stops .done .th{background:#173527;color:#3DD68C}
.fl-stops .done .tx b{text-decoration:line-through;opacity:.55}
.fl-stops .now{box-shadow:inset 0 0 0 1.5px var(--acc)}
.fl-stops .now .th{background:var(--acc);color:var(--acc-ink)}
.sk-fleet .pill{background:#262A31;color:#B7BCC6}
.sk-fleet .pill.ok{background:#173527;color:#3DD68C}
.sk-fleet .pill.acc{background:var(--acc);color:var(--acc-ink)}

/* ── restaurant · JC-Eatery ── */
.sk-eatery .tbl{display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:99px;background:var(--soft);font-size:9px;font-weight:800;color:var(--acc)}
.sk-eatery .tbl svg{width:12px;height:12px}
.sk-eatery .mb-h{font-size:23px}
.sk-eatery .mb-chips span{background:transparent}
.sk-eatery .mb-chips .on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.ea-feat{position:relative;display:flex;align-items:center;gap:10px;padding:10px;border-radius:18px;background:linear-gradient(135deg,#2E1F15,#1C1410);border:1px solid #3A2A1F}
.ea-feat>svg{width:78px;height:78px;flex:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.ea-feat small{display:block;font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:800}
.ea-feat b{display:block;font-family:var(--f-disp);font-size:16px;font-weight:400;line-height:1.15}
.ea-feat span{font-size:8.5px;color:var(--mut)}
.ea-feat>div{padding-right:24px}
.ea-feat em{display:block;font-style:normal;font-weight:800;font-size:11px;margin-top:4px}
.ea-feat>i{position:absolute;right:10px;bottom:10px;width:26px;height:26px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center}
.ea-feat>i svg{width:13px;height:13px}
.sk-eatery .mb-row.dish .th svg{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.ea-hero{display:flex;justify-content:center;align-items:flex-end;height:122px;margin:0 -12px 4px;background:radial-gradient(60% 80% at 50% 100%,rgba(240,122,43,.38),transparent 70%)}
.ea-hero svg{width:72px;height:72px;margin:0 -12px;filter:drop-shadow(0 12px 14px rgba(0,0,0,.6))}
.ea-hero svg:nth-child(2){width:104px;height:104px;position:relative;z-index:1}
.ea-hero svg:nth-child(3){width:62px;height:62px}
.ea-digits{display:flex;gap:6px}
.ea-digits span{width:42px;height:48px;border-radius:12px;background:var(--card);border:1.5px solid var(--line);display:grid;place-items:center;font-family:var(--f-disp);font-size:23px}
.ea-digits span:last-child{border-color:var(--acc);box-shadow:0 0 0 3px rgba(240,122,43,.2)}
.ea-saved{display:flex;align-items:center;gap:6px;font-size:8.5px;font-weight:600;color:#7FD3A0;background:rgba(61,180,110,.12);padding:6px 9px;border-radius:10px}
.ea-saved svg{width:12px;height:12px;flex:none}
.ea-timer{display:flex;justify-content:center;padding-top:6px}
.ea-timer .mb-ring b{font-family:var(--f-disp);font-weight:400;font-size:40px}
.ea-stage{text-align:center;font-size:9px;color:var(--mut)}
.ea-stage b{color:var(--ink);font-size:11px}
.mb-row.ok .rt>svg{color:#4CC38A}
.mb-row.dish.ok .th{background:transparent}
.mb-row .tx small .pr{font-style:normal;color:var(--acc);font-weight:800;margin-right:3px}
.dots{display:flex;gap:2px}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--acc);animation:mbblink 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes mbblink{0%,100%{opacity:.25}50%{opacity:1}}
.ea-done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 0 8px}
.ea-done>i{width:62px;height:62px;border-radius:50%;background:#2E9E6A;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(46,158,106,.16),0 0 0 21px rgba(46,158,106,.07)}
.ea-done>i svg{width:28px;height:28px}
.ea-done .mb-h{font-size:30px;margin-top:18px}
.ea-done p{font-size:10px;color:var(--mut)}
.ea-rate{padding:10px}
.ea-rate .stars{display:flex;gap:5px;margin:8px 0 9px}
.ea-rate .stars svg{width:21px;height:21px;color:var(--line)}
.ea-rate .stars svg.on{color:#FFC24B;fill:#FFC24B}

/* ── inventory & POS · Counter ── */
.ct-store{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800}
.ct-store svg{width:14px;height:14px;color:var(--acc)}
.ct-av{width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--acc);display:grid;place-items:center;font-size:9px;font-weight:800}
.ct-big{font-size:28px;font-weight:800;letter-spacing:-.035em;line-height:1;margin-top:-4px}
.ct-up{font-size:9px;font-weight:800;color:#0F9F6E;margin-top:-5px}
.mb-spark{width:100%;height:58px;color:var(--acc)}
.ct-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ct-kpis div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.ct-kpis small{font-size:8px;color:var(--mut);font-weight:700}
.ct-kpis b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.ct-kpis span{font-size:8px;color:var(--mut)}
.ct-kpis .warn b,.ct-kpis .warn span{color:#D9480F}
.sk-counter .mb-body>.mb-row{border-top:1px solid var(--line);padding:6px 0}
.sk-counter .pm{font-style:normal;font-size:7.5px;padding:2px 5px;border-radius:5px;background:var(--soft);color:var(--acc);font-weight:800}

/* ── apartments · Ocean View ── */
.rs-rent{position:relative;overflow:hidden;border-radius:20px;padding:13px 14px 14px;background:linear-gradient(135deg,#12919C,#0A5560);color:#fff;display:flex;flex-direction:column;gap:1px}
.rs-rent small{font-size:8.5px;opacity:.85;font-weight:600}
.rs-rent b{font-family:var(--f-disp);font-weight:400;font-size:27px;letter-spacing:-.01em;line-height:1.1}
.rs-rent>span:not(.mb-btn){font-size:8.5px;opacity:.8;margin-bottom:9px}
.rs-rent .mb-btn{align-self:flex-start;position:relative;z-index:1}
.rs-rent svg{position:absolute;left:0;bottom:0;width:100%;height:44px;fill:rgba(255,255,255,.08)}
.rs-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rs-acts span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:8.5px;font-weight:700}
.rs-acts i{width:38px;height:38px;border-radius:13px;background:var(--card);border:1px solid var(--line);color:var(--acc);display:grid;place-items:center}
.rs-acts svg{width:16px;height:16px}
.rs-types{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rs-types span{display:flex;align-items:center;gap:6px;padding:8px 9px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:9.5px;font-weight:700}
.rs-types svg{width:14px;height:14px;color:var(--acc)}
.rs-types .on{border-color:var(--acc);background:var(--soft);box-shadow:inset 0 0 0 1px var(--acc)}
.rs-photos{display:flex;gap:6px}
.rs-photos span{width:46px;height:46px;border-radius:12px;overflow:hidden;background:var(--card);border:1px dashed #B9CDD0}
.rs-photos span svg{width:100%;height:100%}
.rs-photos .add{display:grid;place-items:center;color:var(--mut)}
.rs-photos .add svg{width:18px;height:18px}

/* ── learning · Brightpath ── */
.sk-learn .mb-h{font-weight:800;letter-spacing:-.03em}
.ln-streak{display:flex;align-items:center;gap:3px;padding:5px 9px;border-radius:99px;background:#FFF1C9;color:#B45309;font-weight:800;font-size:10px}
.ln-streak svg{width:13px;height:13px;fill:#FFB020;stroke:#E67E00}
.ln-cont{display:flex;align-items:center;gap:10px;padding:14px;border-radius:20px;background:linear-gradient(140deg,#7B5BFF,#4B2BD6);color:#fff;position:relative;overflow:hidden}
.ln-cont::after{content:"";position:absolute;right:-34px;top:-34px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.08)}
.ln-cont>div{flex:1;display:flex;flex-direction:column;gap:1px;position:relative;z-index:1}
.ln-cont small{font-size:7.5px;opacity:.8;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.ln-cont b{font-size:14px;font-weight:800}
.ln-cont>div>span:not(.mb-btn){font-size:9px;opacity:.85;margin-bottom:9px}
.ln-cont .mb-btn.light{align-self:flex-start;color:#4B2BD6}
.ln-cont .mb-ring{position:relative;z-index:1}
.ln-cont .mb-ring .tr{stroke:rgba(255,255,255,.2)}
.ln-cont .mb-ring .fg{stroke:var(--yel)}
.ln-cont .mb-ring b{font-size:13px;color:#fff}
.ln-due{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px;background:#FFF4D6;color:#8A5A00;font-size:9.5px}
.ln-due svg{width:14px;height:14px;flex:none}
.ln-time{display:flex;gap:4px;align-items:center;font-weight:800;font-size:10px;color:var(--acc);background:var(--soft);padding:4px 8px;border-radius:99px}
.mb-hd .ln-time svg{width:12px;height:12px}
.ln-seg{display:flex;gap:3px}
.ln-seg i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.ln-seg .done{background:var(--acc)}
.ln-seg .now{background:var(--yel)}
.ln-q{padding:16px 14px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-align:center;box-shadow:0 10px 24px -16px rgba(75,43,214,.4)}
.ln-q small{font-size:9px;color:var(--mut);font-weight:700}
.ln-q b{display:block;font-size:25px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.ln-opts{display:grid;gap:6px}
.ln-opts span{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:13px;background:var(--card);border:1.5px solid var(--line);font-size:11px;font-weight:700}
.ln-opts i{width:22px;height:22px;border-radius:7px;background:var(--soft);color:var(--acc);display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:800}
.ln-opts svg{margin-left:auto;width:14px;height:14px;color:var(--acc)}
.ln-opts .on{border-color:var(--acc);background:#F0EBFF}
.ln-opts .on i{background:var(--acc);color:#fff}
.ln-res{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding-top:8px}
.ln-res .confetti{position:absolute;top:0;left:-12px;width:calc(100% + 24px);height:90px}
.ln-res .mb-ring b{font-size:24px}
.ln-res .mb-h{font-size:17px;margin-top:8px}
.ln-res p{font-size:9px;color:var(--mut)}

/* ── jobs · Workwise ── */
.sk-jobs .mb-chips .on{background:var(--acc);border-color:var(--acc);color:#fff}
.jb-feat{padding:12px;border-radius:18px;background:linear-gradient(150deg,#145A3C,#0A2A1D);color:#fff;display:flex;flex-direction:column;gap:9px}
.jb-feat .t,.jb-app .t{display:flex;align-items:center;gap:9px}
.jb-feat .t span,.jb-app .t span{flex:1;min-width:0;display:flex;flex-direction:column}
.jb-feat b{font-size:12.5px;font-weight:800}
.jb-feat small{font-size:8.5px;opacity:.7}
.jb-feat .t>svg{width:16px;height:16px;color:var(--lime)}
.jb-feat .tags{display:flex;gap:5px;flex-wrap:wrap}
.jb-feat .tags span{font-size:8px;padding:3px 7px;border-radius:99px;background:rgba(255,255,255,.1);font-weight:700}
.jb-feat .tags span:last-child{background:var(--lime);color:#0B2A1C}
.jb-prof{display:flex;align-items:center;gap:11px;padding:6px 0 2px}
.jb-prof>span{display:flex;flex-direction:column}
.jb-prof b{font-size:14px;font-weight:800}
.jb-prof small{font-size:9px;color:var(--mut)}
.jb-prof em{font-style:normal;font-size:8.5px;color:var(--acc);font-weight:800;margin-top:3px}
.jb-prof .mb-ring b{font-size:14px}
.jb-app{padding:10px;display:flex;flex-direction:column;gap:11px}
.jb-app b,.jb-app small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jb-app b{font-size:10.5px;font-weight:800}
.jb-app small{font-size:8.5px;color:var(--mut)}
.jb-app .when{display:flex;gap:6px;align-items:center;font-size:9px;font-weight:700;padding:6px 8px;border-radius:9px;background:var(--soft);color:var(--acc)}
.jb-app .when svg{width:12px;height:12px}

@media (prefers-reduced-motion:reduce){.mb-map .route,.dots i{animation:none}}