/* ============================================================
   stemOS Dev Content Studio — Supaste Light Design System (v4.0)
   Inspired by https://www.supaste.com/
   Aesthetic: Light white body, radiant sky-blue hero atmosphere,
   top-docked fused capsule nav, soft-construct editorial reveals,
   glass cards on white, Supaste-grade transitions & polish.
   ============================================================ */

/* ── 1. DESIGN TOKENS & SYSTEM VARIABLES ── */
:root {
  /* Light Atmosphere & Canvas */
  --bg-body: #ffffff;
  --bg-surface: #f8fafc;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --bg-glass-input: rgba(255, 255, 255, 0.78);
  --bg-sheet: rgba(255, 255, 255, 0.98);

  /* Supaste Signature Luminous Electric Sky Atmosphere */
  --blue-sky-bright: #b8e4ff;
  --blue-sky: #7dd3fc;
  --blue-electric: #38bdf8;
  --blue-radiant: #0ea5e9;
  --blue-core: #0284c7;
  --blue-glow: rgba(14, 165, 233, 0.25);
  --blue-subtle: rgba(56, 189, 248, 0.12);

  /* Secondary Accents */
  --gold-accent: #f59e0b;
  --gold-glow: rgba(245, 158, 11, 0.2);
  --emerald-accent: #10b981;
  --purple-accent: #a855f7;
  --rose-accent: #f43f5e;

  /* Typography Colors — Light Theme */
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-inverse: #ffffff;

  /* Borders — Light Theme */
  --border-glass: rgba(0, 0, 0, 0.06);
  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-sheen: rgba(0, 0, 0, 0.08);
  --border-active: rgba(14, 165, 233, 0.4);

  /* Elevation Shadows — Light Theme */
  --shadow-nav: 0 8px 30px -8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-stage: 0 25px 60px -20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 20px -6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(14, 165, 233, 0.2);

  /* Typography Families */
  --font-sans: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Transitions */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── LOCAL & FALLBACK FONT AWESOME WEBFONTS (Firewall & AdBlocker Immune) ── */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/webfonts/fa-solid-900.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2') format('woff2');
}

/* ── 2. BASE RESET & VIEWPORT ── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body.supaste-theme {
  background-color: var(--bg-body);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.015em;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3. TOP-DOCKED SUPASTE NAVIGATION CAPSULE ── */
.supaste-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.supaste-nav {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #000000;
  border-radius: 0 0 18px 18px;
  padding: 8px 18px;
  height: 52px;
  border: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  max-width: 1260px;
  width: auto;
  transition: all 0.3s var(--ease-spring);
}

/* Identical Supaste Inverted Concave Corner Ears connecting to ceiling */
.supaste-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 0 L20 0 L20 20 C20 8.954 11.046 0 0 0 Z' fill='%23000000'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  pointer-events: none;
}

.supaste-nav::after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M20 0 L0 0 L0 20 C0 8.954 8.954 0 20 0 Z' fill='%23000000'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Brand Identity */
.supaste-brand-link {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: #ffffff;
}

.supaste-squircle-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(180deg, #7dd3fc 0%, #0ea5e9 50%, #0284c7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 2px 10px rgba(14, 165, 233, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-spring);
}

.supaste-brand-link:hover .supaste-squircle-logo {
  transform: scale(1.06);
}

.supaste-squircle-logo.sm {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 11px;
}

.supaste-brand-name {
  display: flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: -0.02em;
}

.brand-stem {
  color: #ffffff;
}

.brand-os {
  color: #7dd3fc;
}

/* Nav Category Links */
.supaste-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.supaste-nav-links .nav-link,
.nav-link {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.supaste-nav-links .nav-link:hover,
.nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.supaste-nav-links .nav-link.active,
.nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 600;
}

/* Nav Dropdowns — Elegant floating menus */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.nav-caret {
  font-size: 0.68rem;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: none !important;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 2500;
  min-width: 230px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #e2e8f0;
  text-decoration: none;
  white-space: nowrap;
}

.nav-dropdown-menu .nav-link:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.nav-dropdown-grid {
  display: none !important;
  grid-template-columns: repeat(3, 280px);
  gap: 4px;
  max-height: 68vh;
  overflow-y: auto;
  min-width: 860px;
}

.nav-dropdown:hover .nav-dropdown-grid,
.nav-dropdown:focus-within .nav-dropdown-grid {
  display: grid !important;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Nav Right CTA Button — Identical to Supaste download button */
.supaste-nav-right {
  display: flex;
  align-items: center;
}

.supaste-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.2s var(--ease-spring);
}

.supaste-nav-cta:hover {
  transform: translateY(-1px);
  background: #f1f5f9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ── MODERN MOBILE HAMBURGER TOGGLE (JSweb & Supaste Fused) ── */
.supaste-mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.25s var(--ease-spring);
  position: relative;
  z-index: 10001;
  flex-shrink: 0;
}

.supaste-mobile-nav-toggle:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  transform: scale(1.04);
}

.supaste-mobile-nav-toggle:active {
  transform: scale(0.95);
}

.hamburger-box {
  width: 18px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-bar {
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.supaste-mobile-nav-toggle.is-active .hamburger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  background: #38bdf8 !important;
}

.supaste-mobile-nav-toggle.is-active .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.supaste-mobile-nav-toggle.is-active .hamburger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  background: #38bdf8 !important;
}

@media (min-width: 1025px) and (max-width: 1260px) {
  .supaste-nav {
    gap: 10px !important;
    padding: 8px 12px !important;
  }
  .supaste-nav-links {
    gap: 2px !important;
  }
  .supaste-nav-links .nav-link,
  .nav-link {
    font-size: 0.78rem !important;
    padding: 5px 8px !important;
  }
}

@media (max-width: 1024px) {
  .supaste-nav {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
  }
  .supaste-nav-links,
  .nav-dropdown,
  .nav-dropdown-menu,
  .nav-dropdown-grid {
    display: none !important;
  }
  .hide-mobile {
    display: none !important;
  }
  .supaste-mobile-nav-toggle {
    display: inline-flex !important;
  }
}

@media (max-width: 520px) {
  .btn-signup-pill {
    padding: 6px 12px !important;
    font-size: 0.74rem !important;
    gap: 5px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .supaste-nav-left {
    gap: 8px !important;
  }
  .supaste-mobile-nav-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
  }
}

/* ── SUPASTE RESPONSIVE MOBILE NAVIGATION DRAWER ── */
.supaste-mobile-nav-panel {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.supaste-mobile-nav-panel.active {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.supaste-mobile-nav-panel.active .mobile-nav-backdrop {
  opacity: 1;
}

.mobile-nav-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88vw;
  max-width: 380px;
  height: 100%;
  background: #0f172a;
  color: #ffffff;
  box-shadow: -12px 0 45px rgba(0, 0, 0, 0.6);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.supaste-mobile-nav-panel.active .mobile-nav-content {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top, 18px)) 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #091122;
}

.drawer-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ffffff;
  transform: rotate(90deg);
}

.mobile-nav-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-group-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 6px 8px;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s ease;
  margin-bottom: 3px;
}

.mobile-nav-item:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  transform: translateX(4px);
}

.mobile-nav-item:active {
  background: rgba(56, 189, 248, 0.25);
  transform: scale(0.98);
}

/* StarBorder & ShinyText Support in dev.css */
@keyframes star-h-top    { 0%{left:-45%} 100%{left:145%} }
@keyframes star-h-bottom { 0%{left:145%} 100%{left:-45%} }
@keyframes star-v-left   { 0%{top:-40%}  100%{top:140%}  }
@keyframes star-v-right  { 0%{top:140%}  100%{top:-40%}  }
@keyframes shiny-sweep   { 0%{background-position:-200% center} 100%{background-position:200% center} }

.shiny-text, [data-shiny] {
  background: linear-gradient(120deg, currentColor 20%, #ffffff 45%, #7dd3fc 52%, #ffffff 58%, currentColor 80%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny-sweep 3s linear infinite;
  display: inline-flex;
  align-items: center;
  gap: inherit;
}

.btn-signup-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 40%, #0d9488 100%) !important;
  color: #ffffff !important;
  border-radius: 99px !important;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-signup-pill:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 40%, #0f766e 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5);
}

/* ── 4. SUPASTE ATMOSPHERIC CANVAS & HERO SECTION ── */
.supaste-hero-section {
  position: relative;
  padding: 120px 24px 80px 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  background: linear-gradient(180deg, 
    #061a70 0%, 
    #0d2b99 12%, 
    #0056e0 26%, 
    #0284c7 48%, 
    #38bdf8 68%, 
    #7dd3fc 84%, 
    #e0f2fe 95%, 
    #ffffff 100%
  );
}

/* The Radiant Luminous Sky Blue Atmosphere — Complete Full Hero Coverage */
.supaste-hero-atmosphere {
  position: absolute;
  inset: -60px;
  background-image: linear-gradient(180deg, 
    rgba(3, 12, 48, 0.98) 0%, 
    rgba(5, 20, 75, 0.95) 15%, 
    rgba(7, 36, 118, 0.92) 32%, 
    rgba(9, 58, 158, 0.86) 52%, 
    rgba(14, 98, 195, 0.72) 72%, 
    rgba(2, 132, 199, 0.40) 88%, 
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(45px);
  pointer-events: none;
  z-index: 0;
}

.supaste-hero-atmosphere::after {
  content: '';
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 600px;
  background: radial-gradient(ellipse 65% 50% at 50% 25%,
    rgba(14, 165, 233, 0.32) 0%,
    rgba(2, 132, 199, 0.20) 35%,
    rgba(30, 58, 138, 0.15) 60%,
    transparent 100%
  );
  filter: blur(50px);
  opacity: 0.85;
  pointer-events: none;
}

.supaste-hero-container {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── SOFT APPEAR & CONSTRUCTION REVEAL (Optimized for iPad Safari & Mobile) ── */
.soft-word {
  display: inline-block;
  margin-right: 0.22em;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: softConstruct 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0.08s);
}

.soft-word.supaste-serif-italic {
  margin-right: 0.2em;
}

.soft-word:last-child {
  margin-right: 0;
}

.soft-element {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: softConstruct 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0.16s);
}

@keyframes softConstruct {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Pill Announcement Chip */
.supaste-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08);
  transition: all 0.2s ease;
}

.supaste-badge-pill:hover {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.25);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

.badge-text {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.badge-chevron {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── HERO BRAND LOGO (JSweb-inspired PRO Bluish Design with Registered Symbol) ── */
.hero-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2.2rem auto;
  z-index: 2;
  text-align: center;
}

.hero-brand-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-brand-stage:hover {
  transform: translateY(-2px);
}

.hero-brand-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(340px, 60vw, 700px);
  height: clamp(90px, 18vw, 170px);
  background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.42) 0%, rgba(2, 132, 199, 0.22) 38%, rgba(29, 78, 216, 0.1) 65%, transparent 80%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
}

.hero-brand-name {
  font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
  font-size: clamp(3.4rem, 8.5vw, 6.2rem);
  letter-spacing: -0.04em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  user-select: none;
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  filter: drop-shadow(0 12px 30px rgba(2, 6, 23, 0.65))
          drop-shadow(0 0 38px rgba(14, 165, 233, 0.4));
}

.hero-brand-name:hover {
  transform: scale(1.02);
  filter: drop-shadow(0 16px 42px rgba(2, 6, 23, 0.75))
          drop-shadow(0 0 50px rgba(14, 165, 233, 0.6));
}

.hero-brand-stem {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #e2e8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 2px;
  filter: drop-shadow(0 2px 14px rgba(255, 255, 255, 0.7));
}

.hero-brand-os {
  background: linear-gradient(180deg, #67e8f9 0%, #38bdf8 20%, #0ea5e9 45%, #0284c7 70%, #1d4ed8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.035em;
  filter: drop-shadow(0 0 24px rgba(14, 165, 233, 0.85))
          drop-shadow(0 4px 18px rgba(2, 6, 23, 0.75));
}

.hero-brand-reg,
.hero-brand-reg-badge {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 0.32em;
  font-weight: 800;
  position: relative;
  top: -0.92em;
  margin-left: 0.08em;
  color: #38bdf8;
  vertical-align: top;
  display: inline-block;
  line-height: 1;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.85);
  user-select: none;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Editorial Headline — Pure White on Luminous Sky Blue */
.supaste-hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin-bottom: 22px;
  max-width: 980px;
  text-shadow: 0 4px 28px rgba(13, 43, 153, 0.28);
}

.supaste-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 4px 28px rgba(13, 43, 153, 0.28);
  display: inline-block;
}

/* Refined Subtitle — White on Luminous Blue */
.supaste-hero-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 760px;
  margin: 0 auto 36px auto;
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(13, 43, 153, 0.22);
}

.supaste-hero-subtitle strong {
  color: #ffffff;
  font-weight: 700;
}

/* Actions Row */
.supaste-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* ─── Hero Level Pathway Cards (Standard vs. Industry ESP) ─── */
.hero-pathway-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 840px;
  margin: 28px auto 10px auto;
  text-align: left;
}

@media (max-width: 768px) {
  .hero-pathway-cards {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 10px;
  }
}

.hero-pathway-card {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-pathway-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.7;
}

.hero-pathway-card.card-standard::before {
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.8), transparent);
}

.hero-pathway-card.card-industry::before {
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.8), transparent);
}

.hero-pathway-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 20px 40px -10px rgba(14, 165, 233, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-pathway-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
  width: fit-content;
}

.card-standard .hero-pathway-badge {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.card-industry .hero-pathway-badge {
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.hero-pathway-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.hero-pathway-desc {
  font-size: 0.92rem;
  color: rgba(226, 232, 240, 0.88);
  line-height: 1.55;
  margin: 0;
  font-weight: 400;
}

.hero-standards-line {
  font-size: 0.82rem;
  color: rgba(203, 213, 225, 0.75);
  text-align: center;
  margin: 8px auto 24px auto;
  max-width: 760px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* Hero Simulators Dock — Clean, organized pill container */
.hero-simulators-dock {
  margin-top: 24px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 16px 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.dock-header {
  margin-bottom: 10px;
  text-align: left;
}

.dock-badge-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.dock-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  padding-right: 6px;
}

.dock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #e2e8f0;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dock-pill:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}

.dock-pill.highlight-pill {
  background: rgba(2, 132, 199, 0.25);
  border-color: rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
}

/* Primary Button — Solid Black Pill */
.supaste-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000000;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.4);
  transition: all 0.25s var(--ease-spring);
}

.supaste-btn-primary:hover {
  transform: translateY(-2px);
  background: #1e293b;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5);
}

.btn-arrow {
  font-size: 0.86rem;
  transition: transform 0.2s ease;
}

.supaste-btn-primary:hover .btn-arrow {
  transform: translateX(3px);
}

/* Secondary Button — Frosted Glass White */
.supaste-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.25s var(--ease-spring);
}

.supaste-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

/* Metrics Strip — Glass Pill with White Text */
.supaste-metrics-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px 24px;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.metric-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #ffffff;
  font-size: 0.96rem;
}

.metric-lbl {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.86rem;
  font-weight: 500;
}

.metric-dot {
  color: rgba(255, 255, 255, 0.45);
  font-size: 1rem;
}

/* ── 5. SUPASTE MACOS STAGE WINDOW (HERO LIVE PREVIEW) ── */
.supaste-stage-window {
  width: 100%;
  max-width: 960px;
  background: #0f172a;
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: var(--shadow-stage);
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s var(--ease-spring);
}

.supaste-stage-window:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* macOS Titlebar */
.window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.traffic-lights {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dot-close { background: #ff5f57; box-shadow: inset 0 0 1px rgba(0,0,0,0.4); }
.dot-min { background: #febc2e; box-shadow: inset 0 0 1px rgba(0,0,0,0.4); }
.dot-max { background: #28c840; box-shadow: inset 0 0 1px rgba(0,0,0,0.4); }

.window-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: -0.01em;
}

.window-title svg {
  color: var(--blue-electric);
}

.window-right-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.win-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.win-tag-cefr {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.win-tag-conocer {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Stage Window Body Content */
.window-content-area {
  padding: 24px 28px 26px 28px;
}

/* Audio Player Pill (kept dark inside the stage window) */
.stage-player-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.stage-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.stage-play-btn:hover {
  transform: scale(1.12);
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%);
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #ffffff;
}

.stage-play-btn i {
  margin-left: 2px;
  color: #ffffff !important;
  font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.stage-play-btn svg,
.stage-play-svg {
  width: 15px;
  height: 15px;
  fill: #ffffff;
  margin-left: 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stage-play-btn:hover svg,
.stage-play-btn:hover .stage-play-svg {
  transform: scale(1.15);
}

.stage-wave-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.w-bar {
  width: 3px;
  height: 6px;
  background: #38bdf8;
  border-radius: 999px;
  transition: height 0.2s ease;
}

.stage-player-pill.playing .w-bar:nth-child(1) { animation: wavePulse 0.8s infinite ease-in-out; }
.stage-player-pill.playing .w-bar:nth-child(2) { animation: wavePulse 0.9s infinite ease-in-out 0.1s; }
.stage-player-pill.playing .w-bar:nth-child(3) { animation: wavePulse 1.1s infinite ease-in-out 0.2s; }
.stage-player-pill.playing .w-bar:nth-child(4) { animation: wavePulse 0.85s infinite ease-in-out 0.15s; }
.stage-player-pill.playing .w-bar:nth-child(5) { animation: wavePulse 1.05s infinite ease-in-out 0.25s; }
.stage-player-pill.playing .w-bar:nth-child(6) { animation: wavePulse 0.95s infinite ease-in-out 0.05s; }
.stage-player-pill.playing .w-bar:nth-child(7) { animation: wavePulse 0.75s infinite ease-in-out 0.3s; }

@keyframes wavePulse {
  0%, 100% { height: 6px; }
  50% { height: 18px; }
}

.stage-track-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.stage-speaker {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--blue-sky);
}

.stage-reading-title {
  font-size: 0.84rem;
  font-weight: 500;
  color: #e2e8f0;
}

.stage-speed-pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Quote Reading */
.stage-reading-quote {
  font-size: 1.12rem;
  line-height: 1.7;
  color: #f1f5f9;
  font-style: normal;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
  padding: 0 4px;
}

.stage-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.stage-socratic-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-grow: 1;
}

.stage-socratic-badge i {
  color: #a855f7;
  font-size: 1rem;
  flex-shrink: 0;
}

.stage-socratic-badge strong {
  color: #f8fafc;
}

.stage-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0ea5e9;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.stage-action-btn:hover {
  background: #0284c7;
  transform: translateY(-1px);
}

/* ── 5b. FEATURES PROMO SECTION (Between hero and catalog) ── */
.features-section {
  background: #ffffff;
  padding: 80px 24px 60px;
  position: relative;
}

.features-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.features-section .sec-eyebrow {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0ea5e9;
  margin-bottom: 12px;
}

.features-section .sec-title {
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.features-section .sec-sub {
  text-align: center;
  font-size: 1.05rem;
  color: #64748b;
  max-width: 640px;
  margin: 0 auto 48px auto;
  line-height: 1.6;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  padding: 28px 24px;
  transition: all 0.3s var(--ease-spring);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(14, 165, 233, 0.2);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(56, 189, 248, 0.08));
  border: 1px solid rgba(14, 165, 233, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0ea5e9;
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.feature-card h3 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}

.feature-card p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.55;
}

/* ── 5c. VISUAL SECTION DIVIDER ── */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.2), rgba(14, 165, 233, 0.06), transparent);
  max-width: 1200px;
  margin: 0 auto;
}

.catalog-intro {
  text-align: center;
  padding: 60px 24px 20px;
  max-width: 700px;
  margin: 0 auto;
}

.catalog-intro .sec-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0ea5e9;
  margin-bottom: 10px;
}

.catalog-intro h2 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.catalog-intro p {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
}

/* ── 6. MAIN CONTENT STUDIO CONTAINER ── */
.studio-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px 80px 24px;
}

/* ── 7. CONTROLS BAR (SPOTLIGHT SEARCH & SUPASTE CATEGORY PILLS) ── */
.controls-bar {
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Spotlight Capsule Input — Light */
.search-wrapper {
  position: relative;
  width: 100%;
}

.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1.05rem;
  pointer-events: none;
}

.search-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 16px 54px 16px 52px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: #0f172a;
  outline: none;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
  transition: all 0.25s ease;
}

.search-input::placeholder {
  color: #94a3b8;
}

.search-input:focus {
  border-color: #0ea5e9;
  box-shadow: 0 4px 20px -4px rgba(14, 165, 233, 0.15), 0 0 0 3px rgba(14, 165, 233, 0.08);
}

.search-shortcut {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: #94a3b8;
  background: var(--bg-surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
}

/* ── DUAL AXIS SWITCHER (Eje A: Industria ✖ Eje B: Habilidades Comunicativas) ── */
.dual-axis-mode-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 18px;
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.dual-axis-toggle-pill {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  gap: 4px;
}

.axis-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.axis-mode-btn:hover {
  color: #0f172a;
}

.axis-mode-btn.active {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.2);
}

.axis-mode-btn.active i {
  color: #38bdf8 !important;
}

.axis-mode-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0284c7, #7c3aed);
  color: #ffffff;
  margin-left: 2px;
}

.axis-mode-caption {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.axis-mode-caption strong {
  color: #0f172a;
}

/* Category Filters (Supaste-style Segmented Pills) — Light */
.track-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.level-switcher-bar-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 4px 6px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.level-bar-btn {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  transition: all 0.2s ease;
}

.level-bar-btn.active {
  background: #0f172a;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s var(--ease-spring);
}

.filter-btn:hover {
  background: #f0f9ff;
  color: #0f172a;
  border-color: rgba(14, 165, 233, 0.2);
  transform: translateY(-1px);
}

.filter-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-btn.active i {
  color: #ffffff !important;
}

/* ── 8. BENTO GRID CONTAINER & CATEGORY SECTIONS ── */
.bento-grid-container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.category-group {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Clean Category Banner — Light */
.category-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.category-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.category-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #0ea5e9;
  flex-shrink: 0;
}

.cat-technology .category-banner-icon { color: #0ea5e9; background: rgba(14, 165, 233, 0.08); }
.cat-engineering .category-banner-icon { color: #10b981; background: rgba(16, 185, 129, 0.08); }
.cat-science .category-banner-icon { color: #a855f7; background: rgba(168, 85, 247, 0.08); }
.cat-career .category-banner-icon { color: #f59e0b; background: rgba(245, 158, 11, 0.08); }

.category-banner-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  margin-bottom: 2px;
}

.category-banner-desc {
  font-size: 0.88rem;
  color: #64748b;
  max-width: 700px;
  line-height: 1.5;
}

.category-pill-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Track Section */
.track-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.track-header-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.track-header-title i {
  color: #0ea5e9;
  font-size: 1.1rem;
}

/* ── 9. BENTO MODULE CARDS — Light Theme ── */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

.module-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition: all 0.3s var(--ease-spring);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.module-card:hover {
  transform: translateY(-5px);
  background: #ffffff;
  border-color: rgba(14, 165, 233, 0.2);
  box-shadow: var(--shadow-card-hover);
}

/* Top Card Bar */
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.module-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(56, 189, 248, 0.06));
  border: 1px solid rgba(14, 165, 233, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0ea5e9;
  font-size: 1.2rem;
  box-shadow: none;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-spring);
}

.module-card:hover .module-icon-box {
  transform: scale(1.08);
}

.module-tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Gold Model Tag & Card */
.gold-card {
  border-color: rgba(245, 158, 11, 0.25);
  background: #fffbeb;
}

.gold-card:hover {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.12);
}

.gold-model-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: #d97706;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Card Body */
.card-body {
  margin-bottom: 22px;
  flex-grow: 1;
}

.card-title-es {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}

.card-title-en {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.45;
}

/* Card Footer */
.card-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reading-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0ea5e9;
  display: flex;
  align-items: center;
  gap: 6px;
}

.explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.module-card:hover .explore-btn {
  background: #0ea5e9;
  color: #ffffff;
  transform: translateX(2px);
}

/* Standards Badges Row */
.standards-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.std-pill {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.std-conocer {
  background: rgba(14, 165, 233, 0.06);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.12);
}

.std-ngss {
  background: rgba(168, 85, 247, 0.06);
  color: #9333ea;
  border: 1px solid rgba(168, 85, 247, 0.12);
}

.std-industry {
  background: rgba(0, 0, 0, 0.02);
  color: #64748b;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Native Phrases Card */
.phrase-card {
  border-color: rgba(245, 158, 11, 0.2);
}

.school-contrast-box {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  padding: 10px 14px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
}

.school-row {
  color: #ef4444;
}

.native-row {
  color: #10b981;
}

.bad-tag, .good-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 6px;
}

/* ── Native Idioms 2.0: 5-Layer Rich Display ── */
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 6px;
}

