/* ===== BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--tx:#1a1916;--t2:#6b6960;--t3:#9c9a92;--bd:#e2e0d8;--s2:#f8f7f4;--blue:#1a5fa8;--green:#2d7a3a;--red:#b91c1c;--r:8px;--rl:14px}
html,body{min-height:100%;width:100%;max-width:100vw;overflow-x:hidden;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--tx);-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#1a1916 0%,#2a2724 55%,#0c2d54 100%);overscroll-behavior:none}
h1,h2,h3{font-family:'Syne',sans-serif}
input,select,button{font-family:inherit;font-size:15px;color:inherit;max-width:100%}
.hidden{display:none!important}

/* SCREENS */
.screen{display:none;min-height:100vh;background:linear-gradient(135deg,#1a1916 0%,#2a2724 55%,#0c2d54 100%);align-items:center;justify-content:center;padding:24px 16px}
.screen.active{display:flex;flex-direction:column}

/* WELCOME */
.welcome-wrap{width:100%;max-width:500px;margin:auto;text-align:center}
.welcome-hero{margin-bottom:36px}
.hero-icon{font-size:56px;display:inline-block;margin-bottom:12px;animation:gearEntry 1.2s cubic-bezier(0.4,0,0.2,1) forwards;transform-origin:center;color:#fff;filter:drop-shadow(0 0 12px rgba(255,255,255,0.4))}
.hero-icon.spinning{animation:gearEntry 1.2s cubic-bezier(0.4,0,0.2,1) forwards,gearLoop 3s linear 1.2s infinite}
@keyframes gearEntry{0%{transform:rotate(0deg) scale(0.6);opacity:0}40%{opacity:1}70%{transform:rotate(390deg) scale(1.08)}85%{transform:rotate(345deg) scale(0.97)}100%{transform:rotate(360deg) scale(1);opacity:1}}
@keyframes gearLoop{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.welcome-hero h1{font-size:32px;font-weight:700;color:#fff;margin-bottom:6px}
.welcome-hero p{color:rgba(255,255,255,.6);font-size:15px;line-height:1.6}
.role-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.role-card{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);border-radius:14px;padding:20px;cursor:pointer;transition:all .2s;text-align:left}
.role-card:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.role-icon{font-size:32px;flex-shrink:0}
.role-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:3px}
.role-desc{font-size:12px;color:rgba(255,255,255,.55);line-height:1.4}
.role-arrow{margin-left:auto;font-size:20px;color:rgba(255,255,255,.4);flex-shrink:0}
.btn-link-sm{background:none;border:none;color:rgba(255,255,255,.4);font-size:13px;cursor:pointer;margin-top:8px;padding:8px}
.btn-link-sm:hover{color:rgba(255,255,255,.7)}

/* AUTH CARD */
.auth-card{background:#fff;border-radius:20px;padding:36px 32px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,.3);margin:auto}
@media(max-width:480px){.auth-card{padding:28px 20px}}
.auth-brand{text-align:center;margin-bottom:24px}
.brand-icon{font-size:44px;display:block;margin-bottom:10px}
.brand-icon.small{font-size:36px}
.auth-brand h2{font-size:22px;font-weight:700}
.auth-brand p{color:var(--t2);font-size:13px;margin-top:4px}

/* TOGGLE TABS — Login / Register */
.toggle-tabs{display:flex;background:var(--s2);border-radius:var(--r);padding:4px;margin-bottom:20px;gap:4px}
.tab{flex:1;padding:9px;border:none;border-radius:6px;background:none;cursor:pointer;font-size:13px;font-weight:500;color:var(--t2)}
.tab.active{background:#fff;color:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* AUTH METHOD TOGGLE — Phone OTP / Email OTP (login forms) */
.auth-method-toggle{display:flex;background:var(--s2);border-radius:var(--r);padding:4px;margin-bottom:20px;gap:4px;border:1.5px solid var(--bd)}
.am-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border:none;border-radius:6px;background:none;color:var(--t2);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s ease}
.am-tab:hover{color:var(--blue)}
.am-tab.active{background:#fff;color:var(--blue);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* VERIFY VIA — Phone / Email (register forms) */
.verify-via-row{display:flex;align-items:center;gap:8px;margin:4px 0 16px;flex-wrap:wrap}
.verify-via-row span{font-size:12px;color:var(--t2);font-weight:600;white-space:nowrap}
.verify-via-row .vm-tabs{display:flex;background:var(--s2);border-radius:var(--r);padding:3px;gap:3px;border:1.5px solid var(--bd);flex:1}
.vm-tab{flex:1;padding:8px 10px;border:none;border-radius:5px;background:none;color:var(--t2);font-size:12px;font-weight:500;cursor:pointer;transition:all .18s ease;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.vm-tab:hover{color:var(--blue)}
.vm-tab.active{background:#fff;color:var(--blue);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* BACK */
.back-btn{background:none;border:none;color:var(--t2);font-size:13px;cursor:pointer;padding:0;margin-bottom:20px;display:inline-flex;align-items:center;gap:4px}
.back-btn:hover{color:var(--tx)}

/* FORMS */
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
label{font-size:12px;color:var(--t2);font-weight:500}
input[type=text],input[type=email],input[type=tel],input[type=password],select{height:48px;padding:0 13px;border:1.5px solid var(--bd);border-radius:var(--r);font-size:15px;background:#fff;color:var(--tx);width:100%;transition:all .2s cubic-bezier(0.4,0,0.2,1)}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,95,168,.1)}
.phone-wrap{display:flex;gap:8px}
.phone-wrap select{width:100px;flex-shrink:0}
.phone-wrap input{flex:1}

/* OTP */
.otp-boxes{display:flex;gap:8px;margin:8px 0}
.otp-box{width:48px;height:56px;text-align:center;font-size:24px;font-weight:700;border:2px solid var(--bd);border-radius:var(--r);padding:0;transition:all .2s cubic-bezier(0.4,0,0.2,1)}
.otp-box:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,95,168,.1)}
@media(max-width:400px){.otp-box{width:38px;height:48px;font-size:18px}}
.otp-sent-info{display:flex;align-items:center;gap:12px;background:var(--s2);border-radius:var(--r);padding:12px 14px;margin-bottom:16px;font-size:13px;line-height:1.5}
.otp-sent-info span{font-size:24px;flex-shrink:0}
.resend-row{text-align:center;margin-top:10px;font-size:13px;color:var(--t2);display:flex;align-items:center;justify-content:center;gap:8px}
.btn-link{background:none;border:none;color:var(--blue);cursor:pointer;font-size:13px;font-weight:500}

/* BUTTONS */
.btn-main{display:block;width:100%;min-height:48px;background:#1a1916;color:#fff;border:none;border-radius:var(--r);font-size:15px;font-weight:600;cursor:pointer;margin-top:6px;transition:all .2s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center}
.btn-main:hover{opacity:.85;transform:translateY(-1px)}
.btn-main:active{transform:scale(0.97);opacity:1}

/* ERROR */
.err-box{background:#fef2f2;color:var(--red);border:1px solid #fca5a5;border-radius:var(--r);padding:10px 14px;font-size:13px;margin:8px 0;line-height:1.5}

/* LOADING */
.loading{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center}
.loading-box{background:#fff;border-radius:14px;padding:32px 40px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.spinner{width:40px;height:40px;border:3px solid #e2e0d8;border-top-color:#1a1916;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-box p{font-size:13px;color:#6b6960}