/*
 * Bio-War v4.0 — Design System Core
 * Stage 1: visual language, tokens, components, motion and responsive rules.
 */

:root {
  /* Brand */
  --ds-accent: #55f6a5;
  --ds-accent-rgb: 85, 246, 165;
  --ds-accent-2: #44d8ff;
  --ds-accent-3: #9d75ff;
  --ds-accent-strong: #a4ffd0;
  --ds-accent-ink: #031c12;

  /* Semantic */
  --ds-positive: #5ff0a6;
  --ds-warning: #ffc36b;
  --ds-negative: #ff7183;
  --ds-info: #62d8ff;

  /* Neutral surfaces */
  --ds-bg-0: #020504;
  --ds-bg-1: #040a07;
  --ds-bg-2: #07100c;
  --ds-bg-3: #0a1711;
  --ds-surface-1: rgba(8, 22, 15, .84);
  --ds-surface-2: rgba(11, 29, 20, .88);
  --ds-surface-3: rgba(17, 39, 28, .82);
  --ds-surface-soft: rgba(255, 255, 255, .035);
  --ds-surface-hover: rgba(var(--ds-accent-rgb), .085);
  --ds-surface-active: rgba(var(--ds-accent-rgb), .13);

  /* Content */
  --ds-text-1: #f3fff8;
  --ds-text-2: #b9d5c6;
  --ds-text-3: #789989;
  --ds-text-4: #4e6c5d;
  --ds-border-1: rgba(196, 255, 224, .075);
  --ds-border-2: rgba(var(--ds-accent-rgb), .15);
  --ds-border-3: rgba(var(--ds-accent-rgb), .30);

  /* Typography */
  --ds-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-mono: "SFMono-Regular", "Roboto Mono", ui-monospace, Consolas, monospace;
  --ds-weight-regular: 500;
  --ds-weight-medium: 650;
  --ds-weight-bold: 790;
  --ds-weight-black: 900;
  --ds-tracking-tight: -.035em;
  --ds-tracking-label: .13em;

  /* Spacing */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;

  /* Geometry */
  --ds-radius-xs: 9px;
  --ds-radius-sm: 13px;
  --ds-radius-md: 17px;
  --ds-radius-lg: 22px;
  --ds-radius-xl: 28px;
  --ds-radius-round: 999px;
  --ds-control-height: 50px;
  --ds-control-height-sm: 42px;
  --ds-nav-height: 68px;

  /* Depth */
  --ds-shadow-1: 0 10px 24px rgba(0, 0, 0, .25);
  --ds-shadow-2: 0 18px 46px rgba(0, 0, 0, .38);
  --ds-shadow-3: 0 28px 80px rgba(0, 0, 0, .58);
  --ds-glow: 0 0 28px rgba(var(--ds-accent-rgb), .12);
  --ds-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .035);
  --ds-blur: 18px;

  /* Motion */
  --ds-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ds-ease-emphasis: cubic-bezier(.16, 1, .3, 1);
  --ds-duration-fast: 140ms;
  --ds-duration: 240ms;
  --ds-duration-slow: 420ms;
}

body.ds-v4[data-accent="cyan"] {
  --ds-accent: #4ce3ff;
  --ds-accent-rgb: 76, 227, 255;
  --ds-accent-strong: #b9f6ff;
  --ds-accent-ink: #02191e;
}
body.ds-v4[data-accent="violet"] {
  --ds-accent: #a684ff;
  --ds-accent-rgb: 166, 132, 255;
  --ds-accent-strong: #ded1ff;
  --ds-accent-ink: #12092a;
}
body.ds-v4[data-accent="amber"] {
  --ds-accent: #ffc66c;
  --ds-accent-rgb: 255, 198, 108;
  --ds-accent-strong: #ffe4b6;
  --ds-accent-ink: #241301;
}

