/* ==============================================================================
   TAPTALK AAC — SOVEREIGN MASTER DESIGN SYSTEM & THEME HARMONIZATION v2026.10
   Compliance: WCAG AAA 7:1 Contrast | Modern Glassmorphism & Neumorphic Depth
   Standardized Across All 77 Portals, Desks & Communicator Screens
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=JetBrains+Mono:wght@400;600;700;800&family=Lexend:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700;800&display=swap');

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --tt-bg-root: #040813;
  --tt-bg-panel: rgba(11, 20, 44, 0.88);
  --tt-bg-card: #091329;
  --tt-border-subtle: rgba(255, 255, 255, 0.10);
  --tt-border-cyan: rgba(56, 189, 248, 0.35);
  --tt-border-gold: rgba(250, 204, 21, 0.45);
  
  --tt-cyan: #38bdf8;
  --tt-cyan-glow: rgba(56, 189, 248, 0.4);
  --tt-gold: #f59e0b;
  --tt-gold-light: #fbbf24;
  --tt-emerald: #10b981;
  --tt-rose: #f43f5e;
  --tt-purple: #c084fc;
  
  /* ACCESSIBLE DYSLEXIA-FIRST TYPOGRAPHY ENGINE (LEXEND + OPENDYSLEXIC + ATKINSON) */
  --font-body: 'Lexend', 'OpenDyslexic', 'Atkinson Hyperlegible', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Lexend', 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'Lexend', monospace;
}

