/*
 * Auth pages (resources/views/auth/base.blade.php and every view extending it).
 * Desktop: light hero panel (khatam lattice) on the left, form on the right.
 * Below 992px: the hero collapses into a mini hero and the form sits on a white sheet.
 * Loaded after Metronic's style.bundle.css; Metronic utilities carry !important, so views use the classes below instead.
 */

/* Plus Jakarta Sans, SIL Open Font License 1.1; latin subset from @fontsource/plus-jakarta-sans */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'); }

:root {
    --auth-navy: #2C3B86;
    --auth-navy-dark: #222E6B;
    --auth-ink: #1B2140;
    --auth-muted: #5B6275;
    --auth-line: #D5DAE3;
    --auth-surface: #F4F6FA;
    --auth-danger: #D9214E;
    --auth-success: #1E7A4B;
    --auth-meter-on: #2E9E62;
    --auth-focus: rgba(44, 59, 134, .18);
    --auth-focus-ring: rgba(44, 59, 134, .45);
    --auth-radius: 10px;
    --auth-field-h: 48px;
    --auth-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --auth-fs-small: 13px; /* footer, hints, divider */
    --auth-fs-title: 26px;
    /* khatam (8-point star) lattice, navy lines: the hero's main visual on every breakpoint */
    --auth-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%232C3B86' stroke-width='1'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Crect x='24' y='24' width='16' height='16'/%3E%3Crect x='24' y='24' width='16' height='16' transform='rotate(45 32 32)'/%3E%3Cpath d='M32 0v12.2M32 51.8V64M0 32h12.2M51.8 32H64M0 0l18 18M64 0L46 18M0 64l18-18M64 64L46 46'/%3E%3C/g%3E%3C/svg%3E");
    /* vertical rhythm: one scale; below 992px it shrinks proportionally (field gap 24 -> 20) */
    --auth-scale: 1;
    --auth-gap-label: calc(8px * var(--auth-scale));
    --auth-gap-tight: calc(12px * var(--auth-scale));
    --auth-gap-field: calc(24px * var(--auth-scale));
    --auth-gap-block: calc(32px * var(--auth-scale));
}

