:root {
    --promio-emptiness: #fbfcfc;
    /* Page canvas: a step darker than card white (#fff) and bg-light so
       cards visibly separate from the page. #fbfcfc-on-#fff had ~zero
       contrast, which made cards look broken/floating. */
    --promio-canvas: #f2f5f8;
    --promio-chickweed: #dadfe4;
    --promio-icicles: #bcc4c9;
    --promio-paradise-sky: #25bf94;
    --promio-bleu-de-france: #348adc;
    --promio-rhapsody-in-blue: #072741;

    --promio-surface: var(--promio-emptiness);
    --promio-surface-subtle: color-mix(in srgb, var(--promio-emptiness) 72%, var(--promio-chickweed));
    --promio-surface-accent: color-mix(in srgb, var(--promio-paradise-sky) 14%, var(--promio-emptiness));
    --promio-border: var(--promio-chickweed);
    --promio-border-strong: var(--promio-icicles);
    --promio-text: var(--promio-rhapsody-in-blue);
    --promio-text-muted: color-mix(in srgb, var(--promio-rhapsody-in-blue) 58%, var(--promio-icicles));
    --promio-primary: var(--promio-bleu-de-france);
    --promio-primary-active: color-mix(in srgb, var(--promio-bleu-de-france) 82%, var(--promio-rhapsody-in-blue));
    --promio-primary-soft: color-mix(in srgb, var(--promio-bleu-de-france) 12%, var(--promio-emptiness));
    --promio-accent: var(--promio-paradise-sky);
    --promio-accent-active: color-mix(in srgb, var(--promio-paradise-sky) 70%, var(--promio-bleu-de-france));
    --promio-accent-soft: color-mix(in srgb, var(--promio-paradise-sky) 18%, var(--promio-emptiness));
    --promio-gradient: linear-gradient(135deg, var(--promio-bleu-de-france) 0%, var(--promio-paradise-sky) 100%);
    --promio-gradient-deep: linear-gradient(135deg, var(--promio-rhapsody-in-blue) 0%, var(--promio-bleu-de-france) 66%, var(--promio-paradise-sky) 100%);

    /* Structural tokens: use these instead of hardcoded values in templates. */
    --promio-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --promio-radius-sm: 0.375rem;
    --promio-radius-md: 0.625rem;
    --promio-radius-lg: 1rem;
    --promio-radius-pill: 999px;
    --promio-shadow-sm: 0 2px 8px color-mix(in srgb, var(--promio-rhapsody-in-blue) 5%, transparent);
    --promio-shadow-md: 0 14px 32px color-mix(in srgb, var(--promio-rhapsody-in-blue) 7%, transparent);
    --promio-shadow-lg: 0 24px 60px color-mix(in srgb, var(--promio-rhapsody-in-blue) 12%, transparent);
    --promio-focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--promio-primary) 18%, transparent);

    --bs-body-bg: var(--promio-canvas);
    --bs-body-color: var(--promio-text);
    --bs-body-color-rgb: 7, 39, 65;
    --bs-primary: var(--promio-primary);
    --bs-primary-rgb: 52, 138, 220;
    --bs-primary-active: var(--promio-primary-active);
    --bs-primary-light: var(--promio-primary-soft);
    --bs-text-primary: var(--promio-primary);
    --bs-info: var(--promio-accent);
    --bs-info-rgb: 101, 201, 212;
    --bs-info-active: var(--promio-accent-active);
    --bs-info-light: var(--promio-accent-soft);
    --bs-secondary: var(--promio-icicles);
    --bs-secondary-rgb: 188, 196, 201;
    --bs-secondary-active: var(--promio-chickweed);
    --bs-secondary-light: var(--promio-surface-subtle);
    --bs-light: var(--promio-canvas);
    --bs-light-rgb: 242, 245, 248;
    --bs-dark: var(--promio-rhapsody-in-blue);
    --bs-dark-rgb: 7, 39, 65;
    --bs-gray-100: var(--promio-emptiness);
    --bs-gray-200: var(--promio-chickweed);
    --bs-gray-300: var(--promio-icicles);
    --bs-gray-400: color-mix(in srgb, var(--promio-icicles) 76%, var(--promio-rhapsody-in-blue));
    --bs-gray-500: color-mix(in srgb, var(--promio-icicles) 58%, var(--promio-rhapsody-in-blue));
    --bs-gray-600: color-mix(in srgb, var(--promio-rhapsody-in-blue) 72%, var(--promio-icicles));
    --bs-gray-700: color-mix(in srgb, var(--promio-rhapsody-in-blue) 84%, var(--promio-icicles));
    --bs-gray-800: var(--promio-rhapsody-in-blue);
    --bs-gray-900: var(--promio-rhapsody-in-blue);
    --bs-text-muted: var(--promio-text-muted);
    --bs-border-color: var(--promio-border);
    --bs-border-dashed-color: var(--promio-border-strong);
    --bs-page-bg: var(--promio-canvas);
    --bs-app-blank-bg: var(--promio-canvas);
    --bs-card-bg: #ffffff;
    --bs-card-border-color: var(--promio-border);
    --bs-link-color: var(--promio-primary);
    --bs-link-hover-color: var(--promio-primary-active);
}

