/* ==========================================================================
   BizRestro — auth surfaces (login, signup wizard, password reset)

   Flat by design: no cards, no drop shadows, no glow. Structure comes from
   whitespace, a single hairline rule and one accent colour. Logical
   properties throughout so RTL needs no second stylesheet.
   ========================================================================== */

:root {
    /* Palette is taken straight from the marketing site
       (public/landing/assets/css/style.css) so the auth screens read as the
       same product: #7539FF accent, #592AC6 press state, #F7F7FF wash and the
       #EADDFF / #DBECFF lavender gradients from the hero. */
    --bz-accent: #7539ff;
    --bz-accent-ink: #592ac6;

    --bz-bg: #ffffff;
    --bz-bg-soft: #f7f7ff;
    --bz-line: #e7e3f5;
    --bz-line-firm: #cfc6ea;

    --bz-fg: #1b1533;
    --bz-fg-soft: #56506b;
    --bz-fg-mute: #8b85a1;

    --bz-danger: #d02a44;
    --bz-danger-wash: #fdf3f4;
    --bz-ok: #0f8a5f;
    --bz-ok-wash: #f0faf5;
    --bz-info: #2f62e0;
    --bz-info-wash: #f1f5fe;

    --bz-r: 8px;
    --bz-field-h: 2.875rem;
    --bz-ease: cubic-bezier(0.32, 0.72, 0.35, 1);
}

.dark {
    --bz-accent: #9a72ff;
    --bz-accent-ink: #b394ff;

    --bz-bg: #150a20;
    --bz-bg-soft: #1c0e2b;
    --bz-line: #2f1c46;
    --bz-line-firm: #432c60;

    --bz-fg: #f0eef6;
    --bz-fg-soft: #a9a3bb;
    --bz-fg-mute: #7b7590;

    --bz-danger: #ff8095;
    --bz-danger-wash: #24131a;
    --bz-ok: #4fc493;
    --bz-ok-wash: #0e2019;
    --bz-info: #8fadf5;
    --bz-info-wash: #131a2c;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.bz-auth {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--bz-bg);
    color: var(--bz-fg);
    -webkit-font-smoothing: antialiased;
}

/* Two equal halves from the large breakpoint up. The readable measure is
   held by .bz-pane, not by the column, so the split stays exactly 50/50. */
@media (min-width: 1024px) {
    .bz-auth {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------------------------
   Brand column — the landing hero, restated. Light lavender wash, purple
   accent, cards that echo the marketing site's .banner-wrap.
   -------------------------------------------------------------------------- */

.bz-brand {
    position: relative;
    display: none;
    flex-direction: column;
    padding: 3rem 3rem 2.5rem;
    background: linear-gradient(
        160deg,
        #f0e6ff 0%,
        #f7f7ff 42%,
        #f4f2ff 100%
    );
    color: var(--bz-fg);
    isolation: isolate;
}

/* Two soft lights lifted from the hero gradients (#EADDFF / #DBECFF) so the
   flat wash gets depth without an image request. */
.bz-brand__wash {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            42rem 28rem at 12% 6%,
            rgba(117, 57, 255, 0.16),
            transparent 62%
        ),
        radial-gradient(
            34rem 26rem at 92% 92%,
            rgba(219, 236, 255, 0.85),
            transparent 60%
        );
}

.dark .bz-brand {
    background: linear-gradient(
        160deg,
        #2a1147 0%,
        #1c0828 55%,
        #150a20 100%
    );
    color: #fff;
}

.dark .bz-brand__wash {
    background:
        radial-gradient(
            42rem 28rem at 12% 6%,
            rgba(154, 114, 255, 0.28),
            transparent 62%
        ),
        radial-gradient(
            34rem 26rem at 92% 92%,
            rgba(117, 57, 255, 0.18),
            transparent 60%
        );
}

@media (min-width: 1024px) {
    .bz-brand {
        display: flex;
    }
}

.bz-brand__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 2.5rem;
    inline-size: 100%;
}

