@font-face{font-family:"InterIOS";src:url(/assets/fonts/inter-opsz-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* =====================================================================
   RunsGift  ·  iOS Premium v2
   Loaded after app.css: only looks change, no behaviour.
   Admin > Branding colours still drive --accent / --accent2.
   ===================================================================== */
:root{
  color-scheme:dark;
  --bg:#000;--bg2:#0a0a0f;
  --card:rgba(44,44,46,.72);--card2:rgba(118,118,128,.28);--stroke:rgba(255,255,255,.1);
  --text:#fff;--muted:#98989f;
  --blue:#0a84ff;--blue2:#64d2ff;--accent:#0a84ff;--accent2:#64d2ff;--ok:#30d158;--warn:#ff9f0a;--bad:#ff453a;
  --r:22px;--tabh:64px;
  --ff:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","InterIOS","Helvetica Neue",sans-serif;
  --fd:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","InterIOS","Helvetica Neue",sans-serif;
  --ios-mat:rgba(44,44,46,.72);--ios-fill:rgba(118,118,128,.3);--ios-sep:rgba(255,255,255,.12);
  --edge:none;--fill:none;--tintl:none;
}
html,body{background:#000;font-size:15px;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{letter-spacing:-.02em}

/* ---------- background: calm, no bubbles ---------- */
#bg{background:radial-gradient(130% 48% at 50% -10%,#10305f 0%,#050b16 55%,#000 100%)}
#bg::before,#bg::after,#bg i{display:none!important}
.splash .blob{opacity:.35}

/* ---------- top / titles ---------- */
.top{padding:8px 0 10px}
.brand{font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand img{box-shadow:0 0 0 .5px rgba(255,255,255,.25)}
.page-title{margin:6px 0 14px;gap:12px}
.page-title h1{font-size:34px;font-weight:700;letter-spacing:.2px;line-height:1.1}
.page-title .back+h1{font-size:19px;font-weight:600;letter-spacing:-.02em}
.back,.iconbtn{width:38px;height:38px;border:.5px solid rgba(255,255,255,.14);background:var(--ios-fill);box-shadow:none;
  -webkit-backdrop-filter:blur(var(--bl,20px)) saturate(1.6);backdrop-filter:blur(var(--bl,20px)) saturate(1.6)}
.back svg{width:17px;height:17px}

/* ---------- surfaces (one flat, translucent material) ---------- */
.card,.nft,.qa,.attr,.stat div,.pk,.plan,.frow,.copy{
  background:var(--ios-mat);border:.5px solid rgba(255,255,255,.1);box-shadow:none;
  -webkit-backdrop-filter:blur(var(--bl,20px)) saturate(1.6);backdrop-filter:blur(var(--bl,20px)) saturate(1.6)}
.card::before,.card::after,.qa::before,.nft::before,.plan::before,.frow::before{display:none!important}
.card{border-radius:22px;padding:16px}
.card h2{font-size:19px;font-weight:700}
.sec{margin-top:26px}
.sec>h3{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 6px 8px}
.sec>h3:has(a){font-size:22px;font-weight:700;color:var(--text);text-transform:none;letter-spacing:.2px;align-items:baseline}
.sec>h3 a{font-size:16px;font-weight:400;color:var(--blue);text-transform:none;letter-spacing:0}

/* ---------- balance hero ---------- */
.hero{border:.5px solid rgba(255,255,255,.28);border-radius:28px;padding:20px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--blue) 62%,transparent),rgba(94,92,230,.38) 62%,rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 40px rgba(10,60,160,.32);
  -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6)}
.hero::after{opacity:.5}
.hero .who b{font-size:17px;font-weight:600}
.hero .bal small{font-weight:500;color:rgba(255,255,255,.75);font-size:13px}
.hero .bal b{font-size:38px;font-weight:700;letter-spacing:-.04em;margin-top:2px}
.hero .bal .balsub{font-size:13px;margin-top:3px}
.hero .acts{gap:10px;margin-top:16px}

/* ---------- buttons: pill, solid ---------- */
.btn{height:50px;padding:0 22px;border-radius:999px;font-weight:600;font-size:16px;letter-spacing:-.01em;border:0;
  background:var(--blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px color-mix(in srgb,var(--blue) 38%,transparent)}
.btn::before{display:none}
.btn:active{transform:scale(.97);opacity:.9}
.btn.sm{height:34px;padding:0 15px;font-size:14px;border-radius:999px}
.btn.ghost,.btn.glass{background:var(--ios-fill);border:0;box-shadow:none;color:var(--text);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.btn.light{background:#fff;color:#000;box-shadow:none}
.btn.danger{background:rgba(255,69,58,.18);color:#ff6961;border:0;box-shadow:none}
.btn[disabled]{opacity:.4;box-shadow:none}

/* ---------- segmented control + chips ---------- */
.seg{background:rgba(118,118,128,.24);border:0;border-radius:11px;padding:2px;gap:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.seg button{height:32px;border-radius:9px;font-weight:500;font-size:13px;color:#ebebf5;transition:background .2s,color .2s}
.seg button.on,.seg button.on:hover{background:#636366;color:#fff;font-weight:600;border:0;box-shadow:0 3px 8px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.2)}
.chips{gap:8px}
.chip{height:34px;padding:0 14px;border-radius:999px;background:var(--ios-fill);border:.5px solid rgba(255,255,255,.14);font-weight:500;font-size:13.5px;box-shadow:none}
.chip.on{background:var(--blue);border-color:transparent;color:#fff;box-shadow:none}
.chip.sub{font-size:13px}
.tag{background:rgba(118,118,128,.3);color:#ebebf5;font-weight:600}
.tag.blue{background:color-mix(in srgb,var(--blue) 26%,transparent);color:var(--blue2)}
.tag.ok{background:rgba(48,209,88,.18);color:#4cd964}.tag.warn{background:rgba(255,159,10,.18);color:#ffb340}.tag.bad{background:rgba(255,69,58,.18);color:#ff6961}

/* ---------- gift cards ---------- */
.grid2{gap:12px}
.nft{border-radius:24px;padding:6px;border:.5px solid rgba(255,255,255,.1);transition:transform .18s cubic-bezier(.2,.9,.3,1.1)}
.nft:active{transform:scale(.97)}
.nft .pic{border-radius:18px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)}
.nft .meta{padding:9px 6px 6px;gap:2px}
.nft .nm{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.nft .pr{font-size:15px;font-weight:600;letter-spacing:-.02em}
.nft .pr small{color:var(--muted);font-weight:400;font-size:12px}
.nft .mn{font-size:11.5px;color:var(--muted)}
.offtag{background:#ff9f0a;color:#1a1000;border-radius:999px;padding:2px 8px;font-size:10.5px}
.was{color:var(--muted);font-weight:400}

/* ---------- item page ---------- */
.itemhero{border-radius:30px;border:.5px solid rgba(255,255,255,.2);box-shadow:0 18px 44px rgba(10,60,160,.3);aspect-ratio:1.15}
.itemhero img{object-fit:contain}
.attrs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.attr{border-radius:18px;padding:10px;border:.5px solid rgba(255,255,255,.1)}
.attr small{font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.attr b{font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attr.withpic{flex-direction:column;align-items:flex-start;gap:7px}
.attr.withpic>div{width:100%}
.attr .fimg{width:32px!important;height:32px!important;border-radius:9px}
.kv{font-size:15px;padding:9px 0}
.kv span:first-child{color:var(--muted)}
.kv.total{border-top:.5px solid var(--ios-sep);border-top-style:solid;font-size:17px;font-weight:600;padding-top:13px}
.stepper{gap:0;align-items:center}
.stepper .val{order:0;flex:1;text-align:left;font-size:28px;font-weight:700;letter-spacing:-.03em}
.stepper .val small{display:inline;font-size:15px;font-weight:500;color:var(--muted);margin-left:3px}
.stepper button{order:1;width:50px;height:36px;border-radius:0;background:var(--ios-fill);border:0;font-size:22px;font-weight:400;color:var(--text)}
.stepper #dm{border-radius:9px 0 0 9px}.stepper #dp{order:2;border-radius:0 9px 9px 0;margin-left:1px}
.stepper button:active{background:rgba(255,255,255,.28)}
input[type=range]{height:4px;border-radius:2px;margin:18px 0 8px;
  background:linear-gradient(to right,var(--blue) var(--p,0%),rgba(120,120,128,.4) var(--p,0%))}
input[type=range]::-webkit-slider-thumb{width:30px;height:24px;border-radius:13px;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:30px;height:24px;border-radius:13px;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.5)}
#rentbtn{height:54px;font-size:17px;font-weight:600}

/* ---------- forms ---------- */
.field label{font-size:13px;color:var(--muted);font-weight:500;margin-left:4px}
.input{height:48px;border-radius:13px;background:rgba(118,118,128,.24);border:.5px solid transparent;box-shadow:none;padding:0 14px;font-size:16px}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)}
select.input option{background:#1c1c1e}
.switch{width:51px;height:31px;border-radius:31px;background:rgba(120,120,128,.4);border:0}
.switch::after{width:27px;height:27px;top:2px;left:2px;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.switch.on{background:#30d158}.switch.on::after{transform:translateX(20px)}

/* ---------- grouped lists (profile / admin / wallet) ---------- */
.row{padding:11px 0;gap:13px}
.row+.row{border-top:.5px solid var(--ios-sep)}
.row .grow b{font-size:15.5px;font-weight:500}
.row .grow small{font-size:12.5px;color:var(--muted)}
.row .ic{width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;box-shadow:none}
.row .ic svg{width:17px;height:17px}
.row .ic.blue{background:var(--blue)}
.row:nth-child(5n+2) .ic{background:#30d158}.row:nth-child(5n+3) .ic{background:#ff9f0a}
.row:nth-child(5n+4) .ic{background:#bf5af2}.row:nth-child(5n+5) .ic{background:#ff453a}
.row>svg{width:14px;height:14px;color:#636366}
.menu{padding:2px 16px}
.menu .row{padding:9px 0}.menu .row .ic{width:30px;height:30px;border-radius:8px}
.menu .row .grow b{font-size:15px;font-weight:500}.menu .row .grow small{font-size:12px}
.menu .mrow svg{color:var(--blue)}
.qa{border-radius:22px;padding:15px;min-height:100px}
.qa .ic{width:36px;height:36px;border-radius:10px;background:var(--blue);border:0;box-shadow:none}
.qa b{font-size:15.5px;font-weight:600}.qa small{font-size:12.5px}
.stat div{border-radius:18px;padding:12px 6px}.stat b{font-size:16px;font-weight:600}
.pk,.plan{border:.5px solid rgba(255,255,255,.1);border-radius:18px}
.pk.on,.plan.on{background:color-mix(in srgb,var(--blue) 24%,rgba(44,44,46,.72));border:1.5px solid var(--blue);box-shadow:none}
.pk b,.plan .m,.plan .p{font-weight:700}
.frow{border-radius:16px;padding:9px 12px}
.frow.on{background:color-mix(in srgb,var(--blue) 22%,rgba(44,44,46,.72));border-color:var(--blue)}
.frow>svg{color:var(--blue)}
.table td,.table th{border-bottom:.5px solid var(--ios-sep)}
.code{border-radius:16px;border:1px dashed var(--blue)}
.copy{border-radius:14px}

/* ---------- banners ---------- */
.banner{border-radius:16px;border:0;background:rgba(255,159,10,.15);color:#ffcf85;font-size:14px;box-shadow:none}
.banner.info{background:color-mix(in srgb,var(--blue) 18%,transparent);color:#9fd2ff}
.banner.bad{background:rgba(255,69,58,.16);color:#ffa8a2}
.offer{border-radius:20px;border:.5px solid rgba(255,159,10,.4);background:rgba(255,159,10,.14)}
.offer b{font-weight:600;font-size:15px}.offer .cd{color:#ff9f0a;font-weight:600;font-size:17px}

/* ---------- bottom sheet ---------- */
.sheet-back{background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.sheet{background:rgba(28,28,30,.94);border:0;border-top:.5px solid rgba(255,255,255,.14);border-radius:30px 30px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(40px) saturate(1.8);backdrop-filter:blur(40px) saturate(1.8)}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);margin:0 auto 16px}
.sheet h2{font-size:20px;font-weight:700}
.sheet-list button{padding:15px 4px;border-bottom:.5px solid var(--ios-sep);font-weight:500;font-size:16px}
.sheet-list button.on{color:var(--blue)}
.sheet-list button svg{color:var(--blue)}
.tos{color:#d1d1d6}

/* ---------- toast ---------- */
.toast{background:rgba(44,44,46,.9);border:.5px solid rgba(255,255,255,.16);border-radius:999px;padding:11px 18px;font-weight:500;box-shadow:0 12px 36px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.toast.err{background:rgba(90,24,24,.92)}.toast.ok{background:rgba(20,70,36,.92)}

/* ---------- floating glass tab bar ---------- */
.tabbar{padding:0 14px calc(var(--safe-b) + 14px)}
.tabbar nav{max-width:420px;height:var(--tabh);border-radius:999px;padding:5px;gap:2px;border:.5px solid rgba(255,255,255,.22);
  background:rgba(40,40,44,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 34px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8)}
.tab{border-radius:999px;font-size:10.5px;font-weight:500;color:#98989f;gap:2px}
.tab.on{background:rgba(255,255,255,.16);color:var(--blue);box-shadow:none;font-weight:600}
.tab svg,.tab img{width:23px;height:23px}
.floatbox{bottom:calc(98px + env(safe-area-inset-bottom,0px))}
.fl{border:.5px solid rgba(255,255,255,.25)}

/* ---------- misc ---------- */
.av{background:linear-gradient(145deg,var(--blue),#5e5ce6)}
.skel{border-radius:20px}
.spin{border-top-color:var(--blue)}
.big{font-weight:700;letter-spacing:-.03em}
.credit a,.sec>h3 a{color:var(--blue)}
.ok-badge{border-color:rgba(48,209,88,.6);box-shadow:0 0 40px rgba(48,209,88,.3)}
.sp-pct{color:var(--blue2)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.nft,.qa,.attr,.stat div,.pk,.plan,.frow,.copy{background:#1c1c1e}
  .tabbar nav{background:#2c2c2e}.sheet{background:#1c1c1e}.toast{background:#2c2c2e}}
::selection{background:color-mix(in srgb,var(--blue) 40%,transparent)}

/* ---------- currency toggle, offer strip, tab bar legibility ---------- */
.curtog{background:rgba(118,118,128,.24);border:0;padding:2px;height:36px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.curtog button{height:32px;font-weight:600;font-size:13px;color:#ebebf5;letter-spacing:0}
.curtog button.on{background:#636366;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.offer>div{min-width:0}.offer small{display:block;line-height:1.35;margin-top:2px}
.offer .cd{font-size:15px}
.tabbar nav{background:rgba(34,34,38,.8)}
.curtog button{white-space:nowrap;flex:none}
#grid{margin-top:14px}
.btn.sm{box-shadow:none}

/* =====================================================================
   CLEAR EDGES  ·  solid colours, no see-through blending
   Surfaces: #000 page · #1c1c1e card · #2c2c2e control · #3a3a3c pressed
   ===================================================================== */
:root{--s1:#1c1c1e;--s2:#2c2c2e;--s3:#3a3a3c;--line:#3a3a3c;--line2:#545458}

/* cards & tiles: solid fill + crisp 1px edge */
.card,.nft,.qa,.attr,.stat div,.pk,.plan,.frow,.copy,.offer,.menu{
  background:var(--s1);border:1px solid var(--line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nft{background:var(--s1);border-color:var(--line)}
.nft .pic{box-shadow:none}
.back,.iconbtn{background:var(--s2);border:1px solid var(--line2);-webkit-backdrop-filter:none;backdrop-filter:none}
.row+.row{border-top:1px solid var(--line)}
.kv.total{border-top:1px solid var(--line)}
.sheet-list button,.table td,.table th{border-bottom-color:var(--line)}

/* hero: solid blue->indigo, white buttons */
.hero{background:linear-gradient(150deg,#1769e0 0%,#3f4fd8 60%,#5a43d6 100%);border:1px solid rgba(255,255,255,.35);
  box-shadow:0 14px 34px rgba(10,60,180,.4);-webkit-backdrop-filter:none;backdrop-filter:none}
.hero::after{display:none}

/* buttons: every kind clearly visible */
.btn{background:var(--blue);color:#fff;border:1px solid transparent;box-shadow:none}
.btn:active{background:color-mix(in srgb,var(--blue) 80%,#000);opacity:1}
.btn.ghost,.btn.glass{background:var(--s2);color:#fff;border:1px solid var(--line2);box-shadow:none}
.btn.ghost:active,.btn.glass:active{background:var(--s3)}
.hero .btn.glass{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.55);color:#fff}
.btn.light{background:#fff;color:#000;border:1px solid #fff}
.btn.danger{background:#3b1613;color:#ff6b61;border:1px solid #7a2a25}
.btn.sm{box-shadow:none}
.btn[disabled]{background:var(--s2);color:#8e8e93;border-color:var(--line);opacity:1}
#rentbtn,.btn.block{box-shadow:none}

/* chips (admin groups, filters) */
.chip{background:var(--s2);border:1px solid var(--line2);color:#fff;box-shadow:none;font-weight:500;-webkit-backdrop-filter:none;backdrop-filter:none}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.chip.sub{background:var(--s1);border:1px solid var(--line);color:#d1d1d6}
.chip.sub.on{background:#fff;border-color:#fff;color:#000;font-weight:600}   /* second row: white pill, clearly different from the first row */
.chip .x{opacity:1}

/* segmented controls: solid track, white selected pill */
.seg,.curtog{background:var(--s2);border:1px solid var(--line);padding:3px;-webkit-backdrop-filter:none;backdrop-filter:none}
.seg button,.curtog button{color:#d1d1d6;font-weight:500}
.seg button.on,.curtog button.on{background:#fff;color:#000;font-weight:600;border:0;box-shadow:0 1px 3px rgba(0,0,0,.5)}

/* tab bar: solid, selected tab = solid blue pill */
.tabbar nav{background:#1c1c1e;border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.7);-webkit-backdrop-filter:none;backdrop-filter:none}
.tab{color:#a1a1a6;font-weight:500}
.tab.on{background:var(--blue);color:#fff;font-weight:600;box-shadow:none}

/* inputs, sheets, toasts */
.input{background:var(--s2);border:1px solid var(--line2);color:#fff}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 30%,transparent)}
.sheet{background:#1c1c1e;border:1px solid var(--line);border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet-back{background:rgba(0,0,0,.62);-webkit-backdrop-filter:none;backdrop-filter:none}
.toast{background:#2c2c2e;border:1px solid var(--line2);-webkit-backdrop-filter:none;backdrop-filter:none}
.toast.err{background:#3b1613;border-color:#7a2a25}.toast.ok{background:#12301b;border-color:#1f6a35}

/* selected states in lists / options */
.pk.on,.plan.on,.frow.on{background:#0f2a4d;border:2px solid var(--blue);box-shadow:none}
.tag{background:var(--s2);color:#e5e5ea;border:1px solid var(--line)}
.tag.blue{background:#0f2a4d;color:#6cb6ff;border-color:#1c4a85}
.tag.ok{background:#12301b;color:#4cd964;border-color:#1f6a35}.tag.warn{background:#3a2a0a;color:#ffb340;border-color:#7a5a12}.tag.bad{background:#3b1613;color:#ff6b61;border-color:#7a2a25}
.offer{background:#3a2a0a;border:1px solid #9a6a10}
.offtag{border:0}
.banner{background:#3a2a0a;border:1px solid #7a5a12;color:#ffd48a}
.banner.info{background:#0f2a4d;border:1px solid #1c4a85;color:#a9d4ff}
.banner.bad{background:#3b1613;border:1px solid #7a2a25;color:#ffb3ad}
.switch{background:#48484a}
.stepper button{background:var(--s2);border:1px solid var(--line2);color:#fff}
.stepper #dm{border-right:0}
input[type=range]{background:linear-gradient(to right,var(--blue) var(--p,0%),#48484a var(--p,0%))}
.attr .fimg,.fimg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}


/* =====================================================================
   iOS FEEL  ·  type, motion, admin segmented tabs
   (selected colours now use --blue, which never turns dark)
   ===================================================================== */
html,body,button,input,select,textarea{font-family:var(--ff);font-optical-sizing:auto}
body{font-feature-settings:"calt","kern","ss03";font-synthesis:none}
.btn,.chip,.tab,.seg button,.curtog button,.nft,.qa,.back,.iconbtn,.row,.sheet-list button,.plan,.pk,.frow{-webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.2,.9,.3,1.2),background-color .18s,opacity .18s}
.btn:active,.chip:active,.qa:active,.plan:active,.pk:active,.frow:active{transform:scale(.96)}
.row:active,.sheet-list button:active{background:rgba(255,255,255,.06)}
.app{animation:iosIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes iosIn{from{opacity:0;transform:translateX(18px)}}
.sheet{transition:transform .42s cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion:reduce){.app{animation:none}}

/* admin: first row is a real iOS segmented control */
#ag{display:flex;margin:0;padding:3px;gap:0;overflow:visible;background:var(--s2);border:1px solid var(--line);border-radius:12px}
#ag .chip{flex:1;justify-content:center;height:34px;padding:0 2px;background:transparent;border:0;border-radius:9px;color:#d1d1d6;font-weight:500;font-size:13px}
#ag .chip.on{background:#fff;color:#000;font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.5)}
#at{margin:12px -16px 0}
#at .chip.sub{background:var(--s1);border:1px solid var(--line2);color:#e5e5ea}
#at .chip.sub.on{background:var(--blue);border-color:var(--blue);color:#fff}
.stat div{background:var(--s1)}

/* =====================================================================
   GLASSMORPHISM  ·  frosted surfaces over a soft colour field
   Blur is only used on a few big surfaces (header, hero, tab bar, sheets)
   so scrolling 40 gift cards stays smooth. Selected / primary stay solid.
   ===================================================================== */
:root{--g-fill:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.05));--g-edge:rgba(255,255,255,.22);--g-hi:inset 0 1px 0 rgba(255,255,255,.3);--g-sep:rgba(255,255,255,.16)}
html,body{background:#05070f}
#bg{background:
  radial-gradient(60% 38% at 14% 6%,rgba(10,132,255,.55),transparent 70%),
  radial-gradient(55% 34% at 92% 22%,rgba(191,90,242,.42),transparent 70%),
  radial-gradient(60% 40% at 8% 62%,rgba(48,209,200,.28),transparent 72%),
  radial-gradient(70% 40% at 90% 92%,rgba(94,92,230,.45),transparent 70%),
  #05070f}

/* glass cards (no blur on repeated items: fast) */
.card,.nft,.qa,.attr,.stat div,.pk,.plan,.frow,.copy,.menu{
  background:var(--g-fill);border:1px solid var(--g-edge);box-shadow:var(--g-hi),0 8px 22px rgba(0,0,0,.28)}
.card,.menu{-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.nft .pic{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.row+.row,.kv.total{border-top:1px solid var(--g-sep)}
.sheet-list button,.table td,.table th{border-bottom-color:var(--g-sep)}
.back,.iconbtn{background:rgba(255,255,255,.12);border:1px solid var(--g-edge);box-shadow:var(--g-hi);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* hero */
.hero{background:linear-gradient(150deg,rgba(10,132,255,.62),rgba(94,92,230,.5) 60%,rgba(191,90,242,.38));border:1px solid rgba(255,255,255,.4);
  box-shadow:var(--g-hi),0 18px 40px rgba(10,60,180,.4);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7)}

/* buttons */
.btn{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 86%,#fff),var(--blue));border:1px solid rgba(255,255,255,.35);box-shadow:var(--g-hi),0 8px 22px color-mix(in srgb,var(--blue) 40%,transparent)}
.btn.ghost,.btn.glass{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);box-shadow:var(--g-hi);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero .btn.glass{background:rgba(255,255,255,.2)}
.btn.light{background:#fff;color:#000;border-color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.btn.danger{background:rgba(255,69,58,.2);border:1px solid rgba(255,69,58,.55);color:#ff8a82;box-shadow:var(--g-hi)}
.btn[disabled]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#9a9aa2;box-shadow:none}

/* chips / segmented / admin tabs */
.chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);box-shadow:var(--g-hi)}
.chip.on{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 86%,#fff),var(--blue));border-color:rgba(255,255,255,.4)}
.seg,.curtog,#ag{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);box-shadow:var(--g-hi);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#at .chip.sub{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
#at .chip.sub.on{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 86%,#fff),var(--blue));border-color:rgba(255,255,255,.4);color:#fff}
.chip.sub.on{background:#fff;color:#000}

/* tab bar, sheets, toast, inputs */
.tabbar nav{background:rgba(24,26,38,.58);border:1px solid rgba(255,255,255,.28);box-shadow:var(--g-hi),0 14px 36px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8)}
.tab.on{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 86%,#fff),var(--blue));box-shadow:var(--g-hi)}
.sheet{background:rgba(26,28,40,.72);border:1px solid rgba(255,255,255,.22);border-bottom:0;-webkit-backdrop-filter:blur(40px) saturate(1.8);backdrop-filter:blur(40px) saturate(1.8)}
.sheet-back{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.toast{background:rgba(40,42,58,.7);border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.toast.err{background:rgba(120,30,28,.7)}.toast.ok{background:rgba(24,100,50,.7)}
.input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.stepper button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);box-shadow:var(--g-hi)}

/* states */
.pk.on,.plan.on,.frow.on{background:linear-gradient(145deg,rgba(10,132,255,.38),rgba(10,132,255,.14));border:1.5px solid var(--blue)}
.tag{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.tag.blue{background:rgba(10,132,255,.28);border-color:rgba(10,132,255,.6)}
.offer{background:linear-gradient(145deg,rgba(255,159,10,.3),rgba(255,159,10,.12));border:1px solid rgba(255,190,80,.6);box-shadow:var(--g-hi)}
.banner{background:rgba(255,159,10,.18);border:1px solid rgba(255,190,80,.5);backdrop-filter:blur(12px)}
.banner.info{background:rgba(10,132,255,.2);border-color:rgba(10,132,255,.55)}
.banner.bad{background:rgba(255,69,58,.2);border-color:rgba(255,69,58,.55)}

/* speed: do not lay out or paint what is off screen */
.frow{content-visibility:auto;contain-intrinsic-size:auto 66px}
.grid2 .nft{content-visibility:auto;contain-intrinsic-size:auto 270px}
.nft .pic img{content-visibility:auto}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.menu,.tabbar nav,.sheet,.toast,.hero{background:#1c1e2a}}
.sec>h3 a{color:#6cb6ff}