/* =============================================
   DARK MODE — [data-theme="dark"] approach
   All colours from original dark-mode.css,
   converted from body.dark-mode → data-theme.
   Zero body class selectors. Zero flash.

   TRANSITIONS: scoped to specific elements only.
   NEVER on html/body/* — that causes page-load
   flash as background animates white→dark.
   Toggle uses startViewTransition() for the
   smooth full-page fade (see header.js).
============================================= */

/* ── Fast smooth transitions on toggle — 0.15s ease-out feels instant
   but still visible. Scoped per-element, never html/body. ── */

.th-nav,
.th-logo,
.th-nav-links a,
.th-header-search-input,
.th-pill,
.th-card,
.th-card-title,
.th-card-meta,
.th-card-tag,
.th-card-play,
.th-card-prog,
.th-card-fill,
.th-card-actions,
.th-card-favorite,
.th-card-share,
.th-card-dl,
.th-wallpaper-card,
.th-wallpaper-title,
.th-wallpaper-category,
.th-block,
.th-block-title,
.th-chip,
.th-eyebrow,
.th-tag,
.th-rel-row,
.th-rel-play,
.th-rel-name,
.th-pager .page-numbers,
.th-modal-content,
.th-modal-close,
.th-form-group input,
.th-form-group select,
.th-form-group textarea,
.th-share-platform,
.th-share-url,
.th-comment-form,
.th-comment-item,
.th-mobile-search,
.th-mobile-search-input,
.th-toast,
.th-dark-mode-toggle,
.th-hamburger,
.th-search-toggle,
.th-infinite-toggle,
.th-strip-bar,
.th-dl-android,
.th-dl-ios,
.th-favorite-btn,
.th-share-btn,
.th-report-btn,
.th-play-btn,
.th-seek-fill,
.th-seek-track,
.th-res-tab,
.th-resolution-btn,
footer,
footer a {
    transition:
        background-color 0.15s ease-out,
        background       0.15s ease-out,
        border-color     0.15s ease-out,
        color            0.12s ease-out,
        box-shadow       0.15s ease-out,
        fill             0.12s ease-out,
        stroke           0.12s ease-out;
}

/* ── Page base ── */
[data-theme="dark"] body {
    background: #111111 !important;
}

