/**
 * MASTER CODEX FINANCIAL - CSS LAYER
 * ===================================
 * A comprehensive UX/UI layer implementing 140 micro-interactions
 * for high-end financial institutions (Marlowe Partners style)
 * 
 * CONSTRAINTS:
 * - Mobile-First (iPhone/Safari Focus)
 * - Namespace ALL classes with .cdx-
 * - Financial Data Handling (tables, charts)
 * - Strict Isolation (no breaking existing styles)
 * 
 * VERSION: 1.0.0
 */

/* ==========================================================================
   ROOT VARIABLES & FOUNDATION
   ========================================================================== */

:root {
  /* Codex Color Palette - Marlowe Partners Style */
  --cdx-primary: #1a1a1a;
  --cdx-secondary: #2d2d2d;
  --cdx-accent: #f97316; /* Orange accent */
  --cdx-accent-light: rgba(249, 115, 22, 0.1);
  --cdx-accent-glow: rgba(249, 115, 22, 0.25);
  --cdx-text: #222222;
  --cdx-text-light: #666666;
  --cdx-text-muted: #999999;
  --cdx-bg: #ffffff;
  --cdx-bg-warm: #faf8f5;
  --cdx-bg-dark: #0a0a0a;
  --cdx-border: #e5e5e5;
  --cdx-success: #22c55e;
  --cdx-error: #ef4444;
  --cdx-warning: #f59e0b;
  
  /* Spacing System */
  --cdx-spacer: 1rem;
  --cdx-spacer-xs: 0.25rem;
  --cdx-spacer-sm: 0.5rem;
  --cdx-spacer-md: 1rem;
  --cdx-spacer-lg: 1.5rem;
  --cdx-spacer-xl: 2rem;
  --cdx-spacer-2xl: 3rem;
  
  /* Typography */
  --cdx-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cdx-font-serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --cdx-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  --cdx-line-height: 1.6;
  --cdx-max-width: 75ch;
  
  /* Transitions */
  --cdx-transition-fast: 0.15s ease;
  --cdx-transition: 0.2s ease;
  --cdx-transition-slow: 0.3s ease;
  
  /* Shadows */
  --cdx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --cdx-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --cdx-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --cdx-shadow-glow: 0 0 20px var(--cdx-accent-glow);
  
  /* Z-Index Scale */
  --cdx-z-dropdown: 1000;
  --cdx-z-sticky: 1020;
  --cdx-z-fixed: 1030;
  --cdx-z-modal-backdrop: 1040;
  --cdx-z-modal: 1050;
  --cdx-z-popover: 1060;
  --cdx-z-tooltip: 1070;
  --cdx-z-toast: 1080;
  --cdx-z-max: 2147483647;
}

/* Dark Mode Variables */
.cdx-dark {
  --cdx-text: #f5f5f5;
  --cdx-text-light: #a3a3a3;
  --cdx-text-muted: #737373;
  --cdx-bg: #0a0a0a;
  --cdx-bg-warm: #111111;
  --cdx-border: #2d2d2d;
}

/* ==========================================================================
   #51-65: TYPOGRAPHY & HIERARCHY
   ========================================================================== */

/* #61: Global Line Height */
.cdx-content {
  line-height: var(--cdx-line-height);
}

/* #62: Max Text Width for Readability */
.cdx-prose {
  max-width: var(--cdx-max-width);
}

/* #63: Typography Hierarchy */
.cdx-h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; margin-bottom: var(--cdx-spacer-lg); }
.cdx-h2 { font-size: 2rem; font-weight: 600; line-height: 1.25; margin-bottom: var(--cdx-spacer-md); }
.cdx-h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.3; margin-bottom: var(--cdx-spacer-md); }
.cdx-h4 { font-size: 1.5rem; font-weight: 500; line-height: 1.35; margin-bottom: var(--cdx-spacer-sm); }
.cdx-h5 { font-size: 1.25rem; font-weight: 500; line-height: 1.4; margin-bottom: var(--cdx-spacer-sm); }
.cdx-h6 { font-size: 1rem; font-weight: 500; line-height: 1.5; margin-bottom: var(--cdx-spacer-xs); }

/* #64: Contrast - Text Colors */
.cdx-text-primary { color: var(--cdx-text); }
.cdx-text-secondary { color: var(--cdx-text-light); }
.cdx-text-muted { color: var(--cdx-text-muted); }
.cdx-bg-primary { background-color: var(--cdx-bg); }