.risk-badge-critico {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.risk-badge-alto {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.risk-badge-medio {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.risk-badge-bajo {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.dialect-trap-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(245, 158, 11, 0.06));
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  border-radius: 14px;
  padding: 16px;
  margin-top: 18px;
}

.dialect-trap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.dialect-trap-title {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .dialect-grid {
    grid-template-columns: 1fr;
  }
}

.dialect-box {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 12px;
}

.dialect-box-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dialect-box-us .dialect-box-title { color: #0284c7; }
.dialect-box-uk .dialect-box-title { color: #ea580c; }

.dialect-box-desc {
  font-size: 0.85rem;
  color: #1e293b;
  font-weight: 600;
  line-height: 1.4;
}

.mental-origin-card {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-left: 3.5px solid #8b5cf6;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
}

.mental-origin-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7c3aed;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mental-origin-desc {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.5;
}

/* ── 10. MACOS SHEET DRAWER MODAL READER ── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-smooth);
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer-panel {
  width: 100%;
  max-width: 780px;
  height: 100vh;
  background: #ffffff;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px 0 0 24px;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-spring);
  overflow: hidden;
}

.drawer-backdrop.active .drawer-panel {
  transform: translateX(0);
}

/* Drawer Header */
.drawer-header {
  padding: 20px 28px;
  background: var(--bg-surface);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.drawer-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.drawer-traffic-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.drawer-traffic-dots .dot {
  cursor: pointer;
}

.drawer-title-heading {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.drawer-subtitle-text {
  font-size: 0.84rem;
  color: #64748b;
}

.drawer-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer-close-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Drawer Body */
.drawer-body {
  padding: 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Tab Pills in Drawer */
.drawer-tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.drawer-tab-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer-tab-btn.active {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Reading Content Card */
.reading-content-card {
  background: var(--bg-surface);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  padding: 24px;
  line-height: 1.8;
  font-size: 1.05rem;
  color: #1e293b;
}

/* ── READING ACCORDION & LECTURE READER SYSTEM ── */
.reading-accordion {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: visible;
}

.reading-accordion:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.reading-accordion.open {
  border-color: #93c5fd;
  box-shadow: 0 8px 24px -4px rgba(2, 132, 199, 0.12);
}

.reading-accordion-header {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  background: #ffffff;
  border-radius: 18px;
  user-select: none;
  transition: background 0.15s ease;
}

.reading-accordion-header:hover {
  background: #f8fafc;
}

.reading-accordion.open .reading-accordion-header {
  border-bottom: 1px solid #f1f5f9;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #fbfcfe;
}

.reading-accordion-idx {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0284c7;
  background: #e0f2fe;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reading-accordion-title {
  color: #0f172a;
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.reading-accordion-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  transition: transform 0.25s var(--ease-spring), background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.reading-accordion-header:hover .reading-accordion-toggle-icon {
  background: #e2e8f0;
  color: #0f172a;
}

.reading-accordion.open .reading-accordion-toggle-icon {
  transform: rotate(180deg);
  background: #e0f2fe;
  color: #0284c7;
}

.reading-accordion-body {
  display: none;
  padding: 26px 24px 30px;
}

.reading-accordion.open .reading-accordion-body {
  display: block;
}

/* ── EDITORIAL READER CONTENT TYPOGRAPHY ── */
.reader-content {
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
  font-size: 1.03rem;
  line-height: 1.8;
  color: #1e293b;
  overflow-wrap: break-word;
}

.reader-content .reader-main-title {
  font-family: var(--font-head);
  font-size: 1.65rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 18px 0;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.reader-content .reader-section-heading {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 36px 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.reader-content .reader-subheading {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 26px 0 12px 0;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.reader-content p {
  margin: 0 0 18px 0;
  line-height: 1.8;
  color: #334155;
}

.reader-content p:last-child {
  margin-bottom: 0;
}

.reader-content strong {
  font-weight: 700;
  color: #0f172a;
}

.reader-content em {
  font-style: italic;
}

/* Reader Lists */
.reader-content ul {
  margin: 12px 0 22px 0;
  padding-left: 26px;
  list-style-type: disc;
}

.reader-content ol {
  margin: 12px 0 22px 0;
  padding-left: 26px;
  list-style-type: decimal;
}

.reader-content li {
  margin-bottom: 10px;
  line-height: 1.7;
  color: #334155;
}

.reader-content li::marker {
  color: #0284c7;
}

.reader-content ol li::marker {
  font-weight: 700;
  color: #0284c7;
}

/* Reader Markdown Tables */
.reader-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.reader-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  text-align: left;
}

.reader-table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
  padding: 13px 18px;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.reader-table td {
  padding: 13px 18px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: top;
  line-height: 1.6;
}

.reader-table tr:last-child td {
  border-bottom: none;
}

.reader-table tr:hover td {
  background: #f8fafc;
}

/* Reader Callout Cards */
.reading-callout-quote {
  margin: 26px 0;
  padding: 18px 22px;
  background: #f0f9ff;
  border-left: 4px solid #0284c7;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.06);
}

.reading-callout-quote .callout-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.78rem;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.reading-callout-quote .callout-text {
  font-size: 0.96rem;
  color: #0f172a;
  line-height: 1.65;
  font-weight: 500;
}

/* Horizontal Rule Divider */
.reader-divider {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 36px 0;
}

/* ── VOCABULARY TOOLTIPS (FLOATING POPOVER) ── */
.term-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
  padding: 0 4px;
  margin: 0 1px;
  font-weight: 600;
  transition: all 0.15s ease;
  vertical-align: baseline;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.term-tooltip:hover, .term-tooltip.active {
  filter: brightness(0.92);
}

.term-info-btn {
  font-size: 0.72rem;
  opacity: 0.75;
  margin-left: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.term-tooltip:hover .term-info-btn {
  opacity: 1;
  transform: scale(1.15);
}

/* Floating Glassmorphic Tooltip Card - STRICTLY HIDDEN UNTIL HOVER/FOCUS */
.tooltip-box {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  line-height: 1.5;
  min-width: 220px;
  max-width: 320px;
  width: max-content;
  z-index: 10000;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  text-align: left;
  white-space: normal;
  font-weight: 400;
  text-decoration: none;
}

.term-tooltip:hover > .tooltip-box,
.term-tooltip:focus-within > .tooltip-box,
.term-tooltip.active > .tooltip-box {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Downward indicator arrow */
.tooltip-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}

.tooltip-box strong {
  color: #38bdf8 !important;
  display: block;
  margin-bottom: 2px;
  font-size: 0.88rem;
  font-weight: 700;
}

.tooltip-box .term-ipa {
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 400;
  margin-left: 4px;
}

/* ── GLOSSARY LIST & TECHNICAL DICTIONARY SECTION ── */
.glossary-section-wrap {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

.glossary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
  margin-bottom: 28px;
}

.glossary-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.glossary-item:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.glossary-term {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.glossary-def {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.5;
}

/* Audio Player Pill in Drawer */
.drawer-audio-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #0f172a;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ── 11. SUPASTE EDITORIAL FOOTER ── */
.supaste-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #0f172a;
  padding: 60px 24px 40px 24px;
  margin-top: 60px;
}

.supaste-footer-inner {
  max-width: 1200px;
  margin: 0 auto 40px auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-brand-name {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
}

.footer-desc {
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.6;
  max-width: 440px;
  margin-bottom: 18px;
}

.footer-standards-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.std-chip {
  font-size: 0.72rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
}

.footer-col-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.86rem;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-bottom-row {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: #64748b;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── 12. TOAST NOTIFICATIONS ── */
.offline-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 18px;
  padding: 14px 20px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
  animation: slideInToast 0.3s var(--ease-spring);
}

@keyframes slideInToast {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.toast-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-desc {
  font-size: 0.82rem;
  color: #94a3b8;
}

/* ── 13. CONVINCING VALUE PROPOSITION SECTIONS (Dark Cyber-Glassmorphism Style) ── */
.promo-section {
  position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.12) 0%, rgba(6, 11, 24, 0.98) 55%, #030712 100%);
  border-top: 1px solid rgba(56, 189, 248, 0.16);
  border-bottom: 1px solid rgba(56, 189, 248, 0.16);
  padding: 85px 24px 95px;
  z-index: 2;
  overflow: hidden;
}

/* Ambient Luminous Auras */
.promo-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 15%;
  width: 520px;
  height: 420px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.16) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.promo-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: 12%;
  width: 480px;
  height: 380px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
  filter: blur(75px);
  pointer-events: none;
  z-index: 0;
}

.promo-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.section-header-center {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.2);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
}

.section-title {
  font-family: var(--font-head);
  font-size: 2.3rem;
  font-weight: 800;
  color: #ffffff !important;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 16px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8), 0 0 40px rgba(56, 189, 248, 0.2);
}

.section-subtitle {
  font-size: 1.05rem;
  color: #cbd5e1 !important;
  line-height: 1.68;
}

/* 3-Column Bento Cards */
.promo-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.promo-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 20px;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.promo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.promo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 24px 48px -12px rgba(14, 165, 233, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.promo-card:hover::before {
  opacity: 1;
}

.promo-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 22px;
  flex-shrink: 0;
}

.promo-card-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.promo-card-icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.promo-card:hover .promo-card-icon.icon-cyan svg {
  transform: scale(1.15) rotate(2deg);
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.7));
}

.promo-card:hover .promo-card-icon.icon-emerald svg {
  transform: scale(1.15) rotate(-2deg);
  filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.7));
}

.promo-card:hover .promo-card-icon.icon-purple svg {
  transform: scale(1.15) rotate(2deg);
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.7));
}

.promo-card-icon.icon-cyan {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.2);
}

.promo-card-icon.icon-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
}

.promo-card-icon.icon-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.2);
}

.promo-card-title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}

.promo-card-desc {
  font-size: 0.92rem;
  color: #cbd5e1;
  line-height: 1.62;
  flex-grow: 1;
  margin-bottom: 20px;
}

.promo-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.promo-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: #93c5fd;
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* 4 Pillars of the Gold Model */
.methodology-card {
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.methodology-card::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.methodology-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}

.methodology-title {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.methodology-intro {
  font-size: 0.96rem;
  color: #cbd5e1;
  max-width: 500px;
}

.methodology-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.method-pillar {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 24px 20px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.method-pillar:hover {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 12px 30px -6px rgba(14, 165, 233, 0.2);
  transform: translateY(-3px);
  background: rgba(30, 41, 59, 0.85);
}

.pillar-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 12px;
  opacity: 0.9;
}

.pillar-icon {
  font-size: 1.4rem;
  color: #38bdf8;
  margin-bottom: 14px;
}

.pillar-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.pillar-desc {
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.55;
}

/* Standards Strip */
.standards-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.standards-strip-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
}

.standards-strip-items {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.std-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.std-item i {
  color: #38bdf8;
}

/* ── 13B. INDUSTRY STANDARDS VS. OUTDATED UNIVERSITY CURRICULA ── */
.industry-standards-section {
  position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(30, 58, 138, 0.18) 0%, rgba(6, 11, 24, 0.98) 55%, #030712 100%);
  border-top: 1px solid rgba(56, 189, 248, 0.16);
  border-bottom: 1px solid rgba(56, 189, 248, 0.16);
  padding: 85px 24px 95px;
  z-index: 2;
  overflow: hidden;
}

.industry-standards-section::before {
  content: '';
  position: absolute;
  top: 15%;
  left: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.14) 0%, transparent 70%);
  filter: blur(90px);
  pointer-events: none;
}

.industry-standards-section::after {
  content: '';
  position: absolute;
  bottom: 10%;
  right: -60px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
  filter: blur(85px);
  pointer-events: none;
}

.badge-industry-standards {
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.2);
}

/* The Reality Gap Confrontation Grid */
.reality-gap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 56px;
}

.reality-gap-col {
  border-radius: 24px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s var(--ease-spring);
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.reality-gap-col.col-academic {
  background: rgba(30, 16, 20, 0.65);
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.reality-gap-col.col-academic:hover {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 20px 45px -10px rgba(239, 68, 68, 0.2);
}

.reality-gap-col.col-industry {
  background: rgba(15, 28, 48, 0.75);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.reality-gap-col.col-industry:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 24px 50px -10px rgba(14, 165, 233, 0.3);
}

.reality-col-header {
  margin-bottom: 26px;
}

.reality-badge-academic {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.reality-badge-industry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.reality-col-title {
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.reality-col-desc {
  font-size: 0.94rem;
  color: #cbd5e1;
  line-height: 1.6;
}

.reality-points-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.reality-point-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.reality-point-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.item-negative .reality-point-icon {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.item-positive .reality-point-icon {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.reality-point-body strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 4px;
}

.reality-point-body p {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin: 0;
}

.reality-col-footer {
  margin-top: 28px;
  padding: 16px 20px;
  border-radius: 14px;
  font-size: 0.86rem;
  font-weight: 600;
  display: flex;
  gap: 12px;
  align-items: center;
  line-height: 1.5;
}

.reality-col-footer.footer-academic {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.reality-col-footer.footer-industry {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

/* 6 Clusters Section */
.standards-clusters-container {
  margin: 64px 0 54px;
}

.standards-clusters-header {
  margin-bottom: 34px;
}

.standards-clusters-title {
  font-family: var(--font-head);
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

.standards-clusters-desc {
  font-size: 1rem;
  color: #cbd5e1;
  line-height: 1.6;
}

.standards-clusters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.std-cluster-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.std-cluster-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 20px 45px -10px rgba(14, 165, 233, 0.22);
}

.std-cluster-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.std-cluster-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.std-cluster-icon.icon-cyan {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.std-cluster-icon.icon-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.std-cluster-icon.icon-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.std-cluster-icon.icon-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.std-cluster-icon.icon-rose {
  background: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.std-cluster-icon.icon-blue {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.std-cluster-track-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
}

.std-cluster-name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}

.std-cluster-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.std-spec-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
}

.std-cluster-text {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.6;
}

/* Interactive Drill Reality Gap Widget */
.reality-drill-widget {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6), 0 0 30px rgba(14, 165, 233, 0.15);
  margin: 54px 0 60px;
}

.reality-drill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.drill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.drill-title {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.drill-toggle-buttons {
  display: flex;
  gap: 10px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px;
  border-radius: 999px;
}

.drill-toggle-btn {
  border: none;
  background: transparent;
  padding: 9px 20px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.25s var(--ease-spring);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.drill-toggle-btn.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4);
}

.reality-drill-body {
  border-radius: 16px;
  padding: 26px 24px;
  transition: all 0.3s ease;
}

.reality-drill-body.mode-academic {
  background: rgba(30, 15, 20, 0.6);
  border: 1px dashed rgba(239, 68, 68, 0.45);
}

.reality-drill-body.mode-industry {
  background: rgba(10, 30, 24, 0.6);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.drill-scenario-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 12px;
}

.mode-academic .drill-scenario-tag {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

.mode-industry .drill-scenario-tag {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

.drill-question-box {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 16px;
}

.drill-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.drill-opt-item {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drill-analysis-note {
  font-size: 0.86rem;
  line-height: 1.55;
  padding: 12px 16px;
  border-radius: 10px;
}

.mode-academic .drill-analysis-note {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.mode-industry .drill-analysis-note {
  background: rgba(16, 185, 129, 0.12);
  color: #a7f3d0;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* ── Formal Executive Curricular Inventory Grid ── */
.platform-formal-inventory-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.92) 0%, rgba(8, 17, 36, 0.96) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 24px;
  padding: 38px 34px;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  margin-top: 50px;
  position: relative;
  overflow: hidden;
}

.platform-formal-inventory-card::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.16) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.inventory-card-header,
.platform-inventory-header {
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}

.inventory-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.inventory-card-title,
.platform-inventory-title {
  font-family: var(--font-head);
  font-size: 1.65rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.inventory-card-desc,
.platform-inventory-subtitle {
  font-size: 0.94rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.6;
  max-width: 820px;
}

/* Bento Grid */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}

.inv-cell {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 142px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.inv-cell:hover {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -8px rgba(14, 165, 233, 0.25) !important;
}

.inv-cell.highlight-cell {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 12px 28px -8px rgba(16, 185, 129, 0.18) !important;
}

.inv-cell.highlight-cell:hover {
  border-color: rgba(16, 185, 129, 0.7) !important;
  box-shadow: 0 16px 36px -8px rgba(16, 185, 129, 0.3) !important;
}

.inv-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.inv-num {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #38bdf8;
  background: linear-gradient(135deg, #ffffff 25%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.inv-cell.highlight-cell .inv-num {
  background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.inv-icon-chip {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease;
}

.inv-cell:hover .inv-icon-chip {
  transform: scale(1.1) rotate(4deg);
}

.inv-icon-chip.chip-emerald {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.35);
}

.inv-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.inv-sub {
  font-size: 0.83rem;
  color: #94a3b8;
  line-height: 1.48;
}

/* Accreditation Strip */
.inv-footer-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 2;
}

.inv-strip-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.22);
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
  transition: all 0.2s ease;
}

.inv-strip-pill:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(56, 189, 248, 0.45);
  color: #ffffff;
}

.inv-strip-pill i {
  color: #34d399;
  font-size: 0.88rem;
}

/* Backward-compatible classes for inv-metric-* */
.inv-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.inv-metric-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.inv-metric-num {
  font-family: var(--font-head);
  font-size: 1.85rem;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 6px;
}

.inv-metric-num.highlight-emerald {
  color: #34d399;
}

.inv-metric-num.highlight-purple {
  color: #c084fc;
}

.inv-metric-num.highlight-gold {
  color: #fbbf24;
}

.inv-metric-lbl {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.inv-metric-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.48;
  margin: 0;
}

.inv-verification-strip {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.inv-verify-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #cbd5e1;
}

.inv-verify-item i {
  color: #34d399;
}

@media (max-width: 960px) {
  .reality-gap-grid {
    grid-template-columns: 1fr;
  }
  .inventory-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .platform-formal-inventory-card {
    padding: 28px 22px;
  }
  .standards-clusters-grid {
    grid-template-columns: 1fr;
  }
  .standards-stats-bar {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .drill-options-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .inventory-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .inv-footer-strip {
    justify-content: flex-start;
  }
  .inv-strip-pill {
    width: 100%;
    justify-content: center;
  }
  .standards-stats-bar {
    grid-template-columns: 1fr;
  }
  .drill-toggle-buttons {
    width: 100%;
    flex-direction: column;
    border-radius: 14px;
  }
  .drill-toggle-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── 14. MODULAR CATALOG SECTION & PROGRESS (SCREENSHOT MODEL) ── */
.catalog-section {
  position: relative;
  background: #f8fafc;
  padding: 60px 0 100px;
  min-height: 800px;
}

.catalog-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.catalog-main-title {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}

.catalog-main-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 650px;
}

/* Segmented progress bar from media_1789248905260.png */
.units-progress-container {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 14px 20px;
  min-width: 280px;
  box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.05);
}

.units-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.units-progress-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.units-progress-score {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue-core);
}

.units-segmented-progress {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
  gap: 2px;
}

.units-segmented-progress .seg {
  height: 100%;
}

.units-segmented-progress .seg-amber {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.units-segmented-progress .seg-emerald {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.units-segmented-progress .seg-cyan {
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.units-segmented-progress .seg-blue {
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.units-segmented-progress .seg-purple {
  background: linear-gradient(90deg, #8b5cf6, #a855f7);
}

/* Units Grid Container (Level 1) */
.units-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* Unit Card (Inspired by media_1789248905260.png) */
.unit-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px -6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s var(--ease-spring);
  cursor: pointer;
  position: relative;
}

.unit-card:hover {
  transform: translateY(-5px);
  border-color: rgba(2, 132, 199, 0.35);
  box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.12);
}

/* Banner area of Unit Card */
.unit-card-banner {
  height: 130px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background-size: cover;
  background-position: center;
}

.unit-card-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.unit-card.cat-tech .unit-card-banner {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.unit-card.cat-eng .unit-card-banner {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.unit-card.cat-sci .unit-card-banner {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.unit-card.cat-car .unit-card-banner {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}

.unit-banner-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.unit-number-pill {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.unit-category-chip {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.unit-banner-watermark {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* Card Body */
.unit-card-body {
  padding: 20px 22px 14px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.unit-card-title {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  margin-bottom: 6px;
}

.unit-card-en {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.unit-card-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Progress bar inside unit card (like screenshot) */
.unit-progress-section {
  margin-top: auto;
  padding: 0 22px 16px;
}

.unit-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.unit-progress-track {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.unit-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-core), var(--blue-electric));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Card Footer */
.unit-card-footer {
  padding: 14px 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
}

.unit-modules-badge {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.unit-explore-btn {
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.unit-card:hover .unit-explore-btn {
  background: var(--blue-core);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

/* ── 15. UNIT DRILL-DOWN VIEW (LEVEL 2) ── */
.unit-detail-container {
  animation: fadeIn 0.4s var(--ease-spring);
}

.unit-detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.btn-back-units {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-main);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.btn-back-units:hover {
  background: #f8fafc;
  border-color: var(--blue-core);
  color: var(--blue-core);
  transform: translateX(-2px);
}

.unit-detail-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pager-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pager-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: var(--blue-core);
  color: var(--blue-core);
}

.pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Unit Banner in Detail View */
.unit-detail-header-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px -6px rgba(0, 0, 0, 0.05);
}

.unit-detail-meta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.unit-detail-title {
  font-family: var(--font-head);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.unit-detail-sub {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.unit-detail-standards-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.unit-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ── 16. SCROLL REVEAL & RESPONSIVE QUERIES ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 992px) {
  .supaste-nav-links {
    display: none;
  }
  .supaste-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .supaste-stage-window {
    border-radius: 16px;
  }
  .promo-grid-3 {
    grid-template-columns: 1fr;
  }
  .methodology-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .units-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 640px) {
  .supaste-nav {
    border-radius: 0 0 18px 18px;
    padding: 8px 12px;
  }
  .nav-btn-zoom-header {
    display: none !important;
  }
  .supaste-hero-section {
    padding: 95px 16px 45px 16px !important;
  }
  .supaste-hero-title {
    font-size: clamp(2rem, 7vw, 2.6rem) !important;
    margin-bottom: 18px !important;
  }
  .hero-title-break {
    display: none !important;
  }
  .supaste-hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
    padding: 0 4px !important;
  }
  .supaste-hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 360px !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
  }
  .supaste-hero-actions a {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 14px 18px !important;
    font-size: 0.92rem !important;
  }
  .hero-simulators-dock {
    padding: 14px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 32px !important;
  }
  .dock-badge-title {
    font-size: 0.72rem !important;
  }
  .dock-pills-row {
    gap: 6px !important;
  }
  .dock-pill {
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }
  .supaste-metrics-strip {
    border-radius: 18px !important;
    padding: 16px 18px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 14px !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto 36px auto !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  }
  .supaste-metrics-strip .metric-dot {
    display: none !important;
  }
  .supaste-metrics-strip .metric-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    text-align: left !important;
  }
  .supaste-metrics-strip .metric-val {
    font-size: 1.15rem !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
  }
  .supaste-metrics-strip .metric-lbl {
    font-size: 0.72rem !important;
    color: #cbd5e1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }
  .supaste-stage-window {
    border-radius: 16px !important;
    margin-bottom: 45px !important;
  }
  .window-titlebar {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .window-title {
    font-size: 0.76rem !important;
    order: 3 !important;
    width: 100% !important;
    line-height: 1.35 !important;
  }
  .traffic-lights {
    order: 1 !important;
  }
  .window-right-tags {
    order: 2 !important;
    gap: 6px !important;
  }
  .win-tag {
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
  }
  .window-content-area {
    padding: 16px !important;
  }
  .stage-reading-quote {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin: 14px 0 !important;
  }
  .stage-bottom-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .stage-socratic-badge {
    font-size: 0.78rem !important;
    padding: 8px 12px !important;
  }
  .stage-action-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }
  .stage-player-pill {
    flex-wrap: wrap;
    border-radius: 18px;
  }
  .drawer-panel {
    max-width: 100%;
    border-radius: 0;
  }
  .methodology-grid {
    grid-template-columns: 1fr;
  }
  .methodology-card {
    padding: 24px;
  }
  .promo-section {
    padding: 50px 16px;
  }
  .catalog-header-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .units-progress-container {
    min-width: 100%;
  }
}

/* ============================================================
   stemOS Dev Content Studio — ESP Gold Model Components
   Dialogue Flow, Lexicon Grid, Socratic Chat, Formative Quizzes,
   and Track Certification Exam Systems
   ============================================================ */

/* ── 1. REAL-WORLD DIALOGUE FLOW ── */
.dialogue-meta-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  color: #ffffff;
}

.dialogue-meta-card h3 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.dialogue-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(56, 189, 248, 0.12);
  color: var(--blue-electric);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.dialogue-audio-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.btn-play-dialogue {
  background: linear-gradient(135deg, var(--blue-core) 0%, var(--blue-radiant) 100%);
  color: #ffffff;
  border: none;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
  transition: all 0.2s var(--ease-spring);
}

.btn-play-dialogue:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}

.btn-turn-audio,
.btn-turn-trans {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-turn-audio:hover {
  background: #f0f9ff;
  border-color: #7dd3fc;
  color: #0284c7;
}

.btn-turn-trans:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.dialogue-flow {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}

.dialogue-turn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all 0.25s ease;
}

.dialogue-turn.active-speaking .dialogue-bubble {
  border-color: var(--blue-radiant);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2), 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #f0f9ff;
}

.dialogue-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dialogue-content {
  flex: 1;
  min-width: 0;
}

.dialogue-speaker-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.dialogue-speaker-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
}

.dialogue-speaker-role {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.dialogue-bubble {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.dialogue-term-chip {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border-bottom: 2px solid #38bdf8;
}

.dialogue-translation-block {
  margin-top: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border-left: 3px solid var(--blue-radiant);
  border-radius: 0 8px 8px 0;
  font-size: 0.84rem;
  color: #475569;
  font-style: italic;
  line-height: 1.5;
}

.dialogue-turn-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.dialogue-pedagogical-notes {
  margin-top: 10px;
  padding: 6px 12px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #92400e;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── 2. LEXICON MATRIX & COLLOCATIONS GRID ── */
.lexicon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.lexicon-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  transition: all 0.25s var(--ease-spring);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.lexicon-card:hover {
  border-color: var(--blue-core);
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.1);
  transform: translateY(-2px);
}

.lexicon-cat-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  margin-bottom: 8px;
}

.lexicon-term-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.lexicon-term-name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
}

.lexicon-ipa {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #0284c7;
  font-weight: 600;
  background: #f0f9ff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #bae6fd;
}

.lexicon-def {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 12px;
}

.collocations-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.collocations-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #0284c7;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.collocation-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.collocation-chip {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.collocation-chip:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
  color: #0284c7;
}

.false-friends-alert {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #92400e;
  line-height: 1.4;
  display: flex;
  gap: 8px;
}

/* ── 3. SOCRATIC FEYNMAN EVALUATOR CHAT ── */
.socratic-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.socratic-header {
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.socratic-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.socratic-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
}

.socratic-progress-bar {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.socratic-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #a855f7);
  transition: width 0.4s ease;
}

.socratic-chat-body {
  padding: 20px;
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fafbfc;
}

.socratic-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 88%;
}

.socratic-msg.bot {
  align-self: flex-start;
}

.socratic-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.socratic-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.socratic-msg.bot .socratic-msg-avatar {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.socratic-msg.user .socratic-msg-avatar {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.socratic-bubble {
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.socratic-msg.bot .socratic-bubble {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-top-left-radius: 4px;
}

.socratic-msg.user .socratic-bubble {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border-top-right-radius: 4px;
}

.socratic-input-bar {
  padding: 14px 18px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.socratic-textarea {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #0f172a;
  resize: none;
  outline: none;
  transition: all 0.2s ease;
}

.socratic-textarea:focus {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.btn-socratic-send {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-socratic-send:hover {
  background: #0284c7;
  transform: translateY(-1px);
}

/* ── 4. FORMATIVE READING ASSESSMENT QUIZZES ── */
.reading-quiz-section {
  margin-top: 32px;
  padding: 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

.quiz-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.quiz-section-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.quiz-question-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.quiz-q-text {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
  margin-bottom: 14px;
  line-height: 1.45;
}

.quiz-options-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-opt-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  font-size: 0.88rem;
  color: #334155;
  transition: all 0.2s ease;
}

.quiz-opt-label:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.quiz-opt-label input[type="radio"] {
  accent-color: #0284c7;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.quiz-opt-label.is-correct {
  background: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #065f46 !important;
  font-weight: 600;
}

.quiz-opt-label.is-wrong {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

.quiz-feedback-box {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  display: none;
}

.quiz-feedback-box.show {
  display: block;
}

.quiz-feedback-box.correct {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

.quiz-feedback-box.wrong {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* ── 5. TRACK CERTIFICATION EXAM MODAL ── */
.cs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 999999;
}

.cs-modal-overlay.active {
  display: flex;
}

.cs-modal-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 680px;
  border: 1px solid #e2e8f0;
  animation: modalPop 0.3s var(--ease-spring);
}

@keyframes modalPop {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.cs-modal-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cs-modal-title {
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
}

.cs-modal-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cs-modal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35);
}

/* ── INTERACTIVE VOCABULARY KEYWORDS & FLOATING POPOVER ── */
.term-keyword {
  display: inline;
  position: relative;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  border-bottom: 2px dotted #0284c7;
}

.term-keyword.a2-keyword {
  color: #0369a1;
  background: rgba(2, 132, 199, 0.07);
  border-bottom-color: rgba(2, 132, 199, 0.6);
}

.term-keyword.a2-keyword:hover,
.term-keyword.a2-keyword:focus {
  background: rgba(2, 132, 199, 0.16);
  color: #0c4a6e;
  outline: none;
}

.term-keyword.b1-keyword {
  color: #7e22ce;
  background: rgba(168, 85, 247, 0.08);
  border-bottom-color: rgba(168, 85, 247, 0.6);
}

.term-keyword.b1-keyword:hover,
.term-keyword.b1-keyword:focus {
  background: rgba(168, 85, 247, 0.18);
  color: #581c87;
  outline: none;
}

/* Floating Popover Container */
#stemos-vocab-popover {
  position: absolute;
  z-index: 99999;
  width: 320px;
  max-width: 90vw;
  background: rgba(15, 23, 42, 0.96);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-sans, 'Inter', sans-serif);
  animation: popover-slide-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

@keyframes popover-slide-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.popover-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.popover-category-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.popover-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.popover-close-btn:hover {
  color: #ffffff;
}

.popover-main-term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.popover-en-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-head, 'Plus Jakarta Sans', sans-serif);
}

.popover-audio-btn {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.popover-audio-btn:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: scale(1.08);
}

.popover-es-subtitle {
  font-size: 0.88rem;
  color: #a78bfa;
  font-weight: 600;
  margin-bottom: 6px;
}

.popover-ipa-tag {
  display: inline-block;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.76rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.popover-body-def {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #e2e8f0;
  margin: 0;
}

/* ── CERTIFICATE & OPEN BADGE 3.0 MODAL — see Phase 7 rules below ── */

.cert-modal-card {
  background: #ffffff;
  border-radius: 20px;
  max-width: 820px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  animation: cert-appear 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cert-appear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.certificate-canvas {
  background: #fffdfa;
  color: #1e293b;
  padding: 28px;
  border-radius: 12px;
  box-shadow: inset 0 0 40px rgba(180, 83, 9, 0.04);
  font-family: var(--font-sans, 'Inter', sans-serif);
  margin-bottom: 20px;
}

.cert-border-outer {
  border: 3px double #d97706;
  padding: 4px;
}

.cert-border-inner {
  border: 1px solid rgba(217, 119, 6, 0.4);
  padding: 24px;
  position: relative;
  text-align: center;
}

.cert-org {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d97706;
  margin-bottom: 8px;
  font-weight: 700;
}

.cert-main-title {
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: #0f172a;
  margin-bottom: 18px;
  text-transform: uppercase;
  font-family: var(--font-head);
  font-weight: 800;
}

.cert-recipient {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1e3a8a;
  margin: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 6px;
  display: inline-block;
  letter-spacing: -0.02em;
}

.cert-body-text {
  font-size: 0.88rem;
  color: #475569;
  max-width: 540px;
  margin: 0 auto 10px;
  line-height: 1.6;
}

.cert-skill-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  margin: 10px 0 12px;
  letter-spacing: -0.01em;
}

.cert-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
  gap: 16px;
}

.cert-sign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.signature-line {
  width: 140px;
  height: 1px;
  background: #0f172a;
  margin-bottom: 6px;
}

.signer {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0f172a;
}

.signer-title {
  font-size: 0.72rem;
  color: #64748b;
}

.cert-verification {
  text-align: right;
}

.verification-lbl {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 600;
}

.verification-code {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  color: #0284c7;
  margin: 2px 0;
}

.verification-date {
  font-size: 0.72rem;
  color: #64748b;
}

.quiz-completed-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 6px;
}

@media print {
  body * {
    visibility: hidden;
  }
  .cert-modal-overlay.active,
  .cert-modal-overlay.active .certificate-canvas,
  .cert-modal-overlay.active .certificate-canvas * {
    visibility: visible;
  }
  .cert-modal-overlay.active {
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    padding: 0;
  }
  .cert-modal-card {
    box-shadow: none;
    padding: 0;
  }
  .modal-actions, .drawer-close-btn {
    display: none !important;
  }
}




/* ── Formative Comprehension Check: Reading Content Protection ── */
.reading-lockable-container {
  position: relative;
  transition: all 0.35s ease;
}

.reading-lockable-container.is-blurred-locked .reader-content,
.reading-lockable-container.is-blurred-locked .glossary-section-wrap {
  filter: blur(14px) grayscale(40%);
  -webkit-filter: blur(14px) grayscale(40%);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.reading-eval-shield {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: rgba(248, 250, 252, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  animation: shieldAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reading-lockable-container.is-blurred-locked .reading-eval-shield {
  display: flex;
}

@keyframes shieldAppear {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.eval-shield-card {
  max-width: 480px;
  background: #ffffff;
  border: 1.5px solid rgba(2, 132, 199, 0.28);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 45px -10px rgba(2, 132, 199, 0.18), 0 0 0 1px rgba(2, 132, 199, 0.05);
}

.shield-lock-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 14px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2);
}

.shield-lock-title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  letter-spacing: -0.015em;
}

.shield-lock-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 20px 0;
}

.shield-return-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.shield-return-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-1px);
}

.quiz-toggle-trigger-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: none;
  color: #ffffff;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
  transition: all 0.2s ease;
}

.quiz-toggle-trigger-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.quiz-toggle-trigger-btn.active-eval {
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(2, 132, 199, 0.3);
  color: #0284c7;
  box-shadow: none;
}

.reading-quiz-section.eval-active {
  border-color: rgba(2, 132, 199, 0.45);
  box-shadow: 0 8px 30px rgba(2, 132, 199, 0.12);
  background: #ffffff;
}

.quiz-section-header {
  cursor: pointer;
  user-select: none;
}

/* ── 12. TECHNICAL OUTPUT LAB: 8D & ESCALATION EMAIL STUDIO ── */
.output-lab-section {
  padding: 60px 0 80px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%, #f8fafc 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}

.output-lab-header {
  margin-bottom: 28px;
}

.output-lab-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #065f46;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.output-lab-title {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 8px;
}

.output-lab-desc {
  font-size: 0.95rem;
  color: #475569;
  max-width: 820px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.output-mode-pills {
  display: inline-flex;
  background: #e2e8f0;
  padding: 4px;
  border-radius: 14px;
  gap: 4px;
  margin-top: 4px;
}

.output-mode-btn {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s var(--ease-smooth);
}

.output-mode-btn:hover {
  color: #0f172a;
}

.output-mode-btn.active {
  background: #ffffff;
  color: var(--blue-core);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.scenario-preset-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.preset-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.preset-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-chip, .email-preset-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.preset-chip:hover, .email-preset-chip:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.preset-chip.active, .email-preset-chip.active {
  border-color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  color: #0284c7;
  font-weight: 700;
}

.output-grid-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 960px) {
  .output-grid-layout {
    grid-template-columns: 1fr;
  }
}

.output-form-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.output-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.report-code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 2px;
}

.form-title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.audit-status-tag {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.eightd-steps-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eightd-step-box {
  display: flex;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f8fafc;
}

.eightd-step-box:last-child {
  border-bottom: none;
}

.step-badge-num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.08);
  color: #0284c7;
  font-size: 0.76rem;
  font-weight: 800;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(2, 132, 199, 0.18);
}

.step-content {
  flex: 1;
}

.step-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
  display: block;
  margin-bottom: 3px;
}

.step-guidance {
  font-size: 0.76rem;
  color: #64748b;
  margin-bottom: 6px;
}

.step-input, .step-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: #0f172a;
  background: #ffffff;
  transition: all 0.2s ease;
  line-height: 1.45;
}

.step-input:focus, .step-textarea:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.output-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.output-btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: none;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.25);
  transition: all 0.2s ease;
}

.output-btn-primary:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: translateY(-1px);
}

.output-btn-secondary {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.output-btn-secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.output-rubric-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 90px;
}

.rubric-header {
  margin-bottom: 14px;
}

.rubric-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0284c7;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.rubric-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.score-display-box {
  text-align: center;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin: 14px 0;
}

.score-number {
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 900;
  color: #0284c7;
  line-height: 1;
}

.score-level-text {
  font-size: 0.76rem;
  font-weight: 800;
  color: #059669;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.score-progress-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}

.score-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #0284c7 100%);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.rubric-criteria-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.criteria-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 0.8rem;
  border-left: 3px solid #cbd5e1;
}

.criteria-item.pass {
  border-left-color: #10b981;
}

.criteria-item.pass i {
  color: #10b981;
}

.criteria-item.warn {
  border-left-color: #f59e0b;
}

.criteria-item.warn i {
  color: #f59e0b;
}

.rubric-feedback-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3.5px solid #0284c7;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
}

.feedback-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feedback-text {
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.45;
  margin: 0;
}

/* Email Builder specific */
.email-fields-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.email-field-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-lbl {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
}

.email-tone-gauge {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.tone-metric {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}

.tone-lbl {
  font-size: 0.7rem;
  color: #64748b;
  display: block;
}

.tone-val {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0284c7;
}

.email-preview-paper {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 18px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.6;
  color: #1e293b;
  white-space: pre-wrap;
  min-height: 240px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02);
}

.colloquial-suggestion-box {
  margin-top: 14px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.coll-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: #ea580c;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.coll-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coll-chip {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
  border: 1px solid rgba(234, 88, 12, 0.2);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ── 13. ADAPTIVE SPACED REPETITION ENGINE (SM-2 DECK) ── */
.sm2-section {
  padding: 70px 24px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  position: relative;
}

.sm2-container {
  max-width: 1240px;
  margin: 0 auto;
}

.sm2-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.sm2-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #d97706;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.sm2-title {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin: 0 0 8px 0;
}

.sm2-subtitle {
  font-size: 0.96rem;
  color: #475569;
  max-width: 720px;
  line-height: 1.6;
  margin: 0;
}

.sm2-stats-pillbox {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 10px 22px;
  border-radius: 18px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06);
  gap: 16px;
}

