@font-face {
    font-family: "Geist Mono";
    src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

/* Privilege awards and controlled card-ledger adjustments */
.admin-privilege-panel {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--angelos-gold) 42%, var(--border));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--angelos-gold) 14%, transparent), transparent 34%),
        var(--bg-elevated);
}

.admin-privilege-panel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--angelos-gold), transparent);
}

.admin-privilege-mark {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--angelos-gold) 55%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--angelos-gold) 13%, transparent);
    color: var(--angelos-gold);
    font-size: 1.5rem;
}

.admin-privilege-summary {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 1fr;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.admin-privilege-summary > div,
.admin-card-balance-readout {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--angelos-gold) 6%, var(--bg-elevated));
}

.admin-privilege-summary span,
.admin-card-balance-readout span {
    color: var(--muted);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-privilege-summary strong,
.admin-card-balance-readout strong {
    font-family: var(--font-mono);
    font-size: 1.15rem;
}

.admin-privilege-summary > div:first-child strong,
.admin-card-balance-readout strong {
    color: var(--angelos-gold);
    font-size: 1.45rem;
}

.admin-form-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-form-action-row .admin-form-help {
    max-width: 43rem;
    margin: 0;
}

.admin-privilege-ledger,
.admin-card-adjustment-ledger {
    margin-top: 1.2rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.admin-card-balance-panel {
    border-color: color-mix(in srgb, var(--angelos-gold) 28%, var(--border));
}

.admin-card-balance-readout {
    min-width: 13rem;
    text-align: right;
}

.admin-history-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--angelos-gold) 5%, var(--bg-elevated));
    cursor: pointer;
}

.admin-history-check input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    accent-color: var(--angelos-gold);
}

.admin-history-check span,
.admin-history-check strong,
.admin-history-check small {
    display: block;
}

.admin-history-check small {
    margin-top: 0.2rem;
    color: var(--muted);
    line-height: 1.45;
}

/* Monthly investment-return operations */
.admin-return-panel {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--admin-accent) 34%, var(--admin-border));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--admin-accent) 11%, transparent), transparent 34%),
        var(--admin-surface);
}

.admin-return-panel::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--admin-accent), transparent);
}

.admin-return-mark {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 42%, transparent);
    border-radius: 1rem;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    font-size: 1.35rem;
    font-weight: 800;
}

.admin-return-summary {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 0.7fr;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.admin-return-summary > div {
    display: grid;
    gap: 0.22rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--admin-accent) 4%, var(--admin-surface));
}

.admin-return-summary span {
    color: var(--admin-muted);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-return-summary strong {
    color: var(--admin-ink);
    font-family: var(--font-numeric);
    font-size: 1.15rem;
}

.admin-return-summary > div:first-child strong {
    color: var(--admin-accent);
    font-size: 1.45rem;
}

.admin-return-form {
    padding: 1rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--admin-accent) 2.5%, var(--admin-surface));
}

.admin-return-email-field {
    max-width: 34rem;
}

.admin-return-ledger {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--admin-border);
}

.admin-return-email-error {
    display: block;
    margin-top: 0.25rem;
    color: var(--danger);
    font-size: 0.68rem;
}

.admin-return-ledger .is-credit {
    color: var(--success);
    font-family: var(--font-numeric);
    font-weight: 750;
}

.pay-privilege-space {
    border-color: color-mix(in srgb, var(--angelos-gold) 40%, var(--pay-line));
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--angelos-gold) 9%, var(--pay-card)), var(--pay-card) 62%);
}

.pay-privilege-space .pay-health-space-art {
    background: color-mix(in srgb, var(--angelos-gold) 16%, var(--pay-card));
}

.pay-privilege-space-badge {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--angelos-gold) 55%, transparent);
    border-radius: 50%;
    color: var(--angelos-gold);
    font-size: 1rem;
}

.pay-privilege-page {
    display: grid;
    gap: 1.1rem;
}

.pay-privilege-page .pay-card-titlebar {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem;
    align-items: center;
}

.pay-privilege-page .pay-card-titlebar > div {
    text-align: center;
}

.pay-privilege-page .pay-card-titlebar h1 {
    margin: 0.15rem 0 0;
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 6vw, 1.8rem);
    line-height: 1.08;
}

.pay-privilege-hero {
    position: relative;
    min-height: 13.5rem;
    overflow: hidden;
    padding: 1.4rem 8.5rem 1.4rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--angelos-gold) 45%, var(--pay-line));
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--angelos-gold) 18%, transparent), transparent 35%),
        var(--pay-card);
}

.pay-privilege-hero > div {
    position: relative;
    z-index: 2;
}

.pay-privilege-hero strong {
    display: block;
    margin: 0.55rem 0 0.65rem;
    color: var(--pay-ink);
    font-family: var(--font-mono);
    font-size: clamp(2rem, 10vw, 3rem);
    letter-spacing: -0.06em;
}

.pay-privilege-hero p {
    max-width: 18rem;
    margin: 0;
    color: var(--pay-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.pay-privilege-hero > img {
    position: absolute;
    right: -1rem;
    bottom: -0.5rem;
    width: 10.5rem;
    opacity: 0.3;
}

.pay-privilege-seal {
    position: absolute;
    z-index: 3;
    top: 1rem;
    right: 1rem;
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border: 1px solid var(--angelos-gold);
    border-radius: 50%;
    background: var(--pay-card);
    color: var(--angelos-gold);
    font-family: var(--font-mono);
    font-weight: 800;
}

.pay-privilege-count {
    color: var(--pay-muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.pay-privilege-entry {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--pay-line);
    border-radius: 1rem;
    background: var(--pay-card);
}

.pay-privilege-entry-mark {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--angelos-gold) 15%, var(--pay-card));
    color: var(--angelos-gold);
}

.pay-privilege-entry strong,
.pay-privilege-entry p,
.pay-privilege-entry small {
    display: block;
}

.pay-privilege-entry p {
    margin: 0.15rem 0;
    color: var(--pay-muted);
    font-size: 0.76rem;
}

.pay-privilege-entry small {
    color: var(--pay-muted);
    font-size: 0.67rem;
}

.pay-privilege-entry-value {
    color: var(--angelos-gold);
    font-family: var(--font-mono);
    font-weight: 750;
    white-space: nowrap;
}

.pay-privilege-empty {
    display: grid;
    justify-items: center;
    padding: 2rem 1.2rem;
    border: 1px solid var(--pay-line);
    border-radius: 1rem;
    background: var(--pay-card);
    text-align: center;
}

.pay-privilege-empty img {
    width: 6rem;
    height: 5rem;
    object-fit: contain;
    opacity: 0.55;
}

.pay-privilege-empty p {
    margin: 0.3rem 0 0;
    color: var(--pay-muted);
    font-size: 0.78rem;
}

@media (max-width: 720px) {
    .admin-privilege-summary,
    .admin-return-summary {
        grid-template-columns: 1fr;
    }

    .admin-form-action-row,
    .admin-card-balance-panel .panel-heading.split {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-form-action-row .primary-button,
    .admin-card-balance-readout {
        width: 100%;
    }

    .admin-card-balance-readout {
        text-align: left;
    }
}

@media (max-width: 410px) {
    .pay-privilege-hero {
        min-height: 14.5rem;
        padding-right: 6.5rem;
    }

    .pay-privilege-entry {
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    .pay-privilege-entry-value {
        grid-column: 2;
    }
}

@font-face {
    font-family: "Suisse Intl";
    src: url("/fonts/SuisseIntl-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Suisse Intl";
    src: url("/fonts/SuisseIntl-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
}

@font-face {
    font-family: "Suisse Intl";
    src: url("/fonts/SuisseIntl-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
}

@font-face {
    font-family: "Lyon Display";
    src: url("/fonts/LyonDisplay-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
}

@font-face {
    font-family: "Lyon Display";
    src: url("/fonts/LyonDisplay-LightItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 300 500;
    font-display: swap;
}

:root {
    --font-sans: "Suisse Intl", "SF Pro Display", "SF Pro Text", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
    --font-serif: "Lyon Display", "Iowan Old Style", "New York", Georgia, serif;
    --font-numeric: "Geist Mono", "SF Mono", "SFMono-Regular", Monaco, Consolas, monospace;
    --bg: #f5f6fa;
    --bg-elevated: #ffffff;
    --bg-elevated-strong: #ffffff;
    --text: #161616;
    --muted: #737373;
    --border: #e8e8ea;
    --accent: #141414;
    --accent-soft: rgba(20, 20, 20, 0.04);
    --success: #52c95f;
    --warning: #ff9f0a;
    --danger: #ff4d6d;
    --shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

[data-theme='dark'] {
    --bg: #090b0f;
    --bg-elevated: rgba(18, 20, 26, 0.82);
    --bg-elevated-strong: rgba(18, 20, 26, 0.94);
    --text: #f5f7fb;
    --muted: #a0a8b5;
    --border: rgba(255, 255, 255, 0.08);
    --accent: #f5f7fb;
    --accent-soft: rgba(255, 255, 255, 0.08);
    --success: #6ddb78;
    --warning: #ffb84d;
    --danger: #ff6b86;
    --shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
}

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #fafafa 0%, var(--bg) 9rem, var(--bg) 100%);
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.app-body {
    position: relative;
}

.ambient {
    display: none;
}

.ambient-one {
    top: 3rem;
    left: -6rem;
    width: 16rem;
    height: 16rem;
    background: rgba(124, 146, 255, 0.18);
}

.ambient-two {
    right: -5rem;
    bottom: 12rem;
    width: 18rem;
    height: 18rem;
    background: rgba(97, 202, 132, 0.15);
}

.panel-card {
    position: relative;
    z-index: 1;
    padding: 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.page-shell {
    position: relative;
    z-index: 1;
}

.page-stack {
    display: grid;
    gap: 1.25rem;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
}

.topbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.5rem 0.7rem;
}

.topbar-brand,
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
}

.brand-logo {
    height: 1.55rem;
    width: auto;
}

.brand-logo-dark {
    display: none;
}

[data-theme='dark'] .brand-logo-dark {
    display: block;
}

[data-theme='dark'] .brand-logo-light {
    display: none;
}

.topbar-nav {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.55rem;
    overflow-x: auto;
    padding: 0 1.5rem;
}

.topbar-nav-link {
    position: relative;
    padding: 0.1rem 0 0.9rem;
    color: var(--muted);
    font-size: 0.96rem;
    font-weight: 400;
    white-space: nowrap;
    transition: color 160ms ease;
}

.topbar-nav-link.is-active,
.topbar-nav-link:hover {
    color: var(--text);
}

.topbar-nav-link.is-active::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
}

.icon-button,
.toolbar-button,
.range-chip,
.secondary-button,
.primary-button,
.pill-button,
.menu-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.95rem;
    background: var(--bg-elevated-strong);
    color: var(--text);
    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.icon-button {
    position: relative;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.icon-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.icon-badge {
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    padding: 0.05rem 0.2rem;
    border-radius: 999px;
    background: var(--danger);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
}

.settings-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.32rem 0.45rem 0.32rem 0.55rem;
    background: #f3f3f4;
    color: var(--text);
}

.settings-trigger-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
}

.settings-trigger-gear svg,
.settings-trigger-chevron {
    width: 0.95rem;
    height: 0.95rem;
}

.primary-button {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 85%, transparent);
    color: color-mix(in srgb, var(--bg) 98%, white 2%);
}

[data-theme='dark'] .primary-button {
    color: #0b0d10;
}

.primary-button:hover,
.secondary-button:hover,
.icon-button:hover,
.pill-button:hover,
.menu-link:hover,
.toolbar-button:hover,
.range-chip:hover {
    transform: translateY(-1px);
}

.full-width {
    width: 100%;
}

.toolbar-wrap,
.toolbar-inline,
.hero-actions,
.toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.hero-card,
.split-panel {
    display: grid;
    gap: 1.5rem;
    padding: 1.6rem;
}

.hero-card {
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.82fr);
    min-height: 286px;
}

.hero-kicker,
.eyebrow {
    color: var(--muted);
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 1.1;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.12rem;
}

h3 {
    font-size: 1.05rem;
}

p {
    margin: 0;
    line-height: 1.6;
}

.muted {
    color: var(--muted);
}

.text-center {
    text-align: center;
}

.client-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.8rem 1.5rem 3rem;
}

.metric-grid {
    display: grid;
    gap: 1rem;
}

.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

.metric-value {
    margin-top: 0.4rem;
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 1;
}

.metric-inline {
    font-size: 1.25rem;
    font-weight: 600;
}

.side-panel {
    display: grid;
    gap: 1rem;
    align-content: start;
    background: #f7f7f8;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
}

.overview-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.12fr);
    gap: 1.8rem;
    align-items: stretch;
}

.stack-xs,
.stack-sm,
.stack-md {
    display: grid;
}

.stack-xs {
    gap: 0.5rem;
}

.stack-sm {
    gap: 0.75rem;
}

.stack-md {
    gap: 1.25rem;
}

.allocation-item,
.list-item,
.notification-item,
.menu-link,
.account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.allocation-item,
.list-item,
.notification-item {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.interactive-row:hover {
    background: color-mix(in srgb, var(--bg-elevated-strong) 96%, white 4%);
}

.color-stick {
    width: 4px;
    min-height: 2.75rem;
    border-radius: 999px;
}

.allocation-label {
    font-weight: 400;
}

.allocation-meta {
    margin-top: 0.2rem;
}

.section-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

.chart-panel {
    display: grid;
    gap: 0.75rem;
    min-height: 100%;
}

.chart-label {
    color: var(--muted);
    font-size: 0.85rem;
}

.chart-label-top {
    justify-self: start;
}

.area-chart {
    width: 100%;
    height: 340px;
    border-radius: 0;
    background:
        linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent-soft) 50%, transparent) 100%),
        repeating-linear-gradient(180deg, transparent, transparent 52px, color-mix(in srgb, var(--border) 90%, transparent) 53px);
}

.chart-footer {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.85rem;
}

.search-field input,
.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    padding: 0.85rem 0.95rem;
    outline: none;
}

.field {
    display: grid;
    gap: 0.45rem;
}

.field span {
    color: var(--muted);
    font-size: 0.9rem;
}

.form-grid {
    display: grid;
    gap: 1rem;
}

.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--muted);
}

.checkbox-field input {
    width: 1rem;
    height: 1rem;
}

.toolbar-wrap {
    padding: 0;
    margin-bottom: 1rem;
}

.range-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.range-chip {
    min-width: 2.1rem;
    padding: 0.25rem 0.35rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.85rem;
}

.range-chip.is-active {
    background: #efeff1;
    color: var(--text);
}

.sensitive-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 1.25rem;
    color: var(--muted);
}

.toggle-switch {
    width: 3.2rem;
    height: 1.9rem;
    padding: 0.2rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 24%, transparent);
    position: relative;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: white;
    transition: transform 160ms ease;
}

.toggle-switch.is-active::after {
    transform: translateX(1.3rem);
}

.table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--border);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

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

.data-table th {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.avatar-pill,
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, #7c9cff 18%, transparent);
    color: var(--text);
    font-size: 0.82rem;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tag.subtle {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
}

.table-merchant {
    display: flex;
    gap: 0.85rem;
}

.pagination-wrap {
    padding: 1.2rem 0 0;
}

.pagination-wrap nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.pagination-wrap a,
.pagination-wrap span {
    border-radius: 14px;
}

.account-groups {
    display: grid;
    gap: 1rem;
}

.account-balance {
    display: grid;
    text-align: right;
}

.flow-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.flow-month {
    display: grid;
    gap: 0.6rem;
    justify-items: center;
}

.flow-bars {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    min-height: 200px;
}

.flow-bar {
    width: 1.4rem;
    border-radius: 999px 999px 0 0;
}

.flow-bar.income {
    background: linear-gradient(180deg, rgba(91, 215, 81, 0.95), rgba(91, 215, 81, 0.3));
}

.flow-bar.expense {
    background: linear-gradient(180deg, rgba(255, 98, 127, 0.95), rgba(255, 98, 127, 0.28));
}

.flow-values {
    display: grid;
    gap: 0.2rem;
    text-align: center;
    font-size: 0.85rem;
}

.membership-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.75rem;
}

.membership-stat {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 600;
}

.auth-shell {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
    gap: 2rem;
    align-items: center;
}

.auth-brand {
    display: grid;
    gap: 1rem;
    padding-right: 1rem;
}

.brand-orb {
    width: 7rem;
    height: 7rem;
    padding: 0.6rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
}

.auth-title {
    max-width: 12ch;
}

.auth-subtitle {
    max-width: 34rem;
    color: var(--muted);
}

.auth-card {
    padding: 2rem;
}

.demo-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-card {
    padding: 1rem;
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-elevated-strong) 90%, transparent);
    border: 1px solid var(--border);
}

.error-banner,
.flash-banner {
    position: relative;
    z-index: 2;
    margin: 1rem auto 0;
    max-width: 1120px;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.flash-banner {
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
    background: color-mix(in srgb, var(--success) 10%, transparent);
}

.popover-panel {
    position: absolute;
    top: 3.55rem;
    right: 1.5rem;
    width: min(290px, calc(100vw - 2rem));
    padding: 1rem;
    display: none;
}

.popover-panel.is-open {
    display: block;
}

.menu-link {
    justify-content: flex-start;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.35rem 0;
}

.destructive-link {
    color: var(--danger);
}

.app-dialog {
    width: min(620px, calc(100vw - 2rem));
    border: 0;
    padding: 0;
    background: transparent;
}

.app-dialog::backdrop {
    background: rgba(8, 9, 12, 0.48);
    backdrop-filter: blur(12px);
}

.dialog-card {
    padding: 1.35rem;
    background: var(--bg-elevated-strong);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.dialog-header,
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dialog-header {
    margin-bottom: 1rem;
}

.dialog-footer {
    margin-top: 1.25rem;
}

.admin-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
    min-height: 100vh;
    padding: 1.25rem;
}

.admin-sidebar {
    position: sticky;
    top: 1.25rem;
    align-self: start;
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.admin-main {
    padding-bottom: 2rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    color: var(--muted);
}

.sidebar-link.is-active,
.sidebar-link:hover {
    background: var(--accent);
    color: var(--bg);
}

.sidebar-footer {
    display: grid;
    gap: 1rem;
    margin-top: auto;
}

.admin-brand {
    margin-bottom: 0.5rem;
}

.hide-sensitive .sensitive {
    filter: blur(8px);
    user-select: none;
}

.pill-button {
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
}

.notification-item {
    align-items: flex-start;
}

.list-item strong {
    display: block;
}

.meeting-meta {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
}

.search-field {
    flex: 1 1 240px;
}

.toolbar-inline {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.form-grid.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.split {
    align-items: start;
}

code {
    padding: 0.15rem 0.45rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
}

.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.overview-greeting {
    font-size: 1.05rem;
    font-weight: 400;
    color: #787878;
}

.expert-panel .primary-button {
    width: 100%;
}

.summary-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: center;
    padding: 1.5rem 1.7rem;
}

.summary-metric {
    min-width: 0;
}

.summary-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border);
}

.overview-panel {
    padding: 1.45rem 1.45rem 1.2rem;
}

.chart-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.toolbar-select {
    min-width: 9.75rem;
    justify-content: flex-start;
}

.chart-icon-button,
.filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
}

.chart-icon-button.is-active {
    color: var(--text);
}

.chart-icon-button svg,
.filter-button svg {
    width: 1rem;
    height: 1rem;
}

.overview-ledger {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

.allocation-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.6rem;
}

.compact-item {
    align-items: flex-start;
    justify-content: flex-start;
}

.compact-item .color-stick {
    min-height: 2.6rem;
}

.liability-section {
    display: grid;
    gap: 0.9rem;
}

.liability-heading {
    padding-top: 0.25rem;
}

.transactions-panel {
    padding: 1.45rem 1.2rem 1.2rem;
}

.transaction-toolbar {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 0.6rem;
}

.search-field {
    flex: 1 1 280px;
}

.search-field input {
    min-width: 0;
}

[data-theme='dark'] body {
    background: linear-gradient(180deg, #0f1114 0%, var(--bg) 9rem, var(--bg) 100%);
}

[data-theme='dark'] .topbar {
    background: rgba(10, 12, 16, 0.94);
}

[data-theme='dark'] .panel-card,
[data-theme='dark'] .search-field input,
[data-theme='dark'] .field input,
[data-theme='dark'] .field select,
[data-theme='dark'] .field textarea,
[data-theme='dark'] .toolbar-button,
[data-theme='dark'] .chart-icon-button,
[data-theme='dark'] .filter-button,
[data-theme='dark'] .secondary-button {
    background: #15181d;
}

[data-theme='dark'] .side-panel {
    background: #13161b;
}

[data-theme='dark'] .settings-trigger {
    background: #171a20;
}

@media (max-width: 1100px) {
    .auth-shell,
    .hero-card,
    .overview-grid,
    .admin-layout,
    .two-up,
    .three-up,
    .four-up {
        grid-template-columns: 1fr;
    }

    .topbar {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .topbar-nav {
        justify-content: start;
        padding-inline: 0;
        width: 100%;
    }

    .admin-sidebar {
        position: relative;
        top: 0;
    }
}

@media (max-width: 720px) {
    .client-shell,
    .auth-shell,
    .admin-layout {
        padding: 1rem;
    }

    .topbar {
        padding: 1rem;
    }

    .metric-value {
        font-size: 2rem;
    }

    .flow-chart {
        overflow-x: auto;
        grid-template-columns: repeat(6, minmax(70px, 1fr));
    }

    .demo-grid,
    .form-grid.two-up {
        grid-template-columns: 1fr;
    }

    .popover-panel {
        right: 1rem;
        left: 1rem;
        width: auto;
    }
}

@font-face {
    font-family: "Inter var";
    src: url("/compound-assets/fonts/Inter-roman.var.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --font-sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "Iowan Old Style", "New York", "Libre Baskerville", Georgia, serif;
    --bg: #f2f2f2;
    --bg-elevated: #ffffff;
    --bg-elevated-strong: #ffffff;
    --text: #1b1b1b;
    --muted: #7a7a7a;
    --border: #e8e6e3;
    --accent: #151515;
    --accent-soft: rgba(21, 21, 21, 0.04);
    --success: #5acc61;
    --warning: #ffad4c;
    --danger: #e34b59;
    --shadow: 0 10px 30px rgba(17, 17, 17, 0.035);
}

.client-body {
    --chrome-gutter: clamp(1rem, 2.8vw, 3.35rem);
    --overview-width: 1088px;
    --transactions-width: 1404px;
    --cp-gray-0: #ffffff;
    --cp-gray-1: #fcfcfc;
    --cp-gray-2: #f8f8f8;
    --cp-gray-3: #f2f2f2;
    --cp-gray-4: #ededed;
    --cp-gray-6: #e1e1e1;
    --cp-gray-9: #909090;
    --cp-gray-10: #6f6f6f;
    --cp-gray-12: #222222;
    background: #f2f2f2;
    color: var(--text);
    font-weight: 450;
}

.client-body .panel-card {
    border-radius: 10px;
    border-color: var(--cp-gray-3);
    box-shadow: none;
}

.client-body .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--cp-gray-3);
    backdrop-filter: saturate(180%) blur(12px);
}

.client-body .topbar-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem 0.75rem;
}

.client-body .brand-logo {
    display: none;
}

.client-body .brand-link {
    gap: 0;
    min-height: 1.875rem;
}

.client-body .topbar-nav {
    max-width: 1800px;
    margin: 0 auto;
    gap: 1.1rem;
    padding: 0 1.5rem;
}

.client-body .topbar-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0.5rem 0 0.45rem;
    font-size: 0.875rem;
    font-weight: 525;
    color: var(--cp-gray-9);
}

.client-body .topbar-nav-link.is-active::after {
    height: 2px;
    background: var(--cp-gray-12);
}

.client-body .settings-trigger {
    padding: 0.25rem 0.48rem 0.25rem 0.56rem;
    background: var(--cp-gray-2);
    border-color: var(--cp-gray-3);
}

.client-body .settings-trigger-gear {
    width: 1.5rem;
    height: 1.5rem;
}

.client-body .settings-trigger-gear svg,
.client-body .settings-trigger-chevron {
    width: 0.9rem;
    height: 0.9rem;
}

.client-body .icon-button {
    width: 2rem;
    height: 2rem;
}

.client-body .icon-badge {
    top: -0.18rem;
    right: -0.2rem;
    min-width: 1rem;
    min-height: 1rem;
    font-size: 0.64rem;
}

.client-body .flash-banner {
    width: min(var(--overview-width), calc(100vw - (var(--chrome-gutter) * 2)));
    max-width: none;
    margin-top: 0.95rem;
}

.client-body .client-shell {
    max-width: none;
    padding: 1.5rem 0 4rem;
}

.client-body .page-stack {
    gap: 0.95rem;
}

.client-body .hero-card {
    grid-template-columns: minmax(0, 1.8fr) 330px;
    min-height: 288px;
    padding: 1.95rem 1.9rem 1.7rem;
}

.client-body .hero-copy {
    padding-right: 1.2rem;
}

.client-body .overview-greeting {
    margin-top: 0;
    font-size: 0.97rem;
    line-height: 1;
    color: #7c7c7c;
}

.client-body .hero-actions {
    justify-content: flex-start;
    gap: 0.85rem;
}

.client-body .secondary-button,
.client-body .toolbar-button,
.client-body .chart-icon-button,
.client-body .filter-button {
    background: var(--cp-gray-0);
    border-color: var(--cp-gray-4);
    color: var(--cp-gray-12);
}

.client-body .secondary-button {
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 5.5px;
    font-size: 0.8375rem;
    font-weight: 570;
}

.client-body .search-field input {
    min-height: 2.875rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2.875rem;
    padding-right: 0.5rem;
    border-radius: 6px;
    border-color: var(--cp-gray-4);
    font-size: 13.7px;
}

.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
}

.button-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.client-body .primary-button {
    background: #fff;
    color: #151515;
    border-color: #e3e1de;
    font-weight: 600;
}

.client-body .expert-panel {
    align-content: start;
    gap: 0.85rem;
    padding: 1.4rem 1.5rem 1.25rem;
    background: #f7f6f5;
    border-radius: 10px;
    box-shadow: none;
}

.client-body .expert-panel h3 {
    font-size: 0.98rem;
    font-weight: 600;
}

.client-body .expert-panel p {
    font-size: 0.88rem;
    color: #737373;
}

.client-body .expert-panel .primary-button {
    margin-top: 0.15rem;
}

.client-body .summary-card {
    padding: 1.5rem 1.75rem;
}

.client-body .summary-metric .eyebrow {
    font-size: 0.92rem;
}

.client-body .summary-metric .metric-value {
    margin-top: 0.55rem;
    font-size: 2.45rem;
    font-weight: 500;
}

.client-body .overview-panel {
    padding: 1.5rem;
}

.client-body .overview-panel h2 {
    font-size: 1.06rem;
    font-weight: 500;
}

.client-body .overview-grid {
    grid-template-columns: 388px minmax(0, 1fr);
    gap: 1.75rem;
}

.client-body .overview-ledger {
    gap: 1.6rem;
}

.client-body .allocation-columns {
    gap: 0.95rem 1.8rem;
}

.client-body .allocation-item.compact-item {
    align-items: flex-start;
    gap: 0.7rem;
}

.client-body .allocation-label {
    font-size: 0.92rem;
    color: #6d6d6d;
}

.client-body .allocation-meta {
    margin-top: 0.18rem;
    font-size: 0.98rem;
    color: #171717;
}

.client-body .allocation-meta .muted {
    margin-left: 0.15rem;
}

.client-body .compact-item .color-stick {
    min-height: 2.65rem;
    width: 4px;
}

.client-body .liability-heading h3 {
    font-size: 0.98rem;
    font-weight: 500;
}

.client-body .chart-toolbar {
    gap: 0.45rem;
}

.client-body .toolbar-select {
    min-width: 10rem;
    justify-content: space-between;
    height: 2.25rem;
    padding: 0 0.92rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 450;
}

.client-body .toolbar-select svg {
    width: 0.95rem;
    height: 0.95rem;
}

.client-body .chart-icon-button,
.client-body .filter-button {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
}

.client-body .chart-panel {
    gap: 0.55rem;
    padding-top: 0.2rem;
}

.client-body .chart-label-top {
    justify-self: flex-start;
    margin-left: 0.35rem;
    font-size: 0.72rem;
}

.client-body .area-chart {
    height: 320px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(82, 201, 95, 0.02) 100%),
        repeating-linear-gradient(180deg, transparent, transparent 35px, rgba(228, 228, 228, 0.8) 36px);
}

.client-body .chart-footer {
    padding: 0 0.35rem;
    font-size: 0.76rem;
}

.notification-panel,
.menu-panel {
    top: 3.65rem;
    right: var(--chrome-gutter);
    width: min(282px, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    box-shadow:
        0 65px 26px rgba(0, 0, 0, 0.01),
        0 37px 22px rgba(0, 0, 0, 0.04),
        0 16px 16px rgba(0, 0, 0, 0.06),
        0 4px 9px rgba(0, 0, 0, 0.07);
}

.menu-panel {
    width: min(220px, calc(100vw - 2rem));
}

.panel-heading-tight {
    margin-bottom: 0.65rem;
}

.client-body .notification-item {
    align-items: flex-start;
    gap: 0.8rem;
}

.client-body .menu-link {
    width: 100%;
    justify-content: space-between;
    padding: 0.22rem 0;
    font-size: 0.98rem;
    color: #222;
}

.menu-line {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
}

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: #303030;
}

.menu-icon svg {
    width: 1rem;
    height: 1rem;
}

.menu-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.2rem;
    border-radius: 4px;
    background: #f3f3f3;
    color: #929292;
    font-size: 0.72rem;
}

.client-body .app-dialog {
    width: min(602px, calc(100vw - 2rem));
}

.account-drilldown-dialog {
    width: min(760px, calc(100vw - 2rem));
}

.client-body .app-dialog::backdrop {
    background: rgba(11, 12, 14, 0.28);
    backdrop-filter: blur(6px);
}

.client-body .dialog-card {
    padding: 1.15rem;
    border-radius: 16px;
}

.client-body .dialog-header {
    align-items: flex-start;
    margin-bottom: 0.9rem;
}

.dialog-close-button {
    width: auto;
    min-width: 2rem;
    padding: 0 0.55rem;
    border-radius: 7px;
    border: 1px solid #ece9e5;
    background: #f5f5f5;
    color: #868686;
    font-size: 0.8rem;
}

.account-dialog-card {
    padding: 1rem 1rem 1.15rem;
    min-height: 38rem;
}

.account-flow-step {
    display: none;
}

.account-flow-step.is-active {
    display: grid;
    gap: 1rem;
}

.account-dialog-header {
    margin-bottom: 0;
}

.dialog-heading-block {
    display: grid;
    gap: 0.9rem;
}

.dialog-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dialog-crumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
    padding: 0.35rem 0.75rem;
    border: 0;
    border-radius: 0.55rem;
    background: #f5f5f5;
    color: #6a6a6a;
    font-size: 0.86rem;
    font-weight: 525;
}

.dialog-crumb.is-active {
    background: #f4f4f4;
    color: #545454;
}

.dialog-crumb-separator {
    color: #bababa;
    font-size: 1.15rem;
    line-height: 1;
}

.deposit-modal-intro {
    margin-top: -0.15rem;
}

.deposit-modal-intro p {
    margin: 0;
    color: #8a8a8a;
    font-size: 0.97rem;
    line-height: 1.55;
}

.popular-row {
    display: grid;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.popular-label {
    font-size: 0.92rem;
    color: #5f5f5f;
}

.popular-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.popular-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: #565656;
    font-size: 0.96rem;
}

.popular-chip.is-active {
    color: #1c1c1c;
}

.popular-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--chip-color);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
}

.account-option-list {
    display: grid;
    gap: 0.55rem;
}

.account-option-list--deposit {
    gap: 0.75rem;
}

.account-option-button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    width: 100%;
    padding: 0.7rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    text-align: left;
}

.account-option-button:hover {
    border-color: #efede9;
    background: #f7f7f7;
}

.account-option-button.is-active {
    border-color: #ece9e5;
    background: #f7f7f7;
}

.account-option-button.is-active:hover {
    border-color: #e5e1dc;
    background: #f3f3f3;
}

.account-option-button.is-disabled {
    border-color: #f0efed;
    background: #fbfbfb;
    cursor: default;
}

.account-option-button.is-disabled:hover {
    border-color: #f0efed;
    background: #fbfbfb;
}

.account-option-button.is-disabled .account-option-icon {
    background: color-mix(in srgb, var(--option-color) 22%, #d9d9d9 78%);
    color: rgba(255, 255, 255, 0.92);
}

.account-option-button.is-disabled .account-option-copy strong,
.account-option-button.is-disabled .account-option-copy span,
.account-option-button.is-disabled .account-option-key {
    color: #b0b0b0;
}

.account-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--option-color);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
}

.account-option-copy {
    display: grid;
    gap: 0.12rem;
}

.account-option-copy strong {
    font-size: 0.95rem;
    font-weight: 600;
}

.account-option-copy span {
    color: #666;
    font-size: 0.88rem;
}

.account-option-key {
    color: #7b7b7b;
    font-size: 0.83rem;
}

.wallet-option-list {
    display: grid;
    gap: 0.8rem;
}

.wallet-option-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border: 1px solid #ece9e5;
    border-radius: 12px;
    background: #fbfbfb;
}

