:root{
  --bg:#0c0f14;
  --panel:#121722;
  --panel-2:#0f1420;
  --text:#e7ecf7;
  --muted:#93a1b5;
  --accent:#46a3ff;
  --accent-2:#ff4766;
  --line: #1e2940;
  --good: #67d18f;
  --warn: #ffb020;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% -10%, #172133 0%, #0d1320 50%, #0a0f19 100%);
  color:var(--text);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0)) , var(--panel);
  position:sticky; top:0; z-index:5;
}
.weapon-select-wrap{
  display:flex; gap:10px; align-items:center;
}
.weapon-select-wrap label{color:var(--muted); font-size:14px}
#weaponSelect{
  background:#0e1524; color:var(--text); border:1px solid var(--line);
  padding:8px 12px; border-radius:10px; min-width:220px; outline:none;
}
.pick100{display:flex; gap:16px; align-items:center}
.pick100 .counter{
  display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.3px;
  padding:6px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2)
}
.pick100 .counter .value{color:var(--accent)}
.pick100 .counter.over .value{color:var(--warn)}
.pick100 .remaining{color:var(--muted)}

.layout{
  display:grid; gap:16px; padding:16px 20px;
  grid-template-columns: 220px 1fr 380px;
}

.categories{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px;
  position:sticky; top:76px; height:calc(100svh - 92px); overflow:auto;
}
.categories .cat{
  user-select:none; cursor:pointer; padding:10px 12px; border-radius:10px;
  color:var(--text); border:1px solid transparent; display:flex; justify-content:space-between; gap:10px;
}
.categories .cat + .cat{margin-top:6px}
.categories .cat:hover{background:#0e1524; border-color:var(--line)}
.categories .cat.active{background:#0c1322; border-color:var(--accent)}
.categories .cat .chip{color:var(--muted); font-size:12px}

.attachments{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px;
  min-height:360px;
}
.attachments h2{margin:6px 4px 10px; font-size:18px; color:#dbe6ff}
.grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
@media (max-width: 1200px){
  .layout{grid-template-columns: 1fr}
  .categories{position:static; height:auto}
  .grid{grid-template-columns: 1fr}
}
.card{
  border:1px solid var(--line); border-radius:12px; background:#0e1524; padding:10px;
  display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
}
.card .title{font-weight:600}
.card .meta{color:var(--muted); font-size:12px}
.card .desc{grid-column:1/-1; color:#c7d3ea; font-size:13px; margin-top:6px}
.card .points{font-weight:700; font-size:13px; color:#b9c8e6}
.card .select{
  appearance:none; width:18px; height:18px; border-radius:6px;
  border:2px solid var(--line); background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.card.selected{border-color:var(--accent); background:linear-gradient(180deg, rgba(70,163,255,.08), transparent) #0b1220}
.card.selected .select{border-color:var(--accent); background:var(--accent)}
.card .effect-list{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.effect{font-size:12px; padding:2px 6px; border-radius:999px; border:1px solid var(--line); color:#cfe3ff}
.effect.positive{border-color:#1c3; color:#b6f1c9}
.effect.negative{border-color:#c31; color:#ffc1c1}

.summary{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px;
  position:sticky; top:76px; height:calc(100svh - 92px); overflow:auto;
}
.weapon-visual{display:grid; place-items:center; gap:6px; padding:10px; border:1px dashed var(--line); border-radius:12px; background:#0b1220}
.weapon-visual img{width:100%; max-width:320px; aspect-ratio: 16/6; object-fit:contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.weapon-name{font-size:18px; font-weight:700}
.weapon-class{font-size:13px; color:var(--muted)}

.stats h3, .current-config h3{margin:14px 2px 8px}
.stats-grid{display:grid; gap:8px}
.stat{
  display:grid; grid-template-columns: 120px 1fr auto; gap:8px; align-items:center;
}
.stat .label{color:#dbe6ff}
.stat .bar{
  height:10px; border-radius:999px; background:#0a1120; outline:1px solid var(--line);
  position:relative; overflow:hidden;
}
.stat .bar > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), #7fd5ff);
}
.stat .val{min-width:72px; text-align:right; color:#cfe3ff}
.stat.compact{grid-template-columns: 160px auto}
.stat.compact .val{min-width:auto}

.current-config #configList{display:grid; gap:6px}
.config-row{display:flex; justify-content:space-between; gap:6px; padding:6px 8px; background:#0e1524; border:1px solid var(--line); border-radius:8px}
.config-row .cat{color:var(--muted)}
.config-row .name{font-weight:600; color:#dbe6ff}
.config-row .pts{color:#b9c8e6}

.small{font-size:12px; color:var(--muted)}