:root {
    --b-blue: #2a4bff;
    --b-signal: #5b78ff;
    --b-halo: #7f9bff;
    --b-mist: #c9d4ff;
    --b-ink: #10131a;
    --b-slate: #545b6b;
    --b-cloud: #eef0f3;
    --b-white: #ffffff;
    --bg: #ffffff;
    --surface: #f3f4f7;
    --fg: #10131a;
    --text: #3a404e;
    --muted: #5a6172;
    --line: #e2e5ea;
    --accent: var(--brand-primary, #2a4bff);
    --focus: var(--brand-primary, #2a4bff);
    --do: #0a7a55;
    --dont: #c2361d;
    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-sans: var(--font);
    --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --cl-ink: #10131a;
    --cl-muted: #545b6b;
    --cl-card: #ffffff;
    --cl-surface: #f3f4f7;
    --cl-surface-2: #eef0f3;
    --cl-border: #e2e5ea;
    --cl-radius-lg: 16px;
    --vl-ink: #10131a;
    --vl-muted: #545b6b;
    --vl-card: #ffffff;
    --vl-surface: #f3f4f7;
    --vl-border: #e2e5ea;
    --pl-ink: #10131a;
    --pl-muted: #545b6b;
    --pl-card: #ffffff;
    --pl-surface: #f3f4f7;
    --pl-border: #e2e5ea;
    --ink: #10131a;
    --card: #ffffff;
    --border: #e2e5ea;
}

html[data-theme="dark"] {
    --bg: #0b0d12;
    --surface: #151922;
    --fg: #eef0f3;
    --text: #c3c8d4;
    --muted: #9aa1b2;
    --line: #252a35;
    --accent: #8fa6ff;
    --focus: #8fa6ff;
    --do: #4fd1a1;
    --dont: #ff8a70;
    --cl-ink: #eef0f3;
    --cl-muted: #9aa1b2;
    --cl-card: #151922;
    --cl-surface: #0b0d12;
    --cl-surface-2: #151922;
    --cl-border: #252a35;
    --vl-ink: #eef0f3;
    --vl-muted: #9aa1b2;
    --vl-card: #151922;
    --vl-surface: #0b0d12;
    --vl-border: #252a35;
    --pl-ink: #eef0f3;
    --pl-muted: #9aa1b2;
    --pl-card: #151922;
    --pl-surface: #0b0d12;
    --pl-border: #252a35;
    --ink: #eef0f3;
    --card: #151922;
    --border: #252a35;
    color-scheme: dark;
}

html,
body {
    background: var(--surface) !important;
    color: var(--fg) !important;
    font-family: var(--f-sans) !important;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

html body .layout-page,
html body .content-wrapper,
html body .container-xxl,
html body .cl-app,
html body .cl-main,
html body .vl-app,
html body .vl-main,
html body .pl-app,
html body .pl-main,
html body .pl-auth .pl-main {
    background: var(--surface) !important;
    color: var(--fg);
    font-family: var(--f-sans) !important;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .section-title,
html body .cl-dash-head h1,
html body .vl-dash-head h1,
html body .pl-dash-head h1,
html body .pl-title,
html body .pl-aside-copy h2,
html body button,
html body .btn,
html body input,
html body select,
html body textarea,
html body .form-control,
html body .dropdown-menu,
html body .dropdown-item,
html body .menu-link,
html body .table,
html body label,
html body .topbar,
html body .account-copy,
html body .navbar-nav {
    font-family: var(--f-sans) !important;
}

html body h1,
html body .pl-title,
html body .pl-aside-copy h2 {
    letter-spacing: -0.035em;
    font-weight: 700;
}

html body h2,
html body h3,
html body .section-title {
    letter-spacing: -0.025em;
    color: var(--fg);
}

html body code,
html body pre,
html body kbd,
html body samp,
html body .mono {
    font-family: var(--f-mono) !important;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 6px;
}

html body #layout-menu {
    background: var(--b-ink) !important;
    border-right: 1px solid #252a35 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body #layout-menu {
    background: #0b0d12 !important;
    box-shadow: none !important;
}

html body .topbar {
    height: 60px;
    min-height: 60px;
    background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
}

html body .topbar .account-chip,
html body .cl-user-btn,
html body .vl-user-btn,
html body .pl-user-btn,
html body .cl-theme-toggle,
html body .vl-theme-toggle,
html body .pl-theme-toggle {
    border-radius: 999px !important;
    border: 1px solid var(--line) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

html body .topbar .account-mark,
html body .topbar .profile-avatar {
    border-radius: 999px !important;
    background: var(--accent) !important;
    box-shadow: none !important;
}

html body .cl-navbar,
html body .vl-navbar,
html body .pl-navbar {
    height: 60px;
    background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
}

html body .cl-navbar-nav .cl-nav-link,
html body .vl-navbar-nav .vl-nav-link,
html body .pl-navbar-nav .pl-nav-link {
    border-radius: 8px !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
}

html body .cl-navbar-nav .cl-nav-link:hover,
html body .vl-navbar-nav .vl-nav-link:hover,
html body .pl-navbar-nav .pl-nav-link:hover {
    color: var(--fg) !important;
    background: var(--surface) !important;
}

html body .cl-navbar-nav .cl-nav-link.active,
html body .vl-navbar-nav .vl-nav-link.active,
html body .pl-navbar-nav .pl-nav-link.active {
    border-radius: 999px !important;
    background: var(--brand-primary, var(--b-blue)) !important;
    color: #fff !important;
}

html body .btn,
html.page-surface body .btn,
html body .cl-btn-primary,
html body .vl-btn-primary,
html body .pl-btn-primary,
html body .pl-btn,
html body .submit-btn-primary,
html body .section-back-btn {
    border-radius: 999px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

html body .btn.btn-primary,
html body .btn.btn-info,
html.page-surface body .btn-primary,
html body .btn-primary,
html body .btn-info,
html body .cl-btn-primary,
html body .vl-btn-primary,
html body .pl-btn-primary,
html body .pl-btn,
html body .submit-btn-primary {
    background: var(--brand-primary, var(--b-blue)) !important;
    background-image: none !important;
    border-color: var(--brand-primary, var(--b-blue)) !important;
    color: #fff !important;
}

html body .btn-primary:hover,
html body .btn-info:hover,
html body .cl-btn-primary:hover,
html body .vl-btn-primary:hover,
html body .pl-btn-primary:hover,
html body .pl-btn:hover,
html body .submit-btn-primary:hover {
    background: var(--brand-primary-dark, #1e36c4) !important;
    border-color: var(--brand-primary-dark, #1e36c4) !important;
    color: #fff !important;
}

html body .btn-outline-primary,
html body .btn-outline-info {
    background: transparent !important;
    color: var(--brand-primary, var(--b-blue)) !important;
    border: 1px solid var(--brand-primary, var(--b-blue)) !important;
}

html body .btn-default,
html body .btn-light,
html body .btn-secondary {
    background: var(--surface) !important;
    color: var(--fg) !important;
    border: 1px solid var(--line) !important;
}

html body .badge,
html body .page-item .page-link {
    border-radius: 999px !important;
}

html body .page-item.active .page-link,
html body .badge-primary,
html body .bg-primary {
    background: var(--brand-primary, var(--b-blue)) !important;
    border-color: var(--brand-primary, var(--b-blue)) !important;
}

html body .text-primary {
    color: var(--accent) !important;
}

html body .card,
html body .card-box,
html body .buyer-card,
html body .summary-card,
html body .glass-card,
html body .kpi-box,
html body .cl-card,
html body .vl-card,
html body .pl-card,
html body .filter-section,
html body .transaction-card,
html body .transaction-section-card,
html body .campaign-card,
html body .empty-state,
html body .toolbar,
html body .section-head,
html body .modal-content,
html body .dropdown-menu,
html.page-surface body .card,
html.page-surface body .card-box,
html.page-surface body .buyer-card,
html.page-surface body .summary-card,
html.page-surface body .filter-section,
html.page-surface body .transaction-card,
html.page-surface body .transaction-section-card,
html.page-surface body .campaign-card,
html.page-surface body .empty-state,
html.page-surface body .toolbar,
html.page-surface body .section-head,
html.page-surface body .modal-content {
    background: var(--bg) !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    color: var(--fg);
}

html body .dropdown-menu::before,
html body .section-head::before,
html body .section-head::after {
    content: none !important;
    display: none !important;
}

html body .page-header,
html body .cl-page-header,
html body .vl-page-header,
html body .pl-page-header {
    background: var(--b-ink) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    color: #fff !important;
}

html body .page-header h1,
html body .page-header h2,
html body .page-header .page-header-title,
html body .page-header .page-breadcrumb,
html body .page-header .page-breadcrumb a,
html body .cl-page-header,
html body .cl-page-header h1,
html body .cl-page-header h2,
html body .cl-page-header p,
html body .cl-page-header span,
html body .cl-page-header a,
html body .vl-page-header,
html body .vl-page-header h1,
html body .vl-page-header p,
html body .vl-page-header span,
html body .vl-page-header a,
html body .pl-page-header,
html body .pl-page-header h1,
html body .pl-page-header p,
html body .pl-page-header span,
html body .pl-page-header a {
    color: #fff !important;
}

html body .page-header .page-header-subtitle,
html body .page-header .page-breadcrumb,
html body .cl-page-header p,
html body .vl-page-header p,
html body .pl-page-header p {
    color: #aab1c0 !important;
}

html body .form-control,
html body .filter-input,
html body .pl-input,
html body .claim-form-input,
html body .claim-form-select {
    background: var(--bg) !important;
    color: var(--fg) !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

html body .form-control:focus,
html body .filter-input:focus,
html body .pl-input:focus {
    border-color: var(--b-blue) !important;
    box-shadow: 0 0 0 3px rgba(42, 75, 255, .16) !important;
}

html body .table {
    color: var(--text);
}

html body .table thead th {
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line) !important;
}

html body .section-title,
html body .kpi-value,
html body .cl-dash-head h1,
html body .vl-dash-head h1,
html body .pl-dash-head h1 {
    color: var(--fg) !important;
}

html body .section-ico {
    background: var(--b-mist) !important;
    color: var(--b-blue) !important;
    border-color: transparent !important;
    border-radius: 12px !important;
}

html[data-theme="dark"] body .topbar,
html[data-theme="dark"] body .cl-navbar,
html[data-theme="dark"] body .vl-navbar,
html[data-theme="dark"] body .pl-navbar {
    background: color-mix(in srgb, #0b0d12 88%, transparent) !important;
    border-bottom-color: #252a35 !important;
}

html[data-theme="dark"] body .topbar .account-chip,
html[data-theme="dark"] body .form-control,
html[data-theme="dark"] body .filter-input {
    background: #151922 !important;
    color: #eef0f3 !important;
    border-color: #252a35 !important;
}

html[data-theme="dark"] body .topbar .account-copy b,
html[data-theme="dark"] body .section-title {
    color: #eef0f3 !important;
}

@media (max-width: 800px) {
    html body .topbar {
        height: var(--topbar-h, 70px);
        min-height: var(--topbar-h, 70px);
    }
}

html body .pl-aside {
    background: #10131a !important;
    color: #fff !important;
}

html body .pl-aside h2,
html body .pl-aside .pl-brand span {
    color: #fff !important;
}

html body .pl-aside p,
html body .pl-aside li {
    color: #c3c8d4 !important;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}