html {
    scrollbar-color: var(--promio-rhapsody-in-blue) var(--promio-chickweed);
}

html::-webkit-scrollbar-track {
    background: var(--promio-chickweed);
}

html::-webkit-scrollbar-thumb {
    background: var(--promio-rhapsody-in-blue);
}

body,
.app-default,
.app-blank,
.page,
.main,
.content,
.wrapper {
    /* background-color: var(--promio-canvas); */
    color: var(--promio-text);
}

a,
.link-primary,
.text-hover-primary:hover,
.menu-link.active,
.menu-link:hover,
.nav-link.active,
.nav-link:hover {
    color: var(--promio-primary) !important;
}

.text-primary {
    color: var(--promio-primary) !important;
}

.text-active-primary.active,
.text-active-primary:hover,
.text-gray-900,
.text-dark,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--promio-text) !important;
}

.text-muted,
.text-gray-500,
.text-gray-600,
.text-gray-700 {
    color: var(--promio-text-muted) !important;
}

.bg-primary,
.btn.btn-primary,
.symbol-label.bg-primary,
.header {
    background: var(--promio-gradient) !important;
}

.btn.btn-primary {
    border-color: var(--promio-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--promio-primary) 24%, transparent);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.show > .btn.btn-primary {
    background: var(--promio-primary-active) !important;
    border-color: var(--promio-primary-active) !important;
}

.btn.btn-light-primary,
.badge-light-primary,
.bg-light-primary,
.alert-primary {
    background-color: var(--promio-primary-soft) !important;
    color: var(--promio-primary) !important;
    border-color: color-mix(in srgb, var(--promio-primary) 28%, var(--promio-emptiness)) !important;
}

/* Hover/focus must read as visibly different from the resting state: a
   darker tint plus a darker text shade, not the exact same two values
   (that was the bug — hovering appeared to do nothing because both the
   background and the text color were identical to the resting state). */
.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn.btn-light-primary:active,
.btn.btn-light-primary.active,
.btn.btn-active-light-primary:hover,
.btn.btn-active-light-primary:focus,
.btn.btn-active-light-primary:active,
.btn.btn-active-light-primary.active {
    background-color: color-mix(in srgb, var(--promio-primary) 20%, var(--promio-emptiness)) !important;
    border-color: var(--promio-primary) !important;
    color: var(--promio-primary-active) !important;
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--promio-primary) 14%, transparent) !important;
}

.btn.btn-light-primary.active:hover,
.btn.btn-active-light-primary.active:hover {
    background-color: color-mix(in srgb, var(--promio-primary) 28%, var(--promio-emptiness)) !important;
    color: var(--promio-primary-active) !important;
}

.btn.btn-light-info,
.badge-light-info,
.bg-light-info,
.alert-info {
    background-color: var(--promio-accent-soft) !important;
    color: var(--promio-accent-active) !important;
    border-color: color-mix(in srgb, var(--promio-accent) 34%, var(--promio-emptiness)) !important;
}

.btn.btn-secondary,
.bg-secondary,
.badge-light-secondary {
    background-color: var(--promio-surface-subtle) !important;
    border-color: var(--promio-border) !important;
    color: var(--promio-text) !important;
}

