:root {
    --brand-primary: #14532d;
    --brand-secondary: #0f766e;
    --page-bg: #f6f8fb;
    --primary: var(--brand-primary);
    --primary-hover: #0f3f23;
    --secondary: var(--brand-secondary);
    --bg: var(--page-bg);
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: #f8fafc;
    --text: #111827;
    --text-secondary: #64748b;
    --border: #dbe4ee;
    --border-strong: #c8d3df;
    --success: #15803d;
    --warning: #b45309;
    --danger: #b91c1c;
    --info: #0369a1;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 12px 32px rgba(15, 23, 42, .10);
    --radius: 8px;
    --radius-sm: 6px;
    --sidebar: #101827;
    --sidebar-muted: #94a3b8;
    --focus: 0 0 0 3px rgba(20, 83, 45, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
.muted { color: var(--text-secondary); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: 0; }
h2 { font-size: 20px; line-height: 1.25; letter-spacing: 0; }
h3 { font-size: 16px; line-height: 1.3; letter-spacing: 0; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(20, 83, 45, .06), transparent 35%),
        var(--bg);
}

.login-card,
.card,
.empty-state,
.summary-panel,
.table-wrap,
.form-panel,
.filter-panel,
.notice {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.login-card {
    width: min(100%, 430px);
    padding: 30px;
}

.login-card h1 { margin-bottom: 22px; }

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--sidebar);
    color: #ffffff;
    padding: 22px 16px;
    border-right: 1px solid rgba(255,255,255,.08);
}

.brand {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 24px;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.25;
}

.nav { display: grid; gap: 4px; }

.nav-group {
    margin: 14px 0 6px;
    padding: 0 12px;
    color: var(--sidebar-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: #cbd5e1;
    font-weight: 720;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.nav a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
}

.nav a:hover,
.nav a.active {
    background: rgba(255,255,255,.10);
    color: #ffffff;
}

.nav a:hover { transform: translateX(2px); }

.content {
    min-width: 0;
    padding: 28px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.mobile-nav-toggle {
    display: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-weight: 850;
}

.eyebrow {
    margin: 0 0 5px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.toolbar,
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.actions { margin-top: 18px; }
.actions form { margin: 0; }

.button,
button.button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #ffffff;
    padding: 10px 15px;
    font: inherit;
    font-weight: 820;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.button:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.button.secondary {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--border-strong);
}

.button.secondary:hover {
    background: var(--surface-muted);
    color: var(--primary-hover);
}

.button.danger {
    background: var(--danger);
    color: #ffffff;
}

.button.danger:hover { background: #991b1b; }

.button:disabled,
button[disabled] {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
}

label {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
    color: var(--text);
    font-weight: 780;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    padding: 10px 12px;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--focus);
    outline: none;
}

input[readonly] { background: var(--surface-muted); }
textarea { resize: vertical; min-height: 110px; }

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 760;
}

.check-row input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--primary);
}

.field-error,
.error { color: var(--danger); }

.field-error {
    font-size: 13px;
    font-weight: 760;
}

.notice {
    padding: 16px 18px;
    margin-bottom: 18px;
    border-left: 4px solid var(--info);
}

.notice.error { border-left-color: var(--danger); }
.notice.success { border-left-color: var(--success); }

.card,
.empty-state,
.summary-panel,
.table-wrap,
.form-panel,
.filter-panel {
    padding: 20px;
    margin-bottom: 20px;
}

.card {
    display: grid;
    gap: 10px;
}

.card span,
dt {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 780;
}

.card strong {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.filter-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.filter-panel label { margin-bottom: 0; }

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.summary-panel dl {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
}

.summary-panel dl div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

dd {
    margin: 0;
    font-weight: 820;
    text-align: right;
}

.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

th,
td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--surface-muted);
}

tbody tr {
    transition: background-color .18s ease;
}

