:root{--bg-primary:#0a0a1a;--bg-secondary:#101025;--bg-tertiary:#1a1a35;--accent:gold;--accent-secondary:#4a90d9;--text-primary:#fff;--text-secondary:#aaa;--text-muted:#6a6a9a;--border:#2a2a4a;--highlight:#3a5a8a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);font-family:Segoe UI,system-ui,sans-serif;overflow:hidden}.app{grid-template-rows:1fr auto;grid-template-columns:1fr;height:100vh;display:grid}.header{pointer-events:auto;z-index:200;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(#000c,#0000);justify-content:space-between;align-items:center;padding:20px;display:flex;position:fixed;top:0;left:0;right:0}.menu-toggle{color:var(--text-primary);cursor:pointer;z-index:201;background:0 0;border:none;padding:8px;font-size:24px;display:block}.nav{opacity:0;z-index:199;background:#0a0a1af2;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:all .3s;display:flex;position:fixed;inset:0;transform:translate(-100%)}.nav.open{opacity:1;transform:translate(0)}.logo{align-items:center;gap:12px;display:flex}.logo-img{object-fit:contain;width:40px;height:40px}.logo-text{background:linear-gradient(90deg,gold,#ff8c00);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:16px;font-weight:600}.nav-btn{color:var(--text-secondary);cursor:pointer;text-align:center;background:#14143299;border:1px solid #64c8ff4d;border-radius:8px;width:200px;padding:12px 24px;font-size:16px;transition:all .2s}.nav-btn:hover{color:var(--text-primary);background:#282850cc;border-color:#64c8ff99}.canvas-area{background:radial-gradient(#0d0d20 0%,#050510 100%);width:100%;height:100%;position:relative}.menu-toggle{color:var(--text-primary);cursor:pointer;background:0 0;border:none;padding:8px;font-size:24px;display:block}.nav{position:relative}.nav-btn{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;padding:8px 16px;font-size:14px;transition:all .2s}.nav-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.nav-btn.active{color:var(--text-primary);background:linear-gradient(135deg,#4a4a7a,#3a3a6a);border-color:#6a6a9a}.close-menu-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;padding:8px;font-size:32px;position:absolute;top:16px;right:16px}.canvas-area{background:radial-gradient(#0d0d20 0%,#050510 100%);position:fixed;inset:80px 0 0}.info-panel{background:var(--bg-secondary);border-left:1px solid var(--border);z-index:250;width:384px;max-width:100%;padding:20px;animation:.3s slideIn;position:fixed;top:80px;bottom:20px;right:20px;overflow-y:auto}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.close-btn{float:right;color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0 8px;font-size:24px;line-height:1}.close-btn:hover{color:var(--text-primary)}.panel-section{margin-bottom:24px}.panel-title{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:12px;font-size:12px}.planet-card{background:linear-gradient(135deg, var(--bg-tertiary) 0%, #15152a 100%);border:1px solid var(--border);border-radius:12px;padding:20px}.planet-header{align-items:center;gap:16px;margin-bottom:16px;display:flex}.planet-avatar{border-radius:50%;width:60px;height:60px}.planet-name{font-size:24px;font-weight:600}.planet-type{color:#6a8aba;background:#6a8aba33;border-radius:4px;padding:4px 8px;font-size:12px}.planet-stats{grid-template-columns:1fr 1fr;gap:12px;display:grid}.stat-item{background:#0d0d20;border-radius:8px;padding:12px}.stat-label{color:var(--text-muted);margin-bottom:4px;font-size:11px}.stat-value{font-size:16px;font-weight:500}.stat-unit{color:var(--text-secondary);font-size:12px}.planet-description{color:var(--text-secondary);margin-top:16px;font-size:13px;line-height:1.6}.quick-facts{background:#0d0d20;border-radius:8px;padding:12px}.fact-item{border-bottom:1px solid #1a1a2a;justify-content:space-between;padding:8px 0;font-size:13px;display:flex}.fact-item:last-child{border-bottom:none}.fact-label{color:var(--text-muted)}.fact-value{color:var(--text-secondary)}.toolbar{z-index:100;background:0 0;border-top:1px solid #64c8ff1a;justify-content:center;align-items:center;gap:12px;padding:12px 24px;display:flex;position:fixed;bottom:0;left:0;right:0}.tool-btn{color:var(--text-secondary);cursor:pointer;background:#14143299;border:1px solid #64c8ff4d;border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;transition:all .3s;display:flex;box-shadow:0 0 5px #64c8ff1a}.tool-btn:hover{color:var(--text-primary);background:#2a2a4a;border-color:#64c8ff99;transform:translateY(-2px);box-shadow:0 0 15px #64c8ff4d}.tool-btn.active{color:var(--text-primary);background:linear-gradient(135deg,#3a5a8a,#2a4a7a);border-color:#5a8aba;box-shadow:0 0 20px #64c8ff66}.modal-overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-overlay.visible{display:flex}.modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;width:99%;max-width:1600px;max-height:90vh;padding:32px}.modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.modal-title{font-size:24px;font-weight:600}.modal-close{width:32px;height:32px;color:var(--text-primary);cursor:pointer;background:#1a1a3a;border:none;border-radius:8px;font-size:18px}.comparison-container{background:#0a0a15;border-radius:12px;justify-content:center;align-items:flex-end;gap:8px;height:250px;padding:20px;display:flex}.comparison-bar{flex-direction:column;align-items:center;gap:4px;display:flex}@media (max-width:1024px){.app{grid-template-columns:1fr}}.planet-tooltip{white-space:normal;word-wrap:break-word;pointer-events:none;text-align:center;background:#0a0a1ef2;border:1px solid #ffd70080;border-radius:8px;min-width:280px;padding:14px 20px;box-shadow:0 4px 20px #00000080}.tooltip-name{color:gold;margin-bottom:8px;font-size:24px;font-weight:600}.tooltip-desc{color:#ccc;font-size:18px;line-height:1.4}.glass-panel{-webkit-backdrop-filter:blur(12px);background:#141432b3;border:1px solid #6496ff4d;border-radius:12px;box-shadow:0 0 20px #6496ff1a}.neon-border{border:1px solid #64c8ff80;box-shadow:0 0 10px #64c8ff4d,inset 0 0 10px #64c8ff1a}