/* ==========================================================================
   THE HOUSE IN THE PINES — USFS STATION 09 DESIGN SYSTEM
   Cinematic Pacific Northwest Survival-Horror Research Archive
   
   Palette:
     --st-near-black:     #070A0C (Main viewport background, deep forest floor)
     --st-deep-charcoal:  #10161C (Structural panels, navigation rails, modals)
     --st-raised:         #151D25 (Elevated card bodies, inspection decks)
     --st-surface-hover:  #1A242E (Interactive surface hover state)
     --st-surface-subtle: #0B1015 (Recessed code wells, input fields)
     
     --st-border-subtle:  #1C2732 (Subtle dividing hairlines)
     --st-border:         #2B3945 (1px precision frame borders)
     --st-border-hover:   #3E5264 (Hover frame enhancement)
     --st-border-focus:   #82CFFF (Active / focused frame border)
     
     --st-text-primary:   #F0EEE8 (Warm white display headings & major text)
     --st-text-secondary: #C8D1D9 (Readable secondary text)
     --st-text-muted:     #A2ADB7 (Technical metadata, coordinates, labels)
     --st-text-dim:       #5C6A78 (Disabled or decorative grid markings)
     
     --st-icy-blue:       #82CFFF (Primary interactive accent, active pills, radio waves)
     --st-cabin-amber:    #D9A15B (Cabin lantern light, highlighted props, audio tapes)
     --st-warning-red:    #B84A48 (Red warnings, circuit breaker trips, destructive states)
   
   Typography:
     Display Titles:      'Michroma', 'Space Grotesk', sans-serif (Wide geometric)
     UI & Body:           'Saira Semi Condensed', -apple-system, sans-serif
     Technical Monospace: 'JetBrains Mono', ui-monospace, monospace
   ========================================================================== */

/* --- 1. DESIGN TOKENS & CANONICAL VARIABLE MAPPINGS --- */
:root {
  /* Surface Layers */
  --st-near-black: #070A0C;
  --st-deep-charcoal: #10161C;
  --st-raised: #151D25;
  --st-surface-hover: #1A242E;
  --st-surface-subtle: #0B1015;

  /* Hairline Borders & Frames */
  --st-border-subtle: #1C2732;
  --st-border: #2B3945;
  --st-border-hover: #3E5264;
  --st-border-focus: #82CFFF;

  /* Typography Colors */
  --st-text-primary: #F0EEE8;
  --st-text-secondary: #C8D1D9;
  --st-text-muted: #A2ADB7;
  --st-text-dim: #5C6A78;

  /* Atmospheric & Accent Colors */
  --st-icy-blue: #82CFFF;
  --st-icy-blue-dim: rgba(130, 207, 255, 0.12);
  --st-icy-blue-glow: rgba(130, 207, 255, 0.25);

  --st-cabin-amber: #D9A15B;
  --st-cabin-amber-dim: rgba(217, 161, 91, 0.12);
  --st-cabin-amber-glow: rgba(217, 161, 91, 0.25);

  --st-warning-red: #B84A48;
  --st-warning-red-dim: rgba(184, 74, 72, 0.14);
  --st-warning-red-glow: rgba(184, 74, 72, 0.35);

  /* Fonts */
  --font-display: 'Michroma', 'Space Grotesk', -apple-system, sans-serif;
  --font-body: 'Saira Semi Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Global Variable Overrides for Total Architectural Cohesion */
  --bg: #070A0C !important;
  --panel: #10161C !important;
  --panel2: #151D25 !important;
  --panel3: #0B1015 !important;
  --line: #2B3945 !important;
  --border: #2B3945 !important;
  --text: #F0EEE8 !important;
  --text-secondary: #C8D1D9 !important;
  --muted: #A2ADB7 !important;
  --text-muted: #A2ADB7 !important;
  
  --gold: #D9A15B !important;
  --green: #82CFFF !important;
  --blue: #82CFFF !important;
  --danger: #B84A48 !important;

  --accent-cyan: #82CFFF !important;
  --accent-cyan-dim: rgba(130, 207, 255, 0.12) !important;
  --border-cyan: rgba(130, 207, 255, 0.35) !important;

  --accent-mint: #82CFFF !important;
  --accent-mint-dim: rgba(130, 207, 255, 0.1) !important;
  --border-mint: rgba(130, 207, 255, 0.3) !important;

  --accent-amber: #D9A15B !important;
  --accent-amber-dim: rgba(217, 161, 91, 0.12) !important;
  --border-amber: rgba(217, 161, 91, 0.35) !important;
}