.sm2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sm2-stat-num {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0284c7;
  line-height: 1.1;
}

.sm2-stat-lbl {
  font-size: 0.70rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.sm2-stat-divider {
  width: 1px;
  height: 26px;
  background: #e2e8f0;
}

/* Controls Strip */
.sm2-controls-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sm2-deck-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sm2-filter-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sm2-filter-btn:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: #f0f9ff;
}

.sm2-filter-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.sm2-actions-right {
  display: flex;
  gap: 10px;
}

.sm2-action-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.sm2-action-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

/* Workspace Layout */
.sm2-workspace {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 992px) {
  .sm2-workspace {
    grid-template-columns: 1fr;
  }
}

/* 3D Flashcard Viewport */
.sm2-card-viewport {
  perspective: 1400px;
  min-height: 480px;
}

.sm2-card {
  width: 100%;
  height: 480px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.sm2-card.is-flipped {
  transform: rotateY(180deg);
}

.sm2-card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 24px;
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 12px 36px -6px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Front Face */
.sm2-card-front {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
}

.sm2-card-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sm2-card-domain {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0284c7;
  text-transform: uppercase;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 4px 10px;
  border-radius: 6px;
}

.sm2-card-interval {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
}

.sm2-card-front-content {
  text-align: center;
  padding: 20px 10px;
}

.sm2-card-term {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.sm2-card-ipa-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.sm2-card-ipa {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
}

.sm2-audio-btn {
  background: #0284c7;
  color: #ffffff;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sm2-audio-btn:hover {
  transform: scale(1.15);
  background: #0369a1;
}

.sm2-card-prompt-hint {
  max-width: 540px;
  margin: 0 auto;
  font-size: 0.94rem;
  color: #64748b;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sm2-card-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.sm2-flip-hint {
  font-size: 0.78rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sm2-flip-hint kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #334155;
}

.sm2-flip-btn {
  background: #0f172a;
  color: #ffffff;
  border: none;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.sm2-flip-btn:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

/* Back Face */
.sm2-card-back {
  background: #ffffff;
  border: 2px solid #0284c7;
  transform: rotateY(180deg);
  overflow-y: auto;
}

.sm2-audio-btn-small {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0284c7;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.76rem;
  transition: all 0.15s ease;
}

.sm2-audio-btn-small:hover {
  background: #0284c7;
  color: #ffffff;
}

.sm2-card-back-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0;
}

.sm2-back-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
}

.sm2-back-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sm2-back-text {
  font-size: 0.88rem;
  color: #1e293b;
  line-height: 1.5;
  margin: 0;
}

.sm2-trap-text {
  color: #b91c1c;
  font-weight: 600;
}

.sm2-colloc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.sm2-colloc-pill {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Rating Bar */
.sm2-card-rating-bar {
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.sm2-rating-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.sm2-rating-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.sm2-rate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sm2-rate-btn .rate-key {
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #94a3b8;
}

.sm2-rate-btn .rate-name {
  font-size: 0.82rem;
  font-weight: 800;
  margin: 1px 0;
}

.sm2-rate-btn .rate-sub {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: #64748b;
}

.sm2-rate-btn.rate-0:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
}

.sm2-rate-btn.rate-3:hover {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #b45309;
}

.sm2-rate-btn.rate-4:hover {
  background: #f0fdf4;
  border-color: #10b981;
  color: #047857;
}

.sm2-rate-btn.rate-5:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}

/* Telemetry Sidebar */
.sm2-telemetry-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sm2-algo-card, .sm2-queue-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.05);
}

.sm2-algo-header, .sm2-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sm2-algo-header h4, .sm2-queue-header h4 {
  font-family: var(--font-head);
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.sm2-vector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.sm2-vector-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
}

.sm2-vector-item .v-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.sm2-vector-item .v-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: #0284c7;
  margin-top: 2px;
}

.sm2-formula-callout {
  background: #f1f5f9;
  border-left: 3px solid #0284c7;
  padding: 8px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.70rem;
  color: #475569;
  word-break: break-all;
}

.sm2-queue-count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 6px;
}

.sm2-queue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.sm2-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
  color: #334155;
  transition: all 0.15s ease;
}

.sm2-queue-item.active {
  background: rgba(2, 132, 199, 0.08);
  border-color: #0284c7;
  color: #0284c7;
  font-weight: 700;
}

/* ── 14. PRESENTATION & PITCH BUILDER + NEGOTIATION ARENA (PHASE 3) ── */
.pitch-section {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 80px 24px 100px 24px;
  position: relative;
  z-index: 2;
  scroll-margin-top: 70px;
}

.pitch-metrics-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.pitch-metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pitch-m-num {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: #ec4899;
}

.pitch-m-lbl {
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pitch-m-divider {
  width: 1px;
  height: 28px;
  background: #e2e8f0;
}

/* Tab Switcher */
.pitch-mode-tabs-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.pitch-mode-tabs {
  display: inline-flex;
  background: #f1f5f9;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  gap: 6px;
}

.pitch-tab-btn {
  border: none;
  background: transparent;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pitch-tab-btn:hover {
  color: #0f172a;
}

.pitch-tab-btn.active {
  background: #ffffff;
  color: #ec4899;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Presets Strip */
.pitch-preset-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  background: #f8fafc;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

.preset-label {
  font-size: 0.80rem;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
}

.preset-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pitch-preset-chip, .neg-scenario-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.pitch-preset-chip:hover, .neg-scenario-chip:hover {
  border-color: #ec4899;
  color: #ec4899;
  background: rgba(236, 72, 153, 0.04);
}

.pitch-preset-chip.active, .neg-scenario-chip.active {
  background: #ec4899;
  border-color: #ec4899;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.25);
}

/* 2-Column Pitch Studio Layout */
.pitch-studio-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 28px;
  align-items: start;
}

.pitch-form-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pitch-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
  gap: 12px;
}

.pitch-code-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: #ec4899;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pitch-form-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 4px 0 0 0;
}

.pitch-level-tag {
  background: rgba(236, 72, 153, 0.08);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.2);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Stages in Form */
.pitch-stage-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pitch-stage-block:focus-within {
  border-color: #ec4899;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
  background: #ffffff;
}

.stage-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stage-tag-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-number {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  background: #ec4899;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
}

.stage-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
}

.stage-word-counter {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.stage-instruction {
  font-size: 0.76rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.pitch-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.5;
  color: #1e293b;
  background: #ffffff;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.pitch-textarea:focus {
  border-color: #ec4899;
}

.pitch-collocations-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.colloc-lbl {
  font-size: 0.70rem;
  font-weight: 700;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.colloc-chip {
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  color: #0284c7;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.colloc-chip:hover {
  background: #0284c7;
  color: #ffffff;
}

/* Right Column: Telemetry & Scorecard */
.pitch-telemetry-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 90px;
}

.pitch-rubric-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rubric-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rubric-title {
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.pitch-score-gauge-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

.pitch-score-gauge {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.gauge-number {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 800;
  color: #ec4899;
}

.gauge-sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.05em;
}

.pitch-score-bar-outer {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.pitch-score-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #ec4899, #f43f5e);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* 4 Diagnostic Metrics Grid */
.pitch-diagnostics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.diagnostic-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.diag-lbl {
  font-size: 0.70rem;
  font-weight: 700;
  color: #475569;
}

.diag-val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
}

.diag-meter {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.diag-fill {
  height: 100%;
  background: #0284c7;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Filler Words Detection Callout */
.filler-telemetry-callout {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filler-callout-header {
  font-size: 0.76rem;
  font-weight: 700;
  color: #b45309;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filler-chips-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filler-chip-flag {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  font-size: 0.70rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.filler-clean-badge {
  font-size: 0.74rem;
  color: #047857;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Live Teleprompter */
.pitch-teleprompter-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.teleprompter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.teleprompter-title {
  font-family: var(--font-head);
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.teleprompter-stats {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.teleprompter-readout-scroll {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #334155;
}

.pitch-tele-stage {
  padding-bottom: 8px;
  border-bottom: 1px dashed #e2e8f0;
}

.pitch-tele-stage:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pitch-tele-header {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 800;
  color: #ec4899;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.teleprompter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pitch-act-btn {
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.80rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.pitch-act-btn.play-btn {
  background: #ec4899;
  color: #ffffff;
  flex: 1;
  justify-content: center;
}

.pitch-act-btn.play-btn:hover {
  background: #db2777;
}

.pitch-act-btn.copy-btn {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.pitch-act-btn.copy-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.pitch-act-btn.reset-btn {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.pitch-act-btn.reset-btn:hover {
  color: #ef4444;
  border-color: #fca5a5;
}

/* ── STUDIO B: CROSS-BORDER NEGOTIATION ARENA ── */
.neg-arena-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: start;
}

.neg-dialogue-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.neg-dialogue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 14px;
}

.neg-round-badge {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 800;
  color: #ec4899;
  background: rgba(236, 72, 153, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

.neg-scenario-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 4px 0 0 0;
}

.neg-status-pill {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 4px 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.neg-briefing-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.briefing-header {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
}

.briefing-content {
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.5;
  margin: 0;
}

/* Chat Stream */
.neg-chat-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
}

.neg-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 88%;
}

.neg-msg.stakeholder {
  align-self: flex-start;
}

.neg-msg.user {
  align-self: flex-end;
}

.neg-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.neg-speaker-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.neg-stance-badge {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.stance-skeptical {
  background: #fef3c7;
  color: #b45309;
}

.stance-hostile {
  background: #fee2e2;
  color: #b91c1c;
}

.stance-constructive {
  background: #d1fae5;
  color: #047857;
}

.stance-agreement {
  background: #e0e7ff;
  color: #4338ca;
}

.neg-tactical-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
}

.neg-bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.84rem;
  line-height: 1.5;
}

.neg-msg.stakeholder .neg-bubble {
  background: #f1f5f9;
  color: #1e293b;
  border-top-left-radius: 4px;
}

.neg-msg.user .neg-bubble {
  background: #0f172a;
  color: #f8fafc;
  border-top-right-radius: 4px;
}

/* Response Dock */
.neg-response-dock {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.dock-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dock-hint {
  font-size: 0.72rem;
  color: #64748b;
}

.neg-choices-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.neg-choice-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}

.neg-choice-btn:hover {
  border-color: #ec4899;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.08);
}

.choice-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

.choice-tag.collab {
  background: #dcfce7;
  color: #15803d;
}

.choice-tag.passive {
  background: #fef9c3;
  color: #a16207;
}

.choice-tag.blunt {
  background: #fee2e2;
  color: #b91c1c;
}

.choice-body {
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.45;
}

/* Custom Text Input */
.neg-custom-toggle-wrap {
  text-align: center;
  margin-top: 4px;
}

.btn-toggle-custom {
  background: transparent;
  border: none;
  color: #0284c7;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-toggle-custom:hover {
  text-decoration: underline;
}

.neg-custom-input-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.neg-custom-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.82rem;
  font-family: var(--font-body);
  resize: vertical;
  box-sizing: border-box;
}

.neg-custom-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-submit-custom {
  background: #0284c7;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.80rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-submit-custom:hover {
  background: #0369a1;
}

/* Right Column: Stakeholder Dossier & Radar */
.neg-sidebar-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 90px;
}

.stakeholder-dossier-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dossier-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stakeholder-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #0f172a;
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.stakeholder-name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.stakeholder-title {
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 600;
}

.stakeholder-profile-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.78rem;
}

.profile-row .p-label {
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.profile-row .p-val {
  color: #334155;
  line-height: 1.4;
}

.stakeholder-sentiment-wrap {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.sentiment-lbl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
}

.sentiment-meter-bar {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.sentiment-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Radar Card */
.neg-radar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.radar-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radar-card-header h4 {
  font-family: var(--font-head);
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.neg-meters-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.neg-meter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meter-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
}

.m-val {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 800;
  color: #0f172a;
}

.meter-track {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.meter-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Executive Coach Box */
.neg-coach-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coach-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #15803d;
}

.coach-header h4 {
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0;
}

.coach-text {
  font-size: 0.80rem;
  color: #166534;
  line-height: 1.5;
  margin: 0;
}

/* ── STUDIO C: PHONETIC & SYLLABLE STRESS TRAINER ── */
.phonetic-term-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;
  font-family: var(--font-mono);
}

.phonetic-term-chip:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.04);
}

.phonetic-term-chip.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.phonetic-studio-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: start;
}

.phonetic-focus-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.phonetic-focus-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
  gap: 12px;
}

.phonetic-domain-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: #6366f1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.phonetic-word-title {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  margin: 4px 0 0 0;
  letter-spacing: -0.01em;
}

.phonetic-ipa-badge {
  font-family: var(--font-mono);
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #4338ca;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Syllable Breakdown Box */
.syllable-breakdown-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.syllable-lbl {
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.syllables-track {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.syllable-block {
  flex: 1;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 8px;
  gap: 6px;
  transition: all 0.2s ease;
}

.syllable-block.stressed {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.06);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.15);
  transform: translateY(-2px);
}

.syllable-text {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: #334155;
}

.syllable-block.stressed .syllable-text {
  font-weight: 900;
  color: #4338ca;
  text-transform: uppercase;
}

.syllable-tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.syllable-block.stressed .syllable-tag {
  background: #6366f1;
  color: #ffffff;
}

.syllable-block:not(.stressed) .syllable-tag {
  background: #f1f5f9;
  color: #94a3b8;
}

.syllable-energy-bar {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.syllable-energy-fill {
  height: 100%;
  border-radius: 999px;
  background: #6366f1;
  transition: width 0.3s ease;
}

.syllable-block:not(.stressed) .syllable-energy-fill {
  background: #cbd5e1;
}

/* Acoustic Trap Card */
.acoustic-trap-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trap-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trap-header h4 {
  font-size: 0.82rem;
  font-weight: 800;
  color: #b45309;
  margin: 0;
}

.trap-explanation {
  font-size: 0.82rem;
  color: #92400e;
  line-height: 1.5;
  margin: 0;
}

/* Audio Dock */
.phonetic-audio-dock {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}

.audio-playback-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-phonetic-audio {
  border: none;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.btn-phonetic-audio:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.btn-phonetic-audio.slow-btn {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

.btn-phonetic-audio.slow-btn:hover {
  background: #6366f1;
  color: #ffffff;
}

/* Mic Recording Dock */
.phonetic-record-dock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-phonetic-mic {
  border: none;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
  transition: all 0.2s ease;
}

.btn-phonetic-mic:hover {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  transform: translateY(-1px);
}

.btn-phonetic-mic.recording {
  background: #ef4444;
  animation: pulseRecording 1.2s infinite;
}

@keyframes pulseRecording {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.mic-status-hint {
  font-size: 0.74rem;
  color: #64748b;
  text-align: center;
}

/* Right Column: Acoustic Evaluation Card */
.phonetic-telemetry-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 90px;
}

.acoustic-score-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.acoustic-score-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.acoustic-score-header h4 {
  font-family: var(--font-head);
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.acoustic-score-display {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8fafc;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

.acoustic-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid #6366f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #ffffff;
}

.acoustic-num {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: #4338ca;
  line-height: 1;
}

.acoustic-lbl {
  font-size: 0.60rem;
  font-weight: 800;
  color: #64748b;
}

.acoustic-status-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acoustic-badge-level {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.04em;
}

.acoustic-sub-text {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.4;
  margin: 0;
}

/* Diagnostic Sub-Checks */
.phonetic-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phonetic-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}

.phonetic-check-item.pass i {
  color: #10b981;
  margin-top: 2px;
}

.phonetic-check-item.fail i {
  color: #ef4444;
  margin-top: 2px;
}

.check-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.c-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #0f172a;
}

.c-sub {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
}

/* Mastery Card */
.phonetic-mastery-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mastery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mastery-header h4 {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.mastery-count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 6px;
}

.mastery-bar-outer {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.mastery-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #10b981);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Responsive queries */
@media (max-width: 900px) {
  .pitch-studio-grid, .neg-arena-grid, .phonetic-studio-grid {
    grid-template-columns: 1fr;
  }
  .pitch-telemetry-card, .neg-sidebar-card, .phonetic-telemetry-card {
    position: static;
  }
}

/* ============================================================
   SECTION 15: CORPORATE L&D & WORKFORCE COMPETENCE DASHBOARD (FASE 4.1 & 4.2)
   ISO 9001:2015 Clause 7.2 Audit Suite, Heatmap & SCORM Package Exporter
   ============================================================ */

.corporate-ld-section {
  scroll-margin-top: 70px;
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 50%, #ffffff 100%);
  padding: 88px 24px;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}

.corporate-ld-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* Header */
.ld-header {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 36px;
}

.ld-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 999px;
  color: #0284c7;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.ld-title {
  font-family: var(--font-head);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 14px;
}

.ld-subtitle {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Plant / Cluster Selector Bar */
.ld-plant-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 12px 18px;
  margin-bottom: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.ld-plant-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
}

.ld-plant-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ld-plant-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #475569;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ld-plant-chip:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.ld-plant-chip.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

/* KPI Cards Grid */
.ld-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 36px;
}

.ld-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ld-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.kpi-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.kpi-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.kpi-label {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.kpi-val {
  font-family: var(--font-head);
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kpi-delta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}

.kpi-delta.positive {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.kpi-desc {
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Main Dashboard Grid */
.ld-dashboard-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}

.ld-panel-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}

.ld-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.ld-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ld-panel-title h3 {
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.015em;
  margin: 0;
}

.ld-panel-badge {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}

/* Tables */
.ld-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.ld-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  text-align: left;
}

.ld-table th {
  padding: 10px 12px;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.ld-table td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
}

.ld-table tr:hover td {
  background: #f8fafc;
}

.plant-name-col {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #0f172a;
}

.plant-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
}

.audit-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.audit-status-pill.ready {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.audit-status-pill.compliant {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

/* Heatmap Table */
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  color: #64748b;
}

.leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.leg-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.ld-heatmap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: center;
}

.ld-heatmap-table th {
  padding: 10px 10px;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.ld-heatmap-table th small {
  font-weight: 500;
  color: #94a3b8;
  font-size: 0.68rem;
}

.ld-heatmap-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
}

.heatmap-cell {
  border-radius: 8px;
  padding: 6px 10px;
  display: inline-block;
  min-width: 58px;
  transition: transform 0.15s ease;
}

.heatmap-cell:hover {
  transform: scale(1.06);
}

.heatmap-cell.low {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.heatmap-cell.mid {
  background: rgba(16, 185, 129, 0.45);
  color: #064e3b;
  border: 1px solid rgba(16, 185, 129, 0.6);
}

.heatmap-cell.high {
  background: #10b981;
  color: #ffffff;
  border: 1px solid #059669;
  font-weight: 800;
}

/* ISO 9001 Audit Suite */
.audit-verif-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
}

.audit-summary-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-clause-quote {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #475569;
  background: #f8fafc;
  border-left: 3px solid #f59e0b;
  padding: 12px 14px;
  border-radius: 0 10px 10px 0;
  margin: 0;
}

.audit-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
}

.audit-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audit-meta-item .lbl {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.audit-meta-item .val {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
}

.audit-actions-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ld-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
}

.ld-btn-primary:hover {
  background: #0369a1;
  transform: translateY(-1px);
}

.ld-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #f8fafc;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ld-btn-secondary:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* SCORM LMS Export Suite */
.scorm-version-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(168, 85, 247, 0.1);
  color: #9333ea;
  border: 1px solid rgba(168, 85, 247, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
}

.scorm-explainer {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #64748b;
  margin-bottom: 16px;
}

.scorm-form-group {
  margin-bottom: 14px;
}

.scorm-label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.scorm-select {
  width: 100%;
  padding: 9px 12px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s ease;
}

.scorm-select:focus {
  border-color: #9333ea;
  background: #ffffff;
}

.scorm-slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scorm-slider {
  flex: 1;
  accent-color: #9333ea;
}

.scorm-slider-val {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 800;
  color: #9333ea;
  min-width: 44px;
}

.ld-btn-scorm {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: linear-gradient(135deg, #9333ea, #7c3aed);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.25);
  margin-top: 6px;
}

.ld-btn-scorm:hover {
  background: linear-gradient(135deg, #7e22ce, #6d28d9);
  transform: translateY(-1px);
}

.sso-status-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 18px;
}

.sso-indicator-dot {
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  flex-shrink: 0;
  animation: ssoPulse 2s infinite;
}

@keyframes ssoPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.sso-info {
  display: flex;
  flex-direction: column;
}

.sso-title {
  font-size: 0.78rem;
  color: #1e293b;
}

.sso-sub {
  font-size: 0.7rem;
  color: #64748b;
  font-family: var(--font-mono);
}

/* Dossier Modal Styles */
.audit-dossier-print-wrap {
  font-family: var(--font-sans);
  color: #0f172a;
  line-height: 1.5;
}

.audit-dossier-header-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 20px;
}

.audit-dossier-seal {
  width: 64px;
  height: 64px;
  border: 2px dashed #0284c7;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #0284c7;
  text-align: center;
  line-height: 1.1;
}

.audit-dossier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 14px;
}

