/* === mobile-enhancements.css === */
/**
 * Mobile Enhancements for EVE AI
 *
 * Comprehensive mobile-first responsive improvements
 * for a world-class mobile experience.
 */

/* ==================== BASE MOBILE IMPROVEMENTS ==================== */

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Improve touch targets - minimum 44x44px */
@media (max-width: 768px) {
    button,
    .btn,
    .nav-item,
    input[type="submit"],
    a.btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .top-header {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .chat-input-container {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .sidebar {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* ==================== MOBILE HEADER ==================== */

@media (max-width: 768px) {
    .top-header {
        height: 48px; /* Compressed from 52px - saves 4px */
        padding: 0 10px; /* Tighter horizontal padding */
    }

    .logo {
        font-size: 17px; /* Slightly smaller from 18px */
        gap: 6px; /* Tighter from 8px */
    }

    .logo-icon {
        width: 26px; /* Reduced from 28px */
        height: 26px;
    }

    .consciousness-status {
        display: none;
    }

    .header-search {
        display: none;
    }

    .header-right {
        gap: 8px;
    }

    .header-btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Gamification badge mobile */
    .gamification-badge {
        padding: 4px 8px;
        gap: 6px;
    }

    .gamification-badge .badge-xp-bar {
        display: none;
    }

    .gamification-badge .badge-level {
        font-size: 12px;
    }

    .gamification-badge .badge-streak {
        font-size: 12px;
    }
}

/* ==================== MOBILE SIDEBAR (in 3-page swipe) ==================== */

@media (max-width: 900px) {
    /* Sidebar is a full-width swipe page in 3-page horizontal layout */
    .sidebar {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        /* transform managed by --swipe-page CSS variable and inline JS enforcer */
    }

    .sidebar.open,
    .sidebar.collapsed {
        /* Don't override transform — swipe JS manages it via inline styles */
    }

    /* Sidebar backdrop not needed in swipe mode */
    .sidebar-backdrop {
        display: none !important;
    }

    .new-chat-btn {
        padding: 14px 16px;
    }

    .nav-item {
        padding: 14px;
    }

    /* Desktop collapse button hidden on mobile */
    .sidebar-collapse-btn {
        display: none;
    }
}

/* ==================== MOBILE CHAT ==================== */

@media (max-width: 768px) {
    .messages-container {
        padding: 8px 10px; /* Compressed from 12px - saves 8px vertical */
    }

    .messages-inner {
        padding: 0 6px; /* Reduced from 0 12px */
        gap: 2px; /* Tighter from 4px */
    }

    .message {
        max-width: 92%; /* Slightly wider from 90% */
        gap: 6px; /* Tighter from 8px */
        padding: 10px 12px; /* Compressed from 12px 16px */
        border-radius: 16px; /* Tighter from 20px */
    }

    .message.user {
        border-bottom-right-radius: 4px;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
    }

    .message.assistant {
        border-bottom-left-radius: 4px;
        background: rgba(26, 36, 68, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .message-avatar {
        width: 28px; /* Reduced from 32px */
        height: 28px;
        font-size: 13px; /* Reduced from 16px */
        border-radius: 10px; /* Tighter from 12px */
    }

    /* Disable avatar glow animation on mobile for battery */
    .message-avatar.assistant::after {
        animation: none;
        opacity: 0.15;
    }

    .message-content {
        padding: 0; /* Remove if present - padding already on .message */
        font-size: 15px;
        line-height: 1.5; /* Compressed from 1.65 - saves ~2px per line */
    }

    .message-content p {
        margin-bottom: 8px; /* Tighter from 12px */
    }

    .message-sender {
        font-size: 11px; /* Reduced from 12px */
        margin-bottom: 2px; /* Tighter from 4px */
        text-transform: none; /* Remove uppercase - less shouty */
        font-weight: 500; /* Lighter from 600 */
        letter-spacing: 0; /* Remove extra spacing */
    }

    .message-sender.user-name {
        color: #b4c1fc; /* Slightly lighter for contrast */
    }

    .message-sender.assistant-name {
        color: #d4c5fd; /* Slightly lighter */
    }

    .message-timestamp {
        font-size: 9px; /* Reduced from 10px */
    }

    /* Better text contrast on small screens */
    .message.user .message-text {
        color: #eff1ff;
        font-weight: 400;
    }

    .message.assistant .message-text {
        color: #e8e8ee;
    }

    .message-actions {
        position: relative;
        opacity: 1;
        margin-top: 6px; /* Reduced from 8px */
        justify-content: flex-start;
        gap: 4px; /* Tighter spacing */
    }

    .message-action {
        padding: 4px 8px;
        font-size: 11px;
    }

    /* Disable hover effects on mobile */
    .message:hover {
        transform: none;
        box-shadow: none;
    }

    /* Welcome screen mobile */
    .welcome-screen {
        padding: 16px 12px; /* Tighter from 20px */
    }

    .welcome-icon {
        font-size: 44px !important; /* Reduced from 48px */
    }

    .welcome-title {
        font-size: 22px !important; /* Reduced from 24px */
        margin-bottom: 8px;
    }

    .welcome-subtitle {
        font-size: 13px !important; /* Reduced from 14px */
        padding: 0 10px;
        line-height: 1.4; /* Tighter */
    }

}

/* ==================== MOBILE CHAT INPUT ==================== */

@media (max-width: 768px) {
    .chat-input-container {
        padding: 10px; /* Compressed from 12px */
    }

    .chat-input-inner {
        padding: 0; /* Remove if doubling up with wrapper */
    }

    .chat-input-wrapper {
        padding: 6px 6px 6px 14px; /* Compressed from 8px 8px 8px 20px */
        border-radius: 24px; /* Tighter from 28px */
    }

    .chat-input,
    #chatInput {
        font-size: 16px !important; /* 16px prevents iOS auto-zoom on focus */
        min-height: 44px;
        line-height: 1.4; /* Tighter from inherited 1.65 */
    }

    .input-actions {
        gap: 4px;
    }

    .input-action-btn {
        width: 40px;
        height: 40px;
    }

    .send-btn {
        width: 44px;
        height: 44px;
    }

    /* Memory stats bar mobile */
    .memory-stats-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .memory-stat {
        font-size: 11px;
    }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
    .message {
        padding: 8px 10px; /* Even tighter */
        gap: 5px;
    }

    .message-avatar {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .message-content {
        font-size: 14px; /* Slightly smaller but readable */
    }

    .chat-input-container {
        padding: 8px; /* Minimal */
    }

    .input-actions .input-action-btn:nth-child(n+3) {
        display: none;
    }

    .memory-stats-bar {
        display: none;
    }
}

/* Extra compression for tiny screens */
@media (max-width: 360px) {
    /* Hide timestamp to save space */
    .message-timestamp {
        display: none;
    }

    /* Minimal sender label */
    .message-sender {
        font-size: 10px;
        margin-bottom: 1px;
    }

    .top-header {
        height: 44px; /* Even more compact */
    }
}

/* ==================== MOBILE VIEWS/SETTINGS ==================== */

@media (max-width: 768px) {
    .view-content {
        padding: 16px;
    }

    .settings-section {
        padding: 16px;
        margin-bottom: 16px;
    }

    .settings-section h2 {
        font-size: 18px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        font-size: 13px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 12px;
    }

    /* Analytics grid mobile */
    .analytics-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        padding: 16px;
    }

    /* Team members grid */
    .team-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== MOBILE MODALS ==================== */

@media (max-width: 768px) {
    .modal-content,
    .a11y-modal-content,
    .achievements-content {
        width: 95% !important;
        max-width: none !important;
        max-height: 85vh;
        margin: auto;
        border-radius: 16px;
    }

    .onboarding-tooltip {
        position: fixed !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        max-width: none !important;
        transform: none !important;
    }

    .onboarding-tooltip.active {
        transform: none !important;
    }

    /* Achievements panel mobile */
    .achievements-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .achievement-item {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
    }

    .achievement-icon {
        margin-bottom: 12px;
    }
}

/* ==================== MOBILE VOICE INDICATOR ==================== */

@media (max-width: 768px) {
    .voice-speaking-indicator {
        bottom: 80px;
        left: 16px;
        right: 16px;
        padding: 12px 16px;
    }

    .voice-waveform {
        height: 24px;
    }
}

/* ==================== MOBILE COGNITIVE RAIL (Swipe Page 2) ==================== */

@media (max-width: 900px) {
    /* Rail is a full-width swipe page */
    .cognitive-rail {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        padding: 12px !important;
        padding-bottom: 60px; /* Space for swipe indicators */
    }

    .cognitive-rail .rail-panel {
        margin-bottom: 8px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.02);
    }

    .cognitive-rail .rail-panel-header {
        padding: 12px 14px;
        font-size: 13px;
    }

    .cognitive-rail .rail-panel-body {
        padding: 12px 14px;
    }

    /* Ensure rail content doesn't overflow */
    .cognitive-rail canvas {
        max-width: 100%;
        height: auto !important;
    }

    .cognitive-rail .rail-chart-container {
        max-width: 100%;
        overflow: hidden;
    }
}

/* ==================== MOBILE AVATAR PANEL ==================== */

@media (max-width: 768px) {
    .eve-avatar-panel {
        width: 100% !important;
        max-width: 300px;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .eve-avatar-panel.collapsed {
        height: 60px !important;
        width: 60px !important;
        border-radius: 30px !important;
        right: 16px !important;
        bottom: 100px !important;
    }
}

/* ==================== MOBILE DEVELOPER LOG ==================== */

@media (max-width: 768px) {
    #view-developer-log {
        padding: 12px;
    }

    .dev-log-entry {
        padding: 10px 12px;
    }

    .dev-log-entry-content {
        font-size: 13px;
    }

    .implementation-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    .implementation-title-inline {
        width: 100%;
        order: 10;
        margin-top: 4px;
    }
}

/* ==================== TOUCH OPTIMIZATIONS ==================== */

@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices for better performance */
    .nav-item:hover,
    .message-action:hover,
    .feature-card:hover,
    .message:hover {
        transform: none;
        box-shadow: none;
    }

    .message:hover .message-avatar {
        transform: none;
    }

    /* Add active states instead for tactile feedback */
    .nav-item:active,
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* Prevent accidental double-tap zoom */
    button,
    a,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }

    /* Disable animations on touch devices for battery savings */
    .message-avatar.assistant::after,
    .status-indicator {
        animation: none !important;
    }
}

/* ==================== LANDSCAPE PHONE ==================== */

@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 80px 40px 40px;
    }

    .welcome-screen {
        padding: 16px;
    }

    .messages-container {
        max-height: 50vh;
    }
}

/* Landscape mode - maximize chat space on short screens */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 450px) {
    .top-header {
        height: 44px; /* Even tighter in landscape */
    }

    .messages-container {
        padding: 6px 8px; /* Minimal padding */
    }

    .message {
        padding: 8px 10px;
    }

    .chat-input-container {
        padding: 8px;
    }

    /* Hide welcome screen in landscape to save space */
    .welcome-screen {
        display: none;
    }

    .message-sender {
        display: none; /* Hide sender labels to save vertical space */
    }

    .message-timestamp {
        display: none;
    }
}

/* ==================== TABLET OPTIMIZATIONS ==================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 240px;
    }

    .features-grid,
    .testimonials-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== PRINT STYLES ==================== */

@media print {
    .sidebar,
    .top-header,
    .chat-input-container,
    .voice-speaking-indicator,
    .eve-avatar-panel,
    .gamification-badge,
    .onboarding-overlay,
    .skip-links {
        display: none !important;
    }

    .messages-container {
        max-height: none;
        overflow: visible;
    }

    .message {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ==================== REDUCED DATA MODE ==================== */

@media (prefers-reduced-data: reduce) {
    .hero::before,
    .hero::after,
    #starCanvas {
        display: none;
    }

    * {
        background-image: none !important;
    }
}

/* ==================== DARK MODE ENHANCEMENTS ==================== */

@media (prefers-color-scheme: dark) {
    /* Already dark theme, but ensure proper contrast */
    ::selection {
        background: rgba(102, 126, 234, 0.4);
        color: #fff;
    }
}

/* ==================== ACCESSIBILITY - REDUCED MOTION ==================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep essential status indicators visible but static */
    .typing-indicator,
    .loading-spinner,
    .pulse {
        animation: none !important;
    }
}

/* ==================== HIGH DPI SCREENS ==================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders on retina displays */
    .message-content,
    .btn,
    .input-container,
    .settings-section {
        border-width: 0.5px;
    }
}

/* ==================== PRINT STYLES ==================== */

