:root{
  --bg:#0E1116;--panel:#161B22;--panel2:#1A212B;--line:#242D38;
  --text:#E6EBF0;--dim:#8A97A6;
  --tech:#007BFF;--bright:#00C6FF;--slate:#374754;
  --amber:#f5b544;--green:#3fd07f;--red:#ff5c5c;--blue:#00C6FF;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 600px at 82% -12%,rgba(0,198,255,.10),transparent),
    radial-gradient(800px 500px at 0% 0%,rgba(11,26,51,.55),transparent),
    var(--bg);
  color:var(--text);font-family:"Inter",system-ui,-apple-system,sans-serif;min-height:100vh;padding:36px 18px 70px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue)}
.wrap{max-width:940px;margin:0 auto}
/* Content stays centered on the page; the skyscraper sits beside it without
   shifting the content off-center. On narrow screens the rail is hidden. */
.layout{max-width:720px;margin:0 auto;position:relative}
.rail{position:absolute;top:0;left:calc(100% + 24px);width:160px}
@media(max-width:1120px){.rail{display:none}.layout{max-width:720px}}

header{margin-bottom:22px}
.brand{font-family:"Inter",sans-serif;font-weight:700;font-size:25px;color:#fff;letter-spacing:.5px;text-decoration:none;display:inline-block}
.brand span{color:var(--bright)}
.tag{color:var(--dim);font-size:13px;margin-top:4px}
.tag b{color:var(--text)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card+.card{margin-top:18px}
.card-head-h{margin:0}
.card-head{padding:16px 20px 0;font-size:12px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:9px}
.card-head .sub{color:var(--dim);text-transform:none;letter-spacing:0;margin-left:6px;font-size:12px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--bright);flex:0 0 auto}
.dot.red{background:var(--red)}
.dot.amber{background:var(--amber)}
.dot.green{background:var(--green)}
.card-body{padding:16px 20px 20px}

form.search{display:flex;gap:9px}
input[type=text]{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:13px 15px;border-radius:11px;font-family:inherit;font-size:14px;transition:.15s}
input[type=text]:focus{outline:none;border-color:var(--bright);box-shadow:0 0 0 3px rgba(0,198,255,.12)}
button{font-family:"Inter",sans-serif;font-weight:600;letter-spacing:.2px;background:linear-gradient(135deg,var(--tech),var(--bright));
  color:#04121f;border:none;padding:0 22px;border-radius:11px;cursor:pointer;font-size:14px;white-space:nowrap;transition:.15s}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.55;cursor:default}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text);padding:9px 13px}

.hint{color:var(--dim);font-size:12px;margin-top:9px}
.hint b{color:var(--text)}
.error{color:var(--red);font-size:13px;margin-top:11px}

.profile{display:flex;gap:16px;align-items:center}
.profile img{width:80px;height:80px;border-radius:8px;border:1px solid var(--line)}
.pname{font-family:"Inter",sans-serif;font-size:19px;color:#fff;word-break:break-word}
.badges{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px}
.badge.on{background:rgba(126,201,111,.15);color:var(--green)}
.badge.off{background:rgba(108,125,140,.15);color:var(--dim)}
.badge.bad{background:rgba(229,83,60,.15);color:var(--red)}
.meta{margin-top:12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 16px;font-size:12px}
@media(max-width:620px){.meta{grid-template-columns:1fr 1fr}}
.meta div span{color:var(--dim)}
.meta div b{color:var(--text);font-weight:500}
.copy{cursor:pointer;border:none;background:none;color:var(--blue);font-family:inherit;font-size:12px;padding:0 0 0 4px}

.susp{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.gauge{--v:0;width:110px;height:110px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--gc) calc(var(--v)*1%),var(--panel2) 0);
  display:flex;align-items:center;justify-content:center;position:relative}
.gauge::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--panel)}
.gauge .inner{position:relative;text-align:center}
.gauge b{font-family:"Inter",sans-serif;font-size:26px;color:#fff;display:block;line-height:1}
.gauge small{color:var(--dim);font-size:10px;display:block;margin-top:3px}
.flags{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.flag{font-size:12px;padding:6px 10px;border-radius:6px;border-left:3px solid var(--dim);background:var(--bg)}
.flag.high{border-color:var(--red)}.flag.med{border-color:var(--amber)}.flag.low{border-color:var(--dim)}
.noflag{color:var(--green);font-size:13px}
.verdict{margin-top:12px;font-size:12px;color:var(--dim);line-height:1.5;border-top:1px solid var(--line);padding-top:10px}
.verdict b{color:var(--text)}

.rail{display:flex;flex-direction:column;gap:16px}
.ad-slot{background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 10px,#10151a 10px,#10151a 20px);
  border:1px dashed var(--line);border-radius:8px;min-height:600px;display:flex;align-items:center;
  justify-content:center;color:var(--dim);font-size:11px;text-align:center;padding:10px}
.leaderboard{margin-top:18px;background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 10px,#10151a 10px,#10151a 20px);
  border:1px dashed var(--line);border-radius:8px;height:90px;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:11px;text-align:center}

.disclaimer{background:rgba(229,83,60,.08);border:1px solid rgba(229,83,60,.3);color:#f0a99b;font-size:12px;
  padding:9px 13px;border-radius:7px;margin-bottom:14px;line-height:1.5}
.disclaimer b{color:var(--red)}
.notice{background:rgba(232,163,61,.08);border:1px solid rgba(232,163,61,.3);color:#e8c58a;font-size:12px;
  padding:9px 13px;border-radius:7px;margin-bottom:14px;line-height:1.5}
.notice b{color:var(--amber)}
.term{background:#05080a;border:1px solid var(--line);border-radius:7px;padding:13px;height:200px;
  overflow-y:auto;font-size:13px;line-height:1.6}
.l{white-space:pre-wrap}
.c-dim{color:var(--dim)}.c-green{color:var(--green)}.c-amber{color:var(--amber)}.c-red{color:var(--red)}.c-blue{color:var(--blue)}

.adgate{position:fixed;inset:0;background:rgba(3,5,7,.92);display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.adgate.show{display:flex}
.adbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;max-width:340px}
.adbox-label{font-family:"Inter",sans-serif;color:#fff;font-weight:600;margin-bottom:6px}
.adbox p{color:var(--dim);font-size:13px}
.adtimer{font-size:38px;color:var(--amber);margin:12px 0;font-weight:700}

/* legal pages */
.legal{max-width:720px}
.legal h1{font-family:"Inter",sans-serif;color:#fff;font-size:22px;margin-bottom:16px}
.legal h2{font-family:"Inter",sans-serif;color:#fff;font-size:15px;margin:22px 0 8px}
.legal p,.legal li{font-size:13px;line-height:1.7;color:var(--text)}
.legal ul{padding-left:20px;margin:6px 0}
.legal .muted{color:var(--dim);font-size:12px}

footer{color:var(--dim);font-size:11px;text-align:center;margin-top:34px;line-height:1.6}

/* version tag: small, muted, slightly set apart */
.version{display:inline-block;margin-left:8px;font-size:10px;color:#3c4650;letter-spacing:.3px}

/* SEO intro text */
.seo-intro p{font-size:13px;line-height:1.65;color:var(--dim);margin-bottom:10px}
.seo-intro p:last-child{margin-bottom:0}
.seo-intro b{color:var(--text);font-weight:500}
.seo-tip{border-top:1px solid var(--line);padding-top:10px}
.seo-intro .mono{font-family:"JetBrains Mono",monospace;color:var(--bright);font-size:12px}

/* share button in profile card header */
.share-btn{background:transparent;border:1px solid var(--line);color:var(--text);
  font-family:"Inter",sans-serif;font-size:12px;padding:6px 12px;border-radius:9px;cursor:pointer;letter-spacing:.2px;transition:.15s}
.share-btn:hover{border-color:var(--bright);color:var(--bright)}
.card-btn{margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--text);
  font-family:"Inter",sans-serif;font-size:12px;padding:6px 12px;border-radius:9px;cursor:pointer;letter-spacing:.2px;transition:.15s}
.card-btn:hover{border-color:var(--bright);color:var(--bright)}
.card-btn+.share-btn{margin-left:8px}

/* loading spinner overlay */
.spinner-overlay{position:fixed;inset:0;background:rgba(3,5,7,.88);display:none;flex-direction:column;
  align-items:center;justify-content:center;z-index:80;gap:16px}
.spinner-overlay.show{display:flex}
.spinner{width:44px;height:44px;border:3px solid var(--line);border-top-color:var(--bright);
  border-radius:50%;animation:spin .8s linear infinite}
.spinner-text{color:var(--dim);font-size:13px;font-family:"JetBrains Mono",monospace}
@keyframes spin{to{transform:rotate(360deg)}}

/* consent banner */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:none;max-width:520px;margin:0 auto}
.consent.show{display:block}
.consent p{font-size:12px;color:var(--text);line-height:1.6;margin-bottom:12px}
.consent .row{display:flex;gap:10px;flex-wrap:wrap}
.consent a{font-size:12px}

/* recent & watchlist */
.recent-grid{display:flex;flex-direction:column;gap:8px}
.recent-item{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text)}
.recent-item:hover{border-color:var(--bright)}
.recent-item img{width:40px;height:40px;border-radius:6px;border:1px solid var(--line);flex:0 0 auto}
.recent-info{flex:1;min-width:0}
.recent-name{font-family:"Inter",sans-serif;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-badges{margin-top:3px;display:flex;gap:5px;flex-wrap:wrap}
.recent-score{font-family:"Inter",sans-serif;font-size:22px;font-weight:600;flex:0 0 auto;min-width:36px;text-align:right}
.wl-changed{border-color:var(--bright);box-shadow:0 0 0 1px rgba(0,198,255,.3)}

/* top nav */
.topnav{display:flex;gap:8px;margin:22px 0 30px;flex-wrap:wrap}
.topnav a{font-family:"Inter",sans-serif;font-size:13px;font-weight:500;color:var(--text);text-decoration:none;
  padding:9px 15px;border:1px solid var(--line);border-radius:10px;background:var(--panel);transition:.15s}
.topnav a:hover{border-color:var(--slate)}

/* recently checked — horizontal bar */
.recent-bar{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.recent-bar::-webkit-scrollbar{height:6px}
.recent-bar::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.recent-chip{flex:0 0 auto;width:88px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 6px;background:var(--bg);border:1px solid var(--line);border-radius:8px;text-decoration:none;
  position:relative}
.recent-chip:hover{border-color:var(--bright)}
.recent-chip img{width:48px;height:48px;border-radius:6px;border:1px solid var(--line)}
.recent-chip-flag{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;
  background:var(--red);box-shadow:0 0 6px var(--red)}
.recent-chip-name{font-size:11px;color:var(--text);max-width:78px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:center}
.recent-chip-score{font-family:"Inter",sans-serif;font-size:15px;font-weight:600}

/* self-check CTA in nav */
.topnav a.nav-cta{background:linear-gradient(135deg,var(--tech),var(--bright));color:#04121f;border:none;font-weight:600}
.topnav a.nav-cta:hover{filter:brightness(1.08);color:#04121f}

/* leetify block: three scores + stats */
.leetify-block{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.score-row{display:flex;gap:14px;justify-content:space-around;flex-wrap:wrap}
.mini-score{display:flex;flex-direction:column;align-items:center;gap:7px}
.mini-gauge{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--gc) calc(var(--v)*1%), #1b232b 0);position:relative}
.mini-gauge::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel)}
.mini-gauge span{position:relative;font-family:"Inter",sans-serif;font-size:19px;font-weight:600;color:#fff}
.mini-gauge.combined{width:72px;height:72px}
.mini-gauge.combined span{font-size:22px}
.mini-label{font-size:11px;color:var(--dim);text-align:center;line-height:1.4}
.mini-label small{color:var(--text)}
.perf-flags{margin-top:14px;display:flex;flex-direction:column;gap:5px}
.perf-flags-title{font-size:11px;color:var(--dim);margin-bottom:2px}
.leetify-stats{margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px}
.leetify-stats-title{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.lstat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.lstat-grid div{display:flex;flex-direction:column;gap:3px;min-width:0}
.lstat-grid span{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lstat-grid b{font-family:"Inter",sans-serif;font-size:16px;color:#fff;white-space:nowrap}
@media (max-width:640px){.lstat-grid{grid-template-columns:repeat(4,1fr);row-gap:12px}}
.leetify-attribution{margin-top:12px;text-align:right}
.leetify-attribution a{font-size:11px;color:var(--dim);text-decoration:none;opacity:.8}
.leetify-attribution a:hover{color:var(--bright)}
.leetify-brand{color:#F84982;font-weight:600}
.leetify-attribution a:hover .leetify-brand{color:#F84982}

/* recent matches box */
.matches-box{margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px}
.matches-title{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.matches-list{display:flex;flex-direction:column;gap:5px}
.matches-list.matches-expanded{max-height:230px;overflow-y:auto;padding-right:4px}
.matches-list.matches-expanded::-webkit-scrollbar{width:6px}
.matches-list.matches-expanded::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.match-row{display:flex;align-items:center;gap:10px;font-size:11px;padding:6px 9px;border-radius:6px;
  background:var(--panel);border-left:3px solid var(--line);white-space:nowrap}
.match-row.match-hidden{display:none}
.match-w{border-left-color:var(--green)}
.match-l{border-left-color:var(--red)}
.match-t{border-left-color:var(--dim)}
.match-map{font-family:"Inter",sans-serif;color:#fff;min-width:56px;text-transform:capitalize}
.match-outcome{font-size:10px;font-weight:600;min-width:34px}
.match-w-txt{color:var(--green)}
.match-l-txt{color:var(--red)}
.match-t-txt{color:var(--dim)}
.match-score{color:var(--text);min-width:38px}
.match-stat{color:var(--dim);font-size:10px}
.match-date{color:var(--dim);font-size:10px;margin-left:auto}
.matches-toggle{margin-top:10px;width:100%;background:transparent;border:1px solid var(--line);
  color:var(--dim);font-family:"JetBrains Mono",monospace;font-size:11px;padding:6px;border-radius:6px;cursor:pointer}
.matches-toggle:hover{border-color:var(--bright);color:var(--bright)}

/* leetify: no-data hint */
.leetify-empty{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.leetify-empty-text{font-size:12px;color:var(--dim);text-align:center;line-height:1.6}
.leetify-link{color:#F84982;font-weight:600;text-decoration:none;margin-left:6px}
.leetify-link:hover{text-decoration:underline}

/* performance written analysis */
.perf-analysis{margin-top:14px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:8px;font-size:12px;line-height:1.65;color:var(--text)}
/* unranked label */
.na{color:var(--red);font-family:"Inter",sans-serif;font-size:16px;font-weight:600}

/* verification */
.verified-badge{display:inline-block;margin-left:10px;font-size:12px;font-weight:600;color:var(--bright);
  background:rgba(0,198,255,.12);border:1px solid rgba(0,198,255,.3);padding:2px 9px;border-radius:20px;vertical-align:middle}
.verified-badge.lg{margin-left:0;font-size:13px;padding:4px 12px}
.verify-shown{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.verify-line{display:flex;align-items:center;gap:10px}
.verify-since{font-size:12px;color:var(--dim)}
.verify-text{margin-top:10px;font-size:14px;color:var(--text);font-style:italic;line-height:1.5}
.verify-edit{display:flex;gap:8px;margin-top:12px}
.verify-edit input{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:10px 13px;border-radius:10px;font-family:inherit;font-size:13px}
.verify-edit input:focus{outline:none;border-color:var(--bright);box-shadow:0 0 0 3px rgba(0,198,255,.12)}
.verify-edit button{background:linear-gradient(135deg,var(--tech),var(--bright));color:#04121f;border:none;
  padding:0 18px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.verify-msg{font-size:12px;margin-top:8px;min-height:16px}
.verify-msg.ok{color:var(--green)} .verify-msg.err{color:var(--red)}
.verify-prompt{margin-top:16px;padding:16px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,198,255,.04),transparent);border-radius:0 0 12px 12px}
.verify-q{font-size:15px;font-weight:600;color:var(--text)}
.verify-sub{font-size:13px;color:var(--dim);margin-top:6px;line-height:1.5;max-width:520px}
.verify-btn{display:inline-block;margin-top:12px;background:linear-gradient(135deg,var(--tech),var(--bright));
  color:#04121f;text-decoration:none;padding:10px 18px;border-radius:11px;font-weight:600;font-size:13px;transition:.15s}
.verify-btn:hover{filter:brightness(1.08)}

/* landing page */
.landing{margin-top:18px}
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;transition:.15s}
.feat:hover{border-color:var(--slate);transform:translateY(-2px)}
.feat-ic{font-size:26px;margin-bottom:12px;filter:saturate(1.1)}
.feat-t{font-size:16px;font-weight:600;color:var(--text);margin-bottom:7px}
.feat-d{font-size:13px;color:var(--dim);line-height:1.6}
.lf-pink{color:#F84982;font-weight:600}
.how{margin-top:18px;background:linear-gradient(135deg,rgba(0,123,255,.08),rgba(0,198,255,.04));
  border:1px solid var(--line);border-radius:14px;padding:22px}
.how-t{font-size:15px;font-weight:600;color:var(--text);margin-bottom:16px}
.how-steps{display:flex;flex-direction:column;gap:12px}
.how-step{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--text)}
.how-n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--tech),var(--bright));
  color:#04121f;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.seo-intro-card{margin-top:18px}
@media(min-width:720px){.feat-grid{grid-template-columns:repeat(4,1fr)}.how-steps{flex-direction:row}.how-step{flex:1}}

/* landing hero eyecatcher */
.hero-strip{background:
    radial-gradient(600px 200px at 15% 0%,rgba(0,198,255,.12),transparent),
    linear-gradient(135deg,rgba(0,123,255,.10),rgba(11,26,51,.35));
  border:1px solid var(--line);border-radius:16px;padding:30px 26px;margin-bottom:16px;position:relative;overflow:hidden}
.hero-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--bright);background:rgba(0,198,255,.12);border:1px solid rgba(0,198,255,.3);
  padding:4px 11px;border-radius:20px;margin-bottom:14px}
.hero-h{font-size:30px;font-weight:700;letter-spacing:-.6px;line-height:1.15;color:#fff;max-width:600px}
.hero-accent{background:linear-gradient(135deg,var(--tech),var(--bright));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:15px;color:var(--dim);margin-top:12px;line-height:1.55;max-width:540px}
.hero-chips{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.hero-chip{font-size:12px;font-weight:500;color:var(--text);background:rgba(255,255,255,.04);
  border:1px solid var(--line);padding:6px 12px;border-radius:20px}
@media(max-width:560px){.hero-h{font-size:23px}}

/* discord linking */
.dc-steps{margin:0 0 16px 0;padding-left:20px;font-size:13px;color:var(--dim);line-height:1.9}
.dc-steps b{color:var(--text);font-weight:600}
.dc-code-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dc-code{font-family:"JetBrains Mono",monospace;font-size:22px;font-weight:500;letter-spacing:3px;
  color:var(--bright);min-height:28px}

/* player traits bar */
.traits-box{margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px}
.traits-title{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.traits-bar{display:flex;gap:10px;flex-wrap:wrap}
.trait{position:relative;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);cursor:default}
.trait-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;line-height:1}
.trait-ic svg{width:18px;height:18px;display:block}
.trait-name{font-size:13px;font-weight:600;color:var(--text)}
.trait-good{border-color:rgba(63,208,127,.35);background:rgba(63,208,127,.08)}
.trait-good .trait-name{color:var(--green)}
.trait-bad{border-color:rgba(255,92,92,.35);background:rgba(255,92,92,.08)}
.trait-bad .trait-name{color:var(--red)}
/* hover tooltip */
.trait-tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  width:max-content;max-width:230px;background:#0a0d12;border:1px solid var(--line);color:var(--text);
  font-size:12px;font-weight:400;line-height:1.45;padding:9px 12px;border-radius:9px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;
  z-index:20;pointer-events:none;text-align:center;white-space:normal}
.trait-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--line)}
.trait:hover .trait-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* FAQ */
.faq-card{margin-top:18px}
.faq{padding:14px 0;border-bottom:1px solid var(--line)}
.faq:last-child{border-bottom:none;padding-bottom:0}
.faq:first-child{padding-top:2px}
.faq-q{font-size:14px;font-weight:600;color:var(--text);margin-bottom:7px}
.faq-a{font-size:13px;color:var(--dim);line-height:1.6}

/* guides */
.guides-h1{font-size:24px;font-weight:700;letter-spacing:-.4px;color:var(--text);margin-bottom:10px}
.guides-lede{font-size:14px;color:var(--dim);line-height:1.65;max-width:620px;margin-bottom:22px}
.guide-list{display:flex;flex-direction:column;gap:10px}
.guide-item{display:block;padding:16px 18px;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;text-decoration:none;transition:.15s}
.guide-item:hover{border-color:var(--bright)}
.guide-item-t{font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px}
.guide-item-d{font-size:13px;color:var(--dim);line-height:1.55}
.guide{max-width:660px}
.guide-h1{font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.25;color:var(--text);margin-bottom:8px}
.guide-meta{font-size:12px;color:var(--dim);margin-bottom:20px}
.guide-intro{font-size:15px;line-height:1.7;color:var(--text);margin-bottom:8px}
.guide-h2{font-size:18px;font-weight:600;letter-spacing:-.2px;color:var(--text);margin:28px 0 10px}
.guide-p{font-size:14px;line-height:1.75;color:var(--dim);margin-bottom:12px}
.guide-cta{margin-top:32px;padding:20px;border-radius:12px;
  background:linear-gradient(135deg,rgba(0,123,255,.10),rgba(0,198,255,.04));border:1px solid var(--line)}
.guide-cta-t{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
.guide-cta-d{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:4px}
.guide-related{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.guide-related-t{font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.guide-related a{display:block;font-size:14px;color:var(--bright);text-decoration:none;padding:5px 0}
.guide-related a:hover{text-decoration:underline}

/* profile prose summary */
.profile-summary{font-size:14px;line-height:1.7;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-left:3px solid var(--bright);border-radius:10px;
  padding:14px 16px;margin:14px 0}

/* share prompt after analysis */
.share-prompt{margin-top:18px;padding:16px 18px;border-radius:12px;text-align:center;
  background:linear-gradient(135deg,rgba(0,123,255,.10),rgba(0,198,255,.04));border:1px solid var(--line)}
.share-prompt-t{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px}
.share-prompt-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.share-prompt-btn{font-family:inherit;font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;transition:.15s}
.share-prompt-btn:hover{border-color:var(--bright)}
.share-prompt-btn.primary{background:linear-gradient(135deg,#007BFF,#00C6FF);color:#04121f;border:none}
.share-prompt-hint{font-size:12px;color:var(--dim);margin-top:10px}

/* how-it-works score tiers */
.score-tiers{display:flex;flex-direction:column;gap:14px;margin:16px 0 4px}
.score-tier{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.score-tier-h{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--text);margin-bottom:10px}
.w-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.w-high{background:var(--red)}
.w-med{background:var(--amber)}
.w-low{background:var(--green)}
.score-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.score-list li{font-size:13px;line-height:1.6;color:var(--dim)}
.score-list b{color:var(--text);font-weight:600}

/* watch button + hint */
.watch-toggle.on{background:rgba(0,198,255,.14);border-color:rgba(0,198,255,.4);color:var(--bright)}
.watch-hint{font-size:13px;line-height:1.55;color:var(--bright);background:rgba(0,198,255,.08);
  border:1px solid rgba(0,198,255,.25);border-radius:10px;padding:10px 14px;margin-bottom:14px}

/* public ban feed */
.bans-lede{font-size:14px;line-height:1.65;color:var(--dim);max-width:620px;margin-bottom:18px}
.bans-empty{text-align:center;padding:36px 20px;background:var(--bg);border:1px dashed var(--line);border-radius:12px}
.bans-empty-t{font-size:15px;font-weight:600;color:var(--text);margin-bottom:8px}
.bans-empty-d{font-size:13px;color:var(--dim);line-height:1.6;max-width:440px;margin:0 auto}
.bans-empty-d a{color:var(--bright);text-decoration:none}
.bans-feed{display:flex;flex-direction:column;gap:8px}
.ban-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg);
  border:1px solid var(--line);border-left:3px solid var(--red);border-radius:10px;text-decoration:none;transition:.15s}
.ban-row:hover{border-color:var(--red)}
.ban-av{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);flex:0 0 auto;background:var(--panel)}
.ban-main{flex:1;min-width:0}
.ban-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ban-meta{font-size:12px;color:var(--red);font-weight:500;margin-top:2px}
.ban-when{font-size:12px;color:var(--dim);flex:0 0 auto}
.bans-cta{margin-top:22px;padding:18px;border-radius:12px;text-align:center;
  background:linear-gradient(135deg,rgba(0,123,255,.10),rgba(0,198,255,.04));border:1px solid var(--line)}
.bans-cta-t{font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px}
.bans-cta-d{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:12px;max-width:460px;margin-left:auto;margin-right:auto}

/* two-player comparison */
.cmp-lede{font-size:14px;line-height:1.65;color:var(--dim);max-width:600px;margin-bottom:18px}
.cmp-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.cmp-in{flex:1;min-width:180px;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:11px 14px;border-radius:10px;font-size:13px;font-family:inherit}
.cmp-vs{font-size:12px;color:var(--dim);font-weight:600}
.cmp-go{font-family:inherit;font-size:13px;font-weight:600;padding:11px 20px;border-radius:10px;border:none;
  background:linear-gradient(135deg,#007BFF,#00C6FF);color:#04121f;cursor:pointer}
.cmp-error{font-size:13px;color:var(--red);background:rgba(255,92,92,.08);border:1px solid rgba(255,92,92,.25);
  border-radius:10px;padding:10px 14px;margin-bottom:16px}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cmp-col-h{background:var(--panel);padding:16px;text-align:center}
.cmp-player{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none}
.cmp-player img{width:56px;height:56px;border-radius:10px;border:1px solid var(--line)}
.cmp-pname{font-size:14px;font-weight:600;color:var(--text);word-break:break-word}
.cmp-label{grid-column:1 / -1;background:var(--bg);padding:9px 14px;font-size:11px;font-weight:600;
  letter-spacing:.6px;text-transform:uppercase;color:var(--dim)}
.cmp-cell{background:var(--panel);padding:12px 14px;text-align:center;font-size:15px;font-weight:600;color:var(--text)}
.cmp-cell small{font-size:11px;color:var(--dim);font-weight:400}
.cmp-cell.big{font-size:22px}
.cmp-worse{background:rgba(255,92,92,.07);color:var(--red)}
.cmp-note{font-size:12px;color:var(--dim);line-height:1.6;margin-top:14px}

/* trust counter */
.hero-trust{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;color:var(--green);
  background:rgba(63,208,127,.08);border:1px solid rgba(63,208,127,.22);border-radius:20px;padding:6px 14px}
.hero-trust b{color:var(--text);font-weight:700}

/* ============================================================
   Visual polish (v1.6.0) — depth & glow, unchanged palette.
   Appended as overrides so existing rules stay intact.
   ============================================================ */

/* Cards: subtle top-lit gradient, hairline inner edge, soft lift */
.card{
  background:linear-gradient(180deg,#171D26,#161B22);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 18px 40px -30px rgba(0,0,0,.7);
}

/* Status dots glow in their own colour */
.dot{box-shadow:0 0 8px var(--bright)}
.dot.red{box-shadow:0 0 8px var(--red)}
.dot.amber{box-shadow:0 0 8px var(--amber)}
.dot.green{box-shadow:0 0 8px var(--green)}

/* Score ring: soft glow that follows the traffic-light colour (--gc),
   plus a little inner depth. Purely cosmetic — the --v fill is untouched. */
.gauge{filter:drop-shadow(0 0 9px var(--gc))}
.gauge::before{background:radial-gradient(circle at 50% 35%,#1C232E,#12171F)}

/* Feature cards: faint top accent line + framed icon tile */
.feat{background:linear-gradient(180deg,#1A212B,#161B22);position:relative;overflow:hidden}
.feat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--tech),var(--bright));opacity:.65}
.feat-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:11px;background:rgba(0,198,255,.06);border:1px solid rgba(0,198,255,.15);font-size:22px}

/* Avatar: whisper-thin cyan ring for a bit of presence */
.profile img{box-shadow:0 0 0 4px rgba(0,198,255,.06)}

/* Leetify stats block: same subtle gradient as the other panels */
.leetify-stats{background:linear-gradient(180deg,#1A212B,#151A22)}

/* Primary search button: gentle cyan glow so the CTA reads first */
.search button{box-shadow:0 6px 20px rgba(0,150,255,.28)}

/* ============================================================
   Visual polish v2 (v1.6.2) — bring the landing closer to the
   approved mockups: stronger ambient glow, a more present hero,
   deeper search field. Appended last so it wins the cascade.
   ============================================================ */

/* Ambient background: a touch more glow, pulled toward the top-centre */
body{
  background:
    radial-gradient(1200px 540px at 50% -10%, rgba(0,123,255,.11), transparent 60%),
    radial-gradient(900px 500px at 88% 6%, rgba(0,198,255,.06), transparent 55%),
    var(--bg);
}

/* Hero: layered gradient + soft corner glow + a bit more presence */
.hero-strip{
  background:
    radial-gradient(520px 260px at 88% -25%, rgba(0,198,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,198,255,.05), transparent 72%),
    linear-gradient(135deg,#171E29,#12171F);
  padding:36px 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 22px 55px -32px rgba(0,0,0,.85);
}
.hero-h{font-size:33px;letter-spacing:-.8px}

/* Feature cards: make the top accent read a little more, add lift on hover */
.feat::before{opacity:.8}
.feat:hover{border-color:rgba(0,198,255,.35);transform:translateY(-2px)}

/* Search field: real depth + a faint focus-glow ring */
.search input{
  background:#0C1015;border-color:#2B3644;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(0,198,255,.07);
}
.search input:focus{outline:none;border-color:var(--bright);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(0,198,255,.18)}

/* ============================================================
   Design refresh (v1.7.0) — fresh pass. Decisive, visible depth
   + a subtle animated ambient background. Appended last = wins.
   ============================================================ */

/* Base: dark canvas with a whisper-faint tech grid for texture. */
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(120,160,200,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,200,.020) 1px, transparent 1px);
  background-size:46px 46px;
  background-position:center top;
  background-attachment:fixed;
}

/* Two soft glow orbs that drift slowly behind everything.
   Fixed, blurred, GPU-friendly (animate transform only). */
body::before,
body::after{
  content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none;
  filter:blur(72px);will-change:transform;
}
body::before{
  width:640px;height:640px;top:-230px;left:-150px;
  background:radial-gradient(circle, rgba(0,123,255,.32), transparent 70%);
  animation:orb-a 30s ease-in-out infinite alternate;
}
body::after{
  width:560px;height:560px;top:-170px;left:58%;
  background:radial-gradient(circle, rgba(0,198,255,.24), transparent 70%);
  animation:orb-b 38s ease-in-out infinite alternate;
}
@keyframes orb-a{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(90px,50px) scale(1.18)}
}
@keyframes orb-b{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-80px,60px) scale(1.12)}
}
@media (prefers-reduced-motion: reduce){
  body::before,body::after{animation:none}
}

/* Hero: now a clearly glowing panel. */
.hero-strip{
  background:
    radial-gradient(600px 300px at 85% -30%, rgba(0,198,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(0,198,255,.06), transparent 70%),
    linear-gradient(135deg,#18202B,#12171F);
  border:1px solid rgba(0,198,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px -34px rgba(0,0,0,.9);
}

/* Cards: lift them a touch off the canvas so the layout has depth. */
.card{
  background:linear-gradient(180deg,#1A212C,#161B22);
  border-color:#28323F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 20px 44px -32px rgba(0,0,0,.75);
}

/* Feature icon tiles: give them a bit more life. */
.feat-ic{background:rgba(0,198,255,.09);border-color:rgba(0,198,255,.22)}

/* ---- Profile header buttons: tidy, evenly-spaced group ---- */
.card-head .head-btns{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ---- Prominent Watch CTA — the headline action on a profile ---- */
.watch-cta{margin:4px 0 18px;text-align:center}
.watch-big{
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.2px;
  width:100%;max-width:360px;padding:14px 26px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(0,198,255,.40);
  background:rgba(0,198,255,.12);color:var(--bright);
  transition:.15s;
}
.watch-big:hover{background:rgba(0,198,255,.20);border-color:rgba(0,198,255,.6)}
.watch-big.on{
  background:linear-gradient(135deg,#007BFF,#00C6FF);color:#04121f;border-color:transparent;
  box-shadow:0 6px 20px rgba(0,150,255,.30);
}
.watch-cta-sub{font-size:13px;color:var(--dim);margin-top:9px;line-height:1.5}

/* ---- Watchlist sign-in gate (sells the notification payoff) ---- */
.wl-gate{text-align:center;padding:20px 16px 8px;max-width:520px;margin:0 auto}
.wl-gate-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;font-size:26px;color:var(--bright);
  background:rgba(0,198,255,.10);border:1px solid rgba(0,198,255,.25);
  box-shadow:0 0 24px rgba(0,198,255,.15)}
.wl-gate-h{font-size:20px;font-weight:700;color:#fff;line-height:1.3;letter-spacing:-.3px}
.wl-gate-d{font-size:14px;color:var(--dim);line-height:1.65;margin:12px 0 18px}
.wl-gate-steps{text-align:left;max-width:360px;margin:0 auto 22px;padding-left:20px;
  display:flex;flex-direction:column;gap:9px}
.wl-gate-steps li{font-size:13.5px;color:var(--dim);line-height:1.5}
.wl-gate-steps b{color:var(--text);font-weight:600}
.verify-btn.lg{font-size:15px;padding:13px 30px}
.wl-gate-note{font-size:12px;color:var(--dim);margin-top:12px}

/* ---- Discord linking: numbered steps, Discord-first ---- */
.dc-step{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(255,255,255,.04)}
.dc-step:first-of-type{border-top:none;padding-top:0}
.dc-step-n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--bright);background:rgba(0,198,255,.10);border:1px solid rgba(0,198,255,.30)}
.dc-step-body{flex:1;min-width:0}
.dc-step-t{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px}
.dc-step-d{font-size:13px;color:var(--dim);line-height:1.6}
.dc-step-d .mono{color:var(--bright)}

/* "Open Discord" — the primary, foregrounded action (Discord brand blurple) */
.dc-join-btn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;
  padding:11px 20px;border-radius:11px;color:#fff;
  background:linear-gradient(135deg,#5865F2,#4752C4);
  box-shadow:0 6px 18px rgba(88,101,242,.32);transition:.15s}
.dc-join-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(88,101,242,.42)}

/* Restyled "Generate code" — clean outlined pill, not the default gradient */
.dc-gen-btn{display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  padding:11px 20px;border-radius:11px;
  color:var(--bright);background:rgba(0,198,255,.10);
  border:1px solid rgba(0,198,255,.35);transition:.15s}
.dc-gen-btn:hover{background:rgba(0,198,255,.18);border-color:rgba(0,198,255,.6)}
.dc-gen-ic{font-size:15px;line-height:1}
.dc-code-row{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}

/* ---- Watch box: standalone, between Profile and Cheat analysis ---- */
.watch-box{
  margin:16px 0;padding:22px 20px;border-radius:var(--radius);text-align:center;
  background:
    radial-gradient(520px 160px at 50% -40%, rgba(0,198,255,.14), transparent 60%),
    linear-gradient(180deg,#18212C,#141A22);
  border:1px solid rgba(0,198,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -18px rgba(0,150,255,.45);
}
.watch-box .watch-big{
  display:block;margin:0 auto;          /* guaranteed centering */
  width:100%;max-width:340px;
}
.watch-box-sub{font-size:13px;color:var(--dim);margin-top:10px;line-height:1.5}