:root{--bg:#05080e;--panel:#09131f;--panel2:#0c1826;--line:#1a2c3e;--text:#edf5fb;--muted:#8095a8;--cyan:#55e4ec;--purple:#9a72ff;--gold:#d5b66f;--green:#6ce5a0;--red:#ff7e8d;--scale:1}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#05080e;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button{font:inherit}.demo-shell{height:100vh;min-height:620px;display:grid;grid-template-columns:220px minmax(0,1fr);background:radial-gradient(700px 330px at 75% 0%,rgba(85,228,236,.06),transparent 70%),linear-gradient(180deg,#07111b,#05080e);font-size:calc(13px * var(--scale));overflow:hidden}.demo-shell[data-size="large"]{--scale:1.13;grid-template-columns:244px minmax(0,1fr)}.demo-shell[data-size="xl"]{--scale:1.25;grid-template-columns:260px minmax(0,1fr)}
.demo-side{border-right:1px solid #132235;background:linear-gradient(180deg,#07121c,#050a11);display:flex;flex-direction:column;min-width:0}.demo-brand{height:76px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid #142336}.demo-brand img{width:38px;height:38px;border-radius:10px}.demo-brand strong{display:block;font-size:1.08em}.demo-brand span{display:block;color:#62798d;font-size:.58em;letter-spacing:.14em;margin-top:2px}.demo-status{margin:13px 12px;padding:9px 10px;border-radius:12px;border:1px solid #183049;background:#081724;display:grid;grid-template-columns:auto 1fr;gap:2px 7px;align-items:center}.demo-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);grid-row:1/3}.demo-status span{font-size:.72em;font-weight:800}.demo-status b{font-size:.52em;color:#587087;letter-spacing:.12em}.demo-nav{padding:5px 9px;display:grid;gap:4px}.demo-nav button{border:0;background:transparent;color:#8297aa;border-radius:11px;padding:10px 11px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.demo-nav button span{width:20px;text-align:center;color:#617a90}.demo-nav button b{font-size:.78em}.demo-nav button:hover{background:#091723;color:#dceaf4}.demo-nav button.active{background:linear-gradient(90deg,rgba(85,228,236,.1),rgba(154,114,255,.05));color:#eaf7fb;box-shadow:inset 2px 0 var(--cyan)}.demo-nav button.active span{color:var(--cyan)}.demo-side-foot{margin-top:auto;padding:15px 16px;border-top:1px solid #132235}.demo-side-foot span{display:block;font-size:.62em;color:#778da0;font-weight:800}.demo-side-foot small{font-size:.56em;color:#455c70}
.demo-main{min-width:0;display:flex;flex-direction:column}.demo-topbar{height:78px;flex:0 0 78px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #132235;background:rgba(7,13,21,.9)}.demo-topbar small{display:block;color:var(--cyan);font-size:.56em;letter-spacing:.15em;font-weight:900}.demo-topbar h1{font-size:1.55em;margin:3px 0 0;letter-spacing:-.03em}.demo-actions{display:flex;align-items:center;gap:8px}.demo-music{height:34px;max-width:190px;border:1px solid #1b3044;background:#081521;border-radius:999px;padding:0 7px 0 9px;display:flex;align-items:center;gap:7px;color:#8da1b4}.demo-music i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.demo-music span{font-size:.58em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-music button,.demo-size{border:1px solid #20364b;background:#0b1a27;color:#9ab0c2;cursor:pointer}.demo-music button{width:23px;height:23px;border-radius:50%;font-size:.55em}.demo-size{height:34px;min-width:38px;border-radius:10px;font-size:.68em;font-weight:900}.demo-profile{height:42px;display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid #1c3045;border-radius:12px;background:#08141f}.demo-profile>span{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#1c4960,#352a68);font-size:.65em;font-weight:900}.demo-profile strong{display:block;font-size:.68em}.demo-profile small{display:block;color:#687e91;font-size:.52em}
.demo-content{padding:18px;overflow:auto}.demo-hero{border:1px solid #1a3045;border-radius:18px;padding:19px;background:radial-gradient(460px 180px at 88% 40%,rgba(154,114,255,.12),transparent 70%),linear-gradient(135deg,#0a1723,#111024);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}.demo-kicker{font-size:.57em;color:var(--cyan);letter-spacing:.14em;font-weight:900}.demo-hero h2{font-size:1.65em;margin:5px 0 7px;letter-spacing:-.03em}.demo-hero p{font-size:.72em;color:#899caf;line-height:1.55;margin:0;max-width:630px}.demo-hero-mark{width:104px;height:104px;border-radius:50%;border:1px solid rgba(85,228,236,.22);display:grid;place-items:center;background:radial-gradient(circle,rgba(85,228,236,.09),transparent 65%);font-size:2.6em;color:var(--cyan)}
.demo-grid{display:grid;gap:10px;margin-top:12px}.demo-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.demo-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-card{border:1px solid #172a3d;border-radius:14px;background:linear-gradient(180deg,#0b1723,#08121c);padding:13px;min-width:0}.demo-card .label{font-size:.55em;color:#71879b;letter-spacing:.08em;font-weight:900}.demo-card .big{font-size:1.45em;font-weight:950;margin-top:5px}.demo-card .sub{font-size:.58em;color:#687e92;margin-top:4px}.demo-good{color:var(--green)}.demo-cyan{color:var(--cyan)}.demo-gold{color:var(--gold)}.demo-red{color:var(--red)}
.demo-section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:18px 2px 8px}.demo-section-head h3{font-size:.93em;margin:0}.demo-section-head p{font-size:.61em;color:#6f8396;margin:3px 0 0}.demo-pill{font-size:.52em;color:#8fa6b9;padding:5px 8px;border-radius:999px;border:1px solid #21374b;background:#091521}.demo-mode-tabs{display:flex;gap:6px;flex-wrap:wrap}.demo-mode-tabs button{border:1px solid #1a2e43;background:#091521;color:#8296a9;padding:7px 10px;border-radius:10px;font-size:.58em;font-weight:850;cursor:pointer}.demo-mode-tabs button.active{color:#071218;background:linear-gradient(135deg,var(--cyan),#9681ff);border-color:transparent}.demo-insight{position:relative;padding-left:44px}.demo-insight:before{position:absolute;left:12px;top:13px;width:22px;height:22px;border-radius:8px;background:#0e2431;border:1px solid #27506a;display:grid;place-items:center;color:var(--cyan);font-size:.75em}.demo-insight.hot:before{content:"🔥"}.demo-insight.record:before{content:"♛"}.demo-insight.patch:before{content:"⌁"}.demo-insight strong{font-size:.72em}.demo-insight p{font-size:.6em;color:#8295a8;line-height:1.45;margin:4px 0 0}.demo-bar{height:6px;background:#08111a;border-radius:999px;overflow:hidden;margin-top:9px}.demo-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--purple))}
.demo-table-wrap{overflow:auto;border:1px solid #17293a;border-radius:14px;background:#08121c}.demo-table{width:100%;border-collapse:collapse;min-width:650px}.demo-table th{text-align:left;color:#61788e;font-size:.54em;letter-spacing:.08em;padding:9px 11px;border-bottom:1px solid #16283a}.demo-table td{padding:9px 11px;font-size:.62em;color:#9db0c1;border-bottom:1px solid #122333}.demo-table tr:last-child td{border-bottom:0}.demo-table tr[data-match]{cursor:pointer}.demo-table tr[data-match]:hover td{background:#0a1824;color:#dce8f1}.champ{display:flex;align-items:center;gap:8px}.champ i{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(145deg,#16384c,#39245a);color:#fff;font-style:normal;font-size:.65em;font-weight:900}.result{font-size:.52em;font-weight:900;padding:4px 7px;border-radius:999px}.result.win{color:#80e9ae;border:1px solid rgba(108,229,160,.25);background:rgba(108,229,160,.06)}.result.loss{color:#ff96a2;border:1px solid rgba(255,126,141,.23);background:rgba(255,126,141,.05)}
.demo-class-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.demo-class{padding:12px;border:1px solid #183047;border-radius:14px;background:#091521}.demo-class span{display:block;font-size:.55em;color:#647b90}.demo-class strong{display:block;font-size:.8em;margin:3px 0}.demo-class b{font-size:.66em;color:var(--cyan)}
.demo-build-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.demo-build{border:1px solid #1a3044;border-radius:13px;background:#091521;padding:12px;cursor:pointer}.demo-build:hover,.demo-build.active{border-color:#3d718a;background:#0c1c29}.demo-build small{font-size:.52em;color:#667f94}.demo-build strong{display:block;font-size:.7em;margin-top:4px}.demo-browser-fake{margin-top:10px;border:1px solid #183047;border-radius:14px;background:#f6f6f6;color:#1a1a1a;overflow:hidden;height:260px}.demo-browser-bar{height:35px;background:#0d1722;color:#8698a9;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:.55em}.demo-browser-bar span{padding:3px 7px;border:1px solid #253748;border-radius:6px}.demo-browser-page{height:calc(100% - 35px);display:grid;grid-template-columns:160px 1fr;background:#fff}.demo-browser-side{padding:15px;background:#f4f5f7;border-right:1px solid #e5e7ea}.demo-browser-side b{font-size:.62em}.demo-browser-side i{display:block;height:7px;background:#d8dde3;border-radius:999px;margin-top:10px}.demo-browser-main{padding:17px}.demo-browser-main h4{margin:0;font-size:.9em;color:#20242a}.demo-tier-row{display:grid;grid-template-columns:32px 1fr 60px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #edf0f3;font-size:.58em}.demo-tier-row b{width:27px;height:27px;border-radius:7px;background:#dfe9ee;display:grid;place-items:center;color:#33414b}.demo-tier-row span:last-child{font-weight:900;color:#2a8b62;text-align:right}
.demo-modal{position:fixed;inset:0;background:rgba(2,5,9,.82);display:none;align-items:center;justify-content:center;padding:24px;z-index:20}.demo-modal.open{display:flex}.demo-modal-card{width:min(520px,94vw);border:1px solid #294158;border-radius:18px;background:#091521;padding:18px;box-shadow:0 30px 100px #000;position:relative}.demo-modal-close{position:absolute;right:11px;top:10px;border:0;background:transparent;color:#8ca1b5;font-size:1.3em;cursor:pointer}.demo-modal-card h3{margin:0 0 5px}.demo-modal-card p{color:#8094a7;font-size:.68em}.demo-match-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.demo-match-kpis div{border:1px solid #1a3044;border-radius:12px;padding:10px;background:#07121d}.demo-match-kpis small{display:block;color:#697f93;font-size:.5em}.demo-match-kpis strong{font-size:.82em}
@media(max-width:850px){.demo-shell{grid-template-columns:70px minmax(0,1fr)}.demo-shell[data-size="large"],.demo-shell[data-size="xl"]{grid-template-columns:76px minmax(0,1fr)}.demo-brand{padding:0 13px}.demo-brand div,.demo-status span,.demo-status b,.demo-nav button b,.demo-side-foot{display:none}.demo-brand img{width:40px;height:40px}.demo-status{display:flex;justify-content:center}.demo-status i{grid-row:auto}.demo-nav button{justify-content:center;padding:11px}.demo-nav button span{font-size:1.1em}.demo-grid.four{grid-template-columns:repeat(2,1fr)}.demo-class-grid{grid-template-columns:repeat(2,1fr)}.demo-build-grid{grid-template-columns:repeat(3,1fr)}.demo-profile{display:none}}
@media(max-width:560px){.demo-topbar{padding:10px 12px;height:68px;flex-basis:68px}.demo-music{display:none}.demo-content{padding:12px}.demo-grid.four,.demo-grid.three,.demo-grid.two{grid-template-columns:1fr}.demo-class-grid{grid-template-columns:1fr 1fr}.demo-build-grid{grid-template-columns:1fr 1fr}.demo-hero{grid-template-columns:1fr}.demo-hero-mark{display:none}.demo-browser-page{grid-template-columns:1fr}.demo-browser-side{display:none}.demo-match-kpis{grid-template-columns:repeat(2,1fr)}}

/* Compliance context stays visible inside the interactive browser preview. */
.demo-main{min-height:0}.demo-content{min-height:0;flex:1}.demo-legal{flex:0 0 auto;padding:8px 18px;border-top:1px solid #1a2c3e;background:#071019;color:#7993a6;font-size:10px;line-height:1.45}.demo-legal strong{color:#bdcdd9}.demo-legal a{color:#55e4ec;text-decoration:none}.demo-legal a:hover{text-decoration:underline}
@media(max-width:560px){.demo-legal{padding:6px 10px;font-size:9px;line-height:1.3}}