/* platform-asset-bust:2026-09-15-profile-review-v2 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --bg: #eaf0fb;
    --white: #ffffff;
    --card: #ffffff;
    --border: #E6DCC4;
    --text: #0D1B3E;
    --text2: #2E3E63;
    --muted: #6F7E9D;
    --primary: #1A2D5A;
    --green: #1F8A63;
    --info: #2A4F8A;
    --warn: #C9A84C;
    --err: #A93A4A;
    --sidebar: 220px;
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bp-mobile: 640px;
    --bp-tablet: 1024px;
    --input-disabled-bg: #eef1f6;
    --input-disabled-text: #8a96ad;
    --input-disabled-border: #d5dce8;
}

html {
    height: 100%
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    zoom: 1.2;
    min-height: 100%
}

/* Dashboard: one scroll surface (.content) — lock document/body scroll */
html:has(.dash-layout),
html:has(.dash-layout) body {
    height: 100%;
    max-height: 100%;
    overflow: hidden
}

html:has(.dash-layout) #app {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

.public-page {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 10% -10%, rgba(74, 111, 198, .12), transparent 55%),
        radial-gradient(ellipse 60% 40% at 95% 5%, rgba(201, 168, 76, .08), transparent 50%),
        linear-gradient(180deg, #e8eef8 0%, var(--bg) 28%, #e4ebf6 100%)
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(230, 220, 196, .75);
    box-shadow: 0 2px 12px rgba(74, 111, 198, .06);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px
}

.nav-logo {
    display: flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0
}

.nav-logo .brand-logo {
    height: 72px;
    width: auto;
    max-width: min(283px, 54vw);
    object-fit: contain
}

.public-page .nav-logo .brand-logo {
    height: 65px;
    max-width: min(254px, 52vw)
}

.brand-logo {
    display: block;
    width: auto;
    object-fit: contain
}

.modal-brand-logo {
    display: block;
    margin: 0 auto .25rem;
    max-width: 200px;
    width: 100%;
    height: auto;
    max-height: 72px;
    object-fit: contain
}

.footer-brand {
    margin-bottom: .65rem;
    line-height: 0
}

.footer-brand-logo,
.footer-brand .brand-logo {
    height: 42px;
    width: auto;
    max-width: 182px;
    object-fit: contain
}

.wizard-header-brand {
    display: flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0
}

.wizard-brand-logo,
.wizard-header-brand .brand-logo {
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center
}

.nav-toggle {
    display: none;
    background: #f3f6ff;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--text2)
}

.nav-links a {
    color: var(--text2);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: color .2s
}

.nav-links a:hover {
    color: var(--primary)
}

.btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all .18s
}

.btn-primary {
    background: linear-gradient(135deg, #1A2D5A 0%, #253D72 100%);
    color: #fff;
    border: 1px solid #223767
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #1A2D5A 0%, #253D72 100%);
    color: #fff;
    border: 1px solid #223767;
    filter: brightness(1.08);
    opacity: 1
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--warn);
    color: #8F6D18
}

.btn-outline:hover:not(:disabled) {
    background: var(--warn);
    border: 1.5px solid var(--warn);
    color: #0D1B3E;
    opacity: 1
}

.btn-green {
    background: var(--green);
    color: #fff;
    border: 1px solid var(--green)
}

.btn-green:hover:not(:disabled) {
    background: var(--green);
    color: #fff;
    border: 1px solid var(--green);
    filter: brightness(1.06);
    opacity: 1
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px
}

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #fafcff 0%, #eef4fc 48%, #e4edf9 100%);
    color: var(--text);
    padding: 2.25rem 1.5rem 2rem;
    text-align: center;
    border-bottom: 1px solid rgba(230, 220, 196, .65)
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(201, 168, 76, .14), transparent 40%),
        radial-gradient(circle at 10% 78%, rgba(74, 111, 198, .12), transparent 36%);
    pointer-events: none
}

.hero::after {
    content: '';
    position: absolute;
    inset: auto -8% -45% -8%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .55), transparent 68%);
    pointer-events: none
}

.hero h1 {
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    font-weight: 700;
    margin-bottom: .65rem;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--text);
    text-shadow: none
}

.hero p {
    color: #4a5f8a;
    font-size: 14px;
    line-height: 1.55
}

.hero:not(.hero-split)>p {
    max-width: 500px;
    margin: 0 auto 1.25rem
}

.hero-split .hero-content>p,
.hero-fullbleed .hero-content>p {
    max-width: 100%;
    margin: 0 0 1.1rem;
    text-align: left
}

.hero-btns {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap
}

.hero-btns .btn {
    padding: 9px 20px;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(74, 111, 198, .14)
}

.hero-btns .btn-primary {
    box-shadow: 0 6px 16px rgba(26, 45, 90, .18), 0 1px 0 rgba(255, 255, 255, .2) inset
}

.sections {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem
}

.sec-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    cursor: pointer;
    transition: box-shadow .2s, transform .2s
}

.sec-card:hover {
    box-shadow: 0 10px 28px rgba(13, 27, 62, .12);
    transform: translateY(-1px)
}

.sec-card .icon {
    font-size: 24px;
    margin-bottom: .5rem
}

.sec-card h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem
}

.sec-card p {
    font-size: 12px;
    color: var(--muted)
}

.public-top-strip {
    background: linear-gradient(90deg, #fff9ee, #fef6e6 50%, #fdf3de);
    color: #7a6528;
    font-size: 13px;
    padding: .45rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    flex-wrap: nowrap;
    border-bottom: 1px solid #ead9b8;
    box-shadow: none
}

.public-top-strip-marquee {
    flex: 1;
    min-width: 0;
    overflow: hidden
}

.public-top-strip-marquee-text {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: public-top-strip-marquee 28s linear infinite
}

@keyframes public-top-strip-marquee {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}

.public-top-strip .btn {
    flex-shrink: 0;
    color: #6b5620;
    border-color: #c9a84c;
    background: rgba(255, 255, 255, .55)
}

.public-top-strip .btn:hover {
    background: #fff;
    color: #5a4718;
    border-color: #b8943f
}

.hero-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 1.25rem;
    align-items: center;
    text-align: left;
    position: relative;
    z-index: 1
}

.hero-fullbleed {
    --hero-min-h: calc((100svh - 5.5rem) * 0.56);
    position: relative;
    min-height: var(--hero-min-h);
    padding: 0;
    display: block;
    background: #dfe9f8;
    border-bottom: none;
    overflow: hidden
}

.hero-fullbleed::before,
.hero-fullbleed::after {
    display: none
}

.hero-slider--full {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: none;
    filter: none
}

.hero-fullbleed .hero-slider-viewport {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none
}

.hero-fullbleed .hero-slider-track {
    height: 100%
}

.hero-slide--full {
    height: 100%;
    min-height: var(--hero-min-h)
}

.hero-slide-media--full {
    width: 100%;
    height: 100%;
    min-height: var(--hero-min-h);
    aspect-ratio: unset;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    object-fit: cover;
    object-position: 78% center;
    border: none;
    border-radius: 0;
    margin: 0;
    background: #c8d8ef;
    filter: none
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent
}

.hero-inner {
    position: relative;
    z-index: 2;
    min-height: var(--hero-min-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1.5rem 4.5rem;
    box-sizing: border-box
}

.hero-fullbleed .hero-content {
    max-width: min(520px, 46%);
    padding: 1.35rem 1.5rem;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(13, 27, 62, .12)
}

.hero-inner--controls-only {
    justify-content: flex-end;
    align-items: center;
    padding: 0 1.5rem 4.5rem;
    pointer-events: none
}

.hero-inner--controls-only .hero-slider-controls {
    pointer-events: auto
}

.hero-fullbleed .hero-slider-controls {
    position: absolute;
    left: 50%;
    bottom: 1.35rem;
    transform: translateX(-50%);
    width: min(320px, calc(100% - 2rem));
    justify-content: center;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 8px 24px rgba(13, 27, 62, .1)
}

.hero-fullbleed .slider-btn {
    background: rgba(255, 255, 255, .95);
    border-color: rgba(74, 111, 198, .2)
}

.hero-fullbleed .hero-dot {
    background: rgba(74, 111, 198, .3)
}

.hero-fullbleed .hero-dot.active {
    background: var(--primary)
}

/* Society-style public landing */
.public-page--landing {
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Fraunces", "Times New Roman", Georgia, serif;
    --landing-navy: #0a2754;
    --landing-blue: #1a4f8c;
    --landing-accent: #c9a84c;
    --landing-soft: #eef4fb;
    font-family: var(--font-sans);
    overflow-x: clip;
    background:
        radial-gradient(ellipse 70% 45% at 8% 0%, rgba(74, 144, 226, .14), transparent 55%),
        radial-gradient(ellipse 50% 35% at 100% 12%, rgba(201, 168, 76, .1), transparent 55%),
        linear-gradient(180deg, #f4f8fd 0%, #fff 18%, #f6f9fd 100%)
}

.public-page--landing h1,
.public-page--landing h2,
.public-page--landing .hero-brand-mark,
.public-page--landing .home-trust-stat strong {
    font-family: var(--font-display)
}

.hero-landing {
    /* Fit one screen under top strip + navbar, compensating body zoom:1.2 */
    --hero-chrome: 7.65rem;
    --hero-min-h: calc((100dvh / 1.2) - var(--hero-chrome));
    --hero-min-h: calc((100vh / 1.2) - var(--hero-chrome));
    height: var(--hero-min-h);
    min-height: var(--hero-min-h);
    max-height: var(--hero-min-h);
    background: #c9daf0;
    isolation: isolate;
    overflow: hidden
}

.hero-landing.hero-fullbleed,
.hero-landing .hero-slide--full,
.hero-landing .hero-slide-media--full,
.hero-landing .hero-inner {
    min-height: 100%;
    height: 100%
}

.hero-overlay--landing {
    background:
        linear-gradient(105deg,
            rgba(248, 251, 255, .97) 0%,
            rgba(248, 251, 255, .9) 24%,
            rgba(248, 251, 255, .55) 42%,
            rgba(15, 45, 90, .18) 66%,
            rgba(10, 32, 68, .38) 100%),
        radial-gradient(ellipse 48% 70% at 88% 38%, rgba(47, 111, 191, .18), transparent 70%)
}

.hero-landing-glow {
    position: absolute;
    inset: auto -10% -22% 40%;
    height: 58%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .5), transparent 72%);
    filter: blur(10px)
}

.hero-landing .hero-slider--full {
    transform: none;
    filter: none
}

.hero-landing .hero-slider-track {
    transition: transform .75s cubic-bezier(.22, .8, .28, 1);
    height: 100%
}

.hero-landing .hero-bg-img {
    transform: scale(1.05);
    transition: transform 7s ease-out, filter .6s ease;
    filter: saturate(1.08) contrast(1.04) brightness(.96);
    object-position: 72% center
}

.hero-landing .hero-slide.is-active .hero-bg-img {
    transform: scale(1.12);
    animation: heroKenBurns 7.2s ease-out forwards
}

@keyframes heroKenBurns {
    from {
        transform: scale(1.05) translate3d(0, 0, 0)
    }

    to {
        transform: scale(1.14) translate3d(-1.2%, -0.6%, 0)
    }
}

.hero-inner--landing {
    justify-content: center;
    align-items: stretch;
    padding: 1.35rem 1.5rem 3.85rem;
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box
}

.hero-landing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
    z-index: 2
}

.hero-landing .hero-content {
    max-width: min(540px, 100%);
    text-align: left;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-height: 0
}

.hero-content--panel {
    padding: 1.15rem 1.25rem 1.15rem;
    border-radius: 20px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .7) 100%);
    border: 1px solid rgba(255, 255, 255, .78);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .92) inset,
        0 18px 40px rgba(13, 27, 62, .14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: heroContentIn .75s cubic-bezier(.22, .8, .28, 1) both
}

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .55rem;
    padding: .28rem .65rem .28rem .35rem;
    font-size: 11px;
    font-weight: 600;
    color: #1a4f8c;
    letter-spacing: .02em;
    background: rgba(232, 242, 252, .95);
    border: 1px solid rgba(47, 111, 191, .2);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(15, 61, 122, .06)
}

.hero-eyebrow__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2f6fbf, #1f5fa8);
    color: #fff
}

.hero-eyebrow__icon svg {
    width: 11px;
    height: 11px
}

.hero-brand-mark {
    margin: 0 0 .55rem;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--landing-navy, #0a2754);
    animation: heroContentIn .85s ease .08s both
}

.hero-landing h1 {
    margin: 0 0 .55rem;
    font-size: clamp(1.65rem, 3vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -.038em;
    font-weight: 700
}

.hero-title-dark {
    color: #0a2754;
    display: inline-block
}

.hero-title-accent {
    display: inline-block;
    margin-top: .1rem;
    background: linear-gradient(92deg, #184f96 0%, #2f78c9 45%, #c9a84c 120%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero-landing .hero-lead,
.hero-landing .hero-content>p:not(.hero-eyebrow):not(.hero-brand-mark) {
    max-width: 34rem;
    margin: 0 0 .95rem;
    color: #425878;
    font-size: 14px;
    line-height: 1.55
}

.hero-landing .hero-btns {
    gap: .6rem;
    flex-wrap: wrap
}

.hero-landing .hero-btns .btn {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 13px;
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease
}

.hero-btn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0
}

.hero-landing .hero-btns .btn-primary {
    box-shadow: 0 8px 18px rgba(26, 45, 90, .2)
}

.hero-landing .hero-btns .btn:hover:not(:disabled) {
    transform: translateY(-1px)
}

.btn-hero-loan {
    border-color: #2f6fbf !important;
    color: #1a4f8c !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 6px 14px rgba(47, 111, 191, .1) !important
}

.btn-hero-loan:hover:not(:disabled) {
    background: #2f6fbf !important;
    color: #fff !important;
    border-color: #2f6fbf !important
}

.hero-trust-row {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem
}

.hero-trust-row li {
    font-size: 10.5px;
    font-weight: 600;
    color: #1f4f8a;
    background: rgba(232, 242, 252, .9);
    border: 1px solid rgba(47, 111, 191, .16);
    border-radius: 999px;
    padding: .22rem .55rem
}

.hero-slide-caption {
    margin-top: .7rem;
    max-width: 100%;
    padding: .45rem .7rem .5rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 61, 122, .1);
    border-left: 3px solid #2f6fbf;
    box-shadow: 0 6px 16px rgba(15, 61, 122, .07);
    display: grid;
    gap: .05rem
}

.hero-slide-caption__kicker {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #2f6fbf
}

.hero-slide-caption strong {
    font-size: 12px;
    color: #0f3d7a;
    line-height: 1.25
}

.hero-slide-caption span[data-hero-caption-text] {
    font-size: 11px;
    color: #5a6d96;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.hero-fullbleed .hero-slider-controls--landing {
    width: min(400px, calc(100% - 2rem));
    gap: .65rem;
    padding: .45rem .7rem;
    bottom: .85rem;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 10px 24px rgba(13, 27, 62, .14);
    backdrop-filter: blur(12px)
}

.hero-slider-meta {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: .28rem;
    justify-items: center
}

.hero-slide-counter {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: #0f3d7a
}

.hero-slider-progress {
    display: block;
    width: min(170px, 100%);
    height: 3px;
    border-radius: 999px;
    background: rgba(47, 111, 191, .16);
    overflow: hidden
}

.hero-slider-progress>i {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f5fa8, #4a90e2);
    transform-origin: left center;
    animation: heroProgressLinear linear infinite;
    animation-duration: 5500ms
}

@keyframes heroProgressLinear {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

.hero-landing .slider-btn {
    width: 34px;
    height: 34px;
    border-color: rgba(47, 111, 191, .22);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease
}

.hero-landing .slider-btn:hover {
    transform: scale(1.06);
    background: #fff;
    box-shadow: 0 6px 14px rgba(47, 111, 191, .18)
}

.hero-landing .hero-dot {
    width: 7px;
    height: 7px;
    background: rgba(47, 111, 191, .28);
    transition: width .2s ease, background .2s ease, border-radius .2s ease
}

.hero-landing .hero-dot.active {
    width: 20px;
    border-radius: 999px;
    background: #0f3d7a
}

.home-loan-calc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .7rem;
    align-self: stretch;
    max-height: 100%;
    background:
        linear-gradient(160deg, #061c39 0%, #0c3366 40%, #134f8f 100%);
    color: #fff;
    border-radius: 18px;
    padding: 1rem 1.05rem 1.05rem;
    box-shadow:
        0 20px 44px rgba(8, 28, 58, .48),
        0 0 0 1px rgba(255, 255, 255, .12) inset;
    border: 1px solid rgba(255, 255, 255, .16);
    position: relative;
    overflow: hidden;
    animation: heroCalcIn .75s .08s ease both
}

.home-loan-calc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #c9a84c, #e8d18a 42%, rgba(74, 144, 226, .55));
    z-index: 2
}

.home-loan-calc::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -16%;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 160, 230, .32), transparent 70%);
    pointer-events: none
}

@keyframes heroCalcIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-landing .hero-slide.is-active .hero-bg-img,
    .hero-content--panel,
    .hero-brand-mark,
    .home-loan-calc,
    .hero-slider-progress>i {
        animation: none !important
    }

    .hero-landing .hero-bg-img,
    .home-service-item,
    .home-service-item__icon,
    .home-feature-card,
    .home-trust-stat,
    .home-why-list li,
    .home-why-media-frame img,
    .home-why-img {
        transition: none !important;
        transform: none !important
    }

    .hero-landing .hero-bg-img {
        transform: none;
        filter: none;
        transition: none
    }
}

.home-loan-calc__head {
    position: relative;
    z-index: 1;
    text-align: left;
    margin: 0
}

.home-loan-calc__head-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .2rem
}

.home-loan-calc__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: .18rem .45rem;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #0d1b3e;
    background: linear-gradient(135deg, #e8d18a, #c9a84c);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18)
}

.home-loan-calc__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.015em;
    text-align: left;
    position: relative;
    z-index: 1;
    line-height: 1.2
}

.home-loan-calc__hint {
    margin: 0;
    font-size: 10.5px;
    color: rgba(220, 232, 248, .72);
    line-height: 1.35
}

.home-loan-calc__fields {
    display: grid;
    gap: .45rem;
    position: relative;
    z-index: 1;
    flex: 1 1 auto
}

.home-loan-calc__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .4rem .5rem;
    border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: border-color .15s ease, background .15s ease
}

.home-loan-calc__row:focus-within {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(201, 168, 76, .45)
}

.home-loan-calc__row label {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.home-loan-calc__field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, .12);
    color: #e8d18a
}

.home-loan-calc__input-wrap {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 9px;
    padding: .35rem .5rem;
    min-width: 128px;
    justify-content: flex-end;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset
}

.home-loan-calc__input-wrap:focus-within {
    border-color: rgba(201, 168, 76, .7);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, .22)
}

.home-loan-calc__prefix,
.home-loan-calc__suffix {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap
}

.home-loan-calc input {
    width: 82px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    outline: none;
    padding: 0;
    -moz-appearance: textfield
}

.home-loan-calc input::-webkit-outer-spin-button,
.home-loan-calc input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.home-loan-calc__result {
    margin: 0;
    padding: .75rem .7rem .7rem;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
    position: relative;
    z-index: 1
}

.home-loan-calc__result-label {
    margin: 0 0 .1rem;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5a6d96;
    font-weight: 700
}

.home-loan-calc__emi {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #0f3d7a;
    line-height: 1.15
}

.home-loan-calc__emi::after {
    content: ' / month';
    font-size: .66em;
    font-weight: 600;
    color: #3d5490;
    opacity: .95
}

.home-loan-calc__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin: .55rem 0 0;
    padding-top: .55rem;
    border-top: 1px solid rgba(15, 61, 122, .1)
}

.home-loan-calc__meta-item {
    display: grid;
    gap: .1rem;
    text-align: center;
    font-size: 10.5px;
    color: #5a6d96
}

.home-loan-calc__meta-item strong {
    color: #0f3d7a;
    font-weight: 700;
    font-size: 12.5px
}

.home-loan-calc__cta {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, #fff 0%, #f4f7fc 100%);
    color: #0f3d7a;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    padding: .65rem 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
    position: relative;
    z-index: 1;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease
}

.home-loan-calc__cta:hover:not(:disabled) {
    background: #fff;
    color: #0a2f5c;
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, .22)
}

.home-features {
    margin-top: -.35rem;
    margin-bottom: .35rem;
    padding-top: 0;
    position: relative;
    z-index: 3;
    max-width: 1180px;
    width: 100%;
    gap: .85rem
}

.home-feature-card {
    transform: none;
    text-align: left;
    padding: 1.1rem 1.05rem 1.15rem;
    border-radius: 16px;
    border-color: rgba(15, 61, 122, .08);
    background: linear-gradient(165deg, #fff 0%, #f7fafd 100%)
}

.home-feature-card .stat-icon {
    margin: 0 0 .7rem;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(145deg, #e8f1fb, #dceaf8);
    color: #2f6fbf;
    box-shadow: 0 6px 14px rgba(47, 111, 191, .12)
}

.home-feature-card .stat-value {
    font-size: 1.02rem;
    color: #0f3d7a;
    letter-spacing: -.015em
}

.home-feature-card .stat-label {
    font-size: 12px;
    line-height: 1.45;
    color: #627693
}

.home-feature-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 18px 34px rgba(13, 27, 62, .12)
}

.home-section-kicker {
    margin: 0 0 .35rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2f6fbf
}

.home-section-lead {
    margin: 0 auto .75rem;
    max-width: 36rem;
    font-size: 13.5px;
    line-height: 1.55;
    color: #647892
}

.home-section-lead--left {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem
}

.home-services {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(238, 244, 251, .7) 100%);
    border-block: 1px solid rgba(15, 61, 122, .06)
}

.home-services .section-head,
.home-trust .section-head {
    text-align: center;
    margin-bottom: 1.5rem
}

.home-services .section-head h2,
.home-trust .section-head h2 {
    margin-bottom: .35rem;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    color: #0a2754;
    letter-spacing: -.025em
}

.home-services .about-intro-accent,
.home-trust .about-intro-accent {
    margin: .15rem auto 0
}

.home-services-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto
}

.home-service-item {
    text-align: center;
    padding: 1rem .7rem 1.05rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(15, 61, 122, .08);
    box-shadow: 0 8px 20px rgba(13, 27, 62, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.home-service-item:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 111, 191, .22);
    box-shadow: 0 14px 28px rgba(13, 27, 62, .1)
}

.home-service-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto .75rem;
    border-radius: 16px;
    background: linear-gradient(145deg, #eaf2fb, #dce9f7);
    color: #2f6fbf;
    transition: transform .2s ease, background .2s ease, color .2s ease
}

.home-service-item:hover .home-service-item__icon {
    transform: scale(1.06);
    background: linear-gradient(145deg, #2f6fbf, #1f5fa8);
    color: #fff
}

.home-service-item__icon svg {
    width: 24px;
    height: 24px
}

.home-service-item h3 {
    margin: 0 0 .3rem;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f3d7a
}

.home-service-item p {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4
}

.home-why {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem
}

.home-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 2rem 2.25rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto
}

.home-why-copy h2 {
    margin: 0 0 .55rem;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    color: #0a2754;
    letter-spacing: -.025em
}

.home-why-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem
}

.home-why-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 14.5px;
    font-weight: 600;
    color: #243a63;
    padding: .55rem .7rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(15, 61, 122, .06);
    transition: transform .18s ease, box-shadow .18s ease
}

.home-why-list li:hover {
    transform: translateX(3px);
    box-shadow: 0 8px 18px rgba(13, 27, 62, .07)
}

.home-why__check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2f6fbf, #1f5fa8);
    color: #fff;
    box-shadow: 0 4px 10px rgba(47, 111, 191, .25)
}

.home-why__check svg {
    width: 13px;
    height: 13px
}

.home-why-media-frame {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(13, 27, 62, .16);
    border: 1px solid rgba(15, 61, 122, .08);
    min-height: 280px;
    background: #d9e6f5;
    position: relative
}

.home-why-media-frame::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 35%;
    background: linear-gradient(180deg, transparent, rgba(10, 39, 84, .28));
    pointer-events: none
}

.home-why-media .img-shimmer {
    display: block;
    width: 100%;
    min-height: 280px;
    border-radius: 20px;
    overflow: hidden
}

.home-why-media-frame img,
.home-why-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease
}

.home-why-media:hover .home-why-img,
.home-why-media:hover .home-why-media-frame img {
    transform: scale(1.04)
}

.home-why-media-frame--empty {
    min-height: 300px;
    background: linear-gradient(135deg, #d7e6f7, #eef4fb)
}

.home-contact-cta-wrap {
    padding: .75rem 1.5rem 1.5rem;
    max-width: 1180px;
    margin: 0 auto
}

.home-contact-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    background:
        radial-gradient(ellipse 40% 80% at 0% 50%, rgba(201, 168, 76, .18), transparent 55%),
        linear-gradient(115deg, #0b2a52 0%, #123f78 55%, #0f3d7a 100%);
    color: #fff;
    border-radius: 18px;
    padding: 1.25rem 1.45rem;
    box-shadow: 0 16px 36px rgba(11, 42, 82, .24);
    border: 1px solid rgba(255, 255, 255, .1)
}

.home-contact-cta__lead {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: min(100%, 280px);
    flex: 1 1 260px
}

.home-contact-cta__phone-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff;
    color: #0f3d7a;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12)
}

.home-contact-cta__phone-icon svg {
    width: 20px;
    height: 20px
}

.home-contact-cta__lead strong {
    display: block;
    font-size: 16px;
    margin-bottom: .2rem;
    letter-spacing: -.015em
}

.home-contact-cta__lead p {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .78);
    line-height: 1.4
}

.home-contact-cta__details {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .85rem;
    align-items: center
}

.home-contact-cta__detail {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: background .15s ease, border-color .15s ease
}

.home-contact-cta__detail:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .28)
}

.home-contact-cta__detail-ico {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: .9
}

.home-contact-cta__detail-ico svg {
    width: 100%;
    height: 100%
}

.home-contact-cta__btn {
    background: linear-gradient(135deg, #c9a84c, #b8943a);
    color: #0d1b3e;
    border: none;
    font-weight: 700;
    padding: .7rem 1.3rem;
    border-radius: 11px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
    transition: transform .15s ease, filter .15s ease
}

.home-contact-cta__btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #d4b45a, #c9a84c);
    color: #0a2f5c;
    filter: brightness(1.03);
    transform: translateY(-1px)
}

.home-trust {
    padding: 1.75rem 1.5rem 2.35rem;
    max-width: 1100px;
    margin: 0 auto
}

.home-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem
}

.home-trust-stat {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1rem;
    background: linear-gradient(165deg, #fff 0%, #f6f9fd 100%);
    border: 1px solid rgba(15, 61, 122, .08);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(13, 27, 62, .06);
    transition: transform .18s ease, box-shadow .18s ease
}

.home-trust-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(13, 27, 62, .1)
}

.home-trust-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(145deg, #eaf2fb, #dce9f7);
    color: #2f6fbf;
    flex-shrink: 0
}

.home-trust-stat__icon .stat-icon-svg {
    width: 20px;
    height: 20px
}

.home-trust-stat strong {
    display: block;
    font-size: 1.2rem;
    color: #0a2754;
    line-height: 1.15;
    letter-spacing: -.02em
}

.home-trust-stat span {
    font-size: 12px;
    color: var(--muted)
}

/* Large desktop landing refinements */
@media (min-width: 1200px) {
    .public-page--landing .navbar {
        padding: 0 2rem
    }

    .hero-inner--landing {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .hero-landing .hero-content {
        max-width: 560px
    }

    .home-features.public-stats,
    .home-contact-cta-wrap,
    .home-trust {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

/* Narrow tablet / large phone landscape */
@media (max-width: 900px) and (min-width: 641px) {
    .public-page--landing .public-top-strip {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .hero-inner--landing {
        min-height: min(62svh, 560px)
    }

    .home-contact-cta__details {
        width: 100%
    }
}

/* Safe areas + very small phones */
@media (max-width: 640px) {
    .public-page--landing .public-top-strip,
    .public-page--landing .navbar {
        padding-left: max(.85rem, env(safe-area-inset-left));
        padding-right: max(.85rem, env(safe-area-inset-right))
    }

    .public-page--landing .navbar {
        min-height: 58px;
        height: auto;
        padding-top: .45rem;
        padding-bottom: .45rem
    }

    .public-page--landing .nav-logo .brand-logo {
        height: 52px;
        max-width: min(200px, 58vw)
    }

    .public-page--landing .public-top-strip {
        font-size: 12px;
        padding-top: .4rem;
        padding-bottom: .4rem;
        gap: .45rem
    }

    .public-page--landing .public-top-strip .btn {
        font-size: 10px;
        padding: 4px 8px;
        white-space: nowrap
    }
}

@media (max-width: 380px) {
    .hero-landing .hero-btns .btn {
        min-width: 100%;
        flex: 1 1 100%
    }

    .home-features.public-stats,
    .home-trust-grid {
        grid-template-columns: 1fr
    }

    .home-service-item:last-child {
        max-width: none
    }
}

.hero-content {
    max-width: 620px
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: #3d5490;
    border: 1px solid rgba(74, 111, 198, .22);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: .65rem;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 4px 12px rgba(74, 111, 198, .08), inset 0 1px 0 rgba(255, 255, 255, .9)
}

.btn-hero-alt {
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: rgba(255, 255, 255, .75)
}

.btn-hero-alt:hover {
    background: #fff;
    color: #152347;
    border-color: #152347
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem
}

.hero-tags span {
    font-size: 10px;
    color: #4a5f96;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(74, 111, 198, .16);
    border-radius: 999px;
    padding: 3px 9px;
    box-shadow: 0 2px 6px rgba(74, 111, 198, .06)
}

.hero-visual {
    display: grid;
    gap: .55rem;
    perspective: 900px
}

.hero-slider {
    display: grid;
    gap: .5rem;
    transform: rotateY(-4deg) rotateX(2deg);
    transform-style: preserve-3d;
    filter: drop-shadow(0 14px 28px rgba(74, 111, 198, .16))
}

.hero-slider-viewport {
    overflow: hidden;
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(74, 111, 198, .12);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 12px 28px rgba(74, 111, 198, .14)
}

.hero-slider-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform .55s cubic-bezier(.25, .46, .45, .94);
    will-change: transform
}

.hero-slide {
    flex: 0 0 auto;
    box-sizing: border-box
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider-track {
        transition: none
    }

    .hero-slider:not(.hero-slider--full),
    .menu-card,
    .product-card,
    .notice-card,
    .stat-card,
    .milestone-step:hover .milestone-content {
        transform: none;
        transition: none
    }
}

.hero-slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem
}

.slider-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(74, 111, 198, .22);
    background: rgba(255, 255, 255, .88);
    color: var(--primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(74, 111, 198, .1)
}

.hero-slider-dots {
    display: flex;
    align-items: center;
    gap: .4rem
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: rgba(74, 111, 198, .28);
    cursor: pointer
}

.hero-dot.active {
    background: var(--primary);
    width: 22px
}

.placeholder-image {
    width: 100%;
    height: 250px;
    display: block;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .45);
    margin-bottom: .65rem;
    background: #eaf0fb
}

.img-shimmer.hero-slide-media,
.img-shimmer.card-media {
    display: block;
    width: 100%;
    overflow: hidden
}

.hero-slide-media {
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    margin-bottom: .55rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18)
}

.hero-slide-img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border: none;
    border-radius: 0;
    margin: 0;
    background: #1a2d5a
}

.card-media {
    aspect-ratio: 16 / 10;
    max-height: 148px;
    border-radius: 10px;
    margin-bottom: .6rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 8px 18px rgba(13, 27, 62, .1)
}

.card-media-img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    border: none;
    border-radius: 0;
    margin: 0;
    background: #e8eef8
}

.img-shimmer {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 10px
}

.img-shimmer.img-shimmer--faq {
    border-radius: 14px
}

.img-shimmer.img-shimmer--inline {
    display: inline-block;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
    line-height: 0;
    border-radius: 8px
}

.img-shimmer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: #e4e9f2;
    pointer-events: none
}

.img-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, .45) 55%, transparent 100%);
    transform: translateX(-100%);
    animation: img-shimmer-sweep 1.25s ease-in-out infinite;
    pointer-events: none
}

.img-shimmer.is-loaded::before,
.img-shimmer.is-loaded::after {
    opacity: 0;
    transition: opacity .35s ease;
    animation: none
}

.img-shimmer img {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity .4s ease
}

.img-shimmer.is-loaded img {
    opacity: 1
}

@keyframes img-shimmer-sweep {
    100% {
        transform: translateX(100%)
    }
}

@media (prefers-reduced-motion: reduce) {
    .img-shimmer::after {
        animation: none;
        transform: none;
        opacity: 0
    }
}

.public-photo {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #eef3fb
}

.hero-photo {
    min-height: 310px;
    max-height: 360px
}

.visual-card {
    border-radius: 14px;
    padding: .85rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, .96) 0%, rgba(248, 251, 255, .92) 100%);
    border: 1px solid rgba(74, 111, 198, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 10px 24px rgba(74, 111, 198, .12)
}

.visual-card h4 {
    font-size: 14px;
    margin-bottom: .25rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text)
}

.visual-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #5a6d96
}

.visual-1 {
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(237, 244, 255, .94))
}

.visual-2 {
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(236, 248, 243, .94))
}

.visual-3 {
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 247, 236, .94))
}

.public-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    padding: .75rem 1.5rem;
    margin: 1.25rem auto;
    position: relative;
    z-index: 2;
    max-width: 1180px;
    width: 100%;
    box-sizing: border-box
}

.stat-card {
    background: linear-gradient(165deg, #fff 0%, #f4f7fd 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem .85rem .8rem;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 10px 22px rgba(13, 27, 62, .09);
    transform: translateY(-6px);
    transition: transform .2s ease, box-shadow .2s ease
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto .45rem;
    border-radius: 10px;
    background: linear-gradient(145deg, #eef3fc, #e2ebf9);
    color: #4a6fc6;
    box-shadow: 0 4px 10px rgba(74, 111, 198, .12), inset 0 1px 0 rgba(255, 255, 255, .85)
}

.stat-icon-svg {
    width: 21px;
    height: 21px;
    display: block
}

.stat-card:hover {
    transform: translateY(-9px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 14px 28px rgba(13, 27, 62, .13)
}

.stat-value {
    display: block;
    font-size: .98rem;
    font-weight: 700;
    color: #3d5490;
    line-height: 1.25;
    letter-spacing: -.01em
}

.stat-label {
    display: block;
    margin-top: .2rem;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.4
}

.public-section {
    padding: 2.35rem 1.5rem;
    scroll-margin-top: 5.75rem
}

.section-alt {
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 24px rgba(13, 27, 62, .04)
}

.section-head {
    margin-bottom: 1.15rem
}

.section-head h2 {
    font-size: 1.35rem;
    margin-bottom: .2rem;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -.02em
}

.section-head--wide {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto
}

.section-head-lead {
    font-size: 13px;
    color: #64748f;
    line-height: 1.5;
    margin-bottom: .35rem;
    text-align: justify
}

.section-head-detail {
    font-size: 12px;
    color: #7080a6;
    line-height: 1.55;
    text-align: justify
}

.section-head p {
    font-size: 13px;
    color: #64748f;
    line-height: 1.45;
    max-width: 52ch
}

.section-head--center {
    text-align: center
}

.section-head--center h2 {
    text-align: center
}

.section-head--center .section-head-lead,
.section-head--center .section-head-detail {
    text-align: justify
}

.section-head--center p {
    margin-left: auto;
    margin-right: auto;
    max-width: 62ch
}

.section-head--center p.section-head-lead,
.section-head--center p.section-head-detail {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: justify
}

.about-intro {
    position: relative;
    max-width: 52rem;
    margin: 0 auto 1.65rem;
    text-align: center
}

.about-intro-glow {
    position: absolute;
    inset: 12% 8% auto;
    height: 62%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(74, 111, 198, .14) 0%, transparent 72%);
    pointer-events: none;
    z-index: 0
}

.about-intro-inner {
    position: relative;
    z-index: 1;
    padding: 1.35rem 1.5rem 1.25rem;
    border-radius: 18px;
    border: 1px solid rgba(74, 111, 198, .14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 251, 255, .94) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .92) inset,
        0 14px 36px rgba(13, 27, 62, .08)
}

.about-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #4a6fc6;
    border: 1px solid rgba(74, 111, 198, .2);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: .75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(238, 245, 255, .88));
    box-shadow: 0 4px 12px rgba(74, 111, 198, .08), inset 0 1px 0 rgba(255, 255, 255, .9)
}

