:root {
  --bg: #0b0f14;
  --panel: #121821;
  --panel-strong: #18212c;
  --line: #2a3543;
  --cyan: #9ccfd8;
  /* Alias of --cyan, kept because ~40 rules reference it by this name. Any
     "cyan means focus only" rule collapses while two names exist, so treat
     this as the interaction colour and --cyan as the palette entry. */
  --line-hot: var(--cyan);
  --text: #e6edf1;
  --muted: #a4b4c2;
  --green: #a7d9a6;
  --amber: #e4c78f;
  /* Darkened from #e5a0ac. Five status colours sat on one luminance plateau —
     green against red was 1.32:1, separable by hue alone. This lands at 2.06:1
     against green while still clearing 4.5:1 as button text on a panel; going
     to #c46a7c separated better but dropped danger buttons to 4.41:1. */
  --red: #cc7385;
  --violet: #c9b9ef;
  /* Three tints replace 27 hand-picked alpha values of the same cyan. */
  --cyan-faint: rgba(156, 207, 216, 0.08);
  --cyan-soft: rgba(156, 207, 216, 0.18);
  --cyan-edge: rgba(156, 207, 216, 0.34);
  --shadow: rgba(156, 207, 216, 0.14);
  /* RGB channels for the recurring surface shades, so every translucent panel,
     inset and overlay flips with the theme from one place. Values match the hex
     tokens above; --abyss/--void are the deeper insets that have no hex token. */
  --bg-rgb: 11 15 20;
  --panel-rgb: 18 24 33;
  --panel-strong-rgb: 24 33 44;
  --line-rgb: 42 53 67;
  --abyss-rgb: 9 13 18;
  --void-rgb: 4 7 10;
  /* Background decor (grid, drifting matrix text, signal sweep). These read on a
     dark ground; the light theme overrides them so the same animations stay
     visible there. --decor-blend is `screen` (lightens) on dark, `multiply`
     (darkens) on light. */
  --grid-line: rgba(255, 255, 255, 0.018);
  --matrix-ink: rgba(167, 217, 166, 0.12);
  --matrix-glow: rgba(167, 217, 166, 0.22);
  --scanline-ink: var(--cyan-faint);
  --decor-blend: screen;
  /* Radius decreases with nesting depth. Previously panels and the rows
     inside them shared 16px, which reads as a blurred double corner rather
     than as containment. Sharper corners also sit closer to the terminal
     look, not further from it. */
  --radius: 12px;
  --radius-sm: 7px;

  /* Spacing scale. Added because padding had grown to 33 distinct values for
     66 uses — every second gap was bespoke. New work should pick from here. */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;

  /* Type scale. The old file clustered at 11-12px and then jumped straight to
     23px, leaving no mid-range for hierarchy. --text-xs is 12px, not 11px:
     font-smoothing is disabled for the terminal look, which makes 11px
     monospace genuinely hard to read at the sizes it was used for. */
  --text-xs: 12px;
  --text-base: 15px;
  --text-lg: 18px;
  color: var(--text);
  background: var(--bg);
  font-family: "Courier New", "Lucida Console", monospace;
  font-synthesis: none;
  /* Was `none`, which disabled antialiasing entirely. On a dark ground the
     thin strokes of non-bold monospace turned spidery and hard to read, while
     bold survived — exactly the reported problem. Antialiased keeps the
     monospace terminal font; the aesthetic lives in the font, the scanlines
     and the palette, not in jagged edges. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  isolation: isolate;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(circle at 30% 0%, var(--cyan-soft), transparent 36rem),
    radial-gradient(circle at 78% 8%, rgba(201, 185, 239, 0.08), transparent 30rem),
    var(--bg);
  background-size: 22px 22px, 22px 22px, auto, auto, auto;
  animation: gridDrift 42s linear infinite;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  content: "01001000 01000001 01010000 01010000 01011001 00111111  root@baza  ./sync --live  0x41F9  10110100  TRACE  ACCESS  SIGNAL  CORP  HIT  01001000 01000001 01010000 01010000 01011001 00111111  root@baza  ./sync --live  0x41F9  10110100  TRACE  ACCESS  SIGNAL  CORP  HIT  01001000 01000001 01010000 01010000 01011001 00111111";
  inset: -18vh -10vw;
  color: var(--matrix-ink);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.18em;
  word-break: break-all;
  opacity: 0.52;
  transform: rotate(-6deg);
  text-shadow: 0 0 18px var(--matrix-glow);
  animation: matrixDrift 30s linear infinite;
}

body::after {
  background:
    linear-gradient(115deg, transparent 0%, transparent 42%, var(--scanline-ink) 48%, transparent 56%, transparent 100%),
    repeating-linear-gradient(180deg, transparent 0 8px, var(--scanline-ink) 9px, transparent 10px);
  opacity: 0.58;
  mix-blend-mode: var(--decor-blend);
  animation: signalSweep 12s ease-in-out infinite;
}

#app {
  position: relative;
  z-index: 1;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button,
a,
input,
textarea,
select {
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

button,
a.icon-button {
  cursor: pointer;
}

button:not(:disabled):active,
a.icon-button:active,
.archive-download:active {
  transform: translateY(1px);
}

select:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  min-height: 16px;
  flex: 0 0 auto;
  border: 1px solid rgba(156, 207, 216, 0.46);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--cyan-soft), transparent 62%),
    rgb(var(--abyss-rgb) / 0.82);
  box-shadow:
    0 0 0 2px var(--cyan-faint),
    inset 0 0 8px var(--cyan-faint);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

input[type="checkbox"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(167, 217, 166, 0.72);
  transform: scale(0);
  transition: transform 160ms ease;
}

input[type="checkbox"]:checked {
  border-color: rgba(167, 217, 166, 0.76);
  background:
    radial-gradient(circle, rgba(167, 217, 166, 0.16), transparent 68%),
    rgb(var(--abyss-rgb) / 0.92);
  box-shadow:
    0 0 0 3px rgba(167, 217, 166, 0.07),
    0 0 16px rgba(167, 217, 166, 0.18),
    inset 0 0 10px rgba(167, 217, 166, 0.1);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(156, 207, 216, 0.55);
  outline-offset: 3px;
}

.app-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.material-detail-shell {
  width: min(100%, 100vw);
  padding: 14px;
}

.app-header,
.dashboard-grid,
.board-head,
.panel-head,
.stats-strip,
.filter-bar,
.tab-bar,
.ops-cell,
.user-chip,
.create-user-form,
.profile-row,
.leaderboard-row,
.rank-cell,
.alive-control {
  display: flex;
  align-items: center;
}

.app-header {
  justify-content: space-between;
  gap: var(--space-4);
  /* Was 16px 0 24px around a 54px brand word — roughly 134px of chrome above
     the work surface, carrying no data. */
  padding: var(--space-2) 0 var(--space-3);
}

