/*
 * Man O' War Fleet Builder — VISUAL-3 merge-candidate stylesheet.
 * Consolidated from the manually accepted VISUAL-2D.3 cascade.
 * Section order is intentional and preserves the accepted cascade.
 */

/* ==========================================================================
   FOUNDATION AND PRIMARY SURFACES
   Source lineage: mow_builder_visual1_theme.css
   ========================================================================== */

/*
 * Man O' War Fleet Builder — VISUAL-1 experimental branch
 * Ecosystem shell aligned with Card Tool and Game Companion.
 *
 * Scope discipline:
 * - every rule is gated by body.mow-ecosystem-visual;
 * - no public contract, persistence, identifiers or application logic are touched;
 * - layout geometry, DOM order and responsive breakpoints remain owned by HOTFIX-90F.
 */

@media screen {
  body.mow-ecosystem-visual {
    --eco-bg: #08141b;
    --eco-bg-deep: #061016;
    --eco-panel: #0e202a;
    --eco-panel-2: #132a35;
    --eco-panel-3: #0a1921;
    --eco-white: #f7f2e8;
    --eco-sidebar-muted: #91a4ae;
    --eco-paper: #efe3c6;
    --eco-paper-2: #e3d1aa;
    --eco-paper-3: #f7eed9;
    --eco-ink: #172027;
    --eco-ink-muted: #665c4c;
    --eco-paper-line: #796746;
    --eco-action: #7b2935;
    --eco-action-dark: #541b25;
    --eco-gold: #c4a24b;
    --eco-sea: #275d6b;
    --eco-sea-dark: #173d48;
    --eco-ok: #2e744e;
    --eco-warn: #8b651d;
    --eco-danger: #8b3340;
    --eco-shadow: 0 24px 70px rgba(0, 0, 0, .36);
    min-height: 100vh;
    color: var(--eco-white);
    background:
      radial-gradient(circle at 20% -10%, rgba(77, 129, 145, .22), transparent 34%),
      radial-gradient(circle at 105% 10%, rgba(151, 83, 54, .16), transparent 30%),
      linear-gradient(160deg, #071218, #0b1a22 58%, #071117);
    font-size: 15px;
    line-height: 1.42;
  }

  body.mow-ecosystem-visual::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
  }

  /* Shared ecosystem masthead without changing Builder information architecture. */
  body.mow-ecosystem-visual > header {
    padding: 24px 22px 15px;
    color: var(--eco-white);
    background:
      radial-gradient(circle at 50% -90%, rgba(196,162,75,.12), transparent 48%),
      linear-gradient(180deg, rgba(16,35,45,.99), rgba(7,20,27,.97));
    border-bottom: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
  }

  body.mow-ecosystem-visual > header::after {
    height: 3px;
    opacity: 1;
    background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--accent) 74%, var(--eco-gold) 26%) 18%,
      var(--eco-gold) 50%,
      color-mix(in srgb, var(--accent) 74%, var(--eco-gold) 26%) 82%,
      transparent
    );
  }

  body.mow-ecosystem-visual > header h1 {
    margin: 0 0 8px;
    color: var(--eco-white);
    font: 700 clamp(23px, 2.2vw, 30px)/1.08 Georgia, "Times New Roman", serif;
    letter-spacing: .01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
  }

  body.mow-ecosystem-visual .brand-link {
    color: #f4dfaa;
    text-decoration-color: rgba(196,162,75,.48);
    text-underline-offset: 4px;
  }

  body.mow-ecosystem-visual .brand-link:hover,
  body.mow-ecosystem-visual .brand-link:focus-visible {
    color: #fff3cf;
    text-decoration-color: var(--eco-gold);
  }

  body.mow-ecosystem-visual > header > div:last-child {
    color: var(--eco-sidebar-muted);
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
  }

  body.mow-ecosystem-visual #current-fleet-name {
    display: inline-block;
    margin-left: 4px;
    padding: 3px 9px 4px;
    color: var(--eco-white);
    border: 1px solid color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.16));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.045));
    box-shadow: none;
    font-family: Georgia, "Times New Roman", serif;
  }

  body.mow-ecosystem-visual .langSwitch {
    margin-top: 11px;
  }

  body.mow-ecosystem-visual .langBtn {
    min-width: 42px;
    padding: 6px 10px;
    color: #dfe8ec;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    box-shadow: none;
    font-size: 11px;
    letter-spacing: .08em;
  }

  body.mow-ecosystem-visual .langBtn:hover,
  body.mow-ecosystem-visual .langBtn:focus-visible {
    color: #fff;
    border-color: rgba(196,162,75,.48);
    background: rgba(196,162,75,.08);
  }

  body.mow-ecosystem-visual .langBtn.active,
  body.mow-ecosystem-visual .langBtn[aria-pressed="true"] {
    color: #f4dfaa;
    border-color: rgba(196,162,75,.58);
    background: rgba(196,162,75,.11);
    box-shadow: 0 0 0 2px rgba(196,162,75,.07);
  }

  /* Existing geometry stays unchanged; only the visual shell is refined. */
  body.mow-ecosystem-visual .wrap {
    padding-top: 20px;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-bar {
    margin-top: 12px;
    padding: 11px 14px;
    color: var(--eco-white);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(19,42,53,.88), rgba(10,25,33,.9));
    box-shadow: 0 14px 34px rgba(0,0,0,.2);
  }

  body.mow-ecosystem-visual .mow-fleet-actions-status {
    color: var(--eco-sidebar-muted);
  }

  body.mow-ecosystem-visual #mowFleetActiveName {
    color: var(--eco-white);
  }

  /* Parchment work surfaces shared by Card Tool and Game Companion. */
  body.mow-ecosystem-visual .card,
  body.mow-ecosystem-visual .kpi {
    --text: var(--eco-ink);
    --muted: var(--eco-ink-muted);
    --stroke: rgba(91,75,51,.54);
    --stroke2: rgba(91,75,51,.26);
    position: relative;
    color: var(--eco-ink);
    border-color: rgba(91,75,51,.72);
    background:
      radial-gradient(circle at 18% 0%, rgba(255,255,255,.58), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 22%),
      linear-gradient(145deg, var(--eco-paper-3), var(--eco-paper));
    box-shadow: var(--eco-shadow);
  }

  body.mow-ecosystem-visual .card {
    border-radius: 18px;
  }

  body.mow-ecosystem-visual .card::before,
  body.mow-ecosystem-visual .kpi::before {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(77,58,34,.22);
    border-radius: 12px;
  }

  body.mow-ecosystem-visual .card > *,
  body.mow-ecosystem-visual .kpi > * {
    position: relative;
    z-index: 1;
  }

  body.mow-ecosystem-visual .card .hd {
    min-height: 49px;
    padding: 13px 16px;
    color: #fff;
    border-bottom: 3px double rgba(255,255,255,.34);
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 18%, var(--eco-action-dark) 82%),
        color-mix(in srgb, var(--accent) 10%, var(--eco-panel) 90%) 58%,
        rgba(77,64,45,.88)
      );
    font: 800 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  body.mow-ecosystem-visual .card .hd::after {
    display: none;
  }

  body.mow-ecosystem-visual .card .hd small,
  body.mow-ecosystem-visual .card .hd .muted {
    color: rgba(255,255,255,.72);
  }

  body.mow-ecosystem-visual .card .bd {
    padding-top: 16px;
  }

  body.mow-ecosystem-visual .section + .section,
  body.mow-ecosystem-visual #unitsRoot .section:first-child,
  body.mow-ecosystem-visual #sec_allies {
    border-top-color: rgba(91,75,51,.26);
  }

  body.mow-ecosystem-visual .section h3 {
    color: color-mix(in srgb, var(--accent) 22%, var(--eco-action-dark) 78%);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .14em;
  }

  body.mow-ecosystem-visual .section h3::after {
    content: "";
    display: inline-block;
    width: 64px;
    height: 2px;
    margin: 0 0 3px 10px;
    background: color-mix(in srgb, var(--accent) 42%, var(--eco-gold) 58%);
    opacity: .92;
  }

  body.mow-ecosystem-visual .title,
  body.mow-ecosystem-visual .check-text {
    color: var(--eco-ink);
  }

  body.mow-ecosystem-visual .desc,
  body.mow-ecosystem-visual .muteline,
  body.mow-ecosystem-visual .note,
  body.mow-ecosystem-visual .muted {
    color: var(--eco-ink-muted);
  }

  body.mow-ecosystem-visual .pts {
    color: color-mix(in srgb, var(--accent) 62%, #33251f 38%);
    text-shadow: none;
  }

  /* Core setup cards remain in the accepted order and dimensions. */
  body.mow-ecosystem-visual #mowFleetSelectorBlock,
  body.mow-ecosystem-visual #mowBatch90bRuleset,
  body.mow-ecosystem-visual .mowSetupGroup {
    color: var(--eco-ink);
    border-color: rgba(91,75,51,.46);
    background: rgba(255,251,239,.46);
    box-shadow: inset 0 1px rgba(255,255,255,.58);
  }

  body.mow-ecosystem-visual #mowFleetSelectorBlock {
    border-color: color-mix(in srgb, var(--accent) 42%, rgba(91,75,51,.58));
    background:
      radial-gradient(circle at 95% -50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 46%),
      rgba(255,251,239,.66);
  }

  body.mow-ecosystem-visual #mowBatch90bRuleset {
    background: rgba(255,251,239,.35);
  }

  body.mow-ecosystem-visual .mowSetupGroupHeader {
    color: var(--eco-ink);
    background: rgba(255,255,255,.24);
  }

  body.mow-ecosystem-visual .mowSetupGroupHeader:hover,
  body.mow-ecosystem-visual .mowSetupGroupHeader:focus-visible {
    background: rgba(123,41,53,.08);
  }

  body.mow-ecosystem-visual .mowSetupGroupStatus,
  body.mow-ecosystem-visual .mow-b90-rules-note,
  body.mow-ecosystem-visual .mow-b90-rules-tip {
    color: var(--eco-ink-muted);
  }

  body.mow-ecosystem-visual .mow-b90-rules-active {
    color: color-mix(in srgb, var(--accent) 55%, var(--eco-action) 45%);
  }

  body.mow-ecosystem-visual .mowSetupGroupRows .mowUpToggle,
  body.mow-ecosystem-visual #mowUpToggleHost .mowUpToggle,
  body.mow-ecosystem-visual .mowToolsToggleRow {
    color: var(--eco-ink);
    border-color: rgba(91,75,51,.42);
    background: rgba(255,253,246,.78);
    box-shadow: inset 0 1px rgba(255,255,255,.7);
  }

  body.mow-ecosystem-visual .mowSetupGroupRows .mowUpToggle input,
  body.mow-ecosystem-visual #mowUpToggleHost .mowUpToggle input,
  body.mow-ecosystem-visual .mowToolsToggleRow input {
    border-color: rgba(91,75,51,.42);
    background: rgba(47,58,66,.16);
  }

  body.mow-ecosystem-visual .mowSetupGroupRows .mowUpToggle input::after,
  body.mow-ecosystem-visual #mowUpToggleHost .mowUpToggle input::after,
  body.mow-ecosystem-visual .mowToolsToggleRow input::after {
    background: rgba(255,255,255,.92);
  }

  body.mow-ecosystem-visual .mowSetupGroupRows .mowUpToggle input:checked,
  body.mow-ecosystem-visual #mowUpToggleHost .mowUpToggle input:checked,
  body.mow-ecosystem-visual .mowToolsToggleRow input:checked {
    background: color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,.4));
    border-color: color-mix(in srgb, var(--accent) 46%, rgba(91,75,51,.42));
  }

  body.mow-ecosystem-visual .mowSetupGroupRows .mowUpToggle input:checked::after,
  body.mow-ecosystem-visual #mowUpToggleHost .mowUpToggle input:checked::after,
  body.mow-ecosystem-visual .mowToolsToggleRow input:checked::after {
    background: color-mix(in srgb, var(--accent) 72%, white);
  }

  /* Forms: light paper controls on light work surfaces, unchanged dimensions. */
  body.mow-ecosystem-visual #mowFleetFluffName,
  body.mow-ecosystem-visual #fleetSelect,
  body.mow-ecosystem-visual #chaosVariantSelect,
  body.mow-ecosystem-visual .card input[type="number"],
  body.mow-ecosystem-visual .card input[type="text"],
  body.mow-ecosystem-visual .card input:not([type]),
  body.mow-ecosystem-visual .card select,
  body.mow-ecosystem-visual .card textarea,
  body.mow-ecosystem-visual #mowFleetSelectorBlock select {
    color: var(--eco-ink);
    border-color: rgba(91,75,51,.54);
    background: rgba(255,253,246,.78);
    box-shadow: inset 0 1px rgba(255,255,255,.72);
  }

  body.mow-ecosystem-visual .card select option,
  body.mow-ecosystem-visual #mowFleetSelectorBlock select option {
    color: var(--eco-ink);
    background: var(--eco-paper-3);
  }

  body.mow-ecosystem-visual .card input::placeholder,
  body.mow-ecosystem-visual .card textarea::placeholder {
    color: rgba(102,92,76,.66);
  }

  body.mow-ecosystem-visual #mowFleetFluffName:focus,
  body.mow-ecosystem-visual #fleetSelect:focus,
  body.mow-ecosystem-visual #chaosVariantSelect:focus,
  body.mow-ecosystem-visual .card select:focus,
  body.mow-ecosystem-visual .card input:focus,
  body.mow-ecosystem-visual .card textarea:focus,
  body.mow-ecosystem-visual #mowFleetSelectorBlock select:focus {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--eco-action) 38%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px rgba(255,255,255,.72);
  }

  /* Ecosystem button hierarchy: burgundy primary, neutral secondary. */
  body.mow-ecosystem-visual button {
    border-color: rgba(255,255,255,.13);
    background: rgba(255,255,255,.045);
    color: var(--eco-white);
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
  }

  body.mow-ecosystem-visual button:hover:not(:disabled),
  body.mow-ecosystem-visual button:focus-visible:not(:disabled) {
    border-color: rgba(196,162,75,.42);
    background: rgba(196,162,75,.08);
  }

  body.mow-ecosystem-visual button:active:not(:disabled) {
    transform: translateY(1px);
  }

  body.mow-ecosystem-visual button.primary {
    color: #fff;
    border-color: rgba(255,255,255,.16);
    background: linear-gradient(180deg, var(--eco-action), var(--eco-action-dark));
    box-shadow: 0 8px 18px rgba(84,27,37,.24);
  }

  body.mow-ecosystem-visual button.primary:hover:not(:disabled),
  body.mow-ecosystem-visual button.primary:focus-visible:not(:disabled) {
    border-color: rgba(244,223,170,.48);
    background: linear-gradient(180deg, #8b3441, #63212c);
  }

  body.mow-ecosystem-visual .card button,
  body.mow-ecosystem-visual .kpi button {
    color: var(--eco-ink);
    border-color: rgba(91,75,51,.5);
    background: rgba(255,253,246,.56);
  }

  body.mow-ecosystem-visual .card button:hover:not(:disabled),
  body.mow-ecosystem-visual .card button:focus-visible:not(:disabled),
  body.mow-ecosystem-visual .kpi button:hover:not(:disabled),
  body.mow-ecosystem-visual .kpi button:focus-visible:not(:disabled) {
    border-color: rgba(123,41,53,.48);
    background: rgba(123,41,53,.07);
  }

  body.mow-ecosystem-visual .card button.primary,
  body.mow-ecosystem-visual .kpi button.primary {
    color: #fff;
    border-color: rgba(84,27,37,.72);
    background: linear-gradient(180deg, var(--eco-action), var(--eco-action-dark));
  }

  body.mow-ecosystem-visual .mow-qty-stepper-btn {
    color: var(--eco-ink);
    border-color: rgba(91,75,51,.5);
    background: rgba(255,253,246,.62);
  }

  /* Summary tiles use the same paper hierarchy and serif numerals as the references. */
  body.mow-ecosystem-visual .kpi {
    overflow: hidden;
    border-radius: 14px;
    padding: 13px 14px;
  }

  body.mow-ecosystem-visual .kpiWide {
    border-top: 5px solid color-mix(in srgb, var(--accent) 58%, var(--eco-action) 42%);
  }

  body.mow-ecosystem-visual .kpi .lab {
    color: var(--eco-ink-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  body.mow-ecosystem-visual .kpi .val {
    color: var(--eco-ink);
    font: 800 23px/1.12 Georgia, "Times New Roman", serif;
  }

  body.mow-ecosystem-visual .kpiWide .val {
    color: color-mix(in srgb, var(--accent) 58%, var(--eco-action) 42%);
    font-size: 32px;
  }

  body.mow-ecosystem-visual .kpi small {
    color: var(--eco-ink-muted);
  }

  body.mow-ecosystem-visual .pill,
  body.mow-ecosystem-visual .check,
  body.mow-ecosystem-visual .preview,
  body.mow-ecosystem-visual .mowUpToggle {
    color: var(--eco-ink);
    border-color: rgba(91,75,51,.42);
    background: rgba(255,253,246,.48);
    box-shadow: inset 0 1px rgba(255,255,255,.54);
  }

  body.mow-ecosystem-visual .pill b {
    color: var(--eco-ink);
  }

  body.mow-ecosystem-visual .checks .check-text {
    color: var(--eco-ink);
  }

  body.mow-ecosystem-visual .check-pill {
    color: var(--eco-ink-muted);
    border-color: rgba(91,75,51,.38);
    background: rgba(255,255,255,.36);
  }

  body.mow-ecosystem-visual .check-pill.ok,
  body.mow-ecosystem-visual .ok.check-pill {
    color: #245d3f;
    border-color: rgba(46,116,78,.38);
    background: rgba(46,116,78,.10);
  }

  body.mow-ecosystem-visual .check-pill.fail,
  body.mow-ecosystem-visual .fail.check-pill {
    color: #772b36;
    border-color: rgba(139,51,64,.38);
    background: rgba(139,51,64,.10);
  }

  body.mow-ecosystem-visual .check-pill.warn,
  body.mow-ecosystem-visual .warn.check-pill {
    color: #765316;
    border-color: rgba(139,101,29,.38);
    background: rgba(139,101,29,.10);
  }

  body.mow-ecosystem-visual .preview textarea {
    color: var(--eco-ink);
  }

  body.mow-ecosystem-visual #sec_checks .checksSubRow {
    gap: 10px;
  }

  body.mow-ecosystem-visual #sec_checks .checksSubRow small {
    flex: 0 1 auto;
    min-width: 152px;
    padding: 0 12px;
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(10,25,33,.66);
    box-shadow: inset 0 1px rgba(255,255,255,.06);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  body.mow-ecosystem-visual #sec_checks .checksCtl {
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(10,25,33,.58);
    box-shadow: inset 0 1px rgba(255,255,255,.06);
  }

  body.mow-ecosystem-visual #sec_checks .checksCtl .failCount,
  body.mow-ecosystem-visual #sec_checks .checksCtl .filterBtn {
    color: var(--eco-paper-3);
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
  }

  body.mow-ecosystem-visual #sec_checks .checksCtl .failCount {
    color: #ffe5e7;
    border-color: rgba(255,136,146,.28);
    background: rgba(95,24,33,.78);
  }

  body.mow-ecosystem-visual #sec_checks .checksCtl .filterBtn.active {
    color: #fff5de;
    border-color: color-mix(in srgb, var(--eco-gold) 55%, rgba(255,255,255,.18));
    background: rgba(123,41,53,.58);
    box-shadow: 0 0 0 1px rgba(196,162,75,.18);
  }

  body.mow-ecosystem-visual #sec_checks .checksCtl .filterBtn:hover {
    background: rgba(255,255,255,.08);
  }

  /* Shared-fleet banner and notifications fit the ecosystem shell. */
  body.mow-ecosystem-visual .mow-shared-fleet-banner {
    color: var(--eco-white);
    border-color: rgba(196,162,75,.34);
    background: linear-gradient(100deg, rgba(123,41,53,.3), rgba(19,42,53,.9));
    box-shadow: 0 14px 34px rgba(0,0,0,.2);
  }

  body.mow-ecosystem-visual .mow-shared-fleet-banner span {
    color: #b7c5cc;
  }

  /* Footer follows the dark application chrome rather than the work surface. */
  body.mow-ecosystem-visual .mowAppFooter {
    color: var(--eco-sidebar-muted);
    border-top-color: rgba(255,255,255,.09);
  }

  body.mow-ecosystem-visual .mowBuildStamp {
    color: #f4dfaa;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body.mow-ecosystem-visual .mowFooterSource b {
    color: #b4c2c9;
  }

  /* Feedback pass 2: simpler faction gradients, stronger selector accents, font polish. */
  body.mow-ecosystem-visual > header::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 44%, #291b25 56%),
      color-mix(in srgb, var(--accent) 72%, #5a3345 28%) 48%,
      color-mix(in srgb, var(--accent) 28%, #161219 72%)
    );
  }

  body.mow-ecosystem-visual .card .hd {
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 36%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 62%, #512638 38%),
        color-mix(in srgb, var(--accent) 26%, #17151b 74%)
      );
  }

  body.mow-ecosystem-visual #mowFleetSelectorBlock,
  body.mow-ecosystem-visual .mowSetupGroup {
    background: rgba(255,251,239,.56);
  }

  body.mow-ecosystem-visual #mowFleetSelectorBlock {
    border-color: rgba(91,75,51,.56);
    background: rgba(255,251,239,.92);
    box-shadow:
      inset 0 5px 0 color-mix(in srgb, var(--accent) 84%, rgba(255,255,255,.12)),
      inset 0 1px rgba(255,255,255,.72);
  }

  body.mow-ecosystem-visual #mowBatch90bRuleset {
    background: rgba(255,251,239,.56);
    border-color: rgba(91,75,51,.42);
  }

  body.mow-ecosystem-visual #mowFleetSelectorBlock > .muteline,
  body.mow-ecosystem-visual #chaosVariantWrap > .muteline,
  body.mow-ecosystem-visual #mowBatch90bRuleset label,
  body.mow-ecosystem-visual .mowSetupGroupTitle,
  body.mow-ecosystem-visual #mowFleetSelectorBlock label {
    color: color-mix(in srgb, var(--accent) 56%, var(--eco-action-dark) 44%);
    font-weight: 800;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-bar {
    background: linear-gradient(180deg, rgba(19,42,53,.92), rgba(10,25,33,.94));
  }

  body.mow-ecosystem-visual .mow-fleet-actions-main button {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 760;
    letter-spacing: .01em;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-main .mow-fleet-count,
  body.mow-ecosystem-visual .mow-fleet-actions-main .mow-r90-badge {
    padding-inline: 7px;
    border-radius: 999px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 800;
  }

  body.mow-ecosystem-visual .kpi .lab {
    color: color-mix(in srgb, var(--eco-ink-muted) 70%, #43342c 30%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
  }

  body.mow-ecosystem-visual .kpi .val {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #2c2832;
  }

  body.mow-ecosystem-visual .kpi .val small,
  body.mow-ecosystem-visual .kpi small {
    color: var(--eco-ink-muted);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .72em;
    font-weight: 750;
    letter-spacing: .01em;
  }

  body.mow-ecosystem-visual .kpiWide .val {
    color: color-mix(in srgb, var(--accent) 64%, var(--eco-action) 36%);
  }

  @media (max-width: 700px) {
    body.mow-ecosystem-visual > header {
      padding: 18px 15px 13px;
    }

    body.mow-ecosystem-visual > header h1 {
      font-size: 22px;
    }

    body.mow-ecosystem-visual .mow-fleet-actions-bar {
      margin-inline: 10px;
      border-radius: 13px;
    }

    body.mow-ecosystem-visual .card,
    body.mow-ecosystem-visual .kpi {
      box-shadow: 0 16px 42px rgba(0,0,0,.32);
    }

    body.mow-ecosystem-visual .card .hd {
      min-height: 46px;
      padding-block: 12px;
    }
  }
}


/* Feedback pass 3: desktop accordion continuity, stronger fleet priority, KPI sublabels, semantic setup badge. */
body.mow-ecosystem-visual .mowSetupGroup{
  display:block;
  overflow:hidden;
  border:1px solid rgba(91,75,51,.46);
  border-radius:12px;
}

body.mow-ecosystem-visual .mowSetupGroupHeader{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:52px;
  padding:8px 14px 8px 12px;
  border:0;
  border-radius:0;
  text-align:left;
  box-shadow:none;
  cursor:pointer;
}

body.mow-ecosystem-visual .mowSetupGroupHeading{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

body.mow-ecosystem-visual .mowSetupGroupTitle{
  font-size:13px;
  line-height:1.25;
}

body.mow-ecosystem-visual .mowSetupGroupStatus{
  font-size:11px;
  line-height:1.2;
}

body.mow-ecosystem-visual .mowSetupGroupChevron{
  flex:0 0 auto;
  width:9px;
  height:9px;
  margin-right:4px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  color:var(--eco-ink-muted);
  transform:rotate(45deg);
  transform-origin:center;
  transition:transform .18s ease, color .18s ease;
}

body.mow-ecosystem-visual .mowSetupGroupHeader[aria-expanded="true"] .mowSetupGroupChevron{
  color:color-mix(in srgb, var(--accent) 65%, white);
  transform:rotate(225deg);
}

body.mow-ecosystem-visual .mowSetupGroupRows{
  width:100%;
  padding:8px 10px 11px;
  border-top:1px solid rgba(91,75,51,.18);
  align-items:stretch;
}

body.mow-ecosystem-visual .mowSetupGroupRows[hidden]{
  display:none;
}

body.mow-ecosystem-visual #mowFleetSelectorBlock{
  box-shadow:
    inset 0 6px 0 color-mix(in srgb, var(--accent) 88%, rgba(255,255,255,.10)),
    inset 0 1px rgba(255,255,255,.72),
    0 0 0 1px rgba(91,75,51,.12);
}

body.mow-ecosystem-visual #mowFleetSelectorBlock > .muteline,
body.mow-ecosystem-visual #mowFleetSelectorBlock label{
  font-size:14px;
}

