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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .auth__pane[b-x2uh9mecc2] {
        padding: var(--mk-s6) var(--mk-s4);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Shell metrics — all derived from the --mk-* base ────────────────── */
:root[b-bu3nlo49j2] {
    --sidebar-w:   var(--mk-sidebar);
    --topbar-h:    var(--mk-topbar);
    --bottomnav-h: var(--mk-bottomnav);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.16s;
    --t-med:  0.26s;
    --color-brand:   var(--mk-primary);
    --color-surface: var(--mk-bg-surface);
    --color-bg:      var(--mk-bg-app);
    --color-border:  var(--mk-border);
    --color-muted:   var(--mk-text-2);
    --shadow-topbar:  none;              /* spec §7.2: a border, not a shadow */
    --shadow-sidebar: var(--mk-sh-lg);   /* drawer only, over the page        */
}

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

/* ── Sidebar — mobile/tablet: fixed overlay drawer ───────────────────── */
.sidebar[b-bu3nlo49j2] {
    /* Leave one collapsed-rail width of the page peeking, so the drawer never
       covers the whole viewport on a narrow phone. */
    width: min(var(--sidebar-w), calc(100vw - var(--mk-sidebar-sm)));
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--mk-z-drawer);
    /* White rail with a hairline edge (UI/UX spec v1.0 §7.1). */
    background: var(--mk-bg-nav);
    border-right: 1px solid var(--mk-border);
    transform: translateX(-100%);
    transition: transform var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

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

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

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

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

.hamburger:hover[b-bu3nlo49j2] { background:var(--mk-bg-subtle); }

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

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

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

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

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

.bn-icon[b-bu3nlo49j2] {
    font-size: var(--mk-t-section);
    line-height: 1;
}

/* ── Notification bell ──────────────────────────────────────────────── */
.notif-bell[b-bu3nlo49j2] { position: relative; display: inline-flex; align-items: center; }
.notif-badge[b-bu3nlo49j2] {
    position: absolute; top: -4px; right: -6px;
    background: var(--mk-danger); color: var(--mk-text-oncolor); border-radius: var(--mk-r-pill);
    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-bu3nlo49j2] {
    width: var(--mk-btn-h); height: var(--mk-btn-h);
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--mk-text-2); font-size: var(--mk-t-card); line-height: 1;
    border-radius: var(--mk-r-md); transition: background .15s;
}
.notif-bell-btn:hover[b-bu3nlo49j2] { background:var(--mk-bg-subtle); }

/* ── Avatar button & dropdown ───────────────────────────────────────── */
.avatar-btn[b-bu3nlo49j2] {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-bold); color: var(--mk-text-oncolor); line-height: 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--mk-primary);
    transition: opacity .15s;
}
.avatar-btn:hover[b-bu3nlo49j2] { opacity: .85; }
/* Replaces the package theme toggle; sized to sit alongside the avatar button. */
.topbar-theme-btn[b-bu3nlo49j2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mk-btn-h);
    height: var(--mk-btn-h);
    border: none;
    border-radius: var(--mk-r-md);
    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-bu3nlo49j2] {
    background: var(--mk-bg-hover);
    color:var(--mk-text-strong);
}

.avatar-menu[b-bu3nlo49j2] {
    /* position/top/right are set inline (fixed, root-level) — see MainLayout.razor
       comment for why: top-row's z-index:100 stacking context would otherwise trap
       an absolutely-positioned menu nested inside it below the close-on-outside-click
       backdrop, regardless of this class's own z-index. */
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-lg);
    width: 300px;
    max-width: calc(100vw - var(--mk-s5));
    box-shadow: var(--mk-sh-md);
    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-bu3nlo49j2] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--mk-s1) 0;
}

.avatar-menu a[b-bu3nlo49j2], .avatar-menu button[b-bu3nlo49j2] {
    display: flex; align-items: center; gap: var(--mk-s3);
    width: 100%; min-height: 42px; 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-bu3nlo49j2], .avatar-menu button:hover[b-bu3nlo49j2] { background: var(--mk-bg-subtle); }
.avatar-menu a[b-bu3nlo49j2]  .lc, .avatar-menu button[b-bu3nlo49j2]  .lc { width: 16px; height: 16px; color: var(--mk-text-2); flex-shrink: 0; }
.avatar-menu a:hover[b-bu3nlo49j2]  .lc, .avatar-menu button:hover[b-bu3nlo49j2]  .lc { color: var(--mk-primary); }

/* Identity header — not scrollable, stays pinned above the list. */
.avatar-menu .menu-head[b-bu3nlo49j2] {
    display: flex; align-items: center; gap: var(--mk-s3);
    padding: var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
    flex-shrink: 0;
}
.avatar-menu .menu-head-avatar[b-bu3nlo49j2] {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mk-primary-soft); color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-bold); font-size: var(--mk-t-secondary);
}
.avatar-menu .menu-head-text[b-bu3nlo49j2] { min-width: 0; flex: 1; }
.avatar-menu .menu-head-badge[b-bu3nlo49j2] {
    display: inline-block; margin-top: var(--mk-s1);
    padding: 1px var(--mk-s2); border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle); color: var(--mk-text-2);
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold);
}
.avatar-menu .menu-head-name[b-bu3nlo49j2] {
    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;
}
.avatar-menu .menu-head-sub[b-bu3nlo49j2] {
    font-size: var(--mk-t-secondary-sm); color: var(--mk-text-muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Group heading — same treatment as the sidebar's section labels so the two
   navigation surfaces read as one system. */
.avatar-menu .menu-group[b-bu3nlo49j2] {
    padding: var(--mk-s2) var(--mk-s4) var(--mk-s1);
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold);
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--mk-text-2);
}
.avatar-menu .menu-scroll .menu-divider[b-bu3nlo49j2] { margin: var(--mk-s1) 0; }

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

.avatar-menu .menu-divider[b-bu3nlo49j2] { height: 1px; background: var(--mk-border); margin: 0; }
.avatar-menu .menu-signout[b-bu3nlo49j2] {
    color: var(--mk-danger); flex-shrink: 0;
    font-weight: var(--mk-fw-semibold);
}
.avatar-menu .menu-signout[b-bu3nlo49j2]  .lc { color: var(--mk-danger); }
.avatar-menu .menu-signout:hover[b-bu3nlo49j2] { background: var(--mk-danger-lt); }
.avatar-menu a:focus-visible[b-bu3nlo49j2], .avatar-menu button:focus-visible[b-bu3nlo49j2] { outline: 2px solid var(--mk-primary); outline-offset: -2px; }
.avatar-menu .menu-signout:hover[b-bu3nlo49j2]  .lc { color: var(--mk-danger); }

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

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

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

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

    /* Flush white column with a hairline edge (UI/UX spec v1.0 §7.1) — the floating,
       shadowed rail it replaces read as decoration the spec's "neutral surfaces, no
       heavy shadows" rule rules out. */
    .sidebar[b-bu3nlo49j2] {
        position: sticky;
        top: 0;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
        flex-shrink: 0;
        transform: translateX(0);
        box-shadow: none;
        transition: width var(--t-med) var(--ease),
                    transform var(--t-med) var(--ease),
                    box-shadow var(--t-med) var(--ease);
        overflow: hidden;
    }

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

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

    /* Icon-only collapsed mode */
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nl          { display: none; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nl-group    { display: none; }
    /* Section LABELS stay hidden at the collapsed width — 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-bu3nlo49j2]  hr.nl-group  { display: block; margin: var(--mk-s2) var(--mk-s3); }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-link    { justify-content: center; padding: var(--mk-s2) 0; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .ni          { margin: 0; width: 20px; height: 20px; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .ni-badge    { display: flex; position: absolute; top: 2px; right: 4px; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-link    { position: relative; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer  { padding: var(--mk-s3) 0; align-items: center; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer-id { justify-content: center; }
    .sidebar.desktop-collapsed[b-bu3nlo49j2]  .nav-footer-avatar { width: 30px; height: 30px; font-size: var(--mk-t-micro); }

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

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

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

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

    .top-row[b-bu3nlo49j2] {
        padding-left: var(--mk-s5);   /* 24px desktop page padding, spec §6.1 */
        padding-right: var(--mk-s5);
        flex-shrink: 0;
    }

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

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

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

.hdr-welcome-text[b-bu3nlo49j2] {
    font-size: 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-bu3nlo49j2] {
    font-size: var(--mk-t-micro);
    color:var(--mk-text-muted);
    white-space: nowrap;
}

/* ── Right cluster: Search | Period | + Add | Notifications | Theme | Profile ── */
.hdr-right[b-bu3nlo49j2] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-left: auto;
    min-width: 0;
}

/* ‹ month › — the picker keeps its own look; the steppers sit tight either side of it. */
.hdr-period[b-bu3nlo49j2] { display: flex; align-items: center; gap: 2px; }

/* The one primary action in the bar (guide §4.3). */
.hdr-add[b-bu3nlo49j2] {
    display: inline-flex; align-items: center; gap: var(--mk-s2);
    height: var(--mk-btn-h);
    padding: 0 var(--mk-s3);
    border: none; border-radius: var(--mk-r-md);
    background: var(--mk-primary); color: var(--mk-text-onprimary);
    font: inherit; font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold);
    white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
.hdr-add:hover[b-bu3nlo49j2] { background: var(--mk-primary-hover); }
[b-bu3nlo49j2] .hdr-add-caret { width: 14px; height: 14px; opacity: .85; }

@media (max-width: 1440.98px) {
    .hdr-welcome-date[b-bu3nlo49j2] { display: none; }
}

@media (max-width: 1024.98px) {
    .hdr-filter[b-bu3nlo49j2] { display: none; }
    .hdr-add-label[b-bu3nlo49j2], [b-bu3nlo49j2] .hdr-add-caret { display: none; }
}

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

@media (max-width: 599.98px) {
}

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

   Both shells now have a white rail (UI/UX spec v1.0 §7.1). PF keeps a
   top bar that is glass rather than opaque so scroll position stays legible
   through it. Glassmorphism is deliberately confined to this one element —
   the design system reserves it for sticky navigation only, and using it on
   cards turns a depth cue into decoration.
   ══════════════════════════════════════════════════════════════════════ */

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

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

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

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

.pf-theme .hamburger:hover[b-bu3nlo49j2] {
    background: var(--mk-bg-subtle);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-ysxirfw8d2] {
    min-height: var(--mk-topbar);
    background-color: var(--mk-bg-nav);
    border-bottom: 1px solid var(--mk-border);
}

/* ── 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-ysxirfw8d2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
}

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

.nav-rail-toggle:hover[b-ysxirfw8d2] {
    background: var(--mk-bg-nav-hover);
    border-color: var(--mk-border-strong);
    color: var(--mk-text-strong);
}

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

    /* In the collapsed rail 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, so the button centres in the rail. */
    .nav-brand-row.rail[b-ysxirfw8d2] {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .nav-brand-row.rail .navbar-brand[b-ysxirfw8d2] { display: none; }
}

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

/* ── Icon element ─────────────────────────────────────── */
/* ::deep because the icon is a Lucide <svg> rendered by LcIcon, which carries LcIcon's
   scope attribute rather than this component's. 18px glyph in a 22px slot. */
[b-ysxirfw8d2] .ni {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--mk-text-muted);
    margin: 0 var(--mk-s3) 0 2px;
    transition: color 0.15s;
}

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

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

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

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

    .nav-item[b-ysxirfw8d2]  .nav-link {
        color: var(--mk-text-2);
        background: none;
        border: none;
        /* The 3px active edge (below) is drawn as a left border, so every row
           reserves it to keep labels from shifting when a row becomes active. */
        border-left: 3px solid transparent;
        border-radius: 0 var(--mk-r-md) var(--mk-r-md) 0;
        /* 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 (UI/UX spec v1.0 §7.1): primary-soft fill, orange-600 text, semibold,
   3px orange left edge. Colour is not the only cue — the edge and weight carry it too. */
.nav-item[b-ysxirfw8d2]  a.active {
    background: var(--mk-bg-nav-active);
    border-left-color: var(--mk-primary);
    color: var(--mk-primary-hover);
    font-weight: var(--mk-fw-semibold);
}

.nav-item[b-ysxirfw8d2]  a.active .ni {
    color: var(--mk-primary);
}

.nav-item[b-ysxirfw8d2]  .nav-link:hover {
    background-color: var(--mk-bg-nav-hover);
    color: var(--mk-text-strong);
}

/* Hover must not repaint the active row. */
.nav-item[b-ysxirfw8d2]  a.active:hover {
    background: var(--mk-bg-nav-active);
    color: var(--mk-primary-hover);
}

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

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

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

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

    .nav-scrollable[b-ysxirfw8d2]::-webkit-scrollbar-thumb {
        background: var(--mk-border-strong);
        border-radius: 2px;
    }

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

/* 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) {

    /* 40px rows on the desktop rail, 44px under Comfortable Display (guide §3.3): the
       active row is the same height as its neighbours, only its fill and edge differ. */
    .nav-item[b-ysxirfw8d2]  .nav-link {
        min-height: 40px;
    }
}

/* Subgroup caption inside a long section (guide §3.2). A caption, not a destination:
   plain, small, muted, no hover and no click target. The icon rail hides it (nl-group). */
.nav-subgroup[b-ysxirfw8d2] {
    padding: var(--mk-s2) var(--mk-s4) 2px calc(var(--mk-s4) + 3px);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-muted);
    letter-spacing: .02em;
    -webkit-user-select: none;
    user-select: none;
}

/* ══════════════════════════════════════════════════════════════════════
   PERSONAL FINANCE

   PF used to invert a navy rail here. The base rules above are now the white
   spec rail, so PF needs nothing of its own except the glass top row.
   ══════════════════════════════════════════════════════════════════════ */

.pf-theme .top-row[b-ysxirfw8d2] {
    background-color: transparent;
}
/* /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-apwy10ib5j] {
    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-apwy10ib5j] {
    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-apwy10ib5j] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s5);
}

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

.ob__bar[b-apwy10ib5j] {
    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-apwy10ib5j] {
    background: var(--mk-primary);
}

.ob__count[b-apwy10ib5j] {
    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-apwy10ib5j] {
    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-apwy10ib5j] {
    font-size: var(--mk-t-section-sm);
    line-height: 1;
}

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

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

.ob__sub[b-apwy10ib5j] {
    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-apwy10ib5j] {
    /* 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-apwy10ib5j] {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

.ob__cta[b-apwy10ib5j] {
    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-apwy10ib5j] {
    opacity: .9;
}

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

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

.ob__skip[b-apwy10ib5j] {
    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-apwy10ib5j] {
    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-apwy10ib5j] {
        padding: var(--mk-s4) var(--mk-s4) var(--mk-s5);
    }

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

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

    .ob__bar[b-apwy10ib5j],
    .ob__cta[b-apwy10ib5j] {
        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-5navv5ivrt] {
    display: grid;
    /* §1.1: ~45/55 in favour of the form. */
    grid-template-columns: 45fr 55fr;
    min-height: 100vh;
    font-family: var(--mk-font);
    color: var(--mk-text);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .dots__dot[b-5navv5ivrt] {
        transition: none;
    }
}
/* /Components/Layout/PeriodPicker.razor.rz.scp.css */
.pp[b-tjxshx62r5] { position: relative; display: flex; align-items: center; gap: 2px; }

.pp-step[b-tjxshx62r5],
.pp-trigger[b-tjxshx62r5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--mk-btn-h);
    border: 1px solid transparent;
    border-radius: var(--mk-r-md);
    background: none;
    color: var(--mk-text-2);
    font: inherit;
    cursor: pointer;
}

.pp-step[b-tjxshx62r5] { width: 32px; }
.pp-step:hover[b-tjxshx62r5] { background: var(--mk-bg-subtle); color: var(--mk-text-strong); }

.pp-trigger[b-tjxshx62r5] {
    gap: var(--mk-s2);
    padding: 0 var(--mk-s3);
    border-color: var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-medium);
    white-space: nowrap;
}

.pp-trigger:hover[b-tjxshx62r5] { border-color: var(--mk-border-strong); }
.pp-trigger:focus-visible[b-tjxshx62r5],
.pp-step:focus-visible[b-tjxshx62r5] { outline: none; box-shadow: var(--mk-focus-ring); }

[b-tjxshx62r5] .pp-cal { color: var(--mk-text-muted); }
[b-tjxshx62r5] .pp-caret { color: var(--mk-text-muted); }

.pp-backdrop[b-tjxshx62r5] { position: fixed; inset: 0; z-index: var(--mk-z-dropdown, 1000); }

