*, *::before, *::after {
      box-sizing: border-box;
    }

    :root {
      /* ========================================
         MUSTANG GT THEME - Design System
         Phase 1: Foundation (Nov 2025)
         UX Design Guild + Publication Design Guild
         ======================================== */
      
      /* ===== COLORS: Mustang GT Palette ===== */
      /* Base metallic grays - RGB triplets for rgba() usage */
      --gt-charcoal-rgb: 30, 41, 59;         /* Charcoal gray */
      --gt-midnight-rgb: 15, 23, 42;         /* Midnight blue */
      --gt-shadow-rgb: 8, 13, 28;           /* Deep shadow */
      
      /* Accent colors - RGB triplets */
      --gt-focus-blue-rgb: 56, 189, 248;       /* Sky blue for focus */
      --gt-focus-red-rgb: 239, 68, 68;        /* Alert red */
      --gt-focus-gold-rgb: 251, 191, 36;     /* Warning gold */
      
      /* Opacity levels - use sparingly */
      --opacity-subtle: 0.15;     /* Barely visible highlights */
      --opacity-light: 0.3;       /* Light backgrounds */
      --opacity-medium: 0.6;      /* Inactive states */
      --opacity-heavy: 0.9;       /* Active cards */
      --opacity-solid: 0.95;      /* Near-solid */
      
      /* ===== DEBUG COLORS - REMOVED ===== */
      /* Bright audit colors removed - now using theme-based colors */
      /* See themes/dark.css and themes/light.css for debug token mappings */
      /* Legacy --DEBUG-* tokens mapped in semantic layer below */
      
      /* ===== STANDARD SHADOWS (3 levels) ===== */
      --shadow-subtle: 0 2px 4px rgba(15, 23, 42, 0.08);    /* Cards, subtle depth */
      --shadow-medium: 0 4px 12px rgba(15, 23, 42, 0.12);   /* Buttons, interactive */
      --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.3);   /* Modals, major elevation */
      
      /* ===== SEMANTIC COLORS: Context-specific UI ===== */
      /* Text colors - hierarchy */
      --text-primary: #f8fafc;       /* Almost white */
      --text-secondary: #e2e8f0;     /* Light gray */
      --text-tertiary: #94a3b8;      /* Medium gray */
      --text-muted: #64748b;         /* Dim gray */
      
      /* Interactive elements */
      --btn-primary-bg: #3b82f6;     /* Blue */
      --btn-primary-hover: #2563eb;  /* Darker blue */
      
      /* Borders & dividers */
      --border-subtle: #334155;      /* Gray border */
      --border-focus: #38bdf8;       /* Blue focus */
      
      /* Section delineators - Theme-aware manuscript structure colors */
      /* These reference base theme colors (adapt to dark/light) */
      --section-fm000-rgb: var(--base-section-fm000-rgb);   /* Purple - Front Matter */
      --section-fm100-rgb: var(--base-section-fm100-rgb);   /* Green - Unit 1 */
      --section-fm200-rgb: var(--base-section-fm200-rgb);   /* Orange - Unit 2 */
      --section-fm300-rgb: var(--base-section-fm300-rgb);   /* Blue - Unit 3 */
      --section-fm400-rgb: var(--base-section-fm400-rgb);   /* Yellow - Unit 4 */
      --section-fm500-rgb: var(--base-section-fm500-rgb);   /* Pink - Unit 5 */
      --section-fm600-rgb: var(--base-section-fm600-rgb);   /* Teal - Unit 6 */
      --section-fm700-rgb: var(--base-section-fm700-rgb);   /* Gold - Back Matter */
      
      /* ===== SPACING: Golden Ratio (φ ≈ 1.618) ===== */
      /* Fibonacci sequence for natural harmony */
      --space-xs: 8px;       /* Base unit */
      --space-sm: 13px;      /* 8 × φ ≈ 13 */
      --space-md: 21px;      /* 13 × φ ≈ 21 */
      --space-lg: 34px;      /* 21 × φ ≈ 34 */
      --space-xl: 55px;      /* 34 × φ ≈ 55 */
      
      /* ===== TYPOGRAPHY: Golden Ratio Scale ===== */
      /* Musical intervals for readability */
      --text-xs: 0.618rem;   /* 9.888px - φ⁻¹ */
      --text-sm: 0.75rem;    /* 12px */
      --text-base: 1rem;     /* 16px - foundation */
      --text-md: 1.25rem;    /* 20px */
      --text-lg: 1.618rem;   /* 25.888px - φ */
      --text-xl: 2rem;       /* 32px */
      --text-2xl: 2.618rem;  /* 41.888px - φ² */
      
      /* ===== Z-INDEX: Layering System ===== */
      /* Predictable stacking for spatial memory */
      --z-base: 0;           /* Default layer */
      --z-panel: 10;         /* Bento panels */
      --z-drawer: 20;        /* Expandable UI */
      --z-header: 30;        /* Persistent chrome */
      --z-modal: 40;         /* Dialogs */
      --z-toast: 50;         /* Notifications */
      --z-debug: 9999;       /* Dev tools only */
      
      /* ===== LEGACY: Preserve existing ===== */
      --page-thumb-height: 170px;
    }

    /* ============================================
       SEMANTIC LAYER - Universal Tokens
       References base primitives from theme files
       Same names work across ALL themes
       ============================================ */
    :root {
      /* ===== SEMANTIC COLORS ===== */
      /* Backgrounds */
      --color-bg-primary: var(--base-bg-primary);
      --color-bg-secondary: var(--base-bg-secondary);
      --color-bg-tertiary: var(--base-bg-tertiary);
      --color-bg-panel: rgba(var(--base-bg-secondary-rgb), var(--opacity-light));
      --color-bg-panel-solid: var(--base-bg-secondary);
      --color-bg-header: rgba(var(--base-bg-primary-rgb), var(--opacity-solid));
      --color-bg-overlay: rgba(var(--base-bg-primary-rgb), var(--opacity-heavy));
      
      /* Content Viewers - Modals, panels, containers */
      --color-viewer-bg: var(--base-bg-secondary);
      --color-viewer-border: var(--color-border-subtle);
      --color-viewer-header-bg: var(--base-bg-tertiary);
      --color-viewer-header-text: var(--color-text-primary);
      
      /* Text */
      --color-text-primary: var(--base-text-primary);
      --color-text-secondary: var(--base-text-secondary);
      --color-text-tertiary: var(--base-text-tertiary);
      --color-text-muted: var(--base-text-muted);
      --color-text-inverted: var(--base-bg-primary);
      
      /* Borders */
      --color-border-subtle: var(--base-border-subtle);
      --color-border-focus: var(--base-border-focus);
      --color-border-panel: rgba(var(--base-border-subtle), var(--opacity-medium));
      
      /* Interactive States */
      --color-interactive-primary: var(--base-accent-blue);
      --color-interactive-hover: rgba(var(--base-accent-blue-rgb), var(--opacity-heavy));
      --color-interactive-focus: var(--base-accent-blue);
      --color-interactive-danger: var(--base-accent-red);
      --color-interactive-warning: var(--base-accent-orange);
      --color-interactive-success: var(--base-accent-green);
      
      /* Status Colors */
      --color-status-error: var(--base-accent-red);
      --color-status-warning: var(--base-accent-orange);
      --color-status-success: var(--base-accent-green);
      --color-status-info: var(--base-accent-blue);
      
      /* Debug Colors (temporary - map to base debug) */
      --color-debug-magenta: var(--base-debug-magenta);
      --color-debug-cyan: var(--base-debug-cyan);
      --color-debug-red: var(--base-debug-red);
      --color-debug-yellow: var(--base-debug-yellow);
      --color-debug-lime: var(--base-debug-lime);
      --color-debug-orange: var(--base-debug-orange);
      --color-debug-blue: var(--base-debug-blue);
      
      /* ===== LEGACY MAPPINGS (for backward compatibility) ===== */
      /* Keep old variable names pointing to new semantic tokens */
      --gt-charcoal-rgb: var(--base-bg-secondary-rgb);
      --gt-midnight-rgb: var(--base-bg-primary-rgb);
      --gt-shadow-rgb: var(--base-bg-tertiary-rgb);
      --gt-focus-blue-rgb: var(--base-accent-blue-rgb);
      --gt-focus-red-rgb: var(--base-accent-red-rgb);
      --gt-focus-gold-rgb: var(--base-accent-yellow-rgb);
      --text-primary: var(--color-text-primary);
      --text-secondary: var(--color-text-secondary);
      --text-tertiary: var(--color-text-tertiary);
      --text-muted: var(--color-text-muted);
      --btn-primary-bg: var(--color-interactive-primary);
      --btn-primary-hover: var(--color-interactive-hover);
      --border-subtle: var(--color-border-subtle);
      --border-focus: var(--color-border-focus);
      --DEBUG-text-primary: var(--color-debug-magenta);
      --DEBUG-text-dark: var(--color-debug-cyan);
      --DEBUG-bg-dark: var(--color-debug-red);
      --DEBUG-bg-light: var(--base-bg-secondary);
      --DEBUG-border: var(--base-border);
      --DEBUG-accent: var(--base-accent-blue);
      --DEBUG-focus: var(--color-debug-blue);
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--DEBUG-bg-light);
    }
    
    /* =============================================
       CONTENT VIEWER BASE CLASS - DRY
       Unified styling for all modals, panels, containers
       ============================================= */
    
    /* Base viewer container - All content viewers inherit this */
    .scope-container,
    .modal-content,
    .arch-modal,
    .sai-container,
    .dimension-explanation,
    .dimension-metrics,
    .md-reader-modal,
    .logos-modal,
    .semantic-viewer-container,
    .error-boundary-content,
    .system-defense-modal,
    .persona-chat-panel,
    .persona-message.persona .persona-message-content,
    .persona-chat-input,
    .layer-info-panel {
      background: var(--color-viewer-bg);
      border-radius: 12px;
    }
    
    /* =============================================
       HEADER ARCHITECTURE - DRY
       All headers (bento, module, viewer, modal) use same base
       ============================================= */
    
    /* Base header - All headers inherit this (COMPACT for space efficiency) */
    .header,
    .viewer-header,
    .modal-header,
    .module-row-header,
    .scope-header,
    .sai-header,
    .arch-modal-header,
    .md-reader-modal-header,
    .md-reader-sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 10px;  /* Compact - orange header efficiency */
      background: var(--color-viewer-header-bg);
      color: var(--color-viewer-header-text);
      border-radius: 8px 8px 0 0;
    }
    
    /* Header titles - consistent sizing (COMPACT) */
    .header h2,
    .header h3,
    .viewer-header h3,
    .modal-header h2,
    .module-row-header h3 {
      margin: 0;
      font-size: 0.875rem;  /* Smaller for compactness */
      font-weight: 600;
      line-height: 1.2;
      color: var(--color-text-primary);
    }
    
    /* =============================================
       BUTTON ARCHITECTURE - DRY
       RULE: Icon/symbol only, NO text labels
       RULE: Tooltips via title attribute
       RULE: Abbreviate all actions
       ============================================= */
    
    /* Base button - Icon-only with hover tooltip (RADIUSED, not oval) */
    .btn,
    .btn-close,
    .info-button,
    .module-row-toggle,
    button[title] {
      /* Layout - COMPACT */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      min-width: 26px;
      min-height: 26px;
      
      /* Visual - RADIUSED corners (not oval/pill) */
      background: var(--color-interactive-primary);
      color: var(--color-text-primary);
      border: 1px solid var(--color-border-subtle);
      border-radius: 6px;  /* Radiused - matches theme, NOT 50% oval */
      
      /* Behavior */
      cursor: pointer;
      transition: all 0.15s ease;
      
      /* Typography - Icons only, no text */
      font-size: 13px;  /* Compact */
      font-weight: 600;
      line-height: 1;
    }
    
    .btn:hover,
    .btn-close:hover,
    .info-button:hover,
    .module-row-toggle:hover {
      background: var(--color-interactive-hover);
      transform: translateY(-1px);
      box-shadow: var(--shadow-subtle);
    }
    
    /* Icon-only buttons - COMPACT */
    .btn-icon-only {
      padding: 5px;
      min-width: 28px;
      min-height: 28px;
    }
    
    /* Button groups in headers */
    .header-actions {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    
    #root {
      width: 100%;
      height: 100vh;
    }
    
    .dashboard {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .header {
      background-color: rgba(var(--gt-midnight-rgb), var(--opacity-solid));
      color: var(--text-primary);
      padding: 1rem;
      width: 100%;
      flex-shrink: 0;
    }
    
.header h2 {
      margin: 0;
    }

.page-strip-container {
      margin: 1rem 0 1.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--color-border-subtle);
      position: relative;
      width: 100%;
      flex-shrink: 0;
    }

    /* Scroll fade indicators - show there's more content */
    .page-strip-container::before,
    .page-strip-container::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0.5rem;
      width: 60px;
      pointer-events: none;
      z-index: 2;
    }

    .page-strip-container::before {
      left: 0;
      background: linear-gradient(90deg, var(--color-bg-primary) 0%, transparent 100%);
    }

    .page-strip-container::after {
      right: 0;
      background: linear-gradient(270deg, var(--color-bg-primary) 0%, transparent 100%);
    }

    .page-strip-warning {
      background: var(--color-status-warning);
      color: var(--color-text-primary);
      padding: 0.35rem 0.75rem;
      border-radius: 8px;
      font-size: 0.8rem;
      margin-bottom: 0.35rem;
    }

.page-strip-warning code {
      background: var(--color-bg-tertiary);
      color: var(--color-text-primary);
      padding: 0 0.35rem;
      border-radius: 4px;
    }

.page-strip-warning--error {
      background: var(--color-status-error);
      color: var(--color-text-primary);
    }

.page-strip-scroll {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.75rem;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 0.5rem;
      max-width: 100%;
      align-items: flex-start;
      scroll-behavior: auto;
      cursor: grab;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
      -webkit-user-select: none; /* Prevent text selection while dragging */
      user-select: none;
    }

/* Hide scrollbar for WebKit browsers (Chrome, Safari) */
.page-strip-scroll::-webkit-scrollbar {
      display: none;
    }

.page-strip-card {
      min-width: 160px;
      max-width: 220px;
      height: 120px;
      flex: 0 0 auto;
      border-radius: 12px;
      padding: 0.75rem;
      background: var(--color-bg-secondary);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      font: inherit;
      text-align: left;
    }

.page-strip-card:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
    }

.page-strip-card.status-complete {
      border-color: var(--color-status-success);
    }

.page-strip-card.status-warning {
      border-color: var(--color-status-warning);
    }

.page-strip-card.status-critical {
      border-color: var(--color-status-error);
    }

.page-strip-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text-secondary);
    }

.page-strip-title {
      font-weight: 600;
      font-size: 0.95rem;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--color-text-primary);
    }

.page-strip-meta {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: var(--color-text-tertiary);
    }

    /* Section headers for modules view */
    .page-strip-section-header {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.75rem;
      margin-bottom: 0.5rem;
      border-left: 3px solid var(--color-accent-primary);
      background: var(--color-bg-tertiary);
      border-radius: 0 8px 8px 0;
    }

    .page-strip-section-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text-secondary);
      font-weight: 600;
    }

    .page-strip-section-title {
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.2;
      color: var(--color-text-primary);
    }

    .page-strip-section-meta {
      font-size: 0.75rem;
      color: var(--color-text-tertiary);
    }

.page-thumbnail-wrapper {
      width: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.15rem;
      margin-right: 0.5rem;
    }

.page-thumbnail-card {
      /* Size */
      width: 160px;
      height: var(--page-thumb-height, 170px);
      flex: 0 0 160px;
      
      /* Inherit bento-container styling */
      border-radius: 12px; /* Same as .bento-container */
      border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.25); /* Same as .bento-container */
      background: rgba(var(--gt-midnight-rgb), var(--opacity-light)); /* Same as .bento-container */
      box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(var(--gt-focus-blue-rgb), 0.05); /* Same as .bento-container */
      
      /* Layout */
      padding: 0.3rem 0.4rem 0.2rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.15rem;
      cursor: pointer;
      
      /* Transitions */
      transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    }

.page-thumbnail-card:hover {
      transform: translateY(-1px);
      border-color: var(--border-focus);
      box-shadow: var(--shadow-medium);
    }

.page-thumbnail-image {
      width: 100%;
      height: 150px;
      display: block;
      border-radius: 6px;
      border: 1px solid var(--color-border-subtle);
      background: var(--color-bg-tertiary);
      object-fit: cover;
    }

/* Thumbnail loading states container */
.page-thumbnail-image-container {
      width: 100%;
      height: 150px;
      position: relative;
      border-radius: 6px;
      overflow: hidden;
    }

/* Loading placeholder */
.thumbnail-loading-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-bg-tertiary, #1e293b);
      border: 1px solid var(--color-border-subtle, #334155);
      border-radius: 6px;
      animation: thumbnail-pulse 1.5s ease-in-out infinite;
    }

@keyframes thumbnail-pulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }

/* Error placeholder */
.thumbnail-error-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.3);
      border-radius: 6px;
      cursor: help;
    }

.thumbnail-error-icon {
      font-size: 1.5rem;
      color: var(--color-status-error, #ef4444);
    }

.thumbnail-page-num {
      font-size: 0.75rem;
      color: var(--color-text-secondary, #94a3b8);
      font-weight: 600;
    }

/* Container status states */
.page-thumbnail-image-container.status-retrying .thumbnail-loading-placeholder {
      border-color: var(--color-status-warning, #f59e0b);
    }

.page-thumbnail-number {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 0.85rem;
      text-align: center;
      line-height: 1;
    }

.page-thumbnail-section {
      font-size: 0.7rem;
      color: var(--color-text-tertiary);
      text-align: center;
      line-height: 1.1;
    }

.page-spine {
      width: 28px;
      min-width: 28px;
      height: var(--page-thumb-height, 170px);
      min-height: var(--page-thumb-height, 170px);
      border-radius: 6px;
      border: 1px solid var(--color-border-subtle);
      background: var(--color-bg-tertiary);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.2rem;
      align-self: flex-start;
      box-sizing: border-box;
    }

.page-spine span {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-text-secondary);
    }

.page-spine.spine-fm-000 { background: linear-gradient(180deg, var(--DEBUG-text-dark), var(--DEBUG-bg-dark)); }
.page-spine.spine-fm-100 { background: linear-gradient(180deg, var(--DEBUG-text-dark), var(--DEBUG-bg-dark)); }
.page-spine.spine-fm-200 { background: linear-gradient(180deg, var(--DEBUG-text-dark), var(--DEBUG-bg-dark)); }
.page-spine.spine-fm-300 { background: linear-gradient(180deg, var(--DEBUG-text-dark), var(--DEBUG-bg-dark)); }
.page-spine.spine-fm-400 { background: linear-gradient(180deg, var(--DEBUG-bg-dark), var(--DEBUG-bg-dark)); }
.page-spine.spine-fm-500 { background: linear-gradient(180deg, var(--DEBUG-text-dark), var(--DEBUG-bg-dark)); }
.page-spine.spine-fm-600 { background: linear-gradient(180deg, var(--DEBUG-text-dark), var(--DEBUG-text-dark)); }
.page-spine.spine-fm-700 { background: linear-gradient(180deg, var(--DEBUG-text-dark), var(--DEBUG-bg-dark)); }

    /* Section-specific borders removed - using unified bento box style */
    /* .page-thumbnail-card.section-fm-000 { border-color: rgb(var(--section-fm000-rgb)); }
    .page-thumbnail-card.section-fm-100 { border-color: rgb(var(--section-fm100-rgb)); }
    .page-thumbnail-card.section-fm-200 { border-color: rgb(var(--section-fm200-rgb)); }
    .page-thumbnail-card.section-fm-300 { border-color: rgb(var(--section-fm300-rgb)); }
    .page-thumbnail-card.section-fm-400 { border-color: rgb(var(--section-fm400-rgb)); }
    .page-thumbnail-card.section-fm-500 { border-color: rgb(var(--section-fm500-rgb)); }
    .page-thumbnail-card.section-fm-600 { border-color: rgb(var(--section-fm600-rgb)); }
    .page-thumbnail-card.section-fm-700 { border-color: rgb(var(--section-fm700-rgb)); } */

.page-thumbnail-cluster {
      display: flex;
      align-items: flex-start;
      gap: 0.35rem;
      padding: 0.1rem;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }

.page-thumbnail-cluster:hover {
      background: rgba(var(--base-bg-tertiary-rgb), var(--opacity-medium));
    }

.page-thumbnail-cluster:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 3px;
    }
    
    .subtitle {
      font-size: 0.85rem;
      opacity: 0.8;
    }
    
    .content {
      flex: 1;
      padding: 1rem;
      overflow-y: auto;
    }
    
    .hero-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin: 1rem 0;
    }
    
    .hero-card {
      background-color: var(--color-bg-secondary);
      border-radius: 0.5rem;
      padding: 1rem;
      flex: 1;
      min-width: 120px;
      box-shadow: var(--shadow-subtle);
    }
    
    .hero-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }
    
    .hero-value {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--color-text-primary);
    }
    
    .modules-container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    
    /* ===== MUSTANG GT SIGNATURE CARD ===== */
    /* This is the hero style - preserve exactly */
    .module-card {
      flex: 1 0 250px;
      max-width: 350px;
      background: linear-gradient(135deg, 
        rgba(var(--gt-charcoal-rgb), var(--opacity-heavy)), 
        rgba(var(--gt-midnight-rgb), var(--opacity-solid)));
      border-radius: var(--space-xs);
      padding: 1rem;
      box-shadow: 
        0 2px 8px rgba(255, 0, 0, 0.7),
        inset 0 1px 0 rgba(var(--gt-focus-blue-rgb), var(--opacity-subtle));
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid rgba(var(--gt-focus-blue-rgb), var(--opacity-light));
      color: var(--DEBUG-text-primary);
    }
    
    .module-card:hover {
      box-shadow: 
        var(--shadow-medium),
        inset 0 1px 0 rgba(var(--gt-focus-blue-rgb), 0.25);
      border-color: rgba(var(--gt-focus-blue-rgb), 0.5);
      transform: translateY(-2px);
    }
    
