/* --------------------------------------------------------------------------
   NAVEGACION
   --------------------------------------------------------------------------
   Todo lo que pinta includes/core/nav.php y los nav de perfil, en un solo
   archivo. Estaba repartido en tres (navbar.css, subnav-profile.css y el
   antiguo nav.css) por como fue apareciendo, no por diseno: las tres las
   cargaban exactamente las mismas 31 paginas.

   Orden interno: barra superior -> subnav de juego -> nav de perfil ->
   campana y dropdown de usuario. Es el mismo en que se cargaban antes;
   navbar y subnav-profile comparten .game-subnav-container y el segundo
   debe seguir yendo despues.
   -------------------------------------------------------------------------- */

/* ── BARRA SUPERIOR Y SUBNAV DE JUEGO ────────────────────────────────────── */

/* --------------------------------------------------------------------------
   5. NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
    border-bottom: 1px solid var(--border);
    background: rgba(11, 17, 30, .88);
    position: sticky;
    top: 0;
    z-index: var(--z-navbar);
}

.nav-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--sp-9);
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: 'Teko', sans-serif;
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    letter-spacing: .05em;
    text-decoration: none;
    color: var(--brand);
}

.logo span {
    color: var(--brand-accent);
}

.nav-links {
    display: flex;
    gap: 28px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-gray);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .09em;
    transition: color var(--t-normal);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-white);
}

.nav-links a.active {
    color: var(--brand-accent);
}

/* ── Games inline nav ───────────────────────────────────────────── */
.nav-separator {
    width: 1px;
    height: 14px;
    background: var(--border);
    flex-shrink: 0;
}

.nav-game-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.nav-game-soon {
    opacity: .4;
    pointer-events: none;
    cursor: default;
}

.nav-2xko-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #6b21a8, #a855f7);
    border-radius: var(--radius-xs);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-black);
    color: var(--text-white);
    letter-spacing: -.02em;
    flex-shrink: 0;
}

.btn-riot {
    background: var(--brand-accent);
    color: var(--text-white);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 9px 20px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--t-normal);
    display: inline-flex;
    align-items: center;
}

.btn-riot:hover  { background: var(--brand-accent-hover); }
.btn-riot:active { transform: scale(.95); }

@media (max-width: 800px) {
    .nav-container {
        height: auto;
        padding: var(--sp-5) var(--sp-7);
        flex-wrap: wrap;
        gap: var(--sp-4);
    }

    .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        gap: var(--sp-7);
        padding-bottom: var(--sp-1);
    }

    .nav-links::-webkit-scrollbar { height: 6px; }
}

/* --------------------------------------------------------------------------
   5b. GAME SUBNAV (visible en todas las páginas)
   -------------------------------------------------------------------------- */
.game-subnav {
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    position: sticky;
    top: 52px;
    z-index: var(--z-subnav);
}

.game-subnav-container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--sp-9);
    height: 44px;
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

.game-subnav-group {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    white-space: nowrap;
}

.game-subnav-links {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    white-space: nowrap;
}

.game-subnav-links::-webkit-scrollbar { height: 0; }

.game-subnav-links a {
    text-decoration: none;
    color: var(--text-gray);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: .02em;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    transition: color var(--t-normal), background var(--t-normal);
}

.game-subnav-links a:hover {
    color: var(--text-white);
    background: var(--bg-input);
}

.game-subnav-links a.active {
    color: var(--brand-accent);
    background: rgba(255, 70, 85, 0.08);
}

/* ── NAVEGACION DE PERFIL ────────────────────────────────────── */

/* --------------------------------------------------------------------------
   5c. PERFIL SIDE NAV (panel izquierdo en páginas de perfil)
   -------------------------------------------------------------------------- */
