/* ═══════════════════════════════════════════════════════════════
   CHAOS INSURGENCY TERMINAL — GLOBAL STYLESHEET
   Cell Ω-2 // Secure Terminal v4.2.1
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

/* ─── CUSTOM PROPERTIES ────────────────────────────────────── */
:root {
  --bg:           #0a0000;
  --bg-raised:    #0f0000;
  --bg-card:      #110000;
  --primary:      #cc0000;
  --bright:       #ff2200;
  --dim:          #660000;
  --very-dim:     #330000;
  --readable:     #ffcccc;
  --redact-bg:    #1a0000;
  --speaker-a:    #98c987;
  --speaker-b:    #de3163;
  --bar-bg:       #080000;
  --border:       #2a0000;
  --border-bright:#550000;
  --warning:      #ff3300;
  --keneq:        #cccc00;
  --danger:       #ff6600;
}

/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--primary);
  font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: hidden;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--bright);
  text-shadow: 0 0 8px rgba(255, 34, 0, 0.7);
}

/* ─── CRT — SCANLINES ──────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
  z-index: 1000;
}

/* ─── CRT — FLICKER ────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 999;
  animation: flicker 12s infinite;
}

@keyframes flicker {
  0%,   93%,  100% { opacity: 1; }
  93.5%              { opacity: 0.94; }
  94%                { opacity: 1; }
  96%                { opacity: 0.97; }
  96.5%              { opacity: 1; }
  98%                { opacity: 0.95; }
  98.5%              { opacity: 1; }
}

/* ─── CRT — VIGNETTE ───────────────────────────────────────── */
.vignette {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
  z-index: 998;
}

/* ─── TEXT GLOW ────────────────────────────────────────────── */
body {
  text-shadow: 0 0 6px rgba(204, 0, 0, 0.45);
}

h1, h2, h3, .page-title {
  text-shadow:
    0 0 12px rgba(255, 34, 0, 0.85),
    0 0 4px  rgba(255, 34, 0, 0.4);
}

/* ─── GLITCH ANIMATION ─────────────────────────────────────── */
@keyframes glitch {
  0%,   88%, 100% { clip-path: none; transform: none; }
  89%  { clip-path: polygon(0 15%, 100% 15%, 100% 20%, 0 20%); transform: translate(-3px, 0); }
  90%  { clip-path: polygon(0 55%, 100% 55%, 100% 62%, 0 62%); transform: translate(3px,  0); }
  91%  { clip-path: none;                                        transform: translate(-1px, 0); }
  92%  { clip-path: polygon(0 38%, 100% 38%, 100% 41%, 0 41%); transform: translate(2px,  0); }
  93%  { clip-path: polygon(0 70%, 100% 70%, 100% 74%, 0 74%); transform: translate(-2px, 0); }
  94%  { clip-path: none; transform: none; }
}

.glitch {
  animation: glitch 7s infinite;
}

/* ─── BLINK CURSOR ─────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--bright);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}

/* ─── FADE IN ──────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* ─── TOP BAR ──────────────────────────────────────────────── */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 18px;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--border);
  z-index: 900;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.top-bar-left {
  color: var(--bright);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 0 10px rgba(255, 34, 0, 0.8);
}

.ci-logo {
  font-size: 15px;
  line-height: 1;
  color: var(--bright);
}

.top-bar-right {
  color: var(--readable);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.sub-bar {
  position: fixed;
  top: 33px; left: 0; right: 0;
  padding: 3px 18px;
  background: rgba(8, 0, 0, 0.95);
  border-bottom: 1px solid var(--very-dim);
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.12em;
  z-index: 900;
}

/* ─── FOOTER BAR ───────────────────────────────────────────── */
.footer-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 5px 18px;
  background: var(--bar-bg);
  border-top: 1px solid var(--very-dim);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.09em;
  z-index: 900;
  text-align: center;
}

/* ─── STATIC TRANSITION OVERLAY ────────────────────────────── */
.static-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}

.static-overlay.active {
  animation: staticBurst 0.85s forwards;
}