body.mow-ecosystem-visual .mow-r90-button:not(.has-pending) .mow-r90-badge{
  background:#27583b;
  color:#e6f5eb;
}

body.mow-ecosystem-visual .mow-r90-button.has-pending .mow-r90-badge{
  background:#8b671e;
  color:#fff1bf;
}

body.mow-ecosystem-visual .kpi .val small,
body.mow-ecosystem-visual .kpi small{
  color: color-mix(in srgb, var(--eco-ink-muted) 74%, #4b4139 26%);
  font-family: Georgia, "Times New Roman", serif;
  font-size:.58em;
  font-style:normal;
  font-weight:700;
  letter-spacing:0;
}

/* VISUAL-1D functional stabilization: desktop collapse uses a branch-only class.
   It does not write the hidden attribute used by the original mobile accordion. */
@media screen and (min-width: 701px){
  body.mow-ecosystem-visual .mowSetupGroup.is-visual-collapsed .mowSetupGroupRows{
    display:none;
  }
}


/* VISUAL-1E polish: section-style Fleet heading, balanced select chevrons,
   and stable optional-rule presentation order. */
body.mow-ecosystem-visual .mowFleetSectionHeading{
  grid-column:1 / -1;
  width:100%;
  margin:2px 0 -3px;
  padding:0;
}

body.mow-ecosystem-visual .mowFleetSectionHeading h3{
  margin-bottom:0;
}

body.mow-ecosystem-visual #mowFleetSelectorBlock > .mowFleetInlineLabel{
  display:none;
}

