/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #5A5EE0;
    --secondary-color: #5364E0;
    --accent-color: #1E313F;
    --text-color: #333;
    --text-light: #666;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --border-radius: 8px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

body {
    font-family: "Noto Sans", sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height:62px;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 2px 0;
}

/* Gradient Logo Styles */
.nav__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.nav__menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav__menu a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: var(--transition);
    font-size:1rem;
}

.nav__menu a:hover {
    color: var(--primary-color);
}


.btnz--login {
    background: #00008B;
    color: #fff;
    padding: 0.3rem 1rem;
    font-size: 0.9rem;
    border: 5px double #fff;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease;
}

.btnz--login:hover {
    background: #87CEFA; /* Fallback color */
    transform: translateY(-1px);
}

/* Hero Section */


/* Blog Cards */
.blog-card {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card__content {
    padding: 1.5rem;
}

.blog-card__title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.blog-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.blog-card__excerpt {
    color: var(--text-light);
    margin-bottom: 1rem;
}

.blog-card__link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

/* Blog Single */
.blog-single {
    max-width: 800px;
    margin: 0 auto;
}

.blog-single__image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
}

.blog-single__header {
    text-align: center;
    margin-bottom: 2rem;
}

.blog-single__title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.blog-single__meta {
    color: var(--text-light);
    font-size: 0.9rem;
}

.blog-single__content {
    line-height: 1.8;
    font-size: 1.1rem;
}

.blog-single__content h2, 
.blog-single__content h3 {
    margin: 2rem 0 1rem;
}

.blog-single__content p {
    margin-bottom: 1rem;
}

.blog-single__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}



/* Main Content */
.main-content {
    padding: 120px 0 60px;
    min-height: calc(100vh - 200px);
}

.page-header {
    text-align: center;
    margin-bottom: 10px;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0;
}

.page-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
}

.page-content h2 {
    margin: 2rem 0 1rem;
}

.page-content p {
    margin-bottom: 1rem;
}

/* Contact Form */
.contact-content {
    max-width: 600px;
    margin: 0 auto;
}

.contact-info {
    margin-bottom: 2rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.pagination__link {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-color);
    transition: var(--transition);
}

.pagination__link:hover,
.pagination__link.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* No Posts */
.no-posts {
    text-align: center;
    padding: 3rem;
    color: var(--text-light);
}

/* Blog Navigation */
.blog-navigation {
    text-align: center;
    margin-top: 3rem;
}

/* Responsive */
@media (max-width: 768px) {
    .nav__menu {
        display: none;
    }
    
    .hero__title {
        font-size: 2rem;
    }
    
    .hero__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .feature {
        flex-direction: column;
        text-align: center;
    }
    
    .grid--3 {
        grid-template-columns: 1fr;
    }
    
    .blog-single__title {
        font-size: 2rem;
    }
    
    .section__title {
        font-size: 2rem;
    }
    
    .main-content {
        padding: 100px 0 40px;
    }
}










  /* ===== MEGA MENU STYLES ===== */

/* Single Part Logo with Two Colors */
.nav__logo {
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 78px;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background:white;

}

.logo-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

/* Apply gradient to SVG */
.logo-link {
    color: #201E7E;
   
}

.logo-icon {
    color: #E0562A;
   
}
.logo-text {
    background: linear-gradient(13deg, #000000, #ffffff, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-family: "Montserrat Alternates", sans-serif;
}

/* Mega Menu Container */
.nav-item.has-mega-menu {
    position: relative;
}

.nav-item.has-mega-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.nav-item.has-mega-menu:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: -680px;
    width: 1200px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid #e1e5e9;
    padding: 0;
    margin-top: 10px;
}

.nav-item.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr;
    gap: 2rem;
    padding: 1rem;
}

/* Mega Menu Columns */
.mega-menu-column h4 {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color);
}

.mega-menu-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-column ul li {
    margin-bottom: 0.45rem;
}

.mega-menu-column ul li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 8px;
    font-weight: 500;
}

.mega-menu-column ul li a:hover {
    color: var(--primary-color);
    background: rgba(67, 97, 238, 0.05);
    transform: translateX(5px);
}

.mega-menu-column ul li a i {
    width: 18px;
    text-align: center;
    color: var(--primary-color);
    font-size: 1rem;
}

