:root{
    --bg:#0b1020;
    --bg-soft:#f5f7fb;
    --surface:#ffffff;
    --surface-2:#f8fafc;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e6e9f2;
    --primary:#6d28d9;
    --primary-2:#5b21b6;
    --accent:#ec4899;
    --ok:#10b981;
    --warn:#f59e0b;
    --danger:#ef4444;
    --tg:#229ED9;
    --max:#ff6b00;
    --gold:#f5b400;
    --shadow-sm:0 2px 8px rgba(15,23,42,.06);
    --shadow:0 10px 30px rgba(15,23,42,.08);
    --shadow-lg:0 20px 60px rgba(15,23,42,.18);
    --radius:14px;
    --radius-lg:20px;
    --nav-h:60px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    background:linear-gradient(180deg,#f5f7fb 0%, #eef0f8 100%);
    color:var(--text);
    line-height:1.55;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
body.nav-open{overflow:hidden}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}
h1{font-size:24px;margin:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2{font-size:20px}
h3{font-size:17px}
.m0{margin:0}
.mt{margin-top:16px}
.center{text-align:center}
.muted{color:var(--muted)}
.lead{font-size:16px}
.small{font-size:13px}
.kicker{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(236,72,153,.12));color:var(--primary);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.section-title{display:flex;align-items:center;gap:8px;margin:6px 0 12px}
.hide-sm{display:none}

.container{max-width:1140px;margin:0 auto;padding:0 14px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.row.gap{gap:10px}
.inline{display:inline}

.topbar{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:var(--nav-h)}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--text);flex-shrink:0;min-width:0}
.logo:hover{text-decoration:none}
.logo-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
.logo-mark{
    width:34px;height:34px;border-radius:10px;flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff;display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(109,40,217,.35);
}

.nav-toggle{
    display:inline-flex;background:none;border:0;cursor:pointer;color:var(--text);
    padding:8px;border-radius:10px;align-items:center;justify-content:center;
    margin-left:auto;position:relative;width:42px;height:42px;
    -webkit-tap-highlight-color:transparent;
}
.nav-toggle:hover{background:#eef2ff}
.nav-toggle-icon{display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s, transform .2s}
.nav-toggle-close{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;opacity:0;transform:rotate(-90deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon:not(.nav-toggle-close){opacity:0;transform:rotate(90deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-close{opacity:1;transform:rotate(0)}

.nav-backdrop{
    position:fixed;inset:var(--nav-h) 0 0 0;background:rgba(15,23,42,.4);
    opacity:0;pointer-events:none;transition:opacity .25s;z-index:40;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.nav-backdrop.show{opacity:1;pointer-events:auto}

.main-nav{
    display:none;flex-direction:column;align-items:stretch;gap:4px;
    position:fixed;top:var(--nav-h);left:0;right:0;
    background:#fff;border-top:1px solid var(--border);
    padding:12px;box-shadow:var(--shadow-lg);
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:45;
}
.main-nav.open{display:flex;animation:navSlide .25s ease}
@keyframes navSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.nav-link{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 14px;border-radius:10px;color:#334155;font-weight:500;
    transition:background-color .15s, color .15s;
    text-decoration:none;
}
.nav-link:hover{background:#eef2ff;color:var(--primary);text-decoration:none}
.nav-link.active{background:rgba(109,40,217,.1);color:var(--primary)}

.nav-group{position:relative}
.nav-group-btn{
    display:flex;align-items:center;gap:8px;width:100%;
    padding:11px 14px;border-radius:10px;color:#334155;font-weight:500;
    background:none;border:0;cursor:pointer;font:inherit;font-size:15px;
    transition:background-color .15s, color .15s;
    -webkit-tap-highlight-color:transparent;text-align:left;
}
.nav-group-btn > span:not(.nav-caret):not(.nav-avatar):not(.nav-user-name){flex:1}
.nav-group-btn:hover{background:#eef2ff;color:var(--primary)}
.nav-group.active > .nav-group-btn{color:var(--primary)}
.nav-caret{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s;color:var(--muted);margin-left:auto}
.nav-group.open > .nav-group-btn .nav-caret{transform:rotate(180deg);color:var(--primary)}

.nav-dropdown{
    display:none;flex-direction:column;gap:2px;
    position:absolute;top:100%;left:0;
    min-width:260px;padding:8px;margin:0;
    background:#fff;border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow-lg);
    border-left:1px solid var(--border);
    z-index:60;
}
/* Невидимый "мостик" между кнопкой и меню, чтобы курсор не терял hover */
.nav-dropdown::before{
    content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
}
.nav-group.open > .nav-dropdown{display:flex;animation:ddSlide .2s ease}
@keyframes ddSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.nav-dd-item{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
    color:var(--text);text-decoration:none;
    background:none;border:0;cursor:pointer;font:inherit;width:100%;text-align:left;
    transition:background-color .15s, color .15s;
    -webkit-tap-highlight-color:transparent;
}
.nav-dd-item:hover{background:#fff;color:var(--primary);text-decoration:none}
.nav-dd-ico{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;
    background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(236,72,153,.12));
    color:var(--primary);display:inline-flex;align-items:center;justify-content:center;
}
.nav-dd-text{display:flex;flex-direction:column;min-width:0;flex:1}
.nav-dd-text b{font-weight:600;font-size:14px;line-height:1.3}
.nav-dd-text em{font-style:normal;font-size:12px;color:var(--muted);line-height:1.3;margin-top:2px}
.nav-dd-admin .nav-dd-ico{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff}
.nav-dd-logout .nav-dd-ico{background:rgba(239,68,68,.12);color:var(--danger)}
.nav-dd-logout:hover{color:var(--danger)}
.nav-dd-head{padding:10px 12px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.nav-dd-head-name{font-weight:700;font-size:14px;color:var(--text);word-break:break-word}
.nav-dd-head-phone{font-size:12px;color:var(--muted);margin-top:2px}
.nav-dd-sep{height:1px;background:var(--border);margin:4px 0}
.nav-dd-form{margin:0;padding:0}

.nav-user-btn .nav-user-name{
    font-weight:600;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;
}
.nav-avatar{
    width:28px;height:28px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
}

.nav-login{margin-top:6px}
@media (max-width:980px) {
    .main-nav.open {
        height: 90vh;
    }
}
@media (min-width:981px){
    .nav-toggle{display:none}
    .nav-backdrop{display:none !important}
    .nav-wrap{padding:12px 18px;gap:14px}

    .main-nav{
        display:flex;flex-direction:row;align-items:center;gap:4px;
        position:static;background:transparent;border:0;padding:0;box-shadow:none;
        margin-left:auto;max-height:none;overflow:visible;animation:none;
    }
    .nav-link{padding:8px 12px}
    .nav-group-btn{width:auto;padding:8px 12px; color: #334155;font-weight: 500; font-size: 16px;}
    .nav-dropdown{
        display:none;flex-direction:column;gap:2px;
        position:absolute;top:calc(100% + 8px);left:0;
        min-width:260px;padding:8px;margin:0;
        background:#fff;border:1px solid var(--border);border-radius:14px;
        box-shadow:var(--shadow-lg);
        border-left:1px solid var(--border);
        z-index:60;
    }
    .nav-dropdown-right{left:auto;right:0}
    .nav-group:hover > .nav-dropdown,
    .nav-group.open > .nav-dropdown{display:flex}
    .nav-group:hover > .nav-group-btn{background:#eef2ff;color:var(--primary)}
    .nav-group:hover > .nav-group-btn .nav-caret{transform:rotate(180deg)}
    .nav-dd-item:hover{background:#f8fafc}
    .nav-user-btn{
        background:#f8fafc;border:1px solid var(--border);border-radius:999px;padding:5px 12px 5px 5px;
    }
    .nav-user-btn:hover{background:#fff;border-color:var(--primary)}
    .nav-login{margin-top:0;margin-left:6px}
    h1{font-size:28px}
    h2{font-size:22px}
    h3{font-size:18px}
    .container{padding:0 18px}
    .lead{font-size:17px}
    .hide-sm{display:inline}
}

@media (min-width:981px) and (max-width:1100px){
    .nav-user-btn .nav-user-name{max-width:110px}
    .nav-group-btn{padding:8px 10px}
    .nav-link{padding:8px 10px}
}

.main-content{padding:18px 14px 60px}
@media (min-width:981px){.main-content{padding:24px 18px 60px}}
footer{padding:30px 0;text-align:center;color:var(--muted);font-size:14px}

/* ====== HERO ART: сервисная тематика вместо орбов ====== */
.hero-art{position:relative;height:200px;display:none}
.hero-orb,.hero-orb-2{display:none} /* убираем размытые круги */

/* Крутящийся диск/шина + шестерёнки */
.hero-gear{
    position:absolute;color:var(--primary);opacity:.9;
    filter:drop-shadow(0 10px 24px rgba(109,40,217,.25));
}
.hero-gear.g1{right:30px;top:10px;animation:spin 14s linear infinite}
.hero-gear.g2{right:150px;top:120px;color:#ff6905;animation:spin 9s linear infinite reverse}
.hero-tire{
    position:absolute;right:60px;top:40px;width:170px;height:170px;border-radius:8%;
    background:
            radial-gradient(circle at center, #1e1b4b 0 28%, transparent 29%),
            repeating-conic-gradient(#0f172a 0 8deg, #1e293b 8deg 16deg);
    box-shadow:inset 0 0 0 10px #334155, 0 18px 40px rgba(15,23,42,.35);
    animation:floatY 7s ease-in-out infinite;
}
.hero-tire::after{
    content:"";position:absolute;inset:36%;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#cbd5e1,#64748b);
    box-shadow:inset 0 2px 6px rgba(0,0,0,.4);
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (min-width:981px){.hero-art{display:block;height:280px}}

/* ====== PROMO CARD: тематический фон вместо размытых кругов ====== */
.promo-card::before{
    content:"";position:absolute;inset:auto -28px -34px auto;width:150px;height:150px;
    border-radius:0;background:none;opacity:.10;color:var(--primary);
    -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
    background-color:currentColor;
    /* шестерёнка */
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}
.promo-safe::before{color:var(--gold)}
.promo-ref::before{color:var(--accent)}

/* ====== REF-HERO: тематические элементы вместо размытых пятен ====== */
.ref-hero-bg span{
    background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);
}

/* ====== Блок контактов автосервиса ====== */
.rf-info-address{
    display:flex;align-items:flex-start;gap:14px;
    background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:18px;box-shadow:var(--shadow-sm);
}
.rf-info-addr-ico{
    width:46px;height:46px;border-radius:12px;flex-shrink:0;
    background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(236,72,153,.12));
    color:var(--primary);display:inline-flex;align-items:center;justify-content:center;
}
.rf-contacts-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0}
@media (min-width:720px){.rf-contacts-grid{grid-template-columns:1fr 1fr}}
.rf-phone{font-size:22px;font-weight:800;color:var(--text);letter-spacing:.5px}
.rf-phone:hover{color:var(--primary);text-decoration:none}


.hero{margin:18px 0 28px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--primary);background:rgba(109,40,217,.1);padding:6px 12px;border-radius:999px;margin-bottom:14px}
.hero-title{font-size:30px;line-height:1.1;margin:0 0 12px;background:linear-gradient(135deg,#0f172a 0%, #6d28d9 60%, #ec4899 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:16px;color:var(--muted);margin:0 0 22px;max-width:520px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-art{position:relative;height:200px;display:none}
.hero-orb{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #ec4899, #6d28d9 70%, transparent 75%);filter:blur(2px);right:0;top:10px;opacity:.85;animation:float 9s ease-in-out infinite}
.hero-orb-2{width:140px;height:140px;background:radial-gradient(circle at 30% 30%, #fbbf24, #f97316 70%, transparent 75%);right:160px;top:120px;animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@media (min-width:981px){
    .hero-grid{grid-template-columns:1.2fr .8fr;gap:30px}
    .hero-art{display:block;height:280px}
    .hero-title{font-size:42px}
}

.grid-2,.grid-3{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:720px){
    .grid-2{grid-template-columns:1fr 1fr;gap:18px}
    .grid-3{grid-template-columns:repeat(3,1fr);gap:18px}
}

.promo-card{
    display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:20px;box-shadow:var(--shadow-sm);color:var(--text);
    transition:transform .2s ease, box-shadow .2s ease;
    position:relative;overflow:hidden;
}
.promo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.promo-card::before{content:"";position:absolute;inset:auto -30px -40px auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle, rgba(109,40,217,.18), transparent 70%)}
.promo-safe::before{background:radial-gradient(circle, rgba(245,180,0,.25), transparent 70%)}
.promo-ref::before{background:radial-gradient(circle, rgba(236,72,153,.22), transparent 70%)}
.promo-ico{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;margin-bottom:14px}
.promo-card h2{margin:6px 0}
.promo-stats{display:flex;gap:14px;margin-top:14px;color:var(--muted);font-size:14px;flex-wrap:wrap}
.promo-stats span{display:inline-flex;align-items:center;gap:6px}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 10px;border-radius:999px;font-weight:600}
.badge.ok{background:#d1fae5;color:#065f46}
.badge.off{background:#fee2e2;color:#991b1b}

.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm);margin:14px 0}
@media (min-width:981px){.card{padding:24px;margin:18px 0}}
.card.narrow{max-width:440px;margin:32px auto}
.auth-card h1{justify-content:center}

label{display:block;margin:12px 0;font-size:14px;font-weight:500;color:#334155}
label.check{display:flex;align-items:center;gap:10px;margin:10px 0;font-weight:500}

input,select,textarea{
    width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font:inherit;background:#fff;margin-top:6px;color:var(--text);
    transition:border-color .15s, box-shadow .15s;
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    font-size:16px;
}
input[type=checkbox],input[type=radio]{
    width:auto;margin-top:0;padding:0;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;
}
input[type=file]{padding:10px 12px;background:#f8fafc}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(109,40,217,.12)}

select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}

.input-icon{position:relative}
.input-icon input{padding-left:38px}
.input-icon i,.input-icon svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 18px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text);
    cursor:pointer;font:inherit;font-weight:600;text-decoration:none;font-size:15px;
    transition:background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s, filter .18s;
    -webkit-tap-highlight-color:transparent;
    line-height:1.2;
}
.btn:hover{background:#f3f4f6;text-decoration:none;border-color:#cbd5e1}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;filter:grayscale(.3);box-shadow:none;transform:none}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:10px}
.btn-lg{padding:14px 22px;font-size:16px;border-radius:14px}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(109,40,217,.32)}
.btn-primary:hover{background:linear-gradient(135deg,#7c3aed,#f43f8e);color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(109,40,217,.42)}
.btn-primary:disabled,.btn-primary[disabled]{background:linear-gradient(135deg,#94a3b8,#cbd5e1);color:#fff;box-shadow:none;filter:none;opacity:.7}
.btn-ghost{background:rgba(109,40,217,.08);color:var(--primary);border-color:transparent}
.btn-ghost:hover{background:rgba(109,40,217,.18);color:var(--primary);border-color:transparent}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(239,68,68,.32)}
.btn-danger:hover{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(239,68,68,.42)}
.btn-tg{background:var(--tg);color:#fff;border-color:transparent}
.btn-tg:hover{background:#1c8bbf;color:#fff;border-color:transparent}
.btn-max{background:var(--max);color:#fff;border-color:transparent}
.btn-max:hover{background:#e65a00;color:#fff;border-color:transparent}
.btn-block{width:100%}
.btn.copied{background:#10b981;color:#fff;border-color:transparent}

.flash{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:12px;margin:12px 0;font-weight:500;font-size:14px}
.flash-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.flash-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.flash-try_again{display:none}

.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;background:#fff;font-size:13px;min-width:520px}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.table th{background:#f8fafc;font-weight:600;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:#f8fafc}
.table tr.row-refunded td{opacity:.6;background:#fff7f7}
.table tr.row-refunded:hover td{background:#fef2f2}
.table code{background:#f1f5f9;padding:2px 6px;border-radius:6px;font-size:12px}

.refund-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.refund-form input{margin:0;padding:7px 10px;font-size:13px;width:140px}
.payment-add{padding:14px;background:#f8fafc;border:1px dashed var(--border);border-radius:14px}

.safe-play{background:linear-gradient(180deg,#fff 0%, #fafafe 100%)}
.attempts-box{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(236,72,153,.12));color:var(--primary);padding:8px 14px;border-radius:12px;font-weight:600;transition:background .2s}
.attempts-box.empty{background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(245,158,11,.12));color:var(--danger)}

.try-again-banner{
    display:flex;align-items:center;gap:14px;
    background:linear-gradient(135deg,#fff7ed 0%, #fef3c7 100%);
    border:2px solid #fbbf24;border-radius:16px;padding:14px 16px;
    margin:14px 0;
    box-shadow:0 8px 24px rgba(251,191,36,.25);
    animation:bannerPop .5s cubic-bezier(.34,1.56,.64,1);
    position:relative;overflow:hidden;
}
.try-again-banner::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5),transparent 70%);
    transform:translateX(-100%);
    animation:shimmer 2.5s ease-in-out infinite;
}
.tab-emoji{font-size:36px;animation:wiggle 1s ease-in-out infinite}
.tab-body{flex:1;color:#92400e}
.tab-body b{display:block;font-size:16px;margin-bottom:2px;color:#7c2d12}
.tab-body div{font-size:14px}
.tab-attempts{
    background:linear-gradient(135deg,#f59e0b,#dc2626);
    color:#fff;font-weight:800;font-size:24px;
    width:54px;height:54px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(245,158,11,.45);
    animation:pulse 1.4s ease-in-out infinite;
}
@keyframes bannerPop{from{transform:scale(.85) translateY(-10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes shimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
@keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.slot-display{display:flex;justify-content:center;gap:8px;margin:18px 0}
.slot-display.big{gap:14px}
.slot-reel{
    width:54px;height:74px;border-radius:12px;
    background:linear-gradient(180deg,#1e1b4b,#0f172a);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-family:'Manrope',monospace;font-weight:800;font-size:32px;
    box-shadow:inset 0 4px 12px rgba(0,0,0,.45), 0 6px 18px rgba(15,23,42,.25);
    overflow:hidden;position:relative;
}
.slot-display.big .slot-reel{width:74px;height:96px;font-size:44px}
@media (min-width:600px){
    .slot-display{gap:10px}
    .slot-reel{width:64px;height:84px;font-size:38px}
    .slot-display.big .slot-reel{width:84px;height:108px;font-size:52px}
}
.slot-reel span{display:block;animation:none}
.slot-reel.spinning span{animation:reelSpin .12s linear infinite}
@keyframes reelSpin{
    0%{transform:translateY(0);opacity:1}
    50%{transform:translateY(-20px);opacity:.4}
    100%{transform:translateY(0);opacity:1}
}

.codes-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:14px;max-height:480px;overflow:auto;padding:10px;background:#f8fafc;border:1px solid var(--border);border-radius:14px;-webkit-overflow-scrolling:touch}
.codes-grid.public{max-height:none}
.codes-grid.is-disabled{opacity:.6;pointer-events:none;filter:grayscale(.4)}
@media (min-width:600px){.codes-grid{grid-template-columns:repeat(8,1fr)}}
@media (min-width:981px){.codes-grid{grid-template-columns:repeat(10,1fr)}}
.code{padding:9px 0;border:1px solid var(--border);background:#fff;border-radius:9px;cursor:pointer;font-weight:700;text-align:center;font-size:13px;font-family:'Manrope',monospace;color:var(--text);transition:background-color .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s}
.code:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.05);box-shadow:0 4px 10px rgba(109,40,217,.3)}
.code.selected{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(109,40,217,.4)}
.code.used,.codes-grid.public .code.used{background:#fee2e2;color:#991b1b;border-color:#fecaca;text-decoration:line-through;cursor:not-allowed}
.codes-grid.public .code.free{background:#dcfce7;color:#166534;border-color:#bbf7d0;cursor:default}
.code.last-try{background:#fef3c7;color:#92400e;border-color:#fbbf24;animation:lastTryPulse 1.4s ease-in-out infinite}
@keyframes lastTryPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.5)}50%{box-shadow:0 0 0 6px rgba(251,191,36,0)}}

.info{display:flex;align-items:center;gap:10px;background:#fffbeb;border:1px solid #fde68a;padding:12px 16px;border-radius:12px;color:#92400e;margin:14px 0;font-size:14px}

.prizes{padding-left:20px}
.prizes li{margin:6px 0}

.big-icon{display:inline-flex;color:var(--primary);margin-bottom:12px}

.casino-overlay{
    position:fixed;inset:0;z-index:100;
    background:radial-gradient(circle at 50% 30%, rgba(109,40,217,.6), rgba(15,23,42,.95));
    display:flex;align-items:center;justify-content:center;
    animation:fadeIn .3s ease;
    padding:14px;
}
.casino-overlay[hidden]{display:none}
.casino-card{
    background:linear-gradient(180deg,#1e1b4b,#0f172a);
    color:#fff;padding:28px 24px;border-radius:24px;text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    border:1px solid rgba(255,255,255,.1);
    max-width:90vw;
}
.casino-title{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:700;margin-bottom:14px;color:var(--gold)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.winner-spotlight{
    position:relative;
    background:linear-gradient(135deg,#1e1b4b 0%, #6d28d9 50%, #ec4899 100%);
    color:#fff;border-radius:24px;padding:32px 20px;margin:16px 0 22px;
    text-align:center;overflow:hidden;
    box-shadow:0 20px 60px rgba(109,40,217,.35);
}
@media (min-width:600px){.winner-spotlight{padding:48px 30px}}
.spotlight-inner{position:relative;z-index:2}
.winner-spotlight .crown{display:inline-flex;color:var(--gold);filter:drop-shadow(0 6px 18px rgba(245,180,0,.5));margin-bottom:8px}
.winner-spotlight .kicker{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(8px)}
.winner-name{font-size:30px;margin:8px 0;font-weight:800;line-height:1.1}
.winner-name.big{font-size:38px}
@media (min-width:600px){.winner-name{font-size:42px}.winner-name.big{font-size:54px}}
.winner-prize{display:inline-flex;align-items:center;gap:8px;font-size:16px;background:rgba(255,255,255,.15);padding:8px 16px;border-radius:999px;margin:6px 0}
.winner-code{font-size:15px;opacity:.9}
.winner-spotlight .prize-img{max-width:100%;width:auto;border-radius:14px;margin:16px auto;display:block;border:4px solid rgba(255,255,255,.2)}

.confetti{
    position:absolute;inset:0;pointer-events:none;
    background-image:
            radial-gradient(circle, #fbbf24 2px, transparent 2px),
            radial-gradient(circle, #ec4899 2px, transparent 2px),
            radial-gradient(circle, #22d3ee 2px, transparent 2px),
            radial-gradient(circle, #84cc16 2px, transparent 2px);
    background-size: 60px 60px, 80px 80px, 100px 100px, 70px 70px;
    background-position: 0 0, 20px 30px, 40px 10px, 10px 50px;
    opacity:.5;
    animation:confettiDrift 8s linear infinite;
}
.confetti.big{opacity:.8}
@keyframes confettiDrift{from{background-position:0 0,20px 30px,40px 10px,10px 50px}to{background-position:0 200px,20px 230px,40px 210px,10px 250px}}

.fireworks{position:absolute;inset:0;pointer-events:none}
.fireworks span{
    position:absolute;width:6px;height:6px;border-radius:50%;
    background:radial-gradient(circle, #fff, transparent);
    box-shadow:0 0 0 4px rgba(255,255,255,.4);
    animation:firework 2.4s ease-out infinite;
}
.fireworks span:nth-child(1){top:20%;left:15%;background:radial-gradient(circle,#fbbf24,transparent);animation-delay:0s}
.fireworks span:nth-child(2){top:30%;left:80%;background:radial-gradient(circle,#ec4899,transparent);animation-delay:.4s}
.fireworks span:nth-child(3){top:60%;left:25%;background:radial-gradient(circle,#22d3ee,transparent);animation-delay:.8s}
.fireworks span:nth-child(4){top:70%;left:75%;background:radial-gradient(circle,#84cc16,transparent);animation-delay:1.2s}
.fireworks span:nth-child(5){top:45%;left:50%;background:radial-gradient(circle,#a78bfa,transparent);animation-delay:1.6s}
@keyframes firework{
    0%{transform:scale(0);opacity:1;box-shadow:0 0 0 0 currentColor}
    60%{transform:scale(8);opacity:.6}
    100%{transform:scale(14);opacity:0}
}

.bounce{animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.prev-winners{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:10px}
.prev-winner{
    display:block;padding:16px;border-radius:14px;
    background:linear-gradient(180deg,#fff,#fafafe);
    border:1px solid var(--border);color:var(--text);
    transition:transform .15s, box-shadow .15s;
}
.prev-winner:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.pw-rank{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.04em}
.pw-name{font-size:17px;font-weight:700;margin:4px 0}
.pw-prize{color:var(--muted);font-size:13px}
.pw-date{font-size:12px;margin-top:6px}

.winners-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.winner-row{
    display:grid;grid-template-columns:50px 1fr;gap:8px;align-items:center;
    padding:12px;background:#fff;border:1px solid var(--border);border-radius:12px;color:var(--text);
    transition:transform .15s, box-shadow .15s, border-color .15s;
}
.winner-row:hover{transform:translateX(4px);box-shadow:var(--shadow-sm);text-decoration:none;border-color:var(--primary)}
.wr-id{font-weight:700;color:var(--primary)}
.wr-info{display:flex;flex-direction:column}
.wr-info b{font-size:15px}
.wr-code{font-family:monospace;background:#f1f5f9;padding:4px 10px;border-radius:6px;font-weight:700;justify-self:start}
.wr-date{font-size:12px}
@media (min-width:720px){
    .winner-row{grid-template-columns:60px 1fr auto auto;gap:14px;padding:14px}
    .wr-info b{font-size:16px}
}

.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:16px 0}
.board-head h1{margin:6px 0}
.board-stats{display:flex;gap:10px;flex-wrap:wrap}
.stat-mini{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;min-width:96px}
.stat-mini span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stat-mini b{font-size:20px;font-weight:800;color:var(--primary)}

.prize-banner{margin:14px 0}
.prize-banner img{max-width:100%;border-radius:16px;display:block;margin:0 auto}
.prize-banner.desktop {display: none;}
@media (min-width:720px){
    .prize-banner.desktop{display:block}
    .prize-banner.mobile{display:none}
}
.cta-strip{
    margin:20px 0;padding:20px;border-radius:20px;
    background:linear-gradient(135deg,#0f172a 0%, #6d28d9 100%);color:#fff;
    display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
.cta-strip h3{margin:0 0 6px;font-size:19px}
.cta-strip p{margin:0;color:#cbd5e1;font-size:14px}

.last-winner-mini{margin:14px 0;padding:16px;background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(236,72,153,.08));border-radius:14px}
.lw-name{font-size:22px;font-weight:800;margin:4px 0}

.attempts{background:#eef2ff;color:#3730a3;padding:6px 12px;border-radius:10px;font-size:14px}
.my-link{margin:14px 0}
.my-link input{font-family:monospace;font-size:13px}
.copy-row{display:flex;gap:8px;flex-wrap:nowrap}
.copy-row input{flex:1;min-width:0}
.copy-row .btn{flex-shrink:0}
.promo-big{margin:14px 0;padding:20px;background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(236,72,153,.08));border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.promo-big code{font-size:28px;font-weight:800;letter-spacing:4px;color:var(--primary)}
.prize-img{max-width:100%;border-radius:14px;margin:10px 0}
.timer{display:inline-flex;align-items:center;gap:6px;background:#fff7ed;border:1px solid #fed7aa;padding:8px 14px;border-radius:12px;color:#9a3412;font-weight:500;font-size:14px}

.stat{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.stat span{color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.stat b{font-size:28px;margin-top:8px;font-weight:800;color:var(--primary)}

.search{margin:14px 0;display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.search .input-icon{flex:1;min-width:200px;max-width:420px}
.filter-card h3{margin-top:0}

.inline-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:10px 0}
.inline-form label{margin:0;flex:1;min-width:160px}
.danger-card{border-color:#fecaca;background:#fff5f5}
.danger-card h3{color:var(--danger)}

.ref-empty{padding:40px 20px}
.ref-hero{
    position:relative;
    background:linear-gradient(135deg,#1e1b4b 0%, #6d28d9 50%, #ec4899 100%);
    color:#fff;border-radius:24px;padding:32px 20px;margin:14px 0 18px;
    text-align:center;overflow:hidden;
    box-shadow:0 20px 60px rgba(109,40,217,.35);
}
@media (min-width:720px){.ref-hero{padding:46px 30px}}
.ref-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ref-hero-bg span{
    position:absolute;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);
    animation:bgFloat 12s ease-in-out infinite;
}
.ref-hero-bg span:nth-child(1){width:160px;height:160px;top:-40px;left:-30px;animation-delay:0s}
.ref-hero-bg span:nth-child(2){width:200px;height:200px;top:50%;right:-60px;animation-delay:-3s;background:radial-gradient(circle,rgba(251,191,36,.25),transparent 70%)}
.ref-hero-bg span:nth-child(3){width:120px;height:120px;bottom:-30px;left:30%;animation-delay:-6s;background:radial-gradient(circle,rgba(236,72,153,.28),transparent 70%)}
.ref-hero-bg span:nth-child(4){width:90px;height:90px;top:20%;right:20%;animation-delay:-2s}
.ref-hero-bg span:nth-child(5){width:140px;height:140px;bottom:20%;left:5%;animation-delay:-8s}
@keyframes bgFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-15px) scale(1.1)}}
.ref-hero-inner{position:relative;z-index:2}
.ref-hero .kicker{background:rgba(255,255,255,.18);color:#fff}
.ref-title{font-size:28px;margin:10px 0;font-weight:800;line-height:1.15}
@media (min-width:600px){.ref-title{font-size:36px}}
.ref-lead{font-size:16px;margin:0 0 16px;opacity:.95}
.ref-prize-img-wrap{position:relative;display:inline-block;margin:14px auto}
.ref-prize-img{max-width:100%;max-height:220px;border-radius:16px;border:4px solid rgba(255,255,255,.25);display:block;position:relative;z-index:2}
.ref-prize-glow{position:absolute;inset:-20px;background:radial-gradient(circle,rgba(251,191,36,.4),transparent 60%);filter:blur(20px);z-index:1;animation:pulse 3s ease-in-out infinite}
.ref-timer{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff;margin-top:10px}

.ref-stats{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}
@media (min-width:600px){.ref-stats{grid-template-columns:repeat(3,1fr)}}
.ref-stat{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}
.ref-stat-ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(236,72,153,.12));color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ref-stat-ico.gold{background:linear-gradient(135deg,rgba(245,180,0,.18),rgba(251,191,36,.18));color:#d97706}
.ref-stat-ico.pink{background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(244,114,182,.18));color:var(--accent)}
.ref-stat span{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ref-stat b{font-size:22px;font-weight:800;color:var(--text)}

.ref-progress-card{padding:18px}
.ref-progress{
    position:relative;height:14px;background:#f1f5f9;border-radius:999px;overflow:hidden;margin:14px 0 8px;
}
.ref-progress-bar{
    height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));
    border-radius:999px;transition:width .6s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 0 12px rgba(236,72,153,.5);
    position:relative;overflow:hidden;
}
.ref-progress-bar::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    animation:shimmer 2s linear infinite;
}
.ref-progress-flag{
    position:absolute;top:-8px;font-size:22px;transition:left .6s cubic-bezier(.34,1.56,.64,1);
}

.ref-howto h3{margin-top:0}
.ref-steps{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
@media (min-width:600px){.ref-steps{grid-template-columns:repeat(3,1fr)}}
.ref-step{
    position:relative;padding:18px 14px 14px;border-radius:16px;
    background:linear-gradient(180deg,#fafafe,#fff);
    border:1px solid var(--border);text-align:center;
    transition:transform .2s, box-shadow .2s;
}
.ref-step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ref-step-num{
    position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    width:28px;height:28px;border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
    box-shadow:0 4px 12px rgba(109,40,217,.35);
}
.ref-step-ico{color:var(--primary);margin:8px 0 10px;display:inline-flex}
.ref-step b{display:block;margin-bottom:4px}
.ref-step p{margin:0;font-size:13px;color:var(--muted)}

.ref-link-card{background:linear-gradient(180deg,#fff,#fafafe)}
.ref-promo-box{
    margin:10px 0 16px;padding:18px;border-radius:16px;text-align:center;
    background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(236,72,153,.08));
    border:2px dashed rgba(109,40,217,.25);
}
.ref-promo-code{
    font-size:30px;font-weight:800;letter-spacing:4px;color:var(--primary);
    margin:6px 0 10px;font-family:'Manrope',monospace;
    word-break:break-all;
}
@media (min-width:600px){.ref-promo-code{font-size:38px}}

.ref-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ref-share .btn{flex:1;min-width:120px}

.ref-leaders h3{margin-top:0}
.ref-empty-leaders{padding:30px 10px;text-align:center}
.ref-podium{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:end;
    margin:18px 0;min-height:200px;
}
.podium-place{
    text-align:center;padding:10px 6px;border-radius:14px 14px 0 0;
    background:linear-gradient(180deg,#fff,#fafafe);
    border:1px solid var(--border);border-bottom:0;
    position:relative;
}
.podium-medal{font-size:34px;line-height:1;margin-bottom:4px;display:block}
.podium-name{font-weight:700;font-size:13px;line-height:1.2;margin-bottom:4px;word-break:break-word}
.podium-count{font-size:14px;font-weight:700;color:var(--primary);display:inline-flex;align-items:center;gap:4px}
.podium-bar{height:50px;background:linear-gradient(180deg,#e2e8f0,#cbd5e1);margin:8px -6px -10px;border-radius:0;}
.podium-1{background:linear-gradient(180deg,#fef3c7,#fde68a);border-color:#fbbf24;transform:translateY(-12px);box-shadow:0 10px 30px rgba(251,191,36,.3)}
.podium-1 .podium-bar{height:90px;background:linear-gradient(180deg,#fbbf24,#f59e0b)}
.podium-2{background:linear-gradient(180deg,#f1f5f9,#e2e8f0);border-color:#94a3b8}
.podium-2 .podium-bar{height:70px;background:linear-gradient(180deg,#cbd5e1,#94a3b8)}
.podium-3{background:linear-gradient(180deg,#fef3c7,#fde2c2);border-color:#d97706}
.podium-3 .podium-bar{height:50px;background:linear-gradient(180deg,#f59e0b,#92400e)}
@media (min-width:600px){
    .podium-medal{font-size:42px}
    .podium-name{font-size:15px}
    .podium-count{font-size:16px}
}

.ref-rest{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.ref-row{
    display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;
    padding:10px 14px;background:#fff;border:1px solid var(--border);border-radius:10px;
    transition:transform .15s, border-color .15s;
}
.ref-row:hover{transform:translateX(3px);border-color:var(--primary)}
.ref-row-rank{font-weight:700;color:var(--muted);font-size:14px}
.ref-row-name{font-weight:600;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-row-count{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-size:14px}

body.admin{display:flex;min-height:100vh;background:#f1f5f9;flex-direction:column}
.sidebar{
    width:100%;flex-shrink:0;
    background:linear-gradient(180deg,#0f172a 0%, #1e1b4b 100%);
    color:#cbd5e1;padding:22px 16px;
    position:fixed;top:0;left:-280px;height:100vh;width:260px;overflow:auto;transition:left .25s;z-index:40;
}
.sidebar.open{left:0}
.sidebar .logo{display:flex;align-items:center;gap:10px;font-size:18px;color:#fff;margin-bottom:22px;padding:0 8px}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar nav a{display:flex;align-items:center;gap:10px;color:#cbd5e1;padding:10px 12px;border-radius:10px;font-weight:500;font-size:14px;transition:background-color .15s, color .15s}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.admin-main{flex:1;padding:60px 14px 30px;max-width:100%;overflow-x:auto}
.admin-toggle{display:inline-flex;position:fixed;top:14px;right:14px;z-index:50;background:#0f172a;color:#fff;border:0;border-radius:10px;padding:8px;cursor:pointer;align-items:center;justify-content:center}
@media (min-width:901px){
    body.admin{flex-direction:row}
    .sidebar{position:sticky;top:0;left:0;height:100vh;width:248px}
    .admin-toggle{display:none}
    .admin-main{padding:28px}
}

/* === QR-кнопка в шапке (только мобайл) === */
.nav-qr-btn{
    display:inline-flex;background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(236,72,153,.12));
    border:0;cursor:pointer;color:var(--primary);
    padding:8px;border-radius:10px;align-items:center;justify-content:center;
    margin-left:auto;width:42px;height:42px;flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s, transform .15s;
}
.nav-qr-btn + .nav-toggle{margin-left:6px}
.nav-qr-btn:hover{background:rgba(109,40,217,.2)}
.nav-qr-btn:active{transform:scale(.94)}

@media (min-width:981px){
    .nav-qr-btn{display:none}
    .nav-group:hover > .nav-dropdown,
    .nav-group.hover-open > .nav-dropdown,
    .nav-group.open > .nav-dropdown{display:flex}
    .nav-group:hover > .nav-group-btn,
    .nav-group.hover-open > .nav-group-btn{background:#eef2ff;color:var(--primary)}
    .nav-group:hover > .nav-group-btn .nav-caret,
    .nav-group.hover-open > .nav-group-btn .nav-caret{transform:rotate(180deg)}

}

/* === QR-модалка === */
.qr-modal{
    position:fixed;inset:0;z-index:200;
    display:flex;align-items:center;justify-content:center;padding:16px;
    animation:fadeIn .2s ease;
}
.qr-modal[hidden]{display:none}
.qr-modal-backdrop{
    position:absolute;inset:0;background:rgba(15,23,42,.55);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.qr-modal-card{
    position:relative;background:#fff;border-radius:20px;padding:22px 20px 20px;
    max-width:340px;width:100%;box-shadow:var(--shadow-lg);
    text-align:center;animation:qrPop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qrPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.qr-modal-close{
    position:absolute;top:10px;right:10px;background:#f1f5f9;border:0;border-radius:10px;
    width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--text);
}
.qr-modal-close:hover{background:#e2e8f0}
.qr-modal-title{margin:0 0 14px;font-size:18px}
.qr-modal-img{display:flex;justify-content:center;padding:8px;background:#f8fafc;border-radius:14px;margin-bottom:14px}
.qr-modal-img img{display:block;max-width:100%;height:auto;border-radius:8px}
.qr-modal-link{display:flex;gap:6px;align-items:stretch}
.qr-modal-link input{flex:1;min-width:0;font-family:monospace;font-size:12px;margin:0;padding:10px 12px}
.qr-modal-link .btn{flex-shrink:0}