/**
 * MASTER CODEX FINANCIAL - CSS
 * A comprehensive UX/UI layer implementing 140 micro-interactions
 * Mobile-First (iPhone/Safari Focus) | Financial Data Handling | Strict Isolation
 * 
 * All classes namespaced with .cdx- prefix
 * z-index: 2147483647 for overlays (Max Int)
 */

/* ==========================================================================
   PART 0: FOUNDATION & MOBILE-FIRST CONSTRAINTS
   ========================================================================== */

/* iOS Safari tap highlight removal */
.cdx-interactive,
.cdx-btn,
.cdx-link,
.cdx-fab,
button,
a {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

/* Safe area handling for iPhone notch/home bar */
.cdx-fixed-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.cdx-fixed-top {
  padding-top: env(safe-area-inset-top);
}

/* ==========================================================================
   PART 1: EFFICIENCY LAYER - CSS Components
   ========================================================================== */

/* #2 - Quick Actions FAB */
.cdx-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid rgba(0, 255, 136, 0.3);
  color: #00ff88;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 136, 0.2);
  z-index: 2147483640;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding-bottom: env(safe-area-inset-bottom);
}

.cdx-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 136, 0.4);
}

.cdx-fab:active {
  transform: scale(0.95);
}

/* #3 - Command Palette Modal */
.cdx-command-palette {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  background: #1a1a2e;
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  z-index: 2147483647;
  overflow: hidden;
  animation: cdx-modal-in 0.2s ease;
}

.cdx-command-input {
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  outline: none;
}

.cdx-command-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.cdx-command-list {
  max-height: 400px;
  overflow-y: auto;
}

.cdx-command-item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cdx-command-item:hover,
.cdx-command-item.cdx-active {
  background: rgba(0, 255, 136, 0.1);
}

.cdx-command-item kbd {
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* #6 - Theme Switcher */
.cdx-theme-switcher {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.cdx-theme-btn {
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cdx-theme-btn.cdx-active {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
}

/* #10 - Toast System */
.cdx-toast-container {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: env(safe-area-inset-bottom);
}

.cdx-toast {
  padding: 12px 24px;
  background: #1a1a2e;
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: cdx-toast-in 0.3s ease;
}

.cdx-toast.cdx-toast-success {
  border-color: #00ff88;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, #1a1a2e 100%);
}

.cdx-toast.cdx-toast-error {
  border-color: #ff4757;
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, #1a1a2e 100%);
}

.cdx-toast.cdx-toast-out {
  animation: cdx-toast-out 0.3s ease forwards;
}

/* #18 - Onboarding Checklist */
.cdx-onboarding {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 320px;
  background: #1a1a2e;
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 2147483640;
  overflow: hidden;
}

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

.cdx-onboarding-title {
  font-weight: 600;
  color: #fff;
}

.cdx-onboarding-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 20px;
}

.cdx-onboarding-list {
  padding: 16px;
}

.cdx-onboarding-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.7);
}

.cdx-onboarding-item.cdx-done {
  color: #00ff88;
  text-decoration: line-through;
}

/* #22 - Zen Mode */
.cdx-zen-mode header,
.cdx-zen-mode nav,
.cdx-zen-mode aside,
.cdx-zen-mode footer,
.cdx-zen-mode .sidebar,
.cdx-zen-mode .cdx-fab {
  display: none !important;
}

.cdx-zen-mode main,
.cdx-zen-mode article {
  max-width: 75ch;
  margin: 0 auto;
  padding: 40px 20px;
}

/* #31 - Night Shift */
.cdx-night-shift {
  filter: sepia(20%) brightness(0.95);
}

/* #32 - Pulse Loader */
.cdx-pulse {
  animation: cdx-pulse 1.5s ease-in-out infinite;
}

/* #33 - Skeleton UI */
.cdx-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: cdx-shimmer 1.5s infinite;
  border-radius: 4px;
}

