@import '_content/MyKhata360.Shared.UI/MyKhata360.Shared.UI.v9kr18p1m3.bundle.scp.css';

/* /Components/Layout/AppShell.razor.rz.scp.css */
/* AppShell — DESIGN_RULES.md §1.3 + §7
   Every value is a var(--mk-*) from wwwroot/css/design-tokens.css.
   The only literals are the @media widths: CSS custom properties are not
   allowed in media queries, so --mk-bp-md/lg/xl are mirrored
   here by hand. Keep them in sync with the token file.
   Large-tier base (full sidebar), then narrowed downward. */

.shell[b-eft8v9eo97] {
    display: grid;
    grid-template-columns: var(--mk-sidebar) 1fr;
    min-height: 100vh;
    font-family: var(--mk-font);
    color: var(--mk-text);
    background: var(--mk-bg-app);
}

.shell:focus[b-eft8v9eo97] {
    /* Root only carries tabindex to catch Escape — it should never show a ring. */
    outline: none;
}

/* ---------- Sidebar ---------- */

.side[b-eft8v9eo97] {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--mk-bg-nav);
    color: var(--mk-text-ondark);
}

.side__brand[b-eft8v9eo97] {
    display: flex;
    align-items: center;
    padding: var(--mk-s4);
    border-bottom: 1px solid var(--mk-border-ondark);
}

.side__nav[b-eft8v9eo97] {
    flex: 1;
    padding: var(--mk-s4) 0 var(--mk-s2);
}

.side__footer[b-eft8v9eo97] {
    margin: auto var(--mk-s3) var(--mk-s4);
}

/* ---------- Default brand mark ---------- */

.brand[b-eft8v9eo97] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-md);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
    color: var(--mk-text-ondark);
    text-decoration: none;
}

.brand__mark[b-eft8v9eo97] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--mk-r-sm);
    background: var(--mk-red);
    color: var(--mk-text-oncolor);
    font-weight: var(--mk-fw-bold);
    /* Inset dark edge = the cloth spine of a bahi khata. */
    box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18);
}

.brand__360[b-eft8v9eo97] {
    color: var(--mk-primary);
}

/* ---------- Top bar ---------- */

.top[b-eft8v9eo97] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--mk-s4);
    height: var(--mk-topbar);
    padding: 0 var(--mk-s5);
    background: var(--mk-bg-surface);
    border-bottom: 1px solid var(--mk-border);
}

.top__start[b-eft8v9eo97] {
    flex: 1;
    min-width: 0;
    max-width: 420px;
}

.top__end[b-eft8v9eo97] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-left: auto;
}

.burger[b-eft8v9eo97] {
    display: none;
    place-items: center;
    width: var(--mk-icon-btn);
    height: var(--mk-icon-btn);
    padding: 0;
    border: 0;
    border-radius: var(--mk-r-sm);
    background: transparent;
    color: var(--mk-text-2);
    cursor: pointer;
}

.burger:hover[b-eft8v9eo97] {
    background: var(--mk-bg-app);
}

/* Three bars drawn from the current color so there is no icon-font dependency. */
.burger__bars[b-eft8v9eo97],
.burger__bars[b-eft8v9eo97]::before,
.burger__bars[b-eft8v9eo97]::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: var(--mk-r-pill);
    background: currentColor;
}

.burger__bars[b-eft8v9eo97] {
    position: relative;
}

.burger__bars[b-eft8v9eo97]::before,
.burger__bars[b-eft8v9eo97]::after {
    content: "";
    position: absolute;
    left: 0;
}

.burger__bars[b-eft8v9eo97]::before { top: -6px; }
.burger__bars[b-eft8v9eo97]::after  { top: 6px; }

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

.main[b-eft8v9eo97] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.body[b-eft8v9eo97] {
    display: flex;
    flex: 1;
    min-width: 0;
}

.content[b-eft8v9eo97] {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: var(--mk-content-maxw);
    padding: var(--mk-s5);
}

.rail[b-eft8v9eo97] {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: var(--mk-s2);
    width: var(--mk-icon-rail);
    padding: var(--mk-s4) 0;
    background: var(--mk-bg-surface);
    border-left: 1px solid var(--mk-border);
}

.scrim[b-eft8v9eo97] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--mk-bg-scrim);
}

/* ==========================================================================
   Medium (600–1024px): sidebar collapses to an icon-only rail (§7).
   Slot content is styled through ::deep because nav items are supplied by
   the consumer and so never carry this component's scope attribute.
   ========================================================================== */
@media (max-width: 1024.98px) {

    .shell[b-eft8v9eo97] {
        grid-template-columns: var(--mk-sidebar-sm);
    }

    .side__brand[b-eft8v9eo97] {
        justify-content: center;
        padding-inline: 0;
    }

    .brand__text[b-eft8v9eo97],
    .side[b-eft8v9eo97]  .nav-item__label,
    .side[b-eft8v9eo97]  .nav-group__label,
    .side__footer[b-eft8v9eo97] {
        display: none;
    }

    .side[b-eft8v9eo97]  .nav-item {
        justify-content: center;
        padding-inline: 0;
        border-left-color: transparent;
    }
}

