:root {
  --bg: #141222;
  --bg-2: #1c1930;
  --panel: #23203a;
  --panel-2: #1a1730;
  --line: #8ea0ff;
  --line-2: #4e4a72;
  --text: #f6f4ff;
  --muted: #b9b4d4;
  --cyan: #a9b6ff;
  --pink: #d48dff;
  --gold: #f4d35e;
  --green: #7edc9a;
  --red: #ef7d7d;
}
*{box-sizing:border-box;image-rendering:pixelated}
html,body{min-height:100%}
body{
  margin:0;
  font-family:"Courier New",monospace;
  letter-spacing:.01em;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  color:var(--text)
}
button,input,select{font:inherit;image-rendering:auto}
button{
  border:3px solid var(--line-2);
  background:#332f52;
  color:var(--text);
  border-radius:0;
  padding:10px 14px;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:0 3px 0 #120f21;
}
button.primary{background:#4d5fd1;border-color:#7484e8}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #120f21}
input,select{
  width:100%;padding:10px 12px;border-radius:0;border:3px solid var(--line-2);
  background:#171428;color:var(--text)
}
.sort-wrap{display:flex;align-items:center;gap:8px;color:var(--muted)}
.sort-wrap select{width:auto;min-width:260px}
.shell{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.sidebar,.panel,.slot-card,.card,.battle-box,.rank{
  background:var(--panel);
  border:3px solid var(--line-2);
  border-radius:0;
  box-shadow:0 0 0 2px #171428;
}
.sidebar{padding:18px;display:flex;flex-direction:column;gap:18px;background:var(--panel-2)}
.content{padding:20px;display:grid}
.eyebrow{margin:0;color:var(--cyan);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
h1{margin:8px 0 10px;font-size:28px;line-height:1.1;text-transform:uppercase}
h2,h3{margin:0 0 10px;text-transform:uppercase}
.muted{color:var(--muted)}
.tabs{display:grid;gap:10px}.tab.active{border-color:var(--line);color:var(--text);background:#43406a}.inner{padding:14px}.hidden{display:none}.view{display:none;gap:16px}.view.active{display:grid}
.top-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{padding:14px}.stat span{display:block;color:var(--muted);margin-bottom:8px;text-transform:uppercase}.stat strong{font-size:26px;color:var(--gold)}
.panel{padding:16px}.action-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}
.card{padding:14px;background:var(--panel-2)}
.avatar{width:72px;height:72px;border-radius:0;display:block;object-fit:cover;border:3px solid var(--line);background:#0b1323;margin-bottom:12px}
.card-head{display:flex;gap:12px;align-items:flex-start}.card-head .title-wrap{min-width:0;flex:1}
.badge-row,.chip-row,.reward-row,.battle-summary{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.role-badge,.power-chip,.passive-chip,.reward-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:2px solid var(--line-2);background:#2a2644;color:var(--text);font-size:12px}
.passive-chip{color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.star-row{margin:6px 0;color:var(--gold);letter-spacing:.08em}
.progress{height:10px;background:#171428;border:2px solid var(--line-2);margin:8px 0 4px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#7c6cff,#b48cff)}
.mini-meta{color:var(--muted);font-size:12px;line-height:1.5}
.card .rarity{font-size:12px;letter-spacing:.12em;text-transform:uppercase}.card.R .rarity{color:#9ac0ff}.card.SR .rarity{color:var(--pink)}.card.SSR .rarity{color:var(--gold)}.card h3{margin:6px 0;font-size:18px}.card .meta{color:var(--muted);font-size:13px;line-height:1.6}.card .actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.empty{color:var(--muted)}
.result-title{font-size:24px;font-weight:700;letter-spacing:.14em;margin-bottom:10px}
.lineup-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.slot-card{padding:14px;min-height:180px;background:var(--panel-2)}.slot-index{font-size:12px;color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.leaderboard{display:grid;gap:10px;margin-top:12px}.rank{display:grid;grid-template-columns:60px 1fr 120px 120px 120px;gap:12px;align-items:center;padding:12px 14px;background:var(--panel-2)}
.tag{display:inline-block;padding:4px 8px;border:2px solid var(--line);border-radius:0;color:var(--muted);font-size:12px}.battle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:14px 0}.battle-box{padding:14px;background:var(--panel-2)}.battle-box span{display:block;color:var(--muted);font-size:13px;margin-bottom:8px;text-transform:uppercase}.battle-box strong{font-size:24px;color:var(--gold)}.result-box{margin-top:16px}.ok{color:var(--green)}.bad{color:var(--red)}
@media (max-width: 960px){.shell{grid-template-columns:1fr}.top-grid,.battle-grid,.lineup-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.top-grid,.battle-grid,.lineup-slots{grid-template-columns:1fr}.rank{grid-template-columns:50px 1fr}.sort-wrap select{min-width:0;width:100%}}