/* ============================================================
   MERCHANT DASHBOARD — additive layer
   Loaded AFTER app.css. Reuses all design tokens from :root.
   ============================================================ */

/* ============================================================
   0. LIGHT THEME TOKEN RESCUE
   app.css has the [data-theme="light"] block nested inside the
   unclosed :root block, so its tokens never bind to the root
   element. We re-declare them with selector
   html[data-theme="light"] (specificity 0,0,2,0 > :root 0,0,1,0)
   so light theme works across the whole app.
   ============================================================ */
html[data-theme="light"] {
    --color-bg-base:        #F8FAFC;
    --color-bg-surface:     #FFFFFF;
    --color-bg-elevated:    #F1F5F9;
    --color-bg-overlay:     #F8FAFC;
    --color-bg-hover:       #F1F5F9;
    --color-bg-white-card:  #FFFFFF;
    --color-bg-white-hover: #F8FAFC;
    --color-bg-white-head:  #F8FAFC;

    --color-border:         #E2E8F0;
    --color-border-strong:  #CBD5E1;
    --color-border-light:   #E2E8F0;

    --color-accent:         #4F46E5;
    --color-accent-dim:     #EEF2FF;
    --color-accent-hover:   #4338CA;
    --color-accent2:        #DC2626;
    --color-accent2-dim:    #FEF2F2;

    --color-text-primary:   #0F172A;
    --color-text-secondary: #64748B;
    --color-text-muted:     #94A3B8;
    --color-text-on-accent: #FFFFFF;
    --color-text-dark:      #0F172A;
    --color-text-dark-sec:  #64748B;

    --color-success:        #16A34A;
    --color-success-dim:    #F0FDF4;
    --color-warning:        #D97706;
    --color-warning-dim:    #FFFBEB;
    --color-danger:         #DC2626;
    --color-danger-dim:     #FEF2F2;
    --color-info:           #2563EB;
    --color-info-dim:       #EFF6FF;
    --color-online:         #16A34A;
    --color-offline:        #94A3B8;

    --shadow-sm:            0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card:          0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-dropdown:      0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
    --shadow-modal:         0 20px 60px rgba(0,0,0,0.12);
    --shadow-light-card:    0 1px 3px rgba(0,0,0,0.06);
}

/* ---- 1. JSON VIEWER ---- */
.json-viewer {
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: var(--font-sm);
    line-height: 1.55;
    padding: var(--space-3);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    max-height: 600px;
    overflow: auto;
    white-space: pre;
    transition: var(--transition);
}

.jv-key       { color: var(--color-info); }
.jv-string    { color: var(--color-success); }
.jv-number    { color: var(--color-warning); }
.jv-bool      { color: var(--color-accent); }
.jv-null      { color: var(--color-text-muted); font-style: italic; }
.jv-bracket   { color: var(--color-text-secondary); }
.jv-comma     { color: var(--color-text-muted); }
.jv-indent    { display: inline-block; width: 1.25em; }

.jv-collapsible {
    cursor: pointer;
    transition: background var(--transition);
    padding: 0 2px;
    border-radius: var(--radius-xs);
}
.jv-collapsible:hover { background: var(--color-bg-hover); }
.jv-collapsed::after  { content: " ... "; color: var(--color-text-muted); }

.jv-toggle {
    display: inline-block;
    width: 1em;
    color: var(--color-text-secondary);
    user-select: none;
}

.jv-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: sticky;
    top: 0;
    z-index: 2;
}
.jv-toolbar + .json-viewer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.jv-search-input {
    flex: 1;
    min-width: 120px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px var(--space-2);
    font-family: var(--font-family);
    font-size: var(--font-sm);
    transition: var(--transition);
}
.jv-search-input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
}
.jv-search-hit {
    background: var(--color-warning-dim);
    border-radius: var(--radius-xs);
    padding: 0 2px;
}

/* ---- 2. KPI TILE (extends .pg-stat) ---- */
.kpi-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
}
.kpi-tile .pg-stat-num {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.kpi-trend {
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.kpi-trend::before { display: inline-block; font-size: 10px; }
.kpi-trend-up      { color: var(--color-success); }
.kpi-trend-up::before   { content: "\25B2"; }
.kpi-trend-down    { color: var(--color-danger); }
.kpi-trend-down::before { content: "\25BC"; }
.kpi-trend-flat    { color: var(--color-text-muted); }
.kpi-trend-flat::before { content: "\2014"; }

.kpi-spark-slot {
    margin-top: auto;
    min-height: 36px;
}

/* ---- 3. SPARKLINE ---- */
.sparkline-svg {
    display: block;
    width: 100%;
    height: 36px;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    fill: none;
    transition: var(--transition);
}
.sparkline-svg .spark-area {
    fill: var(--color-accent-dim);
    stroke: none;
}

/* ---- 4. TIMELINE ---- */
.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    padding-left: var(--space-4);
}
.timeline-line {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 4px;
    width: 1px;
    background: var(--color-border);
}
.timeline-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2);
    margin-left: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    position: relative;
}
.timeline-item:hover { background: var(--color-bg-hover); }
.timeline-dot {
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    box-shadow: 0 0 0 2px var(--color-bg-base);
}
.timeline-dot-success { background: var(--color-success); }
.timeline-dot-warning { background: var(--color-warning); }
.timeline-dot-danger  { background: var(--color-danger); }
.timeline-dot-info    { background: var(--color-info); }
.timeline-meta {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
}
.timeline-content {
    color: var(--color-text-primary);
    font-size: var(--font-base);
}
.timeline-note {
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    margin-top: 2px;
}

/* ---- 5. METHOD / STATUS PILLS ---- */
.method-pill,
.status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}
.method-pill-get    { background: var(--color-info-dim);    color: var(--color-info); }
.method-pill-post   { background: var(--color-success-dim); color: var(--color-success); }
.method-pill-put    { background: var(--color-warning-dim); color: var(--color-warning); }
.method-pill-patch  { background: var(--color-warning-dim); color: var(--color-warning); }
.method-pill-delete { background: var(--color-danger-dim);  color: var(--color-danger); }
.method-pill-default{ background: var(--color-bg-elevated); color: var(--color-text-secondary); }

.status-pill-2xx { background: var(--color-success-dim); color: var(--color-success); }
.status-pill-3xx { background: var(--color-info-dim);    color: var(--color-info); }
.status-pill-4xx { background: var(--color-warning-dim); color: var(--color-warning); }
.status-pill-5xx { background: var(--color-danger-dim);  color: var(--color-danger); }

/* ---- 6. API CALL ROW / WEBHOOK ATTEMPTS ---- */
.api-call-row {
    font-family: var(--font-family);
}
.api-call-row .api-call-path {
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    color: var(--color-text-secondary);
}

.webhook-attempt-list {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}
.webhook-attempt-list th,
.webhook-attempt-list td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
.webhook-attempt-list th {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
}
.webhook-attempt-row { transition: background var(--transition); }
.webhook-attempt-row:hover { background: var(--color-bg-hover); }
.webhook-attempt-row .attempt-body {
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    color: var(--color-text-secondary);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 7. PAYLOAD HEADER ---- */
.payload-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.payload-header .ph-path {
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    color: var(--color-text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payload-header .ph-duration {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ---- 8. EXPORT DROPDOWN ---- */
.export-dropdown { position: relative; display: inline-block; }
.export-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    min-width: 160px;
    padding: var(--space-1);
    z-index: 50;
    animation: cardIn 200ms ease both;
}
.export-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    text-align: left;
    font-size: var(--font-base);
    font-family: var(--font-family);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.export-dropdown-item:hover { background: var(--color-bg-hover); }
.export-dropdown-item:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- 9. REGENERATE SECRET WARNING ---- */
.regenerate-secret-warning {
    background: var(--color-warning-dim);
    color: var(--color-warning);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-warning);
    font-size: var(--font-sm);
    line-height: 1.55;
    margin-bottom: var(--space-3);
}
.regenerate-secret-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: var(--font-sm);
    word-break: break-all;
}

/* ---- 10. CHART CARD ---- */
.chart-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
}
.chart-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.chart-card-title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}
.chart-card-body {
    min-height: 200px;
    position: relative;
}