.pp-pop[b-tjxshx62r5] {
    position: absolute;
    top: calc(100% + var(--mk-s1));
    right: 0;
    width: 300px;
    padding: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    box-shadow: var(--mk-sh-md);
    z-index: calc(var(--mk-z-dropdown, 1000) + 1);
}

.pp-presets[b-tjxshx62r5] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-s2); }

.pp-preset[b-tjxshx62r5] {
    min-height: 36px;
    padding: 0 var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font: inherit;
    font-size: var(--mk-t-secondary);
    text-align: left;
    cursor: pointer;
}

.pp-preset:hover[b-tjxshx62r5] { background: var(--mk-bg-subtle); }
.pp-preset.is-on[b-tjxshx62r5] {
    border-color: var(--mk-primary);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.pp-section[b-tjxshx62r5] { margin-top: var(--mk-s4); padding-top: var(--mk-s3); border-top: 1px solid var(--mk-border); }

.pp-caption[b-tjxshx62r5] {
    margin-bottom: var(--mk-s2);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.pp-range[b-tjxshx62r5] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-s2); }
.pp-range label[b-tjxshx62r5] { display: flex; flex-direction: column; gap: var(--mk-s1); font-size: var(--mk-t-micro); color: var(--mk-text-2); }
.pp-range input[b-tjxshx62r5] {
    height: var(--mk-btn-h);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font: inherit;
    font-size: var(--mk-t-secondary);
}

.pp-error[b-tjxshx62r5] { margin-top: var(--mk-s2); color: var(--mk-danger); font-size: var(--mk-t-micro); }

.pp-apply[b-tjxshx62r5] {
    width: 100%;
    height: var(--mk-btn-h);
    margin-top: var(--mk-s3);
    border: none;
    border-radius: var(--mk-r-md);
    background: var(--mk-primary);
    color: var(--mk-text-onprimary);
    font: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
}

.pp-apply:hover[b-tjxshx62r5] { background: var(--mk-primary-hover); }

@media (max-width: 1024.98px) {
    .pp-step[b-tjxshx62r5] { display: none; }
    .pp-label[b-tjxshx62r5] { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-03j87be701],
.components-reconnect-repeated-attempt-visible[b-03j87be701],
.components-reconnect-failed-visible[b-03j87be701],
.components-pause-visible[b-03j87be701],
.components-resume-failed-visible[b-03j87be701],
.components-rejoining-animation[b-03j87be701] {
    display: none;
}

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


#components-reconnect-modal[b-03j87be701] {
    background-color: 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-03j87be701 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-03j87be701] {
    border: 0;
    background-color: var(--mk-primary);
    color: var(--mk-text-oncolor);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-03j87be701] {
        background-color: var(--mk-primary);
    }

    #components-reconnect-modal button:active[b-03j87be701] {
        background-color: var(--mk-primary);
    }

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TopbarSearch.razor.rz.scp.css */
.tbs[b-xil55eroad] {
    position: relative;
    width: clamp(220px, 24vw, 340px);
}

.tbs-icon[b-xil55eroad] {
    display: flex;
    position: absolute;
    left: var(--mk-s3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--mk-text-muted);
    font-size: var(--mk-t-secondary);
    pointer-events: none;
}

.tbs-input[b-xil55eroad] {
    width: 100%;
    height: var(--mk-btn-h);
    padding: 0 64px 0 36px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    color: var(--mk-text);
    font: inherit;
    font-size: var(--mk-t-secondary);
    outline: none;
    transition: border-color .12s, box-shadow .12s, background .12s;
}

.tbs-input:focus[b-xil55eroad] {
    background: var(--mk-bg-surface);
    border-color: var(--mk-primary);
    box-shadow: var(--mk-focus-ring);
}

.tbs-input[b-xil55eroad]::-webkit-search-cancel-button { display: none; }

.tbs-kbd[b-xil55eroad] {
    position: absolute;
    right: var(--mk-s2);
    top: 50%;
    transform: translateY(-50%);
    padding: 1px var(--mk-s1);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-surface);
    color: var(--mk-text-muted);
    font: inherit;
    font-size: var(--mk-t-micro);
    pointer-events: none;
}

.tbs-input:focus + .tbs-kbd[b-xil55eroad] { display: none; }

.tbs-pop[b-xil55eroad] {
    position: absolute;
    top: calc(100% + var(--mk-s1));
    left: 0;
    right: 0;
    min-width: 320px;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    padding: var(--mk-s1);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    box-shadow: var(--mk-sh-md);
    z-index: var(--mk-z-dropdown, 1000);
}

.tbs-group[b-xil55eroad] {
    padding: var(--mk-s2) var(--mk-s3) var(--mk-s1);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.tbs-row[b-xil55eroad],
.tbs-all[b-xil55eroad] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    min-height: 40px;
    padding: var(--mk-s2) var(--mk-s3);
    border: none;
    border-radius: var(--mk-r-md);
    background: none;
    color: var(--mk-text);
    font: inherit;
    font-size: var(--mk-t-secondary);
    text-align: left;
    cursor: pointer;
}

.tbs-row.is-active[b-xil55eroad],
.tbs-row:hover[b-xil55eroad],
.tbs-all:hover[b-xil55eroad] { background: var(--mk-primary-soft); }

[b-xil55eroad] .tbs-row-icon { color: var(--mk-text-2); flex-shrink: 0; }

.tbs-row-text[b-xil55eroad] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tbs-row-title[b-xil55eroad] { color: var(--mk-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbs-row-sub[b-xil55eroad] { color: var(--mk-text-muted); font-size: var(--mk-t-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbs-row-amt[b-xil55eroad] { flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: var(--mk-fw-semibold); }

.tbs-all[b-xil55eroad] {
    margin-top: var(--mk-s1);
    border-top: 1px solid var(--mk-border);
    border-radius: 0 0 var(--mk-r-md) var(--mk-r-md);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.tbs-empty[b-xil55eroad] { padding: var(--mk-s3); color: var(--mk-text-muted); font-size: var(--mk-t-secondary); }

@media (max-width: 1024.98px) {
    .tbs[b-xil55eroad] { width: 220px; }
    .tbs-kbd[b-xil55eroad] { display: none; }
}

@media (max-width: 599.98px) {
    .tbs[b-xil55eroad] { display: none; }
}
/* /Components/Pages/Admin/SpecialPermissions.razor.rz.scp.css */
.sp-head[b-129jsvnyrz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.sp-title[b-129jsvnyrz] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.sp-sub[b-129jsvnyrz] {
    margin: var(--mk-s1) 0 0;
    max-width: 64ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.sp-link[b-129jsvnyrz] {
    color: var(--mk-primary-ink);
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
}

.sp-scroll[b-129jsvnyrz] {
    overflow-x: auto;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
}

.sp-table[b-129jsvnyrz] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mk-fs-sm);
}

.sp-table th[b-129jsvnyrz] {
    background: var(--mk-bg-subtle);
    color: var(--mk-text-2);
    font-weight: var(--mk-fw-semibold);
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    white-space: nowrap;
}

.sp-table td[b-129jsvnyrz] {
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    vertical-align: middle;
}

.sp-table tr:last-child td[b-129jsvnyrz] {
    border-bottom: 0;
}

.sp-action-col[b-129jsvnyrz] {
    text-align: left;
    min-width: 220px;
    position: sticky;
    left: 0;
    background: var(--mk-bg-surface);
    z-index: 1;
}

th.sp-action-col[b-129jsvnyrz] {
    background: var(--mk-bg-subtle);
}

.sp-name[b-129jsvnyrz] {
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
}

.sp-desc[b-129jsvnyrz] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-xs);
}

.sp-role[b-129jsvnyrz],
.sp-cell[b-129jsvnyrz] {
    text-align: center;
}

.sp-cell-inner[b-129jsvnyrz] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
}

.sp-changed[b-129jsvnyrz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mk-primary);
}

@media (max-width: 599.98px) {
    .sp-action-col[b-129jsvnyrz] {
        min-width: 160px;
    }
}

.sp-limit[b-129jsvnyrz] {
    width: 72px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    padding: var(--mk-s1);
    font-size: var(--mk-fs-xs);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
}
/* /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-qs64lvoq8x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-space-4);
}

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

.cbf-label[b-qs64lvoq8x] {
    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-qs64lvoq8x] {
    color: var(--mk-fin-negative-fg);
}

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

.cbf-readonly[b-qs64lvoq8x] {
    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-qs64lvoq8x] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-3);
}

@media (max-width: 599.98px) {
    .cbf-grid[b-qs64lvoq8x] {
        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-ttob4m9yp3] {
    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-ttob4m9yp3] {
    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-ttob4m9yp3] {
    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-ttob4m9yp3] .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-os9nbvgoga] {
    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-os9nbvgoga] {
    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-os9nbvgoga] {
    border-color: var(--mk-primary);
    box-shadow: var(--mk-shadow-sm);
}

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

.cb-tile-label[b-os9nbvgoga] {
    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-os9nbvgoga] {
    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-os9nbvgoga] {
    margin-top: 2px;
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

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

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

.cb-link[b-os9nbvgoga] {
    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-os9nbvgoga] {
    border-color: var(--mk-primary);
}

.cb-link-title[b-os9nbvgoga] {
    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-os9nbvgoga] {
    display: block;
    margin-top: 2px;
    font-size: var(--mk-t-micro);
    color: var(--mk-text-2);
}

@media (max-width: 599.98px) {
    .cb-tiles[b-os9nbvgoga] {
        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-hp824dxhhv] {
    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-hp824dxhhv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cbs-balance-label[b-hp824dxhhv] {
    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-hp824dxhhv] {
    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-hp824dxhhv] {
    color: var(--mk-fin-negative-fg);
}

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

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

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

.cbs-pane-title[b-hp824dxhhv] {
    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-hp824dxhhv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
}

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

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

.cbs-label[b-hp824dxhhv] {
    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-hp824dxhhv] {
    color: var(--mk-fin-negative-fg);
}

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

.cbs-select[b-hp824dxhhv] {
    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-hp824dxhhv] {
    border-color: var(--mk-primary);
}

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

    .cbs-form[b-hp824dxhhv] {
        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-fbucyvam8c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-space-4);
}

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

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

.chf-label[b-fbucyvam8c] {
    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-fbucyvam8c] {
    color: var(--mk-fin-negative-fg);
}

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

.chf-select[b-fbucyvam8c] {
    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-fbucyvam8c] {
    border-color: var(--mk-primary);
}

@media (max-width: 599.98px) {
    .chf-grid[b-fbucyvam8c] {
        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-higgqgpvnh] {
    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-higgqgpvnh] {
    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-higgqgpvnh] {
    border-color: var(--mk-fin-pending-br);
    background: var(--mk-fin-pending-lt);
}

.chq-tile-label[b-higgqgpvnh] {
    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-higgqgpvnh] {
    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-higgqgpvnh] {
    color: var(--mk-fin-pending-fg);
}

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

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

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

.chq-pane-title[b-higgqgpvnh] {
    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-higgqgpvnh] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    margin-bottom: var(--mk-space-3);
    max-width: 420px;
}

.chq-label[b-higgqgpvnh] {
    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-higgqgpvnh] {
    color: var(--mk-fin-negative-fg);
}

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

.chq-select[b-higgqgpvnh] {
    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-higgqgpvnh] {
    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-higgqgpvnh] .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-higgqgpvnh] {
        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-gyc1y3aj2t] {
    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-gyc1y3aj2t] {
    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-gyc1y3aj2t] {
    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-gyc1y3aj2t] {
    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-gyc1y3aj2t] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

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

.lnd-pane-title[b-gyc1y3aj2t] {
    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-gyc1y3aj2t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
}

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

.lnd-label[b-gyc1y3aj2t] {
    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-gyc1y3aj2t] {
    color: var(--mk-fin-negative-fg);
}

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

.lnd-select[b-gyc1y3aj2t] {
    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-gyc1y3aj2t] {
    border-color: var(--mk-primary);
}

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

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

.lnd-tab[b-gyc1y3aj2t] {
    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-gyc1y3aj2t] {
    color: var(--mk-text-strong);
}

.lnd-tab.is-active[b-gyc1y3aj2t] {
    /* --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-gyc1y3aj2t] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }

    .lnd-form[b-gyc1y3aj2t] {
        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-nyx7enkire] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-space-4);
}

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

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

.lnf-label[b-nyx7enkire] {
    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-nyx7enkire] {
    color: var(--mk-fin-negative-fg);
}

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

.lnf-select[b-nyx7enkire] {
    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-nyx7enkire] {
    border-color: var(--mk-primary);
}

/* A value the form shows but will not let you edit — the principal, once payments exist. */
.lnf-readonly[b-nyx7enkire] {
    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-nyx7enkire] {
        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-i4xv1899il] {
    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-i4xv1899il] {
    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-i4xv1899il] {
    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-i4xv1899il] {
    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-i4xv1899il] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

/* ::deep — the filter arrives through ToolbarContent and renders inside MkDataGrid's scope. */
[b-i4xv1899il] .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-i4xv1899il] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }
}
/* /Components/Pages/Customers/CustomerWallet.razor.rz.scp.css */
.cw-page[b-zy3q6wsd65] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.cw-head[b-zy3q6wsd65] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.cw-title[b-zy3q6wsd65] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.cw-grid[b-zy3q6wsd65] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--mk-s4);
}

.cw-label[b-zy3q6wsd65] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.cw-balance[b-zy3q6wsd65] {
    font-size: var(--mk-fs-2xl);
    font-weight: var(--mk-fw-bold);
    font-variant-numeric: tabular-nums;
}

.cw-muted[b-zy3q6wsd65] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
    margin: var(--mk-s2) 0 0;
}

.cw-form[b-zy3q6wsd65] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.cw-actions[b-zy3q6wsd65] {
    display: flex;
    gap: var(--mk-s2);
    margin-top: var(--mk-s3);
}

@media (max-width: 1024.98px) {
    .cw-grid[b-zy3q6wsd65],
    .cw-form[b-zy3q6wsd65] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Distribution/RoutesPage.razor.rz.scp.css */
.rt-head[b-ad1lkboxtk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.rt-title[b-ad1lkboxtk] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.rt-sub[b-ad1lkboxtk],
.rt-empty[b-ad1lkboxtk] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.rt-tabs[b-ad1lkboxtk] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

.rt-tab[b-ad1lkboxtk] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.rt-tab.is-on[b-ad1lkboxtk] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.rt-route[b-ad1lkboxtk] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    margin-bottom: var(--mk-s3);
}

.rt-route-head[b-ad1lkboxtk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mk-s3) var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
}

.rt-route-name[b-ad1lkboxtk] {
    font-weight: var(--mk-fw-semibold);
}

.rt-progress[b-ad1lkboxtk] {
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    font-variant-numeric: tabular-nums;
}

.rt-muted[b-ad1lkboxtk] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.rt-stop[b-ad1lkboxtk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s2) var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
    flex-wrap: wrap;
}

.rt-stop:last-child[b-ad1lkboxtk] {
    border-bottom: 0;
}

.rt-stop.is-done[b-ad1lkboxtk] {
    background: var(--mk-bg-subtle);
}

.rt-stop-name[b-ad1lkboxtk] {
    font-weight: var(--mk-fw-medium);
}

.rt-due[b-ad1lkboxtk] {
    color: var(--mk-warning-fg);
    font-weight: var(--mk-fw-medium);
    margin-right: var(--mk-s2);
}

.rt-done[b-ad1lkboxtk] {
    color: var(--mk-text-2);
    font-weight: var(--mk-fw-medium);
}

.rt-outcomes[b-ad1lkboxtk],
.rt-visit[b-ad1lkboxtk] {
    display: flex;
    gap: var(--mk-s1);
    align-items: center;
    flex-wrap: wrap;
}

.rt-visit .form-control[b-ad1lkboxtk] {
    width: 140px;
}

.rt-grid[b-ad1lkboxtk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.rt-label[b-ad1lkboxtk] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.rt-days[b-ad1lkboxtk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s3);
    margin-top: var(--mk-s3);
}

.rt-days .rt-label[b-ad1lkboxtk] {
    margin: 0;
}

.rt-day[b-ad1lkboxtk] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    font-size: var(--mk-fs-sm);
}

.rt-matches[b-ad1lkboxtk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s1);
    margin-top: var(--mk-s2);
}

.rt-match[b-ad1lkboxtk] {
    border: 1px dashed var(--mk-border);
    background: transparent;
    border-radius: var(--mk-r-sm);
    padding: var(--mk-s1) var(--mk-s2);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
    color: var(--mk-text);
}