.bz-brand--sticky .bz-brand__inner {
    position: sticky;
    inset-block-start: 3rem;
}

.bz-brand__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bz-fg);
    text-decoration: none;
}

.dark .bz-brand__logo {
    color: #fff;
}

.bz-brand__logo img {
    block-size: 1.9rem;
    inline-size: auto;
    object-fit: contain;
}

/* Pill badge — the landing page's .info-badge */
.bz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(117, 57, 255, 0.18);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 10px rgba(28, 8, 40, 0.04);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #7539ff;
}

.bz-eyebrow::before {
    content: "";
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: 50%;
    background: #7539ff;
}

.dark .bz-eyebrow {
    border-color: rgba(179, 148, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
    color: #c9b2ff;
}

.dark .bz-eyebrow::before {
    background: #c9b2ff;
}

.bz-brand__title {
    margin: 1rem 0 0;
    font-size: 2rem;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bz-fg);
    text-wrap: balance;
}

.dark .bz-brand__title {
    color: #fff;
}

.bz-brand__title em {
    font-style: normal;
    color: #7539ff;
}

.dark .bz-brand__title em {
    color: #c9b2ff;
}

.bz-brand__lede {
    margin: 0.85rem 0 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #5f5878;
}

.dark .bz-brand__lede {
    color: #b9b0cf;
}

.bz-feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

/* Each feature is a soft card, mirroring .banner-wrap on the landing page. */
.bz-feat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(117, 57, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    transition: transform 0.2s var(--bz-ease), border-color 0.2s var(--bz-ease),
        box-shadow 0.2s var(--bz-ease), background 0.2s var(--bz-ease);
}

.bz-feat:hover {
    transform: translateY(-1px);
    border-color: rgba(117, 57, 255, 0.28);
    background: #fff;
    box-shadow: 0 8px 20px rgba(117, 57, 255, 0.08);
}

.dark .bz-feat {
    border-color: rgba(179, 148, 255, 0.14);
    background: rgba(255, 255, 255, 0.045);
}

.dark .bz-feat:hover {
    border-color: rgba(179, 148, 255, 0.32);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.bz-feat__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 10px;
    background: linear-gradient(145deg, #7539ff, #9a6bff);
    box-shadow: 0 6px 14px rgba(117, 57, 255, 0.22);
    color: #fff;
}

.dark .bz-feat__icon {
    background: linear-gradient(145deg, #7539ff, #5a24d6);
    box-shadow: none;
}

.bz-feat__icon svg {
    inline-size: 1.15rem;
    block-size: 1.15rem;
}

.bz-feat__text {
    min-inline-size: 0;
}

.bz-feat__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bz-fg);
}

.dark .bz-feat__title {
    color: #fff;
}

.bz-feat__desc {
    display: block;
    margin-block-start: 0.15rem;
    font-size: 0.79rem;
    line-height: 1.5;
    color: #6a6484;
}

.dark .bz-feat__desc {
    color: #a49cbd;
}

.bz-stats {
    display: flex;
    gap: 2.25rem;
    margin-block-start: auto;
    padding-block-start: 1.75rem;
    border-block-start: 1px solid rgba(117, 57, 255, 0.14);
}

.dark .bz-stats {
    border-block-start-color: rgba(179, 148, 255, 0.16);
}

.bz-stat__value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bz-fg);
    font-variant-numeric: tabular-nums;
}

.dark .bz-stat__value {
    color: #fff;
}

.bz-stat__value sup {
    font-size: 0.7rem;
    color: #7539ff;
}

.dark .bz-stat__value sup {
    color: #c9b2ff;
}

.bz-stat__label {
    display: block;
    margin-block-start: 0.2rem;
    font-size: 0.72rem;
    color: #7a7392;
}

.dark .bz-stat__label {
    color: #9a92b3;
}

/* --------------------------------------------------------------------------
   Form column — the panel IS the surface; nothing floats on top of it
   -------------------------------------------------------------------------- */