.wallet-option-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.wallet-token-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.wallet-token-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wallet-option-copy {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.wallet-option-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wallet-option-head strong {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
}

.wallet-option-head span {
    color: #8a8a8a;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wallet-option-copy code {
    display: block;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    padding: 0.62rem 0.72rem;
    background: #f1f2f4;
    color: #414141;
    font-size: 0.81rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    min-height: 2.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid #e7e4de;
    border-radius: 999px;
    background: #fff;
    color: #2a2a2a;
    font-size: 0.86rem;
    font-weight: 600;
}

.wallet-copy-button.is-copied {
    border-color: rgba(24, 167, 110, 0.16);
    background: rgba(24, 167, 110, 0.08);
    color: #159260;
}

.dialog-note {
    margin-top: 0.8rem;
    color: #828282;
    font-size: 0.83rem;
}

.compact-dialog-card {
    max-width: 560px;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.profile-item {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: #f7f6f4;
    border: 1px solid #ece9e5;
}

.profile-item-label {
    color: #7b7b7b;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-item-value {
    font-size: 0.96rem;
    color: #202020;
}

.client-body .transactions-panel {
    max-width: 790px;
    margin: 0 auto;
    padding: 1rem 1.2rem 1.15rem;
}

.client-body .toolbar-wrap {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.client-body .transaction-toolbar {
    flex: 1 1 320px;
    gap: 0.6rem;
}

.client-body .search-field {
    position: relative;
    flex: 1 1 280px;
}

.client-body .search-field::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.95rem;
    width: 0.95rem;
    height: 0.95rem;
    border: 1.7px solid #9a9a9a;
    border-radius: 999px;
    transform: translateY(-58%);
}

.client-body .search-field::after {
    content: "";
    position: absolute;
    top: 58%;
    left: 1.68rem;
    width: 0.42rem;
    height: 1.7px;
    background: #9a9a9a;
    transform: rotate(45deg);
    transform-origin: left center;
}

.client-body .search-field input {
    padding: 0.82rem 0.95rem 0.82rem 2.55rem;
}

.client-body .range-group {
    gap: 0.35rem;
}

.client-body .range-chip {
    padding: 0.26rem 0.42rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

.client-body .range-chip.is-active {
    background: #efefef;
}

.client-body .sensitive-toggle-row {
    padding-bottom: 1rem;
    font-size: 0.88rem;
}

.client-body .toggle-switch {
    width: 2.15rem;
    height: 1.2rem;
    padding: 0;
    background: #dddddf;
}

.client-body .toggle-switch::after {
    top: 0.1rem;
    left: 0.12rem;
    width: 1rem;
    height: 1rem;
}

.client-body .toggle-switch.is-active::after {
    transform: translateX(0.9rem);
}

.metric-card {
    padding: 0 0 0.6rem;
}

.metric-card .metric-value {
    font-size: 2rem;
}

.client-body .table-wrap {
    max-height: 985px;
    overflow: auto;
    border-top: 1px solid #ededed;
}

.client-body .data-table th,
.client-body .data-table td {
    padding: 0.92rem 0.5rem;
}

.client-body .data-table th {
    font-size: 0.8rem;
    color: #8c8c8c;
}

.sort-indicator {
    color: #b6b6b6;
    font-size: 0.72rem;
}

.sort-indicator.is-active {
    color: #6dd07b;
}

.client-body .avatar-pill {
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    font-size: 0.7rem;
    background: #f1eaff;
    color: #7866d9;
}

.table-merchant-copy {
    display: grid;
    gap: 0.05rem;
}

.table-merchant-copy strong {
    font-size: 0.94rem;
    font-weight: 500;
}

.client-body .tag {
    min-width: 0;
    height: auto;
    padding: 0.2rem 0.5rem;
    border: 1px solid transparent;
    font-size: 0.76rem;
    font-weight: 500;
}

.account-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.bank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #e8f1ff;
    color: #2c7df0;
    font-size: 0.68rem;
    font-weight: 700;
}

.amount-positive {
    color: #39b772;
    font-weight: 600;
}

.amount-negative {
    color: #555;
}

.client-body .pagination-wrap {
    padding-top: 0.8rem;
}

.client-body .pagination-wrap nav {
    gap: 0.35rem;
}

.client-body .pagination-wrap a,
.client-body .pagination-wrap span {
    min-width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #7e7e7e;
}

@media (max-width: 1100px) {
    .notification-panel,
    .menu-panel {
        right: 1rem;
    }

    .client-body .hero-card,
    .client-body .overview-grid {
        grid-template-columns: 1fr;
    }

    .client-body .transactions-panel {
        max-width: none;
    }
}

@media (max-width: 720px) {
    .client-body .client-shell {
        padding: 1.2rem 1rem 2.5rem;
    }

    .client-body .topbar-inner,
    .client-body .topbar-nav {
        padding-inline: 1rem;
    }

    .client-body .hero-card,
    .client-body .summary-card,
    .client-body .overview-panel,
    .client-body .transactions-panel {
        padding: 1rem;
    }

    .client-body .summary-card {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .client-body .summary-divider {
        width: 100%;
        height: 1px;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .client-body .toolbar-wrap {
        align-items: stretch;
    }

    .client-body .range-group {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }
}

.client-body .topbar-inner,
.client-body .topbar-nav,
.client-body .flash-banner,
.client-body .client-shell {
    max-width: none;
}

.client-body .topbar-nav {
    gap: 1rem;
}

.client-body .topbar-nav-link {
    font-size: 0.875rem;
}

.client-body .overview-panel {
    padding-bottom: 1.15rem;
}

.client-body .chart-toolbar {
    gap: 0.35rem;
}

.client-body .chart-surface {
    position: relative;
}

.client-body .chart-tooltip {
    position: absolute;
    top: 0.65rem;
    right: 4.25rem;
    z-index: 2;
    display: grid;
    gap: 0.1rem;
    min-width: 116px;
    padding: 0.65rem 0.7rem;
    border: 1px solid #e7e4df;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 30px rgba(15, 15, 15, 0.08);
    transform: translateX(50%);
    pointer-events: none;
}

.client-body .chart-tooltip strong {
    font-size: 0.84rem;
    font-weight: 600;
}

.client-body .chart-tooltip span {
    font-size: 0.92rem;
}

.client-body .chart-points {
    position: absolute;
    inset: 0;
}

.client-body .chart-point {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #5acc61;
    box-shadow: 0 0 0 1px rgba(90, 204, 97, 0.28);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
}

.client-body .chart-surface:hover .chart-point,
.client-body .chart-point:focus-visible {
    opacity: 1;
}

.client-body .chart-point:focus-visible {
    transform: translate(-50%, -50%) scale(1.06);
}

.client-body .overview-stack {
    width: min(var(--overview-width), calc(100vw - (var(--chrome-gutter) * 2)));
    margin: 0 auto;
}

.client-body .transactions-stack {
    width: min(var(--transactions-width), calc(100vw - (var(--chrome-gutter) * 2)));
    margin: 0 auto;
}

.transactions-layout {
    display: grid;
    grid-template-columns: minmax(930px, 2fr) minmax(350px, 1fr);
    gap: 1rem;
    align-items: start;
}

.client-body .transactions-panel {
    max-width: none;
    margin: 0;
    min-width: 930px;
    padding: 1.125rem 2rem 1.125rem;
    border-radius: 10px;
}

.client-body .toolbar-wrap {
    gap: 0.7rem;
}

.client-body .transaction-toolbar {
    gap: 0.75rem;
}

.client-body .range-group {
    align-items: center;
    gap: 0.125rem;
}

.client-body .range-chip {
    padding: 0.1875rem 0.3125rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--cp-gray-9);
}

.client-body .range-chip.is-active {
    background: var(--cp-gray-4);
    color: var(--cp-gray-12);
    font-weight: 525;
}

.client-body .inline-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.8rem;
}

.inline-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--cp-gray-4);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    background: var(--cp-gray-1);
    color: var(--cp-gray-10);
    font-size: 0.8125rem;
}

.inline-filter-pill strong {
    color: #222;
    font-weight: 500;
}

.inline-filter-pill svg {
    width: 0.85rem;
    height: 0.85rem;
}

.client-body .sensitive-toggle-row {
    padding-bottom: 0.9rem;
    color: var(--cp-gray-10);
    font-size: 0.9375rem;
}

.client-body .metric-grid.four-up {
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

.client-body .metric-card {
    padding-bottom: 0;
}

.client-body .metric-card .metric-value {
    font-size: 2rem;
    line-height: 1.35;
    letter-spacing: -0.021em;
}

.client-body .table-wrap {
    max-height: 600px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.client-body .table-wrap::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.client-body .transaction-row {
    cursor: pointer;
    transition: background 160ms ease;
}

.client-body .transaction-row:hover {
    background: var(--cp-gray-2);
}

.client-body .transaction-row.is-selected {
    background: var(--cp-gray-2);
}

.client-body .transaction-row:focus-visible {
    outline: 2px solid rgba(44, 125, 240, 0.25);
    outline-offset: -2px;
}

.client-body .table-merchant-copy {
    gap: 0.02rem;
}

.client-body .table-merchant-copy strong {
    font-size: 0.92rem;
}

.transactions-empty {
    display: grid;
    gap: 0.35rem;
    padding: 2.4rem 1rem;
    text-align: center;
}

.transaction-detail-panel {
    min-width: 350px;
    min-height: 600px;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    position: sticky;
    top: 11.5625rem;
}

.transaction-empty-state {
    min-height: 448px;
    display: grid;
    place-content: center;
    gap: 0.45rem;
    padding: 2rem;
    text-align: center;
}

.transaction-empty-state strong {
    font-size: 1rem;
    font-weight: 600;
}

.transaction-empty-state p {
    max-width: 16rem;
    margin: 0 auto;
    color: #8a8a8a;
}

.transaction-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.35rem 1.3rem 1rem;
    border-bottom: 1px solid #efede9;
}

.transaction-detail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: #efe9ff;
    color: #765ad8;
    font-weight: 700;
}

.transaction-detail-copy {
    display: grid;
    gap: 0.2rem;
}

.transaction-detail-copy h2 {
    font-size: 1.2rem;
    font-weight: 600;
}

.transaction-detail-amount {
    font-size: 1.65rem;
    font-weight: 600;
}

.detail-tag-row {
    padding: 0 1.3rem 1rem;
}

.detail-status-tag {
    background: #f4f6f8;
    border-color: #e4e7ec;
    color: #647082;
}

.transaction-detail-grid {
    display: grid;
    gap: 0.95rem;
    padding: 0 1.3rem 1.25rem;
}

.detail-item {
    display: grid;
    gap: 0.2rem;
}

.detail-label {
    color: #8c8c8c;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detail-value {
    color: #1d1d1d;
    font-size: 0.95rem;
}

.detail-account {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.transaction-note-card {
    margin: 0 1.3rem 1.3rem;
    padding: 0.95rem 1rem;
    border: 1px solid #ece8e3;
    border-radius: 12px;
    background: #f8f6f3;
}

.transaction-note-card p {
    margin-top: 0.35rem;
    color: #4b4b4b;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .transactions-layout {
        grid-template-columns: 1fr;
    }

    .transaction-detail-panel {
        min-height: 0;
    }

    .transaction-empty-state {
        min-height: 220px;
    }
}

@media (max-width: 720px) {
    .client-body .topbar-nav {
        gap: 0.8rem;
    }

    .client-body .notification-panel,
    .client-body .menu-panel {
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .client-body .overview-stack,
    .client-body .transactions-stack,
    .client-body .flash-banner {
        width: calc(100vw - 2rem);
    }

    .client-body .chart-tooltip {
        right: 1rem;
        transform: none;
    }

    .client-body .inline-filter-row {
        display: none;
    }
}

.client-body .topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    isolation: isolate;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
}

.client-body .topbar-row {
    width: 100%;
    background: var(--cp-gray-0);
    border-bottom: 1px solid var(--cp-gray-3);
}

.client-body .topbar-row-primary .topbar-inner {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
}

.client-body .topbar-brand {
    margin-right: auto;
}

.client-body .brand-link {
    display: inline-flex;
    align-items: center;
    color: var(--cp-gray-12);
}

.client-body .brand-wordmark {
    display: none;
}

.client-body .brand-wordmark-svg {
    display: block;
    width: 104px;
    max-width: 153px;
    max-height: 30px;
    height: auto;
}

.client-body .topbar-actions {
    margin-left: auto;
    gap: 0.75rem;
}

.client-body .topbar .icon-button {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    color: var(--cp-gray-9);
}

.client-body .topbar .icon-button:hover,
.client-body .topbar .settings-trigger:hover {
    background: var(--cp-gray-3);
    transform: none;
}

.client-body .topbar .icon-button svg {
    width: 24px;
    height: 24px;
}

.client-body .icon-badge {
    top: -0.12rem;
    right: -0.35rem;
    min-width: 1rem;
    min-height: 1rem;
    padding: 0 0.18rem;
    font-size: 0.6875rem;
    font-weight: 525;
}

.client-body .settings-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cp-gray-9);
}

.client-body .settings-trigger-gear {
    width: 28px;
    height: 28px;
}

.client-body .settings-trigger-gear svg {
    width: 28px;
    height: 28px;
}

.client-body .settings-trigger-chevron {
    width: 12px;
    height: 12px;
}

.client-body .topbar-row-secondary .topbar-nav {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.client-body .topbar-nav-list {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    overflow-x: auto;
}

.client-body .topbar-nav-item {
    display: grid;
    place-items: center;
}

.client-body .topbar-nav-link {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: fit-content;
    min-height: fit-content;
    padding: 0.5rem 0 0.375rem;
    border-bottom: 2px solid transparent;
    color: var(--cp-gray-10);
    font-size: 0.8125rem;
    font-weight: 525;
    line-height: 1;
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.client-body .topbar-nav-label {
    box-sizing: border-box;
    padding: 0.375rem;
}

.client-body .topbar-nav-link:hover,
.client-body .topbar-nav-link:focus,
.client-body .topbar-nav-link.is-active {
    color: var(--cp-gray-12);
    border-bottom-color: var(--cp-gray-12);
}

.client-body .topbar-nav-link.is-active::after {
    content: none;
}

.client-body .notification-panel,
.client-body .menu-panel {
    top: 3.2rem;
    right: max(calc((100vw - 1800px) / 2 + 1.5rem), 1.5rem);
}

@media (max-width: 720px) {
    .client-body .topbar-row-primary .topbar-inner,
    .client-body .topbar-row-secondary .topbar-nav {
        padding-inline: 1rem;
    }

    .client-body .topbar-nav-list {
        gap: 0.75rem;
    }

    .client-body .notification-panel,
    .client-body .menu-panel {
        right: 1rem;
        left: 1rem;
        width: auto;
    }
}

/* Final client theme cleanup */
.client-body {
    --client-bg: #f5f6f8;
    --client-surface: #ffffff;
    --client-surface-soft: #f8f8f8;
    --client-surface-muted: #f4f4f4;
    --client-border: #ececec;
    --client-border-strong: #e2e2e2;
    --client-text: #222222;
    --client-text-muted: #6f6f6f;
    --client-text-soft: #909090;
    --client-hover: #f4f4f4;
    --client-header: rgba(255, 255, 255, 0.96);
    background: var(--client-bg);
    color: var(--client-text);
}

.client-body .panel-card,
.client-body .dialog-card,
.client-body .search-field input,
.client-body .field input,
.client-body .field select,
.client-body .field textarea,
.client-body .secondary-button,
.client-body .primary-button,
.client-body .toolbar-button,
.client-body .chart-icon-button,
.client-body .filter-button,
.client-body .profile-item,
.client-body .popover-panel,
.client-body .transaction-note-card,
.client-body .inline-filter-pill {
    background: var(--client-surface);
    border-color: var(--client-border);
    color: var(--client-text);
}

.client-body .topbar-row {
    background: var(--client-header);
    border-bottom-color: var(--client-border);
    backdrop-filter: saturate(180%) blur(12px);
}

.client-body .topbar .icon-button,
.client-body .settings-trigger,
.client-body .topbar-nav-link,
.client-body .eyebrow,
.client-body .muted,
.client-body .sort-indicator,
.client-body .allocation-label,
.client-body .chart-footer,
.client-body .detail-label,
.client-body .transaction-empty-state p {
    color: var(--client-text-soft);
}

.client-body .topbar-nav-link:hover,
.client-body .topbar-nav-link:focus,
.client-body .topbar-nav-link.is-active,
.client-body .detail-value,
.client-body .allocation-meta,
.client-body .summary-metric .metric-value,
.client-body .transaction-empty-state strong,
.client-body .inline-filter-pill strong {
    color: var(--client-text);
}

.client-body .topbar .icon-button:hover,
.client-body .settings-trigger:hover,
.client-body .menu-link:hover,
.client-body .transaction-row:hover,
.client-body .transaction-row.is-selected,
.client-body .range-chip.is-active,
.client-body .chart-tooltip,
.client-body .transaction-note-card,
.client-body .inline-filter-pill {
    background: var(--client-surface-soft);
}

.client-body .expert-panel,
.client-body .toggle-switch,
.client-body .dialog-close-button {
    background: var(--client-surface-muted);
    border-color: var(--client-border);
}

.client-body .menu-link,
.client-body .profile-item-value,
.client-body .transaction-detail-copy h2,
.client-body .brand-wordmark-svg,
.client-body .brand-link {
    color: var(--client-text);
}

.client-body .area-chart {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(82, 201, 95, 0.025) 100%),
        repeating-linear-gradient(180deg, transparent, transparent 35px, var(--client-border) 36px);
}

.client-body .chart-tooltip,
.client-body .popover-panel {
    box-shadow: none;
}

.client-body .toggle-switch::after {
    background: var(--client-surface);
}

html[data-theme='dark'],
[data-theme='dark'] body {
    background: #101317;
}

[data-theme='dark'] .client-body {
    --client-bg: #101317;
    --client-surface: #171b21;
    --client-surface-soft: #1d222a;
    --client-surface-muted: #20262f;
    --client-border: #2a313b;
    --client-border-strong: #36404d;
    --client-text: #f4f6f8;
    --client-text-muted: #b1b8c2;
    --client-text-soft: #8d97a5;
    --client-hover: #232a34;
    --client-header: rgba(16, 19, 23, 0.94);
    --cp-gray-0: #171b21;
    --cp-gray-1: #1d222a;
    --cp-gray-2: #232a34;
    --cp-gray-3: #2a313b;
    --cp-gray-4: #36404d;
    --cp-gray-6: #46515f;
    --cp-gray-9: #8d97a5;
    --cp-gray-10: #b1b8c2;
    --cp-gray-12: #f4f6f8;
    background: var(--client-bg);
    color: var(--client-text);
}

[data-theme='dark'] .client-body .panel-card,
[data-theme='dark'] .client-body .dialog-card,
[data-theme='dark'] .client-body .search-field input,
[data-theme='dark'] .client-body .field input,
[data-theme='dark'] .client-body .field select,
[data-theme='dark'] .client-body .field textarea,
[data-theme='dark'] .client-body .secondary-button,
[data-theme='dark'] .client-body .primary-button,
[data-theme='dark'] .client-body .toolbar-button,
[data-theme='dark'] .client-body .chart-icon-button,
[data-theme='dark'] .client-body .filter-button,
[data-theme='dark'] .client-body .popover-panel,
[data-theme='dark'] .client-body .transaction-note-card,
[data-theme='dark'] .client-body .inline-filter-pill {
    box-shadow: none;
}

[data-theme='dark'] .client-body .primary-button {
    color: var(--client-text);
}

[data-theme='dark'] .client-body .area-chart {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(90, 204, 97, 0.05) 100%),
        repeating-linear-gradient(180deg, transparent, transparent 35px, rgba(255, 255, 255, 0.075) 36px);
}

[data-theme='dark'] .client-body .chart-tooltip,
[data-theme='dark'] .client-body .transaction-note-card,
[data-theme='dark'] .client-body .inline-filter-pill,
[data-theme='dark'] .client-body .transaction-row.is-selected,
[data-theme='dark'] .client-body .transaction-row:hover,
[data-theme='dark'] .client-body .menu-link:hover,
[data-theme='dark'] .client-body .topbar .icon-button:hover,
[data-theme='dark'] .client-body .settings-trigger:hover {
    background: var(--client-surface-soft);
}

[data-theme='dark'] .client-body .expert-panel,
[data-theme='dark'] .client-body .toggle-switch,
[data-theme='dark'] .client-body .dialog-close-button,
[data-theme='dark'] .client-body .range-chip.is-active {
    background: var(--client-surface-muted);
}

[data-theme='dark'] .client-body .transaction-detail-header,
[data-theme='dark'] .client-body .summary-divider,
[data-theme='dark'] .client-body .section-divider,
[data-theme='dark'] .client-body .data-table th,
[data-theme='dark'] .client-body .data-table td {
    border-color: var(--client-border);
}

.app-body .topbar-row,
.app-body .flash-banner,
.app-body .panel-card,
.app-body .dialog-card,
.app-body .popover-panel,
.app-body .auth-card,
.app-body .demo-card {
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease;
}

.client-body .notification-item p,
.client-body .account-option-copy span,
.client-body .account-option-key,
.client-body .dialog-note,
.client-body .deposit-modal-intro p,
.client-body .popular-label,
.client-body .popular-chip,
.client-body .profile-item-label,
.client-body .menu-shortcut,
.client-body .pagination-wrap a,
.client-body .pagination-wrap span {
    color: var(--client-text-soft);
}

.client-body .menu-shortcut,
.client-body .dialog-close-button,
.client-body .profile-item,
.client-body .pagination-wrap a,
.client-body .pagination-wrap span {
    background: var(--client-surface-soft);
    border-color: var(--client-border);
}

.client-body .account-option-button:hover,
.client-body .account-option-button.is-active,
.client-body .popular-chip:hover,
.client-body .profile-item,
.client-body .table-wrap {
    border-color: var(--client-border);
}

.client-body .account-option-button:hover,
.client-body .account-option-button.is-active,
.client-body .popular-chip:hover,
.client-body .pagination-wrap .active span,
.client-body .pagination-wrap a:hover {
    background: var(--client-surface-soft);
}

.client-body .account-option-copy strong,
.client-body .wallet-option-head strong,
.client-body .popular-chip.is-active,
.client-body .profile-item-value,
.client-body .notification-item strong,
.client-body .pagination-wrap .active span {
    color: var(--client-text);
}

.client-body .data-table th {
    color: var(--client-text-soft);
}

.client-body .data-table td,
.client-body .transaction-detail-header,
.client-body .popular-row,
.client-body .account-option-button:hover,
.client-body .account-option-button.is-active,
.client-body .account-option-button.is-disabled,
.client-body .wallet-option-card,
.client-body .table-wrap {
    border-color: var(--client-border);
}

.client-body .dialog-crumb,
.client-body .wallet-option-copy code,
.client-body .wallet-copy-button {
    border-color: var(--client-border);
}

.client-body .dialog-crumb,
.client-body .wallet-option-copy code,
.client-body .wallet-option-card,
.client-body .account-option-button.is-active,
.client-body .account-option-button.is-disabled,
.client-body .wallet-copy-button {
    background: var(--client-surface-soft);
}

.client-body .dialog-crumb,
.client-body .wallet-option-head span {
    color: var(--client-text-soft);
}

.client-body .amount-negative {
    color: var(--client-text-muted);
}

.client-body .bank-badge {
    background: color-mix(in srgb, #2c7df0 14%, var(--client-surface));
    color: #2c7df0;
}

.client-body .avatar-pill {
    background: color-mix(in srgb, #7866d9 12%, var(--client-surface));
    color: #7866d9;
}

[data-theme='dark'] .client-body .app-dialog::backdrop {
    background: rgba(6, 8, 12, 0.72);
    backdrop-filter: blur(16px);
}

[data-theme='dark'] .client-body .dialog-close-button,
[data-theme='dark'] .client-body .menu-shortcut,
[data-theme='dark'] .client-body .profile-item,
[data-theme='dark'] .client-body .pagination-wrap a,
[data-theme='dark'] .client-body .pagination-wrap span,
[data-theme='dark'] .client-body .account-option-button:hover,
[data-theme='dark'] .client-body .account-option-button.is-active,
[data-theme='dark'] .client-body .account-option-button.is-disabled,
[data-theme='dark'] .client-body .dialog-crumb,
[data-theme='dark'] .client-body .wallet-option-card,
[data-theme='dark'] .client-body .wallet-option-copy code,
[data-theme='dark'] .client-body .wallet-copy-button {
    background: var(--client-surface-soft);
}

[data-theme='dark'] .client-body .wallet-copy-button.is-copied {
    background: rgba(52, 199, 137, 0.14);
    color: #67dba5;
}

[data-theme='dark'] .client-body .account-option-button.is-disabled .account-option-copy strong,
[data-theme='dark'] .client-body .account-option-button.is-disabled .account-option-copy span,
[data-theme='dark'] .client-body .account-option-button.is-disabled .account-option-key {
    color: rgba(255, 255, 255, 0.34);
}

[data-theme='dark'] .client-body .account-option-button.is-disabled .account-option-icon {
    background: color-mix(in srgb, var(--option-color) 20%, #4a4f57 80%);
}

[data-theme='dark'] .client-body .bank-badge {
    background: rgba(44, 125, 240, 0.2);
    color: #87b4ff;
}

[data-theme='dark'] .client-body .avatar-pill {
    background: rgba(120, 102, 217, 0.24);
    color: #c4b6ff;
}

[data-theme='dark'] .client-body .amount-negative {
    color: #c8ced8;
}

[data-theme='dark'] .client-body .chart-point {
    border-color: var(--client-surface);
    box-shadow: 0 0 0 1px rgba(90, 204, 97, 0.32);
}

/* Skeleton placeholders */
:root {
    --skeleton-base-light: #e8ebef;
    --skeleton-glow-light: #f8fafc;
    --skeleton-base-dark: #212833;
    --skeleton-glow-dark: #303847;
}

.app-placeholder {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

html.is-preloading .app-placeholder {
    opacity: 1;
    visibility: visible;
}

html.is-preloading .app-body > :not(.app-placeholder) {
    visibility: hidden;
}

.placeholder-page-shell,
.placeholder-stack,
.placeholder-transactions-shell,
.placeholder-grid-two,
.placeholder-actions,
.placeholder-auth-shell,
.placeholder-auth-brand,
.placeholder-admin-shell,
.placeholder-admin-main {
    display: grid;
    gap: 1rem;
}

.placeholder-action-row,
.placeholder-chip-row,
.placeholder-chart-footer,
.placeholder-overview-main-head,
.placeholder-table-row,
.placeholder-table-main,
.placeholder-detail-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.placeholder-shimmer,
.placeholder-line,
.placeholder-card,
.placeholder-circle,
.placeholder-pill,
.placeholder-tab,
.placeholder-field,
.placeholder-button,
.placeholder-auth-orb,
.placeholder-admin-sidebar {
    position: relative;
    overflow: hidden;
    background: var(--skeleton-base, var(--skeleton-base-light));
}

.placeholder-line::after,
.placeholder-card::after,
.placeholder-circle::after,
.placeholder-pill::after,
.placeholder-tab::after,
.placeholder-field::after,
.placeholder-button::after,
.placeholder-auth-orb::after,
.placeholder-admin-sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--skeleton-glow, var(--skeleton-glow-light)) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: placeholder-shimmer 1.6s ease-in-out infinite;
}

@keyframes placeholder-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.app-placeholder-client {
    --skeleton-base: var(--skeleton-base-light);
    --skeleton-glow: var(--skeleton-glow-light);
    background: #f5f6f8;
}

.app-placeholder-auth,
.app-placeholder-admin {
    --skeleton-base: var(--skeleton-base-light);
    --skeleton-glow: var(--skeleton-glow-light);
}

.placeholder-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #ececec;
}

.placeholder-row-nav {
    justify-content: flex-start;
    gap: 1rem;
    padding-top: 0;
    padding-bottom: 0;
}

.placeholder-brand {
    width: 104px;
    height: 30px;
    border-radius: 6px;
}

.placeholder-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.75rem;
}

.placeholder-circle {
    width: 24px;
    height: 24px;
    border-radius: 999px;
}

.placeholder-pill {
    height: 36px;
    border-radius: 999px;
}

.placeholder-pill-short {
    width: 62px;
}

.placeholder-tab {
    width: 88px;
    height: 34px;
    border-radius: 0;
    background: transparent;
}

.placeholder-tab::after {
    inset: auto 0 0;
    height: 2px;
    background: var(--skeleton-base, var(--skeleton-base-light));
    transform: none;
    animation: none;
}

.placeholder-tab.is-active::after {
    background: #2c3138;
}

.placeholder-page-shell {
    width: min(1404px, calc(100vw - 6rem));
    margin: 1.5rem auto 0;
}

.placeholder-screen-shell {
    margin: 1.5rem auto 0;
}

.app-placeholder .panel-card,
.app-placeholder .side-panel,
.app-placeholder .transaction-detail-panel {
    background: rgba(255, 255, 255, 0.96);
    border-color: #ececec;
    box-shadow: none;
}

.app-placeholder .summary-divider,
.app-placeholder .table-wrap,
.app-placeholder .transaction-detail-header {
    border-color: #ececec;
}

.app-placeholder .hero-actions,
.app-placeholder .chart-toolbar {
    justify-content: flex-start;
}

.app-placeholder .transaction-detail-panel {
    top: 11.5625rem;
}

.placeholder-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.25rem;
}

.placeholder-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.placeholder-card {
    border-radius: 12px;
}

.placeholder-card-lg {
    min-height: 220px;
}

.placeholder-card-sm {
    min-height: 132px;
}

.placeholder-card-xl {
    min-height: 420px;
}

.placeholder-card-hero {
    min-height: 288px;
}

.placeholder-card-metric {
    min-height: 118px;
}

.placeholder-card-overview {
    min-height: 468px;
}

.placeholder-transactions-shell {
    grid-template-columns: minmax(930px, 2fr) minmax(350px, 1fr);
}

.placeholder-card-transactions {
    min-height: 700px;
}

.placeholder-card-detail {
    min-height: 600px;
}

.placeholder-auth-shell {
    width: min(1080px, calc(100vw - 4rem));
    min-height: 100vh;
    margin: 0 auto;
    padding: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
    align-items: center;
}

.placeholder-auth-brand {
    display: grid;
    gap: 1.5rem;
}

.placeholder-auth-orb {
    width: 7rem;
    height: 7rem;
    border-radius: 28px;
}

.placeholder-auth-card {
    min-height: 520px;
    padding: 2rem;
}

.placeholder-line {
    height: 0.875rem;
    border-radius: 999px;
}

.placeholder-line-xs {
    width: 22%;
}

.placeholder-line-sm {
    width: 28%;
}

.placeholder-line-md {
    width: 45%;
}

.placeholder-line-lg {
    width: 68%;
}

.placeholder-line-xl {
    width: 82%;
}

.placeholder-line-center {
    margin: 0 auto;
}

.placeholder-line-metric {
    height: 2rem;
}

.placeholder-field {
    height: 3rem;
    border-radius: 10px;
}

.placeholder-button {
    width: 100%;
    height: 3rem;
    border-radius: 999px;
}

.placeholder-button-sm {
    height: 2.8rem;
}

.placeholder-button-pill {
    width: 156px;
}

.placeholder-control-pill {
    width: 156px;
}

.placeholder-export-pill {
    width: 122px;
}

.placeholder-filter-pill {
    width: 108px;
    height: 2rem;
}

.placeholder-chip {
    width: 2rem;
    height: 1.7rem;
    border-radius: 6px;
}

.placeholder-chip.is-active {
    background: #d6d9de;
}

.placeholder-chip-tag {
    width: 4rem;
    height: 1.45rem;
    border-radius: 999px;
}

.placeholder-overview-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) 330px;
    min-height: 288px;
    gap: 1.5rem;
    padding: 1.9rem;
}

.placeholder-overview-hero-main {
    display: flex;
    align-items: stretch;
}

.placeholder-overview-side {
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    background: rgba(245, 246, 248, 0.7);
    padding: 1.5rem;
}

.placeholder-metric-panel {
    min-height: 118px;
    padding: 1.5rem 1.75rem;
}

.placeholder-overview-main-panel {
    padding: 1.5rem;
}

.placeholder-overview-main-head {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.placeholder-overview-main-body {
    display: grid;
    grid-template-columns: 388px minmax(0, 1fr);
    gap: 1.75rem;
}

.placeholder-overview-list {
    display: grid;
    gap: 0.9rem;
}

.placeholder-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.placeholder-stick {
    width: 4px;
    min-height: 2.65rem;
    border-radius: 999px;
    background: var(--skeleton-base, var(--skeleton-base-light));
}

.placeholder-overview-chart {
    display: grid;
    gap: 0.85rem;
    padding-top: 0.2rem;
}

.placeholder-chart {
    min-height: 320px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(82, 201, 95, 0.05) 100%),
        var(--skeleton-base, var(--skeleton-base-light));
    position: relative;
    overflow: hidden;
}

.placeholder-chart::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg, transparent, transparent 35px, rgba(255, 255, 255, 0.45) 36px),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: placeholder-shimmer 1.6s ease-in-out infinite;
}

.placeholder-chart-footer {
    justify-content: space-between;
}

.placeholder-transactions-panel-skeleton {
    min-width: 930px;
    min-height: 700px;
    padding: 1.125rem 2rem;
}

.placeholder-transactions-toolbar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 2.25rem auto auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.placeholder-search-pill {
    height: 2.875rem;
}

.placeholder-chip-row-filters {
    margin-bottom: 1rem;
}

.placeholder-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 0.8rem 0 1rem;
}

.placeholder-table-list {
    display: grid;
    gap: 0;
    margin-top: 1rem;
    border-top: 1px solid #ececec;
}

.placeholder-table-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) 90px 170px 170px 110px;
    gap: 1rem;
    align-items: center;
    padding: 0.95rem 0;
    border-bottom: 1px solid #ececec;
}

.placeholder-avatar {
    width: 1.65rem;
    height: 1.65rem;
}

.placeholder-detail-panel-skeleton {
    min-height: 600px;
    padding: 1.35rem 1.3rem;
}

.placeholder-detail-avatar {
    width: 2.8rem;
    height: 2.8rem;
}

.placeholder-detail-head {
    align-items: flex-start;
    margin-bottom: 1rem;
}

.placeholder-detail-list {
    display: grid;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
}

.placeholder-note-card {
    border: 1px solid #ececec;
    border-radius: 12px;
    background: rgba(245, 246, 248, 0.7);
    padding: 1rem;
}

