:root,
html[data-theme="shadow"] {
    color-scheme: dark;
    --ss-theme-bg: #02040a;
    --ss-theme-bg-soft: #050812;
    --ss-theme-surface: rgba(8, 12, 22, 0.88);
    --ss-theme-surface-strong: rgba(5, 8, 16, 0.96);
    --ss-theme-surface-soft: rgba(14, 20, 34, 0.78);
    --ss-theme-input: rgba(0, 0, 0, 0.34);
    --ss-theme-border: rgba(160, 227, 255, 0.2);
    --ss-theme-border-strong: rgba(255, 0, 255, 0.36);
    --ss-theme-text: #f3f7ff;
    --ss-theme-text-strong: #ffffff;
    --ss-theme-muted: rgba(224, 241, 255, 0.72);
    --ss-theme-dim: rgba(224, 241, 255, 0.54);
    --ss-theme-pink: #ff00ff;
    --ss-theme-cyan: #00f5ff;
    --ss-theme-purple: #a855f7;
    --ss-theme-green: #00ff9f;
    --ss-theme-amber: #ffd166;
    --ss-theme-danger: #ff4161;
    --ss-theme-warning: #ffb86b;
    --ss-theme-shadow: 0 24px 64px rgba(0, 0, 0, 0.52);
    --ss-theme-glow: 0 0 30px rgba(168, 85, 247, 0.22);
    --ss-theme-page-bg:
        radial-gradient(circle at 14% 10%, rgba(168, 85, 247, 0.2), transparent 38%),
        radial-gradient(circle at 86% 18%, rgba(255, 0, 255, 0.16), transparent 36%),
        radial-gradient(circle at 82% 84%, rgba(0, 255, 159, 0.1), transparent 40%),
        linear-gradient(180deg, #05070b 0%, #080b14 44%, #05070b 100%);
    --ss-theme-panel-bg:
        linear-gradient(160deg, rgba(168, 85, 247, 0.1), rgba(0, 245, 255, 0.06) 42%, rgba(5, 8, 16, 0.9) 100%),
        var(--ss-theme-surface);
    --ss-theme-button-bg: linear-gradient(130deg, var(--ss-theme-purple), var(--ss-user-accent) 52%, var(--ss-theme-pink));
}

html[data-theme="void"] {
    color-scheme: dark;
    --ss-theme-bg: #000102;
    --ss-theme-bg-soft: #020305;
    --ss-theme-surface: rgba(3, 5, 8, 0.9);
    --ss-theme-surface-strong: rgba(0, 1, 3, 0.98);
    --ss-theme-surface-soft: rgba(8, 10, 14, 0.74);
    --ss-theme-input: rgba(0, 0, 0, 0.58);
    --ss-theme-border: rgba(118, 139, 162, 0.18);
    --ss-theme-border-strong: rgba(126, 247, 255, 0.28);
    --ss-theme-text: #edf3f7;
    --ss-theme-text-strong: #ffffff;
    --ss-theme-muted: rgba(220, 232, 240, 0.66);
    --ss-theme-dim: rgba(220, 232, 240, 0.46);
    --ss-theme-pink: #d950ff;
    --ss-theme-cyan: #6df4ff;
    --ss-theme-purple: #7b7cff;
    --ss-theme-green: #39f5b8;
    --ss-theme-amber: #f6c768;
    --ss-theme-danger: #ff526d;
    --ss-theme-warning: #ffb56a;
    --ss-theme-shadow: 0 24px 64px rgba(0, 0, 0, 0.78);
    --ss-theme-glow: 0 0 24px rgba(109, 244, 255, 0.12);
    --ss-theme-page-bg:
        radial-gradient(circle at 18% -4%, rgba(109, 244, 255, 0.08), transparent 34%),
        radial-gradient(circle at 90% 0%, rgba(217, 80, 255, 0.07), transparent 32%),
        linear-gradient(180deg, #000102 0%, #020305 100%);
    --ss-theme-panel-bg:
        linear-gradient(160deg, rgba(109, 244, 255, 0.04), rgba(217, 80, 255, 0.035) 44%, rgba(0, 1, 3, 0.96) 100%),
        var(--ss-theme-surface);
    --ss-theme-button-bg: linear-gradient(130deg, #0f1720, var(--ss-user-accent) 52%, #111827);
}

html[data-theme="light"] {
    color-scheme: light;
    --ss-theme-bg: #f6f7fb;
    --ss-theme-bg-soft: #eef2f8;
    --ss-theme-surface: rgba(255, 255, 255, 0.88);
    --ss-theme-surface-strong: rgba(255, 255, 255, 0.96);
    --ss-theme-surface-soft: rgba(248, 250, 255, 0.86);
    --ss-theme-input: rgba(255, 255, 255, 0.88);
    --ss-theme-border: rgba(79, 94, 132, 0.2);
    --ss-theme-border-strong: rgba(143, 84, 255, 0.28);
    --ss-theme-text: #101522;
    --ss-theme-text-strong: #060914;
    --ss-theme-muted: rgba(49, 60, 82, 0.72);
    --ss-theme-dim: rgba(49, 60, 82, 0.54);
    --ss-theme-pink: #d316b8;
    --ss-theme-cyan: #007d94;
    --ss-theme-purple: #6757d9;
    --ss-theme-green: #008f67;
    --ss-theme-amber: #b7791f;
    --ss-theme-danger: #c72544;
    --ss-theme-warning: #ad5b12;
    --ss-theme-shadow: 0 22px 50px rgba(30, 39, 66, 0.14);
    --ss-theme-glow: 0 0 0 1px rgba(143, 84, 255, 0.08), 0 18px 42px rgba(39, 53, 92, 0.12);
    --ss-theme-page-bg:
        radial-gradient(circle at 10% -6%, rgba(143, 84, 255, 0.18), transparent 34%),
        radial-gradient(circle at 92% 4%, rgba(0, 174, 196, 0.12), transparent 32%),
        linear-gradient(180deg, #fbfcff 0%, #eef2f8 48%, #f7f9fd 100%);
    --ss-theme-panel-bg:
        linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(244, 248, 255, 0.88)),
        var(--ss-theme-surface);
    --ss-theme-button-bg: linear-gradient(130deg, var(--ss-user-accent), var(--ss-user-accent-2));
}

html[data-accent="pink"] {
    --ss-user-accent: #ff00ff;
    --ss-user-accent-2: #00f5ff;
    --ss-user-accent-rgb: 255, 0, 255;
}

html[data-accent="cyan"] {
    --ss-user-accent: #00d9ff;
    --ss-user-accent-2: #8a6cff;
    --ss-user-accent-rgb: 0, 217, 255;
}

html[data-accent="purple"] {
    --ss-user-accent: #a855f7;
    --ss-user-accent-2: #ff4d9d;
    --ss-user-accent-rgb: 168, 85, 247;
}

html[data-accent="green"] {
    --ss-user-accent: #00ff9f;
    --ss-user-accent-2: #00f5ff;
    --ss-user-accent-rgb: 0, 255, 159;
}

html[data-accent="amber"] {
    --ss-user-accent: #f6c445;
    --ss-user-accent-2: #ff7bad;
    --ss-user-accent-rgb: 246, 196, 69;
}

:root {
    --ss-theme-accent: var(--ss-user-accent, #ff00ff);
    --ss-theme-accent-2: var(--ss-user-accent-2, #00f5ff);
    --bg: var(--ss-theme-bg);
    --panel: var(--ss-theme-surface);
    --panel-2: var(--ss-theme-surface-soft);
    --text: var(--ss-theme-text);
    --muted: var(--ss-theme-muted);
    --pink: var(--ss-theme-pink);
    --green: var(--ss-theme-accent);
    --border: var(--ss-theme-border-strong);
    --border-soft: var(--ss-theme-border);
    --border-strong: var(--ss-theme-border-strong);
    --border-green: color-mix(in srgb, var(--ss-theme-accent) 48%, transparent);
    --glow-pink: 0 0 24px color-mix(in srgb, var(--ss-theme-pink) 24%, transparent);
    --glow-green: 0 0 24px color-mix(in srgb, var(--ss-theme-accent) 20%, transparent);
    --ss-bg: var(--ss-theme-bg);
    --ss-bg-soft: var(--ss-theme-bg-soft);
    --ss-panel: var(--ss-theme-surface);
    --ss-panel-strong: var(--ss-theme-surface-strong);
    --ss-surface: var(--ss-theme-surface);
    --ss-surface-2: var(--ss-theme-surface-soft);
    --ss-surface-3: var(--ss-theme-surface-strong);
    --ss-border: var(--ss-theme-border);
    --ss-text: var(--ss-theme-text);
    --ss-text-soft: var(--ss-theme-muted);
    --ss-text-muted: var(--ss-theme-dim);
    --ss-muted: var(--ss-theme-muted);
    --ss-pink: var(--ss-theme-pink);
    --ss-green: var(--ss-theme-accent);
    --ss-green-strong: var(--ss-theme-accent);
    --ss-cyan: var(--ss-theme-accent-2);
    --ss-purple: var(--ss-theme-purple);
    --ss-purple-strong: var(--ss-theme-purple);
    --ss-magenta: var(--ss-theme-pink);
    --ss-gold: var(--ss-theme-amber);
    --ss-danger: var(--ss-theme-danger);
    --ss-shadow: var(--ss-theme-shadow);
    --ss-glow-green: 0 0 30px color-mix(in srgb, var(--ss-theme-accent) 24%, transparent);
    --ss-glow-purple: var(--ss-theme-glow);
    --neon-pink: var(--ss-theme-pink);
    --neon-green: var(--ss-theme-accent);
    --feed-bg: var(--ss-theme-bg);
    --feed-panel: var(--ss-theme-surface-strong);
    --feed-text: var(--ss-theme-text);
    --feed-muted: var(--ss-theme-muted);
    --feed-pink: var(--ss-theme-pink);
    --feed-green: var(--ss-theme-accent);
    --creator-bg: var(--ss-theme-bg);
    --creator-panel: var(--ss-theme-surface);
    --creator-panel-strong: var(--ss-theme-surface-strong);
    --creator-border: var(--ss-theme-border);
    --creator-border-strong: var(--ss-theme-border-strong);
    --creator-text: var(--ss-theme-text);
    --creator-muted: var(--ss-theme-muted);
    --creator-dim: var(--ss-theme-dim);
    --creator-cyan: var(--ss-theme-accent-2);
    --creator-pink: var(--ss-theme-pink);
    --creator-green: var(--ss-theme-accent);
    --creator-amber: var(--ss-theme-amber);
    --creator-purple: var(--ss-theme-purple);
    --creator-accent: var(--ss-theme-accent);
    --upload-ink: var(--ss-theme-text);
    --upload-muted: var(--ss-theme-muted);
    --upload-surface: var(--ss-theme-surface);
    --upload-surface-2: var(--ss-theme-surface-soft);
    --upload-border: var(--ss-theme-border);
    --upload-btn-primary-start: var(--ss-theme-accent);
    --upload-btn-primary-end: var(--ss-theme-accent-2);
    --upload-btn-secondary-bg: var(--ss-theme-surface-strong);
    --upload-btn-focus-ring: color-mix(in srgb, var(--ss-theme-accent) 72%, transparent);
    --upload-studio-bg: var(--ss-theme-bg);
    --upload-studio-panel: var(--ss-theme-surface-strong);
    --upload-studio-panel-soft: var(--ss-theme-surface);
    --upload-studio-panel-muted: var(--ss-theme-surface-soft);
    --upload-studio-border: var(--ss-theme-border);
    --upload-studio-border-strong: var(--ss-theme-border-strong);
    --upload-studio-text: var(--ss-theme-text);
    --upload-studio-muted: var(--ss-theme-muted);
    --upload-studio-faint: var(--ss-theme-dim);
    --upload-studio-accent: var(--ss-theme-accent);
    --upload-studio-accent-2: var(--ss-theme-accent-2);
    --upload-studio-warning: var(--ss-theme-warning);
    --upload-studio-danger: var(--ss-theme-danger);
    --ss-mobile-bg: var(--ss-theme-bg);
    --ss-mobile-panel: var(--ss-theme-surface);
    --ss-mobile-panel-strong: var(--ss-theme-surface-strong);
    --ss-mobile-border: var(--ss-theme-border);
    --ss-mobile-text: var(--ss-theme-text);
    --ss-mobile-muted: var(--ss-theme-muted);
    --ss-mobile-pink: var(--ss-theme-pink);
    --ss-mobile-green: var(--ss-theme-accent);
    --ss-mobile-cyan: var(--ss-theme-accent-2);
}

html,
body {
    background: var(--ss-theme-bg);
    color: var(--ss-theme-text);
}

body:not(.ss-live-body),
body.ss-shell-body {
    background: var(--ss-theme-page-bg) !important;
    color: var(--ss-theme-text) !important;
}

body:not(.ss-live-body)::before,
body.ss-shell-body::before {
    opacity: var(--ss-theme-grid-opacity, 0.18);
}

html[data-theme="light"] body:not(.ss-live-body)::after,
html[data-theme="light"] body.ss-shell-body::after {
    opacity: 0.12;
}

body.ss-shell-body .su-shell::before {
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--ss-theme-accent-2) 12%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--ss-theme-accent-2) 12%, transparent) 1px, transparent 1px) !important;
}

body.ss-shell-body .su-sidebar,
body.ss-shell-body .su-topbar,
body.ss-shell-body .su-actions,
body.ss-shell-body .su-offer-rail__inner,
.ss-shell-notify__panel,
.su-user-menu__panel,
.su-search-suggest {
    border-color: var(--ss-theme-border) !important;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--ss-theme-accent) 8%, transparent), color-mix(in srgb, var(--ss-theme-accent-2) 5%, transparent) 42%, transparent 100%),
        var(--ss-theme-surface-strong) !important;
    color: var(--ss-theme-text) !important;
    box-shadow: var(--ss-theme-shadow), var(--ss-theme-glow) !important;
}

