:root {
    /* The brand palette, verbatim from brand/tokens/settld.css - the source of truth for every
       surface, customer-facing or back office. Anything below that is not in that file is a
       derived working value, and is expressed in terms of these. */
    --settld-carbon: #0B0C0D;
    --settld-thread-teal: #00C2A8;
    --settld-white: #FFFFFF;
    --settld-ink-70: #70726F;
    --settld-mist: #C9CCCA;
    --settld-paper: #F5F6F5;
    --settld-teal-80: #33CEB9;
    --settld-teal-60: #66DACA;
    --settld-teal-40: #99E7DC;
    --settld-teal-20: #CCF3ED;

    --settld-carbon-2: #131416;
    --settld-cream: var(--settld-paper);
    --settld-teal: var(--settld-thread-teal);
    --settld-teal-deep: #008C77;
    --settld-line: rgba(255, 255, 255, 0.08);
    --settld-dim: rgba(255, 255, 255, 0.68);

    /* neutrals — Product UI Style Guide v1.1 (verbatim from brand/tokens/settld.css) */
    --settld-hairline: #E4E6E4;
    --settld-grey-input: #ECEEEC;
    --settld-grey-track: #E6E8E6;
    --settld-grey-chip: #F0F1F0;

    /* functional — Product UI Style Guide v1.1. Deliberately NOT wired into --bs-success/--bs-danger/
       --bs-warning: those Bootstrap semantic tokens drive ~30+ pages outside Finance (alerts, generic
       badges, form validation) that this redesign doesn't touch, and remapping them would recolor all
       of it as a side effect. Consumed directly by MoneyText and Finance's local StatusChip instead. */
    --settld-pos-text: #00806F;
    --settld-pos-chip-text: #007562;
    --settld-pos-tint: #EAF9F6;
    --settld-neg-text: #8C1D18;
    --settld-neg-bg: #F9E9E8;
    --settld-alert: #B3261E;
    --settld-teal-hover: #00B098;

    /* geometry — Product UI Style Guide v1.1 */
    --settld-radius-card: 12px;
    --settld-radius-inner: 8px;
    --settld-radius-pill: 999px;
    --settld-shadow-card: 0 1px 2px rgba(11, 12, 13, .05), 0 4px 16px rgba(11, 12, 13, .04);

    --bs-body-font-family: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --bs-body-bg: var(--settld-carbon);
    --bs-body-color: #ffffff;
    --bs-border-color: var(--settld-line);

    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-primary: var(--settld-teal);
    --bs-primary-rgb: 0, 194, 168;

    --bs-link-color: var(--settld-teal);
    --bs-link-color-rgb: 0, 194, 168;
    --bs-link-hover-color: #3dd9c4;
    --bs-link-hover-color-rgb: 61, 217, 196;

    --bs-secondary: #6b7688;
    --bs-secondary-rgb: 107, 118, 136;
    --bs-secondary-color: var(--settld-dim);
    --bs-tertiary-bg: var(--settld-carbon-2);

    --bs-dark: #262a2f;
    --bs-dark-rgb: 38, 42, 47;
    --bs-dark-bg-subtle: rgba(255, 255, 255, 0.04);
    --bs-dark-border-subtle: rgba(255, 255, 255, 0.12);
    --bs-dark-text-emphasis: rgba(255, 255, 255, 0.74);

    --bs-light: #1c1f22;
    --bs-light-rgb: 28, 31, 34;
    --bs-light-bg-subtle: rgba(255, 255, 255, 0.05);
    --bs-light-border-subtle: rgba(255, 255, 255, 0.12);
    --bs-light-text-emphasis: rgba(255, 255, 255, 0.82);

    --bs-secondary-bg: #1c1f22;
    --bs-secondary-bg-subtle: rgba(255, 255, 255, 0.05);
    --bs-secondary-border-subtle: rgba(255, 255, 255, 0.12);
    --bs-secondary-text-emphasis: rgba(255, 255, 255, 0.82);

    --bs-highlight-bg: rgba(217, 166, 62, 0.28);
    --bs-highlight-color: var(--bs-body-color);

    --bs-primary-bg-subtle: rgba(0, 194, 168, 0.12);
    --bs-primary-border-subtle: rgba(0, 194, 168, 0.32);
    --bs-primary-text-emphasis: #6fe3d1;

    --bs-success: #21a374;
    --bs-success-rgb: 33, 163, 116;
    --bs-success-text-emphasis: #7de8b3;
    --bs-success-bg-subtle: rgba(33, 163, 116, 0.14);
    --bs-success-border-subtle: rgba(33, 163, 116, 0.35);

    --bs-danger: #c13d32;
    --bs-danger-rgb: 193, 61, 50;
    --bs-danger-text-emphasis: #ffb0a8;
    --bs-danger-bg-subtle: rgba(193, 61, 50, 0.14);
    --bs-danger-border-subtle: rgba(193, 61, 50, 0.35);

    --bs-warning: #d9a63e;
    --bs-warning-rgb: 217, 166, 62;
    --bs-warning-text-emphasis: #ffd98a;
    --bs-warning-bg-subtle: rgba(217, 166, 62, 0.14);
    --bs-warning-border-subtle: rgba(217, 166, 62, 0.35);

    --bs-info: #7fb0da;
    --bs-info-rgb: 127, 176, 218;
    --bs-info-text-emphasis: #b9dcf7;
    --bs-info-bg-subtle: rgba(127, 176, 218, 0.14);
    --bs-info-border-subtle: rgba(127, 176, 218, 0.35);

    --phoenix-surface: var(--settld-carbon-2);
    --phoenix-border: var(--settld-line);
    --phoenix-muted: var(--settld-dim);
    --phoenix-hover: rgba(255, 255, 255, 0.05);

    --phoenix-navy: var(--settld-carbon-2);
    --phoenix-navy-border: var(--settld-line);
    --phoenix-navy-text: var(--settld-dim);
    --phoenix-navy-text-strong: #ffffff;
    --phoenix-navy-hover: rgba(255, 255, 255, 0.05);
    --phoenix-navy-active: rgba(0, 194, 168, 0.14);
    --phoenix-accent: var(--settld-teal);

    --phoenix-label: rgba(255, 255, 255, 0.74);
    --phoenix-faint: rgba(255, 255, 255, 0.45);
    --phoenix-accent-text: var(--settld-teal);
    --phoenix-code-color: var(--settld-teal);
    --phoenix-code-bg: rgba(255, 255, 255, 0.06);

    /* Generic overlay/shadow tints used by rules below that don't have a more specific token -
       kept separate from --phoenix-* so the light-theme override only needs to redefine these once. */
    --phoenix-scrim-1: rgba(255, 255, 255, 0.03);
    --phoenix-scrim-2: rgba(255, 255, 255, 0.06);
    --phoenix-scrim-3: rgba(255, 255, 255, 0.14);
    --phoenix-shadow: rgba(0, 0, 0, 0.28);

    /* Dual-mode equivalents of the Style Guide v1.1 neutrals (--settld-grey-chip/-track/-mist etc),
       which are single light-only values in brand/tokens/settld.css - fine for Finance, which forces
       light regardless of the theme toggle, but wrong for the app-wide Phase 1 component library
       (DataTable, StatTile, KeyValueList, SelectableCard, ComparisonPanel, InfoNote, restyled
       HubTabs), which must render correctly under BOTH the dark default and the light toggle. Card
       bg/border/muted-text/hover-wash reuse the existing dual-mode --phoenix-surface/-border/-muted/
       -hover; these fill the remaining gaps. Dark defaults here, light overrides in the
       [data-pwa="staff"][data-theme="light"] block below. */
    --phoenix-chip-neutral-bg: rgba(255, 255, 255, 0.08);
    --phoenix-chip-neutral-text: var(--phoenix-muted);
    --phoenix-track-bg: rgba(255, 255, 255, 0.10);
    --phoenix-mist: rgba(255, 255, 255, 0.28);
    --phoenix-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(0, 0, 0, 0.20);

    color-scheme: dark;
}