.bz-panel {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    padding: 1.5rem 1.25rem 2rem;
}

@media (min-width: 640px) {
    .bz-panel {
        padding: 1.75rem 2.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .bz-panel {
        padding: 2rem 4rem;
    }
}

@media (min-width: 1440px) {
    .bz-panel {
        padding-inline: 6rem;
    }
}

.bz-panel__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 2rem;
}

/* Centred inside its half — vertically and horizontally. Text stays
   left-aligned; only the column itself is centred.
   `margin-block: auto` on the child rather than `justify-content: center`
   so that an overlong form scrolls from the top instead of being clipped. */
/* The 0.4rem gutter is not decoration: this box scrolls, and without it the
   2px focus ring on a field at the very edge gets clipped by the overflow. */
.bz-panel__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-block-size: 0;
    padding: 0.4rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.bz-panel__body > * {
    margin-block: auto;
}

.bz-minibrand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bz-fg);
    text-decoration: none;
}

.bz-minibrand img {
    block-size: 1.75rem;
    inline-size: auto;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .bz-minibrand {
        display: none;
    }
}

.bz-panel__tools {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: auto;
}

.bz-iconbtn {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-r);
    background: transparent;
    color: var(--bz-fg-soft);
    cursor: pointer;
    transition: border-color 0.15s var(--bz-ease), color 0.15s var(--bz-ease);
}

.bz-iconbtn:hover {
    border-color: var(--bz-line-firm);
    color: var(--bz-fg);
}

.bz-iconbtn svg {
    inline-size: 1rem;
    block-size: 1rem;
}

/* --------------------------------------------------------------------------
   Pane — the content measure inside the panel. No box, no border, no shadow.
   -------------------------------------------------------------------------- */

.bz-pane {
    inline-size: 100%;
    max-inline-size: 23rem;
}

.bz-pane--wide {
    max-inline-size: 34rem;
}

.bz-head {
    margin-block-end: 2rem;
}

.bz-head__kicker {
    display: block;
    margin-block-end: 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bz-fg-mute);
}

.bz-head__title {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--bz-fg);
}

.bz-head__sub {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--bz-fg-soft);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.bz-stack {
    display: grid;
    gap: 1.15rem;
}

.bz-grid2 {
    display: grid;
    gap: 1.15rem;
}

@media (min-width: 560px) {
    .bz-grid2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bz-grid2 > .bz-span2 {
        grid-column: 1 / -1;
    }
}

.bz-field {
    min-inline-size: 0;
}

.bz-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bz-fg-soft);
}

.bz-req {
    color: var(--bz-danger);
}

.bz-link {
    font-size: 0.78rem;
    color: var(--bz-accent);
    text-decoration: none;
}

.bz-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-inputwrap {
    position: relative;
    display: block;
}

.bz-inputwrap__icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.85rem;
    transform: translateY(-50%);
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--bz-fg-mute);
    pointer-events: none;
}

.bz-input {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: var(--bz-field-h);
    padding-inline: 0.85rem;
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-r);
    background: var(--bz-bg);
    color: var(--bz-fg);
    font: inherit;
    font-size: 0.9rem;
    appearance: none;
    transition: border-color 0.15s var(--bz-ease);
}

.bz-input::placeholder {
    color: var(--bz-fg-mute);
    opacity: 1;
}

.bz-input:hover:not(:disabled, :focus) {
    border-color: var(--bz-line-firm);
}

.bz-input:focus {
    border-color: var(--bz-accent);
    outline: 2px solid color-mix(in srgb, var(--bz-accent) 28%, transparent);
    outline-offset: 0;
}

.bz-input:disabled {
    background: var(--bz-bg-soft);
    color: var(--bz-fg-mute);
    cursor: not-allowed;
}

.bz-input--icon {
    padding-inline-start: 2.5rem;
}

.bz-input--action {
    padding-inline-end: 2.75rem;
}

.bz-input--error,
.bz-input--error:hover {
    border-color: var(--bz-danger);
}

