:root{--bg-app:#080b12;--bg-surface:#0e1422;--bg-surface-elevated:#141c2e;--bg-glass:#121a2bbf;--bg-glass-card:#161f33a6;--bg-glass-input:#0e1422d9;--border-subtle:#ffffff0f;--border-medium:#ffffff1f;--border-active:#a855f766;--accent-primary:#8b5cf6;--accent-secondary:#ec4899;--accent-cyan:#06b6d4;--accent-blue:#3b82f6;--accent-emerald:#10b981;--accent-amber:#f59e0b;--accent-rose:#f43f5e;--grad-brand:linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);--grad-cyan-blue:linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);--grad-emerald:linear-gradient(135deg, #059669 0%, #10b981 100%);--grad-dark-card:linear-gradient(180deg, #1c274099 0%, #111827b3 100%);--text-main:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-link:#a855f7;--font-heading:"Outfit", sans-serif;--font-body:"Plus Jakarta Sans", sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:22px;--radius-pill:9999px;--shadow-sm:0 2px 8px #00000040;--shadow-md:0 8px 24px #00000059;--shadow-lg:0 16px 48px #00000080;--shadow-glow:0 0 25px #8b5cf640}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-app);color:var(--text-main);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15% 10%,#7c3aed1f 0%,#0000 40%),radial-gradient(circle at 85% 25%,#ec489914 0%,#0000 40%),radial-gradient(circle at 50% 80%,#06b6d412 0%,#0000 50%);background-attachment:fixed;min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{border-radius:var(--radius-pill);background:#ffffff26}::-webkit-scrollbar-thumb:hover{background:#ffffff40}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em}button,input,select,textarea{font-family:inherit}.glass-panel{background:var(--bg-glass-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:border-color .2s,box-shadow .2s}.glass-panel:hover{border-color:var(--border-medium)}.btn{border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 4px 15px #7c3aed59}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px #a855f780}.btn-secondary{border-color:var(--border-medium);color:var(--text-main);background:#ffffff0d}.btn-secondary:hover{background:#ffffff1a;border-color:#ffffff40}.btn-success{background:var(--grad-emerald);color:#fff;box-shadow:0 4px 14px #10b9814d}.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 20px #10b98173}.btn-danger{color:#fb7185;background:#f43f5e26;border-color:#f43f5e4d}.btn-danger:hover{background:#f43f5e40;border-color:#fb7185}.btn-sm{border-radius:var(--radius-sm);padding:6px 12px;font-size:.8rem}.badge{text-transform:uppercase;letter-spacing:.04em;border-radius:var(--radius-pill);align-items:center;gap:5px;padding:3px 9px;font-size:.72rem;font-weight:700;display:inline-flex}.badge-purple{color:#c084fc;background:#a855f726;border:1px solid #a855f74d}.badge-emerald{color:#34d399;background:#10b98126;border:1px solid #10b9814d}.badge-amber{color:#fbbf24;background:#f59e0b26;border:1px solid #f59e0b4d}.badge-blue{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f64d}.form-group{margin-bottom:16px}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-size:.82rem;font-weight:600;display:block}.form-input,.form-select,.form-textarea{background:var(--bg-glass-input);border:1px solid var(--border-medium);border-radius:var(--radius-md);width:100%;color:var(--text-main);outline:none;padding:10px 14px;font-size:.92rem;transition:all .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #8b5cf633}.form-textarea{font-family:var(--font-mono);resize:vertical;font-size:.85rem}.terminal-window{border-radius:var(--radius-md);background:#06080d;border:1px solid #ffffff14;flex-direction:column;display:flex;overflow:hidden;box-shadow:inset 0 2px 10px #000000b3}.terminal-header{background:#0a0e17;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.terminal-dots{gap:6px;display:flex}.terminal-dot{border-radius:50%;width:10px;height:10px}.dot-red{background:#ef4444}.dot-yellow{background:#f59e0b}.dot-green{background:#10b981}.terminal-body{font-family:var(--font-mono);color:#e2e8f0;white-space:pre-wrap;word-break:break-all;max-height:380px;padding:14px;font-size:.85rem;line-height:1.5;overflow-y:auto}.terminal-line{margin-bottom:4px}.terminal-line-success{color:#34d399}.terminal-line-warning{color:#fbbf24}.terminal-line-error{color:#f87171}.terminal-line-cmd{color:#818cf8;font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%,to{opacity:.4}50%{opacity:.8}}.animate-fade-in{animation:.3s cubic-bezier(.16,1,.3,1) forwards fadeIn}.pulse-indicator{border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulseGlow;display:inline-block}.app-shell{flex-direction:column;min-height:100vh;display:flex}.navbar-container{z-index:50;-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);background:#080b12d9;padding:12px 24px;position:sticky;top:0}.navbar-inner{justify-content:space-between;align-items:center;gap:20px;max-width:1500px;margin:0 auto;display:flex}.brand-section{align-items:center;gap:12px;display:flex}.brand-logo{border-radius:var(--radius-md);background:var(--grad-brand);color:#fff;justify-content:center;align-items:center;width:40px;height:40px;display:flex;box-shadow:0 4px 16px #7c3aed59}.brand-title{font-family:var(--font-heading);color:var(--text-main);font-size:1.12rem;font-weight:700;line-height:1.2}.brand-subtitle{color:var(--text-muted);font-size:.74rem}.nav-tabs{border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:#ffffff08;align-items:center;gap:6px;padding:4px;display:flex}.nav-tab-btn{color:var(--text-secondary);border-radius:var(--radius-pill);cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:8px 16px;font-size:.86rem;font-weight:600;transition:all .2s;display:flex}.nav-tab-btn:hover{color:var(--text-main);background:#ffffff0d}.nav-tab-active{box-shadow:0 2px 10px #7c3aed4d;color:#fff!important;background:var(--grad-brand)!important}.navbar-actions{align-items:center;gap:12px;display:flex}.mode-toggle-pill{border-radius:var(--radius-pill);cursor:pointer;border:1px solid #0000;align-items:center;gap:7px;padding:7px 14px;font-size:.8rem;font-weight:700;transition:all .2s;display:flex}.pill-dev{color:#fbbf24;background:#f59e0b26;border-color:#f59e0b66}.pill-dev:hover{background:#f59e0b40;box-shadow:0 0 14px #f59e0b4d}.pill-prod{color:#34d399;background:#10b98126;border-color:#10b98166}.pill-prod:hover{background:#10b98140;box-shadow:0 0 14px #10b9814d}.main-content{flex:1;width:100%;max-width:1500px;margin:0 auto;padding:28px 24px 60px}.view-container{width:100%}.view-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px;display:flex}.view-title{color:var(--text-main);margin-bottom:4px;font-size:1.65rem;font-weight:700}.view-description{color:var(--text-secondary);max-width:720px;font-size:.92rem}.view-actions{align-items:center;gap:12px;display:flex}.operations-grid{grid-template-columns:460px 1fr;gap:24px;display:grid}@media (width<=1100px){.operations-grid{grid-template-columns:1fr}}.form-panel{padding:24px}.action-selector{flex-direction:column;gap:10px;display:flex}.action-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;text-align:left;background:#ffffff05;align-items:center;gap:14px;padding:14px 16px;transition:all .2s;display:flex}.action-btn:hover{border-color:var(--border-medium);color:var(--text-main);background:#ffffff0d}.action-active{box-shadow:0 4px 16px #7c3aed33;border-color:var(--accent-primary)!important;color:#fff!important;background:#7c3aed1f!important}.action-btn-title{font-size:.95rem;font-weight:700}.action-btn-desc{color:var(--text-muted);font-size:.78rem}.panel-divider{background:var(--border-subtle);height:1px;margin:20px 0}.action-params{flex-direction:column;gap:16px;display:flex}.radio-pills{gap:8px;display:flex}.radio-pill{border-radius:var(--radius-md);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:pointer;background:#ffffff0a;flex:1;padding:8px 12px;font-size:.8rem;font-weight:600;transition:all .2s}.pill-active-dev{color:#fbbf24!important;background:#f59e0b33!important;border-color:#fbbf24!important}.pill-active-prod{color:#34d399!important;background:#10b98133!important;border-color:#34d399!important}.form-hint{color:var(--text-muted);margin-top:6px;font-size:.78rem;line-height:1.4;display:block}.run-action-btn{width:100%;margin-top:8px;padding:14px;font-size:.98rem}.terminal-container{flex-direction:column;display:flex}.terminal-title{color:var(--text-secondary);align-items:center;gap:8px;font-size:.82rem;font-weight:600;display:flex}.status-badge{border-radius:var(--radius-pill);padding:2px 7px;font-size:.7rem}.status-running{color:#60a5fa;background:#3b82f633;animation:1.5s ease-in-out infinite pulseGlow}.status-success{color:#34d399;background:#10b98133}.status-error{color:#f87171;background:#f43f5e33}.terminal-controls{gap:6px;display:flex}.btn-icon{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.btn-icon:hover{color:var(--text-main);background:#ffffff14}.btn-icon-danger{color:#f87171;cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.btn-icon-danger:hover{background:#f43f5e33}.theme-selector-strip{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding:10px 18px;display:flex}.theme-pills{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.theme-pill{border-radius:var(--radius-pill);border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;background:#ffffff0a;align-items:center;gap:6px;padding:7px 14px;font-size:.82rem;font-weight:600;transition:all .2s;display:flex}.theme-pill:hover{color:var(--text-main);background:#ffffff14}.theme-pill-active{border-color:var(--accent-primary)!important;color:#fff!important;background:#7c3aed40!important}.pill-badge{color:#f472b6;border-radius:var(--radius-pill);background:#ec489933;padding:1px 6px;font-size:.68rem}.tab-pill-group{border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:#0000004d;gap:4px;padding:4px;display:flex}.tab-pill{border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:6px 14px;font-size:.8rem;font-weight:600;transition:all .2s;display:flex}.tab-pill:hover{color:var(--text-main)}.tab-pill-active{box-shadow:var(--shadow-sm);background:var(--bg-surface-elevated)!important;color:#fff!important}.theme-studio-grid{grid-template-columns:1fr 400px;gap:24px;display:grid}@media (width<=1200px){.theme-studio-grid{grid-template-columns:1fr}}.colors-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;display:grid}.color-token-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff05;align-items:center;gap:12px;padding:12px;transition:all .2s;display:flex}.color-token-card:hover{border-color:var(--border-medium);background:#ffffff0a}.color-swatch-wrapper{flex-shrink:0;width:44px;height:44px;position:relative}.color-picker-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.color-swatch-preview{border-radius:var(--radius-sm);border:1px solid #ffffff26;width:100%;height:100%;box-shadow:inset 0 2px 4px #0000004d}.color-details{flex:1;min-width:0}.token-name-input{color:var(--text-main);background:0 0;border:none;border-bottom:1px solid #0000;outline:none;width:100%;font-size:.88rem;font-weight:600}.token-name-input:focus{border-color:var(--accent-primary)}.token-key-display{font-family:var(--font-mono);color:var(--text-muted);margin:2px 0;font-size:.72rem}.token-hex-input{font-family:var(--font-mono);color:var(--accent-primary);background:0 0;border:none;outline:none;width:90px;font-size:.78rem}.grid-2-col{grid-template-columns:1fr 1fr;gap:16px;display:grid}.grid-3-col{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}@media (width<=768px){.grid-2-col,.grid-3-col{grid-template-columns:1fr}}.preview-sticky-card{position:sticky;top:90px;overflow:hidden}.preview-card-header{border-bottom:1px solid var(--border-subtle);background:#0003;align-items:center;gap:8px;padding:12px 18px;font-size:.85rem;font-weight:600;display:flex}.preview-canvas{justify-content:center;align-items:center;min-height:380px;padding:32px 24px;display:flex}.preview-content-box{width:100%;max-width:320px}.preview-tag{text-transform:uppercase;border-radius:var(--radius-pill);margin-bottom:14px;padding:4px 10px;font-size:.72rem;font-weight:700;display:inline-block}.preview-heading{margin-bottom:12px;font-size:1.35rem;line-height:1.3}.preview-paragraph{margin-bottom:20px;font-size:.85rem;line-height:1.5}.preview-button-row{gap:10px;margin-bottom:24px;display:flex}.preview-btn-sample{border-radius:var(--radius-md);cursor:pointer;border:none;padding:9px 16px;font-size:.82rem;font-weight:600}.preview-btn-sample-secondary{border-radius:var(--radius-md);cursor:pointer;background:0 0;border:1px solid;padding:8px 15px;font-size:.82rem;font-weight:600}.preview-swatches-row{border-top:1px solid #ffffff1a;gap:8px;padding-top:16px;display:flex}.preview-micro-swatch{border:1px solid #fff3;border-radius:50%;width:22px;height:22px}.pages-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px;display:grid}.page-card{flex-direction:column;justify-content:space-between;padding:20px;display:flex}.page-card-header{justify-content:space-between;align-items:flex-start;margin-bottom:12px;display:flex}.page-title{font-size:1.15rem;font-weight:700}.page-slug{font-family:var(--font-mono);color:var(--text-muted);margin-top:2px;font-size:.8rem}.card-actions{gap:6px;display:flex}.featured-image-tag{color:var(--accent-cyan);border-radius:var(--radius-sm);background:#06b6d41a;align-items:center;gap:6px;margin-bottom:14px;padding:4px 10px;font-size:.76rem;display:inline-flex}.pattern-sequence-section{border-radius:var(--radius-md);background:#00000040;padding:12px}.pattern-sequence-title{text-transform:uppercase;color:var(--text-muted);align-items:center;gap:6px;margin-bottom:10px;font-size:.78rem;font-weight:700;display:flex}.pattern-pills-flow{flex-direction:column;gap:6px;display:flex}.pattern-step-pill{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:#ffffff0a;align-items:center;gap:10px;padding:6px 12px;display:flex}.step-num{font-family:var(--font-mono);color:var(--accent-primary);width:16px;font-size:.72rem;font-weight:700}.pattern-name{font-family:var(--font-mono);color:var(--text-main);font-size:.8rem}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background:#000000bf;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-card{width:100%;max-width:540px;box-shadow:var(--shadow-lg);max-height:90vh;padding:28px;overflow-y:auto}.modal-lg{max-width:720px}.modal-title{margin-bottom:6px;font-size:1.3rem;font-weight:700}.modal-desc{color:var(--text-muted);margin-bottom:20px;font-size:.85rem}.modal-actions{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.checkbox-card{background:var(--bg-glass-input);border:1px solid var(--border-medium);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:12px;padding:10px 14px;display:flex}.checkbox-card input{accent-color:var(--accent-primary);width:18px;height:18px}.pattern-builder-section{border-radius:var(--radius-md);background:#00000040;padding:16px}.pattern-reorder-list{flex-direction:column;gap:8px;display:flex}.pattern-reorder-item{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff0a;align-items:center;gap:12px;padding:8px 12px;display:flex}.order-badge{font-family:var(--font-mono);color:var(--accent-primary);border-radius:var(--radius-sm);background:#8b5cf626;padding:2px 7px;font-size:.75rem;font-weight:700}.pattern-label{font-family:var(--font-mono);flex:1;font-size:.85rem}.reorder-controls{gap:4px;display:flex}.patterns-browser-grid{grid-template-columns:360px 1fr;gap:24px;display:grid}@media (width<=900px){.patterns-browser-grid{grid-template-columns:1fr}}.patterns-list-col{flex-direction:column;max-height:750px;padding:16px;display:flex}.search-bar-wrapper{margin-bottom:14px;position:relative}.search-icon{color:var(--text-muted);position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-input{background:var(--bg-glass-input);border:1px solid var(--border-medium);border-radius:var(--radius-md);width:100%;color:var(--text-main);outline:none;padding:9px 12px 9px 36px;font-size:.85rem}.search-input:focus{border-color:var(--accent-primary)}.patterns-nav-list{flex-direction:column;flex:1;gap:6px;display:flex;overflow-y:auto}.pattern-nav-item{border-radius:var(--radius-md);cursor:pointer;background:#ffffff05;border:1px solid #0000;justify-content:space-between;align-items:center;padding:10px 14px;transition:all .2s;display:flex}.pattern-nav-item:hover{background:#ffffff0d}.pattern-nav-active{border-color:var(--accent-primary)!important;background:#7c3aed26!important}.pattern-nav-key{font-family:var(--font-mono);color:var(--text-main);margin-bottom:2px;font-size:.85rem;font-weight:600}.pattern-inspector-col{flex-direction:column;min-height:600px;padding:24px;display:flex}.inspector-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:flex-start;margin-bottom:18px;padding-bottom:14px;display:flex}.inspector-title{font-family:var(--font-mono);font-size:1.2rem;font-weight:700}.code-viewer-container{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#06080d;flex:1;overflow:auto}.code-block{font-family:var(--font-mono);color:#a5b4fc;padding:18px;font-size:.82rem;line-height:1.6}.menus-workspace-grid{grid-template-columns:340px 1fr;gap:24px;display:grid}@media (width<=900px){.menus-workspace-grid{grid-template-columns:1fr}}.menu-list-selector{flex-direction:column;gap:6px;display:flex}.menu-select-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;text-align:left;background:#ffffff08;align-items:center;gap:10px;padding:10px 14px;font-size:.88rem;font-weight:600;transition:all .2s;display:flex}.menu-select-btn:hover{color:var(--text-main);background:#ffffff0f}.menu-select-active{border-color:var(--accent-primary)!important;color:#fff!important;background:#7c3aed26!important}.menu-items-tree{flex-direction:column;gap:10px;display:flex}.menu-tree-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff08;justify-content:space-between;align-items:center;padding:12px 16px;transition:all .2s;display:flex}.menu-tree-card:hover{border-color:var(--border-medium);background:#ffffff0d}.menu-item-left{align-items:center;gap:12px;display:flex}.components-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px;display:grid}.code-editor-box{color:#38bdf8;border-color:var(--border-subtle);background:#06080d;font-size:.85rem;line-height:1.5}.error-alert-banner{border-radius:var(--radius-md);color:#fb7185;background:#f43f5e26;border:1px solid #f43f5e59;align-items:center;gap:10px;padding:10px 14px;font-size:.85rem;display:flex}.flex{display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.items-center{align-items:center}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.space-y-6>*+*{margin-top:24px}.text-purple{color:#a855f7}.text-cyan{color:#06b6d4}.text-emerald{color:#10b981}.truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.spin-icon{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}