/* Light theme - staff (backoffice) and portal (merchant) pages only. Customer-facing routes
   (checkout/store/account) never receive data-theme="light" (App.razor only honors the theme
   cookie when the request is staff-scoped), so the [data-pwa="staff"] guard here is defense in
   depth, not the primary gate. Every token below mirrors one defined in :root above; anything not
   redefined here (e.g. --phoenix-surface, --bs-body-bg) is expressed as var(--settld-*) and
   inherits the light value automatically through the cascade. */
html[data-pwa="staff"][data-theme="light"] {
    --settld-carbon: #F5F6F5;
    --settld-carbon-2: #FFFFFF;
    --settld-line: rgba(16, 17, 20, 0.10);
    --settld-dim: rgba(16, 17, 20, 0.62);

    --bs-body-color: #101114;
    --bs-emphasis-color: #101114;
    --bs-emphasis-color-rgb: 16, 17, 20;

    --bs-link-hover-color: #00A88F;
    --bs-link-hover-color-rgb: 0, 168, 143;

    --bs-tertiary-bg: rgba(16, 17, 20, 0.035);

    --bs-dark-bg-subtle: rgba(16, 17, 20, 0.06);
    --bs-dark-border-subtle: rgba(16, 17, 20, 0.14);
    --bs-dark-text-emphasis: rgba(16, 17, 20, 0.78);

    --bs-light: #E9EAEC;
    --bs-light-rgb: 233, 234, 236;
    --bs-light-bg-subtle: rgba(16, 17, 20, 0.04);
    --bs-light-border-subtle: rgba(16, 17, 20, 0.12);
    --bs-light-text-emphasis: rgba(16, 17, 20, 0.70);

    --bs-secondary-bg: #E9EAEC;
    --bs-secondary-bg-subtle: rgba(16, 17, 20, 0.04);
    --bs-secondary-border-subtle: rgba(16, 17, 20, 0.12);
    --bs-secondary-text-emphasis: rgba(16, 17, 20, 0.70);

    --bs-primary-text-emphasis: #00695A;
    --bs-success-text-emphasis: #14532D;
    --bs-danger-text-emphasis: #7A241D;
    --bs-warning-text-emphasis: #6B4B10;
    --bs-info-text-emphasis: #1B4568;

    --phoenix-hover: rgba(16, 17, 20, 0.045);
    /* These still need to flip here for Portal, whose sidebar keeps following the theme toggle
       (only Backoffice's sidebar is pinned dark - see .sidebar--pinned-dark in MainLayout.razor.css,
       which locally overrides all of --phoenix-navy/-border/-text/-text-strong/-hover/-active for
       itself and wins over these regardless of what's declared here). Without a light-theme value
       here, Portal's active/hover nav text would keep the dark-theme white text color even though
       Portal's sidebar has gone light, which is unreadable - this was a real regression caught live.
       Guide's nav active-item fill is a flat Teal 20, not a low-alpha wash - the dark theme's
       rgba(teal, 0.14) blends fine against any dark surface, but a flat swatch reads truer in light
       mode where the guide's spec was authored against a white/paper surface. */
    --phoenix-navy-text-strong: #101114;
    --phoenix-navy-hover: rgba(16, 17, 20, 0.045);
    --phoenix-navy-active: var(--settld-teal-20);

    --phoenix-chip-neutral-bg: var(--settld-grey-chip);
    --phoenix-chip-neutral-text: var(--settld-ink-70);
    --phoenix-track-bg: var(--settld-grey-track);
    --phoenix-mist: var(--settld-mist);
    --phoenix-card-shadow: var(--settld-shadow-card);
    --phoenix-accent-text: #00695A;

    --phoenix-label: rgba(16, 17, 20, 0.68);
    --phoenix-faint: rgba(16, 17, 20, 0.40);
    --phoenix-code-color: #00695A;
    --phoenix-code-bg: rgba(16, 17, 20, 0.055);

    --phoenix-scrim-1: rgba(16, 17, 20, 0.035);
    --phoenix-scrim-2: rgba(16, 17, 20, 0.06);
    --phoenix-scrim-3: rgba(16, 17, 20, 0.16);
    --phoenix-shadow: rgba(16, 17, 20, 0.14);

    color-scheme: light;
}

