/* Layout: review stage — index rail · iPhone 16 Pro frame · inspector. The phone runs its own iOS 26 token set. */
:root{
  --pg-bg:#ECEDF2; --pg-fg:#1C1C1E; --pg-fg2:#6E6E73; --pg-card:#FFFFFF; --pg-line:rgba(60,60,67,.14); --pg-accent:#0A66D6; --pg-accent-soft:rgba(10,102,214,.10);
  --pg-chip:rgba(120,120,128,.12); --pg-scale:#7A3FD6; --pg-scale-soft:rgba(122,63,214,.12); --pg-new:#1F7A3E; --pg-new-soft:rgba(52,199,89,.16);
  --frame:#3B3B3F; --frame-edge:#1A1A1C;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:var(--font);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --pg-bg:#0C0C10; --pg-fg:#F2F2F7; --pg-fg2:#98989F; --pg-card:#17171B; --pg-line:rgba(235,235,245,.12); --pg-accent:#3C8CFF; --pg-accent-soft:rgba(60,140,255,.16); --pg-chip:rgba(120,120,128,.24); --pg-scale:#B07CFF; --pg-scale-soft:rgba(176,124,255,.18); --pg-new:#5BD37A; --pg-new-soft:rgba(48,209,88,.2); --frame:#2A2A2E; --frame-edge:#000; color-scheme:dark } }
:root[data-theme="dark"]{ --pg-bg:#0C0C10; --pg-fg:#F2F2F7; --pg-fg2:#98989F; --pg-card:#17171B; --pg-line:rgba(235,235,245,.12); --pg-accent:#3C8CFF; --pg-accent-soft:rgba(60,140,255,.16); --pg-chip:rgba(120,120,128,.24); --pg-scale:#B07CFF; --pg-scale-soft:rgba(176,124,255,.18); --pg-new:#5BD37A; --pg-new-soft:rgba(48,209,88,.2); --frame:#2A2A2E; --frame-edge:#000; color-scheme:dark }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--pg-bg);color:var(--pg-fg);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.4}
::selection{background:var(--pg-accent-soft)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--pg-accent);outline-offset:2px;border-radius:8px}
svg{display:block}

/* ───────── review stage ───────── */
.stage{min-height:100%;padding-block:24px 48px;padding-inline:16px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:28px}
.rail,.insp{width:300px;max-width:100%;display:flex;flex-direction:column;gap:12px}
.rail{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;scrollbar-width:none}
.insp{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;scrollbar-width:none}
.rail::-webkit-scrollbar,.insp::-webkit-scrollbar{display:none}
.brand{padding:6px 8px 2px;display:flex;flex-direction:column;gap:4px}
.brand h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.4px;line-height:1.15}
.brand h1 small{font-weight:500;color:var(--pg-fg2);font-size:14px;letter-spacing:0;margin-left:8px}
.brand p{margin:0;color:var(--pg-fg2);font-size:13px}
.group{background:var(--pg-card);border-radius:18px;padding:10px 6px 6px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 .5px var(--pg-line)}
.group h3{margin:0;padding:2px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--pg-fg2)}
.item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 10px;border-radius:11px;text-align:left;transition:background .18s ease}
.item:hover{background:var(--pg-chip)}
.item.on{background:var(--pg-accent-soft)}
.item .n{font-size:12px;font-weight:600;color:var(--pg-fg2);width:22px;font-variant-numeric:tabular-nums}
.item .l{flex:1;font-size:14.5px}
.item.on .l{font-weight:600;color:var(--pg-accent)}
.tag{height:20px;padding:0 7px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.4px;display:inline-flex;align-items:center;background:var(--pg-chip);color:var(--pg-fg2)}
.tag.scale{background:var(--pg-scale-soft);color:var(--pg-scale)}
.tag.new{background:var(--pg-new-soft);color:var(--pg-new)}
.tag.chg{background:var(--pg-accent-soft);color:var(--pg-accent)}