/* #65: System Fonts */
.cdx-font-sans { font-family: var(--cdx-font-sans); }
.cdx-font-serif { font-family: var(--cdx-font-serif); }
.cdx-font-mono { font-family: var(--cdx-font-mono); }

/* #135: Legacy Font (Authority) - Crimson Text */
.cdx-legacy-font,
.cdx-authority-font {
  font-family: 'Crimson Text', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   #51-57: HOVER & INTERACTION STATES
   ========================================================================== */

/* #51: Hover Lift Effect */
.cdx-lift {
  transition: transform var(--cdx-transition), box-shadow var(--cdx-transition);
}
.cdx-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--cdx-shadow-lg);
}

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

/* #53: Focus Glow for Inputs */
.cdx-focus-glow:focus,
.cdx-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--cdx-accent-glow);
  border-color: var(--cdx-accent);
}

/* #56: Cursor Hand on Interactive Elements */
.cdx-clickable,
.cdx-btn,
button.cdx-styled,
[role="button"].cdx-styled {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* #57: Link Fade Transition */
.cdx-link {
  color: var(--cdx-accent);
  text-decoration: none;
  transition: color var(--cdx-transition), opacity var(--cdx-transition);
}
.cdx-link:hover {
  opacity: 0.8;
}

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

/* #82: Visited Links */
.cdx-link:visited {
  color: color-mix(in srgb, var(--cdx-accent) 70%, var(--cdx-text) 30%);
}

/* ==========================================================================
   #54-55, 58-60: ANIMATIONS & TRANSITIONS
   ========================================================================== */

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

.cdx-skeleton {
  background: linear-gradient(
    90deg,
    var(--cdx-border) 25%,
    color-mix(in srgb, var(--cdx-border) 50%, var(--cdx-bg) 50%) 50%,
    var(--cdx-border) 75%
  );
  background-size: 200% 100%;
  animation: cdx-shimmer 1.5s infinite;
  border-radius: 4px;
}

/* #33: Skeleton UI - Gray Placeholder Blocks */
.cdx-skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}
.cdx-skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 1em;
}
.cdx-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.cdx-skeleton-card {
  height: 200px;
  border-radius: 8px;
}

/* #32: Pulse Loader Animation */
@keyframes cdx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.cdx-pulse {
  animation: cdx-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* #55: Menu Slide Animation */
.cdx-menu-slide {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--cdx-transition), transform var(--cdx-transition);
  pointer-events: none;
}
.cdx-menu-slide.cdx-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

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

/* #59: Toast Pop Animation */
@keyframes cdx-toast-pop {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cdx-toast-exit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(100%) scale(0.9);
  }
}

.cdx-toast {
  animation: cdx-toast-pop 0.3s ease forwards;
}
.cdx-toast.cdx-exit {
  animation: cdx-toast-exit 0.2s ease forwards;
}

/* #60: Progress Bar - Scroll Indicator */
.cdx-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--cdx-accent);
  z-index: var(--cdx-z-max);
  transition: width var(--cdx-transition-fast);
}

/* ==========================================================================
   #69, 77-79: SPACING & BUTTONS
   ========================================================================== */

/* #69: Whitespace Utilities */
.cdx-mb-0 { margin-bottom: 0; }
.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-mb-6 { margin-bottom: 3rem; }

.cdx-mt-0 { margin-top: 0; }
.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-p-0 { padding: 0; }
.cdx-p-1 { padding: 0.25rem; }
.cdx-p-2 { padding: 0.5rem; }
.cdx-p-3 { padding: 1rem; }
.cdx-p-4 { padding: 1.5rem; }

/* #77: Primary Button */
.cdx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all var(--cdx-transition);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.cdx-btn-primary {
  background: var(--cdx-primary);
  color: white;
}
.cdx-btn-primary:hover {
  background: var(--cdx-secondary);
}

.cdx-btn-accent {
  background: var(--cdx-accent);
  color: white;
}
.cdx-btn-accent:hover {
  background: color-mix(in srgb, var(--cdx-accent) 85%, black 15%);
}

.cdx-btn-outline {
  background: transparent;
  border: 1px solid var(--cdx-border);
  color: var(--cdx-text);
}
.cdx-btn-outline:hover {
  border-color: var(--cdx-accent);
  color: var(--cdx-accent);
}

.cdx-btn-ghost {
  background: transparent;
  color: var(--cdx-text);
}
.cdx-btn-ghost:hover {
  background: var(--cdx-accent-light);
}

