/* ═══════════════════════════════════════════════════════
   REGISTER.CSS — Ancient Vedic Registration + Sylvy Sidebar
   AeroField OS V1.0 · बोद्धिक प्रवेश द्वार
   ═══════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
    height:100vh;
    overflow:hidden;
    font-family:'Inter',sans-serif;
    background:#050a0e;
    color:#e2e8ef;
    -webkit-font-smoothing:antialiased;
}
::selection{background:#2dd4a833;color:#fff}

/* ── CANVAS BG ── */
#regBg{
    position:fixed;inset:0;z-index:0;
    pointer-events:none;opacity:.45;
}

/* ═══════════════════════
   NAVBAR
   ═══════════════════════ */
.reg-navbar{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 32px;height:56px;
    background:rgba(5,10,14,.8);
    backdrop-filter:blur(18px) saturate(1.4);
    border-bottom:1px solid rgba(191,149,63,.12);
}
.reg-logo{
    display:flex;align-items:center;gap:8px;
    font-family:'Cinzel',serif;font-size:15px;font-weight:600;
    color:#ffd277;text-decoration:none;letter-spacing:.6px;
}
.reg-logo svg{color:#ffd277}
.reg-nav-title{
    font-family:'Noto Sans Devanagari','Rajdhani',sans-serif;
    font-size:12px;color:rgba(255,210,119,.5);
    letter-spacing:1.2px;text-transform:uppercase;
}
.reg-nav-right{display:flex;align-items:center;gap:16px}
.reg-nav-secure{
    display:flex;align-items:center;gap:4px;
    font-size:10px;color:rgba(45,212,168,.55);
    font-family:'JetBrains Mono',monospace;
    letter-spacing:.5px;text-transform:uppercase;
}
.reg-back-btn{
    font-size:12px;color:#ffd277;text-decoration:none;
    font-family:'Rajdhani',sans-serif;font-weight:500;
    padding:4px 12px;border:1px solid rgba(255,210,119,.2);
    border-radius:6px;transition:all .3s;
}
.reg-back-btn:hover{
    background:rgba(255,210,119,.08);border-color:rgba(255,210,119,.4);
}

/* ═══════════════════════
   MAIN — 3:1 Flex Split
   ═══════════════════════ */
.reg-main{
    display:flex;
    margin-top:56px;
    height:calc(100vh - 56px - 34px);
    position:relative;z-index:1;
    overflow:hidden;
}
.reg-left{
    flex:3;
    display:flex;flex-direction:column;align-items:center;
    padding:10px 24px 6px;
    overflow-y:auto;overflow-x:hidden;
    scrollbar-width:none;
}
.reg-left::-webkit-scrollbar{display:none}
.reg-mid{
    flex:0 0 auto;
    width:180px;
    display:flex;flex-direction:column;
    padding:10px 8px;
    border-left:1px solid rgba(191,149,63,.08);
    border-right:1px solid rgba(45,212,168,.08);
    background:rgba(5,10,14,.3);
    overflow-y:auto;overflow-x:hidden;
    scrollbar-width:none;
}
.reg-mid::-webkit-scrollbar{display:none}
.af-mid-header{
    display:flex;align-items:center;gap:6px;
    margin-bottom:8px;
    padding-bottom:6px;
    border-bottom:1px solid rgba(191,149,63,.1);
}
.af-mid-ico{color:rgba(255,210,119,.5)}
.af-mid-title{
    font-family:'Rajdhani',sans-serif;
    font-size:12px;font-weight:600;
    color:rgba(255,210,119,.6);
    letter-spacing:.5px;
}
.reg-right{
    flex:1;
    display:flex;flex-direction:column;
    min-width:300px;max-width:380px;
    border-left:1px solid rgba(45,212,168,.08);
    background:rgba(5,10,14,.4);
}

/* ═══════════════════════
   VEDIC HEADER
   ═══════════════════════ */
.vedic-header{
    display:flex;align-items:center;gap:10px;
    margin-bottom:6px;width:100%;max-width:680px;
}
.vedic-yantra{
    position:relative;width:44px;height:44px;flex-shrink:0;
}
.vedic-yantra-inner{
    position:absolute;inset:8px;
    border:2px solid rgba(255,210,119,.6);
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,210,119,.08),transparent);
}
.vedic-yantra-inner::before{
    content:'ॐ';position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:'Noto Sans Devanagari',serif;
    font-size:13px;color:#ffd277;
}
.vedic-yantra-ring{
    position:absolute;inset:0;
    border:1.5px solid rgba(255,210,119,.25);
    border-radius:50%;
    animation:vedicSpin 25s linear infinite;
}
.vedic-yantra-ring--2{
    inset:4px;
    border-style:dashed;
    animation-direction:reverse;
    animation-duration:35s;
}
@keyframes vedicSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.vedic-header-text{flex:1}
.vedic-title{
    font-family:'Noto Sans Devanagari',serif;
    font-size:clamp(18px,2.5vw,24px);font-weight:600;
    color:#ffd277;
    text-shadow:0 0 20px rgba(255,210,119,.2);
    letter-spacing:1px;
}
.vedic-subtitle{
    font-family:'Cinzel',serif;
    font-size:10px;color:rgba(255,210,119,.45);
    letter-spacing:1.5px;text-transform:uppercase;
    margin-top:2px;
}

/* ═══════════════════════
   SHLOKA BAND
   ═══════════════════════ */
