:root{
  --bg:#0a0a0a; --panel:#141414; --panel2:#1c1c1c; --line:#2a2a2a;
  --ink:#ffffff; --dim:#8f8f8f; --accent:#FFE600; --accent2:#ffffff;
  --warn:#ffb02f; --bad:#ff5c5c; --radius:14px;
  --pad:clamp(12px,1.6vw,22px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-weight:500;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit;color:inherit}
.hide{display:none !important}

/* ---------- shell ---------- */
#shell{max-width:1280px;margin:0 auto;padding:var(--pad) var(--pad) 90px}
header.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 0 18px}
.brand{display:flex;align-items:flex-end;gap:11px;text-decoration:none;color:inherit}
.brand .logo{display:block;width:112px;height:auto}
.brand small{letter-spacing:.09em;text-transform:lowercase;font-weight:600;color:var(--dim);font-size:.64rem;padding-bottom:3px}
@media(max-width:520px){.brand .logo{width:88px}.brand small{display:none}}
.spacer{flex:1}
.pill{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.72rem;color:var(--dim);font-weight:700;letter-spacing:.06em}
.pill.pro{border-color:var(--accent);color:var(--accent)}
.pill.free{border-color:var(--line)}

nav.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:14px;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  font-size:.82rem;font-weight:700;color:var(--dim);white-space:nowrap;transition:.15s
}
nav.tabs button:hover{color:var(--ink);border-color:#3d3d3d}
nav.tabs button.on{background:var(--accent);color:#000000;border-color:var(--accent)}
nav.tabs button .lock{opacity:.75;font-size:.72em}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad);margin-bottom:14px}
.card h2{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:800;margin-bottom:14px}
.card h2 .r{float:right;text-transform:none;letter-spacing:0;color:var(--dim);font-weight:600}