.placeholder-admin-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
    min-height: 100vh;
    padding: 1.25rem;
    background: #f5f6f8;
}

.placeholder-admin-sidebar {
    min-height: calc(100vh - 2.5rem);
    border-radius: 18px;
}

.placeholder-admin-main {
    align-content: start;
}

[data-theme='dark'] .app-placeholder-client,
[data-theme='dark'] .app-placeholder-admin {
    --skeleton-base: var(--skeleton-base-dark);
    --skeleton-glow: var(--skeleton-glow-dark);
    background: #101317;
}

[data-theme='dark'] .app-placeholder-auth {
    --skeleton-base: #1f2630;
    --skeleton-glow: #2d3644;
    background: #090b0f;
}

[data-theme='dark'] .placeholder-panel,
[data-theme='dark'] .placeholder-note-card,
[data-theme='dark'] .placeholder-overview-side {
    background: rgba(23, 27, 33, 0.96);
    border-color: #2a313b;
}

[data-theme='dark'] .app-placeholder .panel-card,
[data-theme='dark'] .app-placeholder .side-panel,
[data-theme='dark'] .app-placeholder .transaction-detail-panel,
[data-theme='dark'] .app-placeholder .placeholder-note-card,
[data-theme='dark'] .app-placeholder .placeholder-overview-side {
    background: rgba(23, 27, 33, 0.96);
    border-color: #2a313b;
}

[data-theme='dark'] .placeholder-row {
    background: rgba(16, 19, 23, 0.94);
    border-bottom-color: #2a313b;
}

[data-theme='dark'] .placeholder-tab.is-active::after {
    background: #f4f6f8;
}

[data-theme='dark'] .placeholder-chip.is-active {
    background: #4a5564;
}

[data-theme='dark'] .placeholder-table-list,
[data-theme='dark'] .placeholder-table-row,
[data-theme='dark'] .placeholder-note-card,
[data-theme='dark'] .app-placeholder .summary-divider,
[data-theme='dark'] .app-placeholder .table-wrap,
[data-theme='dark'] .app-placeholder .transaction-detail-header {
    border-color: #2a313b;
}

[data-theme='dark'] .placeholder-chart::after {
    background:
        repeating-linear-gradient(180deg, transparent, transparent 35px, rgba(255, 255, 255, 0.06) 36px),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
}

@media (max-width: 1100px) {
    .placeholder-page-shell {
        width: calc(100vw - 3rem);
    }

    .placeholder-overview-hero-panel,
    .placeholder-overview-main-body,
    .placeholder-transactions-shell,
    .placeholder-metrics-grid,
    .placeholder-transactions-toolbar,
    .placeholder-auth-shell,
    .placeholder-grid-two,
    .placeholder-admin-shell {
        grid-template-columns: 1fr;
    }

    .placeholder-table-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .placeholder-card-detail {
        min-height: 280px;
    }

    .placeholder-admin-sidebar {
        min-height: 220px;
    }
}

@media (max-width: 720px) {
    .placeholder-row {
        padding-inline: 1rem;
    }

    .placeholder-page-shell,
    .placeholder-auth-shell {
        width: calc(100vw - 2rem);
        padding-inline: 1rem;
    }

    .placeholder-row-nav {
        gap: 0.5rem;
        overflow: hidden;
    }

    .placeholder-tab {
        width: 72px;
    }

    .placeholder-overview-hero-panel,
    .placeholder-overview-main-panel,
    .placeholder-transactions-panel-skeleton,
    .placeholder-detail-panel-skeleton {
        padding: 1rem;
    }

    .placeholder-button-pill,
    .placeholder-control-pill,
    .placeholder-export-pill,
    .placeholder-filter-pill {
        width: 100%;
    }

    .placeholder-action-row,
    .placeholder-chip-row,
    .placeholder-chart-footer {
        flex-wrap: wrap;
    }
}

.mobile-current-page,
.mobile-tabbar {
    display: none;
}

@media (max-width: 900px) {
    .client-body {
        --mobile-tabbar-height: 5.25rem;
    }

    .client-body .topbar-row-primary .topbar-inner {
        min-height: 4rem;
        padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
        padding-bottom: 0.75rem;
        padding-inline: 1rem;
    }

    .client-body .topbar-actions,
    .client-body .topbar-row-secondary {
        display: none;
    }

    .client-body .brand-wordmark-svg {
        width: 88px;
    }

    .mobile-current-page {
        display: inline-flex;
        align-items: center;
        margin-left: 0.8rem;
        color: var(--client-text-soft);
        font-size: 0.95rem;
        font-weight: 525;
        line-height: 1;
    }

    .client-body .flash-banner,
    .client-body .overview-stack,
    .client-body .transactions-stack {
        width: calc(100vw - 1.25rem);
    }

    .client-body .client-shell {
        padding: 0.95rem 0 calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .client-body .page-stack {
        gap: 0.85rem;
    }

    .client-body .hero-card,
    .client-body .overview-grid,
    .client-body .summary-card,
    .transactions-layout,
    .client-body .profile-grid,
    .client-body .form-grid.two-up {
        grid-template-columns: 1fr;
    }

    .client-body .hero-card,
    .client-body .overview-panel,
    .client-body .transactions-panel {
        padding: 1rem;
    }

    .client-body .hero-card {
        min-height: 0;
        gap: 1rem;
    }

    .client-body .hero-copy {
        padding-right: 0;
    }

    .client-body .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .client-body .secondary-button,
    .client-body .primary-button {
        width: 100%;
    }

    .client-body .expert-panel {
        padding: 1.1rem;
    }

    .client-body .summary-card {
        padding: 1rem;
        gap: 0.9rem;
    }

    .client-body .summary-divider {
        width: 100%;
        height: 1px;
    }

    .client-body .summary-metric .metric-value {
        font-size: 2rem;
    }

    .client-body .panel-heading.split {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .client-body .chart-toolbar {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.1rem;
    }

    .client-body .toolbar-select,
    .client-body .chart-icon-button,
    .client-body .filter-button {
        flex: 0 0 auto;
    }

    .client-body .allocation-columns {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .client-body .chart-tooltip {
        left: auto !important;
        right: 0.75rem;
        transform: none;
    }

    .client-body .transactions-panel,
    .transaction-detail-panel {
        min-width: 0;
        max-width: none;
    }

    .transaction-detail-panel {
        order: 1;
        position: static;
        top: auto;
        min-height: 0;
    }

    .transaction-detail-panel.has-selection {
        order: -1;
    }

    .client-body .toolbar-wrap {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.75rem;
    }

    .client-body .transaction-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .client-body .range-group,
    .client-body .inline-filter-row {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.15rem;
    }

    .client-body .inline-filter-row {
        display: flex;
        margin-bottom: 0.9rem;
    }

    .client-body .metric-grid.four-up {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem 0.75rem;
    }

    .client-body .table-wrap {
        max-height: none;
        overflow: visible;
        border-top: 0;
    }

    .client-body .data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .client-body .data-table thead {
        display: none;
    }

    .client-body .data-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    .client-body .transaction-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.85rem 0.95rem;
        padding: 1rem;
        border: 1px solid var(--client-border);
        border-radius: 14px;
        background: var(--client-surface);
    }

    .client-body .data-table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.85rem;
        padding: 0;
        border: 0;
    }

    .client-body .transaction-row td:nth-child(1) {
        grid-column: 1 / 2;
    }

    .client-body .transaction-row td:nth-child(2) {
        grid-column: 2 / 3;
        justify-self: end;
        text-align: right;
    }

    .client-body .transaction-row td:nth-child(n+3) {
        grid-column: 1 / -1;
    }

    .client-body .transaction-row td::before {
        content: attr(data-label);
        flex: 0 0 4.6rem;
        color: var(--client-text-soft);
        font-size: 0.66rem;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .client-body .transaction-row td:nth-child(1)::before,
    .client-body .transaction-row td:nth-child(2)::before {
        display: none;
    }

    .client-body .table-merchant,
    .client-body .account-cell {
        width: 100%;
    }

    .client-body .account-cell {
        justify-content: flex-start;
    }

    .client-body .tag-row {
        flex-wrap: wrap;
    }

    .client-body .pagination-wrap {
        padding-top: 0.2rem;
        padding-bottom: 0.25rem;
    }

    .client-body .app-dialog {
        width: calc(100vw - 1rem);
        max-width: none;
    }

    .client-body .dialog-card {
        max-height: calc(100vh - 1rem - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        padding: 1rem;
        border-radius: 20px;
    }

    .account-option-button {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .account-option-key {
        display: none;
    }

    .wallet-option-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .wallet-copy-button {
        width: 100%;
    }

    .popular-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.1rem;
    }

    .notification-panel,
    .menu-panel {
        position: fixed;
        top: auto;
        right: 0.75rem;
        bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 0.45rem);
        left: 0.75rem;
        width: auto;
        max-height: min(60vh, 32rem);
        overflow-y: auto;
        padding: 1rem;
        border-radius: 18px;
    }

    .mobile-tabbar {
        position: fixed;
        right: 0.75rem;
        bottom: 0;
        left: 0.75rem;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.2rem;
        padding: 0.45rem 0.4rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid var(--client-border);
        border-radius: 1.45rem 1.45rem 0 0;
        box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.08);
        backdrop-filter: saturate(180%) blur(20px);
    }

    .mobile-tab-link {
        position: relative;
        display: grid;
        place-items: center;
        gap: 0.28rem;
        min-height: 3.45rem;
        padding: 0.35rem 0.15rem;
        border: 0;
        border-radius: 1rem;
        background: transparent;
        color: var(--client-text-soft);
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-tab-link.is-active {
        color: var(--client-text);
    }

    .mobile-tab-link.is-active .mobile-tab-icon {
        background: var(--client-surface-soft);
    }

    .mobile-tab-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 0.8rem;
    }

    .mobile-tab-icon svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .mobile-tab-label {
        font-size: 0.7rem;
        font-weight: 525;
        line-height: 1;
    }

    .mobile-tab-badge {
        position: absolute;
        top: -0.1rem;
        right: -0.15rem;
        min-width: 1rem;
        min-height: 1rem;
        padding: 0 0.2rem;
        border-radius: 999px;
        background: var(--danger);
        color: #fff;
        font-size: 0.64rem;
        font-weight: 700;
        line-height: 1rem;
    }
}

@media (max-width: 560px) {
    .client-body .overview-stack,
    .client-body .transactions-stack,
    .client-body .flash-banner {
        width: calc(100vw - 1rem);
    }

    .client-body .metric-grid.four-up {
        grid-template-columns: 1fr;
    }

    .client-body .transaction-toolbar {
        grid-template-columns: 1fr;
    }

    .client-body .filter-button,
    .client-body .toolbar-wrap > .secondary-button {
        width: 100%;
    }

    .client-body .transaction-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .client-body .transaction-row td:nth-child(1),
    .client-body .transaction-row td:nth-child(2),
    .client-body .transaction-row td:nth-child(n+3) {
        grid-column: 1 / -1;
    }

    .client-body .transaction-row td:nth-child(2) {
        justify-self: stretch;
        text-align: left;
    }

    .client-body .transaction-row td:nth-child(2)::before {
        display: block;
    }

    .mobile-tabbar {
        left: 0;
        right: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
        border-radius: 1.2rem 1.2rem 0 0;
    }

    .notification-panel,
    .menu-panel {
        right: 0.5rem;
        left: 0.5rem;
    }
}

[data-theme='dark'] .mobile-current-page,
[data-theme='dark'] .mobile-tab-link {
    color: var(--client-text-soft);
}

[data-theme='dark'] .mobile-tab-link.is-active {
    color: var(--client-text);
}

[data-theme='dark'] .mobile-tabbar {
    background: rgba(16, 19, 23, 0.94);
    border-color: var(--client-border);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.32);
}

[data-theme='dark'] .mobile-tab-link.is-active .mobile-tab-icon {
    background: var(--client-surface-soft);
}

html.is-ios-pwa,
html.is-ios-pwa body {
    min-height: 100svh;
}

html.is-ios-pwa body {
    overscroll-behavior-y: contain;
}

html.is-ios-pwa .client-body {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
    html.is-ios-pwa .client-body .topbar-row-primary {
        background: color-mix(in srgb, var(--client-header) 92%, transparent);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
    }

    html.is-ios-pwa .client-body .topbar-row-primary .topbar-inner {
        min-height: calc(3.5rem + env(safe-area-inset-top, 0px));
        padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
        padding-bottom: 0.5rem;
        justify-content: center;
    }

    html.is-ios-pwa .client-body .topbar-brand {
        width: 100%;
        margin-right: 0;
        justify-content: center;
    }

    html.is-ios-pwa .client-body .brand-link {
        justify-content: center;
        margin: 0 auto;
    }

    html.is-ios-pwa .client-body .brand-wordmark-svg {
        width: 96px;
        max-width: 96px;
    }

    html.is-ios-pwa .mobile-current-page {
        display: none;
    }

    html.is-ios-pwa .client-body .client-shell {
        padding-top: 0.8rem;
    }

    html.is-ios-pwa .mobile-tabbar {
        left: 50%;
        right: auto;
        width: min(430px, calc(100vw - 1rem));
        transform: translateX(-50%);
        padding-top: 0.35rem;
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        border-right: 0;
        border-left: 0;
        background: color-mix(in srgb, var(--client-header) 94%, transparent);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
    }

    html.is-ios-pwa .mobile-tab-link {
        min-height: 3.35rem;
    }

    html.is-ios-pwa .mobile-tab-icon {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 0.85rem;
    }

    html.is-ios-pwa .notification-panel,
    html.is-ios-pwa .menu-panel {
        left: 50%;
        right: auto;
        width: min(430px, calc(100vw - 1rem));
        transform: translateX(-50%);
        bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 0.6rem);
    }

    html.is-ios-pwa .client-body .app-dialog {
        width: min(430px, calc(100vw - 1rem));
    }

    html.is-ios-pwa .client-body .dialog-card {
        border-radius: 24px;
        max-height: calc(100svh - 1rem - env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 560px) {
    html.is-ios-pwa .mobile-tabbar {
        width: calc(100vw - 0.5rem);
        border-radius: 0;
    }

    html.is-ios-pwa .notification-panel,
    html.is-ios-pwa .menu-panel,
    html.is-ios-pwa .client-body .app-dialog {
        width: calc(100vw - 0.75rem);
    }
}

.client-body .pwa-page-stack {
    width: min(var(--overview-width), calc(100vw - (var(--chrome-gutter) * 2)));
    margin: 0 auto;
}

.client-body .pwa-page-card {
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
}

.alerts-feed,
.menu-page-actions {
    display: grid;
    gap: 0.75rem;
}

.alert-card,
.menu-page-action {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--client-border);
    border-radius: 14px;
    background: var(--client-surface);
}

.alert-card.is-unread {
    background: color-mix(in srgb, var(--client-surface) 82%, var(--client-surface-soft));
    border-color: var(--client-border-strong);
}

.alert-card-copy {
    display: grid;
    gap: 0.32rem;
}

.alert-card-copy strong {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--client-text);
}

.alert-card-copy p {
    color: var(--client-text-muted);
}

.alert-card-meta {
    color: var(--client-text-soft);
    font-size: 0.78rem;
}

.alert-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    height: 2rem;
    padding: 0 0.7rem;
    border: 1px solid var(--client-border);
    border-radius: 999px;
    background: var(--client-surface-soft);
    color: var(--client-text-soft);
    font-size: 0.76rem;
    font-weight: 600;
}

.menu-page-actions form {
    margin: 0;
}

.menu-page-action {
    align-items: center;
    color: var(--client-text);
    font-size: 0.96rem;
    font-weight: 525;
}

.menu-page-action:hover {
    background: var(--client-surface-soft);
}

.menu-page-action.danger {
    color: var(--danger);
}

.allocation-map-surface {
    display: flex;
    gap: 0.12rem;
    min-height: 305px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
}

.allocation-map-column {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 13px;
}

.allocation-map-block {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 14px;
    padding: 0.95rem 1rem 0.9rem;
    overflow: hidden;
    border-radius: 2px;
    background: var(--map-color);
    box-shadow: none;
}

.allocation-map-block::after {
    content: none;
}

.allocation-map-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.12rem;
    color: #fff;
}

.allocation-map-title {
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 0.94rem;
    font-weight: 525;
    line-height: 1.14;
    letter-spacing: -0.016em;
}

.allocation-map-share {
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.82rem;
    font-weight: 450;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.allocation-map-block--xl .allocation-map-title {
    font-size: 1rem;
}

.allocation-map-block--xl .allocation-map-share {
    font-size: 0.86rem;
}

.allocation-map-block--lg .allocation-map-title {
    font-size: 0.95rem;
}

.allocation-map-block--md {
    padding: 0.72rem 0.78rem 0.68rem;
}

.allocation-map-block--md .allocation-map-title {
    font-size: 0.82rem;
    line-height: 1.08;
}

.allocation-map-block--md .allocation-map-share {
    font-size: 0.74rem;
}

.allocation-map-block--sm {
    padding: 0.48rem 0.48rem 0.44rem;
}

.allocation-map-block--sm .allocation-map-title {
    font-size: 0.68rem;
    line-height: 1.02;
    letter-spacing: -0.012em;
}

.allocation-map-block--sm .allocation-map-share {
    font-size: 0.66rem;
}

.allocation-map-block--xs {
    padding: 0;
}

.allocation-map-block--xs .allocation-map-copy {
    display: none;
}

.allocation-map-empty {
    display: grid;
    width: 100%;
    min-height: 320px;
    place-content: center;
    gap: 0.35rem;
    border: 1px dashed var(--client-border);
    border-radius: 12px;
    background: var(--client-surface-soft);
    text-align: center;
}

@media (max-width: 900px) {
    .client-body .pwa-page-stack {
        width: calc(100vw - 1.25rem);
    }

    .client-body .pwa-page-card {
        padding: 1rem;
    }

    .alert-card,
    .menu-page-action {
        flex-direction: column;
        align-items: stretch;
    }

    .allocation-map-surface {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
        gap: 0.18rem;
    }

    .allocation-map-column {
        min-height: 220px;
        min-width: 0;
        gap: 0.18rem;
    }
}

@media (max-width: 560px) {
    .client-body .pwa-page-stack {
        width: calc(100vw - 1rem);
    }

    .allocation-map-surface {
        grid-template-columns: 1fr;
    }

    .allocation-map-column {
        min-height: 170px;
    }
}

[data-theme='dark'] .alert-card,
[data-theme='dark'] .menu-page-action,
[data-theme='dark'] .alert-status-chip,
[data-theme='dark'] .allocation-map-empty {
    border-color: var(--client-border);
}

[data-theme='dark'] .alert-card.is-unread,
[data-theme='dark'] .menu-page-action:hover,
[data-theme='dark'] .alert-status-chip,
[data-theme='dark'] .allocation-map-empty {
    background: var(--client-surface-soft);
}

[data-theme='dark'] .allocation-map-block {
    box-shadow: none;
}

[data-theme='dark'] .allocation-map-surface {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

/* Angelos Pay iPhone PWA */
.pay-client {
    --pay-green: #126a52;
    --pay-green-bright: #20d66f;
    --pay-page: #f1f2f1;
    --pay-card: #ffffff;
    --pay-ink: #080a09;
    --pay-muted: #6d716f;
    --pay-line: #dcdfdd;
    min-width: 320px;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    background: var(--pay-page);
    color: var(--pay-ink);
}

.pay-client button,
.pay-client input {
    color: inherit;
}

.pay-client svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.85;
}

.pay-header {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    border-bottom: 1px solid rgba(8, 10, 9, 0.06);
    background: rgba(241, 242, 241, 0.96);
    backdrop-filter: blur(20px);
}

.pay-header-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    max-width: 540px;
    min-height: 4.6rem;
    margin: 0 auto;
    padding: max(0.8rem, env(safe-area-inset-top)) 1rem 0.45rem;
}

.pay-header-icon {
    position: relative;
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
}

.pay-header-icon svg {
    width: 1.72rem;
    height: 1.72rem;
}

.pay-notification-badge {
    position: absolute;
    top: -0.15rem;
    right: -0.12rem;
    display: grid;
    min-width: 1.28rem;
    height: 1.28rem;
    padding: 0 0.28rem;
    place-items: center;
    border-radius: 999px;
    background: #d91b45;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
}

.pay-greeting {
    min-width: 0;
    text-align: center;
    line-height: 1.04;
}

.pay-greeting span {
    display: block;
    color: var(--pay-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.pay-greeting strong {
    display: block;
    overflow: hidden;
    margin-top: 0.15rem;
    font-family: var(--font-serif);
    font-size: clamp(1.24rem, 5vw, 1.7rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-header-actions {
    display: flex;
    align-items: center;
}

.pay-segment-scroll {
    display: flex;
    max-width: 540px;
    margin: 0 auto;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.55rem 1rem 0.85rem;
    scrollbar-width: none;
}

.pay-segment-scroll::-webkit-scrollbar {
    display: none;
}

.pay-segment {
    flex: 0 0 auto;
    min-height: 2.55rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--pay-ink);
    border-radius: 0.9rem;
    background: transparent;
    color: var(--pay-ink);
    font-size: 0.88rem;
    font-weight: 750;
    white-space: nowrap;
}

.pay-segment.is-active {
    background: var(--pay-ink);
    color: #fff;
}

.pay-page-shell {
    width: min(100%, 540px);
    min-height: calc(100vh - 10rem);
    margin: 0 auto;
    padding: 1.15rem 1rem 2.5rem;
}

.pay-overview,
.pay-activity {
    display: grid;
    gap: 1.35rem;
}

.pay-balance-stack {
    display: grid;
    gap: 0.75rem;
}

.pay-balance-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 6rem;
    padding: 1.1rem 1rem 1.1rem 1.15rem;
    border: 1px solid rgba(8, 10, 9, 0.045);
    border-radius: 1.15rem;
    background: var(--pay-card);
    box-shadow: 0 1px 0 rgba(8, 10, 9, 0.02);
}

.pay-balance-card-primary {
    min-height: 7.25rem;
}

.pay-balance-card > div {
    min-width: 0;
}

.pay-card-label,
.pay-balance-card small {
    display: block;
}

.pay-card-label {
    font-size: 1rem;
    font-weight: 790;
}

.pay-balance-card small {
    margin-top: 0.25rem;
    color: var(--pay-muted);
    font-size: 0.76rem;
}

.pay-balance-card > strong {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    font-weight: 650;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.pay-chevron {
    align-self: center;
    color: var(--pay-ink);
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
}

.pay-feature-card {
    position: relative;
    display: grid;
    min-height: 11rem;
    overflow: hidden;
    padding: 1.4rem 7rem 1.4rem 1.25rem;
    border-radius: 1.15rem;
    background: #fff;
}

.pay-feature-card::after {
    content: "";
    position: absolute;
    top: -2.5rem;
    right: -3rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: #5ce38b;
}

.pay-feature-card > div {
    position: relative;
    z-index: 2;
}

.pay-feature-card h2 {
    max-width: 14rem;
    margin: 0.28rem 0 0.45rem;
    font-family: var(--font-serif);
    font-size: 1.55rem;
    line-height: 1.05;
}

.pay-feature-card p {
    max-width: 18rem;
    margin: 0;
    color: #4c514f;
    font-size: 0.82rem;
    line-height: 1.4;
}

.pay-feature-card img {
    position: absolute;
    z-index: 3;
    right: 1.05rem;
    bottom: 1.1rem;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    object-fit: cover;
}

.pay-kicker {
    color: var(--pay-green);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pay-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.8rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: 850;
}

.pay-feature-link span {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 50%;
    background: var(--pay-ink);
    color: #fff;
}

.pay-section {
    display: grid;
    gap: 0.7rem;
}

.pay-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.5rem;
    padding: 0 0.15rem;
}

.pay-section-heading h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.62rem;
}

.pay-section-heading a {
    color: var(--pay-green);
    font-size: 0.83rem;
    font-weight: 780;
}

.pay-section-heading button {
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
}

.pay-section-heading svg {
    width: 1.35rem;
    height: 1.35rem;
}

.pay-space-list {
    overflow: hidden;
    border: 1px solid rgba(8, 10, 9, 0.045);
    border-radius: 1.15rem;
    background: var(--pay-card);
}

.pay-space-row {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto 0.9rem;
    align-items: center;
    gap: 0.8rem;
    min-height: 5.75rem;
    margin-left: 0.9rem;
    padding: 0.85rem 0.85rem 0.85rem 0;
    border-bottom: 1px solid var(--pay-line);
}

.pay-space-row:last-child {
    border-bottom: 0;
}

.pay-space-icon,
.pay-transaction-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    font-weight: 850;
}

.pay-space-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pay-space-icon svg {
    width: 1.55rem;
    height: 1.55rem;
}

.tone-green { background: #59ec82; }
.tone-aqua { background: #75dfd4; }
.tone-orange { background: #ffb56c; }
.tone-violet { background: #aaa2ff; }
.tone-pink { background: #f5a6e8; }
.tone-blue { background: #91b9ff; }

.pay-space-copy,
.pay-space-balance {
    min-width: 0;
}

.pay-space-copy strong,
.pay-space-copy small,
.pay-space-balance strong,
.pay-space-balance small {
    display: block;
}

.pay-space-copy strong {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-space-copy small,
.pay-space-balance small {
    margin-top: 0.22rem;
    color: var(--pay-muted);
    font-size: 0.76rem;
}

.pay-space-balance {
    text-align: right;
    white-space: nowrap;
}

.pay-space-balance strong {
    font-size: 0.96rem;
}

.pay-space-balance.is-credit strong,
.is-credit {
    color: #008961;
}

.pay-transaction-icon {
    border: 1px solid #d7dad8;
    background: #fff;
    font-size: 0.86rem;
}

.pay-space-empty {
    display: grid;
    gap: 0.35rem;
    padding: 1.4rem;
    color: var(--pay-muted);
}

.pay-space-empty strong {
    color: var(--pay-ink);
}

.pay-caught-up {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    padding: 1.5rem 0 1rem;
    text-align: center;
}

.pay-caught-up img {
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 0.35rem;
    border-radius: 50%;
}

.pay-caught-up strong {
    font-family: var(--font-serif);
    font-size: 1.1rem;
}

.pay-caught-up span {
    color: var(--pay-muted);
    font-size: 0.78rem;
}

.pay-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(100%, 540px);
    min-height: calc(4.75rem + env(safe-area-inset-bottom));
    margin: 0 auto;
    padding: 0.45rem 0.4rem env(safe-area-inset-bottom);
    border-top: 1px solid #d8dbd9;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.035);
}

.pay-tab {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 0.15rem;
    place-items: center;
    gap: 0.1rem;
    border: 0;
    background: transparent;
    color: var(--pay-ink);
    font-size: 0.7rem;
    font-weight: 700;
}

.pay-tab svg {
    width: 1.5rem;
    height: 1.5rem;
}

.pay-tab.is-active::before {
    content: "";
    position: absolute;
    top: -0.48rem;
    right: 0.08rem;
    left: 0.08rem;
    height: 0.2rem;
    background: var(--pay-green-bright);
}

.pay-tab.is-active svg {
    fill: var(--pay-ink);
}

.pay-popover {
    position: fixed;
    z-index: 80;
    top: calc(4.5rem + env(safe-area-inset-top));
    right: max(1rem, calc((100vw - 540px) / 2 + 1rem));
    left: max(1rem, calc((100vw - 540px) / 2 + 1rem));
    display: none;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid rgba(8, 10, 9, 0.09);
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}

.pay-popover.is-open {
    display: block;
}

.pay-popover-heading,
.pay-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.pay-popover-heading h2 {
    margin: 0.15rem 0 0;
    font-family: var(--font-serif);
}

.pay-popover-heading a {
    color: var(--pay-green);
    font-size: 0.78rem;
    font-weight: 800;
}

.pay-popover-list {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.pay-notification-item {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--pay-line);
}

.pay-notification-item .pay-space-icon {
    width: 2.4rem;
    height: 2.4rem;
}

.pay-notification-item strong,
.pay-notification-item p {
    display: block;
    margin: 0;
}

.pay-notification-item p {
    margin-top: 0.12rem;
    color: var(--pay-muted);
    font-size: 0.75rem;
}

.pay-notification-item button {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: #e8f8ef;
    color: var(--pay-green);
}

.pay-empty-mini {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    padding: 1.2rem;
    color: var(--pay-muted);
    text-align: center;
}

.pay-empty-mini img {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.25rem;
    border-radius: 50%;
}

.pay-profile-row {
    justify-content: flex-start;
    padding-bottom: 0.9rem;
}

.pay-profile-row img {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.pay-profile-row strong,
.pay-profile-row span {
    display: block;
}

.pay-profile-row span {
    margin-top: 0.18rem;
    color: var(--pay-muted);
    font-size: 0.76rem;
}

.pay-security-card {
    display: grid;
    gap: 0.55rem;
    margin: 0.2rem 0 0.8rem;
    padding: 1rem;
    border-radius: 0.9rem;
    background: #eef8f2;
}

.pay-security-card strong,
.pay-security-card p {
    margin: 0;
}

.pay-security-card p {
    color: #4c5a53;
    font-size: 0.78rem;
    line-height: 1.4;
}

.pay-security-card [data-tone="error"],
.pay-security-message[data-tone="error"] {
    color: #b5233d;
}

.pay-security-card [data-tone="success"],
.pay-security-message[data-tone="success"] {
    color: #087b57;
}

.pay-dark-button,
.pay-outline-button {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--pay-ink, #080a09);
    border-radius: 0.75rem;
    font-weight: 800;
}

.pay-dark-button {
    background: var(--pay-ink, #080a09);
    color: #fff !important;
}

.pay-outline-button {
    background: transparent;
    color: var(--pay-ink, #080a09);
}

.pay-menu-link {
    display: flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.2rem;
    border: 0;
    border-top: 1px solid var(--pay-line);
    background: transparent;
    font-weight: 700;
}

.pay-menu-logout {
    color: #b5233d !important;
}

.pay-flash {
    width: min(calc(100% - 2rem), 508px);
    margin: 0.75rem auto 0;
    padding: 0.8rem 1rem;
    border-radius: 0.8rem;
    background: #dff5e8;
    color: #0b6c4f;
    font-size: 0.82rem;
    font-weight: 750;
}

.pay-dialog {
    width: min(calc(100% - 2rem), 480px);
    padding: 0;
    border: 0;
    border-radius: 1.2rem;
    background: #fff;
    color: var(--pay-ink);
    box-shadow: 0 26px 100px rgba(0, 0, 0, 0.3);
}

.pay-dialog::backdrop {
    background: rgba(9, 9, 9, 0.28);
    -webkit-backdrop-filter: saturate(115%) blur(18px);
    backdrop-filter: saturate(115%) blur(18px);
}

.pay-dialog-card {
    position: relative;
    display: grid;
    gap: 0.75rem;
    padding: 1.4rem;
}

.pay-dialog-card h2,
.pay-dialog-card p {
    margin: 0;
}

.pay-dialog-card h2 {
    font-family: var(--font-serif);
}

.pay-dialog-card p {
    color: var(--pay-muted);
    line-height: 1.5;
}

.pay-dialog-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: #edf0ee;
    font-size: 1.25rem;
}

.pay-dialog-search {
    display: grid;
    gap: 0.65rem;
}

.pay-dialog-search input {
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #cfd4d1;
    border-radius: 0.75rem;
    background: #fff;
}

/* Activity */
.pay-account-hero {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    margin: -0.15rem -1rem 0;
    padding: 0.8rem 1rem 1.35rem;
    border-bottom: 1px solid var(--pay-line);
}

.pay-back-link {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    font-size: 1.6rem;
}

.pay-account-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
}

.pay-account-title img {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
}

.pay-account-title span,
.pay-account-title small {
    display: block;
}

.pay-account-title span {
    font-weight: 800;
}

.pay-account-title small {
    color: var(--pay-muted);
    font-size: 0.72rem;
}

.pay-account-hero > strong {
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 6vw, 2rem);
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.pay-account-hero > span {
    grid-column: 3;
    margin-top: -0.8rem;
    color: var(--pay-muted);
    font-size: 0.7rem;
    text-align: right;
}

.pay-activity-controls {
    margin: -1.35rem -1rem 0;
    border-bottom: 1px solid var(--pay-line);
    background: #fff;
}

.pay-range-tabs {
    display: flex;
    overflow-x: auto;
    padding: 0 0.8rem;
    scrollbar-width: none;
}

.pay-range-tabs::-webkit-scrollbar {
    display: none;
}

.pay-range-tabs button {
    flex: 0 0 auto;
    min-height: 3.65rem;
    padding: 0.5rem 0.85rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-weight: 750;
    white-space: nowrap;
}

.pay-range-tabs button.is-active {
    border-bottom-color: var(--pay-ink);
}

.pay-activity-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pay-direction-filter {
    display: flex;
    gap: 0.5rem;
}

.pay-direction-filter a {
    display: grid;
    min-width: 3.2rem;
    min-height: 2.55rem;
    padding: 0.45rem 0.8rem;
    place-items: center;
    border: 1.5px solid var(--pay-ink);
    border-radius: 0.75rem;
    font-weight: 750;
}

.pay-direction-filter a.is-active {
    background: var(--pay-ink);
    color: #fff;
}

.pay-tool-actions {
    display: flex;
}

.pay-tool-actions a,
.pay-tool-actions button {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
}

.pay-tool-actions svg {
    width: 1.55rem;
    height: 1.55rem;
}

.pay-search-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    background: #fff;
    font-size: 0.8rem;
}

.pay-search-summary a {
    color: var(--pay-green);
    font-weight: 800;
}

.pay-flow-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
}

.pay-flow-summary > div {
    min-width: 0;
    padding: 0.85rem 0.7rem;
    border-right: 1px solid var(--pay-line);
}

.pay-flow-summary > div:last-child {
    border-right: 0;
}

.pay-flow-summary span,
.pay-flow-summary strong {
    display: block;
}

.pay-flow-summary span {
    margin-bottom: 0.25rem;
    color: var(--pay-muted);
    font-size: 0.66rem;
}

.pay-flow-summary strong {
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
}

.pay-transaction-groups {
    display: grid;
    gap: 0.95rem;
    margin: 0 -1rem;
}

.pay-transaction-group {
    background: #fff;
}

.pay-transaction-group h2 {
    margin: 0;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #e5e7e6;
    font-family: var(--font-serif);
    font-size: 1.05rem;
}

.pay-transaction-list {
    display: grid;
}

.pay-transaction-row {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto 0.75rem;
    align-items: center;
    gap: 0.7rem;
    min-height: 5.7rem;
    margin-left: 1rem;
    padding: 0.75rem 0.9rem 0.75rem 0;
    border-bottom: 1px solid #e5e7e6;
}

.pay-transaction-row:last-child {
    border-bottom: 0;
}

.pay-transaction-marker {
    position: absolute;
    top: 1.15rem;
    bottom: 1.15rem;
    left: -0.82rem;
    width: 0.22rem;
    border-radius: 999px;
    background: #19b979;
}

.pay-transaction-copy {
    min-width: 0;
}

.pay-transaction-copy strong,
.pay-transaction-copy small,
.pay-transaction-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-transaction-copy strong {
    font-size: 0.93rem;
}

.pay-transaction-copy small {
    margin-top: 0.12rem;
    color: #4d514f;
    font-size: 0.76rem;
}

.pay-transaction-copy span {
    margin-top: 0.18rem;
    color: var(--pay-muted);
    font-size: 0.68rem;
}

.pay-transaction-amount {
    min-width: 5.5rem;
    text-align: right;
    white-space: nowrap;
}

.pay-transaction-amount strong,
.pay-transaction-amount small {
    display: block;
}

.pay-transaction-amount strong {
    font-size: 0.96rem;
}

.pay-transaction-amount small {
    margin-top: 0.25rem;
    color: var(--pay-muted);
    font-size: 0.66rem;
}

.pay-no-results {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    margin: 0 1rem;
    padding: 2rem 1rem;
    border-radius: 1rem;
    background: #fff;
    text-align: center;
}

.pay-no-results img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.pay-no-results h2,
.pay-no-results p {
    margin: 0;
}

.pay-no-results p {
    color: var(--pay-muted);
}

.pay-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    color: var(--pay-muted);
    font-size: 0.75rem;
}

.pay-pagination a {
    color: var(--pay-green);
    font-weight: 800;
}

.pay-pagination a:last-child,
.pay-pagination span:last-child {
    text-align: right;
}

.pay-pagination [aria-disabled="true"] {
    opacity: 0.42;
}

/* Login and splash */
.pay-auth {
    --pay-green: #126a52;
    --pay-mint: #54bd88;
    --pay-ink: #080a09;
    min-width: 320px;
    min-height: 100dvh;
    background: #eef1ef;
    color: var(--pay-ink);
}

.pay-auth-shell {
    display: grid;
    width: min(100%, 520px);
    min-height: 100dvh;
    margin: 0 auto;
    background: #eef1ef;
}

.pay-auth-brand {
    position: relative;
    display: grid;
    min-height: 42dvh;
    overflow: hidden;
    place-items: center;
    padding: max(2rem, env(safe-area-inset-top)) 1.25rem 2.25rem;
    background: var(--pay-green);
    color: #fff;
}

.pay-auth-curve {
    position: absolute;
    border-radius: 50%;
}

.pay-auth-curve-one {
    top: -8rem;
    right: -11rem;
    width: 30rem;
    height: 20rem;
    background: #2d8067;
    transform: rotate(-12deg);
}

.pay-auth-curve-two {
    right: -5rem;
    bottom: -11rem;
    width: 25rem;
    height: 18rem;
    background: var(--pay-mint);
    transform: rotate(15deg);
}

.pay-auth-logo {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    text-align: center;
}

.pay-auth-logo img {
    width: clamp(5rem, 22vw, 7.5rem);
    height: clamp(5rem, 22vw, 7.5rem);
    border-radius: 50%;
}

.pay-auth-logo strong {
    margin-top: 0.55rem;
    font-family: var(--font-serif);
    font-size: clamp(1.65rem, 7vw, 2.35rem);
    letter-spacing: 0.06em;
}

.pay-auth-logo span {
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
}

.pay-login-panel {
    position: relative;
    z-index: 3;
    display: grid;
    align-content: start;
    gap: 1rem;
    margin-top: -1.2rem;
    padding: 1.5rem 1.2rem calc(2rem + env(safe-area-inset-bottom));
    border-radius: 1.4rem 1.4rem 0 0;
    background: #fff;
}

.pay-login-heading h1,
.pay-login-heading p {
    margin: 0;
}

.pay-login-heading h1 {
    margin-top: 0.2rem;
    font-family: var(--font-serif);
    font-size: 2rem;
}

.pay-login-heading p {
    margin-top: 0.35rem;
    color: #626765;
    font-size: 0.84rem;
    line-height: 1.45;
}

.pay-auth-error,
.pay-auth-status {
    display: grid;
    gap: 0.18rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.7rem;
    font-size: 0.78rem;
}

.pay-auth-error {
    background: #fff0f2;
    color: #a91c38;
}

.pay-auth-status {
    background: #e8f7ee;
    color: #087b57;
}

.pay-faceid-button {
    display: flex;
    width: 100%;
    min-height: 3.6rem;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border: 0;
    border-radius: 0.85rem;
    background: #080a09;
    color: #fff;
    font-weight: 820;
}

.pay-faceid-button svg {
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.pay-security-message {
    margin: -0.45rem 0 0;
    color: #6d716f;
    font-size: 0.72rem;
    text-align: center;
}

.pay-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #8a8e8c;
    font-size: 0.68rem;
}

.pay-auth-divider::before,
.pay-auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e0e3e1;
}

.pay-login-form {
    display: grid;
    gap: 0.85rem;
}

.pay-login-form label > span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
}

.pay-login-form input[type="text"],
.pay-login-form input[type="email"],
.pay-login-form input[type="password"] {
    width: 100%;
    min-height: 3.2rem;
    padding: 0.7rem 0.8rem;
    border: 1.5px solid #cdd2cf;
    border-radius: 0.72rem;
    background: #fff;
    outline: none;
}

.pay-login-form input:focus {
    border-color: var(--pay-green);
    box-shadow: 0 0 0 3px rgba(18, 106, 82, 0.12);
}

.pay-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pay-remember input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--pay-green);
}

