/* ============================================================================
   Appearance widget — topbar theme/mode picker (pairs with js/appearance.js).
   Also hides Cuba's built-in customizer panel (grip/cog floating buttons + slide-outs);
   we drive the exact same mechanism from our own clean dropdown instead.
   ============================================================================ */

/* Hide Cuba's injected customizer chrome (we keep customizer.js only for its on-load sync). */
.sidebar-panel-main,
.setting-sidebar,
.layout-sidebar { display: none !important; }

/* ---- Topbar trigger button ---------------------------------------------- */
#pageWrapper .nav-right #spq-appearance-btn {
    display: inline-grid; place-items: center;
    width: 12px; height: 38px; border-radius: 10px;
    cursor: pointer; color: var(--tc-text, #46536b); border: 0; background: transparent;
}
#pageWrapper .nav-right #spq-appearance-btn:hover { background: #eef2f8; color: var(--tc-strong, #1f2b45); }
#pageWrapper .nav-right #spq-appearance-btn i { font-size: 15px; }
body.dark-only #pageWrapper .nav-right #spq-appearance-btn { color: var(--tcd-text, #c9d3e6); }
body.dark-only #pageWrapper .nav-right #spq-appearance-btn:hover { background: rgba(255,255,255,.08); color: var(--tcd-strong, #fff); }

