:root {
  --bg: #eef0f2;
  --surface: #ffffff;
  --surface-2: #f6f7f8;
  --text: #1d2125;
  --muted: #5d6670;
  --border: #d3d8dd;
  --accent: #1b6033;
  --accent-text: #ffffff;
  --accent-soft: #dcefe2;
  --row-current: #fff3b0;
  --cell-current: #ffd84d;
  --check: #ffeb3b;
  --danger: #c62828;
  --danger-soft: #fde2e2;
  --ok: #2e7d32;
  --mem-cursor: #cfe3ff;
  --select: #e3e7eb;
  --info: #1565c0;
  --warn: #b26a00;
  --confirm: #f9a825;
  --confirm-text: #000000;
  --attempt-bg: #e8f1fb;
  --attempt-line: #b8d0ea;
  --finished-bg: #eaf6ec;
  --finished-line: #b5dcbc;
  --viewer-bg: #f3e8fb;
  --viewer-line: #d4b8ea;
  --log-change: #e65100;
  --log-auto: #ad1457;
  --toast-bg: #263238;
  --toast-text: #ffffff;
  --shadow: 0 6px 24px rgb(0 0 0 / 0.18);
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181b;
    --surface: #1e2226;
    --surface-2: #252a2f;
    --text: #e6e9ec;
    --muted: #9aa4ae;
    --border: #353c43;
    --accent: #3f9b5c;
    --accent-text: #ffffff;
    --accent-soft: #23402d;
    --row-current: #4a4318;
    --cell-current: #8a7514;
    --danger: #ef6b6b;
    --danger-soft: #4a2323;
    --ok: #66bb6a;
    --mem-cursor: #23395a;
    --select: #2d343a;
    --info: #64b5f6;
    --attempt-bg: #1b2a3a;
    --attempt-line: #2c4560;
    --finished-bg: #1c3324;
    --finished-line: #2e5238;
    --viewer-bg: #2e2140;
    --viewer-line: #4b3566;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 var(--sans);
  display: flex;
  flex-direction: column;
}

button { font: inherit; color: inherit; }

/* checkboxes drawn from the look's colours (themes.css sets --check-radius: 0 for the square looks) */
input[type="checkbox"] {
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
  background: var(--surface-2);
  border: 1.5px solid var(--muted);
  border-radius: var(--check-radius, 4px);
  cursor: pointer;
  transition: background-color 0.1s, border-color 0.1s;
}
input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--accent-text);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
  transition: transform 0.1s;
}
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--accent); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }
:root.fx-calm input[type="checkbox"], :root.fx-calm input[type="checkbox"]::before { transition: none; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 20;
  flex-wrap: wrap;
}
.brand { font-weight: 700; color: var(--accent); margin-right: 4px; }
.menus { display: flex; gap: 2px; flex-wrap: wrap; }
.title { font-size: 14px; font-weight: 500; color: var(--muted); margin: 0 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang { border: 1px solid var(--border); background: var(--surface-2); border-radius: 6px; padding: 3px 8px; cursor: pointer; }

.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  user-select: none;
  white-space: nowrap;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--select); }
