/**
 * Theme-picker components only. These controls intentionally live outside any
 * visual theme so the setting remains usable while stylesheets are switched.
 */
.design-theme-card .card-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.design-theme-heading {
    display: flex;
    gap: .85rem;
    align-items: center;
}

.design-theme-heading-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0052ff, #4d7cff);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 82, 255, .2);
    font-size: 1.25rem;
}

.design-theme-heading-copy strong,
.design-theme-heading-copy small {
    display: block;
}

.design-theme-heading-copy small {
    margin-top: .18rem;
    color: #64748b;
    font-size: .76rem;
    font-weight: 500;
}

.design-theme-current {
    display: inline-flex;
    min-height: 32px;
    padding: .35rem .7rem;
    align-items: center;
    color: #0052ff;
    background: rgba(0, 82, 255, .07);
    border: 1px solid rgba(0, 82, 255, .16);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.design-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.design-theme-option {
    position: relative;
    min-width: 0;
    padding: .75rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.design-theme-option:hover {
    border-color: rgba(0, 82, 255, .35);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

.design-theme-option:focus-visible {
    outline: 3px solid rgba(0, 82, 255, .28) !important;
    outline-offset: 3px;
}

.design-theme-option.is-active {
    border-color: #0052ff;
    box-shadow: 0 0 0 2px rgba(0, 82, 255, .12), 0 10px 28px rgba(0, 82, 255, .12);
}

.design-theme-option.is-active::after {
    content: "\2713";
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0052ff, #4d7cff);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 9px rgba(0, 82, 255, .25);
    font-size: .7rem;
    font-weight: 800;
}

.design-theme-preview {
    display: block;
    width: 100%;
    position: relative;
    height: 96px;
    margin-bottom: .75rem;
    overflow: hidden;
    border-radius: 10px;
}

.design-theme-preview::before,
.design-theme-preview::after {
    content: "";
    position: absolute;
}

.design-theme-preview .preview-sidebar,
.design-theme-preview .preview-nav,
.design-theme-preview .preview-card,
.design-theme-preview .preview-card-secondary {
    position: absolute;
    display: block;
}

.design-theme-preview .preview-sidebar {
    inset: 0 auto 0 0;
    width: 26%;
}

.design-theme-preview .preview-nav {
    top: 9px;
    right: 9px;
    width: 59%;
    height: 15px;
}

.design-theme-preview .preview-card {
    top: 35px;
    right: 9px;
    width: 59%;
    height: 24px;
}

.design-theme-preview .preview-card-secondary {
    right: 9px;
    bottom: 10px;
    width: 42%;
    height: 17px;
}

.design-theme-preview.playful {
    background: #fffdf5;
    border: 2px solid #1e293b;
    box-shadow: 3px 3px 0 #f472b6;
}

.design-theme-preview.playful::after {
    top: 8px;
    right: 8px;
    width: 12px;
    height: 12px;
    background: #fbbf24;
    border: 2px solid #1e293b;
    transform: rotate(12deg);
}

.design-theme-preview.playful .preview-sidebar { background: #fff; border-right: 2px solid #1e293b; }
.design-theme-preview.playful .preview-nav { background: #fff; border: 2px solid #1e293b; border-radius: 8px; box-shadow: 2px 2px 0 #f472b6; }
.design-theme-preview.playful .preview-card { background: #8b5cf6; border: 2px solid #1e293b; border-radius: 8px; box-shadow: 2px 2px 0 #1e293b; }
.design-theme-preview.playful .preview-card-secondary { background: #34d399; border: 2px solid #1e293b; border-radius: 6px; }

.design-theme-preview.saas {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .09);
}

.design-theme-preview.saas::after {
    right: -22px;
    bottom: -28px;
    width: 75px;
    height: 75px;
    background: rgba(0, 82, 255, .1);
    border-radius: 50%;
    filter: blur(12px);
}

.design-theme-preview.saas .preview-sidebar { background: #0f172a; }
.design-theme-preview.saas .preview-nav { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 3px 10px rgba(15, 23, 42, .07); }
.design-theme-preview.saas .preview-card { background: linear-gradient(135deg, #0052ff, #4d7cff); border-radius: 7px; box-shadow: 0 5px 12px rgba(0, 82, 255, .22); }
.design-theme-preview.saas .preview-card-secondary { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; }

.design-theme-preview.mixed {
    background: #fafafa;
    border: 2px solid #0f172a;
    box-shadow: 3px 3px 0 rgba(0, 82, 255, .2);
}

.design-theme-preview.mixed::after {
    top: 8px;
    right: 7px;
    width: 11px;
    height: 11px;
    background: #fbbf24;
    border: 2px solid #0f172a;
    border-radius: 50%;
}

.design-theme-preview.mixed .preview-sidebar { background: #0f172a; border-right: 3px solid #4d7cff; }
.design-theme-preview.mixed .preview-nav { background: #fff; border: 2px solid #0f172a; border-radius: 8px; box-shadow: 2px 2px 0 #4d7cff; }
.design-theme-preview.mixed .preview-card { background: linear-gradient(135deg, #0052ff, #4d7cff); border: 2px solid #0f172a; border-radius: 9px; box-shadow: 2px 2px 0 #0f172a; }
.design-theme-preview.mixed .preview-card-secondary { background: #fff; border: 2px solid #0f172a; border-radius: 7px; }

.design-theme-preview.sneat {
    background: #f5f5f9;
    border: 1px solid #e4e6e8;
    box-shadow: 0 4px 14px rgba(34, 48, 62, .08);
}

.design-theme-preview.sneat::after {
    top: 11px;
    right: 13px;
    width: 7px;
    height: 7px;
    background: #71dd37;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #d9dee3;
}

.design-theme-preview.sneat .preview-sidebar { background: #fff; border-right: 1px solid #e4e6e8; }
.design-theme-preview.sneat .preview-nav { background: #fff; border-radius: 5px; box-shadow: 0 2px 8px rgba(34, 48, 62, .1); }
.design-theme-preview.sneat .preview-card { background: #696cff; border-radius: 5px; box-shadow: 0 3px 8px rgba(105, 108, 255, .24); }
.design-theme-preview.sneat .preview-card-secondary { background: #fff; border: 1px solid #e4e6e8; border-radius: 5px; }

.design-theme-option-title {
    display: block;
    color: inherit;
    font-size: .88rem;
    font-weight: 750;
    letter-spacing: -.01em;
}

.design-theme-option-copy {
    display: block;
    margin-top: .2rem;
    color: #64748b;
    font-size: .7rem;
    line-height: 1.45;
}

.design-theme-menu {
    padding: .55rem .45rem .4rem;
}

.design-theme-menu-label {
    display: flex;
    margin-bottom: .45rem;
    padding: 0 .45rem;
    align-items: center;
    justify-content: space-between;
    color: #64748b;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.design-theme-menu-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem;
}

.design-theme-menu-button {
    display: flex;
    min-width: 0;
    min-height: 54px;
    padding: .45rem .25rem;
    flex-direction: column;
    gap: .25rem;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font: inherit;
    font-size: .62rem;
    font-weight: 700;
    cursor: pointer;
    transition: 160ms ease;
}

.design-theme-menu-button i { font-size: 1rem; }
.design-theme-menu-button:hover { color: #0052ff; border-color: rgba(0, 82, 255, .3); transform: translateY(-1px); }
.design-theme-menu-button.is-active { color: #fff; background: linear-gradient(135deg, #0052ff, #4d7cff); border-color: transparent; box-shadow: 0 5px 14px rgba(0, 82, 255, .2); }

@media (max-width: 767.98px) {
    .design-theme-grid { grid-template-columns: 1fr; }
    .design-theme-preview { height: 82px; }
    .design-theme-card .card-header { align-items: flex-start; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .design-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .design-theme-option,
    .design-theme-menu-button { transition: none; }
}