.perfil-side-nav {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.perfil-side-links {
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.perfil-side-links::-webkit-scrollbar { display: none; }

.perfil-side-link {
    display: block;
    text-decoration: none;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: var(--sp-4) var(--sp-7);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.perfil-side-link:hover {
    color: var(--text-white);
    border-bottom-color: var(--border);
}

.perfil-side-link.active {
    color: var(--text-white);
    border-bottom-color: var(--brand-accent);
    font-weight: var(--fw-bold);
}

.perfil-top-row .perfil-side-nav {
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-dark);
}

.perfil-top-row .perfil-summary {
    flex: 1;
    border-radius: 0;
    border: none;
    border-left: none;
}

/* Summary: header arriba, nav tab bar abajo */
.perfil-summary-split {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.perfil-summary-nav {
    width: 100%;
    border-top: 1px solid var(--border);
    border-right: none;
    background: var(--bg-input);
}

.perfil-summary-nav .perfil-side-nav {
    width: 100%;
    padding: 0;
}

.perfil-summary-nav .perfil-side-links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
}

/* Mismo estilo que el subnav de juego (.game-subnav-links a): tabs compactos
   con esquina redondeada y fondo tintado en el activo, en vez de celdas a todo
   el ancho con divisores y subrayado. */
.perfil-summary-nav .perfil-side-link {
    flex: 0 0 auto;
    text-align: center;
    padding: 5px var(--sp-5);
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    border-radius: var(--radius-sm);
    border-bottom: none;
}

.perfil-summary-nav .perfil-side-link:hover {
    color: var(--text-white);
    background: var(--bg-input);
}

.perfil-summary-nav .perfil-side-link.active {
    color: var(--brand-accent);
    background: rgba(255, 70, 85, .08);
}

.perfil-summary-main {
    flex: 1;
    padding: var(--sp-9);
    min-width: 0;
}

.perfil-page-row .perfil-side-nav {
    position: sticky;
    top: 52px;
    z-index: var(--z-sidenav);
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-dark);
    width: 100%;
    min-height: unset;
}

@media (max-width: 800px) {
    .game-subnav-container {
        height: auto;
        padding: var(--sp-3) var(--sp-7);
        flex-wrap: wrap;
        gap: var(--sp-3);
    }
    .perfil-top-row {
        flex-direction: column;
        position: static;
    }
    .perfil-page-row {
        flex-direction: column;
    }
    .perfil-side-nav,
    .perfil-page-row .perfil-side-nav {
        width: 100%;
        min-width: 0;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
        padding: var(--sp-3) var(--sp-5);
        position: static;
    }
    .perfil-side-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--sp-1);
    }
    .perfil-side-link {
        padding: var(--sp-2) var(--sp-4);
        font-size: var(--fs-xs);
    }
    .perfil-summary-nav .perfil-side-link {
        flex: 0 0 auto;
        border-right: none;
    }
}

/* --------------------------------------------------------------------------
   5e. SUBNAV PERFIL (cuenta / juego vinculado) — mantenido por compatibilidad
   -------------------------------------------------------------------------- */
.subnav-perfil {
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    position: sticky;
    top: 52px;
    z-index: var(--z-subnav);
}

.subnav-perfil-container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--sp-9);
    height: 48px;
    display: flex;
    align-items: center;
    gap: var(--sp-9);
}

.subnav-game-group {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    white-space: nowrap;
}

.subnav-game-tag {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-white);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-4);
    white-space: nowrap;
}

/* Subnav player search */
.subnav-search-wrap {
    position: relative;
}
.subnav-search-form {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    transition: border-color var(--t-fast);
    cursor: text;
}
.subnav-search-form:focus-within {
    border-color: var(--brand-accent);
}
.subnav-val-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.subnav-search-icon-svg {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color var(--t-fast);
}
.subnav-search-form:focus-within .subnav-search-icon-svg {
    color: var(--text-gray);
}
.subnav-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-white);
    font-size: var(--fs-sm);
    font-family: inherit;
    width: 110px;
    padding: 0;
    transition: width var(--t-normal) ease;
}
.subnav-search-input:focus {
    width: 200px;
}
.subnav-search-input::placeholder {
    color: var(--text-muted);
    font-weight: var(--fw-medium);
}
.subnav-search-input.subnav-search-error::placeholder {
    color: var(--brand-accent);
}