.vedic-shloka-band{
    width:100%;max-width:680px;
    text-align:center;
    padding:5px 16px;margin-bottom:6px;
    background:linear-gradient(135deg,rgba(191,149,63,.06),rgba(255,210,119,.04));
    border:1px solid rgba(191,149,63,.12);
    border-radius:12px;
    position:relative;overflow:hidden;
}
.vedic-shloka-band::before{
    content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(90deg,rgba(191,149,63,.04) 0 1px,transparent 1px 40px);
    pointer-events:none;
}
.vedic-shloka-sanskrit{
    font-family:'Noto Sans Devanagari',serif;
    font-size:12px;color:#ffd277;
    line-height:1.4;opacity:.85;
    transition:opacity .6s;
}
.vedic-shloka-english{
    font-family:'Inter',sans-serif;
    font-size:10px;color:rgba(255,210,119,.4);
    margin-top:1px;letter-spacing:.3px;
}

/* ═══════════════════════
   GATEWAY TILES
   ═══════════════════════ */
.gw-tiles{
    display:flex;gap:8px;
    width:100%;max-width:680px;
    margin-bottom:6px;
}
.gw-tile{
    flex:1;
    display:flex;align-items:center;gap:10px;
    padding:14px 12px;
    background:rgba(191,149,63,.04);
    border:1px solid rgba(191,149,63,.12);
    border-radius:10px;
    cursor:pointer;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    font-family:'Rajdhani',sans-serif;
    position:relative;overflow:hidden;
    color:rgba(226,232,239,.8);
}
.gw-tile::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(191,149,63,.06),transparent 60%);
    opacity:0;transition:opacity .35s;
}
.gw-tile:hover{
    border-color:rgba(191,149,63,.35);
    background:rgba(191,149,63,.08);
    transform:translateY(-2px);
    box-shadow:0 4px 20px rgba(191,149,63,.12),0 0 30px rgba(191,149,63,.05);
}
.gw-tile:hover::before{opacity:1}
.gw-tile:active{transform:translateY(0);transition-duration:.1s}
.gw-tile--login{border-color:rgba(0,188,212,.12)}
.gw-tile--login:hover{
    border-color:rgba(0,188,212,.35);
    background:rgba(0,188,212,.06);
    box-shadow:0 4px 20px rgba(0,188,212,.1),0 0 30px rgba(0,188,212,.04);
}
.gw-tile-icon{
    width:40px;height:40px;min-width:40px;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;
    background:rgba(191,149,63,.08);
    color:#d4a843;
    transition:all .35s;
}
.gw-tile--login .gw-tile-icon{background:rgba(0,188,212,.08);color:#00bcd4}
.gw-tile--seed{border-color:rgba(212,160,74,.15);text-decoration:none}
.gw-tile--seed:hover{
    border-color:rgba(212,160,74,.4);
    background:rgba(212,160,74,.07);
    box-shadow:0 4px 20px rgba(212,160,74,.12),0 0 30px rgba(212,160,74,.05);
}
.gw-tile--seed .gw-tile-icon{background:rgba(212,160,74,.1);color:#d4a04a}
.gw-tile:hover .gw-tile-icon{transform:scale(1.08)}
.gw-tile-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.gw-tile-title{font-size:13px;font-weight:600;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-tile-desc{font-size:10px;color:rgba(226,232,239,.4);font-weight:400}
.gw-tile-arrow{
    font-size:16px;font-weight:300;
    color:rgba(226,232,239,.2);
    transition:all .3s;
    margin-left:auto;
}
.gw-tile:hover .gw-tile-arrow{color:rgba(226,232,239,.6);transform:translateX(3px)}

/* ═══════════════════════
   BACK BUTTON
   ═══════════════════════ */
.gw-back-btn{
    display:flex;align-items:center;gap:4px;
    width:fit-content;
    background:none;border:1px solid rgba(191,149,63,.15);
    color:rgba(226,232,239,.5);
    font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:500;
    padding:4px 12px 4px 8px;
    border-radius:6px;cursor:pointer;
    margin-bottom:6px;
    transition:all .25s;
}
.gw-back-btn:hover{
    color:#ffd277;border-color:rgba(191,149,63,.35);
    background:rgba(191,149,63,.06);
}

/* ═══════════════════════
   FORM STYLES
   ═══════════════════════ */
.vedic-form{
    width:100%;max-width:680px;
    display:flex;flex-direction:column;gap:6px;
}
.vedic-form--hidden{display:none!important}
.vedic-form-row{display:flex;gap:10px}
.vedic-input-group{flex:1;display:flex;flex-direction:column;gap:2px}
.vedic-input-group--full{flex:1 1 100%}
.vedic-label{
    font-family:'Noto Sans Devanagari','Rajdhani',sans-serif;
    font-size:11px;font-weight:500;
    color:rgba(255,210,119,.55);
    letter-spacing:.3px;
}
.vedic-field{
    width:100%;padding:8px 12px;
    background:rgba(191,149,63,.04);
    border:1px solid rgba(191,149,63,.12);
    border-radius:7px;
    font-family:'Inter',sans-serif;font-size:12px;
    color:#e2e8ef;
    transition:all .3s;outline:none;
}
.vedic-field::placeholder{color:rgba(226,232,239,.25)}
.vedic-field:focus{
    border-color:rgba(255,210,119,.35);
    background:rgba(191,149,63,.07);
    box-shadow:0 0 14px rgba(191,149,63,.06);
}
.vedic-field--date::-webkit-calendar-picker-indicator{
    filter:invert(.6) sepia(.5) hue-rotate(10deg);cursor:pointer;
}
.vedic-field--select{
    appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ffd277' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:14px;
    padding-right:36px;
}

/* DOB row */
.vedic-dob-row{
    display:flex;gap:6px;
}
.vedic-dob-y{flex:1.3}
.vedic-dob-m{flex:1}
.vedic-dob-d{flex:0.8}
.vedic-dob-row select:disabled{
    opacity:.35;cursor:not-allowed;
}

/* Password Wrap */
.vedic-pass-wrap{position:relative;width:100%}
.vedic-pass-wrap .vedic-field{padding-right:40px}
.vedic-pass-toggle{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;
    color:rgba(255,210,119,.4);cursor:pointer;
    transition:color .3s;padding:4px;
}
.vedic-pass-toggle:hover{color:#ffd277}

/* ═══════════════════════
   AREA OF INTEREST GRID
   ═══════════════════════ */
.af-interests{
    width:100%;max-width:680px;
    margin-bottom:4px;
}
.af-interests-label{
    margin-bottom:5px;display:block;
}
.af-interest-grid{
    display:flex;flex-direction:column;
    gap:5px;
}
.af-int{
    display:flex;align-items:center;gap:6px;
    padding:6px 8px;
    background:rgba(226,232,239,.02);
    border:1px solid rgba(191,149,63,.08);
    border-radius:8px;
    cursor:pointer;
    transition:all .3s cubic-bezier(.4,0,.2,1);
    color:rgba(226,232,239,.45);
    font-family:'Rajdhani',sans-serif;
    position:relative;overflow:hidden;
    flex-direction:row;
}
.af-int::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 30%,rgba(191,149,63,.06),transparent 70%);
    opacity:0;transition:opacity .3s;
}
.af-int:hover{
    border-color:rgba(191,149,63,.25);
    color:rgba(226,232,239,.8);
    transform:translateY(-1px);
    background:rgba(191,149,63,.04);
}
.af-int:hover::before{opacity:1}
.af-int:hover .af-int-ico{color:#ffd277;transform:scale(1.1)}
.af-int--active{
    background:rgba(191,149,63,.1)!important;
    border-color:rgba(255,210,119,.4)!important;
    color:#ffd277!important;
    box-shadow:0 0 12px rgba(191,149,63,.1),inset 0 0 12px rgba(191,149,63,.04);
}
.af-int--active .af-int-ico{color:#ffd277}
.af-int--active::after{
    content:'';position:absolute;top:3px;right:3px;
    width:5px;height:5px;border-radius:50%;
    background:#ffd277;
    box-shadow:0 0 6px rgba(255,210,119,.5);
}
.af-int-ico{
    width:16px;height:16px;min-width:16px;
    color:rgba(226,232,239,.35);
    transition:all .3s;
}
.af-int span{
    font-size:9px;font-weight:500;
    text-align:left;line-height:1.15;
    letter-spacing:.2px;
}

/* ═══════════════════════
   USER AGREEMENT
   ═══════════════════════ */
.vedic-agreement{
    width:100%;
    margin-top:4px;
    border:1px solid rgba(191,149,63,.1);
    border-radius:10px;
    overflow:hidden;
    background:rgba(191,149,63,.02);
}
.vedic-agreement-scroll{
    max-height:none;
    overflow-y:visible;
    padding:8px 16px 6px;
    font-size:10px;line-height:1.5;
    color:rgba(226,232,239,.65);
}
.vedic-agreement-scroll::-webkit-scrollbar{width:4px}
.vedic-agreement-scroll::-webkit-scrollbar-track{background:transparent}
.vedic-agreement-scroll::-webkit-scrollbar-thumb{background:rgba(191,149,63,.2);border-radius:4px}
.vedic-agreement-title{
    font-family:'Noto Sans Devanagari','Cinzel',serif;
    font-size:12px;color:#ffd277;
    margin-bottom:6px;
}
.vedic-agreement-scroll ol{
    padding-left:18px;
}
.vedic-agreement-scroll li{
    margin-bottom:4px;
}
.vedic-agreement-scroll strong{color:rgba(255,210,119,.7)}
.vedic-agreement-foot{
    margin-top:12px;padding-top:10px;
    border-top:1px solid rgba(191,149,63,.08);
    font-style:italic;color:rgba(255,210,119,.35);
    font-size:11px;
}

/* Agreement Checkbox */
.vedic-agree-check{
    display:flex;align-items:center;gap:8px;
    padding:8px 16px;
    border-top:1px solid rgba(191,149,63,.08);
    cursor:pointer;
    font-size:11px;color:rgba(226,232,239,.6);
    transition:background .3s;
}
.vedic-agree-check:hover{background:rgba(191,149,63,.04)}
.vedic-agree-check input{display:none}
.vedic-checkmark{
    width:18px;height:18px;
    border:1.5px solid rgba(191,149,63,.25);
    border-radius:4px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:all .3s;
    background:rgba(191,149,63,.03);
}
.vedic-agree-check input:checked ~ .vedic-checkmark{
    background:rgba(191,149,63,.2);
    border-color:#ffd277;
}
.vedic-agree-check input:checked ~ .vedic-checkmark::after{
    content:'✓';color:#ffd277;font-size:12px;font-weight:700;
}

/* ═══════════════════════
   SUBMIT BUTTON
   ═══════════════════════ */
.vedic-submit-btn{
    width:100%;padding:10px;
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(135deg,rgba(191,149,63,.15),rgba(255,210,119,.1));
    border:1px solid rgba(191,149,63,.25);
    border-radius:9px;
    font-family:'Cinzel',serif;font-size:13px;font-weight:600;
    color:#ffd277;cursor:pointer;
    transition:all .3s;
    position:relative;overflow:hidden;
}
.vedic-submit-btn::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,210,119,.06),transparent);
    transform:translateX(-100%);
    transition:transform .6s;
}
.vedic-submit-btn:hover::before{transform:translateX(100%)}
.vedic-submit-btn:hover{
    background:linear-gradient(135deg,rgba(191,149,63,.22),rgba(255,210,119,.15));
    border-color:rgba(255,210,119,.4);
    box-shadow:0 0 20px rgba(191,149,63,.12);
}
.vedic-submit-btn:disabled{
    opacity:.4;cursor:not-allowed;
}
.vedic-submit-btn--login{
    margin-top:8px;
}
.vedic-trust-line{
    display:flex;align-items:center;justify-content:center;gap:5px;
    font-size:9px;color:rgba(45,212,168,.35);
    font-family:'JetBrains Mono',monospace;
    letter-spacing:.5px;text-transform:uppercase;
    margin-top:2px;
}

/* ═══════════════════════
   OTP VERIFICATION OVERLAY
   ═══════════════════════ */
.otp-overlay{
    position:fixed;inset:0;z-index:9000;
    display:flex;align-items:center;justify-content:center;
    background:rgba(4,4,8,.88);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    animation:otpFadeIn .35s ease;
}
@keyframes otpFadeIn{from{opacity:0}to{opacity:1}}

.otp-popup{
    position:relative;
    width:min(420px,90vw);
    background:rgba(10,10,18,.92);
    border:1px solid rgba(191,149,63,.18);
    border-radius:16px;
    padding:32px 28px 24px;
    box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 60px rgba(191,149,63,.04);
    overflow:hidden;
    animation:otpSlideUp .4s cubic-bezier(.25,.46,.45,.94);
}
@keyframes otpSlideUp{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.otp-popup-glow{
    position:absolute;top:-50%;left:-50%;
    width:200%;height:200%;
    background:radial-gradient(ellipse at 50% 60%,rgba(191,149,63,.06),transparent 55%);
    pointer-events:none;
}
.otp-popup-scanline{
    position:absolute;top:0;left:0;width:100%;height:100%;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.008) 2px,rgba(255,255,255,.008) 4px);
    pointer-events:none;
}