h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 54px);
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 0 24px var(--shadow);
}

.app-header h1 {
  /* The login screen keeps the full 54px; inside the app the wordmark is
     chrome and gives its vertical space back to the board. The glow stays,
     so the terminal character is unchanged. */
  font-size: var(--text-lg);
  letter-spacing: 0.08em;
  color: #f7fbff;
  text-shadow:
    0 0 2px rgba(247, 251, 255, 0.95),
    0 0 18px rgba(156, 207, 216, 0.46),
    0 0 42px rgba(167, 217, 166, 0.22);
}

.app-header .kicker {
  color: var(--cyan);
  text-shadow:
    0 0 8px rgba(156, 207, 216, 0.58),
    0 0 22px var(--cyan-soft);
}

.kicker,
.panel-head span,
.board-head span,
label span,
.muted-block span,
.stat span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.user-chip,
.command-panel,
.upload-panel,
.material-board,
.creator-panel,
.leaderboard-panel,
.terminal-card,
.auth-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(var(--panel-strong-rgb) / 0.96), rgb(var(--panel-rgb) / 0.96));
  box-shadow: 0 14px 46px rgba(0, 0, 0, 0.28);
}

.user-chip {
  flex-wrap: wrap;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.user-chip strong {
  color: var(--green);
  text-transform: uppercase;
}

.live-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 12px;
  text-transform: uppercase;
}

.live-live {
  color: var(--green);
  border-color: rgba(167, 217, 166, 0.6);
}

.live-reconnect {
  color: var(--amber);
  border-color: rgba(255, 200, 87, 0.6);
}

.live-poll {
  color: var(--cyan);
  border-color: rgba(53, 215, 255, 0.55);
}

.dashboard-grid {
  position: relative;
  z-index: 12;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
}

.command-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 14px;
  overflow: visible;
  z-index: 2;
  border-color: var(--cyan-edge);
  box-shadow:
    0 14px 46px rgba(0, 0, 0, 0.28),
    0 0 0 1px var(--cyan-faint),
    0 0 24px var(--cyan-soft),
    0 0 46px rgba(167, 217, 166, 0.05);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.command-panel > * {
  position: relative;
  z-index: 2;
}

.panel-head,
.board-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-head strong,
.board-head strong {
  color: var(--cyan);
  font-size: 28px;
}

.accounts-head-actions,
.materials-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.accounts-head-actions .secondary-button,
.materials-head-actions .secondary-button {
  min-width: 170px;
}

.purge-words {
  display: flex;
  align-items: center;
  gap: 8px;
}

.purge-words-input {
  width: 190px;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.stat {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgb(var(--panel-rgb) / 0.78);
}

.stat strong {
  display: block;
  margin-top: 5px;
  font-size: 23px;
}

.stat-cyan strong {
  color: var(--cyan);
}

.stat-free strong {
  color: #c8fbff;
  text-shadow:
    0 0 8px rgba(156, 207, 216, 0.74),
    0 0 24px var(--cyan-edge),
    0 0 42px rgba(167, 217, 166, 0.16);
}

.stat-amber strong {
  color: var(--amber);
}

.stat-green strong {
  color: var(--green);
}

.stat-red strong {
  color: var(--red);
}

.stat-violet strong {
  color: var(--violet);
}

.filter-bar {
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tools {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(152px, max-content);
  gap: 12px;
  align-items: start;
  margin-top: 16px;
}

.global-search-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(110px, 0.26fr) minmax(110px, 0.26fr);
  gap: 8px;
  min-width: 0;
}

.filter-menu {
  position: relative;
  z-index: 80;
}

.filter-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 152px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgb(var(--panel-strong-rgb) / 0.82);
  padding: 0 12px;
  text-transform: uppercase;
}

.filter-menu-button span {
  color: var(--muted);
}

.filter-menu-button strong {
  color: var(--cyan);
  font-size: 13px;
}

.filter-menu-button.active,
.filter-menu.is-open .filter-menu-button {
  border-color: var(--line-hot);
  color: var(--green);
  background: var(--cyan-faint);
  box-shadow: 0 0 0 3px var(--cyan-faint);
}

.filter-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 6px;
  width: min(320px, calc(100vw - 42px));
  padding: 10px;
  border: 1px solid var(--cyan-edge);
  border-radius: var(--radius-sm);
  background: rgb(var(--abyss-rgb) / 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgb(var(--line-rgb) / 0.78);
  border-radius: var(--radius-sm);
  background: rgb(var(--panel-rgb) / 0.72);
  text-transform: uppercase;
}

.filter-option input {
  width: 15px;
  min-height: 15px;
  accent-color: var(--green);
}

.filter-option span {
  color: var(--text);
  font-size: 12px;
}

.my-corps-sort {
  margin: -4px 0 14px;
}

.my-corps-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 10px;
  align-items: center;
  margin: -4px 0 14px;
}

.my-corps-material-tools {
  grid-template-columns: minmax(152px, max-content) minmax(170px, max-content) minmax(220px, 1fr);
  align-items: start;
}

.my-corps-filter-menu .filter-menu-panel {
  left: 0;
  right: auto;
}

.my-accounts-filter-menu .filter-menu-panel {
  left: 0;
  right: auto;
  grid-template-columns: 1fr;
  width: min(240px, calc(100vw - 42px));
}

.my-corps-filter {
  min-width: 0;
}

.marked-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(167, 217, 166, 0.28);
  border-radius: var(--radius-sm);
  color: var(--green);
  background: rgb(var(--panel-strong-rgb) / 0.72);
  text-transform: uppercase;
  white-space: nowrap;
}

.marked-toggle input {
  width: 15px;
  min-height: 15px;
  accent-color: var(--green);
}

.marked-toggle span {
  color: var(--green);
  font-size: 12px;
}

.my-corps-search {
  width: 100%;
  min-height: 38px;
}

.tab-bar {
  position: relative;
  z-index: 3;
  /* Without wrapping, seven tabs measure 783px inside a 347px column on a
     phone and push the whole document to 798px wide. body has
     overflow-x: hidden but html does not, so the scroll escapes to the
     document and the page slides sideways. */
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Keyboard focus. The stylesheet previously defined focus styling only for
   inputs, textareas, selects and the checkbox — every button in the app (tabs,
   TAKE, DELETE, upload, CANCEL) rendered focus identically to rest, so tabbing
   through the interface was invisible. :focus-visible rather than :focus, so
   the ring appears for keyboard users without outlining every mouse click. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[data-view]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--line-hot);
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--line-hot);
  outline-offset: 1px;
}

/* Hover affordance. Only five hover rules existed for 111 interactive
   elements, so most controls gave no sign they were clickable. */
.filter-bar button:hover,
.tab-bar button:hover,
.mini-button:hover,
.icon-button:hover {
  border-color: var(--line-hot);
  background: var(--cyan-faint);
}