.rt-stops[b-ad1lkboxtk] {
    margin: var(--mk-s3) 0 0;
    padding-left: var(--mk-s5);
}

.rt-stops li[b-ad1lkboxtk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mk-s1) 0;
    border-bottom: 1px solid var(--mk-border);
    font-size: var(--mk-fs-sm);
}

.rt-stop-actions[b-ad1lkboxtk] {
    display: inline-flex;
    gap: var(--mk-s1);
}

.rt-icon[b-ad1lkboxtk] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-sm);
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.rt-icon:disabled[b-ad1lkboxtk] {
    opacity: 0.4;
    cursor: default;
}

.rt-actions[b-ad1lkboxtk],
.rt-toolbar[b-ad1lkboxtk] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin: var(--mk-s3) 0;
}
/* /Components/Pages/Jewellery/JewelleryRates.razor.rz.scp.css */
.jw-head[b-un40ti5qoe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.jw-title[b-un40ti5qoe] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.jw-sub[b-un40ti5qoe],
.jw-empty[b-un40ti5qoe] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.jw-tabs[b-un40ti5qoe] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

.jw-tab[b-un40ti5qoe] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.jw-tab.is-on[b-un40ti5qoe] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.jw-route[b-un40ti5qoe] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    margin-bottom: var(--mk-s3);
}

.jw-route-head[b-un40ti5qoe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mk-s3) var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
}


.jw-section[b-un40ti5qoe] {
    margin: var(--mk-s4) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.jw-form[b-un40ti5qoe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--mk-s3);
    align-items: end;
}

.jw-label[b-un40ti5qoe] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.jw-piece-head[b-un40ti5qoe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mk-s3);
}

.jw-actions[b-un40ti5qoe] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mk-s3);
}

.jw-quote[b-un40ti5qoe] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
    font-variant-numeric: tabular-nums;
}

.jw-total[b-un40ti5qoe] {
    margin-top: var(--mk-s1);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.jw-muted[b-un40ti5qoe] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
    font-weight: var(--mk-fw-regular);
}
/* /Components/Pages/Khatabook/SharedKhataPage.razor.rz.scp.css */
.skp-note[b-wn4yb6q39k] {
    padding: var(--mk-s3);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary);
    line-height: 1.5;
}

.skp-totals[b-wn4yb6q39k] {
    display: flex;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s3);
}

.skp-totals > div[b-wn4yb6q39k] {
    flex: 1;
    padding: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
}

.skp-totals-label[b-wn4yb6q39k] { font-size: var(--mk-t-micro); color: var(--mk-text-muted); margin-bottom: var(--mk-s1); }
.skp-totals-fig[b-wn4yb6q39k] { font-size: var(--mk-t-card-sm); font-weight: var(--mk-fw-bold); font-variant-numeric: tabular-nums; }

.skp-row[b-wn4yb6q39k],
.skp-entry[b-wn4yb6q39k] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s3);
    border: none;
    border-bottom: 1px solid var(--mk-bg-subtle);
    background: none;
    color: var(--mk-text);
    text-align: left;
    font: inherit;
}

.skp-row[b-wn4yb6q39k] { cursor: pointer; }
.skp-row:hover[b-wn4yb6q39k] { background: var(--mk-bg-subtle); }
.skp-row:focus-visible[b-wn4yb6q39k] { outline: 2px solid var(--mk-primary); outline-offset: -2px; }

.skp-avatar[b-wn4yb6q39k] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mk-primary-lt);
    color: var(--mk-primary-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--mk-fw-bold);
}

.skp-row-main[b-wn4yb6q39k],
.skp-entry-main[b-wn4yb6q39k] { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.skp-row-name[b-wn4yb6q39k],
.skp-entry-desc[b-wn4yb6q39k] {
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skp-row-sub[b-wn4yb6q39k] { font-size: var(--mk-t-micro); color: var(--mk-text-muted); }

.skp-row-fig[b-wn4yb6q39k] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: var(--mk-fw-bold);
    font-size: var(--mk-t-body);
}

.skp-row-dir[b-wn4yb6q39k] { font-size: var(--mk-t-micro); font-weight: var(--mk-fw-regular); color: var(--mk-text-muted); }

.is-get[b-wn4yb6q39k] { color: var(--mk-fin-positive); }
.is-give[b-wn4yb6q39k] { color: var(--mk-fin-negative); }
.is-settled[b-wn4yb6q39k] { color: var(--mk-text-muted); }

.skp-hero[b-wn4yb6q39k] {
    text-align: center;
    padding: var(--mk-s5) var(--mk-s4);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-xl);
    background: var(--mk-bg-surface);
}

.skp-hero-fig[b-wn4yb6q39k] {
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    line-height: 1;
}

.skp-hero-dir[b-wn4yb6q39k] { margin-top: var(--mk-s2); font-weight: var(--mk-fw-bold); }

.skp-hero-meta[b-wn4yb6q39k] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mk-s1) var(--mk-s3);
    margin-top: var(--mk-s3);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-muted);
}

.skp-empty[b-wn4yb6q39k] {
    text-align: center;
    padding: var(--mk-s8) var(--mk-s4);
    color: var(--mk-text-muted);
    font-size: var(--mk-t-secondary);
}

.skp-empty > div[b-wn4yb6q39k] { font-size: var(--mk-t-hero-lg); margin-bottom: var(--mk-s3); }
.skp-empty-title[b-wn4yb6q39k] { font-size: var(--mk-t-card-sm); font-weight: var(--mk-fw-bold); color: var(--mk-text); margin-bottom: var(--mk-s1); }
/* /Components/Pages/Marketing/Campaigns.razor.rz.scp.css */
.cp-head[b-bgxrujm35t] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.cp-head-actions[b-bgxrujm35t] {
    display: flex;
    gap: var(--mk-s3);
    align-items: center;
    flex-wrap: wrap;
}

.cp-title[b-bgxrujm35t] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.cp-sub[b-bgxrujm35t] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.cp-tabs[b-bgxrujm35t] {
    display: flex;
    gap: var(--mk-s2);
}

.cp-tab[b-bgxrujm35t] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.cp-tab.is-on[b-bgxrujm35t] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.cp-off[b-bgxrujm35t] {
    padding: var(--mk-s3);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    font-size: var(--mk-fs-sm);
    color: var(--mk-warning-fg);
}

.cp-off a[b-bgxrujm35t] {
    color: var(--mk-primary-ink);
}

.cp-grid[b-bgxrujm35t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.cp-span[b-bgxrujm35t] {
    grid-column: 1 / -1;
}

.cp-label[b-bgxrujm35t] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.cp-section[b-bgxrujm35t] {
    margin: var(--mk-s4) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.cp-picked[b-bgxrujm35t],
.cp-chip[b-bgxrujm35t] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    padding: var(--mk-s1) var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.cp-combo[b-bgxrujm35t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s2);
}

.cp-x[b-bgxrujm35t] {
    border: 0;
    background: transparent;
    color: var(--mk-text-muted);
    cursor: pointer;
    font-size: var(--mk-fs-md, var(--mk-fs-sm));
    line-height: 1;
}

.cp-days[b-bgxrujm35t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s3);
    margin-top: var(--mk-s3);
}

.cp-days .cp-label[b-bgxrujm35t] {
    margin: 0;
}

.cp-day[b-bgxrujm35t],
.cp-check[b-bgxrujm35t] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    font-size: var(--mk-fs-sm);
}

.cp-hint[b-bgxrujm35t] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.cp-actions[b-bgxrujm35t] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.cp-period[b-bgxrujm35t] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
    flex-wrap: wrap;
}

.cp-period .cp-label[b-bgxrujm35t] {
    margin: 0;
}

.cp-period .form-control[b-bgxrujm35t] {
    width: auto;
}

[b-bgxrujm35t] .cp-live {
    margin-left: var(--mk-s1);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
}

[b-bgxrujm35t] .cp-row-actions {
    display: inline-flex;
    gap: var(--mk-s1);
}

.cp-preview[b-bgxrujm35t] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.cp-result-head[b-bgxrujm35t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cp-result-title[b-bgxrujm35t] {
    margin: 0;
    font-weight: var(--mk-fw-semibold);
}

.cp-kpis[b-bgxrujm35t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--mk-s2);
    margin: var(--mk-s3) 0;
}

.cp-kpi[b-bgxrujm35t] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s2) var(--mk-s3);
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.cp-kpi span[b-bgxrujm35t] {
    display: block;
    font-size: var(--mk-fs-lg, var(--mk-fs-md));
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Marketing/Promotions.razor.rz.scp.css */
.pr-head[b-ccp5kvjwrz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.pr-head-actions[b-ccp5kvjwrz] {
    display: flex;
    gap: var(--mk-s3);
    align-items: center;
    flex-wrap: wrap;
}

.pr-title[b-ccp5kvjwrz] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.pr-sub[b-ccp5kvjwrz] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.pr-tabs[b-ccp5kvjwrz] {
    display: flex;
    gap: var(--mk-s2);
}

.pr-tab[b-ccp5kvjwrz] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.pr-tab.is-on[b-ccp5kvjwrz] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.pr-off[b-ccp5kvjwrz] {
    padding: var(--mk-s3);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    font-size: var(--mk-fs-sm);
    color: var(--mk-warning-fg);
}

.pr-off a[b-ccp5kvjwrz] {
    color: var(--mk-primary-ink);
}

.pr-grid[b-ccp5kvjwrz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.pr-span[b-ccp5kvjwrz] {
    grid-column: 1 / -1;
}

.pr-label[b-ccp5kvjwrz] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.pr-section[b-ccp5kvjwrz] {
    margin: var(--mk-s4) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.pr-picked[b-ccp5kvjwrz],
.pr-chip[b-ccp5kvjwrz] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    padding: var(--mk-s1) var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.pr-combo[b-ccp5kvjwrz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s2);
}

.pr-x[b-ccp5kvjwrz] {
    border: 0;
    background: transparent;
    color: var(--mk-text-muted);
    cursor: pointer;
    font-size: var(--mk-fs-md, var(--mk-fs-sm));
    line-height: 1;
}

.pr-days[b-ccp5kvjwrz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s3);
    margin-top: var(--mk-s3);
}

.pr-days .pr-label[b-ccp5kvjwrz] {
    margin: 0;
}

.pr-day[b-ccp5kvjwrz],
.pr-check[b-ccp5kvjwrz] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    font-size: var(--mk-fs-sm);
}

.pr-hint[b-ccp5kvjwrz] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.pr-actions[b-ccp5kvjwrz] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.pr-period[b-ccp5kvjwrz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
    flex-wrap: wrap;
}

.pr-period .pr-label[b-ccp5kvjwrz] {
    margin: 0;
}

.pr-period .form-control[b-ccp5kvjwrz] {
    width: auto;
}

[b-ccp5kvjwrz] .pr-live {
    margin-left: var(--mk-s1);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
}

[b-ccp5kvjwrz] .pr-row-actions {
    display: inline-flex;
    gap: var(--mk-s1);
}
/* /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-u6m0bbppfo] {
    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-u6m0bbppfo] {
    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-u6m0bbppfo] {
    border-bottom: none;
}

.ob-row__icon[b-u6m0bbppfo] {
    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-u6m0bbppfo] {
    flex: 1;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg);
}

.ob-row__select[b-u6m0bbppfo] {
    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-u6m0bbppfo] {
    color: var(--mk-text);
    background: var(--mk-bg-surface);
}

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

.ob-quote[b-u6m0bbppfo] {
    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-u6m0bbppfo] {
    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-u6m0bbppfo] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
}

.ob-choice[b-u6m0bbppfo] {
    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-u6m0bbppfo] {
    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-u6m0bbppfo] {
    border-color: var(--mk-primary);
    background: var(--mk-primary-lt);
}

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

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

.ob-choice__art[b-u6m0bbppfo] {
    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-u6m0bbppfo] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    min-width: 0;
}

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

.ob-choice__desc[b-u6m0bbppfo] {
    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-u6m0bbppfo] {
    color: var(--mk-text-strong);
}

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

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

.ob-field[b-u6m0bbppfo] {
    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-u6m0bbppfo] {
    border-bottom: none;
}

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

.ob-field__input[b-u6m0bbppfo] {
    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-u6m0bbppfo]::placeholder {
    color: var(--mk-hero-fg-2);
}

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

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

.ob-type[b-u6m0bbppfo] {
    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-u6m0bbppfo] {
    font-size: var(--mk-t-card-sm);
    line-height: 1;
}

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

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

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

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

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

@media (max-width: 599.98px) {

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

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

    .ob-choice[b-u6m0bbppfo],
    .ob-type[b-u6m0bbppfo] {
        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-wtgko00go7] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

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

.att-grid thead th[b-wtgko00go7] {
    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-wtgko00go7] {
    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-wtgko00go7] {
    z-index: 3;
    background: var(--mk-bg-subtle);
}

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

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

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

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

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

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

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

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

.att-today-row[b-wtgko00go7] {
    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-wtgko00go7] { border-bottom: 0; padding-bottom: 0; }

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

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

.att-chip[b-wtgko00go7] {
    /* 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-wtgko00go7] { border-color: var(--mk-primary-border); }

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

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

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

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

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

.att-legend[b-wtgko00go7] {
    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-wtgko00go7] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-space-2);
}

.att-legend-swatch[b-wtgko00go7] {
    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-wtgko00go7] { 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-daufejnx77] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-muted);
    margin-bottom: var(--mk-space-1);
}

.hr-stat-value[b-daufejnx77] {
    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-daufejnx77] { color: var(--mk-success); }
.hr-stat-warn[b-daufejnx77] { color: var(--mk-warning-fg); }

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

.hr-tile[b-daufejnx77] {
    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-daufejnx77] {
    border-color: var(--mk-primary-border);
    box-shadow: var(--mk-shadow-md);
    transform: translateY(-2px);
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .hr-tile[b-daufejnx77] { transition: none; }
    .hr-tile:hover[b-daufejnx77] { 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-bdcz2bsjqn] {
    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-bdcz2bsjqn] {
    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-bdcz2bsjqn] {
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

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

.pay-meta[b-bdcz2bsjqn] {
    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-bdcz2bsjqn] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-space-2);
    font-size: var(--mk-t-secondary);
}

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

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

.pay-col-head[b-bdcz2bsjqn] {
    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-bdcz2bsjqn] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mk-t-body);
}

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

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

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

.pay-net[b-bdcz2bsjqn] {
    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-bdcz2bsjqn] {
    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-bdcz2bsjqn],
.pay-foot[b-bdcz2bsjqn] {
    margin-top: var(--mk-space-4);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

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

@media (min-width: 600px) {
    .pay-cols[b-bdcz2bsjqn] { 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-bdcz2bsjqn] { display: none !important; }

    .pay-sheet[b-bdcz2bsjqn] {
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}
/* /Components/Pages/PersonalFinance/CashFlowPage.razor.rz.scp.css */
.cf-page[b-h8cop3vbmu] { max-width: 1200px; }

.cf-link[b-h8cop3vbmu] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    color: var(--mk-primary-ink);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    text-decoration: none;
}

.cf-sum[b-h8cop3vbmu],
.cf-fc-grid[b-h8cop3vbmu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.cf-sum .cf-kpi[b-h8cop3vbmu],
.cf-card[b-h8cop3vbmu] {
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    box-shadow: var(--mk-sh-sm);
}

.cf-sum .cf-kpi[b-h8cop3vbmu] { padding: var(--mk-s4); }

.cf-card[b-h8cop3vbmu] { padding: var(--mk-s5); margin-bottom: var(--mk-s4); }

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

.cf-title[b-h8cop3vbmu] {
    margin: 0;
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
}

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

.cf-v[b-h8cop3vbmu] {
    margin-top: var(--mk-s1);
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.cf-fc-grid .cf-v[b-h8cop3vbmu] { font-size: var(--mk-t-card); }

.cf-sub[b-h8cop3vbmu] { margin-top: var(--mk-s1); font-size: var(--mk-t-micro); color: var(--mk-text-muted); }
.cf-muted[b-h8cop3vbmu] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary); }

.cf-pos[b-h8cop3vbmu] { color: var(--mk-fin-positive); }
.cf-neg[b-h8cop3vbmu] { color: var(--mk-fin-negative); }

.cf-chart[b-h8cop3vbmu] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--mk-s3);
    align-items: end;
    height: 220px;
}

.cf-col[b-h8cop3vbmu] { display: flex; flex-direction: column; align-items: center; gap: var(--mk-s1); height: 100%; min-width: 0; }