/* inspector */
.ctl{display:flex;flex-direction:column;gap:8px;padding:2px 10px 8px}
.ctl label{font-size:13px;color:var(--pg-fg2);display:flex;justify-content:space-between;align-items:center;gap:8px}
.seg{display:flex;background:var(--pg-chip);border-radius:9px;padding:2px;position:relative}
.seg button{flex:1;min-height:28px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--pg-fg2);transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.seg button.on{background:var(--pg-card);color:var(--pg-fg);box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px var(--pg-line)}
.sw{width:42px;height:26px;border-radius:13px;background:var(--pg-chip);position:relative;transition:background .22s ease;flex-shrink:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:11px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.sw.on{background:#34C759}
.sw.on::after{transform:translateX(16px)}
.cov{display:flex;flex-direction:column}
.cov button{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:7px 10px;border-radius:10px;transition:background .18s}
.cov button:hover{background:var(--pg-chip)}
.cov .ck{width:18px;height:18px;border-radius:9px;background:var(--pg-new-soft);color:var(--pg-new);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.cov .ck.scale{background:var(--pg-scale-soft);color:var(--pg-scale)}
.cov .t{font-size:13px;font-weight:600;line-height:1.3}
.cov .s{font-size:12px;color:var(--pg-fg2);line-height:1.35}
.note{font-size:12px;color:var(--pg-fg2);line-height:1.4;padding:0 10px 6px}
.note a{color:var(--pg-accent);text-decoration:none}

/* ───────── device ───────── */
.dock{display:flex;flex-direction:column;align-items:center;gap:14px;flex-shrink:0}
.dock-h{height:874px;transform-origin:top center}
.scrl{font-size:12.5px;color:var(--pg-fg2);text-align:center;font-variant-numeric:tabular-nums}
.dev{position:relative;width:426px;height:898px;border-radius:66px;background:var(--frame);padding:12px;box-shadow:0 0 0 1px var(--frame-edge),0 24px 60px rgba(0,0,0,.28),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.dev::before{content:"";position:absolute;inset:3px;border-radius:63px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);pointer-events:none}
.dev .btn{position:absolute;background:var(--frame);border-radius:2px;box-shadow:0 0 0 .5px var(--frame-edge)}
.dev .btn.l1{left:-3px;top:150px;width:3px;height:34px}
.dev .btn.l2{left:-3px;top:210px;width:3px;height:62px}
.dev .btn.l3{left:-3px;top:288px;width:3px;height:62px}
.dev .btn.r1{right:-3px;top:240px;width:3px;height:92px}
.scr{position:relative;width:402px;height:874px;border-radius:55px;overflow:hidden;background:var(--bg);color:var(--label);font-family:var(--font);display:flex;flex-direction:column;isolation:isolate}
.island{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:18px;background:#000;z-index:60}
.sb{position:absolute;left:0;right:0;top:0;height:54px;z-index:55;display:flex;align-items:flex-end;justify-content:space-between;padding:0 36px 8px 44px;font-size:17px;font-weight:600;letter-spacing:-.4px;pointer-events:none;color:var(--label)}
.sb .r{display:flex;align-items:center;gap:6px}
.home{position:absolute;left:50%;bottom:8px;width:139px;height:5px;margin-left:-70px;border-radius:3px;background:var(--label);opacity:.9;z-index:60;pointer-events:none}

/* ───────── iOS tokens (light) ───────── */
.scr{
  --bg:#F2F2F7; --bg2:#FFFFFF; --bg3:#F2F2F7; --wall:#F7F7FA;
  --label:#000000; --label2:rgba(60,60,67,.6); --label3:rgba(60,60,67,.3); --label4:rgba(60,60,67,.18);
  --sep:rgba(60,60,67,.29); --sep2:rgba(60,60,67,.12);
  --fill:rgba(120,120,128,.2); --fill2:rgba(120,120,128,.16); --fill3:rgba(120,120,128,.12); --fill4:rgba(120,120,128,.08);
  --blue:#007AFF; --green:#34C759; --orange:#FF9500; --red:#FF3B30; --yellow:#FFCC00; --purple:#AF52DE; --teal:#30B0C7; --indigo:#5856D6; --pink:#FF2D55; --gray:#8E8E93; --mint:#00C7BE; --brown:#A2845E;
  --on:#FFFFFF;
  --glass:rgba(255,255,255,.38); --glass-strong:rgba(255,255,255,.6); --glass-edge:rgba(255,255,255,.9); --glass-edge-out:rgba(0,0,0,.07); --glass-hi:rgba(255,255,255,1); --glass-lo:rgba(0,0,0,.07); --glass-rim:1.22; --glass-spec:rgba(255,255,255,.5);
  --glass-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.12);
  --scrim:rgba(0,0,0,.35);
  --map-land:#EEEBE3; --map-block:#E4E1D8; --map-road:#FFFFFF; --map-hwy:#F9E9B8; --map-park:#CFE6BB; --map-water:#B9D9EE; --map-label:#7A7A80;
  --bl:1px;
}
.scr.dark{
  --bg:#000000; --bg2:#1C1C1E; --bg3:#2C2C2E; --wall:#0A0A0C;
  --label:#FFFFFF; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3); --label4:rgba(235,235,245,.18);
  --sep:rgba(84,84,88,.65); --sep2:rgba(84,84,88,.35);
  --fill:rgba(120,120,128,.36); --fill2:rgba(120,120,128,.32); --fill3:rgba(120,120,128,.24); --fill4:rgba(120,120,128,.18);
  --blue:#0A84FF; --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --yellow:#FFD60A; --purple:#BF5AF2; --teal:#40C8E0; --indigo:#5E5CE6; --pink:#FF375F; --gray:#8E8E93; --mint:#63E6E2; --brown:#AC8E68;
  --on:#FFFFFF;
  --glass:rgba(70,70,76,.42); --glass-strong:rgba(36,36,40,.66); --glass-edge:rgba(255,255,255,.28); --glass-edge-out:rgba(0,0,0,.5); --glass-hi:rgba(255,255,255,.3); --glass-lo:rgba(0,0,0,.35); --glass-rim:1.5; --glass-spec:rgba(255,255,255,.16);
  --glass-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.5);
  --scrim:rgba(0,0,0,.55);
  --map-land:#1F2023; --map-block:#27282C; --map-road:#3C3D42; --map-hwy:#4B4433; --map-park:#1E2E22; --map-water:#13222F; --map-label:#9A9AA2;
}
.scr.dark .island{box-shadow:0 0 0 .5px rgba(255,255,255,.08)}

/* ambient wallpaper under glass */
.wall{position:absolute;inset:0;z-index:0;background:var(--wall);overflow:hidden;pointer-events:none}
.wall i{position:absolute;border-radius:50%;filter:blur(54px);opacity:.85}
.wall i:nth-child(1){left:-90px;top:-60px;width:340px;height:340px;background:color-mix(in srgb,var(--blue) 55%,transparent)}
.wall i:nth-child(2){right:-130px;top:260px;width:380px;height:380px;background:color-mix(in srgb,var(--orange) 48%,transparent)}
.wall i:nth-child(3){left:-80px;bottom:-140px;width:320px;height:320px;background:color-mix(in srgb,var(--teal) 45%,transparent)}
.wall i:nth-child(4){right:-60px;bottom:40px;width:220px;height:220px;background:color-mix(in srgb,var(--pink) 40%,transparent)}
.scr.dark .wall i{opacity:.5}

/* ───────── Apple type styles ───────── */
.t-lt{font-size:34px;line-height:41px;font-weight:700;letter-spacing:.4px}
.t-t1{font-size:28px;line-height:34px;font-weight:700;letter-spacing:.36px}
.t-t2{font-size:22px;line-height:28px;font-weight:700;letter-spacing:.35px}
.t-t3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:.38px}
.t-hl{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.41px}
.t-bd{font-size:17px;line-height:22px;font-weight:400;letter-spacing:-.41px}
.t-co{font-size:16px;line-height:21px;letter-spacing:-.32px}
.t-sh{font-size:15px;line-height:20px;letter-spacing:-.24px}
.t-fn{font-size:13px;line-height:18px;letter-spacing:-.08px}
.t-c1{font-size:12px;line-height:16px;letter-spacing:0}
.t-c2{font-size:11px;line-height:13px;letter-spacing:.07px}
.sec{color:var(--label2)}
.ter{color:var(--label3)}
.b{font-weight:600}
.bb{font-weight:700}
.num{font-variant-numeric:tabular-nums}
.na{font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums}

/* ───────── glass ───────── */
/* Liquid Glass: frosted fill + specular sweep in the fill, a refracting lens rim (brighter, re-blurred backdrop on the outer 3px) and a hairline edge */
.glass{position:relative;isolation:isolate;background:linear-gradient(155deg,var(--glass-spec) 0%,transparent 34%,transparent 66%,color-mix(in srgb,var(--glass-spec) 45%,transparent) 100%),var(--glass);-webkit-backdrop-filter:blur(22px) saturate(200%) brightness(1.04);backdrop-filter:blur(22px) saturate(200%) brightness(1.04);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-lo),inset 1px 0 0 color-mix(in srgb,var(--glass-hi) 45%,transparent),inset -1px 0 0 color-mix(in srgb,var(--glass-lo) 60%,transparent),0 0 0 .5px var(--glass-edge-out)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;-webkit-backdrop-filter:blur(2px) brightness(var(--glass-rim)) saturate(1.4) contrast(1.08);backdrop-filter:blur(2px) brightness(var(--glass-rim)) saturate(1.4) contrast(1.08);pointer-events:none;z-index:2}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px var(--glass-edge);pointer-events:none;z-index:2;opacity:.7}
.glass.strong{background:linear-gradient(155deg,color-mix(in srgb,var(--glass-spec) 70%,transparent) 0%,transparent 34%,transparent 66%,color-mix(in srgb,var(--glass-spec) 35%,transparent) 100%),var(--glass-strong)}
.gbtn{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;color:var(--label);transition:transform .15s ease,background .2s ease;flex-shrink:0}
.gbtn:active{transform:scale(.92)}
.gpill{height:44px;padding:0 16px;border-radius:22px;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.24px;color:var(--label);transition:transform .15s ease}
.gpill:active{transform:scale(.95)}
.gpill.red{background:linear-gradient(155deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.05) 40%,transparent 60%,rgba(255,255,255,.18) 100%),color-mix(in srgb,var(--red) 82%,transparent);color:#fff;letter-spacing:.3px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 22px color-mix(in srgb,var(--red) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.12)}
.dot{width:8px;height:8px;border-radius:4px;flex-shrink:0;transition:background .3s ease}