@media print {
    .sidebar,
    .top-header,
    .chat-input-container,
    .avatar-panel,
    .mobile-menu-btn,
    .consciousness-status {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .messages-container {
        max-height: none !important;
        overflow: visible !important;
    }

    .message {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ============================================================
   APP PAGE RESPONSIVE SYSTEM
   Covers all app/* pages beyond dashboard/chat.
   Uses a generic token approach so pages that already define
   their own breakpoints benefit from the fallback layer, while
   pages with no breakpoints get sensible mobile behaviour.
   ============================================================ */

/* ---- iOS / Android zoom guard: all text inputs >= 16px ---- */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---- Generic grid collapse tokens ---- */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .col-2,
    .col-3,
    .col-4,
    .two-col,
    .three-col,
    .four-col,
    .columns-2,
    .columns-3,
    .columns-4 {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Metric / stat card rows ---- */
@media (max-width: 768px) {
    .metrics-grid,
    .stats-grid,
    .kpi-grid,
    .summary-grid,
    .card-grid,
    .panel-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .metric-tiles,
    .stat-tiles,
    .mini-stats {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 8px !important;
    }
}

/* ---- Tables: horizontal scroll + compact rows ---- */
@media (max-width: 768px) {
    .table-wrap,
    .table-container,
    .data-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table th,
    table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    table td.wrap,
    table td[data-wrap] {
        white-space: normal !important;
    }
}

/* ---- Sidebar + main content layouts ---- */
@media (max-width: 768px) {
    .with-sidebar,
    .sidebar-layout,
    .side-panel-layout {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    .side-panel,
    .left-panel,
    .right-panel,
    .detail-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border, #2a3346) !important;
    }
}

/* ---- Header / top bars ---- */
@media (max-width: 768px) {
    .page-header,
    .section-header,
    .panel-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .page-header .header-actions,
    .section-header .actions,
    .panel-header .controls {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

/* ---- Tabs ---- */
@media (max-width: 768px) {
    .tab-bar,
    .tabs,
    .nav-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        scrollbar-width: none !important;
    }

    .tab-bar::-webkit-scrollbar,
    .tabs::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .tab-bar .tab,
    .tabs .tab,
    .nav-tabs .tab,
    .nav-tabs li a {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ---- Modals: full-screen sheet on phones ---- */
@media (max-width: 640px) {
    .modal,
    .dialog,
    .oc-modal,
    [class*="-modal"],
    [class*="modal-"] {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: auto !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        padding: 20px 16px max(16px, env(safe-area-inset-bottom)) !important;
    }

    .modal-overlay,
    .oc-modal-overlay {
        align-items: flex-end !important;
    }
}

/* ---- Form layouts inside modals / panels ---- */
@media (max-width: 640px) {
    .form-row,
    .form-grid,
    .input-row {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    .form-actions,
    .modal-actions,
    .button-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .form-actions .btn,
    .modal-actions .btn,
    .button-row .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
    }
}

/* ---- Touch targets: all interactive elements >= 44px ---- */
@media (hover: none) and (pointer: coarse) {
    .btn,
    button,
    [role="button"],
    .chip,
    .tab,
    .nav-item,
    .filter-chip,
    select {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
    }

    .icon-btn,
    .btn-icon,
    [class*="icon-btn"],
    [class*="btn-icon"] {
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ---- Horizontal scroll helpers ---- */
@media (max-width: 768px) {
    .h-scroll,
    .scroll-x,
    .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .h-scroll::-webkit-scrollbar,
    .scroll-x::-webkit-scrollbar {
        display: none !important;
    }
}

/* ---- Safe area: bottom bars / fixed footers ---- */
@supports (padding: env(safe-area-inset-bottom)) {
    .bottom-bar,
    .fixed-footer,
    .sticky-footer,
    .action-bar {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ---- Content wrap padding on small screens ---- */
@media (max-width: 640px) {
    .content-wrap,
    .page-content,
    .app-content,
    .main-wrap,
    .oc-wrap,
    .inner-wrap {
        padding: 12px !important;
    }
}

/* ---- Charts / canvas: constrain width ---- */
@media (max-width: 768px) {
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .chart-container,
    .chart-wrap,
    [class*="chart-"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ---- Code / pre blocks: scroll instead of overflow ---- */
@media (max-width: 768px) {
    pre,
    code,
    .code-block,
    .mono-block {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 12px !important;
        white-space: pre !important;
        word-break: normal !important;
    }
}

/* ---- Filter / chip rows ---- */
@media (max-width: 640px) {
    .filter-row,
    .filter-chips,
    .chip-row {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }

    .filter-row::-webkit-scrollbar,
    .filter-chips::-webkit-scrollbar,
    .chip-row::-webkit-scrollbar {
        display: none !important;
    }
}

/* ---- Status / LED bars: wrap on very small screens ---- */
@media (max-width: 480px) {
    .status-bar,
    .led-bar,
    .service-row {
        flex-direction: column !important;
        gap: 6px !important;
    }
}

/* ---- Governance / command dashboard aliases ---- */
@media (max-width: 768px) {
    .gov-grid,
    .command-grid,
    .action-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .command-panel,
    .gov-panel {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* ---- Typography scale for very small screens ---- */
@media (max-width: 375px) {
    .page-title,
    h1.title,
    .hero-title {
        font-size: clamp(18px, 5vw, 28px) !important;
    }

    .section-title,
    h2.title {
        font-size: clamp(14px, 4vw, 20px) !important;
    }
}

/* ============================================================
   PHASE 4: Dashboard + app layout — dynamic viewport + keyboard
   ============================================================ */

/* Use dynamic viewport height (dvh) to fix iOS Safari 100vh bug.
   Falls back to vh in browsers without dvh support.           */
@media (max-width: 768px) {
    .full-height,
    .full-vh,
    [style*="height:100vh"],
    [style*="height: 100vh"] {
        height: 100dvh;
    }

    /* Chat-interface layout: fill visible viewport, not browser-chrome-inclusive vh */
    .chat-layout,
    .app-layout,
    .chat-wrapper {
        height: 100dvh;
        overflow: hidden;
    }

    /* EVE dashboard main content area */
    .main-content {
        height: calc(100dvh - 48px); /* subtract header height */
        overflow: hidden;
    }
}

/* Virtual keyboard inset: push chat input up when keyboard appears.
   Supported in Chrome 94+; Safari uses viewport-resize instead.   */
@supports (height: env(keyboard-inset-height, 0px)) {
    @media (max-width: 768px) {
        .chat-input-container,
        .input-area,
        .message-composer {
            margin-bottom: env(keyboard-inset-height, 0px);
        }
    }
}

/* Telemetry + admin view grids (names from telemetry.css / admin.css) */
@media (max-width: 768px) {
    .telemetry-grid,
    .cos-grid,
    .emb-grid,
    .mission-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .admin-grid,
    .governance-grid,
    .policy-overview-grid,
    .audit-grid,
    .user-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Canvas telemetry: respect container width */
    .emb-canvas,
    .cos-canvas,
    .phi-canvas,
    [id*="Canvas"],
    [class*="-canvas"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Ollama / model selector panels */
    .model-selector-grid,
    .provider-grid,
    .llm-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   PHASE 5: Global table scroll — bare <table> elements
   Scoped to main content zones to avoid breaking layout tables.
   display:block makes the table element a scrollable block while
   thead/tbody/tr/td keep their native table rendering inside it.
   ============================================================ */
@media (max-width: 768px) {
    main table,
    .content-area table,
    .page-content table,
    .view-content table,
    .card-body table,
    .panel-body table,
    .section-content table,
    .tab-content table,
    .modal-body table,
    .oc-wrap table,
    [class*="-body"] table,
    [class*="-content"] table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        /* Keep border-collapse and other table properties intact by
           ensuring child elements retain table display via browser defaults */
    }

    /* Compact row density on mobile */
    main table th,
    main table td,
    .content-area table th,
    .content-area table td,
    [class*="-content"] table th,
    [class*="-content"] table td,
    [class*="-body"] table th,
    [class*="-body"] table td {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    /* Allow wrapping on description columns */
    table td.description,
    table td.details,
    table td.notes,
    table td.message,
    table td.text,
    table td[data-wrap],
    table th.description,
    table th.details {
        white-space: normal !important;
        min-width: 120px;
    }

    /* Zebra stripes survive the display:block change */
    main table tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.02);
    }
}

/* Table headers: sticky first column on horizontally-scrolling tables */
@media (max-width: 640px) {
    /* Sticky first-column header for key tables */
    main table td:first-child,
    main table th:first-child,
    [class*="-body"] table td:first-child,
    [class*="-body"] table th:first-child {
        position: sticky;
        left: 0;
        background: var(--bg-secondary, #0d1426);
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
    }
}

/* ============================================================
   PHASE 4 continued: Landscape phone fixes
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
    /* In landscape on a phone, authority bar + body padding shrinks */
    body {
        padding-top: 28px !important;
    }

    /* Chat messages compress vertically */
    .message {
        padding: 6px 10px !important;
        gap: 4px !important;
    }

    /* Welcome screen hidden in landscape to maximise chat space */
    .welcome-screen {
        display: none !important;
    }

    /* Input area minimal */
    .chat-input-container {
        padding: 6px 8px !important;
    }
}

/* ============================================================
   PHASE 4 continued: Foldable / tablet portrait split-screen
   ============================================================ */
@media (min-width: 600px) and (max-width: 900px) and (max-height: 700px) {
    /* Tablet / foldable inner screen — optimise for taller portrait */
    .messages-container {
        max-height: 60dvh;
    }

    .sidebar {
        max-height: 200px;
        overflow-y: auto;
    }
}

/* ============================================================
   PHASE 4 continued: scroll-snap for swipe navigation pages
   ============================================================ */
@media (max-width: 900px) {
    /* If the dashboard uses a swipe-page container, enable native scroll-snap */
    .swipe-container,
    .page-container,
    [data-swipe-pages] {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .swipe-page,
    [data-swipe-page] {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

/* ============================================================
   PHASE 6: Modals & forms — keyboard overlap, iOS height bug
   ============================================================ */

/* Bottom-sheet modals: prevent body scroll leaking through overlay */
@media (max-width: 640px) {
    .modal-overlay,
    .dialog-overlay,
    .oc-modal-overlay,
    [class*="overlay"],
    [class*="backdrop"] {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Scrollable modal body: bounce-within-modal, not page-behind */
    .modal-body,
    .dialog-body,
    .modal-scroll,
    .modal-content-scroll {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        max-height: 60dvh;
    }

    /* Sheet handle pseudo-element for bottom-sheet modals */
    .modal::before,
    .dialog::before,
    .oc-modal::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 2px;
        margin: 0 auto 16px;
    }
}

/* Keyboard overlap: when input focused in a fixed modal, ensure
   the modal rides above the virtual keyboard. Uses dvh so the
   available height recalculates when keyboard is shown.        */
@media (max-width: 768px) {
    .modal:focus-within,
    .dialog:focus-within {
        max-height: 80dvh;
    }

    /* Input rows inside modals: stack on phone */
    .modal .form-row,
    .modal .input-group,
    .dialog .form-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Full-width submit buttons inside modals */
    .modal .btn-primary,
    .modal .btn-submit,
    .dialog .btn-primary {
        width: 100% !important;
        min-height: 44px !important;
    }
}

/* ============================================================
   PHASE 7: Performance — GPU compositing + render hints
   ============================================================ */

/* Promote main scroll containers to own compositor layer.
   Avoids jank when content reflows while scrolling.       */
@media (max-width: 768px) {
    .messages-container,
    .sidebar,
    .cognitive-rail,
    .content-area,
    .panel-body,
    .modal-body,
    .tab-content {
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
    }

    /* Reduce shadow complexity on mobile (fewer layers = faster paint) */
    .card,
    .panel,
    .modal,
    .message {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }

    /* Avoid blurring on composited layers (GPU memory savings) */
    .backdrop-blur,
    [class*="blur"] {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Use content-visibility for offscreen collapsed/hidden sections */
[aria-hidden="true"],
.collapsed,
.hidden-section,
[data-visible="false"] {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px; /* estimate to avoid layout shift */
}

/* Pause non-critical animations on mobile to save battery */
@media (max-width: 768px) {
    /* Keep essential status animations (pulse, live indicator) */
    /* Kill decorative ones */
    .decorative-animation,
    .bg-animation,
    .particle,
    .floating-orb,
    .gradient-shift {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   PHASE 8: Touch UX — swipe-to-dismiss, gesture zones
   ============================================================ */

/* Allow vertical pan on scrollable touch content only */
@media (hover: none) and (pointer: coarse) {
    .messages-container,
    .sidebar,
    .modal-body,
    .content-area {
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-y: contain;
    }

    /* Horizontal scroll containers: allow horizontal pan only */
    .tab-bar,
    .tabs,
    .filter-chips,
    .h-scroll {
        touch-action: pan-x;
    }

    /* Active state ripple feedback */
    .btn:active,
    button:active,
    [role="button"]:active,
    .nav-item:active,
    .tab:active {
        opacity: 0.75;
        transform: scale(0.97);
        transition: opacity 0.1s, transform 0.1s;
    }

    /* Larger spacing between list items to reduce mis-taps */
    li.nav-item,
    li.menu-item,
    .list-item {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Increase hitbox on small icon buttons without changing visual size */
    .icon-btn::after,
    .btn-icon::after,
    .small-btn::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: inherit;
    }

    .icon-btn,
    .btn-icon,
    .small-btn {
        position: relative;
    }
}

/* Swipe-to-dismiss hint on bottom-sheet modals (CSS only) */
@media (max-width: 640px) {
    .modal,
    .dialog,
    .oc-modal {
        transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }
}

/* ============================================================
   PHASE 9: Safe area — comprehensive notch / Dynamic Island
   ============================================================ */

/* Left/right safe areas in landscape mode (notched iPhones) */
@supports (padding: env(safe-area-inset-left)) {
    @media (orientation: landscape) {
        body {
            padding-left: env(safe-area-inset-left) !important;
            padding-right: env(safe-area-inset-right) !important;
        }

        #gc-authority-bar {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
        }

        .chat-input-container,
        .input-area {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
    }
}

/* Bottom safe area: fixed bottom elements must not hide behind home indicator */
@supports (padding: env(safe-area-inset-bottom)) {
    .chat-input-container,
    .input-area,
    .message-composer,
    .fixed-bottom,
    .sticky-bottom,
    .action-toolbar {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Modals shown as bottom sheets */
    @media (max-width: 640px) {
        .modal,
        .dialog,
        .oc-modal {
            padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Correct 100vh → 100svh (small viewport, excludes dynamic toolbars)
   for elements that must not extend beyond the visible area.        */
@supports (height: 100svh) {
    @media (max-width: 768px) {
        .full-height,
        .full-vh {
            height: 100svh;
        }

        .chat-layout,
        .app-layout {
            height: 100svh;
        }
    }
}

/* Viewport units fallback chain: dvh > svh > vh */
@media (max-width: 768px) {
    :root {
        --vh-unit: 1vh; /* set by JS if needed; CSS alone uses dvh/svh */
    }
}


/* === bl-components.css === */
:root{--bg-primary:#0a0e1a;--bg-secondary:rgba(10,14,26,0.98);--bg-tertiary:rgba(255,255,255,0.03);--accent-primary:#4a90e2;--accent-secondary:#00d4ff;--text-primary:#c8cdd8;--text-secondary:#7a8299;--border-color:rgba(255,255,255,0.1)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;overflow-x:hidden}.app-layout{display:flex;min-height:100vh}.main-content{flex:1;min-width:0;overflow-x:hidden}.content-area{padding:12px;max-width:1200px;margin:0 auto}body.embedded-in-dashboard .content-area,html.embedded-in-dashboard .content-area{padding:12px 0 0 0}body.embedded-in-dashboard .bl-header,html.embedded-in-dashboard .bl-header{display:none}.message{padding:10px 14px;border-radius:8px;font-size:13px;display:none;margin-bottom:12px}.message.show{display:block;animation:blFadeIn .25s ease}.success-message{background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.25);color:#22c55e}.error-message{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#f87171}.bl-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-color)}.bl-header-icon{width:36px;height:36px;flex-shrink:0}.bl-header h2{font-size:1.3rem;font-weight:600;color:var(--text-primary);letter-spacing:-0.01em;line-height:1.2}.bl-header p{color:var(--text-secondary);font-size:12px;margin-top:2px;line-height:1.4}.bl-breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--text-secondary);margin-bottom:var(--space-4, 16px)}.bl-breadcrumb a{color:var(--accent-primary);text-decoration:none;transition:color 0.15s}.bl-breadcrumb a:hover{text-decoration:underline}.bl-breadcrumb .bl-sep{opacity:0.4;font-size:12px}body.embedded-in-dashboard .bl-breadcrumb,html.embedded-in-dashboard .bl-breadcrumb{display:none}[data-theme="light"] .bl-breadcrumb{color:#1f2937}[data-theme="light"] .bl-breadcrumb a{color:#4f46e5}.bl-section{background:transparent;border:1px solid var(--border-color);border-radius:10px;padding:16px;margin-bottom:16px}.bl-section-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.bl-section-header h3{font-size:16px;font-weight:600}.bl-section-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.bl-section-icon svg{width:18px;height:18px}.bl-section-icon.yellow{background:rgba(212,160,23,0.12);color:#d4a017}.bl-section-icon.gold{background:rgba(245,158,11,0.12);color:#f59e0b}.bl-section-icon.purple{background:rgba(168,85,247,0.12);color:#a855f7}.bl-section-icon.orange{background:rgba(249,115,22,0.12);color:#f97316}.bl-section-icon.green{background:rgba(74,222,128,0.12);color:#22c55e}.bl-section-icon.blue{background:rgba(96,165,250,0.12);color:#60a5fa}.bl-section-icon.red{background:rgba(239,68,68,0.12);color:#ef4444}.bl-section-icon.cyan{background:rgba(6,182,212,0.12);color:#06b6d4}.bl-plan-banner{background:transparent;border:1px solid var(--border-color);border-radius:10px;padding:14px 16px;margin-bottom:16px}.bl-engine-row{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:14px}.bl-plan-icon{width:32px;height:32px;flex-shrink:0}.bl-plan-icon svg{width:100%;height:100%}.bl-engine-title{font-size:15px;font-weight:700;letter-spacing:0.02em}.bl-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:0.04em}.bl-badge-active{background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.25);color:#22c55e}.bl-badge-offline{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#f87171}.bl-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blPulse 2s ease-in-out infinite}.bl-badge-offline .bl-badge-dot{animation:none}.bl-engine-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-color);border-radius:6px;overflow:hidden}.bl-engine-cell{padding:10px;background:var(--bg-tertiary);text-align:center}.bl-engine-label{font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-secondary);margin-bottom:3px}.bl-engine-value{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.latency-fast{color:#22c55e}.latency-medium{color:#fbbf24}.latency-slow{color:#f87171}.bl-module-grid{display:grid;grid-template-columns:1fr;gap:12px}.bl-module-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:14px;transition:border-color 0.2s}.bl-mod-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:6px}.bl-mod-title{font-size:14px;font-weight:600}.bl-mod-health{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:0.04em;padding:2px 8px;border-radius:10px}.bl-mod-health.healthy{color:#22c55e;background:rgba(74,222,128,0.08)}.bl-mod-health.offline{color:#f87171;background:rgba(239,68,68,0.08)}.bl-mod-health-dot{width:5px;height:5px;border-radius:50%;background:currentColor}.bl-mod-endpoint{font-size:12px;font-family:'SF Mono','Fira Code',monospace;color:var(--text-secondary);margin-bottom:10px;padding:6px 8px;background:rgba(0,0,0,0.2);border-radius:4px;overflow-x:auto;white-space:nowrap}.bl-mod-endpoint .method{color:#22c55e;font-weight:700;margin-right:6px}.bl-mod-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.bl-mod-stat{display:flex;flex-direction:column;gap:2px;padding:6px 8px;background:rgba(0,0,0,0.15);border-radius:4px}.bl-mod-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-secondary)}.bl-mod-stat-value{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.bl-timeline{display:flex;flex-direction:column;gap:0}.bl-timeline-empty{text-align:center;color:var(--text-secondary);font-size:13px;padding:24px 12px}.bl-timeline-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid var(--border-color);position:relative;padding-left:18px;font-size:13px}.bl-timeline-item:last-child{border-bottom:none}.bl-timeline-dot{position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%}.bl-timeline-dot.compliant{background:#22c55e}.bl-timeline-dot.warning{background:#fbbf24}.bl-timeline-dot.blocked{background:#f87171}.bl-timeline-ts{font-family:'SF Mono','Fira Code',monospace;font-size:11px;color:var(--text-secondary)}.bl-timeline-module{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 6px;border-radius:3px}.bl-timeline-module.charter{color:#d4a017;background:rgba(212,160,23,0.1)}.bl-timeline-module.locks{color:#60a5fa;background:rgba(96,165,250,0.1)}.bl-timeline-module.budget{color:#a855f7;background:rgba(168,85,247,0.1)}.bl-timeline-verdict{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 6px;border-radius:3px}.bl-timeline-verdict.pass{color:#22c55e;background:rgba(74,222,128,0.1)}.bl-timeline-verdict.warn{color:#fbbf24;background:rgba(251,191,36,0.1)}.bl-timeline-verdict.block{color:#f87171;background:rgba(248,113,113,0.1)}.bl-timeline-detail{width:100%;color:var(--text-secondary);font-size:12px;line-height:1.4;padding-top:2px}.bl-test-select{width:100%;padding:10px 12px;border-radius:6px;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);font-size:13px;margin-bottom:10px;min-height:44px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.bl-test-textarea{width:100%;min-height:120px;padding:12px;background:rgba(0,0,0,0.3);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:12px;font-family:'SF Mono','Fira Code',monospace;resize:vertical;margin-bottom:10px;line-height:1.5}.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;cursor:pointer;border:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);width:100%;min-height:44px}.bl-btn svg{width:14px;height:14px;flex-shrink:0}.bl-btn:disabled{opacity:0.5;cursor:not-allowed}.bl-btn.btn-sm,.bl-btn.btn-small{padding:6px 12px;font-size:12px;min-height:auto;height:auto;width:auto;text-transform:none;letter-spacing:normal}.bl-btn.btn-xs{padding:3px 8px;font-size:11px;min-height:auto;height:auto;width:auto;text-transform:none;letter-spacing:normal}.bl-modal-close,.modal-close{background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:4px;line-height:1;transition:color 0.15s}.bl-modal-close:hover,.modal-close:hover{color:var(--text-primary)}.bl-btn-primary{background:rgba(99,102,241,0.12);color:#a5b4fc;border:1px solid rgba(129,140,248,0.25);position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:none}.bl-btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(165,180,252,0.06) 45%,rgba(165,180,252,0.12) 50%,rgba(165,180,252,0.06) 55%,transparent 60%);transform:translateX(-100%);pointer-events:none}.bl-btn:focus-visible,.bl-test-select:focus-visible,.bl-test-textarea:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.bl-link:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:2px}.bl-btn-primary:hover{background:rgba(99,102,241,0.18)!important;border-color:rgba(129,140,248,0.45)!important;color:#c7d2fe!important;transform:translateY(-1px);box-shadow:0 4px 20px rgba(99,102,241,0.12),0 0 0 1px rgba(129,140,248,0.08)}.bl-btn-primary:hover::before{animation:btnSweep 0.8s ease forwards}@keyframes btnSweep{to{transform:translateX(100%)}}.bl-btn-secondary:hover{background:rgba(255,255,255,0.08)!important;border-color:rgba(255,255,255,0.2);color:var(--text-primary)!important;transform:translateY(-1px)}.bl-btn-danger:hover{background:rgba(239,68,68,0.16)!important;border-color:rgba(239,68,68,0.4)!important;color:#fca5a5!important;transform:translateY(-1px)}.bl-btn-success:hover{background:rgba(74,222,128,0.16)!important;border-color:rgba(74,222,128,0.4)!important;color:#86efac!important;transform:translateY(-1px)}.bl-btn-green:hover{background:rgba(34,197,94,0.18)!important;border-color:rgba(34,197,94,0.5)!important;color:#86efac!important;transform:translateY(-1px)}@media (hover:hover){.bl-module-card:hover{border-color:rgba(255,255,255,0.12)}}.bl-test-response{display:none;margin-top:12px;padding:12px;background:rgba(0,0,0,0.3);border:1px solid var(--border-color);border-radius:6px}.bl-test-response.show{display:block;animation:blFadeIn .25s ease}.bl-test-response pre{font-size:12px;line-height:1.5;color:var(--text-primary);font-family:'SF Mono','Fira Code',monospace;overflow-x:auto;white-space:pre-wrap;word-break:break-word}.bl-test-latency{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;margin-bottom:8px}.bl-test-latency.fast{color:#22c55e}.bl-test-latency.medium{color:#fbbf24}.bl-test-latency.slow{color:#f87171}.bl-usage-row{background:var(--bg-tertiary);border-radius:8px;padding:14px}.bl-usage-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:4px}.bl-usage-header .label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.04em}.bl-usage-header .value{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.bl-usage-bar{height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-bottom:8px}.bl-usage-fill{height:100%;border-radius:3px;transition:width 0.6s ease;background:linear-gradient(90deg,#4a90e2,#00d4ff)}.bl-usage-fill.high{background:linear-gradient(90deg,#f97316,#ef4444)}.bl-usage-tier{font-size:12px;color:var(--text-secondary)}.bl-code-block{background:rgba(0,0,0,0.3);border:1px solid var(--border-color);border-radius:6px;padding:12px;overflow-x:auto}.bl-code-block pre{font-size:11px;line-height:1.6;color:var(--text-secondary);font-family:'SF Mono','Fira Code',monospace;white-space:pre-wrap;word-break:break-all}.bl-link{color:var(--accent-primary);text-decoration:none}.spinner{display:inline-flex;gap:2px;align-items:flex-end;height:14px}.eq-bar{width:3px;background:currentColor;border-radius:1px;animation:blEq 0.6s ease-in-out infinite alternate}.eq-bar:nth-child(1){height:6px;animation-delay:0s}.eq-bar:nth-child(2){height:10px;animation-delay:0.1s}.eq-bar:nth-child(3){height:14px;animation-delay:0.2s}.eq-bar:nth-child(4){height:10px;animation-delay:0.3s}.eq-bar:nth-child(5){height:6px;animation-delay:0.4s}@keyframes blPulse{0%,100%{opacity:1}50%{opacity:0.4}}@keyframes blFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes blEq{to{height:4px}}[data-theme="light"] .bl-engine-cell{background:#f8fafc}[data-theme="light"] .bl-engine-metrics{background:#e5e7eb}[data-theme="light"] .bl-module-card{background:#f8fafc;border-color:#e5e7eb}[data-theme="light"] .bl-mod-endpoint{background:#f1f5f9}[data-theme="light"] .bl-mod-stat{background:#f1f5f9}[data-theme="light"] .bl-test-select{background:#f8fafc;border-color:#e5e7eb;color:#0f172a}[data-theme="light"] .bl-test-textarea{background:#f8fafc;border-color:#e5e7eb;color:#0f172a}[data-theme="light"] .bl-test-response{background:#f8fafc;border-color:#e5e7eb}[data-theme="light"] .bl-code-block{background:#f1f5f9;border-color:#e5e7eb}[data-theme="light"] .bl-usage-row{background:#f8fafc}[data-theme="light"] .bl-usage-bar{background:#e5e7eb}@media (min-width:480px){.content-area{padding:16px}.bl-engine-row{flex-direction:row;text-align:left}.bl-badge{margin-left:auto}.bl-header h2{font-size:1.4rem}.bl-btn{width:auto}}@media (min-width:640px){.content-area{padding:20px}.bl-engine-metrics{grid-template-columns:repeat(3,1fr)}.bl-module-grid{grid-template-columns:repeat(2,1fr)}.bl-section{padding:18px}.bl-plan-banner{padding:18px 20px}}@media (min-width:768px){.content-area{padding:28px}.bl-engine-metrics{grid-template-columns:repeat(5,1fr)}.bl-header h2{font-size:1.6rem}.bl-header-icon{width:42px;height:42px}.bl-header p{font-size:13px}.bl-section{padding:20px}.bl-plan-banner{padding:20px 24px}.bl-timeline-item{flex-wrap:nowrap}.bl-timeline-ts{min-width:70px}.bl-timeline-module{min-width:80px;text-align:center}.bl-timeline-detail{width:auto;padding-top:0}}@media (min-width:1024px){.content-area{padding:40px}.bl-module-grid{grid-template-columns:repeat(3,1fr)}.bl-header h2{font-size:1.8rem}.bl-header-icon{width:48px;height:48px}.bl-header p{font-size:14px}.bl-section{padding:24px}.bl-plan-banner{padding:24px 28px}}.bl-btn-secondary{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:var(--text-secondary);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:none}.bl-btn-danger{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#fca5a5;position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:none}.bl-btn-danger::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(252,165,165,0.06) 45%,rgba(252,165,165,0.12) 50%,rgba(252,165,165,0.06) 55%,transparent 60%);transform:translateX(-100%);pointer-events:none}.bl-btn-danger:hover::before{animation:btnSweep 0.8s ease forwards}.bl-btn-success{background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.25);color:#86efac;position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:none}.bl-btn-success::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(134,239,172,0.06) 45%,rgba(134,239,172,0.12) 50%,rgba(134,239,172,0.06) 55%,transparent 60%);transform:translateX(-100%);pointer-events:none}.bl-btn-success:hover::before{animation:btnSweep 0.8s ease forwards}.bl-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}.bl-stat-card{padding:20px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:12px;text-align:center}.bl-stat-value{font-size:28px;font-weight:700;margin-bottom:4px}.bl-stat-label{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px}.bl-table-wrap{overflow-x:auto}.bl-table{width:100%;border-collapse:collapse;font-size:13px}.bl-badge-suspended{background:rgba(239,68,68,0.12);color:#ef4444;border:1px solid rgba(239,68,68,0.2)}.bl-badge-pass{background:rgba(74,222,128,0.12);color:#22c55e;border:1px solid rgba(74,222,128,0.2)}.bl-badge-fail{background:rgba(239,68,68,0.12);color:#ef4444;border:1px solid rgba(239,68,68,0.2)}.bl-badge-pending{background:rgba(96,165,250,0.12);color:#60a5fa;border:1px solid rgba(96,165,250,0.2)}.bl-form-group{margin-bottom:16px}.bl-input,.bl-select,.bl-textarea{width:100%;padding:10px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:var(--text-primary);font-size:14px;font-family:inherit;transition:border-color 0.2s}.bl-select{cursor:pointer}.bl-textarea{min-height:100px;resize:vertical;font-family:'SF Mono','Fira Code',monospace;font-size:13px}.bl-form-row{display:flex;gap:12px}.bl-form-hint{font-size:11px;color:var(--text-secondary);margin-top:4px}.bl-score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:16px}.bl-score-item{padding:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:10px;text-align:center}.bl-score-value{font-size:22px;font-weight:700}.bl-score-label{font-size:11px;color:var(--text-secondary);margin-top:4px}.bl-result-panel{padding:16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;margin-top:16px;display:none}.bl-quota-bar{height:8px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden;margin-top:8px}.bl-quota-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#22c55e,#22d3ee);transition:width 0.5s}.bl-plan-left{display:flex;align-items:center;gap:16px}.bl-plan-name{font-size:20px;font-weight:600}.bl-plan-status-row{display:flex;align-items:center;gap:8px;margin-top:4px}.bl-badge-trial{background:rgba(245,158,11,0.12);color:#f59e0b;border:1px solid rgba(245,158,11,0.2)}.bl-badge-canceled{background:rgba(239,68,68,0.12);color:#ef4444;border:1px solid rgba(239,68,68,0.2)}.bl-plan-actions{display:flex;gap:10px}.bl-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bl-detail-item{padding:16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:10px}.bl-detail-label{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}.bl-detail-label svg{width:16px;height:16px;flex-shrink:0}.bl-detail-value{font-size:15px;font-weight:500}.bl-plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}.bl-plan-card{padding:24px 20px;background:rgba(255,255,255,0.03);border:2px solid rgba(255,255,255,0.06);border-radius:14px;text-align:center;transition:all 0.3s;position:relative}.bl-plan-card:hover{border-color:rgba(74,222,128,0.3);transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.2)}.bl-plan-card.current{border-color:rgba(74,222,128,0.4);background:rgba(74,222,128,0.04)}.bl-plan-card.current::after{content:'Current';position:absolute;top:12px;right:12px;background:rgba(74,222,128,0.15);color:#22c55e;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px}.bl-plan-card .bl-btn{width:100%;justify-content:center}.bl-plan-card.recommended{border-color:rgba(99,102,241,0.5);background:rgba(99,102,241,0.06);transform:scale(1.02);box-shadow:0 8px 30px rgba(99,102,241,0.15)}.bl-plan-card.recommended:hover{border-color:rgba(99,102,241,0.7);transform:scale(1.02) translateY(-3px);box-shadow:0 12px 35px rgba(99,102,241,0.2)}.bl-plan-card.recommended::before{content:'Recommended';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;font-size:11px;font-weight:700;padding:3px 14px;border-radius:10px;letter-spacing:0.5px;text-transform:uppercase;white-space:nowrap}.bl-plan-card.enterprise-card{border-color:rgba(245,158,11,0.25)}.bl-plan-card.enterprise-card:hover{border-color:rgba(245,158,11,0.5);box-shadow:0 8px 25px rgba(245,158,11,0.1)}.bl-plan-tier{font-size:18px;font-weight:600;margin-bottom:8px}.bl-plan-price{font-size:32px;font-weight:700;margin-bottom:4px}.bl-plan-desc{color:var(--text-secondary);font-size:13px;margin-bottom:18px}.bl-plan-features{text-align:left;margin-bottom:20px;list-style:none}.bl-plan-features li{margin-bottom:6px;font-size:13px;color:var(--text-secondary);display:flex;align-items:flex-start;gap:6px;line-height:1.4}.bl-plan-features li svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}.bl-plan-features li.available svg{color:#22c55e}.bl-plan-features li.locked svg{color:#555}.bl-plan-features li.locked{opacity:0.5}.bl-comparison-link{text-align:center;margin-top:20px;font-size:14px}.bl-cancel-section{background:rgba(239,68,68,0.04);border:1px solid rgba(239,68,68,0.12);border-radius:14px;padding:24px;margin-top:8px}.bl-balance-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.bl-balance-left{display:flex;align-items:center;gap:16px}.bl-balance-amount{font-size:36px;font-weight:700;letter-spacing:-0.5px}.bl-balance-label{color:var(--text-secondary);font-size:13px;margin-top:2px}.bl-lifetime-stats{display:flex;gap:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.06)}.bl-lifetime-stat{text-align:center;flex:1}.bl-btn-green{background:rgba(34,197,94,0.12);color:#86efac;font-weight:600;border:1px solid rgba(74,222,128,0.3);position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:none}.bl-btn-green::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(134,239,172,0.06) 45%,rgba(134,239,172,0.12) 50%,rgba(134,239,172,0.06) 55%,transparent 60%);transform:translateX(-100%);pointer-events:none}.bl-btn-green:hover::before{animation:btnSweep 0.8s ease forwards}.bl-btn-upgrade{background:rgba(99,102,241,0.12);color:#a5b4fc;font-weight:600;border:1px solid rgba(129,140,248,0.3);position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:none;letter-spacing:0.04em}.bl-btn-upgrade::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(165,180,252,0.08) 45%,rgba(165,180,252,0.15) 50%,rgba(165,180,252,0.08) 55%,transparent 60%);transform:translateX(-100%);pointer-events:none;transition:none}.bl-btn-upgrade::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(99,102,241,0.4),rgba(139,92,246,0.2),rgba(6,182,212,0.3));z-index:-1;opacity:0;transition:opacity 0.3s;pointer-events:none}@media(hover:hover){.bl-btn-upgrade:hover{background:rgba(99,102,241,0.18);border-color:rgba(129,140,248,0.5);color:#c7d2fe;transform:translateY(-1px);box-shadow:0 4px 20px rgba(99,102,241,0.15),0 0 0 1px rgba(129,140,248,0.1)}.bl-btn-upgrade:hover::before{animation:upgradeSweep 0.8s ease forwards}.bl-btn-upgrade:hover::after{opacity:1}}@keyframes upgradeSweep{to{transform:translateX(100%)}}[data-theme="light"] .bl-btn-upgrade{background:rgba(99,102,241,0.08)!important;color:#4f46e5!important;border:1px solid rgba(99,102,241,0.25);box-shadow:none}[data-theme="light"] .bl-btn-upgrade:hover{background:rgba(99,102,241,0.14)!important;border-color:rgba(99,102,241,0.4);color:#4338ca!important;box-shadow:0 4px 16px rgba(99,102,241,0.12)!important;transform:translateY(-1px)}.bl-rates-table{width:100%;border-collapse:collapse}.bl-dim-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:6px;font-size:13px;font-weight:500;background:rgba(168,85,247,0.1);color:#a855f7}.bl-purchase-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.bl-purchase-input{width:140px;padding:10px 14px;border:1px solid rgba(255,255,255,0.1);border-radius:10px;background:rgba(255,255,255,0.04);color:var(--text-primary);font-size:16px;font-weight:600;outline:none;transition:border-color 0.2s}.bl-preset-btns{display:flex;gap:8px;flex-wrap:wrap}.bl-preset-btn{padding:6px 14px;border:1px solid rgba(255,255,255,0.1);border-radius:8px;background:rgba(255,255,255,0.04);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all 0.2s}.bl-pricing-tiers{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}.bl-pricing-tier{padding:8px 14px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);font-size:12px;color:var(--text-secondary)}.bl-cost-display{font-size:15px;color:var(--text-secondary);margin-bottom:16px}.bl-ledger-table{width:100%;border-collapse:collapse}.bl-type-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase}.bl-type-grant{background:rgba(74,222,128,0.12);color:#22c55e}.bl-type-consume{background:rgba(239,68,68,0.12);color:#ef4444}.bl-type-purchase{background:rgba(96,165,250,0.12);color:#60a5fa}.bl-type-expire{background:rgba(249,115,22,0.12);color:#f97316}.bl-type-refund{background:rgba(250,204,21,0.12);color:#facc15}.bl-amount-positive{color:#22c55e}.bl-amount-negative{color:#ef4444}.bl-load-more{display:flex;justify-content:center;margin-top:16px}.bl-integrity-result{display:none;padding:14px 18px;border-radius:10px;margin-top:14px;font-size:14px}.bl-integrity-valid{background:rgba(74,222,128,0.08);border:1px solid rgba(74,222,128,0.2);color:#22c55e}.bl-integrity-invalid{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:#ef4444}.bl-estimator-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.bl-estimator-item{display:flex;align-items:center;gap:10px}.bl-estimate-result{display:none;padding:14px 18px;border-radius:10px;margin-top:14px;background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.2);color:#a855f7;font-size:15px}.bl-empty{text-align:center;color:var(--text-secondary);padding:24px;font-size:14px}.bl-badge-gray{background:rgba(136,136,136,0.12);color:#999;border:1px solid rgba(136,136,136,0.2)}.bl-badge-blue{background:rgba(96,165,250,0.12);color:#60a5fa;border:1px solid rgba(96,165,250,0.2)}.bl-badge-purple{background:rgba(168,85,247,0.12);color:#a855f7;border:1px solid rgba(168,85,247,0.2)}.bl-badge-gold{background:rgba(245,158,11,0.12);color:#f59e0b;border:1px solid rgba(245,158,11,0.2)}.bl-link-card:hover{border-color:color-mix(in srgb,var(--accent-primary) 40%,transparent)}.bl-plans-dots{display:flex;justify-content:center;gap:6px;padding-top:var(--space-2)}.bl-plans-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.15);transition:background 0.2s,width 0.2s}.bl-plan-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.bl-scopes-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.bl-scope-chip{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 10px;border-radius:var(--radius-md);font-size:12px;font-weight:500;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);min-height:44px}.bl-scope-chip svg{width:16px;height:16px;flex-shrink:0}.bl-scope-chip.available{border-color:rgba(74,222,128,0.25);background:rgba(74,222,128,0.06);color:#22c55e}.bl-scope-chip.locked{border-color:rgba(255,255,255,0.04);color:#555;opacity:0.6}.bl-scope-chip .scope-label{font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.bl-flags-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2)}.bl-flag-item{padding:var(--space-2) var(--space-3);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius-md);display:flex;justify-content:space-between;align-items:center;min-height:44px}.bl-flag-label{color:var(--text-secondary);font-size:13px}.bl-flag-value{font-size:13px;font-weight:600}.bl-flag-value.enabled{color:#22c55e}.bl-flag-value.disabled{color:#555}.bl-usage-container{margin-top:var(--space-2)}.bl-usage-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;flex-wrap:wrap;gap:4px}.bl-usage-count{font-size:20px;font-weight:700}.bl-usage-limit{color:var(--text-secondary);font-size:11px}.bl-usage-bar-bg{width:100%;height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden}.bl-usage-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#60a5fa,#a78bfa);transition:width 0.6s ease}.bl-usage-bar-fill.warning{background:linear-gradient(90deg,#f59e0b,#ef4444)}.bl-usage-pct{color:var(--text-secondary);font-size:11px;margin-top:4px;text-align:right}.bl-links-grid{display:flex;gap:var(--space-2);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--space-3));padding:0 var(--space-3) 4px}.bl-link-card{display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;text-decoration:none;color:var(--text-primary);min-height:60px;white-space:nowrap;flex:0 0 auto}.bl-link-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.bl-link-icon svg{width:18px;height:18px}.bl-link-label{font-size:13px;font-weight:600}.bl-link-desc{font-size:11px;color:var(--text-secondary);margin-top:1px}[data-theme="light"] .bl-header h2{background:linear-gradient(135deg,#059669 0%,#0891b2 100%)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}[data-theme="light"] .bl-header p{color:#1f2937}[data-theme="light"] .bl-section{background:transparent;border-color:#e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,0.06)}[data-theme="light"] .bl-section:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08)}[data-theme="light"] .bl-stat-card{background:#ffffff;border-color:#e5e7eb}[data-theme="light"] .bl-score-item{background:#ffffff;border-color:#e5e7eb}[data-theme="light"] .bl-result-panel{background:#ffffff;border-color:#e5e7eb}[data-theme="light"] .bl-table th{color:#1f2937;border-bottom-color:#e5e7eb}[data-theme="light"] .bl-table td{border-bottom-color:#f1f5f9;color:#0f172a}[data-theme="light"] .bl-table tr:hover td{background:#f8fafc}[data-theme="light"] .bl-input,[data-theme="light"] .bl-select,[data-theme="light"] .bl-textarea{background:#ffffff;border-color:#d1d5db;color:#0f172a}[data-theme="light"] .bl-btn-secondary{background:#f8fafc;border-color:#d1d5db;color:#475569}[data-theme="light"] .bl-quota-bar{background:#e5e7eb}[data-theme="light"] .bl-section-header h3{color:#0f172a}[data-theme="light"] .bl-stat-label{color:#1f2937}[data-theme="light"] .bl-score-label{color:#1f2937}[data-theme="light"] .bl-form-group label{color:#475569}[data-theme="light"] .bl-form-hint{color:#1f2937}[data-theme="light"] .bl-header h2{background:none!important;-webkit-background-clip:unset!important;-webkit-text-fill-color:#1e293b!important;background-clip:unset!important;font-size:26px;font-weight:600;color:#1e293b}[data-theme="light"] .bl-header p{color:#1f2937}[data-theme="light"] .bl-header-icon{filter:hue-rotate(220deg) saturate(1.2)}[data-theme="light"] .bl-plan-banner{background:transparent;border:1px solid #e6eaf0;box-shadow:0 1px 3px rgba(15,23,42,0.04),0 4px 12px rgba(15,23,42,0.03);border-radius:14px}[data-theme="light"] .bl-plan-banner::before{background:linear-gradient(90deg,#6366f1,#8b5cf6,#06b6d4)}[data-theme="light"] .bl-plan-name{color:#1e293b}[data-theme="light"] .bl-plan-icon{background:rgba(99,102,241,0.08)}[data-theme="light"] .bl-plan-icon svg{stroke:#6366f1}[data-theme="light"] .bl-badge-active{background:#ecfdf5;border-color:#a7f3d0;color:#059669}[data-theme="light"] .bl-badge-trial{background:#fffbeb;border-color:#fde68a;color:#d97706}[data-theme="light"] .bl-badge-canceled{background:#fef2f2;border-color:#fecaca;color:#dc2626}[data-theme="light"] .bl-section{background:transparent;border:1px solid #e6eaf0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,0.04),0 4px 12px rgba(15,23,42,0.03);margin-bottom:32px;padding:28px}[data-theme="light"] .bl-section:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,0.06),0 2px 6px rgba(15,23,42,0.03)}[data-theme="light"] .bl-section-header h3{color:#1e293b;font-size:16px;font-weight:600}[data-theme="light"] .bl-section-icon.green{background:rgba(16,185,129,0.08);color:#10b981}[data-theme="light"] .bl-section-icon.blue{background:rgba(99,102,241,0.08);color:#6366f1}[data-theme="light"] .bl-section-icon.purple{background:rgba(139,92,246,0.08);color:#8b5cf6}[data-theme="light"] .bl-section-icon.red{background:rgba(239,68,68,0.06);color:#ef4444}[data-theme="light"] .bl-detail-item{background:#f8f9fb;border:1px solid #e6eaf0;border-radius:12px}[data-theme="light"] .bl-detail-label{color:#1f2937;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.6px}[data-theme="light"] .bl-detail-label svg{opacity:0.55}[data-theme="light"] .bl-detail-value{color:#1e293b;font-weight:600}[data-theme="light"] .bl-plan-card{background:#ffffff;border:1px solid #e6eaf0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,0.04);transition:all 0.25s cubic-bezier(0.4,0,0.2,1)}[data-theme="light"] .bl-plan-card:hover{transform:translateY(-3px);border-color:#c7d2fe;box-shadow:0 10px 24px rgba(15,23,42,0.08),0 2px 6px rgba(15,23,42,0.04)}[data-theme="light"] .bl-plan-tier{color:#1e293b}[data-theme="light"] .bl-plan-price{color:#0f172a}[data-theme="light"] .bl-plan-price span{color:#1f2937}[data-theme="light"] .bl-plan-desc{color:#1f2937}[data-theme="light"] .bl-plan-card.current{border:2px solid #6366f1;background:#f8f9ff}[data-theme="light"] .bl-plan-card.current::after{background:#eef2ff;color:#6366f1;border:1px solid #c7d2fe;font-weight:600}[data-theme="light"] .bl-plan-card.current:hover{border-color:#6366f1;box-shadow:0 10px 24px rgba(99,102,241,0.12)}[data-theme="light"] .bl-plan-card.recommended{border:2px solid #818cf8;background:#fafaff;box-shadow:0 4px 16px rgba(99,102,241,0.1)}[data-theme="light"] .bl-plan-card.recommended:hover{border-color:#6366f1;transform:scale(1.02) translateY(-3px);box-shadow:0 12px 32px rgba(99,102,241,0.15)}[data-theme="light"] .bl-plan-card.recommended::before{background:linear-gradient(135deg,#6366f1,#7c3aed)}[data-theme="light"] .bl-plan-card.enterprise-card{border-color:#fcd34d}[data-theme="light"] .bl-plan-card.enterprise-card:hover{border-color:#f59e0b;box-shadow:0 10px 24px rgba(245,158,11,0.08)}[data-theme="light"] .bl-plan-features li{color:#475569;font-weight:400}[data-theme="light"] .bl-plan-features li svg{color:#10b981!important;stroke:#10b981!important}[data-theme="light"] .bl-btn-primary{background:rgba(99,102,241,0.08)!important;color:#4f46e5!important;border:1px solid rgba(99,102,241,0.2);box-shadow:none}[data-theme="light"] .bl-btn-primary:hover{background:rgba(99,102,241,0.14)!important;border-color:rgba(99,102,241,0.35)!important;color:#4338ca!important;box-shadow:0 4px 16px rgba(99,102,241,0.1)!important;transform:translateY(-1px)}[data-theme="light"] .bl-btn-green{background:rgba(22,163,74,0.08)!important;color:#15803d!important;border:1px solid rgba(22,163,74,0.2)}[data-theme="light"] .bl-btn-green:hover{background:rgba(22,163,74,0.14)!important;border-color:rgba(22,163,74,0.35)!important;color:#166534!important}[data-theme="light"] .bl-btn-success{background:rgba(22,163,74,0.08)!important;color:#15803d!important;border:1px solid rgba(22,163,74,0.2)}[data-theme="light"] .bl-btn-success:hover{background:rgba(22,163,74,0.14)!important;border-color:rgba(22,163,74,0.35)!important;color:#166534!important}[data-theme="light"] .bl-btn-danger{background:rgba(220,38,38,0.06)!important;color:#dc2626!important;border:1px solid rgba(220,38,38,0.2)}[data-theme="light"] .bl-btn-danger:hover{background:rgba(220,38,38,0.12)!important;border-color:rgba(220,38,38,0.35)!important;color:#b91c1c!important}[data-theme="light"] .bl-btn-secondary{background:#ffffff;border:1px solid #d1d5db;color:#475569;box-shadow:0 1px 2px rgba(15,23,42,0.04)}[data-theme="light"] .bl-btn-secondary:hover{border-color:#818cf8;color:#1e293b!important;background:#fafaff!important}[data-theme="light"] .bl-btn-danger{background:rgba(220,38,38,0.06);border:1px solid rgba(220,38,38,0.18);color:#dc2626}[data-theme="light"] .bl-btn-danger:hover{background:rgba(220,38,38,0.12)!important;border-color:rgba(220,38,38,0.35)!important;color:#b91c1c!important;transform:translateY(-1px)}[data-theme="light"] .bl-cancel-section{background:#fffbfb;border:1px solid #fecaca;border-radius:14px}[data-theme="light"] .bl-cancel-section h3{color:#dc2626!important}[data-theme="light"] .bl-cancel-section p{color:#1f2937}[data-theme="light"] .bl-comparison-link a{color:#6366f1}[data-theme="light"] .bl-comparison-link a:hover{color:#4f46e5}[data-theme="light"] .bl-btn-primary:focus-visible{outline:2px solid #6366f1;outline-offset:2px}[data-theme="light"] .bl-btn-secondary:focus-visible{outline:2px solid #6366f1;outline-offset:2px}[data-theme="light"] .bl-btn-danger:focus-visible{outline:2px solid #dc2626;outline-offset:2px}[data-theme="light"] .bl-comparison-link a:focus-visible{outline:2px solid #6366f1;outline-offset:2px;border-radius:4px}[data-theme="light"] .bl-header h2{font-size:22px!important}[data-theme="light"] .bl-section{padding:20px!important;margin-bottom:24px!important}[data-theme="light"] .bl-plan-banner{background:transparent;border-color:#e5e7eb;box-shadow:0 1px 4px rgba(15,23,42,0.06)}[data-theme="light"] .bl-plan-banner::before{background:linear-gradient(90deg,#f59e0b,#10b981,#06b6d4)}[data-theme="light"] .bl-section{background:transparent;border-color:#e5e7eb;box-shadow:0 1px 4px rgba(15,23,42,0.06)}[data-theme="light"] .bl-section:hover{box-shadow:0 4px 16px rgba(15,23,42,0.08)}[data-theme="light"] .bl-lifetime-stats{border-top-color:#e5e7eb}[data-theme="light"] .bl-rates-table th{border-bottom-color:#e5e7eb;color:#1f2937}[data-theme="light"] .bl-rates-table td{border-bottom-color:#f1f5f9}[data-theme="light"] .bl-rates-table tr:hover td{background:#f8fafc}[data-theme="light"] .bl-ledger-table th{border-bottom-color:#e5e7eb;color:#1f2937}[data-theme="light"] .bl-ledger-table td{border-bottom-color:#f1f5f9}[data-theme="light"] .bl-ledger-table tr:hover td{background:#f8fafc}[data-theme="light"] .bl-purchase-input{background:#ffffff;border-color:#d1d5db;color:#0f172a}[data-theme="light"] .bl-purchase-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.1)}[data-theme="light"] .bl-preset-btn{background:#f8fafc;border-color:#d1d5db;color:#475569}[data-theme="light"] .bl-preset-btn:hover,[data-theme="light"] .bl-preset-btn.active{background:rgba(99,102,241,0.08);border-color:rgba(99,102,241,0.4);color:#4f46e5}[data-theme="light"] .bl-pricing-tier{background:#f8fafc;border-color:#e5e7eb;color:#475569}[data-theme="light"] .bl-pricing-tier strong{color:#3b82f6}[data-theme="light"] .bl-btn-secondary{background:#f8fafc;border-color:#d1d5db;color:#475569}[data-theme="light"] .bl-btn-secondary:hover{border-color:#6366f1;color:#0f172a!important;background:#fafaff!important}[data-theme="light"] .bl-estimator-item input{background:#ffffff;border-color:#d1d5db;color:#0f172a}[data-theme="light"] .bl-estimator-item input:focus{border-color:#6366f1}[data-theme="light"] .bl-dim-badge{background:rgba(139,92,247,0.08)}[data-theme="light"] .bl-estimate-result{background:rgba(139,92,247,0.06);border-color:rgba(139,92,247,0.15)}[data-theme="light"] .bl-integrity-valid{background:rgba(16,185,129,0.06);border-color:rgba(16,185,129,0.15);color:#059669}[data-theme="light"] .bl-integrity-invalid{background:rgba(239,68,68,0.06);border-color:rgba(239,68,68,0.15);color:#dc2626}[data-theme="light"] .bl-header h2{background:linear-gradient(135deg,#b45309 0%,#b45309 50%,#0891b2 100%)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}[data-theme="light"] .bl-plan-banner{background:transparent;border-color:#e5e7eb;box-shadow:0 1px 3px rgba(15,23,42,0.04)}[data-theme="light"] .bl-section{background:transparent;border-color:#e5e7eb;box-shadow:0 1px 3px rgba(15,23,42,0.04)}[data-theme="light"] .bl-plan-card{background:#f8fafc;border-color:#e5e7eb}[data-theme="light"] .bl-plan-card.current{border-color:rgba(96,165,250,0.4);background:rgba(96,165,250,0.04)}[data-theme="light"] .bl-scope-chip{background:#f8fafc;border-color:#e5e7eb}[data-theme="light"] .bl-scope-chip.available{background:rgba(74,222,128,0.06);border-color:rgba(74,222,128,0.2)}[data-theme="light"] .bl-flag-item{background:#f8fafc;border-color:#e5e7eb}[data-theme="light"] .bl-usage-bar-bg{background:#e5e7eb}[data-theme="light"] .bl-link-card{background:#ffffff;border-color:#e5e7eb;box-shadow:0 1px 3px rgba(15,23,42,0.04)}[data-theme="light"] .bl-btn-secondary{background:rgba(0,0,0,0.03);border-color:#e5e7eb;color:var(--text-secondary)}[data-theme="light"] .bl-badge-gray{background:rgba(100,116,139,0.06);border-color:rgba(100,116,139,0.2)}[data-theme="light"] .bl-badge-blue{background:rgba(96,165,250,0.06);border-color:rgba(96,165,250,0.2)}[data-theme="light"] .bl-badge-purple{background:rgba(168,85,247,0.06);border-color:rgba(168,85,247,0.2)}[data-theme="light"] .bl-badge-gold{background:rgba(245,158,11,0.06);border-color:rgba(245,158,11,0.2)}[data-theme="light"] .bl-header h2{background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}[data-theme="light"] .bl-plans-dot{background:rgba(0,0,0,0.1)}[data-theme="light"] .bl-plans-dot.active{background:var(--accent-primary)}@media (max-width:768px){.content-area{padding:16px}.bl-header h2{font-size:1.3rem}.bl-stats-grid{grid-template-columns:repeat(2,1fr)}.bl-form-row{flex-direction:column}.bl-score-grid{grid-template-columns:repeat(2,1fr)}.bl-btn{min-height:44px}}@media (max-width:768px){.content-area{padding:16px}[data-theme="light"] .content-area{max-width:100%!important}.bl-header h2{font-size:1.3rem}[data-theme="light"] .bl-header h2{font-size:22px!important}.bl-plan-banner{flex-direction:column;gap:16px;text-align:center;padding:20px}.bl-plan-left{flex-direction:column;text-align:center}.bl-plan-actions{flex-direction:column;width:100%}.bl-plan-actions .bl-btn{width:100%;justify-content:center}.bl-details-grid{grid-template-columns:1fr}.bl-plans-grid{grid-template-columns:1fr}.bl-plan-card{padding:20px 16px}.bl-plan-price{font-size:26px}.bl-btn{min-height:44px}[data-theme="light"] .bl-section{padding:20px!important;margin-bottom:24px!important}}@media (max-width:768px){.content-area{padding:16px}.bl-header h2{font-size:1.3rem}.bl-plan-banner{padding:20px}.bl-balance-top{flex-direction:column;gap:16px;text-align:center}.bl-balance-left{flex-direction:column;text-align:center}.bl-lifetime-stats{flex-direction:column;gap:12px}.bl-purchase-row{flex-direction:column;align-items:stretch}.bl-purchase-input{width:100%}.bl-estimator-grid{grid-template-columns:1fr}.bl-estimator-item{flex-direction:column;align-items:stretch}.bl-estimator-item input{max-width:100%}.bl-btn{min-height:44px}.bl-ledger-table{font-size:12px}.bl-ledger-table th,.bl-ledger-table td{padding:8px 6px}}@media (hover:hover){.bl-btn-primary:hover{background:rgba(99,102,241,0.18)!important;border-color:rgba(129,140,248,0.45)!important;color:#c7d2fe!important;transform:translateY(-1px);box-shadow:0 4px 20px rgba(99,102,241,0.12)}.bl-btn-primary:hover::before{animation:btnSweep 0.8s ease forwards}.bl-btn-secondary:hover{background:rgba(255,255,255,0.08)!important;border-color:rgba(255,255,255,0.2);color:var(--text-primary)!important;transform:translateY(-1px)}.bl-btn-danger:hover{background:rgba(239,68,68,0.16)!important;border-color:rgba(239,68,68,0.4)!important;color:#fca5a5!important;transform:translateY(-1px)}.bl-plan-card:hover{border-color:rgba(255,255,255,0.15)}.bl-plan-card.tier-none:hover{border-color:rgba(136,136,136,0.3)}.bl-plan-card.tier-basic:hover{border-color:rgba(96,165,250,0.3)}.bl-plan-card.tier-premium:hover{border-color:rgba(168,85,247,0.3)}.bl-plan-card.tier-enterprise:hover{border-color:rgba(245,158,11,0.3)}.bl-link-card:hover{border-color:color-mix(in srgb,var(--accent-primary) 40%,transparent)}}@media (min-width:480px){.content-area{padding:var(--space-4)}.content-inner{max-width:480px}.bl-plan-actions .bl-btn{width:auto}.bl-flags-grid{grid-template-columns:1fr 1fr}.bl-scopes-grid{grid-template-columns:repeat(3,1fr)}.bl-plan-card{flex:0 0 calc(85% - 16px)}.bl-plans-grid{margin:0 calc(-1 * var(--space-4));padding-left:var(--space-4);padding-right:var(--space-4)}.bl-links-grid{margin:0 calc(-1 * var(--space-4));padding-left:var(--space-4);padding-right:var(--space-4)}}@media (min-width:640px){.content-area{padding:var(--space-6)}.content-inner{max-width:600px}.bl-header{gap:var(--space-3)}.bl-header-icon{width:32px;height:32px}.bl-header h2{font-size:20px}.bl-header p{display:block;color:var(--text-secondary);font-size:12px;margin-top:2px;line-height:1.3}.bl-plan-banner{padding:var(--space-4)}.bl-section{padding:var(--space-4)}.bl-plan-card{flex:0 0 220px}.bl-links-grid{display:grid;grid-template-columns:repeat(3,1fr);overflow-x:visible;margin:0;padding:0}.bl-link-card{white-space:normal;flex:none;flex-direction:column;align-items:flex-start;gap:var(--space-2)}.bl-plans-grid{margin:0;padding-left:0;padding-right:0;padding-bottom:var(--space-2)}.bl-plans-dots{display:none}}@media (min-width:768px){.content-inner{max-width:720px}.bl-header-icon{width:36px;height:36px}.bl-header{gap:var(--space-4);margin-bottom:var(--space-4)}.bl-header h2{font-size:22px}.bl-header p{font-size:13px}.bl-plan-banner{padding:var(--space-4) var(--space-6);margin-bottom:var(--space-4)}.bl-plan-name{font-size:16px}.bl-plan-icon{width:36px;height:36px}.bl-plan-icon svg{width:18px;height:18px}.bl-section{padding:var(--space-6);margin-bottom:var(--space-4)}.bl-scopes-grid{grid-template-columns:repeat(3,1fr)}.bl-btn{height:40px;min-height:40px;font-size:14px}.bl-plans-grid{display:grid;grid-template-columns:repeat(2,1fr);overflow-x:visible;scroll-snap-type:none}.bl-plan-card{flex:none}}@media (min-width:1024px){.content-inner{max-width:960px}.content-area{padding:32px}.bl-header h2{font-size:24px}.bl-header-icon{width:40px;height:40px}.bl-plans-grid{grid-template-columns:repeat(4,1fr)}.bl-scopes-grid{grid-template-columns:repeat(5,1fr)}.bl-btn{height:44px;min-height:44px}}
[data-theme="light"]{--bg-primary:#ffffff;--bg-secondary:#f8f9fc;--bg-tertiary:#f0f2f5;--text-primary:#0f172a;--text-secondary:#475569;--border-color:#e2e8f0;--accent-primary:#2563eb;--accent-secondary:#0891b2}

/* === enterprise-components.css === */
/* ============================================================
   EVE AI Core — Enterprise Components
   ============================================================
   Single source of truth for reusable enterprise UI components.
   Dark enterprise control-room aesthetic for bank/risk/compliance buyers.

   Load order: theme.css -> design-system.css -> bl-components.css -> enterprise-components.css

   IMPORTANT: This file only ADDS new tokens and classes.
   It does NOT override any existing theme variables or component classes.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* ── Governance Plane Colors ── */
  --plane-control: #6366f1;
  --plane-control-bg: rgba(99, 102, 241, 0.12);
  --plane-control-border: rgba(99, 102, 241, 0.3);
  --plane-execution: #0ea5e9;
  --plane-execution-bg: rgba(14, 165, 233, 0.12);
  --plane-execution-border: rgba(14, 165, 233, 0.3);
  --plane-evidence: #10b981;
  --plane-evidence-bg: rgba(16, 185, 129, 0.12);
  --plane-evidence-border: rgba(16, 185, 129, 0.3);

  /* ── Decision / Status Colors ── */
  --status-allow: #22c55e;
  --status-allow-bg: rgba(34, 197, 94, 0.12);
  --status-allow-border: rgba(34, 197, 94, 0.3);
  --status-block: #ef4444;
  --status-block-bg: rgba(239, 68, 68, 0.12);
  --status-block-border: rgba(239, 68, 68, 0.3);
  --status-modify: #f59e0b;
  --status-modify-bg: rgba(245, 158, 11, 0.12);
  --status-modify-border: rgba(245, 158, 11, 0.3);
  --status-warning: #f97316;
  --status-warning-bg: rgba(249, 115, 22, 0.12);
  --status-warning-border: rgba(249, 115, 22, 0.3);
  --status-critical: #dc2626;
  --status-critical-bg: rgba(220, 38, 38, 0.15);
  --status-critical-border: rgba(220, 38, 38, 0.4);
  --status-neutral: #6b7280;
  --status-neutral-bg: rgba(107, 114, 128, 0.12);
  --status-neutral-border: rgba(107, 114, 128, 0.3);

  /* ── Button Tokens ── */
  --btn-height-sm: 28px;
  --btn-height-md: 36px;
  --btn-height-lg: 44px;
  --btn-padding-sm: 0 12px;
  --btn-padding-md: 0 16px;
  --btn-padding-lg: 0 24px;
  --btn-radius: var(--radius-md, 8px);
  --btn-font-size-sm: 12px;
  --btn-font-size-md: 13px;
  --btn-font-size-lg: 14px;

  /* ── Card Tokens ── */
  --ec-card-padding: 20px;
  --ec-card-padding-sm: 14px;
  --ec-card-padding-lg: 28px;
  --ec-card-radius: var(--radius-lg, 12px);
  --ec-card-border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  --ec-card-bg: var(--bg-secondary, rgba(25, 25, 35, 0.95));
  --ec-card-shadow: none;

  /* ── Table Tokens ── */
  --table-row-height: 44px;
  --table-header-height: 40px;
  --table-cell-padding: 0 16px;
  --table-border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));

  /* ── Modal Tokens ── */
  --modal-radius: var(--radius-xl, 16px);
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --modal-bg: var(--bg-secondary, #111118);
  --modal-border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));

  /* ── Badge Tokens ── */
  --badge-radius: 6px;
  --badge-font-size: 11px;
  --badge-padding: 2px 8px;
  --badge-font-weight: 600;

  /* ── Input Tokens ── */
  --input-height: 36px;
  --input-radius: var(--radius-md, 8px);
  --input-border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-focus-border: var(--accent-primary, #6366f1);
}


/* ============================================================
   2. BUTTON SYSTEM (.app-btn)
   ============================================================ */
.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--btn-height-md);
  padding: var(--btn-padding-md);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size-md);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  font-family: inherit;
  line-height: 1;
}

.app-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.app-btn svg {
  flex-shrink: 0;
}

/* Sizes */
.app-btn-sm {
  height: var(--btn-height-sm);
  padding: var(--btn-padding-sm);
  font-size: var(--btn-font-size-sm);
}

.app-btn-lg {
  height: var(--btn-height-lg);
  padding: var(--btn-padding-lg);
  font-size: var(--btn-font-size-lg);
}

/* Variants */
.app-btn-primary {
  background: var(--accent-primary, #6366f1);
  color: #fff;
  border-color: var(--accent-primary, #6366f1);
}

.app-btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.app-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #e0e0e0);
  border-color: var(--border-color, rgba(255, 255, 255, 0.12));
}

.app-btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.app-btn-danger {
  background: var(--status-block-bg);
  color: var(--status-block);
  border-color: var(--status-block-border);
}

.app-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
}

.app-btn-success {
  background: var(--status-allow-bg);
  color: var(--status-allow);
  border-color: var(--status-allow-border);
}

.app-btn-success:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.2);
}

.app-btn-ghost {
  background: transparent;
  color: var(--text-secondary, #888);
  border-color: transparent;
}

.app-btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #e0e0e0);
}

/* Icon-only button */
.app-btn-icon {
  padding: 0;
  width: var(--btn-height-md);
  justify-content: center;
}

.app-btn-icon.app-btn-sm {
  width: var(--btn-height-sm);
}

.app-btn-icon.app-btn-lg {
  width: var(--btn-height-lg);
}

/* Focus ring */
.app-btn:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: 2px;
}


/* ============================================================
   3. CARD SYSTEM (.app-card)
   ============================================================ */
.app-card {
  background: var(--ec-card-bg);
  border: var(--ec-card-border);
  border-radius: var(--ec-card-radius);
  padding: var(--ec-card-padding);
  box-shadow: var(--ec-card-shadow);
}

.app-card-sm {
  padding: var(--ec-card-padding-sm);
}

.app-card-lg {
  padding: var(--ec-card-padding-lg);
}

.app-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.app-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-card-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.app-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Plane variants */
.app-card-control {
  border-color: var(--plane-control-border);
}

.app-card-control .app-card-title {
  color: var(--plane-control);
}

.app-card-execution {
  border-color: var(--plane-execution-border);
}

.app-card-execution .app-card-title {
  color: var(--plane-execution);
}

.app-card-evidence {
  border-color: var(--plane-evidence-border);
}

.app-card-evidence .app-card-title {
  color: var(--plane-evidence);
}


/* ============================================================
   4. BADGE SYSTEM (.app-badge)
   ============================================================ */
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  border: 1px solid transparent;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.app-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.app-badge-allow {
  background: var(--status-allow-bg);
  color: var(--status-allow);
  border-color: var(--status-allow-border);
}

.app-badge-allow .app-badge-dot {
  background: var(--status-allow);
}

.app-badge-block {
  background: var(--status-block-bg);
  color: var(--status-block);
  border-color: var(--status-block-border);
}

.app-badge-block .app-badge-dot {
  background: var(--status-block);
}

.app-badge-modify {
  background: var(--status-modify-bg);
  color: var(--status-modify);
  border-color: var(--status-modify-border);
}

.app-badge-modify .app-badge-dot {
  background: var(--status-modify);
}

.app-badge-warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
  border-color: var(--status-warning-border);
}

.app-badge-warning .app-badge-dot {
  background: var(--status-warning);
}

.app-badge-critical {
  background: var(--status-critical-bg);
  color: var(--status-critical);
  border-color: var(--status-critical-border);
}

.app-badge-critical .app-badge-dot {
  background: var(--status-critical);
}

.app-badge-neutral {
  background: var(--status-neutral-bg);
  color: var(--status-neutral);
  border-color: var(--status-neutral-border);
}

.app-badge-neutral .app-badge-dot {
  background: var(--status-neutral);
}

.app-badge-control {
  background: var(--plane-control-bg);
  color: var(--plane-control);
  border-color: var(--plane-control-border);
}

.app-badge-execution {
  background: var(--plane-execution-bg);
  color: var(--plane-execution);
  border-color: var(--plane-execution-border);
}

.app-badge-evidence {
  background: var(--plane-evidence-bg);
  color: var(--plane-evidence);
  border-color: var(--plane-evidence-border);
}


/* ============================================================
   5. TABLE SYSTEM (.app-table)
   ============================================================ */
.app-table-wrap {
  overflow-x: auto;
  border: var(--table-border);
  border-radius: var(--ec-card-radius);
  -webkit-overflow-scrolling: touch;
}

.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.app-table th {
  height: var(--table-header-height);
  padding: var(--table-cell-padding);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: var(--table-border);
  white-space: nowrap;
}

.app-table td {
  height: var(--table-row-height);
  padding: var(--table-cell-padding);
  border-bottom: var(--table-border);
  color: var(--text-primary);
  vertical-align: middle;
}

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

.app-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* Sortable table headers */
.app-table-sortable th {
  cursor: pointer;
  user-select: none;
}

.app-table-sortable th:hover {
  color: var(--text-primary);
}

.app-table-sort-icon {
  margin-left: 4px;
  opacity: 0.4;
  display: inline-block;
}

.app-table-sort-icon.active {
  opacity: 1;
  color: var(--accent-primary);
}


/* ============================================================
   6. FORM INPUTS (.app-input, .app-select, .app-textarea)
   ============================================================ */
.app-input,
.app-select,
.app-textarea {
  height: var(--input-height);
  padding: 0 12px;
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.app-input:focus,
.app-select:focus,
.app-textarea:focus {
  border-color: var(--input-focus-border);
}

.app-input::placeholder,
.app-textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.app-textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
}

.app-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.app-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-input-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.app-input-error {
  font-size: 11px;
  color: var(--status-block);
}

.app-input.is-error {
  border-color: var(--status-block-border);
}

.app-input:focus-visible,
.app-select:focus-visible,
.app-textarea:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: 2px;
}


/* ============================================================
   7. EMPTY / LOADING / ERROR STATES
   ============================================================ */

/* ── Empty State ── */
.app-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
  color: var(--text-secondary);
}

.app-empty-state-icon {
  opacity: 0.3;
  margin-bottom: 4px;
}

.app-empty-state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0.7;
}

.app-empty-state-desc {
  font-size: 13px;
  max-width: 280px;
  line-height: 1.5;
}

/* ── Loading State — Equalizer bars (NOT spinners) ── */
.app-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 14px;
}

.app-loading-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}

.app-loading-bars span {
  display: block;
  width: 4px;
  background: var(--accent-primary);
  border-radius: 2px;
  animation: app-eq 1s ease-in-out infinite;
}

.app-loading-bars span:nth-child(1) {
  height: 40%;
  animation-delay: 0s;
}

.app-loading-bars span:nth-child(2) {
  height: 70%;
  animation-delay: 0.1s;
}

.app-loading-bars span:nth-child(3) {
  height: 100%;
  animation-delay: 0.2s;
}

.app-loading-bars span:nth-child(4) {
  height: 60%;
  animation-delay: 0.3s;
}

.app-loading-bars span:nth-child(5) {
  height: 30%;
  animation-delay: 0.4s;
}

@keyframes app-eq {
  0%, 100% {
    transform: scaleY(0.5);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.app-loading-text {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── Error State ── */
.app-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}

.app-error-state-icon {
  color: var(--status-block);
  opacity: 0.7;
}

.app-error-state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--status-block);
}

.app-error-state-desc {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 280px;
  line-height: 1.5;
}

/* ── Inline Alert Banners ── */
.app-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid;
  font-size: 13px;
  line-height: 1.5;
}

.app-alert-allow {
  background: var(--status-allow-bg);
  border-color: var(--status-allow-border);
  color: var(--status-allow);
}

.app-alert-block {
  background: var(--status-block-bg);
  border-color: var(--status-block-border);
  color: var(--status-block);
}

.app-alert-warning {
  background: var(--status-warning-bg);
  border-color: var(--status-warning-border);
  color: var(--status-warning);
}

.app-alert-critical {
  background: var(--status-critical-bg);
  border-color: var(--status-critical-border);
  color: var(--status-critical);
}

.app-alert-neutral {
  background: var(--status-neutral-bg);
  border-color: var(--status-neutral-border);
  color: var(--text-secondary);
}


/* ============================================================
   8. MODAL SYSTEM (.app-modal)
   ============================================================ */
.app-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.app-modal {
  background: var(--modal-bg);
  border: var(--modal-border);
  border-radius: var(--modal-radius);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.app-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: var(--modal-border);
}

.app-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.app-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm, 4px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: color 0.15s, background 0.15s;
}

.app-modal-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.app-modal-body {
  padding: 24px;
}

.app-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: var(--modal-border);
}

/* Modal size variants */
.app-modal-sm { max-width: 400px; }
.app-modal-lg { max-width: 720px; }
.app-modal-xl { max-width: 960px; }


/* ============================================================
   9. METRIC CARD (.app-metric)
   ============================================================ */
.app-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-metric-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.app-metric-value.app-metric-lg {
  font-size: 36px;
}

.app-metric-value.app-metric-sm {
  font-size: 20px;
}

.app-metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.app-metric-delta {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.app-metric-delta.up {
  color: var(--status-allow);
}

.app-metric-delta.down {
  color: var(--status-block);
}

.app-metric-delta.flat {
  color: var(--text-secondary);
}

/* Metric grid helper */
.app-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
}


/* ============================================================
   10. TABS (.app-tabs)
   ============================================================ */
.app-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  gap: 0;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.app-tabs::-webkit-scrollbar {
  display: none;
}

.app-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  font-family: inherit;
  flex-shrink: 0;
}

.app-tab:hover {
  color: var(--text-primary);
}

.app-tab.active {
  color: var(--accent-primary, #6366f1);
  border-bottom-color: var(--accent-primary, #6366f1);
}

.app-tab:focus-visible {
  outline: 2px solid var(--input-focus-border);
  outline-offset: -2px;
}


/* ============================================================
   11. STATUS DOT (.app-dot)
   ============================================================ */
.app-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-neutral);
  flex-shrink: 0;
}

.app-dot.allow,
.app-dot.online,
.app-dot.active {
  background: var(--status-allow);
}

.app-dot.block,
.app-dot.offline,
.app-dot.error {
  background: var(--status-block);
}

.app-dot.warning,
.app-dot.degraded {
  background: var(--status-warning);
}

.app-dot.modify,
.app-dot.pending {
  background: var(--status-modify);
}

.app-dot.critical {
  background: var(--status-critical);
}

.app-dot.pulse {
  animation: app-dot-pulse 2s ease-in-out infinite;
}

@keyframes app-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}


/* ============================================================
   12. UTILITY HELPERS (enterprise-specific)
   ============================================================ */

/* Plane accent left-border strip */
.app-plane-strip-control  { border-left: 3px solid var(--plane-control); padding-left: 12px; }
.app-plane-strip-execution { border-left: 3px solid var(--plane-execution); padding-left: 12px; }
.app-plane-strip-evidence  { border-left: 3px solid var(--plane-evidence); padding-left: 12px; }

/* Status-colored text */
.app-text-allow   { color: var(--status-allow); }
.app-text-block   { color: var(--status-block); }
.app-text-modify  { color: var(--status-modify); }
.app-text-warning { color: var(--status-warning); }
.app-text-critical { color: var(--status-critical); }
.app-text-neutral { color: var(--status-neutral); }

/* Plane-colored text */
.app-text-control   { color: var(--plane-control); }
.app-text-execution { color: var(--plane-execution); }
.app-text-evidence  { color: var(--plane-evidence); }

/* Monospace code inline */
.app-code {
  font-family: var(--font-mono, 'IBM Plex Mono', 'SF Mono', monospace);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text-primary);
}

/* Divider */
.app-divider {
  height: 1px;
  background: var(--border-color, rgba(255, 255, 255, 0.1));
  border: none;
  margin: 16px 0;
}

/* Flex row with gap */
.app-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Truncation */
.app-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Number display */
.app-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* ============================================================
   13. LIGHT MODE OVERRIDES
   All status/plane colors remain as-is (semantic colors work on
   both dark and light backgrounds at the defined opacity levels).
   Card and surface overrides needed for light theme.
   ============================================================ */
[data-theme="light"] .app-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

[data-theme="light"] .app-card-control {
  border-color: rgba(99, 102, 241, 0.35);
}

[data-theme="light"] .app-card-execution {
  border-color: rgba(14, 165, 233, 0.35);
}

[data-theme="light"] .app-card-evidence {
  border-color: rgba(16, 185, 129, 0.35);
}

[data-theme="light"] .app-card-title {
  color: #0f172a;
}

[data-theme="light"] .app-card-subtitle {
  color: #1f2937;
}

[data-theme="light"] .app-table th {
  color: #1f2937;
  background: #f8fafc;
  border-bottom-color: #e5e7eb;
}

[data-theme="light"] .app-table td {
  color: #0f172a;
  border-bottom-color: #f1f5f9;
}

[data-theme="light"] .app-table-wrap {
  border-color: #e5e7eb;
}

[data-theme="light"] .app-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.03);
}

[data-theme="light"] .app-input,
[data-theme="light"] .app-select,
[data-theme="light"] .app-textarea {
  background: #ffffff;
  border-color: #d1d5db;
  color: #0f172a;
}

[data-theme="light"] .app-input::placeholder,
[data-theme="light"] .app-textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}

[data-theme="light"] .app-input:focus,
[data-theme="light"] .app-select:focus,
[data-theme="light"] .app-textarea:focus {
  border-color: #6366f1;
}

[data-theme="light"] .app-input-label {
  color: #374151;
}

[data-theme="light"] .app-btn-secondary {
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #374151;
}

[data-theme="light"] .app-btn-secondary:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #c7d2fe;
  color: #0f172a;
}

[data-theme="light"] .app-btn-ghost {
  color: #1f2937;
}

[data-theme="light"] .app-btn-ghost:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .app-modal-backdrop {
  background: rgba(15, 23, 42, 0.6);
}

[data-theme="light"] .app-modal {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .app-modal-header {
  border-bottom-color: #e5e7eb;
}

[data-theme="light"] .app-modal-title {
  color: #0f172a;
}

[data-theme="light"] .app-modal-footer {
  border-top-color: #e5e7eb;
}

[data-theme="light"] .app-modal-close {
  color: #1f2937;
}

[data-theme="light"] .app-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .app-tabs {
  border-bottom-color: #e5e7eb;
}

[data-theme="light"] .app-tab {
  color: #1f2937;
}

[data-theme="light"] .app-tab:hover {
  color: #0f172a;
}

[data-theme="light"] .app-tab.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
}

[data-theme="light"] .app-divider {
  background: #e5e7eb;
}

[data-theme="light"] .app-code {
  background: #f1f5f9;
  border-color: #e5e7eb;
  color: #0f172a;
}

[data-theme="light"] .app-metric-value {
  color: #0f172a;
}

[data-theme="light"] .app-metric-label {
  color: #1f2937;
}

[data-theme="light"] .app-empty-state-title {
  color: #0f172a;
}

[data-theme="light"] .app-empty-state-desc {
  color: #1f2937;
}

[data-theme="light"] .app-loading-text {
  color: #1f2937;
}

[data-theme="light"] .app-error-state-desc {
  color: #1f2937;
}

[data-theme="light"] .app-alert-neutral {
  background: rgba(107, 114, 128, 0.08);
  border-color: rgba(107, 114, 128, 0.2);
  color: #4b5563;
}


/* ============================================================
   14. RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 767px) {
  .app-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .app-modal {
    max-height: 95vh;
    border-radius: var(--radius-lg, 12px);
  }

  .app-modal-body {
    padding: 16px;
  }

  .app-modal-header,
  .app-modal-footer {
    padding: 14px 16px;
  }

  .app-metric-value {
    font-size: 22px;
  }

  .app-metric-value.app-metric-lg {
    font-size: 28px;
  }

  .app-table th,
  .app-table td {
    padding: 0 10px;
  }
}


/* === governance-command.css === */
/*
 * governance-command.css
 * EVE AI Core — Command-Center Design System
 * Extends: theme.css → design-system.css → bl-components.css → enterprise-components.css
 *
 * Layer 5 of CSS stack — highest specificity override layer
 * Load after enterprise-components.css
 */

/* ============================================================
   EXTENDED TOKEN SYSTEM
   ============================================================ */

:root {
  /* Semantic severity palette */
  --sev-allow:        #22c55e;
  --sev-allow-dim:    #16a34a;
  --sev-allow-glow:   rgba(34, 197, 94, 0.18);
  --sev-allow-bg:     rgba(34, 197, 94, 0.08);
  --sev-allow-border: rgba(34, 197, 94, 0.30);

  --sev-warn:         #f59e0b;
  --sev-warn-dim:     #d97706;
  --sev-warn-glow:    rgba(245, 158, 11, 0.18);
  --sev-warn-bg:      rgba(245, 158, 11, 0.08);
  --sev-warn-border:  rgba(245, 158, 11, 0.30);

  --sev-block:        #ef4444;
  --sev-block-dim:    #dc2626;
  --sev-block-glow:   rgba(239, 68, 68, 0.18);
  --sev-block-bg:     rgba(239, 68, 68, 0.08);
  --sev-block-border: rgba(239, 68, 68, 0.30);

  --sev-info:         #38bdf8;
  --sev-info-dim:     #0ea5e9;
  --sev-info-glow:    rgba(56, 189, 248, 0.18);
  --sev-info-bg:      rgba(56, 189, 248, 0.08);
  --sev-info-border:  rgba(56, 189, 248, 0.30);

  --sev-model:        #a78bfa;
  --sev-model-dim:    #7c3aed;
  --sev-model-glow:   rgba(167, 139, 250, 0.18);
  --sev-model-bg:     rgba(167, 139, 250, 0.08);
  --sev-model-border: rgba(167, 139, 250, 0.30);

  --sev-neutral:      #6b7280;
  --sev-neutral-dim:  #4b5563;
  --sev-neutral-bg:   rgba(107, 114, 128, 0.08);
  --sev-neutral-border: rgba(107, 114, 128, 0.20);

  /* Surface system (extends theme.css --surface-0..4) */
  --gc-surface-0:  #080b10;   /* page canvas */
  --gc-surface-1:  #0d1117;   /* card background */
  --gc-surface-2:  #111827;   /* elevated card */
  --gc-surface-3:  #1a2233;   /* hover/selected */
  --gc-surface-4:  #242f45;   /* strong accent */
  --gc-surface-5:  #2d3a52;   /* maximum elevation */

  /* Glass overlays */
  --gc-glass-sm:   rgba(255,255,255,0.02);
  --gc-glass-md:   rgba(255,255,255,0.04);
  --gc-glass-lg:   rgba(255,255,255,0.06);
  --gc-glass-xl:   rgba(255,255,255,0.08);

  /* Borders */
  --gc-border-subtle:  rgba(255,255,255,0.04);
  --gc-border-normal:  rgba(255,255,255,0.08);
  --gc-border-strong:  rgba(255,255,255,0.14);
  --gc-border-focus:   rgba(74,144,226,0.70);

  /* Typography */
  --gc-text-primary:   #f0f4ff;
  --gc-text-secondary: #94a3b8;
  --gc-text-tertiary:  #64748b;
  --gc-text-disabled:  #3f4a5e;
  --gc-text-inverse:   #0d1117;

  /* Mono accent for numbers */
  --gc-text-metric:    #e2e8f0;
  --gc-text-code:      #93c5fd;

  /* Shadows */
  --gc-shadow-xs:  0 1px 2px rgba(0,0,0,0.30);
  --gc-shadow-sm:  0 2px 4px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.20);
  --gc-shadow-md:  0 4px 12px rgba(0,0,0,0.50), 0 2px 4px rgba(0,0,0,0.30);
  --gc-shadow-lg:  0 8px 24px rgba(0,0,0,0.60), 0 4px 8px rgba(0,0,0,0.40);
  --gc-shadow-xl:  0 16px 48px rgba(0,0,0,0.70), 0 8px 16px rgba(0,0,0,0.50);

  /* Inset glow shadows */
  --gc-inset-allow:  inset 0 0 0 1px var(--sev-allow-border);
  --gc-inset-warn:   inset 0 0 0 1px var(--sev-warn-border);
  --gc-inset-block:  inset 0 0 0 1px var(--sev-block-border);
  --gc-inset-info:   inset 0 0 0 1px var(--sev-info-border);

  /* Radii */
  --gc-radius-xs:  2px;
  --gc-radius-sm:  4px;
  --gc-radius-md:  6px;
  --gc-radius-lg:  10px;
  --gc-radius-xl:  14px;
  --gc-radius-2xl: 20px;
  --gc-radius-pill: 999px;

  /* Spacing */
  --gc-sp-1:  4px;
  --gc-sp-2:  8px;
  --gc-sp-3:  12px;
  --gc-sp-4:  16px;
  --gc-sp-5:  20px;
  --gc-sp-6:  24px;
  --gc-sp-8:  32px;
  --gc-sp-10: 40px;
  --gc-sp-12: 48px;
  --gc-sp-16: 64px;

  /* Animation durations */
  --gc-dur-fast:    120ms;
  --gc-dur-normal:  200ms;
  --gc-dur-slow:    350ms;
  --gc-dur-pulse:   2200ms;
  --gc-dur-shimmer: 1600ms;

  /* Z-index layers */
  --gc-z-base:    0;
  --gc-z-raised:  10;
  --gc-z-overlay: 100;
  --gc-z-modal:   1000;
  --gc-z-tooltip: 2000;
  --gc-z-cmdbar:  9000;
}

/* ============================================================
   ANIMATION KEYFRAMES
   ============================================================ */

@keyframes gc-pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.9; }
  70%  { transform: scale(2.0); opacity: 0;   }
  100% { transform: scale(2.0); opacity: 0;   }
}

