/* ============================================================
   KreepCore - Desktop 3-Column Grid (DEFAULT on >=1440px)
   ============================================================
   Activates when body has .kc-layout-desktop3 class AND
   the viewport is >=1440px. The class is added automatically
   by js/kc-desktop-layout.js on matching viewports.

   IMPORTANT:
   - Under 1440px the @media query turns all rules inert, so
     mobile/tablet layout is never affected.
   - Nothing in this file modifies existing component rules
     unless scoped under .kc-layout-desktop3.
   ============================================================ */

@media (min-width: 1440px) {

  /* --- Shell wrappers injected by JS --- */
  .kc-layout-desktop3 .kc-d3-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 16px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 12px 16px;
    box-sizing: border-box;
    align-items: stretch;
  }

  /* Ensure the shell takes the space left by the sticky header
     and the bottom nav/ticker. Reserve the bottom-nav height on
     #game-ui itself so flow layout accounts for the fixed overlay
     and the shell can safely flex to fill the rest. */
  .kc-layout-desktop3 #game-ui:not(.hidden) {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--nav-height, 48px);
    box-sizing: border-box;
    overflow: hidden;
  }

  .kc-layout-desktop3 .kc-d3-shell {
    flex: 1;
    min-height: 0;
    grid-template-rows: 1fr;
  }

  /* Keep the ticker hidden on desktop3 (promo content already absorbed
     by the dashboard hero) but show the bottom nav so Fleets / Map /
     Comms / Events stay reachable. On desktop3 it renders as a slim
     horizontal strip at the bottom of the viewport. */
  .kc-layout-desktop3 #news-ticker {
    display: none !important;
  }

  .kc-layout-desktop3 .bottom-nav {
    z-index: 5;
  }

  /* Strip the mobile bottom padding meant to clear the nav/ticker.
     The shell's own height calc already reserves the nav space, so
     extra padding here just creates a visible gap above the nav. */
  .kc-layout-desktop3 .main-content {
    padding-bottom: 0;
  }

  /* Drop the shell's own bottom padding too so the columns sit flush
     against the fixed bottom-nav (their height calc includes a 24px
     gutter already split between top padding and bottom breathing). */
  .kc-layout-desktop3 .kc-d3-shell {
    padding-bottom: 0;
  }

  /* The desktop-wide rule at layout.css:~205 forces .main-content to be
     min-height: calc(100dvh - sticky-header-h) so the orbital feed anchors
     to the bottom on mobile/tablet desktop. In the 3-column shell the
     center column already has its own scroll container, so that rule just
     inflates the center content past its natural size and shows a
     phantom scrollbar on views like Resumen. Reset it. */
  .kc-layout-desktop3 #screen-empire > .main-content,
  .kc-layout-desktop3 #screen-rankings > .main-content,
  .kc-layout-desktop3 #screen-events > .main-content,
  .kc-layout-desktop3 #screen-admin-log > .main-content {
    min-height: 0;
    max-width: none;
  }

  /* Anchor the orbital feed to the bottom of the center column on the
     PLANET sub-tab. The reset above zeroed main-content height to kill
     a phantom scrollbar on other tabs; re-enable the flex-fill chain
     only when #planet-surface-view is visible, so empire-dashboard-content
     (layout.css:210) and #planet-surface-view margin-top:auto can push
     the feed to the bottom. */
  .kc-layout-desktop3 #screen-empire.active:has(#planet-surface-view:not(.hidden)) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .kc-layout-desktop3 #screen-empire.active:has(#planet-surface-view:not(.hidden)) > .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Break-out full-width sections also assume viewport-width, which
     overflows the center column. Keep them within their parent. */
  .kc-layout-desktop3 #empire-dashboard-content > .section.full-width {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  .kc-layout-desktop3 #empire-dashboard-content > .section.full-width:has(.resource-compact) {
    width: calc(100% + var(--panel-padding));
  }

  /* Keep the fullscreen system map contained inside the center column
     instead of jumping to position:fixed across the whole viewport. */
  .kc-layout-desktop3 #screen-map.active {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    z-index: auto;
    /* Embedded map: lift bottom overlays above the slim bottom nav strip
       (nav z-index is only 5 here, panels would otherwise paint over it). */
    --map-overlay-bottom: calc(var(--nav-height, 48px) + 12px);
  }

  body.kc-layout-desktop3:has(#screen-map.active) .bottom-nav {
    z-index: 25;
  }

  /* Solar map fills the center column — no scroll chrome while it is active.
     Side panels stay visible (same 3-column shell as other tabs). */
  .kc-layout-desktop3 .kc-d3-center:has(#screen-map.active) {
    overflow: hidden;
  }

  .kc-layout-desktop3 .kc-d3-center > #screen-map.active {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Comms: scroll only inside #community-content, not the center column. */
  .kc-layout-desktop3 .kc-d3-center:has(#screen-community.active) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .kc-layout-desktop3 .kc-d3-center > #screen-community.active {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  /* System map uses an opaque WebGL skybox; solid container avoids page bg bleed. */
  .kc-layout-desktop3 .system-map-container {
    background: rgba(2, 6, 14, 0.98);
  }
  .kc-layout-desktop3 .system-map-container::after {
    display: block;
    background: radial-gradient(
      circle at center,
      transparent 38%,
      rgba(2, 6, 14, 0.38) 100%
    );
  }

  /* The global body::after scan-line overlay (css/base.css) is fixed over the
     whole viewport at z-index:0. On desktop3 the system map has a transparent
     canvas so those horizontal lines shine through and, combined with the map
     grid of star points, read as a woven grid pattern. Suppress them on the
     desktop3 shell; other shells (mobile/tablet) keep the scan lines. */
  body.kc-layout-desktop3::after {
    display: none;
  }

  /* --- Left sidebar --- */
  .kc-layout-desktop3 .kc-d3-left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    min-height: 0;
    height: 100%;
  }

  .kc-layout-desktop3 .kc-d3-left-section {
    background: rgba(10, 14, 28, 0.55);
    border: 1px solid rgba(var(--accent-rgb, 56, 189, 248), 0.18);
    border-radius: 10px;
    padding: 12px;
  }

  .kc-layout-desktop3 .kc-d3-section-title {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan, #38bdf8);
    margin: 0 0 10px 0;
    opacity: 0.9;
  }

  .kc-layout-desktop3 .kc-d3-colony-list,
  .kc-layout-desktop3 .kc-d3-fleet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .kc-layout-desktop3 .kc-d3-colony-card,
  .kc-layout-desktop3 .kc-d3-fleet-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(20, 26, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
  }

  .kc-layout-desktop3 .kc-d3-colony-card:hover,
  .kc-layout-desktop3 .kc-d3-fleet-card:hover {
    background: rgba(28, 40, 72, 0.75);
    border-color: rgba(var(--accent-rgb, 56, 189, 248), 0.35);
  }

  .kc-layout-desktop3 .kc-d3-colony-card.is-active,
  .kc-layout-desktop3 .kc-d3-fleet-card.is-active {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.5);
  }

  .kc-layout-desktop3 .kc-d3-colony-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
  }

  .kc-layout-desktop3 .kc-d3-colony-body,
  .kc-layout-desktop3 .kc-d3-fleet-body {
    min-width: 0;
  }

  .kc-layout-desktop3 .kc-d3-colony-name {
    font-size: 13px;
    font-weight: 600;
    color: #e7ecf7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kc-layout-desktop3 .kc-d3-fleet-name {
    font-size: 13px;
    font-weight: 600;
    color: #e7ecf7;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .kc-layout-desktop3 .kc-d3-fleet-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
  }
  .kc-layout-desktop3 .kc-d3-fleet-name .kc-d3-fleet-status,
  .kc-layout-desktop3 .kc-d3-fleet-name .kc-d3-avail-badge {
    flex-shrink: 0;
  }

  .kc-layout-desktop3 .kc-d3-colony-meta,
  .kc-layout-desktop3 .kc-d3-fleet-meta {
    font-size: 11px;
    color: rgba(230, 240, 255, 0.6);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kc-layout-desktop3 .kc-d3-colony-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .kc-layout-desktop3 .kc-d3-fleet-card.is-stalled {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.5);
  }
  .kc-layout-desktop3 .kc-d3-fleet-card.is-stalled:hover {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.7);
  }
  .kc-layout-desktop3 .kc-d3-fleet-warning {
    font-size: 11px;
    color: #fbbf24;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kc-layout-desktop3 .kc-d3-fleet-wear {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 10px;
    color: rgba(230, 240, 255, 0.55);
  }
  .kc-layout-desktop3 .kc-d3-fleet-wear-label {
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .kc-layout-desktop3 .kc-d3-fleet-wear-track {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
  }
  .kc-layout-desktop3 .kc-d3-fleet-wear-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
  }
  .kc-layout-desktop3 .kc-d3-fleet-wear-pct {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  /* --- Detected fleets (kinetic intel from sensors) --- */
  /* Section separator inside the unified fleet list. Visually distinct
     from the fleet card itself so the user reads it as a sub-header. */
  .kc-layout-desktop3 .kc-d3-fleet-section-sep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 10px 4px 2px;
    padding: 4px 0 2px;
    border-top: 1px dashed rgba(0, 240, 255, 0.18);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 240, 255, 0.55);
  }
  .kc-layout-desktop3 .kc-d3-fleet-section-count {
    color: rgba(0, 240, 255, 0.85);
    font-weight: 600;
  }

  /* Base detected card. Lower contrast than own fleets so own stays the
     dominant signal; tier modifiers below tint accent up. */
  .kc-layout-desktop3 .kc-d3-detected-card {
    background: rgba(20, 26, 48, 0.4);
    border-color: rgba(148, 163, 184, 0.18);
  }
  .kc-layout-desktop3 .kc-d3-detected-card:hover {
    background: rgba(28, 40, 72, 0.6);
    border-color: rgba(148, 163, 184, 0.45);
  }
  .kc-layout-desktop3 .kc-d3-detected-icon {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Tier 1: just a blip — most ambiguous, slate gray */
  .kc-layout-desktop3 .kc-d3-detected-tier1 .kc-d3-fleet-name { color: #c0cad9; }
  .kc-layout-desktop3 .kc-d3-detected-tier1 .kc-d3-detected-icon { color: #94a3b8; }

  /* Tier 2: signature read — warmer because we have at least mass info */
  .kc-layout-desktop3 .kc-d3-detected-tier2 .kc-d3-detected-icon {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
  }
  .kc-layout-desktop3 .kc-d3-detected-tier2 .kc-d3-fleet-name { color: #fde9c7; }

  /* Tier 3: owner identified — full amber, the contact is named */
  .kc-layout-desktop3 .kc-d3-detected-tier3 .kc-d3-detected-card,
  .kc-layout-desktop3 .kc-d3-detected-card.kc-d3-detected-tier3 {
    border-color: rgba(245, 158, 11, 0.35);
  }
  .kc-layout-desktop3 .kc-d3-detected-tier3 .kc-d3-detected-icon {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
  }
  .kc-layout-desktop3 .kc-d3-detected-tier3 .kc-d3-fleet-name { color: #fde9c7; }

  /* Tier 4: full composition — slightly bolder accent */
  .kc-layout-desktop3 .kc-d3-detected-tier4 .kc-d3-detected-card,
  .kc-layout-desktop3 .kc-d3-detected-card.kc-d3-detected-tier4 {
    border-color: rgba(245, 158, 11, 0.55);
  }

  .kc-layout-desktop3 .kc-d3-fleet-status--detected {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.45);
    color: #cbd5e1;
  }
  .kc-layout-desktop3 .kc-d3-detected-tier3 .kc-d3-fleet-status--detected,
  .kc-layout-desktop3 .kc-d3-detected-tier4 .kc-d3-fleet-status--detected {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
  }

  .kc-layout-desktop3 .kc-d3-coords {
    color: rgba(230, 240, 255, 0.45);
    font-family: var(--font-mono);
  }

  .kc-layout-desktop3 .kc-d3-res-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: rgba(230, 240, 255, 0.85);
    font-family: var(--font-mono);
  }

  .kc-layout-desktop3 .kc-d3-colony-alerts,
  .kc-layout-desktop3 .kc-d3-detail-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
  }

  .kc-layout-desktop3 .kc-d3-detail-alerts {
    margin-top: 12px;
  }

  .kc-layout-desktop3 .kc-d3-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1.2;
    background: rgba(245, 158, 11, 0.08);
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, 0.4);
  }

  .kc-layout-desktop3 .kc-d3-alert-chip svg {
    flex-shrink: 0;
  }

  .kc-layout-desktop3 .kc-d3-alert-chip.is-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.5);
    animation: kc-d3-pulse 1.4s ease-in-out infinite;
  }

  @keyframes kc-d3-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
    50%      { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
  }

  /* --- Center column --- */
  .kc-layout-desktop3 .kc-d3-center {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb, 56, 189, 248), 0.25) transparent;
  }

  /* Screens must use natural content height inside the center column so
     overflow scrolls here instead of clipping cards behind fixed UI. */
  .kc-layout-desktop3 .kc-d3-center > .screen.active {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
  }

  /* Thin overlay scrollbars (WebKit) that stay out of the way. */
  .kc-layout-desktop3 .kc-d3-left::-webkit-scrollbar,
  .kc-layout-desktop3 .kc-d3-right::-webkit-scrollbar,
  .kc-layout-desktop3 .kc-d3-center::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
  }
  .kc-layout-desktop3 .kc-d3-left::-webkit-scrollbar-thumb,
  .kc-layout-desktop3 .kc-d3-right::-webkit-scrollbar-thumb,
  .kc-layout-desktop3 .kc-d3-center::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.2s;
  }
  .kc-layout-desktop3 .kc-d3-left:hover::-webkit-scrollbar-thumb,
  .kc-layout-desktop3 .kc-d3-right:hover::-webkit-scrollbar-thumb,
  .kc-layout-desktop3 .kc-d3-center:hover::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb, 56, 189, 248), 0.25);
  }

  /* --- Right panel --- */
  .kc-layout-desktop3 .kc-d3-right {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    height: 100%;
  }

  .kc-layout-desktop3 .kc-d3-detail-panel {
    background: rgba(10, 14, 28, 0.6);
    border: 1px solid rgba(var(--accent-rgb, 56, 189, 248), 0.22);
    border-radius: 10px;
    padding: 14px;
  }

  /* Priority alerts panel (right column) */
  .kc-layout-desktop3 .kc-d3-alert-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .kc-layout-desktop3 .kc-d3-alert-card {
    --alert-accent: #f59e0b;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--alert-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--alert-accent) 32%, transparent);
    color: #fde68a;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }

  .kc-layout-desktop3 .kc-d3-alert-card:hover {
    background: color-mix(in srgb, var(--alert-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--alert-accent) 55%, transparent);
  }

  .kc-layout-desktop3 .kc-d3-alert-card-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fbbf24;
  }

  .kc-layout-desktop3 .kc-d3-alert-card-icon svg {
    width: 20px;
    height: 20px;
  }

  .kc-layout-desktop3 .kc-d3-alert-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .kc-layout-desktop3 .kc-d3-alert-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #fde68a;
    line-height: 1.3;
  }

  .kc-layout-desktop3 .kc-d3-alert-card-sub {
    font-size: 10.5px;
    color: rgba(253, 230, 138, 0.7);
    line-height: 1.35;
  }

  /* Current objectives panel (left column). Compact mirror of the
     Empire/Overview objectives grid: title on one line, slim progress
     bar + counter underneath. Keeps the left rail dense. */
  .kc-layout-desktop3 .kc-d3-objectives-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px 0;
  }
  .kc-layout-desktop3 .kc-d3-objectives-header .kc-d3-section-title {
    margin: 0;
  }
  .kc-layout-desktop3 .kc-d3-objectives-progress {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
    opacity: 0.85;
  }
  .kc-layout-desktop3 .kc-d3-objective-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .kc-layout-desktop3 .kc-d3-objective-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.05);
    border: 1px solid rgba(var(--accent-rgb, 56, 189, 248), 0.22);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font: inherit;
  }
  .kc-layout-desktop3 .kc-d3-objective-card:hover {
    background: rgba(var(--accent-rgb, 56, 189, 248), 0.12);
    border-color: rgba(var(--accent-rgb, 56, 189, 248), 0.55);
  }
  .kc-layout-desktop3 .kc-d3-objective-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kc-layout-desktop3 .kc-d3-objective-progress {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .kc-layout-desktop3 .kc-d3-objective-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(var(--accent-rgb, 56, 189, 248), 0.15);
    overflow: hidden;
  }
  .kc-layout-desktop3 .kc-d3-objective-fill {
    display: block;
    height: 100%;
    background: var(--cyan, #38bdf8);
    border-radius: 2px;
    transition: width 0.25s ease;
  }
  .kc-layout-desktop3 .kc-d3-objective-counter {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-dim, rgba(226, 232, 240, 0.65));
    white-space: nowrap;
  }

  /* Latest Updates feed (right column). Rows mirror the Priority Alerts
     pattern: icon left, bold title in the accent colour, dim subtitle
     underneath, timestamp pinned top-right. Background and border are
     tinted with the per-row accent via color-mix so each category reads
     at a glance (ore=orange, research=violet, combat=red, ...). */
  .kc-layout-desktop3 .kc-d3-feed-panel {
    max-height: calc(100vh - 260px);
    overflow-y: auto;
  }
  .kc-layout-desktop3 .kc-d3-feed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .kc-layout-desktop3 .kc-d3-feed-row {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 44px 10px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--feed-accent, #38bdf8) 8%, rgba(12, 18, 36, 0.6));
    border: 1px solid color-mix(in srgb, var(--feed-accent, #38bdf8) 28%, transparent);
    transition: background 0.15s, border-color 0.15s;
  }
  .kc-layout-desktop3 .kc-d3-feed-row.is-clickable {
    cursor: pointer;
  }
  .kc-layout-desktop3 .kc-d3-feed-row:hover {
    background: color-mix(in srgb, var(--feed-accent, #38bdf8) 14%, rgba(12, 18, 36, 0.6));
    border-color: color-mix(in srgb, var(--feed-accent, #38bdf8) 45%, transparent);
  }
  .kc-layout-desktop3 .kc-d3-feed-row.is-clickable:hover {
    background: color-mix(in srgb, var(--feed-accent, #38bdf8) 22%, rgba(12, 18, 36, 0.6));
    border-color: color-mix(in srgb, var(--feed-accent, #38bdf8) 65%, transparent);
  }
  .kc-layout-desktop3 .kc-d3-feed-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--feed-accent, #38bdf8);
  }
  .kc-layout-desktop3 .kc-d3-feed-icon svg {
    width: 22px;
    height: 22px;
  }
  .kc-layout-desktop3 .kc-d3-feed-row-body {
    flex: 1;
    min-width: 0;
  }
  .kc-layout-desktop3 .kc-d3-feed-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: color-mix(in srgb, var(--feed-accent, #38bdf8) 65%, #f8fafc);
    word-break: break-word;
  }
  .kc-layout-desktop3 .kc-d3-feed-sub {
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1.35;
    color: rgba(230, 240, 255, 0.58);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    word-break: break-word;
  }
  .kc-layout-desktop3 .kc-d3-feed-byline {
    color: rgba(230, 240, 255, 0.85);
    font-weight: 600;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
  }
  .kc-layout-desktop3 .kc-d3-feed-byline.is-self {
    color: var(--cyan, #38bdf8);
    background: rgba(var(--accent-rgb, 56, 189, 248), 0.12);
    border-color: rgba(var(--accent-rgb, 56, 189, 248), 0.35);
  }
  .kc-layout-desktop3 .kc-d3-feed-time {
    position: absolute;
    top: 9px;
    right: 10px;
    font-size: 9.5px;
    color: rgba(148, 163, 184, 0.55);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
  }
  .kc-layout-desktop3 .kc-d3-feed-empty {
    font-size: 11.5px;
    color: rgba(148, 163, 184, 0.65);
    padding: 8px 2px;
  }

  .kc-layout-desktop3 .kc-d3-detail-title {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cyan, #38bdf8);
    margin: 0 0 10px 0;
  }

  .kc-layout-desktop3 .kc-d3-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .kc-layout-desktop3 .kc-d3-detail-header .kc-d3-detail-title {
    margin: 0 0 6px 0;
    flex: 1;
    min-width: 0;
  }

  .kc-layout-desktop3 .kc-d3-detail-empire-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-top: -2px;
    border-radius: 6px;
    border: 1px solid rgba(var(--accent-rgb, 56, 189, 248), 0.25);
    background: rgba(var(--accent-rgb, 56, 189, 248), 0.08);
    color: rgba(230, 240, 255, 0.7);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .kc-layout-desktop3 .kc-d3-detail-empire-btn:hover {
    background: rgba(var(--accent-rgb, 56, 189, 248), 0.18);
    border-color: rgba(var(--accent-rgb, 56, 189, 248), 0.55);
    color: var(--cyan, #38bdf8);
  }

  .kc-layout-desktop3 .kc-d3-detail-subtitle {
    font-size: 12px;
    color: rgba(230, 240, 255, 0.7);
    margin-bottom: 10px;
  }

  .kc-layout-desktop3 .kc-d3-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .kc-layout-desktop3 .kc-d3-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
  }

  .kc-layout-desktop3 .kc-d3-detail-row .kc-d3-label {
    color: rgba(230, 240, 255, 0.55);
  }

  .kc-layout-desktop3 .kc-d3-detail-row .kc-d3-value {
    color: #e7ecf7;
    font-family: var(--font-mono);
    font-weight: 600;
  }

  .kc-layout-desktop3 .kc-d3-res-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
  }

  .kc-layout-desktop3 .kc-d3-res-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
  }

  .kc-layout-desktop3 .kc-d3-res-row.kc-d3-res-head {
    background: transparent;
    padding: 2px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(230, 240, 255, 0.45);
    font-weight: 600;
  }

  .kc-layout-desktop3 .kc-d3-res-row .kc-d3-res-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 500;
  }

  .kc-layout-desktop3 .kc-d3-res-row .kc-d3-res-cur,
  .kc-layout-desktop3 .kc-d3-res-row .kc-d3-res-perh {
    font-family: var(--font-mono);
    font-weight: 600;
    color: #e7ecf7;
    text-align: right;
    min-width: 52px;
    white-space: nowrap;
  }

  .kc-layout-desktop3 .kc-d3-res-row .kc-d3-perh.is-pos { color: #4ade80; }
  .kc-layout-desktop3 .kc-d3-res-row .kc-d3-perh.is-neg { color: #f87171; }
  .kc-layout-desktop3 .kc-d3-res-row .kc-d3-dim { color: rgba(230, 240, 255, 0.35); }

  .kc-layout-desktop3 .kc-d3-empty {
    font-size: 12px;
    color: rgba(230, 240, 255, 0.5);
    text-align: center;
    padding: 20px 10px;
  }

  /* --- Available fleets (templates + stationed mercenaries) --- */
  .kc-layout-desktop3 .kc-d3-avail-portrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(var(--accent-rgb, 56, 189, 248), 0.35);
    background: rgba(12, 18, 36, 0.8);
  }

  .kc-layout-desktop3 .kc-d3-avail-portrait-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Status pill shown next to the fleet name in the unified list.
     Active-mission variant gets its color from JS (inline style) so
     it matches the mission icon tint. Available variant is a fixed
     neutral-green pill. */
  .kc-layout-desktop3 .kc-d3-fleet-status {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: 1px;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.15);
    color: rgba(226, 232, 240, 0.85);
    white-space: nowrap;
  }

  .kc-layout-desktop3 .kc-d3-fleet-status--available {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.4);
    color: #86efac;
  }

  /* Consistent round icon container for active fleet cards. Previously
     set inline per card; extracted so variants stay visually aligned. */
  .kc-layout-desktop3 .kc-d3-fleet-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .kc-layout-desktop3 .kc-d3-avail-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-family: var(--font-mono);
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 999px;
    vertical-align: 1px;
    background: rgba(234, 179, 8, 0.12);
    color: #fde68a;
    border: 1px solid rgba(234, 179, 8, 0.35);
  }

  /* --- Loading skeletons --- */
  .kc-layout-desktop3 .kc-d3-skeleton-card {
    pointer-events: none;
    background: rgba(12, 18, 36, 0.55);
    border: 1px solid rgba(var(--accent-rgb, 56, 189, 248), 0.12);
  }

  .kc-layout-desktop3 .kc-d3-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(var(--accent-rgb, 56, 189, 248), 0.12) 40%,
        rgba(var(--accent-rgb, 56, 189, 248), 0.22) 50%,
        rgba(var(--accent-rgb, 56, 189, 248), 0.12) 60%,
        rgba(255, 255, 255, 0.05) 100%
      );
    background-size: 200% 100%;
    animation: kc-d3-shimmer 1.3s ease-in-out infinite;
  }

  .kc-layout-desktop3 .kc-d3-skeleton-line {
    border-radius: 4px;
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(var(--accent-rgb, 56, 189, 248), 0.10) 40%,
        rgba(var(--accent-rgb, 56, 189, 248), 0.20) 50%,
        rgba(var(--accent-rgb, 56, 189, 248), 0.10) 60%,
        rgba(255, 255, 255, 0.04) 100%
      );
    background-size: 200% 100%;
    animation: kc-d3-shimmer 1.3s ease-in-out infinite;
  }

  @keyframes kc-d3-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Scrollbar styling for the three columns (subtle). */
  .kc-layout-desktop3 .kc-d3-left::-webkit-scrollbar,
  .kc-layout-desktop3 .kc-d3-center::-webkit-scrollbar,
  .kc-layout-desktop3 .kc-d3-right::-webkit-scrollbar {
    width: 8px;
  }
  .kc-layout-desktop3 .kc-d3-left::-webkit-scrollbar-thumb,
  .kc-layout-desktop3 .kc-d3-center::-webkit-scrollbar-thumb,
  .kc-layout-desktop3 .kc-d3-right::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
  }

  /* Transitions (respect reduced motion) */
  @media (prefers-reduced-motion: reduce) {
    .kc-layout-desktop3 .kc-d3-colony-card,
    .kc-layout-desktop3 .kc-d3-fleet-card {
      transition: none;
    }
  }

  /* Skip-to-main accessibility helper (shown only when focused) */
  .kc-layout-desktop3 .kc-d3-skip {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .kc-layout-desktop3 .kc-d3-skip:focus {
    position: fixed;
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    z-index: 10000;
    background: #0a0e1c;
    color: var(--cyan, #38bdf8);
    padding: 8px 12px;
    border: 1px solid var(--cyan, #38bdf8);
    border-radius: 6px;
  }
}

/* Below 1440px: even if body has .kc-layout-desktop3, the wrappers
   behave transparently so mobile/tablet layout is unchanged. */
@media (max-width: 1439.98px) {
  .kc-layout-desktop3 .kc-d3-shell {
    display: contents; /* flatten grid, let children flow naturally */
  }
  .kc-layout-desktop3 .kc-d3-left,
  .kc-layout-desktop3 .kc-d3-right {
    display: none;
  }
  .kc-layout-desktop3 .kc-d3-center {
    display: contents;
  }
}