/* Style Guide v1.1 topbar: a flat grey pill search and a flat Paper-based bar, replacing the dark
   shell's frosted-glass treatment. Lives here (rather than in TopBarSearch.razor.css/
   MainLayout.razor.css) because those are Blazor CSS-isolated files with no existing precedent in
   this codebase for an html[data-theme] ancestor selector reaching a scoped class - this global
   sheet is where the same light-theme override pattern already lives for every other component. */
html[data-pwa="staff"][data-theme="light"] .omni__glass {
    background: var(--settld-grey-input);
    background-image: none;
    border-color: var(--settld-hairline);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

html[data-pwa="staff"][data-theme="light"] .omni__glass:hover {
    border-color: var(--settld-mist);
}

html[data-pwa="staff"][data-theme="light"] .omni:focus-within .omni__glass {
    background: var(--settld-grey-input);
    background-image: none;
    border-color: var(--settld-teal);
    box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.16);
}

/* main > .top-row (not the bare class) - NavMenu.razor also has an inner div with class "top-row"
   (wrapping the sidebar logo), which this same class-based global selector would otherwise also
   match. That was harmless when the sidebar itself went light too, but Backoffice's sidebar is now
   pinned dark (see .sidebar--pinned-dark in MainLayout.razor.css) regardless of this data-theme
   guard, so painting NavMenu's inner top-row Paper here left a white-on-dark logo sitting on a
   near-white strip - unreadable. Scoping to the outer page header (a direct child of <main>,
   structurally distinct from the sidebar-nested one) keeps this rule for its original target only. */
