/* ==========================================================================
   LOKI ALLIANCE COMMAND - 2026 TACTICAL CYBER DESIGN SYSTEM
   Signature Alliance Color: Official Tank Blue & Cyber Cyan (#2563eb / #38bdf8 / #38bdf8)
   Secondary Accent: Imperial Gold (#fbbf24 / #d4af37)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700;800&display=swap');

:root {
  /* High-Tech Tactical Typography */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Disciplined Obsidian & Blue UI Surfaces */
  --color-bg-base: #0B0F17;
  --color-bg-secondary: #0B0F17;
  --color-surface-base: #131B2A;
  --color-surface-raised: #131B2A;
  --color-surface-focal: #1E293B;

  /* Translucent Micro-Borders */
  --color-border-subtle: #1E293B;
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-border-focal: #2563EB;

  /* High-Contrast Tactical Text */
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #94A3B8;
  --color-text-tertiary: #64748B;

  /* Primary Action & Accents */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-danger: #EF4444;
  --color-danger-hover: #DC2626;

  /* Z-Index Stacking Scale */
  --z-base: 1;
  --z-sticky: 10;
  --z-ticker: 20;
  --z-rail: 30;
  --z-dock: 40;
  --z-modal-backdrop: 50;
  --z-modal: 60;
}

/* ==========================================================================
   GLOBAL VIEWPORT & AMBIENT AURA
   ========================================================================== */

html, body {
  font-family: var(--font-body) !important;
  background-color: var(--color-bg-base) !important;
  color: var(--color-text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  letter-spacing: -0.011em;
}

/* Headings Architecture */
h1, h2, h3, h4, .font-display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em !important;
}

/* Mobile Readability Baseline */
body {
  line-height: 1.5;
}

/* Touch Target Enforcement (44px minimum for mobile) */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   UNIVERSAL TOP NAVIGATION
   ========================================================================== */
.wf-top-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 10);
  background: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.wf-nav-links {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.wf-nav-links::-webkit-scrollbar { display: none; } /* Safari/Chrome */

.wf-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.wf-nav-item:hover {
  background: var(--color-surface-base);
  color: var(--color-text-primary);
}

.wf-nav-item.active {
  background: var(--color-surface-focal);
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-primary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ==========================================================================
   STANDARDIZED BUTTONS
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background-color: var(--color-primary);
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-primary:hover { background-color: var(--color-primary-hover); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background-color: transparent;
  color: var(--color-text-primary) !important;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle);
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-secondary:hover {
  background-color: var(--color-surface-base);
  border-color: var(--color-border-strong);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background-color: var(--color-danger);
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-danger:hover { background-color: var(--color-danger-hover); }

/* Tactical Background Grid Overlay */
#root::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(37, 99, 235, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}

#root > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   2026 FLOATING CAPSULE NAVIGATION DOCK (ELIMINATE BOXES & BOTTOM LINES)
   ========================================================================== */

/* Outer Nav Wrapper: Clean Transparent Floating Container */
header:not(.wf-page-head):not(.wf-header) + div,
div.sticky:has(> nav) {
  background: transparent !important;
  border-bottom: none !important;
  padding: 10px 0 14px 0 !important;
  display: flex !important;
  justify-content: center !important;
  box-shadow: none !important;
}

/* The Navigation Pill Rail */
header:not(.wf-page-head):not(.wf-header) + div nav,
div.sticky > nav {
  max-width: fit-content !important;
  width: auto !important;
  background: rgba(10, 16, 26, 0.85) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  padding: 5px !important;
  gap: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 
    0 12px 36px -4px rgba(0, 0, 0, 0.8),
    0 0 24px -4px rgba(37, 99, 235, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  margin: 0 auto !important;
}

/* Base Nav Pill Buttons (BINGO, TRAIN, PROGRESS) */
header:not(.wf-page-head):not(.wf-header) + div nav button,
div.sticky > nav button {
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  padding: 8px 22px !important;
  min-height: 40px !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  background: transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
  position: relative !important;
}

header:not(.wf-page-head):not(.wf-header) + div nav button:hover,
div.sticky > nav button:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

header:not(.wf-page-head):not(.wf-header) + div nav button:active,
div.sticky > nav button:active {
  transform: scale(0.96) !important;
}

/* ACTIVE NAV PILL (e.g. TRAIN / BINGO / PROGRESS) */
header:not(.wf-page-head):not(.wf-header) + div nav button.text-emerald,
header:not(.wf-page-head):not(.wf-header) + div nav button[class*="text-emerald"],
header:not(.wf-page-head):not(.wf-header) + div nav button[class*="border-b-2"]:not([class*="border-transparent"]) {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.28) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.6) !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.6) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 
    0 0 20px rgba(37, 99, 235, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  text-shadow: 0 0 12px rgba(37, 99, 235, 0.7) !important;
}

/* Luminous Indicator Dot on Active Nav Pill */
header:not(.wf-page-head):not(.wf-header) + div nav button.text-emerald::before,
header:not(.wf-page-head):not(.wf-header) + div nav button[class*="text-emerald"]::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #2563eb;
  box-shadow: 0 0 10px #2563eb, 0 0 4px #ffffff;
  margin-right: 8px;
  vertical-align: middle;
}

/* ==========================================================================
   BINGO SUBTABS DOCK (CURRENT CARD, LEADERBOARD, HISTORY)
   ========================================================================== */

/* Strip clunky flat border bar */
.w-full.bg-surface-base.border-b.border-border-strong.flex.justify-center.mb-4,
.w-full.bg-surface-base.border-b.border-border-strong.flex.justify-center.mb-5,
div:has(> div > [class*="SegmentedTabs"]),
div:has(> div > .flex.justify-center.gap-8) {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 6px 0 14px 0 !important;
}

/* Floating Segmented Pill Container */
.flex.justify-center.gap-8.text-\[11px\],
.flex.justify-center.gap-8,
[class*="SegmentedTabs"] {
  background: rgba(10, 16, 26, 0.8) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  gap: 6px !important;
  max-width: fit-content !important;
  margin: 0 auto !important;
  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.7) !important;
}