/* #42 - Print Styles */
@media print {
  .cdx-no-print,
  header,
  nav,
  footer,
  aside,
  .cdx-fab,
  .cdx-toast-container {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  a {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* #44 - Feedback Widget */
.cdx-feedback {
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.cdx-feedback-btn {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 20px;
}

.cdx-feedback-btn:hover {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.3);
}

.cdx-feedback-btn.cdx-selected {
  background: rgba(0, 255, 136, 0.2);
  border-color: #00ff88;
}

/* ==========================================================================
   PART 2: POLISH LAYER - UI/UX Detail
   ========================================================================== */

/* #51 - Hover Lift */
.cdx-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cdx-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* #52 - Active Press */
.cdx-press:active {
  transform: scale(0.98);
}

/* #53 - Focus Glow */
.cdx-focus-glow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.25);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.25);
}

/* #54 - Skeleton Animation */
@keyframes cdx-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* #55 - Menu Slide */
.cdx-menu {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.cdx-menu.cdx-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* #56 - Cursor Hand */
button,
[role="button"],
.cdx-clickable {
  cursor: pointer;
}

/* #57 - Link Fade */
a,
.cdx-link {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* #58 - Sticky Header */
.cdx-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

/* #59 - Toast Pop Animation */
@keyframes cdx-toast-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cdx-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* #60 - Progress Bar */
.cdx-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #00ff88, #00d4ff);
  z-index: 2147483647;
  transition: width 0.1s ease;
}

/* #61 - Line Height */
.cdx-readable {
  line-height: 1.6;
}

/* #62 - Line Width */
.cdx-prose {
  max-width: 75ch;
}

/* #63 - Typography Hierarchy */
.cdx-h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.cdx-h2 { font-size: 2rem; font-weight: 600; line-height: 1.3; }
.cdx-h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.4; }
.cdx-h4 { font-size: 1.5rem; font-weight: 500; line-height: 1.4; }

/* #64 - Contrast (Dark theme optimized) */
.cdx-contrast {
  color: #f0f0f0;
  background: #0a0a0f;
}

/* #65 - System Fonts */
.cdx-system-font {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* #68 - Link Style */
.cdx-link-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* #69 - Whitespace Utilities */
.cdx-mb-1 { margin-bottom: 0.25rem; }
.cdx-mb-2 { margin-bottom: 0.5rem; }
.cdx-mb-3 { margin-bottom: 1rem; }
.cdx-mb-4 { margin-bottom: 1.5rem; }
.cdx-mb-5 { margin-bottom: 2rem; }

.cdx-mt-1 { margin-top: 0.25rem; }
.cdx-mt-2 { margin-top: 0.5rem; }
.cdx-mt-3 { margin-top: 1rem; }
.cdx-mt-4 { margin-top: 1.5rem; }
.cdx-mt-5 { margin-top: 2rem; }

/* #76 - Error Text */
.cdx-error-text {
  color: #ff4757;
  font-size: 0.875rem;
  margin-top: 4px;
}

/* #77 - Button Primary */
.cdx-btn-primary {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cdx-btn-primary:hover {
  background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

/* #78 - Touch Target (iOS Standard 44px) */
.cdx-touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* #79 - Floating Label */
.cdx-float-label {
  position: relative;
}

.cdx-float-label input {
  padding: 20px 12px 8px;
}

.cdx-float-label label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  transition: all 0.2s ease;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.5);
}

.cdx-float-label input:focus + label,
.cdx-float-label input:not(:placeholder-shown) + label {
  top: 8px;
  font-size: 0.75rem;
  color: #00ff88;
}

/* #80 - Breadcrumbs */
.cdx-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

.cdx-breadcrumbs a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.cdx-breadcrumbs a:hover {
  color: #00ff88;
}

.cdx-breadcrumbs span::before {
  content: '/';
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.3);
}

/* #82 - Visited Links */
a:visited {
  opacity: 0.85;
}

/* #83 - Empty State */
.cdx-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.5);
}

.cdx-empty-state svg {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
  opacity: 0.3;
}