.pay-remember span {
    margin: 0 !important;
    font-weight: 650 !important;
}

.pay-login-submit {
    min-height: 3.3rem;
    border-radius: 0.82rem;
}

.pay-login-help {
    display: grid;
    gap: 0.15rem;
    color: #696e6b;
    font-size: 0.72rem;
    text-align: center;
}

.pay-login-help a {
    color: var(--pay-green);
    font-weight: 800;
}

.pay-local-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7e6;
    color: #7a7f7c;
    font-size: 0.68rem;
}

.pay-local-preview a {
    color: var(--pay-green);
    font-weight: 800;
}

.hide-sensitive .sensitive {
    filter: blur(0.42rem);
    user-select: none;
}

@media (min-width: 541px) {
    .pay-client {
        background:
            linear-gradient(90deg, #e5e8e6 calc(50% - 270px), var(--pay-page) calc(50% - 270px), var(--pay-page) calc(50% + 270px), #e5e8e6 calc(50% + 270px));
    }

    .pay-client::before,
    .pay-auth::before {
        content: "";
        position: fixed;
        z-index: -1;
        inset: 0;
        background: #e5e8e6;
    }

    .pay-header,
    .pay-tabbar {
        border-right: 1px solid rgba(8, 10, 9, 0.06);
        border-left: 1px solid rgba(8, 10, 9, 0.06);
    }

    .pay-auth-shell {
        box-shadow: 0 0 70px rgba(0, 0, 0, 0.12);
    }
}

/* Minimal client sign-in: centered mark with the form directly below */
.pay-auth,
[data-theme='dark'] .pay-auth {
    background: var(--pay-page, var(--bg));
}

.pay-auth-shell,
[data-theme='dark'] .pay-auth-shell {
    background: var(--angelos-ivory);
}

.pay-auth-brand {
    min-height: 13rem;
    padding: max(2.25rem, env(safe-area-inset-top)) 1.25rem 1.8rem;
    background: var(--angelos-ivory);
    color: var(--angelos-ink);
}

.pay-auth-logo {
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

.pay-auth-logo img {
    width: clamp(5.25rem, 24vw, 6.5rem);
    height: clamp(5.25rem, 24vw, 6.5rem);
    filter: grayscale(1) contrast(1.2);
}

.pay-login-panel {
    margin-top: 0;
    border-top: 1px solid rgba(9, 9, 9, 0.12);
    border-radius: 1.4rem 1.4rem 0 0;
}

[data-theme='dark'] .pay-auth-shell,
[data-theme='dark'] .pay-auth-brand,
[data-theme='dark'] .pay-login-panel {
    background: #12110f;
    color: #f7f4ed;
}

[data-theme='dark'] .pay-auth-logo img {
    filter: grayscale(1) contrast(1.1);
}

[data-theme='dark'] .pay-login-panel {
    border-top-color: rgba(247, 244, 237, 0.14);
}

/* Angelos classical wealth system: ivory, ink, and antique gold */
:root {
    --angelos-ivory: #f7f4ed;
    --angelos-paper: #fffdf8;
    --angelos-ink: #090909;
    --angelos-gold: #a8874c;
    --bg: var(--angelos-ivory);
    --bg-elevated: var(--angelos-paper);
    --bg-elevated-strong: var(--angelos-paper);
    --text: var(--angelos-ink);
    --muted: #6b675f;
    --border: rgba(9, 9, 9, 0.14);
    --accent: var(--angelos-ink);
    --accent-soft: rgba(168, 135, 76, 0.12);
    --success: var(--angelos-gold);
    --warning: var(--angelos-gold);
    --danger: var(--angelos-gold);
    --shadow: 0 12px 34px rgba(9, 9, 9, 0.055);
}

[data-theme='dark'] {
    --bg: #090909;
    --bg-elevated: #12110f;
    --bg-elevated-strong: #171510;
    --text: #f7f4ed;
    --muted: #aaa49a;
    --border: rgba(247, 244, 237, 0.15);
    --accent: #c0a064;
    --accent-soft: rgba(192, 160, 100, 0.14);
    --success: #c0a064;
    --warning: #c0a064;
    --danger: #c0a064;
}

html,
body,
.admin-body,
.admin-auth-body {
    background: var(--bg);
}

body {
    background-image: none;
}

.classical-art {
    filter: grayscale(1) contrast(1.12);
    mix-blend-mode: multiply;
}

[data-theme='dark'] .classical-art {
    filter: grayscale(1) invert(1) contrast(1.08);
    mix-blend-mode: screen;
}

.eyebrow,
.pay-kicker,
.admin-auth-brand span {
    color: var(--angelos-gold);
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.panel-card,
.secondary-button,
.pill-button,
.field input,
.field select,
.field textarea,
.data-table,
.list-item,
.tag,
.search-field {
    border-color: var(--border);
    background-color: var(--bg-elevated);
    color: var(--text);
}

.primary-button {
    border-color: var(--angelos-ink);
    background: var(--angelos-ink);
    color: var(--angelos-ivory);
}

[data-theme='dark'] .primary-button {
    border-color: var(--angelos-gold);
    background: var(--angelos-gold);
    color: var(--angelos-ink);
}

.primary-button:hover,
.sidebar-link.is-active,
.sidebar-link:hover {
    border-color: var(--angelos-gold);
    background: var(--angelos-gold);
    color: var(--angelos-ink);
}

.tag,
.tag.subtle,
.flash-banner,
.error-banner,
.icon-badge {
    border-color: color-mix(in srgb, var(--angelos-gold) 45%, transparent);
    background: color-mix(in srgb, var(--angelos-gold) 15%, var(--bg-elevated));
    color: var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-field:focus-within {
    border-color: var(--angelos-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--angelos-gold) 18%, transparent);
}

.admin-sidebar {
    overflow: hidden;
    border-radius: 1.15rem;
}

.admin-sidebar > * {
    position: relative;
    z-index: 1;
}

.admin-sidebar-art {
    width: 100%;
    max-height: 7.5rem;
    margin: -0.25rem 0 0;
    object-fit: contain;
    opacity: 0.34;
}

.admin-illustrated-heading {
    position: relative;
    min-height: 9rem;
    overflow: hidden;
}

.admin-illustrated-heading > *:not(.classical-art) {
    position: relative;
    z-index: 1;
}

.admin-illustrated-heading > .classical-art {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 1.25rem;
    width: min(10.5rem, 24%);
    max-height: 9rem;
    object-fit: contain;
    opacity: 0.18;
    transform: translateY(-50%);
}

.metric-card {
    overflow: hidden;
}

.metric-art {
    position: absolute;
    right: -1.1rem;
    bottom: -1.8rem;
    width: 7rem;
    opacity: 0.11;
}

.data-table th {
    color: var(--muted);
}

.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--angelos-gold) 7%, transparent);
}

/* Desktop administrator entrance */
.admin-auth-brand {
    isolation: isolate;
    background: var(--angelos-ink);
    color: var(--angelos-ivory);
}

.admin-auth-brand::after {
    right: -13rem;
    bottom: -15rem;
    border-color: rgba(168, 135, 76, 0.4);
}

.admin-auth-brand > .admin-auth-classical-art {
    position: absolute;
    z-index: -1;
    top: 4%;
    right: -2%;
    width: min(82%, 42rem);
    height: 92%;
    margin: 0;
    object-fit: contain;
    object-position: right center;
    opacity: 0.34;
    filter: grayscale(1) invert(1) contrast(1.15);
    mix-blend-mode: screen;
}

.admin-auth-brand-inner {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}

.admin-auth-brand p {
    color: rgba(247, 244, 237, 0.72);
}

.admin-auth-panel,
[data-theme='dark'] .admin-auth-panel {
    background: var(--bg);
}

/* Client mobile surfaces */
.pay-client {
    --pay-green: var(--angelos-gold);
    --pay-green-bright: var(--angelos-gold);
    --pay-page: var(--angelos-ivory);
    --pay-card: var(--angelos-paper);
    --pay-ink: var(--angelos-ink);
    --pay-muted: #6b675f;
    --pay-line: rgba(9, 9, 9, 0.14);
    background: var(--pay-page);
}

.pay-header {
    border-color: var(--pay-line);
    background: color-mix(in srgb, var(--pay-page) 95%, transparent);
}

.pay-header-row {
    min-height: 5rem;
    padding-bottom: 0.7rem;
}

.pay-notification-badge {
    background: var(--angelos-gold);
    color: var(--angelos-ink);
}

.pay-balance-card,
.pay-feature-card,
.pay-space-list,
.pay-tabbar,
.pay-popover,
.pay-dialog-card,
.pay-search-summary,
.pay-flow-summary,
.pay-transaction-group,
.pay-no-results,
.pay-ledger-tabs,
.pay-ledger-tools {
    border-color: var(--pay-line);
    background: var(--pay-card);
}

.pay-balance-card-primary {
    border-top: 2px solid var(--angelos-gold);
}

.pay-feature-card {
    min-height: 12rem;
    padding-right: 8.5rem;
    border: 1px solid var(--pay-line);
    background: var(--pay-card);
}

.pay-feature-card::after {
    top: auto;
    right: 0;
    bottom: 0;
    width: 0.28rem;
    height: 100%;
    border-radius: 0;
    background: var(--angelos-gold);
}

.pay-feature-card > img.classical-art {
    right: -0.65rem;
    bottom: -0.7rem;
    width: 9.3rem;
    height: 9.3rem;
    border-radius: 0;
    object-fit: contain;
    opacity: 0.72;
}

.pay-feature-card p {
    color: var(--pay-muted);
}

.pay-feature-link span,
.pay-dark-button,
.pay-direction-filter a.is-active {
    border-color: var(--pay-ink);
    background: var(--pay-ink);
    color: var(--pay-page);
}

.pay-section-heading a,
.pay-pagination a,
.pay-menu-link:hover,
.pay-feature-link,
.pay-card-action:hover,
.pay-card-action:focus-visible {
    color: var(--angelos-gold);
}

.tone-green,
.tone-aqua,
.tone-orange,
.tone-violet,
.tone-pink,
.tone-blue,
.pay-notification-item button {
    background: color-mix(in srgb, var(--angelos-gold) 18%, var(--pay-card));
    color: var(--pay-ink);
}

.pay-space-balance.is-credit strong,
.pay-transaction-amount.is-credit strong,
.is-credit {
    color: var(--angelos-gold);
}

.pay-transaction-marker {
    background: var(--angelos-gold);
}

.pay-wealth-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.pay-wealth-notes article {
    position: relative;
    display: grid;
    min-height: 7rem;
    overflow: hidden;
    align-items: end;
    padding: 0.9rem;
    border: 1px solid var(--pay-line);
    border-radius: 1rem;
    background: var(--pay-card);
}

.pay-wealth-notes img {
    position: absolute;
    top: -0.85rem;
    right: -0.75rem;
    width: 6.6rem;
    opacity: 0.23;
}

.pay-wealth-notes div {
    position: relative;
    z-index: 1;
}

.pay-wealth-notes span,
.pay-wealth-notes strong {
    display: block;
}

.pay-wealth-notes span {
    color: var(--angelos-gold);
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pay-wealth-notes strong {
    max-width: 8rem;
    margin-top: 0.18rem;
    font-family: var(--font-serif);
    font-size: 0.92rem;
}

.pay-caught-up img.classical-art,
.pay-empty-mini img.classical-art {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0;
    object-fit: contain;
}

.pay-empty-mini img.classical-art {
    width: 6rem;
    height: 4.2rem;
}

.classical-dialog-art {
    width: 6.4rem;
    height: 5.7rem;
    margin: -0.5rem auto 0.4rem;
    object-fit: contain;
    filter: grayscale(1) contrast(1.12);
    mix-blend-mode: multiply;
}

[data-theme='dark'] .classical-dialog-art {
    filter: grayscale(1) invert(1) contrast(1.08);
    mix-blend-mode: screen;
}

.pay-security-card {
    background: color-mix(in srgb, var(--angelos-gold) 11%, var(--pay-card));
}

.pay-tab.is-active::before {
    background: var(--angelos-gold);
}

/* Payments ledger */
.pay-ledger-header {
    position: relative;
    overflow: hidden;
}

.pay-ledger-header > *:not(.pay-ledger-art) {
    position: relative;
    z-index: 1;
}

.pay-ledger-art {
    position: absolute;
    z-index: 0;
    right: -1.2rem;
    bottom: -1.6rem;
    width: 9rem;
    opacity: 0.1;
}

.pay-ledger-title img,
.pay-bank-card-brand img,
.pay-profile-row img {
    filter: grayscale(1) contrast(1.2);
}

.pay-activity-route .pay-transaction-icon {
    border-color: var(--pay-line);
    background: var(--pay-card);
}

.pay-no-results img.classical-art {
    width: 8rem;
    height: 7rem;
    border-radius: 0;
    object-fit: contain;
}

/* Black private-client card with antique-gold detailing */
.pay-card-stage {
    position: relative;
    overflow: hidden;
}

.pay-card-lion {
    position: absolute;
    z-index: 0;
    top: 0.4rem;
    right: -1.5rem;
    width: 11rem;
    opacity: 0.1;
}

.pay-card-stage > *:not(.pay-card-lion) {
    position: relative;
    z-index: 1;
}

.pay-bank-card {
    border: 1px solid color-mix(in srgb, var(--angelos-gold) 65%, transparent);
    background:
        radial-gradient(circle at 92% 8%, rgba(168, 135, 76, 0.24), transparent 35%),
        var(--angelos-ink);
    color: var(--angelos-ivory);
    box-shadow: 0 1.6rem 2.8rem rgba(9, 9, 9, 0.24);
}

.pay-bank-card::after {
    border-color: rgba(168, 135, 76, 0.34);
}

.pay-bank-card-state {
    border-color: var(--angelos-gold);
    color: var(--angelos-gold);
}

.pay-bank-card-brand img {
    outline: 1px solid var(--angelos-gold);
}

.pay-card-action:hover .pay-card-action-icon,
.pay-card-action:focus-visible .pay-card-action-icon {
    border-color: var(--angelos-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--angelos-gold) 17%, transparent);
}

/* Client sign in */
.pay-auth {
    --pay-green: var(--angelos-gold);
    --pay-mint: var(--angelos-gold);
    --pay-ink: var(--angelos-ink);
    background: var(--angelos-ink);
}

.pay-auth-shell {
    background: var(--angelos-ivory);
}

.pay-auth-brand {
    isolation: isolate;
    min-height: 43dvh;
    background: var(--angelos-ink);
    color: var(--angelos-ivory);
}

.pay-auth-classical-art {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.34;
    filter: grayscale(1) invert(1) contrast(1.2);
    mix-blend-mode: screen;
}

.pay-auth-logo {
    padding: 1rem 1.4rem;
    border: 1px solid rgba(168, 135, 76, 0.54);
    background: rgba(9, 9, 9, 0.7);
    backdrop-filter: blur(4px);
}

.pay-auth-logo img {
    filter: grayscale(1) contrast(1.2);
}

.pay-auth-logo span {
    color: rgba(247, 244, 237, 0.74);
}

.pay-login-panel {
    background: var(--angelos-paper);
}

.pay-faceid-button {
    background: var(--angelos-ink);
    color: var(--angelos-ivory);
}

.pay-login-form input[type='text'],
.pay-login-form input[type='email'],
.pay-login-form input[type='password'] {
    border-color: rgba(9, 9, 9, 0.25);
    background: var(--angelos-paper);
    color: var(--angelos-ink);
}

.pay-login-form input:focus {
    border-color: var(--angelos-gold);
    box-shadow: 0 0 0 3px rgba(168, 135, 76, 0.17);
}

.pay-remember input {
    accent-color: var(--angelos-gold);
}

.pay-auth-error,
.pay-auth-status {
    background: color-mix(in srgb, var(--angelos-gold) 14%, var(--angelos-paper));
    color: var(--angelos-ink);
}

/* Dark mode remains the same three-colour system */
[data-theme='dark'] .pay-client {
    --pay-green: #c0a064;
    --pay-green-bright: #c0a064;
    --pay-page: #090909;
    --pay-card: #14130f;
    --pay-ink: #f7f4ed;
    --pay-muted: #aaa49a;
    --pay-line: rgba(247, 244, 237, 0.15);
    background: var(--pay-page);
    color: var(--pay-ink);
}

