/* Призрак табло - брутальный квадратный стиль. Никаких скруглений. */

:root {
  --graphite-900: #0B0E13;
  --graphite-800: #11151C;
  --graphite-700: #181D27;
  --graphite-600: #232936;
  --graphite-500: #353D4E;
  --graphite-400: #4A5468;

  --resp-blue: #5EC5E5;
  --resp-blue-dim: #2F6E85;
  --resp-blue-strong: #3CA8CE;

  --resp-pink: #F472B6;
  --resp-pink-dim: #8B3A65;
  --resp-pink-strong: #D74E97;

  --acid-green: #B8E94A;
  --acid-green-dim: #6E8B25;

  --accent-red: #F03C3C;

  --text-primary: #F2F4F8;
  --text-secondary: #98A0B0;
  --text-muted: #5F687A;

  --warning: #F5A623;
  --danger: #EF4444;

  --font-ui: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-num: 'JetBrains Mono', 'Menlo', ui-monospace, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
}

* { box-sizing: border-box; border-radius: 0 !important; }

html, body {
  background: var(--graphite-900);
  color: var(--text-primary);
  font-family: var(--font-ui);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
}

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* Переключатель экранов прототипа */
.switcher {
  display: flex;
  background: #000;
  font-family: var(--font-num);
  border-bottom: 1px solid var(--graphite-600);
}
.switcher .group {
  display: flex;
  flex: 1;
}
.switcher .group + .group { border-left: 1px solid var(--graphite-600); }
.switcher .group-label {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-right: 1px solid var(--graphite-600);
  background: var(--graphite-800);
}
.switcher a {
  flex: 1;
  text-align: center;
  padding: 16px 10px 13px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-right: 1px solid var(--graphite-600);
  border-bottom: 3px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.switcher a:last-child { border-right: 0; }
.switcher a:hover {
  background: var(--graphite-800);
  color: var(--text-primary);
  border-bottom-color: var(--graphite-500);
}
.switcher a.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-red);
  background: var(--graphite-800);
}
.switcher a.disabled {
  color: var(--text-muted);
  opacity: 0.4;
  pointer-events: none;
}

/* Заглушка под нерисованные экраны */
.stub {
  min-height: calc(100vh - 47px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--graphite-900);
}
.stub .big {
  font-family: var(--font-num);
  font-size: 64px;
  font-weight: 700;
  color: var(--graphite-500);
  letter-spacing: -0.02em;
}
.stub .cap {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}