.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(8px)}.modal-content{background:var(--modal-bg, white);border-radius:24px;max-width:520px;width:90%;max-height:90vh;overflow:hidden;box-shadow:0 32px 64px #0006;animation:modalSlideIn .4s cubic-bezier(.16,1,.3,1);border:none;position:relative}.modal-content:before{content:"";position:absolute;inset:0;background:var(--modal-bg, white);border-radius:24px;z-index:-1}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(32px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:28px 28px 20px;border-bottom:1px solid var(--modal-border, #e5e7eb);background:var(--modal-bg, white);border-radius:24px 24px 0 0}.modal-header h2{margin:0;font-size:1.75rem;font-weight:700;color:var(--modal-text-primary, #111827);letter-spacing:-.025em}.close-btn{background:var(--close-btn-bg, #f3f4f6);border:none;font-size:1.25rem;cursor:pointer;padding:8px;border-radius:12px;color:var(--modal-text-secondary, #6b7280);transition:all .2s cubic-bezier(.4,0,.2,1);width:40px;height:40px;display:flex;align-items:center;justify-content:center}.close-btn:hover:not(:disabled){background:var(--close-btn-hover-bg, #e5e7eb);color:var(--modal-text-primary, #374151);transform:scale(1.05)}.modal-body{padding:28px;background:var(--modal-bg, white)}.step-content{text-align:center}.brand-section{position:relative;margin-bottom:24px;display:flex;justify-content:center}.brand-banner{height:60px;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15));transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2;position:relative}.brand-banner:hover{transform:scale(1.05);filter:drop-shadow(0 12px 24px rgba(0,0,0,.2))}.brand-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:80px;background:radial-gradient(circle,var(--brand-glow-color, rgba(99, 102, 241, .1)) 0%,transparent 70%);border-radius:50%;z-index:1;animation:brandGlow 3s ease-in-out infinite}@keyframes brandGlow{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}.step-content h3{margin:0 0 16px;font-size:1.5rem;font-weight:700;color:var(--modal-text-primary, #111827);letter-spacing:-.025em}.feature-description{color:var(--modal-text-secondary, #6b7280);line-height:1.7;font-size:1.1rem;max-width:400px;margin:0 auto 32px}.discord-info{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px;background:var(--discord-info-bg, #f8fafc);border-radius:16px;margin-bottom:32px;border:1px solid var(--discord-info-border, #e5e7eb);transition:all .2s cubic-bezier(.4,0,.2,1)}.discord-info:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001a}.discord-logo{color:#5865f2;display:flex;align-items:center;justify-content:center}.discord-details{text-align:left}.discord-details strong{display:block;color:var(--modal-text-primary, #111827);font-size:1.1rem;font-weight:600;margin-bottom:4px}.discord-details span{color:var(--modal-text-secondary, #6b7280);font-size:.9rem}.action-buttons{display:flex;flex-direction:column;gap:16px}.btn{padding:16px 28px;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:12px;letter-spacing:-.01em;min-height:56px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#5865f2,#4752c4);color:#fff;box-shadow:0 4px 16px #5865f24d}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#4752c4,#3c45a5);transform:translateY(-2px);box-shadow:0 8px 24px #5865f266}.btn-secondary{background:var(--btn-secondary-bg, #f3f4f6);color:var(--btn-secondary-text, #374151);border:1px solid var(--btn-secondary-border, #d1d5db)}.btn-secondary:hover:not(:disabled){background:var(--btn-secondary-hover, #e5e7eb);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.discord-btn{background:linear-gradient(135deg,#5865f2,#4752c4)}.discord-icon{display:flex;align-items:center;justify-content:center}.loading-spinner{width:20px;height:20px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-message{background:var(--error-bg, #fef2f2);color:var(--error-text, #dc2626);padding:16px;border-radius:12px;margin-bottom:20px;border:1px solid var(--error-border, #fecaca);font-weight:500}.modal-footer{padding:20px 28px 28px;border-top:1px solid var(--modal-border, #e5e7eb);background:var(--modal-bg, white);border-radius:0 0 24px 24px}.footer-text{margin:0;font-size:.9rem;color:var(--modal-text-secondary, #6b7280);text-align:center;line-height:1.5}:root{--modal-bg: white;--modal-border: #e5e7eb;--modal-text-primary: #111827;--modal-text-secondary: #6b7280;--modal-hover-bg: #f3f4f6;--close-btn-bg: #f3f4f6;--close-btn-hover-bg: #e5e7eb;--discord-info-bg: #f8fafc;--discord-info-border: #e5e7eb;--btn-secondary-bg: #f9fafb;--btn-secondary-text: #374151;--btn-secondary-border: #d1d5db;--btn-secondary-hover: #f3f4f6;--error-bg: #fef2f2;--error-text: #dc2626;--error-border: #fecaca;--brand-glow-color: rgba(99, 102, 241, .1)}[data-theme=dark]{--modal-bg: #111827;--modal-border: #374151;--modal-text-primary: #f9fafb;--modal-text-secondary: #d1d5db;--modal-hover-bg: #374151;--close-btn-bg: #374151;--close-btn-hover-bg: #4b5563;--discord-info-bg: #1f2937;--discord-info-border: #374151;--btn-secondary-bg: #374151;--btn-secondary-text: #f9fafb;--btn-secondary-border: #4b5563;--btn-secondary-hover: #4b5563;--error-bg: #7f1d1d;--error-text: #fecaca;--error-border: #dc2626;--brand-glow-color: rgba(99, 102, 241, .2)}:root:not([data-theme]){--modal-bg: white;--modal-border: #e5e7eb;--modal-text-primary: #111827;--modal-text-secondary: #6b7280;--modal-hover-bg: #f3f4f6;--close-btn-bg: #f3f4f6;--close-btn-hover-bg: #e5e7eb;--discord-info-bg: #f8fafc;--discord-info-border: #e5e7eb;--btn-secondary-bg: #f9fafb;--btn-secondary-text: #374151;--btn-secondary-border: #d1d5db;--btn-secondary-hover: #f3f4f6;--error-bg: #fef2f2;--error-text: #dc2626;--error-border: #fecaca;--brand-glow-color: rgba(99, 102, 241, .1)}@media (max-width: 640px){.modal-content{width:95%;margin:20px;border-radius:20px}.modal-header,.modal-body,.modal-footer{padding:24px}.modal-header h2{font-size:1.5rem}.brand-banner{height:50px}.feature-description{font-size:1rem}}