body.ss-shell-body .su-search input,
body.ss-shell-body .su-guest-hint,
input,
select,
textarea {
    border-color: var(--ss-theme-border) !important;
    background: var(--ss-theme-input) !important;
    color: var(--ss-theme-text) !important;
}

body.ss-shell-body .su-user-menu__panel a {
    color: var(--ss-theme-text) !important;
}

body.ss-shell-body .su-user-menu__panel a:hover,
body.ss-shell-body .su-user-menu__panel a:focus-visible {
    border-color: color-mix(in srgb, var(--ss-theme-accent-2) 44%, transparent) !important;
    background: color-mix(in srgb, var(--ss-theme-accent-2) 10%, transparent) !important;
}

body.ss-shell-body .su-user-menu__panel a.su-user-menu__admin {
    color: var(--ss-theme-text-strong) !important;
}

@media (max-width: 768px) {
    body.ss-shell-body .su-user-menu__panel a {
        color: #f4f8ff !important;
    }

    body.ss-shell-body .su-user-menu__panel a.su-user-menu__admin {
        color: #ffffff !important;
    }
}

select {
    color-scheme: inherit;
}

select option,
select optgroup {
    background: var(--ss-theme-surface-strong);
    color: var(--ss-theme-text);
}

body.ss-shell-body .su-logo,
body.ss-shell-body .su-link,
body.ss-shell-body .su-top-action,
body.ss-shell-body .su-wallet,
body.ss-shell-body .su-userline,
body.ss-shell-body .su-bottom-nav {
    border-color: var(--ss-theme-border) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ss-theme-accent) 8%, transparent), color-mix(in srgb, var(--ss-theme-accent-2) 5%, transparent)),
        var(--ss-theme-surface) !important;
    color: var(--ss-theme-muted) !important;
}

