/* ============================================
   MALIKA — Design System v3
   Satoshi (body) + Fraunces (display)
   Dark Luxury · Tight Bento · Light + Dark
   ============================================ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --mk-bg:#f7f4ec; --mk-bg-elev:#ffffff; --mk-bg-soft:#faf7f0;
  --mk-border:rgba(20,16,8,.08); --mk-border-str:rgba(20,16,8,.14);
  --mk-text:#1a1611; --mk-text-soft:#5a5550; --mk-text-mute:#8a857e;
  --mk-accent:#9c7a3d; --mk-accent-soft:rgba(156,122,61,.10);
  --mk-success:#4a7a5c; --mk-success-soft:rgba(74,122,92,.10);
  --mk-danger:#a85555;  --mk-danger-soft:rgba(168,85,85,.10);
  --mk-info:#4a6b9c;
  --mk-radius:14px; --mk-radius-sm:8px;
  --mk-font-display:'Fraunces',Georgia,serif;
  --mk-font-body:'Satoshi','Inter',-apple-system,sans-serif;
  --mk-font-mono:'JetBrains Mono',ui-monospace,monospace;
 --mk-sidebar-expanded: 250px;
    --mk-sidebar-collapsed: 72px;
    --mk-sidebar-tab-size: 32px;
}
[data-theme="dark"]{
  --mk-bg:#0a0c0f; --mk-bg-elev:#13171c; --mk-bg-soft:#10131a;
  --mk-border:rgba(255,255,255,.06); --mk-border-str:rgba(255,255,255,.12);
  --mk-text:#e8e2d5; --mk-text-soft:#9aa0a6; --mk-text-mute:#6b7177;
  --mk-accent:#c9a96b; --mk-accent-soft:rgba(201,169,107,.12);
  --mk-success:#6fa183; --mk-success-soft:rgba(111,161,131,.14);
  --mk-danger:#c97a7a;  --mk-danger-soft:rgba(201,122,122,.14);
  --mk-info:#7a9bc9;
}

*{box-sizing:border-box;}
html,body{background:var(--mk-bg)!important;color:var(--mk-text);font-family:var(--mk-font-body);font-size:14px;font-weight:400;-webkit-font-smoothing:antialiased;margin:0;letter-spacing:-.005em;}
[data-theme="dark"] body{background-image:radial-gradient(ellipse 1200px 400px at 50% -200px,rgba(201,169,107,.05),transparent 70%);}

/* ==========================================================================
   MALIKA — NAVIGATION
   ========================================================================== */

:root {
    --mk-sidebar-expanded: 250px;
    --mk-sidebar-collapsed: 72px;
}

/* Keep old horizontal navigation hidden when the app sidebar is active. */
.mk-nav {
    display: none;
}

/* ==========================================================================
   Desktop sidebar
   ========================================================================== */

.mk-sidebar {
    position: fixed;
    z-index: 80;
    inset: 0 auto 0 0;
    width: var(--mk-sidebar-expanded);
    overflow: visible;
    color: var(--mk-text);
    background: var(--mk-bg-elev);
    border-top: 3px solid var(--mk-role, var(--mk-accent));
    border-right: 1px solid var(--mk-border);
    box-shadow: 1px 0 0 rgba(20, 16, 8, .02);
    transition:
        width 240ms cubic-bezier(.2, .8, .2, 1),
        transform 240ms cubic-bezier(.2, .8, .2, 1);
}

/*
 * Keep the glow tied to the active account role.
 * It is a low-opacity aura, not a bright background gradient.
 */
[data-theme="dark"] .mk-sidebar {
    background:
        radial-gradient(
            ellipse 280px 230px at -64px 20px,
            color-mix(
                in srgb,
                var(--mk-role, var(--mk-accent)) 15%,
                transparent
            ) 0%,
            color-mix(
                in srgb,
                var(--mk-role, var(--mk-accent)) 5%,
                transparent
            ) 42%,
            transparent 76%
        ),
        linear-gradient(180deg, #15191f 0%, #111419 54%, #101317 100%);
    box-shadow:
        1px 0 0 rgba(255, 255, 255, .025),
        10px 0 36px rgba(0, 0, 0, .10);
}

/* Keep interior clipping separate from the floating rail tab. */
.mk-sidebar::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-right: 1px solid transparent;
    pointer-events: none;
    content: "";
}

/* --------------------------------------------------------------------------
   Header and identity
   -------------------------------------------------------------------------- */

.mk-sidebar-top {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    border-bottom: 1px solid var(--mk-border);
}

.mk-sidebar-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--mk-text);
    font-family: var(--mk-font-display);
    font-size: 1.32rem;
    font-weight: 500;
    letter-spacing: -.03em;
    text-decoration: none;
    white-space: nowrap;
}

.mk-sidebar-brand:hover {
    color: var(--mk-text);
}

.mk-sidebar-brand .mk-brand-dot {
    color: var(--mk-role, var(--mk-accent));
}

.mk-sidebar-brand-mark {
    display: none;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: var(--mk-role, var(--mk-accent));
    font-family: var(--mk-font-display);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
}

[data-theme="dark"] .mk-sidebar-brand-mark {
    color: #0a0c0f;
}

.mk-sidebar-brand-mark span {
    opacity: .65;
}

.mk-sidebar-role {
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--mk-border);
    overflow: hidden;
}

.mk-sidebar-role-orb {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(
        in srgb,
        var(--mk-role, var(--mk-accent)) 24%,
        var(--mk-border)
    );
    border-radius: 12px;
    color: var(--mk-role, var(--mk-accent));
    background: color-mix(
        in srgb,
        var(--mk-role, var(--mk-accent)) 10%,
        transparent
    );
    font-family: var(--mk-font-display);
    font-size: 1rem;
    font-weight: 500;
}

.mk-sidebar-role-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.mk-sidebar-user-name {
    max-width: 150px;
    overflow: hidden;
    color: var(--mk-text);
    font-size: .84rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-sidebar .mk-role-badge {
    max-width: 150px;
    overflow: hidden;
    padding: 3px 9px;
    border: 1px solid color-mix(
        in srgb,
        var(--mk-role, var(--mk-accent)) 22%,
        transparent
    );
    border-radius: 999px;
    color: var(--mk-role, var(--mk-accent));
    background: color-mix(
        in srgb,
        var(--mk-role, var(--mk-accent)) 10%,
        transparent
    );
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Rail-tab collapse control
   Positioned below identity—not in the brand row.
   -------------------------------------------------------------------------- */

.mk-sidebar-collapse {
    position: absolute;
    z-index: 5;
    top: 144px;
    right: calc(var(--mk-sidebar-tab-size) / -2);
    width: var(--mk-sidebar-tab-size);
    height: var(--mk-sidebar-tab-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--mk-border-str);
    border-radius: 999px;
    color: var(--mk-text-soft);
    background: var(--mk-bg-elev);
    box-shadow:
        0 5px 16px rgba(20, 16, 8, .10),
        0 0 0 4px var(--mk-bg);
    cursor: pointer;
    transition:
        color 150ms ease,
        background-color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

[data-theme="dark"] .mk-sidebar-collapse {
    background: #161a20;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, .30),
        0 0 0 4px var(--mk-bg);
}

.mk-sidebar-collapse:hover,
.mk-sidebar-collapse:focus-visible {
    outline: none;
    color: var(--mk-role, var(--mk-accent));
    border-color: color-mix(
        in srgb,
        var(--mk-role, var(--mk-accent)) 40%,
        var(--mk-border)
    );
    background: var(--mk-bg-soft);
    transform: scale(1.06);
}

.mk-sidebar-collapse svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}

.mk-sidebar-close {
    width: 34px;
    height: 34px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--mk-text-soft);
    background: transparent;
    cursor: pointer;
}

.mk-sidebar-close svg,
.mk-sidebar-icon svg,
.mk-sidebar-tool svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}

/* --------------------------------------------------------------------------
   Navigation links
   -------------------------------------------------------------------------- */

.mk-sidebar-nav {
    position: absolute;
    inset: 162px 0 108px;
    padding: 19px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mk-border-str) transparent;
}

.mk-sidebar-group-label {
    display: block;
    overflow: hidden;
    padding: 0 10px;
    margin: 0 0 8px;
    color: var(--mk-text-mute);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.mk-sidebar-group-label--spaced {
    margin-top: 22px;
}

.mk-sidebar-link,
.mk-sidebar-tool {
    position: relative;
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--mk-text-soft);
    background: transparent;
    font-family: var(--mk-font-body);
    font-size: .83rem;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 150ms ease,
        background-color 150ms ease,
        border-color 150ms ease;
}

.mk-sidebar-link + .mk-sidebar-link {
    margin-top: 3px;
}

.mk-sidebar-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mk-sidebar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-sidebar-link:hover,
.mk-sidebar-link:focus-visible,
.mk-sidebar-tool:hover,
.mk-sidebar-tool:focus-visible {
    outline: none;
    color: var(--mk-text);
    background: var(--mk-bg-soft);
    border-color: var(--mk-border);
}

/* Active navigation receives the role-colored glow. */
.mk-sidebar-link.is-active {
    color: var(--mk-role, var(--mk-accent));
    border-color: color-mix(
        in srgb,
        var(--mk-role, var(--mk-accent)) 20%,
        var(--mk-border)
    );
    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--mk-role, var(--mk-accent)) 15%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--mk-role, var(--mk-accent)) 4%,
                transparent
            )
        );
    box-shadow:
        inset 0 1px 0 color-mix(
            in srgb,
            var(--mk-role, var(--mk-accent)) 10%,
            transparent
        ),
        0 0 20px color-mix(
            in srgb,
            var(--mk-role, var(--mk-accent)) 8%,
            transparent
        );
}

