/* One tap closer to takeoff - IS624 Team 2 prototype
   Visual system: iOS 26 Liquid Glass, neutral wallpaper.
   Light = white to blue, dark = black to blue. Sentence case only, never uppercase transforms. */

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --blue: #007aff;
  --blue-ink: #0a63d6;
  --green: #34c759;
  --green-ink: #1f8a3b;
  --orange: #ff9500;
  --orange-ink: #a85a00;
  --red: #ff3b30;
  --red-ink: #d70015;
  --purple: #8e5cf0;

  --wall: linear-gradient(170deg, #ffffff 0%, #f3f8ff 34%, #dcebff 70%, #c4dcff 100%);
  --ink: #0b0b0f;
  --ink-2: #3a3a44;      /* secondary text, >= 7:1 on white */
  --ink-3: #5c5c68;      /* tertiary text, >= 4.5:1 on white */
  --hair: rgba(15, 30, 60, 0.10);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 8px 28px rgba(20, 50, 110, 0.10), 0 1px 2px rgba(20, 50, 110, 0.06);
  --chip: rgba(255, 255, 255, 0.78);
  --tint-blue: rgba(0, 122, 255, 0.12);
  --tint-green: rgba(52, 199, 89, 0.16);
  --tint-orange: rgba(255, 149, 0, 0.16);
  --tint-red: rgba(255, 59, 48, 0.12);
  --track: rgba(15, 30, 60, 0.10);
  --scrim: rgba(10, 20, 40, 0.28);
  --map-land: #eef3fa;
  --map-park: #d8eedd;
  --map-road: #ffffff;
  --map-block: #e2e9f3;
  --map-water: #cfe3fb;
}

