:root {
  --bg: #07070d;
  --panel: #121522;
  --panel-2: #1a1e30;
  --line: rgba(255,255,255,.13);
  --text: #f7f7fb;
  --muted: #a6a8b8;
  --hot: #f51d68;
  --hot-2: #ff4d8b;
  --gold: #f8b842;
  --green: #2ee58b;
  --cyan: #42d6ff;
  --danger: #ff4564;
  --shadow: 0 22px 70px rgba(0,0,0,.42);
  --radius: 8px;
  --glow: 0 0 30px rgba(245,29,104,.32);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background:
    radial-gradient(circle at 72% 8%, rgba(245,29,104,.2), transparent 30%),
    radial-gradient(circle at 12% 4%, rgba(66,214,255,.12), transparent 25%),
    var(--bg);
}
body.no-animations *, body.no-animations *::before, body.no-animations *::after {
  animation: none !important;
  transition: none !important;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 28px 22px;
  background: rgba(8,9,15,.78); border-right: 1px solid var(--line); backdrop-filter: blur(22px);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 24px; font-weight: 900; }
.brand-mark { color: var(--hot); font-size: 31px; text-shadow: var(--glow); }
.nav-label { margin: 34px 10px 12px; color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.side-nav, .drawer-nav { display: grid; gap: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text); text-align: left;
}
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.07); border-color: var(--line); color: #fff; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--hot); }
.nav-item .ico { width: 22px; text-align: center; color: var(--hot-2); }
.vip-mini { margin-top: 26px; padding: 18px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(245,29,104,.2), rgba(248,184,66,.16)); border: 1px solid var(--line); position: relative; overflow: hidden; }
.vip-mini .crown { float: right; font-size: 50px; color: var(--gold); filter: drop-shadow(0 0 18px rgba(248,184,66,.4)); }
.vip-mini small { display: block; margin: 6px 0 14px; color: var(--muted); }
.vip-mini button, .primary {
  border: 0; color: #fff; border-radius: var(--radius); padding: 12px 18px; font-weight: 800;
  background: linear-gradient(135deg, var(--hot), var(--hot-2)); box-shadow: var(--glow);
}
.main { min-width: 0; padding: 18px 30px 96px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0 22px; margin-bottom: 2px; background: linear-gradient(180deg, rgba(7,7,13,.98), rgba(7,7,13,.82) 74%, transparent); backdrop-filter: blur(12px); }
.tabs, .top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tab, .icon-btn, .balance-pill, .profile-chip, .ghost, .filter-btn {
  border: 1px solid var(--line); color: var(--text); background: rgba(24,28,43,.86); border-radius: var(--radius); min-height: 44px; padding: 0 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tab:hover, .icon-btn:hover, .balance-pill:hover, .profile-chip:hover, .ghost:hover, .filter-btn:hover { transform: translateY(-1px); border-color: rgba(255,77,139,.45); box-shadow: var(--glow); }
.tab.active, .tab:hover, .filter-btn.active { background: linear-gradient(135deg, var(--hot), var(--hot-2)); border-color: var(--hot); }
.balance-pill, .profile-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 850; }
.icon-btn { width: 44px; padding: 0; position: relative; }
.badge { position: absolute; top: -5px; right: -5px; background: var(--hot); border-radius: 999px; min-width: 18px; height: 18px; font-size: 11px; display: grid; place-items: center; }
.mobile-menu { display: none; }
.demo-strip { border: 1px solid rgba(245,29,104,.34); background: linear-gradient(90deg, rgba(245,29,104,.14), rgba(66,214,255,.07)); color: #ffe5ee; padding: 11px 14px; border-radius: var(--radius); margin: 0 0 22px; font-size: 13px; }
.page { display: none; animation: fadeUp .28s ease both; }
.page.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hero {
  min-height: 292px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.16); overflow: hidden; position: relative;
  background:
    radial-gradient(circle at 78% 42%, rgba(255,77,139,.34), transparent 24%),
    radial-gradient(circle at 62% 18%, rgba(66,214,255,.18), transparent 28%),
    linear-gradient(100deg, rgba(18,18,58,.98), rgba(55,12,72,.88) 58%, rgba(10,9,20,.98));
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(30px, 5vw, 52px);
  box-shadow: inset 0 0 80px rgba(245,29,104,.12), 0 26px 70px rgba(0,0,0,.28);
}
.hero-copy { position: relative; z-index: 2; max-width: 520px; }
.hero h1 { margin: 8px 0; font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: 0; text-shadow: 0 10px 30px rgba(0,0,0,.42); }
.hero p { margin: 0 0 20px; font-size: clamp(18px, 2.4vw, 27px); font-weight: 800; }
.hero small { color: #fff; text-transform: uppercase; font-weight: 800; }
.hero .primary { min-width: 150px; }
.hero::after { content: ""; position: absolute; inset: auto 31% 22px auto; width: 128px; height: 8px; background: linear-gradient(90deg,var(--hot),rgba(255,255,255,.45),rgba(255,255,255,.24)); border-radius: 999px; }
.hero-machine { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 18px; border-radius: 18px; border: 5px solid rgba(255,77,139,.8); background: linear-gradient(145deg, rgba(31,24,82,.98), rgba(10,8,22,.98)); box-shadow: var(--glow), inset 0 0 32px rgba(255,255,255,.08); transform: rotate(-2deg); }
.hero-machine span { width: clamp(58px, 8vw, 94px); aspect-ratio: .72; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(#fff, #ffd3e4); color: var(--hot); font-size: clamp(42px, 7vw, 76px); font-weight: 950; text-shadow: 0 3px 0 rgba(0,0,0,.16); }
.feature-row, .stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.feature, .stat, .card, .panel, .winner, .history-row {
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(28,32,49,.9), rgba(15,17,27,.92)); border-radius: var(--radius); box-shadow: 0 14px 42px rgba(0,0,0,.22);
}
.stat { padding: 14px; }
.soft { margin-bottom: 12px; background: rgba(255,255,255,.04); }
.result-box { margin-top: 14px; color: var(--muted); min-height: 48px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.14); }
.status-pill { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid rgba(46,229,139,.24); border-radius: 999px; padding: 0 10px; color: #b8ffd9; background: rgba(46,229,139,.1); font-size: 12px; font-weight: 850; }
.reward-wheel { width: min(280px, 72vw); aspect-ratio: 1; margin: 10px auto; display: grid; place-items: center; border-radius: 50%; border: 10px solid #25152a; background: conic-gradient(var(--hot), var(--gold), var(--cyan), var(--green), var(--hot)); font-size: 74px; box-shadow: var(--glow); }
.spin-wheel { animation: wheelSpin 1.25s cubic-bezier(.16,.72,.22,1) both; }
.coin { position: fixed; z-index: 130; pointer-events: none; color: var(--gold); font-size: 24px; font-weight: 950; animation: coinPop .9s ease forwards; text-shadow: 0 0 16px rgba(248,184,66,.5); }
@keyframes coinPop { to { transform: translateY(-90px) scale(.35) rotate(180deg); opacity: 0; } }
.feature { padding: 16px; display: flex; gap: 12px; align-items: center; transition: transform .18s ease, border-color .18s ease; }
.feature:hover { transform: translateY(-2px); border-color: rgba(66,214,255,.35); }
.feature span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); font-size: 23px; color: #fff; background: rgba(255,255,255,.09); text-shadow: 0 0 18px currentColor; }
.feature b, .feature small { display: block; }
.feature small, .muted, .history-row small { color: var(--muted); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 12px; }
.section-head h2, .panel h2 { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 16px; }
.card { overflow: hidden; color: var(--text); text-align: left; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.card:hover { transform: translateY(-6px); border-color: rgba(245,29,104,.62); box-shadow: var(--glow), 0 18px 44px rgba(0,0,0,.32); }
.game-card { padding: 0; }
.game-art { height: 146px; position: relative; display: grid; place-items: center; isolation: isolate; font-size: 52px; font-weight: 950; background: linear-gradient(135deg, rgba(245,29,104,.92), rgba(34,23,77,.95)); text-align: center; overflow: hidden; }
.game-art::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 22%), repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 15px); opacity: .75; z-index: -1; }
.game-art span { color: #fff; filter: drop-shadow(0 0 18px rgba(255,255,255,.35)); }
.game-art em { position: absolute; left: 10px; bottom: 10px; font-style: normal; font-size: 12px; font-weight: 900; color: #fff; background: rgba(0,0,0,.36); border: 1px solid rgba(255,255,255,.2); padding: 5px 8px; border-radius: 999px; }
.game-art.slots { background: linear-gradient(135deg, #ff2e73, #7030ff 62%, #24122f); }
.game-art.roulette { background: radial-gradient(circle at 50% 45%, #f8b842 0 8%, #b41428 9% 38%, #17141f 39% 68%, #0b8e51 69%); }
.game-art.crash { background: linear-gradient(135deg, #162c88, #f06423 66%, #ffcf4a); }
.game-art.blackjack { background: linear-gradient(135deg, #0c7a55, #11131b 66%); }
.game-art.mines { background: linear-gradient(135deg, #1d7c9c, #561a70 66%, #11131b); }
.game-art.sports { background: linear-gradient(135deg, #1c78d2, #128a61 60%, #11131b); }
.card-body { padding: 13px 14px 15px; background: rgba(255,255,255,.03); }
.card-body b, .card-body small { display: block; }
.card-body b { font-size: 15px; color: #fff; }
.card-body small { margin-top: 4px; color: #d3d6e7; }
.winners { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(16,18,28,.82); }
.ticker { display: flex; gap: 12px; padding: 12px; width: max-content; animation: ticker 26s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
.winner { min-width: 190px; padding: 12px; display: flex; justify-content: space-between; gap: 12px; }
.amount-win { color: var(--green); font-weight: 900; }
.jackpot { color: var(--hot-2); font-size: clamp(28px, 4vw, 44px); font-weight: 950; text-shadow: var(--glow); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 16px; }
.panel { padding: 18px; }
.controls { display: grid; gap: 12px; align-content: start; }
.field { display: grid; gap: 7px; }
.field label { color: var(--muted); font-size: 13px; }
input, select, textarea {
  width: 100%; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 44px; padding: 10px 12px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--hot-2); box-shadow: var(--glow); }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ghost { background: rgba(255,255,255,.05); }
.danger { background: rgba(255,69,100,.15); border-color: rgba(255,69,100,.35); color: #ffc7d0; }
.slot-machine { display: flex; gap: 10px; justify-content: center; padding: 32px 12px; background: radial-gradient(circle, rgba(245,29,104,.2), rgba(0,0,0,.1)); border-radius: var(--radius); border: 1px solid var(--line); }
.reel { width: min(84px, 18vw); aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius); background: #fff; color: #15121c; font-size: clamp(26px, 6vw, 50px); font-weight: 950; box-shadow: inset 0 -12px 28px rgba(0,0,0,.18); }
.reel.spin { animation: reelSpin .18s linear infinite; }
@keyframes reelSpin { 50% { transform: translateY(-8px) scale(.98); filter: blur(1px); } }
.roulette-wheel { margin: 20px auto; width: min(360px, 80vw); aspect-ratio: 1; border-radius: 50%; border: 12px solid #2b1019; background: conic-gradient(#111 0 10deg,#b41428 10deg 20deg,#111 20deg 30deg,#b41428 30deg 40deg,#111 40deg 50deg,#0b8e51 50deg 60deg,#b41428 60deg 70deg,#111 70deg 80deg,#b41428 80deg 90deg,#111 90deg 100deg,#b41428 100deg 110deg,#111 110deg 120deg,#b41428 120deg 130deg,#111 130deg 140deg,#b41428 140deg 150deg,#111 150deg 160deg,#b41428 160deg 170deg,#111 170deg 180deg,#b41428 180deg 190deg,#111 190deg 200deg,#b41428 200deg 210deg,#111 210deg 220deg,#b41428 220deg 230deg,#111 230deg 240deg,#b41428 240deg 250deg,#111 250deg 260deg,#b41428 260deg 270deg,#111 270deg 280deg,#b41428 280deg 290deg,#111 290deg 300deg,#b41428 300deg 310deg,#111 310deg 320deg,#b41428 320deg 330deg,#111 330deg 340deg,#b41428 340deg 350deg,#111 350deg 360deg); box-shadow: var(--glow); position: relative; display: grid; place-items: center; }
.roulette-wheel::before { content: "◆"; display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #e8d5ae; color: #3b1420; font-size: 42px; }
.roulette-wheel.spin { animation: wheelSpin 2.2s cubic-bezier(.16,.72,.22,1) both; }
@keyframes wheelSpin { to { transform: rotate(1440deg); } }
.cards { display: flex; gap: 10px; flex-wrap: wrap; min-height: 94px; }
.play-card { width: 64px; height: 88px; border-radius: 7px; display: grid; place-items: center; background: #f9f9f9; color: #131313; font-weight: 950; font-size: 26px; animation: deal .25s ease both; }
@keyframes deal { from { opacity: 0; transform: translateY(-16px) rotate(-5deg); } }
.crash-stage { min-height: 300px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(66,214,255,.08), rgba(245,29,104,.09)); }
.multiplier { position: absolute; inset: 28px 0 auto; text-align: center; font-size: clamp(46px, 9vw, 86px); font-weight: 950; }
.graph { position: absolute; inset: 0; width: 100%; height: 100%; }
.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 430px; margin: 18px auto; }
.mine-tile { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.08); color: #fff; font-size: 28px; }
.mine-tile.safe { background: rgba(46,229,139,.2); border-color: rgba(46,229,139,.55); }
.mine-tile.mine { background: rgba(255,69,100,.25); border-color: rgba(255,69,100,.7); }
.promo-grid, .sports-grid, .settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.promo { padding: 20px; background: linear-gradient(135deg, rgba(245,29,104,.2), rgba(66,214,255,.1)); position: relative; overflow: hidden; }
.promo::after { content: ""; position: absolute; inset: auto -20px -38px auto; width: 115px; height: 115px; border-radius: 50%; border: 18px solid rgba(255,255,255,.06); }
.promo-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); background: rgba(255,255,255,.1); color: #fff; font-size: 25px; }
.progress { height: 12px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg,var(--hot),var(--gold)); width: 0%; transition: width .5s ease; }
.history-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.history-list { display: grid; gap: 8px; }
.history-row { padding: 12px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.avatar-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.06); font-size: 24px; }
.avatar.active { border-color: var(--hot); background: rgba(245,29,104,.2); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; background: transparent; color: var(--text); border: 0; padding: 16px 0; text-align: left; font-weight: 850; }
.faq-a { display: none; color: var(--muted); padding-bottom: 16px; }
.faq-item.open .faq-a { display: block; }
.chat-box { height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: rgba(0,0,0,.16); display: grid; align-content: start; gap: 10px; }
.bubble { max-width: 82%; padding: 10px 12px; border-radius: var(--radius); background: rgba(255,255,255,.08); }
.bubble.me { margin-left: auto; background: rgba(245,29,104,.24); }
.popover { position: fixed; top: 78px; right: 30px; z-index: 75; width: min(360px, calc(100vw - 28px)); display: none; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(15,17,27,.98); box-shadow: var(--shadow); backdrop-filter: blur(18px); animation: modalIn .18s ease both; }
.popover.show { display: grid; gap: 10px; }
.popover h3 { margin: 0 0 4px; }
.notice { display: grid; gap: 3px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.05); }
.notice small, .profile-popover small, .profile-popover p { color: var(--muted); }
.profile-popover { width: 260px; }
.profile-popover button { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: rgba(255,255,255,.06); text-align: left; padding: 0 10px; }
.profile-head { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.profile-head > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); background: rgba(245,29,104,.18); font-size: 24px; }
.modal-backdrop { position: fixed; inset: 0; display: none; place-items: center; padding: 18px; background: rgba(0,0,0,.62); z-index: 80; backdrop-filter: blur(10px); }
.modal-backdrop.show { display: grid; }
.modal { width: min(460px, 100%); background: #11131d; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); animation: modalIn .22s ease both; position: relative; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); border-radius: var(--radius); }
.toast-host { position: fixed; right: 18px; bottom: 88px; z-index: 100; display: grid; gap: 10px; }
.toast { background: rgba(17,19,29,.96); border: 1px solid var(--line); border-left: 4px solid var(--hot); padding: 12px 14px; border-radius: var(--radius); box-shadow: var(--shadow); animation: toastIn .25s ease both; max-width: 320px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }
.confetti { pointer-events: none; position: fixed; inset: 0; z-index: 120; }
.mobile-nav { display: none; }
.drawer { display: none; }
footer { margin-top: 42px; color: #f2c7d6; text-align: center; border-top: 1px solid var(--line); padding: 22px; background: rgba(245,29,104,.06); border-radius: var(--radius); }
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .mobile-menu { display: inline-grid; place-items: center; }
  .main { padding: 12px 14px 98px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-row, .stats-row, .promo-grid, .sports-grid, .settings-grid, .game-layout { grid-template-columns: 1fr; }
  .profile-chip span:last-child, .tabs { display: none; }
  .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: 74px; display: grid; grid-template-columns: repeat(5,1fr); background: rgba(8,9,15,.94); border-top: 1px solid var(--line); backdrop-filter: blur(20px); }
  .mobile-nav .nav-item { border-radius: 0; justify-content: center; flex-direction: column; gap: 2px; font-size: 11px; min-height: 74px; padding: 4px; }
  .mobile-nav .nav-item .ico { font-size: 18px; }
  .drawer { display: block; position: fixed; z-index: 90; inset: 0 auto 0 0; width: min(320px, 86vw); transform: translateX(-105%); transition: transform .22s ease; padding: 26px 18px; background: #090a12; border-right: 1px solid var(--line); box-shadow: var(--shadow); }
  .drawer.show { transform: translateX(0); }
}
@media (max-width: 620px) {
  .topbar { align-items: start; padding-top: 8px; padding-bottom: 14px; }
  .top-actions { margin-left: auto; justify-content: end; }
  .primary { padding: 11px 12px; }
  .gift-btn, #notifyBtn { display: none; }
  .hero { min-height: 250px; align-items: start; padding: 24px; }
  .hero-machine { position: absolute; right: -18px; bottom: 20px; transform: rotate(-5deg) scale(.78); opacity: .72; }
  .hero-copy { max-width: 78%; }
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .game-art { height: 116px; font-size: 38px; }
  .history-row { grid-template-columns: 1fr; }
  .toast-host { left: 12px; right: 12px; bottom: 86px; }
  .popover { top: 70px; right: 14px; }
}