/* Foundation */
html {
  background: var(--ds-bg-0);
  color-scheme: dark;
}
body.ds-v4 {
  background:
    radial-gradient(circle at 50% -22%, rgba(var(--ds-accent-rgb), .12), transparent 38%),
    radial-gradient(circle at 105% 72%, rgba(108, 76, 255, .09), transparent 34%),
    linear-gradient(180deg, var(--ds-bg-1), var(--ds-bg-0) 44%);
  color: var(--ds-text-1);
  font-family: var(--ds-font-ui);
  font-weight: var(--ds-weight-regular);
  letter-spacing: -.008em;
}
body.ds-v4::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image:
    linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}
body.ds-v4 .ambient {
  background:
    radial-gradient(circle at 52% -12%, rgba(var(--ds-accent-rgb), .10), transparent 40%),
    radial-gradient(circle at 88% 76%, rgba(123, 85, 255, .075), transparent 38%),
    transparent;
}
body.ds-v4 .ambient::after { opacity: .06; }
body.ds-v4 .ambient i { opacity: .055; filter: blur(110px); }
body.ds-v4 #app { isolation: isolate; }
body.ds-v4 ::selection { color: var(--ds-accent-ink); background: var(--ds-accent); }

/* Type hierarchy */
body.ds-v4 h1,
body.ds-v4 h2,
body.ds-v4 h3,
body.ds-v4 h4 {
  font-family: var(--ds-font-display);
  color: var(--ds-text-1);
  font-weight: var(--ds-weight-black);
  letter-spacing: var(--ds-tracking-tight);
  text-wrap: balance;
}
body.ds-v4 p { color: var(--ds-text-3); }
body.ds-v4 .eyebrow,
body.ds-v4 .wizard-step > small,
body.ds-v4 .view-hero small,
body.ds-v4 .section-title small,
body.ds-v4 .sheet header small,
body.ds-v4 .command-center-head small,
body.ds-v4 .corp-entry-card > small {
  color: color-mix(in srgb, var(--ds-accent) 84%, white 10%);
  font-family: var(--ds-font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: var(--ds-tracking-label);
  text-transform: uppercase;
}
body.ds-v4 .eyebrow b,
body.ds-v4 .live-dot {
  background: var(--ds-accent);
  box-shadow: 0 0 14px rgba(var(--ds-accent-rgb), .72);
}

/* Shared game surface */
body.ds-v4 :is(
  .glass-panel,.specimen-stage,.living-scene,.view-hero,.command-center,
  .combat-console,.attack-panel,.infection-section,.map-console,.sector-console,
  .operations-section,.corp-entry-card,.corp-directory-section,.corp-command-card,
  .corp-contribution-panel,.corp-bonuses-panel,.corp-tech-section,.corp-members-section,
  .corp-activity-section,.achievement-section,.collection-section,.profile-card,
  .profile-hero,.branch,.sheet > section
) {
  border-color: var(--ds-border-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 28%),
    linear-gradient(145deg, var(--ds-surface-2), var(--ds-surface-1));
  box-shadow: var(--ds-inner-highlight), var(--ds-shadow-1);
}
body.ds-v4 :is(
  .glass-panel,.specimen-stage,.living-scene,.view-hero,.command-center,
  .combat-console,.attack-panel,.infection-section,.map-console,.sector-console,
  .operations-section,.corp-directory-section,.corp-command-card,.corp-contribution-panel,
  .corp-bonuses-panel,.corp-tech-section,.corp-members-section,.corp-activity-section,
  .achievement-section,.collection-section,.profile-card,.profile-hero
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
body.ds-v4 :is(
  .glass-panel,.specimen-stage,.living-scene,.view-hero,.command-center,
  .combat-console,.attack-panel,.infection-section,.map-console,.sector-console,
  .operations-section,.corp-directory-section,.corp-command-card,.corp-contribution-panel,
  .corp-bonuses-panel,.corp-tech-section,.corp-members-section,.corp-activity-section,
  .achievement-section,.collection-section,.profile-card,.profile-hero
)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 8% 0%, rgba(var(--ds-accent-rgb), .055), transparent 30%);
}