/* ---- 11. FOCUS ACCESSIBILITY ---- */
.jv-collapsible:focus-visible,
.method-pill:focus-visible,
.status-pill:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ---- 12. LIGHT-THEME OVERRIDES (only where contrast requires it) ---- */
[data-theme="light"] .json-viewer {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}
[data-theme="light"] .timeline-dot { box-shadow: 0 0 0 2px var(--color-bg-surface); }

/* ============================================================
   13. MERCHANT FILTER TOOLBAR — compact, fixed-width inputs
   ============================================================ */
.merchant-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    /* Stacking context so popover children escape subsequent cards */
    position: relative;
    z-index: 10;
    /* Never clip dropdown popovers */
    overflow: visible;
}
.merchant-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
}
.merchant-toolbar-actions {
    flex: 0 0 auto;
    align-self: center;
}

/* Inputs inside the filter row — fixed widths, never stretch */
.merchant-filter-row .form-input,
.merchant-filter-row .form-input-sm {
    width: 170px;
    flex: 0 0 auto;
    min-width: 0;
}
.merchant-filter-row .form-input[type="number"] {
    width: 88px;
}
.merchant-filter-row .form-input[type="date"] {
    width: 160px;
    padding: 6px 10px;
    color-scheme: dark;
    cursor: pointer;
}
[data-theme="light"] .merchant-filter-row .form-input[type="date"] {
    color-scheme: light;
}
/* Calendar indicator — accent color so it matches the theme */
.merchant-filter-row .form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) sepia(1) saturate(8) hue-rotate(45deg);
    cursor: pointer;
    opacity: 0.85;
    transition: var(--transition);
}
.merchant-filter-row .form-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
[data-theme="light"] .merchant-filter-row .form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.35);
}

/* Search keeps flexing but caps at sane width */
.merchant-filter-row .pg-search {
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 180px;
}

/* Pro-geo-dropdown inside filter row never overflows viewport on the left */
.merchant-filter-row .pro-geo-dropdown {
    flex: 0 0 auto;
}
.merchant-filter-row .pro-geo-menu {
    left: 0;
    right: auto;
    min-width: 200px;
}

/* Checkbox-style filter (e.g. Signature valid only on ApiCalls) — compact */
.merchant-filter-row .filter-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 10px;
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
}
.merchant-filter-row .filter-toggle:hover {
    border-color: var(--color-accent-dim);
    color: var(--color-text-primary);
}
.merchant-filter-row .filter-toggle input[type="checkbox"] {
    accent-color: var(--color-accent);
}

/* On narrow screens, allow the toolbar to wrap instead of overflowing */
@media (max-width: 900px) {
    .merchant-toolbar { flex-direction: column; align-items: stretch; }
    .merchant-toolbar-actions { align-self: flex-end; }
}

/* ============================================================
   14. SETTINGS GRID — 2-column responsive
   ============================================================ */
.merchant-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    max-width: 1280px;
}
@media (max-width: 900px) {
    .merchant-settings-grid { grid-template-columns: 1fr; }
}

/* Inside settings cards: rows align label+value cleanly */
.merchant-settings-grid .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.settings-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.settings-field-row:last-child { border-bottom: none; }
.settings-field-row .label {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    flex: 0 0 auto;
}
.settings-field-row .value {
    font-size: var(--font-sm);
    color: var(--color-text-primary);
    text-align: right;
    word-break: break-word;
}

/* ============================================================
   15. KPI GRID — auto-fit so 5/4/3 tiles never orphan a row
   ============================================================ */
/* merchant-kpi-grid is now a thin alias for the universal kpi-grid.
   All card styling lives in kpi-tile-ext (below). */
.merchant-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.merchant-kpi-grid > * { min-width: 0; }
.merchant-kpi-grid > *:nth-child(1) { animation-delay:   0ms; }
.merchant-kpi-grid > *:nth-child(2) { animation-delay:  55ms; }
.merchant-kpi-grid > *:nth-child(3) { animation-delay: 110ms; }
.merchant-kpi-grid > *:nth-child(4) { animation-delay: 165ms; }
.merchant-kpi-grid > *:nth-child(5) { animation-delay: 220ms; }
.merchant-kpi-grid > *:nth-child(6) { animation-delay: 275ms; }
@media (max-width: 720px) {
    .merchant-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
}
@media (max-width: 420px) {
    .merchant-kpi-grid { grid-template-columns: 1fr; }
}

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

/* ============================================================
   16. TOOLBAR — two-band layout (filters | divider | search/export)
   ============================================================ */
.merchant-toolbar {
    flex-wrap: wrap;
    overflow: visible; /* keep popovers accessible */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: cardIn 400ms ease both;
}
.merchant-toolbar-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 28px;
    background: var(--color-border);
    margin: 0 var(--space-1);
}
.merchant-toolbar-search {
    flex: 0 0 320px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.merchant-toolbar-search .pg-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}
.merchant-toolbar-search .pg-search input {
    font-size: var(--font-sm);
}
.merchant-toolbar-search .pg-search:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}

@media (max-width: 1100px) {
    .merchant-toolbar-search { flex: 1 1 220px; }
}
@media (max-width: 900px) {
    .merchant-toolbar-sep { display: none; }
    .merchant-toolbar-search { flex: 1 1 100%; order: 99; }
    .merchant-toolbar-actions { width: 100%; display: flex; justify-content: flex-end; }
}

/* ============================================================
   17. EMPTY STATE — designed placeholder card
   ============================================================ */
.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-8) var(--space-6);
    min-height: 220px;
    background:
        radial-gradient(120% 80% at 50% 0%, var(--color-bg-surface) 0%, transparent 70%),
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.02) 0 1px,
            transparent 1px 14px
        );
    background-color: var(--color-bg-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    animation: emptyStateIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.empty-state-art {
    width: 88px;
    height: 88px;
    color: var(--color-text-muted);
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
    animation: emptyArtFloat 6s ease-in-out infinite;
}
.empty-state-art svg { width: 100%; height: 100%; }
.empty-state-text {
    display: flex; flex-direction: column; gap: 4px;
    max-width: 380px;
}
.empty-state-heading {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.005em;
}
.empty-state-hint {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
}
.empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px 14px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-accent);
    background: var(--color-accent-dim);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: var(--transition);
    margin-top: var(--space-1);
}
.empty-state-cta:hover {
    transform: translateY(-1px);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}
.empty-state-cta:active { transform: translateY(0); }

/* Compact variant for chart cards / inline panels */
.chart-card-body .empty-state-card,
.empty-state-card--compact {
    padding: var(--space-5) var(--space-4);
    min-height: 160px;
    border: none;
    background: transparent;
}
.chart-card-body .empty-state-art,
.empty-state-card--compact .empty-state-art { width: 64px; height: 64px; }

[data-theme="light"] .empty-state-card {
    background:
        radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, transparent 70%),
        repeating-linear-gradient(45deg, rgba(15, 23, 42, 0.03) 0 1px, transparent 1px 14px);
    background-color: #FFFFFF;
    border-color: #CBD5E1;
}

@keyframes emptyStateIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes emptyArtFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* ============================================================
   18. DATE PICKER — fully custom popover, locale-locked EN
   ============================================================ */
