:root{--cyber-green: #00ff00;--cyber-cyan: #00ffff;--cyber-pink: #ff1493;--cyber-purple: #9400d3;--cyber-orange: #ff8c00;--cyber-yellow: #ffd700;--cyber-red: #ff0040;--cyber-bg-primary: #0a0a0a;--cyber-bg-secondary: #141414;--cyber-bg-tertiary: #1a1a1a;--glow-green: 0 0 20px rgba(0, 255, 0, .3);--glow-cyan: 0 0 20px rgba(0, 255, 255, .3);--glow-pink: 0 0 20px rgba(255, 20, 147, .3);--glow-purple: 0 0 20px rgba(148, 0, 211, .3);--glow-orange: 0 0 20px rgba(255, 140, 0, .3);--anim-fast: .3s;--anim-medium: .6s;--anim-slow: 1.2s;--anim-pulse: 2s;--fs-hero: clamp(2rem, 5vw, 3rem);--fs-title: clamp(1.5rem, 4vw, 2.5rem);--fs-heading: clamp(1.25rem, 3vw, 2rem);--fs-subheading: clamp(1.125rem, 2.5vw, 1.5rem);--fs-body: clamp(.875rem, 2vw, 1rem);--fs-small: clamp(.75rem, 1.5vw, .875rem)}html,body{height:100%;margin:0;padding:0;font-family:VT323,Courier New,Consolas,Monaco,monospace;font-size:22px;background-color:var(--cyber-bg-primary);color:var(--cyber-green);line-height:1.6;overflow-x:hidden}*,*:before,*:after{box-sizing:border-box}#root{height:100%;width:100%;display:flex;flex-direction:column}.app{min-height:100vh;display:flex;flex-direction:column;background-color:var(--cyber-bg-primary)}.app-main{flex:1;display:flex;flex-direction:column;min-height:0}.app-footer{background:var(--cyber-bg-secondary);border-top:1px solid rgba(0,255,0,.2);padding:1rem 0;text-align:center;color:var(--cyber-green)}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.cyber-text{color:var(--cyber-green);text-shadow:0 0 10px rgba(0,255,0,.8);letter-spacing:.05em}.cyber-glow{animation:cyber-glow var(--anim-slow) ease-in-out infinite}@keyframes cyber-glow{0%,to{filter:brightness(1) drop-shadow(0 0 5px currentColor)}50%{filter:brightness(1.2) drop-shadow(0 0 15px currentColor)}}.cyber-btn{background:transparent;border:2px solid var(--cyber-green);color:var(--cyber-green);padding:.75rem 1.5rem;font-size:var(--fs-body);font-weight:700;border-radius:4px;cursor:pointer;transition:all var(--anim-slow) ease;text-transform:uppercase;letter-spacing:.1em;position:relative;overflow:hidden;font-family:inherit}.cyber-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,0,.2),transparent);transition:left var(--anim-slow) ease}.cyber-btn:hover:before{left:100%}.cyber-btn:hover{background:#00ff001a;box-shadow:var(--glow-green);transform:translateY(-2px)}.cyber-card{background:var(--cyber-bg-secondary);border:1px solid rgba(0,255,0,.3);border-radius:8px;padding:1.5rem;position:relative;overflow:hidden;transition:all var(--anim-slow) ease}.cyber-card:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,var(--cyber-green),var(--cyber-cyan),var(--cyber-purple),var(--cyber-pink));border-radius:8px;opacity:0;transition:opacity var(--anim-slow) ease;z-index:-1}.cyber-card:hover:before{opacity:.3}.cyber-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0f03}.cyber-input{background:var(--cyber-bg-tertiary);border:2px solid rgba(0,255,0,.3);color:var(--cyber-green);padding:.75rem 1rem;font-size:var(--fs-body);border-radius:4px;transition:all var(--anim-slow) ease;font-family:inherit}.cyber-input:focus{outline:none;border-color:var(--cyber-green);box-shadow:var(--glow-green)}.cyber-panel{background:#0a0a0af2;border:1px solid rgba(0,255,0,.2);border-radius:8px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px #00000080}.cyber-fade-in{animation:cyber-fade-in var(--anim-slow) ease-out}@keyframes cyber-fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.cyber-slide-in{animation:cyber-slide-in var(--anim-slow) ease-out}@keyframes cyber-slide-in{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}.cyber-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.dashboard-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.metric-card{background:var(--cyber-bg-secondary);border:1px solid rgba(0,255,0,.3);border-radius:8px;padding:1.5rem;text-align:center;transition:all var(--anim-slow) ease}.metric-card:hover{border-color:var(--cyber-green);box-shadow:var(--glow-green)}.metric-value{font-size:2.5rem;font-weight:700;color:var(--cyber-cyan);margin-bottom:.5rem}.metric-label{font-size:var(--fs-body);color:var(--cyber-green);text-transform:uppercase;letter-spacing:.1em}@media (max-width: 768px){:root{--fs-hero: 1.75rem;--fs-title: 1.5rem;--fs-heading: 1.25rem;--fs-subheading: 1.125rem;--fs-body: .875rem;--fs-small: .75rem}.cyber-card,.cyber-panel{padding:1rem}.cyber-grid,.dashboard-grid{gap:1rem;grid-template-columns:1fr}.metric-value{font-size:2rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-color-scheme: dark){:root{--cyber-bg-primary: #000000;--cyber-bg-secondary: #0a0a0a;--cyber-bg-tertiary: #141414}}@media (prefers-contrast: high){.cyber-card,.cyber-panel,.metric-card{border-width:2px}.cyber-text{text-shadow:0 0 15px currentColor}}:root{--crt-bg: #0a0e0a;--crt-text: #00ff41;--crt-glow: 0 0 10px rgba(0, 255, 65, .7);--safe-area-inset-top: env(safe-area-inset-top, 0px);--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px)}.terminal-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}#crt-screen{width:100%;height:100%;max-width:1000px;max-height:800px;background-color:var(--crt-bg);box-shadow:0 0 50px #00ff4133,inset 0 0 20px #000c;border-radius:20px;padding:2rem;box-sizing:border-box;position:relative;overflow:hidden;display:flex;flex-direction:column;border:3px solid #333}#crt-screen:after{content:" ";display:block;position:absolute;inset:0;background:linear-gradient(#12101000 50%,#00000040 50%),linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f);z-index:2;background-size:100% 4px,3px 100%;pointer-events:none;animation:flicker .5s infinite}@keyframes flicker{0%{opacity:.2}20%{opacity:1}80%{opacity:.7}to{opacity:1}}#terminal{width:100%;height:100%;white-space:pre-wrap;word-wrap:break-word;text-shadow:var(--crt-glow);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;-ms-overflow-style:none}#terminal::-webkit-scrollbar{display:none;width:0;background:transparent}#terminal::-webkit-scrollbar-track{background:transparent}#terminal::-webkit-scrollbar-thumb{background:transparent}#terminal::-webkit-scrollbar-corner{background:transparent}.cursor{display:inline-block;background-color:var(--crt-text);box-shadow:var(--crt-glow);width:.6em;height:1.2em;animation:blink 1s step-end infinite;vertical-align:bottom}@keyframes blink{0%,to{background-color:transparent;box-shadow:none}50%{background-color:var(--crt-text);box-shadow:var(--crt-glow)}}.cyber-admin{color:#0ff;font-weight:700;text-shadow:0 0 10px rgba(0,255,255,.8)}.cyber-at{color:#0f0;text-shadow:0 0 10px rgba(0,255,0,.8)}.cyber-domain{color:#ff1493;font-weight:700;text-shadow:0 0 10px rgba(255,20,147,.8)}.cyber-slash{color:#f2ff00;font-weight:700;animation:blink 2s ease-in-out infinite;text-shadow:0 0 10px rgba(238,255,0,.8)}.cyber-path{color:#ff8c00;font-style:italic;text-shadow:0 0 10px rgba(255,140,0,.8)}.cyber-percent{color:#d3a200;animation:blink 2s ease-in-out infinite;text-shadow:0 0 10px rgba(148,0,211,.8)}.neon-pink-glow{color:#ff1493;font-weight:700;animation:blink 3s ease-in-out infinite}@keyframes neon-pink-pulse{0%,to{text-shadow:0 0 5px #ff1493,0 0 10px #ff1493,0 0 15px #ff1493,0 0 20px #ff1493}50%{text-shadow:0 0 10px #ff1493,0 0 20px #ff1493,0 0 30px #ff1493,0 0 40px #ff1493}}.keyboard-toggle-btn{position:fixed;bottom:1rem;right:1rem;width:3.5rem;height:3.5rem;background:#000c;border:2px solid var(--crt-text);color:var(--crt-text);border-radius:50%;font-size:1.8rem;cursor:pointer;z-index:1001;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 8px #0006}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){.keyboard-toggle-btn{display:none}}@media (hover: none) and (pointer: coarse),(max-width: 768px){.keyboard-toggle-btn{display:flex!important}}.touch-device .keyboard-toggle-btn{display:flex!important}.keyboard-toggle-btn:active{transform:scale(.9);box-shadow:0 2px 4px #0006}.keyboard-toggle-btn.active{background:var(--crt-text);color:var(--crt-bg);box-shadow:0 0 20px var(--crt-text)}.mobile-keyboard{position:fixed;bottom:0;left:0;right:0;background:#0a0e0af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:2px solid var(--crt-text);padding:.5rem;display:none;z-index:1000;max-height:60vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s ease}.mobile-keyboard.active{display:block;transform:translateY(0)}.mobile-keyboard.landscape{max-height:80vh;padding:.25rem}.mobile-keyboard.portrait{max-height:50vh}.mobile-input-display{background:#000c;border:1px solid var(--crt-text);border-radius:8px;padding:.75rem;margin-bottom:.75rem;font-family:VT323,monospace;font-size:1.4rem;color:var(--crt-text);text-align:left;min-height:2.5rem;display:flex;align-items:center;box-shadow:inset 0 0 10px #00ff4133;position:relative}.clear-input-btn{position:absolute;right:.5rem;background:#f003;border:1px solid #ff0000;color:red;padding:.25rem .5rem;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .2s ease}.clear-input-btn:active{background:red;color:var(--crt-bg)}.input-cursor{animation:blink 1s step-end infinite;margin-left:2px}.mobile-keyboard-section{margin-bottom:.75rem}.section-label{color:#0ff;font-size:.8rem;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:2px;opacity:.8}.mobile-keyboard-row{display:flex;justify-content:center;gap:.25rem;margin-bottom:.25rem;flex-wrap:wrap}.mobile-keyboard-row.compact{gap:.15rem;margin-bottom:.15rem}.mobile-key{background:#0009;border:1px solid var(--crt-text);color:var(--crt-text);padding:.6rem .8rem;border-radius:6px;font-family:VT323,monospace;font-size:1.1rem;cursor:pointer;transition:all .15s ease;min-width:2.5rem;text-align:center;touch-action:manipulation;position:relative;overflow:hidden}.mobile-key:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0%,rgba(0,255,65,.1) 100%);opacity:0;transition:opacity .2s ease}.mobile-key:active{transform:scale(.95);background:var(--crt-text);color:var(--crt-bg);box-shadow:0 0 15px var(--crt-text)}.mobile-key:active:before{opacity:1}.mobile-key.special{background:#ff149333;color:#ff1493;border-color:#ff1493;font-weight:700}.mobile-key.special:active{background:#ff1493;color:var(--crt-bg);box-shadow:0 0 20px #ff1493}.mobile-key.command-key{min-width:4rem;font-size:.9rem}.mobile-key.number-key{min-width:2rem;padding:.6rem}.mobile-key.toggle-key{min-width:10rem;background:#00ffff1a;border-color:#0ff;color:#0ff}.mobile-key.toggle-key:active{background:#0ff;color:var(--crt-bg);box-shadow:0 0 15px #0ff}.mobile-key.space-key{flex:1;max-width:12rem}.mobile-key.enter-key{min-width:6rem}.mobile-key.caps-active{background:#00ff414d;border-color:#00ff41;box-shadow:0 0 5px var(--crt-text)}.keyboard-toggle{display:flex;justify-content:center;margin:.5rem 0}.full-keyboard{border-top:1px solid rgba(0,255,65,.3);padding-top:.5rem;margin-top:.5rem}.full-keyboard.landscape{display:flex;flex-wrap:wrap;gap:.25rem}.full-keyboard.landscape .mobile-keyboard-row{flex:1}.numbers-row{justify-content:space-between;max-width:100%}.swipe-hint{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);background:#000c;border:1px solid var(--crt-text);border-radius:8px;padding:.75rem 1.5rem;color:var(--crt-text);font-family:VT323,monospace;font-size:1.2rem;text-align:center;z-index:998;animation:fadeInOut 3s ease-in-out;pointer-events:none}@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}.maze-controls{position:fixed;bottom:5rem;right:1rem;display:none;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.25rem;z-index:999;background:#0009;padding:.5rem;border-radius:12px;border:1px solid rgba(0,255,65,.3);transition:all .3s ease}.maze-controls.active{display:grid}.maze-controls.landscape{left:1rem;right:auto;bottom:50%;transform:translateY(50%)}.maze-control-btn{width:3.5rem;height:3.5rem;background:#000c;border:2px solid var(--crt-text);color:var(--crt-text);border-radius:12px;font-size:1.8rem;cursor:pointer;transition:all .15s ease;touch-action:manipulation;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.maze-control-btn:nth-child(1){grid-column:2;grid-row:1}.maze-control-btn:nth-child(2){grid-column:2;grid-row:3}.maze-control-btn:nth-child(3){grid-column:3;grid-row:2}.maze-control-btn:nth-child(4){grid-column:1;grid-row:2}.maze-control-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,var(--crt-text) 0%,transparent 70%);transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease;opacity:.3}.maze-control-btn:active{transform:scale(.9);background:var(--crt-text);color:var(--crt-bg);box-shadow:0 0 20px var(--crt-text)}.maze-control-btn:active:before{width:100px;height:100px}.swipe-area{position:absolute;background:transparent;z-index:100}.swipe-area.left{left:0;top:0;bottom:0;width:20%}.swipe-area.right{right:0;top:0;bottom:0;width:20%}.swipe-area.top{top:0;left:0;right:0;height:20%}.swipe-area.bottom{bottom:0;left:0;right:0;height:20%}.terminal-hidden-input{position:absolute;left:-9999px;opacity:0}@media (max-width: 768px){html,body{overflow:hidden;position:fixed;width:100%;height:100%;-webkit-overflow-scrolling:touch}body{font-size:14px;padding-top:var(--safe-area-inset-top);padding-bottom:var(--safe-area-inset-bottom)}.terminal-container{padding:0;height:100vh;height:100dvh;position:fixed;inset:0}#crt-screen{padding:1rem;padding-top:calc(1rem + var(--safe-area-inset-top));border-radius:0;height:100%;max-height:none;border:none;box-shadow:none}#terminal{font-size:16px;line-height:1.4;height:100%;padding-top:.5rem;padding-bottom:5rem;scroll-padding-bottom:5rem;overflow-y:scroll;-webkit-overflow-scrolling:touch}#terminal::-webkit-scrollbar{display:none}.keyboard-toggle-btn{display:flex;bottom:calc(1rem + var(--safe-area-inset-bottom))}.maze-controls{bottom:calc(5rem + var(--safe-area-inset-bottom));right:.5rem}.maze-controls.landscape{bottom:50%}.mobile-keyboard{padding-bottom:var(--safe-area-inset-bottom)}.swipe-hint{font-size:1rem;padding:.5rem 1rem;top:30%}}@media (max-width: 812px) and (orientation: landscape){.mobile-keyboard.landscape{max-height:90vh}.mobile-keyboard-section{margin-bottom:.25rem}.section-label{display:none}.mobile-key{padding:.4rem .6rem;font-size:.9rem}.keyboard-toggle-btn{bottom:.5rem;right:.5rem;width:3rem;height:3rem;font-size:1.4rem}}@media (max-width: 480px){body{font-size:12px}.terminal-container{padding:.25rem}#crt-screen{padding:.75rem;border-radius:8px}#terminal{font-size:14px}.mobile-keyboard{max-height:55vh;padding:.25rem}.mobile-input-display{font-size:1.2rem;padding:.5rem;margin-bottom:.5rem}.mobile-key{padding:.5rem .6rem;font-size:.95rem;min-width:2.2rem}.mobile-key.command-key{min-width:3.5rem;font-size:.8rem}.mobile-key.number-key{min-width:1.8rem;padding:.5rem .4rem}.maze-control-btn{width:3rem;height:3rem;font-size:1.5rem}.section-label{font-size:.7rem;margin-bottom:.2rem}}@media (hover: none) and (pointer: coarse){.mobile-key{min-height:44px}.maze-control-btn{min-height:44px;min-width:44px}}.terminal-container.keyboard-visible #terminal{padding-bottom:60vh}@supports (-webkit-touch-callout: none){.terminal-container,#crt-screen{height:-webkit-fill-available}}