/* ───────── nav / tabs ───────── */
.nav{position:relative;z-index:30;display:flex;align-items:center;gap:8px;padding:60px 16px 6px}
.nav .sp{flex:1}
.nav .inl{position:absolute;left:112px;right:112px;top:60px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.nav .inl .t{font-size:17px;font-weight:600;letter-spacing:-.41px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nav .inl .s{font-size:12px;color:var(--label2);white-space:nowrap}
.large{padding:6px 20px 12px;position:relative;z-index:5;animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.large .s{margin-top:2px}
.tabs{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:40;height:64px;width:272px;border-radius:32px;display:flex;align-items:center;padding:0 6px}
.tabs .ind{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/3);border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.45));box-shadow:0 1px 3px rgba(0,0,0,.08),inset 0 1px 0 #fff,0 0 0 .5px rgba(0,0,0,.04);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.scr.dark .tabs .ind{background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.1));box-shadow:0 1px 3px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.tabs button{position:relative;flex:1;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--label2);font-size:10px;font-weight:600;letter-spacing:.1px;transition:color .25s ease}
.tabs button.on{color:var(--blue)}

/* ───────── content ───────── */
.body{flex:1;min-height:0;position:relative;z-index:5;overflow:auto;scrollbar-width:none;padding:4px 16px 130px;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;grid-auto-rows:max-content;gap:16px}
.body::-webkit-scrollbar{display:none}
.body.short{padding-bottom:16px}
.card{background:var(--bg2);border-radius:24px;overflow:hidden;box-shadow:0 0 0 .5px var(--sep2)}
.scr.dark .card{box-shadow:none}
.card.pad{padding:16px}
.row{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 16px;position:relative}
.row+.row::before,.row.sep::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:var(--sep)}
.row.icon+.row::before{left:60px}
.row .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.row .ic.lg{width:38px;height:38px;border-radius:11px}
.row .mn{flex:1;min-width:0}
.row .chev{color:var(--label3);flex-shrink:0}
.tint-blue{background:var(--blue)}.tint-green{background:var(--green)}.tint-orange{background:var(--orange)}.tint-red{background:var(--red)}.tint-purple{background:var(--purple)}.tint-gray{background:var(--gray)}.tint-teal{background:var(--teal)}.tint-indigo{background:var(--indigo)}.tint-yellow{background:var(--yellow)}.tint-pink{background:var(--pink)}.tint-mint{background:var(--mint)}.tint-brown{background:var(--brown)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px;margin-bottom:-6px}
.chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;font-size:13px;font-weight:600;letter-spacing:-.08px;white-space:nowrap}
.chip.sm{height:22px;font-size:11px;padding:0 8px}
.c-green{background:color-mix(in srgb,var(--green) 16%,transparent);color:color-mix(in srgb,var(--green) 70%,var(--label))}
.c-orange{background:color-mix(in srgb,var(--orange) 18%,transparent);color:color-mix(in srgb,var(--orange) 70%,var(--label))}
.c-purple{background:color-mix(in srgb,var(--purple) 16%,transparent);color:color-mix(in srgb,var(--purple) 70%,var(--label))}
.c-red{background:color-mix(in srgb,var(--red) 14%,transparent);color:color-mix(in srgb,var(--red) 78%,var(--label))}
.c-gray{background:var(--fill3);color:var(--label2)}
.c-blue{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.c-teal{background:color-mix(in srgb,var(--teal) 16%,transparent);color:color-mix(in srgb,var(--teal) 70%,var(--label))}
.c-yellow{background:color-mix(in srgb,var(--yellow) 24%,transparent);color:color-mix(in srgb,var(--orange) 60%,var(--label))}
.scr.dark .c-green{color:var(--green)}.scr.dark .c-orange{color:var(--orange)}.scr.dark .c-purple{color:var(--purple)}.scr.dark .c-red{color:var(--red)}.scr.dark .c-teal{color:var(--teal)}.scr.dark .c-yellow{color:var(--yellow)}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{height:28px;padding:0 11px;border-radius:14px;background:var(--fill3);font-size:13px;font-weight:600;letter-spacing:-.08px;display:inline-flex;align-items:center;color:var(--label)}

/* buttons */
.btn-p{height:52px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.04) 42%,transparent 60%,rgba(255,255,255,.14) 100%),var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.41px;width:100%;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 22px color-mix(in srgb,var(--blue) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12);transition:transform .15s ease,background .3s ease,box-shadow .3s ease,color .3s ease}
.btn-p:active{transform:scale(.97)}
.btn-p.off{background:var(--fill2);color:var(--label3);box-shadow:none}
.btn-p.red{background:linear-gradient(160deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.04) 42%,transparent 60%,rgba(255,255,255,.14) 100%),var(--red)}
.btn-p.green{background:linear-gradient(160deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.04) 42%,transparent 60%,rgba(255,255,255,.14) 100%),var(--green)}
.btn-p.red{box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 22px color-mix(in srgb,var(--red) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-p.green{box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 22px color-mix(in srgb,var(--green) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-s{height:52px;border-radius:26px;background:color-mix(in srgb,var(--blue) 13%,transparent);color:var(--blue);display:flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.41px;width:100%;transition:transform .15s ease,background .3s ease,color .3s ease}
.btn-s:active{transform:scale(.97)}
.btn-s.red{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.btn-s.gray{background:var(--fill2);color:var(--label)}
.btn-s.off{background:var(--fill4);color:var(--label3)}
.btn-s.sm,.btn-p.sm{height:44px;border-radius:22px;font-size:15px;letter-spacing:-.24px;width:auto;padding:0 18px}
.btn-s.md,.btn-p.md{height:46px;border-radius:23px;font-size:15px;letter-spacing:-.24px}
.btn-l{height:44px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--blue);font-size:16px;font-weight:600;letter-spacing:-.32px;width:100%}
.btn-l.red{color:var(--red)}
.cta{padding:12px 16px 40px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:6}
.cta .hint{text-align:center;font-size:13px;color:var(--label2);letter-spacing:-.08px;line-height:18px}
.cta .two{display:flex;gap:10px}
.cta .two>*{flex:1}
.cta .two>.w{flex:1.35}
.cta.tabsafe{padding-bottom:112px}

/* segmented (iOS 26 glass) */
.segc{position:relative;display:flex;background:var(--fill3);border-radius:14px;padding:2px}
.segc .ind{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/var(--n,3));border-radius:12px;background:var(--bg2);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px var(--sep2);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.scr.dark .segc .ind{background:var(--bg3)}
.segc button{position:relative;flex:1;height:34px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;letter-spacing:-.08px;color:var(--label)}

/* stats tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tiles.two{grid-template-columns:1fr 1fr}
.tile{padding:14px 12px 12px;border-radius:20px;background:var(--bg2);box-shadow:0 0 0 .5px var(--sep2)}
.scr.dark .tile{box-shadow:none}
.tile .v{font-size:30px;line-height:34px;font-weight:700;letter-spacing:.36px;font-variant-numeric:tabular-nums}
.tile .l{font-size:13px;line-height:18px;color:var(--label2);letter-spacing:-.08px;font-weight:500}
.tile.green{background:color-mix(in srgb,var(--green) 14%,var(--bg2))}
.tile.orange{background:color-mix(in srgb,var(--orange) 16%,var(--bg2))}
.tile.red{background:color-mix(in srgb,var(--red) 12%,var(--bg2))}
.tile.purple{background:color-mix(in srgb,var(--purple) 14%,var(--bg2))}
.tile.blue{background:color-mix(in srgb,var(--blue) 12%,var(--bg2))}
.tile.yellow{background:color-mix(in srgb,var(--yellow) 22%,var(--bg2))}
.tile.green .l{color:color-mix(in srgb,var(--green) 70%,var(--label))}.tile.orange .l{color:color-mix(in srgb,var(--orange) 70%,var(--label))}.tile.red .l{color:color-mix(in srgb,var(--red) 75%,var(--label))}.tile.purple .l{color:color-mix(in srgb,var(--purple) 70%,var(--label))}.tile.blue .l{color:var(--blue)}.tile.yellow .l{color:color-mix(in srgb,var(--orange) 65%,var(--label))}
.scr.dark .tile.green .l{color:var(--green)}.scr.dark .tile.orange .l{color:var(--orange)}.scr.dark .tile.red .l{color:var(--red)}.scr.dark .tile.purple .l{color:var(--purple)}.scr.dark .tile.yellow .l{color:var(--yellow)}

/* banners */
.ban{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:22px}
.ban .ic{flex-shrink:0;margin-top:1px}
.ban .t{font-size:16px;font-weight:600;letter-spacing:-.32px;line-height:21px}
.ban .s{font-size:14px;line-height:19px;letter-spacing:-.15px;margin-top:1px}
.ban.orange{background:color-mix(in srgb,var(--orange) 18%,var(--bg2));color:color-mix(in srgb,var(--orange) 65%,var(--label))}
.ban.red{background:color-mix(in srgb,var(--red) 13%,var(--bg2));color:color-mix(in srgb,var(--red) 78%,var(--label))}
.ban.purple{background:color-mix(in srgb,var(--purple) 14%,var(--bg2));color:color-mix(in srgb,var(--purple) 72%,var(--label))}
.ban.gray{background:var(--bg2);color:var(--label);box-shadow:0 0 0 .5px var(--sep2)}
.scr.dark .ban.orange{color:var(--orange)}.scr.dark .ban.red{color:var(--red)}.scr.dark .ban.purple{color:var(--purple)}
.ban.gray .s{color:var(--label2)}

/* progress bar */
.bar{height:8px;border-radius:4px;background:var(--fill3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--blue);transform-origin:left;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.stack{display:flex;height:10px;gap:3px}
.stack i{border-radius:5px;transform-origin:left;animation:fill .9s cubic-bezier(.2,.8,.2,1) both}
.legend{display:flex;flex-direction:column;gap:7px}
.legend div{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:-.24px}
.legend div span:first-child{width:10px;height:10px;border-radius:5px}
.legend div span:nth-child(2){flex:1}

/* ───────── map ───────── */
.map{position:absolute;inset:0;background:var(--map-land);overflow:hidden;z-index:0;animation:fade .5s ease both;border-radius:55px}
.map::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tile) no-repeat;background-size:402px 874px;background-position:var(--pos,0 0)}
.card .map,.card .map::before{border-radius:0}
.map.top{bottom:auto;height:420px}
.map>svg{position:absolute;inset:0;width:100%;height:100%}
.map .ov{position:absolute;left:0;top:0;width:402px;height:874px}
.map .ov>svg{position:absolute;inset:0;width:100%;height:100%}
.map .topfade{position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 40%,transparent) 55%,transparent 100%);pointer-events:none}
.scr:not(.dark) .map::before{filter:invert(1) hue-rotate(185deg) brightness(1.14) contrast(.88) saturate(.85)}
.map .lab{position:absolute;font-size:10px;font-weight:600;color:var(--map-label);letter-spacing:.2px;white-space:nowrap;text-shadow:0 0 3px var(--map-road)}
.you{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transform:translate(-50%,-50%);transition:left .8s ease,top .8s ease}
.you::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:color-mix(in srgb,var(--blue) 25%,transparent);animation:pulse 2.4s ease-out infinite}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.pin .h{min-width:30px;height:30px;padding:0 8px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 2px 6px rgba(0,0,0,.25);border:2px solid #fff}
.pin .st{width:2px;height:7px;background:#fff;margin-top:-1px}
.pin.next .h{background:var(--blue);color:#fff}
.pin.other .h{background:var(--bg2);color:var(--label);border-color:var(--label)}
.pin.other .st{background:var(--label)}
.dotpin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;transition:opacity .3s ease;animation:pop .45s cubic-bezier(.2,.8,.2,1) both}
.dotpin.next{width:36px;height:36px;background:var(--blue);color:#fff;font-size:15px}
.fence{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--blue) 12%,transparent);border:1.5px dashed color-mix(in srgb,var(--blue) 55%,transparent);animation:pop .6s cubic-bezier(.2,.8,.2,1) both}
.mapbtn{position:absolute;right:16px;z-index:6}

/* bottom sheet (route) */
.sheet{position:relative;z-index:8;background:var(--bg);border-radius:34px 34px 0 0;overflow:hidden;box-shadow:0 -1px 0 var(--sep2),0 -10px 30px rgba(0,0,0,.14);display:flex;flex-direction:column;animation:sheet .55s cubic-bezier(.2,.8,.2,1) both;flex:1;min-height:0}
.scr.dark .sheet{box-shadow:0 -1px 0 var(--sep),0 -10px 30px rgba(0,0,0,.35)}
.grab{width:36px;height:5px;border-radius:3px;background:var(--label4);margin:8px auto 0;flex-shrink:0}
.float{position:relative;z-index:8;margin:0;border-radius:34px 34px 0 0;padding:18px 16px 44px;display:flex;flex-direction:column;gap:12px;animation:sheet .5s cubic-bezier(.2,.8,.2,1) both}
.float.glass::before{border-radius:34px 34px 0 0}

/* modal (full sheet over dimmed root) */
.modal{position:absolute;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;animation:fade .25s ease both}
.modal .pane{flex:1;min-height:0;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;animation:sheet .45s cubic-bezier(.2,.8,.2,1) both;position:relative}
.modal .mnav{position:relative;display:flex;align-items:center;gap:8px;padding:60px 16px 10px;flex-shrink:0;z-index:5}
.modal .mnav .sp{flex:1}
.modal .mnav .inl{position:absolute;left:112px;right:112px;top:60px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.modal .mnav .inl .t{font-size:17px;font-weight:600;letter-spacing:-.41px;white-space:nowrap}
.modal .mnav .inl .s{font-size:12px;color:var(--label2);white-space:nowrap}
.steps{display:flex;gap:6px;padding:0 20px 12px;flex-shrink:0}
.steps div{flex:1;display:flex;flex-direction:column;gap:6px}
.steps .tr{height:4px;border-radius:2px;background:var(--fill3);overflow:hidden}
.steps .tr i{display:block;height:100%;border-radius:2px;background:var(--blue);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.steps .l{font-size:11px;font-weight:700;letter-spacing:.07px;color:var(--label2)}
.steps .l.on{color:var(--blue)}

/* cameras */
.cam{position:relative;overflow:hidden;background:linear-gradient(180deg,#2C2A2E 0%,#151418 100%);color:#fff;border-radius:26px;cursor:pointer}
.cam .lbl{position:absolute;left:14px;top:12px;font:500 11px var(--font);letter-spacing:.1px;color:rgba(255,255,255,.75)}
.cam .frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:18px;box-shadow:0 0 0 2.5px rgba(255,255,255,.85);transition:box-shadow .3s ease}
.cam .frame.ok{box-shadow:0 0 0 2.5px var(--green)}
.cam .frame.err{box-shadow:0 0 0 2.5px var(--red)}
.cam .line{position:absolute;left:50%;top:50%;height:2px;background:var(--yellow);box-shadow:0 0 12px var(--yellow);animation:scan 1.5s ease-in-out infinite}
.cam .hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:15px;font-weight:600;letter-spacing:-.24px}
.shutter{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:62px;height:62px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center}
.shutter i{width:50px;height:50px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .3s ease}
.shutter i.ok{background:var(--green);color:#fff}

/* chat */
.thread{flex:1;min-height:0;overflow:auto;scrollbar-width:none;padding:4px 16px 16px;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;grid-auto-rows:max-content;gap:10px;position:relative;z-index:5}
.thread::-webkit-scrollbar{display:none}
.msg{display:flex;flex-direction:column;gap:4px;animation:rise .35s cubic-bezier(.2,.8,.2,1) both}
.msg .bub{max-width:84%;padding:10px 14px;border-radius:20px;font-size:16px;line-height:21px;letter-spacing:-.32px;display:flex;flex-direction:column;gap:6px}
.msg.me{align-items:flex-end}
.msg.me .bub{background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.msg.them{align-items:flex-start}
.msg.them .bub{background:var(--bg2);color:var(--label);border-bottom-left-radius:6px;box-shadow:0 0 0 .5px var(--sep2)}
.scr.dark .msg.them .bub{background:var(--bg3);box-shadow:none}
.msg.agent{align-items:stretch}
.msg.agent .bub{max-width:100%;background:color-mix(in srgb,var(--purple) 13%,var(--bg2));color:var(--label);border-radius:20px}
.msg .meta{font-size:12px;color:var(--label2);padding:0 8px}
.msg .orig{font-size:14px;line-height:20px;border-top:.5px solid var(--sep);padding-top:6px;text-align:right}
.msg.me .orig{border-top-color:rgba(255,255,255,.35);color:rgba(255,255,255,.9)}
.msg .att{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.18)}
.wave{display:flex;align-items:center;gap:2px;height:22px}
.wave i{width:3px;border-radius:2px;background:currentColor;opacity:.9}
.daych{justify-self:center;font-size:12px;font-weight:600;color:var(--label2);padding:3px 10px;border-radius:10px;background:var(--fill3)}
.composer{flex-shrink:0;position:relative;z-index:9;padding:12px 0 30px;display:flex;flex-direction:column;gap:10px;border-radius:30px 30px 0 0}
.qr{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 16px}
.qr::-webkit-scrollbar{display:none}
.qr button{flex-shrink:0;height:40px;padding:0 14px 0 11px;border-radius:20px;background:var(--fill3);display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;letter-spacing:-.24px;color:var(--label);white-space:nowrap;transition:transform .15s ease,background .2s ease}
.qr button:active{transform:scale(.95);background:var(--fill)}
.qr button svg{color:var(--blue)}
.inp{flex:1;min-width:0;height:48px;border-radius:24px;background:var(--fill3);border:0;padding:0 18px;font-size:17px;letter-spacing:-.41px;color:var(--label);outline:none;font-family:inherit}
.inp::placeholder{color:var(--label3)}
.typing{display:flex;gap:5px;height:20px;align-items:center;padding:0 4px}
.typing i{width:7px;height:7px;border-radius:4px;background:var(--label3);animation:blink 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}

/* OTP */
.otp{display:flex;gap:10px;justify-content:center}
.otp div{width:54px;height:50px;border-radius:16px;background:var(--fill3);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;letter-spacing:.36px;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s ease}
.otp div.cur{box-shadow:inset 0 0 0 2px var(--blue)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.keys button{height:42px;border-radius:21px;background:var(--fill3);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--label);display:flex;align-items:center;justify-content:center;transition:transform .1s ease,background .15s ease}
.keys button:active{transform:scale(.94);background:var(--fill)}
.keys button.ghost{background:transparent}

/* ladders & timelines */
.lad{display:flex;flex-direction:column}
.lad .st{display:flex;gap:12px;min-height:58px}
.lad .col{display:flex;flex-direction:column;align-items:center;width:30px;flex-shrink:0}
.lad .d{width:30px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .35s ease,color .35s ease}
.lad .ln{flex:1;width:2px;background:var(--sep2);margin:3px 0;border-radius:1px}
.lad .tx{flex:1;min-width:0;padding:4px 0 10px}

/* misc */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sel{height:104px;border-radius:22px;background:var(--bg2);box-shadow:0 0 0 .5px var(--sep2);padding:14px 14px 12px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:background .25s ease,box-shadow .25s ease,transform .15s ease;color:var(--label)}
.scr.dark .sel{box-shadow:none}
.sel:active{transform:scale(.97)}
.sel.on{background:color-mix(in srgb,var(--blue) 12%,var(--bg2));box-shadow:inset 0 0 0 2px var(--blue)}
.sel .big{font-size:24px;line-height:28px;font-weight:600}
.sel .sm{font-size:15px;letter-spacing:-.24px;color:var(--label2);font-weight:500}
.sel.on .sm{color:var(--blue)}
.sel .sq{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.sel.bad{background:color-mix(in srgb,var(--red) 12%,var(--bg2));box-shadow:inset 0 0 0 2px var(--red)}
.toast{position:absolute;left:50%;top:116px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:8px;min-height:44px;max-width:340px;padding:9px 16px;border-radius:22px;font-size:14px;font-weight:600;letter-spacing:-.15px;line-height:18px;animation:toast .35s cubic-bezier(.2,.8,.2,1) both;color:var(--label)}
.toast svg{color:var(--green);flex-shrink:0}
.scrim{position:absolute;inset:0;z-index:65;background:var(--scrim);display:flex;align-items:flex-end;animation:fade .2s ease both}
.asheet{width:100%;background:var(--bg);border-radius:38px 38px 0 0;padding:8px 16px 40px;display:flex;flex-direction:column;gap:12px;animation:sheet .4s cubic-bezier(.2,.8,.2,1) both}
.hyd{position:absolute;left:14px;right:14px;bottom:108px;z-index:45;border-radius:26px;padding:12px 12px 12px 14px;display:flex;align-items:center;gap:12px;animation:sheet .45s cubic-bezier(.2,.8,.2,1) both}
.ring{position:relative;width:112px;height:112px;flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.breathe{animation:breathe 3.2s ease-in-out infinite}
.rtl{direction:rtl;text-align:right}
.scale-only{position:relative}
.sctag{position:absolute;right:12px;top:10px}

/* WhatsApp companion (customer phone) */
.wa{--wa-bg:#EFEAE2;--wa-bub:#fff;--wa-me:#D9FDD3;--wa-green:#1DAA61;--wa-head:#F6F6F6;--wa-txt:#111;--wa-sec:#667781}
.scr.dark .wa{--wa-bg:#0B141A;--wa-bub:#202C33;--wa-me:#005C4B;--wa-green:#25D366;--wa-head:#1F2C34;--wa-txt:#E9EDEF;--wa-sec:#8696A0}
.wa .wh{display:flex;align-items:center;gap:12px;padding:58px 12px 10px;background:var(--wa-head);color:var(--wa-txt);position:relative;z-index:5}
.wa .wb{flex:1;overflow:auto;scrollbar-width:none;padding:14px 12px 40px;display:flex;flex-direction:column;gap:8px;background:var(--wa-bg);color:var(--wa-txt);position:relative;z-index:5}
.wa .m{max-width:86%;padding:8px 10px;border-radius:12px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa .m.in{align-self:flex-start;background:var(--wa-bub);border-top-left-radius:4px}
.wa .m.out{align-self:flex-end;background:var(--wa-me);border-top-right-radius:4px}
.wa .m .en{font-size:12px;color:var(--wa-sec);border-top:1px solid rgba(0,0,0,.08);padding-top:6px;line-height:1.4}
.wa .m .bt{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wa .m .bt span{height:36px;border-radius:8px;background:rgba(0,0,0,.05);color:var(--wa-green);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.wa .m .bt span.on{background:var(--wa-green);color:#fff}
.wa .dt{align-self:center;font-size:12px;color:var(--wa-sec);background:var(--wa-bub);padding:3px 10px;border-radius:8px}
.wa .sys{align-self:center;font-size:12px;font-weight:600;color:#1F7A3E;background:#DCEBD5;padding:5px 12px;border-radius:10px;text-align:center}
.scr.dark .wa .sys{background:#1E3A2A;color:#7BD9A0}

/* animations */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sheet{from{opacity:.4;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes ripple{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}
@keyframes draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
@keyframes dash{to{stroke-dashoffset:-866}}
@keyframes scan{0%,100%{transform:translate(-50%,-44px)}50%{transform:translate(-50%,44px)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes toast{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes faceglow{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (prefers-reduced-transparency: reduce){.glass{background:var(--bg2);-webkit-backdrop-filter:none;backdrop-filter:none}}
@supports not (backdrop-filter: blur(1px)){.glass{background:var(--glass-strong)}}

@media (max-width: 1100px){.rail,.insp{position:static;max-height:none}}
@media (max-width: 440px){.stage{padding-inline:16px}}

/* glass sheets over the map (Route, Map of all stops) */
.sheet.glass{background:linear-gradient(180deg,color-mix(in srgb,var(--glass-spec) 60%,transparent) 0%,transparent 90px),color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 -1px 0 var(--glass-edge-out),0 -14px 40px rgba(0,0,0,.14),inset 0 1px 0 var(--glass-hi)}
.scr.dark .sheet.glass{background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 90px),rgba(14,14,16,.72);box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -14px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.sheet.glass::before{border-radius:34px 34px 0 0}
.sheet.glass .card{box-shadow:0 0 0 .5px var(--sep2),0 1px 2px rgba(0,0,0,.04)}
.inp{-webkit-appearance:none;appearance:none}
.gbtn.rec{animation:breathe 1.2s ease-in-out infinite}

/* ── realistic camera ── */
.feed{position:absolute;inset:0;overflow:hidden;background:#000}
.feed .fx{position:absolute;will-change:transform;transform:scale(1.04)}
.feed .fx img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.feed .fx.drift{animation:hand 7s ease-in-out infinite}
@keyframes hand{0%{transform:translate(0,0) scale(1.04)}30%{transform:translate(-6px,4px) scale(1.07)}65%{transform:translate(5px,-3px) scale(1.05)}100%{transform:translate(0,0) scale(1.04)}}
.plabel{position:absolute;left:28.6%;top:25.4%;width:45.6%;height:51%;transform:rotate(-2.4deg);transform-origin:center;color:#141414;font-size:var(--fs);line-height:1.25;display:flex;flex-direction:column;justify-content:space-between;padding:5% 4.5% 4%;box-sizing:border-box;text-align:left;font-family:var(--font)}
.plabel .hd{display:flex;justify-content:space-between;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.95em}
.plabel .bc{display:block;width:100%;height:3.4em;margin-top:.3em}
.plabel .code{font-weight:700;letter-spacing:.16em;font-variant-numeric:tabular-nums;text-align:center;font-size:1.25em;margin-top:.25em}
.plabel .ft{display:flex;justify-content:space-between;align-items:flex-end;gap:.6em}
.plabel .ft .sm{font-size:.9em;opacity:.8}
.plabel .qr{width:3.6em;height:3.6em;flex-shrink:0}
.det{position:absolute;left:27%;top:22.5%;width:49%;height:57%;border-radius:12px;box-shadow:0 0 0 3px var(--green),0 0 0 5px rgba(0,0,0,.25),0 0 28px color-mix(in srgb,var(--green) 55%,transparent);animation:pop .28s cubic-bezier(.2,.8,.2,1) both}
.det.still{animation:none}
.det.bad{box-shadow:0 0 0 3px var(--red),0 0 0 5px rgba(0,0,0,.25),0 0 28px color-mix(in srgb,var(--red) 55%,transparent)}
.det .tag{position:absolute;left:50%;top:-16px;transform:translateX(-50%);background:var(--green);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;padding:4px 11px;border-radius:11px;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.det.bad .tag{background:var(--red)}
.scanline{position:absolute;left:24%;width:55%;top:50%;height:2px;background:var(--yellow);box-shadow:0 0 14px var(--yellow),0 0 2px #fff;animation:scanv 1.6s ease-in-out infinite}
@keyframes scanv{0%,100%{transform:translateY(-26%)}50%{transform:translateY(26%)}}
.camchip{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.camchip .rec{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.4)}
.camchip .rec.on{background:#FF3B30;animation:blink 1.2s ease-in-out infinite}
.flash{position:absolute;inset:0;background:#fff;animation:flash .36s ease-out both;pointer-events:none;z-index:3}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.thumb{position:absolute;left:14px;bottom:14px;width:54px;height:54px;border-radius:11px;overflow:hidden;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.45);animation:pop .4s cubic-bezier(.2,.8,.2,1) both}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.retake{position:absolute;right:14px;bottom:14px;height:34px;padding:0 14px;border-radius:17px;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:14px;font-weight:600;letter-spacing:-.15px}
.cam .shutter{z-index:2}
.cam .hint{z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* right-to-left languages */
.scr.rtl{letter-spacing:0}
.scr.rtl .t-lt,.scr.rtl .t-t1,.scr.rtl .t-t2,.scr.rtl .t-t3,.scr.rtl .t-hl,.scr.rtl .t-bd,.scr.rtl .t-co,.scr.rtl .t-sh,.scr.rtl .t-fn{letter-spacing:0}
.scr.rtl .na,.scr.rtl .num,.scr.rtl .plabel,.scr.rtl .camchip,.scr.rtl .map,.scr.rtl .otp,.scr.rtl .keys{direction:ltr}
.scr.rtl .row+.row::before,.scr.rtl .row.sep::before{left:0;right:16px}
.scr.rtl .row.icon+.row::before{right:60px;left:0}
.scr.rtl .nav .inl{left:112px;right:112px}
.scr.rtl .tabs .ind{left:auto;right:6px}

.scr.rtl .segc .ind{left:auto;right:2px}
.clip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;background:var(--fill3);color:var(--blue);font-size:13px;font-weight:600;align-self:flex-start}
/* face check */
.facecam{position:relative;width:236px;height:314px;border-radius:118px/157px;overflow:hidden;background:#111;box-shadow:0 0 0 4px var(--bg),0 10px 30px rgba(0,0,0,.3);transition:box-shadow .4s ease}
.facecam .feed{border-radius:inherit}
.facecam .camchip{left:50%;transform:translateX(-50%);top:14px;white-space:nowrap}
.facering{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);pointer-events:none}
.mesh{position:absolute;inset:0;pointer-events:none}
.mesh i{position:absolute;width:4px;height:4px;border-radius:2px;background:#fff;opacity:0;box-shadow:0 0 6px #fff;animation:meshdot 1.8s ease-in-out infinite}
@keyframes meshdot{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.85;transform:scale(1)}}
.facescan{position:absolute;left:8%;right:8%;top:50%;height:2px;background:var(--blue);box-shadow:0 0 16px var(--blue),0 0 2px #fff;animation:facescan 2.2s ease-in-out infinite}
@keyframes facescan{0%,100%{transform:translateY(-120px)}50%{transform:translateY(120px)}}
.faceok{position:absolute;left:50%;bottom:10px;margin-left:-28px;width:56px;height:56px;border-radius:28px;background:var(--green);color:#fff;border:4px solid var(--bg);display:flex;align-items:center;justify-content:center;animation:pop .5s cubic-bezier(.2,.8,.2,1) both}
/* mixed-direction content: let each text block pick its own direction */
.scr.rtl .t-sh.sec,.scr.rtl .t-fn.sec,.scr.rtl .t-co,.scr.rtl .ban .s,.scr.rtl .ban .t,.scr.rtl .msg .bub>div,.scr.rtl .row .mn>div{unicode-bidi:plaintext}

/* stepper */
.stepper{display:flex;align-items:center;padding:2px 20px 14px;flex-shrink:0}
.stepper .step{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:-.08px;color:var(--label3);white-space:nowrap}
.stepper .dot{width:24px;height:24px;border-radius:12px;background:var(--fill3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--label2);font-variant-numeric:tabular-nums;transition:background .3s ease,color .3s ease}
.stepper .step.cur{color:var(--label)}
.stepper .step.cur .dot{background:var(--blue);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 22%,transparent)}
.stepper .step.done{color:var(--label2)}
.stepper .step.done .dot{background:var(--green);color:#fff}
.stepper .bar{flex:1;height:2px;margin:0 10px;border-radius:1px;background:var(--fill2)}
.stepper .bar.on{background:var(--green)}
.scr.rtl .stepper{direction:rtl}
/* glass sheet content sits above the rim layer */
.sheet.glass>*{position:relative;z-index:3}
.float.glass>*{position:relative;z-index:3}
.sheet.glass{overflow:visible}

/* map pins: delivered (green), to do (blue), failed (red), next (blue, numbered) */
.mpin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;animation:rise .45s cubic-bezier(.2,.8,.2,1) both;pointer-events:none}
.mpin .h{width:28px;height:28px;border-radius:14px 14px 14px 3px;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);border:2px solid #fff}
.mpin .h>*{transform:rotate(45deg)}
.mpin .st{width:6px;height:3px;border-radius:3px;background:rgba(0,0,0,.45);margin-top:4px;filter:blur(1px)}
.mpin.done .h{background:var(--green)}
.mpin.todo .h{background:var(--blue)}
.mpin.fail .h{background:var(--red)}
.mpin.next .h{width:36px;height:36px;border-radius:18px 18px 18px 4px;background:var(--blue);font-size:15px;font-weight:700;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 30%,transparent),0 3px 8px rgba(0,0,0,.4)}
.mpin.leg{position:static;transform:none;animation:none;flex-shrink:0}
.mpin.leg .h{width:22px;height:22px;border-radius:11px 11px 11px 2px;border-width:1.5px;box-shadow:none}
.mpin.leg .st{display:none}
/* WebKit: a composited child (the map image, animated layers) escapes border-radius clipping unless the clipping element is itself composited and masked */

/* route-style numbered markers coloured by state (map of all stops) */
.pin.done .h{background:var(--green);color:#fff;border-color:#fff}
.pin.done .st{background:var(--green)}
.pin.todo .h{background:var(--bg2);color:var(--label);border-color:var(--blue)}
.pin.todo .st{background:var(--blue)}
.pin.fail .h{background:var(--red);color:#fff;border-color:#fff}
.pin.fail .st{background:var(--red)}
.pin.next.next .h{background:var(--blue);color:#fff;border-color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 30%,transparent),0 3px 8px rgba(0,0,0,.35)}
.pin.leg{position:static;transform:none;animation:none;flex-shrink:0}
.pin.leg .h{min-width:22px;height:22px;border-radius:11px;padding:0;box-shadow:none}
.pin.leg .st{display:none}