.pay-auth,
.pay-auth-shell,
.pay-auth-brand {
    --pay-green: var(--palette-navy);
    --pay-mint: var(--palette-slate);
    --pay-ink: var(--palette-navy);
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

.pay-login-panel {
    border-top-color: color-mix(in srgb, var(--palette-mist) 46%, transparent);
    background: var(--palette-white);
    color: var(--palette-navy);
}

.pay-faceid-button,
.pay-dark-button {
    border-color: var(--palette-navy);
    background: var(--palette-navy);
    color: var(--palette-white) !important;
}

.admin-auth-brand {
    background: var(--palette-navy);
    color: var(--palette-white);
}

[data-theme='dark'] .pay-auth,
[data-theme='dark'] .pay-auth-shell,
[data-theme='dark'] .pay-auth-brand {
    --pay-green: var(--palette-cloud);
    --pay-mint: var(--palette-mist);
    --pay-ink: var(--palette-white);
    background: var(--palette-navy);
    color: var(--palette-white);
}

[data-theme='dark'] .pay-login-panel {
    border-top-color: color-mix(in srgb, var(--palette-mist) 42%, transparent);
    background: color-mix(in srgb, var(--palette-navy) 84%, var(--palette-slate));
    color: var(--palette-white);
}

[data-theme='dark'] .pay-faceid-button,
[data-theme='dark'] .pay-dark-button {
    border-color: var(--palette-cloud);
    background: var(--palette-cloud);
    color: var(--palette-navy) !important;
}

[data-theme='dark'] .pay-header {
    background: rgba(9, 9, 9, 0.95);
}

[data-theme='dark'] .pay-dark-button,
[data-theme='dark'] .pay-faceid-button {
    border-color: var(--angelos-gold);
    background: var(--angelos-gold);
    color: var(--angelos-ink) !important;
}

[data-theme='dark'] .pay-outline-button {
    border-color: var(--pay-ink);
}

[data-theme='dark'] .pay-security-card,
[data-theme='dark'] .pay-notification-item button,
[data-theme='dark'] .pay-flash,
[data-theme='dark'] .pay-auth-error,
[data-theme='dark'] .pay-auth-status {
    background: color-mix(in srgb, var(--angelos-gold) 16%, var(--pay-card));
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-dialog-close,
[data-theme='dark'] .pay-transaction-icon {
    background: var(--pay-card);
}

[data-theme='dark'] .pay-auth {
    --pay-green: #c0a064;
    --pay-mint: #c0a064;
    --pay-ink: #f7f4ed;
    background: #090909;
}

[data-theme='dark'] .pay-auth-shell,
[data-theme='dark'] .pay-login-panel {
    background: #12110f;
}

[data-theme='dark'] .pay-login-form input[type='text'],
[data-theme='dark'] .pay-login-form input[type='email'],
[data-theme='dark'] .pay-login-form input[type='password'] {
    border-color: rgba(247, 244, 237, 0.22);
    background: #090909;
    color: #f7f4ed;
}

[data-theme='dark'] .pay-login-heading p,
[data-theme='dark'] .pay-security-message,
[data-theme='dark'] .pay-login-help,
[data-theme='dark'] .pay-local-preview {
    color: #aaa49a;
}

@media (min-width: 541px) {
    .pay-client {
        background:
            linear-gradient(90deg, #ebe6da calc(50% - 270px), var(--pay-page) calc(50% - 270px), var(--pay-page) calc(50% + 270px), #ebe6da calc(50% + 270px));
    }

    .pay-client::before,
    .pay-auth::before {
        background: #ebe6da;
    }

    [data-theme='dark'] .pay-client {
        background:
            linear-gradient(90deg, #050505 calc(50% - 270px), var(--pay-page) calc(50% - 270px), var(--pay-page) calc(50% + 270px), #050505 calc(50% + 270px));
    }

    [data-theme='dark'] .pay-client::before,
    [data-theme='dark'] .pay-auth::before {
        background: #050505;
    }
}

@media (max-width: 900px) {
    .admin-illustrated-heading > .classical-art {
        width: 8rem;
        opacity: 0.12;
    }

    .admin-auth-brand > .admin-auth-classical-art {
        top: -8%;
        right: 0;
        width: 60%;
        height: 115%;
    }
}

@media (max-width: 390px) {
    .pay-feature-card {
        padding-right: 6.5rem;
    }

    .pay-feature-card > img.classical-art {
        right: -1.5rem;
        width: 8rem;
        height: 8rem;
    }

    .pay-wealth-notes {
        grid-template-columns: 1fr;
    }

    .pay-wealth-notes article {
        min-height: 5.6rem;
    }
}

.legacy-wallet-key {
    display: grid;
    gap: 0.4rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.legacy-wallet-key code {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 0.78rem;
}

[data-theme='dark'] .legacy-wallet-key {
    border-color: var(--border);
}

@media (max-width: 370px) {
    .pay-header-row,
    .pay-page-shell {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .pay-space-row {
        grid-template-columns: 2.7rem minmax(0, 1fr) auto 0.65rem;
        gap: 0.55rem;
    }

    .pay-space-icon,
    .pay-transaction-icon {
        width: 2.7rem;
        height: 2.7rem;
    }

    .pay-space-balance small,
    .pay-transaction-amount small {
        display: none;
    }

    .pay-feature-card {
        padding-right: 5.6rem;
    }

    .pay-feature-card img {
        width: 3.2rem;
        height: 3.2rem;
    }

    .pay-flow-summary {
        grid-template-columns: 1fr;
    }

    .pay-flow-summary > div {
        border-right: 0;
        border-bottom: 1px solid var(--pay-line);
    }

    .pay-flow-summary > div:last-child {
        border-bottom: 0;
    }
}

/* Payments ledger refresh */
.pay-activity-route .pay-header {
    position: static;
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
}

.pay-activity-route .pay-header-row,
.pay-activity-route .pay-segment-scroll {
    display: none;
}

.pay-activity-route .pay-page-shell {
    min-height: calc(100dvh - 5rem);
    padding-top: 0;
}

.pay-activity-route .pay-activity {
    gap: 0;
    margin: 0 -1rem;
}

.pay-ledger-header {
    border-bottom: 0.7rem solid var(--pay-page);
    background: var(--pay-page);
}

.pay-ledger-toolbar {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 5rem;
    padding: max(0.9rem, env(safe-area-inset-top)) 1rem 0.7rem;
}

.pay-ledger-back {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    font-family: Arial, sans-serif;
    font-size: 1.8rem;
    line-height: 1;
}

.pay-ledger-title {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

.pay-ledger-title img {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
}

.pay-ledger-title span,
.pay-ledger-title strong,
.pay-ledger-title small {
    display: block;
    min-width: 0;
}

.pay-ledger-title strong {
    overflow: hidden;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-ledger-title small {
    margin-top: 0.08rem;
    color: var(--pay-muted);
    font-size: 0.65rem;
}

.pay-ledger-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.pay-ledger-toolbar-actions button {
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
}

.pay-ledger-toolbar-actions button:nth-child(-n+2) {
    border: 1.5px solid currentColor;
}

.pay-ledger-toolbar-actions button:last-child {
    width: 2.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.pay-ledger-balances {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 1rem;
    padding: 1rem 1rem 1.25rem;
}

.pay-ledger-balances > div {
    min-width: 0;
}

.pay-ledger-balances strong,
.pay-ledger-balances span {
    display: block;
}

.pay-ledger-balances strong {
    overflow: hidden;
    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 7.2vw, 2.35rem);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-ledger-balances > div:last-child strong {
    font-size: clamp(1.25rem, 5.5vw, 1.85rem);
}

.pay-ledger-balances span {
    margin-top: 0.35rem;
    font-size: 0.77rem;
}

.pay-ledger-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--pay-line);
    background: var(--pay-card);
}

.pay-ledger-tabs a {
    display: grid;
    min-height: 3.8rem;
    place-items: center;
    border-bottom: 3px solid transparent;
    font-size: 1rem;
    font-weight: 760;
}

.pay-ledger-tabs a.is-active {
    border-bottom-color: var(--pay-ink);
}

.pay-ledger-tools {
    display: flex;
    min-height: 4.4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 0.7rem solid var(--pay-page);
    background: var(--pay-card);
}

.pay-activity-route .pay-direction-filter a {
    min-width: 4.15rem;
    min-height: 2.8rem;
    border-radius: 0.7rem;
    font-size: 0.95rem;
}

.pay-activity-route .pay-tool-actions {
    gap: 0.25rem;
}

.pay-activity-route .pay-tool-actions a,
.pay-activity-route .pay-tool-actions button {
    width: 2.8rem;
    height: 2.8rem;
}

.pay-activity-route .pay-tool-actions svg {
    width: 1.75rem;
    height: 1.75rem;
}

.pay-activity-route .pay-search-summary {
    margin: 0 1rem 0.7rem;
    background: var(--pay-card);
}

.pay-activity-route .pay-transaction-groups {
    gap: 0.7rem;
    margin: 0;
    background: var(--pay-page);
}

.pay-activity-route .pay-transaction-group {
    background: var(--pay-card);
}

.pay-activity-route .pay-transaction-group h2 {
    padding: 0.85rem 1rem;
    border-bottom-color: var(--pay-line);
    background: var(--pay-card);
    font-family: var(--font-sans);
    font-size: 0.96rem;
    font-weight: 790;
}

.pay-activity-route .pay-transaction-row {
    grid-template-columns: 3rem minmax(0, 1fr) auto 0.7rem;
    gap: 0.7rem;
    min-height: 5.15rem;
    border-bottom-color: var(--pay-line);
}

.pay-activity-route .pay-transaction-icon {
    border-color: var(--pay-line);
    background: var(--pay-card);
    font-family: var(--font-serif);
    font-size: 1rem;
}

.pay-activity-route .pay-transaction-copy small {
    color: var(--pay-muted);
}

.pay-activity-route .pay-transaction-amount {
    min-width: 6.8rem;
}

.pay-activity-route .pay-transaction-amount strong {
    font-size: 1rem;
}

.pay-activity-route .pay-transaction-amount small {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.72rem;
}

.pay-activity-route .pay-transaction-marker {
    top: 0.95rem;
    bottom: 0.95rem;
    left: -0.85rem;
}

.pay-activity-route .pay-no-results {
    margin: 0;
    border-radius: 0;
    background: var(--pay-card);
}

.pay-activity-route .pay-pagination {
    padding: 1rem;
}

/* Card management */
.pay-card-route {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

.pay-card-route .pay-header {
    position: static;
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
}

.pay-card-route .pay-header-row,
.pay-card-route .pay-segment-scroll {
    display: none;
}

.pay-card-route .pay-page-shell {
    min-height: calc(100dvh - 5rem);
    padding: 0 0 2.5rem;
}

.pay-card-management {
    min-height: calc(100dvh - 5rem - env(safe-area-inset-bottom));
    background: var(--pay-card);
}

.pay-card-titlebar {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    min-height: 5.2rem;
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.55rem;
    background: var(--pay-page);
}

.pay-card-titlebar h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 7vw, 2rem);
    line-height: 1;
    text-align: center;
}

.pay-card-back {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    line-height: 1;
}

.pay-card-stage {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    padding: 2rem 1.35rem 1.7rem;
    background: var(--pay-page);
}

.pay-bank-card {
    position: relative;
    display: grid;
    width: min(100%, 25rem);
    aspect-ratio: 1.64 / 1;
    overflow: hidden;
    padding: 1.15rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 0.85rem;
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.25), transparent 34%),
        linear-gradient(145deg, #18bf82 0%, #10aa72 100%);
    color: #05100b;
    box-shadow: 0 1.6rem 2.8rem rgba(8, 55, 39, 0.2);
}

.pay-bank-card::after {
    content: "";
    position: absolute;
    right: -20%;
    bottom: -45%;
    width: 75%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
}

.pay-bank-card-topline,
.pay-bank-card-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.pay-bank-card-brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.pay-bank-card-brand img {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
}

.pay-bank-card-state {
    padding: 0.28rem 0.48rem;
    border: 1px solid rgba(5, 16, 11, 0.22);
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pay-bank-card-number {
    position: relative;
    z-index: 1;
    align-self: end;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: clamp(1rem, 4.7vw, 1.32rem);
    font-weight: 750;
    letter-spacing: 0.035em;
}

.pay-bank-card-bottom {
    align-items: end;
}

.pay-bank-card-bottom span,
.pay-bank-card-bottom strong {
    display: block;
}

.pay-bank-card-bottom > div:first-child span {
    margin-bottom: 0.2rem;
    font-size: 0.52rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pay-bank-card-bottom > div:first-child strong {
    max-width: 14rem;
    overflow: hidden;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-bank-card-network {
    text-align: right;
}

.pay-bank-card-network strong {
    font-size: 1.38rem;
    font-style: italic;
    letter-spacing: -0.06em;
    line-height: 0.85;
}

.pay-bank-card-network span {
    margin-top: 0.15rem;
    font-size: 0.56rem;
}

.pay-card-type {
    font-size: 1.02rem;
    font-weight: 650;
}

.pay-card-balance {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    color: var(--pay-muted);
    font-size: 0.72rem;
}

.pay-card-balance strong {
    color: var(--pay-ink);
    font-size: 0.85rem;
}

.pay-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 2.1rem 1rem 1.35rem;
    background: var(--pay-card);
}

.pay-card-action {
    display: grid;
    min-width: 0;
    justify-items: center;
    align-content: start;
    gap: 0.65rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pay-ink);
    text-align: center;
}

.pay-card-action-icon {
    display: grid;
    width: 3.8rem;
    height: 3.8rem;
    place-items: center;
    border: 2px solid var(--pay-line);
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.pay-card-alert-icon {
    font-family: Georgia, serif;
    font-size: 1.65rem;
}

.pay-card-action strong {
    max-width: 7rem;
    font-size: 0.78rem;
    font-weight: 680;
    line-height: 1.25;
}

.pay-card-action:focus-visible .pay-card-action-icon,
.pay-card-action:hover .pay-card-action-icon {
    border-color: var(--pay-green);
    box-shadow: 0 0 0 3px rgba(18, 106, 82, 0.12);
}

.pay-card-ineligible {
    display: grid;
    gap: 0.35rem;
    margin: 1.2rem 1rem 0;
    padding: 1rem;
    border: 1px solid var(--pay-line);
    border-radius: 0.9rem;
    background: var(--pay-page);
    text-align: center;
}

.pay-card-ineligible span {
    font-size: 1rem;
    font-weight: 850;
}

.pay-card-ineligible p,
.pay-card-security-note {
    margin: 0;
    color: var(--pay-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.pay-card-security-note {
    padding: 0 1.5rem 1.5rem;
    text-align: center;
}

.pay-card-management.is-ineligible .pay-bank-card {
    filter: grayscale(1);
    opacity: 0.45;
    box-shadow: none;
}

.pay-card-management.is-ineligible .pay-card-type,
.pay-card-management.is-ineligible .pay-card-balance,
.pay-card-management.is-ineligible .pay-card-actions {
    color: var(--pay-muted);
    opacity: 0.48;
}

.pay-card-management.is-ineligible .pay-card-balance strong,
.pay-card-management.is-ineligible .pay-card-action {
    color: var(--pay-muted);
}

.pay-card-action:disabled,
.pay-card-action.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.pay-card-dialog .pay-dialog-card {
    width: min(100%, 28rem);
}

.pay-card-detail-list {
    display: grid;
    gap: 0;
    overflow: hidden;
    margin: 1rem 0;
    border: 1px solid var(--pay-line);
    border-radius: 0.85rem;
}

.pay-card-detail-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--pay-line);
}

.pay-card-detail-list > div:last-child {
    border-bottom: 0;
}

.pay-card-detail-list dt {
    color: var(--pay-muted);
    font-size: 0.72rem;
}

.pay-card-detail-list dd {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 780;
    text-align: right;
}

.pay-card-pin {
    margin: 1rem 0;
    padding: 1.15rem;
    border-radius: 0.85rem;
    background: var(--pay-page);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 1.8rem;
    font-weight: 850;
    letter-spacing: 0.35em;
    text-align: center;
}

.pay-card-empty-detail {
    display: grid;
    gap: 0.35rem;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 0.85rem;
    background: var(--pay-page);
}

.pay-card-empty-detail p {
    margin: 0;
    color: var(--pay-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

/* Full Angelos Pay dark theme */
[data-theme='dark'] .pay-client {
    --pay-green: #68dfa9;
    --pay-green-bright: #36e486;
    --pay-page: #0c1110;
    --pay-card: #151c1a;
    --pay-ink: #f2f6f4;
    --pay-muted: #9ba7a2;
    --pay-line: #2b3632;
    background: var(--pay-page);
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-header {
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(12, 17, 16, 0.96);
}

[data-theme='dark'] .pay-segment.is-active,
[data-theme='dark'] .pay-direction-filter a.is-active {
    background: var(--pay-ink);
    color: var(--pay-page);
}

[data-theme='dark'] .pay-balance-card,
[data-theme='dark'] .pay-feature-card,
[data-theme='dark'] .pay-space-list,
[data-theme='dark'] .pay-tabbar,
[data-theme='dark'] .pay-popover,
[data-theme='dark'] .pay-dialog,
[data-theme='dark'] .pay-search-summary,
[data-theme='dark'] .pay-flow-summary,
[data-theme='dark'] .pay-transaction-group,
[data-theme='dark'] .pay-no-results,
[data-theme='dark'] .pay-ledger-tabs,
[data-theme='dark'] .pay-ledger-tools {
    border-color: var(--pay-line);
    background: var(--pay-card);
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-card-management,
[data-theme='dark'] .pay-card-actions {
    background: var(--pay-card);
}

[data-theme='dark'] .pay-card-titlebar,
[data-theme='dark'] .pay-card-stage,
[data-theme='dark'] .pay-card-ineligible,
[data-theme='dark'] .pay-card-pin,
[data-theme='dark'] .pay-card-empty-detail {
    background: var(--pay-page);
}

[data-theme='dark'] .pay-bank-card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1.6rem 2.8rem rgba(0, 0, 0, 0.34);
}

/* Desktop administration sign in */
.admin-auth-body {
    min-width: 720px;
    min-height: 100vh;
    background: #f3f4f8;
}

.admin-auth-shell {
    display: grid;
    grid-template-columns: minmax(22rem, 0.95fr) minmax(30rem, 1.05fr);
    min-height: 100vh;
}

.admin-auth-brand {
    position: relative;
    display: grid;
    overflow: hidden;
    align-items: end;
    padding: clamp(3rem, 7vw, 6rem);
    background:
        radial-gradient(circle at 90% 10%, rgba(100, 225, 169, 0.24), transparent 34%),
        linear-gradient(145deg, #071a14 0%, #0c4b39 100%);
    color: #fff;
}

.admin-auth-brand::after {
    content: "";
    position: absolute;
    right: -16rem;
    bottom: -20rem;
    width: 42rem;
    height: 42rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.admin-auth-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 34rem;
}

.admin-auth-brand img {
    width: 12rem;
    margin-bottom: clamp(3rem, 11vh, 8rem);
}

.admin-auth-brand span {
    color: #79e2b4;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.admin-auth-brand h1 {
    margin: 0.8rem 0 1rem;
    font-family: var(--font-serif);
    font-size: clamp(2.3rem, 4.4vw, 4.6rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.admin-auth-brand p {
    max-width: 31rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.admin-auth-panel {
    display: grid;
    place-items: center;
    padding: 4rem;
    background: var(--bg);
}

.admin-auth-form-wrap {
    width: min(100%, 30rem);
}

.admin-auth-form-wrap h2 {
    margin: 0.55rem 0 0.7rem;
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 600;
}

.admin-auth-form-wrap > p {
    margin: 0 0 2rem;
    line-height: 1.55;
}

.admin-auth-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.admin-auth-form .primary-button {
    min-height: 3.2rem;
    margin-top: 0.4rem;
}

.admin-auth-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.76rem;
}

.admin-auth-footer a:hover {
    color: var(--text);
}

[data-theme='dark'] .admin-auth-body,
[data-theme='dark'] .admin-auth-panel {
    background: #0c0f13;
}

@media (max-width: 900px) {
    .admin-auth-body {
        min-width: 320px;
    }

    .admin-auth-shell {
        grid-template-columns: 1fr;
    }

    .admin-auth-brand {
        min-height: 20rem;
        padding: 2.5rem;
    }

    .admin-auth-brand img {
        margin-bottom: 3.5rem;
    }

    .admin-auth-brand h1 {
        max-width: 35rem;
        font-size: 2.5rem;
    }

    .admin-auth-panel {
        padding: 3rem 1.5rem;
    }
}

[data-theme='dark'] .pay-tabbar {
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22);
}

[data-theme='dark'] .pay-popover,
[data-theme='dark'] .pay-dialog {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

[data-theme='dark'] .pay-feature-card p,
[data-theme='dark'] .pay-security-card p,
[data-theme='dark'] .pay-transaction-copy small {
    color: var(--pay-muted);
}

[data-theme='dark'] .pay-security-card {
    background: #172b24;
}

[data-theme='dark'] .pay-notification-item button {
    background: #183128;
    color: var(--pay-green);
}

[data-theme='dark'] .pay-dark-button {
    border-color: #e9f2ee;
    background: #e9f2ee;
    color: #0c1110 !important;
}

[data-theme='dark'] .pay-outline-button {
    border-color: var(--pay-ink);
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-flash {
    background: #17372b;
    color: #8af0bd;
}

[data-theme='dark'] .pay-dialog-close {
    background: #26312d;
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-dialog-search input,
[data-theme='dark'] .pay-login-form input[type='text'],
[data-theme='dark'] .pay-login-form input[type='email'],
[data-theme='dark'] .pay-login-form input[type='password'] {
    border-color: #3a4742;
    background: #111715;
    color: #f2f6f4;
}

[data-theme='dark'] .pay-dialog-search input::placeholder,
[data-theme='dark'] .pay-login-form input::placeholder {
    color: #83908a;
}

[data-theme='dark'] .pay-transaction-icon {
    border-color: var(--pay-line);
    background: #19211e;
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-auth {
    --pay-green: #0f684e;
    --pay-mint: #3aa877;
    --pay-ink: #f2f6f4;
    background: #0c1110;
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-auth-shell,
[data-theme='dark'] .pay-login-panel {
    background: #121917;
}

[data-theme='dark'] .pay-login-heading p,
[data-theme='dark'] .pay-security-message,
[data-theme='dark'] .pay-login-help,
[data-theme='dark'] .pay-local-preview {
    color: #9ba7a2;
}

[data-theme='dark'] .pay-auth-divider {
    color: #829089;
}

[data-theme='dark'] .pay-auth-divider::before,
[data-theme='dark'] .pay-auth-divider::after {
    background: #2b3632;
}

[data-theme='dark'] .pay-auth-error {
    background: #3a1d25;
    color: #ff9aae;
}

[data-theme='dark'] .pay-auth-status {
    background: #17372b;
    color: #8af0bd;
}

[data-theme='dark'] .pay-faceid-button {
    background: #eef4f1;
    color: #0c1110;
}

[data-theme='dark'] .pay-local-preview {
    border-color: #2b3632;
}

@media (min-width: 541px) {
    [data-theme='dark'] .pay-client {
        background:
            linear-gradient(90deg, #070a09 calc(50% - 270px), var(--pay-page) calc(50% - 270px), var(--pay-page) calc(50% + 270px), #070a09 calc(50% + 270px));
    }

    [data-theme='dark'] .pay-client::before,
    [data-theme='dark'] .pay-auth::before {
        background: #070a09;
    }

    [data-theme='dark'] .pay-header,
    [data-theme='dark'] .pay-tabbar {
        border-right-color: rgba(255, 255, 255, 0.07);
        border-left-color: rgba(255, 255, 255, 0.07);
    }
}

/* Final cascade normalization for the classical palette */
.pay-client,
.pay-auth {
    overflow-x: hidden;
    min-height: 100dvh;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.pay-client *,
.pay-auth * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.pay-client a,
.pay-client button,
.pay-client [role='button'],
.pay-auth a,
.pay-auth button,
.pay-auth [role='button'] {
    touch-action: manipulation;
}

.pay-client img,
.pay-auth img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.pay-client input,
.pay-client textarea,
.pay-client select,
.pay-client [contenteditable='true'],
.pay-auth input,
.pay-auth textarea,
.pay-auth select,
.pay-auth [contenteditable='true'] {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
}

.pay-auth,
.pay-auth-shell,
.pay-auth-brand {
    background: var(--angelos-ivory);
}

.pay-auth-brand {
    min-height: 13rem;
    padding: max(2.25rem, env(safe-area-inset-top)) 1.25rem 1.8rem;
    color: var(--angelos-ink);
}

.pay-auth-logo {
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

.pay-auth-logo img {
    width: clamp(5.25rem, 24vw, 6.5rem);
    height: clamp(5.25rem, 24vw, 6.5rem);
    filter: grayscale(1) contrast(1.2);
}

.pay-login-panel {
    margin-top: 0;
    border-top: 1px solid rgba(9, 9, 9, 0.12);
    border-radius: 1.4rem 1.4rem 0 0;
}

[data-theme='dark'] .pay-auth-brand {
    background: #090909;
    color: #f7f4ed;
}

[data-theme='dark'] .pay-auth-logo img {
    filter: grayscale(1) contrast(1.1);
}

[data-theme='dark'] .pay-login-panel {
    border-top-color: rgba(247, 244, 237, 0.14);
}

[data-theme='dark'] {
    --bg: #090909;
    --bg-elevated: #12110f;
    --bg-elevated-strong: #171510;
    --text: #f7f4ed;
    --muted: #aaa49a;
    --border: rgba(247, 244, 237, 0.15);
    --accent: #c0a064;
    --success: #c0a064;
    --warning: #c0a064;
    --danger: #c0a064;
}

.pay-bank-card {
    border-color: color-mix(in srgb, var(--angelos-gold) 65%, transparent);
    background:
        radial-gradient(circle at 92% 8%, rgba(168, 135, 76, 0.24), transparent 35%),
        var(--angelos-ink);
    color: var(--angelos-ivory);
    box-shadow: 0 1.6rem 2.8rem rgba(9, 9, 9, 0.24);
}

.pay-bank-card::after {
    border-color: rgba(168, 135, 76, 0.34);
}

.pay-bank-card-state {
    border-color: var(--angelos-gold);
    color: var(--angelos-gold);
}

.pay-card-stage {
    position: relative;
    overflow: hidden;
}

.pay-card-lion {
    position: absolute;
    z-index: 0;
    top: 0.4rem;
    right: -1.5rem;
    width: 11rem;
    opacity: 0.1;
}

.pay-card-stage > *:not(.pay-card-lion) {
    position: relative;
    z-index: 1;
}

.admin-auth-brand {
    isolation: isolate;
    background: var(--angelos-ink);
    color: var(--angelos-ivory);
}

.admin-auth-brand::after {
    right: -13rem;
    bottom: -15rem;
    border-color: rgba(168, 135, 76, 0.4);
}

.admin-auth-brand > .admin-auth-classical-art {
    position: absolute;
    z-index: -1;
    top: 4%;
    right: -2%;
    width: min(82%, 42rem);
    height: 92%;
    margin: 0;
    object-fit: contain;
    object-position: right center;
    opacity: 0.34;
    filter: grayscale(1) invert(1) contrast(1.15);
    mix-blend-mode: screen;
}

.admin-auth-brand p {
    color: rgba(247, 244, 237, 0.72);
}

.admin-auth-brand span {
    color: var(--angelos-gold);
}

input[type='checkbox'],
input[type='radio'] {
    accent-color: var(--angelos-gold);
}

.pay-menu-logout,
.pay-security-card [data-tone='error'],
.pay-security-card [data-tone='success'],
.pay-security-message[data-tone='error'],
.pay-security-message[data-tone='success'] {
    color: var(--angelos-gold) !important;
}

.admin-auth-panel,
[data-theme='dark'] .admin-auth-body,
[data-theme='dark'] .admin-auth-panel {
    background: var(--bg);
}

[data-theme='dark'] .pay-client {
    --pay-green: #c0a064;
    --pay-green-bright: #c0a064;
    --pay-page: #090909;
    --pay-card: #14130f;
    --pay-ink: #f7f4ed;
    --pay-muted: #aaa49a;
    --pay-line: rgba(247, 244, 237, 0.15);
    background: var(--pay-page);
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-header {
    border-color: var(--pay-line);
    background: rgba(9, 9, 9, 0.95);
}

[data-theme='dark'] .pay-balance-card,
[data-theme='dark'] .pay-feature-card,
[data-theme='dark'] .pay-space-list,
[data-theme='dark'] .pay-tabbar,
[data-theme='dark'] .pay-popover,
[data-theme='dark'] .pay-dialog,
[data-theme='dark'] .pay-search-summary,
[data-theme='dark'] .pay-flow-summary,
[data-theme='dark'] .pay-transaction-group,
[data-theme='dark'] .pay-no-results,
[data-theme='dark'] .pay-ledger-tabs,
[data-theme='dark'] .pay-ledger-tools {
    border-color: var(--pay-line);
    background: var(--pay-card);
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-card-management,
[data-theme='dark'] .pay-card-actions {
    background: var(--pay-card);
}

[data-theme='dark'] .pay-card-titlebar,
[data-theme='dark'] .pay-card-stage,
[data-theme='dark'] .pay-card-ineligible,
[data-theme='dark'] .pay-card-pin,
[data-theme='dark'] .pay-card-empty-detail {
    background: var(--pay-page);
}

[data-theme='dark'] .pay-bank-card {
    border-color: #c0a064;
    background:
        radial-gradient(circle at 92% 8%, rgba(192, 160, 100, 0.24), transparent 35%),
        #090909;
    color: #f7f4ed;
}

[data-theme='dark'] .pay-dark-button,
[data-theme='dark'] .pay-faceid-button {
    border-color: var(--angelos-gold);
    background: var(--angelos-gold);
    color: var(--angelos-ink) !important;
}

[data-theme='dark'] .pay-security-card,
[data-theme='dark'] .pay-notification-item button,
[data-theme='dark'] .pay-flash,
[data-theme='dark'] .pay-auth-error,
[data-theme='dark'] .pay-auth-status {
    background: color-mix(in srgb, var(--angelos-gold) 16%, var(--pay-card));
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-auth {
    --pay-green: #c0a064;
    --pay-mint: #c0a064;
    --pay-ink: #f7f4ed;
    background: #090909;
    color: var(--pay-ink);
}

[data-theme='dark'] .pay-auth-shell,
[data-theme='dark'] .pay-login-panel {
    background: #12110f;
}

[data-theme='dark'] .pay-login-form input[type='text'],
[data-theme='dark'] .pay-login-form input[type='email'],
[data-theme='dark'] .pay-login-form input[type='password'] {
    border-color: rgba(247, 244, 237, 0.22);
    background: #090909;
    color: #f7f4ed;
}

[data-theme='dark'] .pay-login-heading p,
[data-theme='dark'] .pay-security-message,
[data-theme='dark'] .pay-login-help,
[data-theme='dark'] .pay-local-preview {
    color: #aaa49a;
}

@media (min-width: 541px) {
    [data-theme='dark'] .pay-client {
        background:
            linear-gradient(90deg, #050505 calc(50% - 270px), var(--pay-page) calc(50% - 270px), var(--pay-page) calc(50% + 270px), #050505 calc(50% + 270px));
    }

    [data-theme='dark'] .pay-client::before,
    [data-theme='dark'] .pay-auth::before {
        background: #050505;
    }
}

/* Numeric values keep the product type scale while using the approved face. */
.numeric-font,
.sensitive,
.metric-value,
.metric-inline,
.membership-stat,
.account-balance,
.flow-values,
.pay-balance-card > strong,
.pay-space-balance,
.pay-transaction-amount,
.pay-ledger-balances strong,
.pay-card-balance strong,
.pay-bank-card-number,
.pay-card-pin,
.pay-notification-badge,
input[type='number'] {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums slashed-zero;
}

/* Popovers and dialogs retain context while obscuring the inactive screen. */
.pay-client::after {
    position: fixed;
    z-index: 70;
    inset: 0;
    background: rgba(9, 9, 9, 0.16);
    opacity: 0;
    pointer-events: none;
    content: "";
    -webkit-backdrop-filter: saturate(115%) blur(18px);
    backdrop-filter: saturate(115%) blur(18px);
    transition: opacity 180ms ease;
}

.pay-client.has-pay-panel-open::after {
    opacity: 1;
    pointer-events: auto;
}

.pay-popover {
    z-index: 80;
    background: color-mix(in srgb, var(--pay-card) 88%, transparent);
    -webkit-backdrop-filter: saturate(120%) blur(28px);
    backdrop-filter: saturate(120%) blur(28px);
}

[data-theme='dark'] .pay-client::after {
    background: rgba(0, 0, 0, 0.28);
}

/* Slate private-banking palette */
:root {
    --palette-navy: #0f1011;
    --palette-slate: #5b5b63;
    --palette-mist: #aaadb0;
    --palette-cloud: #f5f5f7;
    --palette-white: #ffffff;
    --angelos-ivory: var(--palette-cloud);
    --angelos-paper: var(--palette-white);
    --angelos-ink: var(--palette-navy);
    --angelos-gold: var(--palette-navy);
    --bg: var(--palette-cloud);
    --bg-elevated: var(--palette-white);
    --bg-elevated-strong: var(--palette-white);
    --text: var(--palette-navy);
    --muted: var(--palette-slate);
    --border: color-mix(in srgb, var(--palette-mist) 54%, transparent);
    --accent: var(--palette-navy);
    --accent-soft: color-mix(in srgb, var(--palette-mist) 22%, transparent);
    --success: var(--palette-slate);
    --warning: var(--palette-slate);
    --danger: var(--palette-slate);
    --shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

[data-theme='dark'] {
    --angelos-ivory: var(--palette-navy);
    --angelos-paper: color-mix(in srgb, var(--palette-navy) 84%, var(--palette-slate));
    --angelos-ink: var(--palette-white);
    --angelos-gold: var(--palette-cloud);
    --bg: var(--palette-navy);
    --bg-elevated: color-mix(in srgb, var(--palette-navy) 84%, var(--palette-slate));
    --bg-elevated-strong: color-mix(in srgb, var(--palette-navy) 76%, var(--palette-slate));
    --text: var(--palette-white);
    --muted: var(--palette-mist);
    --border: color-mix(in srgb, var(--palette-mist) 40%, transparent);
    --accent: var(--palette-cloud);
    --accent-soft: color-mix(in srgb, var(--palette-mist) 18%, transparent);
    --success: var(--palette-cloud);
    --warning: var(--palette-cloud);
    --danger: var(--palette-cloud);
}

.pay-client {
    --pay-green: var(--palette-navy);
    --pay-green-bright: var(--palette-navy);
    --pay-page: var(--palette-cloud);
    --pay-card: var(--palette-white);
    --pay-ink: var(--palette-navy);
    --pay-muted: var(--palette-slate);
    --pay-line: color-mix(in srgb, var(--palette-mist) 46%, transparent);
    background: var(--pay-page);
}

[data-theme='dark'] .pay-client {
    --pay-green: var(--palette-cloud);
    --pay-green-bright: var(--palette-cloud);
    --pay-page: var(--palette-navy);
    --pay-card: color-mix(in srgb, var(--palette-navy) 84%, var(--palette-slate));
    --pay-ink: var(--palette-white);
    --pay-muted: var(--palette-mist);
    --pay-line: color-mix(in srgb, var(--palette-mist) 42%, transparent);
    background: var(--pay-page);
    color: var(--pay-ink);
}

.pay-header {
    background: color-mix(in srgb, var(--palette-white) 88%, transparent);
}

[data-theme='dark'] .pay-header {
    background: color-mix(in srgb, var(--palette-navy) 88%, transparent);
}

.pay-tabbar {
    background: color-mix(in srgb, var(--palette-white) 88%, transparent);
    -webkit-backdrop-filter: saturate(115%) blur(28px);
    backdrop-filter: saturate(115%) blur(28px);
}

[data-theme='dark'] .pay-tabbar {
    background: color-mix(in srgb, var(--palette-navy) 88%, transparent);
}

.pay-tab.is-active::before,
.pay-transaction-marker,
.pay-feature-card::after {
    border-color: var(--palette-navy);
    background: var(--palette-navy);
}

[data-theme='dark'] .pay-tab.is-active::before,
[data-theme='dark'] .pay-transaction-marker,
[data-theme='dark'] .pay-feature-card::after {
    border-color: var(--palette-cloud);
    background: var(--palette-cloud);
}

.pay-balance-card-primary,
[data-theme='dark'] .pay-balance-card-primary {
    border-color: var(--palette-navy);
    border-top: 2px solid var(--palette-slate);
    background: linear-gradient(145deg, var(--palette-navy), color-mix(in srgb, var(--palette-navy) 78%, var(--palette-slate)));
    color: var(--palette-white);
}

.pay-balance-card-primary .pay-card-label,
.pay-balance-card-primary > strong,
.pay-balance-card-primary .pay-chevron {
    color: var(--palette-white);
}

.pay-balance-card-primary small {
    color: var(--palette-mist);
}

.pay-space-balance.is-credit strong,
.is-credit {
    color: var(--palette-navy);
}

[data-theme='dark'] .pay-space-balance.is-credit strong,
[data-theme='dark'] .is-credit {
    color: var(--palette-cloud);
}

.pay-bank-card,
[data-theme='dark'] .pay-bank-card {
    border-color: color-mix(in srgb, var(--palette-mist) 54%, transparent);
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(145deg, var(--palette-slate) 0%, var(--palette-navy) 100%);
    color: var(--palette-white);
    box-shadow: 0 1.5rem 2.8rem rgba(15, 23, 42, 0.24);
}

.pay-bank-card-state {
    border-color: color-mix(in srgb, var(--palette-white) 42%, transparent);
}

.pay-flash,
.pay-auth-status,
[data-theme='dark'] .pay-flash,
[data-theme='dark'] .pay-auth-status {
    background: color-mix(in srgb, var(--palette-cloud) 76%, var(--palette-white));
    color: var(--palette-navy);
}

/* Compact iOS-style activity indicator */
.pay-app-loader {
    display: grid;
    place-items: center;
    background: var(--palette-navy);
}

.pay-native-loader {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
}

.pay-native-spinner {
    display: block;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: conic-gradient(from -35deg, transparent 0 24%, var(--palette-white) 25% 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.2rem), #000 calc(100% - 0.18rem));
    mask: radial-gradient(farthest-side, transparent calc(100% - 0.2rem), #000 calc(100% - 0.18rem));
    animation: pay-native-spin 1.2s linear infinite;
}

@keyframes pay-native-spin {
    to {
        transform: rotate(360deg);
    }
}

html.is-ready .pay-page-shell {
    animation: pay-page-enter 340ms cubic-bezier(0.2, 0.72, 0.22, 1) both;
}

@keyframes pay-page-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 0.45rem, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.pay-client {
    overflow-y: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pay-client::-webkit-scrollbar {
    display: none;
}

.pay-tab,
.pay-header-icon,
.pay-more-row,
.pay-card-action,
.pay-dark-button,
.pay-outline-button {
    transition:
        opacity 140ms ease,
        transform 140ms cubic-bezier(0.2, 0.72, 0.22, 1),
        background-color 180ms ease;
}

.pay-tab:active,
.pay-header-icon:active,
.pay-more-row:active,
.pay-card-action:active,
.pay-dark-button:active,
.pay-outline-button:active {
    opacity: 0.66;
    transform: scale(0.965);
}

.pay-transaction-group,
.pay-more-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 18rem;
}

html.has-lazy-content .pay-lazy-item {
    opacity: 0.01;
    transform: translate3d(0, 0.75rem, 0);
    transition:
        opacity 420ms ease,
        transform 420ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

html.has-lazy-content .pay-lazy-item.is-lazy-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* More is a first-class tab, not a popover. */
.pay-more-route .pay-header {
    display: none;
}

.pay-more-route .pay-page-shell {
    min-height: calc(100dvh - 4.75rem);
    padding: 0 1rem calc(2.5rem + env(safe-area-inset-bottom));
}

.pay-more-page {
    display: grid;
    gap: 1rem;
    padding-bottom: 1rem;
}

.pay-more-hero {
    position: relative;
    display: grid;
    min-height: 13.5rem;
    align-items: end;
    overflow: hidden;
    margin: 0 -1rem;
    padding: max(3.4rem, calc(2rem + env(safe-area-inset-top))) 1.25rem 1.5rem;
    background: var(--palette-navy);
    color: var(--palette-white);
}

.pay-more-hero::after {
    position: absolute;
    z-index: 1;
    right: -2.7rem;
    bottom: -1.6rem;
    width: 15rem;
    height: 12rem;
    background: url("/illustrations/cutout/temple.png") right bottom / contain no-repeat;
    opacity: 0.2;
    filter: grayscale(1) invert(1) contrast(1.2);
    content: "";
    pointer-events: none;
}

.pay-more-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 18rem;
}

.pay-more-hero .pay-kicker {
    color: var(--palette-cloud);
}

.pay-more-hero h1,
.pay-more-hero p {
    margin: 0;
}

.pay-more-hero h1 {
    margin-top: 0.25rem;
    font-family: var(--font-serif);
    font-size: clamp(2.35rem, 11vw, 3.25rem);
    line-height: 0.95;
}

.pay-more-hero p {
    margin-top: 0.7rem;
    color: var(--palette-cloud);
    font-size: 0.82rem;
    line-height: 1.5;
}

.pay-more-profile,
.pay-more-card {
    border: 1px solid var(--pay-line);
    border-radius: 1.15rem;
    background: var(--pay-card);
}

.pay-more-profile {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    margin-top: -0.35rem;
    padding: 0.9rem;
}

.pay-more-profile > img {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.pay-more-profile > div,
.pay-more-profile span,
.pay-more-profile strong,
.pay-more-profile small {
    display: block;
    min-width: 0;
}

.pay-more-profile > div > span,
.pay-more-profile small {
    color: var(--pay-muted);
    font-size: 0.67rem;
}

.pay-more-profile strong {
    overflow: hidden;
    margin: 0.12rem 0;
    font-family: var(--font-serif);
    font-size: 1.06rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-more-status {
    padding: 0.32rem 0.5rem;
    border-radius: 999px;
    background: var(--palette-cloud);
    color: var(--palette-navy);
    font-size: 0.62rem !important;
    font-weight: 800;
}

.pay-more-card {
    overflow: hidden;
}

.pay-more-card-heading {
    position: relative;
    min-height: 6.4rem;
    overflow: hidden;
    padding: 1rem 7rem 0.9rem 1rem;
    border-bottom: 1px solid var(--pay-line);
}

.pay-more-card-heading h2 {
    position: relative;
    z-index: 2;
    margin: 0.25rem 0 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
}

.pay-more-card-heading > img.classical-art {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 6.8rem;
    height: 6.8rem;
    object-fit: contain;
    opacity: 0.13;
    transform: translateY(-50%);
}

[data-theme='dark'] .pay-more-card-heading > img.classical-art {
    opacity: 0.18;
}

.pay-more-list {
    display: grid;
}

.pay-more-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    min-height: 4.35rem;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--pay-line);
    background: transparent;
    color: var(--pay-ink);
    text-align: left;
}

.pay-more-row:last-child {
    border-bottom: 0;
}

.pay-more-row > span:nth-child(2),
.pay-more-row strong,
.pay-more-row small {
    display: block;
    min-width: 0;
}

.pay-more-row strong {
    font-size: 0.88rem;
}

.pay-more-row small {
    overflow: hidden;
    margin-top: 0.18rem;
    color: var(--pay-muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-more-row-icon {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.8rem;
    background: var(--palette-cloud);
    color: var(--palette-navy);
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 800;
}

.pay-more-check {
    color: var(--pay-muted);
    font-size: 0.95rem;
    font-weight: 900;
}

.pay-more-details dl {
    margin: 0;
    padding: 0 1rem;
}

.pay-more-details dl > div {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--pay-line);
}

.pay-more-details dl > div:last-child {
    border-bottom: 0;
}

.pay-more-details dt {
    color: var(--pay-muted);
    font-size: 0.72rem;
}

.pay-more-details dd {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 750;
    text-align: right;
}

.pay-more-signout {
    margin: 0;
}

.pay-more-signout button {
    width: 100%;
    min-height: 3.25rem;
    border: 1px solid var(--palette-slate);
    border-radius: 0.9rem;
    background: transparent;
    color: var(--pay-ink);
    font-weight: 800;
}

.pay-more-footer {
    display: grid;
    justify-items: center;
    gap: 0.12rem;
    padding: 1.2rem 0 0.35rem;
    color: var(--pay-muted);
}

.pay-more-footer img.classical-art {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.25rem;
    object-fit: contain;
    opacity: 0.36;
}

.pay-more-footer span {
    font-family: var(--font-serif);
    font-weight: 800;
}

.pay-more-footer small {
    font-size: 0.65rem;
}

.pay-ledger-toolbar-actions a {
    display: grid;
    width: 2.2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-family: Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.pay-card-titlebar {
    min-height: 5rem;
    padding: max(0.9rem, env(safe-area-inset-top)) 1rem 0.75rem;
    border-bottom: 1px solid var(--pay-line);
    background: var(--pay-page);
}

.pay-card-titlebar h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 6.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.pay-card-back {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border-radius: 0;
    font-size: 0;
}

.pay-card-back svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.15;
}

@media (min-width: 541px) {
    .pay-client {
        background:
            linear-gradient(90deg, var(--palette-mist) calc(50% - 270px), var(--pay-page) calc(50% - 270px), var(--pay-page) calc(50% + 270px), var(--palette-mist) calc(50% + 270px));
    }

    [data-theme='dark'] .pay-client {
        background:
            linear-gradient(90deg, var(--palette-navy) calc(50% - 270px), var(--pay-page) calc(50% - 270px), var(--pay-page) calc(50% + 270px), var(--palette-navy) calc(50% + 270px));
    }
}

@media (prefers-reduced-motion: reduce) {
    html.is-ready .pay-page-shell,
    .pay-native-spinner {
        animation-duration: 2.4s;
    }

    html.has-lazy-content .pay-lazy-item,
    .pay-tab,
    .pay-header-icon,
    .pay-more-row,
    .pay-card-action,
    .pay-dark-button,
    .pay-outline-button {
        transition: none;
    }
}

/* App-wide semantic appearance contract */
.pay-client {
    --surface-base: #f5f5f7;
    --surface-raised: #ffffff;
    --surface-sunken: #eeeef2;
    --surface-elevated: #ffffff;
    --content-primary: #0f1011;
    --content-secondary: #5b5b63;
    --separator: color-mix(in srgb, #aaadb0 48%, transparent);
    --action-fill: #0f1011;
    --action-content: #ffffff;
    --brand-violet: #635bff;
    --brand-lavender: #c6c5f6;
    --brand-night: #0f1011;
    --hero-surface: linear-gradient(155deg, #171820 0%, #242247 52%, #635bff 145%);
    --hero-content: #ffffff;
    --hero-secondary: #d7d5f4;
    --semantic-positive: #2f6f59;
    --status-on-positive: #ffffff;
    --semantic-caution: #715d3e;
    --semantic-danger: #7b4554;
    --sheet-backdrop: rgba(15, 16, 17, 0.42);
    --surface-shadow: 0 0.75rem 2rem rgba(15, 16, 17, 0.08);
    --pay-page: var(--surface-base);
    --pay-card: var(--surface-raised);
    --pay-ink: var(--content-primary);
    --pay-muted: var(--content-secondary);
    --pay-line: var(--separator);
    background: var(--surface-base);
    color: var(--content-primary);
}

[data-theme='dark'] .pay-client {
    --surface-base: #0f1011;
    --surface-raised: #1a1b1f;
    --surface-sunken: #131318;
    --surface-elevated: #23232d;
    --content-primary: #ffffff;
    --content-secondary: #c8c8cf;
    --separator: #34343e;
    --action-fill: #d1c9ff;
    --action-content: #0f1011;
    --brand-violet: #847dff;
    --brand-lavender: #d1c9ff;
    --brand-night: #0f1011;
    --hero-surface: linear-gradient(155deg, #15151d 0%, #26234d 58%, #635bff 150%);
    --hero-content: #ffffff;
    --hero-secondary: #d1c9ff;
    --semantic-positive: #9ed5b9;
    --status-on-positive: #0f1011;
    --semantic-caution: #e0c48c;
    --semantic-danger: #efa7b6;
    --sheet-backdrop: rgba(4, 4, 8, 0.7);
    --surface-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.28);
    --pay-page: var(--surface-base);
    --pay-card: var(--surface-raised);
    --pay-ink: var(--content-primary);
    --pay-muted: var(--content-secondary);
    --pay-line: var(--separator);
    background: var(--surface-base);
    color: var(--content-primary);
}

.pay-client .pay-header,
.pay-client .pay-tabbar {
    border-color: var(--separator);
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    color: var(--content-primary);
}

.pay-client :where(
    .pay-balance-card,
    .pay-feature-card,
    .pay-space-list,
    .pay-account-health-space,
    .pay-more-card,
    .pay-more-profile,
    .pay-card-actions,
    .pay-transaction-group,
    .pay-search-summary,
    .pay-ledger-tabs,
    .pay-ledger-tools,
    .pay-health-summary-grid article,
    .pay-health-access,
    .alert-card,
    .pwa-page-card,
    .panel-card
) {
    border-color: var(--separator);
    background: var(--surface-raised);
    color: var(--content-primary);
}

.pay-client :where(
    .pay-card-management,
    .pay-card-stage,
    .pay-card-titlebar,
    .pay-health-page,
    .pay-health-titlebar,
    .pay-spot-page,
    .pay-spot-titlebar,
    .pay-no-results
) {
    background: var(--surface-base);
    color: var(--content-primary);
}

.pay-client :where(
    .pay-dialog,
    .pay-dialog-card,
    .pay-popover
) {
    border-color: var(--separator);
    background: var(--surface-elevated);
    color: var(--content-primary);
    box-shadow: var(--surface-shadow);
}

.pay-client .pay-dialog::backdrop {
    background: var(--sheet-backdrop);
    -webkit-backdrop-filter: saturate(110%) blur(18px);
    backdrop-filter: saturate(110%) blur(18px);
}

.pay-client :where(
    .pay-dialog-search input,
    .pay-money-input,
    .pay-card-pin,
    .pay-card-empty-detail,
    input:not([type='checkbox']):not([type='radio']):not([type='submit']),
    textarea,
    select
) {
    border-color: var(--separator);
    background: var(--surface-sunken);
    color: var(--content-primary);
}

.pay-client :where(input, textarea)::placeholder {
    color: var(--content-secondary);
    opacity: 0.84;
}

.pay-client :is(.pay-dark-button, .primary-button, .pill-button) {
    border-color: var(--action-fill);
    background: var(--action-fill);
    color: var(--action-content) !important;
}

.pay-client .pay-fill-card-button {
    background: var(--action-fill);
    color: var(--action-content);
    box-shadow: var(--surface-shadow);
}

.pay-client .pay-fill-card-button:disabled {
    background: var(--surface-sunken);
    color: var(--content-secondary);
    box-shadow: none;
}

.pay-client :is(.pay-outline-button, .secondary-button) {
    border-color: var(--content-primary);
    background: transparent;
    color: var(--content-primary);
}

.pay-client :is(
    a,
    button,
    input,
    textarea,
    select,
    [role='button']
):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--content-primary) 28%, transparent);
    outline-offset: 3px;
}

.pay-client :is(button, a, input, select, textarea) {
    touch-action: manipulation;
}

.pay-client :is(.pay-header-icon, .pay-card-back, .pay-spot-info) {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.pay-client :is(
    .pay-feature-card p,
    .pay-space-copy small,
    .pay-space-balance small,
    .pay-more-row small,
    .pay-transaction-copy small,
    .pay-card-security-note,
    .pay-card-ineligible p,
    .alert-card p
) {
    color: var(--content-secondary);
}

.pay-client :is(
    .pay-space-balance.is-credit strong,
    .pay-transaction-amount.is-credit strong,
    .is-credit,
    .pay-health-capability-list article > span:last-child
) {
    color: var(--semantic-positive);
}

.pay-client .pay-balance-card-primary,
.pay-client .pay-funding-balance-summary,
.pay-client .pay-health-note {
    border-color: color-mix(in srgb, var(--hero-secondary) 24%, transparent);
    background: var(--hero-surface);
    color: var(--hero-content);
}

.pay-client .pay-balance-card-primary :is(.pay-card-label, strong, .pay-chevron),
.pay-client .pay-funding-balance-summary strong,
.pay-client .pay-health-note h2 {
    color: var(--hero-content);
}

.pay-client .pay-balance-card-primary small,
.pay-client .pay-funding-balance-summary :is(span, small),
.pay-client .pay-health-note :is(.pay-kicker, p) {
    color: var(--hero-secondary);
}

.pay-client .pay-funding-warning {
    border-color: var(--separator);
    background: var(--surface-sunken);
    color: var(--content-primary);
}

.pay-client .pay-funding-warning.is-caution {
    border-color: color-mix(in srgb, var(--semantic-caution) 52%, var(--separator));
    background: color-mix(in srgb, var(--semantic-caution) 13%, var(--surface-raised));
}

.pay-client .pay-funding-warning p,
.pay-client .pay-funding-error {
    color: var(--content-primary) !important;
}

.pay-client .pay-funding-error {
    border-color: color-mix(in srgb, var(--semantic-danger) 50%, var(--separator));
    background: color-mix(in srgb, var(--semantic-danger) 11%, var(--surface-raised));
}

.pay-client .pay-funding-review {
    border-color: var(--separator);
    background: var(--surface-raised);
}

.pay-client .pay-funding-review > div {
    border-color: var(--separator);
}

.pay-client .pay-funding-review dt {
    color: var(--content-secondary);
}

.pay-client .pay-funding-success-icon,
.pay-client .pay-health-check {
    background: var(--semantic-positive);
    color: var(--status-on-positive);
}

.pay-client .pay-health-capability-list article.is-disabled .pay-health-check {
    background: var(--surface-sunken);
    color: var(--content-secondary);
}

.pay-client :where(.pay-dialog-close, .pay-card-action-icon, .pay-more-row-icon) {
    border-color: var(--separator);
    background: var(--surface-sunken);
    color: var(--content-primary);
}

.pay-client .pay-card-ineligible {
    border-color: var(--separator);
    background: var(--surface-sunken);
    color: var(--content-primary);
}

.pay-client .alert-card.is-unread {
    border-color: var(--separator);
    background: var(--surface-sunken);
}

.pay-client :where(.pagination-wrap a, .pagination-wrap span, .pay-pagination a, .pay-pagination span) {
    border-color: var(--separator);
    background: var(--surface-raised);
    color: var(--content-primary);
}

.pay-client .pwa-page-stack {
    width: 100%;
    max-width: var(--overview-width, 100%);
    min-width: 0;
}

.pay-funding-progress {
    display: grid;
    gap: 0.45rem;
    margin: 0 2.6rem 1rem 0;
}

.pay-funding-progress[hidden] {
    display: none;
}

.pay-funding-progress > span:first-child {
    color: var(--content-secondary);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pay-funding-progress-track {
    height: 0.22rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-sunken);
}

.pay-funding-progress-track > span {
    display: block;
    width: var(--funding-progress, 50%);
    height: 100%;
    border-radius: inherit;
    background: var(--content-primary);
    transition: width 220ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.pay-money-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0.9rem 0 0.35rem;
}

.pay-money-presets button {
    min-height: 2.75rem;
    padding: 0.45rem;
    border: 1px solid var(--separator);
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--content-primary);
    font-family: var(--font-numeric);
    font-size: 0.7rem;
    font-weight: 800;
}

.pay-money-presets button.is-active {
    border-color: var(--action-fill);
    background: var(--action-fill);
    color: var(--action-content);
}

.pay-home-spaces {
    display: grid;
    gap: 0.7rem;
}

.pay-spot-space {
    --health-accent: var(--content-secondary);
    --health-soft: var(--surface-sunken);
}

.pay-spot-space-badge {
    display: grid;
    min-width: 2.7rem;
    height: 2.7rem;
    padding: 0 0.45rem;
    place-items: center;
    border: 1px solid var(--separator);
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--content-primary);
    font-family: var(--font-numeric);
    font-size: 0.92rem;
    font-weight: 850;
}

.pay-spot-route .pay-header {
    display: none;
}

.pay-spot-route .pay-page-shell {
    min-height: calc(100dvh - 5rem);
    padding: 0 0 calc(2rem + env(safe-area-inset-bottom));
}

.pay-spot-page {
    min-height: calc(100dvh - 5rem);
    padding-bottom: 0.5rem;
    background: var(--surface-base);
}

.pay-spot-titlebar {
    position: sticky;
    z-index: 35;
    top: 0;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    min-height: 5.2rem;
    align-items: center;
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.55rem;
    border-bottom: 1px solid var(--separator);
    background: color-mix(in srgb, var(--surface-base) 90%, transparent);
    -webkit-backdrop-filter: saturate(115%) blur(24px);
    backdrop-filter: saturate(115%) blur(24px);
}

.pay-spot-titlebar h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.7rem;
    text-align: center;
}

.pay-spot-info {
    display: grid;
    place-items: center;
    padding: 0;
    border: 1.5px solid var(--content-primary);
    border-radius: 50%;
    background: transparent;
    color: var(--content-primary);
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 800;
}

.pay-spot-hero {
    position: relative;
    display: grid;
    min-height: 16rem;
    overflow: hidden;
    align-content: space-between;
    gap: 1.5rem;
    margin: 0 1rem 0.85rem;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--hero-secondary) 24%, transparent);
    border-radius: 1.35rem;
    background: var(--hero-surface);
    color: var(--hero-content);
    box-shadow: var(--surface-shadow);
}

.pay-spot-hero-art {
    position: absolute;
    right: -2rem;
    bottom: -2.2rem;
    width: 15rem;
    height: 15rem;
    object-fit: contain;
    opacity: 0.15;
    filter: grayscale(1) invert(1);
}

.pay-spot-hero-copy,
.pay-spot-hero-meta {
    position: relative;
    z-index: 1;
}

.pay-spot-hero-copy {
    display: grid;
    max-width: 18rem;
    gap: 0.38rem;
}

.pay-spot-hero-copy .pay-kicker,
.pay-spot-hero-copy small,
.pay-spot-hero-meta {
    color: var(--hero-secondary);
}

.pay-spot-hero-copy strong {
    max-width: 19rem;
    font-family: var(--font-numeric);
    font-size: clamp(1.8rem, 9vw, 2.7rem);
    font-variant-numeric: tabular-nums slashed-zero;
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.pay-spot-hero-copy small {
    font-size: 0.68rem;
}

.pay-spot-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--hero-secondary) 22%, transparent);
    font-size: 0.64rem;
    font-weight: 750;
}

.pay-spot-section {
    margin: 0 1rem 0.85rem;
}

.pay-spot-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0 0.7rem;
}

.pay-spot-section-heading h2 {
    margin: 0.15rem 0 0;
    font-family: var(--font-serif);
    font-size: 1.45rem;
}

.pay-spot-section-heading > span {
    color: var(--content-secondary);
    font-size: 0.68rem;
}

.pay-spot-holdings {
    display: grid;
    gap: 0.7rem;
}

.pay-spot-position {
    overflow: hidden;
    border: 1px solid var(--separator);
    border-radius: 1.15rem;
    background: var(--surface-raised);
    color: var(--content-primary);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.pay-spot-position-main {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem;
}

.pay-spot-symbol {
    display: grid;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border: 1px solid var(--separator);
    border-radius: 50%;
    background: var(--surface-sunken);
    font-family: var(--font-numeric);
    font-size: 0.7rem;
    font-weight: 850;
}

.pay-spot-position-copy,
.pay-spot-position-copy > *,
.pay-spot-position-value,
.pay-spot-position-value > * {
    display: block;
    min-width: 0;
}

.pay-spot-position-copy strong {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-spot-position-copy small,
.pay-spot-position-value small {
    margin-top: 0.18rem;
    color: var(--content-secondary);
    font-size: 0.62rem;
}

.pay-spot-position-value {
    text-align: right;
}

.pay-spot-position-value strong,
.pay-spot-position-details dd {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums slashed-zero;
}

.pay-spot-position-value strong {
    font-size: 0.78rem;
}

.pay-spot-allocation {
    height: 0.2rem;
    margin: 0 0.9rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-sunken);
}

.pay-spot-allocation > span {
    display: block;
    width: var(--spot-allocation, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--content-primary);
}

.pay-spot-position-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0.75rem 0 0;
    border-top: 1px solid var(--separator);
    background: var(--surface-sunken);
}

.pay-spot-position-details > div {
    min-width: 0;
    padding: 0.7rem;
    border-right: 1px solid var(--separator);
}

.pay-spot-position-details > div:last-child {
    border-right: 0;
}

.pay-spot-position-details dt,
.pay-spot-position-details dd {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-spot-position-details dt {
    color: var(--content-secondary);
    font-size: 0.56rem;
}

.pay-spot-position-details dd {
    margin-top: 0.18rem;
    font-size: 0.64rem;
    font-weight: 800;
}

.pay-spot-empty {
    min-height: 18rem;
    align-content: center;
    padding: 1.25rem;
    border: 1px solid var(--separator);
    border-radius: 1.15rem;
    background: var(--surface-raised);
}

.pay-spot-empty h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.45rem;
}

.pay-spot-disclosure {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.7rem;
    margin: 0 1rem;
    padding: 0.9rem;
    border: 1px solid var(--separator);
    border-radius: 1rem;
    background: var(--surface-sunken);
}

.pay-spot-disclosure-mark {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 1px solid var(--content-secondary);
    border-radius: 50%;
    color: var(--content-primary);
    font-family: var(--font-serif);
    font-weight: 800;
}

.pay-spot-disclosure strong {
    font-size: 0.75rem;
}

.pay-spot-disclosure p {
    margin: 0.22rem 0 0;
    color: var(--content-secondary);
    font-size: 0.64rem;
    line-height: 1.48;
}

html.is-theme-switching .pay-client,
html.is-theme-switching .pay-client :is(
    .pay-header,
    .pay-tabbar,
    .pay-dialog,
    .pay-dialog-card,
    .pay-popover,
    .pay-balance-card,
    .pay-feature-card,
    .pay-space-list,
    .pay-account-health-space,
    .pay-more-card,
    .pay-more-profile,
    .pay-card-actions,
    .pay-card-management,
    .pay-card-stage,
    .pay-transaction-group,
    .pay-health-page,
    .pay-health-summary-grid article,
    .pay-health-access,
    .pay-spot-page,
    .pay-spot-position,
    .pay-spot-disclosure
) {
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

@media (prefers-contrast: more) {
    .pay-client {
        --separator: var(--content-secondary);
    }

    .pay-client :is(.pay-money-input, .pay-dialog-search input, .pay-spot-position, .pay-account-health-space) {
        border-width: 2px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .pay-client .pay-header,
    .pay-client .pay-tabbar,
    .pay-client .pay-popover,
    .pay-spot-titlebar,
    .pay-health-titlebar {
        background: var(--surface-raised);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .pay-client .pay-dialog::backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.is-theme-switching .pay-client,
    html.is-theme-switching .pay-client *,
    .pay-funding-progress-track > span {
        transition: none;
    }
}

.account-health-admin .admin-health-grade {
    display: grid;
    min-width: 3.4rem;
    height: 3.4rem;
    padding: 0 0.55rem;
    place-items: center;
    border-radius: 50%;
    background: var(--palette-navy);
    color: var(--palette-white);
    font-family: var(--font-numeric);
    font-size: 1.15rem;
    font-weight: 850;
}

[data-theme='dark'] .account-health-admin .admin-health-grade {
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

/* Account Health space and controlled card funding */
.grade-a-plus {
    --health-accent: #2f6f59;
    --health-soft: #dce9e3;
}

.grade-a {
    --health-accent: #3f705f;
    --health-soft: #e0ebe6;
}

.grade-b {
    --health-accent: #66766e;
    --health-soft: #e5e9e7;
}

.grade-c {
    --health-accent: #8a7654;
    --health-soft: #eee9df;
}

.grade-d {
    --health-accent: #7d625f;
    --health-soft: #ece4e3;
}

.grade-f {
    --health-accent: #674c57;
    --health-soft: #e9e1e4;
}

.pay-health-space {
    margin-top: 0.2rem;
}

.pay-account-health-space {
    display: grid;
    grid-template-columns: 3.35rem minmax(0, 1fr) auto 0.65rem;
    min-height: 6.8rem;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--health-accent) 24%, var(--pay-line));
    border-radius: 1.15rem;
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--health-soft) 72%, var(--pay-card)), var(--pay-card) 62%);
    color: var(--pay-ink);
}

.pay-health-space-art {
    display: grid;
    width: 3.35rem;
    height: 3.35rem;
    place-items: center;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--health-accent) 12%, var(--pay-card));
}

.pay-health-space-art img.classical-art {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    opacity: 0.72;
}

.pay-health-space-copy,
.pay-health-space-copy > * {
    display: block;
    min-width: 0;
}

.pay-health-space-copy .pay-kicker {
    color: var(--health-accent);
}

.pay-health-space-copy strong {
    overflow: hidden;
    margin-top: 0.15rem;
    font-family: var(--font-serif);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-health-space-copy small {
    overflow: hidden;
    margin-top: 0.22rem;
    color: var(--pay-muted);
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-health-space-grade {
    display: grid;
    min-width: 2.7rem;
    height: 2.7rem;
    padding: 0 0.45rem;
    place-items: center;
    border-radius: 50%;
    background: var(--health-accent);
    color: var(--palette-white);
    font-family: var(--font-numeric);
    font-size: 1.05rem;
    font-weight: 850;
}

.pay-fill-card-button {
    display: grid;
    width: 4.7rem;
    height: 4.7rem;
    place-items: center;
    gap: 0;
    margin-top: 0.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--palette-navy);
    color: var(--palette-white);
    box-shadow: 0 0.75rem 1.8rem rgba(15, 23, 42, 0.18);
}

.pay-fill-card-button > span {
    margin-top: -0.15rem;
    font-size: 1.55rem;
    font-weight: 350;
    line-height: 1;
}

.pay-fill-card-button strong {
    margin-top: -0.55rem;
    font-size: 0.66rem;
    font-weight: 800;
}

.pay-fill-card-button:active:not(:disabled) {
    transform: scale(0.95);
}

.pay-fill-card-button:disabled {
    background: var(--palette-mist);
    color: var(--palette-slate);
    box-shadow: none;
    cursor: not-allowed;
}

.pay-funding-step {
    display: none;
}

.pay-funding-step.is-active {
    display: block;
    animation: pay-funding-step-in 240ms cubic-bezier(0.2, 0.72, 0.22, 1) both;
}

@keyframes pay-funding-step-in {
    from {
        opacity: 0;
        transform: translateX(0.7rem);
    }

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

.pay-card-funding-dialog .pay-dialog-card > .pay-funding-step > h2,
.pay-card-funding-dialog .pay-dialog-card > .pay-funding-step > p {
    margin-right: 2rem;
}

.pay-funding-balance-summary {
    display: grid;
    gap: 0.2rem;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--palette-navy);
    color: var(--palette-white);
}

.pay-funding-balance-summary span,
.pay-funding-balance-summary small {
    color: var(--palette-mist);
    font-size: 0.68rem;
}

.pay-funding-balance-summary strong {
    font-family: var(--font-numeric);
    font-size: 1.55rem;
    font-variant-numeric: tabular-nums;
}

.pay-money-field {
    display: grid;
    gap: 0.45rem;
    margin: 1rem 0;
}

.pay-money-field > span:first-child {
    font-size: 0.74rem;
    font-weight: 800;
}

.pay-money-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem;
    min-height: 4rem;
    padding: 0 1rem;
    border: 1.5px solid var(--pay-line);
    border-radius: 1rem;
    background: var(--pay-card);
}

.pay-money-input:focus-within {
    border-color: var(--palette-slate);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--palette-mist) 38%, transparent);
}

.pay-money-input > span {
    font-family: var(--font-numeric);
    font-size: 1.35rem;
    font-weight: 780;
}

.pay-money-input input {
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pay-ink);
    font-family: var(--font-numeric);
    font-size: 1.35rem;
    font-weight: 780;
}

.pay-funding-error {
    margin: 0 0 0.8rem !important;
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in srgb, #7d625f 35%, var(--pay-line));
    border-radius: 0.75rem;
    background: color-mix(in srgb, #7d625f 9%, var(--pay-card));
    color: var(--pay-ink) !important;
    font-size: 0.7rem !important;
}

.pay-loading-button {
    position: relative;
}

.pay-loading-button .pay-button-spinner {
    position: absolute;
    top: 50%;
    right: 1rem;
    display: none;
    width: 0.9rem;
    height: 0.9rem;
    border: 1.5px solid color-mix(in srgb, currentColor 32%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    transform: translateY(-50%);
}

.pay-loading-button.is-loading .pay-button-spinner {
    display: block;
    animation: pay-native-spin 1.05s linear infinite;
}

.pay-funding-warning {
    display: grid;
    grid-template-columns: 3.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0.85rem;
    border: 1px solid var(--pay-line);
    border-radius: 1rem;
    background: var(--palette-cloud);
}

.pay-funding-warning.is-caution {
    border-color: color-mix(in srgb, #8a7654 38%, var(--pay-line));
    background: color-mix(in srgb, #8a7654 11%, var(--pay-card));
}

.pay-funding-warning img.classical-art {
    width: 3.7rem;
    height: 3.7rem;
    object-fit: contain;
    opacity: 0.58;
}

.pay-funding-warning p {
    margin: 0 !important;
    color: var(--pay-ink) !important;
    font-size: 0.73rem !important;
    line-height: 1.48;
}

.pay-funding-impact-card {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    min-height: 12rem;
    align-content: end;
    overflow: hidden;
    padding: 1.1rem;
    border-color: color-mix(in srgb, var(--brand-lavender) 42%, transparent);
    background: var(--hero-surface);
    color: var(--hero-content);
    box-shadow: 0 1rem 2.2rem color-mix(in srgb, var(--brand-night) 18%, transparent);
}

.pay-funding-impact-card::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--brand-lavender) 24%, transparent), transparent 34%),
        linear-gradient(180deg, transparent 16%, color-mix(in srgb, var(--brand-night) 16%, transparent));
    content: "";
}

.pay-funding-impact-card.is-caution {
    border-color: color-mix(in srgb, var(--semantic-caution) 54%, transparent);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--semantic-caution) 24%, transparent), transparent 38%),
        var(--hero-surface);
}

.pay-funding-impact-card img.classical-art {
    position: absolute;
    z-index: -1;
    top: 0.65rem;
    right: 0.5rem;
    width: 6.4rem;
    height: 6.4rem;
    filter: invert(1);
    opacity: 0.16;
}

.pay-funding-impact-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.42rem;
}

.pay-funding-impact-copy > span {
    color: var(--hero-secondary);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pay-funding-impact-copy > strong {
    max-width: 18rem;
    color: var(--hero-content);
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.12;
}

.pay-client .pay-funding-impact-card p {
    max-width: 21rem;
    color: var(--hero-secondary) !important;
    font-size: 0.72rem !important;
    line-height: 1.5;
}

.pay-funding-impact-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.pay-funding-impact-facts > div {
    display: grid;
    min-width: 0;
    gap: 0.3rem;
    padding: 0.8rem;
    border: 1px solid var(--separator);
    border-radius: 0.9rem;
    background: var(--surface-sunken);
}

.pay-funding-impact-facts span {
    color: var(--content-secondary);
    font-size: 0.62rem;
    line-height: 1.3;
}

.pay-funding-impact-facts strong {
    overflow: hidden;
    color: var(--content-primary);
    font-family: var(--font-numeric);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-funding-acknowledgement {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    gap: 0.72rem;
    margin-bottom: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--separator);
    border-radius: 0.9rem;
    background: var(--surface-raised);
    cursor: pointer;
}

.pay-funding-acknowledgement:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand-violet) 58%, var(--separator));
    background: color-mix(in srgb, var(--brand-violet) 6%, var(--surface-raised));
}

.pay-funding-acknowledgement input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.08rem 0 0;
    accent-color: var(--brand-violet);
}

.pay-funding-acknowledgement > span {
    display: grid;
    gap: 0.24rem;
}

.pay-funding-acknowledgement strong {
    color: var(--content-primary);
    font-size: 0.7rem;
}

.pay-funding-acknowledgement small {
    color: var(--content-secondary);
    font-size: 0.63rem;
    line-height: 1.42;
}

.pay-funding-approval-actions .pay-dark-button:disabled {
    opacity: 0.42;
    box-shadow: none;
    cursor: not-allowed;
}

.pay-card-funding-dialog [data-funding-amount-form] > .pay-dark-button {
    width: 100%;
}

.pay-funding-final-amount {
    display: flex;
    min-height: 4.6rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--brand-violet) 24%, var(--separator));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--brand-violet) 6%, var(--surface-sunken));
}

.pay-funding-final-amount span {
    color: var(--content-secondary);
    font-size: 0.7rem;
}

.pay-funding-final-amount strong {
    color: var(--content-primary);
    font-family: var(--font-numeric);
    font-size: 1.2rem;
}

.pay-funding-details-heading {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--content-secondary);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.pay-funding-final-note {
    margin: -0.15rem 0 0.9rem !important;
    padding-left: 0.72rem;
    border-left: 2px solid var(--brand-violet);
    color: var(--content-secondary) !important;
    font-size: 0.65rem !important;
    line-height: 1.45 !important;
}

.pay-funding-review {
    overflow: hidden;
    margin: 0 0 1rem;
    border: 1px solid var(--pay-line);
    border-radius: 1rem;
}

.pay-funding-review > div {
    display: flex;
    min-height: 3.2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--pay-line);
}

.pay-funding-review > div:last-child {
    border-bottom: 0;
}

.pay-funding-review dt {
    color: var(--pay-muted);
    font-size: 0.7rem;
}

.pay-funding-review dd {
    margin: 0;
    font-family: var(--font-numeric);
    font-size: 0.78rem;
    font-weight: 800;
}

.pay-funding-confirm-actions {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 0.65rem;
}

.pay-funding-success {
    min-height: 22rem;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.pay-funding-success.is-active {
    display: grid;
}

.pay-funding-success-icon {
    display: grid;
    width: 4.2rem;
    height: 4.2rem;
    margin-bottom: 0.75rem;
    place-items: center;
    border-radius: 50%;
    background: #2f6f59;
    color: var(--palette-white);
    font-size: 1.55rem;
    font-weight: 850;
}

.pay-funding-success h2,
.pay-funding-success p {
    margin-right: 0 !important;
}

.pay-funding-reference {
    margin: 0.25rem 0 1rem;
    color: var(--pay-muted);
    font-family: var(--font-numeric);
    font-size: 0.66rem;
}

.pay-health-route .pay-header {
    display: none;
}

.pay-health-route .pay-page-shell {
    min-height: calc(100dvh - 5rem);
    padding: 0 0 calc(2rem + env(safe-area-inset-bottom));
}

.pay-health-page {
    min-height: calc(100dvh - 5rem);
    background: var(--pay-page);
}

.pay-health-titlebar {
    position: sticky;
    z-index: 35;
    top: 0;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    min-height: 5.2rem;
    align-items: center;
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--pay-line) 72%, transparent);
    background: color-mix(in srgb, var(--pay-page) 92%, transparent);
    -webkit-backdrop-filter: saturate(115%) blur(24px);
    backdrop-filter: saturate(115%) blur(24px);
}