.audit-dossier-table th {
  background: #f1f5f9;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  font-weight: 700;
  color: #334155;
  text-align: left;
}

.audit-dossier-table td {
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

.audit-signoff-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.signoff-line {
  border-bottom: 1px solid #0f172a;
  height: 40px;
  margin-bottom: 6px;
}

.signoff-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

/* Responsive Queries for Section 15 */
@media (max-width: 1024px) {
  .ld-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ld-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ld-kpi-grid {
    grid-template-columns: 1fr;
  }
  .ld-plant-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   SECTION 16: EXECUTIVE CROSS-BORDER LEADERSHIP & MULTI-ACCENT ACOUSTIC LAB
   B2/C1 Anonymized Case Studies • 5 Global Accents • Telemetry Radar
   ========================================================================== */

.executive-lab-section {
  padding: 80px 24px;
  background: radial-gradient(circle at 10% 20%, rgba(147, 51, 234, 0.04) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(2, 132, 199, 0.04) 0%, transparent 40%),
              #ffffff;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  position: relative;
  overflow: hidden;
}

.executive-lab-container {
  max-width: 1360px;
  margin: 0 auto;
}

/* Header */
.exec-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 36px auto;
}

.exec-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e22ce;
  background: rgba(147, 51, 234, 0.08);
  border: 1px solid rgba(147, 51, 234, 0.2);
  margin-bottom: 14px;
}

.exec-title {
  font-size: 2.35rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  font-family: var(--font-head);
  line-height: 1.2;
}

.exec-subtitle {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.6;
  margin: 0 auto;
}

/* Mode Switcher Tabs */
.exec-tab-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.exec-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.94rem;
  font-weight: 700;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.exec-tab-btn:hover {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.exec-tab-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

.exec-tab-btn.active i {
  color: #c084fc;
}

/* Case Selector Strip */
.case-selector-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  flex-wrap: wrap;
}

.case-selector-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.case-pills-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.case-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.case-chip:hover {
  background: #ffffff;
  border-color: #c084fc;
}

.case-chip.active {
  background: rgba(147, 51, 234, 0.08);
  border-color: #9333ea;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.15);
}

.case-chip-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  text-transform: uppercase;
}

.case-chip.active .case-chip-badge {
  background: #9333ea;
  color: #ffffff;
}

.case-chip-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
}

/* Case Workspace Grid */
.case-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: start;
}

/* Dossier Card */
.case-dossier-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.dossier-header-strip {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.dossier-tag {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0284c7;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.dossier-headline {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0;
  font-family: var(--font-head);
  line-height: 1.25;
}

.dossier-risk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  white-space: nowrap;
}

.dossier-stakes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f8fafc;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  margin-bottom: 20px;
}

.stake-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stake-lbl {
  font-size: 0.72rem;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
}

.stake-val {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
}

.dossier-narrative-box,
.dossier-evidence-box {
  margin-bottom: 20px;
}

.narrative-heading,
.evidence-heading {
  font-size: 0.88rem;
  font-weight: 800;
  color: #334155;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.narrative-text {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.65;
  background: #fdfefe;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  margin: 0;
}

.evidence-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evidence-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.5;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #0284c7;
}

.evidence-list li i {
  color: #0284c7;
  margin-top: 3px;
  font-size: 0.85rem;
}

/* Decision Card */
.case-decision-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.decision-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.decision-eyebrow {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #9333ea;
  text-transform: uppercase;
  display: block;
}

.decision-heading {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 2px 0 0 0;
  font-family: var(--font-head);
}

.cefr-badge-b2c1 {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  background: rgba(147, 51, 234, 0.1);
  color: #7e22ce;
  border: 1px solid rgba(147, 51, 234, 0.25);
}

/* Decision Option Cards */
.decision-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.decision-option-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.decision-option-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.decision-option-card.selected {
  background: rgba(147, 51, 234, 0.04);
  border-color: #9333ea;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.12);
}

.opt-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.opt-tag {
  font-size: 0.74rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.opt-tag.batna {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.opt-tag.aggressive {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.opt-tag.yield {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.opt-tag.defer {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.opt-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.decision-option-card.selected .opt-indicator {
  border-color: #9333ea;
  background: #9333ea;
}

.decision-option-card.selected .opt-indicator::after {
  content: '';
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
}

.opt-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.opt-desc {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.45;
  margin: 0;
}

/* Telemetry Box */
.strategy-telemetry-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 20px;
}

.telemetry-box-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.telemetry-bars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.telem-bar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.telem-bar-hdr {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
}

.telem-pct {
  font-weight: 800;
  color: #0f172a;
}

.telem-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.telem-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.telem-fill.purple { background: linear-gradient(90deg, #a855f7, #7e22ce); }
.telem-fill.blue { background: linear-gradient(90deg, #38bdf8, #0284c7); }
.telem-fill.green { background: linear-gradient(90deg, #34d399, #059669); }
.telem-fill.amber { background: linear-gradient(90deg, #fbbf24, #d97706); }

/* Coach Debrief Box */
.coach-debrief-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.coach-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #0f172a;
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.coach-content {
  flex: 1;
}

.coach-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #9333ea;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}

.coach-text {
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.5;
  margin: 0;
}

/* Memo Generator Box */
.memo-generator-box {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  background: #ffffff;
}

.memo-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.memo-badge {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0284c7;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-copy-memo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-copy-memo:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.exec-memo-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  padding: 12px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #0f172a;
  resize: vertical;
}

/* ==========================================================================
   SUB-PANEL 2: MULTI-ACCENT ACOUSTIC LAB STYLING
   ========================================================================== */

.accent-selector-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  flex-wrap: wrap;
}

.accent-selector-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.accent-pills-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.accent-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.accent-chip:hover {
  background: #ffffff;
  border-color: #38bdf8;
}

.accent-chip.active {
  background: rgba(2, 132, 199, 0.08);
  border-color: #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
}

.accent-flag {
  font-size: 1.1rem;
  line-height: 1;
}

.accent-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
}

/* Accent Workspace Grid */
.accent-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: start;
}

/* Acoustic Player Card */
.acoustic-player-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.acoustic-player-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.speaker-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.speaker-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #0f172a;
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.speaker-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  font-family: var(--font-head);
}

.speaker-role {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}

.accent-dialect-tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(2, 132, 199, 0.08);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.2);
  text-transform: uppercase;
}

/* Waveform Box */
.acoustic-waveform-display {
  background: #0f172a;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.waveform-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  margin-bottom: 12px;
}

.w-bar {
  width: 4px;
  height: 12px;
  background: #38bdf8;
  border-radius: 4px;
  transition: height 0.2s ease;
}

.acoustic-player-card.playing .w-bar {
  animation: wavePulse 0.8s infinite ease-in-out alternate;
}

@keyframes wavePulse {
  0% { height: 8px; opacity: 0.4; }
  100% { height: 42px; opacity: 1; }
}

.waveform-status-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #94a3b8;
  font-family: monospace;
}

.waveform-status-text {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #38bdf8;
  font-weight: 700;
}

/* Controls Bar */
.acoustic-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.acoustic-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.acoustic-play-btn:hover {
  background: #0369a1;
  transform: translateY(-1px);
}

.speed-switcher-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.speed-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.speed-pills {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
}

.speed-btn {
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.speed-btn:hover {
  color: #0f172a;
}

.speed-btn.active {
  background: #ffffff;
  color: #0284c7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Transcript Box */
.acoustic-transcript-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.transcript-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tr-lbl {
  font-size: 0.76rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-toggle-transcript {
  background: transparent;
  border: none;
  font-size: 0.74rem;
  font-weight: 700;
  color: #0284c7;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.transcript-body {
  font-size: 0.92rem;
  color: #1e293b;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.phonetic-spotlight {
  background: #fef08a;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
  color: #854d0e;
}

/* Quiz Box */
.accent-quiz-box {
  border-top: 1px solid #f1f5f9;
  padding-top: 18px;
}

.quiz-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.quiz-badge {
  font-size: 0.76rem;
  font-weight: 800;
  color: #7e22ce;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.quiz-score {
  font-size: 0.76rem;
  font-weight: 800;
  color: #059669;
}

.quiz-prompt {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.quiz-options-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-opt-btn {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quiz-opt-btn:hover {
  background: #ffffff;
  border-color: #cbd5e1;
}

.quiz-opt-btn.correct {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
  font-weight: 700;
}

.quiz-opt-btn.incorrect {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.quiz-feedback-box {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.45;
}

/* 3-Layer Decoder Card */
.acoustic-decoder-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.decoder-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.decoder-badge {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #0284c7;
  text-transform: uppercase;
  display: block;
}

.decoder-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 2px 0 0 0;
  font-family: var(--font-head);
}

.iso-chip {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
}

/* Decoder Layer Cards */
.decoder-layer-card {
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

.decoder-layer-card.layer-phonetics {
  border-left: 4px solid #0284c7;
  background: #fafcfe;
}

.decoder-layer-card.layer-pragmatics {
  border-left: 4px solid #f59e0b;
  background: #fffdf9;
}

.decoder-layer-card.layer-response {
  border-left: 4px solid #10b981;
  background: #f8fdfb;
}

.layer-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.layer-num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.layer-sub {
  font-size: 0.75rem;
  color: #64748b;
  display: block;
}

.layer-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #334155;
}

.phonetic-point-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.phonetic-point-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.phonetic-point-list li i {
  color: #0284c7;
  margin-top: 4px;
  font-size: 0.75rem;
}

.pragmatic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  margin-top: 4px;
}

.pragmatic-table th {
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
  padding: 6px 10px;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pragmatic-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}

.response-quote-box {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: 10px 14px;
  font-style: italic;
  color: #065f46;
  font-weight: 600;
  margin-top: 6px;
}

/* Responsive Queries for Section 16 */
@media (max-width: 1024px) {
  .case-workspace-grid,
  .accent-workspace-grid {
    grid-template-columns: 1fr;
  }
  .telemetry-bars-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dossier-stakes-row {
    grid-template-columns: 1fr;
  }
  .exec-title {
    font-size: 1.85rem;
  }
  .case-selector-bar,
  .accent-selector-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6: STEMBot Socratic AI Engineering Copilot & Lexical Engine
   ═══════════════════════════════════════════════════════════════════ */

/* Floating Action Button (FAB) */
.stembot-fab-copilot {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99990;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 9999px;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.stembot-fab-copilot:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: #38bdf8;
  box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.45);
}

.stembot-fab-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  background: #0f172a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(56, 189, 248, 0.5);
}

.stembot-beacon-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #10b981;
  border: 2px solid #0f172a;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: stembotBeaconPulse 1.8s ease-in-out infinite alternate;
}

.stembot-beacon-dot.live {
  background: #0ea5e9;
  box-shadow: 0 0 8px #0ea5e9;
}

@keyframes stembotBeaconPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.25); opacity: 1; }
}

.stembot-fab-label {
  display: flex;
  flex-direction: column;
}

.stembot-fab-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
}

.stembot-fab-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.1;
}

/* Modal Slide-over Drawer */
.stembot-copilot-drawer {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  justify-content: flex-end;
}

.stembot-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stembot-drawer-container {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 100vh;
  background: #0b1120;
  border-left: 1.5px solid rgba(56, 189, 248, 0.3);
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: stembotDrawerSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes stembotDrawerSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.stembot-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: rgba(15, 23, 42, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stembot-drawer-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stembot-mini-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stembot-drawer-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stembot-drawer-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

.stembot-live-tag {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 7px;
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stembot-drawer-subtitle {
  font-size: 0.74rem;
  color: #94a3b8;
  margin: 2px 0 0;
}

.stembot-drawer-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.stembot-drawer-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.stembot-drawer-nav-tabs {
  display: flex;
  background: #070d19;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 16px 0;
  gap: 6px;
}

.stembot-tab-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.stembot-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.03);
}

.stembot-tab-btn.active {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
}

.stembot-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.stembot-tab-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 16px;
}

.stembot-prompt-selector-row {
  margin-bottom: 14px;
}

.stembot-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.stembot-select,
.stembot-text-input {
  width: 100%;
  padding: 10px 14px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f8fafc;
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

.stembot-select:focus,
.stembot-text-input:focus,
.stembot-textarea:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.stembot-scenario-card {
  background: #0f172a;
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.scenario-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f59e0b;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.scenario-prompt-text {
  font-size: 0.86rem;
  color: #e2e8f0;
  line-height: 1.5;
  margin: 0;
}

.stembot-input-block {
  margin-bottom: 18px;
}

.stembot-textarea {
  width: 100%;
  padding: 12px 14px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f8fafc;
  font-size: 0.86rem;
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
}

.stembot-input-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.stembot-char-count {
  font-size: 0.72rem;
  color: #64748b;
  font-family: var(--font-mono);
}

.stembot-btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stembot-btn-primary {
  padding: 8px 16px;
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.stembot-btn-primary:hover {
  background: #0369a1;
  transform: translateY(-1px);
}

.stembot-btn-secondary {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.stembot-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Feynman Evaluation Result Box */
.stembot-eval-result {
  background: #0f172a;
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
}

.stembot-result-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.stembot-score-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #10b981;
  background: rgba(16, 185, 129, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stembot-score-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #10b981;
  line-height: 1;
}

.stembot-score-sub {
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #6ee7b7;
  letter-spacing: 0.05em;
}

.stembot-result-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 4px;
}

.stembot-result-summary {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0;
}

.stembot-rubric-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.rubric-mini-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.rubric-mini-label {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
}

.rubric-mini-val {
  font-size: 0.92rem;
  font-weight: 800;
  color: #38bdf8;
}

.stembot-highlight-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #cbd5e1;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stembot-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lex-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  font-family: var(--font-mono);
}

/* Lexical Upgrader Pills & Register Cards */
.stembot-sample-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sample-pill {
  font-size: 0.72rem;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
}

.sample-pill:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
}

.stembot-upgraded-registers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.register-card {
  border-radius: 10px;
  padding: 12px 16px;
  border: 1.5px solid transparent;
}

.register-card.reg-sop {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.3);
}

.register-card.reg-8d {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.register-card.reg-exec {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.3);
}

.register-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.register-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.reg-sop .register-tag { color: #38bdf8; }
.reg-8d .register-tag { color: #10b981; }
.reg-exec .register-tag { color: #c084fc; }

.btn-copy-register {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.btn-copy-register:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.register-text {
  font-size: 0.85rem;
  color: #f1f5f9;
  line-height: 1.45;
  margin: 0;
  font-style: italic;
}

/* Socratic Mock Audit */
.stembot-audit-intro {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

.audit-auditor-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.auditor-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #f59e0b;
}

.auditor-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

.auditor-dept {
  font-size: 0.72rem;
  color: #94a3b8;
}

.audit-briefing {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0;
  font-style: italic;
}

.stembot-audit-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px;
  background: #070d19;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.audit-msg {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.audit-msg.auditor {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fde68a;
  align-self: flex-start;
}

.audit-msg.user {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.3);
  color: #e0f2fe;
  align-self: flex-end;
}

/* ==========================================================================
   PHASE 7: AUDITABLE DIGITAL CERTIFICATES & ENTERPRISE CLOUD SYNC
   ========================================================================== */

/* ── Certificate & QR Modal Overlays ── */
.cert-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(3, 7, 18, 0.94);
  backdrop-filter: blur(18px);
  padding: 24px 16px;
  overflow-y: auto;
  display: none;
  align-items: center;
  justify-content: center;
}

.cert-modal-overlay.active {
  display: flex;
}

.cert-modal-dialog {
  width: 100%;
  max-width: 1160px;
  background: #090e1a;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 20px;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(212, 175, 55, 0.12);
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cert-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

.cert-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cert-modal-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  font-size: 1.25rem;
}

.cert-modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

.cert-modal-sub {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 2px 0 0 0;
}

.btn-close-cert-modal {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-close-cert-modal:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: rotate(90deg);
}

.cert-layout-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
}

@media (max-width: 992px) {
  .cert-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Customizer Form Panel */
.cert-customizer-panel {
  background: #0d1527;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cert-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cert-form-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cert-form-input,
.cert-form-select {
  background: #070c18;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 9px 12px;
  color: #f1f5f9;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}

.cert-form-input:focus,
.cert-form-select:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}

.cert-actions-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.btn-cert-generate {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  border: 1px solid #ffd700;
  color: #0b0f19;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 11px 16px;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
  transition: all 0.2s;
}

.btn-cert-generate:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.45);
}

.btn-cert-print {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #38bdf8;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-cert-print:hover {
  background: rgba(14, 165, 233, 0.22);
}

.btn-cert-copy-link {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-cert-copy-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* ── Live High-Fidelity Certificate Canvas ── */
.cert-canvas-container {
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
}

.certificate-canvas {
  width: 740px;
  min-height: 520px;
  background: radial-gradient(circle at 50% 50%, #0d1529 0%, #070c17 100%);
  border: 3px solid #d4af37;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(212, 175, 55, 0.06);
  padding: 24px;
  position: relative;
  box-sizing: border-box;
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Guilloché Geometric Border Inset */
.cert-guilloche-inset {
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 6px;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

/* Corner Rosettes */
.cert-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #d4af37;
  border-radius: 2px;
}
.cert-corner.top-left { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.cert-corner.top-right { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.cert-corner.bottom-left { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.cert-corner.bottom-right { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.cert-canvas-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cert-stem-crest {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cert-crest-svg {
  width: 26px;
  height: 26px;
  color: #d4af37;
}

.cert-brand-txt {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #d4af37;
  text-transform: uppercase;
}

.cert-headline {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #f8fafc;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.25;
}

.cert-subline {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #94a3b8;
  text-transform: uppercase;
  margin: 0;
}

.cert-canvas-body {
  text-align: center;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cert-attest-text {
  font-size: 0.8rem;
  color: #cbd5e1;
  font-style: italic;
  margin: 0;
}

.cert-recipient-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 2.3rem;
  font-weight: 400;
  font-style: italic;
  color: #fef08a;
  text-shadow: 0 0 20px rgba(254, 240, 138, 0.25);
  margin: 2px 0;
  line-height: 1.15;
}

.cert-accreditation-desc {
  font-size: 0.76rem;
  color: #94a3b8;
  max-width: 580px;
  line-height: 1.4;
  margin: 0;
}

.cert-track-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #ffd700;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  margin-top: 4px;
}

.cert-facility-tag {
  font-size: 0.74rem;
  color: #38bdf8;
  font-weight: 600;
}

.cert-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  border-top: 1px dashed rgba(212, 175, 55, 0.25);
  border-bottom: 1px dashed rgba(212, 175, 55, 0.25);
  padding: 8px 12px;
  margin: 8px 0;
}

.cert-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.cert-meta-k {
  font-size: 0.62rem;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
}

.cert-meta-v {
  font-size: 0.78rem;
  color: #f1f5f9;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

/* Certificate Footer Elements: QR, Seal, Signatures */
.cert-canvas-footer {
  display: grid;
  grid-template-columns: 120px 1fr 140px;
  align-items: flex-end;
  gap: 16px;
  padding-top: 8px;
}

.cert-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cert-qr-svg-wrap {
  width: 78px;
  height: 78px;
  background: #ffffff;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #d4af37;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-qr-lbl {
  font-size: 0.6rem;
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

/* Holographic Gold Seal */
.cert-hologram-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cert-seal-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd700 0%, #d4af37 60%, #996515 100%);
  border: 2px dashed #ffffff;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #0b0f19;
  position: relative;
}

.cert-seal-icon {
  font-size: 1.1rem;
}

.cert-seal-text {
  font-size: 0.46rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 2px;
}

/* Signatures */
.cert-signatures {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cert-sig-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.5);
  padding-bottom: 3px;
}

.cert-sig-script {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #ffd700;
  margin: 0;
  line-height: 1;
}

.cert-sig-role {
  font-size: 0.58rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

/* ── Verification Badge Modal (Public ?verify=FOLIO) ── */
.verification-badge-card {
  width: 100%;
  max-width: 580px;
  background: #090e1a;
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(16, 185, 129, 0.15);
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.verification-status-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 14px 18px;
  border-radius: 12px;
}

.verification-check-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #10b981;
  color: #0b0f19;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

.verification-status-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #34d399;
  margin: 0;
}

.verification-status-sub {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 2px 0 0 0;
}

.verification-data-table {
  width: 100%;
  border-collapse: collapse;
}

.verification-data-table td {
  padding: 8px 10px;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.verification-data-table td.v-label {
  color: #94a3b8;
  font-weight: 600;
  width: 38%;
}

.verification-data-table td.v-val {
  color: #f1f5f9;
  font-weight: 700;
}

/* ── Enterprise Cloud Sync Modal ── */
.cloud-sync-dialog {
  width: 100%;
  max-width: 640px;
  background: #090e1a;
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 20px;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(6, 182, 212, 0.12);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.cloud-sync-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.3);
  padding: 12px 18px;
  border-radius: 12px;
}

.cloud-status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cloud-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 10px #06b6d4;
  animation: pulse 2s infinite;
}

.cloud-status-text {
  font-size: 0.88rem;
  font-weight: 800;
  color: #e0f2fe;
}

.cloud-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.cloud-metric-card {
  background: #0d1527;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cloud-metric-k {
  font-size: 0.72rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 700;
}

.cloud-metric-v {
  font-size: 1.35rem;
  font-weight: 900;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
}

.cloud-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-cloud-sync-action {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: 1px solid #38bdf8;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.84rem;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-cloud-sync-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

.btn-cloud-backup-action {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-cloud-backup-action:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Clean Print Optimization for Certificates ── */
@media print {
  body * {
    visibility: hidden !important;
  }
  #certificate-canvas-render,
  #certificate-canvas-render * {
    visibility: visible !important;
  }
  #stemos-certificate-modal {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
  }
  .cert-modal-dialog {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .cert-modal-header,
  .cert-customizer-panel {
    display: none !important;
  }
  .cert-canvas-container {
    padding: 0 !important;
  }
  #certificate-canvas-render {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border: 3px solid #d4af37 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #090e1a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ==========================================================================
   PHASE 8: INTERACTIVE BLUEPRINT, P&ID & GD&T READING LAB
   ========================================================================== */

.blueprint-lab-section {
  padding: 80px 24px;
  background: linear-gradient(180deg, #070d1a 0%, #040812 100%);
  border-top: 1px solid rgba(56, 189, 248, 0.15);
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
  position: relative;
  overflow: hidden;
}

.blueprint-lab-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.blueprint-header-wrap {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.blueprint-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 20px;
}

.blueprint-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #f8fafc;
  margin: 0;
  line-height: 1.2;
}

.blueprint-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

.blueprint-nav-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  justify-content: center;
}

.bp-tab-btn {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.bp-tab-btn:hover {
  background: rgba(56, 189, 248, 0.1);
  color: #e0f2fe;
  border-color: rgba(56, 189, 248, 0.3);
}

.bp-tab-btn.active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.25), rgba(14, 165, 233, 0.15));
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.blueprint-workbench-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1080px) {
  .blueprint-workbench-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Left: Blueprint Drawing Frame ── */
.blueprint-drawing-frame {
  background: #040d1c;
  border: 2px solid #0284c7;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), inset 0 0 40px rgba(2, 132, 199, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 540px;
}

.blueprint-frame-topbar {
  background: #06162d;
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
}

.bp-dwg-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.05em;
}

.bp-dwg-scale {
  font-size: 0.72rem;
  color: #94a3b8;
}

.blueprint-svg-viewport {
  flex: 1;
  background-color: #061122;
  background-image: linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

.blueprint-svg-canvas {
  width: 100%;
  max-width: 680px;
  height: auto;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.25));
}

.blueprint-frame-bottombar {
  background: #06162d;
  border-top: 1px solid rgba(56, 189, 248, 0.2);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bp-hint-text {
  font-size: 0.74rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-bp-ctrl {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.74rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-bp-ctrl:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #ffffff;
}

/* ── Interactive Hotspot Pins ── */
.blueprint-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 165, 233, 0.25);
  border: 1.5px solid #38bdf8;
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.blueprint-pin:hover,
.blueprint-pin.active {
  background: #0284c7;
  border-color: #f8fafc;
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.8);
}

.bp-pin-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: pulse 1.8s infinite;
}

.bp-pin-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
}

/* ── Right: Inspector & Redline Studio Card ── */
.blueprint-inspector-card {
  background: #091224;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.bp-inspector-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.bp-hotspot-tag {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: 1px solid #38bdf8;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: 0.88rem;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.4);
}

.bp-tag-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bp-component-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  line-height: 1.25;
}

.bp-system-sub {
  font-size: 0.76rem;
  color: #94a3b8;
}

/* Spec Box */
.bp-spec-box {
  background: #060c18;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bp-spec-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bp-spec-k {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bp-spec-v {
  font-size: 0.82rem;
  color: #e2e8f0;
  line-height: 1.35;
}

/* Verbalization Box */
.bp-verbalization-box {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bp-verb-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bp-verb-quote {
  font-size: 0.84rem;
  color: #f1f5f9;
  line-height: 1.45;
  margin: 0;
  font-style: italic;
}

/* Redline & ECO Box */
.bp-redline-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bp-redline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bp-redline-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-copy-redline {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-copy-redline:hover {
  background: rgba(245, 158, 11, 0.3);
}

.bp-redline-text {
  font-size: 0.8rem;
  color: #fef3c7;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.4;
  margin: 0;
}

/* Quiz Box */
.bp-quiz-box {
  background: #060c18;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bp-quiz-question {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.4;
}

.bp-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bp-quiz-opt-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.78rem;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.bp-quiz-opt-btn:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
  color: #ffffff;
}

.bp-quiz-opt-btn.correct {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  font-weight: 700;
}

.bp-quiz-opt-btn.wrong {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #f87171 !important;
}

.bp-quiz-feedback {
  font-size: 0.76rem;
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.35;
}

/* ==========================================================================
   PHASE 9: LOTO ZERO-ENERGY PROTOCOL & SHIFT HANDOVER LAB
   ========================================================================== */

.loto-handover-section {
  padding: 85px 24px;
  background: linear-gradient(180deg, #09090b 0%, #0d0f17 50%, #06080e 100%);
  border-top: 1px solid rgba(239, 68, 68, 0.2);
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
  position: relative;
  overflow: hidden;
}

.loto-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.loto-header-wrap {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loto-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 20px;
}

.loto-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #f8fafc;
  margin: 0;
  line-height: 1.2;
}

.loto-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* Mode Switcher Tabs (LOTO Protocol vs Shift Handover) */
.loto-mode-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.loto-tab-btn {
  background: rgba(24, 24, 27, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #a1a1aa;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all 0.25s ease;
}

.loto-tab-btn:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #f4f4f5;
  background: rgba(39, 39, 42, 0.8);
}

.loto-tab-btn.active {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.25), rgba(185, 28, 28, 0.15));
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.35);
}