button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.filter-bar button,
.tab-bar button,
.upload-mode-tabs button,
.secondary-button,
.primary-button,
.icon-button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgb(var(--panel-strong-rgb) / 0.82);
}

.filter-bar button {
  padding: 0 12px;
  text-transform: uppercase;
}

.tab-bar button {
  padding: 0 14px;
  text-transform: uppercase;
}

.filter-bar button.active,
.tab-bar button.active,
.upload-mode-tabs button.active {
  border-color: var(--line-hot);
  color: var(--green);
  background: var(--cyan-faint);
  box-shadow: 0 0 0 3px var(--cyan-faint);
}

.tab-bar button strong {
  margin-left: 6px;
  color: var(--cyan);
}

.online-chip,
.sync-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--cyan-soft);
  border-radius: var(--radius-sm);
  color: var(--cyan);
  background: rgb(var(--panel-strong-rgb) / 0.72);
  text-transform: uppercase;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 112px;
  padding: 0 var(--space-3);
  text-transform: uppercase;
}

.primary-button {
  border-color: var(--line-hot);
  color: #10171f;
  background: var(--green);
}

.secondary-button {
  color: var(--cyan);
}

/* TAKE is the action this product exists for; it is pressed dozens of times an
   hour. Weight comes from fill and border, not from width — widening it pushed
   it onto its own line inside the 234px ops column and grew every row. */
[data-claim] {
  border-color: var(--cyan-edge);
  background: var(--cyan-faint);
  color: var(--cyan);
  font-weight: 700;
}

[data-claim]:hover:not(:disabled) {
  border-color: var(--line-hot);
  background: var(--cyan-soft);
}

.secondary-button.danger {
  border-color: rgba(229, 160, 172, 0.42);
  color: var(--red);
}

.icon-button {
  width: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.icon-button.danger {
  color: var(--red);
  border-color: rgba(229, 160, 172, 0.5);
}

.upload-panel {
  width: min(520px, 100%);
  padding: 16px;
}

.upload-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
}

input,
textarea,
select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgb(var(--abyss-rgb) / 0.92);
  outline: none;
  padding: 8px 10px;
}

textarea {
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--line-hot);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}

/* Only padding needs re-asserting: the generic input rule above sets
   8px 10px, while width/height/min-height/border-radius already come
   from the input[type="checkbox"] block near the top of the file,
   which outranks a bare `input` selector on specificity. */
input[type="checkbox"] {
  padding: 0;
}

.upload-panel .primary-button {
  /* Was full width (486px) — the widest control on the page for the rarest
     action, while TAKE, pressed dozens of times an hour, sat at 112px. */
  width: auto;
  min-width: 200px;
  margin-top: var(--space-3);
}

.upload-report {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--cyan-soft);
}

.upload-report > span,
.upload-report em {
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: normal;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.upload-report-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.upload-report-counts strong:first-child {
  color: var(--green);
}

.upload-report-counts strong:last-child {
  color: var(--amber);
}

.upload-report-error strong,
.upload-report-error em {
  color: var(--red);
}

.upload-progress-track {
  height: 6px;
  border: 1px solid var(--cyan-soft);
  background: rgba(8, 13, 18, 0.6);
  overflow: hidden;
}

.upload-progress-track i {
  display: block;
  height: 100%;
  /* Starts empty on purpose: renderUploadSlot sets the real width through the
     CSSOM, because the CSP forbids inline style attributes. */
  width: 0;
  background: var(--green);
  transition: width 120ms linear;
}

.upload-report-progress .upload-report-counts strong:last-child {
  color: var(--green);
}

.upload-report-progress .ghost-button {
  justify-self: start;
}

#accounts-upload-form {
  display: grid;
  gap: 12px;
}

#accounts-upload-form textarea {
  min-height: 136px;
}

.material-board,
.creator-panel,
.leaderboard-panel,
.payout-panel {
  max-width: 100%;
  min-width: 0;
  padding: 14px;
  margin-bottom: 14px;
}

.material-table {
  display: grid;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
}

.material-workspace-list {
  gap: 12px;
}

.limit-note {
  margin: -2px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(228, 199, 143, 0.24);
  border-radius: var(--radius-sm);
  color: var(--amber);
  background: rgba(228, 199, 143, 0.07);
  text-transform: uppercase;
}

.table-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.55fr) minmax(130px, 0.7fr) minmax(150px, 0.75fr) minmax(132px, 0.6fr) minmax(178px, 0.8fr);
  gap: 10px;
  /* Was center. Centring five blocks of unequal height put their first lines
     of text at 36.8 / 47.5 / 59.5 / 38px down the row — a 22.7px spread, so
     the eye had to re-find the reading line in every column. Aligning to the
     start puts every column's first line on one horizontal. */
  align-items: start;
  min-width: 0;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgb(var(--panel-rgb) / 0.74);
}

/* The control cluster is the one column that is not read as text, so it stays
   optically centred against the row rather than hanging from the top line. */
.table-row > .ops-cell {
  align-self: center;
}

.material-row {
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.material-row:hover {
  border-color: var(--cyan-edge);
  background: rgb(var(--panel-strong-rgb) / 0.82);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.material-row.is-claiming {
  pointer-events: none;
  opacity: 0.78;
}

.material-row.is-highlighted {
  animation: softRowIn 1400ms ease both;
}

.table-row-head {
  min-height: 34px;
  color: var(--muted);
  text-transform: uppercase;
  background: rgb(var(--abyss-rgb) / 0.78);
  border-radius: var(--radius-sm);
}

.table-row-head.material-row-take-only,
.material-row-take-only {
  grid-template-columns: minmax(220px, 1fr) minmax(116px, 0.46fr) minmax(96px, 0.28fr) minmax(220px, 0.58fr);
}

.table-row-head.account-row-take-only,
.account-row-take-only {
  grid-template-columns:
    minmax(220px, 1fr)
    minmax(116px, 0.42fr)
    minmax(126px, 0.36fr)
    minmax(96px, 0.28fr)
    minmax(104px, 0.28fr);
}

.material-row-take-only {
  min-height: 46px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  background: rgb(var(--panel-rgb) / 0.66);
}

.table-row-head.material-row-take-only {
  min-height: 30px;
  padding-block: 7px;
  background: rgb(var(--abyss-rgb) / 0.58);
}

.material-row-take-only .material-title strong {
  /* Denser row for the operator board; still the dominant line in its row. */
  font-size: var(--text-base);
}

.material-row-take-only .muted-block {
  gap: 2px;
}

.account-result-status {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-transform: uppercase;
}

.account-result-status span {
  color: var(--muted);
  font-size: 10px;
}

.account-result-status strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-row-take-only .ops-cell {
  /* A single TAKE button pinned to the right sat ~200px away from its own OPS
     header. With one control the column reads better left-aligned under the
     header; the multi-control staff row keeps flex-end below. */
  justify-content: flex-start;
}

.material-row-take-only .secondary-button {
  min-width: 86px;
  min-height: 32px;
  padding: 0 12px;
}

.take-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.mini-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(201, 185, 239, 0.34);
  border-radius: 999px;
  color: var(--violet);
  background: rgba(201, 185, 239, 0.08);
  padding: 3px 8px;
  font-size: 12px;
  text-transform: uppercase;
}

.skeleton-row {
  pointer-events: none;
  opacity: 0.8;
}

.skeleton-row span {
  display: block;
  min-height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(147, 164, 178, 0.08), var(--cyan-soft), rgba(147, 164, 178, 0.08));
  background-size: 220% 100%;
  animation: skeletonPulse 1300ms ease-in-out infinite;
}

