/* General Styles */
:root{
    --brand: #FF8C44;
    --brand-strong: #FF4D00;
    --bg: #ffffff;
    --page-bg: #f4f6f8;
    --text: #0f1724;
    --muted: #6b7280;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(18,38,63,0.06);
    --maxw: 420px;
    --gap: 12px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html,body{ height:100%; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, 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:2rem;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid rgba(15,23,42,0.04);
}

.auth-form .brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}
.brand .logo{
    width:40px; height:40px; border-radius:8px; object-fit:cover;
}
.auth-form h1{ font-size:1.25rem; margin-bottom:6px; }
.muted{ color:var(--muted); margin-bottom:1rem; font-size:0.95rem; }

/* Input Group */
.input-group {
    margin-bottom: 0.9rem;
}

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

.input-group 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;
}

.input-group input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 6px 20px rgba(255,140,68,0.08);
}

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

/* actions */
.form-actions{ margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.checkbox{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:0.95rem; }

/* 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 8px 24px rgba(255,140,68,0.12);
    transition: transform .08s ease, box-shadow .12s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(255,140,68,0.14);
}

/* helper */
.form-error{ color:#b91c1c; min-height:1.2em; margin-top:8px; font-size:0.95rem; }
.divider{ height:1px; background:rgba(15,23,42,0.04); border-radius:2px; margin:16px 0; }

/* links */
.auth-form a{ color:var(--brand); text-decoration:none; }
.auth-form a:hover{ color:var(--brand-strong); text-decoration:underline; }

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

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