
:root{
  --bg:#0B1220; --ink:#EAF2FF; --muted:#9FB0C9; --accent:#39FF14;
  --card:rgba(255,255,255,.05); --border:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
.judge-panel{background:var(--card); border:1px solid var(--border); border-radius:20px; padding:16px; display:grid; gap:16px; max-width:1200px; margin:auto}
.panel-header,.panel-footer{display:flex; gap:12px; align-items:center; justify-content:space-between}
.panel-header .meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:.95rem}
.badge{padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.04)}
.rule{color:var(--ink); opacity:.9}
.rule b{color:var(--accent)}
.divider{height:1px; background:var(--border); margin:4px 0}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{flex:0 0 auto; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--ink); cursor:pointer}
.tab.is-active{outline:2px solid var(--accent); background:rgba(57,255,20,.08)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:980px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:16px; padding:12px; display:grid; gap:10px}
.card header{display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-weight:600}
.scorepad{display:grid; gap:8px}
.score-row{display:flex; gap:10px; align-items:center}
.score-val{min-width:88px; text-align:center; font-weight:800; font-size:1.4rem; padding:8px 10px; border-radius:12px; background:rgba(57,255,20,.12); border:1px solid rgba(57,255,20,.35); color:var(--accent)}
input[type=range]{-webkit-appearance:none; width:100%; height:18px; background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px; background:linear-gradient(90deg,var(--accent),rgba(57,255,20,.2)); border-radius:9px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:36px; height:36px; margin-top:-15px; border-radius:12px; background:#0e171e; border:2px solid var(--accent); box-shadow:0 0 0 6px rgba(57,255,20,.12)}
input[type=range]::-moz-range-track{height:6px; background:linear-gradient(90deg,var(--accent),rgba(57,255,20,.2)); border-radius:9px}
input[type=range]::-moz-range-thumb{width:36px; height:36px; border-radius:12px; background:#0e171e; border:2px solid var(--accent)}
.nudge{display:flex; gap:8px}
.btn{padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--ink); font-weight:600; cursor:pointer}
.btn:active{transform:scale(.98)}
.quick{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04)}
.chip.is-on{outline:2px solid var(--accent)}
.criteria{display:flex; gap:8px; flex-wrap:wrap}
.criteria .chip{color:var(--muted)}
.sections-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:980px){.sections-grid{grid-template-columns:1fr}}
.attempts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:1200px){.attempts{grid-template-columns:1fr 1fr}}
@media (max-width:800px){.attempts{grid-template-columns:1fr}}
.diversity{display:flex; gap:8px; align-items:center}
.dot{width:10px; height:10px; border-radius:50%}
.ok .dot{background:var(--accent)}
.warn .dot{background:#ffcc00}
.review{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.total{padding:8px 12px; border-radius:10px; border:1px solid rgba(57,255,20,.35); background:rgba(57,255,20,.1); color:var(--accent); font-weight:800}
.subtle{color:var(--muted)}
.submit{margin-left:auto}
.btn-primary{background:linear-gradient(90deg,#4B7BFF,#AD26FF); border:none}
.tri{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center}
.toggle{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.toggle input{display:none}
.toggle label{padding:12px; text-align:center; background:rgba(255,255,255,.04); cursor:pointer}
.toggle input:checked + label{background:rgba(57,255,20,.1); outline:2px solid var(--accent)}
.strip{display:flex; gap:8px; flex-wrap:wrap}
.kpi{padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--muted)}
.hold{position:relative}
.hold::after{content:''; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 0 0 0 rgba(57,255,20,.35); transition:box-shadow .2s linear}
.hold.is-holding::after{box-shadow:inset 0 0 0 4px rgba(57,255,20,.35)}


/* Alerts / validation */
.alerts{display:grid; gap:6px; margin-top:8px}
.alert{padding:8px 10px; border-radius:10px; border:1px solid; font-size:.95rem}
.alert.error{border-color:#ff5d5d; background:rgba(255,93,93,.08); color:#ffc9c9}
.alert.warn{border-color:#ffcc00; background:rgba(255,204,0,.1); color:#ffe9a6}
.btn[disabled]{opacity:.55; cursor:not-allowed}