body.mow-ecosystem-visual #mowFleetSelectorBlock{
  padding-top:14px;
}

body.mow-ecosystem-visual .card select,
body.mow-ecosystem-visual #mowFleetSelectorBlock select,
body.mow-ecosystem-visual .mow-b90-ruleset select,
body.mow-ecosystem-visual .mow-r90-row select,
body.mow-ecosystem-visual .mow-modal select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:42px;
  background-image:
    linear-gradient(45deg, transparent 50%, #26313a 50%),
    linear-gradient(135deg, #26313a 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% - 1px),
    calc(100% - 14px) calc(50% - 1px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

body.mow-ecosystem-visual .mow-r90-row select,
body.mow-ecosystem-visual .mow-modal select{
  background-image:
    linear-gradient(45deg, transparent 50%, #dbe4e8 50%),
    linear-gradient(135deg, #dbe4e8 50%, transparent 50%);
}

/* VISUAL-1F compact ruleset summary and simplified KPI cards. */
body.mow-ecosystem-visual #mowOptionalRulesToggle[aria-expanded="false"] + #mowBatch90bRuleset{
  display:none;
}

body.mow-ecosystem-visual #mowBatch90bRuleset.mow-visual-ruleset-compact{
  display:block;
  width:auto;
  margin:0;
  padding:10px 12px 9px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

body.mow-ecosystem-visual #mowBatch90bRuleset.mow-visual-ruleset-compact label{
  display:flex;
  gap:12px;
  align-items:center;
  font-weight:850;
}

body.mow-ecosystem-visual #mowBatch90bRuleset.mow-visual-ruleset-compact .mow-b90-rules-label{
  flex:0 0 82px;
  color:color-mix(in srgb, var(--accent) 56%, var(--eco-action-dark) 44%);
  font-size:13px;
  font-weight:850;
}

body.mow-ecosystem-visual #mowBatch90bRuleset.mow-visual-ruleset-compact .mow-b90-rules-active,
body.mow-ecosystem-visual #mowBatch90bRuleset.mow-visual-ruleset-compact .mow-b90-rules-note,
body.mow-ecosystem-visual #mowBatch90bRuleset.mow-visual-ruleset-compact .mow-b90-rules-tip{
  display:none;
}

body.mow-ecosystem-visual #mowOptionalRulesRows{
  padding-top:8px;
}

body.mow-ecosystem-visual .kpi{
  --mow-kpi-accent:var(--accent);
  border-top-width:1px;
}

body.mow-ecosystem-visual .kpi::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  width:auto;
  height:3px;
  z-index:1;
  pointer-events:none;
  border:0;
  border-radius:13px 13px 0 0;
  background:var(--mow-kpi-accent, var(--accent));
  opacity:.76;
}

body.mow-ecosystem-visual .kpiWide{
  border-top-width:1px;
  border-top-color:rgba(91,75,51,.72);
}

@media (max-width:700px){
  body.mow-ecosystem-visual #mowBatch90bRuleset.mow-visual-ruleset-compact{
    width:auto;
    margin:0;
    padding:9px 10px 8px;
  }
  body.mow-ecosystem-visual #mowBatch90bRuleset.mow-visual-ruleset-compact label{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  body.mow-ecosystem-visual #mowBatch90bRuleset.mow-visual-ruleset-compact .mow-b90-rules-label{
    flex-basis:auto;
  }
}

/* VISUAL-1G experimental hybrid-efficiency trial.
 * Reintroduces three strengths of HOTFIX-90F without reverting the new visual system:
 * 1) denser desktop unit list;
 * 2) calmer, more compact KPI and action toolbar;
 * 3) fewer nested frames and quieter component borders.
 * Mobile touch geometry remains unchanged.
 */
@media (min-width:701px){
  body.mow-ecosystem-visual #sec_params .row,
  body.mow-ecosystem-visual #unitsRoot .row,
  body.mow-ecosystem-visual #sec_allies .row,
  body.mow-ecosystem-visual #sec_sea .row{
    padding:8px 0;
  }

  body.mow-ecosystem-visual #unitsRoot .section{
    margin-top:10px;
  }

  body.mow-ecosystem-visual #unitsRoot .section + .section,
  body.mow-ecosystem-visual #unitsRoot .section:first-child,
  body.mow-ecosystem-visual #sec_allies,
  body.mow-ecosystem-visual #sec_sea{
    margin-top:15px;
    padding-top:11px;
  }

  body.mow-ecosystem-visual #sec_params h3,
  body.mow-ecosystem-visual #unitsRoot .section h3,
  body.mow-ecosystem-visual #sec_allies h3,
  body.mow-ecosystem-visual #sec_sea h3{
    margin-bottom:6px;
  }

  body.mow-ecosystem-visual #sec_params .desc,
  body.mow-ecosystem-visual #unitsRoot .desc,
  body.mow-ecosystem-visual #sec_allies .desc,
  body.mow-ecosystem-visual #sec_sea .desc{
    margin-top:1px;
    line-height:1.22;
  }

  body.mow-ecosystem-visual .kpis{
    gap:8px;
  }

  body.mow-ecosystem-visual .kpi{
    padding:10px 11px;
    border-radius:12px;
    box-shadow:0 8px 22px rgba(0,0,0,.24);
  }

  body.mow-ecosystem-visual .kpi::before{
    height:2px;
    border-radius:11px 11px 0 0;
    opacity:.70;
  }

  body.mow-ecosystem-visual #sec_total .kpi .val{
    margin-top:4px;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-bar{
    padding:8px 11px;
    gap:10px;
    border-radius:12px;
    box-shadow:0 9px 24px rgba(0,0,0,.16);
  }

  body.mow-ecosystem-visual .mow-fleet-actions-main{
    gap:7px;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-main button{
    min-height:30px;
    padding:4px 8px;
    border-radius:8px;
    font-size:12px;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-status{
    font-size:11px;
  }
}

body.mow-ecosystem-visual .card::before{
  display:none;
}

body.mow-ecosystem-visual .mowSetupGroup{
  border-color:rgba(91,75,51,.32);
  box-shadow:none;
}

body.mow-ecosystem-visual #mowFleetSelectorBlock{
  border-color:rgba(91,75,51,.44);
  box-shadow:
    inset 0 6px 0 color-mix(in srgb, var(--accent) 88%, rgba(255,255,255,.10)),
    inset 0 1px rgba(255,255,255,.72);
}

body.mow-ecosystem-visual .mowSetupGroupRows .mowUpToggle,
body.mow-ecosystem-visual #mowUpToggleHost .mowUpToggle,
body.mow-ecosystem-visual .mowToolsToggleRow{
  border-color:rgba(91,75,51,.30);
  box-shadow:none;
}

/* ==========================================================================
   SECONDARY SURFACES
   Source lineage: mow_builder_visual2a_secondary.css
   ========================================================================== */

/*
 * Man O' War Fleet Builder — VISUAL-2A experimental branch
 * Secondary surfaces: Unit Preview, standard modals and ship-name editors.
 *
 * Scope discipline:
 * - visual overrides only, gated by body.mow-ecosystem-visual;
 * - no public contract, persistence, identifiers or application logic changes;
 * - Fleet Setup, Fleet Analysis and Scenario Generator remain outside VISUAL-2A.
 */