/* Subtab Capsule Buttons */
.flex.justify-center.gap-8.text-\[11px\] button,
.flex.justify-center.gap-8 button,
[class*="SegmentedTab"] {
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  padding: 7px 18px !important;
  min-height: 36px !important;
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  background: transparent !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.flex.justify-center.gap-8.text-\[11px\] button:hover,
.flex.justify-center.gap-8 button:hover,
[class*="SegmentedTab"]:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Active Subtab Capsule */
.flex.justify-center.gap-8.text-\[11px\] button.text-emerald,
.flex.justify-center.gap-8 button.text-emerald,
[class*="SegmentedTab"][class*="text-emerald"],
[class*="SegmentedTab"][class*="border-emerald"] {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25) 0%, rgba(37, 99, 235, 0.08) 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.5) !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 0 10px rgba(37, 99, 235, 0.5) !important;
}

/* ==========================================================================
   AUTH TABS DOCK (SIGN IN, CLAIM ACCOUNT, RESET PIN)
   ========================================================================== */

.flex.border-b.border-gray-700 {
  background: rgba(7, 11, 18, 0.75) !important;
  padding: 5px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  margin: 14px 20px 4px 20px !important;
  gap: 4px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) inset !important;
}

.flex.border-b.border-gray-700 button {
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  padding: 8px 14px !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  min-height: 38px !important;
  color: #94a3b8 !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.flex.border-b.border-gray-700 button:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.flex.border-b.border-gray-700 button.text-indigo-400 {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.26) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 0 10px rgba(37, 99, 235, 0.5) !important;
}

/* ==========================================================================
   TEXT ACCENTS & PRIMARY BUTTONS
   ========================================================================== */

/* Text Accents */
.text-indigo-400, .text-indigo-500, .text-indigo-600, .text-brand-purple {
  color: var(--color-emerald-light) !important;
  filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.35));
}