/* ==========================================================================
   Small (below 600px): off-canvas drawer, labels return inside it (§7).
   ========================================================================== */
@media (max-width: 599.98px) {

    .shell[b-eft8v9eo97] {
        grid-template-columns: 1fr;
    }

    .side[b-eft8v9eo97] {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: var(--mk-sidebar);
        transform: translateX(-100%);
        transition: transform var(--mk-t);
        box-shadow: var(--mk-sh-lg);
    }

    .side.is-open[b-eft8v9eo97] {
        transform: translateX(0);
    }

    .side__brand[b-eft8v9eo97] {
        justify-content: flex-start;
        padding-inline: var(--mk-s4);
    }

    .brand__text[b-eft8v9eo97],
    .side[b-eft8v9eo97]  .nav-item__label,
    .side[b-eft8v9eo97]  .nav-group__label,
    .side__footer[b-eft8v9eo97] {
        display: revert;
    }

    .side[b-eft8v9eo97]  .nav-item {
        justify-content: flex-start;
        padding-inline: var(--mk-s3);
    }

    .burger[b-eft8v9eo97] {
        display: grid;
    }

    .top[b-eft8v9eo97] {
        padding: 0 var(--mk-s4);
    }

    /* §1.3: search collapses on mobile rather than squeezing the action row. */
    .top__start[b-eft8v9eo97] {
        display: none;
    }

    .content[b-eft8v9eo97] {
        padding: var(--mk-s4);
    }

    .rail[b-eft8v9eo97] {
        display: none;
    }
}

/* ==========================================================================
   XL (1441px and up): centre the content, widen the gutters (§7).
   ========================================================================== */
@media (min-width: 1441px) {

    .content[b-eft8v9eo97] {
        margin: 0 auto;
        padding: var(--mk-s6) var(--mk-s8);
    }
}

@media (prefers-reduced-motion: reduce) {

    .side[b-eft8v9eo97] {
        transition: none;
    }
}
/* /Components/Layout/AppShellNavGroup.razor.rz.scp.css */
/* AppShellNavGroup — DESIGN_RULES.md §2. Tokens only. */

.nav-group[b-a22bhhl25m] {
    padding: 0 var(--mk-s3) var(--mk-s4);
}

.nav-group__label[b-a22bhhl25m] {
    padding: 0 var(--mk-s3) var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--mk-ls-label);
    color: var(--mk-text-ondark-2);
}

.nav-group__list[b-a22bhhl25m] {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* /Components/Layout/AppShellNavItem.razor.rz.scp.css */
/* AppShellNavItem — DESIGN_RULES.md §2. Tokens only. */

.nav-item[b-kz79meksr0] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    width: 100%;
    /* 9px block padding + a 20px line box clears the 44px touch floor (§0). */
    padding: 9px var(--mk-s3);
    margin-bottom: 2px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--mk-r-sm);
    background: transparent;
    font-family: inherit;
    font-size: var(--mk-fs-sm);
    text-align: left;
    color: var(--mk-text-ondark);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--mk-t-fast);
}

.nav-item:hover[b-kz79meksr0] {
    background: var(--mk-bg-nav-hover);
    text-decoration: none;
}

/* NavLink stamps `active` on the matching route. */
.nav-item.active[b-kz79meksr0] {
    background: var(--mk-bg-nav-active);
    border-left-color: var(--mk-marigold);
    font-weight: var(--mk-fw-semibold);
}

.nav-item__icon[b-kz79meksr0] {
    flex: none;
    width: 18px;
    text-align: center;
    opacity: .9;
}

.nav-item__label[b-kz79meksr0] {
    flex: 1;
    min-width: 0;
}

/* Chevron drawn as a rotated border corner — no icon font needed. */
.nav-item__chevron[b-kz79meksr0] {
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .7;
    transform: rotate(-45deg);
    transition: transform var(--mk-t-fast);
}

.nav-item__chevron.is-open[b-kz79meksr0] {
    transform: rotate(45deg);
}

.nav-item__children[b-kz79meksr0] {
    list-style: none;
    margin: 0;
    /* §2: children indent by one --mk-space-4 step. */
    padding: 0 0 0 var(--mk-s4);
}

/* Icon-only rail (Medium tier): the chevron would collide with the centred icon. */
@media (min-width: 600px) and (max-width: 1024.98px) {

    .nav-item__chevron[b-kz79meksr0] {
        display: none;
    }

    .nav-item__children[b-kz79meksr0] {
        padding-left: 0;
    }
}
/* /Components/Layout/AuthShell.razor.rz.scp.css */
/* AuthShell — DESIGN_RULES.md §1.2 + §7. Tokens only.
   @media widths are literal because custom properties cannot be used there;
   they mirror --mk-bp-md / --mk-bp-lg. */

.auth[b-x2uh9mecc2] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--mk-font);
    color: var(--mk-text);
    background: var(--mk-bg-app);
    /* §1.2: a subtle geometric wash behind the card, never a busy image.
       Two flat diagonal wedges — ledger red and brand orange — at very low
       alpha. Written as rgba() literals because color-mix() on a custom
       property is not safe across the browsers this app targets; the channels
       are --mk-red and --mk-orange. */
    background-image:
        linear-gradient(135deg, rgba(157, 34, 38, .045) 0 40%, transparent 40%),
        linear-gradient(315deg, rgba(249, 115, 22, .05) 0 32%, transparent 32%);
}