@media screen {
  body.mow-ecosystem-visual {
    --eco-surface-paper: #f5ead2;
    --eco-surface-paper-deep: #dfcba4;
    --eco-surface-ink: #302820;
    --eco-surface-muted: #746653;
    --eco-surface-line: rgba(91, 75, 51, .42);
    --eco-surface-line-soft: rgba(91, 75, 51, .20);
    --eco-surface-input: rgba(255, 252, 243, .88);
    --eco-surface-input-hover: rgba(255, 254, 249, .98);
  }

  /* Shared modal foundation. */
  body.mow-ecosystem-visual .mow-modal-backdrop {
    background: rgba(2, 9, 13, .76);
    backdrop-filter: blur(4px);
  }

  body.mow-ecosystem-visual .mow-modal-panel {
    --text: var(--eco-surface-ink);
    --muted: var(--eco-surface-muted);
    --stroke: var(--eco-surface-line);
    --stroke2: var(--eco-surface-line-soft);
    scrollbar-color: rgba(91, 75, 51, .46) rgba(255, 255, 255, .20);
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .72);
    background:
      radial-gradient(circle at 18% -8%, rgba(255, 255, 255, .72), transparent 38%),
      linear-gradient(145deg, var(--eco-surface-paper), var(--eco-surface-paper-deep));
    box-shadow: 0 28px 86px rgba(0, 0, 0, .52);
    padding: 16px;
  }

  body.mow-ecosystem-visual .mow-modal-head {
    position: relative;
    margin: -16px -16px 14px;
    padding: 15px 16px 14px;
    color: #fff;
    border-bottom: 3px double rgba(255, 255, 255, .30);
    border-radius: 17px 17px 0 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 62%, #512638 38%),
        color-mix(in srgb, var(--accent) 26%, #17151b 74%)
      );
  }

  body.mow-ecosystem-visual .mow-modal-head h2 {
    color: #fff;
    font: 800 clamp(20px, 2.2vw, 25px)/1.08 Georgia, "Times New Roman", serif;
    letter-spacing: .005em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .24);
  }

  body.mow-ecosystem-visual .mow-modal-x {
    flex: 0 0 auto;
    color: #fff;
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
  }

  body.mow-ecosystem-visual .mow-modal-x:hover,
  body.mow-ecosystem-visual .mow-modal-x:focus-visible {
    color: #fff8e8;
    border-color: rgba(244, 223, 170, .58);
    background: rgba(244, 223, 170, .13);
  }

  body.mow-ecosystem-visual .mow-modal-hint,
  body.mow-ecosystem-visual .mow-field-label,
  body.mow-ecosystem-visual .mow-fleet-library-meta,
  body.mow-ecosystem-visual .mow-matching-fleet-meta,
  body.mow-ecosystem-visual .mow-portable-meta {
    color: var(--eco-surface-muted);
  }

  body.mow-ecosystem-visual .mow-modal-footer {
    border-top-color: var(--eco-surface-line-soft);
  }

  body.mow-ecosystem-visual .mow-modal-panel input,
  body.mow-ecosystem-visual .mow-modal-panel select,
  body.mow-ecosystem-visual .mow-modal-panel textarea,
  body.mow-ecosystem-visual #mowFleetNameInput,
  body.mow-ecosystem-visual .mow-share-link-field,
  body.mow-ecosystem-visual .mow-portable-input {
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .54);
    background-color: var(--eco-surface-input);
    box-shadow: inset 0 1px rgba(255, 255, 255, .72);
    color-scheme: light;
  }

  body.mow-ecosystem-visual .mow-modal-panel input:hover,
  body.mow-ecosystem-visual .mow-modal-panel select:hover,
  body.mow-ecosystem-visual .mow-modal-panel textarea:hover {
    background-color: var(--eco-surface-input-hover);
  }

  body.mow-ecosystem-visual .mow-modal-panel input:focus,
  body.mow-ecosystem-visual .mow-modal-panel select:focus,
  body.mow-ecosystem-visual .mow-modal-panel textarea:focus,
  body.mow-ecosystem-visual #mowFleetNameInput:focus,
  body.mow-ecosystem-visual .mow-share-link-field:focus,
  body.mow-ecosystem-visual .mow-portable-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 62%, var(--eco-action) 38%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px rgba(255, 255, 255, .72);
  }

  body.mow-ecosystem-visual .mow-modal-panel select {
    background-image:
      linear-gradient(45deg, transparent 50%, #26313a 50%),
      linear-gradient(135deg, #26313a 50%, transparent 50%);
  }

  body.mow-ecosystem-visual .mow-modal-panel button,
  body.mow-ecosystem-visual .mow-ship-names-inline button {
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .48);
    background: rgba(255, 253, 246, .66);
    box-shadow: none;
  }

  body.mow-ecosystem-visual .mow-modal-panel button:hover:not(:disabled),
  body.mow-ecosystem-visual .mow-modal-panel button:focus-visible:not(:disabled),
  body.mow-ecosystem-visual .mow-ship-names-inline button:hover:not(:disabled),
  body.mow-ecosystem-visual .mow-ship-names-inline button:focus-visible:not(:disabled) {
    color: #4f2430;
    border-color: rgba(123, 41, 53, .48);
    background: rgba(123, 41, 53, .08);
  }

  body.mow-ecosystem-visual .mow-modal-panel button.primary,
  body.mow-ecosystem-visual .mow-ship-names-inline button.primary {
    color: #fff;
    border-color: rgba(84, 27, 37, .74);
    background: linear-gradient(180deg, var(--eco-action), var(--eco-action-dark));
    box-shadow: 0 8px 18px rgba(84, 27, 37, .20);
  }

  body.mow-ecosystem-visual .mow-modal-panel button.primary:hover:not(:disabled),
  body.mow-ecosystem-visual .mow-modal-panel button.primary:focus-visible:not(:disabled),
  body.mow-ecosystem-visual .mow-ship-names-inline button.primary:hover:not(:disabled),
  body.mow-ecosystem-visual .mow-ship-names-inline button.primary:focus-visible:not(:disabled) {
    color: #fff;
    border-color: rgba(244, 223, 170, .50);
    background: linear-gradient(180deg, #8b3441, #63212c);
  }


  body.mow-ecosystem-visual .mow-modal-panel .mow-modal-x,
  body.mow-ecosystem-visual .mow-ship-names-inline .mow-modal-x {
    color: #fff;
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
  }

  body.mow-ecosystem-visual .mow-modal-panel .mow-modal-x:hover,
  body.mow-ecosystem-visual .mow-modal-panel .mow-modal-x:focus-visible,
  body.mow-ecosystem-visual .mow-ship-names-inline .mow-modal-x:hover,
  body.mow-ecosystem-visual .mow-ship-names-inline .mow-modal-x:focus-visible {
    color: #fff8e8;
    border-color: rgba(244, 223, 170, .58);
    background: rgba(244, 223, 170, .13);
  }

  body.mow-ecosystem-visual .mow-modal-panel button.danger {
    color: #7b2632;
    border-color: rgba(139, 51, 64, .46);
    background: rgba(139, 51, 64, .08);
  }

  body.mow-ecosystem-visual .mow-modal-panel button.danger:hover:not(:disabled),
  body.mow-ecosystem-visual .mow-modal-panel button.danger:focus-visible:not(:disabled) {
    color: #681e29;
    border-color: rgba(139, 51, 64, .68);
    background: rgba(139, 51, 64, .14);
  }

  /* Modal content families. */
  body.mow-ecosystem-visual .mow-share-summary,
  body.mow-ecosystem-visual .mow-matching-fleet-item,
  body.mow-ecosystem-visual .mow-help-start,
  body.mow-ecosystem-visual .mow-help-checklist,
  body.mow-ecosystem-visual .mow-help-content details,
  body.mow-ecosystem-visual .mow-portable-group,
  body.mow-ecosystem-visual .mow-portable-technical {
    color: var(--eco-surface-ink);
    border-color: var(--eco-surface-line-soft);
    background: rgba(255, 252, 243, .48);
    box-shadow: inset 0 1px rgba(255, 255, 255, .50);
  }

  body.mow-ecosystem-visual .mow-share-summary,
  body.mow-ecosystem-visual .mow-fleet-library-name,
  body.mow-ecosystem-visual .mow-matching-fleet-name {
    color: var(--eco-surface-ink);
  }

  body.mow-ecosystem-visual .mow-fleet-library-item {
    border-bottom-color: var(--eco-surface-line-soft);
  }

  body.mow-ecosystem-visual .mow-fleet-library-empty,
  body.mow-ecosystem-visual .mow-ship-names-empty {
    color: var(--eco-surface-muted);
    border-color: rgba(91, 75, 51, .42);
    background: rgba(255, 252, 243, .30);
  }

  body.mow-ecosystem-visual .mow-help-content {
    color: var(--eco-surface-ink);
  }

  body.mow-ecosystem-visual .mow-help-content h3 {
    color: color-mix(in srgb, var(--accent) 42%, var(--eco-action-dark) 58%);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
  }

  body.mow-ecosystem-visual .mow-help-content summary {
    color: var(--eco-surface-ink);
  }

  body.mow-ecosystem-visual .mow-help-content details[open] summary {
    color: #5a2632;
    border-bottom-color: var(--eco-surface-line-soft);
    background: rgba(123, 41, 53, .06);
  }

  body.mow-ecosystem-visual .mow-help-detail {
    color: color-mix(in srgb, var(--eco-surface-ink) 86%, var(--eco-surface-muted));
  }

  body.mow-ecosystem-visual .mow-help-code,
  body.mow-ecosystem-visual .mow-portable-group code {
    color: #4b3c30;
    border-color: rgba(91, 75, 51, .30);
    background: rgba(255, 255, 255, .52);
  }

  body.mow-ecosystem-visual .mow-portable-status.is-ok,
  body.mow-ecosystem-visual .mow-portable-ok {
    color: #245d3f;
  }

  body.mow-ecosystem-visual .mow-portable-status.is-error {
    color: #772b36;
  }

  body.mow-ecosystem-visual .mow-portable-group.is-error {
    color: #6f2630;
    background: rgba(139, 51, 64, .08);
  }

  body.mow-ecosystem-visual .mow-portable-group.is-warning {
    color: #684a17;
    background: rgba(139, 101, 29, .09);
  }

  body.mow-ecosystem-visual .mow-portable-group.is-action {
    color: #244b58;
    border-color: rgba(39, 93, 107, .34);
    background: rgba(39, 93, 107, .08);
  }

  body.mow-ecosystem-visual .mow-portable-group.is-action p,
  body.mow-ecosystem-visual .mow-portable-meta,
  body.mow-ecosystem-visual .mow-portable-technical {
    color: var(--eco-surface-muted);
  }

  body.mow-ecosystem-visual .mow-portable-setup-link {
    color: #244b58;
    border-color: rgba(39, 93, 107, .46);
    background: rgba(39, 93, 107, .08);
  }

  /* Ship-name modal and inline editor. */
  body.mow-ecosystem-visual .mow-ship-names-inline {
    --text: var(--eco-surface-ink);
    --muted: var(--eco-surface-muted);
    --stroke: var(--eco-surface-line);
    --stroke2: var(--eco-surface-line-soft);
    overflow: hidden;
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .58);
    background:
      radial-gradient(circle at 18% -8%, rgba(255, 255, 255, .72), transparent 38%),
      linear-gradient(145deg, var(--eco-surface-paper), var(--eco-surface-paper-deep));
    box-shadow: 0 15px 38px rgba(0, 0, 0, .22);
  }

  body.mow-ecosystem-visual .mow-ship-names-inline .mow-modal-head {
    margin: -14px -14px 13px;
    border-radius: 15px 15px 0 0;
  }

  body.mow-ecosystem-visual .mow-ship-name-group {
    color: var(--eco-surface-ink);
    border-color: var(--eco-surface-line-soft);
    background: rgba(255, 252, 243, .44);
    box-shadow: inset 0 1px rgba(255, 255, 255, .52);
  }

  body.mow-ecosystem-visual .mow-ship-name-group h3,
  body.mow-ecosystem-visual .mow-ship-name-squadron-title {
    color: color-mix(in srgb, var(--accent) 38%, var(--eco-action-dark) 62%);
  }

  body.mow-ecosystem-visual .mow-ship-name-squadron {
    border-top-color: var(--eco-surface-line-soft);
  }

  body.mow-ecosystem-visual .mow-ship-name-field > label,
  body.mow-ecosystem-visual .mow-ship-name-source {
    color: var(--eco-surface-muted);
  }

  body.mow-ecosystem-visual .mow-ship-name-source.is-unavailable {
    color: #8a3540;
  }

  body.mow-ecosystem-visual .mow-ship-name-field input {
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .52);
    background: var(--eco-surface-input);
    box-shadow: inset 0 1px rgba(255, 255, 255, .72);
    color-scheme: light;
  }

  body.mow-ecosystem-visual .mow-ship-name-field input:focus {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--eco-action) 38%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px rgba(255, 255, 255, .72);
  }

  /* Unit Preview as a light, readable secondary surface. */
  body.mow-ecosystem-visual .mowUnitPreviewPanel {
    --text: var(--eco-surface-ink);
    --muted: var(--eco-surface-muted);
    --stroke: var(--eco-surface-line);
    --stroke2: var(--eco-surface-line-soft);
    scrollbar-color: rgba(91, 75, 51, .46) rgba(255, 255, 255, .20);
    overflow: hidden auto;
    padding: 0 14px 14px;
    color: var(--eco-surface-ink);
    border-color: color-mix(in srgb, var(--accent) 62%, rgba(91, 75, 51, .62));
    border-radius: 14px;
    background:
      radial-gradient(circle at 18% -8%, rgba(255, 255, 255, .72), transparent 38%),
      linear-gradient(145deg, var(--eco-surface-paper), var(--eco-surface-paper-deep));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpHd {
    margin: 0 -14px 12px;
    padding: 13px 14px 12px;
    color: #fff;
    border-radius: 13px 13px 0 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 62%, #512638 38%),
        color-mix(in srgb, var(--accent) 26%, #17151b 74%)
      );
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpHd::after {
    display: none;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpTitle {
    color: #fff;
    font: 800 20px/1.08 Georgia, "Times New Roman", serif;
    letter-spacing: .005em;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpSub {
    color: rgba(255, 255, 255, .76);
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpLbl,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNotes,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNotesList,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNoteRow {
    color: var(--eco-surface-muted);
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpVal,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpMove,
  body.mow-ecosystem-visual .mowUnitPreviewPanel td {
    color: var(--eco-surface-ink);
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpSectionLbl,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNoteRow b {
    color: color-mix(in srgb, var(--accent) 42%, var(--eco-action-dark) 58%);
    font-weight: 850;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpSep {
    background: color-mix(in srgb, var(--accent) 38%, rgba(91, 75, 51, .34));
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel table {
    color: var(--eco-surface-ink);
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel th,
  body.mow-ecosystem-visual .mowUnitPreviewPanel td {
    border-top-color: var(--eco-surface-line-soft);
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel th {
    color: var(--eco-surface-muted);
    font-weight: 750;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpMove code,
  body.mow-ecosystem-visual .mowUnitPreviewPanel code {
    color: #4b3c30;
    border-color: rgba(91, 75, 51, .28);
    background: rgba(255, 255, 255, .52);
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpActions {
    border-top-color: var(--eco-surface-line-soft);
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUnitPreviewClose {
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .48);
    background: rgba(255, 253, 246, .66);
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUnitPreviewClose:hover,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUnitPreviewClose:focus-visible {
    color: #4f2430;
    border-color: rgba(123, 41, 53, .48);
    background: rgba(123, 41, 53, .08);
  }

  body.mow-ecosystem-visual .mow-fleet-toast {
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .54);
    background: linear-gradient(145deg, var(--eco-surface-paper), var(--eco-surface-paper-deep));
    box-shadow: 0 14px 36px rgba(0, 0, 0, .36);
  }

  @media (max-width: 700px) {
    body.mow-ecosystem-visual .mow-modal {
      padding: 10px 8px 0;
    }

    body.mow-ecosystem-visual .mow-modal-panel {
      max-height: 91vh;
      border-radius: 18px 18px 0 0;
      padding: 14px;
    }

    body.mow-ecosystem-visual .mow-modal-head {
      margin: -14px -14px 13px;
      padding: 14px;
      border-radius: 17px 17px 0 0;
    }

    body.mow-ecosystem-visual .mow-modal-head h2 {
      font-size: 21px;
    }

    body.mow-ecosystem-visual .mow-modal-footer {
      gap: 7px;
      margin-top: 13px;
      padding-top: 12px;
    }

    body.mow-ecosystem-visual .mowUnitPreviewPanel {
      padding: 0 11px 12px;
      border-radius: 13px;
    }

    body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpHd {
      margin: 0 -11px 11px;
      padding: 12px 11px 11px;
      border-radius: 12px 12px 0 0;
    }

    body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpTitle {
      font-size: 18px;
    }

    body.mow-ecosystem-visual .mowUnitPreviewPanel table {
      min-width: 520px;
    }
  }
}

/* ==========================================================================
   SPECIALIST WORKSPACES
   Source lineage: mow_builder_visual2b_specialist.css
   ========================================================================== */

/*
 * Man O' War Fleet Builder — VISUAL-2B experimental branch
 * Specialist workspaces: Fleet Setup, Fleet Analysis, Scenario Generator.
 * Also strengthens Unit Preview typography after the VISUAL-2A review.
 *
 * Scope discipline:
 * - presentation only, gated by body.mow-ecosystem-visual;
 * - no public contract, persistence, identifiers or domain logic changes;
 * - specialist workspace structure and event handling remain owned by RELEASE-90.
 */

@media screen {
  /* Unit Preview: preserve the VISUAL-2A surface, but improve real-world legibility. */
  body.mow-ecosystem-visual .mowUnitPreviewPanel {
    font-size: 15px;
    line-height: 1.42;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpSub {
    color: rgba(255, 255, 255, .88);
    font-weight: 650;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpGrid,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpMove,
  body.mow-ecosystem-visual .mowUnitPreviewPanel table,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNotesBlock,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNotes {
    font-size: .92rem;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpLbl,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNotes,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNotesList,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNoteRow,
  body.mow-ecosystem-visual .mowUnitPreviewPanel table.mowUpNotesTable td.wn-text {
    color: #625442;
    font-weight: 600;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpVal,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpMove,
  body.mow-ecosystem-visual .mowUnitPreviewPanel td {
    color: #3b3128;
    font-weight: 600;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel th {
    color: #5a4b3b;
    font-weight: 800;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpSectionLbl,
  body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNoteRow b {
    font-weight: 900;
  }

  /* Fleet Setup specialist modal. */
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-backdrop {
    background: rgba(2, 9, 13, .78);
    backdrop-filter: blur(4px);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-panel {
    --text: var(--eco-surface-ink);
    --muted: var(--eco-surface-muted);
    --stroke: var(--eco-surface-line);
    --stroke2: var(--eco-surface-line-soft);
    overflow: hidden;
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .72);
    background:
      radial-gradient(circle at 18% -8%, rgba(255, 255, 255, .72), transparent 38%),
      linear-gradient(145deg, var(--eco-surface-paper), var(--eco-surface-paper-deep));
    box-shadow: 0 28px 86px rgba(0, 0, 0, .52);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-head {
    position: relative;
    flex: 0 0 auto;
    padding: 17px 20px 15px;
    color: #fff;
    border-bottom: 3px double rgba(255, 255, 255, .30);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 62%, #512638 38%),
        color-mix(in srgb, var(--accent) 26%, #17151b 74%)
      );
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-title {
    color: #fff;
    font: 800 clamp(21px, 2.2vw, 26px)/1.08 Georgia, "Times New Roman", serif;
    letter-spacing: .005em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .24);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-hint {
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 600;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-close {
    color: #fff;
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-close:hover,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-close:focus-visible {
    color: #fff8e8;
    border-color: rgba(244, 223, 170, .58);
    background: rgba(244, 223, 170, .13);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-content {
    padding: 16px 18px 18px;
    scrollbar-color: rgba(91, 75, 51, .46) rgba(255, 255, 255, .20);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-group {
    margin-bottom: 11px;
    color: var(--eco-surface-ink);
    border-color: var(--eco-surface-line-soft);
    background: rgba(255, 252, 243, .46);
    box-shadow: inset 0 1px rgba(255, 255, 255, .52);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-group > summary {
    color: color-mix(in srgb, var(--accent) 42%, var(--eco-action-dark) 58%);
    background: rgba(255, 255, 255, .20);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-group[open] > summary {
    border-bottom: 1px solid var(--eco-surface-line-soft);
    background: rgba(123, 41, 53, .055);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-group > summary b {
    min-width: 29px;
    padding: 2px 8px;
    color: #5a2632;
    border: 1px solid rgba(123, 41, 53, .24);
    border-radius: 999px;
    background: rgba(123, 41, 53, .07);
    text-align: center;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-groupbody {
    padding: 0 13px 12px;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row {
    color: var(--eco-surface-ink);
    border-top-color: var(--eco-surface-line-soft);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-rowhead strong,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-power-label,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-name label,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-counters label {
    color: #43372d;
    font-weight: 750;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-state {
    color: #674712;
    border: 1px solid rgba(139, 101, 29, .34);
    background: rgba(139, 101, 29, .11);
    font-weight: 800;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-state.ok {
    color: #245d3f;
    border-color: rgba(46, 116, 78, .34);
    background: rgba(46, 116, 78, .11);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row select,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row input {
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .54);
    background: var(--eco-surface-input);
    box-shadow: inset 0 1px rgba(255, 255, 255, .72);
    color-scheme: light;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row select {
    padding-right: 34px;
    background-image:
      linear-gradient(45deg, transparent 50%, #26313a 50%),
      linear-gradient(135deg, #26313a 50%, transparent 50%);
    background-position:
      calc(100% - 17px) calc(50% - 2px),
      calc(100% - 12px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row select:focus,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row input:focus {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--eco-action) 38%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px rgba(255, 255, 255, .72);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row select:disabled,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row input:disabled {
    color: #746a5c;
    background-color: rgba(233, 224, 205, .72);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-fixed-target {
    color: var(--eco-surface-ink);
    border-color: var(--eco-surface-line-soft);
    background: rgba(255, 255, 255, .34);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-fixed-target small,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row small,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row p {
    color: var(--eco-surface-muted);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row button,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-actions button {
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .48);
    background: rgba(255, 253, 246, .68);
    box-shadow: none;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row button:hover:not(:disabled),
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row button:focus-visible:not(:disabled),
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-actions button:hover:not(:disabled),
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-actions button:focus-visible:not(:disabled) {
    color: #4f2430;
    border-color: rgba(123, 41, 53, .48);
    background: rgba(123, 41, 53, .08);
  }

  /* Fleet Analysis: a compact specialist dashboard inside the existing card. */
  body.mow-ecosystem-visual #sec_analysis .hd {
    --muted: rgba(255, 255, 255, .78);
  }

  body.mow-ecosystem-visual #sec_analysis .hd small {
    font-weight: 650;
  }

  body.mow-ecosystem-visual #sec_analysis .mowMiniLabel {
    color: rgba(255, 255, 255, .84);
    font-weight: 750;
  }

  body.mow-ecosystem-visual #sec_analysis .mowMiniSwitch input {
    border-color: rgba(255, 255, 255, .30);
    background: rgba(255, 255, 255, .14);
  }

  body.mow-ecosystem-visual #sec_analysis .mowMiniSwitch input::after {
    background: rgba(255, 255, 255, .88);
  }

  body.mow-ecosystem-visual #sec_analysis .mowMiniSwitch input:checked {
    border-color: rgba(244, 223, 170, .58);
    background: color-mix(in srgb, var(--accent) 58%, rgba(255, 255, 255, .12));
  }

  body.mow-ecosystem-visual #sec_analysis .bd {
    --text: var(--eco-surface-ink);
    --muted: #665846;
    padding-top: 12px;
  }

  body.mow-ecosystem-visual #sec_analysis #analysis {
    color: var(--eco-surface-ink);
    font-size: 12px;
    line-height: 1.38;
  }

  body.mow-ecosystem-visual #sec_analysis #analysis > .muteline {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 4px 0;
  }

  body.mow-ecosystem-visual #sec_analysis #analysis > .muteline > span:not(.pill) {
    display: block;
    width: 100%;
    padding: 7px 0 5px;
    color: color-mix(in srgb, var(--accent) 40%, var(--eco-action-dark) 60%);
    border-bottom: 1px solid var(--eco-surface-line-soft);
    font-weight: 900;
    letter-spacing: .08em;
  }

  body.mow-ecosystem-visual #sec_analysis #analysis .pill {
    min-height: 26px;
    padding: 4px 7px;
    color: #5f5140;
    border-color: rgba(91, 75, 51, .28);
    border-radius: 8px;
    background: rgba(255, 252, 243, .55);
    box-shadow: inset 0 1px rgba(255, 255, 255, .55);
    font-size: 11px;
    font-weight: 650;
  }

  body.mow-ecosystem-visual #sec_analysis #analysis .pill b {
    color: #32291f;
    font-weight: 850;
  }

  body.mow-ecosystem-visual #sec_analysis #analysis .muted,
  body.mow-ecosystem-visual #sec_analysis #analysis small {
    color: #746653;
  }

  body.mow-ecosystem-visual #sec_analysis #analysis .mowConclusionsList {
    margin: 2px 0 4px;
    padding: 8px 9px 8px 28px;
    color: #493c30;
    border: 1px solid var(--eco-surface-line-soft);
    border-radius: 9px;
    background: rgba(255, 252, 243, .46);
  }

  body.mow-ecosystem-visual #sec_analysis #analysis .dur-low { color: #8f2c3a; }
  body.mow-ecosystem-visual #sec_analysis #analysis .dur-mid { color: #80530f; }
  body.mow-ecosystem-visual #sec_analysis #analysis .dur-high { color: #2d7049; }
  body.mow-ecosystem-visual #sec_analysis #analysis .dur-veryhigh { color: #285f8b; }

  /* Scenario Generator specialist workspace. */
  body.mow-ecosystem-visual #mowScenarioGen {
    --text: var(--eco-surface-ink);
    --muted: var(--eco-surface-muted);
    --stroke: var(--eco-surface-line);
    --stroke2: var(--eco-surface-line-soft);
    position: relative;
    overflow: hidden;
    padding: 0;
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .68);
    border-radius: 14px;
    background:
      radial-gradient(circle at 18% -8%, rgba(255, 255, 255, .72), transparent 38%),
      linear-gradient(145deg, var(--eco-surface-paper), var(--eco-surface-paper-deep));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
  }

  body.mow-ecosystem-visual #mowScenarioGen::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: color-mix(in srgb, var(--accent) 78%, var(--eco-action) 22%);
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-hd {
    gap: 10px 14px;
    padding: 16px 14px 13px;
    border-bottom: 1px solid var(--eco-surface-line-soft);
    background: rgba(255, 252, 243, .34);
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-title {
    color: color-mix(in srgb, var(--accent) 40%, var(--eco-action-dark) 60%);
    font: 800 20px/1.1 Georgia, "Times New Roman", serif;
    letter-spacing: .005em;
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-actions {
    gap: 7px;
  }

  body.mow-ecosystem-visual #mowScenarioGen .sg-label {
    color: #665846;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: 1;
  }

  body.mow-ecosystem-visual #mowScenarioGen .sg-select {
    min-height: 39px;
    padding: 8px 34px 8px 10px;
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .52);
    background-color: var(--eco-surface-input);
    background-image:
      linear-gradient(45deg, transparent 50%, #26313a 50%),
      linear-gradient(135deg, #26313a 50%, transparent 50%);
    background-position:
      calc(100% - 17px) calc(50% - 2px),
      calc(100% - 12px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px rgba(255, 255, 255, .72);
    color-scheme: light;
    appearance: none;
  }

  body.mow-ecosystem-visual #mowScenarioGen .sg-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 62%, var(--eco-action) 38%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1px rgba(255, 255, 255, .72);
  }

  body.mow-ecosystem-visual #mowScenarioGen .btn {
    min-height: 39px;
    color: var(--eco-surface-ink);
    border-color: rgba(91, 75, 51, .48);
    background: rgba(255, 253, 246, .68);
    box-shadow: none;
    font-weight: 750;
  }

  body.mow-ecosystem-visual #mowScenarioGen #mowScenarioGenBtn {
    color: #fff;
    border-color: rgba(84, 27, 37, .74);
    background: linear-gradient(180deg, var(--eco-action), var(--eco-action-dark));
    box-shadow: 0 7px 16px rgba(84, 27, 37, .18);
  }

  body.mow-ecosystem-visual #mowScenarioGen .btn:hover:not(:disabled),
  body.mow-ecosystem-visual #mowScenarioGen .btn:focus-visible:not(:disabled) {
    color: #4f2430;
    border-color: rgba(123, 41, 53, .48);
    background: rgba(123, 41, 53, .08);
  }

  body.mow-ecosystem-visual #mowScenarioGen #mowScenarioGenBtn:hover:not(:disabled),
  body.mow-ecosystem-visual #mowScenarioGen #mowScenarioGenBtn:focus-visible:not(:disabled) {
    color: #fff;
    border-color: rgba(244, 223, 170, .50);
    background: linear-gradient(180deg, #8b3441, #63212c);
  }

  body.mow-ecosystem-visual #mowScenarioGen .btn:disabled {
    color: #887d6e;
    border-color: rgba(91, 75, 51, .26);
    background: rgba(222, 211, 190, .48);
    opacity: .74;
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-bd {
    margin-top: 0;
    padding: 12px 14px 4px;
    color: var(--eco-surface-ink);
  }

  body.mow-ecosystem-visual #mowScenarioGen .muted {
    color: var(--eco-surface-muted);
    opacity: 1;
  }

  body.mow-ecosystem-visual #mowScenarioGen .blk {
    margin: 0 0 10px;
    padding: 11px 12px;
    color: var(--eco-surface-ink);
    border-color: var(--eco-surface-line-soft);
    border-radius: 10px;
    background: rgba(255, 252, 243, .52);
    box-shadow: inset 0 1px rgba(255, 255, 255, .54);
  }

  body.mow-ecosystem-visual #mowScenarioGen .k {
    color: color-mix(in srgb, var(--accent) 38%, var(--eco-action-dark) 62%);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body.mow-ecosystem-visual #mowScenarioGen .mono {
    color: #4b3c30;
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-ft {
    margin: 5px 14px 0;
    padding: 10px 0 12px;
    color: #746653;
    border-top: 1px solid var(--eco-surface-line-soft);
    font-size: 10px;
    line-height: 1.35;
  }

  body.mow-ecosystem-visual #mowScenarioGen .sg-fb {
    color: #245d3f;
    font-weight: 700;
  }

  @media (max-width: 760px) {
    body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-panel {
      top: 2vh;
      bottom: 0;
      border-radius: 18px 18px 0 0;
    }

    body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-head {
      padding: 14px;
    }

    body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-title {
      font-size: 21px;
    }

    body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-content {
      padding: 11px 10px 15px;
    }

    body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-groupbody {
      padding-inline: 10px;
    }

    body.mow-ecosystem-visual #mowScenarioGen .panel-hd,
    body.mow-ecosystem-visual #mowScenarioGen .panel-bd {
      padding-inline: 11px;
    }

    body.mow-ecosystem-visual #mowScenarioGen .panel-title {
      font-size: 19px;
    }

    body.mow-ecosystem-visual #mowScenarioGen .panel-ft {
      margin-inline: 11px;
    }
  }
}

/* === VISUAL-2B.1: native option palette correction after HOTFIX-90G rebase === */
body.mow-ecosystem-visual #mowFleetSetupModal select {
  color-scheme: light;
}

body.mow-ecosystem-visual #mowFleetSetupModal select option {
  color: var(--eco-surface-ink);
  background: var(--eco-surface-input);
}

body.mow-ecosystem-visual #mowFleetSetupModal select option:disabled {
  color: #827869;
  background: #eee4d2;
}

/* ==========================================================================
   RESPONSIVE AND INTERACTION STATES
   Source lineage: mow_builder_visual2c_responsive.css
   ========================================================================== */

/*
 * Man O' War Fleet Builder — VISUAL-2C experimental branch
 * Responsive, interaction-state and accessibility polish.
 *
 * Scope discipline:
 * - CSS-only overrides gated by body.mow-ecosystem-visual;
 * - no public contract, persistence, identifiers, DOM order or application logic changes;
 * - existing desktop/mobile controllers remain the sole owners of behavior.
 */

@media screen {
  body.mow-ecosystem-visual {
    overflow-x: clip;
  }

  body.mow-ecosystem-visual .wrap,
  body.mow-ecosystem-visual .wrap > *,
  body.mow-ecosystem-visual .card,
  body.mow-ecosystem-visual .card .bd,
  body.mow-ecosystem-visual .section,
  body.mow-ecosystem-visual .row,
  body.mow-ecosystem-visual .mow-modal-panel,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-panel,
  body.mow-ecosystem-visual #mowScenarioGen,
  body.mow-ecosystem-visual #sec_analysis {
    min-width: 0;
  }

  body.mow-ecosystem-visual input,
  body.mow-ecosystem-visual select,
  body.mow-ecosystem-visual textarea,
  body.mow-ecosystem-visual button {
    max-width: 100%;
  }

  body.mow-ecosystem-visual button:disabled,
  body.mow-ecosystem-visual input:disabled,
  body.mow-ecosystem-visual select:disabled,
  body.mow-ecosystem-visual textarea:disabled,
  body.mow-ecosystem-visual [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .58;
    filter: saturate(.62);
  }

  body.mow-ecosystem-visual button:focus-visible,
  body.mow-ecosystem-visual a:focus-visible,
  body.mow-ecosystem-visual summary:focus-visible,
  body.mow-ecosystem-visual input:focus-visible,
  body.mow-ecosystem-visual select:focus-visible,
  body.mow-ecosystem-visual textarea:focus-visible,
  body.mow-ecosystem-visual [tabindex]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 66%, #fff 34%);
    outline-offset: 2px;
  }

  body.mow-ecosystem-visual .card button:focus-visible,
  body.mow-ecosystem-visual .kpi button:focus-visible,
  body.mow-ecosystem-visual .mow-modal-panel button:focus-visible,
  body.mow-ecosystem-visual #mowFleetSetupModal button:focus-visible,
  body.mow-ecosystem-visual #mowScenarioGen button:focus-visible {
    outline-color: color-mix(in srgb, var(--accent) 58%, var(--eco-action) 42%);
  }

  body.mow-ecosystem-visual [aria-invalid="true"],
  body.mow-ecosystem-visual .is-error input,
  body.mow-ecosystem-visual .is-error select,
  body.mow-ecosystem-visual .is-error textarea {
    border-color: color-mix(in srgb, var(--eco-danger) 72%, #4d201f 28%);
    box-shadow: 0 0 0 3px rgba(139, 51, 64, .13);
  }

  body.mow-ecosystem-visual #mowFleetFluffName[aria-invalid="true"],
  body.mow-ecosystem-visual .mow-modal-panel input[aria-invalid="true"],
  body.mow-ecosystem-visual .mow-modal-panel select[aria-invalid="true"],
  body.mow-ecosystem-visual .mow-modal-panel textarea[aria-invalid="true"],
  body.mow-ecosystem-visual #mowFleetSetupModal input[aria-invalid="true"],
  body.mow-ecosystem-visual #mowFleetSetupModal select[aria-invalid="true"] {
    border-color: color-mix(in srgb, var(--eco-danger) 72%, #4d201f 28%);
    box-shadow: 0 0 0 3px rgba(139, 51, 64, .16), inset 0 1px rgba(255, 255, 255, .72);
  }

  body.mow-ecosystem-visual .mow-fleet-actions-status,
  body.mow-ecosystem-visual #mowFleetActiveName,
  body.mow-ecosystem-visual .mow-fleet-library-name,
  body.mow-ecosystem-visual .mow-fleet-library-meta,
  body.mow-ecosystem-visual .mow-matching-fleet-name,
  body.mow-ecosystem-visual .mow-matching-fleet-meta,
  body.mow-ecosystem-visual .mow-share-summary,
  body.mow-ecosystem-visual .mow-modal-hint,
  body.mow-ecosystem-visual .mow-help-content,
  body.mow-ecosystem-visual .mowUnitPreviewPanel,
  body.mow-ecosystem-visual #mowScenarioGen .blk,
  body.mow-ecosystem-visual #sec_analysis #analysis {
    overflow-wrap: anywhere;
  }

  body.mow-ecosystem-visual .mow-modal-panel,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-content,
  body.mow-ecosystem-visual .mowUnitPreviewPanel {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel {
    overflow-x: auto;
    overflow-y: auto;
  }

  body.mow-ecosystem-visual .mow-modal-head {
    position: sticky;
    top: -16px;
    z-index: 4;
    box-shadow: 0 9px 18px rgba(62, 42, 25, .10);
  }

  body.mow-ecosystem-visual .mow-modal-footer {
    position: sticky;
    bottom: -16px;
    z-index: 3;
    margin: 16px -16px -16px;
    padding: 13px 16px 16px;
    background:
      linear-gradient(180deg, rgba(239, 227, 198, 0), rgba(239, 227, 198, .94) 22%, rgba(239, 227, 198, .99));
  }

  body.mow-ecosystem-visual .mow-modal-x,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-close,
  body.mow-ecosystem-visual #mobNavClose {
    flex: 0 0 auto;
    min-width: 42px;
    min-height: 44px;
  }

  body.mow-ecosystem-visual .mow-fleet-toast {
    width: max-content;
    text-align: center;
    white-space: normal;
  }

  body.mow-ecosystem-visual .mow-fleet-toast.is-success {
    color: #e8f7ee;
    border-color: rgba(91, 184, 128, .46);
    background: #173426;
  }

  body.mow-ecosystem-visual .mow-fleet-toast.is-error {
    color: #ffe8e9;
    border-color: rgba(218, 105, 119, .50);
    background: #45212a;
  }

  body.mow-ecosystem-visual .mow-fleet-library-empty,
  body.mow-ecosystem-visual .mow-ship-names-empty {
    min-height: 92px;
    display: grid;
    place-items: center;
    line-height: 1.45;
  }

  body.mow-ecosystem-visual .mow-shared-fleet-banner {
    overflow: hidden;
  }

  body.mow-ecosystem-visual .mow-shared-fleet-actions,
  body.mow-ecosystem-visual .mow-fleet-library-actions,
  body.mow-ecosystem-visual .mow-r90-actions,
  body.mow-ecosystem-visual #mowScenarioGen .panel-actions {
    min-width: 0;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-content {
    min-height: 0;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-rowhead,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-actions {
    flex-wrap: wrap;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-state {
    flex: 0 0 auto;
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-actions {
    flex-wrap: wrap;
  }

  body.mow-ecosystem-visual #mowScenarioGen .sg-select {
    min-width: 0;
  }

  body.mow-ecosystem-visual #sec_analysis #analysis .pill {
    max-width: 100%;
    white-space: normal;
  }

  body.mow-ecosystem-visual #mobNavPanel {
    max-height: min(72dvh, 610px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body.mow-ecosystem-visual .mobNavItem {
    min-height: 44px;
  }

  body.mow-ecosystem-visual .mobNavItem small {
    flex: 0 0 auto;
  }
}

@media screen and (max-width: 1080px) {
  body.mow-ecosystem-visual .wrap {
    width: 100%;
  }

  body.mow-ecosystem-visual .right {
    width: 100%;
  }
}

@media screen and (max-width: 760px) {
  body.mow-ecosystem-visual .mow-modal {
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
  }

  body.mow-ecosystem-visual .mow-modal-panel {
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 8px 8px;
  }

  body.mow-ecosystem-visual .mow-modal-head {
    align-items: flex-start;
  }

  body.mow-ecosystem-visual .mow-modal-head h2 {
    min-width: 0;
    padding-top: 4px;
    line-height: 1.15;
  }

  body.mow-ecosystem-visual .mow-modal-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-panel {
    top: max(8px, env(safe-area-inset-top, 0px));
    bottom: 0;
    max-height: calc(100dvh - 8px - env(safe-area-inset-top, 0px));
    border-radius: 18px 18px 0 0;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-head {
    align-items: center;
    gap: 10px;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-head > div {
    min-width: 0;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-hint {
    line-height: 1.35;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-content {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row button,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-actions button,
  body.mow-ecosystem-visual #mowScenarioGen .btn,
  body.mow-ecosystem-visual .mow-modal-footer button {
    min-height: 44px;
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-hd {
    align-items: flex-start;
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-actions {
    width: 100%;
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-actions > * {
    min-width: 0;
  }

  body.mow-ecosystem-visual #mowScenarioGen .sg-select {
    flex: 1 1 180px;
  }
}

@media screen and (max-width: 700px) {
  body.mow-ecosystem-visual .wrap {
    padding: 10px;
    gap: 12px;
  }

  body.mow-ecosystem-visual .card {
    border-radius: 15px;
  }

  body.mow-ecosystem-visual .card::before,
  body.mow-ecosystem-visual .kpi::before {
    inset: 5px;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mow-ecosystem-visual .mow-fleet-actions-main button {
    min-height: 44px;
    overflow-wrap: anywhere;
  }

  body.mow-ecosystem-visual .mow-shared-fleet-banner {
    margin-inline: 10px;
  }

  body.mow-ecosystem-visual .mow-shared-fleet-actions button {
    min-height: 44px;
  }

  body.mow-ecosystem-visual .mow-fleet-toast {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  body.mow-ecosystem-visual #mobNavBtn {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    min-height: 52px;
  }

  body.mow-ecosystem-visual #mobNavPanel {
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    width: min(340px, calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel {
    max-width: 100%;
  }

  body.mow-ecosystem-visual .mowUnitPreviewPanel table {
    min-width: 560px;
  }
}

@media screen and (max-width: 430px) {
  body.mow-ecosystem-visual > header {
    padding-inline: 12px;
  }

  body.mow-ecosystem-visual > header h1 {
    overflow-wrap: anywhere;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-bar {
    margin-inline: 0;
    padding: 10px;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-main {
    gap: 7px;
  }

  body.mow-ecosystem-visual .mow-fleet-actions-main button {
    padding-inline: 7px;
    font-size: 12px;
  }

  body.mow-ecosystem-visual .mow-fleet-library-actions button,
  body.mow-ecosystem-visual .mow-shared-fleet-actions button,
  body.mow-ecosystem-visual .mow-modal-footer button,
  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-actions button {
    flex: 1 1 100%;
  }

  body.mow-ecosystem-visual .mow-modal-panel {
    padding-inline: 12px;
  }

  body.mow-ecosystem-visual .mow-modal-head {
    top: -16px;
    margin-inline: -12px;
    padding-inline: 12px;
  }

  body.mow-ecosystem-visual .mow-modal-footer {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-rowhead {
    align-items: flex-start;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-state {
    margin-left: auto;
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-counters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mow-ecosystem-visual #mowScenarioGen .panel-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.mow-ecosystem-visual #mowScenarioGen .sg-select,
  body.mow-ecosystem-visual #mowScenarioGen .btn {
    width: 100%;
  }
}

@media screen and (max-width: 350px) {
  body.mow-ecosystem-visual .mow-fleet-actions-main {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-counters {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mow-ecosystem-visual *,
  body.mow-ecosystem-visual *::before,
  body.mow-ecosystem-visual *::after {
    scroll-behavior: auto;
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }

  body.mow-ecosystem-visual #mobNavBtn,
  body.mow-ecosystem-visual .mow-fleet-toast,
  body.mow-ecosystem-visual .mowSetupGroupChevron,
  body.mow-ecosystem-visual .mowUnitPreviewTrigger,
  body.mow-ecosystem-visual .mowUnitPreviewTrigger::after {
    animation-duration: .001ms;
    transition-duration: .001ms;
  }
}

@media (forced-colors: active) {
  body.mow-ecosystem-visual button:focus-visible,
  body.mow-ecosystem-visual a:focus-visible,
  body.mow-ecosystem-visual summary:focus-visible,
  body.mow-ecosystem-visual input:focus-visible,
  body.mow-ecosystem-visual select:focus-visible,
  body.mow-ecosystem-visual textarea:focus-visible,
  body.mow-ecosystem-visual [tabindex]:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ==========================================================================
   CLASSIC DARK THEME
   Source lineage: mow_builder_visual2d_dark.css
   ========================================================================== */

/*
 * Man O' War Fleet Builder — VISUAL-2D experimental branch
 * Switchable Light / Dark — Classic / System theme.
 *
 * The dark palette is derived from the accepted pre-VISUAL Builder:
 * --bg, --header-bg, --stroke, --stroke2, --text, --muted and the
 * per-fleet --accent values remain the source of colour identity.
 * Layout, hierarchy and component geometry remain owned by VISUAL-2C.
 */

@media screen {
  /* Theme preference control — shared by both themes. */
  body.mow-ecosystem-visual .mowThemeControlRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(148px, .72fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(91, 75, 51, .42);
    border-radius: 12px;
    color: var(--eco-ink);
    background: rgba(255, 253, 246, .78);
    box-shadow: inset 0 1px rgba(255, 255, 255, .70);
  }

  body.mow-ecosystem-visual .mowThemeControlCopy {
    min-width: 0;
  }

  body.mow-ecosystem-visual .mowThemeControlLabel {
    display: block;
    color: var(--eco-ink);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.25;
  }

  body.mow-ecosystem-visual .mowThemeControlHint {
    display: block;
    margin-top: 2px;
    color: var(--eco-ink-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
  }

  body.mow-ecosystem-visual #mowVisualThemeSelect {
    min-width: 0;
    width: 100%;
    min-height: 38px;
    padding: 7px 32px 7px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
  }

  /* Classic dark tokens. The per-fleet script continues to own --bg,
     --header-bg, --accent, --accent-soft, --ok-color and --fail-color. */
  html[data-theme="dark"] body.mow-ecosystem-visual {
    color-scheme: dark;
    --eco-bg: var(--bg, #0b1118);
    --eco-bg-deep: color-mix(in srgb, var(--bg, #0b1118) 76%, #02070b 24%);
    --eco-panel: var(--header-bg, #0f1a24);
    --eco-panel-2: color-mix(in srgb, var(--header-bg, #0f1a24) 76%, #263545 24%);
    --eco-panel-3: color-mix(in srgb, var(--bg, #0b1118) 78%, #02070b 22%);
    --eco-white: #eef3f8;
    --eco-sidebar-muted: #94a6bd;
    --eco-paper: #101923;
    --eco-paper-2: #172333;
    --eco-paper-3: #131e2a;
    --eco-ink: #d8e2ef;
    --eco-ink-muted: #94a6bd;
    --eco-paper-line: #304052;
    --eco-action: color-mix(in srgb, var(--accent) 48%, #243242 52%);
    --eco-action-dark: color-mix(in srgb, var(--accent) 26%, #101823 74%);
    --eco-gold: #c9a95b;
    --eco-sea: #2f6778;
    --eco-sea-dark: #183b47;
    --eco-ok: #2cc271;
    --eco-warn: #d08b2a;
    --eco-danger: #ff5964;
    --eco-shadow: 0 12px 34px rgba(0, 0, 0, .42);
    --eco-surface-paper: #111b27;
    --eco-surface-paper-deep: #0d151f;
    --eco-surface-ink: #d8e2ef;
    --eco-surface-muted: #94a6bd;
    --eco-surface-line: rgba(92, 116, 143, .56);
    --eco-surface-line-soft: rgba(68, 90, 116, .42);
    --eco-surface-input: #0f1a24;
    --eco-surface-input-hover: #142231;
    color: var(--text, #d8e2ef);
    background:
      radial-gradient(1200px 600px at 20% 0%, var(--accent-soft), transparent 60%),
      radial-gradient(900px 500px at 85% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
      var(--bg, #0b1118);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual::before {
    opacity: .16;
    background-image:
      linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .009) 1px, transparent 1px);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual > header {
    color: var(--text, #d8e2ef);
    background:
      radial-gradient(circle at 50% -100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 52%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--header-bg, #0f1a24) 94%, #233140 6%),
        color-mix(in srgb, var(--header-bg, #0f1a24) 74%, var(--bg, #0b1118) 26%)
      );
    border-bottom-color: var(--stroke2, #1b2a3d);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .28);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual > header h1,
  html[data-theme="dark"] body.mow-ecosystem-visual #current-fleet-name,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetActiveName {
    color: var(--text, #d8e2ef);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .brand-link,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowBuildStamp {
    color: color-mix(in srgb, var(--accent) 52%, #fff 48%);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #current-fleet-name {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke, #223044));
    background: color-mix(in srgb, var(--accent-soft) 58%, rgba(0, 0, 0, .18));
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .langBtn,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-fleet-actions-main button {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background: rgba(0, 0, 0, .18);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .langBtn.active,
  html[data-theme="dark"] body.mow-ecosystem-visual .langBtn[aria-pressed="true"] {
    color: color-mix(in srgb, var(--accent) 48%, #fff 52%);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke, #223044));
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-fleet-actions-bar {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .14));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-fleet-actions-status,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowAppFooter,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-shared-fleet-banner span {
    color: var(--muted, #94a6bd);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .card,
  html[data-theme="dark"] body.mow-ecosystem-visual .kpi {
    --text: var(--eco-ink);
    --muted: var(--eco-ink-muted);
    --stroke: #304052;
    --stroke2: #223044;
    color: var(--eco-ink);
    border-color: var(--stroke, #223044);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
      color-mix(in srgb, var(--header-bg, #0f1a24) 42%, var(--bg, #0b1118) 58%);
    box-shadow: var(--eco-shadow);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .card::before,
  html[data-theme="dark"] body.mow-ecosystem-visual .kpi::before {
    border-color: rgba(113, 137, 164, .18);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .card .hd {
    color: #f2f5f8;
    border-bottom-color: color-mix(in srgb, var(--accent) 18%, var(--stroke2, #1b2a3d));
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 44%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 18%, var(--header-bg, #0f1a24) 82%),
        color-mix(in srgb, var(--header-bg, #0f1a24) 88%, var(--bg, #0b1118) 12%) 70%,
        color-mix(in srgb, var(--header-bg, #0f1a24) 68%, #000 32%)
      );
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .card .hd small,
  html[data-theme="dark"] body.mow-ecosystem-visual .card .hd .muted {
    color: #aebdcb;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .section + .section,
  html[data-theme="dark"] body.mow-ecosystem-visual #unitsRoot .section:first-child,
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_allies {
    border-top-color: var(--stroke2, #1b2a3d);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .section h3,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowFleetSectionHeading h3,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSelectorBlock > .muteline,
  html[data-theme="dark"] body.mow-ecosystem-visual #chaosVariantWrap > .muteline,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowBatch90bRuleset label,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowSetupGroupTitle {
    color: color-mix(in srgb, var(--accent) 56%, #f1f5f8 44%);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .title,
  html[data-theme="dark"] body.mow-ecosystem-visual .check-text,
  html[data-theme="dark"] body.mow-ecosystem-visual .pts,
  html[data-theme="dark"] body.mow-ecosystem-visual .pill b,
  html[data-theme="dark"] body.mow-ecosystem-visual .kpi .val {
    color: var(--text, #d8e2ef);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .desc,
  html[data-theme="dark"] body.mow-ecosystem-visual .muteline,
  html[data-theme="dark"] body.mow-ecosystem-visual .note,
  html[data-theme="dark"] body.mow-ecosystem-visual .muted,
  html[data-theme="dark"] body.mow-ecosystem-visual .kpi .lab,
  html[data-theme="dark"] body.mow-ecosystem-visual .kpi small {
    color: var(--muted, #94a6bd);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSelectorBlock,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowBatch90bRuleset,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowSetupGroup {
    color: var(--text, #d8e2ef);
    border-color: color-mix(in srgb, var(--accent) 20%, var(--stroke, #223044));
    background: color-mix(in srgb, var(--accent-soft) 18%, rgba(0, 0, 0, .18));
    box-shadow: none;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSelectorBlock {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--stroke, #223044));
    background: color-mix(in srgb, var(--accent-soft) 42%, rgba(0, 0, 0, .18));
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowSetupGroupHeader {
    color: var(--text, #d8e2ef);
    background: rgba(255, 255, 255, .025);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowSetupGroupHeader:hover,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowSetupGroupHeader:focus-visible {
    background: rgba(255, 255, 255, .055);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowSetupGroupStatus,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-b90-rules-note,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-b90-rules-tip,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowThemeControlHint {
    color: var(--muted, #94a6bd);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowSetupGroupRows .mowUpToggle,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowUpToggleHost .mowUpToggle,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowToolsToggleRow,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowThemeControlRow {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background: rgba(0, 0, 0, .16);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowThemeControlLabel {
    color: var(--text, #d8e2ef);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetFluffName,
  html[data-theme="dark"] body.mow-ecosystem-visual #fleetSelect,
  html[data-theme="dark"] body.mow-ecosystem-visual #chaosVariantSelect,
  html[data-theme="dark"] body.mow-ecosystem-visual .card input[type="number"],
  html[data-theme="dark"] body.mow-ecosystem-visual .card input[type="text"],
  html[data-theme="dark"] body.mow-ecosystem-visual .card input:not([type]),
  html[data-theme="dark"] body.mow-ecosystem-visual .card select,
  html[data-theme="dark"] body.mow-ecosystem-visual .card textarea,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSelectorBlock select,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-panel input,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-panel select,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-panel textarea,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowVisualThemeSelect {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background-color: #0f1a24;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    color-scheme: dark;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual select option,
  html[data-theme="dark"] body.mow-ecosystem-visual .card select option,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-panel select option,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal select option {
    color: #fff;
    background: #1b2a38;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual select option:disabled,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal select option:disabled {
    color: rgba(216, 226, 239, .48);
    background: #14202c;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual input::placeholder,
  html[data-theme="dark"] body.mow-ecosystem-visual textarea::placeholder {
    color: rgba(148, 166, 189, .70);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual button {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background: rgba(0, 0, 0, .18);
    box-shadow: none;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual button:hover:not(:disabled),
  html[data-theme="dark"] body.mow-ecosystem-visual button:focus-visible:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--stroke, #223044));
    background: rgba(255, 255, 255, .055);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual button.primary,
  html[data-theme="dark"] body.mow-ecosystem-visual .card button.primary,
  html[data-theme="dark"] body.mow-ecosystem-visual .kpi button.primary,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen #mowScenarioGenBtn {
    color: #f5f8fb;
    border-color: color-mix(in srgb, var(--accent) 48%, var(--stroke, #223044));
    background: color-mix(in srgb, var(--accent-soft) 78%, rgba(0, 0, 0, .16));
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .card button,
  html[data-theme="dark"] body.mow-ecosystem-visual .kpi button,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-panel button,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal button,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .btn {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background: rgba(0, 0, 0, .18);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .pill,
  html[data-theme="dark"] body.mow-ecosystem-visual .check,
  html[data-theme="dark"] body.mow-ecosystem-visual .preview,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUpToggle {
    color: var(--muted, #94a6bd);
    border-color: var(--stroke, #223044);
    background: rgba(0, 0, 0, .15);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .preview textarea {
    color: var(--text, #d8e2ef);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .check-pill.ok,
  html[data-theme="dark"] body.mow-ecosystem-visual .ok.check-pill {
    color: color-mix(in srgb, var(--ok-color, #2cc271) 30%, white);
    border-color: color-mix(in srgb, var(--ok-color, #2cc271) 35%, transparent);
    background: color-mix(in srgb, var(--ok-color, #2cc271) 16%, transparent);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .check-pill.fail,
  html[data-theme="dark"] body.mow-ecosystem-visual .fail.check-pill {
    color: color-mix(in srgb, var(--fail-color, #ff4747) 30%, white);
    border-color: color-mix(in srgb, var(--fail-color, #ff4747) 35%, transparent);
    background: color-mix(in srgb, var(--fail-color, #ff4747) 16%, transparent);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .check-pill.warn,
  html[data-theme="dark"] body.mow-ecosystem-visual .warn.check-pill {
    color: #ffe3b9;
    border-color: rgba(208, 139, 42, .42);
    background: rgba(208, 139, 42, .18);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-shared-fleet-banner {
    color: var(--text, #d8e2ef);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke, #223044));
    background: color-mix(in srgb, var(--accent-soft) 64%, rgba(0, 0, 0, .20));
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowAppFooter {
    border-top-color: var(--stroke2, #1b2a3d);
  }

  /* Standard modals and secondary surfaces. */
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-backdrop,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-backdrop {
    background: rgba(2, 7, 12, .82);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-panel,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-ship-names-inline,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(0, 0, 0, .10)),
      #0f1822;
    box-shadow: 0 24px 76px rgba(0, 0, 0, .58);
    scrollbar-color: #40556f #101823;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-head,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpHd {
    color: #fff;
    border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--stroke2, #1b2a3d));
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 42%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 20%, var(--header-bg, #0f1a24) 80%),
        color-mix(in srgb, var(--header-bg, #0f1a24) 82%, #070c12 18%)
      );
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-head h2,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpTitle {
    color: #fff;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-hint,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-help-content,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpSub,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpLbl,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNotes,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNotesList,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNoteRow,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-ship-name-source {
    color: var(--muted, #94a6bd);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpVal,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpMove,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel td,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpSectionLbl,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpNoteRow b,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-ship-name-group h3,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-ship-name-squadron-title {
    color: var(--text, #d8e2ef);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel th,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel td,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpSep,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-ship-name-squadron,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-ship-name-group {
    border-color: var(--stroke2, #1b2a3d);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel th,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel .mowUpMove code,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowUnitPreviewPanel code,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-help-content code {
    color: #dce7f2;
    border-color: var(--stroke, #223044);
    background: rgba(0, 0, 0, .18);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-fleet-library-item,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-matching-fleet-item,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-help-section,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-portable-group,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-ship-name-squadron {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke2, #1b2a3d);
    background: rgba(255, 255, 255, .025);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-fleet-library-meta,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-matching-fleet-meta,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-portable-meta,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-portable-technical,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-portable-group.is-action p {
    color: var(--muted, #94a6bd);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-footer {
    border-top-color: var(--stroke2, #1b2a3d);
    background:
      linear-gradient(180deg, rgba(15, 24, 34, 0), rgba(15, 24, 34, .96) 22%, #0f1822);
  }

  /* Fleet Setup. */
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-panel {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .10)),
      #0f1822;
    box-shadow: 0 28px 86px rgba(0, 0, 0, .62);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-head {
    color: #fff;
    border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--stroke2, #1b2a3d));
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 42%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 20%, var(--header-bg, #0f1a24) 80%),
        color-mix(in srgb, var(--header-bg, #0f1a24) 82%, #070c12 18%)
      );
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-title,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-rowhead strong,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-power-label,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-name label,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-counters label {
    color: var(--text, #d8e2ef);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-hint,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row small,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row p,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-fixed-target small {
    color: var(--muted, #94a6bd);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-group,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-fixed-target {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke2, #1b2a3d);
    background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-group > summary {
    color: color-mix(in srgb, var(--accent) 48%, #fff 52%);
    background: rgba(255, 255, 255, .02);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-group[open] > summary {
    background: color-mix(in srgb, var(--accent-soft) 36%, rgba(0, 0, 0, .12));
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row select,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row input {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background: #0f1a24;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    color-scheme: dark;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row select:disabled,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-row input:disabled {
    color: rgba(148, 166, 189, .62);
    background: #111a24;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-state {
    color: #ffe3b9;
    border-color: rgba(208, 139, 42, .38);
    background: rgba(208, 139, 42, .16);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowFleetSetupModal .mow-r90-state.ok {
    color: #bdf5d2;
    border-color: rgba(44, 194, 113, .38);
    background: rgba(44, 194, 113, .15);
  }

  /* Fleet Analysis. */
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis .bd,
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis {
    color: var(--text, #d8e2ef);
    background: transparent;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis > .muteline,
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis .pill,
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis .mowConclusionsList {
    color: var(--muted, #94a6bd);
    border-color: var(--stroke, #223044);
    background: rgba(0, 0, 0, .15);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis .pill b,
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis > .muteline > span:not(.pill) {
    color: var(--text, #d8e2ef);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis .dur-low { color: #ff7b84; }
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis .dur-mid { color: #f1bd5b; }
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis .dur-high { color: #63d494; }
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis #analysis .dur-veryhigh { color: #70b5ea; }

  /* Scenario Generator. */
  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .10)),
      color-mix(in srgb, var(--header-bg, #0f1a24) 40%, var(--bg, #0b1118) 60%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen::before {
    background: var(--accent);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .panel-title,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .k,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .mono {
    color: var(--text, #d8e2ef);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .muted,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .panel-ft,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .sg-label {
    color: var(--muted, #94a6bd);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .sg-select {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background-color: #0f1a24;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    color-scheme: dark;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .blk,
  html[data-theme="dark"] body.mow-ecosystem-visual #mowScenarioGen .sg-fb {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke2, #1b2a3d);
    background: rgba(0, 0, 0, .15);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  }

  /* Responsive/state layer adaptations. */
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-modal-head {
    box-shadow: 0 9px 18px rgba(0, 0, 0, .26);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual [aria-invalid="true"],
  html[data-theme="dark"] body.mow-ecosystem-visual .is-error input,
  html[data-theme="dark"] body.mow-ecosystem-visual .is-error select,
  html[data-theme="dark"] body.mow-ecosystem-visual .is-error textarea {
    border-color: #d95662;
    box-shadow: 0 0 0 3px rgba(217, 86, 98, .18);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mow-fleet-library-empty,
  html[data-theme="dark"] body.mow-ecosystem-visual .mow-ship-names-empty {
    color: var(--muted, #94a6bd);
    border-color: var(--stroke2, #1b2a3d);
    background: rgba(0, 0, 0, .12);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual #mobNavPanel,
  html[data-theme="dark"] body.mow-ecosystem-visual .mobNavItem {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background: #0f1822;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mobNavItem small,
  html[data-theme="dark"] body.mow-ecosystem-visual .mobNavStats {
    color: var(--muted, #94a6bd);
  }
}

@media screen and (max-width: 520px) {
  body.mow-ecosystem-visual .mowThemeControlRow {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Roster print remains deliberately light and ink-efficient in every theme.
   The existing print roster rule owns the actual printed content. */
@media print {
  :root {
    color-scheme: light !important;
  }
}

/* ==========================================================================
   HEADER LOCALE AND THEME CONTROLS
   Source lineage: v2d1_header.css
   ========================================================================== */

/* Man O' War Fleet Builder — VISUAL-2D.1 global header controls. */

@media screen {
  body.mow-ecosystem-visual .mowHeaderControls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    margin-top: 11px;
  }

  body.mow-ecosystem-visual .mowHeaderControls .langSwitch {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  }

  body.mow-ecosystem-visual .mowHeaderControls .langBtn {
    min-width: 42px;
    min-height: 34px;
    margin: 0;
    padding: 5px 10px;
  }

  body.mow-ecosystem-visual .mowHeaderControls .langBtn[hidden] {
    display: none !important;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost {
    display: inline-flex;
    min-width: 0;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost .mowThemeControlRow {
    display: inline-grid;
    grid-template-columns: auto auto minmax(138px, auto);
    align-items: center;
    gap: 7px;
    width: auto;
    min-height: 42px;
    padding: 4px 5px 4px 10px;
    color: #dfe8ec;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost .mowThemeControlIcon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    color: color-mix(in srgb, var(--accent) 52%, #fff 48%);
    font-size: 16px;
    line-height: 1;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost .mowThemeControlCopy {
    display: block;
    min-width: 0;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost .mowThemeControlLabel {
    display: block;
    color: inherit;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: .02em;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost .mowThemeControlHint {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost #mowVisualThemeSelect {
    width: auto;
    min-width: 148px;
    min-height: 34px;
    margin: 0;
    padding: 5px 30px 5px 10px;
    color: var(--eco-ink, #241b13);
    border: 1px solid rgba(91, 75, 51, .48);
    border-radius: 999px;
    background-color: var(--eco-paper-3, #f4eddf);
    box-shadow: inset 0 1px rgba(255, 255, 255, .65);
    font-size: 12px;
    font-weight: 800;
    color-scheme: light;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost #mowVisualThemeSelect:hover {
    border-color: color-mix(in srgb, var(--accent) 52%, rgba(91, 75, 51, .48));
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost #mowVisualThemeSelect:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 68%, #fff 32%);
    outline-offset: 2px;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowHeaderControls .langSwitch,
  html[data-theme="dark"] body.mow-ecosystem-visual .mowHeaderThemeHost .mowThemeControlRow {
    border-color: var(--stroke, #223044);
    background: rgba(0, 0, 0, .18);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowHeaderThemeHost #mowVisualThemeSelect {
    color: var(--text, #d8e2ef);
    border-color: var(--stroke, #223044);
    background-color: #0f1a24;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
    color-scheme: dark;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual .mowHeaderThemeHost #mowVisualThemeSelect option {
    color: var(--text, #d8e2ef);
    background: #0f1a24;
  }

  body.mow-ecosystem-visual #mowBuilderToolsRows > #mowVisualThemeRow {
    display: none !important;
  }
}

@media screen and (max-width: 560px) {
  body.mow-ecosystem-visual .mowHeaderControls {
    gap: 7px;
  }

  body.mow-ecosystem-visual .mowHeaderControls .langSwitch {
    flex: 0 0 auto;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost {
    flex: 0 1 auto;
    max-width: 100%;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost .mowThemeControlRow {
    grid-template-columns: auto minmax(118px, 1fr);
    gap: 5px;
    max-width: 100%;
    padding-left: 8px;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost .mowThemeControlCopy {
    display: none;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost #mowVisualThemeSelect {
    min-width: 128px;
    max-width: 48vw;
  }
}

@media screen and (max-width: 360px) {
  body.mow-ecosystem-visual .mowHeaderControls .langBtn {
    min-width: 38px;
    padding-inline: 8px;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost .mowThemeControlRow {
    padding-left: 7px;
  }

  body.mow-ecosystem-visual .mowHeaderThemeHost #mowVisualThemeSelect {
    min-width: 116px;
    max-width: 45vw;
    padding-left: 8px;
  }
}

@media print {
  .mowHeaderControls {
    display: none !important;
  }
}

/* ==========================================================================
   FINAL DARK CONTRAST AND SCROLL CLOSURE
   Source lineage: mow_builder_visual2d3_fixes.css
   ========================================================================== */

/*
 * Man O' War Fleet Builder — VISUAL-2D.3 corrective pass.
 * Dark-theme contrast closure and inline Unit Preview scroll chaining.
 * Presentation only; no domain, contract or persistence changes.
 */

@media screen {
  /*
   * Unit Preview is an inline document section, not a modal scroll trap.
   * Keep horizontal table containment, but allow vertical wheel/touch
   * scrolling to continue through the page at the panel boundaries.
   */
  body.mow-ecosystem-visual .mowUnitPreviewPanel {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
  }

  /* VISUAL-2B assigned a light-theme brown directly to note cells. */
  html[data-theme="dark"] body.mow-ecosystem-visual
    .mowUnitPreviewPanel table.mowUpNotesTable td.wn-text {
    color: #aebdcb;
  }

  /*
   * Fleet Analysis owns a local --muted value for the parchment theme.
   * Inline analysis headings use that variable, so replace the local
   * palette in Classic Dark instead of fighting every inline declaration.
   */
  html[data-theme="dark"] body.mow-ecosystem-visual #sec_analysis .bd {
    --text: #d8e2ef;
    --muted: #aebdcb;
  }

  html[data-theme="dark"] body.mow-ecosystem-visual
    #sec_analysis #analysis .muted,
  html[data-theme="dark"] body.mow-ecosystem-visual
    #sec_analysis #analysis small {
    color: #aebdcb;
  }
}