/* =========================================================
   Y2SaverPro Dark Mode
   Separate stylesheet - Light mode remains untouched
   ========================================================= */

html.y2-dark-mode,
body.y2-dark-mode {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Main page */
body.y2-dark-mode main,
body.y2-dark-mode .main,
body.y2-dark-mode .content,
body.y2-dark-mode .container,
body.y2-dark-mode .panel {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Header */
body.y2-dark-mode .y2-site-header {
    background: #111827 !important;
    border-bottom-color: #243244 !important;
    box-shadow: 0 3px 14px rgba(0,0,0,.25) !important;
}

body.y2-dark-mode .y2-nav-link {
    color: #e2e8f0 !important;
}

body.y2-dark-mode .y2-nav-link:hover {
    color: #ff4d5a !important;
}

/* Mobile menu */
body.y2-dark-mode .y2-mobile-menu-button span {
    background: #e2e8f0 !important;
}

body.y2-dark-mode .y2-mobile-nav {
    background: #111827 !important;
    border-color: #243244 !important;
}

body.y2-dark-mode .y2-mobile-nav-link {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

body.y2-dark-mode .y2-mobile-nav-link:hover {
    background: #273449 !important;
    color: #ff4d5a !important;
}

/* Language */
body.y2-dark-mode .y2-language-button {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.y2-dark-mode .y2-language-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.y2-dark-mode .y2-language-menu a {
    color: #e2e8f0 !important;
}

body.y2-dark-mode .y2-language-menu a:hover {
    background: #273449 !important;
    color: #ff4d5a !important;
}

/* Typography */
body.y2-dark-mode h1,
body.y2-dark-mode h2,
body.y2-dark-mode h3,
body.y2-dark-mode h4,
body.y2-dark-mode h5,
body.y2-dark-mode h6 {
    color: #f8fafc !important;
}

body.y2-dark-mode p,
body.y2-dark-mode li,
body.y2-dark-mode label,
body.y2-dark-mode small {
    color: #cbd5e1 !important;
}

/* Inputs */
body.y2-dark-mode input,
body.y2-dark-mode textarea,
body.y2-dark-mode select {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.y2-dark-mode input::placeholder,
body.y2-dark-mode textarea::placeholder {
    color: #94a3b8 !important;
}

/* Common cards */
body.y2-dark-mode .card,
body.y2-dark-mode .box,
body.y2-dark-mode .well,
body.y2-dark-mode .modal-content {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Automatically detected light/white surfaces */
body.y2-dark-mode .y2-auto-dark-surface {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
}

body.y2-dark-mode .y2-auto-dark-surface p,
body.y2-dark-mode .y2-auto-dark-surface li,
body.y2-dark-mode .y2-auto-dark-surface label,
body.y2-dark-mode .y2-auto-dark-surface small,
body.y2-dark-mode .y2-auto-dark-surface span {
    color: #cbd5e1 !important;
}

body.y2-dark-mode .y2-auto-dark-surface h1,
body.y2-dark-mode .y2-auto-dark-surface h2,
body.y2-dark-mode .y2-auto-dark-surface h3,
body.y2-dark-mode .y2-auto-dark-surface h4,
body.y2-dark-mode .y2-auto-dark-surface h5,
body.y2-dark-mode .y2-auto-dark-surface h6 {
    color: #f8fafc !important;
}

/* Keep important red CTA buttons red */
body.y2-dark-mode button,
body.y2-dark-mode a {
    -webkit-tap-highlight-color: transparent;
}

/* Search area */
body.y2-dark-mode .y2-search-box,
body.y2-dark-mode .y2-search-input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Footer */
body.y2-dark-mode footer,
body.y2-dark-mode .y2-footer,
body.y2-dark-mode .y2-footer-main {
    background: #111827 !important;
    color: #cbd5e1 !important;
    border-color: #243244 !important;
}

body.y2-dark-mode footer a,
body.y2-dark-mode .y2-footer a {
    color: #cbd5e1 !important;
}

body.y2-dark-mode footer a:hover,
body.y2-dark-mode .y2-footer a:hover {
    color: #ff4d5a !important;
}

/* Dark-mode toggle */
.y2-theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dbe2ea;
    border-radius: 9px;
    background: #fff;
    color: #10213d;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.y2-theme-toggle:hover {
    transform: translateY(-1px);
}

body.y2-dark-mode .y2-theme-toggle {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Final surface override */
body.y2-dark-mode .y2-auto-dark-surface {
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

body.y2-dark-mode .y2-auto-dark-surface * {
    border-color: #334155;
}

body.y2-dark-mode .y2-auto-dark-surface h1,
body.y2-dark-mode .y2-auto-dark-surface h2,
body.y2-dark-mode .y2-auto-dark-surface h3,
body.y2-dark-mode .y2-auto-dark-surface h4,
body.y2-dark-mode .y2-auto-dark-surface h5,
body.y2-dark-mode .y2-auto-dark-surface h6 {
    color: #f8fafc !important;
}

body.y2-dark-mode .y2-auto-dark-surface p,
body.y2-dark-mode .y2-auto-dark-surface span,
body.y2-dark-mode .y2-auto-dark-surface li,
body.y2-dark-mode .y2-auto-dark-surface label {
    color: #cbd5e1 !important;
}

/* =========================================================
   Y2SaverPro Dark Mode - Readability & Card Fix
   ========================================================= */

/* Feature cards */
body.y2-dark-mode .y2-feature-item {
    color: #f8fafc !important;
}

body.y2-dark-mode .y2-feature-item strong,
body.y2-dark-mode .y2-feature-item strong *,
body.y2-dark-mode .y2-feature-item .y2-feature-text-navy {
    color: #f8fafc !important;
}

body.y2-dark-mode .y2-feature-item p {
    color: #cbd5e1 !important;
}

/* Make every feature icon uniform */
body.y2-dark-mode .y2-feature-icon,
body.y2-dark-mode .y2-feature-icon.blue,
body.y2-dark-mode .y2-feature-icon.red {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

body.y2-dark-mode .y2-feature-icon i,
body.y2-dark-mode .y2-feature-icon.blue i,
body.y2-dark-mode .y2-feature-icon.red i {
    color: #f8fafc !important;
}

/* FAQ */
body.y2-dark-mode details,
body.y2-dark-mode .y2-faq,
body.y2-dark-mode .faq-item {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.y2-dark-mode details summary,
body.y2-dark-mode details summary *,
body.y2-dark-mode .y2-faq summary,
body.y2-dark-mode .faq-item summary {
    color: #f8fafc !important;
}

body.y2-dark-mode details summary::marker {
    color: #f8fafc !important;
}

body.y2-dark-mode details p {
    color: #cbd5e1 !important;
}

/* FAQ plus signs / controls */
body.y2-dark-mode details summary span,
body.y2-dark-mode details summary button {
    color: #f8fafc !important;
}

/* General secondary text */
body.y2-dark-mode .y2-auto-dark-surface p,
body.y2-dark-mode .y2-auto-dark-surface span,
body.y2-dark-mode .y2-auto-dark-surface li {
    color: #cbd5e1 !important;
}

/* Keep headings bright */
body.y2-dark-mode .y2-auto-dark-surface h1,
body.y2-dark-mode .y2-auto-dark-surface h2,
body.y2-dark-mode .y2-auto-dark-surface h3,
body.y2-dark-mode .y2-auto-dark-surface h4,
body.y2-dark-mode .y2-auto-dark-surface h5,
body.y2-dark-mode .y2-auto-dark-surface h6 {
    color: #f8fafc !important;
}

/* Footer readability */
body.y2-dark-mode .y2-footer-main,
body.y2-dark-mode .y2-footer-main p,
body.y2-dark-mode .y2-footer-main span {
    color: #cbd5e1 !important;
}

body.y2-dark-mode .y2-footer-main a {
    color: #e2e8f0 !important;
}

body.y2-dark-mode .y2-footer-main a:hover {
    color: #ff4d5a !important;
}

/* Search text */
body.y2-dark-mode .y2-search-box input,
body.y2-dark-mode .y2-search-input {
    color: #f8fafc !important;
}

body.y2-dark-mode .y2-search-box input::placeholder,
body.y2-dark-mode .y2-search-input::placeholder {
    color: #94a3b8 !important;
}

/* =========================================================
   FINAL DARK MODE - CLEAN MONOCHROME ICONS
   ========================================================= */

/* Feature card icons */
body.y2-dark-mode .y2-feature-icon,
body.y2-dark-mode .y2-feature-icon.blue,
body.y2-dark-mode .y2-feature-icon.red {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

body.y2-dark-mode .y2-feature-icon i,
body.y2-dark-mode .y2-feature-icon.blue i,
body.y2-dark-mode .y2-feature-icon.red i {
    color: #f8fafc !important;
}

/* Top 3 how-to cards */
body.y2-dark-mode .y2-how-card-icon,
body.y2-dark-mode .y2-step-icon,
body.y2-dark-mode .y2-feature-step-icon {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.y2-dark-mode .y2-how-card-icon *,
body.y2-dark-mode .y2-step-icon *,
body.y2-dark-mode .y2-feature-step-icon * {
    color: #f8fafc !important;
}

/* Card descriptions */
body.y2-dark-mode .y2-feature-item p {
    color: #cbd5e1 !important;
}

/* Keep section titles/brand red */
body.y2-dark-mode .y2-feature-item h3,
body.y2-dark-mode .y2-feature-item h4 {
    color: #f8fafc !important;
}

body.y2-dark-mode .y2-feature-card-title {
    color: #ff2630 !important;
}

/* =========================================================
   FINAL: REMOVE UNNECESSARY FEATURE ICON COLORS
   ========================================================= */

body.y2-dark-mode .y2-feature-icon,
body.y2-dark-mode .y2-feature-icon.blue,
body.y2-dark-mode .y2-feature-icon.red,
body.y2-dark-mode .y2-feature-icon[data-y2-dark-surface] {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

body.y2-dark-mode .y2-feature-icon *,
body.y2-dark-mode .y2-feature-icon.blue *,
body.y2-dark-mode .y2-feature-icon.red * {
    color: #f8fafc !important;
    background-color: transparent !important;
    border-color: transparent !important;
    fill: #f8fafc !important;
    stroke: #f8fafc !important;
}

/* Override colored icon classes */
body.y2-dark-mode .y2-feature-icon .fa,
body.y2-dark-mode .y2-feature-icon .fas,
body.y2-dark-mode .y2-feature-icon .far,
body.y2-dark-mode .y2-feature-icon .fab,
body.y2-dark-mode .y2-feature-icon i {
    color: #f8fafc !important;
}

/* Keep feature card headings branded */
body.y2-dark-mode .y2-feature-card-title {
    color: #ff1e25 !important;
}


/* Final monochrome feature icons */
body.y2-dark-mode .y2-feature-icon,
body.y2-dark-mode .y2-feature-icon.blue,
body.y2-dark-mode .y2-feature-icon.red {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

body.y2-dark-mode .y2-feature-icon i,
body.y2-dark-mode .y2-feature-icon.blue i,
body.y2-dark-mode .y2-feature-icon.red i {
    color: #f8fafc !important;
    fill: #f8fafc !important;
    stroke: #f8fafc !important;
}

/* =========================================================
   FINAL DARK MODE — MONOCHROME ALL CARD ICONS
   ========================================================= */

/* Top 3 How-To icons */
body.y2-dark-mode .y2-howto-icon,
body.y2-dark-mode .y2-howto-icon.blue,
body.y2-dark-mode .y2-howto-icon.purple,
body.y2-dark-mode .y2-howto-icon.green {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}

/* Top 3 icon glyphs */
body.y2-dark-mode .y2-howto-icon i,
body.y2-dark-mode .y2-howto-icon.blue i,
body.y2-dark-mode .y2-howto-icon.purple i,
body.y2-dark-mode .y2-howto-icon.green i {
    color: #f8fafc !important;
}

/* Mini icons inside How-To cards */
body.y2-dark-mode .y2-howto-mini-icons span {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body.y2-dark-mode .y2-howto-mini-icons i {
    color: #f8fafc !important;
}

/* Feature card icons — keep same monochrome system */
body.y2-dark-mode .y2-feature-icon,
body.y2-dark-mode .y2-feature-icon.blue,
body.y2-dark-mode .y2-feature-icon.red {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

body.y2-dark-mode .y2-feature-icon i,
body.y2-dark-mode .y2-feature-icon.blue i,
body.y2-dark-mode .y2-feature-icon.red i {
    color: #f8fafc !important;
    fill: #f8fafc !important;
    stroke: #f8fafc !important;
}

/* Keep card titles branded */
body.y2-dark-mode .y2-feature-card-title,
body.y2-dark-mode .y2-feature-heading {
    color: #ff1e25 !important;
}

/* FINAL FEATURE ICON RESET */
body.y2-dark-mode .y2-feature-item .y2-feature-icon,
body.y2-dark-mode .y2-feature-item .y2-feature-icon.blue,
body.y2-dark-mode .y2-feature-item .y2-feature-icon.red {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
}

body.y2-dark-mode .y2-feature-item .y2-feature-icon i {
    color: #ffffff !important;
    background: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.y2-dark-mode .y2-feature-item .y2-feature-icon::before,
body.y2-dark-mode .y2-feature-item .y2-feature-icon::after {
    background: transparent !important;
    color: #ffffff !important;
}

/* Dark mode: feature section headings */
body.y2-dark-mode .y2-feature-heading-red {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   DARK MODE HEADER LOGO — RED + WHITE
   ========================================================= */

body.y2-dark-mode .y2-brand {
    color: #ffffff !important;
}

body.y2-dark-mode .y2-brand *,
body.y2-dark-mode .y2-brand-logo {
    color: #ffffff !important;
}

/* Common text-based logo spans */
body.y2-dark-mode .y2-brand span,
body.y2-dark-mode .y2-brand strong,
body.y2-dark-mode .y2-brand b {
    color: #ffffff !important;
}

/* Preserve the red brand portion */
body.y2-dark-mode .y2-brand .y2-youtube-red,
body.y2-dark-mode .y2-brand .y2-logo-red,
body.y2-dark-mode .y2-brand .y2-brand-red,
body.y2-dark-mode .y2-brand .red {
    color: #ff1e25 !important;
    -webkit-text-fill-color: #ff1e25 !important;
}

/* Dark mode — language selector text */
html.y2-dark-mode body.y2-dark-mode .y2-language-button,
html.y2-dark-mode body.y2-dark-mode #y2-current-language,
html.y2-dark-mode body.y2-dark-mode .y2-language-chevron {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.y2-dark-mode body.y2-dark-mode .y2-language-button {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.y2-dark-mode body.y2-dark-mode .y2-language-button:hover {
    background: #273449 !important;
    border-color: #475569 !important;
}


/* =========================================================
   FINAL DARK MODE HEADER — NO FIRST-PAINT FLASH
   Targets html class so styles apply before body JS runs.
   ========================================================= */

html.y2-dark-mode .y2-site-header {
    background: #111827 !important;
    border-bottom-color: #243244 !important;
    box-shadow: 0 3px 14px rgba(0,0,0,.25) !important;
}

html.y2-dark-mode .y2-nav-link {
    color: #e2e8f0 !important;
}

html.y2-dark-mode .y2-nav-link:hover,
html.y2-dark-mode .y2-nav-active {
    color: #ff1e25 !important;
}

html.y2-dark-mode .y2-header-actions {
    border-left-color: #334155 !important;
}

html.y2-dark-mode .y2-language-button {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.y2-dark-mode #y2-current-language {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.y2-dark-mode .y2-language-chevron {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.y2-dark-mode .y2-theme-toggle {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

html.y2-dark-mode .y2-brand .y2-brand-y2,
html.y2-dark-mode .y2-brand .y2-brand-saver,
html.y2-dark-mode .y2-brand .y2-brand-com {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.y2-dark-mode .y2-brand .y2-brand-pro {
    color: #ff1e25 !important;
    -webkit-text-fill-color: #ff1e25 !important;
}

@media (max-width: 900px) {
    html.y2-dark-mode .y2-mobile-menu-button span {
        background: #e2e8f0 !important;
    }

    html.y2-dark-mode .y2-mobile-nav {
        background: #111827 !important;
        border-color: #243244 !important;
    }
}

/* =========================================================
   FINAL DARK MODE — ALL CONTENT CARDS
   ========================================================= */

/* Top 3 How-To cards */
html.y2-dark-mode .y2-howto-step {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

html.y2-dark-mode .y2-howto-step h3 {
    color: #f8fafc !important;
}

html.y2-dark-mode .y2-howto-step p {
    color: #cbd5e1 !important;
}

html.y2-dark-mode .y2-howto-number {
    color: #94a3b8 !important;
}

html.y2-dark-mode .y2-howto-mini-icons span {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.y2-dark-mode .y2-howto-mini-icons i {
    color: #f8fafc !important;
}

/* Feature cards */
html.y2-dark-mode .y2-feature-list,
html.y2-dark-mode .y2-feature-list .y2-feature-item,
html.y2-dark-mode .y2-feature-card {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

/* Feature text */
html.y2-dark-mode .y2-feature-list .y2-feature-item strong,
html.y2-dark-mode .y2-feature-list .y2-feature-item strong *,
html.y2-dark-mode .y2-feature-list .y2-feature-text-navy {
    color: #f8fafc !important;
}

html.y2-dark-mode .y2-feature-list .y2-feature-item p,
html.y2-dark-mode .y2-feature-list .feature-description {
    color: #cbd5e1 !important;
}

/* Feature headings */
html.y2-dark-mode .y2-feature-heading,
html.y2-dark-mode .y2-feature-heading-red {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Feature icons */
html.y2-dark-mode .y2-feature-list .y2-feature-icon,
html.y2-dark-mode .y2-feature-list .y2-feature-icon.blue,
html.y2-dark-mode .y2-feature-list .y2-feature-icon.red {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html.y2-dark-mode .y2-feature-list .y2-feature-icon i {
    color: #ffffff !important;
}

/* =========================================================
   HARD FINAL DARK MODE CARD OVERRIDE
   ========================================================= */

html.y2-dark-mode body#bootstrap-themes .y2-howto-download .y2-howto-step,
html.y2-dark-mode body.swag-line .y2-howto-download .y2-howto-step {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.y2-dark-mode body#bootstrap-themes .y2-howto-download .y2-howto-step h3,
html.y2-dark-mode body.swag-line .y2-howto-download .y2-howto-step h3 {
    color: #f8fafc !important;
}

html.y2-dark-mode body#bootstrap-themes .y2-howto-download .y2-howto-step p,
html.y2-dark-mode body.swag-line .y2-howto-download .y2-howto-step p {
    color: #cbd5e1 !important;
}


/* Feature cards */
html.y2-dark-mode body#bootstrap-themes .y2-feature-item,
html.y2-dark-mode body.swag-line .y2-feature-item {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.y2-dark-mode body#bootstrap-themes .y2-feature-item strong,
html.y2-dark-mode body#bootstrap-themes .y2-feature-item strong span,
html.y2-dark-mode body.swag-line .y2-feature-item strong,
html.y2-dark-mode body.swag-line .y2-feature-item strong span {
    color: #f8fafc !important;
}

html.y2-dark-mode body#bootstrap-themes .y2-feature-item p,
html.y2-dark-mode body.swag-line .y2-feature-item p {
    color: #cbd5e1 !important;
}


/* Feature headings */
html.y2-dark-mode body#bootstrap-themes .y2-feature-heading-red,
html.y2-dark-mode body.swag-line .y2-feature-heading-red,
html.y2-dark-mode body#bootstrap-themes .y2-feature-heading,
html.y2-dark-mode body.swag-line .y2-feature-heading {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* Uniform icons */
html.y2-dark-mode body#bootstrap-themes .y2-feature-icon,
html.y2-dark-mode body#bootstrap-themes .y2-feature-icon.blue,
html.y2-dark-mode body#bootstrap-themes .y2-feature-icon.red,
html.y2-dark-mode body.swag-line .y2-feature-icon,
html.y2-dark-mode body.swag-line .y2-feature-icon.blue,
html.y2-dark-mode body.swag-line .y2-feature-icon.red {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

html.y2-dark-mode body#bootstrap-themes .y2-feature-icon i,
html.y2-dark-mode body.swag-line .y2-feature-icon i {
    color: #ffffff !important;
}


/* Mini icons */
html.y2-dark-mode body#bootstrap-themes .y2-howto-mini-icons span,
html.y2-dark-mode body.swag-line .y2-howto-mini-icons span {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

html.y2-dark-mode body#bootstrap-themes .y2-howto-mini-icons i,
html.y2-dark-mode body.swag-line .y2-howto-mini-icons i {
    color: #ffffff !important;
}

/* FINAL DARK MODE - REMOVE WHITE SIDE GUTTERS */
html.y2-dark-mode,
html.y2-dark-mode body {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

html.y2-dark-mode body > * {
    background-color: transparent;
}

html.y2-dark-mode #bootstrap-themes,
html.y2-dark-mode body.swag-line {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

@media (min-width: 769px) {
    html.y2-dark-mode body {
        min-height: 100vh;
    }
}

/* Y2SaverPro Install App — floating bottom-right */
.y2-pwa-install-floating {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 99999 !important;
}

html.y2-dark-mode .y2-pwa-install-floating {
    border-color: #334155 !important;
}

@media (max-width: 768px) {
    .y2-pwa-install-floating {
        right: 16px !important;
        bottom: 16px !important;
    }
}

/* =========================================================
   Y2SaverPro TikTok PAGE — FINAL DARK MODE
   ========================================================= */

html.y2-dark-mode body,
html.y2-dark-mode body.tiktok-page {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* Main page sections */
html.y2-dark-mode .tiktok-page,
html.y2-dark-mode .tiktok-hero,
html.y2-dark-mode .tiktok-trust,
html.y2-dark-mode .tiktok-content,
html.y2-dark-mode .tiktok-section,
html.y2-dark-mode .tiktok-faq-section {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* Hero */
html.y2-dark-mode .tiktok-hero {
    background:
        radial-gradient(circle at 15% 20%, rgba(37,244,238,.06), transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(254,44,85,.06), transparent 30%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

html.y2-dark-mode .tiktok-hero h1,
html.y2-dark-mode .tiktok-hero-lead {
    color: #f8fafc !important;
}

/* Badge */
html.y2-dark-mode .tiktok-badge {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

/* Downloader card */
html.y2-dark-mode .tiktok-downloader-card {
    background: #111827 !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}

/* URL input */
html.y2-dark-mode #tiktok-url {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.y2-dark-mode #tiktok-url::placeholder {
    color: #94a3b8 !important;
}

/* Trust text */
html.y2-dark-mode .tiktok-trust,
html.y2-dark-mode .tiktok-trust span {
    color: #cbd5e1 !important;
}

/* Feature wrapper/cards */
html.y2-dark-mode .tiktok-features,
html.y2-dark-mode .tiktok-feature-card {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}

html.y2-dark-mode .tiktok-features-heading h2,
html.y2-dark-mode .tiktok-feature-card h3 {
    color: #f8fafc !important;
}

html.y2-dark-mode .tiktok-feature-card p {
    color: #cbd5e1 !important;
}

/* Feature icons — monochrome */
html.y2-dark-mode .tiktok-feature-icon {
    background: #1e293b !important;
}

html.y2-dark-mode .tiktok-feature-icon svg {
    stroke: #ffffff !important;
}

/* How-to / instructional content */
html.y2-dark-mode .tiktok-page section,
html.y2-dark-mode .tiktok-page article {
    color: #f8fafc !important;
}

html.y2-dark-mode .tiktok-page h2,
html.y2-dark-mode .tiktok-page h3,
html.y2-dark-mode .tiktok-page h4 {
    color: #f8fafc !important;
}

html.y2-dark-mode .tiktok-page p,
html.y2-dark-mode .tiktok-page li {
    color: #cbd5e1 !important;
}

/* Generic white content boxes */
html.y2-dark-mode .tiktok-page .tiktok-card,
html.y2-dark-mode .tiktok-page .tiktok-content-card,
html.y2-dark-mode .tiktok-page .tiktok-step,
html.y2-dark-mode .tiktok-page .tiktok-info-card,
html.y2-dark-mode .tiktok-page .tiktok-faq-item {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

/* FAQ */
html.y2-dark-mode .tiktok-page .faq-item,
html.y2-dark-mode .tiktok-page details,
html.y2-dark-mode .tiktok-page details > summary {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.y2-dark-mode .tiktok-page details p,
html.y2-dark-mode .tiktok-page .faq-answer {
    color: #cbd5e1 !important;
}

/* White utility blocks */
html.y2-dark-mode .tiktok-page [style*="background:#fff"],
html.y2-dark-mode .tiktok-page [style*="background: #fff"],
html.y2-dark-mode .tiktok-page [style*="background:white"],
html.y2-dark-mode .tiktok-page [style*="background: white"] {
    background: #111827 !important;
}

/* Bottom page background */
html.y2-dark-mode .tiktok-page::before,
html.y2-dark-mode .tiktok-page::after {
    background: transparent !important;
}


/* =========================================================
   TIKTOK DOWNLOADER — EXACT SECTION DARK MODE FINAL
   ========================================================= */

html.y2-dark-mode body.tiktok-page {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* Main content areas */
html.y2-dark-mode .tiktok-content,
html.y2-dark-mode .tiktok-content:nth-of-type(even),
html.y2-dark-mode .tiktok-seo-section,
html.y2-dark-mode .tiktok-seo-alt {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Hero */
html.y2-dark-mode .tiktok-hero {
    background:
        linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

/* Main cards */
html.y2-dark-mode .tiktok-downloader-card,
html.y2-dark-mode .tiktok-result,
html.y2-dark-mode .tiktok-format,
html.y2-dark-mode .tiktok-feature,
html.y2-dark-mode .tiktok-step,
html.y2-dark-mode .tiktok-faq details,
html.y2-dark-mode .tiktok-disclaimer,
html.y2-dark-mode .tiktok-seo-tip {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

/* Feature wrapper */
html.y2-dark-mode .tiktok-features {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

/* Text */
html.y2-dark-mode .tiktok-page h1,
html.y2-dark-mode .tiktok-page h2,
html.y2-dark-mode .tiktok-page h3,
html.y2-dark-mode .tiktok-page h4,
html.y2-dark-mode .tiktok-page strong,
html.y2-dark-mode .tiktok-page b {
    color: #f8fafc !important;
}

html.y2-dark-mode .tiktok-page p,
html.y2-dark-mode .tiktok-page li,
html.y2-dark-mode .tiktok-feature-card p,
html.y2-dark-mode .tiktok-content p,
html.y2-dark-mode .tiktok-seo-content > p {
    color: #cbd5e1 !important;
}

/* Step cards */
html.y2-dark-mode .tiktok-step-number {
    color: #ff2f4f !important;
}

html.y2-dark-mode .tiktok-step {
    border-color: #334155 !important;
}

/* FAQ */
html.y2-dark-mode .tiktok-faq summary {
    color: #f8fafc !important;
}

html.y2-dark-mode .tiktok-faq p,
html.y2-dark-mode .tiktok-faq details p {
    color: #cbd5e1 !important;
}

/* SEO blocks */
html.y2-dark-mode .tiktok-seo-layout,
html.y2-dark-mode .tiktok-seo-content {
    color: #f8fafc !important;
}

html.y2-dark-mode .tiktok-seo-tip {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.y2-dark-mode .tiktok-seo-tip strong {
    color: #f8fafc !important;
}

html.y2-dark-mode .tiktok-seo-tip span {
    color: #cbd5e1 !important;
}

/* SEO icons - monochrome */
html.y2-dark-mode .tiktok-seo-icon,
html.y2-dark-mode .tiktok-seo-blue,
html.y2-dark-mode .tiktok-seo-cyan,
html.y2-dark-mode .tiktok-seo-purple,
html.y2-dark-mode .tiktok-seo-pink,
html.y2-dark-mode .tiktok-seo-green {
    background: #1e293b !important;
}

html.y2-dark-mode .tiktok-seo-icon svg {
    stroke: #ffffff !important;
}

/* Feature icons - monochrome */
html.y2-dark-mode .tiktok-feature-icon,
html.y2-dark-mode .tiktok-feature-icon-red,
html.y2-dark-mode .tiktok-feature-icon-cyan,
html.y2-dark-mode .tiktok-feature-icon-purple,
html.y2-dark-mode .tiktok-feature-icon-orange {
    background: #1e293b !important;
}

html.y2-dark-mode .tiktok-feature-icon svg {
    stroke: #ffffff !important;
}

/* Input */
html.y2-dark-mode #tiktok-url {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Post caption textarea */
html.y2-dark-mode #tiktok-post-caption,
html.y2-dark-mode textarea[style*="background:#f8fafc"],
html.y2-dark-mode textarea[style*="background:#f8fafc"] {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Result / format text */
html.y2-dark-mode .tiktok-quality,
html.y2-dark-mode .tiktok-format-details,
html.y2-dark-mode .tiktok-meta {
    color: #cbd5e1 !important;
}

/* Trust area */
html.y2-dark-mode .tiktok-trust,
html.y2-dark-mode .tiktok-trust span {
    color: #cbd5e1 !important;
}

/* Remove light hover backgrounds */
html.y2-dark-mode .tiktok-feature-card:hover,
html.y2-dark-mode .tiktok-format:hover {
    background: #111827 !important;
    box-shadow: none !important;
}

/* Inline white backgrounds anywhere inside TikTok main */
html.y2-dark-mode .tiktok-page [style*="background:#fff"],
html.y2-dark-mode .tiktok-page [style*="background: #fff"],
html.y2-dark-mode .tiktok-page [style*="background:#ffffff"],
html.y2-dark-mode .tiktok-page [style*="background: #ffffff"],
html.y2-dark-mode .tiktok-page [style*="background:#f8fafc"],
html.y2-dark-mode .tiktok-page [style*="background: #f8fafc"] {
    background: #111827 !important;
    background-color: #111827 !important;
}

/* Keep the page outer background dark */
html.y2-dark-mode,
html.y2-dark-mode body,
html.y2-dark-mode body.tiktok-page,
html.y2-dark-mode .tiktok-page {
    background-color: #0f172a !important;
}


/* =========================================================
   Y2SaverPro TikTok — Dark Mode Card Cleanup
   ========================================================= */

html.y2-dark-mode .tiktok-result,
body.y2-dark-mode .tiktok-result {
    background: #0f172a !important;
    border-color: #263244 !important;
}

html.y2-dark-mode .tiktok-result-head,
body.y2-dark-mode .tiktok-result-head {
    background: #111827 !important;
    border-color: #263244 !important;
}

html.y2-dark-mode .tiktok-result-info h2,
body.y2-dark-mode .tiktok-result-info h2 {
    color: #f9fafb !important;
}

html.y2-dark-mode .tiktok-result-info,
body.y2-dark-mode .tiktok-result-info,
html.y2-dark-mode .tiktok-meta,
body.y2-dark-mode .tiktok-meta {
    color: #cbd5e1 !important;
}

html.y2-dark-mode .tiktok-tool,
body.y2-dark-mode .tiktok-tool {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f9fafb !important;
    border: 1px solid #263244 !important;
    box-shadow: none !important;
}

html.y2-dark-mode .tiktok-tool h3,
body.y2-dark-mode .tiktok-tool h3 {
    color: #f9fafb !important;
}

html.y2-dark-mode .tiktok-tool p,
body.y2-dark-mode .tiktok-tool p {
    color: #9ca3af !important;
}

html.y2-dark-mode #tiktok-post-caption-tool,
body.y2-dark-mode #tiktok-post-caption-tool {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f9fafb !important;
    border-color: #263244 !important;
}

html.y2-dark-mode #tiktok-post-caption-tool textarea,
body.y2-dark-mode #tiktok-post-caption-tool textarea {
    background: #0b1220 !important;
    background-color: #0b1220 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

html.y2-dark-mode .tiktok-tools,
body.y2-dark-mode .tiktok-tools {
    background: transparent !important;
}

html.y2-dark-mode .tiktok-section,
body.y2-dark-mode .tiktok-section {
    background: transparent !important;
}


/* TikTok MP3 button — match other download buttons in dark mode */
html.y2-dark-mode #tiktok-mp3,
body.y2-dark-mode #tiktok-mp3 {
    background: #ff2f63 !important;
    color: #ffffff !important;
    border-color: #ff2f63 !important;
}

html.y2-dark-mode #tiktok-mp3:hover,
body.y2-dark-mode #tiktok-mp3:hover {
    background: #ff174f !important;
    color: #ffffff !important;
}


/* Download cards */
html.y2-dark-mode .y2-download-preview-card,
body.y2-dark-mode .y2-download-preview-card,
html.y2-dark-mode .y2-download-options,
body.y2-dark-mode .y2-download-options {
    background:#151a21 !important;
    border-color:#29323d !important;
}

html.y2-dark-mode .y2-download-title,
body.y2-dark-mode .y2-download-title,
html.y2-dark-mode .y2-download-title a,
body.y2-dark-mode .y2-download-title a {
    color:#eef4f8 !important;
}

html.y2-dark-mode .y2-download-tabs,
body.y2-dark-mode .y2-download-tabs {
    background:#151a21 !important;
    border-color:#29323d !important;
}

html.y2-dark-mode .y2-download-tab,
body.y2-dark-mode .y2-download-tab {
    color:#d9e1ea !important;
}

html.y2-dark-mode .y2-download-table th,
body.y2-dark-mode .y2-download-table th {
    background:#1c232c !important;
    color:#b9c5d2 !important;
    border-color:#29323d !important;
}

html.y2-dark-mode .y2-download-table td,
body.y2-dark-mode .y2-download-table td {
    background:#151a21 !important;
    color:#d9e1ea !important;
    border-color:#29323d !important;
}

html.y2-dark-mode .y2-download-table tr:hover td,
body.y2-dark-mode .y2-download-table tr:hover td {
    background:#1a2129 !important;
}

/* Final download UI theme variables */
html.y2-dark-mode,
body.y2-dark-mode {
    --y2-final-card-bg: #151a21;
    --y2-final-card-border: #29323d;
    --y2-final-row-bg: #151a21;
    --y2-final-row-border: #29323d;
    --y2-final-tab-bg: #151a21;
    --y2-final-tab-border: #29323d;
    --y2-final-text: #e2e8f0;
    --y2-final-muted: #b9c5d2;
    --y2-final-header-bg: #1c232c;
}

/* =========================================================
   Y2SaverPro — Video / Audio Format Rows — Dark Mode
   ========================================================= */

html.y2-dark-mode .y2-desktop-format-row,
body.y2-dark-mode .y2-desktop-format-row {
    background: #151a21 !important;
    color: #f8fafc !important;
    border-color: #29323d !important;
}

html.y2-dark-mode .y2-desktop-format-row:hover,
body.y2-dark-mode .y2-desktop-format-row:hover {
    background: #1c2530 !important;
    border-color: #3b4756 !important;
}

html.y2-dark-mode .y2-desktop-format-row.is-selected,
body.y2-dark-mode .y2-desktop-format-row.is-selected {
    background: #202b38 !important;
    border-color: #fe2c55 !important;
    box-shadow: 0 0 0 1px rgba(254,44,85,.18) !important;
}

/* Quality / bitrate */
html.y2-dark-mode .y2-format-row-quality,
body.y2-dark-mode .y2-format-row-quality {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

html.y2-dark-mode .y2-format-row-format,
body.y2-dark-mode .y2-format-row-format {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* Badge */
html.y2-dark-mode .y2-format-row-badge,
body.y2-dark-mode .y2-format-row-badge {
    color: #e2e8f0 !important;
}

html.y2-dark-mode .y2-format-row-badge strong,
body.y2-dark-mode .y2-format-row-badge strong {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

/* Recommendation badges */
html.y2-dark-mode .y2-format-row-badge.y2-recommended,
body.y2-dark-mode .y2-format-row-badge.y2-recommended {
    color: #fbbf24 !important;
    background: rgba(251,191,36,.10) !important;
    border-color: rgba(251,191,36,.25) !important;
}

html.y2-dark-mode .y2-format-row-badge.y2-best-quality,
body.y2-dark-mode .y2-format-row-badge.y2-best-quality {
    color: #fbbf24 !important;
    background: rgba(251,191,36,.10) !important;
    border-color: rgba(251,191,36,.25) !important;
}

html.y2-dark-mode .y2-format-row-badge.y2-data-saver,
body.y2-dark-mode .y2-format-row-badge.y2-data-saver {
    color: #60a5fa !important;
    background: rgba(96,165,250,.10) !important;
    border-color: rgba(96,165,250,.25) !important;
}

html.y2-dark-mode .y2-format-row-badge.y2-good-quality,
body.y2-dark-mode .y2-format-row-badge.y2-good-quality {
    color: #60a5fa !important;
    background: rgba(96,165,250,.10) !important;
    border-color: rgba(96,165,250,.25) !important;
}

/* Download button */
html.y2-dark-mode .y2-format-row-download,
body.y2-dark-mode .y2-format-row-download {
    background: #fe2c55 !important;
    color: #ffffff !important;
    border-color: #fe2c55 !important;
}

html.y2-dark-mode .y2-format-row-download:hover,
body.y2-dark-mode .y2-format-row-download:hover {
    background: #ff174f !important;
    color: #ffffff !important;
    border-color: #ff174f !important;
}

html.y2-dark-mode .y2-format-row-download i,
body.y2-dark-mode .y2-format-row-download i {
    color: #ffffff !important;
}

/* Make sure text inside the rows cannot inherit dark/black color */
html.y2-dark-mode .y2-smart-video-row *,
html.y2-dark-mode .y2-smart-audio-row *,
body.y2-dark-mode .y2-smart-video-row *,
body.y2-dark-mode .y2-smart-audio-row * {
    text-shadow: none !important;
}


/* Y2SaverPro — Dark mode quality badge visibility fix */
html.y2-dark-mode .y2-desktop-format-row .y2-format-row-badge,
body.y2-dark-mode .y2-desktop-format-row .y2-format-row-badge {
    background:#202936 !important;
    border-color:#3a4655 !important;
    color:#f1f5f9 !important;
    box-shadow:none !important;
}

html.y2-dark-mode .y2-desktop-format-row .y2-format-row-badge *,
body.y2-dark-mode .y2-desktop-format-row .y2-format-row-badge * {
    color:#f1f5f9 !important;
    -webkit-text-fill-color:#f1f5f9 !important;
}

html.y2-dark-mode .y2-desktop-format-row .y2-format-row-badge strong,
body.y2-dark-mode .y2-desktop-format-row .y2-format-row-badge strong {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* Y2SaverPro — Dark mode thumbnail/title visibility fix */
html.y2-dark-mode .y2-download-title,
body.y2-dark-mode .y2-download-title,
html.y2-dark-mode .y2-download-title a,
body.y2-dark-mode .y2-download-title a,
html.y2-dark-mode .y2-download-preview-card .y2-download-title,
body.y2-dark-mode .y2-download-preview-card .y2-download-title,
html.y2-dark-mode .y2-download-preview-card .y2-download-title a,
body.y2-dark-mode .y2-download-preview-card .y2-download-title a {
    color:#f1f5f9 !important;
    -webkit-text-fill-color:#f1f5f9 !important;
}

html.y2-dark-mode .y2-download-title a:hover,
body.y2-dark-mode .y2-download-title a:hover {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* Y2SaverPro — FINAL VIDEO TITLE DARK MODE FIX */
html.y2-dark-mode .y2-final-video-title,
body.y2-dark-mode .y2-final-video-title,
html.y2-dark-mode .y2-final-video-title a,
body.y2-dark-mode .y2-final-video-title a,
html.y2-dark-mode .y2-final-video-title *,
body.y2-dark-mode .y2-final-video-title * {
    color:#f1f5f9 !important;
    -webkit-text-fill-color:#f1f5f9 !important;
    text-shadow:none !important;
}

html.y2-dark-mode .y2-final-video-title a:hover,
body.y2-dark-mode .y2-final-video-title a:hover {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}