@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #070708;
  --panel: #0d0d0f;
  --panel-2: #131316;
  --line: #29292e;
  --line-soft: #1c1c20;
  --text: #f1f1ed;
  --muted: #8b8b92;
  --accent: #d8ff42;
  --accent-dim: rgba(216,255,66,.12);
  --red: #ff5d5d;
  --blue: #60a5fa;
  --amber: #ffbf47;
  --green: #69dc9e;
  --radius: 18px;
  --mono: 'DM Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: var(--sans); overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .025; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0,1fr); }
.sidebar { height: 100vh; position: sticky; top: 0; padding: 26px 18px 18px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #09090a; }
.brand { border: 0; background: none; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; padding: 0 8px 27px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent); color: #080809; font-weight: 900; letter-spacing: -2px; clip-path: polygon(0 0,100% 0,88% 100%,0 88%); }
.brand strong { display: block; font-size: 13px; letter-spacing: .07em; }
.brand small { display: block; color: var(--muted); font: 10px var(--mono); margin-top: 4px; letter-spacing: .1em; }
.main-nav { display: grid; gap: 5px; }
.nav-item { border: 0; background: transparent; color: #a3a3a9; border-radius: 10px; padding: 13px 12px; text-align: left; cursor: pointer; display: grid; grid-template-columns: 30px 1fr; font-size: 13px; transition: .2s ease; }
.nav-item span { font: 10px var(--mono); color: #55555d; padding-top: 2px; }
.nav-item:hover { background: #121214; color: white; }
.nav-item.active { color: #09090a; background: var(--accent); font-weight: 700; }
.nav-item.active span { color: #454d1c; }
.sidebar-foot { margin-top: auto; display: grid; gap: 8px; }
.system-status { border: 1px solid var(--line); padding: 12px; border-radius: 10px; display: grid; grid-template-columns: 12px 1fr auto; align-items: center; font: 9px var(--mono); color: var(--muted); }
.system-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.system-status b { color: var(--green); font-weight: 400; }
.main { min-width: 0; padding: 0 38px 60px; }
.topbar { height: 122px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 8px; font: 10px var(--mono); color: var(--accent); letter-spacing: .14em; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(25px,3vw,38px); letter-spacing: -.045em; }
h2 { font-size: 27px; letter-spacing: -.035em; }
h3 { font-size: 15px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.clock { font: 11px var(--mono); color: var(--muted); margin-right: 8px; }
.primary,.ghost,.icon-button { border-radius: 9px; cursor: pointer; transition: .18s ease; }
.primary { border: 1px solid var(--accent); color: #09090a; background: var(--accent); padding: 11px 16px; font-weight: 800; font-size: 12px; }
.primary:hover { background: #e6ff7c; transform: translateY(-1px); box-shadow: 0 8px 25px rgba(216,255,66,.12); }
.ghost { border: 1px solid var(--line); background: #111114; padding: 10px 14px; font-size: 11px; }
.ghost:hover { border-color: #55555d; background: #17171a; }
.ghost.full { width: 100%; text-align: center; }
.icon-button { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--line); background: #111114; }
.view { padding-top: 27px; animation: enter .32s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 28px; }
.metric { min-height: 130px; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: linear-gradient(145deg,#111114,#0b0b0d); position: relative; overflow: hidden; }
.metric::after { content:""; position:absolute; width:70px; height:70px; right:-20px; top:-20px; background:var(--accent-dim); border-radius:50%; filter:blur(14px); }
.metric span { font: 9px var(--mono); color: var(--muted); letter-spacing: .09em; }
.metric strong { display:block; font-size: 38px; letter-spacing: -.06em; margin-top: 18px; }
.metric small { color: var(--muted); font-size: 10px; }
.content-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.75fr); gap: 16px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(14,14,16,.88); overflow: hidden; }
.panel-head { min-height: 61px; padding: 16px 18px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-head h3 { margin:0; }
.panel-head small { font: 9px var(--mono); color:var(--muted); }
.panel-body { padding: 18px; }
.debate-list { display: grid; }
.debate-row { display:grid; grid-template-columns: 70px minmax(0,1fr) 115px 44px; gap:14px; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line-soft); cursor:pointer; transition:.2s; }
.debate-row:last-child { border-bottom:0; }
.debate-row:hover { background:#141417; }
.debate-id { font: 9px var(--mono); color:var(--muted); }
.debate-row h3 { margin:0 0 5px; }
.debate-row p { margin:0; color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--line); border-radius:999px; font:9px var(--mono); color:var(--muted); width:max-content; }
.badge.live { color:var(--accent); border-color:rgba(216,255,66,.3); background:var(--accent-dim); }
.badge.draft { color:var(--amber); }
.badge.done { color:var(--green); }
.arrow { color:var(--muted); }
.activity { display:grid; gap:0; }
.activity-item { display:grid; grid-template-columns:9px 1fr; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.activity-item:last-child { border:0; }
.activity-item i { width:7px; height:7px; margin-top:5px; background:var(--accent); border-radius:50%; }
.activity-item p { font-size:11px; margin-bottom:4px; line-height:1.45; }
.activity-item time { font:9px var(--mono); color:var(--muted); }
.empty { min-height:300px; display:grid; place-items:center; text-align:center; color:var(--muted); padding:30px; }
.empty b { color:var(--text); display:block; margin-bottom:8px; }
.toolbar { display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.toolbar .search { flex:1; }
.search, input, textarea, select { width:100%; color:var(--text); border:1px solid var(--line); background:#101012; border-radius:9px; padding:11px 12px; outline:none; }
input:focus,textarea:focus,select:focus { border-color:#6c7d2a; box-shadow:0 0 0 3px rgba(216,255,66,.06); }
textarea { resize:vertical; line-height:1.5; }
label { display:grid; gap:7px; font-size:11px; color:#b5b5ba; }
label small { color:var(--muted); }
.file-label input { display:none; }
.hidden { display:none !important; }
.control-header { border:1px solid var(--line); border-radius:var(--radius); padding:23px; margin-bottom:16px; background:linear-gradient(110deg,#131316,#0b0b0d); }
.control-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:15px; }
.control-header h2 { max-width:900px; margin-bottom:12px; }
.phase-track { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-top:20px; }
.phase { height:5px; background:#242429; border-radius:9px; position:relative; }
.phase.done,.phase.current { background:var(--accent); }
.phase.current::after { content:""; position:absolute; inset:-4px; border:1px solid rgba(216,255,66,.35); border-radius:8px; }
.arena-grid { display:grid; grid-template-columns:minmax(210px,.6fr) minmax(0,1.5fr) minmax(210px,.6fr); gap:14px; }
.fighter { border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:#0f0f11; }
.fighter.a { --fighter: var(--red); }
.fighter.b { --fighter: var(--blue); }
.fighter-label { font:9px var(--mono); color:var(--fighter); }
.avatar { width:56px; height:56px; margin:20px 0 14px; border:1px solid var(--fighter); display:grid; place-items:center; font-size:19px; font-weight:800; transform:rotate(-4deg); background:color-mix(in srgb,var(--fighter) 10%,transparent); }
.fighter h3 { font-size:20px; margin-bottom:4px; }
.fighter .model { color:var(--muted); font:9px var(--mono); }
.fighter .position { color:#b6b6bc; font-size:11px; line-height:1.55; margin-top:18px; }
.resource { margin-top:22px; }
.resource-head { display:flex; justify-content:space-between; font:9px var(--mono); color:var(--muted); margin-bottom:7px; }
.resource-bar { height:4px; background:#252529; border-radius:6px; overflow:hidden; }
.resource-bar i { display:block; height:100%; background:var(--fighter); }
.transcript { border:1px solid var(--line); border-radius:var(--radius); background:#0c0c0e; min-height:430px; overflow:hidden; }
.transcript-feed { max-height:490px; overflow:auto; padding:8px 18px; }
.transcript-item { padding:16px 0; border-bottom:1px solid var(--line-soft); }
.transcript-item:last-child { border:0; }
.transcript-meta { display:flex; justify-content:space-between; gap:10px; font:9px var(--mono); color:var(--muted); margin-bottom:8px; }
.transcript-meta b { color:var(--accent); font-weight:400; }
.transcript-item p { font-size:12px; line-height:1.65; margin:0; }
.arena-actions { display:flex; justify-content:center; gap:8px; padding:14px; border-top:1px solid var(--line); }
.ledger-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.claim-card { border:1px solid var(--line); background:#0e0e10; border-radius:14px; padding:16px; position:relative; }
.claim-card::before { content:""; position:absolute; top:0; left:18px; width:45px; height:2px; background:var(--status,var(--muted)); }
.claim-top { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }
.claim-id { font:9px var(--mono); color:var(--muted); }
.claim-type { font:9px var(--mono); color:var(--accent); }
.claim-card p { font-size:12px; line-height:1.55; min-height:55px; }
.claim-foot { display:flex; gap:7px; flex-wrap:wrap; }
.status { font:8px var(--mono); border:1px solid var(--line); border-radius:999px; padding:5px 7px; }
.status.supported { color:var(--green); }.status.challenged { color:var(--amber); }.status.refuted { color:var(--red); }.status.active { color:var(--blue); }
.source-list { display:grid; gap:10px; }
.source-card { border:1px solid var(--line); border-radius:13px; padding:15px; display:grid; grid-template-columns:50px 1fr auto; gap:12px; align-items:start; }
.source-score { width:45px; height:45px; display:grid; place-items:center; background:var(--accent-dim); color:var(--accent); font:12px var(--mono); border-radius:9px; }
.source-card h3 { margin:2px 0 5px; }
.source-card p { font-size:10px; color:var(--muted); margin:0; }
.audit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:16px; }
.score-card { padding:16px; border:1px solid var(--line); border-radius:13px; background:#0e0e10; }
.score-card span { font:9px var(--mono); color:var(--muted); }
.score-line { display:grid; grid-template-columns:1fr 35px; gap:10px; align-items:center; margin-top:12px; }
.score-line i { height:4px; display:block; background:linear-gradient(90deg,var(--accent) var(--score),#252529 var(--score)); }
.score-line b { font:12px var(--mono); text-align:right; }
.finding { border-left:2px solid var(--accent); padding:13px 15px; background:#111114; margin-bottom:9px; }
.finding p { margin:0; font-size:12px; line-height:1.5; }
.modal { width:min(880px,calc(100vw - 30px)); color:var(--text); background:#0c0c0e; border:1px solid #38383e; border-radius:20px; padding:0; box-shadow:0 30px 100px #000; }
.modal.compact { width:min(670px,calc(100vw - 30px)); }
.modal::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(8px); }
.modal form { padding:23px; }
.modal-head { display:flex; justify-content:space-between; align-items:start; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:18px; }
.modal-head h2 { margin:0; }
.stepper { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:22px; }
.stepper span { padding:9px; border-bottom:2px solid var(--line); font:9px var(--mono); color:var(--muted); }
.stepper span.active { color:var(--accent); border-color:var(--accent); }
.form-step { display:none; gap:14px; }
.form-step.active { display:grid; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.form-grid.three { grid-template-columns:repeat(3,1fr); }
.duel-form { display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; gap:14px; }
fieldset { border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:12px; }
legend { padding:0 7px; font:9px var(--mono); color:var(--accent); }
.versus { font:800 18px var(--sans); color:var(--muted); text-align:center; }
.check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.check-grid label { display:flex; align-items:center; gap:9px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.check-grid input { width:auto; accent-color:var(--accent); }
.modal-actions { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:9px; border-top:1px solid var(--line); padding-top:18px; margin-top:22px; }
.modal-actions span { font:9px var(--mono); color:var(--muted); }
.toast { position:fixed; right:24px; bottom:24px; padding:12px 16px; background:var(--accent); color:#080809; font-size:11px; font-weight:700; border-radius:9px; transform:translateY(90px); opacity:0; transition:.25s; z-index:100; }
.toast.show { transform:none; opacity:1; }
.modal-static { padding:23px; }
.glossary-list { display:grid; gap:9px; max-height:62vh; overflow:auto; }
.glossary-item { border:1px solid var(--line); border-radius:12px; padding:13px; }
.glossary-item b { display:block; color:var(--accent); font:10px var(--mono); margin-bottom:6px; }
.glossary-item p { margin:0; color:#b6b6bc; font-size:11px; line-height:1.5; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.setting-card { border:1px solid var(--line); border-radius:var(--radius); background:#0e0e10; padding:18px; display:grid; gap:13px; }
.setting-card h3 { margin:0; }
.connection { display:flex; align-items:center; gap:9px; font:10px var(--mono); color:var(--muted); }
.connection i { width:8px;height:8px;border-radius:50%;background:var(--red); }
.connection.ok i { background:var(--green);box-shadow:0 0 10px var(--green); }
.auto-strip { display:flex; align-items:center; gap:8px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; margin-bottom:14px; background:#0e0e10; }
.auto-strip .auto-state { margin-right:auto; font:10px var(--mono); color:var(--muted); }
.auto-strip .auto-state.running { color:var(--accent); }
.spinner { width:12px;height:12px;border:2px solid #333;border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:none; }
.spinner.show { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }
.proctor-note { margin:8px 0 0; border-left:2px solid var(--amber); padding:8px 10px; color:#aaaab0; font-size:10px; background:rgba(255,191,71,.05); }
.architect-box { border:1px solid rgba(216,255,66,.28); border-radius:14px; padding:16px; background:linear-gradient(135deg,rgba(216,255,66,.08),rgba(216,255,66,.015)); display:grid; gap:13px; }
.architect-box h3 { margin:0 0 5px; }
.architect-box p:not(.eyebrow) { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.architect-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.architect-actions span { font:9px var(--mono); color:var(--muted); }
.architect-actions span.working { color:var(--accent); }
.login-modal { width:min(460px,calc(100vw - 30px)); }
.login-modal::backdrop { background:radial-gradient(circle at 50% 30%,rgba(216,255,66,.08),rgba(0,0,0,.94));backdrop-filter:blur(14px); }
.login-modal form { padding:30px;display:grid;gap:18px; }
.login-brand { display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-bottom:18px; }
.login-brand h2 { margin:0; }.login-copy { color:var(--muted);font-size:12px;line-height:1.55;margin:0; }
.login-error { min-height:16px;margin:0;color:var(--red);font-size:11px; }.primary.full { width:100%; }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .arena-grid { grid-template-columns:1fr 1fr; }
  .transcript { grid-column:1/-1; grid-row:2; }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { height:auto; position:relative; padding:14px; border-right:0; border-bottom:1px solid var(--line); }
  .brand { padding-bottom:14px; }
  .main-nav { grid-template-columns:repeat(7,1fr); overflow:auto; }
  .nav-item { display:block; text-align:center; padding:10px 4px; font-size:9px; }
  .nav-item span { display:none; }
  .sidebar-foot { display:none; }
  .main { padding:0 15px 40px; }
  .topbar { height:105px; }
  .clock,.icon-button { display:none; }
  .primary { padding:10px; }
  .content-grid,.ledger-grid,.audit-grid { grid-template-columns:1fr; }
  .arena-grid { grid-template-columns:1fr; }
  .transcript { grid-column:auto; grid-row:auto; }
  .debate-row { grid-template-columns:55px 1fr 25px; }.debate-row .badge { display:none; }
  .form-grid,.form-grid.three,.check-grid { grid-template-columns:1fr; }
  .settings-grid { grid-template-columns:1fr; }
  .duel-form { grid-template-columns:1fr; }.versus { padding:4px; }
}