html[data-pwa="staff"][data-theme="light"] main > .top-row {
    background-color: var(--settld-paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html, body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

::selection {
    background: var(--settld-teal);
    color: var(--settld-carbon);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    letter-spacing: -0.03em;
}

h1 {
    font-size: 1.7rem;
    line-height: 1.05;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.25rem;
    line-height: 1.1;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.display {
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.98;
}

.lede {
    max-width: 46rem;
    color: var(--phoenix-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.amount {
    font-weight: 500;
    letter-spacing: -0.03em;
    font-size: clamp(1.75rem, 3.5vw, 2.35rem);
    line-height: 1.05;
    margin-bottom: 0.75rem;
}

.amount__unit {
    color: var(--phoenix-muted);
    letter-spacing: 0.14em;
    vertical-align: 0.35em;
}

.step-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-bottom: 1.5rem;
}

.step-rail__step {
    color: var(--phoenix-muted);
    padding-bottom: 0.45rem;
    border-bottom: 2px solid transparent;
}

.step-rail__step--current {
    color: var(--bs-body-color);
    border-bottom-color: var(--settld-teal);
}

.mono {
    font-family: var(--bs-body-font-family);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 10.5px;
}

.mono-accent {
    color: var(--settld-teal-deep);
}

.mono-value {
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.detail-actions form {
    margin: 0;
}

.detail-actions__danger {
    color: var(--bs-danger-text-emphasis);
}

.detail-actions__danger:hover:not(:disabled) {
    color: var(--bs-danger-text-emphasis);
    border-color: var(--bs-danger-text-emphasis);
}

.detail-policy-note {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--phoenix-muted);
}

.detail-dispute-reason {
    display: block;
    font-size: 11.5px;
    color: var(--phoenix-muted);
    margin-top: 2px;
}

h2.section-label {
    color: var(--phoenix-label);
    margin-top: 2.75rem;
    margin-bottom: 1.1rem;
}

h2.section-label:first-child {
    margin-top: 0;
}

.pill {
    border-radius: 9999px;
}

.btn {
    --bs-btn-border-radius: 999px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-primary:hover:not(:disabled), .btn-success:hover:not(:disabled), .btn-danger:hover:not(:disabled) {
    transform: translateY(-2px);
}

.btn-quiet {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--phoenix-muted);
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
}

.btn-quiet:hover {
    background: var(--phoenix-hover);
    color: var(--bs-body-color);
}

.btn-quiet--danger {
    color: var(--bs-danger-text-emphasis);
}

.btn-quiet--danger:hover {
    color: var(--bs-danger-text-emphasis);
}

.btn-ghost {
    color: var(--bs-body-color);
    border: 1px solid var(--phoenix-faint);
}

.btn-ghost:hover:not(:disabled) {
    color: var(--bs-body-color);
    border-color: var(--bs-body-color);
    background-color: var(--phoenix-hover);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .btn, .console-link {
        transition: none;
    }

    .btn-primary:hover:not(:disabled), .btn-success:hover:not(:disabled),
    .btn-danger:hover:not(:disabled), .btn-ghost:hover:not(:disabled) {
        transform: none;
    }
}

.btn-primary {
    /* Style guide v1.1 §7: teal fill, white text, 600 weight, 14px, 11px/20px padding, hover
       #00B098. --bs-btn-color used to be var(--settld-carbon), which the light-theme override
       repurposes to mean "background" not "text" - that rendered every primary button's label as
       near-invisible pale-on-teal in light mode, same root cause as the other carbon-var bugs. */
    --bs-btn-color: var(--settld-white);
    --bs-btn-bg: var(--settld-teal);
    --bs-btn-border-color: var(--settld-teal);
    --bs-btn-hover-color: var(--settld-white);
    --bs-btn-hover-bg: var(--settld-teal-hover);
    --bs-btn-hover-border-color: var(--settld-teal-hover);
    --bs-btn-active-color: var(--settld-white);
    --bs-btn-active-bg: var(--settld-teal-hover);
    --bs-btn-active-border-color: var(--settld-teal-hover);
    --bs-btn-disabled-color: var(--settld-white);
    --bs-btn-disabled-bg: var(--settld-teal);
    --bs-btn-disabled-border-color: var(--settld-teal);
}

/* Sizing is scoped away from .btn-sm/.btn-lg - Bootstrap's size classes set the same custom
   properties at equal specificity, and this rule loads after bootstrap.css, so applying it
   unscoped silently overrode every small primary button (e.g. "resume setup", "download",
   row-action buttons) with the full-size guide dimensions. */
.btn-primary:not(.btn-sm):not(.btn-lg) {
    --bs-btn-padding-y: 11px;
    --bs-btn-padding-x: 20px;
    --bs-btn-font-size: 14px;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--settld-teal);
    --bs-btn-border-color: rgba(0, 194, 168, 0.5);
    --bs-btn-hover-color: var(--settld-carbon);
    --bs-btn-hover-bg: var(--settld-teal);
    --bs-btn-hover-border-color: var(--settld-teal);
    --bs-btn-active-color: var(--settld-carbon);
    --bs-btn-active-bg: var(--settld-teal);
    --bs-btn-active-border-color: var(--settld-teal);
}

.btn-success {
    --bs-btn-bg: #21a374;
    --bs-btn-border-color: #21a374;
    --bs-btn-hover-bg: #1b8760;
    --bs-btn-hover-border-color: #1b8760;
    --bs-btn-active-bg: #1b8760;
    --bs-btn-active-border-color: #1b8760;
    --bs-btn-disabled-bg: #21a374;
    --bs-btn-disabled-border-color: #21a374;
}

.btn-danger {
    --bs-btn-bg: #c13d32;
    --bs-btn-border-color: #c13d32;
    --bs-btn-hover-bg: #a3332a;
    --bs-btn-hover-border-color: #a3332a;
    --bs-btn-active-bg: #a3332a;
    --bs-btn-active-border-color: #a3332a;
    --bs-btn-disabled-bg: #c13d32;
    --bs-btn-disabled-border-color: #c13d32;
}

.btn-warning {
    --bs-btn-color: #2a1c04;
    --bs-btn-bg: #d9a63e;
    --bs-btn-border-color: #d9a63e;
    --bs-btn-hover-color: #2a1c04;
    --bs-btn-hover-bg: #c39432;
    --bs-btn-hover-border-color: #c39432;
    --bs-btn-active-color: #2a1c04;
    --bs-btn-active-bg: #c39432;
    --bs-btn-active-border-color: #c39432;
    --bs-btn-disabled-color: #2a1c04;
    --bs-btn-disabled-bg: #d9a63e;
    --bs-btn-disabled-border-color: #d9a63e;
}

.btn-info {
    --bs-btn-color: #0a1f33;
    --bs-btn-bg: #7fb0da;
    --bs-btn-border-color: #7fb0da;
    --bs-btn-hover-color: #0a1f33;
    --bs-btn-hover-bg: #6a9dc9;
    --bs-btn-hover-border-color: #6a9dc9;
    --bs-btn-active-color: #0a1f33;
    --bs-btn-active-bg: #6a9dc9;
    --bs-btn-active-border-color: #6a9dc9;
    --bs-btn-disabled-color: #0a1f33;
    --bs-btn-disabled-bg: #7fb0da;
    --bs-btn-disabled-border-color: #7fb0da;
}

.card {
    --bs-card-border-color: var(--phoenix-border);
    --bs-card-bg: var(--phoenix-surface);
    --bs-card-border-radius: var(--settld-radius-card);
    --bs-card-cap-bg: var(--phoenix-surface);
}

.card.border-success, .card.border-danger, .card.border-warning, .card.border-info {
    border-top-width: 3px;
}

.card-title {
    font-weight: 500;
    letter-spacing: -0.03em;
    font-size: 1.15rem;
    line-height: 1.15;
}

.card-title--sm {
    font-size: 1rem;
}

.card-title--figure {
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    line-height: 1.02;
}

.card-header {
    font-family: var(--bs-body-font-family);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--phoenix-label);
}

.form-label, legend {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--phoenix-label);
    margin-bottom: 5px;
}

.form-check-label {
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.console-link {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .console-link:hover {
        border-color: var(--bs-primary);
        box-shadow: 0 4px 14px rgba(0, 194, 168, 0.16);
        transform: translateY(-1px);
    }

    .console-link:hover .console-link__icon {
        background: var(--bs-primary);
        color: var(--settld-carbon);
    }

.console-link__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--phoenix-hover);
    color: var(--phoenix-accent);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.console-link--warning .console-link__icon {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.console-link--info .console-link__icon {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}

.console-link--success .console-link__icon {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.backoffice-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--bs-body-font-family);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--phoenix-muted);
    margin-top: 2rem;
    margin-bottom: 0.85rem;
}

.backoffice-section:first-of-type .backoffice-section__title {
    margin-top: 0;
}

.backoffice-section__title .icon {
    color: var(--phoenix-accent);
}

.money, .stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.stat-value {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Style Guide v1.1 money formatting rule 2 — see MoneyText.razor's MoneyTone parameter. */
.text-money-credit {
    color: var(--settld-pos-text);
}

.text-money-refund {
    color: var(--settld-neg-text);
}

/* Compact label/value grid used on detail pages in place of a full-width table for facts that
   don't need tabular alignment (transaction/merchant/instance summaries). */
.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem 1.75rem;
}

/* Give an id/reference-shaped value the full row width instead of wrapping inside an 11rem column -
   there's normally plenty of horizontal room on a detail page, the narrow column just never let a
   GUID use it. overflow-x is a defensive fallback for narrow viewports, not the expected case. */
.kv-grid .kv-full {
    grid-column: 1 / -1;
}

.kv-grid .kv-full dd {
    white-space: nowrap;
    overflow-x: auto;
}

/* Proportional stacked bar for the transaction breakdown tab - each segment's width is set inline
   via style="width:X%" per amount, color communicated through existing Bootstrap bg-* utilities. */
.breakdown-bar {
    display: flex;
    height: 0.65rem;
    border-radius: 0.35rem;
    overflow: hidden;
    background: var(--phoenix-hover);
}

.breakdown-bar__segment {
    height: 100%;
}

.kv-grid dt {
    font-family: var(--bs-body-font-family);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--phoenix-label);
    margin-bottom: 0.2rem;
}