body.ss-shell-body .su-link:hover,
body.ss-shell-body .su-link.is-active,
body.ss-shell-body .su-top-action:hover,
body.ss-shell-body .su-top-action.is-active,
body.ss-shell-body .su-userline:hover {
    border-color: var(--ss-theme-border-strong) !important;
    color: var(--ss-theme-text-strong) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ss-theme-accent) 20%, transparent), color-mix(in srgb, var(--ss-theme-accent-2) 12%, transparent)),
        var(--ss-theme-surface-soft) !important;
    box-shadow: 0 0 24px color-mix(in srgb, var(--ss-theme-accent) 20%, transparent) !important;
}

body.ss-shell-body .su-logo__core,
body.ss-shell-body .su-userline__name,
body.ss-shell-body .su-search-suggest__title,
body.ss-shell-body .ss-shell-notify__head strong {
    color: var(--ss-theme-text-strong) !important;
    -webkit-text-fill-color: var(--ss-theme-text-strong) !important;
}

body.ss-shell-body .su-logo__sub,
body.ss-shell-body .su-userline__handle,
body.ss-shell-body .su-search-suggest__meta,
body.ss-shell-body .su-side-group h2,
body.ss-shell-body .ss-shell-notify__head small {
    color: var(--ss-theme-muted) !important;
}