.otp-header{text-align:center;margin-bottom:24px;position:relative;z-index:1}
.otp-icon-ring{
    width:56px;height:56px;margin:0 auto 12px;
    border-radius:50%;
    border:1.5px solid rgba(191,149,63,.3);
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle,rgba(191,149,63,.1) 0%,transparent 70%);
    box-shadow:0 0 20px rgba(191,149,63,.08);
    animation:otpRingPulse 3s ease-in-out infinite;
}
@keyframes otpRingPulse{
    0%,100%{box-shadow:0 0 16px rgba(191,149,63,.06)}
    50%{box-shadow:0 0 28px rgba(191,149,63,.14)}
}
.otp-title{
    font-family:'Cinzel',serif;font-size:1.15rem;font-weight:600;
    color:#ffd277;letter-spacing:.04em;margin-bottom:6px;
}
.otp-subtitle{
    font-family:'Inter',sans-serif;font-size:.72rem;
    color:rgba(255,255,255,.45);line-height:1.5;
}
.otp-subtitle strong{color:rgba(255,210,119,.7);font-weight:600}

/* OTP digit inputs */
.otp-input-row{
    display:flex;align-items:center;justify-content:center;
    gap:8px;margin-bottom:16px;position:relative;z-index:1;
}
.otp-digit{
    width:42px;height:50px;
    text-align:center;
    background:rgba(191,149,63,.04);
    border:1.5px solid rgba(191,149,63,.15);
    border-radius:10px;
    font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;
    color:#ffd277;caret-color:#ffd277;
    outline:none;transition:all .3s;
}
.otp-digit:focus{
    border-color:rgba(255,210,119,.45);
    background:rgba(191,149,63,.08);
    box-shadow:0 0 18px rgba(191,149,63,.1);
}
.otp-digit.otp-digit--error{
    border-color:rgba(255,60,60,.5);
    background:rgba(255,60,60,.06);
    animation:otpShake .4s ease;
}
.otp-digit.otp-digit--success{
    border-color:rgba(45,212,168,.5);
    background:rgba(45,212,168,.06);
    color:#2dd4a8;
}
@keyframes otpShake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}
    40%{transform:translateX(5px)}
    60%{transform:translateX(-3px)}
    80%{transform:translateX(3px)}
}
.otp-separator{
    font-family:'JetBrains Mono',monospace;
    font-size:1rem;color:rgba(191,149,63,.25);
    margin:0 2px;user-select:none;
}