.card,
.card-flush,
.modal-content,
.dropdown-menu,
.menu-sub-dropdown,
.offcanvas,
.drawer {
    background-color: #ffffff;
    border-color: var(--promio-border) !important;
    box-shadow: 0 10px 30px 0 color-mix(in srgb, var(--promio-rhapsody-in-blue) 5%, transparent);
}

.card.card-flush {
    overflow: hidden !important;
}

.table-responsive {
    background-color: #ffffff;
    border-color: var(--promio-border) !important;
    box-shadow: none !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.table thead th,
.separator,
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--promio-border) !important;
}

.card-body,
.card-header,
.card-footer {
    box-shadow: none !important;
    background-color: transparent !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1060 !important;
}

.table,
.table tbody,
.table tr,
.table td,
.table th {
    color: var(--promio-text);
    border-color: var(--promio-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--promio-surface-subtle);
}

.form-control,
.form-select,
.form-check-input,
.input-group-text,
.select2-container--bootstrap5 .select2-selection {
    background-color: #ffffff;
    border-color: var(--promio-border) !important;
    color: var(--promio-text);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.select2-container--bootstrap5.select2-container--focus .select2-selection,
.select2-container--bootstrap5.select2-container--open .select2-selection {
    border-color: var(--promio-primary) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--promio-primary) 18%, transparent) !important;
}

.form-check-input:checked {
    background-color: var(--promio-primary);
    border-color: var(--promio-primary) !important;
}



.menu-link.active,
.menu-link:hover,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.page-item.active .page-link {
    background-color: var(--promio-primary-soft) !important;
    border-color: color-mix(in srgb, var(--promio-primary) 26%, var(--promio-emptiness)) !important;
}

.page-link {
    color: var(--promio-primary);
    border-color: var(--promio-border);
}

.page-link:hover {
    background-color: var(--promio-primary-soft);
    border-color: var(--promio-primary);
    color: var(--promio-primary-active);
}




#kt_aside,
.aside,
.app-sidebar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-right: 1px solid var(--promio-border) !important;
}

#kt_aside .aside-logo,
#kt_aside .aside-menu,
#kt_aside_menu,
#kt_aside_menu_wrapper {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

#kt_aside .menu-link,
#kt_aside .menu-title {
    color: var(--promio-text) !important;
}

#kt_aside .menu-link.active,
#kt_aside .menu-link:hover {
    background-color: var(--promio-primary-soft) !important;
    color: var(--promio-primary) !important;
}

#kt_aside .menu-link.active .menu-title,
#kt_aside .menu-link:hover .menu-title {
    color: var(--promio-primary) !important;
}

#kt_aside .menu-icon,
#kt_aside .menu-icon i,
#kt_aside .menu-link.active .menu-icon,
#kt_aside .menu-link.active .menu-icon i,
#kt_aside .menu-link:hover .menu-icon,
#kt_aside .menu-link:hover .menu-icon i {
    color: var(--bs-aside-menu-icon-icon-color, #99A1B7) !important;
}

.promio-gradient,
.promio-gradient-text,
.bg-gradient-primary {
    background: var(--promio-gradient) !important;
}

.promio-gradient-text {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.promio-soft-bg,
.bg-light,
.bg-gray-100,
.bg-gray-200 {
    background-color: var(--promio-surface) !important;
}

.badge.badge-light,
.badge-light {
    background-color: var(--promio-surface-subtle) !important;
    color: var(--promio-text-muted) !important;
}

.progress {
    background-color: var(--promio-chickweed);
}

.progress-bar {
    background: var(--promio-gradient);
}

.btn-check:checked + .btn.btn-light-primary,
.btn-check:active + .btn.btn-light-primary,
.btn.btn-light-primary.active,
.btn.btn-light-primary.show,
.btn.btn-light-primary:active,
.show > .btn.btn-light-primary,
.btn-check:checked + .btn.btn-active-light-primary,
.btn-check:active + .btn.btn-active-light-primary,
.btn.btn-active-light-primary.active,
.btn.btn-active-light-primary.show,
.btn.btn-active-light-primary:active,
.show > .btn.btn-active-light-primary {
    background-color: var(--promio-primary-soft) !important;
    border-color: color-mix(in srgb, var(--promio-primary) 38%, var(--promio-emptiness)) !important;
    color: var(--promio-primary-active) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--promio-primary) 18%, transparent), 0 0 0 0.18rem color-mix(in srgb, var(--promio-primary) 12%, transparent) !important;
}