/* Primary Action Buttons */
.bg-indigo-600, .bg-indigo-500, button[type="submit"]:not(.wf-btn), .btn-primary {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 8px 24px -4px rgba(37, 99, 235, 0.55) !important;
}

.bg-indigo-600:hover, .bg-indigo-500:hover, button[type="submit"]:not(.wf-btn):hover, .btn-primary:hover {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 12px 30px -4px rgba(37, 99, 235, 0.75) !important;
}

/* Form Borders and Focus Rings */
.border-indigo-400, .border-indigo-500 {
  border-color: var(--color-emerald) !important;
}

.focus\:border-indigo-500:focus, .focus\:ring-indigo-500:focus {
  border-color: var(--color-emerald) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

/* ==========================================================================
   CARDS & PANELS: FROSTED OBSIDIAN GLASS
   ========================================================================== */

/* Main Auth Card */
.max-w-md.w-full.bg-gray-800 {
  background: linear-gradient(145deg, rgba(20, 29, 47, 0.7) 0%, rgba(11, 16, 26, 0.85) 100%) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 
    0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
    0 24px 48px -12px rgba(0, 0, 0, 0.8),
    0 0 40px -8px rgba(37, 99, 235, 0.2) !important;
  position: relative;
  overflow: hidden;
}

.max-w-md.w-full.bg-gray-800::after {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2563eb, #38bdf8, transparent);
  pointer-events: none;
}

/* "LOKI" Hero Title */
.max-w-md h1.text-5xl.font-black, h1.text-5xl.font-black {
  background: linear-gradient(135deg, #ffffff 25%, #93c5fd 65%, #2563eb 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 25px rgba(37, 99, 235, 0.45)) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
}

/* ==========================================================================
   BINGO TILES & METRICS
   ========================================================================== */

/* 3x3 Bingo Grid Outer HUD Frame */
.w-full.max-w-2xl.bg-surface-base {
  background: linear-gradient(145deg, rgba(15, 22, 36, 0.8) 0%, rgba(8, 12, 20, 0.9) 100%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: 
    0 0 35px -5px rgba(37, 99, 235, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
}

/* Interactive Challenge Tiles (kE) */
.grid.grid-cols-3 button.group {
  background: linear-gradient(145deg, rgba(20, 29, 47, 0.65) 0%, rgba(12, 18, 30, 0.8) 100%) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.grid.grid-cols-3 button.group:hover {
  transform: translateY(-3px) scale(1.01) !important;
  border-color: rgba(37, 99, 235, 0.6) !important;
  box-shadow: 0 10px 24px -5px rgba(37, 99, 235, 0.3) !important;
}

/* Completed Tile State */
.grid.grid-cols-3 button.group.border-emerald\/30,
.grid.grid-cols-3 button.group[class*="border-emerald"] {
  border-color: rgba(37, 99, 235, 0.5) !important;
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.15) 0%, rgba(8, 14, 24, 0.85) 100%) !important;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.2), inset 0 0 20px rgba(37, 99, 235, 0.08) !important;
}

/* Completed Checkmark Hologram Badge */
.grid.grid-cols-3 button.group .bg-emerald.text-bg-base {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #06090e !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.6) !important;
}

/* Bingo Metrics Bar (Lines, Squares, Entries) */
.flex.gap-4.sm\:gap-6.bg-surface-raised {
  background: rgba(15, 22, 36, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* One Away Tactical Warning Banner */
.bg-\[\#1a1205\] {
  background: linear-gradient(90deg, rgba(40, 28, 8, 0.7) 0%, rgba(26, 18, 5, 0.8) 100%) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(16px) !important;
}

/* ==========================================================================
   TRAIN SCHEDULE & DISPATCH
   ========================================================================== */

/* Active Day Card ("TODAY") */
.cE-focal, [class*="bg-surface-focal"] {
  background: var(--color-surface-focal) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: 18px !important;
  position: relative;
}

.bg-emerald.shadow-glow-emerald {
  background-color: var(--color-primary) !important;
  box-shadow: none !important;
}

.w-\[2px\].bg-border-strong {
  background: var(--color-border-subtle) !important;
}

.opacity-70.bg-surface-base {
  background: rgba(11, 16, 26, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 14px !important;
}

/* ==========================================================================
   SUPER ADMIN COMMAND CENTER
   ========================================================================== */

aside.hidden.md\:flex, aside {
  background: rgba(9, 13, 22, 0.85) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

aside h1.text-3xl.font-black {
  background: linear-gradient(135deg, #ffffff 20%, #38bdf8 70%, #2563eb 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(37, 99, 235, 0.4)) !important;
}

nav a.bg-emerald\/15, nav a[class*="bg-emerald"] {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.22) 0%, rgba(37, 99, 235, 0.06) 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.4) !important;
  border-left: 3px solid #2563eb !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.16) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(14, 20, 32, 0.65) !important;
  backdrop-filter: blur(20px) !important;
  width: 100%;
}

th {
  background: rgba(8, 12, 19, 0.9) !important;
  color: #94a3b8 !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.72rem !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

td {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

tr:hover td {
  background: rgba(37, 99, 235, 0.04) !important;
}

/* ==========================================================================
   FORM CONTROLS & TACTILE MICRO-INTERACTIONS
   ========================================================================== */

input, select, textarea {
  min-height: 46px;
  background: rgba(9, 13, 21, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: #2563eb !important;
  box-shadow: 
    0 0 0 3px rgba(37, 99, 235, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.4) inset !important;
  background: rgba(12, 18, 29, 0.95) !important;
}

input[type="text"][placeholder*="PIN"],
input[type="password"][placeholder*="PIN"],
input[pattern*="\d"] {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.3em !important;
  font-size: 1.2rem !important;
  text-align: center;
}

.wiki-search-input {
  padding-left: 2.85rem !important;
}

button {
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

button:active {
  transform: scale(0.978) !important;
}

/* Micro Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(6, 9, 14, 0.8);
}

::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.25);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.6);
}

/* Global Elimination of Outdated Border-B-2 Underlines on Navigation */
nav button.border-b-2,
nav button[class*="border-b-2"],
button[class*="border-b-2"][class*="text-emerald"],
.flex button[class*="border-b-2"] {
  border-bottom-width: 0px !important;
  border-bottom: none !important;
}

/* ==========================================================================
   WARFORGE DYNAMIC THEME SYSTEM (CYBER, CRIMSON, ROYAL, POLAR, DESERT)
   ========================================================================== */

/* 1. Cyber / Obsidian (Default) */
:root, [data-theme="cyber"], [data-theme="cobalt"] {
  --theme-accent: #38bdf8;
  --theme-accent-light: #7dd3fc;
  --theme-glow: rgba(56, 189, 248, 0.15);
  --theme-bg: #090D16;
  --theme-bg-gradient: linear-gradient(180deg, #090D16 0%, #06090E 100%);
}

/* 2. Blood Crimson (Subtle Dark Maroon) */
[data-theme="crimson"] {
  --theme-accent: #9B1B30;
  --theme-accent-light: #B3243C;
  --theme-glow: rgba(155, 27, 48, 0.15);
  --theme-bg: #090C12;
  --theme-bg-gradient: linear-gradient(180deg, #0A0D14 0%, #07090F 100%);
}
[data-theme="crimson"] body { 
  background-color: #090C12 !important; 
  background-image: none !important; 
}

/* 3. Royal Sovereign (Subtle Dark Amethyst) */
[data-theme="royal"], [data-theme="amethyst"] {
  --theme-accent: #8b5cf6;
  --theme-accent-light: #a78bfa;
  --theme-glow: rgba(139, 92, 246, 0.15);
  --theme-bg: #090C14;
  --theme-bg-gradient: linear-gradient(180deg, #090C14 0%, #06080F 100%);
}
[data-theme="royal"] body, [data-theme="amethyst"] body { 
  background-color: #090C14 !important; 
  background-image: none !important; 
}

/* 4. Polar Storm (Subtle Cobalt Ice) */
[data-theme="polar"] {
  --theme-accent: #38bdf8;
  --theme-accent-light: #7dd3fc;
  --theme-glow: rgba(56, 189, 248, 0.15);
  --theme-bg: #090D16;
  --theme-bg-gradient: linear-gradient(180deg, #090D16 0%, #06090E 100%);
}
[data-theme="polar"] body { 
  background-color: #090D16 !important; 
  background-image: none !important; 
}

/* 5. Solar Amber (Subtle Brushed Copper) */
[data-theme="desert"], [data-theme="amber"] {
  --theme-accent: #d97706;
  --theme-accent-light: #f59e0b;
  --theme-glow: rgba(217, 119, 6, 0.15);
  --theme-bg: #0A0D14;
  --theme-bg-gradient: linear-gradient(180deg, #0A0D14 0%, #07090F 100%);
}
[data-theme="desert"] body, [data-theme="amber"] body { 
  background-color: #0A0D14 !important; 
  background-image: none !important; 
}

/* ==========================================================================
   WARFORGE BENTO & APEX MASTER-DETAIL ARCHITECTURE
   ========================================================================== */

/* Bento Grid System */
.bento-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
}

.bento-card {
  background: rgba(13, 17, 23, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  pointer-events: none;
}

.bento-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6);
}

.bento-hero {
  background: radial-gradient(ellipse 80% 60% at 50% -20%, var(--theme-glow, rgba(37, 99, 235, 0.15)), transparent 75%), rgba(13, 17, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Apex Slim Command Rail */
.apex-rail {
  width: 68px;
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 0;
  gap: 1.25rem;
  z-index: 40;
}

.apex-rail-btn {
  width: 44px;
  height: 44px;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.apex-rail-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.apex-rail-btn.active {
  color: #fff;
  background: var(--theme-accent, #2563eb);
  box-shadow: 0 0 16px var(--theme-glow, rgba(37, 99, 235, 0.45));
}

/* Apex Telemetry Ticker */
.apex-ticker {
  background: rgba(8, 12, 18, 0.7);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Gauge Track & Needle */
.gauge-track {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-linecap: round;
}

.gauge-meter {
  stroke: var(--theme-accent, #2563eb);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 8px var(--theme-glow, rgba(37, 99, 235, 0.6)));
}

/* Drag and Drop Zone */
.drop-zone {
  border: 2px dashed var(--color-border-subtle);
  border-radius: 1rem;
  transition: all 0.2s ease;
  background: var(--color-surface-base);
}

.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.05);
}

/* ==========================================================================
   TACTICAL SQUAD FORMATION & STEPPER STYLES
   ========================================================================== */
.tarmac-board {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  position: relative;
}

.slot-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.slot-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.squad-tab-btn {
  transition: all 0.15s ease-out;
  background: transparent;
  color: var(--color-text-secondary);
}

.squad-tab-btn.active {
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-weight: 800;
}

/* ==========================================================================
   BULLETPROOF DESIGN SYSTEM UTILITY CLASSES (Zero Tailwind JIT Reliance)
   ========================================================================== */
.wf-bg-obsidian { background-color: #0B0F17 !important; }
.wf-bg-card { background-color: #131B2A !important; }
.wf-bg-card-inner { background-color: #0B0F17 !important; }
.wf-card {
  background-color: #131B2A !important;
  border: 1px solid #1E293B !important;
  border-radius: 16px;
}
.wf-card-inner {
  background-color: #0B0F17 !important;
  border: 1px solid #1E293B !important;
  border-radius: 12px;
}
.wf-border-subtle { border-color: #1E293B !important; }
.wf-border-strong { border-color: rgba(255, 255, 255, 0.15) !important; }
.wf-text-primary { color: #F8FAFC !important; }
.wf-text-muted { color: #94A3B8 !important; }
.wf-text-blue { color: #2563EB !important; }

/* Standard Button Component System */

.wf-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background-color: #131B2A !important;
  color: #F8FAFC !important;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid #1E293B !important;
  transition: all 0.2s ease;
  cursor: pointer;
}
.wf-btn-secondary:hover {
  background-color: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}