:root{
    --bg:#09090f;--bg2:#0d0d15;--bg3:#12121c;--bg4:#161622;
    --surface:#161624;--surface2:#1c1c2e;--surface3:#222238;
    --accent:#6366f1;--accent2:#818cf8;--accent3:#4f46e5;
    --neon:#22d3ee;--neon2:#06b6d4;--neong:rgba(34,211,238,.08);
    --green:#22c55e;--greeng:rgba(34,197,94,.1);
    --red:#ef4444;--yellow:#eab308;
    --bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.1);
    --tx:#e4e4f0;--tx2:#8888a4;--tx3:#55556a;
    --ff:'Manrope',-apple-system,sans-serif;
    --mono:'JetBrains Mono',monospace;
    --ez:cubic-bezier(.25,1,.5,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--ff);background:var(--bg);color:var(--tx);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--neon);text-decoration:none;transition:color .15s}a:hover{color:var(--neon2)}
h1,h2,h3{font-weight:800;color:var(--tx);line-height:1.2}
h1 span{color:var(--accent2)}
h2 b,h3 b{color:var(--neon)}
p{color:var(--tx2)}
.container{max-width:1080px;margin:0 auto;padding:0 24px}

/* ═══ HEADER ═══ */
.hdr{position:sticky;top:0;z-index:1000;background:rgba(9,9,15,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bd)}
.hdr__row{display:flex;align-items:center;justify-content:space-between;height:52px}
.logo{display:flex;align-items:center;gap:6px;font-size:.95rem;font-weight:800;color:var(--tx);letter-spacing:.02em}
.logo b{color:var(--accent2)}.logo small{color:var(--tx3);font-weight:500;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;margin-left:4px}
.logo__dot{width:8px;height:8px;background:var(--green);border-radius:50%;flex-shrink:0;box-shadow:0 0 6px var(--green);animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
.logo--sm{font-size:.85rem}
.nav{display:flex;align-items:center;gap:1px}
.nav__a{color:var(--tx3);padding:6px 11px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-radius:4px;transition:all .15s}
.nav__a:hover,.nav__a--on{color:var(--tx);background:var(--surface)}
.nav__a--go{background:var(--accent)!important;color:#fff!important;padding:6px 16px!important}
.nav__a--go:hover{background:var(--accent3)!important}
.burger{display:none;width:32px;height:32px;background:0;border:0;cursor:pointer;position:relative}
.burger span{display:block;width:18px;height:2px;background:var(--tx);position:absolute;left:7px;transition:all .25s var(--ez)}
.burger span:first-child{top:11px}.burger span:last-child{top:19px}
.burger.on span:first-child{transform:translateY(4px) rotate(45deg)}.burger.on span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ═══ MAIN ═══ */
.main{padding:28px 0 60px;min-height:calc(100vh - 52px)}

/* ═══ DASH HEAD ═══ */
.dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.dash-head h1{font-size:clamp(1.3rem,3vw,1.8rem);letter-spacing:-.02em}
.dash-head__ts{font-family:var(--mono);font-size:.7rem;color:var(--tx3);margin-top:2px}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;font-family:var(--ff);font-size:.82rem;font-weight:700;border:none;cursor:pointer;text-decoration:none;transition:all .2s var(--ez);border-radius:6px}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 2px 12px rgba(99,102,241,.2)}
.btn--primary:hover{background:var(--accent3);color:#fff;transform:translateY(-1px);box-shadow:0 4px 20px rgba(99,102,241,.3)}
.btn--neon{background:var(--neon);color:#000;box-shadow:0 2px 12px rgba(34,211,238,.15)}
.btn--neon:hover{background:var(--neon2);color:#000;transform:translateY(-1px)}
.btn--ghost{background:var(--surface);color:var(--tx2);border:1px solid var(--bd)}
.btn--ghost:hover{border-color:var(--bd2);color:var(--tx)}
.btn--lg{padding:13px 32px;font-size:.9rem}
.btn--full{width:100%;justify-content:center}

/* ═══ WIDGET GRID ═══ */
.grid-dash{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.widget{background:var(--surface);border:1px solid var(--bd);border-radius:8px;padding:18px 20px;position:relative;transition:border-color .2s}
.widget:hover{border-color:var(--bd2)}
.widget__label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:12px}
.widget__link{display:block;margin-top:14px;font-size:.72rem;font-weight:600;color:var(--accent2)}
.widget__link:hover{color:var(--neon)}

/* Status */
.status-indicator{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.status-dot--ok{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse-dot 2s ease-in-out infinite}
.status-dot--down{background:var(--red);box-shadow:0 0 8px var(--red)}
.status-text{font-size:1.1rem;font-weight:800;color:var(--green)}
.status-meta{font-family:var(--mono);font-size:.65rem;color:var(--tx3)}

/* Bonus card */
.bonus-card{display:flex;align-items:baseline;gap:8px}
.bonus-card__percent{font-size:2rem;font-weight:800;color:var(--neon);line-height:1}
.bonus-card__desc{font-size:.75rem;color:var(--tx2)}

/* Promo display */
.promo-display{display:flex;align-items:center;gap:8px}
.promo-display code{font-family:var(--mono);font-size:1.1rem;font-weight:700;color:var(--yellow);letter-spacing:.05em}
.copy-btn{background:var(--surface2);border:1px solid var(--bd);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem;border-radius:4px;transition:background .15s}
.copy-btn:hover{background:var(--surface3)}

/* Mini stats */
.mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mini-stat{text-align:center;padding:6px;background:var(--bg3);border-radius:4px}
.mini-stat b{display:block;font-size:1rem;font-weight:800;color:var(--accent2)}
.mini-stat span{font-size:.6rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em}

/* ═══ PANELS ═══ */
.panel{background:var(--surface);border:1px solid var(--bd);border-radius:8px;padding:20px;margin-bottom:16px}
.panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel__head h2{font-size:.95rem;font-weight:700}
.panel__more{font-size:.72rem;font-weight:600;color:var(--accent2)}
.panel__live{font-family:var(--mono);font-size:.65rem;color:var(--green);animation:pulse-dot 2s ease-in-out infinite}

/* Slot chips */
.slots-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface2)}
.slots-row::-webkit-scrollbar{height:6px}
.slots-row::-webkit-scrollbar-track{background:var(--surface2);border-radius:3px}
.slots-row::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
.slots-row::-webkit-scrollbar-thumb:hover{background:var(--accent2)}
.slot-chip{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--bd);border-radius:6px;padding:10px 16px;text-decoration:none;white-space:nowrap;transition:all .2s;flex-shrink:0}
.slot-chip:hover{border-color:var(--accent);background:var(--surface2)}
.slot-chip__emoji{font-size:1.4rem}
.slot-chip__name{font-size:.8rem;font-weight:700;color:var(--tx)}
.slot-chip__rtp{font-family:var(--mono);font-size:.65rem;color:var(--neon)}

/* Payout feed */
.payout-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:.78rem;transition:opacity .3s,transform .3s}
.payout-row:last-child{border-bottom:none}
.payout-row--new{animation:payout-in .4s var(--ez) forwards}
@keyframes payout-in{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}
.payout-row__time{font-family:var(--mono);font-size:.65rem;color:var(--tx3);min-width:80px}
.payout-row__player{color:var(--tx2);min-width:50px}
.payout-row__game{color:var(--tx);font-weight:600;flex:1}
.payout-row__sum{font-family:var(--mono);font-weight:700;color:var(--green)}