/* GLOBAL RESET & BASE STYLES */
html, body, div, p, span, td, th, input, select, textarea, button, a {
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

html, body {
  background-color: var(--tt-bg-root) !important;
  color: #f8fafc !important;
  line-height: 1.45 !important;
  letter-spacing: 0.15px !important;
}

.font-mono { font-family: var(--font-mono) !important; }
.font-display { font-family: var(--font-display) !important; }

/* ALL BUTTONS BOLD, VIBRANT & TACTILE */
button, .btn, a.btn, input[type="button"], input[type="submit"], .btn-tt-pill, .tt-back-btn {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

/* ALL FORM LABELS & FIELD IDENTIFIERS BOLD & HIGH-CONTRAST */
label, .form-label, .input-label {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
}

/* ALL TABLE HEADERS BOLD & ELECTRIC CYAN */
th, .table th, .table thead th, .table-crm th {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* ALL BADGES, PILLS & STATUS TAGS BOLD */
.badge, .badge-pill, .status-pill, .kbd-pill {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
}

/* ZERO DARK-ON-DARK TEXT DEFECTS: UNIVERSAL BRIGHT WCAG AAA CONTRAST */
.alert, .alert-dark, .alert-info, .alert-warning, .alert-success, .alert-primary, .alert-secondary {
  color: #f8fafc !important;
  background: #0a1329 !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}
.alert strong, .alert b {
  color: #38bdf8 !important;
  font-weight: 800 !important;
}
.alert span, .alert p {
  color: #f1f5f9 !important;
}
.text-muted, .text-secondary, .form-text, small.text-muted {
  color: #cbd5e1 !important; /* Elevated from dark slate to bright readable silver */
}
::placeholder, .form-control::placeholder, input::placeholder, textarea::placeholder {
  color: rgba(203, 213, 225, 0.65) !important;
  opacity: 1 !important;
}

/* ==============================================================================
   🌟 UNIVERSAL WIDESCREEN & ZERO-SCROLL MODAL SYSTEM (LAPTOP SCREEN UTILIZATION)
   ============================================================================== */
.modal-dialog {
  max-width: min(1180px, 95vw) !important;
  margin-top: 1.5vh !important;
  margin-bottom: 1.5vh !important;
}
.modal-dialog.modal-sm { max-width: min(520px, 90vw) !important; }
.modal-dialog.modal-md { max-width: min(820px, 92vw) !important; }
.modal-dialog.modal-lg { max-width: min(1100px, 94vw) !important; }
.modal-dialog.modal-xl, .modal-dialog.modal-xxl { max-width: min(1320px, 96vw) !important; }

.modal-content {
  background: #070d1e !important;
  border: 2px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 35px 120px rgba(0,0,0,0.98), 0 0 50px rgba(56, 189, 248, 0.35) !important;
  overflow: hidden !important;
}
.modal-header {
  padding: 10px 18px !important;
  background: #0a1429 !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}
.modal-header .modal-title {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  color: #ffffff !important;
}
.modal-body {
  padding: 14px 18px !important;
  background: #050914 !important;
  max-height: calc(86vh - 105px) !important;
  overflow-y: auto !important;
}
.modal-footer {
  padding: 10px 18px !important;
  background: #091228 !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}

/* COMPACT INPUT HEIGHTS ACROSS MODALS TO FIT ON SCREEN */
.modal-body .form-control, .modal-body .form-select {
  height: 34px !important;
  padding: 4px 10px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
}
.modal-body .form-control:focus, .modal-body .form-select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4) !important;
}
.modal-body textarea.form-control {
  height: auto !important;
  min-height: 52px !important;
}

/* ==============================================================================
   1. UNIVERSAL TOP HEADER & NAVIGATION BAR
   ============================================================================== */
.tt-page-header, header.slt-header, header.sticky-top, nav.navbar-dark {
  background: rgba(7, 13, 30, 0.95) !important;
  border-bottom: 1.5px solid var(--tt-border-cyan) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
  padding: 10px 20px !important;
  z-index: 1000 !important;
}

/* ==============================================================================
   2. UNIVERSAL TOP-LEFT SLEEK BACK / HOME PILL BUTTON
   ============================================================================== */
.tt-back-btn, 
a.tt-back-btn,
.btn-outline-secondary.font-mono[href*="parents_portal"],
.btn-outline-secondary.font-mono[href*="crm"],
.btn-outline-secondary.font-mono[href*="index"],
.btn-outline-secondary.font-mono[href*="slt_portal"],
header a.btn-outline-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
  color: #38bdf8 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 24px !important;
  padding: 6px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.tt-back-btn:hover,
a.tt-back-btn:hover,
header a.btn-outline-secondary:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  transform: translateX(-3px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.45) !important;
}

/* ==============================================================================
   3. UNIVERSAL BUTTON SYSTEM & PILL BADGES (WCAG AAA CONTRAST)
   ============================================================================== */
/* Universal Pill Buttons */
.btn-tt-pill {
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

/* Info / Cyan Button */
.btn-info, a.btn-info, button.btn-info, .btn-outline-info {
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  transition: all 0.18s ease !important;
}
.btn-info, a.btn-info, button.btn-info {
  background-color: #38bdf8 !important;
  color: #030712 !important;
  border-color: #38bdf8 !important;
}
.btn-info:hover {
  background-color: #0ea5e9 !important;
  color: #030712 !important;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4) !important;
}
.btn-outline-info {
  background: rgba(56, 189, 248, 0.1) !important;
  border: 1.5px solid #38bdf8 !important;
  color: #38bdf8 !important;
}
.btn-outline-info:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.35) !important;
}

/* Sovereign Yellow Button */
.btn-warning, a.btn-warning, button.btn-warning, .btn-outline-warning {
  border-radius: 12px !important;
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  transition: all 0.18s ease !important;
}
.btn-warning, a.btn-warning, button.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #030712 !important;
  border: 1.5px solid #fbbf24 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}
.btn-warning:hover {
  background: #fbbf24 !important;
  color: #030712 !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
  transform: translateY(-1px) !important;
}
.btn-outline-warning {
  background: rgba(250, 204, 21, 0.1) !important;
  border: 1.5px solid #facc15 !important;
  color: #fef08a !important;
}
.btn-outline-warning:hover {
  background: #eab308 !important;
  color: #030712 !important;
  box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4) !important;
}

/* Success / Emerald Button */
.btn-success, a.btn-success, button.btn-success, .btn-outline-success {
  border-radius: 12px !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  transition: all 0.18s ease !important;
}
.btn-success, a.btn-success, button.btn-success {
  background-color: #10b981 !important;
  color: #030712 !important;
  border-color: #10b981 !important;
}
.btn-outline-success {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1.5px solid #10b981 !important;
  color: #6ee7b7 !important;
}
.btn-outline-success:hover {
  background: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35) !important;
}

/* Secondary / Dark Outline Button Harmonization (No ugly gray rectangles) */
.btn-outline-secondary, a.btn-outline-secondary, button.btn-outline-secondary {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid #334155 !important;
  color: #cbd5e1 !important;
  border-radius: 12px !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
}
.btn-outline-secondary:hover {
  background: #1e293b !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

/* ==============================================================================
   4. SOVEREIGN YELLOW UNIVERSAL MENU BUTTON GUARANTEE
   ============================================================================== */
.tt-universal-yellow-menu-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #030712 !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  z-index: 99990 !important;
}
.tt-universal-yellow-menu-btn:hover {
  transform: translateY(-1px) scale(1.03) !important;
  background: #fbbf24 !important;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.6) !important;
}

/* ==============================================================================
   5. BENTO CARDS, PANELS & GLASS CONTAINERS
   ============================================================================== */