.module-card.selected {
      border-width: 2px;
      border-color: rgba(var(--gt-focus-blue-rgb), 0.8);
      box-shadow: 
        var(--shadow-medium),
        inset 0 1px 0 rgba(var(--gt-focus-blue-rgb), var(--opacity-light));
    }

    .module-card .module-card-click {
      cursor: pointer;
    }

    .module-card.reader-open {
      background: linear-gradient(135deg, 
        rgba(var(--gt-charcoal-rgb), var(--opacity-solid)), 
        rgba(var(--gt-midnight-rgb), 1));
      border-color: rgba(var(--gt-focus-blue-rgb), var(--opacity-medium));
    }

    .module-card-actions {
      margin-top: 0.5rem;
      display: flex;
      justify-content: flex-end;
    }

    .module-reader-toggle {
      background: var(--btn-primary-bg);
      color: var(--text-primary);
      border: none;
      border-radius: 6px;
      padding: 0.4rem 0.85rem;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .module-reader-toggle:hover {
      background: var(--btn-primary-hover);
      transform: translateY(-1px);
    }

    .module-reader-panel {
      margin-top: 0.75rem;
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      background: var(--DEBUG-text-primary);
      box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.9);
      padding: 0.75rem;
    }

    .module-reader-panel-header {
      margin-bottom: 0.5rem;
    }

    .module-reader-panel-header h4 {
      margin: 0;
      font-size: 0.95rem;
      color: var(--DEBUG-bg-dark);
    }

    .module-reader-status {
      font-size: 0.85rem;
      color: var(--DEBUG-text-dark);
      margin: 0.25rem 0;
    }

    .module-reader-status.error {
      color: var(--DEBUG-text-dark);
    }

    .module-reader-body {
      display: flex;
      gap: 0.75rem;
      min-height: 180px;
    }

    .module-reader-files {
      width: 210px;
      border-right: 1px solid var(--border-subtle);
      padding-right: 0.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      max-height: 260px;
      overflow-y: auto;
    }

    .module-reader-file {
      text-align: left;
      padding: 0.35rem 0.4rem;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      background: var(--DEBUG-text-primary);
      color: var(--DEBUG-bg-dark);
      font-size: 0.8rem;
      cursor: pointer;
      transition: background 0.2s ease, border 0.2s ease;
    }

    .module-reader-file:hover {
      background: var(--DEBUG-bg-light);
    }

    .module-reader-file.active {
      border-color: var(--DEBUG-accent);
      background: var(--DEBUG-bg-light);
      font-weight: 600;
    }

    .module-reader-viewer {
      flex: 1;
      min-height: 160px;
      overflow: auto;
    }

    .global-layer-toolbar {
      margin: 1rem 0;
      padding: 0.75rem 1rem;
      background: var(--DEBUG-text-primary);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }

    .global-layer-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.95rem;
      color: var(--DEBUG-bg-dark);
    }

    .global-layer-group select {
      border-radius: 8px;
      border: 1px solid var(--DEBUG-border);
      padding: 0.35rem 0.5rem;
      font-size: 0.9rem;
      background: var(--DEBUG-text-primary);
      color: var(--DEBUG-bg-dark);
    }

    .global-layer-sync {
      background: var(--DEBUG-bg-dark);
      color: var(--text-primary);
      border: none;
      border-radius: 8px;
      padding: 0.45rem 0.85rem;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .global-layer-sync:hover {
      background: var(--DEBUG-bg-dark);
      transform: translateY(-1px);
    }

    .module-title {
      font-weight: 600;
      font-size: 1rem;
    }
    
    .module-subtitle {
      font-size: 0.85rem;
      color: var(--DEBUG-text-dark);
    }
    
    .module-progress {
      display: flex;
      align-items: center;
      margin-top: 0.75rem;
    }
    
    .progress-circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: conic-gradient(var(--DEBUG-accent) 0deg, var(--DEBUG-text-primary) 0deg);
    }
    
    .progress-circle::before {
      content: '';
      position: absolute;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: var(--base-bg-secondary);
    }
    
    .progress-text {
      position: relative;
      font-weight: 600;
      font-size: 0.875rem;
      z-index: 1;
    }
    
    .module-meta {
      margin-left: 1rem;
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
    }
    
    .module-stats {
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;
      margin-top: 0.5rem;
      color: var(--DEBUG-text-dark);
    }
    
    .module-detail {
      background-color: var(--DEBUG-text-primary);
      border-radius: 0.5rem;
      padding: 1.5rem;
      margin-top: 1rem;
      box-shadow: var(--shadow-subtle);
    }
    
    .module-detail h3 {
      margin-top: 0;
    }
    
    .chapters {
      margin-top: 1rem;
    }
    
    .chapters ul {
      padding-left: 1.5rem;
      margin-top: 0.5rem;
    }
    
    .chapter-title {
      margin-right: 1rem;
    }
    
    .issues-list ul {
      padding-left: 1.5rem;
      margin-top: 0.5rem;
    }
    
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-size: 1.25rem;
      color: var(--DEBUG-text-dark);
    }
    
    .error {
      padding: 2rem;
      color: var(--DEBUG-text-dark);
      background-color: var(--DEBUG-bg-light);
      border-radius: 0.5rem;
      margin: 2rem;
    }
    
    /* Vector Compliance Viewer Styles */
    .vector-compliance-viewer {
      background-color: var(--DEBUG-text-primary);
      border-radius: 0.5rem;
      padding: 1.5rem;
      margin-top: 1.5rem;
      box-shadow: var(--shadow-subtle);
    }
    
    .vector-header {
      margin-bottom: 1rem;
    }
    
    .vector-header h3 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
    }
    
    .vector-subtitle {
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
      margin-top: 0.25rem;
    }
    
    .vector-stats-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    
    .vector-stat-card {
      flex: 1;
      min-width: 180px;
      background-color: var(--DEBUG-text-primary);
      border-radius: 0.375rem;
      padding: 1rem;
      border: 1px solid var(--border-subtle);
    }
    
    .stat-header {
      font-weight: 500;
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
      margin-bottom: 0.5rem;
    }
    
    .stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--DEBUG-bg-dark);
    }
    
    .stat-value-large {
      font-size: 2rem;
      font-weight: 700;
      color: var(--DEBUG-bg-dark);
    }
    
    .stat-label {
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
      margin-bottom: 0.5rem;
    }
    
    .stat-details {
      font-size: 0.75rem;
      color: var(--DEBUG-text-dark);
      margin-top: 0.5rem;
    }
    
    .compliance-badges {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }
    
    .badge {
      font-size: 0.75rem;
      border-radius: 9999px;
      padding: 0.25rem 0.5rem;
    }
    
    .badge.high {
      background-color: var(--DEBUG-bg-light);
      color: var(--DEBUG-text-dark);
    }
    
    .badge.medium {
      background-color: var(--DEBUG-bg-light);
      color: var(--DEBUG-accent);
    }
    
    .badge.low {
      background-color: var(--DEBUG-bg-light);
      color: var(--DEBUG-text-dark);
    }
    
    .vector-checklist {
      margin-top: 1.5rem;
    }
    
    .vector-checklist h4 {
      font-size: 1rem;
      margin: 0 0 0.75rem 0;
    }
    
    .checklist-items {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }
    
    .checklist-item {
      border: 1px solid var(--border-subtle);
      border-radius: 0.375rem;
      padding: 0.75rem;
      font-size: 0.875rem;
    }
    
    .checklist-item.high {
      border-left: 4px solid var(--DEBUG-focus);
    }
    
    .checklist-item.medium {
      border-left: 4px solid var(--DEBUG-accent);
    }
    
    .checklist-item.low {
      border-left: 4px solid var(--DEBUG-focus);
    }
    
    .item-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.375rem;
    }
    
    .item-id {
      font-weight: 600;
      font-family: monospace;
    }
    
    .item-severity {
      font-size: 0.75rem;
      text-transform: uppercase;
    }
    
    .item-title {
      font-weight: 600;
      margin-bottom: 0.25rem;
    }
    
    .item-description {
      font-size: 0.75rem;
      color: var(--DEBUG-text-dark);
    }
    
    .vector-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 1.5rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border-subtle);
      font-size: 0.75rem;
      color: var(--DEBUG-text-dark);
    }
    
    /* Error State Styles */
    .error-container {
      background-color: var(--DEBUG-bg-light);
      border: 2px solid var(--DEBUG-text-primary);
      border-radius: 0.5rem;
      padding: 2rem;
      margin: 2rem;
      max-width: 800px;
    }
    
    .error-header h2 {
      color: var(--DEBUG-focus);
      margin: 0 0 1rem 0;
      font-size: 1.5rem;
    }
    
    .error-body h3 {
      color: var(--DEBUG-focus);
      margin: 0 0 0.5rem 0;
      font-size: 1.25rem;
    }
    
    .error-details {
      color: var(--DEBUG-text-dark);
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }
    
    .error-solution {
      background-color: var(--DEBUG-text-primary);
      border-left: 4px solid var(--DEBUG-focus);
      padding: 1rem;
      margin: 1rem 0;
      border-radius: 0.25rem;
    }
    
    .error-solution h4 {
      margin: 0 0 0.75rem 0;
      color: var(--DEBUG-focus);
    }
    
    .error-solution ol {
      margin: 0;
      padding-left: 1.5rem;
    }
    
    .error-solution li {
      margin-bottom: 0.5rem;
      color: var(--DEBUG-bg-dark);
    }
    
    .error-solution code {
      background-color: var(--DEBUG-text-primary);
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      font-family: 'Courier New', monospace;
      font-size: 0.875rem;
      color: var(--DEBUG-bg-dark);
    }
    
    .error-technical {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--DEBUG-text-primary);
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
    }
    
    .error-technical code {
      background-color: var(--DEBUG-text-primary);
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      font-family: 'Courier New', monospace;
      font-size: 0.875rem;
      color: var(--DEBUG-bg-dark);
    }
    
    /* Vector Error States */
    .vector-stat-card.error {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-text-primary);
    }
    
    .stat-error {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--DEBUG-focus);
      margin-bottom: 0.5rem;
    }
    
    .stat-error-details {
      font-size: 0.75rem;
      color: var(--DEBUG-focus);
    }
    
    .stat-error-details p {
      margin: 0.25rem 0;
    }
    
    .stat-error-details code {
      display: block;
      background-color: var(--DEBUG-text-primary);
      padding: 0.5rem;
      border-radius: 0.25rem;
      font-family: 'Courier New', monospace;
      font-size: 0.75rem;
      color: var(--DEBUG-bg-dark);
      margin-top: 0.5rem;
      word-break: break-all;
    }
    
    .partial-error-banner {
      background-color: var(--DEBUG-bg-light);
      border: 1px solid var(--DEBUG-text-primary);
      color: var(--DEBUG-text-dark);
      padding: 0.5rem 0.75rem;
      border-radius: 0.25rem;
      margin-top: 0.75rem;
      font-size: 0.875rem;
    }
    
    .checklist-error {
      background-color: var(--DEBUG-bg-light);
      border: 1px solid var(--DEBUG-text-primary);
      border-radius: 0.375rem;
      padding: 1.5rem;
      text-align: center;
    }
    
    .checklist-error p {
      margin: 0.5rem 0;
      color: var(--DEBUG-focus);
    }
    
    .error-instruction {
      font-size: 0.875rem;
    }
    
    .error-instruction code {
      background-color: var(--DEBUG-text-primary);
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      font-family: 'Courier New', monospace;
      color: var(--DEBUG-bg-dark);
    }
    
    .vector-error-summary {
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--DEBUG-text-primary);
    }
    
    .error-note {
      font-size: 0.75rem;
      color: var(--DEBUG-focus);
      margin-bottom: 0.25rem;
    }
    
    .error-item {
      background-color: var(--DEBUG-text-primary);
      border-left: 4px solid var(--DEBUG-focus);
      padding: 1rem;
      margin-bottom: 1rem;
      border-radius: 0.25rem;
    }
    
    .error-item h4 {
      margin: 0 0 0.5rem 0;
      color: var(--DEBUG-focus);
    }
    
    .error-item p {
      margin: 0.25rem 0;
      color: var(--DEBUG-bg-dark);
      font-size: 0.875rem;
    }
    
    .error-item code {
      background-color: var(--DEBUG-text-primary);
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      font-family: 'Courier New', monospace;
      font-size: 0.875rem;
      color: var(--DEBUG-bg-dark);
    }
    
    /* Tooltip Styles */
    .tooltip-wrapper {
      position: relative;
      display: inline-block;
    }
    
    .tooltip-content {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--DEBUG-bg-dark);
      color: var(--DEBUG-text-primary);
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 12px;
      width: 250px;
      margin-bottom: 8px;
      z-index: 1000;
      box-shadow: 0 4px 6px rgba(255, 0, 0, 0.7);
      pointer-events: none;
      line-height: 1.4;
    }
    
    .tooltip-content::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: var(--DEBUG-bg-dark);
    }
    
    /* Scope Rubric Viewer Styles */
    .scope-container {
      background-color: var(--color-bg-secondary);
      border-radius: 8px;
      padding: 1.5rem;
      margin-top: 1rem;
      box-shadow: var(--shadow-subtle);
    }

    .scope-header {
      margin-bottom: 1.5rem;
    }

    .scope-header h3 {
      margin: 0 0 0.25rem 0;
      font-size: 1.25rem;
      color: var(--DEBUG-text-dark);
    }

    .scope-subtitle {
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
    }

    .scope-composite {
      display: flex;
      justify-content: center;
      margin-bottom: 2rem;
    }

    .scope-score-card {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 1.5rem 2rem;
      border-radius: 8px;
      border: 2px solid;
      min-width: 300px;
    }

    .scope-score-card.pass {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-accent);
    }

    .scope-score-card.pass_with_warnings {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-accent);
    }

    .scope-score-card.fail, .scope-score-card.error {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-focus);
    }

    .scope-score-value {
      font-size: 3rem;
      font-weight: bold;
      line-height: 1;
    }

    .scope-score-card.pass .scope-score-value {
      color: var(--DEBUG-accent);
    }

    .scope-score-card.pass_with_warnings .scope-score-value {
      color: var(--DEBUG-accent);
    }

    .scope-score-card.fail .scope-score-value,
    .scope-score-card.error .scope-score-value {
      color: var(--DEBUG-focus);
    }

    .scope-score-label {
      flex: 1;
    }

    .scope-score-label > div:first-child {
      font-weight: 600;
      margin-bottom: 0.25rem;
    }

    .scope-threshold {
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
    }

    .scope-status-badge {
      padding: 0.5rem 1rem;
      border-radius: 6px;
      font-weight: 600;
      font-size: 0.875rem;
    }

    .scope-status-badge.pass {
      background-color: var(--DEBUG-accent);
      color: var(--base-text-primary);
    }

    .scope-status-badge.pass_with_warnings {
      background-color: var(--DEBUG-accent);
      color: var(--base-text-primary);
    }

    .scope-status-badge.fail,
    .scope-status-badge.error {
      background-color: var(--DEBUG-focus);
      color: var(--base-text-primary);
    }

    .scope-critical-alert {
      background-color: var(--DEBUG-bg-light);
      border-left: 4px solid var(--DEBUG-focus);
      padding: 1rem;
      margin-bottom: 1.5rem;
      border-radius: 4px;
    }

    .scope-critical-alert ul {
      margin: 0.5rem 0 0 0;
      padding-left: 1.5rem;
    }

    .scope-categories {
      margin-bottom: 1.5rem;
    }

    .scope-categories h4 {
      margin: 0 0 1rem 0;
      font-size: 1rem;
      color: var(--DEBUG-text-dark);
    }

    .scope-category-row {
      margin-bottom: 1rem;
    }

    .scope-category-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      font-size: 0.875rem;
    }

    .scope-category-name {
      font-weight: 500;
      color: var(--DEBUG-text-dark);
    }

    .scope-category-weight {
      color: var(--DEBUG-text-dark);
      font-weight: 600;
    }

    .scope-category-bar-container {
      width: 100%;
      height: 24px;
      background-color: var(--DEBUG-text-primary);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }

    .scope-category-bar {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 0.3s ease;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--base-text-primary);
    }

    .scope-category-bar.pass {
      background-color: var(--DEBUG-accent);
    }

    .scope-category-bar.warning {
      background-color: var(--DEBUG-accent);
    }

    .scope-category-bar.fail {
      background-color: var(--DEBUG-focus);
    }

    .scope-category-bar.not-implemented {
      background-color: var(--DEBUG-border);
    }

    .scope-category-score {
      position: relative;
      z-index: 1;
    }

    .scope-category-note {
      font-size: 0.75rem;
      color: var(--DEBUG-text-dark);
      font-style: italic;
      margin-top: 0.25rem;
      display: block;
    }

    .scope-recommendations {
      background-color: var(--DEBUG-text-primary);
      padding: 1rem;
      border-radius: 6px;
      margin-bottom: 1rem;
    }

    .scope-recommendations h4 {
      margin: 0 0 0.75rem 0;
      font-size: 1rem;
      color: var(--DEBUG-text-dark);
    }

    .scope-recommendations ul {
      margin: 0;
      padding-left: 1.5rem;
    }

    .scope-recommendations li {
      margin-bottom: 0.5rem;
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
    }

    .scope-metadata {
      padding-top: 1rem;
      border-top: 1px solid var(--DEBUG-border);
      text-align: center;
      color: var(--DEBUG-text-dark);
    }

    /* Rubric Info Modal Styles - Theme Aware */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(var(--gt-midnight-rgb, 15, 23, 42), 0.85);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 24px;
    }

    .modal-content {
      background: var(--base-bg-primary, #0f172a);
      color: var(--base-text-primary, #e2e8f0);
      border: 1px solid var(--base-border-primary, #1e293b);
      border-radius: 14px;
      max-width: 800px;
      width: 90%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow:
        0 0 20px rgba(var(--gt-blue-rgb, 59, 130, 246), 0.15),
        0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid var(--base-border-primary, #1e293b);
      background: var(--base-bg-secondary, #1e293b);
      border-radius: 14px 14px 0 0;
    }

    .modal-header h2 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: var(--base-text-primary, #f8fafc);
    }

    .modal-close {
      background: transparent;
      border: none;
      font-size: 24px;
      color: var(--base-text-secondary, #94a3b8);
      cursor: pointer;
      line-height: 1;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      transition: all 0.15s;
    }

    .modal-close:hover {
      background: rgba(var(--gt-blue-rgb, 59, 130, 246), 0.15);
      color: var(--base-text-primary, #f8fafc);
    }

    .modal-close:focus-visible {
      outline: 2px solid rgba(var(--gt-blue-rgb, 59, 130, 246), 0.6);
      outline-offset: 2px;
    }

    .modal-body {
      padding: 20px 24px;
      color: var(--base-text-primary, #e2e8f0);
    }

    .theorist-credit {
      background: rgba(var(--gt-blue-rgb, 59, 130, 246), 0.1);
      border-left: 4px solid var(--gt-blue, #3b82f6);
      padding: 12px 16px;
      margin-bottom: 20px;
      border-radius: 0 8px 8px 0;
    }

    .theorist-credit strong {
      color: var(--gt-blue, #3b82f6);
    }

    .background-tag {
      display: inline-block;
      background: var(--gt-blue, #3b82f6);
      color: var(--base-text-primary, #f8fafc);
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      margin-left: 8px;
      font-weight: 600;
    }

    .description {
      margin-bottom: 20px;
      line-height: 1.7;
      color: var(--base-text-secondary, #94a3b8);
      font-size: 14px;
    }

    .principles-section {
      margin-bottom: 20px;
    }

    .principles-section h3 {
      color: var(--base-text-primary, #f8fafc);
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--base-border-primary, #1e293b);
      padding-bottom: 8px;
    }

    .principle-card {
      background: var(--base-bg-secondary, #1e293b);
      border: 1px solid var(--base-border-primary, #334155);
      border-radius: 10px;
      padding: 14px 18px;
      margin-bottom: 12px;
    }

    .principle-card h4 {
      margin: 0 0 8px 0;
      color: var(--gt-blue, #60a5fa);
      font-size: 14px;
      font-weight: 600;
    }

    .principle-card .definition {
      color: var(--base-text-primary, #e2e8f0);
      margin-bottom: 10px;
      font-size: 13px;
      line-height: 1.6;
    }

    .principle-card .classical-root {
      color: var(--base-text-secondary, #94a3b8);
      font-size: 13px;
      font-style: italic;
      margin: 8px 0;
      padding-left: 12px;
      border-left: 2px solid var(--base-border-primary, #475569);
    }

    .principle-card .foundation-note {
      background: rgba(var(--gt-blue-rgb, 59, 130, 246), 0.1);
      border-left: 3px solid var(--gt-blue, #3b82f6);
      padding: 10px 12px;
      margin: 10px 0;
      font-size: 13px;
      border-radius: 0 6px 6px 0;
      color: var(--base-text-secondary, #94a3b8);
    }

    .principle-card .details {
      color: var(--base-text-secondary, #94a3b8);
      font-size: 13px;
      margin-top: 8px;
      line-height: 1.6;
    }

    .principle-card ul {
      margin: 8px 0 0 0;
      padding-left: 20px;
      color: var(--base-text-secondary, #94a3b8);
    }

    .principle-card li {
      margin-bottom: 4px;
      font-size: 13px;
    }

    .application-section {
      background: rgba(var(--gt-green-rgb, 34, 197, 94), 0.08);
      border: 1px solid rgba(var(--gt-green-rgb, 34, 197, 94), 0.2);
      border-radius: 10px;
      padding: 16px 18px;
      margin-bottom: 16px;
    }

    .application-section h3 {
      color: var(--gt-green, #22c55e);
      font-size: 14px;
      font-weight: 600;
      margin: 0 0 10px 0;
    }

    .application-section p {
      color: var(--base-text-secondary, #94a3b8);
      margin: 0;
      line-height: 1.7;
      font-size: 13px;
    }

    .citation-section {
      background: rgba(var(--gt-orange-rgb, 251, 146, 60), 0.08);
      border-left: 4px solid var(--gt-orange, #fb923c);
      padding: 16px 18px;
      border-radius: 0 8px 8px 0;
    }

    .citation-section h3 {
      color: var(--gt-orange, #fb923c);
      font-size: 13px;
      font-weight: 600;
      margin: 0 0 10px 0;
    }

    .citation {
      color: var(--base-text-secondary, #94a3b8);
      font-style: italic;
      margin: 0;
      line-height: 1.6;
      font-size: 12px;
    }

    .modal-footer {
      padding: 14px 20px;
      border-top: 1px solid var(--base-border-primary, #1e293b);
      display: flex;
      justify-content: flex-end;
      background: var(--base-bg-secondary, #1e293b);
      border-radius: 0 0 14px 14px;
    }

    .btn-close {
      background: rgba(var(--gt-blue-rgb, 59, 130, 246), 0.15);
      color: var(--base-text-primary, #f8fafc);
      border: 1px solid rgba(var(--gt-blue-rgb, 59, 130, 246), 0.3);
      padding: 8px 20px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }

    .btn-close:hover {
      background: rgba(var(--gt-blue-rgb, 59, 130, 246), 0.25);
      border-color: rgba(var(--gt-blue-rgb, 59, 130, 246), 0.5);
    }

    .btn-close:focus-visible {
      outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
      outline-offset: 2px;
    }

    /* Architecture Nav Styles */
    .architecture-nav {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 20px;
      z-index: 100;
      pointer-events: auto;
    }

    .arch-nav-btn {
      padding: 6px 16px;
      background: rgba(255, 102, 0, 0.9);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 102, 0, 0.9);
      border-radius: 6px;
      color: var(--DEBUG-accent);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 0 12px rgba(255, 102, 0, 0.9);
      letter-spacing: 0.5px;
    }

    .arch-nav-btn:hover {
      background: rgba(255, 102, 0, 0.9);
      box-shadow: 0 0 20px rgba(255, 102, 0, 0.9);
      transform: translateY(-2px);
    }

    .arch-nav-btn.active {
      background: rgba(255, 102, 0, 0.9);
      color: var(--base-text-primary);
      box-shadow: 0 0 24px rgba(255, 102, 0, 0.9);
    }

    .arch-modal {
      position: fixed;
      width: 420px;
      max-height: 70vh;
      background: var(--base-bg-secondary);
      border-radius: 12px;
      box-shadow: var(--shadow-heavy);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .arch-modal-header {
      padding: 14px 18px;
      background: linear-gradient(135deg, var(--DEBUG-accent) 0%, var(--DEBUG-accent) 100%);
      color: var(--base-text-primary);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .arch-modal-header h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .arch-modal-close {
      background: none;
      border: none;
      color: var(--base-text-primary);
      font-size: 20px;
      cursor: pointer;
      padding: 0;
      width: 28px;
      height: 28px;
      border-radius: 4px;
      transition: background 0.2s;
    }

    .arch-modal-close:hover {
      background: rgba(255, 255, 0, 0.8);
    }

    .arch-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }

    .arch-section-premise {
      margin-bottom: 20px;
      padding: 12px;
      background: var(--DEBUG-bg-light);
      border-left: 3px solid var(--DEBUG-accent);
      border-radius: 4px;
    }

    .arch-section-premise strong {
      display: block;
      margin-bottom: 6px;
      color: var(--DEBUG-accent);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .arch-section-premise p {
      margin: 0;
      color: var(--DEBUG-text-dark);
      line-height: 1.5;
      font-size: 14px;
    }

    .arch-chapters-list h4 {
      margin: 0 0 12px 0;
      color: var(--DEBUG-accent);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .arch-chapter-item {
      padding: 10px;
      margin-bottom: 10px;
      background: var(--DEBUG-text-primary);
      border-radius: 6px;
      border: 1px solid var(--DEBUG-border);
    }

    .arch-chapter-header {
      display: flex;
      gap: 10px;
      align-items: baseline;
      margin-bottom: 6px;
    }

    .arch-chapter-code {
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 12px;
      font-weight: 700;
      color: var(--DEBUG-accent);
      background: var(--DEBUG-bg-light);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .arch-chapter-title {
      font-weight: 600;
      color: var(--base-text-primary);
      font-size: 14px;
    }

    .arch-chapter-premise {
      margin: 0;
      font-style: italic;
      color: var(--base-text-secondary);
      font-size: 13px;
      line-height: 1.5;
      padding-left: 4px;
    }

    /* Info Button Styles */
    .info-button {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.25rem 0.5rem;
      margin-left: 0.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.2s;
      vertical-align: middle;
    }

    .info-button:hover {
      background-color: var(--DEBUG-text-primary);
      transform: scale(1.1);
    }

    .info-icon {
      font-size: 1.1rem;
      line-height: 1;
    }

    .section-header-with-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* SAI 3D Visualization Styles */
    .sai-container {
      background: var(--color-bg-secondary);
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 2rem;
      box-shadow: 0 4px 6px rgba(255, 0, 0, 0.7);
    }

    .sai-header {
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid var(--DEBUG-border);
    }

    .sai-header h3 {
      margin: 0 0 0.5rem 0;
      color: var(--DEBUG-text-dark);
      font-size: 1.5rem;
    }

    .sai-subtitle {
      color: var(--DEBUG-text-dark);
      font-size: 0.875rem;
      font-style: italic;
    }

    .sai-composite {
      display: flex;
      justify-content: center;
      margin-bottom: 2rem;
    }

    .sai-score-card {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 1.5rem 2rem;
      border-radius: 12px;
      border: 3px solid;
      min-width: 280px;
    }

    .sai-score-card.excellent {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-accent);
    }

    .sai-score-card.good {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-accent);
    }

    .sai-score-card.needs-work {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-focus);
    }

    .sai-score-value {
      font-size: 3rem;
      font-weight: 700;
      line-height: 1;
    }

    .sai-score-card.excellent .sai-score-value {
      color: var(--DEBUG-accent);
    }

    .sai-score-card.good .sai-score-value {
      color: var(--DEBUG-accent);
    }

    .sai-score-card.needs-work .sai-score-value {
      color: var(--DEBUG-focus);
    }

    .sai-score-label {
      text-align: left;
    }

    .sai-score-label > div:first-child {
      font-weight: 600;
      font-size: 1.125rem;
      color: var(--DEBUG-text-dark);
      margin-bottom: 0.25rem;
    }

    .sai-status {
      font-size: 0.875rem;
      font-weight: 600;
    }

    .sai-3d-visualization {
      background: var(--DEBUG-text-primary);
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 2rem;
    }

    .cube-container {
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
    }

    .dimension-explanation {
      text-align: center;
      padding: 1rem;
      background: var(--base-bg-secondary);
      border-radius: 8px;
      border: 2px solid var(--DEBUG-accent);
    }

    .dimension-explanation h4 {
      margin: 0 0 0.5rem 0;
      color: var(--DEBUG-accent);
      font-size: 1rem;
    }

    .shape-description {
      margin: 0;
      color: var(--DEBUG-text-dark);
      font-size: 0.9375rem;
      line-height: 1.5;
    }

    .sai-dimensions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .sai-dimension {
      padding: 1.25rem;
      border-radius: 8px;
      border: 2px solid;
    }

    .sai-dimension.excellent {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-accent);
    }

    .sai-dimension.good {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-accent);
    }

    .sai-dimension.needs-work {
      background-color: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-focus);
    }

    .dimension-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;
    }

    .dimension-header h4 {
      margin: 0;
      color: var(--DEBUG-text-dark);
      font-size: 1.125rem;
    }

    .dimension-score {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--DEBUG-text-dark);
    }

    .dimension-status {
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
    }

    .dimension-description {
      color: var(--DEBUG-text-dark);
      font-size: 0.875rem;
      line-height: 1.5;
      margin-bottom: 1rem;
    }

    .dimension-metrics {
      background: var(--base-bg-secondary);
      border-radius: 6px;
      padding: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .metric-item {
      display: flex;
      justify-content: space-between;
      padding: 0.375rem 0;
      font-size: 0.8125rem;
    }

    .metric-label {
      color: var(--DEBUG-text-dark);
      font-weight: 500;
    }

    .metric-value {
      color: var(--DEBUG-text-dark);
      font-weight: 600;
    }

    .dimension-meaning {
      font-size: 0.8125rem;
      font-style: italic;
      color: var(--DEBUG-text-dark);
      padding-top: 0.5rem;
      border-top: 1px solid var(--DEBUG-border);
    }

    .sai-recommendations {
      background: var(--DEBUG-bg-light);
      border: 2px solid var(--DEBUG-accent);
      border-radius: 8px;
      padding: 1.25rem;
      margin-bottom: 1.5rem;
    }

    .sai-recommendations h4 {
      margin: 0 0 0.75rem 0;
      color: var(--DEBUG-accent);
      font-size: 1rem;
    }

    .sai-recommendations ul {
      margin: 0;
      padding-left: 1.5rem;
    }

    .sai-recommendations li {
      color: var(--DEBUG-text-dark);
      font-size: 0.875rem;
      line-height: 1.6;
      margin-bottom: 0.5rem;
    }

    .sai-metadata {
      text-align: center;
      color: var(--DEBUG-border);
      font-size: 0.75rem;
      padding-top: 1rem;
      border-top: 1px solid var(--DEBUG-border);
    }

    /* Markdown Reader Styles */
    
    /* Floating Action Button */
    .md-reader-fab {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--DEBUG-accent) 0%, var(--DEBUG-accent) 100%);
      color: var(--base-text-primary);
      border: none;
      font-size: 1.75rem;
      cursor: pointer;
      box-shadow: var(--shadow-medium);
      transition: all 0.3s ease;
      z-index: 1000;
    }

    .md-reader-fab:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    /* Sidebar Pane */
    .md-reader-sidebar {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 400px;
      height: 500px;
      background: var(--base-bg-secondary);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(255, 0, 0, 0.7);
      display: flex;
      flex-direction: column;
      z-index: 1000;
      overflow: hidden;
    }

    .md-reader-sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      background: linear-gradient(135deg, var(--DEBUG-accent) 0%, var(--DEBUG-accent) 100%);
      color: var(--base-text-primary);
    }

    .md-reader-sidebar-header h4 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
    }

    .md-reader-controls {
      display: flex;
      gap: 0.5rem;
    }

    .md-reader-btn-icon {
      background: rgba(255, 255, 0, 0.8);
      border: none;
      color: var(--base-text-primary);
      width: 28px;
      height: 28px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .md-reader-btn-icon:hover {
      background: rgba(255, 255, 0, 0.8);
    }

    .md-reader-file-list {
      padding: 1rem;
      overflow-y: auto;
      flex: 1;
    }

    .md-reader-hint {
      color: var(--DEBUG-text-dark);
      font-size: 0.875rem;
      margin-bottom: 1rem;
    }

    .md-reader-file-btn {
      width: 100%;
      padding: 0.75rem;
      margin-bottom: 0.5rem;
      background: var(--DEBUG-text-primary);
      border: 1px solid var(--DEBUG-border);
      border-radius: 6px;
      text-align: left;
      cursor: pointer;
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
      transition: all 0.2s;
    }

    .md-reader-file-btn:hover {
      background: var(--DEBUG-border);
      border-color: var(--DEBUG-accent);
      color: var(--DEBUG-accent);
    }

    .md-reader-viewer-wrapper {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Modal Overlay */
    .md-reader-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      padding: 2rem;
    }

    .md-reader-modal {
      background: var(--base-bg-secondary);
      border-radius: 12px;
      width: 100%;
      max-width: 1200px;
      height: 90vh;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-heavy);
    }

    .md-reader-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem;
      background: linear-gradient(135deg, var(--DEBUG-accent) 0%, var(--DEBUG-accent) 100%);
      color: var(--base-text-primary);
      border-radius: 12px 12px 0 0;
    }

    .md-reader-modal-header h3 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 600;
    }

    .md-reader-modal-close {
      background: rgba(255, 255, 0, 0.8);
      border: none;
      color: var(--base-text-primary);
      padding: 0.5rem 1rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.9375rem;
      font-weight: 600;
      transition: background 0.2s;
    }

    .md-reader-modal-close:hover {
      background: rgba(255, 255, 0, 0.8);
    }

    .md-reader-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 2rem;
    }

    .md-reader-file-list-modal {
      max-width: 600px;
      margin: 0 auto;
    }

    /* Markdown Viewer Component Styles */
    .markdown-viewer {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .viewer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      border-bottom: 1px solid var(--DEBUG-border);
      background: var(--DEBUG-text-primary);
    }

    .viewer-header h3 {
      margin: 0;
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
      font-weight: 500;
      word-break: break-all;
    }

    .viewer-close {
      background: rgba(var(--gt-focus-blue-rgb), 0.15);
      color: var(--base-text-primary);
      border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.3);
      padding: 0.375rem 0.75rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.8125rem;
      font-weight: 600;
      transition: all 0.2s ease;
    }

    .viewer-close:hover {
      background: rgba(var(--gt-focus-blue-rgb), 0.25);
      border-color: rgba(var(--gt-focus-blue-rgb), 0.5);
    }

    .viewer-close:focus-visible {
      outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
      outline-offset: 2px;
    }

    .viewer-content {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem;
    }

    .viewer-error {
      background: var(--DEBUG-bg-light);
      border: 1px solid var(--DEBUG-text-primary);
      border-radius: 6px;
      padding: 1rem;
      color: var(--DEBUG-focus);
    }

    .viewer-error pre {
      margin-top: 0.5rem;
      font-size: 0.75rem;
      overflow-x: auto;
    }

    /* Markdown Body Rendering */
    .markdown-body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      font-size: 0.9375rem;
      line-height: 1.6;
      color: var(--DEBUG-text-dark);
    }

    .markdown-body h1 {
      font-size: 1.75rem;
      font-weight: 700;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
      color: var(--DEBUG-text-dark);
      border-bottom: 2px solid var(--DEBUG-border);
      padding-bottom: 0.5rem;
    }

    .markdown-body h2 {
      font-size: 1.5rem;
      font-weight: 600;
      margin-top: 1.25rem;
      margin-bottom: 0.75rem;
      color: var(--DEBUG-text-dark);
    }

    .markdown-body h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      color: var(--DEBUG-text-dark);
    }

    .markdown-body h4 {
      font-size: 1.125rem;
      font-weight: 600;
      margin-top: 0.875rem;
      margin-bottom: 0.5rem;
      color: var(--DEBUG-text-dark);
    }

    .markdown-body p {
      margin-bottom: 1rem;
    }

    .markdown-body ul, .markdown-body ol {
      margin-bottom: 1rem;
      padding-left: 2rem;
    }

    .markdown-body li {
      margin-bottom: 0.5rem;
    }

    .markdown-body blockquote {
      margin: 1rem 0;
      padding: 0.75rem 1rem;
      border-left: 4px solid var(--DEBUG-accent);
      background: var(--DEBUG-text-primary);
      color: var(--DEBUG-text-dark);
      font-style: italic;
    }

    .markdown-body code {
      background: var(--DEBUG-text-primary);
      padding: 0.125rem 0.25rem;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      font-size: 0.875rem;
      color: var(--DEBUG-accent);
    }

    .markdown-body pre {
      background: var(--DEBUG-text-dark);
      color: var(--DEBUG-text-primary);
      padding: 1rem;
      border-radius: 6px;
      overflow-x: auto;
      margin-bottom: 1rem;
    }

    .markdown-body pre code {
      background: none;
      color: inherit;
      padding: 0;
    }

    .markdown-body a {
      color: var(--DEBUG-accent);
      text-decoration: none;
    }

    .markdown-body a:hover {
      text-decoration: underline;
    }

    .markdown-body table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 1rem;
    }

    .markdown-body th, .markdown-body td {
      border: 1px solid var(--DEBUG-border);
      padding: 0.5rem;
      text-align: left;
    }

    .markdown-body th {
      background: var(--DEBUG-text-primary);
      font-weight: 600;
    }

    .markdown-body hr {
      border: none;
      border-top: 2px solid var(--DEBUG-border);
      margin: 1.5rem 0;
    }

    /* Logos Restore Button & Modal Styles */
    .header-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }

    .guild-button-row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin: 0.75rem 0 0.5rem;
    }

    .message-bar-wrapper {
      position: relative;
      margin: 0.5rem 1.5rem 0;
    }

    .message-bar {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 10px 16px;
      border-radius: 0;
      border-left: 3px solid transparent;
      background: rgba(var(--gt-charcoal-rgb), 0.4);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      transition: all 0.2s ease;
    }

    .message-bar-status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .message-bar-fresh .message-bar-status-indicator {
      background: rgba(var(--gt-focus-blue-rgb), 1);
      box-shadow: 0 0 8px rgba(var(--gt-focus-blue-rgb), 0.4);
    }

    .message-bar-moderate .message-bar-status-indicator {
      background: rgba(var(--gt-focus-gold-rgb), 1);
      box-shadow: 0 0 8px rgba(var(--gt-focus-gold-rgb), 0.4);
    }

    .message-bar-stale .message-bar-status-indicator,
    .message-bar-missing .message-bar-status-indicator {
      background: rgba(var(--gt-focus-red-rgb), 1);
      box-shadow: 0 0 8px rgba(var(--gt-focus-red-rgb), 0.4);
    }

    .message-bar-fresh {
      border-left-color: rgba(var(--gt-focus-blue-rgb), 0.6);
    }

    .message-bar-moderate {
      border-left-color: rgba(var(--gt-focus-gold-rgb), 0.6);
    }

    .message-bar-stale,
    .message-bar-missing {
      border-left-color: rgba(var(--gt-focus-red-rgb), 0.6);
    }

    .message-bar-content {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      flex: 1;
      overflow: hidden;
    }

    .message-bar-workspace {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--base-text-primary);
      text-transform: uppercase;
      opacity: 0.9;
      white-space: nowrap;
    }

    .message-bar-message {
      font-size: 14px;
      color: var(--base-text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .message-bar-content code {
      background: rgba(255, 0, 0, 0.7);
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      font-family: 'Consolas', monospace;
      font-size: 0.85em;
    }

    /* Message Bar History Dropdown */
    .message-bar-history-toggle {
      background: var(--base-bg-tertiary);
      border: 1px solid var(--base-border-primary);
      color: var(--base-text-secondary);
      padding: 8px 12px;
      border-radius: var(--base-border-radius);
      cursor: pointer;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      transition: var(--transition-base);
      flex-shrink: 0;
      margin-left: var(--spacing-md);
      height: 100%;
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    .message-bar-history-toggle:hover {
      background: var(--base-bg-primary);
      border-color: var(--base-border-hover);
      color: var(--base-text-primary);
    }

    .message-bar-count {
      font-size: var(--font-size-xs);
      color: var(--base-text-secondary);
    }

    .message-bar-arrow {
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--base-text-secondary);
      transition: transform 0.2s ease;
    }

    .message-bar-arrow.open {
      transform: rotate(180deg);
    }

    .message-bar-history-toggle:hover .message-bar-arrow {
      border-top-color: var(--base-text-primary);
    }

    .message-bar-history-toggle:hover .message-bar-count {
      color: var(--base-text-primary);
    }

    .message-bar-history-dropdown {
      position: absolute;
      top: calc(100% + var(--spacing-xs));
      right: 0;
      width: 400px;
      max-height: 400px;
      background: var(--base-bg-secondary);
      border: 1px solid var(--base-border-primary);
      border-radius: var(--base-border-radius);
      box-shadow: var(--shadow-lg);
      z-index: 1000;
      overflow: hidden;
      animation: slideDown 0.2s ease;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .message-bar-history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-md) var(--spacing-lg);
      border-bottom: 1px solid var(--base-border-primary);
      background: var(--base-bg-tertiary);
    }

    .message-bar-history-header h4 {
      margin: 0;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--base-text-primary);
    }

    .message-bar-history-clear {
      background: none;
      border: 1px solid var(--base-border-primary);
      color: var(--base-text-secondary);
      padding: 4px var(--spacing-md);
      border-radius: var(--base-border-radius);
      font-size: var(--font-size-xs);
      cursor: pointer;
      transition: var(--transition-base);
    }

    .message-bar-history-clear:hover {
      background: var(--status-red);
      border-color: var(--status-red);
      color: var(--base-text-inverse);
    }

    .message-bar-history-list {
      max-height: 340px;
      overflow-y: auto;
      padding: var(--spacing-sm);
    }

    .message-bar-history-item {
      display: flex;
      gap: var(--spacing-md);
      padding: var(--spacing-sm) var(--spacing-md);
      margin-bottom: var(--spacing-xs);
      border-radius: var(--base-border-radius);
      border-left: 3px solid transparent;
      background: var(--base-bg-tertiary);
      transition: var(--transition-base);
    }

    .message-bar-history-item:hover {
      background: var(--base-bg-primary);
      transform: translateX(-2px);
    }

    .message-bar-history-fresh {
      border-left-color: var(--status-green);
    }

    .message-bar-history-moderate {
      border-left-color: var(--status-orange);
    }

    .message-bar-history-stale {
      border-left-color: var(--status-red);
    }

    .message-bar-history-missing {
      border-left-color: var(--status-blue);
    }

    .message-bar-history-time {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-semibold);
      color: var(--base-text-secondary);
      white-space: nowrap;
      min-width: 80px;
    }

    .message-bar-history-text {
      flex: 1;
      font-size: var(--font-size-sm);
      color: var(--base-text-primary);
      line-height: var(--line-height-relaxed);
    }

    @keyframes scroll-message {
      0% { transform: translateX(0); }
      100% { transform: translateX(-10%); }
    }

    .dropzone-wrapper {
      position: relative;
    }
    
    /* Dropzone backdrop overlay */
    .dropzone-panel::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: -1;
    }

    .dropzone-trigger {
      min-width: 140px;
    }

.dropzone-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  max-width: 90vw;
  background: var(--base-bg-secondary);
  border: 2px solid var(--base-border-primary);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 10000;
}

.dropzone-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--base-text-primary);
}

.dropzone-row label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--base-text-primary);
}

.dropzone-row select {
  background: var(--base-bg-primary);
  border: 1px solid var(--base-border-primary);
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  color: var(--base-text-primary);
}

.dropzone-area {
  border: 2px dashed var(--base-border-primary);
  border-radius: 10px;
  padding: 0.85rem;
  background: var(--base-bg-tertiary);
  text-align: center;
  cursor: pointer;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}

.dropzone-area:hover {
  border-color: var(--status-blue);
  background: var(--base-bg-secondary);
}

.dropzone-hint {
  font-size: 0.75rem;
  opacity: 0.7;
}

.dropzone-caution {
  font-size: 0.75rem;
  color: var(--status-orange);
  background: var(--status-orange-bg);
  border-left: 3px solid var(--status-orange);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.65rem;
}

.dropzone-textarea {
  width: 100%;
  min-height: 110px;
  border-radius: 10px;
  border: 1px solid var(--base-border-primary);
  background: var(--base-bg-tertiary);
  color: var(--base-text-primary);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.dropzone-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dropzone-actions button {
  flex: 1;
  border-radius: 8px;
  border: 1px solid var(--base-border-primary);
  padding: 0.55rem 1rem;
  background: var(--base-bg-tertiary);
  color: var(--base-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropzone-actions button:hover {
  background: var(--status-blue);
  border-color: var(--status-blue);
  transform: translateY(-1px);
}

.dropzone-status {
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.dropzone-file-input {
  display: none;
}

/* ============================================
   CONTENT INBOX ENHANCED STYLES
   ============================================ */

.dropzone-panel-enhanced {
  width: 420px;
  max-height: 80vh;
  overflow-y: auto;
}

.dropzone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--base-border-primary);
}

.dropzone-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--base-text-primary);
}

.dropzone-close {
  background: transparent;
  border: none;
  color: var(--base-text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.dropzone-close:hover {
  background: var(--base-bg-secondary);
  color: var(--base-text-primary);
}

/* Pipeline visualization */
.dropzone-pipeline {
  background: var(--base-bg-secondary);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.pipeline-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.pipeline-step {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--base-bg-tertiary);
  color: var(--base-text-secondary);
}

.pipeline-step.pipeline-active {
  background: var(--status-blue);
  color: white;
}

.pipeline-arrow {
  color: var(--base-text-tertiary);
  font-size: 0.7rem;
}

.pipeline-desc {
  font-size: 0.75rem;
  color: var(--base-text-secondary);
  text-align: center;
  margin: 0;
}

/* Success state */
.dropzone-success {
  text-align: center;
  padding: 1rem 0;
}

.success-icon {
  font-size: 3rem;
  color: var(--status-green);
  margin-bottom: 0.5rem;
}

.success-message {
  font-size: 1rem;
  font-weight: 600;
  color: var(--base-text-primary);
  margin-bottom: 1rem;
}

.success-nextsteps {
  text-align: left;
  background: var(--base-bg-secondary);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--base-text-primary);
}

.success-nextsteps ol {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
}

.success-nextsteps li {
  margin-bottom: 0.5rem;
}

/* Why protected section */
.dropzone-why-link {
  background: transparent;
  border: none;
  color: var(--base-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.5rem 0;
  text-align: left;
  width: 100%;
  transition: color 0.15s ease;
}

.dropzone-why-link:hover {
  color: var(--status-blue);
}

.dropzone-why-panel {
  background: var(--base-bg-secondary);
  border: 1px solid var(--base-border-primary);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--base-text-primary);
}

.dropzone-why-panel p {
  margin: 0 0 0.75rem 0;
}

.dropzone-why-panel ul {
  margin: 0.5rem 0 0.75rem 1.25rem;
  padding: 0;
}

.dropzone-why-panel li {
  margin-bottom: 0.35rem;
}

.dropzone-why-metaphor {
  font-style: italic;
  color: var(--base-text-secondary);
  border-top: 1px solid var(--base-border-primary);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

    /* WebSocket Notifications */
    .websocket-notifications {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 400px;
    }

    .notification {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--base-bg-secondary);
      border: 1px solid var(--base-border-primary);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      animation: slideIn 0.3s ease;
      transition: all 0.2s ease;
    }

    .notification:hover {
      transform: translateX(-4px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

    .notification-corpus {
      border-left: 4px solid var(--status-green);
    }

    .notification-architecture {
      border-left: 4px solid var(--status-blue);
    }

    .notification-icon {
      font-size: 20px;
      line-height: 1;
    }

    .notification-message {
      flex: 1;
      color: var(--base-text-primary);
      font-size: 14px;
    }

    .notification-close {
      background: none;
      border: none;
      color: var(--base-text-secondary);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.6;
      transition: opacity 0.2s;
    }

    .notification-close:hover {
      opacity: 1;
    }

    .websocket-status {
      padding: 6px 12px;
      border-radius: 6px;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      background: var(--base-bg-tertiary);
      border: 1px solid var(--base-border-primary);
    }

    .websocket-status.connected {
      border-color: var(--status-green);
      color: var(--status-green);
    }

    .websocket-status.disconnected {
      border-color: var(--status-red);
      color: var(--status-red);
    }

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* Interactive Journey Map Styles */
    .journey-map-interactive {
      position: relative;
      background: linear-gradient(135deg, 
        rgba(var(--gt-charcoal-rgb), var(--opacity-heavy)), 
        rgba(var(--gt-midnight-rgb), var(--opacity-solid)));
      border-radius: 12px;
      padding: 1.5rem;
      margin: 1.25rem 0;
      min-height: 600px;
    }

    .journey-map-loading {
      text-align: center;
      padding: 3rem;
      color: var(--DEBUG-text-dark);
      font-size: 1.1rem;
    }

    .journey-map-fallback-note {
      margin-bottom: 0.5rem;
      font-size: 0.8rem;
      color: var(--DEBUG-text-primary);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* Checklist Dropdown */
    .journey-map-checklist-wrapper {
      position: absolute;
      top: 1rem;
      left: 1rem;
      z-index: 20;
    }

    .journey-map-checklist-button {
      background: linear-gradient(135deg, var(--DEBUG-accent), var(--DEBUG-accent));
      color: var(--DEBUG-text-primary);
      border: none;
      padding: 0.6rem 1.2rem;
      border-radius: 10px;
      cursor: pointer;
      font-size: 0.95rem;
      font-weight: 600;
      box-shadow: var(--shadow-medium);
      transition: all 0.2s ease;
    }

    .journey-map-checklist-button:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    .journey-map-checklist-dropdown {
      position: absolute;
      top: calc(100% + 0.5rem);
      left: 0;
      width: 420px;
      max-height: 550px;
      overflow-y: auto;
      background: var(--DEBUG-bg-dark);
      border: 1px solid rgba(0, 255, 255, 0.9);
      border-radius: 12px;
      box-shadow: var(--shadow-heavy);
      padding: 0.75rem;
    }

    .checklist-phase {
      margin-bottom: 0.75rem;
      border-bottom: 1px solid rgba(0, 255, 255, 0.9);
      padding-bottom: 0.5rem;
    }

    .checklist-phase-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
      padding: 0.4rem 0.6rem;
      background: rgba(255, 102, 0, 0.9);
      border-radius: 6px;
    }

    .checklist-phase-title {
      font-weight: 700;
      font-size: 0.85rem;
      color: var(--DEBUG-text-primary);
    }

    .checklist-completion {
      font-size: 0.8rem;
      color: var(--DEBUG-text-dark);
    }

    .checklist-completion.complete {
      color: var(--DEBUG-accent);
      font-weight: 600;
    }

    .checklist-nodes {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      padding-left: 0.5rem;
    }

    .checklist-node {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 0.6rem;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .checklist-node:hover {
      background: rgba(0, 255, 255, 0.9);
    }

    .checklist-node.current {
      background: rgba(251, 191, 36, 0.15);
      border-left: 3px solid var(--DEBUG-text-primary);
    }

    .checklist-node-icon {
      font-size: 0.9rem;
      line-height: 1;
    }

    .checklist-node-label {
      font-size: 0.85rem;
      color: var(--DEBUG-border);
      flex: 1;
    }

    .checklist-current-marker {
      font-size: 0.75rem;
      color: var(--DEBUG-text-primary);
      font-weight: 600;
    }

    /* SVG Map */
    .journey-map-svg {
      width: 100%;
      height: 600px;
      margin-top: 2rem;
    }

    .journey-node {
      transition: transform 0.2s ease;
    }

    .journey-node:hover {
      transform: scale(1.1);
    }

    /* Node Detail Panel */
    .journey-node-detail-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .journey-node-detail-panel {
      background: var(--DEBUG-bg-dark);
      border: 1px solid rgba(0, 255, 255, 0.9);
      border-radius: 12px;
      padding: 1.5rem;
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: var(--shadow-heavy);
    }

    .journey-node-detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .journey-node-detail-status {
      color: var(--DEBUG-text-primary);
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.9rem;
    }

    .journey-node-detail-close {
      background: rgba(0, 255, 255, 0.9);
      border: none;
      color: var(--DEBUG-text-primary);
      font-size: 1.5rem;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      line-height: 1;
      transition: background 0.2s ease;
    }

    .journey-node-detail-close:hover {
      background: rgba(0, 0, 255, 0.9);
    }

    .journey-node-detail-title {
      color: var(--DEBUG-text-primary);
      font-size: 1.3rem;
      margin-bottom: 1rem;
      line-height: 1.3;
    }

    .journey-node-detail-meta {
      color: var(--DEBUG-border);
      font-size: 0.9rem;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(0, 255, 255, 0.9);
    }

    .journey-node-detail-meta p {
      margin: 0.4rem 0;
    }

    .journey-node-detail-uids {
      margin-bottom: 1rem;
    }

    .journey-node-detail-uids p {
      color: var(--DEBUG-text-primary);
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .journey-node-detail-uids ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .journey-node-detail-uids li {
      color: var(--DEBUG-text-dark);
      font-size: 0.85rem;
      padding: 0.3rem 0.6rem;
      background: rgba(255, 102, 0, 0.9);
      border-radius: 4px;
      margin-bottom: 0.3rem;
      font-family: monospace;
    }

    .journey-node-detail-notes {
      background: rgba(0, 255, 255, 0.9);
      padding: 0.75rem;
      border-radius: 8px;
      margin-bottom: 1rem;
    }

    .journey-node-detail-notes p:first-child {
      font-weight: 600;
      color: var(--DEBUG-text-primary);
      margin-bottom: 0.5rem;
    }

    .journey-node-detail-notes p:last-child {
      color: var(--DEBUG-border);
      font-size: 0.9rem;
      line-height: 1.5;
      margin: 0;
    }

    .journey-node-detail-subitems {
      margin-bottom: 1rem;
    }

    .journey-node-detail-subitems > p {
      color: var(--DEBUG-text-primary);
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .journey-subitem-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .journey-subitem {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.5rem 0.75rem;
      background: rgba(0, 255, 255, 0.9);
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .journey-subitem:hover {
      background: rgba(0, 255, 255, 0.9);
    }

    .journey-subitem input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: var(--DEBUG-accent);
    }

    .journey-subitem span {
      color: var(--DEBUG-border);
      font-size: 0.9rem;
      flex: 1;
    }

    .journey-subitem span.completed {
      text-decoration: line-through;
      color: var(--DEBUG-text-dark);
    }

    .journey-node-detail-actions {
      display: flex;
      gap: 0.5rem;
      justify-content: flex-end;
    }

    .journey-node-detail-actions button {
      padding: 0.5rem 1.2rem;
      border-radius: 8px;
      border: 1px solid rgba(0, 255, 255, 0.9);
      background: rgba(255, 102, 0, 0.9);
      color: var(--DEBUG-text-primary);
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s ease;
    }

    .journey-node-detail-actions button:hover {
      background: rgba(255, 102, 0, 0.9);
    }

    /* Legend */
    .journey-map-legend {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      margin-top: 1.5rem;
      padding: 0.75rem;
      background: rgba(255, 0, 0, 0.9);
      border-radius: 12px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      color: var(--DEBUG-border);
      font-size: 0.85rem;
    }

    .legend-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid var(--DEBUG-text-primary);
    }

    .journey-map-panel {
      background: linear-gradient(135deg, 
        rgba(var(--gt-charcoal-rgb), var(--opacity-heavy)), 
        rgba(var(--gt-midnight-rgb), var(--opacity-solid)));
      border-radius: 12px;
      padding: 1.25rem;
      color: var(--text-primary);
      margin: 1.25rem 0 1.5rem;
      box-shadow: 0 20px 35px rgba(255, 0, 0, 0.9);
    }

    .journey-map-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 0.75rem;
    }

    .journey-map-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .journey-map-label {
      text-transform: uppercase;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      opacity: 0.75;
      margin-right: 0.5rem;
    }

    .journey-map-stage {
      font-size: 1rem;
      letter-spacing: 0.04em;
      text-transform: capitalize;
    }

    .journey-map-button {
      padding: 0.5rem 1.25rem;
      border-radius: 999px;
      border: 1px solid var(--base-accent-yellow);
      background: rgba(255, 255, 0, 0.8);
      color: var(--text-primary);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .journey-map-button:hover {
      background: rgba(255, 255, 0, 0.8);
      box-shadow: 0 12px 24px rgba(255, 0, 0, 0.9);
    }

    .journey-map-surface {
      overflow-x: auto;
      border-radius: 12px;
      background: rgba(255, 0, 0, 0.9);
      border: 1px solid rgba(255, 102, 0, 0.9);
    }

    .journey-map-svg {
      display: block;
      min-width: 960px;
    }

    .journey-map-svg .journey-stage-dot {
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .journey-map-svg .journey-stage-dot:hover {
      transform: scale(1.05);
    }

    .journal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(255, 0, 0, 0.9);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 2rem 1rem;
      z-index: 10002;
    }

    .journal-modal-shell {
      width: min(1100px, 100%);
      background: linear-gradient(135deg, 
        rgba(var(--gt-charcoal-rgb), var(--opacity-heavy)), 
        rgba(var(--gt-midnight-rgb), var(--opacity-solid)));
      border-radius: 12px;
      box-shadow: var(--shadow-heavy);
    }

    .simple-journal {
      padding: 1.5rem;
      color: var(--text-primary);
    }

    .simple-journal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .simple-journal-header h2 {
      margin: 0;
    }

    .journal-close {
      background: rgba(255, 255, 0, 0.8);
      border: 1px solid var(--base-accent-yellow);
      border-radius: 999px;
      padding: 0.4rem 1.25rem;
      color: var(--text-primary);
      cursor: pointer;
    }

    .simple-journal-stage {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      border: 1px solid var(--base-accent-yellow);
      border-radius: 12px;
      padding: 0.75rem 1rem;
      background: rgba(255, 255, 0, 0.8);
      margin-bottom: 1.25rem;
    }

    .stage-label {
      text-transform: uppercase;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      opacity: 0.7;
      margin-right: 0.35rem;
    }

    .stage-progress {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .stage-pill {
      padding: 0.35rem 0.6rem;
      border-radius: 999px;
      font-size: 0.75rem;
      background: rgba(255, 255, 0, 0.8);
      border: 1px solid var(--base-accent-yellow);
    }

    .stage-pill.complete {
      background: rgba(0, 255, 0, 0.8);
      border-color: rgba(0, 255, 0, 0.8);
      color: var(--DEBUG-text-primary);
    }

    .simple-journal-body {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    @media (min-width: 900px) {
      .simple-journal-body {
        flex-direction: row;
        align-items: stretch;
      }
    }

    .simple-journal-panel,
    .simple-journal-history {
      flex: 1;
      background: rgba(255, 255, 0, 0.8);
      border: 1px solid var(--base-accent-yellow);
      border-radius: 12px;
      padding: 1.25rem;
    }

    .journal-error {
      color: var(--DEBUG-accent);
      margin-bottom: 0.5rem;
    }

    .journal-question-card {
      background: rgba(255, 102, 0, 0.9);
      border: 1px solid rgba(255, 102, 0, 0.9);
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .journal-prompt-box {
      background: rgba(255, 0, 0, 0.9);
      border: 1px dashed rgba(255, 255, 0, 0.8);
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .prompt-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }

    .journal-copy {
      background: rgba(255, 102, 0, 0.9);
      border: 1px solid rgba(255, 102, 0, 0.9);
      border-radius: 999px;
      padding: 0.25rem 0.9rem;
      color: var(--DEBUG-text-primary);
      cursor: pointer;
    }

    .journal-field textarea {
      width: 100%;
      min-height: 130px;
      border-radius: 8px;
      border: 1px solid var(--base-accent-yellow);
      background: rgba(255, 0, 0, 0.9);
      color: var(--text-primary);
      padding: 0.85rem;
      resize: vertical;
      margin-top: 0.35rem;
    }
    
    .journal-field {
      display: block;
      margin-bottom: 0.9rem;
      font-size: 0.9rem;
    }

    .journal-evidence-fields {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 0.75rem;
      margin: 1rem 0;
    }

    .journal-evidence-fields input {
      width: 100%;
      padding: 0.6rem 0.8rem;
      border-radius: 8px;
      border: 1px solid var(--base-accent-yellow);
      background: rgba(255, 0, 0, 0.9);
      color: var(--text-primary);
    }

    .journal-save {
      background: linear-gradient(135deg, var(--DEBUG-accent), var(--border-focus));
      border: none;
      border-radius: 10px;
      padding: 0.85rem 1.5rem;
      color: var(--DEBUG-text-primary);
      font-weight: 600;
      cursor: pointer;
      margin-top: 0.5rem;
      width: 100%;
    }

    .journal-entry-card {
      background: rgba(255, 255, 0, 0.8);
      border: 1px solid var(--base-accent-yellow);
      border-radius: 10px;
      padding: 0.9rem;
      margin-bottom: 0.75rem;
    }

    .journal-entry-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      margin-bottom: 0.5rem;
    }

    .journal-entry-date {
      font-size: 0.75rem;
      opacity: 0.65;
    }

    .journal-entry-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      padding: 0.1rem 0.4rem;
      margin-right: 0.5rem;
      background: rgba(255, 102, 0, 0.9);
      font-size: 0.75rem;
    }

    .journal-entry-text {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.4;
    }

    .journal-entry-evidence {
      margin-top: 0.4rem;
      font-size: 0.75rem;
      opacity: 0.75;
      display: flex;
      gap: 0.5rem;
    }

    .journal-empty {
      opacity: 0.6;
      font-style: italic;
    }

    .page-strip-scroll.dragging {
      cursor: -webkit-grabbing;
      cursor: grabbing;
    }

    .file-menu-wrapper {
      position: relative;
      display: inline-flex;
    }

    .file-menu-button {
      background: var(--DEBUG-bg-dark);
      color: var(--text-primary);
      border: 1px solid var(--base-accent-yellow);
      padding: 0.55rem 0.9rem;
      border-radius: 10px;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      min-width: 120px;
      box-shadow: var(--shadow-medium);
    }

    .file-menu-button:hover {
      border-color: var(--border-focus);
      box-shadow: var(--shadow-medium),
        0 6px 18px rgba(56, 189, 248, 0.35);
    }

    .file-menu-caret {
      font-size: 0.8rem;
      opacity: 0.8;
    }

    .file-menu-dropdown {
      position: absolute;
      top: calc(100% + 0.5rem);
      left: 0;
      background: var(--DEBUG-bg-dark);
      color: var(--text-primary);
      border: 1px solid var(--base-accent-yellow);
      border-radius: 12px;
      padding: 0.75rem;
      min-width: 540px;
      max-width: 680px;
      z-index: 25;
      box-shadow: var(--shadow-heavy);
    }

    .file-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 600;
      letter-spacing: 0.02em;
      margin-bottom: 0.65rem;
    }

    .file-menu-close {
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 1.1rem;
      cursor: pointer;
      line-height: 1;
    }

    .file-menu-status {
      font-size: 0.9rem;
      padding: 0.5rem 0.25rem;
      color: rgba(255, 255, 0, 0.8);
    }

    .file-menu-status.error {
      color: var(--DEBUG-text-primary);
    }

    .file-menu-content {
      display: flex;
      gap: 0.85rem;
      min-height: 260px;
    }

    .file-folder-list {
      width: 45%;
      max-height: 280px;
      overflow-y: auto;
      border-right: 1px solid rgba(255, 255, 0, 0.8);
      padding-right: 0.5rem;
    }

    .file-folder {
      margin-bottom: 0.35rem;
    }

    .file-folder-toggle {
      width: 100%;
      background: rgba(255, 0, 0, 0.9);
      color: inherit;
      border: 1px solid rgba(0, 255, 255, 0.9);
      border-radius: 8px;
      padding: 0.4rem 0.55rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-weight: 600;
      cursor: pointer;
    }

    .file-folder-toggle:hover {
      border-color: var(--border-focus);
    }

    .folder-caret {
      font-size: 0.8rem;
      opacity: 0.85;
    }

    .file-folder-files {
      margin-top: 0.3rem;
      padding-left: 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .file-entry-button {
      background: rgba(255, 0, 0, 0.9);
      color: inherit;
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 0.35rem 0.45rem;
      text-align: left;
      font-size: 0.9rem;
      cursor: pointer;
    }

    .file-entry-button:hover {
      border-color: rgba(0, 255, 255, 0.9);
    }

    .file-entry-button.active {
      border-color: var(--border-focus);
      background: rgba(56, 189, 248, 0.15);
    }

    .file-preview-panel {
      width: 55%;
      min-height: 240px;
      max-height: 320px;
      overflow-y: auto;
      background: rgba(255, 0, 0, 0.9);
      border: 1px solid rgba(0, 255, 255, 0.9);
      border-radius: 10px;
      padding: 0.5rem;
    }

    .file-preview-panel .markdown-viewer {
      max-height: none;
    }

    .file-preview-placeholder {
      font-size: 0.9rem;
      color: rgba(255, 255, 0, 0.8);
      margin: 0;
    }

    .guild-button,
    .logos-restore-button {
      background: rgba(var(--gt-focus-blue-rgb), 0.15); /* Theme-aware blue tint */
      color: var(--base-text-primary); /* Theme-aware text */
      border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.3); /* Subtle border */
      padding: 0.65rem 1.1rem;
      border-radius: 8px; /* Match bento box radius */
      cursor: pointer;
      font-size: 0.95rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
      box-shadow: var(--shadow-medium);
      min-width: 170px;
    }

    .guild-button:hover,
    .logos-restore-button:hover {
      transform: translateY(-2px);
      background: rgba(var(--gt-focus-blue-rgb), 0.25); /* Brighter on hover */
      border-color: rgba(var(--gt-focus-blue-rgb), 0.5);
      box-shadow: 0 6px 16px rgba(var(--gt-focus-blue-rgb), 0.3); /* Blue glow */
    }

    .guild-button:focus-visible,
    .logos-restore-button:focus-visible {
      outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
      outline-offset: 2px;
    }

    .guild-icon,
    .logos-icon {
      font-size: 1.15rem;
      transition: transform 0.2s ease;
    }

    .guild-button:hover .guild-icon,
    .logos-restore-button:hover .logos-icon {
      transform: scale(1.1);
    }

    .guild-button.guild-help {
      background: rgba(var(--gt-focus-blue-rgb), 0.2);
      border-color: rgba(var(--gt-focus-blue-rgb), 0.4);
      box-shadow: var(--shadow-medium);
    }

    .guild-button.guild-help:hover {
      background: rgba(var(--gt-focus-blue-rgb), 0.3);
      border-color: rgba(var(--gt-focus-blue-rgb), 0.6);
      box-shadow: 0 6px 16px rgba(var(--gt-focus-blue-rgb), 0.4);
    }

    /* Icon-only buttons - square, compact, professional */
    .guild-icon-only {
      min-width: unset !important;
      width: 48px;
      height: 48px;
      padding: 0 !important;
      gap: 0 !important;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .guild-icon-only:hover {
      transform: translateY(-2px) scale(1.05);
    }

    
    
    .guild-label {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.1;
    }

    .guild-name {
      font-size: 0.95rem;
      font-weight: 600;
    }

    .guild-role {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 0, 0.8);
    }

    .guild-logos {
      background: linear-gradient(135deg, var(--DEBUG-accent), var(--DEBUG-accent));
    }

    .guild-curriculum {
      background: linear-gradient(135deg, var(--DEBUG-text-dark), var(--DEBUG-accent));
    }

    .guild-headmaster {
      background: linear-gradient(135deg, var(--DEBUG-text-dark), var(--DEBUG-accent));
    }

    .guild-teaching {
      background: linear-gradient(135deg, var(--DEBUG-accent), var(--DEBUG-accent));
    }

    .guild-publication {
      background: linear-gradient(135deg, var(--DEBUG-text-dark), var(--DEBUG-accent));
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .logos-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 2rem;
    }

    .logos-modal {
      background: var(--base-bg-primary) !important;
      border: 1px solid var(--base-border);
      border-radius: 12px;
      width: 90%;
      max-width: 1200px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-heavy);
    }

    .logos-modal-header {
      background: linear-gradient(135deg, var(--DEBUG-accent) 0%, var(--DEBUG-accent) 100%);
      color: var(--base-text-primary);
      padding: 1.5rem 2rem;
      border-radius: 12px 12px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logos-modal-header h2 {
      margin: 0;
      font-size: 1.5rem;
    }

    .logos-close-button {
      background: rgba(255, 255, 0, 0.8);
      border: none;
      color: var(--base-text-primary);
      font-size: 1.5rem;
      width: 36px;
      height: 36px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .logos-close-button:hover {
      background: rgba(255, 255, 0, 0.8);
    }

    .logos-modal-body {
      padding: 2rem;
      overflow-y: auto;
      flex: 1;
    }

    .logos-instructions {
      background: var(--base-bg-secondary) !important;
      border-left: 4px solid var(--DEBUG-accent);
      padding: 1rem 1.5rem;
      margin-bottom: 1.5rem;
      border-radius: 6px;
    }

    .logos-instructions p {
      margin: 0.5rem 0;
      line-height: 1.6;
    }

    .logos-actions {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .logos-action-button {
      background: var(--DEBUG-accent);
      color: var(--base-text-primary);
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.95rem;
      font-weight: 600;
      transition: all 0.2s;
    }

    .logos-action-button:hover {
      background: var(--DEBUG-text-dark);
      transform: translateY(-1px);
    }

    .logos-content-preview {
      background: var(--DEBUG-bg-dark);
      border-radius: 8px;
      padding: 1.5rem;
      max-height: 500px;
      overflow-y: auto;
    }

    .logos-content-preview pre {
      margin: 0;
      color: var(--DEBUG-text-primary);
      font-family: 'Courier New', monospace;
      font-size: 0.85rem;
      line-height: 1.6;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    /* Semantic Word Web Viewer Styles */
    .semantic-viewer-container {
      background: var(--base-bg-secondary);
      border-radius: 12px;
      padding: 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 4px 6px rgba(255, 0, 0, 0.7);
      position: relative;
      min-height: 800px;
    }

    .semantic-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid var(--DEBUG-border);
    }

    .semantic-title h3 {
      margin: 0 0 0.5rem 0;
      color: var(--DEBUG-text-dark);
      font-size: 1.5rem;
    }

    .semantic-subtitle {
      color: var(--DEBUG-text-dark);
      font-size: 0.875rem;
      font-style: italic;
    }

    .semantic-stats {
      display: flex;
      gap: 1.5rem;
    }

    .semantic-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.5rem 1rem;
      background: var(--DEBUG-text-primary);
      border-radius: 8px;
    }

    .semantic-stat-label {
      font-size: 0.75rem;
      color: var(--DEBUG-text-dark);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .semantic-stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--DEBUG-text-dark);
    }

    .semantic-controls {
      background: var(--DEBUG-text-primary);
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .semantic-control-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .semantic-control-group label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--DEBUG-text-dark);
    }

    .semantic-section-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .semantic-pill {
      padding: 0.5rem 1rem;
      border-radius: 20px;
      border: 2px solid var(--section-color, var(--DEBUG-text-dark));
      background: var(--base-bg-secondary);
      color: var(--DEBUG-text-dark);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .semantic-pill:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-subtle);
    }

    .semantic-pill.active {
      background: var(--section-color, var(--DEBUG-text-dark));
      color: var(--base-text-primary);
      border-color: var(--section-color, var(--DEBUG-text-dark));
    }

    .semantic-toggle {
      display: flex;
      gap: 0.5rem;
    }

    .semantic-toggle-btn {
      flex: 1;
      padding: 0.75rem 1.5rem;
      border: 2px solid var(--DEBUG-border);
      background: var(--base-bg-secondary);
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--DEBUG-text-dark);
      cursor: pointer;
      transition: all 0.2s;
    }

    .semantic-toggle-btn:hover {
      border-color: var(--DEBUG-accent);
    }

    .semantic-toggle-btn.active {
      background: var(--DEBUG-accent);
      border-color: var(--DEBUG-accent);
      color: var(--base-text-primary);
    }

    .semantic-slider {
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(to right, var(--DEBUG-border), var(--DEBUG-accent));
      outline: none;
      -webkit-appearance: none;
      appearance: none;
    }

    .semantic-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--DEBUG-accent);
      cursor: pointer;
      box-shadow: var(--shadow-subtle);
    }

    .semantic-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--DEBUG-accent);
      cursor: pointer;
      border: none;
      box-shadow: var(--shadow-subtle);
    }

    .semantic-svg {
      width: 100%;
      height: 700px;
      border-radius: 8px;
      background: var(--DEBUG-bg-light);
      border: 1px solid var(--DEBUG-border);
    }

    .semantic-hover-card {
      position: absolute;
      top: 120px;
      right: 2rem;
      background: var(--base-bg-secondary);
      border: 2px solid var(--DEBUG-accent);
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 4px 6px rgba(255, 0, 0, 0.7);
      min-width: 250px;
      z-index: 1000;
    }

    .semantic-hover-card h4 {
      margin: 0 0 0.75rem 0;
      color: var(--DEBUG-text-dark);
      font-size: 1.125rem;
      border-bottom: 2px solid var(--DEBUG-accent);
      padding-bottom: 0.5rem;
    }

    .semantic-hover-details {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .semantic-hover-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.875rem;
    }

    .semantic-hover-label {
      font-weight: 600;
      color: var(--DEBUG-text-dark);
    }

    .semantic-hover-value {
      color: var(--DEBUG-text-dark);
    }

    .semantic-legend {
      position: absolute;
      bottom: 2rem;
      left: 2rem;
      background: var(--base-bg-secondary);
      border: 1px solid var(--DEBUG-border);
      border-radius: 8px;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      box-shadow: var(--shadow-subtle);
    }

    .semantic-legend-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
    }

    .semantic-legend-color {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid var(--base-accent-yellow);
      box-shadow: 0 0 0 1px var(--DEBUG-border);
    }

    .semantic-help {
      position: absolute;
      bottom: 2rem;
      right: 2rem;
      background: var(--base-bg-secondary);
      border: 1px solid var(--DEBUG-border);
      border-radius: 8px;
      padding: 1rem;
      max-width: 300px;
      box-shadow: var(--shadow-subtle);
    }

    .semantic-help p {
      margin: 0 0 0.5rem 0;
      font-weight: 600;
      color: var(--DEBUG-text-dark);
      font-size: 0.875rem;
    }

    .semantic-help ul {
      margin: 0;
      padding-left: 1.5rem;
      font-size: 0.875rem;
      color: var(--DEBUG-text-dark);
    }

    .semantic-help li {
      margin-bottom: 0.25rem;
    }

    .semantic-loading,
    .semantic-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem;
      text-align: center;
    }

    .semantic-spinner {
      width: 50px;
      height: 50px;
      border: 4px solid var(--DEBUG-text-primary);
      border-top-color: var(--DEBUG-accent);
      border-radius: 50%;
      animation: semantic-spin 1s linear infinite;
      margin-bottom: 1rem;
    }

    @keyframes semantic-spin {
      to { transform: rotate(360deg); }
    }

    .semantic-error h3 {
      color: var(--DEBUG-focus);
      margin-bottom: 1rem;
    }

    .semantic-error-help {
      background: var(--DEBUG-bg-light);
      border: 1px solid var(--DEBUG-text-primary);
      border-radius: 8px;
      padding: 1rem;
      margin-top: 1rem;
      text-align: left;
    }

    .semantic-error-help p {
      margin: 0 0 0.5rem 0;
      font-size: 0.875rem;
    }

    .semantic-error-help ol {
      margin: 0.5rem 0 0 0;
      padding-left: 1.5rem;
      font-size: 0.875rem;
    }

    .semantic-error-help code {
      background: var(--DEBUG-bg-dark);
      color: var(--DEBUG-text-primary);
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      font-size: 0.85rem;
    }

    /* Rich Tooltip Styles */
    .rich-tooltip {
      background: linear-gradient(135deg, 
        rgba(var(--gt-charcoal-rgb), var(--opacity-heavy)), 
        rgba(var(--gt-midnight-rgb), var(--opacity-solid)));
      border: 2px solid var(--DEBUG-accent);
      border-radius: 12px;
      padding: 0;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--gt-focus-blue-rgb), 0.3);
      max-width: 400px;
      font-size: 0.875rem;
      animation: tooltipFadeIn 0.2s ease-out;
    }

    @keyframes tooltipFadeIn {
      from {
        opacity: 0;
        transform: translate(-50%, -95%);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -100%);
      }
    }

    .rich-tooltip.compact {
      max-width: 300px;
    }

    .rich-tooltip-header {
      background: linear-gradient(135deg, var(--DEBUG-accent) 0%, var(--DEBUG-accent) 100%);
      color: var(--base-text-primary);
      padding: 0.75rem 1rem;
      border-radius: 10px 10px 0 0;
      font-size: 0.95rem;
      font-weight: 600;
      border-bottom: 2px solid var(--DEBUG-accent);
    }

    .rich-tooltip-body {
      padding: 1rem;
      color: var(--DEBUG-text-primary);
      line-height: 1.5;
    }

    .rich-tooltip-section {
      margin-bottom: 0.875rem;
      padding-bottom: 0.875rem;
      border-bottom: 1px solid var(--DEBUG-text-dark);
    }

    .rich-tooltip-section:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .rich-tooltip-section.highlight {
      background: rgba(var(--gt-focus-blue-rgb), 0.1);
      padding: 0.75rem;
      border-radius: 6px;
      border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.3);
      border-bottom: 1px solid rgba(var(--gt-focus-blue-rgb), 0.3);
    }

    .rich-tooltip-section.target {
      background: rgba(34, 197, 94, 0.1);
      padding: 0.75rem;
      border-radius: 6px;
      border: 1px solid rgba(34, 197, 94, 0.3);
      border-bottom: 1px solid rgba(34, 197, 94, 0.3);
    }

    .rich-tooltip-label {
      font-weight: 600;
      color: var(--DEBUG-accent);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.375rem;
    }

    .rich-tooltip-text {
      color: var(--DEBUG-border);
      font-size: 0.875rem;
      line-height: 1.6;
    }

    .rich-tooltip-wrapper {
      position: relative;
      display: inline-block;
    }

    .rich-tooltip-wrapper:hover {
      opacity: 1;
    }

    /* Add subtle glow to hoverable elements */
    .rich-tooltip-wrapper > * {
      transition: all 0.2s ease;
    }

    .rich-tooltip-wrapper:hover > * {
      filter: brightness(1.05);
    }

    /* Layer Control Bar Styles */
    .layer-control-bar {
      background: linear-gradient(135deg, var(--DEBUG-text-primary) 0%, var(--DEBUG-text-primary) 100%);
      border: 2px solid var(--border-subtle);
      border-radius: 12px;
      padding: 1.5rem;
      margin: 1.5rem 0;
      box-shadow: 0 2px 8px rgba(255, 0, 0, 0.7);
    }

    .layer-control-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    .layer-control-header h4 {
      margin: 0;
      font-size: 1.1rem;
      color: var(--DEBUG-bg-dark);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .layer-control-subtitle {
      font-size: 0.85rem;
      color: var(--DEBUG-text-dark);
      font-style: italic;
    }

    .layer-buttons {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      align-items: stretch;
    }

    .layer-button {
      flex: 1;
      min-width: 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
      padding: 0.875rem 1rem;
      background: rgba(var(--gt-focus-blue-rgb), 0.15); /* Theme-aware */
      border: 2px solid rgba(var(--gt-focus-blue-rgb), 0.3); /* Theme-aware */
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
      position: relative;
      color: var(--base-text-primary); /* Theme-aware text */
    }

    .layer-button:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
      border-color: var(--border-focus);
    }

    .layer-button.active {
      background: rgba(var(--gt-focus-blue-rgb), 0.3); /* Theme-aware */
      border-color: rgba(var(--gt-focus-blue-rgb), 0.6); /* Theme-aware */
      color: var(--base-text-primary); /* Theme-aware */
      box-shadow: 0 4px 12px rgba(var(--gt-focus-blue-rgb), 0.3); /* Theme-aware */
    }

.layer-button:focus-visible {
      outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
      outline-offset: 2px;
    }

    .layer-button.active .layer-icon {
      filter: brightness(1.2);
    }

    .layer-button.active .layer-name,
    .layer-button.active .layer-completion {
      color: var(--base-text-primary);
    }

    .layer-button.blocked {
      opacity: 0.5;
      cursor: not-allowed;
      background: var(--DEBUG-text-primary);
    }

    .layer-button.blocked:hover {
      transform: none;
      box-shadow: none;
    }

    .layer-button.all-layers {
      background: var(--DEBUG-accent);
      color: var(--base-text-primary);
      border-color: var(--border-focus);
    }

    .layer-button.all-layers.active {
      background: linear-gradient(135deg, var(--DEBUG-bg-dark) 0%, var(--DEBUG-bg-dark) 100%);
      box-shadow: var(--shadow-medium);
    }

    .layer-button.all-layers .layer-name,
    .layer-button.all-layers .layer-completion {
      color: var(--base-text-primary);
    }

    .layer-icon {
      font-size: 1.75rem;
      line-height: 1;
    }

    .layer-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
    }

    .layer-name {
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--DEBUG-bg-dark);
      text-align: center;
    }

    .layer-completion {
      font-size: 0.75rem;
      color: var(--DEBUG-text-dark);
      font-weight: 500;
    }

    .layer-status {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 1rem;
    }

    .layer-blocked-badge {
      font-size: 0.875rem;
      margin-top: 0.25rem;
    }

    /* Layer status colors */
    .layer-button.excellent {
      border-color: var(--border-focus);
    }

    .layer-button.excellent:not(.active):hover {
      border-color: var(--DEBUG-text-dark);
      background: var(--DEBUG-bg-light);
    }

    .layer-button.good {
      border-color: var(--border-focus);
    }

    .layer-button.good:not(.active):hover {
      border-color: var(--border-focus);
      background: var(--DEBUG-text-primary);
    }

    .layer-button.in-progress {
      border-color: var(--border-focus);
    }

    .layer-button.in-progress:not(.active):hover {
      border-color: var(--border-focus);
      background: var(--DEBUG-bg-light);
    }

    .layer-button.needs-work {
      border-color: var(--border-focus);
    }

    .layer-button.needs-work:not(.active):hover {
      border-color: var(--border-focus);
      background: var(--DEBUG-bg-light);
    }

    /* Layer info panel */
    .layer-info-panel {
      margin-top: 1.5rem;
      padding: 1.25rem;
      background: var(--base-bg-secondary);
      border: 2px solid var(--border-subtle);
      border-radius: 10px;
      animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .layer-panel-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .layer-panel-icon {
      font-size: 1.5rem;
    }

    .layer-panel-header h5 {
      margin: 0;
      font-size: 1rem;
      color: var(--DEBUG-bg-dark);
    }

    .layer-panel-description {
      color: var(--DEBUG-text-dark);
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    .layer-panel-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .layer-panel-stats .stat-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .layer-panel-stats .stat-label {
      font-size: 0.75rem;
      color: var(--DEBUG-text-dark);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
    }

    .layer-panel-stats .stat-value {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--DEBUG-bg-dark);
    }

    .layer-panel-warning {
      background: var(--DEBUG-bg-light);
      border: 2px solid var(--DEBUG-text-primary);
      border-radius: 8px;
      padding: 1rem;
      margin-top: 1rem;
    }

    .layer-panel-warning strong {
      color: var(--DEBUG-text-dark);
      display: block;
      margin-bottom: 0.5rem;
    }

    .layer-panel-warning p {
      color: var(--DEBUG-text-dark);
      margin: 0;
      font-size: 0.875rem;
    }

    .layer-panel-rule {
      background: var(--DEBUG-bg-light);
      border: 2px solid var(--DEBUG-focus);
      border-radius: 8px;
      padding: 1rem;
      margin-top: 1rem;
    }

    .layer-panel-rule strong {
      color: var(--DEBUG-focus);
      display: block;
      margin-bottom: 0.5rem;
    }

    .layer-panel-rule p {
      color: var(--DEBUG-text-dark);
      margin: 0;
      font-size: 0.875rem;
    }

    /* Loading state */
    .layer-control.loading {
      text-align: center;
      padding: 2rem;
      color: var(--DEBUG-text-dark);
      font-style: italic;
    }

/* ============================================================================
   ERROR BOUNDARY STYLES (Phase 2C)
   ============================================================================ */

.error-boundary-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--DEBUG-accent) 0%, var(--DEBUG-accent) 100%);
  padding: 20px;
}

