/* ═══════════════════════════════════════════════════════════════════════════
   DM Prompts — SaaS Design System Patch  (load AFTER theme.css)
   ───────────────────────────────────────────────────────────────────────────
   Fixes applied:
     1. Removes duplicate @keyframes (dm-card-in & dm-fade-up had conflicting defs)
     2. Consolidates dark-mode toggle to single CSS-driven approach (no inline JS)
     3. Removes dead dmbn-* bottom-nav CSS (replaced by mbn-* in footer.php)
     4. Fixes dmd-topbar-actions mobile override (class mismatch → dmd-topbar-right)
   SaaS polish:
     5. Better spacing, breathing room, and layout rhythm
     6. Refined button states (hover lift, press feedback, focus rings)
     7. Improved skeleton shimmer (60-degree angle, feels faster)
     8. GPU-accelerated cards (translateZ promotes to compositor layer)
     9. content-visibility on off-screen feed sections (paint performance)
    10. Better form inputs (consistent height, refined focus ring)
    11. Header glass effect in dark mode (matching top SaaS apps)
    12. Dashboard sidebar improvements (visual hierarchy, active state)
    13. Smoother infinite-scroll skeleton fade-in
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. FIX: canonical @keyframes (supersede the duplicates in theme.css) ── */
@keyframes dm-card-in {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1);     }
}
@keyframes dm-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── 2. FIX: consolidated dark-mode toggle — CSS-only, no inline-style JS ── */
/* Single source of truth for the pill toggle.
   header.php now uses .dm-tgl-pill + .dm-tgl-knob (no inline styles).
   theme.css still defines the base; these rules override/consolidate. */
.dm-theme-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}
.dm-tgl-pill {
    position: relative;
    display: flex;
    align-items: center;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: #e2e8f0;
    border: 1.5px solid #cbd5e1;
    transition: background 0.3s ease, border-color 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.07);
}
[data-theme="dark"] .dm-tgl-pill {
    background: #27272a;
    border-color: #3f3f46;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
}
.dm-tgl-knob {
    position: absolute;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
}
.dm-tgl-knob::before { content: '☀️'; }
[data-theme="dark"] .dm-tgl-knob {
    left: 27px;
    background: #18181b;
}
[data-theme="dark"] .dm-tgl-knob::before { content: '🌙'; }
.dm-theme-toggle:focus-visible .dm-tgl-pill {
    outline: 2px solid var(--dm-primary);
    outline-offset: 2px;
}

/* ── 3. FIX: remove dmbn-* selectors — replaced by mbn-* (dead CSS) ─────── */
/* We intentionally re-declare them as display:none to fully suppress any
   residual elements that might still carry old class names */
.dmbn-nav  { display: none !important; }
.dmbn-item { display: none !important; }

/* ── 4. FIX: dashboard mobile — was targeting .dmd-topbar-actions (wrong)   */
@media (max-width: 960px) {
    .dmd-topbar-right {          /* FIX: was .dmd-topbar-actions in inline style */
        gap: 6px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SAAS DESIGN POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5. Breathing room & layout rhythm ──────────────────────────────────── */
:root {
    --dm-space-1:  4px;
    --dm-space-2:  8px;
    --dm-space-3:  12px;
    --dm-space-4:  16px;
    --dm-space-5:  24px;
    --dm-space-6:  32px;
    --dm-space-7:  48px;
    --dm-space-8:  64px;

    /* Refined shadow system with more depth differentiation */
    --dm-shadow:    0 1px 2px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.03);
    --dm-shadow-md: 0 2px 8px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
    --dm-shadow-lg: 0 4px 16px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.05);
    --dm-shadow-xl: 0 12px 40px rgba(0,0,0,.10), 0 20px 48px rgba(0,0,0,.06);

    /* Faster micro-transition for UI feedback */
    --dm-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --dm-transition:      all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --dm-transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 6. Refined buttons — lift on hover, press on active ────────────────── */
.dm-nav-btn,
.dm-nav-btn.dm-nav-create,
.dmd-create-btn,
.dml-cta-btn {
    transition: var(--dm-transition);
    transform: translateY(0);
    will-change: transform;
}

.dm-nav-btn:hover,
.dmd-create-btn:hover,
.dml-cta-btn:hover {
    transform: translateY(-1px);
}

.dm-nav-btn:active,
.dmd-create-btn:active,
.dml-cta-btn:active {
    transform: translateY(0) scale(0.97);
    transition: var(--dm-transition-fast);
}

/* Submit buttons — full press feedback */
.dm-auth-submit,
.dma-submit,
.dmap-submit,
.dmd-save-btn {
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    will-change: transform;
}
.dm-auth-submit:hover,
.dma-submit:hover,
.dmap-submit:hover,
.dmd-save-btn:hover {
    transform: translateY(-1px);
}
.dm-auth-submit:active,
.dma-submit:active,
.dmap-submit:active,
.dmd-save-btn:active {
    transform: scale(0.98) translateY(0);
}

/* Secondary / outline buttons */
.dm-btn,
.dm-load-btn,
.dm-logout-cancel {
    transition: var(--dm-transition);
}
.dm-btn:hover,
.dm-load-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--dm-shadow-md);
}
.dm-btn:active,
.dm-load-btn:active {
    transform: scale(0.98);
    transition: var(--dm-transition-fast);
}

/* Icon buttons — quick scale */
.dm4-avatar-btn:active,
.dmd-bell-btn:active,
.dm4-mob-search-btn:active {
    transform: scale(0.92);
    transition: var(--dm-transition-fast);
}

/* ── 7. Improved skeleton shimmer — 60° angle, wider sweep ─────────────── */
.dm-skel-img,
.dm-skel-line {
    background: linear-gradient(
        105deg,
        var(--dm-border-light) 0%,
        var(--dm-border-light) 30%,
        var(--dm-border) 50%,
        var(--dm-border-light) 70%,
        var(--dm-border-light) 100%
    );
    background-size: 300% 100%;
    animation: dm-shimmer 1.6s ease-in-out infinite;
}
@keyframes dm-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: -50% 50%; }
}

/* Skeleton batch container — fades in to prevent flash */
.dm-skeleton-batch {
    display: contents; /* doesn't add layout box, children flow into masonry */
    animation: dm-fade-up 0.2s ease both;
}

/* ── 8. GPU-accelerated cards ───────────────────────────────────────────── */
.dm-card {
    transform: translateZ(0);       /* Promote to own compositor layer    */
    backface-visibility: hidden;    /* Prevent flicker during transforms  */
    contain: layout style;          /* Limit layout recalc scope          */
    will-change: transform;
}
.dm-card:hover {
    transform: translateY(-4px) scale(1.012) translateZ(0);
    box-shadow: var(--dm-shadow-lg);
}
.dm-card:active {
    transform: scale(0.985) translateZ(0);
    transition: var(--dm-transition-fast);
}

/* ── 9. content-visibility for off-screen feed items ───────────────────── */
/* Skips paint for cards outside the viewport — huge perf win on long feeds */
.dm-masonry .dm-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 280px; /* hint the browser on estimated height */
}
/* Disable when cards are hovered — prevents layout shift during interaction */
.dm-masonry .dm-card:hover {
    content-visibility: visible;
}