.card, .glass-card, .slt-card, .telemetry-card, .post-card, .bento-card, .metric-box {
  background: var(--tt-bg-panel) !important;
  border: 1.5px solid var(--tt-border-subtle) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.22s ease !important;
}

.card:hover, .glass-card:hover, .slt-card:hover, .telemetry-card:hover, .post-card:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(56, 189, 248, 0.12) !important;
}

/* ==============================================================================
   6. FORM INPUTS & SELECT CONTROLS
   ============================================================================== */
.form-control, .form-select {
  background-color: #060c1d !important;
  color: #ffffff !important;
  border: 1.5px solid #1e293b !important;
  border-radius: 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  padding: 8px 14px !important;
}
.form-control:focus, .form-select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.3) !important;
  background-color: #09122a !important;
  color: #ffffff !important;
}

/* ==============================================================================
   7. FLOATING ACTION BUTTONS & BOTTOM POSITIONING ZERO-OVERLAP
   ============================================================================== */
#taptalk-wa-float-btn, .tt-sticky-bottom-left-human {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  z-index: 99990 !important;
}

#tt-floating-bottom-demo-btn, .tt-sticky-chat-btn {
  position: fixed !important;
  bottom: 16px !important;
  right: 16px !important;
  z-index: 99990 !important;
}

.quantum-heartbeat-sticky {
  position: fixed !important;
  bottom: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99980 !important;
}


/* ==============================================================================
   8. AUTOCOMPLETE PREDICTIVE CHIPS & TOP CONTROLS ROW (INDEX.HTML)
   ============================================================================== */
#taptalk-autocomplete-chips button,
.autocomplete-chip,
.predictive-chip {
  background: rgba(15, 23, 42, 0.75) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#taptalk-autocomplete-chips button:hover,
.autocomplete-chip:hover,
.predictive-chip:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

/* OUTSIDER APPEARANCE DROPDOWNS BAR */
#taptalk-outsider-controls-bar {
  background: rgba(8, 14, 28, 0.96) !important;
  border-bottom: 1.5px solid rgba(56, 189, 248, 0.25) !important;
  padding: 6px 16px !important;
  backdrop-filter: blur(16px) !important;
}

#taptalk-outsider-controls-bar .btn,
#taptalk-outsider-controls-bar button {
  border-radius: 20px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  padding: 5px 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* POPUP MENUS & DROPDOWNS */
.tt-custom-popup-menu {
  background: #0b1428 !important;
  border: 1.5px solid #38bdf8 !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(56, 189, 248, 0.25) !important;
  backdrop-filter: blur(20px) !important;
}

.tt-popup-item {
  border-radius: 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}
.tt-popup-item:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  transform: translateX(3px) !important;
}

/* FLOATING ACTION BUTTONS (WCAG AAA HIGHLIGHTED PILLS) */
#taptalk-wa-float-btn a,
.tt-human-whatsapp-single-btn {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: 1.5px solid #34d399 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
  transition: all 0.2s ease !important;
}
#taptalk-wa-float-btn a:hover,
.tt-human-whatsapp-single-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6) !important;
}

#tt-floating-bottom-demo-btn button {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border: 1.5px solid #38bdf8 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45) !important;
  transition: all 0.2s ease !important;
}
#tt-floating-bottom-demo-btn button:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.6) !important;
}


/* ==============================================================================
   9. STRICT ARROW / CHEVRON & BUTTON SPACING HARMONIZATION
   ============================================================================== */
