/* ═══════════════════════════════════════════════════════════════
   LUMINARY STUDIO — Extended Styles
   Ambient themes, admin panel, git panel, inline assist, etc.

   This file extends the core styles defined in studio.css.
   It provides: ambient theme variables (time-of-day, weather,
   location modifiers), admin panel overlay styles, terminal tab
   styles (admin-only), GitHub panel, developer mode, file
   explorer, inline assist, and git panel styles.

   Load order: main.css FIRST, then studio.css SECOND.
   studio.css :root variables take precedence over any
   conflicting declarations here.

   IMPORTANT: Do NOT add core layout rules here (.app, .panel-left,
   .panel-center, .panel-right). Those belong in studio.css.
   This file is for extensions and themes only.

   See also: styles/studio.css (core application styles)
   ═══════════════════════════════════════════════════════════════ */

/* Ambient Theme Variables (extend the core :root) */
:root {
    /* Ambient Theme Variables */
    --ambient-primary: #4ecdc4;
    --ambient-secondary: #9b6bff;
    --ambient-tertiary: #ff6b9d;
    --ambient-accent: #38bdf8;
    --ambient-glow: rgba(78, 205, 196, 0.25);
    --ambient-glow-2: rgba(155, 107, 255, 0.25);
    --ambient-glow-3: rgba(255, 107, 157, 0.18);
    --ambient-particle: rgba(78, 205, 196, 0.6);
    --ambient-bg: #080818;
    --ambient-speed: 15s;
}

        /* Morning Theme (6am - 12pm) - Warm sunrise colors */
        [data-ambient="morning"] {
            --ambient-primary: #f97316;
            --ambient-secondary: #fbbf24;
            --ambient-tertiary: #fb7185;
            --ambient-accent: #fdba74;
            --ambient-glow: rgba(249, 115, 22, 0.15);
            --ambient-glow-2: rgba(251, 191, 36, 0.15);
            --ambient-glow-3: rgba(251, 113, 133, 0.1);
            --ambient-particle: rgba(251, 191, 36, 0.6);
            --ambient-bg: #0f0a05;
            --cyan: #f97316;
        }
        
        /* Afternoon Theme (12pm - 6pm) - Bright productive colors */
        [data-ambient="afternoon"] {
            --ambient-primary: #4ecdc4;
            --ambient-secondary: #38bdf8;
            --ambient-tertiary: #a78bfa;
            --ambient-accent: #2dd4bf;
            --ambient-glow: rgba(78, 205, 196, 0.18);
            --ambient-glow-2: rgba(56, 189, 248, 0.15);
            --ambient-glow-3: rgba(167, 139, 250, 0.12);
            --ambient-particle: rgba(56, 189, 248, 0.6);
            --ambient-bg: #050510;
        }
        
        /* Evening Theme (6pm - 9pm) - Golden hour warmth */
        [data-ambient="evening"] {
            --ambient-primary: #f59e0b;
            --ambient-secondary: #ec4899;
            --ambient-tertiary: #8b5cf6;
            --ambient-accent: #fcd34d;
            --ambient-glow: rgba(245, 158, 11, 0.15);
            --ambient-glow-2: rgba(236, 72, 153, 0.12);
            --ambient-glow-3: rgba(139, 92, 246, 0.1);
            --ambient-particle: rgba(245, 158, 11, 0.6);
            --ambient-bg: #0a0508;
            --cyan: #f59e0b;
        }
        
        /* Night Theme (9pm - 6am) - Deep calm colors */
        [data-ambient="night"] {
            --ambient-primary: #6366f1;
            --ambient-secondary: #8b5cf6;
            --ambient-tertiary: #06b6d4;
            --ambient-accent: #a78bfa;
            --ambient-glow: rgba(99, 102, 241, 0.12);
            --ambient-glow-2: rgba(139, 92, 246, 0.12);
            --ambient-glow-3: rgba(6, 182, 212, 0.08);
            --ambient-particle: rgba(139, 92, 246, 0.5);
            --ambient-bg: #030308;
            --cyan: #8b5cf6;
            --ambient-speed: 20s;
        }
        
        /* Weather Modifiers */
        [data-weather="rain"] {
            --ambient-glow: rgba(100, 116, 139, 0.12);
            --ambient-glow-2: rgba(71, 85, 105, 0.15);
            --ambient-particle: rgba(148, 163, 184, 0.4);
        }
        
        [data-weather="snow"] {
            --ambient-primary: #e0f2fe;
            --ambient-secondary: #bae6fd;
            --ambient-tertiary: #7dd3fc;
            --ambient-particle: rgba(255, 255, 255, 0.8);
        }
        
        [data-weather="cloudy"] {
            --ambient-glow: rgba(100, 116, 139, 0.08);
            --ambient-glow-2: rgba(71, 85, 105, 0.1);
            --ambient-speed: 25s;
        }
        
        [data-weather="storm"] {
            --ambient-primary: #7c3aed;
            --ambient-secondary: #4f46e5;
            --ambient-tertiary: #06b6d4;
            --ambient-bg: #020210;
        }
        
        /* Location Modifiers */
        [data-location="tropical"] {
            --ambient-primary: #10b981;
            --ambient-secondary: #14b8a6;
            --ambient-tertiary: #f59e0b;
        }
        
        [data-location="arctic"] {
            --ambient-primary: #06b6d4;
            --ambient-secondary: #22d3ee;
            --ambient-tertiary: #a78bfa;
            --ambient-glow: rgba(6, 182, 212, 0.2);
        }
        
        [data-location="desert"] {
            --ambient-primary: #f59e0b;
            --ambient-secondary: #dc2626;
            --ambient-tertiary: #fbbf24;
            --ambient-bg: #0a0805;
        }

        /* ========================================
           ADMIN PANEL - System Overview
           ======================================== */
        
        .admin-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(10, 22, 40, 0.98);
            z-index: 100000;
            display: none !important;
            overflow: hidden;
            visibility: hidden;
        }

        .admin-overlay.active {
            display: flex !important;
            flex-direction: column;
            visibility: visible;
        }
        
        .admin-header {
            padding: 16px 24px;
            background: linear-gradient(135deg, rgba(78,205,196,0.15), rgba(155,107,255,0.15));
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .admin-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .admin-title h1 {
            font-size: 20px;
            font-weight: 700;
            margin: 0;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .admin-badge {
            padding: 4px 10px;
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid #ef4444;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            color: #ef4444;
            text-transform: uppercase;
        }
        
        .admin-close {
            padding: 8px 16px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
        }
        
        .admin-close:hover {
            border-color: var(--cyan);
        }
        
        .admin-tabs {
            display: flex;
            gap: 2px;
            padding: 0 24px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        
        .admin-tab {
            padding: 12px 20px;
            background: transparent;
            border: none;
            color: var(--text-dim);
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition: all 0.15s;
        }
        
        .admin-tab:hover {
            color: var(--text);
        }
        
        .admin-tab.active {
            color: var(--cyan);
            border-bottom-color: var(--cyan);
        }
        
        /* Admin Body - Contains content and sidebar */
        .admin-body {
            flex: 1;
            display: flex;
            overflow: hidden;
        }
        
        .admin-content {
            flex: 1;
            overflow: auto;
            padding: 24px;
        }
        
        /* Admin Assistant Sidebar */
        .admin-assistant-sidebar {
            width: 380px;
            background: var(--panel);
            border-left: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            transition: width 0.3s ease, min-width 0.3s ease;
        }
        
        .admin-assistant-sidebar.collapsed {
            width: 50px;
            min-width: 50px;
        }
        
        .admin-assistant-sidebar-header {
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(78,205,196,0.15), rgba(155,107,255,0.15));
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .admin-assistant-sidebar.collapsed .admin-assistant-sidebar-header {
            padding: 14px 12px;
            justify-content: center;
        }
        
        .admin-assistant-sidebar.collapsed .admin-assistant-title h3 {
            display: none;
        }
        
        .admin-assistant-sidebar.collapsed .admin-assistant-body {
            display: none;
        }
        
        .admin-assistant-collapse {
            background: none;
            border: none;
            color: var(--text-dim);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.15s;
        }
        
        .admin-assistant-collapse:hover {
            background: var(--bg);
            color: var(--cyan);
        }
        
        .admin-assistant-sidebar.collapsed .admin-assistant-collapse i {
            transform: rotate(180deg);
        }
        
        .admin-assistant-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .admin-assistant-sidebar .admin-quick-actions {
            padding: 12px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
            flex-wrap: wrap;
        }
        
        .admin-assistant-sidebar .admin-assistant-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            max-height: none;
        }
        
        .admin-assistant-sidebar .admin-assistant-input {
            padding: 12px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 8px;
            background: var(--bg);
        }
        
        .admin-assistant-sidebar .admin-assistant-input input {
            flex: 1;
            padding: 10px 14px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 13px;
        }
        
        .admin-assistant-sidebar .admin-assistant-input input:focus {
            outline: none;
            border-color: var(--cyan);
        }
        
        .admin-panel {
            display: none;
        }
        
        .admin-panel.active {
            display: block;
        }
        
        /* Live Activity Panel Styles */
        .activity-current-op {
            padding: 16px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 16px;
        }
        
        .activity-status {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
        }
        
        .activity-status.idle { color: var(--text-secondary); }
        .activity-status.running { color: var(--cyan); }
        .activity-status.complete { color: #4caf50; }
        .activity-status.error { color: var(--coral); }
        
        .activity-status i {
            font-size: 20px;
            animation: none;
        }
        
        .activity-status.running i {
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .activity-op-details {
            margin-top: 12px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        
        .activity-op-detail {
            background: rgba(0,0,0,0.2);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }
        
        .activity-op-detail label {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--text-tertiary);
            display: block;
            margin-bottom: 4px;
        }
        
        .activity-op-detail span {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .activity-flow {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 16px;
            overflow: hidden;
        }
        
        .activity-flow-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            background: rgba(78,205,196,0.05);
        }
        
        .activity-flow-header h4 {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .activity-flow-content {
            padding: 16px;
            min-height: 100px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .activity-flow-empty {
            text-align: center;
            color: var(--text-tertiary);
            padding: 20px;
        }
        
        .activity-flow-empty i {
            font-size: 24px;
            margin-bottom: 8px;
            display: block;
        }
        
        .activity-step {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            background: rgba(0,0,0,0.2);
            border-radius: 6px;
            margin-bottom: 8px;
            animation: slideIn 0.2s ease;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* Input blocked shake feedback */
        @keyframes inputShake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-4px); }
            40% { transform: translateX(4px); }
            60% { transform: translateX(-3px); }
            80% { transform: translateX(3px); }
        }
        .input-shake {
            animation: inputShake 0.4s ease;
        }

        /* Discovery text input styling */
        .discovery-text-input::placeholder {
            color: var(--text-dim, rgba(255,255,255,0.35));
        }

        .activity-step-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }
        
        .activity-step-icon.developer { background: rgba(255,107,129,0.2); color: var(--coral); }
        .activity-step-icon.research { background: rgba(78,205,196,0.2); color: var(--cyan); }
        .activity-step-icon.blueprint { background: rgba(155,107,255,0.2); color: var(--purple); }
        .activity-step-icon.quality { background: rgba(76,175,80,0.2); color: #4caf50; }
        .activity-step-icon.memory { background: rgba(255,193,7,0.2); color: #ffc107; }
        .activity-step-icon.system { background: rgba(158,158,158,0.2); color: #9e9e9e; }
        
        .activity-step-info {
            flex: 1;
        }
        
        .activity-step-name {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .activity-step-agent {
            font-size: 10px;
            color: var(--text-tertiary);
        }
        
        .activity-step-time {
            font-size: 11px;
            color: var(--text-secondary);
            font-family: 'JetBrains Mono', monospace;
        }
        
        .activity-log-container {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 16px;
            overflow: hidden;
        }
        
        .activity-log-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .activity-log-header h4 {
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .activity-filters {
            display: flex;
            gap: 4px;
        }
        
        .activity-filter {
            padding: 4px 10px;
            font-size: 10px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .activity-filter:hover {
            border-color: var(--cyan);
            color: var(--cyan);
        }
        
        .activity-filter.active {
            background: var(--cyan);
            border-color: var(--cyan);
            color: #000;
        }
        
        .activity-log-stream {
            max-height: 300px;
            overflow-y: auto;
            padding: 12px;
        }
        
        .activity-log-empty {
            text-align: center;
            color: var(--text-tertiary);
            padding: 40px 20px;
        }
        
        .activity-log-empty i {
            font-size: 32px;
            margin-bottom: 12px;
            display: block;
        }
        
        .activity-log-entry {
            display: flex;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            margin-bottom: 4px;
            font-size: 12px;
            animation: slideIn 0.15s ease;
        }
        
        .activity-log-entry:hover {
            background: rgba(255,255,255,0.03);
        }
        
        .activity-log-entry.info { border-left: 3px solid var(--cyan); }
        .activity-log-entry.debug { border-left: 3px solid #90a4ae; }
        .activity-log-entry.success { border-left: 3px solid #4caf50; }
        .activity-log-entry.warning { border-left: 3px solid #ff9800; }
        .activity-log-entry.error { border-left: 3px solid var(--coral); }
        
        .activity-log-time {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            color: var(--text-tertiary);
            min-width: 50px;
        }
        
        .activity-log-agent {
            font-weight: 600;
            color: var(--cyan);
            min-width: 80px;
        }
        
        .activity-log-message {
            flex: 1;
            color: var(--text-primary);
        }
        
        .activity-metrics {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        
        .activity-metric {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 14px;
            text-align: center;
        }
        
        .activity-metric.fast { border-color: var(--cyan); }
        .activity-metric.full { border-color: var(--purple); }
        
        .activity-metric .metric-label {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--text-tertiary);
            display: block;
            margin-bottom: 4px;
        }
        
        .activity-metric .metric-value {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        .activity-metric.fast .metric-value { color: var(--cyan); }
        .activity-metric.full .metric-value { color: var(--purple); }
        
        .admin-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
        }
        
        .admin-toggle input {
            width: 16px;
            height: 16px;
        }
        
        /* Agent Cards */
        .admin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 20px;
        }
        
        .agent-card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }
        
        .agent-card-header {
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(78,205,196,0.1), rgba(155,107,255,0.1));
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .agent-card-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .agent-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        
        .agent-icon.research { background: rgba(78,205,196,0.2); color: var(--cyan); }
        .agent-icon.blueprint { background: rgba(155,107,255,0.2); color: var(--purple); }
        .agent-icon.builder { background: rgba(255,107,107,0.2); color: var(--coral); }
        .agent-icon.quality { background: rgba(76,175,80,0.2); color: #4caf50; }
        .agent-icon.memory { background: rgba(255,193,7,0.2); color: #ffc107; }
        .agent-icon.component { background: rgba(33,150,243,0.2); color: #2196f3; }
        .agent-icon.transpiler { background: rgba(233,30,99,0.2); color: #e91e63; }
        .agent-icon.developer { background: linear-gradient(135deg, rgba(255,107,129,0.3), rgba(78,205,196,0.3)); color: #fff; box-shadow: 0 0 15px rgba(255,107,129,0.3); }
        
        /* Agent Tier Badges */
        .agent-tier {
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 9px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .agent-tier.execution { background: rgba(255,107,129,0.2); color: var(--coral); }
        .agent-tier.orchestration { background: rgba(155,107,255,0.2); color: var(--purple); }
        .agent-tier.knowledge { background: rgba(255,193,7,0.2); color: #ffc107; }
        .agent-tier.validation { background: rgba(76,175,80,0.2); color: #4caf50; }
        .agent-tier.context { background: rgba(33,150,243,0.2); color: #2196f3; }
        .agent-tier.extension { background: rgba(158,158,158,0.2); color: #9e9e9e; }
        
        /* Primary agent highlight */
        .agent-card.primary {
            border: 1px solid rgba(255,107,129,0.3);
            background: linear-gradient(135deg, rgba(255,107,129,0.05), rgba(78,205,196,0.05));
        }
        
        .agent-name {
            font-weight: 600;
            font-size: 14px;
        }
        
        .agent-status {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 600;
        }
        
        .agent-status.active { background: rgba(76,175,80,0.2); color: #4caf50; }
        .agent-status.idle { background: rgba(158,158,158,0.2); color: #9e9e9e; }
        .agent-status.working { background: rgba(255,193,7,0.2); color: #ffc107; }
        
        .agent-card-body {
            padding: 16px;
        }
        
        .agent-section {
            margin-bottom: 14px;
        }
        
        .agent-section:last-child {
            margin-bottom: 0;
        }
        
        .agent-section-label {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .agent-section-content {
            font-size: 12px;
            color: var(--text);
            line-height: 1.5;
        }
        
        /* Improved Agent Instructions Display */
        .agent-instructions-container {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .agent-instructions-header {
            padding: 8px 12px;
            background: linear-gradient(135deg, rgba(78,205,196,0.1), rgba(155,107,255,0.1));
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .agent-instructions-header span {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--text-dim);
        }
        
        .agent-instructions-actions {
            display: flex;
            gap: 4px;
        }
        
        .agent-instructions-actions button {
            padding: 4px 8px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--text-dim);
            font-size: 10px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .agent-instructions-actions button:hover {
            border-color: var(--cyan);
            color: var(--cyan);
        }
        
        .agent-instructions-body {
            padding: 12px;
        }
        
        .agent-instruction-section {
            margin-bottom: 12px;
        }
        
        .agent-instruction-section:last-child {
            margin-bottom: 0;
        }
        
        .agent-instruction-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--cyan);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .agent-instruction-title i {
            font-size: 10px;
        }
        
        .agent-instruction-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .agent-instruction-list li {
            font-size: 11px;
            color: var(--text);
            padding: 4px 0 4px 16px;
            position: relative;
        }
        
        .agent-instruction-list li::before {
            content: '•';
            position: absolute;
            left: 4px;
            color: var(--text-dim);
        }
        
        .agent-instruction-code {
            background: rgba(78,205,196,0.1);
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            color: var(--cyan);
        }
        
        .agent-edit-textarea {
            width: 100%;
            min-height: 100px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 10px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: var(--text);
            resize: vertical;
            display: none;
        }
        
        .agent-edit-textarea:focus {
            outline: none;
            border-color: var(--cyan);
        }
        
        .agent-card.editing .agent-instructions-body {
            display: none;
        }
        
        .agent-card.editing .agent-edit-textarea {
            display: block;
        }
        
        /* Admin Assistant Shared Styles */
        .admin-assistant-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .admin-assistant-title h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
        }
        
        .admin-assistant-avatar {
            width: 32px;
            height: 32px;
            background: var(--gradient);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: white;
        }
        
        .admin-message {
            display: flex;
            gap: 10px;
            max-width: 95%;
        }
        
        .admin-message.user {
            align-self: flex-end;
            flex-direction: row-reverse;
        }
        
        .admin-message-avatar {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }
        
        .admin-message.assistant .admin-message-avatar {
            background: var(--gradient);
            color: white;
        }
        
        .admin-message.user .admin-message-avatar {
            background: var(--bg);
            color: var(--text-dim);
        }
        
        .admin-message-content {
            background: var(--bg);
            border-radius: 12px;
            padding: 10px 14px;
            font-size: 13px;
            line-height: 1.5;
        }
        
        .admin-message.user .admin-message-content {
            background: linear-gradient(135deg, rgba(78,205,196,0.2), rgba(155,107,255,0.2));
        }
        
        .admin-message-content code {
            background: rgba(78,205,196,0.2);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: var(--cyan);
        }
        
        .admin-message-content pre {
            background: var(--panel);
            padding: 12px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 8px 0;
        }
        
        .admin-message-content pre code {
            background: none;
            padding: 0;
        }
        
        .admin-message-content ul {
            margin: 8px 0;
            padding-left: 20px;
        }
        
        .admin-message-content li {
            margin: 4px 0;
        }
        
        .admin-message-content h3, 
        .admin-message-content h4 {
            margin: 12px 0 8px 0;
            font-size: 13px;
        }
        
        .admin-assistant-send {
            padding: 10px 16px;
            background: var(--gradient);
            border: none;
            border-radius: 8px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            transition: all 0.15s;
        }
        
        .admin-assistant-send:hover {
            filter: brightness(1.1);
        }
        
        .admin-assistant-send:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* Code Proposals */
        .code-proposals {
            margin: 16px 0;
            border: 1px solid var(--cyan);
            border-radius: 12px;
            overflow: hidden;
            background: var(--panel);
        }
        
        .code-proposals-header {
            padding: 12px 16px;
            background: linear-gradient(135deg, rgba(78,205,196,0.2), rgba(155,107,255,0.2));
            font-weight: 600;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--border);
        }
        
        .code-proposal {
            border-bottom: 1px solid var(--border);
            padding: 12px 16px;
        }
        
        .code-proposal:last-of-type {
            border-bottom: none;
        }
        
        .code-proposal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .code-proposal-file {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: var(--cyan);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .code-proposal-time {
            font-size: 10px;
            color: var(--text-dim);
        }
        
        .code-proposal-description {
            font-size: 12px;
            color: var(--text-dim);
            margin-bottom: 10px;
            padding: 8px;
            background: var(--bg);
            border-radius: 6px;
        }
        
        .code-proposal-preview {
            max-height: 200px;
            overflow-y: auto;
            background: var(--bg);
            border-radius: 6px;
            margin-bottom: 12px;
        }
        
        .code-proposal-preview pre {
            margin: 0;
            padding: 12px;
            font-size: 11px;
            line-height: 1.4;
        }
        
        .code-proposal-preview code {
            background: none;
            padding: 0;
            color: var(--text);
        }
        
        .code-proposal-actions {
            display: flex;
            gap: 8px;
        }
        
        .proposal-btn {
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 11px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s;
        }
        
        .proposal-btn.approve {
            background: rgba(76,175,80,0.2);
            border: 1px solid #4caf50;
            color: #4caf50;
        }
        
        .proposal-btn.approve:hover {
            background: rgba(76,175,80,0.3);
        }
        
        .proposal-btn.edit {
            background: rgba(255,193,7,0.2);
            border: 1px solid #ffc107;
            color: #ffc107;
        }
        
        .proposal-btn.edit:hover {
            background: rgba(255,193,7,0.3);
        }
        
        .proposal-btn.reject {
            background: rgba(239,68,68,0.2);
            border: 1px solid #ef4444;
            color: #ef4444;
        }
        
        .proposal-btn.reject:hover {
            background: rgba(239,68,68,0.3);
        }
        
        .commit-approved-btn {
            width: 100%;
            padding: 12px;
            background: var(--gradient);
            border: none;
            color: white;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .commit-approved-btn:hover {
            filter: brightness(1.1);
        }
        
        /* Quick action chips in assistant */
        .admin-quick-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        
        .admin-quick-action {
            padding: 6px 12px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 16px;
            font-size: 11px;
            color: var(--text-dim);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .admin-quick-action:hover {
            border-color: var(--cyan);
            color: var(--cyan);
        }
        
        .agent-methods {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        
        .agent-method {
            padding: 3px 8px;
            background: var(--bg);
            border-radius: 4px;
            font-size: 10px;
            font-family: 'JetBrains Mono', monospace;
            color: var(--cyan);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .agent-method:hover {
            background: rgba(78,205,196,0.2);
        }
        
        .agent-help-btn {
            padding: 4px 8px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--text-dim);
            cursor: pointer;
            font-size: 12px;
            transition: all 0.15s;
        }
        
        .agent-help-btn:hover {
            border-color: var(--cyan);
            color: var(--cyan);
        }
        
        .agent-purpose {
            padding: 8px 12px;
            background: linear-gradient(135deg, rgba(78,205,196,0.05), rgba(155,107,255,0.05));
            border-radius: 6px;
            border-left: 3px solid var(--cyan);
        }
        
        /* API Connection Cards */
        .api-card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .api-icon {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        
        .api-icon.claude { background: linear-gradient(135deg, #d97706, #f59e0b); color: white; }
        .api-icon.perplexity { background: linear-gradient(135deg, #059669, #10b981); color: white; }
        .api-icon.mongodb { background: linear-gradient(135deg, #059669, #047857); color: white; }
        .api-icon.railway { background: linear-gradient(135deg, #7c3aed, #8b5cf6); color: white; }
        
        .api-info {
            flex: 1;
        }
        
        .api-name {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 2px;
        }
        
        .api-endpoint {
            font-size: 11px;
            color: var(--text-dim);
            font-family: 'JetBrains Mono', monospace;
        }
        
        .api-status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .api-status-indicator.connected { background: #4caf50; box-shadow: 0 0 8px #4caf50; }
        .api-status-indicator.disconnected { background: #ef4444; }
        .api-status-indicator.unknown { background: #9e9e9e; }
        
        /* Context Flow Diagram */
        .flow-container {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            min-height: 400px;
        }
        
        .flow-diagram {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .flow-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .flow-node {
            padding: 12px 20px;
            background: var(--bg);
            border: 2px solid var(--border);
            border-radius: 10px;
            text-align: center;
            min-width: 140px;
            position: relative;
        }
        
        .flow-node.active {
            border-color: var(--cyan);
            box-shadow: 0 0 15px rgba(78,205,196,0.3);
        }
        
        .flow-node-title {
            font-weight: 600;
            font-size: 12px;
            margin-bottom: 4px;
        }
        
        .flow-node-type {
            font-size: 10px;
            color: var(--text-dim);
        }
        
        .flow-arrow {
            color: var(--text-dim);
            font-size: 20px;
        }
        
        .flow-arrow.down {
            transform: rotate(90deg);
        }
        
        /* Context Thread List */
        .context-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .context-item {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .context-item-header {
            padding: 12px 16px;
            background: var(--bg);
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
        
        .context-item-header:hover {
            background: var(--bg-hover);
        }
        
        .context-item-title {
            font-weight: 600;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .context-item-meta {
            font-size: 11px;
            color: var(--text-dim);
        }
        
        .context-item-body {
            padding: 16px;
            border-top: 1px solid var(--border);
            display: none;
        }
        
        .context-item.expanded .context-item-body {
            display: block;
        }
        
        .context-json {
            background: var(--bg);
            border-radius: 6px;
            padding: 12px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            max-height: 300px;
            overflow: auto;
            white-space: pre-wrap;
        }
        
        /* System State Panel */
        .state-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .state-card {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px;
        }
        
        .state-label {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 8px;
        }
        
        .state-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--cyan);
        }
        
        .state-value.small {
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
        }
        
        /* Admin Actions */
        .admin-actions {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .admin-action-btn {
            padding: 10px 16px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.15s;
        }
        
        .admin-action-btn:hover {
            border-color: var(--cyan);
            background: var(--bg-hover);
        }
        
        .admin-action-btn.danger {
            border-color: #ef4444;
            color: #ef4444;
        }
        
        .admin-action-btn.danger:hover {
            background: rgba(239, 68, 68, 0.1);
        }
        
        /* Logs Panel */
        .log-container {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            height: 400px;
            overflow: auto;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            padding: 12px;
        }
        
        .log-entry {
            padding: 4px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        
        .log-time {
            color: var(--text-dim);
            margin-right: 10px;
        }
        
        .log-level {
            padding: 1px 6px;
            border-radius: 3px;
            font-size: 9px;
            font-weight: 600;
            margin-right: 8px;
        }
        
        .log-level.info { background: rgba(33,150,243,0.2); color: #2196f3; }
        .log-level.warn { background: rgba(255,193,7,0.2); color: #ffc107; }
        .log-level.error { background: rgba(239,68,68,0.2); color: #ef4444; }
        .log-level.success { background: rgba(76,175,80,0.2); color: #4caf50; }
        
        .log-message {
            color: var(--text);
        }

        /* ═══════════════════════════════════════════════ */
        /* Terminal Tab Styles                              */
        /* ═══════════════════════════════════════════════ */

        .terminal-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: rgba(0,0,0,0.3);
            border: 1px solid var(--border);
            border-radius: 8px 8px 0 0;
            margin-bottom: 0;
            flex-wrap: wrap;
            gap: 8px;
        }

        .terminal-filters {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .terminal-filters select,
        .terminal-search {
            padding: 6px 10px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--text);
            font-size: 11px;
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
        }

        .terminal-search {
            width: 180px;
        }

        .terminal-actions {
            display: flex;
            gap: 4px;
        }

        .terminal-actions button {
            padding: 5px 10px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--text-dim);
            font-size: 11px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.15s;
        }

        .terminal-actions button:hover {
            border-color: var(--cyan);
            color: var(--text);
        }

        .terminal-output {
            background: #0a0a12;
            border: 1px solid var(--border);
            border-top: none;
            border-bottom: none;
            min-height: 400px;
            max-height: calc(100vh - 280px);
            overflow-y: auto;
            overflow-x: hidden;
            padding: 4px 0;
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.6;
        }

        .terminal-output::-webkit-scrollbar { width: 6px; }
        .terminal-output::-webkit-scrollbar-track { background: transparent; }
        .terminal-output::-webkit-scrollbar-thumb {
            background: rgba(78,205,196,0.3);
            border-radius: 3px;
        }

        .terminal-line {
            padding: 2px 12px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            border-left: 3px solid transparent;
            transition: background 0.1s;
            flex-wrap: wrap;
        }

        .terminal-line:hover {
            background: rgba(255,255,255,0.03);
        }

        .terminal-line.level-debug   { border-left-color: #64748b; }
        .terminal-line.level-info    { border-left-color: var(--cyan); }
        .terminal-line.level-warn    { border-left-color: #fbbf24; }
        .terminal-line.level-error   { border-left-color: #f87171; }
        .terminal-line.level-success { border-left-color: #4ade80; }

        .term-time {
            color: #4a5568;
            font-size: 10px;
            min-width: 90px;
            flex-shrink: 0;
            user-select: all;
        }

        .term-level {
            font-size: 10px;
            font-weight: 600;
            min-width: 46px;
            flex-shrink: 0;
            text-transform: uppercase;
        }

        .term-level.debug   { color: #64748b; }
        .term-level.info    { color: var(--cyan); }
        .term-level.warn    { color: #fbbf24; }
        .term-level.error   { color: #f87171; }
        .term-level.success { color: #4ade80; }

        .term-source {
            color: var(--purple);
            font-size: 11px;
            min-width: 100px;
            flex-shrink: 0;
        }

        .term-msg {
            color: var(--text);
            word-break: break-word;
            flex: 1;
            min-width: 0;
        }

        .term-detail-btn {
            background: none;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 3px;
            color: var(--text-dim);
            font-size: 10px;
            cursor: pointer;
            padding: 0 5px;
            line-height: 16px;
            flex-shrink: 0;
            font-family: 'JetBrains Mono', monospace;
            transition: all 0.15s;
        }

        .term-detail-btn:hover {
            border-color: var(--cyan);
            color: var(--cyan);
        }

        .term-detail {
            width: 100%;
            margin-top: 4px;
            padding: 8px 12px;
            background: rgba(0,0,0,0.4);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 4px;
            font-size: 10px;
            color: #90a4ae;
            max-height: 200px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-all;
        }

        .term-detail.hidden { display: none; }

        .terminal-welcome {
            padding: 8px 12px;
            color: var(--cyan);
            font-size: 12px;
            opacity: 0.7;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
        }

        .terminal-status-bar {
            display: flex;
            justify-content: space-between;
            padding: 4px 12px;
            background: rgba(0,0,0,0.4);
            border: 1px solid var(--border);
            border-radius: 0 0 8px 8px;
            font-size: 10px;
            color: var(--text-dim);
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
        }

        #terminalStatus {
            color: #4ade80;
            font-weight: 600;
        }

        /* ═══════════════════════════════════════════════ */

        /* GitHub Panel Styles */
        .github-connect-card {
            max-width: 500px;
            margin: 40px auto;
            text-align: center;
            padding: 40px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 16px;
        }
        
        .github-logo {
            font-size: 64px;
            margin-bottom: 20px;
            color: var(--text);
        }
        
        .github-connect-card h3 {
            font-size: 20px;
            margin-bottom: 12px;
        }
        
        .github-connect-card p {
            color: var(--text-dim);
            margin-bottom: 24px;
            line-height: 1.6;
        }
        
        .github-token-input {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .github-token-input input {
            flex: 1;
            padding: 12px 16px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 14px;
        }
        
        .github-token-input input:focus {
            outline: none;
            border-color: var(--cyan);
        }
        
        .github-token-input button {
            padding: 12px 24px;
            background: var(--gradient);
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .github-token-input button:hover {
            filter: brightness(1.1);
        }
        
        .github-token-help {
            text-align: left;
            background: var(--bg);
            padding: 16px;
            border-radius: 8px;
            font-size: 12px;
        }
        
        .github-token-help p {
            margin: 4px 0;
            color: var(--text-dim);
        }
        
        .github-token-help a {
            color: var(--cyan);
        }
        
        .github-token-help code {
            background: rgba(78,205,196,0.2);
            padding: 2px 6px;
            border-radius: 3px;
            color: var(--cyan);
        }
        
        /* Connected UI */
        .github-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 16px;
        }
        
        .github-user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .github-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        
        .github-username {
            font-weight: 600;
            display: block;
        }
        
        .github-status {
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .github-status.connected {
            color: #4caf50;
        }
        
        .github-actions {
            display: flex;
            gap: 8px;
        }
        
        /* Repo Selector */
        .github-repo-selector {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 16px;
        }
        
        .github-repo-selector label {
            font-weight: 600;
            white-space: nowrap;
        }
        
        .github-repo-selector select {
            flex: 1;
            padding: 10px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 13px;
        }
        
        .github-refresh-btn {
            padding: 10px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-dim);
            cursor: pointer;
        }
        
        .github-refresh-btn:hover {
            border-color: var(--cyan);
            color: var(--cyan);
        }
        
        /* Workspace */
        .github-workspace {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 16px;
            height: 500px;
        }
        
        .github-file-browser {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .github-path-bar {
            padding: 10px 14px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: var(--text-dim);
        }
        
        .github-file-list {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }
        
        .github-file-item {
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
        }
        
        .github-file-item:hover {
            background: var(--bg);
        }
        
        .github-file-item.selected {
            background: rgba(78,205,196,0.1);
            border: 1px solid var(--cyan);
        }
        
        .github-file-item.folder {
            color: var(--cyan);
        }
        
        .github-file-item.file {
            color: var(--text);
        }
        
        .github-file-item .modified {
            margin-left: auto;
            width: 8px;
            height: 8px;
            background: #f59e0b;
            border-radius: 50%;
        }
        
        /* Editor Panel */
        .github-editor-panel {
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .github-editor-header {
            padding: 12px 16px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .github-file-name {
            font-weight: 600;
            font-size: 13px;
            font-family: 'JetBrains Mono', monospace;
        }
        
        .github-editor-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .github-file-status {
            font-size: 11px;
            color: #f59e0b;
        }
        
        .github-save-btn,
        .github-commit-btn {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .github-save-btn {
            background: var(--bg);
            border: 1px solid var(--border);
            color: var(--text-dim);
        }
        
        .github-save-btn:not(:disabled):hover {
            border-color: var(--cyan);
            color: var(--cyan);
        }
        
        .github-commit-btn {
            background: var(--gradient);
            border: none;
            color: white;
        }
        
        .github-commit-btn:disabled,
        .github-save-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .github-editor {
            flex: 1;
            padding: 16px;
            background: var(--bg);
            border: none;
            color: var(--text);
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            line-height: 1.6;
            resize: none;
        }
        
        .github-editor:focus {
            outline: none;
        }
        
        .github-editor:disabled {
            color: var(--text-dim);
        }
        
        /* Agent Sync Section */
        .github-agent-sync {
            margin-top: 16px;
            padding: 20px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 12px;
        }
        
        .github-agent-sync h4 {
            margin: 0 0 8px 0;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .github-agent-sync > p {
            color: var(--text-dim);
            font-size: 13px;
            margin-bottom: 16px;
        }
        
        .github-sync-mapping {
            background: var(--bg);
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        
        .sync-mapping-header {
            display: grid;
            grid-template-columns: 150px 1fr 100px 120px;
            gap: 12px;
            padding: 10px 16px;
            background: rgba(0,0,0,0.2);
            font-size: 11px;
            font-weight: 600;
            color: var(--text-dim);
            text-transform: uppercase;
        }
        
        .sync-mapping-row {
            display: grid;
            grid-template-columns: 150px 1fr 100px 120px;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            align-items: center;
            font-size: 13px;
        }
        
        .sync-mapping-row:last-child {
            border-bottom: none;
        }
        
        .sync-mapping-row .agent-name {
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .sync-mapping-row .file-path {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: var(--text-dim);
        }
        
        .sync-mapping-row .sync-status {
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .sync-mapping-row .sync-status.synced {
            color: #4caf50;
        }
        
        .sync-mapping-row .sync-status.modified {
            color: #f59e0b;
        }
        
        .sync-mapping-row .sync-status.conflict {
            color: #ef4444;
        }
        
        .sync-mapping-row .sync-actions {
            display: flex;
            gap: 4px;
        }
        
        .sync-mapping-row .sync-actions button {
            padding: 4px 8px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--text-dim);
            font-size: 10px;
            cursor: pointer;
        }
        
        .sync-mapping-row .sync-actions button:hover {
            border-color: var(--cyan);
            color: var(--cyan);
        }
        
        .github-sync-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        
        .admin-action-btn.primary {
            background: var(--gradient);
            border: none;
            color: white;
        }
        
        /* Commit Dialog */
        .github-commit-dialog {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100002;
        }
        
        .github-commit-content {
            background: var(--panel);
            border-radius: 16px;
            padding: 24px;
            width: 500px;
            max-width: 90%;
        }
        
        .github-commit-content h3 {
            margin: 0 0 20px 0;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .github-commit-form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .github-commit-form label {
            font-size: 12px;
            color: var(--text-dim);
            margin-top: 8px;
        }
        
        .github-commit-form input,
        .github-commit-form textarea {
            padding: 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 13px;
        }
        
        .github-commit-form textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .github-commit-form input:focus,
        .github-commit-form textarea:focus {
            outline: none;
            border-color: var(--cyan);
        }
        
        .github-commit-files {
            background: var(--bg);
            border-radius: 8px;
            padding: 12px;
            max-height: 150px;
            overflow-y: auto;
        }
        
        .github-commit-files label {
            margin-top: 0;
        }
        
        .github-commit-file {
            padding: 6px 0;
            font-size: 12px;
            font-family: 'JetBrains Mono', monospace;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .github-commit-file i {
            color: #4caf50;
        }
        
        .github-commit-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 20px;
        }
        
        .github-commit-actions button {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
        }
        
        .github-commit-actions button:first-child {
            background: var(--bg);
            border: 1px solid var(--border);
            color: var(--text-dim);
        }
        
        .github-commit-actions button.primary {
            background: var(--gradient);
            border: none;
            color: white;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* ============================================
           SYSTEM SCENE VIEW
           ============================================ */
        .scene-view-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(8, 8, 18, 0.98);
            z-index: 100000;
            display: none;
            overflow: hidden;
        }
        .scene-view-overlay.active {
            display: flex;
            flex-direction: column;
        }
        .scene-view-header {
            padding: 10px 20px;
            background: linear-gradient(135deg, rgba(78,205,196,0.08), rgba(155,107,255,0.08));
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        .scene-view-title { display: flex; align-items: center; gap: 8px; }
        .scene-view-title h3 {
            font-size: 16px; margin: 0;
            background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .sv-badge {
            padding: 2px 8px; background: rgba(78,205,196,0.15); border: 1px solid rgba(78,205,196,0.3);
            border-radius: 10px; font-size: 10px; color: var(--cyan);
        }
        .scene-view-controls { display: flex; align-items: center; gap: 6px; }
        .sv-toggle-btn, .sv-filter, .sv-zoom-btn {
            padding: 5px 10px; background: var(--bg-card); border: 1px solid var(--border);
            border-radius: 4px; color: var(--text-dim); font-size: 11px; cursor: pointer; transition: all 0.15s;
        }
        .sv-toggle-btn:hover, .sv-filter:hover, .sv-zoom-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
        .sv-toggle-btn.active, .sv-filter.active {
            color: var(--cyan); border-color: rgba(78,205,196,0.4); background: rgba(78,205,196,0.1);
        }
        .sv-toggle-group, .sv-filter-group { display: flex; gap: 2px; }
        .scene-view-search {
            position: relative; display: flex; align-items: center;
        }
        .scene-view-search i { position: absolute; left: 8px; color: var(--text-dim); font-size: 11px; pointer-events: none; }
        .scene-view-search input {
            padding: 5px 10px 5px 26px; background: var(--bg); border: 1px solid var(--border);
            border-radius: 4px; color: var(--text); font-size: 11px; width: 160px; outline: none;
        }
        .scene-view-search input:focus { border-color: rgba(78,205,196,0.4); }
        .sv-zoom-group { display: flex; align-items: center; gap: 2px; }
        .sv-zoom-level { font-size: 10px; color: var(--text-dim); min-width: 36px; text-align: center; }
        .scene-view-close {
            padding: 6px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
            color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 11px;
        }
        .scene-view-close:hover { border-color: var(--coral); color: var(--coral); }
        /* Stats Bar */
        .scene-view-stats {
            display: flex; gap: 16px; padding: 6px 20px; background: var(--bg-card);
            border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto;
        }
        .sv-stat { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
        .sv-stat-val { color: var(--text); font-weight: 600; }
        .sv-stat-sep { margin-left: auto; }
        /* Body */
        .scene-view-body { flex: 1; position: relative; overflow: hidden; cursor: grab; background: rgba(5,5,12,0.5); }
        .scene-view-body.grabbing { cursor: grabbing; }
        .scene-view-svg {
            position: absolute; inset: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 1; overflow: visible;
        }
        .sv-connection { stroke: rgba(255,255,255,0.06); stroke-width: 1.5; fill: none; }
        .sv-connection.highlighted { stroke: var(--cyan); stroke-width: 2; opacity: 1; }
        .sv-connection.css-link { stroke: rgba(255,193,7,0.15); }
        .sv-connection.js-link { stroke: rgba(255,107,107,0.15); }
        .scene-view-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; z-index: 2; }
        /* Nodes */
        .sv-node {
            position: absolute; width: 170px; padding: 8px 10px;
            background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
            cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; user-select: none;
        }
        .sv-node:hover { border-color: rgba(255,255,255,0.2); box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 10; }
        .sv-node.selected { border-color: var(--cyan); box-shadow: 0 0 12px rgba(78,205,196,0.3); z-index: 11; }
        .sv-node.dimmed { opacity: 0.15; pointer-events: none; }
        .sv-node-header { display: flex; align-items: center; gap: 6px; }
        .sv-node-icon { font-size: 12px; opacity: 0.7; }
        .sv-node-name { font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
        .sv-node-type { font-size: 9px; color: var(--text-dim); margin-top: 2px; }
        .sv-node-file { font-size: 9px; color: var(--text-dim); margin-top: 3px; font-family: 'JetBrains Mono', monospace; opacity: 0.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sv-node.cat-pages    { border-left: 3px solid #4caf50; }
        .sv-node.cat-features { border-left: 3px solid var(--cyan); }
        .sv-node.cat-ui       { border-left: 3px solid var(--purple); }
        .sv-node.cat-logic    { border-left: 3px solid var(--coral); }
        .sv-node.cat-styling  { border-left: 3px solid #ffc107; }
        /* Groups */
        .sv-group {
            position: absolute; border: 1px dashed rgba(255,255,255,0.05);
            border-radius: 12px; pointer-events: none;
        }
        .sv-group-label {
            position: absolute; top: 10px; left: 14px;
            font-size: 11px; font-weight: 600; color: var(--text-dim); display: flex; align-items: center; gap: 5px;
        }
        .sv-group-count { font-weight: 400; opacity: 0.6; }
        /* Detail Panel */
        .scene-view-detail {
            position: absolute; right: -380px; top: 0; bottom: 0; width: 360px;
            background: var(--bg-card); border-left: 1px solid var(--border);
            z-index: 20; display: flex; flex-direction: column;
            transition: right 0.25s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.3);
        }
        .scene-view-detail.open { right: 0; }
        .sv-detail-header {
            padding: 14px 16px; display: flex; align-items: center; gap: 10px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(78,205,196,0.06), rgba(155,107,255,0.06));
        }
        .sv-detail-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(78,205,196,0.1); color: var(--cyan); }
        .sv-detail-name { font-size: 14px; font-weight: 600; color: var(--text); }
        .sv-detail-type { font-size: 10px; color: var(--text-dim); }
        .sv-detail-close { background: none; border: none; color: var(--text-dim); cursor: pointer; margin-left: auto; font-size: 14px; padding: 4px; }
        .sv-detail-close:hover { color: var(--text); }
        .sv-detail-body { flex: 1; overflow-y: auto; padding: 14px; }
        .sv-detail-section { margin-bottom: 14px; }
        .sv-detail-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
        .sv-detail-value { font-size: 12px; color: var(--text); }
        .sv-detail-code {
            font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-dim);
            background: var(--bg); padding: 8px; border-radius: 4px; border: 1px solid var(--border);
            max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-all;
        }
        .sv-detail-deps { display: flex; flex-wrap: wrap; gap: 4px; }
        .sv-detail-dep {
            padding: 2px 6px; background: rgba(78,205,196,0.1); border: 1px solid rgba(78,205,196,0.2);
            border-radius: 3px; font-size: 10px; color: var(--cyan); cursor: pointer;
        }
        .sv-detail-dep:hover { background: rgba(78,205,196,0.2); }
        .sv-detail-actions { padding-top: 10px; border-top: 1px solid var(--border); }
        .sv-detail-btn {
            padding: 8px 14px; background: rgba(78,205,196,0.1); border: 1px solid rgba(78,205,196,0.3);
            border-radius: 6px; color: var(--cyan); cursor: pointer; font-size: 11px; width: 100%;
        }
        .sv-detail-btn:hover { background: rgba(78,205,196,0.2); }

        /* ============================================
           GITHUB STUDIO STYLES
           ============================================ */

        .github-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 2px 8px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 6px;
            font-size: 11px;
            color: var(--text-dim);
            cursor: pointer;
            transition: all 0.2s;
        }
        .github-badge:hover {
            border-color: var(--cyan);
            color: var(--text);
        }
        .github-badge .fab { color: #fff; font-size: 12px; }
        .github-badge .branch-name { color: var(--cyan); font-weight: 500; }

        .gs-modal { width: 520px; max-width: 95vw; }
        .gs-modal .modal-content { padding: 20px; }

        .gs-section-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
        }

        .gs-repo-list {
            max-height: 320px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .gs-repo-card {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .gs-repo-card:hover {
            border-color: var(--cyan);
            background: rgba(78,205,196,0.05);
        }
        .gs-repo-card .repo-name {
            font-weight: 600;
            font-size: 13px;
            color: var(--text);
        }
        .gs-repo-card .repo-desc {
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 350px;
        }
        .gs-repo-card .repo-meta {
            font-size: 10px;
            color: var(--text-dim);
            margin-top: 3px;
            display: flex;
            gap: 10px;
        }
        .gs-repo-card .repo-private {
            color: #f59e0b;
            font-size: 10px;
        }
        .gs-repo-info { flex: 1; min-width: 0; }

        .gs-search {
            width: 100%;
            padding: 10px 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 13px;
            margin-bottom: 12px;
        }
        .gs-search:focus { outline: none; border-color: var(--cyan); }

        .gs-connected-card {
            background: var(--bg);
            border: 1px solid rgba(78,205,196,0.3);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 16px;
        }
        .gs-connected-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        .gs-connected-header .repo-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(78,205,196,0.2), rgba(155,107,255,0.2));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .gs-connected-header .repo-name { font-weight: 600; font-size: 15px; }
        .gs-connected-header .repo-branch {
            font-size: 12px;
            color: var(--cyan);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .gs-connected-meta {
            display: flex;
            gap: 16px;
            font-size: 11px;
            color: var(--text-dim);
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }
        .gs-connected-meta span { display: flex; align-items: center; gap: 4px; }

        .gs-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
        }
        .gs-actions button {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.15s;
        }
        .gs-btn-push {
            background: var(--gradient);
            border: none;
            color: white;
        }
        .gs-btn-push:hover { opacity: 0.9; }
        .gs-btn-pull {
            background: rgba(78,205,196,0.1);
            border: 1px solid rgba(78,205,196,0.3);
            color: var(--cyan);
        }
        .gs-btn-pull:hover { background: rgba(78,205,196,0.15); }
        .gs-btn-disconnect {
            background: rgba(239,68,68,0.1);
            border: 1px solid rgba(239,68,68,0.3);
            color: #ef4444;
            flex: 0;
            padding: 10px 16px;
        }
        .gs-btn-disconnect:hover { background: rgba(239,68,68,0.15); }

        .gs-file-list {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px 12px;
            margin-top: 12px;
            max-height: 120px;
            overflow-y: auto;
        }
        .gs-file-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 0;
            font-size: 12px;
            font-family: 'JetBrains Mono', monospace;
            color: var(--text-dim);
        }
        .gs-file-item i { color: var(--cyan); font-size: 11px; }
        .gs-file-item .role {
            margin-left: auto;
            font-size: 10px;
            padding: 1px 6px;
            background: rgba(78,205,196,0.1);
            border-radius: 4px;
            color: var(--cyan);
        }

        .gs-progress {
            margin-top: 16px;
            text-align: center;
        }
        .gs-progress-bar {
            width: 100%;
            height: 4px;
            background: var(--bg);
            border-radius: 2px;
            overflow: hidden;
            margin-top: 8px;
        }
        .gs-progress-fill {
            height: 100%;
            background: var(--gradient);
            border-radius: 2px;
            transition: width 0.3s;
        }
        .gs-progress-text {
            font-size: 12px;
            color: var(--text-dim);
            margin-top: 6px;
        }

        .gs-token-input {
            width: 100%;
            padding: 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 13px;
            font-family: 'JetBrains Mono', monospace;
        }
        .gs-token-input:focus { outline: none; border-color: var(--cyan); }

        .gs-btn-connect {
            width: 100%;
            padding: 12px;
            background: var(--gradient);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .gs-btn-connect:hover { opacity: 0.9; }

        .gs-help-text {
            font-size: 12px;
            color: var(--text-dim);
            margin-top: 10px;
            text-align: center;
        }
        .gs-help-text a { color: var(--cyan); text-decoration: none; }
        .gs-help-text a:hover { text-decoration: underline; }

        /* ============================================
           DEVELOPER MODE STYLES
           ============================================ */
        
        .dev-mode-btn:hover {
            border-color: var(--cyan) !important;
            background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(56,189,248,0.15)) !important;
        }
        
        .dev-mode-btn i {
            color: var(--cyan);
        }
        
        /* Developer Mode Activation Modal */
        .dev-activation-modal {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .dev-activation-modal.active {
            opacity: 1;
            visibility: visible;
        }
        
        .dev-activation-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
        }
        
        .dev-activation-content {
            position: relative;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            border: 1px solid rgba(74, 222, 128, 0.3);
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            overflow: hidden;
            transform: scale(0.95);
            transition: transform 0.3s ease;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(74, 222, 128, 0.1);
        }
        
        .dev-activation-modal.active .dev-activation-content {
            transform: scale(1);
        }
        
        .dev-activation-header {
            padding: 24px 24px 0;
            text-align: center;
        }
        
        .dev-activation-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 16px;
            background: linear-gradient(135deg, #4ade80, #38bdf8);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #000;
        }
        
        .dev-activation-header h2 {
            margin: 0 0 8px;
            font-size: 22px;
            font-weight: 600;
            color: #fff;
        }
        
        .dev-activation-header p {
            margin: 0;
            color: rgba(255,255,255,0.6);
            font-size: 14px;
        }
        
        .dev-activation-body {
            padding: 24px;
        }
        
        .dev-key-input-group {
            margin-bottom: 20px;
        }
        
        .dev-key-input-group label {
            display: block;
            font-size: 12px;
            color: rgba(255,255,255,0.5);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .dev-key-input {
            width: 100%;
            background: rgba(0,0,0,0.3);
            border: 2px solid rgba(74, 222, 128, 0.2);
            color: #fff;
            padding: 14px 16px;
            border-radius: 10px;
            font-size: 18px;
            font-family: 'JetBrains Mono', monospace;
            text-align: center;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: all 0.2s;
        }
        
        .dev-key-input:focus {
            outline: none;
            border-color: var(--cyan);
            box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
        }
        
        .dev-key-input::placeholder {
            color: rgba(255,255,255,0.3);
            letter-spacing: 1px;
        }
        
        .dev-activation-actions {
            display: flex;
            gap: 12px;
        }
        
        .dev-activation-btn {
            flex: 1;
            padding: 14px 20px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .dev-activation-btn.secondary {
            background: transparent;
            border: 1px solid rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.7);
        }
        
        .dev-activation-btn.secondary:hover {
            border-color: rgba(255,255,255,0.4);
            color: #fff;
        }
        
        .dev-activation-btn.primary {
            background: linear-gradient(135deg, #4ade80, #38bdf8);
            border: none;
            color: #000;
        }
        
        .dev-activation-btn.primary:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }
        
        .dev-activation-divider {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 24px 0;
            color: rgba(255,255,255,0.3);
            font-size: 12px;
        }
        
        .dev-activation-divider::before,
        .dev-activation-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,0.1);
        }
        
        .dev-new-project-section {
            background: rgba(0,0,0,0.2);
            border-radius: 10px;
            padding: 16px;
        }
        
        .dev-new-project-section h4 {
            margin: 0 0 12px;
            font-size: 14px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .dev-new-project-section h4 i {
            color: var(--cyan);
        }
        
        .dev-new-project-input {
            width: 100%;
            background: rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.1);
            color: #fff;
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 13px;
            margin-bottom: 12px;
        }
        
        .dev-new-project-input:focus {
            outline: none;
            border-color: var(--cyan);
        }
        
        .dev-new-project-btn {
            width: 100%;
            padding: 10px;
            background: rgba(74, 222, 128, 0.1);
            border: 1px solid rgba(74, 222, 128, 0.3);
            color: var(--cyan);
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .dev-new-project-btn:hover {
            background: rgba(74, 222, 128, 0.2);
        }
        
        /* Key Display */
        .dev-key-display {
            background: rgba(0,0,0,0.4);
            border: 2px solid var(--cyan);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            margin: 20px 0;
        }
        
        .dev-key-display label {
            display: block;
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .dev-key-display .key {
            font-family: 'JetBrains Mono', monospace;
            font-size: 24px;
            font-weight: 600;
            color: var(--cyan);
            letter-spacing: 3px;
        }
        
        .dev-key-display .copy-hint {
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            margin-top: 8px;
        }
        
        .dev-activation-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.5);
            font-size: 20px;
            cursor: pointer;
            padding: 4px;
            transition: color 0.2s;
        }
        
        .dev-activation-close:hover {
            color: #fff;
        }
        
        /* Toast notification for key copied */
        .dev-toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #1a1a2e;
            border: 1px solid var(--cyan);
            padding: 12px 20px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: #fff;
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 20000;
        }
        
        .dev-toast.show {
            transform: translateY(0);
            opacity: 1;
        }
        
        .dev-toast i {
            color: var(--cyan);
        }
        
        /* File Explorer */
        .file-tree-folder.collapsed .folder-children {
            display: none;
        }
        
        .file-tree-folder.collapsed .fa-chevron-down {
            transform: rotate(-90deg);
        }
        
        /* ═══════════════════════════════════════════════════════════════
           INCREMENTAL BUILDER PROGRESS STYLES
           ═══════════════════════════════════════════════════════════════ */
        
        .incremental-progress {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%) translateY(-20px);
            width: 500px;
            max-width: 90vw;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            z-index: 9998;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        
        .incremental-progress.active {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }
        
        .progress-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .progress-title {
            font-weight: 600;
            font-size: 14px;
            flex: 1;
        }
        
        .progress-count {
            font-size: 12px;
            color: var(--text-dim);
            background: var(--bg);
            padding: 4px 10px;
            border-radius: 12px;
        }
        
        .progress-pause, .progress-cancel {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .progress-pause {
            background: rgba(78, 205, 196, 0.1);
            color: var(--cyan);
        }
        
        .progress-pause:hover {
            background: rgba(78, 205, 196, 0.2);
        }
        
        .progress-cancel {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        
        .progress-cancel:hover {
            background: rgba(239, 68, 68, 0.2);
        }
        
        .progress-bar {
            height: 6px;
            background: var(--bg);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        
        .progress-fill {
            height: 100%;
            background: var(--gradient);
            border-radius: 3px;
            transition: width 0.5s ease;
        }
        
        .progress-steps {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .progress-step {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: var(--text-dim);
            padding: 4px 8px;
            background: var(--bg);
            border-radius: 12px;
            transition: all 0.3s;
        }
        
        .progress-step.complete {
            background: rgba(74, 222, 128, 0.1);
            color: #4ade80;
        }
        
        .progress-step.current {
            background: rgba(78, 205, 196, 0.2);
            color: var(--cyan);
            animation: stepPulse 2s infinite;
        }
        
        .step-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.5;
        }
        
        .progress-step.complete .step-dot,
        .progress-step.current .step-dot {
            opacity: 1;
        }
        
        .step-name {
            white-space: nowrap;
        }
        
        @keyframes stepPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        /* ═══ Inline AI Assist ═══ */

        .inline-assist-menu {
            position: fixed;
            z-index: 10000;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 4px;
            min-width: 200px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
            backdrop-filter: blur(16px);
            display: none;
        }
        .inline-assist-menu.visible { display: block; }

        .ia-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text);
            transition: background 0.15s;
        }
        .ia-menu-item:hover {
            background: var(--bg-hover);
        }
        .ia-menu-item i {
            width: 16px;
            text-align: center;
            color: var(--purple);
        }
        .ia-shortcut {
            margin-left: auto;
            font-size: 11px;
            color: var(--text-dim);
            opacity: 0.6;
        }

        .inline-assist-panel {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 420px;
            max-width: 90vw;
            z-index: 9999;
            background: var(--bg-card);
            border-left: 1px solid var(--border);
            display: none;
            flex-direction: column;
            box-shadow: -4px 0 24px rgba(0,0,0,0.4);
            transform: translateX(100%);
            transition: transform 0.25s ease-out;
        }
        .inline-assist-panel.visible {
            display: flex;
            transform: translateX(0);
        }

        .ia-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .ia-panel-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }
        .ia-panel-title i { color: var(--purple); }
        .ia-panel-actions {
            display: flex;
            gap: 6px;
        }
        .ia-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-dim);
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.15s;
        }
        .ia-btn:hover {
            background: var(--bg-hover);
            color: var(--text);
        }
        .ia-btn-primary {
            background: var(--purple);
            border-color: var(--purple);
            color: white;
        }
        .ia-btn-primary:hover {
            background: #8a5aee;
        }

        .ia-panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            font-size: 13px;
            line-height: 1.6;
            color: var(--text);
        }
        .ia-panel-content h2, .ia-panel-content h3, .ia-panel-content h4 {
            margin: 12px 0 6px;
            color: var(--text);
        }
        .ia-panel-content pre {
            background: rgba(0,0,0,0.3);
            border-radius: 6px;
            padding: 12px;
            overflow-x: auto;
            margin: 8px 0;
            font-size: 12px;
        }
        .ia-panel-content code {
            font-family: 'SF Mono', 'Fira Code', monospace;
            font-size: 12px;
        }
        .ia-panel-content ul, .ia-panel-content ol {
            padding-left: 20px;
            margin: 6px 0;
        }

        .ia-loading {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 20px;
            color: var(--text-dim);
        }
        .ia-loading i { color: var(--purple); }

        .ia-summary {
            padding: 10px 14px;
            background: rgba(155, 107, 255, 0.08);
            border-left: 3px solid var(--purple);
            border-radius: 0 6px 6px 0;
            margin-bottom: 12px;
        }

        .ia-issues { display: flex; flex-direction: column; gap: 8px; }
        .ia-issue {
            display: flex;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
        }
        .ia-issue-error { background: rgba(255,107,107,0.1); }
        .ia-issue-error i { color: var(--coral); }
        .ia-issue-warning { background: rgba(255,193,7,0.1); }
        .ia-issue-warning i { color: #ffc107; }
        .ia-issue-info { background: rgba(78,205,196,0.1); }
        .ia-issue-info i { color: var(--cyan); }
        .ia-line { color: var(--text-dim); margin-right: 6px; font-size: 11px; }
        .ia-fix { display: block; color: var(--cyan); margin-top: 4px; font-size: 11px; }

        .ia-success {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            color: #4ecdc4;
        }

        .ia-error {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            color: var(--coral);
        }

        .ia-meta {
            font-size: 12px;
            color: var(--text-dim);
            margin-bottom: 8px;
        }

        .ia-changes {
            list-style: none;
            padding: 0;
            margin: 8px 0;
        }
        .ia-changes li {
            display: flex;
            align-items: baseline;
            gap: 8px;
            padding: 4px 0;
            font-size: 12px;
        }
        .ia-changes li i { color: var(--cyan); font-size: 10px; }

        details {
            margin: 8px 0;
        }
        details summary {
            cursor: pointer;
            color: var(--purple);
            font-size: 12px;
            padding: 4px 0;
        }

        /* ═══ Git Panel ═══ */

        .git-panel-section { border-top: 1px solid var(--border); flex-shrink: 0; }
        .git-panel-toggle {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 12px; font-size: 12px; font-weight: 600;
            color: var(--text-dim); cursor: pointer; user-select: none;
        }
        .git-panel-toggle:hover { color: var(--text); }
        .git-panel-toggle i:first-child { color: var(--purple); }
        .git-toggle-icon { margin-left: auto; font-size: 10px; transition: transform 0.2s; }
        .git-panel-body.collapsed { display: none; }
        .git-panel-body.collapsed ~ .git-toggle-icon { transform: rotate(-90deg); }
        .git-panel-body { max-height: 260px; overflow-y: auto; padding: 0 8px 8px; }
        .git-loading, .git-msg { padding: 12px; font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
        .git-init-prompt { display: flex; flex-direction: column; align-items: center; padding: 16px; text-align: center; }
        .git-init-prompt p { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
        .git-init-btn {
            background: var(--purple); color: white; border: none; padding: 6px 14px;
            border-radius: 6px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 6px;
        }
        .git-init-btn:hover { background: #8a5aee; }
        .git-branch-bar {
            display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px;
            color: var(--text); background: rgba(155,107,255,0.06); border-radius: 6px; margin-bottom: 8px;
        }
        .git-branch-bar > i { color: var(--purple); }
        .git-branch-name { font-weight: 600; }
        .git-clean { margin-left: auto; color: #4ecdc4; font-size: 11px; }
        .git-dirty { margin-left: auto; color: #f0c040; font-size: 11px; }
        .git-refresh-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 2px 4px; font-size: 11px; }
        .git-refresh-btn:hover { color: var(--text); }
        .git-section { margin-bottom: 8px; }
        .git-section-title {
            font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase;
            letter-spacing: 0.5px; padding: 4px 0; display: flex; align-items: center; justify-content: space-between;
        }
        .git-log-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 2px 6px; }
        .git-log-btn:hover { color: var(--purple); }
        .git-files { display: flex; flex-direction: column; gap: 2px; }
        .git-file { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 4px; cursor: pointer; font-size: 12px; }
        .git-file:hover { background: var(--bg-hover); }
        .git-file-status { width: 14px; text-align: center; font-size: 11px; font-weight: 700; font-family: monospace; }
        .git-file-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .git-commit-form { display: flex; gap: 6px; margin-top: 8px; }
        .git-commit-input {
            flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text);
            padding: 5px 8px; border-radius: 6px; font-size: 12px; outline: none;
        }
        .git-commit-input:focus { border-color: var(--purple); }
        .git-commit-btn {
            background: var(--purple); color: white; border: none; padding: 5px 10px;
            border-radius: 6px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 4px; white-space: nowrap;
        }
        .git-commit-btn:hover { background: #8a5aee; }
        .git-last-commit { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; font-size: 12px; }
        .git-commit-hash { font-family: monospace; color: var(--purple); font-size: 11px; }
        .git-commit-msg { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .git-commit-date { color: var(--text-dim); font-size: 11px; }
        .git-indicator { margin-left: auto; font-size: 10px; font-weight: 700; font-family: monospace; flex-shrink: 0; }
        .git-log-list { display: flex; flex-direction: column; gap: 8px; }
        .git-log-entry { padding: 8px 12px; border-left: 2px solid var(--purple); background: rgba(0,0,0,0.15); border-radius: 0 6px 6px 0; }
        .git-log-header { display: flex; justify-content: space-between; font-size: 11px; }
        .git-log-message { font-size: 13px; margin: 4px 0 2px; }
        .git-log-author { font-size: 11px; color: var(--text-dim); }
        .git-diff-view pre { font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
        .git-diff-stat { color: var(--text-dim); margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
        .diff-add { color: #4ecdc4; }
        .diff-del { color: #ff6b6b; }
        .diff-hunk { color: var(--purple); font-weight: 600; }