@keyframes gc-blink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.2; }
}

@keyframes gc-shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position:  400% 0; }
}

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

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

@keyframes gc-slide-right {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes gc-count-up {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes gc-event-enter {
  from { opacity: 0; transform: translateY(-4px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 80px; }
}

@keyframes gc-equalizer {
  0%   { height: 4px;  }
  25%  { height: 14px; }
  50%  { height: 8px;  }
  75%  { height: 18px; }
  100% { height: 4px;  }
}

@keyframes gc-scanline {
  0%   { top: -10%; }
  100% { top: 110%; }
}

@keyframes gc-data-tick {
  0%   { opacity: 0.4; }
  50%  { opacity: 1;   }
  100% { opacity: 0.4; }
}

@keyframes gc-row-highlight {
  0%   { background-color: rgba(74,144,226,0.18); }
  100% { background-color: transparent; }
}

/* ============================================================
   LIVE INDICATOR
   ============================================================ */

.gc-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sev-allow);
  user-select: none;
}

.gc-live__dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
}

.gc-live__dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sev-allow);
}

.gc-live__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sev-allow);
  animation: gc-pulse-ring var(--gc-dur-pulse) ease-out infinite;
}

.gc-live--warn    { color: var(--sev-warn);  }
.gc-live--warn .gc-live__dot::before,
.gc-live--warn .gc-live__dot::after { background: var(--sev-warn); }

