/*
  SlomoPlan theme: stark black-and-white, square corners, condensed uppercase
  headings and monospaced uppercase controls, one lime accent.

  This file is loaded LAST and overrides the legacy style.css / premium.css /
  uma.css layers (hence the !important). When the legacy files are removed
  (see docs/AUDIT.md, D1), drop the !important here.

  Fonts: Oswald, Roboto Mono, Inter (SIL Open Font License), self-hosted.
*/

@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/oswald-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/oswald-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Roboto Mono"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/roboto-mono-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto Mono"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/roboto-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Mono"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/roboto-mono-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto Mono"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/roboto-mono-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --soft: #f3f3f1;
  --muted: #55574f;
  --line: #0a0a0a;
  --line-soft: rgba(10, 10, 10, .14);
  --accent: #b9ff66;
  --danger: #c4261b;

  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, Consolas, "Courier New", monospace;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* keep legacy variables in step so old rules that read them follow the theme */
  --uma-bg: #ffffff;
  --uma-bg-soft: #f3f3f1;
  --uma-card: #ffffff;
  --uma-text: #0a0a0a;
  --uma-muted: #55574f;
  --uma-green: #0a0a0a;
  --uma-gold: #b9ff66;
  --uma-line: rgba(10, 10, 10, .14);
  --uma-line-strong: #0a0a0a;
  --uma-radius: 0px;
  --uma-shadow: none;
}

::selection { background: var(--accent); color: var(--ink); }

html, body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}

body::before { display: none !important; }

body, input, select, textarea, button, table, td, th, label, p, div, span, a {
  font-family: var(--font-body);
}

/* ---------- Header ---------- */

.topbar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--paper) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 24px !important;
}

.brand {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.brand::before {
  width: 12px !important;
  height: 12px !important;
  margin-right: 10px !important;
  border-radius: 0 !important;
  border: 1px solid var(--ink) !important;
  background: var(--accent) !important;
  box-shadow: none !important;
}

nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
}

nav a {
  padding: 9px 12px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
}

