:root{ --bg:#0b0f17; --card:#121826; --muted:#9fb0c0; --accent:#4da3ff; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:#e5eef6}
.container{max-width:1100px;margin:0 auto;padding:24px}
.card{background:var(--card);border:1px solid #1f2937;border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.btn{background:var(--accent);border:0;color:#021024;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
.btn.secondary{background:#263043;color:#cfe2f6}
input,select{background:#0f1624;border:1px solid #203045;color:#d7e6f7;border-radius:10px;padding:10px;width:100%}
h1,h2{margin:0 0 10px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.nav a{color:#9cc6ff;margin-left:14px;text-decoration:none}
.char{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.char img{width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid #1e293b;background:#0d1320}
.rating{display:flex;gap:6px}
.star{font-size:24px;cursor:pointer;filter:grayscale(1)}
.star.active{filter:none}
.notice{font-size:14px;color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #223048;text-align:left}
.win{color:var(--ok);font-weight:800}
footer{margin-top:24px;color:var(--muted);font-size:12px;text-align:center}