:root {
    --bp-navy: #0d3b66;
    --bp-navy-900: #08243f;
    --bp-yellow: #f4d35e;
    --bp-yellow-700: #c49a15;
    --bp-ink: #1f2937;
    --bp-muted: #667085;
    --bp-line: #e6ebf1;
    --bp-soft: #f7f9fc;
    --bp-bg: #ffffff;
    --bp-surface: #ffffff;
    --bp-surface-soft: #f8fafc;
    --bp-surface-muted: #fcfcfd;
    --bp-heading: #101828;
    --bp-nav-text: #344054;
    --bp-shadow: rgba(15, 23, 42, 0.14);
    --bp-green: #13795b;
    --bp-red: #b42318;
    --bp-blue: #175cd3;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bp-navy: #7eb6ec;
    --bp-navy-900: #b7d7f5;
    --bp-yellow: #f4d35e;
    --bp-yellow-700: #f7dc7f;
    --bp-ink: #e5e7eb;
    --bp-muted: #9ca3af;
    --bp-line: #27364a;
    --bp-soft: #111827;
    --bp-bg: #0b1220;
    --bp-surface: #111827;
    --bp-surface-soft: #172033;
    --bp-surface-muted: #151e2e;
    --bp-heading: #f8fafc;
    --bp-nav-text: #d1d5db;
    --bp-shadow: rgba(0, 0, 0, 0.38);
    --bp-green: #47c99a;
    --bp-red: #ff8a80;
    --bp-blue: #8ab8ff;
    color-scheme: dark;
}

html,
body {
    min-height: 100%;
}

body {
    background: var(--bp-bg) !important;
    color: var(--bp-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

a {
    color: var(--bp-navy);
}

.bp-shell {
    min-height: 100vh;
    background: var(--bp-bg);
}

.bp-main {
    max-width: 1480px;
    padding: 1.5rem clamp(1rem, 2.2vw, 2rem) 2.75rem;
}

.app-nav.bp-nav {
    position: relative;
    top: auto;
    z-index: 30;
    border-bottom: 1px solid var(--bp-line);
    background: var(--bp-surface);
    box-shadow: none;
}

.app-nav.bp-nav > div {
    max-width: 1480px;
    min-height: 4.5rem;
    padding: 0.65rem clamp(1rem, 2vw, 2rem);
}

.bp-brand img {
    width: 178px;
    max-height: 54px;
    object-fit: contain;
}

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

:root[data-theme="dark"] .bp-logo-default {
    display: none;
}

:root[data-theme="dark"] .bp-logo-dark {
    display: block;
}

.bp-brand,
.bp-brand:hover,
.bp-brand:focus {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bp-nav-links {
    gap: 0.35rem;
}

.bp-nav-links a,
.bp-menu summary,
.bp-user-menu summary {
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--bp-nav-text);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0;
}

.bp-nav-links a:hover,
.bp-menu summary:hover,
.bp-user-menu summary:hover,
.bp-menu[open] summary,
.bp-user-menu[open] summary {
    border-color: rgba(13, 59, 102, 0.14);
    background: var(--bp-surface-soft);
    color: var(--bp-navy);
}

.bp-menu summary,
.bp-user-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    list-style: none;
}

.bp-menu summary::-webkit-details-marker,
.bp-user-menu summary::-webkit-details-marker {
    display: none;
}

.bp-menu summary::after,
.bp-user-menu summary::after {
    width: 0.42rem;
    height: 0.42rem;
    margin-top: -0.16rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform 0.16s ease;
}

.bp-menu[open] summary::after,
.bp-user-menu[open] summary::after {
    margin-top: 0.12rem;
    transform: rotate(225deg);
}

.bp-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--bp-line);
    border-radius: 999px !important;
    background: var(--bp-surface-soft);
    color: var(--bp-nav-text);
    font-size: 0.82rem;
    font-weight: 900;
}

.bp-theme-toggle:hover {
    background: var(--bp-yellow);
    color: #08243f;
}

.bp-theme-dot {
    width: 0.74rem;
    height: 0.74rem;
    border-radius: 999px;
    background: var(--bp-yellow);
    box-shadow: inset 0 0 0 2px rgba(8, 36, 63, 0.18);
}