.kv-grid dd {
    margin: 0;
    font-size: 0.95rem;
}

/* Vertical dot-and-line timeline for chronological entries (audit activity, event history). */
.timeline-item {
    display: flex;
    gap: 0.85rem;
}

.timeline-item__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

.timeline-item__dot {
    width: 0.6rem;
    height: 0.6rem;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--bs-primary);
    flex: 0 0 auto;
}

.timeline-item__line {
    width: 1px;
    flex: 1 1 auto;
    margin-top: 0.25rem;
    background: var(--phoenix-border);
}

.timeline-item__body {
    flex: 1 1 auto;
    padding-bottom: 1.1rem;
}

.timeline-item:last-child .timeline-item__body {
    padding-bottom: 0;
}

.table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--phoenix-border);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: var(--phoenix-scrim-1);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: var(--phoenix-scrim-2);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--phoenix-hover);
}

.table > :not(caption) > * > * {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.table > thead {
    --bs-table-color: var(--phoenix-muted);
}

.table > thead > tr {
    background-color: var(--bs-tertiary-bg);
}

.table > thead th {
    font-family: var(--bs-body-font-family);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--phoenix-label);
    border-bottom-width: 1px;
}

.table > tbody > tr:hover > * {
    background-color: var(--phoenix-hover);
}

