@import '_content/MyKhata360.Shared.UI/MyKhata360.Shared.UI.ppys0iu4hk.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-r3ba228xcn] {
    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-r3ba228xcn] {
    /* Root only carries tabindex to catch Escape — it should never show a ring. */
    outline: none;
}

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

.side[b-r3ba228xcn] {
    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-r3ba228xcn] {
    display: flex;
    align-items: center;
    padding: var(--mk-s4);
    border-bottom: 1px solid var(--mk-border-ondark);
}

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

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

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

.brand[b-r3ba228xcn] {
    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-r3ba228xcn] {
    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-r3ba228xcn] {
    color: var(--mk-primary);
}

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

.top[b-r3ba228xcn] {
    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-r3ba228xcn] {
    flex: 1;
    min-width: 0;
    max-width: 420px;
}

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

.burger[b-r3ba228xcn] {
    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-r3ba228xcn] {
    background: var(--mk-bg-app);
}

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

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

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

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

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

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

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

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

.rail[b-r3ba228xcn] {
    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-r3ba228xcn] {
    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-r3ba228xcn] {
        grid-template-columns: var(--mk-sidebar-sm);
    }

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

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

    .side[b-r3ba228xcn]  .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-r3ba228xcn] {
        grid-template-columns: 1fr;
    }

    .side[b-r3ba228xcn] {
        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-r3ba228xcn] {
        transform: translateX(0);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

.nav-group__label[b-sl5u9j6w9g] {
    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-sl5u9j6w9g] {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* /Components/Layout/AppShellNavItem.razor.rz.scp.css */
/* AppShellNavItem — DESIGN_RULES.md §2. Tokens only. */

.nav-item[b-hsvc0wg03w] {
    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-hsvc0wg03w] {
    background: var(--mk-bg-nav-hover);
    text-decoration: none;
}

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

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

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

/* Chevron drawn as a rotated border corner — no icon font needed. */
.nav-item__chevron[b-hsvc0wg03w] {
    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-hsvc0wg03w] {
    transform: rotate(45deg);
}

.nav-item__children[b-hsvc0wg03w] {
    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-hsvc0wg03w] {
        display: none;
    }

    .nav-item__children[b-hsvc0wg03w] {
        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-mpj9lka2dl] {
    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-mpj9lka2dl] {
    display: grid;
    flex: 1;
    place-items: center;
    padding: var(--mk-s5) var(--mk-s4);
}

.auth__card[b-mpj9lka2dl] {
    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-mpj9lka2dl] {
    grid-template-columns: 1fr;
    max-width: var(--mk-auth-card-maxw-solo);
}

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

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

.auth__aside[b-mpj9lka2dl] {
    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-mpj9lka2dl] {
    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-mpj9lka2dl] {
    color: var(--mk-text-link);
    text-decoration: none;
}

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

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

.brand[b-mpj9lka2dl] {
    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-mpj9lka2dl] {
    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-mpj9lka2dl] {
    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-mpj9lka2dl] {
        grid-template-columns: 1fr;
        max-width: var(--mk-auth-card-maxw-solo);
    }

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

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

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

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

    .auth__pane[b-mpj9lka2dl] {
        padding: var(--mk-s6) var(--mk-s4);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Shell metrics — all derived from the --mk-* base ────────────────── */
:root[b-2w8vnf1q37] {
    --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-2w8vnf1q37] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--color-bg);
}

/* ── Sidebar — mobile/tablet: fixed overlay drawer ───────────────────── */
.sidebar[b-2w8vnf1q37] {
    /* 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: var(--mk-z-drawer);
    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-2w8vnf1q37] {
    transform: translateX(0);
    box-shadow: var(--shadow-sidebar);
}

/* ── Sidebar backdrop ───────────────────────────────────────────────── */
.sidebar-backdrop[b-2w8vnf1q37] {
    position: fixed;
    inset: 0;
    z-index: var(--mk-z-drawer-backdrop);
    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-2w8vnf1q37] {
    opacity: 1;
    pointer-events: all;
}

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

/* ── Top bar ────────────────────────────────────────────────────────── */
.top-row[b-2w8vnf1q37] {
    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: var(--mk-z-topbar);
    box-shadow: var(--shadow-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px;
}

/* ── Hamburger ──────────────────────────────────────────────────────── */
.hamburger[b-2w8vnf1q37] {
    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-2w8vnf1q37] { background:var(--mk-bg-subtle); }

.hamburger span[b-2w8vnf1q37] {
    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-2w8vnf1q37] {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── Bottom navigation (mobile only) ───────────────────────────────── */
.bottom-nav[b-2w8vnf1q37] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--mk-z-bottomnav);
    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-2w8vnf1q37]  .bottom-nav-item,
.bottom-nav .bottom-nav-item[b-2w8vnf1q37] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color:var(--mk-text-muted);
    text-decoration: none;
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    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-2w8vnf1q37]  .bottom-nav-item:hover,
.bottom-nav .bottom-nav-item:hover[b-2w8vnf1q37] {
    color:var(--mk-text-2);
}

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

.bottom-nav[b-2w8vnf1q37]  .bottom-nav-item.active::before,
.bottom-nav .bottom-nav-item.active[b-2w8vnf1q37]::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-2w8vnf1q37] {
    font-size: var(--mk-t-section);
    line-height: 1;
}

/* ── Notification bell ──────────────────────────────────────────────── */
.notif-bell[b-2w8vnf1q37] { position: relative; display: inline-flex; align-items: center; }
.notif-badge[b-2w8vnf1q37] {
    position: absolute; top: -4px; right: -6px;
    background: #ef4444; color: white; border-radius: 10px;
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold); 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-2w8vnf1q37] {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    color:var(--mk-text-2); font-size: var(--mk-t-section); line-height: 1;
    border-radius: 8px; transition: background .15s;
}
.notif-bell-btn:hover[b-2w8vnf1q37] { background:var(--mk-bg-subtle); }

/* ── Avatar button & dropdown ───────────────────────────────────────── */
.avatar-btn[b-2w8vnf1q37] {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-extrabold); 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-2w8vnf1q37] { opacity: .85; }
/* Replaces the package theme toggle; sized to sit alongside the avatar button. */
.topbar-theme-btn[b-2w8vnf1q37] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color:var(--mk-text);
    font-size: var(--mk-t-card);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.topbar-theme-btn:hover[b-2w8vnf1q37] {
    background: rgba(15, 23, 42, 0.06);
    color:var(--mk-text-strong);
}

.avatar-menu[b-2w8vnf1q37] {
    /* 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: var(--mk-z-header-menu);
    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-2w8vnf1q37] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--mk-s1) 0;
}

.avatar-menu a[b-2w8vnf1q37], .avatar-menu button[b-2w8vnf1q37] {
    display: flex; align-items: center; gap: var(--mk-s3);
    width: 100%; padding: var(--mk-s2) var(--mk-s4);
    background: none; border: none;
    font-family: inherit; 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-2w8vnf1q37], .avatar-menu button:hover[b-2w8vnf1q37] { background: var(--mk-bg-subtle); }
.avatar-menu a i[b-2w8vnf1q37], .avatar-menu button i[b-2w8vnf1q37] { width: 16px; text-align: center; color: var(--mk-text-2); flex-shrink: 0; }
.avatar-menu a:hover i[b-2w8vnf1q37], .avatar-menu button:hover i[b-2w8vnf1q37] { color: var(--mk-primary); }

/* Identity header — not scrollable, stays pinned above the list. */
.avatar-menu .menu-head[b-2w8vnf1q37] {
    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-2w8vnf1q37] {
    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-2w8vnf1q37] {
    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-2w8vnf1q37] {
    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-2w8vnf1q37] {
    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-2w8vnf1q37] { height: 1px; background: var(--mk-border); margin: 0; }
.avatar-menu .menu-signout[b-2w8vnf1q37] {
    color: var(--mk-danger); flex-shrink: 0;
    font-weight: var(--mk-fw-semibold);
}
.avatar-menu .menu-signout i[b-2w8vnf1q37] { color: var(--mk-danger); }
.avatar-menu .menu-signout:hover[b-2w8vnf1q37] { background: var(--mk-danger-lt); }
.avatar-menu .menu-signout:hover i[b-2w8vnf1q37] { color: var(--mk-danger); }

/* ── Blazor error UI ────────────────────────────────────────────────── */
#blazor-error-ui[b-2w8vnf1q37] {
    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-2w8vnf1q37] {
    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-2w8vnf1q37] { display: none; }
    main[b-2w8vnf1q37] { padding-bottom: 0; }
    .top-row[b-2w8vnf1q37] { padding: 0 20px; }
}

/* ── Desktop (1024 px +): persistent sidebar, true full-screen ──────── */
/* Canonical tier edge — Large starts at --mk-bp-lg (1025px). */
@media (min-width: 1025px) {
    .page[b-2w8vnf1q37] {
        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-2w8vnf1q37] {
        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-2w8vnf1q37] { 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-2w8vnf1q37]  .nl          { display: none; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nl-group    { display: none; }
    /* Section LABELS stay hidden at 56px — there is no room for a word — but the rules
       between sections come back, because collapsing the sidebar now shows every
       module icon and an undivided column of ~50 identical-sized glyphs is unreadable.
       The rules are the only grouping the rail has left. */
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  hr.nl-group  { display: block; margin: var(--mk-s2) var(--mk-s3); }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-link    { justify-content: center; padding: var(--mk-s2) 0; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .ni          { margin-right: 0; font-size: var(--mk-fs-lg); width: auto; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .ni-badge    { display: flex; position: absolute; top: 2px; right: 4px; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-link    { position: relative; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-footer  { padding: var(--mk-s3) 0; align-items: center; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-footer-id { justify-content: center; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-footer-avatar { width: 30px; height: 30px; font-size: var(--mk-t-micro); }

    /* 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-2w8vnf1q37]  .top-row     { padding-left: 0; justify-content: center; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .navbar-brand { justify-content: center; }

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

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

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

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

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

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

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

.hdr-welcome-text[b-2w8vnf1q37] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color:var(--mk-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-welcome-date[b-2w8vnf1q37] {
    font-size: var(--mk-t-micro);
    color:var(--mk-text-muted);
    white-space: nowrap;
}

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

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

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

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

@media (max-width: 599.98px) {
    .hdr-search-wrap[b-2w8vnf1q37] { display: none; }
    .hdr-add-label[b-2w8vnf1q37]   { 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-2w8vnf1q37] {
    background: var(--mk-bg-app);
}

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

.pf-theme .top-row[b-2w8vnf1q37] {
    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-2w8vnf1q37] {
    background: var(--mk-pf-ink);
}

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

/* ── Rail collapse control ────────────────────────────────
   Lives in the sidebar's own brand row rather than the page top bar, so it never
   renders over the content area. Below the desktop tier the sidebar is a drawer
   (dismissed by the backdrop or the top-bar hamburger), so there is nothing to
   collapse and the button is hidden. */
.nav-brand-row[b-et29ddwz77] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
}

.nav-rail-toggle[b-et29ddwz77] {
    display: none;
    width: var(--mk-s6);
    height: var(--mk-s6);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--mk-r-sm);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.nav-rail-toggle:hover[b-et29ddwz77] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Canonical Large tier — the persistent rail starts at --mk-bp-lg (1025px). */
@media (min-width: 1025px) {
    .nav-rail-toggle[b-et29ddwz77] { display: inline-flex; }

    /* At 56px there is no room for the wordmark and a control side by side, so the rail
       keeps the control (Dashboard is the first nav row underneath). The container
       gutter goes too: 56px minus Bootstrap's 12px a side leaves exactly the button
       width, with nothing spare for its border. */
    .nav-brand-row.rail[b-et29ddwz77] {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .nav-brand-row.rail .navbar-brand[b-et29ddwz77] { display: none; }
}

.navbar-brand[b-et29ddwz77] {
    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-et29ddwz77] {
    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-et29ddwz77] {
    transition: opacity 0.15s;
}

/* ── Notification badge (icon-mode version) ──────────── */
.ni-badge[b-et29ddwz77] {
    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-et29ddwz77] {
    gap: 2px;
    padding-block: var(--mk-s2);
}

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

    .nav-item[b-et29ddwz77]  .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-et29ddwz77]  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-et29ddwz77]  a.active .ni {
    color: white;
}

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

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

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

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

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

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

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

.nav-notif-badge[b-et29ddwz77] {
    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;
}

/* NOTE: section-header styling is NOT here — see wwwroot/app.css.
   RenderSectionHeader builds that element with a RenderTreeBuilder, so it never
   receives this file's b-<hash> scope attribute and no rule in this file can
   reach it. The rules that used to sit here had been dead for exactly that
   reason; they are in app.css now, where they apply. */

/* ── 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-et29ddwz77]  .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-et29ddwz77] {
    background-color: transparent;
}

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

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

.pf-theme .nav-item[b-et29ddwz77]  .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-et29ddwz77]  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-et29ddwz77]  a.active .ni,
.pf-theme .nav-item[b-et29ddwz77]  a.active:hover .ni {
    color: var(--mk-text-oncolor);
}

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

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

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

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

.pf-theme .nav-rail-toggle[b-et29ddwz77] {
    border-color: var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-pf-ink);
}

.pf-theme .nav-rail-toggle:hover[b-et29ddwz77] {
    background: var(--mk-bg-subtle);
    color: var(--mk-pf-ink);
}
/* /Components/Layout/OnboardingCarouselShell.razor.rz.scp.css */
/* OnboardingCarouselShell — tokens only.
   @media widths are literal (custom properties are illegal in media queries);
   they mirror --mk-bp-sm / --mk-bp-md. */

.ob[b-5ktc2mkl20] {
    min-height: 100vh;
    /* Dynamic viewport unit: on a phone the URL bar collapses on scroll, and 100vh
       leaves a strip of page background below the flow at rest. Falls back to the
       100vh above wherever dvh is unsupported. */
    min-height: 100dvh;
    background: var(--mk-hero-bg);
    color: var(--mk-hero-fg);
    font-family: var(--mk-font);
    display: flex;
    justify-content: center;
    padding: var(--mk-s5) var(--mk-s4) var(--mk-s6);
}

.ob__inner[b-5ktc2mkl20] {
    width: 100%;
    max-width: 460px;
    /* The body row is the only flexible one: progress, headline and actions keep their
       natural height at every screen size, and the illustration absorbs what is left. */
    display: grid;
    grid-template-rows: auto auto auto auto 1fr auto;
    align-content: start;
}

/* ---------- Progress ---------- */

.ob__top[b-5ktc2mkl20] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s5);
}

.ob__bars[b-5ktc2mkl20] {
    display: flex;
    gap: var(--mk-s2);
    flex: 1;
    min-width: 0;
}

.ob__bar[b-5ktc2mkl20] {
    height: 4px;
    flex: 1;
    border-radius: var(--mk-r-pill);
    background: var(--mk-hero-line);
    transition: background var(--mk-t-fast);
}

.ob__bar.is-done[b-5ktc2mkl20] {
    background: var(--mk-primary);
}

.ob__count[b-5ktc2mkl20] {
    flex: none;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg-2);
    font-variant-numeric: tabular-nums;
}

/* ---------- Back ---------- */

.ob__back[b-5ktc2mkl20] {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s5);
    padding: var(--mk-s2) 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary);
}

.ob__back span[b-5ktc2mkl20] {
    font-size: var(--mk-t-section-sm);
    line-height: 1;
}

/* ---------- Headline ---------- */

.ob__title[b-5ktc2mkl20] {
    margin: 0 0 var(--mk-s4);
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-extrabold);
    line-height: 1.15;
    letter-spacing: var(--mk-ls-tight);
    color: var(--mk-hero-fg);
}