/* --- 2. GLOBAL RESET & BASE ATMOSPHERE --- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background-color: var(--st-near-black) !important;
  background-image: 
    radial-gradient(rgba(43, 57, 69, 0.35) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16, 22, 28, 0.6) 0%, rgba(7, 10, 12, 0.95) 100%) !important;
  background-size: 32px 32px, 100% 100% !important;
  background-attachment: fixed !important;
  color: var(--st-text-primary) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Atmospheric Render Canvas Layer */
#atmosphereCanvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 50 !important;
}

/* --- 3. TYPOGRAPHY HIERARCHY --- */
h1, h2, h3, h4, h5, h6,
.brand,
.brand-text,
.alien-hero-title,
.section-head h2,
.section-title,
.modal-title,
.sp-title,
.command-card-title,
.story-card h3,
.atmosphere-modal-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--st-text-primary) !important;
  font-weight: 700 !important;
}

p, span, div, a, label, li, input, select, textarea, button {
  font-family: var(--font-body);
}

/* Technical Monospace Elements */
code, pre, kbd,
.telemetry-coords,
.telemetry-coord,
.telemetry-freq,
.hero-telemetry-badge,
.top-nav-telemetry,
.breadcrumb-ws,
.top-search-kbd,
.station-tag,
.eyebrow,
.section-eyebrow,
.alien-hero-eyebrow,
.sp-eyebrow,
.count,
.command-stat-sub,
.bp-badge,
.prop-badge,
.sidebar-badge {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.04em !important;
}

.eyebrow,
.section-eyebrow,
.alien-hero-eyebrow,
.sp-eyebrow {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--st-icy-blue) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.station-tag {
  background: var(--st-raised) !important;
  color: var(--st-cabin-amber) !important;
  border: 1px solid var(--st-border) !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-xs) !important;
  font-size: 0.68rem !important;
}

/* --- 4. TOP HUD TELEMETRY & WORKSPACE NAVIGATION --- */
.tactical-top-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: rgba(16, 22, 28, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--st-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

.top-nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 24px !important;
  gap: 16px !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

.top-nav-telemetry {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 0.75rem !important;
  color: var(--st-text-muted) !important;
}

.brand-mark-mini {
  width: 20px !important;
  height: 20px !important;
  color: var(--st-icy-blue) !important;
}

.top-nav-workspaces {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--st-near-black) !important;
  padding: 4px 6px !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
}

.ws-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-xs) !important;
  color: var(--st-text-muted) !important;
  text-decoration: none !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ws-pill:hover {
  color: var(--st-text-primary) !important;
  background: var(--st-raised) !important;
  border-color: var(--st-border) !important;
}

.ws-pill.active {
  background: var(--st-raised) !important;
  border-color: var(--st-icy-blue) !important;
  color: var(--st-icy-blue) !important;
  box-shadow: 0 0 10px rgba(130, 207, 255, 0.18) !important;
}

.btn-top-search,
.btn-top-toc {
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text-secondary) !important;
  border-radius: var(--radius-xs) !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-top-search:hover,
.btn-top-toc:hover {
  border-color: var(--st-icy-blue) !important;
  color: var(--st-text-primary) !important;
  background: var(--st-surface-hover) !important;
}

/* --- 5. APP SIDEBAR & NAVIGATION RAIL --- */
.app-sidebar {
  background: var(--st-deep-charcoal) !important;
  border-right: 1px solid var(--st-border) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
}

.sidebar-brand-box {
  padding: 20px 18px !important;
  border-bottom: 1px solid var(--st-border) !important;
}

.sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: var(--st-text-primary) !important;
}

.sidebar-brand-glyph {
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--st-icy-blue) !important;
  flex-shrink: 0 !important;
}

.pines-brand-mark {
  width: 28px !important;
  height: 28px !important;
}

.sidebar-brand-text {
  font-family: var(--font-display) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  display: block !important;
  color: var(--st-text-primary) !important;
}

.sidebar-brand-badge {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  color: var(--st-cabin-amber) !important;
  letter-spacing: 0.08em !important;
}

