:root {
    --ink: #183a3b;
    --ink-soft: #315554;
    --muted: #78908d;
    --muted-dark: #5f7774;
    --page: #f5f8f5;
    --surface: #fff;
    --line: #e4eeea;
    --line-strong: #d3e3dd;
    --brand: #167d71;
    --brand-dark: #0d5f58;
    --brand-soft: #e5f4ef;
    --blue: #3c82d5;
    --blue-soft: #eaf2fb;
    --lilac: #7461c5;
    --lilac-soft: #f0edfb;
    --coral: #d66c5d;
    --coral-soft: #fff0eb;
    --yellow: #bd8b2d;
    --yellow-soft: #fff7df;
    --red: #c65758;
    --red-soft: #fff0f0;
    --shadow: 0 18px 50px rgba(23, 65, 61, .08);
    --shadow-deep: 0 30px 80px rgba(5, 39, 37, .24);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--page); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(22, 125, 113, .22); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { width: 1px; height: 1px; padding: 0; margin: -1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.demo-ribbon { position: fixed; z-index: 20; top: 16px; right: 16px; padding: 6px 10px; color: #d5fff2; background: rgba(10, 74, 68, .9); border: 1px solid rgba(206, 255, 241, .18); border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: .12em; pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand strong { display: block; color: inherit; font-size: 14px; line-height: 1.15; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 4px; color: inherit; opacity: .6; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { position: relative; display: inline-flex; align-items: end; gap: 3px; width: 30px; height: 30px; padding: 5px; overflow: hidden; background: #d8f5e9; border-radius: 10px; }
.brand-mark::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: #a7e8d2; border-radius: 10px 10px 50% 50%; }
.brand-mark i { position: relative; display: block; width: 5px; height: 12px; background: var(--brand); border-radius: 3px 3px 2px 2px; }
.brand-mark i:nth-child(2) { height: 17px; background: #2e9c88; }
.brand-mark i:nth-child(3) { height: 9px; background: #8ed5be; }
.brand-light { color: #effff9; }

.login-shell { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); min-height: 100vh; background: #f8fbf9; }
.login-showcase { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 48px clamp(36px, 7vw, 100px) 52px; overflow: hidden; background: #0e514d; isolation: isolate; }
.showcase-grid { position: absolute; z-index: -1; inset: 0; opacity: .26; background-image: linear-gradient(rgba(213, 255, 239, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(213, 255, 239, .08) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 82%); }
.showcase-copy { position: relative; max-width: 620px; margin: auto 0; padding: 60px 0 80px; }
.eyebrow { margin: 0 0 10px; color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .15em; line-height: 1.3; text-transform: uppercase; }
.eyebrow-light { color: #a8e6d2; }
.showcase-copy h1 { max-width: 600px; margin: 0; color: #f0fff9; font-size: clamp(38px, 5vw, 72px); font-weight: 500; letter-spacing: -.065em; line-height: .98; }
.showcase-copy > p:last-child { max-width: 480px; margin: 26px 0 0; color: rgba(235, 255, 249, .72); font-size: 15px; line-height: 1.75; }
.showcase-footer { display: flex; gap: 52px; }
.showcase-footer strong { display: block; color: #f0fff9; font-size: 24px; font-weight: 500; letter-spacing: -.04em; }
.showcase-footer span { display: block; margin-top: 4px; color: rgba(232, 255, 248, .58); font-size: 11px; }
.showcase-orb { position: absolute; z-index: -1; border: 1px solid rgba(180, 255, 227, .16); border-radius: 50%; }
.orb-one { width: 510px; height: 510px; top: 15%; right: -285px; box-shadow: 0 0 0 70px rgba(150, 239, 207, .035), 0 0 0 140px rgba(150, 239, 207, .025); }
.orb-two { width: 240px; height: 240px; bottom: -120px; left: 18%; background: rgba(174, 247, 221, .08); border-color: transparent; }
.orb-three { width: 70px; height: 70px; top: 24%; left: 16%; background: #f6c97b; border-color: transparent; box-shadow: 0 0 0 18px rgba(246, 201, 123, .1); }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 76px 48px; background: #f9fcfa; }
.login-panel-inner { width: min(100%, 410px); }
.login-heading h1 { margin: 0; color: var(--ink); font-size: clamp(29px, 3vw, 39px); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; }
.login-heading > p:last-child { margin: 13px 0 0; color: var(--muted-dark); font-size: 14px; line-height: 1.65; }
.login-form { margin-top: 34px; }
.field-label { display: block; margin-bottom: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.field-row { display: flex; align-items: center; justify-content: space-between; margin-top: 21px; }
.field-row .field-label { margin: 0; }
.text-button { padding: 0; color: var(--brand); background: none; border: 0; font-size: 11px; font-weight: 700; }
.text-button:hover { color: var(--brand-dark); text-decoration: underline; }
.input-wrap { position: relative; }
.text-input, .select-control { width: 100%; min-height: 48px; padding: 0 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; outline: 0; font-size: 13px; transition: border-color .2s ease, box-shadow .2s ease; }
.text-input::placeholder { color: #a6b8b3; }
.text-input:hover, .select-control:hover { border-color: #bad1c9; }
.text-input:focus, .select-control:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(22, 125, 113, .1); }
.text-input.with-leading { padding-left: 43px; }
.input-leading { position: absolute; top: 50%; left: 15px; z-index: 1; transform: translateY(-50%); color: var(--brand); font-size: 15px; font-weight: 700; }
.primary-button, .secondary-button, .outline-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 0 17px; border-radius: 10px; font-size: 12px; font-weight: 750; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.primary-button { color: #f2fffa; background: var(--brand); border: 1px solid var(--brand); box-shadow: 0 8px 18px rgba(22, 125, 113, .16); }
.primary-button:hover { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: 0 10px 22px rgba(22, 125, 113, .24); transform: translateY(-1px); }
.secondary-button { color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-strong); }
.secondary-button:hover { color: var(--brand-dark); border-color: #9ec9ba; background: var(--brand-soft); }
.outline-button { min-height: 35px; padding: 0 12px; color: var(--brand-dark); background: transparent; border: 1px solid #abd3c4; font-size: 11px; }
.outline-button:hover { background: var(--brand-soft); }
.login-submit { width: 100%; margin-top: 25px; min-height: 51px; font-size: 13px; }
.form-error { margin-top: 14px; padding: 10px 12px; color: var(--red); background: var(--red-soft); border-radius: 9px; font-size: 11px; line-height: 1.5; }
.flash-message { margin: 0 0 18px; padding: 11px 13px; color: #347c65; background: var(--brand-soft); border: 1px solid #d3ebe1; border-radius: 9px; font-size: 11px; }
.demo-login { display: grid; gap: 9px; margin-top: 31px; padding: 15px; background: #f0f7f3; border: 1px solid #dcece5; border-radius: 13px; }
.demo-label { display: block; margin-bottom: 1px; color: var(--brand); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.demo-account-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 9px; border-top: 1px solid #dcece5; }
.demo-account-row div { min-width: 0; }
.demo-account-row strong, .demo-account-row span { display: block; }
.demo-account-row strong { margin-bottom: 4px; color: var(--ink-soft); font-size: 11px; }
.demo-account-row span { color: var(--muted); font-size: 10px; }
.demo-account-row b { color: var(--ink-soft); font-weight: 750; }
.login-note { margin: 18px 0 0; color: #9aada7; font-size: 10px; line-height: 1.65; text-align: center; }

.app-shell { display: flex; min-height: 100vh; background: var(--page); }
.sidebar { position: fixed; z-index: 10; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; width: 254px; padding: 28px 15px 17px; overflow: hidden; color: #d7f3e8; background: #0d514c; }
.sidebar-main { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(189, 239, 220, .28) transparent; }
.sidebar-main::-webkit-scrollbar { width: 5px; }
.sidebar-main::-webkit-scrollbar-thumb { background: rgba(189, 239, 220, .28); border-radius: 10px; }
.brand-light:hover { color: #fff; }
.workspace-switcher { display: flex; align-items: center; gap: 9px; margin: 31px 2px 22px; padding: 10px; background: rgba(230, 255, 245, .085); border: 1px solid rgba(207, 255, 237, .1); border-radius: 12px; }
.workspace-avatar { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; color: #0e5f58; background: #c7f1df; border-radius: 9px; font-size: 10px; font-weight: 800; }
.workspace-copy { min-width: 0; flex: 1; }
.workspace-copy strong, .workspace-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-copy strong { color: #ebfff8; font-size: 10px; font-weight: 750; }
.workspace-copy small { margin-top: 3px; color: #a8d0c2; font-size: 9px; }
.workspace-chevron { color: #a2cabd; font-size: 16px; }
.nav-label { margin: 0 11px 8px; color: #75a99a; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-label-spaced { margin-top: 27px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 39px; margin: 3px 0; padding: 0 11px; color: #afd1c5; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 650; }
.nav-item:hover { color: #eafff5; background: rgba(220, 255, 240, .08); }
.nav-item.is-active { color: #0f635b; background: #d7f4e8; box-shadow: 0 8px 18px rgba(0, 25, 21, .1); }
.nav-mark { display: inline-grid; flex: 0 0 17px; place-items: center; width: 17px; height: 17px; font-size: 16px; line-height: 1; }
.nav-count { margin-left: auto; color: #76aa9a; font-size: 10px; font-weight: 600; }
.nav-alert { display: grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; color: #ffe7d7; background: rgba(214, 108, 93, .36); border-radius: 6px; font-size: 9px; }
.nav-item.is-active .nav-count { color: #4d8980; }
.nav-item.is-active .nav-alert { color: #9c4e45; background: #ffe3dc; }
.sidebar-bottom { flex: 0 0 auto; margin-top: 12px; padding-top: 4px; background: #0d514c; }
.sidebar-help { display: flex; align-items: center; gap: 10px; margin: 0 2px 18px; padding: 12px 10px; color: #b9ddd1; border-top: 1px solid rgba(209, 255, 239, .11); border-bottom: 1px solid rgba(209, 255, 239, .11); }
.help-icon { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; color: #0c625a; background: #c8f1df; border-radius: 7px; font-size: 12px; font-weight: 800; }
.sidebar-help > span:nth-child(2) { min-width: 0; flex: 1; }
.sidebar-help strong, .sidebar-help small { display: block; }
.sidebar-help strong { color: #dbf9ed; font-size: 10px; }
.sidebar-help small { margin-top: 3px; color: #83b6a7; font-size: 9px; }
.sidebar-help > span:last-child { color: #92c5b6; font-size: 15px; }
.sidebar-user { display: flex; align-items: center; gap: 9px; padding: 10px 8px 0; border-top: 1px solid rgba(209, 255, 239, .11); }
.avatar { display: grid; place-items: center; flex: 0 0 37px; width: 37px; height: 37px; color: #fff; border-radius: 50%; font-size: 10px; font-weight: 800; }
.avatar-small { width: 30px; height: 30px; flex-basis: 30px; }
.avatar-large { width: 66px; height: 66px; flex-basis: 66px; font-size: 17px; }
.avatar-coral { background: #d77b6b; }
.avatar-blue { background: #6595c9; }
.avatar-purple { background: #8372c8; }
.avatar-green { background: #57a789; }
.avatar-yellow { background: #b58b47; }
.sidebar-user-copy { min-width: 0; flex: 1; }
.sidebar-user-copy strong, .sidebar-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-copy strong { color: #eafff5; font-size: 10px; }
.sidebar-user-copy small { margin-top: 3px; color: #83b5a6; font-size: 9px; }
.icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--muted-dark); background: transparent; border: 0; border-radius: 9px; font-size: 17px; }
.icon-button:hover { color: var(--brand-dark); background: var(--brand-soft); }
.icon-button-dark { width: 28px; height: 28px; color: #7cb2a3; font-size: 15px; }
.icon-button-dark:hover { color: #eafff5; background: rgba(217, 255, 242, .12); }
.main-area { width: calc(100% - 254px); min-width: 0; margin-left: 254px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 92px; padding: 19px clamp(22px, 4vw, 58px); background: rgba(250, 252, 250, .84); border-bottom: 1px solid var(--line); }
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-left h2 { margin: 3px 0 0; color: var(--ink); font-size: 20px; font-weight: 500; letter-spacing: -.04em; }
.topbar-kicker { margin: 0; color: #92a7a0; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.menu-button { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.global-search { display: flex; align-items: center; gap: 8px; width: min(250px, 25vw); min-height: 38px; padding: 0 10px; color: #8ea39d; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.global-search > span { font-size: 19px; line-height: 1; }
.global-search input { min-width: 0; flex: 1; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 11px; }
.global-search input::placeholder { color: #a5b5af; }
.global-search kbd { padding: 3px 5px; color: #93a6a0; background: #f5f8f6; border: 1px solid var(--line); border-radius: 4px; font-size: 8px; }
.notification-button { position: relative; width: 38px; height: 38px; background: var(--surface); border: 1px solid var(--line); font-size: 22px; }
.notification-button i { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: var(--coral); border: 2px solid var(--surface); border-radius: 50%; }
.topbar-user { display: flex; align-items: center; gap: 8px; margin-left: 6px; padding-left: 15px; border-left: 1px solid var(--line); }
.topbar-user strong, .topbar-user small { display: block; }
.topbar-user strong { color: var(--ink-soft); font-size: 10px; }
.topbar-user small { margin-top: 3px; color: #8ca19a; font-size: 9px; }
.topbar-chevron { margin-left: 2px; color: #8aa49b; font-size: 15px; }
.page-content { max-width: 1480px; margin: 0 auto; padding: 37px clamp(22px, 4vw, 58px) 64px; }
.content-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.content-heading h1 { margin: 0; color: var(--ink); font-size: clamp(28px, 3vw, 38px); font-weight: 500; letter-spacing: -.06em; line-height: 1.06; }
.heading-description { max-width: 610px; margin: 10px 0 0; color: var(--muted-dark); font-size: 13px; line-height: 1.65; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.insight-strip { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; padding: 14px 17px; color: var(--ink-soft); background: #eff8f3; border: 1px solid #dceee5; border-radius: 13px; }
.insight-symbol { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; color: var(--brand); background: #d5f2e5; border-radius: 9px; font-size: 18px; }
.insight-strip div { min-width: 0; flex: 1; }
.insight-strip strong { display: block; font-size: 11px; }
.insight-strip p { margin: 3px 0 0; color: #72918a; font-size: 11px; }
.insight-strip a { padding: 5px; color: var(--brand-dark); font-size: 11px; font-weight: 750; white-space: nowrap; }
.insight-strip a:hover, .inline-link:hover { text-decoration: underline; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.metric-card { min-height: 160px; padding: 17px 18px 15px; border: 1px solid transparent; border-radius: 14px; }
.metric-card-green { background: #e8f6ef; border-color: #dcefe5; }
.metric-card-blue { background: #ebf3fb; border-color: #e0ebf8; }
.metric-card-lilac { background: #f1eefb; border-color: #e8e3f8; }
.metric-card-peach { background: #fff1ec; border-color: #f8e5de; }
.metric-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--brand-dark); background: rgba(255, 255, 255, .65); border-radius: 9px; font-size: 17px; font-weight: 700; }
.metric-card-blue .metric-icon { color: #3974bb; }
.metric-card-lilac .metric-icon { color: #6652b5; }
.metric-card-peach .metric-icon { color: #c36050; }
.trend { padding: 5px 7px; border-radius: 6px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.trend-up { color: #2d866c; background: rgba(207, 246, 226, .76); }
.trend-warn { color: #af6d3d; background: rgba(255, 223, 196, .82); }
.metric-label { margin: 20px 0 5px; color: #74908a; font-size: 10px; font-weight: 650; }
.metric-value { display: block; color: var(--ink); font-size: clamp(19px, 2.1vw, 26px); font-weight: 500; letter-spacing: -.055em; }
.metric-footnote { margin: 8px 0 0; color: #8ca39b; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .9fr); gap: 14px; margin-top: 14px; }
.lower-grid { grid-template-columns: minmax(0, 1.55fr) minmax(310px, .9fr); }
.panel { min-width: 0; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 5px 20px rgba(28, 74, 67, .025); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-heading h2, .table-toolbar h2 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 550; letter-spacing: -.035em; }
.panel-heading .eyebrow { margin-bottom: 7px; }
.select-control { min-height: 34px; width: auto; min-width: 135px; padding: 0 28px 0 10px; color: var(--muted-dark); background-color: #fbfdfb; border-radius: 8px; font-size: 10px; }
.chart-legend { display: flex; align-items: center; gap: 14px; margin-top: 22px; color: #829790; font-size: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { display: block; width: 7px; height: 7px; border-radius: 50%; }
.legend-income { background: #3ba88c; }
.legend-expense { background: #a8c8bc; }
.chart-summary { margin-left: auto; }
.chart-summary strong { color: var(--ink-soft); font-weight: 750; }
.bar-chart { display: flex; height: 208px; margin-top: 18px; }
.chart-y-axis { display: flex; flex-direction: column; justify-content: space-between; width: 43px; padding-bottom: 24px; color: #a2b3ae; font-size: 9px; }
.chart-bars { display: flex; align-items: end; justify-content: space-around; flex: 1; gap: 14px; padding: 0 8px 24px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 40px, #edf3ef 41px, transparent 42px); }
.bar-group { display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: end; gap: 9px; min-width: 30px; flex: 1; }
.bar-pair { display: flex; align-items: end; justify-content: center; gap: 4px; width: 100%; height: 170px; }
.bar { display: block; width: clamp(10px, 1.6vw, 17px); min-height: 8px; border-radius: 4px 4px 1px 1px; }
.bar-income { background: #49ae91; }
.bar-expense { background: #aed0c1; }
.bar-group.is-current .bar-income { background: var(--brand-dark); }
.bar-group small { color: #92a6a0; font-size: 9px; }
.bar-group.is-current small { color: var(--brand); font-weight: 800; }
.chart-callout { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; padding: 8px 11px; color: #648078; background: #f5faf7; border-radius: 7px; font-size: 10px; }
.chart-callout strong { color: var(--brand-dark); }
.callout-dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; }
.more-button { padding: 3px 1px; color: #9aaea8; background: transparent; border: 0; letter-spacing: 2px; }
.more-button:hover { color: var(--brand); }
.health-score { display: flex; align-items: center; gap: 17px; margin: 25px 0 23px; }
.score-ring { position: relative; display: flex; align-items: baseline; justify-content: center; flex: 0 0 92px; width: 92px; height: 92px; padding-top: 31px; background: conic-gradient(var(--brand) 0 86%, #e6f1ec 86% 100%); border-radius: 50%; isolation: isolate; }
.score-ring::after { content: ""; position: absolute; z-index: -1; inset: 8px; background: var(--surface); border-radius: 50%; }
.score-ring strong { color: var(--ink); font-size: 25px; font-weight: 500; letter-spacing: -.07em; }
.score-ring span { color: #91a59e; font-size: 10px; }
.score-title { display: block; color: var(--ink); font-size: 13px; }
.health-score p { max-width: 130px; margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.progress-list { display: grid; gap: 14px; }
.progress-row > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; color: #78908a; font-size: 10px; }
.progress-row strong { color: var(--ink-soft); font-weight: 750; }
.progress-track { height: 6px; overflow: hidden; background: #edf3f0; border-radius: 20px; }
.progress-fill { display: block; height: 100%; border-radius: inherit; }
.fill-green { background: #45a789; }
.fill-yellow { background: #dfb55e; }
.fill-red { background: #d57670; }
.inline-link { display: inline-block; margin-top: 24px; padding: 0; color: var(--brand); background: transparent; border: 0; font-size: 10px; font-weight: 750; }
.table-panel, .activity-panel { min-height: 100%; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; min-width: 560px; margin-top: 18px; border-collapse: collapse; text-align: left; }
.data-table th { padding: 0 10px 11px; color: #97aaa4; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 11px 10px; color: var(--muted-dark); border-bottom: 1px solid #eef3f0; font-size: 10px; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.member-cell { display: flex; align-items: center; gap: 8px; }
.member-cell strong, .member-cell small { display: block; }
.member-cell strong { color: var(--ink-soft); font-size: 10px; font-weight: 750; }
.member-cell small { margin-top: 3px; color: #9aada7; font-size: 9px; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 6px; font-size: 9px; font-weight: 750; }
.status-badge::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.status-active { color: #3a8c71; background: #e6f6ed; }
.status-pending { color: #b17b2a; background: #fff6df; }
.status-inactive { color: #ae6565; background: #fff0ef; }
.activity-list { margin-top: 11px; }
.activity-item { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid #eef3f0; }
.activity-item:last-child { padding-bottom: 0; border-bottom: 0; }
.activity-dot { flex: 0 0 7px; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(0, 0, 0, .025); }
.dot-blue { background: #5c99da; }.dot-green { background: #57aa87; }.dot-orange { background: #e3a456; }.dot-purple { background: #8d7bd2; }
.activity-item div { min-width: 0; }
.activity-item strong { display: block; color: var(--ink-soft); font-size: 10px; font-weight: 750; }
.activity-item p { margin: 4px 0 0; color: #899e97; font-size: 9px; }
.activity-item time { display: block; margin-top: 6px; color: #b0beb9; font-size: 8px; }

.member-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.summary-stat { display: flex; align-items: center; gap: 13px; padding: 15px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.summary-icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
.summary-icon-green { color: var(--brand); background: var(--brand-soft); }.summary-icon-blue { color: var(--blue); background: var(--blue-soft); }.summary-icon-coral { color: var(--coral); background: var(--coral-soft); }
.summary-stat div { min-width: 0; }
.summary-stat div span, .summary-stat div small { display: block; }
.summary-stat div span { color: #849a93; font-size: 10px; }
.summary-stat div strong { display: block; margin: 3px 0 4px; color: var(--ink); font-size: 21px; font-weight: 500; letter-spacing: -.05em; }
.summary-stat div small { color: #8ba098; font-size: 9px; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.table-toolbar h2 { font-size: 17px; }
.table-toolbar p { margin: 5px 0 0; color: #8da19a; font-size: 10px; }
.table-tools { display: flex; align-items: center; gap: 8px; }
.table-search { display: flex; align-items: center; gap: 7px; width: 200px; min-height: 34px; padding: 0 10px; color: #8da39b; background: #fbfdfb; border: 1px solid var(--line); border-radius: 8px; }
.table-search span { font-size: 17px; }
.table-search input { min-width: 0; flex: 1; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 10px; }
.table-search input::placeholder { color: #a2b3ad; }
.members-table { min-width: 840px; }
.members-table td { padding-top: 13px; padding-bottom: 13px; }
.row-menu { padding: 4px; color: #9aada6; background: transparent; border: 0; font-size: 11px; letter-spacing: 2px; }
.row-menu:hover { color: var(--brand); }
.table-empty { padding: 45px 20px; color: var(--muted); text-align: center; }
.empty-symbol { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 10px; color: var(--brand); background: var(--brand-soft); border-radius: 10px; font-size: 20px; }
.table-empty strong { display: block; color: var(--ink-soft); font-size: 13px; }
.table-empty p { margin: 6px 0 0; font-size: 11px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; color: #8ea29b; font-size: 10px; }
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination button { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; color: #879b94; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; font-size: 10px; }
.pagination button:hover, .pagination button.is-current { color: var(--brand-dark); background: var(--brand-soft); border-color: #c3e5d8; }
.pagination span { color: #a2b1ac; }

.member-welcome-card { position: relative; display: flex; justify-content: space-between; min-height: 205px; margin-bottom: 18px; padding: 25px 30px; overflow: hidden; color: #eafff5; background: #0f625b; border-radius: 16px; isolation: isolate; }
.member-welcome-copy { position: relative; z-index: 1; }
.member-status-pill { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; padding: 6px 9px; color: #c7f5e1; background: rgba(214, 255, 237, .12); border: 1px solid rgba(214, 255, 237, .16); border-radius: 7px; font-size: 9px; font-weight: 750; }
.member-status-pill i { width: 6px; height: 6px; background: #9be6c3; border-radius: 50%; }
.member-welcome-card .eyebrow { margin-bottom: 7px; }
.member-welcome-card h2 { margin: 0; color: #f2fff9; font-size: 25px; font-weight: 500; letter-spacing: -.05em; }
.member-number { margin: 7px 0 0; color: #a9d9c8; font-size: 11px; }
.member-number span { margin: 0 5px; color: #6db7a3; }
.member-welcome-meta { display: flex; gap: 40px; margin-top: 26px; }
.member-welcome-meta small, .member-welcome-meta strong { display: block; }
.member-welcome-meta small { color: #80b9a7; font-size: 9px; }
.member-welcome-meta strong { margin-top: 4px; color: #e5fff4; font-size: 10px; }
.member-card-mark { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 118px; }
.qr-placeholder { display: grid; grid-template-columns: repeat(3, 12px); grid-template-rows: repeat(3, 12px); gap: 4px; padding: 9px; background: #e7fff3; border-radius: 7px; transform: rotate(-5deg); }
.qr-placeholder span, .qr-placeholder i { display: block; background: #15564e; }
.qr-placeholder span:nth-child(1) { grid-column: 1; grid-row: 1; }.qr-placeholder span:nth-child(2) { grid-column: 3; grid-row: 1; }.qr-placeholder span:nth-child(3) { grid-column: 1; grid-row: 3; }.qr-placeholder span:nth-child(4) { grid-column: 2; grid-row: 2; }.qr-placeholder i { grid-column: 3; grid-row: 3; }
.member-card-mark small { margin-top: 14px; color: #9bd5c1; font-size: 8px; letter-spacing: .11em; }
.member-welcome-pattern { position: absolute; z-index: -1; width: 430px; height: 430px; right: -145px; top: -116px; border: 1px solid rgba(205, 255, 236, .15); border-radius: 50%; box-shadow: 0 0 0 52px rgba(205, 255, 236, .035), 0 0 0 104px rgba(205, 255, 236, .025); }
.member-balance-highlight { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.member-balance-highlight strong { color: var(--ink); font-size: 24px; font-weight: 500; letter-spacing: -.06em; }
.member-balance-highlight span { color: #3c9b7d; font-size: 10px; font-weight: 700; }
.member-line-chart { display: flex; height: 190px; margin-top: 13px; }
.line-y-axis { display: flex; flex-direction: column; justify-content: space-between; width: 45px; padding-bottom: 20px; color: #a2b3ae; font-size: 9px; }
.line-chart-area { position: relative; flex: 1; min-width: 0; padding-bottom: 20px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 40px, #edf3ef 41px, transparent 42px); }
.line-chart-area svg { display: block; width: 100%; height: calc(100% - 20px); overflow: visible; }
.chart-area-fill { fill: url(#memberChartFill); }
.chart-line { fill: none; stroke: var(--brand); stroke-linecap: round; stroke-width: 3; }
.chart-point { fill: var(--brand-dark); stroke: #d6f3e5; stroke-width: 4; }
.line-x-axis { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #92a6a0; font-size: 9px; }
.due-day { padding: 5px 7px; color: #b17b2a; background: var(--yellow-soft); border-radius: 6px; font-size: 9px; font-weight: 800; }
.due-card { display: flex; align-items: center; gap: 14px; margin-top: 25px; padding: 15px; background: #f5faf7; border: 1px solid #e5f0ea; border-radius: 11px; }
.due-date { display: flex; align-items: center; justify-content: center; flex: 0 0 56px; gap: 3px; height: 56px; color: var(--brand-dark); background: #dff4e8; border-radius: 9px; }
.due-date strong { font-size: 25px; font-weight: 500; letter-spacing: -.07em; }.due-date span { color: #65978a; font-size: 8px; font-weight: 800; line-height: 1.1; }
.due-card > div:last-child { min-width: 0; }.due-card strong { display: block; color: var(--ink-soft); font-size: 11px; }.due-card p { margin: 4px 0 9px; color: #8ca29a; font-size: 9px; }.due-card div:last-child > span { color: var(--brand-dark); font-size: 14px; font-weight: 750; }
.due-note { display: flex; gap: 8px; margin-top: 15px; padding: 10px; color: #8e774e; background: #fff9e9; border-radius: 8px; }.due-note > span { display: grid; flex: 0 0 16px; place-items: center; width: 16px; height: 16px; color: #fff; background: #d9a452; border-radius: 50%; font-size: 10px; font-weight: 800; }.due-note p { margin: 0; font-size: 9px; line-height: 1.45; }
.member-transactions { margin-top: 12px; }.transaction-row { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid #eef3f0; }.transaction-row:last-child { border-bottom: 0; }.transaction-icon { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-weight: 800; }.transaction-in { color: var(--brand); background: var(--brand-soft); }.transaction-out { color: var(--coral); background: var(--coral-soft); }.transaction-row div { min-width: 0; flex: 1; }.transaction-row strong, .transaction-row small { display: block; }.transaction-row strong { color: var(--ink-soft); font-size: 10px; }.transaction-row small { margin-top: 4px; color: #97aaa4; font-size: 9px; }.transaction-row b { color: var(--brand-dark); font-size: 10px; white-space: nowrap; }.transaction-row b.amount-out { color: var(--coral); }
.announcement-item { display: flex; gap: 11px; padding: 15px 0; border-bottom: 1px solid #eef3f0; }.announcement-date { display: grid; flex: 0 0 37px; place-items: center; align-content: center; width: 37px; height: 37px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1; }.announcement-date small { margin-top: 3px; color: #7da295; font-size: 7px; font-weight: 800; }.announcement-item div { min-width: 0; }.announcement-item strong { display: block; color: var(--ink-soft); font-size: 10px; }.announcement-item p { margin: 4px 0 0; color: #899e97; font-size: 9px; line-height: 1.45; }.announcement-item time { display: block; margin-top: 5px; color: #b0beb9; font-size: 8px; }.announcement-panel .inline-link { margin-top: 17px; }

.module-preview { display: flex; align-items: stretch; justify-content: space-between; gap: 30px; padding: 28px; background: #eaf6f0; border: 1px solid #dcefe5; border-radius: 16px; }.module-preview-main { display: flex; gap: 22px; max-width: 680px; }.preview-number { color: #9bceb9; font-size: 47px; font-weight: 500; letter-spacing: -.08em; line-height: .9; }.module-preview h2 { margin: 0; color: var(--ink); font-size: 21px; font-weight: 500; letter-spacing: -.05em; }.module-preview p:not(.eyebrow) { margin: 10px 0 0; color: #66867b; font-size: 12px; line-height: 1.7; }.preview-checklist { display: grid; min-width: 240px; gap: 11px; padding-left: 26px; border-left: 1px solid #cfe6db; }.preview-checklist div { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; }.preview-checklist span { grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; color: var(--brand); background: #d4f1e2; border-radius: 6px; font-size: 11px; }.preview-checklist strong { color: var(--ink-soft); font-size: 10px; }.preview-checklist small { margin-top: 3px; color: #8ba79d; font-size: 9px; }.module-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }.module-cards article { padding: 19px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }.module-card-icon { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 17px; color: var(--brand); background: var(--brand-soft); border-radius: 9px; font-size: 17px; }.module-cards strong { color: var(--ink-soft); font-size: 11px; }.module-cards p { margin: 6px 0 0; color: #8da29b; font-size: 10px; line-height: 1.55; }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 14px; }.profile-card, .profile-balance { min-height: 280px; }.profile-top { display: flex; align-items: center; gap: 17px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }.profile-top h2 { margin: 9px 0 4px; color: var(--ink); font-size: 21px; font-weight: 500; letter-spacing: -.04em; }.profile-top p { margin: 0; color: #8da29b; font-size: 10px; }.profile-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 23px; }.profile-details span, .profile-details strong { display: block; }.profile-details span { color: #91a59e; font-size: 9px; }.profile-details strong { margin-top: 5px; color: var(--ink-soft); font-size: 11px; }.profile-balance h2 { margin: 0 0 22px; color: var(--ink); font-size: 17px; font-weight: 550; letter-spacing: -.035em; }.profile-balance-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; color: #829790; border-bottom: 1px solid #eef3f0; font-size: 10px; }.profile-balance-row strong { color: var(--ink-soft); font-size: 11px; }.detail-placeholder { display: flex; gap: 24px; margin-top: 14px; }.detail-placeholder h2 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 500; letter-spacing: -.04em; }.detail-placeholder p:not(.eyebrow) { max-width: 650px; margin: 9px 0 0; color: #829890; font-size: 11px; line-height: 1.65; }

.modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 24px; }.modal-backdrop { position: absolute; inset: 0; background: rgba(8, 38, 35, .48); backdrop-filter: blur(3px); }.modal-card { position: relative; width: min(100%, 530px); padding: 25px; background: var(--surface); border: 1px solid rgba(255, 255, 255, .7); border-radius: 17px; box-shadow: var(--shadow-deep); }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.modal-header h2 { margin: 0; color: var(--ink); font-size: 22px; font-weight: 500; letter-spacing: -.05em; }.modal-header p:not(.eyebrow) { margin: 6px 0 0; color: #8da29b; font-size: 10px; }.close-button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #89a199; background: #f2f7f4; border: 0; border-radius: 8px; font-size: 19px; line-height: 1; }.close-button:hover { color: var(--brand-dark); background: var(--brand-soft); }.member-form { margin-top: 26px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 12px; }.form-field-wide { grid-column: 1 / -1; }.form-field .select-control { width: 100%; min-height: 48px; }.form-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding: 10px 11px; color: #738e84; background: #f4faf6; border: 1px solid #e0efe6; border-radius: 8px; }.form-note > span { display: grid; flex: 0 0 16px; place-items: center; width: 16px; height: 16px; color: #fff; background: var(--brand); border-radius: 50%; font-size: 10px; font-weight: 800; }.form-note p { margin: 0; font-size: 10px; line-height: 1.5; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 25px; }
.toast { position: fixed; z-index: 40; right: 26px; bottom: 26px; display: flex; align-items: center; gap: 9px; max-width: min(360px, calc(100vw - 40px)); padding: 12px 15px; color: #eafff6; background: #164f49; border-radius: 10px; box-shadow: 0 15px 30px rgba(7, 55, 50, .24); font-size: 11px; }.toast-icon { display: grid; place-items: center; width: 19px; height: 19px; color: #145b50; background: #c6f2df; border-radius: 50%; font-size: 11px; font-weight: 800; }

@media (max-width: 1180px) { .login-shell { grid-template-columns: minmax(0, 1fr) minmax(390px, .84fr); }.login-showcase { padding-left: 54px; padding-right: 54px; }.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-grid, .lower-grid { grid-template-columns: 1fr; }.health-panel { min-height: auto; }.health-panel .inline-link { margin-top: 21px; } }
@media (max-width: 900px) { .login-shell { display: block; }.login-showcase { min-height: 330px; padding: 28px 32px 33px; }.showcase-copy { margin-top: 42px; padding: 0; }.showcase-copy h1 { max-width: 560px; font-size: clamp(35px, 7vw, 53px); }.showcase-description, .showcase-copy > p:last-child { max-width: 520px; margin-top: 14px; font-size: 12px; }.showcase-footer { display: none; }.login-panel { min-height: calc(100vh - 330px); padding: 45px 32px 54px; }.sidebar { transform: translateX(-105%); transition: transform .25s ease; box-shadow: var(--shadow-deep); }.sidebar.is-open { transform: translateX(0); }.sidebar-scrim.is-open { position: fixed; z-index: 9; inset: 0; display: block; background: rgba(11, 45, 42, .38); }.main-area { width: 100%; margin-left: 0; }.menu-button { display: inline-grid; }.topbar { min-height: 76px; padding-top: 14px; padding-bottom: 14px; }.global-search { width: min(220px, 28vw); } }
@media (max-width: 650px) { .demo-ribbon { top: 10px; right: 10px; padding: 5px 7px; font-size: 8px; }.login-showcase { min-height: 290px; padding: 25px 23px 28px; }.showcase-copy { margin-top: 47px; }.showcase-copy h1 { max-width: 420px; font-size: 38px; }.showcase-description, .showcase-copy > p:last-child { max-width: 380px; font-size: 11px; line-height: 1.55; }.orb-one { top: 11%; right: -320px; }.login-panel { min-height: auto; padding: 35px 22px 42px; }.login-heading h1 { font-size: 31px; }.login-form { margin-top: 28px; }.demo-account-row { align-items: flex-start; flex-direction: column; gap: 8px; }.demo-account-row .outline-button { width: 100%; }.topbar { align-items: flex-start; }.topbar-actions { gap: 4px; }.topbar-user { display: none; }.global-search { width: 38px; padding: 0; justify-content: center; border: 0; background: transparent; }.global-search input, .global-search kbd { display: none; }.global-search > span { font-size: 22px; }.notification-button { width: 34px; height: 34px; }.topbar-left h2 { font-size: 17px; }.topbar-kicker { font-size: 8px; }.page-content { padding: 28px 16px 48px; }.content-heading { align-items: flex-start; flex-direction: column; gap: 19px; margin-bottom: 21px; }.content-heading h1 { font-size: 31px; }.heading-actions { width: 100%; justify-content: stretch; }.heading-actions a, .heading-actions button { flex: 1; }.insight-strip { align-items: flex-start; flex-wrap: wrap; padding: 13px; }.insight-strip div { flex-basis: calc(100% - 50px); }.insight-strip a { margin-left: 45px; padding-left: 0; }.metric-grid { gap: 9px; }.metric-card { min-height: 148px; padding: 14px; }.metric-label { margin-top: 16px; }.metric-value { font-size: 20px; }.metric-footnote { line-height: 1.4; }.panel { padding: 17px 14px; border-radius: 13px; }.panel-heading { gap: 10px; }.panel-heading h2 { font-size: 15px; }.chart-legend { flex-wrap: wrap; gap: 9px 14px; }.chart-summary { flex-basis: 100%; margin: 3px 0 0; }.bar-chart { height: 180px; }.bar-pair { height: 143px; }.chart-bars { gap: 4px; }.health-score { margin-top: 21px; }.table-toolbar { align-items: flex-start; flex-direction: column; gap: 14px; }.table-tools { width: 100%; flex-wrap: wrap; }.table-search { flex: 1; width: auto; }.table-tools .select-control { flex: 0 0 135px; }.member-summary-grid { grid-template-columns: 1fr; gap: 9px; }.summary-stat { padding: 12px 14px; }.member-welcome-card { min-height: 250px; padding: 20px; }.member-card-mark { position: absolute; right: 20px; bottom: 20px; transform: scale(.75); transform-origin: bottom right; }.member-welcome-meta { gap: 20px; margin-top: 22px; }.module-preview { flex-direction: column; gap: 23px; padding: 20px; }.module-preview-main { gap: 14px; }.preview-number { font-size: 36px; }.module-preview h2 { font-size: 18px; }.preview-checklist { min-width: 0; padding-top: 18px; padding-left: 0; border-top: 1px solid #cfe6db; border-left: 0; }.module-cards { grid-template-columns: 1fr; }.table-footer { align-items: flex-start; flex-direction: column; }.profile-layout { grid-template-columns: 1fr; }.profile-details { gap: 17px 12px; }.detail-placeholder { gap: 15px; }.modal { padding: 14px; }.modal-card { padding: 20px 16px; }.form-grid { grid-template-columns: 1fr; }.form-field-wide { grid-column: auto; }.modal-actions { flex-direction: column-reverse; }.modal-actions button { width: 100%; } }

.module-data-shell { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(285px, .8fr); gap: 14px; margin-top: 14px; }
.module-table-panel { min-width: 0; }
.module-data-table { min-width: 720px; }
.module-data-table td:first-child { min-width: 205px; }
.module-table-footer { margin-top: 14px; }
.module-demo-label { color: #a0b3ac; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.module-side-panel { min-width: 0; }
.module-side-badge { padding: 5px 8px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 6px; font-size: 9px; font-weight: 800; }
.module-side-description { margin: 7px 0 25px; color: #8a9f98; font-size: 10px; line-height: 1.55; }
.module-progress-list { gap: 17px; }
.fill-blue { background: #5d98d1; }
.module-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 27px; padding: 11px; color: #7b9189; background: #f5faf7; border: 1px solid #e2efe8; border-radius: 9px; }
.module-note > span { display: grid; flex: 0 0 17px; place-items: center; width: 17px; height: 17px; color: #fff; background: var(--brand); border-radius: 50%; font-size: 10px; font-weight: 800; }
.module-note p { margin: 0; font-size: 9px; line-height: 1.55; }
.module-actions { margin-top: 25px; }
.module-actions .eyebrow { margin-bottom: 10px; }
.module-actions .outline-button { width: 100%; justify-content: flex-start; margin-top: 7px; padding: 0 11px; }
.module-actions .outline-button span:first-child { width: 17px; color: var(--brand); font-size: 14px; }
.module-actions .outline-button span:nth-child(2) { flex: 1; text-align: left; }
.module-actions .outline-button span:last-child { margin-left: auto; color: #8aa49b; }

@media (max-width: 1180px) { .module-data-shell { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .module-data-table { min-width: 670px; }.module-demo-label { margin-top: 2px; }.module-side-description { margin-bottom: 20px; } }

.nav-new { margin-left: auto; padding: 4px 5px; color: #aeead4; background: rgba(205, 255, 235, .1); border-radius: 5px; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nav-item.is-active .nav-new { color: var(--brand-dark); background: #bcebd8; }
.demo-chip { display: inline-flex; align-items: center; min-height: 35px; padding: 0 10px; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid #cfe9dd; border-radius: 8px; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.transaction-balance-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 16px 18px; background: #eaf6f0; border: 1px solid #dcefe5; border-radius: 13px; }
.transaction-balance-copy { display: flex; align-items: center; gap: 12px; }
.transaction-balance-icon { display: grid; place-items: center; width: 33px; height: 33px; color: var(--brand-dark); background: #d2f0e1; border-radius: 9px; font-size: 17px; }
.transaction-balance-copy small, .transaction-balance-copy strong { display: block; }
.transaction-balance-copy small { color: #709188; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.transaction-balance-copy strong { margin-top: 3px; color: var(--ink); font-size: 18px; font-weight: 550; letter-spacing: -.05em; }
.transaction-balance-note { color: #6d8d82; font-size: 9px; text-align: right; }
.transaction-balance-note strong { display: block; color: var(--brand-dark); font-size: 10px; }
.transaction-balance-note span { display: block; margin-top: 3px; }
.transaction-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .75fr); gap: 14px; margin-top: 14px; }
.transaction-service-panel, .transaction-summary-panel { min-width: 0; }
.transaction-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.transaction-panel-heading h2, .transaction-summary-panel h2, .transaction-history-heading h2 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 550; letter-spacing: -.04em; }
.transaction-tabs { display: flex; gap: 4px; padding: 3px; background: #f2f7f4; border-radius: 8px; }
.transaction-tab { min-height: 29px; padding: 0 10px; color: #89a199; background: transparent; border: 0; border-radius: 6px; font-size: 9px; font-weight: 800; }
.transaction-tab:hover, .transaction-tab.is-active, .transaction-tab[aria-selected="true"] { color: var(--brand-dark); background: var(--surface); box-shadow: 0 2px 7px rgba(22, 77, 67, .08); }
.transaction-field { display: block; margin-top: 21px; color: var(--ink-soft); font-size: 9px; font-weight: 800; }
.transaction-input { display: block; width: 100%; min-height: 39px; margin-top: 7px; padding: 0 11px; color: var(--ink); background: #fbfdfb; border: 1px solid var(--line); border-radius: 8px; outline: 0; font-size: 10px; }
.transaction-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22, 125, 113, .1); }
.transaction-section-label { margin: 20px 0 9px; color: var(--muted); font-size: 9px; font-weight: 800; }
.transaction-section-label-top { margin-top: 21px; }
.operator-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.operator-chip { min-height: 27px; padding: 0 9px; color: #7e9790; background: #f5faf7; border: 1px solid var(--line); border-radius: 6px; font-size: 8px; font-weight: 800; }
.operator-chip:hover, .operator-chip.is-selected { color: var(--brand-dark); background: var(--brand-soft); border-color: #b9dfcf; }
.transaction-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.transaction-product { min-height: 63px; padding: 10px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; text-align: left; }
.transaction-product:hover, .transaction-product.is-selected { color: var(--brand-dark); background: #f1faf5; border-color: #8ecbb6; box-shadow: 0 5px 13px rgba(22, 125, 113, .08); }
.transaction-product strong, .transaction-product small { display: block; }
.transaction-product strong { font-size: 10px; }
.transaction-product small { margin-top: 6px; color: #8ca39b; font-size: 8px; }
.ppob-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 23px; }
.ppob-category { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px; color: var(--ink-soft); background: #fbfdfb; border: 1px solid var(--line); border-radius: 9px; text-align: left; }
.ppob-category:hover, .ppob-category.is-selected { color: var(--brand-dark); background: #f1faf5; border-color: #8ecbb6; }
.ppob-category-icon { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; color: var(--brand); background: var(--brand-soft); border-radius: 8px; font-size: 14px; }
.ppob-category strong, .ppob-category small { display: block; }
.ppob-category strong { font-size: 9px; }
.ppob-category small { margin-top: 4px; color: #8ca39b; font-size: 8px; }
.transaction-summary-panel { position: relative; overflow: hidden; color: #eafff5; background: #0f625b; border-color: #0f625b; }
.transaction-summary-panel::after { content: ""; position: absolute; right: -105px; bottom: -135px; width: 300px; height: 300px; border: 1px solid rgba(205, 255, 236, .12); border-radius: 50%; box-shadow: 0 0 0 35px rgba(205, 255, 236, .035), 0 0 0 70px rgba(205, 255, 236, .025); }
.transaction-summary-panel .eyebrow { position: relative; z-index: 1; color: #a8e6d2; }
.transaction-summary-panel h2 { position: relative; z-index: 1; color: #f2fff9; }
.transaction-selected-product { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(214, 255, 237, .14); }
.transaction-selected-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; color: #0f625b; background: #d5f5e5; border-radius: 9px; font-size: 16px; }
.transaction-selected-product > span:last-child { min-width: 0; }
.transaction-selected-product small, .transaction-selected-product strong, .transaction-selected-product span { display: block; }
.transaction-selected-product small { color: #9bd5c1; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.transaction-selected-product strong { margin-top: 4px; color: #effff9; font-size: 11px; }
.transaction-selected-product span { margin-top: 3px; color: #9bd5c1; font-size: 8px; }
.transaction-summary-lines { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: 19px; }
.transaction-summary-lines > div { display: flex; justify-content: space-between; gap: 12px; color: #a6d0c1; font-size: 9px; }
.transaction-summary-lines strong { color: #effff9; font-size: 10px; }
.transaction-total-line { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(214, 255, 237, .14); }
.transaction-total-line strong { font-size: 16px; letter-spacing: -.04em; }
.transaction-pay-button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; margin-top: 25px; gap: 8px; color: var(--brand-dark); background: #d7f4e8; border: 1px solid #d7f4e8; border-radius: 9px; font-size: 10px; font-weight: 800; }
.transaction-pay-button:hover { background: #effff8; }
.transaction-feedback { position: relative; z-index: 1; margin: 12px 0 0; color: #a9dcc9; font-size: 8px; line-height: 1.5; text-align: center; }
.transaction-history-panel { margin-top: 14px; }
.transaction-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.transaction-history-heading .inline-link { margin-top: 0; }
.transaction-history-list { display: grid; margin-top: 13px; }
.transaction-history-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #eef3f0; }
.transaction-history-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--brand); background: var(--brand-soft); border-radius: 8px; font-size: 13px; }
.transaction-history-row strong, .transaction-history-row small { display: block; }
.transaction-history-row strong { color: var(--ink-soft); font-size: 9px; }
.transaction-history-row small { margin-top: 3px; color: #91a59e; font-size: 8px; }
.transaction-history-row time { color: #9aada7; font-size: 8px; }
.transaction-history-row b { color: var(--coral); font-size: 9px; font-weight: 800; white-space: nowrap; }

@media (max-width: 1180px) { .transaction-layout { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .transaction-balance-strip { align-items: flex-start; flex-direction: column; gap: 10px; }.transaction-balance-note { text-align: left; }.transaction-panel-heading { align-items: flex-start; flex-direction: column; }.transaction-tabs { width: 100%; }.transaction-tab { flex: 1; }.transaction-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.transaction-history-heading { align-items: flex-start; flex-direction: column; gap: 5px; }.transaction-history-row { grid-template-columns: 29px minmax(0, 1fr) auto; }.transaction-history-row time { display: none; }.demo-chip { width: 100%; justify-content: center; } }