.form-control, .form-select {
    --bs-border-color: var(--phoenix-scrim-3);
    border-radius: var(--settld-radius-inner);
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.4;
}

.form-control::placeholder {
    color: var(--phoenix-muted);
}

.form-text {
    font-size: 11px;
    color: var(--phoenix-muted);
    margin-top: 4px;
}

.input-group-text {
    font-size: 13px;
    padding: 9px 12px;
    border-radius: var(--settld-radius-inner);
}

/* WalletDoc Hosted Card Fields: the SDK sets a fixed inline height:60px on the iframe it mounts (its
   own input plus internal padding), which wins over any external height rule here since inline styles
   take precedence - matching the container's height to that (rather than Bootstrap's ~38px .form-control
   height) avoids clipping the field. */
.hosted-field {
    height: 60px;
    padding: 0;
    overflow: hidden;
}

.hosted-field iframe {
    width: 100%;
    border: 0;
}

/* WalletDoc Bank2Bank drop-in sizes itself: its mount() forces this container to min-height:auto
   (inline !important, confirmed live) and sets its own iframe width/min-height (450px) inline - no
   sizing rule needed here, this only keeps the container from collapsing before the widget mounts. */
.embedded-eft-widget {
    min-height: 1px;
}

.alert {
    --bs-alert-border-color: transparent;
    border-radius: 0.5rem;
}

.badge {
    font-weight: 600;
}

.text-bg-light {
    color: var(--bs-light-text-emphasis) !important;
    background-color: var(--bs-light-bg-subtle) !important;
}

.text-bg-dark {
    color: var(--bs-dark-text-emphasis) !important;
    background-color: var(--bs-dark-bg-subtle) !important;
}

.chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--bs-body-font-family);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.32em 0.7em;
    border-radius: var(--settld-radius-pill);
    border: 1px solid var(--phoenix-border);
    background: var(--phoenix-hover);
    color: var(--phoenix-label);
}

@media (pointer: coarse) {
    a.chip, button.chip {
        min-height: 2.5rem;
        padding-inline: 0.95em;
    }
}

.chip--accent {
    border-color: rgba(0, 194, 168, 0.45);
    color: var(--phoenix-accent-text);
}

.panel {
    border: 1px solid var(--phoenix-border);
    border-radius: var(--settld-radius-card);
    background: var(--phoenix-surface);
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
}

.ql-toolbar.ql-snow, .ql-container.ql-snow {
    border-color: var(--phoenix-border) !important;
}

.ql-toolbar.ql-snow {
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    background: var(--phoenix-hover);
}

.ql-container.ql-snow {
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    background: var(--bs-body-bg);
}

.ql-editor {
    color: var(--bs-body-color);
    min-height: 8rem;
}

.ql-editor.ql-blank::before {
    color: var(--phoenix-faint);
    font-style: normal;
}

.ql-snow .ql-stroke {
    stroke: var(--phoenix-label);
}

.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
    fill: var(--phoenix-label);
}

.ql-snow .ql-picker {
    color: var(--phoenix-label);
}

.ql-snow .ql-picker-options {
    background: var(--phoenix-surface);
    border-color: var(--phoenix-border) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--settld-teal);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--settld-teal);
}

.status-badge {
    font-family: var(--bs-body-font-family);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.38em 0.72em;
    vertical-align: middle;
}

.breadcrumb {
    --bs-breadcrumb-divider: "/";
    --bs-breadcrumb-divider-color: var(--phoenix-faint);
    --bs-breadcrumb-item-active-color: var(--phoenix-label);
    font-family: var(--bs-body-font-family);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.breadcrumb-item a {
    color: var(--phoenix-muted);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--bs-body-color);
}

code {
    font-family: var(--bs-font-monospace);
    color: var(--phoenix-code-color);
    background-color: var(--phoenix-code-bg);
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

/* Multi-line code samples (docs/guides) - the `code` rule above is tuned for short inline snippets
   (small pill background/padding) and looks broken stretched across a multi-line <pre>, so this is
   deliberately always dark-on-light-text like a terminal, independent of the page's own light/dark
   theme - the same convention most docs sites use for code blocks. */
.doc-code-block {
    position: relative;
    background: #1b1d22;
    color: #e8e8ec;
    border-radius: 0.5rem;
    overflow-x: auto;
}

.doc-code-block pre {
    margin: 0;
    padding: 2.5rem 1rem 1rem;
}

.doc-code-block code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.85em;
}

.doc-code-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #e8e8ec;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.doc-code-copy:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #e8e8ec;
}

.doc-code-copy--done {
    border-color: var(--settld-teal);
    color: var(--settld-teal);
}

/* A titled block (a filename, a language pill bar, or both) carries its copy button in a header row
   instead, so it doesn't need the absolute-positioning/padding trick the plain block uses to dodge
   an overlapping button. */
.doc-code-block--titled .doc-code-copy {
    position: static;
    flex: 0 0 auto;
}