/* ---- Popover ------------------------------------------------------------- */
.spq-appearance-pop {
    position: fixed; z-index: 3000;
    width: 268px; padding: 14px;
    background: #ffffff; color: var(--tc-strong, #1f2b45);
    border: 1px solid #e7ecf3; border-radius: 14px;
    box-shadow: 0 18px 44px rgba(16, 28, 61, .18);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.spq-appearance-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* Switching light/dark saves then reloads — freeze the popover for that beat. */
.spq-appearance-pop.is-busy { pointer-events: none; opacity: .6; cursor: progress; }

.spq-appearance-title {
    font-size: .68rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); letter-spacing: .04em; text-transform: uppercase;
    color: var(--tc-muted, #8291ac); margin: 2px 2px 8px;
}
.spq-appearance-title:not(:first-child) { margin-top: 14px; }

.spq-appearance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.spq-appearance-swatch {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #e7ecf3; background: #f7f9fc; color: var(--tc-text, #33415c);
    font-size: .78rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); text-align: left;
    transition: border-color .12s ease, background .12s ease;
}
.spq-appearance-swatch:hover { background: #eef2f8; }
.spq-appearance-swatch.is-active { border-color: var(--sw); background: #fff; }
.spq-appearance-dot {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    background: var(--sw); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sw);
}
.spq-appearance-swatch.is-active .spq-appearance-dot::after {
    content: "\2713"; color: #fff; font-size: 10px; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
    display: grid; place-items: center; width: 100%; height: 100%;
}
.spq-appearance-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.spq-appearance-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spq-appearance-mode {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #e7ecf3; background: #f7f9fc; color: var(--tc-text, #33415c);
    font-size: .78rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    transition: border-color .12s ease, background .12s ease;
}
.spq-appearance-mode:hover { background: #eef2f8; }
.spq-appearance-mode.is-active { border-color: var(--theme-default, #7366ff); background: #fff; color: var(--theme-text, var(--theme-default, #7366ff)); }

/* Dark-mode popover surface */
body.dark-only .spq-appearance-pop { background: var(--sf-card, #14213f); color: var(--tcd-strong, #e6ecf7); border-color: var(--bd, #26365c); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
body.dark-only .spq-appearance-title { color: #8ea0c4; }
body.dark-only .spq-appearance-swatch,
body.dark-only .spq-appearance-mode { background: var(--sf-raised, #1c2c50); border-color: var(--bd, #2b3d66); color: var(--tcd-strong, #d4ddef); }
body.dark-only .spq-appearance-swatch:hover,
body.dark-only .spq-appearance-mode:hover { background: var(--sf-raised, #223b66); }
body.dark-only .spq-appearance-swatch.is-active { background: var(--sf-card, #14213f); }
body.dark-only .spq-appearance-dot { box-shadow: 0 0 0 2px #14213f, 0 0 0 3px var(--sw); }

/* ---- "Other themes…" link inside the compact popover -------------------- */
.spq-appearance-more { margin-top: 10px; }
.spq-appearance-morelink {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
    border: 1px dashed #cfd6e4; background: transparent; color: var(--theme-text, var(--theme-default, #7366ff));
    font-size: .78rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); letter-spacing: .01em;
    transition: background .12s ease, border-color .12s ease;
}
.spq-appearance-morelink:hover { background: #f5f7fc; border-color: var(--theme-default, #7366ff); }
body.dark-only .spq-appearance-morelink { border-color: var(--bd, #3a4d78); color: var(--tcd-strong, #d4ddef); }
body.dark-only .spq-appearance-morelink:hover { background: var(--sf-raised, #1c2c50); }

/* ============================================================================
   Bigger "Other themes" dialog (opened via the Other themes… link).
   Custom / vanilla CSS only — no third-party framework, no image files.
   ============================================================================ */
.spq-atd-backdrop {
    position: fixed; inset: 0; z-index: 3100;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
}
.spq-atd-backdrop.is-open { opacity: 1; visibility: visible; }
.spq-atd-backdrop.is-busy { pointer-events: none; opacity: .8; cursor: progress; }

.spq-atd {
    width: min(820px, 100%); max-height: min(720px, 92vh);
    display: flex; flex-direction: column;
    background: #ffffff; color: var(--tc-strong, #1f2b45);
    border: 1px solid #e7ecf3; border-radius: 14px;
    box-shadow: 0 30px 80px rgba(16, 28, 61, .28);
    overflow: hidden;
    transform: translateY(6px) scale(.985);
    transition: transform .16s ease;
}
.spq-atd-backdrop.is-open .spq-atd { transform: none; }

.spq-atd-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #eef2f8;
}
.spq-atd-title { font-size: 1.02rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); letter-spacing: .01em; }
.spq-atd-sub { margin-top: 4px; font-size: .78rem; color: var(--tc-muted, #61708c); line-height: 1.4; max-width: 620px; }
.spq-atd-close {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
    background: transparent; border: 0; color: var(--tc-muted, #61708c); cursor: pointer;
    font-size: 20px; line-height: 1; padding: 0;
}
.spq-atd-close:hover { background: #eef2f8; color: var(--tc-strong, #1f2b45); }

.spq-atd-scroll { padding: 14px 18px 8px; overflow-y: auto; }
.spq-atd-section + .spq-atd-section { margin-top: 18px; }
.spq-atd-secttl {
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); text-transform: uppercase; letter-spacing: .05em;
    color: var(--tc-muted, #61708c); margin: 4px 2px 10px;
}
.spq-atd-secttl i { color: var(--tc-muted, #8291ac); }
.spq-atd-count { margin-left: auto; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); color: var(--tc-faint, #94a3b8); text-transform: none; letter-spacing: 0; font-size: .72rem; }
/* Tile grid — tightened ~30% (2026-09-05, command 364) so many more tiles fit per row.
   Previous values kept in comments for quick revert:
     grid: minmax(128px, 1fr); tile pad 6/8; preview h46 strip h14 body pad 5/7 rows h4;
     name .74rem / desc .64rem; check top/right 10 / size 17. */
.spq-atd-grid {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.spq-atd-tile {
    position: relative; display: flex; flex-direction: column;
    padding: 4px 4px 6px; border-radius: 8px; cursor: pointer;
    border: 1.2px solid #e7ecf3; background: #fbfcfe; color: var(--tc-strong, #1f2b45);
    text-align: left;
    transition: border-color .12s ease, background .12s ease, transform .1s ease;
    overflow: hidden;
}
.spq-atd-tile:hover { border-color: #b9c3d9; background: #f5f8fd; }
.spq-atd-tile:active { transform: translateY(1px); }
.spq-atd-tile.is-active { border-color: var(--theme-default, #7366ff); background: #ffffff; box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.1); }

.spq-atd-preview {
    display: block; border-radius: 5px; overflow: hidden;
    height: 32px; border: 1px solid #e7ecf3; margin-bottom: 4px;
}
.spq-atd-strip { display: block; height: 10px; }
.spq-atd-body { display: block; padding: 3px 5px 0; }
.spq-atd-row {
    display: block; height: 3px; border-radius: 2px; margin-bottom: 3px; width: 100%;
}

.spq-atd-meta { display: flex; flex-direction: column; padding: 0 2px; }
.spq-atd-name { font-size: .68rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); line-height: 1.2; }
.spq-atd-desc { margin-top: 1px; font-size: .58rem; color: var(--tc-muted, #6f7d99); line-height: 1.25; }

.spq-atd-check {
    position: absolute; top: 7px; right: 7px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--theme-default, #7366ff); color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 8px; font-weight: clamp(1, calc(800 + var(--spq-fw-delta, 0)), 1000);
    box-shadow: 0 0 0 2px #fff;
}
.spq-atd-tile.is-active .spq-atd-check { display: inline-flex; }

/* Dark-preview tiles get a darker frame so their preview reads correctly on the white sheet. */
.spq-atd-tile.is-dark-tile { border-color: var(--bd, #26365c); background: #f4f6fa; }
.spq-atd-tile.is-dark-tile .spq-atd-preview { border-color: var(--bd, #1f2b45); }
.spq-atd-tile.is-dark-tile .spq-atd-name { color: #14213f; }

.spq-atd-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px 14px; border-top: 1px solid #eef2f8; background: #fafbfd;
}
.spq-atd-follow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .82rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); color: var(--tc-text, #33415c); cursor: pointer; user-select: none;
}
.spq-atd-follow input { width: 16px; height: 16px; accent-color: var(--theme-default, #7366ff); cursor: pointer; }
.spq-atd-done {
    padding: 8px 20px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--theme-default, #7366ff); background: var(--theme-default, #7366ff); color: #fff;
    font-size: .82rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); letter-spacing: .01em;
    transition: filter .12s ease;
}
.spq-atd-done:hover { filter: brightness(1.08); }

/* Dark mode — recolour the sheet, not the preview tiles (which already show their own colours) */
body.dark-only .spq-atd { background: var(--sf-card, #14213f); color: var(--tcd-strong, #e6ecf7); border-color: var(--bd, #26365c); }
body.dark-only .spq-atd-head { border-bottom-color: var(--bd, #26365c); }
body.dark-only .spq-atd-sub { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-atd-close { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-atd-close:hover { background: var(--sf-raised, #1c2c50); color: var(--tcd-strong, #fff); }
body.dark-only .spq-atd-secttl { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-atd-secttl i { color: var(--tcd-faint, #6b7d9d); }
body.dark-only .spq-atd-count { color: var(--tcd-muted, #7a8ba8); }
body.dark-only .spq-atd-tile { background: var(--sf-raised, #1c2c50); border-color: var(--bd, #2b3d66); color: var(--tcd-strong, #e6ecf7); }
body.dark-only .spq-atd-tile:hover { background: var(--sf-raised, #223b66); border-color: #4b6394; }
body.dark-only .spq-atd-tile.is-active { background: var(--sf-card, #14213f); }
body.dark-only .spq-atd-tile .spq-atd-desc,
body.dark-only .spq-atd-tile.is-dark-tile .spq-atd-desc { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-atd-tile.is-dark-tile .spq-atd-name { color: var(--tcd-strong, #e6ecf7); }
body.dark-only .spq-atd-tile.is-dark-tile { background: var(--sf-raised, #1c2c50); }
body.dark-only .spq-atd-preview { border-color: var(--bd, #26365c); }
body.dark-only .spq-atd-foot { background: var(--sf-card, #101a37); border-top-color: var(--bd, #26365c); }
body.dark-only .spq-atd-follow { color: var(--tcd-strong, #d4ddef); }

/* ============================================================================
   Tabs inside the Other themes dialog (Themes / Buttons) — 2026-09-05 (cmd 364).
   ============================================================================ */
.spq-atd-tabs {
    display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid #eef2f8;
    background: #fafbfd;
}
.spq-atd-tab {
    padding: 10px 16px; border: 0; background: transparent; cursor: pointer;
    font-size: .82rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); color: var(--tc-muted, #61708c);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .12s ease, border-color .12s ease;
}
.spq-atd-tab:hover { color: var(--tc-text, #33415c); }
.spq-atd-tab.is-active { color: var(--theme-text, var(--theme-default, #7366ff)); border-bottom-color: var(--theme-default, #7366ff); }
.spq-atd-tabpanel { display: none; }
.spq-atd-tabpanel.is-active { display: block; }
body.dark-only .spq-atd-tabs { background: var(--sf-card, #101a37); border-bottom-color: var(--bd, #26365c); }
body.dark-only .spq-atd-tab { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-atd-tab:hover { color: var(--tcd-strong, #d4ddef); }

/* Button-tab options (six style tiles + bold toggle) ------------------------ */
.spq-btnopts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.spq-btnopt {
    position: relative; display: flex; flex-direction: column; gap: 8px;
    padding: 12px 12px 10px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #e7ecf3; background: #fbfcfe; color: var(--tc-strong, #1f2b45); text-align: left;
    transition: border-color .12s ease, background .12s ease;
}
.spq-btnopt:hover { border-color: #b9c3d9; background: #f5f8fd; }
.spq-btnopt.is-active { border-color: var(--theme-default, #7366ff); background: #fff; box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.1); }
.spq-btnopt-title { font-size: .82rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); }
.spq-btnopt-desc { font-size: .7rem; color: var(--tc-muted, #6f7d99); line-height: 1.35; }
.spq-btnopt-preview { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; border-radius: 6px; background: #f4f6fb; }
.spq-btnopt-preview .spq-fake-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 6px; font-size: .74rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    border: 1.5px solid #d0d5df; background: #fff; color: var(--tc-text, #33415c);
}
.spq-btnopt-preview .spq-fake-btn i { font-size: .82rem; }
.spq-btnopt-check {
    position: absolute; top: 8px; right: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--theme-default, #7366ff); color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 10px; font-weight: clamp(1, calc(800 + var(--spq-fw-delta, 0)), 1000); box-shadow: 0 0 0 2px #fff;
}
.spq-btnopt.is-active .spq-btnopt-check { display: inline-flex; }

/* Preview swatches — visual match to what the mode does when actually applied. */
.spq-btnopt[data-preview="fill"] .spq-fake-btn { background: var(--theme-default, #7366ff); border-color: var(--theme-default, #7366ff); color: #fff; }
.spq-btnopt[data-preview="text"] .spq-fake-btn { color: var(--theme-text, var(--theme-default, #7366ff)); }
.spq-btnopt[data-preview="text-border"] .spq-fake-btn { color: var(--theme-text, var(--theme-default, #7366ff)); border-color: var(--theme-default, #7366ff); background: transparent; }
.spq-btnopt[data-preview="border"] .spq-fake-btn { border-color: var(--theme-default, #7366ff); }
.spq-btnopt[data-preview="text-icon-border"] .spq-fake-btn { color: var(--theme-text, var(--theme-default, #7366ff)); border-color: var(--theme-default, #7366ff); background: transparent; }
.spq-btnopt[data-preview="text-icon-border"] .spq-fake-btn i { color: var(--theme-text, var(--theme-default, #7366ff)); }

/* Extra button-preview swatches (2026-09-06, cmd 367) — match the body rules below. */
.spq-btnopt[data-preview="gradient"] .spq-fake-btn {
    background: linear-gradient(135deg, var(--theme-default, #7366ff), var(--theme-secondary, #838383));
    border-color: transparent; color: #fff;
}
.spq-btnopt[data-preview="gradient"] .spq-fake-btn i { color: #fff; }
.spq-btnopt[data-preview="soft"] .spq-fake-btn {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 14%, #fff);
    border-color: color-mix(in srgb, var(--theme-default, #7366ff) 28%, #fff);
    color: var(--theme-text, var(--theme-default, #7366ff));
}
.spq-btnopt[data-preview="soft"] .spq-fake-btn i { color: var(--theme-text, var(--theme-default, #7366ff)); }
.spq-btnopt[data-preview="pill"] .spq-fake-btn {
    background: var(--theme-default, #7366ff); border-color: var(--theme-default, #7366ff);
    color: #fff; border-radius: 999px;
}
.spq-btnopt[data-preview="pill"] .spq-fake-btn i { color: #fff; }
.spq-btnopt[data-preview="shadow"] .spq-fake-btn {
    background: var(--theme-default, #7366ff); border-color: var(--theme-default, #7366ff);
    color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--theme-default, #7366ff) 40%, transparent);
}
.spq-btnopt[data-preview="shadow"] .spq-fake-btn i { color: #fff; }
.spq-btnopt[data-preview="glow"] .spq-fake-btn {
    background: var(--theme-default, #7366ff); border-color: var(--theme-default, #7366ff);
    color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-default, #7366ff) 24%, transparent);
}
.spq-btnopt[data-preview="glow"] .spq-fake-btn i { color: #fff; }
.spq-btnopt[data-preview="underline"] .spq-fake-btn {
    background: transparent; border-color: transparent; color: var(--theme-text, var(--theme-default, #7366ff));
    border-bottom: 2px solid var(--theme-default, #7366ff); border-radius: 0;
}
.spq-btnopt[data-preview="underline"] .spq-fake-btn i { color: var(--theme-text, var(--theme-default, #7366ff)); }

.spq-btnrow-bold {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 10px 12px; border-radius: 10px;
    border: 1px dashed #cfd6e4; background: #fafbfd;
    font-size: .82rem; color: var(--tc-text, #33415c);
}
.spq-btnrow-bold .spq-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }
.spq-btnrow-bold input { width: 16px; height: 16px; accent-color: var(--theme-default, #7366ff); cursor: pointer; }
body.dark-only .spq-btnopt { background: var(--sf-raised, #1c2c50); border-color: var(--bd, #2b3d66); color: var(--tcd-strong, #e6ecf7); }
body.dark-only .spq-btnopt:hover { background: var(--sf-raised, #223b66); border-color: #4b6394; }
body.dark-only .spq-btnopt.is-active { background: var(--sf-card, #14213f); }
body.dark-only .spq-btnopt-desc { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-btnopt-preview { background: var(--sf-card, #101a37); }
body.dark-only .spq-btnopt-preview .spq-fake-btn { background: var(--sf-card, #14213f); border-color: var(--bd, #2b3d66); color: var(--tcd-strong, #d4ddef); }
body.dark-only .spq-btnrow-bold { background: var(--sf-card, #101a37); border-color: var(--bd, #2b3d66); color: var(--tcd-strong, #d4ddef); }

/* ============================================================================
   Actual body-level button-appearance rules — keyed off body[data-btnstyle="…"].
   ONLY applied to <button.btn>/<a.btn>/<input.btn>; anything without .btn is left alone.
   All rules are inert when data-btnstyle="follow" (the default) so unchecked users see
   the framework's stock buttons.
   ============================================================================ */
body[data-btnstyle="fill"] .btn,
body[data-btnstyle="fill"] a.btn,
body[data-btnstyle="fill"] input.btn,
body[data-btnstyle="fill"] button.btn {
    background-color: var(--theme-default, #7366ff) !important;
    border-color: var(--theme-default, #7366ff) !important;
    color: #fff !important;
}
body[data-btnstyle="fill"] .btn i,
body[data-btnstyle="fill"] .btn svg,
body[data-btnstyle="fill"] .btn .fa { color: #fff !important; }

body[data-btnstyle="text"] .btn { color: var(--theme-text, var(--theme-default, #7366ff)) !important; }

body[data-btnstyle="text-border"] .btn,
body[data-btnstyle="text-border"] button.btn,
body[data-btnstyle="text-border"] a.btn {
    color: var(--theme-text, var(--theme-default, #7366ff)) !important;
    border-color: var(--theme-default, #7366ff) !important;
    background-color: transparent !important;
}

body[data-btnstyle="border"] .btn,
body[data-btnstyle="border"] button.btn,
body[data-btnstyle="border"] a.btn {
    border-color: var(--theme-default, #7366ff) !important;
}

body[data-btnstyle="text-icon-border"] .btn,
body[data-btnstyle="text-icon-border"] button.btn,
body[data-btnstyle="text-icon-border"] a.btn {
    color: var(--theme-text, var(--theme-default, #7366ff)) !important;
    border-color: var(--theme-default, #7366ff) !important;
    background-color: transparent !important;
}
body[data-btnstyle="text-icon-border"] .btn i,
body[data-btnstyle="text-icon-border"] .btn svg,
body[data-btnstyle="text-icon-border"] .btn .fa { color: var(--theme-text, var(--theme-default, #7366ff)) !important; }

body.btn-bold .btn { font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000) !important; }

/* ---- Extra button styles (2026-09-06, cmd 367) --------------------------- */

/* Gradient — primary→secondary sweep, white foreground. */
body[data-btnstyle="gradient"] .btn,
body[data-btnstyle="gradient"] a.btn,
body[data-btnstyle="gradient"] input.btn,
body[data-btnstyle="gradient"] button.btn {
    background: linear-gradient(135deg, var(--theme-default, #7366ff), var(--theme-secondary, #838383)) !important;
    background-color: var(--theme-default, #7366ff) !important; /* fallback for browsers that ignore gradient */
    border-color: transparent !important;
    color: #fff !important;
}
body[data-btnstyle="gradient"] .btn i,
body[data-btnstyle="gradient"] .btn svg,
body[data-btnstyle="gradient"] .btn .fa { color: #fff !important; }

/* Soft — low-opacity theme tint background + themed text. Uses color-mix
   with a hard rgba() fallback so old browsers still get a reasonable tint. */
body[data-btnstyle="soft"] .btn,
body[data-btnstyle="soft"] a.btn,
body[data-btnstyle="soft"] input.btn,
body[data-btnstyle="soft"] button.btn {
    background-color: color-mix(in srgb, var(--theme-default) 12%, transparent) !important;
    background-color: color-mix(in srgb, var(--theme-default, #7366ff) 14%, transparent) !important;
    border-color: transparent !important;
    color: var(--theme-text, var(--theme-default, #7366ff)) !important;
}
body[data-btnstyle="soft"] .btn i,
body[data-btnstyle="soft"] .btn svg,
body[data-btnstyle="soft"] .btn .fa { color: var(--theme-text, var(--theme-default, #7366ff)) !important; }

/* Pill — same as fill but fully rounded. */
body[data-btnstyle="pill"] .btn,
body[data-btnstyle="pill"] a.btn,
body[data-btnstyle="pill"] input.btn,
body[data-btnstyle="pill"] button.btn {
    background-color: var(--theme-default, #7366ff) !important;
    border-color: var(--theme-default, #7366ff) !important;
    color: #fff !important;
    border-radius: 999px !important;
}
body[data-btnstyle="pill"] .btn i,
body[data-btnstyle="pill"] .btn svg,
body[data-btnstyle="pill"] .btn .fa { color: #fff !important; }

/* Shadow — solid fill lifted by a soft themed drop-shadow. */
body[data-btnstyle="shadow"] .btn,
body[data-btnstyle="shadow"] a.btn,
body[data-btnstyle="shadow"] input.btn,
body[data-btnstyle="shadow"] button.btn {
    background-color: var(--theme-default, #7366ff) !important;
    border-color: var(--theme-default, #7366ff) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.35) !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--theme-default, #7366ff) 40%, transparent) !important;
}
body[data-btnstyle="shadow"] .btn i,
body[data-btnstyle="shadow"] .btn svg,
body[data-btnstyle="shadow"] .btn .fa { color: #fff !important; }

/* Glow — fill with a soft themed halo, intensifying on hover. */
body[data-btnstyle="glow"] .btn,
body[data-btnstyle="glow"] a.btn,
body[data-btnstyle="glow"] input.btn,
body[data-btnstyle="glow"] button.btn {
    background-color: var(--theme-default, #7366ff) !important;
    border-color: var(--theme-default, #7366ff) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.22) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-default, #7366ff) 24%, transparent) !important;
    transition: box-shadow .18s ease;
}
body[data-btnstyle="glow"] .btn:hover,
body[data-btnstyle="glow"] a.btn:hover,
body[data-btnstyle="glow"] button.btn:hover {
    box-shadow: 0 0 0 5px rgba(16, 24, 40, 0.32), 0 0 18px rgba(16, 24, 40, 0.35) !important;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-default, #7366ff) 32%, transparent),
                0 0 18px color-mix(in srgb, var(--theme-default, #7366ff) 40%, transparent) !important;
}
body[data-btnstyle="glow"] .btn i,
body[data-btnstyle="glow"] .btn svg,
body[data-btnstyle="glow"] .btn .fa { color: #fff !important; }

/* Underline — flat/transparent surface with a themed underline under the label. */
body[data-btnstyle="underline"] .btn,
body[data-btnstyle="underline"] a.btn,
body[data-btnstyle="underline"] input.btn,
body[data-btnstyle="underline"] button.btn {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--theme-text, var(--theme-default, #7366ff)) !important;
    border-bottom: 2px solid var(--theme-default, #7366ff) !important;
    border-radius: 0 !important;
}
body[data-btnstyle="underline"] .btn i,
body[data-btnstyle="underline"] .btn svg,
body[data-btnstyle="underline"] .btn .fa { color: var(--theme-text, var(--theme-default, #7366ff)) !important; }

/* ============================================================================
   Buttons Catalog tab (2026-09-06, cmd 366) — read-only listing of every button
   scanned across the project so the user can review which labels/handlers are
   reusable and which look-alike buttons actually do different things.
   ============================================================================ */
.spq-cat-hint {
    margin: -4px 2px 10px; font-size: .72rem; color: var(--tc-muted, #6f7d99); line-height: 1.4;
}
.spq-cat-toolbar {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
    padding: 6px 8px; background: #f4f6fb; border: 1px solid #e7ecf3; border-radius: 8px;
}
.spq-cat-search {
    flex: 1 1 auto; min-width: 0;
    padding: 7px 10px; border-radius: 7px;
    border: 1px solid #d0d5df; background: #fff; color: var(--tc-strong, #1f2b45);
    font-size: .78rem;
}
.spq-cat-search:focus { outline: none; border-color: var(--theme-default, #7366ff); box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.12); }
.spq-cat-check { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--tc-text, #33415c); cursor: pointer; user-select: none; white-space: nowrap; }
.spq-cat-check input { width: 14px; height: 14px; accent-color: var(--theme-default, #7366ff); cursor: pointer; }

.spq-cat-list { display: flex; flex-direction: column; gap: 6px; }
.spq-cat-empty { padding: 24px 12px; text-align: center; color: var(--tc-faint, #94a3b8); font-size: .78rem; }

.spq-cat-group {
    border: 1px solid #e7ecf3; border-radius: 8px; background: #fbfcfe; overflow: hidden;
}
.spq-cat-group[open] { background: #ffffff; border-color: #c9d3e6; }
.spq-cat-grouphdr {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
    list-style: none;
}
.spq-cat-grouphdr::-webkit-details-marker { display: none; }
.spq-cat-grouphdr::before {
    content: "\25B8"; width: 10px; color: var(--tc-faint, #94a3b8); transition: transform .1s ease; flex: 0 0 auto;
}
.spq-cat-group[open] > .spq-cat-grouphdr::before { transform: rotate(90deg); }
.spq-cat-grouplabel { font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); font-size: .82rem; color: var(--tc-strong, #1f2b45); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.spq-cat-badge {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
    font-size: .68rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); background: #eef2f8; color: var(--tc-text, #33415c);
}
.spq-cat-badge-warn { background: #fef3c7; color: #92400e; }
.spq-cat-badge-soft { background: transparent; color: var(--tc-muted, #61708c); border: 1px solid #d0d5df; }

.spq-cat-grouprows { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px; }
.spq-cat-row {
    display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 10px;
    padding: 8px; border-radius: 7px; background: #f7f9fc; border: 1px solid #eef2f8;
}
.spq-cat-face { display: flex; align-items: center; gap: 8px; }
.spq-cat-fakebtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 6px;
    background: #fff; border: 1px solid #d0d5df; color: var(--tc-text, #33415c);
    font-size: .75rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); max-width: 100%;
}
.spq-cat-fakebtn i { color: var(--theme-text, var(--theme-default, #7366ff)); }
.spq-cat-fakelabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; display: inline-block; }
.spq-cat-noicon { color: var(--tc-faint, #94a3b8); font-style: italic; font-size: .72rem; }

.spq-cat-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spq-cat-handler {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .7rem; color: var(--theme-text, var(--theme-default)); background: #eef2ff; padding: 2px 6px; border-radius: 4px;
    align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spq-cat-cls {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem; color: var(--tc-muted, #61708c);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spq-cat-screens { display: flex; flex-wrap: wrap; gap: 4px; }
.spq-cat-screen {
    display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px;
    background: #e0e7ff; color: var(--theme-text, var(--theme-default)); font-size: .66rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spq-cat-screen-more { background: #f1f5f9; color: var(--tc-muted, #64748b); }
.spq-cat-file {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .66rem; color: var(--tc-faint, #94a3b8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body.dark-only .spq-cat-hint { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-cat-toolbar { background: var(--sf-card, #101a37); border-color: var(--bd, #26365c); }
body.dark-only .spq-cat-search { background: var(--sf-card, #14213f); border-color: var(--bd, #2b3d66); color: var(--tcd-strong, #d4ddef); }
body.dark-only .spq-cat-check { color: var(--tcd-strong, #d4ddef); }
body.dark-only .spq-cat-group { background: var(--sf-card, #101a37); border-color: var(--bd, #26365c); }
body.dark-only .spq-cat-group[open] { background: var(--sf-card, #14213f); border-color: var(--bd, #3a4d78); }
body.dark-only .spq-cat-grouplabel { color: var(--tcd-strong, #e6ecf7); }
body.dark-only .spq-cat-badge { background: var(--sf-raised, #1c2c50); color: var(--tcd-strong, #d4ddef); }
body.dark-only .spq-cat-badge-warn { background: #78350f; color: #fef3c7; }
body.dark-only .spq-cat-badge-soft { color: var(--tcd-muted, #94a3b8); border-color: var(--bd, #2b3d66); }
body.dark-only .spq-cat-row { background: var(--sf-raised, #1c2c50); border-color: var(--bd, #26365c); }
body.dark-only .spq-cat-fakebtn { background: var(--sf-card, #14213f); border-color: var(--bd, #2b3d66); color: var(--tcd-strong, #d4ddef); }
body.dark-only .spq-cat-handler { background: var(--sf-raised, #1e1b4b); color: #c7d2fe; }
body.dark-only .spq-cat-cls { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-cat-screen { background: var(--sf-raised, #312e81); color: #c7d2fe; }
body.dark-only .spq-cat-screen-more { background: var(--sf-raised, #1e293b); color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-cat-file { color: var(--tcd-faint, #64748b); }

/* ============================================================================
   Full-viewport overlay shown briefly during light/dark reload so the click
   feels intentional instead of "the popup flashed and closed" (2026-09-05, cmd 364).
   ============================================================================ */
.spq-appearance-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
    font-size: .82rem; color: var(--tc-muted, #61708c); font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
}
.spq-appearance-overlay.is-on { opacity: 1; pointer-events: auto; }
body.dark-only .spq-appearance-overlay { background: var(--sf-card, #14213f); color: var(--tcd-strong, #d4ddef); }

/* ============================================================================
   Font picker tab (Appearance → Font) — 2026-09-07.
   --spq-font-family is set on <html> by App.razor (server) and updated live by
   appearance.js; body{font-family} below applies it globally.
   ============================================================================ */

/* Global font application — appearance.css loads after the Cuba theme CSS so
   this wins on equal specificity without needing !important everywhere. */
body,
.page-wrapper,
input:not([type="color"]), select, textarea,
.form-control, .form-select {
    font-family: var(--spq-font-family, 'Inter', sans-serif);
}

/* Base body-text weight from Appearance → Font → Text weight. Only sets the
   baseline via `body { font-weight }` — anything with its own explicit
   font-weight rule (headings, .btn, .fw-bold, labels styled by the theme) is
   untouched, so hierarchy is preserved. */
body {
    font-weight: var(--spq-font-weight, 400);
}

/* Text contrast — three levels applied via body[data-text-contrast]. "normal"
   leaves the theme colour alone; boost/max darken (light mode) or brighten
   (dark mode) body text without changing the theme colours themselves.
   Scoped to text nodes only: buttons, chips, badges and anything with an
   explicit colour keep theirs (we do NOT use !important). */
body[data-text-contrast="boost"] { color: var(--tc-strong, #131a2b); }
body[data-text-contrast="max"]   { color: var(--tc-strong, #000000); }
body.dark-only[data-text-contrast="boost"] { color: var(--tcd-strong, #f2f5fb); }
body.dark-only[data-text-contrast="max"]   { color: var(--tcd-strong, #ffffff); }

/* ============================================================================
   Centralised typography tokens — 2026-09-21.
   Every stylesheet in the app (Cuba theme, our CSS, scoped .razor.css) was
   rewritten so literal values read these tokens, keeping the ORIGINAL value as
   the fallback / a zero offset:
     font-weight: N        -> clamp(1, calc(N + var(--spq-fw-delta, 0)), 1000)
     color: <neutral grey> -> var(--tc-{strong|text|muted|faint}, <grey>)   light rules
                              var(--tcd-{strong|text|muted|faint}, <grey>)  dark-only rules
     font-family: Roboto…  -> var(--spq-font-family, Roboto…)
   "Regular" + "Theme default" therefore render exactly as before, and
   Appearance → Font weight / contrast reach every screen and SmartGrid.
   NEW CSS: use these tokens — never literal greys, weights or font names.
   Status / brand colours (red, green, amber, theme accent) stay literal on purpose.
   ============================================================================ */

/* Weight: every weight shifts by (chosen base − 400). Regular = 0 = unchanged;
   hierarchy is kept because headings and bold move by the same step. */
:root { --spq-fw-delta: calc(var(--spq-font-weight, 400) - 400); }

/* ============================================================================
   Enterprise colour system — 2026-09-21. ONE place decides text, accent and
   surface colours per mode; every stylesheet was rewritten to read these tokens
   with its ORIGINAL value as the fallback (tools/css/*.mjs):
     --theme-text      accent TEXT (never the raw fill): deep theme shade in light
                       mode, light tint in dark mode, both >= 7.5:1 (WCAG AAA)
     --tc-*            neutral text of light-authored rules (strong/text/muted/faint)
     --tcd-*           neutral text of dark-authored rules
     --sf-* / --bd     surfaces + borders of light-authored rules — defined ONLY in
                       dark mode, so light mode keeps every original colour, and a
                       component with no dark CSS of its own still goes dark
     --app-paper*      page background, tinted per theme (ThemePalette PaperLight/Dark)
     --tint-base       what theme tints mix into (white / dark card)
   Surface tokens live on :root because Cuba's own :root custom properties
   reference them; :root:has(> body.dark-only) switches them. Without :has
   support the surfaces simply keep their original colours (graceful).
   ============================================================================ */
:root {
    --tint-base: #ffffff;
    --app-paper-light: var(--theme-paper-light, #f7f8f9);
}
:root:has(> body.dark-only) {
    --app-paper: var(--theme-paper-dark, #1d1e26);
    --sf-subtle: color-mix(in srgb, var(--app-paper) 96%, #ffffff);
    --sf-card:   color-mix(in srgb, var(--app-paper) 93%, #ffffff);
    --sf-raised: color-mix(in srgb, var(--app-paper) 88%, #ffffff);
    --bd:        color-mix(in srgb, var(--app-paper) 82%, #ffffff);
    --tint-base: var(--sf-card);
}

/* Light mode: sharp near-black neutrals, deep accent text. */
body:not(.dark-only) {
    --theme-text: var(--theme-text-light, var(--theme-default));
    /* Strengthened 2026-10-09: the muted/faint greys read as washed-out on long screens,
       so even the faintest label now sits at ~9:1 on white and body text is near-black. */
    --tc-strong: #0b1220; --tc-text: #111827; --tc-muted: #374151; --tc-faint: #4B5563;
    --app-input-ink: #0b1220;
    color: var(--tc-text, #1f2937);
}
/* Dark mode: light neutrals for BOTH light- and dark-authored rules, light accent
   text, and Cuba's own surface/text variables re-pointed at the theme paper
   (Cuba shipped body text at 60% white, which read as dull grey). */
body.dark-only {
    --theme-text: var(--theme-text-dark, var(--theme-default));
    --tc-strong: #f8fafc; --tc-text: #e5e7eb; --tc-muted: #c3cad5; --tc-faint: #9aa4b2;
    --tcd-strong: #f8fafc; --tcd-text: #e5e7eb; --tcd-muted: #c3cad5; --tcd-faint: #9aa4b2;
    --app-input-ink: #f1f5f9;
    /* Pastel backgrounds keep 14% of their hue over the dark card; dark coloured text
       (navy, status red/green) is blended 45% toward near-white so it stays legible. */
    --pastel-keep: 14%;
    --ink-keep: 45%;
    --ink-flip: #f1f5f9;
    --body-font-color: var(--tcd-text);
    --white: var(--sf-card, #262932);
    --light-bg: var(--app-paper, #1d1e26);
    --light2: var(--app-paper, #1d1e26);
    --light-slate: var(--app-paper, #1c1d26);
    --recent-box-bg: var(--app-paper, #1d1e26);
    --recent-chart-bg: var(--sf-card, #262932);
    --bs-body-color: var(--tcd-text);
    --bs-secondary-color: var(--tcd-muted);
    color: var(--tcd-text, #e5e7eb);
    background-color: var(--app-paper, #1d1e26);
}

/* Contrast (Appearance → Font → Text contrast) — stronger than the defaults above. */
body:not(.dark-only)[data-text-contrast="boost"] {
    --tc-strong: #0b1220; --tc-text: #131a2b; --tc-muted: #3a4660; --tc-faint: #56627a;
}
body:not(.dark-only)[data-text-contrast="max"] {
    --tc-strong: #000000; --tc-text: #000000; --tc-muted: #1a1a1a; --tc-faint: #333333;
}
body.dark-only[data-text-contrast="boost"] {
    --tc-strong: #ffffff; --tc-text: #f2f5fb; --tc-muted: #d6deec; --tc-faint: #b8c3d8;
    --tcd-strong: #ffffff; --tcd-text: #f2f5fb; --tcd-muted: #d6deec; --tcd-faint: #b8c3d8;
}
body.dark-only[data-text-contrast="max"] {
    --tc-strong: #ffffff; --tc-text: #ffffff; --tc-muted: #f2f2f2; --tc-faint: #e0e0e0;
    --tcd-strong: #ffffff; --tcd-text: #ffffff; --tcd-muted: #f2f2f2; --tcd-faint: #e0e0e0;
}

/* Page background tinted per theme (fresh "paper" instead of Cuba's flat grey). */
body .page-wrapper .page-body-wrapper { background-color: var(--app-paper-light, #f7f8f9); }
body.dark-only .page-wrapper .page-body-wrapper { background-color: var(--app-paper, #1d1e26); }

/* ---- Bootstrap 5.3 dark bridge ---------------------------------------------
   vendors/bootstrap.css is not rewritten (vendor file), and the app does not use
   data-bs-theme, so in dark mode Bootstrap's light utilities stayed light (light
   alerts, .bg-light chips with .text-dark = invisible text). Re-point its
   variables and the few light-only utilities at the theme's dark palette. */
body.dark-only {
    color-scheme: dark;
    --bs-body-bg: var(--app-paper, #1d1e26);
    --bs-emphasis-color: var(--tcd-strong);
    --bs-heading-color: var(--tcd-strong);
    --bs-secondary-bg: var(--sf-raised, #30333f);
    --bs-tertiary-bg: var(--sf-subtle, #23252e);
    --bs-border-color: var(--bd, #3a3d4a);
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-link-color: var(--theme-text);
    --bs-link-hover-color: var(--theme-text);
    --bs-primary-bg-subtle:   color-mix(in srgb, var(--theme-default) 22%, var(--sf-card, #262932));
    --bs-primary-text-emphasis: var(--theme-text);
    --bs-primary-border-subtle: color-mix(in srgb, var(--theme-default) 45%, var(--sf-card, #262932));
    --bs-secondary-bg-subtle: var(--sf-raised, #30333f);
    --bs-secondary-text-emphasis: var(--tcd-text);
    --bs-success-bg-subtle: #10281c; --bs-success-text-emphasis: #75d4a4; --bs-success-border-subtle: #1f5a3b;
    --bs-info-bg-subtle:    #0c2a33; --bs-info-text-emphasis:    #6fd3ec; --bs-info-border-subtle:    #19566a;
    --bs-warning-bg-subtle: #2e2507; --bs-warning-text-emphasis: #f5cf5b; --bs-warning-border-subtle: #6a5314;
    --bs-danger-bg-subtle:  #33151a; --bs-danger-text-emphasis:  #f19aa3; --bs-danger-border-subtle:  #6f2a33;
    --bs-light-bg-subtle: var(--sf-raised, #30333f); --bs-light-text-emphasis: var(--tcd-text); --bs-light-border-subtle: var(--bd, #3a3d4a);
    --bs-dark-bg-subtle:  var(--sf-subtle, #23252e); --bs-dark-text-emphasis:  var(--tcd-text); --bs-dark-border-subtle:  var(--bd, #3a3d4a);
}
body.dark-only .table {
    --bs-table-color: var(--tcd-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bd, #3a3d4a);
    --bs-table-striped-color: var(--tcd-text);
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-hover-color: var(--tcd-strong);
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
    --bs-table-active-bg: rgba(255, 255, 255, .08);
}
body.dark-only .bg-light,
body.dark-only .bg-white,
body.dark-only .table-light,
body.dark-only .table-light > * > * { background-color: var(--sf-raised, #30333f) !important; }
body.dark-only .text-dark,
body.dark-only .text-black,
body.dark-only .text-body { color: var(--tcd-strong) !important; }
/* ---- Alerts: tinted surface + dark text (enterprise pattern) ------------------
   Cuba shipped solid 80%-opacity status fills with WHITE text (~2:1 contrast —
   the washed-out sky-blue / salmon banners). Same status meaning, readable text. */
body:not(.dark-only) {
    --al-primary-bg: color-mix(in srgb, var(--theme-default) 8%, #fff); --al-primary-fg: var(--theme-text); --al-primary-bd: color-mix(in srgb, var(--theme-default) 28%, #fff);
    --al-success-bg: #ecfdf3; --al-success-fg: #05603a; --al-success-bd: #abefc6;
    --al-info-bg:    #eff8ff; --al-info-fg:    #175cd3; --al-info-bd:    #b2ddff;
    --al-warning-bg: #fffaeb; --al-warning-fg: #93370d; --al-warning-bd: #fedf89;
    --al-danger-bg:  #fef3f2; --al-danger-fg:  #b42318; --al-danger-bd:  #fecdca;
    --al-light-bg:   #f8fafc; --al-light-fg:   #1f2937; --al-light-bd:   #e5e7eb;
    --al-secondary-bg: #f2f4f7; --al-secondary-fg: #344054; --al-secondary-bd: #d0d5dd;
}
body.dark-only {
    --al-primary-bg: var(--bs-primary-bg-subtle); --al-primary-fg: var(--theme-text); --al-primary-bd: var(--bs-primary-border-subtle);
    --al-success-bg: var(--bs-success-bg-subtle); --al-success-fg: var(--bs-success-text-emphasis); --al-success-bd: var(--bs-success-border-subtle);
    --al-info-bg:    var(--bs-info-bg-subtle);    --al-info-fg:    var(--bs-info-text-emphasis);    --al-info-bd:    var(--bs-info-border-subtle);
    --al-warning-bg: var(--bs-warning-bg-subtle); --al-warning-fg: var(--bs-warning-text-emphasis); --al-warning-bd: var(--bs-warning-border-subtle);
    --al-danger-bg:  var(--bs-danger-bg-subtle);  --al-danger-fg:  var(--bs-danger-text-emphasis);  --al-danger-bd:  var(--bs-danger-border-subtle);
    --al-light-bg:   var(--sf-raised, #30333f);   --al-light-fg:   var(--tcd-text);                 --al-light-bd:   var(--bd, #3a3d4a);
    --al-secondary-bg: var(--sf-raised, #30333f); --al-secondary-fg: var(--tcd-text);               --al-secondary-bd: var(--bd, #3a3d4a);
}
body:is(.dark-only, :not(.dark-only)) .alert-primary   { background-color: var(--al-primary-bg) !important;   color: var(--al-primary-fg) !important;   border-color: var(--al-primary-bd) !important; }
body:is(.dark-only, :not(.dark-only)) .alert-success   { background-color: var(--al-success-bg) !important;   color: var(--al-success-fg) !important;   border-color: var(--al-success-bd) !important; }
body:is(.dark-only, :not(.dark-only)) .alert-info      { background-color: var(--al-info-bg) !important;      color: var(--al-info-fg) !important;      border-color: var(--al-info-bd) !important; }
body:is(.dark-only, :not(.dark-only)) .alert-warning   { background-color: var(--al-warning-bg) !important;   color: var(--al-warning-fg) !important;   border-color: var(--al-warning-bd) !important; }
body:is(.dark-only, :not(.dark-only)) .alert-danger    { background-color: var(--al-danger-bg) !important;    color: var(--al-danger-fg) !important;    border-color: var(--al-danger-bd) !important; }
body:is(.dark-only, :not(.dark-only)) .alert-light     { background-color: var(--al-light-bg) !important;     color: var(--al-light-fg) !important;     border-color: var(--al-light-bd) !important; }
body:is(.dark-only, :not(.dark-only)) .alert-secondary { background-color: var(--al-secondary-bg) !important; color: var(--al-secondary-fg) !important; border-color: var(--al-secondary-bd) !important; }
body .alert .alert-link { color: inherit; }
body.dark-only .form-control,
body.dark-only .form-select { background-color: var(--sf-subtle, #23252e); border-color: var(--bd, #3a3d4a); }
body.dark-only .form-control::placeholder { color: var(--tcd-faint); }
body.dark-only .modal-content,
body.dark-only .dropdown-menu,
body.dark-only .popover,
body.dark-only .offcanvas { background-color: var(--sf-card, #262932); color: var(--tcd-text); border-color: var(--bd, #3a3d4a); }
body.dark-only .dropdown-item { color: var(--tcd-text); }
body.dark-only .dropdown-item:hover,
body.dark-only .dropdown-item:focus { background-color: var(--sf-raised, #30333f); color: var(--tcd-strong); }

/* Same tokens as utility classes for inline-styled Razor markup. */
.t-strong { color: var(--tc-strong, #1f2b45); }
.t-text   { color: var(--tc-text, #33415c); }
.t-muted  { color: var(--tc-muted, #61708c); }
.t-faint  { color: var(--tc-faint, #8291ac); }
body.dark-only .t-strong { color: var(--tcd-strong, #ffffff); }
body.dark-only .t-text   { color: var(--tcd-text, #d4ddef); }
body.dark-only .t-muted  { color: var(--tcd-muted, #a9b6cf); }
body.dark-only .t-faint  { color: var(--tcd-faint, #7f8ca6); }
.t-fw-medium   { font-weight: clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000); }
.t-fw-semibold { font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }
.t-fw-bold     { font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); }

/* Grid font — applies to all HTML data tables and BlazorDatasheet (SmartGrid).
   --spq-grid-font-family is set on <html> only when the user picks a specific
   grid font; when "Same as Interface Font" is selected the var is absent and
   the fallback cascades to --spq-font-family, then 'Inter'. */
table {
    font-family: var(--spq-grid-font-family, var(--spq-font-family, 'Inter', sans-serif));
}

/* Grid weight — apply the user's text-weight choice to all HTML data table cells.
   Targeting td and th directly so browser-default th{font-weight:bold} is overridden
   and every grid row (header + data) respects the user's selection.
   Future grids: any <table> added anywhere in the app picks this up automatically. */
table td,
table th {
    font-weight: var(--spq-font-weight, 400);
}

/* Bridge into BlazorDatasheet (SmartGrid). The package defines its --sheet-* vars on
   .vars[theme=…], which out-specifies a bare .vars — so the authoritative bridge
   (font, weight, text colours, contrast) lives in ManualGridEdit.css on
   .vars[theme='default'/'dark'] with !important. This rule is only a fallback. */
.vars {
    --sheet-font-family: var(--spq-grid-font-family, var(--spq-font-family, 'Inter', sans-serif));
    --sheet-font-weight: var(--spq-font-weight, 400);
}

.spq-font-grid {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.spq-font-opt {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 12px 12px 10px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #e7ecf3; background: #fbfcfe; color: var(--tc-strong, #1f2b45); text-align: left;
    transition: border-color .12s ease, background .12s ease;
}
.spq-font-opt:hover { border-color: #b9c3d9; background: #f5f8fd; }
.spq-font-opt.is-active {
    border-color: var(--theme-default, #7366ff); background: #fff;
    box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.1);
}
.spq-font-sample {
    font-family: var(--fopt-ff); font-size: 1.4rem; font-weight: clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000);
    line-height: 1.2; color: var(--tc-strong, #1f2b45); margin-bottom: 2px;
}
.spq-font-name { font-size: .82rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); }
.spq-font-desc { font-size: .7rem; color: var(--tc-muted, #6f7d99); line-height: 1.35; }
.spq-font-check {
    position: absolute; top: 8px; right: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--theme-default, #7366ff); color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 10px; font-weight: clamp(1, calc(800 + var(--spq-fw-delta, 0)), 1000); box-shadow: 0 0 0 2px #fff;
}
.spq-font-opt.is-active .spq-font-check { display: inline-flex; }

body.dark-only .spq-font-opt { background: var(--sf-raised, #1c2c50); border-color: var(--bd, #2b3d66); color: var(--tcd-strong, #e6ecf7); }
body.dark-only .spq-font-opt:hover { background: var(--sf-raised, #223b66); border-color: #4b6394; }
body.dark-only .spq-font-opt.is-active { background: var(--sf-card, #14213f); }
body.dark-only .spq-font-sample { color: var(--tcd-strong, #e6ecf7); }
body.dark-only .spq-font-desc { color: var(--tcd-muted, #94a3b8); }

/* Text-weight tile — the sample text renders in the actual chosen weight so
   the user sees the effect on the tile itself before committing. */
.spq-weight-opt .spq-font-sample { font-family: var(--spq-font-family, 'Inter', sans-serif); }

/* Text-contrast tile — the sample text renders at the actual chosen colour
   for the current light/dark mode so the effect is previewed in place. */
.spq-contrast-opt .spq-contrast-sample-normal { color: var(--tc-muted, #6f7d99); }
.spq-contrast-opt .spq-contrast-sample-boost  { color: var(--tc-strong, #131a2b); }
.spq-contrast-opt .spq-contrast-sample-max    { color: var(--tc-strong, #000000); }
body.dark-only .spq-contrast-opt .spq-contrast-sample-normal { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-contrast-opt .spq-contrast-sample-boost  { color: var(--tcd-strong, #f2f5fb); }
body.dark-only .spq-contrast-opt .spq-contrast-sample-max    { color: var(--tcd-strong, #ffffff); }

/* ============================================================================
   rd-btn-* bridge — extends the body[data-btnstyle] system to the Return
   Dashboard's custom button classes (rd-btn-primary, rd-btn-outline,
   rd-btn-icon) which do not carry the Bootstrap .btn hook.
   Mirror every block from the .btn section above, same !important rules.
   ============================================================================ */

body[data-btnstyle="fill"] .rd-btn-primary,
body[data-btnstyle="fill"] a.rd-btn-primary,
body[data-btnstyle="fill"] .rd-btn-outline,
body[data-btnstyle="fill"] a.rd-btn-outline {
    background: var(--theme-default, #7366ff) !important;
    border-color: var(--theme-default, #7366ff) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--theme-default, #7366ff) 30%, transparent) !important;
}
body[data-btnstyle="fill"] .rd-btn-primary i,
body[data-btnstyle="fill"] a.rd-btn-primary i,
body[data-btnstyle="fill"] .rd-btn-outline i,
body[data-btnstyle="fill"] a.rd-btn-outline i { color: #fff !important; }

body[data-btnstyle="text"] .rd-btn-primary,
body[data-btnstyle="text"] a.rd-btn-primary,
body[data-btnstyle="text"] .rd-btn-outline,
body[data-btnstyle="text"] a.rd-btn-outline {
    background: transparent !important; border-color: transparent !important;
    color: var(--theme-text, var(--theme-default, #7366ff)) !important; box-shadow: none !important;
}
body[data-btnstyle="text"] .rd-btn-primary i,
body[data-btnstyle="text"] .rd-btn-outline i { color: var(--theme-text, var(--theme-default, #7366ff)) !important; }

body[data-btnstyle="text-border"] .rd-btn-primary,
body[data-btnstyle="text-border"] a.rd-btn-primary,
body[data-btnstyle="text-border"] .rd-btn-outline,
body[data-btnstyle="text-border"] a.rd-btn-outline {
    background: transparent !important;
    border-color: var(--theme-default, #7366ff) !important;
    color: var(--theme-text, var(--theme-default, #7366ff)) !important; box-shadow: none !important;
}
body[data-btnstyle="text-border"] .rd-btn-primary i,
body[data-btnstyle="text-border"] .rd-btn-outline i { color: var(--theme-text, var(--theme-default, #7366ff)) !important; }

body[data-btnstyle="border"] .rd-btn-primary,
body[data-btnstyle="border"] a.rd-btn-primary,
body[data-btnstyle="border"] .rd-btn-outline,
body[data-btnstyle="border"] a.rd-btn-outline {
    border-color: var(--theme-default, #7366ff) !important;
}

body[data-btnstyle="text-icon-border"] .rd-btn-primary,
body[data-btnstyle="text-icon-border"] a.rd-btn-primary,
body[data-btnstyle="text-icon-border"] .rd-btn-outline,
body[data-btnstyle="text-icon-border"] a.rd-btn-outline {
    background: transparent !important;
    border-color: var(--theme-default, #7366ff) !important;
    color: var(--theme-text, var(--theme-default, #7366ff)) !important; box-shadow: none !important;
}
body[data-btnstyle="text-icon-border"] .rd-btn-primary i,
body[data-btnstyle="text-icon-border"] a.rd-btn-primary i,
body[data-btnstyle="text-icon-border"] .rd-btn-outline i,
body[data-btnstyle="text-icon-border"] a.rd-btn-outline i { color: var(--theme-text, var(--theme-default, #7366ff)) !important; }

body[data-btnstyle="gradient"] .rd-btn-primary,
body[data-btnstyle="gradient"] a.rd-btn-primary,
body[data-btnstyle="gradient"] .rd-btn-outline,
body[data-btnstyle="gradient"] a.rd-btn-outline {
    background: linear-gradient(135deg, var(--theme-default, #7366ff), var(--theme-secondary, #838383)) !important;
    border-color: transparent !important; color: #fff !important; box-shadow: none !important;
}
body[data-btnstyle="gradient"] .rd-btn-primary i,
body[data-btnstyle="gradient"] .rd-btn-outline i { color: #fff !important; }

body[data-btnstyle="soft"] .rd-btn-primary,
body[data-btnstyle="soft"] a.rd-btn-primary,
body[data-btnstyle="soft"] .rd-btn-outline,
body[data-btnstyle="soft"] a.rd-btn-outline {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 14%, transparent) !important;
    border-color: transparent !important;
    color: var(--theme-text, var(--theme-default, #7366ff)) !important; box-shadow: none !important;
}
body[data-btnstyle="soft"] .rd-btn-primary i,
body[data-btnstyle="soft"] .rd-btn-outline i { color: var(--theme-text, var(--theme-default, #7366ff)) !important; }

body[data-btnstyle="pill"] .rd-btn-primary,
body[data-btnstyle="pill"] a.rd-btn-primary,
body[data-btnstyle="pill"] .rd-btn-outline,
body[data-btnstyle="pill"] a.rd-btn-outline,
body[data-btnstyle="pill"] .rd-btn-icon { border-radius: 999px !important; }
body[data-btnstyle="pill"] .rd-btn-primary,
body[data-btnstyle="pill"] a.rd-btn-primary {
    background: var(--theme-default, #7366ff) !important;
    border-color: var(--theme-default, #7366ff) !important; color: #fff !important;
}
body[data-btnstyle="pill"] .rd-btn-primary i { color: #fff !important; }

body[data-btnstyle="shadow"] .rd-btn-primary,
body[data-btnstyle="shadow"] a.rd-btn-primary,
body[data-btnstyle="shadow"] .rd-btn-outline,
body[data-btnstyle="shadow"] a.rd-btn-outline {
    background: var(--theme-default, #7366ff) !important;
    border-color: var(--theme-default, #7366ff) !important; color: #fff !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--theme-default, #7366ff) 40%, transparent) !important;
}
body[data-btnstyle="shadow"] .rd-btn-primary i,
body[data-btnstyle="shadow"] .rd-btn-outline i { color: #fff !important; }

body[data-btnstyle="glow"] .rd-btn-primary,
body[data-btnstyle="glow"] a.rd-btn-primary,
body[data-btnstyle="glow"] .rd-btn-outline,
body[data-btnstyle="glow"] a.rd-btn-outline {
    background: var(--theme-default, #7366ff) !important;
    border-color: var(--theme-default, #7366ff) !important; color: #fff !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-default, #7366ff) 24%, transparent) !important;
    transition: box-shadow .18s ease;
}
body[data-btnstyle="glow"] .rd-btn-primary:hover,
body[data-btnstyle="glow"] a.rd-btn-primary:hover,
body[data-btnstyle="glow"] .rd-btn-outline:hover,
body[data-btnstyle="glow"] a.rd-btn-outline:hover {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-default, #7366ff) 32%, transparent),
                0 0 18px color-mix(in srgb, var(--theme-default, #7366ff) 40%, transparent) !important;
}
body[data-btnstyle="glow"] .rd-btn-primary i,
body[data-btnstyle="glow"] .rd-btn-outline i { color: #fff !important; }

body[data-btnstyle="underline"] .rd-btn-primary,
body[data-btnstyle="underline"] a.rd-btn-primary,
body[data-btnstyle="underline"] .rd-btn-outline,
body[data-btnstyle="underline"] a.rd-btn-outline {
    background: transparent !important; border-color: transparent !important;
    border-bottom: 2px solid var(--theme-default, #7366ff) !important;
    border-radius: 0 !important;
    color: var(--theme-text, var(--theme-default, #7366ff)) !important; box-shadow: none !important;
}
body[data-btnstyle="underline"] .rd-btn-primary i,
body[data-btnstyle="underline"] .rd-btn-outline i { color: var(--theme-text, var(--theme-default, #7366ff)) !important; }

body.btn-bold .rd-btn-primary,
body.btn-bold .rd-btn-outline { font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000) !important; }

/* Phone — collapse tile grid to two columns and cap the dialog height */
@media (max-width: 640px) {
    .spq-atd-backdrop { padding: 10px; }
    .spq-atd { max-height: 96vh; border-radius: 12px; }
    .spq-atd-head { padding: 12px 14px 10px; }
    .spq-atd-scroll { padding: 10px 12px 6px; }
    .spq-atd-foot { padding: 10px 14px 12px; }
    .spq-atd-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .spq-atd-title { font-size: .95rem; }
    .spq-atd-sub { font-size: .72rem; }
    .spq-atd-name { font-size: .7rem; }
    .spq-atd-desc { font-size: .62rem; }
    .spq-atd-tabs { padding: 0 12px; }
    .spq-btnopts { grid-template-columns: 1fr; }
    .spq-font-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Status badges: same hues, fills deep enough for the white label (>= 4.5:1).
   Cuba's #54ba4a / #40b8f5 / #ffaa05 fills put white text at ~2:1. ---- */
body .badge-success   { background-color: #067647 !important; }
body .badge-info      { background-color: #0b69b7 !important; }
body .badge-warning   { background-color: #b54708 !important; }
body .badge-danger    { background-color: #d92d20 !important; }
body .badge-secondary { background-color: #475467 !important; }
body .badge-success, body .badge-info, body .badge-warning, body .badge-danger, body .badge-secondary { color: #fff !important; }

/* ---- Dark bridge for third-party chrome (2026-10-09) --------------------------
   BlazorBootstrap modals/toasts/tooltips, Bootstrap nav-tabs and the BlazorDatasheet
   popup menus ship their own light backgrounds, so they stayed light while the page
   went dark. One block, one place; every value is a theme token with the dark default
   as fallback. Light mode is untouched (body.dark-only only). */
body.dark-only .modal-body,
body.dark-only .modal-footer,
body.dark-only .modal-body-custom,
body.dark-only .modal-footer-custom { background-color: var(--sf-card, #262932); color: var(--tcd-text, #e5e7eb); border-color: var(--bd, #3a3d4a); }
body.dark-only .modal-header:not(.modal-header-custom) { background-color: var(--sf-raised, #30333f); color: var(--tcd-strong, #f8fafc); border-color: var(--bd, #3a3d4a); }
body.dark-only .modal .btn-close,
body.dark-only .toast .btn-close,
body.dark-only .offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

body.dark-only .toast { background-color: var(--sf-raised, #30333f); color: var(--tcd-text, #e5e7eb); border-color: var(--bd, #3a3d4a); }
body.dark-only .toast-header { background-color: var(--sf-card, #262932); color: var(--tcd-strong, #f8fafc); border-bottom-color: var(--bd, #3a3d4a); }
body.dark-only .toast-body { color: inherit; }

body.dark-only .tooltip .tooltip-inner { background-color: var(--sf-raised, #30333f); color: var(--tcd-strong, #f8fafc); border: 1px solid var(--bd, #3a3d4a); }
body.dark-only .tooltip .tooltip-arrow::before { border-top-color: var(--sf-raised, #30333f); }

body.dark-only .nav-tabs { border-bottom-color: var(--bd, #3a3d4a); }
body.dark-only .nav-tabs .nav-link { color: var(--tcd-muted, #c3cad5); border-color: transparent; }
body.dark-only .nav-tabs .nav-link:hover,
body.dark-only .nav-tabs .nav-link:focus { color: var(--tcd-strong, #f8fafc); border-color: var(--bd, #3a3d4a) var(--bd, #3a3d4a) transparent; isolation: isolate; }
body.dark-only .nav-tabs .nav-link.active,
body.dark-only .nav-tabs .nav-item.show .nav-link { color: var(--theme-text, #a4ade1); background-color: var(--sf-card, #262932); border-color: var(--bd, #3a3d4a) var(--bd, #3a3d4a) var(--sf-card, #262932); }
body.dark-only .nav-pills .nav-link:not(.active) { color: var(--tcd-text, #e5e7eb); }

body.dark-only .list-group-item { background-color: var(--sf-card, #262932); color: var(--tcd-text, #e5e7eb); border-color: var(--bd, #3a3d4a); }
body.dark-only .list-group-item-action:hover,
body.dark-only .list-group-item-action:focus { background-color: var(--sf-raised, #30333f); color: var(--tcd-strong, #f8fafc); }

/* BlazorDatasheet popups (select editor list, formula suggestions) are rendered outside the
   .vars[theme] scope, so they do not pick up the sheet tokens in ManualGridEdit.css. */
body.dark-only .bds-select-list,
body.dark-only .bds-func-suggestions { background-color: var(--sf-raised, #30333f); color: var(--tcd-text, #e5e7eb); border-color: var(--bd, #3a3d4a); }
body.dark-only .bds-select-item:hover,
body.dark-only .bds-func-suggestions-item:hover { background-color: color-mix(in srgb, var(--theme-default) 22%, var(--sf-raised, #30333f)); }
body.dark-only .bds-select-text-input { background-color: var(--sf-subtle, #23252e); color: var(--tcd-text, #e5e7eb); border-color: var(--bd, #3a3d4a); }

/* #region Himanshu (09-Oct-2026) — Appearance → Action buttons tab (option tiles; the previews
   inside use the real .spq-ab rules from gst-action-buttons.css) */
.spq-actopts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.spq-actopt {
    position: relative; text-align: left; cursor: pointer; font: inherit; color: inherit;
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px 12px; border-radius: 10px;
    border: 1px solid var(--bd, #dfe4ee); background: var(--sf-card, #fff);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.spq-actopt:hover { border-color: var(--bd, #b9c3d9); background: var(--sf-subtle, #f5f8fd); }
.spq-actopt.is-active { border-color: var(--theme-default, #3949AB); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-default, #3949AB) 22%, transparent); }
.spq-actopt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.spq-actopt-title { font-size: .84rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); }
.spq-actopt-ref { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tc-faint, #98a2b3); white-space: nowrap; }
.spq-actopt.is-active .spq-actopt-ref { padding-right: 22px; }
.spq-actopt-desc { font-size: .7rem; color: var(--tc-muted, #6f7d99); line-height: 1.35; min-height: 2.7em; }
.spq-actopt-preview { padding: 8px; border-radius: 8px; background: var(--sf-subtle, #f4f6fb); overflow: hidden; }
.spq-actopt-preview .spq-ab { pointer-events: none; }
.spq-actopt .spq-btnopt-check { display: none; }
.spq-actopt.is-active .spq-btnopt-check { display: inline-flex; }
.spq-actopts--ico { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 2px; }
.spq-actopt--ico .spq-actopt-desc { min-height: 0; }
.spq-actopt-foot { margin-top: 12px; }
.spq-actopt-link { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--theme-text, var(--theme-default, #3949AB)); text-decoration: none; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }
.spq-actopt-link:hover { text-decoration: underline; }
body.dark-only .spq-actopt { background: var(--sf-raised, #1c2c50); border-color: var(--bd, #2b3d66); color: var(--tcd-strong, #e6ecf7); }
body.dark-only .spq-actopt:hover { background: var(--sf-raised, #223b66); border-color: #4b6394; }
body.dark-only .spq-actopt-desc { color: var(--tcd-muted, #94a3b8); }
body.dark-only .spq-actopt-ref { color: var(--tcd-faint, #64748b); }
body.dark-only .spq-actopt-preview { background: var(--sf-card, #101a37); }
/* #endregion */