.gc-live--block   { color: var(--sev-block); }
.gc-live--block .gc-live__dot::before,
.gc-live--block .gc-live__dot::after { background: var(--sev-block); }

.gc-live--info    { color: var(--sev-info);  }
.gc-live--info .gc-live__dot::before,
.gc-live--info .gc-live__dot::after  { background: var(--sev-info);  }

.gc-live--offline { color: var(--sev-neutral); }
.gc-live--offline .gc-live__dot::before { background: var(--sev-neutral); }
.gc-live--offline .gc-live__dot::after  { display: none; }

/* Equalizer loading bars */
.gc-equalizer {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}

.gc-equalizer__bar {
  width: 3px;
  min-height: 4px;
  background: var(--sev-allow);
  border-radius: 1px;
  animation: gc-equalizer 0.9s ease-in-out infinite;
}

.gc-equalizer__bar:nth-child(2) { animation-delay: 0.15s; }
.gc-equalizer__bar:nth-child(3) { animation-delay: 0.30s; }
.gc-equalizer__bar:nth-child(4) { animation-delay: 0.45s; }
.gc-equalizer__bar:nth-child(5) { animation-delay: 0.60s; }

/* ============================================================
   STATUS BADGE
   ============================================================ */

.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--gc-radius-pill);
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.6;
}