body.auth-body {
    font-family: var(--auth-font);
    color: var(--auth-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* ---------- layout ---------- */

/* Metronic makes body a 100%-high flex column; flex-shrink 0 keeps tall pages from overflowing upward */
.auth-shell { flex: 1 0 auto; display: grid; grid-template-columns: minmax(440px, 42%) 1fr; min-height: 100vh; }

/* isolation keeps the hero's own layers inside it, so the sheet can overlap it without a z-index
   (a z-index on the sheet would trap Bootstrap modals rendered inside the page content) */
.auth-brand-surface { position: relative; isolation: isolate; overflow: hidden; color: var(--auth-ink); background: var(--auth-surface); }
.auth-brand-surface::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
    background: var(--auth-pattern) 0 0 / var(--auth-pattern-size, 64px) var(--auth-pattern-size, 64px);
    -webkit-mask-image: var(--auth-pattern-mask);
    mask-image: var(--auth-pattern-mask);
}
.auth-brand-surface > * { position: relative; z-index: 1; }

.auth-brand {
    /* the lattice fills the lower part; logo and headline sit on the plain surface above it */
    --auth-pattern-mask: linear-gradient(to bottom, transparent 30%, #000 62%, #000 84%, rgba(0, 0, 0, .3) 100%);
    --auth-pattern-size: 144px;
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    padding: 44px 56px;
}
.auth-brand-logo img { height: 38px; }
/* kept quieter than the form title: the form is the page's task */
.auth-brand-headline { color: var(--auth-ink); font-size: 24px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; max-width: 380px; margin: 72px 0 0; }
.auth-foot { font-size: var(--auth-fs-small); }
.auth-brand .auth-foot { margin-top: auto; color: var(--auth-muted); }

.auth-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 32px; }
/* break long unspaced user data (emails, names) instead of overflowing the column */
.auth-sheet { width: 100%; max-width: 400px; overflow-wrap: break-word; }
.auth-form { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
.auth-hero-mini, .auth-sheet > .auth-foot { display: none; }

@media (max-width: 991.98px) {
    :root { --auth-scale: .8333; --auth-fs-title: 24px; }
    .auth-shell { display: block; }
    .auth-brand { display: none; }
    .auth-main { min-height: 100vh; padding: 0; justify-content: flex-start; align-items: stretch; }
    .auth-hero-mini {
        --auth-pattern-mask: linear-gradient(to right, #000, transparent 38%, transparent 62%, #000);
        --auth-pattern-size: 64px;
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        padding: 22px 24px 42px; text-align: center;
    }
    .auth-hero-mini img { height: 28px; }
    .auth-hero-mini p { margin: 0; max-width: 100%; font-size: var(--auth-fs-small); font-weight: 500; color: var(--auth-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .auth-sheet {
        max-width: none; flex: 1; display: flex; flex-direction: column;
        margin-top: -20px; position: relative;
        background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -1px 0 var(--auth-line);
        padding: var(--auth-gap-block) 24px 28px;
    }
    .auth-sheet > .auth-foot { display: block; margin-top: auto; padding-top: var(--auth-gap-block); color: var(--auth-muted); text-align: center; }
    .auth-heading { text-align: center; }
}
/* narrowest phones: the one-line tagline (~273px) no longer fits between 24px paddings */
@media (max-width: 351.98px) {
    .auth-hero-mini { padding-left: 16px; padding-right: 16px; }
}

/* ---------- content ---------- */

.auth-heading { margin-bottom: var(--auth-gap-block); }
.auth-title { font-family: var(--auth-font); font-size: var(--auth-fs-title); line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--auth-ink); margin: 0 0 var(--auth-gap-label); overflow-wrap: anywhere; text-wrap: balance; }
.auth-sub { font-size: 15px; line-height: 1.5; color: var(--auth-muted); margin: 0; }
.auth-text { font-size: 15px; line-height: 1.6; color: var(--auth-muted); margin: 0 0 var(--auth-gap-field); }
.auth-sub strong, .auth-text strong { color: var(--auth-ink); font-weight: 600; }
.auth-note { background: var(--auth-surface); border-radius: var(--auth-radius); padding: 16px 18px; font-size: 14px; line-height: 1.6; color: var(--auth-muted); margin-bottom: var(--auth-gap-block); }
.auth-note strong { color: var(--auth-ink); }

.auth-field { margin-bottom: var(--auth-gap-field); }
.auth-sheet .form-label { font-size: 14px; font-weight: 600; color: var(--auth-ink); margin-bottom: var(--auth-gap-label); }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-label-row .form-label { margin-bottom: var(--auth-gap-label); }
.auth-sheet .form-text { color: var(--auth-muted); font-size: var(--auth-fs-small); }
.auth-hint { font-size: var(--auth-fs-small); color: var(--auth-muted); }

.auth-sheet .form-control { border: 1px solid var(--auth-line); background-color: #fff; border-radius: var(--auth-radius); font-family: var(--auth-font); font-size: 15px; color: var(--auth-ink); padding-left: 14px; padding-right: 14px; }
.auth-sheet .form-control.form-control-lg { height: var(--auth-field-h); padding-top: 0; padding-bottom: 0; }
.auth-sheet .form-control:focus { border-color: var(--auth-navy); box-shadow: 0 0 0 3px var(--auth-focus); }
.auth-sheet .form-control[readonly] { background-color: var(--auth-surface); }
.auth-sheet .form-control.is-invalid { border-color: var(--auth-danger); }
.auth-sheet .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 33, 78, .16); }
.auth-sheet .password-toggle i { color: var(--auth-muted); }
/* the eye sits over the field's right end: no text and no validation icon under it */
.auth-sheet .form-control:has(+ .password-toggle) { padding-right: 48px; background-image: none !important; }
.auth-sheet .iti { width: 100%; }

/* ---------- links & buttons ---------- */

.link-cs { color: var(--auth-navy) !important; font-weight: 600; }
.link-cs:hover { color: var(--auth-navy-dark) !important; text-decoration: underline; }
.text-cs { color: var(--auth-navy) !important; }
.auth-link-sm { font-size: 14px; font-weight: 500; color: var(--auth-navy); }
.auth-link-sm:hover { color: var(--auth-navy-dark); text-decoration: underline; }
/* SSO login: way back to the client app, above the heading */
.auth-back { display: inline-flex; align-items: baseline; gap: 6px; margin-bottom: var(--auth-gap-field); font-size: 14px; font-weight: 500; color: var(--auth-muted); }
.auth-back:hover { color: var(--auth-navy); }
.auth-back i { color: inherit; font-size: 16px; line-height: 1; }

.btn.btn-cs { color: #fff !important; background-color: var(--auth-navy) !important; font-weight: 600; }
.btn.btn-cs:hover, .btn.btn-cs:active { color: #fff !important; background-color: var(--auth-navy-dark) !important; }

.auth-sheet .btn.btn-lg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--auth-field-h); border-radius: var(--auth-radius); font-size: 15px; }
/* Metronic's .btn:not(...) chain sets border:0 (box-shadow is even !important none), hence the !important border */
.btn.btn-auth-secondary { background-color: #fff; color: var(--auth-ink); font-weight: 500; border: 1px solid var(--auth-line) !important; }
.btn.btn-auth-secondary:hover, .btn.btn-auth-secondary:active { background-color: var(--auth-surface); color: var(--auth-ink); }
.btn.btn-auth-secondary i { font-size: 18px; color: var(--auth-ink); padding: 0; }
.btn.btn-auth-secondary svg { flex: none; }
/* the passkey buttons keep icon and text apart while their label is wrapped for the loading state */
.btn.btn-auth-secondary:not([data-kt-indicator="on"]) > .indicator-label { display: inline-flex; align-items: center; gap: 8px; }
.auth-form .btn + .btn-auth-secondary { margin-top: var(--auth-gap-tight); }

.auth-divider { display: flex; align-items: center; gap: 14px; margin: var(--auth-gap-field) 0; color: var(--auth-muted); font-size: var(--auth-fs-small); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--auth-line); }
.auth-actions { display: grid; gap: var(--auth-gap-tight); }
.auth-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--auth-gap-tight); }
.auth-form .auth-actions .btn { margin: 0; }

/* scope list, numbered steps */
.auth-note ul { margin: 8px 0 0; padding-left: 18px; }
.auth-section-title { font-size: 16px; font-weight: 700; color: var(--auth-ink); margin: 0 0 var(--auth-gap-tight); padding-top: var(--auth-gap-field); border-top: 1px solid var(--auth-line); }
.auth-steps { list-style: none; padding: 0; margin: 0 0 var(--auth-gap-block); display: grid; gap: var(--auth-gap-tight); }
.auth-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--auth-muted); }
.auth-step-num { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--auth-line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--auth-ink); }