.about-intro-title {
    font-size: clamp(1.45rem, 2.8vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: .55rem
}

.about-intro-accent {
    display: flex;
    justify-content: center;
    margin-bottom: .85rem
}

.about-intro-accent span {
    display: block;
    width: 3.25rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #6b8fd4 18%, #c9a84c 50%, #6b8fd4 82%, transparent)
}

.about-intro-lead {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text2);
    max-width: 46rem;
    margin: 0 auto .65rem;
    font-weight: 500
}

.about-intro-detail {
    font-size: 13px;
    line-height: 1.7;
    color: #5a6d96;
    max-width: 44rem;
    margin: 0 auto 1rem
}

.about-intro-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0
}

.about-intro-pills li {
    font-size: 11px;
    font-weight: 600;
    color: #3d5490;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(74, 111, 198, .16);
    border-radius: 999px;
    padding: 5px 11px;
    box-shadow: 0 2px 8px rgba(74, 111, 198, .07), inset 0 1px 0 rgba(255, 255, 255, .9)
}

.about-page {
    background: var(--bg);
    min-height: 100vh
}

.about-page-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap
}

.about-page-header-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-right: auto;
    line-height: 0;
    flex-shrink: 0;
    max-width: min(200px, 42vw)
}

.about-brand-logo,
.about-page-header-brand .brand-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain
}

.about-page-body {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 2.5rem
}

.about-page .about-intro {
    margin-bottom: 0;
    text-align: center
}

.about-page .about-intro-lead,
.about-page .about-intro-detail {
    text-align: justify;
    max-width: none;
    margin-left: 0;
    margin-right: 0
}

.contact-page {
    background: var(--bg);
    min-height: 100vh
}

.contact-page-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap
}

.contact-page-header-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-right: auto;
    line-height: 0;
    flex-shrink: 0;
    max-width: min(200px, 42vw)
}

.contact-brand-logo,
.contact-page-header-brand .brand-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain
}

.contact-page-body {
    max-width: 520px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 2.5rem
}

.contact-page-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.35rem 1.5rem 1.4rem;
    box-shadow: 0 10px 28px rgba(13, 27, 62, .06)
}

.contact-page-head {
    text-align: center;
    margin-bottom: 1rem
}

.contact-page-head__icon {
    font-size: 1.65rem;
    line-height: 1;
    margin-bottom: .35rem
}

.contact-page-head h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text)
}

.contact-page-head p {
    margin: .35rem 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45
}

.contact-page-card .form-group {
    margin-bottom: .85rem
}

.contact-page-card .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: .3rem;
    color: var(--text2)
}

.contact-page-submit {
    width: 100%;
    margin-top: .35rem
}

.contact-page-foot {
    margin: .9rem 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45
}

.contact-page-foot p,
.modal-contact-foot p {
    margin: 0 0 .25rem
}

.contact-page-foot p:last-child,
.modal-contact-foot p:last-child {
    margin-bottom: 0
}

@media (max-width:720px) {
    .about-page-header,
    .contact-page-header {
        padding: .85rem 1rem;
        gap: .65rem
    }

    .about-page-body,
    .contact-page-body {
        padding: 1.25rem 1rem 2rem
    }

    .contact-page-card {
        padding: 1.15rem 1.1rem 1.2rem
    }
}

.menu-grid,
.product-grid,
.notice-grid {
    display: grid;
    gap: .75rem
}

.menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.menu-card {
    background: linear-gradient(180deg, #fff 0%, #fafcff 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .75rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .85) inset,
        0 8px 22px rgba(42, 63, 109, .08);
    transition: transform .22s ease, box-shadow .22s ease;
    cursor: default
}

.menu-card[onclick],
.menu-card:has([onclick]) {
    cursor: pointer
}

.menu-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 14px 30px rgba(42, 63, 109, .13)
}

.menu-card h3 {
    margin: 0 0 .25rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3
}

.menu-card-body {
    padding-top: .15rem
}

.menu-card p {
    margin: 0 0 .5rem;
    color: #64748f;
    font-size: 12px;
    line-height: 1.5
}

.menu-card-points {
    margin: 0;
    padding-left: 1.1rem;
    color: #5a6d96;
    font-size: 11px;
    line-height: 1.5
}

.menu-card-points li {
    margin-bottom: .25rem
}

.menu-card-points li:last-child {
    margin-bottom: 0
}

.menu-card .card-media--natural {
    aspect-ratio: unset;
    max-height: none;
    height: auto;
    margin-bottom: .65rem;
    box-shadow: 0 6px 16px rgba(74, 111, 198, .1)
}

.menu-card .card-media-img--natural,
.menu-card .card-media--natural img {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #f0f4fb
}

.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.product-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fff 0%, #f8faff 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .75rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .85) inset,
        0 8px 22px rgba(42, 63, 109, .08);
    transition: transform .22s ease, box-shadow .22s ease
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 14px 30px rgba(42, 63, 109, .13)
}

.product-card h3 {
    margin: 0 0 .25rem;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3
}

.product-card p {
    flex: 1 1 auto;
    margin-bottom: .6rem;
    color: #64748f;
    font-size: 12px;
    line-height: 1.45
}

.product-card .btn {
    align-self: flex-start
}

.chip-list {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap
}

.chip-list span {
    background: #f2f6ff;
    border: 1px solid #d9e5ff;
    border-radius: 999px;
    color: #415e96;
    font-size: 12px;
    padding: .35rem .7rem
}


.notice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.notice-card {
    background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
    border: 1px solid var(--border);
    border-left: 4px solid #6b8fd4;
    border-radius: 12px;
    padding: .75rem .85rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .8) inset,
        0 6px 18px rgba(42, 63, 109, .07);
    transition: transform .2s ease, box-shadow .2s ease
}

.notice-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .85) inset,
        0 10px 24px rgba(42, 63, 109, .11)
}

.notice-card h4 {
    font-size: 14px;
    margin-bottom: .25rem;
    font-weight: 600
}

.notice-card p {
    font-size: 12px;
    color: #64748f;
    margin-bottom: .35rem;
    line-height: 1.45
}

.notice-card span {
    font-size: 11px;
    color: #3d5490;
    font-weight: 600
}

.milestone-track {
    position: relative;
    display: block;
    max-width: 1120px;
    margin: 0 auto;
    padding: .25rem 0 0
}

.milestone-track::before {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(100% / 8);
    width: calc(100% * 3 / 4);
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), rgba(74, 111, 198, .42));
    z-index: 0;
    pointer-events: none
}

.milestone-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1rem;
    align-items: stretch;
    position: relative;
    z-index: 1
}

.milestone-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    height: 100%;
    align-self: stretch
}

.milestone-node {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #5a7ec8, #7a9be0);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(74, 111, 198, .22);
    border: 3px solid var(--white);
    box-sizing: border-box
}

.milestone-num {
    line-height: 1
}

.milestone-content {
    margin-top: .75rem;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: .75rem .85rem;
    background: linear-gradient(180deg, #fff 0%, #f8faff 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .85) inset,
        0 8px 22px rgba(42, 63, 109, .08);
    min-height: 0;
    transition: transform .2s ease, box-shadow .2s ease
}

.milestone-step:hover .milestone-content {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 12px 26px rgba(42, 63, 109, .12)
}

.milestone-content h3 {
    font-size: 15px;
    margin: 0 0 .4rem;
    color: var(--text)
}

.milestone-content p {
    font-size: 12px;
    line-height: 1.45;
    color: #7080a6;
    margin: 0
}

.about-split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 1rem;
    align-items: stretch
}

.about-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(180deg, #fff 0%, #f8faff 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 8px 22px rgba(42, 63, 109, .07)
}

.about-panel h3 {
    font-size: 1.05rem;
    margin-bottom: .5rem;
    color: var(--text)
}

.about-panel-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin: .65rem 0 .35rem
}

.about-panel p {
    font-size: 12px;
    line-height: 1.55;
    color: #5a6d96;
    margin-bottom: .55rem
}

.about-panel p:last-child {
    margin-bottom: 0
}

.about-panel-list {
    margin: 0 0 .55rem;
    padding-left: 1.15rem;
    font-size: 11px;
    line-height: 1.5;
    color: #5a6d96
}

.about-panel-list li {
    margin-bottom: .3rem
}

.about-panel-list li:last-child {
    margin-bottom: 0
}

.about-features-col {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    height: 100%
}

.about-features-head {
    background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .7rem .85rem;
    box-shadow: 0 4px 14px rgba(42, 63, 109, .05)
}

.about-features-head h3 {
    font-size: .95rem;
    margin-bottom: .25rem;
    color: var(--text)
}

.about-features-head p {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: #5a6d96
}

.about-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    flex: 1 1 auto;
    align-content: start
}

.about-feature {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .55rem .65rem;
    box-shadow: 0 4px 12px rgba(42, 63, 109, .05);
    min-height: 0
}

.about-feature-icon {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .05rem
}

.about-feature h4 {
    font-size: 12px;
    margin-bottom: .15rem;
    color: var(--text);
    font-weight: 600
}

.about-feature p {
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
    color: #64748f
}

.about-feature-detail {
    margin-top: .2rem !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    color: #7080a6 !important
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem
}

.why-card {
    background: linear-gradient(180deg, #fff 0%, #f8faff 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .9rem;
    text-align: center;
    box-shadow: 0 8px 22px rgba(42, 63, 109, .07);
    transition: transform .2s ease, box-shadow .2s ease
}

.why-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(42, 63, 109, .11)
}

.why-icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .45rem
}

.why-card h3 {
    font-size: 14px;
    margin-bottom: .35rem;
    color: var(--text)
}

.why-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #64748f
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem
}

.benefit-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid #6b8fd4;
    border-radius: 12px;
    padding: .85rem .9rem;
    box-shadow: 0 6px 18px rgba(42, 63, 109, .06);
    transition: transform .2s ease
}

.benefit-card:hover {
    transform: translateY(-2px)
}

.benefit-card h3 {
    font-size: 14px;
    margin-bottom: .3rem;
    color: var(--text)
}

.benefit-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #64748f
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem
}

.resource-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fff 0%, #f8faff 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .9rem;
    box-shadow: 0 8px 22px rgba(42, 63, 109, .07)
}

.resource-icon {
    font-size: 1.4rem;
    margin-bottom: .4rem
}

.resource-card h3 {
    font-size: 14px;
    margin-bottom: .35rem
}

.resource-card p {
    flex: 1 1 auto;
    margin: 0 0 .65rem;
    font-size: 12px;
    line-height: 1.5;
    color: #64748f
}

.public-section--safety {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

.safety-shell {
    background: linear-gradient(145deg, #fffbf5 0%, #fff6ea 45%, #fef3e2 100%);
    border: 1px solid #e8d4a8;
    border-radius: 18px;
    padding: 1.35rem 1.25rem 1.25rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 14px 36px rgba(122, 101, 40, .1)
}

.safety-eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8f6d18;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #e8d4a8;
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: .45rem
}

.safety-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    background: linear-gradient(90deg, #fff3d6, #fff9ee);
    border: 1px solid #e8c878;
    border-left: 4px solid #c9a84c;
    border-radius: 12px;
    padding: .75rem .9rem;
    margin-bottom: 1rem
}

.safety-alert-icon {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0
}

.safety-alert p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b5620
}

.safety-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem
}

.safety-card {
    position: relative;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #ead9b8;
    border-radius: 14px;
    padding: 1rem .9rem .9rem;
    box-shadow: 0 8px 22px rgba(122, 101, 40, .08);
    transition: transform .2s ease, box-shadow .2s ease
}

.safety-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(122, 101, 40, .12)
}

.safety-card-badge {
    position: absolute;
    top: .65rem;
    right: .65rem;
    font-size: 10px;
    font-weight: 700;
    color: #b8943f;
    background: #fff8e8;
    border: 1px solid #ead9b8;
    border-radius: 999px;
    padding: 2px 7px;
    line-height: 1.2
}

.safety-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
    background: linear-gradient(145deg, #fff8e8, #fef0d4);
    border: 1px solid #ead9b8;
    border-radius: 10px;
    margin-bottom: .55rem;
    box-shadow: 0 4px 10px rgba(122, 101, 40, .08)
}

.safety-card h4 {
    font-size: 13px;
    margin-bottom: .35rem;
    color: #5a4718;
    padding-right: 1.75rem
}

.safety-card p {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: #7a6528
}

.safety-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed #e8d4a8
}

.milestone-track--enhanced {
    max-width: 1180px;
    padding: .5rem 0
}

.milestone-steps--enhanced {
    gap: .85rem 1rem
}

.milestone-step--enhanced {
    text-align: left
}

.milestone-step--enhanced .milestone-node {
    width: 52px;
    height: 52px;
    flex-direction: column;
    gap: 0;
    font-size: 10px;
    padding-top: 2px
}

.milestone-icon {
    font-size: 14px;
    line-height: 1
}

.milestone-step--enhanced .milestone-num {
    font-size: 9px;
    opacity: .92;
    margin-top: 1px
}

.milestone-step--enhanced .milestone-content {
    text-align: left;
    align-items: stretch;
    padding: .85rem .9rem
}

.milestone-subtitle {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b8fd4;
    margin-bottom: .25rem
}

.milestone-step--enhanced .milestone-content h3 {
    font-size: 14px;
    margin-bottom: .35rem
}

.milestone-step--enhanced .milestone-content p {
    margin-bottom: .5rem
}

.milestone-points {
    margin: 0;
    padding-left: 1rem;
    font-size: 11px;
    line-height: 1.45;
    color: #64748f
}

.milestone-points li {
    margin-bottom: .2rem
}

.milestone-points li:last-child {
    margin-bottom: 0
}

@media (prefers-reduced-motion: reduce) {
    .milestone-node {
        box-shadow: 0 2px 8px rgba(44, 95, 197, .2)
    }
}

.faq-layout {
    display: grid;
    gap: 0;
    align-items: stretch;
    width: 100%
}

#faq .faq-layout {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem
}

#faq .faq-accordion {
    padding: 0;
    box-sizing: border-box;
    min-width: 0
}

#faq .faq-aside {
    position: relative;
    min-width: 0;
    min-height: 0
}

#faq .faq-aside-cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-alt, #f0f4fb)
}

#faq .faq-aside-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border: none;
    border-radius: 0
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0
}

@media (max-width: 900px) {
    #faq .faq-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem
    }

    #faq .faq-aside {
        position: static;
        min-height: 0
    }

    #faq .faq-aside-cover {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 16 / 9
    }

    #faq .faq-aside-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    overflow: hidden
}

.faq-item summary {
    cursor: pointer;
    padding: .85rem 1rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    user-select: none
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary::marker {
    content: ''
}

.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--muted);
    font-weight: 400
}

.faq-item[open] summary::after {
    content: '\2212';
    font-size: 16px
}

.faq-item summary:focus {
    outline: none
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-radius: 4px
}

.faq-item[open] .faq-panel {
    border-top: 1px solid var(--border)
}

.faq-panel {
    padding: .75rem 1rem 1rem
}

.faq-panel p {
    margin: .65rem 0 0;
    font-size: 13px;
    color: #7080a6;
    line-height: 1.55
}

.faq-panel p:first-child {
    margin-top: 0
}

#support.public-section {
    padding-top: 1.175rem
}

.cta-banner {
    background: linear-gradient(145deg, #f3f7ff 0%, #e8f0fc 55%, #dfe9f8 100%);
    border-radius: 14px;
    color: var(--text);
    padding: 1rem 1.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 10px 24px rgba(74, 111, 198, .12);
    border: 1px solid rgba(74, 111, 198, .14)
}

.cta-banner h3 {
    font-size: 1.15rem;
    margin-bottom: .15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text)
}

.cta-banner p {
    font-size: 12px;
    color: #5a6d96;
    line-height: 1.45
}

.cta-actions {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap
}

.cta-banner .btn-primary {
    border: 1px solid #223767;
    color: #fff
}

.cta-banner .btn-primary:hover {
    opacity: .92;
    background: linear-gradient(135deg, #1A2D5A 0%, #253D72 100%);
    border-color: #223767;
    color: #fff
}

.cta-banner .btn-outline {
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: rgba(255, 255, 255, .75)
}

.cta-banner .btn-outline:hover {
    background: #fff;
    border-color: #152347;
    color: #152347
}

.public-footer {
    background: linear-gradient(180deg, #f5f8ff 0%, #eaf0fb 100%);
    color: var(--text2);
    display: grid;
    grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)) minmax(14rem, 1.25fr);
    gap: 1.25rem 1.35rem;
    padding: 1.5rem 1.5rem 1.65rem;
    align-items: start;
    border-top: 1px solid var(--border);
    box-shadow: none
}

.public-footer .footer-links-row {
    display: contents
}

.modal-overlay .modal.modal--reckoner {
    width: min(720px, 96vw);
    max-width: 96vw;
    max-height: min(92vh, 860px);
    display: flex;
    flex-direction: column
}

.reckoner-page {
    background: var(--bg);
    min-height: 100vh
}

.reckoner-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap
}

.reckoner-header-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-right: auto;
    line-height: 0;
    flex-shrink: 0;
    max-width: min(200px, 42vw)
}

.reckoner-brand-logo,
.reckoner-header-brand .brand-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain
}

.reckoner-body {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start
}

.reckoner-nav {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    position: sticky;
    top: 1rem
}

.reckoner-nav h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 .75rem
}

.reckoner-nav__sub {
    margin-top: 1rem !important
}

.reckoner-nav a {
    display: block;
    font-size: 13px;
    color: var(--text2);
    padding: .45rem .5rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 2px
}

.reckoner-nav a:hover {
    background: var(--bg);
    color: var(--primary)
}

.reckoner-nav a.active {
    background: rgba(42, 79, 138, .1);
    color: var(--primary);
    font-weight: 600
}

.reckoner-main {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.35rem 1.5rem
}

.reckoner-main>h1 {
    margin: 0 0 .35rem;
    font-size: 1.55rem;
    color: var(--primary)
}

.reckoner-lead {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 1rem
}

.reckoner-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 .85rem;
    padding: .35rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg)
}

.reckoner-section-tab {
    flex: 1 1 140px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    border-radius: 9px;
    padding: .55rem .75rem;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit
}

.reckoner-section-tab:hover {
    color: var(--primary);
    background: rgba(26, 45, 90, .04)
}

.reckoner-section-tab--active {
    color: var(--primary);
    background: #fff;
    border-color: rgba(42, 79, 138, .28);
    box-shadow: 0 0 0 2px rgba(42, 79, 138, .08)
}

.reckoner-panel[hidden] {
    display: none !important
}

.reckoner-panel__title {
    margin: 0 0 .85rem;
    font-size: 1.05rem;
    color: var(--primary)
}

.reckoner-calc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem 1rem
}

.reckoner-result {
    background: var(--bg);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    margin-top: .85rem
}

.reckoner-result__label {
    font-size: 12px;
    color: var(--muted);
    margin: 0
}

.reckoner-result__emi {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    margin: .25rem 0 0
}

.reckoner-result__meta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .75rem;
    font-size: 12px
}

.reckoner-manual-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 .75rem
}

.reckoner-manual-tab {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 9px;
    padding: .4rem .7rem;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2
}

.reckoner-manual-tab:hover {
    border-color: rgba(42, 79, 138, .35);
    color: var(--primary)
}

.reckoner-manual-tab--active {
    border-color: rgba(42, 79, 138, .45);
    background: linear-gradient(135deg, rgba(42, 79, 138, .12), rgba(26, 45, 90, .06));
    color: var(--primary);
    box-shadow: 0 0 0 2px rgba(42, 79, 138, .1)
}

.reckoner-manual-content {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    padding: 1rem 1.1rem;
    max-height: none;
    overflow: visible
}

.reckoner-manual__title {
    margin: 0 0 .55rem;
    font-size: 15px;
    color: var(--primary)
}

.reckoner-manual__body {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55
}

.reckoner-manual__body p,
.reckoner-manual__body ol {
    margin: 0 0 .65rem
}

.reckoner-manual__body ol {
    padding-left: 1.15rem
}

.reckoner-manual__body li {
    margin-bottom: .3rem
}

.reckoner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border)
}

@media (max-width: 860px) {
    .reckoner-body {
        grid-template-columns: 1fr;
        padding: 1rem
    }

    .reckoner-nav {
        position: static
    }

    .reckoner-calc-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 560px) {
    .reckoner-header {
        padding: .85rem 1rem
    }

    .reckoner-main {
        padding: 1rem
    }
}

.public-footer h4 {
    color: var(--text);
    margin-bottom: .55rem;
    font-size: calc(14px * 1.15)
}

.public-footer p {
    font-size: calc(12px * 1.15);
    color: #5a6d96
}

.public-footer a {
    display: block;
    color: #3d5490;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: .35rem;
    font-size: calc(12px * 1.15)
}

.public-footer .footer-col>p+.footer-link-list {
    margin-top: .45rem
}

.public-footer .footer-link-list {
    list-style: disc;
    margin: 0;
    padding-left: 1.2rem;
    color: #7a8fb8
}

.public-footer .footer-link-list li {
    margin-bottom: .35rem;
    padding-left: .15rem
}

.public-footer .footer-link-list li::marker {
    color: #9eb0d4
}

.public-footer .footer-link-list a {
    display: inline;
    margin-bottom: 0
}

.public-footer a:hover {
    color: var(--primary);
    text-decoration: underline
}

.footer-brand-col .footer-brand-text p {
    margin: 0 0 .55rem
}

.footer-brand-col .footer-brand-text p:last-child {
    margin-bottom: 0
}

.footer-contact .footer-contact-line {
    margin: 0 0 .85rem;
    font-size: calc(12px * 1.15);
    color: #5a6d96;
    line-height: 1.45
}

.footer-contact .footer-contact-line:last-child {
    margin-bottom: 0
}

.footer-contact .footer-contact-line strong {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--text);
    font-size: calc(10px * 1.15);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .2rem
}

.footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: 0
}

.footer-contact-icon--heading {
    font-size: 1.05rem;
    margin-right: .15rem
}

.footer-contact h4 {
    display: flex;
    align-items: center;
    gap: .25rem
}

.public-copy {
    background: #e2eaf6;
    color: #5a6d96;
    font-size: calc(11px * 1.15);
    text-align: center;
    padding: .55rem 1rem;
    border-top: 1px solid #d4dfeb
}

.public-footer--landing {
    display: block;
    background:
        radial-gradient(ellipse 60% 80% at 0% 0%, rgba(58, 120, 196, .22), transparent 55%),
        radial-gradient(ellipse 50% 70% at 100% 100%, rgba(201, 168, 76, .12), transparent 50%),
        linear-gradient(160deg, #0a2448 0%, #0f3d7a 48%, #123f78 100%);
    color: rgba(255, 255, 255, .86);
    border-top: none;
    padding: 0;
    box-shadow: 0 -12px 36px rgba(10, 36, 72, .12)
}

.public-footer--landing .footer-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.5rem 0
}

.public-footer--landing .footer-top {
    display: grid;
    grid-template-columns: 1.35fr repeat(2, minmax(0, .85fr)) minmax(14rem, 1.15fr);
    gap: 1.5rem 1.4rem;
    align-items: start;
    padding-bottom: 1.6rem
}

.public-footer--landing .footer-links-row {
    display: contents
}

.public-footer--landing .footer-brand {
    margin-bottom: .85rem;
    padding: .55rem .7rem;
    display: inline-flex;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16)
}

.public-footer--landing .footer-brand-logo,
.public-footer--landing .footer-brand .brand-logo {
    height: 46px;
    max-width: 190px
}

.public-footer--landing .footer-brand-name {
    margin: 0 0 .25rem !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.35
}

.public-footer--landing .footer-brand-tagline {
    margin: 0 0 .65rem !important;
    color: rgba(201, 220, 245, .92) !important;
    font-size: 12.5px !important
}

.public-footer--landing h4 {
    color: #fff;
    margin-bottom: .7rem;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: .55rem
}

.public-footer--landing h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c9a84c, rgba(201, 168, 76, .15))
}

.public-footer--landing p {
    color: rgba(220, 232, 248, .82);
    font-size: 12.5px;
    line-height: 1.55
}

.public-footer--landing a {
    color: rgba(230, 240, 255, .9);
    font-size: 12.5px
}

.public-footer--landing a:hover {
    color: #fff;
    text-decoration: none;
    opacity: 1
}

.public-footer--landing .footer-link-list {
    list-style: none;
    padding: 0;
    color: inherit
}

.public-footer--landing .footer-link-list li {
    margin-bottom: .45rem;
    padding-left: 0
}

.public-footer--landing .footer-link-list a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem 0;
    transition: transform .15s ease, color .15s ease
}

.public-footer--landing .footer-link-list a::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(201, 168, 76, .75);
    flex-shrink: 0
}

.public-footer--landing .footer-link-list a:hover {
    transform: translateX(3px);
    color: #fff
}

.public-footer--landing .footer-brand-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem
}

.public-footer--landing .footer-brand-actions .btn-primary {
    background: linear-gradient(135deg, #c9a84c, #b8943a);
    border-color: #b8943a;
    color: #0d1b3e;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18)
}

.public-footer--landing .footer-brand-actions .btn-primary:hover:not(:disabled) {
    filter: brightness(1.05)
}

.public-footer--landing .footer-btn-ghost {
    border-color: rgba(255, 255, 255, .35) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .06) !important
}

.public-footer--landing .footer-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .5) !important
}

.public-footer--landing .footer-contact-line {
    color: rgba(220, 232, 248, .82);
    display: grid;
    gap: .15rem;
    margin-bottom: .75rem
}

.public-footer--landing .footer-contact-line strong {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: rgba(255, 255, 255, .95);
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: uppercase
}

.public-footer--landing .footer-contact-line a {
    display: inline;
    margin: 0;
    color: #fff;
    font-weight: 600
}

.public-footer--landing .footer-contact-icon {
    filter: grayscale(0) brightness(1.15)
}

.public-footer--landing .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    flex-wrap: wrap;
    padding: .95rem 0 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.public-footer--landing .footer-bottom p {
    margin: 0;
    color: rgba(210, 225, 245, .75);
    font-size: 12px
}

.public-footer--landing .footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem
}

.public-footer--landing .footer-bottom-links a {
    margin: 0;
    color: rgba(230, 240, 255, .85);
    font-size: 12px
}

.public-footer--landing .footer-bottom-links a:hover {
    color: #fff;
    text-decoration: underline
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 37, 89, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100
}

.modal-overlay .modal {
    background: var(--white);
    border-radius: 16px;
    width: 380px;
    max-width: 95vw;
    padding: 1.5rem;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: block;
    opacity: 1;
    height: auto;
    max-height: min(90vh, 520px);
    margin: 0;
    overflow: auto;
    flex: 0 0 auto;
    box-shadow: 0 18px 48px rgba(27, 37, 89, .22)
}

.modal-overlay .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--muted)
}

.modal-overlay .modal h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.5rem
}

#platform-delete-confirm-overlay {
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

#platform-delete-confirm-overlay .modal {
    width: min(400px, 94vw);
    max-width: 400px;
    padding: 1.25rem 1.5rem 1.35rem
}

#platform-delete-confirm-overlay .modal h2 {
    margin: 0 0 .5rem;
    font-size: 17px;
    line-height: 1.35
}

#platform-delete-confirm-overlay .modal p {
    margin: 0 0 1rem
}

.form-group {
    margin-bottom: 1rem
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: .35rem
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border .18s;
    background: var(--white);
    color: var(--text)
}

.form-group .platform-date-wrap>.platform-date-input {
    width: 100%;
    min-width: 0
}

.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    align-self: center;
    border-radius: 4px;
    accent-color: var(--primary)
}

.form-group label.inline-check {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.35;
    text-align: left;
    cursor: pointer
}

.form-group label.inline-check span {
    flex: 0 1 auto;
    min-width: 0
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary)
}

.filter-toolbar .filter-apply-btn {
    padding: 9px 16px;
    font-size: 13px;
    line-height: 1.2;
    min-height: 38px;
    box-sizing: border-box;
    white-space: nowrap;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table-wrap,
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.th-sortable:hover {
    color: var(--primary, #0f3d7a);
}

.data-table th,
.data-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table thead th {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--surface-2, rgba(0, 0, 0, 0.02));
    white-space: nowrap;
}

.data-table tbody tr:hover {
    background: var(--surface-2, rgba(0, 0, 0, 0.02));
}

/* Center empty / placeholder rows in tables (beats .data-table td { text-align: left }) */
.data-table tbody td.table-empty-cell,
.data-table tbody td[class*="-empty"],
table tbody td.table-empty-cell,
table tbody td[class*="-empty"] {
    text-align: center !important;
    vertical-align: middle !important;
    color: var(--muted);
    padding: 1.75rem 1rem !important;
}

.data-table tbody td[class*="-empty"] [class$="__icon"],
.data-table tbody td[class*="-empty"] [class$="__title"],
.data-table tbody td[class*="-empty"] [class$="__hint"],
.data-table tbody td.table-empty-cell .table-empty-cell__icon,
.data-table tbody td.table-empty-cell .table-empty-cell__title,
.data-table tbody td.table-empty-cell .table-empty-cell__hint {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.data-table tbody td[class*="-empty"] [class$="__hint"],
.data-table tbody td.table-empty-cell .table-empty-cell__hint {
    max-width: 34rem;
    line-height: 1.5;
    font-size: 12px;
}

.data-table tbody td[class*="-empty"] [class$="__title"],
.data-table tbody td.table-empty-cell .table-empty-cell__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.data-table tbody td[class*="-empty"] [class$="__icon"],
.data-table tbody td.table-empty-cell .table-empty-cell__icon {
    font-size: 1.75rem;
    margin-bottom: 0.35rem;
}

.th-sortable {
    cursor: pointer;
    user-select: none;
}

.th-sortable:hover {
    color: var(--text);
}

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
    flex-wrap: wrap;
}

.table-pagination-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):disabled,
select:disabled,
textarea:disabled,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])[disabled],
select[disabled],
textarea[disabled],
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])[aria-disabled="true"],
select[aria-disabled="true"],
textarea[aria-disabled="true"],
.form-control:disabled,
.form-control[disabled],
.form-select:disabled,
.form-select[disabled],
.platform-date-input:disabled,
.platform-date-input[disabled],
fieldset:disabled input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
fieldset:disabled select,
fieldset:disabled textarea {
    background-color: var(--input-disabled-bg) !important;
    color: var(--input-disabled-text) !important;
    border-color: var(--input-disabled-border) !important;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
    -webkit-text-fill-color: var(--input-disabled-text);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
input[type="checkbox"][disabled],
input[type="radio"][disabled],
fieldset:disabled input[type="checkbox"],
fieldset:disabled input[type="radio"] {
    opacity: .55;
    cursor: not-allowed;
    accent-color: var(--muted);
}

.otp-row {
    display: flex;
    gap: .5rem
}

.otp-row input {
    flex: 1
}

.otp-row .btn {
    flex-shrink: 0
}

.form-footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 12px;
    color: var(--muted)
}

.form-footer a {
    color: var(--primary);
    cursor: pointer;
    text-decoration: none
}

.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 1rem
}

.alert-success {
    background: #e6f9f0;
    color: #01B574;
    border: 1px solid #b6ead3
}

.alert-error {
    background: #fde8e8;
    color: var(--err);
    border: 1px solid #f8c4c4
}

.alert-info {
    background: #e8effe;
    color: var(--info);
    border: 1px solid #c4d4fc
}

.wizard-page {
    background: var(--bg);
    min-height: 100vh
}

.wizard-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem
}

.wizard-body {
    padding: 1.5rem 2rem;
    max-width: 1120px;
    margin: 0 auto
}

/* Do not use class "progress-bar" — Bootstrap 5 overrides it and breaks the stepper layout. */
.wizard-progress-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    align-items: center;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding: .5rem 0;
    width: 100%
}

.wizard-progress-bar .prog-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 52px
}

.wizard-progress-bar .wizard-step-tab {
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit
}

.wizard-progress-bar .wizard-step-tab:hover .prog-dot,
.wizard-progress-bar .wizard-step-tab:focus-visible .prog-dot {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(67, 24, 255, 0.15)
}

.wizard-progress-bar .wizard-step-tab:focus-visible {
    outline: none
}

.wizard-terms-panel {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 12px;
    line-height: 1.65;
    color: var(--text2);
    background: var(--bg)
}

.wizard-terms-panel .legal-section {
    margin-bottom: .85rem
}

.wizard-terms-panel .legal-section h2 {
    font-size: 12px;
    margin: 0 0 .35rem;
    color: var(--text)
}

.wizard-terms-panel .legal-section p {
    margin: 0 0 .5rem
}

.wizard-terms-panel .legal-list {
    margin: 0 0 .5rem 1.1rem;
    padding: 0
}

.prog-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: var(--white);
    color: var(--muted);
    transition: all .2s
}

.prog-dot.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff
}

.prog-dot.done {
    border-color: var(--green);
    background: var(--green);
    color: #fff
}

.prog-label {
    font-size: 10px;
    color: var(--muted);
    text-align: center
}

.prog-label.active {
    color: var(--primary);
    font-weight: 600
}

.wizard-progress-bar .prog-connector {
    flex: 1 1 12px;
    height: 2px;
    background: var(--border);
    min-width: 12px;
    align-self: center
}

.prog-connector.done {
    background: var(--green)
}

.wizard-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem
}

.wizard-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border)
}

.wizard-payment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(240px, 0.85fr);
    gap: 1rem;
    align-items: stretch
}

.wizard-payment-grid--details {
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    margin-bottom: 1rem
}

.wizard-payment-proof {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    background: var(--white);
    display: grid;
    gap: 1rem
}

.wizard-field-hint {
    font-size: 11px;
    color: var(--muted);
    margin: .35rem 0 0;
    line-height: 1.45
}

.wizard-payment-attachment-drop {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.wizard-payment-attachment-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem
}

.wizard-payment-attachment-empty {
    font-size: 12px;
    color: var(--muted);
    padding: .75rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    text-align: center;
    background: var(--bg)
}

.wizard-payment-attachment-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg)
}

.wizard-payment-attachment-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0
}

.wizard-payment-attachment-file-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--white);
    font-size: 22px;
    flex-shrink: 0
}

.wizard-payment-attachment-meta {
    flex: 1;
    min-width: 0
}

.wizard-payment-attachment-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.wizard-payment-attachment-size {
    font-size: 11px;
    color: var(--muted);
    margin-top: .15rem
}

.wizard-payment-attachment-remove {
    flex-shrink: 0
}

.wizard-payment-qr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    background: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0
}

