*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark:#0d0d1a;--bg-card:#ffffff0a;--bg-card-hover:#ffffff12;--border:#ffffff14;--border-active:#8b5cf680;--purple:#8b5cf6;--purple-dark:#6d28d9;--pink:#ec4899;--cyan:#06b6d4;--gold:#f59e0b;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#475569;--shadow-glow:0 0 40px #8b5cf64d;--shadow-card:0 8px 32px #0006;--radius:16px;--radius-sm:8px;--transition:all .25s cubic-bezier(.4, 0, .2, 1)}body,html{background:var(--bg-dark);height:100%;color:var(--text-primary);font-family:Outfit,sans-serif;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 50% at 20% 20%,#8b5cf61f,#0000 60%),radial-gradient(60% 40% at 80% 80%,#ec489914,#0000 60%),radial-gradient(50% 60% at 50% 100%,#06b6d40f,#0000 60%);position:fixed;inset:0}#app{z-index:1;min-height:100vh;position:relative}.app-container{flex-direction:column;min-height:100vh;display:flex}.header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:100;background:#0d0d1acc;justify-content:space-between;padding:20px 32px;position:sticky;top:0}.header,.header-logo,.header-logo .icon{align-items:center;display:flex}.header-logo{gap:12px}.header-logo .icon{background:linear-gradient(135deg,var(--purple),var(--pink));border-radius:10px;justify-content:center;width:40px;height:40px;font-size:20px}.header-logo h1{background:linear-gradient(135deg,#fff 0,var(--purple) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:20px;font-weight:700}.header-badge{color:var(--purple);letter-spacing:.05em;text-transform:uppercase;background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:100px;padding:4px 10px;font-size:11px;font-weight:600}.main-content{flex:1;grid-template-columns:1fr auto 1fr;align-items:start;gap:32px;width:100%;max-width:1400px;margin:0 auto;padding:32px;display:grid}.left-panel{flex-direction:column;gap:16px;display:flex}.panel-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition);padding:20px}.panel-card:hover{border-color:var(--border-active);background:var(--bg-card-hover)}.panel-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);align-items:center;gap:8px;margin-bottom:16px;font-size:13px;font-weight:600;display:flex}.panel-title .dot{background:linear-gradient(135deg,var(--purple),var(--pink));border-radius:50%;width:6px;height:6px}.name-list{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex-direction:column;gap:8px;max-height:300px;display:flex;overflow-y:auto}.name-item{border-radius:var(--radius-sm);transition:var(--transition);cursor:default;background:#ffffff08;border:1px solid #0000;align-items:center;gap:10px;padding:10px 12px;display:flex}.name-item:hover{border-color:var(--border);background:#ffffff0f}.name-item .color-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.name-item .name-text{flex:1;font-size:14px;font-weight:500}.name-item .delete-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition);opacity:0;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:16px;line-height:1}.name-item:hover .delete-btn{opacity:1}.name-item .delete-btn:hover{color:#ef4444;background:#ef44441a}.add-name-form{gap:8px;margin-top:12px;display:flex}.input-field{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);transition:var(--transition);background:#ffffff0d;outline:none;flex:1;padding:10px 14px;font-family:Outfit,sans-serif;font-size:14px}.input-field:focus{border-color:var(--purple);background:#8b5cf60d;box-shadow:0 0 0 3px #8b5cf61a}.input-field::placeholder{color:var(--text-muted)}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:none;align-items:center;gap:6px;padding:10px 18px;font-family:Outfit,sans-serif;font-size:14px;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple-dark));color:#fff;box-shadow:0 4px 15px #8b5cf64d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #8b5cf666}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:var(--text-primary);border:1px solid var(--border);background:#ffffff0f}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.btn-danger{color:#ef4444;background:#ef44441a;border:1px solid #ef444433}.btn-danger:hover{background:#ef444433}.btn-sm{padding:7px 12px;font-size:12px}.btn-full{justify-content:center;width:100%}.wheel-center{flex-direction:column;align-items:center;gap:24px;padding:20px 0;display:flex}.spin-btn{cursor:pointer;background:linear-gradient(135deg,var(--purple) 0,var(--pink) 100%);color:#fff;letter-spacing:.08em;text-transform:uppercase;border:none;border-radius:50%;width:80px;height:80px;font-family:Outfit,sans-serif;font-size:12px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 0 30px #8b5cf680,0 8px 20px #0000004d}.spin-btn:before{content:"";background:linear-gradient(135deg,#fff3,#0000);border-radius:50%;position:absolute;inset:2px}.spin-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 0 50px #8b5cf6b3,0 12px 30px #0006}.spin-btn:active:not(:disabled){transform:scale(.97)}.spin-btn:disabled{opacity:.6;cursor:not-allowed}.result-display{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;min-height:80px;display:flex}.result-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:12px;font-weight:600}.result-name{background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:800;animation:.4s cubic-bezier(.175,.885,.32,1.275) resultPop}@keyframes resultPop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.history-list{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex-direction:column;gap:6px;max-height:200px;display:flex;overflow-y:auto}.history-item{border-radius:var(--radius-sm);background:#ffffff08;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;animation:.25s slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.history-item .h-name{font-weight:600}.history-item .h-time{color:var(--text-muted);font-size:11px}.confetti-container{pointer-events:none;z-index:999;position:fixed;inset:0;overflow:hidden}.confetti-particle{border-radius:2px;width:8px;height:8px;animation:linear forwards confettiFall;position:absolute}@keyframes confettiFall{0%{opacity:1;transform:translateY(-20px)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(2turn)}}.troll-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200;background:#000000b3;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.troll-panel{background:#13131f;border:1px solid #8b5cf64d;border-radius:20px;width:400px;max-width:90vw;padding:28px;animation:.3s cubic-bezier(.175,.885,.32,1.275) panelIn;box-shadow:0 20px 60px #0009,0 0 40px #8b5cf626}@keyframes panelIn{0%{opacity:0;transform:scale(.85)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.troll-header{justify-content:space-between;margin-bottom:20px}.close-btn,.troll-header,.troll-title{align-items:center;display:flex}.troll-title{gap:10px}.troll-title .skull{font-size:24px}.troll-title h2{background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:18px;font-weight:700}.close-btn{border:1px solid var(--border);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:#ffffff0d;border-radius:8px;justify-content:center;font-size:18px}.close-btn:hover{color:#ef4444;background:#ef44441a;border-color:#ef44444d}.troll-section{margin-bottom:20px}.troll-section-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;font-size:12px;font-weight:600}.mode-options{flex-direction:column;gap:8px;display:flex}.mode-option{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);-webkit-user-select:none;user-select:none;align-items:center;gap:12px;padding:12px 14px;display:flex}.mode-option:hover{background:#8b5cf60d;border-color:#8b5cf666}.mode-option.active{border-color:var(--purple);background:#8b5cf61a}.mode-option input[type=radio]{accent-color:var(--purple);width:16px;height:16px}.mode-option .mode-info{flex:1}.mode-option .mode-name{font-size:14px;font-weight:600}.mode-option .mode-desc{color:var(--text-muted);margin-top:2px;font-size:12px}.target-select{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);transition:var(--transition);cursor:pointer;background:#ffffff0d;outline:none;padding:10px 14px;font-family:Outfit,sans-serif;font-size:14px}.target-select:focus{border-color:var(--purple);box-shadow:0 0 0 3px #8b5cf61a}.target-select option{color:var(--text-primary);background:#13131f}.troll-tip{border-radius:var(--radius-sm);color:var(--gold);background:#f59e0b0f;border:1px solid #f59e0b33;align-items:flex-start;gap:8px;padding:12px;font-size:12px;line-height:1.5;display:flex}.troll-tip .tip-icon{flex-shrink:0;font-size:14px}.troll-active-badge{color:#ef4444;letter-spacing:.05em;text-transform:uppercase;background:#ef44441a;border:1px solid #ef44444d;border-radius:100px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:600;animation:2s infinite pulseBadge;display:flex}@keyframes pulseBadge{0%,to{box-shadow:0 0 #ef44444d}50%{box-shadow:0 0 0 6px #ef444400}}.troll-active-badge .pulse-dot{background:#ef4444;border-radius:50%;width:6px;height:6px}.wheel-wrapper{justify-content:center;align-items:center;display:flex;position:relative}.wheel-pointer{filter:drop-shadow(0 2px 8px #00000080);z-index:10;border-top:28px solid #f1f5f9;border-left:14px solid #0000;border-right:14px solid #0000;width:0;height:0;position:absolute;top:-10px;left:50%;transform:translate(-50%)}.wheel-glow{pointer-events:none;background:radial-gradient(circle,#8b5cf626,#0000 70%);border-radius:50%;position:absolute;inset:-20px}.shortcuts-hint{text-align:center;color:var(--text-muted);padding:12px;font-size:12px}.shortcuts-hint kbd{border:1px solid var(--border);color:var(--text-secondary);background:#ffffff0f;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:11px;display:inline-block}.empty-state{text-align:center;color:var(--text-muted);padding:20px;font-size:13px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff26}@media (width<=1100px){.main-content{grid-template-columns:260px 1fr 260px;gap:20px;padding:20px}}@media (width<=860px){.main-content{grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:16px;padding:16px}.wheel-center{order:-1}}@media (width<=600px){.header{padding:14px 16px}.header-logo h1{font-size:16px}.main-content{gap:12px;padding:12px}}