/* Tools grid */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tool-card{display:flex;flex-direction:column;gap:4px;padding:18px 16px;background:var(--bg3);border:1px solid var(--bd);border-radius:6px;text-decoration:none;transition:all .2s}
.tool-card:hover{border-color:var(--accent);background:var(--surface2);transform:translateY(-2px)}
.tool-card__ico{font-size:1.4rem}
.tool-card__name{font-size:.82rem;font-weight:700;color:var(--tx)}
.tool-card__desc{font-size:.68rem;color:var(--tx3)}

/* SEO text */
.seo-text{background:var(--surface);border:1px solid var(--bd);border-radius:8px;padding:20px;margin-bottom:16px}
.seo-text h2{font-size:.95rem;font-weight:700;margin-bottom:12px;color:var(--tx)}
.seo-text p{font-size:.78rem;color:var(--tx2);line-height:1.7;margin-bottom:10px}
.seo-text p:last-child{margin-bottom:0}
.seo-text a{color:var(--neon);text-decoration:underline;text-underline-offset:2px}
.seo-text a:hover{color:var(--neon2)}

/* ═══ PAGE LAYOUT (inner pages) ═══ */
.page{padding-top:24px}
.page__head{margin-bottom:24px}
.page__head h1{font-size:clamp(1.2rem,2.5vw,1.6rem);letter-spacing:-.015em}
.page__head p{font-size:.78rem;color:var(--tx3);font-family:var(--mono);margin-top:2px}
.page__bc{display:flex;gap:6px;font-size:.68rem;color:var(--tx3);margin-bottom:10px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.page__bc a{color:var(--tx3)}.page__bc a:hover{color:var(--neon)}

/* ═══ CHECKER (zerkalo) ═══ */
.checker{background:var(--surface);border:1px solid var(--bd);border-radius:8px;padding:28px;text-align:center}
.checker__anim{width:48px;height:48px;border:3px solid var(--bd);border-top-color:var(--neon);border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.checker__result{display:none}
.checker__ok .status-text{font-size:1.3rem}
.checker__log{margin-top:20px;text-align:left}
.checker__log table{width:100%}
.checker__log th,.checker__log td{padding:8px 12px;font-size:.75rem;border-bottom:1px solid var(--bd)}
.checker__log th{color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.65rem}
.checker__log td{color:var(--tx2);font-family:var(--mono)}
.checker__log .ok{color:var(--green)}.checker__log .down{color:var(--red)}

/* ═══ CALCULATOR (bonus) ═══ */
.calc{background:var(--surface);border:1px solid var(--bd);border-radius:8px;padding:28px}
.calc__input-group{margin-bottom:20px}
.calc__label{display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:6px}
.calc__input{width:100%;background:var(--bg3);border:1px solid var(--bd);color:var(--tx);font-family:var(--mono);font-size:1.1rem;padding:12px 16px;border-radius:6px;outline:none;transition:border-color .15s}
.calc__input:focus{border-color:var(--accent)}
.calc__range{width:100%;margin-top:8px;accent-color:var(--accent)}
.calc__results{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.calc__result{background:var(--bg3);border-radius:6px;padding:14px 16px}
.calc__result-label{font-size:.65rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.calc__result-value{font-family:var(--mono);font-size:1.1rem;font-weight:700;color:var(--neon)}
.calc__result-value--gold{color:var(--yellow)}
.calc__result-value--green{color:var(--green)}

/* ═══ COMPARE SLOTS ═══ */
.compare-tool{background:var(--surface);border:1px solid var(--bd);border-radius:8px;padding:24px}
.compare-selects{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.compare-select__el{width:100%;margin-top:4px}
.compare-table-wrap{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;font-size:.82rem}
.compare-table th,.compare-table td{padding:10px 14px;border-bottom:1px solid var(--bd);text-align:left}
.compare-table th{color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.7rem}
.compare-table td{color:var(--tx2)}
.compare-table td:first-child{color:var(--tx3);font-weight:500;min-width:120px}
@media(max-width:768px){.compare-selects{grid-template-columns:1fr 1fr}}

/* ═══ PROMO ROULETTE ═══ */
.roulette{background:var(--surface);border:1px solid var(--bd);border-radius:8px;padding:32px;text-align:center}
.roulette__display{font-family:var(--mono);font-size:2rem;font-weight:800;color:var(--yellow);margin:20px 0;letter-spacing:.1em;min-height:2.6rem}
.roulette__display.spinning{animation:slot-spin .1s steps(1) infinite}
@keyframes slot-spin{0%{opacity:1}50%{opacity:.4}}
.roulette__instruction{display:flex;justify-content:center;gap:24px;margin-top:20px}
.roulette__step{text-align:center}
.roulette__step-num{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--bd);border-radius:50%;font-size:.72rem;font-weight:700;color:var(--accent2);margin-bottom:4px}
.roulette__step-text{display:block;font-size:.68rem;color:var(--tx3)}

/* ═══ SLOT CATALOG ═══ */
.catalog-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.catalog-search{flex:1;min-width:180px;background:var(--bg3);border:1px solid var(--bd);color:var(--tx);font-family:var(--ff);font-size:.82rem;padding:9px 14px;border-radius:6px;outline:none}
.catalog-search:focus{border-color:var(--accent)}
.catalog-search::placeholder{color:var(--tx3)}
.catalog-filter{background:var(--surface);border:1px solid var(--bd);color:var(--tx);font-family:var(--ff);font-size:.78rem;padding:8px 12px;border-radius:6px;cursor:pointer;outline:none}
.catalog-filter:focus{border-color:var(--accent)}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.slot-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--bd);border-radius:6px;text-decoration:none;transition:all .2s}
.slot-card:hover{border-color:var(--accent);background:var(--surface2)}
.slot-card__emoji{font-size:1.6rem;flex-shrink:0}
.slot-card__info{flex:1;min-width:0}
.slot-card__name{font-size:.82rem;font-weight:700;color:var(--tx);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-card__prov{font-size:.65rem;color:var(--tx3)}
.slot-card__rtp{font-family:var(--mono);font-size:.7rem;font-weight:700;color:var(--neon);flex-shrink:0}
.slot-card__badge{font-size:.55rem;font-weight:700;padding:2px 6px;background:var(--accent);color:#fff;border-radius:3px;margin-left:6px}

/* ═══ WIZARD (registraciya) ═══ */
.wizard{background:var(--surface);border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.wizard__steps{display:flex;border-bottom:1px solid var(--bd)}
.wizard__tab{flex:1;padding:14px;text-align:center;font-size:.75rem;font-weight:600;color:var(--tx3);cursor:pointer;transition:all .15s;border-bottom:2px solid transparent}
.wizard__tab--active{color:var(--accent2);border-bottom-color:var(--accent);background:var(--surface2)}
.wizard__body{padding:28px}
.wizard__panel{display:none}
.wizard__panel--active{display:block}
.wizard__panel h3{font-size:1rem;margin-bottom:8px}
.wizard__panel p{font-size:.85rem;line-height:1.7;margin-bottom:16px}
.wizard__nav{display:flex;justify-content:space-between;margin-top:20px}

/* ═══ VHOD (entry page) ═══ */
.entry{text-align:center;padding:60px 0}
.entry__status{margin-bottom:24px}
.entry h2{font-size:clamp(1.3rem,3vw,1.8rem);margin-bottom:8px}
.entry p{font-size:.88rem;margin-bottom:24px;max-width:400px;margin-left:auto;margin-right:auto}
.entry__alt{margin-top:20px;font-size:.78rem;color:var(--tx3)}
.entry__alt a{color:var(--accent2)}

/* ═══ FOOTER ═══ */
.ftr{background:var(--bg2);border-top:1px solid var(--bd);padding:24px 0}
.ftr__row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ftr__left{max-width:280px}
.ftr__left p{font-size:.72rem;color:var(--tx3);margin-top:6px}
.ftr__nav{display:flex;gap:14px;flex-wrap:wrap}
.ftr__nav a{color:var(--tx3);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.ftr__nav a:hover{color:var(--neon)}
.ftr__right{text-align:right}
.ftr__right p{font-size:.68rem;color:var(--tx3);margin-top:4px}
.age-mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:2px solid var(--red);color:var(--red);font-size:.62rem;font-weight:800;border-radius:50%}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
    .grid-dash{grid-template-columns:repeat(2,1fr)}
    .tools-grid{grid-template-columns:repeat(2,1fr)}
    .calc__results{grid-template-columns:1fr}
}
@media(max-width:640px){
    /* ── Mobile nav overlay ── */
    .nav{
        display:flex;flex-direction:column;
        position:fixed;top:0;left:0;right:0;bottom:0;
        z-index:999;overflow-y:auto;
        background:linear-gradient(160deg,rgba(9,9,15,.98) 0%,rgba(18,18,32,.98) 100%);
        backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
        padding:80px 28px 40px;gap:0;
        opacity:0;visibility:hidden;
        transform:translateY(-12px);
        transition:opacity .35s var(--ez),transform .35s var(--ez),visibility 0s .35s;
    }
    .nav.on{
        opacity:1;visibility:visible;
        transform:translateY(0);
        transition:opacity .35s var(--ez),transform .35s var(--ez),visibility 0s 0s;
    }

    /* ── Stagger animation for links ── */
    .nav__a{
        display:flex;align-items:center;gap:10px;
        padding:16px 18px;margin-bottom:4px;
        font-size:.95rem;font-weight:600;letter-spacing:.01em;
        color:var(--tx2);border-radius:10px;
        background:transparent;
        opacity:0;transform:translateX(-16px);
        transition:opacity .3s var(--ez),transform .3s var(--ez),background .2s,color .2s;
    }
    .nav.on .nav__a{opacity:1;transform:translateX(0)}
    .nav.on .nav__a:nth-child(1){transition-delay:.06s}
    .nav.on .nav__a:nth-child(2){transition-delay:.1s}
    .nav.on .nav__a:nth-child(3){transition-delay:.14s}
    .nav.on .nav__a:nth-child(4){transition-delay:.18s}
    .nav.on .nav__a:nth-child(5){transition-delay:.22s}
    .nav.on .nav__a:nth-child(6){transition-delay:.26s}
    .nav.on .nav__a:nth-child(7){transition-delay:.3s}
    .nav.on .nav__a:nth-child(8){transition-delay:.34s}
    .nav.on .nav__a:nth-child(9){transition-delay:.38s}

    .nav__a:active{background:var(--surface2);color:var(--tx)}
    .nav__a--on{color:var(--neon)!important;background:var(--neong)}
    .nav__a--on::before{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon);flex-shrink:0}

    /* ── CTA button inside mobile nav ── */
    .nav__a--go{
        margin-top:auto;padding:16px 20px!important;
        font-size:.9rem!important;font-weight:700;
        text-align:center;justify-content:center;
        border-radius:10px;
        background:linear-gradient(135deg,var(--accent),var(--accent3))!important;
        color:#fff!important;
        box-shadow:0 4px 20px rgba(99,102,241,.25);
    }
    .nav__a--go:active{transform:scale(.97)!important;opacity:.9}

    /* ── Separator before CTA ── */
    .nav__a--go::before{display:none}
    .nav__a:last-child:not(.nav__a--go){border-bottom:1px solid var(--bd)}

    /* ── Burger z-index above overlay ── */
    .burger{display:block;z-index:1001}
    .burger span{transition:all .3s var(--ez)}
    .burger.on span{background:var(--neon)}

    /* ── Decorative glow in nav bg ── */
    .nav::before{
        content:'';position:absolute;top:-60px;right:-60px;
        width:220px;height:220px;
        background:radial-gradient(circle,rgba(99,102,241,.12),transparent 70%);
        border-radius:50%;pointer-events:none;
    }
    .nav::after{
        content:'';position:absolute;bottom:40px;left:-40px;
        width:180px;height:180px;
        background:radial-gradient(circle,rgba(34,211,238,.08),transparent 70%);
        border-radius:50%;pointer-events:none;
    }

    /* ── Rest of mobile rules ── */
    .grid-dash{grid-template-columns:1fr}
    .tools-grid{grid-template-columns:1fr}
    .dash-head{flex-direction:column;align-items:flex-start}
    .roulette__instruction{flex-direction:column;gap:12px}
    .ftr__row{flex-direction:column;gap:16px}
    .ftr__right{text-align:left}
    .wizard__steps{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface2)}
.wizard__steps::-webkit-scrollbar{height:5px}
.wizard__steps::-webkit-scrollbar-track{background:var(--surface2);border-radius:3px}
.wizard__steps::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
}