:root{
    --bg:#050706;
    --panel:#1f1f1f;
    --panel2:#111;
    --text:#f5f5f5;
    --muted:#a6a6a6;
    --green:#0bbd22;
    --line:#2d2d2d;
    --sidebar:340px;
    --gap:8px;
    --topbar:64px;
    --hero:142px;
    --mini:62px;
    --activity:118px;
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{
    background:radial-gradient(circle at 82% 6%,#062014 0,#020303 36%,#000 100%);
    font-family:'Segoe UI',Arial,sans-serif;
    color:var(--text);
}

.xbox-shell{
    width:100vw;
    height:100vh;
    margin:0;
    background:rgba(0,0,0,.62);
    display:grid;
    grid-template-columns:var(--sidebar) 1fr;
    box-shadow:inset 0 0 120px #000;
    overflow:hidden;
}

.guide-panel{
    height:100vh;
    background:#202020;
    padding:14px 16px;
    overflow:hidden;
    border-right:1px solid #333;
    display:flex;
    flex-direction:column;
}
.mini-icons{height:38px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#eee;flex:0 0 38px}
.home-strip{height:38px;background:#1679d4;display:grid;place-items:center;font-weight:800;flex:0 0 38px;text-decoration:none;color:#fff;}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);height:58px;flex:0 0 58px}
.quick-grid button{border:1px solid #3a3a3a;background:#272727;color:#eee;font-size:15px}
.section-label{font-size:11px;letter-spacing:4px;color:#888;margin:18px 0 8px;flex:0 0 auto}
.feature-list{display:grid;gap:6px;flex:1;min-height:0}
.feature-row{background:#2b2b2b;border-left:3px solid #0a8b20;display:flex;align-items:center;gap:12px;padding:7px 10px;min-height:0}
.feature-row b{width:32px;height:32px;background:#404040;display:grid;place-items:center;font-size:13px;flex:0 0 32px}
.feature-row span{display:grid;gap:1px;min-width:0}
.feature-row strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature-row small{color:#bbb;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gold-card{margin-top:12px;background:#0a8413;padding:12px 14px;display:grid;gap:3px;flex:0 0 64px;font-size:13px}

.dashboard{
    height:100vh;
    padding:18px 22px;
    overflow:hidden;
    display:grid;
    grid-template-rows:var(--topbar) var(--hero) minmax(0,1fr) var(--mini) var(--activity);
    gap:var(--gap);
}
.topbar{height:var(--topbar);display:flex;align-items:center;border-bottom:1px solid #181818;gap:26px;overflow:hidden}
.profile-badge{display:flex;align-items:center;gap:12px;min-width:190px;flex:0 0 auto}
.avatar,.profile-logo{background:linear-gradient(135deg,#f5a400 0 45%,#fff 45% 55%,#111 55%);color:#111;font-weight:900;display:grid;place-items:center}
.avatar{width:40px;height:40px}
.profile-logo{width:84px;height:84px;font-size:26px}
.profile-badge small{display:block;color:#aaa;font-size:11px}
.tabs{display:flex;gap:28px;flex:1;min-width:0;overflow:hidden}
.tabs a{color:#6c6c6c;text-decoration:none;font-size:16px;white-space:nowrap}
.tabs a.active{color:#fff}
.clock{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.clock small{font-size:10px;white-space:nowrap}.clock b{font-size:26px}

.hero{
    height:var(--hero);
    min-height:0;
    background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.36)),url('../img/hero.svg');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 28px;
    overflow:hidden;
}
.hero span{color:#bbb}.hero h1{font-size:38px;line-height:1;margin:6px 0}.hero p{max-width:800px;line-height:1.35;margin:0;font-size:14px}.hero-arrow{background:transparent;border:0;color:#ddd;font-size:64px;line-height:1}

.tile-layout{
    min-height:0;
    height:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(160px,1fr)) 220px;
    grid-template-rows:repeat(3,minmax(0,1fr));
    gap:var(--gap);
    overflow:hidden;
}
.tile{position:relative;padding:18px 16px;overflow:hidden;min-height:0}
.tile span{font-weight:800;font-size:14px}.tile strong{display:block;font-size:34px;font-weight:300;margin-top:10px;line-height:1}.tile small{font-size:10px;letter-spacing:.7px;color:#d6d6d6}.tile em{position:absolute;right:18px;top:16px;font-size:28px;opacity:.45;font-style:normal}.selected{outline:3px solid #fff;outline-offset:-3px}
.green{background:#118d11}.neon{background:#02bd20}.navy{background:#0d225b}.cyan{background:#0894a6}.orange{background:#d98700}.blue{background:#2d9cad}.lime{background:#66b90f}.dark{background:linear-gradient(135deg,#252525,#090909)}.forest{background:#08730b}
.profile-tile{grid-row:span 3;background:#f2a500;color:white;padding:20px;display:flex;flex-direction:column;overflow:hidden}
.profile-tile h3{margin:14px 0 2px;font-size:18px}.profile-tile p{margin:0 0 10px;font-size:13px}.profile-tile b{font-size:13px}.profile-tile>strong{font-size:42px;font-weight:300;margin-top:auto;line-height:1}

.mini-stats{height:var(--mini);display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);overflow:hidden}
.mini-stats div{background:#181818;border-left:2px solid #0aa322;padding:10px 12px;overflow:hidden}.mini-stats span{display:block;color:#aaa;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-stats b{display:block;margin-top:7px;font-size:22px;line-height:1}
.activity-panel,.page-card{background:#111;border:1px solid #222;padding:12px 16px;overflow:hidden;min-height:0}
.activity-panel{height:var(--activity)}
.activity-panel h2,.page-card h1{margin:0 0 8px;font-weight:300;font-size:20px}.activity-row{display:grid;grid-template-columns:1fr 78px 78px 78px;gap:10px;align-items:center;padding:8px 10px;border-top:1px solid #2a2a2a;font-size:12px}.activity-row small{display:block;color:#aaa;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pill{background:#333;color:#ccc;padding:5px 8px;text-align:center;font-size:11px}.pill.online{background:#078b18;color:#fff}.empty-state{padding:18px;background:#181818;color:#aaa;font-size:13px}

table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:9px;border-bottom:1px solid #282828;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}th{color:#9f9f9f;font-weight:600}.status-grid{height:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;overflow:hidden}.status-grid div{background:#191919;border-left:3px solid #0aa322;padding:20px}.status-grid b,.status-grid span{display:block}.status-grid span{font-size:28px;margin-top:10px}

@media(max-width:1200px){
    :root{--sidebar:300px;--hero:120px;--topbar:56px;--mini:54px;--activity:96px}
    .dashboard{padding:12px}.tabs{gap:16px}.tabs a{font-size:14px}.clock b{font-size:22px}.hero h1{font-size:30px}.hero p{font-size:12px}.tile-layout{grid-template-columns:repeat(3,1fr) 190px}.tile strong{font-size:28px}.tile span{font-size:12px}.profile-logo{width:68px;height:68px}.feature-row{padding:5px 8px}.feature-row b{width:28px;height:28px}.feature-row strong{font-size:12px}.feature-row small{font-size:10px}
}

@media(max-width:900px){
    :root{--sidebar:0px;--hero:110px;--activity:90px}
    .xbox-shell{grid-template-columns:1fr}.guide-panel{display:none}.tabs{display:none}.tile-layout{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,minmax(0,1fr))}.profile-tile{grid-row:span 1;grid-column:span 3;display:grid;grid-template-columns:70px 1fr 1fr;align-items:center}.mini-stats{grid-template-columns:repeat(3,1fr)}
}

/* FAQ full-screen no-scroll page */
.faq-hero{
    height:var(--hero);
    min-height:0;
    background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(7,92,16,.34)),url('../img/hero.svg');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 28px;
    overflow:hidden;
}
.faq-hero span{color:#bbb}.faq-hero h1{font-size:38px;line-height:1;margin:6px 0}.faq-hero p{max-width:820px;line-height:1.35;margin:0;font-size:14px}.faq-status{width:190px;height:86px;background:#08730b;display:grid;place-items:center;text-align:center}.faq-status b{font-size:24px;font-weight:300}.faq-status small{font-size:10px;letter-spacing:1px;color:#d8ffd8}
.faq-fit-grid{
    min-height:0;
    height:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:var(--gap);
    overflow:hidden;
}
.faq-card{
    background:#181818;
    border-left:3px solid #0aa322;
    padding:16px;
    overflow:hidden;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
}
.faq-card.selected{outline:3px solid #fff;outline-offset:-3px;background:#118d11}.faq-card.green-card{background:#08730b}.faq-card.blue-card{background:#0d225b}.faq-card.orange-card{background:#d98700}.faq-card b{font-size:13px;opacity:.8}.faq-card h3{font-size:18px;line-height:1.1;margin:12px 0 8px}.faq-card p{font-size:13px;line-height:1.35;margin:0;color:#eee;overflow:hidden}
.faq-bottom-row{
    height:var(--mini);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--gap);
    overflow:hidden;
}
.faq-bottom-row div{background:#181818;border-left:2px solid #0aa322;padding:10px 12px;overflow:hidden}.faq-bottom-row span{display:block;color:#aaa;font-size:11px}.faq-bottom-row b{display:block;margin-top:7px;font-size:18px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:has(.faq-fit-grid) .dashboard{grid-template-rows:var(--topbar) var(--hero) minmax(0,1fr) var(--mini)}
@media(max-width:1200px){.faq-hero h1{font-size:30px}.faq-hero p{font-size:12px}.faq-card{padding:12px}.faq-card h3{font-size:15px}.faq-card p{font-size:11px}.faq-status{width:150px;height:70px}.faq-status b{font-size:20px}}
@media(max-width:900px){.faq-fit-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,minmax(0,1fr))}.faq-status{display:none}.faq-bottom-row{grid-template-columns:repeat(2,1fr)}}

/* Setup Guide full-screen no-scroll page */
.setup-hero-full{
    height:var(--hero);
    min-height:0;
    background:linear-gradient(90deg,rgba(0,0,0,.95),rgba(10,125,25,.34)),url('../img/hero.svg');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 28px;
    overflow:hidden;
}
.setup-hero-full span{color:#bdbdbd}.setup-hero-full h1{font-size:38px;line-height:1;margin:6px 0}.setup-hero-full p{max-width:840px;line-height:1.35;margin:0;font-size:14px;color:#eee}.setup-live-card{width:215px;height:92px;background:#08730b;display:grid;place-items:center;text-align:center;padding:10px;flex:0 0 215px}.setup-live-card small{font-size:10px;letter-spacing:1px;color:#d8ffd8}.setup-live-card b{font-size:25px;font-weight:300;line-height:1}.setup-live-card span{font-size:10px;color:#fff}
.setup-fit-body{
    min-height:0;
    height:100%;
    display:grid;
    grid-template-columns:260px minmax(0,1fr) 280px;
    gap:var(--gap);
    overflow:hidden;
}
.setup-step-list,.setup-main-card,
.setup-account-panel{
    min-height:0;
    overflow:hidden;
    background:#111;
    border:1px solid #222
}
.setup-step-list{display:grid;grid-template-rows:repeat(8,1fr);gap:6px;padding:8px;background:#151515}
.setup-step{display:flex;align-items:center;gap:10px;background:#222;border-left:3px solid #333;padding:8px 10px;overflow:hidden;min-height:0}
.setup-step.active{background:#118d11;border-color:#fff;outline:2px solid #fff;outline-offset:-2px}
.setup-step b{width:34px;height:34px;background:#333;display:grid;place-items:center;font-size:12px;flex:0 0 34px}
.setup-step.active b{background:#fff;color:#111}
.setup-step span{display:grid;gap:2px;min-width:0}
.setup-step strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setup-step small{font-size:10px;color:#bbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setup-main-card{padding:14px;display:grid;grid-template-rows:54px 82px minmax(0,1fr) 58px;gap:10px}
.setup-main-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #242424;padding-bottom:8px;overflow:hidden}
.setup-main-head small{color:#aaa;font-size:10px;letter-spacing:1px}
.setup-main-head h2{margin:4px 0 0;font-size:28px;font-weight:300;line-height:1}
.setup-pill{background:#0d225b;padding:9px 12px;font-size:11px;white-space:nowrap}
.setup-requirements{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;overflow:hidden}
.setup-requirements div{background:#181818;border-left:3px solid #0aa322;padding:10px;overflow:hidden}
.setup-requirements b,.setup-requirements strong,
.setup-requirements small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setup-requirements b{font-size:10px;color:#aaa}
.setup-requirements strong{font-size:20px;font-weight:300;margin:4px 0}
.setup-requirements small{font-size:10px;color:#bbb}
.setup-install-grid{min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;overflow:hidden}
.setup-instruction{background:#181818;padding:14px;display:flex;gap:12px;overflow:hidden;border-left:3px solid #333}
.setup-instruction.selected{background:#08730b;border-color:#fff}
.setup-instruction b{width:38px;height:38px;background:#303030;display:grid;place-items:center;flex:0 0 38px}
.setup-instruction.selected b{background:#fff;color:#111}
.setup-instruction div{min-width:0;overflow:hidden}
.setup-instruction h3{font-size:18px;margin:0 0 8px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setup-instruction p{font-size:12px;line-height:1.35;margin:0;color:#ddd;overflow:hidden}
.setup-paths{height:58px;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:hidden}
.setup-paths div{background:#050505;border:1px solid #262626;padding:9px 12px;overflow:hidden}
.setup-paths span{display:block;color:#aaa;font-size:10px;margin-bottom:6px}
.setup-paths code{font-family:Consolas,monospace;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.setup-account-panel{padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center}
.setup-account-panel h2{align-self:stretch;text-align:left;font-size:20px;font-weight:300;margin:0 0 10px}
.account-avatar{width:78px;height:78px;background:linear-gradient(135deg,#f5a400 0 45%,#fff 45% 55%,#111 55%);color:#111;font-weight:900;font-size:24px;display:grid;place-items:center;margin-bottom:10px}
.setup-account-panel>strong{font-size:17px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.setup-account-panel>small{font-size:10px;color:#aaa;margin-top:4px}
.account-stat-list{align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;min-height:0}
.account-stat-list div{background:#181818;padding:9px 8px;overflow:hidden}
.account-stat-list span{display:block;color:#aaa;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-stat-list b{display:block;font-size:19px;font-weight:300;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setup-warning{align-self:stretch;background:#d98700;margin-top:auto;padding:12px;text-align:left;overflow:hidden}
.setup-warning b{font-size:13px}
.setup-warning p{font-size:11px;line-height:1.3;margin:5px 0 0;color:#fff}
.setup-bottom-actions{height:var(--mini);display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);overflow:hidden}
.setup-bottom-actions a{background:#181818;border-left:2px solid #0aa322;color:#fff;text-decoration:none;padding:10px 12px;overflow:hidden}
.setup-bottom-actions a:first-child{background:#118d11;outline:2px solid #fff;outline-offset:-2px}
.setup-bottom-actions b,
.setup-bottom-actions span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setup-bottom-actions b{font-size:16px;font-weight:400}
.setup-bottom-actions span{color:#aaa;font-size:10px;margin-top:6px}

body:has(.setup-fit-body) .dashboard{grid-template-rows:var(--topbar) var(--hero) minmax(0,1fr) var(--mini)}
@media(max-width:1200px){.setup-fit-body{grid-template-columns:230px minmax(0,1fr) 240px}.setup-hero-full h1{font-size:30px}.setup-hero-full p{font-size:12px}.setup-main-card{grid-template-rows:48px 74px minmax(0,1fr) 52px}.setup-main-head h2{font-size:23px}.setup-requirements strong{font-size:16px}.setup-instruction{padding:10px}.setup-instruction h3{font-size:15px}.setup-instruction p{font-size:11px}.setup-live-card{width:170px;flex-basis:170px;height:78px}.setup-live-card b{font-size:20px}.account-avatar{width:62px;height:62px}}
@media(max-width:900px){.setup-fit-body{grid-template-columns:1fr 1fr}.setup-step-list{display:none}.setup-account-panel{display:none}.setup-requirements{grid-template-columns:repeat(2,1fr)}.setup-bottom-actions{grid-template-columns:repeat(3,1fr)}.setup-live-card{display:none}}

.brand-logo{
    height:48px;
    width:auto;
    display:block;
    object-fit:contain;
}
.small-logo{
    height:90px;
    width:auto;
    display:block;
    object-fit:contain;
}

#bootScreen{
    position:fixed;
    inset:0;
    z-index:999999;

    background:
        radial-gradient(circle at center,
        #1a1a1a 0%,
        #080808 100%);

    display:flex;
    align-items:center;
    justify-content:center;

    animation:bootFadeOut .8s ease forwards;
    animation-delay:3s;
}

.boot-container{
    text-align:center;
    width:400px;
}

.boot-logo{
    width:500px;
    height:500px;
    object-fit:contain;

    animation:
        bootFloat 3s ease-in-out infinite,
        bootGlow 2s ease-in-out infinite;
}

.boot-container h1{
    margin-top:15px;
    margin-bottom:10px;

    color:#7eff3c;
    font-size:48px;
    font-weight:700;
}

.boot-container p{
    color:#aaa;
    margin-bottom:30px;
}

.boot-loader{
    width:100%;
    height:8px;

    background:#1d1d1d;
    border-radius:50px;

    overflow:hidden;
}

.boot-bar{
    width:0%;
    height:100%;

    background:linear-gradient(
        90deg,
        #49ff49,
        #7eff3c
    );

    animation:loadBar 2.8s linear forwards;
}

.boot-version{
    display:block;
    margin-top:20px;
    color:#666;
    font-size:13px;
}

@keyframes loadBar{
    from{
        width:0%;
    }
    to{
        width:100%;
    }
}

@keyframes bootGlow{
    0%,100%{
        filter:drop-shadow(0 0 5px #7eff3c);
    }
    50%{
        filter:drop-shadow(0 0 30px #7eff3c);
    }
}

@keyframes bootFloat{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-8px);
    }
}

@keyframes bootFadeOut{
    to{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }
}