.wizard-payment-qr-img {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.form-row.three {
    grid-template-columns: 1fr 1fr 1fr
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem
}

.wizard-nav--first-step .wizard-nav-prev,
.wizard-nav--first-step .wizard-nav-prev-placeholder {
    display: none !important;
    visibility: hidden;
    width: 0;
    min-width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.doc-upload {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border .2s
}

.doc-upload:hover {
    border-color: var(--primary)
}

.doc-upload p {
    font-size: 12px;
    color: var(--muted)
}

.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.35;
    border: 1px solid transparent;
    white-space: nowrap
}

.tag-tone-success {
    background: #e6f9f0;
    color: #1a7a55;
    border-color: rgba(31, 138, 99, .2)
}

.tag-tone-danger {
    background: #fde8e8;
    color: #a93a4a;
    border-color: rgba(169, 58, 74, .2)
}

.tag-tone-warning {
    background: #fff8e6;
    color: #b07d00;
    border-color: rgba(201, 168, 76, .28)
}

.tag-tone-info {
    background: #e8effe;
    color: #2A4F8A;
    border-color: rgba(42, 79, 138, .2)
}

.tag-tone-purple {
    background: #f0e8ff;
    color: #6c3fb5;
    border-color: rgba(108, 63, 181, .2)
}

.tag-tone-orange {
    background: #fff4e6;
    color: #b45309;
    border-color: rgba(180, 83, 9, .22)
}

.tag-tone-neutral {
    background: #f1f5f9;
    color: #64748b;
    border-color: rgba(100, 116, 139, .2)
}

.tag-approved {
    background: #e6f9f0;
    color: #1a7a55;
    border-color: rgba(31, 138, 99, .22)
}

.tag-active {
    background: #dff7ea;
    color: #15803d;
    border-color: rgba(21, 128, 61, .22)
}

.tag-paid,
.tag-confirmed {
    background: #ecfdf5;
    color: #059669;
    border-color: rgba(5, 150, 105, .2)
}

.tag-completed {
    background: #e6fffa;
    color: #0d9488;
    border-color: rgba(13, 148, 136, .2)
}

.tag-disbursed {
    background: #ccfbf1;
    color: #0f766e;
    border-color: rgba(15, 118, 110, .2)
}

.tag-cleared,
.tag-success,
.tag-pass {
    background: #dcfce7;
    color: #166534;
    border-color: rgba(22, 101, 52, .2)
}

.tag-read,
.tag-matched {
    background: #e2f5eb;
    color: #2d6a4f;
    border-color: rgba(45, 106, 79, .2)
}

.tag-low {
    background: #eefaf3;
    color: #2f9e6b;
    border-color: rgba(47, 158, 107, .2)
}

.tag-rejected {
    background: #fde8e8;
    color: #a93a4a;
    border-color: rgba(169, 58, 74, .22)
}

.tag-declined,
.tag-failed,
.tag-fail {
    background: #fee2e2;
    color: #b91c1c;
    border-color: rgba(185, 28, 28, .2)
}

.tag-bounced {
    background: #ffe4e6;
    color: #be123c;
    border-color: rgba(190, 18, 60, .2)
}

.tag-cancelled,
.tag-canceled,
.tag-error,
.tag-denied {
    background: #fef2f2;
    color: #dc2626;
    border-color: rgba(220, 38, 38, .2)
}

.tag-high,
.tag-overdue,
.tag-defaulted {
    background: #fff1f2;
    color: #e11d48;
    border-color: rgba(225, 29, 72, .2)
}

.tag-pending {
    background: #fff8e6;
    color: #b07d00;
    border-color: rgba(176, 125, 0, .24)
}

.tag-awaiting_approval,
.tag-awaiting_verification,
.tag-processing,
.tag-open,
.tag-unread,
.tag-queued {
    background: #fffbeb;
    color: #d97706;
    border-color: rgba(217, 119, 6, .22)
}

.tag-medium,
.tag-unmatched {
    background: #fef3c7;
    color: #ca8a04;
    border-color: rgba(202, 138, 4, .24)
}

.tag-submitted {
    background: #e8effe;
    color: #2A4F8A;
    border-color: rgba(42, 79, 138, .22)
}

.tag-verified {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, .2)
}

.tag-in_review {
    background: #e0e7ff;
    color: #4338ca;
    border-color: rgba(67, 56, 202, .2)
}

.tag-under_review {
    background: #ede9fe;
    color: #5b21b6;
    border-color: rgba(91, 33, 182, .2)
}

.tag-recorded,
.tag-email,
.tag-sms,
.tag-in_app {
    background: #eff6ff;
    color: #2563eb;
    border-color: rgba(37, 99, 235, .2)
}

.tag-recommended {
    background: #f0e8ff;
    color: #6c3fb5;
    border-color: rgba(108, 63, 181, .22)
}

.tag-recommended_reject {
    background: #faf5ff;
    color: #7e22ce;
    border-color: rgba(126, 34, 206, .2)
}

.tag-sent_back,
.tag-returned {
    background: #fff4e6;
    color: #b45309;
    border-color: rgba(180, 83, 9, .24)
}

.tag-draft,
.tag-not_checked {
    background: #f1f5f9;
    color: #64748b;
    border-color: rgba(100, 116, 139, .2)
}

.tag-inactive,
.tag-disabled,
.tag-archived {
    background: #f8fafc;
    color: #94a3b8;
    border-color: rgba(148, 163, 184, .28)
}

.tag-closed {
    background: #e2e8f0;
    color: #475569;
    border-color: rgba(71, 85, 105, .22)
}

.dash-layout {
    display: flex;
    /* Compensate body zoom:1.2 so layout fits the visual viewport (avoids document + content double scroll) */
    height: calc(100dvh / 1.2);
    max-height: calc(100dvh / 1.2);
    height: calc(100vh / 1.2);
    max-height: calc(100vh / 1.2);
    overflow: hidden;
    flex: 1;
    min-height: 0
}

.sidebar {
    width: var(--sidebar);
    background: linear-gradient(180deg, #0D1B3E 0%, #172B57 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    min-height: 0
}

.sidebar-brand {
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
    padding: 1.1rem 1rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    background: #0D1B3E
}

.sidebar-brand .sidebar-brand-logo,
.sidebar-brand .brand-logo {
    height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain
}

.sidebar-nav {
    padding: .5rem 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 1rem;
    cursor: pointer;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .7);
    transition: all .18s;
    border-left: 3px solid transparent
}

.nav-item:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff
}

.nav-item.active {
    background: rgba(201, 168, 76, .22);
    color: #fff;
    border-left-color: var(--warn)
}

.nav-item .n-icon {
    font-size: 14px;
    width: 18px;
    text-align: center
}

.nav-section {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, .35);
    padding: 1rem 1rem .4rem;
    text-transform: uppercase;
    letter-spacing: .8px
}

.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    background: #FBF8F0;
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0
}

.topbar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text)
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 4
}

.topbar-back-btn {
    margin-left: .25rem;
    white-space: nowrap;
    font-weight: 600;
    flex-shrink: 0;
}

.topbar-back-btn--leading {
    margin-left: 0;
    margin-right: .5rem;
}

.public-nav-back-btn {
    margin: 0 .65rem 0 .35rem;
}

.global-back-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.topbar-back-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.topbar-portal-switch {
    white-space: nowrap;
    font-weight: 600
}

.mobile-menu-btn,
.mobile-topbar-logo,
.mobile-sidebar-overlay {
    display: none
}

.dash-search-wrap {
    position: relative;
    flex: 0 1 280px;
    min-width: 180px;
    max-width: 360px;
    z-index: 12
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 10px 0 8px;
    min-height: 36px;
    font-size: 12px;
    color: var(--text);
    box-shadow: 0 1px 4px rgba(13, 27, 62, .04);
    transition: border-color .15s ease, box-shadow .15s ease
}

.search-bar:focus-within {
    border-color: rgba(57, 108, 240, .45);
    box-shadow: 0 0 0 3px rgba(57, 108, 240, .12)
}

.search-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    flex-shrink: 0
}

.search-bar__icon svg {
    width: 15px;
    height: 15px
}

.search-bar__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--text);
    outline: none;
    padding: 7px 0;
    pointer-events: auto;
    cursor: text
}

.search-bar__input::placeholder {
    color: var(--muted)
}

.search-bar__input::-webkit-search-cancel-button,
.search-bar__input::-webkit-search-decoration {
    display: none
}

.search-bar__clear {
    border: 0;
    background: rgba(111, 126, 157, .12);
    color: var(--muted);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0
}

.search-bar__clear:hover {
    background: rgba(111, 126, 157, .2);
    color: var(--text)
}

.dash-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 120;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(13, 27, 62, .14);
    max-height: min(360px, 52vh);
    overflow: auto;
    padding: .35rem
}

.dash-search-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: .55rem .65rem;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    color: var(--text)
}

.dash-search-result:hover,
.dash-search-result--active {
    background: rgba(26, 45, 90, .08)
}

.dash-search-result__kind {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--info)
}

.dash-search-result__title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word
}

.dash-search-result__meta {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.35
}

.dash-search-empty {
    padding: .75rem .65rem;
    font-size: 12px;
    color: var(--muted);
    text-align: center
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1A2D5A 0%, #253D72 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    padding: 0
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%
}

.profile-photo-block {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap
}

.profile-photo-preview-wrap {
    flex: 0 0 auto
}

.profile-photo-preview,
.profile-photo-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border, #dbe3f0);
    background: linear-gradient(135deg, #1A2D5A 0%, #253D72 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700
}

.profile-photo-actions {
    flex: 1 1 220px;
    min-width: 200px
}

.profile-photo-upload-btn {
    cursor: pointer;
    margin-bottom: .35rem
}

.profile-photo-hint {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5
}

.profile-joining-date-text {
    margin: -.15rem 0 .85rem;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5
}

.profile-joining-date-text strong {
    color: var(--text);
    font-weight: 600
}

.profile-photo-card {
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--border, #e5e7eb)
}

.profile-page-grid {
    align-items: start
}

.profile-page-main {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0
}

.profile-account-card {
    margin-bottom: 0
}

.profile-sections-stack {
    display: flex;
    flex-direction: column;
    gap: .85rem
}

.profile-section-card {
    border: 1px solid var(--border, #dbe3f0);
    border-radius: 10px;
    background: #fff;
    overflow: hidden
}

.profile-section-card__head {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: linear-gradient(180deg, rgba(57, 108, 240, 0.05) 0%, rgba(255, 255, 255, 0) 100%)
}

.profile-section-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.profile-section-card__subtitle,
.profile-section-card__hint {
    margin: .35rem 0 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5
}

.profile-section-card__body {
    padding: .9rem
}

.profile-doc-upload-row {
    padding: .75rem 0;
    border-bottom: 1px dashed var(--border, #e5e7eb)
}

.profile-doc-upload-row:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.profile-doc-upload-row__head {
    margin-bottom: .5rem
}

.profile-doc-upload-row__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text)
}

.profile-doc-upload-row__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem
}

@media (max-width: 768px) {
    .profile-doc-upload-row__grid {
        grid-template-columns: 1fr
    }
}

.profile-doc-existing {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 72px;
    padding: .55rem .65rem;
    border: 1px solid var(--border, #dbe3f0);
    border-radius: 8px;
    background: #f8fafc
}

.profile-doc-existing--empty {
    color: var(--muted);
    font-size: 12px;
    justify-content: center
}

.profile-doc-existing--file .profile-doc-existing__icon {
    font-size: 22px
}

.profile-doc-existing__preview {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border, #dbe3f0);
    flex: 0 0 auto
}

.profile-doc-existing__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem
}

.profile-doc-existing__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary, #396CF0);
    text-decoration: none;
    word-break: break-word
}

.profile-doc-existing__tag {
    font-size: 10px;
    color: var(--muted)
}

.profile-doc-upload-btn {
    margin-bottom: .35rem
}

.profile-doc-new-preview {
    margin-top: .45rem
}

.profile-doc-new-preview__wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap
}

.profile-doc-new-preview__wrap--file {
    font-size: 12px;
    color: var(--text)
}

.profile-doc-new-preview__img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border, #dbe3f0)
}

.profile-save-bar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    position: sticky;
    bottom: .5rem;
    z-index: 2;
    padding: .65rem .75rem;
    border: 1px solid var(--border, #dbe3f0);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08)
}

.profile-notes-card {
    position: sticky;
    top: .75rem
}

button.avatar {
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    appearance: none;
    -webkit-appearance: none
}

.topbar-notif-wrap {
    position: relative;
    flex-shrink: 0
}

.topbar-notif-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    padding: 0
}

.topbar-notif-icon {
    font-size: 16px;
    line-height: 1
}

.topbar-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--err);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 1px solid var(--white);
    pointer-events: none
}

.topbar-notif-modal {
    max-width: 420px;
    text-align: left
}

.topbar-notif-modal h2 {
    margin: 0 0 .75rem;
    font-size: 16px
}

.topbar-notif-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    max-height: 320px;
    overflow-y: auto
}

.topbar-notif-item {
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg)
}

.topbar-notif-item--unread {
    border-color: rgba(26, 45, 90, .22);
    background: #fff
}

.topbar-notif-item strong {
    display: block;
    font-size: 12px;
    margin-bottom: .25rem
}

.topbar-notif-item p {
    margin: 0 0 .35rem;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45
}

.topbar-notif-item time {
    font-size: 10px;
    color: var(--muted)
}

.topbar-notif-empty {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5
}

.topbar-notif-view-more {
    width: 100%;
    margin-top: .75rem
}

.user-menu-wrap {
    position: relative;
    flex-shrink: 0
}

.user-menu-status-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--err);
    border-radius: 50%;
    border: 1px solid var(--white);
    pointer-events: none;
    z-index: 1
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 212px;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(13, 27, 62, .14);
    z-index: 50
}

.user-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--text2);
    cursor: pointer;
    font-family: inherit
}

.user-menu-item:hover {
    background: var(--bg);
    color: var(--text)
}

.user-menu-item:focus-visible {
    outline: 2px solid #4318FF;
    outline-offset: 1px
}

.user-menu-item--danger {
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
    border-radius: 8px;
    color: var(--err)
}

.user-menu-item--danger:hover {
    background: rgba(238, 93, 80, .08);
    color: var(--err)
}

.content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    --dash-kpi-val-size: 1.35rem
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    margin-bottom: 1.25rem
}

.kpi-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(13, 27, 62, .06);
    padding: 1rem
}

.kpi-label {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: .4rem
}

.kpi-val {
    font-size: var(--dash-kpi-val-size, 1.35rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -.02em
}

.kpi-sub {
    font-size: 11px;
    color: var(--green);
    margin-top: .2rem
}

.dash-queue-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
    align-items: stretch
}

.dash-queue-kpi {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    min-height: 108px;
    padding: 1.1rem 1.15rem 1rem;
    background: linear-gradient(155deg, #fff 0%, #FBF8F0 52%, #f5f0e6 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(13, 27, 62, .04), 0 8px 24px rgba(26, 45, 90, .06);
    cursor: pointer;
    text-align: left;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden
}

.dash-queue-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--dash-queue-accent, var(--primary));
    opacity: .85
}

.dash-queue-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(26, 45, 90, .1);
    border-color: rgba(26, 45, 90, .18)
}

.dash-queue-kpi:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px
}

.dash-queue-kpi__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dash-queue-icon-bg, rgba(26, 45, 90, .1));
    color: var(--dash-queue-icon-fg, var(--primary));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65)
}

.dash-queue-kpi__icon svg {
    width: 24px;
    height: 24px
}

.dash-queue-kpi__body {
    flex: 1;
    min-width: 0
}

.dash-queue-kpi__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.35;
    margin: 0 0 .3rem;
    letter-spacing: .02em;
    text-transform: uppercase
}

.dash-queue-kpi__val {
    font-size: var(--dash-kpi-val-size, 1.35rem);
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--text);
    line-height: 1.15;
    word-break: break-word
}

.dash-queue-kpi__hint {
    font-size: 10px;
    color: var(--text2);
    opacity: .72;
    margin: .3rem 0 0;
    line-height: 1.35
}

.dash-queue-kpis--member {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.dash-queue-kpis--admin {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.1rem;
    margin-bottom: 1.5rem
}

/* Role dashboard navigation KPI tiles */
.role-dash-nav {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.35rem 1.35rem 1.4rem;
    border-radius: 22px;
    border: 1px solid rgba(26, 45, 90, .08);
    background: linear-gradient(155deg, #fff 0%, #f8fafc 38%, #eef2ff 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 8px 32px rgba(13, 27, 62, .07),
        0 24px 48px rgba(26, 45, 90, .04);
    overflow: hidden
}

.role-dash-nav__backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 100% 0%, rgba(57, 108, 240, .12) 0%, transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(1, 181, 116, .1) 0%, transparent 38%),
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%);
    opacity: .9
}

.role-dash-nav--am .role-dash-nav__backdrop {
    background:
        radial-gradient(circle at 100% 0%, rgba(57, 108, 240, .14) 0%, transparent 44%),
        radial-gradient(circle at 0% 100%, rgba(14, 165, 233, .1) 0%, transparent 40%)
}

.role-dash-nav--approver .role-dash-nav__backdrop {
    background:
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, .12) 0%, transparent 44%),
        radial-gradient(circle at 0% 100%, rgba(255, 181, 71, .1) 0%, transparent 40%)
}

.role-dash-nav--member .role-dash-nav__backdrop {
    background:
        radial-gradient(circle at 100% 0%, rgba(1, 181, 116, .12) 0%, transparent 44%),
        radial-gradient(circle at 0% 100%, rgba(67, 24, 255, .08) 0%, transparent 40%)
}

.role-dash-nav__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
    flex-wrap: wrap
}

.role-dash-nav__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .4rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(57, 108, 240, .08);
    border: 1px solid rgba(57, 108, 240, .12)
}

.role-dash-nav__title {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.03em;
    line-height: 1.15
}

.role-dash-nav__sub {
    margin: .35rem 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
    max-width: 54ch
}

.role-dash-nav__stats {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end
}

.role-dash-nav__pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    font-size: 11px;
    color: var(--text2);
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(26, 45, 90, .1);
    box-shadow: 0 2px 8px rgba(13, 27, 62, .04);
    backdrop-filter: blur(6px)
}

.role-dash-nav__pill strong {
    color: var(--navy);
    font-weight: 800
}

.role-dash-nav__pill--warn {
    border-color: rgba(255, 181, 71, .35);
    background: linear-gradient(135deg, rgba(255, 251, 235, .95), rgba(255, 237, 213, .85));
    color: #92400e
}

.role-dash-nav__pill--warn strong {
    color: #b45309
}

.role-dash-nav__pill--ok {
    border-color: rgba(1, 181, 116, .28);
    background: linear-gradient(135deg, rgba(236, 253, 245, .95), rgba(209, 250, 229, .85));
    color: #065f46
}

.role-dash-nav__pill--ok strong {
    color: #047857
}

.role-dash-nav__pill--count {
    border-color: rgba(57, 108, 240, .22);
    background: linear-gradient(135deg, rgba(239, 246, 255, .95), rgba(219, 234, 254, .85))
}

.role-nav-kpi-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: .9rem;
    align-items: stretch
}

.role-nav-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .65rem;
    min-height: 132px;
    padding: .95rem .95rem .85rem;
    border-radius: 16px;
    border: 1px solid rgba(26, 45, 90, .09);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, .98) 0%, rgba(248, 250, 252, .94) 100%);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 4px 14px rgba(13, 27, 62, .05);
    transition:
        transform .22s cubic-bezier(.2, .8, .2, 1),
        box-shadow .22s ease,
        border-color .22s ease;
    animation: roleNavKpiIn .45s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--role-nav-stagger, 0) * 45ms)
}

@keyframes roleNavKpiIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.role-nav-kpi__mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .45;
    background-image:
        radial-gradient(color-mix(in srgb, var(--role-nav-accent, var(--primary)) 14%, transparent) 1px, transparent 1px);
    background-size: 14px 14px;
    mask-image: linear-gradient(135deg, rgba(0, 0, 0, .35), transparent 62%)
}

.role-nav-kpi__shine {
    position: absolute;
    inset: 0 auto 0 -120%;
    width: 60%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .55) 48%, transparent 100%);
    transform: skewX(-18deg);
    transition: left .55s ease;
    z-index: 2
}

.role-nav-kpi__pulse {
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--role-nav-accent, var(--primary));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--role-nav-accent, var(--primary)) 45%, transparent);
    animation: roleNavKpiPulse 1.8s ease-out infinite;
    z-index: 3
}

@keyframes roleNavKpiPulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--role-nav-accent, var(--primary)) 50%, transparent)
    }

    70% {
        box-shadow: 0 0 0 10px transparent
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

.role-nav-kpi::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(145deg, color-mix(in srgb, var(--role-nav-accent, var(--primary)) 35%, #fff), rgba(255, 255, 255, .2) 45%, color-mix(in srgb, var(--role-nav-accent, var(--primary)) 18%, transparent));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: .55
}

.role-nav-kpi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--role-nav-accent, var(--primary)), color-mix(in srgb, var(--role-nav-accent, var(--primary)) 35%, #fff));
    opacity: .85
}

.role-nav-kpi:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: color-mix(in srgb, var(--role-nav-accent, var(--primary)) 32%, var(--border));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 14px 34px rgba(26, 45, 90, .12),
        0 0 0 1px color-mix(in srgb, var(--role-nav-accent, var(--primary)) 12%, transparent)
}

.role-nav-kpi:hover .role-nav-kpi__shine {
    left: 130%
}

.role-nav-kpi:hover .role-nav-kpi__icon {
    transform: scale(1.06) rotate(-2deg)
}

.role-nav-kpi:focus-visible {
    outline: 2px solid var(--role-nav-accent, var(--primary));
    outline-offset: 3px
}

.role-nav-kpi--active {
    border-color: color-mix(in srgb, var(--role-nav-accent, var(--primary)) 38%, var(--border));
    background:
        linear-gradient(155deg, #fff 0%, color-mix(in srgb, var(--role-nav-accent, var(--primary)) 7%, #fff) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 8px 24px color-mix(in srgb, var(--role-nav-accent, var(--primary)) 16%, transparent)
}

.role-nav-kpi--link {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .98) 0%, color-mix(in srgb, var(--role-nav-accent, var(--primary)) 4%, #f8fafc) 100%)
}

.role-nav-kpi__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    position: relative;
    z-index: 1
}

.role-nav-kpi__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(145deg, var(--role-nav-icon-bg, rgba(57, 108, 240, .14)), rgba(255, 255, 255, .75));
    color: var(--role-nav-accent, var(--primary));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .85) inset,
        0 6px 16px color-mix(in srgb, var(--role-nav-accent, var(--primary)) 18%, transparent);
    transition: transform .22s ease
}

.role-nav-kpi__icon svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35))
}

.role-nav-kpi__chip {
    display: inline-flex;
    align-items: center;
    padding: .18rem .45rem;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--role-nav-accent, var(--primary)), color-mix(in srgb, var(--role-nav-accent, var(--primary)) 70%, #000));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--role-nav-accent, var(--primary)) 35%, transparent)
}

.role-nav-kpi__chip--soft {
    color: var(--role-nav-accent, var(--primary));
    background: color-mix(in srgb, var(--role-nav-accent, var(--primary)) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--role-nav-accent, var(--primary)) 22%, transparent);
    box-shadow: none
}

.role-nav-kpi__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    position: relative;
    z-index: 1
}

.role-nav-kpi__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
    line-height: 1.35;
    letter-spacing: .01em
}

.role-nav-kpi__val {
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--navy) 0%, color-mix(in srgb, var(--role-nav-accent, var(--primary)) 55%, var(--navy)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.role-nav-kpi__val--warn {
    background: linear-gradient(135deg, #b45309 0%, #ee5d50 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.role-nav-kpi__metric {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-height: 2.35rem
}

.role-nav-kpi__metric-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    line-height: 1.3;
    letter-spacing: .01em
}

.role-nav-kpi__val--stat {
    display: block;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--navy)
}

.role-nav-kpi__val--stat.role-nav-kpi__val--warn {
    color: #b45309;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial
}

.role-nav-kpi__amount {
    display: block;
    margin-top: .18rem;
    font-size: 12px;
    font-weight: 700;
    color: var(--role-nav-accent, var(--primary));
    line-height: 1.3
}

.role-nav-kpi__val--caption {
    font-size: clamp(.92rem, 1.5vw, 1.08rem);
    letter-spacing: -.02em;
    line-height: 1.25;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--muted)
}

.role-nav-kpi__open {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 12px;
    font-weight: 700;
    color: var(--role-nav-accent, var(--primary));
    letter-spacing: .01em
}

.role-nav-kpi__open-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--role-nav-accent, var(--primary));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--role-nav-accent, var(--primary)) 18%, transparent)
}

.role-nav-kpi__hint {
    margin: .1rem 0 0;
    font-size: 10px;
    color: var(--muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.role-nav-kpi__foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .15rem;
    padding-top: .55rem;
    border-top: 1px dashed color-mix(in srgb, var(--role-nav-accent, var(--primary)) 18%, var(--border))
}

.role-nav-kpi__foot-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--role-nav-accent, var(--primary)) 75%, var(--text2))
}

.role-nav-kpi__arrow {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--role-nav-accent, var(--primary)) 14%, #fff), #fff);
    color: var(--role-nav-accent, var(--primary));
    border: 1px solid color-mix(in srgb, var(--role-nav-accent, var(--primary)) 20%, transparent);
    transition: transform .22s ease, background .22s ease
}

.role-nav-kpi__arrow svg {
    width: 14px;
    height: 14px
}

.role-nav-kpi:hover .role-nav-kpi__arrow {
    transform: translateX(3px);
    background: var(--role-nav-accent, var(--primary));
    color: #fff;
    border-color: transparent
}

.role-dash-nav--member .role-nav-kpi-grid,
.role-nav-kpi-grid--member-full {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .7rem;
    width: 100%;
}

.role-dash-nav--member .role-nav-kpi-grid .role-nav-kpi {
    width: 100%;
    min-width: 0;
}

@media (max-width: 1100px) {
    .role-dash-nav--member .role-nav-kpi-grid,
    .role-nav-kpi-grid--member-full {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .role-dash-nav--member .role-nav-kpi-grid,
    .role-nav-kpi-grid--member-full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .role-nav-kpi--member-row .role-nav-kpi__label {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .role-dash-nav--member .role-nav-kpi-grid,
    .role-nav-kpi-grid--member-full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }
}

.role-nav-kpi--member-row {
    min-height: 96px;
    padding: .72rem .8rem .68rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
}

.role-nav-kpi--member-row .role-nav-kpi__member-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .38rem;
    min-width: 0;
    flex: 1 1 auto;
}

.role-nav-kpi--member-row .role-nav-kpi__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}

.role-nav-kpi--member-row .role-nav-kpi__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
}

.role-nav-kpi--member-row .role-nav-kpi__icon svg {
    width: 18px;
    height: 18px;
}

.role-nav-kpi--member-row .role-nav-kpi__member-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: .1rem;
    flex-shrink: 0;
    text-align: right;
}

.role-nav-kpi--member-row .role-nav-kpi__val--member {
    font-size: 1.45rem;
    line-height: 1;
    margin: 0;
}

.role-nav-kpi--member-row .role-nav-kpi__member-amount {
    font-size: 10px;
    font-weight: 600;
    color: var(--role-nav-accent, var(--primary));
    white-space: nowrap;
}

.role-nav-kpi--member-row .role-nav-kpi__chip--member {
    font-size: 9px;
    padding: .15rem .4rem;
}

.role-nav-kpi--member-row .role-nav-kpi__pulse {
    top: .5rem;
    right: .5rem;
}

.role-nav-kpi--compact {
    min-height: 92px;
    padding: .62rem .72rem .58rem;
    gap: .4rem;
    border-radius: 14px;
}

.role-nav-kpi--compact .role-nav-kpi__top {
    margin-bottom: 0;
}

.role-nav-kpi--compact .role-nav-kpi__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.role-nav-kpi--compact .role-nav-kpi__icon svg {
    width: 17px;
    height: 17px;
}

.role-nav-kpi--compact .role-nav-kpi__body {
    gap: .12rem;
}

.role-nav-kpi--compact .role-nav-kpi__label {
    font-size: 11px;
    line-height: 1.25;
}

.role-nav-kpi--compact .role-nav-kpi__val--stat {
    font-size: 1.28rem;
    line-height: 1.1;
}

.role-nav-kpi--compact .role-nav-kpi__amount {
    font-size: 10px;
}

.role-nav-kpi--compact .role-nav-kpi__hint {
    font-size: 10px;
    -webkit-line-clamp: 1;
    margin-top: .05rem;
}

.role-nav-kpi--compact .role-nav-kpi__chip {
    font-size: 9px;
    padding: .18rem .42rem;
}

.role-nav-kpi--compact:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .role-nav-kpi {
        animation: none
    }

    .role-nav-kpi__pulse {
        animation: none
    }

    .role-nav-kpi__shine {
        display: none
    }
}

.dash-queue-kpis--staff {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem .85rem;
    margin-bottom: 0
}

.dash-queue-kpis--staff .dash-queue-kpi {
    min-height: 86px;
    padding: .85rem .9rem .78rem;
    gap: .75rem;
    border-radius: 13px;
    box-shadow: 0 2px 6px rgba(13, 27, 62, .04), 0 6px 18px rgba(26, 45, 90, .05)
}

.dash-queue-kpis--staff .dash-queue-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(26, 45, 90, .09)
}

.dash-queue-kpis--staff .dash-queue-kpi__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px
}

.dash-queue-kpis--staff .dash-queue-kpi__icon svg {
    width: 20px;
    height: 20px
}

.dash-queue-kpis--staff .dash-queue-kpi__label {
    font-size: 11px;
    margin-bottom: .2rem;
    letter-spacing: .02em
}

.dash-queue-kpis--staff .dash-queue-kpi__val {
    font-size: var(--dash-kpi-val-size, 1.2rem)
}

.dash-queue-kpis--staff .dash-queue-kpi__hint {
    font-size: 10px;
    margin-top: .2rem;
    line-height: 1.3
}

.dash-queue-kpi--active {
    border-color: color-mix(in srgb, var(--dash-queue-accent, var(--primary)) 28%, var(--border));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--dash-queue-accent, var(--primary)) 12%, transparent), 0 8px 24px rgba(26, 45, 90, .07)
}

.dash-queue-kpi--active::before {
    opacity: 1;
    height: 4px
}

.dash-queue-kpi--priority.dash-queue-kpi--active {
    border-color: color-mix(in srgb, var(--dash-queue-accent, var(--primary)) 36%, var(--border))
}

.dash-queue-kpi__cta {
    position: absolute;
    top: .85rem;
    right: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--dash-queue-accent, var(--primary));
    opacity: .88
}

.dash-queue-kpi__cta svg {
    width: 12px;
    height: 12px
}

.dash-queue-kpi:hover .dash-queue-kpi__cta {
    opacity: 1
}

.dash-ops-queue-section {
    margin-bottom: 1.15rem
}

.dash-ops-queue-panel {
    padding: 1.05rem 1.1rem 1.1rem;
    background: linear-gradient(165deg, #fff 0%, #FBF8F0 42%, #f7f2e8 100%);
    border-color: rgba(230, 220, 196, .95)
}

.dash-ops-queue-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .95rem
}

.dash-ops-queue-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -.01em
}

.dash-ops-queue-panel__sub {
    margin: .22rem 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    max-width: 36rem
}

.dash-ops-queue-panel__meta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .55rem
}

.dash-ops-queue-panel__badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #8a5a00;
    background: rgba(255, 181, 71, .18);
    border: 1px solid rgba(255, 181, 71, .35)
}

.dash-ops-queue-panel__badge--clear {
    color: #1f6f4f;
    background: rgba(1, 181, 116, .12);
    border-color: rgba(1, 181, 116, .28)
}

.dash-ops-queue-panel__live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted)
}

.dash-ops-queue-panel__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(1, 181, 116, .18);
    animation: dash-ops-live-pulse 2s ease-in-out infinite
}

@keyframes dash-ops-live-pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .55
    }
}

.dash-ops-queue-dist {
    margin-bottom: 1rem
}

.dash-ops-queue-dist__track {
    display: flex;
    gap: 3px;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(26, 45, 90, .06)
}

.dash-ops-queue-dist__seg {
    min-width: 6px;
    border-radius: 999px;
    background: var(--seg-color, var(--primary))
}

.dash-ops-queue-dist__empty-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(1, 181, 116, .25), rgba(1, 181, 116, .12))
}

.dash-ops-queue-dist__empty-label {
    margin: .45rem 0 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4
}

.dash-ops-queue-dist__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    margin-top: .55rem
}

.dash-ops-queue-dist__legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 10px;
    color: var(--text2);
    line-height: 1.3
}

.dash-ops-queue-dist__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0
}

.dash-ops-queue-dist__legend-count {
    font-weight: 700;
    color: var(--text)
}

.dash-ops-queue-panel__body--grouped {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.dash-ops-queue-group__label {
    margin: 0 0 .55rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted)
}

.dash-ops-queue-panel--approver .dash-queue-kpis,
.dash-ops-queue-panel--am .dash-queue-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.dash-queue-kpis--staff .dash-queue-kpi--active {
    padding-right: 4.75rem
}

.staff-dash .dash-ops-queue-panel .dash-queue-kpis {
    margin-bottom: 0
}

.admin-dash .dash-ops-queue-panel {
    margin-bottom: .25rem
}

.admin-dash .dash-ops-queue-panel .dash-queue-kpis--admin {
    margin-bottom: 0
}

.staff-dash {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    --dash-kpi-val-size: 1.2rem;
    --dash-section-title: 16px
}

.staff-dash>.dash-queue-kpis--staff:first-child,
.staff-dash>.dash-queue-kpis:first-child {
    margin-bottom: 1.15rem
}

.staff-dash .card {
    border-color: rgba(230, 220, 196, .95);
    box-shadow: 0 4px 18px rgba(13, 27, 62, .04);
    padding: 1rem 1.05rem
}

.staff-dash .card-title {
    font-size: var(--dash-section-title);
    font-weight: 600;
    margin-bottom: .5rem;
    color: var(--text);
    letter-spacing: -.01em
}

.staff-dash .dash-card-head-block__title {
    font-size: var(--dash-section-title) !important;
    margin-bottom: .12rem !important
}

.staff-dash .dash-card-head-block__sub {
    font-size: 11px
}

.staff-dash .dash-section-head {
    margin-bottom: .75rem
}

.staff-dash .dash-section-head__title {
    font-size: 1rem
}

.staff-dash .dash-section-head__sub {
    font-size: 12px
}

.staff-dash .member-section-sub {
    font-size: 12px;
    color: var(--muted);
    margin: .15rem 0 0;
    line-height: 1.45
}

.staff-dash .grid-2,
.staff-dash .grid-3 {
    margin-bottom: 0
}

.staff-dash .dash-analytics-section {
    margin-bottom: 1.15rem
}

.staff-dash .dash-queue-kpis {
    margin-bottom: 0
}

.staff-dash .staff-dash-metric {
    font-size: var(--dash-kpi-val-size);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -.02em
}

.staff-dash .kpi-val {
    font-size: var(--dash-kpi-val-size)
}

.staff-dash .kpi-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: .2rem
}

.staff-dash .report-row {
    font-size: 12px
}

.staff-dash .report-row strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.staff-dash .dash-analytics-card--stat,
.staff-dash .dash-analytics-card--mix {
    min-height: 0
}

.staff-dash .staff-dash-metrics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    margin-top: .85rem;
    margin-bottom: .85rem;
    align-items: stretch;
    gap: .65rem
}

.staff-dash .staff-dash-metrics-grid>.staff-dash-metric-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1
}

.staff-dash .staff-dash-metrics-grid>.staff-dash-metric-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2
}

.staff-dash .staff-dash-metrics-grid>.staff-dash-metric-card--mix {
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 100%
}

.staff-dash .staff-dash-metrics-grid>.staff-dash-metric-card:not(.staff-dash-metric-card--mix) {
    height: 100%;
    min-height: 0
}

.staff-dash .staff-dash-metric-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem .95rem;
    min-height: 0;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.staff-dash .staff-dash-metric-card:not(.staff-dash-metric-card--mix) {
    flex-direction: row;
    align-items: center;
    gap: .7rem;
    padding: .78rem .9rem
}