textarea.bz-input {
    block-size: auto;
    min-block-size: 5.5rem;
    padding-block: 0.7rem;
    line-height: 1.6;
    resize: vertical;
}

select.bz-input {
    padding-inline-end: 2.25rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238b8699' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 1rem;
}

html[dir="rtl"] select.bz-input {
    background-position: left 0.8rem center;
}

.bz-infield {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.4rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--bz-fg-mute);
    cursor: pointer;
}

.bz-infield:hover {
    color: var(--bz-fg);
}

.bz-infield svg {
    inline-size: 1rem;
    block-size: 1rem;
}

.bz-hint {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: var(--bz-fg-mute);
}

.bz-error {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0.4rem 0 0;
    font-size: 0.775rem;
    line-height: 1.5;
    color: var(--bz-danger);
}

.bz-error svg {
    flex: 0 0 auto;
    inline-size: 0.85rem;
    block-size: 0.85rem;
    margin-block-start: 0.15rem;
}

/* password strength — four hairlines, nothing more */
.bz-meter {
    display: flex;
    gap: 0.25rem;
    margin-block-start: 0.5rem;
}

.bz-meter__bar {
    block-size: 2px;
    flex: 1;
    background: var(--bz-line);
    transition: background 0.2s var(--bz-ease);
}

.bz-meter__bar.is-on-1 {
    background: var(--bz-danger);
}

.bz-meter__bar.is-on-2 {
    background: #e08c26;
}

.bz-meter__bar.is-on-3 {
    background: var(--bz-info);
}

.bz-meter__bar.is-on-4 {
    background: var(--bz-ok);
}

/* --------------------------------------------------------------------------
   Phone group
   -------------------------------------------------------------------------- */

.bz-phone {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bz-phone__code {
    position: relative;
    flex: 0 0 6.5rem;
}

.bz-phone__num {
    flex: 1 1 9rem;
    min-inline-size: 0;
}

.bz-phone__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    inline-size: 100%;
    block-size: var(--bz-field-h);
    padding-inline: 0.85rem;
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-r);
    background: var(--bz-bg);
    color: var(--bz-fg);
    font-size: 0.9rem;
    cursor: pointer;
}

.bz-phone__trigger:hover {
    border-color: var(--bz-line-firm);
}

.bz-phone__trigger.is-locked {
    background: var(--bz-bg-soft);
    color: var(--bz-fg-mute);
    cursor: not-allowed;
}

.bz-phone__trigger svg {
    inline-size: 0.9rem;
    block-size: 0.9rem;
    color: var(--bz-fg-mute);
    flex-shrink: 0;
}

.bz-menu {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.3rem);
    max-block-size: 14rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    border: 1px solid var(--bz-line-firm);
    border-radius: var(--bz-r);
    background: var(--bz-bg);
}

.bz-menu__search {
    position: sticky;
    inset-block-start: -0.25rem;
    margin: -0.25rem -0.25rem 0.25rem;
    padding: 0.4rem;
    background: var(--bz-bg);
    border-block-end: 1px solid var(--bz-line);
}

.bz-menu__search .bz-input {
    block-size: 2.25rem;
    font-size: 0.8rem;
}

.bz-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.bz-menu__item:hover {
    background: var(--bz-bg-soft);
}

.bz-menu__item.is-active {
    color: var(--bz-accent);
    font-weight: 600;
}

.bz-menu__item svg {
    inline-size: 0.9rem;
    block-size: 0.9rem;
}

.bz-menu__empty {
    padding: 0.6rem;
    font-size: 0.8rem;
    color: var(--bz-fg-mute);
}

/* ------------------------------------------------------------------ */
/* Country-code picker — modal dialog (teleported to <body>)          */
/* ------------------------------------------------------------------ */
.bz-cc {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.bz-cc__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 6, 20, 0.55);
    backdrop-filter: blur(2px);
}

