@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-Leicht-BF663d89cd4952e.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-LeichtKursiv-BF663d89cd9a361.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-Buch-BF663d89cd32e6a.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-BuchKursiv-BF663d89cd3e887.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-Kraftig-BF663d89cd37e26.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-KraftigKursiv-BF663d89cd2bd4b.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-Halbfett-BF663d89cd2d67b.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-HalbfettKursiv-BF663d89cd41624.otf") format("opentype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-Dreiviertelfett-BF663d89ccc5f66.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-DreiviertelfettKursiv-BF663d89cd2f687.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-Fett-BF663d89cca89ff.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sohne";
    src: url("sohne/TestSohne-FettKursiv-BF663d89cc64878.otf") format("opentype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Web type scale follows roots/index.php; palette follows mobile/lib/app_colors.dart. */
:root {
    --rh-text-primary: #14213d;
    --rh-text-secondary: #4f5d75;
    --rh-text-muted: #8a94a6;
    --rh-primary: #0661ee;
    --rh-primary-pressed: #0554cf;
    --rh-primary-soft: #eaf2ff;
    --rh-secondary-background: #f3f6fa;
    --rh-secondary-text: var(--rh-text-primary);
    --rh-primary-disabled: #b8d2fa;
    --rh-on-primary: #ffffff;
    --rh-background: #ffffff;
    --rh-nav-background: #fafcff;
    --rh-surface: #f9fafb;
    --rh-border: #dfe4ee;
    --rh-border-strong: #8a94a6;
    --rh-font-body: "Sohne", sans-serif;
    --rh-font-heading: "CameraObscuraDEMO", "Sohne", sans-serif;
    --rh-text-caption: .625rem; /* 10px: dense table metadata only */
    --rh-text-label: .6875rem; /* 11px: login labels, table rows */
    --rh-text-nav: .75rem; /* 12px: sidebar navigation. */
    --rh-text-supporting: var(--rh-text-label);
    --rh-text-control: .75rem; /* 12px: actions and supporting copy */
    --rh-text-body: .8125rem; /* 13px: reading and form input */
    --rh-text-section: 1rem; /* 16px: section headings */
    --rh-text-title: 1.375rem; /* 22px: login and page titles */
    --rh-text-metric: 2rem; /* 32px: balances, not page titles */
    --rh-radius-control: 7px;
    --rh-radius-card: 12px;
    --rh-shadow-overlay: 0 8px 24px rgb(20 33 61 / .10);
    /* Compatibility aliases keep existing pages on the same palette. */
    --text: var(--rh-text-primary);
    --dark: var(--rh-text-primary);
    --brand: var(--rh-text-primary);
    --muted: var(--rh-text-secondary);
    --muted-soft: var(--rh-text-secondary);
    --accent: var(--rh-primary);
    --button: var(--rh-primary);
    --button-hover: var(--rh-primary-pressed);
    --brand-soft: var(--rh-primary-soft);
    --bg: var(--rh-background);
    --surface: var(--rh-background);
    --surface-soft: var(--rh-surface);
    --soft: var(--rh-surface);
    --line: var(--rh-border);
    --line-strong: var(--rh-border-strong);
    --bs-body-color: var(--rh-text-primary);
    --bs-secondary-color: var(--rh-text-secondary);
    --bs-primary: var(--rh-primary);
    --bs-primary-rgb: 6, 97, 238;
}

body.rh-console, body.rh-auth {
    color: var(--rh-text-primary);
    background-color: var(--rh-background);
    font-family: var(--rh-font-body);
    font-size: var(--rh-text-body);
    line-height: 1.5;
    letter-spacing: -.012em;
}

body.rh-auth { font-size: var(--rh-text-label); }

body.rh-console h1:not(:where(.document-paper h1)),
body.rh-console :is(.console-masthead-title, .hero h1, .focus-home__title, .vault-reference-title),
body.rh-auth :is(.auth-title, .step-title) {
    color: var(--rh-text-primary);
    font-family: var(--rh-font-heading);
    font-size: var(--rh-text-title);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .01em;
    text-decoration: none;
}

body.rh-console :is(h2, h3):not(:where(.document-paper *)),
body.rh-console :is(.card-z h2, .workspace-card h2, .withdraw-card h2, .vault-setup-card h2,
    .vault-section-title h2, .vault-finance-panel__title, .vault-wallet-panel__title) {
    color: var(--rh-text-primary);
    font-size: var(--rh-text-section) !important; /* Includes legacy inline section sizes. */
    font-family: var(--rh-font-body);
    line-height: 1.35;
    font-weight: 600;
}

body.rh-console .sidebar-upgrade h3.sidebar-upgrade-title {
    font-family: "CameraObscuraDEMO", "Sohne", sans-serif;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
}

body.rh-console :is(.console-masthead-meta, .form-hint, .workspace-muted, .pin-help, .nuban-consent,
    .nuban-brand-email, .withdraw-card p:not(.withdraw-amount-error), .withdraw-destination > span,
    .page-subtitle, .board-detail-subtitle, .cohorts-subtitle, .lifecycle-subtitle,
    .transactions-empty-copy, .transfers-empty-copy, .topups-empty-copy, .console-empty-copy,
    .profile-empty-copy, .transactions-create-copy, .workspace-card > p, .sidebar-upgrade p, .muted, .text-muted) {
    color: var(--rh-text-secondary);
    font-size: var(--rh-text-supporting);
    line-height: 1.5;
}

body.rh-console :is(.label, .form-label, .workspace-field label, .nuban-field,
    .withdraw-form label, .withdraw-pin legend, .pin-fieldset legend, .vault-setup-form label) {
    color: var(--rh-text-secondary);
    font-size: var(--rh-text-label);
    font-weight: 500;
    line-height: 1.45;
}

body.rh-console :is(.form-control, .form-select, .workspace-field input, .workspace-field select,
    .workspace-field textarea, .workspace-item input, .nuban-field input, .nuban-bank-select,
    .withdraw-form input:not(.pin-digit), .vault-setup-form input:not(.pin-digit)) {
    color: var(--rh-text-primary);
    background-color: var(--rh-surface);
    border-color: var(--rh-border-strong);
    border-radius: var(--rh-radius-control);
    font-family: var(--rh-font-body);
    font-size: var(--rh-text-body);
    font-weight: 400;
    line-height: 1.5;
}

body.rh-auth :is(.field-input, .field-select) {
    color: var(--rh-text-primary);
    font-size: var(--rh-text-label);
    border-color: var(--rh-border-strong);
    border-width: 1px;
}

body:is(.rh-console, .rh-auth) :is(input, textarea)::placeholder { color: var(--rh-text-secondary); opacity: 1; }

body:is(.rh-console, .rh-auth) :is(.btn-z, .btn-ghost, .btn-email, .btn-primary-auth,
    .console-masthead-action, .vault-setup-button, .settings-button, .kyc-flow-button,
    .kyc-document-button, .withdraw-form button) {
    min-height: 40px;
    border-radius: var(--rh-radius-control);
    font-family: var(--rh-font-body);
    font-size: var(--rh-text-control);
    font-weight: 600;
    line-height: 1.4;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body:is(.rh-console, .rh-auth) :is(.btn-z, .btn-email, .btn-primary-auth,
    .console-masthead-action.primary, .vault-setup-button:not(.vault-setup-secondary),
    .settings-button.primary, .kyc-flow-button, .kyc-document-button, .withdraw-form button,
    .focus-composer__submit) {
    background: var(--rh-primary);
    border-color: var(--rh-primary);
    color: var(--rh-on-primary);
}

body:is(.rh-console, .rh-auth) :is(.btn-z, .btn-email, .btn-primary-auth,
    .console-masthead-action.primary, .vault-setup-button:not(.vault-setup-secondary),
    .settings-button.primary, .kyc-flow-button, .kyc-document-button, .withdraw-form button,
    .focus-composer__submit):is(:hover, :active):not(:disabled):not([aria-disabled="true"]) {
    background: var(--rh-primary-pressed);
    border-color: var(--rh-primary-pressed);
    color: var(--rh-on-primary);
    transform: none;
}

body.rh-console :is(.btn-secondary, .btn-ghost, .console-masthead-action:not(.primary),
    .vault-setup-secondary, .settings-button:not(.primary)) {
    color: var(--rh-secondary-text);
    background: var(--rh-secondary-background);
    border-color: transparent;
}

body.rh-console :is(.btn-secondary, .btn-ghost, .console-masthead-action:not(.primary),
    .vault-setup-secondary, .settings-button:not(.primary)):hover {
    color: var(--rh-secondary-text);
    background: #dceaff;
}

body:is(.rh-console, .rh-auth) :is(.btn-z, .btn-email, .btn-primary-auth,
    .console-masthead-action.primary, .vault-setup-button, .settings-button.primary,
    .kyc-flow-button, .kyc-document-button, .withdraw-form button):is(:disabled, [aria-disabled="true"]) {
    background: var(--rh-primary-disabled);
    border-color: var(--rh-primary-disabled);
    color: var(--rh-text-secondary);
    opacity: 1;
    cursor: not-allowed;
}

body:is(.rh-console, .rh-auth) :is(button, a, [tabindex]):not(:is(input, select, textarea, [contenteditable], .select2-selection)):focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: 3px;
}

/* Inputs stay flat, including browser focus rings and page-specific PIN styles. */
body:is(.rh-console, .rh-auth) :is(input, select, textarea, [contenteditable], .select2-selection) {
    outline: none !important;
    box-shadow: none !important;
}

body:is(.rh-console, .rh-auth) :is(input, select, textarea, [contenteditable], .select2-selection):focus:not(:is(.is-invalid, .is-valid, [aria-invalid="true"])),
body.rh-auth .phone-shell:focus-within:not(.is-invalid) {
    border-color: var(--rh-border-strong) !important;
}

body:is(.rh-console, .rh-auth) :is(.focus-composer, .thread-composer, .phone-shell, .select2-dropdown) {
    box-shadow: none !important;
}

body.rh-console :is(.card-z, .workspace-card, .nuban-card, .withdraw-card) {
    border-radius: var(--rh-radius-card);
    border-color: var(--rh-border);
    background-color: var(--rh-background);
    box-shadow: none;
}

body.rh-console :is(.console-top-menu, .console-top-submenu, .select2-dropdown) {
    box-shadow: var(--rh-shadow-overlay);
}

body.rh-console :is(.sidebar-link, .settings-tab, .canvas-tab) {
    font-size: var(--rh-text-control);
    font-weight: 500;
}

body.rh-console .nav-link-z { font-size: var(--rh-text-nav); }
body.rh-console :is(.console-top-menu-link, .console-top-submenu-link, .canvas-tab) { font-size: .8125rem; }

body.rh-console :is(.settings-tab.is-active, .pin-send-code) { color: var(--rh-primary); }
body.rh-console .canvas-tab.active { background: var(--rh-primary-soft); color: var(--rh-primary-pressed); }
body.rh-console :is(.table-z, .workspace-table) { font-size: var(--rh-text-label); font-variant-numeric: tabular-nums; }
body.rh-console :is(.table-z, .workspace-table) th { color: var(--rh-text-secondary); font-size: var(--rh-text-caption); font-weight: 600; }
body.rh-console :is(.table-z, .workspace-table) td { color: var(--rh-text-primary); }
body.rh-console :is(.metric, .vault-summary-card-value, .workspace-total) { font-size: var(--rh-text-metric); font-variant-numeric: tabular-nums; }

/* Older feature pages have their own action classes. Keep their states aligned. */
body.rh-console :is(.boards-create, .boards-canvas-submit, .board-detail-button.primary,
    .cohorts-btn.primary, .lifecycle-btn.primary, .notify-action-primary,
    .thread-composer__submit, .insights-send) {
    color: var(--rh-on-primary);
    background: var(--rh-primary);
    border-color: var(--rh-primary);
    border-radius: var(--rh-radius-control);
    min-height: 40px;
    font-family: var(--rh-font-body);
    font-size: var(--rh-text-control);
    font-weight: 600;
    box-shadow: none;
}

body.rh-console :is(.boards-create, .boards-canvas-submit, .board-detail-button.primary,
    .cohorts-btn.primary, .lifecycle-btn.primary, .notify-action-primary,
    .thread-composer__submit, .insights-send):is(:hover, :active):not(:disabled) {
    color: var(--rh-on-primary);
    background: var(--rh-primary-pressed);
    border-color: var(--rh-primary-pressed);
}

body.rh-console :is(.boards-create, .boards-canvas-submit, .board-detail-button.primary,
    .cohorts-btn.primary, .lifecycle-btn.primary, .notify-action-primary,
    .thread-composer__submit, .insights-send):disabled {
    color: var(--rh-text-secondary);
    background: var(--rh-primary-disabled);
    border-color: var(--rh-primary-disabled);
    cursor: not-allowed;
}

body.rh-console :is(.thread-composer__submit, .insights-send) { min-width: 40px; }
body.rh-console :is(.settings-tab.is-active, .boards-tab.active, .goals-tab.active)::after { background: var(--rh-primary); }
body.rh-console :is(.transfers-filter-toggle, .transactions-filter-toggle, .topups-filter-toggle,
    .cohorts-mode-button, .lifecycle-framework-button):is(.is-active, .is-open) {
    background: var(--rh-primary-soft);
    color: var(--rh-primary-pressed);
}

@media (max-width: 600px) {
    :root { --rh-text-title: 1.25rem; --rh-text-metric: 1.75rem; }
    body:is(.rh-console, .rh-auth) :is(.btn-z, .btn-ghost, .btn-email, .btn-primary-auth,
        .console-masthead-action, .vault-setup-button, .settings-button, .kyc-flow-button,
        .kyc-document-button, .withdraw-form button, .boards-create, .boards-canvas-submit,
        .board-detail-button.primary, .cohorts-btn.primary, .lifecycle-btn.primary,
        .notify-action-primary, .thread-composer__submit, .insights-send) { min-height: 44px; }
    body.rh-console :is(.thread-composer__submit, .insights-send) { min-width: 44px; }
    /* Keep text fields readable and prevent focus zoom on mobile Safari. */
    body:is(.rh-console, .rh-auth) :is(.field-input, .form-control, .form-select,
        .workspace-field input, .workspace-field select, .workspace-field textarea,
        .workspace-item input, .nuban-field input, .withdraw-form input:not(.pin-digit)) { font-size: 1rem; }
}

/* Default secondary button sizing, shared by toolbar and page actions. */
body:is(.rh-console, .rh-auth) :is(.btn-secondary, .btn-ghost,
    .console-masthead-action:not(.primary), .vault-setup-secondary,
    .settings-button:not(.primary), .board-detail-button:not(.primary),
    .cohorts-btn:not(.primary), .lifecycle-btn:not(.primary)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 16px 0 10px;
    gap: 6px;
    border-radius: 999px;
    font-family: var(--rh-font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: none;
}

/* Keep secondary action labels and icons optically centered together. */
body.rh-console .btn-secondary { border: 0; text-decoration: none; }
body.rh-console :is(.btn-secondary, .console-masthead-action:not(.primary)) > :is(span, i, svg) {
    position: relative;
    top: -1px;
    margin: 0;
    color: inherit;
    line-height: inherit;
}

/* Shared main-page fields: compact controls with visible interaction states.
   Keep embedded search/composer controls, PIN digits and document editing intact. */
body.rh-console .main :is(input:not([type]), input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], input[type="tel"], input[type="url"],
    input[type="search"], input[type="date"], input[type="datetime-local"],
    select, textarea, .select2-selection--single):not(:where(
        .pin-digit, .document-paper *, .focus-composer *, .thread-composer *,
        .console-topbar *, .console-search *, [hidden])) {
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background-color: #fff;
    color: var(--rh-text-primary);
    font-family: var(--rh-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    min-height: 36px;
    padding-block: 7px;
    transition: border-color .15s ease, background-color .15s ease;
}

body.rh-console .main :is(input, select):not(:where(
    [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
    [type="hidden"], [type="submit"], [type="button"], [type="reset"],
    .pin-digit, .document-paper *, .focus-composer *, .thread-composer *,
    .console-topbar *, .console-search *, [hidden])) { height: 36px; }

body.rh-console .main textarea:not(:where(.document-paper *, .focus-composer *, .thread-composer *)) { min-height: 96px; }

body.rh-console .main :is(input, select, textarea, .select2-selection--single):focus:not(:is(.is-invalid, [aria-invalid="true"])) {
    border-color: var(--rh-primary) !important;
    box-shadow: 0 0 0 2px rgba(2, 97, 239, .1) !important;
}
body.rh-console .main :is(input, select, textarea, .select2-selection--single):is(.is-invalid, [aria-invalid="true"]) {
    border-color: #dc4675 !important;
    box-shadow: 0 0 0 2px rgba(220, 70, 117, .08) !important;
}
body.rh-console .main :is(input, select, textarea):disabled {
    background-color: #f5f6f8;
    color: var(--rh-text-secondary);
    cursor: not-allowed;
}
body.rh-console .main .select2-selection--single {
    height: 36px;
    padding-block: 0;
}
body.rh-console .main .select2-selection--single .select2-selection__rendered { line-height: 34px; }
body.rh-console .main .select2-selection--single .select2-selection__arrow { top: 4px; }
body.rh-console .main .select2-container--open .select2-selection--single { border-color: var(--rh-primary) !important; }
@media (max-width: 720px) {
    body.rh-console .main :is(input, select, textarea):not(:where(.pin-digit, .document-paper *, .focus-composer *, .thread-composer *)) { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.rh-console, .rh-auth) :is(button, .btn-z, .btn-ghost, .btn-email, .console-masthead-action) { transition: none; }
}