.mk-sidebar-link.is-active::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -13px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--mk-role, var(--mk-accent));
    box-shadow: 0 0 10px color-mix(
        in srgb,
        var(--mk-role, var(--mk-accent)) 50%,
        transparent
    );
    content: "";
}

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

.mk-sidebar-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 12px;
    border-top: 1px solid var(--mk-border);
    background: color-mix(in srgb, var(--mk-bg-elev) 94%, transparent);
    backdrop-filter: blur(12px);
}

.mk-sidebar-controls {
    display: flex;
    gap: 5px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mk-border);
}

.mk-sidebar-account-switch {
    min-width: 0;
    flex: 1;
}

.mk-sidebar-account-select {
    width: 100%;
    min-width: 0;
    padding: 7px 26px 7px 9px;
    border: 1px solid var(--mk-border);
    border-radius: 9px;
    color: var(--mk-text-soft);
    background: var(--mk-bg-soft);
    font: inherit;
    font-size: .72rem;
    outline: none;
}

.mk-sidebar-locales {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--mk-border);
    border-radius: 9px;
    background: var(--mk-bg-soft);
}

.mk-sidebar .mk-locale-btn {
    min-width: 25px;
    padding: 5px;
    border: 0;
    border-radius: 6px;
    color: var(--mk-text-mute);
    background: transparent;
    font-family: var(--mk-font-body);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.mk-sidebar .mk-locale-btn.is-active {
    color: #fff;
    background: var(--mk-role, var(--mk-accent));
}

[data-theme="dark"] .mk-sidebar .mk-locale-btn.is-active {
    color: #0a0c0f;
}

.mk-sidebar-tool {
    flex: 1;
    min-width: 42px;
}

.mk-sidebar-tool svg {
    flex: 0 0 18px;
}

.mk-sidebar-logout {
    color: var(--mk-text-mute);
}

.mk-sidebar-logout:hover {
    color: var(--mk-danger);
    background: var(--mk-danger-soft);
    border-color: var(--mk-danger-soft);
}

/* ==========================================================================
   Desktop layout and collapsed state
   ========================================================================== */

@media (min-width: 769px) {
    body:has(.mk-sidebar) .mk-main {
        max-width: none;
        min-height: 100vh;
        margin-left: var(--mk-sidebar-expanded);
        padding: 30px 32px 56px;
        transition: margin-left 240ms cubic-bezier(.2, .8, .2, 1);
    }

    body:has(.mk-sidebar) .mk-footer {
        margin-left: var(--mk-sidebar-expanded);
        padding: 30px 32px 24px;
        transition: margin-left 240ms cubic-bezier(.2, .8, .2, 1);
    }

    body.mk-sidebar-collapsed .mk-sidebar {
        width: var(--mk-sidebar-collapsed);
    }

    body.mk-sidebar-collapsed .mk-main,
    body.mk-sidebar-collapsed .mk-footer {
        margin-left: var(--mk-sidebar-collapsed);
    }

    body.mk-sidebar-collapsed .mk-sidebar-top {
        justify-content: center;
        padding: 0;
    }

    body.mk-sidebar-collapsed .mk-sidebar-brand-text,
    body.mk-sidebar-collapsed .mk-sidebar-role-copy,
    body.mk-sidebar-collapsed .mk-sidebar-group-label,
    body.mk-sidebar-collapsed .mk-sidebar-text,
    body.mk-sidebar-collapsed .mk-sidebar-locales,
    body.mk-sidebar-collapsed .mk-sidebar-account-switch {
        display: none;
    }

    body.mk-sidebar-collapsed .mk-sidebar-brand-mark {
        display: inline-flex;
    }

    /*
     * The tab remains on the outer rail at the same vertical level.
     * It is not placed in the small header, avoiding logo/button collision.
     */
    body.mk-sidebar-collapsed .mk-sidebar-collapse {
        top: 144px;
        right: calc(var(--mk-sidebar-tab-size) / -2);
        width: var(--mk-sidebar-tab-size);
        height: var(--mk-sidebar-tab-size);
    }

    body.mk-sidebar-collapsed .mk-sidebar-collapse svg {
        transform: rotate(180deg);
    }

    body.mk-sidebar-collapsed .mk-sidebar-role {
        justify-content: center;
        padding: 14px 10px;
    }

    body.mk-sidebar-collapsed .mk-sidebar-nav {
        padding-right: 12px;
        padding-left: 12px;
    }

    body.mk-sidebar-collapsed .mk-sidebar-link,
    body.mk-sidebar-collapsed .mk-sidebar-tool {
        width: 48px;
        min-height: 43px;
        justify-content: center;
        padding: 0;
    }

    body.mk-sidebar-collapsed .mk-sidebar-controls {
        justify-content: center;
    }

    body.mk-sidebar-collapsed .mk-sidebar-tool {
        flex: 0 0 48px;
    }

    /* Labels appear only on hover/focus while navigation is compact. */
    body.mk-sidebar-collapsed [data-tooltip]::after {
        position: absolute;
        z-index: 100;
        top: 50%;
        left: calc(100% + 13px);
        padding: 7px 9px;
        border: 1px solid var(--mk-border);
        border-radius: 7px;
        color: var(--mk-text);
        background: var(--mk-bg-elev);
        box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
        content: attr(data-tooltip);
        font-size: .72rem;
        font-weight: 600;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: translate(-4px, -50%);
        transition:
            opacity 120ms ease,
            transform 120ms ease;
        white-space: nowrap;
    }

    body.mk-sidebar-collapsed [data-tooltip]:hover::after,
    body.mk-sidebar-collapsed [data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.mk-mobile-nav,
.mk-sidebar-overlay {
    display: none;
}

@media (max-width: 768px) {
    .mk-mobile-nav {
        position: sticky;
        z-index: 60;
        top: 0;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        border-bottom: 1px solid var(--mk-border);
        background: color-mix(in srgb, var(--mk-bg-elev) 92%, transparent);
        backdrop-filter: blur(16px);
    }

    .mk-mobile-nav-brand {
        color: var(--mk-text);
        font-family: var(--mk-font-display);
        font-size: 1.25rem;
        text-decoration: none;
    }

    .mk-mobile-nav-menu,
    .mk-theme-toggle {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 9px;
        color: var(--mk-text-soft);
        background: transparent;
        cursor: pointer;
    }

    .mk-mobile-nav-menu {
        flex-direction: column;
        gap: 4px;
    }

    .mk-mobile-nav-menu span {
        width: 17px;
        height: 1.5px;
        border-radius: 3px;
        background: currentColor;
    }

    .mk-mobile-nav-menu:hover,
    .mk-theme-toggle:hover {
        color: var(--mk-role, var(--mk-accent));
        background: var(--mk-role-soft, var(--mk-accent-soft));
    }

    .mk-sidebar {
        z-index: 80;
        width: min(86vw, 320px);
        transform: translateX(-105%);
        box-shadow: 14px 0 42px rgba(0, 0, 0, .22);
    }

    body.mk-sidebar-open {
        overflow: hidden;
    }

    body.mk-sidebar-open .mk-sidebar {
        transform: translateX(0);
    }

    .mk-sidebar-collapse {
        display: none;
    }

    .mk-sidebar-close {
        display: inline-flex;
    }

    .mk-sidebar-overlay {
        position: fixed;
        z-index: 70;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        padding: 0;
        border: 0;
        opacity: 0;
        background: rgba(11, 11, 10, .44);
        pointer-events: none;
        transition: opacity 200ms ease;
    }

    body.mk-sidebar-open .mk-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    body:has(.mk-sidebar) .mk-main,
    body.mk-sidebar-collapsed .mk-main,
    body:has(.mk-sidebar) .mk-footer,
    body.mk-sidebar-collapsed .mk-footer {
        margin-left: 0;
    }

    body:has(.mk-sidebar) .mk-main {
        padding: 22px 16px 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mk-sidebar,
    .mk-sidebar-collapse,
    .mk-sidebar-link,
    .mk-sidebar-tool,
    .mk-sidebar-overlay,
    .mk-main,
    .mk-footer {
        transition-duration: 1ms !important;
    }
}



/* Main */
.mk-main{max-width:1280px;margin:0 auto;padding:30px 28px 56px;}
.mk-page{display:flex;flex-direction:column;gap:18px;}

/* Typography */
.mk-display{font-family:var(--mk-font-display);font-weight:400;font-size:2rem;letter-spacing:-.025em;line-height:1.05;color:var(--mk-text);margin:2px 0 4px;}
.mk-eyebrow{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--mk-text-mute);}
.mk-lede{color:var(--mk-text-soft);font-size:.88rem;margin:0;}
.mk-numeric{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';}
.mk-mono{font-family:var(--mk-font-mono);font-size:.74rem;color:var(--mk-text-mute);}

/* Hero */
.mk-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:6px;}

/* Section eyebrow */
.mk-section-eyebrow{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--mk-text-mute);margin:14px 0 0;}

/* Badge */
.mk-badge{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:500;padding:7px 14px;border-radius:999px;border:1px solid var(--mk-border-str);color:var(--mk-text-soft);background:var(--mk-bg-soft);}
.mk-badge--ok{color:var(--mk-success);border-color:var(--mk-success-soft);background:var(--mk-success-soft);}
.mk-badge--bad{color:var(--mk-danger);border-color:var(--mk-danger-soft);background:var(--mk-danger-soft);}
.mk-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* Bento — strict grids that DON'T collapse early */
.mk-bento-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.mk-bento-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.mk-bento-2{display:grid;grid-template-columns:2fr 1fr;gap:14px;}
@media(max-width:980px){
  .mk-bento-3{grid-template-columns:repeat(2,1fr);}
  .mk-bento-4{grid-template-columns:repeat(2,1fr);}
  .mk-bento-2{grid-template-columns:1fr;}
}
@media(max-width:560px){.mk-bento-3,.mk-bento-4{grid-template-columns:1fr;}}

/* Stat card */
.mk-stat{background:var(--mk-bg-elev);border:1px solid var(--mk-border);border-radius:var(--mk-radius);padding:20px;display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;transition:border-color 200ms;}
.mk-stat:hover{border-color:var(--mk-border-str);}
.mk-stat::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--mk-accent),transparent);opacity:0;transition:opacity 300ms;}
.mk-stat:hover::before{opacity:.55;}
.mk-stat-label{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-text-mute);}
.mk-stat-value{font-family:var(--mk-font-display);font-weight:400;font-size:1.85rem;letter-spacing:-.02em;line-height:1.05;color:var(--mk-text);font-variant-numeric:tabular-nums;margin-top:4px;}
.mk-stat-value--accent{color:var(--mk-accent);}
.mk-stat-value--danger{color:var(--mk-danger);}
.mk-stat-value--success{color:var(--mk-success);}
.mk-stat-prefix{font-family:var(--mk-font-mono);font-size:.9rem;color:var(--mk-text-mute);margin-right:6px;font-weight:500;}
.mk-stat-unit{font-size:.95rem;margin-left:1px;color:var(--mk-text-mute);}
.mk-stat-meta{font-size:.74rem;color:var(--mk-text-soft);margin-top:2px;}
.mk-stat-meta--split{display:flex;gap:10px;font-family:var(--mk-font-mono);font-size:.72rem;}
.mk-stat-meta--split .pos{color:var(--mk-success);}
.mk-stat-meta--split .neg{color:var(--mk-danger);}
.mk-meter{margin-top:6px;height:3px;background:var(--mk-border);border-radius:2px;overflow:hidden;}
.mk-meter>span{display:block;height:100%;background:var(--mk-accent);border-radius:2px;transition:width 600ms;}