.bz-cc__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    inline-size: min(26rem, 100%);
    max-block-size: min(80vh, 34rem);
    overflow: hidden;
    border: 1px solid var(--bz-line-firm);
    border-radius: calc(var(--bz-r) + 4px);
    background: var(--bz-bg);
    box-shadow: 0 24px 60px -12px rgba(10, 6, 20, 0.5);
}

.bz-cc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-block-end: 1px solid var(--bz-line);
}

.bz-cc__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bz-fg);
}

.bz-cc__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--bz-fg-mute);
    cursor: pointer;
}

.bz-cc__close:hover {
    background: var(--bz-bg-soft);
    color: var(--bz-fg);
}

.bz-cc__close svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
}

.bz-cc__search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.85rem 1.15rem;
    border-block-end: 1px solid var(--bz-line);
}

.bz-cc__search svg {
    position: absolute;
    inset-inline-start: 1.7rem;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--bz-fg-mute);
    pointer-events: none;
}

.bz-cc__search .bz-input {
    padding-inline-start: 2.4rem;
}

html[dir="rtl"] .bz-cc__search .bz-input {
    padding-inline-start: 0.85rem;
    padding-inline-end: 2.4rem;
}

.bz-cc__list {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
}

.bz-cc__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--bz-fg);
    cursor: pointer;
}

.bz-cc__item:hover {
    background: var(--bz-bg-soft);
}

.bz-cc__item.is-active {
    background: var(--bz-bg-soft);
    color: var(--bz-accent);
    font-weight: 600;
}

.bz-cc__name {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-cc__code {
    flex: 0 0 auto;
    color: var(--bz-fg-mute);
    font-variant-numeric: tabular-nums;
}

.bz-cc__item.is-active .bz-cc__code {
    color: var(--bz-accent);
}

.bz-cc__tick {
    flex: 0 0 auto;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--bz-accent);
}

.bz-cc__empty {
    padding: 1.5rem 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--bz-fg-mute);
}

.bz-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    block-size: var(--bz-field-h);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bz-ok);
    white-space: nowrap;
}

.bz-verified svg {
    inline-size: 0.9rem;
    block-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.bz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    block-size: var(--bz-field-h);
    padding-inline: 1.25rem;
    border: 1px solid var(--bz-accent);
    border-radius: var(--bz-r);
    background: var(--bz-accent);
    color: #fff;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s var(--bz-ease),
        border-color 0.15s var(--bz-ease);
}

.bz-btn:hover:not(:disabled) {
    background: var(--bz-accent-ink);
    border-color: var(--bz-accent-ink);
}

.bz-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--bz-accent) 45%, transparent);
    outline-offset: 2px;
}

.bz-btn:disabled,
.bz-btn.is-busy {
    opacity: 0.55;
    cursor: not-allowed;
}

.dark .bz-btn {
    color: #14101f;
}

.bz-btn--block {
    inline-size: 100%;
}

.bz-btn--ghost {
    background: transparent;
    border-color: var(--bz-line-firm);
    color: var(--bz-fg);
}

.bz-btn--ghost:hover:not(:disabled) {
    background: var(--bz-bg-soft);
    border-color: var(--bz-line-firm);
}

.dark .bz-btn--ghost {
    color: var(--bz-fg);
}

.bz-btn--sm {
    block-size: 2.375rem;
    padding-inline: 0.9rem;
    font-size: 0.8rem;
}

.bz-btn svg {
    inline-size: 0.95rem;
    block-size: 0.95rem;
    flex-shrink: 0;
}

.bz-spin {
    animation: bz-spin 0.7s linear infinite;
}

@keyframes bz-spin {
    to {
        transform: rotate(360deg);
    }
}

.bz-actions {
    margin-block-start: 1.75rem;
}

/* --------------------------------------------------------------------------
   Checkboxes
   -------------------------------------------------------------------------- */

.bz-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--bz-fg-soft);
}

.bz-check input[type="checkbox"] {
    flex: 0 0 auto;
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0.16rem 0 0;
    border: 1px solid var(--bz-line-firm);
    border-radius: 4px;
    accent-color: var(--bz-accent);
    cursor: pointer;
}

