/* 888 LOTTO Player v3.10.69 — elegant red / premium gold theme */
:root {
  --bg: #090203 !important;
  --bg-2: #120407 !important;
  --surface: #18070b !important;
  --surface-2: #210a10 !important;
  --surface-3: #2b0d15 !important;
  --panel: #17070a !important;
  --panel-2: #210a10 !important;
  --card: #1b080d !important;
  --ink: #fff4dd !important;
  --text: #fff4dd !important;
  --muted: #c9aa7b !important;
  --line: rgba(231, 180, 64, .34) !important;
  --border: rgba(231, 180, 64, .34) !important;
  --gold: #e7b440 !important;
  --gold-2: #ffdb73 !important;
  --gold-soft: rgba(231,180,64,.16) !important;
  --accent: #8f1023 !important;
  --accent-2: #c32138 !important;
  --danger: #ff6d70 !important;
  --success: #49cf8b !important;
  --shadow: 0 16px 40px rgba(0,0,0,.38) !important;
}
html, body {
  background:
    radial-gradient(circle at 48% -12%, rgba(117,10,28,.52) 0, rgba(52,7,15,.32) 25%, rgba(18,4,7,.92) 48%, #090203 78%) fixed !important;
  color: var(--text) !important;
}
body::before { opacity: .13 !important; }
.app-shell, .app-main, .page-shell, .player-shell, main { background-color: transparent !important; }
header, .topbar, .app-header, .player-header, .mobile-header, .site-header {
  background: linear-gradient(180deg, rgba(35,7,13,.99), rgba(11,2,4,.98)) !important;
  border-color: rgba(231,180,64,.35) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.34) !important;
}
.card, .panel, .section-card, .modal-card, .wallet-modal, .game-card, .lobby-card,
.quick-action, .top-action, .toolbar, .notice, .hero-card, .result-card, .account-card,
[class*="card"], [class*="panel"] { border-color: rgba(231,180,64,.28) !important; }
.card, .panel, .section-card, .modal-card, .wallet-modal, .toolbar, .notice, .hero-card, .result-card, .account-card {
  background: linear-gradient(155deg, rgba(42,10,17,.97), rgba(15,3,6,.99)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 12px 28px rgba(0,0,0,.28) !important;
}
button, .button, .btn, a.button, [role="button"] { border-color: rgba(231,180,64,.36) !important; }
.btn-primary, .primary, button.primary, .button-primary, .active-tab, .tab.active,
.quick-action.active, .top-action.deposit, [data-action="deposit"] {
  background: linear-gradient(180deg, #ffd86b, #d29a21) !important;
  color: #1a0803 !important;
  border-color: #ffe291 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 8px 20px rgba(210,154,33,.2) !important;
}
.btn-secondary, .secondary, button.secondary, .button-secondary, .top-action.withdraw, [data-action="withdraw"] {
  background: linear-gradient(180deg, #a8172f, #6d0b1b) !important;
  color: #fff3d5 !important;
  border-color: rgba(255,219,115,.62) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(82,3,18,.28) !important;
}
input, select, textarea {
  background: #0e0305 !important;
  color: #fff4dd !important;
  border-color: rgba(231,180,64,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}
input:focus, select:focus, textarea:focus { border-color: #e7b440 !important; box-shadow: 0 0 0 3px rgba(231,180,64,.12) !important; }
::placeholder { color: #8f7357 !important; }
.nav-item.active, .sidebar a.active, .bottom-nav a.active, .category-tab.active {
  color: #ffdb73 !important;
  background: linear-gradient(180deg, rgba(151,15,38,.34), rgba(89,6,20,.18)) !important;
  border-color: rgba(231,180,64,.42) !important;
}
.wallet-pill, .wallet-summary, .system-wallet {
  background: linear-gradient(180deg, #2a0912, #140306) !important;
  border-color: rgba(231,180,64,.5) !important;
}
.wallet-pill strong, .system-wallet strong, .balance, .money, .amount { color: #fff0bb !important; }
.badge, .chip, .pill { background-color: rgba(145,16,37,.22) !important; border-color: rgba(231,180,64,.3) !important; }
hr, .divider { border-color: rgba(231,180,64,.2) !important; }
/* keep interaction smooth, with restrained motion */
*, *::before, *::after { animation-duration: .22s !important; transition-duration: .13s !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }