:root {
    color-scheme: light;
    --brand: #16677d;
    --brand-dark: #0a4556;
    --brand-mid: #1b849c;
    --brand-soft: #dceef3;
    --gold: #d4a05a;
    --gold-dark: #9a6f2f;
    --ink: #0f2430;
    --muted: #4d636e;
    --line: #d5e2e7;
    --radius-md: .9rem;
    --shadow-lg: 0 26px 56px rgba(8, 40, 50, .18);
    font-family: "Segoe UI", "Geeza Pro", "Traditional Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
}

* { box-sizing: border-box; }

body.auth-body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background:
        radial-gradient(ellipse 36rem 24rem at 12% 10%, rgba(212, 160, 90, .22), transparent 60%),
        radial-gradient(ellipse 40rem 28rem at 88% 18%, rgba(22, 103, 125, .22), transparent 58%),
        linear-gradient(155deg, #0a4556 0%, #16677d 42%, #0d5668 100%);
    color: var(--ink);
    font-family: inherit;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.auth-body .ambient-shapes__blob--a {
    opacity: .75;
}
.auth-body .ambient-shapes__blob--b {
    opacity: .65;
}
.auth-body .ambient-shapes__ring {
    border-color: rgba(255, 255, 255, .2);
}
.auth-body .ambient-shapes__ring::after {
    border-color: rgba(212, 160, 90, .45);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: min(100%, 30rem);
    padding: clamp(1.5rem, 5vw, 2.35rem);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 1.35rem;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, .98), #f3fafb 70%, #e8f3f6);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.auth-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: .35rem;
    background: linear-gradient(90deg, var(--brand), var(--gold), var(--brand-mid));
}

.auth-card::after {
    content: "";
    position: absolute;
    inset-block-end: -3rem;
    inset-inline-end: -2.5rem;
    width: 9rem;
    height: 9rem;
    border-radius: 40% 60% 55% 45%;
    background: radial-gradient(circle, rgba(22, 103, 125, .12), transparent 70%);
    pointer-events: none;
}

.auth-brand { position: relative; z-index: 1; text-align: center; }
.auth-brand img {
    width: 8.5rem;
    height: 9.6rem;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(22, 103, 125, .2));
}
.auth-brand h1 {
    margin: .55rem 0 .35rem;
    color: var(--brand-dark);
    font-size: clamp(1.35rem, 4vw, 1.55rem);
    letter-spacing: -.02em;
}
.auth-brand p {
    margin: 0 0 1.6rem;
    color: var(--muted);
    font-size: .88rem;
}

label {
    display: block;
    margin: 1.05rem 0 .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
}

input[type="email"],
input[type="password"] {
    width: 100%;
    padding: .82rem .9rem;
    border: 1px solid #b9ccd2;
    border-radius: .7rem;
    background: #fff;
    color: var(--ink);
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

input[type="email"]:hover,
input[type="password"]:hover { border-color: #9bb4bc; }

input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(22, 103, 125, .16);
}

.remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .85rem;
    font-weight: 400;
    color: var(--muted);
}

.submit-button {
    width: 100%;
    margin-top: 1.35rem;
    padding: .95rem;
    border: 0;
    border-radius: .8rem;
    background: linear-gradient(135deg, var(--brand-mid), var(--brand-dark));
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(22, 103, 125, .32);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.submit-button:hover {
    background: linear-gradient(135deg, var(--brand), #062d37);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(22, 103, 125, .38);
}

.submit-button:focus-visible {
    outline: 3px solid rgba(212, 160, 90, .55);
    outline-offset: 2px;
}

.alert,
.errors {
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    border-radius: .7rem;
    font-size: .84rem;
    border: 1px solid transparent;
}

.alert {
    background: #eaf7f1;
    color: #1f6a51;
    border-color: #cfe9dc;
}

.errors {
    padding-inline-start: 2rem;
    background: #fdf1f0;
    color: #963d3d;
    border-color: #f0d4d2;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}