/* App chrome */
body.ds-v4 .game-header,
body.ds-v4 .simple-header {
  padding: 12px 14px;
  border: 1px solid var(--ds-border-1);
  border-radius: var(--ds-radius-lg);
  background: rgba(4, 13, 9, .74);
  backdrop-filter: blur(var(--ds-blur));
  box-shadow: var(--ds-inner-highlight), 0 14px 36px rgba(0,0,0,.22);
}
body.ds-v4 .game-header h2,
body.ds-v4 .simple-header h2 {
  font-size: clamp(22px, 6vw, 29px);
  line-height: 1;
}
body.ds-v4 .game-header p { color: var(--ds-text-3); }
body.ds-v4 .header-actions { gap: 8px; }
body.ds-v4 .round-button,
body.ds-v4 .connection-badge {
  border-color: var(--ds-border-2);
  background: rgba(255,255,255,.035);
  box-shadow: var(--ds-inner-highlight);
}
body.ds-v4 .round-button {
  color: var(--ds-text-2);
  border-radius: var(--ds-radius-sm);
}
body.ds-v4 .connection-badge.online {
  color: var(--ds-positive);
  background: rgba(95,240,166,.065);
}

/* HUD resources */
body.ds-v4 .resource-rack { gap: 9px; }
body.ds-v4 .resource-rack > div {
  min-height: 67px;
  padding: 11px 12px;
  border-color: var(--ds-border-1);
  border-radius: var(--ds-radius-md);
  background:
    linear-gradient(145deg, rgba(var(--ds-accent-rgb), .038), transparent 58%),
    rgba(5,16,11,.82);
  box-shadow: var(--ds-inner-highlight);
  transition: border-color var(--ds-duration), transform var(--ds-duration) var(--ds-ease-standard), background var(--ds-duration);
}
body.ds-v4 .resource-rack > div:hover { border-color: var(--ds-border-2); }
body.ds-v4 .resource-rack i {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(var(--ds-accent-rgb), .07);
  font-size: 17px;
}
body.ds-v4 .resource-rack span { color: var(--ds-text-2); font-size: 9px; }
body.ds-v4 .resource-rack small { color: var(--ds-text-4); font-size: 7px; }
body.ds-v4 .resource-rack b {
  color: var(--ds-text-1);
  font-family: var(--ds-font-mono);
  font-size: 13px;
  font-weight: 850;
}