.auth__main[b-x2uh9mecc2] {
    display: grid;
    flex: 1;
    place-items: center;
    padding: var(--mk-s5) var(--mk-s4);
}

.auth__card[b-x2uh9mecc2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: var(--mk-auth-card-maxw);
    overflow: hidden;
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-lg);
    box-shadow: var(--mk-sh-lg);
}

.auth__card--solo[b-x2uh9mecc2] {
    grid-template-columns: 1fr;
    max-width: var(--mk-auth-card-maxw-solo);
}

.auth__pane[b-x2uh9mecc2] {
    padding: var(--mk-s8) var(--mk-s6);
}

.auth__content[b-x2uh9mecc2] {
    margin-top: var(--mk-s6);
}

.auth__aside[b-x2uh9mecc2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--mk-s8) var(--mk-s6);
    text-align: center;
    background: var(--mk-bg-warm);
    border-left: 1px solid var(--mk-cream-deep);
    /* Signature: faint horizontal rules, echoing a bahi-khata page. */
    background-image: repeating-linear-gradient(
        to bottom, transparent 0 31px, rgba(157, 34, 38, .09) 31px 32px);
}

.auth__foot[b-x2uh9mecc2] {
    padding: var(--mk-s5) var(--mk-s4);
    text-align: center;
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.auth__foot a[b-x2uh9mecc2] {
    color: var(--mk-text-link);
    text-decoration: none;
}

.auth__foot a:hover[b-x2uh9mecc2] {
    text-decoration: underline;
}

/* ---------- Default brand mark ---------- */

.brand[b-x2uh9mecc2] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-md);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
    color: var(--mk-text);
    text-decoration: none;
}

.brand__mark[b-x2uh9mecc2] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--mk-r-sm);
    background: var(--mk-red);
    color: var(--mk-text-oncolor);
    font-weight: var(--mk-fw-bold);
    box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18);
}

.brand__360[b-x2uh9mecc2] {
    color: var(--mk-primary);
}

/* ==========================================================================
   Medium and below — the benefit panel is the first thing to go (§1.2).
   ========================================================================== */
@media (max-width: 1024.98px) {

    .auth__card[b-x2uh9mecc2] {
        grid-template-columns: 1fr;
        max-width: var(--mk-auth-card-maxw-solo);
    }

    .auth__aside[b-x2uh9mecc2] {
        display: none;
    }
}

/* ==========================================================================
   Small — full-screen card, no float, no shadow (§1.2).
   ========================================================================== */