.bz-check a {
    color: var(--bz-accent);
    text-decoration: none;
}

.bz-check a:hover {
    text-decoration: underline;
}

.bz-checks {
    display: grid;
    gap: 0.7rem;
    margin-block-start: 1.5rem;
}

/* --------------------------------------------------------------------------
   Alerts / notes
   -------------------------------------------------------------------------- */

.bz-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.75rem 0.9rem;
    margin-block-end: 1.5rem;
    border: 1px solid;
    border-radius: var(--bz-r);
    font-size: 0.82rem;
    line-height: 1.55;
}

.bz-alert svg {
    flex: 0 0 auto;
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: 0.1rem;
}

.bz-alert__title {
    display: block;
    font-weight: 600;
    margin-block-end: 0.1rem;
}

.bz-alert ul {
    margin: 0.2rem 0 0;
    padding-inline-start: 1rem;
}

.bz-alert--error {
    background: var(--bz-danger-wash);
    border-color: color-mix(in srgb, var(--bz-danger) 30%, transparent);
    color: var(--bz-danger);
}

.bz-alert--success {
    background: var(--bz-ok-wash);
    border-color: color-mix(in srgb, var(--bz-ok) 30%, transparent);
    color: var(--bz-ok);
}

.bz-alert--info {
    background: var(--bz-info-wash);
    border-color: color-mix(in srgb, var(--bz-info) 30%, transparent);
    color: var(--bz-info);
}

.bz-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-block-start: 1.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--bz-line);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--bz-fg-soft);
}

.bz-note svg {
    flex: 0 0 auto;
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: 0.15rem;
    color: var(--bz-accent);
}

.bz-note strong {
    display: block;
    font-weight: 600;
    color: var(--bz-fg);
}

/* --------------------------------------------------------------------------
   Divider / secondary link
   -------------------------------------------------------------------------- */

.bz-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block: 1.75rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bz-fg-mute);
}

.bz-divider::before,
.bz-divider::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--bz-line);
}

.bz-swap {
    font-size: 0.85rem;
    text-align: center;
    color: var(--bz-fg-soft);
}

.bz-swap a {
    color: var(--bz-accent);
    font-weight: 500;
    text-decoration: none;
}

.bz-swap a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Wizard
   -------------------------------------------------------------------------- */

/* Desktop: the shell is locked to the viewport so the PAGE never scrolls.
   If a form is ever taller than the space available it scrolls inside its
   own half, which keeps both columns pinned. */
@media (min-width: 1024px) {
    .bz-auth {
        block-size: 100vh;
        block-size: 100svh;
        overflow: hidden;
    }

    .bz-panel {
        overflow: hidden;
    }

    /* Five feature cards can outgrow a short laptop viewport — let the column
       scroll on its own instead of clipping the stats off the bottom. */
    .bz-brand {
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .bz-brand--sticky .bz-brand__inner {
        position: static;
    }
}

/* Short viewports: tighten the brand column so it still fits in one screen. */
@media (min-width: 1024px) and (max-height: 860px) {
    .bz-brand {
        padding: 2.25rem 2.5rem 2rem;
    }

    .bz-brand__inner {
        gap: 1.75rem;
    }

    .bz-brand__title {
        font-size: 1.7rem;
    }

    .bz-feat {
        padding: 0.55rem 0.75rem;
    }

    .bz-feat__icon {
        inline-size: 2rem;
        block-size: 2rem;
    }

    .bz-stats {
        padding-block-start: 1.25rem;
    }
}

.bz-wizard {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    inline-size: 100%;
}

.bz-wizard__form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-block-size: 0;
}

/* Same gutter as .bz-panel__body — pulled back with a negative margin so the
   fields still line up with the step rail and the footer buttons. */
.bz-wizard__body {
    flex: 1 1 auto;
    min-block-size: 0;
    padding: 0.4rem;
    margin: -0.4rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.bz-wizard__foot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-block-start: 1.75rem;
}