@keyframes staticBurst {
  0%   { background: transparent;              opacity: 0; }
  8%   { background: rgba(120, 0, 0, 0.35);   opacity: 1; }
  18%  { background: transparent;              opacity: 1; }
  28%  { background: rgba(80, 0, 0, 0.55);    opacity: 1; }
  35%  { background: rgba(15, 0, 0, 0.25);    opacity: 1; }
  48%  { background: rgba(160, 0, 0, 0.45);   opacity: 1; }
  58%  { background: transparent;              opacity: 1; }
  70%  { background: rgba(0, 0, 0, 0.85);     opacity: 1; }
  82%  { background: rgba(100, 0, 0, 0.3);    opacity: 1; }
  100% { background: #0a0000;                 opacity: 1; }
}

/* ─── LOGIN PAGE ───────────────────────────────────────────── */
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 90px 10vw 70px;
  max-width: 900px;
}

.boot-sequence {
  color: var(--primary);
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-wrap;
  min-height: 160px;
}

.boot-sequence .line-dim    { color: var(--dim); }
.boot-sequence .line-bright { color: var(--bright); }
.boot-sequence .line-warn   { color: var(--warning); }

.login-form {
  margin-top: 20px;
  width: 100%;
  max-width: 520px;
  display: none;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  gap: 10px;
}

.prompt-label {
  color: var(--bright);
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 0 0 8px rgba(255, 34, 0, 0.6);
}

.terminal-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dim);
  color: var(--readable);
  font-family: inherit;
  font-size: 14px;
  padding: 4px 2px;
  width: 100%;
  outline: none;
  caret-color: var(--bright);
  text-shadow: 0 0 6px rgba(255, 204, 204, 0.4);
  letter-spacing: 0.05em;
}

.terminal-input:focus {
  border-bottom-color: var(--bright);
  box-shadow: 0 1px 0 0 rgba(255, 34, 0, 0.3);
}

.auth-button {
  margin-top: 28px;
  display: block;
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--bright);
  font-family: inherit;
  font-size: 14px;
  padding: 9px 28px;
  cursor: pointer;
  letter-spacing: 0.15em;
  text-shadow: 0 0 8px rgba(255, 34, 0, 0.7);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.auth-button:hover {
  background: rgba(204, 0, 0, 0.12);
  border-color: var(--bright);
  box-shadow: 0 0 14px rgba(255, 34, 0, 0.35), inset 0 0 8px rgba(204, 0, 0, 0.1);
}

.auth-button:active {
  background: rgba(204, 0, 0, 0.25);
}

/* ─── DASHBOARD LAYOUT ─────────────────────────────────────── */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 57px;
  padding-bottom: 30px;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  padding: 24px 0;
  position: fixed;
  top: 57px;
  bottom: 30px;
  left: 0;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-title {
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.18em;
  padding: 0 18px 12px;
  border-bottom: 1px solid var(--very-dim);
  margin-bottom: 8px;
}

.nav-item {
  display: block;
  padding: 10px 18px;
  color: var(--primary);
  font-size: 13px;
  letter-spacing: 0.06em;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
  text-decoration: none;
}

.nav-item:hover {
  background: rgba(204, 0, 0, 0.08);
  border-left-color: var(--primary);
  color: var(--readable);
  text-shadow: 0 0 8px rgba(255, 204, 204, 0.3);
}

.nav-item.active {
  background: rgba(204, 0, 0, 0.12);
  border-left-color: var(--bright);
  color: var(--bright);
}

.nav-item.locked {
  color: var(--very-dim);
  cursor: default;
  letter-spacing: 0.04em;
}

.nav-item.locked:hover {
  background: transparent;
  border-left-color: transparent;
  color: var(--very-dim);
  text-shadow: none;
}

.nav-index {
  color: var(--dim);
  margin-right: 8px;
}

.main-content {
  flex: 1;
  margin-left: 240px;
  padding: 32px 40px;
  max-width: 900px;
}