/* Status message */
.otp-status{
    text-align:center;min-height:18px;
    font-family:'Inter',sans-serif;font-size:.68rem;
    margin-bottom:12px;position:relative;z-index:1;
    transition:color .3s;
}
.otp-status--error{color:rgba(255,80,80,.85)}
.otp-status--success{color:rgba(45,212,168,.85)}
.otp-status--sending{color:rgba(191,149,63,.65)}

/* Timer & Resend */
.otp-timer-row{
    display:flex;align-items:center;justify-content:center;gap:12px;
    margin-bottom:18px;position:relative;z-index:1;
}
.otp-timer{
    font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:500;
    color:rgba(255,210,119,.5);letter-spacing:.06em;
}
.otp-resend-btn{
    font-family:'Rajdhani',sans-serif;font-size:.7rem;font-weight:600;
    color:rgba(255,210,119,.4);background:none;border:none;
    cursor:pointer;letter-spacing:.04em;transition:color .3s;
    text-decoration:underline;text-underline-offset:3px;
}
.otp-resend-btn:hover:not(:disabled){color:#ffd277}
.otp-resend-btn:disabled{opacity:.35;cursor:not-allowed;text-decoration:none}

/* Action buttons */
.otp-actions{
    display:flex;gap:10px;position:relative;z-index:1;
    margin-bottom:12px;
}
.otp-verify-btn{
    flex:1;padding:10px;
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(135deg,rgba(191,149,63,.15),rgba(255,210,119,.1));
    border:1px solid rgba(191,149,63,.25);
    border-radius:9px;
    font-family:'Cinzel',serif;font-size:.78rem;font-weight:600;
    color:#ffd277;cursor:pointer;
    transition:all .3s;position:relative;overflow:hidden;
}
.otp-verify-btn:hover{
    background:linear-gradient(135deg,rgba(191,149,63,.22),rgba(255,210,119,.15));
    border-color:rgba(255,210,119,.4);
    box-shadow:0 0 20px rgba(191,149,63,.12);
}
.otp-verify-btn:disabled{opacity:.4;cursor:not-allowed}
.otp-cancel-btn{
    padding:10px 18px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:9px;
    font-family:'Rajdhani',sans-serif;font-size:.75rem;font-weight:600;
    color:rgba(255,255,255,.4);cursor:pointer;
    transition:all .3s;
}
.otp-cancel-btn:hover{
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.65);
    border-color:rgba(255,255,255,.14);
}
.otp-footer-note{
    text-align:center;
    font-family:'JetBrains Mono',monospace;font-size:.55rem;
    color:rgba(255,255,255,.2);letter-spacing:.04em;
    position:relative;z-index:1;
}