.ob__title-accent[b-5ktc2mkl20] {
    color: var(--mk-primary);
}

.ob__sub[b-5ktc2mkl20] {
    margin: 0 0 var(--mk-s6);
    font-size: var(--mk-t-card-sm);
    line-height: 1.5;
    color: var(--mk-hero-fg-2);
}

/* ---------- Body ---------- */

.ob__body[b-5ktc2mkl20] {
    /* Without this the 1fr row cannot shrink past its content and the actions get
       pushed below the fold on a short screen. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--mk-s4);
    padding-bottom: var(--mk-s6);
}

.ob__hero[b-5ktc2mkl20] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Actions ---------- */

.ob__actions[b-5ktc2mkl20] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--mk-s3);
}

.ob__cta[b-5ktc2mkl20] {
    width: 100%;
    padding: var(--mk-s4);
    border: none;
    border-radius: var(--mk-r-md);
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
    font-family: inherit;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    cursor: pointer;
    transition: opacity var(--mk-t-fast);
}

.ob__cta:hover:not(:disabled)[b-5ktc2mkl20] {
    opacity: .9;
}

.ob__cta:disabled[b-5ktc2mkl20] {
    opacity: .45;
    cursor: not-allowed;
}

.ob__skip[b-5ktc2mkl20],
.ob__hint[b-5ktc2mkl20] {
    margin: 0;
    text-align: center;
    font-size: var(--mk-t-body);
}

.ob__skip[b-5ktc2mkl20] {
    padding: var(--mk-s2);
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary);
}

.ob__hint[b-5ktc2mkl20] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-hero-fg-2);
}

/* ==========================================================================
   Small (below 600px): the flow already owns the viewport, so only the
   headline needs to come down a step to keep two words per line.
   ========================================================================== */
@media (max-width: 599.98px) {

    .ob[b-5ktc2mkl20] {
        padding: var(--mk-s4) var(--mk-s4) var(--mk-s5);
    }

    .ob__title[b-5ktc2mkl20] {
        font-size: var(--mk-t-section);
    }
}

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

    .ob__bar[b-5ktc2mkl20],
    .ob__cta[b-5ktc2mkl20] {
        transition: none;
    }
}
/* /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-kze88uk7xx] {
    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-kze88uk7xx] {
    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-kze88uk7xx] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--mk-s8) var(--mk-s6);
    background: var(--mk-bg-surface);
}

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

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

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

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

.dots__dot[b-kze88uk7xx] {
    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-kze88uk7xx] {
    width: 20px;
    background: var(--mk-red);
}

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

.brand[b-kze88uk7xx] {
    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-kze88uk7xx] {
    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-kze88uk7xx] {
    color: var(--mk-primary);
}

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

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

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

    .split__form[b-kze88uk7xx] {
        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-kze88uk7xx] {
        display: none;
    }

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

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

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

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


#components-reconnect-modal[b-ca8jkfnan2] {
    background-color: var(--mk-bg-surface);
    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-ca8jkfnan2 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-ca8jkfnan2 {
    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;
    }
}
/* /Components/Pages/CashBank/CashBankAccountForm.razor.rz.scp.css */
/* Bank account form — a two-column field grid that collapses to one on a phone. */

.cbf-grid[b-c7fo3eo5xa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-space-4);
}

.cbf-field[b-c7fo3eo5xa] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.cbf-label[b-c7fo3eo5xa] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cbf-req[b-c7fo3eo5xa] {
    color: var(--mk-fin-negative-fg);
}

.cbf-hint[b-c7fo3eo5xa] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.cbf-readonly[b-c7fo3eo5xa] {
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-app);
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary-sm);
    font-variant-numeric: tabular-nums;
}

.cbf-checks[b-c7fo3eo5xa] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-3);
}

@media (max-width: 599.98px) {
    .cbf-grid[b-c7fo3eo5xa] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/CashBankAccounts.razor.rz.scp.css */
/* Accounts list — the running total strip above the grid, and the toolbar toggle inside it. */

.cba-total[b-amcwsunk9z] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mk-space-4);
    padding: var(--mk-space-3) var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-subtle);
}

.cba-total-label[b-amcwsunk9z] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cba-total-value[b-amcwsunk9z] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

/* ::deep because the toggle arrives through ToolbarContent, which belongs to this page's scope
   but is rendered inside MkDataGrid's. */
[b-amcwsunk9z] .cba-inactive {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-space-2);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
    white-space: nowrap;
    cursor: pointer;
}
/* /Components/Pages/CashBank/CashBankHub.razor.rz.scp.css */
/* Cash & Bank hub — the summary tiles and the section links beneath them. */

.cb-tiles[b-7c7cv9ppaz] {
    display: grid;
    /* auto-fit rather than a fixed column count: a tenant with only the cash drawer switched on
       gets one full-width tile, not one tile and three gaps. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
    margin-bottom: var(--mk-space-6);
}

.cb-tile[b-7c7cv9ppaz] {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.cb-tile:hover[b-7c7cv9ppaz] {
    border-color: var(--mk-primary);
    box-shadow: var(--mk-shadow-sm);
}

.cb-tile:focus-visible[b-7c7cv9ppaz] {
    outline: 2px solid var(--mk-primary-ink);
    outline-offset: 2px;
}

.cb-tile-label[b-7c7cv9ppaz] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cb-tile-value[b-7c7cv9ppaz] {
    margin-top: var(--mk-space-2);
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.cb-tile-note[b-7c7cv9ppaz] {
    margin-top: 2px;
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

/* ── Section links ───────────────────────────────────────────────────────── */

.cb-links[b-7c7cv9ppaz] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-3);
}

.cb-link[b-7c7cv9ppaz] {
    display: block;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
    text-decoration: none;
    transition: border-color .14s ease;
}

.cb-link:hover[b-7c7cv9ppaz] {
    border-color: var(--mk-primary);
}

.cb-link-title[b-7c7cv9ppaz] {
    display: block;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    /* --mk-primary-ink, not --mk-primary: the brand orange is ~2.9:1 on white and fails AA at
       body size. */
    color: var(--mk-primary-ink);
}

.cb-link-sub[b-7c7cv9ppaz] {
    display: block;
    margin-top: 2px;
    font-size: var(--mk-t-micro);
    color: var(--mk-text-2);
}

@media (max-width: 599.98px) {
    .cb-tiles[b-7c7cv9ppaz] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }
}
/* /Components/Pages/CashBank/CashBankStatement.razor.rz.scp.css */
/* Account statement — the balance header, the inline entry pane, and the register grid. */

.cbs-head[b-ugb472k124] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mk-space-4);
    padding: var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
}

.cbs-balance[b-ugb472k124] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cbs-balance-label[b-ugb472k124] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cbs-balance-value[b-ugb472k124] {
    font-size: var(--mk-t-page-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.cbs-balance-value.is-negative[b-ugb472k124] {
    color: var(--mk-fin-negative-fg);
}

.cbs-balance-note[b-ugb472k124] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

.cbs-actions[b-ugb472k124] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-space-2);
}

/* ── Inline entry pane ───────────────────────────────────────────────────── */

.cbs-pane-title[b-ugb472k124] {
    margin-bottom: var(--mk-space-4);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.cbs-form[b-ugb472k124] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
}

.cbs-field[b-ugb472k124] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.cbs-field-wide[b-ugb472k124] {
    grid-column: 1 / -1;
}

.cbs-label[b-ugb472k124] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cbs-req[b-ugb472k124] {
    color: var(--mk-fin-negative-fg);
}

.cbs-hint[b-ugb472k124] {
    font-size: var(--mk-t-secondary-sm);
    line-height: 1.5;
    color: var(--mk-text-2);
}

.cbs-select[b-ugb472k124] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.cbs-select:focus[b-ugb472k124] {
    border-color: var(--mk-primary);
}

@media (max-width: 599.98px) {
    .cbs-actions[b-ugb472k124] {
        width: 100%;
    }

    .cbs-form[b-ugb472k124] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/ChequeForm.razor.rz.scp.css */
/* Cheque form — a two-column field grid that collapses to one on a phone. */

.chf-grid[b-vfmf8867fp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-space-4);
}

.chf-field[b-vfmf8867fp] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.chf-field-wide[b-vfmf8867fp] {
    grid-column: 1 / -1;
}

.chf-label[b-vfmf8867fp] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.chf-req[b-vfmf8867fp] {
    color: var(--mk-fin-negative-fg);
}

.chf-hint[b-vfmf8867fp] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.chf-select[b-vfmf8867fp] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.chf-select:focus[b-vfmf8867fp] {
    border-color: var(--mk-primary);
}