.error-boundary-content {
  background: var(--base-bg-secondary);
  border-radius: 12px;
  box-shadow: var(--shadow-heavy);
  max-width: 800px;
  width: 100%;
  overflow: hidden;
}

.error-boundary-header {
  background: var(--DEBUG-focus);
  color: var(--base-text-primary);
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.error-boundary-header .error-icon {
  font-size: 48px;
}

.error-boundary-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

.error-boundary-body {
  padding: 30px;
}

.error-boundary-body .error-message {
  font-size: 16px;
  color: var(--DEBUG-text-dark);
  margin-bottom: 20px;
  line-height: 1.6;
}

.error-details {
  background: var(--DEBUG-text-primary);
  border-left: 4px solid var(--DEBUG-focus);
  padding: 15px;
  border-radius: 4px;
  margin: 20px 0;
}

.error-details h3 {
  margin-top: 0;
  font-size: 16px;
  color: var(--DEBUG-text-dark);
}

.error-stack {
  background: var(--DEBUG-text-dark);
  color: var(--DEBUG-accent);
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  margin: 10px 0;
}

.error-component-stack {
  margin-top: 15px;
}

.error-component-stack summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--DEBUG-text-dark);
  padding: 10px;
  background: var(--DEBUG-border);
  border-radius: 4px;
}