.menu-list {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.menu-list button {
  text-align: left;
  border: 0;
  background: none;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.menu-list button:hover:not(:disabled) { background: var(--select); }
.menu-list button:disabled { color: var(--muted); opacity: 0.6; cursor: default; }
.menu-list hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }

/* ---------------------------------------------------------------- controlled attempt */
.attempt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 6px 12px;
  background: var(--attempt-bg);
  border-bottom: 1px solid var(--attempt-line);
  font-size: 13px;
}
.attempt-bar.finished { background: var(--finished-bg); border-bottom-color: var(--finished-line); }
.attempt-bar.free { background: var(--surface-2); border-bottom-color: var(--border); }
.attempt-bar.viewer { background: var(--viewer-bg); border-bottom-color: var(--viewer-line); }
.attempt-bar a { color: var(--accent); margin-left: 8px; }
.attempt-info { flex: 1 1 420px; min-width: 0; }
.attempt-student { margin-left: 12px; color: var(--muted); }
.attempt-note { display: block; color: var(--muted); font-size: 12px; }
.attempt-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attempt-others { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.conn { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.conn::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9e9e9e; flex: none; }
.conn.online::before { background: var(--ok); }
.conn.offline { color: var(--danger); font-weight: 600; }
.conn.offline::before { background: var(--danger); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.status.locked { color: var(--muted); font-size: 13px; }

.blocker {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 0.55);
  display: grid;
  place-items: center;
  padding: 16px;
}
.blocker-box {
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 20px;
  max-width: 520px;
}
.blocker-box h2 { margin: 0 0 8px; font-size: 18px; }
.blocker-box .btn { text-decoration: none; display: inline-block; }

/* ---------------------------------------------------------------- layout */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 8px;
  padding: 8px;
}
.left, .right { min-height: 0; display: flex; flex-direction: column; gap: 8px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.panel h2 { font-size: 13px; font-weight: 600; margin: 0 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.panel h3 { font-size: 12px; font-weight: 600; margin: 8px 0 4px; color: var(--muted); }

.pm-panel { flex: 1; }
.po-panel { flex: 1; }

.table-scroll { overflow: auto; flex: 1; min-height: 120px; border: 1px solid var(--border); border-radius: 4px; }

@media (max-width: 1000px) {
  html, body { height: auto; }
  .layout { display: flex; flex-direction: column; }
  .left, .right { display: contents; }
  .cpu-scroll { order: 1; }
  .control { order: 2; }
  .pm-panel { order: 3; }
  .po-panel { order: 4; }
  .layout .splitter { display: none; } /* stronger than the base .splitter rule further down */
  .table-scroll { max-height: 60vh; }
  .title { display: none; }
  .lang { margin-left: auto; }
  .menus { order: 3; width: 100%; }
}

/* ---------------------------------------------------------------- CPU diagram */
.cpu-scroll { overflow-x: auto; border-radius: 8px; flex: none; }

/* ---------------------------------------------------------------- resizable panels */
.splitter { flex: none; touch-action: none; display: flex; align-items: center; justify-content: center; }
.splitter.vertical { width: 8px; cursor: col-resize; }
.splitter.horizontal { height: 8px; cursor: row-resize; }
.splitter::after { content: ""; border-radius: 2px; background: var(--muted); opacity: 0.45; transition: opacity 0.1s; }
.splitter.vertical::after { width: 2px; height: 28px; }
.splitter.horizontal::after { width: 28px; height: 2px; }
.splitter:hover::after, .splitter:focus-visible::after { background: var(--accent); opacity: 1; }
.splitter:focus-visible { outline: 0; }
body.resizing-x, body.resizing-x * { cursor: col-resize !important; user-select: none; }
body.resizing-y, body.resizing-y * { cursor: row-resize !important; user-select: none; }

@media (min-width: 1001px) {
  .layout { grid-template-columns: minmax(0, 1fr) auto var(--right-w, 340px); gap: 0; }
  .left, .right { gap: 0; }
  /* by default the full diagram stays visible when the window is short */
  .cpu-scroll {
    flex-basis: var(--cpu-h, min(58vh, calc((100vw - var(--right-w, 340px) - 24px) * 0.56)));
    container-type: size;
    overflow: hidden;
  }
  .cpu { width: min(100cqw, calc(100cqh * 1000 / 560)); min-width: 0; max-height: none; }
  .right > .control { flex-basis: var(--control-h, auto); overflow: auto; }
  .control .minilog { flex: 1 0 7.6em; }
}

/* ---------------------------------------------------------------- tables */
.grid { border-collapse: collapse; width: 100%; font: 12px/1.3 var(--mono); }
.grid th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--muted);
  font: 600 12px var(--sans);
  padding: 4px 4px;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.grid td { padding: 2px 4px; border-bottom: 1px solid var(--surface-2); border-right: 1px solid var(--surface-2); white-space: nowrap; height: 21px; }
.grid td:first-child { color: var(--muted); text-align: right; background: var(--surface-2); }
.grid tbody tr:hover td { background: var(--select); }
.pm td:not(:first-child) { cursor: pointer; text-align: center; }
.pm td:not(:first-child):hover { outline: 1px solid var(--accent); outline-offset: -1px; }
.pm.locked td:not(:first-child) { cursor: default; }
.pm tr.current td { background: var(--row-current); }
.pm td.current { background: var(--cell-current) !important; color: var(--cell-current-text, inherit); font-weight: 700; }
.pm td.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.po td { cursor: pointer; }
.po td.hexcol { color: var(--muted); }
.po tr.selected td { background: var(--accent-soft); }
.po tr.cursor td { background: var(--mem-cursor); }

.cell-desc {
  margin: 6px 0 0;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: 4px;
  font: 12px/1.4 var(--mono);
  min-height: 7.5em;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------- controls */
.control { flex: none; }
.status-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.status { font-weight: 700; font-size: 16px; color: var(--ok); }
.status.running { color: var(--danger); }
.status.edit { color: var(--warn); }
.clock { font: 12px var(--mono); color: var(--muted); }
.info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0; }
.info div { background: var(--surface-2); border-radius: 6px; padding: 4px 6px; text-align: center; }
.info dt { font-size: 11px; color: var(--muted); }
.info dd { margin: 0; font: 700 18px var(--mono); color: var(--info); }
.info dd.mark { color: var(--ok); }
.info dd.mark.bad { color: var(--danger); }

.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.confirm { background: var(--confirm); color: var(--confirm-text); border-color: var(--confirm); grid-column: 1 / -1; }
.btn.link { background: none; border: 0; color: var(--accent); padding: 4px 0; text-align: left; font-weight: 500; }
#btnNext, #btnEndEdit { grid-column: 1 / -1; }
.auto { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; }
.auto input { width: 70px; }

.minilog {
  list-style: none;
  margin: 0;
  padding: 4px 6px;
  font: 12px/1.45 var(--mono);
  background: var(--surface-2);
  border-radius: 4px;
  height: 7.6em;
  overflow-y: auto;
}
.minilog .tact { color: var(--danger); display: inline-block; width: 4.5ch; }
.minilog .mnemo { font-weight: 700; display: inline-block; width: 5.5ch; }

/* ---------------------------------------------------------------- dialogs */
dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  max-width: min(92vw, 760px);
}
dialog::backdrop { background: rgb(0 0 0 / 0.35); }
.dlg { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 86vh; }
.dlg h2 { margin: 0; font-size: 16px; }
#dlgBody { overflow: auto; min-height: 0; }
.dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.dlg-buttons .btn { min-width: 90px; }
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 10px; }
.options label { display: flex; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 5px; cursor: pointer; }
.options label:hover { background: var(--select); }
.options .m { font: 700 13px var(--mono); min-width: 5ch; }
.options .d { color: var(--muted); font-size: 12px; }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.form-row input[type="text"], .form-row input[type="number"], .form-row select { font: 14px var(--mono); padding: 4px 6px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 8px; flex-wrap: wrap; }
.tabs button { border: 0; background: none; padding: 6px 10px; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button.active { border-bottom-color: var(--accent); font-weight: 600; }
.preview { font: 13px var(--mono); background: var(--surface-2); padding: 6px 8px; border-radius: 4px; }
.error { color: var(--danger); min-height: 1.2em; font-size: 12px; }
.log-view { font: 12px/1.45 var(--mono); white-space: pre; background: var(--surface-2); padding: 8px; border-radius: 4px; margin: 0; min-width: min(70vw, 680px); max-height: 65vh; overflow: auto; }
.log-view .l-err { color: var(--danger); }
.log-view .l-blue { color: var(--info); }
.log-view .l-green { color: var(--ok); }
.log-view .l-change { color: var(--log-change); }
.log-view .l-auto { color: var(--log-auto); }
.settings fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 0 0 8px; }
.settings input[type="number"] { width: 70px; }
.about p { margin: 4px 0; max-width: 60ch; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(30px);
  background: var(--toast-bg);
  color: var(--toast-text);
  padding: 8px 14px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 50;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--danger); }

@media print {
  .topbar, .right, .cpu-scroll, .splitter { display: none; }
}