.gc-badge--allow  { background: var(--sev-allow-bg);   color: var(--sev-allow);   border-color: var(--sev-allow-border);  }
.gc-badge--warn   { background: var(--sev-warn-bg);    color: var(--sev-warn);    border-color: var(--sev-warn-border);   }
.gc-badge--block  { background: var(--sev-block-bg);   color: var(--sev-block);   border-color: var(--sev-block-border);  }
.gc-badge--info   { background: var(--sev-info-bg);    color: var(--sev-info);    border-color: var(--sev-info-border);   }
.gc-badge--model  { background: var(--sev-model-bg);   color: var(--sev-model);   border-color: var(--sev-model-border);  }
.gc-badge--neutral{ background: var(--sev-neutral-bg); color: var(--sev-neutral); border-color: var(--sev-neutral-border);}

.gc-badge--lg {
  font-size: 12px;
  padding: 4px 12px;
}

.gc-badge--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Pulsing badge variant */
.gc-badge--pulse { animation: gc-data-tick 2s ease-in-out infinite; }

/* ============================================================
   METRIC CARD
   ============================================================ */

.gc-metric-card {
  position: relative;
  background: var(--gc-surface-1);
  border: 1px solid var(--gc-border-normal);
  border-radius: var(--gc-radius-lg);
  padding: var(--gc-sp-4) var(--gc-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--gc-sp-2);
  overflow: hidden;
  transition: border-color var(--gc-dur-normal), box-shadow var(--gc-dur-normal);
}

