/* ==========================================================================
   Sign-in / sign-up screens
   ========================================================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        linear-gradient(150deg, rgba(10,33,88,.94), rgba(26,79,160,.90)),
        radial-gradient(circle at 20% 15%, rgba(201,162,39,.25), transparent 55%);
    background-color: var(--navy, #0a2158);
}

.auth-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
    padding: 2.5rem 2.25rem;
    width: 100%;
    max-width: 460px;
    animation: auth-rise .5s cubic-bezier(.22,1,.36,1);
}
@keyframes auth-rise { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

.auth-brand { text-align: center; margin-bottom: 1.75rem; }
.auth-brand img {
    width: 68px; height: 68px; object-fit: contain;
    border-radius: 50%; background: #fff; padding: 8px;
    box-shadow: 0 3px 14px rgba(10,33,88,.16);
}
.auth-brand h1 { font-size: 1.35rem; color: var(--navy, #0a2158); margin: .9rem 0 0; }
.auth-brand p  { font-size: .9rem; color: var(--text-muted, #5a607a); margin-top: .25rem; }

/* --- Fields --------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label {
    display: block; font-size: .85rem; font-weight: 600;
    color: var(--navy, #0a2158); margin-bottom: .4rem;
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > i.leading {
    position: absolute; left: .95rem;
    color: var(--text-muted, #5a607a); font-size: .95rem; pointer-events: none;
}
.field input {
    width: 100%;
    padding: .85rem 1rem .85rem 2.6rem;
    border: 1.5px solid #d8dce7;
    border-radius: 12px;
    font-size: 1rem; font-family: inherit;
    background: #fbfbfd;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:hover { border-color: #b9c0d2; }
.field input:focus {
    outline: none; background: #fff;
    border-color: var(--blue, #1a4fa0);
    box-shadow: 0 0 0 4px rgba(26,79,160,.14);
}
.field input[aria-invalid="true"] {
    border-color: #b3261e;
    box-shadow: 0 0 0 4px rgba(179,38,30,.12);
}

.toggle-pw {
    position: absolute; right: .5rem;
    background: none; border: 0; cursor: pointer;
    color: var(--text-muted, #5a607a);
    padding: .5rem .6rem; border-radius: 8px; font-size: .95rem; line-height: 1;
}
.toggle-pw:hover { color: var(--navy, #0a2158); background: #f0f2f7; }
.toggle-pw:focus-visible { outline: 2px solid var(--blue, #1a4fa0); outline-offset: 2px; }

.hint {
    font-size: .8rem; color: var(--text-muted, #5a607a);
    margin: .35rem 0 0; min-height: 1.1rem; line-height: 1.4;
}
.hint-error { color: #b3261e; font-weight: 500; }

/* --- Password strength meter ---------------------------------------------- */
.strength { display: flex; gap: 4px; margin-top: .5rem; }
.strength span {
    height: 4px; flex: 1; border-radius: 2px;
    background: #e6e9f0; transition: background .25s;
}
.strength[data-score="1"] span:nth-child(-n+1) { background: #d93025; }
.strength[data-score="2"] span:nth-child(-n+2) { background: #f29900; }
.strength[data-score="3"] span:nth-child(-n+3) { background: #1a73e8; }
.strength[data-score="4"] span                 { background: #1e8e3e; }

/* --- Alerts ---------------------------------------------------------------- */
.alert {
    border-radius: 12px; padding: .85rem 1rem; font-size: .9rem;
    margin-bottom: 1.25rem;
    display: flex; gap: .6rem; align-items: flex-start; line-height: 1.45;
}
.alert i { margin-top: .15rem; flex-shrink: 0; }
.alert-error   { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; }
.alert-success { background: #e7f4ea; color: #146c2e; border: 1px solid #bfe0c8; }
.alert-info    { background: #e8f0fe; color: #174ea6; border: 1px solid #c3d6f7; }
.alert-caps    { background: #fff8e1; color: #7a5a00; border: 1px solid #f3e0a8; }

/* --- Submit ---------------------------------------------------------------- */
button.submit {
    width: 100%; padding: .95rem;
    border: 0; border-radius: 12px;
    background: linear-gradient(135deg, var(--navy, #0a2158), var(--blue, #1a4fa0));
    color: #fff; font-size: 1rem; font-weight: 600; font-family: inherit;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    transition: transform .15s, box-shadow .2s, opacity .2s;
    box-shadow: 0 6px 18px rgba(10,33,88,.28);
}
button.submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,33,88,.34); }
button.submit:active:not(:disabled) { transform: translateY(0); }
button.submit:focus-visible { outline: 3px solid var(--gold, #c9a227); outline-offset: 2px; }
button.submit:disabled { opacity: .7; cursor: progress; }

.spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
    animation: auth-spin .7s linear infinite; display: none;
}
.is-loading .spinner { display: block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* --- Footer links ----------------------------------------------------------- */
.auth-foot {
    margin-top: 1.5rem; text-align: center;
    font-size: .875rem; color: var(--text-muted, #5a607a);
}
.auth-foot a { color: var(--blue, #1a4fa0); text-decoration: none; font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
.auth-foot .sep { margin: 0 .5rem; color: #d8dce7; }

@media (max-width: 480px) {
    .auth-card { padding: 2rem 1.5rem; border-radius: 14px; }
}