.date-picker {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.date-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: 200px;
    padding: 7px 12px;
    font-family: var(--font-family);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.date-picker-trigger:hover {
    border-color: var(--color-border-strong);
    background: var(--color-bg-hover);
}
.date-picker-trigger:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}
.date-picker--open .date-picker-trigger {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}
.date-picker-icon {
    color: var(--color-accent);
    font-size: 13px;
    flex-shrink: 0;
}
.date-picker-value {
    flex: 1 1 auto;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.date-picker-placeholder {
    flex: 1 1 auto;
    color: var(--color-text-muted);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.date-picker-chevron {
    font-size: 10px;
    color: var(--color-text-muted);
    transition: transform var(--transition-spring);
}
.date-picker--open .date-picker-chevron {
    transform: rotate(180deg);
    color: var(--color-accent);
}
.date-picker-clear {
    background: transparent;
    border: none;
    padding: 2px 4px;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
}
.date-picker-clear:hover {
    background: var(--color-danger-dim);
    color: var(--color-danger);
}
.date-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}
.date-picker-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 500;
    width: 304px;
    padding: var(--space-3);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    transform-origin: top left;
    animation: dpPopIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
    /* Opaque solid: belt-and-suspenders so busy grid backgrounds never bleed
       through if any parent introduces a stacking quirk. */
    backdrop-filter: none;
}
.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px var(--space-2);
}
.date-picker-month-label {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}
.date-picker-month-label .dp-year {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.date-picker-nav {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.date-picker-nav:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
.date-picker-nav:active { transform: scale(0.94); }
.date-picker-nav:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.date-picker-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 6px;
}
.date-picker-day-cell {
    text-align: center;
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding: 4px 0;
}
.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.date-picker-cell {
    height: 34px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.date-picker-cell:hover {
    background: var(--color-bg-hover);
}
.date-picker-cell:active { transform: scale(0.94); }
.date-picker-cell:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
.date-picker-cell--other-month {
    color: var(--color-text-muted);
    opacity: 0.45;
}
.date-picker-cell--today {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.date-picker-cell--selected,
.date-picker-cell--selected.date-picker-cell--today {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}
.date-picker-cell--disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}
.date-picker-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.date-picker-time-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.date-picker-time-fields {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.date-picker-time-input {
    width: 38px;
    padding: 5px 0;
    text-align: center;
    font-family: var(--font-family);
    font-size: var(--font-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.date-picker-time-input:hover { border-color: var(--color-border-strong); }
.date-picker-time-input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}
.date-picker-time-sep {
    font-weight: 700;
    color: var(--color-text-secondary);
}
.date-picker-time-utc {
    margin-left: 4px;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.date-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.date-picker-action {
    background: transparent;
    border: none;
    padding: 6px 8px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.date-picker-action:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.date-picker-action--clear:hover { color: var(--color-danger); }
.date-picker-action--today { color: var(--color-accent); }
.date-picker-action--today:hover {
    background: var(--color-accent-dim);
    color: var(--color-accent);
}

/* Align inside the filter row to match other 170px inputs */
.merchant-filter-row .date-picker .date-picker-trigger { width: 170px; }
@media (max-width: 480px) {
    .merchant-filter-row .date-picker,
    .merchant-filter-row .date-picker .date-picker-trigger { width: 100%; }
}

@keyframes dpPopIn {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

[data-theme="light"] .date-picker-trigger { background: #FFFFFF; }
[data-theme="light"] .date-picker--open .date-picker-trigger,
[data-theme="light"] .date-picker-trigger:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
[data-theme="light"] .date-picker-popover {
    background: #FFFFFF;
    border-color: #E2E8F0;
}
[data-theme="light"] .date-picker-cell--today { color: var(--color-accent); }
[data-theme="light"] .date-picker-cell--selected {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
[data-theme="light"] .date-picker-time-input { background: #FFFFFF; }

/* ============================================================
   19. TOGGLE SWITCH — tactile, raised, themed
   ============================================================ */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    transition: var(--transition);
    border: 1px solid transparent;
    position: relative;
    /* No background highlight on hover — track provides feedback */
}
.toggle-switch:hover .toggle-switch-label {
    color: var(--color-text-primary);
}
/* Track hover in inactive state */
.toggle-switch:hover .toggle-switch-track {
    border-color: var(--color-text-muted);
}
/* Track hover in active state */
.toggle-switch:hover input:checked + .toggle-switch-track {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 4px var(--color-accent-dim);
}
/* Thumb grows slightly on label hover */
.toggle-switch:hover .toggle-switch-thumb {
    transform: scale(1.07);
}
/* Thumb presses on click */
.toggle-switch:active .toggle-switch-thumb {
    transform: scale(0.94);
}
/* Checked thumb still shifts but also presses on click */
.toggle-switch:active input:checked ~ .toggle-switch-track .toggle-switch-thumb {
    transform: translateX(16px) scale(0.94);
}
.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px; height: 1px;
}
.toggle-switch-track {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    flex: 0 0 auto;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.toggle-switch-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    background: var(--color-text-primary);
    border-radius: var(--radius-full);
    transition: transform var(--transition-spring), background var(--transition);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.toggle-switch input:checked + .toggle-switch-track {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--color-accent-dim);
}
.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb {
    transform: translateX(16px);
    background: var(--color-text-on-accent);
}
.toggle-switch input:focus-visible + .toggle-switch-track {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.toggle-switch--disabled,
.toggle-switch input:disabled + .toggle-switch-track {
    opacity: 0.4;
    cursor: not-allowed;
}
.toggle-switch-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}
[data-theme="light"] .toggle-switch-track {
    background: #E2E8F0;
    border-color: #CBD5E1;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .toggle-switch-thumb {
    background: #FFFFFF;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.15),
        0 1px 2px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .toggle-switch input:checked + .toggle-switch-track {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(79, 70, 229, 0.16);
}

/* ============================================================
   20. SCROLLBARS — slim, themed, hover thicken
   ============================================================ */
.merchant-scroll,
.json-viewer,
.glass-modal-xl > .gm-body,
.pg-table-wrap,
.webhook-attempt-list,
.merchant-search-bar { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.merchant-scroll::-webkit-scrollbar,
.json-viewer::-webkit-scrollbar,
.glass-modal-xl > .gm-body::-webkit-scrollbar,
.pg-table-wrap::-webkit-scrollbar {
    width: 8px; height: 8px;
}
.merchant-scroll::-webkit-scrollbar-thumb,
.json-viewer::-webkit-scrollbar-thumb,
.glass-modal-xl > .gm-body::-webkit-scrollbar-thumb,
.pg-table-wrap::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    transition: background var(--transition);
}
.merchant-scroll::-webkit-scrollbar-thumb:hover,
.json-viewer::-webkit-scrollbar-thumb:hover,
.glass-modal-xl > .gm-body::-webkit-scrollbar-thumb:hover,
.pg-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}
.merchant-scroll::-webkit-scrollbar-corner,
.json-viewer::-webkit-scrollbar-corner,
.pg-table-wrap::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
   21. TABLES — sticky head, row entry stagger, action button polish
   ============================================================ */
.pro .pg-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-md);
}
.pro .pg-table-wrap:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.pro .pg-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg-surface);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="light"] .pro .pg-table thead th { background: #F8FAFC; }

/* Row hover: subtle accent bar + lift */
.pro .pg-table tbody tr {
    transition: background var(--transition), box-shadow var(--transition);
    position: relative;
}
.pro .pg-table tbody tr:hover {
    background: var(--color-bg-hover);
    box-shadow: inset 3px 0 0 var(--color-accent);
}
.pro .pg-table tbody tr:active { transform: scale(0.998); }

/* Row stagger entrance */
.pro .pg-table tbody tr {
    animation: rowIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pro .pg-table tbody tr:nth-child(1)  { animation-delay: 0ms; }
.pro .pg-table tbody tr:nth-child(2)  { animation-delay: 28ms; }
.pro .pg-table tbody tr:nth-child(3)  { animation-delay: 56ms; }
.pro .pg-table tbody tr:nth-child(4)  { animation-delay: 84ms; }
.pro .pg-table tbody tr:nth-child(5)  { animation-delay: 112ms; }
.pro .pg-table tbody tr:nth-child(6)  { animation-delay: 140ms; }
.pro .pg-table tbody tr:nth-child(7)  { animation-delay: 168ms; }
.pro .pg-table tbody tr:nth-child(8)  { animation-delay: 196ms; }
.pro .pg-table tbody tr:nth-child(9)  { animation-delay: 224ms; }
.pro .pg-table tbody tr:nth-child(10) { animation-delay: 252ms; }
@keyframes rowIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Code/path columns — monospace and color-tuned */
.pro .pg-table td.api-call-path,
.pro .pg-table .text-mono {
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    font-feature-settings: "ss01" 1;
}

/* Action buttons inside rows — subtle until hover, then lift */
.pg-table-action {
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pg-table-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.pg-table-action:active { transform: translateY(0) scale(0.95); }
.pg-table-action:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Badge polish — subtle ring on hover */
.pg-table .badge,
.pg-table .status-pill,
.pg-table .method-pill {
    transition: box-shadow var(--transition), transform var(--transition);
}
.pg-table .badge:hover,
.pg-table .status-pill:hover,
.pg-table .method-pill:hover {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

/* ============================================================
   22. BUTTONS — global hover lift + active depress
   ============================================================ */
.btn,
.bal-btn-primary,
.bal-btn-outline {
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}
.btn:hover:not(:disabled),
.bal-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
}
.btn:active:not(:disabled),
.bal-btn-primary:active:not(:disabled),
.bal-btn-outline:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}
.btn-icon { transition: var(--transition); }
.btn-icon:hover:not(:disabled) { transform: rotate(2deg) scale(1.05); }
.btn-icon:active:not(:disabled) { transform: scale(0.95); }

/* ============================================================
   23. DROPDOWNS — geo/styled/export
   ============================================================ */
/* Raise all merchant dropdown menus above subsequent page cards */
.merchant-toolbar .pro-geo-menu,
.merchant-toolbar .export-dropdown-menu,
.merchant-toolbar .export-dropdown__menu,
.merchant-filter-row .pro-geo-menu {
    z-index: 200;
}
.export-dropdown-menu {
    z-index: 200;
}
.pro-geo-menu,
.export-dropdown-menu {
    transform-origin: top right;
    animation: ddPopIn 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.merchant-filter-row .pro-geo-menu { transform-origin: top left; }
@keyframes ddPopIn {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pro-geo-option,
.export-dropdown-item {
    transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
.pro-geo-option:hover,
.export-dropdown-item:hover {
    padding-left: calc(var(--space-3) + 2px);
}

/* ============================================================
   24. MODALS — backdrop blur, contained scale-in
   ============================================================ */
.modal-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: backdropIn var(--transition-md) ease both;
}
@keyframes backdropIn {
    from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
.glass-modal,
.glass-modal-xl {
    animation: glassModalIn 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: center top;
}
@keyframes glassModalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   25. JSON VIEWER — hover token highlight
   ============================================================ */
.json-viewer { line-height: 1.6; }
.jv-key, .jv-string, .jv-number, .jv-bool {
    border-radius: var(--radius-xs);
    padding: 0 2px;
    transition: background var(--transition);
}
.jv-key:hover    { background: rgba(96, 165, 250, 0.10); }
.jv-string:hover { background: rgba(52, 211, 153, 0.10); }
.jv-number:hover { background: rgba(251, 191, 36, 0.10); }
.jv-bool:hover   { background: rgba(143, 255, 0, 0.10); }

/* ============================================================
   26. SPARKLINE — stroke-dash animate on mount
   ============================================================ */
.sparkline-svg polyline {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: sparkDraw 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.sparkline-svg .spark-area {
    opacity: 0;
    animation: sparkFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s;
}
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }
@keyframes sparkFade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   27. PAGINATION — pill buttons with hover lift
   ============================================================ */
.pg-page-btn {
    transition: var(--transition);
}
.pg-page-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.pg-page-btn:active:not(:disabled) { transform: translateY(0) scale(0.96); }
.pg-page-current {
    box-shadow: 0 2px 10px rgba(143, 255, 0, 0.25);
}
[data-theme="light"] .pg-page-current { box-shadow: 0 2px 10px rgba(79, 70, 229, 0.25); }

/* ============================================================
   28. STATUS PILLS / METHOD PILLS — ring on focus, refined sizing
   ============================================================ */
.method-pill,
.status-pill {
    transition: transform var(--transition), box-shadow var(--transition);
}
.method-pill:hover,
.status-pill:hover {
    transform: translateY(-1px);
}

/* ============================================================
   29. SETTINGS POLISH — section card variation, copy-success state
   ============================================================ */
.merchant-settings-grid .card {
    transition: transform var(--transition-md), box-shadow var(--transition-md), border-color var(--transition-md);
    animation: cardIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.merchant-settings-grid > *:nth-child(1) { animation-delay: 0ms; }
.merchant-settings-grid > *:nth-child(2) { animation-delay: 80ms; }
.merchant-settings-grid > *:nth-child(3) { animation-delay: 160ms; }
.merchant-settings-grid > *:nth-child(4) { animation-delay: 240ms; }
.merchant-settings-grid .card:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.merchant-settings-grid .card-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.merchant-settings-grid .card-title i {
    color: var(--color-accent);
    width: 18px;
    text-align: center;
}

/* Danger-zone visual treatment for the UI Access section */
.merchant-settings-danger-zone {
    border: 1px dashed var(--color-danger);
    background: var(--color-danger-dim);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-3);
}

/* Copy-success "Copied!" pulse */
.copy-success-pulse {
    animation: copyPulse 1.2s ease both;
}
@keyframes copyPulse {
    0%   { transform: translateY(0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(-4px); opacity: 0; }
}

/* ============================================================
   30. WEBHOOK ATTEMPTS — compact rhythm + mini status bar
   ============================================================ */
.webhook-attempt-row td { transition: background var(--transition); }
.webhook-attempts-mini {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    height: 12px;
}
.webhook-attempts-mini .seg {
    width: 4px;
    height: 100%;
    border-radius: 2px;
    background: var(--color-bg-hover);
}
.webhook-attempts-mini .seg--ok      { background: var(--color-success); }
.webhook-attempts-mini .seg--fail    { background: var(--color-danger); }
.webhook-attempts-mini .seg--pending { background: var(--color-warning); }

/* ============================================================
   31. PAGE-LEVEL ENTRANCE
   ============================================================ */
.pro {
    animation: proFadeIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes proFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   32. CHART CARD — head separator + hover edge
   ============================================================ */
.chart-card {
    transition: border-color var(--transition-md), box-shadow var(--transition-md), transform var(--transition-md);
    animation: cardIn 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chart-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.chart-card-head {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-3);
}
.chart-card-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.chart-card-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--color-accent);
    border-radius: var(--radius-xs);
}

/* ============================================================
   33. TIMELINE — connector polish + last-item dim
   ============================================================ */
.timeline-line { background: linear-gradient(180deg, var(--color-accent-dim), var(--color-border) 80%); }
.timeline-dot {
    transition: transform var(--transition);
}
.timeline-item:hover .timeline-dot { transform: scale(1.35); }

/* ============================================================
   34. ACCESSIBILITY — sharper focus everywhere on merchant pages
   ============================================================ */
.pro a:focus-visible,
.pro button:focus-visible,
.pro input:focus-visible,
.pro select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Topbar counter live-update gentle pulse */
.topbar__counter {
    transition: transform var(--transition);
}
.topbar__counter:hover { transform: translateY(-1px); }

/* ============================================================
   Topbar avatar — CSS-only initial fallback (no JS onerror race)
   ============================================================ */
.topbar-avatar-wrap {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tone, var(--color-accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-on-accent);
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
    flex-shrink: 0;
}
.topbar-avatar-wrap:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.topbar-avatar-wrap::before {
    content: var(--initial, 'U');
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}
.topbar-avatar-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 0;
    /* fade in once decoded so the initial doesn't blink */
    animation: avatarReveal var(--transition-spring) ease both;
}
.topbar-avatar-img[src=""],
.topbar-avatar-img:not([src]) { display: none; }
@keyframes avatarReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   35. RESPONSIVE — narrow viewport tweaks
   ============================================================ */
@media (max-width: 600px) {
    .merchant-toolbar { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
    .empty-state-card { padding: var(--space-6) var(--space-4); min-height: 180px; }
    .empty-state-art { width: 72px; height: 72px; }
}

/* ============================================================
   37. SEGMENTED CONTROL — iOS/Material 3 style range selector
   ============================================================ */
.merchant-segmented {
    display: inline-flex;
    gap: 0;
    padding: 3px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
}
.merchant-segmented-btn {
    padding: 5px 12px;
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 9999px;
    min-width: 44px;
    text-align: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    /* Transition only background and color — never width */
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    border: none;
    background: transparent;
    font-family: var(--font-family);
    line-height: 1.4;
}
.merchant-segmented-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}
.merchant-segmented-btn.is-active {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--color-accent);
}
.merchant-segmented-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Light theme */
[data-theme="light"] .merchant-segmented {
    background: #F1F5F9;
    border-color: #E2E8F0;
}
[data-theme="light"] .merchant-segmented-btn {
    color: #64748B;
}
[data-theme="light"] .merchant-segmented-btn:hover {
    color: #0F172A;
    background: #FFFFFF;
}
[data-theme="light"] .merchant-segmented-btn.is-active {
    background: var(--color-accent);
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25), 0 0 0 1px var(--color-accent);
}

/* ============================================================
   38. LIGHT THEME PARITY — toolbar, filter row, empty-state-cta
   ============================================================ */

/* Toolbar surface */
[data-theme="light"] .merchant-toolbar {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .merchant-toolbar-sep {
    background: #CBD5E1;
}

/* Filter row inputs inherit token colors which already switch —
   but force white bg for date inputs so they match other fields */
[data-theme="light"] .merchant-filter-row .form-input,
[data-theme="light"] .merchant-filter-row .form-input-sm {
    background: #FFFFFF;
    border-color: #E2E8F0;
    color: #0F172A;
}
[data-theme="light"] .merchant-filter-row .filter-toggle {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #64748B;
}
[data-theme="light"] .merchant-filter-row .filter-toggle:hover {
    border-color: #C7D2FE;
    color: #0F172A;
}

/* Empty-state CTA pill in light */
[data-theme="light"] .empty-state-cta {
    color: var(--color-accent);
    background: rgba(79, 70, 229, 0.08);
    border-color: transparent;
}
[data-theme="light"] .empty-state-cta:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* Chart card head separator in light */
[data-theme="light"] .chart-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
}
[data-theme="light"] .chart-card-head {
    border-bottom-color: #E2E8F0;
}
[data-theme="light"] .chart-card:hover {
    border-color: #C7D2FE;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* Settings grid cards in light */
[data-theme="light"] .merchant-settings-grid .card {
    background: #FFFFFF;
    border-color: #E2E8F0;
}
[data-theme="light"] .merchant-settings-grid .card:hover {
    border-color: #C7D2FE;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}
[data-theme="light"] .merchant-settings-danger-zone {
    background: #FEF2F2;
    border-color: #FECACA;
}
[data-theme="light"] .settings-field-row {
    border-bottom-color: #F1F5F9;
}
[data-theme="light"] .settings-field-row .label {
    color: #64748B;
}

/* Export dropdown in light */
[data-theme="light"] .export-dropdown-menu {
    background: #FFFFFF;
    border-color: #E2E8F0;
}
[data-theme="light"] .export-dropdown-item {
    color: #0F172A;
}
[data-theme="light"] .export-dropdown-item:hover {
    background: #F8FAFC;
}

/* Toggle switch label text in light */
[data-theme="light"] .toggle-switch-label {
    color: #334155;
}
[data-theme="light"] .toggle-switch:hover .toggle-switch-label {
    color: #0F172A;
}
[data-theme="light"] .toggle-switch:hover .toggle-switch-track {
    border-color: #94A3B8;
}

/* Webhook attempt table in light */
[data-theme="light"] .webhook-attempt-list th {
    background: #F8FAFC;
    color: #64748B;
}
[data-theme="light"] .webhook-attempt-row:hover { background: #F8FAFC; }

/* KPI accent tile in light — already handled in section 15, ensure gradient */
[data-theme="light"] .merchant-kpi-grid .pg-stat--accent {
    background: linear-gradient(135deg, #EEF2FF 0%, #FFFFFF 100%);
    border-color: #C7D2FE;
}

/* Payload header in light */
[data-theme="light"] .payload-header {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

/* Regenerate secret warning in light */
[data-theme="light"] .regenerate-secret-value {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

/* ============================================================
   36. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .merchant-kpi-grid .pg-stat,
    .merchant-kpi-grid .kpi-tile,
    .merchant-settings-grid .card,
    .empty-state-card,
    .empty-state-art,
    .pro,
    .pro .pg-table tbody tr,
    .sparkline-svg polyline,
    .sparkline-svg .spark-area,
    .glass-modal,
    .glass-modal-xl,
    .modal-backdrop,
    .date-picker-popover,
    .pro-geo-menu,
    .export-dropdown-menu,
    .chart-card { animation: none !important; }
    .merchant-kpi-grid .pg-stat:hover,
    .merchant-kpi-grid .kpi-tile:hover,
    .btn:hover:not(:disabled),
    .pg-table-action:hover,
    .pg-page-btn:hover:not(:disabled) { transform: none !important; }
    .merchant-segmented-btn,
    .gm-amount-display,
    .gm-section,
    .webhook-modal-progress-fill { animation: none !important; transition: none !important; }
}

/* ============================================================
   39. MODAL REDESIGN — two-column detail layout, big amount,
       centered loading, search focus fix, pagination dropdown
   ============================================================ */

/* --- Widen xl modal for two-column content --- */
.glass-modal-xl {
    max-width: min(1100px, 96vw) !important;
}

/* --- Make gm-body a flex column so .merchant-modal-loading can flex:1 --- */
.glass-modal .gm-body,
.glass-modal-lg .gm-body,
.glass-modal-xl .gm-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* But 2col and webhook bodies are grid — reset to grid */
.glass-modal-xl .gm-body.gm-body--2col {
    display: grid;
}
.glass-modal-xl .gm-body.gm-body--webhook {
    display: block;
}

/* --- Loading state: centered spinner fills full body --- */
.merchant-modal-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 320px;
    padding: var(--space-6);
}
.merchant-modal-loading .spinner-lg {
    width: 48px;
    height: 48px;
}
.merchant-modal-loading .spinner-lg::before,
.merchant-modal-loading .spinner-lg::after {
    border-width: 3px;
}
.merchant-modal-loading-text {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}

/* --- Sticky header with accent gradient border --- */
.gm-header--sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-surface);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
}
.gm-header-id {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    letter-spacing: 0.01em;
}
[data-theme="light"] .gm-header--sticky {
    background: #FFFFFF;
    border-bottom-color: #E2E8F0;
}

/* --- Two-column body layout --- */
.gm-body--2col {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    align-items: start;
    width: 100%;
    overflow-x: hidden;
}
.gm-body--2col > * { min-width: 0; }
/* Webhook modal uses slightly equal columns */
.gm-body--webhook {
    padding: var(--space-4) var(--space-5);
    overflow-x: hidden;
}
.gm-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    overflow: hidden;
}
.gm-col--payload {
    min-width: 0;
    overflow: visible; /* let json-viewer scroll internally */
}
@media (max-width: 680px) {
    .gm-body--2col,
    .gm-body--webhook { grid-template-columns: 1fr; overflow-x: hidden; }
    .gm-body--2col { display: flex; flex-direction: column; }
}

/* --- Section blocks --- */
.gm-section {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--transition);
}
.gm-section:hover { border-color: var(--color-border-strong); }
.gm-section--amount {
    background: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-elevated) 100%);
}
.gm-section--muted { opacity: 0.65; }
.gm-section--payload { padding-bottom: var(--space-2); }
.gm-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
}
.gm-section-title i {
    font-size: 11px;
    color: var(--color-accent);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* --- Row: label / value pairs --- */
.gm-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-sm);
    transition: background var(--transition);
}
.gm-row:last-child { border-bottom: none; }
.gm-row:hover { background: var(--color-bg-hover); margin: 0 calc(-1 * var(--space-2)); padding-left: var(--space-2); padding-right: var(--space-2); border-radius: var(--radius-sm); }
.gm-row-label {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    min-width: 90px;
}
.gm-row-value {
    color: var(--color-text-primary);
    text-align: right;
    word-break: break-all;
    font-weight: 500;
}

/* --- Big amount display --- */
.gm-amount-display {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-3) 0;
}
.gm-amount-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    transition: color var(--transition);
}
.gm-amount-currency {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.gm-amount--success .gm-amount-value { color: var(--color-success); }
.gm-amount--danger  .gm-amount-value { color: var(--color-danger); }
.gm-amount--pending .gm-amount-value { color: var(--color-warning); }

/* --- Geo display --- */
.gm-geo-display {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}
.gm-geo-flag {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}
.gm-geo-flag-img {
    width: 32px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid var(--color-border);
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    display: block;
}
.gm-geo-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gm-geo-name {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--color-text-primary);
}
.gm-geo-meta {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
}

/* --- Webhook list in modal --- */
.gm-webhook-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.gm-webhook-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-sm);
}
.gm-webhook-row:last-child { border-bottom: none; }
.gm-webhook-event {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gm-empty-hint {
    font-size: var(--font-sm);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
    font-style: italic;
}

/* --- Footer with left-side actions --- */
.gm-footer--actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}
.gm-footer--actions .btn-ghost {
    margin-right: auto;
}

