:root {
  color-scheme: dark;
  --bg: #0b0c0d;
  --bg-elev: #131518;
  --bg-muted: #1d2024;
  --border: rgba(231, 223, 209, .18);
  --border-soft: rgba(231, 223, 209, .1);
  --text: #e7dfd1;
  --text-soft: #b1a79b;
  --text-mute: #7f766e;
  --accent: #d8702c;
  --accent-soft: #f7a35a;
  --timer-ok: #f7a35a;
  --timer-warn: #f0b45c;
  --timer-pulse: rgba(247, 163, 90, .13);
  --shadow: 0 14px 44px rgba(0, 0, 0, .28);
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, .44);
  --bg-deep: #090a0c;
  --panel-bg: #131518;
  --panel-header-bg: #181b20;
  --text-primary: #e7dfd1;
  --text-secondary: #b1a79b;
  --text-muted: #7f766e;
}

html,
body {
  background:
    radial-gradient(circle at 78% 10%, rgba(216, 112, 44, .14), transparent 30%),
    radial-gradient(circle at 18% 86%, rgba(231, 223, 209, .055), transparent 34%),
    #0b0c0d !important;
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(rgba(231, 223, 209, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 223, 209, .022) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 72%);
}

#topbar,
.panel,
.patient-popup,
.confirm-card,
.stats-card,
.tut-overlay-card,
.survey-card,
.debrief-card,
.dd-context-menu,
#wizard {
  background: rgba(19, 21, 24, .96);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

#topbar,
.wizard-header,
.wizard-footer,
.survey-header,
.survey-footer,
.debrief-header {
  background: rgba(10, 11, 13, .86);
}

.scene {
  background:
    radial-gradient(circle at 50% 48%, rgba(247, 163, 90, .08), transparent 44%),
    rgba(19, 21, 24, .92);
  border-color: var(--border);
}

.scene-bg {
  fill: #101216;
}

button,
select,
input,
textarea,
.bucket-button,
.assessment-button,
.intervention-button,
.note-field,
.survey-row textarea {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(231, 223, 209, .18);
  color: var(--text);
}

button:hover:not(:disabled),
.bucket-button:hover:not(:disabled),
.assessment-button:hover:not(:disabled),
.intervention-button:hover:not(:disabled) {
  background: rgba(247, 163, 90, .12);
  border-color: rgba(247, 163, 90, .45);
}

button.primary,
button.lnd-btn.accent,
.survey-footer .lnd-btn.accent,
.tut-overlay-card .lnd-btn.accent {
  background: var(--accent);
  color: #1b110b;
}

button.primary:hover:not(:disabled),
button.lnd-btn.accent:hover:not(:disabled),
.survey-footer .lnd-btn.accent:hover,
.tut-overlay-card .lnd-btn.accent:hover {
  background: var(--accent-soft);
}

.timer,
.system-indicator,
.preview-card,
.stats-section,
.info-box,
.consent-text,
.operator-info,
.tutorial-progress,
.scenario-intro-banner .intro-content,
.debrief-countdown-wrap {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(231, 223, 209, .14);
}

#timer-display,
.panel-title,
.wizard-header h1,
.welcome-title,
.debrief-countdown,
.preview-patient-name {
  color: var(--accent-soft);
}

.panel-placeholder,
.preview-empty,
.survey-note,
.welcome-sub,
.menu-btn .btn-desc,
.debrief-subtitle,
.debrief-instruction {
  color: var(--text-soft);
}

.menu-btn {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(231, 223, 209, .16);
}

.menu-btn:hover:not(:disabled) {
  background: rgba(247, 163, 90, .1);
  border-color: rgba(247, 163, 90, .45);
}

.menu-btn.primary {
  background: rgba(216, 112, 44, .14);
  border-color: rgba(247, 163, 90, .42);
}

.md-home-link {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .72rem;
  border: 1px solid rgba(231, 223, 209, .18);
  background: rgba(9, 10, 12, .86);
  color: var(--text-soft);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.md-home-link:hover {
  color: var(--accent-soft);
  border-color: rgba(247, 163, 90, .48);
}

@media (max-width: 900px) {
  .md-home-link {
    right: 10px;
    bottom: 10px;
  }
}
