:root{--color-bg: #09090B;--color-bg-secondary: #111827;--color-sidebar: #111827;--color-card: #111827;--color-border: #27272A;--color-surface-light: #1F2937;--color-text-primary: #F8FAFC;--color-text-secondary: #94A3B8;--color-text-muted: #64748B;--color-primary: #6366F1;--color-primary-hover: #4F46E5;--color-success: #22C55E;--color-warning: #F59E0B;--color-error: #EF4444;--color-ai-accent: #7C3AED;--color-terminal-green: #10B981;--color-primary-subtle: rgba(37, 99, 235, .12);--color-ai-accent-subtle: rgba(124, 58, 237, .12);--color-error-subtle: rgba(239, 68, 68, .1);--color-success-subtle: rgba(34, 197, 94, .1);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--transition-fast: .12s ease;--transition-normal: .2s ease;--transition-slow: .35s ease;--z-base: 1;--z-dropdown: 100;--z-modal: 200;--z-tooltip: 300}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-sans);height:100vh;overflow:hidden;margin:0;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100vh;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.app-layout{display:grid;grid-template-columns:220px 1fr 300px;grid-template-rows:48px 1fr 200px;height:100vh}.navbar{grid-column:1 / -1;grid-row:1;background:var(--color-card);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);z-index:var(--z-base)}.navbar-logo{display:flex;align-items:center;gap:var(--space-2);font-size:30px;font-weight:700;letter-spacing:-.5px;-webkit-user-select:none;user-select:none}.navbar-logo .logo-dev{color:var(--color-text-primary)}.navbar-logo .logo-mind{color:var(--color-ai-accent)}.navbar-logo .logo-icon{width:28px;height:28px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--color-primary),var(--color-ai-accent));display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.navbar-subtitle{font-size:12px;color:var(--color-text-muted);font-weight:400;letter-spacing:.3px}.sidebar{grid-column:2;grid-row:2 / -1;background:var(--color-sidebar);border-right:1px solid var(--color-border);overflow-y:auto;display:flex;flex-direction:column}.sidebar-header{padding:var(--space-3) var(--space-4);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}.sidebar-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);color:var(--color-text-muted);font-size:13px;padding:var(--space-4);text-align:center}.sidebar-placeholder-icon{font-size:28px;opacity:.5}.editor-area{grid-column:3;grid-row:2;background:var(--color-bg);overflow:hidden;display:flex;flex-direction:column}.editor-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);color:var(--color-text-muted)}.editor-placeholder-icon{font-size:48px;opacity:.3}.editor-placeholder-title{font-size:18px;font-weight:600;color:var(--color-text-secondary)}.editor-placeholder-hint{font-size:13px;color:var(--color-text-muted)}.editor-placeholder-keys{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.key-badge{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:11px;font-family:var(--font-mono);color:var(--color-text-secondary)}.ai-panel{grid-column:4;grid-row:2 / -1;background:var(--color-bg-secondary);border-left:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden}.ai-panel-header{padding:var(--space-3) var(--space-4);font-size:12px;font-weight:600;color:var(--color-ai-accent);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2)}.ai-panel-header-dot{width:6px;height:6px;border-radius:50%;background:var(--color-ai-accent);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}@keyframes fade-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.ai-panel-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);color:var(--color-text-muted);font-size:13px;padding:var(--space-4);text-align:center}.ai-panel-placeholder-icon{font-size:32px;opacity:.4}.console{grid-column:2 / 4;grid-row:3;background:var(--color-bg-secondary);border-top:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden}.console-header{padding:var(--space-2) var(--space-4);font-size:12px;font-weight:600;color:var(--color-terminal-green);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono)}.console-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:13px;font-family:var(--font-mono)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-error{color:var(--color-error)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-ai{color:var(--color-ai-accent)}.font-mono{font-family:var(--font-mono)}.bg-subtle-primary{background:var(--color-primary-subtle)}.bg-subtle-ai{background:var(--color-ai-accent-subtle)}.bg-subtle-error{background:var(--color-error-subtle)}.bg-subtle-success{background:var(--color-success-subtle)}