/* Palette controls stay neutral so customers can compare the theme swatches. */
#frontend-theme-toggle,
#frontend-theme-picker,
#frontend-theme-picker * { box-sizing: border-box; }
#frontend-theme-toggle {
    position: fixed;
    z-index: 1050;
    top: 50%;
    right: 0;
    left: auto;
    display: none !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 44px;
    min-height: 108px;
    margin: 0;
    padding: 13px 10px;
    transform: translateY(-50%);
    border: 1px solid #526580 !important;
    border-right: 0 !important;
    border-radius: 14px 0 0 14px !important;
    background: #f8fafc !important;
    color: #18243a !important;
    box-shadow: -3px 4px 18px #08122626 !important;
    font: 700 11px/1.2 "Lato", "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .04em;
    text-transform: none;
    cursor: pointer;
}
/* Hide the sidebar slot too so it does not leave an empty shortcut tile. */
.lobby-theme-slot { display: none !important; }
#frontend-theme-toggle:hover,
#frontend-theme-toggle[aria-expanded="true"] { background: #eaf0f8 !important; }
#frontend-theme-toggle .theme-picker-trigger-label { color: inherit !important; writing-mode: vertical-rl; }
#frontend-theme-toggle .theme-picker-trigger-icon { display: grid; grid-template-columns: repeat(2, 7px); gap: 3px; }
#frontend-theme-toggle .theme-picker-trigger-icon span { width: 7px; height: 7px; border-radius: 2px; background: #2260d2; }
#frontend-theme-toggle .theme-picker-trigger-icon span:nth-child(2) { background: #ffcc21; }
#frontend-theme-toggle .theme-picker-trigger-icon span:nth-child(3) { background: #ff8b14; }
#frontend-theme-toggle .theme-picker-trigger-icon span:nth-child(4) { background: #ce2026; }
#frontend-theme-picker[hidden] { display: none !important; }
#frontend-theme-picker {
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 1051;
    top: 50%;
    right: 56px;
    left: auto;
    width: 326px;
    max-width: calc(100vw - 72px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0;
    padding: 22px 18px 16px;
    overflow: hidden;
    overscroll-behavior: contain;
    transform: translateY(-50%);
    border: 1px solid #afbdd0 !important;
    border-radius: 20px !important;
    background: #f8fafc !important;
    color: #18243a !important;
    box-shadow: 0 18px 60px #07152b40 !important;
    font: 14px/1.5 "Lato", "Segoe UI", Arial, sans-serif !important;
    text-align: left;
    color-scheme: light;
    scrollbar-width: thin;
    scrollbar-color: #8b9bb2 #edf2f8;
}
#frontend-theme-picker .theme-picker-heading { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 9px; }
#frontend-theme-picker .theme-picker-eyebrow { display: block; margin: 0 0 5px; color: #526581 !important; font-size: 9px; font-weight: 800; line-height: 1.3; letter-spacing: .14em; }
#frontend-theme-picker h2 { margin: 0; color: #18243a !important; font: 800 21px/1.25 "Lato", "Segoe UI", Arial, sans-serif !important; letter-spacing: -.025em; text-transform: none; }
#frontend-theme-picker .theme-picker-close { flex: 0 0 32px; width: 32px; min-height: 32px; margin: 0; padding: 0; border: 1px solid #bfcbdb !important; border-radius: 10px !important; background: #fff !important; color: #30435d !important; font: 400 25px/1 Arial, sans-serif !important; cursor: pointer; }
#frontend-theme-picker .theme-picker-close:hover { background: #eaf0f8 !important; }
#frontend-theme-picker .theme-picker-intro { flex-shrink: 0; margin: 0 0 12px; color: #526581 !important; font: 12px/1.6 "Lato", "Segoe UI", Arial, sans-serif !important; }
#frontend-theme-picker .theme-picker-options { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-height: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8b9bb2 #edf2f8; scroll-padding: 4px; }
#frontend-theme-picker .theme-picker-option {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 65px;
    margin: 0;
    padding: 10px;
    border: 1px solid #c1cddd !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #18243a !important;
    box-shadow: none !important;
    font: inherit !important;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    cursor: pointer;
}
#frontend-theme-picker .theme-picker-option:hover { background: #edf3fa !important; border-color: #7e91ac !important; }
#frontend-theme-picker .theme-picker-option[aria-checked="true"] { border-color: #365e91 !important; background: #eaf1fb !important; box-shadow: inset 0 0 0 1px #365e91 !important; }
#frontend-theme-picker .theme-picker-swatch { display: flex; flex: 0 0 48px; width: 48px; height: 37px; overflow: hidden; border: 1px solid #18243a26; border-radius: 9px; transform: rotate(-4deg); }
#frontend-theme-picker .theme-picker-swatch span { flex: 1; }
#frontend-theme-picker .theme-picker-swatch span:first-child { flex: 1.35; }
#frontend-theme-picker .theme-picker-option-label { flex: 1; min-width: 0; }
#frontend-theme-picker .theme-picker-option-label strong { display: block; color: #18243a !important; font: 800 14px/1.35 "Lato", "Segoe UI", Arial, sans-serif !important; }
#frontend-theme-picker .theme-picker-option-label small { display: block; margin-top: 3px; color: #526581 !important; font: 12px/1.4 "Lato", "Segoe UI", Arial, sans-serif !important; }
#frontend-theme-picker .theme-picker-check { display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: #244d80; color: #fff !important; font: 700 11px/1 Arial, sans-serif !important; opacity: 0; }
#frontend-theme-picker .theme-picker-option[aria-checked="true"] .theme-picker-check { opacity: 1; }
#frontend-theme-picker .theme-picker-status { flex-shrink: 0; min-height: 32px; margin: 14px 2px 0; color: #526581 !important; font: 11px/1.5 "Lato", "Segoe UI", Arial, sans-serif !important; }
#frontend-theme-toggle:focus-visible,
#frontend-theme-picker button:focus-visible { outline: 3px solid #1d5f9e !important; outline-offset: 3px !important; }
@media (max-width: 480px) {
    #frontend-theme-toggle { width: 38px; min-height: 102px; padding: 12px 7px; }
    #frontend-theme-picker { right: 46px; left: auto; max-width: calc(100vw - 56px); padding: 18px 13px 12px; border-radius: 16px !important; }
    #frontend-theme-picker h2 { font-size: 19px !important; }
    #frontend-theme-picker .theme-picker-option { gap: 9px; padding: 9px; }
    #frontend-theme-picker .theme-picker-swatch { flex-basis: 42px; width: 42px; }
}
@media (max-width: 340px) {
    #frontend-theme-picker .theme-picker-option-label small { display: none; }
    #frontend-theme-picker .theme-picker-option { min-height: 57px; }
    #frontend-theme-picker .theme-picker-swatch { flex-basis: 34px; width: 34px; }
}