:root[data-theme="dark"] .bp-theme-dot {
    background: var(--bp-navy);
    box-shadow: inset -3px -2px 0 rgba(255, 255, 255, 0.35);
}

.bp-menu > div,
.bp-user-menu > div {
    min-width: 13rem;
    border: 1px solid var(--bp-line);
    border-radius: 0.75rem;
    background: var(--bp-surface);
    box-shadow: 0 20px 40px var(--bp-shadow);
}

.bp-menu > div a,
.bp-user-menu > div span {
    color: var(--bp-nav-text);
}

.bp-menu > div a:hover {
    background: var(--bp-surface-soft);
    color: var(--bp-navy);
}

.bp-user-menu button {
    width: 100%;
    border: 0;
    border-radius: 0.55rem;
    background: var(--bp-navy);
    color: #fff;
    font-weight: 900;
}

.page-title,
.dashboard-hero h1,
.bp-page-title {
    color: var(--bp-heading);
    font-weight: 900;
}

.page-subtitle,
.dashboard-hero p,
.muted {
    color: var(--bp-muted);
}

.panel,
.table-wrap,
.metric-card,
.dashboard-hero,
.docs-card,
.payment-shell-card,
.pay-card {
    border: 1px solid var(--bp-line) !important;
    border-radius: 0.9rem !important;
    background: var(--bp-surface) !important;
    box-shadow: none !important;
}

.panel-head {
    border-bottom: 1px solid var(--bp-line);
    background: var(--bp-surface);
}

.panel-title,
.form-grid label span,
.auth-kicker,
.dashboard-kicker {
    color: var(--bp-heading);
    font-weight: 900;
}

.data-table {
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead {
    background: var(--bp-surface-soft) !important;
}

.data-table th {
    border-bottom: 1px solid var(--bp-line);
    color: #667085 !important;
    font-size: 0.72rem;
    font-weight: 900;
}

.data-table td {
    border-bottom: 1px solid #eef2f6;
    color: var(--bp-ink);
}

.data-table input,
.data-table select {
    min-width: 0 !important;
    max-width: 11rem;
}

.data-table .action-link,
.data-table button {
    white-space: nowrap;
}

.data-table tbody tr:hover {
    background: #fffdf3;
}

.badge,
.badge-brand,
.badge.badge-brand {
    border-radius: 999px;
    background: #edf4ff;
    color: var(--bp-navy);
}

.badge-green {
    background: #e7f6ef;
    color: var(--bp-green);
}

.badge-red {
    background: #fff1f0;
    color: var(--bp-red);
}

button,
.btn,
.auth-form button,
.form-grid button,
.share-link-box button {
    border: 0;
    border-radius: 0.6rem !important;
    background: var(--bp-navy);
    color: #fff;
    font-weight: 900;
}

button:hover,
.btn:hover,
.auth-form button:hover,
.form-grid button:hover,
.share-link-box button:hover {
    background: var(--bp-navy-900);
    color: #fff;
}

button:disabled,
.btn:disabled {
    background: #98a2b3 !important;
    color: #fff !important;
    cursor: not-allowed;
}

.action-link {
    border-radius: 0.55rem;
    background: #eef4ff;
    color: var(--bp-navy);
    font-weight: 900;
}

.action-danger,
.danger-link {
    background: #fff1f0;
    color: var(--bp-red);
}

input,
select,
textarea,
.form-control,
.form-select {
    border-radius: 0.6rem !important;
    border-color: #cfd8e3 !important;
    background-color: #fff !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--bp-navy) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 59, 102, 0.13) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    border-color: var(--bp-line) !important;
    background-color: #0f172a !important;
    color: var(--bp-ink) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: #6b7280;
}

:root[data-theme="dark"] .data-table td {
    border-bottom-color: var(--bp-line);
}

:root[data-theme="dark"] .data-table tbody tr:hover {
    background: rgba(244, 211, 94, 0.08);
}

:root[data-theme="dark"] .badge-brand,
:root[data-theme="dark"] .badge.badge-brand {
    background: rgba(126, 182, 236, 0.16);
    color: #b7d7f5;
}

:root[data-theme="dark"] .badge-green {
    background: rgba(71, 201, 154, 0.14);
}

:root[data-theme="dark"] .badge-red {
    background: rgba(255, 138, 128, 0.14);
}

:root[data-theme="dark"] .action-link {
    background: rgba(126, 182, 236, 0.13);
}

:root[data-theme="dark"] .action-danger,
:root[data-theme="dark"] .danger-link {
    background: rgba(255, 138, 128, 0.12);
}

.dashboard-shell {
    display: grid;
    gap: 1.15rem;
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.3rem;
    border-left: 0.35rem solid var(--bp-yellow) !important;
}

.dashboard-kicker {
    color: var(--bp-yellow-700);
    font-size: 0.74rem;
    text-transform: uppercase;
}

.dashboard-scope {
    display: flex;
    gap: 0.7rem;
}

.dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.2rem;
}