.staff-dash .staff-dash-metric-card[role="button"] {
    cursor: pointer
}

.staff-dash .staff-dash-metric-card[role="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(26, 45, 90, .09);
    border-color: rgba(26, 45, 90, .16)
}

.staff-dash .staff-dash-metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--staff-metric-accent, var(--primary));
    opacity: .88
}

.staff-dash .staff-dash-metric-card__head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    flex-shrink: 0
}

.staff-dash .staff-dash-metric-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--staff-metric-icon-bg, rgba(26, 45, 90, .1));
    color: var(--staff-metric-icon-fg, var(--primary));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6)
}

.staff-dash .staff-dash-metric-card__icon svg {
    width: 20px;
    height: 20px
}

.staff-dash .staff-dash-metric-card__titles {
    flex: 1;
    min-width: 0;
    padding-top: .05rem
}

.staff-dash .staff-dash-metric-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    letter-spacing: -.01em
}

.staff-dash .staff-dash-metric-card__sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: .18rem;
    line-height: 1.35
}

.staff-dash .staff-dash-metric-card:not(.staff-dash-metric-card--mix) .staff-dash-metric-card__head {
    flex: 1;
    min-width: 0
}

.staff-dash .staff-dash-metric-card:not(.staff-dash-metric-card--mix) .staff-dash-metric-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px
}

.staff-dash .staff-dash-metric-card:not(.staff-dash-metric-card--mix) .staff-dash-metric-card__icon svg {
    width: 18px;
    height: 18px
}

.staff-dash .staff-dash-metric-card__value {
    margin-top: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.025em;
    line-height: 1.15;
    word-break: break-word;
    flex-shrink: 0;
    text-align: right
}

.staff-dash .staff-dash-metric-card--mix .staff-dash-metric-card__value {
    text-align: left
}

.staff-dash .staff-dash-metric-card--mix {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: .8rem .9rem;
    height: 100%
}

.staff-dash .staff-dash-metric-card--mix .staff-dash-metric-card__head {
    flex-shrink: 0
}

.staff-dash .staff-dash-metric-card--mix .staff-dash-metric-card__mix {
    margin-top: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
    min-height: 0
}

.staff-dash .staff-dash-metric-card--mix .dash-request-mix__row {
    padding: .58rem .65rem;
    border-radius: 10px;
    background: linear-gradient(155deg, #fff 0%, #FBF8F0 100%);
    border: 1px solid rgba(230, 220, 196, .85);
    margin: 0
}

.staff-dash .staff-dash-metric-card--mix .dash-request-mix__val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.staff-dash .staff-dash-recent-card {
    margin-bottom: .85rem
}

.staff-dash .member-recent-requests-table-wrap {
    margin-top: .15rem
}

.staff-dash .staff-dash-twin-charts-row {
    margin-top: .85rem;
    margin-bottom: .85rem;
    align-items: stretch;
    gap: .85rem
}

.staff-dash .staff-dash-twin-chart-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    margin-bottom: 0;
    padding: 1rem 1.05rem 1.05rem;
    border-radius: 14px
}

.staff-dash .staff-dash-twin-chart-card.dash-analytics-card--chart {
    min-height: 372px
}

.staff-dash .staff-dash-twin-chart-card .dash-card-head-block {
    flex-shrink: 0;
    margin-bottom: .65rem
}

.staff-twin-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-height: 0
}

.staff-twin-chart__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    flex-shrink: 0
}

.staff-twin-chart__stats--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.staff-twin-chart__stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .58rem .65rem;
    border-radius: 11px;
    border: 1px solid rgba(230, 220, 196, .9);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 8px rgba(13, 27, 62, .03);
    min-width: 0
}

.staff-twin-chart__stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted)
}

.staff-twin-chart__stat-value {
    font-size: .94rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word
}

.staff-twin-chart__stat-hint {
    font-size: 10px;
    font-weight: 600;
    color: var(--text2)
}

.staff-twin-chart__stat--green .staff-twin-chart__stat-value {
    color: #1F8A63
}

.staff-twin-chart__stat--navy .staff-twin-chart__stat-value {
    color: #2A4F8A
}

.staff-twin-chart__stat--gold .staff-twin-chart__stat-value {
    color: #8a6d1f
}

.staff-twin-chart__stat--danger .staff-twin-chart__stat-value {
    color: #A93A4A
}

.staff-twin-chart__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    padding: .55rem .6rem .5rem;
    border-radius: 12px;
    border: 1px solid rgba(214, 223, 240, .88);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(244, 251, 248, .92) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9)
}

.staff-twin-chart__panel--funnel {
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(247, 249, 254, .92) 100%)
}

.staff-twin-chart__chart {
    width: 100%;
    height: 142px;
    flex-shrink: 0;
    display: block;
    overflow: visible
}

.staff-twin-chart__grid-line {
    stroke: rgba(13, 27, 62, .06);
    stroke-width: .55;
    vector-effect: non-scaling-stroke
}

.staff-twin-chart__point--peak circle {
    filter: drop-shadow(0 2px 3px rgba(31, 138, 99, .28))
}

.staff-twin-chart__labels {
    display: flex;
    justify-content: space-between;
    gap: .12rem;
    margin-top: .38rem;
    flex-shrink: 0
}

.staff-twin-chart__labels span {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.staff-twin-chart__labels span.is-peak {
    color: #1F8A63;
    font-weight: 800
}

.staff-funnel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .48rem;
    min-height: 0
}

.staff-funnel__row {
    padding: .5rem .55rem;
    border-radius: 10px;
    border: 1px solid rgba(230, 220, 196, .85);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 1px 4px rgba(13, 27, 62, .03)
}

.staff-funnel__head {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .3rem
}

.staff-funnel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--step-color, var(--primary));
    flex-shrink: 0
}

.staff-funnel__label {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    line-height: 1.3
}

.staff-funnel__value {
    font-size: 13px;
    font-weight: 800;
    color: var(--text)
}

.staff-funnel__bar {
    height: 6px;
    border-radius: 999px;
    background: #f0ebe0;
    overflow: hidden
}

.staff-funnel__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--step-color, var(--primary));
    transition: width .25s ease
}

.staff-funnel__meta {
    display: block;
    margin-top: .22rem;
    font-size: 9px;
    font-weight: 600;
    color: var(--muted)
}

.staff-dash .staff-dash-collection-card {
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(31, 138, 99, .07), transparent 55%),
        linear-gradient(180deg, #fff 0%, #f7fbf9 100%)
}

.staff-dash .staff-dash-funnel-card {
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(42, 79, 138, .07), transparent 55%),
        linear-gradient(180deg, #fff 0%, #f7f9fe 100%)
}

.staff-dash .staff-dash-risk-grid {
    margin-top: .85rem;
    margin-bottom: .85rem;
    align-items: stretch;
    gap: .85rem
}

.staff-dash .staff-dash-risk-chart-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    margin-bottom: 0;
    padding-bottom: 1.1rem
}

.staff-dash .staff-dash-risk-chart-card.dash-analytics-card--chart {
    min-height: 320px
}

.staff-dash .staff-dash-risk-chart-card .dash-card-head-block {
    flex-shrink: 0;
    margin-bottom: .65rem
}

.staff-dash .staff-dash-risk-chart-card .dash-chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    justify-content: space-between;
    padding: .2rem 0 .15rem
}

.staff-dash .staff-dash-risk-chart-card .dash-chart-body--risk,
.staff-dash .staff-dash-risk-chart-card .dash-chart-body--aging,
.staff-dash .staff-dash-risk-chart-card .dash-chart-body--dual {
    min-height: 0
}

.staff-dash .staff-dash-risk-chart-card .dash-risk-list--cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .55rem
}

.staff-dash .staff-dash-risk-chart-card .dash-risk-card {
    padding: .58rem .65rem
}

.staff-dash .staff-dash-risk-chart-card .dash-chart-body--aging .dash-aging-grid {
    flex-shrink: 0
}

.staff-dash .staff-dash-risk-chart-card .dash-chart-body--aging .dash-aging-stack {
    margin-top: .65rem;
    margin-bottom: .65rem
}

.staff-dash .staff-dash-risk-chart-card .dash-aging-foot {
    margin-top: auto;
    padding-top: .25rem
}

.staff-dash .staff-dash-risk-chart-card .dash-dual-chart {
    flex: 1;
    min-height: 0;
    max-height: 168px;
    padding-top: .35rem;
    padding-bottom: .25rem
}

.staff-dash .staff-dash-risk-chart-card .dash-dual-chart__pair {
    min-height: 120px
}

.staff-dash .staff-dash-risk-chart-card .dash-dual-bars-legend {
    flex-shrink: 0;
    margin-top: .55rem;
    padding-top: .15rem
}

.dash-portfolio-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem
}

.dash-portfolio-kpi {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.05rem .75rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(13, 27, 62, .05);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.dash-portfolio-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(67, 24, 255, .1);
    border-color: rgba(67, 24, 255, .18)
}

.dash-portfolio-kpi__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted)
}

.dash-portfolio-kpi__val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -.02em
}

.dash-portfolio-kpi__hint {
    font-size: 10px;
    color: var(--green);
    margin-bottom: .35rem
}

.dash-portfolio-kpi__spark {
    margin-top: auto;
    height: 40px
}

.dash-sparkline {
    display: block;
    width: 100%;
    height: 100%
}

.dash-analytics {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.dash-analytics-section {
    margin-bottom: 1.35rem
}

.dash-section-head {
    margin: 0 0 .85rem;
    padding: .15rem 0 .25rem
}

.dash-section-head__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -.01em
}

.dash-section-head__sub {
    margin: .2rem 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45
}

.dash-analytics-grid {
    margin-bottom: .85rem
}

.dash-analytics-grid--last {
    margin-bottom: 0
}

.dash-analytics-grid--full {
    display: block;
    width: 100%;
    margin-bottom: .85rem
}

.admin-dash-disbursements-wrap {
    margin-top: .15rem
}

.admin-dash-disbursements-card {
    width: 100%;
    margin-bottom: 0
}

.admin-dash-disbursements-card .dash-chart-body--bars {
    min-height: 280px
}

.admin-dash-disbursements-card .dash-bar-chart {
    min-height: 260px;
    gap: .5rem;
    padding: .25rem .15rem 0
}

.admin-dash-disbursements-card .dash-bar-chart__track {
    height: var(--disburse-track-height, 210px);
    min-height: var(--disburse-track-height, 210px);
    flex: 0 0 auto
}

.admin-dash-disbursements-card .dash-bar-chart__bar,
.dash-bar-chart__bar.bar {
    width: 100%;
    max-width: 52px;
    min-width: 10px
}

.disburse-chart-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: .85rem
}

.disburse-chart-summary__item {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .65rem .75rem;
    border-radius: 12px;
    border: 1px solid rgba(214, 223, 240, .95);
    background: linear-gradient(145deg, #fff 0%, #f6f9ff 100%);
    box-shadow: 0 4px 14px rgba(13, 27, 62, .04)
}

.disburse-chart-summary__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted)
}

.disburse-chart-summary__value {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
    line-height: 1.2
}

.disburse-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 220px;
    text-align: center;
    padding: 1rem
}

.disburse-chart-empty--admin {
    min-height: 280px
}

.disburse-chart-body--admin {
    padding-top: .1rem
}

.dash-bar-chart--disburse-admin {
    min-height: 250px
}

.dash-bar-chart__col--peak .dash-bar-chart__bar {
    background: linear-gradient(180deg, #3dd49a 0%, var(--green) 45%, var(--primary) 100%);
    box-shadow: 0 8px 18px rgba(31, 138, 99, .28)
}

.dash-bar-chart__col--peak .dash-bar-chart__label {
    color: var(--green);
    font-weight: 700
}

.admin-dash-disbursements-card .dash-bar-chart__amount {
    font-size: 10px
}

.admin-dash-disbursements-card .dash-bar-chart__label {
    font-size: 10px;
    font-weight: 600
}

.admin-dash-portfolio-top {
    margin-bottom: .85rem
}

.admin-dash-twin-charts-row {
    align-items: stretch
}

.admin-dash-twin-charts-row>.admin-dash-twin-chart-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    margin-bottom: 0;
    padding: 1rem 1.05rem 1.05rem
}

.admin-dash .admin-dash-twin-chart-card.dash-analytics-card--chart {
    min-height: 360px
}

.admin-dash .admin-dash-twin-chart-card .dash-card-head-block {
    flex-shrink: 0;
    margin-bottom: .65rem
}

.admin-dash .staff-twin-chart {
    flex: 1;
    min-height: 0
}

.admin-dash .staff-twin-chart--admin .staff-twin-chart__chart {
    height: 168px
}

.admin-dash .staff-twin-chart--admin .staff-twin-chart__panel--funnel {
    min-height: 220px
}

.admin-dash-collection-card {
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(31, 138, 99, .09), transparent 55%),
        linear-gradient(180deg, #fff 0%, #f7fbf9 100%)
}

.admin-dash-funnel-card {
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(42, 79, 138, .09), transparent 55%),
        linear-gradient(180deg, #fff 0%, #f7f9fe 100%)
}

.admin-twin-chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-height: 360px
}

.admin-twin-chart-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    flex-shrink: 0
}

.admin-twin-chart-kpi {
    display: flex;
    flex-direction: column;
    gap: .08rem;
    padding: .58rem .68rem;
    border-radius: 12px;
    border: 1px solid rgba(214, 223, 240, .95);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 4px 14px rgba(13, 27, 62, .04);
    min-width: 0
}

.admin-twin-chart-kpi__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted)
}

.admin-twin-chart-kpi__value {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--text);
    line-height: 1.15;
    word-break: break-word
}

.admin-twin-chart-kpi__hint {
    font-size: 10px;
    font-weight: 600;
    color: var(--text2)
}

.admin-twin-chart-kpi--green .admin-twin-chart-kpi__value {
    color: #1F8A63
}

.admin-twin-chart-kpi--navy .admin-twin-chart-kpi__value {
    color: #2A4F8A
}

.admin-twin-chart-kpi--gold .admin-twin-chart-kpi__value {
    color: #8a6d1f
}

.admin-twin-chart-kpi--danger .admin-twin-chart-kpi__value {
    color: #A93A4A
}

.admin-collection-pro {
    min-height: 0
}

.admin-collection-pro__chart-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    padding: .55rem .65rem .45rem;
    border-radius: 14px;
    border: 1px solid rgba(214, 223, 240, .95);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(244, 251, 248, .9) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9)
}

.admin-collection-pro__chart {
    flex: 1;
    width: 100%;
    min-height: 210px;
    display: block
}

.admin-collection-pro__grid-line {
    stroke: rgba(13, 27, 62, .06);
    stroke-width: .6;
    vector-effect: non-scaling-stroke
}

.admin-collection-pro__point--peak circle {
    filter: drop-shadow(0 2px 4px rgba(31, 138, 99, .35))
}

.admin-collection-pro__labels {
    display: flex;
    justify-content: space-between;
    gap: .2rem;
    margin-top: .45rem;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted)
}

.admin-collection-pro__labels span {
    flex: 1;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.admin-collection-pro__labels span.is-peak {
    color: #1F8A63;
    font-weight: 800
}

.admin-funnel-pro {
    min-height: 0
}

.admin-funnel-pro__stages {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    min-height: 250px;
    padding: .2rem 0
}

.admin-funnel-pro__connector {
    display: flex;
    justify-content: center;
    height: .55rem;
    flex-shrink: 0
}

.admin-funnel-pro__connector span {
    width: 2px;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(42, 79, 138, .28), rgba(42, 79, 138, .08))
}

.admin-funnel-pro__stage {
    display: flex;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: .12rem 0
}

.admin-funnel-pro__stage-inner {
    width: var(--stage-width, 100%);
    max-width: 100%;
    min-height: 3.4rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .65rem;
    padding: .62rem .75rem;
    border-radius: 13px;
    border: 1px solid color-mix(in srgb, var(--stage-color) 24%, #dce4f2);
    background:
        linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--stage-color) 6%, #f7f9fe) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 8px 20px rgba(13, 27, 62, .06);
    transition: transform .22s ease, box-shadow .22s ease
}

.admin-funnel-pro__stage-inner:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 12px 24px rgba(13, 27, 62, .09)
}

.admin-funnel-pro__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    color: var(--stage-color);
    background: color-mix(in srgb, var(--stage-color) 14%, #fff);
    flex-shrink: 0
}

.admin-funnel-pro__icon svg {
    width: 1rem;
    height: 1rem
}

.admin-funnel-pro__copy {
    display: flex;
    flex-direction: column;
    gap: .08rem;
    min-width: 0
}

.admin-funnel-pro__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text2)
}

.admin-funnel-pro__metrics {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    flex-wrap: wrap
}

.admin-funnel-pro__value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.03em;
    line-height: 1
}

.admin-funnel-pro__share {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted)
}

.admin-funnel-pro__conv {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--stage-color);
    white-space: nowrap
}

.collection-chart-empty,
.funnel-chart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 260px;
    text-align: center;
    padding: 1rem
}

.collection-chart-empty--admin,
.funnel-chart-empty--admin {
    min-height: 260px
}

.dash-analytics-card {
    border-color: rgba(230, 220, 196, .95);
    box-shadow: 0 4px 18px rgba(13, 27, 62, .04)
}

.dash-analytics-card .card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: .65rem
}

.dash-card-head-block {
    margin-bottom: .65rem
}

.dash-card-head-block__title {
    margin-bottom: .15rem !important;
    font-size: 16px !important
}

.dash-card-head-block__sub {
    margin: 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4
}

.staff-dash .dash-analytics-card .card-title,
.staff-dash .dash-card-head-block__title {
    font-size: var(--dash-section-title) !important;
    margin-bottom: .5rem
}

.staff-dash .dash-card-head-block__title {
    margin-bottom: .12rem !important
}

.dash-analytics-card--chart,
.dash-analytics-card--mix {
    display: flex;
    flex-direction: column;
    min-height: 300px
}

.dash-analytics-card--mix .dash-request-mix--panel {
    flex: 1;
    justify-content: center
}

.staff-dash .staff-dash-metric-card.dash-analytics-card--stat,
.staff-dash .staff-dash-metric-card.dash-analytics-card--mix {
    min-height: 0
}

.dash-analytics-card--chart .card-title {
    flex-shrink: 0
}

.dash-chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}

.dash-chart-body--donut,
.dash-chart-body--bars {
    justify-content: stretch
}

.dash-chart-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--muted);
    min-height: 200px
}

.donut-wrap--fill {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 220px
}

.dash-donut-chart {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto
}

.dash-donut-chart--fill {
    max-width: min(100%, 240px);
    min-height: 160px
}

.donut-legend--grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem
}

.donut-legend--grid .legend-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .2rem;
    margin-bottom: 0;
    font-size: 10px;
    padding: .45rem .35rem;
    border-radius: 10px;
    background: rgba(251, 248, 240, .75);
    border: 1px solid var(--border)
}

.donut-legend--grid .legend-item strong {
    font-size: 14px;
    color: var(--text);
    line-height: 1.1
}

.loan-status-3d-wrap {
    padding: .15rem 0 .35rem
}

.loan-status-3d {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1rem 1.15rem;
    align-items: center;
    min-height: 240px
}

.loan-status-3d__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: .5rem 0 1.2rem
}

.loan-status-3d__donut-tilt {
    position: relative;
    z-index: 2;
    transform: perspective(640px) rotateX(22deg) rotateZ(-3deg);
    transform-style: preserve-3d;
    filter: drop-shadow(0 20px 18px rgba(13, 27, 62, .2));
    transition: transform .35s ease
}

.loan-status-3d-wrap:hover .loan-status-3d__donut-tilt {
    transform: perspective(640px) rotateX(16deg) rotateZ(0deg) scale(1.02)
}

.loan-status-3d__chart {
    display: block;
    width: 100%;
    max-width: 250px;
    height: auto;
    margin: 0 auto
}

.loan-status-3d__segment {
    transition: stroke-width .25s ease, opacity .25s ease
}

.loan-status-3d__floor {
    position: absolute;
    left: 50%;
    bottom: .35rem;
    width: min(72%, 200px);
    height: 22px;
    transform: translateX(-50%) perspective(320px) rotateX(72deg);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(13, 27, 62, .16) 0%, rgba(13, 27, 62, .04) 55%, transparent 72%);
    pointer-events: none
}

.loan-status-3d__stats {
    display: flex;
    flex-direction: column;
    gap: .65rem
}

.loan-status-3d__stat {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: .75rem;
    align-items: center;
    padding: .7rem .85rem .75rem;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff 0%, #f6f8fd 55%, #eef2fa 100%);
    border: 1px solid rgba(214, 223, 240, .95);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 10px 22px rgba(13, 27, 62, .07),
        0 4px 0 rgba(13, 27, 62, .04);
    transform: perspective(520px) rotateX(6deg);
    transform-style: preserve-3d;
    transition: transform .28s ease, box-shadow .28s ease
}

.loan-status-3d__stat:hover {
    transform: perspective(520px) rotateX(2deg) translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 14px 28px rgba(13, 27, 62, .1),
        0 5px 0 rgba(13, 27, 62, .05)
}

.loan-status-3d__stat::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -5px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(13, 27, 62, .12), transparent 70%);
    z-index: -1
}

.loan-status-3d__stat-visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 52px
}

.loan-status-3d__stat-pillar {
    position: relative;
    width: 2.1rem;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.loan-status-3d__stat-pillar-face {
    display: block;
    width: 100%;
    height: var(--loan-stat-bar, 20%);
    min-height: 10px;
    border-radius: 6px 6px 4px 4px;
    background: linear-gradient(180deg, var(--loan-stat-accent) 0%, var(--loan-stat-accent-dark) 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .35),
        inset 0 -3px 6px rgba(0, 0, 0, .12),
        4px 0 0 rgba(0, 0, 0, .08),
        0 8px 14px rgba(13, 27, 62, .14);
    transform: perspective(120px) rotateY(-18deg);
    transform-origin: bottom center;
    transition: height .45s cubic-bezier(.22, 1, .36, 1)
}

.loan-status-3d__stat-pillar-top {
    position: absolute;
    bottom: calc(var(--loan-stat-bar, 20%) - 4px);
    left: 50%;
    width: 2.1rem;
    height: .55rem;
    margin-left: -1.05rem;
    border-radius: 50%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--loan-stat-accent) 75%, #fff), var(--loan-stat-accent));
    box-shadow: 0 2px 4px rgba(13, 27, 62, .12);
    transform: perspective(100px) rotateX(58deg);
    transform-origin: center bottom;
    transition: bottom .45s cubic-bezier(.22, 1, .36, 1)
}

.loan-status-3d__stat-body {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0
}

.loan-status-3d__stat-pct {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--loan-stat-accent)
}

.loan-status-3d__stat-count {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.03em;
    line-height: 1.1
}

.loan-status-3d__stat-label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600
}

.loan-status-3d__stat--approved {
    border-left: 3px solid #1F8A63
}

.loan-status-3d__stat--review {
    border-left: 3px solid #2A4F8A
}

.loan-status-3d__stat--declined {
    border-left: 3px solid #A93A4A
}

.admin-dash-loan-status-card {
    overflow: hidden;
    background:
        radial-gradient(ellipse 90% 70% at 0% 0%, rgba(31, 138, 99, .07), transparent 55%),
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(42, 79, 138, .08), transparent 50%),
        linear-gradient(180deg, #fff 0%, #f8faff 100%)
}

.loan-status-pro {
    display: flex;
    flex-direction: column;
    gap: .85rem
}

.loan-status-pro__insight {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .7rem .85rem;
    border-radius: 12px;
    border: 1px solid rgba(214, 223, 240, .95);
    background: linear-gradient(135deg, #fff 0%, #f5f8fe 100%)
}

.loan-status-pro__insight--good {
    border-color: color-mix(in srgb, #1F8A63 28%, #dce4f2);
    background: linear-gradient(135deg, rgba(31, 138, 99, .08) 0%, #f4fbf8 55%, #fff 100%)
}

.loan-status-pro__insight--warn {
    border-color: color-mix(in srgb, #C9A84C 35%, #dce4f2);
    background: linear-gradient(135deg, rgba(201, 168, 76, .1) 0%, #fdfaf2 55%, #fff 100%)
}

.loan-status-pro__insight--danger {
    border-color: color-mix(in srgb, #A93A4A 30%, #dce4f2);
    background: linear-gradient(135deg, rgba(169, 58, 74, .08) 0%, #fdf5f6 55%, #fff 100%)
}

.loan-status-pro__insight--info,
.loan-status-pro__insight--muted {
    border-color: rgba(214, 223, 240, .95);
    background: linear-gradient(135deg, #f7f9fd 0%, #fff 100%)
}

.loan-status-pro__insight-badge {
    display: inline-flex;
    align-items: center;
    padding: .28rem .62rem;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(26, 45, 90, .08);
    white-space: nowrap
}

.loan-status-pro__insight--good .loan-status-pro__insight-badge {
    color: #0f5c40;
    background: rgba(31, 138, 99, .14)
}

.loan-status-pro__insight--warn .loan-status-pro__insight-badge {
    color: #7a5f12;
    background: rgba(201, 168, 76, .18)
}

.loan-status-pro__insight--danger .loan-status-pro__insight-badge {
    color: #6e2430;
    background: rgba(169, 58, 74, .14)
}

.loan-status-pro__insight-copy {
    flex: 1 1 12rem;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text2)
}

.loan-status-pro__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem
}

.loan-status-pro__kpi {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .65rem;
    border-radius: 11px;
    border: 1px solid rgba(214, 223, 240, .9);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 4px 12px rgba(13, 27, 62, .04)
}

.loan-status-pro__kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted)
}

.loan-status-pro__kpi strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--text);
    line-height: 1.1
}

.loan-status-pro__kpi--approved strong {
    color: #1F8A63
}

.loan-status-pro__kpi--review strong {
    color: #2A4F8A
}

.loan-status-pro__kpi--declined strong {
    color: #A93A4A
}

.loan-status-pro__body {
    padding: 0
}

.loan-status-pro__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 1rem 1.2rem;
    min-height: 280px
}

.loan-status-pro__stage {
    position: relative;
    padding: .35rem .25rem 0;
    min-height: 250px
}

.loan-status-pro__stage-glow {
    position: absolute;
    inset: 8% 10% auto;
    height: 58%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(42, 79, 138, .12) 0%, transparent 72%);
    pointer-events: none;
    z-index: 0
}

.loan-status-pro__donut-tilt {
    transform: perspective(720px) rotateX(20deg) rotateZ(-2deg);
    filter: drop-shadow(0 24px 22px rgba(13, 27, 62, .18))
}

.loan-status-pro:hover .loan-status-pro__donut-tilt {
    transform: perspective(720px) rotateX(14deg) rotateZ(0deg) scale(1.03)
}

.loan-status-pro__chart {
    max-width: 270px
}

.loan-status-pro__segment {
    opacity: 0;
    animation: loanStatusSegmentIn .7s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: var(--segment-delay, 0s)
}

@keyframes loanStatusSegmentIn {
    from {
        opacity: 0;
        stroke-width: 0
    }

    to {
        opacity: 1;
        stroke-width: 26
    }
}

.loan-status-pro__floor {
    bottom: 2.8rem;
    width: min(76%, 220px);
    height: 24px
}

.loan-status-pro__stack {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(88%, 240px);
    height: 8px;
    margin: .15rem auto 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(13, 27, 62, .06);
    box-shadow: inset 0 1px 2px rgba(13, 27, 62, .08)
}

.loan-status-pro__stack--empty span {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(13, 27, 62, .05)
}

.loan-status-pro__stack-seg {
    display: block;
    height: 100%;
    min-width: 2px;
    transition: width .45s cubic-bezier(.22, 1, .36, 1)
}

.loan-status-pro__stack-seg--approved {
    background: linear-gradient(90deg, #3dd49a, #1F8A63)
}

.loan-status-pro__stack-seg--review {
    background: linear-gradient(90deg, #5b8fd8, #2A4F8A)
}

.loan-status-pro__stack-seg--declined {
    background: linear-gradient(90deg, #d45a6a, #A93A4A)
}

.loan-status-pro__legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem .7rem;
    margin-top: .55rem
}

.loan-status-pro__legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em
}

.loan-status-pro__legend-item::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: currentColor
}

.loan-status-pro__legend-item--approved {
    color: #1F8A63
}

.loan-status-pro__legend-item--review {
    color: #2A4F8A
}

.loan-status-pro__legend-item--declined {
    color: #A93A4A
}

.loan-status-pro__stats {
    display: flex;
    flex-direction: column;
    gap: .7rem
}

.loan-status-pro__stat {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: .8rem;
    align-items: center;
    width: 100%;
    padding: .78rem .9rem;
    border-radius: 14px;
    border: 1px solid rgba(214, 223, 240, .95);
    background: linear-gradient(145deg, #fff 0%, #f7f9fe 58%, #eef2fa 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 10px 22px rgba(13, 27, 62, .07),
        0 4px 0 rgba(13, 27, 62, .04);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transform: perspective(560px) rotateX(5deg);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.loan-status-pro__stat:hover,
.loan-status-pro__stat:focus-visible {
    transform: perspective(560px) rotateX(1deg) translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 14px 28px rgba(13, 27, 62, .1),
        0 5px 0 rgba(13, 27, 62, .05);
    border-color: color-mix(in srgb, var(--loan-stat-accent) 35%, #dce4f2);
    outline: none
}

.loan-status-pro__stat--approved {
    border-left: 3px solid #1F8A63
}

.loan-status-pro__stat--review {
    border-left: 3px solid #2A4F8A
}

.loan-status-pro__stat--declined {
    border-left: 3px solid #A93A4A
}

.loan-status-pro__ring {
    position: relative;
    width: 3.5rem;
    height: 3.5rem
}

.loan-status-pro__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.loan-status-pro__ring-track {
    fill: none;
    stroke: rgba(13, 27, 62, .08);
    stroke-width: 3
}

.loan-status-pro__ring-fill {
    fill: none;
    stroke: var(--loan-stat-accent);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset .55s cubic-bezier(.22, 1, .36, 1)
}

.loan-status-pro__ring-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--loan-stat-accent)
}

.loan-status-pro__ring-icon svg {
    width: 1rem;
    height: 1rem;
    transform: none
}

.loan-status-pro__stat-copy {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0
}

.loan-status-pro__stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.loan-status-pro__stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text2)
}

.loan-status-pro__stat-pct {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--loan-stat-accent)
}

.loan-status-pro__stat-count {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--text);
    line-height: 1.05
}

.loan-status-pro__stat-bar {
    display: block;
    width: 100%;
    height: 5px;
    margin-top: .15rem;
    border-radius: 999px;
    background: rgba(13, 27, 62, .07);
    overflow: hidden
}

.loan-status-pro__stat-bar-fill {
    display: block;
    height: 100%;
    width: var(--loan-stat-fill, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--loan-stat-accent), var(--loan-stat-accent-dark));
    transition: width .5s cubic-bezier(.22, 1, .36, 1)
}

.loan-status-pro--empty {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center
}

.loan-status-pro__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .55rem;
    max-width: 22rem;
    padding: 1.2rem 1rem
}

.loan-status-pro__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: rgba(26, 45, 90, .08);
    color: var(--primary)
}

.loan-status-pro__empty-icon svg {
    width: 1.35rem;
    height: 1.35rem
}

.loan-status-pro__empty strong {
    font-size: 14px;
    color: var(--text)
}

.loan-status-pro__empty p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted)
}

.dash-bar-chart {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: .35rem;
    min-height: 220px;
    padding-top: .15rem
}

.dash-bar-chart__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    height: 100%
}

.dash-bar-chart__amount {
    font-size: 9px;
    font-weight: 600;
    color: var(--text2);
    line-height: 1.1;
    min-height: 1.1em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.dash-bar-chart__track {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: var(--disburse-track-height, 150px);
    min-height: var(--disburse-track-height, 150px)
}

.dash-bar-chart__bar {
    width: 100%;
    max-width: 28px;
    min-width: 8px;
    opacity: 1;
    transition: height .35s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease
}

.dash-bar-chart__bar.bar {
    width: 100%
}

.dash-bar-chart__label {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.dash-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--muted);
    margin-top: .35rem;
    gap: .25rem
}

.dash-chart-labels span {
    flex: 1;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mini-chart--disburse {
    height: 120px;
    gap: 6px
}

.bar--blue,
.bar--primary {
    background: linear-gradient(180deg, var(--info) 0%, var(--primary) 100%);
    opacity: 1;
    border-radius: 4px 4px 0 0;
    min-width: 0
}

.dash-request-mix {
    display: flex;
    flex-direction: column;
    gap: .55rem
}

.dash-request-mix__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: 12px;
    color: var(--text2)
}

.dash-request-mix__left {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0
}

.dash-request-mix__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.dash-request-mix__icon svg {
    width: 16px;
    height: 16px
}

.dash-request-mix__val {
    font-size: 13px;
    color: var(--text)
}

.dash-collection-chart {
    width: 100%;
    height: 160px;
    background: linear-gradient(180deg, rgba(251, 248, 240, .95), #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px
}

.dash-chart-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: .65rem
}

.dash-chart-stat {
    padding: .55rem .65rem;
    border-radius: 10px;
    background: linear-gradient(155deg, #fff 0%, #FBF8F0 100%);
    border: 1px solid var(--border)
}

.dash-chart-stat__label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .15rem
}

.dash-chart-stat__value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    word-break: break-word
}

.dash-area-chart {
    width: 100%;
    flex: 1;
    min-height: 180px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(251, 248, 240, .9), #fff);
    display: block
}

.dash-chart-body--area {
    min-height: 260px
}

.dash-chart-body--funnel,
.dash-chart-body--risk,
.dash-chart-body--aging,
.dash-chart-body--dual {
    min-height: 240px
}

.dash-funnel--steps {
    gap: .7rem
}

.dash-funnel-step {
    padding: .55rem .6rem;
    border-radius: 12px;
    background: linear-gradient(155deg, #fff 0%, #FBF8F0 100%);
    border: 1px solid rgba(230, 220, 196, .9)
}

.dash-funnel-step__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem
}

.dash-funnel-step__marker {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0
}

.dash-funnel-step__label {
    flex: 1;
    font-size: 12px;
    color: var(--text2)
}

.dash-funnel-step__value {
    font-size: 14px;
    color: var(--text)
}

.dash-funnel-step__track {
    height: 8px;
    border-radius: 999px;
    background: #f0ebe0;
    overflow: hidden
}

.dash-funnel-step__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width .25s ease
}

.dash-funnel-step__meta {
    display: block;
    margin-top: .25rem;
    font-size: 10px;
    color: var(--muted)
}

.dash-risk-list--cards {
    gap: .65rem
}

.dash-risk-card {
    padding: .65rem .7rem;
    border-radius: 12px;
    background: linear-gradient(155deg, #fff 0%, #FBF8F0 100%);
    border: 1px solid rgba(230, 220, 196, .9);
    border-left: 4px solid var(--dash-risk-color, var(--info))
}

.dash-risk-card--high {
    box-shadow: inset 0 0 0 1px rgba(169, 58, 74, .08)
}

.dash-risk-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem
}

.dash-risk-card__label {
    font-size: 12px;
    color: var(--text2);
    line-height: 1.35
}

.dash-risk-card__value {
    font-size: 15px;
    color: var(--dash-risk-color, var(--primary))
}

.dash-risk-card__track {
    height: 8px;
    border-radius: 999px;
    background: #f0ebe0;
    overflow: hidden
}

.dash-risk-card__fill {
    display: block;
    height: 100%;
    border-radius: inherit
}

.dash-aging-stack {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: .75rem;
    border: 1px solid var(--border);
    background: #f5f0e6
}

