/* Black Armoury mockup: dark graphite armor, forge gold, red telemetry accents. */
:root {
  color-scheme: dark;
  --bg: #08090a;
  --bg-2: #111315;
  --surface: rgba(18, 20, 22, 0.88);
  --surface-strong: rgba(26, 28, 30, 0.96);
  --surface-muted: #121416;
  --text: #f2eee5;
  --muted: #9a958c;
  --line: rgba(228, 205, 157, 0.18);
  --line-strong: rgba(228, 205, 157, 0.36);
  --clear: #55bfa4;
  --caution: #d8aa4f;
  --brake: #cc673a;
  --hold: #b12e31;
  --invalid: #6f7174;
  --accent: #caa557;
  --accent-2: #d03a34;
  --rasputin: #d03a34;
  --ice: #a7b0b5;
  --shadow: 0 20px 54px rgba(0, 0, 0, 0.46);
}

body {
  background:
    linear-gradient(120deg, rgba(208, 58, 52, 0.16), transparent 28%),
    linear-gradient(300deg, rgba(202, 165, 87, 0.18), transparent 30%),
    radial-gradient(circle at 72% -10%, rgba(220, 187, 112, 0.15), transparent 28%),
    linear-gradient(180deg, #08090a 0%, #111315 54%, #070809 100%);
  color: var(--text);
}

body::before {
  background:
    linear-gradient(90deg, rgba(228, 205, 157, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(228, 205, 157, 0.028) 1px, transparent 1px),
    repeating-linear-gradient(135deg, rgba(208, 58, 52, 0.12) 0 1px, transparent 1px 18px),
    linear-gradient(50deg, transparent 0 64%, rgba(202, 165, 87, 0.16) 64% 64.4%, transparent 64.4%);
  background-size: 54px 54px, 54px 54px, 220px 220px, 340px 340px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 82%);
}

button,
a.nav-link,
.file-button {
  border-color: rgba(202, 165, 87, 0.58);
  background:
    linear-gradient(135deg, transparent 0 10px, #caa557 10px),
    linear-gradient(180deg, #d9bb74, #8d6728);
  color: #11100e;
  box-shadow: 0 14px 28px rgba(202, 165, 87, 0.16);
}

button.secondary,
a.nav-link.secondary,
.mission-phase {
  border-color: rgba(202, 165, 87, 0.28);
  background:
    linear-gradient(135deg, transparent 0 10px, rgba(20, 21, 22, 0.96) 10px),
    rgba(20, 21, 22, 0.9);
  color: #e0c98f;
}

button.danger {
  border-color: rgba(208, 58, 52, 0.72);
  background:
    linear-gradient(135deg, transparent 0 10px, rgba(208, 58, 52, 0.96) 10px),
    linear-gradient(180deg, #cf3a34, #731d23);
  color: #fff4ef;
}

input,
select,
.mission-phase select {
  border-color: rgba(228, 205, 157, 0.22);
  background: rgba(6, 7, 8, 0.78);
  color: var(--text);
}

input:focus,
select:focus {
  border-color: rgba(202, 165, 87, 0.78);
  box-shadow: 0 0 0 3px rgba(202, 165, 87, 0.14);
}

.topbar,
.panel,
.sensor-card,
.state-strip {
  border-color: rgba(228, 205, 157, 0.2);
  box-shadow: var(--shadow);
}

.topbar {
  background:
    linear-gradient(110deg, rgba(24, 25, 26, 0.98) 0 58%, rgba(52, 38, 26, 0.92) 58%),
    var(--surface-strong);
}

.topbar::after {
  background:
    repeating-linear-gradient(115deg, rgba(208, 58, 52, 0.22) 0 10px, transparent 10px 20px),
    linear-gradient(90deg, transparent, rgba(202, 165, 87, 0.2));
  opacity: 0.95;
}

.brand-mark {
  border-color: rgba(202, 165, 87, 0.65);
  background:
    linear-gradient(135deg, rgba(202, 165, 87, 0.2), transparent 46%),
    linear-gradient(315deg, rgba(208, 58, 52, 0.18), transparent 40%),
    #111315;
  box-shadow: inset 0 0 26px rgba(202, 165, 87, 0.16), 0 14px 34px rgba(0, 0, 0, 0.45);
}

.brand-mark::before,
.brand-mark::after,
.brand-mark span::before,
.brand-mark span::after {
  border-color: var(--accent);
}

.brand h1,
.panel h2,
.section-title h2 {
  color: #f2eee5;
}

.brand p,
.eyebrow,
.metric-list span,
.system-row span,
.threshold-list span,
.sensor-name,
.sensor-meta,
.voice-readout span {
  color: var(--muted);
}

.section-title span,
.panel::before,
.sensor-card::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.status-pill,
.source-tag,
.range-tag,
.sensor-status {
  border-color: rgba(228, 205, 157, 0.22);
  background: rgba(8, 9, 10, 0.78);
  color: #c7b27e;
}

.state-strip {
  background: rgba(228, 205, 157, 0.2);
}

.state-strip > div,
.panel,
.sensor-card {
  background:
    linear-gradient(135deg, rgba(202, 165, 87, 0.1), transparent 18%),
    linear-gradient(315deg, rgba(208, 58, 52, 0.07), transparent 28%),
    rgba(18, 20, 22, 0.9);
}

.metric-list div,
.threshold-list div,
.system-row,
.voice-readout,
.distance-track {
  border-color: rgba(228, 205, 157, 0.16);
  background: rgba(8, 9, 10, 0.58);
}

.metric-list strong,
.threshold-list strong,
.system-row strong,
.voice-readout strong {
  color: var(--text);
}

.drone-map,
#historyCanvas,
.camera-feed-frame,
.location-visual {
  border-color: rgba(228, 205, 157, 0.22);
  background:
    linear-gradient(90deg, rgba(228, 205, 157, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(228, 205, 157, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, rgba(202, 165, 87, 0.18), transparent 46%),
    linear-gradient(135deg, #0b0c0d, #17191a);
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.drone-body {
  border-color: rgba(202, 165, 87, 0.72);
  background:
    linear-gradient(135deg, transparent 0 12px, rgba(208, 58, 52, 0.36) 12px 13px, transparent 13px),
    #101214;
  color: #f2eee5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}

.drone-body::before,
.drone-body::after {
  background: var(--accent);
}

.camera-feed-frame span,
.mission-phase span {
  color: #e0c98f;
}

.location-visual span {
  border-color: rgba(228, 205, 157, 0.16);
  background: rgba(8, 9, 10, 0.76);
  color: var(--text);
}

.last-picture {
  background:
    linear-gradient(180deg, rgba(8, 9, 10, 0.28), rgba(8, 9, 10, 0.72)),
    linear-gradient(135deg, rgba(202, 165, 87, 0.18), transparent 38%),
    linear-gradient(25deg, rgba(85, 191, 164, 0.12) 0 36%, transparent 36% 100%),
    linear-gradient(155deg, transparent 0 42%, rgba(208, 58, 52, 0.2) 42% 63%, transparent 63%),
    #111315;
}

.event-log li {
  border-left-color: var(--accent-2);
}

.event-log li,
.check-copy span {
  color: var(--muted);
}

/* Sleek Black Armoury refinement to match the current polished dashboard. */
:root {
  --surface: rgba(19, 20, 22, 0.74);
  --surface-strong: rgba(24, 25, 28, 0.9);
  --surface-muted: rgba(10, 11, 12, 0.62);
  --text: #f6f0e6;
  --muted: #a7a098;
  --line: rgba(220, 72, 61, 0.14);
  --line-strong: rgba(226, 199, 133, 0.22);
  --accent: #d6b35f;
  --accent-2: #e0443e;
  --rasputin: #e0443e;
  --ice: #bcc5c8;
  --shadow: 0 22px 58px rgba(0, 0, 0, 0.42);
}

body {
  background:
    radial-gradient(circle at 48% -14%, rgba(214, 179, 95, 0.18), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(224, 68, 62, 0.22), transparent 28%),
    radial-gradient(circle at 10% 86%, rgba(224, 68, 62, 0.14), transparent 30%),
    linear-gradient(180deg, #0d0e10 0%, #141517 48%, #08090a 100%);
}

body::before {
  opacity: 0.4;
  background:
    linear-gradient(90deg, rgba(224, 68, 62, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(246, 240, 230, 0.02) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
}

button,
a.nav-link,
.file-button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #e1c477, #9e7933);
  color: #16130d;
  box-shadow: 0 14px 28px rgba(214, 179, 95, 0.16);
}

button.secondary,
a.nav-link.secondary,
.mission-phase {
  border: 1px solid rgba(224, 68, 62, 0.16);
  border-radius: 999px;
  background: rgba(21, 22, 24, 0.72);
  color: #e4ca89;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
}

button.danger {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5a4f, #9f242c);
  color: #fff4ee;
  box-shadow: 0 14px 30px rgba(216, 70, 61, 0.22);
}

input,
select,
.mission-phase select {
  min-height: 42px;
  border-radius: 999px;
  border-color: rgba(224, 68, 62, 0.14);
  background: rgba(7, 8, 9, 0.62);
}

.topbar {
  border-radius: 24px;
  border: 1px solid rgba(224, 68, 62, 0.14);
  background: rgba(18, 19, 21, 0.76);
  backdrop-filter: blur(22px);
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.38);
  padding: 16px 18px;
}

.topbar::after,
.panel::before,
.sensor-card::before {
  display: none;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border-color: rgba(226, 199, 133, 0.18);
  background:
    radial-gradient(circle at 35% 28%, rgba(246, 240, 230, 0.2), transparent 24%),
    linear-gradient(145deg, rgba(214, 179, 95, 0.16), rgba(224, 68, 62, 0.24)),
    #17181a;
  box-shadow: inset 0 0 0 1px rgba(226, 199, 133, 0.08), 0 16px 34px rgba(0, 0, 0, 0.34);
}

.brand-mark::before,
.brand-mark::after,
.brand-mark span::before,
.brand-mark span::after {
  width: 8px;
  height: 8px;
  border-width: 1px;
}

.section-title span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 18px rgba(224, 68, 62, 0.34);
}

.section-title h2,
.brand h1,
.panel h2 {
  letter-spacing: 0;
  text-transform: none;
}

.state-strip {
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.state-strip > div,
.panel,
.sensor-card {
  border: 1px solid rgba(224, 68, 62, 0.12);
  border-radius: 22px;
  background: rgba(18, 19, 21, 0.72);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
}

.panel {
  padding: 20px;
}

.metric-list div,
.threshold-list div,
.system-row,
.voice-readout {
  min-height: 44px;
  border: 1px solid rgba(224, 68, 62, 0.1);
  border-radius: 14px;
  background: rgba(7, 8, 9, 0.5);
}

.status-pill,
.source-tag,
.range-tag,
.sensor-status {
  min-height: 30px;
  border: 1px solid rgba(224, 68, 62, 0.14);
  border-radius: 999px;
  background: rgba(10, 11, 12, 0.6);
}

.drone-map,
#historyCanvas,
.camera-feed-frame,
.location-visual {
  border: 1px solid rgba(224, 68, 62, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(224, 68, 62, 0.14), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(214, 179, 95, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(22, 23, 25, 0.88), rgba(10, 11, 12, 0.88));
}

.camera-feed-frame::before {
  inset: 18px;
  border-radius: 16px;
  border-color: rgba(224, 68, 62, 0.16);
}

.camera-feed-frame::after {
  display: none;
}

.drone-body {
  border-radius: 18px;
  clip-path: none;
  border-color: rgba(224, 68, 62, 0.2);
  background: rgba(12, 13, 15, 0.82);
}

.location-visual span {
  border-top: 1px solid rgba(226, 199, 133, 0.09);
  background: rgba(10, 11, 12, 0.68);
  backdrop-filter: blur(12px);
}

.event-log li {
  border-left: 0;
  border-radius: 14px;
  background: rgba(7, 8, 9, 0.5);
  padding: 10px 12px;
}

.sensor-value,
.state-strip strong,
.metric-list strong,
.threshold-list strong {
  color: #f6f0e6;
  text-shadow: 0 0 18px rgba(224, 68, 62, 0.16);
}

.sensor-card.clear .sensor-value,
.sensor-card.clear .sensor-status {
  color: #63d6b7;
}

.sensor-card.caution .sensor-value,
.sensor-card.caution .sensor-status {
  color: #d6b35f;
}

.sensor-card.brake .sensor-value,
.sensor-card.brake .sensor-status,
.sensor-card.hold .sensor-value,
.sensor-card.hold .sensor-status {
  color: #ff655b;
}

.distance-track {
  border-color: rgba(224, 68, 62, 0.12);
  background: rgba(246, 240, 230, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.sensor-card.clear .distance-fill {
  background: linear-gradient(90deg, #317f70, #63d6b7);
}

.sensor-card.caution .distance-fill {
  background: linear-gradient(90deg, #8f6a26, #d6b35f);
}

.sensor-card.brake .distance-fill,
.sensor-card.hold .distance-fill {
  background: linear-gradient(90deg, #8f2429, #ff655b);
}

.sensor-name,
.sensor-meta,
.sensor-updated {
  color: #aaa29a;
}

#historyCanvas {
  background:
    radial-gradient(circle at 50% 42%, rgba(224, 68, 62, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(20, 21, 23, 0.94), rgba(7, 8, 9, 0.94));
}

.phase-tabs {
  border-color: rgba(224, 68, 62, 0.16);
  background: rgba(21, 22, 24, 0.72);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

.phase-tab {
  color: #e4ca89;
}

.phase-tab.active {
  background: linear-gradient(180deg, #e1c477, #9e7933);
  color: #16130d;
  box-shadow: 0 14px 28px rgba(214, 179, 95, 0.16);
}

.theme-switch {
  border-color: rgba(224, 68, 62, 0.16);
  background: rgba(21, 22, 24, 0.72);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

.theme-switch span {
  color: #aaa29a;
}

.theme-switch select {
  background: rgba(7, 8, 9, 0.62);
  color: #e4ca89;
}