.gc-metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gc-metric-accent, var(--sev-info));
  border-radius: var(--gc-radius-lg) var(--gc-radius-lg) 0 0;
}

.gc-metric-card:hover {
  border-color: var(--gc-border-strong);
  box-shadow: var(--gc-shadow-md);
}

.gc-metric-card--allow  { --gc-metric-accent: var(--sev-allow); }
.gc-metric-card--warn   { --gc-metric-accent: var(--sev-warn);  }
.gc-metric-card--block  { --gc-metric-accent: var(--sev-block); }
.gc-metric-card--info   { --gc-metric-accent: var(--sev-info);  }
.gc-metric-card--model  { --gc-metric-accent: var(--sev-model); }

.gc-metric-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gc-sp-2);
}

.gc-metric-card__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gc-text-tertiary);
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
}

.gc-metric-card__icon {
  width: 18px;
  height: 18px;
  opacity: 0.50;
  color: var(--gc-metric-accent, var(--sev-info));
  flex-shrink: 0;
}

.gc-metric-card__value {
  font-size: 28px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gc-text-metric);
  line-height: 1;
  letter-spacing: -0.02em;
  animation: gc-count-up var(--gc-dur-slow) ease-out;
}

.gc-metric-card__value--sm { font-size: 20px; }
.gc-metric-card__value--lg { font-size: 36px; }

.gc-metric-card__sub {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-2);
  font-size: 11px;
  color: var(--gc-text-tertiary);
}

.gc-metric-card__delta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
}

.gc-metric-card__delta--up   { color: var(--sev-allow); }
.gc-metric-card__delta--down { color: var(--sev-block); }
.gc-metric-card__delta--flat { color: var(--sev-neutral); }

/* Sparkline container inside metric card */
.gc-metric-card__sparkline {
  height: 32px;
  margin-top: var(--gc-sp-1);
  opacity: 0.7;
}

/* Metric card grid row */
.gc-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gc-sp-3);
  width: 100%;
}

.gc-metric-row--5 { grid-template-columns: repeat(5, 1fr); }
.gc-metric-row--4 { grid-template-columns: repeat(4, 1fr); }
.gc-metric-row--3 { grid-template-columns: repeat(3, 1fr); }
.gc-metric-row--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1200px) {
  .gc-metric-row--5 { grid-template-columns: repeat(3, 1fr); }
  .gc-metric-row--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .gc-metric-row--5,
  .gc-metric-row--4,
  .gc-metric-row--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SHIMMER LOADING SKELETON
   ============================================================ */

@keyframes gc-shimmer-anim {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.gc-skeleton {
  background: linear-gradient(
    90deg,
    var(--gc-surface-2)   0%,
    var(--gc-surface-3)   45%,
    var(--gc-surface-2)   100%
  );
  background-size: 200% 100%;
  animation: gc-shimmer-anim var(--gc-dur-shimmer) linear infinite;
  border-radius: var(--gc-radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.gc-skeleton--text  { height: 14px; border-radius: 3px; }
.gc-skeleton--title { height: 22px; border-radius: 3px; }
.gc-skeleton--value { height: 36px; width: 80px; border-radius: 4px; }
.gc-skeleton--badge { height: 20px; width: 60px; border-radius: 10px; }
.gc-skeleton--card  { height: 100px; border-radius: var(--gc-radius-lg); }
.gc-skeleton--row   { height: 40px; border-radius: var(--gc-radius-sm); }

/* Loading state applied to a whole card */
.gc-loading .gc-metric-card__value,
.gc-loading .gc-metric-card__label,
.gc-loading .gc-metric-card__sub { @extend .gc-skeleton; }

/* ============================================================
   GOVERNANCE PANEL
   ============================================================ */

.gc-panel {
  background: var(--gc-surface-1);
  border: 1px solid var(--gc-border-normal);
  border-radius: var(--gc-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--gc-shadow-sm);
}

.gc-panel--elevated {
  background: var(--gc-surface-2);
  border-color: var(--gc-border-strong);
  box-shadow: var(--gc-shadow-md);
}

.gc-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gc-sp-3) var(--gc-sp-5);
  border-bottom: 1px solid var(--gc-border-subtle);
  background: var(--gc-glass-sm);
  gap: var(--gc-sp-3);
  min-height: 44px;
  flex-shrink: 0;
}

.gc-panel__title {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-2);
  font-size: 11px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gc-text-secondary);
}

.gc-panel__title-icon {
  width: 14px;
  height: 14px;
  opacity: 0.70;
  flex-shrink: 0;
}