/* Panel */
.mk-panel{background:var(--mk-bg-elev);border:1px solid var(--mk-border);border-radius:var(--mk-radius);padding:20px;display:flex;flex-direction:column;gap:12px;}
.mk-panel-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--mk-border);}
.mk-panel-head h2{font-family:var(--mk-font-display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em;margin:0;color:var(--mk-text);}

/* Empty state */
.mk-empty{color:var(--mk-text-mute);font-size:.88rem;padding:24px 0;text-align:center;font-family:var(--mk-font-display);font-style:italic;line-height:1.5;}
.mk-empty strong{display:block;color:var(--mk-text-soft);font-style:normal;font-weight:500;}

/* List row */
.mk-listrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--mk-border);text-decoration:none;color:var(--mk-text);transition:padding-left 200ms;}
.mk-listrow:last-child{border-bottom:0;}
.mk-listrow:hover{padding-left:6px;}

/* Activity */
.mk-activity{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--mk-border);}
.mk-activity:last-child{border-bottom:0;}
.mk-activity-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--mk-text-mute);margin-top:7px;}
.mk-activity-dot.is-payment{background:var(--mk-success);}
.mk-activity-dot.is-invoice{background:var(--mk-accent);}
.mk-activity-dot.is-receipt{background:var(--mk-success);}
.mk-activity-dot.is-reversed{background:var(--mk-danger);}
.mk-activity-dot.is-ticket{background:var(--mk-info);}
.mk-activity-dot.is-expense{background:var(--mk-danger);opacity:.7;}
.mk-activity-body{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.mk-activity-main{min-width:0;}
.mk-activity-title{font-size:.86rem;font-weight:500;color:var(--mk-text);}
.mk-activity-meta{font-family:var(--mk-font-mono);font-size:.7rem;color:var(--mk-text-mute);margin-top:3px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.mk-activity-hash{color:var(--mk-accent);opacity:.7;}
.mk-activity-amount{font-family:var(--mk-font-mono);font-size:.78rem;color:var(--mk-text-soft);white-space:nowrap;font-weight:500;}

/* Links */
.mk-link{color:var(--mk-accent);font-size:.76rem;text-decoration:none;font-weight:500;}
.mk-link:hover{text-decoration:underline;}

/* Footer */
.mk-footer{text-align:center;font-size:.7rem;color:var(--mk-text-mute);padding:36px 0 24px;font-family:var(--mk-font-display);font-style:italic;}
.mk-footer-dot{color:var(--mk-accent);margin:0 8px;font-style:normal;}

/* ============================================
   MALIKA — Shared Components (every page)
   ============================================ */

/* ── Page header (h1 + actions) ── */
.mk-pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:18px;}
.mk-pagehead-text{display:flex;flex-direction:column;gap:4px;}
.mk-pagehead h1{font-family:var(--mk-font-display);font-weight:400;font-size:1.85rem;letter-spacing:-.025em;line-height:1.05;color:var(--mk-text);margin:0;}
.mk-pagehead-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* ── Buttons ── */
.mk-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--mk-radius-sm);font-family:var(--mk-font-body);font-size:.82rem;font-weight:500;letter-spacing:-.005em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:all 150ms;line-height:1;white-space:nowrap;}
.mk-btn:active{transform:translateY(1px);}
.mk-btn-primary{background:var(--mk-accent);color:#fff;border-color:var(--mk-accent);}
[data-theme="dark"] .mk-btn-primary{color:#0a0c0f;}
.mk-btn-primary:hover{filter:brightness(1.05);box-shadow:0 1px 12px var(--mk-accent-soft);}
.mk-btn-ghost{background:transparent;color:var(--mk-text-soft);border-color:var(--mk-border-str);}
.mk-btn-ghost:hover{color:var(--mk-text);border-color:var(--mk-text-soft);background:var(--mk-bg-soft);}
.mk-btn-danger{background:transparent;color:var(--mk-danger);border-color:var(--mk-danger-soft);}
.mk-btn-danger:hover{background:var(--mk-danger-soft);}
.mk-btn-secondary{background:var(--mk-accent-soft);color:var(--mk-accent);border-color:var(--mk-accent-soft);}
.mk-btn-secondary:hover{background:var(--mk-accent);color:#fff;}
[data-theme="dark"] .mk-btn-secondary:hover{color:#0a0c0f;}
.mk-btn-sm{padding:6px 11px;font-size:.74rem;}
.mk-btn-icon{padding:8px;width:34px;justify-content:center;}

/* === Page lede / empty panel === */
.mk-lede{font-size:.86rem;color:var(--mk-text-soft);margin:2px 0 0;}
.mk-emptypanel{display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 24px;border:1px dashed var(--mk-border-str);border-radius:var(--mk-radius);background:var(--mk-bg-soft);gap:8px;}
.mk-emptypanel-icon{font-size:2rem;color:var(--mk-accent);margin-bottom:6px;}
.mk-emptypanel-title{font-family:var(--mk-font-display);font-size:1.2rem;color:var(--mk-text);}
.mk-emptypanel-lede{font-size:.86rem;color:var(--mk-text-mute);max-width:360px;margin:0 0 10px;}

/* === Card grid (tenants/properties/vendor index) === */
.mk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.mk-cards-tight{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.mk-card-title{font-family:var(--mk-font-display);font-size:1.02rem;color:var(--mk-text);}
.mk-card-sub{font-size:.78rem;color:var(--mk-text-mute);margin-top:2px;}
.mk-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:.78rem;color:var(--mk-text-soft);gap:8px;flex-wrap:wrap;}

/* === Status pills === */
.mk-status{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:500;padding:5px 11px;border-radius:999px;border:1px solid var(--mk-border-str);white-space:nowrap;}
.mk-status--ok{color:var(--mk-success);border-color:var(--mk-success-soft);background:var(--mk-success-soft);}
.mk-status--alert{color:var(--mk-danger);border-color:var(--mk-danger-soft);background:var(--mk-danger-soft);}
.mk-status--info{color:var(--mk-info);border-color:rgba(74,107,156,.15);background:rgba(74,107,156,.08);}
.mk-status--warn{color:var(--mk-accent);border-color:var(--mk-accent-soft);background:var(--mk-accent-soft);}
.mk-status--muted{color:var(--mk-text-mute);border-color:var(--mk-border);background:var(--mk-bg-soft);}

/* === Pagination === */
.mk-pagination{display:flex;justify-content:center;gap:6px;margin-top:24px;flex-wrap:wrap;}
.mk-pagination a,.mk-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:var(--mk-radius-sm);font-size:.8rem;color:var(--mk-text-soft);text-decoration:none;border:1px solid var(--mk-border);background:var(--mk-bg-elev);}
.mk-pagination a:hover{border-color:var(--mk-accent);color:var(--mk-accent);}
.mk-pagination .mk-page-active{background:var(--mk-accent);color:#fff;border-color:var(--mk-accent);}
[data-theme="dark"] .mk-pagination .mk-page-active{color:#0a0c0f;}
.mk-pagination .mk-page-disabled{opacity:.4;pointer-events:none;}
@media(max-width:560px){.mk-cards{grid-template-columns:1fr;}}

/* === Form system: inputs, selects, textareas, labels === */
.mk-form{display:flex;flex-direction:column;gap:20px;}
.mk-label{display:block;font-size:.72rem;font-weight:500;color:var(--mk-text-mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}

.mk-input,.mk-select,.mk-textarea{
  width:100%;
  padding:10px 13px;
  font-family:var(--mk-font-body);
  font-size:.88rem;
  color:var(--mk-text);
  background:var(--mk-bg-soft);
  border:1px solid var(--mk-border-str);
  border-radius:var(--mk-radius-sm);
  transition:border-color 150ms,box-shadow 150ms;
  outline:none;
}
.mk-input::placeholder,.mk-textarea::placeholder{color:var(--mk-text-mute);}
.mk-input:focus,.mk-select:focus,.mk-textarea:focus{
  border-color:var(--mk-accent);
  box-shadow:0 0 0 3px var(--mk-accent-soft);
}
.mk-input:disabled,.mk-select:disabled,.mk-textarea:disabled,
.mk-input[readonly]{
  background:var(--mk-bg);
  color:var(--mk-text-soft);
  cursor:not-allowed;
  opacity:.75;
}
.mk-textarea{resize:vertical;min-height:80px;line-height:1.5;}
.mk-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%238a857e'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}

/* Validation error state */
.mk-input.mk-input--error,.mk-select.mk-input--error,.mk-textarea.mk-input--error{
  border-color:var(--mk-danger);
}
.mk-error-text{font-size:.72rem;color:var(--mk-danger);margin-top:4px;}

@media(max-width:560px){
  .mk-input,.mk-select,.mk-textarea{font-size:.86rem;padding:9px 12px;}
}

/* ── Card (the universal item card) ── */
.mk-card{background:var(--mk-bg-elev);border:1px solid var(--mk-border);border-radius:var(--mk-radius);padding:18px 20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;transition:all 200ms;position:relative;overflow:hidden;}
.mk-card:hover{border-color:var(--mk-border-str);transform:translateY(-1px);}
.mk-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mk-accent);opacity:0;transition:opacity 200ms;}
.mk-card:hover::before{opacity:1;}
.mk-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.mk-card-title{font-family:var(--mk-font-display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em;color:var(--mk-text);line-height:1.2;}
.mk-card-sub{font-size:.78rem;color:var(--mk-text-soft);margin-top:2px;}
.mk-card-meta{display:flex;gap:14px;font-size:.74rem;color:var(--mk-text-mute);margin-top:auto;padding-top:8px;border-top:1px solid var(--mk-border);}
.mk-card-meta strong{color:var(--mk-text);font-weight:500;font-variant-numeric:tabular-nums;}

/* ── Grids ── */
.mk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.mk-cards-tight{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}

/* ── Table ── */
.mk-table-wrap{background:var(--mk-bg-elev);border:1px solid var(--mk-border);border-radius:var(--mk-radius);overflow:hidden;}
.mk-table{width:100%;border-collapse:collapse;font-size:.84rem;}
.mk-table thead th{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-text-mute);text-align:left;padding:14px 18px;border-bottom:1px solid var(--mk-border);background:var(--mk-bg-soft);}
.mk-table tbody td{padding:14px 18px;border-bottom:1px solid var(--mk-border);color:var(--mk-text-soft);}
.mk-table tbody tr:last-child td{border-bottom:0;}
.mk-table tbody tr:hover td{background:var(--mk-bg-soft);}
.mk-table tbody tr{cursor:pointer;}
.mk-table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mk-font-mono);font-size:.82rem;color:var(--mk-text);}
.mk-table a{color:var(--mk-text);text-decoration:none;font-weight:500;}
.mk-table a:hover{color:var(--mk-accent);}

/* ── Status pills (used everywhere) ── */
.mk-status{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid;letter-spacing:.02em;}
.mk-status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}
.mk-status--ok       {color:var(--mk-success);border-color:var(--mk-success-soft);background:var(--mk-success-soft);}
.mk-status--info     {color:var(--mk-info);border-color:rgba(74,107,156,.18);background:rgba(74,107,156,.10);}
.mk-status--warn     {color:var(--mk-accent);border-color:var(--mk-accent-soft);background:var(--mk-accent-soft);}
.mk-status--alert    {color:var(--mk-danger);border-color:var(--mk-danger-soft);background:var(--mk-danger-soft);}
.mk-status--muted    {color:var(--mk-text-mute);border-color:var(--mk-border-str);background:var(--mk-bg-soft);}

/* ── Forms ── */
.mk-form{background:var(--mk-bg-elev);border:1px solid var(--mk-border);border-radius:var(--mk-radius);padding:28px;display:flex;flex-direction:column;gap:18px;max-width:640px;}
.mk-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media(max-width:560px){.mk-form-grid{grid-template-columns:1fr;}}
.mk-field{display:flex;flex-direction:column;gap:6px;}
.mk-field-full{grid-column:1/-1;}
.mk-label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-text-mute);}
.mk-input,.mk-select,.mk-textarea{background:var(--mk-bg);border:1px solid var(--mk-border-str);border-radius:var(--mk-radius-sm);padding:11px 13px;font-family:inherit;font-size:.88rem;color:var(--mk-text);transition:all 150ms;width:100%;font-variant-numeric:tabular-nums;}
.mk-input:focus,.mk-select:focus,.mk-textarea:focus{outline:none;border-color:var(--mk-accent);box-shadow:0 0 0 3px var(--mk-accent-soft);}
.mk-textarea{resize:vertical;min-height:90px;font-variant-numeric:normal;}
.mk-hint{font-size:.72rem;color:var(--mk-text-mute);margin-top:2px;}
.mk-error{font-size:.74rem;color:var(--mk-danger);margin-top:4px;}

