.audio-preview {
  color: #6e7b8b;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.audio-preview small {
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.trunk-status {
  background: #f3f6f9;
  border: 1px solid #dce4eb;
  border-radius: 10px;
  margin: 12px 0;
  padding: 12px;
  font-weight: 700;
}

.trunk-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.danger-button {
  color: #a52020;
  border-color: #e8bcbc;
}

/* Centralix2.0: midnight graphite, Mega X blue flame, restrained ember accents. */
:root {
  --bg: #060c16;
  --ink: #edf6ff;
  --muted: #91a8c0;
  --line: #1b3047;
  --green: #24c7fa;
  --pale: #10283b;
  --ember: #ff8052;
}

html, body { background-color: var(--bg); }
body {
  background:
    radial-gradient(ellipse at 88% 0, #112d48 0, transparent 36%),
    radial-gradient(ellipse at 18% 90%, #102536 0, transparent 32%),
    var(--bg);
  color: var(--ink);
}
.sidebar {
  background: linear-gradient(180deg, #0b1726, #070e18 88%);
  border-color: #1a2d42;
  box-shadow: 14px 0 42px #02060c88;
}
.brand, .login-card .brand { color: #f3f8ff; }
.brand-logo { filter: drop-shadow(0 0 11px #27caff55); }
.workspace-label, .breadcrumb, .sidebar-bottom small { color: #7891aa; }
.nav { color: #9aafc5; }
.nav:hover { background: #12283c; color: #e8f8ff; }
.nav.active {
  background: linear-gradient(95deg, #103c56, #102338);
  color: #55d8ff;
  box-shadow: inset 2px 0 #3bcfff;
}
.nav b { background: #123c54; color: #8be5ff; }
.sidebar-bottom, .topbar { border-color: var(--line); }
.breadcrumb span:last-child { color: #e0edf9; }
.mode { background: #0d2d43; border-color: #1d6686; color: #6cddff; }
.button, button, .secondary, input, textarea, select {
  background-color: #0d1b2b;
  color: var(--ink);
  border-color: #29415b;
}
button:hover:not(:disabled), a.secondary:hover { background: #142b40; }
.primary, .guide-mock-button {
  background: linear-gradient(130deg, #159ed0, #176bb5 76%, #2754a1);
  color: #fff;
  border-color: #31c5f5;
  box-shadow: 0 8px 25px #138bd044;
}
.primary:hover:not(:disabled), .guide-mock-button:hover { background: linear-gradient(130deg, #24b9e9, #1b7cc9); }
.text-button { background: transparent; color: #9bb1c7; }
.main h1, .main h2, .main h3, .login-card h1 { color: #f1f7ff; }
.eyebrow { color: #51d5ff; }
.card, .stats article, dialog, .login-card {
  background: linear-gradient(145deg, #0e1d2e, #0a1523);
  border-color: #20364e;
  box-shadow: 0 18px 60px #02081444;
}
.card-heading, td { border-color: #1d3045; }
.small-pill, .badge { border-color: #29415a; background: #122337; color: #a6bad0; }
.stats article > span, .stats small, td small, .muted, .audio-preview { color: #91a8c0; }
.stats .stat-highlight {
  background: linear-gradient(140deg, #075477, #12539a 70%, #243d7a);
  border-color: #2cc7f5;
}
.stat-highlight > span, .stat-highlight small { color: #ddf8ff !important; }
.empty strong { color: #eef7ff; }
.empty .empty-icon, .guide-icon { color: #63dcff; }
.guide { background: linear-gradient(145deg, #0c2031, #0a1725); }
.guide-icon { background: #12334a; }
.guide li:before { border-color: #28506a; color: #64dfff; }
.guide-mock-field, .guide-mock-list, .guide-mock-check, .guide-mock-row, .guide-mock-nav, .guide-mock-status {
  background: #102238; border-color: #29445d; color: #c0d1e1;
}
.guide-visual { background: linear-gradient(145deg, #103149, #102238); }
.notice { background: #0d3443; border-color: #1e7185; color: #c4f5ff; }
.notice.error { background: #3b202b; border-color: #854254; color: #ffc6cb; }
.demo-banner { background: #122c4a; border-color: #2c5276; color: #bfdcf7; }
th { background: #102238; color: #98b0c8; }
td { color: #dfebf7; }
input::placeholder, textarea::placeholder { color: #6f879f; }
input:focus, textarea:focus, select:focus { border-color: #3acbfa; box-shadow: 0 0 0 3px #3acbfa24; }
.hint { background: #10263a; color: #b2c7d9; }
dialog::backdrop { background: #020713cc; backdrop-filter: blur(4px); }
.guide-button { color: #65dfff; border-color: #285979; background: #10283b; }
.guide-dots span.active { background: #38c9f8; }
.guide-mock-check, .guide-mock-nav b { color: #64ddff; }
.guide-mock-status i, .connection-dot.ready, .live-pulse i {
  background: #3ad3ff;
  box-shadow: 0 0 0 5px #3ad3ff22;
}
.danger, .danger-button { color: #ffaaa1; border-color: #854759; }
.danger:hover:not(:disabled), .danger-button:hover:not(:disabled) { background: #3d202b; }
.workspace-banner strong { color: #63dcff; }
.check-label input { accent-color: #28c4f4; }

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 40px clamp(24px, 7vw, 120px);
  background:
    linear-gradient(90deg, #050b14ed 0%, #050b14d9 28%, #050b1499 48%, #050b1430 78%),
    url('/static/dragon-night-login-hero.png') center / cover no-repeat,
    #060c16;
}
.login-card {
  width: 470px;
  max-width: min(470px, calc(100vw - 32px));
  margin: 0;
  padding: 42px;
  background: #081321df;
  border: 1px solid #58d6ff44;
  border-radius: 18px;
  box-shadow: 0 26px 90px #0009, 0 0 42px #1388c622;
  backdrop-filter: blur(16px);
}
.login-page .login-card .brand { color: #f4f9ff; }
.login-card .brand-logo { filter: drop-shadow(0 0 16px #38cfff66); }
.login-card .eyebrow { color: #67ddff; }
.login-card .muted { color: #b0c0d2; }
.login-card label { color: #dceafa; }
.login-card input { background: #091727eF; }
.login-card form { margin-top: 27px; }
.login-card .demo-note { border-color: #25405a; color: #9eb2c9; }
.login-card .error { color: #ffaaa8; }
.login-card .primary { margin-top: 4px; }
::selection { background: #1689bd88; color: #fff; }

@media(max-width:760px) {
  .login-page {
    justify-content: center;
    padding: 22px 16px;
    background-position: 62% center;
  }
  .login-card { padding: 30px 26px; }
}