/* ============================================================
   40. WEBHOOK MODAL GRID
   ============================================================ */
.webhook-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    width: 100%;
    overflow-x: hidden;
}
.webhook-modal-grid > * { min-width: 0; }
@media (max-width: 680px) {
    .webhook-modal-grid { grid-template-columns: 1fr; overflow-x: hidden; }
}
.webhook-modal-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    overflow: hidden;
}
.webhook-modal-col--payload {
    overflow: visible; /* json-viewer scrolls internally */
}
.webhook-modal-col--payload .gm-section { padding-bottom: var(--space-2); }
.webhook-modal-section-title {
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
}
.webhook-modal-progress {
    height: 4px;
    background: var(--color-bg-elevated);
    border-radius: 9999px;
    overflow: hidden;
    margin: 4px 0 var(--space-2);
}
.webhook-modal-progress-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 9999px;
    transition: width var(--transition-spring);
}
.webhook-modal-url {
    display: block;
    width: 100%;
    max-width: 100%;
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: var(--font-xs);
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    word-break: break-all;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.5;
    margin-top: 2px;
    box-sizing: border-box;
}
/* Allow webhook modal rows to shrink so long URLs / payloads wrap inside columns. */
.webhook-modal-grid,
.webhook-modal-grid > *,
.gm-row,
.gm-row-value,
.gm-section { min-width: 0; }