/* #78: Touch Target - iOS Standard 44px */
.cdx-touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* ==========================================================================
   #71-76, 79: FORM ELEMENTS
   ========================================================================== */

/* #71: Inline Validation */
.cdx-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--cdx-border);
  border-radius: 6px;
  background: var(--cdx-bg);
  color: var(--cdx-text);
  transition: border-color var(--cdx-transition), box-shadow var(--cdx-transition);
}

.cdx-input:focus {
  outline: none;
  border-color: var(--cdx-accent);
  box-shadow: 0 0 0 3px var(--cdx-accent-glow);
}

.cdx-input.cdx-valid {
  border-color: var(--cdx-success);
}

.cdx-input.cdx-invalid {
  border-color: var(--cdx-error);
}

/* #75: Numeric Keypad */
.cdx-input-numeric {
  inputmode: numeric;
  font-variant-numeric: tabular-nums;
}

/* #76: Error Text */
.cdx-error-text {
  font-size: 0.75rem;
  color: var(--cdx-error);
  margin-top: 0.25rem;
}

.cdx-help-text {
  font-size: 0.75rem;
  color: var(--cdx-text-muted);
  margin-top: 0.25rem;
}

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

.cdx-float-label input,
.cdx-float-label textarea {
  padding-top: 1.25rem;
}

.cdx-float-label label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--cdx-text-muted);
  pointer-events: none;
  transition: all var(--cdx-transition);
}

.cdx-float-label input:focus ~ label,
.cdx-float-label input:not(:placeholder-shown) ~ label,
.cdx-float-label textarea:focus ~ label,
.cdx-float-label textarea:not(:placeholder-shown) ~ label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: 0.75rem;
  color: var(--cdx-accent);
}

/* #74: Password Eye Toggle */
.cdx-password-wrapper {
  position: relative;
}

.cdx-password-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cdx-text-muted);
  padding: 0.25rem;
}

.cdx-password-toggle:hover {
  color: var(--cdx-text);
}

/* ==========================================================================
   #80-90: NAVIGATION & LAYOUT
   ========================================================================== */

/* #80: Breadcrumbs */
.cdx-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--cdx-text-muted);
}

.cdx-breadcrumbs a {
  color: var(--cdx-text-muted);
  text-decoration: none;
  transition: color var(--cdx-transition);
}

.cdx-breadcrumbs a:hover {
  color: var(--cdx-accent);
}

.cdx-breadcrumbs .cdx-separator {
  color: var(--cdx-border);
}

.cdx-breadcrumbs .cdx-current {
  color: var(--cdx-text);
  font-weight: 500;
}

/* #83: Empty State */
.cdx-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cdx-spacer-2xl);
  text-align: center;
  color: var(--cdx-text-muted);
}

.cdx-empty-state svg {
  width: 120px;
  height: 120px;
  margin-bottom: var(--cdx-spacer-lg);
  opacity: 0.5;
}

.cdx-empty-state h3 {
  margin-bottom: var(--cdx-spacer-sm);
  color: var(--cdx-text);
}

/* #84: Custom 404 Overlay */
.cdx-404-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--cdx-bg);
  z-index: var(--cdx-z-max);
  text-align: center;
  padding: var(--cdx-spacer-xl);
}

.cdx-404-overlay h1 {
  font-size: 6rem;
  font-weight: 700;
  color: var(--cdx-accent);
  margin-bottom: var(--cdx-spacer-md);
}

/* #85: Search Position */
.cdx-search-pos {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* #86: Back to Top Button */
.cdx-back-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cdx-accent);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--cdx-transition);
  z-index: var(--cdx-z-fixed);
  box-shadow: var(--cdx-shadow-lg);
  -webkit-tap-highlight-color: transparent;
}

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

.cdx-back-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--cdx-shadow-glow);
}

/* Safe area for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cdx-back-top {
    bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}

/* #89: Modal Close - Backdrop */
.cdx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--cdx-z-modal-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cdx-transition), visibility var(--cdx-transition);
}

.cdx-modal-backdrop.cdx-open {
  opacity: 1;
  visibility: visible;
}

