html {
    background: #020617;
}

.viewer-is-fullscreen #modalViewerControls,
.viewer-is-fullscreen #modalSecondaryControls {
    position: fixed;
}

.viewer-is-fullscreen #modalViewerControls [data-fullscreen-target] {
    position: static;
}

body.theme-light,
body[data-color-theme] {
    --theme-page: #202124;
    --theme-glow-one: rgba(130, 130, 130, 0.12);
    --theme-glow-two: rgba(100, 100, 100, 0.16);
    --theme-surface-strong: #27282b;
    --theme-surface: #303134;
    --theme-surface-muted: #3c3d40;
    --theme-border: #606164;
    --theme-text: #f1f1f1;
    --theme-muted: #b8b8b8;
    --theme-accent: #c4c4c4;
    --theme-accent-hover: #dedede;
    --theme-accent-text: #202124;
    --theme-accent-link: #dedede;
    --theme-accent-border: #999999;
    --theme-modal-backdrop: rgba(16, 16, 16, 0.88);
    background:
        radial-gradient(circle at top right, var(--theme-glow-one), transparent 30rem),
        radial-gradient(circle at bottom left, var(--theme-glow-two), transparent 34rem),
        var(--theme-page) !important;
    color: var(--theme-text) !important;
}

body[data-color-theme="midnight"] {
    --theme-page: #111827;
    --theme-glow-one: rgba(67, 96, 150, 0.22);
    --theme-glow-two: rgba(36, 50, 83, 0.36);
    --theme-surface-strong: #111c31;
    --theme-surface: #17233a;
    --theme-surface-muted: #23324d;
    --theme-border: #3b4d6a;
    --theme-text: #e7eefb;
    --theme-muted: #a5b5d0;
    --theme-accent: #7399e8;
    --theme-accent-hover: #91b1f5;
    --theme-accent-text: #101b31;
    --theme-accent-link: #a9c2ff;
    --theme-accent-border: #6688cf;
    --theme-modal-backdrop: rgba(7, 16, 35, 0.88);
}

body[data-color-theme="black"] {
    --theme-page: #000000;
    --theme-glow-one: transparent;
    --theme-glow-two: transparent;
    --theme-surface-strong: #080808;
    --theme-surface: #121212;
    --theme-surface-muted: #242424;
    --theme-border: #484848;
    --theme-text: #f5f5f5;
    --theme-muted: #aaaaaa;
    --theme-accent: #d4d4d4;
    --theme-accent-hover: #eeeeee;
    --theme-accent-text: #0a0a0a;
    --theme-accent-link: #e5e5e5;
    --theme-accent-border: #8a8a8a;
    --theme-modal-backdrop: rgba(0, 0, 0, 0.92);
}

body.theme-light [class*="bg-slate-950"], body[data-color-theme] [class*="bg-slate-950"] { background-color: var(--theme-surface-strong) !important; }
body.theme-light [class*="bg-slate-900"], body[data-color-theme] [class*="bg-slate-900"] { background-color: var(--theme-surface) !important; }
body.theme-light [class*="bg-slate-800"], body[data-color-theme] [class*="bg-slate-800"] { background-color: var(--theme-surface-muted) !important; }
body.theme-light [class*="border-slate-"], body[data-color-theme] [class*="border-slate-"] { border-color: var(--theme-border) !important; }
body.theme-light [class*="text-slate-100"], body.theme-light [class*="text-slate-200"], body.theme-light [class*="text-slate-300"], body[data-color-theme] [class*="text-slate-100"], body[data-color-theme] [class*="text-slate-200"], body[data-color-theme] [class*="text-slate-300"], body.theme-light .text-white, body[data-color-theme] .text-white { color: var(--theme-text) !important; }
body.theme-light [class*="text-slate-400"], body.theme-light [class*="text-slate-500"], body.theme-light [class*="text-slate-600"], body[data-color-theme] [class*="text-slate-400"], body[data-color-theme] [class*="text-slate-500"], body[data-color-theme] [class*="text-slate-600"] { color: var(--theme-muted) !important; }
body.theme-light [class*="text-indigo-"], body[data-color-theme] [class*="text-indigo-"] { color: var(--theme-accent-link) !important; }
body.theme-light [class*="text-rose-"],
body.theme-light [class*="text-emerald-"],
body.theme-light [class*="text-amber-"],
body.theme-light [class*="text-sky-"],
body.theme-light [class*="text-blue-"],
body[data-color-theme] [class*="text-rose-"],
body[data-color-theme] [class*="text-emerald-"],
body[data-color-theme] [class*="text-amber-"],
body[data-color-theme] [class*="text-sky-"],
body[data-color-theme] [class*="text-blue-"] { color: #f8fafc !important; }

#modalLikeButton {
    background-color: transparent !important;
    color: #fb7185 !important;
}

