.auth-container{min-height:100vh;padding:var(--spacing-lg);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.auth-background{z-index:0;background:var(--bg-primary);position:absolute;inset:0}.grid-pattern{background-image:linear-gradient(var(--border-default) 1px, transparent 1px), linear-gradient(90deg, var(--border-default) 1px, transparent 1px);opacity:.3;background-size:50px 50px;animation:20s linear infinite gridMove;position:absolute;inset:0}@keyframes gridMove{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.auth-content{z-index:1;gap:var(--spacing-2xl);grid-template-columns:1fr 1fr;align-items:center;width:100%;max-width:1200px;display:grid;position:relative}.auth-card{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:0 20px 60px #00000080}.auth-header{text-align:center;margin-bottom:var(--spacing-2xl)}.logo-large{justify-content:center;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md);display:flex}.logo-icon-large{background:var(--accent-blue);border-radius:var(--radius-md);width:48px;height:48px;font-family:var(--font-mono);justify-content:center;align-items:center;font-size:24px;font-weight:700;display:flex;box-shadow:0 0 20px #3b82f64d}.logo-text-large{font-family:var(--font-mono);letter-spacing:-.02em;font-size:28px;font-weight:700}.auth-subtitle{font-family:var(--font-mono);color:var(--text-secondary);font-size:14px}.auth-form{gap:var(--spacing-lg);flex-direction:column;display:flex}.form-label{font-family:var(--font-mono);color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600}.form-hint{font-family:var(--font-mono);color:var(--text-muted);font-size:11px}.btn-full{width:100%;padding:var(--spacing-md) var(--spacing-lg);margin-top:var(--spacing-sm);justify-content:center;font-size:15px}.spinner-small{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}.error-banner{border:1px solid var(--accent-red);border-radius:var(--radius-md);padding:var(--spacing-md);align-items:center;gap:var(--spacing-sm);font-family:var(--font-mono);color:var(--accent-red);background:#ef44441a;font-size:13px;display:flex}.error-icon{font-size:16px}.auth-footer{margin-top:var(--spacing-lg);text-align:center;padding-top:var(--spacing-lg);border-top:1px solid var(--border-default)}.auth-footer-text{font-family:var(--font-sans);color:var(--text-secondary);font-size:14px}.auth-link{color:var(--accent-blue);transition:color var(--transition-fast);font-weight:600;text-decoration:none}.auth-link:hover{color:#60a5fa;text-decoration:underline}.auth-note{margin-top:var(--spacing-lg);justify-content:center;align-items:center;gap:var(--spacing-sm);font-family:var(--font-mono);color:var(--text-muted);font-size:12px;display:flex}.auth-features{gap:var(--spacing-xl);flex-direction:column;display:flex}.feature-item{gap:var(--spacing-md);align-items:flex-start;display:flex}.feature-icon{filter:grayscale(.3);flex-shrink:0;font-size:32px}.feature-title{font-family:var(--font-mono);color:var(--text-primary);margin-bottom:var(--spacing-xs);font-size:16px;font-weight:700}.feature-description{font-family:var(--font-sans);color:var(--text-secondary);font-size:14px;line-height:1.5}@media (width<=968px){.auth-content{grid-template-columns:1fr}.auth-features{display:none}}@media (width<=480px){.auth-container{padding:var(--spacing-md)}.auth-card{padding:var(--spacing-lg)}.logo-icon-large{width:40px;height:40px;font-size:20px}.logo-text-large{font-size:24px}}.project-card{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all var(--transition-base);position:relative;overflow:hidden}.project-card:before{content:"";background:var(--status-stopped);width:4px;height:100%;transition:all var(--transition-base);position:absolute;top:0;left:0}.project-card.running:before{background:var(--status-running);box-shadow:0 0 20px var(--status-running)}.project-card.deploying:before{background:var(--status-deploying);animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.project-card:hover{border-color:var(--border-hover)}.project-header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:flex-start;display:flex}.project-info{flex:1;min-width:0}.project-name{font-family:var(--font-mono);color:var(--text-primary);margin-bottom:var(--spacing-xs);font-size:18px;font-weight:700}.project-url{font-family:var(--font-mono);color:var(--accent-blue);align-items:center;gap:var(--spacing-xs);transition:color var(--transition-fast);word-break:break-all;font-size:13px;text-decoration:none;display:inline-flex}.project-url:hover{color:#60a5fa;text-decoration:underline}.status-badge{font-family:var(--font-mono);border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-flex}.status-dot{border-radius:50%;width:6px;height:6px}.status-running .status-dot{background:var(--status-running);box-shadow:0 0 8px var(--status-running);animation:2s infinite breathe}.status-deploying .status-dot{background:var(--status-deploying);animation:2s infinite pulse}.status-stopped .status-dot{background:var(--status-stopped)}@keyframes breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}.status-running{color:var(--status-running);border:1px solid var(--status-running);background:#10b98126}.status-deploying{color:var(--status-deploying);border:1px solid var(--status-deploying);background:#f59e0b26}.status-stopped{color:var(--status-stopped);border:1px solid var(--status-stopped);background:#6b728026}.project-meta{gap:var(--spacing-lg);margin:var(--spacing-md) 0;padding:var(--spacing-md) 0;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);flex-wrap:wrap;display:flex}.meta-item{flex-direction:column;gap:4px;min-width:0;display:flex}.meta-label{font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:11px}.meta-value{font-family:var(--font-mono);color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.terminal-preview{border-radius:var(--radius-md);padding:var(--spacing-md);font-family:var(--font-mono);color:#0f0;margin-top:var(--spacing-md);border:1px solid var(--border-default);background:#000;max-height:150px;font-size:12px;overflow-y:auto}.terminal-line{opacity:0;margin-bottom:4px;animation:.3s forwards fadeIn}.terminal-line:first-child{animation-delay:0s}.terminal-line:nth-child(2){animation-delay:.1s}.terminal-line:nth-child(3){animation-delay:.2s}@keyframes fadeIn{to{opacity:1}}.terminal-prompt{color:#0ff}.terminal-success{color:#0f0}.terminal-error{color:red}.terminal-info{color:#888}.project-actions{gap:var(--spacing-sm);margin-top:var(--spacing-md);flex-wrap:wrap;display:flex}.btn{font-family:var(--font-sans);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);align-items:center;gap:var(--spacing-sm);border:none;justify-content:center;font-size:14px;font-weight:500;display:inline-flex}.btn-primary{background:var(--accent-blue);color:#fff}.btn-primary:hover{background:#2563eb;box-shadow:0 0 12px #3b82f699}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-default)}.btn-secondary:hover{background:var(--bg-hover);box-shadow:0 0 12px #ffffff26}.btn-danger{color:var(--accent-red);border:1px solid var(--accent-red);background:0 0}.btn-danger:hover{color:#fff;background:#dc2626;box-shadow:0 0 12px #ef444499}.btn-icon{width:32px;height:32px;padding:0}@media (width<=768px){.project-meta{gap:var(--spacing-sm);flex-direction:column}.meta-item{width:100%}}.dashboard-container{max-width:1400px;padding:var(--spacing-xl);min-height:100vh;margin:0 auto}.dashboard-header{padding:var(--spacing-lg) 0;border-bottom:1px solid var(--border-default);margin-bottom:var(--spacing-2xl);justify-content:space-between;align-items:center;display:flex}.logo{align-items:center;gap:var(--spacing-md);display:flex}.logo-icon{background:var(--accent-blue);border-radius:var(--radius-sm);width:32px;height:32px;font-family:var(--font-mono);justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex}.logo-text{font-family:var(--font-mono);letter-spacing:-.02em;font-size:20px;font-weight:700}.header-actions{gap:var(--spacing-md);align-items:center;display:flex}.user-info{font-family:var(--font-mono);color:var(--text-secondary);padding-right:var(--spacing-md);border-right:1px solid var(--border-default);font-size:14px}.stats-bar{gap:var(--spacing-md);margin-bottom:var(--spacing-2xl);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.stat-card{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all var(--transition-base)}.stat-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}.stat-label{font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--spacing-sm);font-size:12px}.stat-value{font-family:var(--font-mono);color:var(--text-primary);font-size:32px;font-weight:700;line-height:1}.section-header{margin-bottom:var(--spacing-lg);justify-content:space-between;align-items:center;display:flex}.section-title{font-family:var(--font-mono);color:var(--text-primary);font-size:18px;font-weight:700}.projects-grid{gap:var(--spacing-md);display:grid}.loading-state,.error-state{text-align:center;padding:var(--spacing-2xl);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-default)}.loading-spinner{border:4px solid var(--border-default);border-top-color:var(--accent-blue);width:48px;height:48px;margin:0 auto var(--spacing-md);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-state p{color:var(--accent-red);margin-bottom:var(--spacing-md)}.empty-state{text-align:center;padding:var(--spacing-2xl) var(--spacing-xl);background:var(--bg-secondary);border:2px dashed var(--border-default);border-radius:var(--radius-lg)}.empty-icon{margin-bottom:var(--spacing-lg);opacity:.3;font-size:64px}.empty-title{font-family:var(--font-mono);margin-bottom:var(--spacing-sm);font-size:20px;font-weight:700}.empty-description{color:var(--text-secondary);margin-bottom:var(--spacing-lg);max-width:400px;margin-left:auto;margin-right:auto}@media (width<=768px){.dashboard-container{padding:var(--spacing-md)}.dashboard-header{gap:var(--spacing-md);flex-direction:column;align-items:flex-start}.header-actions{justify-content:space-between;width:100%}.user-info{border-right:none;padding-right:0}.stats-bar{grid-template-columns:1fr}.section-header{gap:var(--spacing-md);flex-direction:column;align-items:flex-start}}.create-project-container{background:var(--bg-primary);min-height:100vh}.create-project-header{border-bottom:1px solid var(--border-default);background:var(--bg-secondary)}.header-content{max-width:1200px;padding:var(--spacing-xl);margin:0 auto}.back-button{font-family:var(--font-mono);color:var(--text-secondary);cursor:pointer;padding:var(--spacing-sm) 0;margin-bottom:var(--spacing-md);transition:color var(--transition-fast);background:0 0;border:none;font-size:14px}.back-button:hover{color:var(--text-primary)}.page-title{font-family:var(--font-mono);color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:32px;font-weight:700}.page-subtitle{font-family:var(--font-sans);color:var(--text-secondary);font-size:16px}.create-project-content{max-width:1200px;padding:var(--spacing-2xl);gap:var(--spacing-2xl);grid-template-columns:1fr 1fr;align-items:start;margin:0 auto;display:grid}.form-section{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.project-form{gap:var(--spacing-lg);flex-direction:column;display:flex}.form-group{gap:var(--spacing-sm);flex-direction:column;display:flex}.form-label{align-items:baseline;gap:var(--spacing-xs);display:flex}.label-text{font-family:var(--font-mono);color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600}.label-required{color:var(--accent-red);font-size:14px}.label-optional{font-family:var(--font-mono);color:var(--text-muted);text-transform:lowercase;font-size:11px;font-weight:400}.form-input{font-family:var(--font-mono);padding:var(--spacing-md);background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast);font-size:14px}.form-input:focus{border-color:var(--accent-blue);outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-input:disabled{opacity:.5;cursor:not-allowed}.form-input::placeholder{color:var(--text-muted)}.form-textarea{font-family:var(--font-sans);padding:var(--spacing-md);background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast);resize:vertical;min-height:80px;font-size:14px}.form-textarea:focus{border-color:var(--accent-blue);outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-textarea:disabled{opacity:.5;cursor:not-allowed}.form-hint{font-family:var(--font-sans);color:var(--text-muted);font-size:12px;line-height:1.4}.hint-mono{font-family:var(--font-mono);color:var(--accent-blue)}code{font-family:var(--font-mono);background:var(--bg-tertiary);border-radius:var(--radius-sm);color:var(--accent-blue);padding:2px 6px;font-size:12px}.form-actions{gap:var(--spacing-md);margin-top:var(--spacing-md);display:flex}.form-actions .btn{flex:1}.deploy-section{top:var(--spacing-xl);position:sticky}.deploy-status{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.status-header{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-default);justify-content:space-between;align-items:center;display:flex}.status-title{font-family:var(--font-mono);color:var(--text-primary);font-size:16px;font-weight:700}.status-indicator{align-items:center;gap:var(--spacing-sm);font-family:var(--font-mono);color:var(--text-secondary);font-size:12px;display:flex}.status-dot{background:var(--status-deploying);border-radius:50%;width:8px;height:8px}.status-dot.deploying{animation:2s infinite pulse}.terminal-output{border-radius:var(--radius-md);padding:var(--spacing-md);font-family:var(--font-mono);background:#000;min-height:300px;max-height:500px;font-size:13px;overflow-y:auto}.terminal-line{gap:var(--spacing-sm);opacity:0;margin-bottom:6px;animation:.3s forwards fadeIn;display:flex}.terminal-prompt{color:#0ff;flex-shrink:0}.terminal-text{color:#0f0;flex:1}.terminal-info .terminal-text{color:#888}.terminal-success .terminal-text{color:#0f0}.terminal-error .terminal-text{color:red}.terminal-cursor{color:#0f0;margin-top:6px;animation:1s infinite blink}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.info-section{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.info-title{font-family:var(--font-mono);color:var(--text-primary);margin-bottom:var(--spacing-lg);font-size:18px;font-weight:700}.info-steps{gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);flex-direction:column;display:flex}.info-step{gap:var(--spacing-md);display:flex}.step-number{background:var(--bg-tertiary);border:1px solid var(--border-default);width:32px;height:32px;font-family:var(--font-mono);color:var(--accent-blue);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.step-content{flex:1}.step-title{font-family:var(--font-mono);color:var(--text-primary);margin-bottom:var(--spacing-xs);font-size:14px;font-weight:600}.step-description{font-family:var(--font-sans);color:var(--text-secondary);font-size:13px;line-height:1.5}.info-note{background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--spacing-md);gap:var(--spacing-md);display:flex}.note-icon{flex-shrink:0;font-size:24px}.note-title{font-family:var(--font-mono);color:var(--text-primary);margin-bottom:var(--spacing-xs);font-size:13px;font-weight:600}.note-text{font-family:var(--font-sans);color:var(--text-secondary);font-size:13px;line-height:1.5}@media (width<=968px){.create-project-content{grid-template-columns:1fr}.deploy-section{position:static}.info-section{display:none}}@media (width<=640px){.create-project-content,.header-content{padding:var(--spacing-md)}.page-title{font-size:24px}.form-section,.deploy-status{padding:var(--spacing-md)}.form-actions{flex-direction:column}.form-actions .btn{width:100%}}*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0e14;--bg-secondary:#111820;--bg-tertiary:#1a2332;--bg-hover:#222d40;--text-primary:#e6e9ef;--text-secondary:#9ca3af;--text-muted:#6b7280;--border-default:#2a3544;--border-hover:#3d4b5f;--accent-blue:#3b82f6;--accent-green:#10b981;--accent-amber:#f59e0b;--accent-red:#ef4444;--status-running:#10b981;--status-stopped:#6b7280;--status-deploying:#f59e0b;--status-error:#ef4444;--font-mono:"JetBrains Mono", monospace;--font-sans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--transition-fast:.15s ease;--transition-base:.2s ease}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}#root{min-height:100vh}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}