@media (max-width: 599.98px) {
    .chf-grid[b-vfmf8867fp] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/Cheques.razor.rz.scp.css */
/* Cheque register — the "what is still out there" tiles, the toolbar filters and the
   clear/bounce pane. */

.chq-tiles[b-gv6mondw3c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
}

.chq-tile[b-gv6mondw3c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
}

/* Cheques dated today or earlier and still unbanked are the one thing on this screen that needs
   acting on, so the tile carries the warning colour rather than a bare count. */
.chq-tile.is-due[b-gv6mondw3c] {
    border-color: var(--mk-fin-pending-br);
    background: var(--mk-fin-pending-lt);
}

.chq-tile-label[b-gv6mondw3c] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.chq-tile-value[b-gv6mondw3c] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.chq-tile.is-due .chq-tile-value[b-gv6mondw3c] {
    color: var(--mk-fin-pending-fg);
}

.chq-tile-note[b-gv6mondw3c] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

/* ── Pane ────────────────────────────────────────────────────────────────── */

.chq-pane[b-gv6mondw3c] {
    margin: 0 var(--mk-space-4) var(--mk-space-4);
}

.chq-pane-title[b-gv6mondw3c] {
    margin-bottom: var(--mk-space-4);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.chq-field[b-gv6mondw3c] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    margin-bottom: var(--mk-space-3);
    max-width: 420px;
}

.chq-label[b-gv6mondw3c] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.chq-req[b-gv6mondw3c] {
    color: var(--mk-fin-negative-fg);
}

.chq-hint[b-gv6mondw3c] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.chq-select[b-gv6mondw3c] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.chq-select:focus[b-gv6mondw3c] {
    border-color: var(--mk-primary);
}

/* ::deep — these arrive through ToolbarContent, so they carry this page's scope attribute but
   render inside MkDataGrid's. An unwrapped select claims the whole toolbar row, which is why
   each one sits in a .mk-grid-filter div. */
[b-gv6mondw3c] .chq-toolbar-select {
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

@media (max-width: 599.98px) {
    .chq-tiles[b-gv6mondw3c] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }
}
/* /Components/Pages/CashBank/LoanDetail.razor.rz.scp.css */
/* Loan detail — the four summary tiles, the payment/close panes, and the payments vs schedule
   tab strip. */

.lnd-tiles[b-6i2t92bmei] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
}

.lnd-tile[b-6i2t92bmei] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
}

.lnd-tile-label[b-6i2t92bmei] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.lnd-tile-value[b-6i2t92bmei] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.lnd-tile-note[b-6i2t92bmei] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

/* ── Panes ───────────────────────────────────────────────────────────────── */

.lnd-pane-title[b-6i2t92bmei] {
    margin-bottom: var(--mk-space-4);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.lnd-form[b-6i2t92bmei] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
}

.lnd-field[b-6i2t92bmei] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.lnd-label[b-6i2t92bmei] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.lnd-req[b-6i2t92bmei] {
    color: var(--mk-fin-negative-fg);
}

.lnd-hint[b-6i2t92bmei] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.lnd-select[b-6i2t92bmei] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.lnd-select:focus[b-6i2t92bmei] {
    border-color: var(--mk-primary);
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.lnd-tabs[b-6i2t92bmei] {
    display: flex;
    gap: var(--mk-space-1);
    margin-bottom: var(--mk-space-3);
    border-bottom: 1px solid var(--mk-border);
}

.lnd-tab[b-6i2t92bmei] {
    padding: var(--mk-space-2) var(--mk-space-4);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--mk-text-2);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-medium);
    cursor: pointer;
}

.lnd-tab:hover[b-6i2t92bmei] {
    color: var(--mk-text-strong);
}

.lnd-tab.is-active[b-6i2t92bmei] {
    /* --mk-primary-ink rather than --mk-primary: this is body-size text on a light surface. */
    color: var(--mk-primary-ink);
    border-bottom-color: var(--mk-primary);
    font-weight: var(--mk-fw-bold);
}

@media (max-width: 599.98px) {
    .lnd-tiles[b-6i2t92bmei] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }

    .lnd-form[b-6i2t92bmei] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/LoanForm.razor.rz.scp.css */
/* Loan form — a two-column field grid that collapses to one on a phone. */

.lnf-grid[b-4goxr4g6bn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-space-4);
}

.lnf-field[b-4goxr4g6bn] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.lnf-field-wide[b-4goxr4g6bn] {
    grid-column: 1 / -1;
}

.lnf-label[b-4goxr4g6bn] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.lnf-req[b-4goxr4g6bn] {
    color: var(--mk-fin-negative-fg);
}

.lnf-hint[b-4goxr4g6bn] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.lnf-select[b-4goxr4g6bn] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.lnf-select:focus[b-4goxr4g6bn] {
    border-color: var(--mk-primary);
}

/* A value the form shows but will not let you edit — the principal, once payments exist. */
.lnf-readonly[b-4goxr4g6bn] {
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-app);
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary-sm);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 599.98px) {
    .lnf-grid[b-4goxr4g6bn] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/Loans.razor.rz.scp.css */
/* Loan list — the outstanding tiles and the status filter in the grid toolbar. */

.lns-tiles[b-gmojyrsyo9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
}

.lns-tile[b-gmojyrsyo9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
}

.lns-tile-label[b-gmojyrsyo9] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.lns-tile-value[b-gmojyrsyo9] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.lns-tile-note[b-gmojyrsyo9] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

/* ::deep — the filter arrives through ToolbarContent and renders inside MkDataGrid's scope. */
[b-gmojyrsyo9] .lns-toolbar-select {
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

@media (max-width: 599.98px) {
    .lns-tiles[b-gmojyrsyo9] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }
}
/* /Components/Pages/Onboarding/OnboardingFlow.razor.rz.scp.css */
/* OnboardingFlow — the bodies that sit inside OnboardingCarouselShell.
   Everything here lives on the hero gradient, so it wears --mk-hero-* foregrounds and
   translucent white fills rather than the page's surface tokens: a --mk-bg-surface card
   would punch a white hole in the middle of a dark first-run screen. */

/* ---------- Grouped rows (language / theme) ---------- */

.ob-card[b-koz09xeb8x] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-lg);
    background: var(--mk-hero-fill);
    overflow: hidden;
}

.ob-row[b-koz09xeb8x] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s4);
    border-bottom: 1px solid var(--mk-hero-line);
}

.ob-row:last-child[b-koz09xeb8x] {
    border-bottom: none;
}

.ob-row__icon[b-koz09xeb8x] {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-primary);
    font-size: var(--mk-t-body);
}

.ob-row__label[b-koz09xeb8x] {
    flex: 1;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg);
}

.ob-row__select[b-koz09xeb8x] {
    flex: none;
    max-width: 55%;
    padding: var(--mk-s2) var(--mk-s3);
    border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-sm);
    background: var(--mk-hero-fill);
    color: var(--mk-hero-fg);
    font-family: inherit;
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
}

/* The dropdown list itself is painted by the OS, not by this page — on a dark hero the
   options would otherwise be white-on-white in several browsers. */
.ob-row__select option[b-koz09xeb8x] {
    color: var(--mk-text);
    background: var(--mk-bg-surface);
}

/* ---------- Quote ---------- */

.ob-quote[b-koz09xeb8x] {
    margin: var(--mk-s4) 0 0;
    padding: var(--mk-s4);
    border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-lg);
    font-size: var(--mk-t-body);
    font-style: italic;
    line-height: 1.5;
    color: var(--mk-hero-fg-2);
}

.ob-quote cite[b-koz09xeb8x] {
    display: block;
    margin-top: var(--mk-s2);
    font-style: normal;
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary);
}

/* ---------- Start choice cards ---------- */

.ob-choices[b-koz09xeb8x] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
}

.ob-choice[b-koz09xeb8x] {
    display: flex;
    align-items: flex-start;
    gap: var(--mk-s4);
    width: 100%;
    padding: var(--mk-s4);
    border: 1.5px solid var(--mk-hero-line);
    border-radius: var(--mk-r-lg);
    background: var(--mk-hero-fill);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--mk-t-fast), background var(--mk-t-fast);
}

.ob-choice:hover:not(:disabled)[b-koz09xeb8x] {
    border-color: var(--mk-primary);
}

/* Selection is carried by the border AND the tick in ::after, never by colour alone. */
.ob-choice.is-picked[b-koz09xeb8x] {
    border-color: var(--mk-primary);
    background: var(--mk-primary-lt);
}

.ob-choice.is-picked .ob-choice__title[b-koz09xeb8x]::after {
    content: " ✓";
    color: var(--mk-primary);
}

.ob-choice:disabled[b-koz09xeb8x] {
    opacity: .5;
    cursor: not-allowed;
}

.ob-choice__art[b-koz09xeb8x] {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--mk-r-md);
    background: var(--mk-hero-fill);
    border: 1px solid var(--mk-hero-line);
    font-size: var(--mk-t-section-sm);
}

.ob-choice__text[b-koz09xeb8x] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    min-width: 0;
}

.ob-choice__title[b-koz09xeb8x] {
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-hero-fg);
}

.ob-choice__desc[b-koz09xeb8x] {
    font-size: var(--mk-t-body);
    line-height: 1.45;
    color: var(--mk-hero-fg-2);
}

/* A picked card sits on --mk-primary-lt, which is a LIGHT tint — hero foregrounds would
   vanish on it, so the text swaps back to the ordinary ink tokens. */
.ob-choice.is-picked .ob-choice__title[b-koz09xeb8x] {
    color: var(--mk-text-strong);
}

.ob-choice.is-picked .ob-choice__desc[b-koz09xeb8x] {
    color: var(--mk-text-2);
}

/* ---------- First-account form ---------- */

.ob-field[b-koz09xeb8x] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    padding: var(--mk-s4);
    border-bottom: 1px solid var(--mk-hero-line);
}

.ob-field:last-child[b-koz09xeb8x] {
    border-bottom: none;
}

.ob-field__label[b-koz09xeb8x] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg-2);
}

.ob-field__input[b-koz09xeb8x] {
    width: 100%;
    padding: var(--mk-s3);
    border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-sm);
    background: var(--mk-hero-fill);
    color: var(--mk-hero-fg);
    font-family: inherit;
    font-size: var(--mk-t-card-sm);
    outline: none;
}

.ob-field__input[b-koz09xeb8x]::placeholder {
    color: var(--mk-hero-fg-2);
}

.ob-field__input:focus[b-koz09xeb8x] {
    border-color: var(--mk-primary);
}

.ob-types[b-koz09xeb8x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-s2);
}

.ob-type[b-koz09xeb8x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mk-s1);
    padding: var(--mk-s3);
    border: 1.5px solid var(--mk-hero-line);
    border-radius: var(--mk-r-md);
    background: var(--mk-hero-fill);
    color: var(--mk-hero-fg-2);
    font-family: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
    transition: border-color var(--mk-t-fast), color var(--mk-t-fast);
}

.ob-type__icon[b-koz09xeb8x] {
    font-size: var(--mk-t-card-sm);
    line-height: 1;
}

.ob-type.is-picked[b-koz09xeb8x] {
    border-color: var(--mk-primary);
    color: var(--mk-primary);
}

/* ---------- Footnotes ---------- */

.ob-note[b-koz09xeb8x],
.ob-error[b-koz09xeb8x] {
    margin: var(--mk-s3) 0 0;
    text-align: center;
    font-size: var(--mk-t-secondary);
}

.ob-note[b-koz09xeb8x] {
    color: var(--mk-hero-fg-2);
}

.ob-error[b-koz09xeb8x] {
    color: var(--mk-fin-negative-on-hero);
    font-weight: var(--mk-fw-semibold);
}

@media (max-width: 599.98px) {

    .ob-choice__art[b-koz09xeb8x] {
        width: 44px;
        height: 44px;
    }
}

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

    .ob-choice[b-koz09xeb8x],
    .ob-type[b-koz09xeb8x] {
        transition: none;
    }
}
/* /Components/Pages/Payroll/AttendanceRegister.razor.rz.scp.css */
/* Attendance register — a staff x day grid.
   The grid is the one place in HR that genuinely needs custom CSS: it scrolls
   horizontally inside its own container (never the page body) with the name
   column pinned. All values are --mk-* tokens per docs/css-design-system.md §1. */

.att-scroll[b-8u83o6is6j] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.att-grid[b-8u83o6is6j] {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: var(--mk-t-secondary);
}

.att-grid th[b-8u83o6is6j],
.att-grid td[b-8u83o6is6j] {
    border-bottom: 1px solid var(--mk-border);
    padding: var(--mk-space-2);
    white-space: nowrap;
}

.att-grid thead th[b-8u83o6is6j] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mk-bg-subtle);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-muted);
}

/* Pinned employee column. Higher z-index on the header cell so it stays above
   both the sticky row and the sticky column where they intersect. */
.att-sticky-col[b-8u83o6is6j] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 160px;
    background: var(--mk-bg-surface);
    border-right: 1px solid var(--mk-border);
}

.att-grid thead .att-sticky-col[b-8u83o6is6j] {
    z-index: 3;
    background: var(--mk-bg-subtle);
}

.att-day[b-8u83o6is6j] {
    text-align: center;
    min-width: 30px;
}

.att-day-off[b-8u83o6is6j] { color: var(--mk-primary-ink); }

.att-cell[b-8u83o6is6j] {
    text-align: center;
    font-family: var(--mk-font-num);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-muted);
}