.dash-aging-stack span {
    display: block;
    min-width: 0
}

.dash-aging-foot {
    margin-top: .45rem;
    font-size: 11px;
    color: var(--muted);
    text-align: center
}

.dash-dual-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: .45rem;
    min-height: 200px;
    padding-top: .15rem
}

.dash-dual-chart__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem
}

.dash-dual-chart__pair {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: 160px
}

.dash-dual-chart__bar {
    display: block;
    width: 42%;
    max-width: 16px;
    min-width: 8px;
    border-radius: 4px 4px 0 0
}

.dash-dual-chart__bar--disb {
    background: linear-gradient(180deg, var(--info) 0%, var(--primary) 100%)
}

.dash-dual-chart__bar--rec {
    background: linear-gradient(180deg, #2ea67d 0%, var(--green) 100%)
}

.dash-dual-chart__label {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.dash-request-mix--panel .dash-request-mix__row {
    padding: .5rem .55rem;
    border-radius: 10px;
    background: linear-gradient(155deg, #fff 0%, #FBF8F0 100%);
    border: 1px solid rgba(230, 220, 196, .85)
}

.dash-funnel,
.dash-risk-list {
    display: flex;
    flex-direction: column;
    gap: .55rem
}

.dash-funnel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text2);
    margin-bottom: .2rem
}

.dash-aging-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem
}

.dash-aging-box {
    padding: .75rem .65rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--dash-aging-color) 12%, white);
    border: 1px solid color-mix(in srgb, var(--dash-aging-color) 28%, white)
}

.dash-aging-box__label {
    font-size: 11px;
    color: var(--text2);
    margin-bottom: .25rem
}

.dash-aging-box__val {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dash-aging-color)
}

.dash-aging-box__pct {
    font-size: 10px;
    color: var(--muted);
    margin-top: .1rem
}

.dash-dual-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 120px;
    min-width: min(100%, 280px)
}

.dash-dual-bars__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 28px
}

.dash-dual-bars__pair {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 95px
}

.dash-dual-bars__bar {
    display: block;
    width: 8px;
    border-radius: 3px 3px 0 0
}

.dash-dual-bars__bar--disb {
    background: var(--primary)
}

.dash-dual-bars__bar--rec {
    background: var(--green)
}

.dash-dual-bars__label {
    font-size: 10px;
    color: var(--muted)
}

.dash-dual-bars-legend {
    display: flex;
    gap: .6rem;
    font-size: 11px;
    color: var(--text2);
    margin-top: .4rem
}

.dash-dual-bars-legend__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle
}

.dash-dual-bars-legend__swatch--disb {
    background: var(--primary)
}

.dash-dual-bars-legend__swatch--rec {
    background: var(--green)
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem
}

.dash-card-head .card-title {
    margin-bottom: 0
}

.dash-view-all {
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer
}

.dash-view-all:hover {
    text-decoration: underline
}

.dash-applicant-cell {
    display: flex;
    align-items: center;
    gap: .55rem
}

.dash-applicant-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--info));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.dash-live-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    font-size: 11px;
    color: var(--muted);
    margin-top: .5rem;
    padding-top: .75rem
}

.dash-live-footer__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(31, 138, 99, .18)
}

.admin-dash {
    gap: .35rem;
    --dash-section-title: 16px;
    --dash-section-sub: 12px;
    --dash-kpi-val-size: 1.2rem
}

.admin-dash .card {
    padding: 1rem 1.05rem
}

.admin-dash .card-title,
.admin-dash .dash-analytics-card .card-title,
.admin-dash .dash-section-head__title,
.admin-dash .dash-card-head-block__title,
.admin-dash .dash-ops-queue-panel__title {
    font-size: var(--dash-section-title) !important;
    font-weight: 600 !important;
    margin-bottom: .5rem;
    color: var(--text);
    letter-spacing: -.01em;
    line-height: 1.35
}

.admin-dash .dash-section-head__title,
.admin-dash .dash-ops-queue-panel__title {
    color: var(--primary);
    font-weight: 700 !important;
    margin-bottom: 0
}

.admin-dash .dash-card-head-block__title {
    margin-bottom: .12rem !important
}

.admin-dash .admin-dash-quick-sub,
.admin-dash .admin-panel-head__sub,
.admin-dash .dash-section-head__sub,
.admin-dash .dash-card-head-block__sub,
.admin-dash .dash-ops-queue-panel__sub,
.admin-dash .member-section-sub {
    font-size: var(--dash-section-sub);
    color: var(--muted);
    line-height: 1.45
}

.admin-dash .dash-section-head {
    margin-bottom: .75rem
}

.admin-dash .dash-card-head-block {
    margin-bottom: .65rem
}

.admin-dash .dash-queue-kpi__val {
    font-size: var(--dash-kpi-val-size)
}

.admin-dash-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
    padding: 1.35rem 1.45rem;
    border-radius: 16px;
    border: 1px solid rgba(57, 108, 240, .22);
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(67, 24, 255, .14), transparent 55%),
        radial-gradient(ellipse 50% 80% at 0% 100%, rgba(1, 181, 116, .1), transparent 50%),
        linear-gradient(135deg, #f8faff 0%, #eef3ff 48%, #f5f8ff 100%);
    box-shadow: 0 12px 32px rgba(13, 27, 62, .07)
}

.admin-dash-hero__copy {
    flex: 1 1 18rem;
    min-width: 0
}

.admin-dash-hero__eyebrow {
    margin: 0 0 .35rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #396CF0
}

.admin-dash-hero__title {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.02em;
    line-height: 1.2
}

.admin-dash-hero__sub {
    margin: .45rem 0 0;
    font-size: 13px;
    color: var(--text2);
    line-height: 1.5;
    max-width: 36rem
}

.admin-dash-hero__date {
    display: inline-block;
    margin-top: .65rem;
    font-size: 11px;
    color: var(--muted)
}

.admin-dash-hero__pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
    gap: .65rem;
    flex: 0 1 22rem;
    align-self: center
}

.admin-dash-hero__pill {
    padding: .7rem .8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(214, 223, 240, .95);
    box-shadow: 0 4px 14px rgba(13, 27, 62, .05);
    border-left: 3px solid var(--admin-pill-accent, var(--primary))
}

.admin-dash-hero__pill-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .15rem
}

.admin-dash-hero__pill-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
    line-height: 1.2
}

.admin-dash-quick-card {
    margin-bottom: 1.15rem
}

.admin-dash-quick-sub {
    margin: -.25rem 0 .85rem;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45
}

.admin-dash-summary-grid {
    align-items: stretch;
    margin-bottom: 1.25rem;
    gap: 1rem
}

.admin-dash-panel {
    border: 1px solid rgba(214, 223, 240, .95);
    box-shadow: 0 10px 28px rgba(13, 27, 62, .06);
    border-radius: 14px
}

.admin-portfolio-snapshot-card,
.admin-priority-alerts-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin-bottom: 0
}

.admin-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .9rem
}

.admin-panel-head__copy {
    flex: 1 1 12rem;
    min-width: 0
}

.admin-panel-head__sub {
    margin: .2rem 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45
}

.admin-portfolio-snapshot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    flex: 1
}

.admin-snapshot-metric {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .8rem;
    border-radius: 13px;
    border: 1px solid rgba(214, 223, 240, .95);
    background: linear-gradient(145deg, #fff 0%, #f8faff 100%);
    box-shadow: 0 4px 14px rgba(13, 27, 62, .04);
    text-align: left;
    cursor: default;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

button.admin-snapshot-metric {
    width: 100%;
    font: inherit;
    color: inherit;
    cursor: pointer
}

button.admin-snapshot-metric:hover,
button.admin-snapshot-metric:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(13, 27, 62, .08);
    border-color: color-mix(in srgb, var(--snap-accent) 35%, #dce4f2)
}

.admin-snapshot-metric--featured {
    grid-column: 1 / -1;
    padding: 1rem 1.05rem;
    border-color: color-mix(in srgb, var(--snap-accent) 28%, #dce4f2);
    background:
        radial-gradient(ellipse 80% 120% at 100% 0%, color-mix(in srgb, var(--snap-accent) 12%, transparent), transparent 55%),
        linear-gradient(135deg, #fff 0%, #f3f7ff 58%, #eef3fb 100%);
    box-shadow: 0 10px 26px rgba(13, 27, 62, .07)
}

.admin-snapshot-metric__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 11px;
    flex-shrink: 0;
    background: var(--snap-bg, rgba(26, 45, 90, .1));
    color: var(--snap-accent, var(--primary))
}

.admin-snapshot-metric__icon svg {
    width: 1.1rem;
    height: 1.1rem
}

.admin-snapshot-metric--featured .admin-snapshot-metric__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px
}

.admin-snapshot-metric--featured .admin-snapshot-metric__icon svg {
    width: 1.25rem;
    height: 1.25rem
}

.admin-snapshot-metric__body {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0
}

.admin-snapshot-metric__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted)
}

.admin-snapshot-metric__value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
    line-height: 1.2;
    word-break: break-word
}

.admin-snapshot-metric--featured .admin-snapshot-metric__value {
    font-size: 1.35rem
}

.admin-snapshot-metric__hint {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.35
}

.admin-dash-alerts-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}

.admin-dash-alerts-empty {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5
}

.admin-priority-panel__badge {
    display: inline-flex;
    align-items: center;
    padding: .28rem .6rem;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #a93a4a;
    background: rgba(169, 58, 74, .1);
    border: 1px solid rgba(169, 58, 74, .22);
    white-space: nowrap
}

.admin-priority-panel__badge--clear {
    color: var(--green);
    background: rgba(31, 138, 99, .1);
    border-color: rgba(31, 138, 99, .22)
}

.admin-priority-panel--clear {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(31, 138, 99, .28);
    background: linear-gradient(180deg, rgba(31, 138, 99, .06) 0%, rgba(31, 138, 99, .02) 100%)
}

.admin-priority-panel__clear-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--green);
    background: rgba(31, 138, 99, .12);
    border: 2px solid rgba(31, 138, 99, .25);
    margin-bottom: .65rem
}

.admin-priority-panel__clear-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.admin-priority-panel__clear-sub {
    margin: .25rem 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    max-width: 16rem
}

.admin-priority-panel__list {
    display: flex;
    flex-direction: column;
    gap: .65rem
}

.admin-priority-alert {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: .55rem .7rem;
    align-items: start;
    padding: .8rem .85rem;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 4px 14px rgba(13, 27, 62, .04);
    position: relative;
    overflow: hidden
}

.admin-priority-alert::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--priority-accent, var(--primary))
}

.admin-priority-alert--danger {
    --priority-accent: #A93A4A;
    border-color: rgba(169, 58, 74, .22);
    background: linear-gradient(90deg, rgba(169, 58, 74, .06) 0%, #fff 18%)
}

.admin-priority-alert--warn {
    --priority-accent: #C9A84C;
    border-color: rgba(201, 168, 76, .28);
    background: linear-gradient(90deg, rgba(201, 168, 76, .08) 0%, #fff 18%)
}

.admin-priority-alert--info {
    --priority-accent: #396CF0;
    border-color: rgba(57, 108, 240, .2);
    background: linear-gradient(90deg, rgba(57, 108, 240, .06) 0%, #fff 18%)
}

.admin-priority-alert__rail {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: .15rem
}

.admin-priority-alert__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--priority-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--priority-accent) 20%, transparent)
}

.admin-priority-alert--danger .admin-priority-alert__dot {
    animation: admin-priority-pulse 1.8s ease-in-out infinite
}

@keyframes admin-priority-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--priority-accent) 20%, transparent)
    }

    50% {
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--priority-accent) 8%, transparent)
    }
}

.admin-priority-alert__icon {
    font-size: 1.15rem;
    line-height: 1;
    margin-top: .05rem
}

.admin-priority-alert__body {
    grid-column: 2 / -1;
    min-width: 0
}

.admin-priority-alert__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .2rem
}

.admin-priority-alert__head strong {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text)
}

.admin-priority-alert__chip {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .18rem .42rem;
    border-radius: 999px;
    color: var(--priority-accent);
    background: color-mix(in srgb, var(--priority-accent) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--priority-accent) 25%, #fff);
    white-space: nowrap
}

.admin-priority-alert__body p {
    margin: 0 0 .55rem;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45
}

.admin-priority-alert__action {
    margin-top: .1rem
}

.admin-dash-recent-card {
    margin-bottom: 1rem
}

.admin-recent-table .dash-applicant-cell {
    display: flex;
    align-items: center;
    gap: .55rem
}

.dash-status-with-icon {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap
}

.dash-status-with-icon__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0
}

.dash-status-with-icon__label {
    line-height: 1.2
}

.dash-applicant-name-btn {
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: var(--primary);
    text-align: left;
    cursor: pointer
}

.dash-applicant-name-btn:hover {
    text-decoration: underline
}

.dash-contact-cell {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: 11px;
    line-height: 1.45;
    min-width: 0
}

.dash-contact-cell__phone {
    color: var(--text);
    font-weight: 500
}

.dash-contact-cell__email {
    color: var(--muted);
    word-break: break-word
}

.member-recent-col-contact {
    min-width: 140px
}

.member-recent-ref-sub {
    color: var(--muted);
    font-size: 10px
}

.member-quick-menu-card {
    margin-bottom: 1.25rem
}

.member-quick-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem
}

.member-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
    min-height: 108px;
    padding: .9rem .55rem;
    background: linear-gradient(145deg, #fff 0%, #f7f8ff 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(67, 24, 255, .06);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.member-quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(67, 24, 255, .1);
    border-color: rgba(67, 24, 255, .2)
}

.member-quick-action:focus-visible {
    outline: 2px solid #4318FF;
    outline-offset: 2px
}

.member-quick-action__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--member-quick-icon-bg, rgba(67, 24, 255, .1));
    color: var(--member-quick-accent, #4318FF)
}

.member-quick-action__icon svg {
    width: 22px;
    height: 22px
}

.member-quick-action__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    text-align: center
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.25rem
}

.member-dash-summary-grid {
    align-items: stretch
}

.member-dash-summary-card,
.member-dash-alerts-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin-bottom: 0
}

.member-dash-summary-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: 12px;
    color: var(--text2);
    min-height: 0
}

.member-dash-alerts-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}

.member-dash-alert-item {
    padding: .55rem 0;
    border-bottom: 1px solid var(--border)
}

.member-dash-alert-item:last-child {
    border-bottom: none
}

.member-dash-alerts-footer {
    margin-top: auto;
    align-self: flex-start
}

.member-dash-bottom-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    margin-bottom: 1.5rem;
    gap: 1rem
}

.member-dash-bottom-row .card {
    margin-bottom: 0;
    min-width: 0;
    min-height: 100%
}

.member-dash-sections {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.member-dash-accordion {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(13, 27, 62, .04);
    overflow: hidden;
}

.member-dash-accordion__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 0;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    cursor: pointer;
    text-align: left;
    transition: background .18s ease;
}

.member-dash-accordion__toggle:hover {
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
}

.member-dash-accordion__toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.member-dash-accordion__copy {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.member-dash-accordion__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}

.member-dash-accordion__sub {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45;
}

.member-dash-accordion__chev {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--navy);
    background: rgba(26, 45, 90, .06);
    border: 1px solid rgba(26, 45, 90, .08);
}

.member-dash-accordion--open .member-dash-accordion__chev {
    background: rgba(57, 108, 240, .1);
    border-color: rgba(57, 108, 240, .18);
    color: var(--primary);
}

.member-dash-accordion__panel {
    border-top: 1px solid var(--border);
    background: #fff;
}

.member-dash-accordion__body {
    padding: .85rem 1rem .75rem;
}

.member-dash-accordion__footer {
    display: flex;
    justify-content: flex-start;
    padding: 0 1rem .85rem;
}

.member-dash-panel--flat {
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}

.member-dash-panel {
    border: 1px solid rgba(214, 223, 240, .95);
    box-shadow: 0 10px 28px rgba(13, 27, 62, .06);
    border-radius: 14px;
    padding: 1rem 1.05rem 1.05rem
}

.member-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem
}

.member-section-head__copy {
    min-width: 0
}

.member-section-sub {
    margin: .2rem 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45
}

.member-activity-chart-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    min-width: 0;
    overflow: hidden
}

.member-activity-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap
}

.member-activity-title {
    margin-bottom: .2rem
}

.member-activity-sub {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45
}

.member-activity-peak {
    font-size: 11px;
    font-weight: 600;
    color: #396CF0;
    background: rgba(57, 108, 240, .1);
    border: 1px solid rgba(57, 108, 240, .18);
    border-radius: 999px;
    padding: .3rem .65rem;
    white-space: nowrap
}

.member-activity-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem
}

.member-activity-stat {
    display: flex;
    align-items: center;
    gap: .55rem;
    border-radius: 12px;
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    background: #f8faff;
    min-width: 0
}

.member-activity-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .75)
}

.member-activity-stat__label {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: .15rem
}

.member-activity-stat__value {
    display: block;
    font-size: 13px;
    color: var(--text);
    line-height: 1.25;
    word-break: break-word
}

.member-activity-stat--loans {
    background: linear-gradient(180deg, rgba(67, 24, 255, .08), rgba(67, 24, 255, .02));
    border-color: rgba(67, 24, 255, .16)
}

.member-activity-stat--deposits {
    background: linear-gradient(180deg, rgba(1, 181, 116, .1), rgba(1, 181, 116, .02));
    border-color: rgba(1, 181, 116, .18)
}

.member-activity-stat--total {
    background: linear-gradient(180deg, rgba(57, 108, 240, .1), rgba(57, 108, 240, .02));
    border-color: rgba(57, 108, 240, .16)
}

.member-activity-amchart-shell {
    width: 100%;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248, 250, 255, .98), rgba(255, 255, 255, .82));
    border: 1px solid rgba(216, 226, 244, .9);
    overflow: hidden;
    box-sizing: border-box
}

.member-activity-amchart {
    width: 100%;
    height: 360px;
    min-height: 300px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box
}

.member-activity-amchart>div {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow: hidden !important
}

.member-activity-inline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    font-size: 11px;
    color: var(--text2);
    padding-top: .65rem;
    margin-top: 0
}

.member-activity-inline-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.member-activity-amchart-empty {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    padding: 2.5rem 0;
    text-align: center
}

.member-recent-requests-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.member-activity-chart {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 240px
}

.member-activity-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 0
}

.member-activity-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 190px;
    width: 100%;
    justify-content: center
}

.member-activity-bar {
    display: block;
    width: 32px;
    border-radius: 3px 3px 0 0
}

.member-activity-bar--loans {
    background: #4318FF
}

.member-activity-bar--deposits {
    background: #01B574
}

.member-activity-chart-label {
    font-size: 10px;
    color: var(--muted)
}

.member-activity-chart-legend {
    display: flex;
    gap: .6rem;
    font-size: 11px;
    color: var(--text2);
    margin-top: .4rem
}

.member-activity-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle
}

.member-activity-legend-swatch--loans {
    background: #4318FF
}

.member-activity-legend-swatch--deposits {
    background: #01B574
}

.member-recent-requests-card {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%
}

.member-recent-requests-card .member-recent-requests-table-wrap {
    flex: 1;
    min-height: 0
}

.member-recent-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

.member-recent-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7f9fd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .55rem .5rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap
}

.member-recent-table tbody td {
    padding: .62rem .5rem;
    font-size: 12px;
    color: var(--text2);
    border-bottom: 1px solid rgba(230, 220, 196, .55);
    vertical-align: middle
}

.member-recent-row:hover td {
    background: rgba(57, 108, 240, .04)
}

.member-recent-row:last-child td {
    border-bottom: none
}

.member-recent-col-ref {
    max-width: 9.5rem
}

.member-recent-col-type {
    min-width: 7.5rem
}

.member-recent-col-date {
    white-space: normal;
    font-size: 11px;
    color: var(--muted);
    min-width: 5.5rem
}

.dash-date-cell {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    line-height: 1.35
}

.dash-date-cell__date {
    color: var(--text);
    font-weight: 500;
    white-space: nowrap
}

.dash-date-cell__time {
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap
}

.member-recent-col-amount {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap
}

.member-recent-empty {
    text-align: center;
    color: var(--muted);
    padding: 1.5rem .5rem !important
}

.member-req-ref {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    line-height: 1.35;
    color: var(--text);
    cursor: help
}

.member-req-ref__head {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .02em
}

.member-req-ref__tail {
    font-weight: 600
}

.member-req-type {
    display: inline-block;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text)
}


.mr-detail-layout {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.mr-detail-loading {
    font-size: 12px;
    color: var(--muted);
    padding: .5rem 0
}

.mr-detail-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: .85rem
}

.mr-detail-panel {
    border: 1px solid rgba(15, 61, 122, .1);
    border-radius: 12px;
    padding: .85rem .95rem;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    min-width: 0;
    overflow: visible;
    container-type: inline-size;
    container-name: mr-detail-panel;
    box-shadow: 0 8px 20px rgba(13, 27, 62, .04)
}

.mr-detail-panel--full,
.mr-detail-panel--wide {
    grid-column: 1 / -1
}

.mr-detail-panel-title {
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 .65rem;
    color: #0f3d7a;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding-bottom: .45rem;
    border-bottom: 1px solid rgba(15, 61, 122, .1);
    position: relative
}

.mr-detail-panel-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 2rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2f6fbf, #c9a84c)
}

.mr-detail-row {
    display: grid;
    grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr);
    gap: .25rem .65rem;
    font-size: 12.5px;
    line-height: 1.45;
    padding: .35rem 0;
    align-items: start;
    border-bottom: 1px dashed rgba(15, 61, 122, .08)
}

.mr-detail-row:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.mr-detail-row:first-of-type {
    padding-top: 0
}

.mr-detail-row--stacked {
    grid-template-columns: 1fr;
    gap: .15rem
}

.mr-detail-label {
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    min-width: 0;
    overflow-wrap: break-word
}

.mr-detail-row--stacked .mr-detail-label {
    letter-spacing: .02em
}

.mr-detail-value {
    color: var(--text);
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word
}

.mr-detail-value .tag,
.mr-detail-value .status-badge,
.mr-detail-value [class*="badge"] {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere
}

@container mr-detail-panel (max-width: 300px) {
    .mr-detail-row {
        grid-template-columns: 1fr;
        gap: .12rem
    }
}

.mr-decision-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    width: fit-content;
    max-width: 100%;
}

.mr-decision-actions--triple {
    display: inline-flex;
    flex-wrap: wrap;
    width: auto;
    max-width: min(100%, 42rem);
}

.mr-decision-actions--triple .mr-decision-btn {
    flex: 1 1 12rem;
    width: 12rem;
    max-width: 100%;
}

.mr-decision-actions .mr-decision-btn {
    flex: 0 0 12rem;
    width: 12rem;
    max-width: 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
}

.mr-decision-locked {
    font-size: 12px;
    color: var(--text2);
    line-height: 1.5;
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

.wizard-existing-docs {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .45rem;
}

.wizard-existing-doc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    font-size: 11px;
}

.wizard-existing-doc-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex: 0 0 auto;
}

.wizard-existing-doc-file-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    flex: 0 0 auto;
    font-size: 18px;
}

.wizard-existing-doc-preview-wrap {
    margin-top: .5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.wizard-existing-doc-preview {
    height: 72px;
    width: auto;
    max-width: 120px;
    border: 1px solid var(--border);
    border-radius: 6px;
    object-fit: cover;
}

.wizard-resubmit-upload {
    text-align: center;
}

.wizard-resubmit-upload--compact {
    padding: .75rem;
}

.wizard-resubmit-inline-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    margin-bottom: .65rem;
}

.wizard-resubmit-inline-preview__img {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--border);
    box-shadow: 0 2px 8px rgba(26, 45, 90, .08);
}

.wizard-existing-doc__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text2);
}

.wizard-resubmit-banner {
    margin-bottom: .85rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(201, 168, 76, .45);
    border-radius: 10px;
    background: rgba(255, 248, 230, .85);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text2);
}

.mr-detail-section-title {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 .35rem;
    color: var(--text)
}

.mr-detail-remarks {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word
}

.mr-attachments-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
    gap: .65rem;
    align-items: start
}

.mr-attachments-section--full {
    width: 100%;
    margin-top: 1rem;
    grid-column: 1 / -1
}

.mr-attachments-grid--full {
    grid-template-columns: 1fr;
    gap: .85rem
}

.mr-doc-previews--full {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .65rem;
    max-height: none;
    overflow: visible
}

.mr-doc-preview-item__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem
}

.mr-doc-previews {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-height: 320px;
    overflow-y: auto
}

.mr-doc-preview-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .4rem;
    background: var(--white)
}

.mr-doc-preview-item img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    min-height: 48px;
    background: var(--bg)
}

.mr-doc-preview-item__img--error {
    opacity: .45
}

.mr-doc-actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: nowrap;
    white-space: nowrap
}

.mr-doc-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text2);
    text-decoration: none !important;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease
}

.mr-doc-icon-btn svg {
    width: 17px;
    height: 17px;
    display: block;
    flex-shrink: 0
}

.mr-doc-icon-btn--view {
    border-color: var(--warn);
    color: #8f6d18
}

.mr-doc-icon-btn--view:hover {
    border-color: var(--warn);
    color: #0d1b3e;
    background: var(--warn)
}

.mr-doc-icon-btn--download {
    background: linear-gradient(135deg, #1a2d5a 0%, #253d72 100%);
    border-color: #223767;
    color: #fff
}

.mr-doc-icon-btn--download:hover {
    opacity: .88;
    color: #fff
}

.mr-detail-layout table td:last-child {
    width: 1%;
    white-space: nowrap
}

.mr-activity-log-table {
    margin: 0
}

.mr-activity-log-table td,
.mr-activity-log-table th {
    font-size: 11px;
    padding: 6px 8px;
    vertical-align: top
}

@media (max-width: 960px) {
    .mr-detail-top {
        grid-template-columns: 1fr
    }

    .mr-attachments-grid {
        grid-template-columns: 1fr
    }
}

/* Approved member detail page */
.amd-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0
}

.amd-detail-loading {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 13px;
    color: var(--muted);
    padding: 1.5rem .25rem
}

.amd-detail-loading__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: amd-spin .7s linear infinite
}

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

.amd-detail-hero {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(15, 61, 122, .12);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 50% 80% at 0% 0%, rgba(47, 111, 191, .1), transparent 55%),
        linear-gradient(135deg, rgba(37, 99, 235, .05), rgba(255, 255, 255, .95));
    box-shadow: 0 10px 24px rgba(13, 27, 62, .05)
}

.amd-detail-hero__avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    background: var(--white);
    border: 1px solid rgba(37, 99, 235, .18);
    flex-shrink: 0
}

.amd-detail-hero__main {
    min-width: 0;
    flex: 1
}

.amd-detail-hero__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .55rem
}

.amd-detail-hero__name {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--text)
}

.amd-detail-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center
}

.amd-detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .45rem
}

.amd-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--white);
    font-size: 11px;
    color: var(--text2);
    text-decoration: none;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word
}

.amd-detail-chip--primary {
    border-color: rgba(37, 99, 235, .25);
    background: rgba(37, 99, 235, .06)
}

.amd-detail-chip--link:hover {
    border-color: var(--primary);
    color: var(--primary)
}

.amd-detail-chip__label {
    color: var(--muted);
    font-weight: 500
}

.amd-detail-hero__codes {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    font-size: 11px;
    color: var(--muted)
}

.amd-detail-hero__codes code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--text);
    background: rgba(0, 0, 0, .04);
    padding: .1rem .35rem;
    border-radius: 4px
}

.amd-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 1.1rem;
    align-items: start;
    width: 100%;
    min-width: 0
}

.amd-detail-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    width: 100%
}

.amd-detail-aside {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    position: sticky;
    top: .5rem;
    min-width: 0;
    width: 100%;
    overflow: visible
}

.amd-detail-card {
    border: 1px solid rgba(15, 61, 122, .1);
    border-radius: 12px;
    padding: .95rem 1rem;
    background: var(--white);
    min-width: 0;
    overflow: visible;
    box-shadow: 0 8px 20px rgba(13, 27, 62, .04)
}

.amd-detail-card--flat {
    background: var(--bg)
}

.amd-detail-card--admin {
    border-color: rgba(37, 99, 235, .18);
    background: linear-gradient(180deg, rgba(37, 99, 235, .03), var(--white))
}

.amd-detail-card__head {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    margin-bottom: .65rem
}

.amd-detail-card__icon {
    font-size: 16px;
    line-height: 1.2;
    margin-top: .1rem
}

.amd-detail-card__title,
.amd-detail-card .mr-detail-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .35rem
}

.amd-detail-card__hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted)
}

.amd-detail-summary-list .mr-detail-row {
    padding: .4rem 0;
    border-bottom: 1px dashed rgba(15, 61, 122, .08);
    grid-template-columns: minmax(6.5rem, 42%) minmax(0, 1fr)
}

.amd-detail-summary-list .mr-detail-row:last-child {
    border-bottom: 0
}

.mr-decision-summary {
    margin: .75rem 0 0
}

.mr-decision-summary__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: .75rem
}

.mr-decision-summary__card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .75rem .85rem;
    background: #fff;
    min-width: 0;
    overflow: visible
}

.mr-decision-summary__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: .45rem
}

.mr-decision-summary__row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: 12px;
    margin: .2rem 0;
    flex-wrap: wrap
}

.mr-decision-summary__row span:first-child {
    color: var(--muted);
    flex: 0 1 auto;
    min-width: 0
}

.mr-decision-summary__row span:last-child {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    flex: 1 1 8rem;
    min-width: 0;
    overflow-wrap: break-word
}

.mr-decision-summary__remark {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    color: var(--text2);
    white-space: pre-wrap;
    line-height: 1.45;
    overflow-wrap: break-word
}

@media (max-width: 760px) {
    .mr-decision-summary__grid {
        grid-template-columns: 1fr
    }
}

.amd-detail-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    align-items: end
}

.amd-detail-form-grid .form-group label {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: .2rem;
    display: block
}

.amd-detail-input {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white)
}

.amd-date-field {
    position: relative;
    min-width: 0
}

.amd-date-field .platform-date-wrap {
    width: 100%
}

/* Fallback before platform-datepicker converts type=date → text */
input[type="date"]:not(.platform-date-input) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
    box-sizing: border-box;
    color-scheme: light
}

.amd-detail-save-btn {
    grid-column: 1 / -1;
    justify-self: start
}

.amd-detail-status-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem
}

.amd-detail-status-row__label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600
}

.amd-detail-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem
}

.amd-member-status-panel {
    display: flex;
    flex-direction: column;
    gap: .65rem
}

.amd-member-status-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem
}

.amd-member-status-option {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    width: 100%;
    text-align: left;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease
}

.amd-member-status-option:hover {
    border-color: rgba(57, 108, 240, .35);
    background: rgba(57, 108, 240, .03)
}

.amd-member-status-option--selected {
    border-color: rgba(57, 108, 240, .55);
    box-shadow: 0 0 0 2px rgba(57, 108, 240, .12);
    background: rgba(57, 108, 240, .05)
}

.amd-member-status-option--current {
    border-style: dashed
}

.amd-member-status-option__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid var(--border)
}

.amd-member-status-option--ok .amd-member-status-option__icon {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0
}

.amd-member-status-option--warn .amd-member-status-option__icon {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a
}

.amd-member-status-option--danger .amd-member-status-option__icon {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca
}

.amd-member-status-option__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0
}

.amd-member-status-option__body strong {
    font-size: 12px;
    color: var(--text)
}

.amd-member-status-option__body span {
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted)
}

.amd-member-status-option__badge {
    margin-left: auto;
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .15rem .45rem
}

.amd-member-status-remark label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .3rem
}

.amd-member-status-remark__input {
    width: 100%;
    min-height: 72px;
    resize: vertical
}

.amd-member-status-remark__hint {
    margin: .3rem 0 0;
    font-size: 10px;
    color: var(--muted);
    line-height: 1.4
}

.amd-member-status-apply-row {
    display: flex;
    justify-content: flex-end
}

.amd-member-status-apply-btn:disabled {
    opacity: .55;
    cursor: not-allowed
}

.amd-staff-role-panel {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    overflow: visible
}

.amd-staff-role-panel__select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.amd-staff-role-status {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    padding: .6rem .7rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.45
}

.amd-staff-role-status strong {
    display: block;
    font-size: 12px;
    margin-bottom: .15rem
}

.amd-staff-role-status p {
    margin: 0;
    color: var(--muted)
}

.amd-staff-role-status__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px
}

.amd-staff-role-status--neutral {
    background: #f8fafc;
    border-color: #e2e8f0
}

.amd-staff-role-status--active {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534
}

.amd-staff-role-status--active p {
    color: #15803d
}

.amd-staff-role-status--active .amd-staff-role-status__icon {
    background: #dcfce7
}

.amd-staff-role-status--scheduled {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e
}

.amd-staff-role-status--scheduled p {
    color: #a16207
}

.amd-staff-role-status--scheduled .amd-staff-role-status__icon {
    background: #fef3c7
}

.amd-staff-role-status--expired,
.amd-staff-role-status--inactive {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b
}

.amd-staff-role-status--expired p,
.amd-staff-role-status--inactive p {
    color: #b91c1c
}

.amd-staff-role-status--expired .amd-staff-role-status__icon,
.amd-staff-role-status--inactive .amd-staff-role-status__icon {
    background: #fee2e2
}

.amd-staff-role-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem
}

.amd-staff-role-option {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    width: 100%;
    text-align: left;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease
}

.amd-staff-role-option:hover {
    border-color: rgba(15, 61, 122, .28);
    background: rgba(15, 61, 122, .03)
}

.amd-staff-role-option--selected {
    border-color: rgba(15, 61, 122, .5);
    box-shadow: 0 0 0 2px rgba(15, 61, 122, .1);
    background: rgba(15, 61, 122, .04)
}

.amd-staff-role-option--current {
    border-style: dashed
}

.amd-staff-role-option__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid var(--border)
}

.amd-staff-role-option--am .amd-staff-role-option__icon {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe
}

.amd-staff-role-option--approver .amd-staff-role-option__icon {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0
}

.amd-staff-role-option--admin .amd-staff-role-option__icon {
    color: #6b21a8;
    background: #faf5ff;
    border-color: #e9d5ff
}

.amd-staff-role-option__body {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
    flex: 1
}

.amd-staff-role-option__body strong {
    font-size: 12px;
    color: var(--text)
}

.amd-staff-role-option__body span {
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted)
}

.amd-staff-role-option__badge {
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(15, 61, 122, .08);
    border-radius: 999px;
    padding: .15rem .45rem;
    white-space: nowrap
}

.amd-staff-role-dates {
    padding: .65rem .7rem;
    border: 1px dashed rgba(15, 61, 122, .18);
    border-radius: 8px;
    background: rgba(15, 61, 122, .02);
    overflow: visible
}

.amd-staff-role-dates__head {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: .5rem
}

.amd-staff-role-dates__title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text)
}

.amd-staff-role-dates__hint {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.4
}

.amd-staff-role-dates__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem
}

.amd-staff-role-dates__grid label {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: .2rem;
    display: block
}

.amd-staff-role-capabilities {
    padding: .6rem .7rem;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border)
}

.amd-staff-role-capabilities__title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .35rem
}

.amd-staff-role-capabilities__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text2)
}

.amd-staff-role-capabilities__list li+li {
    margin-top: .15rem
}

.amd-staff-role-save-row {
    display: flex;
    justify-content: flex-end
}

.amd-staff-role-save-btn:disabled {
    opacity: .55;
    cursor: not-allowed
}

.amd-detail-alert {
    font-size: 11px;
    line-height: 1.45;
    padding: .45rem .55rem;
    border-radius: 6px;
    margin: 0 0 .55rem
}

.amd-detail-alert--warn {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a
}

.amd-detail-alert--ok {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0
}

.amd-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: .55rem
}

