.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:linear-gradient(145deg,#1a1a2e,#16162a);border:1px solid #ffffff1a;border-radius:24px;width:100%;max-width:440px;max-height:90vh;padding:40px 32px;animation:.3s ease-out modalAppear;position:relative;overflow-y:auto;box-shadow:0 25px 50px -12px #00000080}@keyframes modalAppear{0%{opacity:0;transform:scale(.95)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{text-align:center;margin-bottom:24px}.modal-welcome{justify-content:center;align-items:center;gap:12px;margin-bottom:8px;display:flex}.wave-emoji{font-size:32px;animation:1.5s ease-in-out infinite wave}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(20deg)}75%{transform:rotate(-10deg)}}.modal-header h2{color:#f8fafc;margin:0;font-size:26px;font-weight:700}.modal-header p{color:#94a3b8;margin-top:8px;font-size:15px}.modal-form{flex-direction:column;gap:20px;display:flex}.avatar-upload{flex-direction:column;align-items:center;gap:8px;display:flex}.avatar-container{cursor:pointer;width:100px;height:100px;transition:transform .2s;position:relative}.avatar-container:hover{transform:scale(1.05)}.avatar-image{object-fit:cover;border:3px solid #7c3aed80;border-radius:50%;width:100%;height:100%}.avatar-placeholder{color:#7c3aedb3;background:linear-gradient(135deg,#7c3aed33,#8b5cf61a);border:2px dashed #7c3aed66;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.avatar-edit-btn{color:#fff;background:linear-gradient(135deg,#7c3aed,#8b5cf6);border:2px solid #1a1a2e;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:absolute;bottom:0;right:0;box-shadow:0 4px 12px #7c3aed66}.avatar-label{color:#64748b;font-size:13px}.phone-input-group{flex-direction:column;gap:8px;display:flex}.phone-label{color:#e2e8f0;font-size:14px;font-weight:500}.phone-input-wrapper{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;align-items:center;transition:border-color .2s,box-shadow .2s;display:flex;overflow:hidden}.phone-input-wrapper:focus-within{border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.country-code{color:#94a3b8;background:#ffffff08;border-right:1px solid #ffffff1a;padding:14px 16px;font-size:15px;font-weight:500}.phone-input{color:#f8fafc;background:0 0;border:none;outline:none;flex:1;padding:14px 16px;font-size:15px}.phone-input::placeholder{color:#64748b}.modal-info{color:#94a3b8;text-align:center;background:#ffffff0d;border-radius:12px;padding:12px;font-size:14px}.modal-info strong{color:#f8fafc}.modal-error{color:#ef4444;text-align:center;background:#ef44441a;border:1px solid #ef444433;border-radius:12px;padding:12px;font-size:14px}.modal-note{color:#64748b;text-align:center;margin:0;font-size:12px}@media (max-width:480px){.modal-content{padding:32px 24px}.modal-header h2{font-size:22px}.avatar-container{width:80px;height:80px}.avatar-edit-btn{width:28px;height:28px}}
.phone-modal-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1100;background:#000000d9;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.phone-modal{text-align:center;background:#1a1a2e;border:1px solid #ffffff1a;border-radius:24px;width:100%;max-width:400px;padding:32px 28px;animation:.3s slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.phone-modal-icon{color:#fff;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;margin:0 auto 20px;display:flex}.phone-modal h2{color:#fff;margin:0 0 8px;font-size:1.5rem;font-weight:700}.phone-modal-subtitle{color:#fff9;margin:0 0 24px;font-size:.9rem;line-height:1.5}.phone-modal-form{flex-direction:column;gap:16px;display:flex}.phone-input-wrapper{background:#ffffff14;border:2px solid #ffffff1f;border-radius:14px;align-items:center;transition:border-color .2s;display:flex;overflow:hidden}.phone-input-wrapper:focus-within{border-color:#8b5cf6}.country-code{color:#ffffffb3;background:#ffffff0d;border-right:1px solid #ffffff1a;padding:16px;font-size:1rem;font-weight:600}.phone-input{color:#fff;letter-spacing:2px;background:0 0;border:none;outline:none;flex:1;padding:16px;font-size:1.1rem;font-weight:500}.phone-input::placeholder{color:#ffffff4d;letter-spacing:0;font-weight:400}.phone-error{color:#ef4444;margin:0;font-size:.85rem}.phone-submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:14px;justify-content:center;align-items:center;gap:10px;width:100%;padding:16px 24px;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.phone-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #8b5cf666}.phone-submit-btn:disabled{opacity:.6;cursor:not-allowed}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.phone-privacy-note{color:#fff6;margin:20px 0 0;font-size:.75rem}@media (max-width:480px){.phone-modal{padding:24px 20px}.phone-modal h2{font-size:1.3rem}}
.auth-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.auth-modal{text-align:center;background:linear-gradient(145deg,#1e1e28f2 0%,#14141efa 100%);border:1px solid #ffffff1a;border-radius:24px;width:100%;max-width:440px;padding:40px;animation:.3s slideUp;position:relative;box-shadow:0 25px 80px #00000080}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.auth-modal h1{color:var(--text-primary);margin-bottom:8px;font-size:28px;font-weight:700}.auth-modal-subtitle{color:var(--text-muted);margin-bottom:28px;font-size:15px;line-height:1.5}.auth-modal-close{width:36px;height:36px;color:var(--text-muted);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:16px;right:16px}.auth-modal-close:hover{color:var(--text-primary);background:#ffffff1a;border-color:#fff3}.auth-modal-back{width:36px;height:36px;color:var(--text-muted);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:16px;left:16px}.auth-modal-back:hover{border-color:var(--primary);color:var(--primary);background:#ffffff1a}.auth-modal .google-signin-container{justify-content:center;width:100%;min-height:44px;margin-bottom:1.5rem;display:flex}.auth-modal-divider{color:var(--text-muted);align-items:center;margin:20px 0;font-size:13px;display:flex}.auth-modal-divider:before,.auth-modal-divider:after{content:"";background:#ffffff1a;flex:1;height:1px}.auth-modal-divider span{padding:0 16px}.auth-modal-form{text-align:left;flex-direction:column;gap:18px;display:flex}.auth-modal-error{color:#ef4444;text-align:center;background:#ef44441a;border:1px solid #ef44444d;border-radius:12px;padding:12px 16px;font-size:14px}.auth-modal-btn{margin-top:4px}.auth-modal .otp-input-container{justify-content:center;gap:10px;margin:8px 0 20px;display:flex}.auth-modal .otp-input{text-align:center;width:46px;height:54px;color:var(--text-primary);background:#ffffff0d;border:2px solid #ffffff26;border-radius:12px;font-size:22px;font-weight:600;transition:all .2s}.auth-modal .otp-input:focus{border-color:var(--primary);background:#7c3aed1a;outline:none;box-shadow:0 0 0 3px #7c3aed33}.auth-modal .resend-otp{text-align:center;color:var(--text-muted);margin-top:12px;font-size:14px}.auth-modal .resend-btn{color:var(--primary);cursor:pointer;background:0 0;border:none;font-size:14px;font-weight:600;transition:opacity .2s}.auth-modal .resend-btn:hover{opacity:.8;text-decoration:underline}@media (max-width:480px){.auth-modal{margin:10px;padding:28px 24px}.auth-modal h1{font-size:24px}.auth-modal .otp-input{width:40px;height:48px;font-size:18px}}