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

:root {
    --auth-brand:#E05A00;
    --auth-brand-dark:#B84800;
    --auth-surface:#ffffff;
    --auth-soft:#f8fafc;
    --auth-border:#dbe2ea;
    --auth-text:#111827;
    --auth-muted:#6b7280;
    --auth-danger:#b91c1c;
    --auth-danger-soft:#fef2f2;
    --auth-success:#047857;
    --auth-success-soft:#ecfdf5;
    --staging-banner-h:0px;
}

* { box-sizing:border-box; }
html, body { min-height:100%; }
body {
    margin:0;
    min-height:100vh;
    font-family:Inter, sans-serif;
    background:var(--auth-surface);
    color:var(--auth-text);
}
button, input { font:inherit; }

*{scrollbar-width:thin;scrollbar-color:var(--auth-brand) #f1f5f9}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#f1f5f9}
*::-webkit-scrollbar-thumb{border:2px solid #f1f5f9;border-radius:999px;background:linear-gradient(180deg,#ff7a1f,#b84800)}

.adminhub-staging-banner{position:fixed;inset:0 0 auto;z-index:2000;height:var(--staging-banner-h);display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;background:repeating-linear-gradient(135deg,#9a3412 0,#9a3412 12px,#c2410c 12px,#c2410c 24px);color:#fff;font-size:11px;letter-spacing:.04em;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.adminhub-staging-banner strong{font-size:11px;letter-spacing:.1em}
.adminhub-staging-banner span{color:rgba(255,255,255,.84)}

.auth-page {
    min-height:100vh;
    padding-top:var(--staging-banner-h);
    display:grid;
    grid-template-columns:1fr 1fr;
}
.auth-image {
    position:relative;
    min-height:100vh;
    overflow:hidden;
    background:url('/Images/accountant.jpg') center / cover no-repeat;
}
.auth-image::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(2,8,23,.08),rgba(2,8,23,.28));
}
.auth-mobile-logo { display:none; }
.auth-panel {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:56px;
    background:#fff;
}
.auth-content { width:100%; max-width:420px; }
.auth-logo { margin-bottom:38px; }
.auth-logo img {
    display:block;
    width:auto;
    height:64px;
    max-width:290px;
    object-fit:contain;
}
.auth-heading {
    margin:0;
    font-size:2rem;
    line-height:1.15;
    letter-spacing:-.04em;
}
.auth-intro {
    margin:10px 0 24px;
    color:var(--auth-muted);
    font-size:.92rem;
    line-height:1.65;
}
.auth-alert {
    margin-bottom:18px;
    padding:13px 14px;
    border-radius:12px;
    font-size:.84rem;
    line-height:1.5;
}
.auth-alert--error {
    border:1px solid #fecaca;
    background:var(--auth-danger-soft);
    color:var(--auth-danger);
}
.auth-alert--success {
    border:1px solid #a7f3d0;
    background:var(--auth-success-soft);
    color:var(--auth-success);
}
.auth-form { display:grid; gap:17px; }
.auth-field { display:grid; gap:8px; }
.auth-field label {
    color:#374151;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.auth-input-wrap { position:relative; }
.auth-input {
    width:100%;
    height:50px;
    padding:0 14px;
    border:1px solid var(--auth-border);
    border-radius:11px;
    outline:none;
    background:var(--auth-soft);
    color:var(--auth-text);
}
.auth-input--password { padding-right:54px; }
.auth-input--otp {
    height:58px;
    text-align:center;
    font-size:1.5rem;
    font-weight:800;
    letter-spacing:.42em;
    caret-color:var(--auth-brand);
}
.auth-input:focus {
    border-color:rgba(224,90,0,.55);
    background:#fff;
    box-shadow:0 0 0 4px rgba(224,90,0,.11);
}
.auth-toggle {
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    padding:7px 8px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#6b7280;
    font-size:.75rem;
    font-weight:700;
    cursor:pointer;
}
.auth-button {
    height:50px;
    border:0;
    border-radius:11px;
    background:linear-gradient(135deg,var(--auth-brand),var(--auth-brand-dark));
    color:#fff;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(224,90,0,.20);
}
.auth-button:hover { transform:translateY(-1px); }
.auth-button:disabled { cursor:not-allowed; opacity:.68; transform:none; }
.auth-actions {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-top:20px;
}
.auth-link,
.auth-link-button {
    padding:0;
    border:0;
    background:transparent;
    color:var(--auth-brand);
    font-size:.80rem;
    font-weight:750;
    cursor:pointer;
    text-decoration:none;
}
.auth-link:hover,
.auth-link-button:hover { color:var(--auth-brand-dark); }
.auth-link-button:disabled { color:#9ca3af; cursor:not-allowed; }
.auth-separator { color:#d1d5db; font-size:.75rem; }
.auth-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--auth-muted);
    font-size:.78rem;
}
.auth-strong { color:var(--auth-text); font-weight:800; }
.auth-requirements {
    margin:0;
    padding-left:18px;
    color:var(--auth-muted);
    font-size:.78rem;
    line-height:1.7;
}
.auth-footnote {
    margin:22px 0 0;
    color:#9ca3af;
    font-size:.74rem;
    line-height:1.65;
    text-align:center;
}
.auth-card {
    padding:18px;
    border:1px solid var(--auth-border);
    border-radius:12px;
    background:var(--auth-soft);
}
.auth-input:focus-visible,
.auth-button:focus-visible,
.auth-link:focus-visible,
.auth-link-button:focus-visible,
.auth-toggle:focus-visible {
    outline:3px solid rgba(224,90,0,.28);
    outline-offset:3px;
}

@media (max-width:950px) {
    .auth-page { grid-template-columns:1fr; }
    .auth-image { min-height:330px; }
    .auth-mobile-logo {
        position:absolute;
        top:20px;
        left:20px;
        z-index:2;
        display:block;
    }
    .auth-mobile-logo img {
        display:block;
        width:auto;
        height:48px;
        max-width:260px;
        object-fit:contain;
        filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
    }
    .auth-panel { min-height:auto; padding:42px 28px 48px; }
    .auth-logo { display:none; }
}
@media (max-width:600px) {
    .auth-image { min-height:270px; }
    .auth-mobile-logo { top:16px; left:16px; }
    .auth-mobile-logo img { height:80px; max-width:none; }
    .auth-panel { padding:34px 20px 42px; }
    .auth-heading { font-size:1.65rem; }
    .auth-intro { font-size:.87rem; }
    .auth-input--otp { font-size:1.28rem; letter-spacing:.34em; }
    .auth-meta { align-items:flex-start; flex-direction:column; gap:4px; }
}