.btn-check:checked + .btn.btn-light-primary *,
.btn-check:active + .btn.btn-light-primary *,
.btn.btn-light-primary.active *,
.btn.btn-light-primary.show *,
.btn.btn-light-primary:active *,
.show > .btn.btn-light-primary *,
.btn-check:checked + .btn.btn-active-light-primary *,
.btn-check:active + .btn.btn-active-light-primary *,
.btn.btn-active-light-primary.active *,
.btn.btn-active-light-primary.show *,
.btn.btn-active-light-primary:active *,
.show > .btn.btn-active-light-primary * {
    color: var(--promio-primary-active) !important;
}

.btn.btn-active-primary.active,
.btn.btn-active-primary.show,
.btn.btn-active-primary:active,
.nav-link.btn-active-primary.active,
.nav-link.btn-active-primary.show,
.nav-link.btn-active-primary:active,
.btn-check:checked + .btn.btn-active-primary,
.btn-check:active + .btn.btn-active-primary {
    background-color: var(--promio-primary-active) !important;
    border-color: var(--promio-primary-active) !important;
    color: #ffffff !important;
}

.btn.btn-active-primary.active *,
.btn.btn-active-primary.show *,
.btn.btn-active-primary:active *,
.nav-link.btn-active-primary.active *,
.nav-link.btn-active-primary.show *,
.nav-link.btn-active-primary:active *,
.btn-check:checked + .btn.btn-active-primary *,
.btn-check:active + .btn.btn-active-primary * {
    color: #ffffff !important;
}

/* --- App side navigation (company/affiliate shells) ---------------------- */

.promio-side-nav {
    width: 100%;
}

.promio-side-nav .menu-item {
    margin-bottom: 2px;
}


.promio-side-nav .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    border-radius: var(--promio-radius-md);
    color: var(--promio-text-muted) !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.promio-side-nav .menu-link:hover {
    background-color: var(--promio-surface-subtle) !important;
    color: var(--promio-text) !important;
}

.promio-side-nav .menu-link.active {
    background-color: var(--promio-primary-soft) !important;
    color: var(--promio-primary) !important;
}

.promio-side-nav .menu-link .menu-icon {
    width: 20px;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit !important;
}

.promio-side-nav .menu-link .menu-icon i {
    color: inherit !important;
}

.promio-side-nav .menu-title {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.promio-nav-section {
    padding: 18px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--promio-text-muted);
}

.promio-nav-section:first-child {
    padding-top: 4px;
}

.promio-side-nav .promio-nav-dot {
    width: 20px;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.promio-side-nav .promio-nav-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--promio-border-strong);
    transition: background-color .15s ease;
}

.promio-side-nav .menu-link.active .promio-nav-dot::before,
.promio-side-nav .menu-link:hover .promio-nav-dot::before {
    background: var(--promio-primary);
}

/* --- Program workspace tabs ----------------------------------------------- */
/* Every tab inside the program workspace shares one measure. Without it the
   panes inherit the container-fluid width and sprawl to 2000px+ on a wide
   display, which is what made the settings tab look unfinished. */

.promio-tab {
    /* Left-aligned and uncapped: the sidebar sets the left edge and the rail sets
       the right one, so the work column simply takes what is left. Capping it
       only reintroduced a dead gutter down the right-hand side. Prose inside
       still has its own measure (.promio-tab-head p, .promio-field .form-text). */
    width: 100%;
}

/* position: sticky does nothing inside an overflow:hidden ancestor, and
   .card.card-flush sets exactly that (to clip its own rounded corners). The
   program workspace card is the one that holds the sticky rails, so it opts
   out — without this the rail scrolls away with the page. */
.card.card-flush.program-tabs {
    overflow: visible !important;
}

.promio-tab-head {
    margin-bottom: 26px;
}

