:root {
  --match-bg: #111315;
  --match-panel: #181c20;
  --match-panel-raised: #20262a;
  --match-line: #354047;
  --match-ink: #f2f5f2;
  --match-muted: #a6b0b5;
  --match-teal: #22a58e;
  --match-teal-dark: #147563;
  --match-green: #75d6a2;
  --match-log: #0c202d;
}

body.data-match-page {
  min-height: 100vh;
  color: var(--match-ink);
  background: var(--match-bg);
}

.data-match-page .monitor-shell {
  position: relative;
  min-height: 100vh;
  padding-top: 34px;
}

.data-match-page .monitor-brand p,
.data-match-page .eyebrow,
.data-match-page .match-step {
  color: #79d8c6;
}

.data-match-page .monitor-brand h1,
.data-match-page .monitor-command h2,
.data-match-page .data-match-file-panel h3,
.data-match-page .data-match-run h3,
.data-match-page .panel-title h3 {
  color: var(--match-ink);
}

.data-match-page .brand-mark {
  color: #e8fff9;
  background: #147563;
  box-shadow: 0 8px 22px rgb(0 0 0 / 25%);
}

.data-match-page .monitor-back-button {
  color: #e7f3ef;
  background: #1a2023;
  border-color: var(--match-line);
}

.data-match-page .monitor-back-button:hover {
  color: #9af0d9;
  border-color: var(--match-teal);
}

.data-match-page .status,
.data-match-page .command-note,
.data-match-page .data-match-file-panel p,
.data-match-page .data-match-run p,
.data-match-page .small,
.data-match-page .file-meta,
.data-match-page .match-download small,
.data-match-page .empty {
  color: var(--match-muted) !important;
}

.data-match-page .status.ready svg {
  color: var(--match-green);
}

.data-match-page .monitor-command,
.data-match-page .data-match-file-panel,
.data-match-page .data-match-run,
.data-match-page .monitor-panel {
  border-color: var(--match-line);
  background: var(--match-panel);
  box-shadow: 0 16px 32px rgb(0 0 0 / 16%);
}

.data-match-page .monitor-command {
  border-radius: 8px;
}

.data-match-page .data-match-file-panel,
.data-match-page .data-match-run,
.data-match-page .monitor-panel {
  border-radius: 8px;
}

.data-match-page .panel-title {
  border-color: var(--match-line);
  background: #171b1e;
}

.data-match-page .primary {
  color: #ecfffa;
  border-color: var(--match-teal);
  background: var(--match-teal-dark);
}

.data-match-page .primary:hover:not(:disabled) {
  border-color: var(--match-teal);
  background: var(--match-teal);
}

.data-match-page .primary:disabled {
  color: #95aaa4;
  background: #294940;
  border-color: #355c52;
}

.data-match-page .file-meta.ready {
  color: var(--match-green) !important;
}

.data-match-page .match-output {
  background: #15191c;
}

.data-match-page .match-download {
  color: var(--match-ink);
}

.data-match-page .match-download > svg {
  color: #82e0b2;
  background: #163e32;
}

.data-match-page .match-download b,
.data-match-page .text-button {
  color: #76d5c2;
}

.data-match-page .data-match-log {
  color: #cae6df;
  background: var(--match-log);
}

.data-match-page .common-nav {
  --common-nav-ink: #1d2927;
  --common-nav-glass: rgb(16 20 22 / 76%);
  --common-nav-line: rgb(120 158 148 / 42%);
  --common-nav-shadow: 0 18px 46px rgb(0 0 0 / 30%);
}

@media (max-width: 620px) {
  .data-match-page .monitor-shell { padding-top: 24px; }
}