select.form-select, 
.form-select, 
select.form-select-sm {
  padding-left: 12px !important;
  padding-right: 36px !important;
  background-position: right 12px center !important;
  background-size: 14px 10px !important;
  min-width: fit-content !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dropdown-toggle, 
.btn.dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dropdown-toggle::after {
  margin-left: 8px !important;
  vertical-align: middle !important;
}


/* ==============================================================================
   TAPTALK SOVEREIGN UNIVERSAL WIDE MODAL SYSTEM (LAPTOP & TABLET OPTIMIZED)
   Enforces generous 92vw / 88vh screen utilization, zero cramped scrolling
   ============================================================================== */
.modal-dialog {
  max-width: min(1140px, calc(100vw - 36px)) !important;
  margin: 1.25rem auto !important;
}

.modal-dialog.modal-xl {
  max-width: min(1320px, calc(100vw - 28px)) !important;
}

.modal-dialog.modal-lg {
  max-width: min(1060px, calc(100vw - 36px)) !important;
}

.modal-dialog.modal-md {
  max-width: min(920px, calc(100vw - 36px)) !important;
}

.modal-content {
  background: #070d1e !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 120px rgba(0,0,0,0.98), 0 0 50px rgba(56,189,248,0.35) !important;
  max-height: calc(100vh - 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.modal-header {
  background: #091228 !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  padding: 16px 24px !important;
}

.modal-body {
  overflow-y: auto !important;
  padding: 24px 28px !important;
  max-height: calc(100vh - 160px) !important;
  background: #060b19 !important;
}

.modal-footer {
  background: #050914 !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  padding: 14px 24px !important;
}

/* ==============================================================================
   🌟 MASTER 100 MODERN 2026 UI/UX ANIMATIONS & HIGH-PRODUCTIVITY SUITE (PASS 2)
   Standardized Across All 22 Sovereign Portals, AAC Boards & Clinical Desks
   GPU-Accelerated 60-120 FPS | Zero Layout Thrashing | Tactile Micro-Haptics
   ============================================================================== */

/* ── DOMAIN 1: GLASSMORPHISM 2.0 & SPECULAR SHEEN (1-10) ────────────────────── */
/* 1. Specular Edge with 3D GPU Lift */
.glass-specular-edge, .glass-panel-2026, .card-2026, .glass-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(11, 19, 41, 0.92) 100%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), inset 0 1px 1.5px rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important;
  will-change: transform, box-shadow, border-color !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
/* 2. Glass Tilt Glare on Hover */
.glass-specular-edge:hover, .glass-panel-2026:hover, .card-2026:hover, .glass-card:hover {
  border-color: rgba(56, 189, 248, 0.65) !important;
  transform: translate3d(0, -3.5px, 0) scale(1.008) !important;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.82), 0 0 30px rgba(56, 189, 248, 0.3) !important;
}
/* 3. Inset Specular Bevel */
.glass-inner-bevel { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.28) !important; }
/* 4. Glass Frosted Badge */
.glass-frosted-badge {
  background: rgba(56, 189, 248, 0.14) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: #38bdf8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
/* 5. Glass Dark Recess (Terminal & Terminal Wells) */
.glass-dark-recess {
  background: #030712 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.85) !important;
  border-radius: 14px !important;
}
/* 6. High Elevation Layer (Modals & Drawers) */
.glass-elevation-high {
  box-shadow: 0 35px 130px rgba(0, 0, 0, 0.99), 0 0 55px rgba(56, 189, 248, 0.4) !important;
}
/* 7. Mid Elevation Layer (Cards & Inspectors) */
.glass-elevation-mid {
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75) !important;
}
/* 8. Subsurface Dynamic Sheen */
.glass-subsurface-glow {
  position: relative;
}
.glass-subsurface-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.18), transparent 70%);
  pointer-events: none;
}
/* 9. Iridescent Rotating Border */
.border-iridescent {
  border: 1.5px solid transparent !important;
  background-image: linear-gradient(#070d1e, #070d1e), linear-gradient(135deg, #38bdf8, #10b981, #f59e0b, #38bdf8) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 200% 200% !important;
  animation: iridescentFlow 6s ease infinite alternate !important;
}
@keyframes iridescentFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
/* 10. Peripheral Contrast Vignette */
.vignette-edges {
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.85) !important;
}