.error-component-stack summary:hover {
  background: var(--DEBUG-border);
}

.error-component-stack pre {
  background: var(--DEBUG-text-dark);
  color: var(--DEBUG-border);
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 10px;
}

.error-actions {
  display: flex;
  gap: 10px;
  margin: 25px 0;
}

.error-actions .btn-primary,
.error-actions .btn-secondary {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.error-actions .btn-primary {
  background: var(--DEBUG-accent);
  color: var(--base-text-primary);
}

.error-actions .btn-primary:hover {
  background: var(--DEBUG-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.error-actions .btn-secondary {
  background: var(--DEBUG-border);
  color: var(--DEBUG-text-dark);
}

.error-actions .btn-secondary:hover {
  background: var(--DEBUG-border);
}

.error-warning {
  background: var(--DEBUG-bg-light);
  border-left: 4px solid var(--DEBUG-accent);
  padding: 15px;
  border-radius: 4px;
  margin: 20px 0;
}

.error-warning p {
  margin: 0;
  color: var(--DEBUG-text-dark);
  font-size: 14px;
}

.error-help {
  background: var(--DEBUG-bg-light);
  border-left: 4px solid var(--DEBUG-accent);
  padding: 15px;
  border-radius: 4px;
  margin: 20px 0;
}

.error-help h4 {
  margin-top: 0;
  color: var(--DEBUG-accent);
  font-size: 16px;
}

.error-help ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.error-help li {
  color: var(--DEBUG-accent);
  margin: 8px 0;
  line-height: 1.5;
}

.module-layer-controls {
      margin-top: 0.75rem;
      border-top: 1px dashed rgba(255, 0, 0, 0.9);
      padding-top: 0.5rem;
    }

.module-layer-controls-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      color: var(--DEBUG-text-dark);
      margin-bottom: 0.4rem;
    }

.module-layer-sync {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.8rem;
      color: var(--DEBUG-text-dark);
    }

.module-layer-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
    }

.module-layer-chips.disabled {
      opacity: 0.5;
      pointer-events: none;
    }

.layer-chip {
      border: 1px solid var(--DEBUG-border);
      background: var(--DEBUG-text-primary);
      border-radius: 999px;
      padding: 0.2rem 0.6rem;
      font-size: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      color: var(--DEBUG-bg-dark);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

.layer-chip-icon {
      font-size: 0.85rem;
    }

.layer-chip.active {
      background: var(--DEBUG-accent);
      color: var(--DEBUG-text-primary);
      border-color: var(--DEBUG-accent);
      transform: translateY(-1px);
    }

.layer-chip:disabled {
      cursor: default;
    }
.guild-gate-bar {
      margin: 1rem 0;
      padding: 0.75rem 1rem;
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      background: var(--DEBUG-text-primary);
      box-shadow: 0 1px 2px rgba(255, 0, 0, 0.9);
    }

.guild-gate-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }

.guild-gate-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--DEBUG-bg-dark);
    }

.guild-gate-scope {
      font-size: 0.85rem;
      color: var(--DEBUG-text-dark);
    }

.scope-status {
      font-weight: 600;
      padding: 0.1rem 0.4rem;
      border-radius: 999px;
      border: 1px solid var(--DEBUG-border);
      margin-left: 0.25rem;
    }

.scope-pass {
      background: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-accent);
      color: var(--DEBUG-text-dark);
    }

.scope-fail {
      background: var(--DEBUG-bg-light);
      border-color: var(--DEBUG-text-primary);
      color: var(--DEBUG-text-dark);
    }

.guild-gate-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }

.guild-gate-chip {
      padding: 0.4rem 0.7rem;
      border-radius: 999px;
      border: 1px solid var(--border-subtle);
      background: var(--DEBUG-text-primary);
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.78rem;
    }

.guild-gate-ready {
      border-color: var(--DEBUG-accent);
      background: var(--DEBUG-bg-light);
      color: var(--DEBUG-text-dark);
    }

.guild-gate-caution {
      border-color: var(--DEBUG-text-primary);
      background: var(--DEBUG-text-primary)7ed;
      color: var(--DEBUG-accent);
    }

.gate-name {
      font-weight: 600;
    }

.gate-completion {
      font-weight: 500;
      color: var(--DEBUG-bg-dark);
    }

.guild-gate-note {
      font-size: 0.8rem;
      color: var(--DEBUG-text-dark);
    }

/* System Defense Button */
.system-defense-button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: rgba(var(--gt-focus-blue-rgb), 0.15); /* Match guild-button */
      color: var(--base-text-primary); /* Match guild-button */
      border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.3); /* Match guild-button */
      border-radius: 8px; /* Match guild-button */
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-subtle);
    }

.system-defense-button:hover {
      transform: translateY(-2px);
      background: rgba(var(--gt-focus-blue-rgb), 0.25); /* Match guild-button */
      border-color: rgba(var(--gt-focus-blue-rgb), 0.5);
      box-shadow: 0 6px 16px rgba(var(--gt-focus-blue-rgb), 0.3); /* Match guild-button */
    }

.system-defense-button:active {
      transform: translateY(0);
    }

.system-defense-button:focus-visible {
      outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
      outline-offset: 2px;
    }

.system-defense-button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

.system-defense-button .button-icon {
      font-size: 1.2rem;
    }

/* System Defense Modal */
.system-defense-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--overlay-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 2rem;
    }

.system-defense-modal {
      background: var(--base-bg-secondary);
      border-radius: 12px;
      width: 90%;
      max-width: 1200px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-heavy);
    }

.system-defense-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
    }

.system-defense-modal-header h2 {
      margin: 0;
      color: var(--base-text-primary);
      font-size: 1.5rem;
    }

.system-defense-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 2rem;
    }

.defense-intro {
      background: var(--color-bg-tertiary);
      border-left: 4px solid var(--color-accent-primary);
      padding: 1rem 1.5rem;
      margin-bottom: 1.5rem;
      border-radius: 8px;
    }

.defense-intro p {
      margin: 0.5rem 0;
      color: var(--base-text-secondary);
    }

.defense-intro strong {
      color: var(--base-text-primary);
    }

.defense-content {
      background: var(--base-bg-primary);
      border-radius: 8px;
      padding: 1.5rem;
    }

.defense-content pre {
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
      font-family: 'Courier New', Courier, monospace;
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--base-text-primary);
    }

.system-defense-modal-footer {
      display: flex;
      gap: 1rem;
      padding: 1.5rem 2rem;
      border-top: 1px solid var(--color-border-secondary);
      background: var(--base-bg-secondary);
    }

.system-defense-modal-footer .action-button {
      padding: 0.75rem 1.5rem;
      background: var(--color-accent-primary);
      color: var(--base-text-primary);
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

.system-defense-modal-footer .action-button:hover {
      background: var(--color-accent-secondary);
      transform: translateY(-1px);
    }

.system-defense-modal-footer .action-button.secondary {
      background: transparent;
      border: 1px solid var(--color-border-secondary);
    }

.system-defense-modal-footer .action-button.secondary:hover {
      background: var(--color-bg-tertiary);
    }

.close-button {
      background: none;
      border: none;
      font-size: 1.5rem;
      color: var(--base-text-primary);
      cursor: pointer;
      padding: 0.25rem 0.5rem;
      line-height: 1;
      transition: all 0.2s ease;
      border-radius: 4px;
    }

.close-button:hover {
      color: var(--base-text-primary);
      background: rgba(var(--gt-focus-blue-rgb), 0.1);
    }

.close-button:focus-visible {
      outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
      outline-offset: 2px;
    }

/* UID Content Viewer Container */
.uid-viewer-container {
  width: 100%;
  margin: 1.5rem 0;
  padding: 0 1rem;
  box-sizing: border-box;
}

.uid-viewer-container > div {
  height: 750px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ===================================================================
   PERSONA LAUNCHER & CHAT SYSTEM
   Multi-persona chat panels with cascading windows
   =================================================================== */

/* Persona Launcher Container */
.persona-launcher {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 8000;
  pointer-events: none;
}

.persona-launcher > * {
  pointer-events: auto;
}

/* Individual Persona Chat Panel */
.persona-chat-panel {
  position: fixed;
  background: var(--base-bg-secondary);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 20px rgba(255, 0, 0, 0.7);
  width: 400px;
  height: 500px;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--DEBUG-border);
  transition: all 0.3s ease;
}

.persona-chat-panel.minimized {
  height: 50px;
  overflow: hidden;
}

/* Persona Chat Header */
.persona-chat-header {
  padding: 12px 16px;
  color: var(--base-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  border-radius: 10px 10px 0 0;
  -webkit-user-select: none;
  user-select: none;
}

.persona-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.persona-chat-title .persona-icon {
  font-size: 18px;
}

.persona-chat-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.persona-control-btn {
  background: rgba(255, 255, 0, 0.8);
  border: none;
  color: var(--base-text-primary);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s ease;
}

.persona-control-btn:hover {
  background: rgba(255, 255, 0, 0.8);
}

/* Persona Chat Body */
.persona-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--DEBUG-text-primary);
}

.persona-message {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.persona-message.user {
  align-items: flex-end;
}

.persona-message.persona {
  align-items: flex-start;
}

.persona-message-content {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.persona-message.user .persona-message-content {
  background: var(--DEBUG-accent);
  color: var(--base-text-primary);
}

.persona-message.persona .persona-message-content {
  background: var(--base-bg-secondary);
  color: var(--DEBUG-text-dark);
  border: 1px solid var(--DEBUG-border);
}

.persona-message-time {
  font-size: 11px;
  color: var(--DEBUG-text-dark);
  padding: 0 4px;
}

/* Persona Chat Input */
.persona-chat-input {
  padding: 12px 16px;
  border-top: 1px solid var(--DEBUG-border);
  background: var(--base-bg-secondary);
  display: flex;
  gap: 8px;
  border-radius: 0 0 10px 10px;
}

.persona-chat-input input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--DEBUG-border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.persona-chat-input input:focus {
  border-color: var(--DEBUG-accent);
}

.persona-chat-input button {
  padding: 10px 16px;
  background: var(--DEBUG-accent);
  color: var(--base-text-primary);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.persona-chat-input button:hover {
  background: var(--DEBUG-accent);
}

.persona-chat-input button:disabled {
  background: var(--DEBUG-border);
  cursor: not-allowed;
}

/* Persona Floating Action Button */
.persona-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--DEBUG-accent), var(--DEBUG-accent));
  color: var(--base-text-primary);
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: var(--shadow-medium);
  transition: all 0.3s ease;
  z-index: 7999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.persona-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 102, 0, 0.9);
}

/* Persona Selection Menu */
.persona-selection-menu {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background: var(--base-bg-secondary);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.7);
  padding: 12px;
  min-width: 250px;
  z-index: 8001;
  border: 2px solid var(--DEBUG-border);
}

.persona-selection-item {
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s ease;
  margin-bottom: 4px;
}

.persona-selection-item:hover {
  background: var(--DEBUG-text-primary);
}

.persona-selection-item .persona-icon {
  font-size: 24px;
}

.persona-selection-info {
  flex: 1;
}

.persona-selection-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--DEBUG-text-dark);
}

.persona-selection-role {
  font-size: 12px;
  color: var(--DEBUG-text-dark);
}

/* Loading State */
.persona-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--DEBUG-text-dark);
}

.persona-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--DEBUG-border);
  border-top-color: var(--DEBUG-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===================================================================
   BENTO BOX LAYOUT - Cockpit-Style Command Center
   Ultrawide optimized, everything fits in one viewport
   Game Design Guild principles: Spatial memory, Fitts's Law, One viewport
   =================================================================== */

.dashboard-bento {
  display: grid;
  /* Cockpit layout: Chyron | Workspace | Module Cards | Viewer strip */
  grid-template-rows: 
    auto                    /* Row 1: Chyron - header + PageStrip thumbnails */
    minmax(320px, 1fr)      /* Row 2: Main workspace - map + docs */
    auto                    /* Row 3: Module cards band (collapsible) */
    auto;                   /* Row 4: Viewers - scrollable train cars */
  grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr) minmax(200px, 1fr);
  gap: var(--space-sm);  /* UX Guild: Use golden ratio spacing (13px) for visual harmony */
  padding: var(--space-sm);
  background: var(--DEBUG-bg-dark);  /* Deep space cockpit feel */
  height: 100vh;  /* Locked to viewport - no page scroll */
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;  /* No page scroll - everything in viewport */
}

/* Chyron Row - Cockpit navigation strip spans full width */
.bento-chyron-row {
  grid-column: 1 / -1;
  grid-row: 1;
  background: var(--color-bg-header);
  border-bottom: 2px solid var(--color-border-subtle);
  border-radius: 12px 12px 0 0;  /* UX Guild: 12px radius matches bento-container standard */
  padding: var(--space-xs);  /* UX Guild: Use golden ratio spacing (8px) */
  box-shadow: var(--shadow-medium);
  overflow: hidden; /* No vertical scroll - content fits in min height */
  display: flex;
  flex-direction: column;
  width: 100%; /* Force full width across all grid columns */
  min-width: 0; /* Allow flex children to shrink */
}

/* =============================================
   BENTO PANELS - Unified Styling (DRY)
   All three panels share identical visual treatment
   ============================================= */

/* Shared properties for all three bento panels */
.bento-left-panel,
.bento-center-map,
.bento-right-panel {
  /* Layout */
  display: flex;
  flex-direction: column;
  grid-row: 2;
  gap: var(--space-xs);
  padding: var(--space-xs);
  overflow-y: auto;
  max-height: 100%;
  box-sizing: border-box; /* Include border in width calculation */
  
  /* Visual styling - Atomic consistency */
  background: rgba(var(--gt-midnight-rgb), var(--opacity-light));
  border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.25);
  border-radius: 12px;
  
  /* Shadow + Focus ring */
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(var(--gt-focus-blue-rgb), 0.05);
  
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gt-focus-blue-rgb), 0.4) rgba(var(--gt-midnight-rgb), var(--opacity-light));
}

/* Grid positioning - Only unique property per panel */
.bento-left-panel   { grid-column: 1; }
.bento-center-map   { grid-column: 2; }
.bento-right-panel  { grid-column: 3; }

/* Writing Viewport - Full viewport mode without DrawerPanel wrapper */
.bento-writing-viewport {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.bento-writing-viewport > .writing-workspace {
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

/* Left panel specific overrides */
.bento-left-panel .bento-module-row {
  grid-column: auto;
  grid-row: auto;
  margin-bottom: 0;
}

.bento-left-panel .bento-module-row.collapsed {
  margin-bottom: 0;
}

.bento-left-panel .module-row-header h3 {
  font-size: 1rem;
}

.bento-left-panel .module-row-header p {
  font-size: 0.8rem;
}

.map-and-gates {
  display: flex;
  gap: var(--space-sm);  /* UX Guild: Golden ratio spacing (13px) */
  align-items: flex-start;
  width: 100%;
}

.architecture-flow-container {
  flex: 1;
  min-height: 500px;
  max-height: calc(80vh - 6rem);
  overflow: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--space-xs);  /* UX Guild: Golden ratio (8px) - subtle corners */
  position: relative;
}

.guild-gates-sidebar {
  width: 320px;
  max-width: 360px;
  min-width: 260px;
  max-height: calc(80vh - 6rem);
  display: flex;
  overflow: hidden;
  margin-left: var(--space-md);  /* UX Guild: Golden ratio spacing (21px) for visual separation */
}

/* Compact Layer Controls in Metrics Section */
.layer-controls-compact {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.layer-select-compact {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 100px;
}

.sync-btn-compact {
  padding: 4px 8px;
  font-size: 14px;
  background: var(--color-interactive-primary);
  color: var(--color-text-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.sync-btn-compact:hover {
  background: var(--color-interactive-hover);
  transform: rotate(180deg);
}

.map-canvas {
  flex: 1;
  min-width: 0;
}

.guild-gates-panel {
  width: 320px;
  max-width: 360px;
  min-width: 260px;
  max-height: calc(80vh - 6rem);
  display: flex;
  overflow: hidden;
}

.guild-gates-panel .guild-gates {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 0.35rem;
}

.guild-gates-panel .guild-gates::-webkit-scrollbar {
  width: 6px;
}

.guild-gates-panel .guild-gates::-webkit-scrollbar-thumb {
  background: rgba(var(--gt-focus-blue-rgb), 0.4);
  border-radius: 4px;
}

.guild-gates-panel .guild-gates::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gt-focus-blue-rgb), 0.6);
}

/* Webkit scrollbar for panels - Unified */
.bento-left-panel::-webkit-scrollbar,
.bento-center-map::-webkit-scrollbar,
.bento-right-panel::-webkit-scrollbar {
  width: 6px;
}

.bento-left-panel::-webkit-scrollbar-track,
.bento-center-map::-webkit-scrollbar-track,
.bento-right-panel::-webkit-scrollbar-track {
  background: rgba(var(--gt-midnight-rgb), var(--opacity-light));
  border-radius: 4px;
}

.bento-left-panel::-webkit-scrollbar-thumb,
.bento-center-map::-webkit-scrollbar-thumb,
.bento-right-panel::-webkit-scrollbar-thumb {
  background: rgba(var(--gt-focus-blue-rgb), 0.4);
  border-radius: 4px;
}

.bento-left-panel::-webkit-scrollbar-thumb:hover,
.bento-center-map::-webkit-scrollbar-thumb:hover,
.bento-right-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gt-focus-blue-rgb), 0.6);
}

/* ===================================================================
   UNIFIED BENTO CONTAINER CLASS - Applied to all drawer containers
   Matches the bento box standard: radius 12px, blue border, consistent styling
   =================================================================== */
.bento-container {
  /* Layout */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%; /* Fill grid cell completely */
  box-sizing: border-box; /* Include border in width calculation */
  
  /* Visual styling - Matches bento-left-panel, bento-center-map, bento-right-panel */
  background: rgba(var(--gt-midnight-rgb), var(--opacity-light));
  border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.25);
  border-radius: 12px;
  
  /* Shadow + Focus ring - Standard bento box scheme */
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(var(--gt-focus-blue-rgb), 0.05);
  
  transition: padding 0.2s ease, margin 0.2s ease, background 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease;
}

.bento-container.collapsed {
  /* UX Guild: Maintain edge-to-edge alignment even when collapsed */
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  /* Keep width and box-sizing for perfect alignment */
}

/* Module Cards Row - Drawer using bento-container class */
.bento-module-row {
  grid-column: 1 / -1;
  grid-row: 3;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  min-height: 0;
  /* UX Guild: Break out of grid padding to align with true viewport edges */
  margin-left: calc(-1 * var(--space-sm));
  margin-right: calc(-1 * var(--space-sm));
  width: calc(100% + (2 * var(--space-sm)));
}

.bento-module-row.collapsed .module-row-scroll {
  display: none;
}

.bento-module-row.collapsed .module-row-header {
  /* UX Guild: Collapsed drawer button spans full width for edge alignment */
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(var(--gt-midnight-rgb), var(--opacity-light));
  border-radius: 12px;
  border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.25);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(var(--gt-focus-blue-rgb), 0.05);
  width: 100%;  /* Force full width */
  box-sizing: border-box;  /* Include border in width */
}

.bento-module-row.collapsed .module-row-header p {
  display: none;
}

.module-row-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);  /* UX Guild: Golden ratio (21px) */
  color: var(--DEBUG-text-primary);
}

.module-row-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.module-row-header p {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

.module-row-layer {
  text-align: right;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-tertiary);
  box-shadow: inset 0 0 10px rgba(var(--gt-focus-blue-rgb), 0.2);
}

.module-row-layer span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--DEBUG-text-dark);
}

.module-row-layer strong {
  display: block;
  font-size: 1rem;
  color: var(--text-primary);
}

.module-row-toggle {
  border: 2px solid var(--border-focus);
  background: rgba(var(--gt-midnight-rgb), 0.5);
  color: var(--DEBUG-text-primary);
  border-radius: 999px;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.module-row-toggle:hover {
  background: rgba(var(--gt-focus-blue-rgb), var(--opacity-light));
  color: var(--DEBUG-text-primary);
  border-color: var(--border-focus);
}

.module-row-scroll {
  flex: 1;
  overflow: auto;
  margin-right: -0.25rem;
  padding-right: 0.25rem;
}

.module-row-scroll::-webkit-scrollbar {
  width: 6px;
}

.module-row-scroll::-webkit-scrollbar-track {
  background: rgba(var(--gt-midnight-rgb), var(--opacity-light));
  border-radius: 4px;
}

.module-row-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--gt-focus-blue-rgb), 0.4);
  border-radius: 4px;
}

.module-row-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gt-focus-blue-rgb), 0.6);
}

/* Old HUD row - now hidden (metrics moved to viewer strip) */
.bento-metrics-hud {
  display: none;
}

/* Metrics HUD Container - matches other metric viewer cards */
.metrics-hud-container {
  min-width: 500px;
  max-width: 550px;
}

/* Metrics HUD Grid - 2x2 layout for 4 metric boxes */
.metrics-hud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  height: 100%;
  padding: 0;
}

/* Scale down metric boxes for 2x2 grid layout */
.metrics-hud-grid .metric-hud-box {
  min-width: unset;
  max-width: unset;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
}

.metrics-hud-grid .metric-hud-title {
  font-size: 0.7rem;
  margin-bottom: 0.25rem;
}

.metrics-hud-grid .metric-hud-primary {
  font-size: 1.75rem;
}

.metrics-hud-grid .metric-hud-secondary {
  font-size: 1.5rem;
}

