/* Shared customer webapp — mobile-first, minimal */
:root {
    --kf-app-gutter: 5px;
    --ca-green: #00a651;
    --ca-green-dark: #008f45;
    /* Primary CTAs — portal-chrome.css overrides from Admin App Look */
    --kf-cta-from: #f2d8c4;
    --kf-cta-mid: #e8c9ae;
    --kf-cta-to: #deb99a;
    --kf-cta-ink: #3f2d22;
    --kf-cta-shadow: rgba(170, 95, 55, 0.26);
    --kf-cta-shadow-strong: rgba(170, 95, 55, 0.36);
    --ca-ink: #0f172a;
    --ca-muted: #64748b;
    --ca-line: #e2e8f0;
    --ca-bg: #ffffff;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    /* Typography — overridden by portal-chrome.css (Admin → App Look) */
    --kf-app-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --kf-app-fs-heading: 1.0625rem;
    --kf-app-fs-body: 0.875rem;
    --kf-app-fs-small: 0.75rem;
    --kf-app-font-size: var(--kf-app-fs-body);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--kf-app-font-family);
    font-size: var(--kf-app-font-size);
    font-weight: 400;
    font-optical-sizing: auto;
    background: var(--ca-bg);
    color: var(--ca-ink);
    -webkit-tap-highlight-color: transparent;
}

.ca-wrap {
    min-height: 100dvh;
    padding: calc(16px + var(--safe-t)) 20px calc(20px + var(--safe-b));
    max-width: 440px;
    margin: 0 auto;
}

.ca-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ca-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--kf-radius-sm, 8px);
    border: 1px solid var(--ca-line);
    background: #fff;
    color: var(--ca-ink);
    text-decoration: none;
    font-size: var(--kf-app-fs-body);
    line-height: 1;
}

.ca-back:active { transform: scale(0.96); }

