:root{--bg-primary: #050510;--bg-secondary: #0a0a1a;--bg-tertiary: #0f0f25;--panel-bg: rgba(10, 10, 30, .8);--cyan: #00ffff;--cyan-dim: #00b8b8;--purple: #a855f7;--magenta: #ff006e;--blue: #3b82f6;--text-primary: #e0e0ff;--text-secondary: #8888aa;--text-dim: #4a4a6a;--glow-cyan: 0 0 20px rgba(0, 255, 255, .5), 0 0 40px rgba(0, 255, 255, .2);--glow-purple: 0 0 20px rgba(168, 85, 247, .5), 0 0 40px rgba(168, 85, 247, .2);--glow-magenta: 0 0 20px rgba(255, 0, 110, .5)}*{box-sizing:border-box}html{background-color:var(--bg-primary)}body{background:radial-gradient(ellipse at 20% 20%,rgba(0,255,255,.03) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(168,85,247,.03) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(255,0,110,.02) 0%,transparent 70%),var(--bg-primary);color:var(--text-primary);font-family:Rajdhani,Segoe UI,system-ui,sans-serif;display:flex;flex-direction:column;min-height:100vh;margin:0;overflow-x:hidden;position:relative}.scanlines{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);opacity:.3}.grid-bg{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(0,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,.03) 1px,transparent 1px);background-size:50px 50px;animation:gridPulse 4s ease-in-out infinite}@keyframes gridPulse{0%,to{opacity:.5}50%{opacity:.8}}header{position:relative;width:100%;padding:2rem 2rem 1.5rem;text-align:center;background:linear-gradient(180deg,var(--bg-secondary) 0%,transparent 100%);border-bottom:1px solid rgba(0,255,255,.2)}.header-glow{position:absolute;top:0;left:50%;transform:translate(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),var(--magenta),transparent);box-shadow:var(--glow-cyan)}.logo-container{display:flex;align-items:center;justify-content:center;gap:1rem}.logo-icon{width:60px;height:60px;animation:logoFloat 3s ease-in-out infinite}.logo-icon svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(0,255,255,.5))}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}h1{margin:0;font-family:Orbitron,sans-serif;font-size:3rem;font-weight:900;letter-spacing:.3em;background:linear-gradient(135deg,var(--cyan) 0%,var(--purple) 50%,var(--magenta) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 60px rgba(0,255,255,.3);animation:titleGlow 2s ease-in-out infinite alternate}@keyframes titleGlow{0%{filter:brightness(1)}to{filter:brightness(1.2)}}.tagline{margin:.75rem 0 0;font-family:Rajdhani,monospace;font-size:.85rem;font-weight:500;color:var(--cyan-dim);letter-spacing:.2em;text-transform:uppercase}#container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:2rem}@media(min-width:1400px){#container{flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding-right:2rem}#canvas-section{order:1}#hud-panel{order:2}}#hud-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,255,255,.3);border-radius:4px;padding:1rem 1.25rem;position:relative;box-shadow:inset 0 1px #ffffff0d,0 10px 40px #00000080,0 0 30px #00ffff1a;width:100%;max-width:900px;order:2}#hud-panel:before{content:"";position:absolute;top:-1px;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}.panel-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid rgba(0,255,255,.1)}.panel-indicator{width:8px;height:8px;background:var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan);animation:indicatorPulse 1.5s ease-in-out infinite}@keyframes indicatorPulse{0%,to{opacity:1;box-shadow:0 0 10px var(--cyan)}50%{opacity:.5;box-shadow:0 0 5px var(--cyan)}}.panel-title{font-family:Orbitron,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.15em;color:var(--cyan)}#color-palette{display:grid;grid-template-rows:repeat(3,1fr);grid-auto-flow:column;grid-auto-columns:min-content;gap:4px;padding:.5rem;background:#0000004d;border-radius:4px;border:1px solid rgba(0,255,255,.1);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--cyan-dim) rgba(0,0,0,.3);-webkit-overflow-scrolling:touch}#color-palette::-webkit-scrollbar{height:6px}#color-palette::-webkit-scrollbar-track{background:#0000004d;border-radius:3px}#color-palette::-webkit-scrollbar-thumb{background:var(--cyan-dim);border-radius:3px}#color-palette::-webkit-scrollbar-thumb:hover{background:var(--cyan)}.color-swatch{width:28px;height:28px;min-width:28px;min-height:28px;flex-shrink:0;border-radius:2px;cursor:pointer;border:2px solid rgba(255,255,255,.1);transition:all .15s ease;position:relative}.color-swatch:after{content:"";position:absolute;inset:-4px;border:1px solid transparent;border-radius:4px;transition:all .15s ease}.color-swatch:hover{transform:scale(1.15);z-index:10;border-color:#ffffff80}.color-swatch:hover:after{border-color:var(--cyan);box-shadow:0 0 15px #00ffff4d}.color-swatch.selected{border-color:var(--cyan);transform:scale(1.1);box-shadow:0 0 15px #00ffff80,inset 0 0 10px #fff3}.color-swatch.selected:after{border-color:var(--cyan);box-shadow:0 0 20px #0ff6;animation:selectedPulse 1s ease-in-out infinite}@keyframes selectedPulse{0%,to{box-shadow:0 0 20px #0ff6}50%{box-shadow:0 0 30px #0ff9}}.panel-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,255,.3),transparent);margin:1rem 0}#status-container{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#0000004d;border-radius:4px;border:1px solid rgba(0,255,255,.1)}.status-label{font-family:Orbitron,sans-serif;font-size:.65rem;font-weight:700;color:var(--text-dim);letter-spacing:.1em}#status{font-family:Rajdhani,monospace;font-size:.85rem;font-weight:600;color:var(--cyan);letter-spacing:.05em}#canvas-section{position:relative;padding:20px}.corner-decor{position:absolute;width:30px;height:30px;border:2px solid var(--cyan);opacity:.6}.corner-decor.top-left{top:0;left:0;border-right:none;border-bottom:none}.corner-decor.top-right{top:0;right:0;border-left:none;border-bottom:none}.corner-decor.bottom-left{bottom:0;left:0;border-right:none;border-top:none}.corner-decor.bottom-right{bottom:0;right:0;border-left:none;border-top:none}#canvas-wrapper{position:relative;box-shadow:0 0 0 1px #00ffff4d,0 0 50px #00ffff26,0 0 100px #a855f71a,0 25px 80px #000c;border:3px solid transparent;-o-border-image:linear-gradient(135deg,var(--cyan),var(--purple),var(--magenta)) 1;border-image:linear-gradient(135deg,var(--cyan),var(--purple),var(--magenta)) 1;overflow:hidden;line-height:0}#canvas-wrapper:before{content:"";position:absolute;inset:0;border:1px solid rgba(0,255,255,.2);pointer-events:none;z-index:10}canvas{image-rendering:pixelated;width:1024px;height:640px;background-color:#0a0a0a;cursor:crosshair;display:block}.canvas-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,255,255,.02) 0%,transparent 10%,transparent 90%,rgba(168,85,247,.02) 100%);z-index:5}.canvas-stats{display:flex;justify-content:center;gap:2rem;margin-top:1rem;padding:.5rem 1rem}.stat{font-family:Rajdhani,monospace;font-size:.8rem;font-weight:500;color:var(--text-secondary);letter-spacing:.05em}.stat-label{font-family:Orbitron,sans-serif;font-size:.65rem;font-weight:700;color:var(--text-dim);margin-right:.5rem}#sync-indicator{color:#0f8;animation:syncBlink 2s ease-in-out infinite}@keyframes syncBlink{0%,90%,to{opacity:1}95%{opacity:.3}}.confirm-popup{position:absolute;z-index:100;background:linear-gradient(135deg,#0a0a1ef2,#140f28f2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(0,255,255,.4);border-radius:4px;padding:.75rem;min-width:160px;box-shadow:0 0 20px #0ff3,0 0 40px #a855f726,0 10px 40px #0009,inset 0 1px #ffffff1a;animation:popupAppear .2s ease-out;transform-origin:top left}.confirm-popup:before{content:"";position:absolute;top:-1px;left:10px;right:10px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),transparent)}.confirm-popup:after{content:"";position:absolute;left:-8px;top:20px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid rgba(0,255,255,.4);filter:drop-shadow(-2px 0 4px rgba(0,255,255,.3))}.confirm-popup.hidden{display:none}@keyframes popupAppear{0%{opacity:0;transform:scale(.8) translate(-10px)}to{opacity:1;transform:scale(1) translate(0)}}.popup-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid rgba(0,255,255,.15)}.popup-indicator{width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan);animation:indicatorPulse 1s ease-in-out infinite}.popup-title{font-family:Orbitron,sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.1em;color:var(--cyan)}.popup-coords{font-family:Rajdhani,monospace;font-size:.7rem;font-weight:500;color:var(--text-secondary);letter-spacing:.05em;margin-bottom:.75rem;padding:.3rem .5rem;background:#0000004d;border-radius:2px;border:1px solid rgba(0,255,255,.1)}#popup-coords-value{color:var(--purple);font-weight:600}.popup-buttons{display:flex;gap:.5rem}.popup-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem;padding:.5rem .6rem;border:1px solid;border-radius:3px;font-family:Orbitron,sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:all .15s ease;position:relative;overflow:hidden}.popup-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.popup-btn .btn-icon{font-size:.7rem;font-weight:900}.confirm-btn{background:linear-gradient(180deg,#0f83,#00ff881a);border-color:#00ff8880;color:#0f8;box-shadow:0 0 10px #0f83}.confirm-btn:hover{background:linear-gradient(180deg,#00ff8859,#0f83);border-color:#0f8;box-shadow:0 0 20px #0f86;transform:translateY(-1px)}.confirm-btn:active{transform:translateY(0);box-shadow:0 0 10px #00ff884d}.cancel-btn{background:linear-gradient(180deg,#ff444426,#ff444414);border-color:#f446;color:#f66;box-shadow:0 0 10px #ff444426}.cancel-btn:hover{background:linear-gradient(180deg,#ff44444d,#ff444426);border-color:#f66;box-shadow:0 0 20px #ff44444d;transform:translateY(-1px)}.cancel-btn:active{transform:translateY(0);box-shadow:0 0 10px #f443}.confirm-popup.popup-left:after{left:auto;right:-8px;border-left:8px solid rgba(0,255,255,.4);border-right:none;filter:drop-shadow(2px 0 4px rgba(0,255,255,.3))}footer{width:100%;padding:1.5rem;text-align:center;background:linear-gradient(0deg,var(--bg-secondary) 0%,transparent 100%);border-top:1px solid rgba(0,255,255,.1);position:relative}.footer-line{position:absolute;top:0;left:50%;transform:translate(-50%);width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--purple),transparent)}footer p{margin:0;font-family:Rajdhani,sans-serif;font-size:.8rem;font-weight:500;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase}.cyber-bracket{color:var(--cyan);font-weight:700}@media(max-width:1100px){canvas{width:768px;height:480px}h1{font-size:2rem;letter-spacing:.2em}.logo-icon{width:45px;height:45px}}@media(max-width:850px){canvas{width:512px;height:320px}#color-palette{grid-template-columns:repeat(7,1fr)}.color-swatch{width:24px;height:24px}}@media(max-width:600px){canvas{width:384px;height:240px}h1{font-size:1.5rem}#container{padding:1rem}}