/* OTP resend / countdown block */
.otp-button-container { text-align: center; margin-top: var(--auth-gap-field); font-size: 14px; line-height: 1.8; }
/* forgot-password renders it with every child empty until an OTP is sent; drop the blank lines */
.otp-button-container:not(:has(a:not(:empty), span:not(:empty))) { display: none; }
/* secondary route out of a form (e.g. "Lupa email?") below a rule */
.auth-alt-link { text-align: center; margin-top: var(--auth-gap-field); padding-top: var(--auth-gap-field); border-top: 1px solid var(--auth-line); }

/* keyboard focus (Metronic sets .btn { outline: 0 !important }) */
.auth-body a:focus-visible, .auth-body .btn:focus-visible { outline: 3px solid var(--auth-focus-ring) !important; outline-offset: 2px; }

/* ---------- password meter & rules ---------- */

.auth-meter { display: flex; gap: 6px; margin: var(--auth-gap-tight) 0 var(--auth-gap-label); }
.auth-meter > div { flex: 1; height: 4px; border-radius: 2px; background: var(--auth-line); }
.auth-meter > div.active { background: var(--auth-meter-on); }
.password-requirements { font-size: var(--auth-fs-small); margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.password-requirements li { display: flex; gap: 6px; align-items: center; }
.password-requirements li.text-danger { color: var(--auth-muted) !important; }
.password-requirements li.text-danger i { color: #B8BFCC; }
.password-requirements li.text-success { color: var(--auth-success) !important; }

/* ---------- avatar ---------- */

.auth-avatar { display: flex; align-items: center; gap: 18px; }
.auth-avatar-img { flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--auth-surface) center / cover no-repeat; box-shadow: 0 0 0 1px var(--auth-line); }
.auth-avatar .form-label { display: block; margin-bottom: 2px; }
.auth-avatar-actions { display: flex; gap: 16px; }
.auth-avatar-actions .auth-text-btn { padding: 6px 0 0; font-size: 14px; }
/* the file input is hidden: its label shows the keyboard focus */
.auth-avatar:has(#input_crop:focus-visible) label[for="input_crop"] { outline: 3px solid var(--auth-focus-ring); outline-offset: 2px; }

/* the shared crop dialog (partials/photo-dialog), as in the console */
.pi-crop { border: 0; border-radius: 14px; }
.pi-crop .modal-body { padding: 24px; }
.pi-crop .acct-card-title { margin: 0 0 6px; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--auth-ink); }
.pi-crop .acct-card-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--auth-muted); }
.pi-crop .btn.btn-primary { color: #fff; background-color: var(--auth-navy); font-weight: 600; }
.pi-crop .btn.btn-primary:hover, .pi-crop .btn.btn-primary:active { color: #fff; background-color: var(--auth-navy-dark); }
.pi-crop-area { max-width: 360px; max-height: 360px; margin: 20px auto 0; }
.pi-crop-area img { display: block; max-width: 100%; }
.pi-crop-area .cropper-view-box, .pi-crop-area .cropper-face { border-radius: 50%; }

/* ---------- reCAPTCHA (Google iframe: only size/position can be set) ---------- */

.auth-captcha { display: flex; justify-content: center; }
/* the 304px widget fits the sheet down to 352px (304 + 2 x 24 padding); shrink it only below that */
@media (max-width: 351.98px) {
    .g-recaptcha { transform: scale(.88); transform-origin: center top; }
}

@media (max-width: 575.98px) {
    .password-requirements { grid-template-columns: 1fr; }
}

/* Account chooser (D703) */
.auth-accounts { display: grid; gap: var(--auth-gap-tight); margin-bottom: var(--auth-gap-field); }
/* one card per account (and one for "use another account"): initials, name, email, chevron */
.auth-account { position: relative; display: flex; align-items: stretch; border: 1px solid var(--auth-line); border-radius: var(--auth-radius); background: #fff; overflow: hidden; }
.auth-account:hover, .auth-account:focus-within { background: var(--auth-surface); }
.auth-account > form { display: flex; }
.auth-account-form { flex: 1; min-width: 0; }
.auth-account-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 0; background: transparent; color: var(--auth-ink); text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.auth-account-main:hover { color: var(--auth-ink); }
.auth-account-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--auth-surface); }
.auth-account-initial { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--auth-navy); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.auth-account-initial i { font-size: 22px; color: var(--auth-muted); }
.auth-account-add .auth-account-initial { background: var(--auth-surface); }
.auth-account.is-blocked .auth-account-avatar { opacity: .5; filter: grayscale(1); }
.auth-account-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.auth-account-name, .auth-account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-account-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.auth-account-email, .auth-account-note { font-size: var(--auth-fs-small); color: var(--auth-muted); }
.auth-account-chevron { flex: none; font-size: 14px; color: var(--auth-muted); }
/* "Kelola akun": the chevron of each card becomes a remove-from-device button */
.auth-account-remove { display: none; flex: none; align-self: center; margin-right: 12px; padding: 6px 12px; border: 1px solid var(--auth-line); border-radius: var(--auth-radius); background: #fff; color: var(--auth-ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.auth-account-remove:hover { background: var(--auth-surface); }
.auth-accounts.is-managing .auth-account-remove { display: inline-flex; }
/* a clicked card: spinner in place of the chevron, nothing clickable until the next page loads */
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-account.is-loading { pointer-events: none; }
.auth-account.is-loading .auth-account-main { opacity: .6; position: relative; }
.auth-account.is-loading .auth-account-chevron { visibility: hidden; }
.auth-accounts:not(.is-managing) .auth-account.is-loading .auth-account-main::after { content: ''; position: absolute; right: 13px; top: 50%; margin-top: -8px; width: 16px; height: 16px; border: 2px solid var(--auth-line); border-top-color: var(--auth-navy); border-radius: 50%; animation: auth-spin .7s linear infinite; }
.auth-accounts.is-managing .auth-account.is-loading .auth-account-remove { opacity: .6; display: inline-flex; align-items: center; gap: 8px; }
.auth-accounts.is-managing .auth-account.is-loading .auth-account-remove::before { content: ''; flex: none; width: 14px; height: 14px; border: 2px solid var(--auth-line); border-top-color: var(--auth-navy); border-radius: 50%; animation: auth-spin .7s linear infinite; }
.auth-accounts.is-managing .auth-account-chevron, .auth-accounts.is-managing .auth-account-add { display: none; }
.auth-accounts.is-managing .auth-account-main { pointer-events: none; }
.auth-manage { display: block; margin: calc(var(--auth-gap-field) * -0.5) auto var(--auth-gap-field); padding: 4px 8px; border: 0; background: none; color: var(--auth-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.auth-manage:hover { color: var(--auth-ink); }
.auth-account.is-blocked { background: var(--auth-surface); }
.auth-account.is-blocked .auth-account-main { cursor: not-allowed; }
.auth-account.is-blocked .auth-account-name, .auth-account.is-blocked .auth-account-email { color: var(--auth-muted); }
.auth-account.is-blocked .auth-account-note { font-weight: 500; }

/* ---------- Google-style steps: passkey invite, 2-Step Verification, consent (D849) ---------- */

/* whose sign-in this step is; a link or button when it switches account */
.auth-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: var(--auth-gap-tight); padding: 3px 12px 3px 3px; border: 1px solid var(--auth-line); border-radius: 999px; background: #fff; color: var(--auth-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; }
a.auth-chip:hover, button.auth-chip:hover { background: var(--auth-surface); color: var(--auth-ink); }
.auth-chip-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-chip .bi-chevron-down { font-size: 12px; color: var(--auth-muted); }
.auth-body .auth-chip:focus-visible { outline: 3px solid var(--auth-focus-ring); outline-offset: 2px; }

/* a quiet text action on the left, the main button on the right */
.auth-actions-split { display: flex; align-items: center; justify-content: space-between; gap: var(--auth-gap-tight); margin-top: var(--auth-gap-field); }
.auth-actions-split form { margin: 0; }
.auth-actions-split .btn.btn-lg { min-width: 140px; white-space: nowrap; }
.auth-text-btn { display: inline-block; padding: 10px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--auth-navy); cursor: pointer; text-decoration: none; }
.auth-text-btn:hover { color: var(--auth-navy-dark); text-decoration: underline; }
.auth-body .auth-text-btn:focus-visible { outline: 3px solid var(--auth-focus-ring); outline-offset: 2px; }

/* passkey invite: a phone with a key badge */
.auth-illus { position: relative; display: grid; place-items: center; height: 148px; margin-bottom: var(--auth-gap-field); border-radius: var(--auth-radius); background: var(--auth-surface); }
.auth-illus-device { width: 66px; height: 104px; border: 3px solid var(--auth-navy); border-radius: 14px; background: #fff; display: grid; place-items: center; }
.auth-illus-device i { font-size: 38px; color: var(--auth-navy); }
.auth-illus-badge { position: absolute; left: calc(50% + 16px); bottom: 26px; width: 38px; height: 38px; border-radius: 50%; background: #448E5F; color: #fff; display: grid; place-items: center; font-size: 18px; box-shadow: 0 0 0 4px var(--auth-surface); }
.auth-illus-badge i { color: inherit; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--auth-muted); }
.auth-points li { display: flex; gap: 10px; align-items: flex-start; }
.auth-points i { flex: none; margin-top: 2px; font-size: 16px; color: var(--auth-success); }
.auth-done { text-align: center; padding: var(--auth-gap-block) 0; }
.auth-done > i { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--auth-gap-field); border-radius: 50%; background: #E7F3EC; color: var(--auth-success); font-size: 32px; }
.auth-done .auth-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--auth-gap-field); }

/* 2-Step Verification: what to do for this method, and the list of other methods */
.auth-method { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--auth-gap-field); font-size: 15px; line-height: 1.55; color: var(--auth-muted); }
.auth-method > i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--auth-surface); color: var(--auth-navy); display: grid; place-items: center; font-size: 20px; }
.auth-method strong { color: var(--auth-ink); font-weight: 600; white-space: nowrap; }
.auth-check .form-check-input:checked { background-color: var(--auth-navy); border-color: var(--auth-navy); }
.auth-resend { margin: calc(var(--auth-gap-field) * -0.5) 0 var(--auth-gap-field); font-size: 14px; color: var(--auth-muted); }
.auth-resend .auth-text-btn { padding: 0; font-size: 14px; }
.auth-choices { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--auth-line); }
.auth-choice { display: flex; align-items: center; gap: 16px; padding: 16px 8px; border-bottom: 1px solid var(--auth-line); color: var(--auth-ink); text-decoration: none; }
.auth-choice:hover { background: var(--auth-surface); color: var(--auth-ink); }
.auth-choice > i:first-child { flex: none; width: 24px; text-align: center; font-size: 22px; color: var(--auth-navy); }
.auth-choice-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.auth-choice-text small { font-size: var(--auth-fs-small); font-weight: 400; color: var(--auth-muted); }
.auth-choice .bi-chevron-right { flex: none; font-size: 14px; color: var(--auth-muted); }