.account-details {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.account-secret {
  min-width: 120px;
  max-width: 100%;
  display: inline-grid;
  gap: 3px;
  padding: 6px 9px;
  border: 1px solid var(--cyan-soft);
  border-radius: var(--radius-sm);
  background: rgb(var(--abyss-rgb) / 0.54);
}

.account-secret span {
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.account-secret strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.mini-button {
  width: fit-content;
  min-height: 26px;
  border: 1px solid var(--cyan-soft);
  border-radius: var(--radius-sm);
  color: var(--cyan);
  background: rgb(var(--panel-strong-rgb) / 0.72);
  padding: 0 7px;
  text-transform: uppercase;
}

.account-secret-blurred strong {
  color: transparent;
  text-shadow: 0 0 9px rgba(230, 237, 241, 0.65);
  user-select: none;
}

.account-quick-result {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.account-quick-result button {
  min-height: 28px;
  border: 1px solid var(--cyan-soft);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: rgb(var(--abyss-rgb) / 0.54);
  padding: 0 8px;
  text-transform: uppercase;
}

.account-quick-result button.active {
  border-color: rgba(167, 217, 166, 0.52);
  color: var(--green);
  background: rgba(167, 217, 166, 0.08);
}

.material-title strong,
.profile-row strong {
  display: block;
  overflow-wrap: anywhere;
}

/* The corporation name is the one thing an operator scans for, but it used to
   render identically to the uploader name below it — same 16px, same weight,
   same colour — so a row had no subject. This makes it the single dominant
   element in the row; the supporting lines shrink, so the row gets shorter,
   not taller. */
.material-title strong {
  /* Deliberately NOT larger than before: raising it to 18px made long
     corporation names wrap more and grew rows from 101px to 144px, costing
     more than the hierarchy was worth. Dominance comes from the gap to the
     12px muted lines below plus weight, at a size that wraps less. */
  font-size: var(--text-base);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.material-title span,
.profile-row span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.tag-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag-line em {
  border: 1px solid var(--cyan-soft);
  border-radius: 999px;
  color: var(--cyan);
  font-size: var(--text-xs);
  font-style: normal;
  padding: 2px 7px;
}

.material-workspace {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--panel-rgb) / 0.74);
}

.material-workspace:hover {
  border-color: var(--cyan-edge);
  background: rgb(var(--panel-strong-rgb) / 0.82);
}

.workspace-top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(var(--line-rgb) / 0.72);
}

.workspace-title .tag-line {
  margin-top: 7px;
}

.workspace-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.workspace-status {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(228, 199, 143, 0.22);
  border-radius: var(--radius-sm);
  color: var(--amber);
  background: rgba(228, 199, 143, 0.06);
}

.workspace-body {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  grid-template-areas:
    "files preview"
    "comment preview";
  gap: 12px;
  min-width: 0;
}

.workspace-files {
  grid-area: files;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.workspace-file-list {
  display: grid;
  gap: 6px;
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}

.workspace-preview {
  grid-area: preview;
  min-width: 0;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgb(var(--line-rgb) / 0.86);
  border-radius: var(--radius-sm);
  background: rgb(var(--abyss-rgb) / 0.86);
  padding: 10px;
}

.workspace-preview pre {
  max-height: 430px;
  margin: 10px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.workspace-preview .csv-preview-scroll {
  max-height: 430px;
}

.muted-block strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.status-block {
  color: var(--amber);
  overflow-wrap: anywhere;
}

.archive-cell {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgb(var(--line-rgb) / 0.72);
}

.archive-head,
.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.archive-head span,
.preview-head span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.archive-head strong {
  color: var(--cyan);
  font-size: 12px;
}

.archive-file-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.archive-tab,
.archive-download {
  min-height: 36px;
  max-width: 260px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgb(var(--panel-strong-rgb) / 0.82);
  padding: 0 10px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.workspace-file-list .archive-tab {
  max-width: none;
  min-height: 34px;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.archive-tab span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.archive-tab em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
}

.archive-tab.active {
  border-color: var(--line-hot);
  color: var(--green);
  box-shadow: 0 0 0 3px var(--cyan-faint);
}

.archive-download {
  color: var(--cyan);
}

.archive-preview {
  min-width: 0;
  max-width: 100%;
  min-height: 86px;
  overflow: hidden;
  border: 1px solid rgb(var(--line-rgb) / 0.86);
  border-radius: var(--radius-sm);
  background: rgb(var(--abyss-rgb) / 0.86);
  padding: 10px;
}

.archive-preview pre {
  max-height: 240px;
  margin: 10px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.csv-preview-head {
  align-items: flex-start;
}

.csv-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.csv-search {
  width: min(280px, 100%);
  min-height: 34px;
}

.csv-preview-scroll {
  width: 100%;
  max-width: 100%;
  max-height: 310px;
  margin-top: 10px;
  overflow: auto;
  border: 1px solid rgb(var(--line-rgb) / 0.86);
  border-radius: var(--radius-sm);
  background: rgba(7, 10, 14, 0.9);
}

.csv-preview-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.csv-preview-table th,
.csv-preview-table td {
  min-width: 160px;
  max-width: 240px;
  border: 1px solid rgb(var(--line-rgb) / 0.72);
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.csv-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--green);
  background: #18212c;
  text-transform: uppercase;
}

.csv-column-button {
  width: 100%;
  min-height: 28px;
  border: 0;
  color: inherit;
  background: transparent;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.csv-column-button:hover {
  color: var(--cyan);
}

.csv-column-selected {
  background: var(--cyan-faint);
  box-shadow: inset 0 0 0 9999px var(--cyan-faint);
}

.csv-preview-table th.csv-column-selected {
  color: #10171f;
  background: var(--green);
}

.csv-preview-table th.csv-column-selected .csv-column-button {
  color: #10171f;
}

.csv-empty {
  color: var(--muted);
  text-align: center !important;
}

.material-detail-board {
  min-height: calc(100vh - 28px);
  margin-bottom: 0;
}

.material-detail-board .material-table,
.material-detail-board .single-material-table,
.material-detail-board .material-row,
.material-detail-board .archive-cell,
.material-detail-board .archive-preview {
  min-width: 0;
}

.material-detail-board .archive-preview {
  min-height: 56vh;
}

.material-detail-board .archive-preview pre,
.material-detail-board .csv-preview-scroll {
  height: 56vh;
  max-height: 56vh;
}

.locked-note {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.comment-cell {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgb(var(--line-rgb) / 0.72);
}

.comment-cell-compact {
  grid-area: comment;
  padding: 10px;
  border: 1px solid rgb(var(--line-rgb) / 0.72);
  border-radius: var(--radius-sm);
  background: rgb(var(--abyss-rgb) / 0.44);
}

.comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.comment-head span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.comment-head strong {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}

.comment-cell textarea {
  min-height: 58px;
  max-height: 180px;
}

.comment-cell textarea[readonly] {
  color: var(--muted);
  border-color: rgb(var(--line-rgb) / 0.75);
}

.result-select {
  text-transform: uppercase;
}

.result-valid {
  color: var(--green);
}

.result-invalid {
  color: var(--red);
}

.result-unluck {
  color: var(--violet);
}

.result-panic {
  color: var(--red);
}

.result-untrust {
  color: var(--amber);
}

.result-hit {
  color: var(--green);
}

.result-cannot_change_name {
  color: var(--amber);
}

.result-perezvon {
  color: var(--cyan);
}

.result-not_available {
  color: var(--amber);
}

.result-none {
  color: var(--muted);
}

.ops-cell {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.alive-control {
  min-height: 36px;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(167, 217, 166, 0.42);
  border-radius: var(--radius-sm);
  color: var(--green);
  background: rgb(var(--panel-strong-rgb) / 0.82);
  text-transform: uppercase;
}

.alive-control input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--green);
}

.leaderboard-table {
  display: grid;
  gap: 8px;
  isolation: isolate;
}

.leaderboard-periods {
  margin: -4px 0 12px;
}

.leaderboard-titlebar {
  align-items: center;
  gap: 12px;
}

.leaderboard-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.leaderboard-top-today {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-block: 1px solid var(--cyan-soft);
  color: var(--muted);
  text-transform: uppercase;
  background: rgb(var(--abyss-rgb) / 0.25);
}

.leaderboard-top-today > span {
  color: var(--cyan);
  font-size: 12px;
}

.leaderboard-top-today ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard-top-today li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 2px 12px;
  border-left: 1px solid var(--cyan-faint);
}

.leaderboard-top-today li:first-child {
  border-left: 0;
}

.leaderboard-top-today li em {
  color: var(--amber);
  font-style: normal;
}

.leaderboard-top-today li strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-top-today li span {
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.leaderboard-top-today .top-today-rank-1 strong {
  color: var(--amber);
  text-shadow: 0 0 14px rgba(228, 199, 143, 0.2);
}

.leaderboard-top-today .top-today-empty {
  display: block;
  grid-column: 1 / -1;
  border-left: 0;
  color: var(--muted);
}

.leaderboard-row {
  display: grid;
  /* rank | nick | HITS | CORPS TAKEN | % of hits | today.
     The TAKEN column was removed; corps taken is the meaningful count. */
  grid-template-columns:
    90px
    minmax(150px, 1.7fr)
    minmax(76px, 0.7fr)
    minmax(110px, 0.9fr)
    minmax(102px, 0.8fr)
    minmax(62px, 0.55fr);
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--panel-rgb) / 0.74);
}

.leaderboard-head {
  position: sticky;
  top: 8px;
  z-index: 5;
  min-height: 38px;
  color: var(--muted);
  text-transform: uppercase;
  background: rgb(var(--abyss-rgb) / 0.94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
}

.leaderboard-rank-1 {
  border-color: rgba(228, 199, 143, 0.64);
  background: linear-gradient(90deg, rgba(228, 199, 143, 0.1), rgb(var(--panel-rgb) / 0.74) 38%);
  box-shadow: 0 0 0 3px rgba(228, 199, 143, 0.055);
}

.leaderboard-rank-2 {
  border-color: rgba(156, 207, 216, 0.5);
  background: linear-gradient(90deg, var(--cyan-faint), rgb(var(--panel-rgb) / 0.74) 34%);
}

.leaderboard-rank-3 {
  border-color: rgba(229, 160, 172, 0.4);
  background: linear-gradient(90deg, rgba(229, 160, 172, 0.06), rgb(var(--panel-rgb) / 0.74) 30%);
}

.leaderboard-rank-1 .rank-cell strong {
  color: var(--amber);
}

.leaderboard-rank-2 .rank-cell strong {
  color: var(--cyan);
}

.leaderboard-rank-3 .rank-cell strong {
  color: var(--red);
}

.rank-movement {
  min-width: 32px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.rank-up,
/* The three numeric columns — HITS, CORPS TAKEN, % of hits — read as one band,
   so they share a size. At 16px against its 28px neighbours this column sat
   6.5px off their baseline and looked like an oversight rather than a
   deliberate step down. */
.hit-rate-score {
  color: var(--green);
  font-size: 28px;
}

.hit-rate-empty {
  color: var(--muted);
}

.rank-down {
  color: var(--red);
}

.rank-new {
  color: var(--cyan);
}

.payout-panel {
  min-height: calc(100vh - 190px);
}

.payout-headline {
  align-items: stretch;
  margin-bottom: 10px;
}

.payout-headline .primary-button {
  margin-left: auto;
}

.payout-table {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.payout-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(112px, 0.44fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--panel-rgb) / 0.74);
}

.payout-row-head {
  min-height: 38px;
  align-items: center;
  color: var(--muted);
  text-transform: uppercase;
  background: rgb(var(--abyss-rgb) / 0.78);
}

.payout-cell {
  display: grid;
  min-width: 0;
}

.payout-cell span {
  display: none;
}

.payout-cell input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: rgb(var(--abyss-rgb) / 0.48);
  overflow: hidden;
  text-overflow: ellipsis;
}

.payout-cell input[readonly] {
  border-color: rgb(var(--line-rgb) / 0.52);
  color: var(--text);
  background: rgb(var(--abyss-rgb) / 0.28);
  cursor: default;
}

.payout-cell-revenue input,
.payout-cell-revenue input[readonly] {
  color: #7dff9b;
  text-shadow: 0 0 14px rgba(125, 255, 155, 0.18);
}

.payout-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.payout-table-readonly .payout-row {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.soft-panel {
  display: grid;
  gap: var(--space-4);
}

.soft-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.soft-table {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.soft-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(160px, 1.5fr)
    minmax(160px, 1.7fr)
    56px
    56px;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--panel-rgb) / 0.74);
}

.soft-table-readonly .soft-row {
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(160px, 1.5fr)
    minmax(160px, 1.7fr)
    56px;
}

.soft-row-head {
  min-height: 38px;
  align-items: center;
  color: var(--muted);
  text-transform: uppercase;
  background: rgb(var(--abyss-rgb) / 0.78);
}

.soft-cell {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

/* Hide the per-cell column labels on desktop — but not the instruction popup,
   which is also a direct <span> child and must stay in play for its hover. */
.soft-cell > span:not(.soft-instruction-popup) {
  display: none;
}

.soft-cell input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: rgb(var(--abyss-rgb) / 0.48);
  overflow: hidden;
  text-overflow: ellipsis;
}

.soft-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soft-file-size {
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: normal;
}

.soft-text {
  margin: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soft-cell-instruction .soft-text {
  color: var(--muted);
}

/* Full-instruction hover popup — replaces the slow native title. The cell is
   the positioning context; the popup escapes the row on top of everything. */
.soft-cell-instruction {
  position: relative;
}

.soft-cell-instruction.has-popup .soft-text,
.soft-cell-instruction.has-popup input {
  cursor: help;
}

.soft-instruction-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: max-content;
  min-width: 180px;
  max-width: min(420px, 60vw);
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-style: normal;
  background: var(--panel-strong);
  border: 1px solid var(--cyan-edge);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  /* Shown via visibility only — no opacity fade. A transition that never
     advances (as in a non-painting context) could otherwise leave the popup
     visibility:visible but opacity:0, i.e. invisible. */
  visibility: hidden;
  pointer-events: none;
}

.soft-cell-instruction.has-popup:hover .soft-instruction-popup {
  visibility: visible;
  pointer-events: auto;
}

/* While the instruction is being edited, keep the popup out of the way. This
   rule follows the :hover one so it wins when both match. */
.soft-cell-instruction.has-popup:focus-within .soft-instruction-popup {
  visibility: hidden;
  pointer-events: none;
}

.soft-cell-get,
.soft-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.soft-download {
  color: var(--cyan);
}

.soft-download:hover {
  border-color: var(--line-hot);
  background: var(--cyan-soft);
  color: var(--text);
}

.download-icon {
  display: block;
}

.rank-cell {
  gap: 8px;
}

.rank-crown {
  color: var(--amber);
  font-size: 24px;
  line-height: 1;
}

.hit-score {
  color: var(--green);
  font-size: 28px;
}

.corps-taken-score {
  color: var(--cyan);
  font-size: 28px;
}

.presence-on {
  color: var(--green);
}

.presence-off {
  color: var(--muted);
}

.empty-state {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgb(var(--panel-rgb) / 0.46);
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  max-width: min(380px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--cyan-edge);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgb(var(--panel-rgb) / 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  animation: toastIn 180ms ease both;
}

.toast-claimed {
  border-color: rgba(167, 217, 166, 0.52);
  color: var(--green);
}

.toast-error {
  border-color: rgba(229, 160, 172, 0.52);
  color: var(--red);
}

.drop-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(var(--void-rgb) / 0.76);
  backdrop-filter: blur(8px);
  animation: toastIn 160ms ease both;
}

.drop-modal {
  width: min(520px, calc(100vw - 28px));
  display: grid;
  gap: 24px;
  border: 1px solid var(--cyan-edge);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgb(var(--panel-rgb) / 0.98), rgb(var(--abyss-rgb) / 0.98)),
    var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(167, 217, 166, 0.06) inset;
  padding: 28px;
}

.drop-modal h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(26px, 4.8vw, 38px);
  line-height: 1.35;
}