/* ── Alerts (flash messages) ── */
.mk-alert{padding:12px 16px;border-radius:var(--mk-radius-sm);font-size:.84rem;display:flex;align-items:center;gap:10px;margin-bottom:14px;border:1px solid;}
.mk-alert--ok{color:var(--mk-success);background:var(--mk-success-soft);border-color:var(--mk-success-soft);}
.mk-alert--err{color:var(--mk-danger);background:var(--mk-danger-soft);border-color:var(--mk-danger-soft);}
.mk-alert--info{color:var(--mk-info);background:rgba(74,107,156,.1);border-color:rgba(74,107,156,.18);}

/* ── Back link ── */
.mk-back{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--mk-text-soft);text-decoration:none;margin-bottom:12px;transition:color 150ms;}
.mk-back:hover{color:var(--mk-accent);}

/* ── Stat strip (compact metrics row inside detail pages) ── */
.mk-stripe{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;background:var(--mk-bg-elev);border:1px solid var(--mk-border);border-radius:var(--mk-radius);overflow:hidden;}
.mk-stripe-cell{padding:16px 20px;border-right:1px solid var(--mk-border);}
.mk-stripe-cell:last-child{border-right:0;}
@media(max-width:680px){.mk-stripe-cell{border-right:0;border-bottom:1px solid var(--mk-border);}.mk-stripe-cell:last-child{border-bottom:0;}}
.mk-stripe-label{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-text-mute);margin-bottom:6px;}
.mk-stripe-value{font-family:var(--mk-font-display);font-weight:500;font-size:1.3rem;color:var(--mk-text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

/* ── Empty state ── */
.mk-emptypanel{background:var(--mk-bg-elev);border:1px dashed var(--mk-border-str);border-radius:var(--mk-radius);padding:48px 24px;text-align:center;}
.mk-emptypanel-icon{font-size:1.8rem;color:var(--mk-text-mute);margin-bottom:8px;}
.mk-emptypanel-title{font-family:var(--mk-font-display);font-weight:500;font-size:1.15rem;color:var(--mk-text);margin-bottom:4px;}
.mk-emptypanel-lede{font-size:.86rem;color:var(--mk-text-soft);margin-bottom:18px;max-width:380px;margin-left:auto;margin-right:auto;line-height:1.5;}

/* ── Search / filters bar ── */
.mk-filters{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.mk-search{position:relative;flex:1;max-width:340px;}
.mk-search input{width:100%;padding-left:34px;}
.mk-search::before{content:'⌕';position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mk-text-mute);font-size:.92rem;pointer-events:none;}

/* ── Detail header (the hero on show pages) ── */
.mk-detail-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--mk-border);margin-bottom:18px;}
.mk-detail-hero h1{font-family:var(--mk-font-display);font-weight:400;font-size:1.75rem;letter-spacing:-.02em;margin:4px 0 4px;line-height:1.1;}
.mk-detail-hero-sub{display:flex;gap:12px;font-size:.82rem;color:var(--mk-text-soft);align-items:center;flex-wrap:wrap;}
.mk-detail-hero-sub .sep{color:var(--mk-text-mute);}

/* ── Two-column detail layout ── */
.mk-detail-cols{display:grid;grid-template-columns:2fr 1fr;gap:18px;}
@media(max-width:980px){.mk-detail-cols{grid-template-columns:1fr;}}

/* ── Section eyebrow already exists from v3 ── */