/* Buttons */
body.ds-v4 button {
  border-radius: var(--ds-radius-sm);
  font-weight: var(--ds-weight-bold);
  transition:
    transform var(--ds-duration-fast) var(--ds-ease-standard),
    border-color var(--ds-duration),
    background var(--ds-duration),
    color var(--ds-duration),
    box-shadow var(--ds-duration),
    opacity var(--ds-duration);
}
body.ds-v4 button:not(:disabled):active { transform: translateY(1px) scale(.985); }
body.ds-v4 button:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 3px;
}
body.ds-v4 .primary,
body.ds-v4 .activate-button,
body.ds-v4 .collect-button {
  color: var(--ds-accent-ink);
  border: 1px solid color-mix(in srgb, var(--ds-accent) 60%, white 12%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 46%),
    linear-gradient(135deg, var(--ds-accent), color-mix(in srgb, var(--ds-accent) 70%, #18b36a));
  box-shadow: 0 10px 28px rgba(var(--ds-accent-rgb), .14), inset 0 1px 0 rgba(255,255,255,.42);
}
body.ds-v4 .primary:not(:disabled):hover,
body.ds-v4 .activate-button:not(:disabled):hover,
body.ds-v4 .collect-button:not(:disabled):hover {
  box-shadow: 0 14px 34px rgba(var(--ds-accent-rgb), .20), inset 0 1px 0 rgba(255,255,255,.48);
}
body.ds-v4 .secondary,
body.ds-v4 .mini-ghost,
body.ds-v4 .section-title button,
body.ds-v4 .corp-role-control button {
  color: var(--ds-text-2);
  border: 1px solid var(--ds-border-1);
  background: rgba(255,255,255,.035);
  box-shadow: var(--ds-inner-highlight);
}
body.ds-v4 .secondary:not(:disabled):hover,
body.ds-v4 .mini-ghost:not(:disabled):hover,
body.ds-v4 .section-title button:not(:disabled):hover {
  color: var(--ds-text-1);
  border-color: var(--ds-border-3);
  background: var(--ds-surface-hover);
}
body.ds-v4 .danger-action {
  color: #ffc2ca;
  border-color: rgba(255,113,131,.25);
  background: rgba(255,113,131,.055);
}
body.ds-v4 .activate-button,
body.ds-v4 .collect-button {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: var(--ds-radius-md);
}
body.ds-v4 .activate-button > i,
body.ds-v4 .collect-button > i {
  color: currentColor;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.08);
}
body.ds-v4 .activate-button small,
body.ds-v4 .collect-button small { color: color-mix(in srgb, var(--ds-accent-ink) 72%, transparent); }
body.ds-v4 button.busy::after { border-top-color: var(--ds-accent); }

/* Form controls */
body.ds-v4 input,
body.ds-v4 select {
  min-height: var(--ds-control-height);
  border: 1px solid var(--ds-border-1);
  border-radius: var(--ds-radius-sm);
  background: rgba(1,7,4,.58);
  color: var(--ds-text-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
  transition: border-color var(--ds-duration), box-shadow var(--ds-duration), background var(--ds-duration);
}
body.ds-v4 input::placeholder { color: var(--ds-text-4); }
body.ds-v4 input:focus,
body.ds-v4 select:focus {
  outline: none;
  border-color: var(--ds-border-3);
  background: rgba(4,15,10,.78);
  box-shadow: 0 0 0 3px rgba(var(--ds-accent-rgb), .065);
}
body.ds-v4 label { color: var(--ds-text-2); }
body.ds-v4 .toggle-row,
body.ds-v4 .quality-row {
  border-color: var(--ds-border-1);
  background: rgba(255,255,255,.025);
}
body.ds-v4 .toggle-row input:checked + i { background: rgba(var(--ds-accent-rgb), .21); }
body.ds-v4 .toggle-row input:checked + i::after { background: var(--ds-accent); box-shadow: 0 0 12px rgba(var(--ds-accent-rgb), .34); }

/* Selection controls */
body.ds-v4 .class-card,
body.ds-v4 .option,
body.ds-v4 .attempt-chip {
  border-color: var(--ds-border-1);
  background: rgba(255,255,255,.025);
  color: var(--ds-text-3);
  box-shadow: var(--ds-inner-highlight);
}
body.ds-v4 .class-card.active,
body.ds-v4 .option.active,
body.ds-v4 .attempt-chip.active {
  color: var(--ds-accent-strong);
  border-color: var(--ds-border-3);
  background: var(--ds-surface-active);
  box-shadow: inset 0 0 0 1px rgba(var(--ds-accent-rgb), .055), var(--ds-glow);
}
body.ds-v4 .class-card i { color: var(--ds-accent); }
body.ds-v4 .color.active { outline-color: var(--ds-accent-strong); }

/* Cards and list items */
body.ds-v4 :is(
  .operation-card,.module-card,.action-card,.target-card,.status-card,.history-card,
  .expedition-card,.operation-history-card,.corp-directory-card,.corp-tech-card,
  .corp-member-card,.corp-activity-card,.achievement-card,.title-card,.skill-row
) {
  border-color: var(--ds-border-1);
  border-radius: var(--ds-radius-md);
  background:
    linear-gradient(135deg, rgba(var(--ds-accent-rgb), .028), transparent 56%),
    rgba(255,255,255,.024);
  box-shadow: var(--ds-inner-highlight);
}
body.ds-v4 :is(
  .operation-card,.module-card,.action-card,.target-card,.expedition-card,
  .operation-history-card,.corp-directory-card,.corp-tech-card,.achievement-card,.title-card
):not(:disabled):hover {
  border-color: var(--ds-border-2);
  background:
    linear-gradient(135deg, rgba(var(--ds-accent-rgb), .065), transparent 58%),
    rgba(255,255,255,.035);
}
body.ds-v4 .operation-card > i,
body.ds-v4 .module-card > i,
body.ds-v4 .action-card > i,
body.ds-v4 .expedition-icon,
body.ds-v4 .operation-history-icon,
body.ds-v4 .corp-entry-icon,
body.ds-v4 .achievement-head > i {
  color: var(--ds-accent);
  border-color: var(--ds-border-2);
  background: rgba(var(--ds-accent-rgb), .065);
}
body.ds-v4 .module-card em,
body.ds-v4 .evo-node em { color: var(--ds-accent-strong); }
body.ds-v4 .target-card.active,
body.ds-v4 .title-card.selected {
  border-color: var(--ds-border-3);
  background: var(--ds-surface-active);
  box-shadow: var(--ds-glow), var(--ds-inner-highlight);
}
body.ds-v4 .empty-state,
body.ds-v4 .action-center-empty,
body.ds-v4 .sector-requirement {
  border-color: var(--ds-border-1);
  background: rgba(255,255,255,.018);
  color: var(--ds-text-3);
  border-radius: var(--ds-radius-md);
}

/* Section headers */
body.ds-v4 .section-title { align-items: center; gap: 12px; }
body.ds-v4 .section-title h3 { font-size: 19px; line-height: 1.05; }
body.ds-v4 .section-title button { min-height: 38px; padding: 0 12px; border-radius: 11px; }
body.ds-v4 .view-hero { padding: 20px; border-radius: var(--ds-radius-xl); }
body.ds-v4 .view-hero h3 { font-size: clamp(24px, 7vw, 32px); }
body.ds-v4 .view-hero p { color: var(--ds-text-3); line-height: 1.5; }
body.ds-v4 .evo-points,
body.ds-v4 .corp-level-badge,
body.ds-v4 .sector-risk,
body.ds-v4 .attack-chance {
  border-color: var(--ds-border-2);
  background: rgba(var(--ds-accent-rgb), .06);
  box-shadow: var(--ds-inner-highlight);
}
body.ds-v4 .evo-points span,
body.ds-v4 .sector-risk b { color: var(--ds-accent); }

/* Progress and meters */
body.ds-v4 :is(.meter,.expedition-progress,.achievement-progress,.corp-xp-line > span,.upgrade-progress > span,.loader) {
  height: 7px;
  border-radius: var(--ds-radius-round);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
body.ds-v4 :is(.meter i,.expedition-progress i,.achievement-progress i,.corp-xp-line i,.upgrade-progress i) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ds-accent) 72%, #1cbf70), var(--ds-accent-strong));
  box-shadow: 0 0 14px rgba(var(--ds-accent-rgb), .28);
}

/* Laboratory */
body.ds-v4 .living-scene {
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 43%, rgba(var(--ds-accent-rgb), .17), transparent 27%),
    radial-gradient(circle at 50% 100%, rgba(95,75,255,.06), transparent 38%),
    linear-gradient(180deg, #07150e, #020504 88%);
}
body.ds-v4 .scene-grid { opacity: .13; }
body.ds-v4 .hotspot,
body.ds-v4 .reactor-console {
  border-color: var(--ds-border-1);
  background: rgba(4, 15, 10, .79);
  box-shadow: var(--ds-inner-highlight), 0 10px 24px rgba(0,0,0,.26);
}
body.ds-v4 .hotspot i { color: var(--ds-accent); }
body.ds-v4 .tube {
  border-color: var(--ds-border-2);
  box-shadow: inset 0 0 64px rgba(var(--ds-accent-rgb), .07), 0 0 58px rgba(var(--ds-accent-rgb), .075);
}
body.ds-v4 .scan-line { background: linear-gradient(90deg, transparent, var(--ds-accent), transparent); box-shadow: 0 0 14px var(--ds-accent); }

/* Map */
body.ds-v4 .operations-map {
  border-color: var(--ds-border-2);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--ds-accent-rgb), .095), transparent 25%),
    linear-gradient(180deg, rgba(5,18,12,.96), rgba(1,6,4,.99));
  box-shadow: inset 0 0 80px rgba(var(--ds-accent-rgb), .025);
}
body.ds-v4 .sector-node {
  border-color: var(--ds-border-2);
  background: rgba(4, 17, 11, .91);
  box-shadow: var(--ds-shadow-1), var(--ds-inner-highlight);
}
body.ds-v4 .sector-node i { color: var(--ds-accent); }
body.ds-v4 .sector-node.selected {
  border-color: var(--ds-border-3);
  background: rgba(var(--ds-accent-rgb), .13);
  box-shadow: var(--ds-glow), var(--ds-inner-highlight);
}
body.ds-v4 .map-core {
  border-color: var(--ds-border-3);
  background: rgba(var(--ds-accent-rgb), .13);
  box-shadow: 0 0 48px rgba(var(--ds-accent-rgb), .14), inset 0 0 24px rgba(var(--ds-accent-rgb), .09);
}
body.ds-v4 .map-core b { color: var(--ds-accent-strong); }
body.ds-v4 .map-links path,
body.ds-v4 .map-links circle { stroke: rgba(var(--ds-accent-rgb), .18); }