/* Scenario Chips Bar */
.loto-scenario-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  justify-content: center;
}

.loto-chip {
  background: rgba(24, 24, 27, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s;
}

.loto-chip:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f1f5f9;
  border-color: rgba(239, 68, 68, 0.3);
}

.loto-chip.active {
  background: linear-gradient(135deg, #b91c1c, #991b1b);
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(185, 28, 28, 0.4);
}

/* LOTO Workbench Grid */
.loto-workbench-grid {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1080px) {
  .loto-workbench-grid {
    grid-template-columns: 1fr;
  }
}

/* Isolation Sequence Column */
.loto-card-panel {
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.loto-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.loto-target-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

.loto-standard-tag {
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
}

/* Step-by-Step Flow */
.loto-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.loto-step-card {
  background: #050811;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.loto-step-card:hover {
  border-color: rgba(239, 68, 68, 0.35);
  background: #090e1c;
}

.loto-step-card.active {
  border-color: #ef4444;
  background: rgba(220, 38, 38, 0.08);
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.2);
}

.loto-step-card.completed {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

.loto-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #18181b;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #a1a1aa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}

.loto-step-card.active .loto-step-num {
  background: #ef4444;
  border-color: #fca5a5;
  color: #ffffff;
}

.loto-step-card.completed .loto-step-num {
  background: #10b981;
  border-color: #6ee7b7;
  color: #ffffff;
}

.loto-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.loto-step-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f1f5f9;
}

.loto-step-detail {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Equipment Isolation Points Grid */
.loto-points-box {
  background: #050811;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.loto-points-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loto-points-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.loto-points-status {
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  color: #38bdf8;
  font-weight: 700;
}

.loto-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.loto-point-item {
  background: #0c1220;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.loto-point-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.loto-point-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  font-weight: 800;
  color: #f87171;
}

.loto-point-desc {
  font-size: 0.72rem;
  color: #cbd5e1;
}

.btn-loto-toggle {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #fca5a5;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-loto-toggle.locked {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

/* Right Column: EHS Auditor Speech Script & Compliance */
.loto-auditor-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loto-script-card {
  background: rgba(220, 38, 38, 0.06);
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.loto-script-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loto-script-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #f87171;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 7px;
}

.loto-btn-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-loto-action {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.btn-loto-action:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #ffffff;
  border-color: #ef4444;
}

.loto-script-text {
  font-size: 0.86rem;
  color: #f1f5f9;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  background: rgba(0, 0, 0, 0.25);
  padding: 12px;
  border-radius: 8px;
  border-left: 3px solid #ef4444;
}

.loto-trystep-banner {
  background: #071529;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.loto-trystep-text {
  font-size: 0.78rem;
  color: #bae6fd;
}

.btn-trystep {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border: 1px solid #38bdf8;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

/* OSHA Compliance Quiz */
.loto-quiz-card {
  background: #080d19;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.loto-quiz-q {
  font-size: 0.84rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.4;
}

.loto-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loto-quiz-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.78rem;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.loto-quiz-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ffffff;
}

.loto-quiz-btn.correct {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  font-weight: 700;
}

.loto-quiz-btn.wrong {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #f87171 !important;
}

.loto-quiz-feedback {
  font-size: 0.76rem;
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.35;
}

/* ==========================================================================
   SUBPANEL 2: SHIFT HANDOVER 4-QUADRANT LOG STYLING
   ========================================================================== */

.handover-workbench-grid {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1080px) {
  .handover-workbench-grid {
    grid-template-columns: 1fr;
  }
}

.handover-quadrant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 680px) {
  .handover-quadrant-grid {
    grid-template-columns: 1fr;
  }
}

.handover-q-card {
  background: #060b16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.handover-q-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.q1-color { color: #34d399; }
.q2-color { color: #f87171; }
.q3-color { color: #fbbf24; }
.q4-color { color: #38bdf8; }

.handover-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.handover-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.handover-input {
  background: #03060c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-family: inherit;
}

.handover-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

.handover-textarea {
  min-height: 55px;
  resize: vertical;
}

/* Right Output Memo */
.handover-memo-panel {
  background: #090e1c;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.handover-memo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.handover-memo-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 7px;
}

.handover-memo-pre {
  background: #040812;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  color: #e2e8f0;
  line-height: 1.45;
  white-space: pre-wrap;
  margin: 0;
  max-height: 380px;
  overflow-y: auto;
}

.handover-standup-box {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.handover-standup-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.handover-standup-quote {
  font-size: 0.8rem;
  color: #f1f5f9;
  line-height: 1.4;
  margin: 0;
  font-style: italic;
}

/* ==========================================================================
   PHASE 10: INCIDENT RESPONSE WAR ROOM & CLOSED-LOOP COMMUNICATION LAB
   ========================================================================== */

.incident-war-room-section {
  padding: 85px 24px;
  background: radial-gradient(circle at 50% 0%, #170d10 0%, #0a0709 45%, #050406 100%);
  border-top: 1px solid rgba(244, 63, 94, 0.25);
  border-bottom: 1px solid rgba(244, 63, 94, 0.25);
  position: relative;
  overflow: hidden;
}

.warroom-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.warroom-header-wrap {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.warroom-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 20px;
}

.warroom-badge i {
  color: #ef4444;
  animation: warroomPulse 1.8s infinite;
}

@keyframes warroomPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.warroom-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #f8fafc;
  margin: 0;
  line-height: 1.2;
}

.warroom-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* Mode Switcher Tabs */
.warroom-mode-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.warroom-tab-btn {
  background: rgba(24, 24, 27, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #a1a1aa;
  padding: 11px 22px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all 0.25s ease;
}

.warroom-tab-btn:hover {
  border-color: rgba(244, 63, 94, 0.4);
  color: #f4f4f5;
  background: rgba(39, 39, 42, 0.9);
}

.warroom-tab-btn.active {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.28), rgba(159, 18, 57, 0.18));
  border-color: #f43f5e;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(225, 29, 72, 0.35);
}

/* Live Ticker Alert Banner */
.warroom-ticker-strip {
  background: linear-gradient(90deg, rgba(30, 10, 15, 0.95) 0%, rgba(45, 14, 22, 0.95) 50%, rgba(30, 10, 15, 0.95) 100%);
  border: 1px solid rgba(244, 63, 94, 0.35);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.warroom-ticker-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.warroom-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: warroomPulse 1.2s infinite;
}

.warroom-ticker-headline {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fca5a5;
  letter-spacing: 0.02em;
}

.warroom-ticker-metrics {
  display: flex;
  align-items: center;
  gap: 20px;
}

.warroom-metric-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.warroom-metric-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.warroom-metric-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 900;
  color: #ef4444;
}

/* Scenario Chips Bar */
.warroom-scenario-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  justify-content: center;
}

.warroom-chip {
  background: rgba(24, 24, 27, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s;
}

.warroom-chip:hover {
  background: rgba(244, 63, 94, 0.1);
  color: #f1f5f9;
  border-color: rgba(244, 63, 94, 0.35);
}

.warroom-chip.active {
  background: linear-gradient(135deg, #be123c, #9f1239);
  border-color: #fb7185;
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(190, 18, 60, 0.45);
}

/* Workbench 2-Column Grid */
.warroom-workbench-grid {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1080px) {
  .warroom-workbench-grid {
    grid-template-columns: 1fr;
  }
}

/* Incident Scenario Details Card */
.warroom-card-panel {
  background: #09080e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.warroom-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.warroom-target-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

.warroom-severity-tag {
  font-size: 0.74rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: #fda4af;
  background: rgba(225, 29, 72, 0.15);
  border: 1px solid rgba(225, 29, 72, 0.4);
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}

.warroom-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.warroom-detail-item {
  background: #050407;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.warroom-detail-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.warroom-detail-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: #cbd5e1;
}

/* Containment Decision Strategy Options */
.warroom-strategies-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warroom-strategies-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #fb7185;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.warroom-strategy-card {
  background: #07060a;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.warroom-strategy-card:hover {
  background: #0f0a12;
  border-color: rgba(244, 63, 94, 0.4);
}

.warroom-strategy-card.selected {
  background: rgba(225, 29, 72, 0.12);
  border-color: #f43f5e;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.25);
}

.warroom-strategy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.warroom-strategy-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: #f8fafc;
}

.warroom-strategy-risk {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.risk-high { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid #ef4444; }
.risk-med { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid #f59e0b; }
.risk-low { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid #10b981; }

.warroom-strategy-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0;
}

.warroom-strategy-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: #cbd5e1;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
}

/* Right Column: Executive SITREP Memo Panel */
.warroom-memo-panel {
  background: #09080e;
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.warroom-memo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.warroom-memo-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fb7185;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 7px;
}

.warroom-memo-pre {
  background: #040306;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  color: #e2e8f0;
  line-height: 1.45;
  white-space: pre-wrap;
  margin: 0;
  max-height: 380px;
  overflow-y: auto;
}

/* ICS Quiz Card */
.warroom-quiz-card {
  background: #07060a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warroom-quiz-q {
  font-size: 0.84rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.4;
}

.warroom-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.warroom-quiz-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.78rem;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.warroom-quiz-btn:hover {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.35);
  color: #ffffff;
}

.warroom-quiz-btn.correct {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  font-weight: 700;
}

.warroom-quiz-btn.wrong {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #f87171 !important;
}

.warroom-quiz-feedback {
  font-size: 0.76rem;
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.35;
}

/* ==========================================================================
   SUBPANEL 2: CLOSED-LOOP COMMUNICATION PROTOCOL
   ========================================================================== */

.closedloop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .closedloop-grid {
    grid-template-columns: 1fr;
  }
}

.closedloop-step-card {
  background: #08070b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.closedloop-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.closedloop-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  flex-shrink: 0;
}

.badge-callout { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid #38bdf8; }
.badge-repeat { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid #f59e0b; }
.badge-confirm { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid #10b981; }

.closedloop-step-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f8fafc;
}

.closedloop-script-box {
  background: #040306;
  border-left: 3px solid #38bdf8;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #e2e8f0;
  line-height: 1.45;
  font-style: italic;
}

.closedloop-script-box.repeat-box {
  border-left-color: #fbbf24;
}

.closedloop-script-box.confirm-box {
  border-left-color: #10b981;
}

.closedloop-drill-box {
  background: rgba(244, 63, 94, 0.06);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.closedloop-drill-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fb7185;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.closedloop-drill-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.closedloop-opt-btn {
  background: #07060a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.closedloop-opt-btn:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: #fb7185;
  color: #ffffff;
}

.closedloop-opt-btn.correct {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  font-weight: 700;
}

.closedloop-opt-btn.wrong {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #f87171 !important;
}

/* ==========================================================================
   PHASE 11: REAL-TIME MULTI-PLANT SCADA TELEMETRY & EDGE AI DIGITAL TWIN
   ========================================================================== */
.scada-digitaltwin-section {
  padding: 40px 24px;
  background: radial-gradient(circle at 15% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 60%),
              radial-gradient(circle at 85% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
              #070d18;
  border-top: 1px solid rgba(6, 182, 212, 0.2);
  border-bottom: 1px solid rgba(6, 182, 212, 0.2);
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}

.scada-container {
  max-width: 1280px;
  margin: 0 auto;
}

.scada-header-wrap {
  text-align: center;
  margin-bottom: 24px;
}

.scada-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #38bdf8;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.scada-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.scada-desc {
  font-size: 0.88rem;
  color: #94a3b8;
  max-width: 820px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

/* Tabs */
.scada-mode-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.scada-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scada-tab-btn:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: #e2e8f0;
}

.scada-tab-btn.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(99, 102, 241, 0.25));
  border-color: #06b6d4;
  color: #38bdf8;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

/* Status Strip */
.scada-status-strip {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.scada-status-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scada-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 8px #06b6d4;
  animation: pulse-dot 1.6s infinite ease-in-out;
}

.scada-status-headline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.84rem;
  font-weight: 700;
  color: #38bdf8;
}

.scada-status-metrics {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.scada-metric-pill {
  display: flex;
  flex-direction: column;
  background: rgba(2, 6, 23, 0.7);
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.scada-metric-lbl {
  font-size: 0.65rem;
  color: #64748b;
  text-transform: uppercase;
}

.scada-metric-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: #10b981;
}

/* Plant Selector Chips */
.scada-plant-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.scada-plant-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  font-size: 0.76rem;
  color: #cbd5e1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.scada-plant-chip:hover {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.4);
}

.scada-plant-chip.active {
  background: rgba(6, 182, 212, 0.2);
  border-color: #06b6d4;
  color: #38bdf8;
  font-weight: 700;
}

/* Workbench Grid */
.scada-workbench-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .scada-workbench-grid {
    grid-template-columns: 1fr;
  }
}

.scada-card-panel {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.scada-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.scada-plant-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
}

.scada-plant-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Telemetry Grid */
.scada-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.scada-kpi-card {
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(6, 182, 212, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.scada-kpi-lbl {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-bottom: 4px;
}

.scada-kpi-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: #38bdf8;
}

.scada-kpi-unit {
  font-size: 0.7rem;
  color: #64748b;
  margin-left: 2px;
}

.scada-kpi-target {
  font-size: 0.62rem;
  color: #64748b;
  margin-top: 4px;
}

.scada-gauge-bar {
  height: 4px;
  background: rgba(148, 163, 184, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}

.scada-gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #10b981);
  transition: width 0.3s ease;
}

/* Digital Twin Simulation Controls */
.twin-controls-box {
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}

.twin-controls-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #a5b4fc;
  margin-bottom: 12px;
}

.twin-slider-group {
  margin-bottom: 10px;
}

.twin-slider-lbl-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: #cbd5e1;
  margin-bottom: 4px;
}

.twin-slider-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #38bdf8;
}

.twin-range-input {
  width: 100%;
  height: 6px;
  background: #1e293b;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  accent-color: #06b6d4;
}

/* AI Predictive Maintenance Alert */
.twin-ai-prediction-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  position: relative;
}

.twin-ai-prediction-card.warning-state {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.twin-ai-prediction-card.critical-state {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.twin-ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.twin-ai-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.twin-ai-badge.warn {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.twin-ai-badge.crit {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.twin-ai-text {
  font-size: 0.78rem;
  color: #e2e8f0;
  line-height: 1.4;
  margin-bottom: 8px;
}

.twin-ai-stats {
  display: flex;
  gap: 16px;
  font-size: 0.72rem;
  color: #94a3b8;
}

.twin-stat-item strong {
  font-family: 'JetBrains Mono', monospace;
  color: #f8fafc;
}

/* Right Column: Memo & Quiz */
.scada-memo-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scada-memo-box {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.scada-memo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.scada-memo-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scada-memo-pre {
  background: #020617;
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 8px;
  padding: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1.45;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
}

/* Intercom Callout */
.scada-intercom-box {
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 10px;
  padding: 14px;
}

.scada-intercom-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.scada-intercom-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #a5b4fc;
  display: flex;
  align-items: center;
  gap: 6px;
}

.scada-intercom-text {
  font-size: 0.78rem;
  color: #e2e8f0;
  line-height: 1.45;
  font-style: italic;
  padding: 8px 10px;
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #6366f1;
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
}

/* SCADA Quiz */
.scada-quiz-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 12px;
  padding: 16px;
}

.scada-quiz-q {
  font-size: 0.82rem;
  color: #f1f5f9;
  line-height: 1.45;
  margin-bottom: 12px;
  font-weight: 600;
}

.scada-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scada-quiz-btn {
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scada-quiz-btn:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: #06b6d4;
  color: #ffffff;
}

.scada-quiz-btn.correct {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  font-weight: 700;
}

.scada-quiz-btn.wrong {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #f87171 !important;
}

.scada-quiz-feedback {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  line-height: 1.4;
}

/* ==========================================================================
   PHASE 12: AUTONOMOUS CROSS-BORDER AUDIO ROLEPLAY & PHONETIC ACCENT CLASSIFIER
   ========================================================================== */
.roleplay-classifier-section {
  padding: 40px 24px;
  background: radial-gradient(circle at 20% 25%, rgba(236, 72, 153, 0.08) 0%, transparent 60%),
              radial-gradient(circle at 80% 75%, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
              #070a14;
  border-top: 1px solid rgba(236, 72, 153, 0.25);
  border-bottom: 1px solid rgba(236, 72, 153, 0.25);
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}

.roleplay-container {
  max-width: 1280px;
  margin: 0 auto;
}

.roleplay-header-wrap {
  text-align: center;
  margin-bottom: 24px;
}

.roleplay-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.35);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f472b6;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.roleplay-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.roleplay-desc {
  font-size: 0.88rem;
  color: #94a3b8;
  max-width: 820px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

/* Scenario Chips Bar */
.roleplay-scenario-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.roleplay-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  font-size: 0.76rem;
  color: #cbd5e1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.roleplay-chip:hover {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.4);
}

.roleplay-chip.active {
  background: rgba(236, 72, 153, 0.2);
  border-color: #ec4899;
  color: #f472b6;
  font-weight: 700;
}

/* Workbench Grid */
.roleplay-workbench-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .roleplay-workbench-grid {
    grid-template-columns: 1fr;
  }
}

.roleplay-card-panel {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(236, 72, 153, 0.25);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Speaker Persona Card */
.roleplay-speaker-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid rgba(236, 72, 153, 0.2);
  border-radius: 10px;
  margin-bottom: 16px;
}

.roleplay-speaker-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}

.roleplay-speaker-info {
  flex: 1;
}

.roleplay-speaker-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
}

.roleplay-speaker-role {
  font-size: 0.74rem;
  color: #94a3b8;
}

.roleplay-accent-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.15);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Dialogue Box */
.roleplay-dialogue-box {
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.roleplay-bubble-speaker {
  background: rgba(30, 41, 59, 0.7);
  border-left: 3px solid #ec4899;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.roleplay-bubble-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f472b6;
  margin-bottom: 4px;
}

.roleplay-bubble-text {
  font-size: 0.82rem;
  color: #e2e8f0;
  line-height: 1.5;
}

.roleplay-audio-ctrls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.roleplay-speed-group {
  display: flex;
  gap: 4px;
}

.roleplay-speed-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
}

.roleplay-speed-btn.active {
  background: rgba(236, 72, 153, 0.2);
  border-color: #ec4899;
  color: #f472b6;
  font-weight: 700;
}

/* Phonetic & Dialect Spotlight */
.roleplay-phonetic-card {
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.roleplay-phonetic-head {
  font-size: 0.76rem;
  font-weight: 700;
  color: #c084fc;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.roleplay-phonetic-features {
  font-size: 0.72rem;
  color: #cbd5e1;
  line-height: 1.5;
}

/* User Response Practicum */
.roleplay-response-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(236, 72, 153, 0.25);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.roleplay-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f472b6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.roleplay-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roleplay-opt-card {
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.roleplay-opt-card:hover {
  background: rgba(236, 72, 153, 0.1);
  border-color: #ec4899;
}

.roleplay-opt-card.selected {
  background: rgba(236, 72, 153, 0.18);
  border-color: #ec4899;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.25);
}

.roleplay-opt-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.roleplay-opt-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.roleplay-opt-badge.optimal {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.roleplay-opt-badge.suboptimal {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.roleplay-opt-badge.hazard {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.roleplay-opt-quote {
  font-size: 0.76rem;
  color: #e2e8f0;
  line-height: 1.45;
  font-style: italic;
}

/* Radar & Scorecard */
.roleplay-scorecard {
  background: rgba(2, 6, 23, 0.9);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 10px;
  padding: 14px;
}

.roleplay-radar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.roleplay-radar-item {
  background: rgba(15, 23, 42, 0.6);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.roleplay-radar-lbl {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-bottom: 2px;
}

.roleplay-radar-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #c084fc;
}

.roleplay-feedback-text {
  font-size: 0.76rem;
  color: #cbd5e1;
  line-height: 1.45;
  padding: 8px 10px;
  background: rgba(139, 92, 246, 0.1);
  border-left: 3px solid #8b5cf6;
  border-radius: 0 6px 6px 0;
}

/* ============================================================
   Phase 13: Capstone Nearshoring Final Certification & Board Exam
   Aesthetic: Obsidian gold & cyan precision, executive dark glass
   ============================================================ */
.capstone-defense-section {
  padding: 4rem 1.5rem;
  background: radial-gradient(circle at 50% 0%, #0f172a 0%, #020617 100%);
  border-top: 1px solid rgba(245, 158, 11, 0.25);
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  color: #f8fafc;
  position: relative;
  overflow: hidden;
}

.capstone-container {
  max-width: 1280px;
  margin: 0 auto;
}

.capstone-header-wrap {
  text-align: center;
  margin-bottom: 2rem;
}

.capstone-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.capstone-title {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 0.6rem;
  background: linear-gradient(135deg, #ffffff 40%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.capstone-desc {
  max-width: 820px;
  margin: 0 auto;
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.6;
}

/* Station Circuit Selector Bar */
.capstone-station-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.capstone-station-tab {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s var(--ease-spring);
}

.capstone-station-tab:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: #fbbf24;
  color: #f8fafc;
  transform: translateY(-2px);
}

.capstone-station-tab.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.18) 100%);
  border-color: #f59e0b;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.3);
}

/* Main Grid */
.capstone-workbench-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 2rem;
}

@media (max-width: 960px) {
  .capstone-workbench-grid {
    grid-template-columns: 1fr;
  }
}

.capstone-card {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Station Details & Status */
.capstone-station-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.capstone-station-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
}

.capstone-station-location {
  font-size: 0.78rem;
  color: #fbbf24;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.capstone-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .capstone-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.capstone-kpi-item {
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.capstone-kpi-lbl {
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.capstone-kpi-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #38bdf8;
}

.capstone-dilemma-box {
  background: rgba(2, 6, 23, 0.7);
  border-left: 3px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  font-size: 0.84rem;
  color: #cbd5e1;
  line-height: 1.5;
}

/* Response options */
.capstone-options-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.capstone-opt-card {
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.capstone-opt-card:hover {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
}

.capstone-opt-card.selected {
  background: rgba(245, 158, 11, 0.18);
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.capstone-opt-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.capstone-opt-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.capstone-opt-badge.optimal {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.capstone-opt-badge.suboptimal {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.capstone-opt-badge.hazard {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.capstone-opt-quote {
  font-size: 0.77rem;
  color: #e2e8f0;
  line-height: 1.45;
}

/* Right Column: Oral Board Grilling */
.capstone-auditors-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.capstone-auditor-chip {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: #cbd5e1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.capstone-auditor-chip.active {
  background: rgba(6, 182, 212, 0.2);
  border-color: #06b6d4;
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}

.capstone-bubble-auditor {
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 10px;
  padding: 14px;
}

.capstone-bubble-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.capstone-bubble-text {
  font-size: 0.82rem;
  color: #f1f5f9;
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 8px;
}

.capstone-pragmatic-warning {
  font-size: 0.72rem;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.capstone-candidate-defense {
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  padding: 14px;
}

.capstone-radar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 600px) {
  .capstone-radar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.capstone-radar-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.capstone-radar-lbl {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-bottom: 2px;
}

.capstone-radar-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: #34d399;
}

/* Master Scorecard & Credential Panel */
.capstone-scorecard-panel {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 23, 0.95) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.capstone-grade-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.capstone-grade-score {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1;
}

.capstone-grade-status {
  font-size: 0.82rem;
  font-weight: 700;
  color: #34d399;
  letter-spacing: 0.05em;
}

.capstone-actions-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Master Diploma Modal Overlay */
.capstone-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(16px);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.capstone-modal-overlay.active {
  display: flex;
}

.capstone-diploma-card {
  background: #ffffff;
  color: #0f172a;
  max-width: 900px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  position: relative;
}

.capstone-diploma-canvas {
  border: 10px double #d97706;
  padding: 28px;
  background: radial-gradient(circle at 50% 50%, #fffdfa 0%, #fef3c7 100%);
  text-align: center;
  position: relative;
  border-radius: 8px;
}

.capstone-diploma-org {
  font-size: 0.85rem;
  font-weight: 800;
  color: #92400e;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capstone-diploma-title {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 900;
  color: #78350f;
  margin: 10px 0;
  letter-spacing: -0.01em;
}

.capstone-diploma-recipient {
  font-size: 1.6rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  color: #1e293b;
  margin: 14px 0;
  border-bottom: 2px solid #b45309;
  display: inline-block;
  padding: 0 30px 4px 30px;
}

.capstone-diploma-body {
  font-size: 0.88rem;
  color: #334155;
  max-width: 680px;
  margin: 0 auto 20px auto;
  line-height: 1.6;
}

.capstone-diploma-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(180, 83, 9, 0.3);
}

.capstone-qr-box {
  width: 90px;
  height: 90px;
}

/* ============================================================
   Phases 14-16: Student Registration, AI Pre-Assessment & Career Path
   Aesthetic: Obsidian emerald & luminous cyan, executive onboarding
   ============================================================ */
.reg-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(16px);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.reg-modal-overlay.active {
  display: flex;
}

.reg-modal-card {
  background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 18px;
  max-width: 920px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(16, 185, 129, 0.15);
  overflow: hidden;
  color: #f8fafc;
}

.reg-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.6);
}

.reg-stepper-bar {
  display: flex;
  gap: 12px;
  padding: 12px 24px;
  background: rgba(2, 6, 23, 0.6);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  overflow-x: auto;
}

.reg-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.1);
  white-space: nowrap;
}

.reg-step-pill.active {
  background: rgba(16, 185, 129, 0.18);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.reg-step-pill.completed {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #7dd3fc;
}

.reg-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.reg-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 680px) {
  .reg-form-grid {
    grid-template-columns: 1fr;
  }
}

.reg-field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reg-field-input, .reg-field-select {
  width: 100%;
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.88rem;
  transition: all 0.2s ease;
}

.reg-field-input:focus, .reg-field-select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.reg-field-select option {
  background: #0f172a;
  color: #ffffff;
}

/* AI Diagnostic Question Card */
.reg-diag-card {
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}

.reg-diag-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reg-diag-scenario {
  font-size: 0.84rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 12px;
  font-style: italic;
  background: rgba(15, 23, 42, 0.6);
  padding: 10px 14px;
  border-left: 3px solid #0284c7;
  border-radius: 0 6px 6px 0;
}

.reg-diag-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reg-diag-opt-btn {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: left;
  color: #e2e8f0;
  font-size: 0.8rem;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reg-diag-opt-btn:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: #10b981;
}

.reg-diag-opt-btn.selected {
  background: rgba(16, 185, 129, 0.22);
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
  font-weight: 600;
}

/* Career Path Output Canvas */
.reg-path-canvas {
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  padding: 22px;
}

.reg-path-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  margin-bottom: 16px;
}

.reg-match-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .reg-match-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.reg-match-item {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.reg-match-lbl {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-bottom: 2px;
}

.reg-match-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 800;
  color: #34d399;
}

/* 4 Milestones Timeline */
.reg-milestones-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.reg-milestone-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.reg-milestone-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reg-milestone-content {
  flex: 1;
}

.reg-milestone-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

.reg-milestone-desc {
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.4;
  margin-bottom: 6px;
}

.reg-milestone-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.reg-tag-pill {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.reg-tag-pill.slang {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   PHASE 17: ACTIVE CAREER PATH HUD, SLANG TRAINER & W3C OPEN BADGE 3.0 (SHA-256)
   ========================================================================== */

/* ── 1. Active Career Path HUD Banner ── */
.active-path-hud {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(2, 6, 23, 0.95) 100%);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 16px;
  padding: 18px 24px;
  margin: 0 0 24px 0;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 25px rgba(16, 185, 129, 0.1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.active-path-hud::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #10b981, #06b6d4);
}

.hud-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hud-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hud-career-title {
  margin: 4px 0 2px 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hud-student-sub {
  font-size: 0.85rem;
  color: #94a3b8;
}

.hud-hours-chip {
  text-align: right;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 8px 14px;
}

.hud-hours-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 800;
  color: #38bdf8;
}

.hud-hours-lbl {
  font-size: 0.68rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 4 Milestones Progress Strip */
.hud-milestones-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.hud-milestone-box {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.hud-milestone-box.active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.hud-m-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 4px;
}

.hud-m-title {
  font-size: 0.75rem;
  color: #e2e8f0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-progress-bar {
  height: 4px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 6px;
}

.hud-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #06b6d4);
  border-radius: 9999px;
}

/* HUD Action Buttons */
.hud-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.hud-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #1e293b;
  color: #e2e8f0;
}

.hud-action-btn:hover {
  background: #334155;
  border-color: #94a3b8;
  color: #ffffff;
}

.hud-action-btn.active {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #34d399;
}

.hud-action-btn.highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
  border-color: #10b981;
  color: #34d399;
}

.hud-action-btn.highlight:hover {
  background: #10b981;
  color: #020617;
}

/* Match Badge on Unit Cards */
.track-match-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(16, 185, 129, 0.9);
  color: #020617;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.04em;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── 2. Plant Slang & Idioms Trainer Modal ── */
.slang-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 20px;
  overflow-y: auto;
  display: none;
  align-items: center;
  justify-content: center;
}

.slang-modal-overlay.active {
  display: flex;
}

.slang-modal-card {
  background: #0f172a;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 16px;
  width: 100%;
  max-width: 820px;
  padding: 24px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.12);
  color: #f8fafc;
}

.slang-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  margin: 16px 0;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 4px;
}

.slang-card-item {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 14px;
  transition: all 0.2s ease;
}

.slang-card-item:hover {
  border-color: #fbbf24;
  background: rgba(30, 41, 59, 0.9);
}

.slang-phrase-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.slang-phrase-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 800;
  color: #fbbf24;
}

