:root{--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: 1rem;--space-4: 1.5rem;--space-5: 2rem;--space-6: 3rem;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 2rem;--color-dark: #0a0a1a;--color-dark-2: #111125;--color-dark-3: #1a1a35;--color-primary: #00f3ff;--color-primary-glow: rgba(0, 243, 255, .5);--color-secondary: #9d4edd;--color-accent: #ff6b6b;--color-success: #51cf66;--color-text: #f8f9fa;--color-text-dim: #adb5bd;--border-radius: 8px;--transition: all .3s ease;--glow: 0 0 20px var(--color-primary-glow)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:Orbitron,Courier New,monospace;background:var(--color-dark);color:var(--color-text);overflow:hidden;height:100vh;letter-spacing:.5px}#root{height:100vh}.glow-text{text-shadow:0 0 10px var(--color-primary)}.glow-box{box-shadow:var(--glow)}.glow-border{border:1px solid var(--color-primary);box-shadow:inset 0 0 10px var(--color-primary-glow),var(--glow)}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}.btn{background:#00f3ff1a;border:1px solid var(--color-primary);color:var(--color-primary);padding:var(--space-2) var(--space-4);border-radius:var(--border-radius);cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:1px;transition:var(--transition);text-transform:uppercase;position:relative;overflow:hidden}.btn:hover{background:#00f3ff33;box-shadow:var(--glow);transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn.active{background:#00f3ff4d;box-shadow:var(--glow)}.card{background:#1a1a35e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,243,255,.2);border-radius:var(--border-radius);padding:var(--space-4);transition:var(--transition)}.card:hover{border-color:var(--color-primary);box-shadow:var(--glow)}.scanline{position:fixed;top:0;left:0;width:100%;height:2px;background:linear-gradient(to bottom,transparent,var(--color-primary),transparent);animation:scanline 8s linear infinite;z-index:1000;pointer-events:none;opacity:.3}.static-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0px,rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px),repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:1;opacity:.1}@media (max-width: 768px){html{font-size:14px}}@media (max-width: 480px){html{font-size:12px}}.text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flex-center{display:flex;align-items:center;justify-content:center}.grid-responsive{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-3)}.scrollbar-thin::-webkit-scrollbar{width:4px;height:4px}.scrollbar-thin::-webkit-scrollbar-track{background:#0000004d}.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:2px}.scrollbar-thin::-webkit-scrollbar-thumb:hover{background:var(--color-secondary)}.app{position:relative;height:100vh;width:100vw;overflow:hidden;background:radial-gradient(ellipse at center,#0a0a1a,#000 70%)}.canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.navigation{position:fixed;top:0;left:0;right:0;z-index:100;background:#0a0a1ae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,243,255,.3);padding:var(--space-3);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.nav-brand{display:flex;align-items:center;gap:var(--space-2)}.nav-icon{font-size:1.5rem;animation:float 3s ease-in-out infinite}.nav-title{font-size:var(--font-lg);font-weight:700;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px}.nav-terminals{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;flex:1}.nav-button{background:#00f3ff0d;border:1px solid rgba(0,243,255,.2);color:var(--color-text);padding:var(--space-2) var(--space-3);border-radius:6px;cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:1px;transition:var(--transition);display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-sm);position:relative;overflow:hidden}.nav-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,243,255,.1),transparent);transition:.5s}.nav-button:hover:before{left:100%}.nav-button:hover{background:#00f3ff1a;border-color:var(--color-primary);transform:translateY(-2px)}.nav-button.active{background:#00f3ff33;border-color:var(--color-primary);box-shadow:var(--glow);color:var(--color-primary)}.nav-button-icon{font-size:1.2rem}.nav-controls{display:flex;gap:var(--space-2)}.terminal-wrapper{position:fixed;top:80px;left:50%;transform:translate(-50%);width:calc(100% - 2rem);max-width:1200px;z-index:50;padding:0 var(--space-3)}.terminal{background:#111125f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(0,243,255,.3);border-radius:12px;overflow:hidden;box-shadow:0 0 30px #00f3ff33,inset 0 0 50px #00f3ff0d;position:relative}.terminal:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent)}.terminal-header{background:#0009;padding:var(--space-3) var(--space-4);border-bottom:1px solid rgba(0,243,255,.2);display:flex;justify-content:space-between;align-items:center;position:relative}.terminal-header:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);opacity:.5}.terminal-header h2{font-size:var(--font-xl);font-weight:700;color:var(--color-primary);letter-spacing:1px;text-shadow:0 0 10px var(--color-primary-glow)}.terminal-status{color:var(--color-success);font-family:Courier New,monospace;font-weight:600;font-size:var(--font-sm);animation:pulse 2s infinite}.terminal-content{padding:var(--space-4);max-height:calc(70vh - 100px);overflow-y:auto;scrollbar-width:thin}.status-bar{position:fixed;bottom:0;left:0;right:0;background:#0a0a1af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(0,243,255,.3);padding:var(--space-2) var(--space-3);display:flex;justify-content:space-between;align-items:center;font-family:Courier New,monospace;font-size:var(--font-sm);z-index:100}.status-text{color:var(--color-success);letter-spacing:1px}.status-time{color:var(--color-primary);font-weight:600}.loading-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--color-dark);display:flex;justify-content:center;align-items:center;z-index:1000}.loading-content{text-align:center;width:100%;max-width:600px;padding:var(--space-4)}.loading-logo{font-size:4rem;margin-bottom:var(--space-6);animation:float 2s ease-in-out infinite;filter:drop-shadow(0 0 20px var(--color-primary))}.loading-text{font-family:Courier New,monospace;font-size:var(--font-lg);letter-spacing:2px;margin-bottom:var(--space-6);position:relative}.loading-line{background:linear-gradient(90deg,transparent,rgba(0,243,255,.1),transparent);border-left:2px solid var(--color-primary);padding:var(--space-3);margin-bottom:var(--space-2);text-align:left;overflow:hidden;position:relative;color:var(--color-primary)}.loading-line:before{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:linear-gradient(90deg,transparent,rgba(0,243,255,.2),transparent);animation:loading-line 2s ease-out forwards}@keyframes loading-line{to{width:100%}}.loading-progress{height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;position:relative}.progress-bar{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));position:relative;overflow:hidden}.progress-bar:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:progress-shine 1s infinite}@keyframes progress-shine{to{left:100%}}@media (max-width: 1024px){.navigation{flex-direction:column;gap:var(--space-2);padding:var(--space-2)}.nav-brand{order:1}.nav-terminals{order:2;width:100%}.nav-controls{order:3}.terminal-wrapper{top:120px}}@media (max-width: 768px){.terminal-wrapper{top:140px;width:calc(100% - 1rem);padding:0 var(--space-2)}.terminal-content{padding:var(--space-3);max-height:calc(65vh - 100px)}.nav-button{padding:var(--space-1) var(--space-2);font-size:var(--font-xs)}.nav-button-icon{font-size:1rem}}@media (max-width: 480px){.terminal-wrapper{top:160px}.terminal-content{max-height:calc(60vh - 100px)}.status-bar{flex-direction:column;gap:var(--space-1);text-align:center}}@media (max-height: 600px){.terminal-wrapper{top:60px}.terminal-content{max-height:calc(80vh - 80px);padding:var(--space-2)}}.terminal-1 .card:hover{border-color:#00f3ff;box-shadow:0 0 20px #00f3ff4d}.terminal-2 .card{transition:all .3s ease}.terminal-2 .card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #00f3ff33}.terminal-3 input:focus{border-color:#00f3ff;box-shadow:0 0 10px #00f3ff4d}.terminal-4 .card{background:#111125e6}.terminal-0 input:disabled{opacity:.5;cursor:not-allowed}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px currentColor}50%{box-shadow:0 0 20px currentColor}}.btn[style*="background: #ff6b6b"]{animation:pulse-glow 2s infinite}.active-glow{animation:pulse-glow 1.5s infinite}@media (max-width: 1024px){.terminal-content{padding:1.5rem}.grid-responsive{grid-template-columns:1fr}}@media (max-width: 768px){.terminal-header{flex-direction:column;align-items:flex-start;gap:.5rem}.terminal-header h2{font-size:1rem}.terminal-status{font-size:.8rem}}@media (max-width: 480px){.terminal-content,.card{padding:1rem}}@media (orientation: portrait) and (max-width: 768px){.nav-terminals{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--space-1);justify-content:flex-start}.nav-button{white-space:nowrap}}@media (hover: none) and (pointer: coarse){.btn,.nav-button,.control-button{min-height:44px;min-width:44px}input,select,textarea{font-size:16px}}