tbody tr:hover {
    background: #fbfdff;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-active,
.status-paid,
.status-completed,
.status-consumed { color: var(--success); background: #f0fdf4; border-color: #bbf7d0; }

.status-pending,
.status-processing,
.status-syncing { color: var(--info); background: #f0f9ff; border-color: #bae6fd; }

.status-suspended,
.status-disabled,
.status-expired,
.status-unknown { color: var(--warning); background: #fffbeb; border-color: #fde68a; }

.status-revoked,
.status-cancelled,
.status-failed,
.status-rejected { color: var(--danger); background: #fef2f2; border-color: #fecaca; }

.settings-form h2 { margin: 20px 0 12px; }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.settings-hub {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.settings-nav {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-sm);
}

.settings-nav a {
    color: var(--text-secondary);
    font-weight: 820;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
}

.settings-nav a:hover {
    background: var(--surface-muted);
    color: var(--text);
}

.settings-content { display: grid; gap: 18px; }

.notice code,
.raw-message {
    display: block;
    overflow-wrap: anywhere;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.secret-notice {
    display: grid;
    gap: 12px;
}

.empty-state.compact {
    border: 0;
    box-shadow: none;
    padding: 12px;
}

.confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .48);
}

.confirm-dialog {
    width: min(100%, 430px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 22px;
}

.confirm-dialog p {
    color: var(--text-secondary);
}

.confirm-dialog .actions {
    justify-content: flex-end;
    margin-bottom: 0;
}

.copy-feedback {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    background: #0f172a;
    color: #ffffff;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    box-shadow: var(--shadow-md);
}

body.nav-open { overflow: hidden; }

@media (max-width: 980px) {
    .shell { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: min(86vw, 320px);
        height: 100vh;
        transform: translateX(-105%);
        transition: transform .22s ease;
    }

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

    .mobile-nav-toggle { display: inline-flex; }

    .content { padding: 22px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-hub { grid-template-columns: 1fr; }
    .settings-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    body { font-size: 14px; }
    .content { padding: 16px; }
    .topbar { display: grid; grid-template-columns: 1fr; }
    .topbar form { justify-self: start; }
    .stats-grid,
    .filter-panel,
    .settings-grid,
    .settings-nav { grid-template-columns: 1fr; }
    .section-heading { display: grid; }
    .toolbar .button,
    .actions .button,
    .section-heading .button { width: 100%; }
    .summary-panel dl div {
        display: grid;
        gap: 4px;
    }
    dd { text-align: left; }

    .table-wrap {
        overflow: visible;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
        min-width: 0;
    }

    thead { display: none; }

    tbody tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px;
        margin-bottom: 12px;
        background: var(--surface);
    }

    td {
        display: grid;
        grid-template-columns: minmax(96px, 36%) 1fr;
        gap: 10px;
        border-bottom: 0;
        padding: 8px 4px;
    }

    td::before {
        content: attr(data-label);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    td:not([data-label])::before { content: ""; }

    td.actions,
    .actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Phase E recovery design system */
:root {
    --primary-hover: color-mix(in srgb, var(--brand-primary) 82%, #020617);
    --bg: color-mix(in srgb, var(--page-bg) 86%, #eef4f8);
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: #f5f8fb;
    --surface-tinted: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
    --text: #0b1220;
    --text-secondary: #5d6b7c;
    --border: #d9e2ec;
    --border-strong: #bdcad8;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 8px rgba(15, 23, 42, .04);
    --shadow-md: 0 18px 42px rgba(15, 23, 42, .11);
    --shadow-lg: 0 28px 70px rgba(15, 23, 42, .18);
    --sidebar: #0a1422;
    --sidebar-panel: rgba(255, 255, 255, .055);
    --sidebar-border: rgba(255, 255, 255, .10);
}

body {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--brand-primary) 10%, transparent) 0, transparent 360px),
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .2) 34%),
        var(--bg);
}

.auth-shell {
    background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand-primary) 13%, transparent), transparent 420px),
        linear-gradient(135deg, #f8fbfd, #eef4f8);
}

.login-card {
    border: 1px solid rgba(189, 202, 216, .8);
    box-shadow: var(--shadow-lg);
}

.shell {
    grid-template-columns: 292px minmax(0, 1fr);
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 24%),
        var(--sidebar);
    padding: 20px 14px;
}

.brand {
    gap: 12px;
    min-height: 56px;
    margin-bottom: 18px;
    padding: 10px;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    background: var(--sidebar-panel);
}

.brand-mark,
.user-avatar {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.merchant-mark {
    background: linear-gradient(135deg, var(--brand-secondary), #0f766e);
}

.nav {
    gap: 3px;
}

.nav-group {
    margin: 17px 0 7px;
    color: #7f8da3;
}

.nav a {
    position: relative;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid transparent;
    color: #d7dee8;
}

.nav a::before {
    content: attr(data-icon);
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .075);
    color: #b8c3d2;
    font-size: 10px;
    font-weight: 900;
    opacity: 1;
}

.nav a:hover,
.nav a.active {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .105);
}

.nav a.active::after {
    content: "";
    position: absolute;
    inset: 9px auto 9px -7px;
    width: 3px;
    border-radius: 999px;
    background: var(--brand-secondary);
}

.nav a.active::before {
    background: color-mix(in srgb, var(--brand-secondary) 30%, rgba(255, 255, 255, .10));
    color: #ffffff;
}

.content {
    padding: 30px clamp(18px, 3vw, 38px);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: -30px calc(clamp(18px, 3vw, 38px) * -1) 26px;
    padding: 18px clamp(18px, 3vw, 38px);
    border-bottom: 1px solid rgba(217, 226, 236, .82);
    background: rgba(248, 251, 253, .88);
    backdrop-filter: blur(16px);
}

.topbar h1 {
    margin-bottom: 0;
}

.topbar-actions,
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.user-chip {
    min-height: 40px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.user-avatar {
    width: 30px;
    height: 30px;
    font-size: 10px;
}

.icon-button {
    width: 42px;
    height: 42px;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow-sm);
}

.icon-button span {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.button,
button.button,
a.button {
    min-height: 42px;
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset;
}

.button:hover {
    box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
}

.button.secondary {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.button.danger {
    background: linear-gradient(180deg, #c02626, #991b1b);
}

.card,
.empty-state,
.summary-panel,
.table-wrap,
.form-panel,
.filter-panel,
.notice,
.settings-nav {
    border-color: rgba(189, 202, 216, .82);
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .90));
    box-shadow: var(--shadow-sm);
}

.card,
.summary-panel,
.table-wrap,
.form-panel,
.filter-panel {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.card:hover,
.summary-panel:hover,
.table-wrap:hover,
.form-panel:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 22%, var(--border));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.stats-grid .card {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    padding: 22px;
}

.stats-grid .card::after {
    content: "";
    position: absolute;
    inset: auto 18px 18px auto;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
}

.card span,
dt {
    color: var(--text-secondary);
}

.card strong {
    color: var(--text);
    letter-spacing: 0;
}

.filter-panel {
    align-items: end;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(10px);
}

input,
select,
textarea {
    border-radius: 8px;
    background: #ffffff;
}

input:hover,
select:hover,
textarea:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--border-strong));
}

