#zjm-theme-switcher {
    position: relative;
    flex: 0 0 auto;
    font: 14px/1.4 system-ui, sans-serif;
}
#zjm-theme-switcher > summary {
    display: flex;
    list-style: none;
    cursor: pointer;
}
#zjm-theme-switcher > summary::-webkit-details-marker { display: none; }
#zjm-theme-switcher > summary:focus-visible,
#zjm-theme-switcher button:focus-visible { outline: 2px solid var(--brand, currentColor); outline-offset: 2px; }
#zjm-theme-switcher[open] > summary { color: var(--brand, currentColor); }
#zjm-theme-switcher .zjm-theme-options {
    position: absolute;
    inset: calc(100% + 8px) 0 auto auto;
    z-index: 30;
    width: min(184px, 47vw);
    max-height: min(340px, 60vh);
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--line, #ddd);
    border-radius: 10px;
    background: var(--surface, Canvas);
    color: var(--ink, CanvasText);
    box-shadow: 0 6px 20px #0002;
}
#zjm-theme-switcher .zjm-theme-options button {
    display: block;
    width: 100%;
    padding: 8px;
    min-height: 40px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    overflow-wrap: anywhere;
}
#zjm-theme-switcher .zjm-theme-options button:hover { background: var(--soft, ButtonFace); }
#zjm-theme-switcher button[aria-current="true"] {
    background: var(--brand-soft, ButtonFace);
    color: var(--brand, CanvasText);
    font-weight: 600;
}
#zjm-theme-switcher button[aria-current="true"]::after { content: " ✓"; }
#zjm-theme-switcher.zjm-theme-standalone { width: fit-content; margin: 10px 12px 10px auto; }
@media (max-width: 600px) {
    .topbar:has(#zjm-theme-switcher) .top-left,
    .topbar:has(#zjm-theme-switcher) .brand { min-width: 0; }
    .topbar:has(#zjm-theme-switcher) .brand > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .top-actions #zjm-theme-switcher .zjm-theme-options { right: -32px; }
}