/* ── Pagination ── */
.mk-paginate{display:flex;justify-content:center;gap:6px;padding:24px 0;font-size:.82rem;}
.mk-paginate a,.mk-paginate span{padding:7px 11px;border-radius:var(--mk-radius-sm);color:var(--mk-text-soft);text-decoration:none;font-variant-numeric:tabular-nums;}
.mk-paginate a:hover{background:var(--mk-bg-soft);color:var(--mk-text);}
.mk-paginate .is-active{background:var(--mk-accent);color:#fff;}
[data-theme="dark"] .mk-paginate .is-active{color:#0a0c0f;}

/* ============================================
   Payment method choice chips
   ============================================ */
.mk-method-choice{
  position:relative;display:inline-flex;align-items:center;cursor:pointer;
  padding:9px 16px;border-radius:999px;border:1px solid var(--mk-border-str);
  background:var(--mk-bg);font-size:.82rem;color:var(--mk-text-soft);
  transition:all 150ms;font-weight:500;
}
.mk-method-choice input{position:absolute;opacity:0;pointer-events:none;}
.mk-method-choice:hover{border-color:var(--mk-text-soft);color:var(--mk-text);}
.mk-method-choice:has(input:checked){
  background:var(--mk-accent);color:#fff;border-color:var(--mk-accent);
  box-shadow:0 1px 12px var(--mk-accent-soft);
}
[data-theme="dark"] .mk-method-choice:has(input:checked){color:#0a0c0f;}

/* Hide the giant SVGs */
nav[aria-label="Pagination Navigation"] svg{display:none;}

/* Hide the redundant mobile-only section — keep the numbered desktop one */
nav[aria-label="Pagination Navigation"] > div:first-child{display:none;}

/* Make page links sit horizontally with breathing room */
nav[aria-label="Pagination Navigation"] > div:last-child{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;padding:20px 0;
}


[data-role="owner"]    { --mk-accent:#C8A24B; --mk-accent-soft:#FBF5E6; } /* gold — executive */
[data-role="manager"]  { --mk-accent:#2B8C8C; --mk-accent-soft:#E6F4F4; } /* teal — operational */
[data-role="employee"] { --mk-accent:#3F9C5A; --mk-accent-soft:#E9F5EC; } /* green — task */



/* ============================================
   Audit page — Trust showpiece
   ============================================ */

/* Verification panel */
.mk-verify-panel{
  background:linear-gradient(135deg, var(--mk-bg-elev), color-mix(in srgb, var(--mk-accent) 3%, var(--mk-bg-elev)));
  border:1px solid var(--mk-border);border-radius:var(--mk-radius);
  padding:24px;margin-bottom:16px;
  display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;
}
.mk-verify-panel::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 90% 10%, var(--mk-accent-soft), transparent 60%);
  opacity:.4;pointer-events:none;
}
.mk-verify-status{
  display:flex;align-items:center;gap:18px;position:relative;
  padding:6px 0;transition:transform 250ms;
}
.mk-verify-status.is-pulsing{animation:verifyPulse .9s ease;}
@keyframes verifyPulse{
  0%   {transform:scale(1);}
  35%  {transform:scale(1.012);}
  100% {transform:scale(1);}
}
.mk-verify-icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.mk-verify-text{flex:1;min-width:0;}
.mk-verify-title{font-family:var(--mk-font-display);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;color:var(--mk-text);}
.mk-verify-status.is-ok .mk-verify-title{color:var(--mk-success);}
.mk-verify-status.is-bad .mk-verify-title{color:var(--mk-danger);}
.mk-verify-meta{font-family:var(--mk-font-mono);font-size:.74rem;color:var(--mk-text-mute);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.mk-verify-meta .sep{opacity:.4;}

.mk-verify-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--mk-border);
  position:relative;
}
@media(max-width:680px){.mk-verify-stats{grid-template-columns:repeat(2,1fr);}}
.mk-verify-stat{padding:14px 16px;border-right:1px solid var(--mk-border);}
.mk-verify-stat:last-child{border-right:0;}
@media(max-width:680px){
  .mk-verify-stat:nth-child(2){border-right:0;}
  .mk-verify-stat:nth-child(1),.mk-verify-stat:nth-child(2){border-bottom:1px solid var(--mk-border);}
}
.mk-verify-stat-label{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mk-text-mute);margin-bottom:6px;}
.mk-verify-stat-value{font-family:var(--mk-font-display);font-weight:500;font-size:1.15rem;color:var(--mk-text);letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.2;}

/* Controls row */
.mk-audit-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.mk-audit-controls .mk-search{max-width:280px;}

/* Chain v2 */
.mk-chain-v2{padding:8px 0;}
.mk-chain-entry-v2{
  display:flex;gap:16px;position:relative;cursor:pointer;
  padding:14px 12px;border-radius:var(--mk-radius-sm);
  transition:background-color 150ms;
  border:1px solid transparent;
}
.mk-chain-entry-v2:hover{background:var(--mk-bg-soft);border-color:var(--mk-border);}
.mk-chain-entry-v2.category-money:hover{border-left-color:var(--mk-accent);}
.mk-chain-entry-v2.category-reversal:hover{border-left-color:var(--mk-danger);}
.mk-chain-entry-v2.category-ops:hover{border-left-color:var(--mk-info);}

.mk-chain-rail-v2{
  position:relative;flex-shrink:0;width:28px;display:flex;justify-content:center;
  padding-top:6px;
}
.mk-chain-rail-v2::before{
  content:'';position:absolute;left:50%;top:-14px;bottom:-14px;width:1px;
  background:linear-gradient(to bottom, var(--mk-accent-soft), var(--mk-border) 30%, var(--mk-border) 70%, var(--mk-accent-soft));
  transform:translateX(-50%);
}
.mk-chain-entry-v2:first-child .mk-chain-rail-v2::before{top:50%;}
.mk-chain-entry-v2:last-child .mk-chain-rail-v2::before{bottom:50%;}

.mk-chain-dot{position:relative;z-index:2;width:12px!important;height:12px!important;
  margin-top:0!important;box-shadow:0 0 0 5px var(--mk-bg-elev), 0 0 0 6px var(--mk-border);}

.mk-chain-genesis{
  position:relative;z-index:2;font-size:1.4rem;color:var(--mk-accent);
  background:var(--mk-bg-elev);padding:0 2px;
  filter:drop-shadow(0 0 6px var(--mk-accent-soft));
}

.mk-chain-genesis-tag{
  font-family:var(--mk-font-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.18em;padding:2px 8px;border-radius:3px;
  background:var(--mk-accent-soft);color:var(--mk-accent);
  border:1px solid color-mix(in srgb, var(--mk-accent) 30%, transparent);
  margin-left:6px;vertical-align:middle;
}

.mk-chain-body-v2{flex:1;min-width:0;}
.mk-chain-row-v2{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.mk-chain-main-v2{flex:1;min-width:0;}

.mk-chain-title-v2{
  font-size:.96rem;font-weight:500;color:var(--mk-text);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.mk-chain-seq{
  font-family:var(--mk-font-mono);font-size:.7rem;color:var(--mk-text-mute);
  padding:1px 7px;border-radius:4px;background:var(--mk-bg);border:1px solid var(--mk-border);
  font-weight:500;letter-spacing:.04em;
}
.mk-chain-meta-v2{
  font-size:.78rem;color:var(--mk-text-soft);margin-top:5px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.mk-chain-meta-v2 .sep{opacity:.4;}
.mk-chain-meta-v2 strong{color:var(--mk-text);font-weight:500;}

/* Hash linkage display */
.mk-chain-link{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  margin-top:8px;font-family:var(--mk-font-mono);font-size:.72rem;
}
.mk-chain-prev,.mk-chain-curr{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:5px;
  border:1px solid var(--mk-border);background:var(--mk-bg);
  cursor:help;transition:all 150ms;
}
.mk-chain-prev{color:var(--mk-text-mute);}
.mk-chain-prev:hover{border-color:var(--mk-text-soft);color:var(--mk-text-soft);}
.mk-chain-curr{color:var(--mk-accent);border-color:color-mix(in srgb, var(--mk-accent) 25%, var(--mk-border));}
.mk-chain-curr:hover{background:var(--mk-accent-soft);}
.mk-chain-link-label{
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  opacity:.55;
}
.mk-chain-arrow{color:var(--mk-text-mute);opacity:.5;font-size:.85rem;}

/* Amount column */
.mk-chain-amount-col{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.mk-chain-amount-v2{
  font-family:var(--mk-font-display);font-weight:500;font-size:1.05rem;
  color:var(--mk-accent);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;white-space:nowrap;
}
.mk-chain-amount-v2.is-negative{color:var(--mk-danger);}
.mk-chain-toggle{
  background:transparent;border:1px solid var(--mk-border);
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--mk-text-mute);font-size:.78rem;transition:all 150ms;
}
.mk-chain-toggle:hover{background:var(--mk-bg);color:var(--mk-accent);border-color:var(--mk-accent);}

/* Expand panel */
.mk-chain-expand{
  max-height:0;overflow:hidden;transition:max-height 300ms ease, padding 300ms;
  margin-top:0;padding:0;
}
.mk-chain-expand.is-open{
  max-height:800px;padding:16px 0 4px;margin-top:14px;
  border-top:1px solid var(--mk-border);
}
.mk-chain-expand-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;
}
@media(max-width:680px){.mk-chain-expand-grid{grid-template-columns:1fr;}}
.mk-chain-fullhash{
  font-size:.7rem;color:var(--mk-text-soft);word-break:break-all;line-height:1.5;
  padding:6px 9px;background:var(--mk-bg);border:1px solid var(--mk-border);
  border-radius:var(--mk-radius-sm);margin-top:3px;
}
.mk-chain-payload{
  margin:0;padding:14px 16px;background:var(--mk-bg);border:1px solid var(--mk-border);border-radius:var(--mk-radius-sm);
  font-family:var(--mk-font-mono);font-size:.72rem;color:var(--mk-text-soft);line-height:1.65;
  white-space:pre-wrap;word-break:break-word;max-height:280px;overflow:auto;
}

/* How it works grid */
.mk-howit-works{
  margin-top:24px;padding:28px;
  background:var(--mk-bg-soft);border:1px solid var(--mk-border);border-radius:var(--mk-radius);
}
.mk-howit-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
@media(max-width:980px){.mk-howit-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.mk-howit-grid{grid-template-columns:1fr;}}
.mk-howit-step{position:relative;padding-left:8px;}
.mk-howit-num{
  font-family:var(--mk-font-display);font-weight:500;font-size:1.6rem;
  color:var(--mk-accent);line-height:1;margin-bottom:10px;
}
.mk-howit-title{
  font-weight:500;font-size:.92rem;color:var(--mk-text);margin-bottom:6px;
}
.mk-howit-text{
  font-size:.8rem;color:var(--mk-text-soft);line-height:1.6;margin:0;
}


/* ============================================
   MALIKA — Auth pages (split-vault layout)
   ============================================ */
.mk-auth{
  min-height:100vh;display:grid;grid-template-columns:1fr 0.72fr;
  background:var(--mk-bg);
}
@media(max-width:880px){.mk-auth{grid-template-columns:1fr;grid-template-rows:auto 1fr;}}

/* Left: form panel */
.mk-auth-form{
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 56px;min-height:100vh;
}
@media(max-width:880px){.mk-auth-form{padding:32px 24px;min-height:0;}}
@media(max-width:560px){.mk-auth-form{padding:24px 20px;}}
.mk-auth-form-inner{max-width:420px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:24px;}

.mk-auth-header{display:flex;flex-direction:column;gap:8px;}
.mk-auth-brand{
  font-family:var(--mk-font-display);font-size:1.55rem;font-weight:500;letter-spacing:-.02em;
  color:var(--mk-text);text-decoration:none;display:inline-flex;align-items:baseline;gap:2px;
  margin-bottom:32px;
}
.mk-auth-brand-dot{color:var(--mk-accent);}
.mk-auth-eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mk-text-mute);
}
.mk-auth-title{
  font-family:var(--mk-font-display);font-weight:400;font-size:2.1rem;
  letter-spacing:-.025em;line-height:1.1;color:var(--mk-text);margin:0;
}
.mk-auth-lede{
  color:var(--mk-text-soft);font-size:.92rem;margin:0;line-height:1.5;
}

.mk-auth-fields{display:flex;flex-direction:column;gap:14px;}
.mk-auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.82rem;}
.mk-auth-checkbox{display:inline-flex;align-items:center;gap:8px;color:var(--mk-text-soft);cursor:pointer;}
.mk-auth-checkbox input{
  width:16px;height:16px;border:1px solid var(--mk-border-str);border-radius:3px;
  appearance:none;cursor:pointer;background:var(--mk-bg);position:relative;flex-shrink:0;
}
.mk-auth-checkbox input:checked{background:var(--mk-accent);border-color:var(--mk-accent);}
.mk-auth-checkbox input:checked::after{
  content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#fff;font-size:11px;font-weight:700;line-height:1;
}
[data-theme="dark"] .mk-auth-checkbox input:checked::after{color:#0a0c0f;}
.mk-auth-link{color:var(--mk-accent);text-decoration:none;font-weight:500;}
.mk-auth-link:hover{text-decoration:underline;}

.mk-auth-cta{
  background:var(--mk-accent);color:#fff;border:0;cursor:pointer;
  padding:13px 20px;border-radius:var(--mk-radius-sm);
  font-family:inherit;font-size:.92rem;font-weight:500;letter-spacing:-.005em;
  transition:all 200ms;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
}
[data-theme="dark"] .mk-auth-cta{color:#0a0c0f;}
.mk-auth-cta:hover{filter:brightness(1.05);box-shadow:0 4px 18px var(--mk-accent-soft);transform:translateY(-1px);}
.mk-auth-cta:active{transform:translateY(0);}

.mk-auth-foot{
  text-align:center;font-size:.84rem;color:var(--mk-text-soft);padding-top:12px;
  border-top:1px solid var(--mk-border);
}

/* Right: brand panel */
.mk-auth-brand-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--mk-accent) 12%, var(--mk-bg-elev)),
    var(--mk-bg-elev) 60%,
    color-mix(in srgb, var(--mk-accent) 6%, var(--mk-bg-elev)));
  border-left:1px solid var(--mk-border);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:48px 44px;
}
[data-theme="dark"] .mk-auth-brand-panel{
  background:radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--mk-accent) 14%, transparent), transparent 65%),
             linear-gradient(135deg, #0e1216, #161a20);
}
.mk-auth-brand-panel::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--mk-accent) 18%, transparent), transparent 50%);
  pointer-events:none;
}
.mk-auth-brand-panel::after{
  content:'';position:absolute;bottom:-40%;right:-30%;width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--mk-accent) 8%, transparent), transparent 70%);
  pointer-events:none;
}
@media(max-width:880px){
  .mk-auth-brand-panel{
    padding:32px 24px;min-height:auto;
    border-left:0;border-bottom:1px solid var(--mk-border);
    flex-direction:row;align-items:center;justify-content:space-between;gap:20px;
  }
  .mk-auth-brand-panel::after{display:none;}
}

