:root {
  --paper: #e7dcc4;
  --paper-2: #f3ead4;
  --ink: #1b2128;
  --muted: #4c5560;
  --rail: #2c353e;
  --panel: #10161d;
  --panel-2: #1a222b;
  --copper: #b35d22;
  --copper-soft: #d08a4a;
  --red: #c21f18;
  --amber: #c89610;
  --green: #246b3e;
  --line: rgba(28, 33, 40, 0.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(28,33,40,0.035) 46px 47px),
    var(--paper);
  font: 16px/1.45 "IBM Plex Sans", system-ui, sans-serif;
}
a { color: var(--copper); }
header.mast {
  background: var(--panel);
  color: #d8dee6;
  padding: 14px 18px 16px;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, #ff3b30 0 33%, #f5c518 33% 66%, #34c759 66%) 1;
}
.mast-top {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8b959f;
}
h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: 0.02em; text-transform: uppercase;
  margin: 8px 0 4px; color: #f4eee2;
}
.sub { margin: 0 0 12px; color: #b7c0c8; max-width: 46rem; }
.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 4px;
}
.sec { padding: 8px 6px 10px; background: #0c1116; min-height: 64px; }
.sec b { display: block; font-family: "Barlow Condensed", sans-serif; letter-spacing: 0.04em; color: #f0ebe0; }
.sec span { display: block; margin-top: 4px; font-family: "IBM Plex Mono", monospace; font-size: 10px; color: #8b959f; }
.sec.red { background: linear-gradient(180deg, rgba(194,31,24,0.35), #0c1116); }
.sec.amber { background: linear-gradient(180deg, rgba(200,150,16,0.28), #0c1116); }
.sec.green { background: linear-gradient(180deg, rgba(36,107,62,0.28), #0c1116); }
nav.tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px; background: var(--paper-2); border-bottom: 1px solid var(--line);
}
nav.tabs button {
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  border: 1px solid var(--rail); background: transparent; color: var(--ink);
  padding: 6px 10px; cursor: pointer;
}
nav.tabs button.on { background: var(--panel); color: var(--paper); }
main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 64px; }
h2 { font-family: "Barlow Condensed", sans-serif; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 10px; }
.card { background: var(--paper-2); border: 1px solid var(--line); padding: 14px; margin: 0 0 14px; }
label { display: block; font-size: 13px; margin: 10px 0 4px; color: var(--muted); }
input, select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--rail);
  background: #fffdf6; font: inherit;
}
textarea { min-height: 72px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
button.act {
  margin-top: 12px; background: var(--panel); color: var(--paper);
  border: 0; padding: 10px 14px; font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 16px; cursor: pointer;
}
button.act.sec { background: var(--copper); }
button.act.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rail); }
.flash { padding: 10px 12px; margin: 0 0 12px; border-left: 4px solid var(--copper); background: #f7efd8; }
.flash.bad { border-left-color: var(--red); background: #f6e4de; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { border: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
th { background: var(--panel); color: #e8e2d4; font-family: "Barlow Condensed", sans-serif; letter-spacing: 0.05em; }
.pill { display: inline-block; padding: 1px 6px; font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.pill.red { background: #f6e4de; }
.pill.green { background: #dceee3; }
.pill.amber { background: #f6edd0; }
canvas.sig { width: 100%; height: 120px; border: 1px dashed var(--rail); background: #fff; touch-action: none; }
.who { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.hidden { display: none !important; }
@media (max-width: 720px) {
  .row, .row3 { grid-template-columns: 1fr; }
}