.sidebar-group-title {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--st-text-dim) !important;
  padding: 16px 18px 8px 18px !important;
}

.sidebar-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 18px !important;
  color: var(--st-text-secondary) !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  border-left: 2px solid transparent !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-link:hover {
  background: var(--st-raised) !important;
  color: var(--st-text-primary) !important;
  border-left-color: var(--st-border-hover) !important;
}

.sidebar-link.active {
  background: var(--st-raised) !important;
  color: var(--st-text-primary) !important;
  border-left-color: var(--st-icy-blue) !important;
  font-weight: 600 !important;
}

.sidebar-link.active .sidebar-link-icon svg,
.sidebar-link.active .lucide-icon {
  color: var(--st-icy-blue) !important;
  filter: drop-shadow(0 0 6px var(--st-icy-blue-dim)) !important;
}

.sidebar-badge {
  background: var(--st-near-black) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text-muted) !important;
  font-size: 0.7rem !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-xs) !important;
}

.sidebar-atmosphere-pill {
  background: var(--st-icy-blue-dim) !important;
  border: 1px solid var(--st-border-focus) !important;
  color: var(--st-icy-blue) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-xs) !important;
  letter-spacing: 0.04em !important;
}

/* Lucide Icons Standardized */
.lucide-icon, svg.pines-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  stroke-width: 1.75px;
  stroke: currentColor;
  fill: none;
  vertical-align: middle;
  flex-shrink: 0;
}
.lucide-icon.sm {
  width: 14px;
  height: 14px;
}
.lucide-icon.md {
  width: 18px;
  height: 18px;
}
.lucide-icon.lg {
  width: 22px;
  height: 22px;
  stroke-width: 2px;
}

/* --- 6. UIVERSE SIGNATURE BUTTON FAMILY --- */
/* A. Solid Warm White Action Button (Primary) */
.sp-btn-primary,
.btn-alien-primary,
.uiverse-btn-solid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: var(--st-text-primary) !important;
  color: var(--st-near-black) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 22px !important;
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(240, 238, 232, 0.2) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sp-btn-primary:hover,
.btn-alien-primary:hover,
.uiverse-btn-solid:hover {
  background: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(240, 238, 232, 0.35) !important;
}

.sp-btn-primary .btn-arrow,
.btn-alien-primary .btn-arrow,
.uiverse-btn-solid .btn-arrow {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sp-btn-primary:hover .btn-arrow,
.btn-alien-primary:hover .btn-arrow,
.uiverse-btn-solid:hover .btn-arrow {
  transform: translateX(4px) !important;
}

/* B. Refined Outline Button */
.sp-btn-outline,
.btn-alien-secondary,
.uiverse-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--st-raised) !important;
  color: var(--st-text-primary) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 18px !important;
  font-family: var(--font-body) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sp-btn-outline:hover,
.btn-alien-secondary:hover,
.uiverse-btn-outline:hover {
  background: var(--st-surface-hover) !important;
  border-color: var(--st-icy-blue) !important;
  color: var(--st-icy-blue) !important;
  box-shadow: 0 0 14px var(--st-icy-blue-dim) !important;
  transform: translateY(-1px) !important;
}

/* C. Tactical Compact Action Button */
.btn-check-action,
.uiverse-btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--st-deep-charcoal) !important;
  color: var(--st-text-secondary) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-xs) !important;
  padding: 8px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.btn-check-action:hover,
.uiverse-btn-icon:hover {
  background: var(--st-raised) !important;
  border-color: var(--st-cabin-amber) !important;
  color: var(--st-text-primary) !important;
  box-shadow: 0 0 10px var(--st-cabin-amber-dim) !important;
}

/* D. Destructive Action Button */
.sp-btn-danger,
.uiverse-btn-danger {
  background: var(--st-warning-red-dim) !important;
  color: var(--st-text-primary) !important;
  border: 1px solid var(--st-warning-red) !important;
  border-radius: var(--radius-xs) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.sp-btn-danger:hover,
.uiverse-btn-danger:hover {
  background: var(--st-warning-red) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 16px var(--st-warning-red-glow) !important;
}

/* E. Uiverse Slide Button for Vault Downloads */
.uiverse-btn-slide {
  position: relative !important;
  overflow: hidden !important;
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--st-text-primary) !important;
  text-decoration: none !important;
  padding: 10px 18px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.22s ease !important;
}