.cdx-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--cdx-bg);
  border-radius: 12px;
  padding: var(--cdx-spacer-xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  z-index: var(--cdx-z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all var(--cdx-transition);
  box-shadow: var(--cdx-shadow-lg);
}

.cdx-modal.cdx-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* ==========================================================================
   #91-100: IMAGES & MEDIA
   ========================================================================== */

/* #91: Lazy Load Blur-up */
.cdx-lazy {
  filter: blur(10px);
  transition: filter var(--cdx-transition-slow);
}

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

/* #92: Image Aspect Ratio Boxes */
.cdx-aspect-square { aspect-ratio: 1 / 1; }
.cdx-aspect-video { aspect-ratio: 16 / 9; }
.cdx-aspect-photo { aspect-ratio: 4 / 3; }
.cdx-aspect-portrait { aspect-ratio: 3 / 4; }

.cdx-aspect-box {
  position: relative;
  overflow: hidden;
}

.cdx-aspect-box img,
.cdx-aspect-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* #100: Selection Color */
.cdx-selection::selection,
.cdx-selection *::selection {
  background: var(--cdx-accent);
  color: white;
}

/* ==========================================================================
   #94-97: RESPONSIVE & MOBILE
   ========================================================================== */

/* #94: Tablet Breakpoint */
@media (max-width: 768px) {
  :root {
    --cdx-spacer: 0.875rem;
  }
  
  .cdx-h1 { font-size: 2rem; }
  .cdx-h2 { font-size: 1.75rem; }
  .cdx-h3 { font-size: 1.5rem; }
  
  .cdx-hide-mobile { display: none !important; }
  
  .cdx-modal {
    max-width: 95vw;
    padding: var(--cdx-spacer-lg);
  }
}

@media (min-width: 769px) {
  .cdx-hide-desktop { display: none !important; }
}

/* #95: Fast Tap - Touch Action */
.cdx-fast-tap {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari Specific */
@supports (-webkit-touch-callout: none) {
  .cdx-ios-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .cdx-ios-safe-top {
    padding-top: env(safe-area-inset-top);
  }
}

/* #97: External Link Icon */
.cdx-external-link::after {
  content: '';
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.25em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* ==========================================================================
   #42: PRINT STYLES
   ========================================================================== */

@media print {
  .cdx-no-print,
  .cdx-fab,
  .cdx-back-top,
  .cdx-toast-container,
  .cdx-modal-backdrop,
  .cdx-modal,
  nav,
  footer,
  .cdx-sidebar {
    display: none !important;
  }
  
  .cdx-print-only {
    display: block !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: black;
    background: white;
  }
  
  a {
    color: black;
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  .cdx-page-break {
    page-break-before: always;
  }
}

/* ==========================================================================
   #2, 44: FAB & FEEDBACK WIDGETS
   ========================================================================== */

/* #2: Floating Action Button */
.cdx-fab {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cdx-accent);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cdx-shadow-lg);
  z-index: var(--cdx-z-fixed);
  transition: all var(--cdx-transition);
  -webkit-tap-highlight-color: transparent;
}

.cdx-fab:hover {
  transform: scale(1.1);
  box-shadow: var(--cdx-shadow-glow);
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cdx-fab {
    bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}

/* FAB Menu */
.cdx-fab-menu {
  position: fixed;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  left: 2rem;
  background: var(--cdx-bg);
  border-radius: 12px;
  padding: var(--cdx-spacer-sm);
  box-shadow: var(--cdx-shadow-lg);
  z-index: var(--cdx-z-fixed);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--cdx-transition);
}

.cdx-fab-menu.cdx-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cdx-fab-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--cdx-transition);
  white-space: nowrap;
}

.cdx-fab-menu-item:hover {
  background: var(--cdx-accent-light);
}

/* #44: Feedback Widget */
.cdx-feedback {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--cdx-bg);
  border: 1px solid var(--cdx-border);
  border-radius: 20px;
  font-size: 0.875rem;
}

.cdx-feedback-btn {
  padding: 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  transition: all var(--cdx-transition);
}

.cdx-feedback-btn:hover {
  background: var(--cdx-accent-light);
}

.cdx-feedback-btn.cdx-selected {
  color: var(--cdx-accent);
}

/* ==========================================================================
   #3: COMMAND PALETTE
   ========================================================================== */

.cdx-command-palette {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: 90%;
  max-width: 600px;
  background: var(--cdx-bg);
  border-radius: 12px;
  box-shadow: var(--cdx-shadow-lg);
  z-index: var(--cdx-z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all var(--cdx-transition);
  overflow: hidden;
}

.cdx-command-palette.cdx-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

.cdx-command-input {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1.125rem;
  border: none;
  border-bottom: 1px solid var(--cdx-border);
  background: transparent;
  color: var(--cdx-text);
}

.cdx-command-input:focus {
  outline: none;
}

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

.cdx-command-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  transition: background var(--cdx-transition);
}