.slang-audio-btn {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
}

.slang-audio-btn:hover {
  background: #f59e0b;
  color: #020617;
}

.slang-meaning-row {
  font-size: 0.8rem;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.slang-example-row {
  font-size: 0.75rem;
  color: #94a3b8;
  font-style: italic;
  border-left: 2px solid #38bdf8;
  padding-left: 8px;
  margin-top: 6px;
}

/* ── 3. W3C Open Badge 3.0 & SHA-256 Verifiable Credential Modal ── */
.w3c-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 24px 16px;
  overflow-y: auto;
  display: none;
  align-items: center;
  justify-content: center;
}

.w3c-modal-overlay.active {
  display: flex;
}

.w3c-modal-dialog {
  width: 100%;
  max-width: 900px;
  background: #090e1a;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(56, 189, 248, 0.15);
  padding: 24px;
  color: #f8fafc;
}

.w3c-credential-sheet {
  background: #ffffff;
  color: #0f172a;
  border-radius: 8px;
  padding: 8px;
}

.w3c-cert-border-outer {
  border: 3px double #0284c7;
  padding: 6px;
  border-radius: 6px;
}

.w3c-cert-border-inner {
  border: 1px solid #cbd5e1;
  padding: 24px 20px;
  border-radius: 4px;
  background: radial-gradient(circle at center, #ffffff 60%, #f8fafc 100%);
}

.w3c-org-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
}

.w3c-badge-pill {
  font-size: 0.7rem;
  font-weight: 800;
  color: #0284c7;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
}

.w3c-main-title {
  margin: 10px 0 2px 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: #0c4a6e;
  text-align: center;
  letter-spacing: 0.03em;
}

.w3c-sub-title {
  font-size: 0.8rem;
  color: #0369a1;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}

.w3c-recipient-block {
  text-align: center;
  margin: 16px 0;
}

.w3c-text-lead {
  font-size: 0.82rem;
  color: #475569;
  margin: 0;
}

.w3c-recipient-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  margin: 6px 0 8px 0;
}

.w3c-text-body {
  font-size: 0.85rem;
  color: #334155;
  margin: 0 0 6px 0;
}

.w3c-career-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0284c7;
  margin: 6px 0;
}

.w3c-standards-text {
  font-size: 0.78rem;
  color: #64748b;
  margin: 8px 0 0 0;
}

.w3c-milestones-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 18px 0;
}

.w3c-m-badge {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}

.w3c-m-badge i {
  font-size: 1rem;
  display: block;
  margin-bottom: 4px;
}

.w3c-m-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
}

.w3c-m-sub {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
}

.w3c-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.w3c-sign-line {
  border-top: 1px solid #0f172a;
  width: 160px;
  margin-bottom: 4px;
}

.w3c-signer-name {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0f172a;
}

.w3c-signer-role {
  font-size: 0.68rem;
  color: #64748b;
}

.w3c-hash-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0369a1;
  margin: 2px 0;
}

@media print {
  body * {
    visibility: hidden;
  }
  .w3c-modal-overlay,
  .w3c-modal-overlay.active {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    padding: 0 !important;
  }
  .w3c-modal-dialog {
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: none !important;
  }
  .w3c-credential-sheet,
  .w3c-credential-sheet * {
    visibility: visible !important;
  }
  .w3c-modal-actions {
    display: none !important;
  }
}

/* ==========================================================================
   PHASE 18: STACKABLE MICRO-CREDENTIALS, RECRUITER PORTFOLIO & PUBLIC VERIFIER
   ========================================================================== */

/* Interactive Milestone Boxes in HUD */
.hud-milestone-box {
  cursor: pointer;
  position: relative;
}

.hud-milestone-box:hover {
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
}

.hud-milestone-box .hud-badge-tag {
  font-size: 0.62rem;
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ── 1. Recruiter Portfolio Showcase Modal ── */
.portfolio-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(2, 6, 23, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 24px 16px;
  overflow-y: auto;
  display: none;
  align-items: center;
  justify-content: center;
}

.portfolio-modal-overlay.active {
  display: flex;
}

.portfolio-modal-dialog {
  width: 100%;
  max-width: 960px;
  background: #090e1a;
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(16, 185, 129, 0.15);
  padding: 28px;
  color: #f8fafc;
}

.portfolio-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.portfolio-badge-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.portfolio-badge-card:hover {
  border-color: #10b981;
  background: rgba(15, 23, 42, 1);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
}

.portfolio-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.portfolio-badge-card h4 {
  margin: 0 0 6px 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

.portfolio-badge-card p {
  margin: 0 0 10px 0;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.4;
}

.portfolio-badge-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: #cbd5e1;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  padding-top: 8px;
}

.btn-linkedin-share {
  background: #0a66c2;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-linkedin-share:hover {
  background: #004182;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ── 2. Public Cryptographic Verifier Modal ── */
.verifier-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(2, 6, 23, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 24px 16px;
  overflow-y: auto;
  display: none;
  align-items: center;
  justify-content: center;
}

.verifier-modal-overlay.active {
  display: flex;
}

.verifier-modal-dialog {
  width: 100%;
  max-width: 720px;
  background: #090e1a;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(56, 189, 248, 0.15);
  padding: 28px;
  color: #f8fafc;
}

.verifier-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.verifier-details-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.82rem;
}

.verifier-details-table th,
.verifier-details-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  text-align: left;
}

.verifier-details-table th {
  color: #94a3b8;
  font-weight: 600;
  width: 32%;
}

.verifier-details-table td {
  color: #f1f5f9;
  font-weight: 700;
}




/* ==========================================================================
   PHASE 18: STACKABLE MICRO-CREDENTIALS & RECRUITER PORTFOLIO
   ========================================================================== */

/* ── Stackable Badge Cards ── */
.stack-badge-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 14px;
  padding: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.stack-badge-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.stack-badge-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.stack-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
  flex-shrink: 0;
}

.stack-badge-hito {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stack-badge-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.3;
}

.stack-badge-status {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.stack-badge-status.pending {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.3);
}
.stack-badge-status.earned {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.stack-badge-standards {
  font-size: 0.73rem;
  color: #64748b;
  line-height: 1.5;
}

/* ── Emit & Download Buttons ── */
.stack-emit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #ffffff;
  border: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
  font-family: inherit;
}
.stack-emit-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.stack-emit-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.stack-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  background: rgba(51, 65, 85, 0.6);
  color: #94a3b8;
  border: 1px solid rgba(51, 65, 85, 0.8);
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
}
.stack-dl-btn:not([disabled]):hover { background: rgba(2,132,199,0.25); color: #38bdf8; }
.stack-dl-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Portfolio Competency Cards ── */
.portfolio-competency-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: 12px;
  transition: border-color 0.2s;
}
.portfolio-competency-card:hover { border-color: rgba(56, 189, 248, 0.3); }
.portfolio-competency-card > i { font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; }
.portfolio-comp-title { font-size: 0.85rem; font-weight: 700; color: #f1f5f9; margin-bottom: 3px; }
.portfolio-comp-desc { font-size: 0.72rem; color: #64748b; line-height: 1.4; }

/* ── Hub Tags ── */
.portfolio-hub-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Responsive: stack to 1 col on small screens ── */
@media (max-width: 600px) {
  #stackable-badges-grid,
  #portfolio-competency-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Phase 18 HUD Button Variants (moved from inline styles) ── */
.hud-action-btn.hud-btn-microbadges {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}
.hud-action-btn.hud-btn-microbadges:hover {
  background: rgba(251, 191, 36, 0.28);
  border-color: rgba(251, 191, 36, 0.7);
  color: #fde68a;
}

.hud-action-btn.hud-btn-portfolio {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}
.hud-action-btn.hud-btn-portfolio:hover {
  background: rgba(99, 102, 241, 0.32);
  border-color: rgba(99, 102, 241, 0.7);
  color: #c7d2fe;
}

/* ============================================================
   FASE 19: NEARSHORING TALENT HUB & AI RECRUITER LAB STYLES
   ============================================================ */

/* ── Hub Module Tabs Switcher ── */
.hub-tabs-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0 32px;
}

.hub-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #94a3b8;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.hub-tab-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: #e2e8f0;
  transform: translateY(-1px);
}

.hub-tab-btn.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(56, 189, 248, 0.2));
  border-color: #6366f1;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.35);
}

.hub-subpanel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.96rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 14px;
}

/* ── Recruiter Personas Selector Grid ── */
.recruiter-personas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.recruiter-pill-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.recruiter-pill-card:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

.recruiter-pill-card.active {
  background: rgba(30, 41, 59, 0.95);
  border-color: #6366f1;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.25);
}

.persona-pill-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.persona-pill-info {
  flex: 1;
  min-width: 0;
}

.persona-pill-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.persona-pill-role {
  font-size: 0.74rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.persona-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
}

.recruiter-pill-card.active .persona-status-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

/* ── Interview Cockpit Grid ── */
.interview-cockpit-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 960px) {
  .interview-cockpit-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Left: Interview Recruiter Card ── */
.interview-recruiter-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.recruiter-header-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.recruiter-avatar-circle {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.5rem;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
  flex-shrink: 0;
}

.recruiter-name-tag {
  font-size: 1.15rem;
  font-weight: 800;
  color: #f8fafc;
}

.recruiter-role-tag {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 2px;
}

.recruiter-focus-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  padding: 3px 8px;
  margin-top: 6px;
}

/* Prompt Box */
.recruiter-prompt-box {
  background: rgba(10, 15, 29, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.prompt-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.74rem;
}

.prompt-scenario-counter {
  color: #a5b4fc;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.prompt-difficulty-pill {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.recruiter-question-text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #f1f5f9;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 3px solid #6366f1;
}

/* Audio Wave Visualizer */
.audio-wave-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  margin-bottom: 16px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
}

.wave-bar {
  width: 3px;
  height: 8px;
  background: #6366f1;
  border-radius: 2px;
  transition: height 0.15s ease;
}

.audio-wave-container.playing .wave-bar {
  animation: soundWavePulse 0.8s ease-in-out infinite alternate;
}

.audio-wave-container.playing .wave-bar:nth-child(2n) { animation-delay: 0.15s; }
.audio-wave-container.playing .wave-bar:nth-child(3n) { animation-delay: 0.3s; }
.audio-wave-container.playing .wave-bar:nth-child(4n) { animation-delay: 0.45s; }

@keyframes soundWavePulse {
  0% { height: 6px; background: #6366f1; }
  50% { height: 22px; background: #38bdf8; }
  100% { height: 10px; background: #10b981; }
}

/* Audio Controls */
.recruiter-audio-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hub-btn-listen {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hub-btn-listen:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}

.scenario-cycle-buttons {
  display: flex;
  gap: 6px;
}

.scenario-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scenario-btn:hover {
  background: #334155;
  color: #ffffff;
}

/* STAR Hint Guide */
.star-guide-tip {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
}

.guide-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .guide-grid { grid-template-columns: 1fr; }
}

/* ── Right: Candidate Station ── */
.interview-candidate-station {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.station-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.96rem;
  font-weight: 800;
  color: #f8fafc;
}

.sample-actions-group {
  display: flex;
  gap: 8px;
}

.btn-sample-load {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sample-load:hover {
  background: #334155;
  color: #ffffff;
}

/* Candidate Textarea */
.candidate-textarea-wrapper {
  margin-bottom: 14px;
}

.candidate-textarea {
  width: 100%;
  background: rgba(10, 15, 29, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #f1f5f9;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.candidate-textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Candidate Controls */
.candidate-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.btn-mic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #f1f5f9;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-mic-toggle:hover {
  background: #334155;
}

.btn-mic-toggle.recording {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fca5a5;
}

.mic-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #fca5a5;
}

.pulsing-mic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: micPulse 1.2s infinite;
}

@keyframes micPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.btn-evaluate-star {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.btn-evaluate-star:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

/* ── STAR Evaluation Scorecard ── */
.star-evaluation-scorecard {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInScorecard 0.4s ease forwards;
}

@keyframes fadeInScorecard {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.eval-verdict-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  margin-bottom: 18px;
}

.eval-verdict-banner.remedial {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.eval-verdict-banner.warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.verdict-score-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.8);
  border: 2px solid #10b981;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eval-verdict-banner.remedial .verdict-score-circle { border-color: #ef4444; }
.eval-verdict-banner.warning .verdict-score-circle { border-color: #f59e0b; }

.verdict-number {
  font-size: 1.35rem;
  font-weight: 900;
  color: #10b981;
  line-height: 1;
}

.eval-verdict-banner.remedial .verdict-number { color: #f87171; }
.eval-verdict-banner.warning .verdict-number { color: #fbbf24; }

.verdict-total {
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 700;
}

.verdict-text-block {
  flex: 1;
}

.verdict-headline {
  font-size: 0.98rem;
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: 0.03em;
}

.verdict-subtext {
  font-size: 0.78rem;
  color: #cbd5e1;
  margin-top: 3px;
}

.verdict-lexical-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
  font-size: 0.75rem;
  font-weight: 700;
}

/* STAR Breakdown Grid */
.star-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 600px) {
  .star-breakdown-grid { grid-template-columns: 1fr; }
}

.star-meter-card {
  background: rgba(10, 15, 29, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
}

.meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.meter-dim {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.meter-val {
  font-size: 0.78rem;
  font-weight: 800;
  color: #f1f5f9;
}

.meter-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(51, 65, 85, 0.4);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}

.meter-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.meter-note {
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Recruiter Direct Feedback */
.recruiter-feedback-box {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 12px;
  padding: 16px;
}

.feedback-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 8px;
}

.feedback-content {
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 12px;
}

.lexical-recommendations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rec-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ============================================================
   TAB 2: NEARSHORING JOB BOARD & TALENT MATCHER STYLES
   ============================================================ */

.job-affinity-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 16px;
  margin-bottom: 22px;
}

.affinity-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.affinity-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f8fafc;
}

.affinity-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 3px;
}

.affinity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Filter Controls */
.job-filters-bar {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.filter-group {
  margin-bottom: 12px;
}
.filter-group:last-child { margin-bottom: 0; }

.filter-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-pills-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.job-filter-pill {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.job-filter-pill:hover {
  background: #334155;
  color: #ffffff;
}

.job-filter-pill.active {
  background: rgba(14, 165, 233, 0.25);
  border-color: #0ea5e9;
  color: #38bdf8;
  font-weight: 700;
}

/* Vacancies Grid */
.nearshoring-vacancies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

@media (max-width: 600px) {
  .nearshoring-vacancies-grid { grid-template-columns: 1fr; }
}

.vacancy-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
}

.vacancy-card:hover {
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.vacancy-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.vacancy-company-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #38bdf8;
  font-weight: 700;
}

.vacancy-match-ring {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.vacancy-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.35;
  margin-bottom: 6px;
}

.vacancy-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-bottom: 14px;
}

.vacancy-salary-range {
  background: rgba(10, 15, 29, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.salary-primary {
  font-size: 0.96rem;
  font-weight: 800;
  color: #34d399;
}

.salary-secondary {
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 2px;
}

.vacancy-requirements-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.req-pill {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(51, 65, 85, 0.5);
  color: #cbd5e1;
}

.vacancy-actions-group {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-vac-apply {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.btn-vac-apply:hover { opacity: 0.9; }

.btn-vac-practice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-vac-practice:hover { background: #334155; color: #ffffff; }

/* ============================================================
   TAB 3: CROSS-BORDER SALARY & TAX CALCULATOR STYLES
   ============================================================ */

.calc-workbench-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .calc-workbench-grid { grid-template-columns: 1fr; }
}

.calc-inputs-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(12px);
}

.calc-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 20px;
}

.calc-field-group {
  margin-bottom: 16px;
}

.calc-field-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.calc-select {
  width: 100%;
  padding: 10px 14px;
  background: rgba(10, 15, 29, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f1f5f9;
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
}
.calc-select:focus { border-color: #0ea5e9; }

.calc-segmented-control {
  display: flex;
  background: rgba(10, 15, 29, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 3px;
}

.seg-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.seg-btn.active {
  background: #0ea5e9;
  color: #ffffff;
}

.calc-help-text {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.4;
}

.calc-action-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.calc-action-btn:hover {
  background: rgba(14, 165, 233, 0.2);
}

/* Right: Results Card */
.calc-results-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(12px);
}

.results-header-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.exchange-rate-badge {
  color: #38bdf8;
  font-size: 0.72rem;
}

.salary-comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

@media (max-width: 600px) {
  .salary-comparison-row { grid-template-columns: 1fr; }
}

.salary-box {
  background: rgba(10, 15, 29, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
}

.salary-box.bilingual {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.06);
}

.box-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 8px;
}

.salary-box.bilingual .box-label { color: #34d399; }

.salary-number {
  font-size: 1.45rem;
  font-weight: 900;
  color: #f8fafc;
  line-height: 1.1;
  margin-bottom: 4px;
}

.salary-box.bilingual .salary-number { color: #34d399; }

.salary-sub {
  font-size: 0.7rem;
  color: #64748b;
  margin-bottom: 10px;
}

.salary-tag {
  font-size: 0.68rem;
  color: #94a3b8;
  line-height: 1.35;
}

.salary-tag.highlight {
  color: #a5b4fc;
}

/* Premium Delta Banner */
.bilingual-premium-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 18px;
  text-align: center;
}

.premium-delta-number {
  font-size: 1.35rem;
  font-weight: 900;
  color: #34d399;
  letter-spacing: -0.01em;
}

.premium-delta-label {
  font-size: 0.78rem;
  color: #cbd5e1;
  margin-top: 3px;
}

/* Tax Breakdown Table */
.tax-breakdown-card {
  background: rgba(10, 15, 29, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
}

.tax-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 12px;
}

.tax-breakdown-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tax-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.tax-row.total {
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-weight: 800;
}

.tax-label { color: #94a3b8; }
.tax-val { font-weight: 700; color: #f1f5f9; }
.tax-val.deduct { color: #f87171; }
.tax-val.net { color: #38bdf8; font-size: 0.95rem; }

.resico-advantage-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  font-size: 0.75rem;
  color: #34d399;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

/* 5-Year Cumulative Projection */
.cumulative-projection-card {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 14px;
  padding: 16px;
}

.proj-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #c084fc;
  margin-bottom: 6px;
}

.proj-number {
  font-size: 1.25rem;
  font-weight: 900;
  color: #e9d5ff;
  letter-spacing: -0.01em;
}

.proj-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 4px;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 20: Live Voice/Chat Recruiter Agent & Enterprise Talent Pipeline CRM
   ══════════════════════════════════════════════════════════════════════════ */

/* Live Recruiter Banner */
.live-recruiter-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: 22px;
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}

.live-recruiter-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a855f7);
}

.live-agent-avatar {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
  flex-shrink: 0;
}

.live-status-pulsing-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
}

.pulsing-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: liveDotPulse 1.4s infinite ease-in-out;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.live-agent-dialect-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 9px;
  border-radius: 6px;
}

.live-agent-name {
  font-size: 1.22rem;
  font-weight: 800;
  color: #ffffff;
  margin-top: 4px;
}

.live-agent-role {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 2px;
}

.live-agent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.live-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.live-btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.45);
}

.live-btn-action.secondary {
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #475569;
  box-shadow: none;
}

.live-btn-action.secondary:hover {
  background: #334155;
  color: #ffffff;
}

/* Live Main Grid */
.live-agent-main-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1024px) {
  .live-agent-main-grid {
    grid-template-columns: 1fr;
  }
}

/* Live Conversation Card & Thread */
.live-conversation-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
}

