@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap";:root{--bg-dark:#05050a;--bg-card:#0a0f19b3;--text-main:#f8fafc;--text-muted:#94a3b8;--accent-blue:#3b82f6;--accent-glow:#3b82f680;--border-color:#ffffff14}*{box-sizing:border-box}body,html{background-color:var(--bg-dark);width:100%;height:100%;color:var(--text-main);margin:0;padding:0;font-family:Inter,sans-serif;overflow:hidden}#root{width:100%;height:100%;display:flex}.ui-container{-webkit-backdrop-filter:blur(12px);border-right:1px solid var(--border-color);z-index:20;background:#0a0f1966;flex-direction:column;width:340px;height:100%;padding:24px 20px;transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:0;left:0;overflow-y:auto;transform:translate(-100%);box-shadow:10px 0 40px #0009}.ui-container.open{transform:translate(0)}.panel-toggle-btn{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);color:var(--text-main);cursor:pointer;background:#0a0f1980;border-radius:12px;justify-content:center;align-items:center;padding:12px;transition:all .3s;display:flex;position:absolute;top:24px;left:24px;box-shadow:0 4px 15px #0000004d}.panel-toggle-btn:hover{background:#ffffff1a;transform:scale(1.05)}.close-panel-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex;position:absolute;top:16px;right:16px}.close-panel-btn:hover{color:#fff;background:#ffffff1a}.ui-title{background:linear-gradient(135deg,#60a5fa,#c084fc);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:1.5rem;font-weight:700;line-height:1.2}.ui-subtitle{color:var(--text-muted);margin-bottom:32px;font-size:.95rem;line-height:1.6}.button{color:#fff;cursor:pointer;box-shadow:0 4px 20px var(--accent-glow);background:linear-gradient(135deg,#2563eb,#3b82f6);border:none;border-radius:10px;justify-content:center;align-items:center;gap:10px;width:100%;margin-bottom:32px;padding:14px 24px;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.button:hover:not(:disabled){box-shadow:0 8px 25px var(--accent-glow);background:linear-gradient(135deg,#3b82f6,#60a5fa);transform:translateY(-2px)}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.combo-card{border:1px solid var(--border-color);cursor:pointer;background:#ffffff05;border-radius:12px;margin-bottom:16px;padding:20px;transition:all .25s;position:relative;overflow:hidden}.combo-card:before{content:"";background:0 0;width:4px;height:100%;transition:all .25s;position:absolute;top:0;left:0}.combo-card:hover{background:#ffffff0f;transform:translate(4px)}.combo-card.active{background:#3b82f614;border-color:#3b82f666;box-shadow:0 8px 24px #0003,inset 0 0 20px #3b82f60d}.combo-card.active:before{background:#3b82f6}.combo-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.combo-rank{color:#f8fafc;align-items:center;gap:8px;font-size:1.2rem;font-weight:700;display:flex}.combo-rank span{color:#60a5fa}.combo-error{color:#34d399;background:#10b98126;border-radius:20px;align-items:center;gap:4px;padding:6px 12px;font-size:.85rem;font-weight:600;display:flex}.sat-list{flex-wrap:wrap;gap:8px;display:flex}.sat-badge{color:#cbd5e1;letter-spacing:.02em;background:#ffffff14;border-radius:8px;padding:6px 10px;font-size:.8rem;font-weight:500}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}.canvas-container{z-index:1;flex:1;width:100%;height:100%;position:absolute;top:0;left:0}.controls{z-index:10;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);background:#0a0f19cc;border-radius:16px;flex-direction:column;gap:16px;padding:20px 24px;display:flex;position:absolute;bottom:32px;right:32px;box-shadow:0 10px 30px #00000080}.controls-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:4px;font-size:.85rem;font-weight:600}.toggle-label{cursor:pointer;color:#e2e8f0;align-items:center;gap:12px;font-size:.95rem;transition:color .2s;display:flex}.toggle-label:hover{color:#fff}.toggle-label input{appearance:none;border:2px solid var(--border-color);cursor:pointer;background:#ffffff0d;border-radius:6px;width:20px;height:20px;transition:all .2s;position:relative}.toggle-label input:checked{background:var(--accent-blue);border-color:var(--accent-blue)}.toggle-label input:checked:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;position:absolute;top:2px;left:5px;transform:rotate(45deg)}.loading-overlay{background:var(--bg-dark);z-index:100;color:#fff;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.spinner{border:4px solid #3b82f633;border-top-color:#3b82f6;border-radius:50%;width:50px;height:50px;margin-bottom:24px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}