.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
label.f{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:800;margin-bottom:7px}
input[type=text],input[type=number],input[type=date],input[type=time],select{
  width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:.95rem;font-weight:600;outline:none
}
input:focus,select:focus{border-color:var(--accent2)}
.btn{background:var(--accent);color:#000000;border-radius:10px;padding:12px 20px;font-weight:800;font-size:.9rem;transition:.15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.sm{padding:8px 14px;font-size:.8rem}
.btn.danger{background:none;border:1px solid #4a2530;color:var(--bad)}
.btn:disabled{opacity:.35;cursor:not-allowed;filter:none}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* format picker */
.fmts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fmt{border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;transition:.15s;position:relative}
.fmt:hover{border-color:#3d3d3d}
.fmt.on{border-color:var(--accent);background:#1a1705}
.fmt b{display:block;font-size:.98rem;margin-bottom:5px}
.fmt span{font-size:.78rem;color:var(--dim);line-height:1.45;display:block}
.fmt .tag{position:absolute;top:12px;right:12px;font-size:.58rem;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:999px}
.tag.free{background:#2b2605;color:var(--accent)}
.tag.pro{background:#2b2005;color:var(--warn)}

/* players */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 14px;font-size:.88rem;font-weight:700}
.chip button{color:var(--dim);width:20px;height:20px;border-radius:50%;font-size:.9rem;line-height:1}
.chip button:hover{color:var(--bad);background:#2a1418}
.count{font-size:.75rem;color:var(--dim);font-weight:700}

/* courts */
.courts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.court{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px}
.court.done{border-color:#3a3205}
.court .cname{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:800;margin-bottom:12px}
.court .cname .ok{color:var(--accent);float:right}
.team{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.team .names{flex:1;font-weight:700;font-size:.92rem;line-height:1.35}
.team input{width:74px;text-align:center;font-weight:800;font-size:1.05rem;padding:9px 4px}
.vs{text-align:center;color:var(--dim);font-size:.66rem;letter-spacing:.2em;font-weight:800;margin:4px 0 9px}
.resting{margin-top:12px;font-size:.76rem;color:var(--dim);font-weight:600}
.resting b{color:var(--ink);font-weight:700}

/* table */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:800;padding:0 10px 11px}
td{padding:11px 10px;border-top:1px solid var(--line);font-weight:700;font-size:.93rem}
td.n{text-align:right;font-variant-numeric:tabular-nums}
th.n{text-align:right}
tr.me td{color:var(--accent)}
.pos{width:34px;color:var(--dim);font-variant-numeric:tabular-nums}
.pos.p1{color:var(--accent)}

.empty{text-align:center;padding:40px 18px;color:var(--dim);font-size:.9rem;line-height:1.6}
.empty b{display:block;color:var(--ink);font-size:1rem;margin-bottom:7px}

/* history */
.hitem{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.hitem:first-child{border-top:0}
.hitem .hmain{flex:1;min-width:180px}
.hitem .hmain b{display:block;font-size:1rem;margin-bottom:4px}
.hitem .hmain span{font-size:.78rem;color:var(--dim);font-weight:600}
.hwin{font-size:.78rem;color:var(--accent);font-weight:800;text-align:right}
.hwin span{display:block;color:var(--dim);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}

.notice{border:1px solid #3a3205;background:#1a1705;border-radius:12px;padding:13px 15px;font-size:.85rem;color:#f0e9c0;line-height:1.55;margin-bottom:14px}
.notice b{color:var(--warn)}

footer.bar{
  position:fixed;left:0;right:0;bottom:0;background:rgba(8,10,13,.93);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:12px var(--pad);display:flex;gap:10px;justify-content:center;flex-wrap:wrap;z-index:40
}

/* ---------- TV MODE ---------- */
#tv{position:fixed;inset:0;background:#000000;z-index:100;display:flex;flex-direction:column;padding:2.2vmin 2.6vmin;gap:1.8vmin}
#tv .tvhead{display:flex;align-items:baseline;gap:2vmin;flex-shrink:0}
#tv .tvclub{font-size:3.1vmin;font-weight:900;letter-spacing:.06em}
#tv .tvclub em{font-style:normal;color:var(--accent)}
#tv .tvround{font-size:2.1vmin;font-weight:800;color:var(--dim);letter-spacing:.16em;text-transform:uppercase}
#tv .tvclock{margin-left:auto;font-size:3.1vmin;font-weight:900;font-variant-numeric:tabular-nums;color:var(--accent2)}
#tv .tvbody{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2vmin;min-height:0}
#tv .tvpanel{background:#0d0d0d;border:1px solid #202020;border-radius:1.6vmin;padding:1.8vmin 2vmin;display:flex;flex-direction:column;min-height:0}
#tv .tvtitle{font-size:1.55vmin;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);font-weight:900;margin-bottom:1.4vmin;flex-shrink:0}
#tv .lb{display:flex;flex-direction:column;gap:.7vmin;flex:1;min-height:0}
#tv .lbrow{display:flex;align-items:center;gap:1.6vmin;background:#171717;border-radius:1vmin;padding:.9vmin 1.6vmin;flex:1;min-height:0}
#tv .lbrow.top1{background:linear-gradient(90deg,#2b2605,#171717);box-shadow:inset 3px 0 0 var(--accent)}
#tv .lbrow.top2{box-shadow:inset 3px 0 0 #b0a000}
#tv .lbrow.top3{box-shadow:inset 3px 0 0 #6b5f00}
#tv .lbpos{font-size:2.6vmin;font-weight:900;color:var(--dim);width:4.2vmin;font-variant-numeric:tabular-nums;flex-shrink:0}
#tv .lbrow.top1 .lbpos{color:var(--accent)}
#tv .lbname{flex:1;font-size:2.9vmin;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tv .lbpts{font-size:3.3vmin;font-weight:900;font-variant-numeric:tabular-nums;color:var(--accent)}
#tv .lbdiff{font-size:1.7vmin;font-weight:800;color:var(--dim);width:6vmin;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
#tv .tvcourts{display:flex;flex-direction:column;gap:1.1vmin;flex:1;min-height:0}
#tv .tvcourt{background:#171717;border-radius:1vmin;padding:1.2vmin 1.6vmin;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
#tv .tvcourt .cl{font-size:1.4vmin;letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);font-weight:900;margin-bottom:.8vmin}
#tv .tvmatch{display:flex;align-items:center;gap:1.4vmin}
#tv .tvside{flex:1;font-size:2.25vmin;font-weight:800;line-height:1.25}
#tv .tvside.r{text-align:right}
#tv .tvsc{font-size:2.6vmin;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums;min-width:3vmin;text-align:center}
#tv .tvvs{font-size:1.5vmin;font-weight:900;color:var(--dim);letter-spacing:.14em}
#tv .tvnext{background:#0d0d0d;border:1px solid #202020;border-radius:1.6vmin;padding:1.4vmin 2vmin;flex-shrink:0;display:flex;align-items:center;gap:2.4vmin;overflow:hidden}
#tv .tvnext .nl{font-size:1.5vmin;letter-spacing:.22em;text-transform:uppercase;color:var(--warn);font-weight:900;white-space:nowrap;flex-shrink:0}
#tv .tvnext .ni{font-size:1.95vmin;font-weight:700;color:#cfcfcf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tv .tvrest{font-size:1.7vmin;font-weight:700;color:var(--dim);margin-top:1vmin;flex-shrink:0}
#tv .tvrest b{color:#cfcfcf}
#tvexit{position:fixed;bottom:1.6vmin;right:1.6vmin;z-index:110;opacity:.12;font-size:1.6vmin;padding:1vmin 1.8vmin;border:1px solid #2f2f2f;border-radius:999px;font-weight:800;transition:.2s}
#tvexit:hover{opacity:1}
@media (max-width:900px){#tv .tvbody{grid-template-columns:1fr}}