.table-wrap {
    padding: 0;
}

.table-wrap > h2,
.table-wrap > .section-heading {
    padding: 18px 20px 0;
}

table {
    min-width: 820px;
}

th {
    background: #f4f7fa;
    color: #536174;
}

td {
    background: rgba(255, 255, 255, .74);
}

tbody tr:hover td {
    background: color-mix(in srgb, var(--brand-primary) 4%, #ffffff);
}

.status-badge {
    border-radius: 999px;
    padding: 5px 9px;
    letter-spacing: 0;
}

.empty-state {
    color: var(--text-secondary);
    text-align: center;
}

.confirm-backdrop {
    z-index: 80;
    background: rgba(8, 15, 27, .58);
    backdrop-filter: blur(7px);
}

.confirm-dialog {
    position: relative;
    width: min(100%, 460px);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    animation: modal-enter .18s ease-out;
}

.confirm-dialog h2 {
    margin-bottom: 8px;
}

.confirm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
}

.confirm-dialog .actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.toast-feedback {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    max-width: min(92vw, 360px);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    background: #0f172a;
    color: #ffffff;
    padding: 12px 14px;
    box-shadow: var(--shadow-lg);
    animation: toast-enter .2s ease-out;
}

.toast-feedback.error {
    background: #7f1d1d;
}