@media (max-width: 599.98px) {

    .auth__main[b-x2uh9mecc2] {
        align-items: stretch;
        padding: 0;
    }

    .auth__card[b-x2uh9mecc2] {
        align-content: center;
        min-height: 100vh;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    .auth__pane[b-x2uh9mecc2] {
        padding: var(--mk-s6) var(--mk-s4);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Shell metrics — all derived from the --mk-* base ────────────────── */
:root[b-bu3nlo49j2] {
    --sidebar-w:   var(--mk-sidebar);
    --topbar-h:    var(--mk-topbar);
    --bottomnav-h: var(--mk-bottomnav);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.16s;
    --t-med:  0.26s;
    --color-brand:   var(--mk-primary);
    --color-surface: var(--mk-bg-surface);
    --color-bg:      var(--mk-bg-app);
    --color-border:  var(--mk-border);
    --color-muted:   var(--mk-text-2);
    --shadow-topbar:  0 1px 3px rgba(0,0,0,.08);
    --shadow-sidebar: 6px 0 28px rgba(0,0,0,.18);
}

/* ── Shell ──────────────────────────────────────────────────────────── */
.page[b-bu3nlo49j2] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--color-bg);
}

/* ── Sidebar — mobile/tablet: fixed overlay drawer ───────────────────── */
.sidebar[b-bu3nlo49j2] {
    /* Leave one collapsed-rail width of the page peeking, so the drawer never
       covers the whole viewport on a narrow phone. */
    width: min(var(--sidebar-w), calc(100vw - var(--mk-sidebar-sm)));
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    background: linear-gradient(180deg, #1a2234, #151b29);
    transform: translateX(-100%);
    transition: transform var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar.open[b-bu3nlo49j2] {
    transform: translateX(0);
    box-shadow: var(--shadow-sidebar);
}

/* ── Sidebar backdrop ───────────────────────────────────────────────── */
.sidebar-backdrop[b-bu3nlo49j2] {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(15, 23, 42, 0.48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease);
}

.sidebar-backdrop.open[b-bu3nlo49j2] {
    opacity: 1;
    pointer-events: all;
}

/* ── Main area ──────────────────────────────────────────────────────── */
main[b-bu3nlo49j2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--bottomnav-h);
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.top-row[b-bu3nlo49j2] {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px;
}

/* ── Hamburger ──────────────────────────────────────────────────────── */
.hamburger[b-bu3nlo49j2] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 9px;
    transition: background var(--t-fast) var(--ease);
}

.hamburger:hover[b-bu3nlo49j2] { background: #f1f5f9; }

.hamburger span[b-bu3nlo49j2] {
    display: block;
    width: 17px;
    height: 2px;
    background: #475569;
    border-radius: 2px;
    transition: transform var(--t-fast) var(--ease),
                opacity   var(--t-fast) var(--ease);
}

/* ── Article ────────────────────────────────────────────────────────── */
article.content[b-bu3nlo49j2] {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── Bottom navigation (mobile only) ───────────────────────────────── */
.bottom-nav[b-bu3nlo49j2] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    height: var(--bottomnav-h);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: stretch;
    box-shadow: 0 -2px 16px rgba(0,0,0,.07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav[b-bu3nlo49j2]  .bottom-nav-item,
.bottom-nav .bottom-nav-item[b-bu3nlo49j2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: color var(--t-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav[b-bu3nlo49j2]  .bottom-nav-item:hover,
.bottom-nav .bottom-nav-item:hover[b-bu3nlo49j2] {
    color: #64748b;
}

.bottom-nav[b-bu3nlo49j2]  .bottom-nav-item.active,
.bottom-nav .bottom-nav-item.active[b-bu3nlo49j2] {
    color: var(--color-brand);
}

.bottom-nav[b-bu3nlo49j2]  .bottom-nav-item.active::before,
.bottom-nav .bottom-nav-item.active[b-bu3nlo49j2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--color-brand);
    border-radius: 0 0 4px 4px;
}

.bn-icon[b-bu3nlo49j2] {
    font-size: 20px;
    line-height: 1;
}

/* ── Notification bell ──────────────────────────────────────────────── */
.notif-bell[b-bu3nlo49j2] { position: relative; display: inline-flex; align-items: center; }
.notif-badge[b-bu3nlo49j2] {
    position: absolute; top: -4px; right: -6px;
    background: #ef4444; color: white; border-radius: 10px;
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; pointer-events: none; line-height: 1;
}
.notif-bell-btn[b-bu3nlo49j2] {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    color: #64748b; font-size: 20px; line-height: 1;
    border-radius: 8px; transition: background .15s;
}
.notif-bell-btn:hover[b-bu3nlo49j2] { background: #f1f5f9; }

/* ── Avatar button & dropdown ───────────────────────────────────────── */
.avatar-btn[b-bu3nlo49j2] {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    font-size: 13px; font-weight: 800; color: white; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--mk-primary), var(--mk-primary-ink));
    transition: opacity .15s;
}
.avatar-btn:hover[b-bu3nlo49j2] { opacity: .85; }
/* Replaces the package theme toggle; sized to sit alongside the avatar button. */
.topbar-theme-btn[b-bu3nlo49j2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #475569;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.topbar-theme-btn:hover[b-bu3nlo49j2] {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.avatar-menu[b-bu3nlo49j2] {
    /* position/top/right are set inline (fixed, root-level) — see MainLayout.razor
       comment for why: top-row's z-index:100 stacking context would otherwise trap
       an absolutely-positioned menu nested inside it below the close-on-outside-click
       backdrop, regardless of this class's own z-index. */
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-lg);
    width: 244px;
    box-shadow: var(--mk-sh-lg);
    border: 1px solid var(--mk-border);
    z-index: 500;
    overflow: hidden;
    /* The menu now carries the user- and tenant-level entries that used to be
       in the left rail, so on a short viewport it has to scroll rather than
       run off the bottom of the screen. */
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--mk-topbar) - var(--mk-s5));
}

.avatar-menu .menu-scroll[b-bu3nlo49j2] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--mk-s1) 0;
}

.avatar-menu a[b-bu3nlo49j2], .avatar-menu button[b-bu3nlo49j2] {
    display: flex; align-items: center; gap: var(--mk-s3);
    width: 100%; padding: var(--mk-s2) var(--mk-s4);
    background: none; border: none;
    font-size: var(--mk-fs-sm); font-weight: var(--mk-fw-medium);
    color: var(--mk-text); text-decoration: none;
    cursor: pointer; text-align: left; transition: background .1s;
}
.avatar-menu a:hover[b-bu3nlo49j2], .avatar-menu button:hover[b-bu3nlo49j2] { background: var(--mk-bg-subtle); }
.avatar-menu a i[b-bu3nlo49j2] { width: 16px; text-align: center; color: var(--mk-text-2); flex-shrink: 0; }
.avatar-menu a:hover i[b-bu3nlo49j2] { color: var(--mk-primary); }