/* ============================================================
   41. SETTINGS — 2-1 column grid + col stacking
   ============================================================ */
.merchant-settings-grid--2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4);
    max-width: 1280px;
}
.merchant-settings-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
@media (max-width: 1000px) {
    .merchant-settings-grid--2-1 { grid-template-columns: 1fr; }
}
/* Keep existing animation/stagger on child cards */
.merchant-settings-col .card {
    transition: transform var(--transition-md), box-shadow var(--transition-md), border-color var(--transition-md);
    animation: cardIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.merchant-settings-col:first-child .card:nth-child(1) { animation-delay: 0ms; }
.merchant-settings-col:first-child .card:nth-child(2) { animation-delay: 80ms; }
.merchant-settings-col:last-child  .card:nth-child(1) { animation-delay: 160ms; }
.merchant-settings-col:last-child  .card:nth-child(2) { animation-delay: 240ms; }
.merchant-settings-col .card:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
[data-theme="light"] .merchant-settings-col .card {
    background: #FFFFFF;
    border-color: #E2E8F0;
}
[data-theme="light"] .merchant-settings-col .card:hover {
    border-color: #C7D2FE;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}

/* ============================================================
   42. PAGINATION DROPDOWN — size StyledDropdown compact
   ============================================================ */
/* Make the pagesize dropdown slim like the old select */
.pg-pagesize-dropdown .pro-geo-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    justify-content: space-between;
    font-size: var(--font-sm);
    font-weight: 500;
    min-width: 100px;
}
.pg-pagesize-dropdown .pro-geo-menu {
    min-width: 120px;
    right: 0;
    left: auto;
}
[data-theme="light"] .pg-pagesize-dropdown .pro-geo-btn {
    background: #FFFFFF;
    border-color: #E2E8F0;
    color: #475569;
}
[data-theme="light"] .pg-pagesize-dropdown .pro-geo-btn:hover {
    background: #F8FAFC;
}

/* ============================================================
   43. SEARCH FOCUS — single outline, no double ring
   ============================================================ */
/* The merchant toolbar search wrapper already has focus-within styles.
   Suppress the inner input's native outline so only the container glows. */
.merchant-toolbar-search .pg-search input:focus,
.pg-search input:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* Ensure the container gets the single ring */
.pg-search:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
    outline: none;
}
[data-theme="light"] .pg-search:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* ============================================================
   44. MODAL LIGHT THEME
   ============================================================ */