.copy-feedback {
    display: none;
}

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: none;
    background: rgba(8, 15, 27, .46);
    backdrop-filter: blur(3px);
}

body.nav-open .nav-overlay {
    display: block;
}

body.modal-open {
    overflow: hidden;
}

@keyframes modal-enter {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
    .topbar {
        margin-top: -22px;
    }

    .sidebar {
        box-shadow: var(--shadow-lg);
    }
}

@media (max-width: 640px) {
    .topbar {
        grid-template-columns: auto 1fr;
        align-items: start;
        margin: -16px -16px 20px;
        padding: 14px 16px;
    }

    .topbar-actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: space-between;
    }

    .topbar-actions form,
    .topbar-actions .button {
        width: auto;
    }

    .stats-grid .card {
        min-height: 112px;
    }

    tbody tr {
        box-shadow: var(--shadow-sm);
    }

    td {
        background: transparent;
    }

    .confirm-dialog .actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-dialog,
    .toast-feedback {
        animation: none !important;
    }
}

/* Reference-driven fintech finish */
.auth-shell {
    padding: clamp(12px, 2vw, 26px);
}

.login-split {
    width: min(100%, 1080px);
    min-height: min(720px, calc(100vh - 40px));
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 34px 90px rgba(8, 15, 27, .28);
    background: #ffffff;
}

.login-visual {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 5vw, 56px);
    background:
        radial-gradient(circle at 78% 18%, rgba(37, 99, 235, .34), transparent 260px),
        linear-gradient(135deg, #071225 0%, #0d1b34 46%, #081120 100%);
    color: #ffffff;
}

.login-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 26px),
        linear-gradient(45deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 22px);
    opacity: .28;
}

.login-brand,
.login-copy,
.trust-pill,
.security-graphic {
    position: relative;
    z-index: 1;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 900;
}

.trust-pill {
    display: inline-flex;
    margin-top: 28px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    padding: 8px 13px;
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
}

.login-copy {
    max-width: 430px;
    margin-top: 60px;
}

.login-copy h1 {
    font-size: clamp(34px, 5vw, 54px);
    color: #ffffff;
}

.login-copy p {
    color: #c7d2fe;
    font-size: 16px;
}

.security-graphic {
    position: absolute;
    left: 52px;
    bottom: 44px;
    width: 310px;
    height: 220px;
}

.shield,
.stack {
    position: absolute;
    display: block;
    border: 1px solid rgba(147, 197, 253, .36);
    background: linear-gradient(135deg, rgba(59, 130, 246, .95), rgba(79, 70, 229, .72));
    box-shadow: 0 22px 48px rgba(37, 99, 235, .30);
}

.shield {
    left: 18px;
    top: 28px;
    width: 78px;
    height: 94px;
    clip-path: polygon(50% 0, 92% 16%, 82% 70%, 50% 100%, 18% 70%, 8% 16%);
}

.stack {
    width: 96px;
    height: 74px;
    transform: skewY(-23deg) rotate(-16deg);
    border-radius: 10px;
}