.cdx-command-item:hover,
.cdx-command-item.cdx-active {
  background: var(--cdx-accent-light);
}

.cdx-command-item-icon {
  width: 20px;
  height: 20px;
  color: var(--cdx-text-muted);
}

.cdx-command-shortcut {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--cdx-text-muted);
  font-family: var(--cdx-font-mono);
}

/* ==========================================================================
   #10: TOAST SYSTEM
   ========================================================================== */

.cdx-toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: var(--cdx-z-toast);
  pointer-events: none;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cdx-toast-container {
    bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}

.cdx-toast-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--cdx-primary);
  color: white;
  border-radius: 8px;
  box-shadow: var(--cdx-shadow-lg);
  pointer-events: auto;
  animation: cdx-toast-pop 0.3s ease forwards;
  max-width: 400px;
}

.cdx-toast-item.cdx-exit {
  animation: cdx-toast-exit 0.2s ease forwards;
}

.cdx-toast-item.cdx-success {
  background: var(--cdx-success);
}

.cdx-toast-item.cdx-error {
  background: var(--cdx-error);
}

.cdx-toast-item.cdx-warning {
  background: var(--cdx-warning);
  color: var(--cdx-primary);
}

.cdx-toast-close {
  margin-left: auto;
  padding: 0.25rem;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.cdx-toast-close:hover {
  opacity: 1;
}

/* ==========================================================================
   #17: RECENT VIEWS WIDGET
   ========================================================================== */

.cdx-recent-views {
  background: var(--cdx-bg);
  border: 1px solid var(--cdx-border);
  border-radius: 8px;
  padding: var(--cdx-spacer-md);
}

.cdx-recent-views-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cdx-text-muted);
  margin-bottom: var(--cdx-spacer-sm);
}

.cdx-recent-views-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--cdx-text);
  text-decoration: none;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--cdx-border);
}

.cdx-recent-views-item:last-child {
  border-bottom: none;
}

.cdx-recent-views-item:hover {
  color: var(--cdx-accent);
}

/* ==========================================================================
   #18: ONBOARDING CHECKLIST
   ========================================================================== */

.cdx-onboarding {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 320px;
  background: var(--cdx-bg);
  border-radius: 12px;
  box-shadow: var(--cdx-shadow-lg);
  z-index: var(--cdx-z-fixed);
  overflow: hidden;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cdx-onboarding {
    bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}

.cdx-onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--cdx-accent);
  color: white;
}

.cdx-onboarding-progress {
  height: 4px;
  background: var(--cdx-border);
}

.cdx-onboarding-progress-bar {
  height: 100%;
  background: var(--cdx-accent);
  transition: width var(--cdx-transition);
}

.cdx-onboarding-list {
  padding: var(--cdx-spacer-md);
}

.cdx-onboarding-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--cdx-border);
}

.cdx-onboarding-item:last-child {
  border-bottom: none;
}

.cdx-onboarding-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--cdx-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cdx-onboarding-item.cdx-complete .cdx-onboarding-check {
  background: var(--cdx-success);
  border-color: var(--cdx-success);
  color: white;
}

/* ==========================================================================
   #22: ZEN MODE
   ========================================================================== */

.cdx-zen-mode {
  position: fixed;
  inset: 0;
  background: var(--cdx-bg);
  z-index: var(--cdx-z-max);
  overflow-y: auto;
  padding: var(--cdx-spacer-2xl);
}

.cdx-zen-mode-content {
  max-width: var(--cdx-max-width);
  margin: 0 auto;
}

.cdx-zen-mode-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cdx-border);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--cdx-z-max) + 1);
}

/* ==========================================================================
   #23: READ TIME INDICATOR
   ========================================================================== */

.cdx-read-time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--cdx-text-muted);
}

.cdx-read-time svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   #24, 99: CODE COPY BUTTON
   ========================================================================== */

.cdx-code-block {
  position: relative;
}

.cdx-code-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  background: var(--cdx-secondary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--cdx-transition);
}

.cdx-code-block:hover .cdx-code-copy {
  opacity: 1;
}

.cdx-code-copy:hover {
  background: var(--cdx-accent);
}

.cdx-code-copy.cdx-copied {
  background: var(--cdx-success);
}

/* ==========================================================================
   #31: NIGHT SHIFT OVERLAY
   ========================================================================== */

.cdx-night-shift {
  position: fixed;
  inset: 0;
  background: rgba(255, 180, 100, 0.1);
  pointer-events: none;
  z-index: var(--cdx-z-max);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1s ease;
}