.mk-auth-mark{
  position:relative;z-index:1;
  font-family:var(--mk-font-display);font-size:3.2rem;font-weight:400;
  letter-spacing:-.03em;color:var(--mk-text);line-height:1;
}
.mk-auth-mark-dot{color:var(--mk-accent);}
@media(max-width:880px){.mk-auth-mark{font-size:1.8rem;}}

.mk-auth-proof{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:24px;
}
@media(max-width:880px){.mk-auth-proof{display:none;}}

.mk-auth-quote{
  font-family:var(--mk-font-display);font-style:italic;font-weight:400;
  font-size:1.5rem;letter-spacing:-.015em;line-height:1.35;color:var(--mk-text);
}
.mk-auth-quote-mark{color:var(--mk-accent);font-size:1.2em;margin-right:4px;vertical-align:-0.05em;}

.mk-auth-promises{
  display:flex;flex-direction:column;gap:12px;
  padding-top:24px;border-top:1px solid color-mix(in srgb, var(--mk-text) 8%, transparent);
}
.mk-auth-promise{
  display:flex;align-items:flex-start;gap:12px;font-size:.86rem;color:var(--mk-text-soft);
}
.mk-auth-promise-dot{
  flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--mk-accent);
  margin-top:8px;box-shadow:0 0 0 3px var(--mk-accent-soft);
}
.mk-auth-promise strong{color:var(--mk-text);font-weight:500;font-size:.84rem;display:block;margin-bottom:2px;}

.mk-auth-tagline{
  position:relative;z-index:1;font-size:.74rem;color:var(--mk-text-mute);
  font-family:var(--mk-font-display);font-style:italic;letter-spacing:.02em;
}
@media(max-width:880px){.mk-auth-tagline{display:none;}}