.drop-remember {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  font-size: clamp(16px, 2.4vw, 22px);
  cursor: pointer;
}

.drop-remember input {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 3px solid var(--text);
  border-radius: 50%;
  background: rgb(var(--void-rgb) / 0.92);
  box-shadow: 0 0 0 3px var(--cyan-faint);
}

.drop-remember input::before {
  width: 16px;
  height: 16px;
}

.drop-remember input:checked {
  border-color: var(--green);
  background:
    radial-gradient(circle, rgba(167, 217, 166, 0.18), transparent 68%),
    rgb(var(--void-rgb) / 0.92);
}

.drop-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ghost-button,
.danger-button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  padding: 0 14px;
  font-size: clamp(16px, 2.6vw, 22px);
  text-transform: uppercase;
}

.ghost-button:hover,
.danger-button:hover:not(:disabled) {
  border-color: var(--cyan-soft);
  background: var(--cyan-faint);
}

.danger-button {
  color: var(--red);
}

.danger-button:disabled {
  color: var(--muted);
  opacity: 0.72;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gridDrift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 220px 132px, 132px 220px, 0 0, 0 0, 0 0;
  }
}

@keyframes matrixDrift {
  from {
    transform: translate3d(0, -8%, 0) rotate(-6deg);
  }
  to {
    transform: translate3d(0, 8%, 0) rotate(-6deg);
  }
}

