:root{ --bg:#0b1220; --panel:#111a2b; --accent:#4cc9f0; --muted:#8aa0b8; --text:#e6eef8; --danger:#ff6b6b; --ok:#51cf66; --border:#1f2a44; }
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; background:var(--bg); color:var(--text)}
.wrap{max-width:1100px; margin:0 auto; padding:16px}
header{display:grid; gap:12px; grid-template-columns:1fr auto 1fr; align-items:center}
.team-edit{display:flex; gap:8px; align-items:center}
.team-edit input{flex:1; background:#0e1727; border:1px solid var(--border); color:var(--text); border-radius:12px; padding:12px 14px; font-size:18px}
.timer{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap}
.time{font-variant-numeric:tabular-nums; font-weight:800; font-size:clamp(28px,6vw,56px)}
.btn{border:0; background:#1a2540; color:var(--text); padding:12px 16px; border-radius:12px; font-size:16px; cursor:pointer}
.btn.primary{background:var(--accent); color:#042233; font-weight:800}
.btn.good{background:var(--ok); color:#062b12}
.btn.warn{background:#ffd43b; color:#3a2f00}
.btn.danger{background:var(--danger)}
.btn.ghost{background:transparent; border:1px dashed #2b3a58; color:var(--muted)}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 6px 24px rgba(0,0,0,.25)}
.team-header{display:flex; align-items:center; justify-content:space-between; gap:8px}
.team-name{font-size:clamp(18px,3.6vw,26px); font-weight:900}
.big{font-size:clamp(40px,8vw,84px); font-weight:900; line-height:1; margin:4px 0 0}
.controls{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.controls .btn{font-size:clamp(18px,3.5vw,28px); padding:18px 12px; border-radius:16px}
.table{width:100%; border-collapse:collapse; margin-top:10px; font-size:15px}
.table th,.table td{border-bottom:1px solid #233150; padding:8px 6px; text-align:center}
.pill{background:#0e1727; border:1px solid #223357; padding:6px 10px; border-radius:999px; font-size:14px}
.row{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
.sticky{position:sticky; bottom:0; background:linear-gradient(180deg,rgba(11,18,32,0),var(--bg) 30%,var(--bg)); padding-top:10px}
.footer{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:12px}
.footer.end{justify-content:flex-end}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; background:#0d1322; border:1px solid #223357; padding:2px 6px; border-radius:6px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5); z-index:20; padding:16px}
.sheet{width:min(820px,92%)}
@media (max-width:820px){ header{grid-template-columns:1fr} .grid{grid-template-columns:1fr} }