:root{--cosmic-bg: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 25%, #16213e 50%, #0f3460 75%, #0a0a0a 100%);--primary-gold: #ffd700;--primary-blue: #4a90e2;--primary-purple: #9b59b6;--primary-teal: #1abc9c;--primary-red: #e74c3c;--text-light: #ffffff;--text-dim: #cccccc;--panel-bg: rgba(20, 20, 40, .9);--panel-border: rgba(255, 215, 0, .3);--button-hover: rgba(255, 215, 0, .2);--shadow-glow: 0 0 20px rgba(255, 215, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--cosmic-bg);color:var(--text-light);overflow:hidden;height:100vh}.hidden{display:none!important}.password-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--cosmic-bg);display:flex;align-items:center;justify-content:center;z-index:10000}.password-container{text-align:center;padding:2rem;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:20px;box-shadow:var(--shadow-glow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cosmic-logo{position:relative;margin-bottom:2rem}.star-field{position:absolute;top:-20px;left:50%;transform:translate(-50%);width:200px;height:60px}.star{position:absolute;width:4px;height:4px;background:var(--primary-gold);border-radius:50%;animation:twinkle 2s infinite alternate}.star:nth-child(1){top:10px;left:20px;animation-delay:0s}.star:nth-child(2){top:30px;left:60px;animation-delay:.5s}.star:nth-child(3){top:5px;left:100px;animation-delay:1s}.star:nth-child(4){top:40px;left:140px;animation-delay:1.5s}.star:nth-child(5){top:20px;left:180px;animation-delay:2s}@keyframes twinkle{0%{opacity:.3;transform:scale(1)}to{opacity:1;transform:scale(1.2)}}.cosmic-logo h1{font-size:2.5rem;color:var(--primary-gold);text-shadow:0 0 10px var(--primary-gold);margin-top:1rem}.password-form{display:flex;flex-direction:column;gap:1rem;align-items:center}#password-input{padding:1rem;font-size:1.2rem;background:#ffffff1a;border:2px solid var(--panel-border);border-radius:10px;color:var(--text-light);text-align:center;width:300px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#password-input:focus{outline:none;border-color:var(--primary-gold);box-shadow:0 0 10px #ffd70080}#password-submit{padding:1rem 2rem;font-size:1.1rem;background:linear-gradient(45deg,var(--primary-gold),#ffed4e);color:#000;border:none;border-radius:10px;cursor:pointer;font-weight:700;transition:all .3s ease}#password-submit:hover{transform:translateY(-2px);box-shadow:0 5px 15px #ffd70066}.password-error{color:var(--primary-red);font-size:.9rem;opacity:0;transition:opacity .3s ease}.password-error.show{opacity:1}.app{position:relative;width:100%;height:100vh;overflow:hidden}.canvas-container{width:100%;height:100%;position:relative}.controls-panel,.description-panel{position:fixed;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-glow);transition:all .3s ease;z-index:1000}.controls-panel{top:20px;left:20px;width:290px}.description-panel{bottom:20px;left:20px;width:290px}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-bottom:1px solid var(--panel-border)}.panel-header h3{color:var(--primary-gold);font-size:1.2rem;margin:0}.minimize-btn{background:none;border:none;color:var(--text-light);font-size:1.5rem;cursor:pointer;padding:.2rem .5rem;border-radius:5px;transition:background .3s ease}.minimize-btn:hover{background:var(--button-hover)}.panel-content{padding:1rem}.control-group{margin-bottom:.5rem}.control-group label{display:block;margin-bottom:.5rem;color:var(--text-dim);font-size:.9rem}.control-group input[type=range]{width:100%;margin-bottom:.5rem;accent-color:var(--primary-gold)}.control-group span{color:var(--primary-gold);font-weight:700;font-size:.9rem}.toggle-btn,.action-btn{padding:.7rem 1rem;margin:.3rem;border:2px solid var(--panel-border);border-radius:8px;background:#ffffff1a;color:var(--text-light);cursor:pointer;transition:all .3s ease;font-size:.9rem}.toggle-btn:hover,.action-btn:hover{background:var(--button-hover);border-color:var(--primary-gold)}.toggle-btn.active{background:var(--primary-gold);color:#000;border-color:var(--primary-gold)}.action-btn{width:100%;background:linear-gradient(45deg,var(--primary-blue),#5dade2);border-color:var(--primary-blue)}.generation-stats{display:flex;flex-direction:column;gap:.8rem}.stat-item{display:flex;align-items:center;gap:.8rem;font-size:.9rem}.generation-color{width:16px;height:16px;border-radius:50%;box-shadow:0 0 8px currentColor}.gen-1{background:var(--primary-gold)}.gen-2{background:var(--primary-blue)}.gen-3{background:var(--primary-purple)}.gen-4{background:var(--primary-teal)}.gen-5{background:var(--primary-red)}.total-stats{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--panel-border);text-align:center;color:var(--primary-gold)}.mobile-menu-toggle{display:none;position:fixed;top:20px;right:20px;width:50px;height:50px;background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:10px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;z-index:1001;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mobile-menu-toggle span{width:25px;height:3px;background:var(--primary-gold);transition:all .3s ease}.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.mobile-menu-toggle.active span:nth-child(2){opacity:0}.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;display:none;overflow-y:auto}.mobile-menu-content{padding:80px 20px 20px;max-width:400px;margin:0 auto}.mobile-menu h3{color:var(--primary-gold);margin-bottom:1rem;font-size:1.3rem}.mobile-control-group{margin-bottom:1.5rem}.mobile-control-group label{display:block;margin-bottom:.5rem;color:var(--text-dim)}.mobile-control-group input[type=range]{width:100%;margin-bottom:.5rem;accent-color:var(--primary-gold)}.mobile-control-group span{color:var(--primary-gold);font-weight:700}.mobile-toggle-btn,.mobile-action-btn{padding:1rem;margin:.5rem 0;width:100%;border:2px solid var(--panel-border);border-radius:10px;background:#ffffff1a;color:var(--text-light);cursor:pointer;transition:all .3s ease;font-size:1rem}.mobile-toggle-btn.active{background:var(--primary-gold);color:#000}.mobile-action-btn{background:linear-gradient(45deg,var(--primary-blue),#5dade2)}.mobile-generation-stats{display:flex;flex-direction:column;gap:1rem}.mobile-stat-item{display:flex;align-items:center;gap:1rem;font-size:1rem}.mobile-total-stats{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--panel-border);text-align:center;color:var(--primary-gold);font-size:1.1rem}.member-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:2000}.modal-content{background:var(--panel-bg);border:2px solid var(--panel-border);border-radius:20px;max-width:400px;width:90%;box-shadow:var(--shadow-glow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--panel-border)}.modal-header h3{color:var(--primary-gold);margin:0}.close-btn{background:none;border:none;color:var(--text-light);font-size:2rem;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .3s ease}.close-btn:hover{background:var(--button-hover)}.modal-body{padding:1.5rem;text-align:center}.member-photo{margin-bottom:1rem}.member-photo img{width:120px;height:120px;border-radius:50%;border:3px solid var(--primary-gold);object-fit:cover;box-shadow:0 0 20px #ffd7004d}.member-info h4{color:var(--primary-gold);font-size:1.5rem;margin-bottom:.5rem}.member-info p{color:var(--text-dim);margin-bottom:.3rem;font-size:1rem}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--cosmic-bg);display:flex;align-items:center;justify-content:center;z-index:5000}.loading-content{text-align:center}.cosmic-loader{position:relative;width:200px;height:200px;margin:0 auto 2rem}.orbit{position:absolute;border:2px solid rgba(255,215,0,.3);border-radius:50%;animation:rotate 3s linear infinite}.orbit:nth-child(1){width:60px;height:60px;top:70px;left:70px}.orbit:nth-child(2){width:100px;height:100px;top:50px;left:50px;animation-duration:4s}.orbit:nth-child(3){width:140px;height:140px;top:30px;left:30px;animation-duration:5s}.planet{position:absolute;width:8px;height:8px;background:var(--primary-gold);border-radius:50%;top:-4px;left:50%;transform:translate(-50%);box-shadow:0 0 10px var(--primary-gold)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-content h3{color:var(--primary-gold);font-size:1.5rem;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.7}50%{opacity:1}}.controls-panel.minimized,.description-panel.minimized{width:60px;height:60px;border-radius:50%;cursor:pointer;overflow:hidden}.controls-panel.minimized .panel-content,.description-panel.minimized .panel-content{display:none}.controls-panel.minimized .panel-header,.description-panel.minimized .panel-header{border:none;padding:0;height:100%;display:flex;align-items:center;justify-content:center}.controls-panel.minimized .panel-header h3,.description-panel.minimized .panel-header h3{display:none}.controls-panel.minimized .minimize-btn,.description-panel.minimized .minimize-btn{font-size:1.2rem}@media (max-width: 768px){.controls-panel,.description-panel{display:none}.mobile-menu-toggle{display:flex}.cosmic-logo h1{font-size:2rem}#password-input{width:250px;font-size:1rem}.modal-content{margin:20px}.member-photo img{width:100px;height:100px}}@media (max-width: 480px){.cosmic-logo h1{font-size:1.5rem}#password-input{width:200px}.password-container{padding:1rem}.member-info h4{font-size:1.2rem}.member-info p{font-size:.9rem}}.canvas-container{cursor:grab}.canvas-container:active{cursor:grabbing}*{transition:opacity .3s ease,transform .3s ease}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff1a}::-webkit-scrollbar-thumb{background:var(--primary-gold);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffed4e}