@keyframes signalSweep {
  0%,
  100% {
    background-position: -60vw 0, 0 0;
    opacity: 0.36;
  }
  50% {
    background-position: 60vw 0, 0 18px;
    opacity: 0.62;
  }
}

@keyframes softRowIn {
  0% {
    border-color: rgba(167, 217, 166, 0.78);
    background: rgba(167, 217, 166, 0.14);
    box-shadow: 0 0 0 3px rgba(167, 217, 166, 0.1);
  }
  100% {
    border-color: var(--line);
    background: rgb(var(--panel-rgb) / 0.74);
    box-shadow: none;
  }
}

@keyframes skeletonPulse {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

.center-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.terminal-card {
  width: min(720px, 100%);
  padding: 28px;
}

.terminal-card p {
  color: var(--muted);
  line-height: 1.6;
}

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 520px);
}

.auth-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  padding: 48px;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent, rgb(var(--bg-rgb) / 0.86)),
    repeating-linear-gradient(0deg, var(--cyan-faint), var(--cyan-faint) 1px, transparent 1px, transparent 18px),
    #0b0f14;
}

.auth-hero::before {
  content: "01101001 01001111 01010000 01010011";
  position: absolute;
  inset: 36px;
  color: var(--cyan-faint);
  font-size: clamp(42px, 8vw, 118px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.auth-hero > * {
  position: relative;
  z-index: 1;
}

.scanline {
  height: 12px;
  width: min(520px, 100%);
  margin-top: 24px;
  background: repeating-linear-gradient(90deg, var(--green), var(--green) 16px, transparent 16px, transparent 28px);
  border-radius: 999px;
}

.auth-form {
  align-self: center;
  justify-self: center;
  width: min(420px, calc(100% - 32px));
  padding: 18px;
  display: grid;
  gap: 14px;
}

.error {
  color: var(--red);
  border: 1px solid rgba(229, 160, 172, 0.42);
  border-radius: var(--radius-sm);
  padding: 10px;
  overflow-wrap: anywhere;
}

.create-user-form {
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}

.profiles-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
}

.admin-sections {
  display: grid;
  gap: 12px;
}

.profile-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--panel-rgb) / 0.74);
}