.ca-title {
    margin: 0;
    font-size: var(--kf-app-fs-heading);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ca-sub {
    margin: 8px 0 0;
    font-size: var(--kf-app-fs-body);
    color: var(--ca-muted);
    line-height: 1.45;
}

.ca-card {
    background: #fff;
    border-radius: 0;
    padding: 22px 20px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}

.ca-flash {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 0;
    font-size: var(--kf-app-fs-body);
    line-height: 1.4;
}

.ca-flash--err {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.ca-flash--ok {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.ca-label {
    display: block;
    font-size: var(--kf-app-fs-small);
    font-weight: 600;
    color: var(--ca-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ca-input {
    width: 100%;
    border: 1px solid var(--ca-line);
    border-radius: 0;
    padding: 14px 16px;
    font-size: var(--kf-app-fs-body);
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ca-input:focus {
    border-color: rgba(180, 120, 80, 0.45);
    box-shadow: 0 0 0 3px rgba(220, 170, 130, 0.2);
}

/**
 * Form / portal buttons — layout; green pill surface from `.kf-customer-cta-surface` (below).
 */
.ca-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 18px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ca-btn-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.ca-btn.ca-btn--inline,
.ca-btn-row .ca-btn:not(.ca-btn--ghost) {
    width: auto;
    min-width: min(100%, 14rem);
    max-width: 20rem;
    margin-top: 0;
}

.ca-btn--ghost {
    width: 100%;
    margin-top: 12px;
    font-weight: 600;
    justify-content: center;
}

.ca-muted-box {
    margin-top: 16px;
    padding: 14px;
    border-radius: 0;
    background: var(--ca-bg);
    font-size: var(--kf-app-fs-body);
    color: var(--ca-muted);
    line-height: 1.5;
}

.ca-prose h2 {
    font-size: var(--kf-app-fs-heading);
    margin: 1.25em 0 0.5em;
}

.ca-prose p {
    font-size: var(--kf-app-fs-body);
    line-height: 1.6;
    color: var(--ca-muted);
}

/* Paginated wallet / orders activity */
.kf-feed-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--kf-app-gutter);
    margin: var(--kf-app-gutter) 0;
}

.kf-feed-more {
    width: 100%;
    min-height: 48px;
    font-family: inherit;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* font-size / colors from unified CTA block at end of file */
}

.kf-feed-end {
    margin: 0;
    padding: 6px 4px;
    font-size: var(--kf-app-fs-small);
    font-weight: 600;
    text-align: center;
    color: var(--ca-muted);
    line-height: 1.4;
}

.kf-feed-end[hidden] {
    display: none !important;
}

.kf-activity-io-hint {
    margin: 0 0 8px;
    min-height: 1.3em;
    font-size: var(--kf-app-fs-small);
    font-weight: 600;
    text-align: center;
    color: var(--ca-muted);
    line-height: 1.35;
}

.kf-activity-io-hint[hidden] {
    display: none !important;
}

.kf-activity-sentinel {
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
    pointer-events: none;
    visibility: hidden;
}

/* =============================================================================
   Unified primary CTA — pixel match my-home "View Your Basket"
   (.mh-greet__harvest-cta). Loaded early; later sheets should not re-skin these.
   ============================================================================= */
:is(
        .sub-start-cta,
        .mh-greet__harvest-cta,
        .kf-customer-cta,
        a.kf-customer-cta:not(.kf-customer-cta--secondary),
        button.kf-customer-cta:not(.kf-customer-cta--secondary),
        .bh-bar__cta,
        .bh-inline-save.sub-start-cta,
        .ca-btn:not(.ca-btn--ghost),
        .coh-empty__btn,
        .cwa-empty__btn,
        .mb-basket-foot-actions a.mb-basket-foot-actions__primary,
        .cw-modal__btn.cw-modal__btn--primary,
        .kf-feed-more
    ) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px 18px;
    font-family: inherit;
    font-size: clamp(0.92rem, 3.2vw, 1.02rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-decoration: none;
    color: #fff;
    background: #15803d;
    border-radius: var(--kf-portal-cta-radius, 0);
    border: 1px solid rgba(21, 128, 61, 0.35);
    box-shadow:
        0 10px 26px rgba(22, 101, 52, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

:is(
        .mh-greet__harvest-cta,
        .sub-start-cta,
        .coh-empty__btn,
        .cwa-empty__btn,
        .mb-basket-foot-actions a.mb-basket-foot-actions__primary,
        .shop-pay-bar__actions--single .bh-bar__cta
    ) {
    width: 100%;
    max-width: var(--kf-portal-cta-max-w, 22rem);
    margin-left: auto;
    margin-right: auto;
}

.ca-btn:not(.ca-btn--ghost):not(.ca-btn--inline) {
    width: 100%;
}

.bh-bar__cta {
    flex-shrink: 0;
}

.cw-modal__btn.cw-modal__btn--primary {
    flex: 1 1 auto;
}

:is(
        .mh-greet__harvest-cta,
        a.kf-customer-cta:not(.kf-customer-cta--secondary),
        button.kf-customer-cta:not(.kf-customer-cta--secondary),
        .bh-bar__cta,
        .bh-inline-save,
        .ca-btn:not(.ca-btn--ghost),
        .coh-empty__btn,
        .cwa-empty__btn,
        .mb-basket-foot-actions a.mb-basket-foot-actions__primary,
        .cw-modal__btn.cw-modal__btn--primary,
        .kf-feed-more
    ):is(a):hover,
:is(
        .bh-bar__cta,
        .bh-inline-save,
        .ca-btn:not(.ca-btn--ghost),
        .cw-modal__btn.cw-modal__btn--primary,
        .kf-feed-more
    ):hover:not(:disabled) {
    filter: brightness(1.05);
}

:is(
        .mh-greet__harvest-cta,
        .kf-customer-cta,
        a.kf-customer-cta,
        button.kf-customer-cta,
        .bh-bar__cta,
        .bh-inline-save,
        .ca-btn:not(.ca-btn--ghost),
        .coh-empty__btn,
        .cwa-empty__btn,
        .mb-basket-foot-actions a.mb-basket-foot-actions__primary,
        .cw-modal__btn.cw-modal__btn--primary,
        .kf-feed-more
    ):focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

.bh-bar__cta:disabled,
.cw-modal__btn.cw-modal__btn--primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
}

.kf-feed-more:disabled {
    opacity: 0.65;
    cursor: wait;
    filter: none;
}

.bh-bar__cta:not(:disabled) {
    opacity: 1;
}

.kf-feed-more:active:not(:disabled),
.cw-modal__btn.cw-modal__btn--primary:active:not(:disabled),
.bh-bar__cta:not(:disabled):active,
.bh-inline-save:not(:disabled):active,
.ca-btn:not(.ca-btn--ghost):active {
    transform: scale(0.985);
}

/* Secondary / ghost — same shape family, neutral surface */
:is(
        .ca-btn--ghost,
        .kf-customer-cta--secondary,
        a.kf-customer-cta--secondary,
        button.kf-customer-cta--secondary,
        .mb-basket-foot-actions a.mb-basket-foot-actions__secondary,
        .cw-modal__btn.cw-modal__btn--ghost
    ) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px 18px;
    font-family: inherit;
    font-size: clamp(0.92rem, 3.2vw, 1.02rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-decoration: none;
    color: var(--ca-ink, #0f172a);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.85) inset;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mb-basket-foot-actions a.mb-basket-foot-actions__secondary {
    width: auto;
    min-width: min(100%, 14rem);
}

:is(
        a.kf-customer-cta--secondary,
        button.kf-customer-cta--secondary,
        .mb-basket-foot-actions a.mb-basket-foot-actions__secondary,
        .cw-modal__btn.cw-modal__btn--ghost
    ):hover,
.ca-btn--ghost:hover {
    filter: none;
    background: #f8fafc;
}

:is(.kf-customer-cta--secondary, a.kf-customer-cta--secondary, button.kf-customer-cta--secondary, .cw-modal__btn.cw-modal__btn--ghost, .ca-btn--ghost):focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

/* =============================================================================
   Shop + veggies-basket + subscription: regular weight on chrome (match /my-orders).
   Scoped by full-page mains — does not affect My Home embed (`#bh-module-main`).
   ============================================================================= */
body:is(
        :has(#cph-main[data-kf-nav='shop']),
        :has(#cph-main[data-kf-nav='veggies']),
        :has(#cph-main[data-kf-nav='subscription'])
    )
    .mh-basket-hub__title,
body:is(
        :has(#cph-main[data-kf-nav='shop']),
        :has(#cph-main[data-kf-nav='veggies']),
        :has(#cph-main[data-kf-nav='subscription'])
    )
    .mh-basket-hub__eyebrow,
body:is(
        :has(#cph-main[data-kf-nav='shop']),
        :has(#cph-main[data-kf-nav='veggies']),
        :has(#cph-main[data-kf-nav='subscription'])
    )
    .mh-basket-hub__placed-line,
body:is(
        :has(#cph-main[data-kf-nav='shop']),
        :has(#cph-main[data-kf-nav='veggies']),
        :has(#cph-main[data-kf-nav='subscription'])
    )
    .kph-hero__eyebrow,
body:is(
        :has(#cph-main[data-kf-nav='shop']),
        :has(#cph-main[data-kf-nav='veggies']),
        :has(#cph-main[data-kf-nav='subscription'])
    )
    .kph-hero__tag,
body:is(
        :has(#cph-main[data-kf-nav='shop']),
        :has(#cph-main[data-kf-nav='veggies']),
        :has(#cph-main[data-kf-nav='subscription'])
    )
    .kph-wallet__amt,
body:is(
        :has(#cph-main[data-kf-nav='shop']),
        :has(#cph-main[data-kf-nav='veggies']),
        :has(#cph-main[data-kf-nav='subscription'])
    )
    .kph-wallet-tip__text,
body:is(
        :has(#cph-main[data-kf-nav='shop']),
        :has(#cph-main[data-kf-nav='veggies']),
        :has(#cph-main[data-kf-nav='subscription'])
    )
    .kph-wallet-tip__link,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies']), :has(#cph-main[data-kf-nav='subscription'])) #cph-main .bh-trust-pill,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies']), :has(#cph-main[data-kf-nav='subscription'])) #cph-main .bh-seg__btn,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies']), :has(#cph-main[data-kf-nav='subscription'])) #cph-main .bh-seg__btn-title,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies']), :has(#cph-main[data-kf-nav='subscription'])) #cph-main .bh-seg__btn-kg,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies']), :has(#cph-main[data-kf-nav='subscription'])) #cph-main .bh-seg__btn-family,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-chip,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-chip strong,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-order-strip,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-customize-strip,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-flash,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-policy,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-toast__text,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-ok,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-ok.bh-ok--order-success,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-unit-strip__status,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-unit-strip__badge-num,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-card__name,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-card__qtytext,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-stepper__btn,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-stepper__qty,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-basket-stage__overlay-text,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-err,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-empty,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-bar__note,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-inline-save,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main .bh-bar__cta,
body:is(:has(#cph-main[data-kf-nav='shop']), :has(#cph-main[data-kf-nav='veggies'])) #cph-main strong {
    font-weight: 400;
}

/* Shop-only: hub delivery line, list surface, modal, sticky pay bar (higher specificity than customer-shop.css) */
body:has(#cph-main[data-kf-nav='shop']) #cph-main.shop-other-page .shop-hub-delivery__text,
body:has(#cph-main[data-kf-nav='shop']) #cph-main.shop-other-page .shop-hub-delivery__text strong,
body:has(#cph-main[data-kf-nav='shop']) #cph-main.shop-other-page .bh-flash,
body:has(#cph-main[data-kf-nav='shop']) #cph-main.shop-other-page .bh-order-strip.bh-order-strip--action,
body:has(#cph-main[data-kf-nav='shop']) #cph-main.shop-other-page .bh-err:not(:empty),
body:has(#cph-main[data-kf-nav='shop']) #cph-main.shop-other-page .bh-ok:not(:empty),
body:has(#cph-main[data-kf-nav='shop']) #cph-main.shop-other-page .bh-empty,
body:has(#cph-main[data-kf-nav='shop']) #cph-main.shop-other-page .bh-chip,
body:has(#cph-main[data-kf-nav='shop']) .shop-items-modal__title,
body:has(#cph-main[data-kf-nav='shop']) .shop-items-modal__close,
body:has(#cph-main[data-kf-nav='shop']) .shop-items-modal__sub,
body:has(#cph-main[data-kf-nav='shop']) .shop-items-modal__item-name,
body:has(#cph-main[data-kf-nav='shop']) .shop-items-modal__item-meta,
body:has(#cph-main[data-kf-nav='shop']) .shop-items-modal__empty,
body:has(#cph-main[data-kf-nav='shop']) .bh-shell .shop-pay-bar__status,
body:has(#cph-main[data-kf-nav='shop']) main.shop-other-page.shop-page-tiles .shop-page-heading,
body:has(#cph-main[data-kf-nav='shop']) main.shop-other-page.shop-page-tiles .shop-card-price,
body:has(#cph-main[data-kf-nav='shop']) .shop-page-hero__eyebrow,
body:has(#cph-main[data-kf-nav='shop']) .shop-page-hero__title,
body:has(#cph-main[data-kf-nav='shop']) .shop-page-hero__meta,
body:has(#cph-main[data-kf-nav='shop']) .shop-page-hero__meta--muted,
body:has(#cph-main[data-kf-nav='shop']) .shop-page-hero__meta-label,
body:has(#cph-main[data-kf-nav='shop']) .shop-page-hero__meta-value {
    font-weight: 400;
}

/* 4-digit customer login PIN */
.kf-pin-input,
input.kf-pin-input,
.cprof-input.kf-pin-input,
.ca-input.kf-pin-input {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.35em;
    text-align: center;
    font-size: 1.15rem;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.kf-pin-input::placeholder,
.cprof-input.kf-pin-input::placeholder,
.ca-input.kf-pin-input::placeholder {
    letter-spacing: normal;
    font-size: 1rem;
}

/* 4-box PIN entry (profile, login, signup) */
.kf-pin-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.kf-pin-field__label {
    margin: 0;
    font-family: var(--kf-app-font-family, inherit);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.kf-pin-field--login {
    margin: 0 auto;
    width: 100%;
    max-width: 17.5rem;
    padding: 14px 16px 16px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: #fff;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}

.kf-pin-field--login .kf-pin-field__label {
    text-align: center;
}

.cprof-form .kf-pin-field,
.kf-pin-field--profile {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.kf-pin-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.kf-pin-boxes__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.kf-pin-box {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    background: #fff;
    font-family: var(--kf-app-font-family, inherit);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 2.5rem;
    text-align: center;
    color: var(--bh-ink, #0f172a);
    font-variant-numeric: tabular-nums;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.kf-pin-box:focus {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow:
        0 0 0 3px rgba(52, 211, 153, 0.18),
        inset 0 1px 2px rgba(15, 23, 42, 0.03);
    background: #fff;
}

.kf-pin-box.filled {
    border-color: rgba(16, 185, 129, 0.45);
    background: #f0fdf4;
    box-shadow: none;
}

.cprof-field .kf-pin-boxes__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
}

.kf-pin-boxes--login .kf-pin-boxes__row,
.kf-pin-field--login .kf-pin-boxes__row {
    justify-content: center;
    gap: 12px;
}

.cprof-autofill-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}