.uiverse-btn-slide:hover {
  border-color: var(--st-icy-blue) !important;
  box-shadow: 0 0 16px var(--st-icy-blue-dim) !important;
  transform: translateY(-1px) !important;
}

/* --- 7. CARDS & ARCHITECTURAL SURFACES --- */
.command-card,
.bp-card,
.story-card,
.idea-card,
.ai-model-card,
.prop-item-card,
.checklist-item,
.qa-card,
.asset-card,
.card-item {
  background: var(--st-deep-charcoal) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.command-card:hover,
.bp-card:hover,
.story-card:hover,
.idea-card:hover,
.ai-model-card:hover,
.prop-item-card:hover {
  border-color: var(--st-border-hover) !important;
  background: var(--st-raised) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--st-icy-blue-dim) !important;
}

/* Image Exhibits */
.bp-img-wrap,
.prop-img-wrap {
  background: #040608 !important;
  border-bottom: 1px solid var(--st-border) !important;
  overflow: hidden !important;
  position: relative !important;
}

.bp-img-wrap img,
.prop-img-wrap img {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: block !important;
  width: 100% !important;
}

.bp-card:hover .bp-img-wrap img,
.prop-item-card:hover .prop-img-wrap img {
  transform: scale(1.03) !important;
}

/* --- 8. HERO: 50/50 SPLIT CINEMATIC ARCHIVE BANNER --- */
.alien-hero-section {
  padding: 24px 28px !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

.sp-hero-split-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--st-deep-charcoal) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  min-height: 540px !important;
}

.sp-hero-frame-pane {
  border-right: 1px solid var(--st-border) !important;
  position: relative !important;
  background: #04070A !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 36px !important;
  overflow: hidden !important;
  background-image: 
    linear-gradient(180deg, rgba(7, 10, 12, 0.72) 0%, rgba(7, 10, 12, 0.9) 100%),
    url('storefront-exports/roblox-game-thumbnail-16x9.png') !important;
  background-size: cover !important;
  background-position: center !important;
}

.sp-cross-glyph {
  width: 52px !important;
  height: 52px !important;
  fill: var(--st-icy-blue) !important;
  margin-bottom: 20px !important;
  filter: drop-shadow(0 0 12px var(--st-icy-blue-dim));
}

.sp-title-card {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  line-height: 1.15 !important;
  text-align: center !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  color: var(--st-text-primary) !important;
}

.sp-headline-stroked {
  color: transparent !important;
  -webkit-text-stroke: 1.5px var(--st-icy-blue) !important;
  display: inline-block !important;
}

.sp-title-sub {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: var(--st-cabin-amber) !important;
  margin-top: 20px !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.sp-hero-editorial-pane {
  padding: 44px 38px !important;
  background: var(--st-deep-charcoal) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.hero-telemetry-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-xs) !important;
  padding: 6px 12px !important;
  margin-bottom: 18px !important;
  font-size: 0.72rem !important;
  color: var(--st-text-muted) !important;
  width: fit-content !important;
}

.sp-hero-pitch {
  font-family: var(--font-display) !important;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--st-text-primary) !important;
  margin: 0 0 12px 0 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

.alien-hero-subtitle {
  color: var(--st-text-secondary) !important;
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
  margin: 0 0 20px 0 !important;
}

.sp-quick-search-box {
  background: var(--st-near-black) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-xs) !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  margin-bottom: 16px !important;
  transition: all 0.2s ease !important;
}

.sp-quick-search-box:hover {
  border-color: var(--st-icy-blue) !important;
  background: var(--st-raised) !important;
}

.sp-hero-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 22px !important;
}

.sp-tag {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  color: var(--st-text-muted) !important;
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-xs) !important;
  padding: 3px 8px !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.sp-tag:hover {
  border-color: var(--st-cabin-amber) !important;
  color: var(--st-cabin-amber) !important;
}

.alien-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 26px !important;
}

.alien-hero-stats {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--st-border) !important;
  flex-wrap: wrap !important;
}

.alien-stat-item {
  display: flex !important;
  flex-direction: column !important;
}

.alien-stat-num {
  font-family: var(--font-mono) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--st-text-primary) !important;
}