/* #84 - Custom 404 */
.cdx-404 {
  position: fixed;
  inset: 0;
  background: #0a0a0f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
}

.cdx-404-code {
  font-size: 8rem;
  font-weight: 700;
  color: rgba(0, 255, 136, 0.2);
  line-height: 1;
}

.cdx-404-text {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 20px;
}

/* #86 - Back to Top */
.cdx-back-top {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1a1a2e;
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: #00ff88;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 2147483640;
  padding-bottom: env(safe-area-inset-bottom);
}

.cdx-back-top.cdx-visible {
  opacity: 1;
  transform: translateY(0);
}

.cdx-back-top:hover {
  background: rgba(0, 255, 136, 0.1);
}

/* #89 - Modal Backdrop */
.cdx-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 2147483646;
  animation: cdx-fade-in 0.2s ease;
}

/* #91 - Lazy Load Blur-up */
.cdx-lazy {
  filter: blur(20px);
  transition: filter 0.5s ease;
}

.cdx-lazy.cdx-loaded {
  filter: blur(0);
}

/* #92 - Image Aspect Ratio */
.cdx-aspect-16-9 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cdx-aspect-4-3 {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cdx-aspect-1-1 {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* #93 - Alt Warning (Dev Mode) */
.cdx-dev-mode img:not([alt]),
.cdx-dev-mode img[alt=""] {
  outline: 3px solid #ff4757 !important;
}

/* #94 - Tablet Media Queries */
@media (min-width: 768px) {
  .cdx-tablet-hide { display: none; }
  .cdx-tablet-show { display: block; }
  .cdx-tablet-flex { display: flex; }
}

@media (max-width: 767px) {
  .cdx-mobile-hide { display: none; }
  .cdx-mobile-show { display: block; }
  .cdx-mobile-flex { display: flex; }
}

/* #95 - Fast Tap */
.cdx-fast-tap {
  touch-action: manipulation;
}

/* #97 - External Link Icon */
a[target="_blank"]::after {
  content: ' ↗';
  font-size: 0.8em;
  opacity: 0.6;
}

/* #100 - Selection */
::selection {
  background: rgba(0, 255, 136, 0.3);
  color: #fff;
}

::-moz-selection {
  background: rgba(0, 255, 136, 0.3);
  color: #fff;
}

/* ==========================================================================
   PART 3: ANTICIPATORY LAYER - Advanced UX
   ========================================================================== */

/* #102 - Trajectory Glow */
.cdx-trajectory-glow {
  transition: box-shadow 0.15s ease;
}

.cdx-trajectory-glow.cdx-approaching {
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

/* #103 - Magnet Cursor */
.cdx-magnet {
  transition: transform 0.1s ease;
}

/* #106 - Circadian Background */
.cdx-circadian-warm {
  filter: sepia(10%) brightness(0.98);
}

.cdx-circadian-cool {
  filter: saturate(1.1) brightness(1.02);
}

/* #107 - Focus Tunnel */
.cdx-focus-tunnel *:not(:focus):not(:focus-within) {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

/* #110 - Density Compact */
.cdx-compact {
  --cdx-spacer: 0.5rem;
}

.cdx-compact .cdx-mb-4 {
  margin-bottom: var(--cdx-spacer);
}

/* #111 - Patina (Frequently Used) */
.cdx-patina-1 { filter: brightness(0.98); }
.cdx-patina-2 { filter: brightness(0.96); }
.cdx-patina-3 { filter: brightness(0.94); }
.cdx-patina-4 { filter: brightness(0.92); }
.cdx-patina-5 { filter: brightness(0.90); }

/* #113 - Wait Cursor */
.cdx-loading {
  cursor: progress !important;
  pointer-events: none;
}

/* #117 - Changelog "New" Badge */
.cdx-new-badge::after {
  content: 'NEW';
  margin-left: 8px;
  padding: 2px 6px;
  background: #00ff88;
  color: #0a0a0f;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 4px;
  vertical-align: middle;
}

/* ==========================================================================
   PART 4: PSYCHOLOGICAL CODEX - Influence Layer
   ========================================================================== */

/* #121-123 - Reciprocity Modals */
.cdx-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  animation: cdx-fade-in 0.3s ease;
}

.cdx-modal {
  background: #1a1a2e;
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 16px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: cdx-modal-in 0.3s ease;
}

.cdx-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.cdx-modal-text {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* #124 - Identity Toggle */
.cdx-identity-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
}

.cdx-noise {
  transition: filter 0.3s ease;
}

.cdx-long-duration .cdx-noise {
  filter: blur(4px);
  opacity: 0.5;
}

/* #125 - Manifesto Gate */
.cdx-gated-content {
  filter: blur(8px);
  pointer-events: none;
  transition: filter 0.5s ease;
}

.cdx-gated-content.cdx-unlocked {
  filter: blur(0);
  pointer-events: auto;
}

/* #128 - Silent Badge */
.cdx-badge-highlight {
  position: relative;
}

.cdx-badge-highlight::before {
  content: attr(data-badge);
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 4px 8px;
  background: rgba(0, 255, 136, 0.2);
  border: 1px solid rgba(0, 255, 136, 0.4);
  border-radius: 4px;
  font-size: 0.625rem;
  color: #00ff88;
  white-space: nowrap;
}

/* #129 - Peer Notes (Handwritten) */
.cdx-peer-notes {
  font-family: 'Caveat', cursive;
  font-size: 1.1em;
  color: rgba(0, 255, 136, 0.8);
  transform: rotate(-1deg);
  margin-left: 20px;
  padding: 8px;
  border-left: 2px solid rgba(0, 255, 136, 0.3);
}

/* #131 - Quiet Room */
.cdx-quiet-room {
  position: fixed;
  inset: 0;
  background: #f5f0e6;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  padding: 40px;
}

.cdx-quiet-room-content {
  max-width: 60ch;
  text-align: center;
  color: #2a2a2a;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.8;
}

/* #132 - Disqualify Warning */
.cdx-disqualify {
  padding: 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.cdx-disqualify-title {
  font-weight: 600;
  color: #ff4757;
  margin-bottom: 8px;
}

/* #133 - Dated Window */
.cdx-window-closed {
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.cdx-window-closed-text {
  font-size: 1.25rem;
  font-weight: 500;
}

/* #134 - Underwriting Mode */
.cdx-underwriting table,
.cdx-underwriting .highcharts-container,
.cdx-underwriting .recharts-wrapper,
.cdx-underwriting svg:not(.cdx-icon) {
  filter: grayscale(100%);
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
}

/* #135 - Legacy Font */
.cdx-legacy-font {
  font-family: 'Crimson Text', Georgia, serif;
}

/* #137 - Privacy Banner */
.cdx-privacy-banner {
  padding: 12px 20px;
  background: rgba(0, 255, 136, 0.05);
  border-top: 1px solid rgba(0, 255, 136, 0.2);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

/* #138 - Pacing Tooltip */
.cdx-pacing-tooltip {
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: #1a1a2e;
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 8px;
  color: #00ff88;
  font-size: 0.875rem;
  z-index: 2147483647;
  animation: cdx-fade-in 0.3s ease;
}

/* #140 - Patient Tag */
.cdx-patient-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 20px;
  color: #00ff88;
  font-size: 0.875rem;
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

@keyframes cdx-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cdx-modal-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes cdx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes cdx-confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-500px) rotate(720deg); opacity: 0; }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.cdx-hidden { display: none !important; }
.cdx-visible { display: block !important; }
.cdx-flex { display: flex !important; }
.cdx-grid { display: grid !important; }
.cdx-center { text-align: center; }
.cdx-left { text-align: left; }
.cdx-right { text-align: right; }
.cdx-bold { font-weight: 700; }
.cdx-italic { font-style: italic; }
.cdx-uppercase { text-transform: uppercase; }
.cdx-lowercase { text-transform: lowercase; }
.cdx-capitalize { text-transform: capitalize; }
.cdx-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}