/* Feedback visible aunque el input tenga texto (el placeholder no se ve en ese caso) */
.subnav-search-wrap.subnav-search-error .subnav-search-form {
    border-color: var(--brand-accent);
    animation: subnavSearchShake .35s;
}

@keyframes subnavSearchShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Dropdown recientes */
.subnav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
}
.subnav-dropdown.open { display: block; }
.subnav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px 14px;
    font-size: var(--fs-sm);
    color: var(--text-gray);
    cursor: pointer;
    transition: background .1s;
    white-space: nowrap;
}
.subnav-dropdown-item:hover {
    background: var(--bg-input);
    color: var(--text-white);
}

.subnav-mode-select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-white);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    font-family: inherit;
    border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-3);
    cursor: pointer;
    outline: none;
    transition: border-color var(--t-fast);
}

.subnav-mode-select:hover,
.subnav-mode-select:focus {
    border-color: var(--brand-accent);
}

.subnav-links {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    white-space: nowrap;
}

.subnav-links::-webkit-scrollbar { height: 0; }

.subnav-links a {
    text-decoration: none;
    color: var(--text-gray);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: .02em;
    padding: var(--sp-1) 0;
    border-bottom: 2px solid transparent;
    transition: color var(--t-normal), border-color var(--t-normal);
}

.subnav-links a:hover { color: var(--text-white); }

.subnav-links a.active {
    color: var(--brand-accent);
    border-bottom-color: var(--brand-accent);
}

@media (max-width: 800px) {
    .subnav-perfil-container {
        height: auto;
        padding: var(--sp-4) var(--sp-7);
        flex-wrap: wrap;
        gap: var(--sp-4);
    }

    .subnav-links {
        width: 100%;
        gap: 18px;
        padding-bottom: 2px;
    }
}

/* ── CAMPANA DE NOTIFICACIONES Y DROPDOWN DE USUARIO ────────────────────────────────────── */

/* --------------------------------------------------------------------------
   NAV USER DROPDOWN
   -------------------------------------------------------------------------- */

/* ── Grupo derecho (campana + usuario) ── */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* ── Botón campana ── */
.nav-notif-wrap {
    position: relative;
}
.nav-notif-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    position: relative;
}
.nav-notif-btn:hover {
    color: var(--text-gray);
    background: var(--bg-hover);
    border-color: var(--border-hover);
}
.nav-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    background: var(--brand-accent);
    color: var(--text-white);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    line-height: 16px;
    text-align: center;
    padding: 0 var(--sp-1);
    pointer-events: none;
}

/* ── Dropdown notificaciones ── */
.nav-notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s;
    z-index: var(--z-notif);
    overflow: hidden;
}
.nav-notif-wrap.open .nav-notif-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.nav-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-6) var(--sp-7) var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-gray);
    border-bottom: 1px solid var(--border);
}
.nav-notif-mark-all {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--brand-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    opacity: .85;
    transition: opacity var(--t-fast);
}
.nav-notif-mark-all:hover { opacity: 1; }
.nav-notif-list {
    max-height: 340px;
    overflow-y: auto;
}
.nav-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: 36px 20px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Item de notificación */
.nav-notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-7);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
    color: inherit;
}
.nav-notif-item:last-child { border-bottom: none; }
.nav-notif-item:hover { background: var(--bg-elevated); }
.nav-notif-item.unread { background: rgba(var(--brand-accent-rgb,255,70,85),.05); }
.nav-notif-icon {
    font-size: var(--fs-xl);
    flex-shrink: 0;
    margin-top: 1px;
}
.nav-notif-body { flex: 1; min-width: 0; }
.nav-notif-text {
    font-size: var(--fs-sm);
    color: var(--text-gray);
    line-height: 1.4;
}
.nav-notif-time {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-top: 3px;
}
.nav-notif-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background: var(--brand-accent);
    flex-shrink: 0;
    margin-top: 5px;
}
.nav-notif-item:not(.unread) .nav-notif-dot { opacity: 0; }