.alien-stat-label {
  font-size: 0.72rem !important;
  color: var(--st-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.alien-stat-sep {
  width: 1px !important;
  height: 24px !important;
  background: var(--st-border) !important;
}

/* --- 9. COMMAND CENTER TELEMETRY & WORKSPACE TILES --- */
.command-center-section {
  padding: 24px 28px !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

.command-center-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 18px !important;
  margin-top: 20px !important;
}

.command-card {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 160px !important;
}

.command-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.command-card-title {
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  color: var(--st-text-secondary) !important;
}

.command-card-badge {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-icy-blue) !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-xs) !important;
}

.command-stat-big {
  font-family: var(--font-mono) !important;
  font-size: 2.1rem !important;
  font-weight: 700 !important;
  color: var(--st-text-primary) !important;
  margin: 4px 0 !important;
}

.command-progress-bar {
  background: var(--st-near-black) !important;
  border: 1px solid var(--st-border) !important;
  height: 8px !important;
  border-radius: var(--radius-xs) !important;
  overflow: hidden !important;
  margin-top: 10px !important;
}

.command-progress-fill {
  background: linear-gradient(90deg, var(--st-icy-blue), var(--st-cabin-amber)) !important;
  height: 100% !important;
  transition: width 0.4s ease !important;
}

.command-actions-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding: 16px !important;
  background: var(--st-deep-charcoal) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
}

/* --- 10. ATMOSPHERE CONTROL PANEL & MODAL --- */
.atmosphere-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: rgba(7, 10, 12, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.atmosphere-modal-dialog {
  background: var(--st-deep-charcoal) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--st-border-subtle) !important;
  max-width: 920px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 28px !important;
}

.atmosphere-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--st-border) !important;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
}

.atmosphere-modal-title {
  font-size: 1.25rem !important;
  margin: 0 !important;
}

.atmosphere-modal-subtitle {
  color: var(--st-text-secondary) !important;
  font-size: 0.85rem !important;
  margin: 4px 0 0 0 !important;
}

.atmosphere-controls-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 18px !important;
  margin-bottom: 20px !important;
}

.atmosphere-segmented-control {
  display: inline-flex !important;
  background: var(--st-near-black) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-xs) !important;
  padding: 3px !important;
}

.segmented-btn {
  background: transparent !important;
  border: none !important;
  color: var(--st-text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-xs) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.segmented-btn.active {
  background: var(--st-raised) !important;
  color: var(--st-icy-blue) !important;
  box-shadow: 0 0 8px var(--st-icy-blue-dim) !important;
}

/* Atmosphere Mode Cards */
.atmosphere-modes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}

.atm-mode-card {
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  position: relative !important;
}

.atm-mode-card:hover {
  border-color: var(--st-border-hover) !important;
  background: var(--st-surface-hover) !important;
  transform: translateY(-2px) !important;
}

.atm-mode-card.active {
  border-color: var(--st-icy-blue) !important;
  background: var(--st-surface-hover) !important;
  box-shadow: 0 0 16px var(--st-icy-blue-dim), inset 0 0 0 1px var(--st-border-focus) !important;
}

.atm-swatch {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--radius-xs) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  background: var(--st-near-black) !important;
  border: 1px solid var(--st-border) !important;
  flex-shrink: 0 !important;
}

.atm-mode-body {
  flex: 1 !important;
}

.atm-mode-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}

.atm-mode-title {
  font-family: var(--font-display) !important;
  font-size: 0.86rem !important;
  color: var(--st-text-primary) !important;
  margin: 0 !important;
}

.atm-mode-badge {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  background: var(--st-near-black) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-cabin-amber) !important;
  padding: 1px 6px !important;
  border-radius: var(--radius-xs) !important;
}

.atm-mode-desc {
  font-size: 0.8rem !important;
  color: var(--st-text-secondary) !important;
  margin: 4px 0 0 0 !important;
  line-height: 1.4 !important;
}

.atm-mode-active-indicator {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: var(--st-icy-blue) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 8px !important;
}