.amd-timeline__step {
    display: flex;
    gap: .45rem;
    align-items: flex-start;
    padding: .55rem .6rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--white);
    opacity: .72
}

.amd-timeline__step--done {
    opacity: 1;
    border-style: solid;
    border-color: rgba(22, 163, 74, .25);
    background: rgba(22, 163, 74, .04)
}

.amd-timeline__marker {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--border);
    flex-shrink: 0
}

.amd-timeline__step--done .amd-timeline__marker {
    color: #166534;
    border-color: #86efac;
    background: #dcfce7
}

.amd-timeline__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .15rem
}

.amd-timeline__value {
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
    overflow-wrap: break-word;
    word-break: normal;
    min-width: 0
}

.amd-detail-panels.mr-detail-top {
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.amd-detail-panels .amd-detail-panel--address {
    grid-column: 1 / -1
}

.amd-detail-panels .amd-detail-panel--income,
.amd-detail-panels .amd-detail-panel--remarks {
    min-height: 100%
}

.amd-detail-block {
    display: flex;
    flex-direction: column;
    gap: .45rem
}

.amd-detail-table-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: auto
}

.amd-detail-empty-hint {
    font-size: 11px;
    color: var(--muted);
    margin: 0
}

/* Collapse aside earlier — sidebar + body zoom leave less usable width */
@media (max-width: 1500px) {
    .amd-detail-grid {
        grid-template-columns: 1fr
    }

    .amd-detail-aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem
    }

    .amd-detail-aside > .amd-member-status-panel,
    .amd-detail-aside > .amd-staff-role-panel {
        grid-column: 1 / -1
    }

    .amd-timeline {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr))
    }

    .amd-detail-form-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 1400px) {
    .amd-detail-grid {
        grid-template-columns: 1fr
    }

    .amd-detail-aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
        gap: .75rem
    }

    .amd-timeline {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr))
    }

    .amd-detail-form-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 1100px) {
    .amd-detail-panels.mr-detail-top {
        grid-template-columns: 1fr
    }

    .amd-detail-panels .amd-detail-panel--address,
    .amd-detail-panels .mr-detail-panel--wide {
        grid-column: auto
    }

    .amd-detail-aside {
        grid-template-columns: 1fr
    }

    .amd-detail-aside > .amd-member-status-panel,
    .amd-detail-aside > .amd-staff-role-panel {
        grid-column: auto
    }
}

@media (max-width: 960px) {
    .mr-detail-top,
    .amd-detail-panels.mr-detail-top {
        grid-template-columns: 1fr
    }

    .mr-attachments-grid {
        grid-template-columns: 1fr
    }

    .amd-detail-hero {
        flex-direction: column;
        align-items: stretch
    }

    .amd-detail-hero__title-row {
        flex-direction: column;
        align-items: flex-start
    }

    .amd-detail-aside {
        grid-template-columns: 1fr
    }

    .amd-detail-summary-list .mr-detail-row,
    .amd-detail-panels .mr-detail-row {
        grid-template-columns: 1fr;
        gap: .12rem
    }

    .members-hub-page__detail-body {
        padding: .85rem
    }
}

@media (max-width: 640px) {
    .amd-detail-chip {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word
    }

    .amd-member-status-option,
    .amd-staff-role-option {
        align-items: flex-start
    }

    .amd-detail-hero {
        padding: .85rem
    }

    .amd-detail-hero__name {
        font-size: 1.05rem
    }

    .amd-detail-card,
    .mr-detail-panel {
        padding: .8rem .85rem;
        border-radius: 10px
    }

    .amd-member-status-apply-row .btn,
    .amd-staff-role-save-btn {
        width: 100%
    }
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.25rem
}

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(13, 27, 62, .05);
    padding: 1rem
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .75rem
}

.loan-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: .75rem
}

.loan-detail-header__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left
}

.loan-detail-header__actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    flex-wrap: nowrap
}

.loan-detail-header__actions .btn {
    width: auto;
    flex-shrink: 0
}

.deposit-detail-page .loan-detail-header {
    margin-bottom: .75rem
}

.deposit-requests-page--detail .deposit-detail-page__toolbar {
    margin-bottom: .25rem
}

/* Deposit payments queue (AM / Approver) */
.deposit-requests-page {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.deposit-requests-page__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .07), rgba(255, 255, 255, .95))
}

.deposit-requests-page__title {
    margin: 0 0 .35rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text)
}

.deposit-requests-page__subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text2);
    max-width: 52rem
}

.deposit-requests-page__queue-hint {
    margin: .45rem 0 0;
    font-size: 11px;
    color: var(--muted)
}

.deposit-requests-page__hero-actions {
    flex-shrink: 0
}

.deposit-requests-page__list-card {
    padding: 1rem 1.1rem
}

.deposit-requests-kpi {
    margin-bottom: .85rem
}

.deposit-requests-kpi__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .4rem
}

.deposit-requests-kpi__chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    min-width: 88px;
    padding: .5rem .7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    text-align: left
}

.deposit-requests-kpi__chip:hover {
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06)
}

.deposit-requests-kpi__chip--active {
    border-color: var(--primary);
    background: rgba(37, 99, 235, .06);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .12)
}

.deposit-requests-kpi__chip--amount {
    cursor: default;
    border-color: rgba(1, 181, 116, .35);
    background: rgba(1, 181, 116, .08);
    min-width: 140px
}

.deposit-requests-kpi__chip--amount .deposit-requests-kpi__value {
    color: #017a50;
    font-size: 1rem;
    white-space: nowrap
}

.deposit-requests-kpi__chip--amount .deposit-requests-kpi__label {
    color: #017a50
}

.deposit-requests-kpi__value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1
}

.deposit-requests-kpi__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted)
}

.deposit-requests-kpi__note {
    margin: 0;
    font-size: 11px;
    color: var(--muted)
}

.deposit-requests-page__table-wrap {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: auto
}

.deposit-requests-page__table {
    margin: 0
}

.deposit-requests-row:hover td {
    background: rgba(37, 99, 235, .03)
}

.deposit-requests-empty {
    text-align: center;
    padding: 2rem 1rem !important;
    color: var(--muted)
}

.deposit-requests-empty__icon {
    display: block;
    font-size: 1.75rem;
    margin-bottom: .35rem
}

.deposit-requests-empty__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem
}

.deposit-requests-empty__hint {
    display: block;
    font-size: 12px;
    color: var(--muted);
    max-width: 28rem;
    margin: 0 auto
}

/* Members hub (AM / Approver / Admin) */
.members-hub-page {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.members-hub-page__hero {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.3rem;
    border: 1px solid rgba(15, 61, 122, .14);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 61, 122, .09), rgba(26, 127, 191, .05) 48%, rgba(255, 255, 255, .98));
    box-shadow: 0 8px 28px rgba(15, 61, 122, .06)
}

.members-hub-page__hero--pipeline {
    background: linear-gradient(135deg, rgba(201, 168, 76, .1), rgba(255, 255, 255, .98));
    border-color: rgba(201, 168, 76, .22)
}

.members-hub-page__hero-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 61, 122, .12);
    box-shadow: 0 4px 14px rgba(15, 61, 122, .08)
}

.members-hub-page__hero-copy {
    flex: 1;
    min-width: 220px
}

.members-hub-page__title {
    margin: 0 0 .35rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em
}

.members-hub-page__subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text2);
    max-width: 52rem
}

.members-hub-page__hero-actions {
    flex-shrink: 0;
    align-self: flex-start
}

.members-hub-page__list-card {
    padding: 1rem 1.1rem 1.1rem
}

.members-hub-status-nav {
    margin-bottom: .9rem;
    padding: .85rem .95rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc, #fff)
}

.members-hub-status-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem
}

.members-hub-status-nav__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted)
}

.members-hub-status-nav__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(15, 61, 122, .08);
    padding: .2rem .55rem;
    border-radius: 999px
}

.members-hub-status-nav__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem
}

.members-hub-status-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease
}

.members-hub-status-chip:hover {
    border-color: rgba(15, 61, 122, .35);
    color: var(--text)
}

.members-hub-status-chip--active {
    border-color: rgba(15, 61, 122, .45);
    background: linear-gradient(135deg, rgba(15, 61, 122, .12), rgba(26, 127, 191, .08));
    color: #0f3d7a;
    box-shadow: 0 2px 10px rgba(15, 61, 122, .1)
}

.members-hub-status-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border)
}

.members-hub-status-chip--active .members-hub-status-chip__dot {
    background: #1a7fbf
}

.members-hub-page__table-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: auto;
    background: #fff
}

.members-hub-page__table {
    margin: 0
}

.members-hub-page__table thead th {
    background: linear-gradient(180deg, #f1f5f9, #e8eef5);
    color: #0f3d7a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid rgba(15, 61, 122, .12);
    white-space: nowrap
}

.members-hub-table__row:hover td {
    background: rgba(15, 61, 122, .04)
}

.members-hub-id,
.members-hub-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary)
}

.members-hub-member-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0
}

.members-hub-member-cell__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #0f3d7a;
    background: linear-gradient(135deg, rgba(15, 61, 122, .12), rgba(26, 127, 191, .1));
    border: 1px solid rgba(15, 61, 122, .14)
}

.members-hub-member-cell__text {
    min-width: 0
}

.members-hub-member-cell__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3
}

.members-hub-member-cell__meta {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: .1rem
}

.members-hub-unit,
.members-hub-contact,
.members-hub-date {
    font-size: 12px;
    color: var(--text2)
}

.members-hub-contact--email {
    word-break: break-all
}

.members-hub-table__action {
    text-align: right;
    white-space: nowrap
}

.members-hub-empty {
    text-align: center;
    padding: 2.25rem 1rem !important;
    color: var(--muted)
}

.members-hub-empty__icon {
    display: block;
    font-size: 1.85rem;
    margin-bottom: .4rem
}

.members-hub-empty__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem
}

.members-hub-empty__hint {
    display: block;
    font-size: 12px;
    color: var(--muted);
    max-width: 34rem;
    margin: 0 auto;
    max-width: 30rem;
    margin: 0 auto;
    line-height: 1.5
}

.members-hub-page--detail {
    gap: .75rem
}

.members-hub-detail-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(15, 61, 122, .06), rgba(255, 255, 255, .98))
}

.members-hub-detail-toolbar__main {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
    min-width: 0
}

.members-hub-detail-toolbar__titles {
    min-width: 0
}

.members-hub-detail-toolbar__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3
}

.members-hub-detail-toolbar__subtitle {
    margin: .2rem 0 0;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--primary)
}

.members-hub-detail-toolbar__actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    flex-shrink: 0
}

.members-hub-page__detail-body {
    padding: 1rem 1.05rem;
    overflow: visible
}

.members-hub-page__detail-body .amd-detail-hero {
    margin-top: 0
}

@media (max-width: 768px) {
    .members-hub-page__hero {
        padding: 1rem
    }

    .members-hub-page__title {
        font-size: 1.2rem
    }

    .members-hub-status-nav__chips {
        gap: .35rem
    }

    .members-hub-status-chip {
        font-size: 11px;
        padding: .4rem .65rem
    }

    .members-hub-detail-toolbar__main {
        flex-direction: column
    }
}

.deposit-detail-hero {
    background: linear-gradient(135deg, rgba(201, 168, 76, .08), rgba(255, 255, 255, .95));
    border-color: rgba(201, 168, 76, .22)
}

.deposit-payment-summary {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(201, 168, 76, .28);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(201, 168, 76, .1), rgba(255, 255, 255, .98));
    margin-bottom: .85rem
}

.deposit-payment-summary__amount {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: .45rem
}

.deposit-payment-summary__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem
}

.deposit-payment-summary__chip {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--border)
}

.deposit-payment-summary__ref {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted)
}

.deposit-payment-summary__ref code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    padding: .15rem .45rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--border);
    color: var(--text)
}

.deposit-install-progress {
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    margin-bottom: .85rem
}

.deposit-install-progress__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .45rem
}

.deposit-install-progress__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text)
}

.deposit-install-progress__count {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary)
}

.deposit-install-progress__bar {
    height: 8px;
    border-radius: 999px;
    background: #e8edf5;
    overflow: hidden;
    margin-bottom: .35rem
}

.deposit-install-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #C9A84C 0%, #396CF0 100%);
    transition: width .25s ease
}

.deposit-install-progress__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: 11px;
    color: var(--muted)
}

.deposit-financial-block {
    margin-top: .75rem
}

.deposit-financial-block:first-child {
    margin-top: 0
}

.deposit-financial-block__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .45rem
}

.deposit-workflow-timeline {
    margin-top: .35rem
}

.amd-timeline__step--active {
    border-color: rgba(57, 108, 240, .35);
    background: rgba(57, 108, 240, .04)
}

.amd-timeline__step--active .amd-timeline__marker {
    border-color: #396CF0;
    color: #396CF0;
    background: #fff
}

.deposit-detail-page .amd-detail-aside .deposit-decision-panel {
    position: sticky;
    top: .5rem
}

.deposit-detail-decision-wrap {
    width: 100%;
    margin-top: .85rem
}

.deposit-detail-decision-wrap .deposit-decision-panel {
    width: 100%;
    box-sizing: border-box
}

.deposit-detail-decision-wrap .amd-detail-input {
    width: 100%;
    box-sizing: border-box
}

.deposit-decision-panel.deposit-decision-panel--readonly .mr-detail-remarks {
    padding: .5rem .65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc
}

@media (max-width: 768px) {
    .deposit-requests-page__hero {
        flex-direction: column
    }

    .deposit-requests-kpi__chip {
        flex: 1 1 calc(50% - .5rem);
        min-width: 0
    }
}

.mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 50px
}

.bar {
    border-radius: 3px 3px 0 0;
    width: 14px;
    background: linear-gradient(180deg, #C9A84C 0%, #A38635 100%);
    opacity: .7
}

.donut-wrap {
    display: flex;
    align-items: center;
    gap: 1rem
}

.donut-legend {
    flex: 1
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text2);
    margin-bottom: .35rem
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%
}

table {
    width: 100%;
    border-collapse: collapse
}

th {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border)
}

td {
    font-size: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid #f0f3f7;
    color: var(--text2)
}

tr:hover td {
    background: #f8f9ff;
    cursor: pointer
}

.worklist-filters {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem
}

.filter-select {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
    background: var(--white);
    cursor: pointer
}

.reconcile-toolbar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: .75rem
}

.reconcile-toolbar .filter-select,
.reconcile-toolbar .reconcile-date-input,
.reconcile-toolbar .btn {
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    font-size: 12px
}

.reconcile-toolbar .filter-select,
.reconcile-toolbar .reconcile-date-input {
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    background: var(--white)
}

.reconcile-toolbar .reconcile-date-input {
    min-width: 9.5rem;
    outline: none;
    line-height: 30px
}

.reconcile-toolbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    line-height: 1
}

.action-btns {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    align-items: center
}

.action-btns .btn {
    padding: 4px 10px;
    font-size: 11px
}

.tbl-action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    line-height: 0;
    font-size: 0;
    flex-shrink: 0
}

.tbl-action-icon-btn svg {
    width: 15px;
    height: 15px;
    display: block;
    pointer-events: none
}

.tbl-action-icon-btn:disabled {
    opacity: .45;
    cursor: not-allowed
}

.action-btns .tbl-action-icon-btn {
    padding: 0
}

.ui-tooltip-host--disabled {
    display: inline-flex;
    cursor: not-allowed;
    vertical-align: middle
}

.ui-tooltip-host--disabled .tbl-action-icon-btn {
    pointer-events: none
}

.ui-action-tooltip {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

#ui-icon-tooltip {
    position: fixed;
    z-index: 10050;
    display: none;
    max-width: min(240px, calc(100vw - 16px));
    padding: .38rem .62rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #0d1b3e 0%, #1a2d5a 55%, #243d6e 100%);
    color: #f4f7fc;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(.96);
    transform-origin: center bottom;
    box-shadow:
        0 10px 28px rgba(13, 27, 62, .28),
        0 2px 8px rgba(13, 27, 62, .18),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    transition:
        opacity .16s ease,
        transform .16s ease
}

#ui-icon-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: #1a2d5a;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
    box-shadow: 2px 2px 4px rgba(13, 27, 62, .12)
}

#ui-icon-tooltip.is-below {
    transform-origin: center top
}

#ui-icon-tooltip.is-below::after {
    top: -5px;
    bottom: auto;
    background: #0d1b3e;
    box-shadow: -1px -1px 3px rgba(13, 27, 62, .1)
}

#ui-icon-tooltip.is-visible {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1)
}

#ui-icon-tooltip.is-below.is-visible {
    transform: translateY(0) scale(1)
}

#ui-icon-tooltip.is-measuring {
    display: block !important;
    opacity: 0 !important;
    transform: none !important;
    transition: none !important
}

.btn-verify {
    background: #e8effe;
    color: var(--info);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500
}

.btn-recommend {
    background: #f0e8ff;
    color: #6c3fb5;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500
}

.btn-reject {
    background: #fde8e8;
    color: var(--err);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500
}

.btn-sendback {
    background: #fff8e6;
    color: #b07d00;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500
}

.detail-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    z-index: 70;
    cursor: pointer;
}

.detail-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: var(--white);
    border-left: 1px solid var(--border);
    z-index: 90;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: -4px 0 16px rgba(0, 0, 0, .08)
}

.detail-overlay--profile {
    width: min(560px, 100vw);
    z-index: 100;
}

.detail-close {
    float: right;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--muted)
}

.detail-section {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border)
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12px
}

.detail-row span:first-child {
    color: var(--muted)
}

.detail-row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start
}

.detail-row-pair-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px
}

.detail-row-pair-label {
    color: var(--muted)
}

.audit-log {
    background: var(--bg);
    border-radius: 8px;
    padding: .75rem;
    margin-top: .5rem
}

.audit-entry {
    display: flex;
    gap: .5rem;
    font-size: 11px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text2)
}

.audit-entry:last-child {
    border: none
}

.audit-time {
    color: var(--muted);
    min-width: 90px
}

.notif-dot {
    width: 7px;
    height: 7px;
    background: var(--err);
    border-radius: 50%;
    display: inline-block;
    margin-left: 4px
}

.progress-fill {
    height: 6px;
    border-radius: 3px;
    background: var(--primary)
}

.progress-track {
    height: 6px;
    border-radius: 3px;
    background: #f0f3f7;
    margin: 4px 0
}

.config-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px
}

.config-readonly-notice {
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fafbfd;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--text2)
}

.config-public-page .config-public-tabs {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border)
}

.config-public-tabs__btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text2);
    border-radius: 999px;
    padding: .42rem .9rem;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease
}

.config-public-tabs__btn:hover {
    border-color: rgba(67, 97, 238, .35);
    color: var(--text)
}

.config-public-tabs__btn.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(67, 97, 238, .22)
}

.config-public-panel {
    padding-top: .15rem
}

.config-public-panel .card-title {
    margin-bottom: .35rem
}

.hero-slider-admin-list {
    display: grid;
    gap: .75rem
}

.hero-slider-admin-item {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg)
}

.hero-slider-admin-item__media {
    width: 140px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    background: #e8edf5
}

.hero-slider-admin-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.hero-slider-admin-item__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .2rem
}

.hero-slider-admin-item__text {
    margin: 0;
    font-size: 12px;
    color: var(--text2);
    line-height: 1.45
}

.hero-slider-admin-item__meta {
    margin-top: .35rem;
    font-size: 11px;
    color: var(--muted);
    word-break: break-all
}

.hero-slider-admin-item__actions {
    margin-top: .55rem
}

.hero-slider-admin-form .field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: 12px;
    color: var(--text2)
}

.hero-slider-admin-form .field input[type="text"],
.hero-slider-admin-form .field input[type="file"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    color: var(--text)
}

.about-us-admin-form .field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: 12px;
    color: var(--text2)
}

.about-us-admin-form .field input[type="text"],
.about-us-admin-form .field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    resize: vertical;
    line-height: 1.5
}

.about-us-admin-form .field-hint {
    font-size: 11px;
    color: var(--muted)
}

.about-us-admin-preview {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fafbfd;
    text-align: center
}

.about-us-admin-preview .about-intro-title {
    font-size: 1.2rem;
    margin-bottom: .45rem
}

.about-us-admin-preview .about-intro-lead,
.about-us-admin-preview .about-intro-detail {
    margin-left: auto;
    margin-right: auto
}

@media (max-width:720px) {
    .hero-slider-admin-item {
        grid-template-columns: 1fr
    }

    .hero-slider-admin-item__media {
        width: 100%;
        height: 160px
    }
}

.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--text);
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    z-index: 999;
    opacity: 0;
    transform: translateY(20px);
    transition: all .3s;
    pointer-events: none
}

.toast-success {
    background: var(--green);
    color: #fff
}

.toast-error {
    background: var(--err);
    color: #fff
}

.toast-warn {
    background: var(--warn);
    color: #1b1b1b
}

.toast.show {
    opacity: 1;
    transform: translateY(0)
}

.toggle {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--border);
    position: relative;
    cursor: pointer;
    transition: background .2s;
    display: inline-block
}

.toggle.on {
    background: var(--green)
}

.toggle::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: left .2s
}

.toggle.on::after {
    left: 18px
}

.report-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px solid #f0f3f7
}

.report-row:last-child {
    border: none
}

.loan-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.elig-label {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 3px
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px
}

.chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%
}

.modal-overlay .modal.modal--auth {
    width: min(400px, 95vw);
    max-width: 95vw;
    padding: 1.15rem 1.35rem 1.2rem;
    max-height: none;
    overflow: visible
}

.modal-auth-head {
    text-align: center;
    margin-bottom: .9rem
}

.modal-auth-head__icon {
    font-size: 1.65rem;
    line-height: 1;
    margin-bottom: .35rem
}

.modal-auth-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text)
}

.modal-auth-head p {
    margin: .3rem 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4
}

.modal--auth .form-group {
    margin-bottom: .7rem
}

.modal--auth .form-group label {
    margin-bottom: .28rem
}

.password-field-wrap {
    position: relative;
    display: block
}

.password-field-wrap input {
    width: 100%;
    padding-right: 2.6rem !important
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--muted);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
    color: var(--primary);
    outline: none;
    background: color-mix(in srgb, var(--primary) 8%, transparent)
}

.password-toggle-btn__icon {
    width: 18px;
    height: 18px;
    display: none
}

.password-toggle-btn__icon--show {
    display: block
}

.password-toggle-btn.is-visible .password-toggle-btn__icon--show {
    display: none
}

.password-toggle-btn.is-visible .password-toggle-btn__icon--hide {
    display: block
}

.modal-field-hint {
    font-size: 11px;
    color: var(--muted);
    margin: .3rem 0 0;
    line-height: 1.35
}

.modal-auth-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    flex-wrap: wrap
}

.modal-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text2)
}

.modal-auth-link {
    font-size: 12px;
    color: var(--primary);
    cursor: pointer
}

.modal-auth-submit {
    width: 100%;
    padding: 10px
}

.modal-otp-hint {
    margin: 0 0 .75rem;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    font-size: 13px;
    font-weight: 600;
    text-align: center
}

.modal-otp-meta {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: .75rem;
    line-height: 1.4
}

.modal-form-error {
    font-size: 12px;
    color: var(--err);
    margin-bottom: .5rem
}

.modal-contact-foot {
    font-size: 11px;
    color: var(--muted);
    margin-top: .65rem;
    text-align: center;
    line-height: 1.4
}

.modal--auth .form-footer {
    margin-top: .65rem
}

.modal--auth .alert {
    margin-bottom: .75rem;
    padding: .55rem .65rem;
    font-size: 12px
}

.modal--auth .captcha-row {
    margin-bottom: .35rem
}

.content img:not([width]),
.card img:not([width]) {
    max-width: 100%;
    height: auto
}

/* Tablet */
@media (max-width: 1024px) {
    body {
        zoom: 1
    }

    .navbar {
        padding: .6rem 1rem;
        height: auto;
        min-height: 64px;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: .55rem;
        flex-wrap: wrap
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        flex: 0 0 auto
    }

    .nav-logo {
        flex: 1 1 auto
    }

    .nav-links {
        display: none;
        width: 100%;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: .65rem;
        margin-top: .2rem;
        gap: .45rem;
        flex-direction: column;
        align-items: stretch
    }

    .nav-links.open {
        display: flex
    }

    .nav-links a {
        font-size: 12px;
        padding: .4rem .5rem;
        border-radius: 6px;
        background: #f6f8fe
    }

    .nav-links .btn {
        width: 100%;
        justify-content: center
    }

    .hero:not(.hero-fullbleed) {
        padding: 1.75rem 1rem 1.5rem
    }

    .hero-fullbleed {
        --hero-min-h: calc((100svh - 6.5rem) * 0.56)
    }

    .hero-inner {
        padding: 1.5rem 1rem 4.25rem
    }

    .hero-fullbleed .hero-content {
        max-width: 100%;
        padding: 1.1rem 1.15rem
    }

    .hero-bg-img {
        object-position: 65% center
    }

    .hero-overlay {
        background: transparent
    }

    .hero h1 {
        font-size: 26px
    }

    .hero-slider:not(.hero-slider--full) {
        transform: none;
        filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .2))
    }

    .public-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: .65rem 1rem;
        margin: 1.15rem auto
    }

    .about-split {
        grid-template-columns: 1fr
    }

    .about-intro-inner {
        padding: 1.1rem 1rem 1rem
    }

    .about-intro-lead {
        font-size: 14px
    }

    .about-intro-detail {
        font-size: 12px
    }

    .about-features {
        grid-template-columns: 1fr
    }

    .why-grid,
    .resource-grid,
    .safety-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sections {
        padding: 1rem
    }

    .public-top-strip,
    .public-footer,
    .public-stats {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .public-section {
        padding: 1.85rem 1rem
    }

    #support.public-section {
        padding-top: .925rem
    }

    .public-section--safety {
        padding-top: 2rem;
        padding-bottom: 2rem
    }

    .safety-shell {
        padding: 1.1rem 1rem
    }

    .hero-split {
        grid-template-columns: 1fr
    }

    .hero-landing {
        --hero-min-h: auto;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible
    }

    .hero-landing.hero-fullbleed,
    .hero-landing .hero-slide--full,
    .hero-landing .hero-slide-media--full,
    .hero-landing .hero-inner {
        min-height: 0;
        height: auto
    }

    .hero-landing .hero-slider--full {
        position: absolute;
        inset: 0
    }

    .hero-landing-grid {
        grid-template-columns: 1fr;
        gap: 1.15rem;
        height: auto
    }

    .hero-inner--landing {
        padding: 1.35rem 1.15rem 4.35rem;
        min-height: min(68svh, 620px)
    }

    .hero-content--panel {
        padding: 1.15rem 1.1rem 1.1rem;
        border-radius: 18px;
        max-width: 520px
    }

    .hero-brand-mark {
        font-size: 1.15rem
    }

    .hero-overlay--landing {
        background:
            linear-gradient(180deg,
                rgba(248, 251, 255, .92) 0%,
                rgba(248, 251, 255, .72) 38%,
                rgba(248, 251, 255, .28) 62%,
                rgba(15, 61, 122, .28) 100%)
    }

    .home-loan-calc {
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
        align-self: auto
    }

    .home-features {
        margin-top: .85rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        padding-left: 1rem;
        padding-right: 1rem
    }

    .home-services-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: .85rem
    }

    .home-service-item {
        grid-column: span 2
    }

    .home-service-item:nth-child(4),
    .home-service-item:nth-child(5) {
        grid-column: span 3
    }

    .home-why-grid {
        grid-template-columns: 1fr;
        gap: 1.35rem
    }

    .home-why-media-frame,
    .home-why-media .img-shimmer,
    .home-why-media-frame img,
    .home-why-img {
        min-height: 240px
    }

    .home-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .home-contact-cta {
        align-items: flex-start;
        gap: 1rem
    }

    .home-contact-cta__btn {
        margin-left: auto
    }

    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .product-grid,
    .notice-grid {
        grid-template-columns: 1fr 1fr
    }

    .milestone-track {
        max-width: 520px;
        padding-top: 0
    }

    .milestone-steps {
        grid-template-columns: 1fr;
        gap: 0
    }

    .milestone-track::before {
        left: 22px;
        top: 23px;
        bottom: 23px;
        width: 3px;
        height: auto;
        right: auto;
        background: linear-gradient(180deg, var(--primary), rgba(74, 111, 198, .38))
    }

    .milestone-step {
        flex-direction: row;
        align-items: stretch;
        text-align: left;
        gap: 1.15rem;
        padding: 0 0 1.5rem;
        padding-left: .25rem;
        height: auto
    }

    .milestone-step:last-child {
        padding-bottom: 0
    }

    .milestone-content {
        margin-top: 0;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .milestone-content p {
        flex: 0 1 auto
    }

    .hero-photo {
        min-height: 240px;
        max-height: 300px
    }

    .public-footer {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 1.25rem;
        padding-top: 2.1rem;
        padding-bottom: 2.35rem
    }

    .public-footer .footer-brand-col,
    .public-footer .footer-contact {
        grid-column: 1 / -1
    }

    .public-footer--landing {
        padding: 0
    }

    .public-footer--landing .footer-shell {
        padding: 1.6rem 1rem 0
    }

    .public-footer--landing .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 1.35rem 1.1rem
    }

    .public-footer--landing .footer-brand-col,
    .public-footer--landing .footer-contact {
        grid-column: 1 / -1
    }

    .hero-slide-caption {
        max-width: none
    }

    .dash-layout {
        position: relative;
        height: auto;
        max-height: none;
        min-height: 100vh;
        overflow: visible
    }

    html:has(.dash-layout),
    html:has(.dash-layout) body,
    html:has(.dash-layout) #app {
        height: auto;
        max-height: none;
        overflow: visible
    }

    .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        color: var(--text);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        z-index: 12;
        flex-shrink: 0
    }

    .mobile-topbar-logo {
        display: none
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(280px, 85vw);
        height: 100vh;
        max-height: 100vh;
        transform: translateX(-100%);
        transition: transform .22s ease;
        z-index: 30;
        overflow: hidden;
        display: flex;
        flex-direction: column
    }

    .sidebar-brand {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #0D1B3E
    }

    .sidebar-nav {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }

    .dash-layout.sidebar-open .sidebar {
        transform: translateX(0)
    }

    .mobile-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .35);
        border: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        cursor: pointer
    }

    .dash-layout.sidebar-open .mobile-sidebar-overlay {
        display: block
    }

    .main-area {
        flex: 1;
        width: 100%;
        min-width: 0;
        overflow: visible
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 15;
        height: auto;
        min-height: 56px;
        padding: .6rem 1rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem
    }

    .topbar-title {
        font-size: 16px;
        flex: 1 1 auto;
        min-width: 0
    }

    .topbar-right {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem;
        margin-left: auto
    }

    .topbar-right>.btn {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.35
    }

    .dash-search-wrap {
        flex: 1 1 160px;
        min-width: 0;
        max-width: 100%
    }

    .content {
        padding: .9rem;
        overflow-y: visible
    }

    .dash-layout .content {
        overflow-y: visible
    }

    .card-title {
        font-size: 16px
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .dash-queue-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .dash-queue-kpis--member,
    .dash-queue-kpis--admin {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .dash-queue-kpis--staff {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .role-nav-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem
    }

    .role-dash-nav {
        padding: 1rem
    }

    .role-dash-nav__head {
        flex-direction: column;
        align-items: flex-start
    }

    .role-dash-nav__stats {
        justify-content: flex-start;
        width: 100%
    }

    .role-nav-kpi {
        min-height: 124px
    }

    .dash-ops-queue-panel__head {
        flex-direction: column;
        gap: .65rem
    }

    .dash-ops-queue-panel--approver .dash-queue-kpis,
    .dash-ops-queue-panel--am .dash-queue-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .dash-portfolio-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .dash-aging-grid {
        grid-template-columns: 1fr
    }

    .member-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .grid-2:not(.member-dash-summary-grid):not(.admin-dash-summary-grid),
    .grid-3,
    .loan-form {
        grid-template-columns: 1fr
    }

    .staff-dash .staff-dash-metrics-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto
    }

    .staff-dash .staff-dash-metrics-grid>.staff-dash-metric-card:nth-child(1),
    .staff-dash .staff-dash-metrics-grid>.staff-dash-metric-card:nth-child(2),
    .staff-dash .staff-dash-metrics-grid>.staff-dash-metric-card--mix {
        grid-column: 1;
        grid-row: auto;
        height: auto
    }

    .staff-dash .staff-dash-metric-card--mix .staff-dash-metric-card__mix {
        justify-content: center
    }

    .member-dash-summary-grid,
    .admin-dash-summary-grid {
        grid-template-columns: 1fr 1fr
    }

    .admin-dash-hero__pills {
        grid-template-columns: 1fr 1fr;
        flex: 1 1 100%
    }

    .wizard-header {
        padding: .75rem 1rem;
        flex-wrap: wrap
    }

    .wizard-body {
        padding: 1rem
    }

    .form-row,
    .form-row.three {
        grid-template-columns: 1fr
    }

    .wizard-nav {
        gap: .5rem;
        flex-wrap: wrap
    }

    .wizard-progress-bar {
        margin-bottom: 1.25rem;
        -webkit-overflow-scrolling: touch
    }

    .wizard-payment-grid,
    .wizard-payment-grid--details {
        grid-template-columns: 1fr
    }

    .wizard-payment-qr-img {
        max-width: min(220px, 100%)
    }

    .wizard-progress-bar .prog-step {
        flex: 0 0 auto;
        min-width: 48px
    }

    .detail-overlay {
        width: min(92vw, 520px)
    }

    .detail-row-pair {
        grid-template-columns: 1fr
    }

    .donut-wrap {
        flex-direction: column;
        align-items: flex-start
    }

    .donut-legend--grid {
        grid-template-columns: 1fr
    }

    .loan-status-3d,
    .loan-status-pro__grid {
        grid-template-columns: 1fr
    }

    .loan-status-3d__donut-tilt,
    .loan-status-pro__donut-tilt {
        transform: perspective(560px) rotateX(14deg)
    }

    .loan-status-pro__kpis,
    .disburse-chart-summary,
    .admin-twin-chart-kpis,
    .staff-twin-chart__stats--triple {
        grid-template-columns: 1fr
    }

    .admin-dash-twin-charts-row>.admin-dash-twin-chart-card,
    .staff-dash .staff-dash-twin-chart-card {
        min-height: 0
    }

    .admin-funnel-pro__stage-inner {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto
    }

    .admin-funnel-pro__conv {
        grid-column: 1 / -1;
        justify-self: flex-start
    }

    .loan-status-pro__stat {
        transform: none
    }

    .dash-bar-chart {
        overflow-x: auto;
        padding-bottom: .2rem
    }

    .dash-bar-chart__col {
        flex: 0 0 auto;
        min-width: 34px
    }

    .dash-chart-summary {
        grid-template-columns: 1fr
    }

    .dash-dual-chart {
        overflow-x: auto;
        padding-bottom: .2rem
    }

    .dash-dual-chart__col {
        flex: 0 0 auto;
        min-width: 38px
    }

    .member-activity-chart {
        overflow-x: auto;
        min-width: 0;
        padding-bottom: .25rem
    }

    .member-activity-chart-col {
        flex: 0 0 auto;
        min-width: 36px
    }

    .member-activity-bar {
        width: 24px
    }

    .card table,
    .content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap
    }

    .modal-overlay {
        align-items: flex-start;
        justify-content: center;
        padding: .75rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }

    .modal-overlay .modal:not(.modal--auth) {
        margin: auto 0;
        max-height: min(90vh, 640px);
        overflow: auto
    }

    .modal-overlay .modal.modal--auth {
        margin: .5rem auto;
        max-height: min(90dvh, 640px);
        overflow: auto;
        -webkit-overflow-scrolling: touch
    }

    .legal-body {
        grid-template-columns: 1fr;
        padding: 1rem
    }

    .legal-nav {
        position: static
    }

    .legal-article {
        padding: 1.25rem 1rem
    }

    .closure-form-grid {
        grid-template-columns: 1fr
    }
}