[data-theme="light"] .gm-section {
    background: #FFFFFF;
    border-color: #E2E8F0;
}
[data-theme="light"] .gm-section--amount {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
}
[data-theme="light"] .gm-section-title { color: #64748B; }
[data-theme="light"] .gm-section-title i { color: var(--color-accent); }
[data-theme="light"] .gm-row { border-bottom-color: #F1F5F9; }
[data-theme="light"] .gm-row-label { color: #64748B; }
[data-theme="light"] .gm-row-value { color: #0F172A; }
[data-theme="light"] .gm-amount-value { color: #0F172A; }
[data-theme="light"] .gm-amount--success .gm-amount-value { color: var(--color-success); }
[data-theme="light"] .gm-amount--danger  .gm-amount-value { color: var(--color-danger); }
[data-theme="light"] .gm-amount--pending .gm-amount-value { color: var(--color-warning); }
[data-theme="light"] .gm-amount-currency { color: #64748B; }
[data-theme="light"] .webhook-modal-url {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #0F172A;
}
[data-theme="light"] .webhook-modal-progress { background: #E2E8F0; }
[data-theme="light"] .gm-webhook-row { border-bottom-color: #F1F5F9; }
[data-theme="light"] .merchant-modal-loading-text { color: #64748B; }

/* ==========================================================================
   Admin Dashboard (Phase F — polished)
   Header, exchange-rates section, KPI tiles, multi-line chart, skeletons.
   All tokens shared with the merchant area; light theme inherits via the
   shared CSS variable cascade with a few targeted overrides at the bottom.
   ========================================================================== */

.admin-dashboard { animation: adminFadeIn 280ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes adminFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Header band ---- */
.admin-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.admin-dashboard-header-text { min-width: 0; flex: 1 1 320px; }
.admin-dashboard-title {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.15;
}
.admin-dashboard-subtitle {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    max-width: 720px;
    line-height: 1.45;
}
.admin-dashboard-controls {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}
.admin-dashboard-refresh:active:not([disabled]) { transform: scale(0.98); }
.admin-dashboard-refresh[disabled] { opacity: 0.55; cursor: progress; }

/* ---- Two-column layout (KPI grid | chart). Mobile collapses to a stack. ---- */
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 1200px) {
    .admin-dashboard-grid { grid-template-columns: 1fr; }
}

/* ---- KPI grid ---- */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}
/* Stagger fade-up — 11 tiles plus a rubric divider, in DOM order. */
.admin-kpi-grid > * {
    animation: kpiTileIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.admin-kpi-grid > *:nth-child(1)  { animation-delay: 0ms; }
.admin-kpi-grid > *:nth-child(2)  { animation-delay: 40ms; }
.admin-kpi-grid > *:nth-child(3)  { animation-delay: 80ms; }
.admin-kpi-grid > *:nth-child(4)  { animation-delay: 120ms; }
.admin-kpi-grid > *:nth-child(5)  { animation-delay: 160ms; }
.admin-kpi-grid > *:nth-child(6)  { animation-delay: 200ms; }
.admin-kpi-grid > *:nth-child(7)  { animation-delay: 240ms; }
.admin-kpi-grid > *:nth-child(8)  { animation-delay: 280ms; }
.admin-kpi-grid > *:nth-child(9)  { animation-delay: 320ms; }
.admin-kpi-grid > *:nth-child(10) { animation-delay: 360ms; }
.admin-kpi-grid > *:nth-child(11) { animation-delay: 400ms; }
.admin-kpi-grid > *:nth-child(12) { animation-delay: 440ms; }

/* Rubric divider that splits operational metrics from revenue tiles.
   Spans full grid width regardless of column count via grid-column: 1 / -1. */
.admin-kpi-rubric {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-1);
}
.admin-kpi-rubric-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.admin-kpi-rubric-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.admin-kpi-rubric-label i { color: var(--color-accent); font-size: 10px; }

/* ---- KPI tile (extended) ---- */
.kpi-tile-ext {
    position: relative;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 140px;
    transition: transform var(--transition-md), box-shadow var(--transition-md), border-color var(--transition-md);
    will-change: transform;
}
.kpi-tile-ext:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--color-border-strong);
}
.kpi-tile-ext:active { transform: translateY(-1px) scale(0.997); }
.kpi-tile-ext:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Revenue-tone variant for fee tiles — soft accent tint + accent icon background. */
.kpi-tile-ext--revenue {
    background:
        linear-gradient(180deg, var(--color-accent-dim) 0%, transparent 60%),
        var(--color-bg-surface);
    border-color: var(--color-border-strong);
}

/* Head row: 28x28 icon chip + uppercase title + optional eye toggle. */
.kpi-tile-ext-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 28px;
}
.kpi-tile-ext-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-accent-dim);
    color: var(--color-accent);
    flex-shrink: 0;
    transition: background var(--transition-md), transform var(--transition-md);
}
.kpi-tile-ext:hover .kpi-tile-ext-icon-wrap { transform: rotate(-4deg) scale(1.04); }
.kpi-tile-ext-icon { color: var(--color-accent); font-size: 13px; }
.kpi-tile-ext-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: anywhere;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.kpi-tile-ext-eye {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    flex-shrink: 0;
}
.kpi-tile-ext-eye:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
    border-color: var(--color-border);
}
.kpi-tile-ext-eye:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.kpi-tile-ext-eye:active { transform: scale(0.92); }
.kpi-tile-ext-eye-placeholder { width: 26px; height: 26px; flex-shrink: 0; }

/* Value: large, tabular numbers. Long values: shrink at smaller viewports. */
.kpi-tile-ext-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.01em;
    word-break: break-word;
    transition: filter var(--transition-md), color var(--transition-md);
}
.kpi-tile-ext-value-mask {
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}
.kpi-tile-ext-value.is-hidden {
    filter: blur(6px);
    color: var(--color-text-muted);
    user-select: none;
}
.kpi-tile-ext-prev {
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    transition: opacity var(--transition-md);
}
.kpi-tile-ext-prev.is-hidden { opacity: 0; }

.kpi-tile-ext-delta {
    font-size: var(--font-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    margin-top: auto;
    padding: 2px 8px 2px 6px;
    border-radius: var(--radius-full);
    align-self: flex-start;
    min-height: 20px;
    line-height: 1.4;
}
.kpi-tile-ext-delta i { font-size: 9px; }
.kpi-tile-ext-delta--up   {
    color: var(--color-success);
    background: var(--color-success-dim);
}
.kpi-tile-ext-delta--down {
    color: var(--color-danger);
    background: var(--color-danger-dim);
}
.kpi-tile-ext-delta--flat {
    color: var(--color-text-muted);
    background: var(--color-bg-hover);
}

/* ---- Chart card ---- */
.admin-chart-card {
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    animation: kpiTileIn 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 80ms;
}
.admin-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
    gap: var(--space-3);
    flex-wrap: wrap;
}
.admin-chart-header-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-chart-header h3 {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.2;
}
.admin-chart-period-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}
.admin-chart-period {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    padding: 4px 10px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* ---- Multi-line chart ---- */
.multi-line-chart-wrap {
    position: relative;
    width: 100%;
}
.multi-line-chart {
    width: 100%;
    height: auto;
    user-select: none;
    display: block;
}
.multi-line-chart-grid {
    stroke: var(--color-border);
    stroke-dasharray: 3 3;
    stroke-width: 1;
    opacity: 0.7;
}
.multi-line-chart-axis {
    fill: var(--color-text-muted);
    font-size: 10px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.multi-line-chart-cursor {
    stroke: var(--color-border-strong);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    opacity: 0.8;
}
.multi-line-chart-area {
    animation: chartAreaIn 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.multi-line-chart-line {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: chartLineDraw 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes chartLineDraw {
    from { stroke-dashoffset: 2000; }
    to   { stroke-dashoffset: 0; }
}
@keyframes chartAreaIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Empty state — illustrated, matches merchant empty-state-card visual weight. */
.multi-line-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    min-height: 320px;
    text-align: center;
}
.multi-line-chart-empty-illustration {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent-dim);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}
.multi-line-chart-empty-illustration i { font-size: 22px; }
.multi-line-chart-empty-title {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--color-text-primary);
}
.multi-line-chart-empty-sub {
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    max-width: 360px;
    line-height: 1.5;
}

/* Legend: button semantics + clearer disabled state. */
.multi-line-chart-legend {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.multi-line-chart-legend-item {
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    transition: var(--transition);
    color: inherit;
    font: inherit;
}
.multi-line-chart-legend-item:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border);
}
.multi-line-chart-legend-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.multi-line-chart-legend-item:active { transform: scale(0.97); }
.multi-line-chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}
.multi-line-chart-legend-label {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    font-weight: 600;
}
.multi-line-chart-legend-item.is-disabled .multi-line-chart-legend-dot {
    background: transparent !important;
    border: 1.5px dashed currentColor;
}
.multi-line-chart-legend-item.is-disabled .multi-line-chart-legend-label {
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--color-text-muted);
    text-decoration-thickness: 1px;
}
.multi-line-chart-legend-item.is-disabled { opacity: 0.65; }