.doc-code-block--titled pre {
    padding: 1rem;
}

.doc-code-block__bar,
.doc-code-tabs__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.doc-code-block__bar {
    justify-content: space-between;
    padding-bottom: 0.5rem;
}

.doc-code-block__name {
    font-size: 0.78rem;
    color: rgba(232, 232, 236, 0.62);
    white-space: nowrap;
}

/* The pill bar scrolls rather than wrapping: the server samples carry eight languages, which do not
   fit the centre column of the guide's three-column layout on one row. */
.doc-code-tabs__langs {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: thin;
}

.doc-code-tabs__langs::-webkit-scrollbar {
    height: 3px;
}

.doc-code-tabs__langs::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
}

.doc-code-tabs__lang {
    padding: 0.2rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(232, 232, 236, 0.62);
    white-space: nowrap;
    background: none;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
}

.doc-code-tabs__lang:hover {
    color: #e8e8ec;
    background-color: rgba(255, 255, 255, 0.08);
}

.doc-code-tabs__lang.active {
    color: var(--settld-teal-40);
    background-color: rgba(0, 194, 168, 0.16);
}

/* Syntax colours (CodeHighlighter). Literal values, not themed tokens: the code block is carbon in
   both the light and dark app themes, so these only ever sit on a dark ground. */
.doc-code-block .tok-k {
    color: #66DACA;
}

.doc-code-block .tok-s {
    color: #99E7DC;
}

.doc-code-block .tok-c {
    color: #8B8E8B;
}

.doc-code-block .tok-n {
    color: #F5C518;
}

.doc-code-block .tok-add {
    display: inline-block;
    width: 100%;
    color: #99E7DC;
    background-color: rgba(0, 194, 168, 0.12);
}

.doc-code-block .tok-del {
    display: inline-block;
    width: 100%;
    color: #F0B8B4;
    background-color: rgba(179, 38, 30, 0.18);
}

.doc-flow-diagram {
    width: 100%;
    max-width: 48rem;
    height: auto;
    display: block;
    margin: 1rem 0;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.18rem rgba(0, 194, 168, 0.28);
    border-color: var(--settld-teal);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --- Responsive: keep wide tables from blowing out the page on small screens --- */
@media (max-width: 767.98px) {
    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .display-6 {
        font-size: 1.6rem;
    }

    code {
        overflow-wrap: anywhere;
    }

    pre {
        overflow-x: auto;
    }
}

/* --- Collapsible tool/testing sections: keep pages data-first, tuck secondary forms away --- */
details.tool-section {
    border: 1px solid var(--phoenix-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--phoenix-surface);
}

details.tool-section > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    color: var(--bs-emphasis-color);
}

details.tool-section > summary::-webkit-details-marker {
    display: none;
}

details.tool-section > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--phoenix-muted);
    transition: transform 0.12s ease;
}

details.tool-section[open] > summary::before {
    transform: rotate(90deg);
}

details.tool-section[open] > summary {
    margin-bottom: 0.75rem;
}

/* Reject-reason disclosure: the "reject" trigger is a <summary> styled as a button so the reason
   field only appears once clicked, instead of always competing horizontally with accept/reject. */
.reveal-reject > summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
}

.reveal-reject > summary::-webkit-details-marker {
    display: none;
}

.table-sticky-head {
    max-height: 70vh;
    overflow-y: auto;
}

.table-sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bs-tertiary-bg);
}

.nav-install {
    display: none;
    margin-top: auto;
    padding: 0.75rem 1rem 1rem;
}

html.pwa-ready .nav-install,
html.pwa-ios .nav-install {
    display: block;
}

html.pwa-standalone .nav-install {
    display: none;
}

.nav-install__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--phoenix-accent);
    color: var(--settld-carbon);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.nav-install__btn:hover {
    filter: brightness(1.06);
}

.nav-install__hint {
    display: none;
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--phoenix-label);
}

html.pwa-ios:not(.pwa-ready) .nav-install__btn {
    background: transparent;
    border: 1px solid var(--phoenix-border);
    color: var(--phoenix-label);
}

html.pwa-hint .nav-install__hint {
    display: block;
}

html.pwa-ready .nav-install__hint {
    display: none;
}

.panel__label {
    color: var(--phoenix-label);
}

.create-task-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 9999px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--phoenix-border);
    border-radius: 9999px;
    background: transparent;
    color: var(--phoenix-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
    color: var(--bs-body-color);
    border-color: var(--bs-body-color);
    background-color: var(--phoenix-hover);
}

.theme-toggle__icon--moon {
    display: none;
}

html[data-theme="light"] .theme-toggle__icon--sun {
    display: none;
}

html[data-theme="light"] .theme-toggle__icon--moon {
    display: inline-flex;
}

.approval-live-region {
    position: fixed;
    top: 5rem;
    right: 1.25rem;
    z-index: 1080;
    display: grid;
    gap: 0.75rem;
    width: min(25rem, calc(100vw - 2rem));
}

.approval-live-alert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.75rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--phoenix-accent) 45%, transparent);
    border-radius: 0.75rem;
    background: var(--phoenix-surface);
    box-shadow: 0 1rem 2.5rem var(--phoenix-shadow);
}