/* ─── PAGE TITLE ───────────────────────────────────────────── */
.page-title {
  font-size: 18px;
  color: var(--bright);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.page-sub {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.15em;
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ─── SECTION HEADERS ──────────────────────────────────────── */
.section-header {
  font-size: 11px;
  color: var(--bright);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 28px 0 14px;
}

/* ─── TERMINAL TABLES ──────────────────────────────────────── */
.terminal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.terminal-table td {
  padding: 5px 16px 5px 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(42, 0, 0, 0.6);
  color: var(--readable);
}

.terminal-table td:first-child {
  color: var(--dim);
  width: 230px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.terminal-table th {
  color: var(--bright);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 5px 16px 5px 0;
  border-bottom: 1px solid var(--border-bright);
  text-align: left;
}

/* ─── BODY TEXT ────────────────────────────────────────────── */
.terminal-text {
  color: var(--readable);
  font-size: 13px;
  line-height: 1.8;
  max-width: 760px;
}

.terminal-text p {
  margin-bottom: 14px;
}

/* ─── INCIDENT REPORT CARD ─────────────────────────────────── */
.report-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 32px;
}

.report-tab {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-bright);
  padding: 6px 14px;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-tab-name {
  color: var(--primary);
}

.report-banner {
  background: rgba(204, 0, 0, 0.12);
  border-bottom: 1px solid var(--border);
  padding: 6px 14px;
  font-size: 11px;
  color: var(--warning);
  letter-spacing: 0.14em;
}

.report-body {
  padding: 18px 20px;
}

/* ─── AUDIO PLAYER ─────────────────────────────────────────── */
.terminal-audio {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 12px 16px;
  margin: 16px 0;
}

.audio-label {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.audio-label span {
  color: var(--warning);
}

audio {
  width: 100%;
  filter: sepia(1) hue-rotate(290deg) saturate(3) brightness(0.8);
  outline: none;
}

audio::-webkit-media-controls-panel {
  background: var(--bg-card);
}

/* ─── CHAT LOG (Those Quiet Whispers) ──────────────────────── */
.chat-log {
  max-width: 760px;
  max-height: 640px;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 20px;
  font-size: 13px;
  line-height: 1.8;
}

.chat-timestamp {
  font-size: 10px;
  color: var(--very-dim);
  letter-spacing: 0.1em;
  margin-top: 18px;
  margin-bottom: 4px;
}

.chat-timestamp:first-child {
  margin-top: 0;
}

.chat-a {
  color: var(--speaker-a);
  text-shadow: 0 0 6px rgba(152, 201, 135, 0.3);
  margin-bottom: 6px;
}

.chat-b {
  color: var(--speaker-b);
  text-shadow: 0 0 6px rgba(222, 49, 99, 0.3);
  margin-bottom: 6px;
}

.chat-system {
  font-size: 11px;
  color: var(--very-dim);
  letter-spacing: 0.1em;
  margin-top: 20px;
  border-top: 1px solid var(--very-dim);
  padding-top: 12px;
}

.chat-image {
  margin: 16px 0;
  border: 1px solid var(--border);
  max-width: 320px;
  display: block;
  filter: sepia(1) hue-rotate(290deg) saturate(1.5) brightness(0.75);
}

/* ─── NARRATIVE LOG (Lament) ───────────────────────────────── */
.narrative-log {
  max-width: 700px;
  font-size: 14px;
  line-height: 2;
  color: var(--readable);
}

.narrative-log p {
  margin-bottom: 20px;
}

/* Hidden text — appears invisible, revealed on hover/click */
.hidden-text {
  color: var(--bg);
  background: var(--bg);
  border-radius: 1px;
  cursor: pointer;
  transition: color 0.35s, background 0.35s, text-shadow 0.35s;
}

.hidden-text:hover,
.hidden-text.revealed {
  color: var(--bright);
  background: transparent;
  text-shadow: 0 0 12px rgba(255, 34, 0, 0.9);
}

.text-rose    { color: var(--speaker-b); text-shadow: 0 0 6px rgba(222, 49, 99, 0.4); }
.text-maroon  { color: #6b0015; }
.text-bright  { color: var(--bright); }
.text-dim     { color: var(--dim); }
.text-warning { color: var(--warning); }

/* ─── SCP DOCUMENT ─────────────────────────────────────────── */
.scp-doc {
  border: 1px solid var(--border);
  background: var(--bg-card);
  max-width: 800px;
}

.scp-header {
  background: rgba(20, 0, 0, 0.8);
  border-bottom: 2px solid var(--border-bright);
  padding: 14px 20px;
}

.scp-designation {
  font-size: 22px;
  color: var(--bright);
  letter-spacing: 0.1em;
  text-shadow: 0 0 14px rgba(255, 34, 0, 0.7);
}

.scp-class-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
}

.scp-class-item label {
  color: var(--dim);
  letter-spacing: 0.1em;
  font-size: 10px;
}

.scp-class-item .value {
  display: block;
  color: var(--readable);
  font-size: 13px;
}

.scp-class-item .value.strikethrough {
  text-decoration: line-through;
  color: var(--dim);
}

.scp-class-item .value.keneq    { color: var(--keneq);  text-shadow: 0 0 6px rgba(204, 204, 0, 0.4); }
.scp-class-item .value.danger   { color: var(--danger);  text-shadow: 0 0 6px rgba(255, 102, 0, 0.4); }
.scp-class-item .value.urgent   { color: var(--warning); font-size: 11px; letter-spacing: 0.08em; }

.scp-body {
  padding: 20px 24px;
}

.scp-section-title {
  font-size: 11px;
  color: var(--bright);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  margin: 20px 0 10px;
}

.scp-body p {
  color: var(--readable);
  font-size: 13px;
  line-height: 1.85;
  margin-bottom: 12px;
}

.ci-annotation {
  background: rgba(204, 0, 0, 0.08);
  border: 1px solid var(--border-bright);
  border-left: 3px solid var(--warning);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--warning);
  margin: 0 0 20px;
  letter-spacing: 0.04em;
}

/* ─── REDACTION ────────────────────────────────────────────── */
.redacted {
  display: inline-block;
  background: var(--very-dim);
  color: transparent;
  border-radius: 1px;
  padding: 0 2px;
  user-select: none;
  min-width: 1ch;
}

/* ─── PROFILE IMAGE ────────────────────────────────────────── */
.profile-frame {
  border: 1px solid var(--border-bright);
  padding: 3px;
  background: var(--bg-raised);
  display: inline-block;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(204, 0, 0, 0.2);
}

.profile-img {
  display: block;
  max-width: 200px;
  max-height: 260px;
  filter: sepia(1) hue-rotate(290deg) saturate(1.8) brightness(0.75) contrast(1.1);
  object-fit: cover;
}

/* ─── HIDDEN TERMINAL (Dashboard) ──────────────────────────── */
.terminal-strip {
  position: fixed;
  bottom: 30px;
  left: 240px;
  right: 0;
  background: var(--bar-bg);
  border-top: 1px solid var(--very-dim);
  padding: 5px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 800;
}

.terminal-strip-prompt {
  color: var(--dim);
  font-size: 12px;
  white-space: nowrap;
}

.terminal-strip-input {
  background: transparent;
  border: none;
  color: var(--primary);
  font-family: inherit;
  font-size: 12px;
  flex: 1;
  outline: none;
  caret-color: var(--bright);
  letter-spacing: 0.05em;
}

.terminal-strip-output {
  font-size: 11px;
  color: var(--dim);
  padding: 4px 18px;
  letter-spacing: 0.05em;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}

.terminal-strip-output.visible {
  max-height: 120px;
  padding: 8px 18px;
  border-top: 1px solid var(--very-dim);
}

.terminal-strip-output .t-out-line {
  display: block;
  margin-bottom: 3px;
}

.terminal-strip-output .t-highlight { color: var(--warning); }
.terminal-strip-output .t-success   { color: var(--speaker-a); }
.terminal-strip-output .t-error     { color: var(--primary); }

/* ─── NIM GAME (ARG) ───────────────────────────────────────── */
.nim-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  display: none;
}

.nim-modal.open { display: flex; }

.nim-box {
  border: 1px solid var(--border-bright);
  background: var(--bg-card);
  padding: 32px 40px;
  max-width: 480px;
  width: 90%;
  text-align: center;
}

.nim-title {
  font-size: 16px;
  color: var(--bright);
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

.nim-sub {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.nim-sticks {
  font-size: 28px;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 20px;
  line-height: 1.4;
  min-height: 80px;
  text-shadow: 0 0 8px rgba(204, 0, 0, 0.6);
  word-break: break-all;
}

.nim-count {
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 18px;
  letter-spacing: 0.06em;
}

.nim-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.nim-btn {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--bright);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 18px;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background 0.15s, box-shadow 0.15s;
}

.nim-btn:hover {
  background: rgba(204, 0, 0, 0.15);
  box-shadow: 0 0 10px rgba(255, 34, 0, 0.3);
}

.nim-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.nim-status {
  font-size: 12px;
  color: var(--dim);
  min-height: 20px;
  letter-spacing: 0.05em;
}

.nim-status.win  { color: var(--speaker-a); }
.nim-status.lose { color: var(--warning); }

.nim-close {
  margin-top: 20px;
  font-size: 11px;
  color: var(--very-dim);
  cursor: pointer;
  letter-spacing: 0.1em;
}

.nim-close:hover { color: var(--dim); }

/* ─── BILLYM VARIANTS ──────────────────────────────────────── */
.variant-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 24px 28px;
  margin-bottom: 28px;
  position: relative;
}

.variant-label {
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.18em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.variant-card .note-text {
  color: #c00139;
  text-shadow: 0 0 6px rgba(192, 1, 57, 0.4);
}

.variant-card .coord-text {
  color: var(--speaker-b);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.variant-card .coord-text:hover {
  text-shadow: 0 0 8px rgba(222, 49, 99, 0.6);
}

.variant-finale {
  text-align: center;
  color: var(--dim);
  letter-spacing: 0.12em;
  font-size: 13px;
  margin-top: 14px;
}

/* ─── BLACKMOON ANNEX ──────────────────────────────────────── */
.blackmoon-body {
  --primary: #bb0000;
  --bright:  #ee1100;
  --dim:     #550000;
  --bg:      #060000;
  --bg-card: #0c0000;
  background: #060000;
}

.annex-header {
  font-size: 15px;
  color: #ee1100;
  letter-spacing: 0.2em;
  text-shadow:
    0 0 20px rgba(238, 17, 0, 0.9),
    0 0 6px  rgba(238, 17, 0, 0.5);
  margin-bottom: 6px;
}

/* ─── LAMENT ENDING SEQUENCE ───────────────────────────────── */
.recording-cutout {
  animation: none;
}

.recording-cutout.playing {
  animation: cutoutGlitch 2.5s forwards;
}

@keyframes cutoutGlitch {
  0%   { opacity: 1; filter: none; }
  15%  { opacity: 0.7; filter: blur(1px) hue-rotate(20deg); transform: translate(3px, 0); }
  25%  { opacity: 1;   filter: none; transform: none; }
  40%  { opacity: 0.5; filter: blur(2px); transform: translate(-4px, 1px); }
  55%  { opacity: 0.2; filter: blur(4px) brightness(2); }
  70%  { opacity: 0;   filter: blur(6px); }
  100% { opacity: 0; }
}

.end-of-file {
  display: none;
  text-align: center;
  color: var(--very-dim);
  font-size: 13px;
  letter-spacing: 0.14em;
  margin-top: 40px;
  animation: fadeIn 2s ease-in forwards;
}

/* ─── OPERATIVE TABS (Personnel Files) ────────────────────── */
.operative-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-bright);
  margin-bottom: 20px;
}

.operative-tab {
  padding: 7px 18px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
  cursor: default;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.operative-tab.active {
  color: var(--bright);
  border-bottom-color: var(--bright);
  text-shadow: 0 0 8px rgba(255, 34, 0, 0.6);
}

/* ─── ID BLOCK (Profile + Table side by side) ──────────────── */
.id-block {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.id-block .profile-frame {
  flex-shrink: 0;
  margin-bottom: 0;
}

.id-block .terminal-table {
  flex: 1;
  min-width: 260px;
}

/* ─── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar               { width: 5px; height: 5px; }
::-webkit-scrollbar-track         { background: var(--bg); }
::-webkit-scrollbar-thumb         { background: var(--very-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: var(--dim); }

/* ─── UTILITY ──────────────────────────────────────────────── */
.mt-sm  { margin-top:  8px; }
.mt-md  { margin-top: 16px; }
.mt-lg  { margin-top: 28px; }
.mb-sm  { margin-bottom:  8px; }
.mb-md  { margin-bottom: 16px; }
.mb-lg  { margin-bottom: 28px; }
.mono   { font-family: 'Share Tech Mono', 'Courier New', monospace; }
.upper  { text-transform: uppercase; letter-spacing: 0.1em; }
.center { text-align: center; }