:root{
  --bg:#0a0c0e; --panel:rgba(20,24,28,.90); --panel-solid:#141a1e; --line:#262e34;
  --txt:#e9eef0; --dim:#c3ccd1; --mut:#8d9aa1; --accent:#f0871f; --gold:#ffd27a;
  --green:#8fae7a; --paper:rgba(233,238,240,.94); --ink:#1a1f23; --ink-dim:#5d666c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'Barlow',system-ui,sans-serif;font-size:14px;min-height:100vh}
h1,h2,h3{margin:0;font-weight:400}
a{color:var(--accent);text-decoration:none}
a:hover{color:#ffa347}
button{font-family:inherit;cursor:pointer}
.ttl{font-family:'Oswald',system-ui,sans-serif}
.backdrop{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page{position:relative;z-index:1}

.topbar{height:44px;background:rgba(8,10,12,.94);border-bottom:1px solid #23292e;display:flex;align-items:center;position:relative;padding:0 16px}
.topbar-in{width:1064px;margin:0 auto;display:flex;align-items:center;gap:28px}
.brand{font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:3px}
.opname{display:flex;align-items:center;justify-content:center;gap:10px;flex-grow:1}
.opname h1{font-family:'Oswald',sans-serif;font-size:19px;letter-spacing:2px;color:#fff}
.tag-prem{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:3px;color:var(--accent);border:1px solid var(--accent);padding:1px 5px}
.topbar-right{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--dim)}
.topbar-far{position:absolute;right:16px;display:flex;align-items:center;gap:16px;font-size:13px;color:var(--dim)}
.topbar-far span{display:flex;align-items:center;gap:6px}
.av-sm{width:26px;height:26px;border-radius:50%;background:#1d4f7a;border:1px solid #3a6f9c;display:inline-block}

.navbar{height:54px;background:rgba(14,17,20,.96);border-bottom:1px solid #23292e}
.navbar-in{width:1064px;margin:0 auto;height:54px;display:flex;align-items:stretch}
.who{display:flex;align-items:center;gap:10px;padding-right:20px}
.who-badge{position:relative;width:38px;height:38px;background:#1b2126;border:1px solid #333c43;display:inline-flex;align-items:center;justify-content:center}
.who-lvl{position:absolute;top:-6px;right:-8px;font-family:'Oswald',sans-serif;font-size:11px;color:var(--gold)}
.who-txt{display:inline-flex;flex-direction:column;line-height:1.15}
.who-txt b{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.4px;color:#fff;font-weight:400}
.who-txt i{font-style:normal;font-size:11px;letter-spacing:1.2px;color:var(--mut)}
.tab{display:flex;align-items:center;padding:0 18px;font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:1.4px;color:var(--dim)}
.tab:hover{color:#fff}
.tab.on{color:#fff;background:rgba(255,255,255,.06);border-bottom:2px solid var(--accent)}
.navbar-right{display:flex;align-items:center;gap:18px;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:1.6px;margin-left:auto}
.navbar-right a{color:var(--dim)}
.navbar-right a.hot{color:var(--accent)}

.wrap{display:flex;align-items:flex-start;padding:26px 16px 60px 0}
.spacer{flex-grow:1}
.main{width:940px}
.aside{width:200px;margin-left:24px;padding-top:2px}

.hero{display:flex;gap:10px}
.promo{position:relative;width:620px;height:340px;overflow:hidden;background:#0e1417}
.promo svg{position:absolute;inset:0;width:620px;height:340px}
.promo-t{position:absolute;left:22px;bottom:22px;font-family:'Oswald',sans-serif;font-size:30px;color:#fff}
.promo-s{position:absolute;left:24px;bottom:8px;font-size:12px;letter-spacing:2px;color:#cbd5d9}

.pcard{width:310px;display:flex;flex-direction:column;gap:6px}
.pcard-top{position:relative;height:248px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.pcard-art{position:absolute;right:-16px;top:6px;width:190px;height:236px}
.pcard-in{position:relative;padding:12px 14px}
.pcard-name{font-family:'Oswald',sans-serif;font-size:20px;color:var(--gold)}
.pcard-meta{display:flex;align-items:center;gap:6px;margin-top:3px}
.pcard-meta span{font-size:11px;letter-spacing:1.4px;color:var(--mut)}
.badge-prem{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.6px;color:#1a1205;background:#ffc247;padding:1px 6px}
.pcard-rank{font-family:'Oswald',sans-serif;font-size:40px;line-height:1;color:#fff;margin-top:16px}
.xp{position:absolute;left:12px;right:12px;bottom:26px;height:12px;background:#0a0e11;border:1px solid #39424a}
.xp i{display:block;height:100%;background:var(--accent)}
.xp-lbl{position:absolute;left:12px;bottom:7px;font-size:11px;color:var(--mut)}

.sugg{background:var(--panel);border:1px solid var(--line);padding:8px 10px 10px}
.sugg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sugg-tile{position:relative;height:46px;background:#0e1316;border-bottom:2px solid #2a3238;display:flex;align-items:center;justify-content:center}
.sugg-tile.on{border-bottom-color:var(--accent)}
.sugg-ok{position:absolute;right:3px;bottom:3px}

.cta{display:flex;gap:12px;margin-top:14px}
.btn{height:46px;padding:0 18px;background:rgba(12,15,18,.85);border:1px solid #47525a;color:var(--txt);font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:1.6px}
.btn:hover{border-color:#6d7a83}
.btn-main{border:2px solid var(--accent);color:var(--accent)}
.btn-main:hover{background:var(--accent);color:#12160f}
.btn-fill{width:100%;height:36px;background:var(--accent);border:0;color:#12160f;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.6px}

.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.tile{position:relative;height:128px;background:var(--panel);border:1px solid var(--line);padding:14px 16px;overflow:hidden}
.tile h3{font-family:'Oswald',sans-serif;font-size:16px;letter-spacing:1.4px;color:#fff;position:relative}
.tile .none{margin-top:10px;font-size:13px;letter-spacing:1.2px;color:var(--mut)}
.tile-emb{position:absolute;right:-12px;top:4px;opacity:.55}
.bar{height:13px;background:#0a0e11;border:1px solid #39424a;position:relative}
.bar i{display:block;height:100%;background:var(--accent)}
.big{font-family:'Oswald',sans-serif;font-size:40px;line-height:1;color:#fff;margin-top:8px}

.feedrow{display:flex;gap:10px;margin-top:26px;align-items:flex-start}
.feed{width:620px}
.feedtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.feedtab{height:38px;background:rgba(26,31,36,.92);border:0;color:var(--dim);font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:1.6px}
.feedtab.on{background:#f2f5f6;color:#12171a}
.post{margin-top:12px;background:var(--paper);color:var(--ink);padding:12px;display:flex;gap:12px}
.post.plain{display:block;padding:10px 12px;font-size:13px}
.post .av{width:52px;height:52px;background:#46525a;flex-shrink:0}
.post b{font-weight:500}
.post .when{font-size:12px;color:var(--ink-dim);margin-top:4px}
.post .body{flex-grow:1;min-width:0;font-size:13px}

.mres{position:relative;height:160px;margin-top:10px;overflow:hidden;background:#16242b}
.mres svg{position:absolute;inset:0;width:100%;height:160px}
.mres-in{position:relative;height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.mres-in h3{font-family:'Oswald',sans-serif;font-size:22px;letter-spacing:1.6px;color:#fff}
.mres-teams{display:flex;align-items:center;gap:34px}
.mres-teams span{display:flex;align-items:center;gap:8px;font-family:'Oswald',sans-serif;font-size:20px;color:#fff}
.mres-vs{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2px;color:#cfd8dc}
.mres-sc{display:flex;align-items:center;gap:46px}
.mres-sc b{font-family:'Oswald',sans-serif;font-size:28px;color:#fff;font-weight:400}
.mres-sc i{font-style:normal;font-size:11px;letter-spacing:2px;color:#cfd8dc}

.medal{display:flex;align-items:baseline;justify-content:space-between;margin-top:10px;font-size:13px}
.medal b{font-weight:500}
.medal i{font-style:normal;font-size:12px;color:var(--ink-dim)}
.statline{display:flex;border-top:1px solid #c7cfd3}
.statline .lead{width:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #c7cfd3;padding:8px 4px}
.statline .cells{flex-grow:1;display:grid}
.statline .cells.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.statline .cells.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell{padding:8px 4px;text-align:center;border-right:1px solid #c7cfd3}
.cell:last-child{border-right:0}
.cell u{display:block;text-decoration:none;font-size:10px;letter-spacing:1.4px;color:var(--ink-dim)}
.cell b{font-family:'Oswald',sans-serif;font-size:20px;color:var(--ink);font-weight:400}
.lead b{font-family:'Oswald',sans-serif;font-size:30px;color:var(--ink);font-weight:400}
.lead u{text-decoration:none;font-size:10px;letter-spacing:1.4px;color:var(--ink-dim)}

.side{width:310px;display:flex;flex-direction:column;gap:10px}
.box{background:var(--panel);border:1px solid var(--line);padding:12px 14px}
.box h3{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2px;color:var(--mut);margin-bottom:10px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpis u{display:block;text-decoration:none;font-size:11px;color:var(--mut)}
.kpis b{font-family:'Oswald',sans-serif;font-size:21px;color:#fff;font-weight:400}
.meter{margin-top:9px}
.meter .lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}
.meter .lbl i{font-style:normal;color:var(--mut)}
.meter .trk{height:4px;background:#0a0e11;margin-top:4px}
.meter .trk i{display:block;height:100%;background:var(--accent)}
.meter .trk i.alt{background:var(--green)}
.mate{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.mate .sq{width:28px;height:28px;background:#263038;border:1px solid #39434b}
.mate .n{display:inline-flex;flex-direction:column}
.mate .n b{font-size:13px;color:var(--txt);font-weight:400}
.mate .n i{font-style:normal;font-size:11px;color:var(--mut)}
.mate .n i.live{color:var(--green)}
.task{margin-bottom:12px}
.task .t{font-size:13px;color:var(--txt)}
.task .v{font-size:11px;color:var(--mut);margin-top:4px}
.task .v.done{color:var(--green)}

.aside .net{display:flex;align-items:center;gap:8px}
.aside .net .ea{width:20px;height:20px;border-radius:50%;background:#7a3fb0;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#f3e9fb}
.aside .lnk{margin-top:14px;font-size:12px;letter-spacing:1.2px;color:var(--mut)}
.aside .add{margin-top:16px;display:flex;align-items:center;gap:8px}
.aside .add .plus{width:22px;height:22px;border:1px solid #3c454c;display:inline-flex;align-items:center;justify-content:center}
.aside .flist{margin-top:26px;border-top:1px solid #23292e;padding-top:14px;display:grid;gap:12px}
.aside .fr{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.on{background:var(--green)} .dot.idle{background:#c8a24a} .dot.off{background:#5d666c}
.chatbar{position:fixed;right:16px;bottom:10px;z-index:2;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.6px;color:var(--dim)}

@media (max-width:1380px){
  .wrap{justify-content:center;padding-right:16px}
  .spacer{display:none}
  .aside{display:none}
  .topbar-in,.navbar-in{width:100%}
}
@media (max-width:1000px){
  .main{width:100%;max-width:660px}
  .hero{flex-direction:column}
  .promo,.promo svg{width:100%}
  .pcard,.side,.feed{width:100%}
  .feedrow{flex-direction:column}
  .tri{grid-template-columns:1fr}
  .tile{height:auto}
  .cta{flex-wrap:wrap}
  .navbar-in{overflow-x:auto}
  .chatbar{display:none}
}