/* ==========================================================
   Wallet — style.css
   High-performance 60/120fps iOS Wallet + 1:1 realistic cards
   ========================================================== */

:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --mono:"SF Pro Display","OCR A Extended","OCR-A","Courier New",ui-monospace,monospace;
  --bg:#f2f2f7; --elev:#fff;
  --label:#000; --label2:rgba(60,60,67,.62); --label3:rgba(60,60,67,.3);
  --sep:rgba(60,60,67,.16); --fill:rgba(120,120,128,.14); --glass:rgba(246,246,250,.78);
  --blue:#007aff; --red:#ff3b30; --green:#34c759;
  --spring:cubic-bezier(.28,.84,.24,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --nav-h:52px;
  --card-w:358px; --card-h:226px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000; --elev:#1c1c1e;
    --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3);
    --sep:rgba(84,84,88,.65); --fill:rgba(120,120,128,.32); --glass:rgba(24,24,26,.78);
    --blue:#0a84ff; --red:#ff453a; --green:#30d158;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000; --elev:#1c1c1e;
  --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.65); --fill:rgba(120,120,128,.32); --glass:rgba(24,24,26,.78);
  --blue:#0a84ff; --red:#ff453a; --green:#30d158;
}
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--label);
  font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
input{font:inherit;color:inherit;-webkit-user-select:text;user-select:text}
h1,h2,h3,p{margin:0}
#probe{position:fixed;visibility:hidden;pointer-events:none;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

#app{position:fixed;inset:0;max-width:480px;margin:0 auto;overflow:hidden;background:var(--bg);isolation:isolate;contain:layout style paint}
@media (min-width:520px){#app{box-shadow:0 0 0 .5px var(--sep),0 30px 80px rgba(0,0,0,.25)}html,body{background:color-mix(in srgb,var(--bg) 92%,#888)}}

/* ---------- Top bar ---------- */
#topbar{position:absolute;top:0;left:0;right:0;z-index:30;height:calc(var(--sat) + var(--nav-h));
  padding:var(--sat) 14px 0 16px;display:flex;align-items:center;justify-content:flex-end}
/* Cheaper blur: a large backdrop-filter over a scrolling stack has to re-blur
   every frame on phones. 12px + no saturate looks identical but is ~3x cheaper. */
#topbar::before{content:"";position:absolute;inset:0;background:var(--glass);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateZ(0);
  border-bottom:.5px solid var(--sep);opacity:0;transition:opacity .22s ease;pointer-events:none}
#topbar.scrolled::before{opacity:1}
.nav-title{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:17px;font-weight:600;letter-spacing:-.4px;
  opacity:0;transform:translate3d(0,6px,0);transition:opacity .2s,transform .28s var(--ease-out);pointer-events:none}
#topbar.scrolled .nav-title{opacity:1;transform:translate3d(0,0,0)}
#app.selected .nav-title,#app.editing .nav-title{opacity:0}
.nav-right{position:relative;display:flex;gap:10px;align-items:center}
.nbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--blue);
  background:var(--fill);transition:transform .25s var(--spring),opacity .18s}
.nbtn:active{transform:scale(.88);opacity:.7}
.done{display:none;color:var(--blue);font-size:17px;font-weight:600;padding:6px 6px;letter-spacing:-.4px;animation:fadein .25s ease both}
.done:active{opacity:.4}
#app.selected .done,#app.editing .done{display:block}
#app.selected .nbtn,#app.editing .nbtn{display:none}
@keyframes fadein{from{opacity:0;transform:translate3d(0,-4px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* ---------- Scroller + stack ---------- */
#scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-top:calc(var(--sat) + var(--nav-h));padding-bottom:calc(var(--sab) + 60px);overscroll-behavior-y:auto}
#scroller::-webkit-scrollbar{display:none}
#app.selected #scroller{overflow:hidden}
.large-title{font-size:34px;line-height:41px;font-weight:700;letter-spacing:.37px;padding:2px 20px 14px;
  transition:opacity .25s ease,transform .4s var(--spring)}
#app.selected .large-title,#app.editing .large-title{opacity:0;transform:translate3d(0,-10px,0)}
.stack{position:relative;width:var(--card-w);margin:0 auto;contain:layout style}

/* ---------- Card slots (GPU optimized) ---------- */
/* NOTE: no permanent will-change here — with many cards that creates dozens of
   GPU layers and kills scrolling on phones. Layers are promoted only while
   a card is actually animating/interacting (see .dragging/.lifted/.is-sel). */
.slot{position:absolute;left:0;top:0;width:100%;height:var(--card-h);touch-action:pan-y;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .55s var(--spring),opacity .3s ease;cursor:pointer;contain:layout style}
.slot.dragging,.slot.lifted,.slot.is-sel,.slot.anim{will-change:transform}
#app.selected .slot{touch-action:none}
.slot.dragging{transition:none!important}
.slot.removing{pointer-events:none}

.card{position:relative;width:100%;height:100%;container-type:inline-size;transform-origin:50% 0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.slot.is-sel .card{perspective:1200px}
.card.static{height:auto;aspect-ratio:1.586}
.stack.selecting .card,.stack .slot.is-sel .card{transition:transform .5s var(--spring)}
.stack .slot .card.is-tilting{transition:transform .1s linear;will-change:transform}

.flipper{position:absolute;inset:0;
  transform:translate3d(0,var(--ty,0px),0) scale(var(--s,1)) rotateY(var(--ry,0deg));
  transition:transform .65s var(--spring)}
/* Only enable 3D preserve-3d and back face when selected to keep stack scrolling ultra-fast */
.slot.is-sel .flipper{transform-style:preserve-3d;will-change:transform}
.slot:not(.is-sel) .face.back{display:none}
.flipper.flipped{--ry:180deg}
.slot.pressed .flipper{--s:.984}
.slot.lifted .flipper{--s:1.04;--ty:-10px}
.slot.lifted .face{box-shadow:inset 0 0 0 .7px rgba(255,255,255,.26),inset 0 1px 0 rgba(255,255,255,.34),0 24px 44px -8px rgba(0,0,0,.55)}
.slot.dragging .card{animation:none!important}

.face{position:absolute;inset:0;border-radius:4.5cqw;overflow:hidden;contain:layout style paint;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  --fg:#fff;--fg2:rgba(255,255,255,.74);color:var(--fg);
  box-shadow:inset 0 0 0 .6px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.3),0 -4px 14px -3px rgba(0,0,0,.28),0 8px 20px -8px rgba(0,0,0,.38)}
.card.static .face{box-shadow:inset 0 0 0 .6px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -4px rgba(0,0,0,.26)}
.face.back{transform:rotateY(180deg)}
.face i{font-style:normal}
/* Cards scrolled far out of view stop painting entirely (big win with many cards) */
.slot.culled{visibility:hidden}

/* Static, zero-repaint gloss & tilt overlays */
.sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 36%,transparent 52%,rgba(0,0,0,.08) 100%)}
/* Glare is fully removed from the render tree unless the card is being tilted */
.glare{display:none;position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.28),transparent 52%);
  transform:translate3d(var(--gx,0px),var(--gy,0px),0)}