.dashboard-section-heading span {
    color: #101828;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-section-heading small {
    color: var(--bp-muted);
    font-weight: 800;
}

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

.metric-card {
    position: relative;
    min-height: 8rem;
    padding: 1rem;
    overflow: hidden;
}

.metric-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.32rem;
    content: "";
}

.metric-card span {
    display: block;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 900;
}

.metric-card strong {
    display: block;
    margin-top: 1rem;
    color: #101828;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 950;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.metric-blue::before,
.metric-brand::before {
    background: var(--bp-navy);
}

.metric-yellow::before {
    background: var(--bp-yellow);
}

.metric-green::before {
    background: var(--bp-green);
}

.metric-red::before {
    background: var(--bp-red);
}

.analytics-board {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bp-line);
    border-radius: 1rem;
    background: #fff;
}

.analytics-board-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--bp-line);
}

.analytics-board-head span,
.line-card-head span {
    color: var(--bp-yellow-700);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.analytics-board-head h2 {
    margin: 0.25rem 0 0;
    color: #101828;
    font-size: 1.25rem;
    font-weight: 950;
}

.analytics-board-head small,
.line-card-head small,
.chart-stat {
    color: var(--bp-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

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

.line-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--bp-line);
    border-radius: 0.9rem;
    background: #fcfcfd;
}

.line-card-wide {
    grid-column: span 1;
}

.line-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.line-card-head strong {
    display: block;
    margin-top: 0.18rem;
    color: #101828;
    font-size: 1rem;
    font-weight: 950;
}

.line-card svg {
    display: block;
    width: 100%;
    height: 11.5rem;
    border-radius: 0.75rem;
    background:
        linear-gradient(to right, rgba(207, 216, 227, 0.55) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(207, 216, 227, 0.55) 1px, transparent 1px),
        #fff;
    background-size: 25% 100%, 100% 33.33%;
}

.line-card polyline {
    fill: none;
    stroke: var(--bp-navy);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.decision-chart .approved-series {
    stroke: var(--bp-green);
}

.decision-chart .rejected-series {
    stroke: var(--bp-red);
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.65rem;
    color: var(--bp-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.chart-labels-dense span {
    writing-mode: horizontal-tb;
}

.chart-stat {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bp-line);
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #344054;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: none;
}

.chart-legend i {
    width: 1.1rem;
    height: 0.22rem;
    border-radius: 999px;
}

.approved-line {
    background: var(--bp-green);
}

.rejected-line {
    background: var(--bp-red);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1rem;
}

.dashboard-grid > .panel:nth-child(1) {
    order: 2;
}

.dashboard-grid > .panel:nth-child(2) {
    order: 3;
}

.dashboard-grid > .panel:nth-child(3) {
    order: 1;
}

.dashboard-grid .panel:nth-child(3) {
    grid-column: 1 / -1;
}

.status-row {
    grid-template-columns: minmax(10rem, 0.65fr) minmax(8rem, 1fr) 3rem;
}

.status-meter {
    background: #eef2f6;
}

.status-meter span {
    background: var(--bp-navy);
}

.method-mix {
    display: grid;
    gap: 0.65rem;
}

.method-mix > div {
    border: 1px solid var(--bp-line);
    border-radius: 0.75rem;
    padding: 0.85rem;
    background: #fcfcfd;
}

.method-mix span,
.method-mix small {
    color: var(--bp-muted);
}

.method-mix strong {
    color: #101828;
}

.daily-bars {
    min-height: 12rem;
}

.daily-bar > div {
    background: #f2f4f7;
}

.daily-bar > div span {
    background: linear-gradient(180deg, var(--bp-yellow), var(--bp-navy));
}

.text-brand {
    color: var(--bp-navy) !important;
}

.money {
    white-space: nowrap;
}

.bp-login-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(26rem, 0.95fr) minmax(28rem, 1.05fr);
    background: #fff;
}

.bp-login-brand {
    display: grid;
    align-content: space-between;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 3rem);
    border-right: 1px solid var(--bp-line);
    background:
        linear-gradient(180deg, rgba(244, 211, 94, 0.18), transparent 38%),
        #fff;
}

.bp-login-brand img {
    width: min(270px, 80%);
}

.bp-login-copy span,
.bp-login-card-head span,
.bp-pay-section-title {
    color: var(--bp-yellow-700);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bp-login-copy h1 {
    max-width: 33rem;
    margin: 0.65rem 0;
    color: #101828;
    font-size: clamp(2rem, 3.7vw, 3.8rem);
    line-height: 1;
    font-weight: 950;
}

.bp-login-copy p {
    max-width: 30rem;
    color: var(--bp-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.bp-login-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.bp-login-strip div {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--bp-line);
    border-left: 0.35rem solid var(--bp-yellow);
    border-radius: 0.85rem;
    background: #fff;
}

.bp-login-strip strong,
.bp-login-strip small {
    display: block;
}

.bp-login-strip strong {
    color: var(--bp-navy);
}

.bp-login-strip small {
    color: var(--bp-muted);
    font-size: 0.8rem;
}

.bp-login-card {
    align-self: center;
    width: min(30rem, calc(100% - 2rem));
    margin: 2rem auto;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--bp-line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.1);
}

.bp-login-card h2 {
    margin: 0.55rem 0 0.35rem;
    color: #101828;
    font-size: 1.8rem;
    font-weight: 950;
}

.bp-login-card p,
.bp-login-note {
    color: var(--bp-muted);
}

.bp-login-form {
    margin-top: 1.7rem;
}

.bp-login-form button {
    width: 100%;
    min-height: 3rem;
}

.bp-login-note {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bp-line);
    font-size: 0.82rem;
    font-weight: 700;
}

.auth-alert {
    border-radius: 0.7rem;
}

.bp-pay-page {
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2rem);
    background: #fff;
}

