@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

*{box-sizing:border-box}
:root{
    --auth-primary:#6941f2;
    --auth-primary-2:#845cff;
    --auth-primary-soft:#f3efff;
    --auth-primary-soft-2:#f8f5ff;
    --auth-ink:#181b27;
    --auth-ink-soft:#303444;
    --auth-muted:#72788a;
    --auth-muted-2:#8b90a0;
    --auth-line:#e6e8f0;
    --auth-line-2:#ececf4;
    --auth-bg:#f4f5fb;
    --auth-surface:#ffffff;
    --auth-surface-2:#fbfbfe;
    --auth-danger:#c63a56;
    --auth-success:#11845b;
    --auth-warning:#9a6714;
    --auth-shadow:0 18px 50px rgba(17,24,39,.08);
    --auth-shadow-soft:0 10px 26px rgba(21,28,45,.05);
}

html,body{margin:0;min-height:100%;background:var(--auth-bg)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.auth-page{
    min-height:100dvh;
    color:var(--auth-ink);
    font-family:'Inter','Hind Siliguri',system-ui,-apple-system,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font:inherit}
a{text-decoration:none}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

.auth-shell{
    width:100%;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at 0 0,rgba(105,65,242,.06),transparent 25%),
        radial-gradient(circle at 100% 0,rgba(132,92,255,.06),transparent 22%),
        linear-gradient(180deg,#f8f8fd 0%,#f5f6fb 35%,#f3f4fa 100%);
}

.auth-top{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:80px;
    padding:max(14px,env(safe-area-inset-top)) 18px 14px;
    background:rgba(248,249,253,.88);
    border-bottom:1px solid rgba(230,232,240,.82);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
}
.auth-brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    color:inherit;
}
.auth-logo{
    width:48px;
    height:48px;
    flex:0 0 auto;
    border-radius:16px;
    object-fit:contain;
    background:#fff;
    box-shadow:0 10px 24px rgba(98,75,176,.18);
}
.auth-brand-copy{min-width:0;display:grid;line-height:1.02}
.auth-brand-copy strong{
    color:#161a26;
    font-size:16px;
    font-weight:800;
    letter-spacing:-.025em;
}
.auth-brand-copy small{
    margin-top:5px;
    color:var(--auth-primary);
    font-size:8px;
    font-weight:800;
    letter-spacing:.18em;
    white-space:nowrap;
}
.auth-help{
    width:42px;
    height:42px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:1px solid var(--auth-line);
    border-radius:14px;
    background:rgba(255,255,255,.92);
    box-shadow:0 6px 18px rgba(20,28,45,.04);
    color:#676d7d;
    font-size:13px;
    font-weight:800;
}

.auth-stage{
    flex:1;
    width:100%;
    padding:20px 16px 26px;
}
.auth-card{
    width:100%;
    max-width:460px;
    margin:0 auto;
    padding:22px 18px 20px;
    border:1px solid rgba(230,232,240,.92);
    border-radius:28px;
    background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.92) 100%);
    box-shadow:var(--auth-shadow);
}