.is-tilting .glare{display:block;will-change:transform}
.dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.sweep{position:absolute;inset:-25%;pointer-events:none;display:none;transform:translate3d(-130%,0,0);
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%)}
.just-added .sweep{display:block;animation:sweep 1.2s .35s var(--ease-out) 1}
@keyframes sweep{to{transform:translate3d(130%,0,0)}}

/* ==========================================================
   1:1 REALISTIC CARD THEMES
   ========================================================== */

/* 1. American Express Green Card — Classic "money green" with engraved guilloche border */
.t-amex-green{
  --fg:#ffffff;--fg2:rgba(255,255,255,.85);--logo:#ffffff;--cent-fg:#ffffff;--cent-bg:rgba(0,68,40,.42);
  --emboss:0 .22cqw .35cqw rgba(0,25,14,.65),0 -.12cqw 0 rgba(255,255,255,.35);
  background:
    radial-gradient(75% 65% at 50% 38%,rgba(168,236,198,.28) 0%,transparent 68%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#2e8f61 0%,#1d7a4e 48%,#135e3a 100%)}

/* 2. American Express Gold Card — Brushed horizontal metallic gold, dark navy wordmark */
.t-amex-gold{
  --fg:#1b1f2a;--fg2:rgba(22,28,44,.76);--logo:#0f2244;--cent-fg:#3b2606;--cent-bg:rgba(255,238,186,.45);
  --emboss:0 .18cqw 0 rgba(255,250,220,.75),0 -.14cqw .2cqw rgba(60,38,4,.35);
  background:
    linear-gradient(112deg,rgba(255,255,255,.38) 0%,transparent 34%,rgba(255,246,205,.32) 52%,transparent 72%,rgba(120,82,16,.25) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 1px,rgba(85,56,8,.06) 1px 2.5px),
    linear-gradient(180deg,#efd184 0%,#d7a846 32%,#f3dc99 54%,#c79332 82%,#b07d22 100%)}

/* 3. American Express Platinum Card — Brushed cool silver-grey stainless metal */
.t-amex-platinum{
  --fg:#1e2126;--fg2:rgba(30,33,38,.74);--logo:#23272e;--cent-fg:#2c3038;--cent-bg:rgba(255,255,255,.45);
  --emboss:0 .18cqw 0 rgba(255,255,255,.82),0 -.12cqw .2cqw rgba(0,0,0,.28);
  background:
    linear-gradient(115deg,rgba(255,255,255,.46) 0%,transparent 36%,rgba(255,255,255,.3) 54%,transparent 74%,rgba(0,0,0,.14) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,rgba(0,0,0,.04) 1px 2.5px),
    linear-gradient(180deg,#e4e7ec 0%,#c7ccd4 32%,#e1e4e9 54%,#b5bbc4 82%,#cfd4dc 100%)}

/* 4. American Express Centurion (Black Card) — Matte anodized black, raised titanium text */
.t-amex-centurion{
  --fg:#e4e7ec;--fg2:rgba(220,224,232,.68);--logo:#d8dce2;--cent-fg:#cfd4dc;--cent-bg:rgba(255,255,255,.04);
  --emboss:0 .16cqw .3cqw rgba(0,0,0,.9),0 -.1cqw 0 rgba(255,255,255,.28);
  background:
    radial-gradient(85% 70% at 50% 35%,rgba(255,255,255,.055) 0%,transparent 65%),
    linear-gradient(165deg,#18191c 0%,#0d0e10 52%,#050506 100%)}
.t-amex-centurion::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 .42cqw rgba(205,210,220,.22),inset 0 0 0 .9cqw rgba(0,0,0,.7)}

/* 5. Exodus Spend Card — Deep charcoal-black with restrained purple/blue glow & hex geometry */
.t-exodus{
  --fg:#f3f5f9;--fg2:rgba(218,224,242,.68);--logo:#ffffff;
  --emboss:0 .18cqw .35cqw rgba(0,0,0,.65);
  background:
    radial-gradient(85% 85% at 14% 12%,rgba(139,92,246,.28) 0%,rgba(59,130,246,.14) 42%,transparent 72%),
    radial-gradient(75% 70% at 88% 85%,rgba(99,102,241,.22) 0%,transparent 65%),
    linear-gradient(135deg,#171926 0%,#0d0f18 52%,#06070c 100%)}
.t-exodus::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 .35cqw rgba(167,139,250,.22)}

/* 6. Visa Classic (Blue) — Classic royal/cobalt blue gradient with right security strip */
.t-visa-classic{
  --fg:#ffffff;--fg2:rgba(255,255,255,.8);--logo:#ffffff;
  --emboss:0 .22cqw .38cqw rgba(5,20,65,.65),0 -.1cqw 0 rgba(255,255,255,.35);
  background:
    linear-gradient(90deg,transparent 87%,rgba(255,255,255,.12) 88.5%,rgba(140,220,255,.18) 90%,rgba(255,210,245,.14) 91.5%,transparent 93%),
    radial-gradient(110% 85% at 15% 10%,rgba(115,185,255,.35) 0%,transparent 58%),
    linear-gradient(165deg,#2776ea 0%,#1652b8 54%,#0d3582 100%)}

/* 7. Visa Gold — Warm metallic gold with radial luster & dark text */
.t-visa-gold{
  --fg:#2c1f06;--fg2:rgba(44,31,6,.68);--logo:#1f1604;
  --emboss:0 .18cqw 0 rgba(255,248,215,.75),0 -.12cqw .2cqw rgba(60,40,5,.3);
  background:
    radial-gradient(90% 80% at 68% 24%,rgba(255,252,230,.52) 0%,transparent 58%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 2.5px),
    linear-gradient(135deg,#f1cf7a 0%,#d7a43b 42%,#f5dc93 64%,#b88424 100%)}

/* 8. Visa Platinum / Signature — Deep navy-to-black premium dark look */
.t-visa-platinum{
  --fg:#edf1f7;--fg2:rgba(225,232,245,.66);--logo:#f0f4fa;
  --emboss:0 .22cqw .38cqw rgba(0,0,0,.75),0 -.1cqw 0 rgba(255,255,255,.25);
  background:
    radial-gradient(95% 75% at 88% 12%,rgba(110,145,215,.22) 0%,transparent 62%),
    linear-gradient(155deg,#1c2742 0%,#0e1526 54%,#050811 100%)}

/* 9. Mastercard Standard — Classic horizontal Mastercard red-to-orange gradient */
.t-mc-standard{
  --fg:#ffffff;--fg2:rgba(255,255,255,.82);--logo:#ffffff;
  --emboss:0 .22cqw .35cqw rgba(90,10,0,.55);
  background:
    radial-gradient(75% 90% at 78% 50%,rgba(255,185,50,.32) 0%,transparent 65%),
    linear-gradient(98deg,#d91b26 0%,#ea4d1f 52%,#f68b1f 100%)}

/* 10. Mastercard Gold — Metallic gold with dark circles & dark text */
.t-mc-gold{
  --fg:#2a1e06;--fg2:rgba(42,30,6,.68);--logo:#241905;
  --emboss:0 .18cqw 0 rgba(255,248,215,.72);
  background:
    radial-gradient(85% 75% at 28% 22%,rgba(255,250,220,.45) 0%,transparent 58%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 2.5px),
    linear-gradient(130deg,#eed07c 0%,#d6a33c 44%,#f3db92 66%,#b58022 100%)}

/* 11. Mastercard World Elite — Deep black/anthracite metal with subtle world map */
.t-mc-world{
  --fg:#eaedf2;--fg2:rgba(225,230,238,.64);--logo:#f0f3f8;
  --emboss:0 .2cqw .35cqw rgba(0,0,0,.8),0 -.1cqw 0 rgba(255,255,255,.24);
  background:
    radial-gradient(80% 70% at 50% 45%,rgba(255,255,255,.05) 0%,transparent 68%),
    linear-gradient(145deg,#27292e 0%,#15171a 55%,#090a0c 100%)}
.t-mc-world::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.15)}

/* 12. Apple Cash — Soft green gradient, white Apple Cash logo, digital minimal look */
.t-apple-cash{
  --fg:#ffffff;--fg2:rgba(255,255,255,.8);--logo:#ffffff;
  background:
    radial-gradient(95% 85% at 15% 12%,rgba(190,255,205,.38) 0%,transparent 58%),
    radial-gradient(80% 80% at 88% 88%,rgba(16,120,56,.35) 0%,transparent 62%),
    linear-gradient(145deg,#48d769 0%,#28bd56 52%,#179841 100%)}

/* 13. Generic Premium Black Metal Card — Matte black with machined metallic edge & silver text */
.t-black-metal{
  --fg:#d8dce2;--fg2:rgba(210,215,224,.58);--logo:#d8dce2;
  --emboss:0 .18cqw .32cqw rgba(0,0,0,.85),0 -.1cqw 0 rgba(255,255,255,.25);
  background:
    linear-gradient(125deg,rgba(255,255,255,.07) 0%,transparent 38%,rgba(255,255,255,.03) 58%,transparent 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 2.5px),
    linear-gradient(145deg,#222428 0%,#121316 54%,#070709 100%)}
.t-black-metal::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 .45cqw rgba(215,220,228,.26),inset 0 0 0 .95cqw rgba(0,0,0,.75)}

/* Extra custom finish */
.t-titanium{
  --fg:#f0f2f5;--fg2:rgba(240,242,245,.66);--logo:#f0f2f5;
  --emboss:0 .16cqw .28cqw rgba(0,0,0,.55);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 2.5px),
    linear-gradient(135deg,#676b73 0%,#484b52 48%,#2f3237 100%)}

/* Other pass themes */
.t-transit{--fg:#231900;--fg2:rgba(35,25,0,.62);background:radial-gradient(90% 70% at 0% 0%,rgba(255,255,255,.45),transparent 55%),linear-gradient(135deg,#ffe36a,#ffc107 50%,#ff9f0a)}
.t-boarding{--fg:#fff;background:radial-gradient(90% 70% at 100% 0%,rgba(120,190,255,.4),transparent 60%),linear-gradient(135deg,#2a80e6,#0b3a82 65%,#082a5e)}
.t-loyalty{--fg:#f7ecdc;--fg2:rgba(247,236,220,.65);background:radial-gradient(80% 70% at 100% 0%,rgba(255,200,140,.3),transparent 60%),linear-gradient(135deg,#8f5e3a,#5a3520 60%,#34190c)}

/* ==========================================================
   REALISTIC EMV CHIPS (Silver, Gold, Centurion Black)
   ========================================================== */
.chip{
  --chip1:#eef1f5;--chip2:#b8bec7;--chip3:#f7f9fb;--chip4:#8a919c;--chip-line:rgba(30,35,42,.34);
  width:12.4cqw;height:9.4cqw;border-radius:1.7cqw;position:relative;flex:none;
  background:linear-gradient(135deg,var(--chip1) 0%,var(--chip2) 42%,var(--chip3) 62%,var(--chip4) 100%);
  box-shadow:inset 0 0 0 .28cqw rgba(0,0,0,.25),inset 0 .2cqw .2cqw rgba(255,255,255,.6),0 .22cqw .5cqw rgba(0,0,0,.28)}
.chip::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:
    linear-gradient(90deg,transparent 31%,var(--chip-line) 31% 33%,transparent 33% 67%,var(--chip-line) 67% 69%,transparent 69%),
    linear-gradient(0deg,transparent 32%,var(--chip-line) 32% 34%,transparent 34% 66%,var(--chip-line) 66% 68%,transparent 68%)}
.chip::after{content:"";position:absolute;left:32%;right:32%;top:26%;bottom:26%;border-radius:.9cqw;
  background:linear-gradient(180deg,var(--chip3),var(--chip2));
  border:.28cqw solid var(--chip-line)}

/* Gold chips ONLY on Gold cards */
.t-amex-gold .chip,.t-visa-gold .chip,.t-mc-gold .chip{
  --chip1:#fbedb8;--chip2:#cfa13c;--chip3:#fdf3cc;--chip4:#a6781e;--chip-line:rgba(58,38,4,.36)}

/* Centurion Black chip with thin silver edge */
.t-amex-centurion .chip{
  --chip1:#2c2e33;--chip2:#141518;--chip3:#383b42;--chip4:#0b0c0e;--chip-line:rgba(215,220,228,.45);
  box-shadow:inset 0 0 0 .36cqw rgba(220,225,232,.65),0 .25cqw .6cqw rgba(0,0,0,.6)}

/* ==========================================================
   CARD FRONT LAYOUTS & AUTHENTIC TYPOGRAPHY
   ========================================================== */
.front{display:flex;flex-direction:column;justify-content:space-between;padding:5.2cqw 6cqw 5.2cqw;position:absolute;inset:0}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:3cqw;min-height:8cqw;position:relative;z-index:2}
.brand{font-size:4.3cqw;font-weight:600;letter-spacing:-.01em;line-height:1.1;padding-top:.4cqw}
.pill{font-size:2.3cqw;font-weight:700;letter-spacing:.14em;padding:1.1cqw 2.2cqw;border-radius:99cqw;border:.3cqw solid currentColor;opacity:.75;white-space:nowrap}

/* ---------- 1:1 AMERICAN EXPRESS LAYOUT ---------- */
/* Engraved inner border frame on Amex Green, Gold, Platinum */
.amex-frame{position:absolute;inset:2.2cqw;border-radius:3cqw;pointer-events:none;
  border:.28cqw solid currentColor;opacity:.26}
.amex-frame::after{content:"";position:absolute;inset:.65cqw;border-radius:2.4cqw;border:.18cqw solid currentColor;opacity:.45}
.t-amex-centurion .amex-frame{opacity:.16}

.amex-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}
.amex-wordmark{
  font-family:"Arial Black","Helvetica Neue",Impact,sans-serif;
  font-weight:900;font-size:3.65cqw;letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:var(--logo);text-shadow:var(--emboss,none)}
.t-amex-centurion .amex-wordmark{
  font-family:var(--font);font-weight:600;font-size:3.25cqw;letter-spacing:.22em;
  background:linear-gradient(180deg,#ffffff 0%,#b8bec8 55%,#eceef2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .18cqw .25cqw rgba(0,0,0,.85))}
.amex-sub{font-size:2.15cqw;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--logo);opacity:.82}
.t-amex-centurion .amex-sub{font-weight:300;letter-spacing:.32em;opacity:.65}

/* Centered Centurion Gladiator Medallion in upper half */
.amex-medallion{
  position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);
  width:21.5cqw;height:24.5cqw;color:var(--cent-fg,var(--logo));
  display:grid;place-items:center;pointer-events:none;z-index:1}
.amex-medallion svg{width:100%;height:100%;display:block;overflow:visible}
/* Smaller metallic Centurion on the Black Card */
.t-amex-centurion .amex-medallion{width:15.5cqw;height:17.8cqw;top:37%;opacity:.92}

.amex-mid{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;margin-top:1.5cqw;padding:0 .8cqw}
.amex-right-meta{display:flex;align-items:center;gap:2.2cqw}
.amex-ms-box{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.amex-ms-box small{font-size:1.65cqw;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.78;margin:0}
.amex-ms-box b{font-family:var(--mono);font-size:2.85cqw;font-weight:600;letter-spacing:.08em;margin-top:.25cqw;text-shadow:var(--emboss,none)}

.amex-bot{position:relative;z-index:2;padding:0 .8cqw}
.amex-num{
  font-family:var(--mono);font-size:4.85cqw;font-weight:500;letter-spacing:.105em;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center;
  margin-bottom:2.1cqw;text-shadow:var(--emboss,none)}
.amex-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2cqw}
.amex-foot .nm{font-family:var(--mono);font-size:3.2cqw;font-weight:500;letter-spacing:.11em;text-shadow:var(--emboss,none);max-width:66cqw}
.amex-foot .ex{font-family:var(--mono);font-size:2.95cqw;font-weight:500;letter-spacing:.08em;text-shadow:var(--emboss,none)}
.amex-foot .ex small{font-family:var(--font);font-size:1.7cqw;font-weight:700;letter-spacing:.1em;opacity:.75;margin-right:1cqw;display:inline}

/* Centurion Black Card ultra-thin typography */
.t-amex-centurion .amex-num{font-family:var(--font);font-weight:300;letter-spacing:.14em;font-size:4.55cqw}
.t-amex-centurion .amex-foot .nm{font-family:var(--font);font-weight:300;letter-spacing:.18em;font-size:2.95cqw}
.t-amex-centurion .amex-foot .ex,.t-amex-centurion .amex-ms-box b{font-family:var(--font);font-weight:300;letter-spacing:.12em}

/* ---------- EXODUS SPEND CARD LAYOUT ---------- */
.exodus-bg{position:absolute;inset:0;pointer-events:none;opacity:.22;z-index:0}
.exodus-bg svg{width:100%;height:100%;display:block}
.exodus-head{display:flex;align-items:center;gap:2.2cqw}
.exodus-mark{width:7.4cqw;height:7.4cqw;flex:none;display:block}
.exodus-title{display:flex;flex-direction:column;gap:.2cqw}
.exodus-title b{font-size:4.1cqw;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff;line-height:1}
.exodus-title small{font-size:1.8cqw;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(196,181,253,.8);margin:0}
.t-exodus .num{font-family:var(--font);font-weight:500;letter-spacing:.12em;color:#f1f5f9}
.t-exodus .nm{font-family:var(--font);font-weight:500;letter-spacing:.11em;color:#e2e8f0}

/* ---------- STANDARD CREDIT (Visa / Mastercard / Black Metal) ---------- */
.world-map{position:absolute;inset:0;pointer-events:none;opacity:.085;z-index:0;display:flex;align-items:center;justify-content:center}
.world-map svg{width:92%;height:auto;display:block}
.issuer-sub{font-size:2.2cqw;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.72;margin-left:.6cqw}
.t-black-metal .brand{font-weight:400;letter-spacing:.24em;text-transform:uppercase;font-size:3.6cqw;color:#e2e6ec}
.t-black-metal .num{font-family:var(--font);font-weight:300;letter-spacing:.13em;color:#e2e6ec}
.t-black-metal .nm,.t-black-metal .ex{font-family:var(--font);font-weight:400;letter-spacing:.14em;color:#cfd5de}

.mid{display:flex;align-items:center;gap:2.8cqw;position:relative;z-index:2;padding-left:.4cqw}
.cl{width:5.6cqw;height:5.6cqw;opacity:.82}
.num{font-family:var(--mono);font-size:4.85cqw;font-weight:500;letter-spacing:.095em;font-variant-numeric:tabular-nums;
  white-space:nowrap;text-shadow:var(--emboss,0 .2cqw .3cqw rgba(0,0,0,.28));margin-bottom:1.8cqw;position:relative;z-index:2}
.row2{display:flex;justify-content:space-between;align-items:flex-end;gap:3cqw;position:relative;z-index:2}
.nm{font-size:3.25cqw;font-weight:500;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58cqw;text-shadow:var(--emboss,none)}
.ex-wrap{display:flex;align-items:flex-end;gap:4cqw}
.front:has(.net-bl) .row2{padding-right:23cqw}
.front:has(.net-bl .mc-wm em) .row2{padding-right:25cqw}
.ms,.ex{font-size:3.05cqw;font-weight:500;letter-spacing:.06em;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:var(--emboss,none)}
.ex small,.ms small,.front small{font-size:1.85cqw;font-weight:700;letter-spacing:.09em;opacity:.72;text-transform:uppercase}
.front small{display:block;margin-bottom:.35cqw}
.ex small,.ms small{display:inline;margin-right:1cqw}

/* Visa / Mastercard bottom-right marks */
.net-bl{position:absolute;right:5.8cqw;bottom:5cqw;color:var(--logo,#fff);display:flex;align-items:center;z-index:2}
.visa-lockup{display:flex;flex-direction:column;align-items:flex-end;gap:.3cqw}
.visa-wm{height:7.4cqw;width:auto;display:block}
.visa-tier{font-style:normal;font-size:2.05cqw;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.86;line-height:1}
.mc-wm{display:flex;flex-direction:column;align-items:center;gap:.5cqw}
.mc-wm svg{height:8.8cqw;width:auto;display:block}
.mc-wm em{font-style:normal;font-size:2.05cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--logo);line-height:1;white-space:nowrap}
/* Dark monochrome interlocking circles on Mastercard Gold */
.t-mc-gold .mc-wm circle:first-child{fill:#3b2907}
.t-mc-gold .mc-wm circle:nth-child(2){fill:#5c410e}
.t-mc-gold .mc-wm path{fill:#261a04}
/* Silver-tinted circles on World Elite */
.t-mc-world .mc-wm svg{filter:saturate(.85) contrast(1.05)}

/* Apple Cash header & layout */
.apple-cash{display:flex;align-items:center;gap:1.5cqw;color:var(--fg)}
.apple-cash .apple{width:5.6cqw;height:6.6cqw}
.apple-cash b{font-size:6.2cqw;font-weight:600;letter-spacing:-.025em}
.cash-chip-less{font-size:2.4cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.amt{font-size:9.4cqw;font-weight:600;letter-spacing:-.03em;line-height:1;display:block;font-variant-numeric:tabular-nums}
.big{font-size:7cqw;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}

/* Transit, Boarding Pass, Loyalty */
.route{display:flex;align-items:center;justify-content:space-between;height:4cqw;position:relative;margin:0 1cqw}
.route::before{content:"";position:absolute;left:0;right:0;top:50%;height:.8cqw;margin-top:-.4cqw;background:currentColor;opacity:.55;border-radius:1cqw}
.route i{width:3.6cqw;height:3.6cqw;border-radius:50%;background:#ffd60a;border:.9cqw solid currentColor;position:relative;z-index:1}
.route i:nth-child(2){background:#30d158}.route i:nth-child(3){background:#0a84ff}.route i:nth-child(4){background:#ff453a}

.flight{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.flight b{font-size:11.5cqw;font-weight:700;letter-spacing:-.02em;line-height:1;display:block}
.flight small{margin:.8cqw 0 0}
.flight .r{text-align:right}
.flight svg{width:8cqw;height:8cqw;transform:rotate(90deg);opacity:.85;flex:none}
.bp-meta{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;font-size:4cqw;font-weight:600;font-variant-numeric:tabular-nums}
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw 3cqw;width:62cqw}
.stamps i{aspect-ratio:1;border-radius:50%;border:.4cqw dashed rgba(247,236,220,.55);display:grid;place-items:center;font-size:3.6cqw}
.stamps i.on{background:rgba(247,236,220,.92);border:0;color:#5a3520;box-shadow:0 .3cqw .8cqw rgba(0,0,0,.3)}

/* ---------- Back of card ---------- */
.back .mag{position:absolute;left:0;right:0;top:8.6cqw;height:12.5cqw;background:linear-gradient(#0b0b0c,#1d1d20 50%,#0b0b0c)}
.back .sig-row{position:absolute;left:6cqw;right:6cqw;top:26cqw;display:flex;gap:2.4cqw;height:9.4cqw}
.back .sig{flex:1;background:repeating-linear-gradient(45deg,#fafafa 0 1.4cqw,#eaeaea 1.4cqw 2.8cqw);border-radius:.8cqw;display:flex;align-items:center;padding:0 2.5cqw;color:#1b1b1d;overflow:hidden}
.back .sig span{font-family:"Snell Roundhand","Bradley Hand","Segoe Script","Brush Script MT",cursive;font-size:4.6cqw;white-space:nowrap}
.back .cvv{width:16cqw;background:#fff;color:#111;border-radius:.8cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:4cqw;font-weight:600;letter-spacing:.1em;line-height:1.05}
.back .cvv small{font-size:1.8cqw;letter-spacing:.14em;opacity:.55;font-weight:700}
.back .back-num{position:absolute;left:6cqw;top:40cqw;font-family:var(--mono);font-size:4.2cqw;letter-spacing:.1em;font-variant-numeric:tabular-nums;opacity:.9}
.back .fine{position:absolute;left:6cqw;right:28cqw;bottom:4.6cqw;font-size:2.1cqw;line-height:1.35;opacity:.6}
.back .back-net{position:absolute;right:6cqw;bottom:4.2cqw;height:8cqw;color:var(--logo,var(--fg));display:flex;align-items:center}
.back .back-net svg{height:100%;width:auto}
.back .qr-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqw}
.back .plate{background:#fff;padding:2.4cqw;border-radius:2.2cqw;width:31cqw;height:31cqw;box-shadow:0 .6cqw 2cqw rgba(0,0,0,.25)}
.back .plate.wide{width:64cqw;height:22cqw;padding:2.6cqw 3cqw}
.back .plate svg{width:100%;height:100%;display:block}
.back .qr-back small{font-size:2.6cqw;letter-spacing:.12em;opacity:.7;font-weight:600;text-transform:uppercase}

/* edit-mode jiggle + delete badge */
.editing .slot .card{animation:jig .26s ease-in-out infinite alternate}
.editing .slot:nth-child(2n) .card{animation-direction:alternate-reverse;animation-delay:-.11s}
@keyframes jig{from{transform:rotate(-.3deg)}to{transform:rotate(.3deg)}}
.del-badge{position:absolute;left:-8px;top:-8px;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;z-index:5;transform:scale(0);opacity:0;box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 2px var(--bg);
  transition:transform .4s var(--spring),opacity .18s}
.editing .del-badge{transform:scale(1);opacity:1}
.del-badge:active{filter:brightness(.85)}

/* swipe to delete reveal */
.swipe-del{position:absolute;inset:0;border-radius:4.5cqw;background:var(--red);z-index:-1;opacity:0;display:flex;align-items:center;justify-content:flex-end;padding-right:22px;color:#fff;transition:opacity .15s;pointer-events:none}
.swipe-del svg{transform:scale(.8);transition:transform .3s var(--spring)}
.slot.swiping .swipe-del{opacity:1}
.slot.armed .swipe-del svg{transform:scale(1.15)}

/* ---------- Detail panel ---------- */
#detail{position:absolute;left:0;right:0;z-index:20;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  opacity:0;transform:translate3d(0,28px,0);pointer-events:none;will-change:transform,opacity;
  transition:opacity .18s ease,transform .38s var(--spring);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
#detail::-webkit-scrollbar{display:none}
#detail.on{opacity:1;transform:translate3d(0,0,0);pointer-events:auto;transition:opacity .32s .08s ease,transform .52s .06s var(--spring)}
.d-inner{width:var(--card-w);margin:0 auto;padding-bottom:30px}
.d-actions{display:flex;gap:10px;margin:2px 0 6px}
.d-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0 10px;background:var(--elev);border-radius:14px;color:var(--blue);font-size:12px;font-weight:500;transition:transform .28s var(--spring),opacity .18s}
.d-act:active{transform:scale(.94);opacity:.7}
.d-act.danger{color:var(--red)}
.sec{font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--label2);margin:20px 16px 7px}
.group{background:var(--elev);border-radius:12px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;min-height:46px;position:relative;font-size:17px;letter-spacing:-.4px}
.row+.row::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.row .k{color:var(--label)}
.row .v{margin-left:auto;color:var(--label2);text-align:right;font-variant-numeric:tabular-nums}
.bal-card{padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px}
.bal-card .lbl{font-size:13px;color:var(--label2);text-transform:uppercase;letter-spacing:.02em}
.bal-card .val{font-size:40px;font-weight:700;letter-spacing:-1px;line-height:1}
.btns{display:flex;gap:10px}
.pbtn{flex:1;height:44px;border-radius:12px;background:var(--blue);color:#fff;font-weight:600;font-size:16px;transition:transform .28s var(--spring),opacity .18s}
.pbtn.alt{background:var(--fill);color:var(--blue)}
.pbtn:active{transform:scale(.96);opacity:.8}
.foot{font-size:12px;color:var(--label2);text-align:center;margin:22px 20px 0;line-height:1.4}
.code-plate{background:#fff;border-radius:14px;padding:16px;display:grid;place-items:center;margin-bottom:14px}
.code-plate svg{width:170px;height:170px}
.code-plate.wide svg{width:100%;height:76px}
.progress{height:8px;border-radius:99px;background:var(--fill);overflow:hidden}
.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff9f0a,#ff453a);transition:width .6s var(--spring)}
.switch{margin-left:auto;position:relative;width:51px;height:31px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer;z-index:2}
.switch i{position:absolute;inset:0;border-radius:99px;background:var(--fill);transition:background .25s}
.switch i::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25);transition:transform .35s var(--spring)}
.switch input:checked+i{background:var(--green)}
.switch input:checked+i::after{transform:translate3d(20px,0,0)}

/* ---------- Menu ---------- */
#menu-scrim{position:absolute;inset:0;z-index:39}
#menu{position:absolute;z-index:40;top:calc(var(--sat) + var(--nav-h) - 4px);right:12px;min-width:236px;border-radius:14px;
  background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(26px);backdrop-filter:saturate(180%) blur(26px);
  box-shadow:0 12px 44px rgba(0,0,0,.26),0 0 0 .5px var(--sep);overflow:hidden;
  transform-origin:100% 0;transform:scale(.5);opacity:0;pointer-events:none;transition:transform .4s var(--spring),opacity .16s}
#menu.on{transform:scale(1);opacity:1;pointer-events:auto}
#menu button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:13px 16px;font-size:17px;letter-spacing:-.4px;text-align:left;position:relative}
#menu button+button::before{content:"";position:absolute;left:0;right:0;top:0;height:.5px;background:var(--sep)}
#menu button:active{background:var(--fill)}
#menu em{font-style:normal;color:var(--label2)}
#menu hr{border:0;height:6px;background:var(--fill);margin:0}
#menu .danger{color:var(--red)}
#menu hr+button::before{display:none}

/* ---------- Sheet ---------- */
#backdrop,#as-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:60}
#backdrop.on,#as-backdrop.on{opacity:1;pointer-events:auto}
#as-backdrop{z-index:90}
#sheet{position:absolute;left:0;right:0;bottom:0;height:calc(100% - var(--sat) - 12px);z-index:70;background:var(--bg);
  border-radius:14px 14px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -10px 40px rgba(0,0,0,.25);
  transform:translate3d(0,104%,0);transition:transform .52s var(--spring);will-change:transform;contain:layout style paint}
#sheet.on{transform:translate3d(0,0,0)}
.sheet-head{position:relative;flex:none;height:58px;display:flex;align-items:center;justify-content:space-between;padding:10px 16px 0;touch-action:none;
  background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:2}
.sheet-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.5px;background:var(--sep)}
.grabber{position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--label3)}
.sheet-head h2{position:absolute;left:0;right:0;top:20px;text-align:center;font-size:17px;font-weight:600;letter-spacing:-.4px;pointer-events:none}
.sh-btn{font-size:17px;color:var(--blue);letter-spacing:-.4px;z-index:1;padding:8px 2px}
.sh-btn.strong{font-weight:600}
.sh-btn:active{opacity:.4}
.sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px calc(var(--sab) + 40px);overscroll-behavior:contain}
.sheet-body.swap{animation:swapin .28s var(--ease-out) both}
@keyframes swapin{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.lead{font-size:15px;color:var(--label2);margin:0 4px 18px;line-height:1.4;letter-spacing:-.2px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;contain:layout style}
.preset{display:flex;flex-direction:column;gap:2px;text-align:left;transition:transform .25s var(--spring);contain:layout style}
.preset:active{transform:scale(.95)}
.preset .card{margin-bottom:8px}
.preset b{font-size:15px;font-weight:600;letter-spacing:-.3px;padding-left:2px}
.preset span{font-size:13px;color:var(--label2);padding-left:2px}
.preview{width:min(86%,336px);margin:2px auto 22px}
.preview .card .face{box-shadow:inset 0 0 0 .6px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.3),0 16px 32px -6px rgba(0,0,0,.34)}
.field{display:flex;align-items:center;gap:10px;padding:0 16px;min-height:46px;position:relative;font-size:17px;letter-spacing:-.4px}
.field+.field::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.field>span{width:82px;flex:none}
.field input{flex:1;min-width:0;border:0;outline:0;background:none;height:46px;font-size:17px;letter-spacing:-.4px;caret-color:var(--blue)}
.field input::placeholder{color:var(--label3)}
.shuffle{color:var(--blue);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;transition:transform .4s var(--spring)}
.shuffle:active{transform:rotate(180deg) scale(.9)}
.block{margin-top:16px}
.block .sec{margin-top:0}
.seg{display:flex;background:var(--fill);border-radius:9px;padding:2px;position:relative}
.seg button{flex:1;height:32px;border-radius:7px;font-size:13px;font-weight:500;letter-spacing:-.1px;transition:background .2s,box-shadow .2s,color .18s;color:var(--label)}
.seg button.on{background:var(--elev);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600}
:root[data-theme="dark"] .seg button.on{background:#636366}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg button.on{background:#636366}}
.swatches{display:flex;flex-wrap:wrap;gap:12px;padding:14px 16px}
.sw{width:38px;height:38px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 .6px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.25);transition:transform .3s var(--spring)}
.sw::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2.5px solid var(--label);opacity:0;transform:scale(.8);transition:opacity .18s,transform .3s var(--spring)}
.sw.on::after{opacity:1;transform:scale(1)}
.sw:active{transform:scale(.88)}
.sw.t-amex-gold,.sw.t-amex-platinum,.sw.t-visa-gold,.sw.t-mc-gold{box-shadow:inset 0 0 0 .6px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.2)}

/* ---------- Action sheet ---------- */
#actionsheet{position:absolute;left:8px;right:8px;bottom:calc(var(--sab) + 8px);z-index:100;display:flex;flex-direction:column;gap:8px;
  transform:translate3d(0,120%,0);transition:transform .45s var(--spring);max-width:464px;margin:0 auto;will-change:transform}
#actionsheet.on{transform:translate3d(0,0,0)}
.as-group{border-radius:14px;overflow:hidden;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(26px);backdrop-filter:saturate(180%) blur(26px)}
:root[data-theme="dark"] .as-group{background:rgba(44,44,46,.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .as-group{background:rgba(44,44,46,.9)}}
.as-info{display:flex;flex-direction:column;gap:3px;text-align:center;padding:14px 16px;border-bottom:.5px solid var(--sep)}
.as-info b{font-size:13px;font-weight:600;color:var(--label2)}
.as-info span{font-size:13px;color:var(--label2)}
.as-group button{width:100%;height:57px;font-size:20px;color:var(--blue);letter-spacing:-.4px}
.as-group button:active{background:var(--fill)}
.as-group button.danger{color:var(--red)}
.as-group button.strong{font-weight:600}

/* ---------- Toast ---------- */
#toast{position:absolute;z-index:120;top:calc(var(--sat) + 8px);left:50%;transform:translate3d(-50%,-160%,0);padding:11px 18px;border-radius:99px;font-size:15px;font-weight:500;letter-spacing:-.3px;white-space:nowrap;
  background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);box-shadow:0 10px 34px rgba(0,0,0,.25),0 0 0 .5px var(--sep);
  transition:transform .48s var(--spring);pointer-events:none;max-width:92%;overflow:hidden;text-overflow:ellipsis;will-change:transform}
#toast.on{transform:translate3d(-50%,0,0)}

#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}

/* ---------- Empty state ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 36px 0;animation:swapin .5s var(--spring) both}
.empty-art{position:relative;width:220px;height:160px;margin-bottom:30px}
.empty-art i{position:absolute;left:50%;top:50%;width:172px;height:108px;margin:-54px 0 0 -86px;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.empty-art .c1{background:linear-gradient(180deg,#2e8f61,#135e3a);transform:translate3d(-22px,-26px,0) rotate(-10deg)}
.empty-art .c2{background:linear-gradient(135deg,#171926,#06070c);transform:translate3d(20px,-8px,0) rotate(6deg)}
.empty-art .c3{background:linear-gradient(135deg,#2776ea,#0d3582);transform:translate3d(-4px,22px,0) rotate(-2deg)}
.empty h2{font-size:22px;font-weight:700;letter-spacing:.35px;margin-bottom:8px}
.empty p{font-size:15px;line-height:1.4;color:var(--label2);max-width:280px;margin-bottom:26px}
.pill-btn{background:var(--blue);color:#fff;font-weight:600;font-size:17px;padding:13px 34px;border-radius:99px;transition:transform .3s var(--spring)}
.pill-btn:active{transform:scale(.94)}
.link-btn{color:var(--blue);font-size:15px;margin-top:16px;padding:6px}
.link-btn:active{opacity:.4}

/* ---------- Splash ---------- */
#splash{position:fixed;inset:0;z-index:999;background:var(--bg);display:grid;place-items:center;transition:opacity .42s .04s ease,visibility .5s}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none}
#splash-icon{width:96px;height:96px;animation:splashin .65s var(--spring) both}
#splash.hide #splash-icon{transform:scale(1.5);transition:transform .48s var(--ease-out)}
#splash-icon svg{width:100%;height:100%;display:block}
@keyframes splashin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .slot,.flipper{transition-duration:.2s!important}
}