[data-theme="dark"] {
  --wall: linear-gradient(170deg, #000000 0%, #030a18 34%, #071d42 70%, #0b3170 100%);
  --ink: #f5f7fb;
  --ink-2: #c9d1e0;
  --ink-3: #9aa6bb;
  --hair: rgba(255, 255, 255, 0.10);
  --glass: rgba(22, 28, 40, 0.70);
  --glass-strong: rgba(26, 32, 46, 0.90);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --chip: rgba(40, 48, 66, 0.80);
  --blue: #0a84ff;
  --blue-ink: #5aa9ff;
  --green: #30d158;
  --green-ink: #4cd773;
  --orange: #ff9f0a;
  --orange-ink: #ffb340;
  --red: #ff453a;
  --red-ink: #ff6961;
  --tint-blue: rgba(10, 132, 255, 0.22);
  --tint-green: rgba(48, 209, 88, 0.20);
  --tint-orange: rgba(255, 159, 10, 0.20);
  --tint-red: rgba(255, 69, 58, 0.20);
  --track: rgba(255, 255, 255, 0.14);
  --scrim: rgba(0, 0, 0, 0.55);
  --map-land: #0d1626;
  --map-park: #12301f;
  --map-road: #1f2a3d;
  --map-block: #152034;
  --map-water: #0b2a52;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: #e9eef6;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.35;
}
body.dark-page { background: #05070c; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

/* ---------- stage: full-bleed app, no device frame ---------- */
body { background: transparent; }
.stage { min-height: 100vh; min-height: 100dvh; }
.device { position: relative; width: 100%; max-width: 480px; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; }

/* ---------- app shell ---------- */
#app { position: absolute; inset: 0; background: var(--wall); overflow: hidden; color: var(--ink); }
.statusbar { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 14px 32px 0 40px; z-index: 30; font-weight: 600; font-size: 17px; pointer-events: none; }
.statusbar .sb-icons { display: flex; gap: 6px; align-items: center; }
.realphone .statusbar { display: none; }
.homebar { position: absolute; bottom: 8px; left: 50%; width: 136px; height: 5px; margin-left: -68px; border-radius: 3px; background: var(--ink); opacity: .85; z-index: 40; pointer-events: none; }
.realphone .homebar { display: none; }

.scr { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 62px 16px 120px; scrollbar-width: none; }
.scr::-webkit-scrollbar { display: none; }
.realphone .scr { padding-top: calc(env(safe-area-inset-top) + 12px); }
.scr.focus { padding-bottom: 40px; }

/* ---------- type ---------- */
.lt { font-size: 34px; line-height: 41px; font-weight: 800; letter-spacing: -0.025em; }
.t2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.015em; }
.t3 { font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -0.01em; }
.hl { font-size: 17px; line-height: 22px; font-weight: 600; }
.bd { font-size: 17px; line-height: 22px; }
.sub { font-size: 15px; line-height: 20px; color: var(--ink-2); }
.fn { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.blue { color: var(--blue-ink); } .green { color: var(--green-ink); } .orange { color: var(--orange-ink); } .red { color: var(--red-ink); }
.sec { font-size: 20px; line-height: 25px; font-weight: 700; margin: 22px 4px 10px; display: flex; justify-content: space-between; align-items: baseline; }
.sec a, .link { font-size: 15px; font-weight: 600; color: var(--blue-ink); text-decoration: none; }

/* ---------- glass ---------- */
.glass { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border-radius: 24px; }
.card { padding: 16px; }
.list { padding: 4px 0; }
.list > .li + .li { border-top: 1px solid var(--hair); }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; width: 100%; text-align: left; }
.li .grow { flex: 1; min-width: 0; }
.li .chev { color: var(--ink-3); flex: none; }
.ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ic.blue { background: var(--tint-blue); } .ic.green { background: var(--tint-green); } .ic.orange { background: var(--tint-orange); } .ic.red { background: var(--tint-red); }
.ic.purple { background: rgba(142, 92, 240, .16); color: #7a45e0; }
[data-theme="dark"] .ic.purple { color: #b996ff; }

/* ---------- controls (affordance: 44pt minimum, filled or bordered) ---------- */
.btn { min-height: 52px; border-radius: 999px; padding: 0 22px; font-size: 17px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.btn.primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(0, 122, 255, .30); }
.btn.secondary { background: var(--tint-blue); color: var(--blue-ink); }
.btn.plain { color: var(--blue-ink); min-height: 44px; }
.btn.dark { background: #000; color: #fff; }
[data-theme="dark"] .btn.dark { background: #fff; color: #000; }
.btnrow { display: flex; gap: 10px; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none; }
.iconbtn.glass { border-radius: 50%; }
.badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--glass-strong); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--chip); border: 1px solid var(--hair); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tag.blue { background: var(--tint-blue); } .tag.green { background: var(--tint-green); } .tag.orange { background: var(--tint-orange); } .tag.red { background: var(--tint-red); }
.tag.grey { background: var(--track); color: var(--ink-2); }

.bar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; display: flex; }
.bar > i { display: block; height: 100%; border-radius: 4px; }
.bar.thick { height: 12px; border-radius: 6px; }
.bar > i.held { background: repeating-linear-gradient(135deg, rgba(0,122,255,.55) 0 4px, rgba(0,122,255,.25) 4px 8px); border-radius: 0 4px 4px 0; }

/* ---------- header ---------- */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 14px; }
.hdr .acts { display: flex; gap: 8px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #3d8bff, #0a5ad1); color: #fff; font-weight: 700; font-size: 15px; }
.navbar { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-bottom: 10px; }
.navbar .ttl { font-size: 17px; font-weight: 600; }
.steps { display: flex; gap: 6px; }
.steps i { width: 22px; height: 5px; border-radius: 3px; background: var(--track); }
.steps i.on { background: var(--blue); }

/* ---------- tab bar (4 items, content over navigation) ---------- */
.tabbar { position: absolute; left: 16px; right: 16px; bottom: 26px; height: 66px; border-radius: 33px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; z-index: 20; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 27px; font-size: 11px; font-weight: 600; color: var(--ink-2); min-height: 54px; }
.tab.on { background: var(--tint-blue); color: var(--blue-ink); }
.realphone .tabbar { bottom: calc(env(safe-area-inset-bottom) + 8px); }

/* ---------- sheets ---------- */
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 50; }
.sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 60; border-radius: 38px; padding: 10px 20px 26px; background: var(--glass-strong); }
.grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--track); margin: 0 auto 14px; }
.sheet .navbar { margin-bottom: 6px; }