nav a:hover,
nav a:focus-visible {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* "Выйти" is a POST form (CSRF), styled like the other nav links */
.nav-form { display: inline-flex !important; margin: 0 !important; }

html body nav button.nav-logout:not(#_) {
  min-height: 0 !important;
  padding: 9px 12px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body nav button.nav-logout:hover:not(#_),
html body nav button.nav-logout:focus-visible:not(#_) {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* ---------- Layout ---------- */

.page {
  max-width: 1220px !important;
  margin: 0 auto !important;
  margin-top: 32px !important;
  padding: 0 24px 64px !important;
}

.login-card,
.card,
.editor-head,
.match-grid,
.evs-scroll,
.layout-drop,
.pdf-sheet,
.clean-final,
.admin-card,
.panel-card {
  background: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
  line-height: 1.02 !important;
  color: var(--ink) !important;
  text-shadow: none !important;
}

h1 { font-size: clamp(40px, 6vw, 72px) !important; }
h2 { font-size: clamp(26px, 3.2vw, 40px) !important; }
h3 { font-size: clamp(20px, 2.2vw, 26px) !important; }

.muted, .small-muted, .link-subtitle {
  color: var(--muted) !important;
}

label {
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* ---------- Forms ---------- */

input, select, textarea {
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--ink) !important;
  outline: 3px solid var(--accent) !important;
  outline-offset: 0 !important;
}

/* ---------- Buttons ---------- */

button,
.button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 22px !important;
  min-height: 46px !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  background-image: none !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

button:hover,
.button-link:hover,
button:focus-visible,
.button-link:focus-visible {
  color: var(--ink) !important;
  background: var(--accent) !important;
  filter: none !important;
  transform: none !important;
}

.ghost, button.ghost, .button-link.ghost {
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
}

.ghost:hover, button.ghost:hover, .button-link.ghost:hover {
  color: var(--paper) !important;
  background: var(--ink) !important;
}

.link-button, .secondary-link, .actions a {
  color: var(--ink) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.link-button:hover, .secondary-link:hover, .actions a:hover {
  color: var(--ink) !important;
  background: var(--accent) !important;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* ---------- Tables ---------- */

table { color: var(--ink) !important; border-collapse: collapse !important; }

th {
  color: var(--paper) !important;
  background: var(--ink) !important;
  background-image: none !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

td, th { border-color: var(--line-soft) !important; }

tbody tr:hover td { background: var(--soft) !important; }

.empty {
  border: 1px dashed var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
}

/* ---------- Alerts ---------- */

.alert, .error, .success {
  border: 1px solid var(--danger) !important;
  border-radius: 0 !important;
  background: var(--paper) !important;
  color: var(--danger) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
}

.success { border-color: var(--ink) !important; color: var(--ink) !important; background: var(--accent) !important; }

/* ---------- Login ---------- */

.login-card {
  max-width: 520px !important;
  margin: 8vh auto 0 !important;
  padding: 44px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
}

.login-card::before {
  content: "BROADCAST PLANNING SYSTEM";
  display: block;
  margin-bottom: 18px;
  padding-left: 22px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left center / 10px 10px;
  color: var(--paper) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
}

.login-card h1,
.login-card label { color: var(--paper) !important; }

.login-card .muted { color: #b9bbb2 !important; }

.login-card button {
  width: 100%;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border-color: var(--paper) !important;
}

.login-card button:hover,
.login-card button:focus-visible {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.login-card .alert {
  background: transparent !important;
  color: #ff8a80 !important;
  border-color: #ff8a80 !important;
}

/* ---------- Admin zone (cabinet) ---------- */

.admin-grid a,
.admin-grid span {
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.admin-grid a:hover { background: var(--accent) !important; }

/* ---------- Page-specific components still on legacy styles ---------- */

.setup-hero, .setup-card, .setup-summary, .editor4k-hero, .editor4k-card,
.football-pitch-demo__header, .football-pitch-demo__panel, .football-pitch-demo__canvas-scroll,
.layout4k-drop, .links4k-card, .evs4k-card {
  background: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.setup-summary-item, .mv-cell, .chip, .camera4k-chip, .via-pill, .evs4k-head,
.downconvert-note, .links-section-title, .mv-label, .football-pitch-demo__coordinates {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.setup-summary-item {
  background: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--line-soft) !important;
}

/* ----- HD editor: EVS table, multiview, links (editor.css loads after this file,
   so selectors are prefixed with `html body` to win on specificity) ----- */

html body .evs-table,
html body .evs-scroll {
  border-radius: 0 !important;
  background: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

html body .evs-table tbody,
html body .evs-table tr,
html body .evs-table td {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: var(--line-soft) !important;
}

/* `:not(#_)` raises specificity above the legacy editor.css selectors */
html body .evs-table tbody tr td:not(#_),
html body .evs-table td:not(#_) {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
  background-image: none !important;
}

html body .evs-table button:not(#_),
html body .evs-table td button:not(#_),
html body .slomo-editor button:not(#_) {
  border-radius: 0 !important;
}

html body .evs-table th,
html body .evs-table thead th,
html body .links-section-title {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--paper) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body .evs-table th select,
html body .evs-table th .evs-name-select {
  color: var(--ink) !important;
  background: var(--paper) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
}

html body .evs-table th.side-title,
html body .evs-table th.link-title {
  background: var(--soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-soft) !important;
}

html body .evs-table select,
html body .slomo-editor select {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
}

html body .mv-cell {
  background: var(--paper) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
}

html body .mv-label,
html body .mv-label-edit {
  background: var(--soft) !important;
  color: var(--ink) !important;
  border: 1px dashed var(--line) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body .mv-label:hover { background: var(--accent) !important; }

html body .chip {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
}

html body .chip.evs-chip { background: var(--ink) !important; color: var(--paper) !important; }
html body .chip.people-chip { background: var(--accent) !important; }
html body .chip-remove { color: inherit !important; background: transparent !important; border: 0 !important; min-height: 0 !important; padding: 0 0 0 6px !important; letter-spacing: 0 !important; }

html body .layout-drop {
  background: var(--soft) !important;
  border: 1px dashed var(--line) !important;
  border-radius: 0 !important;
}

html body .layout-drop img,
html body .slomo-editor img {
  border-radius: 0 !important;
}

html body .layout-drop .muted,
html body .layout-drop p {
  color: var(--muted) !important;
}

html body .slomo-editor button { border-radius: 0 !important; }

/* ----- Mobile fixes: date input, compact selects, labels, + buttons ----- */

html body input[type="date"] {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 46px;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  appearance: none;
  text-align: left !important;
}

html body input[type="date"]::-webkit-date-and-time-value { text-align: left; }

html body .setup-card > *,
html body .setup-grid > * { min-width: 0; }

/* Selects inside the EVS table: compact, with a small custom arrow so labels
   such as «Обычный» fit in narrow cells. */
html body .evs-table select:not(#_) {
  -webkit-appearance: none;
  appearance: none;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 22px 0 8px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  text-overflow: clip;
  background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%230a0a0a' stroke-width='1.6'/></svg>") no-repeat right 7px center / 10px 6px !important;
}

html body .mv-cell:not(#_) { padding: 5px !important; }

/* cells are narrow on phones: slimmer padding and 12px text so «Обычный» fits;
   long camera names are cut in the select but shown in full in the label below */
html body .mv-cell select:not(#_) {
  padding: 0 17px 0 6px !important;
  font-size: 12px !important;
  background-position: right 5px center !important;
}

html body .mv-label:not(#_),
html body .mv-label-edit:not(#_) {
  min-height: 36px !important;
  padding: 4px 5px !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center;
}

/* "+" buttons next to selects: same size as the selects, not full-size buttons */
html body .camera-add,
html body .people-add,
html body .add-row,
html body .extra-camera-row,
html body .add-person-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  gap: 8px !important;
  align-items: center !important;
}

html body button[data-extra-camera-add]:not(#_),
html body button[data-person-add]:not(#_) {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

@media (max-width: 480px) {
  html body .mv-label:not(#_),
  html body .mv-label-edit:not(#_) { font-size: 10px !important; }
}

/* ----- Ready-made plan (preview) pages ----- */

html body .preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

html body .pdf-sheet,
html body .clean-final,
html body .sheet4k {
  padding: clamp(16px, 3vw, 32px) !important;
  background: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .pdf-sheet.clean-final,
html body .clean-camera-table,
html body .clean-links-table,
html body .sheet4k-block {
  background: var(--paper) !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .clean-camera-table,
html body .clean-links-table {
  border: 1px solid var(--line) !important;
  overflow: hidden;
}

html body .preview-toolbar .button-link {
  width: auto !important;
  flex: 0 0 auto !important;
}

html body .clean-head,
html body .sheet4k-head {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line) !important;
  background: none !important;
  text-align: left !important;
}

html body .clean-tournament,
html body .clean-date,
html body .sheet4k-kicker {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

html body .clean-layout,
html body .sheet4k-layout {
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

html body .clean-layout img,
html body .sheet4k-layout img {
  border-radius: 0 !important;
}

html body .clean-green-head,
html body .sheet4k-title,
html body .sheet4k-col-head.compact {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--paper) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body .clean-evs-column,
html body .clean-link-column,
html body .clean-camera-matrix,
html body .clean-link-list,
html body .sheet4k-col,
html body .sheet4k-links-col {
  background: var(--paper) !important;
  background-image: none !important;
  border-color: var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .clean-camera-cell,
html body .clean-link-row,
html body .sheet4k-link-row,
html body .sheet4k-cameras span,
html body .sheet4k-via {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: var(--line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .clean-camera-cell { font-family: var(--font-mono) !important; font-weight: 500 !important; }

html body .clean-link-row,
html body .sheet4k-link-row,
html body .sheet4k-via,
html body .sheet4k-col-head span {
  font-family: var(--font-mono) !important;
  letter-spacing: .02em !important;
}

html body .muted-cell,
html body .empty-preview,
html body .clean-camera-summary {
  color: var(--muted) !important;
}

html body .clean-camera-summary { background: var(--soft) !important; }

html body .sheet4k-col-head {
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body .uni-preview-grid > div {
  background: var(--paper) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
}

/* ----- Leftover text colours from the legacy green/cream palette ----- */

html body b,
html body strong,
html body .evs-table,
html body .evs-table thead,
html body .clean-camera-matrix,
html body .clean-link-list {
  color: var(--ink) !important;
}

html body .setup-kicker,
html body .game-vs,
html body .setup-summary-item b,
html body .camera4k-chip {
  color: var(--ink) !important;
}

html body .setup-summary-label,
html body .pts-hint,
html body small,
html body .layout4k-empty,
html body .layout-drop span {
  color: var(--muted) !important;
}

html body .section-title-4k,
html body .section-title-4k span {
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body .sheet4k-col-head span { color: var(--muted) !important; }

html body .evs4k-head,
html body .evs4k-head b,
html body .evs4k-head span {
  background-image: none !important;
  color: var(--paper) !important;
}

html body .evs4k-head { background-color: var(--ink) !important; }

html body .downconvert-note {
  background: var(--soft) !important;
  border: 1px dashed var(--line) !important;
  color: var(--ink) !important;
}

html body .camera4k-chip {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  font-family: var(--font-mono) !important;
}

[class*="eyebrow"] {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .topbar { padding: 12px 16px !important; }

  /* one scrollable row instead of a stack of full-width buttons */
  nav {
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { flex: 0 0 auto !important; width: auto !important; }

  .page { padding: 0 16px 48px !important; margin-top: 20px !important; }
  .login-card { margin-top: 4vh !important; padding: 28px 22px !important; }
}

/* a form that sits inside a line of text (the "Удалить" button in the cabinet table) */
.inline-form { display: inline !important; margin: 0 !important; }