.stack-one { right: 82px; top: 20px; }
.stack-two { right: 26px; top: 90px; background: linear-gradient(135deg, #60a5fa, #2563eb); }
.stack-three { left: 92px; bottom: 6px; background: linear-gradient(135deg, #22d3ee, #2563eb); }

.login-card {
    align-self: center;
    justify-self: center;
    width: min(86%, 430px);
    border: 0;
    box-shadow: none;
}

.login-card h2 {
    margin-bottom: 24px;
    font-size: 22px;
}

.secure-note {
    margin: 16px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.nav a[data-icon]::before {
    font-size: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px;
    border: 1px solid rgba(255, 255, 255, .10);
}

.nav a[data-icon="DB"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 13h6V4H4v9Zm10 7h6V4h-6v16ZM4 20h6v-3H4v3Z'/%3E%3C/svg%3E"); }
.nav a[data-icon="MR"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 20V8l8-4 8 4v12M8 20v-8h8v8M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); }
.nav a[data-icon="PY"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.nav a[data-icon="TX"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 7h13l-3-3M17 17H4l3 3M20 7l-5 5M4 17l5-5'/%3E%3C/svg%3E"); }
.nav a[data-icon="DV"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.nav a[data-icon="PR"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16M4 12h10M4 19h16M17 10l3 2-3 2'/%3E%3C/svg%3E"); }
.nav a[data-icon="FP"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
.nav a[data-icon="RC"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6'/%3E%3C/svg%3E"); }
.nav a[data-icon="WD"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E"); }
.nav a[data-icon="ST"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16M6 7v13h12V7M9 11h6M9 15h6M8 3h8l2 4H6l2-4Z'/%3E%3C/svg%3E"); }
.nav a[data-icon="RF"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 14 4 9l5-5M4 9h12a4 4 0 0 1 0 8h-2'/%3E%3C/svg%3E"); }
.nav a[data-icon="WH"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12a4 4 0 1 0 8 0 4 4 0 0 0-8 0ZM2 12h6M16 12h6M12 2v6M12 16v6'/%3E%3C/svg%3E"); }
.nav a[data-icon="RP"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20V4h14v16H5ZM9 9h6M9 13h6M9 17h3'/%3E%3C/svg%3E"); }
.nav a[data-icon="AL"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8v5l3 2M21 12a9 9 0 1 1-9-9'/%3E%3C/svg%3E"); }
.nav a[data-icon="SG"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5ZM19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2 3.46-.08-.02a1.7 1.7 0 0 0-1.9.32 1.7 1.7 0 0 0-.5 1.2H8.68a1.7 1.7 0 0 0-.5-1.2 1.7 1.7 0 0 0-1.9-.32l-.08.02-2-3.46.06-.06A1.7 1.7 0 0 0 4.6 15 1.7 1.7 0 0 0 3.5 13.5v-3A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2-3.46.08.02a1.7 1.7 0 0 0 1.9-.32 1.7 1.7 0 0 0 .5-1.2h6.64a1.7 1.7 0 0 0 .5 1.2 1.7 1.7 0 0 0 1.9.32l.08-.02 2 3.46-.06.06A1.7 1.7 0 0 0 19.4 9a1.7 1.7 0 0 0 1.1 1.5v3a1.7 1.7 0 0 0-1.1 1.5Z'/%3E%3C/svg%3E"); }
.nav a[data-icon="PP"]::before, .nav a[data-icon="AK"]::before, .nav a[data-icon="LG"]::before, .nav a[data-icon="PF"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23bfdbfe' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h4'/%3E%3C/svg%3E"); }

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.dashboard-hero > div,
.range-card,
.analytics-card {
    border: 1px solid rgba(189, 202, 216, .82);
    border-radius: 10px;
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-sm);
}

.dashboard-hero > div {
    padding: 24px;
    background:
        radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--brand-secondary) 16%, transparent), transparent 220px),
        rgba(255, 255, 255, .90);
}

.dashboard-hero h2 {
    max-width: 650px;
    margin-bottom: 8px;
    font-size: clamp(24px, 3vw, 34px);
}

.range-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.range-card .button {
    grid-column: 1 / -1;
}

.compact-notice {
    font-size: 13px;
}

.kpi-card::before {
    content: attr(data-kpi);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-primary) 11%, #eef6ff);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 900;
}

.kpi-card {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.kpi-card span,
.kpi-card strong {
    grid-column: 2;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 18px;
    margin-bottom: 20px;
}

.analytics-card {
    padding: 20px;
}

.bar-chart {
    display: grid;
    gap: 12px;
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(160px, 2fr) minmax(120px, auto);
    gap: 12px;
    align-items: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.bar-row div {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eef6;
}

.bar-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-secondary), #2563eb);
}

.bar-row strong {
    color: var(--text);
    text-align: right;
}

.alert-list {
    display: grid;
    gap: 10px;
}

.alert-list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    font-weight: 800;
}

.alert-list strong {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 9%, #ffffff);
    color: var(--brand-primary);
}

@media (max-width: 1100px) {
    .login-split,
    .dashboard-hero,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .login-visual {
        min-height: 430px;
    }
}

@media (max-width: 640px) {
    .login-split {
        min-height: auto;
    }

    .login-visual {
        min-height: 360px;
        padding: 24px;
    }

    .login-copy {
        margin-top: 36px;
    }

    .security-graphic {
        left: 20px;
        bottom: 18px;
        transform: scale(.72);
        transform-origin: left bottom;
    }

    .login-card {
        width: 100%;
        padding: 24px;
    }

    .range-card,
    .bar-row {
        grid-template-columns: 1fr;
    }

    .bar-row strong {
        text-align: left;
    }
}

.merchant-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid rgba(189, 202, 216, .82);
    border-radius: 10px;
    background:
        radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--brand-secondary) 18%, transparent), transparent 230px),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88));
    box-shadow: var(--shadow-sm);
}

.merchant-hero h2 {
    margin-bottom: 6px;
    font-size: clamp(24px, 3vw, 34px);
}

.merchant-hero p {
    margin-bottom: 0;
}

.merchant-hero .toolbar {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.merchant-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(220px, .65fr));
    gap: 18px;
    margin-bottom: 18px;
}

.merchant-profile-card,
.balance-card,
.finance-tile-grid article {
    border: 1px solid rgba(189, 202, 216, .82);
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-sm);
}

.merchant-profile-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 20px;
}

.merchant-profile-card h2 {
    margin-bottom: 4px;
}

.merchant-profile-card p {
    margin-bottom: 0;
}

.merchant-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--brand-primary) 26%, transparent);
}

.merchant-status-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.merchant-status-grid div,
.finance-tile-grid article {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
}

.merchant-status-grid span,
.balance-card span,
.finance-tile-grid span {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.merchant-status-grid strong,
.finance-tile-grid strong {
    font-size: 16px;
    font-weight: 900;
}

.balance-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.balance-card::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -30px;
    width: 110px;
    height: 110px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
    transform: rotate(18deg);
}

.balance-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;
}