/* Mobile */
@media (max-width: 768px) {

    .member-dash-summary-grid,
    .admin-dash-summary-grid {
        grid-template-columns: 1fr
    }

    .admin-dash-hero {
        padding: 1rem 1.05rem
    }

    .admin-dash-hero__pills {
        grid-template-columns: 1fr
    }

    .admin-portfolio-snapshot {
        grid-template-columns: 1fr
    }

    .admin-panel-head .btn {
        width: 100%
    }

    .member-activity-stats {
        grid-template-columns: 1fr
    }

    .member-activity-amchart {
        height: 320px;
        min-height: 280px
    }
}

@media (max-width: 640px) {
    .mobile-topbar-logo {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        line-height: 0;
        white-space: nowrap
    }

    .mobile-topbar-logo .mobile-brand-logo,
    .mobile-topbar-logo .brand-logo {
        height: 32px;
        width: auto;
        max-width: 130px;
        object-fit: contain;
        vertical-align: middle
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 15;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "menu logo user"
            "search search search";
        align-items: center;
        row-gap: .45rem;
        column-gap: .55rem
    }

    .topbar:has(.topbar-notif-wrap) {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas:
            "menu logo notif user"
            "search search search search"
    }

    .topbar:has(.topbar-portal-switch) {
        grid-template-areas:
            "menu logo user"
            "portal portal portal"
            "search search search"
    }

    .topbar:has(.topbar-notif-wrap):has(.topbar-portal-switch) {
        grid-template-areas:
            "menu logo notif user"
            "portal portal portal portal"
            "search search search search"
    }

    .topbar-title {
        display: none
    }

    .topbar-notif-wrap {
        grid-area: notif;
        justify-self: end
    }

    .topbar-portal-switch {
        grid-area: portal;
        display: inline-flex !important;
        width: 100%;
        justify-content: center;
        align-self: stretch;
        white-space: normal;
        text-align: center;
        line-height: 1.35
    }

    .sidebar {
        width: min(80vw, 300px)
    }

    .card-title {
        font-size: 16px
    }

    .detail-overlay {
        width: 100%;
        max-width: 100%;
        border-left: none;
        box-shadow: none
    }

    .member-activity-bar {
        width: 18px
    }

    .member-activity-chart {
        height: 200px
    }

    .member-activity-chart-bars {
        height: 150px
    }

    .btn {
        padding: 7px 12px;
        font-size: 12px
    }

    .btn-sm {
        padding: 5px 9px;
        font-size: 11px
    }

    .navbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .35rem;
        flex-wrap: wrap
    }

    .hero {
        text-align: left
    }

    .hero-fullbleed {
        --hero-min-h: min(43.7svh, 358px)
    }

    .hero-landing {
        --hero-min-h: auto;
        height: auto;
        min-height: 0;
        max-height: none
    }

    .hero-inner--landing {
        padding: 1rem .85rem 3.85rem;
        min-height: 0;
        justify-content: flex-start
    }

    .hero-landing h1 {
        font-size: 1.5rem
    }

    .hero-brand-mark {
        font-size: 1.05rem;
        margin-bottom: .45rem
    }

    .hero-landing .hero-lead {
        font-size: 13px;
        margin-bottom: .85rem
    }

    .hero-landing .hero-btns {
        gap: .5rem
    }

    .hero-landing .hero-btns .btn {
        flex: 1 1 auto;
        min-width: calc(50% - .35rem);
        justify-content: center;
        min-height: 42px
    }

    .hero-trust-row {
        gap: .3rem
    }

    .hero-trust-row li {
        font-size: 10px;
        padding: .2rem .45rem
    }

    .hero-slide-caption {
        display: none
    }

    .home-features.public-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
        margin-top: .65rem;
        padding-left: .85rem;
        padding-right: .85rem
    }

    .home-feature-card {
        padding: .85rem .8rem .9rem
    }

    .home-feature-card .stat-icon {
        width: 40px;
        height: 40px;
        margin-bottom: .55rem
    }

    .home-feature-card .stat-value {
        font-size: .92rem
    }

    .home-feature-card .stat-label {
        font-size: 11px
    }

    .home-services.public-section {
        padding: 1.5rem .85rem
    }

    .home-section-lead {
        font-size: 12.5px;
        padding: 0 .25rem
    }

    .home-services-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem
    }

    .home-service-item,
    .home-service-item:nth-child(4),
    .home-service-item:nth-child(5) {
        grid-column: auto
    }

    .home-service-item:last-child {
        grid-column: 1 / -1;
        max-width: 220px;
        margin: 0 auto;
        width: 100%
    }

    .home-why.public-section {
        padding: 1.35rem .85rem 1.5rem
    }

    .home-why-list li {
        font-size: 13.5px;
        padding: .5rem .6rem
    }

    .home-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem
    }

    .home-trust {
        padding: 1.25rem .85rem 1.85rem
    }

    .home-trust-stat {
        padding: .8rem .7rem;
        gap: .55rem
    }

    .home-trust-stat strong {
        font-size: 1.05rem
    }

    .home-contact-cta-wrap {
        padding: .35rem .85rem 1.15rem
    }

    .home-contact-cta {
        flex-direction: column;
        align-items: stretch;
        padding: 1.1rem 1rem;
        gap: .9rem
    }

    .home-contact-cta__lead {
        min-width: 0;
        flex: 1 1 auto
    }

    .home-contact-cta__details {
        flex-direction: column;
        align-items: stretch;
        gap: .45rem
    }

    .home-contact-cta__detail {
        justify-content: center
    }

    .home-contact-cta__btn {
        width: 100%;
        margin-left: 0;
        text-align: center
    }

    .home-loan-calc__row {
        grid-template-columns: 1fr;
        gap: .3rem
    }

    .home-loan-calc__input-wrap {
        width: 100%;
        justify-content: space-between
    }

    .home-loan-calc input {
        width: 100%;
        text-align: right
    }

    .hero-fullbleed .hero-content {
        padding: 1rem 1.15rem
    }

    .hero-overlay {
        background: transparent
    }

    .hero-fullbleed .hero-slider-controls {
        bottom: .85rem;
        width: min(280px, calc(100% - 1.5rem))
    }

    .hero-btns {
        justify-content: flex-start
    }

    .hero-tags {
        margin-top: .75rem
    }

    .section-head h2 {
        font-size: 20px
    }

    .about-intro {
        margin-bottom: 1.25rem
    }

    .about-intro-eyebrow {
        font-size: 10px;
        padding: 4px 10px
    }

    .about-intro-pills li {
        font-size: 10px;
        padding: 4px 9px
    }

    .menu-grid,
    .product-grid,
    .notice-grid {
        grid-template-columns: 1fr
    }

    .public-footer {
        grid-template-columns: 1fr;
        gap: 1.35rem;
        padding: 2rem 1rem 2.35rem
    }

    .public-footer .footer-brand-col,
    .public-footer .footer-contact {
        grid-column: 1 / -1
    }

    .public-footer .footer-links-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.15rem .85rem;
        grid-column: 1 / -1
    }

    .public-footer .footer-col--links,
    .public-footer .footer-col--policies {
        min-width: 0
    }

    .public-footer .footer-col--links h4,
    .public-footer .footer-col--policies h4 {
        font-size: 13px
    }

    .public-footer .footer-link-list {
        padding-left: 1rem
    }

    .public-footer .footer-link-list a {
        font-size: 12px
    }

    .public-footer--landing {
        padding: 0
    }

    .public-footer--landing .footer-shell {
        padding: 1.35rem 1rem 0
    }

    .public-footer--landing .footer-top {
        grid-template-columns: 1fr;
        gap: 1.25rem
    }

    .public-footer--landing .footer-links-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem .75rem;
        grid-column: 1 / -1
    }

    .public-footer--landing .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding-bottom: 1.15rem
    }

    .hero-fullbleed .hero-slider-controls--landing {
        width: min(340px, calc(100% - 1.5rem))
    }

    .hero-photo {
        min-height: 200px;
        max-height: 230px
    }

    .slider-btn {
        width: 30px;
        height: 30px;
        font-size: 20px
    }

    .public-top-strip {
        font-size: 15px
    }

    .public-stats {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
        margin: 1rem auto
    }

    .public-section {
        padding: 1.65rem 1rem
    }

    #support.public-section {
        padding-top: .825rem
    }

    .safety-actions .btn {
        width: 100%;
        justify-content: center
    }

    .why-grid,
    .benefit-grid,
    .resource-grid,
    .safety-grid {
        grid-template-columns: 1fr
    }

    .stat-card {
        transform: none;
        padding: .6rem .7rem
    }

    .stat-card:hover {
        transform: none
    }

    .stat-value {
        font-size: 1.05rem
    }

    .hero h1 {
        font-size: 21px
    }

    .hero p {
        font-size: 13px
    }

    .card-media {
        max-height: 132px
    }

    .sidebar-brand {
        padding: 1rem
    }

    .sidebar-brand .sidebar-brand-logo,
    .sidebar-brand .brand-logo {
        height: 48px
    }

    .sidebar-nav {
        display: block;
        overflow: visible;
        padding: .55rem 0 .9rem
    }

    .nav-section {
        display: block;
        width: 100%;
        padding: .7rem 1rem .35rem;
        font-size: 10px
    }

    .nav-item {
        display: flex;
        width: auto;
        margin: 0 .6rem .2rem;
        padding: .6rem .75rem;
        border-radius: 8px;
        border-left: 0;
        white-space: normal;
        flex: none
    }

    .nav-item.active {
        border-left: 0
    }

    .mobile-menu-btn {
        grid-area: menu;
        align-self: center
    }

    .mobile-topbar-logo {
        grid-area: logo;
        position: static;
        transform: none;
        justify-self: center
    }

    .topbar-right {
        display: contents
    }

    .dash-search-wrap {
        grid-area: search;
        width: 100%;
        min-width: 0;
        max-width: none;
        flex: 1
    }

    .topbar-right>div:last-child {
        grid-area: user;
        justify-self: end
    }

    .avatar {
        width: 28px;
        height: 28px
    }

    .kpi-grid {
        grid-template-columns: 1fr
    }

    .dash-queue-kpis {
        grid-template-columns: 1fr
    }

    .dash-ops-queue-panel--approver .dash-queue-kpis,
    .dash-ops-queue-panel--am .dash-queue-kpis {
        grid-template-columns: 1fr
    }

    .dash-ops-queue-dist__legend {
        flex-direction: column;
        gap: .35rem
    }

    .card {
        padding: .75rem
    }

    .modal {
        padding: 1.1rem
    }

    .wizard-card {
        padding: 1rem
    }

    .doc-upload {
        padding: 1rem
    }

    .toast {
        right: .75rem;
        left: .75rem;
        bottom: .75rem
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap
    }

    th,
    td {
        padding: 7px 8px
    }

    .worklist-filters {
        flex-direction: column;
        align-items: stretch
    }

    .filter-select {
        width: 100%
    }

    .otp-row {
        flex-direction: column;
        align-items: stretch
    }

    .otp-row .btn {
        width: 100%
    }

    .topbar-notif-modal {
        max-width: 100%
    }

    .user-menu-dropdown {
        right: 0;
        left: auto;
        min-width: min(212px, calc(100vw - 1.5rem))
    }
}

.legal-page {
    background: var(--bg);
    min-height: 100vh
}

.legal-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap
}

.legal-header-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-right: auto;
    line-height: 0;
    flex-shrink: 0;
    max-width: min(200px, 42vw)
}

.legal-brand-logo,
.legal-header-brand .brand-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain
}

.legal-body {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start
}

.legal-nav {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    position: sticky;
    top: 1rem
}

.legal-nav h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 .75rem
}

.legal-nav a {
    display: block;
    font-size: 13px;
    color: var(--text2);
    padding: .45rem .5rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 2px
}

.legal-nav a:hover {
    background: var(--bg);
    color: var(--primary)
}

.legal-nav a.active {
    background: #e8effe;
    color: var(--primary);
    font-weight: 600
}

.legal-article {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem 2rem
}

.legal-article h1 {
    font-size: 1.65rem;
    margin: 0 0 .35rem;
    color: var(--text);
    letter-spacing: -.02em
}

.legal-article .legal-lead {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 .5rem;
    line-height: 1.55
}

.legal-meta {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border)
}

.legal-section {
    margin-bottom: 1.35rem
}

.legal-section h2 {
    font-size: 15px;
    margin: 0 0 .5rem;
    color: var(--text)
}

.legal-section p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text2);
    margin: 0 0 .65rem
}

.legal-list {
    margin: 0 0 .75rem;
    padding-left: 1.25rem;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text2)
}

.legal-list li {
    margin-bottom: .35rem
}

.legal-cta {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

@media (max-width: 768px) {
    .legal-body {
        grid-template-columns: 1fr;
        padding: 1rem
    }

    .legal-nav {
        position: static
    }

    .legal-article {
        padding: 1.25rem 1rem
    }
}

.closure-member-page .closure-intro-card {
    margin-bottom: 1rem
}

.ml-loan-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
    margin-top: .75rem;
    max-width: 640px
}

.ml-loan-action-row .ml-loan-action-btn {
    flex: 1 1 0;
    min-width: 160px;
    max-width: 320px;
    width: auto
}

.app-track-page {
    background:
        radial-gradient(ellipse 70% 45% at 15% -5%, rgba(42, 79, 138, .1), transparent 55%),
        radial-gradient(ellipse 55% 35% at 95% 0%, rgba(31, 138, 99, .08), transparent 50%),
        var(--bg)
}

.app-track-body {
    padding-top: 1.75rem;
    padding-bottom: 2.5rem
}

.app-track-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text)
}

.app-track-card {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.35rem 1.5rem 1.5rem;
    border: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(13, 27, 62, .06)
}

.app-track-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem 1.25rem;
    border-radius: 14px;
    margin-bottom: 1rem;
    border: 1px solid transparent
}

.app-track-hero__main {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    min-width: 0
}

.app-track-hero__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0
}

.app-track-hero__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    opacity: .85;
    margin-bottom: .2rem
}

.app-track-hero__title {
    font-size: 18px;
    line-height: 1.25;
    margin: 0 0 .35rem;
    color: var(--text)
}

.app-track-hero__subtitle {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text2);
    max-width: 52ch
}

.app-track-hero__progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0
}

.app-track-hero__progress-ring {
    --app-track-progress: 0;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(currentColor calc(var(--app-track-progress) * 1%), rgba(255, 255, 255, .35) 0);
    position: relative
}

.app-track-hero__progress-ring::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #fff
}

.app-track-hero__progress-value {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.app-track-hero__progress-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 600
}

.app-track-hero--success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
    color: var(--green)
}

.app-track-hero--success .app-track-hero__icon {
    background: rgba(31, 138, 99, .14);
    color: var(--green)
}

.app-track-hero--success .app-track-hero__progress-ring {
    color: var(--green)
}

.app-track-hero--danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
    color: var(--err)
}

.app-track-hero--danger .app-track-hero__icon {
    background: rgba(169, 58, 74, .12);
    color: var(--err)
}

.app-track-hero--danger .app-track-hero__progress-ring {
    color: var(--err)
}

.app-track-hero--warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
    color: #b45309
}

.app-track-hero--warning .app-track-hero__icon {
    background: rgba(201, 168, 76, .18);
    color: #b45309
}

.app-track-hero--warning .app-track-hero__progress-ring {
    color: #b45309
}

.app-track-hero--review {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #ddd6fe;
    color: #6c3fb5
}

.app-track-hero--review .app-track-hero__icon {
    background: rgba(108, 63, 181, .12);
    color: #6c3fb5
}

.app-track-hero--review .app-track-hero__progress-ring {
    color: #6c3fb5
}

.app-track-hero--info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
    color: var(--info)
}

.app-track-hero--info .app-track-hero__icon {
    background: rgba(42, 79, 138, .12);
    color: var(--info)
}

.app-track-hero--info .app-track-hero__progress-ring {
    color: var(--info)
}

.app-track-ref-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    padding: 1rem 1.1rem;
    margin-bottom: .85rem
}

.app-track-ref-card__code-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    margin-top: .35rem
}

.app-track-ref__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 600
}

.app-track-ref__value {
    display: block;
    font-family: Consolas, monospace;
    font-size: 18px;
    color: var(--primary)
}

.app-track-copy-btn {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--info);
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: .28rem .75rem;
    cursor: pointer;
    transition: background .15s, border-color .15s
}

.app-track-copy-btn:hover {
    background: #f8fbff;
    border-color: #c4d4fc
}

.app-track-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .65rem;
    margin-bottom: 1rem
}

.app-track-meta-card {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff
}

.app-track-meta-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0
}

.app-track-meta-card__label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: .15rem
}

.app-track-meta-card__value {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text)
}

.app-track-remarks {
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    border: 1px solid #fcd34d;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)
}

.app-track-remarks__head {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: 13px;
    color: #92400e;
    margin-bottom: .35rem
}

.app-track-remarks__icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.app-track-remarks__text {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #78350f;
    white-space: pre-wrap
}

.app-track-timeline {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 1rem 1.05rem 1.05rem;
    margin-bottom: 1rem
}

.app-track-timeline__title {
    margin: 0 0 .2rem;
    font-size: 14px;
    color: var(--text)
}

.app-track-timeline__subtitle {
    margin: 0 0 .85rem;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5
}

.app-track-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: .85rem
}

.app-track-help {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    border: 1px dashed var(--border);
    background: var(--bg)
}

.app-track-help__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0
}

.app-track-help__title {
    display: block;
    font-size: 12px;
    color: var(--text);
    margin-bottom: .15rem
}

.app-track-help__text {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted)
}

.app-track-error {
    text-align: center;
    padding: 1.5rem 1rem 1rem
}

.app-track-error__icon {
    font-size: 42px;
    margin-bottom: .65rem
}

.app-track-error__title {
    margin: 0 0 .35rem;
    font-size: 16px;
    color: var(--text)
}

.app-track-error__text {
    margin: 0 0 .35rem;
    font-size: 12px;
    color: var(--err);
    line-height: 1.55
}

.app-track-error__hint {
    margin: 0 0 1rem;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55
}

.app-track-skeleton__hero,
.app-track-skeleton__card,
.app-track-skeleton__timeline {
    border-radius: 12px;
    background: linear-gradient(90deg, #eef2f8 0%, #f8fafc 45%, #eef2f8 100%);
    background-size: 200% 100%;
    animation: app-track-shimmer 1.35s ease-in-out infinite
}

.app-track-skeleton__hero {
    height: 110px;
    margin-bottom: .85rem
}

.app-track-skeleton__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: .85rem
}

.app-track-skeleton__card {
    height: 72px
}

.app-track-skeleton__timeline {
    height: 220px
}

@keyframes app-track-shimmer {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}

.app-track-summary {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem
}

.app-track-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-top: .9rem;
    font-size: 12px
}

.app-track-meta span {
    display: block;
    color: var(--muted);
    margin-bottom: .2rem
}

.app-track-milestones {
    list-style: none;
    margin: 0;
    padding: 0
}

.app-track-milestone {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: .85rem;
    position: relative;
    padding-bottom: 1.15rem
}

.app-track-milestone:not(.app-track-milestone--last)::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--border)
}

.app-track-milestone--completed:not(.app-track-milestone--last)::after {
    background: var(--green)
}

.app-track-milestone--active:not(.app-track-milestone--last)::after {
    background: linear-gradient(180deg, var(--info) 0%, var(--border) 100%)
}

.app-track-milestone__marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: #fff;
    position: relative;
    z-index: 1
}

.app-track-milestone--completed .app-track-milestone__marker {
    border-color: var(--green);
    background: var(--green)
}

.app-track-milestone--completed .app-track-milestone__marker::after {
    content: "✓";
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.app-track-milestone--active .app-track-milestone__marker {
    border-color: var(--info);
    box-shadow: 0 0 0 4px rgba(42, 79, 138, .12)
}

.app-track-milestone--active .app-track-milestone__marker::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--info);
    display: block;
    margin: 7px auto 0
}

.app-track-milestone--active .app-track-milestone__body {
    background: #f8fbff;
    border-color: #c4d4fc
}

.app-track-milestone--failed .app-track-milestone__marker {
    border-color: var(--err);
    background: var(--err)
}

.app-track-milestone--failed .app-track-milestone__marker::after {
    content: "!";
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.app-track-milestone__body {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .65rem .75rem;
    background: #fff
}

.app-track-milestone__head {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap
}

.app-track-milestone__icon {
    font-size: 14px;
    line-height: 1
}

.app-track-milestone__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text)
}

.app-track-milestone__badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: #e8effe;
    color: var(--info)
}

.app-track-milestone__badge--done {
    background: #e6f9f0;
    color: var(--green)
}

.app-track-milestone__badge--failed {
    background: #fde8e8;
    color: var(--err)
}

.app-track-milestone__desc {
    margin: .35rem 0 0;
    font-size: 12px;
    color: var(--text2);
    line-height: 1.55
}

.app-track-milestone__date {
    margin-top: .35rem;
    font-size: 11px;
    color: var(--muted)
}


@media (max-width: 720px) {
    .app-track-card {
        padding: 1rem
    }

    .app-track-hero {
        flex-direction: column;
        align-items: stretch
    }

    .app-track-hero__progress {
        flex-direction: row;
        justify-content: flex-start;
        gap: .65rem
    }

    .app-track-ref-card {
        flex-direction: column;
        align-items: stretch
    }

    .app-track-skeleton__cards {
        grid-template-columns: 1fr
    }

    .app-track-milestone__badge {
        margin-left: 0
    }
}

.closure-workflow-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    font-size: 11px;
    color: var(--muted);
    padding: .5rem .65rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px
}

.closure-status-banner {
    margin-top: .75rem;
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fffbeb
}

.closure-status-banner--open {
    border-color: #fcd34d;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)
}

.closure-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem
}

.closure-checks-list .config-row {
    padding: .45rem 0
}

.closure-summary-text {
    margin-top: .75rem;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5
}

.closure-decision-panel {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg)
}

.closure-decision-panel--readonly .mr-detail-remarks {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text2);
    white-space: pre-wrap
}

.closure-detail-layout {
    margin-top: .25rem
}

@media (max-width: 768px) {
    .closure-form-grid {
        grid-template-columns: 1fr
    }
}

/* bootstrap-datepicker — input + icon group, calendar opens below field */
.platform-date-wrap {
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    cursor: pointer
}

.form-group .platform-date-wrap {
    width: 100%
}

.platform-date-wrap>.platform-date-input,
.platform-date-wrap>input.platform-date-input,
.form-group .platform-date-wrap>input.platform-date-input,
.form-group .platform-date-wrap>input {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 38px;
    margin: 0 !important;
    padding-right: 44px !important;
    box-sizing: border-box;
    cursor: pointer;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important
}

.platform-date-wrap>.platform-date-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: auto;
    padding: 0;
    margin: 0 !important;
    border: 1.5px solid var(--border);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #f6f8fc;
    color: var(--primary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease
}

.platform-date-toggle:hover,
.platform-date-toggle:focus-visible {
    background: #e8eef9;
    color: var(--primary);
    outline: none
}

.filter-select.platform-date-input,
.platform-date-wrap .filter-select.platform-date-input {
    min-height: auto
}

.datepicker.dropdown-menu.platform-datepicker {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    font-family: var(--font-sans);
    padding: 8px 10px 10px;
    z-index: 10050;
    position: fixed !important;
    max-width: calc(100vw - 16px);
    box-sizing: border-box
}

.datepicker.platform-datepicker .datepicker-switch,
.datepicker.platform-datepicker tfoot .today,
.datepicker.platform-datepicker tfoot .clear {
    font-weight: 700;
    color: var(--text)
}

.datepicker.platform-datepicker .datepicker-switch:hover,
.datepicker.platform-datepicker tfoot .today:hover {
    background: #e8eef9;
    border-radius: 8px
}

.datepicker.platform-datepicker td,
.datepicker.platform-datepicker th {
    border-radius: 8px;
    color: var(--text2);
    font-weight: 500
}

.datepicker.platform-datepicker td.day:hover,
.datepicker.platform-datepicker td.focused {
    background: #e8eef9
}

.datepicker.platform-datepicker td.active,
.datepicker.platform-datepicker td.active:hover,
.datepicker.platform-datepicker td span.active,
.datepicker.platform-datepicker td span.active:hover,
.datepicker.platform-datepicker td span.focused {
    background: var(--primary) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 8px
}

.datepicker.platform-datepicker td.today,
.datepicker.platform-datepicker td span.today {
    border-color: var(--warn)
}

.datepicker.platform-datepicker td span:hover {
    background: #e8eef9;
    border-radius: 8px
}

.datepicker.platform-datepicker .datepicker-months td span,
.datepicker.platform-datepicker .datepicker-years td span {
    display: block;
    float: left;
    width: 25%;
    height: 42px;
    line-height: 42px;
    margin: 2px 0;
    text-align: center;
    border-radius: 8px
}

.datepicker.platform-datepicker .datepicker-months table,
.datepicker.platform-datepicker .datepicker-years table {
    width: 100%
}

.datepicker.platform-datepicker .datepicker-months table tr,
.datepicker.platform-datepicker .datepicker-years table tr {
    display: block
}

.datepicker.platform-datepicker .datepicker-months table td,
.datepicker.platform-datepicker .datepicker-years table td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0
}

.datepicker.platform-datepicker .datepicker-months table td:after,
.datepicker.platform-datepicker .datepicker-years table td:after {
    content: "";
    display: block;
    clear: both
}

.datepicker.platform-datepicker .prev,
.datepicker.platform-datepicker .next {
    color: var(--primary)
}

.master-type-form {
    padding: 1.1rem 1.15rem 0;
    overflow: hidden
}

.master-type-form.expenditure-form {
    overflow: visible
}

.expenditure-form__body .form-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start
}

.expenditure-form__body .form-group {
    min-width: 0
}

.expenditure-form__body .form-group select {
    min-height: 2.5rem;
    max-width: 100%
}

.master-type-form__header {
    margin-bottom: 1rem
}

.master-type-form__back {
    margin-bottom: .85rem
}

.master-type-form__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap
}

.master-type-form__title-copy {
    min-width: 0
}

.master-type-form__title-line {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap
}

.master-type-form__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25
}

.master-type-form__subtitle {
    margin: .35rem 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 52rem
}

.master-type-form__badge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border: 1px solid transparent
}

.master-type-form__badge--new {
    color: #0f5f46;
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .22)
}

.master-type-form__badge--edit {
    color: #7c4a03;
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .24)
}

.master-type-form__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
    gap: 1rem;
    align-items: start
}

.master-type-form__main {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0
}

.master-type-form__section {
    border: 1px solid rgba(214, 223, 240, .95);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 255, .92));
    padding: .9rem .95rem .95rem;
    box-shadow: 0 8px 22px rgba(13, 27, 62, .04)
}

.master-type-form__section-head {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .8rem
}

.master-type-form__section-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, .08);
    border: 1px solid rgba(37, 99, 235, .12);
    font-size: 14px;
    flex-shrink: 0
}

.master-type-form__section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.master-type-form__section-sub {
    margin: .18rem 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted)
}

.master-type-form__section-body .form-row {
    gap: .85rem
}

.master-type-form__section-body .form-group {
    margin-bottom: 0
}

.master-type-form__hint {
    margin: .35rem 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted)
}

.master-type-form__textarea-group textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    padding: .55rem .65rem;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text)
}

.master-type-form__textarea-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12)
}

.master-type-form__aside {
    position: sticky;
    top: .75rem
}

.master-type-form__preview-card {
    border: 1px solid rgba(214, 223, 240, .95);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(13, 27, 62, .06)
}

.master-type-form__preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
    padding: .9rem .95rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(248, 250, 255, .95), rgba(255, 255, 255, 1))
}

.master-type-form__preview-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, .1);
    border: 1px solid rgba(16, 185, 129, .18);
    font-size: 15px;
    flex-shrink: 0
}

.master-type-form__preview-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3
}

.master-type-form__preview-code {
    margin-top: .15rem;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--muted)
}

.master-type-form__preview-body {
    padding: .75rem .95rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .45rem
}

.master-type-form__preview-row {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: .55rem;
    align-items: start;
    padding: .35rem 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .06);
    font-size: 12px
}

.master-type-form__preview-row:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.master-type-form__preview-label {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4
}

.master-type-form__preview-value {
    color: var(--text2);
    line-height: 1.45;
    text-align: right
}

.master-type-form__preview-muted {
    color: var(--muted);
    font-style: italic
}

.master-type-form__preview-notes {
    display: block;
    text-align: right;
    white-space: pre-wrap;
    word-break: break-word
}

.master-type-form__chip-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: flex-end
}

.master-type-form__chip {
    display: inline-flex;
    align-items: center;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: #1d4ed8;
    background: rgba(37, 99, 235, .1);
    border: 1px solid rgba(37, 99, 235, .16)
}

.master-type-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 1rem -1.15rem 0;
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--border);
    background: rgba(248, 250, 255, .82)
}

.master-type-form__footer-note {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
    max-width: 34rem
}

.master-type-form__footer-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto
}

.expenditure-form__body {
    max-width: 44rem
}

.expenditure-form__body .form-group textarea {
    min-height: 5.5rem;
    resize: vertical
}

@media (max-width: 720px) {
    .expenditure-form__body .form-row {
        grid-template-columns: 1fr
    }
}

@media (max-width: 980px) {
    .master-type-form__layout {
        grid-template-columns: 1fr
    }

    .master-type-form__aside {
        position: static
    }

    .master-type-form__preview-value,
    .master-type-form__preview-notes {
        text-align: left
    }

    .master-type-form__chip-list {
        justify-content: flex-start
    }
}

@media (max-width: 640px) {
    .master-type-form {
        padding: .95rem .9rem 0
    }

    .master-type-form__footer {
        margin-left: -.9rem;
        margin-right: -.9rem;
        padding-left: .9rem;
        padding-right: .9rem
    }

    .master-type-form__section-body .form-row,
    .master-type-form__preview-row {
        grid-template-columns: 1fr
    }
}

.unit-master-page {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.unit-master-page__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(214, 223, 240, .95);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(248, 250, 255, .98), rgba(255, 255, 255, 1));
    box-shadow: 0 10px 28px rgba(13, 27, 62, .05)
}

.unit-master-page__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text)
}

.unit-master-page__subtitle {
    margin: .35rem 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 44rem
}

.unit-master-page__hero-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: rgba(37, 99, 235, .08);
    border: 1px solid rgba(37, 99, 235, .12);
    flex-shrink: 0
}

.unit-master-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1rem;
    align-items: stretch
}

.unit-master-page__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.unit-master-page__panel-head {
    padding: 1rem 1.05rem .85rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(248, 250, 255, .92), rgba(255, 255, 255, 1))
}

.unit-master-page__panel-head--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem
}

.unit-master-page__panel-head-copy {
    min-width: 0
}

.unit-master-page__panel-title-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap
}

.unit-master-page__panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.unit-master-page__panel-sub {
    margin: .28rem 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted)
}

.unit-master-page__panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: .9rem 1.05rem
}

.unit-master-page__form-scroll {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.unit-master-page__form-scroll .master-type-form__section {
    margin: 0
}

.unit-master-page__panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .8rem 1.05rem;
    border-top: 1px solid var(--border);
    background: rgba(248, 250, 255, .82)
}

.unit-master-page__footer-note {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
    max-width: 18rem
}

.unit-master-page__panel-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto
}

.unit-master-page__list-host {
    display: flex;
    flex-direction: column;
    min-height: 0
}

.unit-master-page__loading,
.unit-master-page__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 280px;
    padding: 1.5rem 1rem;
    color: var(--muted);
    font-size: 12px
}

.unit-master-page__empty-icon {
    font-size: 2rem;
    margin-bottom: .5rem;
    opacity: .85
}

.unit-master-page__empty-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.unit-master-page__empty-hint {
    margin: .35rem 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
    max-width: 16rem
}

.unit-master-page__table-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff
}

.unit-master-page__table {
    margin: 0;
    width: 100%
}

.unit-master-page__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--text2)
}

.unit-master-page__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .8rem;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
    margin-top: auto
}

.unit-master-page__code--locked,
.unit-master-page__panel .form-group input:disabled {
    background: rgba(248, 250, 255, .95);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 1
}

.unit-master-page__pagination-actions {
    display: flex;
    gap: .35rem
}

@media (max-width: 980px) {
    .unit-master-page__grid {
        grid-template-columns: 1fr
    }

    .unit-master-page__panel {
        min-height: 420px
    }
}

@media (max-width: 640px) {
    .unit-master-page__hero {
        padding: .9rem
    }

    .unit-master-page__hero-icon {
        display: none
    }

    .unit-master-page__panel-footer {
        flex-direction: column;
        align-items: stretch
    }

    .unit-master-page__panel-actions {
        margin-left: 0;
        justify-content: flex-end
    }

    .unit-master-page__pagination {
        flex-direction: column;
        align-items: flex-start
    }
}

.member-withdrawals-page {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.member-withdrawals-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(42, 79, 138, .08), rgba(31, 138, 99, .06));
    box-shadow: 0 8px 24px rgba(13, 27, 62, .05)
}

.member-withdrawals-hero__title {
    margin: 0 0 .35rem;
    font-size: 1.35rem;
    color: var(--text)
}

.member-withdrawals-hero__subtitle {
    margin: 0;
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text2)
}

.member-withdrawals-policy {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff
}

.member-withdrawals-policy__icon {
    font-size: 1.2rem;
    line-height: 1
}

.member-withdrawals-policy__title {
    font-size: 13px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: .35rem
}

.member-withdrawals-policy__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 12px;
    line-height: 1.65;
    color: #1e40af
}

.member-withdrawals-section__hint {
    margin: -.25rem 0 .85rem;
    font-size: 12px;
    color: var(--muted)
}

.member-withdrawals-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem
}

.member-withdrawals-account-card {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: .9rem 1rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s
}

.member-withdrawals-account-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 8px 20px rgba(42, 79, 138, .08)
}

.member-withdrawals-account-card--active {
    border-color: var(--info);
    box-shadow: 0 0 0 2px rgba(42, 79, 138, .12)
}

.member-withdrawals-account-card--ready {
    border-left: 4px solid var(--green)
}

.member-withdrawals-account-card--locked {
    border-left: 4px solid var(--warn)
}

.member-withdrawals-account-card--blocked {
    border-left: 4px solid var(--err)
}

.member-withdrawals-account-card__head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .75rem
}

.member-withdrawals-account-card__type {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.member-withdrawals-account-card__no {
    margin-top: .15rem;
    font-size: 11px;
    font-family: Consolas, Monaco, monospace;
    color: var(--muted)
}

.member-withdrawals-account-card__badge {
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap
}

.member-withdrawals-account-card--ready .member-withdrawals-account-card__badge {
    background: #dcfce7;
    color: #166534
}

.member-withdrawals-account-card--locked .member-withdrawals-account-card__badge {
    background: #fef3c7;
    color: #92400e
}

.member-withdrawals-account-card__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem
}

.member-withdrawals-account-card__metrics span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: .15rem
}

.member-withdrawals-account-card__metrics strong {
    font-size: 14px;
    color: var(--text)
}

.member-withdrawals-account-card__hint {
    margin: .65rem 0 0;
    font-size: 11px;
    line-height: 1.55;
    color: var(--text2)
}

.member-withdrawals-form-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    background: #f8fafc
}

.member-withdrawals-form-card__head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .85rem;
    flex-wrap: wrap
}

.member-withdrawals-form-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.member-withdrawals-form-card__subtitle {
    margin-top: .2rem;
    font-size: 12px;
    color: var(--muted)
}

