/* Quiet charcoal surfaces; existing game rails and card dimensions are preserved. */
:root {
    --c-dark-bg: #19191c;
    --c-dark-surface: #202123;
    --c-dark-card: #27282b;
    --c-dark-elevated: #303135;
    --c-silver: #f2f2f4;
    --c-silver-muted: #aaabb3;
    --c-silver-dim: #85868e;
    --c-slate-border: #34353b;
    --c-cream: #e9bf87;
    --c-cream-dark: #d8ab72;
    --c-cream-glow: transparent;
}
body { background: #19191c !important; color: #f2f2f4 !important; }
.ui-icon { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
header.top-header {
    margin-left: 0; width: 100%; min-height: 64px; padding: 10px 22px;
    display: grid; grid-template-columns: 178px minmax(0, 1fr) auto; gap: 20px;
    background: #19191c !important; border-bottom: 1px solid #26272a !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.header-left { min-width: 0; gap: 10px; }
.brand-logo-img { width: 116px; height: 34px; object-fit: contain; filter: none; }
.top-nav-tabs { display: flex; justify-self: start; gap: 4px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.top-tab-item {
    min-height: 40px; padding: 9px 12px !important; gap: 7px; border: 0 !important;
    border-radius: 8px !important; background: transparent !important; color: #aaabb3 !important;
    font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important;
}
.top-tab-item.active, .top-tab-item:hover, .top-tab-item.active:hover { background: #292a2e !important; color: #fff !important; box-shadow: none !important; }
.header-right { gap: 8px; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
.btn-header-login, .btn-header-register {
    min-height: 40px; padding: 10px 18px !important; border-radius: 24px !important;
    font-size: 13px !important; font-weight: 600 !important; border: 1px solid #3a3b41 !important;
    background: #25262a !important; color: #f6f6f8 !important; box-shadow: none !important;
}
.btn-header-register, .btn-header-register:hover { display: block; background: #506ba9 !important; border-color: #617bb9 !important; }
.guest-auth-actions .btn-header-register { display: block; }
.btn-header-login:hover { background: #34353b !important; }
.wallet-pill, .user-profile-pill { background: #27282b; border: 1px solid #3a3b41; border-radius: 10px; max-width: 100%; }
.wallet-balance-box { min-width: 0; }
#headerBalanceVal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-header-deposit { background: #506ba9 !important; color: white !important; box-shadow: none !important; }
.mobile-menu-toggle { color: #e9bf87; min-width: 32px; min-height: 40px; align-items: center; justify-content: center; }
.site-sidebar { top: 64px; width: 200px; padding: 16px 12px; z-index: 80; background: #202123 !important; border-right: 1px solid #28292d !important; }
.sidebar-account { gap: 9px; padding: 0 4px 14px !important; font-size: 13px !important; }
.sidebar-avatar { width: 32px !important; height: 32px !important; border: 1px solid #42434a !important; color: #c5c6ce !important; background: #2c2d31 !important; }
.sidebar-chevron { font-size: 20px; }
.sidebar-mini-promo { padding: 13px; border-radius: 9px !important; min-height: 78px; background: linear-gradient(90deg, #3d3429e8, #29282ac4), url('/img/plixwin_gift_banner.png') center/cover !important; border: 1px solid #514635 !important; }
.sidebar-mini-promo strong { font-size: 13px; color: #f1d5af; }
.sidebar-mini-promo span { font-size: 11px; color: #c7beb3; }
.sidebar-heading { margin-top: 16px; padding: 13px 10px 8px !important; color: #92939c !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 1px !important; border-top: 1px solid #303136 !important; }
.sidebar-link { margin: 3px 0 !important; padding: 10px !important; gap: 9px !important; border-radius: 7px !important; font-size: 12px !important; font-weight: 500 !important; color: #bfc0c7 !important; border: 1px solid transparent !important; box-shadow: none !important; }
.sidebar-link.active, .sidebar-link:hover { background: #2d2e31 !important; color: #fff !important; border-color: #3a3b3f !important; box-shadow: none !important; }
.sidebar-icon { width: 20px !important; color: #82848c !important; }
.sidebar-link.active .sidebar-icon { color: #e9bf87 !important; }
.sidebar-promo { background: transparent !important; border: 0 !important; border-top: 1px solid #333439 !important; border-radius: 0 !important; padding: 18px 8px; margin-top: 20px !important; }
.sidebar-promo p { font-size: 11px; line-height: 1.6; color: #94969e !important; }
.app-shell { margin-left: 200px; padding: 20px 24px 48px; gap: 28px; background: #19191c; }
.app-footer { margin-left: 200px; background: #19191c; border-top-color: #303136; }
.promo-layout { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 14px; }
.hero-carousel-wrap { height: 290px; min-height: 290px; border: 1px solid #433c32; border-radius: 14px; box-shadow: none; outline: 0; }
.hero-slide { padding: 30px; background: #302a23 !important; }
.hero-slide-content { max-width: 62%; gap: 10px; }
.hero-badge-tag { display: inline-block; align-self: flex-start; padding: 0; margin: 0; background: transparent; border: 0; color: #ead7b9; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; }
.hero-title { font: 800 clamp(28px, 3vw, 46px)/1.08 'Outfit', Arial, sans-serif; letter-spacing: -.025em; }
.hero-title span { color: #f1cea0; }
.hero-subtitle { font-size: 12px; line-height: 1.6; color: #e0dcd5; max-width: 270px; }
.hero-cta-row { margin-top: 4px; padding-top: 8px; gap: 8px; flex-wrap: wrap; }
.btn-hero-primary, .btn-hero-primary:hover { background: #e9bf87 !important; color: #30251a !important; border-radius: 24px !important; padding: 11px 20px !important; font-size: 12px; box-shadow: none !important; }
.btn-hero-secondary { border-radius: 24px; padding: 10px 16px; font-size: 12px; }
#heroSlide0::after { background: linear-gradient(90deg, #29231de8, #29231d72 58%, transparent); }
.hero-carousel-dots { display: flex; bottom: 12px; left: 30px; transform: none; gap: 6px; }
.hero-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #ffffff60; cursor: pointer; }
.hero-dot.active { width: 18px; border-radius: 4px; background: #e9bf87; }
.promo-side, body.casino-mode .promo-side { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 0; }
.promo-gift, .promo-casino-feature, body.casino-mode .promo-casino-feature { display: none !important; }
.promo-car { display: flex; flex-direction: column; align-items: center; padding: 28px 20px; border: 1px solid #363d50; border-radius: 14px; text-align: center; background: #272c37 url('/img/sports-panel.svg') center/cover; }
.promo-car::before { display: none; }
.promo-car strong { max-width: 260px; font: 800 26px/1.15 'Outfit', Arial, sans-serif; }
.promo-car span { max-width: 220px; color: #bcc2d2; font-size: 12px; line-height: 1.6; margin-top: 12px; }
.promo-car .promo-action { margin-top: auto; padding: 9px 22px; border-radius: 24px; background: #506ba9; color: white; font-size: 12px; }
.casino-mode-tabs { border: 1px solid #36373c; background: #232427; border-radius: 10px; padding: 3px; }
.casino-mode-tabs button { padding: 8px 14px; font-size: 12px; border-radius: 7px; }
.casino-mode-tabs button.active { background: #36383e !important; color: #fff !important; box-shadow: none; }
.cat-pill-btn { display: inline-flex; align-items: center; gap: 7px; background: #242528 !important; border: 1px solid #36373d !important; border-radius: 8px !important; color: #bfc0c8 !important; padding: 10px 13px; font-size: 12px; box-shadow: none !important; }
.cat-pill-btn.active { background: #303a4f !important; color: #dbe6ff !important; border-color: #506ba9 !important; box-shadow: none !important; }
.search-input-wrap, .provider-select-wrap select, .catalog-sort-wrap select { background: #242528 !important; color: #e7e7ec !important; border: 1px solid #36373d !important; border-radius: 8px !important; min-height: 44px; box-shadow: none; font-size: 13px; }
.search-input-wrap input { font-size: 13px; }
.sec-title-icon { color: #e9bf87 !important; }
.sec-title-badge-blue, .sec-title-badge-green, .sec-title-badge-violet { background: transparent !important; border: 0 !important; padding: 0 !important; color: #f2f2f4 !important; box-shadow: none !important; }
.rail-chevron-btn { background: #242528 !important; border-color: #38393f !important; color: #bfc0c8 !important; box-shadow: none !important; }
.rail-chevron-btn:hover { background: #33353b !important; color: white !important; }
.modal-box { background: #232427; border: 1px solid #3a3b41; }
.mobile-bottom-dock { background: #202123 !important; border-top: 1px solid #37383d; box-shadow: none; }
.mobile-bottom-dock .active { color: #e9bf87 !important; }
.mobile-dock-deposit { background: #506ba9 !important; color: white !important; box-shadow: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #e9bf87; outline-offset: 3px; }
@media (min-width: 1251px) { .mobile-menu-toggle { display: none; } }
@media (max-width: 1250px) {
    header.top-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
    .mobile-menu-toggle { display: inline-flex; }
    .site-sidebar { display: none; }
    body.nav-open .site-sidebar { top: 0; width: min(260px, 85vw); padding-top: 24px; }
    .app-shell, .app-footer { margin-left: 0; }
    .top-nav-tabs { justify-self: center; }
}
@media (max-width: 900px) {
    header.top-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 16px 8px; }
    .header-left { grid-column: 1; grid-row: 1; }
    .header-right { grid-column: 2; grid-row: 1; }
    .top-nav-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; }
    .top-tab-item { flex: 1; max-width: 150px; justify-content: center; }
    .promo-layout { grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); }
    .hero-slide { padding: 24px; }
    .hero-slide-content { max-width: 85%; }
    .hero-bg-visual { opacity: .65; }
    .promo-car strong { font-size: 23px; }
}
@media (max-width: 600px) {
    header.top-header { padding: 8px 12px 6px; }
    .brand-logo-img { width: 91px; height: 30px; }
    .header-left { gap: 4px; }
    .btn-header-login, .btn-header-register { padding: 9px 12px !important; min-height: 38px; font-size: 11px !important; }
    .top-tab-item { padding: 8px 5px !important; gap: 5px; font-size: 11px !important; min-height: 36px; }
    .top-tab-item .ui-icon { width: 16px; height: 16px; }
    .app-shell { padding: 14px 12px 80px; gap: 24px; }
    .promo-layout { grid-template-columns: 1fr; gap: 10px; }
    .hero-carousel-wrap { height: 250px; min-height: 250px; }
    .hero-slide { padding: 23px; }
    .hero-slide-content { max-width: 76%; }
    .hero-title { font-size: 28px; }
    .hero-subtitle { font-size: 11px; }
    .promo-car { min-height: 130px; padding: 20px; align-items: flex-start; text-align: left; background-position: center 60%; }
    .promo-car strong { max-width: 62%; font-size: 22px; }
    .promo-car span { display: block; max-width: 62%; margin-top: 7px; font-size: 11px; }
    .promo-car .promo-action { position: absolute; right: 16px; bottom: 20px; padding: 8px 14px; }
    .user-name-text { display: none; }
    .wallet-balance-box { padding: 6px; font-size: 11px; }
    .btn-header-deposit { padding: 6px; font-size: 11px; }
    .user-profile-pill { padding: 4px; }
    .header-right { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}