.profile-row-inactive {
  opacity: 0.66;
}

.profile-row:has(.profile-actions-menu[open]) {
  position: relative;
  z-index: 35;
  opacity: 1;
}

.profile-row div {
  min-width: 0;
}

.profile-main small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.profile-main .profile-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--cyan-soft);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 12px;
  font-style: normal;
  text-transform: uppercase;
  background: rgb(var(--abyss-rgb) / 0.34);
}

.profile-main .profile-active {
  border-color: rgba(167, 217, 166, 0.44);
  color: var(--green);
}

.profile-row-inactive .profile-main .profile-inactive {
  border-color: rgba(229, 160, 172, 0.42);
  color: var(--red);
}

.profile-role-guest {
  color: var(--muted);
}

.profile-row select {
  width: 126px;
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.profile-actions-menu {
  position: relative;
}

.profile-actions-menu[open] {
  z-index: 40;
}

.profile-actions-menu summary {
  min-width: 108px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.profile-actions-menu summary::-webkit-details-marker {
  display: none;
}

.profile-actions-menu summary::after {
  content: "+";
  color: var(--muted);
}

.profile-actions-menu[open] summary {
  border-color: var(--line-hot);
  color: var(--green);
  background: var(--cyan-faint);
}

.profile-actions-menu[open] summary::after {
  content: "-";
}

.profile-actions-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 45;
  display: grid;
  gap: 9px;
  width: min(390px, calc(100vw - 48px));
  padding: 11px;
  border: 1px solid var(--cyan-edge);
  border-radius: var(--radius-sm);
  background: rgb(var(--abyss-rgb) / 0.98);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}

.profile-action-label,
.profile-current-note {
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.profile-password-form {
  display: grid;
  gap: 8px;
}

.profile-name-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
  gap: 8px;
}

.profile-name-form input,
.profile-password-form input {
  width: 100%;
  min-height: 36px;
}

.profile-password-buttons,
.profile-account-actions {
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr);
  gap: 7px;
}

.profile-account-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 9px;
  border-top: 1px solid var(--cyan-faint);
}

.profile-account-actions .secondary-button {
  width: 100%;
}

.profile-delete-button {
  background: rgba(229, 160, 172, 0.08);
}

.admin-sections .creator-panel {
  margin-bottom: 0;
}

.audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.audit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.audit-chip {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgb(var(--panel-strong-rgb) / 0.82);
  text-transform: uppercase;
  font-size: var(--text-xs);
}

.audit-chip:hover {
  border-color: var(--cyan-edge);
  color: var(--text);
}

.audit-chip.active {
  border-color: var(--line-hot);
  color: var(--green);
  background: var(--cyan-faint);
  box-shadow: 0 0 0 3px var(--cyan-faint);
}

.audit-search {
  width: auto;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
  min-height: 34px;
}

.audit-log-list {
  max-height: 520px;
  overflow: auto;
  display: grid;
  gap: 6px;
}

.audit-log-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-color: var(--line-hot);
  border-radius: var(--radius-sm);
  background: rgb(var(--abyss-rgb) / 0.28);
}

.audit-log-row[data-tone="danger"] {
  border-left-color: var(--red);
}

.audit-log-row[data-tone="auth"] {
  border-left-color: var(--green);
}

.audit-log-row[data-tone="user"] {
  border-left-color: var(--violet);
}

.audit-log-row[data-tone="material"] {
  border-left-color: var(--cyan);
}

.audit-log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.audit-log-row strong {
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: 0;
}

.audit-log-row[data-tone="danger"] strong {
  color: var(--red);
}

.audit-log-row[data-tone="auth"] strong {
  color: var(--green);
}

.audit-log-row[data-tone="user"] strong {
  color: var(--violet);
}

