/* ============================================================
   PLATFORM PROCESSING — Design System
   Salesforce Invoice CRM Dashboard Style
   ============================================================ */

/* ---- 0. THE RUPEE SIGN ---- */
/* DM Sans draws U+20B9 as a Z with two bars, which nobody in India reads as the rupee sign. This family
   holds that one code point and nothing else (unicode-range), taken from a font the device already has, so
   nothing is downloaded: Inter where it is installed, else the system face (Segoe UI on Windows, Roboto on
   Android, Helvetica Neue on iOS and macOS, Noto Sans or Arial elsewhere). It stands first in --font-family;
   every other character falls through to DM Sans exactly as before. A device with none of these fonts
   keeps the DM Sans glyph. The Cyrillic stack starts with Inter, whose own sign is the familiar one. */
@font-face {
    font-family: 'Rupee Sign';
    font-weight: 100 500;
    src: local('Inter'), local('Inter Regular'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Noto Sans'), local('Arial');
    unicode-range: U+20B9;
}
@font-face {
    font-family: 'Rupee Sign';
    font-weight: 600 900;
    src: local('Inter Bold'), local('Segoe UI Bold'), local('Roboto Bold'), local('Helvetica Neue Bold'), local('Noto Sans Bold'), local('Arial Bold'),
         local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Noto Sans'), local('Arial');
    unicode-range: U+20B9;
}

/* ---- 1. DESIGN TOKENS ---- */
:root {
    /* -- Backgrounds -- */
    --color-bg-base:        #111315;
    --color-bg-surface:     #1D2125;
    --color-bg-elevated:    #282C31;
    --color-bg-overlay:     #1A1D21;
    --color-bg-hover:       #2A2E33;
    --color-bg-white-card:  #FFFFFF;
    --color-bg-white-hover: #F9FAFB;
    --color-bg-white-head:  #F9FAFB;

    /* -- Borders -- */
    --color-border:         rgba(255, 255, 255, 0.08);
    --color-border-strong:  rgba(255, 255, 255, 0.12);
    --color-border-light:   #E5E7EB;

    /* -- Accent -- */
    --color-accent:         #8FFF00;
    --color-accent-dim:     rgba(143, 255, 0, 0.15);
    --color-accent-hover:   #7AE000;
    --color-accent2:        #FD7557;
    --color-accent2-dim:    rgba(253, 117, 87, 0.15);

    /* -- Text -- */
    --color-text-primary:   #FFFFFF;
    --color-text-secondary: #8A8F98;
    --color-text-muted:     #5A5F66;
    --color-text-on-accent: #111315;
    --color-text-dark:      #1A1D21;
    --color-text-dark-sec:  #6B7280;

    /* -- Status -- */
    --color-success:        #34D399;
    --color-success-dim:    rgba(52, 211, 153, 0.12);
    --color-warning:        #FBBF24;
    --color-warning-dim:    rgba(251, 191, 36, 0.12);
    --color-danger:         #F87171;
    --color-danger-dim:     rgba(248, 113, 113, 0.12);
    --color-info:           #60A5FA;
    --color-info-dim:       rgba(96, 165, 250, 0.12);
    --color-online:         #34D399;
    --color-offline:        #5A5F66;

    /* -- DEV-106: rate-provider brand + CE side colors -- */
    --provider-binance:     #F0B90B;                                       /* Binance brand gold */
    --provider-criptoya:    var(--color-text-muted);                       /* muted gray */
    --provider-upbit:       #4E8CFF;                                       /* Upbit brand blue (readable on dark) */
    --provider-coingecko:   #8DC63F;                                       /* CoinGecko brand green */
    --ce-side-default:      color-mix(in srgb, var(--color-success) 70%, black); /* darker green (default = bid) */

    /* -- Light-theme badges -- */
    --badge-success-bg:     #ECFDF5;
    --badge-success-text:   #059669;
    --badge-warning-bg:     #FFFBEB;
    --badge-warning-text:   #D97706;
    --badge-danger-bg:      #FEF2F2;
    --badge-danger-text:    #DC2626;
    --badge-info-bg:        #EFF6FF;
    --badge-info-text:      #2563EB;

    /* -- Shadows -- */
    --shadow-sm:            0 1px 3px rgba(0,0,0,0.08);
    --shadow-card:          0 4px 24px rgba(0,0,0,0.3);
    --shadow-dropdown:      0 8px 32px rgba(0,0,0,0.4);
    --shadow-modal:         0 24px 80px rgba(0,0,0,0.6);
    --shadow-light-card:    0 1px 3px rgba(0,0,0,0.08);
}

/* ---- LIGHT THEME ----
   The theme lives on <html data-theme> (index.html). This block used to sit inside an
   unclosed :root, which nested it as ":root [data-theme=light]" and matched nothing;
   merchant.css carried a copy to rescue it. Now it is a top-level rule. */
:root[data-theme="light"] {
    /* Backgrounds */
    --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;

    /* Borders */
    --color-border:         #E2E8F0;
    --color-border-strong:  #CBD5E1;
    --color-border-light:   #E2E8F0;

    /* Accent — Indigo */
    --color-accent:         #4F46E5;
    --color-accent-dim:     #EEF2FF;
    --color-accent-hover:   #4338CA;
    --color-accent2:        #DC2626;
    --color-accent2-dim:    #FEF2F2;

    /* Text */
    --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;

    /* Status */
    --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;

    /* DEV-106: darker brand tones for legibility on light backgrounds.
       criptoya/ce-side-default inherit the theme's muted/success tokens. */
    --provider-binance:     #B8860B;
    --provider-upbit:       #093687;
    --provider-coingecko:   #5B9E1F;

    /* Shadows */
    --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);
}

/* geometry, type, layout and motion: the same in both themes */
:root {
    /* -- Radii -- */
    --radius-xs:    3px;
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    14px;
    --radius-xl:    18px;
    --radius-2xl:   24px;
    --radius-full:  9999px;

    /* -- Spacing -- */
    --space-1:      4px;
    --space-2:      8px;
    --space-3:      12px;
    --space-4:      16px;
    --space-5:      20px;
    --space-6:      24px;
    --space-8:      32px;
    --space-10:     40px;
    --space-12:     48px;

    /* The diverging chart's y-axis column width (PnlChart / DivergingChart), shared
       with anything under it that must line up with the plot's left edge. */
    --pnl-chart-gutter: 44px;

    /* -- Typography -- */
    /* Rupee Sign (U+20B9 only, see section 0) → DM Sans (Latin) → Inter (full Cyrillic support, same modern geometric feel) → system fallbacks */
    --font-family:  'Rupee Sign', 'DM Sans', 'Inter', 'Noto Sans Devanagari', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-cyr: 'Inter', 'DM Sans', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-xs:      11px;
    --font-sm:      12px;
    --font-base:    13px;
    --font-md:      14px;
    --font-lg:      16px;
    --font-xl:      20px;
    --font-2xl:     28px;
    --font-3xl:     36px;
    --font-4xl:     48px;

    /* -- Layout -- */
    --topbar-h:     56px;

    /* -- Transitions -- */
    --transition:   150ms ease;
    --transition-md: 200ms ease;
    --transition-spring: 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 2. BASE RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: var(--font-family);
    font-size: var(--font-base);
    font-weight: 500;
    background-color: #111315;
    background-image:
        radial-gradient(ellipse 80% 60% at 15% 5%, rgba(45, 50, 56, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 85% 0%, rgba(143, 255, 0, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse 100% 80% at 50% 20%, rgba(35, 39, 44, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 120% 120% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.3) 100%);
    background-attachment: fixed;
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Noise texture overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Content above noise */
#app { position: relative; z-index: 1; }

/* ============================================================
   LIGHT THEME — INDIGO ACCENT (#4F46E5)
   ============================================================ */
[data-theme="light"] body,
html[data-theme="light"] body {
    background-color: #F8FAFC;
    background-image: none;
    color: #0F172A;
}
[data-theme="light"] body::after { display: none; }
[data-theme="light"] select, [data-theme="light"] select option { background: #FFFFFF; color: #0F172A; }

/* -- Topbar -- */
[data-theme="light"] .topbar { background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid #E2E8F0; }
[data-theme="light"] .topbar__pill { background: #F1F5F9; border-color: #E2E8F0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.03); }
[data-theme="light"] .nav-item { color: #64748B; }
[data-theme="light"] .nav-item:hover { color: #0F172A; background: #F1F5F9; }
[data-theme="light"] .nav-item.active { background: #4F46E5; color: #FFFFFF; }
[data-theme="light"] .topbar__icon-btn { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .topbar__icon-btn:hover { background: #E2E8F0; color: #0F172A; }
[data-theme="light"] .topbar__icon-btn--active { background: #4F46E5 !important; color: #FFFFFF !important; }
[data-theme="light"] .topbar__logo svg circle, [data-theme="light"] .topbar__logo svg ellipse { stroke: #0F172A; }
[data-theme="light"] .topbar__logo svg circle:last-child { fill: #4F46E5; stroke: none; }
[data-theme="light"] .topbar__title { background: linear-gradient(90deg, #0F172A 0%, #0F172A 40%, #4F46E5 60%, #0F172A 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .topbar__theme-toggle { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .topbar__theme-toggle:hover { background: #E2E8F0; color: #4F46E5; }

/* -- Profile balance card -- */
[data-theme="light"] .trf-title { color: #0F172A; }
[data-theme="light"] .trf-hint { color: #94A3B8; }
[data-theme="light"] .rates-title { color: #0F172A; }
[data-theme="light"] .rates-time { color: #94A3B8; background: #F1F5F9; }
/* -- Toolbar -- */
[data-theme="light"] .pg-search { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .pg-search input { color: #0F172A; }
[data-theme="light"] .pg-search input::placeholder { color: #94A3B8; }
[data-theme="light"] .pg-search i { color: #94A3B8; }
[data-theme="light"] .pg-search:focus-within { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
/* -- Table -- */
[data-theme="light"] .pg-table-wrap { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-card); }
[data-theme="light"] .pg-table thead th { color: #64748B; border-color: #F1F5F9; }
[data-theme="light"] .pg-table tbody tr { border-color: #F1F5F9; }
[data-theme="light"] .pg-table tbody tr:hover { background: #F8FAFC; }
[data-theme="light"] .pg-table tbody td { color: #0F172A; }
/* -- Pagination -- */
[data-theme="light"] .pg-pagination-info { color: #94A3B8; }
[data-theme="light"] .pg-page-btn { border-color: #E2E8F0; color: #64748B; }
[data-theme="light"] .pg-page-btn:hover:not(:disabled) { background: #F1F5F9; color: #0F172A; }
[data-theme="light"] .pg-page-current { background: #4F46E5; color: #FFFFFF; }

/* -- Tabs -- */
[data-theme="light"] .act-tab { color: #64748B; }
[data-theme="light"] .act-tab:hover { color: #0F172A; background: #E2E8F0; }
/* -- Buttons -- */
[data-theme="light"] .bal-btn-primary { background: #4F46E5; color: #FFFFFF; }
[data-theme="light"] .bal-btn-primary:hover { background: #4338CA; box-shadow: 0 4px 12px rgba(79,70,229,0.2); }
[data-theme="light"] .bal-btn-outline { background: #FFFFFF; border-color: #E2E8F0; color: #0F172A; }
[data-theme="light"] .bal-btn-outline:hover { background: #F8FAFC; border-color: #4F46E5; color: #4F46E5; }
/* -- Badges -- */
[data-theme="light"] .badge-success { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
[data-theme="light"] .badge-warning { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
[data-theme="light"] .badge-danger { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
[data-theme="light"] .badge-info { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
[data-theme="light"] .badge-muted { background: #F1F5F9; color: #64748B; border-color: #E2E8F0; }
[data-theme="light"] .badge-admin { background: #EEF2FF; color: #4F46E5; border-color: #C7D2FE; }
[data-theme="light"] .badge-trader { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }

/* -- Modals / Popups -- */
[data-theme="light"] .modal-backdrop { background: rgba(15,23,42,0.3); }
[data-theme="light"] .glass-modal { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-modal); }
[data-theme="light"] .gm-title { color: #0F172A; }
[data-theme="light"] .gm-body { color: #0F172A; }
[data-theme="light"] .pop { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-dropdown); }
[data-theme="light"] .pop__item { color: #64748B; }
[data-theme="light"] .pop__item:hover { background: #F8FAFC; color: #0F172A; }
[data-theme="light"] .pop__hr { background: #F1F5F9; }
[data-theme="light"] .pop__uname { color: #0F172A; }
[data-theme="light"] .pop__urole { color: #94A3B8; }
[data-theme="light"] .notif-pop { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-dropdown); }
[data-theme="light"] .notif-pop-title { color: #0F172A; }
[data-theme="light"] .notif-pop-mark { color: #4F46E5; }
[data-theme="light"] .notif-pop-empty { color: #CBD5E1; }

/* -- Forms -- */
[data-theme="light"] .form-input, [data-theme="light"] .form-textarea {
    background: #FFFFFF; border-color: #E2E8F0; color: #0F172A;
}
[data-theme="light"] .form-input:focus, [data-theme="light"] .form-textarea:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
[data-theme="light"] .form-label { color: #64748B; }
[data-theme="light"] .form-input::placeholder, [data-theme="light"] .form-textarea::placeholder { color: #94A3B8; }

/* -- Geo dropdown -- */
[data-theme="light"] .pro-geo-btn { background: #F1F5F9; border-color: #E2E8F0; color: #0F172A; }
[data-theme="light"] .pro-geo-btn:hover { background: #E2E8F0; }
[data-theme="light"] .pro-geo-btn i:first-child { color: #4F46E5; }
[data-theme="light"] .pro-geo-chevron { color: #94A3B8; }
[data-theme="light"] .pro-geo-menu { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-dropdown); }
[data-theme="light"] .pro-geo-search { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .pro-geo-search-input { background: #F8FAFC; border-color: #E2E8F0; color: #0F172A; }
[data-theme="light"] .pro-geo-option { color: #64748B; }
[data-theme="light"] .pro-geo-option:hover,
[data-theme="light"] .pro-geo-option--hl { background: #F8FAFC; color: #0F172A; }
[data-theme="light"] .pro-geo-option-active { color: #4F46E5; }

/* -- Spinner -- */
[data-theme="light"] .spinner::before { border-color: #E2E8F0; }
[data-theme="light"] .spinner::after { border-top-color: #4F46E5; }

/* -- Scrollbar -- */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #CBD5E1; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ---- LIGHT THEME: Settings page inline-style overrides ---- */
/* The SettingsPage.razor uses many inline styles with #fff and rgba(255,255,255,...)
   which render invisible on white light-theme bg. Override them using attribute selectors. */
[data-theme="light"] .pro [style*="color:#fff"],
[data-theme="light"] .pro [style*="color: #fff"] {
    color: #0F172A !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.45)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.45)"] {
    color: #64748B !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.35)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.35)"] {
    color: #94A3B8 !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.5)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.5)"] {
    color: #64748B !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.6)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.6)"] {
    color: #475569 !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.7)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.7)"] {
    color: #334155 !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.85)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.85)"] {
    color: #1E293B !important;
}
/* Sections with hardcoded dark backgrounds */
[data-theme="light"] .pro [style*="rgba(255,255,255,0.03)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.03)"] {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.06)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.06)"] {
    border-color: #E2E8F0 !important;
}

/* Nav item focus shouldn't steal active state */
.nav-item.active:focus,
.nav-item.active:hover { background: var(--color-accent); color: var(--color-text-on-accent); }
[data-theme="light"] .nav-item.active:focus,
[data-theme="light"] .nav-item.active:hover {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
}

/* ---- LIGHT THEME: additional fixes ---- */

/* Background with subtle texture + gradient */
[data-theme="light"] body {
    background-color: #F8FAFC !important;
    background-image:
        radial-gradient(ellipse 80% 60% at 15% 5%, rgba(79, 70, 229, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 10%, rgba(99, 102, 241, 0.035) 0%, transparent 55%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(168, 85, 247, 0.025) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234F46E5' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-attachment: fixed !important;
}

/* Header: remove bg and border-bottom */
[data-theme="light"] .topbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
}

/* Logo text — fully indigo, no gradient shimmer issue */
[data-theme="light"] .topbar__title {
    background: none;
    -webkit-text-fill-color: #4F46E5;
    color: #4F46E5;
}

/* Logo SVG — remove green dot, use accent */
[data-theme="light"] .topbar__logo svg circle[fill="#8FFF00"] { fill: #4F46E5 !important; }
[data-theme="light"] .topbar__logo svg circle[stroke="#8FFF00"] { stroke: #4F46E5 !important; }

/* Nav hover — no green shadows */
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-item:focus { background: #EEF2FF; color: #4338CA; }
[data-theme="light"] .nav-item.active,
[data-theme="light"] .nav-item.active:hover,
[data-theme="light"] .nav-item.active:focus {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
}
[data-theme="light"] .nav-item.active i { color: #FFFFFF !important; }
[data-theme="light"] .nav-item i { color: inherit; }

/* Icon buttons hover — no green */
[data-theme="light"] .topbar__icon-btn:hover { background: #EEF2FF; color: #4338CA; box-shadow: none; }
[data-theme="light"] .topbar__theme-toggle:hover { background: #EEF2FF; color: #4338CA; }

/* Active icon-btn (settings/docs current page) */
[data-theme="light"] .topbar__icon-btn--active i { color: #FFFFFF !important; }

/* Geo dropdown checkmark — indigo not green */
[data-theme="light"] .pro-geo-option-active { color: #4F46E5; }
[data-theme="light"] .pro-geo-option-active i { color: #4F46E5 !important; }

/* Green success amounts in tables */
[data-theme="light"] td[style*="color:var(--color-accent)"],
[data-theme="light"] td[style*="color: var(--color-accent)"] { color: #4F46E5 !important; }

/* Success/warning/error vivid badges */
[data-theme="light"] .badge-success {
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
    color: #166534; border-color: #86EFAC;
}
[data-theme="light"] .badge-warning {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E; border-color: #FCD34D;
}
[data-theme="light"] .badge-danger {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #991B1B; border-color: #FCA5A5;
}
[data-theme="light"] .badge-info {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #1E40AF; border-color: #93C5FD;
}
[data-theme="light"] .badge-admin {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    color: #3730A3; border-color: #C7D2FE;
}
[data-theme="light"] .badge-trader {
    background: linear-gradient(135deg, #CFFAFE 0%, #A5F3FC 100%);
    color: #155E75; border-color: #67E8F9;
}
[data-theme="light"] .badge-support {
    background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%);
    color: #9D174D; border-color: #F9A8D4;
}
[data-theme="light"] .badge-muted {
    background: #F1F5F9; color: #475569; border-color: #CBD5E1;
}

/* Custom file input (hide) */
[data-theme="light"] ::-webkit-file-upload-button { display: none; }

/* ---- LIGHT THEME: hardcoded dark/green overrides ---- */

/* Modal sections (card-detail-grid, detail-section) — inline dark bg override */
[data-theme="light"] .detail-section,
[data-theme="light"] [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] .card-detail-grid > div { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .detail-section-title { color: #64748B !important; }
[data-theme="light"] .detail-row { border-color: #F1F5F9 !important; color: #0F172A; }
[data-theme="light"] .detail-label { color: #64748B !important; }

/* Ticket/dispute messages */
[data-theme="light"] .ticket-msg { border-color: #E2E8F0; background: #F8FAFC; }
[data-theme="light"] .ticket-msg-admin { background: #EEF2FF; border-color: #C7D2FE; }
[data-theme="light"] .ticket-msg-user { background: #F8FAFC; }
[data-theme="light"] .ticket-msg-header { color: #0F172A; }
[data-theme="light"] .ticket-msg-name { color: #0F172A; }
[data-theme="light"] .ticket-msg-body { color: #334155; }
[data-theme="light"] .ticket-msg-attachment { color: #4F46E5; }
/* Reply form */
[data-theme="light"] .ticket-reply textarea { background: #FFFFFF; border-color: #E2E8F0; color: #0F172A; }

/* Logo glow (remove green, use indigo) */
[data-theme="light"] .topbar__brand:hover .topbar__logo { filter: drop-shadow(0 0 8px rgba(79,70,229,0.3)); }

/* Badge admin/primary */
[data-theme="light"] .badge-admin { background: #EEF2FF; color: #4F46E5; border-color: #C7D2FE; }
/* Merchant key cell */
[data-theme="light"] .merchant-key-cell { color: #4F46E5; }

/* Drawer */
[data-theme="light"] .drawer { background: #FFFFFF; border-left-color: #E2E8F0; }
[data-theme="light"] .drawer-title { color: #0F172A; }
/* Confirm modal */
[data-theme="light"] .confirm-title { color: #0F172A; }
[data-theme="light"] .confirm-desc { color: #64748B; }

/* TopUp / Withdrawal modals */
[data-theme="light"] .tu-addr { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .tu-addr code { color: #0F172A; }
[data-theme="light"] .tu-icon-btn { background: #F1F5F9; color: #475569; }
[data-theme="light"] .tu-qr { box-shadow: 0 0 0 2px #8FFF00, 0 8px 28px rgba(15, 23, 42, 0.10); }
[data-theme="light"] .tu-amount-val { color: #0F172A; }
[data-theme="light"] .tu-amount-val small { color: #64748B; }
[data-theme="light"] .tu-amount-tail { color: #4F46E5; background: #EEF2FF; }
[data-theme="light"] .tu-amount-cap { color: #D97706; }
[data-theme="light"] .tu-copy-amount { border-color: #4F46E5; background: #EEF2FF; color: #0F172A; }
[data-theme="light"] .tu-copy-amount i { color: #4F46E5; }
[data-theme="light"] .tu-copy-amount:hover { background: #4F46E5; color: #FFFFFF; }
[data-theme="light"] .tu-copy-amount:hover i { color: #FFFFFF; }
[data-theme="light"] .tu-copy-amount.is-done,
[data-theme="light"] .tu-copy-amount.is-done:hover { border-color: #16A34A; background: #F0FDF4; color: #16A34A; }
[data-theme="light"] .tu-copy-amount.is-done i { color: #16A34A; }
[data-theme="light"] .tu-warn { background: #FFFBEB; border-color: #FDE68A; color: #475569; }
[data-theme="light"] .tu-warn i,
[data-theme="light"] .tu-tail-hint i { color: #D97706; }
[data-theme="light"] .tu-warn strong { color: #0F172A; }
[data-theme="light"] .tu-tail-hint { color: #475569; }
/* Alert success */
[data-theme="light"] .alert-success { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
/* Priority selector */
/* Wallet cell */
[data-theme="light"] .wallet-cell { color: #64748B; }

/* Deposit progress bar on dark cards */
[data-theme="light"] .deposit-bar { background: #4F46E5; }

/* Refresh dot */
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
input, button, select, textarea { font-family: var(--font-family); font-weight: 500; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
select, select option {
    background: #1A1D22;
    color: rgba(255,255,255,0.88);
    color-scheme: dark;
}
select option {
    padding: 10px 14px;
    background: #1A1D22;
    color: rgba(255,255,255,0.88);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
}
select option:checked {
    background: #8FFF00 !important;
    color: #0A0A0A !important;
    font-weight: 600;
}
select option:hover,
select option:focus {
    background: #2A2E35 !important;
    color: #FFFFFF !important;
}
select:focus {
    outline: none;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(143, 255, 0, 0.15) !important;
}
[data-theme="light"] select,
[data-theme="light"] select option {
    background: #FFFFFF;
    color: #0F172A;
    color-scheme: light;
}
[data-theme="light"] select option:checked {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
}
[data-theme="light"] select option:hover,
[data-theme="light"] select option:focus {
    background: #EEF2FF !important;
    color: #1E293B !important;
}
[data-theme="light"] select:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* ---- 3. BLAZOR LOADING ---- */
.app-loading {
    position: fixed; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--color-bg-base); gap: var(--space-4);
}

/* Blazor writes --blazor-load-percentage on <html> in steps. Registered as a <percentage>, it can transition, so the
   ring glides between steps instead of jumping. */
@property --blazor-load-percentage {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}
html { transition: --blazor-load-percentage 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

.atlas-loader { display: block; overflow: visible; color: var(--color-text-primary); }
.atlas-loader .al-track { stroke: var(--color-border); stroke-width: 1.6; }
.atlas-loader .al-progress {
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
    /* % in an SVG dash = % of the viewBox's normalised diagonal (64 units): the r=29 circle is 284.7% long */
    stroke-dasharray: calc(var(--blazor-load-percentage, 0%) * 2.847) 999;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-accent) 55%, transparent));
}
.atlas-loader .al-orbit { transform-box: view-box; transform-origin: 32px 32px; }
.atlas-loader .al-orbit ellipse { stroke: currentColor; stroke-width: 1.3; opacity: 0.4; }
.atlas-loader .al-orbit--a { animation: al-spin 7s linear infinite; }
.atlas-loader .al-orbit--b { animation: al-spin 11s linear infinite reverse; }
.atlas-loader .al-orbit--b ellipse { opacity: 0.24; }
.atlas-loader .al-globe { stroke: currentColor; stroke-width: 2.2; opacity: 0.92; }
.atlas-loader .al-meridian { stroke: currentColor; stroke-width: 1.3; opacity: 0.45; }
.atlas-loader .al-core {
    fill: var(--color-accent);
    transform-box: fill-box; transform-origin: center;
    animation: al-breathe 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px var(--color-accent));
}
@keyframes al-spin { to { transform: rotate(360deg); } }
@keyframes al-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.72); opacity: 0.7; } }
.app-loading { animation: al-in 0.5s ease-out both; }
@keyframes al-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
    .atlas-loader .al-orbit, .atlas-loader .al-core, .app-loading { animation: none; }
    html { transition: none; }
}

.loading-progress-text {
    font-family: 'ATLAS JetBrains Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary); min-height: 1em;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, ""); }

/* Page loading (DsPageGate, DS.md "Page loading"): a new page renders hidden in the content area while the boot
   loader's mark turns in the middle of it; the top bar stays live. Not under .ds: the first page after sign-in
   renders before the role (and with it the .ds class) is known. The mark fades in late, so a page that is ready
   at once only blinks blank; the page fades in on opacity alone (no transform: a fixed sheet inside the page
   keeps its containing block), and the class goes once the fade is done. */
.main.is-gated { position: relative; overflow: hidden; visibility: hidden; }
.main.is-gated > .page-gate { visibility: visible; }
.page-gate {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3, 12px);
    pointer-events: none;
    animation: page-gate-in 0.2s ease-out 0.15s both;
}
.page-gate__mark { width: 56px; height: 56px; }
/* the boot ring ends full: the page loader starts where the boot loader stopped */
.page-gate__mark .al-progress { stroke-dasharray: none; }
.page-gate__slow {
    margin: 0; font-size: 13px; line-height: 1.4;
    color: var(--color-text-secondary);
    animation: page-gate-in 0.3s ease-out both;
}
.page-gate__sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.main.is-revealing { animation: page-gate-reveal 0.15s ease-out both; }
@keyframes page-gate-in { from { opacity: 0; } }
@keyframes page-gate-reveal { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .page-gate, .page-gate__slow, .main.is-revealing { animation: none; }
}

/* ---- 4. BLAZOR ERROR ---- */
#blazor-error-ui {
    background: var(--color-danger); color: white; bottom: 0; left: 0;
    width: 100%; padding: var(--space-3) var(--space-6); position: fixed;
    z-index: 9999; display: none; align-items: center;
    justify-content: space-between; font-size: var(--font-sm);
}
#blazor-error-ui .reload { color: white; font-weight: 700; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; font-size: var(--font-lg); opacity: 0.8; }
.blazor-error-boundary { padding: var(--space-4); background: var(--color-danger-dim); color: var(--color-danger); border-radius: var(--radius-md); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ============================================================
   5. LAYOUT — TOP NAVIGATION
   ============================================================ */
.app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ========== TOPBAR ========== */
/* ========== TOPBAR ========== */
.topbar {
    height: 64px;
    flex-shrink: 0;
    background: transparent;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    margin-top: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar__left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar__brand {
    display: flex; align-items: center; gap: 16px;
    text-decoration: none; color: inherit;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.topbar__brand:hover { text-decoration: none; }

/* -- Logo wrap with glow -- */
.topbar__logo {
    width: 56px; height: 56px;
    position: relative; z-index: 1;
    color: #FFFFFF;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
[data-theme="light"] .topbar__logo { color: #4F46E5; }
/* Hover: spin globe + green glow */
.topbar__brand:hover .topbar__logo {
    transform: rotate(360deg);
    filter: drop-shadow(0 0 8px rgba(143, 255, 0, 0.4));
}
.topbar__brand:hover .topbar__title {
    background-position: 100% 0;
}

.topbar__title {
    font-size: 26px; font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #8FFF00 60%, #ffffff 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background-position 0.6s ease;
}

/* ========== WHITE PILL CONTAINER ========== */
.topbar__pill {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    padding: 5px;
    box-shadow: none;
    /* overflow visible so grouped-nav hover dropdowns (DEV-45/46) are not clipped.
       The admin nav is grouped into ~6 top-level items, so it fits without
       horizontal scroll; narrow screens fall back to icon-only + the mobile drawer. */
    overflow: visible;
}

.nav-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius-full); cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px; font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none; border: none; background: transparent;
    white-space: nowrap; flex-shrink: 0;
}
.nav-item:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}
.nav-item.active {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: 600;
}
.nav-item.active:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-on-accent);
}

/* Icons: only visible on active item */
.nav-item i { display: none; }
.nav-item.active i {
    display: inline-block;
    font-size: 14px;
    color: var(--color-text-on-accent);
}
/* A count on the active lime pill: the faint yellow tint vanished into the lime. On dark the
   count sits on the pill's own ink and keeps its yellow; the light theme's indigo pill is fine.
   !important beats the mobile drawer's "every span in the active item takes the ink" rule. */
:root:not([data-theme="light"]) .nav-item.active .badge-warning {
    background: var(--color-text-on-accent);
    border-color: var(--color-text-on-accent);
    color: var(--color-warning) !important;
}
:root:not([data-theme="light"]) .nav-item.active .pc-nav-dot {
    box-shadow: 0 0 0 2px var(--color-text-on-accent);
}

/* ========== TOP RIGHT ========== */
/* Grouped top-nav with hover dropdown (DEV-45 / DEV-46) */
.nav-group { position: relative; display: inline-flex; }
.nav-group__trigger { background: transparent; border: none; font: inherit; cursor: pointer; }
/* Active group (a sub-page of this group is open) — same accent pill as a
   direct active nav item so the user can see which top-level category they're
   in without hovering. Higher specificity than the transparent reset above. */
.nav-group__trigger.active {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: 600;
}
.nav-group__trigger.active i,
.nav-group__trigger.active span { color: var(--color-text-on-accent); }
.nav-group__trigger.active .nav-group__chev { opacity: 0.8; }
.nav-group__chev { font-size: 9px; opacity: 0.5; margin-left: 1px; transition: transform 0.18s ease; }
.nav-group:hover .nav-group__chev,
.nav-group:focus-within .nav-group__chev { transform: rotate(180deg); }

.nav-group__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
/* invisible hover bridge so the cursor can cross the gap into the menu */
.nav-group__menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-group:hover .nav-group__menu,
.nav-group:focus-within .nav-group__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-group__item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 9px var(--space-3); border-radius: var(--radius-md);
    color: var(--color-text-muted); text-decoration: none;
    font-size: 13px; font-weight: 500; white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
}
.nav-group__item i { width: 16px; text-align: center; font-size: 13px; opacity: 0.9; }
.nav-group__item:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.nav-group__item.active { background: var(--color-accent); color: var(--color-text-on-accent); }
.nav-group__item.active i { color: var(--color-text-on-accent); opacity: 1; }

/* Mobile drawer renders groups expanded (hover dropdowns can't open on touch) */
.mobile-nav__body .nav-group { display: block; width: 100%; }
.mobile-nav__body .nav-group__trigger { width: 100%; }
.mobile-nav__body .nav-group__chev { display: none; }
.mobile-nav__body .nav-group__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 2px 0 var(--space-2) var(--space-4);
    background: none; border: none; box-shadow: none;
}

/* Inline copyable identifier (CopyableId) — operator convenience (DEV-62) */
.copy-id {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    font-family: inherit; font-size: inherit; color: inherit; line-height: inherit;
}
.copy-id__icon {
    font-size: 11px; color: var(--color-text-muted);
    opacity: 0; transition: opacity 0.12s ease, color 0.12s ease;
}
.copy-id:hover .copy-id__icon { opacity: 0.75; }
.copy-id:hover .copy-id__text { text-decoration: underline; text-underline-offset: 2px; }
.copy-id.is-copied .copy-id__icon { opacity: 1; color: #10B981; }

.topbar__right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.topbar__icon-btn {
    width: 40px; height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
}
.topbar__bell-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #EF4444;
    border: 2px solid var(--color-bg-base, #0a0a0a);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: bellDotPulse 2s infinite;
}
@keyframes bellDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
[data-theme="light"] .topbar__bell-dot { border-color: #FFFFFF; }

/* Header action counters (active payins / pool payouts) */
.topbar__counter {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border-radius: 16px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.topbar__counter:hover { transform: translateY(-1px); text-decoration: none; }
.topbar__counter--warn {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.3);
}
.topbar__counter--warn:hover { background: rgba(245, 158, 11, 0.25); color: #FBBF24; }
.topbar__counter--info {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
    border-color: rgba(59, 130, 246, 0.3);
}
.topbar__counter--info:hover { background: rgba(59, 130, 246, 0.25); color: #60A5FA; }
.topbar__counter--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.topbar__counter--danger:hover { background: rgba(239, 68, 68, 0.25); color: #F87171; }

/* Notification dropdown items */
.notif-item {
    display: flex; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
    cursor: default;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255, 255, 255, 0.03); }
.notif-item--unread { background: rgba(143, 255, 0, 0.04); }
.notif-item--unread:hover { background: rgba(143, 255, 0, 0.06); }
.notif-item-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}
.notif-item--critical .notif-item-icon { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.notif-item--high .notif-item-icon { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; overflow-wrap: anywhere; }
.notif-item-msg { font-size: 12px; color: rgba(255, 255, 255, 0.6); line-height: 1.4; overflow-wrap: anywhere; }
.notif-item-time { font-size: 11px; color: rgba(255, 255, 255, 0.35); margin-top: 4px; }
[data-theme="light"] .notif-item { border-bottom: 1px solid #E2E8F0; }
[data-theme="light"] .notif-item:last-child { border-bottom: none; }
[data-theme="light"] .notif-item:hover { background: #F8FAFC; }
[data-theme="light"] .notif-item--unread { background: #EEF2FF; }
[data-theme="light"] .notif-item--unread:hover { background: #E0E7FF; }
[data-theme="light"] .notif-item-icon { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .notif-item-title { color: #0F172A; }
[data-theme="light"] .notif-item-msg { color: #475569; }
[data-theme="light"] .notif-item-time { color: #94A3B8; }

/* Toast stack — appears below header on the right */
.notif-toast-stack {
    position: fixed;
    top: 80px; right: 24px;
    z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
    width: 360px; max-width: calc(100vw - 48px);
    pointer-events: none;
}
.notif-toast {
    pointer-events: auto;
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(20, 20, 24, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #8FFF00;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    animation: toastSlideIn 0.3s ease;
}
.notif-toast--high { border-left-color: #F59E0B; }
.notif-toast--critical { border-left-color: #EF4444; }
.notif-toast-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(143, 255, 0, 0.15);
    color: #8FFF00;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.notif-toast--high .notif-toast-icon { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.notif-toast--critical .notif-toast-icon { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.notif-toast-body { flex: 1; min-width: 0; }
.notif-toast-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.notif-toast-msg { font-size: 12px; color: rgba(255, 255, 255, 0.65); line-height: 1.4; }
.notif-toast-close {
    background: none; border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer; padding: 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    border-radius: 4px;
    flex-shrink: 0;
}
.notif-toast-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
@keyframes toastSlideIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
[data-theme="light"] .notif-toast {
    background: rgba(255, 255, 255, 0.98);
    border-color: #E2E8F0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .notif-toast-title { color: #0F172A; }
[data-theme="light"] .notif-toast-msg { color: #475569; }
[data-theme="light"] .notif-toast-close { color: #64748B; }
[data-theme="light"] .notif-toast-close:hover { color: #0F172A; background: #F1F5F9; }
.topbar__icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}
.topbar__icon-btn--active {
    background: var(--color-accent) !important;
    color: var(--color-text-on-accent) !important;
}
.topbar__icon-btn--active:hover {
    background: var(--color-accent-hover) !important;
}

/* -- Notifications popup -- */
.notif-pop {
    position: absolute;
    top: calc(100% + 8px); right: 80px;
    width: 340px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-dropdown);
    z-index: 100;
    overflow: hidden;
    animation: pop-in 160ms cubic-bezier(.16,1,.3,1);
}
.notif-pop-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.notif-pop-title {
    font-size: 15px; font-weight: 700; color: #fff;
}
.notif-pop-mark {
    background: none; border: none;
    font-size: 12px; font-weight: 500;
    color: var(--color-accent); cursor: pointer;
    font-family: var(--font-family);
}
.notif-pop-mark:hover { text-decoration: underline; }
.notif-pop-body {
    padding: 20px;
}
.notif-pop-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 20px 0;
    color: rgba(255,255,255,0.25);
}
.notif-pop-empty i { font-size: 28px; }
.notif-pop-empty span { font-size: 13px; }

/* Theme toggle */
.topbar__theme-toggle {
    width: 36px; height: 36px;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 15px;
    transition: all 0.3s ease;
}
.topbar__theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FBBF24;
    transform: rotate(20deg);
}
[data-theme="light"] .topbar__theme-toggle {
    background: rgba(0,0,0,0.04);
    color: #5A5F66;
}
[data-theme="light"] .topbar__theme-toggle:hover {
    background: rgba(0,0,0,0.08);
    color: #6366F1;
    transform: rotate(-20deg);
}

.topbar__user {
    cursor: pointer;
    display: flex; align-items: center;
    border-radius: var(--radius-full);
    transition: opacity 0.2s ease;
}
.topbar__user:hover { opacity: 0.85; }

/* ========== ACCOUNT POPUP ========== */
.pop__backdrop { position: fixed; inset: 0; z-index: 99; }

.pop {
    position: absolute;
    top: calc(100% + var(--space-2)); right: 0;
    width: 220px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100; padding: var(--space-2);
    animation: pop-in 160ms cubic-bezier(.16,1,.3,1);
}
@keyframes pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pop__head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2);
}
.pop__uinfo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pop__uname {
    font-size: var(--font-sm); font-weight: 700;
    color: var(--color-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.pop__urole {
    font-size: 10px; font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4;
}

.pop__hr {
    border: none; height: 1px;
    background: var(--color-border); margin: var(--space-1) 0;
}

.pop__item {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; padding: 8px var(--space-3);
    border: none; border-radius: var(--radius-md);
    background: transparent; font-family: var(--font-family);
    font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-secondary); cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.pop__item:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.pop__item i { width: 16px; text-align: center; font-size: 13px; opacity: 0.65; }
.pop__item:hover i { opacity: 1; }

.pop__item--danger { color: var(--color-danger); }
.pop__item--danger:hover { background: var(--color-danger-dim); color: var(--color-danger); }
.pop__item--danger i { opacity: 1; }

/* ========== MAIN ========== */
.main {
    flex: 1; overflow-y: auto;
    padding: var(--space-8); min-width: 0;
}

/* Legacy sidebar classes — no-op for backward compat */
.sb { display: none; }

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2); padding: 0 var(--space-5);
    height: 36px; border-radius: var(--radius-full);
    font-family: var(--font-family); font-size: var(--font-sm); font-weight: 700;
    cursor: pointer; border: none;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    white-space: nowrap; letter-spacing: 0.1px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn-ghost {
    background: transparent; color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--color-bg-hover); color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.btn-sm { height: 30px; padding: 0 var(--space-3); font-size: var(--font-xs); }
.btn-xs { padding: 4px 10px; font-size: var(--font-xs); border-radius: var(--radius-full); }

.btn-icon {
    width: 32px; height: 32px; padding: 0;
    border-radius: var(--radius-full);
    background: transparent; color: var(--color-text-secondary); border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
    transition: background var(--transition), color var(--transition);
}
.btn-icon:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-text-primary); }

/* ============================================================
   7. FORMS
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-group:last-child { margin-bottom: 0; }

.form-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--color-text-muted);
}
.form-label .req { color: var(--color-danger); font-weight: 800; }

.form-input, .form-textarea {
    background: var(--color-bg-overlay);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4); height: 40px;
    font-family: var(--font-family); font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}

.form-textarea { height: auto; padding: var(--space-3); resize: none; min-height: 80px; max-height: 160px; overflow-y: auto; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); font-weight: 500; }

.form-input:focus, .form-textarea:focus {
    outline: none;
    /* One edge, not two. A full-accent 1px border sitting against a 3px accent
       ring read as a doubled outline; the border now blends TOWARD the accent so
       focus is a single soft edge. Browsers without color-mix keep the base
       border and the ring, which is still a clear focus state. */
    border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-border));
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}

.form-input.error { border-color: var(--color-danger); }
.form-input.error:focus { box-shadow: 0 0 0 3px var(--color-danger-dim); }
.form-hint { font-size: var(--font-xs); color: var(--color-text-muted); }
.form-hint-error { color: var(--color-danger); }
/* ============================================================
   8. CARDS
   ============================================================ */
.card {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-dropdown);
}

.card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}

.card-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); }
.card-body { padding: var(--space-5); }

/* ============================================================
   9. PAGE HEADER
   ============================================================ */
.page-title { font-size: var(--font-2xl); font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.5px; }
/* ============================================================
   10. BADGES
   ============================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase; border: 1px solid transparent;
}
.badge-sm { font-size: 10px; padding: 2px 8px; }
/* hosted checkout: second badge in the same cell */

.badge-admin    { background: rgba(248,113,113,0.10); color: #FCA5A5; border-color: rgba(248,113,113,0.22); }
.badge-trader   { background: rgba(96,165,250,0.08); color: #93B8F8; border-color: rgba(96,165,250,0.15); }
.badge-support  { background: rgba(251,191,36,0.10); color: #FCD34D; border-color: rgba(251,191,36,0.22); }
.badge-merchant { background: rgba(52,211,153,0.10); color: #6EE7B7; border-color: rgba(52,211,153,0.22); }
.badge-success { background: rgba(52,211,153,0.08); color: #6EE7B7; border-color: rgba(52,211,153,0.18); }
.badge-warning { background: rgba(251,191,36,0.08); color: #FCD34D; border-color: rgba(251,191,36,0.18); }
.badge-danger  { background: rgba(248,113,113,0.08); color: #FCA5A5; border-color: rgba(248,113,113,0.18); }
.badge-info    { background: rgba(96,165,250,0.08); color: #93C5FD; border-color: rgba(96,165,250,0.18); }
.badge-muted   { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.08); }
.badge-neutral { background: rgba(148,163,184,0.1); color: #CBD5E1; border-color: rgba(148,163,184,0.2); }
/* Light theme */
[data-theme="light"] .badge-neutral { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
/* ============================================================
   13. TABLE (ticket system variant)
   ============================================================ */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}
.table thead {
    border-bottom: 1px solid #F3F4F6;
}
.table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-dark-sec);
    background: var(--color-bg-white-head);
    white-space: nowrap;
}
.table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid #F3F4F6;
    color: var(--color-text-dark);
    vertical-align: middle;
}
.table tbody tr:first-child td { border-top: none; }
/* ============================================================
   15. PAGINATION
   ============================================================ */
.pagination {
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-3) var(--space-5);
    gap: var(--space-2);
    margin-top: var(--space-5);
    font-size: var(--font-sm); color: var(--color-text-muted);
}

/* ============================================================
   16. MODAL
   ============================================================ */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    /* Must clear page chrome that carries its own stacking context, e.g. the
       trader toolbar/table-wrap lifted to z-index 20/1 in commit 7d7f9b0.
       Kept below the notification/toast layers (9000/9500) by design. */
    z-index: 8000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
    animation: fade-in var(--transition) ease;
}

.modal {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-2xl);
    width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-modal);
    animation: slide-up var(--transition-spring) cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-title { font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); }
.modal-body { padding: var(--space-5) var(--space-6); }
/* Create-user window (cu-*) */
.cu-note { margin-bottom: 0; }
.cu-key { width: 100%; box-sizing: border-box; margin-top: 6px; }
.cu-key code { flex: 1; font-size: 15px; letter-spacing: .6px; user-select: all; }
/* ============================================================
   17. DRAWER
   ============================================================ */
.drawer {
    position: fixed; top: 0; right: 0;
    height: 100vh; width: 420px;
    background: var(--color-bg-surface);
    border-left: none;
    box-shadow: var(--shadow-lg);
    z-index: 901;
    display: flex; flex-direction: column; overflow: hidden;
    animation: slide-in-right var(--transition-md) ease;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.drawer-title { font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }

/* -- New access key window (ak-*): AccessKeyModal, shared by every cabinet.
   Same quiet recipe as the top-up sheet: one big value, one line of guidance. -- */
.ak-modal { max-width: 440px; }
.ak-subject { margin-bottom: var(--space-4); font-size: var(--font-md); color: var(--color-text-secondary); }
.ak-subject strong { color: var(--color-text-primary); font-weight: 700; }
.ak-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ak-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: var(--space-3); }
.ak-points li > i { margin-top: 3px; font-size: 13px; text-align: center; color: var(--color-text-muted); }
.ak-points strong { display: block; font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); }
.ak-points span { display: block; margin-top: 2px; font-size: var(--font-sm); line-height: 1.5; color: var(--color-text-secondary); }
.ak-error { margin: var(--space-4) 0 0; }
.ak-body { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-top: var(--space-6); }
.ak-key {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding: 0; border: none; background: none; cursor: pointer; color: var(--color-text-primary);
}
.ak-key:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; border-radius: var(--radius-md); }
.ak-key code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 28px; font-weight: 700; letter-spacing: 2px; font-variant-numeric: tabular-nums;
    white-space: nowrap; user-select: all;
}
.ak-key:hover .tu-icon-btn { background: var(--color-accent); color: #fff; }
.ak-note { font-size: var(--font-sm); line-height: 1.5; text-align: center; max-width: 340px; color: var(--color-text-muted); }
.ak-note.is-warn { color: var(--color-warning); font-weight: 600; }
.ak-footer > button { flex: 1; justify-content: center; }
/* Settings card: what the button is for, then the button. */
@media (max-width: 480px) {
    .ak-key code { font-size: 22px; letter-spacing: 1px; }
    }

/* ============================================================
   20. ALERTS
   ============================================================ */
.alert {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-sm); font-weight: 600;
}
.alert i { flex-shrink: 0; margin-top: 1px; }
.alert-success { background: var(--color-success-dim); color: var(--color-success); border: 1px solid var(--color-success); }
.alert-danger   { background: var(--color-danger-dim);  color: var(--color-danger);   border: 1px solid var(--color-danger); }

/* -- Success Toast (centered popup, auto-dismiss) -- */
@keyframes successToastIn {
    from { opacity: 0; transform: translateY(-30px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes successToastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-20px) scale(0.95); }
}
/* -- Error Toast Popup -- */
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ============================================================
   DOCUMENTATION PAGE
   ============================================================ */
.docs {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    min-height: 60vh;
}

/* -- Content area -- */
.docs-body {
    padding: 32px;
}

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

/* CardDetail 3-column and 2-column grids */
.cd-hint { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 12px; }

/* ============================================================
   22. SETTINGS PAGE
   ============================================================ */
.telegram-step { display: flex; flex-direction: column; gap: var(--space-4); animation: slide-down 0.24s ease; }
/* ============================================================
   23. CONFIRM DIALOG
   ============================================================ */
.confirm-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); margin-bottom: var(--space-2); }
.confirm-desc { font-size: var(--font-sm); color: var(--color-text-secondary); line-height: 1.5; }

/* ============================================================
   24. SPINNER
   ============================================================ */
/* -- Atlas Spinner -- */
.spinner {
    display: inline-block; position: relative;
    width: 20px; height: 20px; flex-shrink: 0;
}
.spinner::before, .spinner::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
}
.spinner::before {
    border: 2px solid rgba(143, 255, 0, 0.15);
}
.spinner::after {
    border: 2px solid transparent;
    border-top-color: #8FFF00;
    animation: atlas-spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.spinner-sm { width: 14px; height: 14px; }
.spinner-lg {
    width: 44px; height: 44px;
}
.spinner-lg::before { border-width: 3px; }
.spinner-lg::after { border-width: 3px; }

/* Orbital ring effect for lg */
.spinner-lg::before {
    border: 3px solid rgba(143, 255, 0, 0.08);
    animation: atlas-pulse 2s ease-in-out infinite;
}

@keyframes atlas-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes atlas-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.15); opacity: 0.08; }
}

/* ============================================================
   25. EMPTY STATE
   ============================================================ */
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: var(--color-text-muted); gap: var(--space-3); text-align: center;
}
.empty-state i { font-size: 32px; opacity: 0.4; }
.empty-state-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-secondary); }
.empty-state-desc { font-size: var(--font-sm); }

/* ============================================================
   26. UTILITIES
   ============================================================ */
.text-muted     { color: var(--color-text-muted); }
.text-success   { color: var(--color-success); }
.text-danger    { color: var(--color-danger); }
/* DEV-106: rate-provider brand colors + CE side colors.
   provider-* recolor provider names everywhere they render (dropdowns,
   dashboard, rate-providers page). ce-side-default is the darker green for
   the "Default (bid)" side option (default is bid). */
.provider-binance  { color: var(--provider-binance); font-weight: 700; }
.provider-criptoya { color: var(--provider-criptoya); font-weight: 600; }
.provider-upbit    { color: var(--provider-upbit); font-weight: 700; }
.provider-coingecko{ color: var(--provider-coingecko); font-weight: 700; }
.ce-side-default   { color: var(--ce-side-default); }
.text-sm        { font-size: var(--font-sm); }
.text-xs        { font-size: var(--font-xs); }
.text-mono      { font-family: 'Courier New', monospace; }
.d-flex         { display: flex; }
.align-center   { align-items: center; }
.gap-1          { gap: var(--space-1); }
.gap-2          { gap: var(--space-2); }
.gap-3          { gap: var(--space-3); }
/* ============================================================
   27. ANIMATIONS
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.pulse { animation: pulse 1.5s ease-in-out infinite; }

/* ============================================================
   28. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* -- Topbar -- */
.topbar-name { font-size: var(--font-md); font-weight: 700; }
/* -- Traffic -- */
.traffic-body {
    display: flex; align-items: center; justify-content: space-between;
    position: relative; z-index: 1;
}
.traffic-hint { font-size: var(--font-xs); color: var(--color-text-muted); }

/* -- Toggle (shared) -- */
.toggle-switch {
    position: relative; display: inline-block;
    width: 44px; height: 24px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
/* -- Balance row -- */
.balance-usdt { border-color: var(--color-accent-dim); }
.bal-amount {
    display: flex; align-items: baseline; gap: var(--space-2);
    margin: var(--space-1) 0;
}
/* -- Deposit progress -- */
.deposit-bar {
    height: 100%; border-radius: var(--radius-full);
    background: var(--color-accent);
    transition: width 0.4s ease;
}
.bal-hint {
    font-size: var(--font-xs); margin-top: var(--space-1);
    display: flex; align-items: center; gap: 4px;
}

/* -- Rates -- */
.rates-title { font-size: var(--font-md); font-weight: 700; }
.rates-time {
    font-size: var(--font-xs); color: var(--color-text-muted);
    background: var(--color-bg-elevated); padding: 4px 10px;
    border-radius: var(--radius-full);
}
/* ============================================================
   32. GLASS MODALS
   ============================================================ */
.glass-modal {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-2xl);
    width: 100%; max-width: 440px;
    box-shadow: var(--shadow-modal);
    animation: slide-up var(--transition-spring) cubic-bezier(0.16, 1, 0.3, 1);
    /* overflow:hidden removed — it clipped absolutely-positioned children
       (StyledDropdown menus). Border-radius is maintained by the property
       itself and does not require overflow:hidden. */
}
.glass-modal-lg { max-width: 560px; }
.glass-modal-xl { max-width: 720px; }
/* Every glass modal fits the viewport: header and footer stay put, the body
   scrolls. Without this a tall form (the card creator on a 768px laptop) ran
   past the screen edge and its submit button was unreachable. Dropdown menus
   inside the body may extend past its visible area — the body then scrolls
   to them, and StyledDropdown measures room against this scroll box. */
.glass-modal { max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.glass-modal > .gm-header, .glass-modal > .gm-footer { flex: none; }
.glass-modal > .gm-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
@media (max-height: 700px) { .glass-modal { max-height: 100vh; border-radius: var(--radius-lg); } }

.gm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-5) 0;
}
.gm-title {
    font-size: var(--font-lg); font-weight: 700;
    display: flex; align-items: center; gap: var(--space-2);
}
.gm-body { padding: var(--space-5); }
.gm-footer {
    display: flex; justify-content: flex-end; gap: var(--space-3);
    padding: 0 var(--space-5) var(--space-5);
}
/* -- Modal fields -- */
.gm-label-row { display: flex; justify-content: space-between; align-items: center; }
.gm-max-link {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--color-accent);
}
.gm-max-link:hover { text-decoration: underline; }

/* -- TopUp step 2 -- */
/* -- Top-up (deposit) modal: one column, essentials only ------------------
   Amount (the exact figure the tail-matching needs) → copy amount → warning
   → QR → address → one note → Done. Traders kept sending the round figure,
   so the amount block is the loudest thing on the sheet: the tail after the
   point is tinted, "Copy amount" is a full-width button and one amber note
   names the round figure not to send. The address never wraps (full on
   desktop, middle-shortened on phones), the sheet docks to the bottom on
   phones. Both copy actions confirm in place. */
.tu-body {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-4); padding-top: var(--space-2);
}
.tu-amount {
    width: 100%; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.tu-amount-val {
    display: inline-flex; align-items: baseline; justify-content: center;
    flex-wrap: wrap; gap: 0 var(--space-2); max-width: 100%;
    font-size: 34px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15;
    font-variant-numeric: tabular-nums; color: var(--color-text-primary);
}
.tu-amount-num, .tu-amount-val small { white-space: nowrap; }
/* The tail is what PayTail matches on — tinted so it can't be read as cents
   that don't matter. */
.tu-amount-tail {
    color: var(--color-accent);
    background: var(--color-accent-dim);
    border-radius: var(--radius-sm); padding: 0 3px;
}
.tu-amount-val small {
    font-size: var(--font-md); font-weight: 700; letter-spacing: 0;
    color: var(--color-text-muted);
}
.tu-amount-cap {
    font-size: var(--font-md); font-weight: 700; color: var(--color-warning);
}
.tu-copy-amount {
    width: 100%; height: 44px; border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-accent); background: var(--color-accent-dim);
    color: var(--color-text-primary); font-size: var(--font-md); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    cursor: pointer; transition: all var(--transition);
}
.tu-copy-amount i { color: var(--color-accent); }
.tu-copy-amount:hover { background: var(--color-accent); color: var(--color-bg-base); }
.tu-copy-amount:hover i { color: inherit; }
.tu-copy-amount.is-done,
.tu-copy-amount.is-done:hover { border-color: var(--color-success); background: var(--color-success-dim); color: var(--color-success); }
.tu-copy-amount.is-done i { color: var(--color-success); }
.tu-warn {
    width: 100%; display: flex; gap: var(--space-3); align-items: flex-start;
    padding: 10px 14px; border-radius: var(--radius-lg);
    background: var(--color-warning-dim); border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
    font-size: var(--font-sm); line-height: 1.45; color: var(--color-text-secondary);
}
.tu-warn i { color: var(--color-warning); margin-top: 3px; flex-shrink: 0; }
.tu-warn p { margin: 0; }
.tu-warn p + p { margin-top: 4px; }
.tu-warn strong { color: var(--color-text-primary); font-weight: 700; }
/* Step 1: say up front that the amount will get a tail. */
.tu-tail-hint {
    display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2);
    font-size: var(--font-sm); line-height: 1.45; color: var(--color-text-secondary);
}
.tu-tail-hint i { color: var(--color-warning); margin-top: 3px; flex-shrink: 0; }
/* Real deposit QR (PNG data-URI from QRCoder). The white tile is the quiet
   zone the scanner needs; pixelated keeps modules crisp when scaled. */
/* The deposit QR in the films' look (AtlasQrSvg): a light tile, lime edge and glow. The
   tile stays light in both themes — it is the QR's quiet zone. */
.tu-qr {
    background: #F4F7F0; padding: 16px; border-radius: 24px; line-height: 0;
    box-shadow: 0 0 0 2px #8FFF00, 0 0 34px rgba(143, 255, 0, 0.42), 0 0 90px rgba(143, 255, 0, 0.16);
}
.tu-qr .atlas-qr { width: 196px; height: 196px; display: block; }
.tu-addr {
    display: flex; align-items: center; gap: var(--space-2);
    max-width: 100%; padding: 6px 6px 6px 14px;
    background: var(--color-bg-overlay); border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
}
.tu-addr code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-sm); letter-spacing: 0.2px; white-space: nowrap;
    color: var(--color-text-primary);
}
.tu-addr-short { display: none; }
.tu-icon-btn {
    width: 32px; height: 32px; border-radius: var(--radius-full); border: none;
    background: var(--color-bg-hover); color: var(--color-text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; font-size: 13px;
    transition: all var(--transition);
}
.tu-icon-btn:hover { background: var(--color-accent); color: #fff; }
.tu-icon-btn.is-done { background: var(--color-success); color: #fff; }
.tu-amount .tu-icon-btn { width: 28px; height: 28px; font-size: 12px; }
.tu-note {
    font-size: var(--font-sm); color: var(--color-text-muted);
    text-align: center; line-height: 1.5; max-width: 340px;
}
.tu-meta {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--font-xs); color: var(--color-text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tu-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.tu-meta .is-expired { color: var(--color-danger); font-weight: 600; }
.tu-footer .bal-btn-primary { width: 100%; justify-content: center; }
.tu-input { font-size: 22px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
/* Phone: bottom sheet; the address shortens in the middle so nothing wraps. */
@media (max-width: 520px) {
    .tu-backdrop { align-items: flex-end; padding: 0; }
    .tu-modal {
        max-width: none; max-height: 96dvh;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        display: flex; flex-direction: column;
    }
    .tu-modal > .gm-body { overflow-y: auto; flex: 1; min-height: 0; }
    .tu-addr-full { display: none; }
    .tu-addr-short { display: inline; }
    .tu-qr .atlas-qr { width: 180px; height: 180px; }
    .tu-amount-val { font-size: 28px; }
}

/* -- Deposit transfer sheet (DepositTransferSheet): working <-> insurance --
   Direction as one segmented control, the amount as the hero, a quiet
   label-over-value preview, one primary action. Rides on .tu-modal; docks to
   the bottom from 640px down. */
.dts-body { display: flex; flex-direction: column; gap: var(--space-4); }
.dts-body > .form-group { margin-bottom: 0; }
.dts-seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    padding: 3px; border-radius: var(--radius-full);
    background: var(--color-bg-overlay); border: 1px solid var(--color-border);
}
.dts-seg-btn {
    border: none; background: transparent; cursor: pointer;
    padding: 8px 10px; border-radius: var(--radius-full);
    font-family: var(--font-family); font-size: 13px; font-weight: 600;
    color: var(--color-text-muted); white-space: nowrap;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.dts-seg-btn:hover { color: var(--color-text-primary); }
.dts-seg-btn.is-active {
    background: var(--color-bg-hover); color: var(--color-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.dts-seg-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.dts .gm-max-link:disabled { opacity: 0.35; cursor: default; text-decoration: none; }
.dts-preview {
    padding: 14px 16px; border-radius: var(--radius-lg);
    background: var(--color-bg-overlay);
}
/* Stays two columns on phones too (trader.css collapses .tx-grid): "after" pairs read side by side. */
.dts-preview .tx-grid.dts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: 12px; }
.dts-preview .tx-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dts-req { font-size: 12px; font-weight: 500; white-space: nowrap; }
.dts-req.is-met { color: var(--color-success); }
.dts-req.is-short { color: var(--color-warning); }
.dts-count { font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.dts-reason textarea { resize: vertical; min-height: 64px; }
.dts-note { font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); text-align: center; }
.dts-note-error { color: var(--color-danger); }
[data-theme="light"] .dts-seg { background: var(--color-bg-hover); }
[data-theme="light"] .dts-seg-btn.is-active { background: #FFFFFF; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); }
[data-theme="light"] .dts-req.is-short { color: #B45309; }
@media (max-width: 640px) {
    .tu-backdrop:has(.dts) { align-items: flex-end; padding: 0; }
    .tu-modal.dts {
        max-width: none; max-height: 96dvh;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }
    .tu-modal.dts > .gm-body { overflow-y: auto; flex: 1; min-height: 0; }
    .dts-seg-btn { font-size: 12.5px; padding: 8px 6px; }
}

/* ============================================================
   33. ADMIN EXTRAS
   ============================================================ */
.wallet-cell {
    font-family: monospace; font-size: var(--font-xs);
    color: var(--color-text-secondary);
}

/* ============================================================
   34. TICKET SYSTEM
   ============================================================ */

/* -- Status tabs -- */
.ticket-tab {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--color-text-secondary); font-size: var(--font-sm);
    font-weight: 600; cursor: pointer;
    transition: all 150ms ease;
    margin-bottom: -1px;
}
.ticket-tab:hover { color: var(--color-text-primary); }
/* -- Ticket detail -- */
.ticket-detail-body { display: flex; flex-direction: column; gap: var(--space-4); }

.ticket-screenshot-img {
    max-width: 100%; max-height: 300px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

/* -- Messages list -- */
.ticket-messages-list {
    display: flex; flex-direction: column; gap: var(--space-3);
    margin-top: var(--space-3);
}
.ticket-msg {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.ticket-msg-admin {
    background: var(--color-accent-dim);
    border-color: rgba(143, 255, 0, 0.2);
}
.ticket-msg-user { background: var(--color-bg-overlay); }
.ticket-msg-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-2);
}
.ticket-msg-name { font-size: var(--font-sm); font-weight: 700; }
.ticket-msg-body {
    font-size: var(--font-sm); color: var(--color-text-primary);
    line-height: 1.6; white-space: pre-wrap;
}
.ticket-msg-attachment {
    display: inline-flex; align-items: center; gap: var(--space-1);
    margin-top: var(--space-2); font-size: var(--font-xs);
    color: var(--color-accent); text-decoration: none; font-weight: 600;
}
.ticket-msg-attachment:hover { text-decoration: underline; }

/* -- Reply form -- */
.ticket-reply {
    display: flex; flex-direction: column; gap: var(--space-2);
}
.ticket-reply-actions {
    display: flex; align-items: center; justify-content: space-between;
}

/* ============================================================
   35. CARD DETAIL LAYOUT
   ============================================================ */
.card-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.detail-section {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.detail-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
    color: var(--color-text-secondary);
    min-width: 120px;
}
/* Long values (order IDs, CBU, hashes) wrap inside the row instead of
   pushing the sheet wider than the screen. */
.detail-row { gap: var(--space-3); }
.detail-row > :last-child:not(.detail-label) { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .detail-label { min-width: 0; flex-shrink: 0; max-width: 45%; }
    .ticket-reply-actions { flex-wrap: wrap; gap: var(--space-2); }
    .card-detail-grid { gap: var(--space-3); }
}

/* ============================================================
   36. PAY-IN & MERCHANTS
   ============================================================ */

/* -- Merchant key cell -- */
.merchant-key-cell {
    font-family: 'Courier New', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--color-accent); letter-spacing: 0.3px;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   37. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .topbar { padding: 0 var(--space-3); height: 56px; }
    .topbar__title { display: none; }
    .topbar__pill { padding: 3px; }
    /* Scope old pill-label hiding to topbar pill only — mobile drawer needs labels */
    .topbar__pill .nav-item span { display: none; }
    .topbar__pill .nav-item { padding: 8px 10px; font-size: 12px; }
    .topbar__pill .nav-item.active i { display: inline-block; font-size: 13px; }
    .drawer { width: 100%; border-radius: 0; }
    .main { padding: var(--space-4); }
    .card-detail-grid { grid-template-columns: 1fr; }
    }

@media (max-width: 1200px) {
    .nav-item { padding: 6px 12px; font-size: 12px; }
    .topbar__pill { padding: 3px; }
}

/* ============================================================
   38. PROFILE PAGE — Atlas Dashboard
   ============================================================ */
.pro {
    display: flex; flex-direction: column;
    gap: var(--space-5);
    animation: fade-in 300ms ease;
}

/* USDT mark (Components/Shared/UsdtMark) — currentColor, so it takes the text's colour.
   The bare ₮ trails an amount on its baseline; the coin cut leads a balance. */
.usdt-mark {
    display: inline-block; flex: none; overflow: visible;
    height: var(--usdt-size, .75em);
    width: calc(var(--usdt-size, .75em) * 1.125);
    margin-left: .25em;
    vertical-align: baseline;
}
.usdt-mark--coin { width: var(--usdt-size, 1em); height: var(--usdt-size, 1em); margin-left: 0; }
.usdt-mark--quiet { opacity: .55; }
/* Cascade credit line (DEV-108 Phase 2): overdraft credit limit + spendable
   headroom, rendered as a clean 2-cell footer section aligned with .bal-cols. */
.bal-btn-outline {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff; padding: 10px 20px;
    border-radius: 9999px; font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: var(--font-family);
    transition: all 0.2s ease;
}
.bal-btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}
.bal-btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-accent); border: none;
    color: var(--color-text-on-accent); padding: 10px 20px;
    border-radius: 9999px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: var(--font-family);
    transition: all 0.2s ease;
}
.bal-btn-primary:hover {
    background: var(--color-accent-hover);
    transform: scale(1.02);
}
/* Disabled state — without this a disabled .bal-btn-primary kept the full accent
   fill + pointer cursor and still scaled on hover, so it looked fully clickable
   (the pool "Claim active while Disabled" bug). Grey it out, kill the affordance. */
.bal-btn-primary:disabled,
.bal-btn-primary[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.45);
}
.bal-btn-primary:disabled:hover,
.bal-btn-primary[disabled]:hover {
    background: var(--color-accent);
    transform: none;
    box-shadow: none;
}

/* -- TRAFFIC CARD (right column) -- */
.trf-text { flex: 1; }
.trf-title { font-size: 15px; font-weight: 600; color: #fff; }
.trf-hint { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }

.rates-title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.rates-time {
    font-size: 11px; color: rgba(255,255,255,0.3);
    white-space: nowrap; margin-left: auto;
}

/* -- TRADER RATE CARD (rate-* / spread-*) --------------------------------
   One rate written as an equation (1 USDT = X fiat) — the inverse restated the
   same number — followed by what this trader earns on each rail of the active
   country. Label left, figures right, no rules and no per-row boxes. */
.rate-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 18px 22px 16px;
}
.rate-time {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spread-name {
    font-size: 13px; font-weight: 600; color: var(--color-text-primary);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spread-note { margin-top: 8px; font-size: 11px; line-height: 1.45; color: var(--color-text-muted); }

[data-theme="light"] .rate-card { background: #FFFFFF; border-color: #E2E8F0; }
/* -- ACTIVITY TABS -- */
.act-tab {
    padding: 8px 16px; border-radius: 9999px;
    font-size: 13px; font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer; border: none; background: transparent;
    font-family: var(--font-family);
    transition: all 0.2s ease;
}
.act-tab:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
}
/* -- Custom GEO dropdown -- */
.pro-geo-dropdown {
    position: relative;
    /* inline-block: shrink-wrap to button width so right-anchored menus
       align with the trigger inside block parents (e.g. .form-group in
       modals). NOTE: explicit z-index intentionally omitted — that would
       create a stacking context and clamp the menu's z=400 to the
       wrapper level, letting sticky table headers (z=1) paint over the
       menu when it opens above the table area. Without a stacking
       context, the menu's z=400 applies in the root context and beats
       the sticky thead. */
    display: inline-block;
}
.pro-geo-btn {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 8px var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-md); font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.pro-geo-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}
.pro-geo-btn i:first-child {
    color: var(--color-accent); font-size: 14px;
}
.pro-geo-chevron {
    font-size: 10px; color: var(--color-text-muted);
    transition: transform 200ms ease;
    margin-left: var(--space-1);
}
.pro-geo-chevron-open {
    transform: rotate(180deg);
}
.pro-geo-backdrop {
    position: fixed; inset: 0; z-index: 99;
}
.pro-geo-menu {
    position: absolute; top: calc(100% + var(--space-2)); left: 0; right: auto;
    min-width: 220px;
    /* Size to the longest option (up to a cap) so labels sit on one line instead of
       wrapping centred inside a narrow menu. */
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    /* Defensive headroom: paint above any in-flow / sticky table
       header within the dropdown's own stacking context. */
    z-index: 400;
    padding: var(--space-1);
    animation: pop-in 160ms cubic-bezier(.16,1,.3,1);
}
/* A1: flip upward when near the viewport bottom */
.pro-geo-menu--up {
    top: auto;
    bottom: calc(100% + var(--space-2));
    transform-origin: bottom right;
}
/* Searchable variant: a filter box pinned to the top of the scrolling menu */
.pro-geo-menu--searchable { min-width: 260px; }
.pro-geo-search {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-2);
    margin-bottom: var(--space-1);
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
}
.pro-geo-search i { color: var(--color-text-muted); font-size: 12px; flex-shrink: 0; }
.pro-geo-search-input {
    flex: 1; min-width: 0;
    padding: 8px 10px;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-family); font-size: var(--font-md);
    outline: none;
    transition: border-color var(--transition);
}
.pro-geo-search-input:focus { border-color: var(--color-accent); }
.pro-geo-search-input::placeholder { color: var(--color-text-muted); }
.pro-geo-empty {
    padding: 12px var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-sm);
}
.pro-geo-option {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px var(--space-4);
    border: none; border-radius: var(--radius-md);
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-md); font-weight: 500;
    color: var(--color-text-secondary);
    text-align: left;
    gap: var(--space-3);
    cursor: pointer;
    transition: all var(--transition);
}
.pro-geo-option-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
/* Past the menu's cap a label ends in an ellipsis on one line (full text in the title). */
.pro-geo-option-label > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* PNG flag image used when DropdownItem.ImageUrl is supplied */
.pro-geo-option-flag {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}
.pro-geo-option:hover,
.pro-geo-option--hl {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
/* A row brought into view by the arrows clears the sticky search box above it. */
.pro-geo-menu--searchable .pro-geo-option { scroll-margin-top: 64px; }
.pro-geo-btn:disabled { opacity: .55; cursor: not-allowed; }
/* A dropdown standing where a form's native select used to be: full width, menu at least as wide. */
.pro-geo--field { display: block; width: 100%; }
.pro-geo--field .pro-geo-btn { width: 100%; justify-content: flex-start; }
.pro-geo--field .pro-geo-chevron { margin-left: auto; }
.pro-geo--field .pro-geo-menu { min-width: 100%; }
.pro-geo-option-active {
    color: var(--color-accent);
    font-weight: 600;
}
.pro-geo-option-active i {
    color: var(--color-accent); font-size: 12px;
}

/* -- Multi-select geo picker (GeoMultiSelect) -- */
.geoms { display: block; width: 100%; }
.geoms-trigger {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; min-height: 40px;
    padding: 5px var(--space-3);
    background: var(--color-bg-overlay);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    cursor: pointer; text-align: left;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.geoms-trigger:hover { border-color: var(--color-border-strong); }
.geoms.pro-geo-dropdown:focus-within .geoms-trigger,
.geoms-trigger:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}
.geoms-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    flex: 1; min-width: 0;
}
.geoms-placeholder { color: var(--color-text-muted); font-size: var(--font-sm); font-weight: 500; }
.geoms-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 8px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-primary);
}
.geoms-chip-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.geoms-chip-x {
    font-size: 11px; color: var(--color-text-muted); cursor: pointer;
    margin-left: 1px; transition: color var(--transition);
}
.geoms-chip-x:hover { color: var(--color-danger); }

/* -- GeoTag: flag + name/slug chip used in tables (Methods, Merchants) -- */
.geo-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.geo-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 9px 3px 4px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}
.geo-tag-flag {
    width: 20px; height: 14px; object-fit: cover;
    border-radius: 2px; flex-shrink: 0;
}
.geo-tag-flag--none { width: auto; height: auto; font-size: 13px; line-height: 1; }
.geo-tag-label { letter-spacing: 0.2px; }

/* -- Responsive -- */
@media (max-width: 768px) {
    /* A scrolling chip strip: tabs keep their one-line labels. */
    .act-tab { flex: 0 0 auto; white-space: nowrap; }
}
@media (pointer: coarse) {
    /* "Max" text link above an amount field: a bigger hit area, same layout. */
    .gm-max-link { padding: 12px 6px; margin: -12px -6px; }
}

/* ============================================================
   PAGE COMPONENTS (shared across Payments, PayOuts, etc.)
   ============================================================ */

/* -- Page header -- */
.pg-title {
    font-size: 24px; font-weight: 700; color: #fff;
    letter-spacing: -0.02em; margin: 0;
}
[data-theme="light"] .pg-title { color: #0F172A; }
/* -- Stat cards (4-col, same visual as bal-card) -- */
/* -- Toolbar -- */
.pg-search {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9999px; padding: 0 16px;
    flex: 1; max-width: 420px;
}
.pg-search i { color: rgba(255,255,255,0.3); font-size: 13px; flex-shrink: 0; }
.pg-search input {
    background: transparent; border: none; outline: none;
    color: #fff; font-family: var(--font-family);
    font-size: 13px; font-weight: 500;
    padding: 10px 0; width: 100%;
}
.pg-search input::placeholder { color: rgba(255,255,255,0.3); }
.pg-search:focus-within { border-color: var(--color-accent); }

/* Unify form-select with pg-select (geo-dropdown style) */
select.form-input {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    cursor: pointer;
}
select.form-input:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

/* used by the receipt viewer below (it lived with the old login page styles) */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Receipt viewer (full-screen image modal) */
.receipt-viewer {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.receipt-viewer img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    object-fit: contain;
}
/* -- Table -- */
.pg-table-wrap {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px; overflow: hidden;
}
.pg-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.pg-table thead th {
    padding: 12px 20px; text-align: left;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: nowrap;
}
.pg-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer; transition: background 0.15s ease;
}
.pg-table tbody tr:last-child { border-bottom: none; }
.pg-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.pg-table tbody td {
    padding: 14px 20px; color: rgba(255,255,255,0.85);
    vertical-align: middle;
}
/* -- Pagination -- */
.pg-pagination {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--space-4); padding: var(--space-3) 0;
}
.pg-pagination-info { font-size: 12px; color: rgba(255,255,255,0.35); }
.pg-page-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent; color: rgba(255,255,255,0.5);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 12px; transition: all 0.2s ease;
    font-family: var(--font-family);
}
.pg-page-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: #fff; }
.pg-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pg-page-current {
    min-width: 56px; height: 32px; padding: 0 12px;
    border-radius: 16px;
    background: var(--color-accent); color: var(--color-text-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; white-space: nowrap;
}
/* -- Responsive pg -- */
@media (max-width: 768px) {
    .pg-search { max-width: 100%; }
    }

/* ============================================================
   PRO CRM DASHBOARD COMPONENTS — Trader Pages
   ============================================================ */

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switch { position: relative; }
.lang-switch__btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 12px;
    border: none; border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-family);
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    cursor: pointer; transition: all 0.2s ease;
}
.lang-switch__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.lang-switch__btn i { font-size: 13px; }
.lang-switch__code { font-variant-numeric: tabular-nums; }
.lang-switch__backdrop { position: fixed; inset: 0; z-index: 98; }
.lang-switch__menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 180px;
    background: var(--color-bg-elevated, #1F2327);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    box-shadow: var(--shadow-dropdown);
    padding: 6px; z-index: 99;
    display: flex; flex-direction: column; gap: 2px;
}
.lang-switch__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: none; background: transparent;
    color: rgba(255,255,255,0.75);
    font-family: var(--font-family);
    font-size: 13px; font-weight: 500;
    border-radius: 8px;
    cursor: pointer; text-align: left;
    transition: all 0.15s ease;
}
.lang-switch__item:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.lang-switch__item.is-active {
    background: var(--color-accent-dim);
    color: var(--color-accent);
    font-weight: 600;
}
.lang-switch__item .fa-check { margin-left: auto; font-size: 11px; }
.lang-switch__label { flex: 1; }
[data-theme="light"] .lang-switch__btn { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .lang-switch__btn:hover { background: #E2E8F0; color: #0F172A; }
[data-theme="light"] .lang-switch__menu { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .lang-switch__item { color: #0F172A; }
[data-theme="light"] .lang-switch__item:hover { background: #F1F5F9; }
[data-theme="light"] .lang-switch__item.is-active { background: #EEF2FF; color: #4F46E5; }

/* Display currency (Components/Merchant/CurrencySwitcher): the same pill with the
   currency's mark in the icon slot, a menu a little wider for the rate column. */
.lang-switch--cur .lang-switch__menu { min-width: 300px; max-width: calc(100vw - 24px); }
/* The rows' role="menu" box (the note sits outside it), laid out like the menu itself. */
.lang-switch__list { display: flex; flex-direction: column; gap: 2px; }
.lang-switch__mark { font-size: 13px; font-style: normal; line-height: 1; }
.lang-switch__btn .usdt-mark.lang-switch__mark { --usdt-size: 11px; margin-left: 0; }
.lang-switch__rate { font-size: 12px; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lang-switch__note { padding: 6px 12px 4px; font-size: 11px; line-height: 1.4; color: var(--color-text-muted); }

/* ============================================================
   CYRILLIC TYPOGRAPHY
   DM Sans lacks full Cyrillic — Inter has excellent coverage.
   ============================================================ */
html[lang="ru"] body,
html[data-lang="ru"] body,
html[lang="ru"] button,
html[lang="ru"] input,
html[lang="ru"] textarea,
html[lang="ru"] select,
html[data-lang="ru"] button,
html[data-lang="ru"] input,
html[data-lang="ru"] textarea,
html[data-lang="ru"] select {
    font-family: var(--font-family-cyr);
    letter-spacing: 0.005em;
}
html[data-lang="ru"] .topbar__title {
    font-family: var(--font-family-cyr);
}

/* ============================================================
   MOBILE NAV / HAMBURGER
   ============================================================ */
.topbar__burger {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border: none; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px; cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 8px;
}
.topbar__burger:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
[data-theme="light"] .topbar__burger { background: #F1F5F9; color: #0F172A; }
[data-theme="light"] .topbar__burger:hover { background: #E2E8F0; }

.mobile-nav__backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 199;
    animation: mobileNavFade 0.2s ease;
}
.mobile-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 85%; max-width: 320px;
    background: var(--color-bg-surface, #1D2125);
    border-right: 1px solid var(--color-border);
    z-index: 200;
    flex-direction: column;
    animation: mobileNavSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .mobile-nav { background: #FFFFFF; border-right-color: #E2E8F0; }
.mobile-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--color-border);
}
.mobile-nav__title {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--color-text-secondary);
}
.mobile-nav__close {
    width: 36px; height: 36px;
    border: none; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.mobile-nav__close:hover { background: rgba(255,255,255,0.12); }
[data-theme="light"] .mobile-nav__close { background: #F1F5F9; color: #0F172A; }
[data-theme="light"] .mobile-nav__close:hover { background: #E2E8F0; }
.mobile-nav__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav__body .nav-item {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    gap: 14px;
    justify-content: flex-start;
    white-space: normal;
    color: var(--color-text-primary) !important;
    background: transparent;
    text-decoration: none;
}
.mobile-nav__body .nav-item:hover { background: rgba(255,255,255,0.04); }
.mobile-nav__body .nav-item i {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    font-size: 16px;
    width: 22px; height: 22px; text-align: center;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.mobile-nav__body .nav-item span {
    display: inline-block !important;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: inherit;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
}
.mobile-nav__body .nav-item.active,
.mobile-nav__body .nav-item.active:hover {
    background: var(--color-accent);
    color: var(--color-text-on-accent) !important;
    font-weight: 600;
}
.mobile-nav__body .nav-item.active i,
.mobile-nav__body .nav-item.active span {
    color: var(--color-text-on-accent) !important;
}
[data-theme="light"] .mobile-nav__body .nav-item { color: #0F172A !important; }
[data-theme="light"] .mobile-nav__body .nav-item:hover { background: #F1F5F9; }
[data-theme="light"] .mobile-nav__body .nav-item.active,
[data-theme="light"] .mobile-nav__body .nav-item.active:hover {
    background: #4F46E5;
    color: #FFFFFF !important;
}
[data-theme="light"] .mobile-nav__body .nav-item.active i,
[data-theme="light"] .mobile-nav__body .nav-item.active span { color: #FFFFFF !important; }

.mobile-nav__footer {
    padding: 16px;
    border-top: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 10px;
}
.mobile-nav__theme {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
}
.mobile-nav__theme:hover { background: rgba(255,255,255,0.04); }
[data-theme="light"] .mobile-nav__theme { color: #0F172A; }
[data-theme="light"] .mobile-nav__theme:hover { background: #F1F5F9; }

@keyframes mobileNavFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mobileNavSlide { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ============================================================
   MASTER MOBILE BREAKPOINTS
   ============================================================ */
@media (max-width: 960px) {
    .topbar { padding: 0 16px; margin-top: 6px; height: 60px; }
    .topbar__burger { display: inline-flex; }
    .topbar__pill { display: none; }
    .topbar__title { font-size: 18px; letter-spacing: 0.18em; }
    .topbar__logo { width: 40px; height: 40px; }
    .topbar__right { gap: 6px; }
    .topbar__counter { display: inline-flex; height: 30px; padding: 0 9px; }
    .mobile-nav__backdrop,
    .mobile-nav { display: flex; }

    /* Tighten main content spacing on tablet */
    .main { padding: 12px !important; }
    .pg-title { font-size: 22px !important; }
    }

/* App shell should not clip the drawer — the drawer is position:fixed */
.app-shell--mobile-nav-open { overflow: hidden; }

@media (max-width: 720px) {
    .topbar { padding: 0 12px; height: 56px; margin-top: 4px; }
    .topbar__title { display: none; }
    .topbar__theme-toggle,
    .lang-switch__btn { height: 36px; width: auto; padding: 0 10px; }
    .topbar__icon-btn { width: 36px; height: 36px; font-size: 14px; }
    .topbar__counter span { font-size: 12px; }
    .topbar__counter { gap: 4px; }

    .main { padding: 10px !important; }

    .pg-search {
        width: 100% !important;
    }
    .pg-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pg-table { font-size: 12px; }
    .pg-table th, .pg-table td {
        padding: 10px 12px !important;
    }
    /* Only real data grids keep a scrollable minimum width and one-line
       cells; two- and three-column key/value tables (detail sheets, cards)
       fit the screen and wrap their values. */
    .pg-table:has(> thead > tr > th:nth-child(4)) { min-width: 640px; }
    .pg-table:has(> thead > tr > th:nth-child(4)) :is(th, td) { white-space: nowrap; }

    .modal, .drawer {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
        top: 0 !important; left: 0 !important;
        right: 0 !important; bottom: 0 !important;
        transform: none !important;
        margin: 0 !important;
    }
    .drawer, .merchant-drawer {
        width: 100vw !important; max-width: 100vw !important;
    }

    .docs { grid-template-columns: 1fr !important; gap: 12px; }
    .docs-body { padding: 16px !important; }

    .notif-pop {
        left: 6px !important; right: 6px !important;
        width: auto !important;
        top: calc(var(--topbar-h, 56px) + 6px) !important;
    }
    .pop {
        left: 6px !important; right: 6px !important;
        width: auto !important;
        top: calc(var(--topbar-h, 56px) + 6px) !important;
    }
    .notif-toast-stack {
        left: 8px !important; right: 8px !important;
        bottom: 8px !important; width: auto !important;
    }
    .notif-toast { width: 100%; }
}

@media (max-width: 480px) {
    .topbar { padding: 0 10px; }
    .topbar__burger { width: 36px; height: 36px; margin-right: 4px; font-size: 15px; }
    .topbar__logo { width: 34px; height: 34px; }
    .topbar__brand { gap: 8px; }
    .topbar__counter { padding: 0 7px; font-size: 11px; height: 26px; }
    .topbar__icon-btn { width: 34px; height: 34px; font-size: 13px; }
    .lang-switch__btn { padding: 0 8px; height: 34px; gap: 4px; }
    .lang-switch__btn .lang-switch__code { font-size: 11px; }

    .main { padding: 8px !important; }

    .pg-title { font-size: 20px !important; }

    .btn {
        font-size: 13px !important;
        padding: 9px 14px !important;
    }

    .topbar__counter i { font-size: 11px; }
}

@media (max-width: 360px) {
    .topbar__right { gap: 4px; }
    .topbar__icon-btn,
    .topbar__theme-toggle { width: 32px; height: 32px; }
    .lang-switch__btn i,
    .lang-switch__btn .lang-switch__mark { display: none; }
}

html.is-mobile-nav-open, html.is-mobile-nav-open body {
    overflow: hidden;
}

@media (max-width: 960px) {
    .sidebar, .aside, .side-panel {
        position: static !important;
        width: 100% !important;
    }
}

/* ============================================================
   TRADER GEO / TRAFFIC — glow, geo-switch cinematic, rates pulse
   (DEV-108 trader cabinet polish)
   ============================================================ */

/* ---- 1. Active-traffic ambient frame ----
   A single soft inset glow hugging the ENTIRE viewport edge, gently breathing,
   so the trader knows traffic is live on EVERY page. One symmetric frame
   (not two side strips); pointer-events:none so it never intercepts clicks.
   Toggled by .app-shell--traffic-on. */
.app-shell--traffic-on::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 55;
    border: 1px solid rgba(143, 255, 0, 0.22);
    box-shadow:
        inset 0 0 70px rgba(143, 255, 0, 0.13),
        inset 0 0 16px rgba(143, 255, 0, 0.10);
    animation: trafficGlowPulse 4s ease-in-out infinite;
}
@keyframes trafficGlowPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
[data-theme="light"] .app-shell--traffic-on::before {
    border-color: rgba(79, 70, 229, 0.20);
    box-shadow:
        inset 0 0 70px rgba(79, 70, 229, 0.10),
        inset 0 0 16px rgba(79, 70, 229, 0.08);
}
@media (max-width: 768px) {
    .app-shell--traffic-on::before {
        box-shadow:
            inset 0 0 40px rgba(143, 255, 0, 0.12),
            inset 0 0 10px rgba(143, 255, 0, 0.09);
    }
    [data-theme="light"] .app-shell--traffic-on::before {
        box-shadow:
            inset 0 0 40px rgba(79, 70, 229, 0.09),
            inset 0 0 10px rgba(79, 70, 229, 0.07);
    }
}
@media (prefers-reduced-motion: reduce) {
    .app-shell--traffic-on::before { animation: none; opacity: 0.7; }
}

/* ---- 2. Cinematic GEO-switch overlay ----
   from-flag → spinning arrows → to-flag, with the "independent profiles"
   + "traffic auto-disabled" messaging. Shown for ~1.8s on a header geo switch. */
.geo-switch-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(10, 12, 14, 0.82) 0%, rgba(6, 7, 9, 0.94) 100%);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    animation: geoOverlayIn 240ms ease both;
}
.geo-switch-overlay--out { animation: geoOverlayOut 320ms ease both; }
@keyframes geoOverlayIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes geoOverlayOut { from { opacity: 1; } to { opacity: 0; } }

.geo-switch-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 44px 56px;
    text-align: center;
    animation: geoCardIn 520ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes geoCardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.geo-switch-flags {
    display: flex;
    align-items: center;
    gap: 30px;
}
.geo-switch-flag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 132px;
}
.geo-switch-flag img {
    width: 108px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.geo-switch-flag-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}
.geo-switch-flag--from img { animation: geoFromFlag 1700ms ease both; }
.geo-switch-flag--from .geo-switch-flag-label { animation: geoFromFade 1700ms ease both; }
@keyframes geoFromFlag {
    0%   { opacity: 0; transform: translateX(-44px) scale(0.8) rotate(-6deg); }
    24%  { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
    70%  { opacity: 1; filter: grayscale(0); transform: scale(1); }
    100% { opacity: 0.42; filter: grayscale(0.85); transform: scale(0.9); }
}
@keyframes geoFromFade { 0%,60% { opacity: 0.65; } 100% { opacity: 0.3; } }

.geo-switch-flag--to img {
    animation: geoToFlag 1700ms cubic-bezier(.16, 1, .3, 1) both;
    outline: 0 solid rgba(143, 255, 0, 0);
}
.geo-switch-flag--to .geo-switch-flag-label {
    color: var(--color-accent, #8FFF00);
    animation: geoToLabel 1700ms ease both;
}
@keyframes geoToFlag {
    0%   { opacity: 0; transform: translateX(44px) scale(0.8) rotate(6deg); }
    34%  { opacity: 0.5; transform: translateX(0) scale(1) rotate(0); }
    62%  { opacity: 1; transform: scale(1.12); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 4px rgba(143,255,0,0.55), 0 0 46px rgba(143,255,0,0.45); }
    100% { opacity: 1; transform: scale(1); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 3px rgba(143,255,0,0.4), 0 0 34px rgba(143,255,0,0.28); }
}
@keyframes geoToLabel { 0%,30% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 1; } }

.geo-switch-arrows {
    font-size: 30px;
    color: var(--color-accent, #8FFF00);
    animation: geoArrowSpin 1300ms cubic-bezier(.5, 0, .2, 1) both;
    filter: drop-shadow(0 0 12px rgba(143, 255, 0, 0.55));
}
@keyframes geoArrowSpin {
    0%   { opacity: 0; transform: rotate(-180deg) scale(0.4); }
    40%  { opacity: 1; transform: rotate(180deg) scale(1.15); }
    70%  { transform: rotate(360deg) scale(1); }
    100% { opacity: 1; transform: rotate(360deg) scale(1); }
}

.geo-switch-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    animation: geoTextIn 600ms ease 280ms both;
}
.geo-switch-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    max-width: 340px;
    animation: geoTextIn 600ms ease 420ms both;
}
.geo-switch-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding: 7px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: #FBBF24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    animation: geoTextIn 600ms ease 560ms both;
}
@keyframes geoTextIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .geo-switch-flag--from img, .geo-switch-flag--to img,
    .geo-switch-arrows, .geo-switch-title, .geo-switch-sub, .geo-switch-note,
    .geo-switch-card, .geo-switch-flag--from .geo-switch-flag-label,
    .geo-switch-flag--to .geo-switch-flag-label {
        animation-duration: 1ms !important;
    }
}
@media (max-width: 560px) {
    .geo-switch-card { padding: 32px 24px; }
    .geo-switch-flag { width: 104px; }
    .geo-switch-flag img { width: 88px; height: 58px; }
    .geo-switch-flags { gap: 18px; }
}

/* ---- 3. Exchange Rates card — pulse on a live rate change (30s poll) ---- */
@keyframes ratesCardPulse {
    0%   { box-shadow: 0 0 0 0 rgba(143, 255, 0, 0); }
    28%  { box-shadow: 0 0 0 1.5px rgba(143, 255, 0, 0.55), 0 0 26px rgba(143, 255, 0, 0.22); }
    100% { box-shadow: 0 0 0 0 rgba(143, 255, 0, 0); }
}
@keyframes ratesValBump {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-3px); color: var(--color-accent, #8FFF00); }
    100% { transform: translateY(0); }
}
/* ---- 7. Header geo dropdown — active geo highlighted in brand green ---- */
.pop__item--active {
    color: var(--color-accent, #8FFF00);
    font-weight: 700;
    background: rgba(143, 255, 0, 0.08);
}
.pop__item--active .pop__item-meta { color: var(--color-accent, #8FFF00); }
[data-theme="light"] .pop__item--active { color: #4F46E5; background: #EEF2FF; }
[data-theme="light"] .pop__item--active .pop__item-meta { color: #4F46E5; }

/* ── Pay Page test playground (merchant) ─────────────────────────────────────
   Two columns: the form / result / live status on the left, the "how to test"
   guide on the right. Collapses to one column below the tablet breakpoint. */
.paypage-note { margin: var(--space-3) 0 0 0; }
.paypage-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.paypage-qr img {
    width: 200px; height: 200px;
    border-radius: var(--radius-md);
    background: #FFFFFF;
    padding: var(--space-2);
}
.paypage-hint { display: block; margin-top: var(--space-2); opacity: 0.9; }

/* ── Pay Page appearance (merchant theme editor, EMBED_PLAN §3.8) ────────────
   Form on the left, a REAL embedded checkout on the right. The preview column
   sticks while the (long) form scrolls, because the whole point of the screen is
   watching the frame recolour as a control moves. */
.appear-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 720px);
    gap: var(--space-5);
    align-items: start;
}
.appear-col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.appear-col--preview { position: sticky; top: var(--space-5); }
.appear-form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}
.appear-bottom { margin-top: var(--space-5); }

/* One variable row: the public name (the contract) above its control. */
.appear-var {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
}
.appear-var:last-child { border-bottom: none; }
.appear-var-head { display: flex; align-items: center; gap: var(--space-2); }
.appear-var-name { flex: 1; min-width: 0; word-break: break-all; }
.appear-var.is-overridden .appear-var-name { color: var(--color-accent, #8FFF00); }
.appear-var-inherited { opacity: 0.7; }
.appear-var-reset {
    background: none; border: none; cursor: pointer; padding: 2px 6px;
    color: var(--color-text-secondary); border-radius: var(--radius-sm);
}
.appear-var-reset:hover { color: var(--color-text-primary); background: var(--color-bg-elevated, rgba(255,255,255,0.06)); }
.appear-var-control { display: flex; align-items: center; gap: var(--space-2); }
.appear-color {
    width: 40px; height: 32px; padding: 0; border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    border-radius: var(--radius-sm); background: none; cursor: pointer; flex: none;
}
.appear-hex { flex: 1; min-width: 0; }
.appear-px { width: 110px; }
.appear-unit { flex: none; }

.appear-expander {
    display: flex; align-items: center; gap: var(--space-2);
    background: none; border: none; cursor: pointer; padding: var(--space-2) 0;
    color: var(--color-text-secondary); font-size: var(--font-sm);
}
.appear-expander:hover { color: var(--color-text-primary); }
.appear-advanced { padding-left: var(--space-3); border-left: 2px solid var(--color-border, rgba(255,255,255,0.08)); }

/* Contrast: the swatch renders the actual pair, so a failing badge is visible
   twice — as a number and as text you can try to read. */
.appear-contrast-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) 0;
}
.appear-swatch {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 30px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border, rgba(255,255,255,0.12));
    font-weight: 700; font-size: 13px; flex: none;
}
.appear-contrast-names { flex: 1; min-width: 0; word-break: break-all; }

.appear-preview-card { overflow: hidden; }
.appear-preview-controls {
    display: flex; align-items: flex-end; gap: var(--space-3);
    margin-bottom: var(--space-3); flex-wrap: wrap;
}
.appear-preview-controls .form-group { flex: 1; min-width: 160px; margin-bottom: 0; }
.appear-preview-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.appear-preview-frame {
    /* A neutral ground: the framed page paints its own background, and a checked
       or coloured backdrop here would lie about what the merchant's site shows. */
    background: var(--color-bg-elevated, rgba(255,255,255,0.03));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex; justify-content: center;
    min-height: 320px;
}
.appear-preview-frame > div { width: 100%; }
.appear-preview-note { display: block; margin-top: var(--space-2); }
.appear-tab {
    background: none; border: none; cursor: pointer;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary); font-size: var(--font-sm); font-weight: 600;
    border-bottom: 2px solid transparent;
}
.appear-tab.is-active { color: var(--color-text-primary); border-bottom-color: var(--color-accent, #8FFF00); }
.appear-code {
    margin: 0;
    padding: var(--space-3);
    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: var(--radius-md);
    overflow-x: auto;
    white-space: pre;
    line-height: 1.5;
}
.appear-issues { margin: var(--space-2) 0 0 0; padding-left: 1.2em; }
.appear-issues li { margin-bottom: 2px; word-break: break-all; }

/* ── Embedded checkout: the merchant's embedding domains (Settings) ────────── */
@media (max-width: 1400px) {
    .appear-grid { grid-template-columns: minmax(0, 1fr); }
    .appear-col--preview { position: static; }
}
@media (max-width: 640px) {
    .appear-form-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Live refresh (live-*): pay-in / pay-out lists for admins and traders.
   The toolbar pill doubles as the manual refresh button; rows that arrived
   with the latest refresh get a short accent wash.
   ============================================================ */
.live-refresh {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.live-refresh-dot {
    width: 6px; height: 6px; border-radius: 50%; flex: none;
    background: var(--color-success); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.live-refresh.is-stale .live-refresh-dot { background: var(--color-warning); box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2); }
.live-refresh-label { color: var(--color-text-secondary); font-weight: 600; }
.live-refresh-icon { font-size: 11px; color: var(--color-text-muted); }
.live-refresh.is-busy .live-refresh-icon { animation: spin 0.9s linear infinite; }

/* Toolbars that carry the pill wrap onto a second line instead of running off-screen. */
@keyframes liveRowIn { from { background-color: rgba(143, 255, 0, 0.12); } to { background-color: transparent; } }
@keyframes liveCardIn { from { box-shadow: 0 0 0 2px rgba(143, 255, 0, 0.55); } to { box-shadow: 0 0 0 2px rgba(143, 255, 0, 0); } }
.pg-table tbody tr.live-new { animation: liveRowIn 2.6s ease-out; }
@media (max-width: 720px) {
    .live-refresh-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pg-table tbody tr.live-new, .live-refresh.is-busy .live-refresh-icon { animation: none; }
}

/* ============================================================
   Local time (Components/Shared/LocalTime.razor, ZoneLabel.razor)
   Primary line = browser-local time; the UTC line under it is smaller
   and one step dimmer. Pure typography: no icons, no pills.
   ============================================================ */
.lt { font-variant-numeric: tabular-nums; }
.lt--stack { display: inline-block; vertical-align: middle; line-height: 1.3; }
.lt-utc {
    display: block; margin-top: 1px;
    font-size: 10.5px; font-weight: 400; letter-spacing: 0;
    color: var(--color-text-muted); white-space: nowrap;
}
/* Muted cells: lift the local line one step so it still reads above the UTC line. */
.text-muted > .lt--stack,
.tx-muted .lt--stack { color: var(--color-text-secondary); }

.zone-label {
    margin-left: 0.4em;
    font-weight: 500; letter-spacing: 0.02em; text-transform: none;
    font-variant-numeric: tabular-nums; opacity: 0.75;
}

/* ============================================================
   Shared filter controls — DateInput (.date-picker), ExportButton
   (.export-dropdown), StyledDropdown (.pro-geo-*), PaginationBar and the
   toasts, from a 360px phone to a 690px-tall laptop. The components pick
   the side their popover opens to (js/popover.js → --end / --up); these
   rules only size and place.
   ============================================================ */

/* Controls never outgrow the row they sit in. */
.date-picker { max-width: 100%; min-width: 0; }
.date-picker .date-picker-trigger { max-width: 100%; }
.export-dropdown, .pro-geo-dropdown { max-width: 100%; }
.pro-geo-btn { max-width: 100%; }
.pro-geo-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Menus open toward the side with room and never wider than the screen. */
.pro-geo-menu, .export-dropdown-menu { max-width: calc(100vw - 24px); }
.pro-geo-menu--end { left: auto; right: 0; transform-origin: top right; }
.date-picker--end .date-picker-popover { left: auto; right: 0; transform-origin: top right; }
.date-picker--up .date-picker-popover { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.date-picker--up.date-picker--end .date-picker-popover { transform-origin: bottom right; }

/* Short laptop screens (MacBook 13" ≈ 690px tall): a tighter calendar, so it
   fits above or below a trigger in the middle of the screen. */
@media (max-height: 760px) and (min-width: 721px) {
    .date-picker .date-picker-popover { padding: 10px; }
    .date-picker .date-picker-header { padding-bottom: 4px; }
    .date-picker .date-picker-days-header { padding: 4px 0; margin-bottom: 4px; }
    .date-picker .date-picker-cell { height: 30px; }
    .date-picker .date-picker-time,
    .date-picker .date-picker-footer { margin-top: 6px; padding-top: 6px; }
}

@media (max-width: 720px) {
    /* The calendar is a bottom sheet: a 304px popover anchored to a
       half-width trigger cannot stay on a 360px screen. */
    .date-picker .date-picker-backdrop {
        background: rgba(3, 5, 9, 0.55);
        animation: fade-in 200ms ease;
    }
    .date-picker .date-picker-popover,
    .date-picker--end .date-picker-popover,
    .date-picker--up .date-picker-popover {
        position: fixed;
        top: auto; bottom: 0; left: 0; right: 0;
        width: auto;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 20px 20px 0 0;
        border-bottom: 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
        animation: sheet-up 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .date-picker .date-picker-nav { width: 40px; height: 40px; }
    .date-picker .date-picker-cell { height: 42px; font-size: 15px; }
    .date-picker .date-picker-time-input { width: 48px; height: 40px; }
    .date-picker .date-picker-action { min-height: 40px; padding: 8px 14px; }
    /* The sheet is position:fixed, so no ancestor may become its containing
       block. Entrance animations with fill-mode both stay in effect after they
       end, and an element with a transform animation in effect is such a block
       even at translateY(0) — 'backwards' looks the same (the end frame equals
       the resting style) but lets go when the animation ends. Set for good, not
       toggled on open: toggling animation properties would replay them.
       Filters are only dropped while the sheet is open. */
    .main :has(.date-picker),
    .modal-backdrop :has(.date-picker) { animation-fill-mode: backwards !important; }
    .main :has(.date-picker--open),
    .modal-backdrop :has(.date-picker--open) {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Pagination: range text + page size on one line, the pager below
       across the full width. */
    .pg-pagination { flex-wrap: wrap; gap: 10px 12px; }
    .pg-pagination > .d-flex { display: contents; }
    .pg-pagination-info { flex: 1 1 auto; }
    .pg-pagination > .d-flex > .d-flex { flex: 1 1 100%; justify-content: space-between; }
    .pg-pagination .pg-page-current { min-width: 88px; }

    /* Ticket sheet header (Components/TicketDetailModal.razor): title and
       close on the first line, the meta line under it, badges last — the
       one-line desktop header squeezed the title to a few letters. */
    .ticket-detail.admin-modal .admin-modal-head { flex-wrap: wrap; gap: 6px 12px; padding: 16px; }
    .ticket-detail.admin-modal .admin-modal-avatar { display: none; }
    .ticket-detail.admin-modal .admin-modal-titlewrap { flex: 1 1 0; }
    .ticket-detail.admin-modal .admin-modal-title {
        font-size: 17px; white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .ticket-detail.admin-modal .admin-modal-status { order: 3; flex: 1 1 100%; margin-left: 0; }
    .ticket-detail.admin-modal .admin-modal-body { padding: 16px; }

    }

/* Bank / UPI app of a requisite (BankLabel): the app icon as a small rounded tile,
   then the name. Outside the catalog, a neutral letter tile of the same size. */
.bank-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.bank-label-name { overflow: hidden; text-overflow: ellipsis; }
.bank-label--none { color: var(--color-text-muted); }
.bank-logo { width: 20px; height: 20px; flex: none; border-radius: 6px; object-fit: cover; }
.bank-logo--letter {
    display: inline-grid; place-items: center;
    background: var(--color-bg-elevated); color: var(--color-text-secondary);
    font-size: 11px; font-weight: 700; line-height: 1;
}
.bank-label--sm { gap: 6px; }
.bank-label--sm .bank-logo { width: 16px; height: 16px; border-radius: 5px; font-size: 9px; }
/* ============================================================
   MERCHANT DASHBOARD — additive layer
   Loaded AFTER app.css. Reuses all design tokens from :root.
   ============================================================ */

/* ---- 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; }

/* Unparseable payload fallback: warning line + the raw text as evidence. */
.jv-parse-warn {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: var(--space-2);
    color: var(--color-warning);
    font-size: var(--font-xs);
    font-family: var(--font-family);
    line-height: 1.5;
}
.jv-parse-warn i { margin-top: 2px; }
.jv-raw {
    margin: 0;
    white-space: pre-wrap; word-break: break-all;
    font-size: 11px; line-height: 1.5;
    color: var(--color-text-secondary);
    max-height: 420px; overflow: auto;
}
.jv-bracket   { color: var(--color-text-secondary); }
.jv-comma     { color: var(--color-text-muted); }
.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;
    flex-wrap: wrap;
    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 1 140px;
    min-width: 0;
    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;
}

/* ---- 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 ---- */
.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; }

/* ---- 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 {
    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;
}

/* 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);
}
/* ============================================================
   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-text {
    display: flex; flex-direction: column; gap: 4px;
    max-width: 380px;
}
.empty-state-hint {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
}
/* Compact variant for chart cards / inline panels */
@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);
}
/* A labelled switch has no fixed track-only footprint — let its content size it. */
.toggle-switch--labeled { width: auto; height: auto; }
[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 .text-mono {
    font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
    font-feature-settings: "ss01" 1;
}

/* 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-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,
.sparkline-svg .spark-line {
    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 */
@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); }
/* ============================================================
   31. PAGE-LEVEL ENTRANCE
   ============================================================ */
/* Fill "backwards", not "both": a transform kept after the entrance (even an
   identity matrix) makes .pro the containing block of position:fixed
   descendants, and detail modals rendered inside a page section (Finance →
   Reports) opened thousands of pixels off-screen. */
.pro {
    animation: proFadeIn 400ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@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)
   ============================================================ */
@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); }
    }

/* ============================================================
   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 {
    background: #FFFFFF;
    border-color: #E2E8F0;
    color: #0F172A;
}
/* 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;
}
/* 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; }

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

/* ============================================================
   36. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .merchant-settings-grid .card,
    .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; }
    .btn:hover:not(:disabled),
    .pg-page-btn:hover:not(:disabled) { transform: none !important; }
    .merchant-segmented-btn,
    .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--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;
}

/* Webhook modal uses slightly equal columns */
.gm-body--webhook {
    padding: var(--space-4) var(--space-5);
    overflow-x: hidden;
}
@media (max-width: 680px) {
    .gm-body--webhook { grid-template-columns: 1fr; overflow-x: hidden; }
    }

/* --- 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--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;
}

/* --- 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-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"] .webhook-modal-url {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #0F172A;
}
[data-theme="light"] .webhook-modal-progress { background: #E2E8F0; }
[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; }

/* From/To stay flattened into .admin-dashboard-controls' own flex row above 480px
   (display:contents = zero layout effect); below it they become their own even
   2-column row instead of each wrapping on its own line next to unrelated filters. */
.dash-date-row { display: contents; }

/* ---- 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;
}

/* Right column stacks the pay-in + pay-out charts (same width, consistent style). */
.admin-charts-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* Ops view (no platform revenue — Support): one full-width row of the four
   confirmation KPIs, then the two order charts side by side; they stack once a
   chart would drop under ~460px. */
.admin-dashboard-grid--ops { grid-template-columns: minmax(0, 1fr); }
.admin-dashboard-grid--ops .admin-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-dashboard-grid--ops .admin-charts-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    align-items: start;
}
@media (max-width: 960px) {
    .admin-dashboard-grid--ops .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .admin-dashboard-grid--ops .admin-kpi-grid { grid-template-columns: 1fr; }
}

/* Trader dashboard — commission earnings hero card (headline metric). */
@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; }

/* DEV-106: full-width caption under a revenue tile (e.g. the FX-margin legend). */
.admin-kpi-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: calc(var(--space-1) * -1) 0 var(--space-1);
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-text-muted);
}
.admin-kpi-note i { color: var(--color-accent); font-size: 11px; margin-top: 1px; }

/* ---- 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; }

/* Head row: 28x28 icon chip + uppercase title + optional eye toggle. */
.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;
}
/* Value: large, tabular numbers. Long values: shrink at smaller viewports. */
.kpi-tile-ext-note {
    font-size: var(--font-xs); line-height: 1.4;
    color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}
.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-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(240px, 1fr));
    gap: var(--space-3);
}
/* A card needs ~240px for the name plus two number columns. Where four no longer
   fit side by side they go 2x2 (not 3 + 1), then one per row on a phone. */
.admin-rates-section { container: admin-rates / inline-size; }
@container admin-rates (max-width: 1000px) {
    .admin-rates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container admin-rates (max-width: 500px) {
    .admin-rates-grid { grid-template-columns: minmax(0, 1fr); }
}
.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;
}

/* DEV-106: FX spread row + per-provider breakdown inside each rate card. */
.admin-rate-card-row--spread {
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
}
.admin-rate-card-val--spread { color: var(--color-accent); }

/* DEV-106: FX spread shown as two cross-provider sides (bid green / ask red). */
.admin-rate-fx-sides { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.admin-rate-fx-sep { opacity: 0.4; }
.admin-rate-fx-none { color: var(--color-text-muted); font-weight: 600; }

/* Stored rate not refreshed for minutes: every provider for the geo is silent
   and pay-ins still price on this frozen value — warn loudly on the card. */
.admin-rate-card--frozen { border-color: var(--color-warning); }
.admin-rate-frozen .admin-rate-card-label,
.admin-rate-frozen .admin-rate-card-label i,
.admin-rate-frozen .admin-rate-card-val { color: var(--color-warning); }

/* India trader rate cap in force: the FIXED rate is the prominent number, in the
   platform accent (our override: acid green on dark, indigo on light) on its dim
   tint with a lock; the real order-book rate follows muted in brackets. The child
   colours also win over the frozen row's amber. */
.admin-rate-capped { display: inline-flex; align-items: baseline; gap: 6px; }
.admin-rate-capped-fixed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-accent-dim);
    color: var(--color-accent);
}
.admin-rate-capped-fixed i { font-size: 9px; }
.admin-rate-capped-real { color: var(--color-text-muted); font-weight: 500; }
.admin-rate-capped-note {
    margin-top: -4px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--color-text-muted);
    text-align: right;
}

.admin-rate-providers {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    /* One grid for the head and every row: the name takes what is left (ellipsis),
       each number column is as wide as its longest value or label, so labels and
       values never run into each other whatever the language or font. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--space-3);
    row-gap: 4px;
    align-items: baseline;
}
/* Ops view card = the rate sources alone, right under the head (whose own rule
   already separates them). */
.admin-rate-card--sources .admin-rate-providers { margin-top: 0; padding-top: 0; border-top: 0; }
.admin-rate-providers-head,
.admin-rate-providers-cols,
.admin-rate-provider-row,
.admin-rate-provider-vals { display: contents; }
.admin-rate-providers-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-bottom: 2px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--color-text-muted);
}
/* Box-less (display: contents) but still inherited by the two labels, which keep
   their own bid / ask colour classes. */
.admin-rate-providers-cols {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-text-muted);
}
.admin-rate-providers-cols span {
    padding-bottom: 2px;
    text-align: right;
    white-space: nowrap;
}
.admin-rate-provider-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
/* Feed extraction hint in brackets ("(#7)", "(med)") - platform accent so it
   reads as a deliberate signal: acid green on dark, indigo on light. */
.admin-rate-provider-note {
    margin-left: 4px;
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-weight: 700;
    color: var(--color-accent);
}
.admin-rate-provider-val {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    text-align: right;
    white-space: nowrap;
}
.admin-rate-provider-row.is-unavailable .admin-rate-provider-name { color: var(--color-text-muted); }
.admin-rate-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-warning);
}
.admin-rate-provider-badge i { font-size: 9px; }

/* ==========================================================================
   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; }
    .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; }
    .dash-date-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        width: 100%;
    }
    }

/* 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"] .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;
}

/* ==========================================================================
   Admin dashboard — commissions tone + revenue section
   ========================================================================== */

/* Revenue source colours. One per source, shared by the daily columns, the donut
   and the tile swatches. Stepped for each surface and checked as a set for
   colour-blind separation (adjacent pairs incl. the donut's wrap-around). */
/* Atlas label income (carved out of the trader pool, listed right after it): each
   theme takes the OTHER theme's brand hue, since its own accent is the trader pool —
   an electric violet on dark, a deep lime on light. Validated with the dataviz palette
   validator in the order trader, atlas, cascade, fx, settlement on each card surface:
   every check passes — dark worst adjacent atlas↔cascade CVD ΔE 12.0 (deutan); light
   worst stays the old settlement↔fx pair (CVD 14.1), atlas↔trader / atlas↔cascade higher. */
:root {
    --rev-trader:     #5CA800;
    --rev-atlas:      #7A47F3;
    --rev-cascade:    #2F95D6;
    --rev-fx:         #C98500;
    --rev-settlement: #D55181;
    /* pay-out halves of the trader pool and FX margin (pay-in keeps the source colour); .ds pages
       take theirs from css/ds/charts.css */
    --rev-trader-po:  #A6E05C;
    --rev-fx-po:      #F5C46E;
}
html[data-theme="light"] {
    --rev-trader:     #4F46E5;
    --rev-atlas:      #3E6102;
    --rev-cascade:    #0284C7;
    --rev-fx:         #D97706;
    --rev-settlement: #DB2777;
    --rev-trader-po:  #312E81;
    --rev-fx-po:      #92400E;
}

/* Expenses in the P&L (page chart, category bars, dashboard block): a loss red, a
   step deeper than the --color-danger text red so a bar never reads as a label.
   Validated with the dataviz palette validator against the revenue set in the
   chart's stacking order (settlement, fx, cascade, trader | expense) on each theme's
   card surface — all checks pass: dark #D71712 on #1D2125 (worst adjacent CVD pair
   expense↔trader ΔE 8.3), light #A61B1B on #FFFFFF. Against the settlement pink,
   never adjacent in the stack, light passes every check (ΔE 15.9) and dark stays
   under the normal-vision floor (ΔE 12.3, CVD 11.6): there the expense is told
   apart by position too — it is the only mark below the zero line. */
:root { --pnl-expense: #D71712; }
html[data-theme="light"] { --pnl-expense: #A61B1B; }

/* The two automatic expense lines get their own reds, so a column below zero reads as
   platform expenses (--pnl-expense, next to zero), then the trader-affiliate cost
   (--pnl-expense-ref, a lighter coral) and the merchant-affiliate cost (--pnl-expense-aff,
   a deep crimson). Validated with the dataviz palette validator in the stacking order
   trader | expense, ref, aff on each card surface: every adjacent pair passes CVD and
   the normal-vision floor — dark expense↔ref ΔE 18.2, ref↔aff 28.2; light ref↔aff 18.1.
   Expense and aff never touch (ref sits between them). Dark aff is 2.0:1 on the card:
   relief is the tooltip and the keyed expense list under the chart. */
:root { --pnl-expense-ref: #FF7A6E; --pnl-expense-aff: #9E1449; }
html[data-theme="light"] { --pnl-expense-ref: #E8604F; --pnl-expense-aff: #B3125A; }

/* Commissions tone — the fee flow (merchant / trader / system fee). A calm cool hue
   that reads apart from the platform's own revenue, from the --rev-* series colours
   and from the red/coral that the dashboard uses for errors and falls:
   lavender on dark, teal on light (violet would blur into the light theme's indigo). */
:root { --fees-tone: #A78BFA; }
html[data-theme="light"] { --fees-tone: #0D9488; }
.admin-kpi-rubric--fees .admin-kpi-rubric-label i { color: var(--fees-tone); }
/* ---- Daily columns ---- */
.rev-cols {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: var(--rev-cols-h, 220px) auto;
    column-gap: var(--space-2);
}
.rev-cols-yaxis { position: relative; grid-row: 1; grid-column: 1; }
.rev-cols-ytick {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-size: 10.5px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rev-cols-plot { position: relative; grid-row: 1; grid-column: 2; }
.rev-cols-grid {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--color-border);
}
.rev-cols-grid.is-zero { border-top: 1px solid var(--color-border-strong); }
.rev-cols-days { position: absolute; inset: 0; display: flex; }
.rev-cols-slot {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
}
.rev-cols-slot::before {
    content: "";
    position: absolute;
    inset: 0 1px;
    border-radius: 6px;
    background: transparent;
    transition: background var(--transition-md);
}
.rev-cols-slot.is-active::before { background: color-mix(in srgb, var(--color-text-primary) 5%, transparent); }
.rev-cols-seg {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 62%;
    min-width: 2px;
    max-width: 22px;
    transform-origin: bottom;
    transition: opacity var(--transition-md);
    animation: revColIn 520ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.rev-cols-seg.is-cap { border-radius: 4px 4px 0 0; }
.rev-cols-seg.is-cap-down { border-radius: 0 0 4px 4px; transform-origin: top; }
.rev-cols-slot.is-dim .rev-cols-seg { opacity: 0.38; }
@keyframes revColIn {
    from { opacity: 0; transform: scaleY(0.2); }
    to   { opacity: 1; transform: scaleY(1); }
}
.rev-cols-xaxis { position: relative; grid-row: 2; grid-column: 2; height: 24px; }
.rev-cols-xtick {
    position: absolute;
    top: 7px;
    transform: translateX(-50%);
    font-size: 10.5px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.rev-cols-tip {
    position: absolute;
    top: 6px;
    z-index: 3;
    min-width: 190px;
    padding: 10px 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-dropdown);
    pointer-events: none;
    font-size: 12px;
    animation: kpiTileIn 160ms ease-out both;
}
.rev-cols-tip-title {
    font-weight: 700;
    color: var(--color-text-primary);
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}
.rev-cols-tip-row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    padding: 2px 0;
}
.rev-cols-tip-dot { width: 8px; height: 8px; border-radius: 2px; }
.rev-cols-tip-label { color: var(--color-text-secondary); white-space: nowrap; }
.rev-cols-tip-val { color: var(--color-text-primary); font-variant-numeric: tabular-nums; text-align: right; }
.rev-cols-tip-total {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
    font-weight: 700;
}
.rev-cols-tip-total .rev-cols-tip-label { color: var(--color-text-primary); }
.rev-cols-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: 12px;
    color: var(--color-text-secondary);
}
.rev-cols-legend-item { display: inline-flex; align-items: center; }
.rev-cols-legend-dot { width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.rev-cols-empty { min-height: 220px; }

/* ---- Donut ---- */
.rev-donut {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}
.rev-donut-figure { position: relative; width: 208px; height: 208px; }
.rev-donut-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: revDonutIn 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes revDonutIn {
    from { opacity: 0; transform: rotate(-40deg) scale(0.94); }
    to   { opacity: 1; transform: rotate(0) scale(1); }
}
.rev-donut-track { fill: none; stroke: var(--color-bg-elevated); stroke-width: 16; }
.rev-donut-arc {
    fill: none;
    stroke-width: 16;
    cursor: pointer;
    transition: stroke-width 180ms ease, opacity 180ms ease;
}
.rev-donut-arc.is-active { stroke-width: 22; }
.rev-donut-arc.is-dim { opacity: 0.32; }
.rev-donut-center {
    position: absolute;
    inset: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    pointer-events: none;
}
.rev-donut-center-label {
    max-width: 100%;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rev-donut-center-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}
.rev-donut-center-sub { font-size: var(--font-xs); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.rev-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rev-legend-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto 56px;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: default;
    transition: background var(--transition-md), opacity var(--transition-md);
}
.rev-legend-row.is-active { background: var(--color-bg-hover); }
.rev-legend-row.is-dim { opacity: 0.5; }
.rev-legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.rev-legend-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rev-legend-val { font-size: 13px; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.rev-legend-pct { font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.rev-legend-bar {
    grid-column: 2 / -1;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-bg-elevated);
    overflow: hidden;
}
.rev-legend-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rev-legend-note { grid-column: 2 / -1; font-size: 11px; color: var(--color-text-muted); }

/* ---- Light theme ---- */
[data-theme="light"] .rev-donut-track,
[data-theme="light"] .rev-legend-bar { stroke: #F1F5F9; background: #F1F5F9; }
[data-theme="light"] .rev-legend-row.is-active { background: #F8FAFC; }
[data-theme="light"] .rev-cols-tip {
    background: #FFFFFF;
    border-color: #CBD5E1;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 0 0 1px #E2E8F0;
}
[data-theme="light"] .rev-cols-grid { border-top-color: #E2E8F0; }
[data-theme="light"] .rev-cols-grid.is-zero { border-top-color: #CBD5E1; }
[data-theme="light"] .rev-cols-legend { border-top-color: #E2E8F0; }
[data-theme="light"] .rev-cols-slot.is-active::before { background: rgba(15, 23, 42, 0.04); }

@media (prefers-reduced-motion: reduce) {
    .rev-cols-seg,
    .rev-cols-tip,
    .rev-donut-svg { animation: none !important; }
    .rev-donut-arc,
    .rev-legend-bar > span { transition: none; }
}

/* ============================================================
   MERCHANT CABINET — RESPONSIVE PASS
   Phones (≤720), tablets (≤960) and 13–14" laptops (1280–1512).
   Tables become cards through js/responsive.js; the rules below
   cover the merchant-only layouts around them.
   ============================================================ */

@media (max-width: 720px) {
    .admin-dashboard-header { margin-bottom: var(--space-3); }
}

/* ---- Filter toolbars on phones ----------------------------------------
   Status / geo / dates in an even two-column grid, search full width,
   Export (and the Pay Page link) share one row instead of floating right. */
@media (max-width: 720px) {
    .merchant-toolbar { padding: var(--space-3); gap: var(--space-2); }
    .merchant-toolbar-sep { display: none; }
    .merchant-filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
        width: 100%;
    }
    .merchant-filter-row > * { min-width: 0; width: 100%; }
    .merchant-filter-row .pro-geo-dropdown,
    .merchant-filter-row .pro-geo-btn,
    .merchant-filter-row .date-picker,
    .merchant-filter-row .date-picker .date-picker-trigger,
    .merchant-filter-row .form-input[type] { width: 100%; max-width: none; }
    .merchant-filter-row .pro-geo-btn,
    .merchant-filter-row .date-picker .date-picker-trigger,
    .merchant-filter-row > .form-input { height: 44px; box-sizing: border-box; }
    .merchant-filter-row .pro-geo-btn { padding: 0 12px 0 14px; gap: 6px; font-size: var(--font-sm); }
    /* Half-width cells: the value ("Все источники") needs the room more than
       the decorative leading icon does. */
    .merchant-filter-row .pro-geo-btn > i.fa-solid:first-child { display: none; }
    .merchant-filter-row .pro-geo-btn > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
    .merchant-filter-row .pg-search { grid-column: 1 / -1; max-width: none; min-width: 0; order: -1; }
    .merchant-filter-row > .toggle-switch { grid-column: 1 / -1; min-height: 40px; }
    /* Five half-width filters would leave the last one alone: the first
       spans the row so the date pair stays together at the bottom. */
    .merchant-filter-row:has(> .pg-search):has(> :nth-child(6):last-child) > :nth-child(2),
    .merchant-filter-row:has(> .toggle-switch) > :first-child { grid-column: 1 / -1; }
    .merchant-toolbar-search { flex: 1 1 100%; order: 0; }
    .merchant-toolbar-actions {
        width: 100%;
        display: flex;
        gap: var(--space-2);
        order: 1;
    }
    .merchant-toolbar-actions > * { flex: 1 1 0; min-width: 0; }
    .merchant-toolbar-actions > .btn,
    .merchant-toolbar-actions .export-dropdown > .btn { width: 100%; justify-content: center; min-height: 40px; }
}

/* Tablets: filters on the first line, search + actions share the second
   (the actions used to float alone on a row of their own). */
@media (min-width: 721px) and (max-width: 900px) {
    .merchant-toolbar:has(.merchant-filter-row) { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .merchant-toolbar:has(.merchant-filter-row) > .merchant-filter-row { flex: 1 1 100%; }
    .merchant-toolbar-search { flex: 1 1 240px; order: 1; }
    .merchant-toolbar-actions { width: auto; flex: 0 0 auto; order: 2; align-self: center; gap: var(--space-2); }
}

/* ---- Card-mode refinements for merchant lists ---- */
table.rt--stacked td[data-cell="primary"] .badge { margin: 4px 0 0 !important; }

/* ---- Finance hub ---- */
/* ---- Settings ----
   2fr / 1fr used plain fr tracks, so the widest unbreakable row (webhook URL
   + Save + Test) set the column's minimum and pushed the page off a phone. */
.merchant-settings-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.merchant-settings-col { min-width: 0; }
@media (max-width: 1000px) {
    .merchant-settings-grid--2-1 { grid-template-columns: minmax(0, 1fr); }
}
/* Intro lines ran straight into the next field label */
.merchant-settings-col .card-body > p.text-muted,
.appear-col .card-body > p.text-muted { margin: 0 0 var(--space-3); line-height: 1.5; }
/* line-break:anywhere — Safari will not break a run of "•" mask dots otherwise */
@media (max-width: 720px) {
    .merchant-settings-col .card-header { flex-wrap: wrap; gap: var(--space-2); }
    }

/* ---- Pay Page appearance editor ----
   On 13–14" laptops the live preview used to drop under a ~6000px form. Keep
   it beside the form in a narrower column (the 390px mobile frame still fits)
   and let it scroll on its own in a 690px-tall window. */
@media (min-width: 1100px) and (max-width: 1400px) {
    .appear-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, 460px); gap: var(--space-4); }
    .appear-col--preview { position: sticky; top: 0; }
}
@media (min-width: 1100px) {
    .appear-col--preview {
        max-height: calc(100vh - 110px);
        max-height: calc(100dvh - 110px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        border-radius: var(--radius-lg);
    }
}
/* The 640px "desktop" frame scrolls inside its own box when the column is narrower */
.appear-preview-frame { overflow-x: auto; justify-content: safe center; }
.appear-preview-card .card-header { flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 720px) {
    .appear-grid { gap: var(--space-4); }
    .appear-col { gap: var(--space-4); }
    .appear-preview-frame { padding: var(--space-2); min-height: 240px; }
    .appear-preview-controls .form-group { min-width: 0; flex-basis: 100%; }
    .appear-preview-controls > .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
    .appear-contrast-row { flex-wrap: wrap; row-gap: 4px; }
    .appear-bottom .d-flex > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Detail modals ---- */
.gm-header--sticky > .d-flex { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
/* The body is the scroller, so the header needs no sticking — and Safari
   offset a sticky header in the sheet by its own height, leaving a blank
   band on top and covering the first rows of the body. */
.glass-modal > .gm-header--sticky { position: relative; }
/* Sheet footers: the bal-btn pair gets the same full-width treatment
   responsive.css gives .btn (Cancel / Confirm evenly, thumb-sized). */
@media (max-width: 720px) {
    .gm-footer > .bal-btn-outline,
    .gm-footer > .bal-btn-primary { flex: 1 1 140px; min-height: 44px; justify-content: center; }
}
@media (max-width: 680px) {
    /* Stacked columns must keep their content height. The body stayed a grid
       (.glass-modal-xl .gm-body.gm-body--2col outranks the old flex rule) with
       a fixed height, and auto rows of overflow:hidden columns start at 0 —
       the rows were squeezed to the sheet and "Amount" painted over the
       status timeline. */
    .gm-body--webhook { padding: var(--space-3) var(--space-4); }
    .gm-row { flex-wrap: wrap; column-gap: var(--space-3); row-gap: 2px; }
    .gm-row-label { min-width: 0; }
    .gm-row-value { margin-left: auto; min-width: 0; }
    }

/* ==========================================================================
   Merchant dashboard (mdash-*) — /merchant/dashboard
   The admin P&L's language on the merchant's money: the equation card
   (pnl-eq), money-flow amounts with the USDT mark (PnlAmount), the diverging
   chart (.pnl-chart-*), bar rows (.pnl-rows) and the source sheet. Only the
   layout and the few merchant-only pieces live here.
   ========================================================================== */

/* Geo series colours — one per geo on the flow chart, the segment swatches and
   the live feed. Validated with the dataviz palette validator (validate_palette.js)
   as a categorical set, all pairs, on each theme's card surface, and in stack
   order next to the pay-out red (--pnl-expense): every check passes.
   Dark on #1D2125 — worst all-pairs CVD ΔE 10.1 (kr↔ar), normal-vision 20.3,
   contrast ≥ 3:1. Light on #FFFFFF — worst all-pairs CVD ΔE 10.8 (in↔ve),
   normal-vision 21.0, contrast ≥ 3:1. */
:root {
    --geo-ar: #4C94EC;
    --geo-ve: #9D5D03;
    --geo-in: #4EA954;
    --geo-kr: #CD6AAF;
}
html[data-theme="light"] {
    --geo-ar: #2591C4;
    --geo-ve: #B07A20;
    --geo-in: #226929;
    --geo-kr: #98397E;
}

.mdash { display: flex; flex-direction: column; gap: var(--space-4); }
/* Cards: flat and bordered, as on the P&L page — read, not played with. */
.mdash .card.pnl-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: visible;
}
.mdash .card.pnl-card:hover { transform: none; box-shadow: none; }

/* ---- 3. Flow chart legend + tooltip footer ---- */
.mdash-legend {
    list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px;
    margin: 10px 0 0 calc(var(--pnl-chart-gutter) + var(--space-2)); padding: 0;
    font-size: 12px; color: var(--color-text-secondary);
}
.mdash-legend li { display: inline-flex; align-items: center; gap: 7px; }
.mdash-legend-net { width: 14px; height: 2px; border-radius: 1px; background: var(--color-text-primary); }
.mdash-tip-foot {
    margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border);
    font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap;
}

/* ---- The detail grid ---- */
.mdash-area-funnel  { grid-area: funnel; }
.mdash-area-quality { grid-area: quality; }
.mdash-area-balance { grid-area: balance; }
.mdash-area-seg     { grid-area: seg; }
.mdash-area-int     { grid-area: int; }
.mdash-area-disp    { grid-area: disp; }
/* Compact lists (withdrawals, disputes, webhooks). */
.mdash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* ---- Responsive: 3 columns → 2 (≤1200) → 1 (≤720) ---- */
@media (max-width: 720px) {
    .mdash { gap: var(--space-3); }
    .mdash-legend { margin-left: var(--pnl-chart-gutter); }
    }
/* ============================================================
   Atlas — Admin cabinet scoped styles
   Loaded AFTER app.css + merchant.css; only Admin pages use these.
   Aesthetic direction: operational fintech, dark-first, neon-lime
   accents on glass surfaces. Tabular numerals everywhere, no
   editorial serifs, no cream backgrounds — this is a control panel.
   ============================================================ */

/* ---------- 1. Page entrance + table row stagger ---------- */
.pro .pg-table-wrap { animation: admPageFadeUp 380ms cubic-bezier(.16,1,.3,1) 120ms both; }
/* The "both" fill-mode pins translateY(0) on each row above, which silently
   creates a stacking context. That clamped the dropdown/date-picker popovers
   (which open out of the toolbar) under the table's sticky thead (z=1 in
   that own stacking context). Lifting .pg-toolbar's stacking context above
   .pg-table-wrap restores the expected paint order. */
.pro .pg-table-wrap { position: relative; z-index: 1; }

.pro .pg-table tbody tr { animation: admRowIn 320ms cubic-bezier(.16,1,.3,1) both; }
.pro .pg-table tbody tr:nth-child(1) { animation-delay: 140ms; }
.pro .pg-table tbody tr:nth-child(2) { animation-delay: 165ms; }
.pro .pg-table tbody tr:nth-child(3) { animation-delay: 190ms; }
.pro .pg-table tbody tr:nth-child(4) { animation-delay: 215ms; }
.pro .pg-table tbody tr:nth-child(5) { animation-delay: 240ms; }
.pro .pg-table tbody tr:nth-child(6) { animation-delay: 260ms; }
.pro .pg-table tbody tr:nth-child(7) { animation-delay: 280ms; }
.pro .pg-table tbody tr:nth-child(8) { animation-delay: 295ms; }
.pro .pg-table tbody tr:nth-child(9) { animation-delay: 310ms; }
.pro .pg-table tbody tr:nth-child(n+10) { animation-delay: 320ms; }

@keyframes admPageFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes admRowIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .pro .pg-table-wrap,
    .pro .pg-table tbody tr { animation: none !important; }
}

/* ---------- 3. Table density polish ---------- */
.pro .pg-table tbody td { font-variant-numeric: tabular-nums; }
.pro .pg-table tbody tr { transition: background 140ms ease; }
.pro .pg-table tbody tr:hover { background: rgba(143,255,0,0.025); }
[data-theme="light"] .pro .pg-table tbody tr:hover { background: rgba(15,23,42,0.035); }

/* ---------- 4. Large centered Admin modal
   Built on .glass-modal so it inherits theming + animation.
   Overrides max-width to 1100px, locks header/footer sticky. ---------- */
.admin-modal {
    max-width: min(1120px, calc(100vw - 48px));
    width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-modal .admin-modal-head {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 2;
    background: var(--color-bg-surface);
    flex-shrink: 0;
}
.admin-modal .admin-modal-avatar {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(143,255,0,0.18), rgba(143,255,0,0.06));
    color: var(--color-accent);
    font-size: 18px;
    border: 1px solid rgba(143,255,0,0.18);
    flex-shrink: 0;
}
[data-theme="light"] .admin-modal .admin-modal-avatar {
    background: linear-gradient(135deg, rgba(143,255,0,0.22), rgba(143,255,0,0.08));
    border-color: rgba(143,255,0,0.28);
}
.admin-modal .admin-modal-titlewrap {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1;
}
.admin-modal .admin-modal-title {
    font-size: 20px; font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.admin-modal .admin-modal-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
}
.admin-modal .admin-modal-status { margin-left: auto; flex-shrink: 0; }
.admin-modal .admin-modal-close {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    flex-shrink: 0;
}
[data-theme="light"] .admin-modal .admin-modal-close { background: rgba(15,23,42,0.04); }
.admin-modal .admin-modal-close:hover {
    background: rgba(255,255,255,0.08);
    color: var(--color-text-primary);
}
[data-theme="light"] .admin-modal .admin-modal-close:hover { background: rgba(15,23,42,0.08); }
.admin-modal .admin-modal-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.admin-modal .admin-modal-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
    background:
        radial-gradient(900px 320px at 100% -10%, rgba(143,255,0,0.05), transparent 60%),
        var(--color-bg-surface);
}
[data-theme="light"] .admin-modal .admin-modal-body {
    background:
        radial-gradient(900px 320px at 100% -10%, rgba(143,255,0,0.08), transparent 60%),
        #FFFFFF;
}

.admin-modal .admin-modal-foot {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    position: sticky; bottom: 0; z-index: 2;
    flex-shrink: 0;
}
.admin-modal .admin-modal-foot-spacer { flex: 1; }

/* ---------- 5. Section grid inside admin modal ---------- */
.admin-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 900px) {
    .admin-modal-grid { grid-template-columns: 1fr; }
    .admin-modal { max-width: calc(100vw - 24px); max-height: 92vh; }
}

.admin-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color 200ms ease, background 200ms ease;
}
[data-theme="light"] .admin-card {
    background: #FFFFFF;
    border-color: #E5E7EB;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.admin-card:hover { border-color: rgba(143,255,0,0.18); }
[data-theme="light"] .admin-card:hover { border-color: rgba(143,255,0,0.35); }

.admin-card-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
[data-theme="light"] .admin-card-head { border-color: #F1F5F9; }

.admin-card-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: grid; place-items: center;
    background: rgba(143,255,0,0.08);
    color: var(--color-accent);
    font-size: 13px;
    flex-shrink: 0;
}
/* Light theme: the dark #8FFF00 accent chip reads as a harsh green
   tile on white. Use the light indigo palette (#4F46E5) consistent
   with other [data-theme="light"] accent usage. Shared by Cascade,
   User and Merchant detail drawers — fixes all three consistently. */
[data-theme="light"] .admin-card-icon {
    background: #EEF2FF;
    color: #4F46E5;
}
.admin-card-title {
    font-size: 13px; font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.005em;
    flex: 1;
}
.admin-card-eyebrow {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.admin-card-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}
.admin-card-row + .admin-card-row {
    border-top: 1px dashed rgba(255,255,255,0.04);
}
[data-theme="light"] .admin-card-row + .admin-card-row { border-color: #EEF2F7; }
.admin-card-row > span:first-child {
    color: var(--color-text-muted);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.01em;
}
.admin-card-row > span:last-child {
    color: var(--color-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}
.admin-card-row .admin-mono {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Key-reveal row */
.admin-key {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--color-text-primary);
    max-width: 100%;
}
[data-theme="light"] .admin-key {
    background: #F8FAFC; border-color: #E2E8F0;
}
.admin-key-value {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 220px;
}
.admin-key-btn {
    width: 24px; height: 24px;
    border: none; border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background 140ms ease, color 140ms ease;
    flex-shrink: 0;
}
.admin-key-btn:hover { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
[data-theme="light"] .admin-key-btn:hover { background: rgba(15,23,42,0.06); }
.admin-key-btn:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 1px;
}

.admin-card-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-top: 6px;
}
/* Stack actions vertically (used in user detail action card) */
.admin-card-actions-stacked {
    flex-direction: column;
    align-items: stretch;
}
/* Compact action button placed at the right edge of an admin-card-head row */
.admin-card-head-action {
    margin-left: auto;
    padding: 6px 12px !important;
    font-size: 12px !important;
}
/* Card spanning the full width of admin-modal-grid (2-col grid) */
.admin-card-wide { grid-column: 1 / -1; }

/* One-line explainer under an admin-card row (what a flag actually does). */
.admin-card-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* Horizontal divider inside a card, separating sub-sections */
.admin-card-divider {
    height: 1px;
    margin: 10px 0;
    background: var(--color-border, rgba(148,163,184,0.18));
}

/* ── Method spreads section (trader page: UserDetail) ─────────────────────
   Each contracted method is its own bordered card so its spread and
   Currency-Exchange controls stay grouped and never blend together. */
.ms-method {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-overlay, rgba(255,255,255,0.02));
    padding: 12px 14px;
    transition: border-color var(--transition, 0.15s ease);
}
.ms-method:hover { border-color: var(--color-border-strong, rgba(148,163,184,0.35)); }
/* Section hint line under an .ms-subhead */
.ms-hint {
    font-size: 12px; color: var(--color-text-muted);
    line-height: 1.45; margin: -2px 0 10px;
}

/* Amount / numeric typography shared by the detail cards */
.admin-amount-strong { font-weight: 700; color: var(--color-accent); }
.admin-amount-positive { font-weight: 700; color: #16A34A; }
.admin-text-positive { color: #16A34A; }

/* Action zone (success/confirm path) — sits beneath the cards grid */
.admin-action-zone {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(52,211,153,0.18);
    background: rgba(52,211,153,0.04);
}
.admin-action-zone-head {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; color: #6EE7B7;
    margin-bottom: 6px;
}
.admin-action-zone-hint {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    margin: 0 0 12px;
}

/* Pay-in manual confirm with an optional downward amount correction (pic-*).
   Amount received is the hero field; old → new appears only when it goes down. */
.pic-fields {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) 1fr 1fr;
    gap: 12px;
}
.pic-fields .form-group { margin-bottom: 0; min-width: 0; }
.pic-amount-input { position: relative; }
.pic-amount-input .form-input {
    padding-right: 52px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pic-ccy {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    pointer-events: none;
}
/* Plain confirm (no correction right): the order amount as text, on the input's
   baseline so the row of fields stays level. */
.pic-amount-static {
    display: flex; align-items: center; gap: 6px;
    height: 40px;
    font-size: var(--font-md, 15px); font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}
.pic-amount-static-ccy {
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.pic-compare {
    margin-top: 14px;
    max-width: 460px;
    transition: opacity 150ms ease;
}
.pic-compare.is-stale { opacity: 0.45; }
.pic-compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px auto;
    align-items: baseline;
    column-gap: 10px;
    padding: 4px 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.pic-compare-label { color: var(--color-text-muted); font-size: 12px; font-weight: 600; }
.pic-compare-old { color: var(--color-text-secondary); text-align: right; }
.pic-compare-arrow { color: var(--color-text-muted); text-align: center; }
.pic-compare-new { color: var(--color-text-primary); font-weight: 700; text-align: right; }
.pic-reason { margin: 14px 0 0; max-width: 560px; }
.pic-reason textarea { resize: vertical; min-height: 58px; }
.pic-note {
    margin: 12px 0 0;
    font-size: 13px; font-weight: 500;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
.pic-note--warn { color: var(--color-warning); }
.pic-note--danger { color: var(--color-danger); }
.pic .pic-submit { margin-top: 14px; font-variant-numeric: tabular-nums; }
.pic .alert-success { margin: 14px 0 0; }
@media (max-width: 720px) {
    .pic-fields { grid-template-columns: 1fr; }
}

/* After a correction: the asked amount, struck, before the booked one */
.pic-was {
    margin-right: 6px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration-thickness: 1px;
}
.pic-corrected {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
/* Danger zone (destructive path) */
.admin-danger-zone {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(248,113,113,0.22);
    background: rgba(248,113,113,0.05);
}
.admin-danger-zone-head {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; color: #FCA5A5;
    margin-bottom: 6px;
}
.admin-danger-zone-hint {
    color: var(--color-text-muted);
    font-size: var(--font-sm);
    margin: 0 0 12px;
}

/* Admin detail PAGE — same look as admin-modal but rendered inline.
   Re-applies the admin-modal-* visuals via a parent selector so we don't
   have to wrap the page in .admin-modal (which has fixed-positioning rules). */
.admin-detail-page .admin-modal-head {
    display: flex; align-items: center; gap: var(--space-4);
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-surface);
    margin-bottom: 16px;
}
.admin-detail-page .admin-modal-avatar {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(143,255,0,0.18), rgba(143,255,0,0.06));
    color: var(--color-accent);
    font-size: 18px;
    border: 1px solid rgba(143,255,0,0.18);
    flex-shrink: 0;
}
.admin-detail-page .admin-modal-titlewrap {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1;
}
.admin-detail-page .admin-modal-title {
    font-size: 20px; font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.admin-detail-page .admin-modal-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
}
.admin-detail-page .admin-modal-status { margin-left: auto; flex-shrink: 0; }
.admin-detail-back {
    padding: 6px 12px !important;
    font-size: 12px !important;
    margin-right: 4px;
}
.admin-detail-grid { margin-bottom: 16px; }

/* /admin/rate-providers — compact single-card layout */
.admin-card-head-meta {
    margin-left: auto;
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* Cascade drawer: assign-merchant control row (select grows, button fixed) */
.cascade-assign-row {
    display: flex; align-items: center; gap: 8px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}
[data-theme="light"] .cascade-assign-row { border-color: #EEF2F7; }
.cascade-assign-row .bal-btn-primary { flex-shrink: 0; }

/* Accumulation card bar */
.admin-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
[data-theme="light"] .admin-bar { background: #EEF2F7; }
.admin-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), rgba(143,255,0,0.6));
    border-radius: 999px;
    transition: width 480ms cubic-bezier(.16,1,.3,1);
}
.admin-bar-fill--warn { background: linear-gradient(90deg, var(--color-warning), #FBBF24); }
.admin-bar-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}
.admin-bar-meta strong {
    color: var(--color-accent);
    font-weight: 700; font-size: 12px;
}

/* Webhook card status pill */
.admin-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.02em;
}
.admin-pill--ok { background: rgba(16,185,129,0.12); color: var(--color-success); }
.admin-pill--warn { background: rgba(245,158,11,0.12); color: var(--color-warning); }
.admin-pill--muted { background: rgba(255,255,255,0.05); color: var(--color-text-muted); }
[data-theme="light"] .admin-pill--muted { background: rgba(15,23,42,0.05); }
.admin-pill--err { background: rgba(239,68,68,0.12); color: var(--color-danger); }
.admin-pill-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: currentColor;
}

/* New-secret reveal banner inside modal */
.admin-secret-banner {
    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04));
    border: 1px solid rgba(245,158,11,0.32);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: var(--color-warning);
}
.admin-secret-banner i { font-size: 14px; flex-shrink: 0; }
.admin-secret-banner strong {
    font-family: 'Courier New', monospace;
    color: var(--color-text-primary);
    word-break: break-all;
}

/* Inline edit grid (commission, accumulation) */
.admin-edit-grid {
    display: grid; gap: 10px;
    grid-template-columns: 1fr 1fr;
}
.admin-edit-grid .form-group { margin: 0; }
.admin-edit-grid label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

/* StyledDropdown used as filter — match pg-select pill metrics. */
.adm-filter-dd .pro-geo-btn {
    padding: 8px 16px;
    font-size: 13px; font-weight: 600;
}
.adm-filter-dd .pro-geo-btn i:first-child {
    color: var(--color-text-muted);
    font-size: 12px;
}
/* Merchant filter: the item image is the merchant's logo, shaped like MerchantLogo (not a flag). */
.adm-filter-dd--logos .pro-geo-option-flag {
    width: 20px; height: 20px;
    border-radius: 5px;
    background: var(--qr-plate);
    box-shadow: inset 0 0 0 1px var(--hairline);
}

/* Read-only info banner (permissions matrix). */
.adm-note {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin: 4px 0 16px;
    font-size: 13px;
    color: var(--color-text-muted);
    background: var(--color-surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 10px;
}
.adm-note i { color: var(--color-accent, #8FFF00); font-size: 13px; }
[data-theme="light"] .adm-note { background: #F8FAFC; border-color: #E2E8F0; }

/* ---------- Per-user permission editor (UserPermissionsEditor) ---------- */
.perm-hint { margin: 0 0 14px 0; }
/* ---- 2. Scope: the default chain + one pill per allowed geo ---- */
.rt-scope {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border: none; border-radius: var(--radius-full);
    background: transparent; color: var(--color-text-secondary);
    font-family: var(--font-family); font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background 160ms ease, color 160ms ease;
}
.rt-scope:hover { color: var(--color-text-primary); background: rgba(255,255,255,0.05); }
.rt-scope.is-on,
.rt-scope.is-on:hover { background: var(--color-accent); color: var(--color-text-on-accent); }
.rt-scope:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* ---- 3. Two-column grid: edit view + truth view ---- */
.rt-side { min-width: 0; }

/* c. Pool scope: the whole geo pool, or a hand-picked (restricted) set. */
.rt-hint { margin: 0; font-size: 12px; line-height: 1.55; color: var(--color-text-muted); max-width: 74ch; }
.rt-hint-warn { color: var(--color-warning); }

/* Inline trader picker — search + candidates, in the card, not a modal. */
.rt-picker {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px; border-radius: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.rt-picker-search {
    display: flex; align-items: center; gap: 8px;
    padding: 0 4px 0 12px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}
.rt-picker-search > i { font-size: 12px; color: var(--color-text-muted); flex: none; }
.rt-picker-search input {
    flex: 1; min-width: 0; height: 34px; border: none; background: transparent;
    color: var(--color-text-primary); font-family: var(--font-family);
    font-size: 13px; outline: none;
}
.rt-picker-search input::placeholder { color: var(--color-text-muted); }
.rt-picker-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
    max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
}
/* ---- 5. Effective routing — the truth view, never editable ---- */
.rt-panel {
    position: sticky; top: var(--space-4);
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px; border-radius: 14px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    animation: admPageFadeUp 380ms cubic-bezier(.16,1,.3,1) 120ms both;
}
.rt-note { font-size: 11px; color: var(--color-text-muted); }

/* ---- 5b. Live pool — who takes the traffic now; accordion per trader ----
   The side column is the sticky unit now (two panels), and scrolls on its own
   when an open accordion outgrows the viewport. */
.rt-side {
    position: sticky; top: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-4);
    max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.rt-side .rt-panel { position: static; }
.rt-live-count {
    font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rt-live-refresh { width: 28px; height: 28px; flex: none; }
.rt-live-hint { margin-top: -4px; }
.rt-live-empty {
    display: flex; align-items: center; gap: 10px;
    padding: 12px; border-radius: 10px; font-size: 12px; color: var(--color-text-secondary);
    background: rgba(255,255,255,0.025); border: 1px dashed rgba(255,255,255,0.1);
}
.rt-live-empty i { color: var(--color-text-muted); }

.rt-live-bar { display: flex; gap: 2px; height: 6px; border-radius: var(--radius-full); overflow: hidden; }
.rt-live-seg { min-width: 3px; transition: flex-grow 240ms ease; }

.rt-live-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rt-live-item {
    border-radius: 10px; overflow: hidden;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 150ms ease, background 150ms ease;
}
.rt-live-item.is-open { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.035); }
.rt-live-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; background: none; border: 0; cursor: pointer;
    text-align: left; font-family: var(--font-family); color: inherit;
}
.rt-live-row:hover { background: rgba(255,255,255,0.03); }
.rt-live-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 10px; }
.rt-live-swatch { width: 4px; height: 26px; border-radius: 2px; flex: none; }
.rt-live-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rt-live-name {
    font-size: 13px; font-weight: 600; color: var(--color-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rt-live-meta { font-size: 11px; color: var(--color-text-muted); }
.rt-live-share { font-size: 13px; color: var(--color-text-primary); }
.rt-live-chev { font-size: 10px; color: var(--color-text-muted); transition: transform 200ms ease; flex: none; }
.rt-live-item.is-open .rt-live-chev { transform: rotate(180deg); }

.rt-live-body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 2px 12px 12px 26px;
    animation: rtLiveOpen 180ms ease-out both;
}
@keyframes rtLiveOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rt-live-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rt-live-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; background: none; border: 0; cursor: pointer;
    font-family: var(--font-family); font-size: 12px; font-weight: 600;
    color: var(--color-text-secondary); text-decoration: none;
}
.rt-live-link i { font-size: 10px; opacity: 0.8; }
.rt-live-link:hover { color: var(--color-accent); }
.rt-live-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.rt-live-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--color-danger); }

.rt-req {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 11px; border-radius: 9px;
    background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.05);
}
.rt-req.is-skeleton { gap: 8px; }
.rt-req.is-skeleton span {
    display: block; height: 10px; border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));
    background-size: 200% 100%; animation: rtShimmer 1.2s linear infinite;
}
.rt-req.is-skeleton span:nth-child(1) { width: 45%; }
.rt-req.is-skeleton span:nth-child(2) { width: 70%; }
.rt-req.is-skeleton span:nth-child(3) { width: 55%; }
@keyframes rtShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

[data-theme="light"] .rt-side { scrollbar-color: #CBD5E1 transparent; }
[data-theme="light"] .rt-live-empty { background: #F8FAFC; border-color: #CBD5E1; }
[data-theme="light"] .rt-live-item { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .rt-live-item.is-open { background: #FFFFFF; border-color: #CBD5E1; }
[data-theme="light"] .rt-live-row:hover { background: #F1F5F9; }
[data-theme="light"] .rt-req { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .rt-req.is-skeleton span {
    background: linear-gradient(90deg, #EEF2F7, #E2E8F0, #EEF2F7); background-size: 200% 100%;
}
@media (max-width: 1100px) {
    .rt-side { position: static; max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
    .rt-live-body, .rt-req.is-skeleton span { animation: none !important; }
    .rt-live-chev, .rt-live-seg { transition: none; }
}

/* ---- Light theme ---- */
[data-theme="light"] .rt-panel {
    background: #FFFFFF; border-color: #E5E7EB; box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
[data-theme="light"] .rt-scope:hover { background: rgba(15,23,42,0.05); }
/* Light theme's accent is indigo and --color-info is blue — too close to read as
   two shares. Pull the cascade segments to sky so the split stays legible. */
[data-theme="light"] .rt-picker { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .rt-picker-search { background: #FFFFFF; border-color: #E2E8F0; }
/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .rt-panel { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    .rt-panel { animation: none !important; }
}

/* ---------- 8. Toggle (switch) for boolean fields in modal ---------- */
.admin-switch {
    position: relative;
    width: 38px; height: 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
    flex-shrink: 0;
}
[data-theme="light"] .admin-switch { background: #E2E8F0; border-color: #CBD5E1; }
.admin-switch::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 999px;
    background: #fff;
    transition: transform 200ms cubic-bezier(.16,1,.3,1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.admin-switch--on { background: var(--color-accent); border-color: rgba(143,255,0,0.4); }
.admin-switch--on::after { transform: translateX(16px); background: #0B0E12; }
[data-theme="light"] .admin-switch--on::after { background: #FFFFFF; }
.admin-switch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------- 9. Reduce visual weight of "Welcome admin"-style
   AI-slop generic centered placeholders. (Currently none in code;
   kept defensive for future additions.) ---------- */
.admin-generic-greet { display: none !important; }

/* Geo flag badges (topbar + tables) */
.topbar__geo-flag {
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
    display: inline-block;
    vertical-align: middle;
}
/* Topbar geo chip: an auto-width pill (NOT the fixed circular icon-btn) so the
   flag + ISO3 label fit without clipping. */
.topbar__geo-wrap { position: relative; display: inline-flex; }
.topbar__geo-flag { margin-right: 7px; width: 22px; height: 15px; }
.topbar__geo-btn {
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    overflow: visible;
}
.topbar__geo-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}
/* Notifications popover — constrain height + scroll */
.notif-pop-body {
    max-height: min(60vh, 480px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.notif-pop-body::-webkit-scrollbar { width: 8px; }
.notif-pop-body::-webkit-scrollbar-track { background: transparent; }
.notif-pop-body::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; }
.notif-pop-body::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ============================================================
   MERCHANT × CASCADE RATES (MerchantCascadeSpreadsEditor)
   Card = read-only summary pills; editing lives in a modal.
   ============================================================ */
.casc-table {
    width: 100%;
    border-collapse: collapse;
}
.casc-table th {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-text-muted);
    text-align: center;
    padding: 4px 6px;
}
/* Vertical seam between the Merchant and Cascade column groups */
.casc-table td { padding: 6px; }
.casc-table tbody tr + tr td { border-top: 1px dashed rgba(255,255,255,0.05); }
[data-theme="light"] .casc-table tbody tr + tr td { border-top-color: #EEF2F7; }
/* Merchant drawer: the embed allow-list, one origin per line. Read-only - the
   merchant maintains it from its own portal (EMBED_PLAN 5.1). */
.admin-card-row--stack { align-items: flex-start; }
.admin-embed-origins { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.admin-embed-origins code { word-break: break-all; }

/* ============================================================
   Requisites registry (rq-*) — /admin/cards
   Band legend doubles as the balance filter; table cells are two lines
   (what / context); the detail drawer reuses the transaction-sheet tiles.
   Band colours: Critical red · Low pink · Moderate yellow · Healthy lime ·
   Strong green — by the owning trader's available USDT in that country.
   ============================================================ */
.rq-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.rq-dot--critical { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.rq-dot--low      { background: #EC4899; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.18); }
.rq-dot--moderate { background: #EAB308; box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.18); }
.rq-dot--healthy  { background: #84CC16; box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.18); }
.rq-dot--strong   { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }

.rq-table td { vertical-align: middle; }
.rq-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-main { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }
.rq-sub {
    font-size: 11px; color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.rq-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Detail drawer */
.rq-drawer { width: 680px; max-width: 100vw; }
.rq-body {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-4) var(--space-5) var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
}
@media (max-width: 720px) {
    .rq-drawer { width: 100vw; border-radius: 0; }
    }

/* ============================================================
   Users hub (usr-*) and its Traders tab (trs-*) — /admin/users
   Tabs split accounts by type. The Traders tab reuses the requisites
   registry cells (rq-*) and adds traffic, country and deposit marks;
   the same marks carry into the trader overview on /admin/users/{id}.
   Tabs are underline tabs (lime text + lime rule on the active one), as on the
   tickets pages; the deposit mark is a green check (paid) or a red cross.
   ============================================================ */
.usr-tab {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 12px 16px; margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary); font-size: var(--font-sm); font-weight: 600;
    white-space: nowrap; text-decoration: none;
    transition: color 150ms ease, border-color 150ms ease;
}
.usr-tab i { font-size: 12px; }
.usr-tab:hover { color: var(--color-text-primary); text-decoration: none; }
.usr-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.usr-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 6px; }
.trs-legend { gap: 12px; }
/* The phone toolbar is a column: a 260px basis would become the search box's height. */
.trs-legend-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.trs-legend-label { display: flex; flex-direction: column; gap: 2px; width: 230px; max-width: 100%; }
.trs-legend-name { font-size: 12px; font-weight: 600; color: var(--color-text-primary); }

.trs-dep {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 18px; height: 18px; border-radius: 50%; font-size: 10px;
}
.trs-dep--paid    { color: #22C55E; background: rgba(34, 197, 94, 0.14); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.45); }
.trs-dep--unpaid  { color: #EF4444; background: rgba(239, 68, 68, 0.12); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.4); }
.trs-dep-line { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* UTR mark (UtrMark.razor) — is there a transfer reference on this pay-in, and
   which one. Sits under the payer in the pay-in tables; reuses the .trs-dep glyph
   so a green tick / red cross reads the same wherever it appears. */
.utr-line { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11px; }
.utr-missing { color: var(--color-text-secondary); }
/* ============================================================
   Withdrawal detail sheet (wd-*) — /admin/withdrawals
   The admin makes the payout by hand FROM this sheet, so two values carry the
   weight and everything else recedes: the amount to send and the full TRC20
   address. No inner card — the sheet is already the container, and a box inside
   a box just adds edges.
   ============================================================ */
.wd-modal { max-width: 480px; }

.wd-header { align-items: flex-start; gap: var(--space-3); }
.wd-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.wd-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wd-head-sub { font-size: 12px; color: var(--color-text-secondary); }
.wd-head-right { display: flex; align-items: center; gap: var(--space-2); flex: none; }

/* Rhythm, not a uniform stack: the instruction sits close to the amount it is
   about, the reference block further away. */
.wd-body { display: flex; flex-direction: column; gap: var(--space-5); }
.wd-lede { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }
.wd-send, .wd-wallet { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wd-send + .wd-wallet { margin-top: calc(var(--space-1) * -1); }

.wd-key {
    font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.wd-muted { font-size: 12px; color: var(--color-text-muted); }

.wd-amount-row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.wd-amount {
    font-size: 32px; font-weight: 700; line-height: 1.05;
    color: var(--color-text-primary); font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.wd-amount-unit { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }

.wd-wallet-row {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 10px var(--space-3); border-radius: var(--radius-md);
    background: var(--color-bg-overlay); border: 1px solid var(--color-border);
    min-width: 0;
}
.wd-address {
    font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.45;
    color: var(--color-text-primary);
    /* The WHOLE address, wrapped. A truncated one cannot be checked against the wallet. */
    overflow-wrap: anywhere; min-width: 0; flex: 1 1 auto;
}

.wd-copy {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: transparent; border: 1px solid var(--color-border);
    color: var(--color-text-secondary); cursor: pointer; font-size: 12px;
    transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-copy:hover { color: var(--color-text-primary); border-color: var(--color-text-secondary); }
.wd-copy.is-done { color: var(--color-accent); border-color: var(--color-accent); }

/* Reference block: a quiet key/value list, separated by one hairline. */
.wd-meta {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 7px var(--space-4); margin: 0;
    padding-top: var(--space-4); border-top: 1px solid var(--color-border);
    font-size: 12px;
}
.wd-meta dt { color: var(--color-text-secondary); white-space: nowrap; }
.wd-meta dd { margin: 0; text-align: right; color: var(--color-text-primary); min-width: 0; }
.wd-utc { color: var(--color-text-muted); }
.wd-dd-tx { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.wd-tx {
    font-family: 'Courier New', monospace; font-size: 12px;
    overflow-wrap: anywhere; min-width: 0; text-align: right;
}

.wd-act { display: flex; flex-direction: column; gap: 6px; }
.wd-act-label { font-size: 12px; font-weight: 600; color: var(--color-text-primary); }
.wd-act-gap { margin-top: var(--space-3); }

/* Settlement confirm: the TRON network fee, with the income it leaves beside it. */
.ms-fee-net {
    display: inline-flex; flex-direction: column; gap: 1px;
    padding: 6px 12px; border-radius: var(--radius-md);
    background: var(--color-success-dim); color: var(--color-success);
    font-size: 12px; font-variant-numeric: tabular-nums;
}
.ms-fee-net.is-loss { background: var(--color-warning-dim); color: var(--color-warning); }
/* Automatic settlement in the list: a quiet sub-line under the amount ("Automatic")
   and, for one that fell back, why — under its status. */
.ms-amount { display: block; font-weight: 600; white-space: nowrap; }
.ms-tx { font-family: 'Courier New', monospace; color: var(--color-info); text-decoration: none; }
.ms-tx:hover { text-decoration: underline; }

/* The server's own words under the translated reason: muted, smaller. */
.form-input.ms-resolve-tx { height: auto; resize: none; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.5; word-break: break-all; }
/* A refusal: the translated line, then the server's own words muted under it. */
.ms-history { display: flex; flex-direction: column; gap: 8px; }
.ms-history .timeline-content { font-size: 13px; }

/* Reject is destructive and rare: reachable, but it does not compete with the
   action the admin came here to take. */
.wd-footer { align-items: center; justify-content: space-between; }
.wd-reject {
    background: none; border: none; padding: 6px 2px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--color-text-secondary);
    transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wd-reject:hover:not(:disabled) { color: var(--color-danger); }
.wd-reject:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 480px) {
    .wd-amount { font-size: 26px; }
    .wd-meta { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .wd-meta dd { text-align: left; margin-bottom: 6px; }
    .wd-dd-tx { justify-content: flex-start; }
    .wd-tx { text-align: left; }
}

.trs-traffic {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    padding: 2px 9px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.trs-traffic i { font-size: 10px; }
.trs-traffic.is-on  { color: var(--color-success); background: rgba(34, 197, 94, 0.12); }
.trs-traffic.is-off { color: var(--color-text-muted); background: rgba(255, 255, 255, 0.05); }

.trs-geo { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--color-text-secondary); }
.trs-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }

.trs-online { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--color-success); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.trs-row-link { cursor: pointer; }
.trs-link { text-decoration: none; color: inherit; }
.trs-link:hover .rq-main { color: var(--color-accent); }

/* Trader overview + top-up history on the user detail page */
.trs-head-pill { margin-left: auto; }
.trs-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.trs-fund-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trs-topups-sum { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.trs-topups td { vertical-align: middle; }
.trs-amount { align-items: flex-end; }

[data-theme="light"] .trs-traffic.is-off { background: #F1F5F9; }

@media (max-width: 1100px) {
    .trs-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .trs-legend-label { width: 100%; }
    .trs-overview { grid-template-columns: 1fr; }
    .trs-topups-sum { white-space: normal; flex-wrap: wrap; }
}

/* ============================================================
   Corrections feed (corr-*) — /admin/corrections
   Manual balance corrections and recovered top-ups, one feed in USDT.
   Built from the requisites registry (rq-*), the transaction sheet (tx-*),
   the deposit transfer sheet (dts-* / tu-modal) and the routing picker
   (rt-picker). Only what those do not cover lives here; colours are tokens.
   ============================================================ */

/* Feed table */
.corr-amt {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.corr-amt small { font-size: 10px; font-weight: 700; color: var(--color-text-muted); }
/* Request candidates: radio cards. */
.corr-cand {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 10px 12px; border-radius: var(--radius-md);
    border: 1px solid var(--color-border); background: var(--color-bg-overlay);
    cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.corr-cand:hover { border-color: var(--color-border-strong); }
.corr-cand.is-on { border-color: var(--color-accent); background: var(--color-accent-dim); }
.corr-cand:focus-within { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.corr-cand > .rq-cell { flex: 1; }
/* Drawer */
.corr-reason { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .corr-cand { align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE — operations pages (dashboard, analytics, finance lists)
   ============================================================ */

/* ---- Line chart (MultiLineChart — every role's dashboard) ----------------
   The SVG only draws; axis labels, grid, cursor and dots are HTML over it, so
   labels keep their size at any width. The plot keeps the old proportions
   (--mlc-ratio) with a floor, so a phone gets a readable chart, not a strip. */
.multi-line-chart-wrap { container-type: inline-size; }
.mlc-frame {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: max(180px, calc(var(--mlc-ratio, 0.4) * (100cqw - 48px))) auto;
    column-gap: 8px;
    padding-top: 6px;
}
.mlc-yaxis { position: relative; grid-row: 1; grid-column: 1; }
/* Percent series (conversion) get their own 0–100 % axis on the right. */
.mlc-frame.has-pct-axis { grid-template-columns: 40px minmax(0, 1fr) 34px; }
.mlc-yaxis-pct { position: relative; grid-row: 1; grid-column: 3; }
.mlc-yaxis-pct .mlc-ytick { right: auto; left: 0; }
.mlc-ytick,
.mlc-xtick {
    color: var(--color-text-muted);
    font-size: 10.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mlc-ytick { position: absolute; right: 0; transform: translateY(-50%); }
.mlc-plot { position: relative; grid-row: 1; grid-column: 2; }
.mlc-grid {
    position: absolute; left: 0; right: 0; height: 0;
    border-top: 1px dashed var(--color-border);
    opacity: 0.8;
    pointer-events: none;
}
.mlc-plot > .multi-line-chart {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    animation: mlcReveal 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* The strokes don't scale, so the old dash-offset draw-in no longer measures the
   line; the whole drawing wipes in from the left instead. */
.mlc-plot .multi-line-chart-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
@keyframes mlcReveal {
    from { clip-path: inset(-4px 100% -4px 0); }
    to   { clip-path: inset(-4px -4px -4px 0); }
}
.mlc-cursor {
    position: absolute; top: 0; bottom: 0; width: 0;
    border-left: 1px dashed var(--color-border-strong);
    pointer-events: none;
}
.mlc-dot {
    position: absolute;
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--dot);
    border: 2px solid var(--color-bg-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 22%, transparent);
    pointer-events: none;
}
/* The card opens on the roomier side of the point; on a narrow plot that side
   can be under 180px, so it never grows past half the plot. */
.mlc-plot .multi-line-chart-tooltip {
    transform: none; animation-name: mlcTipIn;
    min-width: min(180px, calc(50% - 12px)); max-width: calc(50% - 12px);
}
@keyframes mlcTipIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mlc-xaxis { position: relative; grid-row: 2; grid-column: 2; height: 24px; }
.mlc-xtick { position: absolute; top: 8px; transform: translateX(-50%); }
.mlc-xtick.is-start { transform: none; }
.mlc-xtick.is-end { transform: translateX(-100%); }
@container (max-width: 520px) {
    .mlc-xtick.is-minor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mlc-plot > .multi-line-chart { animation: none; }
}

/* Revenue columns: the same label thinning and edge alignment. */
.rev-cols { container-type: inline-size; }
.rev-cols-xtick.is-start { transform: translateX(-30%); }
.rev-cols-xtick.is-end { transform: translateX(-80%); }
@container (max-width: 480px) {
    .rev-cols-xtick.is-minor { display: none; }
}

/* ---- Operations lists (.ops = pay-ins, pay-outs, disputes, appeals, tickets,
   withdrawals, settlements, corrections, analytics, cascade moderation) ---- */

/* A full table never breaks a code or a badge mid-word: the global
   overflow-wrap:anywhere on mono text let the auto table layout squeeze the ID
   column to one character per line at 1280. */
.ops .pg-table:not(.rt--stacked) .badge { overflow-wrap: normal; white-space: nowrap; }
/* Laptops: 12px cell sides instead of 20px, two-line column headers and the
   hosted-page flag under the ID — the 11–12 column lists fit a 1280–1512
   screen without sideways scrolling. */
@media (max-width: 1600px) {
    .ops .pg-table:not(.rt--stacked) thead th,
    .ops .pg-table:not(.rt--stacked) tbody td { padding-left: 12px; padding-right: 12px; }
    .ops .pg-table:not(.rt--stacked) tr > :first-child { padding-left: 18px; }
    .ops .pg-table:not(.rt--stacked) tr > :last-child { padding-right: 18px; }
    .ops .pg-table:not(.rt--stacked) thead th { white-space: normal; line-height: 1.35; vertical-align: bottom; }
    .ops .pg-table:not(.rt--stacked) td[data-cell="primary"] > .badge {
        display: flex; width: fit-content; margin: 4px 0 0 !important;
    }
}
/* 1280: the pay-out list (12 columns with actions) needs the last few pixels
   from tighter sides and header tracking. */
@media (max-width: 1300px) {
    .ops .pg-table:not(.rt--stacked) thead th,
    .ops .pg-table:not(.rt--stacked) tbody td { padding-left: 10px; padding-right: 10px; }
    .ops .pg-table:not(.rt--stacked) thead th { letter-spacing: 0.02em; font-size: 10.5px; }
}

/* Filters under 960px: search on its own row, then the filters as an even grid
   (two per row on a phone, four on a tablet) instead of a right-aligned ragged
   wrap that ran off the screen. */
@media (max-width: 960px) {
    /* Status tabs scroll sideways as one strip instead of wrapping each label
       onto two lines and cutting the last tab. */
    .ops .act-tab { flex: none; white-space: nowrap; min-height: 36px; }
}

@media (max-width: 400px) {
    .admin-dashboard .admin-dashboard-controls .pro-geo-btn { padding-left: 12px; padding-right: 12px; gap: 6px; }
    }

@media (max-width: 720px) {
    /* Cascade moderation: title left, refresh right — not a centred stack. */
    .ops > .admin-dashboard-header { flex-direction: row; align-items: center; margin-bottom: var(--space-2); }
    .ops > .admin-dashboard-header > h2 { font-size: 20px; text-align: left; min-width: 0; }
    .ops > .admin-dashboard-header > .btn { flex: none; min-height: 40px; }

    }
/* Card mode: a long status ("Evidence deadline passed") wraps inside its
   column instead of running left over the ID. */
.ops table.rt--stacked td[data-cell="status"] { max-width: 100%; }
.ops table.rt--stacked td[data-cell="status"] .badge {
    white-space: normal; max-width: 100%;
    line-height: 1.25; text-align: center;
}

/* The router focuses the page title after navigation; it is not a control,
   so no focus ring around it. */
.ops .pg-title:focus { outline: none; }

/* ---- Admin dashboard ------------------------------------------------------ */

/* Rate cards: a long provider name or block title wraps onto a second line
   instead of being cut ("Binance P2P IN · med #…") on 1280–1512 screens,
   where four cards share the row. */
.admin-dashboard .admin-rate-provider-name,
.admin-dashboard .admin-rate-providers-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    line-height: 1.35;
}
.admin-dashboard .admin-rate-card { container-type: inline-size; min-width: 0; }
.admin-dashboard .admin-rate-card-row--spread { align-items: flex-start; }
.admin-dashboard .admin-rate-card-row--spread .admin-rate-card-label { white-space: nowrap; padding-top: 2px; }
.admin-dashboard .admin-rate-fx-sides { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
.admin-dashboard .admin-rate-fx-sides > span { white-space: nowrap; }
/* A narrow card puts BID over ASK instead of breaking "(1.45%)" off its number. */
@container (max-width: 360px) {
    .admin-dashboard .admin-rate-fx-sides { flex-direction: column; align-items: flex-end; }
    .admin-dashboard .admin-rate-fx-sep { display: none; }
}

/* KPI column: at 1920 four 220px tiles broke titles mid-word
   ("ПОДТВЕРЖДЁННЫ / Й ОБЪЁМ"); 240px gives three roomy columns there and
   leaves the two-column laptop layout as it was. */
@media (min-width: 721px) {
    .admin-dashboard-grid:not(.admin-dashboard-grid--ops) .admin-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}
.admin-dashboard .kpi-tile-ext-title { overflow-wrap: break-word; }

/* Touch: the eye toggles were 26px. */
@media (max-width: 720px) {
    /* Controls: period + refresh, then the two dates, then the two filters —
       an even grid instead of pills of four different widths. */
    .admin-dashboard .admin-dashboard-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .admin-dashboard .admin-dashboard-controls > .merchant-segmented { grid-column: 1; grid-row: 1; justify-self: start; }
    .admin-dashboard .admin-dashboard-controls > .admin-dashboard-refresh {
        grid-column: 2; grid-row: 1; justify-self: end;
        min-height: 40px;
    }
    .admin-dashboard .dash-date-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .admin-dashboard .dash-date-row .date-picker-trigger { width: 100%; min-height: 40px; }
    .admin-dashboard .admin-dashboard-controls > .pro-geo-dropdown,
    .admin-dashboard .admin-dashboard-controls .pro-geo-btn { width: 100%; min-width: 0; min-height: 40px; }
    .admin-dashboard .admin-dashboard-controls .pro-geo-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .admin-dashboard .admin-dashboard-controls .pro-geo-chevron { margin-left: auto; }

    /* KPI tiles two per row (they were one tall column of thirteen); the icon
       chip gives way so the title keeps the width. */
    .admin-dashboard .admin-kpi-grid,
    .admin-dashboard .admin-dashboard-grid--ops .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .admin-dashboard .kpi-tile-ext { padding: 12px; min-height: 0; gap: 6px; }
    .admin-dashboard .kpi-tile-ext:hover { transform: none; }
    /* The sign already says the direction; without the arrow "+57,073.53 (+411.54 %)"
       fits a half-width tile on one line. */
    .admin-dashboard .admin-chart-card { padding: 14px 14px 10px; }
    }
@media (max-width: 340px) {
    .admin-dashboard .admin-kpi-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   RESPONSIVE — users, partners and catalog pages
   ============================================================ */

/* ---- Users hub + traders registry ---------------------------------------- */
/* The tab strip scrolls sideways on phones; end padding keeps the last tab
   from being cut flush at the screen edge. */
@media (max-width: 720px) {
    .usr-tab { padding: 12px 12px; }
}
/* A caller who may open no tab (Lead without ViewTraders) saw a lone rule. */
table.rt--stacked .trs-traffic-cell { align-items: flex-end; }
table.rt--stacked .rq-main { white-space: normal; }
/* The card title flows as text: a long name wraps after the online dot or the
   flag instead of the whole name dropping below them, and the requisite id
   stays in one piece. */
table.rt--stacked td[data-cell="primary"] .rq-main { display: block; }
table.rt--stacked td[data-cell="primary"] .rq-main > * { vertical-align: middle; margin-right: 6px; }
table.rt--stacked td[data-cell="primary"] .trs-online { display: inline-block; }
table.rt--stacked td[data-cell="amount"] .rq-sub { font-weight: 400; }
table.rt--stacked .rq-sub { white-space: normal; max-width: none; overflow-wrap: anywhere; }
table.rt--stacked td[data-cell="primary"] .rq-main { font-size: 14px; }

/* ============================================================
   Profit & loss (pnl-*) — /admin/finance/pnl + the dashboard expenses block
   Numbers are the hero: one equation on a calm card, the result over time,
   the two splits, then the ledger. Colour only for meaning: income sources
   keep their --rev-* colours, expense marks are the loss red --pnl-expense, and
   every amount follows one money-flow rule (PnlFormat.Flow): money in is
   --pnl-in with "+", money out --pnl-out with "−". Every amount carries the
   USDT mark (PnlAmount). Sheets, drawer and table reuse the corrections
   recipes (tu-modal dts, rq-drawer, rq-table); only the rest lives here.
   ============================================================ */

/* Money-flow text: the status tokens, the light green taken a step darker so it
   holds 4.5:1 on white as small bold text (#16A34A alone is 3.3:1). */
:root { --pnl-in: var(--color-success); --pnl-out: var(--color-danger); }
html[data-theme="light"] { --pnl-in: color-mix(in srgb, var(--color-success) 80%, black); }

/* W1 → settlement threshold (ThresholdBar, the registry's "threshold reached" row):
   green while it fills, amber from 80 %, a vivid orange at the target — kept apart
   from the red of errors and disputes. The -ink tones are the text cuts (4.5:1 on
   white in the light theme). */
:root {
    --thr-calm: var(--pnl-in);
    --thr-warm: var(--color-warning);
    --thr-warm-ink: var(--color-warning);
    --thr-hit: #FF7A1A;
    --thr-hit-ink: #FF9448;
    --thr-track: rgba(255, 255, 255, 0.08);
    --thr-notch: rgba(10, 12, 16, 0.75);
    --thr-row: rgba(255, 122, 26, 0.11);
    --thr-row-edge: rgba(255, 122, 26, 0.30);
    --thr-row-hover: rgba(255, 122, 26, 0.17);
}
html[data-theme="light"] {
    --thr-warm-ink: #B45309;
    --thr-hit: #F2600C;
    --thr-hit-ink: #C2410C;
    --thr-track: #E2E8F0;
    --thr-notch: #FFFFFF;
    --thr-row: #FFF3EA;
    --thr-row-edge: #FFDCC2;
    --thr-row-hover: #FFE9D8;
}
/* Automatic settlement on (the registry row, the merchant page's status line): a teal
   kept apart from the orange of "due", the green of money in and the accent. The stripe
   says the mode; the tint says "due" — a due auto row keeps the warm tint under a teal
   stripe. The -ink tone is the text cut (4.5:1 on white in the light theme). */
:root {
    --auto-hit: #2DD4BF;
    --auto-ink: #5EEAD4;
    --auto-row: rgba(45, 212, 191, 0.09);
    --auto-row-edge: rgba(45, 212, 191, 0.26);
    --auto-row-hover: rgba(45, 212, 191, 0.15);
}
html[data-theme="light"] {
    --auto-hit: #0D9488;
    --auto-ink: #0F766E;
    --auto-row: #ECFDF9;
    --auto-row-edge: #C7F2E8;
    --auto-row-hover: #DDF8F1;
}
/* Atlas label (a trader the platform runs under its own label): the brand itself —
   the lime accent on dark, the indigo on light — as a stripe down the row and a faint
   wash of it, plus the Atlas mark by the name (AtlasMark). Flat, no gradient: it is an
   identity, not an alert, so it stays quieter than "due" and "auto". The -ink tone is
   the text cut (4.5:1 on white in the light theme). The income chart colour is a
   separate token (--rev-atlas, merchant.css): the accents are taken by the trader pool. */
:root {
    --atlas-hit: #8FFF00;
    --atlas-ink: #B4F25A;
    --atlas-row: rgba(143, 255, 0, 0.055);
    --atlas-row-hover: rgba(143, 255, 0, 0.10);
    --atlas-line: rgba(143, 255, 0, 0.28);
}
html[data-theme="light"] {
    --atlas-hit: #4F46E5;
    --atlas-ink: #4338CA;
    --atlas-row: #F6F6FF;
    --atlas-row-hover: #EEEEFE;
    --atlas-line: #C7C6F7;
}
.atlas-mark {
    width: var(--atlas-mark-size, 16px);
    height: var(--atlas-mark-size, 16px);
    flex: none;
    color: var(--color-text-primary);
    vertical-align: -0.2em;
}
.atlas-mark-core { fill: var(--atlas-hit); }

/* "Atlas label" written out beside the mark: the brand ink, plain weight, no box. */
.pnl-flow { white-space: nowrap; }
.pnl-flow.pnl-in { color: var(--pnl-in); }
.pnl-flow.pnl-out { color: var(--pnl-out); }
/* The approximation sign on a figure converted at today's rate (merchant display currency). */
.pnl-approx { color: var(--color-text-muted); font-weight: 500; }
/* Hero figures: the mark stays a quiet unit, not a second headline. */
.pnl-page { display: flex; flex-direction: column; gap: var(--space-4); }
/* Cards: flat, bordered, no lift — this page is read, not played with. */
.pnl-page .card.pnl-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: visible;
}
.pnl-page .card.pnl-card:hover { transform: none; box-shadow: none; }
.pnl-card { padding: 18px 20px 16px; min-width: 0; }
.pnl-card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-3);
}
.pnl-card-title { margin: 0; font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); }
.pnl-card-total { font-size: var(--font-md); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.pnl-card-note { font-size: var(--font-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pnl-swatch { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2px; }

/* ---- 2. Result over time (PnlChart) ---- */
.pnl-chart {
    display: grid;
    grid-template-columns: var(--pnl-chart-gutter) minmax(0, 1fr);
    grid-template-rows: var(--pnl-chart-h, 240px) auto;
    column-gap: var(--space-2);
}
.pnl-chart-yaxis { position: relative; grid-row: 1; grid-column: 1; }
.pnl-chart-ytick {
    position: absolute; right: 0; transform: translateY(50%);
    font-size: 10.5px; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pnl-chart-plot { position: relative; grid-row: 1; grid-column: 2; outline: none; border-radius: 4px; }
.pnl-chart-plot:focus-visible { box-shadow: 0 0 0 2px var(--color-accent); }
.pnl-chart-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--color-border); }
.pnl-chart-grid.is-zero { border-top: 1px solid var(--color-border-strong); }
.pnl-chart-cols { position: absolute; inset: 0; display: flex; }
.pnl-chart-slot { position: relative; flex: 1 1 0; min-width: 0; height: 100%; }
.pnl-chart-slot::before {
    content: ""; position: absolute; inset: 0 1px; border-radius: 6px;
    background: transparent; transition: background var(--transition-md);
}
.pnl-chart-slot.is-active::before { background: color-mix(in srgb, var(--color-text-primary) 5%, transparent); }
.pnl-chart-seg {
    position: absolute; left: 0; right: 0; margin: 0 auto;
    width: 60%; min-width: 2px; max-width: 22px;
    transform-origin: bottom;
    transition: opacity var(--transition-md);
    animation: revColIn 520ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.pnl-chart-seg.is-cap { border-radius: 4px 4px 0 0; }
.pnl-chart-seg.is-cap-down { border-radius: 0 0 4px 4px; transform-origin: top; }
.pnl-chart-slot.is-dim .pnl-chart-seg { opacity: 0.38; }
.pnl-chart-net {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
}
.pnl-chart-net polyline {
    fill: none; stroke: var(--color-text-primary); stroke-width: 2;
    stroke-linejoin: round; stroke-linecap: round;
    vector-effect: non-scaling-stroke; opacity: .85;
}
.pnl-chart-dots { position: absolute; inset: 0; pointer-events: none; }
.pnl-chart-dot {
    position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-text-primary);
    box-shadow: 0 0 0 2px var(--color-bg-surface);
    transform: translate(-50%, 50%);
    transition: width var(--transition), height var(--transition);
}
.pnl-chart-dot.is-active { width: 10px; height: 10px; }
.pnl-chart-net-label {
    position: absolute; transform: translateX(50%);
    font-size: 10.5px; font-weight: 700; color: var(--color-text-secondary);
    white-space: nowrap;
}
.pnl-chart-xaxis { position: relative; grid-row: 2; grid-column: 2; height: 24px; }
.pnl-chart-xtick {
    position: absolute; top: 7px; transform: translateX(-50%);
    font-size: 10.5px; color: var(--color-text-muted); white-space: nowrap;
}
.pnl-chart-xtick.is-end { transform: translateX(-100%); }
.pnl-chart-xtick.is-start { transform: none; }
.pnl-chart-tip {
    position: absolute; top: 6px; z-index: 3; min-width: 200px;
    padding: 10px 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-dropdown);
    pointer-events: none; font-size: 12px;
    animation: kpiTileIn 160ms ease-out both;
}
.pnl-chart-tip-title {
    font-weight: 700; color: var(--color-text-primary);
    padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--color-border);
}
.pnl-chart-tip-row {
    display: grid; grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center; column-gap: 8px; padding: 2px 0;
}
.pnl-chart-tip-dot { width: 8px; height: 8px; border-radius: 2px; }
.pnl-chart-tip-label { color: var(--color-text-secondary); white-space: nowrap; }
.pnl-chart-tip-val { color: var(--color-text-primary); font-variant-numeric: tabular-nums; text-align: right; }
.pnl-chart-tip-sub { margin: 2px 0 4px; }
.pnl-chart-tip-sub .pnl-chart-tip-val { color: var(--color-text-secondary); }
.pnl-chart-tip-total {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border);
    font-weight: 700;
}
.pnl-chart-tip-total .pnl-chart-tip-label { color: var(--color-text-primary); }
/* The P&L tooltip's Income and Expenses totals read like Net, with room before the next group. */
.pnl-chart-tip-total.pnl-chart-tip-subtotal { margin-bottom: 8px; }
/* Net is the answer the tooltip gives: a size up from the totals above it. */
.pnl-chart-tip-total.pnl-chart-tip-net { margin-top: 8px; padding-top: 8px; font-size: 15px; }
.pnl-chart-empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 160px; font-size: 13px; color: var(--color-text-muted);
}
/* The share strip (DivergingChart Strip): a row of cells between the plot and the
   dates, one per column, tinted towards --pnl-chart-strip-ink by what is missing
   to 100 and printing the share while a cell is wide enough (~22px). Each density
   class drops the numbers below the strip width its column count needs. */
.pnl-chart.has-strip { grid-template-rows: var(--pnl-chart-h, 240px) auto auto; }
.pnl-chart.has-strip .pnl-chart-xaxis { grid-row: 3; }
.pnl-chart-strip-label {
    grid-row: 2; grid-column: 1; align-self: center; justify-self: end;
    font-size: 10.5px; color: var(--color-text-muted);
}
.pnl-chart-strip {
    grid-row: 2; grid-column: 2; display: flex; margin-top: 6px;
    container: pnl-strip / inline-size;
}
.pnl-chart-strip-cell {
    flex: 1 1 0; min-width: 0; height: 22px; margin: 0 1px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    background: color-mix(in srgb, var(--pnl-chart-strip-ink, var(--pnl-out)) var(--pnl-chart-strip-a, 0%), var(--color-bg-hover));
    font-size: 10.5px; font-weight: 600; line-height: 1;
    color: var(--color-text-primary); font-variant-numeric: tabular-nums;
    overflow: hidden; white-space: nowrap;
    transition: box-shadow var(--transition);
}
.pnl-chart-strip-cell.is-none { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border); }
.pnl-chart-strip-cell.is-active { box-shadow: inset 0 0 0 1.5px var(--color-text-primary); }
html[data-theme="light"] .pnl-chart-strip-cell.is-deep { color: #fff; }
.pnl-chart-strip.is-dmax .pnl-chart-strip-val { display: none; }
@container pnl-strip (max-width: 175px) { .is-d8 .pnl-chart-strip-val { display: none; } }
@container pnl-strip (max-width: 350px) { .is-d16 .pnl-chart-strip-val { display: none; } }
@container pnl-strip (max-width: 525px) { .is-d24 .pnl-chart-strip-val { display: none; } }
@container pnl-strip (max-width: 680px) { .is-d31 .pnl-chart-strip-val { display: none; } }
@container pnl-strip (max-width: 990px) { .is-d45 .pnl-chart-strip-val { display: none; } }

/* ---- 3. Income by source | expenses by category ---- */
.pnl-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 860px) { .pnl-panes { grid-template-columns: minmax(0, 1fr); } }
.pnl-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pnl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 52px;
    grid-template-rows: auto 4px;
    align-items: baseline;
    column-gap: 14px; row-gap: 8px;
    width: calc(100% + 16px); margin: 0 -8px; padding: 9px 8px 10px;
    border: 0; border-radius: var(--radius-md); background: transparent;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: background var(--transition), opacity var(--transition);
}
.pnl-row:hover { background: var(--color-bg-hover); }
.pnl-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.pnl-row.is-on { background: color-mix(in srgb, var(--pnl-expense) 14%, transparent); }
.pnl-row.is-dim { opacity: .55; }
.pnl-row.is-dim:hover { opacity: 1; }
.pnl-row-name {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    font-size: 13px; font-weight: 600; color: var(--color-text-primary);
}
.pnl-row-count, .pnl-row-delta {
    font-size: 11.5px; font-weight: 500; color: var(--color-text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pnl-row-delta.is-up { color: var(--color-success); }
.pnl-row-delta.is-down { color: var(--color-danger); }
.pnl-row-amount { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--color-text-primary); }
.pnl-row-share { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pnl-row-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--color-bg-elevated); overflow: hidden; }
.pnl-row-fill {
    display: block; height: 100%; border-radius: 2px; background: var(--pnl-expense);
    transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pnl-pane-empty { margin: 4px 0 0; font-size: 13px; color: var(--color-text-muted); }

/* ---- 4. Due this month ---- */
.pnl-due-list { list-style: none; margin: 0; padding: 0; }
.pnl-due-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: baseline; column-gap: 12px;
    padding: 7px 0; font-size: 13px;
}
.pnl-due-payee { font-weight: 600; color: var(--color-text-primary); }
.pnl-due-meta { color: var(--color-text-muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl-due-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }

/* ---- 5. The ledger ---- */
.pnl-table-section { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.pnl-table-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.pnl-table th.pnl-num-col, .pnl-table td.pnl-num-col { text-align: right; }
.pnl-tr { cursor: pointer; }
.pnl-tr.is-selected { background: var(--color-bg-hover); }
.pnl-tr:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.pnl-tr.is-voided td { color: var(--color-text-muted); }
.pnl-tr.is-voided .rq-main { color: var(--color-text-muted); }
.pnl-td-date { color: var(--color-text-secondary); }
.pnl-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-primary); }
.pnl-amt.is-voided { color: var(--color-text-muted); text-decoration: line-through; font-weight: 600; }
.pnl-amt.is-voided .pnl-flow { color: var(--color-text-muted); }
.pnl-comment-cell {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; max-width: 420px; min-width: 160px;
    font-size: 12.5px; line-height: 1.4; color: var(--color-text-secondary);
    overflow-wrap: break-word;
}
.pnl-table.rt--stacked .pnl-comment-cell { max-width: none; min-width: 0; }
/* ---- Quiet text actions (links that do things) ---- */
.pnl-link {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: underline; text-decoration-color: var(--color-border-strong);
    text-underline-offset: 3px;
    transition: color var(--transition), text-decoration-color var(--transition);
}
.pnl-link:hover { color: var(--color-text-primary); text-decoration-color: currentColor; }
.pnl-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }
.pnl-link-start { align-self: flex-start; font-size: 13px; }

/* ---- Expense sheet ---- */
.pnl-amount { position: relative; display: flex; align-items: center; }
.pnl-amount-input { height: 58px; padding: 0 72px; font-size: 26px; }
.pnl-amount-unit {
    position: absolute; right: 20px; pointer-events: none;
    display: flex; font-size: 22px; color: var(--color-text-muted);
}
.pnl-amount-unit .usdt-mark { margin-left: 0; }
.pnl-amount-sign {
    position: absolute; left: 20px; pointer-events: none;
    font-size: 26px; font-weight: 700; color: var(--color-success);
}
.pnl-amount.is-recovery .pnl-amount-input { color: var(--color-success); }
.pnl-amount.is-locked .pnl-amount-input { opacity: 1; cursor: not-allowed; color: var(--color-text-secondary); }
.pnl-amount-links { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: 2px; }
.pnl-amount-group { gap: 8px; }
.pnl-sheet-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnl-orig-row { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: var(--space-2); }
.pnl-orig-cur .pro-geo-btn { width: 100%; height: 40px; justify-content: space-between; }
.pnl-rate { font-variant-numeric: tabular-nums; }
.pnl-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pnl-cat {
    padding: 9px 12px; text-align: left;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg-overlay); color: var(--color-text-secondary);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.pnl-cat:hover:not(:disabled) { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.pnl-cat.is-on { color: var(--color-text-primary); border-color: var(--color-accent); background: var(--color-accent-dim); }
.pnl-cat:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pnl-cat:disabled { opacity: .4; cursor: default; }
.pnl-sheet-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: var(--space-3); align-items: start; }
.pnl-sheet-row > .form-group { margin-bottom: 0; }
.pnl-date .date-picker, .pnl-date .date-picker-trigger { width: 100%; }
.pnl-date .date-picker-trigger { height: 40px; }
.pnl-suggest {
    list-style: none; margin: 4px 0 0; padding: 4px;
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
}
.pnl-suggest-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-sm);
    background: none; font: inherit; font-size: 13px; text-align: left;
    color: var(--color-text-primary); cursor: pointer;
}
.pnl-suggest-row:hover, .pnl-suggest-row.is-active { background: var(--color-bg-hover); }
.pnl-suggest-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pnl-suggest-meta { flex: none; font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pnl-corr-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.pnl-corr {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg-overlay);
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--transition);
}
button.pnl-corr:hover { border-color: var(--color-border-strong); }
.pnl-corr.is-linked { cursor: default; border-color: var(--color-border-strong); }
.pnl-corr > .rq-cell { flex: 1; min-width: 0; }
.pnl-corr .rq-sub { max-width: none; }
.pnl-corr-amt { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.pnl-optional { font-weight: 500; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; }
.pnl-monthly { align-self: flex-start; margin-left: -10px; }

/* ---- Income source sheet ---- */
.gm-title .pnl-swatch { margin-right: 10px; vertical-align: 2px; }
/* ---- Responsive ---- */
@media (max-width: 720px) {
    /* The equation stacks: each term a row, its own label already says what it is,
       so the − and = between rows are dropped rather than sitting alone on a line. */
    .pnl-card { padding: 14px 14px 12px; }
    .pnl-chart { grid-template-columns: 36px minmax(0, 1fr); }
    .pnl-chart-tip { min-width: 180px; }
    .pnl-chart-xtick.is-minor { display: none; }
    .pnl-due-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
    .pnl-due-meta { grid-column: 1; grid-row: 2; }
    .pnl-due-amount { grid-column: 2; grid-row: 1; }
    .pnl-due-row .pnl-link { grid-column: 2; grid-row: 2; justify-self: end; }
    .pnl-sheet-row { grid-template-columns: minmax(0, 1fr); }
    .pnl-amount-input { font-size: 24px; }
}
@media (max-width: 400px) {
    .pnl-cats { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
   Routing map — the routing page's default canvas (Components/Admin/Routing).
   Merchants are planets, the places their traffic lands are moons. The camera
   (pan / zoom / fly) is js/routing-map.js; everything that moves on a focus
   change is a CSS transition on transform, so the moons glide out instead of
   jumping. Geometry comes from the markup as custom properties (--tx, --ty,
   --rot, --x, --sx, --a, --b, --delay, --fs, --grow).

   Colours: the design-system tokens only (css/ds/tokens.css), so the canvas
   reads in both themes without a theme block. The --rm-* names below are the
   canvas's own vocabulary, each one a kit token:
     pool (traders taking traffic)  --ds-chart-1   series 1, the headline
     cascade                        --ds-chart-2   series 2
     auto-confirm requisite online  --ds-chart-in  "done / in"
     traffic off, device offline    --warning
     banned, dry merchant, lost     --error
     chrome                         --surface*, --hairline*, --text*
   ========================================================================== */

.rm {
    --rm-bg: var(--ground);
    --rm-dot: color-mix(in srgb, var(--hairline), var(--hairline-strong) 35%);
    --rm-orbit: var(--hairline);
    --rm-line: var(--hairline-strong);
    --rm-panel: color-mix(in srgb, var(--surface) 88%, transparent);
    --rm-pool: var(--ds-chart-1);
    --rm-cascade: var(--ds-chart-2);
    --rm-ok: var(--ds-chart-in);
    --rm-warn: var(--warning);
    --rm-bad: var(--error);
    --rm-quiet: var(--text-2);
    --rm-tile: color-mix(in srgb, var(--qr-plate) 90%, var(--ground));
    --rm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rm[hidden] { display: none; }

.rm-canvas {
    position: relative;
    height: max(560px, calc(100dvh - 230px));
    border: 1px solid var(--hairline);
    border-radius: var(--ds-r-card);
    overflow: hidden;
    background-color: var(--rm-bg);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.rm-canvas.is-panning { cursor: grabbing; }
/* Mid-flight the world takes no pointer events: moons sweeping under a still cursor
   would otherwise fire hover renders while the camera moves. */
.rm-canvas.is-flying .rm-svg { pointer-events: none; }

/* The dot grid and the drawing are separate GPU layers: the camera slides and scales
   them with a CSS transform while it moves and repaints them only once it stops
   (js/routing-map.js, preview / commit). The grid is three canvases wide around the
   canvas so it still covers it while shrunk; its transform origin is the canvas corner. */
.rm-grid {
    position: absolute; left: -100%; top: -100%; width: 300%; height: 300%;
    background-image: radial-gradient(circle, var(--rm-dot) 1px, transparent 1.3px);
    background-size: 22px 22px;
    transform-origin: 33.3333% 33.3333%;
    will-change: transform;
    pointer-events: none;
}
.rm-svg {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible;
    transform-origin: 0 0;
    will-change: transform;
}

/* ── systems ─────────────────────────────────────────────────────────────── */

.rm-sys { transition: opacity 400ms ease; }
/* Idle (nothing in the last hour, nothing waiting): the planet and its spokes recede. */
.rm-sys.is-idle .rm-core-disc, .rm-sys.is-idle image, .rm-sys.is-idle .rm-ring,
.rm-sys.is-idle .rm-edge, .rm-sys.is-idle .rm-moon-body { opacity: 0.5; }
.rm-sys.is-idle.is-focus .rm-core-disc, .rm-sys.is-idle.is-focus image, .rm-sys.is-idle.is-focus .rm-ring,
.rm-sys.is-idle.is-focus .rm-edge, .rm-sys.is-idle.is-focus .rm-moon-body { opacity: 1; }
.rm-canvas.is-focusing .rm-sys:not(.is-focus) { opacity: 0.12; }
.rm-canvas.is-focusing .rm-sys:not(.is-focus):hover { opacity: 0.4; }

.rm-orbit {
    fill: none;
    stroke: var(--rm-orbit);
    stroke-width: 1;
    stroke-dasharray: 2 6;
    transition: r 600ms var(--rm-ease);
}

.rm-ring-track { fill: none; stroke: var(--rm-orbit); stroke-width: 4; }
.rm-ring {
    fill: none;
    stroke-width: 4;
    transition: stroke-dasharray 500ms var(--rm-ease), stroke-dashoffset 500ms var(--rm-ease);
}
.rm-ring.is-pool { stroke: var(--rm-pool); }
.rm-ring.is-cascade { stroke: var(--rm-cascade); }

.rm-core { cursor: pointer; outline: none; }
.rm-core-halo { fill: var(--accent-tint); opacity: 0; transition: opacity 200ms ease; }
.rm-core:hover .rm-core-halo,
.rm-core:focus-visible .rm-core-halo,
.rm-sys.is-focus .rm-core-halo { opacity: 1; }
.rm-core:focus-visible .rm-core-disc { stroke: var(--focus-ring); stroke-width: 2; }

.rm-core-disc { stroke: var(--hairline-strong); stroke-width: 1; }
.rm-core-disc.has-logo { fill: var(--rm-tile); }
.rm-core-disc.is-initials { fill: var(--surface-raised); }
.rm-core-initials { fill: var(--text-2); font-size: var(--fs, 18px); font-weight: 700; pointer-events: none; }
.rm-sys.is-dry .rm-core-disc { stroke: var(--rm-bad); stroke-width: 2; }

.rm-lost circle { fill: var(--rm-bad); stroke: var(--rm-bg); stroke-width: 2; }
.rm-lost text { fill: var(--rm-bg); font-size: 9px; font-weight: 700; }

.rm-name {
    transform: translateY(var(--ty, 0));
    transition: transform 600ms var(--rm-ease), opacity 250ms ease;
    pointer-events: none;
}
/* Focused, the inspector carries the name; under the core it would sit on the spokes. */
.rm-sys.is-focus .rm-name { opacity: 0; }
.rm-name text { paint-order: stroke; stroke: var(--rm-bg); stroke-width: 4px; stroke-linejoin: round; }
.rm-name-main { fill: var(--text); font-size: 14px; font-weight: 600; }
.rm-name-sub { fill: var(--text-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rm-sys.is-dry .rm-name-sub { fill: var(--rm-bad); }

.rm-more { fill: var(--text-2); font-size: 11px; font-weight: 600; transition: opacity 300ms ease; }
.rm-sys.is-focus .rm-more { opacity: 0; }

/* ── edges + flow ────────────────────────────────────────────────────────── */

.rm-edge, .rm-edge line, .rm-moon { transform-box: view-box; transform-origin: 0 0; }
.rm-edge {
    transform: rotate(var(--rot, 0deg));
    transition: opacity 300ms ease;
    pointer-events: none;
}
.rm-edge line {
    stroke: var(--rm-line);
    stroke-linecap: round;
    transform: translateX(var(--x, 0)) scaleX(var(--sx, 1));
    transition: transform 600ms var(--rm-ease), stroke-width 500ms var(--rm-ease), stroke 200ms ease;
}
.rm-edge.is-live line { stroke: color-mix(in srgb, var(--rm-pool) 60%, transparent); }
.rm-edge.is-cascade line { stroke: color-mix(in srgb, var(--rm-cascade) 65%, transparent); }
.rm-edge.is-hl line { stroke: var(--text); }

.rm-dot {
    fill: var(--rm-pool);
    opacity: 0;
    animation: rm-flow 2.4s linear infinite;
    animation-delay: var(--delay, 0s);
}
.rm-edge.is-cascade .rm-dot { fill: var(--rm-cascade); }
/* A running dot repaints the drawing every frame, which would turn the camera's free
   GPU slide back into a full repaint per frame. They hold still while the camera moves. */
.rm-canvas.is-moving .rm-dot, .rm-canvas.is-flying .rm-dot { animation-play-state: paused; }
@keyframes rm-flow {
    0%   { transform: translateX(var(--a)); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(var(--b)); opacity: 0; }
}

/* ── moons ───────────────────────────────────────────────────────────────── */

.rm-moon {
    cursor: pointer;
    transform: translate(var(--tx, 0), var(--ty, 0));
    transition: transform 600ms var(--rm-ease), opacity 300ms ease;
}
.rm-moon-hit { fill: transparent; }
.rm-moon-body { stroke-width: 1.5; transition: transform 200ms ease; }
/* Traders: the ring is the state, the avatar sits inside it. */
.rm-moon:not(.is-cascade):not(.is-skipped) .rm-moon-body { stroke-width: 2.5; }
.rm-moon.is-live .rm-moon-body { fill: var(--rm-pool); stroke: var(--rm-pool); }
.rm-moon.is-standby .rm-moon-body { fill: var(--rm-bg); stroke: color-mix(in srgb, var(--rm-pool) 70%, transparent); stroke-dasharray: 3 2; }
.rm-moon.is-off .rm-moon-body,
.rm-moon.is-nobalance .rm-moon-body { fill: var(--rm-bg); stroke: var(--rm-warn); }
.rm-moon.is-empty .rm-moon-body { fill: var(--rm-bg); stroke: var(--rm-quiet); }
.rm-moon.is-banned .rm-moon-body { fill: var(--rm-bg); stroke: var(--rm-bad); }
.rm-moon.is-cascade .rm-moon-body { fill: var(--rm-cascade); stroke: var(--rm-bg); }
.rm-moon.is-skipped .rm-moon-body { fill: var(--rm-bg); stroke: var(--rm-quiet); stroke-dasharray: 2 2; }
.rm-moon.is-hl .rm-moon-body,
.rm-moon.is-picked .rm-moon-body { stroke: var(--text); stroke-width: 3; }
.rm-moon.is-hl .rm-avatar, .rm-moon.is-picked .rm-avatar { filter: none; opacity: 1; }

/* ── requisites: the third level ─────────────────────────────────────────── */

.rm-branch line { stroke: color-mix(in srgb, var(--text-2) 50%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.rm-branch.is-auto line { stroke: color-mix(in srgb, var(--rm-ok) 60%, transparent); }
.rm-branch.is-autooff line { stroke: color-mix(in srgb, var(--rm-warn) 60%, transparent); }
.rm-branch, .rm-leaf { animation: rm-leaf-in 360ms 380ms var(--rm-ease) backwards; }
@keyframes rm-leaf-in { from { opacity: 0; } }
.rm-leaf { cursor: pointer; }
.rm-leaf-hit { fill: transparent; }
.rm-leaf rect { stroke-width: 1.5; transition: transform 150ms ease; transform-box: fill-box; transform-origin: center; }
.rm-leaf.is-auto rect { fill: var(--rm-ok); stroke: var(--rm-bg); }
.rm-leaf.is-autooff rect { fill: var(--rm-bg); stroke: var(--rm-warn); }
.rm-leaf.is-manual rect { fill: var(--rm-quiet); stroke: var(--rm-bg); }
.rm-leaf.has-open rect { stroke: var(--text); stroke-width: 2; }
.rm-leaf:hover rect, .rm-leaf.is-hl rect { transform: scale(1.35); }

.rm-moon-label { opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
.rm-moon-body, .rm-avatar, .rm-moon-hit { transition: r 600ms var(--rm-ease), x 600ms var(--rm-ease), y 600ms var(--rm-ease),
    width 600ms var(--rm-ease), height 600ms var(--rm-ease), filter 200ms ease, opacity 200ms ease; }
.rm-avatar { pointer-events: none; overflow: visible; }
/* A trader who takes no traffic keeps their face, in grey. */
.rm-moon.is-off .rm-avatar, .rm-moon.is-nobalance .rm-avatar,
.rm-moon.is-empty .rm-avatar, .rm-moon.is-banned .rm-avatar { filter: grayscale(1); opacity: 0.55; }
.rm-moon.is-standby .rm-avatar { opacity: 0.75; }
.rm-moon-label text { paint-order: stroke; stroke: var(--rm-bg); stroke-width: 4px; stroke-linejoin: round; }
.rm-moon-name { fill: var(--text); font-size: 12px; font-weight: 600; }
.rm-moon-sub { fill: var(--text-2); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.rm-sys.is-focus .rm-moon-label,
.rm-moon.is-hl .rm-moon-label { opacity: 1; }
.rm-sys.is-focus .rm-moon-label { transition-delay: 220ms; }


/* ── overlays: toolbar, dock, hint, hover readout ────────────────────────── */

.rm-toolbar, .rm-dock, .rm-hint, .rm-hud, .rm-insp { cursor: default; }

.rm-toolbar {
    position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3;
    display: flex; align-items: center; gap: 16px;
    pointer-events: none;
}
.rm-toolbar > * { pointer-events: auto; }

.rm-geos {
    display: inline-flex; gap: 2px; padding: 4px;
    background: var(--rm-panel); border: 1px solid var(--hairline);
    border-radius: var(--ds-r-field);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.rm-geo {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-2);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.rm-geo img { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--flag-ring); }
.rm-geo:hover { color: var(--text); background: var(--surface-hover); }
.rm-geo.is-on { color: var(--text); background: var(--segment-on); box-shadow: 0 0 0 1px var(--hairline); }
.rm-geo-n { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }

.rm-totals { margin: 0; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rm-totals.is-error { color: var(--warning); }
.rm-toolbar-end { margin-left: auto; }

.rm-dock {
    position: absolute; left: 14px; bottom: 14px; z-index: 3;
    display: flex; align-items: center; gap: 16px;
}
.rm-zoom {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    background: var(--rm-panel); border: 1px solid var(--hairline); border-radius: var(--ds-r-field);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.rm-zoom [data-rm-zoom] {
    min-width: 46px; text-align: center; font-size: 12px; font-weight: 600;
    color: var(--text-2); font-variant-numeric: tabular-nums;
}

.rm-legend {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none;
    font-size: 12px; color: var(--text-2);
}
.rm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rm-legend svg { width: 12px; height: 12px; overflow: visible; }
.rm-legend li:last-child svg { width: 20px; }
.rm-legend .lg-live { fill: var(--rm-pool); }
.rm-legend .lg-standby { fill: none; stroke: var(--rm-pool); stroke-width: 1.4; stroke-dasharray: 2 2; }
.rm-legend .lg-off { fill: none; stroke: var(--rm-warn); stroke-width: 1.4; }
.rm-legend .lg-cascade { fill: var(--rm-cascade); }
.rm-legend .lg-edge { stroke: color-mix(in srgb, var(--rm-pool) 60%, transparent); stroke-width: 2; }
.rm-legend .lg-dot { fill: var(--rm-pool); }
.rm-legend .lg-req { fill: var(--rm-ok); }

.rm-hint {
    position: absolute; right: 18px; bottom: 22px; z-index: 2;
    margin: 0; font-size: 12px; color: var(--text-2); white-space: nowrap; pointer-events: none;
}
@media (max-width: 1400px) { .rm-hint { display: none; } }

.rm-hud {
    position: absolute; right: 14px; bottom: 14px; z-index: 3;
    min-width: 230px; max-width: 300px; padding: 12px 14px;
    background: var(--popover); border: 1px solid var(--hairline-strong); border-radius: var(--ds-r-field);
    box-shadow: var(--shadow-popover);
    pointer-events: none;
    animation: rm-fade 140ms ease;
}
.rm-hud.is-shifted { right: 410px; }
.rm-hud-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.rm-hud-line { margin-top: 4px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rm-hud-dot, .rm-row-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rm-quiet); }
.rm-hud-dot.is-live, .rm-row-dot.is-live { background: var(--rm-pool); }
.rm-hud-dot.is-cascade, .rm-row-dot.is-cascade { background: var(--rm-cascade); border-radius: 2px; transform: rotate(45deg); }
.rm-hud-dot.is-off, .rm-row-dot.is-off,
.rm-hud-dot.is-nobalance, .rm-row-dot.is-nobalance { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rm-warn); }
.rm-hud-dot.is-standby, .rm-row-dot.is-standby { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rm-pool); }
.rm-hud-dot.is-banned, .rm-row-dot.is-banned { background: var(--rm-bad); }
.rm-hud-dot.is-empty, .rm-row-dot.is-empty,
.rm-hud-dot.is-skipped, .rm-row-dot.is-skipped { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rm-quiet); }

/* ── empty / loading / error ─────────────────────────────────────────────── */

.rm-empty {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    pointer-events: none;
}
.rm-empty > * { pointer-events: auto; }
.rm-empty .ds-error, .rm-empty .ds-empty { max-width: 380px; }
.rm-empty[aria-busy="true"] { flex-direction: row; gap: 72px; }
.rm-skel {
    width: 76px; height: 76px; border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    background: var(--wash-1);
    animation: rm-breathe 1.6s ease-in-out infinite;
}
.rm-skel:nth-child(3) { animation-delay: 0.2s; width: 96px; height: 96px; }
.rm-skel:nth-child(4) { animation-delay: 0.4s; }
@keyframes rm-breathe { 50% { opacity: 0.35; transform: scale(0.94); } }
@keyframes rm-fade { from { opacity: 0; transform: translateY(4px); } }

/* ── inspector: a kit surface over the canvas ────────────────────────────── */

.rm-insp {
    position: absolute; top: 12px; right: 12px; bottom: 12px; z-index: 4;
    width: 384px; display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline-strong); border-radius: var(--ds-r-card);
    box-shadow: var(--shadow-popover);
    animation: rm-slide 320ms var(--rm-ease);
    user-select: text; -webkit-user-select: text;
    overflow: hidden;
}
@keyframes rm-slide { from { opacity: 0; transform: translateX(24px); } }

.rm-insp-head, .rm-stats, .rm-insp-alert, .rm-insp-foot, .rm-insp-nudge { flex: none; }
.rm-insp-head {
    display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
    padding: 16px 16px 12px;
}
.rm-insp-id { min-width: 0; }
.rm-insp-id h2 {
    margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-insp-id p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }

.rm-insp .rm-stats { margin: 0 16px; padding: 12px 14px; border-radius: var(--ds-r-panel); background: var(--wash-2); }
.ds .rm-insp .rm-stats.ds-dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
@media (max-width: 420px) { .ds .rm-insp .rm-stats.ds-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rm-insp .rm-insp-alert { margin: 12px 16px 0; }
.rm-insp .rm-insp-nudge { margin: 0 16px 8px; animation: rm-nudge 360ms ease; }
@keyframes rm-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.rm-insp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 8px; }

.rm-split { display: flex; gap: 2px; height: 8px; margin-bottom: 16px; border-radius: 4px; overflow: hidden; background: var(--ds-chart-track); }
.rm-split span { flex-grow: var(--grow, 1); min-width: 2px; transition: flex-grow 500ms var(--rm-ease); background: var(--rm-quiet); }
.rm-split .is-live { background: var(--rm-pool); }
.rm-split .is-cascade { background: var(--rm-cascade); }

.rm-group + .rm-group { margin-top: 18px; }
.rm-group-head { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.rm-group-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.rm-group-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.rm-group-note.is-warn { color: var(--warning); }
.rm-row-weight { display: inline-flex; align-items: center; gap: 2px; }

.rm-rows { margin: 8px 0 0; padding: 0; list-style: none; }
.rm-row {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
    padding: 7px 8px; margin: 0 -8px; border-radius: var(--ds-r-row);
    transition: background 120ms ease;
}
.rm-row:hover { background: var(--surface-hover); }
.rm-row.is-picked { background: var(--wash-3); }
.rm-row.is-expandable { cursor: pointer; }
.rm-row .rm-row-av { box-shadow: 0 0 0 2px var(--rm-pool); }
.rm-row .rm-row-av.is-standby { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rm-pool) 45%, transparent); }
.rm-row .rm-row-av.is-off, .rm-row .rm-row-av.is-nobalance { box-shadow: 0 0 0 2px var(--rm-warn); filter: grayscale(1); opacity: 0.7; }
.rm-row .rm-row-av.is-empty, .rm-row .rm-row-av.is-banned { box-shadow: 0 0 0 2px var(--rm-quiet); filter: grayscale(1); opacity: 0.6; }
.rm-row-id { min-width: 0; display: flex; flex-direction: column; }
.rm-row-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-row:not(.is-live):not(.is-cascade) .rm-row-name { color: var(--text-2); }
.rm-row-sub { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rm-share { min-width: 44px; text-align: right; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.rm-reqs {
    list-style: none; margin: 2px 0 8px 12px; padding: 4px 0 4px 20px;
    border-left: 1px solid var(--hairline);
    display: flex; flex-direction: column; gap: 2px;
    animation: rm-fade 180ms ease;
}
.rm-reqs-note { font-size: 12.5px; color: var(--text-2); padding: 6px 0; }
.rm-req {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
    padding: 7px 8px; margin: 0 -8px; border-radius: var(--ds-r-row); transition: background 120ms ease;
}
.rm-req:hover, .rm-req.is-hl { background: var(--surface-hover); }
.rm-req-mark { width: 9px; height: 9px; margin-top: 4px; border-radius: 3px; background: var(--rm-quiet); }
.rm-req.is-auto .rm-req-mark { background: var(--rm-ok); }
.rm-req.is-autooff .rm-req-mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rm-warn); }
.rm-req-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rm-req-title { font-size: 13px; font-weight: 600; color: var(--text); }
.rm-req-title .rm-req-id { margin-left: 4px; font-size: 12px; font-weight: 500; }
.rm-req-ident { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-req-sub { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rm-req.is-autooff .rm-req-sub { color: var(--warning); }
.rm-req-open {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wash-3); color: var(--text);
    font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rm-reqs .rm-reqs-all { align-self: flex-start; margin-top: 4px; }

.rm-insp-foot { padding: 12px 16px 16px; border-top: 1px solid var(--hairline); }
.rm-insp-scope { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.rm-insp-save, .rm-insp-links { display: flex; gap: 8px; }
.rm-insp-save > *, .rm-insp-links > * { flex: 1 1 0; }

/* ── small screens: the inspector becomes a sheet ────────────────────────── */

@media (max-width: 900px) {
    .rm-totals, .rm-legend, .rm-hint, .rm-hud { display: none; }
    .rm-insp { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 64%; }
}
@media (max-width: 560px) {
    .rm-canvas { height: max(440px, calc(100dvh - 290px)); border-radius: var(--ds-r-panel); }
    .rm-geo { padding: 7px 9px; }
    .rm-geo-n { display: none; }
    .rm-zoom .rm-fit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rm-dot { display: none; }
    .rm-sys, .rm-orbit, .rm-ring, .rm-edge line, .rm-moon, .rm-name, .rm-moon-label, .rm-split span,
    .rm-moon-body, .rm-avatar, .rm-moon-hit { transition: none; }
    .rm-branch, .rm-leaf, .rm-reqs { animation: none; }
    .rm-insp, .rm-hud, .rm-skel, .rm-insp-nudge { animation: none; }
}
/* ============================================================
   TRADER CABINET — Scoped polish layer
   ------------------------------------------------------------
   - Owns ONLY classes prefixed with `trd-` or descendants of
     `[data-trader-page]`. Never overrides global merchant.css
     or app.css selectors.
   - Adds per-page identity (sub-accent), entry motion, hover
     lift, modal scale-in, and a small set of trader-specific
     primitives that were previously inline-styled.
   - All animation respects `prefers-reduced-motion`.
   ============================================================ */

/* ---- Page identity --------------------------------------------------
   Each trader route sets `data-trader-page` on its root wrapper.
   That seeds `--trader-accent` so headings, hovers, focused tabs and
   accent icons get a distinct hue per page — while badges, buttons
   and the global accent (lime) remain unified.
*/
[data-trader-page="profile"]   { --trader-accent: var(--color-accent);    --trader-accent-soft: rgba(143,255,0,0.10);  --trader-accent-text: var(--color-accent); }
[data-trader-page="payments"]  { --trader-accent: #60A5FA;                --trader-accent-soft: rgba(96,165,250,0.10); --trader-accent-text: #60A5FA; }
[data-trader-page="payouts"]   { --trader-accent: #FD7557;                --trader-accent-soft: rgba(253,117,87,0.10); --trader-accent-text: #FD7557; }
[data-trader-page="cards"]     { --trader-accent: #A78BFA;                --trader-accent-soft: rgba(167,139,250,0.10); --trader-accent-text: #A78BFA; }
[data-trader-page="devices"]   { --trader-accent: #22D3EE;                --trader-accent-soft: rgba(34,211,238,0.10); --trader-accent-text: #22D3EE; }
[data-trader-page="disputes"]  { --trader-accent: #FBBF24;                --trader-accent-soft: rgba(251,191,36,0.10); --trader-accent-text: #FBBF24; }
[data-trader-page="tickets"]   { --trader-accent: #34D399;                --trader-accent-soft: rgba(52,211,153,0.10); --trader-accent-text: #34D399; }
[data-trader-page="docs"]      { --trader-accent: #818CF8;                --trader-accent-soft: rgba(129,140,248,0.10); --trader-accent-text: #818CF8; }
[data-trader-page="settings"]  { --trader-accent: #94A3B8;                --trader-accent-soft: rgba(148,163,184,0.12); --trader-accent-text: var(--color-text-primary); }

/* Light theme — keep saturated text colors readable on white */
[data-theme="light"] [data-trader-page="profile"]  { --trader-accent: #16A34A; --trader-accent-soft: #F0FDF4; --trader-accent-text: #16A34A; }
[data-theme="light"] [data-trader-page="payments"] { --trader-accent: #2563EB; --trader-accent-soft: #EFF6FF; --trader-accent-text: #2563EB; }
[data-theme="light"] [data-trader-page="payouts"]  { --trader-accent: #DC2626; --trader-accent-soft: #FEF2F2; --trader-accent-text: #DC2626; }
[data-theme="light"] [data-trader-page="cards"]    { --trader-accent: #7C3AED; --trader-accent-soft: #F5F3FF; --trader-accent-text: #7C3AED; }
[data-theme="light"] [data-trader-page="devices"]  { --trader-accent: #0891B2; --trader-accent-soft: #ECFEFF; --trader-accent-text: #0891B2; }
[data-theme="light"] [data-trader-page="disputes"] { --trader-accent: #D97706; --trader-accent-soft: #FFFBEB; --trader-accent-text: #D97706; }
[data-theme="light"] [data-trader-page="tickets"]  { --trader-accent: #0D9488; --trader-accent-soft: #F0FDFA; --trader-accent-text: #0D9488; }
[data-theme="light"] [data-trader-page="docs"]     { --trader-accent: #4F46E5; --trader-accent-soft: #EEF2FF; --trader-accent-text: #4F46E5; }
[data-theme="light"] [data-trader-page="settings"] { --trader-accent: #475569; --trader-accent-soft: #F1F5F9; --trader-accent-text: #0F172A; }

/* ---- Page header ----------------------------------------------------
   A discreet, intentional header for every trader page. The accent
   bar on the left is the only thing that varies between pages, giving
   each route a recognizable spine without making the whole page tinted.
*/
.trd-title {
    font-family: var(--font-family);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}
@media (max-width: 720px) {
    .trd-title { font-size: 19px; }
}

/* ---- Tabular numerics ----------------------------------------------- */
[data-trader-page] .pg-table td,
[data-trader-page] .trd-money,
[data-trader-page] .text-mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---- Tabs — accent-aware ------------------------------------------- */
[data-trader-page] .act-tab:not(.act-tab-active):hover { color: var(--color-text-primary); }

/* ============================================================
   MOTION — page entry + row stagger + hover lift
   ============================================================ */

@keyframes trd-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes trd-scale-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes trd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Page wrapper fades in once on mount. The .pro container already
   holds the trader page content. */
[data-trader-page] > .pg-table-wrap,
[data-trader-page] > .docs {
    animation: trd-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-trader-page] > .pg-table-wrap    { animation-delay: 180ms; }
/* The fade-up animation pins translateY(0) on each row above, which silently
   creates a stacking context. Lift the toolbar above the table so dropdown
   and date-picker popovers paint over the sticky thead. */
[data-trader-page] > .pg-table-wrap      { position: relative; z-index: 1; }
[data-trader-page] > .docs         { animation-delay: 80ms; }

/* Table-row stagger fade-up. Capped to first 12 rows so very long
   tables don't add perceptible delay. */
[data-trader-page] .pg-table tbody tr {
    animation: trd-fade-up 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(40ms + var(--row-i, 0) * 22ms);
}
[data-trader-page] .pg-table tbody tr:nth-child(1)  { --row-i: 0; }
[data-trader-page] .pg-table tbody tr:nth-child(2)  { --row-i: 1; }
[data-trader-page] .pg-table tbody tr:nth-child(3)  { --row-i: 2; }
[data-trader-page] .pg-table tbody tr:nth-child(4)  { --row-i: 3; }
[data-trader-page] .pg-table tbody tr:nth-child(5)  { --row-i: 4; }
[data-trader-page] .pg-table tbody tr:nth-child(6)  { --row-i: 5; }
[data-trader-page] .pg-table tbody tr:nth-child(7)  { --row-i: 6; }
[data-trader-page] .pg-table tbody tr:nth-child(8)  { --row-i: 7; }
[data-trader-page] .pg-table tbody tr:nth-child(9)  { --row-i: 8; }
[data-trader-page] .pg-table tbody tr:nth-child(10) { --row-i: 9; }
[data-trader-page] .pg-table tbody tr:nth-child(11) { --row-i: 10; }
[data-trader-page] .pg-table tbody tr:nth-child(12) { --row-i: 11; }
[data-trader-page] .pg-table tbody tr:nth-child(n+13) { --row-i: 12; }

/* Subtle hover-lift on table rows that are clickable */
[data-trader-page] .pg-table tbody tr {
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
[data-trader-page] .pg-table tbody tr:hover {
    background: var(--color-bg-hover);
}
[data-theme="light"] [data-trader-page] .pg-table tbody tr:hover {
    background: var(--color-bg-white-hover);
}

/* Modal scale-in (scoped to trader pages so it doesn't override
   merchant/admin modals). The sibling selector (`~`) covers trader modals
   rendered OUTSIDE the .pro wrapper as page-root siblings — see the modal
   placement in Trader/Profile.razor + Payments.razor — so they keep the
   trader entrance choreography while their position:fixed backdrop stays
   clear of the toolbar/table-wrap stacking contexts (commit 7d7f9b0). */
[data-trader-page] .modal-backdrop,
[data-trader-page] ~ .modal-backdrop {
    animation: trd-fade-in 200ms ease both;
}
[data-trader-page] .modal-backdrop > .glass-modal,
[data-trader-page] ~ .modal-backdrop > .glass-modal {
    animation: trd-scale-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Receipt viewer entry */
[data-trader-page] .receipt-viewer {
    animation: trd-scale-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Reduced motion — kill all the entry choreography */
@media (prefers-reduced-motion: reduce) {
    [data-trader-page] *,
    [data-trader-page] *::before,
    [data-trader-page] *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================
   PROFILE — balance card polish
   ============================================================ */

/* ============================================================
   EARN / MONEY cells — kill inline color/font-weight ----------- */
.trd-money { font-weight: 600; white-space: nowrap; }

/* ============================================================
   PAYOUTS — claim row affordance + proof upload chip
   ============================================================ */

/* Pulse the urgent countdown subtly to draw eye to soon-expiring
   pool items, but only on payouts page. */
@keyframes trd-pulse-urgent {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
/* ============================================================
   CARDS — list polish
   ============================================================ */

[data-trader-page="cards"] .pg-table tbody tr { cursor: pointer; }

/* ============================================================
   D2: Profile transaction table — prevent 8-col squish.
   Time, Amount, and the three running-balance columns get
   nowrap so they never break mid-value. Description is
   clamped to a max-width and truncated with ellipsis.
   ============================================================ */
[data-trader-page="profile"] .pg-table th:nth-child(1),
[data-trader-page="profile"] .pg-table td:nth-child(1) { white-space: nowrap; }   /* Time */
[data-trader-page="profile"] .pg-table th:nth-child(4),
[data-trader-page="profile"] .pg-table td:nth-child(4) { white-space: nowrap; }   /* Amount */
[data-trader-page="profile"] .pg-table th:nth-child(5),
[data-trader-page="profile"] .pg-table td:nth-child(5),
[data-trader-page="profile"] .pg-table th:nth-child(6),
[data-trader-page="profile"] .pg-table td:nth-child(6),
[data-trader-page="profile"] .pg-table th:nth-child(7),
[data-trader-page="profile"] .pg-table td:nth-child(7) { white-space: nowrap; }   /* Main / Frozen / Deposit */
[data-trader-page="profile"] .pg-table th:nth-child(8),
[data-trader-page="profile"] .pg-table td:nth-child(8) {                          /* Description */
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   COMPACT STAT STRIP — replaces heavy pg-stats rows on trader
   and cascade-trader list pages. A single horizontal pill bar
   with dividers, substantially lower visual weight than the
   large card grid.
   ============================================================ */
@keyframes trdStatStripIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}
/* ============================================================
   ALIGNMENT FIXES — narrow, safe
   ============================================================ */
/* Make 'cursor:pointer' table rows actually feel clickable on dark too */
[data-trader-page] .pg-table tbody tr[role="button"],
[data-trader-page="payments"] .pg-table tbody tr,
[data-trader-page="payouts"]  .pg-table tbody tr,
[data-trader-page="cards"]    .pg-table tbody tr,
[data-trader-page="disputes"] .pg-table tbody tr,
[data-trader-page="tickets"]  .pg-table tbody tr {
    cursor: pointer;
}

/* ============================================================
   MOBILE — tighten header + tabs
   ============================================================ */
@media (max-width: 720px) {
    [data-trader-page] .pg-table { font-size: 12px; }
    }

/* ============================================================
   PRINT — strip motion + decoration
   ============================================================ */
@media print {
    [data-trader-page] * { animation: none !important; transition: none !important; }
    }

/* ============================================================
   CREATE CARD MODAL — geo chip, section rules, rail tiles
   ============================================================ */

/* Journal rows the trader still has to do something about carry a rail, not a colour wash. */
[data-trader-page="devices"] .ev-attn > td:first-child { box-shadow: inset 2px 0 0 var(--color-danger); }
[data-trader-page="devices"] .ev-todo {
    margin-top: 4px; max-width: 260px;
    font-size: 11px; line-height: 1.4; color: var(--color-text-secondary); white-space: normal;
}

/* ============================================================
   Transaction sheet — trader pay-in / pay-out detail (tx-*)
   Skeleton: id row + context sub-line → amount hero + own earning →
   tiles (requisite / timeline / reference / receipt) → one action.
   Tiles reuse the KPI-tile recipe; fields are label-over-value with
   copy on hover; no icon headers, no rules. Bottom sheet on phones.
   ============================================================ */
.tx-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; }
.tx-amount { font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--color-text-primary); white-space: nowrap; }
.tx-amount small { font-size: 15px; font-weight: 700; letter-spacing: 0; margin-left: 6px; color: var(--color-text-muted); }
.tx-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-4); }
.tx-notice {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: var(--color-info-dim); color: var(--color-info);
    font-size: 13px; line-height: 1.45;
}
.tx-notice i { margin-top: 2px; flex: none; }
.tx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: 10px; }
.tx-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tx-field-label { font-size: 11px; color: var(--color-text-muted); line-height: 1.3; }
.tx-field-value { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--color-text-primary); }
.tx-val { overflow-wrap: anywhere; }
.tx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.tx-strong { font-weight: 700; font-size: 14px; }
.tx-muted { color: var(--color-text-muted); }
.tx-copy {
    flex: none; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--color-text-muted);
    font-size: 11px; cursor: pointer; opacity: .35;
    transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}
.tx-field:hover .tx-copy { opacity: 1; }
.tx-copy:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.tx-copy-done { opacity: 1; color: var(--color-accent); }
.tx-receipt { display: flex; align-items: center; gap: 12px; }
@media (max-width: 640px) {
    .tx-grid { grid-template-columns: 1fr; }
    .tx-amount { font-size: 26px; }
}

/* ============================================================
   RESPONSIVE — trader lists, filters, KPI strips and sheets
   responsive.css (loaded after this file) turns tables into cards when
   their frame gets narrow and owns the data-cell slots; this block makes
   the trader's cards scannable, lays the filters out on phones, and keeps
   the 1280–1512px laptop layouts from squeezing. Card rules key off
   table.rt--stacked (the table's own width), the rest off the viewport.
   ============================================================ */

/* ---- Row cards ------------------------------------------------------- */
/* Card-only lines: the time under the ID, the USDT value under the amount. */
[data-trader-page] table.rt--stacked > tbody > tr { row-gap: 12px; }
[data-trader-page] table.rt--stacked td[data-cell="primary"] { font-size: 14px; }
[data-trader-page] table.rt--stacked td[data-cell="amount"] { font-size: 17px; letter-spacing: -0.01em; }
/* Status slot: the badge, and under it whatever rides along (payer-claimed bell,
   overdue, the time left in the pay-out pool). */
[data-trader-page] table.rt--stacked td[data-cell="status"] {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
/* Generated avatars add nothing a name does not already say. */
[data-trader-page] table.rt--stacked td img[src*="api.dicebear.com"] { display: none; }
/* Row actions: one full-width, thumb-sized button (claim / upload receipt). */
[data-trader-page] table.rt--stacked td[data-cell="actions"] > .bal-btn-primary,
[data-trader-page] table.rt--stacked td[data-cell="actions"] > .d-flex > .bal-btn-primary {
    flex: 1 1 auto; justify-content: center;
    min-height: 42px; padding: 8px 16px !important; font-size: 13px !important;
}
[data-trader-page] table.rt--stacked td[data-cell="actions"] > .d-flex { width: 100%; align-items: center; }
/* Device journal: the match badge carries a "what to do" line — give it the full width. */
[data-trader-page] table.rt--stacked td[data-cell="status"]:has(.ev-todo) {
    grid-column: 1 / -1; order: -2;
    align-items: flex-start; justify-self: stretch; text-align: left !important;
}
[data-trader-page] table.rt--stacked .ev-todo { max-width: none; }
/* ---- Laptops: tables fit, cells tighten under 1440px ------------------ */
/* Card detail: the credits table lives in a 640px section at every width. */
@media (min-width: 961px) and (max-width: 1439px) {
    [data-trader-page] .pg-table:not(.rt--stacked) th,
    [data-trader-page] .pg-table:not(.rt--stacked) td { padding-left: 12px; padding-right: 12px; }
}

/* ---- Devices ------------------------------------------------------------ */
/* ---- Touch: hover-revealed controls get a real target ----------------- */
@media (pointer: coarse), (max-width: 960px) {
    .tx-copy { width: 32px; height: 32px; opacity: .7; font-size: 12px; }
    }

/* ---- Transaction sheets (pay-in / pay-out detail) --------------------- */
/* Timestamps never break mid-number; a countdown beside one drops under it. */
@media (max-width: 640px) {
    .tx-body { padding: var(--space-3) var(--space-4) var(--space-4); }
    /* Short label-over-value pairs stay two-up; only long requisites go single file. */
    .tx-grid:not(.tx-grid--1) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
    .tx-receipt { flex-wrap: wrap; }
    }

/* ---- Phones ---------------------------------------------------------- */
@media (max-width: 720px) {
    /* Bottom sheets rise instead of scaling in. */
    [data-trader-page] .modal-backdrop > .glass-modal,
    [data-trader-page] ~ .modal-backdrop > .glass-modal {
        animation: sheet-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    /* Sheet footers: equal, full-width buttons within thumb reach. */
    [data-trader-page] .modal-backdrop .gm-footer > :is(.bal-btn-primary, .bal-btn-outline),
    [data-trader-page] ~ .modal-backdrop .gm-footer > :is(.bal-btn-primary, .bal-btn-outline) {
        flex: 1 1 0; justify-content: center; min-height: 44px; white-space: nowrap;
    }
    /* Tab pills: one scrolling line instead of labels folding in two. */
    [data-trader-page] .act-tab { flex: none; white-space: nowrap; min-height: 36px; }

    }

/* ============================================================
   PAYMENT CHECKS (pc-*): tokens and primitives (package A of the redesign).
   This file holds only what every surface of the feature shares:
     the token block (the ONLY place a hex or rgba colour is allowed in the
     feature; every rule below it uses tokens or color-mix() of tokens),
     colour-scheme rules, the mono helpers, the focus ring, the page frame,
     the head, notices, text buttons, the layout and the rail, cards and the
     label/value grid, buttons and keycaps, the deadline tones, tabs, search,
     empty and error states, the shortcut sheet, the menu, the lightbox and
     the settings page.
   Everything that belongs to one surface lives in checks/*.css, loaded after
   this file (index.html):
     checks/motion.css    keyframes and reduced motion                 (A)
     checks/thread.css    thread, bubbles, verdict, stepper, evidence  (B)
     checks/composer.css  sheet, option rows, fields, CTA bar          (C)
     checks/trader.css    situation card, list rows                    (D)
     checks/staff.css     action block, Telegram steps, queue rows     (E)
   Type scale 30 / 24 / 19 / 15 / 12, nothing below 12 and nothing between the
   steps (glyphs included: the queue arrows and the lightbox buttons are 15);
   meaning at 12 px is weight 600 or more. --color-text-muted is for separators
   and glyphs only; text that carries meaning uses --color-text-secondary on
   base and surface and --pc-text-soft on elevated or tinted surfaces (both at
   least 4.5:1).
   A moment is never broken in the middle and a middot never ends a line: a
   <time> does not wrap, .pc-nowrap keeps any other run whole, and a row of
   facts gives every item after the first its own leading dot (.pc-stateline,
   .pc-dots).
   Loaded after trader.css, before checks/*.css and responsive.css.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
    /* Status TEXT colours with at least 4.5:1 on light surfaces (the status colours stay for dots, borders and fills). */
    --pc-warning-text: var(--color-warning);
    --pc-danger-text: var(--color-danger);
    --pc-success-text: var(--color-success);
    --pc-info-text: var(--color-info);
    /* Meaning text on elevated / tinted surfaces (secondary alone is 4.2:1 there). The plain line
       first is the fallback for engines without color-mix(). */
    --pc-text-soft: var(--color-text-secondary);
    --pc-text-soft: color-mix(in srgb, var(--color-text-secondary) 70%, var(--color-text-primary));
    /* Overlays on top of images: the video badge, the lightbox chrome. The lightbox is always dark. */
    --pc-overlay: rgba(0, 0, 0, .65);
    --pc-overlay-text: #FFFFFF;
    --pc-lightbox-bg: rgba(0, 0, 0, .92);

    /* Party roles: merchant / me (the reader) / other (the other human party). */
    --pc-merchant: var(--color-info);      --pc-merchant-text: var(--pc-info-text);
    --pc-me: var(--color-accent);          --pc-me-text: var(--color-accent);
    --pc-other: var(--color-warning);      --pc-other-text: var(--pc-warning-text);
    --pc-merchant-bg: color-mix(in srgb, var(--pc-merchant) 10%, var(--color-bg-surface));
    --pc-merchant-border: color-mix(in srgb, var(--pc-merchant) 34%, transparent);
    --pc-me-bg: color-mix(in srgb, var(--pc-me) 8%, var(--color-bg-surface));
    --pc-me-border: color-mix(in srgb, var(--pc-me) 34%, transparent);
    --pc-other-bg: color-mix(in srgb, var(--pc-other) 10%, var(--color-bg-surface));
    --pc-other-border: color-mix(in srgb, var(--pc-other) 36%, transparent);

    /* Tone surfaces (outcomes, states, notices). */
    --pc-tone-success-bg: color-mix(in srgb, var(--color-success) 12%, var(--color-bg-surface));
    --pc-tone-warning-bg: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-surface));
    --pc-tone-danger-bg:  color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-surface));
    --pc-tone-info-bg:    color-mix(in srgb, var(--color-info) 12%, var(--color-bg-surface));
    --pc-scrim: rgba(0, 0, 0, .6);
    --pc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] {
    --pc-warning-text: #B45309;
    --pc-danger-text: #B91C1C;
    --pc-success-text: #15803D;
    --pc-info-text: #1D4ED8;
    --pc-overlay: rgba(15, 23, 42, .72);
    --pc-overlay-text: #FFFFFF;
    /* The merchant leaves info-blue on light (too close to the indigo accent) for cyan. */
    --pc-merchant: #0891B2;
    --pc-merchant-text: #0E7490;
    --pc-me-text: var(--color-accent-hover);
    --pc-merchant-bg: color-mix(in srgb, var(--pc-merchant) 7%, var(--color-bg-surface));
    --pc-merchant-border: color-mix(in srgb, var(--pc-merchant) 40%, transparent);   /* 30 % read grey next to indigo */
    --pc-me-bg: color-mix(in srgb, var(--pc-me) 8%, var(--color-bg-surface));           /* 6 % vanished on the selected option row */
    --pc-me-border: color-mix(in srgb, var(--pc-me) 34%, transparent);
    --pc-other-bg: color-mix(in srgb, var(--pc-other) 8%, var(--color-bg-surface));
    --pc-other-border: color-mix(in srgb, var(--pc-other) 34%, transparent);
    --pc-tone-success-bg: color-mix(in srgb, var(--color-success) 9%, var(--color-bg-surface));
    --pc-tone-warning-bg: color-mix(in srgb, var(--color-warning) 9%, var(--color-bg-surface));
    --pc-tone-danger-bg:  color-mix(in srgb, var(--color-danger) 8%, var(--color-bg-surface));
    --pc-tone-info-bg:    color-mix(in srgb, var(--color-info) 8%, var(--color-bg-surface));
    --pc-scrim: rgba(15, 23, 42, .3);
}

/* Native radios, checkboxes and scrollbars follow the theme (no white discs on dark). */
[data-theme="dark"] :is(.pc-page, .pc-sheet, .pc-composer, .pc-panel, .pc-rail, .pc-tg, .pc-keys, .pc-lightbox) { color-scheme: dark; }
.pc-lightbox { color-scheme: dark; }

/* ── Helpers ────────────────────────────────────────────────── */
.pc-sr-only {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pc-mono { font-size: 12px; letter-spacing: .01em; overflow-wrap: anywhere; }
/* Quiet text that still carries meaning: secondary, never muted (muted is for glyphs only). */
.pc-num { font-variant-numeric: tabular-nums; }
.pc-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
/* A moment stays whole: "29.09 21:09" and "tomorrow 05:24" never break between the day and the time. */
.pc-nowrap, .pc-page time, .pc-sheet time { white-space: nowrap; }
/* The differing tail of a UTR (CheckText.DiffTail): heavier and underlined, no colour. */
.pc-tail { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
@media (max-width: 720px) { .pc-only-desk { display: none !important; } }
@media (min-width: 721px) { .pc-only-phone { display: none !important; } }

/* ── Focus: one ring for every control in the feature ──────── */
.pc-page :is(a, button, input, textarea, select, [tabindex]):focus-visible,
.pc-sheet :is(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; }
.pc-page .pc-btn:focus-visible, .pc-sheet .pc-btn:focus-visible { border-radius: 999px; }
.pc-opt:has(.pc-radio-input:focus-visible) { box-shadow: 0 0 0 3px var(--color-accent-dim); }
.pc-checkrow:has(.pc-checkbox-input:focus-visible) .pc-checkbox { box-shadow: 0 0 0 3px var(--color-accent-dim); }

/* ── Page frame ─────────────────────────────────────────────── */
.pc-page { display: flex; flex-direction: column; gap: 20px; max-width: 1140px; margin: 0 auto; animation: pcFade 200ms ease; }
.pc-page--wide { max-width: 1320px; }
/* Body text in the feature is 15/400 (spec 3): the app base is 500, which made bubble text heavier than the
   labels around it. Meaning at 12 px stays 600 or more, set where it is used. Settings keep the app weight. */
.pc-page, .pc-sheet { font-weight: 400; }
.pc-page .pc-settings { font-weight: 500; }
/* Top row: the way back on the left, the live indicator on the right. */
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
/* Crumbs (staff): links secondary, the current page primary; only the "/" glyph is muted. The settings
   page keeps its old markup (a .pc-crumb-sep slash, the page name in a bare span), so the slash is matched
   by its class or by aria-hidden, never by "any other span": that painted the page name muted. */
.pc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 8px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.pc-crumbs a { color: var(--color-text-secondary); text-decoration: none; font-weight: 600; white-space: nowrap; }
.pc-crumbs a:hover { color: var(--color-text-primary); }
.pc-crumbs .cur, .pc-crumbs > span:not([class]):not([aria-hidden]) { color: var(--color-text-primary); font-weight: 600; }
.pc-crumbs > span[aria-hidden="true"] { color: var(--color-text-muted); }
.pc-topend { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; color: var(--color-text-secondary); }
@media (max-width: 720px) {
    .pc-topend { width: 100%; margin-left: 0; justify-content: space-between; }
    .pc-topend > .pc-relay { display: none; }
}
/* Queue navigation: "‹ 3 of 12 ›" with the J / K keycaps. */
.pc-qnav { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pc-qbtn {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--color-border-strong); background: var(--color-bg-surface);
    display: inline-grid; place-items: center; color: var(--color-text-primary); font-size: 15px; text-decoration: none; cursor: pointer;
    transition: background var(--transition);
}
.pc-qbtn:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-text-primary); }
.pc-qbtn:disabled { color: var(--color-text-secondary); cursor: not-allowed; }
/* Relay health chip (RelayHealth.razor): a 6 px dot and one line of secondary text. */
.pc-relay { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pc-relay-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-offline); }
.pc-relay.is-ok .pc-relay-dot { background: var(--color-online); }
.pc-relay.is-down { color: var(--pc-danger-text); font-weight: 600; }
.pc-relay.is-down .pc-relay-dot { background: var(--color-danger); }
.pc-relay.is-paused .pc-relay-dot { background: var(--color-warning); }
.pc-relay.is-off .pc-relay-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-text-muted); }

/* ── Head: amount, meta, state line; the stepper sits right of it on desktop ── */
.pc-headrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: end; }
@media (min-width: 1100px) {
    .pc-headrow { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
    .pc-headrow .pc-stepper { width: 520px; }
    .pc-headrow .pc-stepper--5 { width: 620px; }
}
.pc-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-h1 {
    margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em;
    color: var(--color-text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.pc-h1 small { font-size: 15px; font-weight: 600; letter-spacing: 0; margin-left: 6px; color: var(--color-text-secondary); }
/* A page title ("Disputes", "Payment checks", "Settings") is one step down from the amount. */
.pc-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    font-size: 12px; font-weight: 600; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}
.pc-meta .pc-mono, .pc-meta .copy-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--color-text-primary); font-weight: 600; }
.pc-meta .copy-id__icon { opacity: .5; }
.pc-meta a { color: var(--color-text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--color-text-primary) 35%, transparent); }
.pc-meta a:hover { text-decoration-color: currentColor; }
/* State line: "Needs review · answered 12 min ago, 4 h 48 min early · nudged ×1". Each item after
   the first owns its leading dot, so a wrap never strands a separator at a line end. */
.pc-stateline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 15px; color: var(--color-text-secondary); }
.pc-stateline > * + *::before { content: "·"; margin-right: 8px; color: var(--color-text-muted); }
.pc-stateline b { color: var(--color-text-primary); font-weight: 700; }
.pc-stateline .is-danger { color: var(--pc-danger-text); font-weight: 700; }
/* ── Deadline (DeadlineText): secondary, warning 700 at 4 h, danger 700 when overdue ── */
.pc-deadline { color: var(--color-text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-deadline.is-warning { color: var(--pc-warning-text) !important; font-weight: 700; }
.pc-deadline.is-danger { color: var(--pc-danger-text) !important; font-weight: 700; }

/* ── Notices (lock, hint, conflict, "closed meanwhile"): full surface, full border, no stripe ── */
.pc-notice {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 12px 16px;
    border-radius: var(--radius-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong);
    font-size: 15px; line-height: 1.45; color: var(--color-text-primary); overflow-wrap: anywhere;
}
.pc-notice.is-danger { background: var(--pc-tone-danger-bg); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.pc-notice p { margin: 0; }
.pc-notice b { font-weight: 700; }
.pc-notice .pc-textbtn { margin-left: auto; }

/* ── Text buttons: underlined primary, 44 px tall on phones ─── */
.pc-textbtn {
    display: inline-flex; align-items: center; white-space: nowrap; background: none; border: 0; padding: 2px 0; cursor: pointer;
    font: inherit; font-weight: 700; font-size: 15px; line-height: 1.45; color: var(--color-text-primary);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--color-text-primary) 35%, transparent);
    transition: text-decoration-color var(--transition), color var(--transition);
}
.pc-textbtn.t-12 { font-size: 12px; }
.pc-textbtn:hover:not(:disabled) { text-decoration-color: currentColor; }
.pc-textbtn:disabled { color: var(--color-text-secondary); cursor: not-allowed; }
/* A quiet inline link with the same look ("Trader page ↗", the order id in a card head). */
.pc-rlink { font-size: 12px; font-weight: 700; color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--color-text-primary) 35%, transparent); }
.pc-rlink:hover { color: var(--color-text-primary); text-decoration-color: currentColor; }

/* ── Layout: main + rail; the rail dissolves below 1100 ─────── */
.pc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.pc-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pc-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1100px) {
    .pc-layout.has-rail { grid-template-columns: minmax(0, 760px) 360px; gap: 24px; }
    .pc-layout.has-rail--staff { grid-template-columns: minmax(0, 1fr) 400px; }
    /* The rail scrolls on its own when taller than the viewport. */
    .pc-layout.has-rail > .pc-rail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
}
/* Below 1100 the rail's cards join the main column: a card marked .pc-rail-top (the order card,
   the situation card) goes above the thread, the rest follow it. */
@media (max-width: 1099.98px) {
    .pc-layout > .pc-rail { display: contents; }
    .pc-layout > .pc-rail > * { order: 1; }
    .pc-layout > .pc-rail > .pc-rail-top { order: -1; }
}
/* Section heading over the thread ("Conversation") and over a list group. */
.pc-section { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.pc-section small { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.pc-section-title { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.pc-section-title small { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }

/* ── Cards: a title and a label/value grid, no hairlines inside ── */
.pc-card {
    display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0;
    border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg-surface);
}
.pc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pc-card-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.pc-card-head .pc-card-side { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.pc-card-sub { margin: -6px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-secondary); }
.pc-kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px 14px; align-items: baseline; margin: 0; font-size: 15px; }
.pc-kv dt { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); padding-top: 2px; }
.pc-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--color-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-kv dd small { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.pc-kv dd small.pc-kv-hint { font-weight: 400; line-height: 1.45; margin-top: 2px; }
.pc-kv dd .pc-mono, .pc-kv dd .copy-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; }
.pc-kv dd .copy-id__icon { opacity: .5; }
.pc-kv dd .is-danger { color: var(--pc-danger-text); }
.pc-kv dd .is-success { color: var(--pc-success-text); }
/* ChildContent rows keep working as dt/dd pairs inside the grid. */
.pc-kv-row { display: contents; }
/* A row whose value is a picture (the pay-out receipt): label and thumb meet at the top, not at the thumb's baseline. */
.pc-kv .pc-kv-top { align-self: start; }
.pc-online { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.pc-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-online); }
.pc-online.is-off::before { background: var(--color-offline); }

/* ── Buttons: the app's bal-btn look, scoped; disabled primary is outlined, never olive ── */
.pc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px;
    border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.pc-btn:active:not(:disabled) { transform: scale(.98); }
.pc-btn--primary { background: var(--color-accent); color: var(--color-text-on-accent); }
.pc-btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.pc-btn--outline { background: transparent; border-color: var(--color-border-strong); color: var(--color-text-primary); }
.pc-btn--outline:hover:not(:disabled) { background: var(--color-bg-hover); }
.pc-btn--primary:disabled,
.pc-page .bal-btn-primary:disabled, .pc-page .bal-btn-primary[disabled],
.pc-sheet .bal-btn-primary:disabled, .pc-sheet .bal-btn-primary[disabled] {
    background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text-secondary);
    opacity: 1; filter: none; transform: none; cursor: not-allowed;
}
.pc-btn--outline:disabled,
.pc-page .bal-btn-outline:disabled, .pc-sheet .bal-btn-outline:disabled { color: var(--color-text-secondary); border-color: var(--color-border); opacity: 1; cursor: not-allowed; }
.pc-btn.is-disabled { opacity: 1; color: var(--color-text-secondary); cursor: not-allowed; }
.pc-btn--sm { min-height: 36px; padding: 0 14px; font-size: 12px; }
.pc-btn--icon { width: 44px; padding: 0; }
.pc-btn--icon.pc-btn--sm { width: 36px; }
/* Key hint inside a button ("Close check [C]"): 12/600, a border at 45 % of the label colour, full opacity. */
kbd.pc-kbd {
    display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 5px;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: transparent; color: inherit;
    font: 600 12px/1.5 var(--font-family); vertical-align: 1px;
}
@media (pointer: coarse) { kbd.pc-kbd:not(.pc-kbd--sheet) { display: none; } }
/* A Telegram button label quoted in a step ("On the card, press [❌ Отказ]"): looks like a key, not a control. */
.pc-keycap {
    display: inline-block; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated);
    font-size: 12px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ── Tabs, nav dot, toolbar, search (Disputes.razor, the queue, the trader list) ── */
.pc-tab {
    position: relative; display: inline-flex; align-items: baseline; gap: 6px; flex: none;
    padding: 10px 0 11px; font-size: 15px; font-weight: 600; white-space: nowrap;
    color: var(--color-text-secondary); text-decoration: none; transition: color var(--transition);
}
.pc-tab:hover { color: var(--color-text-primary); }
.pc-tab.is-active { color: var(--color-text-primary); }
.pc-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--color-accent); }
/* Tab counts: plain text, never a chip. */
.pc-nav-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; margin-left: 2px; background: var(--color-warning); }
.pc-nav-dot.is-danger { background: var(--color-danger); }
.pc-search { flex: 1 1 260px; min-width: 0; max-width: 420px; }
@media (max-width: 720px) { .pc-search { flex: 0 0 auto; width: 100%; max-width: none; } }
.pc-search input { min-width: 0; }
.pc-search input::-webkit-search-cancel-button { filter: grayscale(1); }

/* ── Lists: groups, "Show older", empty and error states ────── */
.pc-list { display: flex; flex-direction: column; min-width: 0; }
.pc-group { display: flex; flex-direction: column; gap: 8px; }
.pc-more { align-self: flex-start; margin-top: 4px; }
.pc-table td { vertical-align: top; }

/* ── Keyboard shortcuts sheet: rows 8 px apart, no hairlines ── */
.glass-modal.pc-keys { max-width: 420px; padding: 18px 20px 16px; outline: none; }
.pc-keys-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pc-keys-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.pc-keys-list { margin: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.pc-keys-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 0; font-size: 15px; }
.pc-keys-row dt { display: flex; align-items: center; gap: 4px; flex: none; }
.pc-keys-row dd { margin: 0; text-align: right; color: var(--color-text-secondary); }
.pc-keys-or { color: var(--color-text-secondary); font-size: 12px; }
kbd.pc-kbd--sheet { margin-left: 0; padding: 3px 7px; border-radius: 6px; font-size: 12px; color: var(--color-text-primary); border-color: var(--color-border-strong); background: var(--color-bg-elevated); }

/* ── Menu ("⋯" next to the secondary action) ───────────────── */
.pc-menu-wrap { position: relative; display: inline-flex; }
.pc-menu-scrim { position: fixed; inset: 0; z-index: 60; }
.pc-menu {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 61;
    min-width: 232px; padding: 6px; display: flex; flex-direction: column;
    border: 1px solid var(--color-border-strong); border-radius: 10px;
    background: var(--color-bg-elevated); box-shadow: var(--shadow-dropdown); animation: pcExpand 200ms var(--pc-ease) both;
}
.pc-menu-item {
    width: 100%; padding: 10px 10px; border: 0; border-radius: 6px; background: none;
    font: inherit; font-size: 15px; font-weight: 500; text-align: left; color: var(--color-text-primary); cursor: pointer;
}
.pc-menu-item:hover, .pc-menu-item:focus-visible { background: var(--color-bg-hover); outline: none; }

/* ── Permission note under an action ("Only a Lead can complete an order") ── */
.pc-perm { margin: 0; font-size: 12px; line-height: 1.45; color: var(--color-text-secondary); }

/* ── Lightbox (always dark; chrome on the overlay tokens) ───── */
.pc-lightbox {
    position: fixed; inset: 0; z-index: 8600;
    background: var(--pc-lightbox-bg); color: var(--pc-overlay-text);
    animation: pcFade 200ms ease; outline: none;
}
.pc-lb-top {
    position: absolute; top: 0; left: 0; right: 0; height: 56px; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 8px 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
}
.pc-lb-counter { font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--pc-overlay-text) 80%, transparent); font-variant-numeric: tabular-nums; }
.pc-lb-top-actions { display: flex; gap: 4px; }
.pc-lb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 20px;
    background: transparent; color: color-mix(in srgb, var(--pc-overlay-text) 80%, transparent); cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 600; text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.pc-lb-btn:hover { background: color-mix(in srgb, var(--pc-overlay-text) 10%, transparent); color: var(--pc-overlay-text); }
.pc-lb-btn:focus-visible { outline: 2px solid var(--pc-overlay-text); outline-offset: 2px; }
.pc-lb-stage {
    position: absolute; inset: 56px 0 64px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; touch-action: none;
}
.pc-lb-img {
    max-width: calc(100% - 32px); max-height: 100%; object-fit: contain;
    user-select: none; -webkit-user-drag: none; transform-origin: center; cursor: zoom-in;
}
.pc-lightbox.is-zoomed .pc-lb-img { cursor: grab; }
.pc-lb-video { max-width: calc(100% - 32px); max-height: 100%; background: var(--pc-lightbox-bg); border-radius: 4px; }
.pc-lb-fallback {
    max-width: 380px; margin: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
}
.pc-lb-fallback-icon { color: color-mix(in srgb, var(--pc-overlay-text) 70%, transparent); }
.pc-lb-fallback-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--pc-overlay-text); }
.pc-lb-fallback-hint { margin: 0; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--pc-overlay-text) 72%, transparent); }
.pc-lb-fallback-btn {
    margin-top: 8px; gap: 8px; padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--pc-overlay-text) 30%, transparent); color: var(--pc-overlay-text);
}
.pc-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.pc-lb-prev { left: 12px; }
.pc-lb-next { right: 12px; }
.pc-lb-zoom {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2;
    display: flex; gap: 4px; padding: 0; padding-bottom: env(safe-area-inset-bottom);
}
.pc-lb-reset { font-size: 12px; }
@media (pointer: coarse) {
    .pc-lb-nav, .pc-lb-zoom { display: none; }
    .pc-lb-stage { inset: 56px 0 max(16px, env(safe-area-inset-bottom)); }
    .pc-lb-img, .pc-lb-video { max-width: 100%; }
}

/* ── Settings page (Pages/Admin/PaymentCheckSettings.razor, untouched by the redesign) ──
   The page keeps its old markup, so the panel, field, row and list rules it needs live here,
   scoped under .pc-settings; no other page carries that class, so nothing here can outrank a
   feature sheet. The one visual change: the selected channel row is a full tint, not a stripe. */
.pc-settings { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.pc-settings .pc-panel {
    display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px;
    background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.pc-settings .pc-field { display: flex; flex-direction: column; min-width: 0; }
.pc-settings .pc-field-note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pc-settings .pc-field-note:empty { display: none; }
.pc-settings .pc-field-note.is-danger { color: var(--pc-danger-text); }
.pc-settings .form-input.pc-textarea { height: auto; min-height: 76px; padding: 10px 12px; line-height: 1.45; font-weight: 500; resize: vertical; }
.pc-settings .pc-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.pc-settings .pc-qsub { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); overflow-wrap: anywhere; }
/* Channel rows: bordered cards 8 px apart (the group has no outer frame). */
.pc-settings .pc-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; column-gap: 12px; align-items: center;
    min-height: 64px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-bg-surface);
    color: inherit; text-decoration: none; transition: background var(--transition), border-color var(--transition);
}
.pc-settings .pc-row:hover { background: var(--color-bg-hover); }
.pc-settings .pc-row-amount { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.pc-settings .pc-row-meta { grid-column: 1 / -1; font-size: 12px; color: var(--color-text-secondary); overflow-wrap: anywhere; }
/* ── Phones ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .pc-page { gap: 16px; }
    .pc-h1 { font-size: 24px; line-height: 1.2; }
    .pc-card { padding: 14px; }
    .pc-kv { grid-template-columns: 104px minmax(0, 1fr); }
    /* Tap targets: every text button is 44 px tall on a phone. */
    .pc-textbtn { min-height: 44px; padding: 10px 0; }
}
/* ============================================================
   PAYMENT CHECKS: motion (package A).
   Every keyframe of the feature lives here; the sheets under checks/ only
   reference them by name. Enter once, settle once, no loops: only opacity,
   transform, colour and box-shadow animate; ease-out curves only; nothing
   bounces. Reduced motion turns everything off.

     pcFade     page and scrim on mount                     200 ms ease
     pcRise     thread items on the first paint only        240 ms --pc-ease,
                gated on .pc-thread.is-entering, delay calc(var(--i) * 40ms)
     pcSheetUp  the composer sheet opening                  280 ms --pc-ease
     pcExpand   fields inside the selected option, panel    200 ms --pc-ease
                content, the note textarea (space appears at once)
     pcDotIn    the current stepper dot and the verdict dot 600 / 360 ms --pc-ease
     pcSettle   an item that arrived on live refresh        1200 ms ease-out
                (is-new, live-new): background from --pc-settle-from, which each
                owner sets (merchant / other / me border, danger 40 % on an
                overdue row), so a bubble never flashes someone else's colour

   Curves: --pc-ease (checks.css token block) for movement, ease for colour.
   Loaded right after checks.css, before the feature sheets.
   ============================================================ */

@keyframes pcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pcSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pcExpand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pcDotIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* Settle from the owner's colour; accent-dim is the neutral fallback when no owner set --pc-settle-from. */
@keyframes pcSettle { from { background-color: var(--pc-settle-from, var(--color-accent-dim)); } }

/* Reduced motion: nothing moves, nothing fades, nothing settles. */
@media (prefers-reduced-motion: reduce) {
    .pc-page, .pc-page *, .pc-sheet, .pc-sheet *, .pc-scrim, .pc-composer, .pc-composer *,
    .pc-lightbox, .pc-lightbox * { animation: none !important; transition: none !important; }
}
/* ============================================================
   PAYMENT CHECKS: thread, verdict block, stepper, evidence (package B).
   The shared presentation of a check, used by the trader and the staff pages:
     stepper    CheckStepper.razor     where the check is (4 trader / 5 staff steps)
     thread     CheckThread.razor      party turns, the mismatch chip, events,
                                       the staff parsed block and keyboard text
     verdict    VerdictCard.razor      the answer as a block (also the toned dot
                                       and word the queue and the list rows reuse)
     evidence   EvidencePreview.razor  the swipe strip, hero + thumbs, tiles
   One hue, one owner: blue (cyan on light) is the merchant, the accent is the
   reader, amber is the other human party, red is a problem, green is money
   received, grey is the system. Body text inside every bubble stays primary;
   only the label, the border and the surface carry the party colour.
   Every colour is a token from checks.css or a color-mix() of tokens. A rule
   that paints a --pc-*-bg surface writes a plain token line first, and the
   block at the end keeps the borders visible without color-mix().
   Keyframes (pcRise, pcSettle, pcDotIn) live in motion.css; reduced motion
   turns them off there. Loaded after checks.css and motion.css.
   Weights (spec 3): the page base is 400, so every rule here that carries
   meaning says its weight itself and never leans on a host. Body text (bubble
   text, comments, notes, the UTR line, the verdict detail) is 15/400; the
   claim, the lead and the due line are 15/700; everything at 12 px is 600 or
   more (who-line, events, the parsed block, the keyboard text, the strip
   note, tile sub-lines), with 700 for the name or the fact inside a 600 line.
   ============================================================ */

/* ── Stepper: labels are nouns, so the current step never reads as past tense ── */
.pc-stepper { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; position: relative; margin: 0; padding: 0; }
.pc-step {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    font-size: 12px; font-weight: 600; color: var(--color-text-secondary); line-height: 1.25; padding: 0 2px; overflow-wrap: anywhere;
}
.pc-step-dot {
    position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--color-border-strong); background: var(--color-bg-base);
    transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.pc-step::before, .pc-step::after { content: ""; position: absolute; top: 5px; height: 2px; background: var(--color-border-strong); }
.pc-step::before { left: 0; right: 50%; }
.pc-step::after { left: 50%; right: 0; }
.pc-step:first-child::before, .pc-step:last-child::after { display: none; }
.pc-step.is-done { color: var(--pc-text-soft); }
.pc-step.is-done .pc-step-dot { border-color: var(--pc-me); background: var(--pc-me); }
.pc-step.is-done::before, .pc-step.is-done::after { background: var(--pc-me); }
/* The last step of a check whose order completed: money received. */
.pc-step.is-done.tone-success .pc-step-dot { border-color: var(--color-success); background: var(--color-success); }
.pc-step.is-current { color: var(--color-text-primary); font-weight: 700; }
.pc-step.is-current::before { background: var(--pc-me); }
/* The halo enters once and stays; it never pulses. */
.pc-step.is-current .pc-step-dot { border-color: var(--pc-me); background: var(--pc-me); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc-me) 22%, transparent); animation: pcDotIn 600ms var(--pc-ease) both; }
.pc-step.is-current.tone-danger .pc-step-dot { border-color: var(--color-danger); background: var(--color-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 22%, transparent); }
.pc-step.is-current.tone-neutral .pc-step-dot { border-color: var(--color-text-secondary); background: var(--color-text-secondary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-text-secondary) 22%, transparent); }
.pc-step.is-current.tone-success .pc-step-dot { border-color: var(--color-success); background: var(--color-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 22%, transparent); }
.pc-step .short { display: none; }
@media (max-width: 480px) { .pc-step .long { display: none; } .pc-step .short { display: inline; } }

/* ── Thread: party turns ────────────────────────────────────── */
/* The thread sets its own text context (15 / 1.45), so it reads the same on every host page. */
.pc-thread { list-style: none; display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 0; font-size: 15px; font-weight: 400; line-height: 1.45; }
.pc-turn { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 88%; }
/* Entrance stagger only on the first paint (the component sets is-entering once): a bare
   .pc-turn has no animation, so an item Blazor recreates on live refresh never rises again. */
.pc-thread.is-entering .pc-turn, .pc-thread.is-entering .pc-ev { animation: pcRise 240ms var(--pc-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.pc-turn--merchant { align-self: flex-start; --pc-settle-from: var(--pc-merchant-border); }
.pc-turn--me { align-self: flex-end; align-items: flex-end; --pc-settle-from: var(--pc-me-border); }
.pc-turn--other { max-width: 100%; align-self: stretch; --pc-settle-from: var(--pc-other-border); }
@media (min-width: 1100px) {
    .pc-turn--merchant { max-width: 82%; min-width: min(100%, 560px); }
    .pc-turn--me { max-width: 72%; }
}
/* The name is 700 in the party colour; the meta and the time are 600 (meaning at 12 px). */
.pc-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pc-who b { font-weight: 700; font-size: 12px; overflow-wrap: anywhere; }
.pc-turn--merchant .pc-who b { color: var(--pc-merchant-text); }
.pc-turn--me .pc-who b { color: var(--pc-me-text); }
.pc-turn--other .pc-who b { color: var(--pc-other-text); }
.pc-who .pc-who-meta { color: var(--color-text-secondary); overflow-wrap: anywhere; }
.pc-bubble {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px;
    border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg-surface);
    font-size: 15px; font-weight: 400; color: var(--color-text-primary);
}
.pc-turn--merchant .pc-bubble { background: var(--color-bg-elevated); background: var(--pc-merchant-bg); border-color: var(--pc-merchant-border); border-top-left-radius: 6px; }
.pc-turn--me .pc-bubble { background: var(--color-bg-elevated); background: var(--pc-me-bg); border-color: var(--pc-me-border); border-top-right-radius: 6px; }
.pc-turn--other .pc-bubble { background: var(--color-bg-elevated); background: var(--pc-other-bg); border-color: var(--pc-other-border); }
/* A live-refresh arrival settles from its own party colour (never the accent on someone else's bubble). */
.pc-turn.is-new .pc-bubble { animation: pcSettle 1200ms ease-out both; }
.pc-bubble > .pc-textbtn { align-self: flex-start; }
.pc-claim { margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-claim-utr { margin: 0; font-size: 15px; font-weight: 400; color: var(--pc-text-soft); }
.pc-claim-utr .pc-mono { font-size: 15px; color: var(--color-text-primary); font-weight: 600; }
/* Mismatch: the platform's remark inside the merchant's message. The dot says "system", like the
   event rows; inline-block (never flex), so the sentence wraps naturally at 390. The only chip-shaped
   object in the feature, and the only red inside the merchant bubble. */
.pc-mismatch {
    align-self: flex-start; display: inline-block; padding: 6px 10px; border-radius: 8px;
    background: var(--color-bg-elevated); background: var(--pc-tone-danger-bg); color: var(--pc-danger-text);
    font-size: 12px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.pc-mismatch::before { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -2px 8px 0 0; border-radius: 50%; background: var(--color-text-secondary); }
.pc-mismatch .pc-mono { font-size: 12px; color: inherit; }
.pc-text { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
/* A bare id (the order's UUID as the whole message) is a reference, not a sentence. */
.pc-text.pc-mono { font-size: 12px; font-weight: 600; }
.pc-lead { margin: 0; font-size: 15px; font-weight: 700; }
.pc-due-line { margin: 0; font-size: 15px; font-weight: 700; color: var(--pc-other-text); font-variant-numeric: tabular-nums; }
.pc-turn--me .pc-due-line { color: var(--pc-me-text); }

/* ── Verdict: neutral frame, toned word and dot ─────────────── */
.pc-verdict { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); font-weight: 400; line-height: 1.45; }
.pc-verdict-eyebrow { font-size: 12px; font-weight: 600; color: var(--pc-text-soft); }
.pc-verdict-label { display: flex; align-items: flex-start; gap: 10px; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pc-verdict-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--color-text-secondary); animation: pcDotIn 360ms var(--pc-ease) both; }
/* The dot belongs to the first line: it sits in the middle of that line box (1.3em tall, the
   line-height of the label), exactly where align-items: center put it for a one-line label, and
   stays there when a long outcome wraps to two lines. */
.pc-verdict-label > .pc-verdict-dot { margin-top: calc((1.3em - 10px) / 2); }
.pc-verdict-detail { font-size: 15px; font-weight: 400; color: var(--pc-text-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* The tone classes colour the word and the dot wherever they sit (the verdict block here, the
   queue's Answer cell, the list rows): the frame itself never takes the tone. */
.tone-danger .pc-verdict-label { color: var(--pc-danger-text); } .tone-danger .pc-verdict-dot { background: var(--color-danger); }
.tone-success .pc-verdict-label { color: var(--pc-success-text); } .tone-success .pc-verdict-dot { background: var(--color-success); }
.tone-warning .pc-verdict-label { color: var(--pc-warning-text); } .tone-warning .pc-verdict-dot { background: var(--color-warning); }
.tone-info .pc-verdict-label { color: var(--pc-info-text); } .tone-info .pc-verdict-dot { background: var(--color-info); }
.tone-neutral .pc-verdict-label { color: var(--color-text-primary); }

/* ── Events: inline text, not flex items, so a long event wraps like a sentence on a phone ── */
.pc-ev { display: block; padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-align: center; line-height: 1.5; overflow-wrap: anywhere; }
.pc-ev::before { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -2px 8px 0 0; border-radius: 50%; background: var(--color-border-strong); }
/* The time and the sentence are 8 px apart: a real space (so the row reads and copies as two words) plus 5 px. */
.pc-ev time { margin-right: 5px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pc-ev.is-merchant::before { background: var(--pc-merchant); }
.pc-ev.is-other::before { background: var(--pc-other); }
.pc-ev.is-me::before { background: var(--pc-me); }
/* A tone colours the sentence only; what follows it (" · detail") stays secondary. */
.pc-ev.is-danger .pc-ev-lead { color: var(--pc-danger-text); } .pc-ev.is-danger::before { background: var(--color-danger); }
.pc-ev.is-success .pc-ev-lead { color: var(--pc-success-text); } .pc-ev.is-success::before { background: var(--color-success); }
.pc-ev b { color: var(--color-text-primary); font-weight: 700; }

/* ── Evidence: the phone strip, or hero + thumbs (one DOM per breakpoint, chosen by the component) ── */
.pc-strip, .pc-evidence, .pc-thumbs { font-size: 15px; line-height: 1.45; }
/* scroll-padding keeps the first card on the bubble's text edge when the strip snaps. */
.pc-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.pc-strip::-webkit-scrollbar { display: none; }
.pc-shot {
    flex: 0 0 72%; scroll-snap-align: start; height: 300px; padding: 0; border-radius: 12px; overflow: hidden; position: relative;
    border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text-primary);
    font-family: inherit; font-size: 15px; line-height: 1.45; text-align: start;
    transition: border-color var(--transition);
}
.pc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pc-shot--tile { flex-basis: 40%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 14px; font-size: 15px; font-weight: 700; text-decoration: none; }
.pc-shot--tile small { font-size: 12px; font-weight: 600; color: var(--pc-text-soft); }
.pc-shot-tag { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: var(--pc-overlay); color: var(--pc-overlay-text); font-size: 12px; font-weight: 700; line-height: 1.45; font-variant-numeric: tabular-nums; }
.pc-strip-note { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--pc-text-soft); }
.pc-evidence { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pc-hero {
    width: 210px; flex: none; padding: 0; border-radius: 12px; overflow: hidden; color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); transition: border-color var(--transition);
}
.pc-hero img { display: block; width: 100%; height: auto; }
.pc-thumbs { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pc-thumb {
    width: 64px; height: 64px; padding: 0; border-radius: 10px; overflow: hidden; position: relative; color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); transition: border-color var(--transition);
}
.pc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pc-thumb .pc-shot-tag { left: 4px; bottom: 4px; padding: 1px 5px; font-size: 12px; }
.pc-tile {
    min-width: 64px; min-height: 64px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated);
    display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
    font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.45; color: var(--color-text-primary); text-align: start; text-decoration: none;
    transition: border-color var(--transition);
}
.pc-tile small { font-size: 12px; font-weight: 600; color: var(--pc-text-soft); }
.pc-tile--na, .pc-shot--tile.pc-tile--na { color: var(--pc-text-soft); font-weight: 600; }
/* What opens the lightbox zooms; what opens a tab or downloads is a plain pointer. */
button.pc-hero, button.pc-thumb, button.pc-shot { cursor: zoom-in; }
button.pc-tile, a.pc-tile, button.pc-shot--tile, a.pc-shot--tile { cursor: pointer; }
:is(button.pc-hero, button.pc-thumb, button.pc-shot, button.pc-tile, a.pc-tile, a.pc-shot--tile):hover:not(:disabled) { border-color: var(--color-text-secondary); }
:is(button.pc-tile, button.pc-shot--tile):disabled { color: var(--color-text-secondary); cursor: progress; }
.pc-evidence-error { margin: 0; font-size: 12px; font-weight: 600; color: var(--pc-danger-text); }

/* ── Staff extras in the merchant turn: facts only; red stays with the mismatch chip ── */
.pc-parsed { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; color: var(--pc-text-soft); overflow-wrap: anywhere; }
.pc-parsed b { color: var(--color-text-primary); font-weight: 700; }
/* Captured keyboard: plain text under the bubble (no frame, no fill, no radius), nothing looks pressable. */
.pc-kb { display: flex; flex-direction: column; gap: 3px; padding: 0 4px; }
/* The title is one step heavier than the keys and the note under it, which are 600 themselves. */
.pc-kb-title { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.pc-kb-keys { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--color-text-secondary); }
.pc-kb-keys > span + span::before { content: "·"; margin: 0 8px; color: var(--color-text-muted); }
.pc-kb-keys .is-pressed { color: var(--pc-text-soft); }
.pc-kb-keys .is-pressed::after { content: " ✓"; color: var(--pc-success-text); }
/* A label Telegram already marked as done keeps its own check. */
.pc-kb-keys .is-pressed.has-mark::after { content: none; }
.pc-kb-note { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }

/* ── Phones ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .pc-bubble { padding: 12px 14px; }
    .pc-turn { max-width: 92%; }
    .pc-turn--other { max-width: 100%; }
    .pc-strip { margin: 0 -14px; padding: 0 14px; scroll-padding: 0 14px; }
    /* Tap targets: a link inside a who-line or a tile is 44 px tall. */
    .pc-who .pc-rlink, .pc-tile--na .pc-rlink { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Without color-mix(): the surfaces fall back to the elevated card, so the party is told by
   the label, the side and a solid border in the party colour. ── */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .pc-turn--merchant .pc-bubble { background: var(--color-bg-elevated); border-color: var(--pc-merchant); }
    .pc-turn--me .pc-bubble { background: var(--color-bg-elevated); border-color: var(--pc-me); }
    .pc-turn--other .pc-bubble { background: var(--color-bg-elevated); border-color: var(--pc-other); }
    .pc-mismatch { background: var(--color-bg-elevated); }
    .pc-step.is-current .pc-step-dot { box-shadow: 0 0 0 4px var(--color-border-strong); }
}
/* ============================================================
   PAYMENT CHECKS: composer and CTA (package C of the redesign).
   The answer sheet and the inline panel (AnswerComposer.razor), the option
   rows and the fields that open inside the chosen one (OutcomePicker.razor),
   the attachment tiles (AttachmentPicker.razor) and the sticky bar of a check
   page (CheckActionBar.razor). Rules come from the CSS plan (pc-final.css);
   every colour is a token or a color-mix() of tokens.

   One DOM, three presentations of the composer:
     below 721 px          the sheet (.pc-sheet over .pc-scrim), for every host
     from 721 px, inline   the panel: the section also carries .pc-composer and
                           the block under "From 721 px" drops the sheet chrome
     from 721 px, a host   the same sheet parts as a centred 560 px dialog
     that is not inline    (staff "Answer for the trader")
   721 is the breakpoint of .pc-only-phone / .pc-only-desk (checks.css), so the
   sticky bar leaves exactly where the inline panel arrives.

   Adapted from the plan, where a mock used a static stand-in:
     .pc-input.is-focus    is  .pc-input:focus-within  (a real input inside)
     .pc-seg span          is  .pc-seg-item  (a label after its hidden radio)
     .pc-seg span.is-on    is  .pc-seg-input:checked + .pc-seg-item
     .pc-textarea          is a real textarea (primary text, secondary placeholder)
   Staff panels reuse .pc-opt / .pc-opt-row / .pc-radio-input / .pc-radio for
   their own rows, and .pc-field / .pc-label / .pc-field-note for their forms
   (.pc-field-label and .pc-optional stay as aliases of the old names).

   Weights: the feature's base is 400 (checks.css). Every text rule here sets
   its weight next to its size, so nothing leans on what it inherits: titles,
   labels and segments 700, the countdown and error lines 600, hints and whole
   sentences 400 with the one fact inside them (<b>) at 700. Only glyphs (the
   close cross) and rules that resize a .pc-btn or a field with its own weight
   carry a size alone.
   ============================================================ */

/* ── CTA: the sticky bar of a check page ─────────────────────── */
/* The countdown is the loud part: it is the one thing always on screen. Solid base colour, no blur.
   .pc-page has no gutters of its own and the page scrolls inside .main, which has padding. A sticky
   box is held inside the scroller's content box, so with bottom: 0 the bar would float above that
   padding with the page showing under it. The bar therefore bleeds through the padding: negative
   side margins to reach both screen edges, a negative bottom inset (stuck) and a negative bottom
   margin (end of the page) to sit flush on the bottom of the screen. --pc-cta-x / --pc-cta-b mirror
   the .main padding (responsive.css "Page gutters"): 12 px sides up to 380, 16 up to 720, 20 up to
   960, 24 above; under the page 24 px + the safe area up to 720, 16 up to 960, 24 above. */
.pc-cta {
    --pc-cta-x: 16px; --pc-cta-b: calc(24px + env(safe-area-inset-bottom, 0px));
    position: sticky; bottom: calc(-1 * var(--pc-cta-b)); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin: 0 calc(-1 * var(--pc-cta-x)) calc(-1 * var(--pc-cta-b)); padding: 12px var(--pc-cta-x) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg-base); border-top: 1px solid var(--color-border);
}
@media (max-width: 380px) { .pc-cta { --pc-cta-x: 12px; } }
@media (min-width: 721px) { .pc-cta { --pc-cta-x: 20px; --pc-cta-b: 16px; } }
@media (min-width: 961px) { .pc-cta { --pc-cta-x: 24px; --pc-cta-b: 24px; } }
/* The trader's bar carries .pc-only-phone (gone from 721 px, where the inline composer arrives).
   The staff bar stays until the action block moves into the sticky rail. */
@media (min-width: 1100px) { .pc-cta--split, .pc-cta--locked { display: none; } }
.pc-cta .pc-btn { width: 100%; min-height: 48px; font-size: 15px; }
.pc-cta-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 6px; font-size: 12px; font-weight: 400; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pc-cta-note .pc-deadline { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
/* Each half is one piece: the row may put the due time under the countdown, never break inside either. */
.pc-cta-note > * { white-space: nowrap; }
/* Note mode: nothing to press, one line of text ("Support is checking your answer"). */
.pc-cta--note { font-size: 15px; font-weight: 400; color: var(--color-text-secondary); align-items: flex-start; }
/* Split mode (staff): the secondary keeps its width, the primary takes the rest. Two labels do not fit one
   line of a phone in every language ("Вернуть трейдеру" next to "Исправить и завершить" asked for 440 px of
   the 358 a 390 px screen has), so a label wraps inside its button instead of pushing the bar past the
   screen edge: side padding 12, two lines of 18 px in the same 48 px, both buttons as tall as the taller
   one. The primary is never narrower than its longest word; if even that does not fit, the secondary
   wraps too. */
.pc-cta--split { flex-direction: row; align-items: stretch; gap: 8px; }
.pc-cta--split .pc-btn {
    width: auto; min-width: min-content; flex: 1 1 0; padding: 5px 12px;
    white-space: normal; overflow-wrap: break-word; text-align: center; text-wrap: balance; line-height: 1.2;
}
.pc-cta--split :is(.pc-btn--outline, .bal-btn-outline) { min-width: 0; flex: 0 1 auto; }
/* Locked by someone else: one sentence and the way out, not two dead buttons. */
.pc-cta--locked { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; font-size: 15px; font-weight: 400; color: var(--color-text-secondary); }
.pc-cta--locked b { color: var(--color-text-primary); font-weight: 700; }
/* The way out is a 44 px target at every width the bar is shown (text buttons are 44 px only on phones by default). */
.pc-cta--locked .pc-textbtn { flex: none; min-height: 44px; }

/* ── Composer: the sheet ─────────────────────────────────────── */
/* The host is closed until the sheet is up; an inline host shows from 721 px (below). */
.pc-composer-host { display: none; }
.pc-composer-host.is-open { display: block; }
.pc-scrim { position: fixed; inset: 0; z-index: 8000; background: var(--pc-scrim); animation: pcFade 200ms ease both; }
.pc-sheet {
    position: fixed; left: 0; right: 0; top: 24px; bottom: 0; z-index: 8001; display: flex; flex-direction: column;
    background: var(--color-bg-surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-modal);
    animation: pcSheetUp 280ms var(--pc-ease) both;
}
.pc-sheet-grip { align-self: center; flex: none; width: 36px; height: 4px; margin: 8px 0 0; border-radius: 2px; background: var(--color-border-strong); }
.pc-sheet-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 16px; }
.pc-sheet-heading { min-width: 0; }
.pc-sheet-title { font-size: 19px; line-height: 1.3; font-weight: 700; margin-top: 6px; color: var(--color-text-primary); }
/* A title takes the focus when its dialog opens (the sheet, the confirm step): it names the dialog; it is not a control, so it draws no ring. */
.pc-page .pc-sheet-title:focus-visible, .pc-sheet .pc-sheet-title:focus-visible,
.pc-page .pc-confirm-title:focus-visible, .pc-sheet .pc-confirm-title:focus-visible { outline: none; }
/* Two lines, so nothing wraps mid-time at 390: the order, then the due time with the countdown bold. */
.pc-sheet-sub { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--color-text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pc-sheet-sub b { color: var(--color-text-primary); font-weight: 600; white-space: nowrap; }
/* The countdown is a DeadlineText: it takes the bold primary of the line and keeps its own warning / danger tones. */
.pc-sheet-sub b .pc-deadline { color: inherit; font-weight: inherit; }
.pc-sheet-x {
    flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: transparent;
    display: grid; place-items: center; color: var(--color-text-secondary); font-size: 19px; line-height: 1; cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.pc-sheet-x:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.pc-page .pc-sheet-x:focus-visible, .pc-sheet .pc-sheet-x:focus-visible { border-radius: 50%; }
.pc-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.pc-sheet-foot {
    flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); background: var(--color-bg-surface);
}
.pc-sheet-foot .pc-btn { width: 100%; min-height: 48px; }
/* "Send: Paid to someone else's details" may need two lines on a narrow phone. */
.pc-sheet-foot .pc-btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
.pc-consequence { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); text-align: center; text-wrap: balance; font-variant-numeric: tabular-nums; }
.pc-consequence b { color: var(--color-text-primary); font-weight: 700; white-space: nowrap; }
/* The inline panel's hint and its due line are not part of the sheet. */
.pc-composer-sub { display: none; }
/* Comment and proof: stacked in the sheet, side by side in the inline panel. */
.pc-composer-fields { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── Composer: from 721 px ───────────────────────────────────── */
@media (min-width: 721px) {
    /* A host that is not inline: the same sheet parts, as a centred dialog while open. */
    .pc-sheet:not(.pc-composer) {
        top: 24px; bottom: 24px; margin: auto; width: min(560px, calc(100vw - 32px)); height: fit-content;
        max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); border-radius: var(--radius-lg);
    }
    .pc-sheet:not(.pc-composer) > .pc-sheet-grip { display: none; }
    .pc-sheet:not(.pc-composer) > .pc-sheet-head { padding: 14px 16px 8px 20px; }
    .pc-sheet:not(.pc-composer) > .pc-sheet-body { padding: 4px 20px 16px; }
    .pc-sheet:not(.pc-composer) > .pc-sheet-foot { padding: 12px 20px 18px; }
    /* Wide enough for one line: the consequence on the left, the primary on the right (dialog and panel). */
    .pc-sheet-foot { flex-direction: row; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
    /* The sentence takes the room left of the button and wraps inside it; under 180 px the button goes below. */
    .pc-sheet-foot .pc-consequence, .pc-sheet-foot .pc-send-error { order: -1; flex: 1 1 180px; min-width: 0; margin-right: auto; text-align: left; }
    .pc-sheet-foot .pc-btn { width: auto; min-height: 44px; white-space: nowrap; }

    /* An inline host: the panel is always on the page, the sheet chrome is gone. */
    .pc-composer-host.is-inline { display: block; }
    .pc-composer-host.is-inline > .pc-scrim { display: none; }
    .pc-page .pc-composer-host:focus-visible { border-radius: var(--radius-lg); }
    .pc-sheet.pc-composer { position: static; z-index: auto; box-shadow: none; animation: none; }
    .pc-composer { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg-surface); }
    .pc-composer > .pc-sheet-grip, .pc-composer .pc-sheet-x, .pc-composer .pc-sheet-sub { display: none; }
    .pc-composer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; }
    .pc-composer-title { font-size: 19px; font-weight: 700; margin-top: 0; }
    .pc-composer-sub { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
    .pc-composer-sub .pc-deadline { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
    .pc-composer-due { flex: none; text-align: right; white-space: nowrap; }
    /* One column of options, so a selected row never stretches a neighbour. The 560 px cap sits on the
       picker, not on the body around it: the comment and the proof under the options use the card, as the
       head and the footer do (inside the cap the comment was 255 px with its placeholder on two lines,
       next to 170 px of empty card). */
    .pc-composer .pc-og-grid { flex: none; overflow: visible; padding: 0; }
    .pc-composer .pc-og-grid > .pc-outcomes { max-width: 560px; }
    /* Comment and proof side by side, 720 px at most (a wide tablet has more). The comment takes the room
       and keeps at least 340 px, so its placeholder is one line; the proof has what is left (five tiles
       fit), its limits line going under the button when the two do not fit next to each other. Alone (the
       proof moved into the chosen row) the comment is as wide as the options above it. */
    .pc-composer .pc-composer-fields { flex-direction: row; align-items: flex-start; max-width: 720px; }
    .pc-composer .pc-composer-fields > .pc-field { flex: 1 1 340px; }
    .pc-composer .pc-composer-fields > .pc-field + .pc-field { flex: 0 1 auto; max-width: calc(100% - 356px); }
    .pc-composer .pc-composer-fields > .pc-field:only-child { flex: 0 1 560px; }
    /* The comment grows with what is typed (up to 240 px) and shows no resize grip; an engine without
       field-sizing keeps the grip of .pc-textarea. */
    @supports (field-sizing: content) { .pc-composer .pc-textarea { field-sizing: content; max-height: 240px; resize: none; } }
    /* Footer: part of the card, no bar of its own. */
    .pc-composer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; padding: 0; border-top: 0; background: none; }
    .pc-composer-foot .pc-consequence { margin-right: auto; }
}

/* ── Outcome picker: titled groups of option rows ────────────── */
.pc-outcomes { border: 0; min-width: 0; }
.pc-legend { margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.pc-og-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pc-og { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pc-og-title { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); padding: 0 2px; }
.pc-opt {
    display: flex; flex-direction: column; gap: 0; min-width: 0; border-radius: 12px; border: 1.5px solid var(--color-border-strong); background: var(--color-bg-surface);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.pc-opt-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; cursor: pointer; }
.pc-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-opt-title { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--color-text-primary); }
.pc-opt-hint { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--color-text-secondary); }
.pc-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border-strong); position: relative; transition: border-color var(--transition); }
/* The native radio stays for the keyboard and screen readers: invisible, exactly over the drawn one. */
.pc-radio-input {
    position: absolute; top: 50%; right: 14px; width: 22px; height: 22px; margin: -11px 0 0;
    -webkit-appearance: none; appearance: none; border: 0; border-radius: 50%; background: none; cursor: inherit;
}
.pc-opt .pc-radio-input:focus-visible { border-radius: 50%; }
@media (hover: hover) { .pc-opt:not(.is-selected):not(.is-disabled):hover { background: var(--color-bg-hover); } }
.pc-opt.is-selected { border-color: var(--pc-me); background: var(--color-bg-elevated); background: var(--pc-me-bg); }
.pc-opt.is-selected .pc-opt-hint, .pc-opt.is-selected .pc-label, .pc-opt.is-selected .pc-echo, .pc-opt.is-selected .pc-attach,
.pc-opt.is-selected .pc-seg-item, .pc-opt.is-selected .pc-field-note { color: var(--pc-text-soft); }
.pc-opt.is-selected .pc-radio { border-color: var(--pc-me); }
.pc-opt.is-selected .pc-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--pc-me); }
/* Not offered (a provider settles the order, the order failed): the reason sits where the hint was. */
.pc-opt.is-disabled .pc-opt-row { cursor: not-allowed; }
.pc-opt.is-disabled .pc-opt-title { color: var(--color-text-secondary); }
.pc-opt.is-disabled .pc-radio { border-color: var(--color-border); }
/* What the chosen answer needs: a sibling of the label, so a click in a field never reaches the radio. */
.pc-opt-fields { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; min-width: 0; animation: pcExpand 200ms var(--pc-ease) both; }
.pc-opt-fields .pc-attach { padding-top: 2px; }
/* The host's slot rendered nothing for this answer: no block, no padding. */
.pc-opt-fields:empty { display: none; }
.pc-opt-fields > * + .pc-label, .pc-opt-fields > * + .pc-seg-wrap { margin-top: 6px; }

/* ── Fields ──────────────────────────────────────────────────── */
.pc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-label { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.pc-label small { font-size: inherit; font-weight: 400; color: var(--color-text-secondary); margin-left: 6px; }
.pc-opt.is-selected .pc-label small { color: inherit; }
.pc-input {
    display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--color-border-strong); background: var(--color-bg-base);
    font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.pc-input:focus-within { border-color: var(--pc-me); box-shadow: 0 0 0 3px var(--color-accent-dim); }
.pc-input.is-error { border-color: var(--color-danger); }
.pc-input.is-error:focus-within { box-shadow: 0 0 0 3px var(--color-danger-dim); }
.pc-input .ccy { margin-left: auto; flex: none; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.pc-input > input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; font-variant-numeric: inherit; }
.pc-input > input::placeholder { color: var(--color-text-secondary); font-weight: 400; }
/* The frame carries the focus ring; the input inside draws none of its own. */
.pc-page .pc-input > input:focus-visible, .pc-sheet .pc-input > input:focus-visible, .pc-input > input:focus { outline: none; }
/* The amount keeps 19/700 on touch screens too (the app's anti-zoom rule would force 16 px). */
.pc-opt .pc-opt-fields .pc-input > input.pc-input-amount { font-size: 19px !important; }
/* References (UTR, the order a UTR was used for): mono, body size. */
.pc-input--mono { font-size: 15px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .01em; }
.pc-echo { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pc-echo b { color: var(--color-text-primary); font-weight: 700; white-space: nowrap; }
.pc-echo .diff { color: var(--pc-warning-text); font-weight: 700; }
/* Light: the warning text is 4.46:1 on the chosen row's tint; a tenth of the ink brings it to 5.1:1. */
[data-theme="light"] .pc-opt.is-selected .pc-echo .diff { color: color-mix(in srgb, var(--pc-warning-text) 90%, var(--color-text-primary)); }
.pc-echo:empty { display: none; }
/* A note or an error under a field, under the options, under the primary. */
.pc-field-note { font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pc-field-note:empty { display: none; }
.pc-field-note.is-danger, .pc-opt.is-selected .pc-field-note.is-danger { color: var(--pc-danger-text); font-weight: 600; }
.pc-field-note.is-warning, .pc-opt.is-selected .pc-field-note.is-warning { color: var(--pc-warning-text); font-weight: 600; }
.pc-send-error { text-align: center; }
/* A note led by a kit icon (the video a negative answer needs): the icon sits on the first line. */
.pc-field-note.pc-note-icon { display: flex; align-items: flex-start; gap: 6px; }
.pc-note-icon > .ds-icon { flex: none; margin-top: 2px; }
/* Need a receipt or video: what the client should send, three-way. */
.pc-seg-wrap { border: 0; min-width: 0; }
.pc-seg-wrap > legend { margin-bottom: 6px; }
.pc-seg-wrap > .pc-field-note { margin-top: 6px; }
.pc-seg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-border-strong); border-radius: 8px; overflow: hidden; }
.pc-seg.is-error { border-color: var(--color-danger); }
.pc-seg-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pc-seg-item {
    display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 8px; text-align: center;
    font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--color-text-secondary); cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
/* The divider is an inset shadow on the segment's left edge (same pixel column a border would take). */
.pc-seg-input:not(:first-child) + .pc-seg-item { box-shadow: inset 1px 0 0 var(--color-border-strong); }
/* The chosen segment: the reader's colour at 16 % over whatever is behind (the dim accent of the light theme
   is the colour of the chosen row itself, so it showed nothing there). */
.pc-seg .pc-seg-input:checked + .pc-seg-item { background: var(--color-accent-dim); background: color-mix(in srgb, var(--pc-me) 16%, transparent); color: var(--color-text-primary); }
.pc-seg-input:focus-visible + .pc-seg-item { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.pc-textarea {
    display: block; width: 100%; min-height: 84px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-border-strong); background: var(--color-bg-base);
    font: inherit; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--color-text-primary); resize: vertical;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.pc-textarea::placeholder { color: var(--color-text-secondary); font-weight: 400; }
.pc-textarea.error { border-color: var(--color-danger); }
/* Same focus as the amount field: the accent border and a soft ring, at the field's own radius. */
.pc-page .pc-textarea:focus-visible, .pc-sheet .pc-textarea:focus-visible, .pc-textarea:focus { outline: none; border-radius: 10px; border-color: var(--pc-me); box-shadow: 0 0 0 3px var(--color-accent-dim); }
/* A missing required comment keeps its danger frame while it has the focus (a refused send puts the focus there). */
.pc-page .pc-textarea.error:focus, .pc-sheet .pc-textarea.error:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-dim); }
.pc-textarea:disabled, .pc-input > input:disabled { color: var(--color-text-secondary); cursor: not-allowed; }

/* ── Attachments: the add button, the tiles, the failed line ── */
.pc-attachments { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pc-attach { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }
.pc-attach-btn { position: relative; }
/* 36 px to look at, 44 px to hit. */
.pc-attach-btn::after { content: ""; position: absolute; inset: -4px 0; }
.pc-attach-btn:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pc-files { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pc-file {
    position: relative; flex: none; width: 64px; height: 64px; padding: 0 8px 9px; display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: 10px; border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); overflow: hidden;
    font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--color-text-primary);
}
.pc-file small { font-size: inherit; font-weight: 600; color: var(--pc-text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-file.is-failed { border-color: var(--color-danger); }
.pc-file-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Progress: a 3 px bar on the bottom edge, scaled (never a width animation). */
.pc-file-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-border-strong); }
.pc-file-progress > span { display: block; width: 100%; height: 100%; background: var(--color-accent); transform-origin: left center; transition: transform 120ms linear; }
/* Remove: a 22 px disc in the corner with a 44 px hit area. */
.pc-file-remove { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; display: flex; align-items: flex-start; justify-content: flex-end; border: 0; background: none; cursor: pointer; }
.pc-file-remove > span {
    display: grid; place-items: center; width: 22px; height: 22px; margin: 3px; border-radius: 50%;
    background: var(--pc-overlay); color: var(--pc-overlay-text); font-size: 15px; line-height: 1;
}
.pc-page .pc-file-remove:focus-visible, .pc-sheet .pc-file-remove:focus-visible { outline: none; }
.pc-file-remove:focus-visible > span { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pc-file-failed { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; font-size: 12px; font-weight: 600; color: var(--pc-danger-text); overflow-wrap: anywhere; }

/* ── Money received: the confirm step ────────────────────────── */
/* Replaces the sheet content (phones, the dialog); a 440 px dialog over the inline panel. */
.pc-confirm { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pc-confirm-title { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--color-text-primary); overflow-wrap: anywhere; }
.pc-confirm-text { font-size: 15px; font-weight: 400; color: var(--color-text-secondary); }
/* The figures sit on one elevated block: rows 9 px apart, no hairlines. A debit is primary with a real
   minus: red is for a problem (spec 1.2), and money leaving the balance is what completing an order does.
   Only the commission is toned, green like "money received". */
.pc-confirm-dl { display: flex; flex-direction: column; padding: 3px 14px; border-radius: var(--radius-md); background: var(--color-bg-elevated); }
.pc-confirm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; font-size: 15px; }
.pc-confirm-row dt { font-size: 12px; font-weight: 600; color: var(--pc-text-soft); }
.pc-confirm-row dd { text-align: right; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-confirm-row dd.is-success { color: var(--pc-success-text); }
.pc-confirm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pc-confirm-actions .pc-btn { width: 100%; min-height: 48px; }
.pc-sheet.is-confirm > .pc-sheet-head, .pc-sheet.is-confirm > .pc-sheet-body, .pc-sheet.is-confirm > .pc-sheet-foot { display: none; }
.pc-confirm-scrim { display: none; }
.pc-confirm-layer { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
@media (max-width: 720px) {
    /* The confirm is short: the sheet hugs it instead of filling the screen. */
    .pc-sheet.is-confirm { top: auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
}
@media (min-width: 721px) {
    .pc-sheet:not(.pc-composer) > .pc-confirm-layer { padding: 20px; }
    .pc-confirm-actions { flex-direction: row-reverse; justify-content: flex-start; }
    .pc-confirm-actions .pc-btn { width: auto; min-height: 44px; }
    /* Inline panel: the answer stays on the page under a dialog. */
    .pc-sheet.pc-composer.is-confirm > .pc-sheet-head { display: flex; }
    .pc-sheet.pc-composer.is-confirm > .pc-sheet-body { display: flex; }
    .pc-sheet.pc-composer.is-confirm > .pc-sheet-foot { display: flex; }
    .pc-composer > .pc-confirm-layer { position: fixed; inset: 0; z-index: 8100; display: flex; align-items: center; justify-content: center; padding: 16px; }
    .pc-composer .pc-confirm-scrim { display: block; position: absolute; inset: 0; background: var(--pc-scrim); animation: pcFade 200ms ease both; }
    .pc-composer .pc-confirm {
        position: relative; width: min(440px, 100%); padding: 20px 24px; background: var(--color-bg-surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); animation: pcRise 200ms var(--pc-ease) both;
    }
}

/* ── Phones ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Tap targets: the three-way control is 44 px tall under a thumb. */
    .pc-seg-item { min-height: 44px; }
}
/* ============================================================
   PAYMENT CHECKS: trader pages (package D).
     detail   Trader/TraderCheckView.razor  .pc-page.pc-trader: top row, layout, notices
     task     CheckSituationCard.razor      .pc-situation*: what happened, what to do,
                                            what support said, what to look for, by when
     facts    OrderFactsCard.razor          the "This payment" card (trader) and the
                                            "Order" card (staff rail) on .pc-card / .pc-kv
     list     TraderCheckRows.razor         .pc-page.pc-checks: search, the live indicator
                                            and .pc-list .pc-row*: tinted cards 8 px apart,
                                            one line from 900 px
   One hue, one owner: the accent tint is "your turn", the danger tint is
   overdue, plain surfaces wait on someone else, the success tint is a closed
   check whose order completed. No stripes, no pills, no hairlines inside cards.
   Every colour is a token from checks.css or a color-mix() of tokens; a rule
   that paints a --pc-*-bg surface writes a plain token line first.
   Weights (spec 3): body text is 15/400 (the page base), titles and values
   600 or 700, every 12 px line that carries meaning says 600 or more here,
   one-sentence explanations stay 400.
   The row rules are scoped under .pc-list: the settings page has its own
   .pc-settings .pc-row and must not inherit these.
   Keyframes (pcSettle) live in motion.css; pcSheen, the one loop of the feature (the sheen of an open
   list row), is defined here next to its rule. Loaded after composer.css.
   ============================================================ */

/* ── Detail page frame ──────────────────────────────────────── */
/* The line under the amount: order id, check id, opened. Every item carries its own leading dot inside a
   19 px lead and the row is pulled 19 px left under a clip, so the dot shows between two items on one line
   and is cut off where an item starts a line (Russian and Spanish wrap on a phone). The clip is sideways
   only and 4 px out, so the copy button keeps its tap area above and below and its focus ring on the left. */
.pc-trader .pc-trader-meta { display: block; margin-left: -4px; padding-left: 4px; overflow-x: clip; }
@supports not (overflow-x: clip) { .pc-trader .pc-trader-meta { overflow: hidden; } }
.pc-trader .pc-trader-meta-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin-left: -19px; }
.pc-trader .pc-trader-meta-row > span { position: relative; padding-left: 19px; }
.pc-trader .pc-trader-meta-row > span::before {
    content: ""; position: absolute; left: 8px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px;
    border-radius: 50%; background: var(--color-text-muted);
}
/* The rail is first in the document (the task is read before the conversation). From 1100 px it is the
   right column, level with the conversation. */
@media (min-width: 1100px) {
    .pc-trader .pc-layout.has-rail > .pc-main { grid-column: 1; grid-row: 1; }
    .pc-trader .pc-layout.has-rail > .pc-rail { grid-column: 2; grid-row: 1; }
}
/* Below 1100 the rail dissolves (checks.css): the situation card goes above the conversation, "This payment"
   below it. That card is in the document twice (TraderCheckView): in the rail and after the conversation.
   Only the copy in its place is drawn; the other is display: none, out of the tab order and the
   accessibility tree, so the reading order matches the screen on every width. */
@media (max-width: 1099.98px) { .pc-trader .pc-facts--rail { display: none; } }
@media (min-width: 1100px) { .pc-trader .pc-facts--flow { display: none; } }
/* On phones the blocks keep the page rhythm (16 px). */
@media (max-width: 720px) { .pc-trader .pc-layout { gap: 16px; } }
/* "Not sent" after a 409: the warning surface, so it never reads as the quiet line of a sent answer. The view
   scrolls it into view and focuses it (it is not a tab stop); the margin keeps it off the edge of the screen. */
.pc-trader .pc-notice.is-warning {
    background: var(--color-bg-elevated); background: var(--pc-tone-warning-bg);
    border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); scroll-margin-top: 16px;
}

/* The live indicator (LiveRefresh) as one quiet line of text: a dot and "Updated 10s ago". It stays a
   button (tap to refresh now); the pill chrome of the shared component is dropped inside the feature. */
.pc-trader .pc-top .live-refresh {
    flex: none; gap: 6px; padding: 14px 0; margin: -14px 0; border: 0; border-radius: 6px; background: none; box-shadow: none;
    font-size: 12px; font-weight: 600; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}
.pc-trader .pc-top .live-refresh:hover { background: none; border: 0; color: var(--color-text-primary); }
.pc-trader .pc-top .live-refresh .live-refresh-dot { background: var(--color-online); box-shadow: none; }
.pc-trader .pc-top .live-refresh.is-stale .live-refresh-dot { background: var(--color-warning); }
.pc-trader .pc-top .live-refresh .live-refresh-label { display: inline; font-weight: 600; color: inherit; }
.pc-trader .pc-top .live-refresh .live-refresh-icon { display: none; }
.pc-trader .pc-top .live-refresh.is-busy .live-refresh-icon { display: inline-block; font-size: 12px; color: inherit; }
/* On a phone the tap area is 44 px in every language: a Cyrillic line is a pixel shorter than a Latin one. */
@media (max-width: 720px) { .pc-trader .pc-top .live-refresh { min-height: 44px; } }

/* ── Situation card: what happened, what to do, what to look for, by when ── */
.pc-situation {
    display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px; min-width: 0;
    border-radius: var(--radius-xl); border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated);
    font-size: 15px; line-height: 1.45; color: var(--color-text-primary);
    transition: background 300ms ease, border-color 300ms ease;
}
.pc-situation.is-me { background: var(--color-bg-elevated); background: var(--pc-me-bg); border-color: var(--pc-me-border); }
.pc-situation.is-danger { background: var(--color-bg-elevated); background: var(--pc-tone-danger-bg); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.pc-situation.is-success { background: var(--color-bg-elevated); background: var(--pc-tone-success-bg); border-color: color-mix(in srgb, var(--color-success) 40%, transparent); }
.pc-situation-title { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-primary); overflow-wrap: anywhere; }
.pc-situation-text { margin: 0; font-size: 15px; font-weight: 400; color: var(--pc-text-soft); }
/* What support said, in the colour of its turn in the conversation. */
.pc-situation-quote {
    display: flex; flex-direction: column; gap: 2px; margin: 4px 0; padding: 12px 14px;
    border-radius: var(--radius-md); background: var(--color-bg-surface); background: var(--pc-other-bg);
    border: 1px solid var(--pc-other-border);
    font-size: 15px; font-weight: 400; color: var(--color-text-primary);
}
.pc-situation-quote-who { font-size: 12px; font-weight: 700; color: var(--pc-other-text); }
.pc-situation-quote-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-situation-quote.is-clamped .pc-situation-quote-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-situation-more { align-self: flex-start; margin-top: -4px; }
/* "Look for": the facts the trader must find in the statement, built from the claim and the requisite. */
.pc-situation-look { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pc-situation-look .pc-mono { font-size: 15px; font-weight: 700; }
.pc-situation-look small { display: block; font-size: 12px; font-weight: 700; color: var(--pc-text-soft); }
/* The countdown is the loud half; the clock time is the quiet half. The DeadlineText tones win over the primary.
   Each half carries a 16 px lead and the row is pulled 16 px left under a clip, so the dot that leads the quiet
   half shows between the halves on one line and is cut off when that half wraps to a line of its own. */
.pc-situation-due { margin: 0; overflow: hidden; font-size: 15px; font-weight: 400; color: var(--pc-text-soft); font-variant-numeric: tabular-nums; }
.pc-situation-due-row { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; margin-left: -16px; }
.pc-situation-due-left, .pc-situation-due-by { position: relative; padding-left: 16px; }
/* The countdown is one piece ("5 h 29 min left"): it never breaks inside. */
.pc-situation-due-left { white-space: nowrap; }
.pc-situation-due-by::before { content: "·"; position: absolute; left: 0; width: 16px; text-align: center; }
.pc-situation-due .pc-deadline { font-size: 15px; font-weight: 700; color: var(--color-text-primary); transition: color 300ms ease; }
.pc-situation-actions { display: flex; }

/* ── Facts cards (OrderFactsCard on .pc-card / .pc-kv) ──────── */
/* The amount the merchant first asked for, when support corrected the order (staff rail). */
.pc-kv dd s { margin-right: 6px; font-weight: 400; color: var(--color-text-secondary); text-decoration-thickness: 1px; }
/* A value that is missing ("No UTR"): quiet, never bold. */
.pc-kv dd .pc-facts-none { font-weight: 400; color: var(--color-text-secondary); }
.pc-kv dd small.is-danger { color: var(--pc-danger-text); }
.pc-card-head .pc-card-side .copy-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; color: var(--color-text-primary); }
/* A copy button (CopyableId) is one 12 px line of text. On a phone its tap area is 44 px tall; the margin
   takes the padding back, so the row it sits in does not move. */
@media (max-width: 720px) {
    .pc-trader .pc-meta .copy-id, .pc-facts .pc-kv .copy-id { padding: 15px 0; margin: -15px 0; }
}

/* ── List page (TraderCheckRows inside Disputes) ────────────── */
/* The list fills the width the Disputes page gives it; .pc-page brings the weight, the focus ring and reduced motion. */
.pc-page.pc-checks { max-width: none; margin: 0; gap: 16px; }
/* Search: a 40 px field on the surface, not a pill. The ring is on the field, not on the bare input. */
.pc-checks .pc-search {
    display: flex; align-items: center; flex: 1 1 auto; width: auto; height: 40px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--color-border-strong); background: var(--color-bg-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.pc-checks .pc-search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-dim); }
.pc-checks .pc-search input {
    width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 15px; font-weight: 400; color: var(--color-text-primary);
}
.pc-checks .pc-search input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.pc-page.pc-checks .pc-search input:focus-visible { outline: none; }
@media (min-width: 721px) { .pc-checks .pc-search { max-width: 420px; } }
/* On a phone the search takes the whole row and the indicator is the line under it, at the right edge: the
   dot and its words ("Updated just now"), the same line as on the detail page. Beside the search the words
   do not fit (they would cut the placeholder), and a dot with a bare glyph says nothing about how fresh the
   list is. The glyph shows only while a refresh runs. The tap area is 44 px and the margin takes it back.
   It grows downwards: above the line it is as tall as the 8 px gap, so it stops at the search field's edge
   and never takes a tap meant for the field. */
@media (max-width: 720px) {
    .pc-checks .pc-search { flex: 1 1 100%; }
    }

/* ── List rows: separate cards 8 px apart, no outer frame, no stripes ── */
.pc-checks .pc-list { gap: 16px; }
.pc-list .pc-section-title { margin: 8px 0 0; }
/* Line 1 is the amount and, right of it, the countdown. The amount column is as wide as the amount and the
   countdown takes the rest, so a long countdown ("Просрочено на 1 ч 05 мин" next to 12,000.00 on a 360 px
   phone) wraps and the amount never does. */
.pc-list .pc-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; column-gap: 12px; min-height: 72px; padding: 14px 16px;
    border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-bg-surface);
    color: var(--color-text-primary); text-decoration: none; font-size: 15px; line-height: 1.45;
    --pc-settle-from: var(--pc-me-border);
    transition: border-color var(--transition);
}
.pc-list .pc-row:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.pc-list .pc-row.is-me { background: var(--color-bg-surface); background: var(--pc-me-bg); border-color: var(--pc-me-border); }
.pc-list .pc-row.is-me:hover { border-color: var(--pc-me); }
.pc-list .pc-row.is-danger {
    background: var(--color-bg-surface); background: var(--pc-tone-danger-bg);
    border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
    --pc-settle-from: color-mix(in srgb, var(--color-danger) 40%, transparent);
}
.pc-list .pc-row.is-danger:hover { border-color: var(--color-danger); }
.pc-page .pc-list .pc-row:focus-visible { border-radius: 12px; }
/* A row that arrived on live refresh settles once from its own tone. */
.pc-list .pc-row.is-new { animation: pcSettle 1200ms ease-out both; }
/* An open check is lit: a rim and a slow sheen (the settlement bar's .thr--hit effect, ThresholdBar.razor.css)
   in the colour of whose move it is, never the settlement orange. The owner asked for this loop: it overrides
   the feature's "no loops" rule (motion.css) for these rows only, so its keyframes stay here with it.
   The accent is "yours to answer", danger is overdue; a row that waits on someone else (is-waiting) is info
   blue on the plain surface with a thinner glow, so the list still says which rows are the trader's.
   The rim is box-shadow only, so the border, the hover and the focus ring work as before. The sheen is a
   band under the text (z-index -1 inside the row's own stacking context), clipped to the row's rounded box;
   only its transform moves, for a third of the cycle. --i (TraderCheckRows, 0 to 5) starts the rows one
   after another. The band is the tone itself, so it shows on a light row as well; its strength is set per
   theme (the lime accent is the brightest tone, so it gets the least). */
.pc-list .pc-row:is(.is-me, .is-danger, .is-waiting) {
    --pc-lit: var(--pc-me); --pc-lit-ring: 45%; --pc-lit-glow: 75%; --pc-lit-blur: 14px; --pc-lit-sheen: 12%;
    position: relative; isolation: isolate; overflow: hidden; overflow: clip;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc-lit) var(--pc-lit-ring), transparent),
                0 0 var(--pc-lit-blur) -3px color-mix(in srgb, var(--pc-lit) var(--pc-lit-glow), transparent);
}
.pc-list .pc-row.is-me { --pc-lit-sheen: 10%; }
.pc-list .pc-row.is-danger { --pc-lit: var(--color-danger); }
.pc-list .pc-row.is-waiting {
    --pc-lit: var(--color-info); --pc-lit-ring: 34%; --pc-lit-glow: 50%; --pc-lit-blur: 8px;
    border-color: color-mix(in srgb, var(--pc-lit) 34%, transparent);
    --pc-settle-from: color-mix(in srgb, var(--pc-lit) 34%, transparent);
}
.pc-list .pc-row.is-waiting:hover { border-color: var(--pc-lit); }
[data-theme="light"] .pc-list .pc-row:is(.is-me, .is-danger, .is-waiting) { --pc-lit-sheen: 14%; }
.pc-list .pc-row:is(.is-me, .is-danger, .is-waiting)::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent calc(50% - min(30%, 150px)),
        color-mix(in srgb, var(--pc-lit) var(--pc-lit-sheen), transparent) 50%, transparent calc(50% + min(30%, 150px)));
    transform: translateX(-100%);
    animation: pcSheen 5.6s ease-in-out calc(900ms + var(--i, 0) * 240ms) infinite;
}
@keyframes pcSheen {
    0% { transform: translateX(-100%); }
    34%, 100% { transform: translateX(100%); }
}
/* Text keeps 4.5:1 while the band passes behind it. The quiet text of a waiting row is the soft colour of
   the tinted rows; a toned word (the outcome, the countdown) leans a fifth towards the primary text. */
.pc-list .pc-row.is-waiting :is(.pc-row-amount small, .pc-row-state .muted, .pc-row-meta, .pc-row-end.is-muted, .pc-row-order, .pc-row-req, .pc-row-opened) { color: var(--pc-text-soft); }
.pc-list .pc-row:is(.is-me, .is-danger, .is-waiting) :is(.tone-danger, .pc-deadline.is-danger) { color: color-mix(in srgb, var(--pc-danger-text) 80%, var(--color-text-primary)) !important; }
.pc-list .pc-row:is(.is-me, .is-danger, .is-waiting) :is(.tone-warning, .pc-deadline.is-warning) { color: color-mix(in srgb, var(--pc-warning-text) 80%, var(--color-text-primary)) !important; }
.pc-list .pc-row:is(.is-me, .is-danger, .is-waiting) .tone-success { color: color-mix(in srgb, var(--pc-success-text) 80%, var(--color-text-primary)); }
.pc-list .pc-row:is(.is-me, .is-danger, .is-waiting) .tone-info { color: color-mix(in srgb, var(--pc-info-text) 80%, var(--color-text-primary)); }
/* Reduced motion: no sheen at all, the rim stays (motion.css reaches elements, not this pseudo-element). */
@media (prefers-reduced-motion: reduce) {
    .pc-list .pc-row:is(.is-me, .is-danger, .is-waiting)::after { animation: none; content: none; }
}
.pc-list .pc-row-amount { font-size: 19px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-list .pc-row-amount small { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-left: 4px; }
.pc-list .pc-row.is-me .pc-row-amount small, .pc-list .pc-row.is-danger .pc-row-amount small { color: var(--pc-text-soft); }
.pc-list .pc-row-flag { margin-right: 6px; vertical-align: 1px; }
/* Line 1, right: the countdown for rows that need the trader, a quiet "sent 12:40" otherwise. When it has
   to wrap, the two lines are balanced, so the number stays in one piece ("Просрочено на" / "1 ч 05 мин"). */
.pc-list .pc-row-end { min-width: 0; font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; align-self: center; text-wrap: balance; }
.pc-list .pc-row-end .pc-deadline { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.pc-list .pc-row-end.is-muted { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
/* Line 2: the state as a sentence; the outcome word carries its tone, the rest of the sentence is quiet. */
.pc-list .pc-row-state { grid-column: 1 / -1; font-size: 15px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pc-list .pc-row-state .tone-danger { color: var(--pc-danger-text); }
.pc-list .pc-row-state .tone-success { color: var(--pc-success-text); }
.pc-list .pc-row-state .tone-info { color: var(--pc-info-text); }
.pc-list .pc-row-state .tone-warning { color: var(--pc-warning-text); }
.pc-list .pc-row-state .muted { color: var(--color-text-secondary); font-weight: 400; }
.pc-list .pc-row.is-me .pc-row-state .muted, .pc-list .pc-row.is-danger .pc-row-state .muted { color: var(--pc-text-soft); }
/* Line 3: order id, UTR, requisite. */
.pc-list .pc-row-meta { grid-column: 1 / -1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pc-list .pc-row.is-me .pc-row-meta, .pc-list .pc-row.is-danger .pc-row-meta { color: var(--pc-text-soft); }
.pc-list .pc-row-meta .pc-mono { color: inherit; font-weight: 600; }
/* The dot before the requisite belongs to the requisite: a line can break before the dot (a plain space) and
   never after it (a no-break space), so a wrapped line does not end with a dot. */
.pc-list .pc-row-req::before { content: " ·\00a0"; }
.pc-list .pc-row-opened { display: none; }

/* From 900 px a row is one line of the list: the amount, the payment's ids in 12 px lines one under another,
   the state sentence, the countdown. Every row is its own grid, so the columns before the sentence are fixed
   (they line up down the list), the sentence takes what is left, and the countdown is as wide as its text:
   it never wraps, in any language. The sentence is one line from about 1024 px and at most two below that. */
@media (min-width: 900px) {
    .pc-list .pc-row {
        grid-template-columns: 136px 124px minmax(0, 1fr) auto;
        column-gap: 16px; row-gap: 0; align-items: center; min-height: 60px; padding: 10px 16px;
    }
    .pc-list .pc-row > * { grid-row: 1; }
    /* A fixed column: an amount wider than it (a flag in front, nine digits) wraps at the currency. */
    .pc-list .pc-row-amount { grid-column: 1; white-space: normal; }
    .pc-list .pc-row-meta { grid-column: 2; }
    .pc-list .pc-row-utr, .pc-list .pc-row-req, .pc-list .pc-row-kind { display: block; }
    .pc-list .pc-row-dot { display: none; }
    .pc-list .pc-row-req::before { content: none; }
    .pc-list .pc-row-state { grid-column: 3; }
    .pc-list .pc-row-end { grid-column: 4; white-space: nowrap; }
}
/* From 1180 px (the list is at its full width) there is room for a second pair of ids: the order over its
   UTR, then the requisite over "opened". The pair sits in two grid rows that every other cell spans. */
@media (min-width: 1180px) {
    .pc-list .pc-row { grid-template-columns: 144px 128px 128px minmax(0, 1fr) auto; }
    .pc-list .pc-row > * { grid-row: 1 / span 2; }
    .pc-list .pc-row-meta { display: contents; }
    .pc-list .pc-row-order, .pc-list .pc-row-req, .pc-list .pc-row-opened {
        min-width: 0; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
    }
    .pc-list .pc-row.is-me :is(.pc-row-order, .pc-row-req, .pc-row-opened),
    .pc-list .pc-row.is-danger :is(.pc-row-order, .pc-row-req, .pc-row-opened) { color: var(--pc-text-soft); }
    .pc-list .pc-row-order { grid-column: 2; grid-row: 1 / span 2; }
    .pc-list .pc-row-req { grid-column: 3; grid-row: 1; align-self: end; }
    .pc-list .pc-row-opened { display: block; grid-column: 3; grid-row: 2; align-self: start; }
    /* No requisite name: "opened" is the whole cell and sits on the row's middle line like the rest. */
    .pc-list .pc-row:not(:has(.pc-row-req)) .pc-row-opened { grid-row: 1 / span 2; align-self: center; }
    .pc-list .pc-row-state { grid-column: 4; }
    .pc-list .pc-row-end { grid-column: 5; }
}

/* Engines without color-mix(): the tinted cards keep a visible toned border on the plain surface. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .pc-situation.is-me, .pc-list .pc-row.is-me { border-color: var(--color-accent); }
    .pc-situation.is-danger, .pc-list .pc-row.is-danger { border-color: var(--color-danger); }
    .pc-situation.is-success { border-color: var(--color-success); }
    .pc-situation-quote { border-color: var(--color-warning); }
}
/* ============================================================
   PAYMENT CHECKS: staff pages (package E of the redesign).
     action block   StaffActionBlock.razor     the one place staff act (.pc-action*)
     Telegram       TelegramReplyPanel.razor   status line, numbered steps, the tick (.pc-tg*)
     relay          AutoReplyCard.razor        why the relay gave the check to staff, its steps (.pc-ar*)
     panels         Staff/*Panel.razor, ReturnForm.razor: inside the block, no frame of their own
     rail cards     the Trader card, UnlinkedActivity.razor (.pc-unl*); the Order card is
                    OrderFactsCard.razor (StaffRail), styled in trader.css
     queue          StaffQueueRows.razor       cells, row tints, stacked cards (.pc-q*)
     page chrome    StaffCheckView.razor, PaymentCheckQueue.razor: the crumbs row and the head's
                    meta line, the queue head and its toolbar (search, filters, live indicator)
   Rules come from the CSS plan (pc-final.css); every colour is a token or a color-mix() of
   tokens. Primitives (cards, the label/value grid, buttons, notices, keycaps, the menu) are
   checks.css; option rows, fields and the sticky bar are composer.css; the verdict dot and
   the tone classes are thread.css. Nothing here restyles them outside the staff roots.

   Weights: the feature's base is 400 (checks.css). Every text rule here sets its weight next
   to its size: titles 700, step titles and state words 600, meaning at 12 px (status, meta,
   ids, sub-lines, times) 600, one-sentence hints and notes 400 with the fact inside (<b>) 700.
   ============================================================ */

/* ── Page chrome ─────────────────────────────────────────────── */
/* The shared LiveRefresh pill reads as the quiet "updated 8 s ago" indicator of the crumbs row and of
   the queue toolbar: no frame, 12/600 secondary, a 6 px dot. The refresh glyph shows only while it is
   refreshing. It stays a button (press to refresh now). */
.pc-crumbs .live-refresh {
    min-height: 28px; padding: 0; gap: 6px; border: 0; border-radius: 6px; background: none; box-shadow: none;
    font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
}
.pc-crumbs .live-refresh:hover { background: none; border: 0; color: var(--color-text-primary); transform: none; }
.pc-crumbs .live-refresh-dot { box-shadow: none; background: var(--color-online); }
.pc-crumbs .live-refresh.is-stale .live-refresh-dot { background: var(--color-warning); }
.pc-crumbs .live-refresh-label { color: inherit; font-weight: 600; }
.pc-crumbs .live-refresh-icon { display: none; font-size: 12px; color: inherit; }
.pc-crumbs .live-refresh.is-busy .live-refresh-icon { display: inline-block; }
/* The line under the amount: check id, order, merchant, trader, opened. Every item carries its own leading
   dot inside a 19 px lead and the row is pulled 19 px left under a clip, so the dot shows between two items
   on one line and is cut off where an item starts a line: a wrap never strands a separator. The clip is
   sideways only and 4 px out, so the links keep their tap area above and below and their focus ring on the left. */
.pc-staff .pc-staff-meta { display: block; margin-left: -4px; padding-left: 4px; overflow-x: clip; }
@supports not (overflow-x: clip) { .pc-staff .pc-staff-meta { overflow: hidden; } }
.pc-staff .pc-staff-meta-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin-left: -19px; }
.pc-staff .pc-staff-meta-row > span { position: relative; padding-left: 19px; }
.pc-staff .pc-staff-meta-row > span::before {
    content: ""; position: absolute; left: 8px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px;
    border-radius: 50%; background: var(--color-text-muted);
}
/* The server's hint: one sentence, and under it the detail the server gave (why completing failed). */
.pc-notice-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-notice-detail { font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--pc-text-soft); }
/* A placeholder longer than the field ends in an ellipsis, not in half a word. */

/* ── Action block (rail, first card) ─────────────────────────── */
.pc-action {
    display: flex; flex-direction: column; gap: 14px; padding: 16px; min-width: 0;
    border-radius: var(--radius-lg); border: 1px solid var(--color-border-strong); border-color: var(--pc-me-border); background: var(--color-bg-surface);
    font-size: 15px; line-height: 1.45;
}
.pc-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pc-action-heading { min-width: 0; }
/* The title takes the focus when a panel opens (reveal): it names the block, it is not a control, so it draws no ring. */
.pc-action-title { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--color-text-primary); scroll-margin-top: 12px; overflow-wrap: anywhere; }
.pc-page .pc-action-title:focus-visible { outline: none; }
.pc-action-lead { margin: 4px 0 0; font-size: 15px; font-weight: 400; color: var(--color-text-secondary); overflow-wrap: anywhere; }
/* A sentence that opens with a fallback word ("the trader says") still starts with a capital. */
.pc-action-title::first-letter, .pc-action-lead::first-letter { text-transform: uppercase; }
.pc-action-lead b { color: var(--color-text-primary); font-weight: 500; }
/* The trader's verdict inside the lead, in its tone (the same tone as the verdict block in the thread). */
.pc-action-lead .tone-danger { color: var(--pc-danger-text); font-weight: 500; }
.pc-action-lead .tone-success { color: var(--pc-success-text); font-weight: 500; }
.pc-action-lead .tone-warning { color: var(--pc-warning-text); font-weight: 500; }
.pc-action-lead .tone-info { color: var(--pc-info-text); font-weight: 500; }
.pc-action-lead .tone-neutral { color: var(--color-text-primary); font-weight: 500; }
.pc-action-lead .pc-deadline { color: var(--color-text-primary); font-weight: 500; }
.pc-action-perms { display: flex; flex-direction: column; gap: 4px; }
/* The open panel: its fields, then its own footer. Space appears at once, the content fades in. */
.pc-action-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; animation: pcExpand 200ms var(--pc-ease) both; }
.pc-action-text { margin: 0; font-size: 15px; font-weight: 400; color: var(--color-text-secondary); }
/* The fields of a panel that guards its shortcut (StaffClosePanel): the block's own rhythm, one wrapper. */
.pc-action-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pc-action-foot { display: flex; flex-direction: column; gap: 8px; }
.pc-action-foot .pc-btn { width: 100%; }
/* Under an open panel the secondary row follows the panel's own footer at the footer's rhythm. */
.pc-action-foot--alt { margin-top: -6px; }
/* A row of the footer: the secondary with the menu at its end (-alt), or, when the state has no
   secondary, the primary with the menu at its end (-main), so the menu never takes a row alone. */
.pc-action-alt, .pc-action-main { display: flex; gap: 8px; }
:is(.pc-action-alt, .pc-action-main) > .pc-btn { flex: 1 1 auto; width: auto; min-width: 0; }
:is(.pc-action-alt, .pc-action-main) .pc-menu-wrap { flex: none; }
/* Neither a primary nor a secondary: the menu keeps its place at the end of the row. */
.pc-action-alt > .pc-menu-wrap:only-child { margin-left: auto; }
:is(.pc-action-alt, .pc-action-main) .pc-btn--icon { width: 44px; font-size: 19px; line-height: 1; }
.pc-page :is(.pc-action-alt, .pc-action-main) .pc-btn--icon:focus-visible { border-radius: 999px; }
/* Under an open panel with no secondary the block's footer is the menu alone. Where the panel's own
   footer is its submit and nothing else (Return, Note, Link, Reopen, Merge, Unlink), the menu moves up
   to the end of that row: 44 px of button and the block's 14 px gap. A panel with a hint under its
   submit (Close, Complete) and an engine without :has() keep the menu on the row below. */
.pc-action:has(> .pc-action-panel > .pc-action-foot > .pc-btn--primary:only-child) > .pc-action-foot--menu { align-self: flex-end; margin-top: -58px; }
.pc-action:has(> .pc-action-foot--menu) > .pc-action-panel > .pc-action-foot > .pc-btn--primary:only-child { width: calc(100% - 52px); }
.pc-action-hint, .pc-action-alt-hint { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--color-text-secondary); text-align: center; text-wrap: balance; }
/* Locked by someone else: the reason and the way out, together, under the primary. */
.pc-action-locked { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }

/* ── Telegram: status line, numbered steps, the tick ─────────── */
.pc-tg { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pc-tg--status { gap: 8px; }
/* The resting block: the status sits right above the footer buttons. */
.pc-action > .pc-tg--status + .pc-action-foot { margin-top: -6px; }
/* The dot hangs in the left padding, so a status that wraps keeps its second line under the text. */
.pc-tgstatus { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; padding-left: 15px; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pc-tgstatus::before { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-warning); }
.pc-tgstatus.is-ok::before { background: var(--color-success); }
.pc-tgstatus.is-ok { color: var(--pc-success-text); }
.pc-tgstatus b { color: var(--color-text-primary); font-weight: 500; }
/* What the bot saw, who opened Telegram: one quiet line under the status, level with its text. */
.pc-tg-summary { margin-top: -6px; padding-left: 15px; overflow-wrap: anywhere; }
.pc-tg--status .pc-tg-summary { margin-top: -4px; }
.pc-tg-actions { display: flex; }
.pc-tg-open { display: flex; }
/* The resting block: "Open in Telegram" takes the row, "Mark replied" sits at its end. Where the
   two do not fit (a long translation on a phone) the text button wraps under the link, centred like the hints. */
.pc-tg--status .pc-tg-open { flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pc-tg--status .pc-tg-open .pc-btn { flex: 1 1 auto; width: auto; }
.pc-tg--status .pc-tg-open .pc-textbtn { flex: none; margin-inline: auto; }
.pc-tgsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pc-tgstep { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; padding-bottom: 16px; }
.pc-tgstep:last-child { padding-bottom: 0; }
.pc-tgstep::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--color-border-strong); transition: background var(--transition); }
.pc-tgstep:last-child::before { display: none; }
.pc-tgstep-n {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-border-strong); display: grid; place-items: center;
    font-size: 12px; font-weight: 500; line-height: 1; color: var(--color-text-secondary); background: var(--color-bg-surface); font-variant-numeric: tabular-nums;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.pc-tgstep.is-current .pc-tgstep-n { border-color: var(--pc-me); color: var(--color-text-primary); box-shadow: 0 0 0 3px var(--color-accent-dim); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-me) 22%, transparent); }
.pc-tgstep.is-done .pc-tgstep-n { border-color: var(--color-success); background: var(--color-success); color: var(--color-text-on-accent); }
.pc-tgstep.is-done .pc-tgstep-n::before { content: "\2713"; font-size: 15px; font-weight: 600; }
.pc-tgstep.is-done::before { background: var(--color-success); }
.pc-tgstep-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.pc-tgstep-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-text-primary); overflow-wrap: anywhere; }
.pc-tgstep-title b { font-weight: 500; }
.pc-tgstep-title .pc-keycap { margin-left: 2px; white-space: normal; vertical-align: 1px; }
.pc-tgstep.is-done .pc-tgstep-title { color: var(--color-text-secondary); }
.pc-tgstep-note { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.pc-tgstep-note.is-danger { color: var(--pc-danger-text); font-weight: 600; }
/* What to do instead, when the button a step names is not on the card: the instruction, so it reads as one. */
.pc-tgstep-note.pc-tgstep-do { color: var(--color-text-primary); font-weight: 600; }
/* The text to send: a read box, or a textarea in its place after Edit. */
.pc-reply { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-reply-box { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-border-strong); background: var(--color-bg-base); font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--color-text-primary); }
.pc-textarea.pc-reply-input { min-height: 64px; font-weight: 500; }
.pc-reply-tools { display: flex; gap: 14px; }

/* ── Relay (dispute auto-reply): the card, its steps, the reply panel's relay line ── */
/* The card's tone says whose move it is: danger when the relay handed the check over, info while it works
   or has an answer ready, success once it answered. A full border in the tone, no stripe; the verdict and the
   "what to do" block carry the same tone. */
.pc-ar { --ar-tone: var(--color-border-strong); --ar-text: var(--color-text-primary); --ar-bg: var(--color-bg-elevated); }
.pc-ar.is-danger { --ar-tone: var(--color-danger); --ar-text: var(--pc-danger-text); --ar-bg: var(--pc-tone-danger-bg); border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)); }
.pc-ar.is-info { --ar-tone: var(--color-info); --ar-text: var(--pc-info-text); --ar-bg: var(--pc-tone-info-bg); border-color: color-mix(in srgb, var(--color-info) 40%, var(--color-border)); }
.pc-ar.is-success { --ar-tone: var(--color-success); --ar-text: var(--pc-success-text); --ar-bg: var(--pc-tone-success-bg); border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-border)); }
/* Verdict first: one sentence in the tone, then the answer we give in plain text. */
.pc-ar-verdict { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-ar-what { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ar-text); overflow-wrap: anywhere; text-wrap: pretty; }
.pc-ar-kind { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--color-text-primary); overflow-wrap: anywhere; }
/* What to do: the instruction in a block filled with the tone, the way into the chat right under it. */
.pc-ar-do {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--ar-bg); border: 1px solid color-mix(in srgb, var(--ar-tone) 35%, transparent);
}
.pc-ar-dotext { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--color-text-primary); overflow-wrap: anywhere; }
.pc-ar-do > .pc-ar-open { width: auto; background: var(--color-bg-surface); }
.pc-ar-stepsbox { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pc-ar-label { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--color-text-secondary); }
.pc-ar-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pc-ar-sub > * + *::before { content: "\00B7"; margin-right: 6px; color: var(--color-text-muted); }
.pc-ar-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pc-ar-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; align-items: start; }
/* The step's state: an empty ring while it waits, an arrow once sent, a check, a cross, a dash. Tinted, the glyph in the tone's text colour. */
.pc-ar-ico {
    width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--color-border-strong); background: var(--color-bg-surface);
    display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; color: var(--color-text-secondary);
}
.pc-ar-step.is-sent .pc-ar-ico { border-color: var(--color-info); background: var(--pc-tone-info-bg); color: var(--pc-info-text); }
.pc-ar-step.is-ok .pc-ar-ico { border-color: var(--color-success); background: var(--pc-tone-success-bg); color: var(--pc-success-text); }
.pc-ar-step.is-fail .pc-ar-ico { border-color: var(--color-danger); background: var(--pc-tone-danger-bg); color: var(--pc-danger-text); }
.pc-ar-step.is-off .pc-ar-ico { border-style: dashed; }
.pc-ar-stepbody { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pc-ar-steptitle { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--color-text-primary); overflow-wrap: anywhere; }
.pc-ar-steptitle .pc-keycap { margin-left: 2px; white-space: normal; vertical-align: 1px; }
.pc-ar-step.is-off .pc-ar-steptitle { color: var(--color-text-secondary); }
.pc-ar-step.is-fail .pc-ar-state { color: var(--pc-danger-text); }
.pc-ar-step.is-ok .pc-ar-state { color: var(--pc-success-text); }
.pc-ar-step.is-sent .pc-ar-state { color: var(--pc-info-text); }
/* Our text, quoted: a quiet read box (the full text is in its title and in the chat). */
.pc-ar-quote {
    max-width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--color-border-strong); background: var(--color-bg-base);
    font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--color-text-primary); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* The state icon (a kit line icon) drawn a little bolder at 12 px. */
.pc-ar-ico .ds-icon { stroke-width: 2.25; }
/* A file step: a paperclip and the name the file goes out under. */
.pc-ar-file {
    display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 0;
    font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--color-text-primary);
}
.pc-ar-file .ds-icon { flex: none; color: var(--color-text-secondary); }
.pc-ar-filename { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.pc-ar-open .ds-icon { vertical-align: -2px; }
/* Technical details: the codes, folded, small and quiet. Data in monospace, never translated. */
.pc-ar-tech { font-size: 11px; line-height: 1.5; color: var(--color-text-muted); }
.pc-ar-tech > summary { cursor: pointer; width: max-content; max-width: 100%; font-weight: 600; color: var(--color-text-secondary); }
.pc-ar-tech > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.pc-ar-tech dl { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; }
.pc-ar-tech dl > div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.pc-ar-tech dt { color: var(--color-text-secondary); }
.pc-ar-tech dd { margin: 0; min-width: 0; }
.pc-ar-tech code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--color-text-secondary); overflow-wrap: anywhere; word-break: break-all; }

/* ── File to the chat (RelayFileCard): a trader / staff file the relay sends as a reply to the card ── */
.pc-rf-lead { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.pc-rf-blocked {
    margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--pc-tone-danger-bg);
    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
    font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--pc-danger-text); overflow-wrap: anywhere;
}
.pc-rf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* A row: the kind's icon, what the file is with its size and time (and its latest send), the send button. */
.pc-rf-row {
    display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 10px; align-items: start;
    padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-base);
}
.pc-rf-ico {
    width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border); color: var(--color-text-secondary);
}
.pc-rf-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-rf-name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-text-primary); overflow-wrap: anywhere; }
.pc-rf-state { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 2px 0 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--pc-info-text); }
.pc-rf-state > * + *::before { content: "\00B7"; margin-right: 6px; color: var(--color-text-muted); }
.pc-rf-state.is-ok { color: var(--pc-success-text); }
.pc-rf-state.is-fail { color: var(--pc-danger-text); }
.pc-rf-state.is-off { color: var(--color-text-secondary); }
.pc-rf-by { color: var(--color-text-secondary); }
.pc-rf-code { margin: 0; font-size: 11px; line-height: 1.5; color: var(--color-text-muted); overflow-wrap: anywhere; }
.pc-rf-problem { margin: 2px 0 0; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--color-text-secondary); overflow-wrap: anywhere; }
/* The rail is narrow: the button sits under the file's lines. */
.pc-rf-send { grid-column: 2; justify-self: start; margin-top: 8px; white-space: nowrap; }
.pc-rf-send .ds-icon, .pc-rf-uploadopen .ds-icon { vertical-align: -2px; }
.pc-rf-uploadopen { align-self: flex-start; }
.pc-rf-upload { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.pc-rf-hint { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--color-text-secondary); }
.pc-rf-uploadfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* Send (primary, full width), then "I'll answer myself" as a text button with its one-line hint. */
.pc-ar-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.pc-ar-actions > .pc-ar-stop { align-self: center; min-height: 36px; font-size: 14px; }
.pc-ar-actions > .pc-action-hint { margin-top: -4px; }
/* The reply panel: the relay's line has an info dot; "Send answer" shares the row with "Open in Telegram". */
.pc-tgstatus.is-relay::before { background: var(--color-info); }
.pc-tgstatus.is-relay { color: var(--color-text-primary); }
.pc-tg-open { gap: 8px; flex-wrap: wrap; }
.pc-tg-open > .pc-ar-sendbtn { flex: 1 1 auto; width: auto; }
/* 360-420 px: the two buttons stack, Send on top; the text button stays centred under them. */
@media (max-width: 420px) {
    .pc-tg-open, .pc-tg--status .pc-tg-open { flex-direction: column; align-items: stretch; }
    .pc-tg-open > .pc-ar-sendbtn { order: -1; }
    .pc-tg-open > .pc-textbtn { align-self: center; }
}
/* Thread events on a phone: a wrapped line reads from the left, under its own dot. */
@media (max-width: 480px) {
    .pc-staff .pc-ev { text-align: left; }
}
/* The relay chip's word for writing ("writing off", "writing blocked"): whole, on the next line when it does not fit. */
.pc-relay:has(.pc-relay-writes) { flex-wrap: wrap; row-gap: 2px; }
.pc-relay-writes { white-space: nowrap; }
.pc-relay-writes { color: var(--color-text-secondary); }
.pc-relay-writes::before { content: "\00B7"; margin: 0 6px; color: var(--color-text-muted); }
.pc-relay-writes.is-blocked { color: var(--pc-danger-text); font-weight: 600; }
/* Queue: the relay's status under the state's context line. */
.pc-table .pc-qrelay { margin-top: 4px; }

/* ── The tick: a drawn box over the native checkbox ──────────── */
.pc-checkrow { position: relative; display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-text-primary); cursor: pointer; }
/* A tick that qualifies a field ("Show the note to the trader") is body text, not a step. */
.pc-checkrow--sm { font-weight: 400; }
/* The native checkbox stays for the keyboard and screen readers: invisible, exactly over the drawn one. */
.pc-checkbox-input { position: absolute; left: 0; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: inherit; }
.pc-checkbox {
    position: relative; flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--color-border-strong); background: var(--color-bg-base);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.pc-checkbox-input:checked + .pc-checkbox, .pc-checkbox.is-on { background: var(--color-accent); border-color: var(--color-accent); }
.pc-checkbox-input:checked + .pc-checkbox::after, .pc-checkbox.is-on::after {
    content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
    border: solid var(--color-text-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pc-checkbox-input:disabled + .pc-checkbox { border-color: var(--color-border); }
.pc-checkrow:has(.pc-checkbox-input:disabled) { cursor: not-allowed; }

/* ── Panels inside the block ─────────────────────────────────── */
/* A plain text field next to the mono one (payer name): body size and weight in the same frame. */
.pc-action .pc-input--text { font-size: 15px; font-weight: 400; }
/* The note under Close: the textarea, then its tick. */
.pc-action-note { animation: pcExpand 200ms var(--pc-ease) both; }
.pc-action-note .pc-textarea { min-height: 64px; }
/* Option rows of a panel (resolutions, link candidates): the group label is a legend. */
.pc-action .pc-outcomes > legend.pc-og-title { margin-bottom: 8px; }
/* Link: the search takes the block's width (as a column item its flex basis would become a height). */
.pc-action .pc-link-search { flex: none; width: 100%; max-width: none; }
.pc-link-why { font-weight: 600; color: var(--color-text-primary); }
/* Merge: what this check folds into, on an elevated block. */
.pc-merge-target { padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-bg-elevated); }
.pc-merge-target dt { color: var(--pc-text-soft); }
/* Correct: the shared pay-in correction form, laid out for a 400 px rail. */
.pc-action .pic { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pc-action .pic .pic-fields { grid-template-columns: minmax(0, 1fr); }
.pc-action .pic .form-group { display: flex; flex-direction: column; gap: 6px; margin: 0; }
/* The form's own labels, counters and notes, at the feature's scale: sentence case, 12 px and up, secondary not muted. */
.pc-action .pic .form-label { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-text-secondary); }
.pc-action .pic .form-input { border-color: var(--color-border-strong); border-radius: 10px; background: var(--color-bg-base); font-size: 15px; }
.pc-action .pic .pic-amount-input .form-input { height: 46px; font-size: 19px; font-weight: 500; }
.pc-action .pic textarea.form-input { height: auto; padding: 10px 12px; font-weight: 400; line-height: 1.45; }
.pc-action .pic .pic-ccy { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--color-text-secondary); }
.pc-action .pic .form-hint { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }
.pc-action .pic .dts-count { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.pc-action .pic .pic-reason { margin: 0; max-width: none; }
.pc-action .pic .pic-compare { margin: 0; max-width: none; padding: 6px 14px; border-radius: var(--radius-md); background: var(--color-bg-elevated); }
.pc-action .pic .pic-compare-row { font-size: 15px; }
.pc-action .pic .pic-compare-label { font-size: 12px; font-weight: 600; color: var(--pc-text-soft); }
.pc-action .pic .pic-compare-old { color: var(--pc-text-soft); }
.pc-action .pic .pic-note { margin: 0; font-size: 12px; font-weight: 600; }
.pc-action .pic .pic-note--warn { color: var(--pc-warning-text); }
.pc-action .pic .pic-note--danger { color: var(--pc-danger-text); }
.pc-action .pic .pic-submit { width: 100%; min-height: 44px; margin-top: 0; padding: 0 22px; justify-content: center; font-size: 15px; font-weight: 500; }
.pc-action .pic .alert-success { margin: 0; }

/* ── Rail cards ──────────────────────────────────────────────── */
.pc-card-link { align-self: flex-start; }
/* Recent unlinked chat activity. */
.pc-unl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-unl-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.pc-unl-pick { min-height: 22px; }
.pc-unl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-unl-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pc-unl-meta > * + *::before { content: "\00B7"; margin-right: 6px; color: var(--color-text-muted); }
.pc-unl-meta b { color: var(--color-text-primary); font-weight: 500; }
.pc-unl-meta > .pc-unl-link::before { content: none; }
.pc-unl-link { color: var(--color-text-primary); font-weight: 500; text-decoration: none; }
.pc-unl-link > span { display: inline-block; padding: 0 4px; }
.pc-unl-link:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.pc-unl-text { font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--color-text-primary); cursor: pointer; overflow-wrap: anywhere; }
.pc-unl-files { margin-top: 6px; }
.pc-unl-files .pc-thumb { width: 48px; height: 48px; }

/* ── Queue rows ──────────────────────────────────────────────── */
/* The shared table head and the stacked cards' labels, at the feature's scale: sentence case, 12/600 secondary. */
.pc-table thead th { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-text-secondary); }
.pc-table thead th .zone-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
table.pc-table.rt--stacked > tbody > tr > td[data-label]:not([data-label=""])::before {
    font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-text-secondary);
}
.pc-table .pc-qrow { cursor: pointer; --pc-settle-from: var(--pc-me-border); }
.pc-table .pc-qrow td { font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.pc-qid { font-size: 12px; font-weight: 600; color: var(--color-text-primary); text-decoration: none; }
.pc-qid:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }
/* The line under a cell's value: the order under the check, the key under the trader, the context under the state. */
.pc-qsub { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.pc-table .pc-qrow td.pc-qamount { font-weight: 600; white-space: nowrap; }
/* The trader's verdict: a toned word with its dot (the dot's colour comes from the tone class, thread.css).
   The dot sits on the first line of the word, so a verdict that wraps keeps it. */
.pc-qverdict { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-text-primary); }
.pc-qverdict .pc-verdict-dot { width: 8px; height: 8px; margin-top: calc((1.4em - 8px) / 2); animation: none; }
.pc-qverdict.tone-danger { color: var(--pc-danger-text); }
.pc-qverdict.tone-success { color: var(--pc-success-text); }
.pc-qverdict.tone-warning { color: var(--pc-warning-text); }
.pc-qverdict.tone-info { color: var(--pc-info-text); }
.pc-qwaiting { font-weight: 400; color: var(--color-text-secondary); }
.pc-table .pc-qrow td.pc-qopened { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }
.pc-table .pc-qopened .lt-utc { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }
/* The merchant column is the logo alone (MerchantMark): as narrow as its header and the 48 px box allow. */
.pc-table .pc-qmerchant-h, .pc-table .pc-qrow td.pc-qmerchant { width: 64px; }
.pc-table .pc-qrow td.pc-qmerchant { white-space: nowrap; }
/* A merchant without a logo shows its initials in the box: in the small box (the head's meta line, the
   link candidates, the settings rows) they keep the feature's 12 px floor. */
.pc-page .mmark .mlogo--sm .mlogo-initials { font-size: 12px; }
/* Stacked cards (below 1000 px): the amount and the verdict share the first line; the verdict takes
   the rest of the row, and keeps its place when there is no answer yet. */
table.pc-table.rt--stacked td.pc-qamount { grid-column: 1 / 2; font-size: 19px; font-weight: 500; }
table.pc-table.rt--stacked td.pc-qanswer { grid-column: 2 / -1; }
table.pc-table.rt--stacked > tbody > tr > td.pc-qanswer:empty { display: block; }
/* In a card the verdict is right-aligned text and may take two lines: the dot is part of the text there,
   right before the first word, so it never drifts to the far edge of the cell. */
table.pc-table.rt--stacked .pc-qanswer .pc-qverdict { display: inline; }
table.pc-table.rt--stacked .pc-qanswer .pc-verdict-dot { display: inline-block; margin: 0 8px 0 0; vertical-align: 1px; }
/* Row tints: the keyboard cursor is a tinted row with a ring, an overdue row sits on danger. No stripes. */
.pc-table tbody tr.pc-qrow.is-overdue { background: var(--color-danger-dim); background: color-mix(in srgb, var(--color-danger) 6%, var(--color-bg-surface)); --pc-settle-from: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.pc-table tbody tr.pc-qrow.is-cursor { background: var(--color-accent-dim); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg-surface)); box-shadow: inset 0 0 0 1px var(--color-accent); }
/* On a tinted row secondary text drops under 4.5:1 (4.2:1 on the dark cursor row, 4.3:1 on the light overdue
   row): the sub-lines, the currency, the opened time and the cards' labels use the soft text token there. */
.pc-table tbody tr.pc-qrow:is(.is-cursor, .is-overdue) :is(.pc-qsub, .pc-qccy, .pc-qopened, .pc-qopened .lt-utc, .pc-qwaiting) { color: var(--pc-text-soft); }
table.pc-table.rt--stacked > tbody > tr.pc-qrow:is(.is-cursor, .is-overdue) > td[data-label]:not([data-label=""])::before { color: var(--pc-text-soft); }
/* A row that arrived on live refresh settles once from the accent (overrides the shared liveRowIn). */
.pc-table tbody tr.live-new { animation: pcSettle 1200ms ease-out both; }

/* ── Between the phone and the rail (721 to 1099 px) ─────────── */
/* The rail has dissolved and the block spans the column. Its content keeps the width it has in the rail
   (400 px), so the buttons do not stretch into capsules as wide as the page; the card keeps the column. */
@media (min-width: 721px) and (max-width: 1099.98px) {
    .pc-action { padding-right: max(16px, calc(100% - 418px)); }
}

/* ── Phones ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .pc-action { padding: 14px; }
    /* Tap targets: a tick with its label is 44 px tall under a thumb (the unlinked rows are ticked through their text). */
    .pc-checkrow:not(.pc-unl-pick) { min-height: 44px; }
    /* The small buttons ("Open in Telegram" inside the steps, "Attach selected") are 44 px under a thumb;
       their desktop sizes stay. */
    .pc-tg-open .pc-btn--sm, .pc-unlinked .pc-btn--sm { min-height: 44px; }

    /* The head: crumbs and the queue arrows share one row, as in the mock. The way back gives way
       (it shortens with an ellipsis), the queue name stays whole up to the room the arrows leave; the
       arrows never wrap under them. They stay 28 px to look at and take a 44 px tap area around them.
       The J / K keycaps and the live indicator are left out at this width (the keys still work, the
       page still refreshes by itself every 15 s). */
    .pc-staff .pc-crumbs { flex-wrap: nowrap; gap: 6px; }
    .pc-staff .pc-qnav { gap: 4px; }
    .pc-staff .pc-qnav > kbd.pc-kbd { display: none; }
    .pc-staff .pc-crumbs > a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .pc-staff .pc-crumbs > .cur { flex: none; max-width: calc(100% - 150px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pc-staff .pc-crumbs > span[aria-hidden] { flex: none; }
    .pc-staff .pc-topend { flex: none; flex-wrap: nowrap; width: auto; margin-left: auto; }
    .pc-staff .pc-crumbs .live-refresh { display: none; }
    .pc-staff .pc-qbtn { position: relative; }
    .pc-staff .pc-qbtn::after { content: ""; position: absolute; inset: -9px; }

    /* One-line links and copy buttons are 12 px of text. Their tap area is 44 px tall; the margin takes
       the padding back, so the row they sit in does not move. Where plain text of the next line would
       cover part of that area (the meta line's second row, the next row of a grid, the order under the
       check id) the control is lifted over it. */
    .pc-staff .pc-meta :is(a, .copy-id), .pc-staff .pc-kv .copy-id { position: relative; z-index: 1; padding-block: 15px; margin-block: -15px; }
    .pc-table .pc-qid { position: relative; z-index: 1; padding-block: 15px; }
    /* The arrow to a parked message in Telegram: a 44 px area that leans up into the gap above the row,
       so it takes nothing from the tick's label right under it. */
    .pc-unl-link { padding: 24px 14px 2px; margin: -24px -14px -2px; }

    /* An open panel: "Cancel" shares the title's line, and the Copy / Edit row keeps the steps' rhythm.
       Both stay 44 px to tap; the margin takes back what the tap area adds to the row. */
    .pc-action-head { align-items: baseline; }
    .pc-action-head > .pc-textbtn, .pc-reply-tools .pc-textbtn { margin-block: -12px; }

    /* Queue toolbar: the search with the live indicator at its end (a dot and the refresh glyph, 44 px to
       tap), the geo filter under it, the two dates side by side. Fields are 44 px tall under a thumb. */
    /* The shared phone rule gives every toolbar search the full row with !important; here it leaves 52 px
       for the indicator, so this one rule has to say so as loudly. */
    }
/* From 1100 px the block lives in the sticky rail: a reveal lands its title where the stuck rail holds it. */
@media (min-width: 1100px) {
    .pc-action-title { scroll-margin-top: 33px; }
}
/* Referral program: the cabinet (trader + referral leader) and the public invite page.
   Cabinet: the admin / trader dashboard language — KpiTileExtended tiles, one
   DivergingChart card, dense rq-table rows that stack into cards on phones.
   Invite page: one calm column on the base surface, no glow, no gradient.
   Every number that lands in a style attribute is written InvariantCulture in C#. */

/* ---- Series colours: the referral program's two, shared with the admin side
   (admin-referral.css reads --ref-l1 / --ref-l2). The revenue set's blue and amber —
   the same hex as --rev-cascade / --rev-fx, a pair the dashboard palette checks for
   colour-blind separation on both themes. Every two-series referral chart takes them
   in order: level 1 / level 2, and pay-in / pay-out on the turnover view. ---- */
:root {
    --ref-l1: #2F95D6;
    --ref-l2: #C98500;
    --ref-payin: var(--ref-l1);
    --ref-payout: var(--ref-l2);
    --ref-th-bg: #181A1C;
    --ref-branch: rgba(255, 255, 255, 0.16);
}
[data-theme="light"] {
    --ref-l1: #0284C7;
    --ref-l2: #D97706;
    --ref-th-bg: #FFFFFF;
    --ref-branch: #CBD5E1;
}

/* Fade in without a transform: a transformed page would become the containing block of
   the fixed backdrops, sheets and the withdraw dialog. */
@keyframes ref-page-in { from { opacity: 0; } to { opacity: 1; } }
/* ---- Invite: actions and the public name (used by the invite card) ---- */
.ref-bar-sep { margin: 0 8px; color: var(--color-text-muted); }
/* Confirm (a new link) */
.ref-confirm { max-width: 440px; }
.ref-confirm:focus { outline: none; }
/* ---- Overview: four tiles | one chart ---- */
.ref-legend { margin-top: 8px; }
/* ---- Tabs ---- */
.ref-panel { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ref-tab {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 0 10px; border: 0; background: none;
    font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap;
    color: var(--color-text-secondary); cursor: pointer;
}
.ref-tab:hover { color: var(--color-text-primary); }
.ref-tab.is-active { color: var(--color-text-primary); font-weight: 600; }
.ref-tab.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; border-radius: 2px; background: var(--color-accent);
}
.ref-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.ref-tab-count { font-size: 11px; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Headers wrap between words only (never inside one), so a long Russian title takes
   two lines instead of an ellipsis. */
.ref-name { max-width: 100%; }
/* ---- Payouts: one line of facts with Withdraw, then the table ---- */
.ref-wallet { cursor: text; }

/* ---- One referral's page (ReferralMemberPage) ---- */
.ref-geo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ref-geo img { border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--color-border); }
/* Pay-ins by hour: 24 HTML bars, the conversion as one stretched SVG line over them. */
.ref-hours { --hrs-h: 180px; --hrs-y: 34px; display: flex; flex-direction: column; gap: 6px; }
.ref-hours-caps { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-muted); }
.ref-hours-cap-conv { color: var(--color-accent); }
.ref-hours-frame { display: grid; grid-template-columns: var(--hrs-y) minmax(0, 1fr) var(--hrs-y); column-gap: 8px; height: var(--hrs-h); }
.ref-hours-y { position: relative; }
.ref-hours-y span {
    position: absolute; right: 0; transform: translateY(50%);
    font-size: 10.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ref-hours-y-conv span { left: 0; right: auto; color: var(--color-accent); }
.ref-hours-plot { position: relative; outline: none; border-radius: 4px; }
.ref-hours-plot:focus-visible { box-shadow: 0 0 0 2px var(--color-accent); }
.ref-hours-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--color-border); }
.ref-hours-grid.is-zero { border-top: 1px solid var(--color-border-strong); }
.ref-hours-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); }
.ref-hours-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.ref-hours-col::before { content: ""; position: absolute; inset: 0 1px; border-radius: 4px; transition: background var(--transition); }
.ref-hours-col.is-active::before { background: color-mix(in srgb, var(--color-text-primary) 6%, transparent); }
.ref-hours-bar { position: relative; display: block; width: 62%; max-width: 18px; border-radius: 3px 3px 0 0; background: var(--ref-payin); opacity: .6; }
.ref-hours-col.is-peak .ref-hours-bar, .ref-hours-col.is-active .ref-hours-bar { opacity: 1; }
.ref-hours-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ref-hours-line polyline { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ref-hours-dots { position: absolute; inset: 0; pointer-events: none; }
.ref-hours-dot {
    position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, 50%);
    background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-bg-surface);
}
.ref-hours-dot.is-active { width: 9px; height: 9px; }
.ref-hours-tip { top: 4px; min-width: 190px; }
.ref-hours-tipconv { background: var(--color-accent) !important; }
.ref-hours-tip-note { margin-top: 6px; font-size: 11.5px; color: var(--color-text-muted); }
.ref-hours-axis {
    display: grid; grid-template-columns: repeat(24, minmax(0, 1fr));
    margin: 0 calc(var(--hrs-y) + 8px); font-size: 10.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.ref-hours-axis span { white-space: nowrap; overflow: visible; }
.ref-hours-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.ref-hours-foot .ref-legend { margin-top: 0; }
.ref-hours-peak { font-size: 12px; color: var(--color-text-secondary); }
.ref-hours-empty { min-height: 180px; display: flex; align-items: center; justify-content: center; }

/* The order feed */
@keyframes ref-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ref-row-new {
    0%, 30% { background: color-mix(in oklab, var(--color-accent) 16%, transparent); }
    100% { background: transparent; }
}
/* ---- Turnover with my earnings: a green line on its own right-hand scale ---- */
.ref-dual { position: relative; }
.ref-dual.has-earned { padding-right: 42px; }
.ref-dual-axis { position: absolute; top: 0; right: 0; width: 36px; height: var(--ref-dual-h); pointer-events: none; }
.ref-dual-axis span {
    position: absolute; left: 6px; transform: translateY(50%);
    font-size: 10.5px; font-weight: 600; color: var(--ref-earn); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ref-dual-plot {
    position: absolute; top: 0; right: 42px; left: calc(var(--pnl-chart-gutter) + var(--space-2));
    height: var(--ref-dual-h); pointer-events: none;
}
/* One slot per column, the same flex split as the chart's own slots; the green bar
   stands centred in it, narrower than the column it nests in. */
.ref-dual-plot { display: flex; }
.ref-dual-slot { position: relative; flex: 1 1 0; min-width: 0; height: 100%; }
.ref-dual-bar {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 26%; min-width: 2px; max-width: 9px; border-radius: 3px 3px 0 0;
    background: var(--ref-earn); box-shadow: 0 0 0 1.5px var(--color-bg-surface);
}
.ref-dual-tipdot { background: var(--ref-earn) !important; }
@media (max-width: 720px) { .ref-dual-plot { left: calc(36px + var(--space-2)); } }

/* ---- Team: working / deposit markers and the activity filter ---- */
@media (max-width: 720px) {
    .ref-hours { --hrs-y: 28px; }
    .ref-hours-axis span:not(.is-6) { visibility: hidden; }
    }

/* Earned row of the turnover tooltip: a total row that keeps its colour swatch, so
   it needs the swatch column the plain total row (label + value) does not have. */
.pnl-chart-tip-total.ref-dual-tiptotal { grid-template-columns: 8px minmax(0, 1fr) auto; }
/* Referral program, admin side: applications inbox, program hub, user referral block.
   Rides on the admin families it sits among (pnl-card, rq-table / rq-drawer, tx-card,
   dts sheets, kpi-tile-ext) and adds only what they lack. Colours come from tokens, so
   both themes follow; numbers are tabular. Prefix: arf-. */

/* Level colours are the cabinet's shared tokens (--ref-l1 / --ref-l2, referral.css),
   so a level reads the same on both sides; the chart writes var(--ref-l1, var(--arf-l1-fb)).
   These per-theme hex values are only the fallback while those tokens are missing. */
:root {
    --arf-l1-fb: #2F95D6;
    --arf-l2-fb: #C98500;
}
html[data-theme="light"] {
    --arf-l1-fb: #0284C7;
    --arf-l2-fb: #D97706;
}

/* Table rows that open something */
tr.is-muted td { color: var(--color-text-muted); }
/* ---- Rates grid (2 × 2) -------------------------------------------------- */
.arf-rate-hint { font-size: 11px; color: var(--color-text-muted); }
.arf-rate-hint.is-custom { color: var(--color-text-primary); font-weight: 600; }
/* Sticky actions at the foot of the drawer */
.arf-reject-title { font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
/* ---- Overview ------------------------------------------------------------ */
.arf-legend { margin-top: 10px; }
/* ---- Elsewhere ----------------------------------------------------------- */
/* P&L expense bars: the referral program's computed row (not a filter) */
.pnl-row.arf-pnl-auto { cursor: default; }
.pnl-row.arf-pnl-auto:hover { background: transparent; }
.arf-auto-mark {
    display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px;
    border: 1px solid var(--color-border-strong);
    font-size: 10.5px; font-weight: 600; color: var(--color-text-muted); text-transform: lowercase;
}

/* ==========================================================================
   Cabinet language for the admin side (2026-10): the hub reads like the partner
   cabinet (tabs, the period bar, tiles beside a chart, dense tables), the partner
   page is the cabinet itself, read-only, and the user tab is a grid of cards.
   ========================================================================== */
.ref-tab-count.is-new { color: var(--color-accent); }
[data-theme="light"] .ref-tab-count.is-new { color: var(--color-accent); }

/* The lead: the starting volume large, the contacts beside it */
.arf-dr-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* Label over the value, the actions beside the value: the handle gets the full width. */
.arf-dr-contacts li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 0;
}
/* Admin side of the merchant-affiliate program: the hub's Merchant affiliates tab, the
   affiliate page's deals, the Affiliate block of a merchant's Pricing tab and the deal
   sheets. Rides on admin-referral.css (arf-*: tables, pickers, sheets, flags) and the
   referral cabinet's frame (ref-*); adds only what the deals need. Colours are theme
   tokens; numbers are tabular. Prefix: aaf-. */

/* The merchant program's colour in the hub chart: a teal that sits apart from the
   trader program's blue (L1) and amber (L2) and from the green earnings bars. */
:root { --aaf-merchant: #2BB3A3; }
html[data-theme="light"] { --aaf-merchant: #0F8F82; }

/* ---- Merchant page: the Affiliate block ----------------------------------- */
.aaf-deal-note {
    margin: 14px 0 0; max-width: 640px; font-size: 12.5px; line-height: 1.5;
    color: var(--color-text-secondary); overflow-wrap: anywhere;
}
/* ═══════════════════════════════════════════════════════════════════════════
   DEVICES — health of the phones and browsers that confirm pay-ins.
   Shared by the admin fleet screen, the device drawer and the trader's page.
   Prefix: dvx- (shared parts). Page-specific rules live under their own
   prefixes (dva- admin, dvt- trader) further down or in the page files.
   One colour language everywhere:
     ok   → --color-success   (working)
     warn → --color-warning   (needs attention)
     bad  → --color-danger    (not working / offline)
     idle → --color-info      (waiting for pairing)
     off  → muted text        (not in use / disconnected)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --dvx-ok: var(--color-success);
    --dvx-warn: var(--color-warning);
    --dvx-bad: var(--color-danger);
    --dvx-idle: var(--color-info);
    --dvx-off: var(--color-text-muted);
    --dvx-ease: cubic-bezier(.2, .8, .2, 1);
    --dvx-airtel: #E40000;
    --dvx-gpay: #1A73E8;
    --dvx-paytm: #00A6E0;
}

.dvx-tone-ok   { --dvx-tone: var(--dvx-ok); }
.dvx-tone-warn { --dvx-tone: var(--dvx-warn); }
.dvx-tone-bad  { --dvx-tone: var(--dvx-bad); }
.dvx-tone-idle { --dvx-tone: var(--dvx-idle); }
.dvx-tone-off  { --dvx-tone: var(--dvx-off); }

/* ── verdict mark ─────────────────────────────────────────────────────────── */
.dvx-mark {
    --s: 24px;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    color: var(--dvx-tone);
    background: color-mix(in srgb, var(--dvx-tone) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dvx-tone) 34%, transparent);
    font-size: calc(var(--s) * .46);
}
.dvx-mark--sm { --s: 16px; font-size: 8px; }
.dvx-mark--lg { --s: 44px; font-size: 18px; }
.dvx-mark .dvx-strike { position: relative; }
.dvx-mark .dvx-strike::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px; top: 50%;
    height: 1.5px;
    background: currentColor;
    transform: rotate(-40deg);
    border-radius: 2px;
}
.dvx-mark--alarm::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1.5px solid var(--dvx-tone);
    opacity: 0;
    animation: dvx-ring 2.6s var(--dvx-ease) infinite;
}
@keyframes dvx-ring {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(1.75); opacity: 0; }
    100% { transform: scale(1.75); opacity: 0; }
}

/* ── mode monogram ────────────────────────────────────────────────────────── */
.dvx-mode { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dvx-mode-tile {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font: 700 11px/1 var(--font-family);
    color: #fff;
    letter-spacing: 0;
}
.dvx-mode-tile i { font-size: 9px; }
.dvx-mode-airtel { background: var(--dvx-airtel); }
.dvx-mode-gpay { background: var(--dvx-gpay); }
.dvx-mode-extension { background: var(--dvx-paytm); }
.dvx-mode-notifications { background: var(--color-bg-hover); color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.dvx-mode-unset, .dvx-mode-unknown {
    background: transparent;
    color: var(--color-text-muted);
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
    border: 1px dashed transparent;
}
.dvx-mode-label { font-size: var(--font-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── checklist ────────────────────────────────────────────────────────────── */
.dvx-checks { display: grid; gap: 18px; }
.dvx-checks-title {
    margin: 0 0 6px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.dvx-checks-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dvx-check {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--color-border);
    animation: dvx-rise .32s var(--dvx-ease) both;
}
.dvx-checks-list .dvx-check:first-child { border-top: 0; }
.dvx-check-icon { font-size: 13px; transform: translateY(1px); }
.dvx-check--ok .dvx-check-icon { color: var(--dvx-ok); }
.dvx-check--warn .dvx-check-icon { color: var(--dvx-warn); }
.dvx-check--fail .dvx-check-icon { color: var(--dvx-bad); }
.dvx-check--unknown .dvx-check-icon { color: var(--color-text-muted); }
.dvx-check-label { color: var(--color-text-primary); font-size: var(--font-base); }
.dvx-check-value {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    text-align: right;
    max-width: 52ch;
}
.dvx-check--fail .dvx-check-value { color: var(--dvx-bad); }
.dvx-check--warn .dvx-check-value { color: var(--dvx-warn); }
.dvx-check-note {
    grid-column: 2 / -1;
    margin: 4px 0 0;
    font-size: var(--font-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.dvx-checks--compact .dvx-check { padding: 6px 0; }
.dvx-checks--compact .dvx-check-note { display: none; }

@keyframes dvx-rise {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ── activity strip ───────────────────────────────────────────────────────── */
.dvx-strip { display: grid; gap: 6px; }
.dvx-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dvx-strip-share { font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.dvx-strip-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--font-xs); color: var(--color-text-secondary); }
.dvx-strip-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.dvx-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dvx-key-work { background: var(--dvx-ok); }
.dvx-key-away { background: var(--dvx-warn); }
.dvx-key-off { background: var(--dvx-bad); opacity: .7; }
.dvx-key-confirmed { width: 2px; height: 10px; border-radius: 1px; background: var(--dvx-ok); }
.dvx-key-attention { width: 2px; height: 10px; border-radius: 1px; background: var(--dvx-warn); }

.dvx-strip-svg { display: block; width: 100%; height: 30px; overflow: visible; }
.dvx-strip--compact .dvx-strip-svg { height: 8px; border-radius: 4px; overflow: hidden; }
.dvx-strip-bars { animation: dvx-wipe .7s var(--dvx-ease) both; }
.dvx-bar-base { fill: var(--color-bg-elevated); }
.dvx-bar { transition: opacity .15s; }
.dvx-bar:hover { opacity: .78; }
.dvx-bar-work { fill: var(--dvx-ok); }
.dvx-bar-away { fill: var(--dvx-warn); }
.dvx-bar-off { fill: var(--dvx-bad); fill-opacity: .62; }
.dvx-bar-idle { fill: var(--color-text-muted); fill-opacity: .45; }
.dvx-hatch-line { stroke: var(--color-border-strong); stroke-width: 2; }
.dvx-tick line { stroke-width: 2; vector-effect: non-scaling-stroke; }
.dvx-tick-confirmed line { stroke: var(--dvx-ok); }
.dvx-tick-attention line { stroke: var(--dvx-warn); }
.dvx-tick-credit line { stroke: var(--color-text-muted); }
.dvx-strip-axis { position: relative; height: 14px; font-size: var(--font-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.dvx-strip-axis > span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

@keyframes dvx-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* ── message for the trader ───────────────────────────────────────────────── */
.dvx-msg {
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    box-shadow: inset 0 0 0 1px var(--color-border);
    overflow: hidden;
}
.dvx-msg-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--font-base); color: var(--color-text-primary); }
.dvx-msg-title i { color: #2AABEE; font-size: 15px; }
.dvx-msg-text {
    margin: 10px 12px 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    border-left: 3px solid var(--dvx-tone, var(--color-border-strong));
    font: 400 var(--font-base)/1.6 var(--font-family);
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}
.dvx-msg-hint { font-size: var(--font-xs); color: var(--color-text-muted); }
@keyframes dvx-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ── numbered fix steps (trader) ──────────────────────────────────────────── */
.dvx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }
.dvx-step {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    animation: dvx-rise .34s var(--dvx-ease) both;
    animation-delay: calc(var(--i, 0) * 50ms);
}
.dvx-step-num {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font: 700 var(--font-sm)/1 var(--font-family);
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    box-shadow: inset 0 0 0 1.5px var(--dvx-bad);
}
.dvx-step--warn .dvx-step-num { box-shadow: inset 0 0 0 1.5px var(--dvx-warn); }
.dvx-step-body { display: grid; gap: 3px; padding-top: 3px; }
.dvx-step-title { font-weight: 600; color: var(--color-text-primary); font-size: var(--font-base); }
.dvx-step-fix { color: var(--color-text-secondary); font-size: var(--font-base); line-height: 1.55; }

/* ── motion preferences ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .dvx-mark--alarm::before,
    .dvx-check,
    .dvx-step,
    .dvx-strip-bars { animation: none !important; }
}
/* Trader devices page, payment-method automation panel, dashboard widget. Prefix: dvt-. Shared parts: devices.css (dvx-).
   Healthy is quiet: plain surfaces, muted meta, colour only where it means something
   (the verdict, a problem, auto-confirm being on). Problems sit on top and are tinted
   with the card's own tone (--dvx-tone, set by .dvx-tone-* on the card). */

/* ── shared bits ──────────────────────────────────────────────────────────── */
.dvt-dash:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@keyframes dvt-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── page header ──────────────────────────────────────────────────────────── */
.dvt-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--color-text-primary);
}
/* the day: one legend under the grid, so each card shows only the bar */
@keyframes dvt-wait { from { opacity: .45; } to { opacity: 1; } }

/* payment methods this device feeds */
.dvt-method {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 2px 12px;
    min-height: 48px;
    padding: 8px 0;
    color: inherit;
    text-decoration: none;
}
/* ── dashboard: auto-confirm card ─────────────────────────────────────────── */
.dvt-dash {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s;
    animation: dvt-rise .3s var(--dvx-ease) both;
}
.dvt-dash:hover { border-color: var(--color-border-strong); }
.dvt-dash.dvx-tone-bad  { border-color: color-mix(in srgb, var(--dvx-bad) 38%, var(--color-border)); }
.dvt-dash.dvx-tone-warn { border-color: color-mix(in srgb, var(--dvx-warn) 38%, var(--color-border)); }
.dvt-dash-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dvt-dash-title { font-size: var(--font-base); font-weight: 600; color: var(--color-text-secondary); }
.dvt-dash-quiet { font-size: var(--font-base); color: var(--color-text-primary); min-width: 0; }
.dvt-dash-go { margin-left: auto; font-size: 11px; color: var(--color-text-muted); transition: transform .2s var(--dvx-ease); }
.dvt-dash:hover .dvt-dash-go { transform: translateX(2px); }
.dvt-dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dvt-dash-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; font-size: var(--font-base); }
.dvt-dash-name { font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }
.dvt-dash-line { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── phones ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .dvt-title { font-size: 19px; }
    .dvt-dash-row { grid-template-columns: auto minmax(0, 1fr); }
    .dvt-dash-line { grid-column: 2; white-space: normal; }
}
@media (max-width: 400px) {
    .dvt-method { grid-template-columns: minmax(0, 1fr) auto auto; }
    }
/* ── motion preferences ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .dvt-dash { animation: none !important; }
    .dvt-dash-go { transition: none !important; }
}
/* ================================================================
   ATLAS design system, portal edition (atlas-ds).

   One visual language with the marketing site (src/landing-site,
   styles/tokens.css + global.css) and the API docs (docs/src/00-head.html).
   Token names and values are the site's / docs' ones; see
   DESIGN-SYSTEM.md next to the .csproj for what is shared and how the
   rest of the portal can move over.

   Scope: everything here lives under `.pds` (the root of the public
   pages: /login, /join). The rest of the portal keeps app.css and is not
   touched by this file: no :root tokens, no element selectors outside
   `.pds`, font families with their own names.
   ================================================================ */

/* ---------- fonts (self-hosted, same files as the site's public/fonts) ---------- */
/* Own family names so the portal's Google-hosted "DM Sans" (app.css) is not replaced. */
@font-face {
  font-family: 'ATLAS DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'ATLAS DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'ATLAS JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'ATLAS JetBrains Mono';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-700.woff2') format('woff2');
}

/* ---------- colour tokens ----------
   Copied from the site (src/landing-site/src/styles/tokens.css, "Colour themes"): same names, same
   values, both themes. Only the subset these pages paint with; add more by copying from there, never
   by inventing a near-duplicate. Dark is the default; light follows <html data-theme="light">. */
.pds {
  color-scheme: dark;

  /* ground and surfaces */
  --ground: #0e1012;
  --ground-2: #111315;
  --surface: #17191c;
  --surface-raised: #1d2125;
  --surface-hover: #282c31;
  --surface-shadow: 0 0 #0000;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --hairline-hover: rgba(255, 255, 255, 0.24);
  --wash-1: rgba(255, 255, 255, 0.02);
  --wash-2: rgba(255, 255, 255, 0.05);
  --wash-3: rgba(255, 255, 255, 0.08);

  /* popovers: listbox, menus */
  --popover: #1c1f22;
  --popover-row: #2a2d31;

  /* form fields */
  --field-bg: #111315;
  --field-border: rgba(255, 255, 255, 0.14);
  --field-border-hover: rgba(255, 255, 255, 0.24);

  /* text */
  --text: #ffffff;
  --text-prose: #b3b8bf;
  --text-2: #8a8f98; /* secondary, AA on every surface */
  --text-3: #5a5f66; /* decoration only: fails AA as text */

  /* accent: lime in dark, sparingly (ticks, the selected option, the focus ring) */
  --accent: #8fff00;
  --accent-rgb: 143, 255, 0;
  --accent-text: #0e1012;
  --accent-tint: rgba(143, 255, 0, 0.14);
  --accent-ring: rgba(143, 255, 0, 0.28);

  /* status */
  --success: #8fff00;
  --success-tint: rgba(143, 255, 0, 0.14);
  --error: #fd7557;
  --error-tint: rgba(253, 117, 87, 0.1);

  --focus-ring: #8fff00;
  --selection-bg: #8fff00;
  --selection-text: #0e1012;

  /* buttons */
  --btn-primary-bg: #f2f3f5;
  --btn-primary-bg-hover: #ffffff;
  --btn-primary-text: #0e1012;

  /* chrome, shadows */
  --header-glass: rgba(14, 16, 18, 0.72);
  --shadow-popover: 0 24px 56px -16px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-listbox: 0 18px 40px rgba(0, 0, 0, 0.45);

  /* brand marks and decoration */
  --logo-ring: #ffffff; /* ATLAS mark rings (its core is --accent) */
  --flag-ring: rgba(255, 255, 255, 0.12);
  --band-glow: rgba(255, 255, 255, 0.05); /* the site's CTA band: top glow */
  --band-dots: rgba(255, 255, 255, 0.09); /* the site's CTA band: dot grid */

  /* type: the site's families under their own names (see the @font-face note above) */
  --font-sans: 'ATLAS DM Sans', 'DM Sans', 'Inter', 'Noto Sans Devanagari', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'ATLAS JetBrains Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-body: 16px;
  --fs-small: 14px;

  /* layout and motion (site values) */
  --gutter: 16px;
  --radius: 20px;
  --radius-sm: 12px;
  --header-h: 64px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html[data-theme='light'] .pds {
  color-scheme: light;

  --ground: #f8fafc;
  --ground-2: #f1f5f9;
  --surface: #ffffff;
  --surface-raised: #f1f5f9;
  --surface-hover: #e9eef4;
  --surface-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -20px rgba(15, 23, 42, 0.12);
  --hairline: #e2e8f0;
  --hairline-strong: #cbd5e1;
  --hairline-hover: #94a3b8;
  --wash-1: rgba(15, 23, 42, 0.02);
  --wash-2: rgba(15, 23, 42, 0.04);
  --wash-3: rgba(15, 23, 42, 0.06);

  --popover: #ffffff;
  --popover-row: #f1f5f9;

  --field-bg: #ffffff;
  --field-border: #cbd5e1;
  --field-border-hover: #94a3b8;

  --text: #0f172a;
  --text-prose: #334155;
  --text-2: #5b6577;
  --text-3: #94a3b8;

  --accent: #4f46e5;
  --accent-rgb: 79, 70, 229;
  --accent-text: #ffffff;
  --accent-tint: #eef2ff;
  --accent-ring: rgba(79, 70, 229, 0.22);

  --success: #047857;
  --success-tint: #ecfdf5;
  --error: #b42318;
  --error-tint: #fef3f2;

  --focus-ring: #4f46e5;
  --selection-bg: #c7d2fe;
  --selection-text: #0f172a;

  --btn-primary-bg: #0f172a;
  --btn-primary-bg-hover: #1e293b;
  --btn-primary-text: #ffffff;

  --header-glass: rgba(248, 250, 252, 0.8);
  --shadow-popover: 0 24px 56px -16px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-listbox: 0 18px 40px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);

  --logo-ring: #0f172a;
  --flag-ring: rgba(15, 23, 42, 0.12);
  --band-glow: rgba(79, 70, 229, 0.06);
  --band-dots: rgba(15, 23, 42, 0.09);
}

/* ================================================================
   Shell: page ground, top bar, main column, footer
   ================================================================ */
.pds {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* calm background: the site's CTA-band recipe (a faint dot grid and one soft glow from the top) */
.pds::before,
.pds::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.pds::before {
  background-image: radial-gradient(var(--band-dots) 1px, transparent 1.2px);
  background-size: 20px 20px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(60% 52% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(60% 52% at 50% 0%, #000 0%, transparent 100%);
}
.pds::after {
  background: radial-gradient(56% 44% at 50% 0%, var(--band-glow), transparent 70%);
}

/* element resets: :where() keeps them at element specificity, so every .pds-* class wins over them */
:where(.pds) *,
:where(.pds) *::before,
:where(.pds) *::after {
  box-sizing: border-box;
}
:where(.pds) ::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}
:where(.pds) :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
:where(.pds) a {
  color: inherit;
  text-decoration: none;
}
/* app.css underlines every a:hover (0,1,1); links here use their own hairline */
.pds a:hover {
  text-decoration: none;
}
:where(.pds) :is(button, input, textarea) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
/* app.css moves every control to Inter in Russian (html[lang="ru"] input, 0,1,2). Here controls keep the
   page's stack (it falls back to Inter for Cyrillic itself) and the mono fields stay mono. */
html .pds :is(button, input, textarea) {
  font-family: inherit;
}
html .pds .pds-input--mono {
  font-family: var(--font-mono);
}
:where(.pds) button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
:where(.pds) svg {
  display: block;
  flex: none;
}

/* top bar */
.pds-top {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.pds-top__right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pds-top__site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-2);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.pds-top__site:hover {
  color: var(--text);
  background: var(--wash-2);
}

/* logo: the site's Logo.astro (mark + wordmark), inks from tokens */
.pds-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--logo-ring);
  border-radius: 8px;
}
.pds-logo__core {
  fill: var(--accent);
}
.pds-logo__word {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.2em;
  line-height: 1;
  margin-right: -0.2em;
}
/* the brand, large on the public pages: the mark reads as the brand, not as an icon */
.pds-logo {
  gap: 16px;
}
.pds-logo__mark {
  flex: none;
  width: 52px;
  height: 52px;
}
.pds-logo__word {
  font-size: 26px;
}
@media (max-width: 1023px) {
  .pds-logo {
    gap: 12px;
  }
  .pds-logo__mark {
    width: 40px;
    height: 40px;
  }
  .pds-logo__word {
    font-size: 20px;
  }
}

/* round icon buttons (theme, language) */
.pds-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.pds-iconbtn:hover,
.pds-iconbtn[aria-expanded='true'] {
  color: var(--text);
  background: var(--wash-2);
}
.pds-iconbtn:focus-visible {
  outline-offset: 1px;
}

/* small menu (language) */
.pds-menu {
  position: relative;
}
.pds-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
}
.pds-menu__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-listbox);
  animation: pds-pop-in 0.16s var(--ease-out);
}
/* the language menu with its filter box: the box is sticky at the top edge, the rows a plain list */
.pds-menu__list--searchable {
  padding-top: 0;
  min-width: 220px;
}
.pds-menu__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pds-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--text-2);
  text-align: left;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.pds-menu__item:hover,
.pds-menu__item:focus-visible {
  background: var(--popover-row);
  color: var(--text);
  outline: none;
}
.pds-menu__item[aria-checked='true'] {
  color: var(--text);
}
.pds-menu__item svg {
  color: var(--accent);
}

/* main column */
.pds-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: clamp(24px, 7vh, 88px) var(--gutter) 48px;
}
.pds-col {
  width: 100%;
  max-width: 440px;
}
.pds-col--wide {
  max-width: 600px;
}

/* footer */
.pds-foot {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 20px var(--gutter) 28px;
  font-size: 13px;
  color: var(--text-2);
}
.pds-foot a {
  transition: color 0.2s ease;
}
.pds-foot a:hover {
  color: var(--text);
}

/* ================================================================
   Card and type
   ================================================================ */
.pds-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  box-shadow: var(--surface-shadow);
  padding: 40px;
}
.pds-enter {
  animation: pds-rise 0.5s var(--ease-out) both;
}
.pds-h1 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 34px);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.pds-h1:focus {
  outline: none;
}
.pds-lead {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.pds-lead strong {
  color: var(--text);
  font-weight: 500;
}
.pds-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
}

/* a quiet line under a card ("No access yet? Apply to join") */
.pds-aside {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 10px;
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--text-2);
  text-align: center;
}

/* links */
.pds-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.pds-link:hover {
  border-bottom-color: var(--text);
}
.pds-link svg {
  width: 12px;
  height: 12px;
  transition: transform 0.25s var(--ease-out);
}
.pds-link:hover svg {
  transform: translateX(2px);
}
.pds-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -6px 0 20px -8px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-2);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.pds-back:hover {
  color: var(--text);
  background: var(--wash-2);
}
.pds-back svg {
  width: 14px;
  height: 14px;
}

/* ================================================================
   Form fields (the site's ContactModal recipe)
   ================================================================ */
.pds-form {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}
.pds-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.pds-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
/* a <legend> is not a grid item of its fieldset: it needs its own gap */
legend.pds-label {
  margin-bottom: 8px;
}
.pds-label__opt {
  font-weight: 400;
  color: var(--text-2);
}
.pds-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.pds-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--error);
}
.pds-error svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.pds-control {
  position: relative;
  display: flex;
  align-items: center;
}
.pds-input {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.pds-input::placeholder {
  color: var(--text-2);
  opacity: 0.8;
}
.pds-input:hover {
  border-color: var(--field-border-hover);
}
/* the ring sits outside the field, so a red error border stays visible inside it */
.pds-input:focus-visible,
.pds-input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.pds-input[aria-invalid='true'],
.pds-input[aria-invalid='true']:hover,
.pds-input[aria-invalid='true']:focus {
  border-color: var(--error);
}
.pds-input[readonly] {
  cursor: progress;
}
.pds-input--mono {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.08em;
}
.pds-input--with-btn {
  padding-right: 52px;
}
.pds-input--with-unit {
  padding-right: 64px;
}
textarea.pds-input {
  min-height: 104px;
  resize: vertical;
}
.pds-control__btn {
  position: absolute;
  right: 6px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--text-2);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.pds-control__btn:hover {
  color: var(--text);
  background: var(--wash-2);
}
.pds-control__btn:focus-visible {
  outline-offset: 0;
}
.pds-control__btn svg {
  width: 20px;
  height: 20px;
}
.pds-control__unit {
  position: absolute;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
  pointer-events: none;
}

/* ---------- buttons (site pills) ---------- */
.pds-btn {
  --btn-h: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h);
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out);
}
.pds-btn:active:not([disabled]) {
  transform: scale(0.98);
}
.pds-btn--block {
  width: 100%;
}
.pds-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.pds-btn--primary:hover:not([disabled]) {
  background: var(--btn-primary-bg-hover);
}
.pds-btn--secondary {
  border-color: var(--hairline-strong);
  color: var(--text);
}
.pds-btn--secondary:hover {
  background: var(--wash-2);
  border-color: var(--hairline-hover);
}
.pds-btn[aria-busy='true'] {
  cursor: progress;
}
.pds-btn[disabled]:not([aria-busy='true']) {
  opacity: 0.5;
  cursor: not-allowed;
}
.pds-btn svg {
  width: 16px;
  height: 16px;
}
.pds-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: pds-spin 0.7s linear infinite;
}

/* ---------- listbox (the site's custom select, with flags) ---------- */
.pds-select {
  position: relative;
}
.pds-select__button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  transition: border-color 0.2s ease;
}
.pds-select__button:hover,
.pds-select__button[aria-expanded='true'] {
  border-color: var(--field-border-hover);
}
.pds-select__button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.pds-select__button[aria-invalid='true'] {
  border-color: var(--error);
}
.pds-select__value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pds-select__placeholder {
  color: var(--text-2);
}
.pds-select__chev {
  color: var(--text-2);
  transition: rotate 0.2s ease;
}
.pds-select__button[aria-expanded='true'] .pds-select__chev {
  rotate: 180deg;
}
.pds-select__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
}
.pds-select__pop {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(360px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 6px 6px;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-listbox);
  animation: pds-pop-in 0.16s var(--ease-out);
}
.pds-select__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pds-select__option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.pds-select__option > span {
  flex: 1;
}
.pds-select__option.is-active {
  background: var(--popover-row);
  color: var(--text);
}
.pds-select__option[aria-selected='true'] {
  color: var(--text);
}
.pds-select__option .pds-select__tick {
  color: var(--accent);
  opacity: 0;
}
.pds-select__option[aria-selected='true'] .pds-select__tick {
  opacity: 1;
}
.pds-flag {
  width: 24px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--flag-ring);
  flex: none;
}

/* ---------- option cards (radio group) ---------- */
.pds-choices {
  display: grid;
  gap: 10px;
}
.pds-choice {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pds-choice:hover {
  border-color: var(--field-border-hover);
}
.pds-choice.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--field-bg));
}
.pds-choice:has(.pds-radio:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.pds-choices[aria-invalid='true'] .pds-choice:not(.is-on) {
  border-color: color-mix(in srgb, var(--error) 55%, var(--hairline-strong));
}
.pds-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.pds-choice__dot {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease;
}
.pds-choice__dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.2s var(--ease-out);
}
.pds-choice.is-on .pds-choice__dot {
  border-color: var(--accent);
}
.pds-choice.is-on .pds-choice__dot::after {
  transform: scale(1);
}
.pds-choice__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.pds-choice__body {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}

/* honeypot field: off screen, out of the tab order (aria-hidden on the wrapper) */
.pds-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- done state ---------- */
.pds-tick {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--success);
  background: var(--success-tint);
  animation: pds-pop 0.5s var(--ease-out);
}
.pds-tick svg {
  width: 22px;
  height: 22px;
}

/* ---------- motion ---------- */
@keyframes pds-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes pds-fade {
  from {
    opacity: 0;
  }
}
@keyframes pds-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes pds-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}
@keyframes pds-spin {
  to {
    transform: rotate(360deg);
  }
}

/* one frame without transitions while the theme flips (set by themeHelpers.setTheme) */
html.theme-switching .pds,
html.theme-switching .pds *,
html.theme-switching .pds *::before,
html.theme-switching .pds *::after {
  transition: none !important;
}

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .pds-top {
    padding: 0 12px 0 var(--gutter);
  }
  .pds-top__site {
    display: none;
  }
  .pds-main {
    padding-top: 16px;
  }
  .pds-card {
    padding: 28px 20px 24px;
    border-radius: 18px;
  }
}

/* responsive.css sets every input on touch screens to 16px !important (0,3,1) so iOS does not zoom;
   the mono key field is bigger than that on purpose, so it needs a stronger selector to keep its size */
@media (max-width: 960px) and (pointer: coarse) {
  .pds .pds-form .pds-control input.pds-input--mono {
    font-size: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pds *,
  .pds *::before,
  .pds *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .pds .pds-spinner {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ---------- filter box of every dropdown (MenuSearch, DS.md "Every dropdown has search") ---------- */
.pds .pro-geo-search {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -6px 6px;
  padding: 6px 12px 8px;
  background: var(--popover);
  border-bottom: 1px solid var(--hairline);
}
.pds .pro-geo-search-icon {
  flex: none;
  color: var(--text-2);
}
.pds .pro-geo-search-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.pds .pro-geo-search-input:focus {
  border-color: var(--field-border-hover);
}
.pds .pro-geo-search-input::placeholder {
  color: var(--text-2);
}
.pds .pro-geo-empty {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text-2);
}
/* /Components/Admin/LabelBook/AlbPersonLink.razor.rz.scp.css */
/* The platform's in-table link: the text's own ink, an underline on hover, a visible focus ring. */
.alb-person[b-wd1pbj4nu8] { color: inherit; text-decoration: none; }
.alb-person:hover[b-wd1pbj4nu8] { text-decoration: underline; text-underline-offset: 3px; }
.alb-person:focus-visible[b-wd1pbj4nu8] { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }
/* /Components/Admin/LabelBook/LabelBreakdown.razor.rz.scp.css */
/* ---- Operation figures: six quiet cells, value over its label's sub-line ---- */
.alb-stats[b-z2v74ilhjs] {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0; margin: 0 0 var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.alb-stat[b-z2v74ilhjs] { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; }
.alb-stat + .alb-stat[b-z2v74ilhjs] { border-left: 1px solid var(--color-border); }
.alb-stat dt[b-z2v74ilhjs] { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.alb-stat dd[b-z2v74ilhjs] { margin: 0; }
.alb-stat-value[b-z2v74ilhjs] {
    font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-primary);
}
.alb-stat-sub[b-z2v74ilhjs] {
    display: flex; flex-wrap: wrap; gap: 2px 8px;
    font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
@media (max-width: 1180px) {
    .alb-stats[b-z2v74ilhjs] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .alb-stat:nth-child(4)[b-z2v74ilhjs] { border-left: 0; }
    .alb-stat:nth-child(n + 4)[b-z2v74ilhjs] { border-top: 1px solid var(--color-border); }
}
@media (max-width: 560px) {
    .alb-stats[b-z2v74ilhjs] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alb-stat:nth-child(odd)[b-z2v74ilhjs] { border-left: 0; }
    .alb-stat:nth-child(4)[b-z2v74ilhjs] { border-left: 1px solid var(--color-border); }
    .alb-stat:nth-child(n + 3)[b-z2v74ilhjs] { border-top: 1px solid var(--color-border); }
}

/* ---- Tabs + tables ---- */
.alb-bd-tabs[b-z2v74ilhjs] { margin-bottom: var(--space-3); }
.alb-bd-count[b-z2v74ilhjs] { margin-left: 6px; font-size: 11.5px; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
html .alb-bd-wrap.pg-table-wrap[b-z2v74ilhjs] { margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow-x: auto; }
.alb-bd-table th.alb-num[b-z2v74ilhjs], .alb-bd-table td.alb-num[b-z2v74ilhjs] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alb-bd-table td.alb-num[b-z2v74ilhjs] { color: var(--color-text-primary); }
.alb-bd-table td.alb-strong[b-z2v74ilhjs] { font-weight: 700; }
/* The requisite owner's share: information, not label income. */
.alb-bd-table td.alb-num.alb-muted[b-z2v74ilhjs] { color: var(--color-text-muted); }
.alb-acc-name[b-z2v74ilhjs] { display: inline-flex; align-items: center; gap: 7px; }
.alb-bd-total td[b-z2v74ilhjs] { font-weight: 700; border-top: 1px solid var(--color-border-strong); color: var(--color-text-primary); }

.alb-share-col[b-z2v74ilhjs] { width: 180px; }
.alb-share[b-z2v74ilhjs] { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.alb-share-bar[b-z2v74ilhjs] { height: 4px; border-radius: 2px; background: var(--color-bg-elevated); overflow: hidden; }
.alb-share-bar > span[b-z2v74ilhjs] { display: block; height: 100%; border-radius: 2px; background: var(--color-text-muted); }
.alb-share-val[b-z2v74ilhjs] { font-size: 12px; color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.alb-bd-table.rt--stacked .alb-share-col[b-z2v74ilhjs] { width: auto; }
/* /Components/Admin/LabelBook/LabelStatement.razor.rz.scp.css */
/* The statement: a two-column ledger — item left, amount right on the digits. Groups
   open with a quiet heading; a total row has a rule above it and bold ink; affiliate
   names sit one step in under their program. */
.alb-stmt-head[b-3t6q130ewl] { align-items: center; flex-wrap: wrap; }
.alb-stmt-actions[b-3t6q130ewl] { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.alb-stmt-actions i[b-3t6q130ewl] { margin-right: 6px; font-size: 12px; }
.alb-stmt-error[b-3t6q130ewl] { margin: -4px 0 var(--space-3); font-size: 12.5px; color: var(--color-danger); }

.alb-stmt[b-3t6q130ewl] { width: 100%; border-collapse: collapse; font-size: 13px; }
.alb-stmt-amt-col[b-3t6q130ewl] { width: 1%; }
.alb-stmt th[b-3t6q130ewl], .alb-stmt td[b-3t6q130ewl] { padding: 6px 0; vertical-align: baseline; }
.alb-stmt th[scope="row"][b-3t6q130ewl] {
    font-weight: 500; text-align: left; color: var(--color-text-secondary);
}
.alb-stmt th[scope="row"] .pnl-swatch[b-3t6q130ewl] { margin-right: 8px; vertical-align: 1px; }
.alb-stmt td[b-3t6q130ewl] {
    text-align: right; white-space: nowrap; padding-left: var(--space-4);
    font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-primary);
}
.alb-stmt tbody + tbody .alb-stmt-group th[b-3t6q130ewl] { padding-top: 18px; }
.alb-stmt-group th[b-3t6q130ewl] {
    padding: 0 0 4px; text-align: left;
    font-size: 12px; font-weight: 700; color: var(--color-text-primary);
}
.alb-stmt-group-note[b-3t6q130ewl] { margin-left: 8px; font-weight: 500; color: var(--color-text-muted); }
.alb-stmt-total th[scope="row"][b-3t6q130ewl], .alb-stmt-total td[b-3t6q130ewl] { border-top: 1px solid var(--color-border); padding-top: 8px; }
.alb-stmt-total th[scope="row"][b-3t6q130ewl] { font-weight: 700; color: var(--color-text-primary); }
.alb-stmt-total td[b-3t6q130ewl] { font-weight: 800; }
.alb-stmt-grand th[scope="row"][b-3t6q130ewl], .alb-stmt-grand td[b-3t6q130ewl] { border-top-color: var(--color-border-strong); font-size: 14px; }
.alb-stmt-sub th[scope="row"][b-3t6q130ewl] { color: var(--color-text-primary); }
.alb-stmt-party th[scope="row"][b-3t6q130ewl] { padding-left: 16px; font-size: 12.5px; color: var(--color-text-muted); }
.alb-stmt-party td[b-3t6q130ewl] { font-size: 12.5px; font-weight: 500; }
/* Information outside the sums (the requisite owners' share): muted, light. */
.alb-stmt-info th[scope="row"][b-3t6q130ewl], .alb-stmt-info td[b-3t6q130ewl] { font-size: 12.5px; font-weight: 500; color: var(--color-text-muted); }
.alb-stmt-foot[b-3t6q130ewl] { margin: var(--space-3) 0 0; font-size: 12px; color: var(--color-text-muted); }

.alb-sr[b-3t6q130ewl] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* /Components/Admin/LabelBook/LabelTeamCard.razor.rz.scp.css */
/* The team as square member cards on the page's surface tokens (dark and light alike):
   a quiet elevated tile per member, the avatar and name on top, four facts, the actions
   at the foot; a quiet tile to add one. No chips, no glow: hierarchy by type and ink. */
.alb-team-head[b-u7esiaoipb] { flex-wrap: wrap; }
.alb-team-head-right[b-u7esiaoipb] { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: flex-end; }

.alb-tm-grid[b-u7esiaoipb] {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
.alb-tm[b-u7esiaoipb] {
    aspect-ratio: 1 / 1; min-width: 0;
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px; border: 1px solid var(--color-border); border-radius: 12px;
    background: var(--color-bg-elevated);
}

/* Avatar + name + role: the profile link when the viewer may open it. */
.alb-tm[b-u7esiaoipb]  .alb-tm-who {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
    border-radius: 8px;
}
.alb-tm-ava[b-u7esiaoipb] { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 5px; flex: none; }
.alb-tm-name[b-u7esiaoipb] {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px; font-weight: 700; color: var(--color-text-primary);
}
.alb-tm-role[b-u7esiaoipb] {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; color: var(--color-text-secondary);
}

.alb-tm-facts[b-u7esiaoipb] {
    margin: auto 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px;
}
.alb-tm-facts > div[b-u7esiaoipb] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alb-tm-facts dt[b-u7esiaoipb] { font-size: 11.5px; font-weight: 500; line-height: 1.25; color: var(--color-text-muted); overflow-wrap: anywhere; }
.alb-tm-facts dd[b-u7esiaoipb] {
    margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.alb-tm-actions[b-u7esiaoipb] { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Archived: the same card, dimmed. */
.alb-tm.is-archived[b-u7esiaoipb] { background: transparent; }
.alb-tm.is-archived .alb-tm-ava[b-u7esiaoipb] { filter: grayscale(1); opacity: .55; }
.alb-tm.is-archived .alb-tm-name[b-u7esiaoipb],
.alb-tm.is-archived .alb-tm-facts dd[b-u7esiaoipb] { color: var(--color-text-muted); }

/* The one "Add member" place. */
.alb-tm-add-item[b-u7esiaoipb] { padding: 0; border-style: solid; background: transparent; }
.alb-tm-add[b-u7esiaoipb] {
    width: 100%; height: 100%; padding: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: inherit; background: transparent; cursor: pointer;
    font: inherit; text-align: center; color: var(--color-text-secondary);
}
.alb-tm-add > i[b-u7esiaoipb] { font-size: 18px; }
.alb-tm-add-label[b-u7esiaoipb] { font-size: 13.5px; font-weight: 600; }
.alb-tm-add-hint[b-u7esiaoipb] { max-width: 22ch; font-size: 12px; color: var(--color-text-muted); }
.alb-tm-add:hover[b-u7esiaoipb] { color: var(--color-text-primary); }
.alb-tm-add-item:hover[b-u7esiaoipb] { border-color: var(--color-text-muted); }
.alb-tm-add:focus-visible[b-u7esiaoipb] { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 480px) {
    .alb-tm-grid[b-u7esiaoipb] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .alb-tm[b-u7esiaoipb] { padding: 12px; gap: 8px; }
    .alb-tm-facts[b-u7esiaoipb] { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .alb-tm-ava[b-u7esiaoipb] { width: 36px; height: 36px; }
}
/* /Components/Admin/LabelBook/PnlAtlasLabelRow.razor.rz.scp.css */
/* Outside the income list: a hairline above, muted ink, no bar — it is shown for
   reference, not counted. The arrow says the whole row opens the book. */
.alb-pnl-row[b-pd9j0bfc62] {
    position: relative;
    grid-template-rows: auto;
    margin-top: 12px !important;
    text-decoration: none;
    color: var(--color-text-muted);
}
.alb-pnl-row[b-pd9j0bfc62]::before {
    content: ""; position: absolute; left: 8px; right: 8px; top: -6px;
    border-top: 1px solid var(--color-border);
}
.alb-pnl-row .pnl-row-name[b-pd9j0bfc62] { font-weight: 500; color: var(--color-text-secondary); }
.alb-pnl-amount[b-pd9j0bfc62] { font-weight: 600; color: var(--color-text-secondary); }
.alb-pnl-go[b-pd9j0bfc62] { font-size: 11px; }
.alb-pnl-row:hover .pnl-row-name[b-pd9j0bfc62],
.alb-pnl-row:hover .alb-pnl-amount[b-pd9j0bfc62] { color: var(--color-text-primary); }
/* /Components/Admin/LabelBook/SpendSheet.razor.rz.scp.css */
/* The spend sheet rides on the P&L sheet (pnl-amount, pnl-cat, pnl-sheet-row …); only
   what the label adds lives here: four categories across, the member grid, the inline
   new member, and the split helper. */
.alb-cats[b-vt2sxdg272] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.alb-members[b-vt2sxdg272] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
}
.alb-member[b-vt2sxdg272] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    min-width: 0; text-align: left;
}
.alb-member-name[b-vt2sxdg272] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alb-member-share[b-vt2sxdg272] {
    flex: none; font-size: 12px; font-weight: 500;
    color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.alb-sheet-note[b-vt2sxdg272] { margin: 0; font-size: 13px; color: var(--color-text-muted); }

.alb-add-member[b-vt2sxdg272] {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 8px; padding: 12px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.alb-add-member-row[b-vt2sxdg272] { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: var(--space-2); }
.alb-add-member-actions[b-vt2sxdg272] { display: flex; align-items: center; gap: var(--space-3); }

/* A percent field: the number, then a quiet "%" inside the box on the right. */
.alb-pct-field[b-vt2sxdg272] { position: relative; display: flex; align-items: center; }
.alb-pct-field .form-input[b-vt2sxdg272] { width: 100%; padding-right: 30px; font-variant-numeric: tabular-nums; }
.alb-pct-unit[b-vt2sxdg272] {
    position: absolute; right: 12px; pointer-events: none;
    font-size: 13px; font-weight: 600; color: var(--color-text-muted);
}

/* ---- Split helper: [ 25 % ] of [ Available | Net of period | Income of period ] ---- */
.alb-split[b-vt2sxdg272] {
    margin: -4px 0 var(--space-4); padding: 0; border: 0; min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.alb-split > legend[b-vt2sxdg272] { padding: 0; margin-bottom: 8px; }
.alb-split-row[b-vt2sxdg272] { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.alb-split-pct[b-vt2sxdg272] { flex: 0 0 96px; }
.alb-split-pct .form-input[b-vt2sxdg272] { height: 52px; font-size: 17px; font-weight: 700; }
.alb-split-of[b-vt2sxdg272] { align-self: center; font-size: 13px; color: var(--color-text-muted); }
.alb-bases[b-vt2sxdg272] {
    flex: 1 1 320px; min-width: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.alb-base[b-vt2sxdg272] {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
    min-width: 0; height: 52px; padding: 6px 10px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg-surface); color: var(--color-text-secondary);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.alb-base:hover:not(:disabled)[b-vt2sxdg272] { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.alb-base.is-on[b-vt2sxdg272] { color: var(--color-text-primary); border-color: var(--color-accent); background: var(--color-accent-dim); }
.alb-base:focus-visible[b-vt2sxdg272] { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.alb-base:disabled[b-vt2sxdg272] { opacity: .45; cursor: default; }
.alb-base-name[b-vt2sxdg272] { font-size: 11.5px; font-weight: 600; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alb-base-value[b-vt2sxdg272] {
    font-size: 13px; font-weight: 700; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.alb-split-result[b-vt2sxdg272] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 0; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
    .alb-cats[b-vt2sxdg272] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alb-split-pct[b-vt2sxdg272] { flex-basis: 100%; }
    .alb-split-of[b-vt2sxdg272] { display: none; }
    .alb-bases[b-vt2sxdg272] { flex-basis: 100%; }
    .alb-add-member-row[b-vt2sxdg272] { grid-template-columns: minmax(0, 1fr) 90px; }
}
/* /Components/Admin/LabelBook/TeamCandidatePicker.razor.rz.scp.css */
/* The dropdown fills the field's width; the avatars are round. */
.alb-pick[b-seaf8xolfz]  .pro-geo-dropdown,
.alb-pick[b-seaf8xolfz]  .pro-geo-btn { width: 100%; }
.alb-pick[b-seaf8xolfz]  .pro-geo-btn > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.alb-pick[b-seaf8xolfz]  .pro-geo-option-flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
/* /Components/Admin/Merchant/MerchantLogo.razor.rz.scp.css */
/* The merchant logo tile: a square with rounded corners (22% of its side). The served image is
   already the whole tile (the mark on its own background), so it fills the box edge to edge; a
   transparent logo shows the light plate (the kit's QR plate token, light in both themes). A
   hairline drawn over the image keeps a white logo readable on a white card. The initials tile
   takes the DsAvatar ground and ink at the merchant's hue (--mlogo-h). Colours: css/ds/tokens.css. */

.mlogo[b-sydr2ujx4g] {
    --mlogo-h: 235;
    --mlogo-side: 32px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: var(--mlogo-side);
    height: var(--mlogo-side);
    overflow: hidden;
    border-radius: calc(var(--mlogo-side) * 0.22);
    background: var(--qr-plate);
    vertical-align: middle;
    user-select: none;
}

.mlogo[b-sydr2ujx4g]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--hairline);
    pointer-events: none;
}

.mlogo--xs[b-sydr2ujx4g] { --mlogo-side: 24px; }
.mlogo--sm[b-sydr2ujx4g] { --mlogo-side: 32px; }
.mlogo--md[b-sydr2ujx4g] { --mlogo-side: 40px; }
.mlogo--lg[b-sydr2ujx4g] { --mlogo-side: 56px; }
.mlogo--xl[b-sydr2ujx4g] { --mlogo-side: 96px; }

.mlogo img[b-sydr2ujx4g] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mlogo.is-empty[b-sydr2ujx4g] {
    background: oklch(var(--av-ground-l) var(--av-ground-c) var(--mlogo-h));
    color: oklch(var(--av-line-l) var(--av-line-c) var(--mlogo-h));
}

.mlogo-initials[b-sydr2ujx4g] {
    font-size: calc(var(--mlogo-side) * 0.38);
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.mlogo--xs .mlogo-initials[b-sydr2ujx4g] { font-size: 10px; }
/* /Components/Admin/Merchant/MerchantMark.razor.rz.scp.css */
/* The merchant as its logo. The name is in the markup for screen readers and for
   the phone cards; on a desktop row only the logo shows. */

.mmark[b-4qu2uz99o0] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
    color: inherit;
    text-decoration: none;
}

a.mmark[b-4qu2uz99o0] { border-radius: 8px; }
/* a named mark is an entity link in the kit's quiet look: ink text, the underline on hover */
a.mmark:hover .mmark-name[b-4qu2uz99o0] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.mmark:focus-visible[b-4qu2uz99o0] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.mmark-name[b-4qu2uz99o0] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The name beside the logo: where the merchant is the subject (Always), and in a
   table that responsive.js has turned into cards, where a bare logo would be the
   only thing naming the row's merchant on a phone. */
.mmark--named .mmark-name[b-4qu2uz99o0],
.rt--stacked .mmark:not(.mmark--bare) .mmark-name[b-4qu2uz99o0] {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text);
}
/* /Components/Admin/Merchant/ThresholdBar.razor.rz.scp.css */
/* W1 → settlement threshold. Tokens (--thr-*): admin.css for the legacy look, mapped onto the kit's
   tokens under .ds in css/ds/pages/staff-merchants.css (the registry row highlight shares them). */

.thr[b-zuinp90y9g] {
    --thr-tone: var(--thr-calm);
    min-width: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
}
.thr--warm[b-zuinp90y9g] { --thr-tone: var(--thr-warm); }
.thr--hit[b-zuinp90y9g] { --thr-tone: var(--thr-hit); }
.thr--off[b-zuinp90y9g] { --thr-tone: var(--text-2); }

.thr-track[b-zuinp90y9g] {
    position: relative;
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--thr-track);
    overflow: hidden;
}
.thr-fill[b-zuinp90y9g] {
    position: relative;
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--thr-tone) 62%, transparent), var(--thr-tone));
    transform-origin: left center;
    animation: thr-grow-b-zuinp90y9g 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
    overflow: hidden;
}
/* Past the target the bar stays full; the notch is where the target sits. */
.thr-notch[b-zuinp90y9g] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--thr-notch);
}

/* At the target: a lit rim and a slow sheen, so it reads from across the screen. */
.thr--hit .thr-track[b-zuinp90y9g] {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--thr-hit) 45%, transparent),
                0 0 14px -3px color-mix(in srgb, var(--thr-hit) 75%, transparent);
}
.thr--hit .thr-fill[b-zuinp90y9g] { background: var(--thr-hit); }
.thr--hit .thr-fill[b-zuinp90y9g]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--qr-plate) 38%, transparent) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: thr-sheen-b-zuinp90y9g 2.8s ease-in-out 900ms infinite;
}

.thr-pct[b-zuinp90y9g] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.thr--warm .thr-pct[b-zuinp90y9g] { color: var(--thr-warm-ink); }
.thr--hit .thr-pct[b-zuinp90y9g] { color: var(--thr-hit-ink); }
.thr--off .thr-pct[b-zuinp90y9g] { color: var(--text-2); font-weight: 600; }

.thr-cap[b-zuinp90y9g] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

/* ── Header: full width, the caption under it ── */
.thr--lg[b-zuinp90y9g] { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.thr--lg .thr-foot[b-zuinp90y9g] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.thr--lg .thr-pct[b-zuinp90y9g] { font-size: 13px; }
.thr--hit.thr--lg .thr-cap[b-zuinp90y9g] { color: var(--text); font-weight: 600; }

/* ── Registry cell: a short bar with the percent beside it ── */
.thr--sm[b-zuinp90y9g] {
    display: grid;
    grid-template-columns: 112px auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 3px;
    margin-top: 6px;
}
.thr--sm .thr-track[b-zuinp90y9g] { height: 7px; }
.thr--sm .thr-cap[b-zuinp90y9g] { grid-column: 1 / -1; font-size: 11px; }
.thr--sm .thr-cap--blocked[b-zuinp90y9g] { margin-top: -1px; color: var(--thr-warm-ink); font-weight: 500; }

@keyframes thr-grow-b-zuinp90y9g { from { transform: scaleX(0); } }
@keyframes thr-sheen-b-zuinp90y9g {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .thr-fill[b-zuinp90y9g] { animation: none; }
    .thr--hit .thr-fill[b-zuinp90y9g]::after { animation: none; content: none; }
}
/* /Components/Admin/TraderManualWorkSection.razor.rz.scp.css */
/* The facts under the switch: how many requisites it concerns, who changed it last. */
.mw-facts[b-ux6usnyco5] {
    margin-top: 14px;
}
/* /Components/Admin/TraderTrafficOff.razor.rz.scp.css */
/* Traffic state + turn-off action, inline in a detail row. */
.tto[b-dcdi9t7vkj] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 10px;
}

.tto-state[b-dcdi9t7vkj] { font-weight: 600; }
.tto-state--on[b-dcdi9t7vkj] { color: var(--color-success); }
.tto-state--off[b-dcdi9t7vkj] { color: var(--color-text-secondary); }
.tto-state--offByAdmin[b-dcdi9t7vkj] { color: var(--color-warning); }
.tto-state--banned[b-dcdi9t7vkj] { color: var(--color-danger); }

.tto-act[b-dcdi9t7vkj] { padding: 2px 8px; font-size: 12px; }

.tto-note[b-dcdi9t7vkj] { font-size: 12px; color: var(--color-text-muted); }
/* /Components/Admin/TraderTwoFactorPauseCard.razor.rz.scp.css */
/* The running pause: a big clock, a bar draining to zero, who paused it. */
.tfp-live[b-s1tafvyorz] {
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: var(--ds-r-field, 10px);
    background: var(--warning-tint);
}

.tfp-clock[b-s1tafvyorz] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tfp-clock[b-s1tafvyorz]  .ds-countdown {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.tfp-clock__label[b-s1tafvyorz] {
    color: var(--text-2);
    font-size: 13px;
}

.tfp-bar[b-s1tafvyorz] {
    height: 4px;
    margin: 10px 0 8px;
    border-radius: 2px;
    background: var(--wash-2);
    overflow: hidden;
}

.tfp-bar__fill[b-s1tafvyorz] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--warning);
    transform-origin: left center;
    animation-name: tfp-drain-b-s1tafvyorz;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes tfp-drain-b-s1tafvyorz {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tfp-bar__fill[b-s1tafvyorz] { animation: none; }
}

.tfp-note[b-s1tafvyorz] {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}

.tfp-note__sep[b-s1tafvyorz] { margin: 0 6px; }

.tfp-actions[b-s1tafvyorz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.tfp-off[b-s1tafvyorz] {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}
/* /Components/Shared/RequisiteChange.razor.rz.scp.css */
/* field label, then old → new; the old value struck through so the current one reads first */
.rq-change[b-14oliwf175] { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; }
.rq-change__field[b-14oliwf175] { color: var(--text-2); }
.rq-change__field[b-14oliwf175]::after { content: ":"; }
.rq-change__old[b-14oliwf175] { color: var(--text-2); text-decoration: line-through; overflow-wrap: anywhere; }
.rq-change__new[b-14oliwf175] { color: var(--text); overflow-wrap: anywhere; }
.rq-change__arrow[b-14oliwf175] { color: var(--text-2); }
/* /Layout/MainLayout.razor.rz.scp.css */
/* All layout styles are in app.css */
/* /Layout/NavMenu.razor.rz.scp.css */
/* All nav styles are in app.css */
/* /Pages/Admin/AtlasLabelBook.razor.rz.scp.css */
/* The Atlas Label book rides on the P&L page's language (pnl-page, pnl-eq, pnl-card,
   pnl-rows, pnl-table …, admin.css). What the label adds: the requisite owners' note
   under the income, the all-time balance strip, and the chart's key. Colours: the
   label token --alb-diff (AlbScope.razor.css), the P&L reds and the text inks. */

/* ---- 1. Equation: what the requisite owners kept, a muted note outside the sum ---- */
.alb-eq-note[b-3hwdcgli8n] {
    margin-top: 2px; font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}

/* ---- 2. All-time balance: Available as the figure, two facts, one meter ---- */
.alb-balance[b-3hwdcgli8n] {
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
    grid-template-areas: "main facts" "meter meter";
    align-items: center;
    column-gap: clamp(20px, 4vw, 56px); row-gap: 14px;
}
.alb-bal-main[b-3hwdcgli8n] { grid-area: main; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alb-bal-label[b-3hwdcgli8n] { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); }
.alb-bal-value[b-3hwdcgli8n] {
    --usdt-size: .5em;
    font-size: clamp(24px, 2.3vw, 32px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-primary);
}
.alb-bal-value.is-negative[b-3hwdcgli8n] { color: var(--pnl-out); }
.alb-bal-since[b-3hwdcgli8n] { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.alb-bal-facts[b-3hwdcgli8n] {
    grid-area: facts; margin: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 32px;
}
.alb-bal-fact[b-3hwdcgli8n] { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 14px; border-left: 1px solid var(--color-border); }
.alb-bal-fact dt[b-3hwdcgli8n] { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }
.alb-bal-fact dd[b-3hwdcgli8n] {
    margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Earned as one bar in the label colour (all of it is held by the platform); the spent
   share lies over its right end as a wash of the card, so the bright part that is left
   reads as what is still available. */
.alb-bal-meter[b-3hwdcgli8n] {
    grid-area: meter; position: relative; display: flex;
    height: 6px; border-radius: 3px; overflow: hidden; background: var(--color-bg-elevated);
}
.alb-bal-seg[b-3hwdcgli8n] { display: block; width: 100%; height: 100%; background: var(--alb-diff); }
.alb-bal-spent[b-3hwdcgli8n] {
    position: absolute; top: 0; right: 0; bottom: 0;
    background: color-mix(in srgb, var(--color-bg-surface) 72%, transparent);
    box-shadow: inset 2px 0 0 var(--color-text-secondary);
}

/* ---- 3. Chart key: swatch + name, no boxes ---- */
.alb-chart-head[b-3hwdcgli8n] { flex-wrap: wrap; }
.alb-keys[b-3hwdcgli8n] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.alb-key[b-3hwdcgli8n] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap;
}

@media (max-width: 720px) {
    .alb-balance[b-3hwdcgli8n] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "facts" "meter"; }
    .alb-bal-fact[b-3hwdcgli8n] { padding-left: 0; border-left: 0; }
}

/* ---- Journal: a spend saved for a day outside the period shown ---- */
.alb-saved-outside[b-3hwdcgli8n] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    margin: 0 0 10px; padding: 10px 14px; border-radius: 10px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    font-size: var(--font-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}
.alb-saved-outside > i[b-3hwdcgli8n] { color: var(--color-text-muted); }
.alb-saved-outside > span[b-3hwdcgli8n] { flex: 1 1 auto; min-width: 0; }
/* /Pages/Admin/BlockedClients.razor.rz.scp.css */
/* Blocked clients (/admin/blocked-clients). Page-only rules, prefixed cb-; the list rhythm, table cells,
   people and sheets come from css/ds/pages/staff-ops.css (so-*). Colours only from ds/tokens.css, so the page
   follows the light and dark themes. */

/* ---------- table ---------- */
.cb-ref[b-jcbvuxzgbe] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}
.cb-ref__text[b-jcbvuxzgbe] {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.cb-state[b-jcbvuxzgbe] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-size: 12px;
}
.cb-state__when[b-jcbvuxzgbe] {
    color: var(--text-2);
}

.cb-num[b-jcbvuxzgbe] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}
.cb-num--bad[b-jcbvuxzgbe] {
    color: var(--error);
}
.cb-num--warn[b-jcbvuxzgbe] {
    color: var(--warning);
}
.cb-num--zero[b-jcbvuxzgbe] {
    color: var(--text-3);
    font-weight: 500;
}

.cb-reason[b-jcbvuxzgbe] {
    font-weight: 500;
    color: var(--text);
    white-space: normal;
}
.cb-reason--fake[b-jcbvuxzgbe] {
    color: var(--error);
}
.cb-reason--warn[b-jcbvuxzgbe] {
    color: var(--warning);
}

/* "1 fake · 2 not received": plain coloured text on one line; the table's narrow cell stacks the two parts instead,
   each wrapping inside a capped width. */
.cb-strikes[b-jcbvuxzgbe] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.cb-strikes__sep[b-jcbvuxzgbe] {
    color: var(--text-3);
}
.cb-table .cb-strikes[b-jcbvuxzgbe] {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    max-width: 9em;
    white-space: normal;
    text-align: right;
}
.cb-table .cb-strikes__sep[b-jcbvuxzgbe] {
    display: none;
}
.cb-table .cb-strikes > .cb-num[b-jcbvuxzgbe] {
    white-space: nowrap;
}

/* The dispute of a history line, before its actor. */
.cb-strike[b-jcbvuxzgbe] {
    font-weight: 600;
}
.cb-strike--bad[b-jcbvuxzgbe] {
    color: var(--error);
}
.cb-strike--warn[b-jcbvuxzgbe] {
    color: var(--warning);
}

.cb-actor--bot[b-jcbvuxzgbe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
    white-space: nowrap;
}
.cb-bot[b-jcbvuxzgbe] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--idle-tint);
    color: var(--text-2);
}
.cb-bot--sm[b-jcbvuxzgbe] {
    width: 20px;
    height: 20px;
}

/* ---------- detail sheet ---------- */
.cb-hero[b-jcbvuxzgbe] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--ds-r-card);
    border: 1px solid var(--hairline);
    background: var(--surface-raised);
}
.cb-hero--active[b-jcbvuxzgbe] {
    border-color: var(--error);
    background: var(--error-tint);
}
.cb-hero__icon[b-jcbvuxzgbe] {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--text-2);
}
.cb-hero--active .cb-hero__icon[b-jcbvuxzgbe] {
    color: var(--error);
}
.cb-hero__main[b-jcbvuxzgbe] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.cb-hero__ref[b-jcbvuxzgbe] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-size: 18px;
    font-weight: 650;
    color: var(--text-bright);
    overflow-wrap: anywhere;
}
.cb-hero__note[b-jcbvuxzgbe] {
    margin: 10px 2px 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2);
}

/* history: newest first, a rail of dots coloured by what happened */
.cb-events[b-jcbvuxzgbe] {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cb-ev[b-jcbvuxzgbe] {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}
.cb-ev:last-child[b-jcbvuxzgbe] {
    padding-bottom: 0;
}
.cb-ev:not(:last-child)[b-jcbvuxzgbe]::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 18px;
    bottom: 2px;
    width: 1px;
    background: var(--hairline-strong);
}
.cb-ev__dot[b-jcbvuxzgbe] {
    flex: none;
    width: 11px;
    height: 11px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--text-3);
}
.cb-ev--bad .cb-ev__dot[b-jcbvuxzgbe] {
    background: var(--error);
}
.cb-ev--warn .cb-ev__dot[b-jcbvuxzgbe] {
    background: var(--warning);
}
.cb-ev--ok .cb-ev__dot[b-jcbvuxzgbe] {
    background: var(--success);
}
.cb-ev__body[b-jcbvuxzgbe] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cb-ev__head[b-jcbvuxzgbe] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
}
.cb-ev__title[b-jcbvuxzgbe] {
    font-weight: 600;
    color: var(--text-bright);
}
.cb-ev__time[b-jcbvuxzgbe] {
    font-size: 12px;
    color: var(--text-2);
}
.cb-ev__meta[b-jcbvuxzgbe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-size: 13px;
    color: var(--text-2);
}
.cb-ev__comment[b-jcbvuxzgbe] {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.cb-ev__void[b-jcbvuxzgbe] {
    margin: 0;
    font-size: 12px;
    color: var(--text-2);
}
.cb-ev.is-voided .cb-ev__title[b-jcbvuxzgbe] {
    text-decoration: line-through;
    color: var(--text-2);
}
.cb-ev.is-voided .cb-ev__comment[b-jcbvuxzgbe] {
    text-decoration: line-through;
    color: var(--text-3);
}

/* ---------- block by hand ---------- */
.cb-find[b-jcbvuxzgbe] {
    margin-bottom: 16px;
}
.cb-find__row[b-jcbvuxzgbe] {
    display: flex;
    gap: 10px;
    width: 100%;
}
.cb-find__row > input[b-jcbvuxzgbe] {
    flex: 1;
    min-width: 0;
}
.cb-preview__ref[b-jcbvuxzgbe] {
    font-weight: 600;
    overflow-wrap: anywhere;
}
.cb-gap[b-jcbvuxzgbe] {
    margin-top: 14px;
}

@media (max-width: 640px) {
    .cb-ref__text[b-jcbvuxzgbe] {
        max-width: 200px;
    }
    .cb-hero[b-jcbvuxzgbe] {
        padding: 12px;
    }
    .cb-hero__ref[b-jcbvuxzgbe] {
        font-size: 16px;
    }
}
/* /Pages/Admin/Traders.razor.rz.scp.css */
/* Atlas label trader: the brand stripe down the left edge and a flat wash of it
   (tokens --atlas-* in admin.css), the same recipe as the merchant registry's
   due / auto rows. The text keeps its colours. */
.pg-table tbody tr.trs-row--atlas[b-jgwamo9kpm] { background: var(--atlas-row); }
.pg-table tbody tr.trs-row--atlas:hover[b-jgwamo9kpm] { background: var(--atlas-row-hover); }
.trs-row--atlas > td:first-child[b-jgwamo9kpm] { box-shadow: inset 3px 0 0 var(--atlas-hit); }
/* Phone cards: the stripe runs down the card, not down its first cell. */
.rt--stacked > tbody > tr.trs-row--atlas[b-jgwamo9kpm] { box-shadow: inset 3px 0 0 var(--atlas-hit); }
.rt--stacked > tbody > tr.trs-row--atlas > td:first-child[b-jgwamo9kpm] { box-shadow: none; }
/* /Pages/Join.razor.rz.scp.css */
/* Application page: what atlas-ds.css does not cover. Tokens come from .pds (PublicShell). */

/* who invited: a quiet line under the lead (no kicker above the H1) */
.join-invite[b-qkjky7a4tj] {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-2);
}
.join-invite strong[b-qkjky7a4tj] {
    font-weight: 500;
    color: var(--text);
}
.join-invite.is-pending[b-qkjky7a4tj] {
    visibility: hidden;
}

/* name and Telegram side by side on wide screens */
.join-row[b-qkjky7a4tj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    align-items: start;
}

/* "Add starting volume and a comment" */
.join-more[b-qkjky7a4tj] {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 -4px -10px;
    padding: 8px 12px 8px 10px;
    border-radius: 999px;
    font-size: 15px;
    color: var(--text-2);
    transition: color 0.2s ease, background-color 0.2s ease;
}
.join-more:hover[b-qkjky7a4tj] {
    color: var(--text);
    background: var(--wash-2);
}
.join-more svg[b-qkjky7a4tj] {
    width: 16px;
    height: 16px;
}
.join-extra[b-qkjky7a4tj] {
    display: grid;
    gap: 20px;
    animation: pds-rise 0.35s var(--ease-out);
}
.join-count[b-qkjky7a4tj] {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
}
.join-count.is-over[b-qkjky7a4tj] {
    color: var(--error);
}

/* sent */
.join-done .pds-tick[b-qkjky7a4tj] {
    margin-bottom: 24px;
}
.join-done-tg[b-qkjky7a4tj] {
    font-weight: 500;
    color: var(--text);
}
.join-next-title[b-qkjky7a4tj] {
    margin: 32px 0 14px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}
.join-next[b-qkjky7a4tj] {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.join-next li[b-qkjky7a4tj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-prose);
}
.join-next-n[b-qkjky7a4tj] {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: -1px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--hairline-strong);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-2);
}
.join-site-links[b-qkjky7a4tj] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 32px;
    font-size: 15px;
}

@media (max-width: 560px) {
    .join-row[b-qkjky7a4tj] {
        grid-template-columns: 1fr;
    }
    .join-site-links[b-qkjky7a4tj] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Sign-in: what atlas-ds.css does not cover. Tokens come from .pds (PublicShell). */

/* the key step and the code step swap on the same card */
.signin-step[b-lho7sifjt3] {
    animation: pds-fade 0.3s var(--ease-out);
}

/* the verification code: one wide mono field, spaced like the code in the email */
.signin-code[b-lho7sifjt3] {
    font-size: 24px;
    letter-spacing: 0.32em;
    padding-left: 16px;
}
.signin-code[b-lho7sifjt3]::placeholder {
    letter-spacing: 0.32em;
}

@media (max-width: 560px) {
    .signin-code[b-lho7sifjt3] {
        font-size: 22px;
    }
}

/* beats responsive.css's 16px !important for inputs on touch screens (see atlas-ds.css) */
@media (max-width: 960px) and (pointer: coarse) {
    .pds-form .pds-field input.pds-input.signin-code[b-lho7sifjt3] {
        font-size: 22px !important;
    }
}
/* ============================================================
   RESPONSIVE LAYER — loaded after every role stylesheet.
   One place for the rules that make the cabinet work from a 360px phone
   to a 1280px MacBook to a 1920px monitor. Page stylesheets keep their own
   small tweaks; anything shared by all roles lives here.

   Breakpoints used across the app:
     ≤ 480  small phone     ≤ 720  phone     ≤ 960  tablet / drawer nav
   Laptop widths (1280–1512) are not breakpoints: the top bar measures
   itself (js/responsive.js → html.nav-l1…l4) and tables stack by their own
   box width, so neither depends on the role or the UI language.
   ============================================================ */

/* ---- 1. Shell: real viewport height on mobile browsers --------------
   100vh on iOS Safari / Chrome Android includes the collapsing address bar,
   so the bottom of every page (pagination, modal footers) hid under it. */
.app-shell { height: 100vh; height: 100dvh; }
.drawer { height: 100vh; height: 100dvh; }
.glass-modal { max-height: calc(100dvh - 24px); }
@media (max-height: 700px) { .glass-modal { max-height: 100dvh; } }
.modal { max-height: 90dvh; }
.main { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }

/* Long unbroken values (hashes, UTR, e-mails, URLs) wrap instead of
   pushing their container wider than the screen. */
.main { overflow-wrap: break-word; }
.main :where(code, .mono, .text-mono, .pg-table-mono) { overflow-wrap: anywhere; }
/* …but not for an ID column of a regular table: there "anywhere" lets the
   layout squeeze the ID to one character per line. ID cells and badges stay on
   one line; long values (paths, requisites, cells marked wide) keep wrapping. */
.pg-table:not(.rt--stacked) .badge { overflow-wrap: normal; white-space: nowrap; }

/* Blazor focuses the page heading after navigation; no ring for mouse/touch. */
h1:focus:not(:focus-visible), [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ---- 2. Top bar: fit levels (set by js/responsive.js) --------------- */
/* The pill labels used to shrink to 12px below 1200px; the fit levels
   below replace that fixed step. */
@media (max-width: 1200px) {
    .topbar__pill .nav-item { padding: 9px 18px; font-size: 14px; }
    .topbar__pill { padding: 5px; }
}

/* Set only while js/responsive.js measures the bar */
html.nav-measuring .topbar,
html.nav-measuring .topbar * { transition: none !important; }

/* L1 — tighter spacing everywhere in the bar */
html.nav-l1 .topbar { padding-left: 20px; padding-right: 20px; }
html.nav-l1 .topbar__brand { gap: 10px; }
html.nav-l1 .topbar__logo { width: 42px; height: 42px; }
html.nav-l1 .topbar__title { font-size: 20px; letter-spacing: 0.2em; }
html.nav-l1 .topbar__pill { padding: 4px; }
html.nav-l1 .topbar__pill .nav-item { padding: 8px 13px; font-size: 13.5px; }
html.nav-l1 .topbar__right { gap: 8px; }
html.nav-l1 .topbar__icon-btn:not(.topbar__geo-btn),
html.nav-l1 .topbar__theme-toggle { width: 36px; height: 36px; font-size: 14px; }
html.nav-l1 .lang-switch__btn { height: 36px; padding: 0 10px; }
html.nav-l1 .topbar__counter { height: 30px; padding: 0 10px; }

/* L2 — low-frequency utilities (docs, language, theme, settings) leave the
   bar; the account menu shows them instead (.pop__compact). */
html.nav-l2 .topbar__right > a.topbar__icon-btn,
html.nav-l2 .topbar__right > .topbar__theme-toggle,
html.nav-l2 .topbar__right > .lang-switch { display: none; }
.pop__compact { display: none; }
html.nav-l2 .pop__compact { display: block; }

/* L3 — logo only */
html.nav-l3 .topbar__title { display: none; }

/* L4 — the menu moves into the burger drawer */
html.nav-l4 .topbar__burger { display: inline-flex; }
html.nav-l4 .topbar__pill { display: none; }
html.nav-l4 .mobile-nav__backdrop,
html.nav-l4 .mobile-nav { display: flex; }
html.nav-l4 .topbar__burger { margin-right: 4px; }

/* Account menu: compact utilities block */
.pop { width: 240px; max-width: calc(100vw - 24px); }
.pop__item { text-align: left; justify-content: flex-start; white-space: nowrap; }
.pop__langs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 4px; padding: 4px var(--space-2) var(--space-2);
}
.pop__lang {
    height: 32px; border-radius: var(--radius-md);
    border: 1px solid var(--color-border); background: transparent;
    font-family: var(--font-family); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--color-text-secondary); cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pop__lang:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.pop__lang.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-accent); }
[data-theme="light"] .pop__lang.is-active { background: #4F46E5; border-color: #4F46E5; color: #fff; }
/* Drawer footer reuses the segmented language control */
.mobile-nav__langs { padding: 0; }
.mobile-nav__langs .pop__lang { height: 40px; border-radius: 10px; font-size: 13px; }
a.pop__item { text-decoration: none; }
a.pop__item:hover { text-decoration: none; }

/* Pop-overs never wider than the screen */
.notif-pop { max-width: calc(100vw - 16px); }
.notif-pop-body { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; }

/* ---- 3. Page gutters --------------------------------------------------
   The old mobile rules went down to 8px — text touched the screen edge. */
@media (max-width: 1280px) {
    .main { padding: var(--space-6); }
}
@media (max-width: 960px) {
    .main { padding: 16px 20px !important; }
}
@media (max-width: 720px) {
    .main { padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 380px) {
    .main { padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- 4. Forms on touch screens ---------------------------------------
   iOS Safari zooms the page when a focused field's text is under 16px and
   never zooms back. 16px on touch devices removes the jump. */
@media (max-width: 960px) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea { font-size: 16px !important; }
}

/* ---- 6. KPI tiles: two per row on phones, compact ---------------------
   One tile per row made the first screen of every list page a column of
   four big boxes before any data. */
@media (max-width: 720px) {
    .kpi-tile-ext { min-height: 0; padding: 12px; gap: 6px; }
    .kpi-tile-ext:hover { transform: none; }
}
/* ---- 7. Tables ------------------------------------------------------- */
/* Wide tables scroll inside their frame on laptops instead of being cut off
   by overflow:hidden (the frame used it only to clip its rounded corners). */
.pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 7a. Stacked (card) mode. js/responsive.js adds .rt--stacked when the
   table's box is narrow and copies each column header into data-label.
   Every row becomes a card: identity + status on top, the rest as a
   label-over-value grid, actions along the bottom. */
table.rt--stacked { display: block; width: 100%; min-width: 0 !important; font-size: 13px !important; }
table.rt--stacked > thead { display: none; }
table.rt--stacked > tbody,
table.rt--stacked > tfoot { display: block; }
table.rt--stacked > tbody > tr,
table.rt--stacked > tfoot > tr {
    display: grid;
    grid-template-columns: repeat(var(--rt-cols, 2), minmax(0, 1fr));
    column-gap: 16px; row-gap: 10px;
    padding: 14px 16px;
    align-items: start;
}
table.rt--stacked > tbody > tr > td,
table.rt--stacked > tfoot > tr > td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0; max-width: none !important; width: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
table.rt--stacked > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px; font-weight: 600; line-height: 1.3;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-text-muted);
    font-family: var(--font-family);
}
table.rt--stacked > tbody > tr > td:empty { display: none; }
/* Full-width rows: empty states, loaders, expanded details */
table.rt--stacked > tbody > tr > td[colspan] { grid-column: 1 / -1; }
table.rt--stacked > tbody > tr > td[colspan]::before { content: none !important; }
/* Flex rows inside cells wrap on narrow cards */
table.rt--stacked td .d-flex { flex-wrap: wrap; }

/* Card slots (data-cell on <td>) */
table.rt--stacked td[data-cell="primary"] {
    grid-column: 1 / -2; order: -4;
    font-weight: 600; color: var(--color-text-primary);
}
table.rt--stacked td[data-cell="status"] {
    grid-column: -2 / -1; order: -3;
    justify-self: end; text-align: right !important;
}
table.rt--stacked td[data-cell="primary"]::before,
table.rt--stacked td[data-cell="status"]::before,
table.rt--stacked td[data-cell="actions"]::before { content: none !important; }
table.rt--stacked td[data-cell="amount"] { order: -2; font-size: 15px; font-weight: 700; }
table.rt--stacked td[data-cell="wide"] { grid-column: 1 / -1; }
table.rt--stacked td[data-cell="actions"] {
    grid-column: 1 / -1; order: 99;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding-top: 4px !important;
}
table.rt--stacked td[data-cell="actions"]:not(:has(*)) { display: none; }
table.rt--stacked td[data-cell="actions"] > .d-flex,
table.rt--stacked td[data-cell="actions"] > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start !important; }
table.rt--stacked td[data-cell="actions"] .btn { min-height: 36px; }
table.rt--stacked td[data-cell="hide"] { display: none; }
/* A lone chevron / "open" button carries no information in a card whose
   whole surface is tappable. */
table.rt--stacked td[data-cell="chevron"] { display: none; }

/* Row chrome in card mode */
table.rt--stacked > tbody > tr:hover { transform: none; }
table.rt--stacked .badge { white-space: nowrap; }
/* A long status ("evidence deadline expired") wraps inside its slot instead of
   running over the row identity. */
table.rt--stacked td[data-cell="status"] { max-width: 100%; }
table.rt--stacked td[data-cell="status"] .badge { white-space: normal; max-width: 100%; line-height: 1.25; text-align: center; }

/* 7b. Tables that stay tables on small screens keep readable cells. */
@media (max-width: 720px) {
    .pg-table-wrap > table:not(.rt--stacked) th,
    .pg-table-wrap > table:not(.rt--stacked) td { padding: 10px 12px !important; }
}

/* ---- 8. Modals → bottom sheets on phones ------------------------------
   A centred card with 16px margins wasted a quarter of a phone screen and
   put the actions far from the thumb. Sheets rise from the bottom edge. */
@media (max-width: 720px) {
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal-backdrop > .glass-modal,
    .modal-backdrop > .modal {
        max-width: 100% !important; width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        animation: sheet-up 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .glass-modal > .gm-body { padding: 16px; }
    .gm-header { padding: 16px 16px 0; }
    .gm-footer {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        flex-wrap: wrap;
    }
    .gm-footer > :is(.btn, .bal-btn-primary, .bal-btn-outline) { flex: 1 1 140px; min-height: 44px; justify-content: center; }
    }
@keyframes sheet-up {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop > .glass-modal, .modal-backdrop > .modal { animation: none; }
}

/* ---- 9. Touch targets -------------------------------------------------
   Pagination arrows and row icon buttons were 32px — under the 44px touch
   guideline and easy to mis-tap. */
@media (pointer: coarse) {
    .pg-page-btn { width: 40px; height: 40px; }
    .pg-page-current { height: 40px; border-radius: 20px; }
    .topbar__burger { width: 42px; height: 42px; }
    .date-picker-clear { min-width: 32px; min-height: 32px; }
}
/* ================================================================
   Portal, ATLAS design system: tokens and the legacy bridge.

   Scope: .ds only. MainLayout puts the class on .app-shell and <html>
   (themeHelpers.setRole) for the roles in DsRoles, so these blocks apply
   to those roles' whole document and to nothing any other role sees.
   Rulebook: DS.md next to the .csproj.

   1. Tokens: the site's names and values (src/landing-site/src/styles/
      tokens.css, the same set atlas-ds.css copies onto .pds), dark and
      light. Two additions the site does not have yet, --info and
      --info-tint, for the "in progress" status tone.
   2. Bridge: the app.css variables (--color-*, --badge-*, --shadow-*,
      --font-family) redefined from those tokens, so every legacy class
      used on a .ds page recolours without a markup change, in BOTH
      themes.
   Not redefined: --radius-sm and the other app.css radii/spacing (legacy
   components depend on them). Kit radii are --ds-r-*.
   ================================================================ */

.ds {
  color-scheme: dark;

  /* ground and surfaces */
  /* 2026-10-13 contrast pass: the old app's lifted ground (#111315), clearly lighter cards, a 1px
     edge you can see and a soft drop, so a card reads as a sheet on the ground, not a shade of it */
  --ground: #111315;
  --ground-rgb: 17, 19, 21;
  --ground-2: #15181b;
  --surface: #1d2125;
  --surface-raised: #252a2f;
  --surface-hover: #2c3137;
  --surface-edge: 0 0 #0000;
  --surface-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --hairline-hover: rgba(255, 255, 255, 0.28);
  --fg-rgb: 255, 255, 255;
  --wash-1: rgba(255, 255, 255, 0.025);
  --wash-2: rgba(255, 255, 255, 0.055);
  --wash-3: rgba(255, 255, 255, 0.09);
  --segment-on: #30353b;

  /* popovers */
  --popover: #22262b;
  --popover-card: #2a2e34;
  --popover-row: #31363c;

  /* fields: a step below the card, so a field reads as a well */
  --field-bg: #16191c;
  --field-border: rgba(255, 255, 255, 0.16);
  --field-border-hover: rgba(255, 255, 255, 0.28);

  /* text */
  --text: #ffffff;
  --text-bright: #eef0f2;
  --text-soft: #d5d8dd;
  --text-prose: #c4c9d0;
  --text-2: #a8aeb8; /* secondary: 7.4:1 on the card, 8.6:1 on the ground */
  --text-3: #6c727b; /* decoration and truly minor metadata only */

  /* accent: lime. In the working app it marks what is on and what to press: the primary button,
     the current menu item and tab, focus, live dots, toggles, meters, the key KPI (DS.md "Accent") */
  --accent: #8fff00;
  --accent-rgb: 143, 255, 0;
  --accent-text: #0e1012;
  --accent-tint: rgba(143, 255, 0, 0.14);
  --accent-ring: rgba(143, 255, 0, 0.32);
  --accent-glow: rgba(143, 255, 0, 0.6);
  --accent-soft-text: #b8ff5c;

  /* status: saturated tones on a tint you can see; green is its own hue, apart from the lime accent */
  --success: #4ade80;
  --success-tint: rgba(74, 222, 128, 0.15);
  --success-ring: rgba(74, 222, 128, 0.32);
  --warning: #fbbf24;
  --warning-tint: rgba(251, 191, 36, 0.15);
  --error: #ff8a76;
  --error-tint: rgba(255, 138, 118, 0.15);
  --info: #78b6ff; /* portal addition: "in progress" tone (not on the site yet) */
  --info-tint: rgba(120, 182, 255, 0.16);
  --idle-tint: rgba(255, 255, 255, 0.08);

  --focus-ring: #8fff00;
  --selection-bg: #8fff00;
  --selection-text: #0e1012;

  /* buttons: the primary is the accent (lime, ink text) */
  --btn-primary-bg: #8fff00;
  --btn-primary-bg-hover: #a6ff3d;
  --btn-primary-text: #0e1012;

  /* chrome, overlays, shadows */
  --header-glass: rgba(17, 19, 21, 0.78);
  --backdrop: rgba(8, 9, 10, 0.72);
  --shadow-popover: 0 24px 56px -16px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-listbox: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 40px 80px -40px rgba(0, 0, 0, 0.6);

  /* brand marks and decoration */
  --logo-ring: #ffffff;
  --flag-ring: rgba(255, 255, 255, 0.12);
  --band-glow: rgba(255, 255, 255, 0.05);
  --band-dots: rgba(255, 255, 255, 0.09);
  --qr-plate: #f2f3f5;
  --qr-ink: #0e1012;
  --mini-chip-strong: #3a3f45; /* switch track */
  --mini-knob: #ffffff;
  --mini-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  /* charts (css/ds/charts.css, DS.md "Charts"). Series in a fixed order, never picked per page.
     The hues are the portal's colour-blind-checked sets (merchant.css --rev-*, --pnl-expense*,
     admin-affiliate.css --aaf-merchant): series 1 is the headline (the accent), 2 blue, 3 amber,
     4 teal, 5 violet, 6 pink; 7-8 neutrals. Money in / out are their own marks, apart from the
     accent and from the text red, so a bar never reads as a label or as "series 1". */
  --ds-chart-1: var(--accent);
  --ds-chart-2: #3ba7ff;
  --ds-chart-3: #ffa412;
  --ds-chart-4: #22d3bd;
  --ds-chart-5: #9b6bff;
  --ds-chart-6: #ff5c9d;
  --ds-chart-7: #d5d8dd;
  --ds-chart-8: #a8aeb8;
  /* a deeper shade of series 1 / 3: the second half of one source split in two (the trader pool and
     the FX margin by pay-in / pay-out), stacked right after its series; checked with the dataviz
     validator in the revenue stacking order on the card surface */
  --ds-chart-1-deep: #4fa800;
  --ds-chart-3-deep: #c45200;
  --ds-chart-in: #34e09a; /* money in, completed, profit */
  --ds-chart-out: #f2352b; /* money out, loss, expense: one step deeper than --error */
  --ds-chart-out-2: #ff8a7e; /* a second cost (trader affiliates) */
  --ds-chart-out-3: #d4246b; /* a third cost (merchant affiliates) */
  --ds-chart-warn: var(--warning); /* needs a look */
  --ds-chart-neutral: var(--text-2); /* other, previous period */
  /* named series roles (DsChart.PayIn, ...): one meaning, one colour on every dashboard of every role.
     Aliases of the marks above, so both themes follow. Numbered series 2 and 3 double as pay-in / pay-out:
     a chart that shows neither may still use them, a categorical split (geos, levels) starts at 4. */
  --ds-chart-payin: var(--ds-chart-2);
  --ds-chart-payout: var(--ds-chart-3);
  --ds-chart-completed: var(--ds-chart-in);
  --ds-chart-expired: var(--ds-chart-out);
  --ds-chart-conversion: var(--ds-chart-1);
  --ds-chart-income: var(--ds-chart-in);
  --ds-chart-expense: var(--ds-chart-out);
  --ds-chart-expense-2: var(--ds-chart-out-2);
  --ds-chart-expense-3: var(--ds-chart-out-3);
  --ds-chart-grid: rgba(255, 255, 255, 0.055);
  --ds-chart-grid-zero: rgba(255, 255, 255, 0.2);
  --ds-chart-axis: var(--text-2);
  --ds-chart-cursor: rgba(255, 255, 255, 0.28);
  --ds-chart-track: rgba(255, 255, 255, 0.07); /* donut / bar background */
  --ds-chart-area: 0.3; /* fill opacity at the top of the gradient under a line */
  --ds-chart-area-1: 0.42; /* the primary (first) series: the stronger wash */
  --ds-chart-tooltip-bg: var(--popover);
  --ds-chart-tooltip-border: var(--hairline-strong);
  --ds-chart-tooltip-text: var(--text);
  --ds-chart-legend-text: var(--text-2);

  /* type (the site's families under the portal's own names, see atlas-ds.css) */
  --font-sans: 'Rupee Sign', 'ATLAS DM Sans', 'DM Sans', 'Inter', 'Noto Sans Devanagari', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'ATLAS JetBrains Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* kit geometry and motion */
  --ds-r-card: 20px;
  --ds-r-panel: 14px;
  --ds-r-field: 12px;
  --ds-r-row: 10px;
  --ds-control-h: 40px;
  --ds-control-h-sm: 32px;
  --ds-page-max: 1440px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- bridge: app.css names → the tokens above ---------- */
  --color-bg-base: var(--ground);
  --color-bg-surface: var(--surface);
  --color-bg-elevated: var(--surface-raised);
  --color-bg-overlay: var(--popover);
  --color-bg-hover: var(--surface-hover);
  --color-bg-white-card: var(--surface);
  --color-bg-white-hover: var(--surface-hover);
  --color-bg-white-head: var(--surface-raised);

  --color-border: var(--hairline);
  --color-border-strong: var(--hairline-strong);
  --color-border-light: var(--hairline);

  --color-accent: var(--accent);
  --color-accent-dim: var(--accent-tint);
  --color-accent-hover: color-mix(in srgb, var(--accent) 86%, var(--text));
  --color-accent2: var(--error);
  --color-accent2-dim: var(--error-tint);

  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-2);
  --color-text-muted: var(--text-2);
  --color-text-on-accent: var(--accent-text);
  --color-text-dark: var(--text);
  --color-text-dark-sec: var(--text-2);

  --color-success: var(--success);
  --color-success-dim: var(--success-tint);
  --color-warning: var(--warning);
  --color-warning-dim: var(--warning-tint);
  --color-danger: var(--error);
  --color-danger-dim: var(--error-tint);
  --color-info: var(--info);
  --color-info-dim: var(--info-tint);
  --color-online: var(--success);
  --color-offline: var(--text-3);

  --badge-success-bg: var(--success-tint);
  --badge-success-text: var(--success);
  --badge-warning-bg: var(--warning-tint);
  --badge-warning-text: var(--warning);
  --badge-danger-bg: var(--error-tint);
  --badge-danger-text: var(--error);
  --badge-info-bg: var(--info-tint);
  --badge-info-text: var(--info);

  --shadow-sm: var(--surface-shadow);
  --shadow-card: var(--surface-shadow);
  --shadow-light-card: var(--surface-shadow);
  --shadow-dropdown: var(--shadow-listbox);
  --shadow-modal: var(--shadow-popover);
  --shadow-lg: var(--shadow-popover);

  --font-family: var(--font-sans);
  --font-family-cyr: var(--font-sans);
}

:root[data-theme='light'].ds,
:root[data-theme='light'] .ds {
  color-scheme: light;

  /* 2026-10-13 "back to the old colours": the pre-redesign light palette (a2710ac0 app.css
     [data-theme="light"], Tailwind slate + indigo) on the new components. A near-white ground, crisp
     white cards with a light slate edge and a faint drop, saturated status tones on -100 tints. */
  --ground: #f8fafc; /* old --color-bg-base */
  --ground-rgb: 248, 250, 252;
  --ground-2: #f1f5f9;
  --surface: #ffffff;
  --surface-raised: #f8fafc; /* old table head / white-head: a panel inside a card or sheet */
  --surface-hover: #f1f5f9; /* old --color-bg-hover */
  --surface-edge: 0 0 0 1px #e2e8f0, 0 1px 2px rgba(15, 23, 42, 0.04);
  --surface-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); /* old --shadow-card */
  --hairline: #e2e8f0; /* old --color-border */
  --hairline-strong: #cbd5e1;
  --hairline-hover: #94a3b8;
  --fg-rgb: 15, 23, 42;
  /* washes are cool slate, not grey: wash-2 lands exactly on the old #f1f5f9 over the ground and on the
     old white-hover #f8fafc over a card, so the menu pill and segments read as the old light chips */
  --wash-1: rgba(115, 155, 195, 0.03);
  --wash-2: rgba(115, 155, 195, 0.055);
  --wash-3: rgba(115, 155, 195, 0.1);
  --segment-on: #ffffff;

  --popover: #ffffff;
  --popover-card: #f8fafc;
  --popover-row: #f1f5f9;

  --field-bg: #ffffff;
  --field-border: #cbd5e1;
  --field-border-hover: #94a3b8;

  --text: #0f172a;
  --text-bright: #1e293b;
  --text-soft: #334155;
  --text-prose: #334155;
  --text-2: #5b6b82; /* the old slate-500 secondary, one notch firmer: 5.4:1 on white, 5.0:1 on #f1f5f9 */
  --text-3: #94a3b8; /* old --color-text-muted: decoration only */

  --accent: #4f46e5;
  --accent-rgb: 79, 70, 229;
  --accent-text: #ffffff;
  --accent-tint: #eef2ff; /* old --color-accent-dim */
  --accent-ring: rgba(79, 70, 229, 0.3);
  --accent-glow: rgba(79, 70, 229, 0.35);
  --accent-soft-text: #4338ca; /* old --color-accent-hover */

  /* old status hues, each the shade that keeps 4.5:1 on its own tint at badge size */
  --success: #15803d; /* 5.0:1 on white, 4.6:1 on its tint */
  --success-tint: #dcfce7;
  --success-ring: rgba(21, 128, 61, 0.28);
  --warning: #b45309;
  --warning-tint: #fef3c7;
  --error: #c81e1e;
  --error-tint: #fee2e2;
  --info: #1d4ed8;
  --info-tint: #dbeafe;
  --idle-tint: #f1f5f9;

  --focus-ring: #4f46e5;
  --selection-bg: #c7d2fe;
  --selection-text: #0f172a;

  /* the primary is the accent (indigo, white text) */
  --btn-primary-bg: #4f46e5;
  --btn-primary-bg-hover: #4338ca;
  --btn-primary-text: #ffffff;

  --header-glass: rgba(248, 250, 252, 0.85);
  --backdrop: rgba(15, 23, 42, 0.32);
  --shadow-popover: 0 20px 60px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.05); /* old --shadow-modal */
  --shadow-listbox: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04); /* old --shadow-dropdown */
  --shadow-float: 0 40px 80px -40px rgba(15, 23, 42, 0.25);

  --logo-ring: #0f172a;
  --flag-ring: rgba(15, 23, 42, 0.12);
  --band-glow: rgba(79, 70, 229, 0.05); /* the old body's faint indigo wash at the top */
  --band-dots: rgba(15, 23, 42, 0.08);
  --qr-plate: #ffffff;
  --qr-ink: #0f172a;
  --mini-chip-strong: #cbd5e1;
  --mini-knob: #ffffff;
  --mini-knob-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);

  /* charts: the old light dashboards' hues (pay-in #3b82f6, completed #10b981, the old P&L expense set) */
  --ds-chart-2: #3b82f6;
  --ds-chart-3: #d97706;
  --ds-chart-4: #0d9488;
  --ds-chart-5: #db2777; /* violet would blur into the indigo accent: pink takes 5, deep lime 6 */
  --ds-chart-6: #4d8a00;
  --ds-chart-7: #475569;
  --ds-chart-8: #94a3b8;
  --ds-chart-1-deep: #312e81; /* the indigo accent's deep shade: under the lightness band, 3:1+ on white */
  --ds-chart-3-deep: #92400e;
  --ds-chart-in: #15803d; /* also the --pnl-in text green: AA on white */
  --ds-chart-completed: #10b981; /* the old "Completed" line: a mark, never text */
  --ds-chart-out: #dc2626;
  --ds-chart-out-2: #e8604f;
  --ds-chart-out-3: #b3125a;
  --ds-chart-grid: #edf1f5;
  --ds-chart-grid-zero: #94a3b8;
  --ds-chart-cursor: #94a3b8;
  --ds-chart-track: #f1f5f9;
  --ds-chart-area: 0.18;
  --ds-chart-area-1: 0.26;
}

/* ---------- the document of a .ds role: the site's calm ground ---------- */
html.ds,
html.ds body {
  background-color: var(--ground);
  background-image: none;
  color: var(--text);
}
html.ds body {
  /* one soft glow from the top, as on the site's CTA band and /login. !important: app.css paints the
     light body (a cross pattern and three tints) with !important */
  background-color: var(--ground) !important;
  background-image: radial-gradient(70% 40% at 50% 0%, var(--band-glow), transparent 70%) !important;
  background-attachment: fixed !important;
  font-weight: 450; /* DM Sans is variable: a touch firmer than 400, so body text does not read washed out */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* the old noise overlay is not part of the design code */
html.ds body::after {
  display: none;
}
.ds ::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}
.ds :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* one frame without transitions while the theme flips (themeHelpers.setTheme) */
html.theme-switching.ds *,
html.theme-switching.ds *::before,
html.theme-switching.ds *::after {
  transition: none !important;
}
/* ================================================================
   Trader cabinet, ATLAS design system: the shell (MainLayout + NavMenu).
   Top bar, menu pill, counters, geo switch, icon buttons, language,
   theme, avatar, popovers, notifications, mobile drawer, notification
   toasts, the traffic glow and the geo-switch overlay.

   Every selector starts with html.ds: that is the
   trader's document only, and the extra type selector outranks the
   fit levels of responsive.css (html.nav-l1 …) and the light-theme
   overrides of app.css, so the shell reads the same at every width.
   Class names stay as js/responsive.js measures them.
   ================================================================ */

/* ---------- frame ---------- */
html.ds .app-shell {
  font-family: var(--font-sans);
  color: var(--text);
}
html.ds .topbar {
  height: 68px;
  margin-top: 8px;
  padding: 0 24px;
  gap: 16px;
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.ds .main {
  padding: 24px 32px 40px;
}
html.ds .topbar__left {
  gap: 8px;
}

/* ---------- logo: the /login mark + wordmark ---------- */
/* the brand at the site header's size: the mark reads as the brand, not as an icon, and the wordmark
   stays the largest word of the top bar (above the 14px menu items); the pre-redesign bar drew 56 / 26 */
html.ds .ds-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--logo-ring);
  border-radius: 10px;
  text-decoration: none;
}
html.ds .ds-brand:hover {
  text-decoration: none;
}
html.ds .ds-brand .ds-brand__mark {
  width: 52px;
  height: 52px;
  color: var(--logo-ring);
  filter: none;
  transform: none;
  transition: transform 0.6s var(--ease-out);
}
html.ds .ds-brand:hover .ds-brand__mark {
  transform: rotate(-18deg);
  filter: none;
}
html.ds .ds-brand__core {
  fill: var(--accent);
}
html.ds .ds-brand .ds-brand__word {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
  line-height: 1;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-transform: none;
}

/* ---------- menu pill ---------- */
html.ds .topbar__pill {
  gap: 2px;
  padding: 4px;
  background: var(--wash-2);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
html.ds .topbar__pill .nav-item {
  height: 36px;
  padding: 0 14px;
  gap: 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-2);
  background: transparent;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
html.ds .topbar__pill .nav-item:hover,
html.ds .topbar__pill .nav-item:focus {
  color: var(--text);
  background: var(--wash-2);
  text-decoration: none;
}
/* the current page: an accent pill (lime with ink in dark, indigo with white in light), the menu's
   one bright mark, so the eye finds "where am I" at once. !important: app.css paints the light
   theme's active item with !important */
html.ds .topbar__pill .nav-item.active,
html.ds .topbar__pill .nav-item.active:hover,
html.ds .topbar__pill .nav-item.active:focus,
html.ds[data-theme='light'] .topbar__pill .nav-item.active,
html.ds[data-theme='light'] .topbar__pill .nav-item.active:hover,
html.ds[data-theme='light'] .topbar__pill .nav-item.active:focus {
  color: var(--accent-text) !important;
  background: var(--accent) !important;
  font-weight: 600;
  box-shadow: none;
}
html.ds .topbar__pill .nav-item.active span {
  color: var(--accent-text) !important;
}
html.ds .topbar__pill .nav-item .nav-item__icon {
  display: none;
}
html.ds .topbar__pill .nav-item.active .nav-item__icon {
  display: block;
  color: var(--accent-text);
}
/* the dots on Devices and Disputes */
html.ds .nav-item .pc-nav-dot,
html.ds .nav-item.active .pc-nav-dot {
  width: 7px;
  height: 7px;
  margin-left: 0;
  background: var(--warning);
  box-shadow: 0 0 0 2px var(--ground);
}
html.ds .nav-item .pc-nav-dot.is-danger,
html.ds .nav-item.active .pc-nav-dot.is-danger {
  background: var(--error);
}
html.ds .topbar__pill .nav-item.active .pc-nav-dot {
  box-shadow: 0 0 0 2px var(--accent);
}

/* ---------- right side ---------- */
html.ds .topbar__right {
  gap: 4px;
}

/* counters: icon in the tone, number in text, on a quiet wash (no loud chips) */
html.ds .topbar__counter {
  height: 36px;
  padding: 0 12px 0 10px;
  margin-right: 2px;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--wash-2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s ease;
}
html.ds .topbar__counter:hover {
  background: var(--wash-3);
  color: var(--text);
  transform: none;
}
html.ds .topbar__counter--warn .ds-icon {
  color: var(--warning);
}
html.ds .topbar__counter--info .ds-icon {
  color: var(--info);
}
html.ds .topbar__counter--danger .ds-icon {
  color: var(--error);
}
html.ds .topbar__counter--danger {
  background: var(--error-tint);
}

/* round icon buttons: bell, docs, settings, theme (the site's .pds-iconbtn) */
html.ds .topbar__icon-btn,
html.ds .topbar__theme-toggle,
html.ds .topbar__burger {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  transform: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
html.ds .topbar__icon-btn:hover,
html.ds .topbar__theme-toggle:hover,
html.ds .topbar__burger:hover {
  color: var(--text);
  background: var(--wash-2);
  transform: none;
}
html.ds .topbar__icon-btn--active,
html.ds .topbar__icon-btn--active:hover {
  color: var(--text) !important;
  background: var(--wash-3) !important;
}
html.ds .topbar__burger {
  margin-right: 0;
}
html.ds .topbar__bell-dot {
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--error);
  border: 2px solid var(--ground);
  box-shadow: none;
  animation: none;
}

/* geo switch: flag + ISO3 on the same quiet button */
html.ds[data-role='trader'] .topbar__geo-btn {
  width: auto;
  height: 36px;
  padding: 0 12px 0 10px;
  gap: 8px;
  background: transparent;
  color: var(--text);
}
html.ds[data-role='trader'] .topbar__geo-btn[aria-expanded='true'] {
  background: var(--wash-2);
}
html.ds[data-role='trader'] .topbar__geo-flag {
  width: 20px;
  height: 14px;
  margin-right: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--flag-ring);
}
html.ds[data-role='trader'] .topbar__geo-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

/* language (shared LanguageSwitcher, restyled here only) */
html.ds .lang-switch__btn {
  height: 36px;
  padding: 0 10px;
  gap: 6px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
html.ds .lang-switch__btn:hover,
html.ds .lang-switch.is-open .lang-switch__btn {
  background: var(--wash-2);
  color: var(--text);
}
html.ds .lang-switch__btn .ds-icon {
  color: inherit;
}

/* avatar chip */
html.ds .ds-userchip {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 10px; /* concentric with the avatar square (22%) */
  background: transparent;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
html.ds .ds-userchip:hover,
html.ds .ds-userchip[aria-expanded='true'] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--hairline-strong);
}
html.ds .ds-userchip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- popovers: account, geo, language, notifications (the site's menu recipe) ---------- */
html.ds .pop,
html.ds .lang-switch__menu,
html.ds .notif-pop {
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-popover);
  color: var(--text);
  animation: ds-pop-in 0.16s var(--ease-out);
}
html.ds .pop,
html.ds .lang-switch__menu {
  padding: 6px;
}
html.ds .pop {
  width: 260px;
}
html.ds .pop--narrow {
  width: 240px;
}
html.ds .pop__head {
  gap: 12px;
  padding: 8px 8px 10px;
}
html.ds .pop__uname {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
html.ds .pop__urole {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
/* the account menu's "Change avatar" (opens DsAvatarPicker) under the name and the role; one line, so the
   content-sized phone menu grows to hold it instead of breaking it */
html.ds .pop__avatar-edit {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 8px;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
html.ds .pop__avatar-edit:hover {
  border-color: var(--accent);
  color: var(--accent-soft-text, var(--text));
}
html.ds .pop__avatar-edit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html.ds .pop__hr {
  margin: 4px 0;
  background: var(--hairline);
}
html.ds .pop__item,
html.ds .lang-switch__item {
  min-height: 40px;
  padding: 8px 12px;
  gap: 12px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
}
html.ds .pop__item:hover,
html.ds .pop__item:focus-visible,
html.ds .lang-switch__item:hover {
  background: var(--popover-row);
  color: var(--text);
  outline: none;
}
html.ds .pop__item i,
html.ds .pop__item .ds-icon {
  width: 16px;
  font-size: 14px;
  opacity: 1;
  color: var(--text-2);
}
html.ds .pop__item--active,
html.ds .lang-switch__item.is-active,
html.ds[data-theme='light'] .pop__item--active,
html.ds[data-theme='light'] .lang-switch__item.is-active {
  color: var(--text);
  background: transparent;
  font-weight: 500;
}
html.ds .pop__item--active::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
html.ds .pop__item-meta,
html.ds .pop__item--active .pop__item-meta,
html.ds[data-theme='light'] .pop__item--active .pop__item-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2);
}
html.ds .lang-switch__item .lang-switch__check {
  margin-left: auto;
  color: var(--accent);
}
html.ds .pop__item--danger,
html.ds .pop__item--danger i {
  color: var(--error);
}
html.ds .pop__item--danger:hover {
  background: var(--error-tint);
  color: var(--error);
}
html.ds .pop__langs {
  gap: 4px;
  padding: 4px 4px 6px;
}
html.ds .pop__lang {
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
html.ds .pop__lang:hover {
  background: var(--popover-row);
  color: var(--text);
}
html.ds .pop__lang.is-active,
html.ds[data-theme='light'] .pop__lang.is-active {
  background: var(--accent-tint);
  border-color: var(--accent-ring);
  color: var(--accent-soft-text);
}

/* notifications */
html.ds .notif-pop {
  width: 380px;
  right: 72px;
  overflow: hidden;
}
html.ds .notif-pop-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  gap: 12px;
}
html.ds .notif-pop-title {
  margin-right: auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
html.ds .notif-pop-mark {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 8px;
  padding: 4px 6px;
}
html.ds .notif-pop-mark:hover {
  color: var(--text);
  background: var(--wash-2);
  text-decoration: none;
}
html.ds .notif-pop-body {
  padding: 6px;
}
html.ds .notif-pop-empty {
  padding: 28px 0;
  color: var(--text-2);
}
html.ds .notif-pop-empty i {
  font-size: 20px;
  color: var(--text-3);
}
html.ds .notif-item,
html.ds[data-theme='light'] .notif-item {
  gap: 12px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
}
html.ds .notif-item:hover,
html.ds[data-theme='light'] .notif-item:hover {
  background: var(--popover-row);
}
html.ds .notif-item--unread,
html.ds[data-theme='light'] .notif-item--unread {
  background: var(--wash-2);
}
html.ds .notif-item-icon,
html.ds[data-theme='light'] .notif-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--wash-3);
  color: var(--text-2);
  font-size: 13px;
}
html.ds .notif-item--high .notif-item-icon {
  background: var(--warning-tint);
  color: var(--warning);
}
html.ds .notif-item--critical .notif-item-icon {
  background: var(--error-tint);
  color: var(--error);
}
html.ds .notif-item-title,
html.ds[data-theme='light'] .notif-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
html.ds .notif-item-msg,
html.ds[data-theme='light'] .notif-item-msg {
  font-size: 13px;
  color: var(--text-2);
}
html.ds .notif-item-time,
html.ds[data-theme='light'] .notif-item-time {
  font-size: 12px;
  color: var(--text-2);
}

/* ---------- notification toasts (layout) ---------- */
html.ds .notif-toast,
html.ds[data-theme='light'] .notif-toast {
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-left: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-popover);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.ds .notif-toast-icon {
  border-radius: 10px;
  background: var(--wash-3);
  color: var(--text-2);
}
html.ds .notif-toast--high .notif-toast-icon {
  background: var(--warning-tint);
  color: var(--warning);
}
html.ds .notif-toast--critical .notif-toast-icon {
  background: var(--error-tint);
  color: var(--error);
}
html.ds .notif-toast-title,
html.ds[data-theme='light'] .notif-toast-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
html.ds .notif-toast-msg,
html.ds[data-theme='light'] .notif-toast-msg {
  font-size: 13px;
  color: var(--text-2);
}
/* long unbroken values (wallet addresses, tx hashes, UTRs) wrap inside the card instead of running out of it */
html.ds .notif-toast-body {
  flex: 1;
  min-width: 0;
}
html.ds .notif-toast-title,
html.ds .notif-toast-msg {
  overflow-wrap: anywhere;
}
html.ds .notif-toast-close,
html.ds[data-theme='light'] .notif-toast-close {
  color: var(--text-2);
  border-radius: 8px;
}
html.ds .notif-toast-close:hover,
html.ds[data-theme='light'] .notif-toast-close:hover {
  color: var(--text);
  background: var(--wash-2);
}

/* ---------- mobile drawer ---------- */
html.ds .mobile-nav__backdrop {
  background: var(--backdrop);
}
html.ds .mobile-nav,
html.ds[data-theme='light'] .mobile-nav {
  width: 86%;
  max-width: 340px;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  box-shadow: var(--shadow-float);
}
html.ds .mobile-nav__head {
  padding: 16px 16px 12px 20px;
  border-bottom: 0;
}
html.ds .mobile-nav__title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
html.ds .mobile-nav__close,
html.ds[data-theme='light'] .mobile-nav__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
}
html.ds .mobile-nav__close:hover,
html.ds[data-theme='light'] .mobile-nav__close:hover {
  background: var(--wash-2);
  color: var(--text);
}
html.ds .mobile-nav__body {
  padding: 4px 12px 12px;
  gap: 2px;
}
html.ds .mobile-nav__body .nav-item,
html.ds[data-theme='light'] .mobile-nav__body .nav-item {
  min-height: 48px;
  padding: 0 14px;
  gap: 14px;
  border-radius: 12px;
  font-family: var(--font-sans);
  color: var(--text) !important;
  background: transparent;
}
html.ds .mobile-nav__body .nav-item span,
html.ds[data-theme='light'] .mobile-nav__body .nav-item span {
  font-size: 15px;
  font-weight: 500;
  color: var(--text) !important;
}
html.ds .mobile-nav__body .nav-item:hover,
html.ds[data-theme='light'] .mobile-nav__body .nav-item:hover {
  background: var(--wash-2);
}
html.ds .mobile-nav__body .nav-item .nav-item__icon {
  display: block;
  flex: none;
  color: var(--text-2);
}
/* the current page in the drawer: the accent tint with an accent bar at the start */
html.ds .mobile-nav__body .nav-item.active,
html.ds .mobile-nav__body .nav-item.active:hover,
html.ds[data-theme='light'] .mobile-nav__body .nav-item.active,
html.ds[data-theme='light'] .mobile-nav__body .nav-item.active:hover {
  background: var(--accent-tint) !important;
  color: var(--text) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
html.ds .mobile-nav__body .nav-item.active span,
html.ds[data-theme='light'] .mobile-nav__body .nav-item.active span {
  color: var(--text) !important;
  font-weight: 600;
}
html.ds .mobile-nav__body .nav-item.active .nav-item__icon {
  color: var(--accent-soft-text);
}
/* app.css gives every span of a drawer item flex: 1 (the label): the dot and the count keep their own size */
html.ds .mobile-nav__body .nav-item .pc-nav-dot {
  flex: 0 0 7px;
  width: 7px;
  min-width: 7px;
  height: 7px;
  margin-left: auto;
}
html.ds .mobile-nav__body .nav-item .nav-count {
  flex: 0 0 auto;
  margin-left: auto;
}
html.ds .mobile-nav__body .nav-item.active .pc-nav-dot {
  box-shadow: none;
}
html.ds .mobile-nav__footer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--hairline);
  gap: 8px;
}
html.ds .mobile-nav__theme,
html.ds[data-theme='light'] .mobile-nav__theme {
  min-height: 44px;
  padding: 0 14px;
  gap: 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
}
html.ds .mobile-nav__theme:hover,
html.ds[data-theme='light'] .mobile-nav__theme:hover {
  background: var(--wash-2);
}
html.ds .mobile-nav__theme .ds-icon {
  color: var(--text-2);
}
html.ds .mobile-nav__langs .pop__lang {
  height: 44px;
  border-radius: 12px;
  font-size: 13px;
}

/* ---------- traffic glow: the frame that says "traffic is live" on every page ---------- */
html.ds[data-role='trader'] .app-shell--traffic-on::before,
html.ds[data-role='trader'][data-theme='light'] .app-shell--traffic-on::before {
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  box-shadow:
    inset 0 0 64px rgba(var(--accent-rgb), 0.1),
    inset 0 0 14px rgba(var(--accent-rgb), 0.08);
  animation: ds-traffic 4.5s var(--ease-in-out) infinite;
}
@keyframes ds-traffic {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- geo-switch overlay ---------- */
html.ds[data-role='trader'] .geo-switch-overlay {
  background: rgba(var(--ground-rgb), 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html.ds[data-role='trader'] .geo-switch-card {
  gap: 18px;
  padding: 40px 48px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-float), var(--surface-shadow);
}
html.ds[data-role='trader'] .geo-switch-flag img {
  width: 96px;
  height: 64px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--flag-ring), 0 12px 32px -12px rgba(0, 0, 0, 0.5);
}
html.ds[data-role='trader'] .geo-switch-flag-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-2);
}
html.ds[data-role='trader'] .geo-switch-flag--to .geo-switch-flag-label {
  color: var(--text);
}
html.ds[data-role='trader'] .geo-switch-arrows {
  font-size: 24px;
  color: var(--accent);
  filter: none;
}
html.ds[data-role='trader'] .geo-switch-title {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}
html.ds[data-role='trader'] .geo-switch-sub {
  font-size: 15px;
  color: var(--text-2);
}
html.ds[data-role='trader'] .geo-switch-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--warning);
}

/* ---------- fit levels (js/responsive.js) ---------- */
html.nav-l1.ds .topbar {
  padding: 0 16px;
}
html.nav-l1.ds .topbar__pill .nav-item {
  padding: 0 11px;
  font-size: 13.5px;
}
/* the brand keeps its size at nav-l1 (only the menu tightens), a step smaller once the icons fold into
   the account menu (nav-l2, 46 / 23), so a long menu keeps the wordmark; below 1024 px 42 / 21 */
@media (min-width: 1024px) {
  html.nav-l2.ds .ds-brand {
    gap: 10px;
  }
  html.nav-l2.ds .ds-brand .ds-brand__mark {
    width: 46px;
    height: 46px;
  }
  html.nav-l2.ds .ds-brand .ds-brand__word {
    font-size: 23px;
  }
}
@media (max-width: 1023px) {
  html.ds .ds-brand {
    gap: 12px;
  }
  html.ds .ds-brand .ds-brand__mark {
    width: 42px;
    height: 42px;
  }
  html.ds .ds-brand .ds-brand__word {
    font-size: 21px;
  }
}

@media (max-width: 960px) {
  html.ds .topbar {
    height: 60px;
    margin-top: 4px;
    padding: 0 12px;
  }
  html.ds .main {
    padding: 16px 16px 32px !important;
  }
}
@media (max-width: 720px) {
  html.ds .topbar {
    height: 56px;
  }
  html.ds .topbar__right {
    gap: 2px;
    /* the account and notification menus span the bar on a phone (left / right 6px, app.css): their box is
       the sticky top bar, not this narrow cluster */
    position: static;
  }
  html.ds .topbar__counter {
    height: 32px;
    padding: 0 8px;
    gap: 4px;
  }
  html.ds[data-role='trader'] .topbar__geo-btn {
    height: 32px;
    padding: 0 8px;
  }
  html.ds[data-role='trader'] .topbar__geo-label {
    display: none;
  }
  html.ds .topbar__icon-btn,
  html.ds .topbar__burger {
    width: 34px;
    height: 34px;
  }
  html.ds .ds-userchip {
    width: 36px;
    height: 36px;
    margin-left: 2px;
  }
  html.ds .ds-userchip .ds-avatar {
    --av-size: 32px !important; /* DsAvatar sets --av-size inline */
  }
  html.ds .pop,
  html.ds .notif-pop {
    width: auto;
  }
  html.ds .pop__head .ds-avatar {
    --av-size: 44px !important;
  }
}

@keyframes ds-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ds[data-role='trader'] .app-shell--traffic-on::before {
    animation: none;
    opacity: 0.8;
  }
  html.ds .ds-brand:hover .ds-brand__mark {
    transform: none;
  }
}
/* ================================================================
   Portal, ATLAS design system: the kit (Components/Ds).
   One class family per component, prefix ds-. Every rule sits under
   .ds (<html> and .app-shell of a DsRoles role, or the dev
   kit page). Colours only from tokens.css; no literal colours here.

   Also here, because every page package uses them: the design-system look of
   the shared list primitives (pg-table + its phone cards, PaginationBar,
   StyledDropdown, DateInput, LocalTime). Roles not in DsRoles keep app.css.
   Rulebook: DS.md.
   ================================================================ */

/* ---------- type ---------- */
.ds .ds-h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
}
.ds .ds-h1:focus {
  outline: none;
}
.ds .ds-h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ds .ds-lead {
  margin: 6px 0 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.ds .ds-mono {
  font-family: var(--font-mono);
  font-size: 0.93em;
  letter-spacing: 0;
}
.ds .ds-sr,
.ds .ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ds .ds-icon {
  display: block;
  flex: none;
}

/* ---------- page head ---------- */
.ds .ds-page-head {
  margin: 0 0 24px;
}
.ds .ds-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px -8px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ds .ds-back:hover {
  color: var(--text);
  background: var(--wash-2);
  text-decoration: none;
}
.ds .ds-page-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.ds .ds-page-head__titles {
  min-width: 0;
  flex: 1 1 320px;
}
.ds .ds-page-head__title-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ds .ds-page-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- card and section ---------- */
.ds .ds-card {
  position: relative;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-card);
  box-shadow: var(--surface-shadow);
}
.ds .ds-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 20px 24px 0;
}
.ds .ds-card__lead {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .ds-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds .ds-card__body {
  padding: 20px 24px 24px;
}
.ds .ds-card--flush .ds-card__body {
  padding: 0;
}
.ds .ds-card--flush .ds-card__head {
  padding-bottom: 16px;
}
.ds .ds-card--ok {
  border-color: var(--success-ring);
}
.ds .ds-card--warn {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
.ds .ds-card--bad {
  border-color: color-mix(in srgb, var(--error) 35%, transparent);
}
.ds .ds-section {
  min-width: 0;
}
.ds .ds-section + .ds-section {
  margin-top: 32px;
}
.ds .ds-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ds .ds-section__lead {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-2);
}
.ds .ds-section__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------- KPI ---------- */
.ds .ds-kpi-row {
  display: grid;
  grid-template-columns: repeat(var(--ds-kpi-cols, 4), minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.ds .ds-kpi {
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
.ds .ds-kpi__label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .ds-kpi__label-text {
  min-width: 0;
}
/* the tinted icon square before the label (DsKpiIcon): the tone's colour on a soft tint of it */
.ds .ds-kpi__icon {
  --kpi-tone: var(--accent);
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--kpi-tone);
  background: color-mix(in srgb, var(--kpi-tone) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpi-tone) 22%, transparent);
}
.ds .ds-kpi__icon--payin {
  --kpi-tone: var(--ds-chart-payin);
}
.ds .ds-kpi__icon--payout {
  --kpi-tone: var(--ds-chart-payout);
}
.ds .ds-kpi__icon--ok {
  --kpi-tone: var(--success);
}
.ds .ds-kpi__icon--warn {
  --kpi-tone: var(--warning);
}
.ds .ds-kpi__icon--bad {
  --kpi-tone: var(--error);
}
.ds .ds-kpi__icon--info {
  --kpi-tone: var(--info);
}
.ds .ds-kpi__icon--neutral {
  --kpi-tone: var(--text-2);
}
.ds .ds-kpi__value {
  margin-top: 12px;
  font-size: 28px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ds .ds-kpi--ok .ds-kpi__value {
  color: var(--success);
}
/* the view's key figure (DsKpi Highlight): the accent, as the old cabinet showed conversion and success rate */
.ds .ds-kpi--key .ds-kpi__value,
.ds .ds-kpi--key .ds-kpi__value .ds-money,
.ds .ds-kpi--key .ds-kpi__value .ds-money__usdt {
  color: var(--accent);
}
.ds .ds-kpi--warn .ds-kpi__value {
  color: var(--warning);
}
.ds .ds-kpi--bad .ds-kpi__value {
  color: var(--error);
}
.ds .ds-kpi__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-2);
}
/* DsDelta (inside DsKpi as .ds-kpi__delta): a small tinted chip, green / red by meaning; a change that rounds
   to zero is a grey chip, never red or green */
.ds .ds-delta,
.ds .ds-kpi__delta {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--idle-tint);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-2);
}
.ds .ds-delta.is-good,
.ds .ds-kpi__delta.is-good {
  background: var(--success-tint);
  color: var(--success);
}
.ds .ds-delta.is-bad,
.ds .ds-kpi__delta.is-bad {
  background: var(--error-tint);
  color: var(--error);
}

/* ---------- money ---------- */
.ds .ds-money {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}
.ds .ds-money--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ds .ds-money__main {
  display: inline-flex;
  align-items: baseline;
}
.ds .ds-money__num {
  font-weight: 500;
}
.ds .ds-money__unit {
  margin-left: 0.35em;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--text-2);
}
.ds .ds-money__usdt {
  --usdt-size: 0.66em;
  margin-left: 0.28em;
  color: var(--text-2);
}
.ds .ds-money--lg .ds-money__usdt {
  --usdt-size: 0.56em;
}
.ds .ds-money--xl .ds-money__usdt {
  --usdt-size: 0.48em;
  margin-left: 0.22em;
}
.ds .ds-money__approx {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
}
.ds .ds-money--sm {
  font-size: 13px;
}
.ds .ds-money--md {
  font-size: 14px;
}
.ds .ds-money--lg {
  font-size: 26px;
  letter-spacing: -0.02em;
}
.ds .ds-money--lg .ds-money__num,
.ds .ds-money--xl .ds-money__num {
  font-weight: 600;
}
.ds .ds-money--xl {
  font-size: 38px;
  letter-spacing: -0.03em;
}
.ds .ds-money--xl .ds-money__dec {
  font-size: 0.62em;
  letter-spacing: -0.01em;
  color: var(--text-2);
}
.ds .ds-money--lg .ds-money__approx,
.ds .ds-money--xl .ds-money__approx {
  font-size: 14px;
  letter-spacing: 0;
}
.ds .ds-money--pos,
.ds .ds-money--pos .ds-money__usdt,
.ds .ds-money--pos .ds-money__unit {
  color: var(--success);
}
.ds .ds-money--neg,
.ds .ds-money--neg .ds-money__usdt,
.ds .ds-money--neg .ds-money__unit {
  color: var(--error);
}

/* rates: the bid side green, the ask side red (the old ticker's logic), and a spread the viewer earns green.
   Use on the cell or value: <td class="ds-bid">, <dd class="ds-ask">; a nested percent takes the same tone. */
.ds .ds-bid,
.ds .ds-earn {
  color: var(--success);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds .ds-ask {
  color: var(--error);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds .ds-bid *,
.ds .ds-ask *,
.ds .ds-earn * {
  color: inherit;
}

/* ---------- status: a tinted badge (dot + text in the tone on its tint), scannable down a column;
   the tag is the larger one for a sheet or page head ---------- */
.ds .ds-status {
  --tone: var(--text-2);
  --tone-tint: var(--idle-tint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 9px 3px 8px;
  border-radius: 7px;
  background: var(--tone-tint);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--tone);
  white-space: nowrap;
  vertical-align: middle;
}
.ds .ds-status--ok {
  --tone: var(--success);
  --tone-tint: var(--success-tint);
}
.ds .ds-status--warn {
  --tone: var(--warning);
  --tone-tint: var(--warning-tint);
}
.ds .ds-status--bad {
  --tone: var(--error);
  --tone-tint: var(--error-tint);
}
.ds .ds-status--info {
  --tone: var(--info);
  --tone-tint: var(--info-tint);
}
.ds .ds-status--idle {
  color: var(--text-2);
}
.ds .ds-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tone);
  flex: none;
}
.ds .ds-status--idle .ds-status__dot {
  background: var(--text-3);
}
.ds .ds-status__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds .ds-status--tag {
  min-height: 28px;
  padding: 0 11px 0 10px;
  border-radius: 8px;
  font-size: 13px;
}
.ds .ds-status.is-pulse .ds-status__dot {
  box-shadow: 0 0 0 0 var(--tone);
  animation: ds-pulse 1.8s var(--ease-out) infinite;
}
@keyframes ds-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}

/* ---------- time ---------- */
.ds .ds-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds .lt-utc {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-2);
}
.ds .ds-time--relative {
  color: var(--text-2);
}
.ds .zone-label {
  color: var(--text-2);
  opacity: 1;
  font-weight: 400;
}
.ds .ds-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.ds .ds-countdown .ds-icon {
  color: var(--text-2);
}
.ds .ds-countdown.is-urgent,
.ds .ds-countdown.is-urgent .ds-icon {
  color: var(--error);
}
.ds .ds-countdown.is-warn,
.ds .ds-countdown.is-warn .ds-icon {
  color: var(--warning);
}
.ds .ds-countdown.is-units {
  font-family: var(--font-sans);
  font-size: 14px;
}
.ds .ds-countdown.is-over {
  font-family: var(--font-sans);
  color: var(--text-2);
}
.ds .ds-countdown.is-overdue,
.ds .ds-countdown.is-overdue .ds-icon {
  color: var(--error);
}

/* ---------- form field (DsField) and the kit inputs ---------- */
.ds .ds-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ds .ds-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .ds-field__opt {
  font-weight: 400;
  color: var(--text-2);
}
.ds .ds-field__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .ds-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--error);
}
.ds .ds-field__error .ds-icon {
  margin-top: 2px;
}
.ds .ds-field__control {
  position: relative;
  display: flex;
  align-items: center;
}
.ds .ds-field__unit {
  position: absolute;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
  pointer-events: none;
}
.ds .ds-input,
.ds .ds-textarea,
.ds .ds-select {
  width: 100%;
  min-height: var(--ds-control-h);
  margin: 0;
  padding: 9px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
  background-color: var(--field-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
.ds .ds-field__control:has(.ds-field__unit) .ds-input {
  padding-right: 64px;
}
.ds .ds-input::placeholder,
.ds .ds-textarea::placeholder {
  color: var(--text-2);
  opacity: 0.85;
}
.ds .ds-input:hover,
.ds .ds-textarea:hover,
.ds .ds-select:hover {
  border-color: var(--field-border-hover);
}
.ds .ds-input:focus,
.ds .ds-textarea:focus,
.ds .ds-select:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .ds-input[aria-invalid='true'],
.ds .ds-textarea[aria-invalid='true'],
.ds .ds-select[aria-invalid='true'] {
  border-color: var(--error);
}
.ds .ds-input:disabled,
.ds .ds-textarea:disabled,
.ds .ds-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ds .ds-input--mono {
  font-family: var(--font-mono);
  font-size: 14px;
}
.ds .ds-textarea {
  min-height: 104px;
  resize: vertical;
}
.ds .ds-select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.ds .ds-select option {
  background: var(--popover);
  color: var(--text);
}

/* ---------- copy + id ---------- */
.ds .ds-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  flex: none;
  vertical-align: middle;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.ds .ds-copy:hover:not(:disabled) {
  color: var(--text);
  background: var(--wash-3);
}
.ds .ds-copy.is-copied,
.ds .ds-copy.is-copied:hover {
  color: var(--success);
}
.ds .ds-copy:disabled {
  opacity: 0.4;
  cursor: default;
}
.ds .ds-copy--labelled {
  width: auto;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .ds-copy--labelled.is-copied {
  border-color: var(--success-ring);
}
.ds .ds-id {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.ds .ds-id__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ONE copy rule for the portal: a copy button beside a value (DsId, a DsDetail value, a DsEntityLink with Copy,
   CopyableId) waits for the hover of its value or its table row on a pointer device, and shows on keyboard focus;
   touch screens always show it. A labelled copy button ("Copy amount") is a real button: always visible. */
@media (hover: hover) {
  .ds :is(.ds-id, .ds-dl__value, .ds-copyhost) .ds-copy:not(.ds-copy--labelled) {
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  }
  .ds :is(.ds-id, .ds-dl__value, .ds-copyhost):is(:hover, :focus-within) .ds-copy,
  .ds tr:hover :is(.ds-id, .ds-copyhost) .ds-copy,
  .ds .ds-copy:focus-visible,
  .ds .ds-copy.is-copied {
    opacity: 1;
  }
}
.ds .ds-copyhost {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

/* ---------- buttons (the site's pills) ---------- */
.ds .ds-btn {
  --btn-h: var(--ds-control-h);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out);
}
.ds .ds-btn:hover {
  text-decoration: none;
}
.ds .ds-btn:active:not([disabled]) {
  transform: scale(0.98);
}
.ds .ds-btn--sm {
  --btn-h: var(--ds-control-h-sm);
  padding: 0 14px;
  gap: 6px;
  font-size: 13px;
}
.ds .ds-btn--icon {
  width: var(--btn-h);
  padding: 0;
}
.ds .ds-btn--block {
  width: 100%;
}
.ds .ds-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.ds .ds-btn--primary:hover:not([disabled]) {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}
.ds .ds-btn--secondary {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--text);
}
.ds .ds-btn--secondary:hover:not([disabled]) {
  background: var(--wash-2);
  border-color: var(--hairline-hover);
  color: var(--text);
}
.ds .ds-btn--ghost {
  background: transparent;
  color: var(--text-2);
}
.ds .ds-btn--ghost:hover:not([disabled]) {
  background: var(--wash-2);
  color: var(--text);
}
.ds .ds-btn--danger {
  background: var(--error);
  color: var(--accent-text); /* ink on coral in dark, white on #b42318 in light */
}
.ds .ds-btn--danger:hover:not([disabled]) {
  background: color-mix(in srgb, var(--error) 88%, var(--text));
}
.ds .ds-btn[disabled]:not(.is-busy) {
  opacity: 0.45;
  cursor: not-allowed;
}
.ds .ds-btn.is-busy {
  cursor: progress;
}
.ds .ds-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ds-spin 0.7s linear infinite;
  flex: none;
}
.ds .ds-spinner--xs {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}
@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- toggle ---------- */
.ds .ds-toggle {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
}
.ds .ds-toggle__switch {
  position: relative;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--mini-chip-strong);
  cursor: pointer;
  flex: none;
  transition: background-color 0.2s ease;
}
.ds .ds-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mini-knob);
  box-shadow: var(--mini-knob-shadow);
  color: var(--qr-ink);
  transition: transform 0.22s var(--ease-out);
}
.ds .ds-toggle.is-on .ds-toggle__switch {
  background: var(--accent);
}
.ds .ds-toggle.is-on .ds-toggle__knob {
  transform: translateX(18px);
}
.ds .ds-toggle.is-busy .ds-toggle__switch {
  cursor: progress;
}
.ds .ds-toggle.is-locked .ds-toggle__switch {
  background: var(--wash-3);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.ds .ds-toggle.is-locked .ds-toggle__knob {
  color: var(--text-2);
}
.ds .ds-toggle__switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ds .ds-toggle__switch:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .ds-toggle__text {
  display: grid;
  gap: 2px;
  padding-top: 2px;
  cursor: pointer;
}
.ds .ds-toggle__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds .ds-toggle__desc {
  font-size: 13px;
  color: var(--text-2);
}
.ds .ds-toggle--sm .ds-toggle__switch {
  width: 36px;
  height: 22px;
}
.ds .ds-toggle--sm .ds-toggle__knob {
  width: 16px;
  height: 16px;
}
.ds .ds-toggle--sm.is-on .ds-toggle__knob {
  transform: translateX(14px);
}
.ds .ds-toggle--sm .ds-toggle__label {
  font-size: 14px;
}

/* ---------- tabs ---------- */
.ds .ds-tabs {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.ds .ds-tabs::-webkit-scrollbar {
  display: none;
}
.ds .ds-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.ds .ds-tab:hover {
  color: var(--text);
}
.ds .ds-tab__count {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ds .ds-tab__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.ds .ds-tab__dot--ok {
  background: var(--success);
}
.ds .ds-tab__dot--warn {
  background: var(--warning);
}
.ds .ds-tab__dot--bad {
  background: var(--error);
}
.ds .ds-tab__dot--info {
  background: var(--info);
}
/* line: page sections */
.ds .ds-tabs--line {
  gap: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.ds .ds-tabs--line .ds-tab {
  height: 44px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.ds .ds-tabs--line .ds-tab.is-active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.ds .ds-tabs--line .ds-tab.is-active .ds-tab__count {
  color: var(--accent-soft-text);
}
/* segment: a compact switch */
.ds .ds-tabs--segment {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--wash-2);
}
.ds .ds-tabs--segment .ds-tab {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
}
.ds .ds-tabs--segment .ds-tab.is-active {
  color: var(--accent-soft-text);
  font-weight: 600;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}
.ds .ds-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- toolbar ---------- */
.ds .ds-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ds .ds-toolbar__filters,
.ds .ds-toolbar__dates {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds .ds-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.ds .ds-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  max-width: 380px;
  min-width: 0;
}
.ds .ds-search__icon {
  position: absolute;
  left: 14px;
  color: var(--text-2);
  pointer-events: none;
}
.ds .ds-search__input {
  width: 100%;
  height: var(--ds-control-h);
  padding: 0 38px 0 40px;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
.ds .ds-search__input::-webkit-search-cancel-button {
  display: none;
}
.ds .ds-search__input::placeholder {
  color: var(--text-2);
}
.ds .ds-search__input:hover {
  border-color: var(--field-border-hover);
}
.ds .ds-search__input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .ds-search__clear {
  position: absolute;
  right: 6px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.ds .ds-search__clear:hover {
  background: var(--wash-3);
  color: var(--text);
}

/* the shared StyledDropdown on .ds pages: a field-like pill + the site's listbox */
.ds .pro-geo-btn {
  height: var(--ds-control-h);
  padding: 0 14px;
  gap: 8px;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
}
.ds .pro-geo-btn:hover {
  background: var(--field-bg);
  border-color: var(--field-border-hover);
}
.ds .pro-geo-btn .pro-geo-icon,
.ds .pro-geo-chevron {
  color: var(--text-2);
}
.ds .pro-geo-chevron {
  margin-left: auto;
  transition: transform 0.2s var(--ease-out);
}
.ds .pro-geo-chevron-open {
  transform: rotate(180deg);
}
.ds .pro-geo-menu {
  padding: 6px;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-listbox);
}
.ds .pro-geo-option {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.ds .pro-geo-option:hover,
.ds .pro-geo-option--hl {
  background: var(--popover-row);
  color: var(--text);
}
.ds .pro-geo-option-active,
.ds .pro-geo-option-active:hover {
  color: var(--text);
  font-weight: 500;
}
.ds .pro-geo-option-active .pro-geo-check {
  color: var(--accent);
}
.ds .pro-geo-search-icon {
  color: var(--text-2);
}
.ds .pro-geo-search {
  background: var(--popover);
  border-bottom-color: var(--hairline);
}
/* Searchable menus: the search box is sticky at the very top edge. The menu's own 6px top padding sat above it,
   so rows scrolled into that strip and peeked out over the search; the box now carries that padding itself. */
.ds .pro-geo-menu--searchable {
  padding-top: 0;
}
.ds .pro-geo-menu--searchable .pro-geo-search {
  top: 0;
  margin: 0 -6px 6px;
  padding: 6px 12px 8px;
}
.ds .pro-geo-search-input {
  border-color: var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
}
.ds .pro-geo-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ds .pro-geo-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* A dropdown standing in a DsField where a native select used to be (CssClass="pro-geo--field"):
   field-shaped and full width like .ds-select, the menu at least as wide as the field. */
.ds .pro-geo--field {
  display: block;
  width: 100%;
}
.ds .pro-geo--field .pro-geo-btn {
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--ds-r-field);
  font-size: 15px;
  font-weight: 400;
}
.ds .pro-geo--field .pro-geo-btn[aria-invalid='true'] {
  border-color: var(--error);
}
.ds .pro-geo--field .pro-geo-menu {
  min-width: 100%;
}

/* the shared DateInput on .ds pages */
/* sized by its text ("13 Oct 2026 · 23:59" never truncates), at least the placeholder's width */
.ds .date-picker-trigger {
  height: var(--ds-control-h);
  width: auto;
  min-width: 190px;
  max-width: 100%;
  padding: 0 12px 0 14px;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: var(--field-bg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
}
.ds .date-picker-trigger:hover {
  background: var(--field-bg);
  border-color: var(--field-border-hover);
}
.ds .date-picker-trigger:focus-visible,
.ds .date-picker--open .date-picker-trigger {
  border-color: var(--field-border-hover);
  box-shadow: none;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .date-picker-icon,
.ds .date-picker--open .date-picker-chevron {
  color: var(--text-2);
}
.ds .date-picker-placeholder {
  color: var(--text-2);
}
.ds .date-picker-value {
  overflow: visible;
  text-overflow: clip;
}
/* calendar labels in sentence case (no uppercase tracked labels anywhere) */
.ds .date-picker-day-cell,
.ds .date-picker-time-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.ds .date-picker-time-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
/* phones: two date fields share a row, so the field takes its cell and the text may shorten */
@media (max-width: 720px) {
  .ds .date-picker-trigger {
    min-width: 0;
    width: 100%;
  }
  .ds .date-picker-value {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.ds .date-picker-chevron {
  margin-left: auto;
  color: var(--text-2);
}
.ds .date-picker-clear {
  margin-left: auto;
  color: var(--text-2);
}
.ds .date-picker-popover {
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-listbox);
}

/* ---------- tables: the shared pg-table, design-system look ---------- */
.ds .ds-table-frame {
  min-width: 0;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
.ds .ds-card .ds-table-frame {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ds .pg-table {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
}
.ds .pg-table thead th {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  background: transparent;
  border-bottom: 1px solid var(--hairline);
}
.ds .pg-table tbody tr {
  border-bottom: 1px solid var(--hairline);
  cursor: default;
}
.ds .pg-table tbody tr:last-child {
  border-bottom: 0;
}
.ds .pg-table tbody td {
  padding: 14px 16px;
  font-weight: 500;
  color: var(--text);
}
.ds .pg-table tbody tr:hover {
  background: var(--wash-1);
}
.ds .pg-table tbody tr.ds-row-link,
.ds .pg-table tbody tr.pg-row--clickable {
  cursor: pointer;
}
/* a row you can open: an accent wash on hover, an accent bar on the open (selected) one */
.ds .pg-table tbody tr.ds-row-link:hover,
.ds .pg-table tbody tr.pg-row--clickable:hover {
  background: rgba(var(--accent-rgb), 0.05);
}
.ds .pg-table tbody tr.is-selected,
.ds .pg-table tbody tr[aria-selected='true'] {
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ds .pg-table tbody tr.ds-row-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.ds .ds-table--dense tbody td {
  padding: 10px 16px;
}
.ds .ds-table[aria-busy='true'] tbody {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.ds .pg-table .pg-table-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}
.ds .pg-table .pg-table-muted {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
}
.ds .pg-table tbody tr.live-new {
  animation: ds-row-in 2.6s var(--ease-out);
}
@keyframes ds-row-in {
  from {
    background: rgba(var(--accent-rgb), 0.12);
  }
}
/* phone cards (js/responsive.js → .rt--stacked) */
.ds table.rt--stacked > tbody > tr {
  margin: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}
.ds table.rt--stacked > tbody > tr > td[data-label]:not([data-label=''])::before {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
.ds table.rt--stacked td[data-cell='amount'] {
  font-size: 16px;
  font-weight: 500;
}

/* PaginationBar under a .ds list */
.ds .pg-pagination {
  margin-top: 12px;
  padding: 8px 0;
  gap: 12px;
  flex-wrap: wrap;
}
.ds .pg-pagination-info,
.ds[data-theme='light'] .pg-pagination-info {
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .pg-page-btn,
.ds[data-theme='light'] .pg-page-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text-2);
}
.ds .pg-page-btn:hover:not(:disabled),
.ds[data-theme='light'] .pg-page-btn:hover:not(:disabled) {
  background: var(--wash-2);
  color: var(--text);
}
.ds .pg-page-current,
.ds[data-theme='light'] .pg-page-current {
  height: 32px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-soft-text);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.ds .pg-pagesize-dropdown .pro-geo-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* ---------- detail list: label over value ---------- */
.ds .ds-dl {
  display: grid;
  grid-template-columns: repeat(var(--ds-dl-cols, 2), minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0;
}
.ds .ds-dl--dense {
  gap: 12px 20px;
}
.ds .ds-dl__item {
  min-width: 0;
  margin: 0;
}
.ds .ds-dl__item--wide {
  grid-column: 1 / -1;
}
.ds .ds-dl__label {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--text-2);
}
.ds .ds-dl__value {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text);
}
.ds .ds-dl__value.ds-mono {
  font-size: 14px;
  font-weight: 400;
}
.ds .ds-dl__content {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ds .ds-dl__empty {
  color: var(--text-2);
}
.ds .ds-dl__hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-2);
}

/* ---------- detail group: every group of facts is its own card (DsDetailGroup) ----------
   On the page ground it is a surface card; inside a sheet or a card it is one step up: --surface-raised
   (a lighter panel in dark, a grey-50 tint in light) with a hairline. The title sits INSIDE the header,
   a hairline under it; groups stack 12 px apart. */
.ds .ds-dg {
  min-width: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
.ds :is(.ds-sheet, .ds-card) .ds-dg {
  background: var(--surface-raised);
  box-shadow: none;
}
/* stacked in a sheet / card body (block flow): 12 px apart. A page or a wrapper that lays groups out in its own
   flex or grid uses its gap instead; a plain block wrapper takes .ds-dg-stack. */
.ds :is(.ds-sheet__body, .ds-card__body, .ds-dg__body, .ds-dg-stack) > * + .ds-dg {
  margin-top: 12px;
}
.ds .ds-dg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 13px 18px 12px;
  border-bottom: 1px solid var(--hairline);
}
.ds .ds-dg__titles {
  flex: 1 1 auto;
  min-width: 0;
}
.ds .ds-dg__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.ds .ds-dg__hint {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .ds-dg__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-2);
}
.ds .ds-dg__body {
  min-width: 0;
  padding: 16px 18px 18px;
}
.ds .ds-dg .ds-dl {
  gap: 16px 20px;
}
.ds .ds-dg__more,
.ds .ds-dg__body > * + .ds-dl {
  margin-top: 16px;
}
/* foldable (Technical details): the whole header row is the toggle */
.ds .ds-dg__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: -13px -18px -12px;
  padding: 13px 18px 12px;
  box-sizing: content-box;
  border: 0;
  border-radius: var(--ds-r-panel);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ds .ds-dg__toggle:hover .ds-dg__chev {
  color: var(--text);
}
.ds .ds-dg__toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.ds .ds-dg__chev {
  flex: none;
  color: var(--text-2);
  transition: transform 0.18s var(--ease-out), color 0.15s ease;
}
.ds .ds-dg__toggle[aria-expanded="true"] .ds-dg__chev {
  transform: rotate(180deg);
}
.ds .ds-dg.is-collapsed .ds-dg__head {
  border-bottom: 0;
}
.ds .ds-dg.is-collapsed .ds-dg__title {
  color: var(--text-2);
}
.ds .ds-dg.is-collapsed .ds-dg__toggle:hover .ds-dg__title {
  color: var(--text);
}
/* the group the viewer acts in (manual confirm, settle): an accent edge */
.ds .ds-dg--emphasis,
.ds :is(.ds-sheet, .ds-card) .ds-dg--emphasis {
  border-color: var(--accent-ring);
  box-shadow: inset 3px 0 0 var(--accent);
}
@media (max-width: 640px) {
  .ds .ds-dg__head {
    padding: 12px 14px 11px;
  }
  .ds .ds-dg__toggle {
    margin: -12px -14px -11px;
    padding: 12px 14px 11px;
  }
  .ds .ds-dg__body {
    padding: 14px;
  }
  .ds .ds-dg .ds-dl {
    gap: 14px 16px;
  }
}
/* a group is narrow enough to scan: keep two columns on a phone (a long value spans with Wide) */
@media (max-width: 420px) {
  .ds .ds-dg .ds-dl {
    grid-template-columns: repeat(min(var(--ds-dl-cols, 2), 2), minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds .ds-dg__chev {
    transition: none;
  }
}

/* ---------- empty, loading, error, notice ---------- */
.ds .ds-empty,
.ds .ds-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
}
.ds .ds-empty--compact,
.ds .ds-error--compact {
  padding: 28px 16px;
}
.ds .ds-empty__icon,
.ds .ds-error__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--wash-3);
  color: var(--text-2);
}
.ds .ds-error__icon {
  background: var(--error-tint);
  color: var(--error);
}
.ds .ds-empty__title,
.ds .ds-error__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.ds .ds-empty__text,
.ds .ds-error__text {
  margin: 6px 0 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .ds-empty__action,
.ds .ds-error .ds-btn {
  margin-top: 18px;
}
.ds .ds-skel {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--wash-2) 0%, var(--wash-3) 40%, var(--wash-2) 80%);
  background-size: 300% 100%;
  animation: ds-shimmer 1.6s ease-in-out infinite;
}
.ds .ds-skel--label {
  width: 46%;
  height: 12px;
}
.ds .ds-skel--kpi {
  width: 64%;
  height: 24px;
  margin-top: 12px;
}
.ds .ds-skel--block {
  width: 100%;
  height: 180px;
  border-radius: var(--ds-r-panel);
}
.ds .ds-skel--line {
  width: var(--w, 70%);
  height: 12px;
  margin: 10px 0;
}
.ds .ds-skel--cell {
  width: var(--w, 20%);
  height: 12px;
}
.ds .ds-loading--rows {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .ds-loading__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--hairline);
}
.ds .ds-loading__row:last-child {
  border-bottom: 0;
}
@keyframes ds-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -50% 0;
  }
}
.ds .ds-notice {
  --tone: var(--info);
  --tone-tint: var(--info-tint);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tone-tint);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}
.ds .ds-notice--ok {
  --tone: var(--success);
  --tone-tint: var(--success-tint);
}
.ds .ds-notice--warn {
  --tone: var(--warning);
  --tone-tint: var(--warning-tint);
}
.ds .ds-notice--bad {
  --tone: var(--error);
  --tone-tint: var(--error-tint);
}
.ds .ds-notice--idle {
  --tone: var(--text-2);
  --tone-tint: var(--wash-2);
}
.ds .ds-notice__icon {
  margin-top: 2px;
  color: var(--tone);
}
/* The text takes the row beside the icon and keeps at least 220 px (or the whole row next to the icon
   when the notice is narrower): it never wraps under the icon. Only the action moves to a line of its
   own in a narrow drawer or on a phone, instead of squeezing the text to a word per line. */
.ds .ds-notice__body {
  flex: 1 1 0;
  min-width: min(220px, calc(100% - 26px));
}
.ds .ds-notice__title {
  margin: 0 0 2px;
  font-weight: 500;
}
.ds .ds-notice__action {
  flex: none;
  align-self: center;
  margin-left: auto;
}

/* ---------- sheet: dialog on a desktop, bottom sheet on a phone ---------- */
.ds .ds-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: ds-fade 0.18s ease;
}
.ds .ds-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0; /* long ids / tables inside must not push the sheet past a phone's width */
  max-height: min(860px, calc(100dvh - 48px));
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-card);
  box-shadow: var(--shadow-popover);
  color: var(--text);
  outline: none;
  animation: ds-rise 0.28s var(--ease-out);
}
.ds .ds-sheet--sm {
  max-width: 440px;
}
.ds .ds-sheet--md {
  max-width: 560px;
}
.ds .ds-sheet--lg {
  max-width: 760px;
}
.ds .ds-sheet--xl {
  max-width: 960px;
}
.ds .ds-sheet__grip {
  display: none;
}
.ds .ds-sheet__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px 0 24px;
}
.ds .ds-sheet__titles {
  flex: 1;
  min-width: 0;
}
.ds .ds-sheet__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--text);
}
.ds .ds-sheet__sub {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-2);
}
.ds .ds-sheet__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ds .ds-sheet__close {
  width: 36px;
  height: 36px;
  margin: -4px 0 0;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.ds .ds-sheet__close:hover {
  background: var(--wash-2);
  color: var(--text);
}
.ds .ds-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 24px;
}
.ds .ds-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--hairline);
}
.ds .ds-confirm__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}
html.ds-sheet-open,
html.ds-sheet-open body {
  overflow: hidden;
}
@media (max-width: 640px) {
  .ds .ds-sheet-layer {
    place-items: end stretch;
    padding: 0;
  }
  .ds .ds-sheet {
    max-width: none;
    max-height: calc(100dvh - 40px);
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    animation: ds-sheet-up 0.32s var(--ease-out);
  }
  .ds .ds-sheet__grip {
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--hairline-strong);
  }
  .ds .ds-sheet__head {
    padding: 12px 12px 0 20px;
  }
  .ds .ds-sheet__body {
    padding: 16px 20px 20px;
  }
  .ds .ds-sheet__foot {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .ds .ds-sheet__foot .ds-btn {
    flex: 1 1 0;
  }
}
@keyframes ds-fade {
  from {
    opacity: 0;
  }
}
@keyframes ds-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}
@keyframes ds-sheet-up {
  from {
    transform: translateY(100%);
  }
}

/* ---------- toasts (TrToastHost) ---------- */
.ds .ds-toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.ds .ds-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 14px 10px 14px 16px;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-popover);
  pointer-events: auto;
  animation: ds-toast-in 0.28s var(--ease-out);
}
.ds .ds-toast__icon {
  margin-top: 1px;
  color: var(--info);
}
.ds .ds-toast--success .ds-toast__icon {
  color: var(--success);
}
.ds .ds-toast--error .ds-toast__icon {
  color: var(--error);
}
.ds .ds-toast__body {
  flex: 1;
  min-width: 0;
}
.ds .ds-toast__title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .ds-toast__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
/* long unbroken values (addresses, hashes, ids) wrap inside the toast */
.ds .ds-toast__title,
.ds .ds-toast__text {
  overflow-wrap: anywhere;
}
.ds .ds-toast__close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-top: -4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  flex: none;
}
.ds .ds-toast__close:hover {
  background: var(--wash-3);
  color: var(--text);
}
@keyframes ds-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (max-width: 640px) {
  .ds .ds-toasts {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
  }
  .ds .ds-toast {
    width: auto;
    max-width: none;
  }
}

/* ---------- avatar (DsAvatar / DsAvatarFace) ----------
   A Notionists person (ink lines, white face) on a bright rounded square. DsAvatarFace sets --av-bg (one colour
   for both themes: the drawing stays ink and white, so it reads on every background) and --av-size (the edge).
   The palest squares (lime, lilac, yellow, ice, mint) take a hairline ring in the light theme so they hold on
   white cards. */
.ds .ds-avatar {
  --av-size: 40px;
  --av-bg: #7e8bff;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--av-size);
  height: var(--av-size);
  border-radius: 22%;
  overflow: hidden;
  vertical-align: middle;
  background: var(--av-bg);
  user-select: none;
}
.ds .ds-avatar > svg {
  display: block;
  width: 100%;
  height: 100%;
}
:root[data-theme='light'] .ds .ds-avatar--pale,
:root[data-theme='light'].ds .ds-avatar--pale {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.16);
}

/* the user's own photo (AvatarPhotos): round, the picture covering the circle, a hairline ring so a pale photo
   holds on a pale card. The face it replaces is the fallback when the image fails. */
.ds .ds-avatar--photo {
  border-radius: 50%;
  background: var(--surface-raised);
}
.ds .ds-avatar--photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds .ds-avatar--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hairline);
  pointer-events: none;
}

/* an avatar that opens DsAvatarPicker (own profile, the admin's user page): a small pencil marks it */
.ds .ds-avatar-btn {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 22%;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.ds .ds-avatar-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.ds .ds-avatar-btn__edit {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  box-shadow: 0 0 0 1px var(--hairline);
}
.ds .ds-avatar-btn:hover .ds-avatar-btn__edit {
  color: var(--accent-soft-text, var(--text-2));
}
/* ---------- avatar picker (DsAvatarPicker) ----------
   Preview (96 / 32 / 24) on the left, the 16 swatches and a page of 20 characters on the right; one column on a
   phone. The selected swatch / character carries the accent ring. */
.ds .ds-avpick__body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px;
}
.ds .ds-avpick__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 10px;
  border-radius: var(--ds-r-panel, 14px);
  background: var(--surface-raised);
  align-self: start;
}
.ds .ds-avpick__row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.ds .ds-avpick__name {
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .ds-avpick__label {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-2);
}
.ds .ds-avpick__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.ds .ds-avpick__sw {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.ds .ds-avpick__opts {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.ds .ds-avpick__opt {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  aspect-ratio: 1;
}
.ds .ds-avpick__opt .ds-avatar {
  --av-size: 100% !important;
  width: 100%;
  height: 100%;
}
.ds .ds-avpick__sw[aria-pressed='true'],
.ds .ds-avpick__opt[aria-pressed='true'] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
.ds .ds-avpick__sw:focus-visible,
.ds .ds-avpick__opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.ds .ds-avpick__count {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--text-2);
}
@media (max-width: 640px) {
  .ds .ds-avpick__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .ds-avpick__opts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- avatar sheet: tabs, notes and the photo side (DsAvatarPhotoEditor, js/avatar-crop.js) ----------
   Photo: a dashed drop zone until a picture is chosen, then the crop: the picture on a square stage under a
   circular mask (what lands outside the circle is dimmed), zoom slider + quarter turn under it. The left column
   previews the crop live at 96 / 32 / 24 px (canvases), or the avatar as it is now before a pick. */
.ds .ds-avpick__tabs {
  margin-bottom: 18px;
}
.ds .ds-avpick__note {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .ds-avpick__spacer {
  margin-right: auto;
}
.ds .ds-avphoto__current,
.ds .ds-avphoto__new {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.ds .ds-avphoto__new,
.ds .ds-avphoto.is-loaded .ds-avphoto__current {
  display: none;
}
.ds .ds-avphoto.is-loaded .ds-avphoto__new {
  display: flex;
}
.ds .ds-avphoto__pv {
  display: block;
  flex: none;
  width: var(--pv);
  height: var(--pv);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.ds .ds-avphoto__main {
  min-width: 0;
}
.ds .ds-avphoto__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 300px;
  padding: 24px;
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--ds-r-panel, 14px);
  background: var(--surface-raised);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.ds .ds-avphoto__drop:hover,
.ds .ds-avphoto.is-dragging .ds-avphoto__drop {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.ds .ds-avphoto__drop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.ds .ds-avphoto__drop-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.ds .ds-avphoto__drop-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ds .ds-avphoto__drop-hint {
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .ds-avphoto__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ds .ds-avphoto__editor {
  display: none;
}
.ds .ds-avphoto.is-loaded .ds-avphoto__drop {
  display: none;
}
.ds .ds-avphoto.is-loaded .ds-avphoto__editor {
  display: block;
}
.ds .ds-avphoto__stage {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--ds-r-panel, 14px);
  background: #0b0d12;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.ds .ds-avphoto__stage:active {
  cursor: grabbing;
}
.ds .ds-avphoto__stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.ds .ds-avphoto__stage > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ds .ds-avphoto__mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle closest-side, transparent calc(100% - 1px), rgba(6, 8, 12, 0.6) 100%);
}
.ds .ds-avphoto__mask::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.ds .ds-avphoto__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 320px);
  margin: 14px auto 0;
  color: var(--text-2);
}
.ds .ds-avphoto__zoom {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}
.ds .ds-avphoto__tool {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.ds .ds-avphoto__tool:hover {
  border-color: var(--hairline-hover);
}
.ds .ds-avphoto__tool:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ds .ds-avphoto__tip {
  margin: 10px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--text-2);
}
.ds .ds-avphoto__error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--error-tint);
  color: var(--error);
  font-size: 13px;
}
@media (max-width: 640px) {
  .ds .ds-avphoto .ds-avpick__preview {
    flex-direction: row;
    justify-content: center;
    padding: 12px;
  }
  .ds .ds-avphoto.is-loaded .ds-avphoto__new,
  .ds .ds-avphoto__current {
    flex-direction: row;
    justify-content: center;
  }
  .ds .ds-avphoto__drop {
    min-height: 220px;
  }
}

/* ---------- phones ---------- */
@media (max-width: 960px) {
  .ds .ds-kpi-row {
    grid-template-columns: repeat(min(var(--ds-kpi-cols, 4), 3), minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .ds .ds-h1 {
    font-size: 24px;
  }
  .ds .ds-page-head {
    margin-bottom: 18px;
  }
  .ds .ds-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ds .ds-kpi {
    padding: 14px;
  }
  .ds .ds-kpi__value {
    font-size: 20px;
  }
  .ds .ds-card__head {
    padding: 16px 16px 0;
  }
  .ds .ds-card__body {
    padding: 16px;
  }
  .ds .ds-dl {
    grid-template-columns: repeat(min(var(--ds-dl-cols, 2), 2), minmax(0, 1fr));
    gap: 14px 16px;
  }
  .ds .ds-toolbar .ds-search {
    flex: 1 1 100%;
    max-width: none;
  }
  .ds .ds-toolbar__filters,
  .ds .ds-toolbar__dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .ds .ds-toolbar__filters > *,
  .ds .ds-toolbar__dates > *,
  .ds .ds-toolbar .pro-geo-btn,
  .ds .ds-toolbar .date-picker-trigger {
    width: 100%;
  }
  .ds .ds-toolbar__actions {
    margin-left: 0;
  }
  .ds .ds-money--xl {
    font-size: 30px;
  }
}
@media (max-width: 420px) {
  .ds .ds-dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds .ds-skel,
  .ds .ds-status.is-pulse .ds-status__dot,
  .ds .ds-sheet,
  .ds .ds-sheet-layer,
  .ds .ds-toast {
    animation: none;
  }
}

/* ---------- entity links (DsEntityLink) ----------
   Like the site's prose links: ink text with a hairline underline, the accent on hover/focus. One look for every
   entity reference on every page; .ds-entity--quiet hides the underline until hover for dense tables. */
.ds .ds-entity {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hairline-hover);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.ds a.ds-entity:hover,
.ds a.ds-entity:focus-visible {
  color: var(--text);
  text-decoration-color: var(--accent);
}
.ds a.ds-entity:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}
.ds .ds-entity--quiet {
  text-decoration-color: transparent;
}
.ds .ds-entity--plain {
  text-decoration: none;
}

/* ---------- checkbox (DsCheckbox) ----------
   The native input stays (keyboard, forms, screen readers) but is visually hidden; the box is drawn next to it. */
.ds .ds-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.ds .ds-check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ds .ds-check__box {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--field-border-hover);
  border-radius: 5px;
  background: var(--field-bg);
  color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ds .ds-check:hover .ds-check__box {
  border-color: var(--text-2);
}
.ds .ds-check__input:checked + .ds-check__box,
.ds .ds-check__input:indeterminate + .ds-check__box {
  border-color: var(--btn-primary-bg);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.ds .ds-check__input:focus-visible + .ds-check__box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .ds-check__input:disabled + .ds-check__box,
.ds .ds-check:has(.ds-check__input:disabled) {
  opacity: 0.5;
  cursor: default;
}
.ds .ds-check__hint {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}

/* ---------- sortable column header (DsSortHeader) ----------
   Quiet: the header text stays text-2 like every other header; the arrow shows on hover and on the sorted column. */
.ds .ds-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -4px -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
.ds .ds-sort:hover {
  color: var(--text);
}
.ds .ds-sort:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}
.ds .ds-sort__arrow {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ds .ds-sort:hover .ds-sort__arrow,
.ds .ds-sort.is-sorted .ds-sort__arrow {
  opacity: 1;
}
.ds .ds-sort.is-sorted {
  color: var(--text);
}
/* right-aligned (number) columns put the arrow before the label */
.ds th.is-num .ds-sort {
  flex-direction: row-reverse;
}
/* ================================================================
   Design system: one chart language for every chart and dashboard
   (DS.md, "Charts"). Tokens: --ds-chart-* in tokens.css, both themes.

   One frame (chart-card / admin-chart-card), one grid (solid hairlines,
   a stronger zero line), one axis type (13px-ish secondary, tabular, no
   uppercase), one tooltip (popover surface, date title, dot + label +
   right-aligned value rows), one legend (round dots, secondary text),
   one empty state (the kit's), one KPI tile (kpi-tile-ext = DsKpi look,
   in legacy.css).

   Components covered: MultiLineChart (mlc-*, multi-line-chart-*),
   DivergingChart and its wrappers PnlChart / LabelBookChart /
   ProgramChart / FlowCard / ReferralTurnoverChart (pnl-chart-*),
   ReferralHourChart (ref-hours-*), RevenueDonut (rev-donut-*,
   rev-legend-*), RevenueColumns (rev-cols-*), Sparkline (spark-area,
   sparkline-svg), ChartCard (chart-card-*).

   Series colours a component receives from C# (ChartSeries.Color,
   DivergingSeries.Color, RevenueSource.Color) are DsChart strings
   (var(--ds-chart-n)) or the named aliases below; components put them in
   style=, never in SVG presentation attributes.
   ================================================================ */

/* ---------- named series: the older domain names, now aliases of the one palette ---------- */
html.ds,
.ds {
  /* the Atlas Label: its own series token, outside the numbered palette, the same violet in both themes
     (the pre-redesign label colour). It marks the label's income wherever finance draws it (the label
     book's chart, keys, statement swatch, balance meter; the dashboard's label block) and nothing else */
  --ds-series-atlas: #7a47f3;
  /* P&L and money flows: marks use the chart in/out; text keeps the status tones (AA) */
  --pnl-in: var(--ds-chart-in);
  --pnl-out: var(--error);
  --pnl-expense: var(--ds-chart-out);
  --pnl-expense-ref: var(--ds-chart-out-2);
  --pnl-expense-aff: var(--ds-chart-out-3);
  /* referral and affiliate programmes: pay-in / pay-out take their roles; the levels and the merchant
     programme are a categorical split, so they start at series 4 (never the pay-in blue / pay-out amber) */
  --ref-l1: var(--ds-chart-4);
  --ref-l2: var(--ds-chart-5);
  --ref-payin: var(--ds-chart-payin);
  --ref-payout: var(--ds-chart-payout);
  --arf-l1-fb: var(--ds-chart-4);
  --arf-l2-fb: var(--ds-chart-5);
  --aaf-merchant: var(--ds-chart-6);
  /* revenue sources: the platform's own pool is the headline (series 1). Split by direction, the
     pay-in half keeps the source's colour and the pay-out half takes its deep shade */
  --rev-trader: var(--ds-chart-1);
  --rev-trader-po: var(--ds-chart-1-deep);
  --rev-cascade: var(--ds-chart-2);
  --rev-fx: var(--ds-chart-3);
  --rev-fx-po: var(--ds-chart-3-deep);
  --rev-atlas: var(--ds-series-atlas);
  --rev-settlement: var(--ds-chart-6);
  /* geos on the merchant dashboard (pay-ins split by geo; one geo draws the pay-in role): a categorical
     split, so never the pay-in blue or the pay-out amber that sit next to them */
  --geo-ar: var(--ds-chart-4);
  --geo-ve: var(--ds-chart-5);
  --geo-in: var(--ds-chart-6);
  --geo-kr: var(--ds-chart-1);
}
/* light: settlement keeps series 5, as before the label got its own token */
:root[data-theme='light'].ds,
:root[data-theme='light'] .ds {
  --rev-settlement: var(--ds-chart-5);
}

/* ---------- frame ---------- */
html.ds .chart-card,
html.ds .admin-chart-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
html.ds .chart-card-title::before {
  display: none;
}
html.ds .chart-card-title,
html.ds .admin-chart-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
}
/* the dashboards' chart head (admin, cascade, support, trader): title, period words, date span */
html.ds .admin-chart-header h3 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
html.ds .admin-chart-period-label,
html.ds .admin-chart-period {
  padding: 0;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
html.ds .admin-chart-subtitle,
html.ds .chart-card-subtitle {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

/* ---------- grid, zero line, cursor: solid hairlines ---------- */
html.ds .mlc-grid,
html.ds .pnl-chart-grid,
html.ds .rev-cols-grid {
  border-top: 1px solid var(--ds-chart-grid);
  border-top-style: solid;
  background: none;
  opacity: 1;
}
html.ds .mlc-grid.is-zero,
html.ds .pnl-chart-grid.is-zero,
html.ds .rev-cols-grid.is-zero {
  border-top-color: var(--ds-chart-grid-zero);
}
html.ds .mlc-cursor {
  border-left: 1px solid var(--ds-chart-cursor);
}
html.ds .mlc-dot {
  border-color: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 22%, transparent);
}
/* the current period: an accent band behind the last point, ringed dots on it (hidden while hovering) */
html.ds .mlc-now {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.09));
  pointer-events: none;
}
html.ds .mlc-dot--now {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 28%, transparent);
}

/* ---------- axes ---------- */
html.ds .mlc-ytick,
html.ds .mlc-xtick,
html.ds .pnl-chart-ytick,
html.ds .pnl-chart-xtick,
html.ds .rev-cols-ytick,
html.ds .rev-cols-xtick,
html.ds .ref-dual-axis,
html.ds .ref-dual-unit,
html.ds .ref-hours-axis {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-chart-axis);
  font-variant-numeric: tabular-nums;
}

/* ---------- lines and areas ---------- */
html.ds .multi-line-chart-line {
  stroke-width: 2.25;
}
html.ds .spark-area {
  opacity: var(--ds-chart-area);
}
html.ds .sparkline-svg {
  stroke: var(--ds-chart-1);
}

/* ---------- the one tooltip ---------- */
html.ds .multi-line-chart-tooltip,
html.ds .pnl-chart-tip,
html.ds .rev-cols-tip {
  padding: 10px 12px;
  background: var(--ds-chart-tooltip-bg);
  border: 1px solid var(--ds-chart-tooltip-border);
  border-radius: 12px;
  box-shadow: var(--shadow-listbox);
  color: var(--ds-chart-tooltip-text);
  font-family: var(--font-sans);
  font-size: 13px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.ds .multi-line-chart-tooltip-title,
html.ds .pnl-chart-tip-title,
html.ds .rev-cols-tip-title {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-chart-tooltip-text);
}
html.ds .multi-line-chart-tooltip-row,
html.ds .pnl-chart-tip-row,
html.ds .rev-cols-tip-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  padding: 2px 0;
  font-size: 13px;
}
html.ds .multi-line-chart-tooltip-dot,
html.ds .pnl-chart-tip-dot,
html.ds .rev-cols-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: none;
}
html.ds .multi-line-chart-tooltip-label,
html.ds .pnl-chart-tip-label,
html.ds .rev-cols-tip-label {
  color: var(--text-2);
  font-weight: 400;
}
html.ds .multi-line-chart-tooltip-val,
html.ds .pnl-chart-tip-val,
html.ds .rev-cols-tip-val {
  color: var(--ds-chart-tooltip-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
html.ds .pnl-chart-tip-total {
  border-top-color: var(--hairline);
}
html.ds .pnl-chart-tip-total .pnl-chart-tip-label {
  color: var(--text);
}

/* ---------- the one legend ---------- */
html.ds .multi-line-chart-legend,
html.ds .mdash-legend,
html.ds .rev-legend,
html.ds .rev-cols-legend,
html.ds .pnl-legend {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ds-chart-legend-text);
}
html.ds .multi-line-chart-legend {
  gap: 4px 6px;
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}
html.ds .multi-line-chart-legend-item {
  height: 28px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-chart-legend-text);
}
html.ds .multi-line-chart-legend-item:hover {
  background: var(--wash-2);
  border-color: transparent;
  color: var(--text);
}
html.ds .multi-line-chart-legend-item.is-disabled {
  opacity: 0.45;
}
html.ds .multi-line-chart-legend-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
html.ds .multi-line-chart-legend-dot,
html.ds .rev-legend-dot,
html.ds .rev-cols-legend-dot,
html.ds .pnl-swatch,
html.ds .kpi-tile-ext-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: none;
}

/* ---------- tracks ---------- */
html.ds .rev-donut-track {
  stroke: var(--ds-chart-track);
}

/* ---------- empty: the kit's empty state ---------- */
html.ds .multi-line-chart-empty {
  gap: 0;
  min-height: 240px;
  padding: 28px 16px;
  color: var(--text-2);
}
html.ds .multi-line-chart-empty-illustration {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--wash-3);
  color: var(--text-2);
}
html.ds .multi-line-chart-empty-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
html.ds .multi-line-chart-empty-sub {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
html.ds .pnl-chart-empty,
html.ds .pnl-empty,
html.ds .pnl-pane-empty {
  font-size: 14px;
  color: var(--text-2);
}

/* ---------- motion: charts appear without the line-draw flourish ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ds .multi-line-chart-line,
  html.ds .multi-line-chart-area {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- the period control (DsPeriod): presets segment + from / to ---------- */
html.ds .ds-period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
html.ds .ds-period__dates {
  display: flex;
  align-items: center;
  gap: 8px;
}
html.ds .ds-period__error {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--error);
}
@media (max-width: 720px) {
  html.ds .ds-period {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-column: 1 / -1;
    width: 100%;
  }
  html.ds .ds-period > .ds-tabs {
    justify-self: start;
  }
  html.ds .ds-period__dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.ds .ds-period__date,
  html.ds .ds-period__date .date-picker-trigger {
    width: 100%;
  }
}

/* ---------- a legend key outside a chart component: a dot in the role's colour + the label ----------
   <span class="ds-chart-key ds-chart-key--income">Income</span> */
html.ds .ds-chart-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html.ds .ds-chart-key::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-chart-key, var(--ds-chart-neutral));
}
html.ds .ds-chart-key--payin { --ds-chart-key: var(--ds-chart-payin); }
html.ds .ds-chart-key--payout { --ds-chart-key: var(--ds-chart-payout); }
html.ds .ds-chart-key--completed { --ds-chart-key: var(--ds-chart-completed); }
html.ds .ds-chart-key--expired { --ds-chart-key: var(--ds-chart-expired); }
html.ds .ds-chart-key--conversion { --ds-chart-key: var(--ds-chart-conversion); }
html.ds .ds-chart-key--income { --ds-chart-key: var(--ds-chart-income); }
html.ds .ds-chart-key--atlas { --ds-chart-key: var(--ds-series-atlas); }
html.ds .ds-chart-key--expense { --ds-chart-key: var(--ds-chart-expense); }
/* ================================================================
   Portal design system: the menu of every role (Layout/NavMenu.razor,
   Layout/NavModel.cs). Owned by the portal-wide foundation.

   Top bar: the pill (shell.css) holds plain items and groups. A group is
   a trigger (.nav-group__trigger, a .nav-item) that opens a popover menu
   on hover or keyboard focus (focus-within), the site's menu recipe.
   Drawer (phones, nav-l4): groups render as a quiet label over their
   items; every item shows its line icon there.
   Every selector starts with html.ds, like shell.css, so it outranks the
   legacy app.css nav rules and the light-theme overrides.
   ================================================================ */

/* a role with no menu: no empty pill */
html.ds .topbar__pill:not(:has(.nav-item)) {
  visibility: hidden;
}

/* ---------- group trigger in the pill ---------- */
html.ds .topbar__pill .nav-group {
  position: relative;
  display: inline-flex;
}
html.ds .topbar__pill .nav-group__trigger {
  cursor: pointer;
}
html.ds .topbar__pill .nav-group__trigger .nav-group__chev {
  display: block;
  margin-left: -2px;
  opacity: 0.7;
  color: currentColor;
  transition: transform 0.2s var(--ease-out);
}
html.ds .topbar__pill .nav-group:hover .nav-group__chev,
html.ds .topbar__pill .nav-group:focus-within .nav-group__chev {
  transform: rotate(180deg);
}
/* a group whose page is open: the accent pill, like an active item (shell.css) */
html.ds .topbar__pill .nav-group__trigger.active,
html.ds .topbar__pill .nav-group__trigger.active:hover,
html.ds[data-theme='light'] .topbar__pill .nav-group__trigger.active,
html.ds[data-theme='light'] .topbar__pill .nav-group__trigger.active:hover {
  color: var(--accent-text) !important;
  background: var(--accent) !important;
  font-weight: 600;
  box-shadow: none;
}
html.ds .topbar__pill .nav-group__trigger.active span,
html.ds .topbar__pill .nav-group__trigger.active .nav-group__chev {
  color: var(--accent-text) !important;
}
html.ds .topbar__pill .nav-group__trigger.active .nav-item__icon {
  display: block;
  color: var(--accent-text);
}
/* a count on the active pill: the pill colours swapped (ink chip, lime digits; white chip, indigo digits) */
html.ds .topbar__pill .nav-group__trigger.active .nav-count,
html.ds .topbar__pill .nav-item.active .nav-count {
  background: var(--accent-text);
  color: var(--accent) !important;
}

/* ---------- group menu: the site's popover ---------- */
html.ds .topbar__pill .nav-group__menu {
  top: calc(100% + 10px);
  left: -6px;
  min-width: 232px;
  gap: 2px;
  padding: 6px;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-popover);
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s var(--ease-out), visibility 0.16s;
}
html.ds .topbar__pill .nav-group__menu::before {
  top: -12px;
  height: 12px;
}
html.ds .topbar__pill .nav-group:hover .nav-group__menu,
html.ds .topbar__pill .nav-group:focus-within .nav-group__menu {
  transform: translateY(0);
}
html.ds .nav-group__item,
html.ds[data-theme='light'] .nav-group__item {
  min-height: 40px;
  padding: 8px 12px;
  gap: 12px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  text-decoration: none;
}
html.ds .nav-group__item .nav-item__icon {
  color: var(--text-2);
}
html.ds .nav-group__item:hover,
html.ds .nav-group__item:focus-visible,
html.ds[data-theme='light'] .nav-group__item:hover {
  background: var(--popover-row);
  color: var(--text);
  text-decoration: none;
  outline: none;
}
html.ds .nav-group__item:hover .nav-item__icon {
  color: var(--text);
}
html.ds .nav-group__item.active,
html.ds .nav-group__item.active:hover,
html.ds[data-theme='light'] .nav-group__item.active,
html.ds[data-theme='light'] .nav-group__item.active:hover {
  background: var(--accent-tint) !important;
  color: var(--text) !important;
  font-weight: 600;
}
html.ds .nav-group__item.active .nav-item__icon {
  color: var(--accent-soft-text);
}

/* ---------- counts and dots on items ---------- */
html.ds .nav-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--warning-tint);
  color: var(--warning);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
html.ds .nav-group__item .nav-count,
html.ds .nav-group__item .pc-nav-dot {
  margin-left: auto;
}
html.ds .nav-group__menu .pc-nav-dot {
  width: 7px;
  height: 7px;
  background: var(--warning);
  box-shadow: none;
}
html.ds .nav-group__menu .pc-nav-dot.is-danger {
  background: var(--error);
}
html.ds .nav-item__ext {
  margin-left: auto;
  color: var(--text-2);
}

/* ---------- mobile drawer: label over items ---------- */
html.ds .mobile-nav__body .nav-group {
  display: block;
  width: 100%;
  margin-top: 14px;
}
html.ds .mobile-nav__body .nav-group:first-child {
  margin-top: 0;
}
html.ds .mobile-nav__body .nav-group__trigger.nav-item,
html.ds .mobile-nav__body .nav-group__trigger.nav-item.active,
html.ds[data-theme='light'] .mobile-nav__body .nav-group__trigger.nav-item,
html.ds[data-theme='light'] .mobile-nav__body .nav-group__trigger.nav-item.active {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  box-shadow: none;
  min-height: 32px !important;
  padding: 0 14px !important;
  background: transparent !important;
  cursor: default;
  pointer-events: none;
}
html.ds .mobile-nav__body .nav-group__trigger span,
html.ds[data-theme='light'] .mobile-nav__body .nav-group__trigger span {
  flex: 1;
  text-align: left;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--text-2) !important;
}
html.ds .mobile-nav__body .nav-group__trigger .nav-item__icon,
html.ds .mobile-nav__body .nav-group__trigger .nav-count,
html.ds .mobile-nav__body .nav-group__trigger .pc-nav-dot,
html.ds .mobile-nav__body .nav-group__chev {
  display: none !important;
}
html.ds .mobile-nav__body .nav-group__menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  min-width: 0;
  padding: 0;
  gap: 2px;
  background: none;
  border: 0;
  box-shadow: none;
}
html.ds .mobile-nav__body .nav-group__item,
html.ds[data-theme='light'] .mobile-nav__body .nav-group__item {
  min-height: 48px;
  padding: 0 14px;
  gap: 14px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--text);
}
html.ds .mobile-nav__body .nav-group__item:hover {
  background: var(--wash-2);
}
html.ds .mobile-nav__body .nav-group__item.active,
html.ds .mobile-nav__body .nav-group__item.active:hover,
html.ds[data-theme='light'] .mobile-nav__body .nav-group__item.active,
html.ds[data-theme='light'] .mobile-nav__body .nav-group__item.active:hover {
  background: var(--accent-tint) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
html.ds .mobile-nav__body .nav-item .nav-count {
  margin-left: auto;
}
/* ================================================================
   Portal design system: the legacy primitives, restyled once.

   Every role is on .ds (DsRoles), but most pages still use the older
   shared classes from app.css / merchant.css / admin.css. This file
   gives those primitives the kit's look, so a page that has not been
   rebuilt on Components/Ds reads as part of the same product:
   buttons (btn*, bal-btn-*), fields (form-*, pg-search, pg-select),
   switches (toggle-switch, both markups), segmented controls
   (merchant-segmented, act-tabs), cards (card, admin-card,
   admin-chart-card), KPI tiles (kpi-tile-ext*), badges, modal shells
   (modal, glass-modal/gm-*, admin-modal, drawer), toasts (ErrorToast,
   SuccessToast), empty states, spinners and skeletons, page titles.

   Rules:
   - html.ds prefix (0,2,1): outranks the legacy rules and their
     [data-theme="light"] .x overrides (0,2,0) without !important; a
     few legacy rules carry !important or deeper selectors, noted inline.
   - Tokens only (tokens.css). No markup is assumed beyond the classes.
   - Owned by the portal-wide foundation. A page package never restyles
     these classes; it replaces them with kit components on its pages.
     The file shrinks as pages move over and goes once nothing uses them.
   ================================================================ */

/* ---------- page frame and titles ---------- */
html.ds .pg-title {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
}
/* the older page hero (trd-header): hidden for the trader (trader.css), the cascade trader's only
   title. Here it becomes the kit's page head: no kicker, no accent bar, no glyph tile. */
html.ds .trd-title {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
}
/* ---------- buttons: the site's pills ---------- */
html.ds .btn,
html.ds .bal-btn-primary,
html.ds .bal-btn-outline {
  height: var(--ds-control-h);
  padding: 0 18px;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  box-shadow: none;
  filter: none;
  transform: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out);
}
html.ds .btn:hover:not(:disabled),
html.ds .bal-btn-primary:hover:not(:disabled),
html.ds .bal-btn-outline:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
}
html.ds .btn:active:not(:disabled),
html.ds .bal-btn-primary:active:not(:disabled),
html.ds .bal-btn-outline:active:not(:disabled) {
  transform: scale(0.98);
}
/* primary: the accent (lime with ink in dark, indigo with white in light), like DsButton Primary */
html.ds .bal-btn-primary {
  background: var(--btn-primary-bg);
  border-color: transparent;
  color: var(--btn-primary-text);
}
html.ds .bal-btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}
html.ds .bal-btn-primary:disabled,
html.ds .bal-btn-primary[disabled],
html.ds .bal-btn-primary:disabled:hover {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  opacity: 0.4;
  filter: none;
}
/* secondary: hairline outline */
html.ds .btn-ghost,
html.ds .bal-btn-outline {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--text);
}
html.ds .btn-ghost:hover:not(:disabled),
html.ds .bal-btn-outline:hover:not(:disabled) {
  background: var(--wash-2);
  border-color: var(--hairline-hover);
  color: var(--text);
}
/* tone buttons: a tinted pill in the tone, solid on hover */
html.ds .btn-sm {
  height: var(--ds-control-h-sm);
  padding: 0 14px;
  font-size: 13px;
}
html.ds .btn-xs {
  height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
}
html.ds .btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--text-2);
  transform: none;
}
html.ds .btn-icon:hover:not(:disabled) {
  background: var(--wash-2);
  color: var(--text);
  transform: none;
}
html.ds .btn:disabled,
html.ds .bal-btn-outline:disabled {
  opacity: 0.45;
}
html.ds .btn:focus-visible,
html.ds .bal-btn-primary:focus-visible,
html.ds .bal-btn-outline:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- fields ---------- */
html.ds .form-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
html.ds .form-input,
html.ds .form-textarea {
  height: var(--ds-control-h);
  padding: 0 14px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  box-shadow: none;
}
html.ds .form-textarea {
  height: auto;
  padding: 10px 14px;
}
html.ds .form-input::placeholder,
html.ds .form-textarea::placeholder {
  color: var(--text-2);
  font-weight: 400;
}
html.ds .form-input:hover:not(:disabled),
html.ds .form-textarea:hover:not(:disabled) {
  border-color: var(--field-border-hover);
}
html.ds .form-input:focus,
html.ds .form-textarea:focus {
  border-color: var(--field-border-hover);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}
html.ds .form-input:disabled,
html.ds .form-input[readonly] {
  background: var(--wash-2);
  color: var(--text-2);
}
html.ds .form-input.error {
  border-color: var(--error);
}
html.ds .form-hint {
  font-size: 13px;
  color: var(--text-2);
}
html.ds .form-hint-error {
  font-size: 13px;
  font-weight: 500;
  color: var(--error);
}
/* the round search and the native select of the older toolbars */
html.ds .pg-search {
  height: var(--ds-control-h);
  min-height: var(--ds-control-h);
  padding: 0 14px;
  gap: 10px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 999px;
}
html.ds .pg-search:hover {
  border-color: var(--field-border-hover);
}
html.ds .pg-search:focus-within {
  border-color: var(--field-border-hover);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
html.ds .pg-search i,
html.ds .pg-search .ds-icon {
  color: var(--text-2);
}
html.ds .pg-search input {
  padding: 0;
  height: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}
html.ds .pg-search input::placeholder {
  color: var(--text-2);
}
/* ---------- switches: ToggleSwitch (track/thumb) and label.toggle-switch (slider) ---------- */
html.ds .toggle-switch {
  gap: 10px;
}
html.ds .toggle-switch-track {
  width: 36px;
  height: 22px;
  background: var(--mini-chip-strong);
  border: 0;
  box-shadow: none;
}
html.ds .toggle-switch-thumb {
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--mini-knob);
  box-shadow: var(--mini-knob-shadow);
}
html.ds .toggle-switch input:checked + .toggle-switch-track {
  background: var(--accent);
  border-color: transparent;
  box-shadow: none;
}
html.ds .toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb {
  transform: translateX(14px);
  background: var(--mini-knob);
}
html.ds .toggle-switch:hover .toggle-switch-track,
html.ds .toggle-switch:hover input:checked + .toggle-switch-track {
  box-shadow: none;
}
html.ds .toggle-switch:hover .toggle-switch-thumb {
  transform: none;
}
html.ds .toggle-switch:hover input:checked + .toggle-switch-track .toggle-switch-thumb,
html.ds .toggle-switch:active input:checked ~ .toggle-switch-track .toggle-switch-thumb {
  transform: translateX(14px);
}
html.ds .toggle-switch input:focus-visible + .toggle-switch-track {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
html.ds .toggle-switch-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
/* ---------- segmented controls: the kit's Segment tabs ---------- */
html.ds .merchant-segmented {
  gap: 2px;
  padding: 3px;
  background: var(--wash-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
html.ds .merchant-segmented-btn,
html.ds .act-tab {
  height: 30px;
  min-width: 0;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 30px;
  color: var(--text-2);
  background: transparent;
  box-shadow: none;
}
html.ds .merchant-segmented-btn:hover,
html.ds .act-tab:hover {
  color: var(--text);
  background: transparent;
}
/* !important: app.css paints .act-tab-active white with !important */
html.ds .merchant-segmented-btn.is-active,
html.ds .merchant-segmented-btn.is-active:hover {
  color: var(--text) !important;
  background: var(--segment-on) !important;
  box-shadow: 0 0 0 1px var(--hairline);
  font-weight: 500;
}
html.ds .merchant-segmented-btn:focus-visible,
html.ds .act-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- cards ---------- */
html.ds .card,
html.ds .admin-card,
html.ds .admin-chart-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
html.ds .card:hover {
  transform: none;
  box-shadow: var(--surface-shadow);
}
html.ds .admin-card:hover {
  border-color: var(--hairline);
}
html.ds .card-header {
  border-color: var(--hairline);
}
html.ds .card-title,
html.ds .admin-card-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
html.ds .admin-card-head {
  border-bottom-color: var(--hairline);
}
/* the icon chip beside a card title goes (no icons beside headings) */
html.ds .admin-card-icon {
  display: none;
}
html.ds .admin-card-eyebrow {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
/* ---------- KPI tiles (KpiTile / KpiTileExtended): the kit's tile ---------- */
html.ds .kpi-tile-ext {
  gap: 6px;
  min-height: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
  transition: border-color 0.2s ease;
}
html.ds .kpi-tile-ext:hover,
html.ds .kpi-tile-ext:active {
  transform: none;
  border-color: var(--hairline);
  box-shadow: var(--surface-shadow);
}
html.ds .kpi-tile-ext:focus-within {
  outline: none;
}
/* the label's icon chip is decoration: the kit's tile has a plain label */
html.ds .kpi-tile-ext-title {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
html.ds .kpi-tile-ext-note {
  font-size: 13px;
  color: var(--text-2);
}
html.ds .kpi-tile-ext-delta--up {
  color: var(--success);
  background: transparent;
}
html.ds .kpi-tile-ext-delta--down {
  color: var(--error);
  background: transparent;
}
html.ds .kpi-tile-ext-delta--flat {
  color: var(--text-2);
  background: transparent;
}
/* ---------- badges: the kit's status (a tinted badge: dot + text in the tone), never uppercase ---------- */
html.ds .badge {
  --tone: var(--text-2);
  --tone-tint: var(--idle-tint);
  gap: 6px;
  height: auto;
  min-height: 24px;
  padding: 3px 9px 3px 8px;
  border: 0;
  border-radius: 7px;
  background: var(--tone-tint);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tone);
  white-space: nowrap;
}
html.ds .badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tone);
  flex: none;
}
html.ds .badge-sm {
  min-height: 22px;
  font-size: 12px;
}
html.ds .badge-success,
html.ds .badge-merchant {
  --tone: var(--success);
  --tone-tint: var(--success-tint);
}
html.ds .badge-warning,
html.ds .badge-support {
  --tone: var(--warning);
  --tone-tint: var(--warning-tint);
}
html.ds .badge-danger,
html.ds .badge-admin {
  --tone: var(--error);
  --tone-tint: var(--error-tint);
}
html.ds .badge-info,
html.ds .badge-trader {
  --tone: var(--info);
  --tone-tint: var(--info-tint);
}
html.ds .badge-muted,
html.ds .badge-neutral {
  color: var(--text-2);
}
html.ds .badge-muted::before,
html.ds .badge-neutral::before {
  background: var(--text-3);
}
/* the India amount bump (+₹1) is a value, not a state: a quiet tag */
html.ds .pg-table .badge,
html.ds .pg-table .badge:hover {
  transform: none;
  box-shadow: none;
}
/* a count on a menu item or a tab stays a count */
html.ds .nav-item .badge,
html.ds .nav-group__item .badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--warning-tint);
  color: var(--warning) !important;
  font-size: 12px;
  font-weight: 600;
}
html.ds .nav-item .badge::before,
html.ds .nav-group__item .badge::before {
  display: none;
}

/* ---------- modal shells: the kit's sheet ---------- */
html.ds .modal-backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html.ds .modal,
html.ds .glass-modal,
html.ds .glass-modal-xl {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-card);
  box-shadow: var(--shadow-popover);
  color: var(--text);
}
html.ds .admin-modal {
  border-radius: var(--ds-r-card);
}
html.ds .admin-modal .admin-modal-head {
  border-color: var(--hairline);
}
html.ds .admin-modal .admin-modal-head {
  background: var(--surface);
}
html.ds .modal-title,
html.ds .gm-title,
html.ds .admin-modal .admin-modal-title,
html.ds .drawer-title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--text);
}
html.ds .admin-modal .admin-modal-avatar {
  background: var(--wash-3);
  border-color: var(--hairline);
  color: var(--text-2);
}
html.ds .admin-modal-close {
  border-radius: 999px;
  color: var(--text-2);
}
html.ds .admin-modal-close:hover {
  background: var(--wash-2);
  color: var(--text);
}
html.ds .gm-section-title,
html.ds .gm-row-label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
html.ds .drawer {
  background: var(--surface);
  border-left: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-float);
  color: var(--text);
}
/* ---------- empty, loading ---------- */
html.ds .empty-state {
  color: var(--text-2);
}
html.ds .empty-state i {
  font-size: 22px;
  color: var(--text-3);
  opacity: 1;
}
html.ds .empty-state-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
html.ds .empty-state-desc {
  font-size: 14px;
  color: var(--text-2);
}
html.ds .empty-state-hint {
  font-size: 14px;
  color: var(--text-2);
}
html.ds .spinner,
html.ds .spinner-lg {
  border-color: var(--hairline-strong);
  border-top-color: var(--text-2);
}
html.ds .admin-skeleton-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
html.ds .admin-skeleton-card::after {
  background-image: linear-gradient(90deg, transparent 0, var(--wash-2) 50%, transparent 100%);
}
html.ds .admin-skeleton-line,
html.ds .admin-skeleton-chart {
  background: var(--wash-3);
  border-radius: 8px;
}

/* ---------- copy ids (CopyableId) ---------- */
html.ds .copy-id__icon {
  color: var(--text-2);
}
html.ds .copy-id.is-copied .copy-id__icon {
  color: var(--success);
}
/* ================================================================
   Trader cabinet, page package A. Home and wallet: Profile, Dashboard, TopUp / Withdrawal / DepositTransfer / TrafficBanned.
   Owned by that package only. Rules: DS.md. Every selector under
   .ds (prefix trh-, the sheets render outside the page root), colours
   only from ds/tokens.css, kit components first; page-only rules here.
   ================================================================ */

/* ---------- page ---------- */
.ds .trh-page {
  min-width: 0;
}
.ds .trh-muted {
  color: var(--text-2);
}
.ds .trh-strong {
  font-weight: 500;
  color: var(--text);
}

/* ---------- profile: top row (balances | traffic + rate) ---------- */
.ds .trh-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
  margin-bottom: 32px;
}
.ds .trh-load-error {
  margin-bottom: 32px;
}
.ds .trh-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.ds .trh-skel-bal .ds-skel--block {
  height: 264px;
}
.ds .trh-skel-side .ds-skel--block {
  height: 124px;
}

/* balances */
.ds .trh-bal {
  display: flex;
  flex-direction: column;
}
.ds .trh-bal .ds-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0;
}
.ds .trh-bal__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 18px 24px;
}
.ds .trh-bal__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ds .trh-bal__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .trh-bal__geo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .trh-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--flag-ring);
}
.ds .trh-bal__cols {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--hairline);
}
.ds .trh-bal__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 20px 24px 24px;
}
.ds .trh-bal__col + .trh-bal__col {
  border-left: 1px solid var(--hairline);
}
.ds .trh-bal__label {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .trh-bal__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .trh-bal__of {
  font-variant-numeric: tabular-nums;
}
.ds .trh-bal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.ds .trh-bal__col--main .ds-money--xl {
  margin-top: 2px;
}

/* the insurance-deposit meter */
.ds .trh-meter {
  position: relative;
  width: 100%;
  height: 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--ds-chart-track);
  overflow: hidden;
}
.ds .trh-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--trh-fill, 0%);
  border-radius: inherit;
  background: var(--success);
  transition: width 0.4s var(--ease-out);
}
.ds .trh-meter.is-short .trh-meter__fill {
  background: var(--warning);
}

/* traffic */
.ds .trh-trf .ds-card__body {
  padding: 18px 20px;
}
.ds .trh-trf__toggle {
  width: 100%;
}
.ds .trh-trf__toggle .ds-toggle__label {
  font-size: 15px;
}
.ds .trh-trf__note,
.ds .trh-trf__short {
  margin-top: 14px;
}
.ds .trh-trf__short {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* rate */
.ds .trh-rate .ds-card__head {
  padding: 18px 20px 0;
}
.ds .trh-rate .ds-card__body {
  padding: 12px 20px 18px;
}
.ds .trh-rate__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .trh-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
/* Pay-in and pay-out rates side by side; they stack once the card is too narrow for both. */
.ds .trh-rate__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 24px;
  margin: 0;
}
.ds .trh-rate__dir {
  min-width: 0;
}
.ds .trh-rate__label {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.ds .trh-rate__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ds .trh-rate__unit {
  font-size: 14px;
  color: var(--text-2);
}
.ds .trh-rate__value {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color 0.4s ease;
}
.ds .trh-rate.is-pulse .trh-rate__value {
  color: var(--accent-soft-text);
}
.ds .trh-rate__none {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}
.ds .trh-spreads {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ds .trh-spreads__cap {
  caption-side: top;
  margin-bottom: 6px;
  text-align: left;
  font-size: 13px;
  color: var(--text-2);
}
.ds .trh-spreads th,
.ds .trh-spreads td {
  padding: 6px 0;
  text-align: right;
  font-weight: 400;
}
.ds .trh-spreads thead th {
  font-size: 12px;
  color: var(--text-2);
}
.ds .trh-spreads th:first-child {
  text-align: left;
}
.ds .trh-spreads tbody th {
  color: var(--text);
  font-weight: 500;
}
.ds .trh-spreads td {
  width: 72px;
  color: var(--text);
}
/* the trader's share of each order: earnings, green */
.ds .trh-spreads td.ds-earn {
  color: var(--success);
  font-weight: 600;
}
.ds .trh-rate__note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}

/* ---------- profile: balance history ---------- */
.ds .trh-history .ds-tabs {
  margin-bottom: 16px;
}
.ds .trh-history .ds-toolbar {
  margin-bottom: 16px;
}
.ds .trh-ledger .trh-num {
  text-align: right;
  white-space: nowrap;
}
.ds .trh-ledger .trh-desc {
  min-width: 200px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.4;
}
.ds .trh-dash {
  color: var(--text-2);
}
/* phone cards: the amount is the row's identity, the after-balances read as facts */
.ds table.rt--stacked.trh-ledger .trh-num,
.ds .trh-ledger.rt--stacked .trh-num {
  text-align: left;
}

/* ---------- sheets: shared form bits (top-up, withdrawal, deposit move) ---------- */
.ds .trh-sheet-lead {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}
.ds .trh-sheet-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .trh-sheet-gap {
  margin-top: 12px;
}
.ds .trh-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.ds .trh-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ds .trh-field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.ds .trh-field__hint {
  min-height: 1.45em;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .trh-field__hint.is-bad {
  color: var(--error);
}
.ds .trh-field__count {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .trh-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
.ds .trh-input.ds-mono {
  font-family: var(--font-mono);
  font-size: 14px;
}
.ds .trh-input::placeholder {
  color: var(--text-2);
}
.ds .trh-input:hover {
  border-color: var(--field-border-hover);
}
.ds .trh-input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .trh-input[aria-invalid='true'] {
  border-color: var(--error);
}
.ds .trh-input--amount {
  height: 56px;
  font-size: 24px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ds .trh-input--area {
  height: auto;
  min-height: 72px;
  padding: 10px 14px;
  line-height: 1.45;
  resize: vertical;
}
.ds .trh-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.ds .trh-link:hover:not(:disabled) {
  text-decoration-color: currentColor;
}
.ds .trh-link:disabled {
  color: var(--text-2);
  cursor: default;
}
.ds .trh-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- top-up sheet ---------- */
.ds .trh-tu-pay {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .trh-tu-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.ds .trh-tu-amount__cap {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .trh-tu-amount__val {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
}
.ds .trh-tu-amount__num {
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ds .trh-tu-amount__tail {
  padding: 0 3px;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent-soft-text);
}
.ds .trh-tu-amount__unit {
  font-size: 13px;
  color: var(--text-2);
}
.ds .trh-tu-copy.ds-copy--labelled {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}
.ds .trh-tu-qr {
  align-self: center;
  padding: 14px;
  border-radius: var(--ds-r-panel);
  background: var(--qr-plate);
  line-height: 0;
  box-shadow: 0 0 0 1px var(--hairline);
}
.ds .trh-tu-qr .atlas-qr {
  display: block;
  width: 164px;
  height: 164px;
}
.ds .trh-tu-addr {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds .trh-tu-addr__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-field);
  background: var(--wash-1);
}
.ds .trh-tu-addr__text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ---------- withdrawal sheet ---------- */

/* ---------- deposit move sheet (DepositTransferSheet on .ds) ---------- */
.ds .dts-ds__dir {
  display: flex;
  margin-bottom: 18px;
}
.ds .dts-ds__dir .ds-tab {
  flex: 1;
  justify-content: center;
}
.ds .dts-ds__preview {
  margin-top: 4px;
}
.ds .dts-ds__req {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.ds .dts-ds__reason {
  margin-top: 16px;
}

/* ---------- dashboard ---------- */
.ds .trh-period {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ds .trh-period .dash-date-row {
  display: flex;
  gap: 8px;
}
/* the period presets keep their markup until DsPeriod lands: drawn as the kit's segment */
.ds .trh-period .merchant-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--wash-2);
}
.ds .trh-period .merchant-segmented-btn {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ds .trh-period .merchant-segmented-btn:hover:not(:disabled) {
  color: var(--text);
}
.ds .trh-period .merchant-segmented-btn.is-active {
  color: var(--text);
  background: var(--segment-on);
  box-shadow: 0 0 0 1px var(--hairline);
}
.ds .trh-period .merchant-segmented-btn:disabled {
  cursor: default;
}
.ds .trh-period .merchant-segmented-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .trh-dash .dvt-dash {
  margin-bottom: 16px;
}
/* earnings (the headline) on the left, the six KPIs beside it */
.ds .trh-dash-top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr);
  gap: 12px;
  align-items: stretch;
}
.ds .trh-dash-top .ds-kpi-row {
  margin-bottom: 0;
}
.ds .trh-dash-top .ds-loading + .ds-loading .ds-kpi-row,
.ds .trh-dash-top .ds-kpi-row + .ds-kpi-row {
  margin-top: 12px;
}
.ds .trh-skel-hero .ds-skel--block {
  height: 100%;
  min-height: 150px;
}
.ds .trh-hero .ds-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 22px 24px;
}
.ds .trh-hero__label {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .trh-hero__split {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .trh-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .trh-hero__pct {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ds .trh-hero__pct.is-good {
  color: var(--success);
}
.ds .trh-hero__pct.is-bad {
  color: var(--error);
}
.ds .trh-hero__period {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .trh-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ds .trh-chart .ds-card__body {
  padding: 8px 16px 16px;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .ds .trh-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .trh-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .ds .trh-dash-top {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .ds .trh-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .ds .trh-bal__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ds .trh-bal__col--main {
    grid-column: 1 / -1;
  }
  .ds .trh-bal__col + .trh-bal__col {
    border-left: 0;
  }
  .ds .trh-bal__col--main + .trh-bal__col {
    border-top: 1px solid var(--hairline);
  }
  .ds .trh-bal__col--main + .trh-bal__col + .trh-bal__col {
    border-top: 1px solid var(--hairline);
    border-left: 1px solid var(--hairline);
  }
  .ds .trh-side {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .ds .trh-bal__who {
    padding: 16px 16px 16px 18px;
  }
  .ds .trh-bal__col {
    padding: 16px 18px 18px;
  }
  .ds .trh-bal__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .trh-bal__col--main + .trh-bal__col + .trh-bal__col {
    border-left: 0;
  }
  .ds .trh-bal__actions {
    width: 100%;
  }
  .ds .trh-bal__actions .ds-btn {
    flex: 1;
    justify-content: center;
  }
  .ds .trh-period {
    width: 100%;
  }
  .ds .trh-period > .ds-btn {
    order: 1;
  }
  .ds .trh-period .dash-date-row {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 100%;
    min-width: 0;
  }
  .ds .trh-period .dash-date-row > * {
    width: 100%;
    min-width: 0;
  }
  .ds .trh-tu-amount__num {
    font-size: 26px;
  }
}

/* ── anti-fraud R5: "how many orders can you take now" (TraderCapacityCard) ── */
.ds .trh-cap .ds-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ds .trh-cap__note { margin: 0; align-self: stretch; }
.ds .trh-cap .trh-bal__sub { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }

/* ── anti-fraud, unanswered payment checks: the warning window (TraderOpenChecksBanner) ── */
.ds .tr-oc-banner { margin-bottom: 16px; }
.ds .tr-oc-banner .ds-notice__text { display: flex; flex-direction: column; gap: 4px; }
.ds .tr-oc-banner__deadline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
/* ================================================================
   Trader cabinet, page package C. Methods and devices: Cards, CardDetail, Devices, TraderDeviceCard, PaytmExtensionCard, shared device parts.
   Owned by that package only. Rules: DS.md. Every selector under
   .ds[data-role='trader'], colours only from ds/tokens.css, kit
   components first; page-only rules here.
   The shared device parts (DeviceChecklist, DeviceFixSteps, DeviceModeMark,
   DeviceVerdictMark, DeviceActivityStrip; also drawn in the admin drawer) are
   restyled under .ds alone, so any role on the design system gets the same look.
   Prefixes: tc- (page parts), tcf- (form fields: the kit has no field yet).
   ================================================================ */

/* ---------- shared bits ---------- */
.ds[data-role='trader'] .tc-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}
/* No automation, no orders (the trader may not work by hand). */
.ds[data-role='trader'] .tc-sub--warn {
  color: var(--warning);
}
.ds[data-role='trader'] .tc-cell-main {
  display: block;
}
.ds[data-role='trader'] .tc-idcell {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.ds[data-role='trader'] .tc-none {
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-h3 {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text);
}
.ds[data-role='trader'] .tc-inline-link {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.ds[data-role='trader'] .tc-inline-link:hover {
  text-decoration-color: currentColor;
}
.ds[data-role='trader'] .tc-dot {
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-link-btn {
  justify-self: start;
  margin-left: -10px;
}

/* the geo, everywhere in this package: flag + name, no chip */
.ds[data-role='trader'] .tc-page .geo-tags,
.ds[data-role='trader'] .tc-create .geo-tags {
  display: inline-flex;
  gap: 8px;
}
.ds[data-role='trader'] .tc-page .geo-tag,
.ds[data-role='trader'] .tc-create .geo-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.ds[data-role='trader'] .tc-page .geo-tag-flag,
.ds[data-role='trader'] .tc-create .geo-tag-flag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--flag-ring);
}

/* the "⋯" menu (TcMoreMenu) */
.ds[data-role='trader'] .tc-menu {
  position: relative;
}
.ds[data-role='trader'] .tc-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.ds[data-role='trader'] .tc-menu__pop {
  z-index: 100;
  width: 220px;
}
.ds[data-role='trader'] .tc-menu .pop__item {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.ds[data-role='trader'] .tc-menu .pop__item--danger,
.ds[data-role='trader'] .tc-menu .pop__item--danger .ds-icon {
  color: var(--error);
}
.ds[data-role='trader'] .tc-menu .pop__item--danger:hover {
  color: var(--error);
}

/* ---------- form fields (page-local: the kit has no field component yet) ---------- */
.ds[data-role='trader'] .tcf-form {
  display: grid;
  gap: 20px;
}
.ds[data-role='trader'] .tcf-group {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ds[data-role='trader'] .tcf-sec {
  margin: 0 0 10px;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds[data-role='trader'] .tcf-grid {
  display: grid;
  gap: 14px 16px;
}
.ds[data-role='trader'] .tcf-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ds[data-role='trader'] .tcf-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.ds[data-role='trader'] .tcf-field--narrow {
  max-width: 240px;
}
.ds[data-role='trader'] .tcf-label {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text);
}
.ds[data-role='trader'] .tcf-opt {
  margin-left: 4px;
  font-weight: 400;
  color: var(--text-2);
}
.ds[data-role='trader'] .tcf-input {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ds[data-role='trader'] .tcf-input::placeholder {
  color: var(--text-2);
  opacity: 0.8;
}
.ds[data-role='trader'] .tcf-input:hover {
  border-color: var(--field-border-hover);
}
.ds[data-role='trader'] .tcf-input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds[data-role='trader'] .tcf-input--mono {
  font-family: var(--font-mono);
  font-size: 14px;
}
.ds[data-role='trader'] .tcf-input--caps {
  text-transform: uppercase;
}
.ds[data-role='trader'] .tcf-input--caps::placeholder {
  text-transform: none;
}
.ds[data-role='trader'] .tcf-input--unit {
  padding-right: 56px;
  -moz-appearance: textfield;
}
.ds[data-role='trader'] .tcf-input--unit::-webkit-outer-spin-button,
.ds[data-role='trader'] .tcf-input--unit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ds[data-role='trader'] .tcf-textarea {
  height: auto;
  min-height: 76px;
  padding: 11px 14px;
  resize: vertical;
}
.ds[data-role='trader'] .tcf-control {
  position: relative;
  display: flex;
  align-items: center;
}
.ds[data-role='trader'] .tcf-unit {
  position: absolute;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
  pointer-events: none;
}
.ds[data-role='trader'] .tcf-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds[data-role='trader'] .tcf-nudge {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--ds-r-field);
  background: var(--wash-1);
  font-size: 14px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tcf-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
/* a StyledDropdown inside a form reads as a field, full width */
.ds[data-role='trader'] .tcf-field .pro-geo-dropdown {
  width: 100%;
}
.ds[data-role='trader'] .tcf-field .pro-geo-btn {
  width: 100%;
  height: 44px;
  justify-content: flex-start;
  border-radius: var(--ds-r-field);
  font-size: 15px;
  font-weight: 400;
}
.ds[data-role='trader'] .tcf-field .pro-geo-chevron {
  margin-left: auto;
}
.ds[data-role='trader'] .tcf-field .pro-geo-menu {
  width: 100%;
}

/* ---------- Cards: create sheet ---------- */
.ds[data-role='trader'] .tc-create .ds-sheet__meta {
  color: var(--text-2);
  font-size: 14px;
}
.ds[data-role='trader'] .tc-create .ds-notice {
  margin-bottom: 18px;
}
.ds[data-role='trader'] .tc-rails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.ds[data-role='trader'] .tc-rail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-panel);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ds[data-role='trader'] .tc-rail:hover {
  border-color: var(--hairline-hover);
  background: var(--surface-hover);
}
.ds[data-role='trader'] .tc-rail:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds[data-role='trader'] .tc-rail.is-on {
  border-color: var(--text);
  background: var(--segment-on);
}
.ds[data-role='trader'] .tc-rail__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--wash-2);
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-rail.is-on .tc-rail__icon {
  color: var(--text);
}
.ds[data-role='trader'] .tc-rail__text {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.ds[data-role='trader'] .tc-rail__name {
  font-size: 15px;
  font-weight: 500;
}
.ds[data-role='trader'] .tc-rail__desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-rail__radio {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
}
.ds[data-role='trader'] .tc-rail.is-on .tc-rail__radio {
  border: 5px solid var(--text);
}

/* ---------- CardDetail ---------- */
.ds[data-role='trader'] .tc-head .ds-page-head__title-line {
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
}
.ds[data-role='trader'] .tc-head .ds-h1 {
  overflow-wrap: anywhere;
}
.ds[data-role='trader'] .tc-head__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 14px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-head__rail {
  color: var(--text);
  font-weight: 500;
}
.ds[data-role='trader'] .tc-head__meta .ds-id {
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-status-toggle {
  margin-right: 4px;
}
.ds[data-role='trader'] .tc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.ds[data-role='trader'] .tc-main,
.ds[data-role='trader'] .tc-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.ds[data-role='trader'] .tc-side {
  position: sticky;
  top: 88px;
}
.ds[data-role='trader'] .tc-range {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-range .ds-money {
  color: var(--text);
}

/* the bound device inside "Automatic confirmation" */
.ds[data-role='trader'] .tc-bound {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
}
.ds[data-role='trader'] .tc-verdict {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ds[data-role='trader'] .tc-verdict__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ds[data-role='trader'] .tc-verdict__word {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds[data-role='trader'] .tc-verdict__line {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-auto__status {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

/* history: a quiet list, a dot per entry, no rules */
.ds[data-role='trader'] .tc-history {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds[data-role='trader'] .tc-history__item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 8px;
}
.ds[data-role='trader'] .tc-history__dot {
  grid-row: span 2;
  width: 7px;
  height: 7px;
  margin: 7px 0 0 3px;
  border-radius: 50%;
  background: var(--text-3);
}
.ds[data-role='trader'] .tc-history__item:first-child .tc-history__dot {
  background: var(--text-2);
}
.ds[data-role='trader'] .tc-history__what {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.ds[data-role='trader'] .tc-history__meta {
  font-size: 13px;
  color: var(--text-2);
}

/* QR column */
.ds[data-role='trader'] .tc-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.ds[data-role='trader'] .tc-qr .ds-card__body {
  display: grid;
  gap: 12px;
}
.ds[data-role='trader'] .tc-qr .tc-note {
  margin: 0;
}
.ds[data-role='trader'] .tc-qr__tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 12px;
  border-radius: var(--ds-r-panel);
  background: var(--qr-plate);
}
.ds[data-role='trader'] .tc-qr__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.ds[data-role='trader'] .tc-qr__tile--empty,
.ds[data-role='trader'] .tc-qr__tile--busy {
  align-content: center;
  gap: 10px;
  background: var(--wash-1);
  color: var(--text-2);
  font-size: 13px;
  text-align: center;
}
.ds[data-role='trader'] .tc-qr__payload {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.ds[data-role='trader'] .tc-qr__payload code {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  overflow-wrap: anywhere;
  max-height: 4.5em;
  overflow: hidden;
}
.ds[data-role='trader'] .tc-tips__title {
  margin: 0 0 8px;
  font-weight: 500;
  color: var(--text);
}
.ds[data-role='trader'] .tc-tips {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Paytm extension card ---------- */
.ds[data-role='trader'] .tc-ext__intro {
  display: grid;
  justify-items: start;
  gap: 14px;
}
.ds[data-role='trader'] .tc-ext__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-ext__pending,
.ds[data-role='trader'] .tc-ext__connected {
  display: grid;
  gap: 20px;
}
.ds[data-role='trader'] .tc-ext__code {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 16px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
}
.ds[data-role='trader'] .tc-ext__boxes {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds[data-role='trader'] .tc-ext__box {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  font-size: 24px;
  letter-spacing: 0.14em;
  color: var(--text);
}
.ds[data-role='trader'] .tc-ext__dash {
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-ext__state {
  display: grid;
  gap: 4px;
}
.ds[data-role='trader'] .tc-ext__state .ds-status__text {
  font-size: 15px;
  font-weight: 500;
}
.ds[data-role='trader'] .tc-ext__device {
  font-size: 14px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-ext__counts .ds-dl__value {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.ds[data-role='trader'] .tc-ext__foot {
  display: flex;
  justify-content: flex-start;
  margin-left: -10px;
}

/* ---------- pairing (Devices sheet and the Paytm card) ---------- */
.ds[data-role='trader'] .tc-pair {
  display: grid;
  gap: 24px;
}
.ds[data-role='trader'] .tc-pair__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.ds[data-role='trader'] .tc-pair__top--code {
  grid-template-columns: minmax(0, 1fr);
}
.ds[data-role='trader'] .tc-pair__qr {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
}
.ds[data-role='trader'] .tc-pair__qr figcaption {
  max-width: 230px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
  text-align: center;
}
.ds[data-role='trader'] .tc-pair__code {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 0;
}
.ds[data-role='trader'] .tc-pair__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-pair__value {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.12em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ds[data-role='trader'] .tc-pair__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.ds[data-role='trader'] .tc-pair__expiry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-pair__expired {
  font-size: 13px;
  font-weight: 500;
  color: var(--error);
}
.ds[data-role='trader'] .tc-pair__api {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--text-2);
}

/* numbered steps (pairing, Paytm); DeviceFixSteps shares the look below */
.ds[data-role='trader'] .tc-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds[data-role='trader'] .tc-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.ds[data-role='trader'] .tc-step__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wash-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ds[data-role='trader'] .tc-step__body {
  display: grid;
  justify-items: start;
  gap: 3px;
  padding-top: 3px;
  min-width: 0;
}
.ds[data-role='trader'] .tc-step__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds[data-role='trader'] .tc-step__do {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-step__btn {
  margin-top: 8px;
}
.ds[data-role='trader'] .tc-modes {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.ds[data-role='trader'] .tc-modes li {
  display: grid;
  gap: 2px;
}
.ds[data-role='trader'] .tc-modes__hint {
  padding-left: 28px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

/* ---------- Devices page ---------- */
.ds[data-role='trader'] .tc-sum {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
.ds[data-role='trader'] .tc-sum.is-loud {
  border-color: color-mix(in srgb, var(--dvx-tone) 40%, transparent);
  background: color-mix(in srgb, var(--dvx-tone) 7%, var(--surface));
}
.ds[data-role='trader'] .tc-sum__text {
  flex: 1;
  min-width: 0;
}
.ds[data-role='trader'] .tc-sum__main {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds[data-role='trader'] .tc-sum__detail {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-sum__cta {
  flex: none;
}
.ds[data-role='trader'] .tc-dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  align-items: start;
}
.ds[data-role='trader'] .tc-under {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 16px 0 40px;
}
.ds[data-role='trader'] .tc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds[data-role='trader'] .tc-anchor {
  display: block;
  position: relative;
  top: -96px;
  visibility: hidden;
}
.ds[data-role='trader'] .tc-journal .ds-tabs--segment {
  max-width: 100%;
}
.ds[data-role='trader'] .tc-ev-attn > td:first-child {
  box-shadow: inset 2px 0 0 var(--warning);
}
.ds[data-role='trader'] .tc-ev-todo {
  display: block;
  max-width: 34ch;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}

/* one device (TraderDeviceCard) */
.ds[data-role='trader'] .tc-dev {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-card);
  box-shadow: var(--surface-shadow);
  scroll-margin-top: 96px;
  animation: ds-rise 0.32s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.ds[data-role='trader'] .tc-dev.is-target {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.ds[data-role='trader'] .tc-dev--revoked {
  background: transparent;
  box-shadow: none;
}
.ds[data-role='trader'] .tc-dev--revoked .tc-dev__name {
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-dev__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ds[data-role='trader'] .tc-dev__head .tc-menu {
  margin: -6px -8px 0 0;
}
.ds[data-role='trader'] .tc-dev__id {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.ds[data-role='trader'] .tc-dev__name {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ds[data-role='trader'] .tc-dev__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.ds[data-role='trader'] .tc-dev__model {
  font-size: 13px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-dev .tc-verdict__word {
  color: var(--dvx-tone);
}
.ds[data-role='trader'] .tc-dev__pending {
  display: grid;
  justify-items: start;
  gap: 12px;
}
.ds[data-role='trader'] .tc-dev__pending p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-dev__todo {
  padding: 16px;
  border-radius: var(--ds-r-panel);
  background: color-mix(in srgb, var(--dvx-tone) 8%, transparent);
}
.ds[data-role='trader'] .tc-dev__strip-wait {
  height: 30px;
}
.ds[data-role='trader'] .tc-dev__bind {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.ds[data-role='trader'] .tc-dev__bind p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-methods {
  display: grid;
  gap: 4px;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.ds[data-role='trader'] .tc-method {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--ds-r-row);
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.ds[data-role='trader'] .tc-method:hover {
  background: var(--surface-hover);
}
.ds[data-role='trader'] .tc-method:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}
.ds[data-role='trader'] .tc-method__id {
  font-size: 13px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-method__what {
  display: grid;
  min-width: 0;
}
.ds[data-role='trader'] .tc-method__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}
.ds[data-role='trader'] .tc-method__bank {
  font-size: 13px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-method__misfit {
  display: inline-flex;
  color: var(--warning);
}
.ds[data-role='trader'] .tc-method__auto {
  font-size: 13px;
}
.ds[data-role='trader'] .tc-method__go {
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-dev__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ds[data-role='trader'] .tc-dev__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 13px;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-disclose {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--ds-control-h-sm);
  margin-right: -10px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.ds[data-role='trader'] .tc-disclose:hover {
  background: var(--wash-2);
}
.ds[data-role='trader'] .tc-disclose:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds[data-role='trader'] .tc-disclose__state {
  font-weight: 400;
  color: var(--text-2);
}
.ds[data-role='trader'] .tc-disclose .ds-icon {
  color: var(--text-2);
  transition: transform 0.2s var(--ease-out);
}
.ds[data-role='trader'] .tc-disclose.is-open .ds-icon {
  transform: rotate(180deg);
}
.ds[data-role='trader'] .tc-setup {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -18px;
  transition: grid-template-rows 0.28s var(--ease-out), margin-top 0.28s var(--ease-out);
}
.ds[data-role='trader'] .tc-setup.is-open {
  grid-template-rows: 1fr;
  margin-top: 0;
}
.ds[data-role='trader'] .tc-setup__inner {
  min-height: 0;
  overflow: hidden;
}

/* ---------- shared device parts on the design system (any .ds role) ---------- */
/* checklist: quiet rows, no divider lines */
.ds .dvx-checks {
  gap: 20px;
}
.ds .dvx-checks-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: none;
  letter-spacing: 0;
}
.ds .dvx-check {
  padding: 6px 0;
  border-top: 0;
}
.ds .dvx-check-label {
  font-size: 14px;
  color: var(--text);
}
.ds .dvx-check-value {
  font-size: 13px;
  color: var(--text-2);
}
.ds .dvx-check--ok .dvx-check-icon {
  color: var(--success);
}
.ds .dvx-check--warn .dvx-check-icon,
.ds .dvx-check--warn .dvx-check-value {
  color: var(--warning);
}
.ds .dvx-check--fail .dvx-check-icon,
.ds .dvx-check--fail .dvx-check-value {
  color: var(--error);
}
.ds .dvx-check--unknown .dvx-check-icon {
  color: var(--text-2);
}
.ds .dvx-check-note {
  font-size: 13px;
  color: var(--text-2);
}

/* fix steps: the numbered look of tc-steps, a toned ring on the number */
.ds .dvx-steps {
  gap: 14px;
}
.ds .dvx-step-num {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--error);
}
.ds .dvx-step--warn .dvx-step-num {
  box-shadow: inset 0 0 0 1.5px var(--warning);
}
.ds .dvx-step-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .dvx-step-fix {
  font-size: 14px;
  color: var(--text-2);
}

/* verdict mark and mode tile */
.ds .dvx-tone-ok { --dvx-tone: var(--success); }
.ds .dvx-tone-warn { --dvx-tone: var(--warning); }
.ds .dvx-tone-bad { --dvx-tone: var(--error); }
.ds .dvx-tone-idle { --dvx-tone: var(--info); }
.ds .dvx-tone-off { --dvx-tone: var(--text-2); }
.ds .dvx-mode-label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .dvx-mode-tile {
  font-family: var(--font-sans);
}
.ds .dvx-mode-notifications {
  background: var(--wash-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.ds .dvx-mode-unset,
.ds .dvx-mode-unknown {
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  border: 0;
}

/* day strip */
.ds .dvx-strip-share {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .dvx-strip-legend,
.ds .dvx-strip-axis {
  font-size: 12px;
  color: var(--text-2);
}
.ds .dvx-bar-base {
  fill: var(--wash-2);
}
.ds .dvx-key-work,
.ds .dvx-bar-work { background: var(--success); fill: var(--success); }
.ds .dvx-key-away,
.ds .dvx-bar-away { background: var(--warning); fill: var(--warning); }
.ds .dvx-key-off,
.ds .dvx-bar-off { background: var(--error); fill: var(--error); }
.ds .dvx-key-confirmed,
.ds .dvx-tick-confirmed line { background: var(--success); stroke: var(--success); }
.ds .dvx-key-attention,
.ds .dvx-tick-attention line { background: var(--warning); stroke: var(--warning); }
.ds .dvx-hatch-line {
  stroke: var(--hairline-strong);
}
/* the day strip's legend repeats on every card: the page shows one legend under the grid */
.ds[data-role='trader'] .tc-dev .dvx-strip-legend {
  display: none;
}

/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .ds[data-role='trader'] .tc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds[data-role='trader'] .tc-side {
    position: static;
    order: -1;
  }
  .ds[data-role='trader'] .tc-qr .ds-card__body {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: start;
  }
  .ds[data-role='trader'] .tc-qr .tc-qr__tile {
    grid-row: span 4;
  }
}
@media (max-width: 640px) {
  .ds[data-role='trader'] .tcf-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds[data-role='trader'] .tc-pair__top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .ds[data-role='trader'] .tc-pair__code {
    justify-items: center;
    text-align: center;
  }
  .ds[data-role='trader'] .tc-pair__value {
    font-size: 26px;
  }
  .ds[data-role='trader'] .tc-dev {
    padding: 18px 16px;
  }
  .ds[data-role='trader'] .tc-sum {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .ds[data-role='trader'] .tc-qr .ds-card__body {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .ds[data-role='trader'] .tc-method {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
  }
  .ds[data-role='trader'] .tc-method__id {
    flex-basis: 100%;
  }
  .ds[data-role='trader'] .tc-method__what {
    flex: 1;
  }
  .ds[data-role='trader'] .tc-method__auto .ds-status__text {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds[data-role='trader'] .tc-dev {
    animation: none;
  }
  .ds[data-role='trader'] .tc-setup {
    transition: none;
  }
}

.ds[data-role='trader'] .tc-confirm-note {
  margin-top: 14px;
}

/* ---------- anti-fraud: a payment method the system or support paused (CardDetail) ---------- */
.ds[data-role='trader'] .af-trader-pause { margin: 0 0 16px; }
.ds[data-role='trader'] .af-trader-pause__line { display: block; margin-top: 4px; }
.ds[data-role='trader'] .af-trader-pause__fix { display: block; margin-top: 6px; font-weight: 500; }
.ds[data-role='trader'] .af-trader-pause__own { margin-top: 12px; }
.ds[data-role='trader'] .af-trader-pause__open { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-weight: 500; }
.ds[data-role='trader'] .af-trader-pause__open svg { flex: none; margin-top: 2px; }

/* Anti-fraud wave 4: the method is locked while pay-ins wait for payment on it (CardEditLockNotice). */
.ds[data-role='trader'] .tc-lock { margin-bottom: 16px; }
.ds[data-role='trader'] .tc-lock__line { display: block; margin-top: 4px; }
/* Anti-fraud wave 4: controls locked while pay-ins are open (the archive item, the reader, the QR). */
.ds[data-role='trader'] .tc-pop-hint {
  display: block;
  padding: 0 12px 8px 40px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
}
.ds[data-role='trader'] .pop__item:disabled { opacity: 0.5; cursor: not-allowed; }
.ds[data-role='trader'] .pop__item:disabled:hover { background: transparent; }
.ds[data-role='trader'] .tc-locked-hint { color: var(--text-2); }
.ds[data-role='trader'] .tc-ext__foot { align-items: center; gap: 8px; flex-wrap: wrap; }
.ds[data-role='trader'] .tc-ext__foot .tc-locked-hint { font-size: 12px; }
.ds[data-role='trader'] .tc-auto__locked { margin-top: 12px; }
.ds[data-role='trader'] .tc-qr-vpa { margin-bottom: 4px; }
.ds[data-role='trader'] .tc-qr-vpa .ds-dl__value { overflow-wrap: anywhere; }
/* ================================================================
   Page package D (care): Disputes (payment checks + merchant-API disputes), the payment-check page,
   Support tickets, Settings (every role), Help. Rules: DS.md. Colours only from ds/tokens.css.
   Two scopes:
     .ds …                    the shared care parts (CareFiles, CareThread, the ticket sheets, SettingsPage)
                              which also render for staff, partners and affiliates (SettingsPage carries
                              .ds on its root, so these apply to a role that is not on the design system yet)
     .ds[data-role='trader']  trader-only pages (help, disputes, the check pages)
   ================================================================ */

/* ---------- shared bits ---------- */
.ds .tcare-muted { color: var(--text-2); }
.ds .tcare-chevron { color: var(--text-2); }
.ds .tcare-num { font-variant-numeric: tabular-nums; color: var(--text-2); }
.ds .tcare-subject { color: var(--text); font-weight: 500; }
.ds .tcare-prose,
.ds .care-prose {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
.ds .tcare-tabs { margin-bottom: 20px; }
.ds .tcare-kpis { margin-bottom: 20px; }

/* ---------- CareFiles: the one attachment pattern ---------- */
.ds .care-files { display: flex; flex-direction: column; gap: 10px; }
.ds .care-files__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ds .care-files__pick { cursor: pointer; position: relative; }
.ds .care-files__pick.is-disabled { opacity: .5; pointer-events: none; }
.ds .care-files__pick:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds .care-files__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.ds .care-files__hint { font-size: 12px; color: var(--text-2); }
.ds .care-files__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ds .care-files__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 4px 4px 12px;
  border-radius: var(--ds-r-row);
  background: var(--wash-1);
}
.ds .care-files__icon { color: var(--text-2); flex: none; }
.ds .care-files__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text);
}
.ds .care-files__size { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- CareThread: a conversation ---------- */
.ds .care-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds .care-thread__empty { margin: 0; font-size: 13px; color: var(--text-2); }
.ds .care-msg {
  padding: 12px 14px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
  border: 1px solid var(--hairline);
}
.ds .care-msg--mine {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--hairline));
}
.ds .care-msg--system {
  background: transparent;
  border-style: dashed none none;
  border-radius: 0;
  padding: 8px 2px 0;
}
.ds .care-msg__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; }
.ds .care-msg__who { font-size: 13px; font-weight: 600; color: var(--text); }
.ds .care-msg__role { font-size: 12px; color: var(--text-2); }
.ds .care-msg__time { margin-left: auto; font-size: 12px; color: var(--text-2); }
.ds .care-msg__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.ds .care-msg--system .care-msg__body,
.ds .care-msg--system .care-msg__who { font-size: 12px; color: var(--text-2); font-weight: 500; }
.ds .care-msg__files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ds .care-msg__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}
.ds .care-msg__file:hover .care-msg__file-name { text-decoration: underline; }
.ds .care-msg__file .ds-icon { color: var(--text-2); flex: none; }
.ds .care-msg__file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds .care-msg__file-size { color: var(--text-2); font-size: 12px; white-space: nowrap; }

/* ---------- sheets: dispute, ticket, new ticket ---------- */
.ds .tcare-sheet,
.ds .care-ticket__body { display: flex; flex-direction: column; gap: 20px; }
.ds .tcare-sheet .ds-section,
.ds .care-ticket__body .ds-section { margin: 0; }
.ds .tcare-reply,
.ds .care-ticket__reply { display: flex; flex-direction: column; gap: 12px; }
.ds .tcare-notice-clock { margin-left: 6px; vertical-align: -2px; }
.ds .care-ticket__staff { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.ds .care-ticket__staff .ds-field { min-width: 220px; }
.ds .care-prose { display: block; }
.ds .care-shot { display: block; width: fit-content; margin-top: 10px; border-radius: var(--ds-r-row); overflow: hidden; border: 1px solid var(--hairline); }
.ds .care-shot img { display: block; max-width: 260px; max-height: 180px; object-fit: cover; }
.ds .care-form { display: flex; flex-direction: column; gap: 18px; }
.ds .care-segment { align-self: flex-start; }

/* ---------- SettingsPage (every role) ---------- */
.ds.care-settings {
  color: var(--text);
  font-family: var(--font-sans);
}
.ds .care-settings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.ds .care-settings__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ds .care-settings__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ds .care-settings__row--quiet { margin-top: 4px; }
.ds .care-settings__state { display: flex; flex-direction: column; gap: 4px; }
.ds .care-settings__avatar { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.ds .care-settings__sub { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.ds .care-settings__step { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.ds .care-settings__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ds .care-settings__code { max-width: 180px; letter-spacing: .12em; text-transform: uppercase; }
.ds .care-settings__waiting { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--text-2); }
.ds .care-settings__form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.ds .care-settings__form .ds-field { flex: 1 1 140px; max-width: 220px; }
.ds .care-settings__sub-block { margin-top: 26px; }
.ds .care-settings__hint { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ds .care-settings__error { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--error); }
.ds .care-settings__langs { max-width: 100%; overflow-x: auto; }
.ds .care-settings .ds-card__body > .ds-toggle { width: 100%; }

/* Telegram steps: a quiet numbered column, the current step carries its form */
.ds .care-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds .care-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.ds .care-step:last-child { padding-bottom: 0; }
.ds .care-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 30px;
  bottom: 4px;
  width: 1px;
  background: var(--hairline);
}
.ds .care-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .care-step.is-current .care-step__n { border-color: var(--text); color: var(--text); }
.ds .care-step.is-done .care-step__n { border-color: transparent; background: var(--success-tint); color: var(--success); }
.ds .care-step__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 4px; }
.ds .care-step__title { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-2); }
.ds .care-step.is-current .care-step__title { color: var(--text); }
.ds .care-step__text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.ds .care-step__text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .ds .care-settings__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ds .care-settings__col { gap: 16px; }
}

/* ---------- Help (trader) ---------- */
.ds .tcare-help {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ds .tcare-help__nav {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds .tcare-help__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.ds .tcare-help__tab:hover { background: var(--surface-hover); color: var(--text); }
.ds .tcare-help__tab.is-active { background: var(--segment-on); color: var(--text); font-weight: 500; }
.ds .tcare-help__tab.is-active .ds-icon { color: var(--accent); }
.ds .tcare-help__article { max-width: 68ch; }
.ds .tcare-help__title { margin: 0 0 8px; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.ds .tcare-help__lead { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.ds .tcare-help__h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.ds .tcare-help__list { margin: 0 0 20px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.ds .tcare-help__list li { font-size: 14px; line-height: 1.6; color: var(--text); padding-left: 4px; }
.ds .tcare-help__list--steps li::marker { color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.ds .tcare-help__list:not(.tcare-help__list--steps) li::marker { color: var(--text-2); }
.ds .tcare-help__note { margin-bottom: 20px; }
.ds .tcare-help__go { margin: 0; }
.ds .tcare-help__next {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

@media (max-width: 900px) {
  .ds .tcare-help { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ds .tcare-help__nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px 4px;
  }
  .ds .tcare-help__nav::-webkit-scrollbar { display: none; }
  .ds .tcare-help__tab { flex: none; white-space: nowrap; }
  .ds .tcare-help__title { font-size: 19px; }
}

/* ---------- payment checks under the kit (trader) ---------- */
/* DeadlineText: the checks' clock reads like ds-countdown (mono digits off: it is words), tones from tokens */
.ds .pc-deadline { font-variant-numeric: tabular-nums; }
.ds .pc-deadline.is-warning { color: var(--warning); }
.ds .pc-deadline.is-danger { color: var(--error); }
.ds .pc-back-ds { margin: 0; }
.ds .pc-meta-id { display: inline-flex; align-items: center; gap: 6px; }
.ds .pc-more { display: flex; justify-content: center; margin-top: 8px; }

/* The feature's tone tokens take the kit's colours (both themes switch in ds/tokens.css). */
.ds {
  --pc-warning-text: var(--warning);
  --pc-danger-text: var(--error);
  --pc-success-text: var(--success);
  --pc-info-text: var(--info);
  --pc-tone-success-bg: var(--success-tint);
  --pc-tone-danger-bg: color-mix(in srgb, var(--error) 9%, var(--surface));
  --pc-tone-warning-bg: color-mix(in srgb, var(--warning) 9%, var(--surface));
  --pc-tone-info-bg: color-mix(in srgb, var(--info) 9%, var(--surface));
}

/* List rows. The owner's lit rows stay (rim + slow sheen on open checks), in the kit's tones: the trader's
   move is warn (DS.md: warn = waiting for the viewer; the lime accent is kept for selection and live dots),
   overdue is error, a row with someone else is info. The surface is the kit's card; type is the kit's. */
.ds[data-role='trader'] .pc-list .pc-row {
  border-radius: var(--ds-r-panel);
  border-color: var(--hairline);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}
.ds[data-role='trader'] .pc-list .pc-row:hover { border-color: var(--hairline-hover); }
.ds[data-role='trader'] .pc-list .pc-row.is-me {
  --pc-lit: var(--warning);
  --pc-lit-ring: 26%;
  --pc-lit-glow: 30%;
  --pc-lit-blur: 10px;
  --pc-lit-sheen: 7%;
  --pc-settle-from: color-mix(in srgb, var(--warning) 34%, transparent);
  background: color-mix(in srgb, var(--warning) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 30%, var(--hairline));
}
.ds[data-role='trader'] .pc-list .pc-row.is-me:hover { border-color: color-mix(in srgb, var(--warning) 60%, var(--hairline)); }
.ds[data-role='trader'] .pc-list .pc-row.is-danger {
  --pc-lit: var(--error);
  --pc-lit-ring: 30%;
  --pc-lit-glow: 34%;
  --pc-lit-blur: 10px;
  --pc-lit-sheen: 7%;
  background: color-mix(in srgb, var(--error) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--error) 36%, var(--hairline));
}
.ds[data-role='trader'] .pc-list .pc-row.is-danger:hover { border-color: color-mix(in srgb, var(--error) 64%, var(--hairline)); }
.ds[data-role='trader'] .pc-list .pc-row.is-waiting {
  --pc-lit: var(--info);
  --pc-lit-ring: 18%;
  --pc-lit-glow: 18%;
  --pc-lit-blur: 6px;
  --pc-lit-sheen: 5%;
  border-color: color-mix(in srgb, var(--info) 22%, var(--hairline));
}
.ds[data-role='trader'] .pc-list .pc-row-amount { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.ds[data-role='trader'] .pc-list .pc-row-amount .ds-money { font-size: inherit; }
.ds[data-role='trader'] .pc-list .pc-row-state { font-size: 14px; font-weight: 500; }
.ds[data-role='trader'] .pc-list .pc-row-end,
.ds[data-role='trader'] .pc-list .pc-row-end .pc-deadline { font-size: 14px; font-weight: 500; }
.ds[data-role='trader'] .pc-list .pc-row-end.is-muted { font-size: 12px; font-weight: 400; color: var(--text-2); }
.ds[data-role='trader'] .pc-list :is(.pc-row-meta, .pc-row-order, .pc-row-req, .pc-row-opened) { font-weight: 400; color: var(--text-2); }
.ds[data-role='trader'] .pc-list .pc-row-meta .pc-mono { font-family: var(--font-mono); font-weight: 400; }
.ds[data-role='trader'] .pc-list .pc-section-title { font-size: 15px; font-weight: 500; color: var(--text); margin-top: 12px; }
.ds[data-role='trader'] .pc-list .pc-section-title small { font-size: 12px; font-weight: 400; color: var(--text-2); }

/* The check page in the kit's type: headings and card titles at 500, the trader's move in warn. */
.ds[data-role='trader'] .pc-page :is(.pc-section, .pc-card-title, .pc-situation-title, .pc-composer-title, .pc-sheet-title, .pc-confirm-title) {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ds[data-role='trader'] .pc-page :is(.pc-og-title, .pc-legend, .pc-label, .pc-field-label, .pc-situation-look small) {
  font-weight: 500;
  color: var(--text-2);
}
.ds[data-role='trader'] .pc-page .pc-opt-title { font-weight: 500; }
.ds[data-role='trader'] .pc-page .pc-h1 { font-weight: 400; }
.ds[data-role='trader'] .pc-situation {
  border-radius: var(--ds-r-card);
  border-color: var(--hairline);
  background: var(--surface);
}
.ds[data-role='trader'] .pc-situation.is-me {
  background: color-mix(in srgb, var(--warning) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 32%, var(--hairline));
}
.ds[data-role='trader'] .pc-situation.is-danger {
  background: color-mix(in srgb, var(--error) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--error) 36%, var(--hairline));
}
.ds[data-role='trader'] .pc-situation.is-success {
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 28%, var(--hairline));
}
.ds[data-role='trader'] .pc-page .pc-notice { border-radius: var(--ds-r-panel); }
/* ================================================================
   Trader cabinet, page package B (orders): /trader/payments, /trader/payouts, the pay-in and pay-out
   sheets (PayInDetailModal, PayOutDetailModal + Components/Trader/Orders/*), the receipt viewer, and the
   .ds look of the shared LiveRefresh and ExportButton. Rules: DS.md. Colours only from ds/tokens.css,
   kit components first; page-only rules here, prefixed tb-.
   ================================================================ */

/* ---------- page rhythm: head → KPIs → tabs → toolbar → list ---------- */
.ds [data-trader-page] .tb-kpis {
  margin-bottom: 28px;
}
.ds [data-trader-page] .tb-tabs {
  margin-bottom: 16px;
}

/* ---------- table cells ---------- */
.ds .tb-cell-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.ds .tb-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds .tb-person > .ds-avatar {
  flex: none;
}
.ds .tb-sub-id,
.ds .tb-req {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.ds a.tb-sub-id {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.ds a.tb-sub-id:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}
.ds .tb-muted {
  color: var(--text-2);
}
.ds .tb-flag {
  font-size: 12px;
}
.ds .pg-table td .ds-money--stack .ds-money__approx {
  font-size: 12px;
}
/* the row the trader has to act on: a quiet warn edge, no fill */
.ds .pg-table tbody tr.tb-row--warn > td:first-child {
  box-shadow: inset 2px 0 0 var(--warning);
}
.ds table.rt--stacked tbody tr.tb-row--warn {
  box-shadow: inset 2px 0 0 var(--warning);
}
.ds table.rt--stacked tbody tr.tb-row--warn > td:first-child {
  box-shadow: none;
}
/* phone cards (responsive.js): bits that show only in the stacked card */
.ds .tb-card-only {
  display: none;
}
.ds table.rt--stacked .tb-card-only {
  display: block;
}
.ds .tb-row-when {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-2);
}
.ds .tb-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* UTR line (UtrLine): the reference a copy away, or a quiet "No UTR" */
.ds .tb-utr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}
.ds .tb-utr .ds-id__text {
  font-size: 12px;
}
.ds .tb-utr__icon {
  flex: none;
  color: var(--success);
}
.ds .tb-utr--none .tb-utr__icon {
  color: var(--text-2);
}

/* ---------- cards view (the table/cards switch) ---------- */
.ds .tb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  transition: opacity 0.2s ease;
}
.ds .tb-cards.is-busy {
  opacity: 0.6;
}
.ds .tb-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ds .tb-card:hover {
  border-color: var(--hairline-hover);
  background: var(--surface-hover);
}
.ds .tb-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .tb-card--warn {
  box-shadow: var(--surface-shadow), inset 2px 0 0 var(--warning);
}
.ds .tb-card.live-new {
  animation: tb-card-in 2.6s var(--ease-out);
}
@keyframes tb-card-in {
  from {
    border-color: var(--accent);
  }
}
.ds .tb-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ds .tb-card__flag {
  align-self: flex-start;
  font-size: 12px;
}
.ds .tb-card__facts {
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.ds .tb-card__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

/* ---------- sheets (pay-in, pay-out) ---------- */
.ds .tb-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: start;
  padding: 20px;
  margin-bottom: 20px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .tb-hero__main {
  min-width: 0;
}
.ds .tb-hero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .tb-hero__usdt .ds-money {
  color: var(--text-2);
}
.ds .tb-hero__rate {
  font-variant-numeric: tabular-nums;
}
.ds .tb-hero__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}
.ds .tb-hero__when {
  font-size: 13px;
  color: var(--text-2);
}
.ds .tb-hero__earn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.ds .tb-hero__label,
.ds .tb-hero__hint {
  font-size: 13px;
  color: var(--text-2);
}
.ds .tb-hero__lost {
  color: var(--text-2);
}
.ds .tb-hero__earn-usdt {
  font-size: 12px;
  color: var(--text-2);
}
.ds .tb-hero__earn-usdt .ds-money {
  color: var(--text-2);
}
.ds .tb-sheet__notice {
  margin-bottom: 20px;
}
.ds .tb-notice__line {
  display: block;
  margin-top: 4px;
}
/* Anti-fraud R9a: the payer's own UTR above the confirm form. */
.ds .tb-confirm-payer-utr {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text);
}
.ds .tb-group + .tb-group {
  margin-top: 24px;
}
.ds .tb-group__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.ds .tb-group__hint {
  margin: -4px 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .tb-group--action {
  padding: 18px 20px 20px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .tb-geo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds .tb-geo__flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--flag-ring);
}

/* form fields in a sheet (the kit has none yet: the search field's look) */
.ds .tb-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 16px;
}
.ds .tb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ds .tb-field__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .tb-field__mark {
  margin-left: 4px;
  color: var(--text-2);
  opacity: 0.8;
}
.ds .tb-field__mark::before {
  content: "· ";
}
.ds .tb-field__input {
  width: 100%;
  height: var(--ds-control-h);
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}
.ds .tb-field__input--mono {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.ds .tb-field__input::placeholder {
  color: var(--text-2);
  opacity: 0.8;
}
.ds .tb-field__input:hover {
  border-color: var(--field-border-hover);
}
.ds .tb-field__input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .tb-field__input:disabled {
  opacity: 0.6;
}

/* receipt in the pay-out sheet */
.ds .tb-receipt {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ds .tb-receipt__thumb {
  flex: none;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
  background: var(--wash-2);
  color: var(--text-2);
  cursor: zoom-in;
}
.ds .tb-receipt__thumb:hover {
  border-color: var(--hairline-hover);
}
.ds .tb-receipt__thumb:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .tb-receipt__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds .tb-receipt__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.ds .tb-receipt__text p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}
.ds .tb-receipt__text .ds-btn {
  margin-left: -10px;
}
/* the receipt viewer */
.ds .tb-receipt-view {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 12px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .tb-receipt-view img {
  display: block;
  max-width: 100%;
  max-height: 64dvh;
  border-radius: var(--ds-r-row);
  object-fit: contain;
}

/* ---------- shared toolbar parts in a .ds list: LiveRefresh, ExportButton ---------- */
.ds .live-refresh.bal-btn-outline {
  height: var(--ds-control-h);
  padding: 0 14px;
  gap: 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ds .live-refresh.bal-btn-outline:hover {
  border-color: var(--hairline-hover);
  background: var(--wash-1);
  transform: none;
}
.ds .live-refresh.bal-btn-outline:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .live-refresh .live-refresh-dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ds .live-refresh.is-stale .live-refresh-dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px var(--warning-tint);
}
.ds .live-refresh .live-refresh-label {
  color: var(--text-2);
  font-weight: 500;
}
.ds .live-refresh .live-refresh-icon {
  font-size: 11px;
  color: var(--text-2);
}
.ds .export-dropdown > .btn {
  height: var(--ds-control-h);
  padding: 0 14px;
  gap: 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}
.ds .export-dropdown > .btn:hover:not(:disabled) {
  border-color: var(--hairline-hover);
  background: var(--wash-1);
  color: var(--text);
}
.ds .export-dropdown > .btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .export-dropdown > .btn i {
  font-size: 12px;
  color: var(--text-2);
}
.ds .export-dropdown .export-dropdown-menu {
  min-width: 180px;
  padding: 6px;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-listbox);
}
.ds .export-dropdown .export-dropdown-item {
  height: 36px;
  padding: 0 12px;
  gap: 10px;
  border-radius: var(--ds-r-row);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
}
.ds .export-dropdown .export-dropdown-item:hover {
  padding-left: 12px;
  background: var(--popover-row);
}
.ds .export-dropdown .export-dropdown-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.ds .export-dropdown .export-dropdown-item i {
  width: 16px;
  color: var(--text-2);
}

/* ---------- narrow screens ---------- */
@media (max-width: 720px) {
  .ds .tb-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .ds .tb-hero__earn {
    align-items: flex-start;
    text-align: left;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
  }
  .ds .live-refresh .live-refresh-label {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds .tb-card.live-new {
    animation: none;
  }
}
/* Pay-out hold (payout-hold-deadline.md E1): the label sits left of the clock. */
.ds .tb-hold-clock {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ds .tb-hold-hint {
  margin: 0 0 12px;
  font-size: 13px;
}
/* ================================================================
   Trader cabinet: the setup checklist (docs/trader-onboarding/SPEC.md). The setup page /trader/start
   (Components/Trader/Onboarding/OnboardingSetup), the tour coach (TourCoach, rendered by MainLayout),
   the home card (SetupHomeCard) and the admin "Setup" group (Components/Admin/OnboardingAdminGroup).
   Rules: DS.md. Every selector under .ds, prefix ob-, colours only from ds/tokens.css (color-mix of
   tokens where a tint is needed), no [data-theme] rules: the tokens carry both themes.
   Accent (DS.md "Accent in the app"): progress fills, the open row's wash and bar, the one Primary.
   Done is --success (its own hue, so "done" never reads as "selected").
   ================================================================ */

/* ---------- page ---------- */
.ds .ob-page {
  min-width: 0;
}
.ds .ob-skel-progress .ds-skel--block {
  height: 92px;
  margin-bottom: 16px;
}
.ds .ob-skel-body .ds-skel--block {
  height: 480px;
}

/* ---------- progress card: done of total, a segment per step, minutes left ---------- */
.ds .ob-progress {
  margin-bottom: 16px;
}
.ds .ob-progress .ds-card__body {
  padding: 18px 24px 20px;
}
.ds .ob-progress__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ds .ob-progress__count {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ds .ob-progress__left {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.ds .ob-meter {
  display: flex;
  gap: 6px;
}
.ds .ob-meter__seg {
  flex: 1 1 0;
  height: 8px;
  border-radius: 999px;
  background: var(--ds-chart-track);
  transition: background-color 0.35s var(--ease-out);
}
.ds .ob-meter__seg.is-done {
  background: var(--accent);
}
/* the step the page recommends: an accent outline on the empty track, so the eye finds "here" on the bar
   without reading it as done */
.ds .ob-meter__seg.is-next {
  box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), 0.6);
}
.ds .ob-meter--thin {
  gap: 4px;
}
.ds .ob-meter--thin .ob-meter__seg {
  height: 5px;
}

/* ---------- two columns from 1024 px: the list (340) | the open step ---------- */
.ds .ob-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ds .ob-grid > .ob-list {
  position: sticky;
  top: 0;
}

/* ---------- the step list ---------- */
.ds .ob-steps {
  list-style: none;
  margin: 0;
  padding: 8px;
}
.ds .ob-item {
  position: relative;
  margin: 0;
}
.ds .ob-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 11px 14px 11px 12px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ds .ob-step:hover {
  background: rgba(var(--accent-rgb), 0.05);
}
.ds .ob-step:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
/* the open step: the selected-row look of the kit (accent wash + a 3 px accent bar) */
.ds .ob-step.is-current {
  background: rgba(var(--accent-rgb), 0.08);
}
.ds .ob-step.is-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
/* the rail that joins the markers: done stretches in the success tone */
.ds .ob-grid .ob-item:not(:last-child) .ob-step::after {
  content: '';
  position: absolute;
  left: 25.25px;
  top: calc(50% + 18px);
  height: calc(100% - 36px);
  width: 1.5px;
  border-radius: 1px;
  background: var(--hairline-strong);
}
.ds .ob-grid .ob-item:not(:last-child) .ob-step.is-done::after {
  background: var(--success-ring);
}

/* marker: number in a ring; done = a success check; locked = a lock */
.ds .ob-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--hairline-strong);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ds .ob-step.is-next .ob-mark,
.ds .ob-step.is-current:not(.is-done):not(.is-locked) .ob-mark {
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--text);
}
.ds .ob-step.is-done .ob-mark,
.ds .ob-adm__step.is-done .ob-mark {
  background: var(--success-tint);
  color: var(--success);
  box-shadow: inset 0 0 0 1px var(--success-ring);
}
.ds .ob-step.is-locked .ob-mark,
.ds .ob-adm__step.is-locked .ob-mark {
  background: var(--wash-2);
  color: var(--text-2);
  box-shadow: none;
}
.ds .ob-mark--sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.ds .ob-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .ob-step__title {
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text);
}
.ds .ob-step.is-done .ob-step__title,
.ds .ob-step.is-locked .ob-step__title {
  font-weight: 500;
  color: var(--text-2);
}
.ds .ob-step__status {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .ob-step__next {
  font-weight: 600;
  color: var(--text);
}
.ds .ob-step__min {
  align-self: center;
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds .ob-step.is-done .ob-step__min {
  font-weight: 600;
  color: var(--success);
}

/* ---------- the open step's panel ---------- */
.ds .ob-panel .ds-card__head {
  padding: 24px 28px 0;
}
.ds .ob-panel .ds-card__head .ds-h2 {
  font-size: 20px;
  letter-spacing: -0.015em;
}
.ds .ob-panel .ds-card__lead {
  max-width: 62ch;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
}
.ds .ob-panel__meta {
  padding-top: 4px;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds .ob-panel .ds-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 28px 26px;
}
.ds .ob-panel-wrap {
  min-width: 0;
}
.ds .ob-panel-wrap.is-picked {
  animation: ob-fade 0.18s var(--ease-out);
}
@keyframes ob-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.ds .ob-h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
}

/* checks: one raised panel, a mark and a sentence per check */
.ds .ob-checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--surface-raised);
}
.ds .ob-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
}
.ds .ob-tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--hairline-strong);
  color: var(--text-2);
}
.ds .ob-tick--ok {
  background: var(--success-tint);
  color: var(--success);
  box-shadow: inset 0 0 0 1px var(--success-ring);
}
.ds .ob-tick--warn {
  background: var(--warning-tint);
  color: var(--warning);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 35%, transparent);
}
.ds .ob-tick--bad {
  background: var(--error-tint);
  color: var(--error);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 35%, transparent);
}
.ds .ob-check__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 1px;
}
.ds .ob-check__text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text);
}
.ds .ob-check--ok .ob-check__sentence {
  font-weight: 450;
  color: var(--text-2);
}
.ds .ob-check--bad .ob-check__sentence {
  color: var(--error);
  font-weight: 600;
}
.ds .ob-check__link {
  margin-left: 8px;
  white-space: nowrap;
}
.ds .ob-check__hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

/* locked: why it waits, and nothing to press */
.ds .ob-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-2);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}

/* actions: the panel's foot */
.ds .ob-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.ds .ob-actions:empty {
  display: none;
}

/* tour: the sections as a grid of rows */
.ds .ob-sections {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
.ds .ob-sections li {
  min-width: 0;
  margin: 0;
}
.ds .ob-section {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ds .ob-section:hover {
  border-color: var(--hairline-hover);
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--text);
  text-decoration: none;
}
.ds .ob-section:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .ob-section.is-seen .ob-section__name {
  color: var(--text-2);
}
.ds .ob-section__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .ob-section__go {
  margin-left: auto;
  color: var(--text-2);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ds .ob-section:hover .ob-section__go,
.ds .ob-section:focus-visible .ob-section__go {
  opacity: 1;
  transform: none;
}
.ds .ob-section .ob-tick {
  width: 20px;
  height: 20px;
}

/* film and guides */
.ds .ob-media-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.ds .ob-media-bar__label {
  font-size: 13.5px;
  color: var(--text-2);
}
.ds .ob-media-bar__tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds .ob-guide {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* a guide supports the step; it does not take over the panel like the overview film */
.ds .ob-guide .ob-video--wide {
  max-width: 760px;
}
.ds .ob-video {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--ground);
}
.ds .ob-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ground);
}
.ds .ob-video--wide {
  aspect-ratio: 16 / 9;
}
.ds .ob-video--tall {
  aspect-ratio: 9 / 16;
  height: min(68vh, 600px);
  max-width: 100%;
  margin-inline: auto;
}

/* methods */
.ds .ob-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  overflow: hidden;
}
.ds .ob-method {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 12px 16px;
}
.ds .ob-method + .ob-method {
  border-top: 1px solid var(--hairline);
}
.ds .ob-method__what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .ob-method__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .ob-method__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-2);
}

/* deposit: the insurance deposit and the available balance side by side */
.ds .ob-balances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ds .ob-balance {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--surface-raised);
}
.ds .ob-balance__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .ob-balance__hint {
  margin-top: auto;
  font-size: 12.5px;
  color: var(--text-2);
}
@media (max-width: 560px) {
  .ds .ob-balances {
    grid-template-columns: 1fr;
  }
}
.ds .ob-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--ds-chart-track);
  overflow: hidden;
}
.ds .ob-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ob-fill, 0%);
  border-radius: inherit;
  background: var(--warning);
  transition: width 0.4s var(--ease-out);
}
.ds .ob-bar.is-met .ob-bar__fill {
  background: var(--success);
}

/* live: the switch in place, then what brings more orders */
.ds .ob-traffic {
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--surface-raised);
  transition: border-color 0.2s ease;
}
.ds .ob-traffic.is-on {
  border-color: var(--success-ring);
}
.ds .ob-traffic__toggle {
  width: 100%;
}
.ds .ob-traffic__toggle .ds-toggle__label {
  font-size: 15px;
  font-weight: 600;
}
.ds .ob-more__list {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.ds .ob-more__list li + li {
  margin-top: 6px;
}
.ds .ob-more__list li::marker {
  color: var(--text-2);
}

/* ---------- all done: "You're live" ---------- */
.ds .ob-live .ds-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 32px 52px;
  text-align: center;
}
.ds .ob-live__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--success-tint);
  color: var(--success);
  box-shadow: inset 0 0 0 1px var(--success-ring), 0 0 0 8px color-mix(in srgb, var(--success) 7%, transparent);
}
.ds .ob-live__mark .ds-icon {
  stroke-width: 2;
}
.ds .ob-live__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ds .ob-live__text {
  max-width: 52ch;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.ds .ob-live__go {
  margin-top: 28px;
}

/* ---------- phones and tablets: the accordion ---------- */
.ds .ob-list--accordion .ob-steps {
  padding: 0;
}
.ds .ob-list--accordion .ob-item + .ob-item {
  border-top: 1px solid var(--hairline);
}
.ds .ob-list--accordion .ob-step {
  grid-template-columns: 28px minmax(0, 1fr) auto 16px;
  min-height: 68px;
  padding: 12px 16px;
  border-radius: 0;
}
.ds .ob-list--accordion .ob-item:first-child .ob-step {
  border-radius: var(--ds-r-card) var(--ds-r-card) 0 0;
}
.ds .ob-list--accordion .ob-item:last-child:not(.is-open) .ob-step {
  border-radius: 0 0 var(--ds-r-card) var(--ds-r-card);
}
.ds .ob-list--accordion .ob-step.is-current::before {
  top: 14px;
  bottom: 14px;
}
.ds .ob-step__chev {
  color: var(--text-2);
  transition: transform 0.2s var(--ease-out);
}
.ds .ob-item.is-open .ob-step__chev {
  transform: rotate(180deg);
}
.ds .ob-acc {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 16px 20px;
}
.ds .ob-acc.is-picked {
  animation: ob-fade 0.18s var(--ease-out);
}
.ds .ob-acc__why {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .ob-acc .ob-checks {
  padding: 14px;
}
.ds .ob-acc .ob-actions {
  padding-top: 16px;
}

@media (max-width: 560px) {
  .ds .ob-progress .ds-card__body {
    padding: 16px 16px 18px;
  }
  .ds .ob-meter {
    gap: 4px;
  }
  .ds .ob-acc .ob-actions .ds-btn {
    flex: 1 1 100%;
  }
  .ds .ob-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds .ob-section {
    height: auto;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 13.5px;
    line-height: 1.25;
  }
  .ds .ob-section__name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ds .ob-section__go {
    display: none;
  }
  .ds .ob-method {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
  }
  .ds .ob-method__what {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ds .ob-live .ds-card__body {
    padding: 40px 20px 36px;
  }
}

/* ---------- the tour coach ---------- */
.ds .ob-coach {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 950;
  width: 360px;
  max-width: calc(100vw - 48px);
  padding: 16px 18px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-panel);
  background: var(--popover);
  box-shadow: var(--shadow-popover);
  color: var(--text);
  animation: ob-coach-in 0.18s var(--ease-out);
}
@keyframes ob-coach-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.ds .ob-coach__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px -8px 0 0;
}
.ds .ob-coach__of {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .ob-coach__close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ds .ob-coach__close:hover {
  background: var(--wash-2);
  color: var(--text);
}
.ds .ob-coach__close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.ds .ob-coach__title {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ds .ob-coach__text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.ds .ob-coach__meter {
  display: flex;
  gap: 4px;
  margin-top: 14px;
}
.ds .ob-coach__seg {
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: var(--ds-chart-track);
}
.ds .ob-coach__seg.is-seen {
  background: var(--accent);
}
.ds .ob-coach__seg.is-current {
  background: color-mix(in srgb, var(--accent) 45%, var(--ds-chart-track));
}
.ds .ob-coach__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}
.ds .ob-coach__actions .ds-btn--ghost {
  margin-left: -10px;
}
.ds .ob-coach__actions .ds-btn--primary {
  min-width: 0;
}
.ds .ob-coach__actions .ds-btn--primary .ds-btn__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* never over a dialog or the phone drawer */
html.ds-sheet-open .ob-coach,
html.ds .app-shell--mobile-nav-open .ob-coach {
  display: none;
}
/* the page scrolls past the card, and the action toasts stack above it */
html.ds .app-shell:has(.ob-coach) .main {
  padding-bottom: 260px;
}
html.ds .app-shell:has(.ob-coach) .ds-toasts {
  bottom: 252px;
}

@media (max-width: 640px) {
  .ds .ob-coach {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    padding: 14px 16px 14px;
  }
  html.ds .app-shell:has(.ob-coach) .main {
    padding-bottom: 300px !important;
  }
  html.ds .app-shell:has(.ob-coach) .ds-toasts {
    bottom: calc(260px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds .ob-coach,
  .ds .ob-panel-wrap.is-picked,
  .ds .ob-acc.is-picked {
    animation: none;
  }
  .ds .ob-meter__seg,
  .ds .ob-bar__fill,
  .ds .ob-step__chev,
  .ds .ob-section__go {
    transition: none;
  }
}

/* ---------- home: one compact line while the setup is in progress ---------- */
.ds .ob-home {
  margin-bottom: 16px;
}
.ds .ob-home .ds-card__body {
  padding: 14px 16px 14px 22px;
}
.ds .ob-home__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 220px) auto;
  align-items: center;
  gap: 12px 24px;
}
.ds .ob-home__text {
  min-width: 0;
}
.ds .ob-home__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text);
}
.ds .ob-home__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--text-2);
}
@media (max-width: 720px) {
  .ds .ob-home .ds-card__body {
    padding: 14px 16px;
  }
  .ds .ob-home__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .ob-home__go {
    justify-self: start;
  }
}

/* ---------- admin: the trader's "Setup" group ---------- */
.ds .ob-adm__status,
.ds .ob-adm__done {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.ds .ob-adm__progress,
.ds .ob-adm__by {
  font-size: 13px;
  color: var(--text-2);
}
.ds .ob-adm__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px 24px;
  margin: 16px 0 0;
  padding: 0;
}
.ds .ob-adm__step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  margin: 0;
  padding: 6px 0;
}
.ds .ob-adm__step .ob-mark {
  grid-row: 1 / 3;
  align-self: start;
}
.ds .ob-adm__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .ob-adm__line {
  grid-column: 2;
  font-size: 13px;
  color: var(--text-2);
}

/* ---------- dev preview (/dev/onboarding, sandbox builds only) ---------- */
.ds.ob-dev {
  min-height: 100vh;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
}
.ds .ob-dev__main {
  max-width: var(--ds-page-max);
  margin: 0 auto;
  padding: 32px 32px 300px;
}
@media (max-width: 1023.98px) {
  .ds .ob-dev__main {
    padding: 16px 16px 300px;
  }
}
/* ================================================================
   Package R: the referral cabinet (trader, referral leader), the merchant-affiliate
   cabinet, their member / merchant pages and the admin read-only views of them.
   Components/Referrals/*, Components/Affiliates/*, Pages/Partner/*, Pages/Affiliate/*.
   Owned by that package only. Rules: DS.md. Every selector under .ds (the shell of
   a DsRoles role, or the local .ds scope the admin pages put around the cabinet);
   colours only from ds/tokens.css; kit components first, page-only layout here.
   Class prefix rf- (the legacy ref-* / aff-* rules in referral.css and affiliate.css
   no longer apply to these components).
   ================================================================ */

/* ---------- page ---------- */
.ds .rf-page {
  /* the chart components still read these names: point them at the chart tokens */
  --ref-l1: var(--ds-chart-2);
  --ref-l2: var(--ds-chart-3);
  --ref-payin: var(--ds-chart-2);
  --ref-payout: var(--ds-chart-3);
  --ref-earn: var(--ds-chart-in);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-sans);
}
.ds .rf-page > .ds-page-head {
  margin-bottom: 4px;
}
.ds .rf-page .ds-kpi-row {
  margin-bottom: 0;
}
.ds .rf-page .ds-page-head__actions {
  align-self: flex-end;
}
/* the admin pages host the cabinet inside their own head: the period on its own line */
.ds .rf-ro-bar {
  display: flex;
  justify-content: flex-end;
}
.ds.rf-scope {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-sans);
}

/* ---------- small type helpers ---------- */
.ds .rf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ds .rf-num .rf-stack {
  align-items: flex-end;
}
.ds .rf-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .rf-sub {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .rf-sub--live {
  color: var(--info);
}
.ds .rf-muted {
  font-size: 13px;
  color: var(--text-2);
}
.ds .rf-strong {
  font-weight: 500;
  color: var(--text);
}
.ds .rf-ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .rf-link {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s ease;
}
.ds .rf-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-hover);
  text-underline-offset: 3px;
}
.ds .rf-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .rf-count {
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .rf-note {
  margin: 0;
}
.ds .rf-privacy,
.ds .rf-footnote,
.ds .rf-paid-by {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .rf-paid-by {
  margin-top: 14px;
}
.ds .rf-footnote {
  margin-top: 10px;
}

/* ---------- period control: the kit's DsPeriod and a quiet refresh beside it ---------- */
.ds .rf-period {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.ds .rf-period .ds-period {
  justify-content: flex-end;
}

/* ---------- invite card ---------- */
/* Left: link field, share row, facts. Right, past a hairline: the rates. Both columns start at the
   top so their first lines line up. */
.ds .rf-invite__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 20px 32px;
  align-items: start;
}
.ds .rf-invite__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* the link: a read-only field with the primary Copy inside it */
.ds .rf-linkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
  background: var(--field-bg);
}
.ds .rf-linkbox__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: var(--text);
  user-select: all;
}
.ds .rf-linkbox__copy {
  flex: none;
}
.ds .rf-invite.is-paused .rf-linkbox {
  padding-right: 16px;
}
.ds .rf-invite.is-paused .rf-linkbox__url {
  color: var(--text-2);
}

.ds .rf-invite__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds .rf-invite__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}

/* facts under the link: the kit's label → value list, separated like a card footer */
.ds .rf-invite__facts {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.ds .rf-pub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.ds .rf-pub .is-generic {
  color: var(--text-2);
}
.ds .rf-pub__edit {
  flex: none;
  margin: -6px 0;
}

.ds .rf-invite__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-left: 32px;
  border-left: 1px solid var(--hairline);
}

/* rates: level × flow, headed like a DsTable */
.ds .rf-rates {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ds .rf-rates__cap {
  caption-side: top;
  padding: 0 0 10px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ds .rf-rates th,
.ds .rf-rates td {
  padding: 10px 0;
  font-size: 15px;
  text-align: right;
}
.ds .rf-rates thead th,
.ds .rf-rates thead td {
  padding-top: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 1px solid var(--hairline);
}
.ds .rf-rates tbody tr + tr th,
.ds .rf-rates tbody tr + tr td {
  border-top: 1px solid var(--hairline);
}
.ds .rf-rates tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--text-2);
}
.ds .rf-rates td {
  color: var(--text);
  font-weight: 600;
}
.ds .rf-rates td.is-zero {
  color: var(--text-2);
  font-weight: 400;
}

/* the name editor, anchored to the name in the facts list */
.ds .rf-anchor {
  position: relative;
}
.ds .rf-pop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.ds .rf-pop {
  position: absolute;
  z-index: 41;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--shadow-listbox);
}
.ds .rf-name-pop {
  top: calc(100% + 6px);
  left: 0;
  width: min(340px, calc(100vw - 32px));
  padding: 16px;
}
.ds .rf-pop__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* fields (the kit has no input yet) */
.ds .rf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds .rf-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ds .rf-field__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .rf-field__count {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.ds .rf-field__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .rf-field__hint.is-error {
  color: var(--error);
}
.ds .rf-input {
  width: 100%;
  height: var(--ds-control-h);
  padding: 0 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
  background: var(--field-bg);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ds .rf-input.ds-mono {
  font-family: var(--font-mono);
  font-size: 14px;
}
.ds .rf-input::placeholder {
  color: var(--text-3);
}
.ds .rf-input:hover {
  border-color: var(--field-border-hover);
}
.ds .rf-input:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.ds .rf-input[aria-invalid='true'] {
  border-color: var(--error);
}
.ds .rf-input:disabled {
  opacity: 0.6;
}

/* QR sheet */
.ds .rf-qr {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-radius: var(--ds-r-panel);
  background: var(--qr-plate);
}
.ds .rf-qr img {
  display: block;
  width: 220px;
  height: 220px;
  image-rendering: pixelated;
}
.ds .rf-qr__code {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* ---------- first run ---------- */
.ds .rf-first-run {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ds .rf-first-run .rf-invite__grid {
  grid-template-columns: minmax(0, 1fr);
}
.ds .rf-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .rf-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.ds .rf-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .rf-step__title {
  margin: 3px 0 2px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}
.ds .rf-step__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .rf-how__example {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .rf-how .rf-how__example:first-child {
  margin-top: 0;
}
.ds .rf-how__deals {
  margin-top: 20px;
}

/* ---------- KPIs and the balance tile ---------- */
.ds .rf-kpis__error {
  grid-column: span 3;
}
.ds .rf-kpis__error .ds-error {
  height: 100%;
}
.ds .rf-bal {
  display: flex;
  flex-direction: column;
}
.ds .rf-bal.is-debt .ds-kpi__value .ds-money {
  color: var(--error);
}
.ds .rf-bal__why {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-2);
}
.ds .rf-bal__why.is-warn {
  color: var(--warning);
}
.ds .rf-bal__action {
  margin-top: auto;
  padding-top: 12px;
}

/* the deposit tile and its track */
.ds .rf-track {
  display: block;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--ds-chart-track);
  overflow: hidden;
}
.ds .rf-track > span {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.ds .rf-dep.is-full .rf-track > span {
  background: var(--success);
}

/* ---------- charts ---------- */
.ds .rf-chart .ds-card__body {
  padding-top: 12px;
}
.ds .rf-chart.is-busy .ds-card__body {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.ds .rf-chart-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ds .rf-period-section > .rf-kpis + .rf-chart-pair,
.ds .rf-period-section > .ds-loading + .rf-chart-pair,
.ds .rf-period-section > .ds-error + .rf-chart-pair {
  margin-top: 16px;
}
.ds .rf-period-section .ds-loading + .ds-loading {
  margin-top: 12px;
}
.ds .rf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ds-chart-legend-text);
}
.ds .rf-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds .rf-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.ds .rf-legend__dot--earned {
  background: var(--ds-chart-in);
}
.ds .rf-legend__dot--hours {
  background: var(--ds-chart-2);
  opacity: 0.6;
}
.ds .rf-legend__dot--peak {
  background: var(--ds-chart-2);
}
.ds .rf-legend__line {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
/* the hours chart: its grid, axis and conversion line on the chart tokens */
.ds .rf-page .ref-hours-grid {
  border-top: 1px solid var(--ds-chart-grid);
}
.ds .rf-page .ref-hours-grid.is-zero {
  border-top-color: var(--ds-chart-grid-zero);
}
.ds .rf-page .ref-hours-caps,
.ds .rf-page .ref-hours-y span,
.ds .rf-page .ref-hours-peak {
  color: var(--ds-chart-axis);
}
.ds .rf-page .ref-hours-foot {
  margin-top: 12px;
}
.ds .rf-page .ref-hours-foot .rf-legend {
  margin-top: 0;
}
.ds .rf-page .ref-dual-axis span {
  font-weight: 500;
}

/* ---------- tabs ---------- */
.ds .rf-sections {
  min-width: 0;
  margin-top: 8px;
}
.ds .rf-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ds .rf-panel > .ds-toolbar {
  margin-bottom: 0;
}

/* ---------- team ---------- */
.ds .rf-apps {
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--surface);
}
.ds .rf-apps__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--ds-r-panel);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.ds .rf-apps__toggle:hover {
  background: var(--wash-1);
}
.ds .rf-apps__label {
  font-weight: 500;
}
.ds .rf-apps__counts {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .rf-apps__chev {
  color: var(--text-2);
  transition: transform 0.2s var(--ease-out);
}
.ds .rf-apps.is-open .rf-apps__chev {
  transform: rotate(180deg);
}
.ds .rf-apps__list {
  margin: 0;
  padding: 4px 16px 0;
  list-style: none;
}
.ds .rf-apps__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 96px;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}
.ds .rf-apps__at {
  justify-self: end;
}
.ds .rf-apps__note {
  margin: 0;
  padding: 8px 16px 14px;
  font-size: 13px;
  color: var(--text-2);
}

/* the tree table */
.ds .rf-team col.rf-col-who {
  width: 30%;
}
.ds .rf-team col.rf-col-level {
  width: 8%;
}
.ds .rf-team col.rf-col-date {
  width: 12%;
}
.ds .rf-team col.rf-col-money {
  width: 13%;
}
.ds .rf-team col.rf-col-num {
  width: 7%;
}
.ds .rf-team .ds-table {
  table-layout: fixed;
}
.ds .rf-who {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds .rf-who .ds-avatar {
  flex: none;
}
.ds .rf-who__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ds .rf-who__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .rf-who__sub .ds-status {
  font-size: 12.5px;
}
.ds .rf-who__meta {
  white-space: nowrap;
}
.ds .rf-exp,
.ds .rf-exp-gap {
  flex: none;
  width: 24px;
  height: 24px;
}
.ds .rf-exp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ds .rf-exp:hover {
  background: var(--wash-2);
  color: var(--text);
}
.ds .rf-exp .ds-icon {
  transition: transform 0.2s var(--ease-out);
}
.ds .rf-exp.is-open .ds-icon {
  transform: rotate(90deg);
}
/* a level 2 row hangs under its parent: indent + a connector */
.ds .rf-tr.is-child .rf-who {
  padding-left: 34px;
}
.ds .rf-branch {
  position: absolute;
  left: 11px;
  top: -14px;
  bottom: -14px;
  width: 14px;
  pointer-events: none;
}
.ds .rf-branch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--hairline-strong);
}
.ds .rf-branch::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  border-top: 1px solid var(--hairline-strong);
}
.ds .rf-tr.is-last .rf-branch::before {
  bottom: 50%;
}
.ds .pg-table tbody tr.rf-tr.is-child {
  background: var(--wash-1);
}
.ds .rf-tr.is-context .rf-who__text,
.ds .rf-tr.is-disabled .rf-who__text {
  opacity: 0.6;
}
.ds .rf-geo-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ds .rf-page .ref-geo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text);
}
.ds .rf-page .ref-geo img {
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--flag-ring);
}

/* ---------- earnings ---------- */
.ds .rf-entry {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 500;
}
.ds .rf-entry .ds-status {
  font-weight: 400;
  font-size: 13px;
}
.ds .rf-led-who {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}
.ds .rf-basis {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}

/* ---------- payouts ---------- */
.ds .rf-wd-facts .ds-money {
  font-size: 16px;
}
.ds .rf-wd-note {
  margin-top: 16px;
}
.ds .rf-wd-why {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .rf-tx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}

/* the withdraw sheet */
.ds .rf-wd-sheet .ds-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- member and merchant pages ---------- */
.ds .rf-person__row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ds .rf-person__facts {
  flex: 1 1 auto;
  min-width: 0;
}
.ds .rf-person .ds-card__body {
  padding: 18px 24px;
}
.ds .rf-terms {
  font-weight: 500;
  color: var(--text);
}
.ds .rf-terms.is-ended {
  color: var(--text-2);
}
.ds .rf-geo-card .ds-table-frame {
  border: 0;
  border-radius: 0;
}

/* operations feed */
.ds .rf-ops .ds-section__actions {
  gap: 12px;
}
.ds .rf-ops .ds-toolbar {
  margin-bottom: 12px;
}
.ds .rf-ops-table .ds-money--stack {
  align-items: flex-end;
}
.ds .rf-ops-table table:not(.rt--stacked) tbody tr.is-open td:first-child {
  box-shadow: inset 2px 0 0 var(--info);
}

/* ---------- affiliate pieces ---------- */
.ds .rf-method {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.ds .rf-rates-table tbody + tbody {
  border-top: 1px solid var(--hairline-strong);
}
.ds .rf-rates-table table:not(.rt--stacked) tbody tr.is-second td[data-cell='primary'] .rf-method {
  visibility: hidden;
}
.ds .rf-calc .rf-sub {
  white-space: nowrap;
}
.ds .rf-calc-more {
  display: none;
}
.ds .rf-calc-list {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
}
.ds .rf-calc-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.ds .rf-calc-list dt {
  color: var(--text-2);
}
.ds .rf-calc-list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ds .rf-calc-list .is-total {
  padding-top: 4px;
  border-top: 1px solid var(--hairline);
  font-weight: 500;
}
.ds table.rt--stacked .rf-calc {
  display: none;
}
.ds table.rt--stacked .rf-calc-more {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}
.ds table.rt--stacked .rf-calc-more summary {
  cursor: pointer;
}

/* deal and its history */
.ds .rf-deal__now {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ds .rf-deal__terms {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ds .rf-deal__now.is-ended .rf-deal__terms {
  color: var(--text-2);
}
.ds .rf-deal__how,
.ds .rf-deal__reason {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .rf-deal__past {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.ds .rf-disclosure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.ds .rf-disclosure .ds-icon {
  color: var(--text-2);
  transition: transform 0.2s var(--ease-out);
}
.ds .rf-disclosure.is-open .ds-icon {
  transform: rotate(180deg);
}
.ds .rf-deal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.ds .rf-deal__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  font-size: 13.5px;
}
.ds .rf-deal__row-when,
.ds .rf-deal__row-reason {
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .rf-deal__row-sum {
  justify-self: end;
}
.ds .rf-deal__row-reason {
  grid-column: 1 / -1;
}

/* ---------- loading shapes ---------- */
.ds .rf-load-invite .ds-skel--block {
  height: 150px;
}
.ds .rf-load-person .ds-skel--block {
  height: 88px;
}

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .ds .rf-invite__grid,
  .ds .rf-first-run {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .rf-invite__side {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .ds .rf-chart-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 960px) {
  .ds .rf-kpis__error {
    grid-column: span 2;
  }
  .ds .rf-person__row {
    align-items: flex-start;
  }
}
@media (max-width: 720px) {
  .ds .rf-page {
    gap: 16px;
  }
  .ds .rf-period {
    justify-content: flex-start;
    width: 100%;
  }
  .ds .rf-period .ds-period {
    flex: 1;
  }
  .ds .rf-page .ds-page-head__actions {
    width: 100%;
  }
  .ds .rf-ro-bar {
    justify-content: stretch;
  }
  .ds .rf-linkbox {
    flex-wrap: wrap;
    padding: 12px;
  }
  .ds .rf-linkbox__url {
    flex-basis: 100%;
    padding: 0 4px;
    font-size: 14px;
  }
  .ds .rf-linkbox__copy {
    width: 100%;
    justify-content: center;
  }
  .ds .rf-kpis__error {
    grid-column: 1 / -1;
  }
  .ds .rf-person__row {
    flex-direction: column;
    gap: 14px;
  }
  .ds .rf-person .ds-card__body {
    padding: 16px;
  }
  .ds .rf-apps__toggle {
    flex-wrap: wrap;
  }
  .ds .rf-apps__counts {
    margin-left: 0;
    order: 3;
    width: 100%;
  }
  .ds .rf-apps__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ds .rf-apps__at {
    grid-column: 1 / -1;
    justify-self: start;
  }
  /* phone cards: level 2 hangs under its parent */
  .ds table.rt--stacked .rf-tr.is-child {
    margin-left: 18px;
    box-shadow: inset 2px 0 0 var(--hairline-strong);
  }
  .ds table.rt--stacked .rf-tr.is-child .rf-who {
    padding-left: 0;
  }
  .ds table.rt--stacked .rf-branch,
  .ds table.rt--stacked .rf-exp-gap {
    display: none;
  }
  .ds .rf-deal__terms {
    font-size: 18px;
  }
}

/* phone cards (js/responsive.js → .rt--stacked): figures read left, names may wrap */
.ds table.rt--stacked .rf-num {
  text-align: left;
}
.ds table.rt--stacked .rf-num .rf-stack,
.ds table.rt--stacked .ds-money--stack {
  align-items: flex-start;
}
.ds table.rt--stacked .rf-link,
.ds table.rt--stacked .rf-who__sub .ds-status__text {
  white-space: normal;
  overflow: visible;
}
@media (max-width: 720px) {
  .ds .rf-panel .ds-toolbar__filters > .ds-tabs,
  .ds .rf-ops .ds-toolbar__filters > .ds-tabs {
    grid-column: 1 / -1;
  }
}
.ds .rf-input[aria-invalid='true']:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent);
}
.ds .rf-first-run .rf-invite__side {
  max-width: 460px;
  padding: 16px 0 0;
  border-left: 0;
  border-top: 1px solid var(--hairline);
}

/* detail groups in this flex body: the body's gap spaces them, 12 px like every sheet (DS.md, "Detail views") */
.ds .rf-wd-sheet .ds-sheet__body:has(> .ds-dg) {
  gap: 12px;
}
.ds .rf-wd-sheet .ds-sheet__body > .ds-dg {
  margin-top: 0;
}

/* ---------- teams (team budget): the split bar, the lead's terms, the list, the drawer ---------- */
/* the owner's view: the teams section under the partner's cabinet */
.ds .rf-team-ro {
  margin-top: 24px;
}
.ds .rf-team-split {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ds .rf-team-split__bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  background: var(--ds-chart-track);
  overflow: hidden;
}
/* --w is the part's share of the budget, written by TeamSplitBar with an invariant number */
.ds .rf-team-split__seg {
  flex: 0 0 var(--w, 0%);
  height: 100%;
}
.ds .rf-team-split__seg + .rf-team-split__seg {
  border-left: 2px solid var(--surface);
}
.ds .rf-team-split .is-trader {
  background: var(--ds-chart-2);
}
.ds .rf-team-split .is-lead {
  background: var(--ds-chart-3);
}
.ds .rf-team-split .is-mine {
  background: var(--accent);
}
.ds .rf-team-split.is-over .rf-team-split__bar {
  box-shadow: 0 0 0 1px var(--error);
}
.ds .rf-team-split__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  font-size: 13px;
}
.ds .rf-team-split__legend > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ds .rf-team-split__legend dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
}
.ds .rf-team-split__legend dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ds .rf-team-split__total {
  margin-left: auto;
}
.ds .rf-team-split.is-over .rf-team-split__total dd {
  color: var(--error);
}
.ds .rf-team-split__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ds .rf-team-off {
  color: var(--warning);
}
.ds .rf-team-table tr.is-ended td {
  color: var(--text-2);
}
.ds .rf-team-tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ds .rf-team-drawer__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds .rf-team-drawer .rf-team-split {
  margin-bottom: 12px;
}
.ds .rf-team-drawer .ds-kpi-row.is-busy {
  opacity: 0.6;
}
.ds .rf-team-terms .ds-notice {
  margin-top: 12px;
}
@media (max-width: 560px) {
  .ds .rf-team-split__total {
    margin-left: 0;
  }
}
/* ================================================================
   Staff portal, package S2 (operations): /admin/pay-ins, /admin/payouts, /admin/disputes (with the cascade
   moderation tab), /admin/corrections, /admin/tickets, their sheets and the staff-only parts they use
   (ActivePoolStrip, PoolDevices, ExpiryCountdown, SourceActor, OpsHero, OpsGroup, OpsMerchant,
   PayInCorrectionForm Ds markup, TraderTrafficOff Detail, TrafficActionDialog, Components/Admin/Corrections/*).
   Rules: DS.md. Colours only from ds/tokens.css; kit components first; page-only rules here, prefixed so-.
   Page roots carry data-staff-page="pay-ins|payouts|disputes|corrections|tickets".
   ================================================================ */

/* ---------- page rhythm: head → KPIs → pool → (tabs) → toolbar → list ---------- */
.ds [data-staff-page] .so-kpis {
  margin-bottom: 20px;
}
.ds [data-staff-page] .so-tabs {
  margin-bottom: 16px;
}
.ds [data-staff-page] .so-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--text-2);
}

/* ---------- table cells ---------- */
.ds .so-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.ds .so-stack--end {
  align-items: flex-end;
}
.ds .so-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .so-muted {
  color: var(--text-2);
}
.ds .so-break {
  overflow-wrap: anywhere;
}
.ds .so-table th.num,
.ds .so-table td.num,
.ds .so-sheet th.num,
.ds .so-sheet td.num {
  text-align: right;
}
/* the merchant reads by name (logo + name, ellipsis), not by an initials box alone */
.ds .so-table .so-col-merchant {
  width: 200px;
  max-width: 220px;
}
.ds .so-table .so-col-merchant .so-merchant {
  max-width: 100%;
}
.ds .pg-table tbody tr.is-selected {
  background: var(--wash-2);
}
.ds .so-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds .so-person > .ds-avatar {
  flex: none;
}
.ds .so-flow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.ds .so-flow__arrow {
  color: var(--text-2);
}

/* entity links drawn by the package (merchant, actor): ink, underline on hover */
.ds .so-merchant {
  display: inline-flex;
  min-width: 0;
}
.ds .so-merchant__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.ds a.so-merchant__link:hover .so-merchant__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ds .so-merchant__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .so-merchant--logo .so-merchant__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ds table.rt--stacked .so-merchant--logo .so-merchant__name {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
}

.ds .so-actor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 220px;
}
.ds .so-actor > .ds-avatar,
.ds .so-actor > .atlas-mark {
  flex: none;
}
.ds .so-actor__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.ds .so-actor--none {
  font-size: 13px;
  color: var(--text-2);
}
/* an Atlas Label trader (DS.md, "Atlas Label in lists"): the mark and the name in the accent at 600, hover too */
.ds .so-actor.so-actor--atlas .so-actor__name,
.ds .so-actor.so-actor--atlas a.so-actor__name:hover {
  font-weight: 600;
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.ds .so-actor.so-actor--atlas a.so-actor__name:hover {
  text-decoration-color: currentColor;
}
.ds .so-actor--atlas > .atlas-mark {
  color: var(--accent);
}

/* row-level warn edge (a row the operator has to act on) */
.ds .pg-table tbody tr.so-row--warn > td:first-child {
  box-shadow: inset 2px 0 0 var(--warning);
}
.ds table.rt--stacked tbody tr.so-row--warn {
  box-shadow: inset 2px 0 0 var(--warning);
}
.ds table.rt--stacked tbody tr.so-row--warn > td:first-child {
  box-shadow: none;
}
.ds .so-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ---------- running clock of a list row (ExpiryCountdown) ---------- */
.ds .so-cd {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.ds .so-cd__time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.ds .so-cd__bar {
  display: block;
  width: 84px;
  height: 3px;
  border-radius: 2px;
  background: var(--hairline-strong);
  overflow: hidden;
}
.ds .so-cd__fill {
  display: block;
  width: var(--so-cd-run, 0%);
  height: 100%;
  background: var(--accent);
  transition: width 1s linear;
}
.ds .so-cd__fill--full {
  width: 100%;
}
.ds .so-cd--urgent .so-cd__time {
  color: var(--warning);
}
.ds .so-cd--urgent .so-cd__fill {
  background: var(--warning);
}
.ds .so-cd--over .so-cd__time {
  color: var(--error);
}
.ds .so-cd--over .so-cd__fill {
  background: var(--error);
}
.ds .so-cd--off {
  color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
  .ds .so-cd__fill {
    transition: none;
  }
}

/* ---------- pool capacity + devices on traffic (ActivePoolStrip + PoolDevices) ----------
   Two cards side by side above the pay-ins table: what the pool can still back (hero amount,
   where its money sits, the counts) and whether the devices that confirm it work. Without the
   devices card (no permission, traffic off) the pool card takes the row. */
.ds .so-poolgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 20px;
}
.ds .so-poolgrid > :only-child {
  grid-column: 1 / -1;
}
@media (max-width: 1100px) {
  .ds .so-poolgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* the pool card */
.ds .so-pool__note {
  margin: 0;
}
.ds .so-pool__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  outline: none;
}
.ds .so-pool__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-pool__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  min-width: 0;
}
.ds .so-pool__fiat {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .so-pool__fiat--geo {
  font-size: 13px;
  font-weight: 450;
}
.ds .so-pool__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--surface-raised);
  border-radius: var(--ds-r-panel);
}
.ds .so-pool__fact {
  min-width: 0;
}
.ds .so-pool__fact dt {
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .so-pool__fact dd {
  margin: 4px 0 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ds .so-pool__fact .ds-money {
  font-size: 16px;
}
.ds .so-pool__fact .ds-money__num {
  font-weight: 600;
}
.ds .so-pool__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ds .so-pool--empty .so-pool__flags {
  margin-top: 12px;
}
/* the sheet's frozen column: secondary to Available */
.ds .so-pool__quiet {
  color: var(--text-2);
}

/* a share bar: the pool's money (free / frozen / deposit) or the devices' health (ok / warn / bad) */
.ds .so-meter {
  display: flex;
  gap: 3px;
  height: 10px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--ds-chart-track);
  overflow: hidden;
}
.ds .so-meter__seg {
  flex: 0 1 0;
  min-width: 4px;
}
.ds .so-meter__seg--free,
.ds .so-meter__key--free {
  background: var(--accent);
}
.ds .so-meter__seg--frozen,
.ds .so-meter__key--frozen {
  background: var(--ds-chart-2);
}
/* the deposit is set aside, not working money: hatched */
.ds .so-meter__seg--deposit,
.ds .so-meter__key--deposit {
  background: repeating-linear-gradient(
    135deg,
    var(--ds-chart-8) 0 3px,
    color-mix(in srgb, var(--ds-chart-8) 45%, transparent) 3px 6px
  );
}
.ds .so-meter__seg--ok {
  background: var(--success);
}
.ds .so-meter__seg--warn {
  background: var(--warning);
}
.ds .so-meter__seg--bad {
  background: var(--error);
}
.ds .so-meter__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-meter__legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ds .so-meter__legend b {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ds .so-meter__key {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

/* the per-geo split on hover / focus of the hero (several geos) */
.ds .so-pool__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: none;
  min-width: min(480px, calc(100vw - 48px));
  padding: 12px 14px;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--shadow-popover);
}
.ds .so-pool__hero--geo {
  cursor: default;
}
.ds .so-pool__hero--geo:hover .so-pool__pop,
.ds .so-pool__hero--geo:focus .so-pool__pop,
.ds .so-pool__hero--geo:focus-within .so-pool__pop {
  display: block;
}
.ds .so-pool__hero--geo:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 6px;
}
.ds .so-pool__pop-title {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-2);
}
.ds .so-pool__pop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ds .so-pool__pop-table th {
  padding: 4px 8px;
  font-weight: 400;
  color: var(--text-2);
  text-align: left;
}
.ds .so-pool__pop-table td {
  padding: 4px 8px;
  color: var(--text-2);
}
.ds .so-pool__pop-table th,
.ds .so-pool__pop-table td {
  white-space: nowrap;
}
.ds .so-pool__pop-table .num {
  text-align: right;
}
.ds .so-pool__pop-table .so-pool__ink {
  color: var(--text);
}
.ds .so-pool__pop-table tr.is-empty td {
  opacity: 0.6;
}

/* the devices card */
.ds .so-dev__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.ds .so-dev__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  min-width: 0;
}
.ds .so-dev__big {
  font-size: 38px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .so-dev--ok .so-dev__big {
  color: var(--success);
}
.ds .so-dev--warn .so-dev__big {
  color: var(--warning);
}
.ds .so-dev--bad .so-dev__big {
  color: var(--error);
}
.ds .so-dev__of {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
}
.ds .so-dev__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px -10px 0;
  padding: 0;
  list-style: none;
}
.ds .so-dev__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--ds-r-row);
}
.ds .so-dev__row:hover {
  background: var(--surface-hover);
}
.ds .so-dev__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .so-dev__trader,
.ds .so-dev__device {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .so-dev__trader {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .so-dev__device {
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .so-dev__why {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  max-width: 220px;
}
.ds .so-dev__more {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--hairline-hover);
  text-underline-offset: 3px;
}
.ds .so-dev__more:hover,
.ds .so-dev__more:focus-visible {
  color: var(--text);
  text-decoration-color: var(--accent);
}
.ds .so-dev__allok {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--ds-r-panel);
  background: var(--success-tint);
  font-size: 14px;
  font-weight: 600;
  color: var(--success);
}
.ds .so-dev__allok-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: var(--surface);
  flex: none;
}

@media (max-width: 640px) {
  .ds .so-pool__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds .so-dev__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ds .so-dev__why {
    grid-column: 2;
    justify-content: flex-start;
    max-width: none;
  }
}

/* ---------- staff sheets: hero, groups, details ---------- */
.ds .so-sheet .ds-sheet__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.ds .so-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 16px 28px;
  align-items: start;
  margin-bottom: 20px;
  padding: 20px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .so-hero__main {
  min-width: 0;
}
.ds .so-hero__was {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-hero__was s .ds-money {
  color: var(--text-2);
}
.ds .so-hero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-hero__usdt .ds-money {
  color: var(--text-2);
}
.ds .so-hero__rate {
  font-variant-numeric: tabular-nums;
}
.ds .so-hero__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}
.ds .so-hero__when {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  min-width: 0;
}
.ds .so-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ds .so-hero__fact dt {
  font-size: 12px;
  color: var(--text-2);
}
.ds .so-hero__fact dd {
  margin: 0;
  min-width: 0;
}
.ds .so-sheet__notice {
  margin-bottom: 20px;
}
.ds .so-sheet__notice-line {
  display: block;
  margin-top: 4px;
}
.ds .so-group__lead {
  margin: -4px 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .so-group__more {
  margin-top: 16px;
}
.ds .so-geo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds .so-geo__flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--flag-ring);
}
.ds .so-url {
  overflow-wrap: anywhere;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.ds .so-url:hover {
  text-decoration-color: currentColor;
}
.ds .so-json {
  margin-top: 16px;
}
.ds .so-json__label {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-2);
}
.ds .so-danger-text {
  color: var(--error);
}
.ds .so-confirm-reason {
  margin-top: 16px;
}

/* ---------- manual confirm form on the kit (PayInCorrectionForm Ds=true) ---------- */
.ds .so-pic {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .so-pic__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ds .so-pic__static {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds .so-pic__static-label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-pic__compare {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
  font-variant-numeric: tabular-nums;
}
.ds .so-pic__compare.is-stale {
  opacity: 0.55;
}
.ds .so-pic__compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
}
.ds .so-pic__compare-row--head {
  font-size: 12px;
  color: var(--text-2);
}
.ds .so-pic__compare-row--head > :not(:first-child),
.ds .so-pic__compare-old,
.ds .so-pic__compare-new {
  text-align: right;
}
.ds .so-pic__compare-label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-pic__compare-old .ds-money {
  color: var(--text-2);
}
.ds .so-pic__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- trader traffic inside a detail list (TraderTrafficOff Detail) ---------- */
.ds .so-tto__row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

/* ---------- traffic action sheet (TrafficActionDialog) ---------- */
.ds .so-tad .ds-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .so-tad__transition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.ds .so-tad__arrow {
  color: var(--text-2);
}
.ds .so-tad__effects {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .ds .so-pool__pop {
    min-width: 0;
    width: min(420px, calc(100vw - 64px));
  }
}
@media (max-width: 640px) {
  .ds .so-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .ds .so-pic__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- pay-out actions (PayOutActions: row icons, sheet footer) ---------- */
.ds .so-act-host {
  display: contents;
}
.ds .so-foot-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.ds .so-table td[data-cell='amount'] .so-sub {
  white-space: nowrap;
}

/* ---------- small shared bits ---------- */
.ds .so-ellipsis {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds table.rt--stacked .so-ellipsis {
  max-width: none;
  white-space: normal;
}
.ds .so-head-text {
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.ds .so-section-bar__lead {
  margin: 0;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .so-sheet .ds-sheet__foot .so-foot-start {
  margin-right: auto;
}
.ds .so-hero--single {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- disputes: both threads side by side on a wide sheet ---------- */
.ds .so-threads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.ds .so-threads > .ds-dg {
  margin-top: 0;
}

/* ---------- cascade moderation (CascadeActionCard) ---------- */
.ds .so-cact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds .so-cact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .so-sheet .so-cact {
  background: var(--wash-1);
}
.ds .so-cact--pending {
  box-shadow: inset 2px 0 0 var(--warning);
}
.ds .so-cact__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 13px;
}
.ds .so-cact__dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.ds .so-cact__kind,
.ds .so-cact__when {
  color: var(--text-2);
}
.ds .so-cact__status {
  margin-left: auto;
}
.ds .so-cact__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.ds .so-cact__summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.ds .so-cact__note {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-cact__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- forms in staff sheets (corrections) ---------- */
.ds .so-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ds .so-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ds .so-preview {
  padding: 14px 16px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
}
.ds .so-choice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.ds .so-choice--stack {
  grid-template-columns: minmax(0, 1fr);
}
.ds .so-choice__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--ds-control-h);
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--text);
  background: var(--field-bg, var(--surface));
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-field);
  cursor: pointer;
}
.ds .so-choice__item:hover {
  border-color: var(--hairline-hover);
}
.ds .so-choice__item.is-on {
  background: var(--segment-on);
  border-color: var(--text-2);
}
.ds .so-choice__item:focus-visible,
.ds .so-choice__item:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .so-choice__item--row {
  justify-content: flex-start;
  align-items: flex-start;
}
.ds .so-choice__radio {
  margin: 3px 0 0;
  accent-color: var(--text);
}
.ds .so-choice__end {
  margin-left: auto;
}

/* ---------- trader / merchant picker (TargetPicker) ---------- */
.ds .so-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds .so-picker__search {
  position: relative;
}
.ds .so-picker__spin {
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -6px;
}
.ds .so-picker__hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .so-picker__hint--bad {
  color: var(--error);
}
.ds .so-picker__list {
  display: flex;
  flex-direction: column;
  max-height: 248px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
}
.ds .so-picker__row,
.ds .so-picker__picked {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--ds-r-row);
}
.ds .so-picker__row {
  cursor: pointer;
}
.ds .so-picker__row:hover,
.ds .so-picker__row:focus-visible {
  background: var(--wash-2);
  outline: none;
}
.ds .so-picker__picked {
  padding: 10px 12px;
  background: var(--wash-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-field);
}
.ds .so-picker__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ds .so-picker__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.ds .so-picker__key {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.ds .so-picker__bal {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .so-picker__geo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds .so-picker__geo .so-geo__flag {
  width: 14px;
  height: 14px;
}

@media (max-width: 900px) {
  .ds .so-threads {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .ds .so-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .so-cact__status {
    margin-left: 0;
  }
}

/* ---------- entity links drawn by the package (ids): ink with a hairline underline, never the accent ---------- */
.ds a.so-link,
.ds a.so-actor__name {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.ds a.so-link:hover,
.ds a.so-actor__name:hover {
  text-decoration-color: currentColor;
}
.ds span.so-link {
  color: var(--text);
}
/* the picker fills its field (the kit search box is sized for a toolbar row) */
.ds .ds-field__control > .so-picker,
.ds .ds-field__control > .so-picker__picked {
  flex: 1 1 auto;
  width: 100%;
}
.ds .so-picker .so-picker__search {
  flex: none;
  max-width: none;
}

/* detail groups in this flex body: the body's gap spaces them, 12 px like every sheet (DS.md, "Detail views") */
.ds .so-tad .ds-sheet__body:has(> .ds-dg) {
  gap: 12px;
}
.ds .so-tad .ds-sheet__body > .ds-dg {
  margin-top: 0;
}

/* Pay-out row actions (PayOutActions Compact): bigger, tinted by meaning — approve green, return/reroute accent,
   reject red — so the decision buttons read at a glance in a dense list. Labels stay in the tooltip/aria-label. */
.ds .so-row-actions,
.ds .so-act-host {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds .ds-btn.so-act {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.ds .ds-btn.so-act svg {
  width: 18px;
  height: 18px;
}
.ds .ds-btn.so-act--ok {
  background: var(--success-tint);
  color: var(--success);
  border-color: var(--success-ring);
}
/* a reversible hold (CardPauseToggle: pause a requisite) */
.ds .ds-btn.so-act--warn {
  background: var(--warning-tint);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
.ds .ds-btn.so-act--accent {
  background: var(--accent-tint);
  color: var(--accent-ink, var(--accent));
  border-color: var(--accent-ring);
}
.ds .ds-btn.so-act--bad {
  background: var(--error-tint);
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 35%, transparent);
}
.ds .ds-btn.so-act:hover {
  filter: brightness(1.15);
}
.ds .ds-btn.so-act:active {
  transform: scale(0.96);
}
:root[data-theme='light'] .ds .ds-btn.so-act--accent,
html[data-theme='light'] .ds .ds-btn.so-act--accent {
  color: var(--accent);
}

/* The actions column shrinks to its content and right-aligns, so rows without buttons don't leave a gap before
   the chevron and every chevron sits on one vertical line (the column was as wide as the widest row's buttons,
   with a lone chevron stuck at its left edge). */
.ds .so-table:not(.rt--stacked) th:last-child,
.ds .so-table:not(.rt--stacked) td:last-child {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.ds .so-table:not(.rt--stacked) td:last-child .so-row-actions {
  display: flex;
  justify-content: flex-end;
}

/* R8b: a dispute row whose freeze is partly the trader's debt carries a second status under its own. */
.ds .so-cell-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* ================================================================
   Merchant cabinet, package M1 (orders and integration logs): /merchant/pay-ins, /merchant/pay-outs,
   /merchant/webhooks, /merchant/api-calls, their sheets (MerchantPayInDetailModal, MerchantPayOutDetailModal,
   WebhookDetailModal, ApiCallDetailModal) and Components/Merchant/Orders/*. Same rhythm as the trader's order
   pages (trader-b.css). Rules: DS.md. Colours only from ds/tokens.css; page-only rules, prefixed mo-.
   The webhook and API-call sheets also open for staff once their role is on .ds: nothing here keys on the role.
   ================================================================ */

/* ---------- page rhythm: head → KPIs → tabs → toolbar → list ---------- */
.ds [data-merchant-page] .mo-kpis {
  margin-bottom: 28px;
}
.ds [data-merchant-page] .mo-tabs {
  margin-bottom: 16px;
}
.ds [data-merchant-page] .mo-page__notice {
  margin-bottom: 20px;
}
.ds .mo-toolbar-toggle {
  align-self: center;
  padding: 0 4px;
  white-space: nowrap;
}

/* ---------- cells ---------- */
.ds .mo-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}
.ds .mo-muted {
  color: var(--text-2);
}
.ds .mo-small {
  font-size: 12px;
}
.ds .mo-strong {
  font-weight: 500;
  color: var(--text);
}
.ds .mo-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds .mo-ellipsis {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
/* a long value in a card fact: one line, cut with an ellipsis (the sheet shows it whole) */
.ds .mo-fact-cut .ds-dl__content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .mo-break .ds-dl__content,
.ds td.mo-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ds .mo-cell-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.ds .mo-sub-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
/* links to another order: quiet underlined text, the accent stays for the selected item */
.ds a.mo-sub-link,
.ds .mo-sheet a.ds-entity {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.ds a.mo-sub-link {
  font-size: 12px;
  color: var(--text-2);
}
.ds a.mo-sub-link:hover,
.ds .mo-sheet a.ds-entity:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}
.ds .mo-row-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-2);
}
.ds .mo-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
/* a row the merchant should look at: a quiet edge in the status tone, no fill */
.ds .pg-table tbody tr.mo-row--warn > td:first-child {
  box-shadow: inset 2px 0 0 var(--warning);
}
.ds .pg-table tbody tr.mo-row--bad > td:first-child {
  box-shadow: inset 2px 0 0 var(--error);
}
.ds table.rt--stacked tbody tr.mo-row--warn {
  box-shadow: inset 2px 0 0 var(--warning);
}
.ds table.rt--stacked tbody tr.mo-row--bad {
  box-shadow: inset 2px 0 0 var(--error);
}
.ds table.rt--stacked tbody tr.mo-row--warn > td:first-child,
.ds table.rt--stacked tbody tr.mo-row--bad > td:first-child {
  box-shadow: none;
}
/* phone cards (responsive.js): bits that show only in the stacked card */
.ds .mo-card-only {
  display: none;
}
.ds table.rt--stacked .mo-card-only {
  display: block;
}

/* API request: method + path on one line */
.ds .mo-request {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.ds .mo-method {
  flex: none;
  min-width: 44px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.ds .mo-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

/* UTR (MoUtr): the reference a copy away, or a quiet "No UTR" */
.ds .mo-utr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}
.ds .mo-utr .ds-id__text {
  font-size: 12px;
}
.ds .mo-utr__icon {
  flex: none;
  color: var(--success);
}
.ds .mo-utr--none .mo-utr__icon {
  color: var(--text-2);
}

/* ---------- cards view (the table/cards switch) ---------- */
.ds .mo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  transition: opacity 0.2s ease;
}
.ds .mo-cards.is-busy {
  opacity: 0.6;
}
.ds .mo-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ds .mo-card:hover {
  border-color: var(--hairline-hover);
  background: var(--surface-hover);
}
.ds .mo-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .mo-card--warn {
  box-shadow: var(--surface-shadow), inset 2px 0 0 var(--warning);
}
.ds .mo-card.live-new {
  animation: mo-card-in 2.6s var(--ease-out);
}
@keyframes mo-card-in {
  from {
    border-color: var(--accent);
  }
}
.ds .mo-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ds .mo-card__facts {
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.ds .mo-card__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

/* ---------- sheets ---------- */
/* The sheet is a grid item of .ds-sheet-layer: without this a JSON line (white-space: pre) or a long URL sets
   its min-content width, and on a phone (max-width: none) the sheet grows past the screen. */
.ds .ds-sheet.mo-sheet {
  min-width: 0;
}
.ds .mo-sheet .mo-json {
  min-width: 0;
  max-width: 100%;
}
.ds .mo-sheet__meta {
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .mo-sheet__notice {
  margin-bottom: 20px;
}
.ds .mo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: start;
  padding: 20px;
  margin-bottom: 20px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .mo-hero__main {
  min-width: 0;
}
.ds .mo-hero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .mo-hero__usdt .ds-money {
  color: var(--text-2);
}
.ds .mo-hero__rate {
  font-variant-numeric: tabular-nums;
}
.ds .mo-hero__note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .mo-hero__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}
.ds .mo-hero__when {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .mo-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.ds .mo-hero__side:empty {
  display: none;
}
.ds .mo-hero__label,
.ds .mo-hero__small {
  font-size: 13px;
  color: var(--text-2);
}
.ds .mo-hero__small .ds-money {
  color: var(--text-2);
}
.ds .mo-hero__value {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ds .mo-group + .mo-group {
  margin-top: 24px;
}
.ds .mo-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ds .mo-group__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.ds .mo-group__head .mo-group__title {
  margin: 0;
}
.ds .mo-group__link {
  font-size: 13px;
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.ds .mo-group__link:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}
.ds .mo-group__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .mo-geo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds .mo-geo__flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--flag-ring);
}
.ds .mo-attempts-meter {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.ds .mo-meter {
  width: 100%;
  max-width: 220px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--wash-2);
  -webkit-appearance: none;
  appearance: none;
}
.ds .mo-meter::-webkit-meter-bar {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--wash-2);
}
.ds .mo-meter::-webkit-meter-optimum-value,
.ds .mo-meter::-webkit-meter-suboptimum-value,
.ds .mo-meter::-webkit-meter-even-less-good-value {
  border-radius: 2px;
  background: var(--accent);
}
.ds .mo-meter::-moz-meter-bar {
  border-radius: 2px;
  background: var(--accent);
}

/* the webhooks of one order, inside its sheet */
.ds .mo-hooks {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  overflow: hidden;
}
.ds .mo-hooks li + li {
  border-top: 1px solid var(--hairline);
}
.ds .mo-hook {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto 16px;
  align-items: center;
  gap: 4px 16px;
  padding: 12px 14px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.ds .mo-hook:hover {
  background: var(--wash-1);
}
.ds .mo-hook:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.ds .mo-hook__event {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.ds .mo-hook__meta {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds .mo-hook__chevron {
  color: var(--text-2);
}

/* the receipt in the pay-out sheet */
.ds .mo-receipt {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ds .mo-receipt__thumb {
  flex: none;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
  background: var(--wash-2);
  color: var(--text-2);
}
.ds .mo-receipt__thumb:hover {
  border-color: var(--hairline-hover);
}
.ds .mo-receipt__thumb:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .mo-receipt__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds .mo-receipt__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.ds .mo-receipt__text p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}
.ds .mo-receipt__text .ds-btn {
  margin-left: -10px;
}

/* a labelled copy button on the left of a sheet footer, the actions on the right */
.ds .mo-sheet .ds-sheet__foot .mo-foot-copy {
  margin-right: auto;
}

/* the attempt history (MoAttempts) */
.ds .mo-attempts td {
  vertical-align: top;
}

/* ---------- the JSON viewer inside an M1 sheet (shared JsonViewer: its legacy look stays elsewhere) ---------- */
.ds .mo-json .jv-toolbar {
  position: static;
  gap: 4px;
  padding: 6px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-bottom: 0;
  border-radius: var(--ds-r-row) var(--ds-r-row) 0 0;
}
.ds .mo-json .jv-toolbar .btn {
  height: 28px;
  padding: 0 10px;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  transform: none;
}
.ds .mo-json .jv-toolbar .btn:hover {
  background: var(--wash-2);
  color: var(--text);
}
.ds .mo-json .jv-toolbar .btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.ds .mo-json .jv-toolbar .btn i {
  font-size: 11px;
}
.ds .mo-json .jv-search-input {
  height: 28px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
}
.ds .mo-json .jv-search-input::placeholder {
  color: var(--text-2);
}
.ds .mo-json .jv-search-input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--field-border-hover);
}
.ds .mo-json .json-viewer {
  max-height: 420px;
  padding: 14px 16px;
  background: var(--ground-2);
  border: 1px solid var(--hairline);
  border-radius: 0 0 var(--ds-r-row) var(--ds-r-row);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
}
.ds .mo-json .jv-key {
  color: var(--info);
}
.ds .mo-json .jv-string {
  color: var(--success);
}
.ds .mo-json .jv-number {
  color: var(--warning);
}
.ds .mo-json .jv-bool,
.ds .mo-json .jv-null {
  color: var(--text-2);
}
.ds .mo-json .jv-bracket,
.ds .mo-json .jv-comma,
.ds .mo-json .jv-toggle,
.ds .mo-json .jv-collapsed::after {
  color: var(--text-2);
}
.ds .mo-json .jv-key:hover,
.ds .mo-json .jv-string:hover,
.ds .mo-json .jv-number:hover,
.ds .mo-json .jv-bool:hover,
.ds .mo-json .jv-collapsible:hover {
  background: var(--wash-2);
}
.ds .mo-json .jv-search-hit {
  background: var(--warning-tint);
}
.ds .mo-json .jv-parse-warn {
  color: var(--warning);
  font-family: var(--font-sans);
  font-size: 12px;
}
.ds .mo-json .jv-raw {
  color: var(--text-2);
}

/* ---------- narrow screens ---------- */
@media (max-width: 720px) {
  .ds .mo-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .ds .mo-hero__side {
    align-items: flex-start;
    text-align: left;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
  }
  .ds .mo-hook {
    grid-template-columns: minmax(0, 1fr) auto 16px;
  }
  .ds .mo-hook > .mo-hook__meta {
    grid-column: 1 / span 2;
    grid-row: 2;
  }
  .ds .mo-hook > .mo-hook__meta + .mo-hook__meta {
    display: none;
  }
  .ds .mo-hook__chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .ds .mo-json .jv-search-input {
    flex-basis: 100%;
    margin-left: 0;
  }
  .ds .mo-ellipsis {
    max-width: 160px;
  }
  /* phones get cards from the table anyway (responsive.js): the table/cards switch has nothing to switch */
  .ds .mo-view {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds .mo-card.live-new {
    animation: none;
  }
}
/* ================================================================
   Staff package S3: payment checks (queue, check, settings), devices, auto-confirm.
   Rules: DS.md. Colours only from ds/tokens.css; every rule is scoped under .ds and a page root
   (data-staff-page=…) or a class the package owns (s3-*). The payment-check pages keep their
   02.10 layout and keyboard flow (css/checks/*); this file aligns them to the kit's type and tones.
   Sections:
     shared      s3-* helpers used by every page of the package (tones, muted, numbers, sheets)
     devices     /admin/devices: fleet bar, table cells, the device sheet, the message box
     autoconfirm /admin/credit-events: status line, figures, chart, inbox, journal, the credit sheet
     checks      /admin/payment-checks(/{id}|/settings): page chrome, queue cells, rail type
   ================================================================ */

/* ---------- shared ---------- */
.ds .s3-tone-ok { --s3-tone: var(--success); }
.ds .s3-tone-warn { --s3-tone: var(--warning); }
.ds .s3-tone-bad { --s3-tone: var(--error); }
.ds .s3-tone-info { --s3-tone: var(--info); }
.ds .s3-tone-idle { --s3-tone: var(--text-2); }
.ds .s3-muted { color: var(--text-2); }
.ds .s3-warn { color: var(--warning); }
.ds .s3-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds .s3-notice { margin-bottom: 16px; }
.ds .s3-more { margin-top: 8px; }

/* A sheet's head line next to the status tag: the trader link, then quiet facts, dot-separated. */
.ds .s3-sheet-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  min-width: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .s3-sheet-meta > * + *::before {
  content: "·";
  margin: 0 7px;
  color: var(--text-2);
}
.ds .s3-sheet .ds-sheet__body { display: flex; flex-direction: column; gap: 22px; }
.ds .s3-sheet .ds-section + .ds-section { margin-top: 0; }
.ds .s3-sec .ds-section__head { margin-bottom: 10px; }

/* ---------- devices: page ---------- */
.ds [data-staff-page='devices'] .s3-fleet { margin-bottom: 18px; }
.ds .s3-fleet__bar {
  display: flex;
  gap: 2px;
  height: 6px;
  margin-bottom: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--wash-2);
}
.ds .s3-fleet__seg {
  flex-basis: 0;
  min-width: 4px;
  background: var(--s3-tone);
  transition: flex-grow 0.35s var(--ease-out);
}
.ds .s3-fleet__seg.s3-tone-idle { background: var(--hairline-strong); }
.ds .s3-fleet__totals {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .s3-dev-toolbar { margin-bottom: 14px; }
.ds .s3-dev-revoked { white-space: nowrap; }

.ds .s3-dev-table.is-entering .s3-dev-row {
  animation: s3-rise 0.28s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 20ms);
}
@keyframes s3-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* A device that needs a hand carries its tone as a rim on the first cell; an idle one (no traffic) is muted. */
.ds .pg-table tbody tr.s3-dev-row.s3-tone-bad > td:first-child,
.ds .pg-table tbody tr.s3-dev-row.s3-tone-warn > td:first-child { box-shadow: inset 3px 0 0 var(--s3-tone); }
.ds .pg-table tbody tr.s3-dev-row.is-open { background: var(--surface-hover); }
.ds .pg-table tbody tr.s3-dev-row.is-idle > td:not(:first-child) { opacity: 0.72; }

.ds .s3-dev { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds .s3-dev__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .s3-dev__name {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 26ch;
}
.ds .s3-dev__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.ds .s3-dev__meta .s3-muted { overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }

.ds .s3-trader { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.ds .s3-trader__only {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ds tr:hover .s3-trader__only,
.ds .s3-trader__only:focus-visible { opacity: 1; }
.ds .s3-trader__only:hover { background: var(--wash-2); color: var(--text); }
.ds .s3-trader__only:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
@media (hover: none) { .ds .s3-trader__only { opacity: 1; } }

.ds .s3-dev-status { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 34ch; }
.ds .s3-dev-status__line { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.ds .s3-dev-status__traffic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-2);
}

.ds .s3-now { display: block; max-width: 20ch; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ds .s3-now--ok { color: var(--success); }
.ds .s3-now--warn { color: var(--warning); }
.ds .s3-now--bad { color: var(--error); }

/* checks matrix: link · reader · methods · phone · delivery */
.ds .s3-mx { display: inline-flex; gap: 3px; }
.ds .s3-mx__cell {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--text-2);
}
.ds .s3-mx__cell--ok { color: var(--success); }
.ds .s3-mx__cell--warn {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 38%, transparent);
}
.ds .s3-mx__cell--fail {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 38%, transparent);
}
.ds .s3-mx__cell--unknown { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.ds .s3-mx__cell--none { opacity: 0.55; }

.ds .s3-meth { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 24ch; }
.ds .s3-meth__id { display: inline-flex; align-items: center; gap: 6px; }
.ds .s3-meth__auto { display: inline-flex; color: var(--success); }
.ds .s3-meth__label { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds .s3-meth__more { margin-left: 6px; }

.ds .s3-day { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ds .s3-day__counts { display: inline-flex; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds .s3-day__check { color: var(--warning); }
.ds .s3-day__last { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ds .s3-chev { color: var(--text-2); }

/* stacked rows (responsive.js turns the table into cards under 1080 px) */
.ds table.rt--stacked .s3-dev-row.s3-tone-bad,
.ds table.rt--stacked .s3-dev-row.s3-tone-warn { box-shadow: inset 3px 0 0 var(--s3-tone); }
.ds table.rt--stacked :is(.s3-dev__name, .s3-dev-status, .s3-meth, .s3-now) { max-width: none; }
.ds table.rt--stacked .s3-day { align-items: flex-start; }

/* ---------- devices: the device sheet ---------- */
.ds .s3-verdict .ds-notice__text { display: flex; flex-direction: column; gap: 4px; }
.ds .s3-verdict__traffic { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.ds .s3-verdict__traffic.is-on { color: var(--success); }

.ds .s3-problems { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds .s3-problem {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
  animation: s3-rise 0.24s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.ds .s3-problem.is-only { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.ds .s3-problem__icon { margin-top: 2px; color: var(--warning); }
.ds .s3-problem--fail .s3-problem__icon { color: var(--error); }
.ds .s3-problem__body { display: grid; gap: 3px; min-width: 0; }
.ds .s3-problem__title { margin: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.ds .s3-problem__why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ds .s3-problem__fix { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ds .s3-problem__fix > span { margin-right: 4px; font-weight: 500; color: var(--text); }
.ds .s3-problem__only[aria-pressed='true'] { color: var(--text); background: var(--wash-2); }

.ds .s3-counters { margin-top: 14px; }
.ds .s3-counters .s3-warn .ds-dl__value { color: var(--warning); }

.ds .s3-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ds .s3-method {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 12px 14px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
}
.ds .s3-method__main { grid-column: 1; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.ds .s3-method__label { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
/* the quick pause / resume (CardPauseToggle) closes the method's first line */
.ds .s3-method__act { margin-left: auto; }
.ds .s3-method__auto {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-2);
}
.ds .s3-method__auto.is-on { color: var(--success); }
.ds .s3-method__app {
  grid-column: 1;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .s3-method__app.s3-warn { color: var(--warning); }
.ds .s3-method__nums {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.ds .s3-journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds .s3-j {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 9px 0;
  font-size: 14px;
}
.ds .s3-j + .s3-j { box-shadow: inset 0 1px 0 var(--hairline); }
.ds .s3-j--sys { grid-template-columns: 76px minmax(0, 1fr); }
.ds .s3-j__time { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ds .s3-j__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .s3-j--sys .s3-j__main { flex-direction: row; flex-wrap: wrap; gap: 2px 8px; color: var(--text-2); }
.ds .s3-j__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
.ds .s3-j__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; color: var(--text-2); }
.ds .s3-j__meta .ds-status { font-size: 12px; }
.ds .s3-j__detail { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ds .s3-j__side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.ds .s3-j__side .ds-status { font-size: 12px; }

.ds .s3-tech { border-radius: var(--ds-r-panel); background: var(--wash-1); }
.ds .s3-tech > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--ds-r-panel);
}
.ds .s3-tech > summary::-webkit-details-marker { display: none; }
.ds .s3-tech > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds .s3-tech__title { font-size: 14px; font-weight: 500; color: var(--text); }
.ds .s3-tech > summary .s3-muted { font-size: 12px; }
.ds .s3-tech__chev { margin-left: auto; color: var(--text-2); transition: transform 0.2s var(--ease-out); }
.ds .s3-tech[open] .s3-tech__chev { transform: rotate(180deg); }
.ds .s3-tech > .ds-dl { padding: 2px 14px 14px; }
.ds .s3-tech__sub { margin: 6px 14px 8px; font-size: 13px; font-weight: 500; color: var(--text); }
.ds .s3-tech .ds-table-frame { margin: 0 14px 14px; }

.ds .s3-dev-sheet .ds-sheet__foot { justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.ds .s3-traffic { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--text-2); }
.ds .s3-revoke { margin-left: auto; }

/* the ready-to-paste Telegram message */
.ds .s3-msg {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--ds-r-panel);
  border: 1px solid var(--hairline);
  background: var(--surface-raised);
}
.ds .s3-msg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ds .s3-msg__title { font-size: 14px; font-weight: 500; color: var(--text); }
.ds .s3-msg__text {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--ds-r-row);
  background: var(--wash-1);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow: auto;
}
.ds .s3-msg__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ds .s3-msg__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.ds .s3-msg__hint { font-size: 12px; color: var(--text-2); }

@media (max-width: 640px) {
  .ds .s3-msg__actions { margin-left: 0; }
  .ds .s3-method { grid-template-columns: minmax(0, 1fr); }
  .ds .s3-method__auto,
  .ds .s3-method__nums { grid-column: 1; grid-row: auto; justify-self: start; justify-content: flex-start; }
  .ds .s3-j { grid-template-columns: 64px minmax(0, 1fr); }
  .ds .s3-j__side { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 10px; }
  .ds .s3-problem { grid-template-columns: 20px minmax(0, 1fr); }
  .ds .s3-problem__only { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .ds .s3-dev-table.is-entering .s3-dev-row,
  .ds .s3-problem { animation: none; }
}

/* ---------- autoconfirm: page ---------- */
.ds .s3-acf-status { margin-bottom: 18px; }
.ds .s3-acf-kpis { margin-bottom: 16px; }
.ds .s3-kpi-link {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: inherit;
  font: inherit;
  text-decoration: none;
  border-radius: var(--ds-r-card);
  cursor: pointer;
}
.ds .s3-kpi-link:disabled { cursor: default; }
.ds .s3-kpi-link > .ds-kpi { height: 100%; transition: border-color 0.15s ease, background 0.15s ease; }
.ds .s3-kpi-link:hover:not(:disabled) > .ds-kpi { border-color: var(--hairline-hover); background: var(--surface-hover); }
.ds .s3-kpi-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds .s3-kpi--go .ds-kpi__label::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  color: var(--text-2);
  transition: transform 0.15s ease;
}
.ds .s3-kpi-link:hover .s3-kpi--go .ds-kpi__label::after { transform: translateX(2px); }
.ds .s3-kpi-of { margin-left: 6px; font-size: 14px; color: var(--text-2); }

.ds .s3-acf-chart { margin-bottom: 22px; }
.ds .s3-chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.ds .s3-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ds-chart-legend-text); }
.ds .s3-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ds .s3-key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.ds .s3-key--ok { background: var(--success); }
.ds .s3-key--warn { background: var(--warning); }
.ds .s3-key--bad { background: var(--error); }
.ds .s3-key--off { background: var(--hairline-strong); }
.ds .s3-chart-plot { position: relative; margin-top: 14px; }
.ds .s3-chart-svg { display: block; width: 100%; height: 150px; overflow: visible; }
.ds .s3-chart-grid { stroke: var(--ds-chart-grid); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.ds .s3-chart-base { stroke: var(--ds-chart-grid-zero); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ds .s3-chart-bar { transition: opacity 0.15s ease; }
.ds .s3-chart-bar--ok { fill: var(--success); }
.ds .s3-chart-bar--warn { fill: var(--warning); }
.ds .s3-chart-bar--bad { fill: var(--error); }
.ds .s3-chart-bar--off { fill: var(--hairline-strong); }
.ds .s3-chart-hit { fill: transparent; }
.ds .s3-chart-plot:hover .s3-chart-col:not(.is-hover) .s3-chart-bar { opacity: 0.45; }
.ds .s3-chart-col { transform-box: fill-box; transform-origin: 50% 100%; }
.ds .s3-chart-svg.is-entering .s3-chart-col {
  animation: s3-grow 0.34s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 8ms);
}
@keyframes s3-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ds .s3-chart-ytick {
  left: 0;
  position: absolute;
  transform: translateY(-100%);
  padding-bottom: 1px;
  font-size: 10px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ds-chart-axis);
  pointer-events: none;
}
.ds .s3-chart-ytick--top { top: 0; }
.ds .s3-chart-ytick--mid { top: 50%; }
.ds .s3-chart-tip {
  position: absolute;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: 172px;
  padding: 9px 12px;
  border-radius: var(--ds-r-row);
  background: var(--ds-chart-tooltip-bg);
  border: 1px solid var(--ds-chart-tooltip-border);
  box-shadow: var(--shadow-popover);
  font-size: 12px;
  color: var(--ds-chart-tooltip-text);
  transform: translate(-50%, -8px);
  pointer-events: none;
}
.ds .s3-chart-tip.is-left { transform: translate(calc(-100% + 12px), -8px); }
.ds .s3-chart-tip.is-right { transform: translate(-12px, -8px); }
.ds .s3-chart-tip__time { margin-bottom: 2px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ds .s3-chart-tip__row { display: flex; align-items: center; gap: 8px; }
.ds .s3-chart-tip__row b { margin-left: auto; padding-left: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ds .s3-chart-axis { position: relative; height: 16px; margin-top: 4px; font-size: 11px; color: var(--ds-chart-axis); font-variant-numeric: tabular-nums; }
.ds .s3-chart-axis > span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ds .s3-chart-total { margin: 8px 0 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }

.ds .s3-acf-tabs { margin-bottom: 18px; }

/* inbox: groups of credits waiting for a person */
.ds .s3-inbox { display: flex; flex-direction: column; gap: 22px; }
.ds .s3-group__head { margin-bottom: 10px; }
.ds .s3-group__title { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 500; color: var(--text); }
.ds .s3-group__count { font-size: 13px; font-weight: 400; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ds .s3-group__line { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.ds .s3-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ds .s3-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 4px 14px 4px 4px;
  border-radius: var(--ds-r-panel);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--s3-tone, transparent);
  animation: s3-rise 0.26s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 25ms);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ds .s3-item:hover,
.ds .s3-item.is-open { border-color: var(--hairline-hover); background: var(--surface-hover); }
.ds .s3-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: var(--ds-r-row);
  cursor: pointer;
}
.ds .s3-item__main:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.ds .s3-item__amt { flex: none; min-width: 120px; }
.ds .s3-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds .s3-item__reason { font-size: 14px; line-height: 1.45; color: var(--text); }
/* the meta line sits under the row's button (its links cannot live inside it), aligned with the reason */
.ds .s3-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; flex-basis: 100%; margin: -8px 0 8px; padding-left: 150px; font-size: 12px; color: var(--text-2); }
.ds .s3-item__who { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ds .s3-item__sep { color: var(--text-2); }
.ds .s3-item__act { flex: none; }
.ds .s3-src { display: inline-flex; align-items: center; gap: 6px; }

/* journal */
.ds .s3-acf-toolbar { margin-bottom: 14px; }
.ds .s3-acf-table.is-entering .s3-acf-row {
  animation: s3-rise 0.28s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 15ms);
}
.ds .pg-table tbody tr.s3-acf-row.is-open { background: var(--surface-hover); }
.ds .pg-table tbody tr.s3-acf-row.s3-tone-warn > td:first-child,
.ds .pg-table tbody tr.s3-acf-row.s3-tone-bad > td:first-child { box-shadow: inset 3px 0 0 var(--s3-tone); }
.ds .s3-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 0; min-width: 0; }
.ds .s3-who > * + *::before { content: "·"; margin: 0 7px; color: var(--text-2); }
.ds .s3-who > .s3-trader__only { margin-left: 6px; }
.ds .s3-who > .s3-trader__only::before { content: none; }
.ds .s3-out { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ds .s3-trader { white-space: nowrap; }

/* ---------- autoconfirm: the credit sheet ---------- */
.ds .s3-strong { font-weight: 500; color: var(--text); }
.ds .s3-acts { display: flex; flex-direction: column; gap: 12px; }
.ds .s3-acts__row { display: flex; flex-wrap: wrap; gap: 8px; }
.ds .s3-acts__row .is-on { box-shadow: inset 0 0 0 1px var(--hairline-hover); }
.ds .s3-acts__why { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.ds .s3-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
  animation: s3-rise 0.2s var(--ease-out) both;
}
.ds .s3-pane__lead { margin: 0; font-size: 14px; color: var(--text-2); }
.ds .s3-pane__note { margin: 0; font-size: 13px; }
.ds .s3-pane__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ds .s3-cands { display: flex; flex-direction: column; gap: 6px; }
.ds .s3-cand {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 12px 14px 12px 44px;
  border-radius: var(--ds-r-row);
  border: 1px solid var(--hairline);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ds .s3-cand:hover { border-color: var(--hairline-hover); }
.ds .s3-cand.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ds .s3-cand__radio { position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.ds .s3-cand:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds .s3-cand__main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.ds .s3-cand__id { font-size: 14px; color: var(--text); }
.ds .s3-cand__amt { display: inline-flex; align-items: baseline; gap: 10px; }
.ds .s3-cand__mark { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.ds .s3-cand__amt.is-same .s3-cand__mark { color: var(--success); }
.ds .s3-cand__amt.is-diff .s3-cand__mark { color: var(--warning); }
.ds .s3-cand__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 12px; color: var(--text-2); }
.ds .s3-cand__listed { color: var(--info); }
.ds .s3-raw { border-radius: var(--ds-r-panel); background: var(--wash-1); padding: 12px 14px; }
.ds .s3-raw__text { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

.ds .s3-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.ds .s3-step {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 18px;
  animation: s3-rise 0.3s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.ds .s3-step::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--hairline);
}
.ds .s3-step--last { padding-bottom: 0; }
.ds .s3-step--last::before { display: none; }
.ds .s3-step__node {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--s3-tone, var(--hairline-strong));
}
.ds .s3-step--last.s3-tone-ok .s3-step__node { background: var(--success); }
.ds .s3-step__body { display: grid; gap: 6px; min-width: 0; }
.ds .s3-step__title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; font-weight: 500; color: var(--text); }
.ds .s3-step__time { font-size: 12px; font-weight: 400; color: var(--text-2); }
.ds .s3-step__line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 13px; line-height: 1.5; color: var(--text); }
.ds .s3-step__line.s3-muted { color: var(--text-2); }
.ds .s3-details > summary { cursor: pointer; font-size: 13px; color: var(--text-2); width: fit-content; }
.ds .s3-details > summary:hover { color: var(--text); }
.ds .s3-details > p { margin: 6px 0 0; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }

/* ---------- autoconfirm: rules, sources, settings ---------- */
.ds .s3-rules { display: flex; flex-direction: column; gap: 32px; }
.ds .s3-acr .ds-section__head { margin-bottom: 12px; }
.ds .s3-acr-lead { margin-bottom: 14px; display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.ds .s3-acr-lead p { margin: 0; }
.ds .s3-acr-lead > p:first-child { color: var(--text); }
.ds .s3-acr-tools { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ds .s3-nowrap { white-space: nowrap; }
.ds .s3-ok { color: var(--success); }
.ds .s3-count { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ds .pg-table tbody tr.s3-src-row.is-off > td:not([data-cell="status"]):not([data-cell="actions"]) { opacity: 0.55; }
.ds .s3-rule { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .s3-rule__name { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.ds .s3-rule__where { display: inline-flex; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-2); }
.ds .s3-rule__where > * + *::before { content: "·"; margin: 0 6px; }
.ds .s3-rule__where code { font-size: 12px; }
.ds .s3-reads { font-size: 13px; color: var(--text-2); }
.ds .s3-week { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ds .s3-week__last { font-size: 12px; color: var(--text-2); }
.ds .s3-week__last.s3-warn { color: var(--warning); }
.ds .s3-note { display: block; max-width: 28ch; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds .s3-actions { text-align: right; width: 44px; }

.ds .s3-menu { position: relative; display: inline-flex; }
.ds .s3-menu__btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.ds .s3-menu__btn:hover,
.ds .s3-menu.is-open .s3-menu__btn { background: var(--wash-2); color: var(--text); }
.ds .s3-menu__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ds .s3-menu__catch { position: fixed; inset: 0; z-index: 40; }
.ds .s3-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 41;
  min-width: 160px;
  padding: 6px;
  display: grid;
  border-radius: var(--ds-r-panel);
  border: 1px solid var(--hairline-strong);
  background: var(--popover);
  box-shadow: var(--shadow-popover);
}
.ds .s3-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.ds .s3-menu__item:hover,
.ds .s3-menu__item:focus-visible { background: var(--popover-row); outline: none; }
.ds .s3-menu__item--danger { color: var(--error); }

.ds .s3-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ds .s3-set .ds-card__body { display: flex; flex-direction: column; gap: 12px; }
.ds .s3-set.is-changed { border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); }
.ds .s3-savebar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  margin-top: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  border-radius: var(--ds-r-panel);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow-float);
}
.ds .s3-savebar__text { margin-right: auto; font-size: 14px; color: var(--text); }
.ds .s3-confirm-strong { margin: 8px 0 0; font-size: 14px; font-weight: 500; color: var(--warning); }

.ds .s3-form-sheet .ds-sheet__body { gap: 16px; }
.ds .s3-form { display: flex; flex-direction: column; gap: 14px; }
.ds .s3-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ds .s3-hint b { font-weight: 500; color: var(--text); }
.ds .s3-gap-top { margin-top: 8px; }
.ds .s3-num-input { max-width: 140px; }
.ds .s3-foot-start { margin-right: auto; }
.ds .s3-test { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--ds-r-panel); background: var(--wash-1); }
.ds .s3-test__out { display: flex; flex-direction: column; gap: 8px; min-height: 22px; }
.ds .s3-test__line { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.ds .s3-test__err .ds-status__text { font-family: var(--font-mono); font-size: 12px; }
.ds .s3-sample {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--ds-r-row);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ds .s3-hl {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
}
.ds .s3-empty-fact .ds-dl__value { color: var(--text-2); }
.ds .s3-code { display: block; margin-top: 6px; padding: 10px 12px; border-radius: var(--ds-r-row); background: var(--wash-1); font-size: 12px; color: var(--text); overflow-wrap: anywhere; }

.ds .s3-sug-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ds .s3-sug .ds-card__body { display: flex; flex-direction: column; gap: 10px; }
.ds .s3-sug__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ds .s3-sug__src { font-size: 14px; font-weight: 500; color: var(--text); }
.ds .s3-sug__meta { margin-left: auto; display: inline-flex; gap: 10px; font-size: 12px; color: var(--text-2); }
.ds .s3-sug__foot { display: flex; flex-wrap: wrap; gap: 8px; }
.ds .s3-pager { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; }

.ds .s3-lex-tools { margin-bottom: 12px; }
.ds .s3-lex-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ds .s3-lex-head { margin-bottom: 10px; }
.ds .s3-lex-title { margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 500; color: var(--text); }
.ds .s3-lex-none { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.ds .s3-lex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ds .s3-lex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 6px 10px;
  border-radius: var(--ds-r-row);
}
.ds .s3-lex.is-editable { cursor: pointer; }
.ds .s3-lex.is-editable:hover { background: var(--wash-1); }
.ds .s3-lex:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.ds .s3-lex.is-off .s3-lex__main,
.ds .s3-lex.is-off .s3-lex__weight { opacity: 0.5; }
.ds .s3-lex__main { display: flex; flex-direction: column; min-width: 0; }
.ds .s3-lex__term { font-family: var(--font-mono); font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.ds .s3-lex__lang { font-size: 11px; color: var(--text-2); }
.ds .s3-lex__weight { display: inline-flex; align-items: center; gap: 6px; }
.ds .s3-lex__word { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.ds .s3-meter { display: inline-block; width: 40px; height: 4px; border-radius: 999px; background: var(--wash-2); overflow: hidden; }
.ds .s3-meter--lg { width: 96px; height: 6px; }
.ds .s3-meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ds .s3-meter__fill--strong { background: var(--accent); }
.ds .s3-meter__fill--weak { background: var(--hairline-strong); }
.ds .s3-weight-edit { display: flex; align-items: center; gap: 12px; }

@media (max-width: 1100px) {
  .ds .s3-lex-groups { grid-template-columns: minmax(0, 1fr); }
  .ds .s3-sug-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ds .s3-set-grid { grid-template-columns: minmax(0, 1fr); }
  .ds .s3-item { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 4px 10px; }
  .ds .s3-item__main { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ds .s3-item__amt { min-width: 0; }
  .ds .s3-item__act { align-self: flex-start; margin-left: 14px; }
  .ds .s3-item__meta { order: 2; margin: 0 0 8px; padding-left: 14px; }
  .ds .s3-item__act { order: 3; }
  .ds .s3-chart-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ds .s3-item,
  .ds .s3-step,
  .ds .s3-pane,
  .ds .s3-acf-table.is-entering .s3-acf-row,
  .ds .s3-chart-svg.is-entering .s3-chart-col { animation: none; }
}

/* ---------- checks: the 02.10 layout in the kit's type and tones (staff pages only) ----------
   The check components are shared with the trader (css/checks/*); these rules apply under the staff page roots
   [data-staff-page^='check'] only: headings and facts at 500 (the kit's weight), the action block and the rail as
   kit cards, buttons in the kit's look (primary = the site's neutral pill, not the lime accent). */
.ds [data-staff-page^='check'] :is(.pc-section, .pc-section-title, .pc-card-title, .pc-keys-title, .pc-lead, .pc-claim,
  .pc-stateline b, .pc-stateline .is-danger, .pc-notice b, .pc-ev b, .pc-parsed b, .pc-who b, .pc-step.is-current,
  .pc-verdict-label, .pc-due-line, .pc-rlink, .pc-kb-title, .pc-keycap) { font-weight: 500; }
.ds [data-staff-page^='check'] .pc-h1 { font-weight: 400; letter-spacing: -0.02em; }
/* "Closed by" + the staff user's avatar and name on the state line (StaffActor), centred against the avatar */
.ds .pc-stateline .pc-closed-by { display: inline-flex; align-items: center; gap: 6px; align-self: center; }
.ds .pc-stateline .pc-closed-by::before { margin-right: 2px; }
.ds [data-staff-page^='check'] .pc-h1 .ds-money { font-size: inherit; }
.ds [data-staff-page^='check'] .pc-deadline.is-warning,
.ds [data-staff-page^='check'] .pc-deadline.is-danger { font-weight: 500; }

/* surfaces: the action block, the rail cards, the thread's card bubbles */
.ds [data-staff-page^='check'] :is(.pc-action, .pc-card) {
  border-radius: var(--ds-r-card);
  background: var(--surface);
  border-color: var(--hairline);
}
.ds [data-staff-page^='check'] .pc-action { border-color: color-mix(in srgb, var(--warning) 34%, var(--hairline)); }
.ds [data-staff-page^='check'] .pc-action-title { font-size: 18px; color: var(--text); }
.ds [data-staff-page^='check'] .pc-action-lead { font-size: 14px; color: var(--text-2); }

/* buttons */
.ds [data-staff-page^='check'] .pc-btn { font-weight: 500; font-size: 14px; }
.ds [data-staff-page^='check'] .pc-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.ds [data-staff-page^='check'] .pc-btn--primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); }
.ds [data-staff-page^='check'] .pc-btn--outline { border-color: var(--hairline-strong); color: var(--text); }
.ds [data-staff-page^='check'] .pc-btn--outline:hover:not(:disabled) { background: var(--wash-1); border-color: var(--hairline-hover); }
.ds [data-staff-page^='check'] .pc-btn--primary:disabled { border-color: var(--hairline-strong); color: var(--text-2); }
.ds [data-staff-page^='check'] .pc-keycap { background: var(--wash-1); border-color: var(--hairline-strong); color: var(--text); }
.ds [data-staff-page^='check'] .pc-crumbs { font-size: 13px; color: var(--text-2); }
.ds [data-staff-page^='check'] .pc-crumbs a { color: var(--text-2); text-decoration: none; }
.ds [data-staff-page^='check'] .pc-crumbs a:hover { color: var(--text); }
.ds [data-staff-page^='check'] .pc-crumbs .cur { font-weight: 500; color: var(--text); }
.ds [data-staff-page^='check'] .pc-meta-id { display: inline-flex; align-items: center; gap: 6px; }

/* queue */
.ds [data-staff-page='checks-queue'] .s3-pc-tabs { margin-bottom: 16px; }
.ds [data-staff-page='checks-queue'] .s3-pc-toolbar { margin-bottom: 14px; }
/* A search spans every queue: the cells stay clickable (a click ends the search) but read as not applied. */
.ds [data-staff-page='checks-queue'] .s3-pc-tabs.is-searching .ds-cell { opacity: .55; transition: opacity .15s; }
.ds [data-staff-page='checks-queue'] .s3-pc-tabs.is-searching .ds-cell:is(:hover, :focus-visible) { opacity: 1; }
.ds [data-staff-page='checks-queue'] .s3-pc-scope { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 13px; color: var(--text-2); }
.ds [data-staff-page='checks-queue'] .s3-pc-scope .ds-icon { flex: none; }
.ds .s3-pcq .pc-qrow td { font-size: 14px; }
.ds .s3-pcq :is(.pc-qid, .pc-qverdict) { font-weight: 500; }
.ds .s3-pcq .pc-qid { font-family: var(--font-mono); font-size: 13px; color: var(--text); text-decoration: none; }
.ds .s3-pcq .pc-qid:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds .s3-pcq .pc-qsub { display: block; font-size: 12px; font-weight: 400; color: var(--text-2); }
.ds .s3-pcq .pc-qamount { white-space: nowrap; }
.ds .s3-pcq .pc-qrow.is-cursor { background: var(--surface-hover); box-shadow: inset 2px 0 0 var(--accent); }
.ds .s3-pcq .pc-qrow.is-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--error); }

/* settings */
.ds .s3-pcs { display: flex; flex-direction: column; gap: 16px; }
.ds .s3-chat { display: flex; flex-direction: column; gap: 2px; }
.ds .s3-chat .ds-mono { font-size: 12px; }
.ds .s3-chlist { display: flex; flex-direction: column; gap: 6px; }
.ds .s3-chrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ds .s3-chrow:hover { border-color: var(--hairline-hover); background: var(--surface-hover); }
.ds .s3-chrow.is-selected { border-color: var(--accent); }
.ds .s3-chrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds .s3-chrow__main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ds .s3-chrow__meta { grid-column: 1; display: inline-flex; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-2); }
.ds .s3-chrow__meta > * + *::before { content: "·"; margin: 0 6px; }
.ds .s3-chrow__chev { grid-column: 2; grid-row: 1 / span 2; color: var(--text-2); }
.ds .s3-editor { margin-top: 16px; padding: 18px; border-radius: var(--ds-r-panel); background: var(--wash-1); display: flex; flex-direction: column; gap: 14px; }
.ds .s3-editor__title { margin: 0; font-size: 15px; font-weight: 500; color: var(--text); }
.ds .s3-editor__foot { display: flex; justify-content: flex-end; gap: 8px; }
.ds .s3-fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ds .s3-json { min-height: 280px; font-size: 12px; line-height: 1.55; }
.ds .s3-senders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ds .s3-sender { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 10px; border-radius: var(--ds-r-row); background: var(--surface); }
.ds .s3-sender__name { display: flex; flex-direction: column; font-size: 14px; color: var(--text); }
.ds .s3-sender__name .s3-muted { font-size: 12px; }
.ds .s3-roles { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--wash-1); border: 1px solid var(--hairline); }
.ds .s3-role {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ds .s3-role:hover:not(:disabled) { color: var(--text); }
.ds .s3-role.is-on { background: var(--segment-on); color: var(--text); box-shadow: var(--shadow-sm); }
.ds .s3-role:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ds .s3-role:disabled { opacity: 0.5; cursor: not-allowed; }
.ds .s3-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.ds .s3-test-result { margin-top: 4px; }

/* dispute auto-reply: the mode segments with the write-block status, the writes card */
.ds .s3-ar-mode { display: flex; flex-direction: column; gap: 6px; }
.ds .s3-ar-mode__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ds .s3-ar-mode__blocked { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--error); }
.ds .s3-ar-mode .s3-hint { margin: 0; }
/* The chosen mode reads at a glance: Auto in the accent (its own text colour on it in each theme), Ask first in
   the info tint, Off stays the plain segment. */
.ds .s3-ar-mode .s3-role.is-on[data-mode='Auto'] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.ds .s3-ar-mode .s3-role.is-on[data-mode='Assisted'] { background: color-mix(in srgb, var(--info) 14%, var(--surface)); color: var(--info); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 40%, transparent); }
.ds .s3-ar-mode .s3-role.is-on[data-mode='Off'] { font-weight: 600; }
.ds .s3-ar-writes__error { margin-top: 12px; }
.ds .s3-ar-writes__tech { margin-top: 12px; font-size: 12px; color: var(--text-2); }
.ds .s3-ar-writes__tech > summary { cursor: pointer; width: max-content; max-width: 100%; }
.ds .s3-ar-writes__tech > p { margin: 6px 0 0; overflow-wrap: anywhere; }
/* The state and its button wrap under the title on a phone instead of running off the card. */
.ds .s3-ar-writes .ds-card__actions { flex-wrap: wrap; min-width: 0; }
/* Telegram paused writing: the card's frame says it too. */
.ds .s3-ar-writes.is-paused { border-color: color-mix(in srgb, var(--error) 55%, var(--hairline)); }
/* The relay card on the check page in the kit's tones (the kit card rule above sets a hairline border). */
.ds [data-staff-page^='check'] .pc-ar.is-danger { border-color: color-mix(in srgb, var(--error) 45%, var(--hairline)); }
.ds [data-staff-page^='check'] .pc-ar.is-info { border-color: color-mix(in srgb, var(--info) 40%, var(--hairline)); }
.ds [data-staff-page^='check'] .pc-ar.is-success { border-color: color-mix(in srgb, var(--success) 40%, var(--hairline)); }
.ds [data-staff-page^='check'] :is(.pc-ar-steptitle, .pc-ar-dotext) { font-weight: 500; }

@media (max-width: 760px) {
  .ds .s3-fields-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- phones: toolbars and stacked cards ---------- */
.ds :is(.s3-dev-toolbar, .s3-acf-toolbar) .ds-tabs--segment { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ds :is(.s3-dev-toolbar, .s3-acf-toolbar) .ds-tabs--segment::-webkit-scrollbar { display: none; }
.ds table.rt--stacked :is(.s3-dev__name, .s3-dev__meta) { white-space: normal; }
.ds table.rt--stacked .s3-dev__meta { flex-wrap: wrap; }
.ds table.rt--stacked .s3-dev__meta .s3-muted { max-width: none; }
@media (max-width: 640px) {
  .ds :is(.s3-dev-toolbar, .s3-acf-toolbar) .ds-toolbar__filters > * { min-width: 0; }
  .ds :is(.s3-dev-toolbar, .s3-acf-toolbar) .ds-toolbar__filters > :is(.ds-tabs--segment, .ds-toggle) { grid-column: 1 / -1; }
}

.ds [data-staff-page^="check"] .pc-card-link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* stacked rows: the tone rim belongs to the card, not to its first cell */
.ds table.rt--stacked tr:is(.s3-dev-row, .s3-acf-row) > td:first-child { box-shadow: none; }
.ds table.rt--stacked tr.s3-acf-row:is(.s3-tone-warn, .s3-tone-bad) { box-shadow: inset 3px 0 0 var(--s3-tone); }

/* The queue and the relay settings use the page width like every other staff list (the 1320px centred column
   of the shared .pc-page left a wider gutter than the rest of the admin). */
.ds .pc-page--wide:is([data-staff-page='checks-queue'], [data-staff-page='checks-settings']) {
  max-width: none;
  margin: 0;
}

/* detail groups in this flex body: the body's gap spaces them, 12 px like every sheet (DS.md, "Detail views") */
.ds .s3-sheet .ds-sheet__body:has(> .ds-dg) {
  gap: 12px;
}
.ds .s3-sheet .ds-sheet__body > .ds-dg {
  margin-top: 0;
}
/* OrderFactsCard as a detail group: the order id in the group header keeps its mono look */
.ds .pc-facts .ds-dg__actions .pc-card-side .copy-id {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}
/* ================================================================
   Staff package S5, the network catalogue: payment methods registry (Admin/Cards + CardOverviewDrawer),
   cascade providers (CascadeTraders, UsersCascade, Network/CascadeProviders, CascadeTraderDetailDrawer,
   CreateCascadeTraderModal), methods and banks (PaymentMethods), the trader registry
   (Traders) and CreateUserModal.
   Owned by that package only. Rules: DS.md. Page parts key on the page root [data-staff-page]; the sheets
   render outside it and key on their own class (.sn-sheet, .sn-create); the page-local components
   (NetBand, NetBandFilter, GeoFlagMark) key on their sn- class. Colours only from ds/tokens.css.
   Prefix: sn- (staff network).
   ================================================================ */

/* ---------- table cells: a value over a quiet second line ---------- */
/* staff registries carry 9-10 columns: a tighter side padding keeps them inside 1280 px */
.ds [data-staff-page] .sn-table thead th,
.ds [data-staff-page] .sn-table tbody td {
  padding-left: 12px;
  padding-right: 12px;
}
.ds [data-staff-page] .sn-table thead th:first-child,
.ds [data-staff-page] .sn-table tbody td:first-child {
  padding-left: 16px;
}
.ds [data-staff-page] .sn-table thead th:last-child,
.ds [data-staff-page] .sn-table tbody td:last-child {
  padding-right: 16px;
}
.ds [data-staff-page] .sn-main,
.ds .sn-sheet .sn-main {
  display: block;
}
.ds [data-staff-page] .sn-nowrap {
  white-space: nowrap;
}
.ds [data-staff-page] .sn-strong {
  font-weight: 500;
}
.ds [data-staff-page] .sn-sub,
.ds .sn-sheet .sn-sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}
.ds [data-staff-page] .sn-sub .ds-status {
  font-size: 13px;
}
.ds [data-staff-page] .sn-muted,
.ds .sn-sheet .sn-muted,
.ds .sn-create .sn-muted {
  color: var(--text-2);
}
.ds [data-staff-page] .sn-of {
  font-weight: 400;
  color: var(--text-2);
}
.ds [data-staff-page] .sn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
}
.ds [data-staff-page] .sn-sub.sn-line {
  display: flex;
}
/* registry row found by a requisite the trader has since replaced */
.ds [data-staff-page] .sn-sub.sn-former {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--warning);
}
.ds [data-staff-page] .sn-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds [data-staff-page] .sn-num .sn-line {
  display: flex;
  justify-content: flex-end;
}
.ds [data-staff-page] .sn-table .ds-entity.sn-id {
  font-size: 12px;
}
.ds [data-staff-page] .sn-table .ds-money {
  font-variant-numeric: tabular-nums;
}
/* a text button / link that reads as part of the value (requisites count, a method's banks) */
.ds [data-staff-page] .sn-textlink {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.ds [data-staff-page] .sn-textlink:hover {
  text-decoration-color: currentColor;
}
.ds [data-staff-page] .sn-textlink:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.ds [data-staff-page] .sn-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.ds [data-staff-page] .sn-actions .ds-btn + .ds-btn {
  margin-left: 2px;
}
.ds [data-staff-page] .sn-note {
  max-width: 76ch;
  margin: -4px 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
/* the person in a registry row: avatar, name over key */
.ds [data-staff-page] .sn-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ds [data-staff-page] .sn-person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds [data-staff-page] .sn-online {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-tint);
}
/* an Atlas Label trader (DS.md, "Atlas Label in lists"): the name and the mark in the accent at 600, the
   written-out "Atlas label" in the accent's text cut */
.ds [data-staff-page] .sn-atlas {
  font-weight: 600;
  color: var(--accent-soft-text);
}
.ds [data-staff-page] .sn-atlas-name,
.ds [data-staff-page] a.sn-atlas-name:hover {
  font-weight: 600;
  color: var(--accent);
}
.ds [data-staff-page] a.sn-atlas-name {
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.ds [data-staff-page] a.sn-atlas-name:hover {
  text-decoration-color: currentColor;
}
.ds [data-staff-page] .atlas-mark.sn-atlas-mark {
  color: var(--accent);
}
.ds [data-staff-page] .sn-atlas::before {
  content: "·";
  margin-right: 8px;
  font-weight: 400;
  color: var(--text-2);
}

/* geo: a flag alone (GeoFlagMark) and the labelled GeoTag, no chip */
.ds .sn-flag {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--flag-ring);
  vertical-align: middle;
}
.ds [data-staff-page] .geo-tags,
.ds .sn-sheet .geo-tags,
.ds .sn-create .geo-tags {
  display: inline-flex;
  gap: 8px;
}
.ds [data-staff-page] .geo-tag,
.ds .sn-sheet .geo-tag,
.ds .sn-create .geo-tag {
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.ds [data-staff-page] .geo-tag-flag,
.ds .sn-sheet .geo-tag-flag,
.ds .sn-create .geo-tag-flag {
  width: 18px;
  height: 13px;
  box-shadow: 0 0 0 1px var(--flag-ring);
}
.ds .sn-sheet .ds-sheet__meta .geo-tag {
  font-size: 14px;
  color: var(--text-2);
}

/* ---------- NetBand: the owner's balance as a five-step meter ---------- */
.ds .sn-band {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}
.ds .sn-band__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.ds .sn-band__bar {
  width: 3px;
  border-radius: 1px;
  background: var(--hairline-strong);
}
.ds .sn-band__bar:nth-child(1) { height: 4px; }
.ds .sn-band__bar:nth-child(2) { height: 6px; }
.ds .sn-band__bar:nth-child(3) { height: 8px; }
.ds .sn-band__bar:nth-child(4) { height: 10px; }
.ds .sn-band__bar:nth-child(5) { height: 12px; }
/* Balance bands as a signal-strength scale: five colours on one progression, red → orange → yellow → green → emerald.
   Level 4 is a true green, not lime, so it never reads as the dark theme's lime accent. */
.ds {
  --sn-band-1: #f87171;
  --sn-band-2: #fb923c;
  --sn-band-3: #facc15;
  --sn-band-4: #4ade80;
  --sn-band-5: #10b981;
}
:root[data-theme='light'].ds,
:root[data-theme='light'] .ds {
  --sn-band-1: #dc2626;
  --sn-band-2: #ea580c;
  --sn-band-3: #ca8a04;
  --sn-band-4: #16a34a;
  --sn-band-5: #047857;
}
.ds .sn-band--l1 .sn-band__bar.is-on { background: var(--sn-band-1); }
.ds .sn-band--l2 .sn-band__bar.is-on { background: var(--sn-band-2); }
.ds .sn-band--l3 .sn-band__bar.is-on { background: var(--sn-band-3); }
.ds .sn-band--l4 .sn-band__bar.is-on { background: var(--sn-band-4); }
.ds .sn-band--l5 .sn-band__bar.is-on { background: var(--sn-band-5); }
.ds .sn-band--l0 .sn-band__bar.is-on { background: var(--text-2); }
/* the meter after the Available amount in a trader's KPI tile (UserDetail) */
.ds .sn-kpi-band {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ds .sn-band__name {
  font-size: 13px;
  color: var(--text-2);
}

/* ---------- NetBandFilter: a legend whose cells filter the table ---------- */
.ds .sn-legend {
  min-width: 0;
  margin-bottom: 16px;
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
.ds .sn-legend__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-bottom: 12px;
}
.ds .sn-legend__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.ds .sn-legend__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}
.ds .sn-legend__cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}
.ds .sn-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ds .sn-cell:hover {
  background: var(--wash-1);
  border-color: var(--hairline-strong);
}
.ds .sn-cell.is-on {
  background: var(--segment-on);
  border-color: var(--accent);
}
.ds .sn-cell:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .sn-cell__top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.ds .sn-cell__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds .sn-cell__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ds .sn-cell__sub {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sn-cell__count {
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* two legends side by side (traders: balance + deposit) */
.ds [data-staff-page] .sn-legends {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
  gap: 12px;
  margin-bottom: 16px;
}
.ds [data-staff-page] .sn-legends .sn-legend {
  margin-bottom: 0;
}
@media (max-width: 1100px) {
  .ds [data-staff-page] .sn-legends {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- sheets (card overview, cascade provider) ---------- */
.ds .sn-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ds .sn-sheet-body .ds-section + .ds-section {
  margin-top: 0;
}
.ds .sn-sheet-body .ds-kpi-row {
  margin-bottom: 0;
}
.ds .sn-sheet .ds-section__head {
  margin-bottom: 10px;
}
.ds .sn-sheet .ds-section__head .ds-h2 {
  font-size: 16px;
}
.ds .sn-sheet .ds-sheet__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.ds .sn-funds .ds-kpi__value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.ds .sn-sheet .sn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds .sn-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.ds .sn-foot-hint {
  flex: 1 1 220px;
  margin: 0 auto 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}

/* performance by window */
.ds .sn-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
}
.ds .sn-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ds .sn-matrix th,
.ds .sn-matrix td {
  padding: 8px 14px;
  text-align: right;
  white-space: nowrap;
}
.ds .sn-matrix thead th {
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 1px solid var(--hairline);
}
.ds .sn-matrix tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--text-2);
}
.ds .sn-matrix tbody tr:nth-child(even) {
  background: var(--wash-1);
}
.ds .sn-facts {
  margin-top: 16px;
}

/* compact lists inside a sheet: recent pay-ins, history, assigned merchants */
.ds .sn-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .sn-row {
  display: grid;
  align-items: center;
  gap: 6px 16px;
  min-width: 0;
  padding: 10px 0;
  font-size: 14px;
}
.ds .sn-row + .sn-row {
  border-top: 1px solid var(--hairline);
}
.ds .sn-row--payin {
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto minmax(110px, auto) auto;
}
.ds .sn-row--history {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.ds .sn-row--merchant {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 6px 0;
}
.ds .sn-row__who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
.ds .sn-row--merchant .sn-row__who {
  color: var(--text);
}
.ds .sn-row__what {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.ds .sn-row__arrow {
  color: var(--text-2);
}
.ds .sn-row__amount {
  justify-self: end;
}
.ds .sn-row__time {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}
.ds .sn-none {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}

/* cascade: per-geo working capital */
.ds .sn-geo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.ds .sn-geo {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .sn-geo__head {
  margin-bottom: 10px;
  font-weight: 500;
}
.ds .sn-geo__key .ds-money {
  font-weight: 600;
}
.ds .sn-toggles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .sn-assign {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.ds .sn-assign__field {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- forms (sheets) ---------- */
.ds .sn-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ds .sn-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ds .sn-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.ds .sn-fieldset {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ds .sn-fieldset__title {
  margin: 0 0 12px;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds .sn-fieldset__hint {
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .sn-spreads {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds .sn-spreads__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px 12px;
}
.ds .sn-spreads__head {
  align-items: center;
  font-size: 13px;
  color: var(--text-2);
}
/* cells sit on the input's 40px line, so an error under one input doesn't shift the row */
.ds .sn-spreads__name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
}
.ds .sn-spreads__name .ds-mono {
  font-size: 12px;
}
/* TraderSpreadsEditor: a switch per method; switched off, the defaults read across both spread columns */
.ds .sn-spreads__toggle {
  display: flex;
  align-items: center;
  min-height: 40px;
}
.ds .sn-spreads__code {
  color: var(--text-2);
}
.ds .sn-spreads__off {
  grid-column: 3 / -1;
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 13px;
  color: var(--text-2);
}
/* a key shown once */
.ds .sn-keybox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
}
.ds .sn-keybox__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sn-keybox__key .ds-id__text {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* ---------- narrow screens ---------- */
@media (max-width: 720px) {
  .ds .sn-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .sn-row--payin {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ds .sn-row--payin .sn-row__who,
  .ds .sn-row--payin .sn-row__time {
    grid-column: 1;
  }
  .ds .sn-row--history {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ds .sn-row--history .sn-row__what {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .ds .sn-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* a method stacks: switch and name on top, the two spreads under the name */
  .ds .sn-spreads__row {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  }
  .ds .sn-spreads__name,
  .ds .sn-spreads__off {
    grid-column: 2 / -1;
  }
  /* stacked: the defaults line sits under the name, not on an input's line */
  .ds .sn-spreads__off {
    min-height: 0;
  }
  .ds .sn-spreads__in {
    grid-column: 2;
  }
  .ds .sn-spreads__out {
    grid-column: 3;
  }
  .ds .sn-spreads__head .sn-spreads__hname {
    display: none;
  }
  .ds [data-staff-page] .sn-num {
    text-align: left;
  }
  .ds [data-staff-page] .sn-num .sn-line {
    justify-content: flex-start;
  }
  .ds .sn-assign {
    flex-direction: column;
    align-items: stretch;
  }
}
/* detail groups in the card sheet: 12 px apart like every sheet (DS.md, "Detail views") */
.ds .sn-sheet-body:has(> .ds-dg),
.ds .sn-split:has(> .ds-dg) {
  gap: 12px;
}
/* ================================================================
   Cascade provider cabinet, package C: /cascade-trader/* (dashboard, pay-ins, pay-outs, disputes,
   balances, accounting, connection status, activity log, settings) and Components/Cascade/*
   (CascadeOrderList, CascadeOrderSheet). Rules: DS.md. Every selector under .ds with the prefix cas-
   (sheets render outside the page root), colours only from ds/tokens.css, kit components first;
   page-only layout here. Same rhythm as the trader cabinet (trader-b.css, trader-home.css).
   ================================================================ */

/* ---------- page rhythm: head → KPIs → tabs → toolbar → list ---------- */
.ds .cas-page {
  min-width: 0;
}
.ds .cas-page .cas-kpis {
  margin-bottom: 28px;
}
.ds .cas-page .cas-tabs {
  margin-bottom: 16px;
}
.ds .cas-block {
  margin-bottom: 24px;
}
.ds .cas-block-top {
  margin-top: 12px;
}
.ds .cas-muted {
  color: var(--text-2);
}
.ds .cas-small {
  font-size: 12px;
}
.ds .cas-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* a sum across currencies: digits only, sized like DsMoney */
.ds .cas-plain {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds .cas-plain--lg {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ds .cas-plain--sm {
  font-size: 13px;
}
.ds .cas-neg {
  color: var(--error);
}
.ds .cas-geo-dd {
  min-width: 0;
}

/* ---------- table cells ---------- */
.ds .cas-cell-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.ds .cas-sub-id {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
/* an order id that opens the order (activity log): text colour, a hairline underline on hover */
.ds a.cas-link {
  color: var(--text);
  text-decoration: none;
}
.ds a.cas-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.ds a.cas-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.ds .cas-card-only {
  display: none;
}
.ds table.rt--stacked .cas-card-only {
  display: block;
}
.ds .cas-row-when {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-2);
}
.ds .cas-orders .ds-money--stack .ds-money__approx,
.ds .cas-events .ds-money--stack .ds-money__approx {
  font-size: 12px;
}
.ds .pg-table:not(.rt--stacked) td.cas-num .ds-money {
  justify-content: flex-end;
}
.ds .pg-table:not(.rt--stacked) td[data-cell="amount"] {
  white-space: nowrap;
}
/* the provider's raw answer (an error row): one line in the table, whole in the sheet */
.ds .cas-answer {
  display: block;
  max-width: 360px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds table.rt--stacked .cas-answer {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ds .cas-row--error td[data-cell="primary"] .ds-mono {
  color: var(--text);
}

/* ---------- order sheet ---------- */
.ds .cas-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: start;
  padding: 20px;
  margin-bottom: 20px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .cas-hero__main {
  min-width: 0;
}
.ds .cas-hero__sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .cas-hero__sub .ds-money {
  color: var(--text-2);
}
.ds .cas-hero__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}
.ds .cas-hero__when {
  font-size: 13px;
  color: var(--text-2);
}
.ds .cas-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.ds .cas-hero__label,
.ds .cas-hero__hint {
  font-size: 13px;
  color: var(--text-2);
}
.ds .cas-group + .cas-group {
  margin-top: 24px;
}
.ds .cas-group__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.ds .cas-group__hint {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

/* ---------- dashboard ---------- */
.ds .cas-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
/* the period headline on the left, the six KPIs beside it (as the trader dashboard) */
.ds .cas-dash-top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr);
  gap: 12px;
  align-items: stretch;
}
.ds .cas-dash-top .ds-kpi-row {
  margin-bottom: 0;
}
.ds .cas-dash-top .ds-loading + .ds-loading .ds-kpi-row {
  margin-top: 12px;
}
.ds .cas-dash-top + .ds-loading {
  margin-top: 12px;
}
.ds .cas-skel-hero .ds-skel--block {
  height: 100%;
  min-height: 150px;
}
.ds .cas-hero-card .ds-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 22px 24px;
}
.ds .cas-hero-card__label,
.ds .cas-hero-card__period {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .cas-hero-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .cas-hero-card__pct {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ds .cas-hero-card__pct.is-good {
  color: var(--success);
}
.ds .cas-hero-card__pct.is-bad {
  color: var(--error);
}
.ds .cas-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ds .cas-chart .ds-card__body {
  padding: 8px 16px 16px;
}

/* ---------- balances ---------- */
.ds .cas-bal .ds-card__body {
  padding: 0;
}
.ds .cas-bal__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 18px 24px;
}
.ds .cas-bal__id {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .cas-bal__name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .cas-bal__role {
  font-size: 13px;
  color: var(--text-2);
}
.ds .cas-bal__geo {
  border-top: 1px solid var(--hairline);
}
.ds .cas-bal__geohead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px 24px 0;
}
.ds .cas-bal__country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds .cas-flag {
  width: 18px;
  height: auto;
  border-radius: 2px;
}
.ds .cas-rates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  font-size: 13px;
}
.ds .cas-rates__item {
  display: flex;
  gap: 6px;
}
.ds .cas-rates dt {
  color: var(--text-2);
}
.ds .cas-rates dd {
  margin: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ds .cas-bal__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
}
.ds .cas-bal__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 16px 24px 20px;
}
.ds .cas-bal__col + .cas-bal__col {
  border-left: 1px solid var(--hairline);
}
.ds .cas-bal__label {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .cas-bal__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .cas-bal__credit {
  margin: 0 24px 20px;
  padding: 14px 16px;
  background: var(--wash-1);
  border-radius: var(--ds-r-panel);
}
.ds .cas-history {
  margin-top: 8px;
}
.ds .cas-desc {
  min-width: 180px;
}

/* ---------- connection status ---------- */
.ds .cas-conn .ds-card__body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
  gap: 20px 32px;
  align-items: center;
  padding: 22px 24px;
}
.ds .cas-conn__state {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.ds .cas-conn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.ds .cas-conn__headline {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

/* ---------- accounting ---------- */
.ds .cas-acc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.ds .cas-acc-grid .ds-card {
  min-width: 0;
}

/* ---------- settings ---------- */
.ds .cas-set-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  max-width: 1200px;
}
.ds .cas-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .cas-note--top {
  margin: 0 0 16px;
  font-size: 14px;
}
.ds .cas-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
}
.ds .cas-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ds .cas-set-grid .ds-detail-list + .cas-form__actions {
  margin-top: 16px;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ds .cas-dash-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .cas-set-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .ds .cas-charts,
  .ds .cas-acc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .cas-conn .ds-card__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .ds .cas-bal__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ds .cas-bal__col--main {
    grid-column: 1 / -1;
  }
  .ds .cas-bal__col + .cas-bal__col {
    border-left: 0;
  }
  .ds .cas-bal__col--main + .cas-bal__col + .cas-bal__col {
    border-left: 1px solid var(--hairline);
  }
}
@media (max-width: 720px) {
  .ds .cas-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .ds .cas-hero__side {
    align-items: flex-start;
    padding-top: 14px;
    text-align: left;
    border-top: 1px solid var(--hairline);
  }
}
@media (max-width: 640px) {
  .ds .cas-period {
    justify-content: flex-start;
    width: 100%;
  }
  .ds .cas-bal__who {
    padding: 16px 16px 16px 18px;
  }
  .ds .cas-bal__geohead {
    padding: 14px 18px 0;
  }
  .ds .cas-bal__col {
    padding: 14px 18px 16px;
  }
  .ds .cas-bal__credit {
    margin: 0 18px 18px;
  }
  .ds .cas-conn .ds-card__body {
    padding: 18px;
  }
  .ds .cas-conn__headline {
    font-size: 15px;
  }
}
/* ================================================================
   Staff package S1: Overview and Finance. Dashboard, Analytics,
   Profit & loss, Atlas Label, Withdrawals, Merchant settlements and
   their sheets; the staff-only parts they render (merchant rates,
   revenue charts, P&L and label blocks, hot wallet, Telegram link code).
   Owned by that package only. Rules: DS.md. Every selector under .ds,
   prefix sfn- (the sheets render outside the page root); colours only
   from ds/tokens.css (+ the chart aliases in ds/charts.css).
   ================================================================ */

/* ---------- shared bits ---------- */
.ds {
  /* the Atlas Label's income colour: its own series token (charts.css), violet in both themes */
  --alb-diff: var(--ds-series-atlas);
}
.ds .sfn-page {
  min-width: 0;
}
.ds .sfn-muted {
  color: var(--text-2);
}
.ds .sfn-strong {
  font-weight: 500;
  color: var(--text);
}
.ds .sfn-block {
  margin-bottom: 32px;
}
.ds .sfn-block .ds-kpi-row:last-child {
  margin-bottom: 0;
}
.ds .sfn-delta {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ds .sfn-delta.is-good {
  color: var(--success);
}
.ds .sfn-delta.is-bad {
  color: var(--error);
}
.ds .sfn-notes {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}
.ds .sfn-notes p {
  margin: 0;
  max-width: 880px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .sfn-flag {
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--flag-ring, var(--hairline));
}

/* ---------- dashboard head: period, party filter ---------- */
.ds .sfn-party {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds .sfn-party__dd {
  min-width: 0;
}
.ds .sfn-scope {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: -8px 0 24px;
  font-size: 14px;
  color: var(--text-2);
}
.ds .sfn-skel-rates .ds-skel--block {
  height: 196px;
  margin-bottom: 32px;
}
.ds .sfn-skel-chart .ds-skel--block {
  height: 320px;
}

/* ---------- exchange rates ---------- */
.ds .sfn-rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.ds .sfn-rate {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
  font-variant-numeric: tabular-nums;
}
.ds .sfn-rate.is-frozen {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
.ds .sfn-rate__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds .sfn-rate__pair {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.ds .sfn-rate__geo {
  margin-left: auto;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .sfn-rate__frozen {
  margin: 0;
}
.ds .sfn-rate__facts {
  display: grid;
  gap: 6px;
  margin: 0;
}
.ds .sfn-rate__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ds .sfn-rate__fact dt {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-rate__fact dd {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.ds .sfn-rate__fact .sfn-muted {
  margin-left: 6px;
  font-size: 13px;
}
/* the bid side green, the ask side red, the spread percent in the same tone (kit .ds-bid / .ds-ask) */
.ds .sfn-rate__fact dd.ds-bid,
.ds .sfn-quotes .ds-bid {
  color: var(--success);
  font-weight: 600;
}
.ds .sfn-rate__fact dd.ds-ask,
.ds .sfn-quotes .ds-ask {
  color: var(--error);
  font-weight: 600;
}
.ds .sfn-rate__pct {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
}
.ds .sfn-rate__capped {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds .sfn-rate__capped .ds-icon {
  color: var(--text-2);
}
.ds .sfn-quotes {
  width: 100%;
  margin-top: auto;
  border-collapse: collapse;
  font-size: 13px;
}
.ds .sfn-quotes thead th {
  padding: 0 0 6px;
  font-weight: 400;
  color: var(--text-2);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}
.ds .sfn-quotes th.is-num,
.ds .sfn-quotes td.is-num {
  width: 1%;
  padding-left: 14px;
  text-align: right;
  white-space: nowrap;
}
.ds .sfn-quotes tbody th,
.ds .sfn-quotes tbody td {
  padding: 6px 0 0;
  color: var(--text);
}
.ds .sfn-quotes tbody th {
  max-width: 0;
  overflow: hidden;
  font-weight: 400;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .sfn-quotes tbody td.is-num {
  padding-left: 14px;
}
.ds .sfn-quotes__note {
  margin-left: 6px;
  color: var(--text-2);
}

/* ---------- KPI extras: a link tile, the sparkline, the source key dot ---------- */
.ds .sfn-kpi-link {
  display: block;
  min-width: 0;
  border-radius: var(--ds-r-panel);
  color: inherit;
  text-decoration: none;
}
.ds .sfn-kpi-link > .ds-kpi {
  height: 100%;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ds .sfn-kpi-link:hover > .ds-kpi {
  border-color: var(--hairline-hover);
  background: var(--surface-hover);
}
.ds .sfn-kpi-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .sfn-spark {
  display: block;
  height: 26px;
  margin-top: 10px;
}
.ds .sfn-spark .sparkline-svg {
  height: 26px;
  stroke-width: 1.5;
}
/* a revenue source or expense tile: its icon square takes the source's chart colour (the donut's legend) */
.ds .sfn-src .ds-kpi__icon {
  --kpi-tone: var(--sfn-dot, var(--ds-chart-neutral));
}
.ds .sfn-src--trader,
.ds .sfn-src--trader-pi { --sfn-dot: var(--rev-trader); }
.ds .sfn-src--trader-po { --sfn-dot: var(--rev-trader-po); }
.ds .sfn-src--cascade { --sfn-dot: var(--rev-cascade); }
.ds .sfn-src--fx,
.ds .sfn-src--fx-pi { --sfn-dot: var(--rev-fx); }
.ds .sfn-src--fx-po { --sfn-dot: var(--rev-fx-po); }
.ds .sfn-src--settlement { --sfn-dot: var(--rev-settlement); }
.ds .sfn-src--expense { --sfn-dot: var(--pnl-expense); }
.ds .sfn-src--expense-ref { --sfn-dot: var(--pnl-expense-ref); }
.ds .sfn-src--expense-aff { --sfn-dot: var(--pnl-expense-aff); }
.ds .sfn-src--label { --sfn-dot: var(--alb-diff); }
/* the P&L income pane's Atlas Label line: its mark takes the label's violet where the sources show their dot */
.ds .alb-pnl-mark {
  color: var(--alb-diff);
}
.ds .alb-pnl-mark .atlas-mark-core {
  fill: var(--alb-diff);
}

.ds .sfn-page .ds-kpi--ok .ds-money,
.ds .sfn-page .ds-kpi--ok .ds-money__usdt {
  color: var(--success);
}
.ds .sfn-page .ds-kpi--bad .ds-money,
.ds .sfn-page .ds-kpi--bad .ds-money__usdt {
  color: var(--error);
}
.ds .sfn-page .ds-kpi--warn .ds-money {
  color: var(--warning);
}
/* the donut centre: sentence case like every other label */
.ds .rev-donut-center-label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

/* ---------- chart cards ---------- */
.ds .sfn-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ds .sfn-chart {
  min-width: 0;
}
.ds .sfn-chart .ds-card__body {
  padding-top: 12px;
}
.ds .sfn-chart--flat .ds-card__body {
  padding-top: 20px;
}
.ds .sfn-chart + .ds-kpi-row {
  margin-top: 12px;
}

/* ---------- revenue ---------- */
.ds .sfn-rev {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.ds .sfn-hero-figure {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}
.ds .sfn-hero-foot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-rev__donut .ds-card__body {
  padding-top: 16px;
}

/* ---------- the money equation: income − costs = net (P&L, Atlas Label) ---------- */
.ds .sfn-eq-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px clamp(20px, 4vw, 48px);
  margin-bottom: 20px;
}
.ds .sfn-eq {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: start;
  align-items: start;
  column-gap: clamp(14px, 2.4vw, 36px);
  min-width: 0;
}
.ds .sfn-eq__term,
.ds .sfn-eq__side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ds .sfn-eq__side {
  padding-left: clamp(16px, 2.4vw, 32px);
  border-left: 1px solid var(--hairline);
}
.ds .sfn-eq__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-eq__value {
  --usdt-size: 0.55em;
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}
.ds .sfn-eq__term.is-net .sfn-eq__value {
  font-weight: 500;
}
.ds .sfn-eq__op {
  padding-top: 24px;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-2);
}
.ds .sfn-eq__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- the finance books: Profit & loss, Atlas Label ---------- */
.ds .sfn-books {
  gap: 16px;
}
.ds .sfn-books > .ds-page-head {
  margin-bottom: 8px;
}
.ds .sfn-eq-card .sfn-eq {
  margin: 0;
}
.ds .sfn-eq-card.is-busy,
.ds .sfn-books .ds-table-frame:has(table[aria-busy='true']) {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.ds .sfn-books .card.pnl-card {
  padding: 20px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-card);
  box-shadow: var(--surface-shadow);
}
.ds .sfn-books .pnl-card-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
}
.ds .sfn-books .pnl-card-note,
.ds .sfn-books .pnl-row-count,
.ds .sfn-books .pnl-row-share {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-books .pnl-table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.ds .sfn-books .pnl-table-section {
  gap: 14px;
}
.ds .sfn-books .ds-toolbar__filters .ds-toggle {
  margin-left: 4px;
}
.ds .sfn-keys {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds .sfn-key::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sfn-dot, var(--ds-chart-neutral));
}
.ds .sfn-key--label { --sfn-dot: var(--alb-diff); }
.ds .sfn-key--expense { --sfn-dot: var(--pnl-expense); }

/* ---------- merchant rates card (AdminMerchantRatesCard) ----------
   One row per merchant of the chosen geo in a strict grid (pay-in and pay-out: merchant rate,
   trader rate, spread; the FX margin with its share of the geo's total). The head holds the
   geo's summary and the geo switch. Below 720px of card width each row is a compact card. */
.ds .amr .ds-card__actions {
  flex: 1 1 100%;
  min-width: 0;
}
.ds .amr-head {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  min-width: 0;
}
.ds .amr-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px 0;
  margin: 0;
}
.ds .amr-sum__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 18px;
  border-left: 1px solid var(--hairline);
}
.ds .amr-sum__item:first-child {
  padding-left: 0;
  border-left: 0;
}
.ds .amr-sum__item:last-child {
  padding-right: 0;
}
.ds .amr-sum dt {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.ds .amr-sum dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds .amr-sum__item--fx dd .ds-money {
  font-size: 16px;
  font-weight: 600;
  color: var(--success);
}
.ds .amr-sum__item--bad dd {
  color: var(--error);
}
.ds .amr-sum__range {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ds .amr-sum__dots {
  font-weight: 450;
  color: var(--text-2);
}
.ds .amr-tone--ok {
  color: var(--success);
}
.ds .amr-tone--bad {
  color: var(--error);
}
.ds .amr-tone--idle {
  color: var(--text-2);
}
.ds .amr-geos {
  max-width: 100%;
  overflow-x: auto;
}
.ds .amr-geo1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ds-control-h-sm);
  padding: 0 12px;
  border-radius: var(--ds-r-row);
  background: var(--wash-1);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.ds .amr-flag {
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
}

/* a phone: the summary is a 2-column grid, no dividers */
@media (max-width: 640px) {
  .ds .amr-head {
    align-items: stretch;
  }
  .ds .amr-sum {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    width: 100%;
  }
  .ds .amr-sum__item,
  .ds .amr-sum__item:first-child,
  .ds .amr-sum__item:last-child {
    padding: 0;
    border-left: 0;
  }
}

/* the table: a strict grid. Merchant | Pay-in: merchant, trader, spread | Pay-out: the same |
   FX margin. Fixed column widths, every number right-aligned and tabular, every rate cell two lines
   (the rate, one muted mode word), so rows share one height and columns line up. A hairline opens
   each group. When the card is narrower than the table, the table scrolls sideways inside it. */
.ds .amr-wrap {
  container: amr / inline-size;
  border-top: 1px solid var(--hairline);
}
.ds .amr-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.ds .amr-skel,
.ds .amr-empty {
  border-top: 1px solid var(--hairline);
}
/* the skeleton runs edge to edge like the table it stands for, not as a framed panel */
.ds .amr .amr-skel {
  padding: 4px 8px 8px;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}
.ds .amr-wrap .amr-table.pg-table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
  border-collapse: collapse;
}
.ds .amr-wrap .amr-table--nofx.pg-table {
  min-width: 960px;
}
.ds .amr-col-rate {
  width: 120px;
}
.ds .amr-col-spread {
  width: 96px;
}
.ds .amr-col-fx {
  width: 168px;
}
.ds .amr-g-start {
  border-left: 1px solid var(--hairline);
}

/* two-level head: the group over its three columns, the columns under it */
.ds .amr-table thead th {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds .amr-table .amr-hgroup th {
  padding: 12px 16px 8px;
  vertical-align: bottom;
}
.ds .amr-table .amr-hgroup th.amr-h-name {
  text-align: left;
}
.ds .amr-table .amr-hgroup th[rowspan] {
  padding-bottom: 10px;
}
.ds .amr-table th.amr-h-group {
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.ds .amr-table .amr-hsub th {
  padding: 8px 16px 10px;
}
.ds .amr-table thead th:first-child,
.ds .amr-table tbody td:first-child {
  padding-left: 24px;
}
.ds .amr-table thead th.amr-h-fx,
.ds .amr-table tbody td:last-child {
  padding-right: 24px;
}

/* body */
.ds .amr-table tbody td {
  padding: 13px 16px;
  vertical-align: top;
}
.ds .amr-table tbody td.amr-c-name {
  vertical-align: middle;
}
.ds .amr-c-name .mmark {
  max-width: 100%;
}
.ds .amr-c-name .mmark-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* a rate: the figure over one muted mode word, both right-aligned */
.ds .amr-c-rate,
.ds .amr-c-spread,
.ds .amr-c-fx {
  text-align: right;
}
.ds .amr-rate {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  max-width: 100%;
  cursor: help;
}
.ds .amr-rate__num,
.ds .amr-spread,
.ds .amr-fx .ds-money {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds .amr-rate__num {
  color: var(--text);
}
.ds .amr-rate__num.is-none,
.ds .amr-spread.is-none {
  font-weight: 500;
  color: var(--text-2);
}
.ds .amr-rate__mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  color: var(--text-2);
  white-space: nowrap;
}
.ds .amr-rate__mode.is-warn {
  color: var(--warning);
}
.ds .amr-dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
}
.ds .amr-dot--stack,
.ds .amr-abbr,
.ds .amr-dir {
  display: none;
}

/* the spread: tinted text only */
.ds .amr-spread {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ds .amr-spread[title] {
  cursor: help;
}
.ds .amr-spread__icon {
  fill: none;
  stroke: currentColor;
}

/* FX margin + its share of the geo's total: the same bar width in every row */
.ds .amr-fx {
  display: inline-grid;
  justify-items: end;
  gap: 9px;
  min-width: 0;
}
.ds .amr-fx__label {
  display: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
.ds .amr-fx .ds-money {
  color: var(--success);
}
.ds .amr-fx .ds-money.is-zero,
.ds .amr-none {
  color: var(--text-2);
}
.ds .amr-bar {
  display: block;
  width: 96px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--wash-2);
}
.ds .amr-bar__fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ds-chart-income);
}

/* compact cards: the name and FX margin on top, then a pay-in and a pay-out line
   (direction, M rate, T rate, spread) */
@container amr (max-width: 720px) {
  /* app.css gives a 4-column pg-table a 640px floor on phones; the cards need none */
  .ds .amr-wrap .amr-table.pg-table,
  .ds .amr-wrap .amr-table--nofx.pg-table,
  .ds .amr-table tbody {
    display: block;
    min-width: 0;
  }
  .ds .amr-table colgroup,
  .ds .amr-table thead {
    display: none;
  }
  .ds .amr-table tbody tr.amr-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "name name fx"
      "inm int ins"
      "outm outt outs";
    align-items: start;
    column-gap: 0;
    padding: 14px 16px;
  }
  .ds .amr-table--nofx tbody tr.amr-row {
    grid-template-areas:
      "name name name"
      "inm int ins"
      "outm outt outs";
  }
  .ds .amr-table tbody td,
  .ds .amr-table tbody td:first-child,
  .ds .amr-table tbody td:last-child {
    display: block;
    min-width: 0;
    padding: 0;
    border-left: 0;
  }
  .ds .amr-table tbody td.amr-c-name {
    grid-area: name;
    align-self: center;
    padding-bottom: 12px;
  }
  .ds .amr-c-name .mmark-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ds .amr-table tbody td.amr-c-fx {
    grid-area: fx;
    align-self: center;
    padding-bottom: 12px;
  }
  .ds .amr-c-inm { grid-area: inm; }
  .ds .amr-c-int { grid-area: int; }
  .ds .amr-c-ins { grid-area: ins; }
  .ds .amr-c-outm { grid-area: outm; }
  .ds .amr-c-outt { grid-area: outt; }
  .ds .amr-c-outs { grid-area: outs; }
  /* one unbroken hairline over the pay-in line: no column gap, the cells pad themselves */
  .ds .amr-table tbody td.amr-c-inm,
  .ds .amr-table tbody td.amr-c-int,
  .ds .amr-table tbody td.amr-c-ins {
    padding-top: 12px;
    padding-bottom: 8px;
    border-top: 1px solid var(--hairline);
  }
  .ds .amr-table tbody td.amr-c-int,
  .ds .amr-table tbody td.amr-c-outt,
  .ds .amr-table tbody td.amr-c-ins,
  .ds .amr-table tbody td.amr-c-outs {
    padding-left: 12px;
  }
  .ds .amr-table tbody td.amr-c-rate {
    display: flex;
    align-items: baseline;
    text-align: left;
  }
  .ds .amr-dir {
    display: block;
    flex: none;
    width: 62px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 18px;
    color: var(--text-2);
  }
  .ds .amr-rate {
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
  }
  .ds .amr-abbr {
    display: inline;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
  }
  .ds .amr-rate__num {
    display: inline;
    font-size: 14px;
  }
  .ds .amr-rate__mode {
    display: none;
  }
  .ds .amr-dot--stack {
    display: inline-block;
    margin-right: 5px;
    vertical-align: 2px;
  }
  .ds .amr-spread {
    font-size: 14px;
  }
  .ds .amr-fx {
    gap: 5px;
  }
  .ds .amr-fx__label {
    display: block;
  }
  .ds .amr-bar {
    width: 72px;
  }
}
@container amr (max-width: 400px) {
  .ds .amr-dir {
    width: 54px;
  }
  .ds .amr-table tbody td.amr-c-int,
  .ds .amr-table tbody td.amr-c-outt,
  .ds .amr-table tbody td.amr-c-ins,
  .ds .amr-table tbody td.amr-c-outs {
    padding-left: 8px;
  }
}

/* ---------- lists: withdrawals, settlements ---------- */
.ds .sfn-list .ds-toolbar {
  margin-bottom: 16px;
}
.ds .sfn-who,
.ds .sfn-amount-stack,
.ds .sfn-status-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .sfn-amount-stack {
  align-items: flex-end;
}
.ds .sfn-who__sub,
.ds .sfn-status-note {
  font-size: 12px;
  color: var(--text-2);
}
.ds .sfn-status-note {
  max-width: 220px;
  color: var(--warning);
}
.ds .sfn-list .pg-table th.is-num,
.ds .sfn-list .pg-table td.is-num {
  text-align: right;
}
.ds .sfn-ext {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.ds .sfn-ext:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ds .sfn-ext:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- analytics ---------- */
.ds .sfn-analytics .ds-toolbar {
  margin-bottom: 16px;
}
.ds .sfn-analytics .pg-table th.is-num,
.ds .sfn-analytics .pg-table td.is-num {
  text-align: right;
}
.ds .sfn-an-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.ds .sfn-an-name .ds-icon {
  color: var(--text-2);
}
.ds .sfn-analytics tr.is-active > td {
  background: var(--wash-2);
}
.ds .sfn-total > td {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border-top: 1px solid var(--hairline-strong);
  font-variant-numeric: tabular-nums;
}
.ds .sfn-total > td.is-num {
  text-align: right;
}
/* totals rows of the finance tables (analytics, the label book's breakdown) */
.ds .sfn-page .pg-table tfoot td {
  padding: 14px 16px;
  font-weight: 500;
  color: var(--text);
  border-top: 1px solid var(--hairline-strong);
  font-variant-numeric: tabular-nums;
}
/* phone cards: the totals repeat the KPI tiles above, so the stacked table drops them */
.ds .sfn-page .pg-table.rt--stacked tfoot {
  display: none;
}
.ds .sfn-analytics .ds-table-frame + .ds-section,
.ds .sfn-analytics .ds-kpi-row + .ds-table-frame {
  margin-top: 12px;
}

/* ---------- detail sheets: withdrawal, settlement ---------- */
.ds .sfn-sheet .ds-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ds .sfn-sheet__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .sfn-pay {
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .sfn-pay__block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ds .sfn-pay__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-pay__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}
.ds .sfn-pay__amount {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .sfn-pay__unit {
  font-size: 14px;
  color: var(--text-2);
}
.ds .sfn-pay__address {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text);
  overflow-wrap: anywhere;
  user-select: all;
}
.ds .sfn-pay__hint,
.ds .sfn-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .sfn-hint--bad {
  color: var(--error);
  cursor: help;
}
.ds .sfn-tx {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}
.ds .sfn-sheet__section {
  display: grid;
  gap: 10px;
}
.ds .sfn-sheet__h {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ds .sfn-sheet__form,
.ds .sfn-subform {
  display: grid;
  gap: 14px;
}
.ds .sfn-subform {
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .sfn-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ds .sfn-notice-p {
  margin: 0;
}
.ds .sfn-notice-p + .sfn-notice-p {
  margin-top: 4px;
}
.ds .sfn-notice-p--quiet {
  font-size: 13px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ds .sfn-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}
.ds .sfn-check input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--accent);
}
.ds .sfn-txarea {
  min-height: 0;
  resize: none;
  overflow-wrap: anywhere;
}
.ds .sfn-fee-net {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-fee-net__math {
  font-variant-numeric: tabular-nums;
}
.ds .sfn-fee-net strong {
  font-weight: 500;
  color: var(--text);
}
.ds .sfn-fee-net.is-loss strong {
  color: var(--error);
}

/* book sheets: an expense, a spend, a team member, an income source */
.ds .sfn-d-hero {
  margin: 0;
}
.ds .sfn-d-hero.is-voided .sfn-eq__value {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.6;
}
.ds .sfn-ext--value {
  font-size: inherit;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
}
.ds .sfn-trail {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.ds .sfn-trail li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: var(--text);
}
.ds .sfn-trail .ds-time {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-trail__note {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds .sfn-person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds .sfn-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 560px) {
  .ds .sfn-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- hot wallet card ---------- */
.ds .sfn-hw .ds-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .sfn-hw__age {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}
.ds .sfn-hw__addr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-width: 0;
}
.ds .sfn-hw__addr .ds-id {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ds .sfn-hw__warns {
  display: grid;
  gap: 8px;
}
.ds .sfn-hw__figs {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ds .sfn-hw__fig {
  min-width: 0;
  margin: 0;
}
.ds .sfn-hw__fig dt {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-hw__fig dd {
  margin: 4px 0 0;
  font-size: 17px;
  color: var(--text);
  white-space: nowrap;
}
.ds .sfn-hw__fig.is-hero dd {
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ds .sfn-hw__row {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.ds .sfn-hw__team {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.ds .sfn-hw__team-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.ds .sfn-hw__team-head .sfn-hint {
  max-width: 620px;
  margin-top: 4px;
}
.ds .sfn-hw__chat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sfn-hw__lines {
  display: grid;
  gap: 4px;
  margin: 0;
}
.ds .sfn-hw__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}
.ds .sfn-hw__line dt {
  font-size: 14px;
  color: var(--text-2);
}
.ds .sfn-hw__line dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 14px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ds .sfn-hw__edit {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ds .sfn-hw__num {
  width: 120px;
  text-align: right;
}
.ds .sfn-hw__req {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.ds .sfn-hw__req li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ds .sfn-hw__confirm-addr {
  display: block;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-field);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ---------- Telegram link code (hot wallet card, merchant finance chat) ---------- */
.ds .tlc {
  padding: 16px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .tlc-cmd-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.ds .tlc-cmd {
  padding: 6px 12px;
  background: var(--wash-2);
  border-radius: var(--ds-r-row);
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--text);
  user-select: all;
  overflow-wrap: anywhere;
}
.ds .tlc-expiry {
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .tlc-expiry.is-out {
  color: var(--warning);
}
.ds .tlc-steps {
  margin: 14px 0 8px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.ds .tlc-steps li + li {
  margin-top: 4px;
}
.ds .tlc-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ds .tlc-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ds .sfn-rev {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 960px) {
  .ds .sfn-charts {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .sfn-eq-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .sfn-eq__side {
    padding: 16px 0 0;
    border-top: 1px solid var(--hairline);
    border-left: 0;
  }
}
@media (max-width: 720px) {
  .ds .sfn-party {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .ds .sfn-party__dd {
    width: 100%;
  }
  .ds .sfn-block {
    margin-bottom: 28px;
  }
  /* two filters per row: a long option label truncates instead of pushing out of the box */
  .ds .sfn-page .ds-toolbar__filters > *,
  .ds .sfn-page .ds-toolbar__filters .pro-geo-btn {
    min-width: 0;
    max-width: 100%;
  }
  .ds .sfn-page .ds-toolbar__filters .pro-geo-btn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ds .sfn-books .alb-pnl-row .pnl-row-name {
    flex-wrap: wrap;
    min-width: 0;
  }
  .ds .sfn-rate {
    padding: 16px;
  }
  .ds .sfn-eq {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }
  .ds .sfn-eq__op {
    display: none;
  }
  .ds .sfn-pay {
    padding: 16px;
  }
  .ds .sfn-pay__amount {
    font-size: 26px;
  }
  .ds .sfn-hw__figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .ds .sfn-hw__fig.is-hero {
    grid-column: 1 / -1;
  }
  .ds .sfn-hw__req li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .ds .tlc-cmd {
    font-size: 16px;
  }
}

/* detail groups in this flex body: the body's gap spaces them, 12 px like every sheet (DS.md, "Detail views") */
.ds .sfn-sheet .ds-sheet__body:has(> .ds-dg) {
  gap: 12px;
}
.ds .sfn-sheet .ds-sheet__body > .ds-dg {
  margin-top: 0;
}
/* ================================================================
   Staff package S4, merchants and routing: the registry (/admin/users/merchants + CreateMerchantModal), the
   merchant page (/admin/users/merchants/{id} and its tabs, Components/Admin/Merchant/*,
   MerchantCascadeSpreadsEditor) and the routing editor (/admin/routing; the map canvas keeps its own
   css/routing-map.css, tokenised). Rules: DS.md. Page parts key on the page root
   [data-staff-page=merchants|merchant|routing]; sheets render outside it and key on .sm-sheet; parts used on
   more than one page key on their own sm- class. Colours only from ds/tokens.css. Prefix: sm- (staff merchants).
   ================================================================ */

/* ---------- tokens the merchant parts share (threshold bar, auto-settle mark), from the kit's ---------- */
.ds {
  --thr-calm: var(--ds-chart-in);
  --thr-warm: var(--warning);
  --thr-warm-ink: var(--warning);
  --thr-hit: color-mix(in oklab, var(--warning), var(--error) 45%);
  --thr-hit-ink: color-mix(in oklab, var(--warning), var(--error) 35%);
  --thr-track: var(--ds-chart-track);
  --thr-notch: var(--surface);
  --thr-row: color-mix(in srgb, var(--thr-hit) 9%, transparent);
  --thr-row-edge: color-mix(in srgb, var(--thr-hit) 30%, transparent);
  --thr-row-hover: color-mix(in srgb, var(--thr-hit) 14%, transparent);
  --auto-hit: var(--ds-chart-4);
  --auto-ink: var(--ds-chart-4);
  --auto-row: color-mix(in srgb, var(--ds-chart-4) 8%, transparent);
  --auto-row-edge: color-mix(in srgb, var(--ds-chart-4) 26%, transparent);
  --auto-row-hover: color-mix(in srgb, var(--ds-chart-4) 13%, transparent);
}

/* ---------- page ---------- */
.ds .sm-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-sans);
}
.ds .sm-page > .ds-page-head,
.ds .sm-page .ds-kpi-row,
.ds .sm-page .ds-toolbar {
  margin: 0;
}
.ds .sm-page .ds-notice {
  margin: 0;
}

/* quiet helpers shared by every S4 part */
.ds [data-staff-page] .sm-muted,
.ds .sm-sheet .sm-muted {
  color: var(--text-2);
}
.ds [data-staff-page] .sm-num,
.ds .sm-sheet .sm-num {
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page] .sm-nowrap,
.ds .sm-sheet .sm-nowrap {
  white-space: nowrap;
}
.ds [data-staff-page] .sm-stack,
.ds .sm-sheet .sm-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds [data-staff-page] .sm-stack--end,
.ds .sm-sheet .sm-stack--end {
  align-items: flex-end;
}
.ds [data-staff-page] .sm-sub,
.ds .sm-sheet .sm-sub {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}
.ds [data-staff-page] .sm-warn-text,
.ds .sm-sheet .sm-warn-text {
  color: var(--warning);
}
.ds [data-staff-page] .sm-bad-text,
.ds .sm-sheet .sm-bad-text {
  color: var(--error);
}

.ds [data-staff-page] .sm-inline,
.ds .sm-sheet .sm-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* a tab's stack of cards: one rhythm for every tab of the merchant page */
.ds [data-staff-page] .sm-stack-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* a quiet row of controls above a card's table (a status filter, a segment, a link to the full list) */
.ds [data-staff-page] .sm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  min-width: 0;
}
.ds [data-staff-page] .sm-bar__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

/* ---------- the merchant page: head, identity card, KPIs, tabs ---------- */
.ds [data-staff-page='merchant'] .sm-id-card .ds-card__body {
  padding: 20px 24px;
}
.ds [data-staff-page='merchant'] .sm-id-card__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}
.ds [data-staff-page='merchant'] .sm-id-card__logo {
  flex: none;
  margin-top: 2px;
}
.ds [data-staff-page='merchant'] .sm-id-card__facts {
  flex: 1 1 auto;
  min-width: 0;
}
.ds [data-staff-page='merchant'] .sm-id-card .geo-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.ds [data-staff-page='merchant'] .sm-mp-kpis .thr {
  margin-top: 12px;
}
.ds [data-staff-page='merchant'] .sm-kpi--due {
  border-color: var(--thr-row-edge);
  background: linear-gradient(var(--thr-row), var(--thr-row)), var(--surface);
}
.ds [data-staff-page='merchant'] .sm-mp-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.ds [data-staff-page='merchant'] .sm-mp-tabs {
  margin: 0;
}
.ds [data-staff-page='merchant'] .sm-mp-panel {
  min-width: 0;
}

/* the API secret shown once */
.ds .sm-sheet .sm-sheet__lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .sm-secret {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
}
.ds .sm-secret__value {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
  user-select: all;
}

@media (max-width: 720px) {
  .ds [data-staff-page='merchant'] .sm-id-card__row {
    flex-direction: column;
    gap: 16px;
  }
}

/* phones: the toolbar's two-up filter grid keeps long labels inside their cell */
@media (max-width: 720px) {
  .ds [data-staff-page] .ds-toolbar__filters > * {
    min-width: 0;
  }
  .ds [data-staff-page] .ds-toolbar .pro-geo-btn {
    min-width: 0;
    overflow: hidden;
  }
  .ds [data-staff-page] .ds-toolbar .pro-geo-btn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* >> registry (Merchants.razor) */
.ds [data-staff-page='merchants'] .sm-reg-who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ds [data-staff-page='merchants'] .sm-reg-table .pg-table:not(.rt--stacked) td[data-cell='primary'] {
  min-width: 190px;
}
.ds [data-staff-page='merchants'] .sm-reg-table .thr--sm {
  grid-template-columns: 72px auto;
}
.ds [data-staff-page='merchants'] .sm-reg-name {
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ds [data-staff-page='merchants'] .sm-reg-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ds [data-staff-page='merchants'] .sm-reg-name:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.ds [data-staff-page='merchants'] .sm-reg-geos {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.ds [data-staff-page='merchants'] .sm-reg-geo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page='merchants'] .sm-reg-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--flag-ring);
}
.ds [data-staff-page='merchants'] .sm-reg-pct {
  font-weight: 500;
}
.ds [data-staff-page='merchants'] .sm-reg-table .thr--sm {
  margin-top: 4px;
}

/* W1 reached the settlement threshold (active merchants): the row is lit, a warm tint and a stripe down
   its left edge; the text keeps its colours. Automatic settlement on: a teal stripe (and the teal tint
   while not due). The stripe is the mode, the tint is "due". On phone cards the stripe runs down the card. */
.ds [data-staff-page='merchants'] .pg-table tbody tr.sm-reg-row--due {
  background: linear-gradient(90deg, var(--thr-row-edge), var(--thr-row) 40%);
}
.ds [data-staff-page='merchants'] .pg-table tbody tr.sm-reg-row--due:hover {
  background: linear-gradient(90deg, var(--thr-row-edge), var(--thr-row-hover) 40%);
}
.ds [data-staff-page='merchants'] .pg-table tbody tr.sm-reg-row--auto:not(.sm-reg-row--due) {
  background: linear-gradient(90deg, var(--auto-row-edge), var(--auto-row) 40%);
}
.ds [data-staff-page='merchants'] .pg-table tbody tr.sm-reg-row--auto:not(.sm-reg-row--due):hover {
  background: linear-gradient(90deg, var(--auto-row-edge), var(--auto-row-hover) 40%);
}
.ds [data-staff-page='merchants'] .pg-table tbody tr.sm-reg-row--due > td:first-child {
  box-shadow: inset 3px 0 0 var(--thr-hit);
}
.ds [data-staff-page='merchants'] .pg-table tbody tr.sm-reg-row--auto > td:first-child {
  box-shadow: inset 3px 0 0 var(--auto-hit);
}
.ds [data-staff-page='merchants'] .rt--stacked > tbody > tr.sm-reg-row--due {
  box-shadow: inset 3px 0 0 var(--thr-hit);
}
.ds [data-staff-page='merchants'] .rt--stacked > tbody > tr.sm-reg-row--auto {
  box-shadow: inset 3px 0 0 var(--auto-hit);
}
.ds [data-staff-page='merchants'] .rt--stacked > tbody > tr.sm-reg-row--due > td:first-child,
.ds [data-staff-page='merchants'] .rt--stacked > tbody > tr.sm-reg-row--auto > td:first-child {
  box-shadow: none;
}
/* << registry */

/* >> overview, payments, disputes, balance, activity */
.ds [data-staff-page] .sm-num-col {
  text-align: right;
}
.ds [data-staff-page] .sm-clip {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds [data-staff-page] .sm-card-pager {
  padding: 4px 16px 12px;
}
.ds [data-staff-page='merchant'] .ds-card--flush > .ds-card__body > .ds-table-frame,
.ds [data-staff-page='merchant'] .ds-card--flush > .ds-card__body > .ds-empty,
.ds [data-staff-page='merchant'] .ds-card--flush > .ds-card__body > .ds-error,
.ds [data-staff-page='merchant'] .ds-card--flush > .ds-card__body > .ds-loading {
  border: 0;
  border-radius: 0 0 var(--ds-r-card) var(--ds-r-card);
}
.ds [data-staff-page='merchant'] .ds-card--flush > .ds-card__body > .ds-empty,
.ds [data-staff-page='merchant'] .ds-card--flush > .ds-card__body > .ds-error,
.ds [data-staff-page='merchant'] .ds-card--flush > .ds-card__body > .ds-loading {
  padding: 8px 24px 24px;
}

/* overview: the period line and its controls, then the issuance block and the merchant dashboard cards */
.ds [data-staff-page='merchant'] .sm-ov {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.ds [data-staff-page='merchant'] .sm-ov__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.ds [data-staff-page='merchant'] .sm-ov__period {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page='merchant'] .sm-ov__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 10px;
}
.ds [data-staff-page='merchant'] .sm-ov__strip .ds-section__head {
  margin-bottom: 12px;
}
.ds [data-staff-page='merchant'] .sm-ov__strip .ds-kpi-row {
  margin: 0;
}
.ds [data-staff-page='merchant'] .sm-ov__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    'funnel quality balance'
    'seg    seg     seg'
    'int    int     disp';
  gap: 16px;
}
.ds [data-staff-page='merchant'] .sm-ov__grid > * {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds [data-staff-page='merchant'] .sm-ov__grid > * > * {
  flex: 1 1 auto;
}

/* issuance: the head line, four tiles, the chart card, reasons and bands side by side */
.ds [data-staff-page='merchant'] .sm-iss {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ds [data-staff-page='merchant'] .sm-iss__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.ds [data-staff-page='merchant'] .sm-iss__head .ds-h2 {
  margin: 0;
}
.ds [data-staff-page='merchant'] .sm-iss__coverage {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page='merchant'] .sm-iss__tiles {
  margin: 0;
  transition: opacity 0.2s var(--ease-out);
}
.ds [data-staff-page='merchant'] .sm-iss__tiles.is-busy {
  opacity: 0.6;
}
.ds [data-staff-page='merchant'] .sm-iss__chart .mdash-legend {
  margin-top: 14px;
}
.ds [data-staff-page='merchant'] .sm-iss__strip-key {
  display: inline-block;
  width: 22px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ds-chart-track), color-mix(in srgb, var(--ds-chart-out) 80%, var(--ds-chart-track)));
}
.ds [data-staff-page='merchant'] .sm-iss__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ds [data-staff-page='merchant'] .sm-iss__sub {
  margin: 20px 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds [data-staff-page='merchant'] .sm-iss__none {
  margin: 0;
  font-size: 14px;
}
.ds [data-staff-page='merchant'] .sm-iss__top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page='merchant'] .sm-iss__top-item {
  white-space: nowrap;
}

/* a bar row list: name, figure, share, a thin track (reasons, amount bands) */
.ds [data-staff-page] .sm-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds [data-staff-page] .sm-bars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 56px;
  grid-template-areas:
    'name value share'
    'track track track';
  align-items: baseline;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 14px;
}
.ds [data-staff-page] .sm-bars__name {
  grid-area: name;
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds [data-staff-page] .sm-bars__value {
  grid-area: value;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page] .sm-bars__share {
  grid-area: share;
  text-align: right;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page] .sm-bars__track {
  grid-area: track;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--ds-chart-track);
  overflow: hidden;
}
.ds [data-staff-page] .sm-bars__fill {
  display: block;
  width: calc(var(--w, 0) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--c, var(--ds-chart-1));
}
.ds [data-staff-page] .sm-bars--quiet .sm-bars__row {
  grid-template-areas: 'name value share';
}
.ds [data-staff-page] .sm-bars--quiet .sm-bars__name,
.ds [data-staff-page] .sm-bars--quiet .sm-bars__value {
  color: var(--text-2);
}

/* the merchant affiliate block (package S6's MerchantAffiliateSection, rendered in the pricing tab):
   its legacy section markup laid out as one of this page's cards until that package rebuilds it */
@media (max-width: 1200px) {
  .ds [data-staff-page='merchant'] .sm-ov__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'funnel  quality'
      'seg     seg'
      'balance disp'
      'int     int';
  }
}
@media (max-width: 900px) {
  .ds [data-staff-page='merchant'] .sm-iss__split {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .ds [data-staff-page='merchant'] .sm-ov__controls {
    justify-content: flex-start;
    width: 100%;
  }
  .ds [data-staff-page='merchant'] .sm-ov__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'funnel' 'quality' 'seg' 'balance' 'disp' 'int';
    gap: 12px;
  }
  .ds [data-staff-page] .sm-clip {
    max-width: 180px;
  }
}
/* << overview, payments, disputes, balance, activity */

/* >> pricing (MerchantPricingTab, MerchantRateCard, MerchantRateDirectionEditor, MerchantCascadeSpreadsEditor, CreateMerchantModal) */
/* the pricing tab: numbers right-aligned in its tables, a method = geo + name + code */
.ds [data-staff-page] .sm-pr-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds [data-staff-page] .sm-pr-method {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds [data-staff-page] .sm-pr-code {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.ds [data-staff-page] .sm-pr-rate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.ds [data-staff-page] .sm-pr-rate__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ds [data-staff-page] .sm-pr-switch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.ds [data-staff-page] .sm-pr-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 4px;
}
/* the rate-source pickers: the shared dropdown at the row height */
.ds .sm-pr-dd .pro-geo-btn {
  height: var(--ds-control-h-sm);
  padding: 0 12px;
  font-size: 13px;
}
.ds .sm-pr-dd--block,
.ds .sm-pr-dd--block .pro-geo-btn {
  width: 100%;
}
.ds .sm-pr-dd--block .pro-geo-btn {
  height: var(--ds-control-h);
  justify-content: space-between;
}
.ds .sm-pr-dd--block .pro-geo-btn > span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .sm-sheet .sm-pr-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* the exchange-rate card: the 30-day FX figure in the head, then a matrix per geo; every piece
   names its column, rows follow the markup */
.ds .sm-rate__fx {
  margin: 0;
  text-align: right;
}
.ds .sm-rate__fx dt {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sm-rate__fx dd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}
.ds .sm-rate__board {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds .sm-rate__geo {
  display: grid;
  grid-template-columns: minmax(96px, 148px) minmax(0, 1fr) minmax(0, 1fr) minmax(88px, 0.6fr);
  align-items: start;
  gap: 2px 8px;
  min-width: 0;
}
.ds .sm-rate__geo--solo {
  grid-template-columns: minmax(96px, 148px) minmax(0, 1fr);
}
.ds .sm-rate__geo + .sm-rate__geo {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.ds .sm-rate__head {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 0 6px;
}
.ds .sm-rate__flag {
  flex: none;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}
.ds .sm-rate__cur {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds .sm-rate__geo-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sm-rate__col {
  align-self: end;
  padding: 0 12px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sm-rate__col[title] {
  cursor: help;
}
.ds .sm-rate__c-m,
.ds .sm-rate__cell--m {
  grid-column: 2;
}
.ds .sm-rate__c-t,
.ds .sm-rate__cell--t {
  grid-column: 3;
}
.ds .sm-rate__c-s {
  grid-column: 4;
}
.ds .sm-rate__dir {
  grid-column: 1;
  padding: 10px 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-2);
}
/* a rate: the value, one quiet line naming what sets it; with edit rights a button */
.ds .sm-rate__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.ds button.sm-rate__cell {
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.ds button.sm-rate__cell:hover,
.ds button.sm-rate__cell.is-open {
  background: var(--wash-2);
}
.ds button.sm-rate__cell:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.ds .sm-rate__cell-line {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}
.ds .sm-rate__v {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}
.ds .sm-rate__v--inherited {
  color: var(--text-2);
}
.ds .sm-rate__mini {
  display: block;
  flex: 0 1 52px;
  min-width: 24px;
}
.ds .sm-rate__mini .sparkline-svg {
  display: block;
  width: 100%;
  height: 16px;
  stroke: var(--text-2);
  stroke-width: 1.25;
}
.ds .sm-rate__mini polyline,
.ds .sm-rate-sheet__spark polyline,
.ds .sm-rate__mini .spark-line,
.ds .sm-rate-sheet__spark .spark-line {
  vector-effect: non-scaling-stroke;
}
.ds .sm-rate__edit {
  flex: none;
  color: var(--text-2);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.ds button.sm-rate__cell:hover .sm-rate__edit,
.ds button.sm-rate__cell:focus-visible .sm-rate__edit {
  opacity: 1;
}
.ds .sm-rate__d {
  max-width: 100%;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
  overflow-wrap: break-word;
}
.ds .sm-rate__d.sm-warn-text {
  color: var(--warning);
}
.ds .sm-rate__spread {
  padding: 10px 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ds .sm-rate__spread-v,
.ds .sm-rate__none {
  font-size: 15px;
  line-height: 22px;
  color: var(--text);
}
.ds .sm-rate__none {
  color: var(--text-2);
}
.ds .sm-rate__spread-v.sm-warn-text {
  color: var(--warning);
}
.ds .sm-rate__col.sm-rate__c-s {
  text-align: right;
}
/* warnings for a direction, under its figures */
.ds .sm-rate__notes {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 2px 0 8px;
}
@media (prefers-reduced-motion: reduce) {
  .ds button.sm-rate__cell,
  .ds .sm-rate__edit {
    transition: none;
  }
}
/* phone: the direction on its own line, its figures under it */
@media (max-width: 560px) {
  .ds .sm-rate__fx {
    text-align: left;
  }
  .ds .sm-rate__fx dd {
    align-items: flex-start;
  }
  .ds .sm-rate__geo {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 0 4px;
  }
  .ds .sm-rate__geo--solo {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .sm-rate__head,
  .ds .sm-rate__dir,
  .ds .sm-rate__notes {
    grid-column: 1 / -1;
  }
  .ds .sm-rate__c-m,
  .ds .sm-rate__cell--m {
    grid-column: 1;
  }
  .ds .sm-rate__c-t,
  .ds .sm-rate__cell--t {
    grid-column: 2;
  }
  .ds .sm-rate__c-s {
    grid-column: 3;
  }
  .ds .sm-rate__col {
    padding: 0 8px 4px;
  }
  .ds .sm-rate__dir {
    padding: 10px 0 0;
    font-weight: 500;
    color: var(--text);
  }
  .ds .sm-rate__cell,
  .ds .sm-rate__spread {
    padding: 6px 8px 8px;
  }
  .ds .sm-rate__v {
    font-size: 14px;
  }
  .ds .sm-rate__mini {
    display: none;
  }
}

/* the rate editor sheet: the mode switch, its fields, what a save would give */
.ds .sm-sheet .sm-rate-sheet__meta {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .sm-sheet .sm-rate-sheet__modes {
  margin: 0 0 18px;
}
.ds .sm-sheet .sm-rate-sheet__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 18px;
}
.ds .sm-sheet .sm-rate-sheet__form--fixed {
  grid-template-columns: minmax(0, 1fr);
  max-width: 280px;
}
.ds .sm-sheet .sm-rate-sheet__form--floating {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ds .sm-sheet .sm-rate-sheet__feed {
  grid-column: 1 / -1;
}
.ds .sm-sheet .sm-rate-sheet__live {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ds .sm-sheet .sm-rate-sheet__live:empty {
  display: none;
}
.ds .sm-sheet .sm-rate-sheet__note {
  margin: 0;
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .sm-sheet .sm-rate-sheet__figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  font-variant-numeric: tabular-nums;
}
.ds .sm-sheet .sm-rate-sheet__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sm-sheet .sm-rate-sheet__value {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ds .sm-sheet .sm-rate-sheet__spark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 280px;
  max-width: 100%;
}
.ds .sm-sheet .sm-rate-sheet__spark .sparkline-svg {
  display: block;
  width: 100%;
  height: 40px;
  stroke: var(--text-2);
  stroke-width: 1.25;
}
@media (max-width: 560px) {
  .ds .sm-sheet .sm-rate-sheet__form,
  .ds .sm-sheet .sm-rate-sheet__form--floating {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds .sm-sheet .sm-rate-sheet__form--floating .ds-field:last-child {
    grid-column: 1 / -1;
  }
}

/* cascade overrides: the edit sheet, one block of four fields per cascade */
.ds .sm-sheet .sm-casc-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ds .sm-sheet .sm-casc-item + .sm-casc-item {
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.ds .sm-sheet .sm-casc-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.ds .sm-sheet .sm-casc-item__name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds .sm-sheet .sm-casc-item__fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* the new-merchant sheet */
.ds .sm-sheet .sm-create__stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ds .sm-sheet .sm-create__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ds .sm-sheet .sm-create__sec {
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.ds .sm-sheet .sm-create__h {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds .sm-sheet .sm-create__hint {
  margin: -6px 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .sm-sheet .sm-create__geo .sm-create__hint {
  margin: 0;
}
.ds .sm-sheet .sm-create__geo + .sm-create__geo {
  margin-top: 16px;
}
.ds .sm-sheet .sm-create__geo-name {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.ds .sm-sheet .sm-create__methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 132px;
  align-items: start;
  gap: 8px 12px;
}
.ds .sm-sheet .sm-create__col {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sm-sheet .sm-create__pick {
  min-width: 0;
  padding-top: 8px;
}
.ds .sm-sheet .sm-create__methods .is-off {
  opacity: 0.55;
}
.ds .sm-sheet .sm-create__creds {
  margin-top: 16px;
}
.ds .sm-sheet .sm-create__cred {
  overflow-wrap: anywhere;
  user-select: all;
}
@media (max-width: 640px) {
  .ds .sm-sheet .sm-pr-form,
  .ds .sm-sheet .sm-create__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .sm-sheet .sm-casc-item__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds .sm-sheet .sm-create__methods {
    grid-template-columns: minmax(0, 1fr) 96px 96px;
    gap: 8px;
  }
}
/* << pricing */

/* >> settings (MerchantSettingsTab, MerchantTelegramReportsSection, MerchantLimitsSection, MerchantAmountBumpSection, MerchantIntegrationTab) */

/* text helpers of the settings and integration tabs */
.ds [data-staff-page] .sm-mono,
.ds .sm-sheet .sm-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}
.ds [data-staff-page] .sm-break,
.ds .sm-sheet .sm-break {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* switches stacked above the facts of a card */
.ds [data-staff-page] .sm-switches {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 20px;
}
.ds [data-staff-page] .sm-switches:last-child {
  margin-bottom: 0;
}

/* a notice that opens a card body (or closes it) */
.ds [data-staff-page] .sm-card-notice {
  margin: 0 0 16px;
}
.ds [data-staff-page] .sm-card-notice--after {
  margin: 16px 0 0;
}

/* profile: the logo beside its upload control */
.ds [data-staff-page] .sm-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 20px;
  min-width: 0;
}
.ds [data-staff-page] .sm-logo__img {
  flex: none;
  transition: opacity 150ms ease;
}
.ds [data-staff-page] .sm-logo__img.is-busy {
  opacity: 0.55;
}
.ds [data-staff-page] .sm-logo__field {
  flex: 1 1 auto;
  min-width: 0;
}
.ds [data-staff-page] .sm-logo__label {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-2);
}
.ds [data-staff-page] .sm-logo__field .sm-sub {
  margin: 0;
}
.ds [data-staff-page] .sm-logo__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ds [data-staff-page] .sm-file-btn {
  cursor: pointer;
  user-select: none;
}
.ds [data-staff-page] .sm-file-btn.is-busy {
  pointer-events: none;
}
.ds [data-staff-page] .sm-file:focus-visible + .sm-file-btn {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* settlement: what reaching the threshold does */
.ds [data-staff-page] .sm-as {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 20px;
  min-width: 0;
}
.ds [data-staff-page] .sm-as__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ds [data-staff-page] .sm-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.ds [data-staff-page] .sm-ext-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* pay page: the embedding domains, each with its revoke */
.ds [data-staff-page] .sm-origins {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds [data-staff-page] .sm-origin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ds [data-staff-page] .sm-origin__value {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Telegram reports */
.ds [data-staff-page] .sm-tr__notice {
  margin: 0 0 16px;
}
.ds [data-staff-page] .sm-tr__notice .sm-sub {
  margin-top: 2px;
}
.ds [data-staff-page] .sm-tr__hint {
  margin: 12px 0 0;
}
.ds [data-staff-page] .sm-tr__code {
  margin: 20px 0 0;
}

/* sheets of these tabs: the form, the verify steps */
.ds .sm-sheet .sm-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .sm-sheet .sm-form--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ds .sm-sheet .sm-form__note {
  margin: 12px 0 0;
}
.ds .sm-sheet .sm-form .sm-sub {
  margin: 0;
}
.ds .sm-sheet .sm-sheet__notice {
  margin: 16px 0 0;
}
.ds .sm-sheet .sm-ab-live {
  min-height: 1.5em;
  margin: 12px 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ds .sm-sheet .sm-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .sm-sheet .sm-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.ds .sm-sheet .sm-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wash-2);
  border: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .sm-sheet .sm-step__body {
  min-width: 0;
}
.ds .sm-sheet .sm-step__text {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
/* the whole address, large, in groups of four: all of it gets read back */
.ds .sm-sheet .sm-verify-addr {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text);
  user-select: all;
}
.ds .sm-sheet .sm-verify-addr span {
  display: inline-block;
  margin-right: 0.5em;
  white-space: nowrap;
}
.ds .sm-sheet .sm-verify-addr span:last-child {
  margin-right: 0;
}
.ds .sm-sheet .sm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
}
.ds .sm-sheet .sm-check input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--text);
  cursor: pointer;
}
.ds .sm-sheet .sm-check input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* integration: the log under the endpoint card */
.ds [data-staff-page] .sm-int__log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ds [data-staff-page] .sm-int__toolbar {
  margin: 0;
}
.ds [data-staff-page] .sm-int__table .sm-int__num {
  text-align: right;
  white-space: nowrap;
}
.ds [data-staff-page] .sm-int__method {
  font-weight: 600;
}
.ds [data-staff-page] .sm-int__err {
  display: block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ds [data-staff-page] .sm-logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ds [data-staff-page] .sm-ext-link {
    margin-left: 0;
  }
  .ds .sm-sheet .sm-verify-addr {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .ds .sm-sheet .sm-form--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* << settings */

/* >> routing (Routing.razor editor, MerchantRoutingTab; the canvas is css/routing-map.css) */

/* ---------- shared by the routing page and the merchant page's Routing tab ---------- */
/* entity names inside routing parts (merchants, traders, cascades, requisites): ink, hairline underline */
.ds [data-staff-page] a.sm-rt-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.ds [data-staff-page] a.sm-rt-link:hover {
  text-decoration-color: currentColor;
}
.ds [data-staff-page] span.sm-rt-link {
  color: var(--text);
}
.ds [data-staff-page] .sm-rt-share {
  min-width: 48px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* the chain as the router resolves it: one row per target, in failover order */
.ds [data-staff-page] .sm-rt-chain {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sm-rt-chain;
}
.ds [data-staff-page] .sm-rt-chain__item {
  counter-increment: sm-rt-chain;
  padding: 8px 0;
  min-width: 0;
}
.ds [data-staff-page] .sm-rt-chain__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ds [data-staff-page] .sm-rt-chain__name {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ds [data-staff-page] .sm-rt-chain__name::before {
  content: counter(sm-rt-chain) ".";
  display: inline-block;
  min-width: 20px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page] .sm-rt-chain__item.is-skipped .sm-rt-chain__name {
  color: var(--text-2);
}
.ds [data-staff-page] .sm-rt-chain__sub {
  margin: 4px 0 0 20px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds [data-staff-page] .sm-rt-chain__traders {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.ds [data-staff-page] .sm-rt-chain__traders li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ds [data-staff-page] .sm-rt-chain__traders .sm-rt-share {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-2);
}
/* a trader's readiness in this geo, as a dot before the name */
.ds [data-staff-page] .sm-rt-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
}
.ds [data-staff-page] .sm-rt-dot.is-ok {
  background: var(--success);
}
.ds [data-staff-page] .sm-rt-dot.is-warn {
  background: var(--warning);
}
.ds [data-staff-page] .sm-rt-dot.is-bad {
  background: var(--error);
}

/* ---------- the merchant page's Routing tab: one card per geo ---------- */
.ds [data-staff-page='merchant'] .sm-rt-tab__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds [data-staff-page='merchant'] .sm-rt-geos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.ds [data-staff-page='merchant'] .sm-rt-geo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.ds [data-staff-page='merchant'] .sm-rt-geo__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* ---------- the weight stepper (editor targets and traders, map inspector) ---------- */
.ds .sm-weight {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--field-border);
  border-radius: var(--ds-r-field);
  background: var(--field-bg);
}
.ds .sm-weight:focus-within {
  border-color: var(--field-border-hover);
}
.ds .sm-weight__input {
  width: 44px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.ds .sm-weight__input::-webkit-outer-spin-button,
.ds .sm-weight__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.ds .sm-weight__input:focus {
  outline: none;
}
.ds .sm-weight__input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-radius: 6px;
}
/* a dormant weight: kept, unused while the trader takes no traffic, applies on coming back */
.ds .sm-weight.is-dormant {
  border-style: dashed;
}
.ds .sm-weight.is-dormant .sm-weight__input {
  color: var(--text-2);
  font-weight: 500;
}
.ds [data-staff-page] .sm-rt-dormant {
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  cursor: help;
}
/* flagged: the dormant weight would outweigh everyone taking traffic */
.ds [data-staff-page] .sm-rt-dormant.is-warn {
  color: var(--warning);
  font-weight: 500;
}
.ds [data-staff-page] .sm-rt-chain__traders .sm-rt-dormant {
  margin-left: auto;
}

/* ---------- the routing page ---------- */
.ds [data-staff-page='routing'] .sm-rt-picker {
  min-width: 240px;
  max-width: 100%;
}
.ds [data-staff-page='routing'] .sm-rt-picker .pro-geo-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* list view: the map's data as a table */
.ds [data-staff-page='routing'] .sm-rt-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ds [data-staff-page='routing'] .sm-rt-list__bar {
  margin: 0;
}
.ds [data-staff-page='routing'] .sm-rt-totals {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page='routing'] .sm-rt-num-col {
  text-align: right;
  white-space: nowrap;
}
.ds [data-staff-page='routing'] .sm-rt-targets {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 220px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds [data-staff-page='routing'] .sm-rt-targets__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text);
}
.ds [data-staff-page='routing'] .sm-rt-targets__row.is-sub {
  padding-left: 14px;
  font-size: 13px;
  color: var(--text-2);
}
.ds [data-staff-page='routing'] .sm-rt-targets__row.is-sub a.sm-rt-link {
  color: var(--text-2);
}
.ds [data-staff-page='routing'] .sm-rt-targets__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds [data-staff-page='routing'] .sm-rt-targets__share {
  flex: none;
  color: var(--text-2);
}

/* editor: merchant picker, scope tabs, plan + truth side by side */
.ds [data-staff-page='routing'] .sm-rt-toolbar,
.ds [data-staff-page='routing'] .sm-rt-scopes {
  margin: 0;
}
.ds [data-staff-page='routing'] .sm-rt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
  min-width: 0;
}
.ds [data-staff-page='routing'] .sm-rt-main,
.ds [data-staff-page='routing'] .sm-rt-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ds [data-staff-page='routing'] .sm-rt-side {
  position: sticky;
  top: 84px;
}
.ds [data-staff-page='routing'] .sm-rt-plan__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ds [data-staff-page='routing'] .sm-rt-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

/* the traffic split: one bar, segments by weight; a restricted pool shows its traders inside */
.ds [data-staff-page='routing'] .sm-rt-split {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds [data-staff-page='routing'] .sm-rt-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--ds-chart-track);
}
.ds [data-staff-page='routing'] .sm-rt-bar__seg {
  display: flex;
  gap: 1px;
  flex-grow: var(--grow, 1);
  min-width: 3px;
}
.ds [data-staff-page='routing'] .sm-rt-bar__seg.is-cascade {
  background: var(--ds-chart-2);
}
.ds [data-staff-page='routing'] .sm-rt-bar__seg.is-pool {
  background: var(--ds-chart-1);
}
.ds [data-staff-page='routing'] .sm-rt-bar__sub {
  display: block;
  flex-grow: var(--grow, 1);
  min-width: 1px;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--surface) 60%, transparent);
}
.ds [data-staff-page='routing'] .sm-rt-bar__sub:last-child {
  box-shadow: none;
}
.ds [data-staff-page='routing'] .sm-rt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.ds [data-staff-page='routing'] .sm-rt-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds [data-staff-page='routing'] .sm-rt-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.ds [data-staff-page='routing'] .sm-rt-legend__dot.is-cascade {
  background: var(--ds-chart-2);
}
.ds [data-staff-page='routing'] .sm-rt-legend__dot.is-pool {
  background: var(--ds-chart-1);
}
.ds [data-staff-page='routing'] .sm-rt-legend__name {
  color: var(--text);
  font-weight: 500;
}

/* targets in failover order: the number on a quiet rail, the target as a raised block */
.ds [data-staff-page='routing'] .sm-rt-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds [data-staff-page='routing'] .sm-rt-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
}
.ds [data-staff-page='routing'] .sm-rt-step__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 12px;
  border-radius: 50%;
  background: var(--wash-3);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds [data-staff-page='routing'] .sm-rt-target {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
}
.ds [data-staff-page='routing'] .sm-rt-target__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds [data-staff-page='routing'] .sm-rt-target__type {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ds [data-staff-page='routing'] .sm-rt-target__tools {
  display: inline-flex;
  gap: 2px;
}
.ds [data-staff-page='routing'] .sm-rt-target__main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.ds [data-staff-page='routing'] .sm-rt-target__pick {
  flex: 1 1 240px;
  min-width: 0;
}
.ds [data-staff-page='routing'] .sm-rt-cascade,
.ds [data-staff-page='routing'] .sm-rt-cascade .pro-geo-btn {
  width: 100%;
}
.ds [data-staff-page='routing'] .sm-rt-cascade .pro-geo-btn > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds [data-staff-page='routing'] .sm-rt-target__scope {
  font-size: 14px;
  color: var(--text-2);
}
.ds [data-staff-page='routing'] .sm-rt-target__weight {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.ds [data-staff-page='routing'] .sm-rt-target__weight .sm-rt-share {
  min-width: 56px;
  font-size: 14px;
}

/* the pool: whole / selected, then the picked traders */
.ds [data-staff-page='routing'] .sm-rt-pool {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.ds [data-staff-page='routing'] .sm-rt-pool__scope {
  display: flex;
}
.ds [data-staff-page='routing'] .sm-rt-pool__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ds [data-staff-page='routing'] .sm-rt-traders {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds [data-staff-page='routing'] .sm-rt-trader {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px;
  margin: 0 -8px;
  border-radius: var(--ds-r-row);
}
.ds [data-staff-page='routing'] .sm-rt-trader:hover {
  background: var(--wash-2);
}
.ds [data-staff-page='routing'] .sm-rt-trader__id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 140px;
  min-width: 0;
}
.ds [data-staff-page='routing'] .sm-rt-trader__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds [data-staff-page='routing'] .sm-rt-trader__key {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.ds [data-staff-page='routing'] .sm-rt-trader__ready {
  flex: none;
  font-size: 13px;
}
.ds [data-staff-page='routing'] .sm-rt-trader__right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* the trader picker: a search field over the candidates */
.ds [data-staff-page='routing'] .sm-rt-picker-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-panel);
  background: var(--surface);
}
.ds [data-staff-page='routing'] .sm-rt-picker-box__search {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ds [data-staff-page='routing'] .sm-rt-picker-box__input {
  flex: 1 1 auto;
  min-width: 0;
}
.ds [data-staff-page='routing'] .sm-rt-picker-box__list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.ds [data-staff-page='routing'] .sm-rt-picker-box__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ds [data-staff-page='routing'] .sm-rt-picker-box__row:hover {
  background: var(--surface-hover);
}
.ds [data-staff-page='routing'] .sm-rt-picker-box__add {
  flex: none;
  color: var(--text-2);
}
.ds [data-staff-page='routing'] .sm-rt-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* the save bar: stays in view while the plan scrolls */
.ds [data-staff-page='routing'] .sm-rt-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 12px 12px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-card);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.ds [data-staff-page='routing'] .sm-rt-savebar__btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* the truth side: Default scope = one row per geo with what it resolves to */
.ds [data-staff-page='routing'] .sm-rt-georows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds [data-staff-page='routing'] .sm-rt-georow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.ds [data-staff-page='routing'] .sm-rt-georow:hover {
  background: var(--surface-hover);
}
.ds [data-staff-page='routing'] .sm-rt-georow__state {
  margin-left: auto;
}
.ds [data-staff-page='routing'] .sm-rt-georow__chev {
  flex: none;
  color: var(--text-2);
}

/* the live pool: who takes the traffic now, with a bar by bucket (weight × requisites) */
.ds [data-staff-page='routing'] .sm-rt-live__count {
  font-size: 13px;
  white-space: nowrap;
}
.ds [data-staff-page='routing'] .sm-rt-live__bar {
  display: flex;
  gap: 2px;
  height: 8px;
  margin-bottom: 12px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ds-chart-track);
}
.ds [data-staff-page='routing'] .sm-rt-live__bar > span {
  flex-grow: var(--grow, 1);
  min-width: 2px;
}
.ds [data-staff-page='routing'] .is-c1 {
  background: var(--ds-chart-1);
}
.ds [data-staff-page='routing'] .is-c2 {
  background: var(--ds-chart-2);
}
.ds [data-staff-page='routing'] .is-c3 {
  background: var(--ds-chart-3);
}
.ds [data-staff-page='routing'] .is-c4 {
  background: var(--ds-chart-4);
}
.ds [data-staff-page='routing'] .is-c5 {
  background: var(--ds-chart-5);
}
.ds [data-staff-page='routing'] .is-c6 {
  background: var(--ds-chart-6);
}
.ds [data-staff-page='routing'] .sm-rt-live__list {
  display: flex;
  flex-direction: column;
  margin: 0 -8px;
  padding: 0;
  list-style: none;
}
.ds [data-staff-page='routing'] .sm-rt-live__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ds [data-staff-page='routing'] .sm-rt-live__row:hover {
  background: var(--surface-hover);
}
.ds [data-staff-page='routing'] .sm-rt-live__swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.ds [data-staff-page='routing'] .sm-rt-live__who {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.ds [data-staff-page='routing'] .sm-rt-live__name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds [data-staff-page='routing'] .sm-rt-live__chev {
  flex: none;
  color: var(--text-2);
  transition: transform 160ms var(--ease-out);
}
.ds [data-staff-page='routing'] .sm-rt-live__item.is-open .sm-rt-live__chev {
  transform: rotate(180deg);
}
.ds [data-staff-page='routing'] .sm-rt-live__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 8px 14px 28px;
}
.ds [data-staff-page='routing'] .sm-rt-live__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
}
.ds [data-staff-page='routing'] .sm-rt-req {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-2);
}
.ds [data-staff-page='routing'] .sm-rt-req__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13.5px;
}
.ds [data-staff-page='routing'] .sm-rt-req__method {
  font-weight: 600;
  color: var(--text);
}
.ds [data-staff-page='routing'] .sm-rt-req__mode {
  margin-left: auto;
}
.ds [data-staff-page='routing'] .sm-rt-req__ident {
  font-size: 12.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds [data-staff-page='routing'] .sm-rt-meter {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ds-chart-track);
}
.ds [data-staff-page='routing'] .sm-rt-meter > span {
  display: block;
  width: calc(var(--w, 0) * 1%);
  height: 100%;
  background: var(--ds-chart-in);
}
.ds [data-staff-page='routing'] .sm-rt-meter.is-warn > span {
  background: var(--warning);
}
.ds [data-staff-page='routing'] .sm-rt-meter.is-full > span {
  background: var(--error);
}

@media (max-width: 1100px) {
  .ds [data-staff-page='routing'] .sm-rt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds [data-staff-page='routing'] .sm-rt-side {
    position: static;
  }
}
@media (max-width: 560px) {
  .ds [data-staff-page='routing'] .sm-rt-picker {
    min-width: 0;
    width: 100%;
  }
  .ds [data-staff-page='routing'] .sm-rt-step {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds [data-staff-page='routing'] .sm-rt-step__num {
    display: none;
  }
  .ds [data-staff-page='routing'] .sm-rt-target {
    padding: 12px;
  }
  .ds [data-staff-page='routing'] .sm-rt-target__weight {
    margin-left: 0;
  }
  .ds [data-staff-page='routing'] .sm-rt-trader__right {
    margin-left: 44px;
  }
  .ds [data-staff-page='routing'] .sm-rt-savebar {
    bottom: 8px;
    padding: 10px 12px;
  }
  .ds [data-staff-page='routing'] .sm-rt-savebar__btns {
    width: 100%;
  }
  .ds [data-staff-page='routing'] .sm-rt-savebar__btns > * {
    flex: 1 1 0;
  }
}
/* << routing */
/* ================================================================
   Merchant cabinet, package M2: Dashboard (and its cards, shared with the admin merchant page),
   Finance (wallets, settle / transfer sheets, settlement requests, ledger, reports), Settings and the
   sandbox tools (pay page test, checkout appearance). Owned by that package only. Rules: DS.md.
   Every selector under .ds (prefix mh-; the sheets render outside the page root), colours only
   from ds/tokens.css, kit components first; page-only rules here.
   ================================================================ */

/* ---------- shared bits ---------- */
.ds .mh-page {
  min-width: 0;
}
.ds .mh-gap {
  margin-bottom: 16px;
}
.ds .mh-muted {
  color: var(--text-2);
}
.ds .mh-label {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .mh-note {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds .mh-quiet {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .mh-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s var(--ease-out);
}
.ds .mh-link:hover {
  text-decoration-color: currentColor;
}
.ds .mh-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.ds .mh-ext {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ds .mh-ext .ds-icon {
  color: var(--text-2);
}
.ds .mh-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds .mh-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .mh-share {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}
.ds .mh-section {
  margin-top: 32px;
}
.ds .mh-section .ds-tabs {
  margin-bottom: 16px;
}
.ds .mh-section .ds-toolbar {
  margin-bottom: 16px;
}
.ds .mh-tabs {
  margin-bottom: 24px;
}

/* geo marks: the same series as the money-flow chart (DashFormat.GeoColor) */
.ds .mh-geo-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-chart-neutral);
}
.ds .mh-geo-dot--ar {
  background: var(--geo-ar);
}
.ds .mh-geo-dot--ve {
  background: var(--geo-ve);
}
.ds .mh-geo-dot--in {
  background: var(--geo-in);
}
.ds .mh-geo-dot--kr {
  background: var(--geo-kr);
}

/* two-line table cells: the main value over a quiet second line */
.ds .mh-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .mh-cell--end {
  align-items: flex-end;
}
.ds .mh-cell__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
}
.ds .mh-cell__sub {
  font-size: 12.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .mh-of {
  color: var(--text-2);
}

/* a sheet-free list of rows inside a card (withdrawals, disputes, webhooks) */
.ds .mh-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .mh-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 6px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
}
.ds button.mh-list__row {
  cursor: pointer;
  margin: 0 -10px;
  width: calc(100% + 20px);
  padding: 6px 10px;
  border-radius: var(--ds-r-row);
  transition: background-color 0.15s var(--ease-out);
}
.ds button.mh-list__row:hover {
  background: var(--surface-hover);
}
.ds button.mh-list__row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.ds .mh-list__main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .mh-list__at {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}
.ds .mh-list__at .ds-time {
  font-size: 13px;
}
.ds .mh-list__at.is-bad,
.ds .mh-list__at.is-bad .ds-time {
  color: var(--error);
}
.ds .mh-tries {
  color: var(--warning);
}

/* facts under a card (DsDetailList) take a tone when a figure needs a look */
.ds .mh-facts {
  margin-top: 4px;
}
.ds .mh-facts--foot {
  margin-top: 20px;
}
.ds .mh-fact--warn .ds-dl__value {
  color: var(--warning);
}
.ds .mh-fact--bad .ds-dl__value {
  color: var(--error);
}

/* bar rows (funnel, speed, conversion): name · count · share over a thin track */
.ds .mh-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .mh-bars--dense {
  gap: 8px;
}
.ds .mh-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 14px;
}
.ds .mh-bar__name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .mh-bar__count {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .mh-bar__share {
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ds .mh-bar .mh-bar__track {
  grid-column: 1 / -1;
}
.ds .mh-bar__track {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--ds-chart-track);
  overflow: hidden;
}
.ds .mh-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mh-fill, 0%);
  border-radius: inherit;
  background: var(--ds-chart-neutral);
  transition: width 0.4s var(--ease-out);
}
.ds .mh-bar__fill.is-in {
  background: var(--ds-chart-in);
}
.ds .mh-bar__fill.is-out {
  background: var(--ds-chart-out);
}
.ds .mh-bar__fill.is-muted {
  background: var(--ds-chart-neutral);
}

/* a count next to a card title */
.ds .mh-count {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ds .mh-count.is-warn {
  color: var(--warning);
}

/* sortable column heads (report tables) */
.ds .mh-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -4px -6px;
  padding: 4px 6px;
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.ds .mh-sort:hover {
  color: var(--text);
}
.ds .mh-sort:focus-visible {
  outline: 2px solid var(--focus-ring);
}
.ds .mh-sort__icon {
  opacity: 0.35;
}
.ds .mh-sort.is-on {
  color: var(--text);
}
.ds .mh-sort.is-on .mh-sort__icon {
  opacity: 1;
}
.ds th.mh-num .mh-sort {
  flex-direction: row;
}

/* the open-row chevron column */
.ds .mh-chev-col {
  width: 40px;
}
.ds .mh-chev {
  width: 40px;
  text-align: right;
  color: var(--text-2);
}

/* ================================================================
   Dashboard
   ================================================================ */
.ds .mh-dash-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* the equation and what can leave now */
.ds .mh-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 12px;
  margin-bottom: 12px;
  transition: opacity 0.2s var(--ease-out);
}
.ds .mh-top.is-busy,
.ds .ds-kpi-row.is-busy {
  opacity: 0.6;
}
.ds .mh-skel-eq .ds-skel--block {
  height: 150px;
}
.ds .mh-skel-chart .ds-skel--block {
  height: 320px;
}
.ds .mh-eq .ds-card__body {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 24px 28px;
}
.ds .mh-eq__terms {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr);
  align-items: start;
  gap: 8px 16px;
  width: 100%;
}
.ds .mh-eq__term {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ds .mh-eq__label {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .mh-eq__value {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ds .mh-eq__term--net .mh-eq__value {
  font-size: 38px;
}
.ds .mh-eq__op {
  align-self: start;
  margin-top: 26px;
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  color: var(--text-2);
}
.ds .mh-eq__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .mh-eq__meta .pnl-flow {
  color: inherit;
}
/* the hero's change: the kit's delta chip (kit.css .ds-delta) */
.ds .mh-delta {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--idle-tint);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .mh-delta.is-good {
  background: var(--success-tint);
  color: var(--success);
}
.ds .mh-delta.is-bad {
  background: var(--error-tint);
  color: var(--error);
}
.ds .mh-avail .ds-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 18px 20px 20px 24px;
}
.ds .mh-avail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-right: -8px;
}
.ds .mh-avail__value {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .mh-avail__usdt {
  font-size: 13px;
  color: var(--text-2);
}
.ds .mh-avail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 12px;
}
.ds .mh-avail__why {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}
.ds .mh-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* KPI tiles: the kit tile + a note line and the period's spark */
.ds .mh-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ds .mh-kpi__note {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .mh-kpi__note .pnl-flow {
  color: inherit;
}
.ds .mh-kpi__spark {
  height: 32px;
  margin: 14px -20px -18px;
}
.ds .mh-kpi__spark .sparkline-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* the card grid under the chart */
.ds .mh-dash .mh-flow {
  margin-bottom: 12px;
}
.ds .mh-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    'funnel funnel quality quality balance balance'
    'seg seg seg seg seg seg'
    'int int int int disp disp'
    'live live live live hooks hooks';
  gap: 12px;
}
.ds .mh-grid.is-quiet {
  grid-template-areas:
    'balance balance balance int int int'
    'live live live live hooks hooks';
}
.ds .mh-grid > div {
  display: flex;
  min-width: 0;
}
.ds .mh-grid > div > .ds-card {
  flex: 1;
  min-width: 0;
}
.ds .mh-area-funnel { grid-area: funnel; }
.ds .mh-area-quality { grid-area: quality; }
.ds .mh-area-balance { grid-area: balance; }
.ds .mh-area-seg { grid-area: seg; }
.ds .mh-area-int { grid-area: int; }
.ds .mh-area-disp { grid-area: disp; }
.ds .mh-area-live { grid-area: live; }
.ds .mh-area-hooks { grid-area: hooks; }

/* the admin merchant page puts the same cards in its own grid (mdash-area-*) */
.ds [class^='mdash-area-'] > .ds-card {
  height: 100%;
}

.ds .mh-card .ds-card__actions {
  align-self: center;
}

/* balance card */
.ds .mh-bal__line {
  height: 56px;
  margin: 4px 0 6px;
}
.ds .mh-bal__line .sparkline-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ds .mh-bal__ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .mh-bal__ends > span:last-child {
  text-align: right;
}
.ds .mh-bal .mh-sub {
  margin: 20px 0 8px;
}
.ds .mh-bal .ds-entity {
  color: var(--text);
}

/* disputes card */
.ds .mh-disp__row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.ds .mh-disp__who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds .mh-disp__no {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* integration card: webhooks | API */
.ds .mh-int__halves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}
.ds .mh-int__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  margin-bottom: 12px;
}
.ds .mh-int__fails {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.ds .mh-int__spark {
  height: 28px;
}
.ds .mh-int__spark .sparkline-svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: var(--ds-chart-out);
}

/* geo × method segments */
.ds .mh-seg .ds-card__head {
  padding-bottom: 16px;
}
.ds .mh-seg .ds-empty {
  padding-bottom: 24px;
}
.ds .mh-conv {
  display: grid;
  grid-template-columns: 52px minmax(60px, 120px);
  align-items: center;
  gap: 10px;
}
.ds .mh-conv__pct {
  font-variant-numeric: tabular-nums;
}

/* live feed */
.ds .mh-live .ds-table-frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ds .mh-live .ds-empty,
.ds .mh-seg .ds-empty {
  padding-left: 20px;
  padding-right: 20px;
}
.ds .mh-hook .mh-list__main {
  font-size: 13px;
}
.ds .mh-hooks .ds-empty {
  padding-top: 8px;
}

/* the money-flow chart's tooltip foot (count · commission) */
.ds .mh-tip-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--ds-chart-tooltip-text);
  opacity: 0.8;
}

/* segment sheet */
.ds .mh-seg-sheet__hero {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds .mh-seg-sheet__value {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ds .mh-seg-sheet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 6px 0 20px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .mh-skel-sheet .ds-skel--block {
  height: 180px;
}

/* ================================================================
   Finance
   ================================================================ */
.ds .mh-skel-wallets .ds-skel--block {
  height: 230px;
}
.ds .mh-wallets {
  margin-bottom: 12px;
}
.ds .mh-wallets .ds-card__body {
  padding: 0;
}
.ds .mh-wallets__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
}
.ds .mh-wallet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 20px 24px 24px;
}
.ds .mh-wallet + .mh-wallet {
  border-left: 1px solid var(--hairline);
}
.ds .mh-wallet--pair {
  gap: 20px;
}
.ds .mh-wallet--pair > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds .mh-wallet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  align-self: stretch;
  min-height: 32px;
  margin-right: -8px;
}
.ds .mh-wallet__label {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .mh-wallet__code {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.ds .mh-wallet__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ds .mh-wallet__value--xl {
  font-size: 36px;
  line-height: 1.1;
}
.ds .mh-wallet__value--lg {
  font-size: 28px;
  line-height: 1.15;
}
.ds .mh-wallet__value--md {
  font-size: 20px;
  line-height: 1.2;
}
.ds .mh-wallet__usdt {
  margin-top: -4px;
  color: var(--text-2);
}
.ds .mh-wallet__usdt .ds-money {
  color: var(--text-2);
}
.ds .mh-wallet__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .mh-wallet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.ds .mh-wallet__why {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .mh-wallets__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

/* settlement requests and the ledger */
.ds .mh-clip {
  display: inline-block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.ds .mh-th-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-2);
}
.ds .mh-wcell {
  font-variant-numeric: tabular-nums;
}
.ds .mh-wcell .ds-money {
  display: flex;
  justify-content: flex-end;
}
.ds .mh-wcell .mh-wcell__delta {
  display: block;
}
.ds .mh-wcell .mh-wcell__after,
.ds .mh-wcell .mh-wcell__after .ds-money__usdt {
  color: var(--text-2);
}
.ds .mh-ledger .mh-desc {
  min-width: 200px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.4;
}
.ds .rt--stacked .mh-num,
.ds .rt--stacked .mh-wcell .ds-money {
  text-align: left;
  justify-content: flex-start;
}

/* reports */
.ds .mh-rep-period {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.ds .mh-report {
  margin-top: 24px;
}
.ds .mh-report + .mh-report {
  margin-top: 40px;
}

/* sheets: settle, transfer, a settlement request */

.ds .mh-sheet__gap {
  margin-top: 16px;
}

.ds .mh-tx {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

/* ================================================================
   Settings (the shared SettingsPage grammar: cards with a lead, facts, fields, one action row)
   ================================================================ */
.ds .mh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ds .mh-set__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ds .mh-set__col {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.ds .mh-set__anchor {
  scroll-margin-top: 96px;
}
.ds .mh-set__secret {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ds .mh-set__secret + .mh-set__secret {
  margin-top: 18px;
}
.ds .mh-set__secret > .ds-dl {
  flex: 1;
  min-width: 0;
}
.ds .mh-set__secret .ds-dl__value {
  overflow-wrap: anywhere;
}
.ds .mh-set__field {
  margin-top: 24px;
}
.ds .mh-set__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.ds .mh-set__note {
  margin-top: 12px;
}
.ds .mh-set__gap {
  margin-bottom: 16px;
}
.ds .mh-set__facts {
  margin-top: 28px;
}
.ds .mh-set__intro {
  margin-bottom: 20px;
}
.ds .mh-set__foot {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .mh-set__current {
  margin-bottom: 18px;
}
.ds .mh-set__h3 {
  margin-bottom: 10px;
}
.ds .mh-set__origins {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.ds .mh-set__origins li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 0 4px 0 12px;
  border-radius: var(--ds-r-row);
  background: var(--wash-1);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.ds .mh-set__add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin-top: 8px;
}
.ds .mh-set__add > .ds-btn {
  margin-top: 26px;
}
.ds .mh-set__rules {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.ds .mh-set__lines {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
}
.ds .mh-set__code {
  max-width: 200px;
  font-size: 18px;
  letter-spacing: 0.2em;
}
.ds .mh-set__addr {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* spreads: method · pay-in % · pay-out %, grouped by country */
.ds .mh-spreads {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ds .mh-spreads thead th {
  padding: 0 0 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  text-align: left;
}
.ds .mh-spreads thead th.mh-num {
  text-align: right;
}
.ds .mh-spreads tbody th,
.ds .mh-spreads td {
  padding: 7px 0;
  font-weight: 400;
  text-align: left;
  vertical-align: baseline;
}
.ds .mh-spreads tbody th {
  color: var(--text);
}
.ds .mh-spreads td.mh-num {
  padding-left: 16px;
  font-weight: 500;
  text-align: right;
}
.ds .mh-spreads__geo th {
  padding-top: 14px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .mh-spreads__def {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2);
}

/* the regenerated API secret */
.ds .mh-secret {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-2);
}
.ds .mh-secret__value {
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ================================================================
   Sandbox tools: pay page test (+ return) and checkout appearance (chrome only:
   the live preview is the real hosted page in its own frame and takes no portal CSS)
   ================================================================ */
.ds .mh-tools__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ds .mh-tools__col,
.ds .mh-tools__narrow {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.ds .mh-tools__narrow {
  max-width: 820px;
}
.ds .mh-tools__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ds .mh-tools__wide {
  grid-column: 1 / -1;
}
.ds .mh-tools__urls {
  margin-top: 24px;
}
.ds .mh-tools__notice {
  margin-top: 16px;
}
.ds .mh-tools__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.ds .mh-tools__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}
.ds .mh-tools__facts .ds-dl__value {
  overflow-wrap: anywhere;
}
.ds .mh-tools__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 180px;
  margin: 0;
  text-align: center;
}
.ds .mh-tools__qr img {
  width: 160px;
  height: 160px;
  padding: 10px;
  border-radius: var(--ds-r-panel);
  background: var(--qr-plate);
}
.ds .mh-tools__qr figcaption {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-2);
}
.ds .mh-tools__steps {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.ds .mh-tools__steps li + li {
  margin-top: 10px;
}
.ds .mh-tools__steps li::marker {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .mh-tools__foot {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .mh-poll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds .mh-poll__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: mh-pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes mh-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .ds .mh-poll__dot {
    animation: none;
  }
}

/* checkout appearance: kit pieces inside the editor's own grid */
.ds .mh-appear .ds-page-head {
  margin-bottom: 20px;
}
.ds .mh-appear__notice {
  margin: 12px 0;
}
.ds .mh-appear__toggle {
  display: flex;
  width: 100%;
  margin-top: 14px;
}
.ds .mh-appear__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ds .mh-appear .card-title {
  display: block;
}
.ds .mh-appear .appear-bottom .card-header {
  padding-bottom: 0;
  border-bottom: 0;
}
.ds .mh-appear .appear-bottom .ds-tabs {
  width: 100%;
}
.ds .mh-skel-preview .ds-skel--block {
  height: 640px;
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1200px) {
  .ds .mh-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'funnel quality'
      'balance balance'
      'seg seg'
      'int int'
      'disp disp'
      'live live'
      'hooks hooks';
  }
  .ds .mh-grid.is-quiet {
    grid-template-areas:
      'balance int'
      'live live'
      'hooks hooks';
  }
}
@media (max-width: 1100px) {
  .ds .mh-tools__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .mh-set__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .mh-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .mh-wallets__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ds .mh-wallet--main {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--hairline);
  }
  .ds .mh-wallet--main + .mh-wallet {
    border-left: 0;
  }
}
@media (max-width: 760px) {
  .ds .mh-tools__form {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .mh-tools__result {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .mh-set__secret {
    flex-direction: column;
    align-items: stretch;
  }
  .ds .mh-set__secret > .ds-btn {
    align-self: flex-start;
  }
  .ds .mh-dash-controls {
    justify-content: flex-start;
  }
  .ds .mh-eq .ds-card__body {
    padding: 18px;
  }
  .ds .mh-eq__terms {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .ds .mh-eq__op {
    display: none;
  }
  .ds .mh-eq__value {
    font-size: 24px;
  }
  .ds .mh-eq__term--net .mh-eq__value {
    font-size: 28px;
  }
  .ds .mh-grid,
  .ds .mh-grid.is-quiet {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'funnel'
      'quality'
      'balance'
      'seg'
      'int'
      'disp'
      'live'
      'hooks';
  }
  .ds .mh-grid.is-quiet {
    grid-template-areas:
      'balance'
      'int'
      'live'
      'hooks';
  }
  .ds .mh-int__halves {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .mh-kpi__spark {
    margin: 12px -14px -14px;
  }
  .ds .mh-wallets__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .mh-wallet + .mh-wallet {
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .ds .mh-wallet--main {
    border-bottom: 0;
  }
  .ds .mh-wallet {
    padding: 18px;
  }
  .ds .mh-wallet__value--xl {
    font-size: 30px;
  }
  .ds .mh-wallets__foot {
    padding: 14px 18px;
  }
  .ds .mh-disp__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ds .mh-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ds .mh-list__row .mh-list__at {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
@media (max-width: 420px) {
  /* short facts stay two-up on a phone (the kit drops a list to one column here) */
  .ds .mh-page .mh-facts:not(.mh-set__facts) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* a big figure in a half-width tile may not overflow it */
  .ds .mh-page .ds-kpi .ds-money--lg {
    font-size: 18px;
  }
  .ds .mh-page .ds-kpi .ds-money {
    white-space: normal;
    flex-wrap: wrap;
  }
}
/* ================================================================
   Staff package S6, people / growth / access: the Users hub (UsersTabs, Users), the user page (UserDetail and
   its parts: TraderTrafficPanel, TrafficTimeline, TraderDeviceList, TraderAtlasLabelPanel, UserPermissionsEditor,
   TrafficActionDialog is S2's), the affiliates hub (Referrals + Components/Admin/Referrals/*, Affiliates/*), the
   admin wrappers of the partner / affiliate cabinets, the audit log and the staff settings wrapper.
   Owned by that package only. Rules: DS.md. Page parts key on the page root [data-staff-page]; sheets render
   outside it and key on their own class (.sp-sheet); components used on more than one page key on their sp-
   class. Colours only from ds/tokens.css. Prefix: sp- (staff people).
   ================================================================ */

/* ---------- page ---------- */
.ds .sp-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-sans);
}
.ds .sp-page > .ds-page-head {
  margin-bottom: 0;
}
.ds .sp-page .ds-toolbar {
  margin: 0;
}

/* ---------- users hub tab strip ---------- */
.ds .sp-hub-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ds .sp-hub-tabs > .ds-tabs {
  flex: 1 1 auto;
  min-width: 0;
}
.ds .sp-hub-tabs.has-create > .ds-btn {
  flex: none;
  margin-bottom: 6px;
}
.ds .sp-hub-tabs__placeholder {
  flex: 1 1 auto;
  height: 44px;
  border-bottom: 1px solid var(--hairline);
}

/* ---------- table cells ---------- */
.ds .sp-person {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}
.ds .sp-person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds .sp-person__name {
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .sp-person__name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ds .sp-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
}
.ds .sp-clip {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .sp-table td[data-cell='chevron'] {
  width: 1%;
  color: var(--text-2);
}
.ds .sp-nowrap {
  white-space: nowrap;
}
.ds .sp-muted,
.ds .sp-sheet .sp-muted {
  color: var(--text-2);
}
.ds .sp-num,
.ds .sp-sheet .sp-num {
  font-variant-numeric: tabular-nums;
}
.ds .sp-code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}
.ds .sp-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .sp-stack--end {
  align-items: flex-end;
}
.ds .sp-geo,
.ds .sp-method-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds .sp-geo {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ds .sp-method-cell .sp-sub {
  margin-top: 0;
}
.ds .sp-actions,
.ds .sp-sheet .sp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 20px;
}
.ds .sp-actions .sp-sub {
  margin: 0 0 0 4px;
}
.ds .sp-quote {
  margin: 8px 0 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--hairline-strong);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ds .sp-card-pad {
  padding: 0 24px 24px;
}
.ds .sp-card-foot {
  display: flex;
  justify-content: center;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--hairline);
}
.ds .sp-card-foot > .pagination-bar {
  width: 100%;
}
.ds .sp-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--text-2);
}
.ds .sp-total .ds-money {
  font-weight: 500;
  color: var(--text);
}
.ds .sp-atlas,
.ds .sp-sheet .sp-atlas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* ---------- user page ---------- */
.ds .sp-ud .sp-person-card .ds-card__body {
  padding: 20px 24px;
}
.ds .sp-ud .sp-person-card__row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.ds .sp-ud .sp-person-card__facts {
  flex: 1 1 auto;
  min-width: 0;
}
.ds .sp-ud-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ds .sp-ud-layout.has-rail {
  grid-template-columns: minmax(0, 1fr) 340px;
}
.ds .sp-ud-main,
.ds .sp-ud-panel,
.ds .sp-ud-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ds .sp-ud-rail {
  position: sticky;
  top: 88px;
}
.ds .sp-ud .sp-ce {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ds .sp-ud .sp-spreads td[data-cell="actions"] {
  width: 1%;
}
@media (max-width: 1180px) {
  .ds .sp-ud-layout.has-rail {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .sp-ud-rail {
    position: static;
    order: -1;
  }
}
@media (max-width: 640px) {
  .ds .sp-ud .sp-person-card__row {
    flex-direction: column;
    gap: 14px;
  }
  .ds .sp-ud .sp-person-card .ds-card__body {
    padding: 16px;
  }
  .ds .sp-card-pad {
    padding: 0 16px 16px;
  }
}

/* ---------- sheets (edit name, spreads, deposit) ---------- */
.ds .sp-sheet .sp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .sp-sheet .sp-form--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .ds .sp-sheet .sp-form--2 {
    grid-template-columns: 1fr;
  }
}
.ds .sp-confirm-text {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.ds .sp-confirm-text.sp-muted {
  color: var(--text-2);
}

/* ---------- menu (SpMenu, page-local) ---------- */
.ds .sp-menu {
  position: relative;
  display: inline-flex;
}
.ds .sp-menu__scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.ds .sp-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 61;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 300px;
  padding: 6px;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-popover);
  outline: none;
}
.ds .sp-menu__list--end {
  right: 0;
}
.ds .sp-menu__list--start {
  left: 0;
}
.ds .sp-menu__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.ds .sp-menu__item:hover:not(:disabled),
.ds .sp-menu__item:focus-visible {
  background: var(--popover-row);
  outline: none;
}
.ds .sp-menu__item:disabled {
  color: var(--text-2);
  cursor: not-allowed;
}
.ds .sp-menu__item.is-danger {
  color: var(--error);
}
.ds .sp-menu__note {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-2);
}
.ds .sp-menu__sep {
  height: 1px;
  margin: 4px 8px;
  background: var(--hairline);
}

/* ---------- traffic rail (TraderTrafficPanel) ---------- */
.ds .sp-traffic .ds-card__head {
  padding: 18px 20px 0;
}
.ds .sp-traffic .ds-card__body {
  padding: 8px 16px 14px;
}
.ds .sp-traffic__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .sp-traffic__row {
  padding: 12px 4px;
}
.ds .sp-traffic__row + .sp-traffic__row {
  border-top: 1px solid var(--hairline);
}
.ds .sp-traffic__line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds .sp-traffic__geo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.ds .sp-traffic__geo .sp-sub {
  margin: 0;
}
.ds .sp-traffic__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sp-traffic__warn {
  margin-top: 6px;
  font-size: 13px;
}
.ds .sp-traffic__more {
  margin-top: 4px;
}
.ds .sp-traffic__list--others .sp-traffic__row {
  padding: 8px 4px;
}

/* ---------- activity trail (TrafficTimeline) ---------- */
.ds .sp-trail__day {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.ds .sp-trail__day:first-child {
  margin-top: 0;
}
.ds .sp-trail__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .sp-trail__item {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 0;
  font-size: 14px;
}
.ds .sp-trail__item + .sp-trail__item {
  border-top: 1px solid var(--hairline);
}
.ds .sp-trail__geo,
.ds .sp-trail__actor {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
.ds .sp-trail__time {
  justify-self: end;
}
.ds .sp-trail__reason {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.ds .sp-trail__more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
@media (max-width: 640px) {
  .ds .sp-trail__item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ds .sp-trail__geo,
  .ds .sp-trail__actor {
    grid-column: 1 / 2;
    font-size: 13px;
  }
  .ds .sp-trail__time {
    grid-row: 1;
    grid-column: 2;
  }
}

/* ---------- devices (TraderDeviceList) ---------- */
.ds .sp-devices {
  display: flex;
  flex-direction: column;
  margin: -6px -10px;
  padding: 0;
  list-style: none;
}
.ds .sp-devices .sp-devices__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--ds-r-row);
  color: var(--text);
  text-decoration: none;
}
.ds .sp-devices .sp-devices__row:hover {
  background: var(--wash-2);
  text-decoration: none;
}
.ds .sp-devices__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.ds .sp-devices__name {
  font-size: 14px;
  font-weight: 500;
}
.ds .sp-devices__line {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Atlas label (TraderAtlasLabelPanel) ---------- */
.ds .sp-atl__pending,
.ds .sp-atl__error {
  margin-top: 16px;
}
.ds .sp-atl__defaults {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.ds .sp-atl__defaults .ds-field {
  width: 160px;
}
.ds .sp-atl__defaults-name {
  flex: 1 0 100%;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .sp-atl__owner-lead {
  flex: 1 0 100%;
  max-width: 72ch;
  margin: 0;
}
.ds .sp-atl .ds-table-frame {
  margin: 0 -24px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ds .sp-atl__ref {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ds .sp-atl__input.ds-input {
  width: 96px;
  height: var(--ds-control-h-sm);
}
/* Label profit: a computed rate shown like the rate fields, read-only, tinted by sign. */
.ds .sp-atl__profit.ds-input,
.ds .sp-atl__profit.ds-input:hover,
.ds .sp-atl__profit.ds-input:focus {
  cursor: default;
  outline: none;
  font-weight: 600;
  color: var(--text-2);
}
.ds .sp-atl__profit.ds-input.is-pos {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}
.ds .sp-atl__profit.ds-input.is-neg {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
}
.ds .sp-atl__margin {
  min-width: 64px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ds .sp-atl__margin.is-pos {
  color: var(--success);
}
.ds .sp-atl__margin.is-neg {
  color: var(--error);
}
.ds .sp-atl__hist {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.ds .sp-atl__preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
.ds .sp-atl__preview .sp-actions {
  margin-top: 0;
}

/* ---------- audit log ---------- */
.ds [data-staff-page="audit"] .sp-actor {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
.ds [data-staff-page="audit"] .sp-actor .sp-sub {
  margin: 0;
}
.ds [data-staff-page="audit"] .sp-method {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}
.ds [data-staff-page="audit"] .sp-path {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ds [data-staff-page="audit"] .sp-target {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ---------- tab strips sit on the page rhythm (the page gap is the space under them) ---------- */
.ds .sp-hub-tabs .ds-tabs--line,
.ds .sp-ud-main > .ds-tabs--line,
.ds .sp-page > .ds-tabs--line {
  margin-bottom: 0;
}

/* ---------- referral program of a user (UserReferralPanel) ---------- */
.ds .sp-ref {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ds .sp-ref > .sp-ref__wide,
.ds .sp-ref.is-compact > .ds-card {
  grid-column: 1 / -1;
}
.ds .sp-ref.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ds .sp-ref.is-compact > .ds-card {
  grid-column: auto;
}
@media (max-width: 900px) {
  .ds .sp-ref,
  .ds .sp-ref.is-compact {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ds .sp-text {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.ds .sp-text:first-child {
  margin-top: 0;
}
.ds .sp-text.sp-muted {
  color: var(--text-2);
}
.ds .sp-clip-any {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .sp-inline-status {
  margin-left: 8px;
}
.ds .sp-ledger-main {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
}
.ds .sp-ref .ds-card--flush .ds-table-frame + .ds-table-frame {
  border-top: 1px solid var(--hairline);
}
.ds .sp-sheet .sp-sheet__notice {
  margin-top: 16px;
}
.ds .sp-sheet .sp-sheet__left {
  margin-right: auto;
}
.ds .sp-field-error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--error);
}
.ds .sp-strong,
.ds .sp-sheet .sp-strong {
  font-weight: 500;
  color: var(--text);
}
.ds .sp-flag {
  display: inline-block;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -1px;
}
.ds .sp-geos {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.ds .sp-geos__one {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ds .sp-partner-sub,
.ds .sp-sub.sp-partner-sub {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
}
.ds .sp-partner-sub .ds-status {
  font-size: 13px;
}
.ds .sp-partner-dep {
  color: var(--text-2);
}
.ds [data-staff-page] .pg-table tbody tr.is-muted {
  opacity: 0.6;
}
.ds [data-staff-page] .pg-table tbody tr.is-selected {
  background: var(--wash-2);
}
.ds [data-staff-page] .pg-table tbody tr.is-suspicious > td:first-child {
  box-shadow: inset 2px 0 0 var(--warning);
}

/* sortable column heads (PartnersTab) */
.ds .sp-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ds .sp-sort:hover,
.ds .sp-sort.is-on {
  color: var(--text);
}
.ds .sp-sort:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- affiliates hub (Referrals + its tabs) ---------- */
.ds .sp-refhub__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ds .sp-refhub .ds-page-head__actions .ds-period {
  justify-content: flex-end;
}
.ds .sp-refhub__seg {
  align-self: flex-start;
}
.ds .sp-ov {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
  transition: opacity 0.2s ease;
}
.ds .sp-ov.is-busy {
  opacity: 0.6;
}
.ds .sp-ov__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 1100px) {
  .ds .sp-ov {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ds .sp-tasks {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .sp-tasks__item {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.ds .sp-tasks__item + .sp-tasks__item {
  border-top: 1px solid var(--hairline);
}
.ds .sp-tasks__value {
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .sp-tasks__text {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--text-2);
}
@media (max-width: 560px) {
  .ds .sp-tasks__item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ds .sp-tasks__text {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* program settings (SettingsTab) */
.ds .sp-refset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ds .sp-refset__wide {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .ds .sp-refset {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ds .sp-refset__program {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 20px 32px;
  align-items: start;
}
@media (max-width: 720px) {
  .ds .sp-refset__program {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ds .sp-refset__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.ds .sp-refset__inputs .ds-field {
  width: 200px;
}
.ds .sp-refset .ds-table-frame {
  margin: 0 -24px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ds .sp-refset__ex tbody th {
  padding: 12px 16px;
  font-weight: 400;
  text-align: left;
  color: var(--text-2);
}
.ds .sp-refset__total th,
.ds .sp-refset__total td {
  font-weight: 500;
  color: var(--text);
}
.ds .sp-savebar {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 12px 16px 12px 20px;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--shadow-float);
}
.ds .sp-savebar__text {
  font-size: 14px;
  color: var(--text);
}
.ds .sp-savebar__text.is-warn {
  color: var(--warning);
}
.ds .sp-savebar__text.is-error {
  color: var(--error);
}
.ds .sp-savebar__actions {
  display: flex;
  gap: 8px;
}

/* the four referral rates (RatesGrid): level down, flow across */
.ds .sp-rates {
  display: grid;
  grid-template-columns: max-content repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  align-items: center;
  max-width: 460px;
}
.ds .sp-rates.is-edit {
  align-items: start;
}
.ds .sp-rates__col {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sp-rates__row {
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
}
.ds .sp-rates.is-edit .sp-rates__row {
  padding-top: 10px;
}
.ds .sp-rates__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ds .sp-rates__val {
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.ds .sp-rates__val .sp-rates__unit {
  margin-left: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
}
.ds .sp-rates__hint {
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .sp-rates__hint.is-custom {
  color: var(--text);
}
.ds .sp-rates__field {
  position: relative;
  display: flex;
  align-items: center;
}
.ds .sp-rates__field .sp-rates__input {
  width: 100%;
  min-width: 0;
  padding-right: 30px;
}
.ds .sp-rates__field > .sp-rates__unit {
  position: absolute;
  right: 12px;
  font-size: 13px;
  color: var(--text-2);
  pointer-events: none;
}
.ds .sp-rates__field.is-invalid .sp-rates__input {
  border-color: var(--error);
}
.ds .sp-rates + .sp-text,
.ds .sp-rates + .sp-field-error {
  margin-top: 12px;
}

/* referrer picker (ReferrerPicker) */
.ds .sp-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds .sp-pick__search {
  flex: none;
  width: 100%;
  max-width: none;
}
.ds .sp-pick__hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sp-pick__hint.is-error {
  color: var(--error);
}
.ds .sp-pick__list {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-field);
}
.ds .sp-pick__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.ds .sp-pick__row:hover,
.ds .sp-pick__row:focus-visible {
  background: var(--wash-2);
  outline: none;
}
.ds .sp-pick__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.ds .sp-pick__row .sp-sub {
  margin: 0;
}
.ds .sp-pick__chosen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-field);
}
.ds .sp-pick__chosen .sp-person__text {
  flex: 1 1 auto;
}
.ds .sp-pick__row:disabled {
  color: var(--text-2);
  cursor: not-allowed;
}
.ds .sp-pick__row .sp-sub.is-danger {
  color: var(--error);
}

/* ---------- forms inside sheets ---------- */
.ds .sp-sheet .sp-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
}
.ds .sp-sheet .sp-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds .sp-sheet .sp-group > .ds-tabs,
.ds .sp-sheet .sp-form > .ds-tabs,
.ds .sp-sheet .ds-field .ds-tabs {
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
}
.ds .sp-sheet .sp-group__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .sp-sheet .sp-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds .sp-sheet .sp-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-field);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ds .sp-sheet .sp-choice:hover {
  background: var(--wash-1);
}
.ds .sp-sheet .sp-choice.is-on {
  border-color: var(--hairline-strong);
  background: var(--wash-2);
}
.ds .sp-sheet .sp-choice__radio {
  margin-top: 3px;
  accent-color: var(--accent);
}
.ds .sp-sheet .sp-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-field);
  background: var(--field-bg, var(--surface-raised));
  color: var(--text);
  cursor: pointer;
}
.ds .sp-sheet .sp-key code {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.ds .sp-sheet .sp-key:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .sp-sheet .sp-welcome {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-field);
  background: var(--wash-1);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text);
}

/* ---------- application sheet (ApplicationDrawer) ---------- */
.ds .sp-app__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ds .sp-app__lead {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 640px) {
  .ds .sp-app__lead {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ds .sp-app__sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ds .sp-app__h {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .sp-contacts {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .sp-contacts li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.ds .sp-contacts li + li {
  border-top: 1px solid var(--hairline);
}
.ds .sp-contacts__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .sp-contacts__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text);
}
.ds .sp-contacts__act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ds .sp-chain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .sp-chain li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 14px;
}
.ds .sp-chain li .sp-sub {
  margin: 0;
}
.ds .sp-chain__level {
  min-width: 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .sp-dups {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .sp-dups__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--ds-r-row);
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.ds .sp-dups__row:hover,
.ds .sp-dups__row:focus-visible {
  background: var(--wash-2);
  outline: none;
}
.ds .sp-dups .sp-sub.is-conflict {
  color: var(--warning);
}
.ds .sp-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ds .sp-events {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .sp-events__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--hairline);
}
.ds .sp-events__item.is-note {
  border-left-color: var(--hairline-strong);
}
.ds .sp-events__item.is-conflict {
  border-left-color: var(--warning);
}
.ds .sp-events__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 14px;
}
.ds .sp-events__at {
  margin-left: auto;
  font-size: 13px;
}
.ds .sp-events__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-2);
}
.ds .sp-note-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}
.ds .sp-note-form .ds-field {
  width: 100%;
}
.ds .sp-tech summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
}
.ds .sp-tech[open] summary {
  margin-bottom: 12px;
}
.ds .sp-app__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.ds .sp-app__foot-quiet,
.ds .sp-app__foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ds .sp-app__foot-row {
  margin-left: auto;
}
.ds .sp-app__reject {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ---------- merchant-affiliate deals (AffiliateDealsPanel, MerchantAffiliateSection, DealHistory) ---------- */
.ds .sp-row-actions {
  display: inline-flex;
  gap: 2px;
}
.ds .sp-danger-text {
  color: var(--error);
}
.ds .sp-history {
  border-top: 1px solid var(--hairline);
}
.ds .sp-history > summary {
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
}
.ds .sp-history > summary:hover {
  color: var(--text);
}
.ds .sp-history .ds-table-frame {
  border-top: 1px solid var(--hairline);
}
.ds .sp-card-note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

/* deal sheet (DealSheet) */
.ds .sp-deal .sp-deal__net {
  max-width: 260px;
}
.ds .sp-others {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds .sp-others__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.ds .sp-ex {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
}
.ds .sp-ex .is-busy {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.ds .sp-ex__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .sp-ex__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ds .sp-ex__text + .sp-ex__text {
  margin-top: 8px;
}
.ds .sp-ex__figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
}
.ds .sp-ex__figs.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ds .sp-ex__fig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .sp-ex__label {
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .sp-ex__value {
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .sp-ex__fig.is-accent .sp-ex__value {
  color: var(--success);
}
.ds .sp-ex__sub {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ds .sp-ex__note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .sp-ex__warn {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--warning);
}
.ds .sp-ex__total {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
@media (max-width: 560px) {
  .ds .sp-ex__figs,
  .ds .sp-ex__figs.is-four {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .ds .sp-ex__fig {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
}

/* ---------- admin wrappers of the partner / affiliate cabinets ---------- */
.ds .sp-cabwrap__head .ds-page-head {
  margin: 0;
}
.ds .sp-cabwrap__avatar {
  order: -1;
}
.ds .sp-cabwrap__cabinet {
  min-width: 0;
}
.ds .sp-cabwrap__settings .sp-ref {
  gap: 12px;
}
/* Per-user permission editor (UserPermissionsEditor), sorted by risk tier (2026-10-19).
   Tier tones: Critical = error, Medium = warning, View only = success. The tone marks the tier's section
   edge, its head wash and the review dots; the accent stays on the switches and the primary button. */

.ds .pe-tone--critical {
  --tone: var(--error);
  --tone-tint: var(--error-tint);
}
.ds .pe-tone--medium {
  --tone: var(--warning);
  --tone-tint: var(--warning-tint);
}
.ds .pe-tone--basic {
  --tone: var(--success);
  --tone-tint: var(--success-tint);
}

.ds .pe-count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ds .pe .pe-toolbar {
  margin: 16px 0 4px;
}

/* ---------- a tier: its own panel with the tone on the left edge ---------- */
.ds .pe-tier {
  margin-top: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--tone);
  overflow: hidden;
}
.ds .pe-tier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 18px 14px 21px;
  background: color-mix(in srgb, var(--tone-tint) 55%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.ds .pe-tier__titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 320px;
}
.ds .pe-tier__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ds .pe-tier__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .pe-tier__side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ds .pe-tier__count {
  margin-right: 4px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.ds .pe-tier__count.is-some {
  color: var(--tone);
}

/* ---------- an area inside a tier ---------- */
.ds .pe-area {
  margin: 0;
  padding: 14px 18px 2px 21px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.ds .pe-list {
  margin: 0;
  padding: 0 18px 4px 21px;
  list-style: none;
}

/* ---------- a permission ---------- */
.ds .pe-row {
  border-bottom: 1px solid var(--hairline);
}
.ds .pe-list > .pe-row:last-child {
  border-bottom: 0;
}
.ds .pe-row__main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.ds .pe-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--wash-2);
  color: var(--text-2);
}
.ds .pe-row.is-on .pe-row__icon {
  background: var(--tone-tint);
  color: var(--tone);
}
.ds .pe-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .pe-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .pe-row__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .pe-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  margin-top: 2px;
}
.ds .pe-row__conf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--warning);
}
.ds .pe-row__state {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}
.ds .pe-row__state.is-added {
  color: var(--success);
}
.ds .pe-row__state.is-removed {
  color: var(--warning);
}
.ds .pe-row__state.is-pending {
  color: var(--info);
}
.ds .pe-row__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
}
.ds .pe-row__more:hover,
.ds .pe-row.is-open .pe-row__more {
  background: var(--wash-2);
  color: var(--text);
}
.ds .pe-row__more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* a permission that is on but needs one that is off */
.ds .pe-row__needs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 12px 46px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--ds-r-row);
  background: var(--warning-tint);
  font-size: 13px;
  color: var(--text);
}
.ds .pe-row__needs > .ds-icon {
  color: var(--warning);
}
.ds .pe-row__needs-text {
  flex: 1 1 200px;
}

.ds .pe-row__details {
  margin: 0 0 14px 46px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-raised);
}
/* the facts here are sentences, not figures: body size and weight */
.ds .pe-row__details .ds-dl__value {
  font-size: 14px;
  font-weight: 450;
  line-height: 1.5;
}
.ds .pe-row__details .ds-dl__value.ds-mono {
  font-size: 13px;
}

/* ---------- unsaved changes: sticks to the bottom of the view while the card scrolls ---------- */
.ds .pe-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 16px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-panel);
  background: var(--surface-raised);
  box-shadow: var(--shadow-float);
}
.ds .pe-savebar__text {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ds .pe-savebar__crit {
  font-weight: 600;
  color: var(--error);
}
.ds .pe-savebar__actions {
  display: flex;
  gap: 8px;
}

/* ---------- review sheet ---------- */
.ds .pe-review__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds .pe-review__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .pe-review__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.ds .pe-review__item:last-child {
  border-bottom: 0;
}
.ds .pe-mark {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
}
.ds .pe-review__name {
  min-width: 0;
  color: var(--text);
}
.ds .pe-review__tier {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tone);
  white-space: nowrap;
}
.ds .pe-review__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

@media (max-width: 640px) {
  .ds .pe-tier__head {
    padding: 12px 14px 12px 17px;
  }
  .ds .pe-area {
    padding: 12px 14px 2px 17px;
  }
  .ds .pe-list {
    padding: 0 14px 4px 17px;
  }
  .ds .pe-row__main {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }
  .ds .pe-row__icon,
  .ds .pe-row__more-label {
    display: none;
  }
  .ds .pe-row__needs,
  .ds .pe-row__details {
    margin-left: 0;
  }
  .ds .pe-savebar__actions {
    width: 100%;
  }
  .ds .pe-savebar__actions > .ds-btn {
    flex: 1 1 0;
  }
}
/* Package F2: page fixes after the design critic (2026-10-13). Shared page-local parts only:
   LedgerLine (ledger rows in words), WalletAmountField (the one withdraw amount step). */

/* ---------- LedgerLine: sentence · order link, muted extra line ---------- */
.ds .f2-ledger {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .f2-ledger__text {
  color: var(--text);
}
.ds .f2-ledger__sep {
  margin: 0 6px;
  color: var(--text-2);
}
.ds .f2-ledger__more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  color: var(--text-2);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.ds .f2-ledger__id .ds-id__text,
.ds span.f2-ledger__id.ds-mono {
  font-size: 12.5px;
}

/* ---------- WalletAmountField + the withdraw sheets' shared steps ---------- */
.ds .f2-wd-avail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: var(--ds-r-panel);
  background: var(--wash-1);
  border: 1px solid var(--hairline);
}
.ds .f2-wd-avail__label {
  font-size: 13px;
  color: var(--text-2);
}
.ds .f2-wd-amount {
  position: relative;
}
/* Max sits on the label line, right-aligned, as a quiet action of the field */
.ds .f2-wd-amount__max {
  position: absolute;
  top: -7px;
  right: 0;
}
.ds .f2-wd-amount__input {
  height: 56px;
  font-size: 24px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ds .f2-wd-lead {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}
.ds .f2-wd-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .f2-wd-gap {
  margin-top: 12px;
}

/* ---------- cascade activity log: the provider's answer in words, the raw body behind a disclosure ---------- */
.ds .f2-cas-answer {
  min-width: 0;
  max-width: 420px;
}
.ds .f2-cas-answer__msg {
  color: var(--text);
  overflow-wrap: anywhere;
}
.ds .f2-raw {
  margin-top: 6px;
}
.ds .f2-raw > summary {
  cursor: pointer;
  width: fit-content;
  font-size: 13px;
  color: var(--text-2);
  border-radius: 6px;
}
.ds .f2-raw > summary:hover {
  color: var(--text);
}
.ds .f2-raw > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .f2-raw__code {
  margin: 8px 0 0;
  padding: 12px 14px;
  max-height: 260px;
  overflow: auto;
  border-radius: var(--ds-r-row);
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* trader dashboard: the device / requisite rows' chevron is the kit icon now (was Font Awesome) */
.ds .dvt-dash-go {
  flex: none;
  color: var(--text-2);
}
/* Kit interactions (DS-interactions.md): collapsible DsSection / DsCard (the fold) and the interactive Sparkline.
   Tokens only (tokens.css), both themes follow. Keyed on .ds like the rest of the kit. */

/* ---------- the fold: a collapsible section or card ---------- */

/* the whole title is the toggle: chevron + title (+ the summary while folded) */
.ds .ds-fold__title {
  min-width: 0;
}
.ds .ds-fold .ds-section__titles,
.ds .ds-fold .ds-card__titles {
  flex: 1 1 260px;
  min-width: 0;
}
.ds .ds-fold__toggle {
  display: inline-flex;
  max-width: 100%;
  margin: -4px -8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.ds .ds-fold__toggle:hover {
  background: var(--surface-hover);
}
.ds .ds-fold__toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .ds-fold__chev {
  flex: none;
  margin-right: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: var(--text-2);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.16s ease, background-color 0.16s ease;
}
.ds .ds-fold__toggle:hover .ds-fold__chev {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.ds .ds-fold.is-collapsed .ds-fold__chev {
  transform: rotate(-90deg);
}
/* title, chevron, then the summary: on one line while they fit, the summary under the title when they don't */
.ds .ds-fold__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  min-width: 0;
}
.ds .ds-fold__text {
  min-width: 0;
}
.ds .ds-fold__summary {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  animation: ds-fold-in 0.2s ease both;
}
@keyframes ds-fold-in {
  from { opacity: 0; transform: translateY(-2px); }
}

/* the body: grid rows 1fr → 0fr animate its real height; clipped only while folded or growing back,
   so a tooltip or a dropdown inside an open block is never cut */
.ds .ds-fold__body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}
.ds .ds-fold__inner {
  min-width: 0;
  min-height: 0;
}
.ds .ds-fold.is-collapsed > .ds-fold__body {
  grid-template-rows: 0fr;
  opacity: 0;
}
.ds .ds-fold.is-collapsed > .ds-fold__body > .ds-fold__inner,
.ds .ds-fold.is-opening > .ds-fold__body > .ds-fold__inner {
  overflow: hidden;
}

/* a folded section: its head is the whole block, closed by a hairline */
.ds .ds-section.ds-fold > .ds-section__head {
  transition: margin-bottom 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), padding-bottom 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ds .ds-section.ds-fold.is-collapsed > .ds-section__head {
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
/* a folded card: its head keeps the card's bottom padding */
.ds .ds-card.ds-fold > .ds-card__head {
  transition: padding-bottom 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ds .ds-card.ds-fold.is-collapsed > .ds-card__head {
  align-items: center;
  padding-bottom: 20px;
}
/* a grid of cards (two charts side by side): a folded one does not stretch to its neighbour */
.ds .sfn-charts:has(> .ds-fold.is-collapsed),
.ds .cas-charts:has(> .ds-fold.is-collapsed),
.ds .trh-charts:has(> .ds-fold.is-collapsed) {
  align-items: start;
}
@media (max-width: 640px) {
  .ds .ds-card.ds-fold.is-collapsed > .ds-card__head {
    padding-bottom: 16px;
  }
}

/* ---------- the interactive sparkline ---------- */
.ds .ds-spark {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.ds .ds-spark > .sparkline-svg {
  overflow: visible;
}
.ds .ds-spark:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
/* the guide and the dot take the line's own colour (the svg's stroke, which every page sets) */
.ds .ds-spark .ds-spark__guide {
  stroke: inherit;
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.7;
}
.ds .ds-spark .ds-spark__halo {
  stroke: var(--surface);
  stroke-width: 11px;
  stroke-linecap: round;
  fill: none;
}
.ds .ds-spark .ds-spark__dot {
  stroke: inherit;
  stroke-width: 7px;
  stroke-linecap: round;
  fill: none;
}
/* while a point is read, the line steps back a little so the dot leads */
.ds .ds-spark.is-active .spark-area {
  opacity: calc(var(--ds-chart-area, 0.3) * 1.25);
}

/* the tooltip: the popover surface with a hairline, above the line */
.ds .ds-spark__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px 7px;
  background: var(--ds-chart-tooltip-bg, var(--popover));
  border: 1px solid var(--ds-chart-tooltip-border, var(--hairline-strong));
  border-radius: 10px;
  box-shadow: var(--shadow-listbox);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  animation: ds-spark-tip 0.12s ease-out both;
}
.ds .ds-spark__tip-label {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .ds-spark__tip-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-chart-tooltip-text, var(--text));
  font-variant-numeric: tabular-nums;
}
@keyframes ds-spark-tip {
  from { opacity: 0; transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .ds .ds-fold__body,
  .ds .ds-fold__chev,
  .ds .ds-fold__toggle,
  .ds .ds-section.ds-fold > .ds-section__head,
  .ds .ds-card.ds-fold > .ds-card__head {
    transition: none;
  }
  .ds .ds-fold__summary,
  .ds .ds-spark__tip {
    animation: none;
  }
}

/* DsTab ImageUrl: a small flag (or logo) before the tab label, e.g. the geo switch on Merchant rates. */
.ds .ds-tab__img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 1px var(--hairline);
}
.ds .ds-tab:has(.ds-tab__img) {
  gap: 8px;
}

/* Sparkline line: one width at any stretch, rounded joins (Sparkline.razor draws a smooth monotone path). */
.ds .sparkline-svg .spark-line {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
}

/* ---------- DsTabs Look=Cells: status / filter tabs with counts ----------
   The staff-network legend (NetBandFilter) as the kit's filter tabs: one bordered cell per value — title,
   a muted one-line hint, the count big on the right. A cell whose DsTab has a Tone and a count > 0 is
   painted in that tone (tint, a tone edge on the left, the count in the tone), so "whose move" reads at a
   glance; zero stays neutral. The selected cell gets the accent ring on top of whatever paint it has.
   Columns are balanced per container width from three counts DsTabs writes inline (--ds-cells-lg/md/sm:
   ≤ 6 / 4 / 3 per row); under 520px the cells become one sideways snap row (a cell and a peek). */
.ds .ds-cells {
  container-type: inline-size;
  min-width: 0;
  margin-bottom: 16px;
}
.ds .ds-tabs--cells {
  display: grid;
  grid-template-columns: repeat(var(--ds-cells-lg, 4), minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
}
@container (max-width: 1059px) {
  .ds .ds-tabs--cells { grid-template-columns: repeat(var(--ds-cells-md, 4), minmax(0, 1fr)); }
}
@container (max-width: 719px) {
  .ds .ds-tabs--cells { grid-template-columns: repeat(var(--ds-cells-sm, 3), minmax(0, 1fr)); }
}
@container (max-width: 519px) {
  .ds .ds-tabs--cells {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* one cell and a peek of the next, so the hint line has room */
    grid-auto-columns: minmax(200px, 68%);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    /* room for the selected ring and focus outline inside the scroller */
    padding: 3px 3px 5px;
    margin: -3px -3px -5px;
  }
  .ds .ds-tabs--cells > .ds-cell { scroll-snap-align: start; }
  /* a narrow cell gets two lines for its hint instead of one cut short */
  .ds .ds-tabs--cells .ds-cell__hint {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
  }
}

.ds .ds-cell {
  --cell-tone: var(--text);
  --cell-tint: transparent;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'title count' 'hint count';
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  min-width: 0;
  min-height: 62px;
  height: auto;
  margin: 0;
  padding: 10px 14px 10px 15px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-row);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  white-space: normal;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.ds .ds-cell__title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
}
.ds .ds-cell__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds .ds-cell__hint {
  grid-area: hint;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ds .ds-cell__count {
  grid-area: count;
  justify-self: end;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .ds-cell.is-zero .ds-cell__count {
  font-weight: 500;
  color: var(--text-2);
}
.ds .ds-cell__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
}
.ds .ds-cell__dot--ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
.ds .ds-cell__dot--warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-tint); }
.ds .ds-cell__dot--info { background: var(--info); box-shadow: 0 0 0 3px var(--info-tint); }
.ds .ds-cell__dot--bad {
  background: var(--error);
  box-shadow: 0 0 0 3px var(--error-tint);
  animation: ds-cell-dot 2s ease-in-out infinite;
}
@keyframes ds-cell-dot {
  50% { box-shadow: 0 0 0 5px var(--error-tint); }
}

/* painted by tone while it holds something */
/* Tones: clean, saturated hues (not the muddy token tints), a soft diagonal wash of the tone and a tone border.
   No edge bar: it ran past the rounded corners. Selected = an INSET ring, so it always follows the radius. */
.ds .ds-cell--ok { --cell-tone: #34d399; }
.ds .ds-cell--warn { --cell-tone: #fbbf24; }
.ds .ds-cell--bad { --cell-tone: #f87171; }
.ds .ds-cell--info { --cell-tone: #60a5fa; }
:root[data-theme='light'] .ds .ds-cell--ok, html[data-theme='light'] .ds .ds-cell--ok { --cell-tone: #059669; }
:root[data-theme='light'] .ds .ds-cell--warn, html[data-theme='light'] .ds .ds-cell--warn { --cell-tone: #d97706; }
:root[data-theme='light'] .ds .ds-cell--bad, html[data-theme='light'] .ds .ds-cell--bad { --cell-tone: #dc2626; }
:root[data-theme='light'] .ds .ds-cell--info, html[data-theme='light'] .ds .ds-cell--info { --cell-tone: #2563eb; }
.ds .ds-cell.is-toned {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cell-tone) 20%, transparent) 0%,
      color-mix(in srgb, var(--cell-tone) 7%, transparent) 70%),
    var(--surface);
  border-color: color-mix(in srgb, var(--cell-tone) 50%, transparent);
}
:root[data-theme='light'] .ds .ds-cell.is-toned,
html[data-theme='light'] .ds .ds-cell.is-toned {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cell-tone) 14%, #fff) 0%,
      color-mix(in srgb, var(--cell-tone) 4%, #fff) 70%);
  border-color: color-mix(in srgb, var(--cell-tone) 40%, transparent);
}
.ds .ds-cell.is-toned .ds-cell__count {
  color: var(--cell-tone);
}
.ds .ds-cell.is-toned .ds-cell__label {
  color: var(--text);
}

/* hover, selected, focus */
.ds .ds-cell:hover {
  color: var(--text);
  border-color: var(--hairline-hover);
  background: var(--surface-hover);
}
.ds .ds-cell.is-toned:hover {
  border-color: color-mix(in srgb, var(--cell-tone) 75%, transparent);
  filter: brightness(1.06);
}
.ds .ds-cell.is-active,
.ds .ds-cell.is-active:hover {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 10px 24px -14px var(--accent-glow);
}
.ds .ds-cell.is-toned.is-active,
.ds .ds-cell.is-toned.is-active:hover {
  border-color: var(--cell-tone);
  box-shadow: inset 0 0 0 1px var(--cell-tone), 0 10px 24px -14px color-mix(in srgb, var(--cell-tone) 70%, transparent);
}
/* a neutral selected cell sits on the segment surface (as the legend does), not on an accent tint: in light
   the indigo tint would read as an info cell */
.ds .ds-cell.is-active:not(.is-toned),
.ds .ds-cell.is-active:not(.is-toned):hover {
  background: var(--segment-on);
}
.ds .ds-cell.is-active:not(.is-toned) .ds-cell__count {
  font-weight: 600;
  color: var(--accent-soft-text);
}
.ds .ds-cell:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--ds-r-row);
}
/* the flag of a geo cell sits in the title row */
.ds .ds-cell .ds-tab__img { margin-right: -2px; }

@media (prefers-reduced-motion: reduce) {
  .ds .ds-cell { transition: none; }
  .ds .ds-cell__dot--bad { animation: none; }
}

/* DsKpi OnClick: a tile that is a toggle for the filter it counts. The cell tabs' language: a hover surface, the
   accent ring when selected (aria-pressed), the focus ring on keyboard focus. */
.ds button.ds-kpi--action {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.ds .ds-kpi--action:hover {
  border-color: var(--hairline-hover);
  background: var(--surface-hover);
}
.ds .ds-kpi--action.is-active,
.ds .ds-kpi--action.is-active:hover {
  border-color: var(--accent);
  background: var(--segment-on);
  box-shadow: inset 0 0 0 1px var(--accent), 0 10px 24px -14px var(--accent-glow);
}
.ds .ds-kpi--action:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ds button.ds-kpi--action { transition: none; }
}

/* DsKpi Class="ds-kpi--head": the one figure a list keeps once its status counters moved into the cells
   (delivery rate, conversion, a page sum), as a compact tile in the page head's actions slot instead of
   a row with a single tile in it. On phones the actions wrap under the title and the tile takes the width. */
.ds .ds-page-head__actions .ds-kpi--head {
  min-width: 220px;
  padding: 12px 16px;
  box-shadow: none;
  border-color: var(--hairline-strong);
}
.ds .ds-kpi--head .ds-kpi__value {
  margin-top: 6px;
  font-size: 24px;
}
.ds .ds-kpi--head .ds-kpi__foot {
  margin-top: 4px;
}
@media (max-width: 640px) {
  .ds .ds-page-head__actions:has(> .ds-kpi--head) { width: 100%; }
  .ds .ds-page-head__actions .ds-kpi--head { flex: 1 1 100%; }
}
/* Card stats package: a requisite's conversion block (Components/CardStats/CardStatsPanel and its charts),
   the conversion column of the trader's and the staff requisite lists, and the main admin's settings sheet.
   Tokens only; the chart roles are --ds-chart-* (pay-ins blue, completed green, expired red, conversion the
   headline accent, references neutral). Everything keys on .ds. */

/* ---------- the block ---------- */
.ds .cs {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0 0 16px;
}
.ds .cs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.ds .cs-head__titles {
  min-width: 0;
  max-width: 640px;
}
.ds .cs-head__lead {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .cs-hint {
  margin: 0;
}
.ds .cs-kpis {
  margin: 0;
}
.ds .cs-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}
.ds .cs--compact .cs-grid {
  grid-template-columns: minmax(0, 1fr);
}
.ds .cs-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .cs-muted {
  color: var(--text-2);
}

/* ---------- legend keys: a dot (or a line) in the series' role colour ---------- */
.ds .cs-key--created { --cs-k: var(--ds-chart-payin); }
.ds .cs-key--completed { --cs-k: var(--ds-chart-completed); }
.ds .cs-key--expired { --cs-k: var(--ds-chart-expired); }
.ds .cs-key--failed { --cs-k: var(--ds-chart-out-3); }
.ds .cs-key--open { --cs-k: var(--ds-chart-neutral); }
.ds .cs-key--conversion { --cs-k: var(--ds-chart-conversion); }
.ds .cs-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ds-chart-legend-text);
  white-space: nowrap;
}
.ds .cs-key::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cs-k, var(--ds-chart-neutral));
}
.ds .cs-key--line::before {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.ds .cs-key--ref::before {
  width: 14px;
  height: 0;
  border-radius: 0;
  background: none;
  border-top: 2px dashed var(--ds-chart-neutral);
}
.ds .cs-key--ref-trader::before {
  border-top-style: dotted;
}
.ds .cs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
}

/* ---------- charts: a stretched plot with HTML axes, grid, bars, dots and one tooltip ---------- */
.ds .cs-chart__caps {
  display: flex;
  justify-content: space-between;
  margin: 0 0 8px;
  font-size: 11.5px;
  color: var(--ds-chart-axis);
}
.ds .cs-chart__frame {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 8px;
  height: 240px;
}
.ds .cs-chart__y {
  position: relative;
  font-size: 11.5px;
  color: var(--ds-chart-axis);
  font-variant-numeric: tabular-nums;
}
.ds .cs-chart__y > span {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  white-space: nowrap;
}
.ds .cs-chart__y--pct > span {
  right: auto;
  left: 0;
}
.ds .cs-chart__plot {
  position: relative;
  min-width: 0;
  border-radius: 6px;
}
.ds .cs-chart__plot:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}
.ds .cs-chart__grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--ds-chart-grid);
  pointer-events: none;
}
.ds .cs-chart__grid.is-zero {
  border-top-color: var(--ds-chart-grid-zero);
}
.ds .cs-chart__cols {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.ds .cs-chart__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  border-radius: 4px 4px 0 0;
}
.ds .cs-chart__col.is-current {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.ds .cs-chart__col.is-active {
  background: var(--wash-2);
}
.ds .cs-bar {
  display: block;
  flex: 0 1 14px;
  min-width: 1px;
  border-radius: 3px 3px 0 0;
}
.ds .cs-bar--created {
  background: var(--ds-chart-payin);
}
.ds .cs-bar--completed {
  background: var(--ds-chart-completed);
}
.ds .cs-bar--hour {
  flex-basis: 18px;
  background: var(--ds-chart-conversion);
}
.ds .cs-bar--hour.is-weak {
  background: var(--ds-chart-expired);
}
.ds .cs-bar--hour.is-thin {
  background: var(--ds-chart-neutral);
  opacity: 0.35;
}
.ds .cs-key--thin::before {
  background: var(--ds-chart-neutral);
  opacity: 0.35;
}
.ds .cs-key--ref-self::before {
  border-top-color: var(--ds-chart-conversion);
}
.ds .cs-hours__legend {
  margin-top: 12px;
}
.ds .cs-chart__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ds .cs-chart__line polyline {
  fill: none;
  stroke: var(--ds-chart-conversion);
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ds .cs-chart__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ds .cs-chart__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: 0 0 -4px -4px;
  border-radius: 50%;
  background: var(--ds-chart-conversion);
  box-shadow: 0 0 0 2px var(--surface);
}
.ds .cs-chart__dot.is-active {
  width: 10px;
  height: 10px;
  margin: 0 0 -5px -5px;
}
.ds .cs-chart__ref {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1.5px dashed var(--ds-chart-neutral);
  pointer-events: none;
}
.ds .cs-chart__ref--trader {
  border-top-style: dotted;
  border-top-width: 2px;
}
.ds .cs-chart__ref--self {
  border-top-color: var(--ds-chart-conversion);
}
.ds .cs-chart__ref-label {
  position: absolute;
  right: 4px;
  bottom: 3px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.ds .cs-chart__ref--trader .cs-chart__ref-label {
  right: auto;
  left: 4px;
}
.ds .cs-chart__x {
  position: relative;
  height: 18px;
  margin: 8px 44px 0;
  font-size: 11.5px;
  color: var(--ds-chart-axis);
}
.ds .cs-chart__x > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* the one tooltip look (charts.css) for this package's charts */
.ds .cs-tip {
  position: absolute;
  top: 0;
  z-index: 3;
  min-width: 184px;
  margin: 0;
  padding: 10px 12px;
  transform: translateX(14px);
  background: var(--ds-chart-tooltip-bg);
  border: 1px solid var(--ds-chart-tooltip-border);
  border-radius: 12px;
  box-shadow: var(--shadow-listbox);
  color: var(--ds-chart-tooltip-text);
  font-size: 13px;
  pointer-events: none;
}
.ds .cs-tip--left {
  transform: translateX(calc(-100% - 14px));
}
.ds .cs-tip__title {
  margin: 0 0 6px;
  font-weight: 500;
}
.ds .cs-tip__row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  padding: 2px 0;
}
.ds .cs-tip__row > span:nth-child(2) {
  color: var(--text-2);
}
.ds .cs-tip__row > b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ds .cs-tip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cs-k, var(--ds-chart-neutral));
}

/* hour of day */
.ds .cs-hours__frame {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  height: 180px;
}
.ds .cs-hours__cols {
  gap: 3px;
}
.ds .cs-hours__x {
  margin: 8px 0 0 44px;
}
.ds .cs-hours__note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}
.ds .cs-hours__zone {
  margin-left: 6px;
  color: var(--text-2);
}

/* ---------- compared with ---------- */
.ds .cs-bench {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .cs-bench__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
}
.ds .cs-bench__label {
  min-width: 0;
  font-size: 14px;
  color: var(--text);
}
.ds .cs-bench__value {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds .cs-bench__track {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ds-chart-track);
}
.ds .cs-bench__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-chart-neutral);
}
.ds .cs-bench__row--self .cs-bench__fill {
  background: var(--ds-chart-conversion);
}
.ds .cs-bench__sub {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--text-2);
}

/* ---------- outcomes ---------- */
.ds .cs-stack {
  display: flex;
  gap: 2px;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ds-chart-track);
}
.ds .cs-stack__seg {
  flex: 1 1 0;
  min-width: 4px;
}
.ds .cs-stack__seg--completed { background: var(--ds-chart-completed); }
.ds .cs-stack__seg--expired { background: var(--ds-chart-expired); }
.ds .cs-stack__seg--failed { background: var(--ds-chart-out-3); }
.ds .cs-stack__seg--open { background: var(--ds-chart-neutral); }
.ds .cs-outcomes {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.ds .cs-outcomes__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.ds .cs-outcomes__row .cs-key {
  font-size: 14px;
  color: var(--text);
}
.ds .cs-outcomes__count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds .cs-outcomes__pct {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- limits in use ---------- */
.ds .cs-limits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 24px;
}
.ds .cs-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.ds .cs-meter__pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds .cs-meter__track {
  height: 8px;
  margin: 8px 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ds-chart-track);
}
.ds .cs-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.ds .cs-meter.is-warn .cs-meter__fill { background: var(--warning); }
.ds .cs-meter.is-warn .cs-meter__pct { color: var(--warning); }
.ds .cs-meter.is-bad .cs-meter__fill { background: var(--error); }
.ds .cs-meter.is-bad .cs-meter__pct { color: var(--error); }
.ds .cs-meter__value {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ds .cs-meter__of {
  color: var(--text-2);
}
.ds .cs-meter__hint {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-2);
}
.ds .cs-limits__facts {
  margin-top: 20px;
}

/* ---------- the lists' conversion cell ---------- */
.ds .cs-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ds .cs-cell--none {
  color: var(--text-2);
}
.ds .cs-cell__skel {
  display: inline-block;
  width: 72px;
  height: 18px;
}
.ds .cs-cell__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 32px;
  height: 22px;
}
.ds .cs-cell__bar {
  flex: 1 1 0;
  min-height: 2px;
  border-radius: 1.5px;
  background: var(--ds-chart-completed);
}
.ds .cs-cell__bar.is-empty {
  background: var(--ds-chart-track);
}
.ds .cs-cell.is-warn .cs-cell__bar:not(.is-empty) {
  background: var(--warning);
}
.ds .cs-cell.is-bad .cs-cell__bar:not(.is-empty) {
  background: var(--error);
}
.ds .cs-cell__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ds .cs-cell__pct {
  align-self: flex-start;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds .cs-cell.is-warn .cs-cell__pct,
.ds .cs-cell.is-bad .cs-cell__pct {
  padding: 0 6px;
  border-radius: 7px;
}
.ds .cs-cell.is-warn .cs-cell__pct {
  background: var(--warning-tint);
  color: var(--warning);
}
.ds .cs-cell.is-bad .cs-cell__pct {
  background: var(--error-tint);
  color: var(--error);
}
.ds .cs-cell__sub {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- staff sheet: tabs, the edit action, the settings sheet ---------- */
.ds .cs-sheet-tabs {
  margin: 0 0 20px;
}
.ds .cs-edit-btn {
  margin-right: auto;
}
.ds .cs-edit__lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .cs-edit__group {
  min-width: 0;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}
.ds .cs-edit__legend {
  margin: 0 0 12px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ds .cs-edit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px 16px;
}
.ds .cs-edit__narrow {
  max-width: 280px;
}
.ds .cs-edit .ds-toggle + .cs-edit__narrow {
  margin-top: 14px;
}
.ds .cs-changes {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .cs-changes__row {
  display: grid;
  gap: 2px;
}
.ds .cs-changes__what {
  font-size: 13.5px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ds .cs-changes__meta {
  font-size: 12.5px;
  color: var(--text-2);
}
/* A staff member's reason under the change (anti-fraud: a pause, a lift). */
.ds .cs-changes__note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-2);
}

/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .ds .cs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .ds .cs-limits {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .ds .cs-head {
    align-items: stretch;
  }
  .ds .cs-chart__frame {
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    gap: 6px;
    height: 200px;
  }
  .ds .cs-chart__x {
    margin: 8px 38px 0 34px;
    font-size: 11px;
  }
  .ds .cs-chart__x > .is-minor {
    display: none;
  }
  /* the legend names the dashed lines; on a phone their labels would cover the conversion line */
  .ds .cs-chart__ref-label {
    display: none;
  }
  .ds .cs-hours__frame {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    height: 160px;
  }
  .ds .cs-hours__x {
    margin-left: 38px;
  }
  .ds .cs-hours__cols {
    gap: 1px;
  }
  .ds .cs-tip {
    min-width: 156px;
  }
  .ds .cs-edit__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .cs-edit__narrow {
    max-width: none;
  }
}

/* ---------- India daily limit by bank app: "Today 190,000 / 200,000 INR · resets 00:00 IST" (DailyCapLine) ---------- */
.ds .dl-cap {
  display: block;
  margin-top: 4px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .dl-cap__text {
  display: block;
}
.ds .dl-cap__track {
  display: block;
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ds-chart-track);
}
.ds .dl-cap__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.ds .dl-cap.is-warn .dl-cap__fill { background: var(--warning); }
.ds .dl-cap.is-bad .dl-cap__fill { background: var(--error); }
.ds .dl-cap.is-bad .dl-cap__text { color: var(--error); }
/* Package india-defaults: trader rates per merchant only.
   The dashboard's "Market rates (sources)" cards (idr-rate on .sfn-rate), the "Trader rate not set"
   warn badge (idr-missing), the plain-word rate modes in the Merchant rates card, and the merchant
   rate line of the methods table (idr-mrate). Tokens only. */

/* ---------- market rates (sources) ---------- */
.ds .idr-base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "src src";
  align-items: baseline;
  gap: 2px 12px;
  padding: 12px 14px;
  border-radius: var(--ds-r-panel);
  background: var(--accent-tint);
  cursor: help;
}
.ds .idr-base__label {
  grid-area: label;
  font-size: 13px;
  color: var(--text-2);
}
.ds .idr-base__value {
  grid-area: value;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ds .idr-base__src {
  grid-area: src;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-soft-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds .idr-use {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: 13px;
  color: var(--text);
}
.ds .idr-use__split {
  color: var(--text-2);
}
.ds .idr-use__warn {
  font-weight: 500;
  color: var(--warning);
  cursor: help;
}
.ds .idr-use--idle {
  color: var(--text-2);
}

/* the base provider's row stands out; the other sources read quieter */
.ds .idr-quotes tbody tr:not(.is-base) th,
.ds .idr-quotes tbody tr:not(.is-base) td {
  font-size: 12px;
  color: var(--text-2);
}
.ds .idr-quotes tbody tr:not(.is-base) td.ds-bid,
.ds .idr-quotes tbody tr:not(.is-base) td.ds-ask {
  font-weight: 500;
}
.ds .idr-quotes tbody tr.is-base th {
  font-weight: 600;
}
.ds .idr-quotes__base {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-soft-text);
}

/* a geo nobody depends on: compact and greyed */
.ds .sfn-rate.idr-rate--idle {
  gap: 10px;
  padding-block: 14px;
  background: var(--wash-1);
  box-shadow: none;
}
.ds .idr-rate--idle .sfn-rate__pair,
.ds .idr-rate--idle .idr-base__value {
  color: var(--text-2);
}
.ds .idr-rate--idle .idr-base {
  padding: 0;
  background: none;
}
.ds .idr-rate--idle .idr-base__value {
  font-size: 16px;
  font-weight: 500;
}
.ds .idr-rate--idle .idr-base__src {
  color: var(--text-2);
}

/* ---------- trader rate not set ---------- */
.ds .idr-missing {
  display: inline-flex;
  max-width: 100%;
  cursor: help;
}
.ds .idr-missing .ds-status__text {
  white-space: normal;
}

/* ---------- methods table: the merchant rate line ---------- */
.ds .idr-mrate {
  display: inline;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--accent-soft-text);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.ds .idr-mrate:hover {
  text-decoration-color: currentColor;
}
.ds .idr-mrate:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Where the Telegram status lives (2026-10-13):
     .tg-acct   the viewer's own Telegram, one line of the account menu (TelegramAccountLine)
     .tgi       the top-bar indicator of the platform's Telegram integrations + its popover
                (TelegramIntegrations), for the staff who manage them
     .tgn       the in-page notice (TelegramStatusNotice): a DsNotice, only the action cluster here
   Tones come from tokens.css, so both themes follow. */

/* ---------- account menu line ---------- */
/* On a phone the menu is only as wide as its anchor allows: the state then wraps under the label. */
html.ds .tg-acct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
}
html.ds .tg-acct__label {
  flex: 1 0 auto;
}
html.ds .tg-acct__state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
html.ds .tg-acct__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
html.ds .tg-acct__state.is-on {
  color: var(--success);
  background: var(--success-tint);
}
html.ds .tg-acct__state.is-off {
  color: var(--warning);
  background: var(--warning-tint);
}
html.ds .tg-acct__state.is-unknown {
  color: var(--text-2);
  background: var(--wash-2);
}

/* ---------- top-bar indicator ---------- */
html.ds .tgi {
  position: relative;
  display: inline-flex;
}
html.ds .tgi__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.ds .tgi__btn[aria-expanded='true'] {
  color: var(--text);
  background: var(--wash-3);
}
html.ds .tgi__dot {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ground);
  background: var(--text-3);
}
html.ds .tgi__dot--ok {
  background: var(--success);
}
html.ds .tgi__dot--warn {
  background: var(--warning);
}
html.ds .tgi__dot--bad {
  background: var(--error);
}

/* ---------- integrations popover ---------- */
html.ds .tgi__pop {
  width: 360px;
  padding: 6px;
}
html.ds .tgi__head {
  padding: 8px 10px 10px;
}
html.ds .tgi__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
html.ds .tgi__lead {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
html.ds .tgi__item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--popover-row);
}
html.ds .tgi__item + .tgi__item {
  margin-top: 6px;
}
html.ds .tgi__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
html.ds .tgi__row--foot {
  margin-top: 4px;
  flex-wrap: wrap;
  row-gap: 4px;
}
html.ds .tgi__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
html.ds .tgi__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--wash-2);
}
html.ds .tgi__sdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
html.ds .tgi__state--ok {
  color: var(--success);
  background: var(--success-tint);
}
html.ds .tgi__state--warn {
  color: var(--warning);
  background: var(--warning-tint);
}
html.ds .tgi__state--bad {
  color: var(--error);
  background: var(--error-tint);
}
html.ds .tgi__what {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}
html.ds .tgi__last {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
html.ds .tgi__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-soft-text);
  text-decoration: none;
}
html.ds .tgi__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.ds .tgi__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* A phone: the popover spans the screen under the top bar instead of hanging off the icon. */
@media (max-width: 640px) {
  html.ds .tgi__pop {
    position: fixed;
    top: 60px;
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* ---------- in-page notice: the action cluster ---------- */
html.ds .tgn {
  margin-bottom: 16px;
}
html.ds .tgn .ds-notice__title {
  font-weight: 600;
}
html.ds .tgn__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 640px) {
  html.ds .tgn {
    flex-wrap: wrap;
  }
  html.ds .tgn .ds-notice__action {
    flex-basis: 100%;
    padding-left: 26px;
  }
}
/* ds/payout-cancel: the staff pay-out Cancel action (Components/Admin/PayOutActions.razor).

   A list row's confirm is drawn in place, inside the <tr>. The admin row entrance animation
   (admin.css, .pro .pg-table tbody tr: admRowIn … both) leaves a transform on every row, and a
   transformed ancestor becomes the containing block of the confirm's fixed layer: the backdrop
   covered the one row and the sheet hung half off-screen. While a confirm is open in a row the
   row drops the animation, so the layer is fixed to the viewport again. Covers every in-row
   pay-out confirm (approve, return, reject, reroute, cancel). */
.ds .pg-table tbody tr:has(.ds-sheet-layer) {
  animation: none;
  transform: none;
}
/* …and the layer does not inherit the row cell's typography: no-wrap of the actions strip, pointer, weight. */
.ds .pg-table tbody td .ds-sheet-layer {
  white-space: normal;
  text-align: start;
  cursor: auto;
  font-weight: 400;
}

/* The "trader may already have paid" warning and its "I checked" box sit between the text and the reason field. */
.ds .ds-confirm .pc-warn {
  margin-top: 16px;
}
.ds .ds-confirm .pc-check {
  margin-top: 14px;
}
.ds .ds-confirm .pc-check__error {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--error);
}
/* ds/trader-payout-confirm (feat/payout-confirm): the trader's pay-out confirm and cancel sheets
   (Components/Trader/PayOutConfirmSheet.razor, PayOutCancelSheet.razor), the recording guide page
   (/trader/payouts/proof-guide, data-trader-page="payout-guide") and the staff view of the proof
   (Components/Admin/PayOutDetailModal.razor, PayOutProofVideoSheet.razor). Tokens only; both themes; the
   sheets are bottom sheets at 640 px and below, and every row fits 375 px. */

/* ---------- confirm / cancel sheets ---------- */
.ds .poc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ds .poc > .ds-dg + .ds-dg {
  margin-top: 0;
}

/* the summary: amount, then who it goes to */
.ds .poc-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.ds .poc-sum__to {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  text-align: right;
}
.ds .poc-sum__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ds .poc-sum__req {
  font-size: 13px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* what the screenshot must show: label → value rows, no bullets */
.ds .poc-must {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
}
.ds .poc-must li {
  display: contents;
}
.ds .poc-must__k {
  color: var(--text-2);
}
.ds .poc-must__v {
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* the guide link: ink with a hairline underline, accent on hover (like an entity link) */
.ds .poc-guide {
  margin: 0 0 14px;
  font-size: 14px;
}
.ds .poc-guide a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.ds .poc-guide a:hover {
  color: var(--accent-text);
  text-decoration-color: currentColor;
}
.ds .poc-guide a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.ds .poc-guide .ds-icon {
  flex: none;
  color: var(--text-2);
}

/* the file tile: a quiet raised panel with a hairline (never dashed) */
.ds .poc-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 56px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
}
.ds .poc-tile.is-picked {
  flex-wrap: nowrap;
}
.ds .poc-tile.is-invalid {
  border-color: var(--error);
}
.ds .poc-tile__note {
  font-size: 13px;
  color: var(--text-2);
}
.ds .poc-tile__thumb {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--wash-2);
  color: var(--text-2);
}
.ds .poc-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds .poc-tile__meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .poc-tile__name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ds .poc-tile__size {
  font-size: 12.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .poc-tile__acts {
  flex: none;
  display: inline-flex;
  gap: 2px;
}
.ds .poc-tile__error {
  margin-top: 8px;
}
.ds .poc-utr .ds-input {
  padding-right: 64px;
  letter-spacing: 0.04em;
}

/* the upload progress: first line of the sticky footer while sending */
.ds .poc-progress {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.ds .poc-progress__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .poc-progress__pct {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ds .poc-progress__track {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--wash-3);
}
.ds .poc-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 0.15s linear;
}

/* the cancel reasons: native radios in labelled rows; the chosen row takes the accent edge */
.ds .poc-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ds .poc-reasons legend {
  margin-bottom: 8px;
  padding: 0;
}
.ds .poc-reason {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds .poc-reason:hover {
  border-color: var(--hairline-hover);
}
.ds .poc-reason.is-on {
  border-color: var(--accent-ring);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ds .poc-reason:has(.poc-reason__input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .poc-reason__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: inherit;
}
.ds .poc-reason__input:focus-visible {
  outline: none;
}
.ds .poc-reason__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ds .poc-reason__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ds .poc-reason__hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .poc-check {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

@media (max-width: 640px) {
  .ds .poc-sum {
    flex-direction: column;
    align-items: flex-start;
  }
  .ds .poc-sum__to {
    align-items: flex-start;
    text-align: left;
  }
  .ds .poc-must {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .ds .poc-must__v {
    margin-bottom: 8px;
  }
  .ds .poc-tile.is-picked {
    flex-wrap: wrap;
  }
  .ds .poc-tile.is-picked .poc-tile__meta {
    flex-basis: calc(100% - 60px);
  }
  .ds .poc-tile__acts {
    margin-left: 52px;
  }
  .ds .poc-progress {
    flex-basis: 100%;
  }
}

/* ---------- the recording guide page ---------- */
.ds .pog {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
}
.ds .pog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}
.ds .pog-list li {
  padding-left: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.ds .pog-list li::marker {
  color: var(--text-2);
}
.ds .pog-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.ds .pog-section__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ds .pog-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .pog-step {
  display: flex;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
.ds .pog-step__n {
  flex: none;
  min-width: 20px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds .pog-step__body {
  min-width: 0;
}
.ds .pog-step__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ds .pog-step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.ds .pog-video {
  display: block;
  width: 100%;
  max-height: 70dvh;
  border-radius: var(--ds-r-row);
  background: var(--wash-2);
}
.ds .pog-end {
  margin: 8px 0 0;
}

@media (max-width: 720px) {
  .ds .pog-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .pog-step {
    padding: 14px;
  }
}

/* ---------- staff: the proof in the processing group ---------- */
.ds .so-proof-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
  background: var(--wash-2);
  color: var(--text-2);
  cursor: zoom-in;
}
.ds .so-proof-thumb:hover {
  border-color: var(--hairline-hover);
}
.ds .so-proof-thumb:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .so-proof-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds .so-video {
  display: grid;
  place-items: center;
  padding: 8px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .so-video video {
  display: block;
  width: 100%;
  /* 68dvh less the turn buttons' row above (the sheet body must not scroll at 0°) */
  max-height: calc(68dvh - 20px);
  border-radius: var(--ds-r-row);
  transition: transform 160ms ease;
}

/* Turning a sideways recording upright (PayOutProofVideoSheet). 180°: the same box, the picture flipped.
   90° / 270°: the box gets a fixed height and the video swaps its sides (container units) before it turns,
   so the turned picture fits the box whole. */
.ds .so-video__tools {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 8px;
}
.ds .so-video__left svg {
  transform: scaleX(-1);
}
.ds .so-video--r180 video {
  /* and less the level bar below (54 px) once it is turned */
  max-height: calc(68dvh - 74px);
  transform: rotate(180deg);
}
.ds .so-video--r90,
.ds .so-video--r270 {
  position: relative;
  display: block;
  /* the level bar below takes 54 px (8 margin + 46), so the turned box plus the bar fit where the plain video did */
  height: calc(min(68dvh, 720px) - 54px);
  overflow: hidden;
  container-type: size;
}
.ds .so-video--r90 video,
.ds .so-video--r270 video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqh;
  height: 100cqw;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(90deg);
}
.ds .so-video--r270 video {
  transform: translate(-50%, -50%) rotate(270deg);
}

.ds .so-video__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--wash-1);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
}
.ds .so-video__play {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  cursor: pointer;
}
.ds .so-video__play:hover {
  background: var(--surface-hover);
}
.ds .so-video__play:focus-visible,
.ds .so-video__seek:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .so-video__bar[data-state='paused'] .so-video__icon--pause,
.ds .so-video__bar[data-state='playing'] .so-video__icon--play {
  display: none;
}
.ds .so-video__icon {
  display: grid;
}
.ds .so-video__seek {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}
.ds .so-video__time {
  flex: none;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
/* Trader rate groups (staff): the list /admin/rate-groups, one group's page, the note on the merchant pricing
   tab. The rate grid itself is the merchant rate card's (staff-merchants.css, "sm-rate"). */

.ds [data-staff-page^='rate-group'] .trg-num {
  text-align: right;
  white-space: nowrap;
}
.ds [data-staff-page^='rate-group'] .trg-name {
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.ds [data-staff-page^='rate-group'] .trg-name:hover {
  color: var(--accent);
}

/* default rates in a list row: one line per direction × geo */
.ds [data-staff-page^='rate-group'] .trg-rates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds [data-staff-page^='rate-group'] .trg-rate {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13.5px;
  white-space: nowrap;
}

/* the members card: the picker and its button in the card head */
.ds [data-staff-page^='rate-group'] .trg-add {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ds [data-staff-page^='rate-group'] .trg-add .trg-picker,
.ds .sm-sheet .trg-picker {
  min-width: 240px;
}
.ds [data-staff-page^='rate-group'] .trg-who {
  gap: 10px;
}

/* merchant overrides: one section per merchant, its geo blocks under the name */
.ds [data-staff-page^='rate-group'] .trg-overrides {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.ds [data-staff-page^='rate-group'] .trg-override + .trg-override {
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.ds [data-staff-page^='rate-group'] .trg-override__name {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ds [data-staff-page^='rate-group'] .trg-override .ds-notice {
  margin: 0 0 10px;
}

.ds .sm-sheet .trg-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* the note on the merchant pricing tab */
.ds .trg-note__list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds .trg-note__count {
  display: inline;
  margin-left: 6px;
}
.ds .trg-note__line {
  display: block;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .ds [data-staff-page^='rate-group'] .trg-add {
    flex-wrap: wrap;
  }
  .ds [data-staff-page^='rate-group'] .trg-add .trg-picker {
    min-width: 0;
    flex: 1 1 100%;
  }
  .ds .trg-note__count {
    display: block;
    margin-left: 0;
  }
}
/* ds/admin-antifraud: the staff page /admin/antifraud (Pages/Admin/Antifraud.razor, Components/Admin/Antifraud/Af*),
   the withdrawal risk group and its list cell. (The trader's system-pause notice lives in trader-methods.css.)
   Layout only, tokens only, everything under .ds (DS.md "Files"). Kit parts are composed, never restyled. */

/* ── page ─────────────────────────────────────────────────────────────── */
.ds .af { display: flex; flex-direction: column; gap: 16px; }
.ds .af-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ds .af-tabs { margin-bottom: 0; }
.ds .af-notice { margin: 0; }
.ds .af-muted { margin: 0; color: var(--text-2); font-size: 13px; }
.ds .af-sub {
  display: block;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-size: 12.5px;
}
.ds .af-strong { font-weight: 600; color: var(--text); }
.ds .af-num { text-align: end; font-variant-numeric: tabular-nums; }
.ds .af-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; max-width: 100%; }
.ds .af-cell--wrap { gap: 4px; }
.ds .af-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; min-width: 0; font-size: 13px; }
.ds .af-sub--wrap { white-space: normal; overflow-wrap: break-word; }
/* A requisite (UPI ID, account) is one token: cut with an ellipsis and the full value in the tooltip, never broken
   letter by letter. */
.ds .af-token { max-width: 100%; overflow-wrap: normal; word-break: normal; }
.ds .af-cell--row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds .af-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ds .af-row-acts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
/* Pauses: icon buttons in the table, labelled buttons once the table turns into cards (js/responsive.js). */
.ds .af-ptable table:not(.rt--stacked) .af-row-acts--text,
.ds .af-ptable table.rt--stacked .af-row-acts--icons { display: none; }
.ds .af-ptable table:not(.rt--stacked) .af-row-acts--icons { flex-wrap: nowrap; }
.ds .af-ptable table.rt--stacked .af-row-acts--text { justify-content: flex-start; }
.ds .af-ptable table.rt--stacked .af-sub { max-width: 100%; }

/* the cause of a pause, a link to its incident: the entity-link look on a button */
.ds .af-cause,
.ds .af-cause-link { font-size: 14px; font-weight: 500; color: var(--text); }
.ds .af-cause-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  text-align: start;
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.ds .af-cause-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.ds .af-cause-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── overview ─────────────────────────────────────────────────────────── */
.ds .af-ov-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.ds .af-rulelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds .af-rulelist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}
.ds .af-rulelist__row:first-child { border-top: 0; padding-top: 0; }
.ds .af-rulelist__row:last-child { padding-bottom: 0; }
.ds .af-rulelist__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .af-rulelist__name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.ds .af-rulelist__what { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.ds .af-ov-foot { margin-top: 16px; display: flex; }
.ds .af-ov-grace { margin-bottom: 16px; }
.ds .af-ov-grace a.af-rulelist__name { text-decoration: none; }
.ds .af-ov-grace a.af-rulelist__name:hover { color: var(--accent); }

/* ── rules ────────────────────────────────────────────────────────────── */
.ds .af-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ds .af-rule__body { display: flex; flex-direction: column; gap: 14px; }
.ds .af-rule.is-changed { border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); }
/* The Telegram card above the rules: where the events go (status + sentence + the link to the channel cards). */
.ds .af-tg { margin: 14px 0; }
.ds .af-tg:first-child { margin-top: 0; }
.ds .af-tg__route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.ds .af-tg__link { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.ds .af-tg__link:hover { color: var(--accent); }
/* The Telegram tab: the anti-fraud channel card (its actions under the status lines) and the by-id sheet. */
.ds .af-chan__body,
.ds .af-chan__form { display: flex; flex-direction: column; gap: 12px; }
.ds .af-chan__form .sfn-hint { margin: 0; }
.ds .af-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ds .af-mode__what { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); max-width: 60ch; }
/* Inputs line up along the bottom when a neighbour's label wraps to two lines. */
.ds .af-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.ds .af-updated { margin-top: 12px; }
.ds .af-savebar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  margin-top: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  border-radius: var(--ds-r-panel);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow-float);
}
.ds .af-savebar__text { margin-right: auto; font-size: 14px; color: var(--text); }
.ds .af-enforce-list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ds .af-enforce-list li { font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--warning); }

/* ── sheets ───────────────────────────────────────────────────────────── */
.ds .af-sheet-text { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ds .af-sheet-stack { display: flex; flex-direction: column; gap: 12px; }
.ds .af-sheet-stack > .af-sheet-text { margin: 0; }
.ds .af-foot-start { margin-right: auto; }
.ds .af-sheet-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--text-2); }
.ds .af-notice-line { display: block; margin-top: 4px; }

.ds .af-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds .af-check { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.ds .af-check__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .af-check__text .af-sub { max-width: none; white-space: normal; }
.ds .af-check__label { font-size: 14px; color: var(--text); }
.ds .af-check__since { font-size: 12.5px; color: var(--text-2); }

.ds .af-acts { display: flex; flex-direction: column; gap: 16px; }
.ds .af-act { display: flex; flex-direction: column; gap: 10px; }
.ds .af-act + .af-act { padding-top: 16px; border-top: 1px solid var(--hairline); }
.ds .af-act__row { display: flex; justify-content: flex-end; }
/* The trader's traffic switch heads the action group, set off from the lift / review forms under it. */
.ds .af-act--traffic { padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--hairline); }
.ds .af-tl__line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* The requisite drawer's pause line: who, why, since when (CardOverviewDrawer). */
.ds .af-pause-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.ds .af-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds .af-tl { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.ds .af-tl__time { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ds .af-tl__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .af-tl__main .af-sub { max-width: none; white-space: normal; }
.ds .af-tl__kind { font-size: 14px; font-weight: 500; color: var(--text); }
.ds .af-tl__actor { font-size: 13px; color: var(--text-2); }

.ds .af-json__label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--text-2); }
.ds .af-json {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: var(--ds-r-row);
  border: 1px solid var(--hairline);
  background: var(--wash-1);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── withdrawal risk (sheet group and list cell) ───────────────────── */
.ds .af-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds .af-flag { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ds .af-flag__text { flex: 1 1 220px; min-width: 0; font-size: 14px; color: var(--text); }
.ds .af-flag__meta { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ds .af-risk-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* ── widths ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ds .af-ov-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ds .af-rule-grid { grid-template-columns: minmax(0, 1fr); }
  .ds .af-check { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ds .af-tl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ds .af-sub { max-width: 100%; }
  .ds .af-savebar { bottom: 8px; padding: 10px 12px; }
}
.ds .af-gap { margin-top: 8px; }
/* Phones: the four section tabs (two with counts) fit 375 px without the last one sliding off the edge. */
@media (max-width: 480px) {
  .ds .af-tabs { gap: 16px; }
}

/* ── exposure (R5, wave 2) ────────────────────────────────────────────── */
.ds .af-cell--end { align-items: flex-end; }
.ds .af-extable table.rt--stacked .af-cell--end { align-items: flex-start; }
/* The receipt line: "budget = collateral − held − c × (expired + open)" with the trader's numbers, one block of mono
   text that wraps between terms, never inside a number. */
.ds .af-receipt__line {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--ds-r-row);
  background: var(--wash-1);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
  word-spacing: 0.05em;
  overflow-wrap: break-word;
}
/* The admin user page block (UserDetail): the receipt in compact form. */
.ds .af-userblock .af-receipt__line { margin-bottom: 12px; }
.ds .af-userblock__foot { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ds .af-userblock__error { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* The bell item of an exposure-limit notice links to the trader's receipt (MainLayout.NotifLink). Entity-link look. */
html.ds .notif-item-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
html.ds .notif-item-link:hover { color: var(--accent); text-decoration-color: currentColor; }

/* Signal drawer: the previous window under the numbers, the expectation sources below it. */
.ds .af-sg-previous { margin-top: 14px; }
.ds .af-sg-cells { margin-top: 12px; }
.ds .af-sg-preading { margin: 12px 0 4px; }
/* Signals: the period switch takes the whole row on a phone (the toolbar grid gives a filter half). */
.ds .af-toolbar .ds-toolbar__filters > .ds-tabs--segment { grid-column: 1 / -1; justify-self: start; width: auto; }
/* ds/admin-antifraud-signals: the Signals tab of /admin/antifraud (wave 3, the conversion signal R6:
   Components/Admin/Antifraud/AfSignals, AfSignalDrawer, AfSignalRules) and the link to the incident behind a system
   traffic lock on the admin trader page. Layout only, tokens only, everything under .ds (DS.md "Files"). */

/* ── firings by day ───────────────────────────────────────────────────── */
.ds .af-sg-day { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ds .af-sg-day__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ds .af-sg-day__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ds .af-cell--end { align-items: flex-end; }
.ds .af-sgtable table.rt--stacked .af-cell--end { align-items: flex-start; }

/* ── the drawer ───────────────────────────────────────────────────────── */
.ds .af-sg-verdict { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.ds .af-sg-signs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ds .af-sg-signs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; color: var(--text); }
.ds .af-sg-signs li.is-quiet { color: var(--text-2); }
.ds .af-sg-silence { margin-top: 12px; }
.ds .af-sg-sheet .af-act__row { flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* ── the rule card and the admin trader page ──────────────────────────── */
.ds .af-sg-rules { margin-top: 8px; }
.ds .af-sg-banlink { margin-inline-start: 6px; }
/* Trader video guides (docs/trader-guides.md, DS.md "Help guides"): the "How it works" button in a page header
   (hg-btn), the guides sheet (list + player, hg-*) and the Help page gallery (hg-gallery, hg-card). Colours from
   tokens only; the accent marks the one thing that is new (the dot) and the progress fill. */

/* ---------- the header button ---------- */
.ds .hg-btn {
  position: relative;
}
.ds .hg-btn__dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--ground);
}
/* phones: the play icon alone (the button keeps its aria-label) */
@media (max-width: 640px) {
  .ds .hg-btn {
    width: var(--btn-h);
    padding: 0;
  }
  .ds .hg-btn .hg-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- the list in the sheet ---------- */
.ds .hg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds .hg-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--surface-raised);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.ds .hg-row:hover {
  background: var(--surface-hover);
  border-color: var(--hairline-hover);
}
.ds .hg-row:focus-visible,
.ds .hg-card:focus-visible,
.ds .hg-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ds .hg-thumb {
  position: relative;
  display: block;
  width: 112px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ds-r-row);
  background: var(--wash-2);
}
.ds .hg-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds .hg-thumb__play,
.ds .hg-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(15 23 42 / 0.72);
  color: #fff;
}
.ds .hg-row__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ds .hg-row__title {
  font-weight: 600;
  font-size: 14.5px;
}
.ds .hg-row__desc {
  color: var(--text-2);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .hg-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ds .hg-row__langs {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.ds .hg-row__done,
.ds .hg-card__done,
.ds .hg-player__state.is-done {
  color: var(--success);
}
.ds .hg-row__done {
  display: inline-flex;
}
@media (max-width: 480px) {
  .ds .hg-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
  }
  .ds .hg-thumb {
    width: 84px;
  }
  .ds .hg-row__meta {
    grid-column: 2;
  }
  .ds .hg-row__desc {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ---------- the player ---------- */
.ds .hg-player {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds .hg-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.ds .hg-back:hover {
  color: var(--text);
}
.ds .hg-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ds .hg-bar__label {
  font-size: 13.5px;
  color: var(--text-2);
}
.ds .hg-video {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: #000;
}
.ds .hg-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.ds .hg-video--wide {
  aspect-ratio: 16 / 9;
}
.ds .hg-video--tall {
  aspect-ratio: 9 / 16;
  height: min(70vh, 640px);
  max-width: 100%;
  margin-inline: auto;
}
@media (max-width: 640px) {
  /* the bottom sheet: the film fills the width, the sheet scrolls if the phone is short */
  .ds .hg-video--tall {
    height: auto;
    width: 100%;
    max-height: 72vh;
  }
}
.ds .hg-player__desc {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
}
.ds .hg-player__state {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}

/* ---------- the Help page gallery ---------- */
.ds .hg-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.ds .hg-gallery__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.ds .hg-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ds .hg-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  background: var(--surface);
  box-shadow: var(--surface-shadow);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.ds .hg-card:hover {
  border-color: var(--hairline-hover);
}
.ds .hg-card:hover .hg-card__play {
  background: var(--accent);
  color: var(--btn-primary-text);
}
.ds .hg-card__poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--wash-2);
}
.ds .hg-card__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds .hg-card__play {
  width: 40px;
  height: 40px;
}
.ds .hg-card__len {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgb(15 23 42 / 0.72);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ds .hg-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
}
.ds .hg-card__title {
  font-weight: 600;
  font-size: 14px;
}
.ds .hg-card__done {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
}
.ds .hg-card__meter {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--wash-3);
  overflow: hidden;
}
.ds .hg-card__meter > span {
  display: block;
  height: 100%;
  width: var(--hg-fill, 0%);
  background: var(--accent);
}
/* Staff video guides editor (/admin/guides, Pages/Admin/Guides.razor, prefix gd-). Tokens only. */

.ds .gd-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .gd-table .gd-order-col {
  width: 76px;
}
.ds .gd-order {
  display: inline-flex;
  gap: 2px;
}
.ds .gd-num {
  text-align: right;
}
.ds .gd-off td:not(:last-child) {
  opacity: 0.55;
}
.ds .gd-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ds .gd-thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--wash-2);
  color: var(--text-2);
}
.ds .gd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds .gd-guide__text,
.ds .gd-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .gd-guide__title {
  font-weight: 600;
}
.ds .gd-guide__key,
.ds .gd-muted {
  color: var(--text-2);
  font-size: 12.5px;
}
.ds .gd-files {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.ds .gd-warn {
  color: var(--warning);
  font-size: 13px;
}

/* ---------- the editor ---------- */
.ds .gd-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds .gd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: start;
}
.ds .gd-grid .gd-wide {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .ds .gd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ds .gd-pages-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 16px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.ds .gd-form .ds-toggle {
  margin-top: 12px;
}
.ds .gd-files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds .gd-file {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
  background: var(--surface);
}
.ds .gd-file__head {
  display: grid;
  grid-template-columns: 140px 160px 130px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}
.ds .gd-file__tools {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding-bottom: 4px;
}
.ds .gd-file__urls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 16px;
}
@media (max-width: 860px) {
  .ds .gd-file__head {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ds .gd-file__tools {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .ds .gd-file__urls {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ds .gd-url {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ds .gd-url .ds-input {
  flex: 1;
  min-width: 0;
}
.ds .gd-preview {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-row);
  background: #000;
}
.ds .gd-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ds .gd-preview--wide {
  aspect-ratio: 16 / 9;
  max-width: 560px;
}
.ds .gd-preview--tall {
  aspect-ratio: 9 / 16;
  height: min(60vh, 480px);
}
.ds .gd-limits {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
}
.ds .gd-sheet .ds-sheet__foot .gd-delete {
  margin-right: auto;
}
/* Trader groups (2026-10-17): the "Telegram group" section of the trader page (TraderGroupSection), its recent
   messages, the "Send to trader group" button of the device drawer's message box (TraderMessageBox), the Telegram
   mark of the traders list (Traders.razor) and the "Trader groups" block of the anti-fraud rules (AfTraderGroupRules). */

/* ---------- the section ---------- */
.ds .tgr-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ds .tgr-muted { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ds .tgr-notice-line { display: block; }
.ds .tgr-notice-line--quiet { margin-top: 4px; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ds .tgr-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* an input with its button(s) on one row; the field's hint and error run under the whole row */
.ds .tgr-inline { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.ds .tgr-inline .ds-input { flex: 1 1 auto; min-width: 0; }
.ds .tgr-connect { max-width: 560px; }

/* the two switches side by side, each with its line of what it does */
.ds .tgr-prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }

.ds .tgr-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- recent messages ---------- */
.ds .tgr-msgs { min-width: 0; padding-top: 4px; }
.ds .tgr-msgs__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ds .tgr-sub { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--text); }
.ds .tgr-msglist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ds .tgr-msg {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 9px 0;
  font-size: 13px;
}
.ds .tgr-msg + .tgr-msg { box-shadow: inset 0 1px 0 var(--hairline); }
.ds .tgr-msg__time { font-size: 12px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds .tgr-msg__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds .tgr-msg__kind { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
/* the kind's kit icon in its tone (replaces the emoji the Telegram text opens with) */
.ds .tgr-msg__ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--text-2);
  background: var(--hairline);
}
.ds .tgr-msg__ico--good { color: var(--success); background: var(--success-tint); }
.ds .tgr-msg__ico--warn { color: var(--warning); background: var(--warning-tint); }
.ds .tgr-msg__ico--bad { color: var(--error); background: var(--error-tint); }
.ds .tgr-msg__ico--info { color: var(--info); background: var(--info-tint); }
.ds .tgr-msg__main .tgr-msg__preview { padding-left: 28px; }
.ds .tgr-msg__preview { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); }
.ds .tgr-msg__error { font-size: 12px; color: var(--error); overflow-wrap: anywhere; }
.ds .tgr-msg__side { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; align-self: center; }
.ds .tgr-msg__side .ds-status { font-size: 12px; }
.ds .tgr-msg__link {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--text-2);
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.ds .tgr-msg__link:hover { background: var(--wash-2); color: var(--text); }
.ds .tgr-msg__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* ---------- the device drawer: "Send to trader group" beside the copy button (.s3-msg__actions: staff-checks.css) ---------- */
.ds .tgr-send { display: inline-flex; }

/* ---------- traders list: the Telegram mark by the name ---------- */
.ds .trs-tg { display: inline-flex; align-items: center; flex: none; }
.ds .trs-tg--Connected { color: var(--info); }
.ds .trs-tg--Muted { color: var(--text-2); }
.ds .trs-tg--Broken { color: var(--error); }

/* ---------- anti-fraud rules: the "Trader groups" block ---------- */
.ds .af-tg-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
/* every field carries a one-line hint: top-aligned, so the inputs stay on one line whatever the hints' length */
.ds .af-tg-fields { align-items: start; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

@media (max-width: 720px) {
  .ds .tgr-prefs,
  .ds .af-tg-switches { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .ds .tgr-inline { flex-wrap: wrap; }
  .ds .tgr-inline .ds-input { flex-basis: 100%; }
  .ds .tgr-msg {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "time side" "main main";
    row-gap: 4px;
  }
  .ds .tgr-msg__time { grid-area: time; }
  .ds .tgr-msg__main { grid-area: main; }
  .ds .tgr-msg__side { grid-area: side; }
}
/* ds/cyber-complaints: the trader's list, form and case, and the staff queue and review (Components/CyberComplaints,
   Pages/{Trader,Admin}/CyberComplaint*). Tokens only; a phone at 360 px is a first-class width here. */

.ds .cc-page {
  --pc-me: var(--accent);
  --pc-text-soft: var(--text-2);
  --pc-ease: cubic-bezier(.2, .7, .3, 1);
  min-width: 0;
}
.ds .cc-page--narrow {
  max-width: 800px;
}
.ds .cc-muted,
.ds .cc-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.ds .cc-note {
  margin-top: 12px;
}

/* ---------- trader list ---------- */
.ds .cc-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .cc-card {
  display: block;
  padding: 16px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
  box-shadow: var(--surface-shadow);
}
.ds .cc-card:hover {
  border-color: var(--hairline-hover);
  background: var(--surface-hover);
}
.ds .cc-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .cc-card__top,
.ds .cc-card__amount,
.ds .cc-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.ds .cc-card__id,
.ds .cc-card__order {
  font-size: 13px;
  color: var(--text-2);
}
.ds .cc-card__amount {
  margin-top: 10px;
}
.ds .cc-card__next {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .cc-card__foot {
  align-items: center;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-2);
}

/* ---------- form ---------- */
.ds .cc-form,
.ds .cc-case {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ds .cc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.ds .cc-fields--single {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}
.ds .cc-fields__wide {
  grid-column: 1 / -1;
}
.ds .cc-fields + .cc-slots {
  margin-top: 12px;
}
.ds .cc-date {
  width: 100%;
}

/* evidence slots: solid frames, never dashed */
.ds .cc-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds .cc-slot {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  background: var(--field-bg, var(--surface));
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-field);
}
.ds .cc-slot.is-done {
  border-color: var(--success);
}
.ds .cc-slot.is-failed {
  border-color: var(--error);
}
.ds .cc-slot__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-2);
  background: var(--wash-2);
  border-radius: var(--ds-r-row);
}
.ds .cc-slot.is-done .cc-slot__glyph {
  color: var(--success);
  background: var(--success-tint);
}
.ds .cc-slot.is-failed .cc-slot__glyph {
  color: var(--error);
  background: var(--error-tint);
}
.ds .cc-slot__body {
  min-width: 0;
}
.ds .cc-slot__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.ds .cc-slot__opt {
  margin-left: 6px;
  font-size: 12.5px;
  font-weight: 450;
  color: var(--text-2);
}
.ds .cc-slot__hint {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .cc-slot__file {
  margin-top: 10px;
}
.ds .cc-slot__file-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
}
.ds .cc-slot__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ds .cc-slot__size {
  flex: none;
  color: var(--text-2);
  font-size: 12.5px;
}
.ds .cc-slot__progress {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  background: var(--wash-3);
  border-radius: 2px;
}
.ds .cc-slot__progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 120ms linear;
}
.ds .cc-slot__state {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .cc-slot__state--ok {
  color: var(--success);
  font-weight: 500;
}
.ds .cc-slot__error {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--error);
}
.ds .cc-slot__row-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.ds .cc-slot__file-line .cc-slot__remove {
  flex: none;
  margin-left: auto;
}
.ds .cc-slot__actions[hidden] {
  display: none;
}
.ds .cc-slot__pick {
  cursor: pointer;
  white-space: nowrap;
}
.ds .cc-slot__pick:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ds .cc-slot__pick.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* money lines: no rules between the rows; the total sits on a wash */
.ds .cc-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds .cc-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.ds .cc-line__label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}
.ds .cc-line__label small {
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .cc-line__value {
  flex: none;
  text-align: right;
  white-space: nowrap;
}
.ds .cc-line--total {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--wash-2);
  border-radius: var(--ds-r-row);
  font-weight: 600;
}
.ds .cc-line--total small {
  font-weight: 450;
}

.ds .cc-submit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.ds .cc-submit__missing {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.ds .cc-submit__missing .ds-icon {
  flex: none;
  margin-top: 2px;
}

/* ---------- case ---------- */
.ds .cc-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-card);
  box-shadow: var(--surface-shadow);
}
.ds .cc-hero--ok { background: var(--success-tint); }
.ds .cc-hero--bad { background: var(--error-tint); }
.ds .cc-hero--warn { background: var(--warning-tint); }
.ds .cc-hero--info { background: var(--info-tint); }
.ds .cc-hero__text {
  min-width: 0;
}
.ds .cc-hero__verdict {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.ds .cc-hero__next {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.ds .cc-hero__money {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}
.ds .cc-hero__label {
  font-size: 12.5px;
  color: var(--text);
}
.ds .cc-stepper {
  padding: 14px 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-r-panel);
}
.ds .cc-quote {
  margin: 0 0 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--wash-1);
  border-radius: var(--ds-r-row);
}
.ds .cc-respond {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.ds .cc-tl {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .cc-tl__item {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 14px;
}
.ds .cc-tl__item:last-child {
  padding-bottom: 0;
}
.ds .cc-tl__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: -4px;
  left: 5px;
  width: 2px;
  background: var(--hairline);
}
.ds .cc-tl__dot {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  background: var(--surface-raised);
  border: 2px solid var(--hairline-strong);
  border-radius: 50%;
}
.ds .cc-tl__item:first-child .cc-tl__dot {
  border-color: var(--text-2);
}
.ds .cc-tl__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.ds .cc-tl__text {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ds .cc-tl__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-2);
}

.ds .cc-filelist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .cc-filerow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 6px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--ds-r-row);
  cursor: pointer;
}
.ds .cc-filerow:hover {
  background: var(--wash-1);
}
.ds .cc-filerow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.ds .cc-filerow__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds .cc-filerow__kind {
  font-size: 14px;
  font-weight: 500;
}
.ds .cc-filerow__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .cc-filerow__size {
  flex: none;
  font-size: 12.5px;
  color: var(--text-2);
}

/* ---------- file viewer ---------- */
.ds .cc-viewer__stage {
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--wash-1);
  border-radius: var(--ds-r-field);
}
.ds .cc-viewer__video,
.ds .cc-viewer__image {
  display: block;
  max-width: 100%;
  max-height: 560px;
}
.ds .cc-viewer__video {
  width: 100%;
}
.ds .cc-viewer__pdf {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}
.ds .cc-viewer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.ds .cc-viewer__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .cc-viewer__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ds .cc-viewer__size {
  flex: none;
}

/* ---------- staff ---------- */
.ds .cc-tabs.is-searching {
  opacity: .55;
}
.ds .cc-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.ds .cc-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 14px;
  align-items: start;
}
.ds .cc-review__rail,
.ds .cc-review__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ds .cc-review__main {
  grid-column: 1;
  grid-row: 1;
}
.ds .cc-review__rail {
  grid-column: 2;
  grid-row: 1;
}
.ds .cc-evidence__tabs {
  margin-bottom: 12px;
}
.ds .cc-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds .cc-actions__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ds .cc-actions__row .ds-btn {
  flex: 1 1 auto;
}
.ds .cc-utr-verdict {
  margin: 0 0 12px;
}

.ds .cc-close {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .cc-close__outcome {
  display: flex;
}
.ds .cc-close__outcome .ds-tab {
  flex: 1;
  justify-content: center;
}
.ds .cc-source__radio {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 50%;
}
.ds .cc-source__radio.is-on {
  border-color: var(--accent);
}
.ds .cc-source__radio.is-on::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}
.ds .cc-source__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ds .cc-source__title {
  font-size: 14px;
  font-weight: 500;
}
.ds .cc-source__text small {
  font-size: 12.5px;
  color: var(--text-2);
}
.ds .cc-balances {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13px;
  color: var(--text-2);
}
.ds .cc-pack__text {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.ds .cc-pack__manual {
  margin-top: 8px;
}
.ds .tb-sheet .cc-sheet-entry {
  flex: 2 1 auto;
}
/* The way into a complaint from an order: its own colour, so a trader with frozen money finds it. */
.ds .ds-btn.cc-sheet-entry {
  color: #1c1305;
  background: var(--warning);
  border-color: var(--warning);
}
.ds .ds-btn.cc-sheet-entry:hover {
  color: #1c1305;
  background: color-mix(in srgb, var(--warning) 86%, #fff);
  border-color: color-mix(in srgb, var(--warning) 86%, #fff);
}
:root[data-theme='light'] .ds .ds-btn.cc-sheet-entry,
:root[data-theme='light'] .ds .ds-btn.cc-sheet-entry:hover {
  color: #fff;
}
:root[data-theme='light'] .ds .ds-btn.cc-sheet-entry:hover {
  background: color-mix(in srgb, var(--warning) 88%, #000);
  border-color: color-mix(in srgb, var(--warning) 88%, #000);
}

/* ---------- narrow screens ---------- */
@media (max-width: 1099px) {
  .ds .cc-review {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .cc-review__main,
  .ds .cc-review__rail {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 640px) {
  .ds .cc-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds .cc-hero {
    flex-direction: column;
    gap: 12px;
  }
  .ds .cc-hero__money {
    align-items: flex-start;
  }
  .ds .cc-respond .ds-btn {
    width: 100%;
  }
  .ds .cc-slot {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .ds .cc-slot__actions {
    grid-column: 2;
  }
  .ds .cc-viewer__pdf,
  .ds .cc-viewer__video,
  .ds .cc-viewer__image {
    max-height: 420px;
  }
  .ds .cc-viewer__pdf {
    height: 420px;
  }
}

/* The complaint form in a sheet: two rows of fields, then the files as plain lines. */
.ds .cc-report {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds .cc-report__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px 12px;
}
.ds .cc-report__files {
  border-bottom: 1px solid var(--hairline);
}
.ds .cc-report .cc-date,
.ds .cc-report .cc-date > * {
  width: 100%;
}
.ds .cc-report__note .ds-btn {
  padding-inline: 0;
}
.ds .cc-slot--row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 11px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
}
.ds .cc-slot--row.is-done,
.ds .cc-slot--row.is-failed {
  border-color: var(--hairline);
}
.ds .cc-slot--row .cc-slot__title {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ds .cc-slot--row .cc-slot__ok {
  display: inline-flex;
  flex: none;
  color: var(--success);
}
.ds .cc-slot--row.is-missing .cc-slot__hint {
  color: var(--error);
}
.ds .cc-slot--row .cc-slot__file {
  margin-top: 2px;
}
.ds .cc-slot--row .cc-slot__actions {
  grid-column: auto;
}
.ds button.cc-card {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 640px) {
  .ds .cc-report__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Which order: a searchable list of completed orders in a sheet. */
.ds .ds-sheet__body .ds-toolbar .ds-search {
  flex: 1 1 100%;
  max-width: none;
}
.ds .cc-pick {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds .cc-pick__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 8px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
}
.ds .cc-pick li:first-child .cc-pick__row {
  border-top: 0;
}
.ds .cc-pick__row:hover {
  background: var(--surface-hover, color-mix(in srgb, var(--text) 5%, transparent));
}
.ds .cc-pick__row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.ds .cc-pick__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .cc-pick__sub {
  overflow: hidden;
  color: var(--text-2, var(--muted));
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .cc-pick__side {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--text-2, var(--muted));
  font-size: 12.5px;
}
.ds .cc-pick__more {
  margin: 12px 0 0;
  color: var(--text-2, var(--muted));
  font-size: 12.5px;
}
/* ================================================================
   Staff Spotlight (Cmd/Ctrl+K): Components/Spotlight, js/spotlight.js.
   The overlay is always in the DOM; js/spotlight.js puts html.spot-open on
   and off. Colours only from tokens (both themes follow), the kit's radii,
   the open-row look of the tables (accent wash + 3px accent bar) for the
   highlighted row. Also: .ds-kbd, the small key cap used for shortcut hints.
   ================================================================ */

/* ---------- key cap ---------- */
.ds .ds-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--hairline-strong);
  border-radius: 5px;
  background: var(--wash-1);
  color: var(--text-2);
  font: 500 11px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds .ds-kbd + .ds-kbd {
  margin-left: 3px;
}
/* the "+" of a chord ("Ctrl+K"): a hair of room on both sides, quieter than the keys */
.ds .ds-kbd__plus {
  margin: 0 2px;
  color: var(--text-3);
}
/* ⌘ on a Mac, Ctrl elsewhere (spotlight.js sets html.spot-mac) */
.spot-mod-mac {
  display: none;
}
html.spot-mac .spot-mod-mac {
  display: inline;
}
html.spot-mac .spot-mod-pc {
  display: none;
}

/* ---------- top-bar trigger ---------- */
html.ds .spot-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-right: 4px;
  padding: 0 7px 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--wash-1);
  color: var(--text-2);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
html.ds .spot-trigger:hover {
  color: var(--text);
  background: var(--wash-2);
  border-color: var(--hairline-strong);
}
html.ds .spot-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
html.ds .spot-trigger__label {
  min-width: 64px;
  text-align: left;
}
/* nav-l2 and narrower (responsive.js): the round icon button of the other top-bar icons */
html.ds.nav-l2 .spot-trigger {
  width: 36px;
  padding: 0;
  justify-content: center;
  border-color: transparent;
  background: transparent;
}
html.ds.nav-l2 .spot-trigger:hover {
  background: var(--wash-2);
}
html.ds.nav-l2 .spot-trigger__label,
html.ds.nav-l2 .spot-trigger__kbd {
  display: none;
}
@media (pointer: coarse) {
  html.ds .spot-trigger__kbd {
    display: none;
  }
}
@media (max-width: 640px) {
  html.ds .spot-trigger {
    width: 34px;
    height: 34px;
    margin-right: 0;
  }
}

/* ---------- overlay ---------- */
html.spot-open,
html.spot-open body {
  overflow: hidden;
}
.ds .spot {
  position: fixed;
  inset: 0;
  z-index: 1300; /* over sheets (1000) and toasts */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease-in, visibility 0s linear 90ms;
}
html.spot-open .ds .spot {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 120ms ease-out, visibility 0s;
}
.ds .spot__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ds .spot__panel {
  position: absolute;
  top: 14vh;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 14vh - 24px);
  overflow: hidden;
  background: var(--popover);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--ds-r-card);
  box-shadow: var(--shadow-popover), var(--shadow-float);
  color: var(--text);
  transform: translateX(-50%) scale(0.985);
  transform-origin: 50% 0;
  transition: transform 90ms ease-in;
}
html.spot-open .ds .spot__panel {
  transform: translateX(-50%) scale(1);
  transition: transform 120ms var(--ease-out);
}

/* input row */
.ds .spot__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  height: 56px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--hairline);
}
.ds .spot__glass {
  flex: none;
  color: var(--text-2);
}
.ds .spot__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: 450 18px/1.2 var(--font-sans);
  caret-color: var(--accent);
}
.ds .spot__input::placeholder {
  color: var(--text-2);
  opacity: 1;
}
.ds .spot__input::-ms-clear {
  display: none;
}
.ds .spot__clear,
.ds .spot__busy {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--text-2);
}
.ds .spot__clear {
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.ds .spot__clear:hover {
  color: var(--text);
  background: var(--wash-2);
}
.ds .spot__clear:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
/* the spinner shows only when the server takes a moment: a fast answer never blinks it */
.ds .spot__busy {
  animation: spot-late 0.12s ease 0.15s both;
}

/* list + preview */
.ds .spot__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}
.ds .spot__list {
  max-height: min(520px, calc(100dvh - 14vh - 24px - 56px - 38px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  scroll-padding: 6px 0;
}
.ds .spot__label {
  padding: 10px 10px 4px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.ds .spot__list > .spot__label:first-child {
  padding-top: 6px;
}
.ds .spot__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 5px 10px;
  border-radius: var(--ds-r-row);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.ds .spot__row.is-active {
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ds .spot__lead {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
}
.ds .spot__glyph {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--wash-2);
  color: var(--text-2);
}
.ds .spot__row.is-active .spot__glyph {
  color: var(--text);
}
.ds .spot__glyph--lg {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.ds .spot__main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.ds .spot__title,
.ds .spot__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .spot__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
}
.ds .spot__title.ds-mono {
  font-size: 13.5px;
}
.ds .spot__sub {
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 17px;
}
.ds .spot__sub .ds-mono {
  font-size: 12px;
}
.ds .spot__by {
  font-weight: 500;
}
.ds .spot__hl {
  padding: 0;
  background: none;
  color: inherit;
  font-weight: 700;
}
.ds .spot__end {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: auto;
  padding-left: 8px;
}
.ds .spot__hint,
.ds .spot__note,
.ds .spot__empty {
  margin: 0;
  padding: 12px 10px 10px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}
.ds .spot__hint .ds-mono {
  color: var(--text);
  font-size: 12.5px;
}
.ds .spot__empty {
  padding: 26px 16px 22px;
  text-align: center;
}
.ds .spot__empty p {
  margin: 0;
}
.ds .spot__empty-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.ds .spot__empty-hint {
  margin-top: 4px !important;
}

/* preview: wide screens only */
.ds .spot__preview {
  display: none;
}
@media (min-width: 1100px) {
  .ds .spot__panel {
    width: min(980px, calc(100vw - 32px));
  }
  .ds .spot__panel.has-preview .spot__body {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  }
  .ds .spot__preview {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-height: min(520px, calc(100dvh - 14vh - 24px - 56px - 38px));
    overflow-y: auto;
    padding: 18px 20px 20px;
    border-left: 1px solid var(--hairline);
    background: var(--popover-card);
  }
}
.ds .spot__pv-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ds .spot__pv-lead {
  display: grid;
  place-items: center;
  flex: none;
}
.ds .spot__pv-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds .spot__pv-title {
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .spot__pv-sub {
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds .spot__pv-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}
.ds .spot__pv-facts {
  margin-top: 16px;
}
.ds .spot__pv-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: auto;
  padding-top: 18px;
}
.ds .spot__pv-keys {
  color: var(--text-2);
  font-size: 12px;
}

/* footer */
.ds .spot__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  min-height: 38px;
  padding: 8px 16px;
  border-top: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: 12px;
}
.ds .spot__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.ds .spot__keys > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds .spot__took {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* phones: a sheet from the top, no footer, taller rows, 16px input (no iOS zoom) */
@media (max-width: 640px) {
  .ds .spot__panel {
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100dvh;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 var(--ds-r-card) var(--ds-r-card);
    transform: translateY(-8px);
  }
  html.spot-open .ds .spot__panel {
    transform: none;
  }
  .ds .spot__bar {
    padding: 0 10px 0 14px;
  }
  .ds .spot__input {
    font-size: 16px;
  }
  .ds .spot__list {
    max-height: calc(100dvh - 56px - 12px);
  }
  .ds .spot__row {
    min-height: 52px;
  }
  .ds .spot__foot {
    display: none;
  }
}

@keyframes spot-late {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds .spot,
  html.spot-open .ds .spot,
  .ds .spot__panel,
  html.spot-open .ds .spot__panel {
    transition: none;
  }
  .ds .spot__panel {
    transform: translateX(-50%);
  }
  .ds .spot__busy {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .ds .spot__panel {
    transform: none;
  }
}
/* ================================================================
   Portal, light theme only: the old app's liveliness on the new kit.

   2026-10-13, second "old colours" pass. The tokens (tokens.css, light block) already carry the
   pre-redesign slate + indigo palette; next to the old portal (a2710ac0) the light theme still read
   flat, because the old light theme also had a few accent touches the kit draws neutral:
   the faint indigo cross pattern on the body, the indigo wordmark and logo rings, the solid indigo
   segment, the indigo active tab, indigo calendar icons, bold indigo KPI icon chips and status
   badges with a ring in their tone. This file puts exactly those back.

   Every rule sits under html.ds[data-theme='light']. The theme bootstrap in index.html resolves
   "system" into data-theme on <html>, so this covers a light OS preference too, and the dark theme
   never matches any rule here. Colours come from tokens; the one literal is the cross pattern's
   fill inside a data: URI, which cannot read a custom property (it is the light --accent, #4f46e5).
   Loaded last among the ds styles (index.html), so equal-specificity kit rules lose to it.
   ================================================================ */

/* ---------- body: the old soft indigo washes and the faint cross pattern ---------- */
/* !important: tokens.css paints html.ds body with !important (to beat app.css); this selector is
   more specific, so it wins in light only */
html.ds[data-theme='light'] body {
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 5%, rgba(var(--accent-rgb), 0.045) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(var(--accent-rgb), 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(var(--accent-rgb), 0.025) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234F46E5' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  background-attachment: fixed !important;
}

/* ---------- brand: indigo wordmark and indigo logo rings (the core dot is already the accent) ---------- */
html.ds[data-theme='light'] .ds-brand,
html.ds[data-theme='light'] .ds-brand .ds-brand__mark {
  color: var(--accent);
}
html.ds[data-theme='light'] .ds-brand .ds-brand__word {
  color: var(--accent);
}

/* ---------- segment switch: the current option is a solid indigo pill with white text ---------- */
html.ds[data-theme='light'] .ds-tabs--segment .ds-tab.is-active {
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(var(--accent-rgb), 0.25), 0 2px 8px -2px rgba(var(--accent-rgb), 0.35);
}
html.ds[data-theme='light'] .ds-tabs--segment .ds-tab.is-active .ds-tab__count {
  color: inherit;
}

/* ---------- line tabs: the current section is indigo, label and count, over the indigo underline ---------- */
html.ds[data-theme='light'] .ds-tabs--line .ds-tab.is-active,
html.ds[data-theme='light'] .ds-tabs--line .ds-tab.is-active .ds-tab__count {
  color: var(--accent);
}

/* ---------- KPI icon chips: a firmer tint, no ring, a heavier glyph, as the old filled icons;
   a neutral chip takes the accent, so no KPI head reads grey ---------- */
html.ds[data-theme='light'] .ds-kpi__icon {
  background: color-mix(in srgb, var(--kpi-tone) 13%, var(--surface));
  box-shadow: none;
}
html.ds[data-theme='light'] .ds-kpi__icon--neutral {
  --kpi-tone: var(--accent);
}
html.ds[data-theme='light'] .ds-kpi__icon svg {
  stroke-width: 2;
}

/* ---------- date pickers: the indigo calendar icon of the old filter bar ---------- */
html.ds[data-theme='light'] .date-picker-icon {
  color: var(--accent);
}

/* ---------- status badges: a hairline ring in the badge's own tone, as the old outlined badges ---------- */
html.ds[data-theme='light'] .ds-status {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent);
}