/* ── 10. Consistent, polished form inputs ───────────────────────────────── */
.dm-auth-input,
.dma-input,
.dmap-input,
.dmap-textarea,
.dmd-input,
.dmsr-input {
    height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 15px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.dmap-textarea {
    height: auto;
    min-height: 120px;
    padding: 14px 16px;
    resize: vertical;
}
.dm-auth-input:focus,
.dma-input:focus,
.dmap-input:focus,
.dmap-textarea:focus,
.dmd-input:focus,
.dmsr-input:focus {
    outline: none;
    border-color: var(--dm-primary);
    box-shadow: 0 0 0 3px rgba(230, 0, 35, 0.08);
}

/* Search field — match input height */
.dm-search-field {
    height: 44px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* ── Custom category suggestion notice ──────────────────────────────────── */
.dmap-custom-cat-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(230,160,0,.08);
    border: 1px solid rgba(230,160,0,.30);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dm-text, #f0f0f0);
}
.dmap-custom-cat-notice svg {
    flex-shrink: 0;
    margin-top: 1px;
    stroke: #f59e0b;
}
.dmap-custom-cat-notice strong { color: #f59e0b; }
/* Remove the global :focus-visible outline on search — border-color + box-shadow already
   provide a clear focus indicator, so the extra outline creates an ugly double ring */
.dm-search-field:focus-visible,
.dm-search-field:focus {
    outline: none !important;
}

/* ── 11. Header glass effect in dark mode ───────────────────────────────── */
[data-theme="dark"] .dm-feed-header {
    background: rgba(15, 15, 16, 0.88) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Light mode header — subtle glass for depth */
.dm-feed-header {
    backdrop-filter: blur(0);
    transition: backdrop-filter 0.3s ease, background 0.3s ease;
}
@supports (backdrop-filter: blur(1px)) {
    .dm-feed-header {
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
    }
}

/* ── 12. Dashboard sidebar — better visual hierarchy ────────────────────── */
.dmd-sidebar {
    border-right: 1px solid var(--dm-border);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
}

.dmd-nav-item {
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 2px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.dmd-nav-item:hover {
    background: var(--dm-bg);
    transform: translateX(2px);
}
.dmd-nav-item.active {
    background: var(--dm-primary-light);
    color: var(--dm-primary);
    font-weight: 700;
}
.dmd-nav-item.active .dmd-nav-icon {
    background: rgba(230, 0, 35, 0.12);
    color: var(--dm-primary);
}
[data-theme="dark"] .dmd-nav-item:hover   { background: rgba(255,255,255,.05); }
[data-theme="dark"] .dmd-nav-item.active  { background: rgba(230,0,35,.14); }

/* Dashboard stat cards — hover lift */
.dmd-stat-card {
    transition: transform 0.2s var(--dm-ease-spring), box-shadow 0.2s ease;
}
.dmd-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dm-shadow-md);
}

/* ── 13. Skeleton fade-in on injection ──────────────────────────────────── */
.dm-card-skeleton {
    animation: dm-card-in 0.35s cubic-bezier(0, 0, 0.2, 1) both;
    contain: layout style;
}

/* Stagger skeletons for a wave effect */
.dm-card-skeleton:nth-child(2) { animation-delay: 0.04s; }
.dm-card-skeleton:nth-child(3) { animation-delay: 0.08s; }
.dm-card-skeleton:nth-child(4) { animation-delay: 0.12s; }
.dm-card-skeleton:nth-child(5) { animation-delay: 0.16s; }
.dm-card-skeleton:nth-child(6) { animation-delay: 0.20s; }

/* ── Category filter pills — smoother active state ──────────────────────── */
.dm-cat-btn {
    transition: var(--dm-transition);
    transform: translateZ(0);
}
.dm-cat-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--dm-shadow);
}
.dm-cat-btn.active {
    transform: scale(0.98);
    transition: var(--dm-transition-fast);
}

/* ── Dropdown animations — consistent feel ──────────────────────────────── */
.dm4-user-drop,
.dmd-bell-drop,
.dmd-dropdown {
    animation: dm-dropdown-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top right;
}
@keyframes dm-dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Logout modal pop ───────────────────────────────────────────────────── */
.dm-logout-modal-box {
    animation: dm-modal-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dm-modal-pop {
    from { transform: scale(0.86); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ── Toast notifications — refined entry/exit ───────────────────────────── */
.dm-toast {
    animation: dm-toast-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 18px;
    box-shadow: var(--dm-shadow-lg);
    letter-spacing: 0.01em;
}
@keyframes dm-toast-in {
    from { opacity: 0; transform: translateX(24px) scale(0.94); }
    to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
.dm-toast-out {
    animation: dm-toast-out 0.25s ease forwards;
}
@keyframes dm-toast-out {
    to { opacity: 0; transform: translateX(12px) scale(0.95); }
}

/* ── Page-level fade on load ────────────────────────────────────────────── */
#dm4-main {
    animation: dm-fade-up 0.3s ease both;
    animation-delay: 0.05s;
}

/* ── Single prompt page — better prompt box ─────────────────────────────── */
.dm-prompt-box {
    line-height: 1.7;
    letter-spacing: 0.01em;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dm-prompt-box:focus-within {
    border-color: var(--dm-primary);
    box-shadow: 0 0 0 3px rgba(230, 0, 35, 0.06);
}

/* ── Card title link — clean interaction ────────────────────────────────── */
.dm-card-title-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.dm-card-title-link:hover .dm-card-title {
    color: var(--dm-primary);
}
.dm-card-title {
    transition: color 0.15s ease;
}

/* ── Copy button — clear state transitions ──────────────────────────────── */
#dm-copy-btn {
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
#dm-copy-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(230, 0, 35, 0.32);
}
#dm-copy-btn:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}
#dm-copy-btn.copied {
    background: var(--dm-success);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.28);
}

/* ── Feed empty state ───────────────────────────────────────────────────── */
#dm-feed-empty {
    animation: dm-fade-up 0.4s ease both;
    padding: 64px 24px;
    text-align: center;
    color: var(--dm-text-secondary);
}

/* ── Auth cards — more generous padding ────────────────────────────────── */
.dm-auth-card,
.dma-card {
    border-radius: 20px;
    padding: 48px 44px 40px;
}
@media (max-width: 480px) {
    .dm-auth-card,
    .dma-card {
        padding: 32px 24px 28px;
        border-radius: 16px;
    }
}

/* ── Google OAuth button — polished ────────────────────────────────────── */
.dm-google-btn,
.dma-google {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.dm-google-btn:hover,
.dma-google:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.16);
}
.dm-google-btn:active,
.dma-google:active {
    transform: scale(0.98);
}

/* ── Mobile bottom nav — smoother active transition ─────────────────────── */
@media (max-width: 768px) {
    #dm4-mobnav .mbn-item {
        transition: color 0.18s ease;
    }
    #dm4-mobnav .mbn-item .mbn-icon {
        transition: stroke 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    #dm4-mobnav .mbn-item.active .mbn-icon {
        transform: translateY(-2px) scale(1.08);
    }
    .mbn-icon-fab {
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.2s ease;
    }
    #dm4-mobnav .mbn-item.mbn-fab-item:active .mbn-icon-fab {
        transform: scale(0.86);
    }
}

/* ── Focus ring — accessible & non-intrusive ────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--dm-primary);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ── Scrollbar styling — polished thin track ────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--dm-border);
    border-radius: 99px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--dm-text-muted);
}

/* Dark mode scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3f3f46;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}

/* ── Prefers-reduced-motion — override all animations ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .dm-card,
    .dm-card:hover,
    .dm-nav-btn:hover {
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ADDITIONAL FIXES — Toggle, Logo, Blog, Legal pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOGGLE FIX: pure CSS — no inline JS interference ───────────────────── */
/* Using a clean 52px pill. All state controlled by [data-theme="dark"]. */
.dm-tgl-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: #e2e8f0;
    border: 1.5px solid #cbd5e1;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.07);
    transition: background 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}