.neon-button-ss,
.btn-primary,
.landing-search-btn,
.neon-button,
.pulse-btn--primary,
.upload-next,
.upload-file-trigger,
.feed-composer__send,
.feed-empty__cta,
.feed-error button,
.su-btn-plus,
.su-btn-auth,
.stats-filter-submit,
.contact-submit,
.ads-submit,
.admin-btn--primary,
.creator-dashboard__button--primary,
.creator-dashboard__filters button {
    border-color: color-mix(in srgb, var(--ss-theme-accent) 40%, transparent) !important;
    color: var(--ss-theme-text-strong) !important;
    background: var(--ss-theme-button-bg) !important;
    box-shadow: 0 0 24px color-mix(in srgb, var(--ss-theme-accent) 28%, transparent) !important;
}

html[data-theme="light"] :where(
    .neon-button-ss,
    .btn-primary,
    .landing-search-btn,
    .neon-button,
    .pulse-btn--primary,
    .upload-next,
    .upload-file-trigger,
    .feed-composer__send,
    .feed-empty__cta,
    .feed-error button,
    .su-btn-plus,
    .su-btn-auth,
    .stats-filter-submit,
    .contact-submit,
    .ads-submit,
    .admin-btn--primary,
    .creator-dashboard__button--primary,
    .creator-dashboard__filters button
) {
    color: #ffffff !important;
}