.cf-bars[b-h8cop3vbmu] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--mk-s1);
    border-bottom: 1px solid var(--mk-border);
}

.cf-bars span[b-h8cop3vbmu] { width: min(22px, 40%); min-height: 2px; border-radius: var(--mk-r-sm) var(--mk-r-sm) 0 0; }
.cf-bars .in[b-h8cop3vbmu], .cf-legend .in[b-h8cop3vbmu] { background: var(--mk-fin-positive); }
.cf-bars .out[b-h8cop3vbmu], .cf-legend .out[b-h8cop3vbmu] { background: var(--mk-fin-negative); }
.cf-lbl[b-h8cop3vbmu] { font-size: var(--mk-t-micro); color: var(--mk-text-muted); }

.cf-legend[b-h8cop3vbmu] { display: flex; gap: var(--mk-s4); margin-top: var(--mk-s2); font-size: var(--mk-t-micro); color: var(--mk-text-2); }
.cf-legend i[b-h8cop3vbmu] { display: inline-block; width: var(--mk-s2); height: var(--mk-s2); border-radius: 2px; margin-right: var(--mk-s1); }

.cf-table[b-h8cop3vbmu] {
    width: 100%;
    margin-top: var(--mk-s4);
    border-collapse: collapse;
    font-size: var(--mk-t-secondary);
    font-variant-numeric: tabular-nums;
}

.cf-table th[b-h8cop3vbmu],
.cf-table td[b-h8cop3vbmu] {
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    text-align: right;
}

.cf-table th:first-child[b-h8cop3vbmu] { text-align: left; }
.cf-table thead th[b-h8cop3vbmu] { font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); color: var(--mk-text-2); background: var(--mk-bg-subtle); }
.cf-table tbody th[b-h8cop3vbmu] { font-weight: var(--mk-fw-medium); color: var(--mk-text-strong); }
.cf-row-neg[b-h8cop3vbmu] { background: var(--mk-fin-negative-lt); }

.cf-seg[b-h8cop3vbmu] { display: inline-flex; border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); overflow: hidden; }

.cf-seg button[b-h8cop3vbmu] {
    min-height: 32px;
    padding: 0 var(--mk-s3);
    border: none;
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    font: inherit;
    font-size: var(--mk-t-secondary);
    cursor: pointer;
}

.cf-seg button + button[b-h8cop3vbmu] { border-left: 1px solid var(--mk-border); }
.cf-seg button.is-on[b-h8cop3vbmu] { background: var(--mk-primary-soft); color: var(--mk-primary-ink); font-weight: var(--mk-fw-semibold); }

.cf-alert[b-h8cop3vbmu] {
    display: flex;
    gap: var(--mk-s3);
    align-items: flex-start;
    margin-bottom: var(--mk-s4);
    padding: var(--mk-s3) var(--mk-s4);
    border: 1px solid var(--mk-warning);
    border-radius: var(--mk-r-md);
    background: var(--mk-warning-lt);
    color: var(--mk-warning-fg);
    font-size: var(--mk-t-secondary);
}

.cf-alert-title[b-h8cop3vbmu] { font-weight: var(--mk-fw-semibold); }

@media (max-width: 599.98px) {
    .cf-card[b-h8cop3vbmu] { padding: var(--mk-s4); }
    .cf-chart[b-h8cop3vbmu] { height: 160px; gap: var(--mk-s1); }
    .cf-table th[b-h8cop3vbmu], .cf-table td[b-h8cop3vbmu] { padding: var(--mk-s2); }
}
/* /Components/Pages/PersonalFinance/FreshStartPage.razor.rz.scp.css */
.fs-hero[b-8bb0ewqc6e] {
    background: var(--mk-hero-bg);
    padding: var(--mk-s5) var(--mk-s5) 70px;
}
.fs-hero-row[b-8bb0ewqc6e] { display: flex; align-items: center; gap: var(--mk-s3); max-width: 560px; margin-inline: auto; }
.fs-back[b-8bb0ewqc6e] {
    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-8bb0ewqc6e] {
    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-8bb0ewqc6e] {
    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-8bb0ewqc6e] { display: flex; gap: var(--mk-s2); }
.fs-actions .fs-btn[b-8bb0ewqc6e] { flex: 1; }
.fs-btn.fs-btn-plain[b-8bb0ewqc6e] {
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    border: 1.5px solid var(--mk-border);
}

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

.fs-card[b-8bb0ewqc6e] {
    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-8bb0ewqc6e] { background: var(--mk-fin-negative-lt); border-color: var(--mk-fin-negative-br); }
.fs-warn-title[b-8bb0ewqc6e] {
    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-8bb0ewqc6e] {
    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-8bb0ewqc6e] { margin: 0; font-size: var(--mk-t-secondary); color: var(--mk-text-2); line-height: 1.5; }

.fs-row[b-8bb0ewqc6e] {
    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-8bb0ewqc6e] { border-bottom: none; }
.fs-row-note[b-8bb0ewqc6e] { color: var(--mk-text-muted); font-size: var(--mk-t-micro); }
.fs-count[b-8bb0ewqc6e] { font-weight: var(--mk-fw-bold); color: var(--mk-fin-negative); }

.fs-export[b-8bb0ewqc6e] {
    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-8bb0ewqc6e] {
    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-8bb0ewqc6e] { margin-top: 0; }
.fs-input[b-8bb0ewqc6e] {
    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-8bb0ewqc6e] {
    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-8bb0ewqc6e] {
    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-8bb0ewqc6e] { 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-8bb0ewqc6e] {
    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-8bb0ewqc6e] { background: var(--mk-primary); color: var(--mk-primary-foreground); }

.fs-done[b-8bb0ewqc6e] { text-align: center; }
.fs-done-ico[b-8bb0ewqc6e] { font-size: var(--mk-t-hero-sm); line-height: 1; margin-bottom: var(--mk-s2); }
.fs-done-title[b-8bb0ewqc6e] {
    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-1dwcfwglyl] {
    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-1dwcfwglyl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s3);
}

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

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

.ic-search[b-1dwcfwglyl] {
    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-1dwcfwglyl] { outline: none; box-shadow: var(--mk-focus-ring); border-color: var(--mk-primary); }

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

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

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

.ic-row[b-1dwcfwglyl] {
    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-1dwcfwglyl] { background: var(--mk-bg-subtle); }

.ic-avatar[b-1dwcfwglyl] {
    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-1dwcfwglyl] { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ic-name[b-1dwcfwglyl] {
    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-1dwcfwglyl] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-new[b-1dwcfwglyl] {
    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-1dwcfwglyl] {
    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-1dwcfwglyl]  { color: var(--mk-fin-positive-fg); }
.ic-bal.is-out[b-1dwcfwglyl] { color: var(--mk-fin-negative-fg); }

.ic-more[b-1dwcfwglyl] {
    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-1dwcfwglyl] { padding: var(--mk-s4); }
    .ic-search[b-1dwcfwglyl] { flex-basis: 100%; }
    .ic-bal[b-1dwcfwglyl] { max-width: 38%; text-align: right; white-space: normal; }
}
/* /Components/Pages/PersonalFinance/PrivacyPage.razor.rz.scp.css */
/* Guide §8.2: three groups by meaning, each on its own card. */
.pv-card[b-wum8n87upz] {
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    padding: var(--mk-s5);
    box-shadow: var(--mk-sh-sm);
    margin-bottom: var(--mk-s4);
}

.pv-group[b-wum8n87upz] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--mk-s2);
}

.pv-sub[b-wum8n87upz] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s2);
}
/* /Components/Pages/Pos/PosShifts.razor.rz.scp.css */
.pz-head[b-k6pnjb27t0] {
    margin-bottom: var(--mk-s4);
}

.pz-title[b-k6pnjb27t0] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.pz-sub[b-k6pnjb27t0] {
    margin: var(--mk-s1) 0 var(--mk-s3);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.pz-section[b-k6pnjb27t0] {
    margin: var(--mk-s5) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.pz-cards[b-k6pnjb27t0],
.pz-usage[b-k6pnjb27t0],
.pz-presets[b-k6pnjb27t0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.pz-card[b-k6pnjb27t0],
.pz-meter[b-k6pnjb27t0],
.pz-preset[b-k6pnjb27t0] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    padding: var(--mk-s3) var(--mk-s4);
}

.pz-tabs[b-k6pnjb27t0] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

.pz-tab[b-k6pnjb27t0] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.pz-tab.is-on[b-k6pnjb27t0] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.pz-head[b-k6pnjb27t0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    flex-wrap: wrap;
}

.pz-title-sm[b-k6pnjb27t0] {
    font-weight: var(--mk-fw-semibold);
    margin-bottom: var(--mk-s2);
}

.pz-form[b-k6pnjb27t0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--mk-s3);
    align-items: end;
}

.pz-label[b-k6pnjb27t0] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.pz-check[b-k6pnjb27t0] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-sm);
}

.pz-kpis[b-k6pnjb27t0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s2);
}

.pz-kpi[b-k6pnjb27t0] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    padding: var(--mk-s2) var(--mk-s3);
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.pz-kpi span[b-k6pnjb27t0] {
    display: block;
    font-size: var(--mk-fs-lg, var(--mk-fs-md));
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
    font-variant-numeric: tabular-nums;
}

.pz-kpi.is-main[b-k6pnjb27t0] {
    border-color: var(--mk-primary-border);
}

.pz-moves[b-k6pnjb27t0] {
    margin: var(--mk-s3) 0 0;
    padding-left: var(--mk-s4);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-2);
}

.pz-diff[b-k6pnjb27t0] {
    margin: var(--mk-s3) 0 0;
    font-weight: var(--mk-fw-semibold);
}

.pz-diff.is-short[b-k6pnjb27t0],
[b-k6pnjb27t0] .pz-short {
    color: var(--mk-danger);
}

.pz-toolbar[b-k6pnjb27t0] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--mk-s3);
}
/* /Components/Pages/Products/Categories.razor.rz.scp.css */
.cat-page[b-bztg8714z5] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.cat-head[b-bztg8714z5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.cat-title[b-bztg8714z5] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.cat-sub[b-bztg8714z5],
.cat-muted[b-bztg8714z5] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.cat-sub[b-bztg8714z5] {
    margin: var(--mk-s1) 0 0;
}

.cat-grid[b-bztg8714z5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.cat-label[b-bztg8714z5] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.cat-check[b-bztg8714z5] {
    display: flex;
    gap: var(--mk-s2);
    align-items: center;
}

.cat-actions[b-bztg8714z5] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.cat-list[b-bztg8714z5] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-card);
    background: var(--mk-bg-surface);
    overflow: hidden;
}

.cat-row[b-bztg8714z5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s3);
    padding-top: var(--mk-s2);
    padding-bottom: var(--mk-s2);
    padding-right: var(--mk-s4);
    border-top: 1px solid var(--mk-border);
}

.cat-row:first-child[b-bztg8714z5] {
    border-top: 0;
}

.cat-row.is-off .cat-name[b-bztg8714z5] {
    color: var(--mk-text-muted);
}

.cat-name[b-bztg8714z5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s2);
    color: var(--mk-text);
}

.cat-chip[b-bztg8714z5] {
    font-size: var(--mk-fs-xs);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
    color: var(--mk-text-2);
}

.cat-row-actions[b-bztg8714z5] {
    display: flex;
    gap: var(--mk-s1);
    flex-shrink: 0;
}

@media (max-width: 599.98px) {
    .cat-grid[b-bztg8714z5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Products/ProductExtraBarcodes.razor.rz.scp.css */
/* Extra barcodes panel — tokens only (docs/css-design-system.md). */

.xb[b-kb5hucucn8] {
    margin-top: var(--mk-s3);
    padding-top: var(--mk-s3);
    border-top: 1px dashed var(--mk-border);
}

.xb-head[b-kb5hucucn8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s2);
}

.xb-hint[b-kb5hucucn8],
.xb-note[b-kb5hucucn8] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
}

.xb-list[b-kb5hucucn8] {
    list-style: none;
    margin: 0 0 var(--mk-s2);
    padding: 0;
}

.xb-list li[b-kb5hucucn8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s1) 0;
    border-bottom: 1px solid var(--mk-border);
}

.xb-list li:last-child[b-kb5hucucn8] { border-bottom: 0; }

.xb-code[b-kb5hucucn8] {
    font-family: var(--mk-font-mono);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-strong);
    overflow-wrap: anywhere;
}

.xb-tag[b-kb5hucucn8] {
    font-size: var(--mk-fs-2xs);
    font-weight: var(--mk-fw-medium);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    border: 1px solid var(--mk-border-strong);
    color: var(--mk-text);
}

.xb-remove[b-kb5hucucn8] {
    margin-left: auto;
    color: var(--mk-danger-fg);
}

.xb-add[b-kb5hucucn8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
}

.xb-input[b-kb5hucucn8] { flex: 2 1 10rem; min-width: 0; }
.xb-kind[b-kb5hucucn8],
.xb-size[b-kb5hucucn8]  { flex: 1 1 8rem; min-width: 0; }
.xb-pack[b-kb5hucucn8]  { flex: 0 1 5rem; min-width: 0; }

.xb-error[b-kb5hucucn8] {
    margin-top: var(--mk-s2);
    font-size: var(--mk-fs-xs);
    color: var(--mk-danger-fg);
}
/* /Components/Pages/Purchases/PurchaseDashboard.razor.rz.scp.css */
/* Purchase dashboard — tokens only (docs/css-design-system.md). */

.pd-filters[b-5pmyjnv1ce] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
}

.pd-tiles[b-5pmyjnv1ce] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.pd-tile[b-5pmyjnv1ce] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    padding: var(--mk-s4);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-card);
    box-shadow: var(--mk-sh-xs);
    color: var(--mk-text);
    text-decoration: none;
    transition: border-color var(--mk-dur-fast) var(--mk-ease);
}

.pd-tile:hover[b-5pmyjnv1ce],
.pd-tile:focus-visible[b-5pmyjnv1ce] {
    border-color: var(--mk-border-strong);
    color: var(--mk-text);
}

.pd-tile:focus-visible[b-5pmyjnv1ce] {
    outline: none;
    box-shadow: var(--mk-focus-ring);
}

/* Colour only supports the words — every warning tile also says what is wrong. */
.pd-warn[b-5pmyjnv1ce] { border-left: 3px solid var(--mk-warning); }
.pd-bad[b-5pmyjnv1ce]  { border-left: 3px solid var(--mk-danger); }

.pd-label[b-5pmyjnv1ce] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
}

.pd-value[b-5pmyjnv1ce] {
    font-size: var(--mk-fs-lg);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.pd-sub[b-5pmyjnv1ce] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
}

.pd-sub-bad[b-5pmyjnv1ce] { color: var(--mk-danger-fg); }

.pd-grid[b-5pmyjnv1ce] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mk-s3);
}

@media (max-width: 1024.98px) {
    .pd-grid[b-5pmyjnv1ce] { grid-template-columns: minmax(0, 1fr); }
}

.pd-card[b-5pmyjnv1ce] {
    padding: var(--mk-s4);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-card);
    box-shadow: var(--mk-sh-xs);
}

.pd-card-title[b-5pmyjnv1ce] {
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    margin-bottom: var(--mk-s3);
}

.pd-legend[b-5pmyjnv1ce] {
    display: flex;
    gap: var(--mk-s4);
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s2);
}

.pd-swatch[b-5pmyjnv1ce] {
    display: inline-block;
    width: var(--mk-s3);
    height: var(--mk-s3);
    border-radius: var(--mk-r-sm);
    margin-right: var(--mk-s1);
    vertical-align: middle;
}

.pd-swatch-p[b-5pmyjnv1ce], .pd-bar-p[b-5pmyjnv1ce] { background: var(--mk-financial); }
.pd-swatch-e[b-5pmyjnv1ce], .pd-bar-e[b-5pmyjnv1ce] { background: var(--mk-chart-2); }

.pd-trend[b-5pmyjnv1ce],
.pd-rank[b-5pmyjnv1ce] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pd-trend li[b-5pmyjnv1ce] {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s1) 0;
}

.pd-trend-label[b-5pmyjnv1ce] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
}

.pd-bars[b-5pmyjnv1ce] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd-bar[b-5pmyjnv1ce] {
    display: block;
    height: var(--mk-s2);
    min-width: 2px;
    border-radius: var(--mk-r-sm);
}

.pd-trend-val[b-5pmyjnv1ce] {
    font-size: var(--mk-fs-xs);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mk-text);
}

.pd-trend-val small[b-5pmyjnv1ce] { color: var(--mk-text-2); }

.pd-rank li[b-5pmyjnv1ce] {
    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-fs-sm);
}

