:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #dceff4;
  background: #03080c;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #03080c;
  --panel: #09151c;
  --panel-2: #0c2029;
  --panel-3: #102a34;
  --line: #234550;
  --line-soft: #17323c;
  --text: #e4f5f8;
  --text-soft: #8ba6ae;
  --blue: #58cfe5;
  --blue-bright: #bcf7ff;
  --orange: #f08a32;
  --orange-bright: #ffc06f;
  --red: #ff6251;
  --green: #70dfbf;
  --sidebar: 246px;
  --topbar: 78px;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 75% -10%, #174150 0, transparent 32%),
    linear-gradient(135deg, transparent 0 49%, #0d293318 49% 51%, transparent 51%) 0 0 / 90px 90px,
    #03080c;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, #83d9e506 3px 4px);
  z-index: 1000;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
h1, h2, h3, h4, p, blockquote { margin-top: 0; }
h1, h2, h3 { color: var(--text); }
a { color: inherit; }

#app { min-height: 100vh; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  z-index: 90;
  background: linear-gradient(180deg, #07131a 0%, #040b10 100%);
  border-right: 1px solid var(--line);
  box-shadow: 18px 0 60px #0009;
}
.brand-block { padding: 25px 22px 22px; border-bottom: 1px solid var(--line-soft); position: relative; }
.brand-block::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--orange), transparent); }
.brand { font-size: 1.25rem; font-weight: 950; letter-spacing: .08em; }
.brand span { color: var(--blue); text-shadow: 0 0 20px #58cfe566; }
.unit-tag { margin-top: 10px; color: #6e8992; font: 700 .65rem ui-monospace, monospace; letter-spacing: .14em; }
.eyebrow { margin-bottom: 6px; color: var(--blue); font-size: .66rem; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.main-nav { display: grid; gap: 5px; padding: 20px 13px; }
.nav-button {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr 22px;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #91aeb6;
  background: transparent;
  text-align: left;
  font-weight: 760;
}
.nav-button:hover { color: #e7f9fc; background: #0c2029; }
.nav-button.active { color: #fff; border-color: #315966; background: linear-gradient(90deg, #12303a, #0b1d25); box-shadow: inset 3px 0 var(--orange); }
.nav-icon { display: grid; place-items: center; color: var(--blue); font-size: 1.05rem; }
.nav-button kbd { color: #53717a; background: transparent; border: 0; font: 700 .65rem ui-monospace, monospace; }
.sidebar-bottom { margin-top: auto; padding: 18px; border-top: 1px solid var(--line-soft); }
.help-button { width: 100%; display: flex; align-items: center; gap: 9px; color: #9bb7bf; background: transparent; border: 1px solid #233f49; }
.help-button span { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #4b7580; border-radius: 50%; color: var(--orange); }
.connection { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; margin-top: 18px; font-size: .68rem; color: #77949d; }
.connection i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.connection strong { color: var(--green); font-size: .6rem; }
.sidebar-bottom > small { display: block; margin-top: 10px; color: #49636c; font-size: .62rem; }
.mobile-close, .mobile-menu { display: none; }

.workspace { grid-column: 2; min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  height: var(--topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(18px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
  background: #061118ed;
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 32px #0007;
}
.breadcrumb { display: grid; gap: 3px; }
.breadcrumb span { color: #66848d; font-size: .61rem; font-weight: 900; letter-spacing: .17em; }
.breadcrumb strong { font-size: 1.16rem; letter-spacing: .03em; }
.resource-strip { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); }
.resource-strip > div { display: grid; gap: 2px; text-align: right; }
.resource-strip small { color: #6f8b94; font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.resource-strip strong { color: #fff; font-size: 1.08rem; }
.notification-button { position: relative; width: 40px; height: 40px; padding: 0; color: var(--blue); background: #0c2029; border: 1px solid #315561; border-radius: 50%; }
.notification-button span { position: absolute; top: -5px; right: -4px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 10px; background: var(--orange); color: #071116; font-size: .62rem; font-weight: 950; }
.notification-button span.empty { display: none; }
.main-view { width: min(1660px, 100%); margin: 0 auto; padding: 26px clamp(14px, 2.6vw, 38px) 60px; }

.panel {
  background: linear-gradient(145deg, #0d1c24f2, #071218f7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px #0008, inset 0 1px #ffffff07;
}
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel h1 { margin-bottom: 10px; font-size: clamp(1.7rem, 3.2vw, 3rem); letter-spacing: -.025em; }
.panel h2 { margin-bottom: 0; font-size: 1.25rem; }
.panel p { color: var(--text-soft); line-height: 1.58; }
.page-enter { animation: pageEnter .28s ease both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(7px); } }

button { border: 0; border-radius: 7px; padding: 11px 16px; font-weight: 850; letter-spacing: .025em; transition: .16s ease; }
.primary { color: #071117; background: linear-gradient(135deg, var(--orange-bright), var(--orange)); box-shadow: 0 10px 28px #f08a3224; }
.primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.secondary { color: #cce9ee; background: #0b1e26; border: 1px solid #385f6a; }
.secondary:hover:not(:disabled) { color: #fff; border-color: #69a2b0; background: #102a34; }
.large { min-height: 48px; padding-inline: 24px; }
.full { width: 100%; }
.text-action { padding: 5px 0; color: var(--blue); background: transparent; border-radius: 0; text-align: left; }
.text-action:hover { color: var(--blue-bright); }
.danger-button { color: #ffd8d2; background: #4c211e; border: 1px solid #9e4038; }
.status-pill, .threat-chip, .outcome { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; border-radius: 4px; font-size: .63rem; font-weight: 950; letter-spacing: .1em; white-space: nowrap; }
.status-pill.ok { color: #8af1d7; background: #12372f; border: 1px solid #235e50; }
.status-pill.danger { color: #ffad9f; background: #451e1a; border: 1px solid #7f3931; }
.threat-chip { color: var(--orange-bright); background: #3f2718; border: 1px solid #7e4c26; }
.outcome.victory { color: #83ebd0; background: #113a31; }
.outcome.defeat { color: #ff9f93; background: #44201d; }
.outcome.withdrawal { color: #ffd095; background: #493019; }
.outcome.active { color: #9de9f6; background: #163640; }
.ok-text { color: var(--green) !important; }
.danger-text { color: var(--red) !important; }
.orange { color: var(--orange) !important; }
.empty-copy { color: #708e97 !important; font-style: italic; }

/* Command */
.command-grid { display: grid; grid-template-columns: 1.45fr .75fr .75fr; gap: 18px; }
.hero-command { grid-column: span 2; min-height: 350px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr .75fr; padding: clamp(25px, 4vw, 48px); }
.hero-command::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 76% 42%, #1b596a55, transparent 27%), linear-gradient(120deg, #0e2730 0, #08151c 62%, #081116 100%); }
.hero-command::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, var(--orange), transparent 65%); }
.hero-gridlines { position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(#64b9c20b 1px, transparent 1px), linear-gradient(90deg, #64b9c20b 1px, transparent 1px); background-size: 32px 32px; }
.hero-content { position: relative; z-index: 2; align-self: center; max-width: 720px; }
.hero-content h1 { margin: 8px 0 20px; line-height: 1; }
.hero-content h1 span { color: var(--orange); }
.hero-content p:not(.eyebrow) { max-width: 650px; color: #a9c4cb; font-size: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.threat-radar { position: relative; align-self: center; justify-self: center; width: min(270px, 100%); aspect-ratio: 1; border-radius: 50%; border: 1px solid #3d6874; background: radial-gradient(circle, #0e2a33 0 3%, transparent 4%), repeating-radial-gradient(circle, transparent 0 24%, #4fa9b51f 25% 25.5%); box-shadow: inset 0 0 45px #58cfe514, 0 0 30px #000a; overflow: hidden; }
.threat-radar::before, .threat-radar::after { content: ""; position: absolute; background: #54a8b42b; }
.threat-radar::before { left: 50%; top: 8%; bottom: 8%; width: 1px; }
.threat-radar::after { top: 50%; left: 8%; right: 8%; height: 1px; }
.radar-sweep { position: absolute; inset: 50% 50% 50% 50%; width: 47%; height: 47%; transform-origin: 0 0; background: conic-gradient(from -22deg, #58cfe555, transparent 45deg); animation: radar 4s linear infinite; }
@keyframes radar { to { transform: rotate(360deg); } }
.contact { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.contact.c1 { left: 64%; top: 28%; }.contact.c2 { left: 35%; top: 68%; opacity: .5; }
.threat-radar > span { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); color: var(--orange-bright); font: 900 .62rem ui-monospace, monospace; white-space: nowrap; }
.status-card, .metric-card, .report-card, .doctrine-card { padding: 22px; }
.status-card { grid-row: span 2; }
.mini-mech { display: block; width: min(100%, 300px); margin: 8px auto 2px; filter: drop-shadow(0 20px 20px #0008); }
.pulse-core { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; filter: drop-shadow(0 0 12px #f08a32); } }
.loadout-compact { display: grid; gap: 8px; margin: 3px 0 15px; }
.loadout-compact div { padding: 10px; background: #061118; border: 1px solid #193640; }
.loadout-compact small { display: block; color: #63818a; font-size: .57rem; }
.loadout-compact strong { display: block; margin-top: 3px; font-size: .8rem; }
.metric-main { display: flex; align-items: baseline; gap: 12px; margin: 17px 0; }
.metric-main > strong { font-size: 2.15rem; color: #fff; }
.metric-main > span { color: #76949d; font-size: .77rem; }
.progress { height: 7px; margin: 15px 0; overflow: hidden; border-radius: 9px; background: #031017; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); }
.metric-row, .readiness-line { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid #15313a; color: #8ba8b0; font-size: .78rem; }
.metric-row strong, .readiness-line strong { color: #dff2f5; text-align: right; }
.wide-card { grid-column: span 2; }
.report-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 17px; }
.report-summary > div { padding: 12px; background: #061218; border: 1px solid #183640; }
.report-summary small { display: block; margin-bottom: 6px; color: #647f88; font-size: .57rem; }
.report-summary strong { font-size: .85rem; }
.doctrine-card { position: relative; overflow: hidden; }
.doctrine-card::after { content: ""; position: absolute; right: -50px; bottom: -80px; width: 220px; height: 220px; border: 1px solid #244e59; border-radius: 50%; }
.doctrine-steps { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: #a1bdc4; font: 800 .61rem ui-monospace, monospace; }
.doctrine-steps i { width: 18px; height: 1px; background: var(--orange); }

/* Missions */
.mission-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .65fr); gap: 18px; }
.mission-primary { padding: 26px; }
.mission-primary h1 { margin-top: 5px; }
.mission-map { position: relative; height: 335px; margin-top: 22px; overflow: hidden; border: 1px solid #244a56; background: radial-gradient(circle at 75% 45%, #1b536045, transparent 25%), #061218; }
.map-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(#4da1ad17 1px, transparent 1px), linear-gradient(90deg, #4da1ad17 1px, transparent 1px); background-size: 28px 28px; }
.coastline { position: absolute; left: -10%; top: 4%; width: 66%; height: 105%; border-radius: 45% 48% 20% 0; border-right: 3px solid #4d8793; background: #102c35; transform: rotate(-8deg); box-shadow: 10px 0 35px #58cfe50e; }
.mission-zone { position: absolute; right: 18%; top: 30%; width: 130px; height: 130px; border: 2px solid var(--orange); border-radius: 50%; box-shadow: 0 0 30px #f08a3233, inset 0 0 25px #f08a321a; animation: zonePulse 2s ease-in-out infinite; }
@keyframes zonePulse { 50% { transform: scale(1.08); opacity: .65; } }
.map-label { position: absolute; padding: 5px 8px; background: #071319dd; border: 1px solid #335762; font: 800 .58rem ui-monospace, monospace; }
.map-label.port { left: 25%; top: 42%; }.map-label.reactor { right: 36%; bottom: 23%; }.map-label.enemy { right: 24%; top: 43%; color: var(--orange-bright); border-color: var(--orange); }
.briefing-copy { margin: 18px 0; padding: 14px 16px; border-left: 3px solid var(--orange); background: #0c2028; }
.briefing-copy p { margin: 0; }
.mission-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mission-facts div { padding: 11px; border: 1px solid #1e3d47; background: #061218; }
.mission-facts small { display: block; color: #66838c; font-size: .56rem; }
.mission-facts strong { display: block; margin-top: 5px; font-size: .76rem; }
.mission-sidebar { display: grid; gap: 18px; align-content: start; }
.objective-card, .adaptation-card, .readiness-card { padding: 20px; }
.objective-list { list-style: none; margin: 17px 0 0; padding: 0; display: grid; gap: 10px; }
.objective-list li { display: grid; grid-template-columns: 10px 1fr; gap: 9px; color: #a8c2c9; font-size: .78rem; line-height: 1.4; }
.objective-list i { width: 8px; height: 8px; margin-top: 4px; border: 1px solid var(--orange); transform: rotate(45deg); }
.adaptation-card { display: grid; gap: 8px; }
.adapt-line { display: grid; grid-template-columns: 78px 1fr 32px; align-items: center; gap: 8px; font-size: .72rem; }
.adapt-line span { color: #8aa7af; }.adapt-line strong { text-align: right; }
.mini-bar { height: 5px; overflow: hidden; background: #031017; border-radius: 5px; }.mini-bar i { display: block; height: 100%; background: var(--blue); }
.readiness-card .full { margin-top: 10px; }
.mission-history { padding: 20px; }
.history-table { margin-top: 14px; display: grid; }
.history-row { display: grid; grid-template-columns: 1.2fr .8fr .45fr .45fr; align-items: center; gap: 12px; padding: 12px; color: #9db8c0; background: transparent; border-radius: 0; border-top: 1px solid #17343e; text-align: left; }
.history-row:hover { background: #0c2028; }
.history-row small { display: block; color: #55737c; font-size: .55rem; }.history-row strong { display: block; color: #dceff3; }

/* Briefing */
.briefing-screen { max-width: 1400px; margin: 0 auto; }
.briefing-header { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: clamp(22px, 4vw, 40px); border-top: 3px solid var(--orange); }
.briefing-header p:not(.eyebrow) { max-width: 850px; }
.mission-seal { width: 125px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: 2px solid var(--orange); border-radius: 50%; box-shadow: inset 0 0 30px #f08a321a; }
.mission-seal span { color: var(--orange-bright); font-size: 2rem; font-weight: 950; }.mission-seal small { color: #849fa7; font-size: .5rem; }
.briefing-columns { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 18px; margin-top: 18px; }
.briefing-target, .recon-plan, .pilot-settings { padding: 22px; }
.enemy-silhouette { height: 210px; display: grid; place-items: center; margin: 12px 0; background: radial-gradient(circle, #15353f, #061218 68%); border: 1px solid #1f414b; }
.enemy-silhouette svg { width: 95%; height: 100%; }
.target-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.target-stats div { padding: 9px; background: #061218; border: 1px solid #1a3943; text-align: center; }.target-stats small { display: block; color: #64808a; font-size: .5rem; }.target-stats strong { display: block; margin-top: 4px; }
.intel-note { margin-top: 15px !important; font-size: .8rem; }
.recon-list { display: grid; gap: 10px; margin-top: 18px; }
.recon-list > div { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; padding: 11px; border: 1px solid #1f414b; background: #061218; }
.recon-list > div > span { color: var(--orange); font: 950 1rem ui-monospace, monospace; }.recon-list strong { display: block; font-size: .82rem; }.recon-list small { display: block; margin-top: 3px; color: #78959e; font-size: .69rem; line-height: 1.35; }
.pilot-settings label, .settings-card label { display: block; margin-top: 17px; color: #9bb6bd; font-size: .75rem; }
select, input[type="text"], input[type="search"], .archive-search input, .inventory-search input { width: 100%; margin-top: 6px; padding: 11px 12px; color: #e8f8fb; background: #051016; border: 1px solid #2d505b; border-radius: 6px; outline: 0; }
select:focus, input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #58cfe516; }
input[type="range"] { width: 100%; accent-color: var(--orange); }
output { float: right; color: #fff; }
.brief-loadout { margin-top: 20px; padding: 13px; background: #061218; border: 1px solid #1e3f49; }.brief-loadout small, .brief-loadout strong, .brief-loadout span { display: block; }.brief-loadout small { color: #63808a; font-size: .56rem; }.brief-loadout strong { margin: 5px 0; }.brief-loadout span { color: #8eabb3; font-size: .72rem; }
.briefing-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; }.briefing-footer > div { display: flex; align-items: center; gap: 16px; }.briefing-footer span { color: #6d8992; font-size: .7rem; }

/* Hangar */
.hangar-page { min-width: 0; }
.hangar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; margin-bottom: 18px; }
.hangar-toolbar h1 { margin: 0; font-size: 1.7rem; }.toolbar-actions { display: flex; align-items: center; gap: 10px; }
.hangar-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(430px, 1.25fr) minmax(300px, .72fr); gap: 18px; min-height: 690px; }
.inventory-panel, .telemetry-panel { overflow: hidden; }
.inventory-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.inventory-tabs button { padding: 12px 5px; color: #78949d; background: #061218; border-radius: 0; font-size: .65rem; }
.inventory-tabs button.active { color: #fff; background: #102a34; box-shadow: inset 0 -2px var(--orange); }
.inventory-search, .archive-search { position: relative; padding: 12px; }.inventory-search input, .archive-search input { margin: 0; padding-right: 34px; }.inventory-search span, .archive-search span { position: absolute; right: 25px; top: 23px; color: #66838c; }
.equipment-list { max-height: 610px; overflow-y: auto; padding: 0 10px 12px; scrollbar-color: #31545f #071218; }
.equipment-card { position: relative; width: 100%; display: grid; grid-template-columns: 42px 1fr; gap: 10px; margin-top: 8px; padding: 12px; color: #dceff3; background: #061218; border: 1px solid #1b3b45; text-align: left; }
.equipment-card:hover { border-color: #4c7b87; background: #0c222b; transform: translateX(2px); }.equipment-card.installed { border-color: var(--orange); box-shadow: inset 3px 0 var(--orange); }.equipment-card.locked { opacity: .67; filter: grayscale(.45); }
.equipment-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #31545f; color: var(--blue); background: #0b2028; font-size: 1.2rem; }.family-thermal .equipment-icon { color: #ff765c; }.family-electric .equipment-icon { color: #7fb6ff; }.family-explosive .equipment-icon { color: var(--orange); }.family-melee .equipment-icon { color: #c8f9ff; }
.equipment-card section > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; }.equipment-card section strong { font-size: .78rem; }.equipment-card section em { color: var(--orange); font-size: .48rem; font-style: normal; }.equipment-card section small { display: block; margin-top: 4px; color: #78959d; font-size: .65rem; line-height: 1.35; }.equipment-card footer { display: flex; gap: 8px; margin-top: 8px; color: #a7c0c6; font: 700 .57rem ui-monospace, monospace; }
.lock-tag { grid-column: 1 / -1; color: #f2b46f; font-size: .56rem; }
.mech-bay { position: relative; overflow: hidden; background: linear-gradient(180deg, #0c2028, #050d12); }
.bay-header { position: absolute; inset: 15px 18px auto; z-index: 3; display: flex; justify-content: space-between; color: #66838c; font: 700 .62rem ui-monospace, monospace; }.bay-header strong { color: #cce4e9; }
.mech-stage { position: relative; min-height: 630px; overflow: hidden; background: linear-gradient(90deg, transparent 49.8%, #5e97a31a 50%, transparent 50.2%), linear-gradient(#5e97a30a 1px, transparent 1px) 0 0 / 100% 35px; }
.bay-light { position: absolute; left: 50%; top: -20%; width: 72%; height: 110%; transform: translateX(-50%); background: conic-gradient(from 160deg at 50% 0, transparent, #58cfe518 18deg, transparent 36deg); filter: blur(8px); }
.hangar-mech { position: absolute; left: 50%; top: 48%; width: min(78%, 520px); transform: translate(-50%, -50%); filter: drop-shadow(0 35px 30px #000a); }
.slot-label { position: absolute; z-index: 4; max-width: 185px; padding: 8px 10px; color: #9bb8bf; background: #071319e6; border: 1px solid #31545f; text-align: left; }
.slot-label:hover, .slot-label.active { color: #fff; border-color: var(--orange); box-shadow: 0 0 20px #f08a321c; }.slot-label small { display: block; color: var(--orange); font-size: .48rem; }.slot-label strong { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; }
.slot-chassis { left: 15px; top: 18%; }.slot-left { left: 10px; top: 42%; }.slot-right { right: 10px; top: 42%; }.slot-shoulder { right: 16px; top: 18%; }.slot-modules { left: 50%; bottom: 18px; transform: translateX(-50%); }
.installed-modules { min-height: 58px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding: 10px 15px; border-top: 1px solid var(--line); }.installed-modules span { display: flex; align-items: center; gap: 7px; padding: 6px 8px; color: #a9c5cb; background: #0b2028; border: 1px solid #264955; font-size: .63rem; }.installed-modules button { padding: 0; color: var(--orange); background: transparent; }.installed-modules em { color: #627f88; font-size: .7rem; }
.telemetry-panel { padding: 20px; }.telemetry-panel h2 { margin: 4px 0 15px; }
.comparison-empty { min-height: 220px; display: grid; place-content: center; justify-items: center; text-align: center; color: #65828b; }.comparison-empty span { font-size: 2rem; color: #3d6470; }.comparison-empty p { max-width: 220px; font-size: .76rem; }
.comparison-description { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }.comparison-description > span { display: grid; place-items: center; width: 46px; height: 46px; color: var(--orange); border: 1px solid #31545f; background: #061218; }.comparison-description p { margin: 0; font-size: .76rem; }
.comparison-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 15px 0; }.comparison-metrics > div { display: grid; grid-template-columns: 1fr auto; gap: 3px; padding: 9px; background: #061218; border: 1px solid #173640; }.comparison-metrics span { color: #68858e; font-size: .57rem; }.comparison-metrics strong { font-size: .86rem; }.comparison-metrics em { grid-column: 1 / -1; font-size: .53rem; font-style: normal; }.comparison-metrics em.up { color: var(--green); }.comparison-metrics em.down { color: var(--orange); }
.comparison-card blockquote, .tech-detail blockquote { margin: 0; padding: 12px; color: #91adb5; background: #0c2028; border-left: 2px solid var(--orange); font-size: .7rem; line-height: 1.5; }
.engineering-bars { margin-top: 18px; padding-top: 16px; border-top: 1px solid #1b3a44; }.engineering-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 12px; font-size: .67rem; }.engineering-row span { color: #839fa7; }.engineering-row > div { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 5px; background: #031017; }.engineering-row i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); }
.telemetry-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.telemetry-numbers div { padding: 8px; background: #061218; border: 1px solid #193842; text-align: center; }.telemetry-numbers small { display: block; color: #617e87; font-size: .47rem; }.telemetry-numbers strong { display: block; margin-top: 4px; font-size: .78rem; }
.validation-errors { min-height: 36px; margin: 13px 0; }.validation-errors p { margin: 4px 0; color: #ff9e91; font-size: .68rem; }

/* Technology */
.technology-page { position: relative; padding-bottom: 330px; }
.technology-header { display: flex; justify-content: space-between; gap: 30px; padding: 24px; }.technology-header p:not(.eyebrow) { margin-bottom: 0; }.research-bank { min-width: 180px; display: grid; align-content: center; justify-items: end; }.research-bank small { color: #66838c; font-size: .57rem; }.research-bank > strong { color: var(--orange-bright); font-size: 2.1rem; }.research-bank strong span { font-size: .85rem; }.research-bank em { color: #78949d; font-size: .65rem; font-style: normal; }
.tech-legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 4px; color: #78959d; font-size: .65rem; }.tech-legend span { display: flex; align-items: center; gap: 6px; }.tech-legend i { width: 8px; height: 8px; border-radius: 50%; background: #47636b; }.tech-legend i.unlocked { background: var(--green); }.tech-legend i.available { background: var(--orange); }.tech-legend i.locked { background: #52636a; }
.tech-tree { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 15px; scrollbar-color: #31545f #061218; }
.tech-branch { min-width: 230px; padding: 14px; border: 1px solid #1e404a; background: linear-gradient(180deg, #0b2028, #061218); }.tech-branch > header { min-height: 105px; display: grid; grid-template-columns: 40px 1fr; gap: 10px; border-bottom: 1px solid #1a3943; }.tech-branch > header > span { display: grid; place-items: center; width: 38px; height: 38px; color: var(--orange); border: 1px solid #365d68; font: 900 .62rem ui-monospace, monospace; }.tech-branch h2 { margin: 0 0 5px; font-size: .84rem; }.tech-branch p { font-size: .65rem; line-height: 1.4; }.classified-branch { border-color: #59342b; background: linear-gradient(180deg, #251412, #080b0d); }
.tech-column { position: relative; display: grid; gap: 14px; padding-top: 16px; }.tech-column::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: #31545f; }
.tech-node { position: relative; width: 100%; min-height: 95px; display: grid; grid-template-columns: 35px 1fr auto; gap: 8px; align-items: start; padding: 11px; color: #a7c2c8; background: #071319; border: 1px solid #274953; text-align: left; }.tech-node:hover:not(:disabled) { transform: translateY(-2px); border-color: #538390; }.tech-node.unlocked { border-color: #2b6c5b; background: #0b2822; }.tech-node.available { border-color: var(--orange); box-shadow: 0 0 18px #f08a3214; }.tech-node.locked { filter: grayscale(.55); opacity: .68; }.tech-node.classified { border-style: dashed; }
.tech-node .tier { position: relative; z-index: 2; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #fff; background: #17333c; border: 1px solid #416b76; font: 900 .56rem ui-monospace, monospace; }.tech-node.unlocked .tier { background: #175344; }.tech-node.available .tier { color: #071117; background: var(--orange); border-color: var(--orange); }.tech-node strong { display: block; color: #e3f3f6; font-size: .71rem; }.tech-node small { display: block; margin-top: 4px; color: #718e97; font-size: .59rem; line-height: 1.35; }.tech-node > em { color: var(--orange-bright); font-size: .59rem; font-style: normal; white-space: nowrap; }
.tech-inspector { position: fixed; left: calc(var(--sidebar) + 25px); right: 25px; bottom: 18px; z-index: 45; max-height: 300px; padding: 20px; overflow-y: auto; box-shadow: 0 -16px 45px #000b; }.inspector-empty { min-height: 150px; display: grid; place-content: center; justify-items: center; text-align: center; }.inspector-empty > span { color: #416772; font-size: 2rem; }.inspector-empty p { max-width: 500px; }
.tech-detail { display: grid; grid-template-columns: minmax(230px, 1.2fr) 1fr 1fr minmax(220px, .9fr); gap: 18px; align-items: start; }.tech-detail > .eyebrow, .tech-detail > h2, .tech-detail > p { grid-column: 1; }.tech-detail h2 { margin-bottom: 8px; }.tech-detail > p:not(.eyebrow) { margin: 0; font-size: .72rem; }.tech-effects { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; }.tech-effects span { min-width: 110px; padding: 8px; background: #061218; border: 1px solid #1b3b45; color: #7f9da5; font-size: .58rem; }.tech-effects strong { display: block; margin-top: 4px; color: var(--green); font-size: .8rem; }
.unlock-list, .requirement-list { display: grid; gap: 5px; }.unlock-list small, .requirement-list small { color: #66838c; font-size: .55rem; }.unlock-list strong, .requirement-list span { padding: 6px 8px; background: #061218; border: 1px solid #193842; font-size: .62rem; }.requirement-list span { color: #e59686; }.requirement-list span.ok { color: #80d7bf; }.requirement-list i { margin-right: 7px; font-style: normal; }.tech-detail blockquote { grid-column: 4; }.tech-detail .primary { grid-column: 4; }

/* Archives */
.archives-header { display: flex; justify-content: space-between; gap: 20px; padding: 24px; }.archive-progress { display: grid; place-content: center; min-width: 130px; text-align: center; border-left: 1px solid #1d3d47; }.archive-progress strong { color: var(--orange); font-size: 2rem; }.archive-progress span { color: #6d8992; font-size: .55rem; }
.archive-layout { display: grid; grid-template-columns: minmax(330px, .75fr) minmax(0, 1.5fr); gap: 18px; margin-top: 18px; }.archive-browser { overflow: hidden; }.archive-categories { display: flex; gap: 5px; padding: 0 12px 10px; overflow-x: auto; }.archive-categories button { flex: 0 0 auto; padding: 7px 9px; color: #77949c; background: #071319; border: 1px solid #23444e; font-size: .6rem; }.archive-categories button.active { color: #071117; background: var(--orange); border-color: var(--orange); }
.archive-list { max-height: 610px; overflow-y: auto; padding: 0 10px 12px; }.archive-item { position: relative; width: 100%; display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 12px; color: #d8edf1; background: #061218; border: 1px solid #183842; border-radius: 0; text-align: left; }.archive-item + .archive-item { margin-top: 7px; }.archive-item:hover, .archive-item.active { background: #0c222b; border-color: #4b7a86; }.archive-item.locked { opacity: .63; filter: grayscale(.5); }.archive-code { color: var(--orange); font: 800 .52rem ui-monospace, monospace; }.archive-item strong { display: block; font-size: .72rem; }.archive-item small { display: block; margin-top: 4px; color: #718e97; font-size: .6rem; line-height: 1.35; }.archive-item em { color: #617e87; font-size: .48rem; font-style: normal; }.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.archive-reader { min-height: 610px; padding: clamp(22px, 4vw, 45px); }.reader-empty, .classified-reader { min-height: 520px; display: grid; place-content: center; justify-items: center; text-align: center; }.reader-empty > span { color: #426873; font-size: 3rem; }.reader-empty p, .classified-reader p { max-width: 520px; }.classified-reader h2 { color: var(--red); letter-spacing: .15em; }.redacted-lines { width: min(500px, 90%); display: grid; gap: 12px; margin: 25px 0; }.redacted-lines i { display: block; height: 12px; background: #020507; }.redacted-lines i:nth-child(2) { width: 75%; }.redacted-lines i:nth-child(4) { width: 88%; }
.reader-document header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #2b4b55; }.reader-document header > span { color: #76929a; font: 700 .65rem ui-monospace, monospace; }.reader-document h1 { margin: 4px 0 0; }.document-summary { margin: 25px 0 !important; color: #c4dce1 !important; font-size: 1.05rem; }.document-body { min-height: 270px; padding: 22px; color: #a9c3ca; background: #061218; border: 1px solid #1d3c46; }.document-body p { max-width: 900px; font-family: Georgia, serif; font-size: 1rem; line-height: 1.85; }.reader-document footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 25px; color: #617d86; font: 700 .58rem ui-monospace, monospace; }.reader-document.classified { border-top: 3px solid var(--red); }.reader-document.classified .eyebrow, .reader-document.classified footer strong { color: var(--red); }
.report-archive { margin-top: 18px; padding: 20px; }.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px; }.report-mini { padding: 12px; color: #dceff3; background: #061218; border: 1px solid #193a44; text-align: left; }.report-mini:hover { border-color: #4b7884; transform: translateY(-2px); }.report-mini header { display: flex; justify-content: space-between; align-items: center; }.report-mini header > span { color: #65818a; font: 800 .52rem ui-monospace, monospace; }.report-mini > strong { display: block; margin: 10px 0 5px; }.report-mini > small { color: #6f8b94; }.report-mini > div { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #17343e; color: #88a5ad; font-size: .57rem; }

/* Settings */
.settings-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px; }.settings-header > span { color: var(--orange); font: 900 1rem ui-monospace, monospace; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }.settings-card { padding: 22px; }.settings-card label { display: grid; grid-template-columns: 1fr minmax(150px, .55fr) auto; align-items: center; gap: 15px; padding: 14px 0; border-bottom: 1px solid #17343e; }.settings-card label > span { color: #c1d9de; }.settings-card label small { display: block; margin-top: 4px; color: #6f8b94; font-weight: 400; line-height: 1.4; }.settings-card label select { margin: 0; }.settings-card output { min-width: 40px; text-align: right; }
.toggle-row input { position: absolute; opacity: 0; }.toggle-row i { position: relative; width: 48px; height: 25px; border-radius: 20px; background: #1b3943; border: 1px solid #31545f; }.toggle-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #78949c; transition: .2s; }.toggle-row input:checked + i { background: #2b5e50; border-color: #4b9e87; }.toggle-row input:checked + i::after { left: 26px; background: var(--green); }
.settings-card .full { margin-top: 10px; }.controls-card > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #17343e; color: #8ba7af; font-size: .75rem; }.controls-card kbd, .shortcut-grid kbd { padding: 4px 7px; color: var(--orange-bright); background: #061218; border: 1px solid #31545f; border-radius: 4px; font: 700 .62rem ui-monospace, monospace; }.danger-zone { border-color: #60362f; }

/* Results */
.result-page { max-width: 1400px; margin: 0 auto; }.result-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px; border-top: 4px solid var(--green); }.result-page.defeat .result-hero { border-top-color: var(--red); }.result-page.withdrawal .result-hero { border-top-color: var(--orange); }.result-hero h1 { margin: 4px 0 8px; }.result-hero p { margin: 0; }
.result-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 15px; }.result-metrics > div { padding: 15px; }.result-metrics small { display: block; color: #66838c; font-size: .55rem; }.result-metrics strong { display: block; margin-top: 5px; font-size: 1.25rem; }
.result-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-top: 15px; }.result-columns > article { padding: 20px; }.part-line { display: grid; grid-template-columns: 80px 1fr 40px; align-items: center; gap: 8px; margin: 12px 0; font-size: .68rem; }.part-line > div { height: 6px; background: #031017; }.part-line i { display: block; height: 100%; background: var(--green); }.new-archive { display: grid; grid-template-columns: 35px 1fr; gap: 9px; padding: 10px; margin-top: 8px; background: #061218; border: 1px solid #1b3b45; }.new-archive > span { color: var(--orange); font-size: 1.2rem; }.new-archive strong { display: block; font-size: .72rem; }.new-archive small { color: #75929a; font-size: .61rem; }.result-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Modal, toast, tutorial */
.modal-host { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 18px; }.modal-host.open { display: grid; }.modal-backdrop { position: absolute; inset: 0; background: #010508d9; backdrop-filter: blur(5px); }.modal-card { position: relative; z-index: 2; width: min(760px, 100%); max-height: min(88vh, 900px); overflow-y: auto; padding: clamp(22px, 4vw, 36px); background: linear-gradient(145deg, #10242deF, #061118f7); border: 1px solid #3b6874; border-radius: 12px; box-shadow: 0 30px 100px #000e; animation: modalIn .2s ease; }.modal-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; color: #9db8c0; background: #071319; border: 1px solid #31545f; }
@keyframes modalIn { from { opacity: 0; transform: scale(.97) translateY(7px); } }
.tutorial-modal ul { display: grid; gap: 8px; margin: 20px 0; padding-left: 20px; color: #a7c2c8; }.tutorial-modal .text-action { margin-top: 8px; text-align: center; }.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 25px; }.shortcut-grid > div { display: grid; grid-template-columns: minmax(70px, auto) 1fr; align-items: center; gap: 10px; padding: 9px; background: #061218; border: 1px solid #193842; color: #9db8c0; font-size: .72rem; }
.notification-list { display: grid; gap: 8px; margin: 18px 0; }.notification-entry { display: grid; grid-template-columns: 8px 1fr; gap: 11px; padding: 11px; background: #061218; border: 1px solid #193842; }.notification-entry > i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--blue); }.notification-entry.research > i, .notification-entry.archive > i { background: var(--green); }.notification-entry strong { display: block; }.notification-entry p { margin: 4px 0; color: #8ca8b0; font-size: .72rem; }.notification-entry small { color: #5f7b84; font-size: .58rem; }
.toast-stack { position: fixed; top: 92px; right: 18px; z-index: 250; width: min(370px, calc(100vw - 30px)); display: grid; gap: 9px; }.toast { display: grid; grid-template-columns: 7px 1fr 25px; gap: 11px; padding: 13px; background: #0a1921f5; border: 1px solid #31545f; box-shadow: 0 15px 35px #000b; animation: toastIn .25s ease; }.toast > i { width: 6px; border-radius: 5px; background: var(--blue); }.toast.success > i { background: var(--green); }.toast.danger > i { background: var(--red); }.toast.warning > i { background: var(--orange); }.toast strong { display: block; }.toast p { margin: 4px 0 0; color: #8da9b1; font-size: .7rem; }.toast button { padding: 0; color: #78949d; background: transparent; }.toast.leaving { opacity: 0; transform: translateX(20px); }.toast { transition: .22s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }
.report-modal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }.report-modal-grid > div { padding: 10px; background: #061218; border: 1px solid #193842; }.report-modal-grid small { display: block; color: #65818a; font-size: .55rem; }.report-modal-grid strong, .report-modal-grid .outcome { margin-top: 5px; }.report-modal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 18px; }.report-modal-columns section { padding: 14px; background: #061218; border: 1px solid #193842; }.report-modal-columns h3 { margin: 0 0 7px; font-size: .9rem; }.report-modal-columns p, .report-modal-columns li { color: #8ca8b0; font-size: .72rem; }

.loading-screen, .fatal-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; }.loading-mark { display: flex; gap: 8px; margin-bottom: 20px; }.loading-mark i { width: 13px; height: 45px; background: var(--blue); animation: loadBars .9s ease-in-out infinite alternate; }.loading-mark i:nth-child(2) { background: var(--orange); animation-delay: .18s; }.loading-mark i:nth-child(3) { animation-delay: .36s; }.loading-screen p { color: #a6c0c7; }.loading-screen small { color: #526f78; font: 700 .6rem ui-monospace, monospace; }
@keyframes loadBars { to { transform: scaleY(.35); opacity: .45; } }
.fatal { max-width: 720px; padding: 35px; }.fatal p:not(.eyebrow) { color: #ffb2a8; white-space: pre-wrap; }

/* Combat layout integration */
.combat-mode .sidebar, .combat-mode .topbar { display: none; }.combat-mode { display: block; }.combat-mode .workspace { grid-column: 1; }.combat-mode .main-view { width: 100%; max-width: none; min-height: 100vh; display: grid; place-items: center; padding: 10px; }
.combat-shell { width: 100%; min-height: calc(100vh - 220px); display: grid; place-items: center; }
#game-container { width: min(100%, 1240px); border: 1px solid #3a6270; border-radius: 11px; overflow: hidden; box-shadow: 0 28px 80px #000d, 0 0 40px #58cfe50d; background: #061017; }
.combat-stage { position: relative; width: 100%; background: #061017; }
.combat-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #061017; }
.combat-overlay-host { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.combat-overlay-host > * { pointer-events: auto; }
.pause-panel { width: min(460px, 90%); padding: 30px; background: #06131bf2; }
.pause-panel p:not(.eyebrow) { color: var(--text-soft); line-height: 1.55; }
.pause-actions { display: grid; gap: 10px; margin-top: 22px; }

.cockpit-decision { position: absolute; inset: 0; display: grid; grid-template-columns: .92fr 1.35fr; grid-template-rows: auto 1fr; gap: 18px; align-content: center; padding: clamp(24px, 5vw, 72px); background: linear-gradient(90deg, #02080deb, #07131bc7 50%, #02080deb); }
.cockpit-warning { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 18px; border: 1px solid #b34d39; background: #4f1f1bd9; color: #ffd2c8; font: 900 .82rem ui-monospace, monospace; letter-spacing: .15em; box-shadow: 0 0 40px #ff5d4a25; }
.cockpit-warning strong { color: #fff; font-size: 1.45rem; }
.decision-copy { align-self: center; padding-right: 15px; }
.decision-copy h2 { margin: 6px 0 18px; font-size: clamp(1.8rem, 4vw, 3.6rem); color: #fff; line-height: .98; }
.decision-copy p:not(.eyebrow) { color: #b6d1d7; line-height: 1.62; }
.decision-options { display: grid; gap: 9px; align-self: center; }
.decision-option { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 13px; text-align: left; border: 1px solid #315764; background: #07151ee8; color: #eaf9fc; padding: 13px; }
.decision-option:hover:not(:disabled) { border-color: var(--orange); background: #132a33; transform: translateX(-3px); }
.decision-option:disabled { filter: grayscale(.8); }
.decision-key { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--orange); color: var(--orange-bright); font: 900 1rem ui-monospace, monospace; }
.decision-option strong { display: block; margin-bottom: 3px; }
.decision-option small { display: block; color: #8fabb3; line-height: 1.35; font-weight: 500; }
.decision-option em { display: block; margin-top: 4px; color: var(--orange); font-size: .68rem; font-style: normal; }

.result { max-width: 1050px; margin: 30px auto; padding: clamp(25px, 5vw, 50px); border-top: 4px solid var(--green); }
.result.defeat { border-top-color: var(--red); }
.result.withdrawal { border-top-color: var(--orange); }
.result > h2 { margin: 8px 0 31px; font-size: clamp(2rem, 5vw, 3.4rem); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.result-grid div { padding: 17px; border: 1px solid #254653; background: #061219; border-radius: 7px; display: grid; gap: 6px; }
.result-grid small { color: var(--text-soft); }
.result-grid strong { font-size: 1.35rem; }
.after-action { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.after-action > div { padding: 18px; border: 1px solid #24444f; border-radius: 8px; background: #07151c; }
.after-action h3 { margin-top: 0; }
.after-action p, .after-action li { color: #9ebdc4; line-height: 1.55; }

.loading { min-height: 100vh; display: grid; place-content: center; justify-items: center; color: var(--text-soft); }
.spinner { width: 46px; height: 46px; border: 4px solid #18343e; border-top-color: var(--orange); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fatal { max-width: 720px; margin: 80px auto; padding: 35px; }
.fatal p:not(.eyebrow) { color: #ffb2a8; white-space: pre-wrap; }


@media (max-width: 1380px) {
  .command-grid { grid-template-columns: 1.2fr .8fr; }
  .hero-command { grid-column: span 2; }
  .status-card { grid-row: auto; }
  .wide-card { grid-column: span 2; }
  .hangar-layout { grid-template-columns: minmax(260px, .75fr) minmax(430px, 1.25fr); }
  .telemetry-panel { grid-column: 1 / -1; }
  .tech-detail { grid-template-columns: 1fr 1fr 1fr; }
  .tech-detail blockquote, .tech-detail .primary { grid-column: 3; }
  .report-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  :root { --sidebar: 215px; }
  .mission-layout { grid-template-columns: 1fr; }
  .mission-sidebar { grid-template-columns: repeat(3, 1fr); }
  .mission-history { grid-column: 1; }
  .briefing-columns { grid-template-columns: 1fr 1fr; }
  .pilot-settings { grid-column: 1 / -1; }
  .hangar-layout { grid-template-columns: 1fr; }
  .inventory-panel { min-height: 430px; }.equipment-list { max-height: 360px; }
  .mech-stage { min-height: 600px; }
  .tech-inspector { left: calc(var(--sidebar) + 12px); right: 12px; }
  .archive-layout { grid-template-columns: 1fr; }.archive-list { max-height: 400px; }.archive-reader { min-height: 500px; }
  .result-metrics { grid-template-columns: repeat(3, 1fr); }.result-columns { grid-template-columns: 1fr 1fr; }.result-columns > article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  :root { --topbar: 66px; }
  .app-shell { display: block; }
  .workspace { grid-column: 1; }
  .sidebar { transform: translateX(-105%); transition: transform .23s ease; }
  .menu-open .sidebar { transform: translateX(0); }
  .mobile-close { display: block; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0; color: #9db8c0; background: #08151c; border: 1px solid #31545f; }
  .mobile-menu { display: block; width: 38px; height: 38px; padding: 0; color: #dceff3; background: #0b2028; border: 1px solid #31545f; }
  .mobile-scrim { display: none; position: fixed; inset: 0; z-index: 80; background: #020609bb; }.menu-open .mobile-scrim { display: block; }
  .topbar { padding: 0 12px; }.breadcrumb { display: none; }.resource-strip { margin-left: auto; gap: 13px; }.resource-strip > div:nth-child(1) { display: none; }
  .main-view { padding: 16px 10px 45px; }
  .command-grid { grid-template-columns: 1fr; }.hero-command, .wide-card { grid-column: 1; }.hero-command { grid-template-columns: 1fr; min-height: 500px; }.threat-radar { width: 210px; }
  .report-summary { grid-template-columns: 1fr 1fr; }.report-summary > div:last-child { grid-column: 1 / -1; }
  .mission-sidebar { grid-template-columns: 1fr; }.mission-facts { grid-template-columns: 1fr 1fr; }.history-row { grid-template-columns: 1fr auto; }.history-row > span:nth-child(2), .history-row > span:nth-child(4) { display: none; }
  .briefing-header { grid-template-columns: 1fr; }.mission-seal { width: 100px; }.briefing-columns { grid-template-columns: 1fr; }.pilot-settings { grid-column: 1; }.briefing-footer, .briefing-footer > div { align-items: stretch; flex-direction: column; }
  .hangar-toolbar { align-items: flex-start; flex-direction: column; }.toolbar-actions { width: 100%; justify-content: space-between; }.mech-stage { min-height: 520px; }.slot-label { max-width: 140px; }.hangar-mech { width: 92%; }
  .technology-page { padding-bottom: 0; }.tech-inspector { position: static; max-height: none; margin-top: 16px; }.tech-detail { grid-template-columns: 1fr 1fr; }.tech-detail > .eyebrow, .tech-detail > h2, .tech-detail > p { grid-column: 1 / -1; }.tech-detail blockquote, .tech-detail .primary { grid-column: 1 / -1; }
  .archives-header { flex-direction: column; }.archive-progress { border-left: 0; border-top: 1px solid #1d3d47; padding-top: 12px; }.report-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }.settings-card label { grid-template-columns: 1fr; }.toggle-row { grid-template-columns: 1fr auto !important; }
  .result-metrics { grid-template-columns: 1fr 1fr; }.result-columns { grid-template-columns: 1fr; }.result-columns > article:last-child { grid-column: 1; }.result-actions { flex-direction: column; }
  .cockpit-decision { grid-template-columns: 1fr; overflow-y: auto; align-content: start; }
}

@media (max-width: 540px) {
  .resource-strip > div:nth-child(2) { display: none; }
  .hero-command { padding: 22px; }.hero-actions { flex-direction: column; }.hero-actions button { width: 100%; }
  .mission-facts { grid-template-columns: 1fr; }.mission-map { height: 260px; }
  .inventory-tabs { grid-template-columns: repeat(3, 1fr); }.inventory-tabs button:nth-child(4), .inventory-tabs button:nth-child(5) { grid-column: span 1; }
  .mech-stage { min-height: 470px; }.slot-label { max-width: 118px; padding: 6px; }.slot-label strong { font-size: .55rem; }.slot-chassis { top: 12%; }.slot-shoulder { top: 12%; }.slot-left, .slot-right { top: 46%; }
  .comparison-metrics { grid-template-columns: 1fr; }.telemetry-numbers { grid-template-columns: 1fr; }
  .technology-header { flex-direction: column; }.research-bank { justify-items: start; }.tech-tree { grid-template-columns: repeat(5, 250px); }
  .archive-layout { display: block; }.archive-reader { margin-top: 15px; padding: 20px; }.reader-document header, .reader-document footer { flex-direction: column; }.report-grid { grid-template-columns: 1fr; }
  .shortcut-grid, .report-modal-grid, .report-modal-columns { grid-template-columns: 1fr; }
  .toast-stack { right: 8px; top: 74px; width: calc(100vw - 16px); }
  .cockpit-decision { padding: 15px; }.decision-copy h2 { font-size: 1.8rem; }.cockpit-warning { font-size: .65rem; }
}

/* --------------------------------------------------------------------------
   V0.3.5 — Fondation 3D
   -------------------------------------------------------------------------- */
.briefing-graphics {
  display: grid;
  gap: .75rem;
  align-content: start;
  min-width: 0;
}
.briefing-graphics h2 { margin: 0 0 .25rem; }
.briefing-graphics label { display: grid; gap: .35rem; color: var(--muted); font-size: .78rem; }
.briefing-graphics select { width: 100%; }
.webgpu-note { color: #7fa8b2; line-height: 1.45; }
.toggle-row.compact { padding: .65rem 0; }
.graphics-settings select { min-width: 9rem; }

.combat3d-stage {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: #02080c;
  overflow: hidden;
  color: #dff8ff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.combat3d-canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
  cursor: crosshair;
}
.combat3d-hud,
.combat3d-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.combat3d-overlay > * { pointer-events: auto; }
.hud3d-top {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: .8fr .8fr 1.4fr;
  background: linear-gradient(90deg, rgba(3,13,20,.92), rgba(6,25,34,.78), rgba(3,13,20,.92));
  border: 1px solid rgba(93,202,222,.35);
  box-shadow: 0 12px 44px rgba(0,0,0,.45), inset 0 0 30px rgba(44,164,191,.08);
  backdrop-filter: blur(10px);
  clip-path: polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%);
}
.hud3d-top section { padding: .55rem 1.1rem; border-right: 1px solid rgba(93,202,222,.18); display: grid; gap: .1rem; }
.hud3d-top section:last-child { border-right: 0; }
.hud3d-top small,
.hud3d-left small,
.hud3d-right small { color: #77aab5; font: 700 .63rem/1 ui-monospace, monospace; letter-spacing: .14em; }
.hud3d-top strong { font: 800 .76rem/1.3 ui-monospace, monospace; letter-spacing: .08em; color: #dbf9ff; }
.hud3d-left,
.hud3d-right {
  position: absolute;
  bottom: 3.7rem;
  width: min(300px, 27vw);
  padding: .85rem;
  background: linear-gradient(135deg, rgba(3,14,21,.94), rgba(7,28,36,.76));
  border: 1px solid rgba(79,199,221,.34);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
}
.hud3d-left { left: 1rem; border-left: 4px solid #53cce2; }
.hud3d-right { right: 1rem; border-right: 4px solid #f19442; }
.hud3d-left h3,
.hud3d-right h3 { margin: 0 0 .7rem; font: 900 .76rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.part3d,
.resource-row { display: grid; grid-template-columns: 58px 1fr 40px; gap: .45rem; align-items: center; margin: .34rem 0; font: 700 .64rem/1 ui-monospace, monospace; }
.part3d > i,
.resource-row > i,
.boss-bar { height: 7px; background: rgba(102,161,172,.18); overflow: hidden; border: 1px solid rgba(116,203,219,.16); }
.part3d b,
.resource-row b,
.boss-bar i { display: block; height: 100%; background: linear-gradient(90deg,#2b8aa0,#6de0ef); box-shadow: 0 0 10px rgba(93,219,239,.55); }
.resource-row.heat b { background: linear-gradient(90deg,#9a4c23,#ff9d3d,#ff5442); }
.boss-bar { height: 12px; margin-bottom: .4rem; }
.boss-bar i { background: linear-gradient(90deg,#7d211d,#e65a31,#ff9d3d); box-shadow: 0 0 15px rgba(255,122,54,.5); }
.weakpoint-list { display: grid; gap: .25rem; margin-top: .7rem; }
.weakpoint-list span { padding: .25rem .4rem; border-left: 2px solid #5d9dab; color: #aac9d0; font: 700 .61rem/1.2 ui-monospace, monospace; background: rgba(41,85,94,.16); }
.weakpoint-list span.exposed { border-color: #ff9d3d; color: #ffd09a; }
.weakpoint-list span.destroyed { border-color: #ff5a43; color: #ff826e; text-decoration: line-through; }
.weakpoint-list span.hidden { opacity: .48; }
.hud3d-bottom {
  position: absolute;
  left: 50%;
  bottom: .8rem;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  width: min(900px, calc(100vw - 2rem));
}
.hud3d-bottom span {
  padding: .35rem .62rem;
  background: rgba(3,14,20,.88);
  border: 1px solid rgba(89,187,205,.26);
  color: #a9d5dd;
  font: 700 .6rem/1 ui-monospace, monospace;
  letter-spacing: .05em;
}
.hud3d-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(255,160,67,.75);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255,150,61,.12);
}
.hud3d-reticle::before,
.hud3d-reticle::after { content: ''; position: absolute; background: rgba(255,174,86,.85); }
.hud3d-reticle::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
.hud3d-reticle::after { top: 50%; left: -8px; right: -8px; height: 1px; }
.hud3d-reticle span { position: absolute; top: 63px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #ffbd79; font: 700 .62rem ui-monospace, monospace; }
.hud3d-status,
.hud3d-banner,
.recon3d-prompt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(2,12,18,.92);
  border: 1px solid rgba(97,206,225,.32);
  box-shadow: 0 16px 42px rgba(0,0,0,.42);
  font-family: ui-monospace, monospace;
}
.hud3d-status { top: 7rem; padding: .5rem 1.2rem; color: #ffbd79; font-weight: 800; letter-spacing: .08em; }
.hud3d-banner { top: 42%; padding: 1rem 2.4rem; border-left: 6px solid #ff9d3d; color: white; font-size: clamp(1rem,2vw,1.6rem); font-weight: 900; letter-spacing: .1em; }
.recon3d-prompt { bottom: 8rem; display: flex; align-items: center; gap: .8rem; padding: .65rem 1rem; }
.recon3d-prompt strong { color: #ff9d3d; font-size: 1.35rem; }
.recon3d-prompt span { color: #bce7ee; font-size: .72rem; }
.hud3d-diagnostics {
  position: absolute;
  top: 5.4rem;
  right: 1rem;
  width: 220px;
  display: grid;
  gap: .22rem;
  padding: .75rem;
  background: rgba(0,8,12,.9);
  border: 1px solid rgba(95,218,238,.45);
  color: #a9d8e0;
  font: 700 .64rem/1.35 ui-monospace, monospace;
}
.hud3d-diagnostics strong { color: #ff9d3d; margin-bottom: .25rem; }
.hud3d-diagnostics small { color: #668e96; margin-top: .25rem; }
.combat3d-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .6rem;
  background: radial-gradient(circle at 50% 45%,#0a2732,#02080c 58%);
  text-align: center;
}
.combat3d-loading h2 { margin: 0; }
.combat3d-loading span { color: #719da7; font: 700 .68rem ui-monospace, monospace; }
.loading-ring { width: 58px; height: 58px; border: 3px solid rgba(94,214,235,.15); border-top-color: #ff9d3d; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cockpit-decision {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .7rem;
  padding: 2rem;
  background:
    linear-gradient(90deg,rgba(0,5,8,.88) 0 14%,transparent 26% 74%,rgba(0,5,8,.88) 86% 100%),
    radial-gradient(circle at center,rgba(5,22,29,.2),rgba(0,0,0,.68));
  text-align: center;
  overflow: hidden;
}
.cockpit-decision::before,
.cockpit-decision::after { content:''; position:absolute; top:0; bottom:0; width:3px; background:rgba(84,210,232,.35); transform:skewX(-7deg); }
.cockpit-decision::before { left:21%; }
.cockpit-decision::after { right:21%; }
.cockpit-decision h2 { margin: 0; color: #ff9d3d; font: 900 clamp(1.5rem,4vw,3rem)/1 ui-monospace, monospace; letter-spacing: .12em; text-shadow: 0 0 28px rgba(255,130,52,.45); }
.cockpit-decision > p:not(.eyebrow) { max-width: 680px; color: #d6eff4; }
.cockpit-scanlines { position:absolute; inset:0; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 4px,#91edff 5px 6px); pointer-events:none; }
.decision-timer { width:min(760px,90vw); height:7px; background:rgba(108,176,187,.16); border:1px solid rgba(130,218,232,.25); }
.decision-timer i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff5b43,#ff9d3d,#65ddeb); transition:width .08s linear; box-shadow:0 0 18px rgba(255,138,54,.7); }
.decision-grid { width:min(920px,94vw); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:.5rem; }
.decision-grid button { display:grid; grid-template-columns:42px 1fr; gap:.7rem; align-items:center; padding:.85rem; text-align:left; color:#ddf7fb; background:rgba(5,24,31,.9); border:1px solid rgba(101,210,228,.38); cursor:pointer; }
.decision-grid button:hover:not(:disabled) { border-color:#ff9d3d; background:rgba(46,31,20,.92); transform:translateY(-2px); }
.decision-grid button:disabled { opacity:.35; cursor:not-allowed; }
.decision-grid kbd { display:grid; place-items:center; width:34px; height:34px; border:1px solid #ff9d3d; color:#ffbd7c; background:#1c1510; }
.decision-grid span { display:grid; gap:.25rem; }
.decision-grid strong { font:800 .78rem ui-monospace,monospace; letter-spacing:.04em; }
.decision-grid small { color:#82adb6; font-size:.68rem; }

@media (max-width: 900px) {
  .briefing-columns { grid-template-columns: 1fr; }
  .hud3d-left,.hud3d-right { width: min(260px,44vw); bottom:4.3rem; }
  .hud3d-top { grid-template-columns:1fr 1fr; }
  .hud3d-top section:last-child { display:none; }
  .hud3d-diagnostics { top:5.6rem; width:190px; }
}
@media (max-width: 620px) {
  .hud3d-top { top:.4rem; width:calc(100vw - .8rem); }
  .hud3d-top section { padding:.42rem .55rem; }
  .hud3d-left,.hud3d-right { bottom:3.4rem; width:calc(50vw - .65rem); padding:.5rem; }
  .hud3d-left { left:.35rem; }.hud3d-right{right:.35rem;}
  .part3d,.resource-row { grid-template-columns:43px 1fr 31px; gap:.25rem; font-size:.53rem; }
  .weakpoint-list span:nth-child(n+3) { display:none; }
  .hud3d-bottom span:nth-child(n+4) { display:none; }
  .hud3d-reticle { width:40px;height:40px; }
  .decision-grid { grid-template-columns:1fr; }
  .cockpit-decision { padding:1rem; }
  .hud3d-banner { width:82vw; text-align:center; padding:.75rem 1rem; }
  .recon3d-prompt { width:84vw; justify-content:center; }
  .hud3d-diagnostics { right:.4rem; top:4.8rem; width:170px; font-size:.56rem; }
}