/* Theme toggle in top corner */
.mk-auth-tools{
  position:absolute;top:24px;right:24px;z-index:10;
  display:flex;gap:10px;align-items:center;
}
.mk-auth-locale{
  display:inline-flex;gap:1px;background:var(--mk-bg-soft);border:1px solid var(--mk-border);
  border-radius:999px;padding:3px;
}
.mk-auth-locale button{
  background:transparent;border:0;padding:4px 10px;border-radius:999px;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mk-text-mute);cursor:pointer;font-family:inherit;
}
.mk-auth-locale button.is-active{background:var(--mk-accent);color:#fff;}
[data-theme="dark"] .mk-auth-locale button.is-active{color:#0a0c0f;}

/* Slim error / status messages inside form */
.mk-auth-error{
  padding:11px 14px;border-radius:var(--mk-radius-sm);
  background:var(--mk-danger-soft);border:1px solid color-mix(in srgb, var(--mk-danger) 25%, transparent);
  color:var(--mk-danger);font-size:.82rem;line-height:1.5;
}
.mk-auth-error ul{margin:0;padding-left:18px;}
.mk-auth-success{
  padding:11px 14px;border-radius:var(--mk-radius-sm);
  background:var(--mk-success-soft);border:1px solid color-mix(in srgb, var(--mk-success) 25%, transparent);
  color:var(--mk-success);font-size:.82rem;line-height:1.5;
}
/* ── Role identity accents (Phase 10) ───────────────────── */
body[data-role="owner"]    { --mk-role:#C8A24B; --mk-role-soft:#FBF5E6; }
body[data-role="manager"]  { --mk-role:#2B8C8C; --mk-role-soft:#E6F4F4; }
body[data-role="employee"] { --mk-role:#3F9C5A; --mk-role-soft:#E9F5EC; }

.mk-nav--role { border-bottom: 3px solid var(--mk-role, transparent); }

.mk-role-badge {
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    color: var(--mk-role); background: var(--mk-role-soft);
    border: 1px solid var(--mk-role);
}

.mk-scope-strip {
    display:flex; align-items:center; gap:8px;
    padding: 8px 24px; font-size: 13px;
    background: var(--mk-role-soft); color: var(--mk-role);
    border-bottom: 1px solid var(--mk-role);
}
.mk-scope-icon { font-size: 14px; }
.mk-kpi--role { color: var(--mk-role); }

.mk-bar { height:6px; border-radius:999px; background:var(--mk-role-soft); margin:6px 0; overflow:hidden; }
.mk-bar-fill { height:100%; border-radius:999px; transition:width .4s ease; }
.mk-card--alert { border-color:#d9534f; }

/* Tenant profile cards */
.mk-card{background:var(--mk-bg-elev);border:1px solid var(--mk-border);border-radius:var(--mk-radius);padding:22px 24px;}
.mk-card .mk-eyebrow{display:block;margin-bottom:14px;font-family:var(--mk-font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-text-mute);}

.mk-static{padding:9px 0;color:var(--mk-text);font-size:.92rem;}

.mk-hint{font-size:.78rem;color:var(--mk-text-mute);line-height:1.4;margin:4px 0 0;}

.mk-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:500;letter-spacing:.02em;background:var(--mk-border);color:var(--mk-text-soft);}
.mk-badge-success{background:var(--mk-success-soft);color:var(--mk-success);}

.mk-locked-notice{background:var(--mk-accent-soft);border:1px solid var(--mk-border-str);}
.mk-locked-notice .mk-badge{margin-bottom:8px;}

.mk-invite-box{background:var(--mk-bg-soft);}

/* Pagination */
.mk-pagination{display:flex;justify-content:center;gap:6px;margin-top:32px;flex-wrap:wrap;}
.mk-pagination a,.mk-pagination span{padding:8px 14px;border-radius:var(--mk-radius-sm);font-size:.82rem;color:var(--mk-text-soft);text-decoration:none;border:1px solid var(--mk-border);}
.mk-pagination a:hover{border-color:var(--mk-accent);color:var(--mk-accent);}
.mk-pagination .active span{background:var(--mk-accent);color:#fff;border-color:var(--mk-accent);}
.mk-pagination .disabled span{opacity:.4;}

/* Two-column detail/edit layout */
.mk-detail-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;}
@media(max-width:900px){.mk-detail-layout{grid-template-columns:1fr;}}
.mk-detail-main{display:flex;flex-direction:column;gap:20px;min-width:0;}
.mk-detail-side{display:flex;flex-direction:column;gap:20px;}
.mk-sticky{position:sticky;top:80px;}
@media(max-width:900px){.mk-sticky{position:static;}}

.mk-portal-card{display:flex;flex-direction:column;gap:12px;}
.mk-portal-card form{margin-top:0;}

/* Form controls — full-width, consistent sizing */
.mk-input,.mk-select,.mk-textarea{
  width:100%;
  padding:10px 12px;
  background:var(--mk-bg-soft);
  border:1px solid var(--mk-border-str);
  border-radius:var(--mk-radius-sm);
  color:var(--mk-text);
  font-family:var(--mk-font-body);
  font-size:.88rem;
  line-height:1.4;
}
.mk-input:focus,.mk-select:focus,.mk-textarea:focus{
  outline:none;
  border-color:var(--mk-accent);
  box-shadow:0 0 0 3px var(--mk-accent-soft);
}
.mk-input:disabled,.mk-input[readonly]{opacity:.6;cursor:not-allowed;}
.mk-textarea{resize:vertical;min-height:80px;}
.mk-field{display:flex;flex-direction:column;gap:6px;}
.mk-field-full{grid-column:1/-1;}
.mk-label{font-size:.72rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--mk-text-mute);}

/* Detail layout must not be squeezed by .mk-form's flex+max-width rules */
.mk-detail-layout.mk-form{max-width:none;display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;padding:0;background:none;border:none;}
@media(max-width:900px){.mk-detail-layout.mk-form{grid-template-columns:1fr;}}

/* Owner dashboard: priority attention queue */
.mk-attention-row {
    gap: 18px;
}

.mk-attention-row:hover {
    text-decoration: none;
}

.mk-attention-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.mk-attention-title {
    color: var(--mk-text);
    font-size: .88rem;
    font-weight: 600;
}

.mk-attention-meta {
    color: var(--mk-text-soft);
    font-size: .76rem;
    line-height: 1.45;
}

.mk-attention-side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    text-align: right;
}

.mk-attention-amount {
    color: var(--mk-text);
    font-family: var(--mk-font-mono);
    font-size: .78rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mk-attention-static {
    color: var(--mk-text-mute);
    font-size: .74rem;
}

@media (max-width: 560px) {
    .mk-attention-row {
        align-items: flex-start;
    }

    .mk-attention-side {
        display: none;
    }
}


.mk-mt{margin-top:20px;}

/* Utility: hide an element without removing it from the DOM (used for JS-toggled panels) */
.mk-hidden{display:none;}

/* ---- vendor index / list toolbar polish ---- */
.mk-main-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }

.mk-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.mk-toolbar-search { position:relative; flex:1 1 280px; min-width:0; }
.mk-toolbar-search .mk-input { width:100%; padding-left:38px; }
.mk-toolbar-search-icon {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; fill:none; stroke:var(--mk-muted);
    stroke-width:2; stroke-linecap:round; pointer-events:none;
}

.mk-btn-ghost { background:transparent; border:1px solid var(--mk-border); }
.mk-btn-ghost:hover { background:var(--mk-bg-elev); }

.mk-link-accent { color:var(--mk-accent); text-decoration:none; font-weight:500; }
.mk-link-accent:hover { text-decoration:underline; }

.mk-chip {
    display:inline-block; padding:2px 10px; border-radius:999px;
    background:var(--mk-bg-elev); border:1px solid var(--mk-border);
    font-size:.85em; color:var(--mk-text);
}

.mk-num { text-align:right; }

.mk-empty { text-align:center; padding:32px 12px !important; color:var(--mk-muted); }

/* ---- team: inline invite row (replaces the broken mk-form+mk-toolbar combo) ---- */
.mk-invite-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px;
    border: 1px solid var(--mk-border);
    border-radius: 12px;
    background: var(--mk-bg-elev);
}
.mk-invite-row .mk-input[type="email"] { flex: 1 1 260px; min-width: 0; }
.mk-invite-row select.mk-input { flex: 0 0 180px; }
.mk-invite-row .mk-btn { flex: 0 0 auto; }

@media (max-width: 640px) {
    .mk-invite-row { flex-direction: column; align-items: stretch; }
    .mk-invite-row .mk-input, .mk-invite-row select.mk-input { flex: 1 1 auto; }
}

/* ---- toast notifications (replaces top-of-flow flash bar) ---- */
.mk-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    left: auto;
    z-index: 200;                 /* above sidebar (80) */
    max-width: 380px;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-elev);
    color: var(--mk-text);
    font-size: .92rem;
    animation: mk-toast-in 240ms cubic-bezier(.2,.8,.2,1);
    transition: opacity 320ms ease, transform 320ms ease;
}
.mk-alert--ok  { border-left: 4px solid var(--mk-ok,  #3fae6b); }
.mk-alert--err { border-left: 4px solid var(--mk-err, #d8564a); }

.mk-alert.mk-alert--leaving {
    opacity: 0;
    transform: translateX(20px);
}

@keyframes mk-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* stack multiple toasts */
.mk-alert + .mk-alert { top: 84px; }

@media (max-width: 640px) {
    .mk-alert { left: 12px; right: 12px; max-width: none; }
}

/* ---- unit detail page polish ---- */
.mk-detail-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.mk-detail-hero h1 { margin:6px 0 8px; }
.mk-hero-price { font-size:1.15rem; font-weight:600; }
.mk-hero-price small { font-weight:400; color:var(--mk-muted); }

.mk-stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:20px 0; }
.mk-stat { padding:14px 16px; border:1px solid var(--mk-border); border-radius:12px; background:var(--mk-bg-elev); margin: 10px 0 10px 0;}
.mk-stat-value { font-size:1.35rem; font-weight:600; line-height:1.1; }
.mk-stat-label { font-size:.72rem; color:var(--mk-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }

.mk-card + .mk-card { margin-top:20px; }
.mk-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.mk-card-head .mk-h2 { margin:0; }

.mk-vacant-state { text-align:center; padding:28px 16px; }
.mk-vacant-state .mk-muted { margin-bottom:14px; }

.mk-checklist { list-style:none; padding:0; margin:0 0 14px; }
.mk-checklist li { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; margin:4px 0; background:var(--mk-bg-elev); }

.mk-eligible-banner { margin-top:14px; padding:10px 14px; border-radius:10px; border-left:4px solid var(--mk-accent); background:color-mix(in srgb, var(--mk-accent) 10%, var(--mk-bg-elev)); font-size:.9rem; }

/* ============================================
   Unit detail — helpers (missing from v3)
   ============================================ */
.mk-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 22px;}
.mk-detail-grid .mk-label{margin-bottom:4px;}
.mk-detail-grid > div > div{font-size:.9rem;font-weight:500;color:var(--mk-text);}
.mk-muted{color:var(--mk-text-mute);font-size:.86rem;line-height:1.55;}

.mk-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.mk-photo-grid img{width:100%;height:140px;object-fit:cover;border-radius:var(--mk-radius-sm);border:1px solid var(--mk-border);cursor:zoom-in;transition:transform 200ms,border-color 200ms,box-shadow 200ms;}
.mk-photo-grid img:hover{transform:scale(1.02);border-color:var(--mk-accent);box-shadow:0 6px 20px rgba(0,0,0,.14);}

.mk-checklist{list-style:none;padding:0;margin:0;}
.mk-checklist li{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--mk-border);font-size:.85rem;color:var(--mk-text-soft);}
.mk-checklist li:last-child{border-bottom:0;}

.mk-eligible-banner{margin-top:14px;padding:12px 14px;border-radius:var(--mk-radius-sm);font-size:.82rem;display:flex;align-items:center;gap:9px;border:1px solid;line-height:1.4;}
.mk-eligible-banner--yes{color:var(--mk-success);background:var(--mk-success-soft);border-color:var(--mk-success-soft);}
.mk-eligible-banner--no{color:var(--mk-accent);background:var(--mk-accent-soft);border-color:var(--mk-accent-soft);}



/* ============================================
   Unit detail — responsive + dark polish
   ============================================ */
@media (max-width:900px){
    .mk-detail-cols{grid-template-columns:1fr !important;}
    .mk-stripe{flex-wrap:wrap;}
    .mk-stripe-cell{flex:1 1 45%;min-width:130px;}
}
@media (max-width:560px){
    .mk-detail-hero{flex-direction:column;align-items:flex-start;gap:14px;}
    .mk-detail-hero h1{font-size:1.35rem;line-height:1.25;}
    .mk-pagehead-actions,.mk-pagehead-actions .mk-btn{width:100%;justify-content:center;}
    .mk-detail-grid{grid-template-columns:1fr 1fr;gap:14px 16px;}
    .mk-stripe-cell{flex:1 1 100%;}
    .mk-photo-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
    .mk-photo-grid img{height:110px;}
    .mk-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .mk-table{min-width:520px;}
    .mk-btn-sm{padding:11px 14px;font-size:.85rem;}
}

/* Thin tinted borders get swallowed on very dark backgrounds —
   strengthen them with color-mix (matches the pattern at line 1509). */
.mk-eligible-banner--yes{border-color:color-mix(in srgb, var(--mk-success) 28%, transparent);}
.mk-eligible-banner--no {border-color:color-mix(in srgb, var(--mk-accent) 28%, transparent);}
[data-theme="dark"] .mk-photo-grid img:hover{box-shadow:0 6px 22px rgba(0,0,0,.5);}

/* ============================================
   Role accent tokens — dark-mode adaptation
   (overrides the opaque light pastels at lines 1136-1138 / 1513-1515)
   ============================================ */
[data-theme="dark"][data-role="owner"],
[data-theme="dark"] body[data-role="owner"]{
    --mk-accent-soft:color-mix(in srgb, #C8A24B 15%, transparent);
    --mk-role-soft:color-mix(in srgb, #C8A24B 15%, transparent);
}
[data-theme="dark"][data-role="manager"],
[data-theme="dark"] body[data-role="manager"]{
    --mk-accent-soft:color-mix(in srgb, #2B8C8C 16%, transparent);
    --mk-role-soft:color-mix(in srgb, #2B8C8C 16%, transparent);
}
[data-theme="dark"][data-role="employee"],
[data-theme="dark"] body[data-role="employee"]{
    --mk-accent-soft:color-mix(in srgb, #3F9C5A 16%, transparent);
    --mk-role-soft:color-mix(in srgb, #3F9C5A 16%, transparent);
}

/* Banner borders visible on dark backgrounds */
.mk-eligible-banner--yes{border-color:color-mix(in srgb, var(--mk-success) 28%, transparent);}
.mk-eligible-banner--no {border-color:color-mix(in srgb, var(--mk-accent) 28%, transparent);}
[data-theme="dark"] .mk-photo-grid img:hover{box-shadow:0 6px 22px rgba(0,0,0,.5);}


.mk-stat--alert{border-color:color-mix(in srgb, var(--mk-danger) 30%, var(--mk-border));}
.mk-stat--alert .mk-stat-value{color:var(--mk-danger);}
.mk-stat--warn{border-color:color-mix(in srgb, var(--mk-accent) 30%, var(--mk-border));}



/* Team access editor */
.team-access-properties,
.team-access-permissions {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.team-access-property,
.team-access-permission-group {
    border: 1px solid var(--mk-border);
    border-radius: 10px;
    padding: 14px;
    background: var(--mk-surface, transparent);
}

.team-access-property__head,
.team-access-choice,
.team-access-unit,
.team-access-permission {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.team-access-property__head strong,
.team-access-choice strong {
    display: block;
}

.team-access-property__head small,
.team-access-choice small {
    display: block;
    margin-top: 3px;
    color: var(--mk-text-mute);
}

.team-access-units {
    margin: 14px 0 0 28px;
    display: grid;
    gap: 10px;
}

.team-access-unit-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--mk-border);
    border-radius: 8px;
}

.team-access-permissions {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.team-access-permission-group {
    min-width: 0;
}

.team-access-permission-group legend {
    padding: 0 5px;
    color: var(--mk-text);
    font-weight: 700;
}

.team-access-permission {
    padding: 7px 0;
}

.team-access-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--mk-border);
    padding-top: 18px;
    margin-top: 20px;
}

.is-hidden {
    display: none !important;
}

@media (max-width: 640px) {
    .team-access-units {
        margin-left: 0;
    }

    .team-access-footer {
        justify-content: stretch;
    }

    .team-access-footer .mk-btn {
        flex: 1;
        text-align: center;
    }
}

/* Team access editor — two-column on desktop */
@media (min-width: 900px) {
    .team-access-properties {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

@media (max-width: 899px) {
    .team-access-properties {
        grid-template-columns: 1fr;
    }
}

/* ---- photo lightbox ---- */
.mk-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(10, 10, 9, .88);
    cursor: zoom-out;
    animation: mk-lightbox-in 200ms ease;
}
.mk-lightbox.is-open { display: flex; }
.mk-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--mk-radius-sm);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    cursor: default;
}
.mk-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.mk-lightbox-close:hover { background: rgba(255,255,255,.18); }
@keyframes mk-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (max-width: 560px) {
    .mk-lightbox { padding: 16px; }
}

/* ---- public listing — luxury presentation ---- */
.mk-listing-hero {
    position: relative;
    width: 100%;
    height: 62vh;
    min-height: 440px;
    max-height: 680px;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mk-accent) 14%, var(--mk-bg-elev)), var(--mk-bg-elev) 60%, color-mix(in srgb, var(--mk-accent) 8%, var(--mk-bg-elev)));
}
.mk-listing-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.mk-listing-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,9,0) 40%, rgba(10,10,9,.72) 100%);
    pointer-events: none;
}
.mk-listing-hero-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 48px clamp(24px, 6vw, 72px);
    color: #fff;
}
.mk-listing-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    margin-bottom: 10px;
}
.mk-listing-hero-title {
    font-family: var(--mk-font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    letter-spacing: -.02em;
    line-height: 1.05;
    color: #fff;
    margin: 0 0 12px;
}
.mk-listing-hero-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    font-size: .92rem;
    color: rgba(255,255,255,.85);
}
.mk-listing-hero-meta .sep { opacity: .5; }
.mk-listing-price-chip {
    position: absolute;
    top: 32px;
    right: clamp(24px, 6vw, 72px);
    z-index: 2;
    padding: 14px 22px;
    border-radius: var(--mk-radius);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(14px);
    color: #fff;
    text-align: right;
}
.mk-listing-price-chip .amount {
    font-family: var(--mk-font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
}
.mk-listing-price-chip .unit {
    font-size: .74rem;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mk-listing-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
}
.mk-listing-section {
    padding: 56px 0;
    border-top: 1px solid var(--mk-border);
}
.mk-listing-section:first-child { border-top: none; }
.mk-listing-section-title {
    font-family: var(--mk-font-display);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: -.01em;
    color: var(--mk-text);
    margin: 0 0 24px;
}

.mk-listing-lede {
    font-family: var(--mk-font-display);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--mk-text);
    margin: 0 0 18px;
}
.mk-listing-body {
    font-size: .96rem;
    line-height: 1.85;
    color: var(--mk-text-soft);
    margin: 0;
    max-width: 640px;
}

