:root{
  --bg:#0f1226; --bg2:#171b34; --card:#1c2140cc; --card-solid:#1c2140;
  --line:#ffffff1a; --text:#f2f4ff; --muted:#a8b0d0;
  --accent:#ffd60a; --accent2:#7c5cff; --accent3:#33d6c8;
  --good:#30d158; --danger:#ff6482;
  --radius:18px; --shadow:0 20px 60px #0008;
  --font:ui-sans-system,-apple-system,"SF Pro",Inter,Segoe UI,Roboto,sans-serif;
}
[data-theme="light"]{
  --bg:#f4f5fb; --bg2:#fff; --card:#ffffffee; --card-solid:#fff;
  --line:#0f122614; --text:#141834; --muted:#5b6285;
  --shadow:0 16px 40px #14183418;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.bg-glow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px 400px at 15% 0%, #7c5cff33, transparent),
    radial-gradient(700px 420px at 90% 10%, #ffd60a22, transparent),
    radial-gradient(600px 500px at 50% 100%, #33d6c822, transparent);
}
.app{position:relative; z-index:1; max-width:1060px; margin:0 auto; padding:20px 18px 60px}
.header{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.brand{display:flex; gap:12px; align-items:center}
.brand-mark{
  width:46px;height:46px; display:grid; place-items:center; font-size:24px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:14px; color:#14142b; font-weight:900;
  box-shadow:var(--shadow);
}
.brand h1{margin:0; font-size:22px; letter-spacing:.2px}
.brand-sub{margin:2px 0 0; color:var(--muted); font-size:13px}
.header-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.btn{
  border:1px solid var(--line); background:var(--card-solid); color:var(--text);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:650; font-size:14px;
  transition:.15s;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.08)}
.btn.primary{background:linear-gradient(135deg,#ffd60a,#ff9f0a); color:#221a00; border:none}
.btn.ghost{background:transparent}
.icon-btn{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:var(--card-solid); color:var(--text); cursor:pointer; font-size:18px;
}
.main{display:flex; flex-direction:column; gap:16px}
.hero{display:grid; grid-template-columns:1.4fr .9fr; gap:16px}
@media(max-width:820px){.hero{grid-template-columns:1fr}}
.hero-text h2{margin:10px 0 8px; font-size:clamp(26px,4vw,38px); line-height:1.05}
.grad{background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-text p{color:var(--muted); line-height:1.6; margin:0 0 12px}
.pill{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.4px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--line);
  background:var(--card-solid); color:var(--accent3);
}
.hero-badges{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:13px}
.hero-badges span{border:1px solid var(--line); padding:6px 10px; border-radius:999px; background:var(--card-solid)}
.hero-card{
  background:linear-gradient(180deg,var(--card-solid),#1c214099);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); align-self:start;
}
.hero-card-head{display:flex; gap:10px; align-items:center; font-size:18px}
.hero-card-sub{color:var(--muted); margin:6px 0 12px}
.winner-bar{display:flex; gap:8px; flex-wrap:wrap}
.winner-chip{
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:13px;
  background:#ffffff14; border:1px solid var(--line);
}
.winner-chip.first{background:linear-gradient(135deg,#ffd60a,#ff9f0a); color:#221a00; border:none}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); backdrop-filter:blur(12px);
}
.game-picker{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.game-picker label{font-weight:800; font-size:13px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted)}
.game-picker select{
  flex:1; min-width:220px; padding:12px 14px; border-radius:12px; font-size:16px; font-weight:750;
  border:1px solid var(--line); background:var(--card-solid); color:var(--text); cursor:pointer;
}
.picker-tag{color:var(--muted); font-size:13px}
.game-tabs{display:flex; gap:8px; flex-wrap:wrap}
.game-tab{
  border:1px solid var(--line); background:var(--card-solid); color:var(--text);
  padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:700;
}
.game-tab.active{background:var(--text); color:var(--bg); border-color:var(--text)}
.game-tab .soon{opacity:.6; font-weight:500; font-size:12px}
.controls-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px}
.players-row{display:flex; gap:8px; flex-wrap:wrap}
.player-chip{
  display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--card-solid);
}
.player-chip input{
  background:transparent; border:none; color:var(--text); font-weight:750; width:110px; outline:none;
}
.player-chip button{border:none; background:#ffffff18; color:var(--text); border-radius:999px; width:26px;height:26px; cursor:pointer}
.target-wrap{margin-left:auto; color:var(--muted); font-size:13px; display:flex; gap:6px; align-items:center}
.target-wrap input{width:64px; padding:8px; border-radius:10px; border:1px solid var(--line); background:var(--card-solid); color:var(--text)}
.ip-note{
  margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--muted);
  border-left:3px solid var(--accent); padding-left:12px;
}
.table-head{display:flex; justify-content:space-between; gap:12px; align-items:start; margin-bottom:12px}
.table-head h3{margin:0; font-size:20px}
.table-head p{margin:4px 0 0; color:var(--muted); font-size:14px}
.badge{font-size:11px; font-weight:900; letter-spacing:.6px; padding:6px 10px; border-radius:999px; background:linear-gradient(135deg,var(--accent3),var(--accent2)); color:#0c1026}
.table-scroll{overflow:auto; border:1px solid var(--line); border-radius:14px}
table{width:100%; border-collapse:collapse; min-width:640px; background:var(--card-solid)}
th,td{padding:10px 8px; text-align:center; border-bottom:1px solid var(--line); font-size:14px}
th:first-child,td:first-child{text-align:left; position:sticky; left:0; background:var(--card-solid); z-index:1; min-width:210px}
th.player-head input{
  background:transparent; border:none; color:var(--text); font-weight:800; text-align:center; width:110px; outline:none; font-size:14px;
}
.cat-label{font-weight:700}
.cat-hint{display:block; font-weight:400; color:var(--muted); font-size:12px}
tr.section-row td{background:#ffffff0d; font-weight:900; text-align:left; letter-spacing:.4px; font-size:12px; color:var(--accent)}
.score-input{
  width:76px; padding:9px 6px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); text-align:center; font-weight:750; font-size:15px;
}
.score-input:focus{outline:2px solid var(--accent2)}
.score-input.filled{border-color:var(--accent3)}
td.total-cell{font-weight:900; font-size:16px}
tr.winner-row td.total-cell{color:var(--accent)}
.totals-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:12px}
.total-card{border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--card-solid)}
.total-card.first{border:2px solid var(--accent)}
.total-card .pname{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.total-card .pscore{font-size:26px; font-weight:900; margin:4px 0}
.total-card .pdetail{color:var(--muted); font-size:12px; line-height:1.5}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}
.steps,.check{line-height:1.7; color:var(--muted)}
code{background:#0006; padding:2px 6px; border-radius:6px; color:var(--text); font-size:13px}
[data-theme="light"] code{background:#14183410}
.muted{color:var(--muted); font-size:13px}
.footer{color:var(--muted); font-size:12px; text-align:center; padding:18px 0 0}
@media print{
  .header-actions,.controls,.game-picker,.hero,.grid-2,.footer{display:none !important}
  body{background:#fff; color:#000}
  .card,.hero-card{box-shadow:none; background:#fff; color:#000; border:1px solid #ccc}
  table{background:#fff} th,td{background:#fff !important; color:#000; border-color:#ccc}
  th:first-child,td:first-child{background:#fff !important}
  .app{max-width:none}
}