.pay-health-titlebar h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.7rem;
    text-align: center;
}

.pay-health-hero {
    position: relative;
    min-height: 20rem;
    overflow: hidden;
    margin: 0 1rem;
    padding: 1.4rem;
    border-radius: 1.35rem;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--health-accent) 88%, var(--palette-navy)), var(--palette-navy));
    color: var(--palette-white);
}

.pay-health-hero-art {
    position: absolute;
    right: -2.5rem;
    bottom: -1.1rem;
    width: 17rem;
    height: 15rem;
    object-fit: contain;
    opacity: 0.17;
    filter: grayscale(1) invert(1);
}

.pay-health-hero-copy {
    position: relative;
    z-index: 2;
    display: grid;
    max-width: 17rem;
    align-content: start;
}

.pay-health-hero .pay-kicker {
    color: var(--palette-cloud);
}

.pay-health-grade {
    display: grid;
    width: 7rem;
    height: 7rem;
    margin: 1.25rem 0 0.85rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--palette-white) 48%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--palette-white) 9%, transparent);
    font-family: var(--font-numeric);
    font-size: 3.35rem;
    font-weight: 850;
    box-shadow: inset 0 0 0 0.55rem color-mix(in srgb, var(--palette-white) 5%, transparent);
}

.pay-health-hero h2,
.pay-health-hero p {
    margin: 0;
}

.pay-health-hero h2 {
    font-family: var(--font-serif);
    font-size: 1.55rem;
}

.pay-health-hero p {
    margin-top: 0.45rem;
    color: var(--palette-cloud);
    font-size: 0.72rem;
    line-height: 1.5;
}

.pay-health-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.85rem 1rem;
}

.pay-health-summary-grid article {
    display: grid;
    gap: 0.25rem;
    min-height: 7rem;
    align-content: center;
    padding: 0.85rem;
    border: 1px solid var(--pay-line);
    border-radius: 1rem;
    background: var(--pay-card);
}

.pay-health-summary-grid article:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.pay-health-summary-grid span,
.pay-health-summary-grid small {
    color: var(--pay-muted);
    font-size: 0.64rem;
}

.pay-health-summary-grid strong {
    overflow: hidden;
    font-family: var(--font-numeric);
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-health-access {
    overflow: hidden;
    margin: 0 1rem 0.85rem;
    border: 1px solid var(--pay-line);
    border-radius: 1.15rem;
    background: var(--pay-card);
}

.pay-health-section-heading {
    position: relative;
    min-height: 6.5rem;
    overflow: hidden;
    padding: 1rem 7rem 1rem 1rem;
    border-bottom: 1px solid var(--pay-line);
}

.pay-health-section-heading h2 {
    margin: 0.2rem 0 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
}

.pay-health-section-heading img.classical-art {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 6.5rem;
    height: 6.5rem;
    object-fit: contain;
    opacity: 0.14;
    transform: translateY(-50%);
}

.pay-health-capability-list article {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    min-height: 4.5rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--pay-line);
}

.pay-health-capability-list article:last-child {
    border-bottom: 0;
}

.pay-health-check {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 50%;
    background: #2f6f59;
    color: var(--palette-white);
    font-size: 0.8rem;
    font-weight: 850;
}

.pay-health-capability-list article.is-disabled .pay-health-check {
    background: var(--palette-mist);
    color: var(--palette-slate);
}

.pay-health-capability-list article > span:nth-child(2),
.pay-health-capability-list strong,
.pay-health-capability-list small {
    display: block;
    min-width: 0;
}

.pay-health-capability-list strong {
    font-size: 0.8rem;
}

.pay-health-capability-list small {
    margin-top: 0.16rem;
    color: var(--pay-muted);
    font-size: 0.64rem;
}