.promio-tab-head h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--promio-text);
    margin: 0 0 6px;
}

.promio-tab-head p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--promio-text-muted);
    max-width: 72ch;
    margin: 0;
}

/* Two-column tab: work on the left, standing context on the right. Anything
   that reports state rather than accepting input — status panels, the launch
   checklist, the live offer summary, the save block — belongs in the rail, so
   the main column stays a single uninterrupted column of work. */

.promio-tab-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}

.promio-tab-main {
    min-width: 0;
}

.promio-tab-rail {
    position: sticky;
    top: 88px;  /* clears .company-desktop-header (sticky, min-height 72px) */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.promio-rail-card {
    border: 1px solid var(--promio-border);
    border-radius: var(--promio-radius-lg);
    background: #ffffff;
    padding: 18px 20px;
}

.promio-rail-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--promio-text-muted);
    margin-bottom: 10px;
}

@media (max-width: 1199.98px) {
    .promio-tab-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .promio-tab-rail {
        position: static;
        order: -1;
    }
}

/* Status panel, rail form. The wide two-column variant it used to have only
   worked across a full-width pane. */
.promio-rail-card.tab-status-panel {
    padding: 16px 18px;
}

.promio-tab-rail .tab-status-panel .tab-status-next {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--promio-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--promio-text-muted);
    text-align: left;
}

.promio-tab-rail .tab-status-panel .badge {
    margin-bottom: 8px;
}

/* --- Program form fields -------------------------------------------------- */
/* Shared by the creation wizard and the program settings tab, both of which
   render through the macros in templates/_program_form.html. A field is a label,
   a control, and help text separated by whitespace — deliberately NOT a card.
   Wrapping every single input in its own bordered box makes each field look like
   its own section and destroys the grouping the sections already provide. */

.promio-field {
    margin-bottom: 28px;
}

.promio-field:last-child {
    margin-bottom: 0;
}

.promio-field > label,
.promio-field-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--promio-text);
    margin-bottom: 8px;
}

.promio-field .form-text {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 62ch;
}

/* Size the control to what it holds. A <select> containing "USD" must not be
   800px wide just because its column is. */
.promio-w-full { width: 100%; }
.promio-w-money { max-width: 200px; }
.promio-w-days { max-width: 230px; }
.promio-w-select { max-width: 200px; }

/* A field revealed by a choice belongs visually inside that choice. */
.promio-dependent {
    margin-top: 18px;
    margin-left: 2px;
    padding-left: 18px;
    border-left: 2px solid var(--promio-primary-soft);
}

.promio-dependent .promio-field {
    margin-bottom: 0;
}

/* Disclosure for settings that sit at a safe default for most programs. Render
   it `open` when the stored value is non-default, so nothing actually in use is
   hidden behind a click. */
.promio-advanced {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed var(--promio-border);
}

.promio-advanced > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--promio-text-muted);
    list-style: none;
}

.promio-advanced > summary::-webkit-details-marker { display: none; }

.promio-advanced > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}

.promio-advanced[open] > summary::before { transform: rotate(90deg); }
.promio-advanced > summary:hover { color: var(--promio-primary); }
.promio-advanced-body { padding-top: 22px; }

/* --- Selectable choice cards --------------------------------------------- */
/* One component for every "pick one of these" question, used by the program
   creation wizard and the program settings tab (see docs/DESIGN_SYSTEM.md ->
   "Editing patterns"). Always a real <input type="radio" class="btn-check">
   followed by its <label class="promio-choice-card">: that gives native arrow-key
   navigation within the group and correct radiogroup semantics for free, which a
   grid of <button>s writing to a hidden <select> does not. Render it through the
   `choice_cards` macro in templates/_program_form.html rather than by hand. */

.promio-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.promio-choice-grid[data-columns="1"] {
    grid-template-columns: 1fr;
}

.promio-choice-grid[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 575.98px) {
    .promio-choice-grid,
    .promio-choice-grid[data-columns="2"] {
        grid-template-columns: 1fr;
    }
}

