{{-- SANBS brand identity for authentication screens.
     Tokens and component styles mirror the SANBS design system
     (sanbs-dashboard.html). Classes are prefixed with "sanbs-" so they never
     collide with the KeenThemes dashboard theme. --}}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
    :root {
        --sanbs-red: #da291c;
        --sanbs-red-700: #b71c10;
        --sanbs-maroon: #3a0512;
        --sanbs-maroon-mid: #7d1d12;
        --sanbs-cream: #f6f6ea;
        --sanbs-light-red: #f38475;
        --sanbs-ink: #1a0306;
        --sanbs-muted: #9ca3af;
        --sanbs-label: #374151;
        --sanbs-border: #e5e7eb;
        --sanbs-success: #16a34a;
        --sanbs-warning: #d97706;
    }

    .sanbs-auth {
        font-family: "Century Gothic", CenturyGothic, AppleGothic, Futura, Inter, sans-serif;
        background: linear-gradient(135deg, var(--sanbs-maroon) 0%, var(--sanbs-maroon-mid) 40%, var(--sanbs-red) 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        width: 100%;
    }

    .sanbs-auth-card {
        background: #fff;
        border-radius: 20px;
        padding: 40px;
        width: 100%;
        max-width: 440px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
        color: var(--sanbs-ink);
    }

    .sanbs-auth-card--wide { max-width: 560px; }

    /* Brand mark */
    .sanbs-auth-head { text-align: center; margin-bottom: 24px; }
    .sanbs-logo-badge {
        width: 48px; height: 48px; margin: 0 auto 12px;
        background: var(--sanbs-red); border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-weight: 900; font-size: 20px; letter-spacing: -.5px;
    }
    /* Logo image mark: constrained by height, width follows the aspect ratio
       (logo_es.png is portrait, so an unconstrained img blows out the card). */
    .sanbs-auth-logo {
        display: block; width: fit-content; margin: 0 auto 14px;
        text-decoration: none; line-height: 0;
    }
    .sanbs-auth-logo img {
        display: block; height: 64px; width: auto; max-width: 100%; object-fit: contain;
    }
    .sanbs-logo-badge--soft { background: var(--sanbs-cream); color: var(--sanbs-red); font-size: 22px; }
    .sanbs-logo-badge--success { background: #f0fdf4; color: var(--sanbs-success); }
    .sanbs-auth-title { font-size: 20px; font-weight: 800; color: var(--sanbs-ink); }
    .sanbs-auth-subtitle { font-size: 13px; color: var(--sanbs-muted); margin-top: 4px; line-height: 1.5; }

    /* Fields */
    .sanbs-field { margin-bottom: 14px; }
    .sanbs-field:last-of-type { margin-bottom: 20px; }
    .sanbs-label {
        display: block; font-size: 13px; font-weight: 600;
        color: var(--sanbs-label); margin-bottom: 5px;
    }
    .sanbs-input {
        width: 100%; padding: 10px 14px; border-radius: 8px;
        border: 1.5px solid var(--sanbs-border); font-family: inherit; font-size: 14px;
        outline: none; transition: border-color .15s, box-shadow .15s;
        background: #fff; color: var(--sanbs-ink);
    }
    .sanbs-input:focus { border-color: var(--sanbs-red); box-shadow: 0 0 0 3px rgba(218, 41, 28, .08); }
    .sanbs-input::placeholder { color: #c3c7ce; }
    .sanbs-input-group { position: relative; }
    .sanbs-input-group .sanbs-input { padding-right: 44px; }
    .sanbs-input-affix {
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        background: none; border: 0; cursor: pointer; color: var(--sanbs-muted);
        display: flex; align-items: center; padding: 4px;
    }
    .sanbs-input-affix:hover { color: var(--sanbs-red); }

    /* Buttons */
    .sanbs-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 11px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
        cursor: pointer; border: none; transition: all .15s ease; font-family: inherit;
        text-decoration: none;
    }
    .sanbs-btn-block { width: 100%; }
    .sanbs-btn-primary { background: var(--sanbs-red); color: #fff; }
    .sanbs-btn-primary:hover:not(:disabled) {
        background: var(--sanbs-red-700); transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(218, 41, 28, .3);
    }
    .sanbs-btn-ghost { background: transparent; color: #6b7280; border: 1.5px solid var(--sanbs-border); }
    .sanbs-btn-ghost:hover:not(:disabled) { background: #f9fafb; color: #111827; }
    .sanbs-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

    /* Links & helper text */
    .sanbs-foot { text-align: center; margin-top: 14px; font-size: 13px; color: var(--sanbs-muted); }
    .sanbs-link { color: var(--sanbs-red); text-decoration: none; font-weight: 600; }
    .sanbs-link:hover { text-decoration: underline; }
    .sanbs-error { display: block; font-size: 12.5px; color: var(--sanbs-red); margin-top: 5px; }
    .sanbs-hint { font-size: 12px; color: var(--sanbs-muted); margin-top: 6px; }

    /* OTP */
    .sanbs-otp-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
    .sanbs-otp-input {
        width: 48px; height: 56px; text-align: center; font-size: 22px; font-weight: 700;
        border-radius: 10px; border: 2px solid var(--sanbs-border); font-family: inherit;
        outline: none; transition: border-color .15s, box-shadow .15s; color: var(--sanbs-ink);
    }
    .sanbs-otp-input:focus { border-color: var(--sanbs-red); box-shadow: 0 0 0 3px rgba(218, 41, 28, .1); }

    /* Two-column field row */
    .sanbs-field-row { display: flex; gap: 12px; }
    .sanbs-field-row .sanbs-field { flex: 1; min-width: 0; }

    /* Checkbox */
    .sanbs-check {
        display: flex; align-items: center; gap: 9px;
        font-size: 13px; color: var(--sanbs-label); margin-bottom: 20px; cursor: pointer;
    }
    .sanbs-check input[type="checkbox"] {
        width: 16px; height: 16px; accent-color: var(--sanbs-red); cursor: pointer; flex-shrink: 0;
    }

    /* Password strength */
    .sanbs-strength { display: flex; gap: 4px; margin-bottom: 6px; }
    .sanbs-strength-track {
        height: 5px; border-radius: 99px; background: var(--sanbs-border); overflow: hidden;
    }
    .sanbs-strength-bar { height: 4px; flex: 1; border-radius: 99px; background: var(--sanbs-border); overflow: hidden; }
    .sanbs-strength-fill { height: 100%; border-radius: 99px; transition: width .3s, background .3s; }

    /* Alerts */
    .sanbs-alert {
        border-radius: 10px; padding: 11px 14px; font-size: 13px;
        display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px;
    }
    .sanbs-alert-error { background: #fef2f2; color: #991b1b; border-left: 4px solid var(--sanbs-red); }
    .sanbs-alert-success { background: #f0fdf4; color: #166534; border-left: 4px solid var(--sanbs-success); }
    .sanbs-alert-info { background: #eff6ff; color: #1e40af; border-left: 4px solid #2563eb; }

    @media (max-width: 480px) {
        .sanbs-auth-card { padding: 28px 22px; border-radius: 16px; }
        .sanbs-otp-input { width: 42px; height: 50px; font-size: 19px; }
    }
</style>