/* ── Nav ── */
[data-theme="dark"] .th-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    height: -webkit-fill-available;
}
[data-theme="dark"] .th-nav {
    background: rgb(17 17 17 / 81%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(15px);
}
[data-theme="dark"] .th-logo            { color: #ffffff !important; }
[data-theme="dark"] .th-nav-links a     { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-nav-links a:hover { color: #fff !important; }
[data-theme="dark"] .th-header-search-input {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-header-search-input::placeholder { color: rgba(224,224,224,0.78) !important; }

/* ── Hero ── */
[data-theme="dark"] .th-hero            { background: #111111 !important; }
[data-theme="dark"] .th-hero-h1         { color: #ffffff !important; }
[data-theme="dark"] .th-hero-sub        { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-hero-badge {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #999 !important;
}
[data-theme="dark"] .th-badge-dot {
    background: #fff !important;
    box-shadow: none !important;
}

/* ── Category strip ── */
[data-theme="dark"] .th-strip-bar {
    background: #111111 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .th-pill {
    background: #1a1a1a !important;
    color: rgba(224,224,224,0.78) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] .th-pill:hover {
    background: #222 !important;
    color: rgba(224,224,224,0.78) !important;
    border-color: rgba(255,255,255,0.15) !important;
}
[data-theme="dark"] .th-pill--on {
    background: #fff !important;
    color: #111 !important;
    border-color: #fff !important;
    font-weight: 700;
}

/* ── Section headings ── */
[data-theme="dark"] h2,
[data-theme="dark"] .th-containerr h2  { color: #e8e8e8 !important; }

/* ── View All pill inside container ── */
[data-theme="dark"] .th-containerr .th-pill {
    background: #1a1a1a !important;
    color: rgba(224,224,224,0.78) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .th-containerr .th-pill:hover {
    background: #222 !important;
    color: rgba(224,224,224,0.78) !important;
}

/* ── Cards ── */
[data-theme="dark"] .th-card {
    background: #191919 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .th-card:hover {
    background: #202020 !important;
    border-color: rgba(255,255,255,0.13) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
    transform: translateY(-2px);
}
[data-theme="dark"] .th-card.is-playing {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.18) !important;
}

/* ── Card play button ── */
[data-theme="dark"] .th-card-play {
    background: #222 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .th-card-play svg              { fill: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-card-play:hover            { background: #fff !important; }
[data-theme="dark"] .th-card-play:hover svg        { fill: #111 !important; }
[data-theme="dark"] .th-card.is-playing .th-card-play      { background: #fff !important; }
[data-theme="dark"] .th-card.is-playing .th-card-play svg  { fill: #111 !important; }
[data-theme="dark"] .th-card-ring                  { background: #fff !important; }

/* ── Card text hierarchy ── */
[data-theme="dark"] .th-card-title         { color: #e8e8e8 !important; font-weight: 600; }
[data-theme="dark"] .th-card-title:hover   { color: #fff !important; }
[data-theme="dark"] .th-card-meta          { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-sep                { color: #2a2a2a !important; }
[data-theme="dark"] .th-download-count     { color: rgba(224,224,224,0.78) !important; }

/* ── Card tags ── */
[data-theme="dark"] .th-card-tag {
    background: #222 !important;
    color: rgba(224,224,224,0.78) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .th-card-tag:hover {
    background: #fff !important;
    color: #111 !important;
    border-color: #fff !important;
}

/* ── Card action row ── */
[data-theme="dark"] .th-card-actions {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .th-card-favorite,
[data-theme="dark"] .th-card-share {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-card-favorite:hover {
    background: rgba(248,113,113,0.08) !important;
    border-color: rgba(248,113,113,0.2) !important;
    color: #f87171 !important;
}
[data-theme="dark"] .th-card-favorite.active {
    color: #f87171 !important;
    background: rgba(248,113,113,0.08) !important;
    border-color: rgba(248,113,113,0.2) !important;
}
[data-theme="dark"] .th-card-favorite.active svg { fill: #f87171 !important; }
[data-theme="dark"] .th-card-share:hover {
    background: #222 !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-card-dl {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(224,224,224,0.78) !important;
    font-weight: 600;
}
[data-theme="dark"] .th-card-dl:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #111 !important;
}

/* ── Card progress bar ── */
[data-theme="dark"] .th-card-prog  { background: #222 !important; }
[data-theme="dark"] .th-card-fill  { background: #fff !important; }

/* ── Wallpaper cards ── */
[data-theme="dark"] .th-wallpaper-card {
    background: #191919 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .th-wallpaper-card:hover {
    background: #202020 !important;
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .th-wallpaper-title          { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-wallpaper-title:hover    { color: #fff !important; }
[data-theme="dark"] .th-wallpaper-meta           { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-wallpaper-category {
    background: #222 !important;
    color: rgba(224,224,224,0.78) !important;
}

/* ── Single page blocks ── */
[data-theme="dark"] .th-block {
    background: #191919 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .th-block-title        { color: #e8e8e8 !important; }
[data-theme="dark"] .th-block-title svg    { fill: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-song-title         { color: #fff !important; }
[data-theme="dark"] .th-eyebrow {
    background: rgba(255,255,255,0.06) !important;
    color: #888 !important;
}
[data-theme="dark"] .th-chip {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-seek-track        { background: #2a2a2a !important; }
[data-theme="dark"] .th-seek-fill         { background: #fff !important; }
[data-theme="dark"] .th-play-btn          { background: #fff !important; }
[data-theme="dark"] .th-play-btn svg      { fill: #111 !important; }
[data-theme="dark"] .th-play-btn:hover    { background: rgba(224,224,224,0.78) !important; }

/* ── Download buttons ── */
[data-theme="dark"] .th-dl-android,
[data-theme="dark"] .th-dl-ios {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #bbb !important;
}
[data-theme="dark"] .th-dl-android:hover,
[data-theme="dark"] .th-dl-ios:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #111 !important;
}
[data-theme="dark"] .th-dl-text span { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-dl-badge {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(224,224,224,0.78) !important;
}

/* ── Tags ── */
[data-theme="dark"] .th-tag {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-tag:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #111 !important;
}

/* ── Related rows ── */
[data-theme="dark"] .th-rel-row          { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .th-rel-play         { background: #222 !important; }
[data-theme="dark"] .th-rel-play svg     { fill: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-rel-play:hover   { background: #fff !important; }
[data-theme="dark"] .th-rel-play:hover svg { fill: #111 !important; }
[data-theme="dark"] .th-rel-name         { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-rel-name:hover   { color: #fff !important; }
[data-theme="dark"] .th-rel-go {
    background: rgba(255,255,255,0.05) !important;
    color: rgba(224,224,224,0.78) !important;
}

/* ── Fav / share / report ── */
[data-theme="dark"] .th-favorite-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 40px;
    font-size: 14px;
    transition: all 0.2s;
    background: rgba(248,113,113,0.07) !important;
    color: #ef4444 !important;
}
[data-theme="dark"] .th-share-btn {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-share-btn:hover {
    background: #222 !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-report-btn {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-report-btn:hover {
    border-color: rgba(248,113,113,0.25) !important;
    color: #f87171 !important;
}

/* ── Pagination ── */
[data-theme="dark"] .th-pager .page-numbers {
    background: #191919 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(224,224,224,0.78) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .th-pager .page-numbers:hover {
    background: #222 !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-pager .page-numbers.current {
    background: #fff !important;
    border-color: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
}

/* ── Modals ── */
[data-theme="dark"] .th-modal-content {
    background: #191919 !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important;
}
[data-theme="dark"] .th-modal-content h3 { color: #e8e8e8 !important; }
[data-theme="dark"] .th-modal-close {
    background: #222 !important;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-form-group label { color: #ccc !important; }
[data-theme="dark"] .th-form-group input,
[data-theme="dark"] .th-form-group select,
[data-theme="dark"] .th-form-group textarea {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #ccc !important;
}
[data-theme="dark"] .th-share-platform {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] .th-share-platform span { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-share-platform:hover {
    background: #222 !important;
    border-color: rgba(255,255,255,0.14) !important;
}
[data-theme="dark"] .th-share-url {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] .th-share-url input { color: rgba(224,224,224,0.78) !important; }

/* ── Comments ── */
[data-theme="dark"] .th-comment-form             { background: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .th-comment-form h3          { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-comment-form input,
[data-theme="dark"] .th-comment-form select,
[data-theme="dark"] .th-comment-form textarea {
    background: #151515 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: #ccc !important;
}
[data-theme="dark"] .th-comment-item             { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .th-comment-header strong    { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-comment-date             { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] .th-comment-text             { color: rgba(224,224,224,0.78) !important; }

/* ── Mobile search ── */
[data-theme="dark"] .th-mobile-search {
    background: #111 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .th-mobile-search-input {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(224,224,224,0.78) !important;
}

/* ── Mobile menu ── */
[data-theme="dark"] .th-mobile-menu             { background: #111 !important; }
[data-theme="dark"] .th-menu-links a {
    color: rgba(224,224,224,0.78) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .th-menu-links a:hover {
    color: rgba(224,224,224,0.78) !important;
    background: rgba(255,255,255,0.04) !important;
}

/* ── Hamburger + search toggle ── */
[data-theme="dark"] .th-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.2s;
    color: rgba(224,224,224,0.78) !important;
}
[data-theme="dark"] .th-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 40px;
    transition: background 0.2s;
    fill: white;
}

/* ── Footer ── */
[data-theme="dark"] footer {
    background: #0e0e0e !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    color: #333 !important;
}
[data-theme="dark"] footer a       { color: rgba(224,224,224,0.78) !important; }
[data-theme="dark"] footer a:hover { color: rgba(224,224,224,0.78) !important; }

/* ── Toast ── */
[data-theme="dark"] .th-toast {
    background: #222 !important;
    color: rgba(224,224,224,0.78) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

/* ── Skeleton loaders ── */
[data-theme="dark"] .skeleton-loader,
[data-theme="dark"] .wallpaper-skeleton-image {
    background: linear-gradient(
        90deg,
        #191919 25%,
        #222    50%,
        #191919 75%
    ) !important;
    background-size: 200% 100% !important;
}
[data-theme="dark"] .wallpaper-skeleton {
    background: #191919 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* ── Wallpaper single page ── */
[data-theme="dark"] .th-wallpaper-main {
    background: #191919 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .th-wallpaper-info-single     { background: #191919 !important; }
[data-theme="dark"] .th-wallpaper-title-single    { color: #e8e8e8 !important; }
[data-theme="dark"] .th-res-tabs {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .th-res-tab {
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    color: rgba(224, 224, 224, 0.7) !important;
}

[data-theme="dark"] .th-res-tab:hover {
    color: rgba(224, 224, 224, 0.9) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .th-res-tab.active {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    box-shadow: none !important;
}

[data-theme="dark"] .th-resolution-list {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .th-resolution-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(224, 224, 224, 0.7) !important;
}

[data-theme="dark"] .th-resolution-btn span {
    color: rgba(224, 224, 224, 0.5) !important;
}

[data-theme="dark"] .th-resolution-btn:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(224, 224, 224, 0.9) !important;
}

[data-theme="dark"] .th-resolution-btn:hover span {
    color: rgba(224, 224, 224, 0.7) !important;
}

[data-theme="dark"] .th-resolution-btn.active {
    background: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

[data-theme="dark"] .th-resolution-btn.active span {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .th-dl-btn {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #1a1a1a !important;
    color: rgba(224, 224, 224, 0.7) !important;
}

[data-theme="dark"] .th-dl-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .th-tag {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(224, 224, 224, 0.7) !important;
}

[data-theme="dark"] .th-tag:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* ── Download count (single) ── */
[data-theme="dark"] .th-download-count-single {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 99px;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(224,224,224,0.78) !important;
}

/* ── Scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar          { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track    { background: #111; }
[data-theme="dark"] ::-webkit-scrollbar-thumb    { background: #222; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #333; }

/* ── Infinite scroll toggle ── */
[data-theme="dark"] .th-infinite-toggle           { color: #94a3b8; }
[data-theme="dark"] .th-infinite-toggle:hover     { background: #334155; }
[data-theme="dark"] .th-infinite-toggle.active    { color: #3b82f6; }

/* =============================================
   CURSOR GLOW — TypeHero style
   Exact original logic, selector-converted.
   JS sets --x / --y on each element.
============================================= */

/* Cards and blocks need relative + isolation */
[data-theme="dark"] .th-card,
[data-theme="dark"] .th-wallpaper-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Glow layer via ::before */
[data-theme="dark"] .th-card::before,
[data-theme="dark"] .th-wallpaper-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(255,255,255,0.15)  0%,
        rgba(255,255,255,0.08) 20%,
        rgba(255,255,255,0.02) 40%,
        transparent            60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
[data-theme="dark"] .th-card:hover::before,
[data-theme="dark"] .th-wallpaper-card:hover::before { opacity: 1; }

/* Content above glow */
[data-theme="dark"] .th-card > *,
[data-theme="dark"] .th-wallpaper-card > * {
    position: relative;
    z-index: 2;
}

/* ::after — 600px wide radial for large hover area */
[data-theme="dark"] .th-card::after,
[data-theme="dark"] .th-wallpaper-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(
        600px circle at var(--x, 50%) var(--y, 50%),
        rgba(255,255,255,0.10) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .th-card:hover::after,
[data-theme="dark"] .th-wallpaper-card:hover::after { opacity: 1; }

/* th-block and th-wallpaper-main — use ::after only */
[data-theme="dark"] .th-block,
[data-theme="dark"] .th-wallpaper-main {
    position: relative;
    isolation: isolate;
}
[data-theme="dark"] .th-block::after,
[data-theme="dark"] .th-wallpaper-main::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(
        600px circle at var(--x, 50%) var(--y, 50%),
        rgba(255,255,255,0.08) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .th-block:hover::after,
[data-theme="dark"] .th-wallpaper-main:hover::after { opacity: 1; }

[data-theme="dark"] .th-block > *,
[data-theme="dark"] .th-wallpaper-main > * {
    position: relative;
    z-index: 1;
}

/* =============================================
   DARK MODE TOGGLE ICON ANIMATION
   Exact original animation, selector-converted.
============================================= */
.dm-icon-wrap {
    position: relative;
    width: 22px;
    height: 22px;
}
.dm-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dm-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    overflow: visible;
}

/* Sun rays stagger */
.dm-icon-sun svg line {
    transform-origin: 12px 12px;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1),
                opacity   .25s ease;
}
.dm-icon-sun svg line:nth-child(2) { transition-delay: .02s; }
.dm-icon-sun svg line:nth-child(3) { transition-delay: .04s; }
.dm-icon-sun svg line:nth-child(4) { transition-delay: .06s; }
.dm-icon-sun svg line:nth-child(5) { transition-delay: .08s; }
.dm-icon-sun svg line:nth-child(6) { transition-delay: .02s; }
.dm-icon-sun svg line:nth-child(7) { transition-delay: .04s; }
.dm-icon-sun svg line:nth-child(8) { transition-delay: .06s; }
.dm-icon-sun svg line:nth-child(9) { transition-delay: .08s; }

/* Default state: sun in, moon out */
.dm-icon-sun {
    transform: rotate(0deg) scale(1);
    opacity: 1;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.dm-icon-moon {
    transform: rotate(-90deg) scale(.4);
    opacity: 0;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}

/* Dark state: moon in, sun out */
[data-theme="dark"] .dm-icon-sun {
    transform: rotate(90deg) scale(.4);
    opacity: 0;
}
[data-theme="dark"] .dm-icon-sun svg line {
    transform: scale(0);
    opacity: 0;
    transition-delay: 0s !important;
}
[data-theme="dark"] .dm-icon-moon {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

/* ══════════════════════════════════════════════
   CROP & DOWNLOAD TOOL — dark mode
══════════════════════════════════════════════ */
[data-theme="dark"] .th-crop-launch-btn {
    background: #1e293b !important;
    color: rgba(224,224,224,0.85) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .th-crop-launch-btn:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .wc-backdrop  { background: rgba(0,0,0,0.75) !important; }
[data-theme="dark"] .wc-sheet     { background: #111111 !important; box-shadow: 0 -6px 40px rgba(0,0,0,0.65) !important; }
[data-theme="dark"] .wc-drag-pill { background: rgba(255,255,255,0.15) !important; }
[data-theme="dark"] .wc-sheet-head   { background: #111111 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .wc-sheet-title  { color: #f1f5f9 !important; }
[data-theme="dark"] .wc-sheet-sub    { color: rgba(224,224,224,0.55) !important; }
[data-theme="dark"] .wc-close-btn    { color: rgba(255,255,255,0.45) !important; }
[data-theme="dark"] .wc-close-btn:hover  { background: rgba(255,255,255,0.07) !important; color: #fff !important; }
[data-theme="dark"] .wc-back-btn     { color: rgba(224,224,224,0.7) !important; }
[data-theme="dark"] .wc-back-btn:hover   { background: rgba(255,255,255,0.07) !important; color: #fff !important; }
[data-theme="dark"] .wc-device-card  { background: #1a1a1a !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .wc-device-card:hover,
[data-theme="dark"] .wc-device-card:focus-visible {
    background: #1e2e44 !important; border-color: #3b82f6 !important;
    box-shadow: 0 6px 18px rgba(59,130,246,0.18) !important;
}
[data-theme="dark"] .wc-device-card.selected {
    background: #1e2e44 !important; border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.22) !important;
}
[data-theme="dark"] .wc-device-icon   { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.09) !important; color: #60a5fa !important; }
[data-theme="dark"] .wc-device-name   { color: #e2e8f0 !important; }
[data-theme="dark"] .wc-device-ratio  { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.09) !important; color: rgba(224,224,224,0.55) !important; }
[data-theme="dark"] .wc-canvas-wrap   { background: #0a0a0a !important; }
[data-theme="dark"] .wc-handle        { background: rgba(255,255,255,0.95) !important; border-color: #3b82f6 !important; }
[data-theme="dark"] .wc-frame-border  { border-color: rgba(255,255,255,0.85) !important; }
[data-theme="dark"] .wc-thirds::before,
[data-theme="dark"] .wc-thirds::after { background: rgba(255,255,255,0.2) !important; }
[data-theme="dark"] .wc-info-badge    { background: rgba(255,255,255,0.08) !important; color: rgba(224,224,224,0.85) !important; border: 1px solid rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .wc-info-size     { color: rgba(224,224,224,0.5) !important; }
[data-theme="dark"] .wc-btn-secondary { background: #1e293b !important; border-color: rgba(255,255,255,0.1) !important; color: rgba(224,224,224,0.8) !important; }
[data-theme="dark"] .wc-btn-secondary:hover { background: #334155 !important; color: #fff !important; }
[data-theme="dark"] .wc-btn-primary       { box-shadow: 0 4px 20px rgba(59,130,246,0.35) !important; }
[data-theme="dark"] .wc-btn-primary:hover { box-shadow: 0 8px 28px rgba(59,130,246,0.5)  !important; }


/* ══════════════════════════════════════════════
   WALLPAPER NAV STRIP — dark mode
══════════════════════════════════════════════ */
[data-theme="dark"] .th-wallpaper-nav-btn {
        background: #1a1a1a !important;
    color: rgba(224, 224, 224, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}
[data-theme="dark"] .th-wallpaper-nav-btn:hover {
    background: #222 !important;
    color: rgba(224, 224, 224, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-theme="dark"] .th-wallpaper-nav-btn.active {
    background: #fff !important;
    border-color: rgba(255,255,255,0.07) !important;
    color: #111 !important;
}

/* ══════════════════════════════════════════════
   COLLECTIONS GRID — dark mode
══════════════════════════════════════════════ */
[data-theme="dark"] .th-collection-card {
    background: #191919 !important;
    border-color: rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] .th-collection-card:hover {
    background: #202020 !important;
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow: 0 20px 30px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .th-collection-cover {
    background: linear-gradient(135deg, #0f2044, #1e1b4b) !important;
}
[data-theme="dark"] .th-collection-name {
    color: #e8e8e8 !important;
}
[data-theme="dark"] .th-collection-count {
    color: rgba(224,224,224,0.55) !important;
}
[data-theme="dark"] .th-collection-desc {
    color: rgba(224,224,224,0.5) !important;
}

/* ══════════════════════════════════════════════
   CATEGORY STRIP (wallpaper pages) — dark mode
══════════════════════════════════════════════ */
[data-theme="dark"] .th-strip-bar {
    background: #111111 !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* ══════════════════════════════════════════════
   WALLPAPER CARD ACTIONS — dark mode
══════════════════════════════════════════════ */
[data-theme="dark"] .th-card-favorite,
[data-theme="dark"] .th-card-share,
[data-theme="dark"] .th-card-dl {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(224,224,224,0.75) !important;
}
[data-theme="dark"] .th-card-favorite:hover {
    background: rgba(239,68,68,0.1) !important;
    border-color: rgba(239,68,68,0.3) !important;
    color: #f87171 !important;
}
[data-theme="dark"] .th-card-favorite.active {
    background: rgba(239,68,68,0.1) !important;
    border-color: rgba(239,68,68,0.3) !important;
    color: #f87171 !important;
}
[data-theme="dark"] .th-card-share:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #fff !important;
}
[data-theme="dark"] .th-card-dl:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #111 !important;
}

/* ══════════════════════════════════════════════
   POPULAR / FEATURED / RANDOM PAGE HERO — dark mode
══════════════════════════════════════════════ */
[data-theme="dark"] .th-hero-badge svg {
    fill: #999 !important;
}

/* ══════════════════════════════════════════════
   WALLPAPER SINGLE — breadcrumb dark mode
══════════════════════════════════════════════ */
[data-theme="dark"] .th-breadcrumb {
    color: rgba(224,224,224,0.45) !important;
}
[data-theme="dark"] .th-breadcrumb a {
    color: rgba(224,224,224,0.45) !important;
}
[data-theme="dark"] .th-breadcrumb a:hover {
    color: #fff !important;
}
[data-theme="dark"] .th-breadcrumb svg {
    stroke: rgba(224,224,224,0.3) !important;
}

/* ══════════════════════════════════════════════
   WALLPAPER SINGLE — favorite section dark
══════════════════════════════════════════════ */
[data-theme="dark"] .th-favorite-section .th-share-btn {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: rgba(224,224,224,0.75) !important;
}
[data-theme="dark"] .th-favorite-section .th-share-btn:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════
   WALLPAPER GRID — infinite scroll loader dark
══════════════════════════════════════════════ */
[data-theme="dark"] #wth-inf-end {
    color: rgba(224,224,224,0.4) !important;
}

[data-theme="dark"] .th-ringtone-nav-btn {
    background: #1a1a1a !important;
    color: rgba(224,224,224,0.78) !important;
    border-color: rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] .th-ringtone-nav-btn:hover {
    background: #222 !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
[data-theme="dark"] .th-ringtone-nav-btn.active {
    background: #fff !important;
    border-color: #fff !important;
    color: #111 !important;
}

/* ══════════════════════════════════════════════
   VIEW TRANSITION — smooth page fade
   Used by startViewTransition() in toggleDarkMode()
══════════════════════════════════════════════ */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: ease;
}
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }

@keyframes vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}