/* Corporation */
body.ds-v4 .corp-xp-line i { background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-strong)); }
body.ds-v4 .corp-tech-card button,
body.ds-v4 .claim-expedition {
  min-height: var(--ds-control-height-sm);
  color: var(--ds-accent-strong);
  border-color: var(--ds-border-2);
  background: rgba(var(--ds-accent-rgb), .065);
}
body.ds-v4 .corp-role-control button.active { color: var(--ds-accent-strong); border-color: var(--ds-border-3); background: var(--ds-surface-active); }

/* Bottom navigation */
body.ds-v4 .bottom-nav {
  min-height: var(--ds-nav-height);
  padding: 7px;
  gap: 3px;
  border-color: var(--ds-border-2);
  border-radius: 24px;
  background: rgba(3, 11, 7, .86);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: var(--ds-shadow-2), var(--ds-inner-highlight), 0 0 0 1px rgba(0,0,0,.18);
}
body.ds-v4 .bottom-nav button {
  position: relative;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: 17px;
  color: var(--ds-text-4);
  background: transparent;
}
body.ds-v4 .bottom-nav button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: var(--ds-accent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.3);
  transition: opacity var(--ds-duration), transform var(--ds-duration) var(--ds-ease-emphasis);
}
body.ds-v4 .bottom-nav button.active {
  color: var(--ds-accent-strong);
  border-color: var(--ds-border-2);
  background:
    linear-gradient(180deg, rgba(var(--ds-accent-rgb), .105), rgba(var(--ds-accent-rgb), .045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 20px rgba(var(--ds-accent-rgb), .055);
}
body.ds-v4 .bottom-nav button.active::before { opacity: 1; transform: translateX(-50%) scaleX(1); }
body.ds-v4 .bottom-nav i { font-size: 17px; }
body.ds-v4 .bottom-nav span { color: currentColor; font-size: 7px; font-weight: 750; }

/* Sheets, tutorial and toast */
body.ds-v4 .sheet-backdrop,
body.ds-v4 .tutorial-backdrop { background: rgba(0, 4, 2, .76); backdrop-filter: blur(7px); }
body.ds-v4 .sheet > section,
body.ds-v4 .tutorial-card {
  border-color: var(--ds-border-2);
  background:
    linear-gradient(180deg, rgba(var(--ds-accent-rgb), .045), transparent 20%),
    linear-gradient(180deg, #0a1811, #030805);
  box-shadow: var(--ds-shadow-3), var(--ds-inner-highlight);
}
body.ds-v4 .sheet > section { border-radius: 30px 30px 0 0; }
body.ds-v4 .sheet header button {
  border-color: var(--ds-border-1);
  background: rgba(255,255,255,.035);
  color: var(--ds-text-2);
}
body.ds-v4 .module-emblem {
  color: var(--ds-accent);
  border-color: var(--ds-border-2);
  background: rgba(var(--ds-accent-rgb), .055);
}
body.ds-v4 .toast {
  border-color: var(--ds-border-3);
  background: rgba(5, 18, 12, .95);
  color: var(--ds-accent-strong);
  box-shadow: var(--ds-shadow-2), var(--ds-inner-highlight);
  backdrop-filter: blur(18px);
}
body.ds-v4 .offline-banner { border-color: rgba(255,113,131,.3); background: rgba(34,6,11,.96); }

/* Loading */
body.ds-v4 .boot-mark span,
body.ds-v4 .status-orb {
  color: var(--ds-accent);
  border-color: var(--ds-border-3);
  background: rgba(var(--ds-accent-rgb), .07);
  box-shadow: inset 0 0 34px rgba(var(--ds-accent-rgb), .08), 0 0 50px rgba(var(--ds-accent-rgb), .075);
}
body.ds-v4 .boot-screen h1 em { color: var(--ds-accent); }
body.ds-v4 .loader span { background: linear-gradient(90deg, transparent, var(--ds-accent), transparent); }

/* Motion */
body.ds-v4 .view.active { animation: dsViewEnter var(--ds-duration-slow) var(--ds-ease-emphasis) both; }
body.ds-v4 :is(.resource-rack > div,.module-card,.operation-card,.action-card,.target-card,.achievement-card,.title-card,.sector-node) {
  transition:
    transform var(--ds-duration) var(--ds-ease-standard),
    border-color var(--ds-duration),
    background var(--ds-duration),
    box-shadow var(--ds-duration),
    opacity var(--ds-duration);
}
body.ds-v4 .sheet.open > section { animation: dsSheetEnter var(--ds-duration-slow) var(--ds-ease-emphasis) both; }
@keyframes dsViewEnter { from { opacity: 0; transform: translate3d(0, 9px, 0) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes dsSheetEnter { from { opacity: .65; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 760px) {
  body.ds-v4 .game-header,
  body.ds-v4 .simple-header { padding: 11px 12px; border-radius: 19px; }
  body.ds-v4 .view-hero { padding: 17px; border-radius: 23px; }
  body.ds-v4 .resource-rack > div { min-height: 64px; padding: 10px; }
  body.ds-v4 .bottom-nav { width: calc(100% - 14px); }
}
@media (max-width: 430px) {
  body.ds-v4 .screen { padding-left: 10px; padding-right: 10px; }
  body.ds-v4 .resource-rack { gap: 6px; }
  body.ds-v4 .resource-rack > div { grid-template-columns: auto 1fr; align-content: center; }
  body.ds-v4 .resource-rack > div > b { grid-column: 2; margin-top: -2px; }
  body.ds-v4 .resource-rack i { grid-row: 1 / 3; }
  body.ds-v4 .resource-rack small { display: none; }
  body.ds-v4 .resource-rack span { font-size: 8px; }
  body.ds-v4 .resource-rack b { font-size: 11px; }
  body.ds-v4 .view-hero h3 { font-size: 25px; }
  body.ds-v4 .section-title h3 { font-size: 18px; }
  body.ds-v4 .bottom-nav { border-radius: 21px; }
  body.ds-v4 .bottom-nav button { min-height: 50px; padding: 5px 1px; border-radius: 14px; }
  body.ds-v4 .bottom-nav span { font-size: 6.2px; }
}
@media (max-width: 350px) {
  body.ds-v4 .bottom-nav span { display: none; }
  body.ds-v4 .bottom-nav i { font-size: 18px; }
  body.ds-v4 .bottom-nav button { min-height: 45px; }
}
@media (hover: hover) and (pointer: fine) {
  body.ds-v4 button:not(:disabled):hover { filter: none; }
  body.ds-v4 :is(.module-card,.operation-card,.action-card,.target-card,.achievement-card,.title-card,.sector-node):not(:disabled):hover {
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.ds-v4 .view.active,
  body.ds-v4 .sheet.open > section { animation: none; }
}