/* CSS from previous message (trimmed for brevity in this cell) */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root{
  --bg: #0c0f14;
  --surface: #121723;
  --text: #e9f1ff;
  --muted: #b3c0d1;
  --accent-1: #ff007a;
  --accent-2: #00f5d4;
  --accent-3: #f8ff00;
  --card: #151b2b;
  --ok: #45ff8f;
  --warn: #ffd166;
}
body{ margin:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text);
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(255,0,122,0.25), transparent 60%),
    radial-gradient(900px 800px at 120% 10%, rgba(0,245,212,0.22), transparent 60%),
    linear-gradient(180deg, #0c0f14 0%, #0e1220 60%, #0b0f1a 100%); }
.sidebar{ position: fixed; inset: 0 auto 0 0; width: 300px; background: linear-gradient(160deg, #11162a 0%, #0d1220 100%); border-right: 1px solid rgba(255,255,255,0.08); padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding:10px 8px; background: linear-gradient(90deg, rgba(255,0,122,0.12), rgba(0,245,212,0.12)); border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); }
.brand .ball{ font-size: 22px; }
.brand h1{ font-size: 18px; margin:0; letter-spacing: 0.5px; }
#themeToggle, #langToggle{ margin-left:auto; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--text); border-radius: 10px; padding: 6px 10px; cursor: pointer; transition: transform .12s ease, background .2s ease; }
#langToggle{ margin-left: 8px; }
#themeToggle:hover, #langToggle:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.06); }
.sidebar nav{ display:flex; flex-direction:column; gap:10px; }
.nav-link{ text-decoration:none; color: var(--text); background: linear-gradient(90deg, rgba(248,255,0,0.12), rgba(0,245,212,0.05)); padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); transition: transform .12s ease, background .2s ease; }
.nav-link:hover{ transform: translateX(4px); background: linear-gradient(90deg, rgba(255,0,122,0.18), rgba(0,245,212,0.10)); }
.nav-link.active{ outline: 2px solid var(--accent-2); }
.sidebar footer{ margin-top:auto; color: var(--muted); font-size: 12px; opacity: .8; }
main#app{ margin-left: 300px; padding: 28px; min-height: 100dvh; display: grid; gap: 22px; }
.section{ background: var(--card); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03); }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card{ background: linear-gradient(160deg, rgba(255,0,122,0.10), rgba(0,245,212,0.10)); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 16px; }
.player{ display:flex; gap:16px; align-items: center; }
.player img{ width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,0.2); background: #0a0e18; }
.table{ width:100%; border-collapse: collapse; margin-top: 10px; }
.table th, .table td{ border-bottom: 1px solid rgba(255,255,255,0.08); padding: 10px; text-align: left; }
.kpi{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top: 12px; }
.kpi .item{ background: #0e1424; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px; }
.kpi .label{ color: var(--muted); font-size: 12px; }
.kpi .value{ font-size: 22px; font-weight: 800; }
.badge{ display:inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,0.14); }
.badge.ok{ background: rgba(69,255,143,0.12); }
.badge.warn{ background: rgba(248,255,0,0.12); }
.alert{ background: linear-gradient(90deg, rgba(248,255,0,0.12), rgba(255,0,122,0.12)); border: 1px dashed rgba(255,255,255,0.2); padding: 12px; border-radius: 12px; color: var(--text); font-size: 14px; }
.caption{ font-size: 12px; color: var(--muted); margin-top: 6px; }
.license-chip{ display:inline-block; border: 1px solid rgba(255,255,255,0.2); padding: 2px 6px; border-radius: 8px; font-size: 11px; margin-left: 6px; }
:root[data-theme="light"]{ --bg:#f6f7fb; --surface:#ffffff; --text:#0b0f1a; --muted:#3b4758; --accent-1:#ff007a; --accent-2:#00a896; --accent-3:#f0b000; --card:#ffffff; --ok:#0b8f4e; --warn:#d08a00; }
.btn{ display:inline-block; border: 1px solid rgba(255,255,255,0.2); padding: 8px 12px; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; }
.btn:hover{ background: rgba(255,255,255,0.06); }
.edit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.edit-grid .card input{ width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: #0e1424; color: var(--text); }
:root[data-theme="light"] .edit-grid .card input{ background: #fff; border-color: rgba(0,0,0,0.15); color: #0b0f1a; }
@media (max-width: 900px){ .sidebar{ width: 100%; height: auto; position: static; } main#app{ margin-left: 0; padding: 18px; } .grid-2{ grid-template-columns: 1fr; } }