.conversation-thread-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.8);
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e8f0;
}

.live-turn-step-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.live-conversation-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
  margin-bottom: 18px;
}

.live-conversation-thread::-webkit-scrollbar {
  width: 6px;
}
.live-conversation-thread::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.8);
  border-radius: 3px;
}

/* Chat Bubbles */
.live-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 88%;
  padding: 14px 18px;
  border-radius: 14px;
  line-height: 1.5;
  font-size: 0.86rem;
  animation: fadeInBubble 0.25s ease-out forwards;
}

@keyframes fadeInBubble {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.live-bubble.recruiter {
  align-self: flex-start;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #f1f5f9;
  border-top-left-radius: 4px;
}

.live-bubble.candidate {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.85) 0%, rgba(3, 105, 161, 0.9) 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #ffffff;
  border-top-right-radius: 4px;
}

.bubble-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  opacity: 0.85;
}

.bubble-sender {
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bubble-audio-btn {
  background: none;
  border: none;
  color: #38bdf8;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: all 0.15s ease;
}

.bubble-audio-btn:hover {
  background: rgba(56, 189, 248, 0.2);
}

/* Candidate Input Dock */
.live-candidate-input-dock {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.input-quick-samples {
  display: flex;
  gap: 6px;
}

.btn-sample-mini {
  background: rgba(51, 65, 85, 0.6);
  border: 1px solid rgba(71, 85, 105, 0.7);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sample-mini:hover {
  background: #334155;
  color: #38bdf8;
  border-color: #38bdf8;
}

.live-candidate-textarea {
  width: 100%;
  padding: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(71, 85, 105, 0.8);
  border-radius: 10px;
  color: #f8fafc;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.live-candidate-textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.live-input-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.btn-live-mic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e293b;
  border: 1px solid #475569;
  color: #cbd5e1;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-live-mic:hover, .btn-live-mic.recording {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: #ef4444;
}

.live-mic-recording-pulse {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #f87171;
  font-weight: 700;
}

.pulsing-mic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: liveDotPulse 0.9s infinite ease-in-out;
}

.btn-live-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #020617;
  font-weight: 800;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}

.btn-live-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Right Column: Telemetry & Executive Debrief */
.live-telemetry-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(14px);
}

.telemetry-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #e2e8f0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.8);
}

.live-metric-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 700;
}

.metric-block-head .metric-val {
  font-weight: 800;
  color: #f1f5f9;
}

.live-meter-bar {
  height: 8px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
}

.live-meter-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.metric-desc {
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1.4;
}

.executive-notes-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  padding: 14px;
}

.notes-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 6px;
}

.notes-body {
  font-size: 0.78rem;
  color: #f1f5f9;
  line-height: 1.5;
  font-style: italic;
}

.btn-export-transcript {
  width: 100%;
  padding: 10px 16px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #38bdf8;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.btn-export-transcript:hover {
  background: #1e293b;
  border-color: #38bdf8;
}

/* ── Enterprise Recruiter Portal & Talent Pipeline CRM ── */
.recruiter-portal-header {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
}

.portal-badge-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.portal-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 4px 10px;
  border-radius: 6px;
}

.portal-counter {
  font-size: 0.75rem;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
}

.portal-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.portal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.portal-subtitle {
  font-size: 0.84rem;
  color: #94a3b8;
  margin: 0;
  max-width: 680px;
  line-height: 1.5;
}

.btn-post-vacancy-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.btn-post-vacancy-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.5);
}

/* Pipeline Filter Bar */
.pipeline-filters-bar {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 14px;
  padding: 14px 18px;
}

.pipeline-filters-bar .filter-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.pipeline-filters-bar .filter-item label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
}

.pipeline-select {
  padding: 8px 12px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #f1f5f9;
  font-size: 0.82rem;
  outline: none;
}

.pipeline-select:focus {
  border-color: #38bdf8;
}

/* Candidate Pipeline Grid */
.recruiter-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.pipeline-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.75);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.pipeline-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.pipeline-card-header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.pipeline-card-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  flex-shrink: 0;
}

.pipeline-card-info {
  flex: 1;
}

.pipeline-name {
  font-size: 0.96rem;
  font-weight: 800;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pipeline-degree {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 2px;
}

.pipeline-hub-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 7px;
  border-radius: 5px;
  margin-top: 4px;
}

.pipeline-w3c-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #34d399;
  font-weight: 700;
  font-family: monospace;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.pipeline-skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pipeline-skill-chip {
  font-size: 0.68rem;
  font-weight: 600;
  color: #cbd5e1;
  background: #1e293b;
  border: 1px solid #334155;
  padding: 2px 7px;
  border-radius: 5px;
}

.pipeline-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 10px;
  padding: 10px;
}

.pipeline-metric-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pipeline-metric-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f1f5f9;
}

.pipeline-metric-lbl {
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
}

.pipeline-card-footer {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-pipeline-action {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.btn-pipeline-action.primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
}

.btn-pipeline-action.secondary {
  background: #1e293b;
  color: #cbd5e1;
  border-color: #475569;
}

.btn-pipeline-action:hover {
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 21: System Architecture Whiteboard, ATS Resume Tailor & Incident Drills
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Pillar 1: System Architecture & Whiteboard Defense ── */
.whiteboard-header-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}

.whiteboard-header-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #a855f7, #ec4899, #38bdf8);
}

.wb-badge-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}

.wb-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.wb-subtitle {
  font-size: 0.84rem;
  color: #94a3b8;
  margin: 0;
  max-width: 780px;
  line-height: 1.5;
}

.wb-scenario-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.wb-scenario-pill {
  padding: 7px 14px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wb-scenario-pill:hover {
  background: #334155;
  color: #ffffff;
}

.wb-scenario-pill.active {
  background: rgba(168, 85, 247, 0.2);
  border-color: #a855f7;
  color: #e9d5ff;
}

.whiteboard-workspace-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1024px) {
  .whiteboard-workspace-grid {
    grid-template-columns: 1fr;
  }
}

.whiteboard-canvas-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.canvas-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.8);
}

.canvas-headline {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #f8fafc;
}

.canvas-subline {
  display: block;
  font-size: 0.75rem;
  color: #a855f7;
  font-weight: 700;
  margin-top: 2px;
}

.canvas-controls-group {
  display: flex;
  gap: 8px;
}

.btn-canvas-ctrl {
  background: #1e293b;
  border: 1px solid #475569;
  color: #cbd5e1;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-canvas-ctrl:hover, .btn-canvas-ctrl.active {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #f87171;
}

.whiteboard-blocks-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px dashed rgba(71, 85, 105, 0.6);
  border-radius: 12px;
}

.wb-block-node {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: all 0.2s ease;
}

.wb-block-node:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
}

.wb-node-icon {
  font-size: 1.3rem;
  color: #38bdf8;
}

.wb-node-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #f8fafc;
}

.wb-node-spec {
  font-size: 0.65rem;
  color: #94a3b8;
  line-height: 1.3;
}

.wb-node-tag {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.whiteboard-metrics-dock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 10px;
  padding: 12px;
}

.wb-metric-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wb-metric-lbl {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 700;
}

.wb-metric-val {
  font-size: 0.88rem;
  font-weight: 800;
}

/* Whiteboard Interrogation Card */
.whiteboard-interrogation-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.interrogation-header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.architect-avatar-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #ffffff;
  flex-shrink: 0;
}

.architect-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: #f1f5f9;
}

.architect-role {
  font-size: 0.75rem;
  color: #94a3b8;
}

.btn-listen-mini {
  background: #1e293b;
  border: 1px solid #475569;
  color: #38bdf8;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}

.architect-prompt-box {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 12px;
  padding: 14px;
}

.prompt-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: #c084fc;
  margin-bottom: 6px;
}

.prompt-text {
  font-size: 0.84rem;
  color: #f1f5f9;
  line-height: 1.5;
  font-style: italic;
}

.candidate-defense-dock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.defense-dock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.defense-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.architecture-scorecard-card {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scorecard-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #34d399;
}

.scorecard-feedback-text {
  font-size: 0.8rem;
  color: #f1f5f9;
  line-height: 1.45;
  font-style: italic;
}

.scorecard-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 0.75rem;
  color: #cbd5e1;
  padding-top: 6px;
  border-top: 1px dashed rgba(51, 65, 85, 0.8);
}

/* ── Pillar 2: AI Nearshoring CV & ATS Resume Optimizer ── */
.resume-tailor-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}

.resume-tailor-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #10b981, #06b6d4, #3b82f6);
}

.rt-badge-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}

.rt-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.rt-subtitle {
  font-size: 0.84rem;
  color: #94a3b8;
  margin: 0;
  max-width: 760px;
  line-height: 1.5;
}

.btn-import-profile-cv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-import-profile-cv:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
}

.resume-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1024px) {
  .resume-workspace-grid {
    grid-template-columns: 1fr;
  }
}

.resume-input-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resume-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 800;
  color: #e2e8f0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.8);
}

.resume-form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-run-ats {
  padding: 10px 18px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-run-ats:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.ats-telemetry-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ats-score-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
}

.ats-score-number {
  font-size: 0.95rem;
  font-weight: 800;
  color: #10b981;
}

.ats-detected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ats-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 2px 7px;
  border-radius: 4px;
}

/* Right: US ATS Printable Canvas */
.resume-preview-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.preview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e8f0;
}

.ats-resume-sheet {
  background: #ffffff;
  color: #0f172a;
  border-radius: 8px;
  padding: 32px 36px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  line-height: 1.45;
}

.ats-sheet-header {
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #0f172a;
  margin-bottom: 14px;
}

.ats-name {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin: 0;
  color: #0f172a;
}

.ats-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  margin-top: 4px;
}

.ats-contact {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 4px;
}

.ats-eeo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 6px;
}

.ats-section {
  margin-bottom: 14px;
}

.ats-sec-title {
  font-size: 0.85rem;
  font-weight: 800;
  border-bottom: 1px solid #cbd5e1;
  padding-bottom: 2px;
  margin: 0 0 6px 0;
  color: #0f172a;
  letter-spacing: 0.04em;
}

.ats-sec-body {
  font-size: 0.75rem;
  color: #334155;
  margin: 0;
  line-height: 1.4;
}

.ats-w3c-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #0284c7;
  padding: 8px 10px;
  font-size: 0.74rem;
  border-radius: 4px;
}

.ats-exp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
}

.ats-exp-company {
  font-size: 0.72rem;
  color: #64748b;
  font-style: italic;
  margin-bottom: 4px;
}

.ats-bullets {
  margin: 0;
  padding-left: 18px;
  font-size: 0.73rem;
  color: #334155;
}

.ats-bullets li {
  margin-bottom: 3px;
}

.ats-skills-list {
  font-size: 0.72rem;
  color: #334155;
  line-height: 1.45;
}

/* ── Pillar 3: Cross-Border Multi-Plant Incident Drill ── */
.incident-drill-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}

.incident-drill-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #ec4899);
}

.drill-alert-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.drill-alarm-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
}

.drill-timer-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drill-timer-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
}

.drill-countdown {
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 900;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 2px 8px;
  border-radius: 6px;
}

.drill-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.drill-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.drill-subtitle {
  font-size: 0.84rem;
  color: #94a3b8;
  margin: 0;
  max-width: 760px;
  line-height: 1.5;
}

.btn-start-drill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.btn-start-drill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.5);
}

.drill-cockpit-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1024px) {
  .drill-cockpit-grid {
    grid-template-columns: 1fr;
  }
}

.drill-comms-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.drill-comms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  font-weight: 700;
  color: #e2e8f0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.8);
}

.drill-radio-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
}

.radio-msg {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.radio-msg.incoming {
  background: rgba(30, 41, 59, 0.9);
  border-left: 3px solid #ef4444;
  color: #f1f5f9;
}

.radio-msg-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  margin-bottom: 4px;
  color: #94a3b8;
}

.drill-decision-dock {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drill-step-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #38bdf8;
}

.drill-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-drill-choice {
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 8px;
  padding: 10px 12px;
  color: #f1f5f9;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-drill-choice:hover {
  background: #334155;
  border-color: #38bdf8;
}

.drill-telemetry-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.drill-stat-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.drill-stat-num {
  font-size: 1.4rem;
  font-weight: 900;
}

.drill-stat-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.drill-debrief-card {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 12px;
}

.debrief-head {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 4px;
}

.debrief-body {
  font-size: 0.76rem;
  color: #f1f5f9;
  line-height: 1.4;
  font-style: italic;
}

/* ==========================================================================
   PHASE 22: EXECUTIVE NEGOTIATION CHAMBER & REGULATORY AUDIT DEFENSE
   ========================================================================== */

/* ── Pillar 1: Executive Negotiation Chamber ── */
.negotiation-header-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.neg-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  width: fit-content;
  letter-spacing: 0.04em;
}

.neg-title {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
}

.neg-subtitle {
  color: #94a3b8;
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
}

.neg-scenario-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.neg-scenario-pill {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.8);
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.neg-scenario-pill:hover {
  background: rgba(16, 185, 129, 0.15);
  color: #fff;
  border-color: #10b981;
}

.neg-scenario-pill.active {
  background: rgba(16, 185, 129, 0.25);
  color: #10b981;
  border-color: #10b981;
}

.negotiation-workspace-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .negotiation-workspace-grid {
    grid-template-columns: 1fr;
  }
}

.negotiation-cockpit-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.negotiation-opponent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 12px;
  padding: 12px 16px;
}

.opponent-avatar-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.opponent-name {
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}

.opponent-role {
  color: #94a3b8;
  font-size: 0.74rem;
}

.negotiation-chat-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 6px;
}

.neg-bubble {
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.84rem;
  line-height: 1.5;
}

.neg-bubble.incoming {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(51, 65, 85, 0.8);
  color: #cbd5e1;
}

.neg-bubble.outgoing {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #e2e8f0;
  margin-left: 20px;
}

.neg-bubble-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #94a3b8;
  margin-bottom: 6px;
}

.neg-tactics-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.neg-tactics-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: #cbd5e1;
}

.neg-tactics-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-tactic-pill {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.8);
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-tactic-pill:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #fff;
}

.negotiation-response-dock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.negotiation-telemetry-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.negotiation-termsheet-box {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  padding: 14px;
}

.termsheet-header {
  font-size: 0.75rem;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.termsheet-body {
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.5;
}

/* ── Pillar 2: Regulatory Audit Defense Chamber ── */
.audit-header-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  width: fit-content;
  letter-spacing: 0.04em;
}

.audit-title {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
}

.audit-subtitle {
  color: #94a3b8;
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
}

.audit-scenario-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.audit-scenario-pill {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.8);
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.audit-scenario-pill:hover {
  background: rgba(245, 158, 11, 0.15);
  color: #fff;
  border-color: #f59e0b;
}

.audit-scenario-pill.active {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border-color: #f59e0b;
}

.audit-workspace-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .audit-workspace-grid {
    grid-template-columns: 1fr;
  }
}

.audit-exam-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auditor-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 12px;
  padding: 12px 16px;
}

.auditor-avatar-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.auditor-name {
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}

.auditor-role {
  color: #94a3b8;
  font-size: 0.74rem;
}

.audit-evidence-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-evidence-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: #cbd5e1;
}

.audit-evidence-rack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .audit-evidence-rack {
    grid-template-columns: 1fr;
  }
}

.audit-doc-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.audit-doc-card:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: #38bdf8;
}

.audit-doc-card.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

.audit-doc-card.active .doc-icon {
  color: #10b981;
}

.doc-icon {
  font-size: 1.1rem;
  color: #94a3b8;
}

.doc-info strong {
  display: block;
  font-size: 0.78rem;
  color: #fff;
}

.doc-info small {
  font-size: 0.68rem;
  color: #94a3b8;
}

.audit-response-dock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audit-telemetry-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==========================================================================
   FASE 23: PLANT-FLOOR GEMBA WALK & SHIFT CRUCIBLE & ESCALATION TRIBUNAL
   ========================================================================== */

.gemba-station-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.gemba-station-card:hover {
  background: rgba(6, 182, 212, 0.12);
  border-color: #06b6d4;
  transform: translateY(-2px);
}

.gemba-station-card.active {
  background: rgba(6, 182, 212, 0.18);
  border-color: #22d3ee;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
}

.gemba-station-card.anomaly {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.gemba-station-card.anomaly::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #ef4444;
}

.gemba-station-card.resolved {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
}

.gemba-station-card.resolved::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #10b981;
}

.tribunal-arg-btn {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(236, 72, 153, 0.35);
  color: #f472b6;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tribunal-arg-btn:hover {
  background: rgba(236, 72, 153, 0.2);
  border-color: #ec4899;
  color: #fff;
}

.tribunal-verdict-banner {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 12px;
  padding: 14px;
}

/* ── Phase 24: Cleanroom Walkthrough & Digital Twin 3.0 ── */
.walkthrough-bay-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.walkthrough-bay-btn:hover {
  border-color: #38bdf8 !important;
  color: #f8fafc !important;
  background: rgba(56, 189, 248, 0.12) !important;
  transform: translateY(-1px);
}
.walkthrough-bay-btn.active {
  border-color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.3);
}

.btn-walkthrough-tool:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