.season-chips-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.season-chip {
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  color: var(--st-text-secondary) !important;
  border-radius: var(--radius-xs) !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.season-chip:hover {
  background: var(--st-surface-hover) !important;
  border-color: var(--st-cabin-amber) !important;
  color: var(--st-text-primary) !important;
}

/* --- 11. AI LAB & MULTI-INTELLIGENCE WORKSPACE --- */
.ai-lab-section {
  padding: 24px 28px !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

.ai-lab-deck {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--st-deep-charcoal) !important;
  overflow: hidden !important;
}

.ai-provider-column {
  border-right: 1px solid var(--st-border) !important;
  background: var(--st-raised) !important;
  padding: 20px !important;
}

.ai-chat-column {
  background: var(--st-deep-charcoal) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 560px !important;
}

.ai-terminal-output {
  flex: 1 !important;
  padding: 24px !important;
  overflow-y: auto !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
}

.ai-terminal-input-bar {
  padding: 16px 20px !important;
  border-top: 1px solid var(--st-border) !important;
  background: var(--st-raised) !important;
  display: flex !important;
  gap: 12px !important;
}

.ai-terminal-input {
  flex: 1 !important;
  background: var(--st-near-black) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-xs) !important;
  padding: 10px 14px !important;
  color: var(--st-text-primary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
}

.ai-terminal-input:focus {
  outline: none !important;
  border-color: var(--st-icy-blue) !important;
  box-shadow: 0 0 10px var(--st-icy-blue-dim) !important;
}

/* --- 12. INSTRUMENT-GRADE SIMULATORS (CIRCUIT BREAKER & RADIO) --- */
#simulator {
  padding: 24px 28px !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

.sim-chassis {
  background: var(--st-deep-charcoal) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.6) !important;
  padding: 28px !important;
}

.breaker-switch {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.breaker-status-on {
  color: var(--st-icy-blue) !important;
}

.breaker-status-tripped {
  color: var(--st-warning-red) !important;
  text-shadow: 0 0 10px var(--st-warning-red) !important;
}

/* Analog Radio Dial */
.radio-frequency-dial {
  background: var(--st-near-black) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 16px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.radio-frequency-display {
  font-family: var(--font-mono) !important;
  font-size: 2.4rem !important;
  color: var(--st-cabin-amber) !important;
  text-shadow: 0 0 14px var(--st-cabin-amber-glow) !important;
  letter-spacing: 0.08em !important;
}

/* --- 13. TACTICAL PROP VAULT & HARDWARE SUITE --- */
#props-vault {
  padding: 24px 28px !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

.prop-vault-toolbar {
  background: var(--st-deep-charcoal) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-sm) !important;
}

.prop-filter-btn {
  background: var(--st-raised) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-xs) !important;
  color: var(--st-text-muted) !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.prop-filter-btn.active,
.prop-filter-btn:hover {
  border-color: var(--st-cabin-amber) !important;
  color: var(--st-cabin-amber) !important;
}

/* --- 14. PRODUCTION CHECKLIST & QA AUDIT --- */
#checklist,
#qa-panel {
  padding: 24px 28px !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

.checklist-table,
.qa-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

.checklist-row,
.qa-row {
  background: var(--st-deep-charcoal) !important;
  border: 1px solid var(--st-border) !important;
  border-radius: var(--radius-xs) !important;
  transition: all 0.18s ease !important;
}

.checklist-row:hover,
.qa-row:hover {
  background: var(--st-raised) !important;
  border-color: var(--st-border-hover) !important;
}

/* --- 15. RESPONSIVE DESIGN FOR TABLET & MOBILE --- */
@media (max-width: 1024px) {
  .sp-hero-split-grid {
    grid-template-columns: 1fr !important;
  }
  
  .sp-hero-frame-pane {
    border-right: none !important;
    border-bottom: 1px solid var(--st-border) !important;
    min-height: 380px !important;
  }
  
  .ai-lab-deck {
    grid-template-columns: 1fr !important;
  }
  
  .ai-provider-column {
    border-right: none !important;
    border-bottom: 1px solid var(--st-border) !important;
  }
}

@media (max-width: 768px) {
  .top-nav-inner {
    padding: 10px 14px !important;
  }
  
  .top-nav-workspaces {
    display: none !important;
  }
  
  .alien-hero-section,
  .command-center-section,
  .ai-lab-section,
  #props-vault,
  #simulator,
  #checklist,
  #qa-panel {
    padding: 16px 14px !important;
  }
  
  .sp-hero-editorial-pane {
    padding: 28px 18px !important;
  }
  
  .alien-hero-stats {
    gap: 12px !important;
  }
}

/* --- 16. REDUCED MOTION SAFEGUARDS --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}