.att-present[b-8u83o6is6j]  { background: var(--mk-success-lt);  color: var(--mk-success-fg); }
.att-half[b-8u83o6is6j]     { background: var(--mk-warning-lt);  color: var(--mk-warning-fg); }
.att-leave[b-8u83o6is6j]    { background: var(--mk-info-lt);     color: var(--mk-info-fg); }
.att-unpaid[b-8u83o6is6j]   { background: var(--mk-bg-subtle);   color: var(--mk-text-muted); }
.att-absent[b-8u83o6is6j]   { background: var(--mk-danger-lt);   color: var(--mk-danger-fg); }
.att-off[b-8u83o6is6j]      { background: var(--mk-bg-subtle);   color: var(--mk-text-muted); }
.att-holiday[b-8u83o6is6j]  { background: var(--mk-primary-lt);  color: var(--mk-primary-ink); }

.att-total[b-8u83o6is6j] {
    text-align: right;
    font-family: var(--mk-font-num);
    background: var(--mk-bg-subtle);
}

.att-lop[b-8u83o6is6j] { color: var(--mk-danger-fg); font-weight: var(--mk-fw-semibold); }

/* ── Today's quick-mark list ───────────────────────────────────────────── */

.att-today[b-8u83o6is6j] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
}

.att-today-row[b-8u83o6is6j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-space-3);
    flex-wrap: wrap;
    padding-bottom: var(--mk-space-2);
    border-bottom: 1px solid var(--mk-border);
}

.att-today-row:last-child[b-8u83o6is6j] { border-bottom: 0; padding-bottom: 0; }

.att-today-name[b-8u83o6is6j] { min-width: 140px; }

.att-today-actions[b-8u83o6is6j] {
    display: flex;
    gap: var(--mk-space-2);
}

.att-chip[b-8u83o6is6j] {
    /* 44px floor: this is the primary tap target on a phone. */
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
    transition: background var(--mk-dur-fast) var(--mk-ease-out),
                border-color var(--mk-dur-fast) var(--mk-ease-out);
}

.att-chip:hover:not(:disabled)[b-8u83o6is6j] { border-color: var(--mk-primary-border); }

.att-chip-on[b-8u83o6is6j] {
    background: var(--mk-primary);
    border-color: var(--mk-primary);
    color: var(--mk-text-oncolor);
}

.att-chip:disabled[b-8u83o6is6j] { opacity: .5; cursor: default; }

.att-chip:focus-visible[b-8u83o6is6j] {
    outline: 2px solid var(--mk-primary);
    outline-offset: 2px;
}

@media (min-width: 1025px) {
    .att-chip[b-8u83o6is6j] { min-width: var(--mk-ctrl-h); min-height: var(--mk-ctrl-h); }
}

/* ── Legend ────────────────────────────────────────────────────────────── */

.att-legend[b-8u83o6is6j] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-space-3);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-muted);
}

.att-legend-item[b-8u83o6is6j] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-space-2);
}

.att-legend-swatch[b-8u83o6is6j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--mk-radius-sm);
    border: 1px solid var(--mk-border);
}

@media (prefers-reduced-motion: reduce) {
    .att-chip[b-8u83o6is6j] { transition: none; }
}
/* /Components/Pages/Payroll/HrHub.razor.rz.scp.css */
/* HR hub — stat cards and module tiles.
   Every value here is a --mk-* token per docs/css-design-system.md §1. */

.hr-stat-label[b-zln2hz35mk] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-muted);
    margin-bottom: var(--mk-space-1);
}

.hr-stat-value[b-zln2hz35mk] {
    font-family: var(--mk-font-num);
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-bold);
    line-height: 1.1;
    color: var(--mk-text);
}

.hr-stat-good[b-zln2hz35mk] { color: var(--mk-success); }
.hr-stat-warn[b-zln2hz35mk] { color: var(--mk-warning-fg); }

.hr-empty-glyph[b-zln2hz35mk] { font-size: var(--mk-fs-2xl); }

.hr-tile[b-zln2hz35mk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mk-space-1);
    width: 100%;
    /* 44px floor is the rule below 1025px; this sits well above it at every tier. */
    min-height: 108px;
    padding: var(--mk-space-4);
    text-align: left;
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    box-shadow: var(--mk-shadow-sm);
    cursor: pointer;
    transition: border-color var(--mk-dur-fast) var(--mk-ease-out),
                box-shadow var(--mk-dur-fast) var(--mk-ease-out),
                transform var(--mk-dur-fast) var(--mk-ease-out);
}

.hr-tile:hover[b-zln2hz35mk] {
    border-color: var(--mk-primary-border);
    box-shadow: var(--mk-shadow-md);
    transform: translateY(-2px);
}

.hr-tile:focus-visible[b-zln2hz35mk] {
    outline: 2px solid var(--mk-primary);
    outline-offset: 2px;
}

.hr-tile-icon[b-zln2hz35mk] { font-size: var(--mk-fs-xl); line-height: 1; }

.hr-tile-title[b-zln2hz35mk] {
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.hr-tile-sub[b-zln2hz35mk] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .hr-tile[b-zln2hz35mk] { transition: none; }
    .hr-tile:hover[b-zln2hz35mk] { transform: none; }
}
/* /Components/Pages/Payroll/PayslipDetail.razor.rz.scp.css */
/* Payslip — an A4-ish sheet that is meant to be printed and handed over.
   All values are --mk-* tokens per docs/css-design-system.md §1. */

.pay-sheet[b-bql7o8u6h4] {
    max-width: 820px;
    padding: var(--mk-space-6);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    box-shadow: var(--mk-shadow-sm);
}

.pay-head[b-bql7o8u6h4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-space-4);
    padding-bottom: var(--mk-space-4);
    border-bottom: 2px solid var(--mk-primary);
}

.pay-title[b-bql7o8u6h4] {
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.pay-sub[b-bql7o8u6h4] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
}

.pay-meta[b-bql7o8u6h4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mk-space-2) var(--mk-space-4);
    padding: var(--mk-space-4) 0;
    border-bottom: 1px solid var(--mk-border);
}

.pay-meta-item[b-bql7o8u6h4] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-space-2);
    font-size: var(--mk-t-secondary);
}

.pay-meta-label[b-bql7o8u6h4] { color: var(--mk-text-2); }
.pay-meta-value[b-bql7o8u6h4] { color: var(--mk-text); font-weight: var(--mk-fw-medium); }

.pay-cols[b-bql7o8u6h4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mk-space-5);
    padding: var(--mk-space-4) 0;
}

.pay-col-head[b-bql7o8u6h4] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: var(--mk-space-2);
}

.pay-table[b-bql7o8u6h4] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mk-t-body);
}

.pay-table td[b-bql7o8u6h4] {
    padding: var(--mk-space-2) 0;
    border-bottom: 1px solid var(--mk-border);
}

.pay-table tfoot td[b-bql7o8u6h4] {
    font-weight: var(--mk-fw-semibold);
    border-bottom: 0;
    border-top: 2px solid var(--mk-border);
}

.pay-amt[b-bql7o8u6h4] {
    text-align: right;
    font-family: var(--mk-font-num);
    white-space: nowrap;
}

.pay-net[b-bql7o8u6h4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-space-4);
    padding: var(--mk-space-4);
    background: var(--mk-primary-lt);
    border-radius: var(--mk-radius-md);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
}

.pay-net-value[b-bql7o8u6h4] {
    font-family: var(--mk-font-num);
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-primary-ink);
}

.pay-employer[b-bql7o8u6h4],
.pay-foot[b-bql7o8u6h4] {
    margin-top: var(--mk-space-4);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

.pay-adjust[b-bql7o8u6h4] { margin-top: var(--mk-space-5); }

@media (min-width: 600px) {
    .pay-cols[b-bql7o8u6h4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Printing: only the sheet itself. App chrome (sidebar, top bar, toasts) is
   stripped globally by wwwroot/css/print.css — CSS isolation cannot reach the
   layout from here — so all this file does is hide the page's own on-screen
   controls and drop the sheet framing. */
@media print {
    .pay-noprint[b-bql7o8u6h4] { display: none !important; }

    .pay-sheet[b-bql7o8u6h4] {
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}
/* /Components/Pages/PersonalFinance/FreshStartPage.razor.rz.scp.css */
.fs-hero[b-yz9m624j6c] {
    background: var(--mk-hero-bg);
    padding: var(--mk-s5) var(--mk-s5) 70px;
}
.fs-hero-row[b-yz9m624j6c] { display: flex; align-items: center; gap: var(--mk-s3); max-width: 560px; margin-inline: auto; }
.fs-back[b-yz9m624j6c] {
    width: 38px;
    height: 38px;
    border-radius: var(--mk-r-md);
    background: var(--mk-hero-fill);
    border: none;
    cursor: pointer;
    color: var(--mk-hero-fg);
    font-size: var(--mk-t-section-sm);
}
.fs-hero-kicker[b-yz9m624j6c] {
    font-size: var(--mk-t-micro);
    color: var(--mk-hero-fg-2);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
}
.fs-hero-title[b-yz9m624j6c] {
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-extrabold);
    color: var(--mk-hero-fg);
    margin-top: var(--mk-s1);
}

.fs-actions[b-yz9m624j6c] { display: flex; gap: var(--mk-s2); }
.fs-actions .fs-btn[b-yz9m624j6c] { flex: 1; }
.fs-btn.fs-btn-plain[b-yz9m624j6c] {
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    border: 1.5px solid var(--mk-border);
}

.fs[b-yz9m624j6c] {
    padding: 0 var(--mk-s5) var(--mk-s6);
    margin: -50px auto 0;
    max-width: 560px;
    position: relative;
}

.fs-card[b-yz9m624j6c] {
    display: block;
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s4);
    margin-bottom: var(--mk-s3);
}

.fs-warn[b-yz9m624j6c] { background: var(--mk-fin-negative-lt); border-color: var(--mk-fin-negative-br); }
.fs-warn-title[b-yz9m624j6c] {
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-fin-negative-fg);
    margin-bottom: var(--mk-s1);
}

.fs-h[b-yz9m624j6c] {
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    margin-bottom: var(--mk-s2);
}
.fs-p[b-yz9m624j6c] { margin: 0; font-size: var(--mk-t-secondary); color: var(--mk-text-2); line-height: 1.5; }

.fs-row[b-yz9m624j6c] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-s3);
    padding: var(--mk-s2) 0;
    border-bottom: 1px solid var(--mk-border);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text);
}
.fs-row:last-child[b-yz9m624j6c] { border-bottom: none; }
.fs-row-note[b-yz9m624j6c] { color: var(--mk-text-muted); font-size: var(--mk-t-micro); }
.fs-count[b-yz9m624j6c] { font-weight: var(--mk-fw-bold); color: var(--mk-fin-negative); }

.fs-export[b-yz9m624j6c] {
    display: flex;
    gap: var(--mk-s2);
    align-items: flex-start;
    background: var(--mk-fin-info-lt);
    border-color: var(--mk-fin-info-br);
    color: var(--mk-fin-info-fg);
    font-size: var(--mk-t-secondary);
    text-decoration: none;
    line-height: 1.5;
}

.fs-label[b-yz9m624j6c] {
    display: block;
    margin: var(--mk-s3) 0 var(--mk-s1);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
}
.fs-label:first-child[b-yz9m624j6c] { margin-top: 0; }
.fs-input[b-yz9m624j6c] {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: var(--mk-s2) var(--mk-s3);
    border: 1.5px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font-size: var(--mk-t-body);
    letter-spacing: .08em;
}

.fs-error[b-yz9m624j6c] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s2) var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-fin-negative-lt);
    color: var(--mk-fin-negative-fg);
    font-size: var(--mk-t-secondary);
}

.fs-btn[b-yz9m624j6c] {
    width: 100%;
    min-height: 48px;
    margin-top: var(--mk-s4);
    border: none;
    border-radius: var(--mk-r-md);
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-bold);
    cursor: pointer;
}
.fs-btn:disabled[b-yz9m624j6c] { opacity: .45; cursor: not-allowed; }
/* Ink-on-tint rather than white on a solid fill: the fin-* solids turn pastel in dark mode. */
.fs-btn-danger[b-yz9m624j6c] {
    background: var(--mk-fin-negative-lt);
    color: var(--mk-fin-negative-fg);
    border: 1.5px solid var(--mk-fin-negative-br);
}
.fs-btn-primary[b-yz9m624j6c] { background: var(--mk-primary); color: var(--mk-primary-foreground); }