.metrics-hud-grid .metric-hud-label {
  font-size: 0.65rem;
}

.metrics-hud-grid .metric-hud-status {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
}

.metrics-hud-grid .metric-opposing-item span {
  font-size: 1rem !important;
}

.metrics-hud-grid .metric-symbiotic-value {
  font-size: 1.75rem;
}

.metrics-hud-grid .metric-symbiotic-label {
  font-size: 0.65rem;
}

/* Webkit scrollbar styling for HUD - Cockpit theme */
.bento-metrics-hud::-webkit-scrollbar {
  height: 6px;
}

.bento-metrics-hud::-webkit-scrollbar-track {
  background: rgba(255, 0, 0, 0.9);
  border-radius: 4px;
}

.bento-metrics-hud::-webkit-scrollbar-thumb {
  background: rgba(255, 102, 0, 0.9);
  border-radius: 4px;
}

.bento-metrics-hud::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 102, 0, 0.9);
}

/* Individual Metric Box - Cockpit-style HUD panel */
.metric-hud-box {
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(255, 0, 0, 0.9));
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 
    0 2px 8px rgba(255, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 102, 0, 0.9);
  border: 1px solid rgba(255, 102, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 280px;
  flex: 1;  /* Allow boxes to grow and fill available space */
  max-width: 400px;  /* Slightly wider max for ultrawide screens */
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Subtle scan line effect for immersion */
.metric-hud-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 102, 0, 0.9), 
    transparent);
  animation: scan 3s linear infinite;
  pointer-events: none;
}

@keyframes scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(18vh - 2px)); }
}

.metric-hud-box:hover {
  box-shadow: var(--shadow-medium),
    inset 0 1px 0 rgba(255, 102, 0, 0.9);
  border-color: rgba(255, 102, 0, 0.9);
  transform: translateY(-2px);
}

.metric-hud-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 102, 0, 0.9);  /* Cyan glow for titles */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(255, 102, 0, 0.9);
}

.metric-hud-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.metric-hud-primary {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--DEBUG-bg-light);  /* Bright #FFFF00 for primary values */
  text-shadow: 0 0 20px rgba(255, 102, 0, 0.9);
}

.metric-hud-secondary {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(203, 213, 225, 0.8);  /* Softer #FFFF00 for secondary */
}

.metric-hud-label {
  font-size: 0.75rem;
  color: rgba(0, 255, 255, 0.9);  /* Muted cyan for labels */
  margin-top: 0.25rem;
}

.metric-hud-status {
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-weight: 600;
}

.metric-hud-status.good {
  background: var(--DEBUG-bg-light);
  color: var(--DEBUG-text-dark);
}

.metric-hud-status.warning {
  background: var(--DEBUG-bg-light);
  color: var(--DEBUG-text-dark);
}

.metric-hud-status.alert {
  background: var(--DEBUG-bg-light);
  color: var(--DEBUG-focus);
}

/* Opposing Metrics Layout (e.g., Progress vs Problems) */
.metric-opposing {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metric-opposing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.metric-bar {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--DEBUG-text-primary);
  position: relative;
  flex: 1;
  margin: 0 1rem;
}

.metric-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 4px;
}

.metric-bar-fill.green {
  background: linear-gradient(90deg, var(--DEBUG-focus), var(--DEBUG-text-dark));
}

.metric-bar-fill.red {
  background: linear-gradient(90deg, var(--DEBUG-focus), var(--DEBUG-focus));
}

/* Symbiotic Metrics Layout (e.g., Quality Duo) */
.metric-symbiotic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: center;
}

.metric-symbiotic-item {
  text-align: center;
}

.metric-symbiotic-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.metric-symbiotic-label {
  font-size: 0.75rem;
  color: var(--DEBUG-text-dark);
  margin-top: 0.25rem;
}

.metric-connector {
  width: 40px;
  height: 2px;
  background: var(--DEBUG-border);
  position: relative;
  margin: 0.5rem auto;
}

.metric-connector::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--base-bg-secondary);
  padding: 0 4px;
  color: var(--DEBUG-border);
  font-size: 0.875rem;
}

/* Tool buttons - theme-aware system tools (moved outside media query) */
.tool-button {
  background: rgba(var(--gt-focus-blue-rgb), 0.08);
  color: var(--base-text-primary);
  border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.2);
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-subtle);
  min-width: 170px;
}

.tool-button:hover {
  background: rgba(var(--gt-focus-blue-rgb), 0.15);
  border-color: rgba(var(--gt-focus-blue-rgb), 0.3);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.tool-button:focus-visible {
  outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
  outline-offset: 2px;
}

/* Icon-only tool buttons */
.tool-icon-only {
  min-width: unset !important;
  width: 48px;
  height: 48px;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.tool-icon-only:hover {
  transform: translateY(-2px) scale(1.05);
}

/* Remediation tool - proper theme-aware colors */
button.tool-remediation.tool-icon-only {
  background: rgba(var(--base-accent-yellow-rgb), 0.08) !important;
  border-color: rgba(var(--base-accent-yellow-rgb), 0.15) !important;
  color: var(--base-text-primary) !important;
}

button.tool-remediation.tool-icon-only:hover {
  background: rgba(var(--base-accent-yellow-rgb), 0.12) !important;
  border-color: rgba(var(--base-accent-yellow-rgb), 0.25) !important;
}

/* Responsive: Adapt for different cockpit widths */
@media (max-width: 1920px) {
  .dashboard-bento {
    grid-template-columns: 20% 60% 20%;
  }
}

@media (max-width: 1440px) {
  .dashboard-bento {
    grid-template-columns: 1fr;
    grid-template-rows: 
      minmax(280px, auto)   /* Chyron - header + PageStrip */
      minmax(220px, 1fr)    /* Workspace - single column */
      auto                  /* Module cards */
      auto;                 /* Viewers (HUD now inside) */
  }
  
  .bento-left-panel { grid-row: 2; }
  .bento-center-map { grid-row: 2; }
  .bento-right-panel { grid-row: 2; }
  .bento-module-row { grid-row: 3; }
  .bento-metric-viewers { grid-row: 4; }

  .map-and-gates {
    flex-direction: column;
  }

  .guild-gates-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    max-height: none;
  }

  .guild-gates-panel .guild-gates {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .dashboard-bento {
    grid-template-rows: 
      minmax(260px, auto)   /* Chyron - header + PageStrip (compact on mobile) */
      minmax(220px, 1fr)    /* Workspace - reclaimed HUD space */
      auto                  /* Module cards */
      auto;                 /* Viewers (HUD now inside) */
  }
  
  .bento-left-panel { grid-row: 2; }
  .bento-center-map { grid-row: 2; }
  .bento-right-panel { grid-row: 2; }
  .bento-module-row { grid-row: 3; }
  .bento-metric-viewers { grid-row: 4; }
  
  .metric-viewer-section {
    min-width: 600px;
  }
}

/* ===================================================================
   METRIC VIEWERS - D3 Interactive Visualizations
   Horizontal "train cars" layout - Cockpit observation panels
   =================================================================== */

/* Metric Viewers Row - Drawer using bento-container class */
.bento-metric-viewers {
  grid-column: 1 / -1;
  grid-row: 4;
  gap: var(--space-sm);  /* UX Guild: Golden ratio (13px) */
  padding: var(--space-sm) var(--space-md);  /* UX Guild: Fibonacci spacing (13px 21px) */
  /* UX Guild: Break out of grid padding to align with true viewport edges */
  margin-left: calc(-1 * var(--space-sm));
  margin-right: calc(-1 * var(--space-sm));
  width: calc(100% + (2 * var(--space-sm)));
}

.viewer-row-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);  /* UX Guild: Golden ratio (21px) */
  color: var(--DEBUG-text-primary);
}

.viewer-row-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.viewer-row-header p {
  margin: 0.35rem 0 0;
  font-size: 0.83rem;
  color: var(--DEBUG-text-dark);
}

.viewer-row-toggle {
  border: 2px solid var(--border-focus);
  background: rgba(var(--gt-midnight-rgb), 0.5);
  color: var(--DEBUG-text-primary);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.viewer-row-toggle:hover {
  background: rgba(var(--gt-focus-blue-rgb), var(--opacity-light));
  color: var(--DEBUG-text-primary);
  border-color: var(--border-focus);
}

.viewer-row-scroll {
  display: flex;
  flex-direction: row;
  gap: var(--space-md);  /* UX Guild: Golden ratio (21px) for visual breathing room */
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-xs);  /* UX Guild: Golden ratio (8px) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 102, 0, 0.9) rgba(255, 0, 0, 0.9);
}

.bento-metric-viewers.collapsed .viewer-row-scroll {
  display: none;
}

.bento-metric-viewers.collapsed .viewer-row-header {
  /* UX Guild: Collapsed drawer button spans full width for edge alignment */
  margin: 0;
  padding: var(--space-xs) var(--space-sm);  /* Golden ratio spacing consistency */
  background: rgba(var(--gt-midnight-rgb), var(--opacity-light));
  border-radius: 12px;
  border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.25);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(var(--gt-focus-blue-rgb), 0.05);
  width: 100%;  /* Force full width */
  box-sizing: border-box;  /* Include border in width */
}

.bento-metric-viewers.collapsed .viewer-row-header p {
  display: none;
}

.viewer-row-scroll::-webkit-scrollbar {
  height: 6px;
}

.viewer-row-scroll::-webkit-scrollbar-track {
  background: rgba(255, 0, 0, 0.9);
  border-radius: 4px;
}

.viewer-row-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 102, 0, 0.9);
  border-radius: 4px;
}

.viewer-row-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 102, 0, 0.9);
}

.metric-viewer-section {
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(255, 0, 0, 0.9));
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 
    0 2px 12px rgba(255, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 102, 0, 0.9);
  border: 1px solid rgba(255, 102, 0, 0.9);
  min-width: 800px;
  max-width: 900px;
  flex-shrink: 0;
  height: 100%;  /* Fill available row height */
  overflow-y: auto;
  transition: all 0.3s ease;
}

.metric-viewer-section:hover {
  border-color: rgba(255, 102, 0, 0.9);
  box-shadow: 
    var(--shadow-medium),
    inset 0 1px 0 rgba(255, 102, 0, 0.9);
}

/* Webkit scrollbar for horizontal viewer scroll - Cockpit theme */
.bento-metric-viewers::-webkit-scrollbar {
  height: 8px;
}

.bento-metric-viewers::-webkit-scrollbar-track {
  background: rgba(255, 0, 0, 0.9);
  border-radius: 4px;
}

.bento-metric-viewers::-webkit-scrollbar-thumb {
  background: rgba(255, 102, 0, 0.9);
  border-radius: 4px;
}

.bento-metric-viewers::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 102, 0, 0.9);
}

/* ===================================================================
   PHASE TRACKER - Game-Inspired Progress Banner
   Oregon Trail meets modern UI
   =================================================================== */

.phase-tracker {
  background: linear-gradient(135deg, var(--DEBUG-accent) 0%, var(--DEBUG-accent) 100%);
  border-radius: 12px;
  padding: 1.5rem;
  color: var(--base-text-primary);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-medium);
}

.phase-tracker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.phase-tracker-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.phase-tracker-current {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.phase-emoji {
  font-size: 2rem;
  line-height: 1;
}

.phase-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.phase-description {
  font-size: 0.875rem;
  opacity: 0.8;
}

.phase-tracker-progress {
  margin: 1.5rem 0;
}

.phase-tracker-bar {
  height: 32px;
  background: rgba(255, 255, 0, 0.8);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin-bottom: 1rem;
}

.phase-tracker-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--DEBUG-focus), var(--DEBUG-text-dark));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
}

.phase-tracker-percent {
  font-weight: 700;
  font-size: 0.875rem;
  text-shadow: 0 1px 2px rgba(255, 0, 0, 0.7);
}

.phase-tracker-milestones {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.phase-milestone {
  flex: 1;
  text-align: center;
  position: relative;
}

.phase-milestone-marker {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  position: relative;
  transition: all 0.3s ease;
}

.phase-milestone.completed .phase-milestone-marker {
  background: rgba(0, 255, 0, 0.8);
  border: 3px solid var(--DEBUG-focus);
}

.phase-milestone.current .phase-milestone-marker {
  background: rgba(255, 255, 0, 0.8);
  border: 3px solid var(--base-accent-yellow);
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
  animation: pulse-glow 2s ease-in-out infinite;
}

.phase-milestone.upcoming .phase-milestone-marker {
  background: rgba(255, 255, 0, 0.8);
  border: 3px solid rgba(255, 255, 0, 0.8);
  opacity: 0.6;
}

.phase-milestone-check {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--DEBUG-focus);
  color: var(--base-text-primary);
  font-size: 0.75rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--DEBUG-accent);
}

.phase-milestone-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--base-accent-yellow);
  animation: pulse-ring 2s ease-out infinite;
}

.phase-milestone-label {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.9;
}

.phase-tracker-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 0, 0.8);
}

.phase-stat {
  text-align: center;
}

.phase-stat-label {
  display: block;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}

.phase-stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 255, 0, 0.8);
  }
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* ===================================================================
   GUILD GATES - Boss Fight Checklist
   Dark Souls meets project management
   =================================================================== */

.guild-gates {
  background: var(--base-bg-secondary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.7);
}

.guild-gates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--DEBUG-text-primary);
}

.guild-gates-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--DEBUG-text-dark);
}

.guild-gates-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.gate-stat.completed {
  color: var(--DEBUG-focus);
}

.gate-stat.total {
  color: var(--DEBUG-text-dark);
}

.gate-stat.blocked {
  color: var(--DEBUG-focus);
  padding: 0.25rem 0.75rem;
  background: var(--DEBUG-bg-light);
  border-radius: 6px;
}

.guild-gates-status {
  margin-bottom: 1rem;
}

.gate-status-badge {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
}

.gate-status-badge.success {
  background: var(--DEBUG-bg-light);
  color: var(--DEBUG-text-dark);
  border: 2px solid var(--DEBUG-focus);
}

.gate-status-badge.warning {
  background: var(--DEBUG-bg-light);
  color: var(--DEBUG-text-dark);
  border: 2px solid var(--DEBUG-accent);
}

.gate-status-badge.danger {
  background: var(--DEBUG-bg-light);
  color: var(--DEBUG-focus);
  border: 2px solid var(--DEBUG-focus);
}

.guild-gates-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gate-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--DEBUG-text-primary);
  transition: all 0.2s ease;
}

.gate-item:hover {
  border-color: var(--DEBUG-border);
  box-shadow: var(--shadow-subtle);
}

.gate-item.completed {
  background: var(--DEBUG-bg-light);
  border-color: var(--DEBUG-bg-light);
}

.gate-item.blocked {
  background: var(--DEBUG-bg-light);
  border-color: var(--DEBUG-bg-light);
}

.gate-item.deferred {
  opacity: 0.6;
}

.gate-status-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.gate-content {
  flex: 1;
}

.gate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.gate-name {
  font-weight: 600;
  color: var(--DEBUG-text-dark);
  font-size: 0.9375rem;
}

.gate-guild {
  font-size: 1.25rem;
  cursor: help;
  transition: transform 0.2s ease;
}

.gate-guild:hover {
  transform: scale(1.2);
}

.gate-description {
  font-size: 0.875rem;
  color: var(--DEBUG-text-dark);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.gate-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.gate-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--DEBUG-border);
  padding: 0.25rem 0.5rem;
  background: var(--DEBUG-text-primary);
  border-radius: 4px;
}

.gate-defer-note {
  font-size: 0.75rem;
  color: var(--DEBUG-text-dark);
  font-style: italic;
}

.guild-gates-help {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--DEBUG-bg-light);
  border-left: 4px solid var(--DEBUG-accent);
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--DEBUG-accent);
}

.guild-gates-help strong {
  font-weight: 700;
}

/* ===================================================================
   OVERWATCHER ENCOUNTER - Oracle/Sage NPC Cutscene
   Zelda Great Fairy + Dark Souls bonfire NPC vibes
   =================================================================== */

.overwatcher-encounter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.overwatcher-encounter-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.overwatcher-encounter-modal {
  background: linear-gradient(135deg, var(--DEBUG-bg-dark) 0%, var(--DEBUG-text-dark) 100%);
  border: 3px solid var(--DEBUG-accent);
  border-radius: 12px;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 0 40px rgba(var(--gt-focus-blue-rgb), 0.6),
    0 0 80px rgba(var(--gt-focus-blue-rgb), 0.4),
    0 20px 60px rgba(0, 0, 0, 0.4);
  animation: overwatcher-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes overwatcher-entrance {
  0% {
    transform: scale(0.8) translateY(40px);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.overwatcher-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  border-bottom: 2px solid rgba(var(--gt-focus-blue-rgb), 0.3);
  background: linear-gradient(to bottom, rgba(var(--gt-focus-blue-rgb), 0.2), transparent);
}

.overwatcher-avatar {
  font-size: 4rem;
  line-height: 1;
  animation: overwatcher-glow 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(var(--gt-focus-blue-rgb), 0.8));
}

@keyframes overwatcher-glow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(var(--gt-focus-blue-rgb), 0.8));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(var(--gt-focus-blue-rgb), 1));
  }
}

.overwatcher-identity {
  flex: 1;
}

.overwatcher-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--DEBUG-text-primary);
  text-shadow: 0 0 20px rgba(var(--gt-focus-blue-rgb), 0.8);
}

.overwatcher-subtitle {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--DEBUG-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.overwatcher-close {
  font-size: 2rem;
  color: var(--base-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  transition: all 0.2s ease;
}

.overwatcher-close:hover {
  color: var(--base-text-primary);
  background: rgba(var(--gt-focus-blue-rgb), 0.1);
  transform: rotate(90deg);
}

.overwatcher-close:focus-visible {
  outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
  outline-offset: 2px;
}

.overwatcher-message {
  padding: 2rem;
}

.encounter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(var(--gt-focus-blue-rgb), 0.2);
  border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.4);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.encounter-icon {
  font-size: 1.25rem;
}

.encounter-type {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--DEBUG-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.overwatcher-quote {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--DEBUG-text-primary);
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 2px 8px rgba(var(--gt-focus-blue-rgb), 0.7);
}

.overwatcher-documents {
  padding: 0 2rem 2rem;
}

.documents-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--DEBUG-text-primary);
  margin-bottom: 1rem;
}

.documents-grid {
  display: grid;
  gap: 1rem;
}

.document-card {
  background: rgba(255, 255, 0, 0.8);
  border: 2px solid rgba(var(--gt-focus-blue-rgb), 0.3);
  border-radius: 8px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.document-card:hover {
  background: rgba(255, 255, 0, 0.8);
  border-color: rgba(var(--gt-focus-blue-rgb), 0.6);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.document-card.selected {
  background: rgba(var(--gt-focus-blue-rgb), 0.2);
  border-color: var(--DEBUG-accent);
  box-shadow: 0 0 20px rgba(var(--gt-focus-blue-rgb), 0.4);
}

.document-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.document-icon {
  font-size: 1.5rem;
}

.document-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--DEBUG-text-primary);
}

.document-preview {
  font-size: 0.875rem;
  color: var(--DEBUG-text-primary);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.document-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.document-source {
  color: var(--DEBUG-accent);
}

.document-vetted {
  color: var(--DEBUG-focus);
  font-weight: 600;
}

.documents-loading {
  text-align: center;
  padding: 3rem;
  color: var(--DEBUG-text-primary);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  border: 4px solid rgba(var(--gt-focus-blue-rgb), 0.2);
  border-top-color: var(--DEBUG-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.overwatcher-actions {
  display: flex;
  gap: 1rem;
  padding: 0 2rem 2rem;
}

.action-button {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  background: rgba(var(--gt-focus-blue-rgb), 0.15);
  color: var(--base-text-primary);
  border-color: rgba(var(--gt-focus-blue-rgb), 0.3);
}

.action-button.primary {
  background: rgba(var(--gt-focus-blue-rgb), 0.25);
  color: var(--base-text-primary);
  border-color: rgba(var(--gt-focus-blue-rgb), 0.5);
}

.action-button.primary:hover {
  background: rgba(var(--gt-focus-blue-rgb), 0.4);
  border-color: rgba(var(--gt-focus-blue-rgb), 0.6);
  box-shadow: 0 6px 16px rgba(var(--gt-focus-blue-rgb), 0.3);
}

.action-button.secondary {
  background: rgba(var(--gt-focus-blue-rgb), 0.1);
  color: var(--base-text-primary);
  border-color: rgba(var(--gt-focus-blue-rgb), 0.25);
}

.action-button.secondary:hover {
  background: rgba(var(--gt-focus-blue-rgb), 0.2);
  border-color: rgba(var(--gt-focus-blue-rgb), 0.4);
}

.action-button.tertiary {
  background: rgba(var(--gt-focus-blue-rgb), 0.05);
  color: var(--base-text-primary);
  border-color: rgba(var(--gt-focus-blue-rgb), 0.2);
}

.action-button.tertiary:hover {
  background: rgba(var(--gt-focus-blue-rgb), 0.15);
  border-color: rgba(var(--gt-focus-blue-rgb), 0.3);
}

.action-button:focus-visible {
  outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
  outline-offset: 2px;
}

.overwatcher-footer {
  padding: 1.5rem 2rem;
  border-top: 2px solid rgba(var(--gt-focus-blue-rgb), 0.3);
  background: rgba(255, 0, 0, 0.7);
}

.overwatcher-wisdom {
  margin: 0;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--DEBUG-accent);
  text-align: center;
  line-height: 1.6;
}

/* Persona Launcher & Chat Panels */
.persona-launcher-container {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  z-index: 40;
}

.persona-launcher-btn {
  background: var(--DEBUG-text-dark);
  color: var(--DEBUG-text-primary);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow-medium);
}

.persona-launcher-menu {
  width: 320px;
  background: rgba(255, 0, 0, 0.9);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 12px 30px rgba(255, 0, 0, 0.9);
}

.launcher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.launcher-header h3 {
  margin: 0;
  font-size: 1rem;
}

.close-all-btn {
  background: transparent;
  border: 1px solid var(--base-accent-yellow);
  color: var(--text-primary);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.persona-launch-card {
  background: rgba(255, 0, 0, 0.9);
  border: 1px solid var(--base-accent-yellow);
  border-radius: 10px;
  padding: 0.75rem;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.15s ease, border 0.15s ease;
}

.persona-launch-card.active {
  border-color: var(--border-focus);
  transform: translateY(-2px);
}

.persona-card-icon {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.persona-card-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.persona-card-role {
  font-size: 0.75rem;
  color: rgba(255, 255, 0, 0.8);
}

.persona-panels-container {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.persona-chat-panel {
  width: 360px;
  background: var(--DEBUG-bg-dark);
  color: var(--text-primary);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(255, 0, 0, 0.9);
  overflow: hidden;
}

.persona-chat-panel.collapsed {
  height: 52px;
}

.persona-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(255, 0, 0, 0.9);
}

.persona-info {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.persona-icon {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--DEBUG-border);
}

.persona-controls button {
  background: transparent;
  border: none;
  color: var(--DEBUG-border);
  cursor: pointer;
  margin-left: 0.35rem;
}

.persona-chat-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
  background: rgba(255, 0, 0, 0.9);
}

.persona-chat-messages {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-message.user .message-content {
  background: rgba(255, 102, 0, 0.9);
  border: 1px solid rgba(255, 102, 0, 0.9);
  align-self: flex-end;
}

.chat-message.assistant .message-content {
  background: rgba(15, 118, 110, 0.25);
  border: 1px solid rgba(45, 212, 191, 0.3);
}

.message-content {
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.persona-chat-input {
  display: flex;
  gap: 0.5rem;
}

.persona-chat-input textarea {
  flex: 1;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.9);
  background: rgba(255, 0, 0, 0.9);
  color: var(--text-primary);
  padding: 0.4rem 0.6rem;
}

.persona-chat-input .send-btn {
  background: var(--DEBUG-accent);
  border: none;
  border-radius: 8px;
  padding: 0 1rem;
  color: var(--DEBUG-bg-dark);
  font-weight: 600;
  cursor: pointer;
}

.persona-chat-loading {
      padding: 0.75rem 1rem;
      font-size: 0.85rem;
      color: var(--DEBUG-border);
    }

.persona-settings-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 1rem;
    }

.persona-settings-panel {
      width: min(960px, 95vw);
      max-height: 90vh;
      background: var(--base-bg-primary);
      color: var(--base-text-primary);
      border: 1px solid var(--base-border);
      border-radius: 12px;
      padding: 1.5rem;
      overflow-y: auto;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

.persona-settings-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
    }

.persona-settings-header h2 {
      margin: 0 0 0.25rem 0;
    }

.persona-settings-header-draggable {
      cursor: move !important;
      -webkit-user-select: none !important;
      user-select: none !important;
    }

.persona-settings-header p {
      margin: 0;
      font-size: 0.85rem;
      color: var(--base-text-secondary);
    }

.persona-settings-header .close-btn {
      background: transparent;
      border: 1px solid var(--base-border);
      color: var(--base-text-primary);
      padding: 0.35rem 0.85rem;
      border-radius: 8px;
      cursor: pointer;
    }

.persona-settings-controls {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

.persona-settings-controls select {
      flex: 1;
      border-radius: 8px;
      border: 1px solid var(--base-border);
      background: var(--base-bg-secondary);
      color: var(--base-text-primary);
      padding: 0.4rem 0.6rem;
    }

.persona-settings-meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 0.5rem;
      font-size: 0.85rem;
      color: var(--base-text-secondary);
    }

.persona-settings-error {
      background: rgba(239, 68, 68, 0.1);
      color: var(--base-error-text);
      border: 1px solid var(--base-error-border);
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      font-size: 0.9rem;
    }

.persona-settings-status {
      background: rgba(34, 197, 94, 0.1);
      color: var(--base-success-text);
      border: 1px solid var(--base-success-border);
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      font-size: 0.9rem;
    }

.persona-settings-section {
      background: var(--base-bg-secondary);
      border: 1px solid var(--base-border);
      border-radius: 12px;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

.persona-settings-section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
    }

.persona-settings-section-header h3 {
      margin: 0;
    }

.persona-settings-textarea {
      width: 100%;
      border-radius: 12px;
      border: 1px solid var(--base-border);
      background: var(--base-bg-primary);
      color: var(--base-text-primary);
      padding: 0.75rem;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: 0.9rem;
      min-height: 280px;
    }

.persona-settings-memory-actions {
      display: flex;
      gap: 0.5rem;
    }

.persona-settings-memory-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      max-height: 320px;
      overflow-y: auto;
    }

.persona-settings-memory-entry {
      border: 1px solid var(--base-border);
      border-radius: 10px;
      padding: 0.75rem;
      background: var(--base-bg-secondary);
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

.memory-entry-meta {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: var(--base-text-secondary);
    }

.persona-settings-empty {
      color: var(--base-text-secondary);
      font-size: 0.9rem;
      margin: 0;
    }

/* Embedded mode for PersonaSettingsPanel (inside Tesseract) */
.persona-settings-embedded {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  overflow-y: auto;
  padding: 0.5rem;
}

.persona-settings-header-embedded {
  margin-bottom: 0.5rem;
}

.persona-settings-header-embedded h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: var(--base-text-primary);
}

.persona-settings-header-embedded p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--base-text-secondary);
}