.cdx-night-shift.cdx-active {
  opacity: 1;
}

/* ==========================================================================
   #101-120: ANTICIPATORY LAYER
   ========================================================================== */

/* #101: Velocity Type - Fast scroll increases header weight */
.cdx-velocity-active h1,
.cdx-velocity-active h2,
.cdx-velocity-active h3 {
  font-weight: 800;
  transition: font-weight var(--cdx-transition);
}

/* #102-103: Trajectory Glow & Magnet Cursor */
.cdx-magnet-target {
  transition: transform var(--cdx-transition-fast), box-shadow var(--cdx-transition-fast);
}

.cdx-magnet-target.cdx-attracted {
  box-shadow: var(--cdx-shadow-glow);
}

/* #106: Circadian Background */
.cdx-circadian {
  transition: background-color 30s ease;
}

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

.cdx-focus-tunnel *:focus,
.cdx-focus-tunnel *:focus-within {
  opacity: 1;
}

/* #108: Rage Click Help */
.cdx-rage-help {
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  background: var(--cdx-warning);
  color: var(--cdx-primary);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  z-index: var(--cdx-z-toast);
  animation: cdx-toast-pop 0.3s ease forwards;
}

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

/* #111: Patina Effect */
.cdx-patina {
  transition: background-color var(--cdx-transition-slow);
}

.cdx-patina[data-usage="high"] {
  background-color: color-mix(in srgb, var(--cdx-accent) 10%, transparent 90%);
}

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

/* #116: Link Peek Preview */
.cdx-link-peek {
  position: absolute;
  width: 300px;
  height: 200px;
  background: var(--cdx-bg);
  border: 1px solid var(--cdx-border);
  border-radius: 8px;
  box-shadow: var(--cdx-shadow-lg);
  overflow: hidden;
  z-index: var(--cdx-z-tooltip);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--cdx-transition);
}

.cdx-link-peek.cdx-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cdx-link-peek iframe {
  width: 100%;
  height: 100%;
  border: none;
  transform: scale(0.5);
  transform-origin: top left;
  width: 200%;
  height: 200%;
}

/* #117: Changelog Badge */
.cdx-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--cdx-accent);
  color: white;
  border-radius: 10px;
  margin-left: 0.5rem;
}

/* ==========================================================================
   #121-140: PSYCHOLOGICAL CODEX (Marlowe Features)
   ========================================================================== */

/* #124: Identity Toggle - Blur Noise */
.cdx-noise {
  transition: filter var(--cdx-transition);
}

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

/* #125: Manifesto Gate - Blur Content */
.cdx-gated-content {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  transition: filter var(--cdx-transition);
}

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

/* #128: Silent Badge (Social Proof) */
.cdx-silent-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cdx-text-muted);
  background: var(--cdx-bg-warm);
  border-radius: 4px;
  font-style: italic;
}

.cdx-silent-badge::before {
  content: '"';
  font-size: 1.25rem;
  color: var(--cdx-accent);
}

/* #129: Peer Notes - Handwritten Annotations */
.cdx-peer-notes {
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  color: var(--cdx-accent);
  font-size: 1.125rem;
  transform: rotate(-2deg);
  margin-left: 1rem;
  opacity: 0;
  transition: opacity var(--cdx-transition);
}

.cdx-show-annotations .cdx-peer-notes {
  opacity: 1;
}

/* #131: Quiet Room */
.cdx-quiet-room {
  position: fixed;
  inset: 0;
  background: var(--cdx-bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--cdx-z-max);
  padding: var(--cdx-spacer-2xl);
  opacity: 0;
  visibility: hidden;
  transition: all var(--cdx-transition-slow);
}

.cdx-quiet-room.cdx-open {
  opacity: 1;
  visibility: visible;
}

.cdx-quiet-room-content {
  max-width: var(--cdx-max-width);
  text-align: center;
  font-family: var(--cdx-font-serif);
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--cdx-text);
}

/* #132: Disqualify Warning */
.cdx-disqualify {
  background: var(--cdx-bg-warm);
  border-left: 4px solid var(--cdx-warning);
  padding: var(--cdx-spacer-md);
  margin-bottom: var(--cdx-spacer-lg);
  font-size: 0.875rem;
  color: var(--cdx-text-light);
  font-style: italic;
}

/* #133: Dated Window */
.cdx-dated-window {
  text-align: center;
  padding: var(--cdx-spacer-xl);
  background: var(--cdx-bg-warm);
  border-radius: 8px;
}

