:root{
    --brand: #FF8C44;
    --brand-strong: #FF4D00;
    --bg: #ffffff;
    --page-bg: #f4f6f8;
    --text: #1f2937;
    --muted: #6b7280;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(18,38,63,0.06);
    --maxw: 480px;
    --gap: 12px;
    --accent-weak: rgba(255,140,68,0.12);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html,body{ height:100%; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--page-bg); color:var(--text); -webkit-font-smoothing:antialiased; }

.auth-container{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
}

.auth-form{
    width:100%;
    max-width:var(--maxw);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
    padding:2.25rem;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border: 1px solid rgba(20,40,60,0.03);
}

.auth-form h1{ font-size:1.25rem; margin-bottom:4px; }
.muted{ color:var(--muted); margin-bottom:1rem; }
.small{ font-size:0.875rem; }

.input-group{ display:block; margin-bottom:1rem; }
.label-text{ display:block; font-weight:600; margin-bottom:8px; font-size:0.95rem; color:#111827; }

.input-group input, .password-row input{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid rgba(15,23,42,0.06);
    background:#fff;
    font-size:1rem;
    transition: box-shadow .12s ease, border-color .12s ease, transform .06s ease;
}
.input-group input:focus, .password-row input:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow: 0 4px 18px var(--accent-weak);
    transform: translateY(-1px);
}

/* password row and toggle */
.password-row{ display:flex; gap:8px; align-items:center; }
.icon-btn{
    background:transparent;
    border:1px solid rgba(15,23,42,0.06);
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:0.9rem;
    color:var(--muted);
}
.icon-btn:focus{ outline:3px solid rgba(255,140,68,0.14); }

/* strength meter */
.pwd-meter{ height:8px; background:#f1f5f9; border-radius:8px; overflow:hidden; margin-top:10px; }
.pwd-bar{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#f97316,#10b981); transition:width .18s ease, background .18s ease; }

/* error / status */
.form-error{ min-height:1.2em; color:#b91c1c; margin-bottom:8px; font-size:0.95rem; }

/* primary button */
.btn{
    display:inline-block;
    width:100%;
    padding:12px 14px;
    background: linear-gradient(90deg,var(--brand),var(--brand-strong));
    color:#fff;
    border: none;
    border-radius:10px;
    font-weight:600;
    font-size:1rem;
    cursor:pointer;
    box-shadow: 0 6px 18px rgba(255,140,68,0.12);
    transition: transform .08s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,140,68,0.14); }
.btn:active{ transform: translateY(0); }

/* divider and links */
.divider{ border:0; height:1px; background:rgba(15,23,42,0.04); margin:16px 0; border-radius:2px; }
.auth-form a{ color:var(--brand); text-decoration:none; }
.auth-form a:hover{ color:var(--brand-strong); text-decoration:underline; }

/* accessibility focus */
:focus-visible{ outline:3px solid rgba(255,140,68,0.14); outline-offset:3px; border-radius:8px; }

/* responsive tweaks */
@media (max-width:420px){
    .auth-form{ padding:1.25rem; border-radius:10px; }
    .password-row{ flex-direction:column; align-items:stretch; }
    .icon-btn{ width:100%; }
}