/* Identity header — not scrollable, stays pinned above the list. */
.avatar-menu .menu-head[b-bu3nlo49j2] {
    padding: var(--mk-s3) var(--mk-s4) var(--mk-s2);
    border-bottom: 1px solid var(--mk-border);
    flex-shrink: 0;
}
.avatar-menu .menu-head-name[b-bu3nlo49j2] {
    font-size: var(--mk-fs-sm); font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar-menu .menu-head-sub[b-bu3nlo49j2] {
    font-size: var(--mk-fs-2xs); color: var(--mk-text-muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Group heading — same treatment as the sidebar's section labels so the two
   navigation surfaces read as one system. */
.avatar-menu .menu-group[b-bu3nlo49j2] {
    padding: var(--mk-s3) var(--mk-s4) var(--mk-s1);
    font-size: var(--mk-fs-2xs); font-weight: var(--mk-fw-semibold);
    text-transform: uppercase; letter-spacing: var(--mk-ls-label);
    color: var(--mk-text-muted);
}

.avatar-menu .menu-badge[b-bu3nlo49j2] {
    margin-left: auto;
    background: var(--mk-danger); color: var(--mk-text-oncolor);
    font-size: var(--mk-fs-2xs); font-weight: var(--mk-fw-bold);
    padding: 1px 6px; border-radius: var(--mk-r-pill); line-height: 1.5;
}

.avatar-menu .menu-divider[b-bu3nlo49j2] { height: 1px; background: var(--mk-border); margin: 0; }
.avatar-menu .menu-signout[b-bu3nlo49j2] {
    color: var(--mk-danger); flex-shrink: 0;
    font-weight: var(--mk-fw-semibold);
}
.avatar-menu .menu-signout i[b-bu3nlo49j2] { color: var(--mk-danger); }
.avatar-menu .menu-signout:hover[b-bu3nlo49j2] { background: var(--mk-danger-lt); }
.avatar-menu .menu-signout:hover i[b-bu3nlo49j2] { color: var(--mk-danger); }

/* ── Blazor error UI ────────────────────────────────────────────────── */
#blazor-error-ui[b-bu3nlo49j2] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0; left: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    box-sizing: border-box;
    display: none;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-bu3nlo49j2] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Tablet (640 px +): no bottom nav, overlay drawer still ─────────── */
/* Canonical tier edge — Medium starts at --mk-bp-md (600px). Was 640px,
   which put 600–639px in a dead zone where --rd-* had already switched to
   tablet sizing but this file was still in mobile layout. */
@media (min-width: 600px) {
    .bottom-nav[b-bu3nlo49j2] { display: none; }
    main[b-bu3nlo49j2] { padding-bottom: 0; }
    .top-row[b-bu3nlo49j2] { padding: 0 20px; }
}

/* ── Desktop sidebar toggle button (hidden on mobile) ─────────────── */
.desktop-sidebar-toggle[b-bu3nlo49j2] {
    display: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 11px;
    color: #475569;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    flex-shrink: 0;
}
.desktop-sidebar-toggle:hover[b-bu3nlo49j2] { background: #f1f5f9; color: #1e293b; }

/* ── Desktop (1024 px +): persistent sidebar, true full-screen ──────── */
/* Canonical tier edge — Large starts at --mk-bp-lg (1025px). */
@media (min-width: 1025px) {
    .page[b-bu3nlo49j2] {
        flex-direction: row;
        height: 100dvh;
        overflow: hidden;
    }

    /* Floating rounded rail (reference design): inset from the viewport edges with a
       soft shadow, rather than a flush full-bleed column. */
    .sidebar[b-bu3nlo49j2] {
        position: sticky;
        top: 10px;
        height: calc(100dvh - 20px);
        margin: 10px 0 10px 10px;
        border-radius: 18px;
        flex-shrink: 0;
        transform: translateX(0);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
        transition: width var(--t-med) var(--ease),
                    transform var(--t-med) var(--ease),
                    box-shadow var(--t-med) var(--ease);
        overflow: hidden;
    }

    .sidebar.desktop-collapsed[b-bu3nlo49j2] { width: var(--mk-sidebar-sm); }

    /* Collapsed rail relies on each link's native title= tooltip — a CSS ::after pill
       can't escape .nav-scrollable, which must keep overflow-y:auto (the browser then
       forces overflow-x to auto too, clipping any tooltip). */

    /* Icon-only collapsed mode */
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nl          { display: none; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nl-group    { display: none; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  hr.nl-group  { display: none; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-link    { justify-content: center; padding: var(--mk-s2) 0; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .ni          { margin-right: 0; font-size: var(--mk-fs-lg); width: auto; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .ni-badge    { display: flex; position: absolute; top: 2px; right: 4px; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-link    { position: relative; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer  { padding: var(--mk-s3) 0; align-items: center; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer-id { justify-content: center; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer-avatar { width: 30px; height: 30px; font-size: 11px; }

    /* Labels are hidden at this width, so stack the three account actions vertically —
       side by side they overflow the 56px rail and sign-out gets clipped. */
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .top-row     { padding-left: 0; justify-content: center; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .navbar-brand { justify-content: center; }

    .sidebar-backdrop[b-bu3nlo49j2] { display: none; }

    .hamburger[b-bu3nlo49j2] { display: none; }

    .desktop-sidebar-toggle[b-bu3nlo49j2] { display: flex; }

    main[b-bu3nlo49j2] {
        height: 100dvh;
        overflow: hidden;
        padding-left: 0;
    }

    .top-row[b-bu3nlo49j2] {
        padding-left: 1.25rem;
        padding-right: 1.5rem;
        flex-shrink: 0;
    }

    article.content[b-bu3nlo49j2] {
        flex: 1;
        height: 0; /* let flex calc the remaining height */
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
    }
}

/* ── Responsive top-bar ─────────────────────────────────────────────── */
.hdr-filter[b-bu3nlo49j2] { display: flex; }

.hdr-welcome[b-bu3nlo49j2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    min-width: 0;
    overflow: hidden;
}

.hdr-welcome-text[b-bu3nlo49j2] {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-welcome-date[b-bu3nlo49j2] {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

.hdr-search-wrap[b-bu3nlo49j2] {
    width: 240px;
}

@media (max-width: 1199px) {
    .hdr-search-wrap[b-bu3nlo49j2] { width: 180px; }
}

@media (max-width: 1024.98px) {
    .hdr-filter[b-bu3nlo49j2] { display: none; }
    .hdr-search-wrap[b-bu3nlo49j2] { width: 160px; }
    .hdr-welcome-date[b-bu3nlo49j2] { display: none; }
}

@media (max-width: 767px) {
    .hdr-search-wrap[b-bu3nlo49j2] { width: 130px; }
    .hdr-welcome[b-bu3nlo49j2] { display: none; }
}

@media (max-width: 599.98px) {
    .hdr-search-wrap[b-bu3nlo49j2] { display: none; }
    .hdr-add-label[b-bu3nlo49j2]   { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   PERSONAL FINANCE — light chrome

   The business shell paints the rail ink navy and the top bar plain white.
   The PF design system wants no dark chrome anywhere: a light rail, and a
   top bar that is glass rather than opaque so scroll position stays legible
   through it. Glassmorphism is deliberately confined to this one element —
   the design system reserves it for sticky navigation only, and using it on
   cards turns a depth cue into decoration.
   ══════════════════════════════════════════════════════════════════════ */

.pf-theme.page[b-bu3nlo49j2] {
    background: var(--mk-bg-app);
}

.pf-theme .sidebar[b-bu3nlo49j2] {
    background: var(--mk-bg-surface);
    border-right: 1px solid var(--mk-border);
}

.pf-theme .top-row[b-bu3nlo49j2] {
    background: var(--mk-pf-glass);
    -webkit-backdrop-filter: blur(var(--mk-pf-glass-blur));
    backdrop-filter: blur(var(--mk-pf-glass-blur));
    border-bottom: 1px solid var(--mk-border);
    box-shadow: none;
}

.pf-theme .hamburger span[b-bu3nlo49j2] {
    background: var(--mk-pf-ink);
}

.pf-theme .desktop-sidebar-toggle[b-bu3nlo49j2] {
    color: var(--mk-pf-ink);
}

.pf-theme .hamburger:hover[b-bu3nlo49j2] {
    background: var(--mk-bg-subtle);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-ysxirfw8d2] {
    min-height: var(--mk-topbar);
    background-color: rgba(0, 0, 0, 0.25);
}

.navbar-brand[b-ysxirfw8d2] {
    font-size: var(--mk-fs-md);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
    display: flex;
    align-items: center;
    gap: 0;
    color: white !important;
    text-decoration: none;
}

/* ── Icon element ─────────────────────────────────────── */
.ni[b-ysxirfw8d2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mk-fs-md);
    width: 22px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.95);
    margin-right: var(--mk-s3);
    transition: color 0.15s;
    -webkit-text-stroke: 0.4px currentColor;
}

/* ── Label element ────────────────────────────────────── */
.nl[b-ysxirfw8d2] {
    transition: opacity 0.15s;
}

/* ── Notification badge (icon-mode version) ──────────── */
.ni-badge[b-ysxirfw8d2] {
    display: none;
    margin-left: auto;
    background: var(--mk-danger);
    color: var(--mk-text-oncolor);
    font-size: var(--mk-fs-2xs);
    font-weight: var(--mk-fw-bold);
    padding: 2px 5px;
    border-radius: var(--mk-r-pill);
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
    flex-shrink: 0;
}

/* One gap on the column replaces the old per-item padding-bottom plus
   :first-of-type / :last-of-type padding, so every row — and every section
   label between them — sits on the same rhythm. */
.nav-scrollable .nav[b-ysxirfw8d2] {
    gap: 2px;
    padding-block: var(--mk-s2);
}

.nav-item[b-ysxirfw8d2] {
    font-size: var(--mk-fs-sm);
}

    .nav-item[b-ysxirfw8d2]  .nav-link {
        color: rgba(255, 255, 255, 0.82);
        background: none;
        border: none;
        border-radius: var(--mk-r-md);
        /* Touch floor on the drawer; the persistent desktop rail tightens to
           --mk-ctrl-h further down, where the pointer is a mouse. */
        min-height: 44px;
        height: auto;
        display: flex;
        align-items: center;
        line-height: 1.4;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: var(--mk-s2);
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }

/* Active row reads as a solid brand pill (see the reference sidebar design) rather
   than the old translucent tint + inset left bar. */
.nav-item[b-ysxirfw8d2]  a.active {
    background: linear-gradient(135deg, var(--mk-primary), var(--mk-orange-dark));
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.30);
    color: var(--mk-text-oncolor);
    font-weight: var(--mk-fw-semibold);
}

.nav-item[b-ysxirfw8d2]  a.active .ni {
    color: white;
}

.nav-item[b-ysxirfw8d2]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.09);
    color: white;
}

/* Hover must not repaint the active pill. */
.nav-item[b-ysxirfw8d2]  a.active:hover {
    background: linear-gradient(135deg, #ea6c0d, var(--mk-primary));
    color: #ffffff;
}

.nav-item[b-ysxirfw8d2]  .nav-link:hover .ni {
    color: white;
}

/* ── Always scrollable ───────────────────────────────── */
.nav-scrollable[b-ysxirfw8d2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

    .nav-scrollable[b-ysxirfw8d2]::-webkit-scrollbar {
        width: 4px;
    }

    .nav-scrollable[b-ysxirfw8d2]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollable[b-ysxirfw8d2]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }

.nav-notif-badge[b-ysxirfw8d2] {
    margin-left: auto;
    background: var(--mk-danger);
    color: var(--mk-text-oncolor);
    font-size: var(--mk-fs-2xs);
    font-weight: var(--mk-fw-bold);
    padding: 2px 6px;
    border-radius: var(--mk-r-pill);
    min-width: 18px;
    text-align: center;
    line-height: 1.5;
    flex-shrink: 0;
}

.nav-section-label[b-ysxirfw8d2] {
    font-size: var(--mk-fs-2xs);
    font-weight: var(--mk-fw-semibold);
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: var(--mk-ls-label);
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    /* Air above each group heading — without it the label reads as just
       another nav row and the sections stop being visually separate. */
    margin-top: var(--mk-s4);
}

/* No leading gap when a group heading is the first thing in the list. */
.nav-scrollable .nav > .nav-section-label:first-child[b-ysxirfw8d2] {
    margin-top: 0;
}

.nav-section-label[b-ysxirfw8d2]::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mk-primary);
    flex-shrink: 0;
}

.nav-section-toggle[b-ysxirfw8d2] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--mk-r-sm);
}

.nav-section-toggle:hover[b-ysxirfw8d2] {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

/* ── User footer ─────────────────────────────────────── */
.nav-footer[b-ysxirfw8d2] {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: var(--mk-s3);
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    flex-shrink: 0;
}

/* Avatar + name/role sit on their own row; account actions go underneath. */
.nav-footer-id[b-ysxirfw8d2] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    min-width: 0;
}

.nav-footer-avatar[b-ysxirfw8d2] {
    width: var(--mk-avatar);
    height: var(--mk-avatar);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mk-primary), var(--mk-orange-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-bold);
    color: white;
    flex-shrink: 0;
}

.nav-footer-info[b-ysxirfw8d2] {
    flex: 1;
    min-width: 0;
}

.nav-footer-name[b-ysxirfw8d2] {
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-semibold);
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-footer-role[b-ysxirfw8d2] {
    font-size: var(--mk-fs-2xs);
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Large tier (1025px+): persistent rail, pointer is a mouse ─────────
   The 44px row height in the base is the touch-target floor for the mobile
   drawer. On the desktop rail it only costs vertical space — with 40+ rows
   that is a lot of extra scrolling — so rows tighten to the dense control
   height. Literal width mirrors --mk-bp-lg; custom properties are illegal
   inside @media. */
@media (min-width: 1025px) {

    .nav-item[b-ysxirfw8d2]  .nav-link {
        min-height: var(--mk-ctrl-h);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   PERSONAL FINANCE — light rail

   Everything above paints white-on-dark, because the business shell's rail
   is ink navy. The PF design system has no dark chrome at all: navigation is
   a light surface and the only dark region on any screen is the hero CARD.
   So the rail inverts here rather than the whole file being rewritten —
   the business verticals must keep the dark rail untouched.

   `.pf-theme` sits on `.page` in MainLayout, an ancestor of `.sidebar`, so
   each selector below outranks its base counterpart by one class and needs
   no !important.
   ══════════════════════════════════════════════════════════════════════ */

.pf-theme .top-row[b-ysxirfw8d2] {
    background-color: transparent;
}

.pf-theme .navbar-brand[b-ysxirfw8d2] {
    color: var(--mk-pf-ink) !important;
}

.pf-theme .ni[b-ysxirfw8d2] {
    color: var(--mk-text-2);
}

.pf-theme .nav-item[b-ysxirfw8d2]  .nav-link {
    color: var(--mk-text);
}

/* The active row keeps the solid brand pill — it is the one place orange is
   allowed in the chrome, and it is what makes "you are here" scannable. */
.pf-theme .nav-item[b-ysxirfw8d2]  a.active {
    background: var(--mk-primary);
    box-shadow: 0 4px 12px rgba(253, 118, 26, 0.30);
    color: var(--mk-text-oncolor);
}

.pf-theme .nav-item[b-ysxirfw8d2]  a.active .ni,
.pf-theme .nav-item[b-ysxirfw8d2]  a.active:hover .ni {
    color: var(--mk-text-oncolor);
}

.pf-theme .nav-item[b-ysxirfw8d2]  .nav-link:hover {
    background-color: var(--mk-bg-subtle);
    color: var(--mk-pf-ink);
}

.pf-theme .nav-item[b-ysxirfw8d2]  .nav-link:hover .ni {
    color: var(--mk-pf-ink);
}

.pf-theme .nav-item[b-ysxirfw8d2]  a.active:hover {
    background: var(--mk-primary-hover);
    color: var(--mk-text-oncolor);
}

.pf-theme .nav-scrollable[b-ysxirfw8d2]::-webkit-scrollbar-thumb {
    background: var(--mk-border-solid);
}

.pf-theme .nav-section-label[b-ysxirfw8d2] {
    color: var(--mk-text-muted);
}

.pf-theme .nav-section-toggle:hover[b-ysxirfw8d2] {
    background-color: var(--mk-bg-subtle);
    color: var(--mk-pf-ink);
}

.pf-theme .nav-footer[b-ysxirfw8d2] {
    border-top: 1px solid var(--mk-border);
}

.pf-theme .nav-footer-avatar[b-ysxirfw8d2] {
    background: var(--mk-bg-container-2);
    color: var(--mk-pf-ink);
}

.pf-theme .nav-footer-name[b-ysxirfw8d2] {
    color: var(--mk-pf-ink);
}

.pf-theme .nav-footer-role[b-ysxirfw8d2] {
    color: var(--mk-text-muted);
}
/* /Components/Layout/OnboardingShell.razor.rz.scp.css */
/* OnboardingShell — DESIGN_RULES.md §1.1 + §7. Tokens only.
   @media widths are literal (custom properties are illegal in media queries);
   they mirror --mk-bp-md / --mk-bp-lg. */

.split[b-5navv5ivrt] {
    display: grid;
    /* §1.1: ~45/55 in favour of the form. */
    grid-template-columns: 45fr 55fr;
    min-height: 100vh;
    font-family: var(--mk-font);
    color: var(--mk-text);
}

.split__promo[b-5navv5ivrt] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--mk-s8) var(--mk-s6);
    background: var(--mk-bg-warm);
    /* Signature: faint horizontal rules, echoing a bahi-khata page. */
    background-image: repeating-linear-gradient(
        to bottom, transparent 0 31px, rgba(157, 34, 38, .09) 31px 32px);
}

.split__form[b-5navv5ivrt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--mk-s8) var(--mk-s6);
    background: var(--mk-bg-surface);
}

.split__inner[b-5navv5ivrt] {
    width: 100%;
    max-width: var(--mk-form-maxw);
    margin: 0 auto;
}

.split__content[b-5navv5ivrt] {
    margin-top: var(--mk-s5);
}

/* ---------- Carousel dots (§1.1, bottom-left of the promo panel) ---------- */

.dots[b-5navv5ivrt] {
    display: flex;
    gap: var(--mk-s2);
    margin-top: var(--mk-s6);
}

.dots__dot[b-5navv5ivrt] {
    width: 8px;
    height: 8px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-border-strong);
    transition: width var(--mk-t-fast), background var(--mk-t-fast);
}

.dots__dot.is-active[b-5navv5ivrt] {
    width: 20px;
    background: var(--mk-red);
}

/* ---------- Default brand mark ---------- */

.brand[b-5navv5ivrt] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-md);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
    color: var(--mk-text);
    text-decoration: none;
}

.brand__mark[b-5navv5ivrt] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--mk-r-sm);
    background: var(--mk-red);
    color: var(--mk-text-oncolor);
    font-weight: var(--mk-fw-bold);
    box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18);
}

.brand__360[b-5navv5ivrt] {
    color: var(--mk-primary);
}

/* ==========================================================================
   Medium (600–1024px): promo becomes a short strip above the form (§1.1).
   ========================================================================== */
@media (max-width: 1024.98px) {

    .split[b-5navv5ivrt] {
        grid-template-columns: 1fr;
    }

    .split__promo[b-5navv5ivrt] {
        padding: var(--mk-s6) var(--mk-s5);
    }

    .split__form[b-5navv5ivrt] {
        padding: var(--mk-s6) var(--mk-s5);
    }
}

/* ==========================================================================
   Small (below 600px): promo hides entirely, the form owns the viewport.
   ========================================================================== */
@media (max-width: 599.98px) {

    .split__promo[b-5navv5ivrt] {
        display: none;
    }

    .split__form[b-5navv5ivrt] {
        padding: var(--mk-s6) var(--mk-s4);
    }
}

@media (prefers-reduced-motion: reduce) {

    .dots__dot[b-5navv5ivrt] {
        transition: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-03j87be701],
.components-reconnect-repeated-attempt-visible[b-03j87be701],
.components-reconnect-failed-visible[b-03j87be701],
.components-pause-visible[b-03j87be701],
.components-resume-failed-visible[b-03j87be701],
.components-rejoining-animation[b-03j87be701] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-03j87be701],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-03j87be701],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-03j87be701],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-03j87be701],
#components-reconnect-modal.components-reconnect-retrying[b-03j87be701],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-03j87be701],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-03j87be701],
#components-reconnect-modal.components-reconnect-failed[b-03j87be701],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-03j87be701] {
    display: block;
}


#components-reconnect-modal[b-03j87be701] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-03j87be701 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-03j87be701 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-03j87be701 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-03j87be701]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-03j87be701 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-03j87be701 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-03j87be701 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-03j87be701 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-03j87be701] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-03j87be701] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-03j87be701] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-03j87be701] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-03j87be701] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-03j87be701] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-03j87be701] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-03j87be701 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-03j87be701] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-03j87be701 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}