.fs-done[b-yz9m624j6c] { text-align: center; }
.fs-done-ico[b-yz9m624j6c] { font-size: var(--mk-t-hero-sm); line-height: 1; margin-bottom: var(--mk-s2); }
.fs-done-title[b-yz9m624j6c] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    margin-bottom: var(--mk-s2);
}
/* /Components/Pages/PersonalFinance/ImportContactsPage.razor.rz.scp.css */
/* Imported-contacts list on /pf/import-contacts. Personal Finance keeps its own card/list
   layouts (exempt from MkDataGrid), and every colour is a theme-reactive --mk-* token so the
   list follows the app into dark mode. */

.ic-card[b-4y9aes4dtb] {
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-lg);
    padding: var(--mk-s5);
    box-shadow: var(--mk-sh-sm);
    margin-top: var(--mk-s4);
}

.ic-head[b-4y9aes4dtb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s3);
}

.ic-title[b-4y9aes4dtb] {
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.ic-sub[b-4y9aes4dtb] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
    margin-top: 2px;
}

.ic-search[b-4y9aes4dtb] {
    flex: 0 1 280px;
    min-width: 0;
    padding: var(--mk-s2) var(--mk-s3);
    border-radius: var(--mk-r-md);
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-subtle);
    color: var(--mk-text);
    font-size: var(--mk-t-secondary);
}

.ic-search:focus[b-4y9aes4dtb] { outline: none; box-shadow: var(--mk-focus-ring); border-color: var(--mk-primary); }

.ic-empty[b-4y9aes4dtb] {
    padding: var(--mk-s5) var(--mk-s3);
    text-align: center;
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
}

.ic-list[b-4y9aes4dtb] { list-style: none; margin: 0; padding: 0; }

.ic-list li + li[b-4y9aes4dtb] { border-top: 1px solid var(--mk-border); }

.ic-row[b-4y9aes4dtb] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s3) var(--mk-s2);
    border-radius: var(--mk-r-md);
    text-decoration: none;
    color: inherit;
}

.ic-row:hover[b-4y9aes4dtb] { background: var(--mk-bg-subtle); }

.ic-avatar[b-4y9aes4dtb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mk-bg-app);
    color: var(--mk-text-strong);
    font-weight: var(--mk-fw-bold);
    font-size: var(--mk-t-body);
}

.ic-main[b-4y9aes4dtb] { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ic-name[b-4y9aes4dtb] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-meta[b-4y9aes4dtb] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-new[b-4y9aes4dtb] {
    flex-shrink: 0;
    padding: 1px var(--mk-s2);
    border-radius: var(--mk-r-pill);
    background: var(--mk-fin-positive-lt);
    color: var(--mk-fin-positive-fg);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
}

.ic-bal[b-4y9aes4dtb] {
    flex-shrink: 0;
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    font-variant-numeric: tabular-nums;
}

.ic-bal.is-in[b-4y9aes4dtb]  { color: var(--mk-fin-positive-fg); }
.ic-bal.is-out[b-4y9aes4dtb] { color: var(--mk-fin-negative-fg); }

.ic-more[b-4y9aes4dtb] {
    padding-top: var(--mk-s3);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

@media (max-width: 599.98px) {
    .ic-card[b-4y9aes4dtb] { padding: var(--mk-s4); }
    .ic-search[b-4y9aes4dtb] { flex-basis: 100%; }
    .ic-bal[b-4y9aes4dtb] { max-width: 38%; text-align: right; white-space: normal; }
}
/* /Components/Pages/Reports/ReportsHub.razor.rz.scp.css */
.reports-hub[b-196q3qcimz] {
    padding: var(--mk-s5);
    max-width: 860px;
}

.rh-head[b-196q3qcimz] {
    margin-bottom: var(--mk-s4);
}

.rh-title[b-196q3qcimz] {
    font-size: var(--mk-t-page-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    margin: 0;
}

.rh-sub[b-196q3qcimz] {
    font-size: var(--mk-t-body);
    color: var(--mk-text-2);
    margin: var(--mk-s1) 0 0;
}

.rh-centre[b-196q3qcimz] {
    display: flex;
    justify-content: center;
    padding: var(--mk-s8) 0;
}

.rh-empty[b-196q3qcimz] {
    text-align: center;
    padding: var(--mk-s6) var(--mk-s4);
}

.rh-empty i[b-196q3qcimz] {
    font-size: var(--mk-t-hero-sm);
    color: var(--mk-text-muted);
    display: block;
    margin-bottom: var(--mk-s3);
}

/* ── Search ─────────────────────────────────────────────────────────────── */
.rh-search[b-196q3qcimz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    padding: 0 var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.rh-search i[b-196q3qcimz] {
    color: var(--mk-text-muted);
    font-size: var(--mk-t-body);
}

.rh-search input[b-196q3qcimz] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: var(--mk-s3) 0;
    font-family: var(--mk-font);
    font-size: var(--mk-t-body);
    color: var(--mk-text-strong);
}

.rh-search-clear[b-196q3qcimz] {
    border: 0;
    background: transparent;
    color: var(--mk-text-muted);
    font-size: var(--mk-t-section-sm);
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--mk-s1);
}

.rh-noresult[b-196q3qcimz] {
    margin: 0 0 var(--mk-s4);
}

/* ── Folder ─────────────────────────────────────────────────────────────── */
.rh-folder[b-196q3qcimz] {
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    margin-bottom: var(--mk-s3);
    overflow: hidden;
}

.rh-folder-head[b-196q3qcimz] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s4);
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--mk-font);
}

.rh-folder-head:hover[b-196q3qcimz] {
    background: var(--mk-bg-subtle);
}

.rh-chevron[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
    width: 12px;
}

.rh-folder-icon[b-196q3qcimz] {
    font-size: var(--mk-t-section-sm);
    color: var(--mk-primary-ink);
}

.rh-folder-title[b-196q3qcimz] {
    flex: 1;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
}

.rh-tag[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    background: var(--mk-bg-subtle);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-pill);
    padding: 2px var(--mk-s2);
}

.rh-count[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-muted);
    min-width: 1.25rem;
    text-align: center;
}

/* ── Report entries ────────────────────────────────────────────────────── */
.rh-list[b-196q3qcimz] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mk-border);
}

.rh-item[b-196q3qcimz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s3) var(--mk-s4);
    text-decoration: none;
    border-top: 1px solid var(--mk-bg-app);
}

.rh-list li:first-child .rh-item[b-196q3qcimz] {
    border-top: 0;
}

.rh-item:hover[b-196q3qcimz] {
    background: var(--mk-primary-lt);
}

.rh-item-icon[b-196q3qcimz] {
    font-size: var(--mk-t-card-sm);
    color: var(--mk-text-2);
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.rh-item-body[b-196q3qcimz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rh-item-title[b-196q3qcimz] {
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-strong);
}

.rh-item-desc[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

.rh-item-go[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
    flex-shrink: 0;
}
/* /Components/Pages/Website/DeleteAccount.razor.rz.scp.css */
.deletion-page[b-bfghwbkqh6] { max-width: 860px; margin: 0 auto; padding: 64px 24px; color: #1e293b; }
.eyebrow[b-bfghwbkqh6] { color: var(--brand); font-weight: 700; }
h1[b-bfghwbkqh6] { font-size: clamp(28px, 5vw, 44px); line-height: 1.2; margin: 12px 0 20px; }
h2[b-bfghwbkqh6] { font-size: 22px; margin-bottom: 14px; }
p[b-bfghwbkqh6], li[b-bfghwbkqh6] { line-height: 1.8; margin-bottom: 12px; }
section[b-bfghwbkqh6] { margin-top: 36px; }
ol[b-bfghwbkqh6] { padding-left: 24px; }
a[b-bfghwbkqh6] { color: var(--brand); overflow-wrap: anywhere; text-decoration: underline; }
.request-card[b-bfghwbkqh6] { padding: 24px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; }
.request-button[b-bfghwbkqh6] { display: inline-block; background: var(--brand); color: white; padding: 12px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; margin: 8px 0 16px; }
a:focus-visible[b-bfghwbkqh6] { outline: 3px solid #0f172a; outline-offset: 4px; }
.hint[b-bfghwbkqh6] { font-size: 14px; color: #475569; }
@media (max-width: 540px) { .deletion-page[b-bfghwbkqh6] { padding: 40px 16px; } .request-card[b-bfghwbkqh6] { padding: 18px; } }
/* /Components/Pages/Website/PricingPlans.razor.rz.scp.css */
/* One pricing card per audience, with the billing period switched inside it.

   Colours are the marketing site's theme-fixed --mk-site-* tokens (design-tokens.css §15),
   not the app's theme-reactive --mk-* surfaces: the site is deliberately light, and a card
   wired to --mk-success-fg once rendered "Save 16%" at ~1.6:1 when a signed-in visitor's
   .dark class flipped the ink but not the white card beneath it. */

.pp-toggle-wrap[b-xx0ysq92yj] { text-align: center; margin-top: 36px; }

.pp-toggle[b-xx0ysq92yj] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--mk-site-r-pill);
    background: var(--mk-site-paper-alt);
    border: 1px solid var(--mk-site-border);
}

.pp-toggle-btn[b-xx0ysq92yj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0 22px;
    border-radius: var(--mk-site-r-pill);
    font-family: var(--mk-site-font);
    font-size: var(--mk-site-small);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-site-muted);
    transition: background var(--mk-site-m-fast) ease, color var(--mk-site-m-fast) ease;
}

.pp-toggle-btn:hover[b-xx0ysq92yj] { color: var(--mk-site-ink); }

.pp-toggle-btn.is-on[b-xx0ysq92yj] {
    background: var(--mk-site-ink);
    color: var(--mk-site-on-ink);
}

.pp-card[b-xx0ysq92yj] {
    max-width: 520px;
    margin: 32px auto 0;
    background: var(--mk-site-surface);
    border: 1.5px solid var(--mk-site-ink);
    border-radius: var(--mk-site-r-lg);
    padding: 36px 32px 32px;
    box-shadow: var(--mk-site-sh-md);
}

.pp-name[b-xx0ysq92yj] {
    font-size: var(--mk-site-h4);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-site-ink);
}

.pp-track-label[b-xx0ysq92yj] {
    margin-top: 4px;
    font-size: var(--mk-site-small);
    color: var(--mk-site-muted);
}

.pp-dur[b-xx0ysq92yj] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    margin: 24px 0 26px;
    padding: 4px;
    border-radius: var(--mk-site-r-btn);
    background: var(--mk-site-paper-alt);
    border: 1px solid var(--mk-site-border);
}

.pp-dur-btn[b-xx0ysq92yj] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--mk-site-r-sm);
    background: transparent;
    cursor: pointer;
    font-family: var(--mk-site-font);
    font-size: var(--mk-site-small);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-site-muted);
    transition: background var(--mk-site-m-fast) ease, color var(--mk-site-m-fast) ease, box-shadow var(--mk-site-m-fast) ease;
}

.pp-dur-btn:hover[b-xx0ysq92yj] { color: var(--mk-site-ink); }

.pp-dur-btn.is-on[b-xx0ysq92yj] {
    background: var(--mk-site-surface);
    color: var(--mk-site-ink);
    box-shadow: var(--mk-site-sh-sm);
}

.pp-best[b-xx0ysq92yj] {
    font-size: 0.6875rem;
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-site-success);
}

.pp-amount[b-xx0ysq92yj] {
    font-size: 3rem;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-site-ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pp-amount span[b-xx0ysq92yj] {
    font-size: var(--mk-site-body);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-site-muted);
    letter-spacing: 0;
}

.pp-sub[b-xx0ysq92yj] { font-size: var(--mk-site-small); margin: 10px 0 24px; min-height: 20px; color: var(--mk-site-muted); }

.pp-save[b-xx0ysq92yj] {
    color: var(--mk-site-success);
    font-weight: var(--mk-fw-semibold);
}

