/* intuition reviewer console — dark, minimal, big targets. */
:root {
  --bg:      #0b0d10;
  --panel:   #14181d;
  --panel2:  #1b2027;
  --line:    #2a313b;
  --fg:      #e6edf3;
  --dim:     #8b949e;
  --ok:      #39d353;
  --warn:    #e3b341;
  --bad:     #f85149;
  --focus:   #58a6ff;
  --success: #2ea043;
  --success2:#3fb950;
  --fail:    #da3633;
  --fail2:   #f85149;
  --uncert:  #6e7681;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 14px/1.4 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.hidden { display: none !important; }

/* ---- login overlay ---- */
#login {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, #10151b, var(--bg));
}
#login .card {
  width: 340px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
#login h1 { margin: 0 0 4px; font-size: 20px; }
#login p  { margin: 0 0 18px; color: var(--dim); font-size: 13px; }
#login input {
  width: 100%; padding: 12px 14px; margin-bottom: 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--fg); font-size: 15px; outline: none;
}
#login input:focus { border-color: var(--focus); }
#login button {
  width: 100%; padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--focus); color: #06122a; font-size: 15px; font-weight: 700;
}
#login .err { color: var(--bad); font-size: 13px; min-height: 18px; margin-top: 2px; }

/* ---- app shell ---- */
.wrap { height: 100%; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.topbar .title { font-weight: 700; letter-spacing: .2px; }
.topbar .robot { color: var(--dim); } .topbar .robot b { color: var(--fg); }
.topbar .spacer { flex: 1; }
.topbar .mode { color: var(--dim); font-variant-numeric: tabular-nums; }
.topbar button.ghost {
  background: transparent; color: var(--dim); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px;
}
.topbar button.ghost:hover { color: var(--fg); border-color: var(--dim); }

/* ---- video stage ---- */
.stage { flex: 1; min-height: 0; background: #000; padding: 8px; }
.grid {
  height: 100%; display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;
}
.grid[data-n="1"] { grid-template-columns: 1fr; }
.grid[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.grid[data-n="3"] { grid-template-columns: repeat(2, 1fr); }
.grid[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
/* focus mode: one tile fills the stage, others hidden */
.grid.focus { grid-template-columns: 1fr !important; grid-auto-rows: 1fr; }

.tile {
  position: relative; background: #05070a; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; min-height: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tile.focused { border-color: var(--focus); box-shadow: 0 0 0 2px rgba(88,166,255,.35) inset; }
.grid.focus .tile:not(.focused) { display: none; }
.tile video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.tile .label {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: rgba(6,10,14,.72); padding: 4px 9px; border-radius: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.tile .badge {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(6,10,14,.72); padding: 4px 9px; border-radius: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
}
.tile .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.badge.live   .dot { background: var(--ok);  box-shadow: 0 0 0 3px rgba(57,211,83,.18); }
.badge.live   { color: var(--ok); }
.badge.degraded .dot { background: var(--warn); }
.badge.degraded { color: var(--warn); }
.badge.offline .dot { background: var(--bad); }
.badge.offline { color: var(--bad); }

.tile .stats {
  position: absolute; bottom: 8px; left: 8px; z-index: 3;
  background: rgba(6,10,14,.72); padding: 3px 8px; border-radius: 7px;
  font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.tile .key {
  position: absolute; bottom: 8px; right: 8px; z-index: 3;
  background: rgba(6,10,14,.72); padding: 3px 8px; border-radius: 7px;
  font-size: 11px; color: var(--dim);
}
.tile .frozenveil {
  position: absolute; inset: 0; z-index: 2; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 6px;
  background: rgba(10,4,4,.55); color: var(--bad); font-weight: 700; letter-spacing: .5px;
}
.tile.frozen .frozenveil { display: flex; }

/* ---- control bar ---- */
.controls {
  flex: 0 0 auto; display: flex; align-items: stretch; gap: 12px;
  padding: 12px 16px; background: var(--panel); border-top: 1px solid var(--line);
}
.controls .btn {
  flex: 1; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 20px; font-weight: 800; letter-spacing: .4px; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 0; transition: transform .05s ease, filter .1s ease;
}
.controls .btn .k {
  font-size: 12px; font-weight: 700; opacity: .8;
  border: 1px solid rgba(255,255,255,.5); border-radius: 6px; padding: 1px 7px;
}
.controls .btn:active { transform: translateY(1px); }
.btn.success { background: linear-gradient(180deg, var(--success2), var(--success)); }
.btn.fail    { background: linear-gradient(180deg, var(--fail2), var(--fail)); }
.btn.uncert  { flex: 0 0 200px; background: var(--panel2); color: var(--dim); border: 1px solid var(--line); font-size: 15px; }
.controls .btn:disabled { filter: grayscale(.8) brightness(.5); cursor: not-allowed; }

.disabled-note {
  flex: 0 0 auto; align-self: center; color: var(--bad); font-weight: 700;
  font-size: 13px; padding-left: 4px; min-width: 210px;
}
.disabled-note.hidden { display: none; }

/* ---- toast ---- */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px);
  background: var(--panel2); border: 1px solid var(--line); color: var(--fg);
  padding: 12px 20px; border-radius: 12px; font-size: 15px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 50; box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.success { border-color: var(--success2); }
#toast.fail    { border-color: var(--fail2); }
#toast.uncert  { border-color: var(--warn); }
#toast.err     { border-color: var(--bad); color: var(--bad); }

.hintbar {
  flex: 0 0 auto; padding: 6px 16px; background: var(--bg); color: var(--dim);
  font-size: 12px; border-top: 1px solid var(--line); text-align: center;
}
.hintbar b { color: var(--fg); font-weight: 600; }