:root { --bg:#14161a; --panel:#1d2026; --line:#2c313a; --text:#e6e8ec; --dim:#8b93a1;
        --yes:#2e9e5b; --no:#d1495b; --unsure:#d9a21b; --accent:#5b9bff; }
* { box-sizing: border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.4 -apple-system, system-ui, sans-serif; overflow:hidden; }

/* video fills the left column edge to edge; every control lives in the right panel */
#app { display:grid; grid-template-columns:minmax(0,1fr) 380px; height:100vh; }
#stage { background:#000; min-width:0; min-height:0; }
#player { position:relative; width:100%; height:100%; background:#000; }
video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }

#panel { display:flex; flex-direction:column; gap:10px; padding:12px; background:var(--panel); border-left:1px solid var(--line); height:100vh; overflow-y:auto; min-height:0; }
#top { display:flex; gap:8px; }
#top select { flex:1; min-width:0; background:var(--bg); color:var(--text); border:1px solid var(--line); padding:6px 8px; border-radius:6px; }
#top select#filterSel { flex:0 0 105px; }
#question { font-weight:600; font-size:15px; }
#progress { color:var(--dim); margin-top:-6px; }
.chk { color:var(--dim); font-size:12px; }
#meta { color:var(--dim); font-size:12px; word-break:break-all; }
#speed { color:var(--dim); font-size:12px; display:flex; align-items:center; gap:4px; }
#speed button { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:5px; padding:2px 8px; cursor:pointer; }
#speed button.on { border-color:var(--accent); color:var(--accent); }