/* ═══════════════════════
   SUCCESS PANEL
   ═══════════════════════ */
.vedic-success-panel{
    text-align:center;
    padding:60px 32px;
    width:100%;max-width:680px;
}
.vedic-success-yantra{
    font-family:'Noto Sans Devanagari',serif;
    font-size:48px;color:#ffd277;
    margin-bottom:16px;
    animation:vedicPulse 3s infinite;
}
@keyframes vedicPulse{
    0%,100%{text-shadow:0 0 20px rgba(255,210,119,.2)}
    50%{text-shadow:0 0 40px rgba(255,210,119,.5)}
}
.vedic-success-title{
    font-family:'Cinzel',serif;font-size:28px;
    color:#ffd277;margin-bottom:8px;
}
.vedic-success-name{
    font-family:'Rajdhani',sans-serif;font-size:18px;
    color:rgba(45,212,168,.7);margin-bottom:12px;
}
.vedic-success-sub{
    font-size:13px;color:rgba(226,232,239,.5);
    font-family:'Noto Sans Devanagari','Inter',sans-serif;
}

/* ═══════════════════════
   WISDOM CARDS
   ═══════════════════════ */
.vedic-wisdom-cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
    width:100%;max-width:680px;
    margin-top:6px;
}
.vedic-card{
    padding:10px 12px;
    background:linear-gradient(160deg,rgba(191,149,63,.05),rgba(191,149,63,.02));
    border:1px solid rgba(191,149,63,.08);
    border-radius:12px;
    position:relative;overflow:hidden;
    transition:all .35s;
}
.vedic-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,210,119,.2),transparent);
}
.vedic-card:hover{
    border-color:rgba(191,149,63,.2);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.vedic-card-num{
    font-family:'Noto Sans Devanagari',serif;
    font-size:16px;color:rgba(191,149,63,.2);
    position:absolute;top:6px;right:8px;
}
.vedic-card-sanskrit{
    font-family:'Noto Sans Devanagari',serif;
    font-size:12px;color:#ffd277;
    line-height:1.4;margin-bottom:3px;
}
.vedic-card-eng{
    font-size:10px;color:rgba(226,232,239,.45);
    line-height:1.3;
}
.vedic-card-src{
    font-size:9px;color:rgba(191,149,63,.3);
    margin-top:3px;
    font-family:'Noto Sans Devanagari','Rajdhani',sans-serif;
}

/* ═══════════════════════
   LIVING ORBS
   ═══════════════════════ */
.vedic-living-orbs{
    pointer-events:none;position:fixed;inset:0;z-index:0;
    overflow:hidden;
}
.vedic-orb{
    position:absolute;border-radius:50%;
    filter:blur(60px);
    opacity:.04;
}
.vedic-orb--1{width:300px;height:300px;background:#ffd277;top:10%;left:-5%;animation:orbDrift1 30s infinite alternate}
.vedic-orb--2{width:200px;height:200px;background:#2dd4a8;bottom:20%;right:5%;animation:orbDrift2 25s infinite alternate}
.vedic-orb--3{width:250px;height:250px;background:#bf953f;top:50%;left:30%;animation:orbDrift3 35s infinite alternate}
.vedic-orb--4{width:180px;height:180px;background:#b38728;bottom:10%;left:15%;animation:orbDrift1 28s infinite alternate-reverse}
.vedic-orb--5{width:220px;height:220px;background:#fcf6ba;top:5%;right:20%;animation:orbDrift2 32s infinite alternate-reverse}
@keyframes orbDrift1{0%{transform:translate(0,0)}100%{transform:translate(40px,60px)}}
@keyframes orbDrift2{0%{transform:translate(0,0)}100%{transform:translate(-30px,50px)}}
@keyframes orbDrift3{0%{transform:translate(0,0)}100%{transform:translate(50px,-40px)}}

/* ═══════════════════════════════════════════
   SYLVY SIDEBAR (Right Panel — Tom Freebird style)
   ═══════════════════════════════════════════ */
.sv-sidebar{
    display:flex;flex-direction:column;
    height:calc(100vh - 56px - 34px);
    background:rgba(5,10,14,.6);
    backdrop-filter:blur(14px) saturate(1.3);
    position:relative;overflow:hidden;
    border-radius:0;
}
.sv-sb-glow{
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(ellipse at 50% 0%,rgba(45,212,168,.06) 0%,transparent 60%);
}

/* ── Header ── */
.sv-sb-header{
    display:flex;align-items:center;gap:12px;
    padding:18px 18px 14px;
    border-bottom:1px solid rgba(45,212,168,.08);
    position:relative;z-index:1;
}
.sv-sb-avatar-wrap{
    position:relative;width:42px;height:42px;flex-shrink:0;
}
.sv-avatar-glow-ring{
    position:absolute;inset:-3px;
    border:1.5px solid rgba(45,212,168,.25);
    border-radius:50%;
    animation:svGlowPulse 4s infinite;
}
@keyframes svGlowPulse{
    0%,100%{border-color:rgba(45,212,168,.15);box-shadow:0 0 6px rgba(45,212,168,.05)}
    50%{border-color:rgba(45,212,168,.35);box-shadow:0 0 14px rgba(45,212,168,.12)}
}
.sv-sb-avatar-img{
    width:42px;height:42px;
    border-radius:50%;object-fit:cover;
}
.sv-sb-online-dot{
    position:absolute;bottom:1px;right:1px;
    width:9px;height:9px;
    border-radius:50%;
    background:#2dd4a8;
    border:2px solid #0a0f14;
    box-shadow:0 0 6px rgba(45,212,168,.4);
}
.sv-sb-info{flex:1;min-width:0}
.sv-sb-name{
    font-family:'Cinzel',serif;font-size:13px;font-weight:600;
    color:#2dd4a8;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sv-sb-role{
    font-size:10px;color:rgba(45,212,168,.4);
    font-family:'JetBrains Mono',monospace;
    letter-spacing:.3px;
}
.sv-sb-status{
    display:flex;align-items:center;gap:4px;
    font-size:9px;color:rgba(45,212,168,.45);
    font-family:'JetBrains Mono',monospace;
    letter-spacing:.5px;
}
.sv-sb-status-dot{
    width:6px;height:6px;
    background:#2dd4a8;border-radius:50%;
    animation:statusBlink 3s infinite;
}
@keyframes statusBlink{
    0%,100%{opacity:.5}50%{opacity:1}
}

/* ── Chat Area ── */
.sv-sb-chat{
    flex:1;
    overflow-y:auto;
    padding:16px 14px;
    display:flex;flex-direction:column;gap:10px;
    position:relative;z-index:1;
    scrollbar-width:thin;
    scrollbar-color:rgba(45,212,168,.15) transparent;
}
.sv-sb-chat::-webkit-scrollbar{width:4px}
.sv-sb-chat::-webkit-scrollbar-track{background:transparent}
.sv-sb-chat::-webkit-scrollbar-thumb{background:rgba(45,212,168,.15);border-radius:4px}

/* Message Types */
.sv-msg{
    display:flex;gap:8px;
    animation:svMsgIn .4s ease-out;
    max-width:95%;
}
@keyframes svMsgIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
.sv-msg--sylvy{align-self:flex-start}
.sv-msg--user{align-self:flex-end;flex-direction:row-reverse}
.sv-msg--system{
    align-self:center;
    max-width:90%;
}

.sv-msg-avatar{
    width:26px;height:26px;
    border-radius:50%;object-fit:cover;
    flex-shrink:0;margin-top:2px;
}
.sv-msg-bubble{
    padding:10px 14px;
    border-radius:14px;
    font-size:12.5px;line-height:1.55;
    position:relative;
}
.sv-msg--sylvy .sv-msg-bubble{
    background:rgba(45,212,168,.06);
    border:1px solid rgba(45,212,168,.1);
    color:rgba(226,232,239,.85);
    border-top-left-radius:4px;
}
.sv-msg--user .sv-msg-bubble{
    background:rgba(255,210,119,.06);
    border:1px solid rgba(255,210,119,.1);
    color:rgba(226,232,239,.85);
    border-top-right-radius:4px;
}
.sv-msg--system .sv-msg-bubble{
    background:rgba(226,232,239,.03);
    border:1px solid rgba(226,232,239,.06);
    color:rgba(226,232,239,.45);
    text-align:center;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.3px;
    padding:6px 14px;
    border-radius:8px;
}

/* Typing Indicator */
.sv-typing{
    display:flex;align-items:center;gap:8px;
    align-self:flex-start;padding:6px 14px;
}
.sv-typing-avatar{
    width:26px;height:26px;
    border-radius:50%;object-fit:cover;
}
.sv-typing-dots{display:flex;gap:4px}
.sv-dot{
    width:6px;height:6px;
    background:rgba(45,212,168,.4);
    border-radius:50%;
    animation:svDotBounce 1.4s infinite;
}
.sv-dot:nth-child(2){animation-delay:.15s}
.sv-dot:nth-child(3){animation-delay:.3s}
@keyframes svDotBounce{
    0%,80%,100%{transform:translateY(0);opacity:.4}
    40%{transform:translateY(-6px);opacity:1}
}

/* ── Input Area ── */
.sv-sb-input-area{
    display:flex;gap:8px;
    padding:14px;
    border-top:1px solid rgba(45,212,168,.08);
    position:relative;z-index:1;
}
.sv-sb-input{
    flex:1;padding:10px 14px;
    background:rgba(45,212,168,.04);
    border:1px solid rgba(45,212,168,.1);
    border-radius:10px;
    font-family:'Inter',sans-serif;font-size:12.5px;
    color:#e2e8ef;
    outline:none;
    transition:all .3s;
}
.sv-sb-input::placeholder{color:rgba(226,232,239,.25)}
.sv-sb-input:focus{
    border-color:rgba(45,212,168,.25);
    background:rgba(45,212,168,.06);
    box-shadow:0 0 12px rgba(45,212,168,.06);
}
.sv-sb-send{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(45,212,168,.08);
    border:1px solid rgba(45,212,168,.15);
    border-radius:10px;
    color:#2dd4a8;cursor:pointer;
    transition:all .3s;flex-shrink:0;
}
.sv-sb-send:hover{
    background:rgba(45,212,168,.15);
    border-color:rgba(45,212,168,.3);
    box-shadow:0 0 12px rgba(45,212,168,.1);
}

/* Breathing Border Animation */
.sv-sidebar::before{
    content:'';position:absolute;
    top:0;right:0;bottom:0;left:0;
    border-radius:inherit;
    pointer-events:none;z-index:0;
    border:1px solid transparent;
    animation:svBreathe 5s ease-in-out infinite;
}
@keyframes svBreathe{
    0%,100%{border-color:rgba(45,212,168,.03)}
    50%{border-color:rgba(45,212,168,.08)}
}

/* ═══════════════════════
   MANTRA FOOTER
   ═══════════════════════ */
.reg-footer{
    display:flex;align-items:center;justify-content:center;gap:10px;
    height:34px;flex-shrink:0;
    background:rgba(5,10,14,.85);
    backdrop-filter:blur(14px) saturate(1.3);
    border-top:1px solid rgba(191,149,63,.1);
    padding:0 24px;
    position:relative;z-index:10;
}
.reg-footer-mantra{
    font-family:'Noto Sans Devanagari',serif;
    font-size:11px;color:rgba(255,210,119,.35);
    letter-spacing:.3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reg-footer-copy{
    font-family:'JetBrains Mono',monospace;
    font-size:10px;color:rgba(226,232,239,.2);
    letter-spacing:.3px;white-space:nowrap;
}
.reg-footer-afos{
    font-family:'JetBrains Mono',monospace;
    font-size:10px;color:rgba(45,212,168,.3);
    letter-spacing:.5px;white-space:nowrap;
}
.reg-footer-sep{color:rgba(191,149,63,.15);font-size:10px}

/* ═══════════════════════
   RESPONSIVE
   ═══════════════════════ */
@media(max-width:960px){
    .reg-main{flex-direction:column;overflow-y:auto;scrollbar-width:none}
    .reg-main::-webkit-scrollbar{display:none}
    .reg-left{overflow-y:visible;flex:none}
    .reg-mid{
        width:auto;flex:none;
        border-left:none;border-right:none;
        border-top:1px solid rgba(191,149,63,.08);
        border-bottom:1px solid rgba(45,212,168,.08);
    }
    .af-interest-grid{flex-direction:row;flex-wrap:wrap}
    .af-int{flex:0 0 auto}
    .reg-right{
        max-width:none;min-width:0;
        border-left:none;border-top:1px solid rgba(45,212,168,.08);
        flex:none;height:400px;
    }
    .sv-sidebar{height:400px}
    .vedic-form-row{flex-direction:column}
    .vedic-wisdom-cards{grid-template-columns:1fr}
    .gw-tiles{flex-direction:column}
    .af-interest-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:600px){
    .reg-left{padding:20px 16px 24px}
    .reg-navbar{padding:0 16px}
    .reg-nav-title{display:none}
    .vedic-header{flex-direction:column;text-align:center;gap:12px}
    .gw-tiles{flex-direction:column}
    .gw-tile{padding:10px}
    .sv-sb-input-area{padding:10px}
    .afos-popup{margin:12px;padding:0}
    .afos-info-grid{grid-template-columns:1fr}
    .af-interest-grid{flex-direction:row;flex-wrap:wrap}
}

/* ═══════════════════════════════════════════
   AF_OS ALPHA POPUP
   ═══════════════════════════════════════════ */
.afos-overlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:rgba(2,5,8,.88);
    backdrop-filter:blur(24px) saturate(1.5);
    animation:afosOverlayIn .5s ease-out;
}
@keyframes afosOverlayIn{from{opacity:0}to{opacity:1}}

.afos-popup{
    position:relative;
    width:520px;max-width:92vw;
    max-height:88vh;overflow-y:auto;
    background:linear-gradient(165deg,rgba(10,16,22,.97),rgba(5,10,14,.99));
    border:1px solid rgba(191,149,63,.2);
    border-radius:20px;
    box-shadow:
        0 0 60px rgba(191,149,63,.08),
        0 0 120px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,210,119,.06);
    animation:afosPopIn .6s cubic-bezier(.34,1.56,.64,1);
    scrollbar-width:none;
}
.afos-popup::-webkit-scrollbar{display:none}
@keyframes afosPopIn{
    from{opacity:0;transform:scale(.88) translateY(20px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}
.afos-popup-glow{
    position:absolute;top:-60px;left:50%;transform:translateX(-50%);
    width:300px;height:200px;
    background:radial-gradient(ellipse,rgba(191,149,63,.12),transparent 70%);
    pointer-events:none;z-index:0;
}
.afos-popup-scanline{
    position:absolute;inset:0;pointer-events:none;z-index:0;
    border-radius:20px;overflow:hidden;
}
.afos-popup-scanline::after{
    content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(
        0deg,
        transparent 0 2px,
        rgba(191,149,63,.015) 2px 4px
    );
}

/* Header */
.afos-header{
    display:flex;flex-direction:column;align-items:center;
    padding:32px 32px 20px;
    position:relative;z-index:1;
}
.afos-logo-ring{
    width:72px;height:72px;
    border:2px solid rgba(255,210,119,.3);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    animation:afosRingSpin 20s linear infinite;
    margin-bottom:14px;
}
.afos-logo-ring::before{
    content:'';position:absolute;inset:-6px;
    border:1px dashed rgba(255,210,119,.12);
    border-radius:50%;
    animation:afosRingSpin 30s linear infinite reverse;
}
@keyframes afosRingSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.afos-logo-core{
    width:52px;height:52px;
    background:radial-gradient(circle,rgba(191,149,63,.1),transparent);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
}
.afos-title{
    font-family:'Cinzel',serif;
    font-size:22px;font-weight:700;
    color:#ffd277;
    letter-spacing:3px;
    text-shadow:0 0 30px rgba(255,210,119,.2);
    margin-bottom:8px;
}
.afos-badge{
    display:inline-block;
    padding:4px 16px;
    background:rgba(255,60,60,.08);
    border:1px solid rgba(255,100,60,.25);
    border-radius:20px;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;font-weight:600;
    color:#ff8a65;
    letter-spacing:2px;
    text-transform:uppercase;
    animation:afosBadgePulse 3s infinite;
}
@keyframes afosBadgePulse{
    0%,100%{box-shadow:0 0 8px rgba(255,100,60,.1)}
    50%{box-shadow:0 0 20px rgba(255,100,60,.2)}
}

/* Body */
.afos-body{
    padding:0 32px 24px;
    position:relative;z-index:1;
}
.afos-status-row{
    display:flex;align-items:center;gap:8px;
    padding:10px 16px;
    background:rgba(45,212,168,.03);
    border:1px solid rgba(45,212,168,.1);
    border-radius:10px;
    margin-bottom:16px;
}
.afos-status-dot{
    width:8px;height:8px;
    background:#2dd4a8;
    border-radius:50%;
    box-shadow:0 0 8px rgba(45,212,168,.4);
    animation:statusBlink 2s infinite;
}
.afos-status-text{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;color:rgba(45,212,168,.7);
    letter-spacing:.3px;
}
.afos-msg{
    font-family:'Noto Sans Devanagari','Inter',sans-serif;
    font-size:14px;line-height:1.7;
    color:rgba(226,232,239,.75);
    margin-bottom:20px;
    text-align:center;
}
.afos-info-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    margin-bottom:18px;
}
.afos-info-item{
    padding:12px 14px;
    background:rgba(191,149,63,.03);
    border:1px solid rgba(191,149,63,.08);
    border-radius:10px;
    display:flex;flex-direction:column;gap:3px;
}
.afos-info-label{
    font-family:'JetBrains Mono',monospace;
    font-size:9px;color:rgba(255,210,119,.35);
    letter-spacing:1px;text-transform:uppercase;
}
.afos-info-value{
    font-family:'Rajdhani',sans-serif;
    font-size:13px;font-weight:600;
    color:#ffd277;
}
.afos-notice{
    display:flex;align-items:flex-start;gap:10px;
    padding:14px 16px;
    background:rgba(255,170,60,.03);
    border:1px solid rgba(255,170,60,.12);
    border-radius:10px;
    margin-bottom:16px;
    color:rgba(255,210,119,.55);
}
.afos-notice svg{flex-shrink:0;margin-top:2px;color:rgba(255,170,60,.5)}
.afos-notice span{
    font-size:12px;line-height:1.65;
    color:rgba(226,232,239,.55);
}
.afos-notice strong{color:rgba(255,210,119,.7)}
.afos-shloka{
    text-align:center;
    font-family:'Noto Sans Devanagari',serif;
    font-size:12px;color:rgba(191,149,63,.35);
    font-style:italic;
}

/* Footer */
.afos-footer{
    display:flex;flex-direction:column;align-items:center;gap:12px;
    padding:0 32px 28px;
    position:relative;z-index:1;
}
.afos-accept-btn{
    width:100%;padding:14px;
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(135deg,rgba(45,212,168,.12),rgba(45,212,168,.06));
    border:1px solid rgba(45,212,168,.25);
    border-radius:12px;
    font-family:'Cinzel',serif;font-size:14px;font-weight:600;
    color:#2dd4a8;cursor:pointer;
    transition:all .35s;
    position:relative;overflow:hidden;
}
.afos-accept-btn::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(45,212,168,.06),transparent);
    transform:translateX(-100%);
    transition:transform .6s;
}
.afos-accept-btn:hover::before{transform:translateX(100%)}
.afos-accept-btn:hover{
    background:linear-gradient(135deg,rgba(45,212,168,.2),rgba(45,212,168,.1));
    border-color:rgba(45,212,168,.4);
    box-shadow:0 0 24px rgba(45,212,168,.12);
}
.afos-version-tag{
    font-family:'JetBrains Mono',monospace;
    font-size:9px;color:rgba(226,232,239,.2);
    letter-spacing:1.5px;
}

/* ═══════════════════════════════════════════
   ENHANCED SACRED GEOMETRY CANVAS
   ═══════════════════════════════════════════ */
#regBg{
    position:fixed;inset:0;z-index:0;
    pointer-events:none;opacity:.55;
}