.pay-health-capability-list article > span:last-child {
    color: #2f6f59;
    font-size: 0.63rem;
    font-weight: 800;
}

.pay-health-capability-list article.is-disabled > span:last-child {
    color: var(--pay-muted);
}

.pay-health-note {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    margin: 0 1rem;
    padding: 1rem;
    border-radius: 1.15rem;
    background: var(--palette-navy);
    color: var(--palette-white);
}

.pay-health-note img.classical-art {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    opacity: 0.6;
    filter: grayscale(1) invert(1);
}

.pay-health-note .pay-kicker,
.pay-health-note p {
    color: var(--palette-mist);
}

.pay-health-note h2,
.pay-health-note p {
    margin: 0;
}

.pay-health-note h2 {
    margin-top: 0.15rem;
    font-family: var(--font-serif);
    font-size: 1.08rem;
}

.pay-health-note p {
    margin-top: 0.35rem;
    font-size: 0.66rem;
    line-height: 1.45;
}

[data-theme='dark'] .pay-account-health-space {
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--health-accent) 24%, var(--palette-navy)), var(--pay-card) 66%);
}

[data-theme='dark'] .pay-funding-warning {
    background: color-mix(in srgb, var(--palette-navy) 72%, var(--palette-slate));
}

[data-theme='dark'] .pay-money-input {
    background: color-mix(in srgb, var(--palette-navy) 76%, var(--palette-slate));
}

[data-theme='dark'] .pay-health-summary-grid article,
[data-theme='dark'] .pay-health-access {
    background: var(--pay-card);
}

@media (prefers-reduced-motion: reduce) {
    .pay-funding-step.is-active,
    .pay-loading-button.is-loading .pay-button-spinner {
        animation: none;
    }
}

/* Definitive authentication palette — kept last to prevent legacy overrides. */
.pay-auth {
    --pay-green: var(--palette-navy);
    --pay-mint: var(--palette-slate);
    --pay-ink: var(--palette-navy);
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

.pay-auth-shell,
.pay-auth-brand {
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

.pay-auth-logo img,
[data-theme='dark'] .pay-auth-logo img {
    border-radius: 50%;
    filter: none;
}

.pay-login-panel {
    border-top-color: color-mix(in srgb, var(--palette-mist) 54%, transparent);
    background: var(--palette-white);
    color: var(--palette-navy);
}

.pay-login-heading h1,
.pay-login-form label > span,
.pay-remember span {
    color: var(--palette-navy);
}

.pay-login-heading .pay-kicker {
    color: var(--palette-slate);
}

.pay-login-heading p,
.pay-security-message,
.pay-login-help,
.pay-local-preview {
    color: var(--palette-slate);
}

.pay-login-form input[type='text'],
.pay-login-form input[type='email'],
.pay-login-form input[type='password'] {
    border-color: var(--palette-mist);
    background: var(--palette-white);
    color: var(--palette-navy);
    caret-color: var(--palette-navy);
}

.pay-login-form input::placeholder {
    color: var(--palette-mist);
}

.pay-login-form input:focus {
    border-color: var(--palette-navy);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--palette-mist) 34%, transparent);
}

.pay-remember input {
    accent-color: var(--palette-navy);
}

.pay-faceid-button,
.pay-login-submit {
    border-color: var(--palette-navy);
    background: var(--palette-navy);
    color: var(--palette-white) !important;
}

.pay-auth-divider {
    color: var(--palette-slate);
}

.pay-auth-divider::before,
.pay-auth-divider::after,
.pay-local-preview {
    border-color: var(--palette-cloud);
    background-color: var(--palette-cloud);
}

.pay-local-preview {
    background: transparent;
}

.pay-login-help a,
.pay-local-preview a {
    color: var(--palette-navy);
}

.pay-auth-error,
.pay-auth-status {
    border: 1px solid var(--palette-mist);
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

[data-theme='dark'] .pay-auth {
    --pay-green: var(--palette-cloud);
    --pay-mint: var(--palette-mist);
    --pay-ink: var(--palette-white);
    background: var(--palette-navy);
    color: var(--palette-white);
}

[data-theme='dark'] .pay-auth-shell,
[data-theme='dark'] .pay-auth-brand {
    background: var(--palette-navy);
    color: var(--palette-white);
}

[data-theme='dark'] .pay-login-panel {
    border-top-color: color-mix(in srgb, var(--palette-mist) 42%, transparent);
    background: color-mix(in srgb, var(--palette-navy) 84%, var(--palette-slate));
    color: var(--palette-white);
}

[data-theme='dark'] .pay-login-heading h1,
[data-theme='dark'] .pay-login-form label > span,
[data-theme='dark'] .pay-remember span {
    color: var(--palette-white);
}

[data-theme='dark'] .pay-login-heading .pay-kicker {
    color: var(--palette-cloud);
}

[data-theme='dark'] .pay-login-heading p,
[data-theme='dark'] .pay-security-message,
[data-theme='dark'] .pay-login-help,
[data-theme='dark'] .pay-local-preview,
[data-theme='dark'] .pay-auth-divider {
    color: var(--palette-mist);
}

[data-theme='dark'] .pay-login-form input[type='text'],
[data-theme='dark'] .pay-login-form input[type='email'],
[data-theme='dark'] .pay-login-form input[type='password'] {
    border-color: var(--palette-slate);
    background: var(--palette-navy);
    color: var(--palette-white);
    caret-color: var(--palette-white);
}

[data-theme='dark'] .pay-login-form input::placeholder {
    color: var(--palette-mist);
}

[data-theme='dark'] .pay-login-form input:focus {
    border-color: var(--palette-cloud);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--palette-mist) 28%, transparent);
}

[data-theme='dark'] .pay-remember input {
    accent-color: var(--palette-cloud);
}

[data-theme='dark'] .pay-faceid-button,
[data-theme='dark'] .pay-login-submit {
    border-color: var(--palette-cloud);
    background: var(--palette-cloud);
    color: var(--palette-navy) !important;
}

[data-theme='dark'] .pay-auth-divider::before,
[data-theme='dark'] .pay-auth-divider::after {
    background: var(--palette-slate);
}

[data-theme='dark'] .pay-local-preview {
    border-color: var(--palette-slate);
    background: transparent;
}

[data-theme='dark'] .pay-login-help a,
[data-theme='dark'] .pay-local-preview a {
    color: var(--palette-white);
}

[data-theme='dark'] .pay-auth-error,
[data-theme='dark'] .pay-auth-status {
    border-color: var(--palette-slate);
    background: color-mix(in srgb, var(--palette-navy) 72%, var(--palette-slate));
    color: var(--palette-white);
}

@media (min-width: 541px) {
    .pay-auth::before {
        background: var(--palette-cloud);
    }

    [data-theme='dark'] .pay-auth::before {
        background: var(--palette-navy);
    }
}

/* Native iOS interaction and state pass */
.pay-balance-card-primary {
    grid-template-columns: minmax(0, 1fr) auto;
}

.pay-balance-card-copy {
    min-width: 0;
}

.pay-balance-label-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.pay-balance-privacy {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--palette-white) 12%, transparent);
    color: var(--palette-white);
}

.pay-balance-privacy > span {
    position: relative;
    display: block;
    width: 1.05rem;
    height: 0.7rem;
    border: 1.5px solid currentColor;
    border-radius: 50% / 58%;
}

.pay-balance-privacy > span::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.24rem;
    height: 0.24rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%);
    animation: pay-loader-spinner-out 140ms ease 320ms forwards;
}

.pay-balance-privacy > span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25rem;
    height: 1.5px;
    background: currentColor;
    content: "";
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-38deg);
}

.pay-balance-privacy.is-active > span::after {
    opacity: 1;
}

.pay-balance-value {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    color: var(--palette-white);
    white-space: nowrap;
}

.pay-balance-value strong {
    font-family: var(--font-numeric);
    font-size: clamp(1.1rem, 5.6vw, 1.55rem);
    font-variant-numeric: tabular-nums slashed-zero;
}

.sensitive {
    transition:
        filter 260ms ease,
        opacity 260ms ease,
        transform 300ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.hide-sensitive .sensitive {
    opacity: 0.7;
    filter: blur(0.42rem);
}

.is-balance-transitioning .sensitive {
    animation: pay-balance-settle 440ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

@keyframes pay-balance-settle {
    0% {
        transform: scale(0.97);
    }

    55% {
        transform: scale(1.018);
    }

    100% {
        transform: scale(1);
    }
}

.pay-tab-badge {
    position: absolute;
    top: 0.05rem;
    right: 17%;
    display: grid;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.22rem;
    place-items: center;
    border: 1.5px solid color-mix(in srgb, var(--pay-card) 88%, transparent);
    border-radius: 999px;
    background: var(--palette-navy);
    color: var(--palette-white);
    font-family: var(--font-numeric);
    font-size: 0.54rem;
    font-weight: 850;
    line-height: 1;
}

[data-theme='dark'] .pay-tab-badge {
    border-color: var(--palette-navy);
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

html.is-ready .pay-tab.is-active svg {
    animation: pay-tab-settle 320ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

@keyframes pay-tab-settle {
    0% {
        opacity: 0.62;
        transform: translateY(0.15rem) scale(0.92);
    }

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

/* Small spinner first, route-aware skeleton immediately after. */
.pay-app-loader {
    position: fixed;
    overflow: hidden;
}

.pay-native-loader {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pay-loader-skeleton {
    position: absolute;
    top: 48%;
    left: 50%;
    display: grid;
    width: min(calc(100% - 2rem), 508px);
    gap: 0.7rem;
    opacity: 0;
    transform: translate(-50%, 0.5rem);
    animation: pay-loader-skeleton-in 180ms ease 220ms forwards;
}

.pay-loader-skeleton > span {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--palette-slate) 48%, var(--palette-navy));
}

.pay-loader-skeleton > span::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--palette-mist) 24%, transparent), transparent);
    content: "";
    transform: translateX(-100%);
    animation: pay-loader-shimmer 1.4s ease-in-out infinite;
}

.pay-loader-skeleton-title {
    width: 38%;
    height: 1.15rem;
}

.pay-loader-skeleton-card {
    height: 5.8rem;
}

.pay-loader-skeleton-row {
    height: 3.8rem;
}

.pay-loader-skeleton.is-card .pay-loader-skeleton-card {
    height: 11rem;
    border-radius: 1rem;
}

.pay-loader-skeleton.is-more .pay-loader-skeleton-card {
    height: 7rem;
}

.pay-loader-skeleton.is-ledger .pay-loader-skeleton-title {
    width: 62%;
}

@keyframes pay-loader-skeleton-in {
    to {
        opacity: 0.78;
        transform: translate(-50%, 0);
    }
}

@keyframes pay-loader-spinner-out {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.86);
    }
}

@keyframes pay-loader-shimmer {
    to {
        transform: translateX(100%);
    }
}

/* Pull-to-refresh */
.pay-pull-refresh {
    position: fixed;
    z-index: 95;
    top: max(0.5rem, env(safe-area-inset-top));
    left: 50%;
    display: flex;
    min-height: 2rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--palette-mist) 38%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pay-card) 90%, transparent);
    color: var(--pay-ink);
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.14);
    font-size: 0.65rem;
    font-weight: 750;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4rem);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition:
        opacity 160ms ease,
        transform 220ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.pay-pull-spinner {
    width: 0.9rem;
    height: 0.9rem;
    border: 1.5px solid var(--palette-mist);
    border-top-color: var(--pay-ink);
    border-radius: 50%;
}

.is-pulling .pay-pull-refresh,
.is-refreshing .pay-pull-refresh {
    opacity: 1;
    transform: translate(-50%, calc(var(--pull-distance, 0px) - 2.7rem));
}

.can-release-pull .pay-pull-spinner,
.is-refreshing .pay-pull-spinner {
    animation: pay-native-spin 1s linear infinite;
}

.has-sheet-open {
    overflow: hidden !important;
}

/* One scroll language for large and compact titles. */
.pay-header-row,
.pay-greeting span,
.pay-greeting strong,
.pay-ledger-header,
.pay-ledger-toolbar,
.pay-ledger-balances,
.pay-ledger-art,
.pay-card-titlebar,
.pay-card-titlebar h1,
.pay-more-hero,
.pay-more-hero-copy .pay-kicker,
.pay-more-hero h1,
.pay-more-hero p,
.pay-more-hero::after {
    transition:
        min-height 260ms cubic-bezier(0.2, 0.72, 0.22, 1),
        max-height 260ms cubic-bezier(0.2, 0.72, 0.22, 1),
        padding 260ms cubic-bezier(0.2, 0.72, 0.22, 1),
        opacity 180ms ease,
        font-size 260ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.is-header-condensed:not(.pay-activity-route):not(.pay-card-route):not(.pay-more-route) .pay-header-row {
    min-height: 3.75rem;
    padding-top: max(0.45rem, env(safe-area-inset-top));
    padding-bottom: 0.35rem;
}

.is-header-condensed .pay-greeting span {
    max-height: 0;
    opacity: 0;
}

.is-header-condensed .pay-greeting strong {
    margin-top: 0;
    font-size: 1.12rem;
}

.pay-activity-route .pay-ledger-header {
    position: sticky;
    z-index: 35;
    top: 0;
    overflow: hidden;
    -webkit-backdrop-filter: saturate(115%) blur(24px);
    backdrop-filter: saturate(115%) blur(24px);
}

.pay-ledger-balances {
    max-height: 8rem;
}

.is-header-condensed.pay-activity-route .pay-ledger-toolbar {
    min-height: 4.15rem;
    padding-top: max(0.55rem, env(safe-area-inset-top));
    padding-bottom: 0.45rem;
}

.is-header-condensed.pay-activity-route .pay-ledger-balances {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.is-header-condensed.pay-activity-route .pay-ledger-art {
    opacity: 0;
}

.pay-ledger-back {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0;
}

.pay-ledger-back svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.15;
}

.pay-card-route .pay-card-titlebar {
    position: sticky;
    z-index: 35;
    top: 0;
    -webkit-backdrop-filter: saturate(115%) blur(24px);
    backdrop-filter: saturate(115%) blur(24px);
}

.is-header-condensed.pay-card-route .pay-card-titlebar {
    min-height: 4.15rem;
    padding-top: max(0.55rem, env(safe-area-inset-top));
    padding-bottom: 0.45rem;
}

.is-header-condensed.pay-card-route .pay-card-titlebar h1 {
    font-size: 1.22rem;
}

.pay-more-route .pay-more-hero {
    position: sticky;
    z-index: 35;
    top: 0;
}

.is-header-condensed.pay-more-route .pay-more-hero {
    min-height: 4.4rem;
    padding-top: max(0.65rem, env(safe-area-inset-top));
    padding-bottom: 0.65rem;
}

.is-header-condensed.pay-more-route .pay-more-hero-copy .pay-kicker,
.is-header-condensed.pay-more-route .pay-more-hero p {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
}

.is-header-condensed.pay-more-route .pay-more-hero h1 {
    margin-top: 0;
    font-size: 1.45rem;
}

.is-header-condensed.pay-more-route .pay-more-hero::after {
    opacity: 0.06;
}

/* Monochrome transaction symbols */
.pay-transaction-icon {
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

[data-theme='dark'] .pay-transaction-icon {
    border-color: var(--palette-slate);
    background: color-mix(in srgb, var(--palette-navy) 72%, var(--palette-slate));
    color: var(--palette-white);
}

.pay-transaction-glyph {
    position: relative;
    display: grid;
    width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1;
}

.icon-income .pay-transaction-glyph::before {
    content: "+";
}

.icon-transfer .pay-transaction-glyph::before {
    content: "↗";
}

.icon-cash .pay-transaction-glyph::before {
    content: "↓";
}

.icon-fee .pay-transaction-glyph::before {
    content: "·";
    font-size: 1.55rem;
}

.icon-card .pay-transaction-glyph {
    width: 1.15rem;
    height: 0.78rem;
    border: 1.5px solid currentColor;
    border-radius: 0.18rem;
}

.icon-card .pay-transaction-glyph::after {
    position: absolute;
    right: 0.14rem;
    bottom: 0.14rem;
    width: 0.28rem;
    height: 0.1rem;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

/* Inset groups and deliberate state cards */
.pay-more-page {
    gap: 0.8rem;
}

.pay-more-card,
.pay-more-profile {
    border-radius: 1.25rem;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.pay-more-card-heading {
    min-height: 5.9rem;
}

.pay-more-account-signout {
    margin: 0;
    border-top: 1px solid var(--pay-line);
}

.pay-more-logout-row {
    border-bottom: 0;
    color: var(--pay-ink);
}

.pay-more-logout-row .pay-more-row-icon {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pay-line);
}

.pay-card-ineligible {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    margin: 1rem;
    padding: 1rem;
    border: 1px solid var(--pay-line);
    border-radius: 1rem;
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

.pay-card-ineligible img.classical-art {
    width: 4.25rem;
    height: 4.25rem;
    object-fit: contain;
    opacity: 0.44;
}

.pay-card-ineligible p {
    margin: 0.2rem 0 0;
    color: var(--palette-slate);
}

[data-theme='dark'] .pay-card-ineligible {
    background: color-mix(in srgb, var(--palette-navy) 72%, var(--palette-slate));
    color: var(--palette-white);
}

[data-theme='dark'] .pay-card-ineligible p {
    color: var(--palette-mist);
}

.pay-flash {
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
}

.pay-flash::before {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 50%;
    background: var(--palette-navy);
    color: var(--palette-white);
    content: "✓";
    font-size: 0.7rem;
    font-weight: 900;
}

[data-theme='dark'] .pay-flash::before {
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

.pay-auth-error {
    grid-template-columns: 1.45rem minmax(0, 1fr);
}

.pay-auth-error::before {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    grid-row: 1 / span 2;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "!";
    font-weight: 900;
}

.pay-auth-error strong,
.pay-auth-error span {
    grid-column: 2;
}

.pay-auth-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pay-auth-status::before {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--palette-navy);
    color: var(--palette-white);
    content: "✓";
    font-size: 0.7rem;
}

[data-theme='dark'] .pay-auth-status::before {
    background: var(--palette-cloud);
    color: var(--palette-navy);
}

.pay-alerts-empty {
    min-height: 18rem;
    align-content: center;
    padding: 1.5rem;
    border: 1px solid var(--pay-line);
    border-radius: 1rem;
    background: var(--pay-card);
}

.pay-alerts-empty strong {
    font-family: var(--font-serif);
    font-size: 1.25rem;
}

.pay-offline-panel {
    display: grid;
    min-height: calc(100dvh - 13rem);
    align-items: center;
}

.pay-system-state {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    text-align: center;
}

.pay-system-state img.classical-art {
    width: 8.5rem;
    height: 8.5rem;
    margin-bottom: 0.35rem;
    object-fit: contain;
    opacity: 0.5;
}

.pay-system-state h1,
.pay-system-state p {
    margin: 0;
}

.pay-system-state h1 {
    font-family: var(--font-serif);
    font-size: 2rem;
}

.pay-system-state p {
    max-width: 20rem;
    color: var(--muted);
    line-height: 1.5;
}

.pay-system-state .pay-dark-button {
    width: min(100%, 18rem);
    margin-top: 0.45rem;
}

/* Native bottom sheets replace centered app dialogs. */
.pay-dialog {
    inset: auto 0 0;
    width: min(100%, 540px);
    max-width: none;
    max-height: min(86dvh, 48rem);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 1.55rem 1.55rem 0 0;
    background: var(--pay-card, var(--palette-white));
}

.pay-dialog[open] {
    animation: pay-sheet-enter 300ms cubic-bezier(0.2, 0.72, 0.22, 1) both;
}

@keyframes pay-sheet-enter {
    from {
        opacity: 0.75;
        transform: translateY(100%);
    }

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

.pay-dialog-card {
    max-height: min(86dvh, 48rem);
    overflow-y: auto;
    padding: 2.15rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    border-radius: inherit;
    -webkit-overflow-scrolling: touch;
}

.pay-dialog-card::before {
    position: absolute;
    top: 0.65rem;
    left: 50%;
    width: 2.35rem;
    height: 0.28rem;
    border-radius: 999px;
    background: var(--palette-mist);
    content: "";
    transform: translateX(-50%);
}

.pay-dialog-close {
    top: 0.95rem;
    right: 0.95rem;
}

[data-theme='dark'] .pay-dialog {
    background: color-mix(in srgb, var(--palette-navy) 84%, var(--palette-slate));
    color: var(--palette-white);
}

@media (prefers-reduced-motion: reduce) {
    .pay-loader-skeleton,
    .pay-loader-skeleton > span::after,
    .pay-dialog[open],
    .is-balance-transitioning .sensitive,
    html.is-ready .pay-tab.is-active svg {
        animation: none;
    }

    .pay-header-row,
    .pay-greeting span,
    .pay-greeting strong,
    .pay-ledger-header,
    .pay-ledger-toolbar,
    .pay-ledger-balances,
    .pay-card-titlebar,
    .pay-card-titlebar h1,
    .pay-more-hero,
    .pay-more-hero-copy .pay-kicker,
    .pay-more-hero h1,
    .pay-more-hero p {
        transition: none;
    }
}

/* Angelos landing-page language: editorial type, violet light, restrained glass. */
.pay-client :is(
    .pay-balance-card,
    .pay-feature-card,
    .pay-account-health-space,
    .pay-spot-space,
    .pay-more-card,
    .pay-card-actions
) {
    transition:
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

@media (hover: hover) and (pointer: fine) {
    .pay-client :is(
        .pay-balance-card,
        .pay-feature-card,
        .pay-account-health-space,
        .pay-spot-space,
        .pay-more-card
    ):hover {
        border-color: color-mix(in srgb, var(--brand-violet) 36%, var(--separator));
        box-shadow:
            var(--surface-shadow),
            0 0 0 1px color-mix(in srgb, var(--brand-violet) 8%, transparent);
        transform: translateY(-2px);
    }
}

.pay-client :is(
    .pay-balance-card,
    .pay-feature-card,
    .pay-account-health-space,
    .pay-spot-space,
    .pay-more-card
):active {
    transform: scale(0.992);
}

.pay-income-plan-route .pay-header {
    display: none;
}

.pay-income-plan-route .pay-page-shell {
    max-width: 52rem;
    padding: 0 0 calc(7rem + env(safe-area-inset-bottom));
}

.pay-income-plan {
    min-height: 100dvh;
    background: var(--surface-base);
    color: var(--content-primary);
}

.pay-income-titlebar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: grid;
    grid-template-columns: 2.75rem 1fr 2.75rem;
    align-items: center;
    min-height: calc(4.25rem + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 1rem 0;
    border-bottom: 1px solid var(--separator);
    background: color-mix(in srgb, var(--surface-base) 88%, transparent);
    -webkit-backdrop-filter: saturate(135%) blur(20px);
    backdrop-filter: saturate(135%) blur(20px);
}

.pay-income-titlebar h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 6vw, 1.85rem);
    font-weight: 400;
    text-align: center;
    letter-spacing: -0.025em;
}

.pay-income-titlebar .pay-card-back,
.pay-income-titlebar .pay-spot-info {
    width: 2.75rem;
    height: 2.75rem;
}

.pay-income-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    min-height: 16rem;
    margin: 1rem;
    padding: 2rem 1.25rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-lavender) 20%, transparent);
    border-radius: 1.5rem;
    background: var(--hero-surface);
    color: var(--hero-content);
    box-shadow:
        0 1.5rem 4rem rgba(15, 16, 17, 0.18),
        inset 0 0 5rem color-mix(in srgb, var(--brand-violet) 18%, transparent);
}

.pay-income-hero::after {
    position: absolute;
    z-index: -1;
    right: -4rem;
    bottom: -5rem;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-violet) 68%, #ffffff);
    content: "";
    filter: blur(3rem);
    opacity: 0.58;
    animation: pay-brand-glow 8s ease-in-out infinite alternate;
}

.pay-income-hero > div {
    z-index: 2;
    align-self: end;
    max-width: 24rem;
}

.pay-income-hero img {
    position: absolute;
    right: -1.6rem;
    bottom: -0.2rem;
    width: 11rem;
    filter: invert(1);
    opacity: 0.2;
    mix-blend-mode: screen;
}

.pay-income-hero .pay-kicker {
    color: var(--brand-lavender);
}

.pay-income-hero h2 {
    max-width: 17rem;
    margin: 0.55rem 0 0.7rem;
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 11vw, 3.65rem);
    font-weight: 300;
    line-height: 0.94;
    letter-spacing: -0.045em;
}

.pay-income-hero p {
    max-width: 20rem;
    margin: 0;
    color: var(--hero-secondary);
    font-size: 0.94rem;
    line-height: 1.45;
}

@keyframes pay-brand-glow {
    from {
        opacity: 0.42;
        transform: translate3d(-0.5rem, 0.35rem, 0) scale(0.92);
    }

    to {
        opacity: 0.68;
        transform: translate3d(0.7rem, -0.5rem, 0) scale(1.08);
    }
}

.pay-income-controls,
.pay-income-result,
.pay-income-section,
.pay-income-disclosure {
    margin: 1rem;
    border: 1px solid var(--separator);
    border-radius: 1.35rem;
    background: var(--surface-raised);
    box-shadow: var(--surface-shadow);
}

.pay-income-controls {
    display: grid;
    gap: 1.35rem;
    padding: 1.2rem;
}

.pay-income-field {
    display: grid;
    gap: 0.7rem;
}

.pay-income-field label,
.pay-income-label-row output {
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pay-income-money-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 4.2rem;
    padding: 0 1rem;
    border: 1px solid var(--separator);
    border-radius: 1rem;
    background: var(--surface-sunken);
}

.pay-income-money-input > span,
.pay-income-money-input input {
    font-family: var(--font-numeric);
    font-size: clamp(1.6rem, 9vw, 2.35rem);
    font-weight: 540;
    letter-spacing: -0.06em;
}

.pay-income-money-input input {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.2rem;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    color: inherit;
}

.pay-income-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
}

.pay-income-presets button {
    min-height: 2.75rem;
    padding: 0.45rem;
    border: 1px solid var(--separator);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--content-primary);
    font-family: var(--font-numeric);
    font-size: 0.78rem;
}

.pay-income-presets button.is-active {
    border-color: var(--brand-violet);
    background: color-mix(in srgb, var(--brand-violet) 12%, var(--surface-raised));
    color: var(--content-primary);
}

.pay-income-label-row,
.pay-income-range-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pay-income-label-row output {
    color: var(--brand-violet);
    font-family: var(--font-numeric);
}

.pay-income-field input[type='range'] {
    width: 100%;
    height: 1.8rem;
    margin: 0;
    accent-color: var(--brand-violet);
}

.pay-income-range-labels {
    color: var(--content-secondary);
    font-size: 0.7rem;
}

.pay-income-submit {
    width: 100%;
    margin: 0;
}

.pay-income-result {
    position: relative;
    padding: 1.5rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--brand-violet) 46%, transparent);
    background: linear-gradient(155deg, #171820 0%, #2a275e 58%, #635bff 135%);
    color: #ffffff;
    box-shadow:
        0 1.5rem 4rem rgba(40, 36, 112, 0.22),
        inset 0 0 5rem rgba(198, 197, 246, 0.12);
}

.pay-income-result::after {
    position: absolute;
    right: -15%;
    bottom: -75%;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: rgba(198, 197, 246, 0.32);
    content: "";
    filter: blur(2.7rem);
    pointer-events: none;
}

.pay-income-result > * {
    position: relative;
    z-index: 1;
}

.pay-income-result .pay-kicker {
    color: #d1c9ff;
}

.pay-income-result > strong {
    display: block;
    margin-top: 0.65rem;
    font-family: var(--font-numeric);
    font-size: clamp(2.1rem, 11vw, 3.8rem);
    font-weight: 520;
    line-height: 1;
    letter-spacing: -0.075em;
}

.pay-income-result > p {
    max-width: 27rem;
    margin: 0.8rem 0 1.35rem;
    color: #e3e1f7;
    font-size: 0.9rem;
    line-height: 1.45;
}

.pay-income-progress {
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.pay-income-progress > span {
    display: block;
    width: min(100%, var(--income-progress));
    height: 100%;
    border-radius: inherit;
    background: #ffffff;
    transition: width 360ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.pay-income-progress-copy {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.22rem 0.75rem;
    align-items: baseline;
    margin-top: 0.65rem;
    color: #d7d5f4;
    font-size: 0.72rem;
}

.pay-income-progress-copy strong {
    justify-self: end;
    color: #ffffff;
    font-family: var(--font-numeric);
}

.pay-income-progress-copy span:last-child {
    grid-column: 1 / -1;
}

.pay-income-section {
    padding: 1.2rem;
}

.pay-income-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.pay-income-section-heading h2 {
    margin: 0.25rem 0 0;
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: -0.025em;
}

.pay-income-section-heading > span {
    color: var(--content-secondary);
    font-size: 0.68rem;
    white-space: nowrap;
}

.pay-income-chart {
    display: grid;
    gap: 0.9rem;
}

.pay-income-chart-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(5.8rem, auto);
    gap: 0.7rem;
    align-items: center;
    font-family: var(--font-numeric);
    font-size: 0.74rem;
}

.pay-income-chart-row > div {
    height: 1.6rem;
    padding: 0.24rem;
    overflow: hidden;
    border-radius: 0.55rem;
    background: var(--surface-sunken);
}

.pay-income-chart-row i {
    display: block;
    width: var(--scenario-width);
    height: 100%;
    border-radius: 0.35rem;
    background: linear-gradient(90deg, #37316f, var(--brand-violet));
    box-shadow: 0 0 1rem color-mix(in srgb, var(--brand-violet) 28%, transparent);
    transition: width 360ms cubic-bezier(0.2, 0.72, 0.22, 1);
}

.pay-income-chart-row strong {
    justify-self: end;
    font-weight: 500;
    letter-spacing: -0.045em;
}

.pay-income-summary-table {
    margin: 0;
}

.pay-income-summary-table > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    border-top: 1px solid var(--separator);
}

.pay-income-summary-table > div:first-child {
    border-top: 0;
}

.pay-income-summary-table dt {
    color: var(--content-secondary);
    font-size: 0.82rem;
}

.pay-income-summary-table dd {
    margin: 0;
    font-family: var(--font-numeric);
    font-size: 0.86rem;
    font-weight: 550;
    text-align: right;
}

.pay-income-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pay-income-table {
    width: 100%;
    min-width: 31rem;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.pay-income-table th,
.pay-income-table td {
    padding: 0.85rem 0.7rem;
    border-top: 1px solid var(--separator);
    text-align: right;
}

.pay-income-table thead th {
    padding-top: 0;
    border-top: 0;
    color: var(--content-secondary);
    font-weight: 500;
}

.pay-income-table th:first-child {
    padding-left: 0;
    text-align: left;
}

.pay-income-table td {
    font-family: var(--font-numeric);
}

.pay-income-disclosure {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--content-secondary);
    font-size: 0.76rem;
    line-height: 1.48;
}

.pay-income-disclosure-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--separator);
    border-radius: 50%;
    color: var(--brand-violet);
    font-family: var(--font-serif);
    font-weight: 600;
}

.pay-income-disclosure strong {
    color: var(--content-primary);
}

.pay-income-disclosure p {
    margin: 0.25rem 0 0;
}

.pay-income-disclosure a {
    color: var(--content-primary);
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

@media (min-width: 680px) {
    .pay-income-plan {
        padding: 0 1rem 2rem;
    }

    .pay-income-titlebar {
        margin-inline: -1rem;
    }

    .pay-income-hero {
        min-height: 19rem;
    }

    .pay-income-controls {
        grid-template-columns: 1fr 1fr;
    }

    .pay-income-submit {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-income-hero::after {
        animation: none;
    }

    .pay-income-progress > span,
    .pay-income-chart-row i,
    .pay-client :is(
        .pay-balance-card,
        .pay-feature-card,
        .pay-account-health-space,
        .pay-spot-space,
        .pay-more-card,
        .pay-card-actions
    ) {
        transition: none;
    }
}

/* End-of-file appearance finality */
[data-theme='dark'] .pay-client .pay-card-management {
    background: var(--surface-base);
}

[data-theme='dark'] .pay-client .pay-card-actions {
    background: var(--surface-raised);
}

[data-theme='dark'] .pay-client :is(.pay-dialog, .pay-dialog-card, .pay-popover) {
    border-color: var(--separator);
    background: var(--surface-elevated);
    color: var(--content-primary);
}

[data-theme='dark'] .pay-client .pay-money-input,
[data-theme='dark'] .pay-client .pay-funding-warning,
[data-theme='dark'] .pay-client .pay-card-ineligible {
    border-color: var(--separator);
    background: var(--surface-sunken);
    color: var(--content-primary);
}

[data-theme='dark'] .pay-client .pay-funding-warning.is-caution {
    border-color: color-mix(in srgb, var(--semantic-caution) 52%, var(--separator));
    background: color-mix(in srgb, var(--semantic-caution) 13%, var(--surface-raised));
}

.pay-client .pay-funding-impact-card {
    border-color: color-mix(in srgb, var(--brand-lavender) 42%, transparent);
    background: var(--hero-surface);
    color: var(--hero-content);
}

.pay-client .pay-funding-impact-card.is-caution,
[data-theme='dark'] .pay-client .pay-funding-impact-card.is-caution {
    border-color: color-mix(in srgb, var(--semantic-caution) 54%, transparent);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--semantic-caution) 24%, transparent), transparent 38%),
        var(--hero-surface);
}

.grade-a-plus {
    --health-accent: #245846;
    --health-readable: #245846;
}

.grade-a {
    --health-accent: #315e50;
    --health-readable: #315e50;
}

.grade-b {
    --health-accent: #4f5d56;
    --health-readable: #4f5d56;
}

.grade-c {
    --health-accent: #6a583b;
    --health-readable: #6a583b;
}

.grade-d {
    --health-accent: #6b4f4c;
    --health-readable: #6b4f4c;
}

.grade-f {
    --health-accent: #5b3e49;
    --health-readable: #5b3e49;
}