.pd-rank li:last-child[b-5pmyjnv1ce] { border-bottom: 0; }

.pd-rank-name[b-5pmyjnv1ce] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--mk-text);
}

.pd-rank-name small[b-5pmyjnv1ce] {
    display: block;
    color: var(--mk-text-2);
}

.pd-rank-val[b-5pmyjnv1ce] {
    font-weight: var(--mk-fw-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--mk-text-strong);
    white-space: nowrap;
}

.pd-more[b-5pmyjnv1ce] {
    display: inline-block;
    margin-top: var(--mk-s2);
    font-size: var(--mk-fs-sm);
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Register/BusinessSetup.razor.rz.scp.css */
.bs-page[b-r9ru8yzxur] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mk-bg-app);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--mk-s6) var(--mk-s4) var(--mk-s7);
    box-sizing: border-box;
}

.bs-card[b-r9ru8yzxur] {
    width: 100%;
    max-width: 520px;
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-xl);
    box-shadow: var(--mk-sh-lg);
    padding: var(--mk-s6);
}

@media (max-width: 599.98px) {
    .bs-card[b-r9ru8yzxur] { padding: var(--mk-s5) var(--mk-s4); }
}

.bs-pill[b-r9ru8yzxur] {
    display: inline-block;
    margin-bottom: var(--mk-s3);
    padding: 2px var(--mk-s3);
    border-radius: var(--mk-r-pill);
    border: 1px solid var(--mk-fin-positive-br);
    background: var(--mk-fin-positive-lt);
    color: var(--mk-fin-positive-fg);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
}

.bs-title[b-r9ru8yzxur] {
    margin: 0 0 var(--mk-s2);
    font-size: var(--mk-t-page-sm);
    font-weight: var(--mk-fw-extrabold);
    color: var(--mk-text-strong);
}

.bs-sub[b-r9ru8yzxur] {
    margin: 0 0 var(--mk-s5);
    font-size: var(--mk-t-body);
    color: var(--mk-text-2);
}

.bs-field[b-r9ru8yzxur] { margin-bottom: var(--mk-s4); }

.bs-label[b-r9ru8yzxur] {
    display: block;
    margin-bottom: var(--mk-s1);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.bs-req[b-r9ru8yzxur] { color: var(--mk-fin-negative); }
.bs-opt[b-r9ru8yzxur] { font-weight: var(--mk-fw-regular); color: var(--mk-text-muted); }

.bs-hint[b-r9ru8yzxur] { margin: var(--mk-s1) 0 0; font-size: var(--mk-t-micro); color: var(--mk-text-muted); }
.bs-err[b-r9ru8yzxur] { margin: var(--mk-s1) 0 0; font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); color: var(--mk-fin-negative-fg); }

.bs-select[b-r9ru8yzxur] {
    width: 100%;
    min-height: var(--mk-input-h);
    padding: 0 var(--mk-s3);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font-family: var(--mk-font);
    font-size: var(--mk-t-body);
}
.bs-select:focus-visible[b-r9ru8yzxur] { outline: none; box-shadow: var(--mk-focus-ring); border-color: var(--mk-primary); }

.bs-logo[b-r9ru8yzxur] { display: flex; align-items: center; gap: var(--mk-s4); }

.bs-logo-preview[b-r9ru8yzxur] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px dashed var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    overflow: hidden;
    font-size: var(--mk-t-page-sm);
}
.bs-logo-preview img[b-r9ru8yzxur] { width: 100%; height: 100%; object-fit: contain; }

.bs-logo-actions[b-r9ru8yzxur] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mk-s1); }

.bs-file[b-r9ru8yzxur] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--mk-s4);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
    cursor: pointer;
}
.bs-file:focus-within[b-r9ru8yzxur] { box-shadow: var(--mk-focus-ring); }

/* The real file input stays in the label's box so keyboard and screen-reader users reach it. */
[b-r9ru8yzxur] .bs-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.bs-link[b-r9ru8yzxur], .bs-skip[b-r9ru8yzxur] {
    background: none;
    border: 0;
    padding: 0;
    min-height: 24px;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
    text-decoration: underline;
    cursor: pointer;
}

[b-r9ru8yzxur] .bs-cta { min-height: 44px; margin-top: var(--mk-s2); }

.bs-skip[b-r9ru8yzxur] {
    display: block;
    margin: var(--mk-s3) auto 0;
    min-height: 44px;
    color: var(--mk-text-2);
}
/* /Components/Pages/Register/VerifyAccount.razor.rz.scp.css */
.va-page[b-e1esvi9qry] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mk-bg-app);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--mk-s6) var(--mk-s4) var(--mk-s7);
    box-sizing: border-box;
}

.va-card[b-e1esvi9qry] {
    width: 100%;
    max-width: 480px;
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-xl);
    box-shadow: var(--mk-sh-lg);
    padding: var(--mk-s6);
}

@media (max-width: 599.98px) {
    .va-card[b-e1esvi9qry] { padding: var(--mk-s5) var(--mk-s4); }
}

.va-title[b-e1esvi9qry] {
    margin: 0 0 var(--mk-s2);
    font-size: var(--mk-t-page-sm);
    font-weight: var(--mk-fw-extrabold);
    color: var(--mk-text-strong);
    line-height: var(--mk-lh-tight);
}

.va-sub[b-e1esvi9qry], .va-muted[b-e1esvi9qry] {
    margin: 0 0 var(--mk-s5);
    font-size: var(--mk-t-body);
    color: var(--mk-text-2);
    line-height: var(--mk-lh);
}

.va-channel[b-e1esvi9qry] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    padding: var(--mk-s4);
    margin-bottom: var(--mk-s4);
}
.va-channel.is-verified[b-e1esvi9qry] { border-color: var(--mk-fin-positive-br); background: var(--mk-fin-positive-lt); }

.va-channel-head[b-e1esvi9qry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

.va-channel-title[b-e1esvi9qry] {
    margin: 0;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.va-badge-ok[b-e1esvi9qry] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-fin-positive-fg);
}

.va-dest[b-e1esvi9qry] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin: var(--mk-s1) 0 var(--mk-s3);
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.va-link[b-e1esvi9qry] {
    background: none;
    border: 0;
    padding: 0;
    min-height: 24px;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
    text-decoration: underline;
    cursor: pointer;
}
.va-link:disabled[b-e1esvi9qry] { color: var(--mk-text-muted); cursor: default; }
.va-link:focus-visible[b-e1esvi9qry] { outline: none; box-shadow: var(--mk-focus-ring); border-radius: var(--mk-r-sm); }

[b-e1esvi9qry] .va-verify { margin-top: var(--mk-s3); min-height: 44px; }
[b-e1esvi9qry] .va-cta { min-height: 44px; }

.va-resend[b-e1esvi9qry] {
    margin: var(--mk-s2) 0 0;
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-muted);
    text-align: center;
}

.va-error[b-e1esvi9qry] {
    margin: var(--mk-s2) 0 0;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-fin-negative-fg);
}

.va-info[b-e1esvi9qry] {
    margin: 0 0 var(--mk-s3);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
}

.va-soon[b-e1esvi9qry] {
    margin: 0 0 var(--mk-s4);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
}

.va-edit[b-e1esvi9qry] { display: flex; flex-direction: column; gap: var(--mk-s2); }
.va-label[b-e1esvi9qry] { font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold); color: var(--mk-text); }
.va-edit-actions[b-e1esvi9qry] { display: flex; gap: var(--mk-s2); flex-wrap: wrap; }

.va-footer[b-e1esvi9qry] {
    margin: var(--mk-s5) 0 0;
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-muted);
    text-align: center;
}

.va-done[b-e1esvi9qry] { text-align: center; }
.va-done-mark[b-e1esvi9qry] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--mk-s3);
    border-radius: var(--mk-r-pill);
    background: var(--mk-fin-positive);
    color: var(--mk-text-oncolor);
    font-size: var(--mk-t-page);
    font-weight: var(--mk-fw-bold);
}
/* /Components/Pages/Reports/ReportsHub.razor.rz.scp.css */
.reports-hub[b-glkhlt30xx] {
    padding: var(--mk-s5);
    max-width: 860px;
}

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

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

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

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

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

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

/* ── Search ─────────────────────────────────────────────────────────────── */
.rh-search[b-glkhlt30xx] {
    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-glkhlt30xx] {
    color: var(--mk-text-muted);
    font-size: var(--mk-t-body);
}

.rh-search input[b-glkhlt30xx] {
    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-glkhlt30xx] {
    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-glkhlt30xx] {
    margin: 0 0 var(--mk-s4);
}

/* ── Folder ─────────────────────────────────────────────────────────────── */
.rh-folder[b-glkhlt30xx] {
    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-glkhlt30xx] {
    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-glkhlt30xx] {
    background: var(--mk-bg-subtle);
}

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

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

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

.rh-tag[b-glkhlt30xx] {
    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-glkhlt30xx] {
    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-glkhlt30xx] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mk-border);
}

.rh-item[b-glkhlt30xx] {
    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-glkhlt30xx] {
    border-top: 0;
}

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

.rh-item-icon[b-glkhlt30xx] {
    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-glkhlt30xx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

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

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

.rh-item-go[b-glkhlt30xx] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
    flex-shrink: 0;
}
/* /Components/Pages/Sales/ChallanReturnDetail.razor.rz.scp.css */
.crd-page[b-bp7zj5v0b4] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.crd-head[b-bp7zj5v0b4] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.crd-title[b-bp7zj5v0b4] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.crd-status[b-bp7zj5v0b4] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.crd-facts[b-bp7zj5v0b4] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--mk-s2) var(--mk-s4);
    margin: 0;
}

.crd-facts dt[b-bp7zj5v0b4] {
    color: var(--mk-text-muted);
    font-weight: var(--mk-fw-regular);
}

.crd-facts dd[b-bp7zj5v0b4] {
    margin: 0;
}

.crd-facts a[b-bp7zj5v0b4] {
    color: var(--mk-primary-ink);
}

.crd-actions[b-bp7zj5v0b4],
.crd-save[b-bp7zj5v0b4] {
    display: flex;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.crd-save[b-bp7zj5v0b4] {
    justify-content: flex-end;
}

.crd-r[b-bp7zj5v0b4] {
    text-align: right;
}

.crd-lines td[b-bp7zj5v0b4] {
    vertical-align: middle;
}
/* /Components/Pages/Sales/ChallanReturnNew.razor.rz.scp.css */
.crn-page[b-hl51l8tae3] {
    padding: var(--mk-s4);
    max-width: 900px;
}

.crn-head[b-hl51l8tae3] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.crn-title[b-hl51l8tae3] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.crn-grid[b-hl51l8tae3] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--mk-s3);
}

.crn-label[b-hl51l8tae3] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.crn-r[b-hl51l8tae3] {
    text-align: right;
}

.crn-lines td[b-hl51l8tae3] {
    vertical-align: middle;
}

.crn-qty[b-hl51l8tae3] {
    width: 96px;
    margin-left: auto;
    text-align: right;
}

.crn-save[b-hl51l8tae3] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 599.98px) {
    .crn-grid[b-hl51l8tae3] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/ChallanReturns.razor.rz.scp.css */
.crl-page[b-encbk3wsgc] {
    padding: var(--mk-s4);
}

.crl-head[b-encbk3wsgc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.crl-title[b-encbk3wsgc] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.crl-sub[b-encbk3wsgc] {
    margin: var(--mk-s1) 0 0;
    max-width: 75ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

[b-encbk3wsgc] .crl-link {
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}
/* /Components/Pages/Sales/CounterReturnDetail.razor.rz.scp.css */
.srd-page[b-2hegitmoto] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.srd-head[b-2hegitmoto] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.srd-title[b-2hegitmoto] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.srd-status[b-2hegitmoto] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.srd-grid[b-2hegitmoto] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-s4);
}

.srd-facts[b-2hegitmoto] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--mk-s2) var(--mk-s4);
    margin: 0;
}

.srd-facts dt[b-2hegitmoto] {
    color: var(--mk-text-muted);
    font-weight: var(--mk-fw-regular);
}

.srd-facts dd[b-2hegitmoto] {
    margin: 0;
}

.srd-facts a[b-2hegitmoto] {
    color: var(--mk-primary-ink);
}

.srd-sum[b-2hegitmoto] {
    display: flex;
    justify-content: space-between;
    padding: var(--mk-s1) 0;
    font-variant-numeric: tabular-nums;
    color: var(--mk-text-2);
}

.srd-total[b-2hegitmoto] {
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.srd-note[b-2hegitmoto] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.srd-actions[b-2hegitmoto] {
    display: flex;
    gap: var(--mk-s2);
}

@media (max-width: 1024.98px) {
    .srd-grid[b-2hegitmoto] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/CounterReturnNew.razor.rz.scp.css */
.rt-page[b-6ne34lvpv2] {
    padding: var(--mk-s4);
    max-width: 1100px;
}

.rt-head[b-6ne34lvpv2] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.rt-title[b-6ne34lvpv2] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.rt-muted[b-6ne34lvpv2] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
}

.rt-label[b-6ne34lvpv2] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.rt-num[b-6ne34lvpv2] {
    font-variant-numeric: tabular-nums;
}

.rt-r[b-6ne34lvpv2] {
    text-align: right;
}

.rt-find[b-6ne34lvpv2] {
    display: flex;
    gap: var(--mk-s2);
}

.rt-find[b-6ne34lvpv2]  .w-full {
    flex: 1;
}

.rt-results[b-6ne34lvpv2] {
    display: flex;
    flex-direction: column;
    margin-top: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    overflow: hidden;
}

.rt-result[b-6ne34lvpv2] {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr auto;
    gap: var(--mk-s3);
    padding: var(--mk-s2) var(--mk-s3);
    border: 0;
    border-top: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    text-align: left;
    cursor: pointer;
}

.rt-result:first-child[b-6ne34lvpv2] {
    border-top: 0;
}

.rt-result:hover[b-6ne34lvpv2],
.rt-result:focus-visible[b-6ne34lvpv2] {
    background: var(--mk-bg-hover);
}

.rt-result-no[b-6ne34lvpv2],
.rt-bill-no[b-6ne34lvpv2] {
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
}

.rt-bill[b-6ne34lvpv2] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-s4);
    flex-wrap: wrap;
}

.rt-bill-figs[b-6ne34lvpv2] {
    display: flex;
    gap: var(--mk-s4);
    color: var(--mk-text-2);
    font-size: var(--mk-fs-sm);
}

.rt-lines td[b-6ne34lvpv2] {
    vertical-align: middle;
}

.rt-qty[b-6ne34lvpv2] {
    width: 96px;
    margin-left: auto;
    text-align: right;
}

.rt-done-line td[b-6ne34lvpv2] {
    color: var(--mk-text-muted);
}

.rt-grid[b-6ne34lvpv2] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--mk-s4);
}

.rt-methods[b-6ne34lvpv2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
}

.rt-method[b-6ne34lvpv2] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    cursor: pointer;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text);
}

.rt-method.is-on[b-6ne34lvpv2] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
}

.rt-sum[b-6ne34lvpv2] {
    display: flex;
    justify-content: space-between;
    padding: var(--mk-s1) 0;
    color: var(--mk-text-2);
}

.rt-sum-strong[b-6ne34lvpv2] {
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.rt-note[b-6ne34lvpv2] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
    margin: var(--mk-s2) 0 0;
}

.rt-done-title[b-6ne34lvpv2] {
    font-size: var(--mk-fs-lg);
    font-weight: var(--mk-fw-semibold);
    margin-bottom: var(--mk-s2);
}

.rt-settle[b-6ne34lvpv2] {
    margin: 0 0 var(--mk-s3);
    padding-left: var(--mk-s5);
    color: var(--mk-text-2);
}

.rt-actions[b-6ne34lvpv2] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

