html[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .bgfx {
    background:
        radial-gradient(900px 520px at 18% 18%, rgba(255, 255, 255, .025), transparent 55%),
        radial-gradient(800px 520px at 80% 28%, rgba(255, 255, 255, .02), transparent 55%),
        radial-gradient(900px 560px at 50% 100%, rgba(255, 255, 255, .015), transparent 60%),
        linear-gradient(to bottom, #111315, #181a1c);
}

html[data-theme="dark"] .glass {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text);
}

html[data-theme="dark"] .chip,
html[data-theme="dark"] .pill {
    background: var(--chip-bg) !important;
    border: 1px solid var(--chip-border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .muted {
    color: var(--muted) !important;
}

html[data-theme="dark"] .thin {
    color: var(--thin) !important;
}

html[data-theme="dark"] .cta {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: 1px solid var(--border-strong) !important;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--bg-strong) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}

html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .select::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--thin) !important;
}

html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .05) !important;
    border-color: var(--border-strong) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
    color: var(--text);
    border-color: var(--border) !important;
}

html[data-theme="dark"] thead.thin,
html[data-theme="dark"] thead .thin {
    color: var(--thin) !important;
}

html[data-theme="dark"] a {
    color: inherit;
}

html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .section-head,
html[data-theme="dark"] .video-card {
    color: var(--text);
}

html[data-theme="dark"] .tool-card p,
html[data-theme="dark"] .section-sub,
html[data-theme="dark"] .owner-note,
html[data-theme="dark"] .video-desc {
    color: var(--muted) !important;
}

html[data-theme="dark"] .card-pill {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
}

html[data-theme="dark"] .icon-badge {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .unread {
    background: var(--text) !important;
    color: var(--bg) !important;
    border: 1px solid var(--border-strong) !important;
}

html[data-theme="dark"] .disabled,
html[data-theme="dark"] .owner-locked {
    opacity: .5;
}

html[data-theme="dark"] .btn:hover {
    opacity: .98;
}

html[data-theme="dark"] .hover\:bg-black\/5:hover {
    background: rgba(255, 255, 255, .05) !important;
}

html[data-theme="dark"] .hover\:bg-black\/10:hover {
    background: rgba(255, 255, 255, .07) !important;
}

html[data-theme="dark"] .border-black\/5,
html[data-theme="dark"] .border-black\/10,
html[data-theme="dark"] .border-black\/12 {
    border-color: var(--border) !important;
}

html[data-theme="dark"] .bg-black\/5,
html[data-theme="dark"] .bg-black\/10 {
    background: rgba(255, 255, 255, .05) !important;
}

html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-black\/70,
html[data-theme="dark"] .text-black\/80 {
    color: var(--text) !important;
}

html[data-theme="dark"] .text-red-700 {
    color: #fca5a5 !important;
}

html[data-theme="dark"] .bg-red-500\/10 {
    background: rgba(239, 68, 68, .12) !important;
}

html[data-theme="dark"] .border-red-500\/25,
html[data-theme="dark"] .border-red-500\/30 {
    border-color: rgba(239, 68, 68, .24) !important;
}

/* neutralize colourful section gradients/cards in dark mode */
html[data-theme="dark"] .section-design,
html[data-theme="dark"] .section-comms,
html[data-theme="dark"] .section-data,
html[data-theme="dark"] .section-money {
    --section-accent: rgba(255, 255, 255, .30) !important;
    --section-accent-soft: rgba(255, 255, 255, .04) !important;
}

html[data-theme="dark"] .section-design .section-head,
html[data-theme="dark"] .section-comms .section-head,
html[data-theme="dark"] .section-data .section-head,
html[data-theme="dark"] .section-money .section-head {
    background: linear-gradient(135deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015)) !important;
}

html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .video-card {
    background: var(--bg-strong) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .tool-card:hover,
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .video-card:hover {
    border-color: var(--border-strong) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] .tool-card::before,
html[data-theme="dark"] .card::before {
    opacity: .8;
}

html[data-theme="dark"] .tool-card::after,
html[data-theme="dark"] .card::after {
    background: rgba(255, 255, 255, .03) !important;
}