:root{
  --bg:#0b0f14;
  --panel:#0f141b;
  --card:#121924;
  --text:#e6eef7;
  --muted:#a6b1bd;
  --border:#1f2a37;
  --accent:#3b82f6; /* blue */
  --accent-2:#60a5fa;
  --ok:#10b981; /* green */
  --warn:#f59e0b; /* amber */
  --err:#ef4444; /* red */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color:var(--text); background:linear-gradient(180deg,#0b0f14 0%, #0a1018 60%, #0e141d 100%);
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.app-header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); background:#0b1016; position:sticky; top:0; z-index:10}
.brand{display:flex; align-items:center; gap:10px}
.logo{filter:drop-shadow(0 2px 6px rgba(59,130,246,.3))}
.brand-text{display:flex; flex-direction:column}
.brand-text strong{font-weight:700}
.brand-text .slug{color:var(--muted); font-size:12px}
.nav .link{margin-left:16px}

.layout{display:grid; grid-template-columns: 380px minmax(0,1fr); gap:16px; padding:16px; max-width:1400px; margin:0 auto}
.panel.left{min-width:0}
.panel.right{min-width:0}

.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px}
.alert{border-radius:10px; padding:10px 12px; margin-bottom:10px}
.alert.ok{background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.35)}
.alert.warn{background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35)}
.alert.err{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35)}
.muted{color:var(--muted)}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field.grid{display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:end}
label{font-weight:600}
input[type=text],input[type=number],select,textarea{
  background:#0d131c; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px; outline:none;
}
input[type=file]{color:var(--muted)}
textarea{resize:vertical}
.checkbox{display:flex; align-items:center; gap:8px; font-weight:600}

.actions{display:flex; gap:8px; justify-content:flex-end}
.btn{appearance:none; border:none; border-radius:10px; padding:8px 12px; background:#131c29; color:var(--text); border:1px solid var(--border); cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); border:0; color:#fff}
.btn.ghost{background:transparent}
.btn.save{background:linear-gradient(180deg,#0ea5e9,#0284c7); border:0; color:#fff}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:#0d1420; color:#d5e0ea}
.badge.draft{color:#cbd5e1}
.badge.review{color:#fbbf24}
.badge.approved{color:#10b981}

.history .list{list-style:none; padding:0; margin:0}
.history .row{display:flex; justify-content:space-between; align-items:center; padding:8px 6px; border-radius:8px}
.history .row:hover{background:#0f1724}
.history .meta{color:var(--muted); font-size:12px}

.run-meta .row.space{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px}
.export .btn{margin-left:8px}

.questions{display:flex; flex-direction:column; gap:12px}
.q .qhead{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.q .qid{color:var(--muted)}
.q .qtext{font-weight:600; margin-bottom:8px}
.q .ans{display:flex; flex-direction:column; gap:8px}
.ans .ans-actions{display:flex; justify-content:space-between; align-items:center}
.ans .sel-status{background:#0d131c; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:6px 8px}
.ans .sources{color:var(--muted); font-size:12px}
.q.saving{outline:2px dashed var(--accent)}

.app-footer{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-top:1px solid var(--border); color:var(--muted)}

.empty{color:var(--muted)}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

@media (max-width: 1060px){
  .layout{grid-template-columns: 1fr;}
  .run-meta .row.space{grid-template-columns: repeat(2, minmax(0,1fr));}
}