.pp-list[b-xx0ysq92yj] {
    list-style: none;
    margin: 0 0 28px;
    padding: 20px 0 0;
    border-top: 1px dashed var(--mk-site-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.pp-list li[b-xx0ysq92yj] {
    font-size: var(--mk-site-small);
    color: var(--mk-site-text);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.pp-list li .bi[b-xx0ysq92yj] {
    color: var(--mk-site-success);
    flex-shrink: 0;
    margin-top: 1px;
}

.pp-cta[b-xx0ysq92yj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mk-site-btn-h);
    border-radius: var(--mk-site-r-btn);
    background: var(--mk-site-cta);
    color: var(--mk-site-on-ink);
    font-weight: var(--mk-fw-semibold);
    font-size: var(--mk-site-body);
    text-decoration: none;
    transition: background var(--mk-site-m-fast) ease;
}

.pp-cta:hover[b-xx0ysq92yj] { background: var(--mk-site-cta-hover); color: var(--mk-site-on-ink); }

.pp-toggle-btn:focus-visible[b-xx0ysq92yj],
.pp-dur-btn:focus-visible[b-xx0ysq92yj],
.pp-cta:focus-visible[b-xx0ysq92yj] {
    outline: none;
    box-shadow: var(--mk-site-cta-ring);
}

.pp-foot[b-xx0ysq92yj] {
    text-align: center;
    margin-top: 20px;
    font-size: var(--mk-site-small);
    color: var(--mk-site-muted);
}

.pp-loading[b-xx0ysq92yj], .pp-error[b-xx0ysq92yj] {
    text-align: center;
    margin-top: 36px;
    font-size: var(--mk-site-small);
    color: var(--mk-site-muted);
}

.pp-error[b-xx0ysq92yj] { color: var(--mk-site-red); }

/* Breakpoints are 600 / 1025 / 1441 with .98 maxima — literals because CSS forbids
   custom properties inside @media. */
@media (max-width: 599.98px) {
    .pp-toggle[b-xx0ysq92yj] { display: flex; width: 100%; }
    .pp-toggle-btn[b-xx0ysq92yj] { flex: 1; justify-content: center; padding: 0 10px; }
    .pp-card[b-xx0ysq92yj] { padding: 28px 20px 22px; }
    .pp-amount[b-xx0ysq92yj] { font-size: 2.5rem; }
    .pp-list[b-xx0ysq92yj] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Welcome.razor.rz.scp.css */
/* Welcome — tokens only. Sits on the hero gradient, like the onboarding flow it leads into,
   so signing up reads as one continuous surface rather than three different products. */

.wp[b-fuq4qz07y1] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mk-hero-bg);
    color: var(--mk-hero-fg);
    font-family: var(--mk-font);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mk-s6) var(--mk-s4);
}

.wp-inner[b-fuq4qz07y1] {
    width: 100%;
    max-width: 460px;
}

/* ---------- Brand ---------- */

.wp-brand[b-fuq4qz07y1] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s8);
}

.wp-brand__mark[b-fuq4qz07y1] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
}

.wp-brand__name[b-fuq4qz07y1] {
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
}

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

/* ---------- Headline ---------- */

.wp-title[b-fuq4qz07y1] {
    margin: 0 0 var(--mk-s4);
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-extrabold);
    line-height: 1.15;
    letter-spacing: var(--mk-ls-tight);
}

.wp-title__accent[b-fuq4qz07y1] {
    color: var(--mk-primary);
}

.wp-sub[b-fuq4qz07y1] {
    margin: 0 0 var(--mk-s2);
    font-size: var(--mk-t-card-sm);
    line-height: 1.5;
    color: var(--mk-hero-fg-2);
}

.wp-sub--hi[b-fuq4qz07y1] {
    margin-bottom: var(--mk-s6);
    font-size: var(--mk-t-body);
}

/* ---------- Value props ---------- */

.wp-points[b-fuq4qz07y1] {
    list-style: none;
    margin: 0 0 var(--mk-s8);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
}

.wp-point[b-fuq4qz07y1] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    font-size: var(--mk-t-body);
    color: var(--mk-hero-fg);
}

.wp-point__icon[b-fuq4qz07y1] {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-hero-fill);
    border: 1px solid var(--mk-hero-line);
    font-size: var(--mk-t-secondary);
}

/* ---------- Actions ---------- */

.wp-actions[b-fuq4qz07y1] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s6);
}

.wp-btn[b-fuq4qz07y1] {
    display: block;
    padding: var(--mk-s4);
    border-radius: var(--mk-r-md);
    text-align: center;
    text-decoration: none;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    transition: opacity var(--mk-t-fast), border-color var(--mk-t-fast);
}

.wp-btn--primary[b-fuq4qz07y1] {
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
}

.wp-btn--primary:hover[b-fuq4qz07y1] {
    opacity: .9;
    color: var(--mk-text-oncolor);
}

.wp-btn--ghost[b-fuq4qz07y1] {
    background: transparent;
    border: 1.5px solid var(--mk-hero-line);
    color: var(--mk-hero-fg);
}

.wp-btn--ghost:hover[b-fuq4qz07y1] {
    border-color: var(--mk-primary);
    color: var(--mk-hero-fg);
}

/* ---------- Language ---------- */

.wp-lang[b-fuq4qz07y1] {
    display: block;
    text-align: center;
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg-2);
    text-decoration: none;
}

.wp-lang:hover[b-fuq4qz07y1] {
    color: var(--mk-primary);
}

@media (max-width: 599.98px) {

    .wp[b-fuq4qz07y1] {
        padding: var(--mk-s5) var(--mk-s4);
        align-items: flex-start;
    }

    .wp-brand[b-fuq4qz07y1] {
        margin-bottom: var(--mk-s6);
    }

    .wp-title[b-fuq4qz07y1] {
        font-size: var(--mk-t-section);
    }
}

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

    .wp-btn[b-fuq4qz07y1] {
        transition: none;
    }
}
/* /Components/Shared/AuthBrandPanel.razor.rz.scp.css */
/* Brand panel styling, moved here wholesale from Login.razor's <style> block so the
   panel is self-contained: markup, copy model and looks travel together.

   Scoped CSS is safe for all of it — every element below is plain markup in this
   component, so each one receives the b-<hash> scope attribute. (An element built through
   RenderTreeBuilder would not, and would be unreachable from this file.) */

.login-brand[b-okdsm8zf3g] {
    flex: 1;
    position: sticky;
    top: 0;
    align-self: flex-start;
    isolation: isolate;
    background: var(--mk-hero-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    height: 100dvh;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ambient depth — a warm brand bloom top-left, a soft cool fill bottom-right,
   both well beneath the copy so the panel reads lit rather than flat. */
.login-brand[b-okdsm8zf3g]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(680px 460px at 4% -6%, color-mix(in srgb, var(--mk-primary) 26%, transparent), transparent 60%),
        radial-gradient(520px 520px at 106% 110%, var(--mk-hero-fill), transparent 55%);
    pointer-events: none;
}

/* Brand-orange hairline down the seam between the panels. */
.login-brand[b-okdsm8zf3g]::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--mk-primary), transparent 60%);
    pointer-events: none;
}

.login-brand-inner[b-okdsm8zf3g] { position: relative; z-index: 1; max-width: 460px; }

/* ── Logo lockup ─────────────────────────────────────────────── */
.lb-logo[b-okdsm8zf3g] {
    display: flex; align-items: center; gap: 12px;
    font-size: var(--mk-t-page-sm); font-weight: var(--mk-fw-extrabold); color: var(--mk-hero-fg);
    letter-spacing: -.4px; margin-bottom: 44px;
    text-decoration: none; width: fit-content;
    transition: opacity var(--mk-dur-fast) var(--mk-ease);
}
.lb-logo:hover[b-okdsm8zf3g] { opacity: .85; color: var(--mk-hero-fg); }
.lb-logo-icon[b-okdsm8zf3g] {
    width: 46px; height: 46px; flex-shrink: 0;
    filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--mk-primary) 45%, transparent));
}
/* Was ".lb-blue", which had not been blue since the brand went orange. */
/* --mk-orange-ink, the same token WebsiteLayout uses for .s-logo-k. The mark is
   brand identity, so it does NOT follow the auth theme's blue. */
.lb-brand-accent[b-okdsm8zf3g] { color: var(--mk-orange-ink); }

/* ── Copy ────────────────────────────────────────────────────── */
.lb-eyebrow[b-okdsm8zf3g] {
    display: block;
    font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-bold); letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--mk-primary);
    margin-bottom: 14px;
}
.lb-headline[b-okdsm8zf3g] {
    font-size: clamp(24px, 2.3vw, 36px);
    font-weight: var(--mk-fw-extrabold); color: var(--mk-hero-fg);
    letter-spacing: -.6px; line-height: 1.18;
    margin-bottom: 16px;
}
.lb-sub[b-okdsm8zf3g] {
    font-size: var(--mk-t-card-sm); color: var(--mk-hero-fg-2); line-height: 1.7;
    margin-bottom: 32px; max-width: 400px;
}

/* ── Feature bullets ─────────────────────────────────────────── */
.lb-features[b-okdsm8zf3g] {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px;
}
.lb-feat[b-okdsm8zf3g] {
    display: flex; align-items: center; gap: 12px;
    font-size: var(--mk-t-body); line-height: 1.5;
    color: color-mix(in srgb, var(--mk-hero-fg) 88%, transparent);
}
.lb-check[b-okdsm8zf3g] {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: color-mix(in srgb, var(--mk-fin-positive-on-hero) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--mk-fin-positive-on-hero) 45%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold); color: var(--mk-fin-positive-on-hero);
}

/* ── Stats strip ─────────────────────────────────────────────── */
.lb-stats[b-okdsm8zf3g] {
    display: flex; margin-bottom: 24px;
    background: var(--mk-hero-fill); border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-lg); overflow: hidden;
}
.lb-stat[b-okdsm8zf3g] {
    flex: 1; text-align: center;
    padding: 15px 12px;
    border-right: 1px solid var(--mk-hero-line);
}
.lb-stat:last-child[b-okdsm8zf3g] { border-right: none; }
.lb-stat-num[b-okdsm8zf3g] { font-size: var(--mk-t-section); font-weight: var(--mk-fw-extrabold); color: var(--mk-hero-fg); line-height: 1; }
.lb-stat-lbl[b-okdsm8zf3g] { font-size: var(--mk-t-micro); color: var(--mk-hero-fg-2); margin-top: 5px; letter-spacing: .3px; }

/* ── Responsive: width tiers ─────────────────────────────────── */
/* Laptop */
@media (max-width: 1300px) {
    .login-brand[b-okdsm8zf3g] { padding: 40px; }
    .lb-headline[b-okdsm8zf3g] { font-size: clamp(22px, 2vw, 30px); }
}
/* Tablet — bullets are the first thing to go; the headline still carries the pitch. */
@media (max-width: 1024px) {
    .lb-features[b-okdsm8zf3g] { display: none; }
    .lb-sub[b-okdsm8zf3g] { font-size: var(--mk-t-body); margin-bottom: 24px; }
}
/* Phone — the panel gives way entirely to the form. */
@media (max-width: 768px) {
    .login-brand[b-okdsm8zf3g] { display: none; }
}
/* Ultrawide — don't let the brand copy stretch thin across the panel. */
@media (min-width: 1600px) {
    .login-brand-inner[b-okdsm8zf3g] { max-width: 520px; margin: 0 auto; }
}

/* ── Responsive: height tiers ────────────────────────────────── */
/* A laptop with browser chrome eating vertical space is width-wise a "laptop" but
   cannot fit the full panel. Trim by height rather than letting content overflow
   past the sticky viewport. */
@media (min-width: 769px) and (max-height: 640px) {
    .lb-stats[b-okdsm8zf3g] { display: none; }
}
@media (min-width: 769px) and (max-height: 520px) {
    .lb-features[b-okdsm8zf3g] { display: none; }
    .login-brand[b-okdsm8zf3g] { padding-top: 24px; padding-bottom: 24px; }
}
/* /Components/Shared/BusinessSettingsPanel.razor.rz.scp.css */
/* Business settings — one grouped list of switch rows per settings section.

   Every colour, size, radius and font here is a --mk-* token. The only literals are the @media
   widths (CSS forbids custom properties inside a media query) and one 1px hairline. */

.bs-panel[b-va8m1hnhl1] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-5);
}

.bs-loading[b-va8m1hnhl1] {
    display: flex;
    justify-content: center;
    padding: var(--mk-space-8);
}

/* ── Group ───────────────────────────────────────────────────────────────── */

.bs-group[b-va8m1hnhl1] {
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    overflow: hidden;
}

.bs-group-head[b-va8m1hnhl1] {
    padding: var(--mk-space-3) var(--mk-space-4);
    background: var(--mk-bg-subtle);
    border-bottom: 1px solid var(--mk-border);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.bs-rows[b-va8m1hnhl1] {
    display: flex;
    flex-direction: column;
}

/* ── Row ─────────────────────────────────────────────────────────────────── */

.bs-row[b-va8m1hnhl1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-space-4);
    padding: var(--mk-space-3) var(--mk-space-4);
    border-bottom: 1px solid var(--mk-border);
}

.bs-row:last-child[b-va8m1hnhl1] {
    border-bottom: none;
}

/* A row whose parent switch is off stays readable but visibly inert — the control is disabled
   too, so this is a cue rather than the enforcement. */
.bs-row.is-disabled .bs-row-text[b-va8m1hnhl1] {
    opacity: .5;
}