.promio-choice-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    margin: 0;
    padding: 14px 44px 14px 16px;
    border: 1px solid var(--promio-border);
    border-radius: var(--promio-radius-md);
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.promio-choice-card:hover {
    border-color: color-mix(in srgb, var(--promio-primary) 50%, transparent);
}

.btn-check:checked + .promio-choice-card {
    border-color: var(--promio-primary);
    background: var(--promio-primary-soft);
}

/* btn-check is visually hidden, so the ring has to be drawn on the label. */
.btn-check:focus-visible + .promio-choice-card {
    outline: none;
    box-shadow: var(--promio-focus-ring);
}

.promio-choice-card::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--promio-border-strong);
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
    transition: border-color .15s ease, background-color .15s ease;
}

.btn-check:checked + .promio-choice-card::after {
    border-color: var(--promio-primary);
    background-color: var(--promio-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M2.4 6.7l2.7 2.7 5.5-5.8' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.promio-choice-icon {
    flex: 0 0 auto;
    font-size: 1.6rem !important;
    line-height: 1.2;
    color: var(--promio-primary);
}

.promio-choice-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--promio-text);
    margin-bottom: 2px;
}

.promio-choice-sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--promio-text-muted);
    line-height: 1.45;
}

/* --- Accessibility ------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
    box-shadow: var(--promio-focus-ring) !important;
}

/* --- Shared page shells -------------------------------------------------- */

.promio-hero-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    background:
        radial-gradient(1100px 500px at 85% -10%, var(--promio-accent-soft) 0%, transparent 60%),
        radial-gradient(900px 480px at -10% 110%, var(--promio-primary-soft) 0%, transparent 55%),
        var(--promio-emptiness);
}

.promio-hero-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border: 1px solid var(--promio-border);
    border-radius: var(--promio-radius-lg);
    box-shadow: var(--promio-shadow-lg);
    padding: 3rem 2.5rem;
    text-align: center;
}

.promio-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    border-radius: var(--promio-radius-pill);
    background: var(--promio-primary-soft);
    color: var(--promio-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.promio-pill .promio-pill-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--promio-gradient);
}

/* --- Stat / KPI cards ----------------------------------------------------- */

.promio-stat-card {
    position: relative;
    height: 100%;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid var(--promio-border);
    border-radius: var(--promio-radius-lg);
    box-shadow: var(--promio-shadow-sm);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.promio-stat-card:hover {
    box-shadow: var(--promio-shadow-md);
    transform: translateY(-1px);
}

.promio-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--promio-primary);
}

.promio-stat-card[data-tone="accent"]::before { background: var(--promio-accent); }
.promio-stat-card[data-tone="success"]::before { background: var(--bs-success); }
.promio-stat-card[data-tone="warning"]::before { background: var(--bs-warning); }
.promio-stat-card[data-tone="danger"]::before { background: var(--bs-danger); }
.promio-stat-card[data-tone="gradient"]::before { background: var(--promio-gradient); }

.promio-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--promio-text-muted);
}

.promio-stat-value {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--promio-text);
    margin: 10px 0 4px;
}

.promio-stat-sub {
    font-size: 12.5px;
    color: var(--promio-text-muted);
}

/* --- Callout (inline info panel, calmer than an alert) -------------------- */

.promio-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    background: var(--promio-primary-soft);
    border: 1px solid color-mix(in srgb, var(--promio-primary) 25%, #ffffff);
    border-left: 4px solid var(--promio-primary);
    border-radius: var(--promio-radius-md);
}

.promio-callout .promio-callout-title {
    font-weight: 700;
    color: var(--promio-text);
    margin-bottom: 2px;
}

.promio-callout .promio-callout-text {
    font-size: 13px;
    color: var(--promio-text-muted);
    margin: 0;
}

/* Standing explanation folded into an action callout, so the page shows one
   panel instead of two stacked ones saying the same thing. Hairline rather
   than a second box: it is background, not a second prompt. */
.promio-callout .promio-callout-note {
    font-size: 12px;
    color: var(--promio-text-muted);
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--promio-primary) 20%, transparent);
}

.promio-callout .promio-callout-note strong {
    color: var(--promio-text);
    font-weight: 600;
}

/* --- Table header convention ---------------------------------------------- */

.promio-table-head th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--promio-text-muted) !important;
}