:root {
  --bg:#f6f7f9; --card:#fff; --ink:#1c2330; --muted:#6b7280; --line:#e5e7eb;
  --accent:#2563eb; --add:#e6ffed; --addln:#22863a; --del:#ffeef0; --delln:#b31d28;
  --ctx:#fff; --banner:#fef3c7; --err:#b91c1c; --ok:#15803d;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); }
h1 { font-size:1.5rem; margin:0 0 .3em; }
h2 { font-size:1.15rem; margin:1em 0 .4em; }
.muted { color:var(--muted); }
.small { font-size:.85rem; }
.err { color:var(--err); font-weight:600; }
.ok { color:var(--ok); }
button { font:inherit; padding:.55em 1.1em; border:1px solid var(--accent); background:var(--accent);
  color:#fff; border-radius:6px; cursor:pointer; }
button.secondary { background:#fff; color:var(--accent); }
button:disabled { opacity:.5; cursor:not-allowed; }
input, select, textarea { font:inherit; padding:.5em; border:1px solid var(--line); border-radius:6px; }
a { color:var(--accent); }

.card { max-width:560px; margin:8vh auto; background:var(--card); padding:2em; border-radius:12px;
  box-shadow:0 2px 16px rgba(0,0,0,.06); }
.center { text-align:center; }
.center form { display:flex; gap:.5em; justify-content:center; margin:1.2em 0; }
#code { text-transform:uppercase; letter-spacing:.08em; width:14em; text-align:center; }

.topbar { display:flex; justify-content:space-between; padding:.5em 1em; background:#fff;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.session-root { max-width:960px; margin:1.5em auto; padding:0 1em; }
.review-root { max-width:1180px; margin:0 auto; padding:0 1em; }
.panel, .card-block { background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:1.2em 1.4em; margin:1em 0; }

/* banner — the manipulation. Identical styling across variants. */
.banner { background:var(--banner); border:1px solid #f0d68a; border-radius:8px;
  padding:.6em 1em; font-weight:600; margin:.8em 0; }

/* review surface */
.review-head { display:flex; flex-wrap:wrap; gap:1em; align-items:baseline; justify-content:space-between; }
.timer { font-variant-numeric:tabular-nums; font-weight:700; }
.timer.warn { color:#b45309; }
.timer.stop { color:var(--del); }
.pr-title { font-size:1.2rem; font-weight:700; }
.filetree { font-size:.9rem; color:var(--muted); margin:.4em 0; }
.checks { display:flex; gap:.6em; font-size:.85rem; margin:.3em 0; }
.check.pass::before { content:"✔ "; color:var(--ok); }
.check.fail::before { content:"x "; color:var(--del); }

.diff-file { border:1px solid var(--line); border-radius:8px; margin:1em 0; overflow:hidden; }
.diff-file-head { background:#f3f4f6; padding:.4em .8em; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.85rem; display:flex; justify-content:space-between; }
.hunk-head { background:#f0f4ff; color:#3b5bdb; font-family:ui-monospace,monospace; font-size:.8rem;
  padding:.2em .8em; }
table.diff { width:100%; border-collapse:collapse; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px; }
table.diff td { padding:0 .5em; white-space:pre-wrap; word-break:break-word; vertical-align:top; }
td.ln { width:3em; text-align:right; color:#aeb4bf; user-select:none; background:#fafbfc; }
tr.add td.code { background:var(--add); } tr.add td.ln { background:#dcffe4; color:var(--addln); }
tr.del td.code { background:var(--del); } tr.del td.ln { background:#ffdce0; color:var(--delln); }
tr.ctx td.code { background:var(--ctx); }
td.gutter { width:1.5em; text-align:center; color:var(--muted); cursor:pointer; }
td.gutter:hover { color:var(--accent); }
tr.commented td.code { box-shadow: inset 3px 0 0 var(--accent); }

.inline-box { margin:.3em 0 .6em; padding:.6em; background:#f9fafb; border:1px dashed var(--line); border-radius:6px; }
.inline-box textarea { width:100%; min-height:3em; }
.flag-list { margin:.4em 0; }
.flag-item { font-size:.85rem; background:#fff7ed; border:1px solid #fed7aa; border-radius:6px;
  padding:.3em .6em; margin:.2em 0; display:flex; justify-content:space-between; }

.controls { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line);
  padding:1em; margin-top:1em; display:flex; flex-wrap:wrap; gap:1em; align-items:center; }
.decision label { margin-right:1em; }
.slider-wrap { display:flex; align-items:center; gap:.5em; }

.likert { display:grid; grid-template-columns:1fr repeat(7,2em); gap:.3em; align-items:center; margin:.3em 0; }
.likert .q { grid-column:1; }
.qitem { margin:.8em 0; }
textarea.long { width:100%; min-height:4em; }

.admin { max-width:1000px; margin:2em auto; padding:0 1em; }
.codes { background:#0b1020; color:#e7ecff; padding:1em; border-radius:8px; white-space:pre-wrap; font-size:.85rem; }
table#sessions { width:100%; border-collapse:collapse; margin-top:.6em; font-size:.9rem; }
table#sessions td, table#sessions th { border:1px solid var(--line); padding:.3em .5em; text-align:left; }
label { display:inline-block; margin:.3em .8em .3em 0; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:.2em 1em; font-size:.9rem; }

/* language toggle */
.langbar { position:fixed; top:.6em; right:.8em; display:flex; gap:.25em; z-index:20; }
.langbtn { padding:.25em .7em; font-size:.8rem; border:1px solid var(--line); background:#fff;
  color:var(--muted); border-radius:6px; }
.langbtn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.topbar .langbtn { padding:.15em .55em; }
.topbar .lang-inline { display:flex; gap:.25em; }