#modalLikeButton[aria-pressed="true"] {
    color: #f43f5e !important;
}

#modalLikeButton:hover {
    color: #fda4af !important;
}

#modalLikeIcon {
    fill: currentColor;
    stroke: currentColor;
}

#modalLikeCount {
    color: #ffffff !important;
}

body.theme-light [class*="border-indigo-"], body[data-color-theme] [class*="border-indigo-"] { border-color: var(--theme-accent-border) !important; }
body.theme-light [class*="bg-indigo-600"], body.theme-light [class*="bg-indigo-500"], body[data-color-theme] [class*="bg-indigo-600"], body[data-color-theme] [class*="bg-indigo-500"] { background-color: var(--theme-accent) !important; color: var(--theme-accent-text) !important; }
body.theme-light [class*="hover:bg-indigo-"]:hover, body[data-color-theme] [class*="hover:bg-indigo-"]:hover { background-color: var(--theme-accent-hover) !important; }
body.theme-light .bg-gradient-to-r, body[data-color-theme] .bg-gradient-to-r { background-image: linear-gradient(to right, var(--theme-accent-link), var(--theme-accent)) !important; }
body.theme-light .bg-clip-text, body[data-color-theme] .bg-clip-text { -webkit-background-clip: text !important; background-clip: text !important; }
body.theme-light [class*="shadow-indigo-"], body[data-color-theme] [class*="shadow-indigo-"] { --tw-shadow-color: var(--theme-accent) !important; }
body.theme-light input, body.theme-light textarea, body.theme-light select, body[data-color-theme] input, body[data-color-theme] textarea, body[data-color-theme] select { color: var(--theme-text) !important; }
body.theme-light input::placeholder, body.theme-light textarea::placeholder, body[data-color-theme] input::placeholder, body[data-color-theme] textarea::placeholder { color: var(--theme-muted) !important; }
body.theme-light .story-card-hover-overlay, body[data-color-theme] .story-card-hover-overlay { background-image: linear-gradient(to top, rgba(24, 20, 15, 0.78), rgba(24, 20, 15, 0.2), rgba(24, 20, 15, 0)) !important; }
body.theme-light .gallery-list-title, body.theme-light .image-overlay-title, body[data-color-theme] .gallery-list-title, body[data-color-theme] .image-overlay-title { color: #fffaf0 !important; }
body.theme-light .image-overlay-tag, body[data-color-theme] .image-overlay-tag { color: var(--theme-accent-text) !important; border-color: var(--theme-accent-border) !important; font-weight: 700; }
body.theme-light .story-card-hover-overlay .image-overlay-tag,
body[data-color-theme] .story-card-hover-overlay .image-overlay-tag,
body.theme-light .story-card-hover-overlay .story-overlay-uploader,
body[data-color-theme] .story-card-hover-overlay .story-overlay-uploader,
body.theme-light .story-card-hover-overlay .story-overlay-block,
body[data-color-theme] .story-card-hover-overlay .story-overlay-block {
    color: #ffffff !important;
}
body.theme-light .story-card-hover-overlay .image-overlay-tag,
body[data-color-theme] .story-card-hover-overlay .image-overlay-tag {
    background-color: rgba(32, 24, 13, 0.8) !important;
}
body.theme-light .light-soft-add-btn, body[data-color-theme] .light-soft-add-btn { background-color: var(--theme-accent) !important; border: 1px solid var(--theme-accent-border) !important; color: var(--theme-accent-text) !important; }
body.theme-light .light-soft-add-btn:hover, body[data-color-theme] .light-soft-add-btn:hover { background-color: var(--theme-accent-hover) !important; }
body.theme-light .light-soft-image-btn, body[data-color-theme] .light-soft-image-btn { background-color: var(--theme-surface-muted) !important; border: 1px solid var(--theme-accent-border) !important; color: var(--theme-text) !important; }
body.theme-light .light-soft-tag-btn, body[data-color-theme] .light-soft-tag-btn { background-color: var(--theme-surface-muted) !important; border: 1px solid var(--theme-accent-border) !important; color: var(--theme-accent-link) !important; }
body.theme-light #storyModal,
body.theme-light #uploadGuideModal,
body.theme-light #blockedUploaderModal,
body.theme-light #blockedTagModal,
body[data-color-theme] #storyModal,
body[data-color-theme] #uploadGuideModal,
body[data-color-theme] #blockedUploaderModal,
body[data-color-theme] #blockedTagModal {
    background-color: var(--theme-modal-backdrop) !important;
}

.popular-tag-link.hidden {
    display: none !important;
}