.balance-card p {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.primary-balance {
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .24), transparent 160px),
        linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 72%, #0f172a));
    color: #ffffff;
}

.primary-balance span,
.primary-balance p {
    color: rgba(255, 255, 255, .78);
}

.finance-tile-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

@media (max-width: 1180px) {
    .merchant-overview-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 700px) {
    .merchant-hero {
        display: grid;
    }

    .merchant-hero .toolbar,
    .merchant-hero .button {
        width: 100%;
    }

    .merchant-profile-card,
    .merchant-status-grid,
    .finance-tile-grid {
        grid-template-columns: 1fr;
    }
}

.builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 18px;
    align-items: start;
}

.builder-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.builder-block-list {
    display: grid;
    gap: 12px;
    margin: 16px 0;
}

.builder-block {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
}

.builder-block-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.builder-block-summary h3 {
    margin-bottom: 4px;
}

.drag-handle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-weight: 900;
}

.builder-edit-form {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.builder-preview {
    position: sticky;
    top: 92px;
}

.preview-phone {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff, #eef6ff);
}

.preview-merchant,
.preview-block {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    padding: 10px;
}

.preview-merchant {
    color: var(--primary);
    font-weight: 900;
}

.preview-block {
    display: grid;
    gap: 3px;
}

.preview-block span,
.preview-phone small {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.preview-block strong {
    color: var(--text);
}

.file-upload-field input[type="file"] {
    padding: 12px;
    border-style: dashed;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.current-qr-preview {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
}

.current-qr-preview span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.current-qr-preview img {
    width: min(100%, 180px);
    aspect-ratio: 1;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    padding: 8px;
}

.admin-payment-preview {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid var(--preview-border);
    border-radius: 18px;
    background: var(--preview-bg);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .14);
}

.admin-preview-rail {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 560px;
    padding: 30px 22px;
    background:
        radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--preview-secondary) 28%, transparent), transparent 220px),
        linear-gradient(145deg, #071225, #0a1a32);
    color: #ffffff;
}

.admin-preview-logo {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1d4ed8, var(--preview-primary));
    font-weight: 950;
}

.admin-preview-rail small {
    color: #bfdbfe;
    font-weight: 760;
}

