/* Course picker (sidebar race form) — command-palette styling.
   One calm surface. The course NAME is the hero of every row; cup is secondary,
   game source tertiary, badges/stars/headers/scrollbar are quiet support.
   Uses the app's --mk-* dark palette (from refresh.css). Every text element
   pins its own line-height to defeat a global oversized button line-height. */

#sidebar-course-picker { margin-bottom: 14px; }

.cp-field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mk-muted-2, #6f7785);
    margin-bottom: 6px;
}

.course-picker { position: relative; }
.course-picker-control { position: relative; }

/* ---- Closed trigger: two-line, always informative ---- */
.course-picker .course-picker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 56px 9px 12px;
    background: var(--mk-surface-2, #181c26);
    border: 1px solid var(--mk-border, #232838);
    border-radius: 9px;
    /* color pinned !important to beat the global `button{color:#555!important}`
       trap in assets/css/main.css; child spans set their own colour but the
       button's own text colour (and the hover/active red traps) need pinning. */
    color: var(--mk-text, #f1f3f8) !important;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.course-picker .course-picker-trigger:hover,
.course-picker .course-picker-trigger[aria-expanded="true"] {
    border-color: var(--mk-accent, #818cf8);
    background: var(--mk-surface-3, #232836);
    color: var(--mk-text, #f1f3f8) !important;
}
/* Pressed: main.css `button:hover:active{background:rgba(206,27,40,.25)}`
   would flash a red fill on click — pin the intended surface instead. */
.course-picker .course-picker-trigger:hover:active {
    background: var(--mk-surface-3, #232836) !important;
    color: var(--mk-text, #f1f3f8) !important;
}

.course-picker .cp-icon { font-size: 1.05rem; flex: 0 0 auto; line-height: 1; opacity: 0.9; }

.course-picker .cp-trigger-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.course-picker .cp-trigger-primary {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mk-text, #f1f3f8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.course-picker .cp-trigger-primary.cp-empty-primary { font-weight: 500; color: var(--mk-muted, #a4adbd); }

.course-picker .cp-trigger-secondary {
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--mk-muted-2, #6f7785);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-picker .cp-caret {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--mk-muted-2, #6f7785); font-size: 0.7rem; line-height: 1; pointer-events: none;
}

.course-picker .cp-clear {
    position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; line-height: 18px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(148, 163, 184, 0.20);
    /* The "x" is direct text on the button, so the global
       `button{color:#555!important}` trap in main.css renders it gray. Pin
       across base/hover/active so it stays legible. */
    color: var(--mk-text, #f1f3f8) !important;
    font-size: 0.9rem; cursor: pointer;
}
.course-picker .cp-clear:hover {
    background: rgba(239, 68, 68, 0.28);
    color: var(--mk-text, #f1f3f8) !important;
}
/* Pin the pressed state: defeat main.css `button:hover:active` red bg + red text. */
.course-picker .cp-clear:hover:active {
    background: rgba(239, 68, 68, 0.40) !important;
    color: var(--mk-text, #f1f3f8) !important;
}

/* ---- Open panel: a single unified surface ---- */
.course-picker .course-picker-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: 0; right: 0;
    max-height: 360px;
    overflow-y: auto;
    padding: 0;
    background: var(--mk-surface-2, #181c26);
    border: 1px solid var(--mk-border-strong, #343a4f);
    border-radius: 11px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    /* Quiet scrollbar — present, never a focal point. */
    scrollbar-width: thin;
    scrollbar-color: var(--mk-border-strong, #343a4f) transparent;
}
.course-picker .course-picker-panel::-webkit-scrollbar { width: 9px; }
.course-picker .course-picker-panel::-webkit-scrollbar-track { background: transparent; }
.course-picker .course-picker-panel::-webkit-scrollbar-thumb {
    background: var(--mk-border-strong, #343a4f);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.course-picker .course-picker-panel::-webkit-scrollbar-thumb:hover { background: var(--mk-muted-2, #6f7785); background-clip: padding-box; }

/* Integrated, borderless search — sits on the panel surface, sticky on scroll. */
.course-picker .cp-search-wrap {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px;
    background: var(--mk-surface-2, #181c26);
    border-bottom: 1px solid var(--mk-border, #232838);
}
.course-picker .cp-search-icon { font-size: 0.82rem; opacity: 0.55; line-height: 1; flex: 0 0 auto; }
.course-picker .course-picker-search {
    flex: 1 1 auto; min-width: 0;
    padding: 0; margin: 0;
    background: transparent; border: none; outline: none;
    color: var(--mk-text, #f1f3f8);
    font-size: 0.92rem; line-height: 1.4;
}
.course-picker .course-picker-search::placeholder { color: var(--mk-muted-2, #6f7785); }
.course-picker .cp-count { flex: 0 0 auto; font-size: 0.7rem; color: var(--mk-muted-2, #6f7785); line-height: 1.3; }

/* Inline-field clear button (shared with the desktop palette). */
.course-picker .cp-search-clear {
    flex: 0 0 auto;
    width: 22px; height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(148, 163, 184, 0.20);
    color: var(--mk-text, #f1f3f8) !important;
    font-size: 0.95rem; line-height: 1;
}
.course-picker .cp-search-clear:hover { background: rgba(148, 163, 184, 0.34); }

.course-picker .cp-results { padding: 6px; }

/* ---- Sections: quiet organizational anchors ---- */
.course-picker .cp-section { margin-bottom: 4px; }
.course-picker .cp-section:last-child { margin-bottom: 0; }
.course-picker .cp-section-title {
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: var(--mk-muted-2, #6f7785);
    opacity: 0.75;
    padding: 8px 8px 3px;
}

/* ---- Rows: identical structure everywhere ---- */
.course-picker .cp-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 3px;                       /* room for the selected accent bar */
    border-left: 3px solid transparent;
    border-radius: 7px;
    transition: background 0.08s ease;
}
.course-picker .cp-row.cp-active { background: var(--mk-surface-3, #232836); }   /* hover / keyboard */
.course-picker .cp-row.cp-selected {                                            /* persistent identity */
    background: var(--mk-accent-soft, rgba(129, 140, 248, 0.14));
    border-left-color: var(--mk-accent, #818cf8);
}
.course-picker .cp-row.cp-selected.cp-active { background: var(--mk-accent-strong-soft, rgba(99, 102, 241, 0.30)); }

.course-picker .cp-course {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
}

/* Counter-pin against the main.css button trap (`button{color:#555!important}`,
   `:hover{color:#ce1b28!important}`, `:hover:active{background:rgba(206,27,40,0.25)}`).
   Without this, every course-row press flashes the site-red wash and the row
   button's own color chain goes gray/red. Row highlight is owned by .cp-row,
   so the button stays transparent across base / hover / pressed. */
.course-picker .cp-course,
.cp-modal .cp-course,
.course-picker .cp-course:hover,
.cp-modal .cp-course:hover,
.course-picker .cp-course:hover:active,
.cp-modal .cp-course:hover:active {
    background: transparent !important;
    color: var(--mk-text, #f1f3f8) !important;
}

/* Line 1: name (hero) + inline NEW badge — one unified line, no layout shift. */
.course-picker .cp-line1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.course-picker .cp-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mk-text, #f1f3f8);          /* brightest text in the row */
}
.course-picker .cp-hl { background: transparent; color: var(--mk-accent, #818cf8); font-weight: 700; }

.course-picker .cp-badge {
    flex: 0 0 auto;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 4px;
    color: var(--mk-good, #34d399);
    background: rgba(52, 211, 153, 0.13);
}

/* Line 2: cup (secondary) · game source (tertiary, subtle). */
.course-picker .cp-sub { display: flex; align-items: center; gap: 7px; min-width: 0; line-height: 1.2; }
.course-picker .cp-cup {
    display: block;
    line-height: 1.25;             /* pin: the row button has a huge global line-height */
    font-size: 0.74rem;
    color: var(--mk-muted, #a4adbd);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.course-picker .cp-origin {
    flex: 0 0 auto;
    font-size: 0.68rem;
    color: var(--mk-muted-2, #6f7785);
    opacity: 0.85;
}
.course-picker .cp-origin::before { content: "· "; }

/* Selected check — small accent confirmation before the star. */
.course-picker .cp-check { flex: 0 0 auto; color: var(--mk-accent, #818cf8); font-size: 0.8rem; line-height: 1; padding: 0 2px; }

/* Favorite star — subtle by default, brighter on hover/active, gold when on.
   color uses !important: a global `button { color: ... !important }` in the
   site CSS otherwise forces the star gray and defeats the gold favorite state. */
.course-picker .cp-fav {
    flex: 0 0 auto;
    width: 30px; height: 30px; padding: 0;
    background: transparent; border: none; border-radius: 6px;
    color: var(--mk-muted, #a4adbd) !important;
    font-size: 0.95rem; line-height: 1; cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.1s ease, color 0.1s ease;
}
.course-picker .cp-row:hover .cp-fav,
.course-picker .cp-row.cp-active .cp-fav { opacity: 1; }
.course-picker .cp-fav:hover { color: var(--mk-text, #f1f3f8) !important; opacity: 1; }
.course-picker .cp-fav.is-fav { color: #f59e0b !important; opacity: 1; }
/* Pin the pressed state: defeat main.css `button:hover:active` red wash. */
.course-picker .cp-fav:hover:active,
.cp-modal .cp-fav:hover:active {
    background: transparent !important;
}

.course-picker .cp-noresult {
    padding: 22px 12px;
    text-align: center;
    color: var(--mk-muted, #a4adbd);
    font-size: 0.86rem;
    line-height: 1.4;
}

/* Course badge in race history (date cell / mobile card). */
.race-course-label { color: var(--mk-muted, #a4adbd); }

/* =====================================================================
   DESKTOP COMMAND PALETTE (overlay, >= 760px) — a Spotlight-style course
   browser. Created in <body>, so the modal box also carries the
   `.course-picker` class to inherit the shared row styles above.
   Tuned for density + clarity: compact rows, clearly-separated states,
   readable metadata, one accent gradient, restrained chrome.
   ===================================================================== */
.cp-modal-backdrop {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 8vh 16px 16px;
    background: rgba(5, 6, 9, 0.66);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overscroll-behavior: contain;
    animation: cpFade 0.12s ease;
}
@keyframes cpFade { from { opacity: 0; } to { opacity: 1; } }

.cp-modal.course-picker {
    position: relative;
    width: min(640px, 93vw);
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    background: var(--mk-surface-2, #181c26);
    border: 1px solid var(--mk-border-strong, #343a4f);
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    overscroll-behavior: contain;
    animation: cpRise 0.14s ease;
}
@keyframes cpRise { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* A single thin accent line — the one playful flourish. */
.cp-modal.course-picker::before {
    content: ""; display: block; height: 3px;
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 50%, #34d399 100%);
}

/* ---- Search: a contained, premium field ---- */
.cp-modal .cp-modal-header {
    display: flex; align-items: center; gap: 10px;
    margin: 13px 13px 4px;
    padding: 11px 14px;
    background: var(--mk-surface, #12151d);
    border: 1px solid var(--mk-border, #232838);
    border-radius: 11px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.cp-modal .cp-modal-header:focus-within {
    border-color: var(--mk-accent, #818cf8);
    box-shadow: 0 0 0 3px var(--mk-accent-soft, rgba(129, 140, 248, 0.18));
}
.cp-modal .cp-modal-icon { font-size: 1.02rem; opacity: 0.6; line-height: 1; flex: 0 0 auto; }
.cp-modal .course-picker-search {
    flex: 1 1 auto; min-width: 0;
    padding: 0; margin: 0; border: none; outline: none; background: transparent;
    color: var(--mk-text, #f1f3f8);
    font-size: 1.1rem; font-weight: 500; line-height: 1.4;
}
.cp-modal .course-picker-search::placeholder { color: var(--mk-muted-2, #6f7785); font-weight: 400; }
.cp-modal .cp-esc {
    flex: 0 0 auto;
    font-size: 0.6rem; font-family: inherit; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--mk-muted-2, #6f7785);
    background: var(--mk-surface-3, #232836);
    border-radius: 4px; padding: 3px 6px; line-height: 1;
}

/* ---- Quick filters (with counts) + result count ---- */
.cp-modal .cp-modal-subbar {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 14px 6px;
}
.cp-modal .cp-filters { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; min-width: 0; }
.cp-modal .cp-filter {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    font-size: 0.76rem; font-weight: 600; line-height: 1.2;
    color: var(--mk-muted, #a4adbd) !important;          /* readable when inactive */
    background: var(--mk-surface-3, #232836);
    border: 1px solid transparent; border-radius: 999px; cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}
.cp-modal .cp-filter:hover { color: var(--mk-text, #f1f3f8) !important; }
/* Pin the pressed state: defeat main.css `button:hover:active` red wash.
   `.cp-filter.is-on` (0,3,0) already outranks the trap; the inactive chip
   (0,2,0) does not, so pin its surface here. */
.cp-modal .cp-filter:hover:active {
    background: var(--mk-surface-3, #232836) !important;
}
.cp-modal .cp-filter:focus-visible { outline: 2px solid var(--mk-accent, #818cf8); outline-offset: 2px; }
.cp-modal .cp-filter.is-on {
    color: #fff !important;
    background: var(--mk-accent-strong, #6366f1);
    border-color: var(--mk-accent, #818cf8);
}
.cp-modal .cp-filter-n {
    font-size: 0.66rem; font-weight: 700;
    color: var(--mk-muted-2, #6f7785);
    background: rgba(0, 0, 0, 0.22);
    border-radius: 999px; padding: 0 5px; min-width: 14px; text-align: center;
}
.cp-modal .cp-filter.is-on .cp-filter-n { color: #fff; background: rgba(255, 255, 255, 0.22); }
.cp-modal .cp-count { flex: 0 0 auto; font-size: 0.74rem; color: var(--mk-muted, #a4adbd); }

/* ---- Empty-state guidance ---- */
.cp-modal .cp-hint {
    padding: 2px 14px 8px;
    font-size: 0.76rem; line-height: 1.5;
    color: var(--mk-muted, #a4adbd);
}
.cp-modal .cp-hint b { color: var(--mk-text, #f1f3f8); font-weight: 600; }
.cp-modal .cp-recent-searches {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 0 14px 8px;
}
.cp-modal .cp-rs-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mk-muted-2, #6f7785); margin-right: 2px; }
.cp-modal .cp-rs-chip {
    padding: 4px 10px; font-size: 0.76rem; line-height: 1.2;
    color: var(--mk-muted, #a4adbd) !important;
    background: var(--mk-surface-3, #232836);
    border: none; border-radius: 999px; cursor: pointer;
}
.cp-modal .cp-rs-chip:hover { color: var(--mk-text, #f1f3f8) !important; }
/* Pin the pressed state: defeat main.css `button:hover:active` red wash. */
.cp-modal .cp-rs-chip:hover:active {
    background: var(--mk-surface-3, #232836) !important;
}

/* ---- Clear (x) inside the search field ---- */
.cp-modal .cp-search-clear { width: 22px; height: 22px; }

/* ---- Two-column body: results (left) + preview (right) ---- */
.cp-modal .cp-modal-body { display: flex; gap: 12px; min-height: 0; flex: 1 1 auto; padding: 2px 12px 12px; }
.cp-modal .cp-results {
    flex: 1 1 auto; min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--mk-muted-2, #6f7785) transparent;
}
.cp-modal .cp-results::-webkit-scrollbar { width: 12px; }
.cp-modal .cp-results::-webkit-scrollbar-track { background: transparent; }
.cp-modal .cp-results::-webkit-scrollbar-thumb {
    background: var(--mk-muted-2, #6f7785);    /* higher contrast = discoverable */
    border-radius: 7px; border: 3px solid transparent; background-clip: padding-box;
}
.cp-modal .cp-results::-webkit-scrollbar-thumb:hover { background: var(--mk-muted, #a4adbd); background-clip: padding-box; }

/* Cup headers: clear presence (accent tick + bright label), sticky. */
.cp-modal .cp-section-title {
    position: sticky; top: -2px; z-index: 1;
    display: flex; align-items: center; gap: 7px;
    margin: 6px 0 2px;
    padding: 6px 8px 5px;
    font-size: 0.69rem; font-weight: 700; letter-spacing: 0.08em;
    color: var(--mk-text, #f1f3f8);
    background: var(--mk-surface-2, #181c26);
}
.cp-modal .cp-section-title::before {
    content: ""; flex: 0 0 auto; width: 3px; height: 11px; border-radius: 2px;
    background: var(--mk-accent, #818cf8);
}

/* Rows: dense; states clearly separated (hover faint, selected vivid + bar). */
.cp-modal .cp-row { padding-left: 0; margin-bottom: 1px; border-left: 3px solid transparent; }
.cp-modal .cp-course { padding: 6px 8px; gap: 1px; }
.cp-modal .cp-name { font-size: 0.93rem; }
.cp-modal .cp-cup { font-size: 0.74rem; color: var(--mk-muted, #a4adbd); }
.cp-modal .cp-row.cp-active { background: var(--mk-surface-3, #232836); }
.cp-modal .cp-row.cp-selected {
    background: rgba(99, 102, 241, 0.20);
    border-left-color: var(--mk-accent, #818cf8);
}
.cp-modal .cp-row.cp-selected .cp-name { color: #fff; }
.cp-modal .cp-row.cp-selected.cp-active { background: rgba(99, 102, 241, 0.30); }
.cp-modal .cp-check { color: var(--mk-accent, #818cf8); font-size: 0.9rem; }
.cp-modal .cp-fav { width: 30px; height: 30px; border-radius: 8px; }
.cp-modal .cp-fav:focus-visible { outline: 2px solid var(--mk-accent, #818cf8); outline-offset: -2px; }

/* ---- Preview: title-first, compact, readable ---- */
.cp-modal .cp-preview { flex: 0 0 208px; overflow-y: auto; overscroll-behavior: contain; }
.cp-modal .cp-preview-empty {
    background: var(--mk-surface, #12151d);
    border-radius: 11px;
    padding: 28px 16px; text-align: center;
    color: var(--mk-muted, #a4adbd);
}
.cp-modal .cp-preview-empty .cp-preview-emoji { font-size: 1.9rem; line-height: 1; }
.cp-modal .cp-preview-empty p { font-size: 0.8rem; line-height: 1.5; margin: 11px 0 0; }

.cp-modal .cp-pv {
    background: var(--mk-surface, #12151d);
    border-radius: 11px;
    padding: 15px 15px 14px;
}
.cp-modal .cp-pv-name {
    font-size: 1.12rem; font-weight: 700; line-height: 1.25;
    color: var(--mk-text, #f1f3f8);
    margin-bottom: 9px;
}
.cp-modal .cp-pv-status {
    display: inline-block;
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--mk-muted, #a4adbd);
    background: var(--mk-surface-3, #232836);
    border-radius: 5px; padding: 3px 7px; margin-bottom: 14px;
}
.cp-modal .cp-pv-status.is-new { color: var(--mk-good, #34d399); background: rgba(52, 211, 153, 0.14); }
.cp-modal .cp-pv-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.cp-modal .cp-pv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; line-height: 1.35; }
.cp-modal .cp-pv-key { color: var(--mk-muted-2, #6f7785); flex: 0 0 auto; }
.cp-modal .cp-pv-val { color: var(--mk-text, #f1f3f8); text-align: right; }
.cp-modal .cp-preview-fav {
    width: 100%; margin-bottom: 7px; padding: 8px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    color: var(--mk-muted, #a4adbd) !important;
    background: var(--mk-surface-3, #232836);
    border: 1px solid transparent; border-radius: 8px;
}
.cp-modal .cp-preview-fav:hover { color: var(--mk-text, #f1f3f8) !important; }
/* Pin the pressed state: defeat main.css `button:hover:active` red wash. */
.cp-modal .cp-preview-fav:hover:active {
    background: var(--mk-surface-3, #232836) !important;
}
.cp-modal .cp-preview-fav.is-fav { color: #f59e0b !important; background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.35); }
.cp-modal .cp-preview-select {
    display: block; width: 100%; padding: 9px;
    font-size: 0.83rem; font-weight: 700; cursor: pointer;
    color: #fff !important;
    background: var(--mk-accent-strong, #6366f1);
    border: none; border-radius: 8px;
    transition: filter 0.1s ease;
}
.cp-modal .cp-preview-select:hover { filter: brightness(1.1); }
/* Pin the pressed state: defeat main.css `button:hover:active` red wash. */
.cp-modal .cp-preview-select:hover:active {
    background: var(--mk-accent-strong, #6366f1) !important;
}
.cp-modal .cp-preview-select.is-selected { color: var(--mk-good, #34d399) !important; background: rgba(52, 211, 153, 0.12); }
.cp-modal .cp-preview-select.is-selected:hover:active { background: rgba(52, 211, 153, 0.12) !important; }

/* ---- Footer keyboard legend: barely there ---- */
.cp-modal .cp-modal-foot {
    padding: 7px 14px 10px;
    text-align: center;
    font-size: 0.67rem; color: var(--mk-muted-2, #6f7785);
    opacity: 0.55;
}
.cp-modal .cp-modal-foot kbd {
    font-family: inherit; font-size: 0.65rem;
    background: transparent;
    border: 1px solid var(--mk-border, #232838);
    border-radius: 4px; padding: 0 4px; margin: 0 1px;
}

@media (max-height: 560px) {
    .cp-modal .cp-preview { display: none; }
}