*,::before,::after{margin:0;padding:0;box-sizing:border-box}
:root{
    font-size:16px;
    --gold:#F0A500;--blue:#4DA8DA;--navy:#2A2A72;--dark:#0d0d12;--light:#E8F1F8;
    --gold-g:rgba(240,165,0,.2);--blue-g:rgba(77,168,218,.15);
    --glass:rgba(18,18,24,.92);--glass-b:rgba(200,220,240,.06);
    --text:#E0E8F0;--text2:#8899AA;--text3:#5A6A7A;
    --border:rgba(200,220,240,.05);
    --bg:var(--dark);
    --r:16px;--rs:10px;
    --f:'Inter',system-ui,-apple-system,sans-serif;
    --accent:var(--gold);
    --glow-color:#F0A500;
    --glow-rgb:240,165,0;
}

[data-theme="light"]{
    --dark:#f8f9fb;--light:#1a1a2e;
    --glass:rgba(255,255,255,.92);--glass-b:rgba(0,0,0,.06);
    --text:#1a1a2e;--text2:#5a6a7a;--text3:#8899aa;
    --border:rgba(0,0,0,.06);
    --bg:#f0f2f5;
}

body{
    font:400 1rem/1.6 var(--f);
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
    transition:background .3s, color .3s;
}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:rgba(200,220,240,.1);border-radius:3px}

.glass{
    background:var(--glass);
    backdrop-filter:blur(20px);
    border:1px solid var(--glass-b);
    border-radius:var(--r);
    transition:background .3s, border-color .3s;
}

