:root{
  --accent:#4f8df9; --accent-glow:rgba(79,141,249,.45); --accent-soft:rgba(79,141,249,.12);
  --bg:#080a0f; --panel:#10131b; --tile:60px;
  --text:#eef1f7; --muted:#8b93a6; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --maxw:1180px; --disp:"Space Grotesk",sans-serif; --body:"Manrope",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:clip}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 520px at 50% -10%, var(--accent-soft), transparent 70%)}
.app{position:relative; z-index:1}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--disp); margin:0; letter-spacing:-.02em}
button{font-family:inherit}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--disp);
  font-weight:600; font-size:14px; border-radius:11px; padding:11px 16px; cursor:pointer; border:1px solid transparent; transition:.16s; white-space:nowrap; line-height:1}
.btn-solid{background:var(--accent); color:#05070c; box-shadow:0 8px 24px -10px var(--accent-glow)}
.btn-solid:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-block{width:100%}
.btn-block.off,.btn[disabled]{opacity:.4; cursor:not-allowed; box-shadow:none}
.i-arrow{transition:transform .16s} .btn:hover .i-arrow{transform:translateX(3px)}

/* nav */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 80%,transparent); border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:13px 22px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand-mark{width:20px; height:20px; border-radius:6px; transform:rotate(45deg);
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#fff)); box-shadow:0 0 16px -2px var(--accent-glow)}
.brand-name{font-family:var(--disp); font-weight:700; font-size:18px}
.hl{color:var(--accent); margin-left:1px}
.nav-cta{display:flex; align-items:center; gap:10px}

/* champion tile */
.tile{padding:0; border:none; background:none; display:block; line-height:0}
.tile-frame{position:relative; width:100%; aspect-ratio:1/1.12; border-radius:5px; overflow:hidden;
  border:2px solid var(--ring); box-shadow:inset 0 -14px 22px -14px #000, 0 0 0 1px rgba(0,0,0,.5)}
.tile-frame img{width:100%; height:100%; object-fit:cover; display:block}
.tile-ph{position:absolute; inset:0; display:block}
.tile-stars{position:absolute; top:0; left:0; right:0; text-align:center; color:#ffd64a; line-height:1;
  font-size:7px; letter-spacing:-1px; padding-top:1px; text-shadow:0 1px 2px #000; pointer-events:none; white-space:nowrap; overflow:hidden}
.tile-lvl{position:absolute; bottom:1px; right:2px; font-family:var(--disp); font-weight:700; font-size:9px; color:#fff;
  line-height:1; padding:1px 3px; border-radius:3px; background:rgba(0,0,0,.6); text-shadow:0 1px 1px #000}
.tile-check{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;
  font-size:18px; background:color-mix(in srgb,var(--accent) 55%,transparent)}
.tile.on .tile-frame{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), 0 0 16px -4px var(--accent-glow)}
.tile:hover .tile-frame{filter:brightness(1.12)}
.tile-md .tile-stars{font-size:8px}
.tile-chip .tile-frame{aspect-ratio:1/1; border-width:1.5px; border-radius:5px}
.tile-chip .tile-stars,.tile-chip .tile-lvl{display:none}

/* search hero */
.search-hero{max-width:var(--maxw); margin:0 auto; padding:46px 22px 26px; display:flex; justify-content:center}
.search-card{width:min(480px,100%); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--line-2); border-radius:22px; padding:30px 28px; backdrop-filter:blur(6px);
  box-shadow:0 40px 90px -50px #000}
.search-title{font-size:40px; font-weight:700; text-align:center; margin:6px 0 0}
.search-sub{text-align:center; color:var(--muted); font-size:14px; margin:8px 0 22px}
.choose{min-height:54px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:9px 12px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:12px; cursor:text}
.choose-chip{position:relative; width:34px; cursor:pointer}
.choose-chip i{position:absolute; top:-5px; right:-5px; width:15px; height:15px; border-radius:50%; background:#e0473f; color:#fff;
  font-size:9px; font-style:normal; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px #000}
.search-actions{display:flex; gap:10px; margin:14px 0 22px}
.top-label{font-family:var(--disp); font-weight:600; font-size:14px; text-align:center; color:var(--text); margin-bottom:14px}
.top-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.browse-all{display:block; width:100%; margin-top:16px; background:none; border:none; color:var(--accent);
  font-family:var(--disp); font-weight:600; font-size:13px; cursor:pointer; padding:6px}
.browse-all:hover{text-decoration:underline}

/* type-ahead */
.choose-wrap{position:relative}
.choose-input{flex:1; min-width:130px; background:none; border:none; outline:none; color:var(--text);
  font-family:var(--body); font-size:15px; padding:5px 2px}
.choose-input::placeholder{color:var(--muted)}
.ac-drop{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20; background:var(--panel);
  border:1px solid var(--line-2); border-radius:13px; padding:6px; box-shadow:0 28px 64px -26px #000; max-height:330px; overflow:auto}
.ac-item{display:flex; align-items:center; gap:11px; width:100%; padding:6px 8px; border:none; background:none;
  color:var(--text); cursor:pointer; border-radius:10px; text-align:left}
.ac-item:hover{background:var(--accent-soft)}
.ac-item .tile{width:30px; flex:none}
.ac-name{font-family:var(--disp); font-weight:600; font-size:14px; margin-right:auto}

/* picker overlay */
.ov{position:fixed; inset:0; z-index:70; background:rgba(4,6,10,.74); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:18px; animation:fade .2s}
.ov-card{width:min(760px,100%); max-height:86vh; display:flex; flex-direction:column; background:var(--panel);
  border:1px solid var(--line-2); border-radius:20px; overflow:hidden; box-shadow:0 40px 100px -30px #000}
.ov-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line)}
.ov-head h3{font-size:19px; font-weight:700}
.ov-x{width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--muted); cursor:pointer}
.ov-search{padding:14px 20px 0}
.ov-search input{width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:11px; padding:10px 12px; color:var(--text); font-family:var(--body); font-size:14px; outline:none}
.ov-count{padding:8px 20px; color:var(--muted); font-size:13px}
.ov-grid{flex:1; overflow:auto; padding:6px 20px 18px; display:grid; grid-template-columns:repeat(auto-fill,64px); gap:8px; justify-content:center}
.ov-foot{padding:16px 20px; border-top:1px solid var(--line)}

/* filter bar */
.results{max-width:var(--maxw); margin:0 auto; padding:8px 22px 40px}
.filterbar{position:sticky; top:54px; z-index:30; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(12px);
  border:1px solid var(--line-2); border-radius:14px; padding:12px 16px; margin-bottom:18px}
.fb-left{display:flex; align-items:center; gap:14px; margin-right:auto}
.fb-count{font-size:14px; color:var(--muted)} .fb-count b{color:var(--text); font-family:var(--disp); font-size:17px}
.fb-sort{background:var(--bg); border:1px solid var(--line-2); color:var(--text); font-family:var(--body); font-size:13.5px; padding:9px 11px; border-radius:11px; cursor:pointer}
.fb-rar{display:flex; gap:6px}
.pillbtn{background:rgba(255,255,255,.04); border:1px solid var(--line-2); color:var(--muted); font-family:var(--disp); font-weight:600; font-size:12.5px; padding:7px 13px; border-radius:9px; cursor:pointer; transition:.14s}
.pillbtn:hover{border-color:var(--accent); color:var(--text)}
.pillbtn.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.fb-price{display:flex; align-items:center; gap:9px}
.fb-lbl{font-size:13px; color:var(--muted); font-family:var(--disp); font-weight:600}
.fb-val{font-family:var(--disp); font-weight:600; font-size:13px; color:var(--accent); min-width:38px; text-align:center}
.fb-sliders{position:relative; width:140px; height:20px; display:flex; align-items:center}
.fb-sliders input[type=range]{position:absolute; width:100%; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none}
.fb-sliders input[type=range]::-webkit-slider-runnable-track{height:3px; background:var(--line-2); border-radius:3px}
.fb-sliders input[type=range]::-moz-range-track{height:3px; background:var(--line-2); border-radius:3px}
.fb-sliders input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; pointer-events:auto; width:15px; height:15px; border-radius:50%; background:var(--accent); cursor:pointer; margin-top:-6px; box-shadow:0 0 8px -1px var(--accent-glow)}
.fb-sliders input[type=range]::-moz-range-thumb{pointer-events:auto; width:15px; height:15px; border:none; border-radius:50%; background:var(--accent); cursor:pointer}
.search-note{font-size:13px; color:var(--muted); margin:-6px 0 16px; padding:0 4px}
.search-note button{background:none; border:none; color:var(--accent); cursor:pointer; font:inherit; font-weight:600}

/* account card */
.acc-list{display:flex; flex-direction:column; gap:16px}
.acc{display:grid; grid-template-columns:248px 1fr; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.acc-side{position:relative; padding:18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:14px;
  background:rgba(255,255,255,.015)}
.acc-price{display:flex; flex-direction:column; gap:2px}
.acc-cur{font-family:var(--disp); font-weight:600; font-size:16px; color:var(--muted); display:flex; align-items:baseline; gap:5px}
.acc-cur i{font-style:normal; font-size:12px; width:13px; color:var(--muted); opacity:.8}
.acc-usd{font-weight:700; font-size:30px; line-height:1; color:var(--text)}
.acc-usd i{font-size:18px; width:16px; color:var(--accent); opacity:1}
.acc-res{display:grid; grid-template-columns:repeat(5,1fr); gap:9px 4px; padding:12px 8px; background:var(--bg); border:1px solid var(--line); border-radius:11px}
.res{display:flex; flex-direction:column; align-items:center; gap:3px}
.res-img{width:24px; height:24px; object-fit:contain; flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.res b{font-family:var(--disp); font-weight:600; font-size:11.5px; color:var(--text); line-height:1}
.acc-meta{display:flex; flex-direction:column; gap:8px}
.acc-id{display:flex; align-items:center; gap:7px}
.acc-id-lbl{font-family:var(--disp); font-weight:600; font-size:12px; color:var(--muted)}
.acc-id-code{font-family:var(--disp); font-weight:600; font-size:13px; color:var(--text); letter-spacing:.02em;
  background:var(--accent-soft); border:1px solid var(--line-2); padding:3px 9px; border-radius:7px}
.copy-btn{font-family:var(--disp); font-weight:600; font-size:11px; color:var(--accent); background:rgba(255,255,255,.04);
  border:1px solid var(--line-2); border-radius:7px; padding:4px 10px; cursor:pointer; transition:.14s; white-space:nowrap}
.copy-btn:hover{border-color:var(--accent)}
.copy-btn.ok{color:#34c759; border-color:#34c759}
.acc-roster{padding:16px}
.acc-grid{display:grid; grid-template-columns:repeat(auto-fill,var(--tile)); gap:5px; justify-content:start}
.empty{text-align:center; color:var(--muted); padding:50px; border:1px dashed var(--line); border-radius:16px}
.loading{text-align:center; color:var(--muted); padding:30px}

/* contact buttons */
.acc-buy{display:flex; flex-direction:column; gap:8px; margin-top:auto}

/* footer */
.foot{max-width:var(--maxw); margin:0 auto; padding:26px 22px; border-top:1px solid var(--line); display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.foot-links{display:flex; gap:18px; margin-left:auto} .foot-links a{color:var(--muted); font-size:13px} .foot-links a:hover{color:var(--text)}
.foot-note{color:var(--muted); font-size:12px; width:100%; order:3; opacity:.7}

@keyframes fade{from{opacity:0}}

/* responsive */
@media(max-width:860px){
  .acc{grid-template-columns:1fr}
  .acc-side{border-right:none; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px}
  .acc-price{margin-right:auto} .acc-meta{flex-basis:100%; order:3}
  .filterbar{top:52px} .fb-left{width:100%}
}
@media(max-width:560px){
  .search-hero{padding:26px 14px 18px} .search-card{padding:24px 18px} .search-title{font-size:32px}
  .results{padding:8px 14px 32px} .nav-inner{padding:12px 14px}
  .nav-cta .btn-ghost{display:none}
  .top-grid{grid-template-columns:repeat(5,1fr)}
}