:where(
    .hero-copy,
    .hero-console,
    .section-block,
    .final-cta,
    .home-results,
    .recon-card,
    .community-hero,
    .community-panel,
    .member-card,
    .message-sidebar,
    .message-thread,
    .stats-list,
    .pulse-panel,
    .contact-card,
    .contact-panel,
    .ads-panel,
    .admin-panel,
    .admin-metric-card,
    .ticket-widget,
    .ticket-kpi-card,
    .ticket-detail-shell,
    .ticket-table-wrap,
    .upload-shell,
    .upload-step,
    .upload-side-card,
    .upload-head,
    .pp-card,
    .creator-main,
    .creator-media,
    .creator-dashboard__hero,
    .creator-dashboard__panel,
    .creator-dashboard__metric,
    .feed-post-card,
    .feed-stats-page__card,
    .subscription-card,
    .discount-card,
    .placeholder-actions,
    .feature-placeholder-section,
    .studio-panel,
    .live-stage-card,
    .right-panel-card,
    .sheet
) {
    border-color: var(--ss-theme-border) !important;
    background: var(--ss-theme-panel-bg) !important;
    box-shadow: var(--ss-theme-shadow), var(--ss-theme-glow) !important;
    color: var(--ss-theme-text) !important;
}

html[data-theme="light"] :where(
    .upload-head h1,
    .upload-side-card h3,
    .creator-dashboard h1,
    .creator-dashboard h2,
    .creator-dashboard h3,
    .feed-loading,
    .feed-error,
    .feed-empty,
    .studio-topbar,
    .studio-panel,
    .live-stage-card,
    .right-panel-card
) {
    color: var(--ss-theme-text) !important;
    text-shadow: none !important;
}

html[data-theme="light"] .feed-card,
html[data-theme="light"] .feed-media__asset,
html[data-theme="light"] .feed-photo {
    background-color: #eef2f8 !important;
}

html[data-theme="light"] .feed-overlay,
html[data-theme="light"] .feed-action,
html[data-theme="light"] .feed-comment-drawer {
    color: #ffffff;
}

body.live-studio-body,
body.ss-mobile-live-body,
.ss-mobile-live,
.ss-mobile-stage {
    background: var(--ss-theme-page-bg) !important;
    color: var(--ss-theme-text) !important;
}

.ss-theme-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    z-index: 360;
}

.ss-theme-toggle {
    min-height: 38px;
    max-width: 11rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid var(--ss-theme-border);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ss-theme-accent) 10%, transparent), color-mix(in srgb, var(--ss-theme-accent-2) 7%, transparent)),
        var(--ss-theme-surface);
    color: var(--ss-theme-text);
    padding: 0 12px 0 8px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 20px rgba(0, 0, 0, 0.18);
}

.ss-theme-toggle:hover,
.ss-theme-toggle:focus-visible,
.ss-theme-switcher.is-open .ss-theme-toggle {
    border-color: var(--ss-theme-border-strong);
    color: var(--ss-theme-text-strong);
    transform: translateY(-1px);
    box-shadow: 0 0 22px color-mix(in srgb, var(--ss-theme-accent) 28%, transparent);
}

.ss-theme-toggle__swatch {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background:
        linear-gradient(135deg, var(--ss-theme-accent), var(--ss-theme-accent-2));
    box-shadow: 0 0 16px color-mix(in srgb, var(--ss-theme-accent) 42%, transparent);
    flex: 0 0 auto;
}