@media (max-width: 1024.98px) {
    .rt-grid[b-6ne34lvpv2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599.98px) {
    .rt-result[b-6ne34lvpv2] {
        grid-template-columns: 1fr auto;
    }
}
/* /Components/Pages/Sales/CounterReturns.razor.rz.scp.css */
.srl-page[b-wvn7i3mkda] {
    padding: var(--mk-s4);
}

.srl-head[b-wvn7i3mkda] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.srl-title[b-wvn7i3mkda] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.srl-sub[b-wvn7i3mkda] {
    margin: var(--mk-s1) 0 0;
    max-width: 70ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.srl-loading[b-wvn7i3mkda] {
    display: flex;
    justify-content: center;
    padding: var(--mk-s7) 0;
}

[b-wvn7i3mkda] .srl-link {
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

[b-wvn7i3mkda] .srl-status {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    border: 1px solid var(--mk-border-strong);
    color: var(--mk-text);
    white-space: nowrap;
}

[b-wvn7i3mkda] .srl-wait {
    border-color: var(--mk-warning);
    color: var(--mk-warning-fg);
}

[b-wvn7i3mkda] .srl-ok {
    border-color: var(--mk-success);
    color: var(--mk-success-fg);
}

[b-wvn7i3mkda] .srl-off {
    color: var(--mk-text-muted);
}

[b-wvn7i3mkda] .srl-actions {
    display: flex;
    gap: var(--mk-s1);
    justify-content: flex-end;
}
/* /Components/Pages/Sales/DeliveryChallanDetail.razor.rz.scp.css */
.dcd-page[b-melpqwl3vk] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.dcd-head[b-melpqwl3vk] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.dcd-head-right[b-melpqwl3vk] {
    margin-left: auto;
}

.dcd-title[b-melpqwl3vk] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.dcd-status[b-melpqwl3vk] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.dcd-facts[b-melpqwl3vk] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--mk-s2) var(--mk-s4);
    margin: 0;
}

.dcd-facts dt[b-melpqwl3vk] {
    color: var(--mk-text-muted);
    font-weight: var(--mk-fw-regular);
}

.dcd-facts dd[b-melpqwl3vk] {
    margin: 0;
}

.dcd-facts a[b-melpqwl3vk] {
    color: var(--mk-primary-ink);
}

.dcd-pack[b-melpqwl3vk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.dcd-actions[b-melpqwl3vk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

@media (max-width: 599.98px) {
    .dcd-pack[b-melpqwl3vk] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/DeliveryChallanNew.razor.rz.scp.css */
.dcn-page[b-hyjg8t170m] {
    padding: var(--mk-s4);
    max-width: 960px;
}

.dcn-head[b-hyjg8t170m] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.dcn-title[b-hyjg8t170m] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.dcn-grid[b-hyjg8t170m] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--mk-s3);
}

.dcn-label[b-hyjg8t170m] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.dcn-r[b-hyjg8t170m] {
    text-align: right;
}

.dcn-lines td[b-hyjg8t170m] {
    vertical-align: middle;
}

.dcn-qty[b-hyjg8t170m] {
    width: 96px;
    margin-left: auto;
    text-align: right;
}

.dcn-muted[b-hyjg8t170m] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
}

.dcn-save[b-hyjg8t170m] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mk-s3);
}

@media (max-width: 599.98px) {
    .dcn-grid[b-hyjg8t170m] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/DeliveryChallans.razor.rz.scp.css */
.dcl-page[b-o26vj73j7k] {
    padding: var(--mk-s4);
}

.dcl-head[b-o26vj73j7k] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.dcl-title[b-o26vj73j7k] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.dcl-sub[b-o26vj73j7k] {
    margin: var(--mk-s1) 0 0;
    max-width: 70ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.dcl-loading[b-o26vj73j7k] {
    display: flex;
    justify-content: center;
    padding: var(--mk-s7) 0;
}

[b-o26vj73j7k] .dcl-link {
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}
/* /Components/Pages/Sales/SalesOrderBill.razor.rz.scp.css */
.sob-page[b-2il63ygt5b] {
    padding: var(--mk-s4);
    max-width: 960px;
}

.sob-head[b-2il63ygt5b] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s3);
}

.sob-title[b-2il63ygt5b] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.sob-muted[b-2il63ygt5b] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
    max-width: 75ch;
}

.sob-sum[b-2il63ygt5b] {
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--mk-s4);
}

.sob-pay[b-2il63ygt5b] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.sob-label[b-2il63ygt5b] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.sob-save[b-2il63ygt5b] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mk-s4);
}

@media (max-width: 599.98px) {
    .sob-pay[b-2il63ygt5b] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/SalesOrderDetail.razor.rz.scp.css */
.sod-page[b-lv708cvcs6] {
    padding: var(--mk-s4);
    max-width: 1100px;
}

.sod-head[b-lv708cvcs6] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.sod-title[b-lv708cvcs6] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.sod-status[b-lv708cvcs6] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.sod-top[b-lv708cvcs6] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-s4);
    flex-wrap: wrap;
}

.sod-cust[b-lv708cvcs6] {
    font-weight: var(--mk-fw-semibold);
    font-size: var(--mk-fs-lg);
}

.sod-muted[b-lv708cvcs6] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
}

.sod-total[b-lv708cvcs6] {
    font-size: var(--mk-fs-xl);
    font-weight: var(--mk-fw-bold);
    font-variant-numeric: tabular-nums;
}

.sod-actions[b-lv708cvcs6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

[b-lv708cvcs6] .sod-link {
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}
/* /Components/Pages/Settings/BranchesSettings.razor.rz.scp.css */
.br-head[b-b0qzgqeea0] {
    margin-bottom: var(--mk-s4);
}

.br-title[b-b0qzgqeea0] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.br-sub[b-b0qzgqeea0] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.br-section[b-b0qzgqeea0] {
    margin-bottom: var(--mk-s6);
}

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

.br-section-title[b-b0qzgqeea0] {
    margin: 0;
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.br-hint[b-b0qzgqeea0] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.br-hint a[b-b0qzgqeea0] {
    color: var(--mk-primary-ink);
}

.br-grid[b-b0qzgqeea0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.br-label[b-b0qzgqeea0] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.br-checks[b-b0qzgqeea0] {
    display: flex;
    gap: var(--mk-s4);
    flex-wrap: wrap;
}

.br-check[b-b0qzgqeea0] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-sm);
}

.br-actions[b-b0qzgqeea0] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

[b-b0qzgqeea0] .br-tag {
    display: inline-block;
    margin-left: var(--mk-s1);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle);
    color: var(--mk-text-2);
    font-size: var(--mk-fs-xs);
}

@media (max-width: 599.98px) {
    .br-grid[b-b0qzgqeea0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/FeaturesSettings.razor.rz.scp.css */
.ft-head[b-uvd7gnmhpp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.ft-title[b-uvd7gnmhpp] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.ft-sub[b-uvd7gnmhpp] {
    margin: var(--mk-s1) 0 0;
    max-width: 60ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.ft-search[b-uvd7gnmhpp] {
    min-width: 240px;
    flex: 0 1 320px;
}

.ft-chips[b-uvd7gnmhpp] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.ft-chip[b-uvd7gnmhpp] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.ft-chip.is-on[b-uvd7gnmhpp] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.ft-group[b-uvd7gnmhpp] {
    margin-bottom: var(--mk-s5);
}

.ft-group-title[b-uvd7gnmhpp] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
    margin: 0 0 var(--mk-s2);
}

.ft-list[b-uvd7gnmhpp] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-card);
    background: var(--mk-bg-surface);
    overflow: hidden;
}

.ft-row[b-uvd7gnmhpp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s4);
    padding: var(--mk-s3) var(--mk-s4);
    border-top: 1px solid var(--mk-border);
}

.ft-row:first-child[b-uvd7gnmhpp] {
    border-top: 0;
}

.ft-row.is-child[b-uvd7gnmhpp] {
    padding-left: var(--mk-s7);
}

.ft-text[b-uvd7gnmhpp] {
    min-width: 0;
}

.ft-name[b-uvd7gnmhpp] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
}

.ft-desc[b-uvd7gnmhpp],
.ft-note[b-uvd7gnmhpp] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
    margin-top: 2px;
}

.ft-note a[b-uvd7gnmhpp] {
    color: var(--mk-primary-ink);
}

.ft-actions[b-uvd7gnmhpp] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    flex-shrink: 0;
}

.ft-always[b-uvd7gnmhpp] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.ft-empty[b-uvd7gnmhpp] {
    color: var(--mk-text-muted);
}

@media (max-width: 599.98px) {
    .ft-search[b-uvd7gnmhpp] {
        flex-basis: 100%;
    }

    .ft-row.is-child[b-uvd7gnmhpp] {
        padding-left: var(--mk-s5);
    }
}

.ft-setup-link[b-uvd7gnmhpp] {
    align-self: center;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Settings/NotificationRules.razor.rz.scp.css */
.nr-head[b-9ofti3buzz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.nr-title[b-9ofti3buzz] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.nr-sub[b-9ofti3buzz] {
    margin: var(--mk-s1) 0 0;
    max-width: 64ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.nr-tabs[b-9ofti3buzz] {
    display: flex;
    gap: var(--mk-s2);
}

.nr-tab[b-9ofti3buzz] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.nr-tab.is-on[b-9ofti3buzz] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.nr-event[b-9ofti3buzz] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    padding: var(--mk-s4);
    margin-bottom: var(--mk-s3);
}

.nr-event.is-off[b-9ofti3buzz] {
    opacity: 0.7;
}

.nr-event-name[b-9ofti3buzz] {
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

.nr-aud[b-9ofti3buzz],
.nr-custom[b-9ofti3buzz] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-medium);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle);
    color: var(--mk-text-2);
}

.nr-event-desc[b-9ofti3buzz] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
    margin-top: var(--mk-s1);
}

.nr-note[b-9ofti3buzz],
.nr-blocked[b-9ofti3buzz] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-warning-fg);
    margin-top: var(--mk-s1);
}

.nr-note a[b-9ofti3buzz] {
    color: var(--mk-primary-ink);
}

.nr-channels[b-9ofti3buzz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--mk-s2);
    margin-top: var(--mk-s3);
}

.nr-channel[b-9ofti3buzz] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s2) var(--mk-s3);
}

.nr-channel-row[b-9ofti3buzz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
}

.nr-channel-name[b-9ofti3buzz] {
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
}

.nr-spacer[b-9ofti3buzz] {
    flex: 1;
}

.nr-editor[b-9ofti3buzz] {
    margin-top: var(--mk-s3);
    padding-top: var(--mk-s3);
    border-top: 1px solid var(--mk-border);
}

.nr-editor-title[b-9ofti3buzz] {
    font-weight: var(--mk-fw-semibold);
    font-size: var(--mk-fs-sm);
    margin-bottom: var(--mk-s2);
}

.nr-label[b-9ofti3buzz] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin: var(--mk-s2) 0 var(--mk-s1);
}

.nr-placeholders[b-9ofti3buzz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s1);
    margin-top: var(--mk-s2);
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.nr-ph[b-9ofti3buzz] {
    border: 1px dashed var(--mk-border-strong, var(--mk-border));
    background: transparent;
    color: var(--mk-text-2);
    border-radius: var(--mk-r-sm);
    padding: 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    cursor: pointer;
}

.nr-preview[b-9ofti3buzz] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.nr-preview-subject[b-9ofti3buzz] {
    font-weight: var(--mk-fw-semibold);
    margin-bottom: var(--mk-s1);
}

.nr-preview-body[b-9ofti3buzz] {
    white-space: pre-wrap;
}

.nr-actions[b-9ofti3buzz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-top: var(--mk-s3);
    flex-wrap: wrap;
}

[b-9ofti3buzz] .nr-status {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
}

[b-9ofti3buzz] .nr-status-sent {
    color: var(--mk-success-fg, var(--mk-success));
}

[b-9ofti3buzz] .nr-status-skipped {
    color: var(--mk-text-muted);
}

[b-9ofti3buzz] .nr-status-failed {
    color: var(--mk-danger);
}

[b-9ofti3buzz] .nr-log-body {
    display: inline-block;
    max-width: 48ch;
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
}

@media (max-width: 599.98px) {
    .nr-channels[b-9ofti3buzz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/PlanAndScale.razor.rz.scp.css */
.ps-head[b-gvi4hjalv5] {
    margin-bottom: var(--mk-s4);
}

.ps-title[b-gvi4hjalv5] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.ps-sub[b-gvi4hjalv5] {
    margin: var(--mk-s1) 0 var(--mk-s3);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.ps-section[b-gvi4hjalv5] {
    margin: var(--mk-s5) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.ps-cards[b-gvi4hjalv5],
.ps-usage[b-gvi4hjalv5],
.ps-presets[b-gvi4hjalv5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.ps-card[b-gvi4hjalv5],
.ps-meter[b-gvi4hjalv5],
.ps-preset[b-gvi4hjalv5] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    padding: var(--mk-s3) var(--mk-s4);
}

.ps-label[b-gvi4hjalv5] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.ps-value[b-gvi4hjalv5] {
    font-size: var(--mk-fs-lg, var(--mk-fs-md));
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.ps-warn[b-gvi4hjalv5],
.ps-meter-note[b-gvi4hjalv5] {
    margin-top: var(--mk-s1);
    font-size: var(--mk-fs-xs);
    color: var(--mk-warning-fg);
}

.ps-meter-top[b-gvi4hjalv5] {
    display: flex;
    justify-content: space-between;
    font-size: var(--mk-fs-sm);
    font-variant-numeric: tabular-nums;
}

.ps-bar[b-gvi4hjalv5] {
    height: 6px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-bg-subtle);
    margin-top: var(--mk-s2);
    overflow: hidden;
}

.ps-bar span[b-gvi4hjalv5] {
    display: block;
    height: 100%;
    background: var(--mk-financial, var(--mk-primary));
}

.ps-meter.is-near .ps-bar span[b-gvi4hjalv5] {
    background: var(--mk-warning);
}

.ps-meter.is-at .ps-bar span[b-gvi4hjalv5],
.ps-meter.is-over .ps-bar span[b-gvi4hjalv5] {
    background: var(--mk-danger);
}

.ps-preset[b-gvi4hjalv5] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    align-items: flex-start;
}

.ps-preset.is-on[b-gvi4hjalv5] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
}

.ps-preset-name[b-gvi4hjalv5] {
    font-weight: var(--mk-fw-semibold);
}

.ps-preset-desc[b-gvi4hjalv5],
.ps-preset-plan[b-gvi4hjalv5] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.ps-result[b-gvi4hjalv5] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.ps-result a[b-gvi4hjalv5] {
    color: var(--mk-primary-ink);
}

.ps-scroll[b-gvi4hjalv5] {
    overflow-x: auto;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
}

.ps-table[b-gvi4hjalv5] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mk-fs-sm);
}

.ps-table th[b-gvi4hjalv5],
.ps-table td[b-gvi4hjalv5] {
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    text-align: center;
    white-space: nowrap;
}

.ps-table th[b-gvi4hjalv5] {
    background: var(--mk-bg-subtle);
    font-weight: var(--mk-fw-semibold);
}

.ps-table th.is-current[b-gvi4hjalv5] {
    color: var(--mk-primary-ink);
}

.ps-first[b-gvi4hjalv5] {
    text-align: left !important;
    position: sticky;
    left: 0;
    background: var(--mk-bg-surface);
}

th.ps-first[b-gvi4hjalv5] {
    background: var(--mk-bg-subtle);
}

.ps-num[b-gvi4hjalv5] {
    font-variant-numeric: tabular-nums;
}

.ps-chip[b-gvi4hjalv5] {
    margin-left: var(--mk-s1);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-size: var(--mk-fs-xs);
}
/* /Components/Pages/Settings/PrintTemplates.razor.rz.scp.css */
.pt-page[b-x2eve52bri] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.pt-head[b-x2eve52bri] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.pt-title[b-x2eve52bri] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.pt-sub[b-x2eve52bri] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.pt-grid[b-x2eve52bri] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.pt-label[b-x2eve52bri] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.pt-toggles[b-x2eve52bri] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mk-s2) var(--mk-s4);
    margin: var(--mk-s4) 0;
    color: var(--mk-text);
}

.pt-toggles label[b-x2eve52bri] {
    display: flex;
    gap: var(--mk-s2);
    align-items: center;
}

.pt-actions[b-x2eve52bri] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

[b-x2eve52bri] .pt-row-actions {
    display: flex;
    gap: var(--mk-s1);
    justify-content: flex-end;
}

@media (max-width: 1024.98px) {
    .pt-grid[b-x2eve52bri],
    .pt-toggles[b-x2eve52bri] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 599.98px) {
    .pt-grid[b-x2eve52bri],
    .pt-toggles[b-x2eve52bri] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/RegionsSettings.razor.rz.scp.css */
.rg-head[b-3hlxpfk17r] {
    margin-bottom: var(--mk-s4);
}

.rg-title[b-3hlxpfk17r] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.rg-sub[b-3hlxpfk17r],
.rg-muted[b-3hlxpfk17r] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.rg-sub[b-3hlxpfk17r] {
    margin: var(--mk-s1) 0 0;
}

.rg-section[b-3hlxpfk17r] {
    margin: var(--mk-s5) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.rg-add[b-3hlxpfk17r] {
    display: flex;
    gap: var(--mk-s2);
    max-width: 480px;
    margin-bottom: var(--mk-s3);
}

.rg-regions[b-3hlxpfk17r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--mk-s3);
}

.rg-region[b-3hlxpfk17r],
.rg-card[b-3hlxpfk17r] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    padding: var(--mk-s3) var(--mk-s4);
}