.cdx-dated-window.cdx-closed {
  opacity: 0.7;
}

.cdx-dated-window.cdx-closed::after {
  content: 'Window Closed';
  display: block;
  margin-top: var(--cdx-spacer-md);
  font-weight: 600;
  color: var(--cdx-error);
}

/* #134: Underwriting Mode (Authority) */
.cdx-underwriting-mode table,
.cdx-underwriting-mode .highcharts-container,
.cdx-underwriting-mode .recharts-wrapper,
.cdx-underwriting-mode svg:not(.cdx-icon) {
  filter: grayscale(100%);
  font-family: var(--cdx-font-mono);
}

/* #137: Privacy Banner (Affirmation) */
.cdx-privacy-banner {
  background: var(--cdx-primary);
  color: white;
  text-align: center;
  padding: var(--cdx-spacer-md);
  font-size: 0.875rem;
  font-weight: 500;
}

/* #138: Pacing Tooltip */
.cdx-pacing-tooltip {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--cdx-bg);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: var(--cdx-shadow-lg);
  font-family: var(--cdx-font-serif);
  font-style: italic;
  z-index: var(--cdx-z-tooltip);
  opacity: 0;
  visibility: hidden;
  transition: all var(--cdx-transition);
}

.cdx-pacing-tooltip.cdx-visible {
  opacity: 1;
  visibility: visible;
}

/* #139: Smart 404 - My Fault */
.cdx-smart-404 {
  text-align: center;
  padding: var(--cdx-spacer-2xl);
}

.cdx-smart-404 h1 {
  font-size: 8rem;
  font-weight: 700;
  color: var(--cdx-accent);
  margin-bottom: var(--cdx-spacer-md);
}

.cdx-smart-404 p {
  font-family: var(--cdx-font-serif);
  font-size: 1.25rem;
  color: var(--cdx-text-muted);
}

/* #140: Patient Tag */
.cdx-patient-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--cdx-text-muted);
  font-style: italic;
}

.cdx-patient-tag::before {
  content: '∞';
  font-size: 1rem;
  color: var(--cdx-accent);
}

/* ==========================================================================
   #45: CONFETTI CANVAS
   ========================================================================== */

.cdx-confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--cdx-z-max);
}

/* ==========================================================================
   #49: PERMISSION UI - DISABLED BUTTON TOOLTIP
   ========================================================================== */

.cdx-permission-wrapper {
  position: relative;
  display: inline-block;
}

.cdx-permission-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  background: var(--cdx-primary);
  color: white;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--cdx-transition);
  margin-bottom: 0.5rem;
}

.cdx-permission-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--cdx-primary);
}

.cdx-permission-wrapper:hover .cdx-permission-tooltip {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   #121-123, 126-127: RECIPROCITY MODALS
   ========================================================================== */

.cdx-reciprocity-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--cdx-z-max);
  opacity: 0;
  visibility: hidden;
  transition: all var(--cdx-transition);
}

.cdx-reciprocity-modal.cdx-open {
  opacity: 1;
  visibility: visible;
}

.cdx-reciprocity-content {
  background: var(--cdx-bg);
  padding: var(--cdx-spacer-2xl);
  border-radius: 12px;
  max-width: 480px;
  text-align: center;
  transform: scale(0.9);
  transition: transform var(--cdx-transition);
}

.cdx-reciprocity-modal.cdx-open .cdx-reciprocity-content {
  transform: scale(1);
}

/* #123: Exit Intent Overlay */
.cdx-exit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--cdx-z-max);
  opacity: 0;
  visibility: hidden;
  transition: all var(--cdx-transition);
}

.cdx-exit-overlay.cdx-visible {
  opacity: 1;
  visibility: visible;
}

.cdx-exit-modal {
  background: var(--cdx-bg);
  padding: var(--cdx-spacer-2xl);
  border-radius: 16px;
  max-width: 420px;
  text-align: center;
  position: relative;
  transform: scale(0.9) translateY(20px);
  transition: transform var(--cdx-transition);
}

.cdx-exit-overlay.cdx-visible .cdx-exit-modal {
  transform: scale(1) translateY(0);
}

.cdx-exit-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--cdx-text-muted);
}

.cdx-exit-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.cdx-exit-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--cdx-border);
  border-radius: 8px;
}

.cdx-exit-form button {
  padding: 0.75rem 1.5rem;
  background: var(--cdx-accent);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.cdx-exit-dismiss {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--cdx-text-muted);
  cursor: pointer;
}