.persona-settings-embedded .persona-settings-section {
  background: var(--base-bg-secondary);
  border: 1px solid var(--base-border);
  border-radius: 10px;
  padding: 0.75rem;
}

.persona-settings-embedded .persona-settings-textarea {
  min-height: 180px;
}

.persona-settings-embedded .persona-settings-memory-list {
  max-height: 200px;
}

/* ============================================================
   Voice Equalizer Modal (VoiceBench UI)
   ============================================================ */

.voice-eq-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-backdrop, rgba(3, 7, 18, 0.85));
  z-index: 1200; /* Increased from 950 to be well above architecture modal (800) */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.voice-eq-modal {
  position: absolute;
  width: 92vw;
  max-width: 1500px;
  height: 86vh;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px var(--color-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.voice-eq-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: grab;
  background: var(--color-bg-tertiary);
}

.voice-eq-modal__header h2 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  color: var(--color-text-primary);
}

.voice-eq-header-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.voice-eq-header-controls select,
.voice-eq-header-controls button {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 999px;
  color: var(--color-text-primary);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
}

.voice-eq-header-controls button.ghost {
  border-color: var(--color-border-primary);
  color: var(--color-text-primary);
  background: none;
}

.voice-eq-header-controls button.ghost:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
}

.voice-eq-header-controls button.ghost:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.voice-eq-modal__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 28% 44% 28%;
  gap: 1rem;
  padding: 1rem 1.5rem 1.5rem;
  overflow: auto;
}

.voice-eq-info {
  margin: 0 1.5rem 0.5rem;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  color: var(--color-text-primary);
}

.voice-eq-info__section h4 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.voice-eq-info__section p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

.voice-eq-info__section ol,
.voice-eq-info__section ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.voice-eq-info__section li {
  margin-bottom: 0.2rem;
}

.voice-eq-panel {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.voice-eq-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.voice-eq-panel header h3 {
  margin: 0;
  letter-spacing: 1px;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.voice-eq-panel header span,
.voice-eq-panel header a {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.voice-eq-meter-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.voice-eq-meter {
  background: var(--color-bg-tertiary);
  border-radius: 12px;
  padding: 0.85rem;
  border: 1px solid transparent;
}

.voice-eq-meter--pass {
  border-color: rgba(34, 197, 94, 0.4);
}

.voice-eq-meter--watch {
  border-color: rgba(250, 204, 21, 0.4);
}

.voice-eq-meter--fail {
  border-color: rgba(248, 113, 113, 0.4);
}

.voice-eq-meter__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.voice-eq-meter__bar {
  position: relative;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: 999px;
  overflow: hidden;
}

.voice-eq-meter__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));
}

.voice-eq-meter__target {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  background: var(--color-text-primary);
}

.voice-eq-meter__note {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

.voice-eq-dimension-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

.voice-eq-dimension-card {
  background: var(--color-bg-tertiary);
  border-radius: 10px;
  padding: 0.65rem;
  border: 1px solid var(--color-border-subtle);
}

.voice-eq-dimension-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-primary);
}

.voice-eq-dimension-breakdown {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  margin: 0;
  word-break: break-word;
}

.voice-eq-panel--editor {
  background: var(--color-bg-secondary);
}

.voice-eq-editor-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.voice-eq-editor-actions button {
  background: var(--color-accent-primary);
  border: none;
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
}

.voice-eq-editor-actions button.ghost {
  background: none;
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}

.voice-eq-textarea {
  flex: 1;
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 0.75rem;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  resize: none;
}

.voice-eq-textarea:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1px var(--color-accent-primary);
}

.voice-eq-alert {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: var(--DEBUG-text-primary);
  font-size: 0.8rem;
}

.voice-eq-suggestions {
  margin-top: 0.75rem;
  background: rgba(23, 37, 84, 0.6);
  border-radius: 12px;
  padding: 0.75rem;
  border: 1px solid rgba(255, 102, 0, 0.9);
}

.voice-eq-suggestion-card {
  border: 1px dashed rgba(0, 255, 255, 0.9);
  border-radius: 10px;
  padding: 0.6rem;
  margin-top: 0.6rem;
}

.voice-eq-suggestion-original {
  font-size: 0.78rem;
  color: var(--DEBUG-text-dark);
  margin: 0 0 0.25rem;
}

.voice-eq-suggestion-proposed {
  margin: 0;
  color: var(--DEBUG-bg-light);
  font-size: 0.85rem;
}

.voice-eq-suggestion-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--DEBUG-border);
}

.voice-eq-suggestion-footer button {
  background: rgba(0, 255, 0, 0.8);
  border: 1px solid rgba(94, 234, 212, 0.5);
  border-radius: 6px;
  color: var(--gt-focus-blue-rgb);
  padding: 0.3rem 0.7rem;
}

.voice-eq-panel--insights {
  background: rgba(6, 12, 30, 0.9);
}

.voice-eq-insight-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 35%;
  overflow: auto;
}

.voice-eq-insight {
  border-radius: 10px;
  padding: 0.65rem;
  border: 1px solid rgba(0, 255, 255, 0.9);
}

.voice-eq-insight--critical {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(127, 29, 29, 0.35);
}

.voice-eq-insight--warning {
  border-color: rgba(250, 204, 21, 0.5);
  background: rgba(120, 53, 15, 0.35);
}

.voice-eq-insight strong {
  display: block;
  font-size: 0.85rem;
  color: var(--DEBUG-text-primary);
}

.voice-eq-insight p {
  margin: 0.3rem 0;
  font-size: 0.78rem;
  color: var(--DEBUG-text-primary);
}

.voice-eq-insight span {
  font-size: 0.7rem;
  color: var(--DEBUG-text-dark);
}

.voice-eq-highlight-list {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(51, 65, 85, 0.8);
  padding-top: 0.75rem;
  overflow: auto;
}

.voice-eq-highlight {
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, 0.9);
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.voice-eq-highlight p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--DEBUG-bg-light);
}

.voice-eq-highlight-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.35rem 0;
}