.auth-utility-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}
.auth-utility-row--single{margin-bottom:12px}
.auth-back,.auth-kicker{white-space:nowrap}
.auth-back{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:44px;
    padding:0 16px 0 13px;
    border:1px solid #e4e7ef;
    border-radius:999px;
    background:linear-gradient(180deg,#ffffff 0%,#fafbff 100%);
    color:#4a5263;
    font-size:12px;
    font-weight:800;
    letter-spacing:.01em;
    box-shadow:0 8px 18px rgba(22,26,37,.05);
}
.auth-back:before{
    content:'‹';
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f1f3f8;
    color:#6a7282;
    font-size:18px;
    line-height:1;
    margin-top:-1px;
}
.auth-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:0 16px;
    border:1px solid #e6defe;
    border-radius:999px;
    background:linear-gradient(180deg,#fbf8ff 0%,#f3eeff 100%);
    color:#6443d4;
    font-size:10px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
    box-shadow:0 8px 18px rgba(105,65,242,.06);
}
.auth-kicker:before{
    content:'';
    width:7px;
    height:7px;
    border-radius:50%;
    background:linear-gradient(180deg,#8b69ff 0%,#6941f2 100%);
    box-shadow:0 0 0 4px rgba(105,65,242,.08);
}
.auth-title{
    margin:6px 0 8px;
    color:#161a26;
    font-size:clamp(29px,7vw,35px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.045em;
}
.auth-copy{
    margin:0 0 22px;
    color:var(--auth-muted);
    font-family:'Hind Siliguri','Inter',sans-serif;
    font-size:13px;
    line-height:1.66;
}

.auth-form{display:grid;gap:14px}
.auth-field{display:grid;gap:7px}
.auth-label{
    padding-left:2px;
    color:#384152;
    font-size:11px;
    font-weight:700;
}
.auth-input-wrap{position:relative}
.auth-input{
    width:100%;
    height:58px;
    padding:0 16px;
    border:1px solid var(--auth-line);
    border-radius:16px;
    outline:none;
    background:#fff;
    color:var(--auth-ink);
    font-size:14px;
    font-weight:500;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 12px rgba(17,24,39,.025);
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.auth-input::placeholder{color:#a2a8b6}
.auth-input:focus{
    border-color:#9b86f4;
    box-shadow:0 0 0 4px rgba(105,65,242,.09),0 10px 22px rgba(105,65,242,.08);
}
.auth-input.has-prefix{padding-left:60px}
.auth-prefix{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    min-height:20px;
    padding-right:10px;
    border-right:1px solid var(--auth-line);
    color:#5f6675;
    font-size:11px;
    font-weight:800;
}
.auth-password-input{padding-right:74px}
.auth-password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    min-width:56px;
    height:40px;
    padding:0 10px;
    border:1px solid #e5e7ef;
    border-radius:12px;
    background:#f8f8fc;
    color:#6d7281;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}
.auth-password-toggle:hover{background:#f2f3f9}

.auth-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    padding-top:2px;
}
.auth-check{
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:#696f7d;
    font-family:'Hind Siliguri','Inter',sans-serif;
    font-size:11px;
    line-height:1.52;
}
.auth-check b{color:#454b59}
.auth-check input{margin-top:2px;accent-color:var(--auth-primary)}
.auth-link{color:#6544d5;font-size:11px;font-weight:800}
.auth-link:hover{text-decoration:underline}

.auth-channel{
    display:none;
    gap:8px;
    padding:6px;
    border:1px solid var(--auth-line);
    border-radius:18px;
    background:#f6f7fb;
}
.auth-channel.is-visible{display:grid;grid-template-columns:1fr 1fr}
.auth-channel-option{position:relative;min-width:0}
.auth-channel-option input{position:absolute;opacity:0;pointer-events:none}
.auth-channel-card{
    min-height:68px;
    padding:10px 11px;
    border-radius:14px;
    display:flex;
    align-items:center;
    gap:10px;
    background:transparent;
    color:#666d7a;
    cursor:pointer;
    transition:background .18s ease, box-shadow .18s ease, color .18s ease;
}
.auth-channel-option input:checked + .auth-channel-card{
    background:#fff;
    color:#5332ca;
    box-shadow:0 8px 20px rgba(17,24,39,.06);
}
.auth-channel-card i{
    width:34px;
    height:34px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#ece6ff;
    color:#6841ec;
    font-style:normal;
    font-size:12px;
    font-weight:800;
}
.auth-channel-card > span{display:grid;min-width:0;font-size:11px;font-weight:800}
.auth-channel-card small{margin-top:2px;color:#959aa7;font-size:8px;font-weight:600}
.auth-channel-option.is-disabled{opacity:.5}
.auth-channel-option.is-disabled .auth-channel-card{cursor:not-allowed}

.auth-primary,.auth-secondary{
    width:100%;
    border-radius:16px;
    cursor:pointer;
}
.auth-primary{
    height:58px;
    border:0;
    background:linear-gradient(135deg,#5f3aeb 0%,#734cf4 55%,#8665ff 100%);
    color:#fff;
    font-size:13px;
    font-weight:800;
    letter-spacing:.01em;
    box-shadow:0 16px 30px rgba(105,65,242,.28);
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.auth-primary:hover{box-shadow:0 18px 34px rgba(105,65,242,.3)}
.auth-primary:active{transform:translateY(1px) scale(.995)}
.auth-primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.auth-secondary{
    min-height:52px;
    border:1px solid var(--auth-line);
    background:#fff;
    color:#515666;
    font-size:11px;
    font-weight:800;
}
.auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:4px 0;
    color:#9ea3af;
    font-size:9px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.auth-divider:before,.auth-divider:after{content:'';flex:1;height:1px;background:var(--auth-line)}

.auth-alert{
    display:none;
    margin:0 0 16px;
    padding:13px 14px;
    border-radius:16px;
    font-family:'Hind Siliguri','Inter',sans-serif;
    font-size:11px;
    line-height:1.55;
    border:1px solid transparent;
}
.auth-alert.is-visible{display:block}
.auth-alert.is-error{border-color:#ffd7de;background:#fff3f5;color:#ab2c47}
.auth-alert.is-success{border-color:#cdeedc;background:#eefaf4;color:#146f4e}
.auth-alert.is-info{border-color:#ddd3ff;background:#f6f3ff;color:#5a3ec0}
.auth-alert.is-warning{border-color:#f3ddb2;background:#fff8e9;color:#8d6111}
.auth-field-error{min-height:0;color:#bb2e4b;font-size:9px;font-weight:700}
.auth-field.has-error .auth-input{border-color:#e7aeb9;background:#fffafb}

.password-strength{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:2px}
.password-strength span{height:4px;border-radius:999px;background:#ebeaf1}
.password-strength[data-level="1"] span:nth-child(1),
.password-strength[data-level="2"] span:nth-child(-n+2),
.password-strength[data-level="3"] span:nth-child(-n+3),
.password-strength[data-level="4"] span{background:#734cf4}
.password-hint{color:#8f94a2;font-size:9px;line-height:1.5}

.auth-security{
    margin:18px 0 0;
    padding:12px 13px;
    display:flex;
    gap:10px;
    border:1px solid #ebe5ff;
    border-radius:16px;
    background:linear-gradient(180deg,#fbf9ff 0%,#f7f4ff 100%);
    color:#70697d;
    font-family:'Hind Siliguri','Inter',sans-serif;
    font-size:10px;
    line-height:1.56;
}
.auth-security b{color:#46397d}
.auth-security-icon{
    width:24px;
    height:24px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#ebe3ff;
    color:#633fe7;
    font-size:10px;
    font-weight:800;
}
.auth-bottom{
    margin:18px 0 0;
    text-align:center;
    color:#767c8c;
    font-size:11px;
}
.auth-footer{
    padding:10px 18px max(14px,env(safe-area-inset-bottom));
    text-align:center;
    color:#9ba1b0;
    font-size:9px;
    line-height:1.55;
}
.auth-footer a{color:#717787}

.auth-loading{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:flex-end;
    justify-content:center;
    padding:16px 16px max(16px,env(safe-area-inset-bottom));
    background:rgba(21,27,38,.28);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.auth-loading.is-visible{display:flex}
.auth-loading-box{
    width:min(100%,430px);
    min-height:82px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:1px solid #e6e9f1;
    border-radius:22px;
    background:#fff;
    color:#4d5362;
    box-shadow:0 22px 48px rgba(17,24,39,.18);
    font-size:11px;
    font-weight:800;
}
.auth-spinner{
    width:28px;
    height:28px;
    border:3px solid #ebe7fb;
    border-top-color:#6d44f0;
    border-radius:50%;
    animation:auth-spin .72s linear infinite;
}
@keyframes auth-spin{to{transform:rotate(360deg)}}

/* OTP */
.auth-page[data-auth-page="otp"] .auth-card{padding-top:20px}
.otp-destination{
    margin:-3px 0 18px;
    padding:13px 14px;
    border:1px solid #e9e3fb;
    border-radius:16px;
    background:#f7f4ff;
    color:#726c80;
    font-size:11px;
    line-height:1.55;
    text-align:center;
}
.otp-destination strong{color:#40345d;font-weight:800}
.otp-inputs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp-box{
    width:100%;
    min-width:0;
    height:58px;
    padding:0;
    border:1px solid var(--auth-line);
    border-radius:16px;
    outline:none;
    background:#fff;
    color:#1d2230;
    text-align:center;
    font-size:20px;
    font-weight:800;
    box-shadow:0 3px 12px rgba(17,24,39,.025);
}
.otp-box:focus{border-color:#967cf2;box-shadow:0 0 0 4px rgba(105,65,242,.1)}
.otp-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:4px;
    color:#7a7f8d;
    font-size:10px;
}
.otp-resend{
    padding:5px;
    border:0;
    background:transparent;
    color:#6140d8;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}
.otp-resend:disabled{color:#afb3be;cursor:not-allowed}

/* Specific page polish */
.auth-page[data-auth-page="register"] .auth-copy,
.auth-page[data-auth-page="forgot"] .auth-copy,
.auth-page[data-auth-page="reset"] .auth-copy{max-width:40ch}
.auth-page[data-auth-page="login"] .auth-title{margin-top:10px}
.auth-page[data-auth-page="register"] .auth-title{margin-top:16px}

@media (max-width:599px){
    .auth-stage{padding-top:18px}
    .auth-card{max-width:none}
    .auth-utility-row{
        align-items:flex-start;
        justify-content:flex-start;
    }
    .auth-title{font-size:31px}
    .auth-copy{font-size:12.5px}
}

@media (max-width:420px){
    .auth-top{padding-left:14px;padding-right:14px;min-height:76px}
    .auth-stage{padding-left:12px;padding-right:12px}
    .auth-card{padding:20px 14px 18px;border-radius:24px}
    .auth-back,.auth-kicker{min-height:40px;padding:0 13px}
    .auth-kicker{font-size:9px;letter-spacing:.12em}
    .otp-inputs{gap:6px}
    .otp-box{height:54px;border-radius:14px}
}

@media (max-width:360px){
    .auth-title{font-size:28px}
    .auth-brand-copy strong{font-size:15px}
    .auth-channel-card{padding:9px 8px}
    .auth-channel-card i{width:30px;height:30px;border-radius:10px;font-size:11px}
    .auth-channel-card > span{font-size:10px}
}

@media (min-width:600px){
    body.auth-page{
        padding:24px;
        display:grid;
        place-items:center;
        background:
            radial-gradient(circle at 18% 12%,rgba(105,65,242,.08),transparent 28%),
            radial-gradient(circle at 82% 84%,rgba(132,92,255,.08),transparent 24%),
            #f3f4fa;
    }
    .auth-shell{
        width:440px;
        min-height:min(880px,calc(100dvh - 48px));
        max-height:calc(100dvh - 48px);
        overflow:auto;
        border:1px solid #e7e8ef;
        border-radius:34px;
        box-shadow:0 30px 90px rgba(17,24,39,.12);
    }
    .auth-top{border-radius:34px 34px 0 0}
    .auth-stage{padding:22px 18px 28px}
    .auth-card{max-width:none}
}

@media (prefers-reduced-motion:reduce){
    *,*:before,*:after{transition:none!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}