/* Tooltip: elevated card with shadow + dot indicators. */
.multi-line-chart-tooltip {
    position: absolute;
    transform: translateX(-50%);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    pointer-events: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--color-border);
    z-index: 5;
    min-width: 180px;
    animation: tooltipIn 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tooltipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-2px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.multi-line-chart-tooltip-title {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
}
.multi-line-chart-tooltip-row {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    padding: 2px 0;
}
.multi-line-chart-tooltip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px var(--color-bg-elevated);
}
.multi-line-chart-tooltip-val {
    font-weight: 700;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Exchange rates section (on the Dashboard page, not the topbar)
   ========================================================================== */

.admin-rates-section {
    margin-bottom: var(--space-5);
    animation: kpiTileIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.admin-rates-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.admin-rates-section-title {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}
.admin-rates-section-title i {
    color: var(--color-accent);
    font-size: 12px;
}
.admin-rates-section-meta {
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-rates-source {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.admin-rates-source:hover { opacity: 0.85; }

/* New: separated chips so the data source and last-updated tag don't visually
   collide. Two-pill row stacks naturally on narrow viewports via flex-wrap. */
.admin-rates-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-rates-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 160ms ease;
}
.admin-rates-chip i { font-size: 10px; }
.admin-rates-chip--source {
    color: var(--color-accent);
    border-color: rgba(143,255,0,0.25);
    background: rgba(143,255,0,0.08);
}
.admin-rates-chip--source:hover { background: rgba(143,255,0,0.15); }
.admin-rates-chip--updated { color: var(--color-text-secondary); }

/* Settlement controls row in Merchant→Finance (ATL-25) */
.merchant-settle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-elevated);
    flex-wrap: wrap;
}
.merchant-settle-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.merchant-settle-right { display: flex; align-items: center; gap: 10px; }
.merchant-settle-label {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}
.merchant-settle-hint {
    font-size: var(--font-xs);
    color: var(--color-text-muted);
}
/* Subtle live-pulse dot indicating fresh data — 2s soft cycle. */
.admin-rates-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation: ratesPulse 2.4s ease-out infinite;
    flex-shrink: 0;
}
@keyframes ratesPulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0);  }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);    }
}
.admin-rates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}
.admin-rates-grid > * { animation: kpiTileIn 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.admin-rates-grid > *:nth-child(1) { animation-delay: 0ms; }
.admin-rates-grid > *:nth-child(2) { animation-delay: 50ms; }
.admin-rates-grid > *:nth-child(3) { animation-delay: 100ms; }
.admin-rates-grid > *:nth-child(4) { animation-delay: 150ms; }
.admin-rates-grid > *:nth-child(5) { animation-delay: 200ms; }
.admin-rates-grid > *:nth-child(6) { animation-delay: 250ms; }

.admin-rate-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform var(--transition-md), box-shadow var(--transition-md), border-color var(--transition-md);
}
.admin-rate-card:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.admin-rate-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.admin-rate-card-flag {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-elevated);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.admin-rate-card-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.admin-rate-card-flag i {
    color: var(--color-text-muted);
    font-size: 10px;
}
.admin-rate-card-pair {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    flex: 1;
}
.admin-rate-card-pair-sep { color: var(--color-text-muted); margin: 0 1px; font-weight: 400; }