.admin-preview-card {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 18px;
    background: color-mix(in srgb, var(--preview-bg) 72%, #ffffff);
}

.admin-preview-topbar,
.admin-preview-section,
.admin-preview-row {
    border: 1px solid var(--preview-border);
    border-radius: 14px;
    background: var(--preview-card);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.admin-preview-topbar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 12px;
}

.admin-preview-merchant {
    display: flex;
    gap: 10px;
    align-items: center;
}

.admin-preview-merchant img,
.admin-preview-merchant > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--preview-primary) 12%, #ffffff);
    color: var(--preview-primary);
    font-weight: 950;
    object-fit: contain;
}

.admin-preview-merchant strong,
.admin-preview-row strong {
    color: var(--preview-text);
}

.admin-preview-merchant small,
.admin-preview-section p,
.admin-preview-section small,
.admin-preview-row span,
.preview-disclaimer {
    color: var(--preview-muted);
}

.admin-preview-lang {
    border-radius: 10px;
    background: color-mix(in srgb, var(--preview-primary) 10%, #ffffff);
    color: var(--preview-primary);
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 900;
}

.admin-preview-section {
    padding: 16px;
}

.admin-preview-section h3 {
    margin-bottom: 6px;
    font-size: 22px;
    color: var(--preview-text);
}

.admin-preview-amount {
    display: grid;
    gap: 4px;
    margin: 14px 0;
    padding: 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--preview-primary) 7%, #ffffff);
    text-align: center;
}

.admin-preview-amount span,
.admin-preview-till span {
    color: var(--preview-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-preview-amount strong {
    color: var(--preview-text);
    font-size: 30px;
    line-height: 1;
}

.admin-preview-qr-area {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.admin-preview-qr-area img,
.admin-preview-qr-empty {
    width: 180px;
    aspect-ratio: 1;
    border: 1px solid var(--preview-border);
    border-radius: 14px;
    background: #ffffff;
    padding: 10px;
    object-fit: contain;
}

.admin-preview-qr-empty {
    display: grid;
    place-items: center;
    color: var(--preview-primary);
    font-size: 34px;
    font-weight: 950;
    letter-spacing: 0;
}

.admin-preview-till,
.admin-preview-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--preview-border);
    border-radius: 12px;
    background: #ffffff;
}

.admin-preview-section.compact {
    display: grid;
    gap: 12px;
}

.admin-preview-section.compact label {
    margin-bottom: 0;
}

.admin-preview-row {
    margin-top: 0;
}

.preview-disclaimer {
    display: block;
    text-align: center;
    font-weight: 800;
}

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

    .builder-preview {
        position: static;
    }

    .admin-payment-preview {
        grid-template-columns: 1fr;
    }

    .admin-preview-rail {
        min-height: auto;
    }
}

.docs-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.docs-nav { top: 92px; }

.docs-content {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.code-block {
    overflow-x: auto;
    margin: 12px 0 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #071226;
    color: #e5f2ff;
    padding: 14px;
    line-height: 1.55;
}

.code-block code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    white-space: pre;
}

.endpoint-list {
    display: grid;
    gap: 10px;
    margin: 12px 0 16px;
}

.endpoint-list article {
    display: grid;
    grid-template-columns: 80px minmax(180px, .9fr) minmax(0, 1.4fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
}

.endpoint-list strong {
    color: var(--primary);
    font-weight: 950;
}

.endpoint-list span {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    color: var(--text);
    overflow-wrap: anywhere;
}

.endpoint-list p {
    margin: 0;
    color: var(--text-secondary);
}

.compact-table { margin-bottom: 14px; }

.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

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

    .docs-nav {
        position: static;
    }

    .endpoint-list article {
        grid-template-columns: 1fr;
    }
}

.simple-builder {
    display: grid;
    gap: 18px;
}

.builder-tab-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.builder-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.builder-tabs label {
    margin: 0;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 8px 13px;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 850;
}

#tab-design:checked ~ .builder-tabs label[for="tab-design"],
#tab-methods:checked ~ .builder-tabs label[for="tab-methods"],
#tab-content:checked ~ .builder-tabs label[for="tab-content"],
#tab-preview:checked ~ .builder-tabs label[for="tab-preview"] {
    background: var(--primary);
    color: #ffffff;
}