.member-withdrawals-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: .85rem
}

.member-withdrawals-summary-tile {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    padding: .7rem .8rem
}

.member-withdrawals-summary-tile span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: .2rem
}

.member-withdrawals-summary-tile strong {
    font-size: 13px;
    color: var(--text)
}

.member-withdrawals-summary-tile--accent {
    border-color: #bbf7d0;
    background: #f0fdf4
}

.member-withdrawals-summary-tile--accent strong {
    color: #15803d
}

.member-withdrawals-alert {
    margin-bottom: .85rem;
    padding: .75rem .85rem;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.55
}

.member-withdrawals-alert--warn {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e
}

.member-withdrawals-field-hint {
    margin-top: .35rem;
    font-size: 11px;
    color: var(--muted)
}

.member-withdrawals-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem
}

.member-withdrawals-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px
}

.member-withdrawals-table {
    margin: 0
}

.member-withdrawals-table-empty {
    text-align: center;
    color: var(--muted);
    padding: 1.25rem
}

.member-withdrawals-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2rem 1rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #f8fafc
}

.member-withdrawals-empty__icon {
    font-size: 1.75rem
}

.member-withdrawals-empty__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.member-withdrawals-empty__hint {
    max-width: 36ch;
    font-size: 12px;
    color: var(--muted)
}

@media (max-width:900px) {
    .member-withdrawals-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:640px) {
    .member-withdrawals-hero {
        flex-direction: column
    }

    .member-withdrawals-form-grid {
        grid-template-columns: 1fr
    }
}

/* Member statements page */
.member-statements-page {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.member-statements-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background:
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(67, 24, 255, .08), transparent 55%),
        radial-gradient(ellipse 60% 45% at 100% 0%, rgba(42, 79, 138, .1), transparent 50%),
        linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    box-shadow: 0 10px 28px rgba(13, 27, 62, .06)
}

.member-statements-hero__main {
    display: flex;
    align-items: flex-start;
    gap: .95rem;
    min-width: 0
}

.member-statements-hero__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    background: rgba(67, 24, 255, .1);
    border: 1px solid rgba(67, 24, 255, .15)
}

.member-statements-hero__title {
    margin: 0 0 .35rem;
    font-size: 1.35rem;
    color: var(--text)
}

.member-statements-hero__subtitle {
    margin: 0;
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text2)
}

.member-statements-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .65rem
}

.member-statements-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(26, 45, 90, .08);
    border: 1px solid rgba(26, 45, 90, .12)
}

.member-statements-badge--muted {
    color: var(--text2);
    background: rgba(111, 126, 157, .1);
    border-color: rgba(111, 126, 157, .15);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500
}

.member-statements-hero__actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end
}

.member-statements-tabs {
    padding: .55rem;
    margin: 0;
    border-radius: 14px;
    overflow: hidden
}

.member-statements-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.member-statements-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text2);
    font-size: 12px;
    font-weight: 600;
    padding: .45rem .75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .12s
}

.member-statements-tab:hover {
    border-color: rgba(42, 79, 138, .35);
    color: var(--primary);
    transform: translateY(-1px)
}

.member-statements-tab--active {
    border-color: var(--info);
    background: linear-gradient(135deg, rgba(42, 79, 138, .12), rgba(67, 24, 255, .08));
    color: var(--primary);
    box-shadow: 0 0 0 2px rgba(42, 79, 138, .1)
}

.member-statements-tab__icon {
    font-size: .95rem;
    line-height: 1
}

.member-statements-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700
}

.member-statements-toolbar {
    padding: 1rem 1.15rem 1.05rem;
    margin: 0;
    border-radius: 14px
}

.member-statements-toolbar__grid {
    display: grid;
    gap: .75rem;
    align-items: end
}

.member-statements-toolbar__grid--dates {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) auto
}

.member-statements-toolbar__grid--staff {
    grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(130px, .8fr)) minmax(140px, .9fr) auto
}

.member-statements-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .35rem
}

.member-statements-select,
.member-statements-date,
.member-statements-member-id,
.member-statements-member-select {
    width: 100%;
    min-height: 36px
}

.member-statements-field--actions .member-statements-generate-btn {
    min-width: 148px;
    white-space: nowrap
}

.member-statements-generate-btn--loading {
    opacity: .75;
    pointer-events: none
}

.member-statements-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px dashed rgba(26, 45, 90, .12)
}

.member-statements-presets__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-right: .15rem
}

.member-statements-preset-chip {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text2);
    font-size: 11px;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s
}

.member-statements-preset-chip:hover {
    border-color: rgba(42, 79, 138, .35);
    color: var(--primary)
}

.member-statements-preset-chip--active {
    border-color: var(--info);
    background: rgba(42, 79, 138, .08);
    color: var(--primary);
    box-shadow: 0 0 0 2px rgba(42, 79, 138, .1)
}

.member-statements-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem
}

.member-statements-kpi {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 4px 16px rgba(13, 27, 62, .04)
}

.member-statements-kpi--savings {
    border-left: 4px solid #01B574
}

.member-statements-kpi--fd {
    border-left: 4px solid #4318FF
}

.member-statements-kpi--loan {
    border-left: 4px solid #C9A84C
}

.member-statements-kpi--closing {
    border-left: 4px solid #2A4F8A
}

.member-statements-kpi__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(26, 45, 90, .06);
    flex-shrink: 0
}

.member-statements-kpi__label {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: .15rem
}

.member-statements-kpi__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em
}

.member-statements-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(42, 79, 138, .15);
    background: linear-gradient(90deg, rgba(42, 79, 138, .06), rgba(31, 138, 99, .04));
    font-size: 12px;
    color: var(--text2)
}

.member-statements-meta--loading,
.member-statements-meta--empty {
    justify-content: flex-start;
    gap: .55rem;
    border-style: dashed;
    background: #f8fafc
}

.member-statements-meta--error {
    border-color: rgba(169, 58, 74, .25);
    background: rgba(169, 58, 74, .05);
    color: var(--err)
}

.member-statements-meta__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(42, 79, 138, .2);
    border-top-color: var(--info);
    border-radius: 50%;
    animation: member-statements-spin .7s linear infinite;
    flex-shrink: 0
}

@keyframes member-statements-spin {
    to {
        transform: rotate(360deg)
    }
}

.member-statements-meta__primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem
}

.member-statements-meta__type {
    font-weight: 700;
    color: var(--text)
}

.member-statements-meta__who,
.member-statements-meta__period {
    padding: .15rem .45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(26, 45, 90, .08);
    font-size: 11px
}

.member-statements-meta__stats {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center
}

.member-statements-meta__debit {
    color: var(--err);
    font-weight: 600
}

.member-statements-meta__credit {
    color: var(--green);
    font-weight: 600
}

.member-statements-meta__net {
    color: var(--primary);
    font-weight: 700
}

.member-statements-fd {
    padding: 1rem 1.1rem;
    margin: 0
}

.member-statements-fd__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem
}

.member-statements-fd__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.member-statements-fd__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(67, 24, 255, .08)
}

.member-statements-fd__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .65rem
}

.member-statements-fd-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .75rem .85rem;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%)
}

.member-statements-fd-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .55rem
}

.member-statements-fd-card__acct {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px
}

.member-statements-fd-card__plan {
    font-size: 11px;
    color: var(--muted)
}

.member-statements-fd-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .65rem;
    margin-bottom: .55rem
}

.member-statements-fd-card__metrics div {
    display: flex;
    flex-direction: column;
    gap: .1rem
}

.member-statements-fd-card__metrics span {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em
}

.member-statements-fd-card__metrics strong {
    font-size: 12px;
    color: var(--text)
}

.member-statements-fd-card__dates {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    font-size: 10px;
    color: var(--text2);
    padding-top: .45rem;
    border-top: 1px dashed rgba(26, 45, 90, .1)
}

.member-statements-table-wrap {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 14px
}

.member-statements-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    background: #f8fafc
}

.member-statements-table-head__main {
    min-width: 0;
    flex: 1 1 220px
}

.member-statements-table-head__tools {
    flex: 0 1 280px;
    width: 100%;
    max-width: 320px
}

.member-statements-search {
    width: 100%;
    min-height: 36px;
    padding: .4rem .65rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    background: #fff
}

.member-statements-search:focus {
    outline: none;
    border-color: rgba(42, 79, 138, .45);
    box-shadow: 0 0 0 3px rgba(42, 79, 138, .1)
}

.member-statements-table-head__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.member-statements-table-head__hint {
    font-size: 11px;
    color: var(--muted)
}

.member-statements-table-scroll {
    overflow: auto;
    max-height: min(62vh, 640px)
}

.member-statements-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0
}

.member-statements-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap
}

.member-statements-table tbody td {
    padding: .6rem .75rem;
    font-size: 12px;
    border-bottom: 1px solid rgba(230, 220, 196, .55);
    vertical-align: top
}

.member-statements-row--alt {
    background: rgba(248, 250, 252, .85)
}

.member-statements-table tbody tr:hover {
    background: rgba(42, 79, 138, .04)
}

.member-statements-date {
    white-space: nowrap;
    font-size: 11px
}

.member-statements-date__sub {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: .15rem
}

.member-statements-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--text2)
}

.member-statements-type,
.member-statements-inst {
    display: inline-block;
    padding: .12rem .4rem;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(26, 45, 90, .06);
    color: var(--text2)
}

.member-statements-debit {
    color: var(--err);
    font-weight: 600;
    white-space: nowrap
}

.member-statements-credit {
    color: var(--green);
    font-weight: 600;
    white-space: nowrap
}

.member-statements-balance {
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap
}

.member-statements-empty {
    text-align: center;
    color: var(--muted);
    padding: 2rem 1rem !important;
    font-size: 13px
}

.member-statements-empty__icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .45rem
}

.member-statements-tfoot-row td {
    position: sticky;
    bottom: 0;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 600;
    border-top: 2px solid var(--border);
    padding: .7rem .75rem
}

.member-statements-tfoot-label {
    color: var(--text2);
    font-weight: 600
}

.member-statements-net {
    color: var(--primary);
    font-weight: 700;
    white-space: nowrap
}

.member-statements-help {
    padding: 1rem 1.1rem;
    margin: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%)
}

.member-statements-help__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .35rem
}

.member-statements-help__text {
    margin: 0 0 .75rem;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text2)
}

.member-statements-help__links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem
}

.member-statements-empty--loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem
}

.member-statements-empty--error {
    color: var(--err)
}

@media (max-width:1024px) {
    .member-statements-toolbar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .member-statements-field--actions {
        grid-column: 1 / -1
    }

    .member-statements-field--actions .member-statements-generate-btn {
        width: 100%
    }
}

@media (max-width:640px) {
    .member-statements-hero {
        flex-direction: column
    }

    .member-statements-hero__actions {
        width: 100%;
        justify-content: stretch
    }

    .member-statements-hero__actions .btn {
        flex: 1 1 auto
    }

    .member-statements-tabs__list {
        flex-direction: column
    }

    .member-statements-tab {
        width: 100%;
        justify-content: flex-start;
        border-radius: 12px
    }

    .member-statements-toolbar__grid {
        grid-template-columns: 1fr
    }

    .member-statements-meta {
        flex-direction: column;
        align-items: flex-start
    }

    .member-statements-table-head__tools {
        max-width: none
    }

    .member-statements-table-scroll {
        max-height: none
    }

    .member-statements-table thead {
        display: none
    }

    .member-statements-table tbody tr {
        display: block;
        margin-bottom: .65rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
        overflow: hidden
    }

    .member-statements-table tbody tr.member-statements-row--alt {
        background: #fff
    }

    .member-statements-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .75rem;
        padding: .5rem .75rem;
        border-bottom: 1px solid rgba(230, 220, 196, .45)
    }

    .member-statements-table tbody td:last-child {
        border-bottom: none
    }

    .member-statements-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--muted)
    }

    .member-statements-table tfoot {
        display: block
    }

    .member-statements-tfoot-row {
        display: block;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #f1f5f9;
        padding: .5rem .75rem
    }

    .member-statements-tfoot-row td {
        display: flex;
        justify-content: space-between;
        border: none;
        padding: .35rem 0;
        background: transparent
    }

    .member-statements-tfoot-row td[colspan] {
        display: block;
        padding-bottom: .5rem;
        margin-bottom: .35rem;
        border-bottom: 1px dashed var(--border)
    }
}

@media print {

    .sidebar,
    .topbar,
    .member-statements-toolbar,
    .member-statements-tabs,
    .member-statements-help,
    .member-statements-hero__actions,
    .member-statements-table-head__tools,
    .mobile-menu-btn,
    .topbar-notif-wrap,
    .user-menu-wrap {
        display: none !important
    }

    .dash-layout .main-area,
    .content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important
    }

    .member-statements-table-scroll {
        max-height: none !important;
        overflow: visible !important
    }
}

.staff-detail-print-btn {
    white-space: nowrap;
}

.staff-detail-print-modal {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.staff-detail-print-modal.is-open {
    display: flex;
}

.staff-detail-print-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 60, .58);
    backdrop-filter: blur(4px);
}

.staff-detail-print-modal__panel {
    position: relative;
    width: min(1020px, 96vw);
    height: min(90vh, 920px);
    background: #eef2f7;
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(10, 30, 60, .32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(15, 61, 122, .14);
}

.staff-detail-print-modal__toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .85rem;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid rgba(15, 61, 122, .12);
    background: linear-gradient(135deg, #0f3d7a 0%, #1565a8 100%);
    color: #fff;
    flex-wrap: wrap;
}

.staff-detail-print-modal__toolbar-main {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
    flex: 1;
}

.staff-detail-print-modal__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.staff-detail-print-modal__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}

.staff-detail-print-modal__hint {
    margin: .25rem 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, .82);
    line-height: 1.5;
    max-width: 540px;
}

.staff-detail-print-modal__hint strong {
    color: #fff;
}

.staff-detail-print-modal__actions {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.staff-detail-print-modal__btn-pdf {
    background: linear-gradient(135deg, #c9a84c, #e8d5a3) !important;
    border-color: #c9a84c !important;
    color: #1e293b !important;
    font-weight: 700;
}

.staff-detail-print-modal__actions .btn-outline {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.staff-detail-print-modal__actions .btn-outline:hover {
    background: rgba(255, 255, 255, .18);
}

.staff-detail-print-modal__frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #eef2f7;
    padding: 12px;
}

.guarantor-search {
    position: relative;
}

.guarantor-search-dropdown {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 240px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--border, #d8e0ef);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 61, 122, .14);
    padding: .35rem;
}

.guarantor-search-dropdown[hidden] {
    display: none !important;
}

.guarantor-search-option {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: .55rem .7rem;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: var(--text, #1e293b);
    cursor: pointer;
}

.guarantor-search-option:hover,
.guarantor-search-option--active {
    background: rgba(15, 61, 122, .08);
    color: #0f3d7a;
}

.guarantor-search-empty {
    padding: .7rem;
    font-size: 12px;
    color: var(--muted, #64748b);
}

.ml-guarantor-roster__table {
    margin: 0;
}

.ml-guarantor-roster__row:hover td {
    background: rgba(15, 61, 122, .04);
}

.ml-guarantor-roster__row--selected td {
    background: rgba(15, 61, 122, .08);
}

.doc-center-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem
}

.doc-center-page__hint {
    font-size: 12px;
    color: var(--muted);
    margin: .25rem 0 0
}

.doc-center-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .75rem
}

.doc-center-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    padding: .85rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-height: 100%;
    box-shadow: 0 6px 18px rgba(13, 27, 62, .05)
}

.doc-center-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 45, 90, .08);
    font-size: 18px
}

.doc-center-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0
}

.doc-center-card__desc {
    font-size: 12px;
    color: var(--text2);
    margin: 0;
    line-height: 1.45;
    flex: 1
}

.doc-center-card__meta {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: 11px;
    color: var(--muted)
}

.doc-center-card__updated {
    color: var(--text2);
    font-size: 11px
}

.doc-center-card__actions {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap
}

.doc-center-empty {
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 13px
}

.doc-center-status {
    display: inline-flex;
    align-items: center;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap
}

.doc-center-status--published {
    background: rgba(31, 138, 99, .12);
    color: #1F8A63
}

.doc-center-status--draft {
    background: rgba(201, 168, 76, .16);
    color: #8a6d1d
}

.guarantor-pending-card .guarantor-pending-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    margin-left: .35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

.member-guarantor-dash-banners {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: .85rem
}

.member-guarantor-dash-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06)
}

.member-guarantor-dash-banner--action {
    border-color: rgba(57, 108, 240, .35);
    background: linear-gradient(135deg, rgba(57, 108, 240, .08), rgba(57, 108, 240, .02))
}

.member-guarantor-dash-banner--waiting {
    border-color: rgba(201, 168, 76, .45);
    background: linear-gradient(135deg, rgba(201, 168, 76, .12), rgba(201, 168, 76, .03))
}

.member-guarantor-dash-banner__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .1rem
}

.member-guarantor-dash-banner__copy {
    flex: 1 1 auto;
    min-width: 0
}

.member-guarantor-dash-banner__copy strong {
    display: block;
    font-size: 13px;
    margin-bottom: .2rem
}

.member-guarantor-dash-banner__copy p {
    margin: 0;
    font-size: 12px;
    color: var(--text2);
    line-height: 1.45
}

.member-guarantor-dash-banner__actions {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex-shrink: 0;
    align-items: flex-end
}

.member-dash-alert-item--guarantor {
    border-left: 3px solid var(--primary);
    padding-left: .65rem
}

.member-dash-alert-item--guarantor {
    border-left: 3px solid var(--primary);
    padding-left: .65rem;
}

.modal-overlay .modal.guarantor-detail-modal {
    width: 60vw;
    max-width: 60vw;
    max-height: min(90vh, 860px);
}

@media (max-width: 768px) {
    .modal-overlay .modal.guarantor-detail-modal {
        width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
    }
}

.guarantor-detail-intro,
.guarantor-detail-summary {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.55;
    margin: 0 0 .75rem;
}

.guarantor-detail-summary {
    padding: .65rem .75rem;
    border-radius: 8px;
    background: rgba(57, 108, 240, .08);
    border: 1px solid rgba(57, 108, 240, .18);
    font-size: 12px;
}

.guarantor-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .55rem .85rem;
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.guarantor-detail-grid__row {
    margin: 0;
}

.guarantor-detail-grid dt {
    margin: 0 0 .15rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.guarantor-detail-grid dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.guarantor-detail-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.guarantor-notif-action {
    font-size: 11px;
    padding: .2rem .55rem;
}

.loan-disburse-page .card-title {
    margin: 0
}

.loan-disburse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .55rem .85rem;
    margin: 0
}

.loan-disburse-grid__row {
    margin: 0;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff
}

.loan-disburse-grid dt {
    margin: 0 0 .15rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted)
}

.loan-disburse-grid dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.loan-disburse-detail__intro p {
    margin: 0 0 .65rem;
    font-size: 12px;
    color: var(--text2);
    line-height: 1.6
}

.loan-disburse-form .form-group {
    margin-bottom: .65rem
}

.reports-page {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.reports-lead,
.permissions-lead {
    margin: .35rem 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55
}

.reports-hero-card {
    background: linear-gradient(135deg, #f7fafc 0%, #eef4fb 55%, #f8fafc 100%);
    border: 1px solid var(--border)
}

.fs-report-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem
}

.fs-report-card {
    text-align: left;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 12px;
    padding: .85rem .9rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 6.5rem
}

.fs-report-card:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05)
}

.fs-report-card.is-active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent)
}

.fs-report-card__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.fs-report-card__blurb {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45
}

.fs-statement {
    display: flex;
    flex-direction: column;
    gap: .85rem
}

.fs-statement__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .01em;
    text-align: center;
    padding: .35rem 0 .15rem;
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border))
}

.fs-statement__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.fs-statement__col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
    flex-wrap: wrap
}

.fs-statement__col-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text2);
    margin-bottom: 0
}

.fs-statement__col-total {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-size: 11px;
    color: var(--muted)
}

.fs-statement__col-total strong {
    font-size: 13px;
    color: var(--text);
    font-variant-numeric: tabular-nums
}

.reports-accordion-stack {
    display: flex;
    flex-direction: column;
    gap: .55rem
}

.reports-acc-hint {
    margin: 0 0 .75rem;
    font-size: 12px;
    color: var(--muted);
    text-align: center
}

.reports-acc {
    border: 1px solid rgba(15, 61, 122, .22);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(13, 27, 62, .07);
    overflow: hidden
}

.reports-acc__summary {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .75rem;
    padding: .75rem .9rem;
    cursor: pointer;
    background: linear-gradient(180deg, #eef4fc 0%, #dde8f6 100%);
    user-select: none;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent
}

.reports-acc__summary:focus-visible {
    outline: 2px solid rgba(15, 61, 122, .45);
    outline-offset: -2px
}

.reports-acc.is-open > .reports-acc__summary,
.reports-acc[open] > .reports-acc__summary {
    background: linear-gradient(180deg, #e7f0fb 0%, #dce8f6 100%);
    border-bottom: 1px solid rgba(15, 61, 122, .1)
}

.reports-acc__summary:hover {
    background: linear-gradient(180deg, #ebf2fb 0%, #dde8f5 100%)
}

.reports-acc__lead {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0
}

.reports-acc__chev {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(15, 61, 122, .18);
    background: #fff;
    position: relative
}

.reports-acc__chev::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid #0f3d7a;
    border-bottom: 2px solid #0f3d7a;
    transform: rotate(-45deg) translate(-1px, -1px);
    transition: transform .15s ease
}

.reports-acc.is-open > .reports-acc__summary .reports-acc__chev::before,
.reports-acc[open] > .reports-acc__summary .reports-acc__chev::before {
    transform: rotate(45deg) translate(-1px, -1px)
}

.reports-acc__body[hidden],
.reports-acc:not(.is-open):not([open]) > .reports-acc__body {
    display: none !important
}

.reports-acc.is-open > .reports-acc__body,
.reports-acc[open] > .reports-acc__body {
    display: block
}

.reports-acc__copy {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0
}

.reports-acc__title {
    font-size: 12px;
    font-weight: 700;
    color: #0f3d7a;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3
}

.reports-acc__count,
.reports-accordion__count {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0
}

.reports-acc__total,
.reports-accordion__total {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    margin: 0;
    text-align: right;
    justify-self: end;
    flex-shrink: 0;
    min-width: 5.5rem
}

.reports-acc__total-amt,
.reports-accordion__total-value {
    font-size: 14px;
    font-weight: 700;
    color: #0a2754;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.reports-acc__total-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    padding: .15rem .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(15, 61, 122, .1)
}

.reports-acc__total-chip-label,
.reports-accordion__total-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted)
}

.reports-acc__body,
.reports-accordion__body {
    padding: .65rem .75rem .8rem;
    background: #fff
}

.reports-acc__body .reports-table-wrap,
.reports-accordion__body .reports-table-wrap {
    margin: 0;
    border: 1px solid rgba(15, 61, 122, .08);
    border-radius: 8px;
    overflow: auto
}

.reports-ledger-block {
    margin-top: 1.15rem
}

.reports-ledger-block__title {
    margin-bottom: .65rem
}

.reports-statement--accordion .fs-statement__col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .15rem .1rem .45rem
}

.fs-statement__col-total {
    margin-left: auto;
    text-align: right
}

.fs-statement__col-total strong {
    font-size: 14px;
    color: #0a2754;
    font-variant-numeric: tabular-nums
}

.fs-statement__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .55rem;
    padding: .75rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid var(--border)
}

.fs-statement__summary-item {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: 12px;
    color: var(--text2)
}

.fs-table .fs-row--section td {
    background: #f1f5f9;
    font-weight: 700;
    color: var(--text2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em
}

.fs-table .fs-row--total td {
    font-weight: 700;
    border-top: 2px solid var(--border);
    background: color-mix(in srgb, var(--primary) 5%, #fff)
}

.reports-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.member-import-modal {
    width: min(520px, 94vw)
}

.member-import-lead {
    margin: -.15rem 0 .85rem;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5
}

.member-import-actions {
    margin-bottom: .75rem
}

.member-import-file {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: .85rem
}

.member-import-result {
    margin-bottom: .85rem;
    padding: .7rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #f8fafc;
    font-size: 12px;
    color: var(--text2)
}

.member-import-errors {
    margin: .45rem 0 0;
    padding-left: 1.1rem;
    color: var(--warn)
}

.platform-csv-import-modal {
    width: min(620px, 94vw)
}

.platform-csv-import-cols {
    margin: 0 0 .85rem;
    padding: .65rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #f8fafc;
    font-size: 12px;
    color: var(--text2);
    line-height: 1.55
}

.platform-csv-import-cols p {
    margin: 0 0 .35rem
}

.platform-csv-import-cols p:last-child {
    margin-bottom: 0
}

.platform-csv-import-cols code {
    font-size: 11px;
    padding: .05rem .28rem;
    border-radius: 4px;
    background: #eef2f7;
    color: var(--primary)
}

.platform-csv-import-hub-modal {
    width: min(760px, 96vw);
    max-height: min(88vh, 900px);
    overflow: auto
}

.platform-csv-import-hub__section {
    margin: .85rem 0 0
}

.platform-csv-import-hub__section-title {
    margin: 0 0 .45rem;
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .04em
}

.platform-csv-import-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .55rem
}

.platform-csv-import-hub__card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-align: left;
    padding: .7rem .75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease
}

.platform-csv-import-hub__card:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 12%, transparent)
}

.platform-csv-import-hub__card strong {
    font-size: 12px;
    color: var(--text)
}

.platform-csv-import-hub__card span {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45
}

.reports-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 1fr)) auto;
    gap: .75rem;
    align-items: end;
    margin-top: 1rem
}

.reports-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0
}

.reports-field__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .03em
}

.reports-error {
    margin-top: .85rem;
    padding: .65rem .75rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
    background: color-mix(in srgb, var(--warn) 8%, #fff);
    color: var(--warn);
    font-size: 12px
}

.reports-results-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .75rem
}

.reports-meta {
    margin: .25rem 0 0;
    font-size: 12px;
    color: var(--muted)
}

.reports-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 12px
}

.reports-table {
    width: 100%;
    border-collapse: collapse
}

.reports-table th,
.reports-table td {
    padding: .55rem .7rem;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap
}

.reports-table th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    font-weight: 600;
    color: var(--text2)
}

.reports-empty {
    margin: 0;
    font-size: 12px;
    color: var(--muted)
}

.permissions-page {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.permissions-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap
}

.permissions-role-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem
}

.permissions-role-tab {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text2);
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: 12px;
    cursor: pointer
}

.permissions-role-tab--active {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: var(--primary);
    font-weight: 600
}

.permissions-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .85rem;
    flex-wrap: wrap
}

.permissions-search {
    min-width: min(100%, 260px)
}

.permissions-count {
    font-size: 11px;
    color: var(--muted)
}

.permissions-matrix-card {
    padding-top: .25rem
}

.permissions-matrix th,
.permissions-matrix td {
    vertical-align: middle
}

.permissions-module-cell {
    font-size: 12px;
    min-width: 220px
}

.permissions-check-cell {
    width: 120px;
    text-align: center
}

.permissions-check-cell input[type="checkbox"] {
    width: 16px;
    height: 16px
}

.permissions-bulk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin-top: .25rem;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted)
}

@media (max-width: 900px) {
    .reports-filter-form {
        grid-template-columns: 1fr
    }

    .fs-statement__grid {
        grid-template-columns: 1fr
    }

    .reports-acc__summary {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start
    }

    .reports-acc__total {
        min-width: 0
    }
}

.topbar-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.topbar-home-btn {
    border-color: var(--border);
    color: var(--navy);
}

.topbar-home-btn:hover:not(:disabled),
.topbar-back-btn:hover:not(:disabled) {
    background: rgba(26, 45, 90, .08);
    border-color: var(--navy);
    color: var(--navy);
}

.nav-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .85rem;
    margin-top: .35rem;
}

.nav-section-toggle {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
}

.nav-section-toggle:hover {
    color: #fff;
}

.nav-section-items--collapsed {
    display: none;
}

.nav-group {
    display: block;
}

.nav-item--group {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
}

.nav-item--group .nav-item__label {
    flex: 1;
    min-width: 0;
}

.nav-group__chev {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .72);
}

.nav-group__chev svg {
    width: 13.5px;
    height: 13.5px;
    display: block;
    transition: transform .2s ease;
}

.nav-group__chev--open svg {
    transform: rotate(0deg);
}

.nav-group__chev--collapsed svg {
    transform: rotate(-90deg);
}

.nav-item--group:hover .nav-group__chev,
.nav-group--active>.nav-item--group .nav-group__chev {
    color: rgba(255, 255, 255, .95);
}

.nav-group--active>.nav-item--group,
.nav-item--group.active {
    color: #fff;
}

.nav-group__children {
    display: block;
    padding-bottom: .15rem;
    overflow: hidden;
}

.nav-group__children--collapsed {
    display: none;
}

.nav-item--sub {
    padding-left: 2.35rem;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
}

.nav-item--sub .n-icon {
    font-size: 12px;
    width: 16px;
}

.nav-item--sub.active {
    color: #fff;
    background: rgba(201, 168, 76, .16);
}

.role-nav-kpi-grid--staff-full,
.role-nav-kpi-grid--am-full {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    width: 100%;
}

@media (max-width: 1100px) {
    .role-nav-kpi-grid--staff-full,
    .role-nav-kpi-grid--am-full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .role-nav-kpi-grid--staff-full,
    .role-nav-kpi-grid--am-full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }

    .role-nav-kpi-grid--staff-full .role-nav-kpi--staff-row,
    .role-nav-kpi-grid--am-full .role-nav-kpi--am-row {
        min-height: 72px;
        padding: .5rem .48rem .5rem .42rem;
        gap: .28rem;
    }

    .role-nav-kpi-grid--staff-full .role-nav-kpi--staff-row .role-nav-kpi__icon,
    .role-nav-kpi-grid--am-full .role-nav-kpi--am-row .role-nav-kpi__icon {
        width: 28px;
        height: 28px;
    }

    .role-nav-kpi-grid--staff-full .role-nav-kpi--staff-row .role-nav-kpi__icon svg,
    .role-nav-kpi-grid--am-full .role-nav-kpi--am-row .role-nav-kpi__icon svg {
        width: 14px;
        height: 14px;
    }

    .role-nav-kpi-grid--staff-full .role-nav-kpi--staff-row .role-nav-kpi__label,
    .role-nav-kpi-grid--am-full .role-nav-kpi--am-row .role-nav-kpi__label {
        font-size: 10px;
        white-space: normal;
    }

    .role-nav-kpi-grid--staff-full .role-nav-kpi--staff-row .role-nav-kpi__val--member,
    .role-nav-kpi-grid--am-full .role-nav-kpi--am-row .role-nav-kpi__val--member {
        font-size: 1.1rem;
    }

    .role-nav-kpi-grid--staff-full .role-nav-kpi--staff-row .role-nav-kpi__member-amount,
    .role-nav-kpi-grid--am-full .role-nav-kpi--am-row .role-nav-kpi__member-amount {
        font-size: 9px;
    }
}

.role-dash-nav--am,
.role-dash-nav--approver,
.role-dash-nav--admin {
    padding: 0;
    margin-bottom: .65rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.role-dash-nav--am .role-dash-nav__backdrop,
.role-dash-nav--approver .role-dash-nav__backdrop,
.role-dash-nav--admin .role-dash-nav__backdrop {
    display: none;
}

.role-nav-kpi--staff-row,
.role-nav-kpi--am-row {
    min-height: 78px;
    padding: .62rem .72rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--role-nav-accent, var(--primary)) 16%, var(--border));
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .99) 0%, color-mix(in srgb, var(--role-nav-accent, var(--primary)) 4%, #f8fafc) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 3px 12px rgba(13, 27, 62, .06);
}

.role-nav-kpi--staff-row::after,
.role-nav-kpi--am-row::after {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--role-nav-accent, var(--primary));
    opacity: .82;
    z-index: 1;
}

.role-nav-kpi--staff-row:hover,
.role-nav-kpi--am-row:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--role-nav-accent, var(--primary)) 38%, var(--border));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 12px 26px color-mix(in srgb, var(--role-nav-accent, var(--primary)) 14%, transparent);
}

.role-nav-kpi--staff-row:focus-visible,
.role-nav-kpi--am-row:focus-visible {
    outline: 2px solid var(--role-nav-accent, var(--primary));
    outline-offset: 2px;
}

.role-nav-kpi--staff-hot,
.role-nav-kpi--am-hot {
    border-color: color-mix(in srgb, var(--role-nav-accent, var(--primary)) 32%, var(--border));
    background:
        linear-gradient(145deg, #fff 0%, color-mix(in srgb, var(--role-nav-accent, var(--primary)) 8%, #fff) 100%);
}

.role-nav-kpi--staff-row .role-nav-kpi__member-left,
.role-nav-kpi--am-row .role-nav-kpi__member-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .34rem;
    min-width: 0;
    flex: 1 1 auto;
    padding-left: .35rem;
    position: relative;
    z-index: 2;
}

.role-nav-kpi--staff-row .role-nav-kpi__member-right,
.role-nav-kpi--am-row .role-nav-kpi__member-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: .12rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.role-nav-kpi--staff-row .role-nav-kpi__label,
.role-nav-kpi--am-row .role-nav-kpi__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.role-nav-kpi--staff-row .role-nav-kpi__icon,
.role-nav-kpi--am-row .role-nav-kpi__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 4px 12px color-mix(in srgb, var(--role-nav-accent, var(--primary)) 16%, transparent);
}

.role-nav-kpi--staff-row .role-nav-kpi__icon svg,
.role-nav-kpi--am-row .role-nav-kpi__icon svg {
    width: 17px;
    height: 17px;
}

.role-nav-kpi--staff-row .role-nav-kpi__val--member,
.role-nav-kpi--am-row .role-nav-kpi__val--member {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--role-nav-accent, var(--navy));
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.role-nav-kpi--staff-row .role-nav-kpi__val--member.role-nav-kpi__val--warn,
.role-nav-kpi--am-row .role-nav-kpi__val--member.role-nav-kpi__val--warn {
    color: var(--warn);
}

.role-nav-kpi--staff-row .role-nav-kpi__member-amount,
.role-nav-kpi--am-row .role-nav-kpi__member-amount {
    font-size: 10px;
    font-weight: 700;
    color: var(--role-nav-accent, var(--primary));
    line-height: 1.2;
    text-align: right;
}

.role-nav-kpi--staff-row .role-nav-kpi__mesh,
.role-nav-kpi--am-row .role-nav-kpi__mesh {
    opacity: .35;
}

.staff-dash--role-compact .role-nav-kpi__foot,
.staff-dash--role-compact .role-nav-kpi__hint,
.staff-dash--am-compact .role-nav-kpi__foot,
.staff-dash--am-compact .role-nav-kpi__hint {
    display: none;
}

.staff-dash--role-compact .role-nav-kpi-grid,
.staff-dash--am-compact .role-nav-kpi-grid {
    gap: .65rem;
}

.dash-layout .content {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.dash-layout .main-area {
    min-height: 0;
}

a.btn:hover,
button.btn:hover:not(:disabled),
.user-menu-item:hover {
    text-decoration: none;
}

a.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #1A2D5A 0%, #253D72 100%);
    color: #fff;
    border: 1px solid #223767;
    filter: brightness(1.08);
    opacity: 1;
}

a.btn-outline:hover:not(:disabled),
button.btn-outline:hover:not(:disabled) {
    background: var(--warn);
    color: #0D1B3E;
    border: 1.5px solid var(--warn);
    opacity: 1;
}

a.btn-green:hover:not(:disabled),
button.btn-green:hover:not(:disabled) {
    background: var(--green);
    color: #fff;
    border: 1px solid var(--green);
    filter: brightness(1.06);
    opacity: 1;
}