.bs-row-text[b-va8m1hnhl1] {
    /* min-width:0 lets a long hint wrap instead of forcing the row wider than the card. */
    flex: 1;
    min-width: 0;
}

.bs-row-title[b-va8m1hnhl1] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-strong);
}

.bs-row-hint[b-va8m1hnhl1] {
    margin-top: 2px;
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-2);
}

.bs-row-control[b-va8m1hnhl1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ── Toggle ──────────────────────────────────────────────────────────────── */

.bs-toggle[b-va8m1hnhl1] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.bs-toggle input[b-va8m1hnhl1] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bs-toggle-track[b-va8m1hnhl1] {
    position: absolute;
    inset: 0;
    border-radius: var(--mk-radius-pill);
    background: var(--mk-border-strong);
    transition: background .16s ease;
}

.bs-toggle-track[b-va8m1hnhl1]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: var(--mk-bg-surface);
    box-shadow: var(--mk-shadow-sm);
    transition: transform .16s ease;
}

.bs-toggle input:checked + .bs-toggle-track[b-va8m1hnhl1] {
    background: var(--mk-primary);
}

.bs-toggle input:checked + .bs-toggle-track[b-va8m1hnhl1]::before {
    transform: translateX(18px);
}

.bs-toggle input:focus-visible + .bs-toggle-track[b-va8m1hnhl1] {
    outline: 2px solid var(--mk-primary-ink);
    outline-offset: 2px;
}

.bs-toggle input:disabled + .bs-toggle-track[b-va8m1hnhl1] {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Select / text ───────────────────────────────────────────────────────── */

.bs-select[b-va8m1hnhl1],
.bs-text[b-va8m1hnhl1] {
    min-width: 180px;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.bs-select:focus[b-va8m1hnhl1],
.bs-text:focus[b-va8m1hnhl1] {
    border-color: var(--mk-primary);
}

.bs-select:disabled[b-va8m1hnhl1],
.bs-text:disabled[b-va8m1hnhl1] {
    background: var(--mk-bg-app);
    color: var(--mk-text-muted);
    cursor: not-allowed;
}

/* ── Number stepper ──────────────────────────────────────────────────────── */

.bs-stepper[b-va8m1hnhl1] {
    display: flex;
    align-items: center;
    gap: var(--mk-space-2);
}

.bs-step[b-va8m1hnhl1] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary);
    line-height: 1;
    cursor: pointer;
}

.bs-step:hover:not(:disabled)[b-va8m1hnhl1] {
    background: var(--mk-bg-subtle);
    border-color: var(--mk-border-strong);
}

.bs-step:disabled[b-va8m1hnhl1] {
    opacity: .4;
    cursor: not-allowed;
}

.bs-step-value[b-va8m1hnhl1] {
    min-width: 24px;
    text-align: center;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

/* ── States ──────────────────────────────────────────────────────────────── */

.bs-empty[b-va8m1hnhl1] {
    padding: var(--mk-space-8);
    text-align: center;
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

.bs-error[b-va8m1hnhl1] {
    padding: var(--mk-space-3) var(--mk-space-4);
    border: 1px solid var(--mk-fin-negative-br);
    border-radius: var(--mk-radius-md);
    background: var(--mk-fin-negative-lt);
    color: var(--mk-fin-negative-fg);
    font-size: var(--mk-t-secondary-sm);
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */
/* Below 600px the control drops under the label: a 180px select beside a wrapping two-line hint
   leaves the label about eight characters wide. */

@media (max-width: 599.98px) {
    .bs-row[b-va8m1hnhl1] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mk-space-2);
    }

    .bs-row-control[b-va8m1hnhl1] {
        justify-content: flex-start;
    }

    .bs-select[b-va8m1hnhl1],
    .bs-text[b-va8m1hnhl1] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Shared/MkDataGrid.razor.rz.scp.css */
/* MkDataGrid — every value is a --mk-* token: see docs/css-design-system.md.
   Dark mode needs no block of its own here: the tokens below all flip with `.dark`. */

.mk-dg[b-7bv9iwfggo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.mk-dg-toolbar[b-7bv9iwfggo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
}

/* The grid's own search box. Hand-drawn rather than a StackInput: the package input is
   `w-full` and would need the same wrapper class every host currently supplies for its
   own controls, and the magnifier here is an inline SVG so it does not depend on a
   Tailwind utility the app's prebuilt bundle may not contain. */
.mk-dg-search[b-7bv9iwfggo] {
    position: relative;
    display: flex; align-items: center;
    flex: 1 1 14rem;
    max-width: 22rem;
    min-width: 0;
}

.mk-dg-search svg[b-7bv9iwfggo] {
    position: absolute; left: var(--mk-s2);
    width: var(--mk-s4); height: var(--mk-s4);
    color: var(--mk-text-muted);
    pointer-events: none;
}

.mk-dg-search input[b-7bv9iwfggo] {
    width: 100%;
    height: var(--mk-s6);
    padding: 0 var(--mk-s2) 0 var(--mk-s6);
    color: var(--mk-text);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    font-size: var(--mk-t-body);
}

.mk-dg-search input[b-7bv9iwfggo]::placeholder { color: var(--mk-text-muted); }
.mk-dg-search input:focus[b-7bv9iwfggo] { outline: none; border-color: var(--mk-primary); box-shadow: var(--mk-focus-ring); }

/* Toolbar controls come from the page through ToolbarContent, so they carry the *page's*
   scope, not this component's — ::deep is the only way to reach them from here.
   MyStackBlazor sizes its input and select at `h-10` (40px) and BarcodeScanInput matches
   them, which makes the toolbar taller than three of the rows underneath it. `!important`
   answers Bootstrap's own `!important` on `.py-2`; without it the box shrinks to 32px but
   keeps 8px of padding top and bottom and clips its own text. */
.mk-dg-compact .mk-dg-toolbar[b-7bv9iwfggo]  .mk-grid-search input,
.mk-dg-compact .mk-dg-toolbar[b-7bv9iwfggo]  .mk-grid-filter select,
.mk-dg-compact .mk-dg-toolbar[b-7bv9iwfggo]  .mk-scan-input {
    height: var(--mk-s6);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: var(--mk-t-body);
    line-height: normal;
}

/* ── Table ──────────────────────────────────────────────────────────────── */

/* Normally the table scrolls sideways rather than wrapping its cells. While a filter
   menu is open that has to become `visible`, or the menu is clipped by this very box —
   it is a child of the <th> it belongs to, so there is nowhere else to hang it without
   measuring the header in JS. */
.mk-dg-scroll[b-7bv9iwfggo] {
    overflow-x: auto;
}

.mk-dg-scroll-open[b-7bv9iwfggo] {
    overflow: visible;
}

.mk-dg-table[b-7bv9iwfggo] {
    width: 100%;
    border-collapse: collapse;
    color: var(--mk-text);
    font-size: var(--mk-t-body);
}

.mk-dg-compact .mk-dg-table[b-7bv9iwfggo] {
    font-size: var(--mk-t-secondary);
}

.mk-dg-table thead th[b-7bv9iwfggo] {
    position: relative;
    background: var(--mk-bg-subtle);
    border-bottom: 1px solid var(--mk-border);
    padding: var(--mk-s2) var(--mk-s3);
    text-align: left;
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    white-space: nowrap;
    vertical-align: middle;
}

.mk-dg-compact .mk-dg-table thead th[b-7bv9iwfggo] {
    padding: var(--mk-s1) var(--mk-s2);
}

.mk-dg-table tbody td[b-7bv9iwfggo] {
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    white-space: nowrap;
    vertical-align: middle;
}

.mk-dg-compact .mk-dg-table tbody td[b-7bv9iwfggo] {
    padding: var(--mk-s1) var(--mk-s2);
}

.mk-dg-table tbody tr:last-child td[b-7bv9iwfggo] {
    border-bottom: 0;
}

.mk-dg-table tbody tr:hover td[b-7bv9iwfggo] {
    background: var(--mk-bg-subtle);
}

.mk-dg-center[b-7bv9iwfggo] { text-align: center; }
.mk-dg-end[b-7bv9iwfggo] { text-align: right; }

.mk-dg-empty td[b-7bv9iwfggo] {
    padding: var(--mk-s5) var(--mk-s3);
    text-align: center;
    color: var(--mk-text-muted);
    white-space: normal;
}

/* Row actions come in through a Template, so they belong to the *page's* CSS scope, not
   this component's — ::deep is the only way to reach them from here. */
.mk-dg-compact[b-7bv9iwfggo]  td .btn-sm {
    padding: var(--mk-s1) var(--mk-s2);
    font-size: var(--mk-t-secondary-sm);
    line-height: 1.35;
}

/* ── Header controls ────────────────────────────────────────────────────── */

.mk-dg-head[b-7bv9iwfggo] {
    display: flex;
    align-items: center;
    gap: var(--mk-s1);
    justify-content: space-between;
}

.mk-dg-sort[b-7bv9iwfggo],
.mk-dg-funnel[b-7bv9iwfggo] {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.mk-dg-sort[b-7bv9iwfggo] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
}

.mk-dg-sort:hover[b-7bv9iwfggo] {
    color: var(--mk-text-strong);
}

.mk-dg-caret[b-7bv9iwfggo] {
    color: var(--mk-text-muted);
    font-size: var(--mk-t-micro);
}

.mk-dg-caret.is-on[b-7bv9iwfggo] {
    color: var(--mk-primary-ink);
}

.mk-dg-funnel[b-7bv9iwfggo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--mk-s4);
    height: var(--mk-s4);
    border-radius: var(--mk-r-sm);
    color: var(--mk-text-muted);
}

.mk-dg-funnel svg[b-7bv9iwfggo] {
    width: 100%;
    height: 100%;
}

.mk-dg-funnel:hover[b-7bv9iwfggo] {
    color: var(--mk-text-strong);
    background: var(--mk-bg-surface);
}

/* An applied filter is filled, not just tinted: on a header this small a colour change
   alone is easy to miss, and "why is this list short?" is the question it answers. */
.mk-dg-funnel.is-on[b-7bv9iwfggo] {
    color: var(--mk-primary-ink);
}

.mk-dg-funnel.is-on svg path[b-7bv9iwfggo] {
    fill: currentColor;
}

/* ── Filter menu ────────────────────────────────────────────────────────── */

.mk-dg-menu[b-7bv9iwfggo] {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    margin-top: var(--mk-s1);
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    width: 15rem;
    padding: var(--mk-s3);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    box-shadow: var(--mk-shadow-lg);
    white-space: normal;
}

/* The last columns' menus would otherwise hang off the right edge of the card. */
.mk-dg-table thead th:nth-last-child(-n + 3) .mk-dg-menu[b-7bv9iwfggo] {
    left: auto;
    right: 0;
}

.mk-dg-menu-op[b-7bv9iwfggo],
.mk-dg-menu-value[b-7bv9iwfggo] {
    width: 100%;
    height: var(--mk-s6);
    padding: 0 var(--mk-s2);
    font-size: var(--mk-t-body);
    color: var(--mk-text);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.mk-dg-menu-op:focus[b-7bv9iwfggo],
.mk-dg-menu-value:focus[b-7bv9iwfggo] {
    outline: none;
    border-color: var(--mk-primary);
    box-shadow: var(--mk-focus-ring);
}

.mk-dg-menu-value:disabled[b-7bv9iwfggo] {
    background: var(--mk-bg-subtle);
    color: var(--mk-text-muted);
}

.mk-dg-menu-actions[b-7bv9iwfggo] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
}

/* Clear is the neutral of the pair, and a *filled* grey one cannot be: --mk-text-2 is a dark
   slate in light mode but a pale sand in dark, so white-on-it fails contrast on one theme
   whichever way round it is set. A bordered surface button reads correctly in both. */
.mk-dg-btn[b-7bv9iwfggo] {
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
    background: var(--mk-bg-subtle);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
    cursor: pointer;
}

.mk-dg-btn-primary[b-7bv9iwfggo] {
    color: var(--mk-text-oncolor);
    background: var(--mk-primary);
    border-color: var(--mk-primary);
}

.mk-dg-btn:hover[b-7bv9iwfggo] {
    filter: brightness(1.06);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.mk-dg-footer[b-7bv9iwfggo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border-top: 1px solid var(--mk-border);
}

.mk-dg-footer-left[b-7bv9iwfggo] {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--mk-s2) var(--mk-s4);
}

.mk-dg-count[b-7bv9iwfggo] {
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary);
}

.mk-dg-size[b-7bv9iwfggo] {
    display: inline-flex; align-items: center; gap: var(--mk-s2);
    color: var(--mk-text-muted);
    font-size: var(--mk-t-secondary);
}

.mk-dg-size select[b-7bv9iwfggo] {
    height: var(--mk-s6);
    padding: 0 var(--mk-s2);
    color: var(--mk-text);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    font-size: var(--mk-t-secondary);
    cursor: pointer;
}

.mk-dg-size select:focus-visible[b-7bv9iwfggo] { outline: none; box-shadow: var(--mk-focus-ring); }

.mk-dg-pager[b-7bv9iwfggo] {
    display: flex;
    align-items: center;
    gap: var(--mk-s1);
}

.mk-dg-page[b-7bv9iwfggo] {
    min-width: var(--mk-s6);
    height: var(--mk-s6);
    padding: 0 var(--mk-s2);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    cursor: pointer;
}

.mk-dg-page:hover:not(:disabled)[b-7bv9iwfggo] {
    color: var(--mk-text-strong);
    border-color: var(--mk-border-strong);
}

.mk-dg-page:disabled[b-7bv9iwfggo] {
    color: var(--mk-text-muted);
    cursor: default;
    opacity: .55;
}

.mk-dg-page.is-current[b-7bv9iwfggo] {
    color: var(--mk-text-oncolor);
    background: var(--mk-primary);
    border-color: var(--mk-primary);
    font-weight: var(--mk-fw-semibold);
}

.mk-dg-gap[b-7bv9iwfggo] {
    padding: 0 var(--mk-s1);
    color: var(--mk-text-muted);
}

/* Small screens: the caption and the pager each get a line rather than fighting for one. */
@media (max-width: 599.98px) {
    .mk-dg-footer[b-7bv9iwfggo] {
        justify-content: center;
    }
}

/* ── Pinned last column ─────────────────────────────────────────────────── */

/* Needs an opaque background of its own, or the scrolling cells show through it. The
   hover rule is repeated here for the same reason: `tr:hover td` would be painted under
   this cell's own background, not over it. */
.mk-dg-sticky-last .mk-dg-table thead th:last-child[b-7bv9iwfggo],
.mk-dg-sticky-last .mk-dg-table tbody td:last-child[b-7bv9iwfggo] {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: -1px 0 0 var(--mk-border);
}

.mk-dg-sticky-last .mk-dg-table thead th:last-child[b-7bv9iwfggo] {
    background: var(--mk-bg-subtle);
    z-index: 2;
}

.mk-dg-sticky-last .mk-dg-table tbody td:last-child[b-7bv9iwfggo] {
    background: var(--mk-bg-surface);
}

.mk-dg-sticky-last .mk-dg-table tbody tr:hover td:last-child[b-7bv9iwfggo] {
    background: var(--mk-bg-subtle);
}
/* /Components/Shared/PfAppTour.razor.rz.scp.css */
/* Guided tour overlay. Top of the ladder below a modal (design-tokens.css §3b): it
   spotlights the header controls, so it has to out-rank their own dropdowns and the
   toasts — a tour card hidden under a toast is a tour nobody can finish. */
.tour[b-x3l4xw52gj] {
    position: fixed;
    inset: 0;
    z-index: var(--mk-z-tour);
    font-family: var(--mk-font);
}

.tour__blocker[b-x3l4xw52gj] {
    position: absolute;
    inset: 0;
}

.tour__dim[b-x3l4xw52gj] {
    position: absolute;
    inset: 0;
    background: var(--mk-bg-scrim);
}

/* The hole in the scrim: one box whose enormous spread shadow *is* the scrim, so the
   target shows through at full brightness with no clip-path or SVG mask. */
.tour__spot[b-x3l4xw52gj] {
    position: absolute;
    border-radius: var(--mk-r-md);
    box-shadow: 0 0 0 200vmax var(--mk-bg-scrim);
    outline: 2px solid var(--mk-primary);
    outline-offset: 2px;
    pointer-events: none;
    transition: top var(--mk-dur-slow) var(--mk-ease),
                left var(--mk-dur-slow) var(--mk-ease),
                width var(--mk-dur-slow) var(--mk-ease),
                height var(--mk-dur-slow) var(--mk-ease);
}

.tour__card[b-x3l4xw52gj] {
    position: absolute;
    width: min(var(--mk-tour-w), calc(100vw - 2 * var(--mk-s4)));
    max-height: calc(100vh - 2 * var(--mk-s4));
    overflow-y: auto;
    padding: var(--mk-s5);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    box-shadow: var(--mk-sh-lg);
}

.tour__card.is-centered[b-x3l4xw52gj] {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tour__card.is-anchored[b-x3l4xw52gj] {
    left: clamp(var(--mk-s4),
                calc(var(--tour-x) - var(--mk-tour-w) / 2),
                calc(100vw - var(--mk-tour-w) - var(--mk-s4)));
}

.tour__meta[b-x3l4xw52gj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
}

.tour__count[b-x3l4xw52gj] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
}

.tour__skip[b-x3l4xw52gj] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
}