.approval-live-alert strong,
.approval-live-alert span,
.approval-live-alert a {
    grid-column: 1;
}

.approval-live-alert button {
    grid-column: 2;
    grid-row: 1;
    border: 0;
    background: transparent;
    color: var(--phoenix-muted);
    font-size: 1.25rem;
    line-height: 1;
}

.approval-live-alert a {
    color: var(--phoenix-accent);
    font-weight: 600;
}

.media-preview {
    border: 1px solid var(--phoenix-border);
    border-radius: 0.5rem;
    margin-top: 0.6rem;
    max-height: 8rem;
    object-fit: cover;
}

/* The mocks' .micro group label - small, uppercase and tracked, for naming a group of rows INSIDE a
   card (e.g. "Our money" / "In motion" on the Treasury entity cards). Deliberately lighter than
   h2.section-label, which names a whole page section and carries large vertical margins. */
.micro-label {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--phoenix-label);
    margin: 14px 0 2px;
}

.micro-label:first-child {
    margin-top: 0;
}

.activity-day {
    color: var(--phoenix-label);
    margin: 14px 0 2px;
}

.activity-day:first-child {
    margin-top: 0;
}

.message-preview {
    border: 1px solid var(--phoenix-border);
    border-radius: var(--settld-radius-card);
    padding: 18px;
    background: var(--phoenix-surface-sunken, var(--phoenix-hover));
}

.message-preview__title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.message-preview__body {
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    margin-bottom: 12px;
}

.plain-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.price-grid__field {
    min-width: 0;
}

.price-grid__base {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--phoenix-accent-text);
    margin-left: 4px;
}

.editor-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.editor-actions__note {
    font-size: 11.5px;
    color: var(--phoenix-muted);
    margin-left: auto;
}

.field-required {
    color: var(--bs-danger-text-emphasis);
    font-weight: 600;
}

.editor-disclosure {
    border-top: 1px solid var(--phoenix-border);
    margin-top: 14px;
    padding-top: 12px;
}

.editor-disclosure > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--phoenix-label);
    list-style: none;
}

.editor-disclosure > summary::-webkit-details-marker {
    display: none;
}

.editor-disclosure > summary::before {
    content: "\203A";
    display: inline-block;
    margin-right: 7px;
    transition: transform 0.15s ease;
}

.editor-disclosure[open] > summary::before {
    transform: rotate(90deg);
}

.editor-disclosure__body {
    margin-top: 12px;
}

.bar-chart-bar {
    fill: var(--settld-teal);
}

.bar-chart-bar--mid {
    fill: var(--settld-teal-40);
}

.bar-chart-bar--faint {
    fill: var(--settld-teal-20);
}

.bar-chart-base {
    stroke: var(--phoenix-border);
    stroke-width: 1;
}

.bar-chart-label {
    font-size: 10.5px;
    fill: var(--phoenix-muted);
}

.bar-chart-value {
    font-size: 10px;
    font-weight: 600;
    fill: var(--bs-body-color);
    font-variant-numeric: tabular-nums lining-nums;
}

.row-detail {
    display: inline-block;
}

.row-detail > summary {
    cursor: pointer;
    list-style: none;
}

.row-detail > summary::-webkit-details-marker {
    display: none;
}

.row-detail__body {
    margin: 8px 0 0;
    padding: 10px 12px;
    max-width: 32rem;
    overflow-x: auto;
    background: var(--phoenix-scrim-1);
    border-radius: var(--settld-radius-inner);
    font-size: 11.5px;
    text-align: left;
    white-space: pre-wrap;
}

.opt-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opt-card {
    display: block;
    position: relative;
    border: 1px solid var(--phoenix-border);
    border-radius: 10px;
    padding: 14px 14px 14px 44px;
    background: var(--phoenix-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.opt-card:hover {
    border-color: var(--phoenix-accent);
}

.opt-card__input {
    position: absolute;
    left: 16px;
    top: 16px;
    margin: 0;
}

.opt-card:has(.opt-card__input:checked) {
    border-color: var(--phoenix-accent);
    box-shadow: inset 0 0 0 1px var(--phoenix-accent);
    background: var(--phoenix-accent-tint, var(--phoenix-hover));
}

.opt-card:has(.opt-card__input:focus-visible) {
    outline: 2px solid var(--phoenix-accent);
    outline-offset: 2px;
}

.opt-card__title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13.5px;
    font-weight: 600;
}

.opt-card__desc {
    display: block;
    font-size: 12px;
    color: var(--phoenix-muted);
    line-height: 1.5;
    margin-top: 3px;
}

.opt-card--danger .opt-card__desc {
    color: var(--bs-danger-text-emphasis);
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.field {
    flex: 1 1 240px;
    min-width: 0;
}

.field__help {
    font-size: 11px;
    color: var(--phoenix-muted);
    margin-top: 4px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.refund-quick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 4px;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
}

.filter-bar__check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    padding-bottom: 9px;
}

.filter-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-bottom: 1px;
}

.field--narrow {
    flex: 0 1 200px;
}