/* #122: Welcome Prime Modal */
.cdx-welcome-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--cdx-z-max);
  opacity: 0;
  visibility: hidden;
  transition: all var(--cdx-transition);
}

.cdx-welcome-modal.cdx-visible {
  opacity: 1;
  visibility: visible;
}

.cdx-welcome-content {
  background: var(--cdx-bg);
  padding: var(--cdx-spacer-2xl);
  border-radius: 16px;
  max-width: 400px;
  text-align: center;
  position: relative;
  transform: scale(0.9);
  transition: transform var(--cdx-transition);
}

.cdx-welcome-modal.cdx-visible .cdx-welcome-content {
  transform: scale(1);
}

.cdx-welcome-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--cdx-text-muted);
}

.cdx-welcome-subtitle {
  color: var(--cdx-text-muted);
  font-style: italic;
}

.cdx-welcome-cta {
  margin-top: 1.5rem;
  padding: 0.75rem 2rem;
  background: var(--cdx-accent);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

/* #116: Link Peek Preview */
.cdx-link-peek {
  position: absolute;
  width: 400px;
  height: 300px;
  background: var(--cdx-bg);
  border: 1px solid var(--cdx-border);
  border-radius: 12px;
  box-shadow: var(--cdx-shadow-lg);
  z-index: var(--cdx-z-popover);
  overflow: hidden;
}

.cdx-link-peek-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--cdx-secondary);
  color: var(--cdx-text-light);
  font-size: 0.75rem;
}

.cdx-link-peek-close {
  background: none;
  border: none;
  color: var(--cdx-text-light);
  cursor: pointer;
  font-size: 1rem;
}

.cdx-link-peek iframe {
  width: 100%;
  height: calc(100% - 32px);
  border: none;
}

/* #48: Pin Button */
.cdx-pin-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--cdx-bg);
  border: 1px solid var(--cdx-border);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--cdx-transition);
}

[data-pinnable]:hover .cdx-pin-btn {
  opacity: 1;
}

.cdx-pinned {
  border-left: 3px solid var(--cdx-accent);
  background: var(--cdx-accent-light);
}

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

.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;
}

.cdx-flex { display: flex; }
.cdx-flex-col { flex-direction: column; }
.cdx-items-center { align-items: center; }
.cdx-justify-center { justify-content: center; }
.cdx-justify-between { justify-content: space-between; }
.cdx-gap-1 { gap: 0.25rem; }
.cdx-gap-2 { gap: 0.5rem; }
.cdx-gap-3 { gap: 1rem; }
.cdx-gap-4 { gap: 1.5rem; }

.cdx-w-full { width: 100%; }
.cdx-h-full { height: 100%; }
.cdx-min-h-screen { min-height: 100vh; }

.cdx-text-center { text-align: center; }
.cdx-text-left { text-align: left; }
.cdx-text-right { text-align: right; }

.cdx-hidden { display: none; }
.cdx-block { display: block; }
.cdx-inline { display: inline; }
.cdx-inline-block { display: inline-block; }

.cdx-relative { position: relative; }
.cdx-absolute { position: absolute; }
.cdx-fixed { position: fixed; }

.cdx-overflow-hidden { overflow: hidden; }
.cdx-overflow-auto { overflow: auto; }

.cdx-rounded { border-radius: 6px; }
.cdx-rounded-lg { border-radius: 12px; }
.cdx-rounded-full { border-radius: 9999px; }

.cdx-border { border: 1px solid var(--cdx-border); }
.cdx-border-t { border-top: 1px solid var(--cdx-border); }
.cdx-border-b { border-bottom: 1px solid var(--cdx-border); }

.cdx-shadow { box-shadow: var(--cdx-shadow); }
.cdx-shadow-lg { box-shadow: var(--cdx-shadow-lg); }

.cdx-transition { transition: all var(--cdx-transition); }
.cdx-transition-fast { transition: all var(--cdx-transition-fast); }

.cdx-opacity-0 { opacity: 0; }
.cdx-opacity-50 { opacity: 0.5; }
.cdx-opacity-100 { opacity: 1; }

.cdx-pointer-events-none { pointer-events: none; }
.cdx-pointer-events-auto { pointer-events: auto; }

.cdx-select-none { user-select: none; }
.cdx-select-all { user-select: all; }

/* ==========================================================================
   END OF MASTER CODEX FINANCIAL CSS
   ========================================================================== */