:root {
  --bg: #0e1117;
  --card: #171b24;
  --card-2: #1f2631;
  --text: #eef2f7;
  --muted: #a9b4c3;
  --line: #2c3745;
  --accent: #87b7ff;
  --accent-2: #b7ffcb;
  --warning: #ffd59a;
  --danger: #ff9d9d;
  --success: #9dffc5;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; }
.app-shell { max-width: 1100px; margin: 0 auto; padding: 16px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
h1 { margin: 0; font-size: 1.75rem; }
.subtitle { margin: 4px 0 0; color: var(--muted); }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; }
.tab, .primary-btn, .secondary-btn { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); background: var(--card); font-weight: 600; cursor: pointer; }
.tab.active { background: var(--card-2); border-color: var(--accent); }
.primary-btn { background: var(--accent); color: #07111f; border-color: transparent; }
.secondary-btn, .import-label { background: var(--card); color: var(--text); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
h2, h3 { margin-top: 0; }
label { display: block; font-size: 0.95rem; color: var(--muted); }
input[type="text"], select, input[type="file"] { width: 100%; margin-top: 6px; background: var(--card-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack-mobile { align-items: stretch; }
.video-wrap { margin-top: 12px; min-height: 160px; border: 1px dashed var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0f131a; }
video { width: 100%; max-height: 360px; display: none; }
video.has-video { display: block; }
.hint { color: var(--muted); margin-top: -6px; }
.score-row { display: grid; grid-template-columns: 1.2fr auto auto auto; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.score-row:last-child { border-bottom: none; }
.score-row .label { font-weight: 700; }
.score-btn { min-width: 52px; text-align: center; }
.score-btn.active[data-score="0"] { background: var(--danger); color: #2b0202; border-color: transparent; }
.score-btn.active[data-score="1"] { background: var(--warning); color: #2a1900; border-color: transparent; }
.score-btn.active[data-score="2"] { background: var(--success); color: #082213; border-color: transparent; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.action-row.compact { margin-top: 0; }
.hidden { display: none; }
.empty-state { color: var(--muted); padding: 12px 0; }
.score-hero { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.eyebrow { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.big-score { font-size: 2rem; font-weight: 800; }
.metric-card, .tier-card { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.metric-value { font-size: 1.1rem; font-weight: 700; margin-top: 6px; }
.tier-card.premium { border-color: #b58cff; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: 0.8rem; font-weight: 700; margin-right: 6px; }
.badge.free { background: #263240; }
.badge.what { background: #3d2f1f; }
.badge.why { background: #32263f; }
.player-list { display: grid; gap: 12px; }
.player-card { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.player-meta { color: var(--muted); font-size: 0.92rem; }
.compact-list { padding-left: 18px; }
.compact-list li { margin-bottom: 8px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.import-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
@media (max-width: 800px) {
  .grid.two, .grid.three, .stack-mobile { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 1fr repeat(3, auto); }
  .topbar, .row-between, .score-hero { flex-direction: column; align-items: flex-start; }
}