.bp-pay-hero {
    max-width: 1100px;
    margin: 0 auto 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bp-line);
}

.bp-pay-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bp-pay-brand img {
    width: 165px;
}

.bp-pay-brand span,
.bp-pay-total span {
    display: block;
    color: var(--bp-muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bp-pay-brand strong {
    color: #101828;
    font-size: 1.05rem;
}

.bp-pay-total {
    min-width: 13rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--bp-line);
    border-left: 0.35rem solid var(--bp-yellow);
    border-radius: 0.9rem;
    background: #fff;
    text-align: right;
}

.bp-pay-total strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--bp-navy);
    font-size: 1.45rem;
    font-weight: 950;
}

.bp-pay-desk {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 1rem;
    align-items: start;
}

.bp-pay-order,
.bp-pay-instructions,
.bp-pay-submit {
    border: 1px solid var(--bp-line);
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
}

.bp-pay-submit {
    grid-column: 1 / -1;
}

.bp-pay-order dl,
.bp-bank-grid {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0 0;
}

.bp-pay-order div,
.bp-bank-grid div {
    padding: 0.75rem;
    border: 1px solid var(--bp-line);
    border-radius: 0.75rem;
    background: #fcfcfd;
}

.bp-pay-order dt,
.bp-bank-grid dt {
    color: var(--bp-muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bp-pay-order dd,
.bp-bank-grid dd {
    margin: 0.25rem 0 0;
    color: #101828;
    font-weight: 900;
    word-break: break-word;
}

.bp-method-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1rem 0;
}

.bp-method-tab {
    min-height: 2.45rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bp-line);
    background: #fff;
    color: var(--bp-navy);
}