#verdicts { display:flex; gap:8px; }
.v { flex:1; padding:11px 6px; font-size:15px; font-weight:600; border-radius:8px; border:2px solid var(--line); background:var(--bg); color:var(--text); cursor:pointer; }
.v.yes { border-color:var(--yes); color:#8be6ac; } .v.no { border-color:var(--no); color:#ff9dab; } .v.unsure { border-color:var(--unsure); color:#f2cf6b; }
.v.yes.on { background:var(--yes); border-color:var(--yes); color:#fff; } .v.no.on { background:var(--no); border-color:var(--no); color:#fff; }
.v.unsure.on { background:var(--unsure); border-color:var(--unsure); color:#111; }
.v.clear { flex:0 0 46px; font-weight:400; color:var(--dim); }
kbd { font-size:10px; opacity:.7; border:1px solid currentColor; border-radius:4px; padding:0 3px; margin-left:3px; }

#stars { display:flex; align-items:center; gap:2px; }
#stars .lbl { color:var(--dim); font-size:12px; margin-right:6px; }
.star { background:none; border:none; color:#5b6270; font-size:28px; line-height:1; cursor:pointer; padding:0 2px; }
.star.on { color:#f5c518; }
#fields { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#fields input { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 9px; font:inherit; min-width:0; }
#copyPrev { grid-column:1 / -1; background:var(--bg); color:var(--dim); border:1px dashed var(--line); border-radius:6px; padding:4px; font-size:12px; cursor:pointer; }
#copyPrev:hover { color:var(--text); }
#tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { padding:4px 9px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--text); cursor:pointer; font-size:12px; }
.tag.on { background:var(--accent); border-color:var(--accent); color:#06121f; }
#newTagRow input, textarea { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 9px; font:inherit; }
textarea { resize:vertical; }
#nav { display:flex; align-items:center; gap:10px; }
#nav button { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:5px 10px; cursor:pointer; }
#pos { color:var(--dim); }
.hint { color:var(--dim); font-size:11px; line-height:1.5; }

#list { flex:1 1 auto; min-height:150px; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.row { display:flex; gap:8px; padding:5px 9px; cursor:pointer; align-items:center; border-bottom:1px solid var(--line); font-size:12px; }
.row:hover { background:#242830; } .row.cur { background:#2a3140; }
.dot { width:9px; height:9px; border-radius:50%; background:#444a55; flex:none; }
.dot.yes { background:var(--yes); } .dot.no { background:var(--no); } .dot.unsure { background:var(--unsure); }
.row .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.row .nt { color:var(--dim); font-size:11px; }

/* small verdict buttons over the video, lower-left, still visible in fullscreen */
#ov { position:absolute; left:10px; bottom:58px; display:flex; gap:6px; align-items:center; z-index:5; }
.ovb { padding:5px 12px; font-size:13px; font-weight:600; border-radius:6px; border:1.5px solid; background:rgba(15,17,21,.72); color:#fff; cursor:pointer; backdrop-filter:blur(3px); }
.ovb.yes { border-color:var(--yes); color:#8be6ac; } .ovb.no { border-color:var(--no); color:#ff9dab; } .ovb.unsure { border-color:var(--unsure); color:#f2cf6b; padding:5px 9px; }
.ovb.fs { border-color:#666; color:#ddd; padding:5px 9px; }
.ovb.yes.on { background:var(--yes); color:#fff; } .ovb.no.on { background:var(--no); color:#fff; } .ovb.unsure.on { background:var(--unsure); color:#111; }
#ovPos { color:#ddd; font-size:12px; background:rgba(15,17,21,.6); padding:3px 7px; border-radius:5px; }
#player:fullscreen #ov { bottom:72px; }
#player:fullscreen .ovb { font-size:15px; padding:8px 16px; }

@media (max-width: 900px) {
  body { overflow:auto; }
  #app { grid-template-columns:1fr; height:auto; }
  #stage { height:55vh; } #panel { height:auto; overflow:visible; }
}

/* sign-in + plain pages */
[hidden] { display:none !important; }
#login, body.plain { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
.card { width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; }
.card h1 { margin:0 0 8px; font-size:22px; }
.card p { color:var(--dim); }
.card input { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:inherit; margin:6px 0 10px; }
.card button { width:100%; padding:11px; border-radius:8px; border:0; background:var(--accent); color:#06121f; font-weight:600; font-size:15px; cursor:pointer; }
.card button:disabled { opacity:.6; cursor:default; }
.card a { color:var(--accent); }
p.ok { color:#8be6ac; } p.err { color:#ff9dab; }
#who { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--dim); font-size:12px; }
#who button { background:var(--bg); color:var(--dim); border:1px solid var(--line); border-radius:6px; padding:3px 8px; cursor:pointer; }

/* admin portal */
body.adminpage { overflow:auto; }
#adminbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); }
#adminbar nav { display:flex; gap:12px; align-items:center; color:var(--dim); font-size:13px; }
#adminbar a { color:var(--accent); } #adminbar button { background:var(--bg); color:var(--dim); border:1px solid var(--line); border-radius:6px; padding:3px 8px; cursor:pointer; }
#tabs { display:flex; gap:8px; padding:12px 16px; flex-wrap:wrap; }
.tab { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:6px 12px; cursor:pointer; }
.tab.on { border-color:var(--accent); color:var(--accent); }
#cards { display:grid; gap:14px; padding:0 16px 24px; }
.gcard { display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px; }
.gcard video { width:100%; border-radius:8px; background:#000; }
.ginfo h3 { margin:0 0 4px; font-size:16px; } .ginfo p { margin:4px 0; } .dim { color:var(--dim); font-size:12px; }
.acts { display:flex; gap:8px; margin:8px 0; flex-wrap:wrap; }
.act { background:var(--bg); color:var(--text); border:2px solid var(--line); border-radius:8px; padding:6px 12px; font-weight:600; cursor:pointer; }
.act.yes { border-color:var(--yes); color:#8be6ac; } .act.no { border-color:var(--no); color:#ff9dab; }
.media { margin-top:8px; } .media h4 { margin:6px 0; } .mrow { margin:3px 0; } .mrow a { color:var(--accent); }
.handles { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:13px; }
.handles input[type=number] { width:64px; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:4px; }
.handles button { background:var(--accent); color:#06121f; border:0; border-radius:6px; padding:5px 10px; font-weight:600; cursor:pointer; }
@media (max-width: 800px) { .gcard { grid-template-columns:1fr; } }

/* favorites */
#favs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
#favBtn { background:var(--bg); color:var(--text); border:1.5px solid var(--line); border-radius:8px; padding:5px 12px; font-weight:600; cursor:pointer; }
#favBtn.on { border-color:#e0567a; color:#ff8fab; background:#2a1820; }
#favLists { display:contents; }
#newList { flex:1 1 130px; min-width:110px; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:5px 9px; font:inherit; font-size:12px; }
#delList { background:var(--bg); color:#ff9dab; border:1px solid var(--no); border-radius:6px; padding:3px 8px; font-size:12px; cursor:pointer; }
#favMsg { color:#ff9dab; font-size:12px; }

/* team naming: the scoreboard's own name plate, shown big enough to read */
.cluster .plate { width: 100%; max-width: 327px; image-rendering: auto; background: #fff; border-radius: 4px; }
.cluster .acts { gap: .5rem; align-items: center; }
.cluster input[type=text] { flex: 1 1 12rem; min-width: 8rem; }

/* ---- site pages (home, tournament, goal, player, team, search, watch) ---- */
.sitepage { margin: 0; background: #12161c; color: #e8edf3; font: 15px/1.5 system-ui, -apple-system, sans-serif; }
#bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
       padding: .7rem 1rem; background: #0e1217; border-bottom: 1px solid #222a35; flex-wrap: wrap; }
#brand { color: #e8edf3; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
#brand span { color: #4ade80; }
#who { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
#who a { color: #9fb3c8; }
#main { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 4rem; }
.sitepage h1 { font-size: 1.5rem; margin: .2rem 0; }
.sitepage h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; color: #9fb3c8; text-transform: uppercase; letter-spacing: .04em; }
.sitepage h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; color: #9fb3c8; }
.dim { color: #8ea0b5; }
.err { color: #fca5a5; padding: 1rem; }

.bigbtn { display: block; text-align: center; padding: 1.1rem; margin: 1rem 0; border-radius: 10px;
          background: #16a34a; color: #fff; font-weight: 700; letter-spacing: .03em; text-decoration: none; }
.bigbtn.alt { background: #1f2937; color: #e8edf3; }
.bigrow { display: flex; gap: .8rem; flex-wrap: wrap; }
.bigrow .bigbtn { flex: 1 1 14rem; margin: .6rem 0; }

.tcard, .gtile, .sresult, .mrow2 { display: flex; flex-direction: column; gap: .2rem; padding: .8rem;
          background: #1a212b; border: 1px solid #222a35; border-radius: 8px; text-decoration: none; color: inherit; }
.tcard { margin-bottom: .6rem; }
.tcard:hover, .gtile:hover, .sresult:hover { border-color: #4ade80; }
.gridwrap { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.badge { align-self: flex-start; font-size: .75rem; padding: .1rem .45rem; border-radius: 99px; background: #14532d; color: #86efac; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { padding: .35rem .7rem; border-radius: 99px; background: #1a212b; border: 1px solid #222a35;
        color: #e8edf3; text-decoration: none; cursor: pointer; font: inherit; }
.chip.on { background: #14532d; border-color: #4ade80; }
.mrow2 { flex-direction: row; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .4rem; }
.mrow2 strong { flex: 1 1 12rem; }
.score { font-variant-numeric: tabular-nums; font-weight: 700; }

#g { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
#stage video { width: 100%; background: #000; border-radius: 8px; max-height: 70vh; }
.angles { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.ang { padding: .4rem .8rem; border-radius: 6px; border: 1px solid #222a35; background: #1a212b; color: #e8edf3; cursor: pointer; }
.ang.on { background: #14532d; border-color: #4ade80; }
.handles { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.handles input[type=range] { flex: 1 1 8rem; min-width: 6rem; }
.fact { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; }
.fact label { flex: 0 0 8rem; color: #8ea0b5; }
.fact input { flex: 1 1 8rem; min-width: 7rem; padding: .35rem; background: #0e1217; color: #e8edf3;
              border: 1px solid #222a35; border-radius: 5px; }
.hrow { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .2rem; }
.linkish { background: none; border: 0; color: #9fb3c8; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
#s #q { width: 100%; padding: .7rem; font-size: 1rem; background: #0e1217; color: #e8edf3;
        border: 1px solid #222a35; border-radius: 8px; margin-bottom: 1rem; }
.sresult { margin-bottom: .4rem; }

@media (max-width: 800px) { #g { grid-template-columns: 1fr; } }

/* Bare links (no component class of their own) need to be legible on the dark background. */
.sitepage a:not([class]) { color: #7dd3fc; }
.sitepage a:not([class]):hover { color: #bae6fd; }
.hint { background: #1a212b; border: 1px dashed #334155; border-radius: 8px; padding: .7rem; margin: .5rem 0; }