.pay-health-space-copy .pay-kicker {
    color: var(--health-readable, var(--health-accent));
}

[data-theme='dark'] :is(.grade-a-plus, .grade-a) {
    --health-readable: #9ed5b9;
}

[data-theme='dark'] .grade-b {
    --health-readable: #c4ccd5;
}

[data-theme='dark'] .grade-c {
    --health-readable: #e0c48c;
}

[data-theme='dark'] :is(.grade-d, .grade-f) {
    --health-readable: #efa7b6;
}

[data-theme='dark'] .pay-health-space-grade {
    color: #ffffff;
}

/* Landing identity wins over earlier legacy palette rules. */
.pay-card-route {
    font-family: var(--font-sans);
}

.pay-more-hero {
    background: var(--hero-surface);
    box-shadow: inset 0 -3rem 5rem rgba(99, 91, 255, 0.1);
}

.pay-more-hero .pay-kicker {
    color: var(--brand-lavender);
}

.pay-more-hero p {
    color: var(--hero-secondary);
}

.pay-bank-card,
[data-theme='dark'] .pay-bank-card {
    border-color: color-mix(in srgb, #847dff 42%, transparent);
    background:
        radial-gradient(circle at 88% 10%, rgba(209, 201, 255, 0.2), transparent 34%),
        linear-gradient(145deg, #1a1b1f 0%, #242247 56%, #4b49aa 125%);
    color: #ffffff;
    box-shadow:
        0 1.5rem 3rem rgba(15, 16, 17, 0.26),
        inset 0 0 3.5rem rgba(132, 125, 255, 0.08);
}

.pay-bank-card-state {
    border-color: rgba(209, 201, 255, 0.62);
    color: #d1c9ff;
}

.pay-bank-card-number {
    font-family: var(--font-numeric);
}

.pay-auth {
    background:
        radial-gradient(circle at 50% -8%, rgba(132, 125, 255, 0.13), transparent 34rem),
        #f5f5f7;
    color: #0f1011;
    font-family: var(--font-sans);
}

.pay-auth-shell,
.pay-auth-brand {
    background: transparent;
    color: #0f1011;
}

.pay-login-panel {
    border-color: rgba(15, 16, 17, 0.12);
    background: rgba(255, 255, 255, 0.94);
    color: #0f1011;
    box-shadow: 0 -1.25rem 4rem rgba(15, 16, 17, 0.07);
}

.pay-login-heading h1 {
    color: #0f1011;
    font-family: var(--font-serif);
    font-weight: 400;
}

.pay-login-heading .pay-kicker {
    color: #635bff;
}

.pay-login-heading p,
.pay-security-message,
.pay-login-help,
.pay-local-preview {
    color: #5b5b63;
}

.pay-login-form input[type='text'],
.pay-login-form input[type='email'],
.pay-login-form input[type='password'] {
    border-color: #d5d5dc;
    background: #f5f5f7;
    color: #0f1011;
    caret-color: #635bff;
}

.pay-login-form input:focus {
    border-color: #635bff;
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.14);
}

.pay-faceid-button,
.pay-login-submit {
    border-color: #0f1011;
    background: #0f1011;
    color: #ffffff !important;
}

[data-theme='dark'] .pay-auth {
    background:
        radial-gradient(circle at 50% -8%, rgba(132, 125, 255, 0.17), transparent 32rem),
        #0f1011;
    color: #ffffff;
}

[data-theme='dark'] .pay-auth-shell,
[data-theme='dark'] .pay-auth-brand {
    background: transparent;
    color: #ffffff;
}

[data-theme='dark'] .pay-login-panel {
    border-color: #34343e;
    background: rgba(26, 27, 31, 0.94);
    color: #ffffff;
    box-shadow: 0 -1.25rem 4rem rgba(0, 0, 0, 0.28);
}

[data-theme='dark'] .pay-login-heading h1,
[data-theme='dark'] .pay-login-form label > span,
[data-theme='dark'] .pay-remember span {
    color: #ffffff;
}

[data-theme='dark'] .pay-login-heading .pay-kicker {
    color: #d1c9ff;
}

[data-theme='dark'] .pay-login-heading p,
[data-theme='dark'] .pay-security-message,
[data-theme='dark'] .pay-login-help,
[data-theme='dark'] .pay-local-preview,
[data-theme='dark'] .pay-auth-divider {
    color: #c8c8cf;
}

[data-theme='dark'] .pay-login-form input[type='text'],
[data-theme='dark'] .pay-login-form input[type='email'],
[data-theme='dark'] .pay-login-form input[type='password'] {
    border-color: #43434e;
    background: #131318;
    color: #ffffff;
    caret-color: #d1c9ff;
}

[data-theme='dark'] .pay-login-form input:focus {
    border-color: #847dff;
    box-shadow: 0 0 0 3px rgba(132, 125, 255, 0.2);
}

[data-theme='dark'] .pay-faceid-button,
[data-theme='dark'] .pay-login-submit {
    border-color: #d1c9ff;
    background: #d1c9ff;
    color: #0f1011 !important;
}

/* Admin operations console */
.admin-body {
    --admin-bg: #f3f4f7;
    --admin-surface: #ffffff;
    --admin-surface-soft: #f8f8fb;
    --admin-ink: #111218;
    --admin-muted: #70717b;
    --admin-border: #e3e4e9;
    --admin-accent: #635bff;
    --admin-accent-soft: #eeedff;
    --admin-sidebar: #111218;
    --admin-sidebar-muted: #a9aab4;
    --admin-positive: #16845b;
    --admin-warning: #a7690a;
    --admin-negative: #b23a4b;
    background: var(--admin-bg);
    color: var(--admin-ink);
}

[data-theme='dark'] .admin-body {
    --admin-bg: #0d0e12;
    --admin-surface: #16171c;
    --admin-surface-soft: #1b1c22;
    --admin-ink: #f7f7fa;
    --admin-muted: #9b9ca7;
    --admin-border: #292a32;
    --admin-accent: #8b85ff;
    --admin-accent-soft: rgba(139, 133, 255, 0.15);
    --admin-sidebar: #090a0d;
    --admin-sidebar-muted: #9b9ca7;
    --admin-positive: #68d6a7;
    --admin-warning: #f4bd62;
    --admin-negative: #f07f90;
}

.admin-body .app-placeholder {
    background: var(--admin-bg);
}

.admin-body :is(h1, h2, h3) {
    color: var(--admin-ink);
}

.admin-body h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.15rem, 3vw, 3.25rem);
    font-weight: 400;
    letter-spacing: -0.035em;
}

.admin-body h2 {
    font-size: 1.05rem;
    font-weight: 650;
}

.admin-body .eyebrow {
    color: var(--admin-accent);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.admin-body .muted {
    color: var(--admin-muted);
}

.admin-layout {
    display: grid;
    grid-template-columns: 242px minmax(0, 1fr);
    gap: 0;
    min-height: 100vh;
    padding: 0;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    flex-direction: column;
    align-self: start;
    gap: 1.5rem;
    padding: 1.5rem 1rem 1rem;
    border: 0;
    border-radius: 0;
    background: var(--admin-sidebar);
    color: #f7f7fa;
}

.admin-brand {
    display: flex;
    min-height: 3rem;
    align-items: center;
    padding: 0 0.7rem;
    margin: 0;
}

.admin-brand .brand-logo {
    width: 9.6rem;
    max-height: 2rem;
    object-position: left center;
}

.admin-brand .brand-logo-light {
    display: none;
}

.admin-brand .brand-logo-dark {
    display: block;
}

.admin-nav {
    display: grid;
    gap: 0.32rem;
}

.admin-sidebar .sidebar-link {
    display: flex;
    min-height: 2.85rem;
    align-items: center;
    gap: 0.78rem;
    padding: 0.65rem 0.78rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    color: var(--admin-sidebar-muted);
    font-size: 0.9rem;
    font-weight: 550;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.admin-sidebar .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    transform: translateX(2px);
}

.admin-sidebar .sidebar-link.is-active,
.admin-sidebar .sidebar-link.is-active:hover {
    border-color: rgba(139, 133, 255, 0.25);
    background: linear-gradient(135deg, rgba(99, 91, 255, 0.32), rgba(99, 91, 255, 0.16));
    color: #ffffff;
}

.admin-nav-icon,
.admin-nav-icon svg {
    width: 1.08rem;
    height: 1.08rem;
}

.admin-nav-icon svg,
.admin-icon-button svg,
.admin-search-control svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-create-button {
    display: flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.75rem;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 650;
}

.admin-create-button span {
    color: #a9a5ff;
    font-family: var(--font-numeric);
    font-size: 1.2rem;
}

.admin-create-button:hover {
    border-color: #8b85ff;
    background: rgba(139, 133, 255, 0.12);
}

.sidebar-footer {
    display: grid;
    gap: 0.8rem;
    margin-top: auto;
}

.admin-session-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.admin-session-card strong,
.admin-session-card p {
    display: block;
    overflow: hidden;
    max-width: 8.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-session-card strong {
    color: #ffffff;
    font-size: 0.8rem;
}

.admin-session-card p {
    color: var(--admin-sidebar-muted);
    font-size: 0.68rem;
}

.admin-avatar,
.admin-client-avatar,
.admin-table-client i {
    display: grid;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #7d76ff, #4e47d8);
    color: #ffffff;
    font-family: var(--font-numeric);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
}

.admin-session-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.admin-session-actions form {
    min-width: 0;
}

.admin-icon-button {
    display: flex;
    width: 100%;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 0.65rem;
    background: transparent;
    color: var(--admin-sidebar-muted);
    font-size: 0.68rem;
}

.admin-icon-button:hover {
    color: #ffffff;
}

.admin-icon-button svg {
    width: 0.85rem;
    height: 0.85rem;
}

.admin-main {
    min-width: 0;
    padding: 0 2rem 3rem;
}

.admin-topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    min-height: 4.4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 -2rem 1.8rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--admin-border);
    background: color-mix(in srgb, var(--admin-bg) 86%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.admin-topbar > div:first-child {
    display: grid;
    gap: 0.1rem;
}

.admin-topbar-label {
    color: var(--admin-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-topbar strong {
    font-size: 0.82rem;
    font-weight: 550;
}

.admin-topbar-actions,
.admin-heading-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.admin-topbar-link,
.admin-text-link {
    color: var(--admin-accent);
    font-size: 0.82rem;
    font-weight: 650;
}

.admin-body .primary-button,
.admin-body .secondary-button {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 0.95rem;
    border-radius: 0.68rem;
    font-size: 0.8rem;
    font-weight: 650;
}

.admin-body .primary-button,
[data-theme='dark'] .admin-body .primary-button {
    border-color: var(--admin-accent);
    background: var(--admin-accent);
    color: #ffffff;
}

.admin-body .secondary-button,
[data-theme='dark'] .admin-body .secondary-button {
    border-color: var(--admin-border);
    background: var(--admin-surface);
    color: var(--admin-ink);
}

.admin-body .primary-button:hover,
.admin-body .secondary-button:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
}

.admin-page {
    min-width: 0;
    gap: 1.15rem;
    max-width: 1540px;
    margin: 0 auto;
}

.admin-page-heading,
.admin-client-hero {
    display: flex;
    min-height: 8rem;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.3rem 0 0.6rem;
}

.admin-page-heading p,
.admin-client-hero p {
    max-width: 44rem;
    margin-top: 0.5rem;
    color: var(--admin-muted);
    font-size: 0.91rem;
}

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

.admin-kpi-grid.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-kpi-card,
.admin-surface,
.admin-body .panel-card,
.admin-client-commandbar {
    border: 1px solid var(--admin-border);
    background: var(--admin-surface);
    color: var(--admin-ink);
    box-shadow: 0 1px 2px rgba(15, 16, 22, 0.025);
}

.admin-kpi-card {
    position: relative;
    display: grid;
    min-height: 8.2rem;
    overflow: hidden;
    align-content: space-between;
    padding: 1rem;
    border-radius: 0.9rem;
}

.admin-kpi-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--admin-accent);
    opacity: 0.3;
}

.admin-kpi-card.is-attention::after {
    background: var(--admin-warning);
    opacity: 0.9;
}

.admin-kpi-card span,
.admin-kpi-card small {
    color: var(--admin-muted);
    font-size: 0.73rem;
}

.admin-kpi-card strong {
    font-family: var(--font-numeric);
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    font-weight: 550;
    letter-spacing: -0.07em;
}

.admin-surface {
    min-width: 0;
    padding: 1.15rem;
    border-radius: 0.9rem;
}

.admin-dashboard-grid,
.admin-comms-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
    gap: 0.9rem;
}

.admin-comms-grid {
    grid-template-columns: minmax(31rem, 1.2fr) minmax(20rem, 0.8fr);
    align-items: start;
}

.admin-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--admin-border);
}

.admin-card-heading h2 {
    margin-top: 0.23rem;
}

.admin-count-badge {
    display: grid;
    min-width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 999px;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    font-family: var(--font-numeric);
    font-size: 0.72rem;
}

.admin-queue-row,
.admin-compact-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.78rem 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-queue-row:last-child,
.admin-compact-row:last-child {
    border-bottom: 0;
}

.admin-queue-row:hover,
.admin-compact-row:hover {
    color: var(--admin-accent);
}

.admin-queue-copy,
.admin-compact-row > span:first-child {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 0.14rem;
}

.admin-queue-copy strong,
.admin-compact-row strong {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-queue-copy small,
.admin-compact-row small {
    overflow: hidden;
    color: var(--admin-muted);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-pipeline {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
}

.admin-pipeline-row {
    display: grid;
    gap: 0.45rem;
}

.admin-pipeline-row > div {
    display: flex;
    justify-content: space-between;
    color: var(--admin-muted);
    font-size: 0.75rem;
}

.admin-pipeline-row strong {
    color: var(--admin-ink);
    font-family: var(--font-numeric);
}

.admin-progress {
    display: block;
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--admin-surface-soft);
}

.admin-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--admin-accent);
}

.admin-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: var(--admin-muted);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-table td {
    font-size: 0.76rem;
}

.admin-table tbody tr {
    transition: background-color 120ms ease;
}

.admin-table tbody tr[data-row-link] {
    cursor: pointer;
}

.admin-table tbody tr:hover {
    background: var(--admin-surface-soft);
}

.admin-table-client {
    display: flex;
    min-width: 11rem;
    align-items: center;
    gap: 0.65rem;
}

.admin-table-client > span {
    display: grid;
    gap: 0.12rem;
}

.admin-table-client strong {
    font-size: 0.79rem;
}

.admin-table-client small,
.admin-cell-note {
    display: block;
    max-width: 14rem;
    overflow: hidden;
    color: var(--admin-muted);
    font-size: 0.67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-number {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.admin-status,
.admin-grade {
    display: inline-flex;
    min-height: 1.55rem;
    align-items: center;
    padding: 0.2rem 0.53rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-status {
    background: var(--admin-surface-soft);
    color: var(--admin-muted);
    text-transform: capitalize;
}

.status-active,
.status-completed,
.status-reviewed,
.status-confirmed {
    background: color-mix(in srgb, var(--admin-positive) 12%, transparent);
    color: var(--admin-positive);
}

.status-open,
.status-in-progress,
.status-requested,
.status-pending-review,
.status-needs-action,
.status-watchlist {
    background: color-mix(in srgb, var(--admin-warning) 12%, transparent);
    color: var(--admin-warning);
}

.status-paused,
.status-cancelled,
.status-inactive {
    background: color-mix(in srgb, var(--admin-negative) 12%, transparent);
    color: var(--admin-negative);
}

.admin-grade {
    min-width: 2rem;
    justify-content: center;
    background: var(--health-soft, var(--admin-accent-soft));
    color: var(--health-accent, var(--admin-accent));
    font-family: var(--font-numeric);
}

.admin-empty-state {
    display: grid;
    gap: 0.25rem;
    padding: 1.5rem 0.5rem;
    text-align: center;
}

.admin-empty-state strong {
    font-size: 0.85rem;
}

.admin-empty-state p {
    color: var(--admin-muted);
    font-size: 0.75rem;
}

.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--admin-border);
}

.admin-filter-bar :is(select, input),
.admin-quick-status select,
.admin-operation-row select,
.admin-operation-controls :is(select, input) {
    min-height: 2.55rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.65rem;
    outline: none;
    background: var(--admin-surface);
    color: var(--admin-ink);
    font-size: 0.75rem;
}

.admin-filter-bar :is(select, input):focus,
.admin-quick-status select:focus,
.admin-operation-row select:focus,
.admin-operation-controls :is(select, input):focus {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-accent) 14%, transparent);
}

.admin-search-control {
    position: relative;
    flex: 1 1 17rem;
}

.admin-search-control svg {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    width: 0.95rem;
    height: 0.95rem;
    color: var(--admin-muted);
    transform: translateY(-50%);
}

.admin-search-control input {
    width: 100%;
    padding-left: 2.25rem;
}

.admin-results-meta {
    display: flex;
    justify-content: space-between;
    padding: 0.82rem 0.2rem 0.2rem;
    color: var(--admin-muted);
    font-size: 0.69rem;
}

.admin-row-action {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 50%;
    color: var(--admin-accent);
}

.admin-client-hero {
    align-items: center;
    padding: 1.2rem 0 0.5rem;
}

.admin-client-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    color: var(--admin-muted);
    font-size: 0.7rem;
}

.admin-client-commandbar {
    position: sticky;
    z-index: 15;
    top: 5.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem;
    border-radius: 0.82rem;
}

.admin-section-nav {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    gap: 0.2rem;
    scrollbar-width: none;
}

.admin-section-nav a {
    padding: 0.55rem 0.72rem;
    border-radius: 0.55rem;
    color: var(--admin-muted);
    font-size: 0.71rem;
    font-weight: 650;
    white-space: nowrap;
}

.admin-section-nav a:hover,
.admin-section-nav a.is-active {
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
}

.admin-quick-status {
    display: flex;
    flex: 0 0 auto;
    gap: 0.4rem;
}

.admin-anchor-section {
    scroll-margin-top: 9.3rem;
}

.admin-login-audit-panel {
    overflow: hidden;
}

.admin-audit-lock {
    display: grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 24%, var(--admin-border));
    border-radius: 0.8rem;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
}

.admin-audit-lock svg {
    width: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.admin-login-audit-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.admin-login-audit-summary > div {
    display: grid;
    gap: 0.24rem;
    min-height: 4.8rem;
    align-content: center;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.72rem;
    background: var(--admin-surface-soft);
}

.admin-login-audit-summary span,
.admin-login-audit-table small {
    display: block;
    color: var(--admin-muted);
    font-size: 0.66rem;
}

.admin-login-audit-summary strong {
    color: var(--admin-ink);
    font-size: 0.94rem;
}

.admin-login-audit-table {
    margin: 0 -1.25rem -1.25rem;
    border-top: 1px solid var(--admin-border);
}

.admin-login-audit-table code {
    white-space: nowrap;
}

.admin-login-audit-table td strong + small {
    margin-top: 0.16rem;
}

.admin-login-audit-empty {
    margin-top: 0.3rem;
    text-align: center;
}

.admin-body .panel-card {
    border-radius: 0.9rem;
    box-shadow: 0 1px 2px rgba(15, 16, 22, 0.025);
}

.admin-body .panel-heading {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--admin-border);
}

.admin-body .field span {
    color: var(--admin-muted);
    font-size: 0.73rem;
    font-weight: 550;
}

.admin-body .field span small {
    float: right;
    color: var(--admin-muted);
    font-weight: 400;
}

.admin-form-help {
    display: block;
    color: var(--admin-muted);
    font-size: 0.64rem;
    line-height: 1.4;
}

.admin-form-help.is-warning {
    color: var(--admin-warning);
}

.admin-body :is(button, select):disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.admin-body .field :is(input, select, textarea),
[data-theme='dark'] .admin-body .field :is(input, select, textarea) {
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    border-color: var(--admin-border);
    border-radius: 0.65rem;
    background: var(--admin-surface-soft);
    color: var(--admin-ink);
    font-size: 0.78rem;
}

.admin-body .data-table {
    background: transparent;
}

.admin-body .data-table th,
.admin-body .data-table td {
    border-color: var(--admin-border);
}

.admin-body .data-table th {
    color: var(--admin-muted);
    font-size: 0.68rem;
}

.admin-body .data-table td {
    color: var(--admin-ink);
    font-size: 0.76rem;
}

.admin-operation-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(7rem, auto) minmax(5.5rem, auto) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-operation-row:last-child {
    border-bottom: 0;
}

.admin-operation-row > div,
.admin-workflow-card > div:first-child {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.admin-operation-row strong,
.admin-workflow-card strong {
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-operation-row p,
.admin-workflow-card p {
    overflow: hidden;
    color: var(--admin-muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
}

.admin-save-icon {
    min-height: 2.45rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.6rem;
    background: var(--admin-surface);
    color: var(--admin-accent);
    font-size: 0.7rem;
    font-weight: 700;
}

.admin-workflow-list {
    padding-top: 0.1rem;
}

.admin-workflow-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.7rem;
    background: var(--admin-surface-soft);
}

.admin-operation-type {
    color: var(--admin-accent);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-operation-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-operation-controls input {
    flex: 1 1 9rem;
    min-width: 0;
}

.admin-secure-note {
    color: var(--admin-positive);
    font-size: 0.68rem;
    font-weight: 650;
}

.admin-template-row {
    display: flex;
    overflow-x: auto;
    gap: 0.45rem;
    padding: 0.9rem 0;
}

.admin-template-row button {
    min-height: 2.2rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    background: var(--admin-surface-soft);
    color: var(--admin-muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.admin-template-row button:hover {
    border-color: var(--admin-accent);
    color: var(--admin-accent);
}

.admin-send-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.3rem;
    padding: 0.85rem;
    border-radius: 0.7rem;
    background: var(--admin-surface-soft);
}

.admin-send-summary > span {
    display: grid;
    gap: 0.15rem;
}

.admin-send-summary strong {
    font-size: 0.76rem;
}

.admin-send-summary small {
    color: var(--admin-muted);
    font-size: 0.66rem;
}

.admin-log-list {
    max-height: 49rem;
    overflow-y: auto;
}

.admin-log-row {
    display: grid;
    grid-template-columns: 0.55rem minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-log-row:last-child {
    border-bottom: 0;
}

.admin-tone-dot {
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.25rem;
    border-radius: 50%;
    background: var(--admin-accent);
}

.admin-tone-dot.tone-success {
    background: var(--admin-positive);
}

.admin-tone-dot.tone-warning {
    background: var(--admin-warning);
}

.admin-log-row strong,
.admin-log-row p,
.admin-log-row small {
    display: block;
}

.admin-log-row strong {
    font-size: 0.76rem;
}

.admin-log-row p {
    margin-top: 0.18rem;
    color: var(--admin-muted);
    font-size: 0.69rem;
    line-height: 1.4;
}

.admin-log-row small {
    margin-top: 0.25rem;
    color: var(--admin-muted);
    font-size: 0.61rem;
}

.admin-flash {
    max-width: 1540px;
    margin: 0 auto 1rem;
    border-color: color-mix(in srgb, var(--admin-accent) 35%, var(--admin-border));
    background: var(--admin-accent-soft);
    color: var(--admin-ink);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

@media (max-width: 1180px) {
    .admin-layout {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-main {
        padding-inline: 1.25rem;
    }

    .admin-topbar {
        margin-inline: -1.25rem;
        padding-inline: 1.25rem;
    }

    .admin-client-commandbar {
        top: 5rem;
    }
}

@media (max-width: 900px) {
    .admin-layout {
        display: block;
    }

    .admin-sidebar {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: auto;
        height: auto;
        align-items: center;
        gap: 0.75rem;
        padding: 0.8rem 1rem;
    }

    .admin-brand {
        padding: 0;
    }

    .admin-brand .brand-logo {
        width: 7rem;
    }

    .admin-nav {
        display: flex;
        justify-content: center;
    }

    .admin-sidebar .sidebar-link {
        min-height: 2.35rem;
        padding: 0.5rem 0.65rem;
        font-size: 0.72rem;
    }

    .admin-create-button {
        min-height: 2.35rem;
        padding: 0.45rem 0.7rem;
        font-size: 0.7rem;
    }

    .sidebar-footer {
        display: none;
    }

    .admin-main {
        padding-top: 0;
    }

    .admin-topbar {
        top: 0;
    }

    .admin-dashboard-grid,
    .admin-comms-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .admin-sidebar {
        grid-template-columns: 1fr auto;
    }

    .admin-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: stretch;
    }

    .admin-sidebar .sidebar-link {
        flex: 1;
        justify-content: center;
    }

    .admin-create-button {
        grid-column: 2;
        grid-row: 1;
    }

    .admin-main {
        padding: 0 0.8rem 2rem;
    }

    .admin-topbar {
        min-height: 3.6rem;
        margin: 0 -0.8rem 1rem;
        padding: 0 0.8rem;
    }

    .admin-topbar-actions .admin-topbar-link,
    .admin-topbar-actions .primary-button {
        display: none;
    }

    .admin-page-heading,
    .admin-client-hero {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        padding: 0.4rem 0;
    }

    .admin-body h1 {
        font-size: 2.25rem;
    }

    .admin-kpi-grid,
    .admin-kpi-grid.three-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-table {
        min-width: 44rem;
    }

    .admin-kpi-card {
        min-height: 7rem;
        padding: 0.8rem;
    }

    .admin-client-commandbar {
        top: 4.2rem;
        align-items: stretch;
        flex-direction: column;
    }

    .admin-section-nav a {
        flex: 0 0 auto;
    }

    .admin-quick-status {
        width: 100%;
    }

    .admin-quick-status label {
        flex: 1;
    }

    .admin-quick-status select {
        width: 100%;
    }

    .admin-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-filter-bar label,
    .admin-filter-bar select,
    .admin-filter-bar .primary-button {
        width: 100%;
    }

    .admin-search-control {
        flex-basis: auto;
    }

    .admin-operation-row {
        grid-template-columns: 1fr 1fr;
    }

    .admin-login-audit-summary {
        grid-template-columns: 1fr;
    }

    .admin-operation-row > div {
        grid-column: 1 / -1;
    }

    .admin-send-summary {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Final cascade placement for the new luxury-ledger surfaces. */
.panel-card.admin-privilege-panel {
    border-color: color-mix(in srgb, var(--angelos-gold) 42%, var(--border));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--angelos-gold) 14%, transparent), transparent 34%),
        var(--bg-elevated);
}

.panel-card.admin-card-balance-panel {
    border-color: color-mix(in srgb, var(--angelos-gold) 28%, var(--border));
}

.pay-account-health-space.pay-privilege-space {
    border-color: color-mix(in srgb, var(--angelos-gold) 40%, var(--pay-line));
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--angelos-gold) 9%, var(--pay-card)), var(--pay-card) 62%);
}

/* Complete Account Health scale and reward-threshold notices. */
:is(.grade-a-plus, .grade-a, .grade-a-minus) {
    --health-accent: #315e50;
    --health-readable: #315e50;
    --health-soft: #e0ebe6;
}

.grade-a-plus {
    --health-accent: #245846;
    --health-readable: #245846;
}

.grade-a-minus {
    --health-accent: #42685b;
    --health-readable: #42685b;
}

:is(.grade-b-plus, .grade-b, .grade-b-minus) {
    --health-accent: #4f5d56;
    --health-readable: #4f5d56;
    --health-soft: #e5e9e7;
}

.grade-b-plus {
    --health-accent: #465b52;
    --health-readable: #465b52;
}

.grade-b-minus {
    --health-accent: #606960;
    --health-readable: #606960;
}

:is(.grade-c-plus, .grade-c, .grade-c-minus) {
    --health-accent: #6a583b;
    --health-readable: #6a583b;
    --health-soft: #eee9df;
}

.grade-c-plus {
    --health-accent: #665a43;
    --health-readable: #665a43;
}

.grade-c-minus {
    --health-accent: #74533f;
    --health-readable: #74533f;
    --health-soft: #eee4df;
}

:is(.grade-d-plus, .grade-d, .grade-d-minus, .grade-f) {
    --health-accent: #6b4f4c;
    --health-readable: #6b4f4c;
    --health-soft: #ece4e3;
}

.account-health-admin .admin-health-grade {
    background: var(--health-accent);
    color: #fff;
}

[data-theme='dark'] .account-health-admin .admin-health-grade {
    background: var(--health-accent);
    color: #fff;
}

.grade-d-minus,
.grade-f {
    --health-accent: #5b3e49;
    --health-readable: #5b3e49;
    --health-soft: #e9e1e4;
}

[data-theme='dark'] :is(.grade-a-plus, .grade-a, .grade-a-minus) {
    --health-readable: #9ed5b9;
    --health-soft: #1d312a;
}

[data-theme='dark'] :is(.grade-b-plus, .grade-b, .grade-b-minus) {
    --health-readable: #c4ccd5;
    --health-soft: #292d2c;
}

[data-theme='dark'] :is(.grade-c-plus, .grade-c, .grade-c-minus) {
    --health-readable: #e0c48c;
    --health-soft: #352f24;
}

[data-theme='dark'] :is(.grade-d-plus, .grade-d, .grade-d-minus, .grade-f) {
    --health-readable: #efa7b6;
    --health-soft: #35272d;
}

.pay-health-threshold-notice {
    position: relative;
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.3rem 0.75rem;
    overflow: hidden;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--health-accent) 40%, var(--pay-line));
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--health-accent) 17%, transparent), transparent 42%),
        color-mix(in srgb, var(--health-soft) 64%, var(--pay-card));
    color: var(--pay-ink);
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--health-accent) 8%, transparent);
}

.pay-card-management > .pay-health-threshold-notice {
    margin: 0.85rem 1rem 0;
}

.pay-health-threshold-art {
    display: grid;
    grid-row: 1 / span 2;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--health-accent) 12%, var(--pay-card));
}

.pay-health-threshold-art img {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain;
    opacity: 0.75;
}

.pay-health-threshold-copy,
.pay-health-threshold-copy > * {
    display: block;
    min-width: 0;
}

.pay-health-threshold-copy .pay-kicker {
    color: var(--health-readable);
    font-size: 0.58rem;
}

.pay-health-threshold-copy strong {
    margin-top: 0.12rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.14;
}

.pay-health-threshold-copy small {
    margin-top: 0.24rem;
    color: var(--pay-muted);
    font-size: 0.67rem;
    line-height: 1.4;
}

.pay-health-threshold-grade {
    display: grid;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0 0.35rem;
    place-items: center;
    border-radius: 50%;
    background: var(--health-accent);
    color: #fff;
    font-family: var(--font-numeric);
    font-size: 0.82rem;
    font-weight: 850;
}

.pay-health-threshold-notice > a {
    grid-column: 2 / 4;
    justify-self: start;
    padding: 0.34rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--health-accent) 36%, transparent);
    border-radius: 999px;
    color: var(--health-readable);
    font-size: 0.63rem;
    font-weight: 800;
}

.pay-health-threshold-notice.is-restricted {
    border-color: color-mix(in srgb, var(--health-accent) 58%, var(--pay-line));
}

.admin-health-threshold-note {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--admin-warning) 28%, var(--admin-border));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--admin-warning) 7%, var(--admin-surface));
    color: var(--admin-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

@media (max-width: 390px) {
    .pay-health-threshold-notice {
        grid-template-columns: 2.65rem minmax(0, 1fr) auto;
        gap: 0.25rem 0.6rem;
        padding: 0.75rem;
    }

    .pay-health-threshold-art {
        width: 2.65rem;
        height: 2.65rem;
    }

    .pay-health-threshold-copy small {
        font-size: 0.64rem;
    }
}

/* Stable PWA chrome and one loading indicator, without stacked entrances. */
body.pay-client {
    --pay-safe-top: env(safe-area-inset-top, 0px);
    padding-top: var(--pay-safe-top);
}

body.pay-client::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: var(--pay-safe-top);
    z-index: 110;
    background: var(--pay-card);
    pointer-events: none;
}

body.pay-client .pay-header,
body.pay-client .pay-ledger-header,
body.pay-client .pay-income-titlebar,
body.pay-client .pay-card-titlebar {
    top: var(--pay-safe-top);
    background: var(--pay-card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
}

body.pay-client .pay-header-row {
    padding-top: 0.8rem;
    transition: none;
}

body.pay-client .pay-ledger-toolbar,
body.pay-client .pay-card-titlebar,
body.pay-client .pay-health-titlebar,
body.pay-client .pay-spot-titlebar {
    padding-top: 0.75rem;
    transition: none;
}

body.pay-client .pay-more-hero {
    position: relative;
    top: auto;
    padding-top: 2rem;
    transition: none;
}

body.pay-client .pay-tabbar {
    background: var(--pay-card);
}

html.is-ready body.pay-client .pay-page-shell,
html.is-ready body.pay-client .pay-tab.is-active svg {
    animation: none;
    transform: none;
}

html.has-lazy-content body.pay-client .pay-lazy-item {
    opacity: 1;
    transform: none;
    transition: none;
}

body.pay-client .pay-transaction-group,
body.pay-client .pay-more-card {
    content-visibility: visible;
}

body.pay-client .pay-loader-skeleton {
    display: none;
}

html.is-preloading body.pay-client > :not(.app-placeholder) {
    visibility: visible;
}

body.pay-client .pay-app-loader {
    background: transparent;
    pointer-events: none;
}

body.pay-client .pay-native-loader {
    animation: none;
    top: calc(var(--pay-safe-top) + 4.75rem);
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--pay-line);
    border-radius: 50%;
    background: var(--pay-card);
}

body.pay-client .pay-native-spinner {
    width: 1.1rem;
    height: 1.1rem;
    background: conic-gradient(from -35deg, transparent 0 24%, var(--pay-ink) 25% 100%);
}

body.pay-client .pay-pull-refresh {
    top: calc(var(--pay-safe-top) + 4.5rem);
}

body.pay-client .pay-income-titlebar {
    min-height: 4.25rem;
    padding-top: 0;
}

body.pay-client .pay-income-hero::after {
    animation: none;
}