.gc-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-2);
  flex-shrink: 0;
}

.gc-panel__body {
  flex: 1;
  padding: var(--gc-sp-4) var(--gc-sp-5);
  overflow: auto;
}

.gc-panel__body--flush { padding: 0; }
.gc-panel__body--sm    { padding: var(--gc-sp-3); }

.gc-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gc-sp-2) var(--gc-sp-5);
  border-top: 1px solid var(--gc-border-subtle);
  background: var(--gc-glass-sm);
  font-size: 11px;
  color: var(--gc-text-tertiary);
  font-family: 'IBM Plex Mono', monospace;
  min-height: 34px;
}

/* Severity accent on left edge */
.gc-panel--allow { border-left: 3px solid var(--sev-allow); }
.gc-panel--warn  { border-left: 3px solid var(--sev-warn);  }
.gc-panel--block { border-left: 3px solid var(--sev-block); }
.gc-panel--info  { border-left: 3px solid var(--sev-info);  }
.gc-panel--model { border-left: 3px solid var(--sev-model); }

/* ============================================================
   DATA TABLE
   ============================================================ */

.gc-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'IBM Plex Sans', sans-serif;
}

.gc-table th {
  padding: var(--gc-sp-2) var(--gc-sp-3);
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gc-text-tertiary);
  background: var(--gc-surface-2);
  border-bottom: 1px solid var(--gc-border-normal);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.gc-table th:first-child { border-radius: var(--gc-radius-sm) 0 0 0; }
.gc-table th:last-child  { border-radius: 0 var(--gc-radius-sm) 0 0; }

.gc-table td {
  padding: var(--gc-sp-2) var(--gc-sp-3);
  border-bottom: 1px solid var(--gc-border-subtle);
  color: var(--gc-text-secondary);
  vertical-align: middle;
}

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

.gc-table tbody tr {
  transition: background var(--gc-dur-fast);
}

.gc-table tbody tr:hover { background: var(--gc-surface-2); }

.gc-table tbody tr:hover td { color: var(--gc-text-primary); }

/* Row state highlights */
.gc-table tr.is-new { animation: gc-row-highlight 1.5s ease-out forwards; }

.gc-table tr.is-blocked td:first-child {
  border-left: 2px solid var(--sev-block);
}

.gc-table tr.is-warn td:first-child {
  border-left: 2px solid var(--sev-warn);
}

.gc-table tr.is-allow td:first-child {
  border-left: 2px solid var(--sev-allow);
}

/* Mono cell variant */
.gc-table .mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--gc-text-code);
}

/* Truncated cell */
.gc-table .truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sort arrow */
.gc-table th.sortable { cursor: pointer; }
.gc-table th.sortable:hover { color: var(--gc-text-primary); }
.gc-table th.sorted-asc::after  { content: ' ↑'; }
.gc-table th.sorted-desc::after { content: ' ↓'; }

/* Dense table variant */
.gc-table--dense th,
.gc-table--dense td { padding: var(--gc-sp-1) var(--gc-sp-2); }

/* ============================================================
   EVENT RAIL
   ============================================================ */

.gc-event-rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  max-height: 420px;
  position: relative;
}

.gc-event-rail__item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--gc-sp-3);
  padding: var(--gc-sp-2) var(--gc-sp-3);
  border-bottom: 1px solid var(--gc-border-subtle);
  font-size: 12px;
  animation: gc-event-enter 0.25s ease-out;
  transition: background var(--gc-dur-fast);
  cursor: default;
}

.gc-event-rail__item:hover { background: var(--gc-surface-2); }
.gc-event-rail__item:last-child { border-bottom: none; }

.gc-event-rail__time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--gc-text-tertiary);
  white-space: nowrap;
}

.gc-event-rail__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gc-event-color, var(--sev-neutral));
}

.gc-event-rail__item--allow  { --gc-event-color: var(--sev-allow);   }
.gc-event-rail__item--warn   { --gc-event-color: var(--sev-warn);    }
.gc-event-rail__item--block  { --gc-event-color: var(--sev-block);   }
.gc-event-rail__item--info   { --gc-event-color: var(--sev-info);    }
.gc-event-rail__item--model  { --gc-event-color: var(--sev-model);   }

.gc-event-rail__msg {
  color: var(--gc-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.gc-event-rail__meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--gc-text-tertiary);
  white-space: nowrap;
}

/* Empty state in rail */
.gc-event-rail__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gc-sp-10) var(--gc-sp-6);
  color: var(--gc-text-disabled);
  font-size: 12px;
  gap: var(--gc-sp-2);
  text-align: center;
}

.gc-event-rail__empty svg {
  width: 28px;
  height: 28px;
  opacity: 0.25;
}

/* ============================================================
   TELEMETRY PANEL (sparklines / gauges)
   ============================================================ */

.gc-telemetry {
  display: flex;
  flex-direction: column;
  gap: var(--gc-sp-3);
}

.gc-telemetry__row {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-3);
}

.gc-telemetry__label {
  font-size: 11px;
  color: var(--gc-text-tertiary);
  font-family: 'IBM Plex Mono', monospace;
  width: 110px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gc-telemetry__bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--gc-surface-3);
  border-radius: var(--gc-radius-pill);
  overflow: hidden;
  position: relative;
}

.gc-telemetry__bar-fill {
  height: 100%;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-bar-color, var(--sev-info));
  transition: width 0.6s ease-out;
  position: relative;
}

.gc-telemetry__bar-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 30%;
  height: 100%;
  background: rgba(255,255,255,0.20);
  border-radius: inherit;
}

.gc-telemetry__value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--gc-text-secondary);
  width: 44px;
  text-align: right;
  flex-shrink: 0;
}

/* Color variants by threshold */
.gc-telemetry__bar-fill[data-level="ok"]      { --gc-bar-color: var(--sev-allow);   }
.gc-telemetry__bar-fill[data-level="warn"]    { --gc-bar-color: var(--sev-warn);    }
.gc-telemetry__bar-fill[data-level="danger"]  { --gc-bar-color: var(--sev-block);   }

/* ============================================================
   AUDIT PANEL (evidence chain / decision lineage)
   ============================================================ */

.gc-audit {
  display: flex;
  flex-direction: column;
  position: relative;
}

.gc-audit__step {
  display: flex;
  gap: var(--gc-sp-3);
  position: relative;
  padding-bottom: var(--gc-sp-4);
}

.gc-audit__step:last-child { padding-bottom: 0; }

/* Connector line */
.gc-audit__step::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--gc-border-normal);
}

.gc-audit__step:last-child::before { display: none; }

.gc-audit__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gc-audit-color, var(--sev-neutral));
  background: var(--gc-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.gc-audit__icon svg {
  width: 11px;
  height: 11px;
  color: var(--gc-audit-color, var(--sev-neutral));
}

.gc-audit__step--allow { --gc-audit-color: var(--sev-allow); }
.gc-audit__step--warn  { --gc-audit-color: var(--sev-warn);  }
.gc-audit__step--block { --gc-audit-color: var(--sev-block); }
.gc-audit__step--info  { --gc-audit-color: var(--sev-info);  }

.gc-audit__content {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.gc-audit__content-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--gc-text-primary);
  margin-bottom: 2px;
}

.gc-audit__content-meta {
  font-size: 11px;
  color: var(--gc-text-tertiary);
  font-family: 'IBM Plex Mono', monospace;
}

.gc-audit__content-detail {
  margin-top: var(--gc-sp-1);
  padding: var(--gc-sp-2) var(--gc-sp-3);
  background: var(--gc-surface-2);
  border-radius: var(--gc-radius-sm);
  font-size: 11px;
  color: var(--gc-text-secondary);
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.5;
  border-left: 2px solid var(--gc-audit-color, var(--sev-neutral));
}

/* ============================================================
   ACTION BUTTON SYSTEM
   ============================================================ */

.gc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gc-sp-2);
  padding: 6px 14px;
  border-radius: var(--gc-radius-md);
  font-size: 12px;
  font-weight: 600;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--gc-dur-fast);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4;
}

.gc-btn:disabled {
  opacity: 0.40;
  cursor: not-allowed;
  pointer-events: none;
}

.gc-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Primary */
.gc-btn--primary {
  background: #4a90e2;
  color: #fff;
  border-color: rgba(255,255,255,0.10);
}
.gc-btn--primary:hover { background: #5a9fe8; box-shadow: 0 0 0 3px rgba(74,144,226,0.25); }
.gc-btn--primary:active { background: #3a7fd2; }

/* Ghost */
.gc-btn--ghost {
  background: transparent;
  color: var(--gc-text-secondary);
  border-color: var(--gc-border-normal);
}
.gc-btn--ghost:hover { background: var(--gc-surface-2); color: var(--gc-text-primary); border-color: var(--gc-border-strong); }

/* Danger */
.gc-btn--danger {
  background: var(--sev-block-bg);
  color: var(--sev-block);
  border-color: var(--sev-block-border);
}
.gc-btn--danger:hover { background: rgba(239,68,68,0.18); box-shadow: 0 0 0 3px var(--sev-block-glow); }

/* Warn */
.gc-btn--warn {
  background: var(--sev-warn-bg);
  color: var(--sev-warn);
  border-color: var(--sev-warn-border);
}
.gc-btn--warn:hover { background: rgba(245,158,11,0.18); }

/* Allow / confirm */
.gc-btn--allow {
  background: var(--sev-allow-bg);
  color: var(--sev-allow);
  border-color: var(--sev-allow-border);
}
.gc-btn--allow:hover { background: rgba(34,197,94,0.18); box-shadow: 0 0 0 3px var(--sev-allow-glow); }

/* Icon-only */
.gc-btn--icon {
  padding: 6px;
  width: 30px;
  height: 30px;
}

/* Sizes */
.gc-btn--sm { padding: 4px 10px; font-size: 11px; }
.gc-btn--sm svg { width: 12px; height: 12px; }
.gc-btn--lg { padding: 10px 20px; font-size: 13px; }
.gc-btn--lg svg { width: 16px; height: 16px; }

/* Loading state */
.gc-btn--loading .gc-btn__text { opacity: 0; }
.gc-btn--loading::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gc-spin 0.6s linear infinite;
}
.gc-btn--loading { position: relative; pointer-events: none; }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.gc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gc-sp-12) var(--gc-sp-8);
  text-align: center;
  gap: var(--gc-sp-3);
  animation: gc-fade-in var(--gc-dur-slow) ease-out;
}

.gc-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gc-surface-3);
  border: 1px solid var(--gc-border-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gc-text-disabled);
  margin-bottom: var(--gc-sp-1);
}

.gc-empty__icon svg { width: 22px; height: 22px; }

.gc-empty__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gc-text-secondary);
}

.gc-empty__sub {
  font-size: 12px;
  color: var(--gc-text-tertiary);
  max-width: 280px;
  line-height: 1.6;
}

.gc-empty__action {
  margin-top: var(--gc-sp-2);
}

/* Inline empty (inside a panel, smaller) */
.gc-empty--inline {
  padding: var(--gc-sp-8) var(--gc-sp-6);
}

.gc-empty--inline .gc-empty__icon {
  width: 36px;
  height: 36px;
}

.gc-empty--inline .gc-empty__icon svg { width: 16px; height: 16px; }
.gc-empty--inline .gc-empty__title  { font-size: 12px; }
.gc-empty--inline .gc-empty__sub    { font-size: 11px; }

/* ============================================================
   PAGE SECTION
   ============================================================ */

.gc-section {
  display: flex;
  flex-direction: column;
  gap: var(--gc-sp-4);
}

.gc-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gc-sp-3);
  padding-bottom: var(--gc-sp-3);
  border-bottom: 1px solid var(--gc-border-subtle);
}

.gc-section__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gc-text-primary);
  display: flex;
  align-items: center;
  gap: var(--gc-sp-2);
}

.gc-section__title-badge {
  font-size: 10px;
  background: var(--gc-surface-3);
  color: var(--gc-text-tertiary);
  padding: 1px 6px;
  border-radius: var(--gc-radius-pill);
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
}

.gc-section__sub {
  font-size: 12px;
  color: var(--gc-text-tertiary);
}

.gc-section__actions {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-2);
  flex-shrink: 0;
}

/* ============================================================
   DASHBOARD GRID
   ============================================================ */

.gc-grid {
  display: grid;
  gap: var(--gc-sp-4);
  width: 100%;
}

/* Column presets */
.gc-grid--1    { grid-template-columns: 1fr; }
.gc-grid--2    { grid-template-columns: repeat(2, 1fr); }
.gc-grid--3    { grid-template-columns: repeat(3, 1fr); }
.gc-grid--4    { grid-template-columns: repeat(4, 1fr); }
.gc-grid--2-1  { grid-template-columns: 2fr 1fr; }
.gc-grid--1-2  { grid-template-columns: 1fr 2fr; }
.gc-grid--3-1  { grid-template-columns: 3fr 1fr; }
.gc-grid--1-3  { grid-template-columns: 1fr 3fr; }
.gc-grid--2-1-1{ grid-template-columns: 2fr 1fr 1fr; }
.gc-grid--1-1-2{ grid-template-columns: 1fr 1fr 2fr; }

/* Row span helpers */
.gc-span-2 { grid-row: span 2; }
.gc-span-3 { grid-row: span 3; }
.gc-col-span-2 { grid-column: span 2; }
.gc-col-span-3 { grid-column: span 3; }
.gc-col-full   { grid-column: 1 / -1; }

/* Responsive breakpoints */
@media (max-width: 1400px) {
  .gc-grid--4    { grid-template-columns: repeat(2, 1fr); }
  .gc-grid--3-1  { grid-template-columns: 1fr 1fr; }
  .gc-grid--2-1-1{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .gc-grid--3    { grid-template-columns: repeat(2, 1fr); }
  .gc-grid--2-1  { grid-template-columns: 1fr; }
  .gc-grid--3-1  { grid-template-columns: 1fr; }
  .gc-grid--1-2  { grid-template-columns: 1fr; }
  .gc-grid--1-3  { grid-template-columns: 1fr; }
  .gc-grid--2-1-1{ grid-template-columns: 1fr; }
  .gc-grid--1-1-2{ grid-template-columns: 1fr; }
  .gc-span-2, .gc-span-3 { grid-row: auto; }
  .gc-col-span-2, .gc-col-span-3 { grid-column: auto; }
}

@media (max-width: 768px) {
  .gc-grid--2,
  .gc-grid--3,
  .gc-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   AUTHORITY / COMMAND RAIL
   ============================================================ */

#authority-bar,
.gc-command-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: #060810;
  border-bottom: 1px solid rgba(74,144,226,0.20);
  display: flex;
  align-items: center;
  padding: 0 var(--gc-sp-4);
  gap: 0;
  z-index: var(--gc-z-cmdbar);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  overflow: hidden;
  box-shadow: 0 1px 16px rgba(0,0,0,0.50);
}

.gc-rail__segment {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-2);
  padding: 0 var(--gc-sp-3);
  height: 100%;
  border-right: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
  flex-shrink: 0;
}

.gc-rail__segment:last-child { border-right: none; }

.gc-rail__key {
  color: #4a5568;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.gc-rail__val {
  color: #94a3b8;
  font-size: 10px;
  letter-spacing: 0.02em;
}

.gc-rail__val--allow  { color: var(--sev-allow);  }
.gc-rail__val--warn   { color: var(--sev-warn);   }
.gc-rail__val--block  { color: var(--sev-block);  }
.gc-rail__val--info   { color: var(--sev-info);   }
.gc-rail__val--model  { color: var(--sev-model);  }
.gc-rail__val--bright { color: #e2e8f0; }

/* Separator spacer */
.gc-rail__spacer { flex: 1; }

/* Brand segment */
.gc-rail__brand {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-2);
  padding: 0 var(--gc-sp-3);
  border-right: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.gc-rail__brand-name {
  font-size: 11px;
  font-weight: 700;
  color: #4a90e2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Clock segment */
.gc-rail__clock {
  font-size: 11px;
  color: #e2e8f0;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  min-width: 80px;
  text-align: right;
}

/* Throughput counter */
.gc-rail__throughput {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gc-rail__count {
  font-size: 12px;
  font-weight: 700;
  color: var(--sev-info);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}

.gc-rail__count--spike { color: var(--sev-warn); }

/* Incident badge */
.gc-rail__incident {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sev-block-bg);
  color: var(--sev-block);
  border: 1px solid var(--sev-block-border);
  border-radius: var(--gc-radius-pill);
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  animation: gc-data-tick 1.5s ease-in-out infinite;
}

.gc-rail__incident[data-count="0"] { display: none; }

/* Health dot row */
.gc-rail__health-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}

.gc-rail__health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sev-neutral);
}

.gc-rail__health-dot[data-state="ok"]      { background: var(--sev-allow);  }
.gc-rail__health-dot[data-state="warn"]    { background: var(--sev-warn);   }
.gc-rail__health-dot[data-state="error"]   { background: var(--sev-block);  }
.gc-rail__health-dot[data-state="offline"] { background: var(--sev-neutral); }

/* ============================================================
   SIDEBAR — OPERATIONAL HIERARCHY
   ============================================================ */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--gc-sp-2) 0;
}

.sidebar-group {
  display: flex;
  flex-direction: column;
}

.sidebar-group__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gc-sp-2) var(--gc-sp-4);
  font-size: 9px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #2d3a52;
  cursor: default;
  user-select: none;
  margin-top: var(--gc-sp-3);
}

.sidebar-group__label:first-child { margin-top: var(--gc-sp-1); }

.sidebar-group__label-count {
  font-size: 9px;
  background: rgba(255,255,255,0.06);
  color: #4a5568;
  padding: 1px 5px;
  border-radius: 3px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px var(--gc-sp-4);
  font-size: 12.5px;
  font-weight: 400;
  color: #8899b4;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--gc-dur-fast);
  position: relative;
  cursor: pointer;
}

.sidebar-item:hover {
  background: rgba(255,255,255,0.03);
  color: #c8d6ea;
  border-left-color: rgba(74,144,226,0.25);
}

.sidebar-item.is-active {
  background: rgba(74,144,226,0.08);
  color: #7db8ff;
  border-left-color: #4a90e2;
  font-weight: 500;
}