[data-theme="dark"] .dm-tgl-pill {
    background: #3f3f46 !important;
    border-color: #52525b !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.4) !important;
}
.dm-tgl-knob {
    position: absolute;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
}
[data-theme="dark"] .dm-tgl-knob {
    left: 27px !important;      /* 52 - 20 - 5 = 27 */
    background: #18181b !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
}
.dm-tgl-knob::before { content: '☀️'; }
[data-theme="dark"] .dm-tgl-knob::before { content: '🌙'; }

/* Kill any JS-applied inline styles from old footer script */
.dm-tgl-knob[style],
.dm-tgl-pill[style] {
    left: unset !important;
    background: unset !important;
}

/* ── LOGO: bigger header brand icon ─────────────────────────────────────── */
.dm-brand-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important; /* square-ish, more SaaS-like */
    background: var(--dm-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 14px rgba(230,0,35,.30) !important;
}
.dm-brand-icon svg { width: 22px !important; height: 22px !important; }
.dm-brand-logo-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* ── FOOTER logo row ─────────────────────────────────────────────────────── */
.dm4-footer-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--dm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dm4-footer-brand-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
    margin-left: 10px;
}
[data-theme="light"] .dm4-footer-brand-name { color: #111; }

.dm4-footer-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 10px;
}

/* ── FOOTER bottom — legal links row ────────────────────────────────────── */
.dm4-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.dm4-footer-legal-links {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
}
.dm4-footer-legal-links a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}
.dm4-footer-legal-links a:hover  { color: #fff; }
.dm4-footer-legal-links span     { color: #333; }

[data-theme="light"] .dm4-footer-legal-links          { color: #666; }
[data-theme="light"] .dm4-footer-legal-links a        { color: #555; }
[data-theme="light"] .dm4-footer-legal-links a:hover  { color: #000; }
[data-theme="light"] .dm4-footer-legal-links span     { color: #bbb; }

/* ── BLOG CARD redesign ──────────────────────────────────────────────────── */
.dm-blog-card-thumb {
    height: 200px !important;
    position: relative;
    overflow: hidden;
}
/* Text-only placeholder thumbs — show post title styled on gradient */
.dm-blog-thumb-text {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
}
.dm-blog-thumb-text::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 60%);
    z-index: 1;
}
.dm-blog-thumb-text-title {
    position: relative;
    z-index: 2;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
    font-family: var(--dm-font, 'Plus Jakarta Sans', sans-serif);
}

/* ── LEGAL / INFO page shared layout ────────────────────────────────────── */
.dm-legal-page {
    font-family: var(--dm-font, 'Plus Jakarta Sans', -apple-system, sans-serif);
    background: var(--dm-bg);
    min-height: 60vh;
    color: var(--dm-text);
}
.dm-legal-hero {
    padding: 72px 24px 56px;
    text-align: center;
    background: var(--dm-surface);
    border-bottom: 1px solid var(--dm-border);
    position: relative;
    overflow: hidden;
}
.dm-legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 50% 120%, rgba(230,0,35,.08) 0%, transparent 60%);
    pointer-events: none;
}
.dm-legal-hero-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: rgba(230,0,35,.08);
    border: 1.5px solid rgba(230,0,35,.18);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; font-size: 28px;
}
.dm-legal-hero h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    color: var(--dm-text);
    letter-spacing: -1px;
    margin: 0 0 12px;
}
.dm-legal-hero p {
    font-size: 16px;
    color: var(--dm-text-secondary);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}