/* consent: which app, what it may do, and the trust note */
.auth-app-logo { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--auth-gap-tight); border: 1px solid var(--auth-line); border-radius: 12px; background: var(--auth-surface); object-fit: contain; font-size: 22px; font-weight: 700; color: var(--auth-navy); }
.auth-perm-lead { margin: 0 0 var(--auth-gap-tight); font-size: 15px; color: var(--auth-ink); }
.auth-perms { list-style: none; margin: 0 0 var(--auth-gap-field); padding: 0; display: grid; gap: 12px; }
.auth-perms li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--auth-ink); }
.auth-perms i { flex: none; width: 22px; margin-top: 1px; text-align: center; font-size: 18px; color: var(--auth-navy); }
.auth-trust { margin-bottom: var(--auth-gap-field); padding-top: var(--auth-gap-field); border-top: 1px solid var(--auth-line); font-size: 14px; line-height: 1.6; color: var(--auth-muted); }
.auth-trust h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--auth-ink); }
.auth-trust p { margin: 0; }
.auth-trust strong { color: var(--auth-ink); white-space: nowrap; }

@media (max-width: 991.98px) {
    .auth-perms li, .auth-trust, .auth-method, .auth-perm-lead { text-align: left; }
}

/* ---------- the other auth screens in the same style (D853-D855) ---------- */

/* a chip for an email typed in an earlier step (no avatar yet) */
.auth-chip > .bi-person-circle { font-size: 22px; line-height: 1; color: var(--auth-muted); }
/* register pending: a letter with a check badge */
.auth-illus-mail { width: 104px; height: 76px; border: 3px solid var(--auth-navy); border-radius: 12px; background: #fff; display: grid; place-items: center; }
.auth-illus-mail i { font-size: 36px; color: var(--auth-navy); }
.auth-illus-badge-mail { left: calc(50% + 30px); bottom: 24px; }
/* code steps: the cooldown counts down where "Kirim ulang" was */
.otp-wait { font-weight: 600; color: var(--auth-ink); }
.otp-resend:disabled { opacity: .5; cursor: default; text-decoration: none; }
.auth-actions-split:has(> .auth-text-btn:only-child) { justify-content: flex-start; }