/* =========================================================================
   assets/css/auth.css — login / signup / forgot-password / complete-profile
   Layout: brand panel (always ink, never flips) + form panel (light or dark).
   Signature: the brand side is a near-black canvas with two slow indigo/violet
   auroras behind a fine dot grid — no flat colour wall, no gradient banner.
   Every class name matches auth.js and the existing markup: do not rename.
   ========================================================================= */
:root{
    --a-primary:#4f46e5; --a-primary-dark:#4338ca; --a-ring:rgba(79,70,229,.16);
    --a-violet:#8b5cf6; --a-ink:#070b18;
    --a-bg:#f7f8fb; --a-card:#ffffff; --a-text:#0b1120; --a-muted:#64748b;
    --a-border:#e4e8f0; --a-input:#ffffff;
    --a-shadow:0 24px 60px -28px rgba(11,17,32,.22);
}
.dark{
    --a-ring:rgba(99,102,241,.22);
    --a-bg:#050914; --a-card:#0c1222; --a-text:#e8edf7; --a-muted:#8a96ac;
    --a-border:#1b2437; --a-input:#0a0f1c;
    --a-shadow:0 24px 60px -28px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
.auth-body{
    margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased; background:var(--a-bg); color:var(--a-text);
}
.auth-shell{display:grid; grid-template-columns:1fr; min-height:100vh}

/* ---------- Brand panel (stays ink in both themes) ---------- */
.auth-brand{
    display:none; position:relative; overflow:hidden;
    padding:2.75rem 3rem; flex-direction:column; justify-content:space-between;
    background-color:var(--a-ink);
    background-image:radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size:22px 22px;
    color:#fff;
}
.auth-brand::before,
.auth-brand::after{
    content:''; position:absolute; border-radius:50%; pointer-events:none;
    filter:blur(90px); will-change:transform;
}
.auth-brand::before{
    width:30rem; height:30rem; top:-9rem; right:-8rem;
    background:var(--a-primary); opacity:.42;
    animation:aDrift1 26s ease-in-out infinite alternate;
}
.auth-brand::after{
    width:26rem; height:26rem; bottom:-8rem; left:-7rem;
    background:var(--a-violet); opacity:.3;
    animation:aDrift2 32s ease-in-out infinite alternate;
}
@keyframes aDrift1{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-3rem,3rem,0) scale(1.12)}}
@keyframes aDrift2{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(3rem,-2rem,0) scale(1.08)}}