.bz-wizard__foot button[type="submit"] {
    flex: 1 1 auto;
}

.bz-wizard__swap {
    flex: 0 0 100%;
    margin-block-start: 1rem;
    font-size: 0.82rem;
    text-align: center;
    color: var(--bz-fg-soft);
}

.bz-wizard__swap a {
    color: var(--bz-accent);
    text-decoration: none;
}

.bz-wizard__swap a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* step rail — numbers on a hairline, no chrome */
.bz-steps {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-end: 2rem;
}

.bz-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
}

.bz-step__dot {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 1px solid var(--bz-line-firm);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bz-fg-mute);
    font-variant-numeric: tabular-nums;
}

.bz-step__dot svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
}

.bz-step__label {
    font-size: 0.78rem;
    color: var(--bz-fg-mute);
    white-space: nowrap;
}

.bz-step.is-current .bz-step__dot {
    border-color: var(--bz-accent);
    background: var(--bz-accent);
    color: #fff;
}

.dark .bz-step.is-current .bz-step__dot {
    color: #14101f;
}

.bz-step.is-current .bz-step__label {
    color: var(--bz-fg);
    font-weight: 500;
}

.bz-step.is-done .bz-step__dot {
    border-color: var(--bz-accent);
    color: var(--bz-accent);
}

.bz-step.is-done .bz-step__label {
    color: var(--bz-fg-soft);
}

.bz-step__dot--nav {
    cursor: pointer;
}

.bz-step__line {
    flex: 1 1 auto;
    min-inline-size: 0.75rem;
    block-size: 1px;
    background: var(--bz-line);
}

.bz-step__line.is-done {
    background: var(--bz-accent);
}

@media (max-width: 639px) {
    .bz-step__label {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   OTP
   -------------------------------------------------------------------------- */

.bz-otp {
    margin-block-start: 0.85rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--bz-line);
}

.bz-otp__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bz-fg);
}

.bz-otp__hint {
    margin: 0.25rem 0 0.7rem;
    font-size: 0.75rem;
    color: var(--bz-fg-mute);
}

.bz-otp__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.bz-otp__input {
    inline-size: 6.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
}

/* --------------------------------------------------------------------------
   Setup screen — one headline, one number, one rule. Nothing else.
   -------------------------------------------------------------------------- */

.bz-setup {
    inline-size: 100%;
    max-inline-size: 34rem;
}

.bz-setup__kicker {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bz-fg-mute);
}

.bz-setup__headline {
    margin: 1rem 0 0;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--bz-fg);
    text-wrap: balance;
    /* reserve two lines so the layout never jumps as the text changes */
    min-block-size: 2.3em;
}

.bz-setup__percent {
    margin: 2.5rem 0 0;
    font-size: 2.75rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--bz-fg);
    font-variant-numeric: tabular-nums;
}

.bz-setup__percent i {
    font-style: normal;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--bz-fg-mute);
    margin-inline-start: 0.15rem;
}

.bz-setup__note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bz-fg-mute);
}

.bz-setup__note svg {
    inline-size: 0.95rem;
    block-size: 0.95rem;
    flex-shrink: 0;
}

.bz-setup__track {
    margin-block-start: 1rem;
    block-size: 2px;
    background: var(--bz-line);
    overflow: hidden;
}

.bz-setup__fill {
    display: block;
    block-size: 100%;
    background: var(--bz-accent);
    transition: inline-size 0.4s var(--bz-ease);
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

[x-cloak] {
    display: none !important;
}

/* A class that sets `display` outranks the UA sheet's `[hidden]` rule, so
   anything flagged hidden here would otherwise still paint. */
[hidden] {
    display: none !important;
}

.bz-lang {
    display: inline-flex;
    align-items: center;
}

@media (prefers-reduced-motion: reduce) {
    .bz-spin {
        animation: none;
    }

    .bz-setup__fill,
    .bz-input,
    .bz-btn,
    .bz-meter__bar {
        transition: none;
    }
}