.bp-method-tab.active {
    background: var(--bp-navy);
    color: #fff;
}

.bp-method-panel {
    display: none;
    margin-top: 1rem;
}

.bp-method-panel.active {
    display: block;
}

.bp-upi-layout {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    align-items: center;
}

.bp-qr-frame {
    padding: 0.65rem;
    border: 1px solid var(--bp-line);
    border-radius: 0.8rem;
    background: #fff;
}

.bp-qr-frame img {
    display: block;
    width: 100%;
}

.bp-upi-copy span {
    color: var(--bp-muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bp-upi-copy strong {
    display: block;
    margin: 0.35rem 0 1rem;
    color: #101828;
    font-size: 1.25rem;
    word-break: break-word;
}

.bp-upi-copy a {
    display: inline-flex;
    padding: 0.65rem 1rem;
    border-radius: 0.6rem;
    background: var(--bp-yellow);
    color: var(--bp-navy-900);
    font-weight: 900;
    text-decoration: none;
}

.bp-submit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-top: 1rem;
}

.bp-submit-form label span {
    display: block;
    margin-bottom: 0.35rem;
    color: #344054;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bp-submit-form input[type="text"],
.bp-submit-form input:not([type]) {
    width: 100%;
}

.bp-submit-form .bp-terms,
.bp-submit-form button {
    grid-column: 1 / -1;
}

.bp-submit-form button {
    min-height: 3rem;
}

.bp-terms {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: #344054;
    font-size: 0.86rem;
    font-weight: 700;
}

.bp-terms span {
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    text-transform: none !important;
}

.utr-state {
    display: block;
    margin-top: 0.35rem;
    color: var(--bp-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.utr-state.ok {
    color: var(--bp-green);
}

.utr-state.error {
    color: var(--bp-red);
}

.utr-state.checking {
    color: var(--bp-blue);
}

.bp-onboarding-page {
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2.2rem);
    background: #fff;
}

.bp-onboarding-hero,
.bp-onboarding-card,
.bp-onboarding-success {
    max-width: 1120px;
    margin: 0 auto 1rem;
    border: 1px solid var(--bp-line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: none;
}

.bp-onboarding-hero {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem;
    border-left: 0.35rem solid var(--bp-yellow);
}

.bp-onboarding-hero img,
.bp-onboarding-success img {
    width: 180px;
}

.bp-onboarding-hero span,
.bp-onboarding-success span,
.bp-section-head span {
    color: var(--bp-yellow-700);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bp-onboarding-hero h1,
.bp-onboarding-success h1,
.bp-section-head h2 {
    margin: 0.35rem 0;
    color: #101828;
    font-weight: 950;
}

.bp-onboarding-hero p,
.bp-onboarding-success p {
    margin: 0;
    color: var(--bp-muted);
}

.bp-onboarding-card {
    overflow: hidden;
}

.bp-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--bp-line);
    background: #f8fafc;
}

.bp-stepper button {
    min-height: 3.25rem;
    border: 0;
    border-right: 1px solid var(--bp-line);
    border-radius: 0 !important;
    background: transparent;
    color: #667085;
}

.bp-stepper button.active {
    background: var(--bp-yellow);
    color: var(--bp-navy-900);
}

.bp-onboarding-step {
    display: none;
    padding: 1.25rem;
}

.bp-onboarding-step.active {
    display: block;
}

.bp-field-help {
    display: block;
    margin-top: 0.35rem;
    color: var(--bp-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.bp-field-help.error {
    color: var(--bp-red);
}

.bp-onboarding-card input.is-invalid {
    border-color: #f04438 !important;
    box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1) !important;
}

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

.bp-camera-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--bp-line);
    border-radius: 0.9rem;
    background: var(--bp-surface-muted);
}

.bp-camera-card > span {
    color: var(--bp-yellow-700);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bp-camera-card video,
.bp-camera-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--bp-line);
    border-radius: 0.8rem;
    background: #0f172a;
    object-fit: cover;
}

.bp-camera-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.bp-camera-actions button {
    min-height: 2.45rem;
    padding-inline: 1rem;
}

.bp-camera-card small {
    color: var(--bp-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.bp-map-picker {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--bp-line);
    border-radius: 0.9rem;
    background: var(--bp-surface-muted);
}

.bp-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bp-map-head span {
    display: block;
    color: var(--bp-yellow-700);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bp-map-head strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--bp-heading);
    font-weight: 950;
}

.bp-map-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
}