.ss-theme-toggle__label {
    max-width: 7ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-theme-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, calc(100vw - 24px));
    display: grid;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--ss-theme-border-strong);
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--ss-theme-accent) 22%, transparent), transparent 58%),
        var(--ss-theme-surface-strong);
    color: var(--ss-theme-text);
    box-shadow: var(--ss-theme-shadow), 0 0 28px color-mix(in srgb, var(--ss-theme-accent) 24%, transparent);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    transform-origin: top right;
}

.ss-theme-panel[hidden] {
    display: none;
}

.ss-theme-switcher.is-open .ss-theme-panel {
    animation: ss-theme-panel-in 150ms ease-out;
}

.ss-theme-panel__group {
    display: grid;
    gap: 8px;
}

.ss-theme-panel__title {
    color: var(--ss-theme-muted);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ss-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ss-theme-option {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--ss-theme-border);
    border-radius: 12px;
    background: var(--ss-theme-surface);
    color: var(--ss-theme-text);
    padding: 7px 9px;
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
}

.ss-theme-option[aria-checked="true"] {
    border-color: var(--ss-theme-border-strong);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ss-theme-accent) 18%, transparent), color-mix(in srgb, var(--ss-theme-accent-2) 10%, transparent)),
        var(--ss-theme-surface-soft);
}

.ss-theme-option__swatch {
    width: 18px;
    height: 18px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    flex: 0 0 auto;
}

.ss-theme-option__swatch--system {
    background: linear-gradient(135deg, #070a12 0 50%, #f6f7fb 50% 100%);
}

.ss-theme-option__swatch--shadow {
    background: linear-gradient(135deg, #05070b, #ff00ff, #00f5ff);
}

.ss-theme-option__swatch--void {
    background: linear-gradient(135deg, #000, #0b1118, #6df4ff);
}

.ss-theme-option__swatch--light {
    background: linear-gradient(135deg, #ffffff, #eef2f8, #6757d9);
}

.ss-accent-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ss-accent-option {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.44);
    cursor: pointer;
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ss-theme-surface-strong) 82%, transparent);
}

.ss-accent-option[aria-pressed="true"] {
    outline: 2px solid var(--ss-theme-text-strong);
    outline-offset: 2px;
}

.ss-accent-option--pink {
    background: linear-gradient(135deg, #ff00ff, #00f5ff);
}

.ss-accent-option--cyan {
    background: linear-gradient(135deg, #00d9ff, #8a6cff);
}

.ss-accent-option--purple {
    background: linear-gradient(135deg, #a855f7, #ff4d9d);
}

.ss-accent-option--green {
    background: linear-gradient(135deg, #00ff9f, #00f5ff);
}

.ss-accent-option--amber {
    background: linear-gradient(135deg, #f6c445, #ff7bad);
}

.ss-theme-ready :where(
    body,
    .su-sidebar,
    .su-topbar,
    .su-actions,
    .su-link,
    .su-top-action,
    .su-userline,
    .su-wallet,
    .upload-shell,
    .creator-dashboard__hero,
    .creator-dashboard__panel,
    .creator-dashboard__metric,
    .feed-shell,
    .studio-panel
) {
    transition:
        background 220ms ease,
        border-color 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease;
}

@keyframes ss-theme-panel-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-theme-ready :where(
        body,
        .su-sidebar,
        .su-topbar,
        .su-actions,
        .su-link,
        .su-top-action,
        .su-userline,
        .su-wallet,
        .upload-shell,
        .creator-dashboard__hero,
        .creator-dashboard__panel,
        .creator-dashboard__metric,
        .feed-shell,
        .studio-panel
    ) {
        transition: none;
    }

    .ss-theme-switcher.is-open .ss-theme-panel {
        animation: none;
    }
}

@media (max-width: 620px) {
    .ss-theme-switcher {
        flex: 1 1 44px;
        min-width: 44px;
    }

    .ss-theme-toggle {
        width: 100%;
        min-height: 38px;
        padding-inline: 7px;
    }

    .ss-theme-toggle__label {
        display: none;
    }

    .ss-theme-panel {
        position: fixed;
        top: max(128px, calc(env(safe-area-inset-top, 0px) + 128px));
        right: 9px;
        left: 9px;
        width: auto;
        max-height: min(64vh, 460px);
        overflow-y: auto;
        transform: none;
        transform-origin: top center;
    }

    .ss-theme-switcher.is-open .ss-theme-panel {
        animation-name: ss-theme-panel-in-mobile;
    }

    .ss-theme-options {
        grid-template-columns: 1fr;
    }
}

@keyframes ss-theme-panel-in-mobile {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}