.voice-eq-highlight-tags span {
  font-size: 0.7rem;
  background: rgba(255, 102, 0, 0.9);
  border: 1px solid rgba(255, 102, 0, 0.9);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

.voice-eq-highlight small {
  font-size: 0.7rem;
  color: var(--DEBUG-text-dark);
}

.voice-eq-placeholder {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  margin: 0;
}

.voice-eq-specification {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.voice-eq-specification .voice-eq-info__section {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.voice-eq-specification .voice-eq-info__section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.voice-eq-specification h4 {
  color: var(--color-accent-primary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.voice-eq-specification strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.voice-eq-specification ul {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.voice-eq-specification li {
  margin-bottom: 0.25rem;
  color: var(--color-text-secondary);
}

.voice-eq-specification p {
  margin: 0.5rem 0;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

@media (max-width: 1280px) {
  .voice-eq-modal__grid {
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* ============================================================
   Voice Modulation Graph
   ============================================================ */

.voice-graph-wrapper {
  margin-top: 1rem;
  background: rgba(2, 6, 23, 0.9);
  border: 1px solid rgba(0, 255, 255, 0.9);
  border-radius: 12px;
  padding: 1rem;
  color: var(--DEBUG-text-primary);
}

.voice-graph-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.voice-graph-header h4 {
  margin: 0;
  font-size: 1rem;
}

.voice-graph-header p {
  margin: 0.25rem 0 0;
  color: var(--DEBUG-text-dark);
  font-size: 0.85rem;
}

.voice-graph-controls label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--DEBUG-text-dark);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.voice-graph-controls select {
  background: rgba(255, 0, 0, 0.9);
  border: 1px solid rgba(0, 255, 255, 0.9);
  border-radius: 999px;
  color: var(--DEBUG-text-primary);
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
}

.voice-graph-alert {
  margin-top: 0.5rem;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  color: var(--DEBUG-text-primary);
  font-size: 0.85rem;
}

.voice-graph-placeholder {
  margin-top: 0.5rem;
  color: var(--DEBUG-text-dark);
  font-size: 0.85rem;
}

.voice-graph-canvas {
  margin-top: 0.75rem;
  position: relative;
}

.voice-graph-node {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.voice-graph-node:hover {
  transform: scale(1.2);
}

.voice-graph-legend {
  position: absolute;
  right: 12px;
  bottom: 8px;
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.9);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  display: flex;
  gap: 0.8rem;
}

.voice-graph-legend span {
  display: inline-block;
  width: 12px;
  height: 2px;
  margin-right: 0.3rem;
  border-radius: 4px;
}

.voice-graph-legend span.truth {
  background: var(--border-focus);
}

.voice-graph-legend span.humor {
  background: var(--DEBUG-text-primary);
}

.voice-graph-legend span.grace {
  background: var(--gt-focus-blue-rgb);
}

.voice-graph-legend span.dimension {
  background: var(--gt-focus-blue-rgb);
}

/* Voice Graph Container - Aligns with module thumbnails */
.voice-graph-container {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding: 0 1rem;
  width: 100%;
  position: relative;
}

/* Ensure graph spans full width of content area */
.voice-graph-container .voice-graph-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Graph should align horizontally with module grid */
.voice-graph-container .voice-graph-canvas svg {
  width: 100%;
  display: block;
}

/* Responsive alignment with module thumbnails */
@media (max-width: 1280px) {
  .voice-graph-container {
    padding: 0 0.5rem;
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  .voice-graph-container {
    padding: 0 0.25rem;
    margin-top: 0.75rem;
  }
  
  .voice-graph-container .voice-graph-header {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .voice-graph-container .voice-graph-controls {
    align-self: flex-start;
  }
}

/* Voice Graph Status Indicator */
.voice-graph-status {
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.7);
  margin-top: 0.25rem;
  line-height: 1.3;
}

.voice-graph-demo-indicator {
  color: rgba(255, 255, 0, 0.7);
  margin-left: 0.5rem;
}

/* Draggable Modal Styles */
.draggable-modal {
  position: fixed !important;
  z-index: 10000 !important;
  background: var(--base-bg-primary) !important;
  border: 1px solid var(--base-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  min-width: 600px !important;
  min-height: 400px !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow: hidden !important;
}

.voice-equalizer-header {
  cursor: move !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  background: var(--base-bg-secondary) !important;
  border-bottom: 1px solid var(--base-border) !important;
  padding: 12px 16px !important;
}

.voice-equalizer-header:hover {
  background: var(--base-bg-tertiary) !important;
}

.resize-handle {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 20px !important;
  height: 20px !important;
  cursor: nwse-resize !important;
  background: linear-gradient(135deg, transparent 50%, var(--base-border) 50%) !important;
  border-bottom-right-radius: 8px !important;
}

.resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, var(--accent-color) 50%) !important;
}

/* Active utility toggle states */
.guild-dialogue-capture.active {
  background: rgba(var(--gt-focus-blue-rgb), 0.4) !important;
  box-shadow: 0 0 12px rgba(var(--gt-focus-blue-rgb), 0.5) !important;
}

.guild-dialogue-capture:not(.active) {
  background: rgba(var(--gt-focus-blue-rgb), 0.25) !important;
  box-shadow: none !important;
}

.guild-persona-launcher.active {
  background: rgba(var(--gt-focus-blue-rgb), 0.4) !important;
  box-shadow: 0 0 12px rgba(var(--gt-focus-blue-rgb), 0.5) !important;
}

.guild-persona-launcher:not(.active) {
  background: rgba(var(--gt-focus-blue-rgb), 0.25) !important;
  box-shadow: none !important;
}

/* =================================================================
   LOGOS CHAT MODAL - Draggable modal triggered from title bar
   ================================================================= */

.logos-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--gt-midnight-rgb, 15, 23, 42), 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.logos-modal-container {
  background: var(--base-bg-primary, #1e293b);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  width: 90%;
  max-width: 800px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--gt-focus-blue-rgb, 59, 130, 246), 0.3);
}

.logos-modal-header {
  background: linear-gradient(135deg, rgba(var(--gt-focus-blue-rgb, 59, 130, 246), 0.9) 0%, rgba(var(--gt-focus-blue-rgb, 59, 130, 246), 0.7) 100%);
  color: var(--base-text-primary, #f8fafc);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 2px solid rgba(var(--gt-focus-blue-rgb, 59, 130, 246), 0.5);
}

.logos-modal-header button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--base-text-primary, #f8fafc);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.logos-modal-header button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.logos-modal-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}


/* =================================================================
   OVERWATCHER FLOATING CHI RHO TOKEN
   ================================================================= */

.overwatcher-token {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gt-focus-blue-rgb), var(--DEBUG-text-dark));
  box-shadow: 
    0 0 20px rgba(var(--gt-focus-blue-rgb), 0.6),
    0 0 40px rgba(var(--gt-focus-blue-rgb), 0.4),
    0 0 60px rgba(var(--gt-focus-blue-rgb), 0.2),
    inset 0 0 20px rgba(var(--gt-focus-blue-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 9999;
  animation: tokenFloat 3s ease-in-out infinite;
}

.overwatcher-token:hover {
  transform: scale(1.1);
  box-shadow: 
    0 0 30px rgba(var(--gt-focus-blue-rgb), 0.8),
    0 0 50px rgba(var(--gt-focus-blue-rgb), 0.5),
    0 0 70px rgba(var(--gt-focus-blue-rgb), 0.3);
}

.overwatcher-token.dragging {
  transform: scale(0.95);
  opacity: 0.9;
}

.chi-rho-symbol {
  font-size: 48px;
  color: var(--DEBUG-text-primary);
  text-shadow: 
    0 0 10px rgba(var(--gt-focus-blue-rgb), 0.8),
    0 0 20px rgba(var(--gt-focus-blue-rgb), 0.6);
  position: relative;
  z-index: 2;
  animation: symbolGlow 2s ease-in-out infinite;
}

.token-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(var(--gt-focus-blue-rgb), 0.3) 70%, transparent 100%);
  animation: tokenPulse 2s ease-in-out infinite;
}

@keyframes tokenFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes symbolGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

@keyframes tokenPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0; }
}

/* =================================================================
   CONSTITUTIONAL AI GUIDE MODAL - Readable documentation viewer
   ================================================================= */

.constitutional-guide-modal {
  max-width: 1000px;
  width: 95%;
  max-height: 90vh;
  border-radius: 12px;
  background: var(--DEBUG-bg-dark);
  color: var(--DEBUG-text-primary);
  box-shadow: var(--shadow-heavy);
  display: flex;
  flex-direction: column;
}

.constitutional-guide-modal .modal-header {
  background: linear-gradient(135deg, var(--DEBUG-accent), var(--DEBUG-accent));
  border-bottom: 1px solid rgba(255, 102, 0, 0.9);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.constitutional-guide-modal .modal-header h2 {
  color: var(--DEBUG-text-primary);
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.constitutional-guide-modal .modal-subtitle {
  color: rgba(255, 255, 0, 0.8);
  font-size: 0.9rem;
  margin-top: 4px;
  font-style: italic;
}

.constitutional-guide-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--DEBUG-bg-dark);
}

.loading-state, .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 102, 0, 0.9);
  border-top: 3px solid var(--DEBUG-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state h3 {
  color: var(--DEBUG-accent);
  margin-bottom: 12px;
}

.error-state code {
  background: rgba(255, 0, 0, 0.9);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  color: var(--DEBUG-text-dark);
}

.guide-content {
  line-height: 1.7;
  font-size: 0.95rem;
}

.guide-content h1 {
  color: var(--DEBUG-accent);
  font-size: 2rem;
  margin-bottom: 8px;
  border-bottom: 2px solid rgba(255, 102, 0, 0.9);
  padding-bottom: 12px;
}

.guide-content h2 {
  color: var(--DEBUG-accent);
  font-size: 1.5rem;
  margin-top: 32px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 102, 0, 0.9);
  padding-bottom: 8px;
}

.guide-content h3 {
  color: var(--DEBUG-text-primary);
  font-size: 1.25rem;
  margin-top: 24px;
  margin-bottom: 12px;
}

.guide-content h4 {
  color: var(--DEBUG-text-primary);
  font-size: 1.1rem;
  margin-top: 20px;
  margin-bottom: 8px;
}

.guide-content p {
  margin-bottom: 16px;
  color: var(--DEBUG-text-primary);
}

.guide-content ul, .guide-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.guide-content li {
  margin-bottom: 8px;
  color: var(--DEBUG-text-primary);
}

.guide-content strong {
  color: var(--DEBUG-text-primary);
  font-weight: 600;
}

.guide-content code {
  background: rgba(255, 0, 0, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  color: var(--DEBUG-border);
  font-size: 0.9em;
}

.guide-content pre {
  background: rgba(255, 0, 0, 0.9);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
  border-left: 4px solid var(--DEBUG-accent);
}

.guide-content pre code {
  background: none;
  padding: 0;
  color: var(--DEBUG-text-primary);
}

.guide-content blockquote {
  border-left: 4px solid var(--DEBUG-accent);
  padding-left: 16px;
  margin: 16px 0;
  color: var(--DEBUG-text-primary);
  font-style: italic;
}

.guide-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.guide-content th, .guide-content td {
  border: 1px solid var(--base-border);
  padding: 8px 12px;
  text-align: left;
}

.guide-content th {
  background: var(--base-bg-tertiary);
  color: var(--base-text-primary);
  font-weight: 600;
}

.constitutional-guide-modal .modal-footer {
  background: rgba(255, 0, 0, 0.9);
  border-top: 1px solid rgba(0, 255, 255, 0.9);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.guide-info {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--DEBUG-border);
}

.btn-primary {
  background: linear-gradient(135deg, var(--DEBUG-accent), var(--DEBUG-accent));
  color: var(--base-text-primary);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--DEBUG-accent), var(--DEBUG-accent));
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

/* ============================================


/* ============================================
   Architecture Flow Matrix V2 Styles
   Extracted: Nov 20, 2025 11:10pm
   ============================================ */

/* NOTE: Using global Mustang GT variables from :root at top of file
   --gt-charcoal-rgb, --gt-midnight-rgb, --gt-shadow-rgb
   --gt-focus-blue-rgb, --text-primary, --border-subtle, etc. */

        .architecture-flow-matrix-v2 {
          position: fixed;
          top: 50px;
          left: 50px;
          right: 50px;
          bottom: 50px;
          background: var(--base-bg-primary);
          border: 1px solid var(--base-border);
          border-radius: 8px;
          overflow: hidden;
          z-index: 1000;
          display: flex;
          flex-direction: column;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .matrix-header-compact {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 8px 12px;
          border-bottom: 2px solid var(--base-border);
          background: var(--base-bg-secondary);
          flex-shrink: 0;
        }

        .header-icon {
          font-size: 24px;
          cursor: default;
        }

        .matrix-controls-inline {
          display: flex;
          gap: 8px;
          flex: 1;
        }

        /* Buttons - Unified Control Button System */
        .control-btn {
          padding: 4px 10px; /* Slightly more horizontal padding */
          border: 1px solid rgba(var(--gt-focus-blue-rgb), 0.3); /* Theme-aware */
          background: rgba(var(--gt-focus-blue-rgb), 0.15); /* Theme-aware */
          color: var(--base-text-primary); /* Theme-aware */
          cursor: pointer;
          border-radius: 4px;
          font-size: 18px; /* 50% larger from 12px */
          transition: all 0.2s;
          white-space: nowrap;
          min-width: 50px; /* Minimum width for icon-only buttons */
          width: auto; /* Auto-width based on content */
          height: 42px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          line-height: 1;
        }

        .control-btn:hover {
          background: rgba(var(--gt-focus-blue-rgb), 0.25); /* Theme-aware */
          border-color: rgba(var(--gt-focus-blue-rgb), 0.5); /* Theme-aware */
        }

        .control-btn.active {
          background: rgba(var(--gt-focus-blue-rgb), 0.4); /* Theme-aware */
          color: var(--base-text-primary); /* Theme-aware */
          border-color: rgba(var(--gt-focus-blue-rgb), 0.5); /* Theme-aware */
        }

        .control-btn:focus-visible {
          outline: 2px solid rgba(var(--gt-focus-blue-rgb), 0.6);
          outline-offset: 2px;
        }

        /* Foundation button special styling */
        .control-btn.foundation-btn {
          font-weight: bold;
        }
        
        .control-btn.foundation-btn.active {
          background: rgba(var(--gt-focus-blue-rgb), 0.4);
          color: var(--base-text-primary);
          border-color: rgba(var(--gt-focus-blue-rgb), 0.5);
        }
        
        .control-btn.foundation-btn:not(.active) {
          background: rgba(var(--base-accent-yellow-rgb), 0.15);
          color: var(--base-text-primary);
        }

        /* ========================================
           MISSION FOUNDATION MODAL STYLES
           Extracted from inline styles Nov 25, 2025
           Theme-aware, responsive, accessible
           ======================================== */

        /* Modal overlay and structure */
        .foundation-modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.7);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: var(--z-modal);
          padding: 20px;
          animation: fadeIn 0.2s ease;
        }

        .foundation-modal-content {
          background: var(--base-bg-primary);
          border: 2px solid var(--base-border-primary);
          border-radius: 8px;
          box-shadow: var(--shadow-heavy);
          width: 90%;
          max-width: 1000px;
          max-height: 85vh;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          animation: slideUp 0.3s ease;
        }

        .foundation-modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 24px;
          border-bottom: 2px solid var(--base-border-primary);
          background: linear-gradient(135deg, rgba(var(--base-accent-purple-rgb), 0.3) 0%, rgba(var(--base-accent-blue-rgb), 0.2) 100%);
        }

        .foundation-modal-header h2 {
          margin: 0;
          font-size: 24px;
          font-weight: 600;
          color: var(--base-text-primary);
        }

        .foundation-modal-subtitle {
          margin: 4px 0 0 0;
          font-size: 14px;
          color: var(--base-text-secondary);
          font-style: italic;
        }

        .foundation-modal-body {
          flex: 1;
          overflow-y: auto;
          padding: 0;
        }

        .modal-close-btn {
          background: none;
          border: none;
          font-size: 24px;
          cursor: pointer;
          color: var(--base-text-secondary);
          padding: 8px;
          line-height: 1;
          transition: color 0.2s, transform 0.2s;
        }

        .modal-close-btn:hover {
          color: var(--base-text-primary);
          transform: scale(1.1);
        }

        /* Mission Foundation Component Styles */
        .mission-foundation {
          background: var(--base-bg-primary);
          padding: 20px;
        }

        .foundation-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding-bottom: 15px;
          border-bottom: 2px solid var(--base-border-primary);
        }

        .foundation-header h3 {
          margin: 0;
          font-size: 18px;
          color: var(--base-text-primary);
        }

        .foundation-title-edit {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .foundation-title-input {
          font-size: 18px;
          font-weight: bold;
          border: 2px solid var(--base-accent-orange);
          border-radius: 4px;
          padding: 4px 8px;
          background: var(--base-bg-secondary);
          color: var(--base-text-primary);
          flex: 1;
          max-width: 400px;
        }

        .foundation-title-input:focus {
          outline: none;
          border-color: var(--base-accent-blue);
          box-shadow: 0 0 0 3px rgba(var(--base-accent-blue-rgb), 0.1);
        }

        .edit-indicator {
          font-size: 12px;
          color: var(--base-accent-orange);
        }

        .foundation-readiness {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .readiness-label {
          font-size: 14px;
          color: var(--base-text-secondary);
        }

        .readiness-bar {
          width: 200px;
          height: 20px;
          background: var(--base-bg-tertiary);
          border-radius: 10px;
          overflow: hidden;
          border: 1px solid var(--base-border-subtle);
        }

        .readiness-fill {
          height: 100%;
          transition: width 0.3s ease, background-color 0.3s ease;
        }

        .readiness-fill[data-readiness="complete"] {
          background-color: var(--base-accent-blue);
        }

        .readiness-fill[data-readiness="good"] {
          background-color: var(--base-accent-green);
        }

        .readiness-fill[data-readiness="fair"] {
          background-color: var(--base-accent-orange);
        }

        .readiness-fill[data-readiness="low"] {
          background-color: var(--base-accent-red);
        }

        .readiness-percent {
          font-size: 14px;
          font-weight: 600;
          color: var(--base-text-primary);
          min-width: 45px;
        }

        .foundation-questions {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .foundation-question-card {
          background: var(--base-bg-secondary);
          border: 1px solid var(--base-border-primary);
          border-radius: 6px;
          padding: 15px;
          transition: box-shadow 0.2s;
        }

        .foundation-question-card:hover {
          box-shadow: var(--shadow-subtle);
        }

        .question-header-inline {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 12px;
          margin-bottom: 10px;
          flex-wrap: wrap;
        }

        .question-meta {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
          min-width: 0;
        }

        .question-controls {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-shrink: 0;
        }

        .question-number {
          background: var(--base-bg-tertiary);
          color: var(--base-text-primary);
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: bold;
        }

        .question-label {
          font-weight: bold;
          color: var(--base-text-secondary);
          font-size: 12px;
          text-transform: uppercase;
        }

        .question-text-inline {
          color: var(--base-text-primary);
          font-size: 13px;
          line-height: 1.4;
          flex: 1;
          min-width: 0;
        }

        .guild-owner {
          color: var(--base-text-tertiary);
          font-size: 12px;
          margin-left: auto;
        }

        .confidence-badge {
          padding: 4px 12px;
          border: none;
          border-radius: 4px;
          font-size: 11px;
          font-weight: 600;
          cursor: pointer;
          transition: transform 0.2s, opacity 0.2s;
          color: white;
        }

        .confidence-badge:hover {
          transform: scale(1.05);
          opacity: 0.9;
        }

        /* Confidence level colors - theme-aware */
        .confidence-badge[data-confidence="placeholder"] {
          background-color: var(--base-accent-red);
        }

        .confidence-badge[data-confidence="needs_work"],
        .confidence-badge[data-confidence="needs work needed"] {
          background-color: var(--base-accent-orange);
        }

        .confidence-badge[data-confidence="approved"],
        .confidence-badge[data-confidence="guild approved"] {
          background-color: var(--base-accent-green);
        }

        .confidence-badge[data-confidence="locked"],
        .confidence-badge[data-confidence="foundation locked"] {
          background-color: var(--base-accent-blue);
        }

        .answer-input {
          width: 100%;
          min-height: 40px;
          height: 60px;
          padding: 8px;
          border-radius: 4px;
          font-size: 13px;
          resize: vertical;
          transition: border-color 0.3s;
          background: var(--base-bg-tertiary);
          color: var(--base-text-primary);
          border: 2px solid var(--base-border-primary);
        }

        .answer-input:focus {
          outline: none;
          border-color: var(--base-accent-blue);
          box-shadow: 0 0 0 3px rgba(var(--base-accent-blue-rgb), 0.1);
        }

        /* Answer input border colors based on confidence */
        .answer-input[data-confidence="placeholder"] {
          border-color: var(--base-accent-red);
        }

        .answer-input[data-confidence="needs_work"] {
          border-color: var(--base-accent-orange);
        }

        .answer-input[data-confidence="approved"] {
          border-color: var(--base-accent-green);
        }

        .answer-input[data-confidence="locked"] {
          border-color: var(--base-accent-blue);
        }

        .answer-display {
          border-left: 4px solid var(--base-border-primary);
          padding-left: 12px;
          margin-top: 10px;
        }

        /* Answer display border colors based on confidence */
        .answer-display[data-confidence="placeholder"] {
          border-left-color: var(--base-accent-red);
        }

        .answer-display[data-confidence="needs_work"] {
          border-left-color: var(--base-accent-orange);
        }

        .answer-display[data-confidence="approved"] {
          border-left-color: var(--base-accent-green);
        }

        .answer-display[data-confidence="locked"] {
          border-left-color: var(--base-accent-blue);
        }

        .answer-display p {
          margin: 0;
          color: var(--base-text-primary);
          font-size: 14px;
          line-height: 1.6;
        }

        .answer-display em {
          color: var(--base-accent-cyan);
        }

        .guild-feedback {
          margin-top: 10px;
          padding: 10px;
          background: rgba(var(--base-accent-red-rgb), 0.1);
          border-radius: 4px;
          border: 1px solid rgba(var(--base-accent-red-rgb), 0.3);
        }

        .guild-feedback label {
          display: block;
          font-size: 12px;
          color: var(--base-accent-red);
          margin-bottom: 5px;
          font-weight: 600;
        }

        .guild-feedback input {
          width: 100%;
          padding: 5px;
          border: 1px solid rgba(var(--base-accent-orange-rgb), 0.5);
          border-radius: 3px;
          font-size: 12px;
          background: var(--base-bg-tertiary);
          color: var(--base-text-primary);
        }

        .guild-feedback span,
        .guild-feedback-text {
          font-size: 12px;
          color: var(--base-accent-red);
        }

        .approval-note {
          margin-top: 10px;
          padding: 8px;
          background: rgba(var(--base-accent-green-rgb), 0.15);
          color: var(--base-accent-green);
          border-radius: 4px;
          font-size: 12px;
          border: 1px solid rgba(var(--base-accent-green-rgb), 0.3);
        }

        .locked-note {
          margin-top: 10px;
          padding: 8px;
          background: rgba(var(--base-accent-blue-rgb), 0.15);
          color: var(--base-accent-blue);
          border-radius: 4px;
          font-size: 12px;
          border: 1px solid rgba(var(--base-accent-blue-rgb), 0.3);
        }

        /* Loading state */
        .loading-state {
          padding: 40px;
          text-align: center;
          color: var(--base-text-secondary);
        }

        /* Animations */
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }

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

        .architecture-content {
          display: flex;
          gap: 20px;
          padding: 20px;
          flex: 1;
          overflow: auto;
          align-items: flex-start;
          min-height: 0;
        }

        /* Button color overrides (all buttons already have .control-btn base styling) */
        .control-btn.ai-btn {
          background: rgba(255, 255, 0, 0.8) !important;
        }

        .control-btn.save-btn {
          background: rgba(76,175,80,0.4) !important;
          min-width: 50px !important; /* Only enforce minimum width */
          width: 50px !important; /* Force exact width for icon-only */
          padding: 4px 8px !important; /* Tighter padding for icon-only */
        }

        .control-btn.export-btn {
          background: rgba(33,150,243,0.4) !important;
        }

        .control-btn.sync-btn {
          background: rgba(76,175,80,0.3) !important;
        }

        .control-btn.settings-btn {
          padding: 4px 8px !important;
        }

        .control-btn.export-btn:disabled,
        .control-btn.sync-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .circular-progress {
          position: relative;
          width: 40px;
          height: 40px;
          margin-left: auto;
        }

        .circular-progress .progress-bg {
          stroke: var(--base-border);
        }

        .circular-progress.high .progress-fill {
          stroke: var(--base-accent-green);
        }

        .circular-progress.medium .progress-fill {
          stroke: var(--base-accent-yellow);
        }

        .circular-progress.low .progress-fill {
          stroke: var(--base-accent-orange);
        }

        .progress-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 11px;
          font-weight: bold;
          color: var(--base-text-primary);
        }

        .inline-legend {
          display: flex;
          gap: 4px;
          margin-left: 8px;
          padding-left: 8px;
          border-left: 1px solid var(--base-border);
        }

        .inline-legend .legend-dot {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: bold;
          border: none !important;
          outline: none !important;
          box-shadow: none !important;
          cursor: help;
        }


        /* Generic Modal Base Patterns */
        .modal-overlay-base {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--overlay-dark);
          z-index: 800; /* Below other pop-ups (which are typically 1000+) */
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .modal-base {
          max-width: 90%;
          max-height: 80vh;
          background: var(--base-bg-secondary);
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          box-shadow: var(--shadow-modal);
        }

        .modal-base-medium { width: 600px; }
        .modal-base-large { width: 700px; }



        /* Generic Modal Structure */
        .modal-header {
          padding: 16px 20px;
          border-bottom: 1px solid var(--color-border-light);
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .modal-header h3 {
          margin: 0;
          color: var(--DEBUG-text-dark);
          font-size: 18px;
          font-weight: 600;
        }

        /* Close Button - specialized variant */
        .btn-close {
          background: none;
          border: none;
          font-size: 24px;
          color: var(--DEBUG-text-dark);
          cursor: pointer;
          padding: 0;
          width: 30px;
          height: 30px;
          transition: color 0.2s;
        }

        .btn-close:hover {
          color: var(--DEBUG-bg-dark);
        }


        .modal-body {
          padding: 20px;
          overflow-y: auto;
          flex: 1;
        }

        .modal-footer {
          padding: 16px 20px;
          border-top: 1px solid var(--color-border-light);
        }

        .modal-intro {
          margin-bottom: 20px;
          color: var(--DEBUG-text-dark);
          line-height: 1.5;
        }

        .modal-body h4 {
          margin: 24px 0 12px 0;
          color: var(--DEBUG-text-dark);
        }

        .stage-explanations {
          margin: 12px 0;
        }

        .stage-item {
          margin-bottom: 16px;
          padding: 12px;
          background: var(--DEBUG-bg-light);
          border-radius: 6px;
        }

        .stage-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 8px;
        }

        /* Badge - not a button but similar styling */
        .badge-base {
          padding: 4px 12px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: bold;
          display: inline-block;
        }

        .stage-badge {
          background: rgba(255, 255, 0, 0.8);
          padding: 2px 8px;
          border-radius: 12px;
          font-size: 11px;
          font-weight: 600;
          display: inline-block;
        }

        .stage-weight {
          color: var(--DEBUG-text-dark);
          font-size: 13px;
        }

        .stage-description {
          margin: 0;
          color: var(--DEBUG-text-dark);
          font-size: 13px;
          line-height: 1.4;
        }

        .modal-button {
          padding: 8px 24px;
          background: linear-gradient(135deg, var(--DEBUG-accent) 0%, var(--DEBUG-accent) 100%);
          color: var(--base-text-primary);
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-size: 14px;
          transition: all 0.2s;
        }

        .modal-button:hover {
          opacity: 0.9;
        }



        .mermaid-code {
          background: var(--color-bg-highlight);
          padding: 20px;
          border-radius: 4px;
          font-family: 'Courier New', monospace;
          font-size: 12px;
          white-space: pre-wrap;
          margin: 10px 0;
        }

        .mermaid-preview {
          margin-top: 20px;
          padding: 15px;
          background: var(--DEBUG-bg-light);
          border: 1px solid var(--border-subtle);
          border-radius: 4px;
        }

        .mermaid-tabs {
          display: flex;
          gap: 10px;
          margin-bottom: 20px;
          border-bottom: 2px solid var(--border-subtle);
        }

        /* Tab Buttons - specialized variant */
        .btn-tab {
          padding: 8px 16px;
          background: none;
          border: none;
          border-bottom: 2px solid transparent;
          margin-bottom: -2px;
          cursor: pointer;
          font-size: 14px;
          color: var(--DEBUG-text-dark);
          transition: all 0.2s;
        }

        .btn-tab.active {
          color: var(--DEBUG-accent);
          border-bottom-color: var(--DEBUG-accent);
        }

        .btn-tab:hover {
          color: var(--DEBUG-accent);
        }


        .mermaid-visual {
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: auto;
          padding: 20px;
          background: var(--DEBUG-bg-light);
          border-radius: 4px;
        }

        .mermaid-visual svg {
          max-width: 100%;
          height: auto;
        }

        .mermaid-source {
          overflow: auto;
        }

        /* Mission Statement Row Styling */
        .mission-statement-row {
          background: var(--gradient-panel);
          border: 2px solid var(--DEBUG-border);
          border-radius: 8px;
          margin: 12px;
          box-shadow: var(--shadow-card);
        }

        .mission-statement-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 20px;
          background: var(--gradient-mission);
          color: var(--base-text-primary);
          border-radius: 6px 6px 0 0;
        }

        .mission-statement-header h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
        }

        .mission-statement-meta {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .approval-date {
          font-size: 12px;
          background: rgba(255, 255, 0, 0.8);
          padding: 4px 8px;
          border-radius: 4px;
          font-weight: 500;
        }

        .mission-statement-header .modal-close {
          background: rgba(255, 255, 0, 0.8);
          color: var(--base-text-primary);
          border: none;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          cursor: pointer;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .mission-statement-header .modal-close:hover {
          background: rgba(255, 255, 0, 0.8);
        }

        .mission-statement-content {
          padding: 20px;
        }

        .mission-questions {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .mission-question-block {
          border: 1px solid var(--border-subtle);
          border-radius: 8px;
          padding: 16px;
          background: var(--base-bg-secondary);
          box-shadow: var(--shadow-subtle);
        }

        .mission-question {
          margin-bottom: 12px;
          font-size: 14px;
          color: var(--DEBUG-text-dark);
          line-height: 1.5;
        }

        .mission-question strong {
          color: var(--DEBUG-text-dark);
          font-weight: 600;
        }

        .mission-answer {
          background: var(--DEBUG-text-primary);
          border: 1px solid var(--border-subtle);
          border-radius: 6px;
          padding: 12px;
          font-family: 'Georgia', serif;
          font-size: 14px;
          line-height: 1.6;
          color: var(--DEBUG-text-dark);
          white-space: pre-wrap;
          word-wrap: break-word;
        }

        .mission-answer:empty::before {
          content: 'No answer recorded';
          color: var(--DEBUG-border);
          font-style: italic;
        }

        /* Responsive adjustments */
        @media (max-width: 1200px) {
          .mission-statement-row {
            margin: 8px;
          }
          
          .mission-questions {
            gap: 16px;
          }
          
          .mission-question-block {
            padding: 12px;
          }
        }

        /* Flow connection lines when enabled */
        .flow-line {
          position: absolute;
          background: var(--DEBUG-accent);
          height: 2px;
          transform-origin: left center;
          pointer-events: none;
          opacity: 0.6;
        }

        .flow-arrow {
          position: absolute;
          width: 0;
          height: 0;
          border-left: 8px solid var(--DEBUG-accent);
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;
          right: -8px;
          top: -3px;
        }

        /* Fullscreen Mode - BREAKS OUT of parent containers */
        .architecture-flow-matrix-v2.fullscreen-mode {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 100vw !important;
          height: 100vh !important;
          z-index: 2500; /* Above modals (2000) but below critical overlays */
          background: var(--base-bg-secondary);
          display: flex;
          flex-direction: column;
          overflow: hidden;
          margin: 0 !important;
          padding: 0 !important;
          transform: none !important;
        }

        .fullscreen-mode .matrix-content {
          flex: 1;
          overflow: auto;
          padding: 40px;
          background: var(--base-bg-primary);
          position: relative;
          z-index: 1;
        }

        .fullscreen-mode .matrix-sections,
        .fullscreen-mode .architecture-content {
          position: relative;
          z-index: 1;
          height: auto;
          min-height: calc(100vh - 120px);
          gap: 30px;
        }

        .fullscreen-mode .section-column {
          box-shadow: var(--shadow-medium);
        }

        .fullscreen-mode .chapter-card {
          min-height: 140px;
          padding: 20px;
          margin-bottom: 16px;
        }

        .fullscreen-mode .chapter-card input,
        .fullscreen-mode .chapter-card textarea {
          font-size: 14px;
        }

        .fullscreen-mode .matrix-header-compact {
          background: var(--base-bg-secondary);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
          padding: 12px 20px;
          position: sticky;
          top: 0;
          z-index: 10;
        }

        /* Escape hint in fullscreen */
        .fullscreen-mode::after {
          content: 'Press ESC to exit fullscreen';
          position: fixed;
          top: 10px;
          right: 10px;
          z-index: 20;
          background: rgba(255, 0, 0, 0.7);
          color: var(--base-text-primary);
          padding: 8px 16px;
          border-radius: 4px;
          font-size: 12px;
          pointer-events: none;
          animation: fadeInOut 5s;
        }

        @keyframes fadeInOut {
          0% { opacity: 0; }
          20% { opacity: 1; }
          80% { opacity: 1; }
          100% { opacity: 0; }
        }

        .ai-recommendations {
          padding: 8px 12px;
          background: var(--DEBUG-text-primary)3cd;
          border-bottom: 1px solid var(--DEBUG-text-primary);
          font-size: 12px;
        }

        .ai-recommendations h3 {
          margin: 0 8px 0 0;
          display: inline;
          font-size: 13px;
        }

        .recommendation {
          padding: 4px 8px;
          margin: 2px 0;
          background: var(--base-bg-secondary);
          border-left: 3px solid;
          border-radius: 2px;
          display: inline-block;
          margin-right: 8px;
        }

        .recommendation.critical {
          border-color: var(--DEBUG-accent);
        }

        .recommendation.high {
          border-color: var(--DEBUG-accent);
        }

        .recommendation.medium {
          border-color: var(--DEBUG-accent);
        }

        .rec-priority {
          font-weight: bold;
          text-transform: uppercase;
          margin-right: 6px;
          font-size: 10px;
        }

        .matrix-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
          padding: 20px;
          flex: 1;
          overflow: auto;
        }

        .matrix-column {
          flex: 1;
          min-width: 280px;
          max-width: 350px;
          border: 1px solid var(--base-border-primary);
          border-radius: 12px;
          padding: 0;
          background: var(--base-bg-secondary);
          box-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.08),
            0 4px 8px rgba(0, 0, 0, 0.06);
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }

        .section-header {
          display: flex;
          flex-direction: column;
          width: 100%;
        }

        .section-title-row {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 0;
          padding: 16px 16px 12px 16px;
          border-bottom: 2px solid var(--base-border-primary);
          background: var(--base-bg-tertiary);
        }

        .section-code {
          padding: 6px 12px;
          border-radius: 4px;
          font-weight: 700;
          font-size: 14px;
          cursor: pointer;
          margin: 0;
          border: 1px solid rgba(255, 255, 255, 0.3);
          box-shadow: 
            0 0 8px currentColor,
            0 2px 4px rgba(0, 0, 0, 0.3);
          transition: all 0.2s ease;
        }
        
        .section-code:hover {
          box-shadow: 
            0 0 12px currentColor,
            0 4px 8px rgba(0, 0, 0, 0.4);
          transform: translateY(-1px);
        }

        .section-title {
          flex: 1;
          margin: 0;
          color: var(--base-text-primary);
          font-style: italic;
          font-weight: 400;
          font-size: 16px; /* Golden ratio base */
        }

        .section-title-input {
          flex: 1;
          padding: 5px;
          border: 1px solid var(--base-border-subtle);
          background: var(--base-bg-primary);
          color: var(--base-text-primary);
          border-radius: 4px;
        }

        .section-purpose {
          margin: 0;
          padding: 12px 16px;
          width: 100%;
          display: block;
          box-sizing: border-box;
        }

        .section-purpose p {
          margin: 0;
          font-size: 15px;
          color: var(--base-text-primary);
          line-height: 1.6;
        }

        .section-purpose textarea {
          width: 100%;
          padding: 5px;
          border: 1px solid var(--base-border-subtle);
          background: var(--base-bg-primary);
          color: var(--base-text-primary);
          border-radius: 4px;
          font-size: 13px;
        }

        .section-notes {
          background: var(--status-blue-bg);
          border-left: 3px solid var(--status-blue);
          padding: 8px 12px;
          border-radius: 4px;
          font-size: 12px;
          margin-top: 8px;
          color: var(--base-text-primary);
        }

        .chapters-list {
          display: flex;
          flex-direction: column;
          gap: 0;
          padding: 16px;
        }

        .chapter-card {
          padding: 14px;
          background: var(--base-bg-secondary);
          border: 1px solid var(--base-border-primary);
          border-radius: 8px;
          margin-bottom: 12px;
          box-shadow: 
            0 1px 3px rgba(0, 0, 0, 0.12),
            0 1px 2px rgba(0, 0, 0, 0.08);
          transition: all 0.2s ease;
        }
        
        .chapter-card:hover {
          box-shadow: 
            0 4px 6px rgba(0, 0, 0, 0.15),
            0 2px 4px rgba(0, 0, 0, 0.12);
          transform: translateY(-1px);
          border-color: var(--status-blue);
        }

        .chapter-header {
          display: flex;
          gap: 12px;
          align-items: flex-start;
          margin-bottom: 12px;
          padding-bottom: 10px;
          border-bottom: 1px solid var(--base-border-secondary);
        }

        .chapter-code {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 70px;
          padding: 8px 12px;
          border-radius: 4px;
          font-weight: 700;
          font-size: 13px;
          cursor: pointer;
          border: 1px solid rgba(255, 255, 255, 0.4);
          transition: all 0.2s ease;
          flex-shrink: 0;
          /* Glow effect matching confidence color */
          box-shadow: 
            0 0 8px currentColor,
            0 2px 4px rgba(0, 0, 0, 0.3);
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        }
        
        .chapter-code:hover {
          box-shadow: 
            0 0 14px currentColor,
            0 4px 8px rgba(0, 0, 0, 0.4);
          transform: translateY(-2px) scale(1.05);
          border-color: rgba(255, 255, 255, 0.6);
        }
        
        .chapter-title,
        .chapter-title-input {
          flex: 1;
          font-weight: 800;
          font-size: 26px; /* 16px × 1.618 (golden ratio) */
          line-height: 1.3;
          color: var(--base-text-primary);
          margin: 0;
          letter-spacing: -0.02em;
        }
        
        .chapter-title-input {
          padding: 4px 8px;
          border: 1px solid var(--base-border-subtle);
          background: var(--base-bg-primary);
          border-radius: 4px;
        }

        .chapter-premise {
          margin: 8px 0;
          padding-left: 32px;
        }

        .chapter-premise p {
          margin: 0;
          font-size: 15px; /* 24px ÷ 1.618 ≈ 15px */
          line-height: 1.618; /* Golden ratio line-height */
          color: var(--base-text-secondary);
          font-style: italic;
        }

        .chapter-premise textarea {
          width: 100%;
          padding: 3px 5px;
          border: 1px solid var(--base-border-subtle);
          background: var(--base-bg-primary);
          color: var(--base-text-primary);
          border-radius: 2px;
          font-size: 12px;
          resize: none;
        }

        .chapter-premise select {
          margin-top: 5px;
          padding: 2px 5px;
          border: 1px solid var(--base-border-subtle);
          background: var(--base-bg-primary);
          color: var(--base-text-primary);
          border-radius: 2px;
          font-size: 11px;
        }

        .guild-notes {
          display: flex;
          align-items: center;
          gap: 6px;
          background: var(--status-orange-bg);
          border-left: 3px solid var(--status-orange);
          padding: 8px 10px;
          border-radius: 4px;
          margin-top: 8px;
          font-size: 12px;
          color: var(--base-text-primary);
        }

        .guild-notes textarea {
          flex: 1;
          padding: 2px 5px;
          border: 1px solid var(--DEBUG-text-primary);
          border-radius: 2px;
          font-size: 11px;
        }

        .flow-indicators {
          margin-top: 10px;
          padding-top: 8px;
          border-top: 1px dashed var(--base-border-secondary);
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }

        .flow-tag {
          font-size: 10px;
          background: var(--DEBUG-accent);
          color: var(--base-text-primary);
          padding: 2px 6px;
          border-radius: 10px;
        }

        .guild-checks {
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px solid var(--DEBUG-border);
        }

        .guild-checks h5 {
          margin: 0 0 5px 0;
          font-size: 12px;
          color: var(--DEBUG-text-dark);
        }

        .guild-check {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 11px;
          margin: 3px 0;
        }

/* =================================================================
   WORKSPACE SELECTOR - IDE-style workspace switcher
   ================================================================= */
.workspace-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--base-bg-secondary);
  border-radius: 8px;
  border: 1px solid rgba(var(--base-border-primary-rgb), var(--opacity-light));
}

.workspace-empty {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  color: var(--base-text-tertiary);
  font-size: var(--text-sm);
}

.workspace-dropdown {
  position: relative;
}

.workspace-button {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  background: var(--base-bg-primary);
  border: 1px solid rgba(var(--base-border-primary-rgb), var(--opacity-medium));
  border-radius: 6px;
  color: var(--base-text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.workspace-button:hover {
  background: rgba(var(--base-accent-primary-rgb), var(--opacity-subtle));
  border-color: rgba(var(--base-accent-primary-rgb), var(--opacity-light));
}

.workspace-icon {
  font-size: var(--text-base);
}

.workspace-label {
  flex: 1;
  text-align: left;
  font-weight: 500;
}

.workspace-arrow {
  font-size: var(--text-xs);
  color: var(--base-text-tertiary);
}

.workspace-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-xs);
  background: var(--base-bg-primary);
  border: 1px solid rgba(var(--base-border-primary-rgb), var(--opacity-medium));
  border-radius: 6px;
  box-shadow: var(--shadow-medium);
  max-height: 300px;
  overflow-y: auto;
  z-index: var(--z-drawer);
}

.workspace-option {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm);
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid rgba(var(--base-border-primary-rgb), var(--opacity-subtle));
}

.workspace-option:last-child {
  border-bottom: none;
}

.workspace-option:hover {
  background: rgba(var(--base-accent-primary-rgb), var(--opacity-subtle));
}

.workspace-option.active {
  background: rgba(var(--base-accent-primary-rgb), var(--opacity-light));
}

.workspace-option-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--base-text-primary);
  margin-bottom: 2px;
}

.workspace-option-path {
  font-size: var(--text-xs);
  color: var(--base-text-tertiary);
  font-family: monospace;
}

.workspace-status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--base-bg-primary);
  border-radius: 6px;
  font-size: var(--text-sm);
}

.status-icon {
  font-size: var(--text-base);
}

.status-label {
  flex: 1;
  color: var(--base-text-secondary);
}

.status-spinner {
  font-size: var(--text-base);
  animation: spin 1s linear infinite;
}

.status-refresh {
  padding: 2px 6px;
  background: transparent;
  border: 1px solid rgba(var(--base-border-primary-rgb), var(--opacity-light));
  border-radius: 4px;
  color: var(--base-text-tertiary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.status-refresh:hover {
  background: rgba(var(--base-accent-primary-rgb), var(--opacity-subtle));
  color: var(--base-text-primary);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.workspace-issues {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: rgba(var(--gt-focus-red-rgb), var(--opacity-subtle));
  border: 1px solid rgba(var(--gt-focus-red-rgb), var(--opacity-light));
  border-radius: 6px;
}

.issues-header {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--base-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.issues-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.issue-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--base-bg-primary);
  border-radius: 4px;
}

.issue-icon {
  font-size: var(--text-sm);
}

.issue-message {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--base-text-secondary);
}

.issue-cta {
  padding: 4px 10px;
  background: rgba(var(--base-accent-primary-rgb), var(--opacity-light));
  border: 1px solid rgba(var(--base-accent-primary-rgb), var(--opacity-medium));
  border-radius: 4px;
  color: var(--base-text-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.issue-cta:hover {
  background: rgba(var(--base-accent-primary-rgb), var(--opacity-medium));
  transform: translateY(-1px);
  box-shadow: var(--shadow-subtle);
}