/* ===== BUTTONS ===== */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 28px;
    border:none;
    border-radius:var(--rs);
    font:600 1rem var(--f);
    cursor:pointer;
    transition:all .2s;
    color:#fff;
    position:relative;
    overflow:hidden;
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);opacity:0;transition:opacity .2s}
.btn:hover::after{opacity:1}
.btn-glow{background:linear-gradient(135deg,var(--gold),#D89400);box-shadow:0 4px 20px var(--gold-g)}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 6px 28px var(--gold-g)}
.btn-glow:active{transform:scale(.98)}
.btn-ghost{background:rgba(200,220,240,.04);border:1px solid var(--glass-b);color:var(--text2)}
.btn-ghost:hover{background:rgba(200,220,240,.08);color:var(--text);border-color:rgba(200,220,240,.12)}
.btn-danger{background:linear-gradient(135deg,#E05555,#C04040)}
.btn-lg{padding:16px 32px;font-size:1.1rem}
.btn-sm{padding:10px 18px;font-size:0.875rem}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}

.header-controls{
    display:flex;
    align-items:center;
    gap:10px;
}

.icon-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(200,220,240,.04);
    border:1px solid var(--glass-b);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    transition:all .2s;
    color:var(--text);
}
.icon-btn:hover{background:rgba(240,165,0,.08);border-color:rgba(240,165,0,.3)}
.icon-btn.muted{opacity:.5}
[data-theme="light"] .icon-btn{background:rgba(0,0,0,.03)}

/* ===== INPUTS ===== */
.input,.textarea,select{
    width:100%;
    padding:14px 18px;
    background:rgba(200,220,240,.03);
    border:1px solid var(--glass-b);
    border-radius:var(--rs);
    color:var(--text);
    font:400 1rem var(--f);
    outline:none;
    transition:all .2s;
}
[data-theme="light"] .input,
[data-theme="light"] .textarea{
    background:rgba(0,0,0,.02);
}
.input:focus,.textarea:focus{border-color:rgba(240,165,0,.4);box-shadow:0 0 0 3px rgba(240,165,0,.08)}
.textarea{resize:vertical;min-height:80px}
.fg{margin-bottom:16px}
.fl{display:block;margin-bottom:8px;font:600 0.8rem var(--f);color:var(--text3);text-transform:uppercase;letter-spacing:0.5px}

/* ===== TOAST ===== */
.toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(16,185,129,.9);
    color:#fff;
    padding:12px 24px;
    border-radius:10px;
    font-weight:600;
    font-size:1rem;
    z-index:9999;
    animation:toastIn .3s ease;
    box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.toast.error{background:rgba(220,80,80,.9)}
@keyframes toastIn{
    from{opacity:0;transform:translateX(-50%) translateY(20px)}
    to{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ===== CREATE PAGE ===== */
.create-page{
    display:flex;
    gap:40px;
    max-width:1600px;
    margin:0 auto;
    padding:30px 50px;
    min-height:100vh;
    align-items:stretch;
}

.create-left{
    flex:1.1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.create-right-wrapper{
    flex:0.9;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
}

.create-form{width:100%}
.result-wrapper{display:flex;justify-content:center;align-items:center;width:100%}

.hero-section{
    display:flex;
    align-items:center;
    gap:24px;
    margin-bottom:32px;
}

.logo-main svg{
    filter:drop-shadow(0 0 30px rgba(240,165,0,.25));
}

.hero-text h1{
    font-size:2.8rem;
    font-weight:800;
    line-height:1.1;
    margin-bottom:8px;
    background:linear-gradient(135deg,var(--text) 20%,var(--gold) 80%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    letter-spacing:-1px;
}

.hero-text .subtitle{
    font-size:1.1rem;
    color:var(--text2);
    line-height:1.6;
    max-width:480px;
}

.features{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
}

.feature{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    padding:20px 14px;
    border-radius:14px;
    background:rgba(200,220,240,.02);
    border:1px solid var(--glass-b);
    transition:all .25s ease;
}
[data-theme="light"] .feature{background:rgba(0,0,0,.015)}
.feature:hover{
    background:rgba(200,220,240,.04);
    border-color:rgba(240,165,0,.15);
    transform:translateY(-3px);
}

.ficon{
    font-size:1.75rem;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(240,165,0,.1),rgba(240,165,0,.05));
    flex-shrink:0;
}

.feature h3{
    font-size:0.95rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:2px;
}
.feature p{
    font-size:0.8rem;
    color:var(--text3);
    line-height:1.4;
}

.create-card{
    padding:28px;
    height:100%;
    display:flex;
    flex-direction:column;
}

.create-card .fg{margin-bottom:14px}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.create-submit{width:100%;margin-top:auto;padding:16px 32px}

.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.type-card{
    padding:14px;
    text-align:center;
    cursor:pointer;
    background:rgba(200,220,240,.02);
    border:2px solid transparent;
    border-radius:var(--rs);
    transition:all .2s;
}
[data-theme="light"] .type-card{background:rgba(0,0,0,.02)}
.type-card:hover{border-color:rgba(240,165,0,.2)}
.type-card.active{border-color:var(--gold);background:rgba(240,165,0,.06)}
.tc-icon{font-size:1.5rem;margin-bottom:4px}
.type-card h3{font-size:0.95rem;font-weight:600}

.file-drop{
    border:2px dashed rgba(200,220,240,.1);
    border-radius:var(--rs);
    padding:16px;
    text-align:center;
    cursor:pointer;
    transition:all .2s;
}
[data-theme="light"] .file-drop{border-color:rgba(0,0,0,.1)}
.file-drop:hover{border-color:rgba(240,165,0,.3);background:rgba(240,165,0,.02)}
.file-drop input{display:none}
.fd-icon{font-size:1.75rem;opacity:.5}
.fd-hint{font-size:0.85rem;color:var(--text3);margin-top:4px}
.fd-name{font-size:0.85rem;font-weight:600;margin-top:4px;color:var(--text3)}
.file-drop.picked{border-color:rgba(52,211,153,.5);border-style:solid;background:rgba(52,211,153,.03)}
.file-drop.picked .fd-icon{opacity:1}
.file-drop.picked .fd-name{color:#34d399}

.result-card-inline{
    padding:28px;
    border:1px solid rgba(52,211,153,0.2);
    background:rgba(52,211,153,0.04);
    text-align:center;
    width:100%;
    border-radius:var(--r);
}
.result-card-inline h3{color:#34d399;margin-bottom:14px;font-size:1.25rem}
.link-row{display:flex;gap:10px;margin:12px 0}
.link-row input{
    flex:1;
    font-size:0.9rem;
    background:rgba(0,0,0,.2);
    border:1px solid var(--glass-b);
    color:var(--text);
}
.link-row .btn{padding:12px 20px}

/* ===== SESSION PAGE ===== */
.session-wrap{
    position:relative;
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--bg);
}
[data-theme="dark"] .session-wrap{
    background:radial-gradient(ellipse at center, #151520 0%, var(--dark) 70%);
}

/* ШАПКА */
.s-header{
    padding:8px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(18,18,24,.75);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    gap:12px;
    flex-shrink:0;
    z-index:100;
    min-height:52px;
}
.s-header .title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}

.logo-icon{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.logo-icon svg{
    width:32px;
    height:32px;
    filter:drop-shadow(0 0 6px rgba(240,165,0,.2));
}

.s-header .title-area h1{
    font-size:1.25rem;
    font-weight:700;
    background:linear-gradient(135deg,var(--text),var(--gold));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.s-header .right-area{display:flex;align-items:center;gap:10px;flex-shrink:0}
.s-header .viewers{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:1rem;
    font-weight:600;
    color:var(--gold);
    background:rgba(240,165,0,.08);
    padding:6px 14px;
    border-radius:20px;
}
.s-header .invite-box{display:flex;align-items:center;gap:6px}
.s-header .invite-box input{
    width:160px;
    padding:6px 10px;
    font-size:0.8rem;
    background:rgba(0,0,0,.3);
    border:1px solid var(--glass-b);
    border-radius:var(--rs);
    color:var(--text2);
}
[data-theme="light"] .s-header{background:rgba(255,255,255,.75)}
[data-theme="light"] .s-header .invite-box input{background:rgba(0,0,0,.05)}

/* Main content */
.s-body{
    flex:1;
    display:flex;
    overflow:hidden;
    min-height:0;
}

.s-left{
    width:360px;
    min-width:220px;
    flex-shrink:1;
    margin:14px;
    margin-right:0;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:hidden;
    z-index:10;
}

.s-right{
    width:380px;
    min-width:240px;
    flex-shrink:1;
    margin:14px;
    margin-left:0;
    padding:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    z-index:10;
}

.s-center{
    flex:1;
    min-width:300px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:14px;
    position:relative;
    overflow:visible;
    z-index:1;
}

.panel-header{
    font-size:1.15rem;
    font-weight:600;
    color:var(--text);
    padding-bottom:14px;
    border-bottom:1px solid var(--glass-b);
    margin-bottom:12px;
    text-align:center;
}

.stats-row{
    display:flex;
    gap:10px;
    margin-bottom:14px;
}

.stat-box{
    flex:1;
    text-align:center;
    padding:14px 8px;
    background:rgba(200,220,240,.02);
    border-radius:12px;
    border:1px solid var(--glass-b);
    min-width:0;
}
[data-theme="light"] .stat-box{background:rgba(0,0,0,.02)}

.stat-box .num{
    font-size:1.75rem;
    font-weight:800;
    color:var(--gold);
    line-height:1.1;
}
.stat-box .lbl{
    font-size:0.8rem;
    color:var(--text3);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-top:4px;
}

.search-wrap{position:relative;margin-bottom:14px}
.search-wrap input{
    width:100%;
    padding:12px 14px 12px 40px;
    background:rgba(200,220,240,.02);
    border:1px solid var(--glass-b);
    border-radius:var(--rs);
    color:var(--text);
    font-size:1rem;
}
[data-theme="light"] .search-wrap input{background:rgba(0,0,0,.02)}
.search-wrap::before{content:'🔍';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1rem;opacity:.5}

.panel-section{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.section-title{font:600 0.85rem var(--f);color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.p-list,.log-wrap{flex:1;overflow-y:auto;min-height:0}

.p-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    font-size:1rem;
    transition:background .15s;
    margin-bottom:3px;
}
.p-item:hover{background:rgba(200,220,240,.03)}
[data-theme="light"] .p-item:hover{background:rgba(0,0,0,.03)}
.p-item .dot{width:8px;height:8px;border-radius:50%;background:#50C878;flex-shrink:0;box-shadow:0 0 4px rgba(80,200,120,.4)}
.p-item.out{opacity:.4}
.p-item.out .dot{background:#E05555;box-shadow:0 0 4px rgba(220,80,80,.4)}
.p-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

.log-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.9rem;
    color:var(--text2);
    padding:8px 0;
    border-bottom:1px solid rgba(200,220,240,.03);
}
[data-theme="light"] .log-item{border-color:rgba(0,0,0,.04)}
.log-item .log-time{color:var(--text3);font-size:0.8rem;min-width:52px;font-family:monospace}
.log-item .log-action{color:#E05555;font-weight:600;min-width:48px;font-size:0.85rem}
.log-item .log-name{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== WHEEL ===== */
.wheel-container{
    position:relative;
    flex:1;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:0;
    padding-top:45px;
}

.wheel-outer{
    position:relative;
    --wsize:min(100%, 70vh, 620px);
    width:var(--wsize);
    height:var(--wsize);
    border-radius:50%;
    flex-shrink:0;
    transition:filter .3s ease;
}

.wheel-outer.spinning{
    animation:wheelGlow 0.6s ease-in-out infinite alternate;
}
@keyframes wheelGlow{
    0%{filter:drop-shadow(0 0 52px rgba(var(--glow-rgb), 0.5)) drop-shadow(0 0 104px rgba(var(--glow-rgb), 0.05))}
    100%{filter:drop-shadow(0 0 78px rgba(var(--glow-rgb), 0.5)) drop-shadow(0 0 156px rgba(var(--glow-rgb), 0.06))}
}

.pointer{
    position:absolute;
    top:-36px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;
}
.pointer::before{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-top:28px solid var(--gold);
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
    transition:border-top-color .3s;
}
.pointer::after{
    content:'';
    position:absolute;
    top:-5px;
    left:50%;
    transform:translateX(-50%);
    width:16px;
    height:6px;
    background:var(--gold);
    border-radius:3px 3px 0 0;
    transition:background .3s;
}
.pointer.active::before{
    border-top-color:var(--glow-color);
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) drop-shadow(0 0 25px rgba(var(--glow-rgb), 0.12));
}
.pointer.active::after{
    background:var(--glow-color);
}

#wheelCanvas{
    width:100%;
    height:100%;
    display:block;
    border-radius:50%;
}

.result-display{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:30;
    background:rgba(0,0,0,.92);
    border-radius:18px;
    padding:22px 44px;
    min-width:220px;
    text-align:center;
    border:2px solid rgba(240,165,0,.4);
    box-shadow:0 12px 48px rgba(0,0,0,.5);
    pointer-events:none;
}
.result-display .current-name{
    font-size:clamp(26px, 5vw, 44px);
    font-weight:800;
    color:#fff;
    text-shadow:0 0 24px rgba(240,165,0,.5);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:340px;
    font-family:'Inter',system-ui,sans-serif;
}
.result-display.eliminated{border-color:rgba(220,80,80,.6);background:rgba(20,0,0,.92)}
.result-display.eliminated .current-name{
    color:#E05555;
    text-decoration:line-through;
    text-shadow:0 0 24px rgba(220,80,80,.6);
}

.bottom-controls{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:14px 0;
    z-index:10;
    flex-shrink:0;
}
.ctrl-area{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}
.ctrl-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.speed-box{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1rem;
    color:var(--text3);
    background:var(--glass);
    padding:12px 22px;
    border-radius:24px;
    border:1px solid var(--glass-b);
}
.speed-box button{
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(200,220,240,.04);
    border:1px solid var(--glass-b);
    color:var(--text);
    font-size:1.2rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .15s;
}
.speed-box button:hover{background:rgba(240,165,0,.1);border-color:rgba(240,165,0,.3)}
.speed-val{font-size:1.35rem;font-weight:700;min-width:28px;text-align:center;color:var(--gold)}

/* Chat */
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.chat-input{padding:16px;border-top:1px solid var(--glass-b);display:flex;gap:12px}
.chat-input input{flex:1;padding:14px 18px;font-size:1rem}
.chat-input button{padding:14px 20px}
.chat-msg{background:rgba(200,220,240,.02);border-radius:10px;padding:14px 16px;border-left:3px solid var(--gold)}
[data-theme="light"] .chat-msg{background:rgba(0,0,0,.02)}
.chat-msg .u{display:block;font-weight:600;font-size:0.9rem;margin-bottom:5px;color:var(--text2)}
.chat-msg .u.org{color:var(--gold)}
.chat-msg .m{font-size:1.05rem;color:var(--text);line-height:1.5;word-break:break-word}

/* Overlays */
.login-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.login-box{padding:32px;width:min(100%,420px);text-align:center}
.login-box h2{font-size:1.5rem;margin-bottom:20px;font-weight:700}

.winner-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(10,10,15,.94);
    backdrop-filter:blur(20px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    animation:fadeIn .5s;
}
.winner-overlay.show{display:flex}
.winner-card{text-align:center;padding:48px 64px;background:var(--glass);border:2px solid var(--gold);border-radius:24px;box-shadow:0 0 40px var(--gold-g);animation:popIn .6s cubic-bezier(.34,1.56,.64,1)}
.winner-card .trophy{font-size:4.5rem;margin-bottom:16px}
.winner-card h2{font-size:0.9rem;color:var(--text3);text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;font-weight:600}
.winner-card .name{font-size:3rem;font-weight:800;line-height:1.2;background:linear-gradient(135deg,var(--gold),var(--light),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;word-break:break-word}
.winner-card .close-btn{margin-top:24px}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

.hidden{display:none!important}

/* ===== MOBILE MENU TOGGLE ===== */
.mobile-toggle{
    display:none;
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(200,220,240,.06);
    border:1px solid var(--glass-b);
    color:var(--text);
    font-size:1.2rem;
    cursor:pointer;
    align-items:center;
    justify-content:center;
}

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-nav{
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:var(--glass);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--glass-b);
    padding:8px 16px;
    padding-bottom:max(8px, env(safe-area-inset-bottom));
    z-index:200;
    gap:8px;
}

.mobile-nav-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:8px;
    border:none;
    background:transparent;
    color:var(--text3);
    font-size:0.7rem;
    cursor:pointer;
    border-radius:8px;
    transition:all .2s;
}
.mobile-nav-btn .nav-icon{font-size:1.3rem}
.mobile-nav-btn.active{color:var(--gold);background:rgba(240,165,0,.08)}

/* Mobile panels - FULLSCREEN */
.mobile-panel{
    display:none;
    position:fixed;
    top:52px;
    bottom:60px;
    bottom:calc(60px + env(safe-area-inset-bottom));
    left:0;
    right:0;
    background:var(--glass);
    backdrop-filter:blur(20px);
    border-top:1px solid var(--glass-b);
    z-index:150;
    overflow:hidden;
    animation:slideUp .3s ease;
}
.mobile-panel.show{display:flex;flex-direction:column}
@keyframes slideUp{
    from{transform:translateY(100%);opacity:0}
    to{transform:translateY(0);opacity:1}
}

.mobile-panel-header{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px 20px;
    border-bottom:1px solid var(--glass-b);
    flex-shrink:0;
    position:relative;
}
.mobile-panel-header h3{
    font-size:1.1rem;
    font-weight:600;
    text-align:center;
}
.mobile-panel-close{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(200,220,240,.06);
    border:none;
    color:var(--text);
    font-size:1.2rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mobile-panel-content{
    flex:1;
    overflow-y:auto;
    padding:16px 20px;
}

/* Mobile stats */
.mobile-stats{
    display:flex;
    gap:8px;
    margin-bottom:16px;
}
.mobile-stats .stat-box{
    padding:14px 8px;
}
.mobile-stats .stat-box .num{font-size:1.5rem}
.mobile-stats .stat-box .lbl{font-size:0.7rem}

/* ===== ADMIN PAGE ===== */
.admin-page{max-width:1000px;margin:0 auto;padding:32px;min-height:100vh}
.admin-page h1{font-size:2rem;font-weight:800;margin-bottom:24px;background:linear-gradient(135deg,var(--text),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center}
.admin-login{max-width:450px;margin:0 auto;padding:32px}
.admin-login h3{margin-bottom:20px;color:var(--text);font-size:1.25rem}

.admin-stats{
    display:flex;
    gap:16px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.admin-stat{
    background:var(--glass);
    border:1px solid var(--glass-b);
    border-radius:12px;
    padding:16px 24px;
    text-align:center;
}
.admin-stat .val{
    font-size:2rem;
    font-weight:800;
    color:var(--gold);
}
.admin-stat .lbl{
    font-size:0.8rem;
    color:var(--text3);
    text-transform:uppercase;
    margin-top:4px;
}

.badge{padding:6px 14px;border-radius:16px;font-size:0.875rem;font-weight:600;display:inline-block}
.badge-ok{background:rgba(80,200,120,0.1);color:#50C878}
.badge-end{background:rgba(240,165,0,0.1);color:#F0A500}
.badge-wait{background:rgba(77,168,218,0.1);color:#4DA8DA}

.session-row{background:rgba(200,220,240,.015);border:1px solid var(--glass-b);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
[data-theme="light"] .session-row{background:rgba(0,0,0,.015)}
.session-row-main{display:grid;grid-template-columns:1fr auto auto auto auto auto;gap:12px;padding:16px;align-items:center;cursor:pointer;transition:background .15s}
.session-row-main:hover{background:rgba(200,220,240,.03)}
.session-name{font-weight:600;color:var(--text);font-size:1rem}
.session-type{font-size:0.9rem;color:var(--text2)}
.session-viewers{font-size:1rem;color:var(--gold);font-weight:600}
.session-count{font-size:1rem;color:var(--text)}
.session-count span{color:#50C878;font-weight:600}
.session-date{font-size:0.8rem;color:var(--text3)}
.session-detail{display:none;padding:16px;border-top:1px solid var(--glass-b);background:rgba(0,0,0,.15)}
.session-detail.open{display:block}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.detail-box{background:rgba(200,220,240,.015);border:1px solid var(--glass-b);border-radius:10px;padding:14px}
.detail-box h4{font-size:0.8rem;color:var(--text2);margin-bottom:10px;text-transform:uppercase}
.detail-list{max-height:160px;overflow-y:auto;font-size:0.9rem}
.detail-item{padding:6px 10px;margin-bottom:3px;background:rgba(200,220,240,.02);border-radius:6px}
.detail-item.active{border-left:3px solid #50C878}
.detail-item.out{border-left:3px solid #E05555;opacity:.5}
.config-box{background:rgba(200,220,240,.015);border:1px solid var(--glass-b);border-radius:10px;padding:16px}
.config-box h4{font-size:0.8rem;color:var(--text2);margin-bottom:10px;text-transform:uppercase}
.config-row{display:flex;gap:10px;align-items:center}
.config-row input{flex:1}

.config-msg{
    margin-top:10px;
    font-size:0.9rem;
    padding:10px;
    border-radius:8px;
    display:none;
}
.config-msg.success{
    display:block;
    background:rgba(80,200,120,.08);
    color:#50C878;
    border:1px solid rgba(80,200,120,.2);
}
.config-msg.error{
    display:block;
    background:rgba(220,80,80,.08);
    color:#E05555;
    border:1px solid rgba(220,80,80,.2);
}

.priority-info{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    background:rgba(240,165,0,.08);
    border:1px solid rgba(240,165,0,.2);
    border-radius:8px;
    margin-bottom:12px;
}
.priority-label{font-size:0.85rem;color:var(--text3)}
.priority-name{font-size:1rem;font-weight:700;color:var(--gold)}

/* ===== RESPONSIVE - DESKTOP ===== */
@media (max-width:1400px){
    .create-page{padding:24px 32px;gap:32px}
    .features{grid-template-columns:repeat(2, 1fr)}
    .hero-text h1{font-size:2.4rem}
}

@media (max-width:1100px){
    .s-left{width:320px;min-width:180px}
    .s-right{width:340px;min-width:200px}
    .s-header .invite-box input{width:150px}
    .wheel-container{padding-top:40px}
    .wheel-outer{--wsize:min(100%, 65vh, 560px)}
    .pointer{top:-32px}
    .pointer::before{border-left:11px solid transparent;border-right:11px solid transparent;border-top:26px solid var(--gold)}
    .pointer::after{top:-4px;width:14px;height:5px}
}

@media (max-width:1000px){
    .create-page{flex-direction:column;padding:24px;gap:24px}
    .create-left{text-align:center}
    .hero-section{flex-direction:column;gap:16px}
    .hero-text h1{font-size:2rem}
    .hero-text .subtitle{max-width:100%;font-size:1rem}
    .features{grid-template-columns:repeat(2, 1fr);gap:12px}
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width:900px){
    .s-body{flex-direction:column}
    .s-left,.s-right{display:none}
    .s-center{flex:1;padding:10px;justify-content:flex-start;padding-top:20px}

    .wheel-container{
        padding-top:35px;
        flex:0 0 auto;
    }
    .wheel-outer{--wsize:min(85vw, 50vh, 420px)}

    .pointer{top:-30px}
    .pointer::before{border-left:10px solid transparent;border-right:10px solid transparent;border-top:24px solid var(--gold)}
    .pointer::after{top:-4px;width:12px;height:5px}

    .bottom-controls{padding:12px 16px}
    .ctrl-btns .btn{padding:12px 24px;font-size:0.95rem}
    .speed-box{padding:10px 18px;font-size:0.9rem}

    .s-header .invite-box{display:none}
    .s-header{padding:8px 16px;min-height:48px}
    .s-header .title-area h1{font-size:1.1rem}
    .logo-icon svg{width:28px;height:28px}
    .s-header .viewers{padding:5px 12px;font-size:0.9rem}
    .icon-btn{width:36px;height:36px;font-size:1.1rem}

    .mobile-toggle{display:flex}
    .mobile-nav{display:flex}

    .session-wrap{padding-bottom:60px;padding-bottom:calc(60px + env(safe-area-inset-bottom))}

    /* Mobile panels fullscreen */
    .mobile-panel{
        top:48px;
    }
    .mobile-panel-content .p-list,
    .mobile-panel-content .log-wrap{
        max-height:none;
        overflow-y:auto;
    }
    .mobile-panel-content .chat-body{
        max-height:none;
        flex:1;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width:600px){
    .features{grid-template-columns:1fr}
    .feature{flex-direction:row;text-align:left;padding:14px}
    .ficon{width:44px;height:44px;font-size:1.4rem}

    .s-header{padding:6px 12px;min-height:44px;gap:8px}
    .s-header .title-area{gap:8px}
    .s-header .title-area h1{font-size:1rem}
    .logo-icon svg{width:24px;height:24px}
    .s-header .viewers{padding:4px 10px;font-size:0.85rem;gap:4px}
    .icon-btn{width:32px;height:32px;font-size:1rem}
    .header-controls{gap:6px}

    .s-center{padding:8px}
    .wheel-container{padding-top:30px}
    .wheel-outer{--wsize:min(88vw, 45vh, 360px)}

    .pointer{top:-26px}
    .pointer::before{border-left:9px solid transparent;border-right:9px solid transparent;border-top:22px solid var(--gold)}
    .pointer::after{top:-3px;width:11px;height:4px}

    .result-display{padding:14px 24px;min-width:160px;border-radius:14px}
    .result-display .current-name{font-size:clamp(20px, 6vw, 32px);max-width:240px}

    .bottom-controls{padding:10px 12px;gap:10px}
    .ctrl-area{gap:10px}
    .ctrl-btns{gap:10px}
    .ctrl-btns .btn{padding:10px 20px;font-size:0.9rem}
    .speed-box{padding:8px 14px;font-size:0.85rem;gap:8px}
    .speed-box button{width:28px;height:28px;font-size:1rem}
    .speed-val{font-size:1.1rem;min-width:22px}

    .login-box{padding:24px 20px}
    .login-box h2{font-size:1.25rem}

    .winner-card{padding:32px 28px}
    .winner-card .trophy{font-size:3.5rem;margin-bottom:12px}
    .winner-card h2{font-size:0.8rem;letter-spacing:2px}
    .winner-card .name{font-size:2rem}
    .winner-card .close-btn{margin-top:20px}

    .mobile-nav{padding:6px 12px}
    .mobile-nav-btn{padding:6px;font-size:0.65rem}
    .mobile-nav-btn .nav-icon{font-size:1.2rem}

    /* Mobile panels - fullscreen */
    .mobile-panel{
        top:44px;
        bottom:52px;
        bottom:calc(52px + env(safe-area-inset-bottom));
    }
    .mobile-panel-header{padding:12px 16px}
    .mobile-panel-header h3{font-size:1rem}
    .mobile-panel-content{padding:12px 16px}
}

/* ===== RESPONSIVE - SMALL MOBILE ===== */
@media (max-width:400px){
    .s-header .title-area h1{font-size:0.9rem}
    .s-header .viewers{display:none}

    .wheel-container{padding-top:25px}
    .wheel-outer{--wsize:min(92vw, 42vh, 300px)}

    .pointer{top:-22px}
    .pointer::before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:18px solid var(--gold)}
    .pointer::after{top:-3px;width:10px;height:4px}

    .ctrl-btns .btn{padding:10px 16px;font-size:0.85rem}
    .speed-box{padding:6px 12px}

    .result-display{padding:12px 18px}
    .result-display .current-name{font-size:clamp(18px, 7vw, 26px)}

    .mobile-panel{top:40px}
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height:500px) and (orientation:landscape){
    .s-header{min-height:40px;padding:4px 12px}
    .s-header .title-area h1{font-size:0.95rem}
    .logo-icon svg{width:22px;height:22px}
    .icon-btn{width:30px;height:30px}

    .wheel-container{padding-top:20px}
    .wheel-outer{--wsize:min(50vw, 70vh, 280px)}

    .pointer{top:-20px}
    .pointer::before{border-left:7px solid transparent;border-right:7px solid transparent;border-top:16px solid var(--gold)}
    .pointer::after{top:-2px;width:9px;height:3px}

    .bottom-controls{padding:6px 12px;gap:6px}
    .ctrl-area{flex-direction:row;gap:12px}
    .ctrl-btns .btn{padding:8px 16px;font-size:0.8rem}
    .speed-box{padding:6px 10px;font-size:0.75rem}

    .mobile-nav{padding:4px 10px}
    .mobile-panel{
        top:40px;
        bottom:48px;
    }
}