.tour__skip:hover[b-x3l4xw52gj] { text-decoration: underline; }

.tour__icon[b-x3l4xw52gj] {
    font-size: var(--mk-t-page-sm);
    line-height: 1;
    margin-bottom: var(--mk-s2);
}

.tour__title[b-x3l4xw52gj] {
    margin: 0 0 var(--mk-s2);
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.tour__body[b-x3l4xw52gj] {
    margin: 0;
    font-size: var(--mk-t-body);
    line-height: 1.55;
    color: var(--mk-text-2);
}

.tour__dots[b-x3l4xw52gj] {
    display: flex;
    gap: var(--mk-s1);
    margin: var(--mk-s4) 0;
}

.tour__dot[b-x3l4xw52gj] {
    width: 6px;
    height: 6px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-border);
    transition: width var(--mk-dur-fast) var(--mk-ease), background var(--mk-dur-fast) var(--mk-ease);
}

.tour__dot.is-on[b-x3l4xw52gj] {
    width: var(--mk-s4);
    background: var(--mk-primary);
}

.tour__actions[b-x3l4xw52gj] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--mk-s2);
}

.tour__btn[b-x3l4xw52gj] {
    height: var(--mk-ctrl-h);
    padding: 0 var(--mk-s4);
    border-radius: var(--mk-r-sm);
    font: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
}

.tour__btn--ghost[b-x3l4xw52gj] {
    background: transparent;
    color: var(--mk-text-strong);
    border: 1px solid var(--mk-border);
}

.tour__btn--primary[b-x3l4xw52gj] {
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
    border: 1px solid var(--mk-primary);
}

.tour__btn:focus-visible[b-x3l4xw52gj],
.tour__skip:focus-visible[b-x3l4xw52gj] {
    outline: 2px solid var(--mk-primary-ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tour__spot[b-x3l4xw52gj],
    .tour__dot[b-x3l4xw52gj] { transition: none; }
}
/* /Components/Shared/PfQuickNav.razor.rz.scp.css */
/* Quick links strip — see PfQuickNav.razor. Four columns on a phone, eight across on a
   desktop, so the whole set sits on one line where there is room for it. */
.pf-qn-wrap[b-6vcu07vzwz] {
    position: relative;
    margin-bottom: var(--rd-gap, var(--mk-s4));
    /* Above the alert toasts, which otherwise cover the open popup. Stays BELOW the top
       bar's own dropdowns (--mk-z-header-menu) — see design-tokens.css §3b. */
    z-index: var(--mk-z-page-pop);
}

.pf-qn[b-6vcu07vzwz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    box-shadow: var(--mk-sh-sm);
    overflow: hidden;
}

.pf-qn-link[b-6vcu07vzwz] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--mk-s2) var(--mk-s2);
    background: none;
    border: 0;
    border-right: 1px solid var(--mk-border);
    border-bottom: 1px solid var(--mk-border);
    font-family: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-primary-ink);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.pf-qn-link:hover[b-6vcu07vzwz] { background: var(--mk-primary-lt); }

/* No rule on the last column or the last row, so the grid reads as one card. */
.pf-qn-link:nth-child(4n)[b-6vcu07vzwz] { border-right: none; }
.pf-qn-link:nth-last-child(-n + 4):nth-child(4n + 1)[b-6vcu07vzwz],
.pf-qn-link:nth-last-child(-n + 3):nth-child(4n + 2)[b-6vcu07vzwz],
.pf-qn-link:nth-last-child(-n + 2):nth-child(4n + 3)[b-6vcu07vzwz],
.pf-qn-link:nth-last-child(1)[b-6vcu07vzwz] { border-bottom: none; }

@media (min-width: 1025px) {
    .pf-qn[b-6vcu07vzwz] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .pf-qn-link:nth-child(4n)[b-6vcu07vzwz] { border-right: 1px solid var(--mk-border); }
    .pf-qn-link:nth-child(8n)[b-6vcu07vzwz], .pf-qn-link:last-child[b-6vcu07vzwz] { border-right: none; }
    .pf-qn-link[b-6vcu07vzwz] { border-bottom: none; }
}

.pf-qn-backdrop[b-6vcu07vzwz] {
    position: fixed;
    inset: 0;
    z-index: var(--mk-z-page-pop);
}

.pf-qn-pop[b-6vcu07vzwz] {
    position: absolute;
    top: calc(100% + var(--mk-s1));
    right: 0;
    z-index: var(--mk-z-page-pop-panel);
    min-width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--mk-s2);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    box-shadow: var(--mk-sh-lg);
}

.pf-qn-item[b-6vcu07vzwz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border-radius: var(--mk-r-sm);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    text-decoration: none;
    white-space: nowrap;
}

.pf-qn-item:hover[b-6vcu07vzwz] { background: var(--mk-primary-lt); color: var(--mk-primary-ink); }
.pf-qn-item-ico[b-6vcu07vzwz] { font-size: var(--mk-t-card-sm); line-height: 1; }
/* /Components/Shared/SupportContactCard.razor.rz.scp.css */
.support-card[b-6qt6f3kqna] {
    display: flex;
    gap: var(--mk-s3);
    align-items: flex-start;
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-left: 3px solid var(--mk-primary);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s4);
    margin: var(--mk-s5) 0;
}

.support-card-icon[b-6qt6f3kqna] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary-lt);
    color: var(--mk-primary-ink);
    font-size: var(--mk-t-card);
}

.support-card-body[b-6qt6f3kqna] { min-width: 0; }

.support-card-title[b-6qt6f3kqna] {
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    margin-bottom: var(--mk-s1);
}

.support-card-text[b-6qt6f3kqna] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
    line-height: 1.6;
    margin-bottom: var(--mk-s2);
}

/* --mk-primary is ~2.9:1 on white; body-size text must use the ink variant. */
.support-card-link[b-6qt6f3kqna] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-primary-ink);
    text-decoration: none;
    word-break: break-all;
}

.support-card-link:hover[b-6qt6f3kqna] { text-decoration: underline; }

.support-card-hours[b-6qt6f3kqna] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
    margin-top: var(--mk-s1);
}
/* /Components/Shared/UpiPaymentQr.razor.rz.scp.css */
/* The QR itself always sits on white. A UPI symbol needs its light quiet zone to decode, so this
   one panel deliberately does not follow the surface into dark mode — the frame around it does. */
.upi-qr-box[b-3yt8su7gll] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mk-space-1);
    padding: var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
    text-align: center;
}

.upi-qr-head[b-3yt8su7gll] {
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.upi-qr-amount[b-3yt8su7gll] {
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.upi-qr-svg[b-3yt8su7gll] {
    /* Literal white, deliberately: a QR code needs a white quiet zone around dark
       modules to stay scannable, so this surface must NOT follow the theme. Same
       reasoning as .login-qr-frame and the --mk-brand-mark-* tokens. */
    background: #fff;
    padding: var(--mk-space-2);
    border-radius: var(--mk-radius-md);
    line-height: 0;
}

.upi-qr-svg[b-3yt8su7gll]  svg { width: 100%; height: 100%; display: block; }

.upi-qr-vpa[b-3yt8su7gll] {
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.upi-qr-vpa span[b-3yt8su7gll] {
    display: block;
    font-weight: var(--mk-fw-regular);
    color: var(--mk-text-2);
    word-break: break-all;
}

.upi-qr-apps[b-3yt8su7gll] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-2);
}

.upi-qr-note[b-3yt8su7gll] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-2);
    line-height: 1.4;
    max-width: 240px;
}

.upi-qr-msg[b-3yt8su7gll] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

.upi-qr-warn[b-3yt8su7gll] {
    color: var(--mk-fin-negative);
    background: var(--mk-fin-negative-lt);
    border-color: var(--mk-fin-negative-br);
}