:root{
  --bg:#0e0f12;--panel:#16171a;--muted:#a2a8ae;--text:#f2f3f7;--accent:#f84982;--ok:#5bd46b;--warn:#f4c36b;--bad:#ff5f5f;--bar:#2a2a31;--chip:#2b2c31
  /* set this to the exact font family provided */
  --num-font: inherit;
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:none}
body{margin:0;background:linear-gradient(135deg, #0c0d10 0%, #0f1013 50%, #131419 100%);background-attachment:fixed;color:var(--text);font:14px/1.5 system-ui,Segoe UI,Roboto,Arial}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:none;background:#0a0b0d;position:sticky;top:0;z-index:10;backdrop-filter:saturate(110%) blur(8px)}
.brand{font-weight:700;letter-spacing:.3px}
.demo-tag{margin-left:10px;padding:2px 8px;border-radius:999px;background:var(--chip);border:1px solid #3a3a42;color:#ffd76b;font-weight:700;font-size:11px;letter-spacing:.6px}
.beta-tag{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;background:#14151a;border:1px solid var(--accent);color:#fff;font-weight:800;font-size:11px;letter-spacing:.8px;box-shadow:0 6px 14px rgba(248,73,130,.18)}
.tabs .beta-tag{align-self:center}
.controls{display:flex;gap:8px}
.controls input,.controls select,.controls button{background:#121317;border:1px solid #2a2a30;color:var(--text);padding:8px 10px;border-radius:8px}
.controls button{background:var(--accent);border:none;color:white;font-weight:700;border-radius:8px;transition:transform .08s ease,box-shadow .12s ease}
.controls button:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(248,73,130,.2)}
.quick-links{display:flex;gap:8px;margin-left:6px}
.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#16171a;border:1px solid #2a2a32;color:#cfd3d7;border-radius:10px;text-decoration:none;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.icon-btn img{width:20px;height:20px;display:block}
.icon-btn.disabled{opacity:.45;filter:grayscale(100%);pointer-events:none;cursor:default}
.leetify-actions{margin-left:0;align-self:flex-end}
/* revert grid column overrides */

.shell{padding-inline:300px}
@media (max-width:1600px){.shell{padding-inline:300px}}
@media (max-width:1080px){.shell{padding-inline:24px}}
.layout{display:flex;flex-direction:column;gap:20px;padding:20px}


.left-card{background:var(--panel);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.identity-row{display:flex;gap:12px;align-items:flex-start}
.identity-info{flex:1;display:flex;flex-direction:column;gap:8px}
.leetify-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;grid-auto-rows:minmax(0,1fr)}
.metric-compact .metric-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.metric-compact .metric-value{font-weight:800}
.metric-status{margin-top:4px;font-size:12px;color:var(--ok)}
.mini-metrics{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mini-card{background:#101014;border:1px solid #1f1f26;border-radius:12px;padding:10px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.mini-title{font-size:11px;color:var(--muted)}
.mini-value{font-size:16px;font-weight:800;margin-top:2px}
.mini-bar{height:5px;background:var(--bar);border-radius:999px;margin-top:8px;overflow:hidden}
.mini-fill{height:100%;background:var(--ok);width:0;border-radius:999px}
.mini-card.ttd .mini-bar{height:4px}
.mini-card.ttd .mini-value{font-size:14px}
.na-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:#101014;border:1px solid #1f1f26;color:#b6b6bc;font-weight:600;font-size:12px}
.avatar{width:72px;height:72px;border-radius:14px;background:#1f2024;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.player-name{font-size:18px;font-weight:700}
.profile-badge{display:none;margin-left:8px;padding:2px 8px;border-radius:999px;background:#101014;border:1px solid #1f1f26;color:#ffd76b;font-weight:800;letter-spacing:.02em}
.profile-badge.show{display:inline-flex;align-items:center}
.profile-badge{position:relative;user-select:none;cursor:help}
.profile-badge::after{content:attr(data-tip);position:absolute;top:100%;left:0;transform:translateY(6px);background:#101014;border:1px solid #1f1f26;color:#e5e5ea;padding:4px 8px;border-radius:8px;white-space:nowrap;font-size:12px;box-shadow:0 8px 18px rgba(0,0,0,.25);opacity:0;pointer-events:none}
.profile-badge:hover::after{opacity:1}
.profile-badge-img{display:none;height:22px;margin-left:6px;border-radius:6px;vertical-align:middle}
.name-row{margin-top:4px;display:flex;align-items:center;gap:8px}
.risk{margin-top:6px}
/* revert risk centering */
.risk-label{font-size:11px;color:var(--muted);letter-spacing:.6px}
.risk-value{font-size:26px;font-weight:800;color:#ffd76b}
.risk-chip{display:inline-block;margin-top:4px;padding:4px 10px;border-radius:999px;background:var(--chip);border:1px solid #3a3a42;color:#e5e5ea;font-weight:600}
.risk-circle{position:relative;width:64px;height:64px;margin-top:6px;margin-bottom:6px}
.risk-circle svg{width:64px;height:64px;display:block;transform:rotate(-90deg)}
.risk-circle .bg{stroke:#2a2a32;stroke-width:8;fill:none}
.risk-circle .progress{stroke:#ffd76b;stroke-width:8;fill:none;stroke-linecap:round;transition:stroke-dashoffset .35s ease, stroke .2s ease}
.risk-circle .risk-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#ffd76b}
.ranks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;grid-auto-rows:minmax(0,1fr)}
.rank-item{background:#101014;border:1px solid #1f1f26;border-radius:10px;padding:10px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.rank-badge{position:relative;display:flex;align-items:center;justify-content:center;min-width:72px}
.rank-badge img{height:28px;display:none}
.ranks #faceitRankImg{height:28px;display:none}
.rank-badge > span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:inherit;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.6);font-family:var(--num-font);line-height:1;gap:2px;font-variant-numeric:tabular-nums lining-nums}
.rank-badge > span small,
.stat-value small,
.mini-value small,
.metric-value small,
#faceitElo small,
#premierRank small,
#wingmanRank small{font-size:.90em;opacity:.95;display:inline-block;line-height:1;font-weight:700;letter-spacing:0;vertical-align:baseline;transform:none}
.rank-badge #wingmanRank{display:none}
.leetify-badge{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.leetify-badge .leetify{color:var(--accent);font-weight:700}
.leetify-badge-img{height:20px}
.leetify-text{display:inline-block}

.top-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (min-width:1400px){.top-metrics{grid-template-columns:repeat(5,1fr)}}
@media (min-width:1400px){.leetify-metrics{grid-template-columns:repeat(3,1fr)}}
.metric{background:var(--panel);border-radius:14px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;flex-direction:column;height:100%}
.metric-title{font-weight:700;margin-bottom:8px;font-size:12px;letter-spacing:.2px}
.metric-bar{height:6px;background:var(--bar);border-radius:999px;overflow:hidden;position:relative}
.benchmark-marker{position:absolute;top:-15px;width:3px;height:21px;background:#ffffff;border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,.85);z-index:2;pointer-events:none}
.tools-box{margin-top:8px;display:flex;gap:8px;align-items:center;justify-content:flex-end;color:#b6b6bc}
.tools-box select{background:#101014;border:1px solid #1f1f26;color:#fff;border-radius:8px;padding:4px 8px}
.metric-bar .bar{height:100%;background:var(--ok);border-radius:999px;transition:width .18s ease}
.metric-note{margin-top:6px;color:var(--muted);font-size:13px}
.metric.metric-text .metric-bar{display:none}
.faceit-name{margin-bottom:8px;color:#b6b6bc;font-weight:700}
.faceit-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.faceit-head img#countryFlag{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px #2a2a32}
.faceit-head img#faceitLevelImg{width:22px;height:22px;border-radius:999px;box-shadow:0 0 0 1px #2a2a32}
.styles__StatResultValue-sc-737d7d16-1{margin-right:4px}
.dynIii{color:#32D35A;font-weight:700}
.giaeGA{color:#FF002B;font-weight:700}

.stats-card{background:var(--panel);border-radius:14px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.03);border:none}
.tabs{display:flex;gap:10px;margin-bottom:12px}
.game-note{margin-left:auto;color:#cfd3d7;font-weight:700;font-size:12px;padding:6px 10px;border-radius:10px;background:#101014;border:1px solid #1f1f26}
.action-btn{background:#17171d;border:1px solid #2a2a32;color:#b6b6bc;font-weight:700;font-size:12px;padding:8px 12px;border-radius:10px;text-decoration:none;transition:transform .08s ease,box-shadow .12s ease}
.action-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.action-btn#useFaceitRisk{background:#14151a;border-color:var(--accent);color:#fff;box-shadow:0 6px 14px rgba(248,73,130,.18)}
.action-btn.disabled{opacity:.55;pointer-events:none;filter:grayscale(35%)}
.actions-row{margin-top:8px}
.provided-by{margin-top:10px;color:#b6b6bc}
.leetify-link{color:#F84982;text-decoration:underline;font-weight:700}
.leetify-link:visited{color:#F84982}
.leetify-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.leetify-brand{display:flex;justify-content:flex-end;margin-top:8px}
.leetify-brand img{height:34px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.view-on a#viewOnFaceit{color:#FF5500;text-decoration:underline;font-weight:700}
.tab{background:#101014;border:1px solid #1f1f26;color:#fff;border-radius:999px;padding:8px 14px;transition:background-color .12s ease,border-color .12s ease}
.actions-row .tab{padding:6px 12px}
.tab.active{border-color:#333;background:#17171b}
.tab.disabled{opacity:.5;pointer-events:none}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat-box{background:#101014;border:1px solid #1f1f26;border-radius:12px;padding:12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.stat-title{font-size:11px;color:var(--muted)}
.stat-value{font-size:18px;font-weight:800;margin-top:2px}
.risk-value,.metric-value,.mini-value,.stat-value,#faceitElo,#premierRank,#wingmanRank{font-family:var(--num-font)}
.faceit-elo-glimmer{position:relative;font-weight:800}
@keyframes faceitGlow{0%,100%{text-shadow:0 0 2px rgba(0,0,0,.0)}50%{text-shadow:0 0 10px var(--lv-glow)}}
#faceitElo.faceit-elo-glimmer{animation:faceitGlow 1.8s ease-in-out infinite}
.lv1{--lv-color:#a3a8af;--lv-glow:rgba(163,168,175,.55);color:var(--lv-color)}
.lv2{--lv-color:#24c94f;--lv-glow:rgba(36,201,79,.65);color:var(--lv-color)}
.lv3{--lv-color:#2fdc5f;--lv-glow:rgba(47,220,95,.65);color:var(--lv-color)}
.lv4{--lv-color:#ffd24a;--lv-glow:rgba(255,210,74,.65);color:var(--lv-color)}
.lv5{--lv-color:#ffc942;--lv-glow:rgba(255,201,66,.65);color:var(--lv-color)}
.lv6{--lv-color:#ffbf3a;--lv-glow:rgba(255,191,58,.65);color:var(--lv-color)}
.lv7{--lv-color:#ffb02e;--lv-glow:rgba(255,176,46,.65);color:var(--lv-color)}
.lv8{--lv-color:#ff8c1a;--lv-glow:rgba(255,140,26,.65);color:var(--lv-color)}
.lv9{--lv-color:#ff6a1a;--lv-glow:rgba(255,106,26,.65);color:var(--lv-color)}
.lv10{--lv-color:#ff2b2b;--lv-glow:rgba(255,43,43,.70);color:var(--lv-color)}
.wlh{margin-top:14px;font-weight:700;letter-spacing:.25px}
.error-note{margin-top:8px;color:var(--bad);font-size:12px}
.foot{display:flex;gap:18px;align-items:center;margin-top:12px;color:var(--muted)}
.view-on a{color:var(--accent);font-weight:700}

.disclaimer{padding:16px;border-top:none;color:#b6b6bc;text-align:center}
.warn-icon{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:var(--warn);color:#000;font-weight:800;margin-right:8px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}

.bottom-bar{padding:14px 20px;border-top:none;display:flex;align-items:center;justify-content:flex-start}
.bug-btn{background:#17171d;border:1px solid #2a2a32;color:#b6b6bc;font-weight:700;font-size:12px;padding:8px 12px;border-radius:10px;text-decoration:none}
.bug-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.25)}

@media (max-width:1080px){.top-metrics{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}}