.sidebar-item.is-active:hover {
  background: rgba(74,144,226,0.12);
}

/* Glow on active item */
.sidebar-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: #4a90e2;
  box-shadow: 0 0 8px 2px rgba(74,144,226,0.40);
  border-radius: 0 2px 2px 0;
}

.sidebar-item__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
  color: currentColor;
}

.sidebar-item.is-active .sidebar-item__icon { opacity: 1; }

.sidebar-item__label { flex: 1; line-height: 1.3; }

.sidebar-item__badge {
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--gc-radius-pill);
  flex-shrink: 0;
}

.sidebar-item__badge--count {
  background: rgba(74,144,226,0.15);
  color: #4a90e2;
}

.sidebar-item__badge--alert {
  background: var(--sev-block-bg);
  color: var(--sev-block);
  animation: gc-data-tick 2s infinite;
}

.sidebar-item__badge--warn {
  background: var(--sev-warn-bg);
  color: var(--sev-warn);
}

/* Status indicator on sidebar items */
.sidebar-item__status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
}

.sidebar-item__status--ok     { background: var(--sev-allow);   }
.sidebar-item__status--warn   { background: var(--sev-warn);    animation: gc-data-tick 2s infinite; }
.sidebar-item__status--error  { background: var(--sev-block);   animation: gc-data-tick 1s infinite; }
.sidebar-item__status--info   { background: var(--sev-info);    }

/* Collapsible group */
.sidebar-group--collapsible .sidebar-group__label {
  cursor: pointer;
  color: #4a5568;
}

.sidebar-group--collapsible .sidebar-group__label:hover { color: #8899b4; }

.sidebar-group__chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--gc-dur-normal);
}

.sidebar-group.is-open .sidebar-group__chevron { transform: rotate(90deg); }

.sidebar-group__items {
  overflow: hidden;
  transition: max-height var(--gc-dur-slow) ease-out,
              opacity var(--gc-dur-normal) ease;
  max-height: 600px;
  opacity: 1;
}

.sidebar-group.is-closed .sidebar-group__items {
  max-height: 0;
  opacity: 0;
}

/* ============================================================
   TOPOLOGY / FLOW DIAGRAM HELPERS
   ============================================================ */

.gc-topology {
  position: relative;
  width: 100%;
  overflow: visible;
}

.gc-topology__node {
  display: inline-flex;
  align-items: center;
  gap: var(--gc-sp-2);
  padding: var(--gc-sp-2) var(--gc-sp-3);
  background: var(--gc-surface-2);
  border: 1px solid var(--gc-border-normal);
  border-radius: var(--gc-radius-md);
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gc-text-secondary);
  cursor: default;
  transition: all var(--gc-dur-fast);
  white-space: nowrap;
}

.gc-topology__node:hover {
  border-color: var(--gc-border-strong);
  color: var(--gc-text-primary);
  box-shadow: var(--gc-shadow-sm);
}

.gc-topology__node--allow { border-color: var(--sev-allow-border); color: var(--sev-allow); }
.gc-topology__node--warn  { border-color: var(--sev-warn-border);  color: var(--sev-warn);  }
.gc-topology__node--block { border-color: var(--sev-block-border); color: var(--sev-block); }
.gc-topology__node--info  { border-color: var(--sev-info-border);  color: var(--sev-info);  }
.gc-topology__node--model { border-color: var(--sev-model-border); color: var(--sev-model); }

/* Governance pipeline — horizontal chain */
.gc-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: var(--gc-sp-2) 0;
  width: 100%;
}

.gc-pipeline__stage {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gc-pipeline__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--gc-sp-2) var(--gc-sp-3);
  background: var(--gc-surface-2);
  border: 1px solid var(--gc-border-normal);
  border-radius: var(--gc-radius-md);
  min-width: 80px;
  cursor: default;
  transition: all var(--gc-dur-fast);
}

.gc-pipeline__node:hover {
  background: var(--gc-surface-3);
  border-color: var(--gc-border-strong);
}

.gc-pipeline__node-label {
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gc-text-tertiary);
}

.gc-pipeline__node-stat {
  font-size: 13px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gc-text-metric);
}

.gc-pipeline__node--active {
  border-color: var(--sev-info-border);
  background: var(--sev-info-bg);
}

.gc-pipeline__node--active .gc-pipeline__node-label { color: var(--sev-info); }

.gc-pipeline__arrow {
  width: 28px;
  flex-shrink: 0;
  color: var(--gc-text-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gc-pipeline__arrow svg { width: 14px; height: 14px; }

/* ============================================================
   PROVIDER ROUTING GRAPH
   ============================================================ */

.gc-provider-row {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-3);
  padding: var(--gc-sp-2) var(--gc-sp-3);
  border-radius: var(--gc-radius-md);
  transition: background var(--gc-dur-fast);
}

.gc-provider-row:hover { background: var(--gc-surface-2); }

.gc-provider-row__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--gc-text-primary);
  width: 100px;
  flex-shrink: 0;
}

.gc-provider-row__bar {
  flex: 1;
  height: 4px;
  background: var(--gc-surface-3);
  border-radius: var(--gc-radius-pill);
  overflow: hidden;
}

.gc-provider-row__fill {
  height: 100%;
  border-radius: var(--gc-radius-pill);
  background: var(--sev-info);
  transition: width 0.8s ease-out;
}

.gc-provider-row__pct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--gc-text-tertiary);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.gc-provider-row__latency {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--gc-text-disabled);
  width: 50px;
  text-align: right;
  flex-shrink: 0;
}

/* ============================================================
   DECISION VERDICT DISPLAY
   ============================================================ */

.gc-verdict {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-3);
  padding: var(--gc-sp-3) var(--gc-sp-4);
  border-radius: var(--gc-radius-lg);
  border: 1px solid var(--gc-verdict-border, var(--gc-border-normal));
  background: var(--gc-verdict-bg, var(--gc-surface-2));
}

.gc-verdict--allow { --gc-verdict-border: var(--sev-allow-border); --gc-verdict-bg: var(--sev-allow-bg); }
.gc-verdict--warn  { --gc-verdict-border: var(--sev-warn-border);  --gc-verdict-bg: var(--sev-warn-bg);  }
.gc-verdict--block { --gc-verdict-border: var(--sev-block-border); --gc-verdict-bg: var(--sev-block-bg); }

.gc-verdict__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gc-verdict-icon-bg, rgba(255,255,255,0.05));
  flex-shrink: 0;
}

.gc-verdict__icon svg { width: 16px; height: 16px; }
.gc-verdict--allow .gc-verdict__icon { background: var(--sev-allow-bg); color: var(--sev-allow); }
.gc-verdict--warn  .gc-verdict__icon { background: var(--sev-warn-bg);  color: var(--sev-warn);  }
.gc-verdict--block .gc-verdict__icon { background: var(--sev-block-bg); color: var(--sev-block); }

.gc-verdict__body { flex: 1; min-width: 0; }

.gc-verdict__label {
  font-size: 11px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gc-text-tertiary);
}

.gc-verdict__value {
  font-size: 18px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 1px;
}

.gc-verdict--allow .gc-verdict__value { color: var(--sev-allow); }
.gc-verdict--warn  .gc-verdict__value { color: var(--sev-warn);  }
.gc-verdict--block .gc-verdict__value { color: var(--sev-block); }

.gc-verdict__detail {
  font-size: 11px;
  color: var(--gc-text-tertiary);
  margin-top: 2px;
}

/* ============================================================
   STAT PAIR (label + value inline)
   ============================================================ */

.gc-stat-pair {
  display: flex;
  align-items: baseline;
  gap: var(--gc-sp-2);
}

.gc-stat-pair__key {
  font-size: 11px;
  color: var(--gc-text-tertiary);
  font-family: 'IBM Plex Mono', monospace;
  flex-shrink: 0;
}

.gc-stat-pair__val {
  font-size: 13px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gc-text-metric);
}

/* ============================================================
   SEARCH / FILTER BAR
   ============================================================ */

.gc-search {
  position: relative;
  display: flex;
  align-items: center;
}

.gc-search__icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--gc-text-tertiary);
  pointer-events: none;
  flex-shrink: 0;
}

.gc-search__input {
  width: 100%;
  height: 32px;
  background: var(--gc-surface-2);
  border: 1px solid var(--gc-border-normal);
  border-radius: var(--gc-radius-md);
  padding: 0 var(--gc-sp-3) 0 30px;
  font-size: 12px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--gc-text-primary);
  transition: border-color var(--gc-dur-fast), box-shadow var(--gc-dur-fast);
  outline: none;
}

.gc-search__input::placeholder { color: var(--gc-text-disabled); }

.gc-search__input:focus {
  border-color: var(--gc-border-focus);
  box-shadow: 0 0 0 2px rgba(74,144,226,0.12);
}

/* ============================================================
   FILTER TOOLBAR
   ============================================================ */

.gc-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-2);
  flex-wrap: wrap;
}

.gc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-surface-2);
  border: 1px solid var(--gc-border-normal);
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gc-text-secondary);
  cursor: pointer;
  transition: all var(--gc-dur-fast);
  user-select: none;
}

.gc-filter-chip:hover {
  background: var(--gc-surface-3);
  color: var(--gc-text-primary);
  border-color: var(--gc-border-strong);
}

.gc-filter-chip.is-active {
  background: rgba(74,144,226,0.12);
  color: #7db8ff;
  border-color: rgba(74,144,226,0.35);
}

.gc-filter-chip__x {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

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

.gc-mono    { font-family: 'IBM Plex Mono', monospace; }
.gc-ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-nowrap  { white-space: nowrap; }

.gc-text-allow   { color: var(--sev-allow) !important;   }
.gc-text-warn    { color: var(--sev-warn) !important;    }
.gc-text-block   { color: var(--sev-block) !important;   }
.gc-text-info    { color: var(--sev-info) !important;    }
.gc-text-model   { color: var(--sev-model) !important;   }
.gc-text-primary { color: var(--gc-text-primary) !important; }
.gc-text-dim     { color: var(--gc-text-tertiary) !important; }

.gc-fade-in { animation: gc-fade-in var(--gc-dur-slow) ease-out; }
.gc-slide-in{ animation: gc-slide-right var(--gc-dur-slow) ease-out; }

/* Divider */
.gc-divider {
  width: 100%;
  height: 1px;
  background: var(--gc-border-subtle);
  border: none;
  margin: 0;
}

.gc-divider--strong { background: var(--gc-border-normal); }

/* Scrollbar override for dark theme */
.gc-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.gc-scrollbar::-webkit-scrollbar-track { background: transparent; }
.gc-scrollbar::-webkit-scrollbar-thumb { background: var(--gc-surface-4); border-radius: 4px; }
.gc-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--gc-surface-5); }

/* Apply to event rails by default */
.gc-event-rail { scrollbar-width: thin; scrollbar-color: var(--gc-surface-4) transparent; }
.gc-event-rail::-webkit-scrollbar { width: 3px; }
.gc-event-rail::-webkit-scrollbar-thumb { background: var(--gc-surface-4); border-radius: 3px; }

/* ============================================================
   RESPONSIVE — ULTRAWIDE
   ============================================================ */

@media (min-width: 2200px) {
  .gc-metric-row { gap: var(--gc-sp-5); }
  .gc-grid { gap: var(--gc-sp-5); }
  .gc-panel__body { padding: var(--gc-sp-6); }
  .gc-metric-card { padding: var(--gc-sp-5) var(--gc-sp-6); }
  .gc-metric-card__value { font-size: 36px; }
}

/* ============================================================
   PAGE LAYOUT WRAPPERS
   ============================================================ */

/* Main content area below authority bar */
.gc-page {
  padding: var(--gc-sp-5) var(--gc-sp-6);
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gc-sp-5);
  animation: gc-fade-in var(--gc-dur-slow) ease-out;
}

.gc-page--full { max-width: 100%; }
.gc-page--wide { max-width: 1920px; }

/* When embedded in iframe (no sidebar/bar offset needed) */
.embedded-in-dashboard .gc-page {
  padding-top: var(--gc-sp-4);
}

/* Page header with title + actions */
.gc-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gc-sp-4);
  flex-wrap: wrap;
}

.gc-page-header__left {
  display: flex;
  flex-direction: column;
  gap: var(--gc-sp-1);
}

.gc-page-header__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gc-text-primary);
  line-height: 1.2;
}

.gc-page-header__sub {
  font-size: 12px;
  color: var(--gc-text-tertiary);
  font-family: 'IBM Plex Mono', monospace;
}

.gc-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gc-sp-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}


/* === eve-header.css === */
/* EVE canonical header v8 — product box + resources dropdown */

/* Base header — ALWAYS dark, no light-theme override */
/* Aligned to canonical eve-header.css .hdr (single source of truth). */
.hdr { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 20px; padding: 14px 36px; background: #0a0d14; backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,0.08); font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #e2e6ef; }

/* Logo */
.hdr-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #e2e6ef; font-weight: 600; letter-spacing: 0.05em; flex-shrink: 0; }
.hdr-logo:hover { color: #fff; }
.hdr-logo-img { width: 24px; height: 24px; display: block; border-radius: 4px; }
.hdr-logo-wordmark { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; }
.hdr-logo-em { color: #4a90e2; }
.hdr-logo:hover .hdr-logo-em { color: #6aaef5; }

/* Nav container */
.hdr-nav { display: flex; gap: 8px; flex: 1; justify-content: center; align-items: center; }

/* ── Products box: labeled group with subtle border ── */
.hdr-product-group { display: flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; position: relative; }
.hdr-product-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: #556; font-weight: 600; margin-right: 6px; user-select: none; }
.hdr-product-group a { color: #b0b8c8; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; padding: 4px 8px; border-radius: 3px; transition: color 0.12s, background 0.12s; white-space: nowrap; }
.hdr-product-group a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.hdr-product-group a[aria-current="page"] { color: #4a90e2; }

/* ── Resources dropdown ── */
.hdr-nav-group { position: relative; }
.hdr-nav-trigger { display: flex; align-items: center; gap: 4px; color: #b0b8c8; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 3px; cursor: default; background: none; border: none; font-family: inherit; transition: color 0.12s, background 0.12s; }
.hdr-nav-trigger:hover { color: #fff; background: rgba(255,255,255,0.06); }
.hdr-chevron { font-size: 8px; opacity: 0.4; transition: transform 0.25s ease, opacity 0.2s; }
.hdr-nav-group:hover .hdr-chevron { transform: rotate(180deg); opacity: 0.7; }

/* Dropdown panel — smooth opacity/transform, invisible bridge */
.hdr-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 190px;
    padding: 6px 0;
    background: rgba(14,18,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.hdr-nav-group::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
}
.hdr-nav-group:hover .hdr-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.hdr-dropdown a {
    display: block;
    padding: 7px 14px;
    color: #b0b8c8;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 400;
    transition: color 0.12s, background 0.12s, padding-left 0.12s;
    margin: 0 4px;
    border-radius: 4px;
}
.hdr-dropdown a:hover { color: #fff; background: rgba(74,144,226,0.12); padding-left: 18px; }
.hdr-dropdown .hdr-dd-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 3px 8px; }

/* ── Flat nav links (License, etc.) ── */
.hdr-nav > a { color: #b0b8c8; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 3px; transition: color 0.12s, background 0.12s; white-space: nowrap; }
.hdr-nav > a:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* Separator */
.hdr-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.12); margin: 0 2px; flex-shrink: 0; }

/* CTAs */
.hdr-cta { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.hdr-btn { padding: 5px 12px; border-radius: 3px; font-size: 11px; font-weight: 500; text-decoration: none; letter-spacing: 0.03em; transition: all 0.12s; white-space: nowrap; }
.hdr-btn-ghost { color: #a0a8b8; border: 1px solid rgba(255,255,255,0.1); }
.hdr-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.hdr-btn-primary { color: #fff; background: #1d4ed8; border: 1px solid #1d4ed8; }
.hdr-btn-primary:hover { background: #1e40af; }

/* Mobile */
.hdr-menu-btn { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #e2e6ef; font-size: 18px; line-height: 1; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-family: inherit; margin-left: auto; }
.hdr-mob-overlay { display: none; position: fixed; inset: 0; background: rgba(10,13,20,0.99); z-index: 200; padding: 70px 20px 40px; overflow-y: auto; }
.hdr-mob-overlay.active { display: block; animation: hdr-mob-fade 0.2s ease; }
@keyframes hdr-mob-fade { from { opacity: 0; } to { opacity: 1; } }
.hdr-mob-close { position: absolute; top: 16px; right: 16px; background: rgba(74,144,226,0.15); border: 1px solid rgba(74,144,226,0.4); color: #fff; font-size: 20px; line-height: 1; padding: 5px 12px; border-radius: 3px; cursor: pointer; }
.hdr-mob-nav { display: flex; flex-direction: column; gap: 4px; max-width: 400px; margin: 0 auto; }
.hdr-mob-nav .hdr-mob-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: #4a90e2; padding: 14px 16px 4px; font-weight: 600; }
.hdr-mob-nav a { display: block; padding: 11px 16px; color: #e2e6ef; text-decoration: none; font-size: 14px; font-weight: 500; background: rgba(30,35,50,0.4); border: 1px solid rgba(255,255,255,0.04); border-radius: 4px; transition: all 0.15s; }
.hdr-mob-nav a:hover { background: rgba(74,144,226,0.15); border-color: rgba(74,144,226,0.3); color: #fff; transform: translateX(4px); }
.hdr-mob-btn { text-align: center; margin-top: 3px; }
.hdr-mob-btn-primary { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }

@media (max-width: 960px) {
  .hdr-nav, .hdr-cta { display: none; }
  .hdr-menu-btn { display: block; }
  .hdr { padding: 10px 16px; }
}

/* Iframe auto-hide */
html.is-embedded .hdr, html.is-embedded .hdr-mob-overlay,
body.is-embedded .hdr, body.is-embedded .hdr-mob-overlay,
html.is-embedded header.header, body.is-embedded header.header,
html.is-embedded .mobile-menu-overlay, body.is-embedded .mobile-menu-overlay {
  display: none !important;
}
html.is-embedded body, body.is-embedded { padding-top: 0 !important; }

/* NO light-theme header overrides — header stays dark always */