.rg-region-name[b-3hlxpfk17r] {
    font-weight: var(--mk-fw-semibold);
}

.rg-cluster[b-3hlxpfk17r] {
    font-size: var(--mk-fs-sm);
    padding: var(--mk-s1) 0;
    border-bottom: 1px solid var(--mk-border);
}

.rg-row[b-3hlxpfk17r] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--mk-s3);
    align-items: center;
    padding: var(--mk-s2) 0;
    border-bottom: 1px solid var(--mk-border);
}

.rg-row:last-child[b-3hlxpfk17r] {
    border-bottom: 0;
}

.rg-branch[b-3hlxpfk17r] {
    font-weight: var(--mk-fw-medium);
}

.rg-tabs[b-3hlxpfk17r] {
    display: flex;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
}

.rg-tab[b-3hlxpfk17r] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.rg-tab.is-on[b-3hlxpfk17r] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

@media (max-width: 599.98px) {
    .rg-row[b-3hlxpfk17r] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/SalesReturnSettings.razor.rz.scp.css */
.srs-page[b-roz64f1s3j] {
    padding: var(--mk-s4);
    max-width: 760px;
}

.srs-head[b-roz64f1s3j] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.srs-title[b-roz64f1s3j] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.srs-row[b-roz64f1s3j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s4);
    padding: var(--mk-s3) 0;
    border-top: 1px solid var(--mk-border);
}

.srs-row:first-child[b-roz64f1s3j] {
    border-top: 0;
}

.srs-child[b-roz64f1s3j] {
    padding-left: var(--mk-s5);
}

.srs-name[b-roz64f1s3j] {
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
}

.srs-desc[b-roz64f1s3j] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.srs-num[b-roz64f1s3j] {
    width: 120px;
    text-align: right;
}

.srs-group[b-roz64f1s3j] {
    margin: var(--mk-s4) 0 0;
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.srs-save[b-roz64f1s3j] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mk-s4);
}
/* /Components/Pages/Settings/SetupQuestions.razor.rz.scp.css */
.sq-page[b-tm6n9lprky] {
    max-width: 760px;
}

.sq-title[b-tm6n9lprky] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.sq-sub[b-tm6n9lprky] {
    margin: var(--mk-s1) 0 var(--mk-s4);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.sq-sub a[b-tm6n9lprky] {
    color: var(--mk-primary-ink);
}

.sq-list[b-tm6n9lprky] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
}

.sq-q[b-tm6n9lprky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s4);
    padding: var(--mk-s3) var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
}

.sq-q:last-child[b-tm6n9lprky] {
    border-bottom: 0;
}

.sq-q-title[b-tm6n9lprky] {
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
}

.sq-help[b-tm6n9lprky] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.sq-locked[b-tm6n9lprky] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-warning-fg);
    margin-top: var(--mk-s1);
}

.sq-choice[b-tm6n9lprky] {
    display: flex;
    gap: var(--mk-s1);
    flex-shrink: 0;
}

.sq-btn[b-tm6n9lprky] {
    min-width: 56px;
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.sq-btn.is-on[b-tm6n9lprky] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.sq-skipped[b-tm6n9lprky] {
    margin-top: var(--mk-s3);
    font-size: var(--mk-fs-sm);
    color: var(--mk-warning-fg);
}

.sq-actions[b-tm6n9lprky] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

@media (max-width: 599.98px) {
    .sq-q[b-tm6n9lprky] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/Website/DeleteAccount.razor.rz.scp.css */
.deletion-page[b-b08lyicrmg] { max-width: 860px; margin: 0 auto; padding: 64px 24px; color: #1e293b; }
.eyebrow[b-b08lyicrmg] { color: var(--brand-ink); font-weight: 700; }
h1[b-b08lyicrmg] { font-size: clamp(28px, 5vw, 44px); line-height: 1.2; margin: 12px 0 20px; }
h2[b-b08lyicrmg] { font-size: 22px; margin-bottom: 14px; }
p[b-b08lyicrmg], li[b-b08lyicrmg] { line-height: 1.8; margin-bottom: 12px; }
section[b-b08lyicrmg] { margin-top: 36px; }
ol[b-b08lyicrmg] { padding-left: 24px; }
a[b-b08lyicrmg] { color: var(--brand-ink); overflow-wrap: anywhere; text-decoration: underline; }
.request-card[b-b08lyicrmg] { padding: 24px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; }
.request-button[b-b08lyicrmg] { 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-b08lyicrmg] { outline: 3px solid #0f172a; outline-offset: 4px; }
.hint[b-b08lyicrmg] { font-size: 14px; color: #475569; }
@media (max-width: 540px) { .deletion-page[b-b08lyicrmg] { padding: 40px 16px; } .request-card[b-b08lyicrmg] { 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-qmj1imcfh2] { text-align: center; margin-top: 36px; }

.pp-toggle[b-qmj1imcfh2] {
    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-qmj1imcfh2] {
    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-qmj1imcfh2] { color: var(--mk-site-ink); }

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

.pp-card[b-qmj1imcfh2] {
    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-qmj1imcfh2] {
    font-size: var(--mk-site-h4);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-site-ink);
}

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

.pp-dur[b-qmj1imcfh2] {
    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-qmj1imcfh2] {
    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-qmj1imcfh2] { color: var(--mk-site-ink); }

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

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

.pp-amount[b-qmj1imcfh2] {
    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-qmj1imcfh2] {
    font-size: var(--mk-site-body);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-site-muted);
    letter-spacing: 0;
}

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

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

.pp-list[b-qmj1imcfh2] {
    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-qmj1imcfh2] {
    font-size: var(--mk-site-small);
    color: var(--mk-site-text);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

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

.pp-cta[b-qmj1imcfh2] {
    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-qmj1imcfh2] { background: var(--mk-site-cta-hover); color: var(--mk-site-on-ink); }

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

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

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

.pp-error[b-qmj1imcfh2] { 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-qmj1imcfh2] { display: flex; width: 100%; }
    .pp-toggle-btn[b-qmj1imcfh2] { flex: 1; justify-content: center; padding: 0 10px; }
    .pp-card[b-qmj1imcfh2] { padding: 28px 20px 22px; }
    .pp-amount[b-qmj1imcfh2] { font-size: 2.5rem; }
    .pp-list[b-qmj1imcfh2] { 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-yvmvyz12no] {
    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-yvmvyz12no] {
    width: 100%;
    max-width: 460px;
}

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

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

.wp-brand__mark[b-yvmvyz12no] {
    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-yvmvyz12no] {
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
}

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

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

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

.wp-sub[b-yvmvyz12no] {
    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-yvmvyz12no] {
    margin-bottom: var(--mk-s6);
    font-size: var(--mk-t-body);
}

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

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

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

.wp-point__icon[b-yvmvyz12no] {
    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-yvmvyz12no] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s6);
}

.wp-btn[b-yvmvyz12no] {
    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-yvmvyz12no] {
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
}

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

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

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

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

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

@media (max-width: 599.98px) {

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

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

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

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

    .wp-btn[b-yvmvyz12no] {
        transition: none;
    }
}
/* /Components/Shared/AgriAlertStrip.razor.rz.scp.css */
/* Surface fill with a coloured left edge rather than a pastel tile: the -lt fills are not
   redefined for dark mode, so a pastel tile with themed text goes unreadable there. */
.agri-strip[b-senp1bj6d1] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.agri-stat[b-senp1bj6d1] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    padding: var(--mk-s3) var(--mk-s4);
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-left: 3px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    color: var(--mk-text);
    text-decoration: none;
}

.agri-stat:hover[b-senp1bj6d1] { border-color: var(--mk-primary); }
.agri-stat.warn[b-senp1bj6d1] { border-left-color: var(--mk-warning); }
.agri-stat.danger[b-senp1bj6d1] { border-left-color: var(--mk-danger); }
.agri-stat.info[b-senp1bj6d1] { border-left-color: var(--mk-info); }

.agri-stat-value[b-senp1bj6d1] {
    font-size: var(--mk-t-h3, 1.25rem);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.agri-stat.warn .agri-stat-value[b-senp1bj6d1] { color: var(--mk-warning-fg); }
.agri-stat.danger .agri-stat-value[b-senp1bj6d1] { color: var(--mk-danger-fg); }

.agri-stat-label[b-senp1bj6d1] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

@media (max-width: 1440.98px) {
    .agri-strip[b-senp1bj6d1] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 599.98px) {
    .agri-strip[b-senp1bj6d1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /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-nvtk7c4n5f] {
    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-nvtk7c4n5f]::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-nvtk7c4n5f]::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-nvtk7c4n5f] { position: relative; z-index: 1; max-width: 460px; }

/* ── Logo lockup ─────────────────────────────────────────────── */
.lb-logo[b-nvtk7c4n5f] {
    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-nvtk7c4n5f] { opacity: .85; color: var(--mk-hero-fg); }
.lb-logo-icon[b-nvtk7c4n5f] {
    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-nvtk7c4n5f] { color: var(--mk-orange-ink); }

/* ── Copy ────────────────────────────────────────────────────── */
.lb-eyebrow[b-nvtk7c4n5f] {
    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-nvtk7c4n5f] {
    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-nvtk7c4n5f] {
    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-nvtk7c4n5f] {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px;
}
.lb-feat[b-nvtk7c4n5f] {
    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-nvtk7c4n5f] {
    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-nvtk7c4n5f] {
    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-nvtk7c4n5f] {
    flex: 1; text-align: center;
    padding: 15px 12px;
    border-right: 1px solid var(--mk-hero-line);
}
.lb-stat:last-child[b-nvtk7c4n5f] { border-right: none; }
.lb-stat-num[b-nvtk7c4n5f] { font-size: var(--mk-t-section); font-weight: var(--mk-fw-extrabold); color: var(--mk-hero-fg); line-height: 1; }
.lb-stat-lbl[b-nvtk7c4n5f] { 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-nvtk7c4n5f] { padding: 40px; }
    .lb-headline[b-nvtk7c4n5f] { 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-nvtk7c4n5f] { display: none; }
    .lb-sub[b-nvtk7c4n5f] { 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-nvtk7c4n5f] { display: none; }
}
/* Ultrawide — don't let the brand copy stretch thin across the panel. */
@media (min-width: 1600px) {
    .login-brand-inner[b-nvtk7c4n5f] { 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-nvtk7c4n5f] { display: none; }
}
@media (min-width: 769px) and (max-height: 520px) {
    .lb-features[b-nvtk7c4n5f] { display: none; }
    .login-brand[b-nvtk7c4n5f] { 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-vwfre1smnr] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-5);
}

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

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

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

.bs-group-head[b-vwfre1smnr] {
    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-vwfre1smnr] {
    display: flex;
    flex-direction: column;
}

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

.bs-row[b-vwfre1smnr] {
    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-vwfre1smnr] {
    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-vwfre1smnr] {
    opacity: .5;
}

.bs-row-text[b-vwfre1smnr] {
    /* 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-vwfre1smnr] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-strong);
}

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

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

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

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

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

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

.bs-toggle-track[b-vwfre1smnr]::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-vwfre1smnr] {
    background: var(--mk-primary);
}

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

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

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

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

.bs-select[b-vwfre1smnr],
.bs-text[b-vwfre1smnr] {
    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-vwfre1smnr],
.bs-text:focus[b-vwfre1smnr] {
    border-color: var(--mk-primary);
}

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

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

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

.bs-step[b-vwfre1smnr] {
    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-vwfre1smnr] {
    background: var(--mk-bg-subtle);
    border-color: var(--mk-border-strong);
}

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

.bs-step-value[b-vwfre1smnr] {
    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-vwfre1smnr] {
    padding: var(--mk-space-8);
    text-align: center;
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

.bs-error[b-vwfre1smnr] {
    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-vwfre1smnr] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mk-space-2);
    }

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

    .bs-select[b-vwfre1smnr],
    .bs-text[b-vwfre1smnr] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Shared/FeatureAccessBadge.razor.rz.scp.css */
.fab[b-rfjyt7tf5m] {
    display: inline-flex; align-items: center; gap: var(--mk-s1);
    padding: 2px var(--mk-s2);
    border-radius: var(--mk-r-sm);
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    line-height: 1.5;
    white-space: nowrap;
}
.fab-available[b-rfjyt7tf5m]  { color: var(--mk-success-fg); background: var(--mk-success-lt); }
.fab-limited[b-rfjyt7tf5m]    { color: var(--mk-warning-fg); background: var(--mk-warning-lt); }
.fab-locked[b-rfjyt7tf5m]     { color: var(--mk-draft);      background: var(--mk-draft-lt); }
.fab-trial[b-rfjyt7tf5m]      { color: var(--mk-info-fg);    background: var(--mk-info-lt); }
.fab-comingsoon[b-rfjyt7tf5m] { color: var(--mk-financial-fg); background: var(--mk-financial-soft); }
/* /Components/Shared/KhataAccountPicker.razor.rz.scp.css */
/* The dropdown itself is StackSelect, styled like every other Personal Finance account field.
   Only the two things that are the picker's own live here. */

/* Quick-add bar: StackSelect renders w-full, so hold it to a width beside the amount box. */
.kap-compact[b-qpk0xiv4tz] { width: 180px; max-width: 40%; flex-shrink: 0; }

.kap-hint[b-qpk0xiv4tz] { font-size: var(--mk-t-micro); color: var(--mk-text-muted); margin-top: var(--mk-s1); }
.kap-hint a[b-qpk0xiv4tz] { color: var(--mk-primary-ink); font-weight: var(--mk-fw-semibold); }
/* /Components/Shared/KhataShareBadge.razor.rz.scp.css */
.mk-share-badge[b-4qepg8kaqi] {
    display: flex;
    align-items: flex-start;
    gap: var(--mk-s2);
    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-2);
    font-size: var(--mk-t-secondary);
    line-height: 1.45;
    margin-bottom: var(--mk-s3);
}

.mk-share-badge strong[b-4qepg8kaqi] { color: var(--mk-text-strong); font-weight: var(--mk-fw-semibold); }

.mk-share-badge.is-on[b-4qepg8kaqi] {
    border-color: var(--mk-fin-positive-br);
    background: var(--mk-fin-positive-lt);
}

.mk-share-badge-icon[b-4qepg8kaqi] { flex-shrink: 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-kmd5jmj9ud] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.mk-dg-toolbar[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    position: relative;
    display: flex; align-items: center;
    flex: 1 1 14rem;
    max-width: 22rem;
    min-width: 0;
}

.mk-dg-search svg[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    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-kmd5jmj9ud]::placeholder { color: var(--mk-text-muted); }
.mk-dg-search input:focus[b-kmd5jmj9ud] { 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-kmd5jmj9ud]  .mk-grid-search input,
.mk-dg-compact .mk-dg-toolbar[b-kmd5jmj9ud]  .mk-grid-filter select,
.mk-dg-compact .mk-dg-toolbar[b-kmd5jmj9ud]  .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-kmd5jmj9ud] {
    overflow-x: auto;
}

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

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

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

.mk-dg-table thead th[b-kmd5jmj9ud] {
    /* Spec §8.4: #F8FAFC header, 13px semibold labels, header stays put on a long list. */
    position: sticky;
    top: 0;
    /* Above the pinned last-column cells (z 1), so a header filter menu opened near the
       right edge is not painted under them. */
    z-index: 3;
    height: var(--mk-row-h);
    background: var(--mk-bg-table-head);
    border-bottom: 1px solid var(--mk-border);
    padding: var(--mk-s2) var(--mk-s3);
    text-align: left;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-t-w-th);
    color: var(--mk-text-2);
    white-space: nowrap;
    vertical-align: middle;
}

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

.mk-dg-table tbody td[b-kmd5jmj9ud] {
    height: var(--mk-row-h);   /* 48px rows, spec §8.4 */
    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-kmd5jmj9ud] {
    height: auto;
    padding: var(--mk-s1) var(--mk-s2);
}

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

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

.mk-dg-center[b-kmd5jmj9ud] { text-align: center; }
.mk-dg-end[b-kmd5jmj9ud] { text-align: right; }
/* The header's own `text-align: left` outranks the two classes above, so aligned headers
   need the extra weight — a right-aligned amount column with a left-aligned title reads
   as two columns. The label goes to the right edge, the funnel to the left. */