.simple-builder .tab-panel {
    display: none;
}

#tab-design:checked ~ .simple-builder-layout .tab-design,
#tab-methods:checked ~ .simple-builder-layout .tab-methods,
#tab-content:checked ~ .simple-builder-layout .tab-content,
#tab-preview:checked ~ .simple-builder-layout .tab-preview {
    display: block;
}

#tab-preview:checked ~ .simple-builder-layout {
    grid-template-columns: 1fr;
}

#tab-preview:checked ~ .simple-builder-layout .builder-main {
    display: none;
}

#tab-preview:checked ~ .simple-builder-layout .builder-preview {
    position: static;
    max-width: 760px;
}

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

.friendly-grid label {
    margin: 0;
}

.friendly-grid label span,
.toggle-line,
.method-editor-card p {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 760;
}

.method-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.method-editor-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.method-editor-card h3 {
    margin-bottom: 4px;
}

.toggle-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.toggle-line input {
    width: 18px;
    min-height: 18px;
    accent-color: var(--primary);
}

.advanced-settings,
.method-editor-card details,
.add-field-box,
.custom-field-row details {
    margin-top: 12px;
}

.advanced-settings summary,
.method-editor-card summary,
.add-field-box summary,
.custom-field-row summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 900;
}

.simple-section-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.simple-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
}

.simple-row label {
    margin: 0;
    min-width: 120px;
}

.custom-field-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.segmented-control {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
}

.segmented-control span {
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
}

.segmented-control span:first-child {
    background: var(--surface-muted);
    color: var(--text);
}

.preview-title {
    color: var(--text);
    font-size: 20px;
    font-weight: 950;
}

.preview-amount {
    padding: 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 8%, #ffffff);
    color: var(--text);
    font-size: 28px;
    font-weight: 950;
    text-align: center;
}

@media (max-width: 1180px) {
    .method-card-grid,
    .friendly-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .builder-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .simple-row,
    .custom-field-row {
        grid-template-columns: 1fr;
    }

    .simple-row label {
        min-width: 0;
    }
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid rgba(189, 202, 216, .82);
    border-radius: 10px;
    background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--brand-secondary) 16%, transparent), transparent 220px),
        linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88));
    box-shadow: var(--shadow-sm);
}

.profile-hero h2 {
    margin-bottom: 4px;
    font-size: clamp(24px, 3vw, 34px);
}

.profile-hero p {
    margin-bottom: 0;
}

.profile-hero .status-badge {
    margin-left: auto;
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
    gap: 18px;
    align-items: start;
}

.profile-grid .account-panel {
    grid-column: 1 / -1;
}

.security-panel {
    min-height: 100%;
}

.password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.password-field button {
    min-width: 74px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    color: var(--primary);
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

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

.readonly-grid div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
}

.readonly-grid span {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.readonly-grid strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 16px;
}

@media (max-width: 980px) {
    .profile-grid,
    .readonly-grid {
        grid-template-columns: 1fr;
    }
}

/* Merchant dashboard critical layout */
.content > .merchant-hero.form-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 24px;
}

.content > .merchant-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(220px, .65fr));
    gap: 18px;
    margin-bottom: 18px;
}

.content > .merchant-overview-grid > .card,
.content > .finance-tile-grid > .card {
    margin-bottom: 0;
}

.content .merchant-profile-card.card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 20px;
}

.content .merchant-status-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.content .balance-card.card {
    display: block;
    min-height: 100%;
    padding: 20px;
}

.content .finance-tile-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.content .finance-tile-grid .card strong {
    font-size: 16px;
}

@media (max-width: 1180px) {
    .content > .merchant-overview-grid,
    .content .finance-tile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .content > .merchant-hero.form-panel,
    .content .merchant-profile-card.card,
    .content .merchant-status-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .profile-hero {
        display: grid;
    }

    .profile-hero .status-badge {
        margin-left: 0;
        justify-self: start;
    }

    .password-field {
        grid-template-columns: 1fr;
    }

    .password-field button {
        min-height: 40px;
    }
}