/* Team rebate network details */
.rb-teamcats{display:grid;gap:10px;margin-bottom:12px}.rb-teamcats>article,.rb-branches,.rb-members{padding:15px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.rb-teamcats header{display:flex;align-items:center;gap:10px}.rb-teamcats header div small{display:block;color:var(--muted);font-size:9px}.rb-teamcats header div strong{font-size:15px}.rb-teamcats mark{margin-left:auto;background:none;color:var(--brand);font-weight:900}.rb-teamcats .rb-bar{margin-top:12px}.rb-teamcats footer{display:flex;justify-content:space-between;margin-top:6px;color:var(--muted);font-size:9px}.rb-branches,.rb-members{margin-bottom:12px}.rb-branches>header,.rb-members>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.rb-branches header small,.rb-members header small{font-size:8px;letter-spacing:.09em;color:var(--brand);font-weight:900}.rb-branches h3,.rb-members h3{margin:2px 0;font-size:15px}.rb-branches>header>span,.rb-members>header>b{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:10px;background:var(--surface);font-size:12px}.rb-branch{border-top:1px solid var(--line)}.rb-branch:last-child{border-bottom:1px solid var(--line)}.rb-branch summary{display:flex;align-items:center;gap:9px;padding:12px 2px;cursor:pointer;list-style:none}.rb-branch summary::-webkit-details-marker{display:none}.rb-avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--brand) 18%,var(--surface));color:var(--brand);font-weight:900}.rb-branch summary>div{min-width:0;flex:1}.rb-branch summary b,.rb-branch summary small{display:block;font-size:11px}.rb-branch summary small{color:var(--muted);font-size:8px;margin-top:2px}.rb-branch summary aside{text-align:right}.rb-branch summary aside strong{font-size:11px}.rb-branch summary>svg{width:14px;transition:.2s}.rb-branch[open] summary>svg{transform:rotate(180deg)}.rb-gaprows{padding:0 0 9px 43px}.rb-gaprows>div{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center;padding:9px;border-radius:10px;background:var(--surface);margin-bottom:5px}.rb-gaprows span b,.rb-gaprows span small{display:block;font-size:9px}.rb-gaprows span small{color:var(--muted)}.rb-gaprows em{font-size:9px;font-style:normal;color:var(--muted)}.rb-gaprows mark{padding:4px 6px;border-radius:7px;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);font-size:8px;font-weight:900}.rb-members>div{max-height:270px;overflow:auto}.rb-member{display:flex;align-items:center;gap:9px;padding:9px 2px;border-top:1px solid var(--line)}.rb-member>div{min-width:0;flex:1}.rb-member b,.rb-member small{display:block;font-size:10px}.rb-member small{color:var(--muted);font-size:8px}.rb-member mark{padding:4px 7px;border-radius:7px;background:#efffc8;color:#315115;font-size:8px;font-weight:900}.rb-member em{font-size:8px;font-style:normal;color:#2b8b5a}.rb-team{padding:5px 15px 15px}@media(min-width:700px){.rb-teamcats{grid-template-columns:1fr 1fr}}@media(max-width:520px){.rb-gaprows{padding-left:0}}

/* ============================================================
   BO88 frontend — mobile-first cyan/white casino layout
   Left vertical category rail + stacked brand cards + bottom tabs
   ============================================================ */

@import url('/vendor/fonts/inter.css');

:root{
  /* Merchant-controlled theme. The BO provides four core colours; the shared
     CMS theme engine expands them into this complete semantic palette. */
  --brand:var(--cms-primary-solid,#1e6cff);
  --brand-grad:var(--cms-primary,var(--brand));
  --brand-contrast:var(--cms-primary-contrast,#fff);
  --brand-soft:var(--cms-primary-soft,#e7f0ff);
  --accent:var(--cms-accent-solid,#06b6d4);
  --accent-grad:var(--cms-accent,var(--accent));
  --accent-soft:var(--cms-accent-soft,#e4f8fb);

  --bg-1:color-mix(in srgb,var(--cms-bg-solid,#f0f5fd) 84%,var(--brand) 16%);
  --bg-2:color-mix(in srgb,var(--cms-bg-solid,#f0f5fd) 92%,var(--accent) 8%);
  --bg-3:var(--cms-bg-solid,#f0f5fd);
  --bg-glow-1:color-mix(in srgb,var(--brand) 24%,transparent);
  --bg-glow-2:color-mix(in srgb,var(--accent) 18%,transparent);

  --surface:var(--cms-surface,rgba(255,255,255,.86));
  --surface-2:var(--cms-surface-2,rgba(255,255,255,.6));
  --surface-deep:var(--cms-surface-strong,#fff);

  --ink:var(--cms-text-solid,#1e293b);
  --ink-2:color-mix(in srgb,var(--ink) 86%,var(--bg-3));
  --muted:var(--cms-muted,#64748b);
  --muted-2:var(--cms-muted-2,#94a3b8);

  --line:var(--cms-line,rgba(148,163,184,.18));
  --line-2:var(--cms-line-strong,rgba(148,163,184,.32));

  --brand-2:color-mix(in srgb,var(--brand) 68%,var(--accent));
  --brand-dark:color-mix(in srgb,var(--brand) 76%,#000);
  --cyan:var(--accent);
  --teal:color-mix(in srgb,var(--accent) 78%,#158f70);
  --emerald:color-mix(in srgb,var(--brand) 55%,#10b981);
  --rose:#fb7185;
  --amber:#fbbf24;
  --gold:#eab308;
  --violet:#8b5cf6;

  --shadow-sm:0 1px 2px var(--cms-shadow-color,rgba(15,23,42,.04));
  --shadow-md:0 8px 20px -8px var(--cms-shadow-color,rgba(15,23,42,.12));
  --shadow-lg:0 18px 38px -16px var(--cms-shadow-color,rgba(15,23,42,.18));
  --font-heading:var(--cms-font-heading,'Plus Jakarta Sans',sans-serif);
  --font-body:var(--cms-font-body,'Plus Jakarta Sans',sans-serif);
}

/* Member profile — editorial account hub */
.member-profile-page{padding:.7rem .72rem 5.5rem;display:grid;gap:.72rem;color:var(--ink)}
.profile-identity-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;overflow:hidden;padding:1rem;border-radius:1.35rem;background:linear-gradient(135deg,#0b3022,#174d38 72%,#1c6143);color:#fff;box-shadow:0 1.2rem 2.3rem rgba(9,48,34,.16)}
.profile-identity-card:after{content:"";position:absolute;width:10rem;height:10rem;right:-4.8rem;top:-5.3rem;border:1px solid rgba(199,255,45,.22);border-radius:50%;box-shadow:0 0 0 1.8rem rgba(199,255,45,.04),0 0 0 3.6rem rgba(199,255,45,.025)}
.profile-avatar-wrap,.profile-identity,.profile-settings,.profile-avatar-actions{position:relative;z-index:1}.profile-avatar{position:relative;width:4.2rem;height:4.2rem;padding:0;overflow:hidden;display:grid;place-items:center;border:3px solid rgba(255,255,255,.14);border-radius:1.28rem;background:#c7ff2d;color:#17351f;font-size:1.25rem;font-weight:900;box-shadow:0 .55rem 1.1rem rgba(0,0,0,.2);cursor:pointer}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-avatar>i{position:absolute;right:.18rem;bottom:.18rem;width:1.25rem;height:1.25rem;padding:.25rem;border-radius:.42rem;background:#fff;color:#17351f;box-sizing:border-box}.profile-identity{min-width:0}.profile-identity>small{display:block;color:#c7ff2d;font-size:.58rem;font-weight:900;letter-spacing:.08em}.profile-identity h1{overflow:hidden;text-overflow:ellipsis;margin:.22rem 0;font-size:1.25rem;letter-spacing:-.03em}.profile-identity p{display:flex;align-items:center;gap:.38rem;margin:0;color:#bcd0c6;font-size:.65rem}.profile-identity p i{width:3px;height:3px;border-radius:50%;background:#78998a}.profile-settings{width:2.3rem;height:2.3rem;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:.72rem;background:rgba(255,255,255,.08);color:#fff}.profile-settings svg{width:1rem}.profile-avatar-actions{grid-column:2/4;display:flex;gap:.4rem}.profile-avatar-actions button{display:flex;align-items:center;gap:.3rem;padding:.42rem .58rem;border:1px solid rgba(255,255,255,.16);border-radius:.58rem;background:rgba(255,255,255,.08);color:#e5f0ea;font-size:.61rem;font-weight:800}.profile-avatar-actions button.danger{color:#ffc8c8}.profile-avatar-actions svg{width:.78rem}
.profile-balance-card,.profile-menu-card{padding:.95rem;border:1px solid var(--line);border-radius:1.25rem;background:rgba(255,255,255,.78);box-shadow:0 .7rem 1.9rem rgba(21,56,42,.06);backdrop-filter:blur(12px)}.profile-balance-card>header,.profile-menu-card>header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.profile-balance-card header small,.profile-menu-card header small{display:block;color:var(--muted);font-size:.58rem;font-weight:900;letter-spacing:.08em}.profile-balance-card header strong{display:block;margin-top:.16rem;font-size:1.65rem;letter-spacing:-.045em}.profile-balance-card header button{display:flex;align-items:center;gap:.12rem;border:0;background:transparent;color:var(--muted);font-size:.62rem;font-weight:800}.profile-balance-card header button svg{width:.8rem}.profile-money-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-top:.85rem;padding-top:.8rem;border-top:1px solid var(--line)}
.profile-shortcut{min-width:0;padding:.25rem .1rem;border:0;background:transparent;color:var(--ink);text-align:center}.profile-shortcut-icon{position:relative;width:2.7rem;height:2.7rem;display:grid;place-items:center;margin:0 auto .4rem;border-radius:.86rem;background:#e6f2eb;color:#1e6a47;transition:transform .18s ease}.profile-shortcut:active .profile-shortcut-icon{transform:scale(.93)}.profile-shortcut-icon svg{width:1.15rem}.profile-shortcut b{display:block;overflow:hidden;text-overflow:ellipsis;font-size:.62rem;white-space:nowrap}.profile-shortcut.blue .profile-shortcut-icon{background:#e8f1ff;color:#2870b9}.profile-shortcut.gold .profile-shortcut-icon{background:#fff2ce;color:#9b6a08}.profile-shortcut.violet .profile-shortcut-icon{background:#f0eaff;color:#7448b5}.profile-shortcut.aqua .profile-shortcut-icon{background:#e0f6f4;color:#14736c}
.profile-vip-card{display:flex;align-items:center;justify-content:space-between;gap:.8rem;overflow:hidden;padding:1rem;border:1px solid #e7dcb3;border-radius:1.25rem;background:linear-gradient(120deg,#fffaf0,#fff 58%,#f3f7ee);box-shadow:0 .65rem 1.7rem rgba(80,60,20,.06)}.profile-vip-card small{color:#99720c;font-size:.55rem;font-weight:900;letter-spacing:.09em}.profile-vip-card h2{margin:.2rem 0;font-size:.92rem}.profile-vip-card p{margin:0;color:var(--muted);font-size:.61rem;line-height:1.45}.profile-vip-card>span{flex:0 0 4.2rem;height:4.2rem;display:grid;place-items:center;border-radius:1.1rem;background:linear-gradient(145deg,#17281f,#3e5a49);color:#ffeaa8;box-shadow:0 .6rem 1.2rem rgba(23,40,31,.16)}.profile-vip-card>span svg{width:1.35rem}.profile-vip-card>span b{font-size:.52rem}.profile-menu-card h2{margin:.15rem 0 0;font-size:1rem}.profile-menu-card header>button{position:relative;width:2.25rem;height:2.25rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:.72rem;background:var(--bg-2);color:var(--ink)}.profile-menu-card header>button svg{width:1rem}.profile-menu-card header>button span{display:none;position:absolute;right:-.25rem;top:-.25rem;min-width:1rem;height:1rem;padding:0 .18rem;place-items:center;border:2px solid #fff;border-radius:99px;background:#e74a4a;color:#fff;font-size:.5rem}.profile-menu-card header>button span.show{display:grid}.profile-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem .25rem;margin-top:1rem}.profile-logout{width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.75rem;border:1px solid #f1cccc;border-radius:.85rem;background:#fff8f8;color:#c83b3b;font-size:.7rem;font-weight:900}.profile-logout svg{width:.95rem}
.profile-guest{display:flex;align-items:center;gap:1rem;padding:1.3rem;border-radius:1.35rem;background:linear-gradient(135deg,#0b3022,#174d38);color:#fff}.profile-guest>span{flex:0 0 4rem;height:4rem;display:grid;place-items:center;border-radius:1.15rem;background:#c7ff2d;color:#17351f}.profile-guest>span svg{width:1.5rem}.profile-guest small{color:#c7ff2d;font-size:.55rem;font-weight:900;letter-spacing:.1em}.profile-guest h1{margin:.18rem 0;font-size:1.15rem}.profile-guest p{margin:0;color:#bdd0c7;font-size:.64rem;line-height:1.45}.profile-guest button{display:flex;align-items:center;gap:.3rem;margin-top:.65rem;padding:.48rem .7rem;border:0;border-radius:.62rem;background:#fff;color:#17351f;font-size:.62rem;font-weight:900}.profile-guest button svg{width:.8rem}
@media(max-width:380px){.profile-menu-grid{grid-template-columns:repeat(3,1fr)}.profile-identity-card{grid-template-columns:auto 1fr}.profile-settings{position:absolute;right:.7rem;top:.7rem}.profile-avatar-actions{grid-column:1/3}.profile-vip-card>span{flex-basis:3.7rem;height:3.7rem}}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html,body{ height:100%; }
body{
  font-family:var(--font-body),'PingFang SC','Microsoft YaHei',sans-serif;
  color: var(--ink);
  background:
    radial-gradient(700px 500px at 10% 0%, var(--bg-glow-1), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, var(--bg-glow-2), transparent 60%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
  background-attachment: fixed;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,.brand-name,.section-title{ font-family:var(--font-heading); }

/* Dark merchant themes are derived automatically from the selected BO
   Background colour; no template-specific dark-mode switch is required. */
:root[data-cms-scheme="dark"] body{ color:var(--ink); }
:root[data-cms-scheme="dark"] .app-strip,
:root[data-cms-scheme="dark"] #bottomtab{ background:color-mix(in srgb,var(--surface-deep) 90%,transparent); }
:root[data-cms-scheme="dark"] .field,
:root[data-cms-scheme="dark"] input,
:root[data-cms-scheme="dark"] select,
:root[data-cms-scheme="dark"] textarea{ color:var(--ink); background:var(--surface-deep); border-color:var(--line-2); }

::-webkit-scrollbar{ width:0; height:0; }

/* ================ APP SHELL ================ */
#app{ max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; padding-bottom: 78px; }
/* Desktop / any screen wider than a phone → render as a centered phone frame
   (480px column + shadow + its own gradient background) so the app never
   stretches full-width and the min-height:100vh fill reads as a phone screen
   instead of a broken empty page. The fixed bottom bar is already centered at
   max-width:480, so it lines up with this frame. */
@media (min-width: 540px){
  #app{
    max-width: 480px;
    box-shadow: 0 18px 70px -16px rgba(15,23,42,.40), 0 0 0 1px rgba(15,23,42,.06);
    background:
      radial-gradient(700px 500px at 10% 0%, var(--bg-glow-1), transparent 60%),
      radial-gradient(700px 500px at 90% 100%, var(--bg-glow-2), transparent 60%),
      linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
  }
}

/* ================ APP DOWNLOAD STRIP ================ */
.app-strip{
  position: sticky; top: 0; z-index: 20;
  display:flex; align-items:center; gap:.6rem;
  padding: .55rem .8rem;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.app-strip .close{
  width:22px; height:22px; border-radius:50%;
  background: rgba(148,163,184,.25); color: var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
}
.app-strip .icon-box{
  width:32px; height:32px; border-radius:.55rem;
  background:linear-gradient(135deg,var(--accent),var(--brand));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.78rem;
  box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 35%,transparent);
  flex-shrink:0;
}
.app-strip .copy{ flex:1; min-width:0; }
.app-strip .copy .title{ font-weight:700; font-size:.82rem; color: var(--ink); }
.app-strip .copy .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }
.app-strip .dl{
  padding: .45rem .9rem;
  background:var(--brand-grad);
  color:var(--brand-contrast); font-weight:700; font-size:.78rem;
  border-radius:9999px; box-shadow:0 4px 10px color-mix(in srgb,var(--brand) 34%,transparent);
  cursor:pointer; flex-shrink:0;
}

/* ================ BRAND ROW ================ */
.brand-row{
  display:flex; align-items:center; gap:.6rem;
  padding: .85rem 1rem .65rem;
}
.brand-logo{
  display:inline-flex; align-items:center; gap:.45rem;
  flex:1; min-width:0;
}
.brand-mark{
  width:38px; height:38px; border-radius:.7rem;
  background:linear-gradient(135deg,var(--accent) 0%,var(--brand) 100%);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.85rem;
  box-shadow:0 6px 14px -4px color-mix(in srgb,var(--brand) 40%,transparent);
  flex-shrink:0;
  position:relative;
}
.brand-mark::after{
  content:""; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%);
  width:24px; height:6px;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--brand) 55%,transparent),transparent 70%);
  border-radius:50%;
}
.brand-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.05rem;
  background:linear-gradient(135deg,var(--accent),var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-0.01em;
}
.brand-name .dot{ color:var(--accent); }
.url-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding: .35rem .65rem .35rem .8rem;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);
  border-radius:9999px;
  font-size:.72rem; color: var(--ink-2); font-weight:500;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.url-chip .lbl{ color: var(--muted); }
.url-chip .ic{
  width:22px; height:22px; border-radius:50%;
  background:var(--accent-grad);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
}

/* ================ HERO BANNER ================ */
.hero-banner{
  margin: .35rem 1rem .8rem;
  border-radius: 1.1rem;
  overflow: hidden;
  position: relative;
  height: 132px;
  background:
    linear-gradient(110deg,color-mix(in srgb,var(--brand) 45%,#07152f) 0%,color-mix(in srgb,var(--brand) 24%,#061326) 48%,var(--brand) 100%);
  box-shadow: var(--shadow-md);
}
.hero-banner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(220px 160px at 18% 50%, rgba(250,204,21,.4), transparent 60%),
    radial-gradient(280px 200px at 78% 30%,color-mix(in srgb,var(--brand) 50%,transparent),transparent 65%),
    radial-gradient(280px 220px at 90% 90%, rgba(124,58,237,.45), transparent 65%);
}
.hero-banner .figure{
  position:absolute; left:.85rem; bottom:0; top:.7rem;
  width: 100px;
  background: radial-gradient(ellipse at 50% 90%, rgba(250,204,21,.35), transparent 70%);
  display:flex; align-items:flex-end; justify-content:center;
  font-size: 3.5rem;
}
.hero-banner .copy{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  text-align:right; color:#fff;
}
.hero-banner .copy .eyebrow{
  font-size:.72rem; color:#fde68a; letter-spacing:.04em;
  text-transform:uppercase; font-weight:700;
}
.hero-banner .copy .title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.4rem; line-height:1.05;
  letter-spacing:-0.02em; margin-top:.2rem;
}
.hero-banner .copy .title em{
  font-style:normal;
  background: linear-gradient(135deg,#fde68a,#fbbf24,#f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-banner .copy .sub{
  font-size:.7rem; color:#cbd5e1; margin-top:.2rem;
  display:flex; gap:.4rem; justify-content:flex-end;
}
.hero-banner .copy .sub span{
  padding: .1rem .35rem;
  border:1px solid rgba(255,255,255,.3);
  border-radius:.25rem;
  background: rgba(255,255,255,.08);
}

/* ================ NOTIFICATION STRIP ================ */
.notice-strip{
  margin: .7rem 1rem .85rem;
  display:flex; align-items:center; gap:.55rem;
  padding: .55rem .75rem;
  background: rgba(255,255,255,.7);
  border:1px solid var(--line);
  border-radius: 9999px;
  font-size: .72rem; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.notice-strip .bell{
  width:22px; height:22px; border-radius:50%;
  background: linear-gradient(135deg,#fbbf24,#f59e0b);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  flex-shrink:0;
}
.notice-strip .text{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notice-strip .cup{
  padding:.2rem .55rem; background: linear-gradient(135deg,#8b5cf6,#6d28d9); color:#fff;
  border-radius:9999px; font-weight:700; font-size:.7rem; flex-shrink:0;
  box-shadow: 0 3px 8px rgba(124,58,237,.4);
}

/* ================ LOGIN PROMPT + 4 ACTION ICONS ================ */
.login-row{
  margin: 0 1rem .85rem;
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
}
.login-prompt{ flex:0 1 auto; }
.login-prompt .title{ font-weight:700; font-size:.92rem; color: var(--ink); }
.login-prompt .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }
.action-row{
  display:grid; grid-template-columns: repeat(4,1fr); gap:.4rem;
  flex:1;
}
.action-row .item{
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  cursor:pointer;
  text-align:center;
}
.action-row .item .ic-wrap{
  width:42px; height:42px; border-radius:.85rem;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  box-shadow: 0 5px 14px -6px rgba(15,23,42,.18);
}
.action-row .item:nth-child(1) .ic-wrap{ background:linear-gradient(135deg,var(--accent),var(--brand)); }
.action-row .item:nth-child(2) .ic-wrap{ background:linear-gradient(135deg,var(--brand-2),var(--brand)); }
.action-row .item:nth-child(3) .ic-wrap{ background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.action-row .item:nth-child(4) .ic-wrap{ background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.action-row .item .ic-wrap::before{
  content:""; position:absolute; top:-2px; left:-2px; right:-2px; bottom:50%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  border-radius:.85rem .85rem 0 0;
}
.action-row .item .ic-wrap{ transition:transform .15s ease, box-shadow .2s ease; }
.action-row .item:hover .ic-wrap{ transform:translateY(-2px); box-shadow:0 9px 18px -7px rgba(15,23,42,.34); }
.action-row .item:active .ic-wrap{ transform:scale(.92); }
.action-row .item .ic-wrap i{ color:#fff; position:relative; z-index:1; width:20px; height:20px; }
.action-row .item .name{ font-size:.7rem; color: var(--ink-2); font-weight:600; }

/* ===== "More" panel icon badges (colorful, glossy, tactile) ===== */
.more-item{ display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.5rem .15rem; cursor:pointer; text-decoration:none; color:var(--ink); border-radius:.75rem; transition:transform .15s ease, background .2s ease; }
.more-item:hover{ transform:translateY(-2px); background:rgba(15,23,42,.035); }
.more-item:active{ transform:scale(.93); }
.more-badge{ position:relative; overflow:hidden; width:48px; height:48px; border-radius:.95rem; display:inline-flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 6px 16px -7px rgba(15,23,42,.4); transition:transform .15s ease, box-shadow .2s ease; }
.more-item:hover .more-badge{ box-shadow:0 10px 20px -8px rgba(15,23,42,.42); }
.more-badge::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:50%; background:linear-gradient(180deg,rgba(255,255,255,.5),transparent); }
.more-badge i{ position:relative; z-index:1; }
.more-label{ font-size:.7rem; font-weight:600; text-align:center; line-height:1.2; }

/* Merchant-uploaded custom icons (png/gif/webp) — show the raw artwork, drop the gradient/gloss. */
.action-row .item .ic-wrap.custom{ background:transparent; box-shadow:none; }
.action-row .item .ic-wrap.custom::before{ display:none; }
.action-row .item .ic-wrap.custom img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; }
.more-badge.custom{ background:transparent; box-shadow:none; }
.more-badge.custom::before{ display:none; }
.more-badge.custom img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; }

/* ================ HOME GRID (LEFT RAIL + RIGHT BRAND CARDS) ================ */
.home-grid{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap:.6rem;
  padding: 0 .6rem .5rem .6rem;
}
.cat-rail{
  padding: .1rem 0;
  display:flex; flex-direction:column; gap:.4rem;
}
.cat-rail .cat{
  display:flex; flex-direction:column; align-items:center; gap:.28rem;
  padding: .6rem .15rem;
  cursor:pointer;
  color: var(--ink-2, #475569);
  font-size:.68rem; font-weight:700;
  border-radius: .8rem;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 3px 8px -5px rgba(15,40,90,.18);
  transition: all .15s ease;
}
.cat-rail .cat:hover{ border-color: var(--brand, #1e6cff); color: var(--brand, #1e6cff); }
.cat-rail .cat.active{
  color: var(--brand, #1e6cff);
  border-color: transparent;
  background:linear-gradient(160deg,var(--accent-soft),var(--brand-soft));
  box-shadow:0 6px 14px -6px color-mix(in srgb,var(--brand) 40%,transparent);
}
.cat-rail .cat .ic{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: .65rem;
  background: linear-gradient(135deg, #eef5ff, #dbe9ff);
  color: var(--brand, #1e6cff);
}
.cat-rail .cat.active .ic{
  background:linear-gradient(135deg,var(--accent),var(--brand));
  color:#fff;
  box-shadow:0 5px 12px -3px color-mix(in srgb,var(--brand) 50%,transparent);
}

.brand-list{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  gap:.55rem;
}
/* Cards slide up + fade in, staggered, every time a category is (re)rendered. */
@keyframes brandCardIn{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
.brand-list .brand-card{ animation:brandCardIn .5s cubic-bezier(.22,.61,.36,1) both; }
.brand-list .brand-card:nth-child(1){ animation-delay:.02s }
.brand-list .brand-card:nth-child(2){ animation-delay:.07s }
.brand-list .brand-card:nth-child(3){ animation-delay:.12s }
.brand-list .brand-card:nth-child(4){ animation-delay:.17s }
.brand-list .brand-card:nth-child(5){ animation-delay:.22s }
.brand-list .brand-card:nth-child(6){ animation-delay:.27s }
.brand-list .brand-card:nth-child(7){ animation-delay:.32s }
.brand-list .brand-card:nth-child(8){ animation-delay:.37s }
.brand-list .brand-card:nth-child(9){ animation-delay:.42s }
.brand-list .brand-card:nth-child(10){ animation-delay:.47s }
.brand-list .brand-card:nth-child(11){ animation-delay:.52s }
.brand-list .brand-card:nth-child(n+12){ animation-delay:.57s }
@media (prefers-reduced-motion: reduce){ .brand-list .brand-card{ animation:none } }
/* Same staggered slide-in for the Promotions list cards. */
.promo-list .promo-item{ animation:brandCardIn .5s cubic-bezier(.22,.61,.36,1) both; }
.promo-list .promo-item:nth-child(1){ animation-delay:.03s }
.promo-list .promo-item:nth-child(2){ animation-delay:.09s }
.promo-list .promo-item:nth-child(3){ animation-delay:.15s }
.promo-list .promo-item:nth-child(4){ animation-delay:.21s }
.promo-list .promo-item:nth-child(5){ animation-delay:.27s }
.promo-list .promo-item:nth-child(6){ animation-delay:.33s }
.promo-list .promo-item:nth-child(7){ animation-delay:.39s }
.promo-list .promo-item:nth-child(8){ animation-delay:.45s }
.promo-list .promo-item:nth-child(n+9){ animation-delay:.5s }
@media (prefers-reduced-motion: reduce){ .promo-list .promo-item{ animation:none } }
.brand-card{
  position: relative;
  background: linear-gradient(115deg, #f0faff 0%, #dbecff 60%, #c4e1fa 100%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:.82rem;
  padding:.72rem .48rem .62rem;
  overflow:hidden;
  display:flex; flex-direction:column-reverse; align-items:stretch; justify-content:flex-end; gap:.45rem;
  cursor:pointer;
  box-shadow: var(--shadow-md);
  transition: transform .15s, box-shadow .2s;
  min-width:0;
  min-height:0;
  aspect-ratio:3/4;
}
.brand-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.brand-card.featured{
  grid-column:1/-1;
  min-height:108px;
  padding:1.65rem 1rem .8rem;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border-radius:1rem;
  background:
    radial-gradient(circle at 86% 48%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 30%),
    linear-gradient(115deg,var(--brand-soft) 0%,color-mix(in srgb,var(--accent-soft) 76%,#fff) 100%);
  border-color:color-mix(in srgb,var(--brand) 24%,#fff);
  box-shadow:0 12px 28px -16px color-mix(in srgb,var(--brand) 52%,transparent);
  aspect-ratio:auto;
}
.hot-game-label{
  position:absolute; left:1rem; top:.65rem; z-index:2;
  display:inline-flex; align-items:center; gap:.28rem;
  color:var(--brand-dark); font-size:.61rem; line-height:1; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.hot-game-label i{ width:12px; height:12px; color:var(--accent); fill:currentColor; }
.brand-card .info{ flex:1; min-width:0; position:relative; z-index:1; }
.brand-card:not(.featured) .info{ flex:0 0 auto; }
.brand-card .name-row{
  min-width:0; display:flex; align-items:center; gap:.3rem;
  margin-bottom:.18rem;
}
.brand-card .name{
  font-family:'Plus Jakarta Sans',sans-serif;
  display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:750; font-size:.72rem; color:var(--ink);
}
.brand-card.featured .name{ font-size:1.02rem; }
.brand-card.featured .name{ overflow:visible; white-space:normal; text-overflow:clip; }
.brand-card .official{
  padding:.08rem .3rem;
  background: linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff;
  font-size:.5rem; font-weight:800; border-radius:.25rem;
  box-shadow: 0 2px 5px rgba(245,158,11,.45);
}
.brand-card .count{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:-0.02em; line-height:1;
}
.brand-card.featured .count{ font-size:1.72rem; }
.brand-card .count .unit{
  -webkit-text-fill-color: var(--muted);
  font-size:.58rem;
  font-weight: 600;
  margin-left:.12rem;
}
.brand-card.featured .count .unit{ font-size:.78rem; }
.brand-card .tag{
  display:block; max-width:100%; margin-top:.28rem; padding:.14rem .35rem;
  background:linear-gradient(135deg,var(--accent),var(--brand));
  color:#fff; font-size:.5rem; line-height:1.25; font-weight:700;
  border-radius: 9999px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 3px 7px -2px color-mix(in srgb,var(--accent) 45%,transparent);
}
.brand-card.featured .tag{ display:inline-flex; width:auto; font-size:.64rem; padding:.16rem .52rem; }
.brand-card .figure{
  width:100%; height:auto; min-height:0; flex:1 1 auto;
  border-radius: .6rem;
  background-position: center bottom; background-size: 110%; background-repeat: no-repeat;
  filter: drop-shadow(0 4px 8px rgba(15,23,42,.18));
  position:relative;
}
.brand-card.featured .figure{ width:94px; height:76px; }
.brand-card .figure img{ width:100%!important; height:100%!important; object-fit:contain!important; }
.brand-card:not(.featured) .figure img{ object-fit:contain!important; border-radius:.55rem; }
.brand-card .figure::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 60%);
}
/* placeholder silhouette using emoji until real images are wired */
.brand-card .figure .emoji{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:2.35rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
}
.brand-card.has-provider-art{
  padding:.45rem;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
  background:rgba(255,255,255,.92);
  aspect-ratio:auto;
  min-height:0;
}
.brand-card.has-provider-art.featured{
  grid-column:1/-1;
  min-height:0;
  padding:.55rem;
  flex-direction:column;
  align-items:stretch;
  background:rgba(255,255,255,.94);
}
.brand-card.has-provider-art .figure,
.brand-card.has-provider-art.featured .figure{
  width:100%;
  height:auto;
  flex:none;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:.65rem;
  background:#f3f6f5;
  filter:none;
}
.brand-card.has-provider-art.featured .figure{ aspect-ratio:16/7; }
.brand-card.has-provider-art .figure::before{ display:none; }
.brand-card.has-provider-art .figure img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
  opacity:1!important;
}
.brand-card.has-provider-art .info{
  width:100%;
  padding:.58rem .2rem .16rem;
  background:transparent;
}
.brand-card.has-provider-art .name-row{ margin-bottom:.3rem; }
.brand-card.has-provider-art .name,
.brand-card.has-provider-art.featured .name{ font-size:.72rem; color:var(--ink); }
.brand-card.has-provider-art .count,
.brand-card.has-provider-art.featured .count{ font-size:.95rem; }
.brand-card.has-provider-art .hot-game-label{
  position:static;
  margin-left:auto;
  padding:.18rem .35rem;
  border-radius:999px;
  color:var(--brand-dark);
  background:var(--brand-soft);
  font-size:.48rem;
  white-space:nowrap;
}
.brand-card.featured .figure .emoji{ font-size:3.4rem; }
.brand-list.layout-1{ grid-template-columns:1fr; }
.brand-list.layout-1 .brand-card,
.brand-list.layout-1 .brand-card.featured{
  grid-column:auto;
  min-height:96px;
  aspect-ratio:auto;
  padding:.85rem 1rem;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
  border-radius:.9rem;
  background:linear-gradient(115deg,#f0faff 0%,#dbecff 60%,#c4e1fa 100%);
  border-color:rgba(255,255,255,.85);
  box-shadow:var(--shadow-md);
}
.brand-list.layout-1 .hot-game-label{ display:none; }
.brand-list.layout-1 .brand-card .info{ flex:1 1 auto; }
.brand-list.layout-1 .brand-card .name{ font-size:1rem; overflow:visible; white-space:normal; text-overflow:clip; }
.brand-list.layout-1 .brand-card .count{ font-size:1.6rem; }
.brand-list.layout-1 .brand-card .count .unit{ font-size:.82rem; }
.brand-list.layout-1 .brand-card .tag{ display:inline-flex; width:auto; font-size:.66rem; padding:.15rem .55rem; }
.brand-list.layout-1 .brand-card .figure{ width:88px; height:76px; flex:0 0 88px; }
.brand-list.layout-1 .brand-card .figure img{ object-fit:contain!important; }
.brand-list.layout-1 .brand-card.has-provider-art{ padding:.55rem; flex-direction:column; align-items:stretch; }
.brand-list.layout-1 .brand-card.has-provider-art .figure{ width:100%; height:auto; aspect-ratio:16/7; }
.brand-list.layout-1 .brand-card .figure .emoji{ font-size:3rem; }
@media(max-width:360px){
  .home-grid{ grid-template-columns:58px 1fr; gap:.42rem; padding-left:.42rem; padding-right:.42rem; }
  .brand-list{ gap:.4rem; }
  .brand-card{ padding:.58rem .35rem .52rem; }
  .brand-card .figure{ height:auto; }
  .brand-card .name{ font-size:.64rem; }
  .brand-card .count{ font-size:.88rem; }
}

/* ================ BOTTOM TAB ================ */
#bottomtab{
  position: fixed; bottom:0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(170%);
  border-top: 1px solid var(--line);
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom,0));
  display:flex; justify-content:space-around;
}
.bt-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  padding: .35rem .25rem;
  color: var(--muted-2);
  font-size:.7rem; font-weight:600;
  cursor:pointer;
  position:relative;
}
.bt-item .ic{
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
}
.bt-item.active{ color: var(--brand); }
.bt-item.active .ic{ color: var(--brand); }
.bt-item.active::before{
  content:""; position:absolute; top:0; left:50%; transform: translateX(-50%);
  width:30px; height:3px; border-radius:0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}

/* ================ GENERIC ================ */
.page{ padding-bottom: 1rem; }
.page-title{
  padding: .85rem 1rem .5rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:1.1rem; color: var(--ink);
}

/* ================ PROMOTIONS PAGE ================ */
/* Hero carousel: small side breathing room so it isn't edge-to-edge */
.hero-carousel-host{ margin: 0 .7rem; }

/* Promo page hero header */
.promo-head{
  margin: 1rem 1rem .9rem;
  border-radius: 1.1rem;
  padding: 1.15rem 1.2rem;
  color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--brand) 50%,transparent);
  position:relative; overflow:hidden;
}
.promo-head .emoji{ position:absolute; right:-6px; top:-10px; font-size:5.2rem; opacity:.18; transform:rotate(-8deg); }
.promo-head .eyebrow{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background: rgba(255,255,255,.2); padding:.25rem .6rem; border-radius:9999px;
}
.promo-head h1{ font-weight:800; font-size:1.55rem; margin:.55rem 0 0; line-height:1.15; }
.promo-head .sub{ font-size:.85rem; opacity:.92; margin-top:.35rem; line-height:1.5; }

.promo-tabs{
  display:flex; gap:.45rem; padding: 0 1rem;
  overflow-x: auto;
  white-space:nowrap;
  margin-bottom: .85rem;
}
.promo-tabs::-webkit-scrollbar{ height: 0; }
.promo-tabs .tab{
  padding: .45rem .95rem;
  font-size:.85rem; font-weight:700;
  color: var(--muted);
  cursor:pointer;
  flex-shrink:0;
  background: #fff;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 9999px;
  transition: all .15s ease;
}
.promo-tabs .tab:hover{ border-color: var(--brand, #1e6cff); color: var(--brand, #1e6cff); }
.promo-tabs .tab.active{
  color:#fff; border-color: transparent;
  background: linear-gradient(135deg, var(--brand, #1e6cff), var(--cyan, #22d3ee));
  box-shadow:0 5px 12px -5px color-mix(in srgb,var(--brand) 55%,transparent);
}

.promo-list{ display:flex; flex-direction:column; gap:.7rem; padding: 0 .85rem; }
.promo-item{
  position: relative;
  background: linear-gradient(120deg, #f0faff 0%, #dbecff 60%, #c4e1fa 100%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:1rem;
  padding: 1rem 1.1rem;
  overflow:hidden;
  cursor:pointer;
  box-shadow: var(--shadow-md);
  min-height: 124px;
}
.promo-item .copy{ position:relative; z-index:1; max-width: 60%; }
.promo-item .copy .title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.05rem; color: var(--ink);
  line-height:1.2; letter-spacing:-0.01em;
}
.promo-item .copy .desc{
  font-size:.74rem; color: var(--ink-2); margin-top:.45rem; line-height:1.5;
}
.promo-item .copy .meta{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.85rem;
  padding: .25rem .55rem;
  background:linear-gradient(135deg,var(--accent),var(--brand)); color:var(--brand-contrast);
  border-radius:9999px;
  font-size:.65rem; font-weight:700;
  box-shadow:0 3px 7px -2px color-mix(in srgb,var(--accent) 40%,transparent);
}
.promo-item .promo-figure{
  position:absolute; right:.5rem; top:50%; transform: translateY(-50%);
  width: 130px; height: 110px;
  display:flex; align-items:center; justify-content:center;
  font-size: 3.5rem;
  filter: drop-shadow(0 6px 14px rgba(15,23,42,.2));
}
.promo-item .promo-figure .glow{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.45), transparent 65%);
}
.promo-item .date{
  position:absolute; bottom:.65rem; right:1rem;
  font-size:.65rem; color: var(--muted-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ================ PROFILE PAGE ================ */
.profile-head{
  padding: .85rem 1rem .65rem;
  display:flex; align-items:center; gap:.85rem;
}
.profile-head .avatar{
  width:54px; height:54px; border-radius:50%;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.5rem;
  box-shadow: 0 6px 14px -4px rgba(15,23,42,.18);
}
.profile-head .who{ flex:1; min-width:0; }
.profile-head .who .name{ font-weight:700; font-size:1.05rem; color: var(--ink); }
.profile-head .who .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }
.profile-head .header-actions{ display:flex; gap:.45rem; }
.profile-head .header-actions .ic-btn{
  width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.7);
  border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--ink-2); cursor:pointer;
  box-shadow: var(--shadow-sm);
}

.vip-banner{
  margin: .35rem 1rem .85rem;
  border-radius: 1rem;
  overflow: hidden;
  padding: 1rem 1.1rem;
  background: linear-gradient(115deg, #f5fbff 0%, #e0f0ff 50%, #cae3fb 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow: var(--shadow-md);
}
.vip-banner .row{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:.95rem; color: var(--ink);
  margin-bottom: .7rem;
}
.vip-banner .row i{ width:1rem; height:1rem; color: var(--muted-2); }
.vip-banner .perks{ display:grid; grid-template-columns: repeat(4,1fr); gap:.3rem; }
.vip-banner .perks .perk{
  text-align:center;
  font-size:.7rem; color: var(--ink-2);
  padding: .5rem .1rem;
  background: rgba(255,255,255,.6);
  border-radius:.55rem;
  font-weight:600;
}

.asset-card{
  margin: 0 1rem .85rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.asset-card .head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.55rem;
}
.asset-card .head .lbl{
  font-size:.78rem; color: var(--ink-2); font-weight:700;
}
.asset-card .head .sub{
  font-size:.7rem; color: var(--muted); font-weight:500;
}
.asset-card .row4{
  display:grid; grid-template-columns: repeat(4,1fr); gap:.3rem;
  margin-top:.5rem;
}
.asset-card .row4 .item{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.35rem .1rem; cursor:pointer;
}
.asset-card .row4 .item .ic{
  width:42px; height:42px; border-radius:.7rem;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow: 0 5px 12px -5px rgba(15,23,42,.2);
}
.asset-card .row4 .item:nth-child(1) .ic{ background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.asset-card .row4 .item:nth-child(2) .ic{ background:linear-gradient(135deg,var(--accent),var(--brand)); }
.asset-card .row4 .item:nth-child(3) .ic{ background:linear-gradient(135deg,var(--brand-2),var(--brand)); }
.asset-card .row4 .item:nth-child(4) .ic{ background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.asset-card .row4 .item .name{ font-size:.7rem; color: var(--ink-2); font-weight:600; }

.welfare-card{
  margin: 0 1rem .85rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  overflow:hidden;
}
.welfare-card .head{
  background: linear-gradient(120deg, #d9f0ff 0%, #c4e1fa 100%);
  padding: .65rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
}
.welfare-card .head .lbl{
  font-weight:700; font-size:.92rem; color: var(--ink);
}
.welfare-card .head .right{
  padding:.3rem .65rem; background: linear-gradient(135deg,#10b981,#059669); color:#fff;
  font-size:.7rem; font-weight:700; border-radius:9999px;
  display:inline-flex; align-items:center; gap:.25rem;
  box-shadow: 0 3px 8px -2px rgba(16,185,129,.45);
}
.welfare-card .grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:.3rem;
  padding: 1rem .85rem;
}
.welfare-card .grid .it{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding: .35rem .1rem;
  cursor:pointer;
}
.welfare-card .grid .it .ic{
  width:42px; height:42px; border-radius:.7rem;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow: 0 4px 10px -4px rgba(15,23,42,.2);
}
.welfare-card .grid .it:nth-child(8n+1) .ic{ background:linear-gradient(135deg,var(--accent),var(--brand)); }
.welfare-card .grid .it:nth-child(8n+2) .ic{ background: linear-gradient(135deg,#60a5fa,#1d4ed8); }
.welfare-card .grid .it:nth-child(8n+3) .ic{ background: linear-gradient(135deg,#fbbf24,#d97706); }
.welfare-card .grid .it:nth-child(8n+4) .ic{ background: linear-gradient(135deg,#a78bfa,#6d28d9); }
.welfare-card .grid .it:nth-child(8n+5) .ic{ background: linear-gradient(135deg,#34d399,#059669); }
.welfare-card .grid .it:nth-child(8n+6) .ic{ background: linear-gradient(135deg,#fb7185,#be123c); }
.welfare-card .grid .it:nth-child(8n+7) .ic{ background: linear-gradient(135deg,#67e8f9,#0e7490); }
.welfare-card .grid .it:nth-child(8n+8) .ic{ background: linear-gradient(135deg,#fdba74,#c2410c); }
.welfare-card .grid .it .nm{ font-size:.7rem; color: var(--ink-2); font-weight:600; text-align:center; }

.about-row{
  margin: 0 1rem .85rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 9999px;
  padding: .65rem 1rem;
  display:flex; align-items:center; gap:.55rem;
  box-shadow: var(--shadow-sm);
  cursor:pointer;
  color: var(--ink-2); font-size:.85rem; font-weight:500;
}
.about-row .ic{ color: var(--muted-2); }
.about-row .arrow{ margin-left:auto; color: var(--muted-2); }

/* ================ SERVICE PAGE ================ */
.service-head{
  padding: 1rem 1rem .65rem;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:1.05rem; color: var(--ink);
}
.service-head .right{ font-size:.78rem; color: var(--brand); font-weight:600; cursor:pointer; }
.service-card{
  margin: 0 1rem .85rem;
  display:flex; align-items:center; gap:.85rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.service-card .face{
  width:48px; height:48px; border-radius:50%;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
}
.service-card .who .name{ font-weight:700; font-size:.95rem; color: var(--ink); }
.service-card .who .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }

.live-entry{
  margin: 0 1rem;
  background: var(--surface);
  border:1px solid rgba(255,255,255,.85);
  border-radius: 1rem;
  padding: .85rem 1rem;
  display:flex; align-items:center; gap:.65rem;
  cursor:pointer;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.live-entry .info{ flex:1; min-width:0; }
.live-entry .info .name{ font-weight:700; font-size:.95rem; color: var(--ink); }
.live-entry .info .sub{ font-size:.7rem; color: var(--muted); margin-top:1px; }
.live-entry .bubble{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--brand));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 4px 10px -3px color-mix(in srgb,var(--accent) 45%,transparent);
}

/* ================ MODAL (dark for contrast) ================ */
#modal-root{ position: fixed; inset:0; pointer-events:none; z-index: 50; }
.modal-backdrop-light{
  position:absolute; inset:0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  pointer-events:auto;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 6vh 1rem;
  overflow:auto;
}
.modal-light{
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 24px 50px -10px rgba(15,23,42,.3);
  overflow:hidden;
  animation: popIn .22s ease-out;
}
@keyframes popIn{ from{ opacity:0; transform: translateY(8px) scale(.97);} to{opacity:1; transform:none;} }
.modal-light .head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.modal-light .head h3{ font-weight:700; font-size:1.05rem; color: var(--ink); }
.modal-light .head .x{
  width:28px; height:28px; border-radius:50%;
  background: rgba(148,163,184,.18);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--ink-2); cursor:pointer;
}
.modal-light .body{ padding: 1.1rem 1.15rem; max-height: 60vh; overflow:auto; color: var(--ink); }
.modal-light .foot{
  padding: .85rem 1.15rem;
  display:flex; gap:.5rem; justify-content:flex-end;
  border-top:1px solid var(--line);
  background: #fafbfd;
}

.btn-light{
  padding: .55rem 1.1rem;
  border: 1px solid var(--line-2);
  background: #fff;
  border-radius:.55rem;
  font-size:.85rem; font-weight:600;
  color: var(--ink-2); cursor:pointer;
}
.btn-light:hover{ background:#f8fafc; }
.btn-blue{
  padding: .55rem 1.2rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  border:none; border-radius: .55rem;
  font-size:.85rem; font-weight:700; cursor:pointer;
  box-shadow:0 4px 12px -3px color-mix(in srgb,var(--brand) 40%,transparent);
}
.btn-blue:hover{ box-shadow:0 6px 16px -3px color-mix(in srgb,var(--brand) 50%,transparent); }

/* Light-theme form fields (used inside light modal) */
.field-light label{ display:block; font-size:.75rem; color: var(--muted); font-weight:600; margin-bottom:.3rem; }
.field-light input, .field-light select, .field-light textarea{
  width:100%;
  padding:.6rem .8rem;
  border:1px solid var(--line);
  border-radius:.55rem;
  font-size:.9rem;
  color: var(--ink);
  font-family:inherit;
  background:#fff;
}
.field-light input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent); }

/* Mini util classes */
.center{ text-align:center; }
.flex{ display:flex; }
.flex-1{ flex:1; }
.gap-2{ gap:.5rem; }
.muted{ color: var(--muted); }

/* ================ EMPTY STATE / LOGIN MODAL HEADER OVERRIDES ================ */
.legacy-hidden{ display:none !important; }

.quick-login-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.quick-login{min-height:2.7rem;display:flex;align-items:center;justify-content:flex-start;gap:.65rem;padding:.45rem .7rem;border:1px solid var(--line);border-radius:.72rem;background:var(--surface);color:var(--ink);font:inherit;font-size:.72rem;font-weight:750;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.quick-login:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand) 42%,var(--line));box-shadow:0 7px 16px rgba(31,63,95,.08)}.quick-login:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 25%,transparent);outline-offset:2px}.quick-login-icon{width:1.65rem;height:1.65rem;display:grid;place-items:center;flex:0 0 auto}.quick-login-icon svg{width:100%;height:100%;display:block}

/* CMS-driven footer navigation */
#siteFooter{margin:1rem 1rem 5.4rem;border:1px solid var(--line);border-radius:1.15rem;background:color-mix(in srgb,var(--surface) 96%,var(--brand));box-shadow:0 14px 34px rgba(31,63,95,.07);overflow:hidden}
.site-footer-inner{padding:1.15rem}.site-footer-brand{padding-bottom:1rem;border-bottom:1px solid var(--line)}.site-footer-brand b{font-size:1rem}.site-footer-brand p{margin:.45rem 0 0;color:var(--muted);font-size:.72rem;line-height:1.6}
.site-footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem;padding:1rem 0}.site-footer-nav section{min-width:0}.site-footer-nav h2{margin:0 0 .55rem;color:var(--ink);font-size:.72rem;letter-spacing:.02em}.site-footer-nav a{display:block;padding:.33rem 0;color:var(--muted);font-size:.69rem;line-height:1.35;text-decoration:none;transition:color .18s ease,transform .18s ease}.site-footer-nav a:hover,.site-footer-nav a:focus-visible{color:var(--brand);transform:translateX(2px)}
.site-footer-base{display:flex;justify-content:space-between;gap:.75rem;padding-top:.85rem;border-top:1px solid var(--line);color:var(--muted);font-size:.63rem;line-height:1.45}
@media(max-width:380px){.site-footer-nav{grid-template-columns:1fr}.site-footer-base{flex-direction:column}}

/* ---------- CMS license + trust badges ---------- */
.license-chip, .trust-chip{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.25rem .55rem;
  font-size:.68rem; font-weight:600;
  background:var(--accent-soft);
  color: var(--brand, #0891b2);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius: .35rem;
  letter-spacing:.04em;
}
.trust-chip{ background: rgba(15,23,42,.06); color: var(--text, #0f172a); border-color: rgba(15,23,42,.12); }

/* Toast feedback */
.ui-toast{
  position:fixed; left:50%; bottom:84px; transform:translate(-50%, 16px);
  z-index:9999; max-width:88vw;
  background:#0f172a; color:#fff;
  padding:.7rem 1.1rem; border-radius:.6rem;
  font-size:.86rem; font-weight:600; line-height:1.4;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.45);
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none;
}
.ui-toast.show{ opacity:1; transform:translate(-50%, 0); }
.ui-toast.err{ background:#dc2626; }

/* game lobby animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* hide bottom tab while inside a game (full-screen play) */
body.playing #bottomtab { display:none !important; }
body.playing #app { padding-bottom:0 !important; }

/* Platform information center (Me → About) */
.info-center{padding-bottom:5.5rem;color:var(--ink)}
.info-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.25rem 1rem 1rem;padding:1.2rem 1.25rem;overflow:hidden;border-radius:1.05rem;background:linear-gradient(135deg,#093226,#174f3b);color:#fff;box-shadow:0 15px 34px rgba(8,47,36,.17)}
.info-hero:after{content:"";position:absolute;right:-2.7rem;width:8.5rem;height:8.5rem;border:1px solid rgba(199,255,45,.28);border-radius:50%}.info-hero small,.info-panel>header small,.info-about-brand small{color:#c7ff2d;font-size:.58rem;font-weight:900;letter-spacing:.1em}.info-hero h1{margin:.28rem 0;font-size:1.35rem}.info-hero p{max-width:22rem;margin:0;color:#c9d9d3;font-size:.72rem;line-height:1.55}.info-hero>svg{width:2.5rem;height:2.5rem;color:#c7ff2d;z-index:1}
.info-tabs-shell{position:relative;margin:0 1rem 1rem}.info-tabs-shell:after{content:"";position:absolute;right:0;top:0;bottom:0;width:1.8rem;pointer-events:none;background:linear-gradient(90deg,transparent,var(--surface))}.info-tabs{display:flex;gap:.4rem;padding:.35rem;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;border:1px solid var(--line);border-radius:.9rem;background:var(--surface);box-shadow:0 8px 22px rgba(31,63,95,.05);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-x}.info-tabs.is-dragging{cursor:grabbing;scroll-behavior:auto}.info-tabs.is-dragging .info-tab{pointer-events:none}.info-tabs::-webkit-scrollbar{display:none}.info-tab{min-height:2.3rem;display:flex;align-items:center;justify-content:center;gap:.35rem;flex:0 0 auto;padding:.55rem .72rem;border:0;border-radius:.65rem;background:transparent;color:var(--muted);font:inherit;font-size:.66rem;font-weight:800;cursor:pointer;transition:background .18s,color .18s,transform .18s}.info-tab svg{width:.85rem}.info-tab.is-active{background:var(--brand);color:var(--brand-contrast);box-shadow:0 6px 14px color-mix(in srgb,var(--brand) 25%,transparent)}.info-tab:active{transform:scale(.97)}
.info-panels{margin:0 1rem}.info-panel{padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface);box-shadow:0 10px 28px rgba(31,63,95,.06);animation:infoIn .22s ease}.info-panel[hidden]{display:none}.info-panel>header{padding-bottom:.85rem;border-bottom:1px solid var(--line)}.info-panel>header small,.info-about-brand small{color:var(--brand)}.info-panel>header h2{margin:.2rem 0 0;font-size:1.05rem}@keyframes infoIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.info-about-brand{display:flex;align-items:center;gap:.75rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}.info-brand-mark{width:3.25rem;height:3.25rem;display:grid;place-items:center;flex:0 0 auto;border-radius:.9rem;background:linear-gradient(135deg,var(--brand),var(--accent));color:var(--brand-contrast);font-size:.95rem;font-weight:900}.info-about-brand h2{margin:.12rem 0;font-size:1.15rem}.info-about-brand p{margin:0;color:var(--muted);font-size:.67rem}.info-trust{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}.info-rich{padding:.9rem 0 0;color:var(--ink-2);font-size:.76rem;line-height:1.72}.info-rich>:first-child{margin-top:0}.info-rich img{max-width:100%;height:auto;border-radius:.75rem}.info-rich table{display:block;max-width:100%;overflow-x:auto}.info-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.9rem}.info-contact-grid>div{min-width:0;padding:.7rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface-2)}.info-contact-grid svg{width:.9rem;color:var(--brand)}.info-contact-grid span,.info-contact-grid b{display:block;margin-top:.15rem;font-size:.62rem}.info-contact-grid span{color:var(--muted)}.info-contact-grid b{overflow:hidden;text-overflow:ellipsis}.info-legal-note{margin:.9rem 0 0;text-align:center;color:var(--muted);font-size:.62rem}
.info-empty{display:grid;place-items:center;padding:2.3rem 1rem;text-align:center}.info-empty svg{width:1.8rem;color:var(--brand)}.info-empty b{margin-top:.6rem;font-size:.8rem}.info-empty p{max-width:22rem;margin:.3rem 0 0;color:var(--muted);font-size:.68rem;line-height:1.55}.info-article-grid{display:grid;gap:.6rem;margin-top:.9rem}.info-article{display:block;padding:.85rem;border:1px solid var(--line);border-radius:.8rem;color:var(--ink);text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}.info-article:active{transform:scale(.985)}.info-article>span{color:var(--brand);font-size:.56rem;font-weight:900;letter-spacing:.08em}.info-article h3{margin:.3rem 0 0;font-size:.82rem;line-height:1.35}.info-article p{margin:.35rem 0 0;color:var(--muted);font-size:.67rem;line-height:1.5}.info-article small,.info-view-all{display:flex;align-items:center;gap:.3rem;margin-top:.55rem;color:var(--brand);font-size:.62rem;font-weight:800}.info-article small svg,.info-view-all svg{width:.75rem}.info-view-all{justify-content:center;padding:.75rem;text-decoration:none}@media(min-width:720px){.info-article-grid{grid-template-columns:repeat(2,1fr)}.info-panel{padding:1.25rem}}
/* Search discovery content: intentionally calm and secondary to the game lobby. */
.seo-discovery{margin:1rem;padding:1rem;border:1px solid var(--line,#dbe4ee);border-radius:1rem;background:color-mix(in srgb,var(--surface,#fff) 92%,var(--brand));box-shadow:0 10px 28px rgba(31,63,95,.07);color:var(--ink,#182433)}
.seo-discovery h2{margin:0;font-size:1rem;line-height:1.3}.seo-story>p{margin:.55rem 0;color:var(--muted);font-size:.78rem;line-height:1.65}.seo-story details{margin-top:.65rem}.seo-discovery summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;list-style:none;cursor:pointer;font-size:.8rem;font-weight:800}.seo-discovery summary::-webkit-details-marker{display:none}.seo-discovery details summary span{transition:transform .2s ease}.seo-discovery details[open] summary span{transform:rotate(45deg)}.seo-story-body{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line,#e2e8f0);color:var(--muted);font-size:.75rem;line-height:1.72}.seo-faq{display:grid;gap:.55rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line,#e2e8f0)}.seo-faq-heading span{display:block;margin-bottom:.25rem;color:var(--brand);font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.seo-faq details{padding:.75rem .8rem;border:1px solid var(--line,#e2e8f0);border-radius:.75rem;background:var(--surface,#fff)}.seo-faq details p{margin:.65rem 0 0;padding-top:.65rem;border-top:1px solid var(--line,#e2e8f0);color:var(--muted);font-size:.75rem;line-height:1.65}

/* VIP privilege center */
.vip-page{padding-bottom:5.5rem;color:var(--ink)}.vip-title{display:flex;align-items:center;gap:.65rem;padding:1rem}.vip-title button{width:2.2rem;height:2.2rem;display:grid;place-items:center;border:0;border-radius:.7rem;background:var(--surface);color:var(--ink)}.vip-title button svg{width:1.2rem}.vip-title small,.vip-section-head small,.vip-member-top small,.vip-hero small{display:block;color:var(--brand);font-size:.61rem;font-weight:900;letter-spacing:.1em}.vip-title h1,.vip-section-head h2{margin:.12rem 0 0;font-size:1.18rem}.vip-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 1rem 1rem;padding:1.25rem;border-radius:1.1rem;overflow:hidden;background:linear-gradient(135deg,#092f25,#18503b);color:#fff;box-shadow:0 16px 32px rgba(8,47,36,.18)}.vip-hero:after{content:"";position:absolute;width:9rem;height:9rem;right:-3rem;border:1px solid rgba(199,255,45,.27);border-radius:50%}.vip-hero small{color:#c7ff2d}.vip-hero h2{margin:.35rem 0;font-size:1.45rem}.vip-hero p{max-width:20rem;margin:0;color:#c6d8d1;font-size:.75rem;line-height:1.55}.vip-hero>svg{width:3rem;height:3rem;color:#c7ff2d;z-index:1}.vip-member-card,.vip-section,.vip-guest{margin:0 1rem 1rem;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface);box-shadow:0 10px 26px rgba(31,63,95,.06)}.vip-member-top{display:flex;align-items:center;gap:.75rem}.vip-member-top>span{width:3.2rem;height:3.2rem;display:grid;place-items:center;border-radius:.9rem;background:linear-gradient(135deg,#d7ff63,#a5e918);font-size:1.65rem}.vip-member-top h2{margin:.15rem 0;font-size:1.18rem}.vip-member-top p{margin:0;color:var(--muted);font-size:.7rem}.vip-progress-head{display:flex;align-items:baseline;gap:.35rem;margin-top:1rem}.vip-progress-head b{font-size:1.05rem}.vip-progress-head span{color:var(--muted);font-size:.68rem}.vip-progress{height:.48rem;margin-top:.45rem;border-radius:99px;background:var(--surface-2);overflow:hidden}.vip-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .5s ease}.vip-progress-metrics,.vip-threshold{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.85rem}.vip-progress-metrics>div,.vip-threshold div{padding:.7rem;border:1px solid var(--line);border-radius:.75rem}.vip-progress-metrics span,.vip-progress-metrics small,.vip-threshold span{display:block;color:var(--muted);font-size:.61rem}.vip-progress-metrics b,.vip-threshold b{display:block;margin:.2rem 0;font-size:.7rem}.vip-section-head{margin-bottom:.8rem}.vip-reward-grid,.vip-tier-grid{display:grid;gap:.65rem}.vip-reward{display:flex;align-items:center;gap:.7rem;padding:.7rem;border:1px solid var(--line);border-radius:.8rem}.vip-reward>span{width:2.15rem;height:2.15rem;display:grid;place-items:center;border-radius:.65rem;background:var(--surface-2);color:var(--brand)}.vip-reward svg{width:1rem}.vip-reward div{flex:1}.vip-reward b,.vip-reward strong{display:block;font-size:.7rem}.vip-reward strong{margin-top:.15rem;color:var(--brand)}.vip-reward button,.vip-guest button{padding:.5rem .7rem;border:0;border-radius:.6rem;background:var(--brand);color:var(--brand-contrast);font-size:.66rem;font-weight:800}.vip-reward button:disabled{background:var(--surface-2);color:var(--muted)}.vip-tier{position:relative;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface)}.vip-tier.is-current{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent)}.vip-tier>em{position:absolute;right:.7rem;top:.7rem;padding:.25rem .45rem;border-radius:99px;background:var(--brand);color:var(--brand-contrast);font-size:.55rem;font-style:normal;font-weight:900}.vip-tier header{display:flex;align-items:center;gap:.65rem}.vip-tier header>span{font-size:1.75rem}.vip-tier header small{color:var(--muted);font-size:.58rem}.vip-tier h3{margin:.1rem 0;font-size:1rem}.vip-benefit-pills{display:flex;gap:.4rem;margin-top:.65rem}.vip-benefit-pills span{padding:.35rem .5rem;border-radius:99px;background:var(--surface-2);font-size:.61rem}.vip-tier ul{display:grid;gap:.35rem;margin:.75rem 0;padding:0;list-style:none}.vip-tier li{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.67rem}.vip-tier li svg{width:.8rem;color:var(--brand)}.vip-tier footer{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;padding-top:.7rem;border-top:1px solid var(--line)}.vip-tier footer span,.vip-tier footer b{display:block;text-align:center;font-size:.58rem}.vip-tier footer span{color:var(--muted)}.vip-tier footer b{margin-top:.15rem;color:var(--ink)}.vip-guest{display:flex;align-items:center;gap:.75rem}.vip-guest>svg{width:1.6rem;color:var(--brand)}.vip-guest div{flex:1}.vip-guest h2{margin:0;font-size:.82rem}.vip-guest p{margin:.25rem 0 0;color:var(--muted);font-size:.65rem;line-height:1.45}.vip-empty{text-align:center;color:var(--muted);font-size:.75rem;padding:1rem}@media(min-width:720px){.vip-tier-grid{grid-template-columns:repeat(2,1fr)}}