.auth-brand-logo{
    display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:1rem;
    letter-spacing:.01em; position:relative; z-index:1; color:#fff; text-decoration:none;
}
.auth-brand-logo img{height:2rem; width:2rem; object-fit:contain}
.auth-brand-mid{position:relative; z-index:1; max-width:26rem}
.auth-brand-mid h2{
    font-size:clamp(2.5rem,3.6vw,3.35rem); line-height:1.03; font-weight:800;
    letter-spacing:-.045em; margin:0 0 1.15rem; color:#fff;
}
.auth-brand-mid .lead{
    color:#aab6d4; font-size:1rem; line-height:1.7; margin:0 0 2.5rem; max-width:24rem;
}
/* Feature rows — hairline dividers, not pills */
.auth-feats{border-top:1px solid rgba(255,255,255,.09)}
.auth-feat{
    display:flex; align-items:center; gap:.9rem;
    padding:.95rem 0; border-bottom:1px solid rgba(255,255,255,.09);
    color:#dbe2f4; font-size:.9rem; font-weight:500;
}
.auth-feat .chip{
    flex-shrink:0; width:2.15rem; height:2.15rem; border-radius:.6rem;
    display:flex; align-items:center; justify-content:center; font-size:.95rem;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); color:#a5b4fc;
}
.auth-brand-foot{
    position:relative; z-index:1; display:flex; gap:1.35rem; color:#6b7897; font-size:.78rem;
}
.auth-brand-foot a{color:#6b7897; text-decoration:none; transition:color .2s}
.auth-brand-foot a:hover{color:#c7d2fe}

/* ---------- Form panel ---------- */
.auth-panel{
    display:flex; flex-direction:column; padding:1.25rem 1.25rem 2rem; position:relative;
    background-image:radial-gradient(circle, var(--a-border) 1px, transparent 1px);
    background-size:26px 26px;
}
.auth-topbar{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1}
.auth-mini-logo{
    display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:.95rem;
    color:var(--a-text); text-decoration:none; letter-spacing:.01em;
}
.auth-mini-logo img{height:1.7rem; width:1.7rem; object-fit:contain}
.auth-theme-btn{
    width:2.4rem; height:2.4rem; border:1px solid var(--a-border); background:var(--a-card);
    color:var(--a-muted); cursor:pointer; font-size:1rem; border-radius:.7rem;
    display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.auth-theme-btn:hover{color:var(--a-primary); border-color:var(--a-primary)}
.auth-theme-btn .ic-sun{display:none}
.dark .auth-theme-btn .ic-sun{display:block}
.dark .auth-theme-btn .ic-moon{display:none}

.auth-card-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:2rem 0; position:relative; z-index:1}
.auth-card{
    width:100%; max-width:25.5rem;
    padding:2.25rem 2rem; 
}
.auth-card h1{font-size:1.6rem; font-weight:800; letter-spacing:-.03em; margin:0 0 .4rem}
.auth-sub{color:var(--a-muted); font-size:.9rem; line-height:1.6; margin:0 0 1.75rem}
.auth-sub strong{color:var(--a-text); font-weight:600}

/* ---------- Google button + divider ---------- */
.auth-google{
    display:flex; align-items:center; justify-content:center; gap:.7rem;
    width:100%; padding:.8rem 1rem; border-radius:.75rem; font-size:.9rem; font-weight:600;
    border:1px solid var(--a-border); background:var(--a-input); color:var(--a-text);
    text-decoration:none; transition:border-color .2s, background .2s;
}
.auth-google img{width:1.1rem; height:1.1rem}
.auth-google:hover{border-color:#cbd5e1; background:var(--a-bg)}
.dark .auth-google:hover{border-color:#334155; background:#111a2e}
.auth-divider{
    display:flex; align-items:center; gap:.85rem; margin:1.35rem 0;
    color:var(--a-muted); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
}
.auth-divider::before,
.auth-divider::after{content:''; flex:1; height:1px; background:var(--a-border)}

/* ---------- Notice shown in place of the Google button (app / in-app WebViews) ---------- */
.auth-appnote{
    position:relative; display:flex; align-items:flex-start; gap:.85rem;
    padding:1rem 1.1rem 1rem 1.25rem; margin:0 0 1.5rem;
    border:1px solid var(--a-border); border-radius:.9rem;
    background:linear-gradient(180deg, rgba(79,70,229,.05), rgba(79,70,229,0)), var(--a-input);
    overflow:hidden;
}
.dark .auth-appnote{background:linear-gradient(180deg, rgba(99,102,241,.1), rgba(99,102,241,0)), var(--a-input)}
.auth-appnote::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--a-primary), var(--a-violet))}
.auth-appnote-ic{
    flex-shrink:0; width:2.15rem; height:2.15rem; border-radius:.65rem;
    display:flex; align-items:center; justify-content:center;
    background:rgba(79,70,229,.1); color:var(--a-primary); font-size:.95rem;
}
.dark .auth-appnote-ic{background:rgba(99,102,241,.16)}
.auth-appnote-body{min-width:0}
.auth-appnote-body strong{display:block; font-size:.875rem; font-weight:700; letter-spacing:-.01em; color:var(--a-text); margin-bottom:.2rem}
.auth-appnote-body p{margin:0; font-size:.82rem; line-height:1.6; color:var(--a-muted)}
.auth-appnote-body a{color:var(--a-primary); font-weight:600; text-decoration:none; border-bottom:1px solid var(--a-ring); transition:border-color .2s}
.auth-appnote-body a:hover{border-bottom-color:var(--a-primary)}

/* ---------- Fields ---------- */
.a-field{margin-bottom:1.1rem}
.a-label{display:flex; align-items:center; font-size:.82rem; font-weight:600; margin-bottom:.45rem; color:var(--a-text)}
.a-label .opt{color:var(--a-muted); font-weight:400; font-size:.78rem}
.a-input,
.a-select,
.a-textarea{
    width:100%; padding:.8rem .95rem; font-family:inherit; font-size:.92rem;
    color:var(--a-text); background:var(--a-input);
    border:1px solid var(--a-border); border-radius:.75rem; outline:none;
    transition:border-color .18s, box-shadow .18s;
}
.a-input::placeholder,
.a-textarea::placeholder{color:var(--a-muted); opacity:.75}
.a-input:focus,
.a-select:focus,
.a-textarea:focus{border-color:var(--a-primary); box-shadow:0 0 0 4px var(--a-ring)}
.a-input.invalid,
.a-select.invalid{border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.a-textarea{resize:vertical; min-height:88px}
.a-select{appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right .8rem center; background-size:1rem; padding-right:2.4rem}
.a-row{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}
.a-err{color:#ef4444; font-size:.78rem; margin:.4rem 0 0; display:none}
.a-err.show{display:block}
.a-pass-wrap{position:relative}
.a-pass-wrap .a-input{padding-right:2.75rem}
.a-pass-toggle{
    position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
    width:2rem; height:2rem; border:none; background:none; color:var(--a-muted);
    cursor:pointer; font-size:1rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center;
}
.a-pass-toggle:hover{color:var(--a-primary)}
.a-hp{position:absolute!important; left:-9999px!important; top:-9999px!important; height:0; width:0; overflow:hidden}

/* Suggest-password link + strength checklist */
.a-suggest{margin-left:auto; background:none; border:none; cursor:pointer; font-size:.76rem; font-weight:600; color:var(--a-primary); padding:0}
.a-suggest:hover{text-decoration:underline}
.a-strength{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem}
.a-strength span{
    font-size:.68rem; font-weight:600; padding:.22rem .55rem; border-radius:9999px;
    background:var(--a-bg); color:var(--a-muted); border:1px solid var(--a-border); transition:all .2s;
}
.dark .a-strength span{background:rgba(255,255,255,.03)}
.a-strength span.ok{background:rgba(34,197,94,.12); color:#16a34a; border-color:rgba(34,197,94,.3)}
.dark .a-strength span.ok{color:#4ade80}

/* ---------- Status banners ---------- */
.a-status{padding:.75rem .95rem; border-radius:.75rem; font-size:.85rem; font-weight:500; margin-bottom:1.1rem; display:flex; align-items:center; gap:.55rem}
.a-status.err{background:#fef2f2; color:#b91c1c; border:1px solid #fecaca}
.a-status.ok{background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0}
.dark .a-status.err{background:rgba(239,68,68,.1); color:#fca5a5; border-color:rgba(239,68,68,.25)}
.dark .a-status.ok{background:rgba(34,197,94,.1); color:#86efac; border-color:rgba(34,197,94,.25)}

/* ---------- Buttons ---------- */
.a-forgot{display:flex; justify-content:flex-end; margin:-.35rem 0 1.35rem}
.a-forgot a{color:var(--a-primary); font-size:.8rem; font-weight:600; text-decoration:none}
.a-forgot a:hover{text-decoration:underline}
.a-btn{
    position:relative; width:100%; display:inline-flex; align-items:center; justify-content:center;
    padding:.85rem 1rem; border:none; border-radius:.75rem; cursor:pointer;
    font-family:inherit; font-size:.92rem; font-weight:600; color:#fff;
    background:var(--a-primary); box-shadow:0 8px 20px -10px rgba(79,70,229,.7);
    transition:background .2s, transform .15s, box-shadow .2s;
}
.a-btn:hover{background:var(--a-primary-dark); transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(79,70,229,.75)}
.a-btn:active{transform:translateY(0)}
.a-btn[disabled]{opacity:.85; cursor:not-allowed; transform:none; box-shadow:none}
.a-btn .a-spin{display:none}
.a-btn.is-loading .a-btn-label{visibility:hidden}
.a-btn.is-loading .a-spin{display:inline-flex; position:absolute}
.a-btn-label{display:inline-flex; align-items:center; gap:.5rem}
.a-btn.ghost{background:transparent; color:var(--a-text); box-shadow:none; border:1px solid var(--a-border)}
.a-btn.ghost:hover{background:var(--a-bg); border-color:#cbd5e1}
.dark .a-btn.ghost:hover{background:rgba(255,255,255,.04); border-color:#334155}
.a-loader{display:inline-block; width:1.15rem; height:1.15rem; border-radius:9999px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:aspin .7s linear infinite}
.a-btn.ghost .a-loader{border-color:rgba(100,116,139,.35); border-top-color:var(--a-primary)}
@keyframes aspin{to{transform:rotate(360deg)}}

.a-links{text-align:center; font-size:.85rem; color:var(--a-muted); margin:1.35rem 0 0}
.a-links a,
.a-linkbtn{color:var(--a-primary); font-weight:600; text-decoration:none; background:none; border:none; cursor:pointer; font-family:inherit; font-size:inherit; padding:0}
.a-links a:hover,
.a-linkbtn:hover{text-decoration:underline}
.a-back{
    display:inline-flex; align-items:center; gap:.4rem; background:none; border:none; cursor:pointer;
    color:var(--a-muted); font-family:inherit; font-size:.82rem; font-weight:600; padding:0; margin-bottom:1.35rem;
}
.a-back:hover{color:var(--a-primary)}

/* ---------- OTP step ---------- */
.a-otp-badge{
    width:3.25rem; height:3.25rem; border-radius:1rem; display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; margin:0 auto 1.15rem; background:rgba(79,70,229,.1);
    color:var(--a-primary); border:1px solid var(--a-border);
}
.dark .a-otp-badge{background:rgba(99,102,241,.14)}
.a-otp-input{text-align:center; letter-spacing:.6em; font-size:1.5rem; font-weight:700; padding-left:.6em}

/* ---------- Steps ---------- */
.a-step{display:none}
.a-step.active{display:block; animation:aFade .35s ease}
@keyframes aFade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- Responsive ---------- */
@media (min-width:1024px){
    .auth-shell{grid-template-columns:1.05fr 1fr}
    .auth-brand{display:flex}
    .auth-panel{padding:1.5rem 2rem 2rem}
}
@media (max-width:480px){
    .auth-card{padding:1.75rem 1.35rem; border-radius:1rem}
    .auth-card h1{font-size:1.45rem}
    .a-row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
    .auth-brand::before,
    .auth-brand::after{animation:none}
    .a-step.active{animation:none}
    .a-btn:hover{transform:none}
}