.audit-log-row time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.audit-log-row span {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.audit-log-row footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.audit-log-row em {
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-detail {
  margin-top: 8px;
}

.audit-detail summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.audit-detail summary::-webkit-details-marker {
  display: none;
}

.audit-detail summary::before {
  content: "+";
  color: var(--cyan);
}

.audit-detail[open] summary {
  color: var(--cyan);
}

.audit-detail[open] summary::before {
  content: "\2212"; /* minus */
}

.audit-kv {
  display: grid;
  gap: 4px;
  margin: 8px 0 2px;
}

.audit-kv > div {
  display: grid;
  grid-template-columns: minmax(90px, 168px) 1fr;
  gap: 10px;
}

.audit-kv dt {
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.audit-kv dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.empty-inline {
  padding: 14px;
  color: var(--muted);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }

  body,
  body::before,
  body::after {
    animation: none !important;
  }
}

@media (max-width: 1080px) {
  .dashboard-grid,
  .auth-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .auth-hero {
    min-height: 360px;
  }

  .upload-panel {
    width: 100%;
  }

  .table-row {
    grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.6fr) minmax(150px, 0.7fr);
  }

  .table-row.material-row-take-only {
    grid-template-columns: minmax(220px, 1fr) minmax(110px, 0.45fr) minmax(90px, 0.3fr) minmax(220px, 0.7fr);
  }

  .workspace-top,
  .workspace-body {
    grid-template-columns: 1fr;
  }

  .workspace-body {
    grid-template-areas:
      "files"
      "preview"
      "comment";
  }

  .workspace-file-list {
    max-height: 180px;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 14px;
  }

  .soft-row-head {
    display: none;
  }

  .soft-row,
  .soft-table-readonly .soft-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .soft-cell > span:not(.soft-instruction-popup) {
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
  }

  .soft-cell-get,
  .soft-actions {
    justify-content: flex-start;
  }

  /* Touch targets. Buttons measured 36-38px and .icon-button 36x36 — including
     the destructive X on a user row, where a missed tap deletes an account.
     The checkbox was 16x16. 44px is the documented minimum. */
  .filter-bar button,
  .tab-bar button,
  .secondary-button,
  .primary-button,
  .mini-button,
  .icon-button,
  .filter-menu-button,
  .upload-mode-tabs button,
  .my-corps-search,
  button,
  input:not([type="checkbox"]),
  select,
  textarea {
    min-height: 44px;
  }

  .icon-button {
    min-width: 44px;
  }

  input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  .app-header,
  .create-user-form,
  .profile-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .leaderboard-titlebar,
  .accounts-board-head,
  .materials-board-head,
  .accounts-head-actions,
  .materials-head-actions,
  .leaderboard-head-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .accounts-head-actions,
  .materials-head-actions,
  .leaderboard-head-actions {
    width: 100%;
    margin-left: 0;
  }

  .accounts-head-actions .secondary-button,
  .materials-head-actions .secondary-button {
    width: 100%;
  }

  .purge-words {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .purge-words-input {
    width: 100%;
  }

  .leaderboard-top-today {
    grid-template-columns: 1fr;
  }

  .leaderboard-top-today ol {
    grid-template-columns: 1fr;
  }

  .leaderboard-top-today li,
  .leaderboard-top-today li:first-child {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 7px 0;
    border-top: 1px solid var(--cyan-faint);
    border-left: 0;
  }

  .leaderboard-top-today li span {
    grid-column: 2;
    white-space: normal;
  }

  .profile-row select,
  .profile-actions-menu,
  .profile-actions-menu summary {
    width: 100%;
  }

  .profile-actions-panel {
    right: 0;
    width: min(390px, calc(100vw - 58px));
  }

  .stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upload-grid {
    grid-template-columns: 1fr;
  }

  .my-corps-tools,
  .my-corps-material-tools {
    grid-template-columns: 1fr;
  }

  .filter-tools {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .global-search-bar {
    grid-template-columns: 1fr;
  }

  .filter-menu-button {
    min-width: 0;
  }

  .filter-menu-panel {
    left: 0;
    right: auto;
    width: 100%;
  }

  .table-row,
  .table-row-head,
  .leaderboard-row,
  .payout-row,
  .payout-table-readonly .payout-row {
    grid-template-columns: 1fr;
  }

  .table-row.material-row-take-only {
    grid-template-columns: 1fr;
  }

  .table-row-head,
  .leaderboard-head,
  .payout-row-head {
    display: none;
  }

  .leaderboard-row:not(.leaderboard-head) > [data-label] {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 28px;
  }

  .leaderboard-row:not(.leaderboard-head) > [data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
    text-transform: uppercase;
  }

  .leaderboard-nick-cell > span {
    grid-column: 2;
  }

  .ops-cell {
    justify-content: flex-start;
  }

  .workspace-controls {
    justify-content: flex-start;
  }

  .drop-modal {
    gap: 18px;
    padding: 22px;
  }

  .drop-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-preview {
    min-height: 320px;
  }

  .workspace-preview pre,
  .workspace-preview .csv-preview-scroll {
    max-height: 320px;
  }

  .payout-panel {
    min-height: auto;
  }

  .payout-headline {
    align-items: stretch;
    flex-direction: column;
  }

  .payout-headline .primary-button {
    margin-left: 0;
  }

  .payout-cell {
    gap: 5px;
  }

  .payout-cell span {
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
  }

  .payout-actions {
    justify-content: flex-start;
  }

  .auth-hero {
    padding: 24px;
  }
}

/* ==========================================================================
   Display modes: light theme + low-detail mode
   Two independent axes set as data-attributes on <html>:
     data-theme="light"  — light "paper terminal" palette (dark is the default)
     data-detail="low"   — drops animations and the page-level decor overlays;
                           the coloured glow (box/text shadows) is kept.
   ========================================================================== */

:root[data-theme="light"] {
  --bg: #e6eaee;
  --panel: #f2f5f7;
  --panel-strong: #ffffff;
  --line: #c4ced7;
  --text: #17212b;
  --muted: #566472;
  /* Phosphor accents, darkened so they read as ink on a light ground while
     keeping their hue identity from the dark theme. */
  --cyan: #1f6b7d;
  --line-hot: var(--cyan);
  --green: #2f8a4e;
  --amber: #9a6a12;
  --red: #c0384f;
  --violet: #5b45c0;
  /* Tints rebuilt from the teal ink so glows/borders stay subtle on light. */
  --cyan-faint: rgba(31, 107, 125, 0.08);
  --cyan-soft: rgba(31, 107, 125, 0.16);
  --cyan-edge: rgba(31, 107, 125, 0.34);
  --shadow: rgba(31, 107, 125, 0.16);
  /* Surface channels: light greys, with abyss/void as the slightly deeper
     insets that were near-black in the dark theme. */
  --bg-rgb: 230 234 238;
  --panel-rgb: 242 245 247;
  --panel-strong-rgb: 255 255 255;
  --line-rgb: 196 206 215;
  --abyss-rgb: 222 228 233;
  --void-rgb: 208 216 223;
  /* Decor recoloured for the light ground: dark hairlines, darker matrix ink,
     and multiply blend so the signal sweep darkens instead of vanishing. */
  --grid-line: rgba(21, 33, 43, 0.09);
  --matrix-ink: rgba(28, 104, 56, 0.85);
  --matrix-glow: rgba(28, 104, 56, 0.42);
  --scanline-ink: rgba(31, 107, 125, 0.32);
  --decor-blend: multiply;
}

/* The wordmark is near-white with a glow for the dark theme; on light give it
   ink fill and keep a coloured glow so the terminal character survives. */
:root[data-theme="light"] .app-header h1 {
  color: var(--text);
  text-shadow:
    0 0 16px rgba(31, 107, 125, 0.24),
    0 0 40px rgba(47, 138, 78, 0.16);
}

/* The FREE stat is a near-white glow tuned for the dark ground (contrast ~1:1
   on light). Give it ink teal with a soft glow so it stays the standout tile. */
:root[data-theme="light"] .stat-free strong {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(31, 107, 125, 0.32);
}

/* Active tab: cyan-faint fill + ring vanish on light, so the selected tab
   looks identical to the rest. Give it an ink border, ring and teal label. */
:root[data-theme="light"] .tab-bar button.active,
:root[data-theme="light"] .upload-mode-tabs button.active {
  color: var(--cyan);
  background: var(--panel-strong);
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px var(--cyan-soft);
}

/* 0.55 opacity reads as muted on dark but as illegible on light. */
:root[data-theme="light"] button:disabled,
:root[data-theme="light"] button[disabled] {
  opacity: 0.72;
}

/* Low-detail: no motion, no page decor. Glow (box-shadow / text-shadow) stays. */
:root[data-detail="low"] *,
:root[data-detail="low"] *::before,
:root[data-detail="low"] *::after {
  animation: none !important;
  transition: none !important;
  backdrop-filter: none !important;
}

:root[data-detail="low"] body {
  background: var(--bg) !important;
}

:root[data-detail="low"] body::before,
:root[data-detail="low"] body::after {
  display: none !important;
}

/* The login screen carries its own decor layer (matrix + scanline wash on the
   hero); flatten it too so low-detail is calm on the way in. */
:root[data-detail="low"] .auth-hero {
  background: #0b0f14 !important;
}

:root[data-detail="low"] .auth-hero::before {
  display: none !important;
}

/* Header display-mode toggles: quiet status-chip buttons next to the user chip. */
.mode-toggle {
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 2px 9px;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mode-toggle:hover {
  color: var(--cyan);
  border-color: var(--line-hot);
}

.mode-toggle.is-active {
  color: var(--amber);
  border-color: var(--amber);
}

/* List pager for the materials / my-corps boards (client-side paging). */
.list-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 2px;
}

.list-pager .secondary-button {
  min-width: 88px;
}

.list-pager-info {
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  min-width: 64px;
  text-align: center;
}