/* Featured Section */
.mega-menu-featured {
    background: linear-gradient(135deg, #f8faff, #f0f4ff);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e1e5e9;
}

.mega-menu-featured h4 {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.featured-tools {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.featured-tool {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.featured-tool:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.tool-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tool-content h5 {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tool-content p {
    color: var(--text-light);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* Badges */
.tool-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    margin-top: 0.5rem;
}

.tool-badge.popular {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.tool-badge.new {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #04AA6D, #2AC2D1);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
    font-size: 0.95rem;
}

.view-all-btn:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .mega-menu {
        width: 700px;
        left: -100px;
    }
    
    .mega-menu-container {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
        padding: 2rem;
    }
    
    .mega-menu-featured {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .mega-menu {
        display: none !important;
    }
    
    .nav-item.has-mega-menu:hover .mega-menu {
        display: none !important;
    }
}
.search-title {
    display: none;
  }
  
  .main-content1 {
    padding:65px 60px 30px 60px;
    background: #f5f5fa;
  }
  
      /* Content Section Styles */
    .p-content {
        padding: 60px 20px;
        background: linear-gradient(135deg, #fff 0%, #fff 100%);
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Section Header */
    .section-header {
        text-align: center;
        margin-bottom: 60px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-header h2 {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .section-description {
        font-size: 1.2rem;
        line-height: 1.7;
        color: #64748b;
        margin-bottom: 0;
    }

    /* Content Text */
    .content-text {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        padding: 50px;
        transition: all 0.3s ease;
        border: 1px solid #f1f5f9;
    }

    .content-text:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        border-color: #e2e8f0;
    }

    .content-text h3 {
        font-size: 1.6rem;
        font-weight: 600;
        color: #1e293b;
        margin: 40px 0 15px 0;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        padding-bottom: 10px;
        border-bottom: 2px solid #f1f5f9;
    }

    .content-text h3:first-child {
        margin-top: 0;
    }

    .content-text p {
        font-size: 1.1rem;
        line-height: 1.7;
        color: #475569;
        margin-bottom: 20px;
    }

    /* Key Points List */
    .key-points {
        list-style: none;
        padding: 0;
        margin: 0 0 30px 0;
    }

    .key-points li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
        font-size: 1rem;
        color: #475569;
        line-height: 1.5;
        padding-left: 25px;
        position: relative;
    }

    .key-points li:before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #10b981;
        font-weight: bold;
        font-size: 1.1rem;
    }

    .key-points li:last-child {
        margin-bottom: 0;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .p-content {
            padding: 40px 15px;
        }
        
        .section-header {
            margin-bottom: 40px;
        }
        
        .section-header h2 {
            font-size: 2rem;
        }
        
        .section-description {
            font-size: 1.1rem;
        }
        
        .content-text {
            padding: 30px 25px;
        }
        
        .content-text h3 {
            font-size: 1.4rem;
        }
        
        .content-text p {
            font-size: 1rem;
        }
    }

    @media (max-width: 480px) {
        .section-header h2 {
            font-size: 1.8rem;
        }
        
        .content-text {
            padding: 25px 20px;
        }
        
        .content-text h3 {
            font-size: 1.3rem;
        }
    }

    /* Animation for content */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .content-text {
        animation: fadeInUp 0.6s ease-out;
    }

    /* Print styles */
    @media print {
        .p-content {
            background: white !important;
            padding: 20px 0 !important;
        }
        
        .content-text {
            box-shadow: none !important;
            border: 1px solid #ddd !important;
        }
    }
  
  .btn-upload, .btn {
             display: inline-block;
            background: var(--primary);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: var(--transition);
            text-decoration: none;
        }
        
        .btn-upload:hover, .btn:hover {
            background-color: navy;
        }
        
        
        .hints-section {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 20px 0;
}

.hints-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.hint-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.hint-item:hover {
    transform: translateY(-2px);
}

.hint-icon {
    color: #28a745;
    font-weight: bold;
    font-size: 18px;
}

.hint-text {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* Responsive design */
@media (max-width: 768px) {
    .hints-grid {
        gap: 15px;
    }
    
    .hint-item {
        padding: 8px 15px;
    }
}

@media (max-width: 480px) {
    .hints-grid {
        flex-direction: column;
        gap: 10px;
    }
}

/* ============================================================
   Theme toggle button (dark mode)
   ============================================================ */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 8px;
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    transition: var(--transition);
    position: relative;
}

.theme-toggle:hover {
    background: rgba(90, 94, 224, 0.1);
    color: var(--primary-color);
}

.theme-toggle__icon {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Show moon in light mode, sun in dark mode */
.theme-toggle__icon--sun { display: none; }
.theme-toggle__icon--moon { display: inline-block; }

html[data-theme="dark"] .theme-toggle__icon--sun  { display: inline-block; color: #ffd35a; }
html[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

.nav__actions {
    display: flex;
    align-items: center;
}

/* ============================================================
   Dark theme — palette overrides
   Mirrors template light palette (primary/secondary/accent kept).
   ============================================================ */
html[data-theme="dark"] {
    --text-color: #ffffff;
    --text-light: #c8ccd6;
    --bg-light: #21202a;
    --white: #302f3f;       /* surfaces / panels */
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.45);
    --tf-bg: #21202a;
    --tf-surface: #302f3f;
    --tf-border: #302f3f;
    --tf-icon: #c0c4ff;     /* light pleasant icon color */
    --tf-accent: #8a8eff;
    color-scheme: dark;

    /* Override common local variables used in tool <style> blocks.
       Any tool that uses var(--light), var(--primary-light), etc.
       will automatically get the dark value. */
    --light: #302f3f;
    --light-color: #302f3f;
    --primary-light: rgba(138, 142, 255, 0.08);
    --secondary-light: #302f3f;
    --card-bg: #302f3f;
    --bg: #21202a;
    --surface: #302f3f;
    --border-color: #302f3f;
    --input-bg: #21202a;
    --gray-light: #3a3a4d;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.4);
    /* svg-generator, resume-builder, and any tool using these vars */
    --card-color: #302f3f;
    --bg-color: #21202a;
    --text-color: #ffffff;
    --white: #ffffff;
    --light-gray: #3a3a4d;
    --light-color: #302f3f;
}

html[data-theme="dark"] body {
    background-color: var(--tf-bg) !important;
    color: #ffffff;
}

/* Headings & generic text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th { color: #ffffff; }

html[data-theme="dark"] a { color: #ffffff; }
html[data-theme="dark"] a:hover { color: var(--tf-accent); }

/* Header */
html[data-theme="dark"] .header {
    background: var(--tf-surface);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid var(--tf-border);
}

html[data-theme="dark"] .nav__menu a { color: #ffffff; }
html[data-theme="dark"] .nav__menu a:hover { color: var(--tf-accent); }

html[data-theme="dark"] .logo-icon { background: transparent; }

/* Icons — light & pleasant */
html[data-theme="dark"] i,
html[data-theme="dark"] .fas,
html[data-theme="dark"] .fab,
html[data-theme="dark"] .far { color: var(--tf-icon); }

html[data-theme="dark"] .search-icon,
html[data-theme="dark"] .search-icon i,
html[data-theme="dark"] .theme-toggle { color: var(--tf-icon); }
html[data-theme="dark"] .theme-toggle:hover { background: rgba(192, 196, 255, 0.12); color: #ffffff; }

/* Mega menu */
html[data-theme="dark"] .mega-menu {
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .mega-menu-column h4 {
    color: var(--tf-accent);
    border-bottom-color: var(--tf-accent);
}
html[data-theme="dark"] .mega-menu-column ul li a { color: #ffffff; }
html[data-theme="dark"] .mega-menu-column ul li a:hover {
    color: var(--tf-accent);
    background: rgba(138, 142, 255, 0.08);
}
html[data-theme="dark"] .mega-menu-column ul li a i { color: var(--tf-icon); }
html[data-theme="dark"] .mega-menu-featured {
    background: linear-gradient(135deg, #353448, #2a2937);
    border: 1px solid var(--tf-border);
}
html[data-theme="dark"] .mega-menu-featured h4 { color: var(--tf-accent); }
html[data-theme="dark"] .featured-tool {
    background: #3a3a4d;
    border: 1px solid var(--tf-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .featured-tool:hover {
    border-color: var(--tf-accent);
}
html[data-theme="dark"] .tool-content h5 { color: #ffffff; }
html[data-theme="dark"] .tool-content p  { color: var(--text-light); }

/* Search popup (selectors are in pages.css; cover what we can via vars) */

/* Cards / blocks */
html[data-theme="dark"] .blog-card {
    background: var(--white);
}
html[data-theme="dark"] .blog-card__title { color: var(--text-color); }
html[data-theme="dark"] .blog-card__excerpt,
html[data-theme="dark"] .blog-card__meta { color: var(--text-light); }

/* Forms */
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--tf-bg);
    color: #ffffff;
    border: 1px solid var(--tf-border);
}
html[data-theme="dark"] ::placeholder { color: #8d92a3; }
html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group textarea:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 3px rgba(138, 142, 255, 0.25);
    outline: none;
}

/* Pagination */
html[data-theme="dark"] .pagination__link {
    border-color: var(--tf-border);
    color: #ffffff;
    background: var(--tf-surface);
}

/* Alerts */
html[data-theme="dark"] .alert-success {
    background: #1f4530;
    color: #d3f1de;
    border-color: #2c6a47;
}
html[data-theme="dark"] .alert-error {
    background: #4a1d28;
    color: #f6cdd4;
    border-color: #6e2837;
}

/* Index/page section blocks */
html[data-theme="dark"] .main-content1 {
    background: var(--tf-bg);
}
html[data-theme="dark"] .p-content {
    background: var(--tf-bg);
}
html[data-theme="dark"] .section-header h2 {
    background: linear-gradient(135deg, #b8bcff 0%, #d0a8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .section-description { color: var(--text-light); }

html[data-theme="dark"] .content-text {
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .content-text:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    border-color: var(--tf-accent);
}
html[data-theme="dark"] .content-text h3 {
    color: #ffffff;
    background: none;
    -webkit-text-fill-color: #ffffff;
    border-bottom: 2px solid var(--tf-border);
}
html[data-theme="dark"] .content-text p,
html[data-theme="dark"] .key-points li { color: #ffffff; }
html[data-theme="dark"] .key-points li:before { color: #5ce0a0; }

/* Hints */
html[data-theme="dark"] .hints-section {
    background: var(--tf-bg);
}
html[data-theme="dark"] .hint-item {
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .hint-text { color: #ffffff; }
html[data-theme="dark"] .hint-icon { color: #5ce0a0; }

/* Footer */
html[data-theme="dark"] .modern-footer {
    background: var(--tf-surface);
    border-top: 1px solid var(--tf-border);
    color: #ffffff;
}
html[data-theme="dark"] .footer-link,
html[data-theme="dark"] .footer-bottom-link,
html[data-theme="dark"] .footer-heading,
html[data-theme="dark"] .copyright,
html[data-theme="dark"] .footer-tagline { color: #ffffff; }
html[data-theme="dark"] .footer-link:hover,
html[data-theme="dark"] .footer-bottom-link:hover { color: var(--tf-accent); }
html[data-theme="dark"] .social-icon { color: var(--tf-icon); }
html[data-theme="dark"] .social-icon:hover { color: var(--tf-accent); }
html[data-theme="dark"] .footer-bottom { border-top: 1px solid var(--tf-border); }
html[data-theme="dark"] .login-icon { color: var(--tf-icon); }

/* Search popup */
html[data-theme="dark"] .search-popup-content {
    background: var(--tf-surface);
    border: 1px solid var(--tf-border);
    color: #ffffff;
}
html[data-theme="dark"] .search-popup-header h3 { color: #ffffff; }
html[data-theme="dark"] .close-search { color: var(--tf-icon); }

/* Back to top */
html[data-theme="dark"] #backToTop {
    background: var(--tf-accent);
    color: #ffffff;
    border: none;
}

/* Generic surfaces */
html[data-theme="dark"] .container,
html[data-theme="dark"] section,
html[data-theme="dark"] article { color: #ffffff; }

/* Surface helpers — many tool pages use plain white panels.
   Map common light backgrounds to the dark surface. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"] {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
}

/* Buttons (.btn / .btn-upload kept primary-colored, ensure white text) */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-upload {
    background: var(--tf-accent);
    color: #ffffff;
}
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn-upload:hover {
    background: #6e72e0;
}

/* ============================================================
   Per-page inline blocks (declared in PHP <style> tags)
   Need !important to override page-level styles.
   ============================================================ */

/* Tabs */
html[data-theme="dark"] .tabs-header {
    background: var(--tf-surface) !important;
    border-bottom: 1px solid var(--tf-border) !important;
}
html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .tabs-header button,
html[data-theme="dark"] .tabs-header a {
    color: #ffffff !important;
    background: transparent !important;
}
html[data-theme="dark"] .tab-button:hover,
html[data-theme="dark"] .tab-button.active {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .tab-content {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .tab-content.active { display: block; }

/* CTA section — keep custom gradient on user side, switch to surface in dark.
   User wants to choose color themselves; default to surface. */
html[data-theme="dark"] .cta-section {
    background: linear-gradient(1deg, #21202a 0%, #302f3f 100%);
    box-shadow: 0 20px 50px #ffffff !important;
}
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .cta-section * { color: #ffffff !important; }

/* Upload section (dashed dropzone on tool pages) */
html[data-theme="dark"] .upload-section {
    background: #21202a !important;
    border-color: var(--tf-accent) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .upload-section * { color: #ffffff !important; }

/* Inner container (footer-like color) */
html[data-theme="dark"] .containert,
html[data-theme="dark"] .containerimg {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border: 1px solid var(--tf-border) !important;
}
html[data-theme="dark"] .containert *,
html[data-theme="dark"] .containerimg * { color: #ffffff !important; }

/* Print: force light */
@media print {
    html[data-theme="dark"] body { background: #fff !important; color: #000 !important; }
}

/* ============================================================
   TOOL PAGES — universal dark theme (#ts wrapper)
   All tool pages wrap their content in <div id="ts">.
   These rules cover the most common inline CSS patterns.
   ============================================================ */

/* --- Cards / panels --- */
html[data-theme="dark"] #ts .card,
html[data-theme="dark"] #ts .panel,
html[data-theme="dark"] #ts .box,
html[data-theme="dark"] #ts .result-card,
html[data-theme="dark"] #ts .output-card,
html[data-theme="dark"] #ts .info-card,
html[data-theme="dark"] #ts .preview-options,
html[data-theme="dark"] #ts .settings-panel,
html[data-theme="dark"] #ts .options-panel,
html[data-theme="dark"] #ts .tool-panel,
html[data-theme="dark"] #ts .sidebar,
/* image tools */
html[data-theme="dark"] #ts .converter-card,
html[data-theme="dark"] #ts .step-card,
html[data-theme="dark"] #ts .stat-item,
html[data-theme="dark"] #ts .controls-panel,
html[data-theme="dark"] #ts .image-comparison,
html[data-theme="dark"] #ts .stencil-preview,
html[data-theme="dark"] #ts .html-preview,
html[data-theme="dark"] #ts .output-preview,
html[data-theme="dark"] #ts .file-list,
html[data-theme="dark"] #ts .preview-name,
html[data-theme="dark"] #ts .file-item,
html[data-theme="dark"] #ts .image-item,
html[data-theme="dark"] #ts .output-item,
html[data-theme="dark"] #ts .image-actions,
html[data-theme="dark"] #ts .output-actions,
html[data-theme="dark"] #ts .output-grid,
html[data-theme="dark"] #ts .add-more-btn {
    background: var(--tf-surface) !important;
    border-color: var(--tf-border) !important;
    color: #ffffff !important;
}

/* Light-grey preview areas */
html[data-theme="dark"] #ts .image-preview,
html[data-theme="dark"] #ts .code-preview,
html[data-theme="dark"] #ts .text-preview,
html[data-theme="dark"] #ts .text-output {
    background: var(--tf-bg) !important;
    border-color: var(--tf-border) !important;
    color: #ffffff !important;
}

/* Add-more button hover */
html[data-theme="dark"] #ts .add-more-btn { border-color: var(--tf-border) !important; }
html[data-theme="dark"] #ts .add-more-btn:hover {
    background: rgba(138,142,255,0.12) !important;
    border-color: var(--tf-accent) !important;
}

/* Step circles (numbered steps in converters) */
html[data-theme="dark"] #ts .step-circle {
    background: var(--tf-bg) !important;
    border-color: var(--tf-accent) !important;
    color: #ffffff !important;
}

/* --- Light background sections --- */
html[data-theme="dark"] #ts .preview-images,
html[data-theme="dark"] #ts .result-section,
html[data-theme="dark"] #ts .output-section,
html[data-theme="dark"] #ts .result-box,
html[data-theme="dark"] #ts .output-box,
html[data-theme="dark"] #ts .output-area,
html[data-theme="dark"] #ts .result-area,
html[data-theme="dark"] #ts .info-box,
html[data-theme="dark"] #ts .stats-box,
html[data-theme="dark"] #ts .data-box,
html[data-theme="dark"] #ts .file-info,
html[data-theme="dark"] #ts .file-details {
    background: var(--tf-bg) !important;
    border-color: var(--tf-border) !important;
    color: #ffffff !important;
}

/* --- Upload area (dashed dropzone) --- */
html[data-theme="dark"] #ts .upload-area,
html[data-theme="dark"] #ts .drop-zone,
html[data-theme="dark"] #ts .dropzone,
html[data-theme="dark"] #ts .file-upload,
html[data-theme="dark"] #ts .upload-zone {
    background: rgba(138,142,255,0.06) !important;
    border-color: var(--tf-accent) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ts .upload-area:hover,
html[data-theme="dark"] #ts .drop-zone:hover,
html[data-theme="dark"] #ts .upload-area.dragover {
    background: rgba(138,142,255,0.12) !important;
}
html[data-theme="dark"] #ts .upload-area h3,
html[data-theme="dark"] #ts .upload-area p,
html[data-theme="dark"] #ts .drop-zone p { color: #ffffff !important; }

/* --- Tabs navigation (non-button style) --- */
html[data-theme="dark"] #ts .tabs {
    border-bottom-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .tab {
    color: var(--text-light) !important;
    background: transparent !important;
}
html[data-theme="dark"] #ts .tab:hover { color: #ffffff !important; }
html[data-theme="dark"] #ts .tab.active {
    color: var(--tf-accent) !important;
    border-bottom-color: var(--tf-accent) !important;
}

/* --- Secondary / ghost buttons --- */
html[data-theme="dark"] #ts .btn-secondary,
html[data-theme="dark"] #ts button.secondary,
html[data-theme="dark"] #ts .btn-outline,
html[data-theme="dark"] #ts .btn-ghost,
html[data-theme="dark"] #ts .btn-light {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .btn-secondary:hover { background: var(--tf-bg) !important; }

/* --- Range / slider --- */
html[data-theme="dark"] #ts .slider-value,
html[data-theme="dark"] #ts .range-value,
html[data-theme="dark"] #ts .slider-container span { color: #ffffff !important; }

/* --- Subtitle / helper text --- */
html[data-theme="dark"] #ts .subtitle,
html[data-theme="dark"] #ts .description,
html[data-theme="dark"] #ts .helper-text,
html[data-theme="dark"] #ts .hint,
html[data-theme="dark"] #ts .note { color: var(--text-light) !important; }

/* --- Dividers / borders inside tools --- */
html[data-theme="dark"] #ts hr { border-color: var(--tf-border) !important; }
html[data-theme="dark"] #ts .divider { background: var(--tf-border) !important; }

/* --- Loading / spinner background --- */
html[data-theme="dark"] #ts .loading,
html[data-theme="dark"] #ts .overlay,
html[data-theme="dark"] #ts .loader-overlay {
    background: rgba(33,32,42,0.88) !important;
    color: #ffffff !important;
}

/* --- Notification / toast --- */
html[data-theme="dark"] #ts .notification:not([style*="background"]),
html[data-theme="dark"] #ts .toast:not([style*="background"]) {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border: 1px solid var(--tf-border) !important;
}

/* --- Signature / canvas tool specific --- */
html[data-theme="dark"] #ts .content {
    background: var(--tf-bg) !important;
}
html[data-theme="dark"] #ts .controls {
    border-right-color: var(--tf-border) !important;
    border-bottom-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .signature-canvas,
html[data-theme="dark"] #ts .canvas-container,
html[data-theme="dark"] #ts .drawing-area {
    background: var(--tf-surface) !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .font-list {
    background: var(--tf-surface) !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .font-option { color: #ffffff !important; }
html[data-theme="dark"] #ts .font-option:hover {
    background: rgba(138,142,255,0.15) !important;
}
html[data-theme="dark"] #ts .font-option.active {
    background: var(--tf-accent) !important;
    color: #0f0e17 !important;
}

/* --- Tool hero/header section --- */
html[data-theme="dark"] #ts .tool-header,
html[data-theme="dark"] #ts .page-header-inner,
html[data-theme="dark"] #ts headert h1,
html[data-theme="dark"] #ts .tool-title-section h1 { color: #ffffff !important; }

/* --- Form label (inline tool scoped) --- */
html[data-theme="dark"] #ts label { color: var(--text-light) !important; }

/* ============================================================
   HOMEPAGE — tool grid cards (.tool-box / .tool-icon1)
   ============================================================ */
html[data-theme="dark"] .tool-box {
    background-color: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .tool-box:hover {
    background-color: var(--tf-bg) !important;
    border-color: #FA1A2C !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] .tool-box--recent { border-color: #FA1A2C !important; }
html[data-theme="dark"] .tool-icon1 { background-color: var(--tf-bg) !important; }
html[data-theme="dark"] .tool-box:hover .tool-icon1 { background-color: var(--tf-surface) !important; }
html[data-theme="dark"] .tool-title { color: #ffffff !important; }
html[data-theme="dark"] .tool-box:hover .tool-title { color: var(--tf-accent) !important; }

/* ============================================================
   Per-file unique selectors not covered by generic #ts rules
   ============================================================ */

/* avepdf embed pages: #ts itself styled white (convert-pdf-to-word, ocr-pdf, edit-pdf-online, etc.) */
html[data-theme="dark"] #ts:has(.toolarea-pdfave) {
    background: var(--tf-surface) !important;
    border-color: var(--tf-accent) !important;
}

/* csv/json/html/excel/markdown/text/tsv/word/xml/yaml-converter.php */
html[data-theme="dark"] #ts .upload-section,
html[data-theme="dark"] #ts .options-section {
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* Format buttons (XLS, XLSX, JSON, HTML, TSV, Text, XML…) */
html[data-theme="dark"] #ts .format-btn {
    background-color: var(--tf-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--tf-border) !important;
}
html[data-theme="dark"] #ts .format-btn:hover {
    background-color: var(--tf-surface) !important;
    border-color: var(--tf-accent) !important;
}
html[data-theme="dark"] #ts .format-btn.active {
    background-color: var(--tf-accent) !important;
    color: #ffffff !important;
    border-color: var(--tf-accent) !important;
}
html[data-theme="dark"] #ts .format-btn svg { color: inherit !important; }

/* Table zebra rows that use var(--secondary) as bg */
html[data-theme="dark"] #ts tr:nth-child(even) { background-color: var(--tf-bg) !important; }
html[data-theme="dark"] #ts th { background-color: rgba(138,142,255,0.15) !important; color: #ffffff !important; }
html[data-theme="dark"] #ts td { color: #ffffff !important; border-color: var(--tf-border) !important; }
html[data-theme="dark"] #ts th { border-color: var(--tf-border) !important; }

/* xml-to-pdf-converter.php, html-to-pdf.php, spreadsheet-to-pdf.php — common wrappers */
html[data-theme="dark"] #ts .main-content2,
html[data-theme="dark"] #ts .page-wrapper,
html[data-theme="dark"] #ts .converter-container,
html[data-theme="dark"] #ts .settings-section,
html[data-theme="dark"] #ts .tool-wrapper,
html[data-theme="dark"] #ts .form-wrapper,
html[data-theme="dark"] #ts .step-container,
html[data-theme="dark"] #ts .step-box {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .section-title2 { color: var(--tf-accent) !important; }
html[data-theme="dark"] #ts .tab-buttons { border-bottom-color: var(--tf-border) !important; }
html[data-theme="dark"] #ts .tab-btn { color: var(--text-light) !important; }
html[data-theme="dark"] #ts .tab-btn.active { color: var(--tf-accent) !important; border-bottom-color: var(--tf-accent) !important; }
html[data-theme="dark"] #ts .instructions {
    background-color: var(--tf-bg) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ts .input-label,
html[data-theme="dark"] #ts .input-label-t { color: var(--text-light) !important; }
html[data-theme="dark"] #ts .input-field {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}

/* ---- Generic patterns found across many tool files ---- */
html[data-theme="dark"] #ts .main-content,
html[data-theme="dark"] #ts .app-container,
html[data-theme="dark"] #ts .form-section,
html[data-theme="dark"] #ts .preview-section,
html[data-theme="dark"] #ts .preview-content,
html[data-theme="dark"] #ts .col-sm-9,
html[data-theme="dark"] #ts .compress-file-main,
html[data-theme="dark"] #ts .popup-box-background,
html[data-theme="dark"] #ts .sti_m {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}

/* pdf-invoice-generator.php */
html[data-theme="dark"] #ts .items-table th {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ts .totals {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
}

/* rtf-to-pdf: pdf-preview stays near-white (shows doc), just darken slightly */
html[data-theme="dark"] #ts .pdf-preview {
    background: #f0eefc !important;
    color: #1a1a2e !important;
}

/* protect-pdf, unlock-pdf — avepdf iframe bg */
html[data-theme="dark"] #ts iframe { background: var(--tf-surface) !important; }

/* word-to-pdf.php (also covers other tools using .containert) */
html[data-theme="dark"] #ts .containert {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ts .options label { color: var(--text-light) !important; }
html[data-theme="dark"] #docx-output {
    background: var(--tf-bg) !important;
    border-color: var(--tf-border) !important;
    color: #ffffff !important;
}

/* compress-pdf.php */
html[data-theme="dark"] #uploadimage {
    background-color: rgba(138,142,255,0.06) !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #uploadimage:hover {
    background-color: rgba(138,142,255,0.12) !important;
    border-color: var(--tf-accent) !important;
}
html[data-theme="dark"] #ts .drop-file-text { color: var(--text-light) !important; }
html[data-theme="dark"] #ts .text-file-inner { color: #ffffff !important; }
html[data-theme="dark"] #ts .compress-file-msg span { color: var(--text-light) !important; }
html[data-theme="dark"] #ts .compress-input-value {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .file-preview-list { border-color: var(--tf-border) !important; }
html[data-theme="dark"] #ts .btn-disabled {
    background-color: var(--tf-bg) !important;
    color: var(--text-light) !important;
}
html[data-theme="dark"] #ts .preview-info p { color: var(--text-light) !important; }

/* ---- wordpress-robots-generator ---- */
html[data-theme="dark"] #ts #robotsTxt {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}

/* ---- language-translator ---- */
html[data-theme="dark"] #ts .translator {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ts #translated-text,
html[data-theme="dark"] #ts #text-to-translate {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}

/* ---- xml-file-compressor ---- */
html[data-theme="dark"] #ts .stat {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ts .preview {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ts .preview-content {
    background: var(--tf-bg) !important;
    color: var(--text-light) !important;
}
html[data-theme="dark"] #ts .options,
html[data-theme="dark"] #ts .results {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
}

/* ---- web-translator ---- */
html[data-theme="dark"] #ts .website-translation-form__inner {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}

/* ---- screenshot-generator ---- */
html[data-theme="dark"] #ts section {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ts #sizeSelect {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}

/* ---- resume-builder: override --light-color used as bg ---- */
html[data-theme="dark"] #ts .style-options,
html[data-theme="dark"] #ts .export-settings,
html[data-theme="dark"] #ts .add-btn,
html[data-theme="dark"] #ts .secondary-btn {
    background-color: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}

/* ---- Word / Number tools ---- */
html[data-theme="dark"] #ts .stats-section {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .stat-card {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .additional-stats {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #ts .formula-display {
    background: var(--tf-bg) !important;
    color: var(--text-light) !important;
    border-color: var(--tf-border) !important;
}

/* extract-images-from-pdf: upload drop zone */
html[data-theme="dark"] #ts .sel_c_m {
    background: rgba(138,142,255,0.05) !important;
    border-color: var(--tf-border) !important;
}

/* ---- SEO Tools ---- */

/* dns-lookup-tool.php */
html[data-theme="dark"] #form {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
}

/* terms-generator, keyword-extractor: .results-section not yet covered */
html[data-theme="dark"] #ts .results-section {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* keyword-density-checker: page pagination buttons */
html[data-theme="dark"] #ts .page-btn {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .page-btn:hover,
html[data-theme="dark"] #ts .page-btn.active {
    background: var(--tf-accent) !important;
    border-color: var(--tf-accent) !important;
}

/* content-gap-finder, keyword tools */
html[data-theme="dark"] #ts .keyword-item,
html[data-theme="dark"] #ts .keyword-card,
html[data-theme="dark"] #ts .intent-type {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}

/* Warning-yellow badges → dark amber */
html[data-theme="dark"] #ts .stop-words-info,
html[data-theme="dark"] #ts .status-checking,
html[data-theme="dark"] #ts .intent-commercial {
    background: #3d2e00 !important;
    color: #ffd966 !important;
    border-color: #5c4400 !important;
}

/* redact-pdf — .app-container already covered above */

/* extract-images-from-pdf */
html[data-theme="dark"] #ts .sel_c_m:hover { background: rgba(138,142,255,0.10) !important; }
html[data-theme="dark"] #ts .btn_add_file__m:hover,
html[data-theme="dark"] #ts .btn_back:hover { background: var(--tf-bg) !important; }
html[data-theme="dark"] #ts .quota_cr {
    background: #4a1d28 !important;
    border-color: #6e2837 !important;
    color: #f6cdd4 !important;
}

/* css-formatter.php */
html[data-theme="dark"] #ts .input-section,
html[data-theme="dark"] #ts .output-section {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] #ts .section-title { color: #ffffff !important; }
html[data-theme="dark"] #ts .code-info { color: var(--text-light) !important; }
html[data-theme="dark"] #ts .options-title { color: #ffffff !important; }
html[data-theme="dark"] #ts .syntax-highlight {
    background: #1e1d2b !important;
    border-color: var(--tf-border) !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] #ts .css-value { color: #7ec8e3 !important; }
html[data-theme="dark"] #ts .css-bracket { color: #c8ccd6 !important; }
html[data-theme="dark"] #ts .css-selector { color: #ff8fa3 !important; }
html[data-theme="dark"] #ts .css-property { color: #c4b5fd !important; }
html[data-theme="dark"] #ts .css-comment { color: #8d92a3 !important; }
html[data-theme="dark"] #ts .btn-secondary {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--tf-border) !important;
}
html[data-theme="dark"] #ts .btn-secondary:hover {
    background: var(--tf-surface) !important;
}

/* translate-pdf-text.php */
html[data-theme="dark"] #uploader {
    background-color: rgba(138,142,255,0.06) !important;
    border-color: var(--tf-accent) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] #uploader:hover,
html[data-theme="dark"] #uploader.ondragover {
    background-color: rgba(138,142,255,0.12) !important;
}
html[data-theme="dark"] #uploader p { color: #ffffff !important; }
html[data-theme="dark"] #uploader svg { color: var(--tf-accent) !important; }
html[data-theme="dark"] #options-container,
html[data-theme="dark"] #processing,
html[data-theme="dark"] #results {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] #options-container label { color: var(--text-light) !important; }
html[data-theme="dark"] #status { color: #ffffff !important; }
html[data-theme="dark"] #lang {
    background-color: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] .progress-bar-container { background-color: var(--tf-border) !important; }

/* video-resizer-tool.php */
html[data-theme="dark"] #ts .ratio-btn,
html[data-theme="dark"] #ts .fit-style-btn {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .ratio-btn:hover,
html[data-theme="dark"] #ts .fit-style-btn:hover {
    background: var(--tf-bg) !important;
}
html[data-theme="dark"] #ts .video-info {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
}

/* facebook-private-video-downloader.php */
html[data-theme="dark"] #ts #private-form {
    background: var(--tf-surface) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] #ts .bxmfunk-input input,
html[data-theme="dark"] #ts .bxmfunk-textarea {
    background: var(--tf-bg) !important;
    color: #ffffff !important;
    border-color: var(--tf-border) !important;
}
html[data-theme="dark"] #ts .bxmfunk-textarea::placeholder,
html[data-theme="dark"] #ts .bxmfunk-input input::placeholder { color: #8d92a3 !important; }
html[data-theme="dark"] #ts .main-label { color: var(--text-light) !important; }
html[data-theme="dark"] #ts #error-container.error {
    background: #4a1d28 !important;
    color: #f6cdd4 !important;
    border-color: #6e2837 !important;
}