:root{--bg-main: #0b0f19;--bg-card: rgba(18, 26, 43, .75);--bg-card-hover: rgba(28, 38, 61, .85);--bg-input: #131b2e;--border-color: rgba(255, 255, 255, .08);--border-focus: #6366f1;--text-primary: #f3f4f6;--text-secondary: #9ca3af;--text-muted: #6b7280;--accent-primary: #6366f1;--accent-secondary: #8b5cf6;--accent-glow: rgba(99, 102, 241, .25);--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.5;min-height:100vh;overflow-x:hidden;background-image:radial-gradient(circle at 15% 15%,rgba(99,102,241,.08) 0%,transparent 40%),radial-gradient(circle at 85% 85%,rgba(139,92,246,.08) 0%,transparent 40%)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.app-container{display:flex;flex-direction:column;height:100vh}.top-navbar{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:60px;border-bottom:1px solid var(--border-color);background:#0b0f19cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100}.brand{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.15rem;color:#fff;letter-spacing:-.02em}.brand-icon{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px var(--accent-glow)}.nav-links{display:flex;align-items:center;gap:.5rem}.nav-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .2s ease}.nav-btn:hover{color:var(--text-primary);background:#ffffff0a}.nav-btn.active{color:#fff;background:#6366f126;border-color:#6366f166}.main-content{display:flex;flex:1;overflow:hidden}.glass-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 8px 32px #0000004d}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem 1.1rem;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s ease;border:none}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;box-shadow:0 4px 14px var(--accent-glow)}.btn-primary:hover{opacity:.92;transform:translateY(-1px)}.btn-secondary{background:#ffffff0f;color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:#ffffff1a}.btn-danger{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3)}.btn-danger:hover{background:#ef444440}.btn-sm{padding:.35rem .75rem;font-size:.8rem}.form-input{width:100%;padding:.6rem .9rem;background:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:inherit;font-size:.9rem;outline:none;transition:all .2s ease}.form-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}.form-select{padding:.6rem .9rem;background:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-family:inherit;outline:none}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:6px;font-size:.75rem;font-weight:600;font-family:var(--font-mono)}.badge-purple{background:#8b5cf626;color:#c084fc;border:1px solid rgba(139,92,246,.3)}.badge-green{background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3)}.badge-blue{background:#3b82f626;color:#60a5fa;border:1px solid rgba(59,130,246,.3)}.code-block{background:#0d1117;border:1px solid var(--border-color);border-radius:8px;padding:1rem;font-family:var(--font-mono);font-size:.85rem;color:#e6edf3;overflow-x:auto;white-space:pre-wrap;position:relative}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-card{width:100%;max-width:500px;padding:1.5rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .25s cubic-bezier(.16,1,.3,1) forwards}