/* ---------- forms (vertical bold labels: mobile friendly) ---------- */
.fld { margin-top: 16px; }
.fld > label { display: block; font-size: 15px; font-weight: 700; margin: 0 4px 8px; }
.input { width: 100%; min-height: 52px; border-radius: 16px; border: 1px solid var(--hair); background: var(--chip); padding: 0 16px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.input input { border: 0; outline: 0; background: transparent; flex: 1; font-size: 17px; min-width: 0; }
.amount { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; text-align: center; padding: 6px 0 2px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--track); border-radius: 12px; padding: 3px; }
.seg button { min-height: 38px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.seg button.on { background: var(--glass-strong); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.stepper { display: flex; align-items: center; justify-content: space-between; }
.stepper .ctl { display: flex; align-items: center; gap: 14px; }
.toggle { width: 51px; height: 31px; border-radius: 16px; background: var(--track); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.toggle.on { background: var(--green); }
.toggle.on::after { left: 22px; }

/* ---------- cards (payment cards) ---------- */
.pcard { border-radius: 20px; color: #fff; padding: 16px 18px; position: relative; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.pcard .pc-name { font-size: 17px; font-weight: 700; }
.pcard .pc-sub { font-size: 13px; opacity: .9; }
.onecard { height: 214px; border-radius: 22px; background: linear-gradient(150deg, #1d2433 0%, #0b0f18 55%, #10284f 100%); color: #fff; padding: 20px 22px; position: relative; box-shadow: 0 18px 40px rgba(5, 20, 50, .35); border: 1px solid rgba(255,255,255,.14); }
.onecard .brand { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.onecard .chipgold { width: 44px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #f6d27a, #c99a2e); position: absolute; left: 22px; top: 92px; }
.onecard .pan { position: absolute; left: 22px; bottom: 20px; font-size: 17px; font-weight: 600; letter-spacing: .08em; opacity: .9; }
.onecard .ctls { position: absolute; right: 22px; top: 22px; opacity: .9; }
.onecard .net { position: absolute; right: 22px; bottom: 18px; font-size: 13px; font-weight: 600; opacity: .85; }
.mini { width: 44px; height: 30px; border-radius: 6px; flex: none; position: relative; }

/* ---------- ring ---------- */
.ring { position: relative; width: 168px; height: 168px; margin: 4px auto 6px; }
.ring svg { width: 168px; height: 168px; }
.ring .rc { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

/* ---------- map ---------- */
.map { position: absolute; inset: 0; background: var(--map-land); }
.map svg { width: 100%; height: 100%; }
.pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; z-index: 5; }
.pin .pl { padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; display: flex; gap: 5px; align-items: center; }
.pin.best .pl { background: var(--green); color: #fff; box-shadow: 0 6px 14px rgba(52,199,89,.4); }
.pin .tail { width: 2px; height: 10px; background: var(--ink-3); }
.me { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); border: 4px solid #fff; box-shadow: 0 0 0 10px rgba(0,122,255,.18); transform: translate(-50%, -50%); z-index: 6; }

/* ---------- lock screen ---------- */
.lock { position: absolute; inset: 0; background: var(--wall); }
.lock .clock { text-align: center; margin-top: 78px; }
.lock .date { font-size: 20px; font-weight: 600; color: var(--ink-2); }
.lock .time { font-size: 92px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; margin-top: 4px; }
.notif { margin: 0 10px 10px; padding: 14px; border-radius: 24px; display: flex; gap: 12px; }
.appicon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(150deg, #1d2433, #10284f); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }

/* ---------- misc ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stack > * + * { margin-top: 10px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; }
.center { text-align: center; }
.hero-art { height: 250px; position: relative; margin: 8px 0 18px; }
.offline { position: absolute; top: 54px; left: 16px; right: 16px; z-index: 25; padding: 8px 12px; border-radius: 14px; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.sandbox { display: inline-flex; gap: 6px; align-items: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { padding: 14px; }
.kpi .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ms { text-align: center; padding: 12px 4px; border-radius: 18px; }
.ms .dot { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; }
.ms.done .dot { background: var(--green); color: #fff; }
.ms.next .dot { background: var(--track); color: var(--ink-3); }
.ms.new { outline: 2px solid var(--green); }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bdg { padding: 14px 8px; text-align: center; border-radius: 20px; }
.bdg .em { width: 44px; height: 44px; border-radius: 14px; margin: 0 auto 8px; display: grid; place-items: center; }
.celebrate { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.confetti i { position: absolute; width: 8px; height: 14px; border-radius: 2px; }
.toast { position: absolute; left: 16px; right: 16px; top: 60px; z-index: 90; padding: 12px 16px; border-radius: 18px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.empty { padding: 30px; text-align: center; color: var(--ink-3); }

/* ---------- feedback module (presenter / real phone only) ---------- */
.fb-fab { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: flex; gap: 10px; }
.fb-fab button { width: 52px; height: 52px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); position: relative; }
.fb-fab .fb-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: #ff3b30; border: 2px solid #111; }
.fb-panel { position: fixed; right: 20px; bottom: 84px; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 110px); overflow: auto; z-index: 1001; background: #fff; color: #111; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 18px; font-size: 14px; }
.fb-panel h3 { font-size: 17px; margin-bottom: 10px; }
.fb-panel label { display: block; font-weight: 700; margin: 12px 0 6px; font-size: 13px; }
.fb-panel input, .fb-panel textarea, .fb-panel select { width: 100%; border: 1px solid #d6dbe4; border-radius: 10px; padding: 10px; font: inherit; background: #fff; color: #111; }
.fb-panel textarea { min-height: 80px; resize: vertical; }
.fb-types { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-types button { padding: 8px 12px; border-radius: 999px; border: 1px solid #d6dbe4; font-weight: 600; font-size: 13px; min-height: 36px; }
.fb-types button.on { background: #007aff; color: #fff; border-color: #007aff; }
.fb-drop { border: 1.5px dashed #b9c2d0; border-radius: 12px; padding: 14px; text-align: center; color: #5c5c68; font-size: 13px; }
.fb-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fb-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; }
.fb-send { margin-top: 14px; width: 100%; min-height: 44px; border-radius: 12px; background: #007aff; color: #fff; font-weight: 700; }
.fb-notice { border-top: 1px solid #eee; padding: 10px 0; }
.fb-notice b { display: block; }
.fb-notice .fn { color: #5c5c68; }
.capture .fb-fab, .capture .fb-panel { display: none !important; }

/* ---------- additions ---------- */
.foot { position: absolute; left: 16px; right: 16px; bottom: 40px; z-index: 10; }
.foot .fn { text-align: center; margin-top: 8px; }
.wallet-stack { position: relative; height: 250px; }
.wallet-stack .pcard { position: absolute; left: 18px; right: 18px; height: 150px; }
.lockbtn { position: absolute; bottom: 52px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; }
.cbig { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sheet-nudge { position: absolute; left: 12px; right: 12px; bottom: 104px; z-index: 12; padding: 16px; border-radius: 30px; }
.mapsearch { position: absolute; top: 58px; left: 16px; right: 16px; z-index: 12; }
.mapsearch .input { background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.mapsearch .chips { margin-top: 10px; flex-wrap: nowrap; }
.mapsearch .chip { background: var(--glass-strong); box-shadow: var(--glass-shadow); }
.mapsearch .chip.on { background: var(--blue); }
.dark-page #panelNote, .dark-page #principleNote { color: #e6ebf3 !important; }
.dark-page .fb-fab button { background: #1f2a3d; border: 1px solid rgba(255,255,255,.18); }
.realphone .fb-fab { bottom: calc(env(safe-area-inset-bottom) + 92px); right: 14px; }
.realphone .fb-fab button { width: 44px; height: 44px; opacity: .92; }

/* ---------- show, don't tell: motion and empty states ---------- */
.bar > i { transition: width .8s cubic-bezier(.2,.8,.2,1); }
.btn:disabled { opacity: .45; box-shadow: none; cursor: default; }
.mb8 { margin-bottom: 8px; }
.spin svg { animation: ot-spin .8s linear infinite; }
@keyframes ot-spin { to { transform: rotate(360deg); } }
.rise { animation: ot-rise .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ot-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pop { animation: ot-pop .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ot-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.drop { animation: ot-drop .6s cubic-bezier(.2,.8,.2,1) .4s both; }
@keyframes ot-drop { from { opacity: 0; transform: translateY(-30px) scale(.96); } to { opacity: 1; transform: none; } }
.towallet { transition: transform .8s cubic-bezier(.5,0,.2,1), opacity .8s; transform: translateY(420px) scale(.5); opacity: 0; }
.bump { color: var(--green-ink); }
.nfcpulse { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--tint-blue); color: var(--blue-ink); animation: ot-pulse 1s ease-out infinite; }
@keyframes ot-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,122,255,.45); } 100% { box-shadow: 0 0 0 28px rgba(0,122,255,0); } }
.hintpill { position: absolute; left: 50%; transform: translateX(-50%); bottom: 108px; z-index: 12; padding: 12px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.realphone .hintpill { bottom: calc(env(safe-area-inset-bottom) + 90px); }
.realphone .sheet-nudge { bottom: calc(env(safe-area-inset-bottom) + 86px); }
.realphone .mapsearch { top: calc(env(safe-area-inset-top) + 12px); }
button.pin { background: none; border: 0; padding: 0; cursor: pointer; }
.pin .pl { min-height: 34px; }
.tabdot { position: absolute; top: 6px; right: 26%; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.newb { outline: 2px solid var(--green); animation: ot-pop .45s both; }
.empty2 { text-align: center; color: var(--ink-3); padding: 26px 16px; }
.amountwrap { display: flex; justify-content: center; align-items: baseline; gap: 2px; margin: 6px 0 2px; }
.amountwrap .cur { font-size: 34px; font-weight: 800; color: var(--ink-3); }
.amountin { width: 220px; border: 0; outline: 0; background: transparent; font-size: 48px; font-weight: 800; letter-spacing: -0.03em; text-align: center; color: var(--ink); }
.amountin::placeholder { color: var(--ink-3); }
.confetti i { animation: ot-fall 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ot-fall { from { transform: translateY(-60px) rotate(0); opacity: 0; } to { transform: none; opacity: .9; } }
.capture .rise, .capture .pop, .capture .drop, .capture .confetti i, .capture .newb { animation: none !important; }
.badges { grid-template-columns: repeat(2, 1fr); }
.bdg { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; }
.bdg .em { margin: 0; flex: none; }
.cbig.pop[style*="margin:0"] { margin: 0; }

/* ---------- v3: Miles, chat, Face ID, slider ---------- */
.milesav { display: inline-grid; place-items: center; border-radius: 50%; background: linear-gradient(150deg, #3d8bff, #0a4fc4); color: #fff; flex: none; box-shadow: 0 4px 12px rgba(0, 90, 220, .25); }
.chatcol { display: flex; flex-direction: column; gap: 10px; }
.msgrow { display: flex; gap: 8px; align-items: flex-end; }
.msg { max-width: 82%; padding: 11px 14px; border-radius: 20px; font-size: 16px; line-height: 21px; }
.msg.m { background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-bottom-left-radius: 6px; color: var(--ink); }
.msg.mine { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.typing { display: flex; gap: 5px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: ot-dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ot-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.chatcard { margin-left: 36px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; }
.chatcard.col { flex-direction: column; align-items: stretch; gap: 10px; }
.chatbtn { width: auto; min-height: 36px; padding: 0 14px; font-size: 14px; }
.scr.chat { padding-bottom: 190px; }
.composer { position: absolute; left: 16px; right: 16px; bottom: 104px; z-index: 19; display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 16px; border-radius: 26px; }
.composer input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 17px; min-width: 0; color: var(--ink); }
.realphone .composer { bottom: calc(env(safe-area-inset-bottom) + 84px); }
.faceid { width: 140px; height: 140px; margin: 0 auto; border-radius: 36px; display: grid; place-items: center; color: var(--blue-ink); background: var(--tint-blue); transition: background .3s, color .3s; }
.faceid.scanning svg { animation: ot-scan 1.1s ease-in-out; }
@keyframes ot-scan { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(.88); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }
.faceid.scanning { box-shadow: 0 0 0 0 rgba(0,122,255,.4); animation: ot-pulse 1.1s ease-out; }
.faceid.ok { background: var(--green); color: #fff; }
.slider { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: var(--track); outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.06); }
.slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.appicon { background: linear-gradient(150deg, #3d8bff, #0a4fc4); }
.mapsearch .input input { color: var(--ink); }
.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; flex: none; }
.hdr + .chips, .scr > .chips[style*="nowrap"] { overflow-x: auto; scrollbar-width: none; }

/* ---------- feedback module (every screen) ---------- */
#fbLayer { position: absolute; inset: 0; pointer-events: none; z-index: 85; color: var(--ink); font-family: var(--font); }
#fbLayer > * { pointer-events: auto; }
.fbtab { position: absolute; right: 0; top: 46%; width: 30px; height: 52px; border-radius: 14px 0 0 14px; display: grid; place-items: center; color: var(--blue-ink);
  background: var(--glass-strong); border: 1px solid var(--glass-edge); border-right: 0; box-shadow: var(--glass-shadow); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); }
.fbdot { position: absolute; top: 6px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.fbscrim { position: absolute; inset: 0; background: var(--scrim); }
.fbsheet { z-index: 2; max-height: 88%; display: flex; flex-direction: column; padding-bottom: 14px; }
.realphone .fbsheet { bottom: calc(env(safe-area-inset-bottom) + 8px); }
.fbscroll { overflow-y: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.fbscroll::-webkit-scrollbar { display: none; }
.fbscreen { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--tint-blue); color: var(--blue-ink); font-size: 13px; line-height: 17px; }
.fbscreen b { font-weight: 700; }
.fbta { width: 100%; border-radius: 16px; border: 1px solid var(--hair); background: var(--chip); padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); resize: none; outline: none; }
.fbta.fbneed { border-color: var(--red); }
.fbdrop { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 48px; border-radius: 16px; border: 1.5px dashed var(--ink-3); color: var(--ink-2); font-size: 15px; font-weight: 600; cursor: pointer; }
.fbthumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fbthumb { position: relative; }
.fbthumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 1px solid var(--hair); display: block; }
.fbthumb button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--glass-strong); display: grid; place-items: center; }
#fbLayer .fld > label { display: block; font-size: 15px; font-weight: 700; margin: 0 4px 8px; }
.fbscale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fbscale button { min-height: 44px; border-radius: 12px; background: var(--chip); border: 1px solid var(--hair); font-size: 17px; font-weight: 700; color: var(--ink); }
.fbscale button.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- Miles' orb (ported from the Placeholder build, see orb.js for credits) ---------- */
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.orb { --size: 44px; --spin: 20s; --drift: 12s; --sat: .95; --inset: 3%;
  --c1: #3d8bff; --c2: #9cc2ff; --c3: #0a4fc4; --c4: #8e5cf0;
  --blur: calc(var(--size) * .012); --contrast: 1.5;
  width: var(--size); height: var(--size); border-radius: 50%; position: relative; flex: none; filter: saturate(var(--sat));
  animation: orbBreathe 5.5s ease-in-out infinite; }
[data-theme="dark"] .orb { --c2: #7fb0ff; --c3: #2a6be0; }
.orb canvas { position: absolute; inset: -22%; width: 144%; height: 144%; display: block; pointer-events: none; z-index: 2; }
.orb .core { position: absolute; inset: var(--inset); border-radius: 50%; overflow: hidden; display: grid; grid-template-areas: 'stack'; isolation: isolate; z-index: 1;
  background: radial-gradient(circle at 38% 32%, var(--c4), var(--c1) 52%, var(--c2) 100%); }
.orb .core::before, .orb .core::after { content: ''; display: block; grid-area: stack; width: 100%; height: 100%; border-radius: 50%; }
.orb .core::before {
  background:
    conic-gradient(from calc(var(--angle) * 2) at 25% 70%, var(--c3), transparent 20% 80%, var(--c3)),
    conic-gradient(from calc(var(--angle) * 2) at 45% 75%, var(--c2), transparent 30% 60%, var(--c2)),
    conic-gradient(from calc(var(--angle) * -3) at 80% 20%, var(--c1), transparent 40% 60%, var(--c1)),
    conic-gradient(from calc(var(--angle) * 1.5) at 60% 35%, var(--c4), transparent 25% 75%, var(--c4)),
    conic-gradient(from calc(var(--angle) * 2) at 15% 5%, var(--c2), transparent 10% 90%, var(--c2)),
    conic-gradient(from calc(var(--angle) * 1) at 20% 80%, var(--c1), transparent 10% 90%, var(--c1)),
    conic-gradient(from calc(var(--angle) * -2) at 85% 10%, var(--c3), transparent 20% 80%, var(--c3));
  filter: blur(var(--blur)) contrast(var(--contrast)) saturate(1.4);
  animation: orbSpin var(--spin) linear infinite; }
.orb .core::after { background: radial-gradient(circle at 30% 24%, hsl(0 0% 100% / .16), transparent 34%), radial-gradient(circle at 72% 80%, hsl(0 0% 100% / .05), transparent 48%); mix-blend-mode: screen; animation: orbDrift var(--drift) ease-in-out infinite alternate; }
.orb.think { --spin: 7s; --drift: 6s; --sat: 1.08; animation: none; }
.orb.lg { --size: 120px; margin: 0 auto; }
.orb.md { --size: 44px; }
.orb.sm { --size: 34px; }
@keyframes orbSpin { to { --angle: 360deg; } }
@keyframes orbDrift { 0% { transform: translate(-6%, -4%) scale(1.05); } 100% { transform: translate(7%, 6%) scale(1.12); } }
@keyframes orbBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@media (prefers-reduced-motion: reduce) { .orb, .orb .core::before, .orb .core::after { animation: none; } }
.chatchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
.chatchips::-webkit-scrollbar { display: none; }
.tipsrc { font-size: 12px; font-weight: 700; color: var(--ink-3); margin: 2px 0 2px; }

.fbseg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }