/* ============================================================
   GWEALTH USDT — UI (Credify-style dashboard)
   ============================================================ */
:root{
  --bg:#f3f6fb; --panel:#ffffff; --panel2:#f5f7fc; --line:#e0e7f1;
  --blue:#2456c7; --blue2:#173d91; --blue-soft:#e9effb;
  --green:#14866f; --green-soft:#e5f4ef; --gold:#c78324; --violet:#695bb0;
  --red:#cf4f59; --text:#172033; --muted:#68758a; --error:#c94650;
  --wordmark-gradient:linear-gradient(180deg,#ffffff 0%,#5478a9 24%,#204a84 48%,#f0f5fc 62%,#18375f 100%);
  --wordmark-glow:0 0 8px rgba(36,86,199,.12);
  --shadow:0 8px 24px rgba(28,48,91,.08); --shadow-sm:0 2px 10px rgba(28,48,91,.055);
  --radius:18px; --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
html[data-theme="dark"]{
  --bg:#030d2c; --panel:#071b4d; --panel2:#0a245e; --line:#164a91;
  --blue:#39c8ff; --blue2:#087dff; --blue-soft:#0d3479;
  --green:#06d19a; --green-soft:#0b3d51; --gold:#42d9ff; --violet:#82adff;
  --red:#f28b9c; --text:#f2f8ff; --muted:#9eb9e6; --error:#ff9aa8;
  --wordmark-gradient:linear-gradient(180deg,#ffffff 0%,#a8eaff 28%,#36bfff 52%,#eefaff 70%,#4097ff 100%);
  --wordmark-glow:0 0 14px rgba(21,174,255,.4);
  --shadow:0 10px 30px rgba(0,4,25,.48); --shadow-sm:0 4px 16px rgba(0,5,32,.38);
  --topbar:rgba(3,13,44,.94); --nav:#04143e; --glow:rgba(20,171,255,.25);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html.account-data-loading body>*{visibility:hidden!important}
html.account-data-loading body::before{
  content:"Loading your account...";
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  padding-top:64px;background:var(--bg);color:var(--muted);font-size:14px;font-weight:600;
  visibility:visible;
}
html.account-data-loading body::after{
  content:"";position:fixed;z-index:100000;top:calc(50% - 32px);left:calc(50% - 17px);
  width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--blue);
  border-radius:50%;animation:accountDataSpin .75s linear infinite;visibility:visible;
}
@keyframes accountDataSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html.account-data-loading body::after{animation:none}}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  min-height:100vh;padding-bottom:40px;line-height:1.5;
  -webkit-font-smoothing:antialiased;transition:background .3s,color .3s;
}
a{color:inherit;text-decoration:none}
button{font-family:var(--font)}
::selection{background:var(--blue);color:#fff}
.account-loading{
  color:transparent!important;background:linear-gradient(100deg,var(--panel2) 25%,var(--line) 45%,var(--panel2) 65%)!important;
  background-size:220% 100%;border-radius:5px;animation:accountLoading 1.3s ease-in-out infinite;
}
#username.account-loading{display:inline-block;min-width:4.5em}
#profileName.account-loading{display:inline-block;min-width:8em}
#profileId.account-loading{display:inline-block;min-width:9em}
#profileAvatar.account-loading,#drawerAvatar.account-loading{color:transparent!important}
#profileAvatar.account-loading,.avatar.account-loading{border-radius:50%}
.account-grid dd.account-loading{display:block;width:min(100%,180px);min-height:1em}
.account-loading-input{color:transparent!important;background:linear-gradient(100deg,var(--panel2) 25%,var(--line) 45%,var(--panel2) 65%)!important;background-size:220% 100%!important;animation:accountLoading 1.3s ease-in-out infinite}
@keyframes accountLoading{to{background-position-x:-220%}}
@media(prefers-reduced-motion:reduce){.account-loading,.account-loading-input{animation:none;background:var(--panel2)!important}}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:background .3s,border-color .3s;
}
.icon-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);cursor:pointer;font-size:16px;
  display:grid;place-items:center;transition:border-color .2s,color .2s;flex:none;
}
.icon-btn:hover{border-color:var(--blue);color:var(--blue)}
.support-shortcut{text-decoration:none}
.support-shortcut svg,.mail-shortcut svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mail-shortcut{position:relative;text-decoration:none}
.mail-badge:not([hidden]){position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border:2px solid var(--bg);border-radius:999px;background:var(--red);color:#fff;font:700 10px/14px var(--font);text-align:center}
.brand{font-weight:800;letter-spacing:2px;font-size:14px;color:var(--blue)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.top-actions #authLink{font-size:12px;color:var(--muted);white-space:nowrap}
.top-actions #authLink[hidden]{display:none}
.bell{position:relative}
.bell .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--panel)}

