:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #070809;
  color: #f0f1f2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 75% 10%, #260609 0, #09090a 42%, #050506 100%);
}

a { color: #ff686d; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.development-access-banner {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 9px 20px;
  border-bottom: 2px solid #ffd34e;
  background: #4a3500;
  color: #fff3c4;
  font-size: .82rem;
  letter-spacing: .08em;
  text-align: center;
}

.development-access-banner span { font-weight: 800; }

.site-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid #7b171c;
  background: #08090be8;
}

.brand {
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}

.brand span, .eyebrow { color: #e32b34; }
nav { display: flex; gap: 20px; align-items: center; }
.inline-form { display: inline; margin: 0; }
.link-button {
  border: 0;
  background: transparent;
  color: #ff686d;
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.page-shell {
  width: min(100% - 32px, 1680px);
  margin: 7vh auto;
}

.panel {
  border: 1px solid #a52229;
  border-left: 5px solid #e32b34;
  padding: clamp(24px, 5vw, 54px);
  background: #0e1012f2;
  box-shadow: 0 18px 70px #000b;
}

.panel.compact { width: min(100%, 600px); }
.panel.danger { border-color: #ff4b52; }
.panel + .panel, .panel + .split-grid, .split-grid + .panel, .notice + .panel { margin-top: 20px; }
.eyebrow {
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
}

h1 { margin-top: 0; font-size: clamp(2rem, 5vw, 3.5rem); }
.muted { color: #a8adb2; }

form { display: grid; gap: 12px; margin-top: 24px; }
label { font-weight: 700; }
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #565b60;
  background: #070809;
  color: #fff;
  font: inherit;
}
textarea { min-height: 90px; resize: vertical; }

.button {
  display: inline-block;
  width: fit-content;
  margin-top: 10px;
  padding: 12px 18px;
  border: 1px solid #ff4148;
  background: #8d141a;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: #b51b22; }
.danger-button { background: #b00810; border-width: 2px; }

.validation, .warning {
  border: 1px solid #ff5c62;
  padding: 12px;
  background: #3a0c0f;
}

.validation:empty { display: none; }
.secret-once {
  overflow-wrap: anywhere;
  padding: 12px;
  background: #050506;
}
.mfa-qr {
  width: fit-content;
  margin: 20px 0;
  padding: 14px;
  border: 1px solid #565b60;
  background: #fff;
  color: #111;
}
.mfa-qr img {
  display: block;
  width: min(280px, 70vw);
  height: auto;
  image-rendering: pixelated;
}
.mfa-qr figcaption {
  max-width: 280px;
  margin-top: 10px;
  font-size: .78rem;
}

.status-grid {
  display: grid;
  grid-template-columns: minmax(150px, .4fr) 1fr;
  gap: 10px 18px;
}
.status-grid dt { color: #f05a60; font-weight: 800; }
.status-grid dd { margin: 0; }

.command-header { padding-block: 34px; }
.war-room-nav { flex-wrap: wrap; margin-top: 20px; }
.metric-grid, .split-grid, .control-grid {
  display: grid;
  gap: 18px;
  margin: 20px 0;
}
.metric-grid { grid-template-columns: repeat(3, 1fr); }
.split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric {
  border: 1px solid #6e2024;
  background: #0d0f11;
  padding: 22px;
}
.metric span { display: block; color: #f05a60; font-size: .78rem; letter-spacing: .12em; }
.metric strong { display: block; margin-top: 8px; font-size: 1.6rem; }
.notice { border: 1px solid #656a70; padding: 14px 18px; background: #14171a; }
.notice.danger, .danger-zone { border-color: #ff4b52; background: #28090c; }
.notice.success { border-color: #7db18b; background: #102217; }
.status-label { padding: 4px 8px; border: 1px solid #9f3439; }
.form-grid { max-width: 760px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0; }
.inline-form input, .inline-form select { width: auto; min-width: 160px; }
.data-list { list-style: none; padding: 0; }
.data-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #303337; }
.data-list span { color: #a8adb2; }
.war-map { width: 100%; min-height: 310px; border: 1px solid #3f4449; background: radial-gradient(circle, #181b1f, #08090a); }
.sector-link { stroke: #8f969d; stroke-width: 3; }
.sector-node circle { fill: #25292d; stroke: #fff; stroke-width: 2; }
.sector-node .controller-coalition { fill: #224b5c; stroke: #67c2e7; }
.sector-node .controller-pol0 { fill: #58171b; stroke: #ff4b52; }
.sector-node text { fill: #fff; font-size: 11px; }
.capital-marker { fill: #fff; }
.pending-correction { border: 1px solid #ff4b52; padding: 18px; margin-top: 18px; }
details { border-bottom: 1px solid #303337; padding: 10px 0; }
summary { cursor: pointer; font-weight: 700; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #303337; }
th { color: #f05a60; font-size: .76rem; letter-spacing: .06em; }
code { overflow-wrap: anywhere; }
.pagination { justify-content: space-between; margin-top: 18px; }

.war-command-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 2fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 20px 24px;
  border: 1px solid #5d2226;
  background: #090b0dee;
}
.war-command-bar h1 { margin: 0 0 5px; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.war-command-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(74px, 1fr));
  gap: 8px;
  margin: 0;
}
.war-command-stats div {
  min-width: 0;
  padding: 10px;
  border-left: 2px solid #762228;
  background: #111417;
}
.war-command-stats dt { color: #979da4; font-size: .68rem; text-transform: uppercase; }
.war-command-stats dd { margin: 4px 0 0; font-weight: 800; }

.war-room-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(500px, 1fr) minmax(250px, 320px);
  gap: 14px;
  min-height: 680px;
}
.war-side-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid #343a40;
  background: #0b0d0fee;
}
.war-side-panel section + section { margin-top: 26px; }
.war-side-panel h2 { margin: 0 0 12px; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.offensive-list-item, .legal-target {
  display: grid;
  width: 100%;
  gap: 3px;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid #363c42;
  background: #111519;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.offensive-list-item:hover, .legal-target:hover { border-color: #e4474e; }
.offensive-list-item span, .legal-target span, .legal-target small { color: #aab0b6; }
.campaign-timeline { display: grid; gap: 10px; padding-left: 20px; }
.campaign-timeline li { padding-left: 4px; color: #cdd1d5; }
.campaign-timeline time { margin-right: 8px; color: #ef646b; font-family: monospace; }

.galaxy-stage {
  min-width: 0;
  border: 1px solid #4b5158;
  background: #050708;
}
.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #30363b;
  background: #0d1114;
  font-size: .76rem;
}
.map-toolbar button {
  min-width: 34px;
  min-height: 30px;
  border: 1px solid #59616a;
  background: #171c20;
  color: #fff;
  cursor: pointer;
}
.map-toolbar span { display: inline-flex; align-items: center; gap: 5px; }
.map-toolbar i { display: inline-block; width: 18px; height: 4px; }
.legend-coalition { background: #55c7f2; }
.legend-pol0 { background: #f0444d; }
.legend-front { background: #ffd45e; box-shadow: 0 0 8px #ffd45e; }
.galaxy-map-viewport {
  min-height: 620px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background:
    radial-gradient(circle at 20% 30%, #12324255 0 2px, transparent 3px),
    radial-gradient(circle at 72% 24%, #a52d3555 0 1px, transparent 2px),
    radial-gradient(circle at 48% 78%, #ffffff44 0 1px, transparent 2px),
    radial-gradient(ellipse, #151b20 0, #050708 70%);
  background-size: 170px 130px, 210px 180px, 130px 190px, auto;
}
.galaxy-map-viewport.is-panning { cursor: grabbing; }
.war-map-large { min-height: 620px; border: 0; background: transparent; }
.war-map-large [data-map-world] { transform-origin: 0 0; }
.war-map-large .sector-link {
  stroke: #46515b;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.war-map-large .sector-link.active-front {
  stroke: #ffd45e;
  stroke-width: 4;
  stroke-dasharray: 8 5;
  filter: drop-shadow(0 0 4px #ffb400);
}
.war-map-large .sector-link.active-offensive-route {
  stroke: #fff;
  stroke-width: 6;
  stroke-dasharray: 3 4;
  animation: offensive-route-pulse 1.4s ease-in-out infinite alternate;
}
.war-map-large .sector-link.is-selected-route {
  stroke: #fff;
  stroke-width: 6;
  stroke-dasharray: none;
}
.war-map-large .sector-node { cursor: pointer; outline: none; }
.war-map-large .sector-node text {
  fill: #f4f6f8;
  font-size: 12px;
  font-weight: 650;
  paint-order: stroke;
  stroke: #050708;
  stroke-width: 4px;
}
.war-map-large .sector-aura {
  fill: #0e151a;
  stroke-width: 2;
  opacity: .82;
}
.war-map-large .controller-coalition .sector-aura { stroke: #55c7f2; }
.war-map-large .controller-coalition .sector-core { fill: #1c789a; stroke: #b4ebff; }
.war-map-large .controller-pol0 .sector-aura { stroke: #f0444d; }
.war-map-large .controller-pol0 .sector-core { fill: #941e26; stroke: #ff9da2; }
.war-map-large .supply-strained .sector-aura { stroke-dasharray: 4 3; }
.war-map-large .supply-isolated .sector-aura,
.war-map-large .supply-cutoff .sector-aura { stroke: #a4a4a4; stroke-dasharray: 2 4; }
.war-map-large .sector-node.is-selected .sector-aura,
.war-map-large .sector-node.is-route-endpoint .sector-aura {
  stroke: #fff;
  stroke-width: 5;
  filter: drop-shadow(0 0 8px #fff);
}
.war-map-large .supply-marker { fill: #fff0a8; }
@keyframes offensive-route-pulse {
  from { opacity: .55; }
  to { opacity: 1; filter: drop-shadow(0 0 6px #fff); }
}
.map-help { margin: 0; padding: 8px 12px; color: #868e95; font-size: .76rem; }

.sector-inspector.is-hidden { display: none; }
.sector-inspector h3 { font-size: 1.5rem; margin: 0 0 14px; }
.sector-facts {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6px 10px;
}
.sector-facts dt { color: #8e969d; }
.sector-facts dd { margin: 0; font-weight: 700; }
.influence-row {
  display: grid;
  grid-template-columns: 1fr minmax(70px, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  font-size: .8rem;
}
.influence-row meter { width: 100%; }
.legality { padding: 8px; border-left: 3px solid #767d84; background: #111519; font-size: .78rem; }
.legality.legal { border-color: #62c984; }
.legality.illegal { border-color: #ef5058; }

.offensive-planner { margin-top: 16px; }
.planner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: end;
  gap: 12px;
}
.planner-grid label, .mission-simulator label, .compact-command label {
  display: grid;
  gap: 5px;
  font-size: .78rem;
}
.planner-legality {
  grid-column: span 2;
  min-height: 46px;
  padding: 12px;
  border: 1px solid #555d64;
  background: #0b0e10;
}
.planner-legality.legal { border-color: #62c984; color: #a8f1bd; }
.planner-legality.illegal { border-color: #ef5058; color: #ffacb0; }
.offensive-board { display: grid; gap: 16px; margin-top: 16px; }
.offensive-card header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
}
.offensive-card h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 2rem); }
.battle-progress { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
.battle-progress div { display: grid; gap: 6px; }
.battle-progress p { grid-column: 1 / -1; color: #aeb4ba; }
progress { width: 100%; height: 14px; accent-color: #e43b43; }
.operation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.operation-grid section { padding: 14px; border: 1px solid #3e454c; background: #0b0e10; }
.operation-grid h3 { margin: 0; font-size: .95rem; }
.offensive-actions, .compact-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
}
.offensive-actions form, .compact-controls form { margin: 0; }
.button.secondary { border-color: #606970; background: #20262b; }
.compact-command { display: flex; align-items: end; gap: 8px; }
.compact-command input[type="checkbox"] { width: auto; }
.mission-simulator {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 22px;
  padding: 18px;
  border: 2px solid #e3bd38;
  background: #292000;
}
.mission-simulator .eyebrow, .mission-simulator h3 { grid-column: 1 / -1; margin: 0; color: #ffe78c; }
.compact-controls { margin-top: 16px; }
.compact-controls h2 { width: 100%; }

footer {
  width: min(100% - 32px, 1380px);
  margin: 0 auto 28px;
  color: #888e94;
  font-size: .82rem;
}

@media (max-width: 1180px) {
  .war-command-bar { grid-template-columns: 1fr; }
  .war-command-stats { grid-template-columns: repeat(3, 1fr); }
  .war-room-layout { grid-template-columns: 220px minmax(450px, 1fr); }
  .war-right-panel { grid-column: 1 / -1; }
  .planner-grid, .mission-simulator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .status-grid { grid-template-columns: 1fr; }
  .metric-grid, .split-grid, .control-grid { grid-template-columns: 1fr; }
  .panel { padding: 20px; overflow-x: auto; }
  .development-access-banner { flex-direction: column; gap: 2px; }
  .war-command-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .war-room-layout { display: flex; flex-direction: column; }
  .galaxy-stage { order: -1; }
  .galaxy-map-viewport, .war-map-large { min-height: 430px; }
  .planner-grid, .mission-simulator, .operation-grid, .battle-progress {
    grid-template-columns: 1fr;
  }
  .planner-legality { grid-column: auto; }
  .battle-progress p, .mission-simulator .eyebrow, .mission-simulator h3 {
    grid-column: auto;
  }
  .war-side-panel, .galaxy-stage, .offensive-card { max-width: 100%; overflow: hidden; }
}