.dm-legal-meta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 20px;
    font-size: 12px; font-weight: 600;
    color: var(--dm-text-muted);
    background: var(--dm-bg);
    border: 1px solid var(--dm-border);
    border-radius: 99px; padding: 5px 14px;
}
.dm-legal-body {
    max-width: 800px;
    margin: 0 auto;
    padding: 56px 24px 100px;
}
.dm-legal-toc {
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 40px;
}
.dm-legal-toc h3 {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--dm-text-muted); margin: 0 0 14px;
}
.dm-legal-toc ol {
    margin: 0; padding-left: 20px;
    display: flex; flex-direction: column; gap: 6px;
}
.dm-legal-toc li a {
    font-size: 14px; font-weight: 600; color: var(--dm-primary);
    text-decoration: none;
}
.dm-legal-toc li a:hover { text-decoration: underline; }
.dm-legal-section {
    margin-bottom: 48px;
    scroll-margin-top: 100px;
}
.dm-legal-section h2 {
    font-size: 22px; font-weight: 800; color: var(--dm-text);
    margin: 0 0 16px; letter-spacing: -0.3px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dm-border);
}
.dm-legal-section p {
    font-size: 15px; line-height: 1.75;
    color: var(--dm-text-secondary); margin: 0 0 14px;
}
.dm-legal-section ul, .dm-legal-section ol {
    padding-left: 22px; margin: 0 0 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.dm-legal-section li {
    font-size: 15px; line-height: 1.65; color: var(--dm-text-secondary);
}
.dm-legal-section a { color: var(--dm-primary); }

/* ── CONTACT PAGE ────────────────────────────────────────────────────────── */
.dm-contact-page {
    font-family: var(--dm-font, 'Plus Jakarta Sans', -apple-system, sans-serif);
    background: var(--dm-bg);
    min-height: 80vh;
}
.dm-contact-wrap {
    max-width: 720px; margin: 0 auto; padding: 56px 24px 100px;
}
.dm-contact-form-card {
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: 24px;
    padding: 40px 40px 36px;
    box-shadow: var(--dm-shadow-md);
}
@media (max-width: 520px) {
    .dm-contact-form-card { padding: 28px 22px 24px; border-radius: 18px; }
}
.dm-contact-field { margin-bottom: 22px; }
.dm-contact-label {
    display: block; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--dm-text); margin-bottom: 8px;
}
.dm-contact-label span { color: var(--dm-primary); margin-left: 2px; }
.dm-contact-input,
.dm-contact-select,
.dm-contact-textarea {
    width: 100%; padding: 13px 16px;
    border: 1.5px solid var(--dm-border);
    border-radius: 12px;
    background: var(--dm-bg);
    color: var(--dm-text);
    font-size: 15px;
    font-family: var(--dm-font, 'Plus Jakarta Sans', sans-serif);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
}
.dm-contact-input:focus,
.dm-contact-select:focus,
.dm-contact-textarea:focus {
    border-color: var(--dm-primary);
    background: var(--dm-surface);
    box-shadow: 0 0 0 3px rgba(230,0,35,.08);
}
.dm-contact-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.dm-contact-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
    cursor: pointer;
}
/* Reason type pills */
.dm-contact-types {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.dm-contact-type-btn {
    padding: 9px 20px; border-radius: 99px;
    border: 1.5px solid var(--dm-border);
    background: var(--dm-bg);
    font-size: 13px; font-weight: 700;
    color: var(--dm-text-secondary);
    cursor: pointer; transition: all .18s ease;
    font-family: inherit;
    display: flex; align-items: center; gap: 7px;
}
.dm-contact-type-btn:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.dm-contact-type-btn.active {
    background: var(--dm-primary); border-color: var(--dm-primary);
    color: #fff; box-shadow: 0 2px 10px rgba(230,0,35,.25);
}
/* Image upload zone */
.dm-contact-upload-zone {
    border: 2px dashed var(--dm-border);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
    position: relative;
    background: var(--dm-bg);
}
.dm-contact-upload-zone:hover,
.dm-contact-upload-zone.drag-over {
    border-color: var(--dm-primary);
    background: rgba(230,0,35,.03);
}
.dm-contact-upload-zone input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.dm-contact-upload-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(230,0,35,.08);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    color: var(--dm-primary);
}
.dm-contact-upload-zone p {
    font-size: 14px; font-weight: 600; color: var(--dm-text-secondary);
    margin: 0 0 4px;
}
.dm-contact-upload-zone small {
    font-size: 12px; color: var(--dm-text-muted);
}
.dm-contact-upload-preview {
    display: none; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.dm-contact-upload-preview.has-file { display: flex; }
.dm-contact-preview-item {
    position: relative; width: 80px; height: 80px;
    border-radius: 10px; overflow: hidden;
    border: 1.5px solid var(--dm-border);
}
.dm-contact-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-contact-preview-remove {
    position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 11px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; line-height: 1;
}
/* Submit */
.dm-contact-submit {
    width: 100%; padding: 15px;
    background: var(--dm-primary); color: #fff;
    border: none; border-radius: 12px;
    font-size: 16px; font-weight: 700;
    cursor: pointer;
    font-family: var(--dm-font, 'Plus Jakarta Sans', sans-serif);
    transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
    box-shadow: 0 4px 16px rgba(230,0,35,.28);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.dm-contact-submit:hover { background: var(--dm-primary-hover, #CC001F); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(230,0,35,.34); }
.dm-contact-submit:active { transform: scale(.98); }
.dm-contact-submit:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
/* Messages */
.dm-contact-msg {
    padding: 14px 18px; border-radius: 10px;
    font-size: 14px; font-weight: 600; margin-bottom: 20px;
    display: none;
}
.dm-contact-msg.ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; display: block; }
.dm-contact-msg.err { background: #fff1f2; color: #9f1239; border: 1px solid #fecaca; display: block; }
[data-theme="dark"] .dm-contact-msg.ok  { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.25); }
[data-theme="dark"] .dm-contact-msg.err { background: rgba(230,0,35,.12); color: #fca5a5; border-color: rgba(230,0,35,.25); }
[data-theme="dark"] .dm-contact-input,
[data-theme="dark"] .dm-contact-select,
[data-theme="dark"] .dm-contact-textarea {
    background: #27272a; border-color: #3f3f46; color: #f4f4f5;
}
[data-theme="dark"] .dm-contact-input:focus,
[data-theme="dark"] .dm-contact-select:focus,
[data-theme="dark"] .dm-contact-textarea:focus {
    background: #2d2d30; border-color: var(--dm-primary);
}
[data-theme="dark"] .dm-contact-upload-zone { background: #1a1a1c; border-color: #3f3f46; }
[data-theme="dark"] .dm-contact-type-btn { background: #1a1a1c; border-color: #3f3f46; color: #a1a1aa; }

/* Info cards on contact page */
.dm-contact-info-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-bottom: 36px;
}
@media (max-width: 600px) { .dm-contact-info-grid { grid-template-columns: 1fr; gap: 12px; } }
.dm-contact-info-card {
    background: var(--dm-surface); border: 1px solid var(--dm-border);
    border-radius: 16px; padding: 22px 20px;
    text-align: center; transition: transform .2s, box-shadow .2s;
}
.dm-contact-info-card:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-md); }
.dm-contact-info-card-icon {
    font-size: 28px; margin-bottom: 10px; display: block;
}
.dm-contact-info-card h3 { font-size: 14px; font-weight: 800; color: var(--dm-text); margin: 0 0 5px; }
.dm-contact-info-card p  { font-size: 13px; color: var(--dm-text-secondary); margin: 0; line-height: 1.5; }

/* Contact form two-col responsive fix */
@media (max-width: 540px) {
    .dm-contact-form-card > form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ══ Google AdSense Ad Units — DM Ads Module ══════════════════════════════
   All ad slots use these shared base styles.
   Slot-specific sizing is handled by AdSense's responsive engine.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared slot wrapper ── */
.dm-ad-unit {
    position: relative;
    width: 100%;
    overflow: hidden;
    text-align: center;
    /* Subtle separation from content */
    padding: 6px 0;
}

/* ── "Advertisement" label above each unit ── */
.dm-ad-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dm-text-muted, #9ca3af);
    margin-bottom: 4px;
    text-align: center;
    line-height: 1;
}

/* ── Header Banner slot ── */
.dm-ad-header_banner {
    background: var(--dm-bg, #fff);
    border-top: 1px solid var(--dm-border, #f0f0f0);
    border-bottom: 1px solid var(--dm-border, #f0f0f0);
    padding: 8px 0;
    min-height: 50px; /* reserve space while AdSense loads */
}
.dm-ad-header_banner ins { min-height: 50px; }

/* ── In-feed slot — blends with card grid ── */
.dm-ad-in_feed {
    border-radius: 12px;
    background: var(--dm-surface, #f9fafb);
    border: 1px solid var(--dm-border, #e5e7eb);
    padding: 10px;
    margin: 6px 0;
    grid-column: 1 / -1; /* span full masonry width */
    min-height: 90px;
}
.dm-ad-in_feed ins { min-height: 90px; }

/* ── Sidebar slot ── */
.dm-ad-sidebar {
    border-radius: 10px;
    background: var(--dm-surface, #f9fafb);
    border: 1px solid var(--dm-border, #e5e7eb);
    padding: 10px;
    margin-top: 14px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dm-ad-sidebar ins { min-height: 250px; width: 300px; max-width: 100%; }

/* ── After Content slot ── */
.dm-ad-after_content {
    border-top: 1px solid var(--dm-border, #f0f0f0);
    padding: 16px 0 8px;
    margin: 16px 0 0;
    min-height: 90px;
}
.dm-ad-after_content ins { min-height: 90px; }

/* ── Before Footer slot ── */
.dm-ad-before_footer {
    background: var(--dm-bg, #fff);
    border-top: 1px solid var(--dm-border, #e5e7eb);
    border-bottom: 1px solid var(--dm-border, #e5e7eb);
    padding: 10px 0;
    min-height: 90px;
}
.dm-ad-before_footer ins { min-height: 90px; }

/* ── Dark mode overrides ── */
[data-theme="dark"] .dm-ad-unit,
[data-theme="dark"] .dm-ad-header_banner,
[data-theme="dark"] .dm-ad-before_footer {
    background: var(--dm-bg-dark, #18181b);
    border-color: var(--dm-border-dark, #27272a);
}
[data-theme="dark"] .dm-ad-in_feed,
[data-theme="dark"] .dm-ad-sidebar {
    background: var(--dm-surface-dark, #1c1c1f);
    border-color: var(--dm-border-dark, #27272a);
}

/* ── Admin placeholder (visible only to wp admins) ── */
.dm-ad-placeholder {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

/* ── Mobile: hide sidebar ad on small screens ── */
@media (max-width: 640px) {
    .dm-ad-sidebar { display: none; }
}

/* ══ Native In-Feed Ad Card — dm-ad-card ══════════════════════════════════
   Mirrors .dm-card pixel-for-pixel so ads blend into the masonry grid.
   ═══════════════════════════════════════════════════════════════════════ */

/* Base card — inherits all .dm-card styles, adds ad-specific tweaks */
.dm-ad-card {
    /* Same break-inside, border-radius, shadow as .dm-card (inherited) */
    cursor: default; /* not a clickable card — ad handles its own click */
}

/* Image wrap — same as card but content is AdSense, not <img> */
.dm-ad-img-wrap {
    background: var(--dm-surface, #f9fafb);
    min-height: 180px; /* prevents zero-height collapse before ad loads */
    display: flex;
    flex-direction: column;
}

/* The AdSense ins tag itself */
.dm-ad-card-ins {
    flex: 1;
    min-height: 180px;
    width: 100% !important;
}

/* "Sponsored" badge — same position/size as .dm-card-badge */
.dm-card-badge--ad {
    background: rgba(255,255,255,.95) !important;
    color: #444 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    gap: 4px;
    font-size: 10px !important;
}

/* Bottom strip — same layout as .dm-card-body */
.dm-ad-card-body {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* "Advertisement" muted text matching .dm-card-title style */
.dm-ad-card-label {
    color: var(--dm-text-muted, #9ca3af) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-style: italic;
}

/* "Ad" pill — small top-right indicator */
.dm-ad-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    background: #e5e7eb;
    color: #6b7280;
    text-transform: uppercase;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.06);
}

/* Admin placeholder when slot not configured */
.dm-ad-card-placeholder {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        45deg,
        #f9fafb,
        #f9fafb 10px,
        #f3f4f6 10px,
        #f3f4f6 20px
    ) !important;
    flex: 1;
    padding: 24px 16px;
}

.dm-ad-card-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.dm-ad-card-placeholder-inner span {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
}

.dm-ad-card-placeholder-inner a {
    font-size: 11px;
    color: #E60023;
    text-decoration: none;
    font-weight: 700;
}

/* Dark mode */
[data-theme="dark"] .dm-card-badge--ad {
    background: rgba(30,30,32,.95) !important;
    color: #d1d5db !important;
}

[data-theme="dark"] .dm-ad-pill {
    background: #27272a;
    color: #9ca3af;
    border-color: rgba(255,255,255,.06);
}

[data-theme="dark"] .dm-ad-img-wrap {
    background: var(--dm-surface-dark, #1c1c1f);
}

/* No hover lift on ad card (it's not a navigable item) */
.dm-ad-card:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04) !important;
}


/* ══ Category Pill Personalisation — DM Personalize ══════════════════════
   Shared transitions, "For you" chip, and reset tooltip.
   ═══════════════════════════════════════════════════════════════════════ */

/* Smooth repositioning for all pills (used during FLIP reorder) */
.dm-cat-btn {
    will-change: transform;
    /* existing transition may be 'none' or on background — we extend it */
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1),
                background 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease !important;
}

/* ── "For you" badge wrapper ── */
.dm-foryou-badge {
    display: none !important; /* hidden: personalisation still runs, badge just not shown */
    position: relative;
    /* display: inline-flex; — kept for reference if re-enabling */
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #E60023 0%, #ff6b6b 100%);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 8px rgba(230,0,35,.28);
    align-self: center;           /* vertical-centre in pill row flex */
    white-space: nowrap;
    /* Appears in the pill container, so make it sit on its own row or inline */
    margin: 0 4px 0 0;
    flex-shrink: 0;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    animation: dm-foryou-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes dm-foryou-pop {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

.dm-foryou-badge:hover {
    box-shadow: 0 4px 14px rgba(230,0,35,.38);
    transform: translateY(-1px);
}

.dm-foryou-icon {
    font-size: 9px;
    line-height: 1;
}

.dm-foryou-label {
    font-size: 10.5px;
    font-weight: 800;
}

/* ── Tooltip ── */
.dm-foryou-tooltip {
    display: none;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 240px;
    /* Prevent tooltip clipping on the left edge of the screen */
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    /* Generous padding so text never touches the walls */
    padding: 14px 16px 14px 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    font-size: 12.5px;
    color: #4b5563;
    font-weight: 500;
    line-height: 1.55;
    z-index: 500;
    pointer-events: none;
    white-space: normal;
    /* Arrow pointer */
    animation: dm-tooltip-in 0.18s ease both;
}

/* Small arrow pointing up to the badge */
.dm-foryou-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 16px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

@keyframes dm-tooltip-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dm-foryou-badge.dm-foryou-open .dm-foryou-tooltip {
    display: flex;
    pointer-events: auto;
}

/* ── Reset button — always visible in both light and dark ── */
.dm-foryou-reset {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    /* High-contrast defaults so it's always readable */
    background: #f3f4f6;
    border: 1.5px solid #d1d5db;
    color: #111827;
    letter-spacing: .01em;
    margin-top: 2px;
}

.dm-foryou-reset:hover {
    background: #E60023;
    border-color: #E60023;
    color: #ffffff;
}

/* ── Pill row layout — base scrollable row ── */
.dm-categories {
    display:             flex !important;
    flex-wrap:           nowrap !important;
    overflow-x:          scroll !important;
    align-items:         center !important;
    scrollbar-width:     none !important;
    -ms-overflow-style:  none !important;
    box-sizing:          border-box !important;
}
.dm-categories::-webkit-scrollbar { display: none !important; }

/* Wrap badge + pills in a shared flex row */
.dm-cat-personalise-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

/* ── Dark mode fixes ── */
[data-theme="dark"] .dm-foryou-tooltip {
    background: #1c1c1f;
    border-color: #3f3f46;
    color: #d1d5db;
}

[data-theme="dark"] .dm-foryou-tooltip::before {
    background: #1c1c1f;
    border-color: #3f3f46;
}

/* Reset button in dark mode — solid background, clear text, always readable */
[data-theme="dark"] .dm-foryou-reset {
    background: #27272a;
    border-color: #52525b;
    color: #f4f4f5;   /* near-white so it's always visible */
}

[data-theme="dark"] .dm-foryou-reset:hover {
    background: #E60023;
    border-color: #E60023;
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME FEED REDESIGN v4 — Fast + Modern
   Performance rules:
   • NO will-change on all cards (kills GPU memory with 20+ cards)
   • NO simultaneous card animations (causes paint jank on load)
   • NO backdrop-filter on category bar (expensive on low-end devices)
   • Simple fade-in only on newly injected infinite-scroll cards
   • contain:layout only where safe
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── MASONRY: column layout with proper gaps ─────────────────────────────── */
.dm-masonry,
.dm-home-masonry {
    column-count: 5 !important;
    column-gap: 12px !important;
    padding: 18px 16px 56px !important;
    display: block !important;
    overflow-anchor: none !important;
}
@media (max-width: 1400px) { .dm-masonry,.dm-home-masonry { column-count: 4 !important; } }
@media (max-width: 1024px) { .dm-masonry,.dm-home-masonry { column-count: 3 !important; } }
@media (max-width:  680px) { .dm-masonry,.dm-home-masonry { column-count: 2 !important; column-gap: 8px !important;  padding: 12px 10px 40px !important; } }
@media (max-width:  400px) { .dm-masonry,.dm-home-masonry { column-count: 2 !important; column-gap: 7px  !important;  padding: 10px  8px 32px !important; } }

/* ── CARD BASE — lean, no will-change, no animations by default ──────────── */
.dm-card,
.dm-ad-card {
    break-inside:          avoid !important;
    -webkit-column-break-inside: avoid !important;
    display:               block !important;
    width:                 100% !important;
    margin-bottom:         12px !important;
    background:            #fff !important;
    border-radius:         14px !important;
    overflow:              hidden !important;
    border:                1px solid rgba(0,0,0,.08) !important;
    box-shadow:            0 1px 3px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.05) !important;
    cursor:                pointer !important;
    /* transition ONLY properties that are cheap (no layout) */
    transition:            transform .22s cubic-bezier(.34,1.2,.64,1),
                           box-shadow .22s ease !important;
    /* NO will-change here — add only on hover below */
    position:              relative !important;
    contain:               layout !important;   /* scope layout recalcs */
}
@media (max-width: 768px) {
    .dm-card, .dm-ad-card {
        margin-bottom: 8px !important;
        border-radius: 12px !important;
    }
}

/* will-change only when the user is about to interact */
.dm-card:hover,
.dm-card:focus-within {
    will-change:  transform !important;
    transform:    translateY(-4px) scale(1.012) !important;
    box-shadow:   0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
    border-color: rgba(0,0,0,.05) !important;
    z-index:      5 !important;
}
.dm-card:active {
    transform: scale(.985) !important;
    transition-duration: .08s !important;
}

/* ── IMAGE: exact uploaded dimensions — no forced crop, no uniform height ── */
.dm-card-img-wrap {
    position:      relative !important;
    overflow:      hidden !important;
    background:    #f1f3f5 !important;
    border-radius: 14px 14px 0 0 !important;
    display:       block !important;
    /* No min-height, no aspect-ratio — let the uploaded image dictate its own height */
}
.dm-card-img {
    width:        100% !important;
    height:       auto !important;       /* ← exact author-uploaded dimensions */
    max-height:   none !important;       /* ensure no cap is applied */
    object-fit:   unset !important;      /* no cropping — show full image */
    display:      block !important;
    transition:   transform .4s cubic-bezier(.25,.46,.45,.94) !important;
}
.dm-card:hover .dm-card-img { transform: scale(1.04) !important; }

/* Soft fade-in when image first loads (cheap opacity only) */
.dm-card-img { animation: dm-img-fade .2s ease both !important; }
@keyframes dm-img-fade { from { opacity: 0; } to { opacity: 1; } }

/* Placeholder */
.dm4-card-placeholder {
    width:            100% !important;
    aspect-ratio:     4 / 5 !important;
    background:       linear-gradient(145deg, #f3f4f6, #e8eaed) !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    font-size:        34px !important;
}

/* ── OVERLAY ─────────────────────────────────────────────────────────────── */
.dm-card-overlay {
    position:        absolute !important;
    inset:           0 !important;
    z-index:         3 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    background:      rgba(0,0,0,0) !important;
    opacity:         0 !important;
    text-decoration: none !important;
    transition:      opacity .18s ease, background .18s ease !important;
    border-radius:   14px 14px 0 0 !important;
}
.dm-card:hover .dm-card-overlay {
    opacity:    1 !important;
    background: rgba(0,0,0,.28) !important;
}
.dm-card-view-btn {
    background:      #fff !important;
    color:           #111 !important;
    padding:         8px 22px !important;
    border-radius:   999px !important;
    font-weight:     700 !important;
    font-size:       13px !important;
    box-shadow:      0 3px 14px rgba(0,0,0,.22) !important;
    pointer-events:  none !important;
    transform:       translateY(8px) scale(.92) !important;
    transition:      transform .2s cubic-bezier(.34,1.56,.64,1) !important;
    display:         inline-block !important;
    border:          none !important;
    letter-spacing:  .01em !important;
}
.dm-card:hover .dm-card-view-btn { transform: translateY(0) scale(1) !important; }

/* ── CATEGORY BADGE ──────────────────────────────────────────────────────── */
.dm-card-badge,
.dm-card-badge--cat {
    position:       absolute !important;
    top:            10px !important;
    left:           10px !important;
    z-index:        4 !important;
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            5px !important;
    color:          #fff !important;
    background:     rgba(10,10,10,.78) !important;
    font-size:      10.5px !important;
    font-weight:    700 !important;
    padding:        4px 10px 4px 8px !important;
    border-radius:  999px !important;
    line-height:    1 !important;
    white-space:    nowrap !important;
    max-width:      calc(100% - 20px) !important;
    overflow:       hidden !important;
    text-overflow:  ellipsis !important;
    letter-spacing: .01em !important;
    border:         none !important;
    /* no backdrop-filter — skip GPU compositing cost */
    box-shadow:     0 1px 4px rgba(0,0,0,.25) !important;
}
.dm-card-badge img {
    width: 13px !important; height: 13px !important;
    border-radius: 3px !important; flex-shrink: 0 !important;
}

/* ── CARD BODY ───────────────────────────────────────────────────────────── */
a.dm-card-body {
    display:         flex !important;
    flex-direction:  row !important;
    align-items:     flex-start !important;
    justify-content: space-between !important;
    gap:             7px !important;
    padding:         9px 11px 11px !important;
    text-decoration: none !important;
    color:           inherit !important;
}
.dm-card-title {
    font-size:              13px !important;
    font-weight:            600 !important;
    color:                  #1a1a1a !important;
    line-height:            1.4 !important;
    letter-spacing:         -.01em !important;
    display:                -webkit-box !important;
    -webkit-line-clamp:     2 !important;
    -webkit-box-orient:     vertical !important;
    overflow:               hidden !important;
    flex:                   1 !important;
    min-width:              0 !important;
    margin:                 0 !important;
    padding:                0 !important;
    transition:             color .14s ease !important;
}
a.dm-card-body:hover .dm-card-title,
.dm-card:hover .dm-card-title { color: #E60023 !important; }

.dm-card-likes {
    display:      inline-flex !important;
    align-items:  center !important;
    gap:          3px !important;
    color:        #E60023 !important;
    font-size:    11px !important;
    font-weight:  700 !important;
    flex-shrink:  0 !important;
    white-space:  nowrap !important;
    padding-top:  1px !important;
}
@media (max-width: 768px) {
    a.dm-card-body  { padding: 7px 9px 9px !important; }
    .dm-card-title  { font-size: 12px !important; }
    .dm-card-likes  { font-size: 10.5px !important; }
}

/* ── SKELETON ────────────────────────────────────────────────────────────── */
.dm-card-skeleton {
    break-inside:   avoid !important;
    -webkit-column-break-inside: avoid !important;
    display:        block !important;
    width:          100% !important;
    margin-bottom:  12px !important;
    border-radius:  14px !important;
    /* cheap shimmer: single background-position animation, no transform */
    background:     linear-gradient(90deg,
                        #ececec 0%,
                        #f5f5f5 40%,
                        #ececec 80%) !important;
    background-size: 300% 100% !important;
    animation:       dm-shimmer 1.6s linear infinite !important;
    min-height:      220px !important;
    contain:         strict !important;
}
@keyframes dm-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* ── GOOGLE AD CARD ──────────────────────────────────────────────────────── */
.dm-ad-card { cursor: default !important; }

/* Hold space before AdSense iframe renders */
.dm-ad-img-wrap {
    background:     #f8f9fb !important;
    min-height:     240px !important;
    display:        flex !important;
    flex-direction: column !important;
    border-radius:  14px 14px 0 0 !important;
}
.dm-ad-card-ins {
    flex:       1 !important;
    min-height: 240px !important;
    width:      100% !important;
    display:    block !important;
}

/* Sponsored badge */
.dm-card-badge--ad {
    background:  rgba(255,255,255,.94) !important;
    color:       #555 !important;
    font-size:   10px !important;
    gap:         4px !important;
    box-shadow:  0 1px 4px rgba(0,0,0,.14) !important;
}

/* Ad bottom strip */
.dm-ad-card-body {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         9px 11px 11px !important;
}
.dm-ad-card-label {
    color:      #9ca3af !important;
    font-size:  11px !important;
    font-weight: 500 !important;
    font-style: italic !important;
}
.dm-ad-pill {
    display:       inline-flex !important;
    align-items:   center !important;
    padding:       2px 7px !important;
    border-radius: 4px !important;
    font-size:     9px !important;
    font-weight:   800 !important;
    letter-spacing:.07em !important;
    background:    #e9eaec !important;
    color:         #6b7280 !important;
    text-transform:uppercase !important;
    border:        1px solid rgba(0,0,0,.07) !important;
}

/* Admin placeholder (when slot not configured) */
.dm-ad-card-placeholder {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex:            1 !important;
    min-height:      180px !important;
    background:      repeating-linear-gradient(
                         45deg,#f9fafb,#f9fafb 10px,#f3f4f6 10px,#f3f4f6 20px
                     ) !important;
}
.dm-ad-card-placeholder-inner {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    text-align:     center !important;
    gap:            5px !important;
}
.dm-ad-card-placeholder-inner span { font-size:11px !important; color:#6b7280 !important; font-weight:600 !important; }
.dm-ad-card-placeholder-inner a    { font-size:11px !important; color:#E60023 !important; text-decoration:none !important; font-weight:700 !important; }

/* No hover on ad cards */
.dm-ad-card:hover {
    transform:   none !important;
    will-change: auto !important;
    box-shadow:  0 1px 3px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.05) !important;
}

/* ── CATEGORY BAR ────────────────────────────────────────────────────────── */
/* ── CATEGORY BAR — sticky + scrollable via JS drag ─────────────────────── */
/* KEY: overflow-x:scroll creates a real scroll container even when sticky.
   JS manipulates scrollLeft directly — browser drag works on sticky elements. */
.dm-categories,
#dm-categories {
    display:                    flex !important;
    flex-wrap:                  nowrap !important;
    gap:                        7px !important;
    padding:                    12px 16px !important;
    /* overflow-x:scroll always creates a scroll container, unlike auto */
    overflow-x:                 scroll !important;
    overflow-y:                 visible !important;
    scrollbar-width:            none !important;
    -ms-overflow-style:         none !important;
    -webkit-overflow-scrolling: touch !important;
    /* sticky: bar pins below the site header while user scrolls the page */
    position:                   sticky !important;
    top:                        var(--dm-header-h, 80px) !important;
    z-index:                    50 !important;
    /* solid bg colours */
    background:                 #fff !important;
    border-bottom:              1px solid rgba(0,0,0,.08) !important;
    /* explicit sizing so it never shrinks/grows beyond viewport */
    width:                      100% !important;
    max-width:                  100% !important;
    box-sizing:                 border-box !important;
    /* No fade/mask — clean edges */
    -webkit-mask-image:         none !important;
    mask-image:                 none !important;
    /* cursor hints for drag-scroll */
    cursor:                     grab !important;
    /* prevent accidental text selection during drag */
    user-select:                none !important;
    -webkit-user-select:        none !important;
}
.dm-categories:active,
#dm-categories:active         { cursor: grabbing !important; }
.dm-categories::-webkit-scrollbar,
#dm-categories::-webkit-scrollbar { display: none !important; }
[data-theme="dark"] .dm-categories,
[data-theme="dark"] #dm-categories {
    background:    #18181b !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* ── Mobile: header is hidden, pills must stick to very top (top:0) ─────── */
@media (max-width: 768px) {
    .dm-categories,
    #dm-categories {
        top:  0 !important;
        position: sticky !important;
    }
}

.dm-cat-btn {
    flex-shrink:    0 !important;
    background:     rgba(0,0,0,.06) !important;
    border:         1.5px solid transparent !important;
    color:          #4b5563 !important;
    font-size:      13px !important;
    font-weight:    600 !important;
    padding:        7px 16px !important;
    border-radius:  999px !important;
    cursor:         pointer !important;
    white-space:    nowrap !important;
    letter-spacing: -.01em !important;
    transition:     background .16s ease, color .16s ease,
                    border-color .16s ease, transform .18s ease,
                    box-shadow .16s ease !important;
}
.dm-cat-btn:hover {
    background:   rgba(230,0,35,.07) !important;
    color:        #E60023 !important;
    border-color: rgba(230,0,35,.22) !important;
    transform:    translateY(-1px) !important;
}
.dm-cat-btn.active {
    background:   #E60023 !important;
    color:        #fff !important;
    border-color: #E60023 !important;
    box-shadow:   0 3px 12px rgba(230,0,35,.32) !important;
    transform:    scale(.96) !important;
}

/* ── INFINITE SCROLL LOADER ──────────────────────────────────────────────── */
.dm-infinite-status {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             10px !important;
    padding:         28px 0 44px !important;
    color:           #9ca3af !important;
    font-size:       13.5px !important;
    font-weight:     500 !important;
}
/* Cheap spinner: border + rotate (single composite layer) */
.dm-infinite-spinner {
    display:      inline-block !important;
    width:        22px !important;
    height:       22px !important;
    border:       2.5px solid #f0f0f0 !important;
    border-top:   2.5px solid #E60023 !important;
    border-radius:50% !important;
    animation:    dm-spin .65s linear infinite !important;
    flex-shrink:  0 !important;
}
@keyframes dm-spin { to { transform: rotate(360deg); } }

/* Fade-in for newly injected cards via infinite scroll */
.dm-card.dm-new-card {
    animation: dm-card-fadein .3s ease both !important;
}
@keyframes dm-card-fadein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dm-load-btn {
    display:        block !important;
    margin:         4px auto 44px !important;
    background:     #fff !important;
    border:         1.5px solid rgba(230,0,35,.28) !important;
    color:          #E60023 !important;
    font-size:      14px !important;
    font-weight:    700 !important;
    padding:        13px 38px !important;
    border-radius:  999px !important;
    cursor:         pointer !important;
    letter-spacing: .01em !important;
    transition:     background .16s, transform .14s, box-shadow .16s !important;
}
.dm-load-btn:hover {
    background:  rgba(230,0,35,.04) !important;
    box-shadow:  0 4px 18px rgba(230,0,35,.18) !important;
    transform:   translateY(-2px) !important;
}

/* ── DARK MODE ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .dm-card,
[data-theme="dark"] .dm-ad-card {
    background:  #161616 !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow:  0 1px 4px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.32) !important;
}
[data-theme="dark"] .dm-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .dm-card-img-wrap { background: #1e1e1e !important; }
[data-theme="dark"] .dm-card-title    { color: #efefef !important; }
[data-theme="dark"] .dm4-card-placeholder {
    background: linear-gradient(145deg, #1e1e1e, #252527) !important;
}
[data-theme="dark"] .dm-card-badge,
[data-theme="dark"] .dm-card-badge--cat { background: rgba(0,0,0,.75) !important; }
[data-theme="dark"] .dm-card-badge--ad  { background: rgba(22,22,26,.94) !important; color: #ccc !important; }
[data-theme="dark"] .dm-ad-img-wrap     { background: #1c1c1e !important; }
[data-theme="dark"] .dm-ad-pill         { background: #2a2a2e !important; color: #9ca3af !important; border-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .dm-categories,
[data-theme="dark"] #dm-categories      { background: #0a0a0a !important; border-bottom-color: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .dm-cat-btn         { background: rgba(255,255,255,.07) !important; color: #9ca3af !important; }
[data-theme="dark"] .dm-cat-btn:hover   { background: rgba(230,0,35,.10) !important; color: #ff4060 !important; }
[data-theme="dark"] .dm-cat-btn.active  { background: #E60023 !important; color: #fff !important; }
[data-theme="dark"] .dm-card-skeleton   {
    background: linear-gradient(90deg, #1e1e1e 0%, #2a2a2a 40%, #1e1e1e 80%) !important;
    background-size: 300% 100% !important;
}
[data-theme="dark"] .dm-load-btn       { background: transparent !important; color: #ff4466 !important; border-color: rgba(230,0,35,.3) !important; }
[data-theme="dark"] .dm-load-btn:hover { background: rgba(230,0,35,.07) !important; }
[data-theme="dark"] .dm-infinite-spinner { border-color: #2a2a2a !important; border-top-color: #E60023 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   NEW FEATURES — v3.1.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Category bar: special tabs + divider ────────────────────────────────── */
.dm-cat-divider {
    width: 1px !important;
    background: rgba(0,0,0,.12) !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    margin: 4px 2px !important;
}
[data-theme="dark"] .dm-cat-divider { background: rgba(255,255,255,.1) !important; }

.dm-cat-btn--special { font-size: 12.5px !important; }

.dm-cat-trending-active {
    background: linear-gradient(135deg,#ff6b35,#E60023) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(230,0,35,.35) !important;
}
.dm-cat-following-active {
    background: linear-gradient(135deg,#5b21b6,#7c3aed) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(124,58,237,.35) !important;
}

/* ── Copy-to-AI row ──────────────────────────────────────────────────────── */
.dm-copy-ai-row {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
}
.dm-copy-ai-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--dm-text-muted, #888) !important;
    flex-shrink: 0 !important;
    letter-spacing: .01em !important;
}
.dm-copy-ai-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(0,0,0,.1) !important;
    background: #fff !important;
    color: #222 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, transform .13s !important;
    letter-spacing: .01em !important;
}
.dm-copy-ai-btn:hover {
    background: #f9f9f9 !important;
    border-color: rgba(0,0,0,.2) !important;
    transform: translateY(-1px) !important;
}
.dm-copy-ai-chatgpt { border-color: rgba(16,163,127,.35) !important; color: #10a37f !important; }
.dm-copy-ai-chatgpt:hover { background: rgba(16,163,127,.06) !important; border-color: #10a37f !important; }
.dm-copy-ai-claude  { border-color: rgba(215,119,69,.35) !important;  color: #d77745 !important; }
.dm-copy-ai-claude:hover  { background: rgba(215,119,69,.06) !important; border-color: #d77745 !important; }
.dm-copy-ai-gemini  { border-color: rgba(66,133,244,.35) !important;  color: #4285f4 !important; }
.dm-copy-ai-gemini:hover  { background: rgba(66,133,244,.06) !important; border-color: #4285f4 !important; }
[data-theme="dark"] .dm-copy-ai-btn { background: #1e1e1e !important; border-color: rgba(255,255,255,.12) !important; color: #f4f4f5 !important; }
[data-theme="dark"] .dm-copy-ai-btn .dm-tool-btn-label { color: #f4f4f5 !important; }
[data-theme="dark"] .dm-copy-ai-label { color: rgba(255,255,255,.55) !important; }
[data-theme="light"] .dm-copy-ai-btn { color: #222 !important; }
[data-theme="light"] .dm-copy-ai-btn .dm-tool-btn-label { color: #222 !important; }
[data-theme="light"] .dm-copy-ai-label { color: #888 !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dm-copy-ai-btn { color: #f4f4f5 !important; }
    :root:not([data-theme="light"]) .dm-copy-ai-btn .dm-tool-btn-label { color: #f4f4f5 !important; }
    :root:not([data-theme="light"]) .dm-copy-ai-label { color: rgba(255,255,255,.55) !important; }
}

/* ── Version history panel ───────────────────────────────────────────────── */
.dm-versions-wrap {
    margin-bottom: 12px !important;
}
.dm-versions-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--dm-text-muted, #888) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
    letter-spacing: .01em !important;
    transition: color .15s !important;
}
.dm-versions-toggle:hover { color: var(--dm-primary, #E60023) !important; }

.dm-versions-panel {
    margin-top: 8px !important;
    background: var(--dm-surface, #f9fafb) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
}
[data-theme="dark"] .dm-versions-panel {
    background: #1c1c1e !important;
    border-color: rgba(255,255,255,.07) !important;
}

.dm-versions-list { max-height: 220px; overflow-y: auto; }

.dm-version-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    font-size: 12.5px !important;
}
.dm-version-item:last-child { border-bottom: none !important; }
[data-theme="dark"] .dm-version-item { border-bottom-color: rgba(255,255,255,.05) !important; }

.dm-version-num  { font-weight: 700 !important; color: #E60023 !important; min-width: 28px !important; }
.dm-version-note { flex: 1 !important; color: var(--dm-text, #222) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-version-date { font-size: 11px !important; color: var(--dm-text-muted, #888) !important; flex-shrink: 0 !important; }
.dm-version-chars{ font-size: 11px !important; color: var(--dm-text-muted, #888) !important; flex-shrink: 0 !important; }
.dm-version-restore {
    background: none !important;
    border: 1px solid rgba(230,0,35,.3) !important;
    color: #E60023 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background .14s !important;
}
.dm-version-restore:hover { background: rgba(230,0,35,.07) !important; }

.dm-push-version-wrap {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(0,0,0,.07) !important;
}
[data-theme="dark"] .dm-push-version-wrap { border-top-color: rgba(255,255,255,.06) !important; }

.dm-push-version-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #E60023 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: opacity .15s !important;
}
.dm-push-version-btn:hover    { opacity: .88 !important; }
.dm-push-version-btn:disabled { opacity: .45 !important; cursor: default !important; }

.dm-version-note-input {
    flex: 1 !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 8px !important;
    padding: 7px 11px !important;
    font-size: 12.5px !important;
    color: var(--dm-text, #222) !important;
    outline: none !important;
}
.dm-version-note-input:focus { border-color: #E60023 !important; }
[data-theme="dark"] .dm-version-note-input {
    background: #252525 !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #f0f0f0 !important;
}
.dm-versions-empty { font-size: 12px !important; color: var(--dm-text-muted,#888) !important; text-align: center; padding: 10px 0 !important; }
.dm-versions-loading { font-size: 12px !important; color: var(--dm-text-muted,#888) !important; text-align: center; padding: 8px 0 !important; }

/* ── FOOTER LIGHT MODE FIX (loaded last → highest priority) ──────────────── */
[data-theme="light"] .dm4-footer {
    background: #f3f4f6 !important;
    color: #555 !important;
    border-top: 1px solid #d1d5db !important;
}
[data-theme="light"] .dm4-footer-inner          { background: #f3f4f6 !important; }
[data-theme="light"] .dm4-footer-bottom         { background: #f3f4f6 !important; color: #666 !important; border-top: 1px solid #d1d5db !important; }
[data-theme="light"] .dm4-footer-toggle-row     { background: #f3f4f6 !important; border-top: 1px solid #d1d5db !important; }
[data-theme="light"] .dm4-footer-logo           { color: #111 !important; }
[data-theme="light"] .dm4-footer-brand-name     { color: #111 !important; }
[data-theme="light"] .dm4-footer-tagline        { color: #666 !important; }
[data-theme="light"] .dm4-footer-col h4         { color: #111 !important; }
[data-theme="light"] .dm4-footer-col a          { color: #555 !important; }
[data-theme="light"] .dm4-footer-col a:hover    { color: #000 !important; }
[data-theme="light"] .dm4-footer-legal-links    { color: #666 !important; }
[data-theme="light"] .dm4-footer-legal-links a  { color: #555 !important; }
[data-theme="light"] .dm4-footer-legal-links a:hover { color: #000 !important; }
[data-theme="light"] .dm4-footer-legal-links span    { color: #bbb !important; }
[data-theme="light"] .dm4-footer-toggle-label   { color: #555 !important; }