:root{--bg-dark:#08090c;--bg-card:rgba(17,19,28,0.5);--border-color:rgba(255,255,255,0.06);--text-main:#f3f4f6;--text-muted:#9ca3af;--accent-violet:#8b5cf6;--accent-cyan:#06b6d4;--neon-green:#10b981;--neon-blue:#3b82f6;--neon-yellow:#f59e0b;}*{margin:0;padding:0;box-sizing:border-box;}body{background-color:var(--bg-dark);color:var(--text-main);font-family:'Outfit',sans-serif;overflow-x:hidden;min-height:100vh;position:relative;display:flex;justify-content:center;}.glow-orb{position:fixed;border-radius:50%;filter:blur(150px);z-index:-1;opacity:0.25;pointer-events:none;animation:float 25s infinite alternate ease-in-out;}.orb-violet{background:radial-gradient(circle,var(--accent-violet) 0%,transparent 70%);width:50vw;height:50vw;left:-10vw;top:-10vw;}.orb-blue{background:radial-gradient(circle,var(--accent-cyan) 0%,transparent 70%);width:50vw;height:50vw;right:-10vw;bottom:-10vw;animation-delay:-5s;}@keyframes float{0%{transform:translate(0,0) scale(1);}50%{transform:translate(8vw,5vh) scale(1.1);}100%{transform:translate(-4vw,-8vh) scale(0.95);}}.app-container{width:100%;max-width:1300px;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;}.app-header{text-align:left;border-bottom:1px solid var(--border-color);padding-bottom:1rem;}.logo{display:flex;align-items:center;gap:0.75rem;}.logo-icon{font-size:2rem;text-shadow:0 0 15px var(--accent-violet);}.logo h1{font-size:2.25rem;font-weight:700;background:linear-gradient(135deg,var(--text-main) 30%,#a78bfa 70%,var(--accent-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:0.5rem;}.badge{font-size:0.75rem;font-family:'JetBrains Mono',monospace;background:rgba(139,92,246,0.2);color:#c084fc;border:1px solid rgba(139,92,246,0.4);padding:0.15rem 0.5rem;border-radius:9999px;font-weight:600;vertical-align:middle;}.subtitle{color:var(--text-muted);font-size:1rem;margin-top:0.25rem;}.app-content{display:grid;grid-template-columns:1fr 380px;gap:1.5rem;align-items:start;}@media (max-width:1024px){.app-content{grid-template-columns:1fr;}}.glass-panel{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 10px 30px 0 rgba(0,0,0,0.35);transition:border-color 0.3s ease;}.glass-panel:hover{border-color:rgba(255,255,255,0.12);}.canvas-section{display:flex;flex-direction:column;overflow:hidden;}.canvas-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;border-bottom:1px solid var(--border-color);}.status-indicator{display:flex;align-items:center;gap:0.5rem;font-weight:500;}.pulse-dot{width:8px;height:8px;background-color:var(--neon-green);border-radius:50%;box-shadow:0 0 10px var(--neon-green);animation:pulse 1.5s infinite;}@keyframes pulse{0%{transform:scale(1);opacity:1;}50%{transform:scale(1.3);opacity:0.6;}100%{transform:scale(1);opacity:1;}}.canvas-wrapper{position:relative;width:100%;display:flex;justify-content:center;align-items:center;background-color:#030406;padding:2.5rem 3.5rem;overflow:hidden;}.canvas-container{position:relative;display:inline-block;width:100%;max-width:800px;}canvas{max-width:100%;height:auto;border-radius:10px;cursor:crosshair;}#heatmap-canvas{background-color:#000;box-shadow:0 4px 20px rgba(0,0,0,0.5);}#hud-canvas{background:transparent !important;box-shadow:none !important;}.overlay-text{position:absolute;color:rgba(255,255,255,0.3);font-size:1.25rem;pointer-events:none;font-weight:300;transition:opacity 0.5s ease;}.canvas-footer{padding:1rem 1.25rem;background:rgba(0,0,0,0.2);border-top:1px solid var(--border-color);font-size:0.85rem;}.hint{color:var(--text-muted);}.control-sidebar{display:flex;flex-direction:column;gap:1.5rem;}.control-card{padding:1.5rem;}.control-card h2{font-size:1.15rem;font-weight:600;margin-bottom:1.25rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid rgba(255,255,255,0.05);padding-bottom:0.5rem;}.hud-card{background:rgba(13,15,22,0.7);border:1px solid rgba(139,92,246,0.2);}.hud-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}.hud-item{display:flex;flex-direction:column;gap:0.25rem;padding:0.75rem;background:rgba(255,255,255,0.02);border-radius:8px;border:1px solid rgba(255,255,255,0.03);}.hud-label{font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;}.hud-value{font-family:'JetBrains Mono',monospace;font-size:1.2rem;font-weight:700;}.neon-green{color:var(--neon-green);text-shadow:0 0 10px rgba(16,185,129,0.2);}.neon-blue{color:var(--neon-blue);text-shadow:0 0 10px rgba(59,130,246,0.2);}.neon-yellow{color:var(--neon-yellow);text-shadow:0 0 10px rgba(245,158,11,0.2);}.control-group{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:0.5rem;}.control-group:last-child{margin-bottom:0;}.slider-header{display:flex;justify-content:space-between;font-size:0.9rem;font-weight:500;}.slider-value{color:var(--accent-cyan);font-family:'JetBrains Mono',monospace;}.slider{-webkit-appearance:none;width:100%;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;outline:none;transition:background 0.3s;}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--text-main);box-shadow:0 0 8px var(--accent-violet);cursor:pointer;transition:transform 0.1s,background-color 0.2s;}.slider::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--accent-cyan);}.palette-selectors{display:flex;flex-direction:column;gap:0.75rem;}.palette-btn{background:rgba(255,255,255,0.03);border:1px solid var(--border-color);padding:0.65rem 1rem;border-radius:10px;color:var(--text-main);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all 0.25s ease;width:100%;}.palette-btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);transform:translateY(-1px);}.palette-btn.active{background:rgba(139,92,246,0.15);border-color:var(--accent-violet);box-shadow:inset 0 0 10px rgba(139,92,246,0.1);}.palette-name{font-size:0.9rem;font-weight:500;}.palette-preview{width:100px;height:10px;border-radius:5px;border:1px solid rgba(255,255,255,0.1);}.magma-grad{background:linear-gradient(to right,#000000,#5c007a,#e6005c,#ff9900,#ffffe6);}.viridis-grad{background:linear-gradient(to right,#3b0f70,#2c728e,#21918c,#5ec962,#fde725);}.flame-grad{background:linear-gradient(to right,#000000,#cc0000,#ff6600,#ffd600,#ffffff);}.ice-grad{background:linear-gradient(to right,#050d33,#0d4cd9,#1ac6ff,#80e5ff,#ffffff);}.rainbow-grad{background:linear-gradient(to right,#1a00cc,#00b3e6,#00e640,#e6cc00,#f20d0d);}.neon-grad{background:linear-gradient(to right,#0d0026,#f2008c,#00f2f2,#b300f2,#f2f20d);}.dropdown{background:#0f1118;color:var(--text-main);border:1px solid var(--border-color);padding:0.65rem;border-radius:8px;outline:none;font-family:inherit;font-size:0.9rem;cursor:pointer;width:100%;}.dropdown:focus{border-color:var(--accent-violet);}.btn{background:var(--accent-violet);color:white;border:none;padding:0.65rem 1.25rem;border-radius:8px;font-family:inherit;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:0.5rem;}.btn-primary{background:linear-gradient(135deg,var(--accent-violet) 0%,#7c3aed 100%);box-shadow:0 4px 15px rgba(139,92,246,0.3);}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,92,246,0.45);}.btn-secondary{background:rgba(255,255,255,0.05);border:1px solid var(--border-color);color:var(--text-main);}.btn-secondary:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}.btn-full{width:100%;}.icon{font-size:1.1rem;}.canvas-legend{position:absolute;bottom:24px;right:24px;padding:0.65rem 0.85rem;display:flex;flex-direction:column;gap:0.35rem;background:rgba(10,12,18,0.75) !important;border:1px solid rgba(255,255,255,0.08);pointer-events:none;box-shadow:0 4px 15px rgba(0,0,0,0.5);border-radius:10px;z-index:10;transition:opacity 0.3s;}.legend-title{font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;font-weight:700;}.legend-scale{display:flex;align-items:center;gap:0.5rem;}.legend-limit{font-size:0.65rem;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;}.legend-bar{width:140px;height:8px;border-radius:4px;border:1px solid rgba(255,255,255,0.15);}.canvas-axis-x{position:absolute;bottom:-22px;left:0;right:0;display:flex;justify-content:space-between;padding:0 10px;font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:rgba(255,255,255,0.4);pointer-events:none;}.canvas-axis-y{position:absolute;left:-42px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding:8px 0;font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:rgba(255,255,255,0.4);pointer-events:none;width:32px;}input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:rgba(255,255,255,0.05);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;position:relative;transition:all 0.2s ease;outline:none;display:flex;align-items:center;justify-content:center;}input[type="checkbox"]:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}input[type="checkbox"]:checked{background:rgba(139,92,246,0.2);border-color:var(--accent-violet);}input[type="checkbox"]:checked::after{content:"✓";color:#c084fc;font-size:0.75rem;font-weight:700;}