.btn-walkthrough-act {
  transition: all 0.2s ease;
}
.btn-walkthrough-act:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .walkthrough-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Phase 25: Patent & IP Claim Defense Arena ── */
.patent-case-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.patent-case-btn:hover {
  border-color: #c084fc !important;
  color: #faf5ff !important;
  background: rgba(192, 132, 252, 0.12) !important;
  transform: translateY(-1px);
}
.patent-case-btn.active {
  border-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.btn-patent-arg {
  transition: all 0.2s ease;
}
.btn-patent-arg:hover {
  background: #334155 !important;
  border-color: #c084fc !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .patent-arena-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Phase 26: ESG Decarbonization Crucible ── */
.esg-project-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.esg-project-btn:hover {
  border-color: #34d399 !important;
  color: #f0fdf4 !important;
  background: rgba(52, 211, 153, 0.12) !important;
  transform: translateY(-1px);
}
.esg-project-btn.active {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.btn-esg-action {
  transition: all 0.2s ease;
}
.btn-esg-action:hover {
  background: #334155 !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .esg-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .esg-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 27: Supply Chain Reshoring & Dual-Sourcing War Room ── */
.sc-crisis-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-crisis-btn:hover {
  border-color: #fbbf24 !important;
  color: #fef3c7 !important;
  background: rgba(251, 191, 36, 0.12) !important;
  transform: translateY(-1px);
}
.sc-crisis-btn.active {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.btn-sc-action {
  transition: all 0.2s ease;
}
.btn-sc-action:hover {
  background: #334155 !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .sc-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .sc-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 28: Industrial Cybersecurity Threat Hunting Arena ── */
.cyber-campaign-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cyber-campaign-btn:hover {
  border-color: #f87171 !important;
  color: #fef2f2 !important;
  background: rgba(248, 113, 113, 0.12) !important;
  transform: translateY(-1px);
}
.cyber-campaign-btn.active {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.btn-cyber-action {
  transition: all 0.2s ease;
}
.btn-cyber-action:hover {
  background: #334155 !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .cyber-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .cyber-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 29: Predictive Maintenance & Reliability Crucible ── */
.pdm-asset-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pdm-asset-btn:hover {
  border-color: #22d3ee !important;
  color: #f0fdf4 !important;
  background: rgba(34, 211, 238, 0.12) !important;
  transform: translateY(-1px);
}
.pdm-asset-btn.active {
  border-color: #06b6d4 !important;
  background: rgba(6, 182, 212, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.btn-pdm-action {
  transition: all 0.2s ease;
}
.btn-pdm-action:hover {
  background: #334155 !important;
  border-color: #22d3ee !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .pdm-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .pdm-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 30: Microgrid & Energy Arbitrage Chamber ── */
.grid-scenario-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.grid-scenario-btn:hover {
  border-color: #fde047 !important;
  color: #fefce8 !important;
  background: rgba(253, 224, 71, 0.12) !important;
  transform: translateY(-1px);
}
.grid-scenario-btn.active {
  border-color: #eab308 !important;
  background: rgba(234, 179, 8, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.3);
}

.btn-grid-action {
  transition: all 0.2s ease;
}
.btn-grid-action:hover {
  background: #334155 !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .grid-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .grid-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 31: 3D Chiplet Metrology Cleanroom ── */
.chiplet-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.chiplet-station-btn:hover {
  border-color: #c084fc !important;
  color: #f3e8ff !important;
  background: rgba(192, 132, 252, 0.12) !important;
  transform: translateY(-1px);
}
.chiplet-station-btn.active {
  border-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.btn-chiplet-action {
  transition: all 0.2s ease;
}
.btn-chiplet-action:hover {
  background: #334155 !important;
  border-color: #c084fc !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .chiplet-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .chiplet-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 32: EV Battery Pack Safety & Thermal Runaway Crucible ── */
.battery-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.battery-station-btn:hover {
  border-color: #f87171 !important;
  color: #fee2e2 !important;
  background: rgba(248, 113, 113, 0.12) !important;
  transform: translateY(-1px);
}
.battery-station-btn.active {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.btn-battery-action {
  transition: all 0.2s ease;
}
.btn-battery-action:hover {
  background: #334155 !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .battery-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .battery-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 33: Hyperscale Immersion Cooling & Power Density Chamber ── */
.immersion-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.immersion-station-btn:hover {
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
  background: rgba(56, 189, 248, 0.12) !important;
  transform: translateY(-1px);
}
.immersion-station-btn.active {
  border-color: #0ea5e9 !important;
  background: rgba(14, 165, 233, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.3);
}

.btn-immersion-action {
  transition: all 0.2s ease;
}
.btn-immersion-action:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .immersion-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .immersion-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 34: Bioprocess & Single-Use Bioreactor Validation Cleanroom ── */
.bioprocess-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bioprocess-station-btn:hover {
  border-color: #34d399 !important;
  color: #dcfce7 !important;
  background: rgba(52, 211, 153, 0.12) !important;
  transform: translateY(-1px);
}
.bioprocess-station-btn.active {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.btn-bioprocess-action {
  transition: all 0.2s ease;
}
.btn-bioprocess-action:hover {
  background: #334155 !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .bioprocess-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .bioprocess-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 35: Clean Hydrogen & Ammonia Synthesis Crucible ── */
.hydrogen-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hydrogen-station-btn:hover {
  border-color: #22d3ee !important;
  color: #cffafe !important;
  background: rgba(34, 211, 238, 0.12) !important;
  transform: translateY(-1px);
}
.hydrogen-station-btn.active {
  border-color: #06b6d4 !important;
  background: rgba(6, 182, 212, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.btn-hydrogen-action {
  transition: all 0.2s ease;
}
.btn-hydrogen-action:hover {
  background: #334155 !important;
  border-color: #22d3ee !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .hydrogen-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .hydrogen-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 36: Semiconductor UPW & ZLD Reclamation Crucible ── */
.upw-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.upw-station-btn:hover {
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
  background: rgba(56, 189, 248, 0.12) !important;
  transform: translateY(-1px);
}
.upw-station-btn.active {
  border-color: #0ea5e9 !important;
  background: rgba(14, 165, 233, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.3);
}

.btn-upw-action {
  transition: all 0.2s ease;
}
.btn-upw-action:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .upw-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .upw-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 37: Aerospace Avionics & MIL-STD-1553 Hardware Assurance Crucible ── */
.avionics-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.avionics-station-btn:hover {
  border-color: #fbbf24 !important;
  color: #fef3c7 !important;
  background: rgba(251, 191, 36, 0.12) !important;
  transform: translateY(-1px);
}
.avionics-station-btn.active {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.btn-avionics-action {
  transition: all 0.2s ease;
}
.btn-avionics-action:hover {
  background: #334155 !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .avionics-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .avionics-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 38: Subsea BOP & HPHT Deepwater Well Control Crucible ── */
.subsea-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.subsea-station-btn:hover {
  border-color: #38bdf8 !important;
  color: #bae6fd !important;
  background: rgba(56, 189, 248, 0.12) !important;
  transform: translateY(-1px);
}
.subsea-station-btn.active {
  border-color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.3);
}

.btn-subsea-action {
  transition: all 0.2s ease;
}
.btn-subsea-action:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .subsea-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .subsea-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 39: Nuclear SMR & Molten Salt Reactor Control Room Crucible ── */
.smr-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.smr-station-btn:hover {
  border-color: #fbbf24 !important;
  color: #fef08a !important;
  background: rgba(251, 191, 36, 0.12) !important;
  transform: translateY(-1px);
}
.smr-station-btn.active {
  border-color: #eab308 !important;
  background: rgba(234, 179, 8, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.3);
}

.btn-smr-action {
  transition: all 0.2s ease;
}
.btn-smr-action:hover {
  background: #334155 !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .smr-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .smr-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 40: Carbon Capture, Utilization & Direct Air Capture (DAC) Crucible ── */
.dac-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dac-station-btn:hover {
  border-color: #34d399 !important;
  color: #a7f3d0 !important;
  background: rgba(52, 211, 153, 0.12) !important;
  transform: translateY(-1px);
}
.dac-station-btn.active {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.btn-dac-action {
  transition: all 0.2s ease;
}
.btn-dac-action:hover {
  background: #334155 !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .dac-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .dac-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 41: Heavy-Duty EV Megawatt Charging System (MCS) & Fleet Crucible ── */
.mcs-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.mcs-station-btn:hover {
  border-color: #38bdf8 !important;
  color: #bae6fd !important;
  background: rgba(56, 189, 248, 0.12) !important;
  transform: translateY(-1px);
}
.mcs-station-btn.active {
  border-color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.btn-mcs-action {
  transition: all 0.2s ease;
}
.btn-mcs-action:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .mcs-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .mcs-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 42: Quantum Key Distribution (QKD) & Post-Quantum Cryptography (PQC) Crucible ── */
.qkd-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.qkd-station-btn:hover {
  border-color: #a855f7 !important;
  color: #f3e8ff !important;
  background: rgba(168, 85, 247, 0.12) !important;
  transform: translateY(-1px);
}
.qkd-station-btn.active {
  border-color: #7e22ce !important;
  background: rgba(126, 34, 206, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.btn-qkd-action {
  transition: all 0.2s ease;
}
.btn-qkd-action:hover {
  background: #334155 !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .qkd-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .qkd-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 43: Submicron Extreme Ultraviolet (EUV) Photolithography Crucible ── */
.euv-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.euv-station-btn:hover {
  border-color: #ec4899 !important;
  color: #fdf2f8 !important;
  background: rgba(236, 72, 153, 0.12) !important;
  transform: translateY(-1px);
}
.euv-station-btn.active {
  border-color: #db2777 !important;
  background: rgba(219, 39, 119, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.3);
}

.btn-euv-action {
  transition: all 0.2s ease;
}
.btn-euv-action:hover {
  background: #334155 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .euv-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .euv-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 44: Subsea High-Voltage Direct Current (HVDC) Interconnector Crucible ── */
.hvdc-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hvdc-station-btn:hover {
  border-color: #06b6d4 !important;
  color: #ecfeff !important;
  background: rgba(6, 182, 212, 0.12) !important;
  transform: translateY(-1px);
}
.hvdc-station-btn.active {
  border-color: #0891b2 !important;
  background: rgba(8, 145, 178, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.btn-hvdc-action {
  transition: all 0.2s ease;
}
.btn-hvdc-action:hover {
  background: #334155 !important;
  border-color: #06b6d4 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .hvdc-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .hvdc-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Phase 45: Cold-Atom Quantum Sensing & Gravimetry Crucible ── */
.sensing-station-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sensing-station-btn:hover {
  border-color: #a855f7 !important;
  color: #faf5ff !important;
  background: rgba(168, 85, 247, 0.12) !important;
  transform: translateY(-1px);
}
.sensing-station-btn.active {
  border-color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.btn-sensing-action {
  transition: all 0.2s ease;
}
.btn-sensing-action:hover {
  background: #334155 !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .sensing-arena-grid {
    grid-template-columns: 1fr !important;
  }
  .sensing-telemetry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}




























/* ══════════════════════════════════════════════════════════════════
   INSTITUTIONAL ACADEMIC ECOSYSTEM & 60-HOUR CAREER PATHS (Fases 48-57)
   ══════════════════════════════════════════════════════════════════ */
.institutional-academic-section {
  position: relative;
  padding: 80px 24px;
  background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.08) 0%, transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
              #030712;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inst-section-container {
  max-width: 1280px;
  margin: 0 auto;
}

.badge-academic-ecosystem {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(14, 165, 233, 0.35) !important;
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.2);
}

.institutional-academic-section .section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}

.institutional-academic-section .section-subtitle {
  color: #cbd5e1 !important;
}

.institutional-academic-section .section-subtitle strong {
  color: #38bdf8 !important;
}

/* 4 Institutional Portals Command Grid */
.inst-portals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 40px 0 55px;
}

.inst-portal-card {
  position: relative;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.inst-portal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent, #38bdf8);
  opacity: 0.8;
  transition: height 0.25s ease;
}

.inst-portal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.15);
  background: rgba(30, 41, 59, 0.8);
}

.inst-portal-card:hover::before {
  height: 4px;
}

.inst-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.inst-portal-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--card-accent, #38bdf8);
}

.inst-portal-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.inst-portal-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.inst-portal-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.45;
  margin-bottom: 16px;
}

.inst-portal-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--card-accent, #38bdf8);
  margin-top: auto;
}

/* Subsystem Filter & Controls */
.inst-controls-panel {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.inst-subsystem-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inst-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inst-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.4);
}

.inst-filter-btn.active {
  background: rgba(14, 165, 233, 0.18);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.35);
}

.inst-search-wrapper {
  position: relative;
  min-width: 280px;
}

.inst-search-wrapper i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 0.85rem;
}

.inst-search-input {
  width: 100%;
  background: rgba(3, 7, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 8px 14px 8px 34px;
  font-size: 0.82rem;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease;
}

.inst-search-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

/* 25 Careers Grid */
.inst-careers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.inst-career-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
}

.inst-career-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  background: rgba(30, 41, 59, 0.75);
}

.inst-career-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.inst-subsystem-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.inst-standard-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.inst-career-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.35;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.inst-career-meta-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-bottom: 14px;
}

.inst-career-meta-strip span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Interleaving 16-Segment Mini Bar */
.inst-interleaving-bar {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  padding: 4px;
  background: rgba(3, 7, 18, 0.5);
  border-radius: 6px;
}

.inst-bar-segment {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  transition: transform 0.15s ease;
}

.inst-bar-segment:hover {
  transform: scaleY(1.8);
}

.inst-bar-theory { background: #38bdf8; }
.inst-bar-english { background: #2dd4bf; }
.inst-bar-lab { background: #f59e0b; }
.inst-bar-milestone { background: #10b981; }

.inst-career-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.btn-inspect-stations {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-inspect-stations:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}

.btn-enroll-career {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-enroll-career:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
}

/* Modal for 16 Stations Inspection */
.inst-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.inst-modal-overlay.active {
  display: flex;
}

.inst-modal-content {
  background: #0b1329;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 20px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(14, 165, 233, 0.2);
  overflow: hidden;
}

.inst-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.6);
}

.inst-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.inst-stations-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inst-station-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.inst-station-item:hover {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(56, 189, 248, 0.25);
}

.inst-station-idx {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #ffffff;
  flex-shrink: 0;
}

.inst-station-details {
  flex: 1;
}

.inst-station-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.inst-station-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #94a3b8;
}

.inst-hito-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
}

.inst-hito-divider::before,
.inst-hito-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.4), transparent);
}
.inst-hito-divider::before {
  background: linear-gradient(270deg, rgba(56, 189, 248, 0.4), transparent);
}

@media (max-width: 1024px) {
  .inst-portals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .inst-careers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .inst-portals-grid {
    grid-template-columns: 1fr;
  }
  .inst-careers-grid {
    grid-template-columns: 1fr;
  }
  .inst-controls-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .inst-search-wrapper {
    min-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FASE 60: EMBEDDED DEV PORTAL STUDIO & WORKSTATION (ZERO-NAVIGATION)
   ══════════════════════════════════════════════════════════════════ */

.inst-embedded-sandbox {
  margin: 32px 0 50px;
  background: rgba(11, 19, 41, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(14, 165, 233, 0.15);
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.inst-embedded-sandbox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8, #10b981, #f59e0b, #8b5cf6);
  z-index: 10;
}

/* Control Bar Header */
.inst-sandbox-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 12px;
}

.inst-sandbox-header-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.inst-sandbox-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #a7f3d0;
  font-weight: 600;
}

.inst-status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: instPulse 2s infinite;
}

@keyframes instPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Tab Switchers */
.inst-sandbox-tabs {
  display: inline-flex;
  align-items: center;
  background: rgba(3, 7, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.inst-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease;
}

.inst-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.inst-tab-btn.active {
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(56, 189, 248, 0.5);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
}

/* Right Controls */
.inst-sandbox-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inst-sandbox-viewports {
  display: inline-flex;
  align-items: center;
  background: rgba(3, 7, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

.inst-device-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.inst-device-btn:hover {
  color: #cbd5e1;
}

.inst-device-btn.active {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.inst-sandbox-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inst-tool-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}

.inst-tool-btn:hover {
  color: #ffffff;
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
}

/* Simulated Address Bar */
.inst-sandbox-urlbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(3, 7, 18, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
}

.inst-url-display-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.inst-url-protocol {
  color: #64748b;
}

.inst-url-path {
  color: #38bdf8;
  font-weight: 700;
}

.inst-quick-scenarios {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.inst-scenarios-label {
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.72rem;
  margin-right: 4px;
}

.inst-scenario-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inst-scenario-chip:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

/* Viewport Canvas & Iframe */
.inst-sandbox-viewport-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(15, 23, 42, 0.8) 0%, #030712 100%);
  min-height: 880px;
  transition: all 0.3s ease;
}

/* Loading Overlay */
.inst-sandbox-loader {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.inst-sandbox-loader.active {
  display: flex;
}

.inst-loader-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(56, 189, 248, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: instSpin 0.8s linear infinite;
}

@keyframes instSpin {
  to { transform: rotate(360deg); }
}

.inst-loader-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.04em;
}

/* Iframe Base */
#inst-sandbox-iframe {
  width: 100%;
  height: 860px;
  border: none;
  background: #030712;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Viewport Modes */
.inst-device-desktop #inst-sandbox-iframe {
  width: 100%;
  max-width: 100%;
  height: 860px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.inst-device-tablet #inst-sandbox-iframe {
  width: 1024px;
  max-width: 100%;
  height: 860px;
  border-radius: 24px;
  border: 8px solid #1e293b;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(56, 189, 248, 0.2);
}

.inst-device-mobile #inst-sandbox-iframe {
  width: 430px;
  max-width: 100%;
  height: 860px;
  border-radius: 36px;
  border: 10px solid #1e293b;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(56, 189, 248, 0.25);
}

/* Fullscreen Studio Mode */
.inst-embedded-sandbox.inst-sandbox-fullscreen-mode {
  position: fixed;
  inset: 0;
  z-index: 999999;
  margin: 0;
  border-radius: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.inst-embedded-sandbox.inst-sandbox-fullscreen-mode .inst-sandbox-viewport-wrapper {
  flex: 1;
  min-height: auto;
  padding: 10px;
}

.inst-embedded-sandbox.inst-sandbox-fullscreen-mode #inst-sandbox-iframe {
  height: calc(100vh - 120px);
}

@media (max-width: 768px) {
  .inst-sandbox-header {
    flex-direction: column;
    align-items: stretch;
  }
  .inst-sandbox-header-left,
  .inst-sandbox-header-right {
    justify-content: space-between;
  }
  .inst-sandbox-tabs {
    overflow-x: auto;
    width: 100%;
  }
  .inst-tab-btn {
    white-space: nowrap;
  }
  .inst-vp-label {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FASE 61: LIVE TELEMETRY INSPECTOR & PERSONA SWITCHER STYLES
   ══════════════════════════════════════════════════════════════════ */

.inst-sandbox-personas-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.inst-personas-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.inst-personas-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inst-persona-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.inst-persona-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.inst-persona-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.3);
}

.inst-persona-btn.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.5);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.inst-personas-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-toggle-telemetry {
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.75rem;
  color: #38bdf8;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-toggle-telemetry:hover,
.btn-toggle-telemetry.active {
  background: rgba(14, 165, 233, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
}

/* Telemetry Drawer */
.inst-sandbox-telemetry {
  display: none;
  padding: 16px 18px;
  background: rgba(3, 7, 18, 0.95);
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  animation: instTelemFadeIn 0.22s ease-out;
}

.inst-sandbox-telemetry.active {
  display: block;
}

@keyframes instTelemFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.inst-telem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.5fr;
  gap: 14px;
}

.inst-telem-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.inst-telem-card-wide {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(56, 189, 248, 0.25);
}

.inst-telem-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.inst-telem-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.inst-telem-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.role-admin { background: rgba(14, 165, 233, 0.18); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.4); }
.role-teacher { background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.role-student { background: rgba(139, 92, 246, 0.18); color: #c084fc; border: 1px solid rgba(139, 92, 246, 0.4); }
.role-guest { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }

.badge-code {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
  font-family: 'JetBrains Mono', monospace;
}

.badge-xp {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.inst-telem-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
}

.inst-telem-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.4;
}

.inst-telem-progress-wrap {
  margin-top: 4px;
}

.inst-telem-progress-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 5px;
}

.inst-telem-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #10b981);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.inst-telem-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  color: #cbd5e1;
}

/* Actions in telemetry */
.inst-telem-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-telem-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #cbd5e1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-telem-action:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}

/* Audit Feed list */
.inst-telem-audit-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 85px;
  overflow-y: auto;
}

.inst-audit-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(3, 7, 18, 0.6);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.68rem;
}

.inst-audit-tag {
  color: #38bdf8;
  font-weight: 800;
  font-size: 0.62rem;
  padding: 1px 4px;
  background: rgba(56, 189, 248, 0.12);
  border-radius: 3px;
  flex-shrink: 0;
}

.inst-audit-desc {
  color: #cbd5e1;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inst-audit-time {
  color: #64748b;
  font-size: 0.62rem;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .inst-telem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .inst-telem-card-wide {
    grid-column: span 2;
  }
}

@media (max-width: 680px) {
  .inst-telem-grid {
    grid-template-columns: 1fr;
  }
  .inst-telem-card-wide {
    grid-column: span 1;
  }
}

/* ── 11. INSTITUTIONAL & INDIVIDUAL PRICING SYSTEM (3-Column Obsidian Glass) ── */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1220px;
  margin: 0 auto 50px auto;
}

@media (max-width: 1024px) {
  .pricing-cards-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
  }
}

.pricing-card {
  background: rgba(15, 23, 42, 0.82);
  border: 1.5px solid rgba(56, 189, 248, 0.22);
  border-radius: 24px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 24px 50px -10px rgba(14, 165, 233, 0.25);
}

.pricing-card.featured-plan {
  background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.2) 0%, rgba(15, 23, 42, 0.92) 80%);
  border: 2px solid rgba(56, 189, 248, 0.55);
  box-shadow: 0 20px 50px -10px rgba(14, 165, 233, 0.32), 0 0 30px rgba(14, 165, 233, 0.15);
}

.pricing-card.featured-plan:hover {
  border-color: #38bdf8;
  box-shadow: 0 28px 60px -10px rgba(14, 165, 233, 0.42), 0 0 40px rgba(14, 165, 233, 0.25);
}

.pricing-card.individual-plan {
  background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.18) 0%, rgba(15, 23, 42, 0.9) 80%);
  border: 1.5px solid rgba(52, 211, 153, 0.45);
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.18);
}

.pricing-card.individual-plan:hover {
  transform: translateY(-4px);
  border-color: rgba(52, 211, 153, 0.7);
  box-shadow: 0 22px 50px rgba(16, 185, 129, 0.28);
}

.pricing-card-badge-glow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.5);
  padding: 4px 12px;
  border-radius: 9999px;
  width: fit-content;
  margin-bottom: 14px;
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.3);
}

.pricing-card-badge-normal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #a78bfa;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 4px 12px;
  border-radius: 9999px;
  width: fit-content;
  margin-bottom: 14px;
}

.pricing-card-badge-individual {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 4px 12px;
  border-radius: 9999px;
  width: fit-content;
  margin-bottom: 14px;
}

.pricing-plan-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: block;
}

.pricing-plan-name {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.pricing-plan-summary {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0 0 18px 0;
}

.pricing-price-box {
  background: rgba(3, 7, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 22px;
  text-align: center;
}

.pricing-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.pricing-currency {
  font-size: 1.4rem;
  font-weight: 800;
  color: #94a3b8;
}

.pricing-value {
  font-family: var(--font-head);
  font-size: 2.3rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
}

.pricing-term {
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
}

.pricing-period {
  font-size: 0.78rem;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.pricing-unit-metric {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.35;
}

.pricing-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.pricing-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.pricing-features-list li i.fa-check {
  color: #34d399;
  font-size: 0.82rem;
  margin-top: 4px;
  flex-shrink: 0;
}

.pricing-features-list li strong {
  color: #f1f5f9;
}

.btn-pricing-primary {
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.btn-pricing-secondary {
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.btn-pricing-secondary:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px);
}

.pricing-memo-card {
  background: rgba(15, 23, 42, 0.78);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  border-radius: 20px;
  padding: 28px 32px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 44px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.5);
}

.pricing-memo-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.pricing-memo-quote {
  font-size: 0.96rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin: 0 0 14px 0;
}

.pricing-memo-quote strong {
  color: #ffffff;
}

.pricing-memo-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pricing-memo-author {
  font-size: 0.82rem;
  font-weight: 800;
  color: #34d399;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pricing-memo-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 3px 10px;
  border-radius: 6px;
}

/* ── stemOS Cookie Banner (Glassmorphism & LFPDPPP Consent) ── */
#stemos-cookie-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 18px;
  padding: 18px 20px;
  color: #f1f5f9;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.5;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(14, 165, 233, 0.18);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

#stemos-cookie-banner.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cookie-banner-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.88rem;
  color: #38bdf8;
}

.cookie-banner-text {
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.btn-cookie-accept {
  flex: 1;
  background: linear-gradient(135deg, #0284c7 0%, #10b981 100%);
  border: none;
  color: #ffffff;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
  transition: all 0.2s ease;
}

.btn-cookie-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.45);
}

.btn-cookie-policy {
  color: #94a3b8;
  font-size: 0.76rem;
  text-decoration: underline;
  padding: 6px;
  transition: color 0.2s ease;
}

.btn-cookie-policy:hover {
  color: #38bdf8;
}

/* SPEI & Online Checkout Modal Styles (Universal stemOS & JSweb parity) */
.stemos-payment-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.spei-amount-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 10px 14px;
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
  font-family: inherit;
}

.spei-amount-pill:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
}

.spei-amount-pill.active {
  background: rgba(14, 165, 233, 0.22);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.25);
}

.spei-clabe-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spei-clabe-number {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 1.25rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.08em;
  word-break: break-all;
  text-align: center;
}

.spei-live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 rgba(52, 211, 153, 0.4);
  animation: speiPulse 1.5s infinite;
  margin-right: 6px;
}

/* ── Landing page readability pass ───────────────────────────────────
   The hero establishes a crisp dark-blue contrast system.  The sections
   below it used several semi-transparent surfaces and muted grays, which
   made body copy fade into the background.  These rules keep the depth but
   use opaque enough surfaces and a single, accessible text scale. */
.promo-section {
  background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.13) 0%, #091426 52%, #030712 100%);
}

.industry-standards-section,
.institutional-academic-section,
.student-cx-journey-section,
.pricing-institutional-section {
  isolation: isolate;
}

.promo-section .section-subtitle,
.promo-section .promo-card-desc,
.promo-section .methodology-intro,
.promo-section .pillar-desc,
.promo-section .reality-col-desc,
.promo-section .reality-point-body p,
.promo-section .standards-clusters-desc,
.promo-section .std-cluster-text,
.promo-section .pricing-plan-summary,
.promo-section .pricing-features-list li,
.promo-section .pricing-memo-quote,
.promo-section .inst-portal-desc,
.promo-section .inst-career-meta-strip,
.promo-section .cx-step-desc {
  color: #dbeafe !important;
}

.promo-section [style*="color:#64748b"],
.promo-section [style*="color: #64748b"],
.promo-section [style*="color:#94a3b8"],
.promo-section [style*="color: #94a3b8"] {
  color: #cbd5e1 !important;
}

.promo-section .promo-card,
.promo-section .methodology-card,
.promo-section .std-cluster-card,
.promo-section .pricing-card,
.promo-section .pricing-memo-card,
.promo-section .inst-portal-card,
.promo-section .inst-career-card,
.promo-section .cx-step-card {
  background-color: rgba(15, 23, 42, 0.92);
}

.promo-section :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}

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

/* Small-screen safety net for the catalog, landing page, and LXP overlays. */
@media (max-width: 640px) {
  .promo-section {
    padding-inline: 16px;
  }

  .promo-section .section-header-center {
    margin-bottom: 36px;
  }

  .promo-section .section-title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  #pricing-institutional-section .pricing-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .cx-journey-summary-bar,
  .pricing-memo-card,
  .methodology-header,
  .reality-gap-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .cx-journey-summary-bar > div:last-child,
  .pricing-memo-meta {
    width: 100%;
  }

  .cx-journey-summary-bar a,
  .pricing-memo-tag {
    justify-content: center;
  }

  .stemos-zoom-modal-overlay,
  .cs-modal-overlay,
  .inst-modal-overlay {
    padding: 12px;
  }

  .cs-modal-card,
  .modal-card,
  .inst-modal-content {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .walkthrough-telemetry-strip,
  .esg-telemetry-grid,
  .sc-telemetry-grid,
  .cyber-telemetry-grid,
  .pdm-telemetry-grid,
  .grid-telemetry-grid,
  .chiplet-telemetry-grid,
  .battery-telemetry-grid,
  .immersion-telemetry-grid,
  .bioprocess-telemetry-grid,
  .hydrogen-telemetry-grid,
  .upw-telemetry-grid,
  .avionics-telemetry-grid,
  .subsea-telemetry-grid,
  .smr-telemetry-grid,
  .dac-telemetry-grid,
  .mcs-telemetry-grid,
  .qkd-telemetry-grid,
  .euv-telemetry-grid,
  .hvdc-telemetry-grid,
  .sensing-telemetry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@keyframes speiPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

/* ==========================================================================
   FASE 79: WCAG 2.1 AA Cross-Portal Accessibility & High-Contrast Mode
   ========================================================================== */
html.theme-high-contrast {
  --bg-primary: #000000 !important;
  --bg-secondary: #0a0a0a !important;
  --text-primary: #ffffff !important;
  --text-secondary: #fef08a !important;
  --accent-color: #38bdf8 !important;
  --border-color: #facc15 !important;
}

html.theme-high-contrast body {
  background-color: #000000 !important;
  color: #ffffff !important;
}

html.theme-high-contrast a,
html.theme-high-contrast button {
  outline-color: #facc15 !important;
}

html.theme-high-contrast .cs-modal-card,
html.theme-high-contrast .modal-dialog {
  border: 2px solid #facc15 !important;
  background: #000000 !important;
  color: #ffffff !important;
}

html.theme-light body {
  background-color: #f8fafc;
  color: #0f172a;
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 85: WCAG 2.1 AA ACCESSIBILITY, FOCUS-VISIBLE & SENSORY ERGONOMICS
   ══════════════════════════════════════════════════════════════════════════ */

/* Enhanced Focus Appearance (WCAG 2.4.7 & WCAG 2.4.11) */
:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25) !important;
}

:focus:not(:focus-visible) {
  outline: none !important;
}

/* Sensory Ergonomics: Vestibular Motion Disorder & Reduced Motion */
@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;
  }
  .pulse-radar,
  .ambient-glow,
  .stemos-mesh-bg,
  .fa-spin {
    animation: none !important;
  }
}

/* Screen Reader Only Utility */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip to Main Content Navigation */
.skip-to-main {
  position: absolute;
  left: -9999px;
  top: 16px;
  z-index: 999999;
  padding: 12px 20px;
  background: #0284c7;
  color: #ffffff;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(2, 132, 199, 0.5);
  transition: left 0.15s ease;
}

.skip-to-main:focus-visible {
  left: 16px;
}