.bp-google-map {
    width: 100%;
    min-height: 22rem;
    border: 1px solid var(--bp-line);
    border-radius: 0.85rem;
}

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

.bp-upload-grid label {
    display: grid;
    gap: 0.45rem;
    min-height: 6rem;
    padding: 0.9rem;
    border: 1px dashed #b6c2cf;
    border-radius: 0.85rem;
    background: #fcfcfd;
}

.bp-upload-grid span {
    color: #344054;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bp-location-btn {
    margin-top: 1rem;
    min-height: 2.5rem;
    padding: 0 1rem;
}

.bp-onboarding-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bp-line);
    background: #f8fafc;
}

.bp-onboarding-success {
    max-width: 680px;
    margin-top: 4rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}

.hidden {
    display: none !important;
}

@media (max-width: 1100px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .dashboard-grid,
    .bp-pay-desk,
    .bp-login-page {
        grid-template-columns: 1fr;
    }

    .bp-login-page {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .dashboard-grid .panel:nth-child(3),
    .bp-pay-submit {
        grid-column: auto;
    }

    .dashboard-hero,
    .bp-pay-hero {
        grid-template-columns: 1fr;
    }

    .dashboard-scope,
    .bp-pay-total {
        width: 100%;
        text-align: left;
    }
}

@media (max-width: 760px) {
    .bp-main {
        padding-inline: 0.8rem;
    }

    .analytics-board-head,
    .line-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .chart-labels {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.15rem;
    }

    .chart-labels span {
        flex: 0 0 auto;
    }

    .dashboard-metrics,
    .bp-submit-form,
    .bp-onboarding-hero,
    .bp-camera-grid,
    .bp-upload-grid,
    .bp-stepper,
    .bp-upi-layout {
        grid-template-columns: 1fr;
    }

    .bp-stepper button {
        border-right: 0;
        border-bottom: 1px solid var(--bp-line);
    }

    .bp-onboarding-actions,
    .dashboard-scope {
        align-items: stretch;
        flex-direction: column;
    }

    .bp-pay-brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .bp-login-brand,
    .bp-login-card {
        padding: 1.25rem;
    }
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .bp-shell,
:root[data-theme="dark"] .bp-login-page,
:root[data-theme="dark"] .bp-pay-page,
:root[data-theme="dark"] .bp-onboarding-page {
    background: var(--bp-bg) !important;
    color: var(--bp-ink);
}

:root[data-theme="dark"] .app-nav.bp-nav,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .dashboard-hero,
:root[data-theme="dark"] .analytics-board,
:root[data-theme="dark"] .line-card,
:root[data-theme="dark"] .docs-card,
:root[data-theme="dark"] .payment-shell-card,
:root[data-theme="dark"] .pay-card,
:root[data-theme="dark"] .bp-login-card,
:root[data-theme="dark"] .bp-login-brand,
:root[data-theme="dark"] .bp-login-strip div,
:root[data-theme="dark"] .bp-pay-order,
:root[data-theme="dark"] .bp-pay-instructions,
:root[data-theme="dark"] .bp-pay-submit,
:root[data-theme="dark"] .bp-pay-total,
:root[data-theme="dark"] .bp-onboarding-hero,
:root[data-theme="dark"] .bp-onboarding-card,
:root[data-theme="dark"] .bp-onboarding-success {
    border-color: var(--bp-line) !important;
    background: var(--bp-surface) !important;
    color: var(--bp-ink);
}

:root[data-theme="dark"] .panel-head,
:root[data-theme="dark"] .bp-stepper,
:root[data-theme="dark"] .bp-onboarding-actions,
:root[data-theme="dark"] .data-table thead,
:root[data-theme="dark"] .bp-theme-toggle {
    border-color: var(--bp-line) !important;
    background: var(--bp-surface-soft) !important;
}

:root[data-theme="dark"] .method-mix > div,
:root[data-theme="dark"] .bp-pay-order div,
:root[data-theme="dark"] .bp-bank-grid div,
:root[data-theme="dark"] .bp-upload-grid label,
:root[data-theme="dark"] .bp-camera-card,
:root[data-theme="dark"] .bp-map-picker,
:root[data-theme="dark"] .bp-qr-frame {
    border-color: var(--bp-line);
    background: var(--bp-surface-muted) !important;
}

:root[data-theme="dark"] .line-card svg {
    background:
        linear-gradient(to right, rgba(75, 85, 99, 0.42) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(75, 85, 99, 0.42) 1px, transparent 1px),
        #0f172a;
    background-size: 25% 100%, 100% 33.33%;
}

:root[data-theme="dark"] .page-title,
:root[data-theme="dark"] .dashboard-hero h1,
:root[data-theme="dark"] .bp-page-title,
:root[data-theme="dark"] .dashboard-section-heading span,
:root[data-theme="dark"] .metric-card strong,
:root[data-theme="dark"] .analytics-board-head h2,
:root[data-theme="dark"] .line-card-head strong,
:root[data-theme="dark"] .method-mix strong,
:root[data-theme="dark"] .bp-login-copy h1,
:root[data-theme="dark"] .bp-login-card h2,
:root[data-theme="dark"] .bp-pay-brand strong,
:root[data-theme="dark"] .bp-pay-order dd,
:root[data-theme="dark"] .bp-bank-grid dd,
:root[data-theme="dark"] .bp-upi-copy strong,
:root[data-theme="dark"] .bp-onboarding-hero h1,
:root[data-theme="dark"] .bp-onboarding-success h1,
:root[data-theme="dark"] .bp-section-head h2 {
    color: var(--bp-heading) !important;
}

:root[data-theme="dark"] .page-subtitle,
:root[data-theme="dark"] .dashboard-hero p,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .metric-card span,
:root[data-theme="dark"] .method-mix span,
:root[data-theme="dark"] .method-mix small,
:root[data-theme="dark"] .bp-login-copy p,
:root[data-theme="dark"] .bp-login-card p,
:root[data-theme="dark"] .bp-login-note,
:root[data-theme="dark"] .bp-login-strip small,
:root[data-theme="dark"] .bp-pay-brand span,
:root[data-theme="dark"] .bp-pay-total span,
:root[data-theme="dark"] .bp-pay-order dt,
:root[data-theme="dark"] .bp-bank-grid dt,
:root[data-theme="dark"] .bp-upi-copy span,
:root[data-theme="dark"] .bp-submit-form label span,
:root[data-theme="dark"] .bp-terms,
:root[data-theme="dark"] .bp-onboarding-hero p,
:root[data-theme="dark"] .bp-onboarding-success p,
:root[data-theme="dark"] .bp-field-help,
:root[data-theme="dark"] .chart-labels,
:root[data-theme="dark"] .chart-stat {
    color: var(--bp-muted) !important;
}

:root[data-theme="dark"] .data-table th {
    color: #9ca3af !important;
}

:root[data-theme="dark"] .data-table td,
:root[data-theme="dark"] .chart-legend span,
:root[data-theme="dark"] .bp-upload-grid span,
:root[data-theme="dark"] .bp-map-head strong {
    color: var(--bp-ink) !important;
}

:root[data-theme="dark"] .bp-nav-links a:hover,
:root[data-theme="dark"] .bp-menu summary:hover,
:root[data-theme="dark"] .bp-user-menu summary:hover,
:root[data-theme="dark"] .bp-menu[open] summary,
:root[data-theme="dark"] .bp-user-menu[open] summary {
    border-color: var(--bp-line);
    background: var(--bp-surface-soft);
}

:root[data-theme="dark"] .bp-menu > div,
:root[data-theme="dark"] .bp-user-menu > div {
    border-color: var(--bp-line);
    background: var(--bp-surface);
    box-shadow: 0 20px 40px var(--bp-shadow);
}

:root[data-theme="dark"] .bp-menu > div a:hover {
    background: var(--bp-surface-soft);
}

:root[data-theme="dark"] .bp-login-card {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

:root[data-theme="dark"] .bp-pay-total strong {
    color: var(--bp-yellow) !important;
}

:root[data-theme="dark"] .bp-method-tab {
    border-color: var(--bp-line);
    background: var(--bp-surface-muted);
    color: var(--bp-navy);
}

:root[data-theme="dark"] .bp-method-tab.active {
    background: var(--bp-navy);
    color: #08243f;
}

/* Dedicated dark navigation palette. */
.application-review-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.application-wide {
    grid-column: 1 / -1;
}

.application-detail-grid,
.application-evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.application-detail-grid > div,
.application-evidence-grid > div {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--bp-line);
    border-radius: 0.75rem;
    background: var(--bp-surface-muted);
}

.application-detail-grid span,
.application-evidence-grid span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--bp-muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.application-detail-grid strong,
.application-evidence-grid strong {
    color: var(--bp-heading);
    overflow-wrap: anywhere;
}

.application-evidence-grid {
    margin-top: 1rem;
}

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

.application-decision-grid form,
.merchant-compliance-form {
    display: grid;
    gap: 0.65rem;
}

.merchant-compliance-form {
    grid-template-columns: minmax(11rem, 0.55fr) minmax(15rem, 1fr) auto;
    padding: 0 1rem 1rem;
}

@media (max-width: 800px) {
    .application-review-layout,
    .application-detail-grid,
    .application-evidence-grid,
    .application-decision-grid,
    .merchant-compliance-form {
        grid-template-columns: 1fr;
    }

    .application-wide {
        grid-column: auto;
    }
}

:root[data-theme="dark"] .app-nav.bp-nav {
    border-bottom-color: #243b55 !important;
    background: #0a1626 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

:root[data-theme="dark"] .bp-brand,
:root[data-theme="dark"] .bp-brand:hover,
:root[data-theme="dark"] .bp-brand:focus {
    padding: 0;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .bp-nav-links > a,
:root[data-theme="dark"] .bp-menu > summary,
:root[data-theme="dark"] .bp-user-menu > summary {
    border-color: transparent;
    background: transparent;
    color: #dbe7f4;
}

:root[data-theme="dark"] .bp-nav-links > a:hover,
:root[data-theme="dark"] .bp-nav-links > a:focus,
:root[data-theme="dark"] .bp-menu > summary:hover,
:root[data-theme="dark"] .bp-menu > summary:focus,
:root[data-theme="dark"] .bp-user-menu > summary:hover,
:root[data-theme="dark"] .bp-user-menu > summary:focus,
:root[data-theme="dark"] .bp-menu[open] > summary,
:root[data-theme="dark"] .bp-user-menu[open] > summary {
    border-color: rgba(244, 211, 94, 0.3);
    background: rgba(244, 211, 94, 0.1);
    color: var(--bp-yellow);
}

:root[data-theme="dark"] .bp-theme-toggle {
    border-color: #31465f !important;
    background: #132337 !important;
    color: #dbe7f4;
}

:root[data-theme="dark"] .bp-theme-toggle:hover,
:root[data-theme="dark"] .bp-theme-toggle:focus {
    border-color: var(--bp-yellow) !important;
    background: var(--bp-yellow) !important;
    color: #08243f;
}

:root[data-theme="dark"] .bp-menu > div,
:root[data-theme="dark"] .bp-user-menu > div {
    border-color: #2b4058;
    background: #101f31;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .bp-menu > div a,
:root[data-theme="dark"] .bp-user-menu > div span {
    color: #dbe7f4;
}

:root[data-theme="dark"] .bp-menu > div a:hover,
:root[data-theme="dark"] .bp-menu > div a:focus {
    background: #192c42;
    color: var(--bp-yellow);
}

:root[data-theme="dark"] .bp-user-menu button {
    background: var(--bp-yellow);
    color: #08243f;
}