.nav-user-wrap {
    position: relative;
}

.nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
}

.nav-user-avatar-sm {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-circle);
    background: var(--border-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extrabold);
    overflow: hidden;
    flex-shrink: 0;
}
.nav-user-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

.nav-chevron {
    opacity: .7;
    transition: transform var(--t-normal);
}
.nav-user-wrap:hover .nav-chevron,
.nav-user-wrap.open .nav-chevron {
    transform: rotate(180deg);
}

.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 210px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    padding: var(--sp-2) 0;
    /* hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--t-fast), transform var(--t-fast);
}

/* show on hover OR .open (JS fallback) */
.nav-user-wrap:hover .nav-user-dropdown,
.nav-user-wrap.open .nav-user-dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* bridge gap so mouse can travel from button to dropdown */
.nav-user-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 12px;
}

.nav-dd-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6) var(--sp-4);
}

.nav-dd-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    font-weight: var(--fw-extrabold);
    color: var(--text-muted);
    flex-shrink: 0;
    overflow: hidden;
}
.nav-dd-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nav-dd-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-white);
    line-height: 1.2;
}
.nav-dd-email {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.2;
}

.nav-dd-divider {
    height: 1px;
    background: var(--border);
    margin: 5px 0;
}

.nav-dd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-gray);
    text-decoration: none;
    transition: background .12s, color .12s;
    cursor: pointer;
}
.nav-dd-item svg { opacity: .55; flex-shrink: 0; }
.nav-dd-item:hover {
    background: var(--bg-input);
    color: var(--text-white);
}
.nav-dd-item:hover svg { opacity: .85; }

.nav-dd-logout { color: #ff5566; }
.nav-dd-logout svg { opacity: .7; }
.nav-dd-logout:hover { background: rgba(255,70,85,.08); color: #ff4455; }

.nav-dd-premium {
    color: #c9a227;
    font-weight: var(--fw-bold);
    background: rgba(201,162,39,.06);
}
.nav-dd-premium:hover {
    background: rgba(201,162,39,.14);
    color: #e0b830;
}

.nav-dd-small {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    padding: 7px 14px;
    color: var(--text-muted);
}
.nav-dd-small:hover { color: var(--text-gray); }

/* ══════════════════════════════════════════════════════════════════════
   CUSTOM SELECT — dropdown propio con el mismo estilo que el del nav.
   Mejora progresiva de cualquier <select class="cselect">: el JS oculta
   el nativo (que sigue en el DOM sincronizado) y dibuja esta UI.
   ══════════════════════════════════════════════════════════════════════ */
.cselect { position: relative; display: inline-block; }

/* El <select> nativo se oculta pero sigue presente para value + change. */
.cselect > select { display: none; }

.cselect-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    min-width: 140px;
    padding: 7px 12px;
    background: var(--bg-input);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-white);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--t-fast);
}

.cselect-trigger:hover { background: rgba(255, 255, 255, .1); }

.cselect.open .cselect-trigger { background: rgba(255, 255, 255, .14); }
/* Filtro activo (valor distinto del por defecto): acento de marca */
.cselect.active .cselect-trigger { background: var(--brand-accent); color: var(--text-white); }
.cselect.active .cselect-chevron { opacity: .9; }

.cselect-chevron {
    flex-shrink: 0;
    transition: transform var(--t-fast);
    opacity: .6;
}

.cselect.open .cselect-chevron { transform: rotate(180deg); }

.cselect-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    padding: var(--sp-2) 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.cselect.open .cselect-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.cselect-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-gray);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast);
}

.cselect-option:hover { background: var(--bg-input); color: var(--text-white); }

.cselect-option.selected {
    color: var(--brand-accent);
    background: rgba(255, 70, 85, .08);
}