.drs-theme-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.drs-theme-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: .45rem .7rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
.drs-theme-switcher__toggle:hover,
.drs-theme-switcher__toggle.is-open { background: rgba(255,255,255,.17); }

.drs-theme-switcher__panel {
    position: absolute;
    top: calc(100% + .65rem);
    right: 0;
    z-index: 1200;
    width: 330px;
    padding: .75rem;
    border: 1px solid var(--drs-border);
    border-radius: var(--drs-radius-md);
    background: var(--drs-surface);
    color: var(--drs-text);
    box-shadow: var(--drs-shadow-md);
    display: none;
}
.drs-theme-switcher__panel.is-open { display: grid; gap: .55rem; }
.drs-theme-switcher__heading { padding: .25rem .35rem .45rem; }
.drs-theme-switcher__heading strong,
.drs-theme-switcher__heading span { display:block; }
.drs-theme-switcher__heading span { color:var(--drs-text-muted);font-size:.75rem;margin-top:.15rem; }

.drs-theme-option {
    width: 100%;
    display: grid;
    grid-template-columns: 78px 1fr auto;
    align-items: center;
    gap: .7rem;
    padding: .65rem;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.drs-theme-option:hover { background: var(--drs-surface-soft); }
.drs-theme-option.is-selected { border-color:var(--drs-primary);background:var(--drs-primary-soft); }
.drs-theme-option__copy strong,
.drs-theme-option__copy small { display:block; }
.drs-theme-option__copy small { color:var(--drs-text-muted);margin-top:.1rem;line-height:1.35; }
.drs-theme-option__check { color:var(--drs-primary);opacity:0; }
.drs-theme-option.is-selected .drs-theme-option__check { opacity:1; }

/* Miniature, meaningful previews rather than abstract colour squares. */
.drs-theme-option__preview {
    width: 76px;
    height: 52px;
    overflow: hidden;
    display: block;
    border: 1px solid #8292a5;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,.14);
}
.drs-theme-option__preview-nav { display:block;height:11px;background:#173552; }
.drs-theme-option__preview-body { display:grid;grid-template-columns:24px 1fr;gap:5px;height:41px;padding:6px; }
.drs-theme-option__preview-card { display:block;border-radius:3px; }
.drs-theme-option__preview-lines { display:block;border-radius:2px;background:repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 6px);opacity:.72; }
.drs-theme-option__preview--light { background:#edf3f8;color:#52667d; }
.drs-theme-option__preview--light .drs-theme-option__preview-card { background:#fff;border:1px solid #bdcad9; }
.drs-theme-option__preview--dark { background:#0f1b28;color:#c1ccda;border-color:#58708a; }
.drs-theme-option__preview--dark .drs-theme-option__preview-nav { background:#0a1724; }
.drs-theme-option__preview--dark .drs-theme-option__preview-card { background:#21354b;border:1px solid #526a83; }
.drs-theme-option__preview--outdoor { background:#f1ecdf;color:#06182b;border-color:#52677c; }
.drs-theme-option__preview--outdoor .drs-theme-option__preview-nav { background:#082d57; }
.drs-theme-option__preview--outdoor .drs-theme-option__preview-card { background:#fffef8;border:2px solid #667a8e; }
.drs-theme-option__preview--outdoor .drs-theme-option__preview-lines { opacity:1; }

.drs-theme-switcher__status { min-height:1.1rem;padding:0 .4rem .15rem;color:var(--drs-text-muted);font-size:.72rem; }

@media (max-width:900px) {
    .drs-theme-switcher { width:100%; }
    .drs-theme-switcher__toggle { width:100%;justify-content:center;border-radius:10px; }
    .drs-theme-switcher__panel { position:static;width:100%;margin-top:.45rem;box-shadow:none; }
}