.admin-rate-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}
.admin-rate-card-label {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-rate-card-label i { color: var(--color-text-muted); font-size: 9px; }
.admin-rate-card-val {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Skeleton loading state — animated shimmer placeholders that mirror the
   real layout so there's no shift when data arrives.
   ========================================================================== */

@keyframes adminSkeletonShimmer {
    0%   { background-position: -300px 0; }
    100% { background-position: calc(300px + 100%) 0; }
}
.admin-skeleton-card {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    min-height: 140px;
    padding: var(--space-4);
}
.admin-skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 100%);
    background-size: 300px 100%;
    background-repeat: no-repeat;
    animation: adminSkeletonShimmer 1.4s ease-in-out infinite;
    pointer-events: none;
}
.admin-skeleton-line {
    background: var(--color-bg-hover);
    border-radius: var(--radius-sm);
    height: 12px;
    margin-bottom: var(--space-2);
}
.admin-skeleton-line--head  { width: 60%; height: 10px; }
.admin-skeleton-line--value { width: 70%; height: 28px; margin-top: var(--space-2); }
.admin-skeleton-line--prev  { width: 45%; height: 10px; }
.admin-skeleton-line--title { width: 40%; height: 16px; margin-bottom: var(--space-4); }
.admin-skeleton-chart       { height: 320px; background: var(--color-bg-hover); border-radius: var(--radius-md); }
.admin-skeleton-card--chart { min-height: 380px; }

.admin-rates-grid--skeleton { margin-bottom: var(--space-5); }
.admin-rates-grid--skeleton .admin-rate-card.admin-skeleton-card { min-height: 110px; }

/* ==========================================================================
   Error state
   ========================================================================== */

.admin-error-card {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}
.admin-error-card i.fa-triangle-exclamation {
    color: var(--color-danger);
    font-size: 28px;
    margin-bottom: var(--space-2);
}
.admin-error-title {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}
.admin-error-detail {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Responsive refinements (admin dashboard)
   ========================================================================== */

@media (max-width: 1200px) {
    /* Stack KPI grid + chart; chart can use full width. */
    .admin-chart-card { animation-delay: 0ms; }
}
@media (max-width: 720px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }
    .kpi-tile-ext { padding: var(--space-3); min-height: 120px; }
    .kpi-tile-ext-value { font-size: 22px; }
    .admin-rates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-dashboard-header { flex-direction: column; align-items: stretch; }
    .admin-dashboard-controls { justify-content: flex-start; }
}
@media (max-width: 480px) {
    .admin-kpi-grid { grid-template-columns: 1fr; }
    .admin-rates-grid { grid-template-columns: 1fr; }
}

/* Honor reduced-motion: kill staggered cascades and shimmer. */
@media (prefers-reduced-motion: reduce) {
    .admin-dashboard,
    .admin-kpi-grid > *,
    .admin-rates-grid > *,
    .admin-rates-section,
    .admin-chart-card,
    .multi-line-chart-area,
    .multi-line-chart-line,
    .multi-line-chart-tooltip,
    .admin-skeleton-card::after,
    .admin-rates-pulse {
        animation: none !important;
    }
    .kpi-tile-ext { transition: none; }
    .kpi-tile-ext:hover { transform: none; }
    .admin-rate-card:hover { transform: none; }
}

/* ==========================================================================
   Light theme overrides
   ========================================================================== */

[data-theme="light"] .kpi-tile-ext,
[data-theme="light"] .admin-chart-card,
[data-theme="light"] .admin-rate-card,
[data-theme="light"] .admin-skeleton-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .kpi-tile-ext:hover {
    border-color: #C7D2FE;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px #C7D2FE;
}
[data-theme="light"] .admin-rate-card:hover {
    border-color: #C7D2FE;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .kpi-tile-ext--revenue {
    background:
        linear-gradient(180deg, #EEF2FF 0%, #FFFFFF 60%),
        #FFFFFF;
    border-color: #C7D2FE;
}
[data-theme="light"] .kpi-tile-ext-icon-wrap {
    background: #EEF2FF;
}
[data-theme="light"] .kpi-tile-ext-icon { color: #4F46E5; }
[data-theme="light"] .multi-line-chart-tooltip {
    background: #FFFFFF;
    border-color: #CBD5E1;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 0 0 1px #E2E8F0;
}
[data-theme="light"] .multi-line-chart-tooltip-dot {
    box-shadow: 0 0 0 2px #FFFFFF;
}
[data-theme="light"] .multi-line-chart-tooltip-title {
    border-bottom-color: #E2E8F0;
}
[data-theme="light"] .multi-line-chart-legend {
    border-top-color: #E2E8F0;
}
[data-theme="light"] .admin-chart-period {
    background: #F1F5F9;
    border-color: #E2E8F0;
}
[data-theme="light"] .admin-rate-card-flag {
    background: #F1F5F9;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}
[data-theme="light"] .admin-kpi-rubric-line {
    background: #E2E8F0;
}
[data-theme="light"] .kpi-tile-ext-delta--up   {
    background: #ECFDF5;
}
[data-theme="light"] .kpi-tile-ext-delta--down {
    background: #FEF2F2;
}
[data-theme="light"] .kpi-tile-ext-delta--flat {
    background: #F1F5F9;
}
[data-theme="light"] .admin-skeleton-line,
[data-theme="light"] .admin-skeleton-chart {
    background: #F1F5F9;
}
[data-theme="light"] .admin-skeleton-card::after {
    background: linear-gradient(90deg,
        transparent 0,
        rgba(15, 23, 42, 0.05) 50%,
        transparent 100%);
    background-size: 300px 100%;
    background-repeat: no-repeat;
}

/* ============================================================
   Merchant Help page (ATL-28 / P1-24)
   ============================================================ */
.merchant-page-title {
    font-size: 22px; font-weight: 700; color: var(--color-text-primary);
    margin: 0 0 4px 0; letter-spacing: -0.01em;
}
.merchant-page-sub {
    font-size: 14px; color: var(--color-text-muted);
}

.merchant-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.merchant-help-card {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    background: var(--color-bg-elevated, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.18s ease;
    color: inherit;
}
.merchant-help-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.merchant-help-card-primary {
    background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(79,70,229,0.04));
    border-color: rgba(79,70,229,0.4);
}
.merchant-help-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent-dim, rgba(79,70,229,0.12));
    color: var(--color-accent);
    border-radius: 10px;
    font-size: 20px;
}
.merchant-help-body { flex: 1; min-width: 0; }
.merchant-help-name {
    font-size: 15px; font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 3px;
}
.merchant-help-desc {
    font-size: 12.5px; color: var(--color-text-muted);
    line-height: 1.4;
}
.merchant-help-action {
    flex-shrink: 0;
    font-size: 12px; font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
}
.merchant-help-action i { margin-right: 4px; }

.merchant-help-footnote {
    margin-top: 24px; padding: 12px 16px;
    background: rgba(143, 255, 0, 0.06);
    border-left: 3px solid #8FFF00;
    border-radius: 0 8px 8px 0;
    font-size: 12.5px; color: var(--color-text-muted);
    line-height: 1.5;
}
.merchant-help-footnote i {
    color: #8FFF00; margin-right: 6px;
}

[data-theme="light"] .merchant-help-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
}
[data-theme="light"] .merchant-help-card:hover {
    box-shadow: 0 4px 16px rgba(15,23,42,0.08);
}
[data-theme="light"] .merchant-help-card-primary {
    background: linear-gradient(135deg, #EEF2FF, #F8FAFC);
    border-color: #C7D2FE;
}
[data-theme="light"] .merchant-help-footnote {
    background: #F0FDF4;
    color: #475569;
    border-left-color: #16A34A;
}
[data-theme="light"] .merchant-help-footnote i { color: #16A34A; }