.mk-listing-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.mk-listing-gallery img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--mk-radius-sm);
    cursor: zoom-in;
    transition: transform 250ms ease, box-shadow 250ms ease;
}
.mk-listing-gallery img:hover {
    transform: scale(1.015);
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
}

.mk-listing-cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 900px) {
    .mk-listing-cols { grid-template-columns: 1fr; }
}

.mk-listing-stripe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    overflow: hidden;
    background: var(--mk-bg-elev);
}
.mk-listing-stripe-cell {
    padding: 22px 24px;
    border-right: 1px solid var(--mk-border);
}
.mk-listing-stripe-cell:last-child { border-right: none; }
.mk-listing-stripe-label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mk-text-mute);
    margin-bottom: 8px;
}
.mk-listing-stripe-value {
    font-family: var(--mk-font-display);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--mk-text);
    letter-spacing: -.01em;
}
@media (max-width: 680px) {
    .mk-listing-stripe { grid-template-columns: repeat(2, 1fr); }
    .mk-listing-stripe-cell:nth-child(2n) { border-right: none; }
    .mk-listing-stripe-cell { border-bottom: 1px solid var(--mk-border); }
    .mk-listing-stripe-cell:nth-last-child(-n+2) { border-bottom: none; }
}

.mk-listing-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--mk-border);
    font-size: .9rem;
}
.mk-listing-spec-row:last-child { border-bottom: none; }
.mk-listing-spec-label { color: var(--mk-text-mute); }
.mk-listing-spec-value { color: var(--mk-text); font-weight: 500; }

.mk-listing-apply {
    position: sticky;
    top: 40px;
    background: var(--mk-bg-elev);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    padding: 32px;
    box-shadow: 0 12px 40px rgba(20,16,8,.06);
}
.mk-listing-apply-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mk-accent);
    margin-bottom: 8px;
}
.mk-listing-apply-title {
    font-family: var(--mk-font-display);
    font-size: 1.4rem;
    color: var(--mk-text);
    margin: 0 0 10px;
}
.mk-listing-apply-lede {
    font-size: .86rem;
    color: var(--mk-text-soft);
    line-height: 1.55;
    margin: 0 0 24px;
}

.mk-listing-footer {
    text-align: center;
    padding: 48px 0 64px;
    font-family: var(--mk-font-display);
    font-style: italic;
    font-size: .82rem;
    color: var(--mk-text-mute);
    border-top: 1px solid var(--mk-border);
    margin-top: 8px;
}
@media (max-width: 560px) {
    .mk-listing-hero { height: 50vh; min-height: 360px; }
    .mk-listing-price-chip { position: static; margin-top: 16px; display: inline-block; }
    .mk-listing-hero-content { padding: 28px 20px; }
}

/* ---- listing hero true full-bleed override ---- */
.mk-listing-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: -30px;
}
@media (max-width: 768px) {
    .mk-listing-hero { margin-top: -22px; }
}
body:has(.mk-sidebar) .mk-listing-hero { margin-left: calc(50% - 50vw); }

.mk-listing-wrap {
    max-width: 1280px;
}
.mk-listing-section {
    padding: 72px 0;
}
.mk-listing-gallery img {
    height: 260px;
}
.mk-listing-cols {
    gap: 72px;
}

/* ---- listing hero: full viewport intro section ---- */
.mk-listing-hero {
    height: 100vh;
    min-height: 100vh;
    max-height: none;
}
.mk-listing-hero img {
    object-position: center 38%;
}
.mk-listing-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 2;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.8);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    animation: mk-scroll-bounce 2.2s ease-in-out infinite;
    cursor: pointer;
    pointer-events: auto;
}
.mk-listing-scroll-cue svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}
@keyframes mk-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}
@media (max-width: 560px) {
    .mk-listing-hero { height: 100vh; }
}