/* ---------- Page ---------- */
.page{max-width:520px;margin:0 auto;padding:18px 16px 30px;display:flex;flex-direction:column;gap:14px}
.page-title{font-size:24px;font-weight:800}
.page-sub{font-size:13px;color:var(--muted);margin-top:-8px}

/* ---------- Hero portfolio card ---------- */
.hero{
  position:relative;overflow:hidden;border-radius:22px;padding:20px;
  background:linear-gradient(132deg,#2459c8 0%,#1948a8 56%,#123879 100%);
  color:#fff;box-shadow:0 12px 28px rgba(27,68,151,.2);
}
.hero::before{content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.12);border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.1),transparent 30%,transparent 72%,rgba(255,255,255,.035));pointer-events:none}
.hero::after{content:"";position:absolute;top:-34%;right:17%;width:2px;height:168%;transform:rotate(27deg);background:linear-gradient(transparent,rgba(255,255,255,.36) 28%,rgba(255,255,255,.12) 72%,transparent);box-shadow:0 0 8px rgba(255,255,255,.12);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.2px;opacity:.85}
.hero-mid{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 10px}
.hero-amount{display:flex;align-items:baseline;gap:8px;font-weight:800}
.hero-amount .num{font-size:38px;letter-spacing:-.5px}
.hero-amount .cur{font-size:15px;opacity:.85;font-weight:700}
.ring-wrap{position:relative;width:86px;height:86px;flex:none}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-wrap .ring-bg{fill:none;stroke:rgba(255,255,255,.18);stroke-width:7}
.ring-wrap .ring-fg{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.ring-wrap .ring-txt{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:800}
.roi{display:inline-flex;align-items:center;gap:6px;background:#18a887;color:#fff;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;margin-bottom:12px}
.hero-pill{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:10px 14px;font-size:13px;
}
.hero-cols{display:flex;gap:10px;margin:12px 0 16px}
.hero-col{flex:1}
.hero-col .k{font-size:9.5px;font-weight:700;letter-spacing:1px;opacity:.7}
.hero-col .v{font-size:15px;font-weight:800;margin-top:2px}
.hero-btns{display:flex;gap:10px}
.btn-dep{
  flex:1;background:#fff;color:#173d91;border:none;border-radius:12px;
  padding:13px;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);transition:transform .15s;
}
.btn-wit{
  flex:1;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:12px;padding:13px;font-size:14px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s;
}
.btn-dep:hover{transform:translateY(-1px)} .btn-wit:hover{background:rgba(255,255,255,.22)}

/* ---------- Cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);transition:background .3s,border-color .3s}
.card-title{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--muted);margin-bottom:14px}
.ct-ic{width:26px;height:26px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:13px;flex:none}
.card p.txt{font-size:13px;color:var(--muted)}
.big-num{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:2px 0 4px}
.big-num small{font-size:13px;color:var(--muted);font-weight:600}
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border:1px solid var(--line);border-radius:13px;padding:12px 14px;background:var(--panel)}
.tile .k{font-size:10px;font-weight:800;letter-spacing:.8px}
.tile .v{font-size:19px;font-weight:800;margin-top:3px}
.k-green{color:var(--green)} .k-blue{color:var(--blue)} .k-violet{color:var(--violet)} .k-gold{color:var(--gold)}
.row-flex{display:flex;align-items:center;justify-content:space-between;gap:10px}
.link-all{font-size:12px;font-weight:700;color:var(--blue)}
.muted{color:var(--muted)}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:18px 0}

/* ---------- Buttons / forms ---------- */
.btn{
  width:100%;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border:none;
  border-radius:12px;padding:14px;font-size:14.5px;font-weight:800;cursor:pointer;
  box-shadow:0 8px 20px rgba(43,91,247,.3);transition:transform .15s,box-shadow .2s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(43,91,247,.4)}
.btn:active{transform:translateY(0)}
.btn.white{background:var(--panel);color:var(--blue);border:1px solid var(--line);box-shadow:none}
.btn.soft{background:var(--blue-soft);color:var(--blue);box-shadow:none}
.btn.sm{width:auto;padding:9px 16px;font-size:13px;border-radius:10px}
label{display:block;font-size:11px;font-weight:800;letter-spacing:1px;color:var(--muted);margin:16px 0 7px;text-transform:uppercase}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:13px 14px;font-size:14px;font-family:var(--font);outline:none;transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chips button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:11px;padding:12px 4px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.chips button.on{border-color:var(--blue);color:var(--blue);background:var(--blue-soft);font-weight:800}
.hint{font-size:12px;color:var(--muted);margin:8px 0 2px;line-height:1.5}
.addr-box{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
.addr{flex:1;font-family:Consolas,"Roboto Mono",monospace;font-size:12.5px;word-break:break-all;color:var(--blue);font-weight:600}
.mini-btn{background:var(--panel);border:1px solid var(--blue);color:var(--blue);border-radius:9px;padding:7px 13px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;color:var(--muted);font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--panel);color:var(--blue);box-shadow:var(--shadow-sm)}

/* ---------- Tx list ---------- */
.tx{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tx:last-child{border-bottom:none}
.tx-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:15px;flex:none}
.tx-in{background:var(--green-soft);color:var(--green)}
.tx-out{background:#fdeaea;color:var(--red)}
.tx-pending{background:var(--panel2);color:var(--muted)}
.tx-body{flex:1}.tx-body .t{font-size:13.5px;font-weight:700}.tx-body .s{font-size:11px;color:var(--muted)}
.tx-amt{font-size:14px;font-weight:800}.tx-amt.plus{color:var(--green)}.tx-amt.minus{color:var(--red)}.tx-amt.neutral{max-width:150px;color:var(--muted);font-size:11px;text-align:right}

/* ---------- Steps ---------- */
.step{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.step:last-child{border-bottom:none}
.step-ic{width:38px;height:38px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:16px;flex:none}
.step .t{font-size:13.5px;font-weight:800}.step .s{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- Tariff plans ---------- */
.plan{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--panel);display:flex;flex-direction:column;gap:12px}
.plan .pname{font-size:15px;font-weight:800;letter-spacing:2px}
.plan .pmin{font-size:12px;color:var(--muted)}
.plan .pgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.plan .pg{border:1px solid var(--line);border-radius:11px;padding:9px 10px}
.plan .pg .k{font-size:9px;font-weight:800;letter-spacing:.6px;color:var(--muted)}
.plan .pg .v{font-size:13.5px;font-weight:800;margin-top:2px}

/* ---------- Referral rank card ---------- */
.rankcard{position:relative;overflow:hidden;border-radius:20px;padding:20px;color:#fff;background:linear-gradient(135deg,#3471d6,#2456c7 60%,#173d91);box-shadow:0 12px 28px rgba(27,68,151,.2)}
.rankcard::after{content:"";position:absolute;bottom:-80px;right:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.rank-row{display:flex;align-items:center;gap:14px}
.rank-ic{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:24px;flex:none}
.rankcard .k{font-size:10px;font-weight:700;letter-spacing:1.4px;opacity:.8}
.rankcard .v{font-size:22px;font-weight:800}
.rank-pv{margin-top:14px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:12px 14px}

/* ---------- Drawer ---------- */
.drawer-mask{position:fixed;inset:0;z-index:60;background:rgba(10,16,38,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:70;width:min(82vw,320px);background:var(--panel);display:flex;flex-direction:column;transform:translateX(calc(-100% - 40px));transition:transform .28s cubic-bezier(.32,.72,.24,1);box-shadow:var(--shadow)}
body.drawer-open .drawer{transform:translateX(0)}
body.drawer-open .drawer-mask{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.drawer-head .brand{font-size:15px}
.drawer-nav{padding:12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.drawer-nav a{display:flex;align-items:center;gap:13px;padding:12px 13px;border-radius:12px;font-size:14px;font-weight:600;color:var(--text);transition:background .15s}
.drawer-nav a svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drawer-nav a:hover{background:var(--panel2)}
.drawer-nav a.on{background:var(--blue-soft);color:var(--blue);font-weight:800}
.drawer-foot{margin-top:auto;border-top:1px solid var(--line);padding:12px}
.drawer-user{display:flex;align-items:center;gap:11px;padding:12px 13px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.drawer-user .n{font-size:13.5px;font-weight:800}.drawer-user .e{font-size:11px;color:var(--muted)}
.foot-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;border:none;background:transparent;color:var(--text);font-size:14px;font-weight:600;border-radius:12px;cursor:pointer;text-align:left}
.foot-row:hover{background:var(--panel2)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#131a2c;color:#fff;font-size:13px;font-weight:600;border-radius:999px;
  padding:11px 20px;opacity:0;visibility:hidden;transition:all .25s;z-index:100;
  max-width:88vw;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.back-link{font-size:12.5px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:4px}
iframe.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate,div.skiptranslate>iframe.skiptranslate{display:none!important;pointer-events:none!important}
#goog-gt-tt,.VIpgJd-ZVi9od-aZ2wEe{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;height:0!important;width:0!important;overflow:hidden!important}
body{top:0!important}
@media(max-width:420px){.hero-amount .num{font-size:32px}}

/* Sports page components using the shared source interface */
.brand-wordmark{font-weight:800;letter-spacing:4px;font-size:20px;color:var(--blue);background:var(--wordmark-gradient);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:var(--wordmark-glow);white-space:nowrap;line-height:1.2}
.ver{font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.5px;white-space:nowrap}
.topbar .user{color:var(--muted)}
.topbar .user a{color:var(--blue)}
.topbar .icon-btn{background:var(--panel);border-color:var(--line);color:var(--text)}
.drawer-head .brand-wordmark{color:var(--blue);background:none;-webkit-text-fill-color:currentColor;text-shadow:none;letter-spacing:1.8px}
.top-actions .user{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.top-actions .theme-toggle{font-size:16px}
.balance-card{position:relative;overflow:hidden;border:0;border-radius:22px;padding:20px;background:linear-gradient(135deg,#3d6bff 0%,#2748d8 55%,#1d36b8 100%);color:#fff;box-shadow:0 14px 34px rgba(43,91,247,.28)}
.balance-card::after{content:"";position:absolute;top:-70px;right:-60px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.balance-card .bal-label,.balance-card .refresh{color:rgba(255,255,255,.86)}
.balance-card .refresh{position:relative;z-index:1}
.balance-card .bal-value{color:#fff}
.portfolio-hero{padding:24px;border-radius:22px;background:linear-gradient(132deg,#2459c8 0%,#1948a8 56%,#123879 100%);box-shadow:0 12px 28px rgba(27,68,151,.2)}
.portfolio-icon{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;flex:none}
.portfolio-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portfolio-hero .hero-label{gap:10px;font-size:12px;letter-spacing:1.3px}
.portfolio-hero .hero-amount{margin-top:20px}
.portfolio-hero .hero-amount .num{font-size:40px;letter-spacing:0}
.portfolio-hero .roi{padding:5px 12px;background:#168b78}
.portfolio-hero .roi svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.portfolio-hero .hero-pill{margin-top:8px}
.portfolio-hero .deposit-label{display:flex;align-items:center;gap:9px}
.portfolio-hero .deposit-label svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.portfolio-stats{border-top:1px solid rgba(255,255,255,.2);padding-top:16px}
.portfolio-stats .hero-col+.hero-col{border-left:1px solid rgba(255,255,255,.2);padding-left:16px}
.portfolio-hero .btn-dep,.portfolio-hero .btn-wit{min-height:54px}
.portfolio-hero .btn-dep svg,.portfolio-hero .btn-wit svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
html[data-theme="dark"] .topbar{background:var(--topbar);border-bottom-color:var(--line)}
html[data-theme="dark"] .portfolio-hero{background:linear-gradient(132deg,#075acb 0%,#093b91 54%,#061c50 100%);box-shadow:0 12px 30px rgba(0,93,255,.28),0 0 24px rgba(0,182,255,.17)}
html[data-theme="dark"] .portfolio-hero .btn-dep{background:linear-gradient(110deg,#087bff,#06c9f5);color:#f5fbff;box-shadow:0 5px 18px rgba(0,176,255,.4)}
html[data-theme="dark"] .portfolio-hero .btn-wit{background:rgba(3,18,58,.4);border-color:rgba(58,194,255,.72);box-shadow:inset 0 0 16px rgba(0,145,255,.1),0 0 14px rgba(0,145,255,.16)}
html[data-theme="dark"] .slide:nth-child(1){background:linear-gradient(120deg,#075acb,#061b50)}
html[data-theme="dark"] .slide:nth-child(2){background:linear-gradient(120deg,#075acb,#061b50)}
html[data-theme="dark"] .slide:nth-child(3){background:linear-gradient(120deg,#0b4ca7,#101e63)}
.match-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.match-card-link{display:block;color:inherit;text-decoration:none}
.match-card-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.match-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.match-card .league,.match-card .odds span{color:var(--blue)}
.match-card .odds span{background:var(--blue-soft);border-color:transparent;border-radius:9px;font-weight:700}
.match-card .vs{color:var(--red)}
.card-versus-mark{position:relative;display:flex;flex:0 0 42px;align-items:center;justify-content:center;height:38px;isolation:isolate}
.card-versus-mark::after{position:absolute;z-index:1;top:5px;bottom:5px;left:50%;width:2px;content:"";background:linear-gradient(180deg,var(--green),var(--gold));transform:rotate(22deg)}
.card-versus-mark span{font-size:21px;font-style:italic;font-weight:1000;line-height:1;text-shadow:0 1px 0 var(--panel)}
.card-versus-mark .versus-v{color:var(--green);transform:translate(-2px,-1px) skew(-8deg)}
.card-versus-mark .versus-s{color:var(--gold);transform:translate(1px,1px) skew(-8deg)}
.match-open{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--blue);font-size:12px;font-weight:800}
.match-open span{font-size:18px;line-height:1}
.bottom-nav{display:none}
.language-control:empty{display:none}
.language-control .language-picker{width:auto;max-width:30vw;min-width:92px;margin:0;padding:7px 9px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:600 11px var(--font);outline:none;cursor:pointer}
.language-control .language-picker:focus{border-color:var(--blue)}
.translate-engine{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.language-control .goog-te-gadget{display:flex;align-items:center;gap:5px;color:var(--muted)!important;font:500 9px/1.2 var(--font)!important;white-space:nowrap}
.language-control .goog-te-gadget{font-size:0!important;line-height:0!important}
.language-control .goog-logo-link,.language-control .goog-te-gadget>span{display:none!important}
.language-control select.goog-te-combo{max-width:28vw;min-width:92px;margin:0!important;padding:7px 9px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:600 11px var(--font);outline:none;cursor:pointer}
.language-control select.goog-te-combo:focus{border-color:var(--blue)}
@media(max-width:600px){
  .topbar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .topbar>.brand{flex:1;min-width:0;gap:7px;letter-spacing:0;font-size:12px}
  .topbar>.brand .brand-wordmark{font-size:15px;letter-spacing:1.5px}
  .topbar>.brand .ver{font-size:8px}
  .topbar>.menu-btn{order:-1}
  .top-actions{flex:0 0 100%;width:100%;margin-left:0;justify-content:flex-start;gap:8px;flex-wrap:nowrap}
  .top-actions .user{flex:1;min-width:0;gap:6px;flex-wrap:wrap}
  .language-control{order:1;flex:0 0 auto;width:auto;max-width:none;display:flex;justify-content:flex-end;min-width:0;margin-left:auto}
  .language-control .language-picker{max-width:32vw;min-width:104px;padding:6px 8px}
  .language-control .goog-te-gadget{width:auto;max-width:100%;flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap!important}
  .language-control select.goog-te-combo{max-width:32vw;min-width:104px;padding:6px 8px}
  .page{padding:14px 12px 24px}
  .balance-card{padding:18px}
  .portfolio-hero{padding:19px}
  .portfolio-hero .hero-amount .num{font-size:34px}
  .portfolio-stats .hero-col+.hero-col{padding-left:10px}
  .quick{gap:7px}
  .quick a{padding:12px 3px;font-size:10px}
  .quick .qi{font-size:20px}
  .match-card{padding:14px}
}

@media(max-width:767px){
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
}

html[data-theme="dark"] body{
  background:radial-gradient(ellipse at 50% -18%,rgba(0,126,255,.22),transparent 48%),
    radial-gradient(ellipse at 100% 28%,rgba(0,190,255,.08),transparent 42%),var(--bg);
}
html[data-theme="dark"] .topbar{
  background:rgba(3,13,44,.96);
  border-bottom-color:rgba(50,155,255,.34);
  box-shadow:0 5px 24px rgba(0,0,20,.28);
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .match-card,
html[data-theme="dark"] .plan,
html[data-theme="dark"] .tier,
html[data-theme="dark"] .admin-nav,
html[data-theme="dark"] .auth-panel{
  border-color:rgba(45,135,235,.38);
  box-shadow:0 8px 26px rgba(0,3,24,.34),0 0 18px rgba(0,128,255,.1);
}
html[data-theme="dark"] .balance-card{
  background:linear-gradient(135deg,#0875e9 0%,#0647b6 56%,#071c58 100%);
  box-shadow:0 12px 32px rgba(0,99,255,.3),0 0 22px rgba(0,189,255,.16);
}
html[data-theme="dark"] .portfolio-hero{
  border:1px solid rgba(52,174,255,.62);
  box-shadow:0 12px 30px rgba(0,93,255,.28),0 0 24px rgba(0,182,255,.17);
}
html[data-theme="dark"] .portfolio-icon,
html[data-theme="dark"] .rank-ic,
html[data-theme="dark"] .ct-ic,
html[data-theme="dark"] .step-ic{
  box-shadow:0 0 16px rgba(20,174,255,.24);
}
html[data-theme="dark"] .carousel{
  border:1px solid rgba(58,194,255,.68);
  box-shadow:0 0 20px rgba(0,158,255,.24);
}
html[data-theme="dark"] .dots button.on{
  background:var(--blue);
  box-shadow:0 0 10px var(--blue);
}
html[data-theme="dark"] .btn{
  background:linear-gradient(110deg,#087bff,#06c9f5);
  color:#f5fbff;
  box-shadow:0 7px 20px rgba(0,145,255,.32);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  border-color:rgba(45,135,235,.38);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(38,175,255,.18),0 0 14px rgba(0,147,255,.14);
}
html[data-theme="dark"] .mail-badge:not([hidden]){
  background:var(--blue);
  box-shadow:0 0 10px rgba(40,190,255,.58);
}
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .theme-toggle{
  border-color:rgba(51,143,239,.52);
  box-shadow:inset 0 0 12px rgba(0,113,255,.1);
}
html[data-theme="dark"] .btn-wit{
  background:rgba(3,18,58,.4);
  border:1px solid rgba(58,194,255,.72);
  color:var(--text);
}