.mk-dg-table thead th.mk-dg-end[b-kmd5jmj9ud] { text-align: right; }
.mk-dg-table thead th.mk-dg-end .mk-dg-head[b-kmd5jmj9ud] { flex-direction: row-reverse; }
.mk-dg-table thead th.mk-dg-center[b-kmd5jmj9ud] { text-align: center; }
.mk-dg-table thead th.mk-dg-center .mk-dg-head[b-kmd5jmj9ud] { justify-content: center; }
/* Numeric columns: tabular figures so a column of amounts lines up digit for digit. */
.mk-dg-num[b-kmd5jmj9ud] { font-variant-numeric: tabular-nums; }

.mk-dg-empty td[b-kmd5jmj9ud] {
    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-kmd5jmj9ud]  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-kmd5jmj9ud] {
    display: flex;
    align-items: center;
    gap: var(--mk-s1);
    justify-content: space-between;
}

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

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

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

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

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

.mk-dg-funnel[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    width: 100%;
    height: 100%;
}

.mk-dg-funnel:hover[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    color: var(--mk-primary-ink);
}

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

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

.mk-dg-menu[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    left: auto;
    right: 0;
}

.mk-dg-menu-op[b-kmd5jmj9ud],
.mk-dg-menu-value[b-kmd5jmj9ud] {
    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-kmd5jmj9ud],
.mk-dg-menu-value:focus[b-kmd5jmj9ud] {
    outline: none;
    border-color: var(--mk-primary);
    box-shadow: var(--mk-focus-ring);
}

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

.mk-dg-menu-actions[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    color: var(--mk-text-oncolor);
    background: var(--mk-primary);
    border-color: var(--mk-primary);
}

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

.mk-dg-btn:disabled[b-kmd5jmj9ud] { opacity: .6; cursor: default; }

/* ── Saved views ────────────────────────────────────────────────────────── */

/* Pushed to the right end of the toolbar, after the page's own controls. */
.mk-dg-views[b-kmd5jmj9ud] {
    position: relative;
    margin-left: auto;
}

.mk-dg-views-btn[b-kmd5jmj9ud] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    height: var(--mk-s6);
    max-width: 16rem;
    padding: 0 var(--mk-s3);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    cursor: pointer;
}

.mk-dg-views-btn span[b-kmd5jmj9ud] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-dg-views-btn svg[b-kmd5jmj9ud] { flex: none; width: var(--mk-s4); height: var(--mk-s4); color: var(--mk-text-muted); }
.mk-dg-views-btn:hover[b-kmd5jmj9ud] { border-color: var(--mk-border-strong); }
.mk-dg-views-btn.is-on[b-kmd5jmj9ud] { border-color: var(--mk-primary-border); background: var(--mk-primary-soft); color: var(--mk-primary-ink); }
.mk-dg-views-btn.is-on svg[b-kmd5jmj9ud] { color: var(--mk-primary-ink); }

.mk-dg-views-menu[b-kmd5jmj9ud] {
    position: absolute;
    z-index: 40;
    top: 100%;
    right: 0;
    margin-top: var(--mk-s1);
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    width: 19rem;
    max-width: calc(100vw - var(--mk-s6));
    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);
}

.mk-dg-views-note[b-kmd5jmj9ud] { margin: 0; font-size: var(--mk-t-secondary); color: var(--mk-text-secondary); }

.mk-dg-views-list[b-kmd5jmj9ud] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 14rem;
    overflow-y: auto;
}

.mk-dg-views-list li[b-kmd5jmj9ud] {
    display: flex;
    align-items: center;
    gap: var(--mk-s1);
    border-radius: var(--mk-r-sm);
}

.mk-dg-views-list li:hover[b-kmd5jmj9ud] { background: var(--mk-bg-hover); }
.mk-dg-views-list li.is-active[b-kmd5jmj9ud] { background: var(--mk-primary-soft); }

.mk-dg-views-apply[b-kmd5jmj9ud] {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--mk-s1) var(--mk-s2);
    text-align: left;
    font-size: var(--mk-t-body);
    color: var(--mk-text);
    background: none;
    border: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.mk-dg-views-list li.is-active .mk-dg-views-apply[b-kmd5jmj9ud] { color: var(--mk-primary-ink); font-weight: var(--mk-fw-semibold); }

.mk-dg-views-tag[b-kmd5jmj9ud] {
    flex: none;
    font-size: var(--mk-fs-2xs);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-financial-fg);
    border: 1px solid var(--mk-financial-border);
    border-radius: var(--mk-r-sm);
    padding: 0 var(--mk-s1);
}

.mk-dg-views-icon[b-kmd5jmj9ud] {
    flex: none;
    width: var(--mk-s6);
    height: var(--mk-s6);
    color: var(--mk-text-secondary);
    background: none;
    border: 0;
    border-radius: var(--mk-r-sm);
    cursor: pointer;
}

.mk-dg-views-icon:hover[b-kmd5jmj9ud] { color: var(--mk-text-strong); background: var(--mk-bg-subtle); }
.mk-dg-views-icon.is-on[b-kmd5jmj9ud] { color: var(--mk-warning-fg); }

.mk-dg-views-save[b-kmd5jmj9ud] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    padding-top: var(--mk-s2);
    border-top: 1px solid var(--mk-border);
}

.mk-dg-views-share[b-kmd5jmj9ud] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text);
}

.mk-dg-views-error[b-kmd5jmj9ud] { margin: 0; font-size: var(--mk-t-secondary); color: var(--mk-danger-fg); }

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

.mk-dg-footer[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--mk-s2) var(--mk-s4);
}

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

.mk-dg-size[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    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-kmd5jmj9ud] { outline: none; box-shadow: var(--mk-focus-ring); }

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

.mk-dg-page[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    color: var(--mk-text-strong);
    border-color: var(--mk-border-strong);
}

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

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

.mk-dg-gap[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
        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-kmd5jmj9ud],
.mk-dg-sticky-last .mk-dg-table tbody td:last-child[b-kmd5jmj9ud] {
    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-kmd5jmj9ud] {
    background: var(--mk-bg-table-head);
    z-index: 4;
}

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

.mk-dg-sticky-last .mk-dg-table tbody tr:hover td:last-child[b-kmd5jmj9ud] {
    background: var(--mk-bg-hover);
}
/* /Components/Shared/ModuleGate.razor.rz.scp.css */
.mg-locked[b-64cohwhsfu] {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--mk-s3);
    padding: var(--mk-s3) var(--mk-s4);
    background: var(--mk-bg-surface);
    border: 1px dashed var(--mk-border-strong);
    border-radius: var(--mk-r-card);
}
.mg-locked-text[b-64cohwhsfu] { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.mg-locked-title[b-64cohwhsfu] { font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.mg-locked-sub[b-64cohwhsfu] { font-size: var(--mk-t-secondary-sm); color: var(--mk-text-muted); }
.mg-locked-link[b-64cohwhsfu] {
    display: inline-flex; align-items: center; min-height: var(--mk-touch);
    font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
}
/* /Components/Shared/OtpCodeField.razor.rz.scp.css */
.otp-code[b-x0s6szaw6n] {
    position: relative;
    width: 100%;
    max-width: calc(6 * var(--mk-otp-w) + 5 * var(--mk-s2));
}

/* The real input covers the boxes and takes every click, key, paste and autofill; it is only
   made invisible, never removed, so focus and assistive tech still land on it. */
.otp-code-input[b-x0s6szaw6n] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    font-size: var(--mk-t-body);
    cursor: text;
    z-index: 1;
}

.otp-code-boxes[b-x0s6szaw6n] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--mk-s2);
}

.otp-code-box[b-x0s6szaw6n] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--mk-otp-h);
    min-height: 44px;
    border: 2px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: var(--mk-font-num);
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    transition: border-color var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease);
}

.otp-code-box.is-filled[b-x0s6szaw6n] { border-color: var(--mk-border-strong); }
.otp-code-box.is-active[b-x0s6szaw6n] { border-color: var(--mk-primary); box-shadow: var(--mk-focus-ring); }

.is-invalid .otp-code-box[b-x0s6szaw6n] { border-color: var(--mk-fin-negative); }
.is-disabled .otp-code-box[b-x0s6szaw6n] { background: var(--mk-bg-subtle); color: var(--mk-text-muted); }
/* /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-btpxfxips1] {
    position: fixed;
    inset: 0;
    z-index: var(--mk-z-tour);
    font-family: var(--mk-font);
}

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

.tour__dim[b-btpxfxips1] {
    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-btpxfxips1] {
    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-btpxfxips1] {
    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-btpxfxips1] {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tour__card.is-anchored[b-btpxfxips1] {
    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-btpxfxips1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
}

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

.tour__skip[b-btpxfxips1] {
    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-btpxfxips1] { text-decoration: underline; }

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

.tour__title[b-btpxfxips1] {
    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-btpxfxips1] {
    margin: 0;
    font-size: var(--mk-t-body);
    line-height: 1.55;
    color: var(--mk-text-2);
}

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

.tour__dot[b-btpxfxips1] {
    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-btpxfxips1] {
    width: var(--mk-s4);
    background: var(--mk-primary);
}

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

.tour__btn[b-btpxfxips1] {
    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-btpxfxips1] {
    background: transparent;
    color: var(--mk-text-strong);
    border: 1px solid var(--mk-border);
}

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

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

@media (prefers-reduced-motion: reduce) {
    .tour__spot[b-btpxfxips1],
    .tour__dot[b-btpxfxips1] { 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-fykqbhbuk5] {
    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);
}

/* A tab row (inside-app guide §12), not a second menu: five destinations plus More. It
   scrolls sideways on a narrow phone rather than wrapping into a grid. */
.pf-qn[b-fykqbhbuk5] {
    display: flex;
    gap: var(--mk-s1);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--mk-border);
}
.pf-qn[b-fykqbhbuk5]::-webkit-scrollbar { display: none; }

/* NavLink renders the <a>, which belongs to NavLink's scope, not this file's, so the
   link rules go through ::deep. */
.pf-qn[b-fykqbhbuk5]  .pf-qn-link,
.pf-qn .pf-qn-more[b-fykqbhbuk5] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--mk-s3);
    margin-bottom: -1px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.pf-qn[b-fykqbhbuk5]  .pf-qn-link:hover,
.pf-qn .pf-qn-more:hover[b-fykqbhbuk5] { color: var(--mk-text-strong); }

.pf-qn[b-fykqbhbuk5]  .pf-qn-link.active {
    color: var(--mk-primary-ink);
    border-bottom-color: var(--mk-primary);
}

.pf-qn[b-fykqbhbuk5]  .pf-qn-link:focus-visible,
.pf-qn .pf-qn-more:focus-visible[b-fykqbhbuk5] { outline: 2px solid var(--mk-primary); outline-offset: -2px; }

.pf-qn .pf-qn-more[b-fykqbhbuk5] { margin-left: auto; }

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

.pf-qn-pop[b-fykqbhbuk5] {
    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-fykqbhbuk5] {
    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-fykqbhbuk5] { background: var(--mk-primary-lt); color: var(--mk-primary-ink); }
.pf-qn-item-ico[b-fykqbhbuk5] { font-size: var(--mk-t-card-sm); line-height: 1; }
/* /Components/Shared/PrivacyToggle.razor.rz.scp.css */
/* Label + helper on the left, the switch on one vertical axis on the right (guide §8.3). */
.pt-row[b-jmqrvjvebk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mk-s4);
    padding: var(--mk-s3) 0;
    border-bottom: 1px solid var(--mk-bg-subtle);
}

.pt-row:last-child[b-jmqrvjvebk] { border-bottom: none; }

.pt-label[b-jmqrvjvebk] {
    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);
    cursor: pointer;
}

.pt-hint[b-jmqrvjvebk] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
    margin-top: 2px;
    line-height: 1.5;
}

.pt-reason[b-jmqrvjvebk] {
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-fin-pending-fg);
    margin-top: var(--mk-s1);
}

.pt-lock[b-jmqrvjvebk] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary-sm); }

.is-disabled .pt-label[b-jmqrvjvebk] { cursor: default; }

.pt-switch[b-jmqrvjvebk] {
    position: relative;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
}

.pt-switch input[b-jmqrvjvebk] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.pt-switch input:disabled[b-jmqrvjvebk] { cursor: not-allowed; }

.pt-track[b-jmqrvjvebk] {
    position: absolute;
    inset: 0;
    border-radius: var(--mk-r-pill);
    background: var(--mk-border-strong);
    transition: background var(--mk-dur-fast) var(--mk-ease);
}

.pt-thumb[b-jmqrvjvebk] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mk-bg-surface);
    box-shadow: var(--mk-sh-xs);
    transition: left var(--mk-dur-fast) var(--mk-ease);
}

/* On is the brand state; orange-600 keeps the track at a readable 3:1 against white. */
.is-on .pt-track[b-jmqrvjvebk] { background: var(--mk-primary-hover); }
.is-on .pt-thumb[b-jmqrvjvebk] { left: 21px; }

.pt-switch input:focus-visible ~ .pt-track[b-jmqrvjvebk] { box-shadow: var(--mk-focus-ring); }

.is-disabled .pt-switch[b-jmqrvjvebk] { opacity: .45; }
/* /Components/Shared/RegisterStepper.razor.rz.scp.css */
.reg-stepper[b-43enxrfxap] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mk-s2);
    list-style: none;
    margin: 0 0 var(--mk-s5);
    padding: 0;
}

.reg-stepper-item[b-43enxrfxap] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mk-s1);
    position: relative;
    text-align: center;
}

/* The connecting rule, drawn from each dot to the next one. */
.reg-stepper-item:not(:last-child)[b-43enxrfxap]::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--mk-border);
}
.reg-stepper-item.is-done:not(:last-child)[b-43enxrfxap]::after { background: var(--mk-fin-positive); }

.reg-stepper-dot[b-43enxrfxap] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--mk-r-pill);
    border: 2px solid var(--mk-border-strong);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
}

.reg-stepper-label[b-43enxrfxap] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-muted);
}

.is-current .reg-stepper-dot[b-43enxrfxap] {
    border-color: var(--mk-primary);
    color: var(--mk-primary-ink);
    box-shadow: var(--mk-focus-ring);
}
.is-current .reg-stepper-label[b-43enxrfxap] { color: var(--mk-text-strong); }

.is-done .reg-stepper-dot[b-43enxrfxap] {
    border-color: var(--mk-fin-positive);
    background: var(--mk-fin-positive);
    color: var(--mk-text-oncolor);
}
.is-done .reg-stepper-label[b-43enxrfxap] { color: var(--mk-fin-positive-fg); }
/* /Components/Shared/SharedKhataLink.razor.rz.scp.css */
.mk-shared-link[b-4uouxwanll] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    text-align: left;
    padding: var(--mk-s3);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    cursor: pointer;
    font: inherit;
}

.mk-shared-link:hover[b-4uouxwanll] { border-color: var(--mk-border-strong); }
.mk-shared-link:focus-visible[b-4uouxwanll] { outline: 2px solid var(--mk-primary); outline-offset: 2px; }

.mk-shared-link-icon[b-4uouxwanll] { font-size: var(--mk-t-section-sm); flex-shrink: 0; }

.mk-shared-link-text[b-4uouxwanll] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-shared-link-text strong[b-4uouxwanll] { color: var(--mk-text-strong); font-weight: var(--mk-fw-semibold); font-size: var(--mk-t-body); }
.mk-shared-link-text span[b-4uouxwanll] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary-sm); }

.mk-shared-link-figs[b-4uouxwanll] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    font-variant-numeric: tabular-nums;
}

.mk-shared-link-figs .is-get[b-4uouxwanll] { color: var(--mk-fin-positive); }
.mk-shared-link-figs .is-give[b-4uouxwanll] { color: var(--mk-fin-negative); }
/* /Components/Shared/SupportContactCard.razor.rz.scp.css */
.support-card[b-qwvzwgwmzz] {
    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-qwvzwgwmzz] {
    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-qwvzwgwmzz] { min-width: 0; }

.support-card-title[b-qwvzwgwmzz] {
    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-qwvzwgwmzz] {
    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-qwvzwgwmzz] {
    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-qwvzwgwmzz] { text-decoration: underline; }

.support-card-hours[b-qwvzwgwmzz] {
    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-vo3oa3pmft] {
    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-vo3oa3pmft] {
    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-vo3oa3pmft] {
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.upi-qr-svg[b-vo3oa3pmft] {
    /* 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-vo3oa3pmft]  svg { width: 100%; height: 100%; display: block; }

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

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

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

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

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

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