/* ── DOMAIN 2: TACTILE PHYSICS & SPRING MICRO-HAPTICS (11-20) ───────────────── */
/* 11. Spring Lift Physics */
button, .btn, .interactive-cell, .tile-pressable, .btn-spring-lift {
  will-change: transform, box-shadow !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background-color 0.22s ease !important;
}
button:hover, .btn:hover, .btn-spring-lift:hover {
  transform: translate3d(0, -2.5px, 0) !important;
}
/* 12. Tactile Press Depression */
button:active, .btn:active, .btn-tactile-press:active {
  transform: translate3d(0, 1.5px, 0) scale(0.975) !important;
  transition-duration: 0.08s !important;
}
/* 13. Card Tilt Perspective */
.card-interactive-tilt {
  will-change: transform !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.card-interactive-tilt:hover {
  transform: translate3d(0, -4.5px, 0) scale(1.012) !important;
}
/* 14. Icon Spin on Hover */
.btn:hover i.bi-arrow-repeat, .btn:hover i.bi-gear-fill, .icon-spin-hover:hover {
  transform: rotate(90deg) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
/* 15. Icon Bounce on Action */
.icon-bounce-click:active {
  transform: scale(1.4) !important;
  transition: transform 0.1s ease !important;
}
/* 16. Badge Pop */
.badge-pop {
  animation: badgePopAnim 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes badgePopAnim {
  0% { transform: scale(0.75); opacity: 0.5; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}
/* 17. Gold Button Sheen Ray */
.btn-warning, .btn-gold-sheen {
  position: relative;
  overflow: hidden;
}
.btn-warning::after, .btn-gold-sheen::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 100%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(25deg);
  transition: left 0.65s ease;
}
.btn-warning:hover::after, .btn-gold-sheen:hover::after {
  left: 150%;
}
/* 18. Table Row Lift */
.table-crm tbody tr, .hover-row {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.18s ease !important;
}
.table-crm tbody tr:hover, .hover-row:hover {
  transform: translate3d(0, -2px, 0) !important;
  background: rgba(14, 26, 56, 0.90) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}
/* 19. Avatar Magnetic Zoom & Glow */
.avatar-clickable, .profile-avatar, .user-avatar, .video-tile .rounded-circle {
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.22s ease !important;
}
.avatar-clickable:hover, .profile-avatar:hover, .user-avatar:hover {
  transform: scale(1.16) !important;
  filter: brightness(1.25) drop-shadow(0 0 16px rgba(56, 189, 248, 0.9)) !important;
}
/* 20. Chip Pill Depress */
.spotlight-filter-pill, .filter-tab-btn {
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.spotlight-filter-pill:hover, .filter-tab-btn:hover {
  transform: translate3d(0, -1.5px, 0) !important;
}
.spotlight-filter-pill:active, .filter-tab-btn:active {
  transform: translate3d(0, 1px, 0) scale(0.96) !important;
}

/* ── DOMAIN 3: AMBIENT MESH AURORAS & OLED CONTRAST (21-30) ─────────────────── */
/* 21. Drifting Cyan/Emerald Mesh Glow */
.ambient-glow-mesh {
  position: relative !important;
  overflow: hidden !important;
}
.ambient-glow-mesh::before {
  content: '' !important;
  position: absolute !important;
  top: -30% !important;
  left: -20% !important;
  width: 140% !important;
  height: 140% !important;
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08), rgba(16, 185, 129, 0.04) 40%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: ambientMeshDrift 24s ease-in-out infinite alternate !important;
}
@keyframes ambientMeshDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 4%, 0) scale(1.06); }
  100% { transform: translate3d(3%, -3%, 0) scale(0.97); }
}
/* 22. Amber Aura */
.ambient-gold-aura::before {
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.09), transparent 70%) !important;
}
/* 23. Emerald Clinical Aura */
.ambient-emerald-aura::before {
  background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.09), transparent 70%) !important;
}
/* 24. Purple Care Circle Aura */
.ambient-purple-aura::before {
  background: radial-gradient(circle at 50% 50%, rgba(192, 132, 252, 0.09), transparent 70%) !important;
}
/* 25. OLED Deep Void */
.oled-void { background: #030712 !important; }
/* 26. Layer 1 */
.layer-level-1 { background: #070d1e !important; }
/* 27. Layer 2 */
.layer-level-2 { background: #0b1428 !important; }
/* 28. Layer 3 */
.layer-level-3 { background: #0f1a34 !important; }
/* 29. Subtle Edge Border */
.border-subtle-glow { border: 1px solid rgba(255, 255, 255, 0.12) !important; }
/* 30. Deep Gradient Backdrop */
.bg-deep-space {
  background: radial-gradient(ellipse at 50% 0%, #0c1836 0%, #030712 75%) !important;
}

/* ── DOMAIN 4: LIVE TELEMETRY PULSE & QUANTUM HEARTBEATS (31-40) ─────────────── */
/* 31. Live Presence Dot Pulse */
.live-indicator-dot, .pulse-dot-emerald {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  display: inline-block !important;
  box-shadow: 0 0 12px #10b981 !important;
  animation: liveDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}
@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.4); }
}
/* 32. Warning Pulse Dot */
.pulse-dot-warning {
  width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block;
  box-shadow: 0 0 12px #f59e0b; animation: liveDotPulse 2s infinite;
}
/* 33. PQC Cyan Pulse Dot */
.pulse-dot-cyan {
  width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; display: inline-block;
  box-shadow: 0 0 12px #38bdf8; animation: liveDotPulse 2s infinite;
}
/* 34. Radar Wave Pulse */
.pulse-radar-wave {
  position: relative;
}
.pulse-radar-wave::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid #10b981;
  animation: radarWave 2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}
@keyframes radarWave {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.85); opacity: 0; }
}
/* 35. Audio Frequency VU Meter Bars */
.vu-bar-active { animation: vuBarJump 0.4s ease infinite alternate; }
@keyframes vuBarJump { 0% { height: 18%; } 100% { height: 96%; } }
/* 36. PQC Lattice Breathe */
.pqc-lattice-breathe { animation: latticeGlow 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; }
@keyframes latticeGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(56, 189, 248, 0.7); }
  50% { box-shadow: 0 0 28px rgba(56, 189, 248, 0.98); }
}
/* 37. Incoming Call Ring Shake */
.call-incoming-ring { animation: ringShake 1.2s infinite; }
@keyframes ringShake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-15deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-10deg); }
}
/* 38. Telemetry Synced Green Flash */
.sync-flash-green { animation: syncFlash 1.5s ease; }
@keyframes syncFlash { 0% { background-color: rgba(16, 185, 129, 0.55); } 100% { background-color: transparent; } }
/* 39. Copilot Orb Breathe */
.copilot-orb { animation: orbGlow 3s ease-in-out infinite alternate; }
@keyframes orbGlow { 0% { filter: drop-shadow(0 0 6px #0ea5e9); } 100% { filter: drop-shadow(0 0 20px #38bdf8); } }
/* 40. Recording Flare */
.recording-red-flare { animation: recFlare 1s infinite alternate; }
@keyframes recFlare { 0% { box-shadow: 0 0 8px #ef4444; } 100% { box-shadow: 0 0 26px #f87171; } }

/* ── DOMAIN 5: SHIMMER WAVE SHADERS & TEXT SHEENS (41-50) ───────────────────── */
/* 41. Shimmer Text Cyan */
.text-gradient-cyan, .shimmer-text-cyan {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}
/* 42. Shimmer Text Gold */
.text-gradient-gold, .shimmer-text-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}
/* 43. Shimmer Text Emerald */
.text-gradient-emerald, .shimmer-text-emerald {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}
/* 44. Skeleton Shimmer */
.shimmer-loading, .skeleton-shimmer {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.4) 25%, rgba(56, 189, 248, 0.18) 50%, rgba(30, 41, 59, 0.4) 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmerWave2026 2s infinite !important;
}
@keyframes shimmerWave2026 { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
/* 45. Card Border Sweep */
.border-sweep { animation: borderSweep 4s linear infinite; }
/* 46. Badge Shimmer */
.badge-shimmer { animation: shimmerWave2026 3s infinite; }
/* 47. Progress Bar Stripes */
.progress-bar-glow {
  background-size: 30px 30px !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  animation: progressStripes 1s linear infinite !important;
}
@keyframes progressStripes { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } }
/* 48. Number Counter Tick */
.counter-tick { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* 49. Tab Underline Slide */
.tab-underline-slide { border-bottom: 2.5px solid #38bdf8 !important; }
/* 50. Metric Flash */
.metric-flash { animation: metricFlashAnim 0.8s ease; }
@keyframes metricFlashAnim { 0% { color: #10b981; } 100% { color: inherit; } }

/* ── DOMAIN 6: SLEEK 5PX GRADIENT CUSTOM SCROLLBARS (51-60) ─────────────────── */
/* 51-54. Ultra-Sleek Scrollbars */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
::-webkit-scrollbar-track { background: rgba(3, 7, 18, 0.6) !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0284c7 0%, #10b981 100%) !important;
  border-radius: 999px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #38bdf8 0%, #34d399 100%) !important;
}
/* 55. Scroll Mask Top */
.scroll-mask-top {
  mask-image: linear-gradient(to bottom, transparent, black 16px) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 16px) !important;
}
/* 56. Scroll Mask Bottom */
.scroll-mask-bottom {
  mask-image: linear-gradient(to top, transparent, black 16px) !important;
  -webkit-mask-image: linear-gradient(to top, transparent, black 16px) !important;
}
/* 57. Horizontal Scroll Snap */
.scroll-snap-x { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
/* 58. Auto-Hide Scrollbar */
.scrollbar-auto-hide { scrollbar-width: thin; scrollbar-color: rgba(56, 189, 248, 0.4) transparent; }
/* 59. Touch Momentum */
.smooth-momentum { -webkit-overflow-scrolling: touch; }
/* 60. Reading Progress Indicator */
.page-progress-line { position: fixed; top: 0; left: 0; height: 2.5px; background: #38bdf8; z-index: 999999; }

/* ── DOMAIN 7: STAGGERED CASCADES & MODAL SPRINGS (61-70) ────────────────────── */
/* 61-64. Staggered Row Entrances (1-12 Rows) */
.stagger-1 { animation: staggerSlide 0.35s 0.03s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-2 { animation: staggerSlide 0.35s 0.06s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-3 { animation: staggerSlide 0.35s 0.09s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-4 { animation: staggerSlide 0.35s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-5 { animation: staggerSlide 0.35s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-6 { animation: staggerSlide 0.35s 0.18s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-7 { animation: staggerSlide 0.35s 0.21s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-8 { animation: staggerSlide 0.35s 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-9 { animation: staggerSlide 0.35s 0.27s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-10 { animation: staggerSlide 0.35s 0.30s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-11 { animation: staggerSlide 0.35s 0.33s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-12 { animation: staggerSlide 0.35s 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes staggerSlide {
  0% { opacity: 0; transform: translate3d(0, 14px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* 65. Modal Spring Center */
.modal-spring-center, .modal.show .modal-dialog {
  animation: modalSpring 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes modalSpring {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
/* 66. Backdrop Blur Fade */
.modal-backdrop.show { backdrop-filter: blur(10px) !important; background: rgba(3, 7, 18, 0.8) !important; }
/* 67. Toast Slide-In */
.toast-slide-in { animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes toastIn { 0% { opacity: 0; transform: translate3d(0, 20px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }
/* 68. Flame Scrub Dissolve */
.toast-burn-scrub { animation: burnScrub 0.6s ease forwards; }
@keyframes burnScrub { 0% { filter: contrast(1); opacity: 1; } 100% { filter: contrast(3) blur(4px); opacity: 0; } }
/* 69. Drawer Slide Right */
.drawer-slide-right { animation: drawerRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes drawerRight { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } }
/* 70. Dropdown Bloom */
.dropdown-bloom { animation: dropBloom 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes dropBloom { 0% { opacity: 0; transform: scale(0.95) translate3d(0, -6px, 0); } 100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); } }

/* ── DOMAIN 8: AAC KEYGUARD & TILE TACTILE REACTIONS (71-80) ────────────────── */
/* 71-75. Fitzgerald Tactile Colors */
.tile-fitzgerald-noun { background: #ea580c !important; border: 2px solid #fdba74 !important; }
.tile-fitzgerald-verb { background: #059669 !important; border: 2px solid #86efac !important; }
.tile-fitzgerald-people { background: #d97706 !important; border: 2px solid #fde047 !important; }
.tile-fitzgerald-adj { background: #0284c7 !important; border: 2px solid #7dd3fc !important; }
.tile-fitzgerald-social { background: #e11d48 !important; border: 2px solid #fda4af !important; }
/* 76. Tile Touch Ripple */
.tile-pressable:active { transform: scale(0.93) !important; filter: brightness(1.25) !important; }
/* 77. Dwell Progress Ring */
.dwell-countdown-ring { transition: stroke-dashoffset 0.42s linear; }
/* 78. Keyguard Chamfer Depth */
.keyguard-acrylic-cell {
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.45), inset 0 -2px 4px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.55) !important;
  border-radius: 14px !important;
}
/* 79. Speech Bubble Pop */
.speech-bubble-pop { animation: speechPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes speechPop { 0% { transform: scale(0.9); } 100% { transform: scale(1); } }
/* 80. Tile Drag Placeholder */
.tile-drag-slot { border: 2px dashed #38bdf8 !important; background: rgba(56, 189, 248, 0.08) !important; }

/* ── DOMAIN 9: FOCUS RINGS & MICRO-INTERACTIONS (81-90) ─────────────────────── */
/* 81. Focus Ring Cyan */
*:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.55), 0 0 16px rgba(56, 189, 248, 0.4) !important;
}
/* 82. Focus Ring Gold */
.focus-ring-gold:focus-visible {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.65), 0 0 16px rgba(245, 158, 11, 0.45) !important;
}
/* 83. Input Icon Highlight */
.input-group:focus-within .input-group-text {
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
}
/* 84. Form Check Spring */
.form-check-input:checked {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  transform: scale(1.12) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
/* 85. Switch Slider Physics */
.form-switch .form-check-input { transition: background-position 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
/* 86. Fast Tooltip */
.tooltip-fast { transition: opacity 0.1s ease !important; }
/* 87. Badge Dismiss Pop */
.badge-dismiss:active { transform: scale(0.8); }
/* 88. KPI Glow Hover */
.kpi-card:hover {
  border-color: rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.82), 0 0 22px rgba(56, 189, 248, 0.25) !important;
}
/* 89. Clear Search Spin */
.btn-clear-search:active i { transform: rotate(180deg); transition: transform 0.25s ease; }
/* 90. Copy Feedback Glow */
.copy-success-flash { animation: copyGlow 1s ease; }
@keyframes copyGlow { 0% { box-shadow: 0 0 20px #10b981; } 100% { box-shadow: none; } }

/* ── DOMAIN 10: HIGH-PRODUCTIVITY DENSITY & KEYBOARD ACCELERATION (91-100) ──── */
/* 91. Compact Density Mode (High-Volume Caseload) */
body.density-compact .table-crm td, 
body.density-compact .table-crm th,
.table-compact td, .table-compact th {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
}
/* 92. Comfortable Density Mode (Balanced) */
body.density-comfortable .table-crm td,
body.density-comfortable .table-crm th,
.table-comfortable td, .table-comfortable th {
  padding: 12px 16px !important;
  font-size: 0.85rem !important;
}
/* 93. Spacious Density Mode (Touch / Parent View) */
body.density-spacious .table-crm td,
body.density-spacious .table-crm th,
.table-spacious td, .table-spacious th {
  padding: 18px 20px !important;
  font-size: 0.95rem !important;
}
/* 94. Keyboard Shortcut Pill Caps */
.kbd-pill, kbd {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-bottom: 2px solid rgba(56, 189, 248, 0.6) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* 95. Split Pane Handle */
.split-pane-divider {
  width: 4px;
  cursor: col-resize;
  background: rgba(56, 189, 248, 0.25);
  transition: background 0.2s ease;
}
.split-pane-divider:hover { background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
/* 96. Quick Action Dock */
.quick-action-dock {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background: rgba(7, 13, 30, 0.94);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  border-radius: 999px;
  padding: 8px 18px;
  z-index: 99990;
  box-shadow: 0 12px 45px rgba(0,0,0,0.9);
}
/* 97. Interactive Breadcrumb Spring */
.breadcrumb-item a:hover { transform: translate3d(2.5px, 0, 0); transition: transform 0.15s ease; color: #38bdf8 !important; }
/* 98. Multi-Format Export Dropdown */
.dropdown-export-menu { background: #070d1e !important; border: 1.5px solid #10b981 !important; border-radius: 14px !important; }
/* 99. Stat Delta Growth Pulse */
.stat-delta-growth { color: #10b981 !important; font-weight: 700; }
/* 100. Laptop-Fluid Container (1366px - 1920px Screens) */
.container-laptop-fluid {
  width: 100% !important;
  max-width: 96% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   💚 NORMAL CARDIAC SPEED BEATING HEART SECURITY (0.85s Cycle, ~72 BPM)
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes cardiacHeartPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.6)); }
  14% { transform: scale(1.35); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.9)); }
  28% { transform: scale(1.1); filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.6)); }
  42% { transform: scale(1.45); filter: drop-shadow(0 0 12px rgba(16, 185, 129, 1)); }
  65% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.6)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.6)); }
}

@keyframes normalCardiacPulse {
  0% { transform: translateX(-50%) scale(1); box-shadow: 0 8px 25px rgba(0,0,0,0.85), 0 0 0 0 rgba(16,185,129,0.8); border-color: #10b981; }
  14% { transform: translateX(-50%) scale(1.04); box-shadow: 0 10px 35px rgba(0,0,0,0.9), 0 0 20px 6px rgba(16,185,129,0.7); border-color: #38bdf8; }
  28% { transform: translateX(-50%) scale(1.01); box-shadow: 0 8px 25px rgba(0,0,0,0.85), 0 0 10px 2px rgba(16,185,129,0.4); border-color: #10b981; }
  42% { transform: translateX(-50%) scale(1.06); box-shadow: 0 12px 40px rgba(0,0,0,0.95), 0 0 28px 10px rgba(56,189,248,0.85); border-color: #38bdf8; }
  65% { transform: translateX(-50%) scale(1); box-shadow: 0 8px 25px rgba(0,0,0,0.85), 0 0 0 0 rgba(16,185,129,0); border-color: #10b981; }
  100% { transform: translateX(-50%) scale(1); box-shadow: 0 8px 25px rgba(0,0,0,0.85), 0 0 0 0 rgba(16,185,129,0); border-color: #10b981; }
}

@keyframes normalCardiacDot {
  0%, 100% { opacity: 0.8; transform: scale(1); box-shadow: 0 0 6px #10b981; background: #10b981; }
  14% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 16px #38bdf8; background: #38bdf8; }
  28% { opacity: 0.85; transform: scale(1.1); box-shadow: 0 0 8px #10b981; background: #10b981; }
  42% { opacity: 1; transform: scale(1.55); box-shadow: 0 0 22px #38bdf8; background: #38bdf8; }
  65% { opacity: 0.8; transform: scale(1); box-shadow: 0 0 6px #10b981; background: #10b981; }
}