/*
 * Additional Theme Styles - Enhanced Compatibility
 * Critical styles with maximum specificity for HowToT.com theme
 */

/* ================================================
   COMPACT FOOTER STYLES
   ================================================ */

/* Compact footer layout */
body.howtot-theme .compact-footer .footer-main {
    padding: 32px 0 16px 0 !important;
    background: #2C3E50 !important;
    color: #ffffff !important;
}

body.howtot-theme .compact-footer .footer-content {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* Footer sections compact styling */
body.howtot-theme .compact-footer .footer-section {
    margin-bottom: 0 !important;
}

body.howtot-theme .compact-footer .footer-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

/* Company info section */
body.howtot-theme .compact-footer .footer-logo .logo-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

body.howtot-theme .compact-footer .footer-logo .logo-icon {
    font-size: 24px !important;
}

body.howtot-theme .compact-footer .footer-logo .logo-main {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

body.howtot-theme .compact-footer .footer-description {
    font-size: 14px !important;
    color: #BDC3C7 !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}

body.howtot-theme .compact-footer .footer-stats {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body.howtot-theme .compact-footer .footer-stats .stat-item {
    font-size: 12px !important;
    color: #4ECDC4 !important;
    font-weight: 500 !important;
}

/* Quick links */
body.howtot-theme .compact-footer .footer-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.howtot-theme .compact-footer .footer-menu li {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

body.howtot-theme .compact-footer .footer-menu a {
    color: #BDC3C7 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color 0.3s ease !important;
}

body.howtot-theme .compact-footer .footer-menu a:hover {
    color: #4ECDC4 !important;
}

/* Tools list */
body.howtot-theme .compact-footer .footer-tools-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.howtot-theme .compact-footer .footer-tools-list li {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

body.howtot-theme .compact-footer .footer-tool-link {
    color: #BDC3C7 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color 0.3s ease !important;
    display: block !important;
}

body.howtot-theme .compact-footer .footer-tool-link:hover {
    color: #4ECDC4 !important;
}

/* Social links */
body.howtot-theme .compact-footer .social-links {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

body.howtot-theme .compact-footer .social-link {
    display: inline-block !important;
    font-size: 20px !important;
    color: #BDC3C7 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

body.howtot-theme .compact-footer .social-link:hover {
    color: #4ECDC4 !important;
}

/* Trust badges */
body.howtot-theme .compact-footer .trust-badges {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.howtot-theme .compact-footer .trust-badge {
    font-size: 12px !important;
    color: #4ECDC4 !important;
    font-weight: 500 !important;
}

/* Footer bottom compact */
body.howtot-theme .compact-footer .footer-bottom {
    background: #1A252F !important;
    padding: 12px 0 !important;
    border-top: 1px solid #34495E !important;
}

body.howtot-theme .compact-footer .footer-bottom-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

body.howtot-theme .compact-footer .footer-copyright p {
    font-size: 14px !important;
    color: #BDC3C7 !important;
    margin: 0 !important;
}

body.howtot-theme .compact-footer .footer-legal {
    display: flex !important;
    gap: 16px !important;
}

body.howtot-theme .compact-footer .footer-legal a {
    font-size: 14px !important;
    color: #BDC3C7 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

body.howtot-theme .compact-footer .footer-legal a:hover {
    color: #4ECDC4 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    body.howtot-theme .compact-footer .footer-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    body.howtot-theme .compact-footer .footer-bottom-content {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
    
    body.howtot-theme .compact-footer .footer-legal {
        gap: 12px !important;
    }
}

/* ================================================
   UNIVERSAL PAGE STYLES - APPLIES TO ALL PAGES
   ================================================ */

/* Force theme styles with body class specificity */
body.howtot-theme {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Universal container and content styles */
body.howtot-theme .container,
body.howtot-theme .wrap,
body.howtot-theme .site-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* Universal page header styles */
body.howtot-theme .page-header,
body.howtot-theme .entry-header {
    text-align: center !important;
    padding: 48px 0 32px 0 !important;
    background: #F8F9FA !important;
    margin-bottom: 32px !important;
}

body.howtot-theme .page-title,
body.howtot-theme .entry-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.2 !important;
}

body.howtot-theme .page-description {
    font-size: 18px !important;
    color: #7F8C8D !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Universal section styles */
body.howtot-theme .section,
body.howtot-theme .content-section {
    padding: 32px 0 !important;
    margin-bottom: 0 !important;
}

body.howtot-theme .section-header {
    text-align: center !important;
    margin-bottom: 32px !important;
}

body.howtot-theme .section-header h2 {
    font-size: 32px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin: 0 0 16px 0 !important;
}

body.howtot-theme .section-header p {
    font-size: 18px !important;
    color: #7F8C8D !important;
    margin: 0 !important;
}

/* Universal grid layouts */
body.howtot-theme .tools-grid,
body.howtot-theme .categories-grid,
body.howtot-theme .content-grid {
    display: grid !important;
    gap: 24px !important;
    margin: 32px 0 !important;
}

body.howtot-theme .tools-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

body.howtot-theme .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* Browse by category section */
body.howtot-theme .browse-categories {
    padding: 48px 0 !important;
    background: #F8F9FA !important;
    margin: 32px 0 !important;
}

body.howtot-theme .browse-categories h2 {
    font-size: 32px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin: 0 0 32px 0 !important;
    text-align: left !important;
}

body.howtot-theme .category-filters,
body.howtot-theme .tool-categories {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin: 32px 0 !important;
}

body.howtot-theme .category-filter,
body.howtot-theme .tool-category {
    background: #ffffff !important;
    border: 2px solid #E0E6ED !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 120px !important;
}

body.howtot-theme .category-filter:hover,
body.howtot-theme .tool-category:hover {
    border-color: #4ECDC4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.2) !important;
}

body.howtot-theme .category-filter.active {
    background: #2E7D7D !important;
    border-color: #2E7D7D !important;
    color: #ffffff !important;
}

body.howtot-theme .category-icon {
    font-size: 32px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

body.howtot-theme .category-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin: 0 0 4px 0 !important;
}

body.howtot-theme .category-count {
    font-size: 14px !important;
    color: #7F8C8D !important;
    margin: 0 !important;
}

body.howtot-theme .category-filter:hover .category-name,
body.howtot-theme .tool-category:hover .category-name {
    color: #2E7D7D !important;
}

body.howtot-theme .category-filter.active .category-name,
body.howtot-theme .category-filter.active .category-count {
    color: #ffffff !important;
}

/* Category quick filters section */
body.howtot-theme .category-quick-filters {
    padding: 32px 0 !important;
    margin: 32px 0 !important;
}

body.howtot-theme .category-quick-filters h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin: 0 0 24px 0 !important;
}

body.howtot-theme .category-buttons {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}

/* Enhanced Category Buttons */
body.howtot-theme .category-btn {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%) !important;
    border: 2px solid rgba(78, 205, 196, 0.15) !important;
    border-radius: 18px !important;
    padding: 28px 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 140px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

body.howtot-theme .category-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.1), transparent) !important;
    transition: left 0.6s !important;
}

body.howtot-theme .category-btn:hover::before {
    left: 100% !important;
}

body.howtot-theme .category-btn:hover {
    border-color: rgba(78, 205, 196, 0.4) !important;
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(78, 205, 196, 0.15) !important;
}

body.howtot-theme .category-btn.active {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    border-color: #2E7D7D !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(46, 125, 125, 0.3) !important;
}

body.howtot-theme .category-btn .category-icon {
    font-size: 40px !important;
    margin-bottom: 12px !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;
    transition: transform 0.3s ease !important;
}

body.howtot-theme .category-btn:hover .category-icon {
    transform: scale(1.1) rotate(5deg) !important;
}

body.howtot-theme .category-btn .category-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
}

body.howtot-theme .category-btn .category-count {
    font-size: 13px !important;
    color: #4A5568 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    background: rgba(78, 205, 196, 0.1) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(78, 205, 196, 0.2) !important;
}

body.howtot-theme .category-btn:hover .category-name {
    color: #2E7D7D !important;
}

body.howtot-theme .category-btn.active .category-name,
body.howtot-theme .category-btn.active .category-count {
    color: #ffffff !important;
}

body.howtot-theme .category-btn.active .category-count {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Universal card styles */
body.howtot-theme .tool-card,
body.howtot-theme .category-card,
body.howtot-theme .content-card {
    background: #ffffff !important;
    border: 1px solid #E0E6ED !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

body.howtot-theme .tool-card:hover,
body.howtot-theme .category-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    border-color: #4ECDC4 !important;
}

/* Universal button styles */
body.howtot-theme .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

body.howtot-theme .btn-primary {
    background: #2E7D7D !important;
    color: #ffffff !important;
}

body.howtot-theme .btn-primary:hover {
    background: #236565 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

body.howtot-theme .btn-secondary {
    background: #4ECDC4 !important;
    color: #ffffff !important;
}

body.howtot-theme .btn-outline {
    background: transparent !important;
    color: #2E7D7D !important;
    border: 2px solid #2E7D7D !important;
}

/* Enhanced Search Section */
body.howtot-theme .search-section,
body.howtot-theme .tools-search,
body.howtot-theme .tools-search-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%) !important;
    padding: 56px 40px !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
    margin: 48px 0 !important;
    text-align: center !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .tools-search-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #2E7D7D 0%, #4ECDC4 50%, #2E7D7D 100%) !important;
}

/* Tools search section specific styling */
body.howtot-theme .tools-search-section .search-header h2 {
    font-size: 32px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin: 0 0 16px 0 !important;
}

body.howtot-theme .tools-search-section .search-header p {
    font-size: 18px !important;
    color: #7F8C8D !important;
    margin: 0 0 32px 0 !important;
}

body.howtot-theme .search-section h2,
body.howtot-theme .tools-search h2 {
    font-size: 32px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin: 0 0 16px 0 !important;
}

body.howtot-theme .search-section p,
body.howtot-theme .tools-search p {
    font-size: 18px !important;
    color: #7F8C8D !important;
    margin: 0 0 32px 0 !important;
}

body.howtot-theme .search-form,
body.howtot-theme .tools-search-form {
    display: flex !important;
    gap: 16px !important;
    align-items: end !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* Tools search form specific styling */
body.howtot-theme .tools-search-form .search-controls {
    display: flex !important;
    gap: 16px !important;
    align-items: end !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
}

body.howtot-theme .search-input-group,
body.howtot-theme .category-filter-group {
    flex: 1 !important;
    min-width: 200px !important;
    text-align: left !important;
}

body.howtot-theme .search-label,
body.howtot-theme .filter-label {
    display: block !important;
    font-weight: 500 !important;
    color: #2C3E50 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

/* Enhanced Form Elements */
body.howtot-theme .search-input,
body.howtot-theme .category-filter select {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 2px solid rgba(78, 205, 196, 0.2) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    background: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

body.howtot-theme .search-input:focus,
body.howtot-theme .category-filter select:focus {
    border-color: #4ECDC4 !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.1) !important;
    transform: translateY(-1px) !important;
}

body.howtot-theme .search-submit {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 15px rgba(46, 125, 125, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .search-submit::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.6s !important;
}

body.howtot-theme .search-submit:hover::before {
    left: 100% !important;
}

body.howtot-theme .search-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(46, 125, 125, 0.4) !important;
}

body.howtot-theme .search-submit:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(46, 125, 125, 0.3) !important;
}

body.howtot-theme .form-group {
    flex: 1 !important;
    min-width: 200px !important;
    text-align: left !important;
}

body.howtot-theme .form-label {
    display: block !important;
    font-weight: 500 !important;
    color: #2C3E50 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

body.howtot-theme .form-control,
body.howtot-theme input[type="text"],
body.howtot-theme input[type="search"],
body.howtot-theme select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #E0E6ED !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    background: #ffffff !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
}

body.howtot-theme .form-control:focus,
body.howtot-theme input:focus,
body.howtot-theme select:focus {
    border-color: #4ECDC4 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1) !important;
}

/* Search results info */
body.howtot-theme .search-results-info {
    text-align: center !important;
    color: #7F8C8D !important;
    font-size: 16px !important;
    margin: 32px 0 !important;
}

/* Universal stats styles */
body.howtot-theme .stats-section,
body.howtot-theme .tools-stats,
body.howtot-theme .tools-hero {
    text-align: center !important;
    padding: 48px 0 !important;
    background: #F8F9FA !important;
    margin: 32px 0 !important;
}

/* Tools hero section specific - Enhanced Aesthetics */
body.howtot-theme .tools-hero {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 64px !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 64px 24px !important;
    background: linear-gradient(135deg, #F8F9FA 0%, #ffffff 50%, #F1F8FF 100%) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .tools-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 300px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(78, 205, 196, 0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

body.howtot-theme .tools-hero .hero-content {
    text-align: left !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .tools-hero h1 {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: #1A202C !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

body.howtot-theme .tools-hero .hero-description {
    font-size: 19px !important;
    color: #4A5568 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
}

/* Enhanced Stats Cards */
body.howtot-theme .tools-stats,
body.howtot-theme .stats-grid,
body.howtot-theme .tools-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.howtot-theme .stat-item,
body.howtot-theme .tools-stat {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.2) !important;
    border-radius: 16px !important;
    padding: 24px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .stat-item::before,
body.howtot-theme .tools-stat::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
}

body.howtot-theme .stat-item:hover,
body.howtot-theme .tools-stat:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(78, 205, 196, 0.2) !important;
    border-color: rgba(78, 205, 196, 0.4) !important;
}

body.howtot-theme .stat-number,
body.howtot-theme .tools-stat-number {
    display: block !important;
    font-size: 52px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

body.howtot-theme .stat-label,
body.howtot-theme .tools-stat-label {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2D3748 !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
}

body.howtot-theme .stat-description,
body.howtot-theme .tools-stat-description {
    font-size: 12px !important;
    color: #718096 !important;
    margin-top: 4px !important;
}

/* Tools directory specific stats */
body.howtot-theme .directory-stats {
    background: #ffffff !important;
    padding: 48px 0 !important;
    text-align: center !important;
    margin: 0 0 48px 0 !important;
}

body.howtot-theme .directory-stats .stat-item {
    margin: 0 0 32px 0 !important;
}

body.howtot-theme .directory-stats .stat-item:last-child {
    margin-bottom: 0 !important;
}

/* Universal breadcrumb styles */
body.howtot-theme .breadcrumb {
    background: #F8F9FA !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

body.howtot-theme .breadcrumb a {
    color: #2E7D7D !important;
    text-decoration: none !important;
}

body.howtot-theme .breadcrumb a:hover {
    color: #236565 !important;
}

/* Enhanced Mobile Responsive Design */
@media (max-width: 768px) {
    /* Hero section mobile */
    body.howtot-theme .tools-hero {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 40px 20px !important;
        text-align: center !important;
    }
    
    body.howtot-theme .tools-hero h1 {
        font-size: 32px !important;
    }
    
    body.howtot-theme .tools-hero .hero-content {
        text-align: center !important;
    }
    
    /* Stats mobile layout */
    body.howtot-theme .tools-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        max-width: 100% !important;
    }
    
    body.howtot-theme .stat-item {
        padding: 20px 12px !important;
    }
    
    body.howtot-theme .stat-number {
        font-size: 40px !important;
    }
    
    /* Search section mobile */
    body.howtot-theme .tools-search-section {
        padding: 32px 20px !important;
        margin: 24px 0 !important;
    }
    
    body.howtot-theme .tools-search-form .search-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
    }
    
    body.howtot-theme .search-input-group,
    body.howtot-theme .category-filter-group {
        min-width: auto !important;
    }
    
    /* Category buttons mobile */
    body.howtot-theme .category-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    body.howtot-theme .category-btn {
        min-height: 120px !important;
        padding: 20px 16px !important;
    }
    
    body.howtot-theme .category-btn .category-icon {
        font-size: 32px !important;
    }
    
    body.howtot-theme .category-btn .category-name {
        font-size: 14px !important;
    }
    
    /* General mobile adjustments */
    body.howtot-theme .page-title,
    body.howtot-theme .entry-title {
        font-size: 28px !important;
    }
    
    body.howtot-theme .section-header h2 {
        font-size: 24px !important;
    }
    
    body.howtot-theme .tools-grid,
    body.howtot-theme .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    body.howtot-theme .tools-hero {
        padding: 32px 16px !important;
    }
    
    body.howtot-theme .tools-hero h1 {
        font-size: 28px !important;
    }
    
    body.howtot-theme .category-buttons {
        grid-template-columns: 1fr !important;
    }
    
    body.howtot-theme .tools-search-section {
        padding: 24px 16px !important;
    }
}

/* ================================================
   BLOG PAGES STYLING
   ================================================ */

/* Blog Hero Section */
body.howtot-theme .blog-hero {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 64px !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 64px 24px !important;
    background: linear-gradient(135deg, #F8F9FA 0%, #ffffff 50%, #F1F8FF 100%) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .blog-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 300px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(78, 205, 196, 0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

body.howtot-theme .blog-hero .hero-content {
    text-align: left !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .blog-hero h1 {
    font-size: 42px !important;
    font-weight: 800 !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.howtot-theme .blog-hero .hero-description {
    font-size: 19px !important;
    color: #4A5568 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
}

/* Blog Stats */
body.howtot-theme .blog-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.howtot-theme .blog-stats .stat-item {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.2) !important;
    border-radius: 16px !important;
    padding: 24px 16px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .blog-stats .stat-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
}

/* Blog Content Layout */
body.howtot-theme .blog-content {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 48px !important;
    max-width: 1200px !important;
    margin: 48px auto 0 auto !important;
    padding: 0 24px !important;
}

/* Category Filter */
body.howtot-theme .category-filter {
    margin-bottom: 48px !important;
}

body.howtot-theme .filter-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
}

body.howtot-theme .filter-header h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin: 0 !important;
}

body.howtot-theme .filter-count {
    font-size: 14px !important;
    color: #7F8C8D !important;
    font-weight: 500 !important;
}

body.howtot-theme .filter-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

body.howtot-theme .filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: #ffffff !important;
    border: 2px solid rgba(78, 205, 196, 0.15) !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    color: #2C3E50 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

body.howtot-theme .filter-btn:hover {
    border-color: #4ECDC4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.2) !important;
}

body.howtot-theme .filter-btn.active {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    border-color: #2E7D7D !important;
    color: #ffffff !important;
}

body.howtot-theme .filter-btn .filter-count {
    background: rgba(78, 205, 196, 0.1) !important;
    border-radius: 10px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    color: #2E7D7D !important;
}

body.howtot-theme .filter-btn.active .filter-count {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Featured Post */
body.howtot-theme .featured-post {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%) !important;
    border: 1px solid rgba(78, 205, 196, 0.15) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    margin-bottom: 48px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .featured-badge {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.howtot-theme .featured-content {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 40px !important;
    align-items: center !important;
}

body.howtot-theme .featured-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 16px 0 !important;
}

body.howtot-theme .featured-title a {
    color: #1A202C !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

body.howtot-theme .featured-title a:hover {
    color: #2E7D7D !important;
}

body.howtot-theme .featured-excerpt {
    font-size: 18px !important;
    color: #4A5568 !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

body.howtot-theme .featured-image img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Posts Grid */
body.howtot-theme .posts-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 32px !important;
    margin: 32px 0 !important;
}

body.howtot-theme .post-card {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

body.howtot-theme .post-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
}

body.howtot-theme .post-image {
    position: relative !important;
    overflow: hidden !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    flex-shrink: 0 !important;
}

body.howtot-theme .post-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

body.howtot-theme .post-image.no-thumbnail {
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.howtot-theme .post-placeholder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
}

body.howtot-theme .placeholder-icon {
    font-size: 48px !important;
    color: #95a5a6 !important;
    opacity: 0.5 !important;
}

body.howtot-theme .post-card:hover .post-image img {
    transform: scale(1.05) !important;
}

body.howtot-theme .post-category-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: rgba(46, 125, 125, 0.9) !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(4px) !important;
}

body.howtot-theme .post-card .post-content {
    padding: 24px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.howtot-theme .post-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    color: #718096 !important;
}

body.howtot-theme .post-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px 0 !important;
}

body.howtot-theme .post-title a {
    color: #1A202C !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

body.howtot-theme .post-title a:hover {
    color: #2E7D7D !important;
}

body.howtot-theme .post-excerpt {
    color: #4A5568 !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    flex: 1 !important;
}

body.howtot-theme .post-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: auto !important;
}

body.howtot-theme .read-more {
    color: #2E7D7D !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .read-more:hover {
    color: #236565 !important;
    transform: translateX(4px) !important;
}

body.howtot-theme .post-tags {
    display: flex !important;
    gap: 8px !important;
}

body.howtot-theme .tag {
    background: rgba(78, 205, 196, 0.1) !important;
    color: #2E7D7D !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Blog Sidebar */
body.howtot-theme .blog-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

body.howtot-theme .sidebar-widget {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .sidebar-widget:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    border-color: rgba(78, 205, 196, 0.2) !important;
}

body.howtot-theme .sidebar-widget h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    margin: 0 0 16px 0 !important;
    position: relative !important;
    padding-bottom: 8px !important;
}

body.howtot-theme .sidebar-widget h3::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 40px !important;
    height: 3px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    border-radius: 2px !important;
}

/* Newsletter Widget */
body.howtot-theme .newsletter-widget {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
}

body.howtot-theme .newsletter-widget h3 {
    color: #ffffff !important;
}

body.howtot-theme .newsletter-widget h3::after {
    background: rgba(255, 255, 255, 0.3) !important;
}

body.howtot-theme .newsletter-widget p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 20px !important;
}

body.howtot-theme .newsletter-form .form-group {
    display: flex !important;
    gap: 8px !important;
}

body.howtot-theme .newsletter-form input {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

body.howtot-theme .newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.howtot-theme .newsletter-form input:focus {
    border-color: rgba(255, 255, 255, 0.5) !important;
    outline: none !important;
}

body.howtot-theme .newsletter-form button {
    background: #ffffff !important;
    color: #2E7D7D !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .newsletter-form button:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-1px) !important;
}

/* Popular Posts Widget */
body.howtot-theme .popular-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

body.howtot-theme .popular-item {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

body.howtot-theme .popular-rank {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

body.howtot-theme .popular-content h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
}

body.howtot-theme .popular-content h4 a {
    color: #1A202C !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

body.howtot-theme .popular-content h4 a:hover {
    color: #2E7D7D !important;
}

body.howtot-theme .popular-meta {
    font-size: 12px !important;
    color: #718096 !important;
    display: flex !important;
    gap: 8px !important;
}

/* Categories Widget */
body.howtot-theme .categories-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

body.howtot-theme .category-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: rgba(78, 205, 196, 0.05) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #2C3E50 !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .category-item:hover {
    background: rgba(78, 205, 196, 0.1) !important;
    transform: translateX(4px) !important;
}

body.howtot-theme .category-item.active {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
}

body.howtot-theme .category-count {
    background: rgba(78, 205, 196, 0.2) !important;
    color: #2E7D7D !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

body.howtot-theme .category-item.active .category-count {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* ================================================
   SINGLE POST PAGE STYLING
   ================================================ */

/* Single Post Container */
body.howtot-theme .single-post-container .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

body.howtot-theme .post-content {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 48px !important;
    margin-top: 32px !important;
}

/* Article Header */
body.howtot-theme .article-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%) !important;
    border: 1px solid rgba(78, 205, 196, 0.15) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    margin-bottom: 32px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
}

body.howtot-theme .article-meta {
    margin-bottom: 24px !important;
}

body.howtot-theme .meta-primary {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
}

body.howtot-theme .post-category a {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

body.howtot-theme .article-title {
    font-size: 48px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #1A202C !important;
    margin: 0 0 16px 0 !important;
}

body.howtot-theme .article-excerpt {
    font-size: 20px !important;
    color: #4A5568 !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    font-style: italic !important;
}

/* Share Buttons */
body.howtot-theme .share-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body.howtot-theme .share-label {
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin-right: 8px !important;
}

body.howtot-theme .share-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: #ffffff !important;
    border: 2px solid rgba(78, 205, 196, 0.2) !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    color: #2C3E50 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .share-btn:hover {
    border-color: #4ECDC4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.2) !important;
}

/* Article Content */
body.howtot-theme .post-main {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

body.howtot-theme .article-content {
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: #2D3748 !important;
}

body.howtot-theme .article-content h2 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 32px 0 16px 0 !important;
    position: relative !important;
    padding-left: 20px !important;
}

body.howtot-theme .article-content h2::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    border-radius: 2px !important;
}

body.howtot-theme .article-content h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin: 24px 0 12px 0 !important;
}

body.howtot-theme .article-content p {
    margin-bottom: 20px !important;
}

body.howtot-theme .article-content img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    margin: 24px 0 !important;
}

/* Pagination */
body.howtot-theme .pagination {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-top: 32px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

body.howtot-theme .pagination-info {
    margin-bottom: 16px !important;
    color: #718096 !important;
    font-size: 14px !important;
}

body.howtot-theme .pagination-links a {
    display: inline-block !important;
    padding: 10px 16px !important;
    margin: 0 4px !important;
    background: rgba(78, 205, 196, 0.1) !important;
    color: #2E7D7D !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .pagination-links a:hover,
body.howtot-theme .pagination-links .current {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* Mobile Responsive for Blog */
@media (max-width: 768px) {
    body.howtot-theme .blog-hero,
    body.howtot-theme .featured-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center !important;
    }
    
    body.howtot-theme .blog-hero h1 {
        font-size: 32px !important;
    }
    
    body.howtot-theme .blog-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100% !important;
    }
    
    body.howtot-theme .blog-content,
    body.howtot-theme .post-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    body.howtot-theme .filter-buttons {
        justify-content: center !important;
    }
    
    body.howtot-theme .posts-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    body.howtot-theme .article-title {
        font-size: 32px !important;
    }
    
    body.howtot-theme .article-header,
    body.howtot-theme .post-main {
        padding: 24px !important;
    }
    
    body.howtot-theme .share-buttons {
        justify-content: center !important;
    }
}

/* ================================================
   CONTACT PAGE STYLING
   ================================================ */

/* Contact Hero Section */
body.howtot-theme .contact-hero {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 64px !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 64px 24px !important;
    background: linear-gradient(135deg, #F8F9FA 0%, #ffffff 50%, #F1F8FF 100%) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .contact-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 300px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(78, 205, 196, 0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

body.howtot-theme .contact-hero .hero-content {
    text-align: left !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .contact-hero h1 {
    font-size: 42px !important;
    font-weight: 800 !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.howtot-theme .contact-hero .hero-description {
    font-size: 19px !important;
    color: #4A5568 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
}

/* Contact Stats */
body.howtot-theme .contact-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.howtot-theme .contact-stats .stat-item {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.2) !important;
    border-radius: 16px !important;
    padding: 20px 12px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

body.howtot-theme .contact-stats .stat-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
}

body.howtot-theme .contact-stats .stat-icon {
    font-size: 24px !important;
    display: block !important;
}

body.howtot-theme .contact-stats .stat-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #2D3748 !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Contact Content Layout */
body.howtot-theme .contact-content {
    max-width: 1200px !important;
    margin: 48px auto 0 auto !important;
    padding: 0 24px !important;
}

body.howtot-theme .contact-grid {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 48px !important;
    align-items: start !important;
}

/* Contact Form Section */
body.howtot-theme .contact-form-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%) !important;
    border: 1px solid rgba(78, 205, 196, 0.15) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .contact-form-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #2E7D7D 0%, #4ECDC4 50%, #2E7D7D 100%) !important;
}

body.howtot-theme .form-header h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 0 0 8px 0 !important;
}

body.howtot-theme .form-header p {
    color: #4A5568 !important;
    margin: 0 0 32px 0 !important;
    font-size: 16px !important;
}

/* Form Messages */
body.howtot-theme .form-message {
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
}

body.howtot-theme .form-message.success {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

body.howtot-theme .form-message.error {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

body.howtot-theme .message-icon {
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

body.howtot-theme .message-content h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
}

body.howtot-theme .form-message.success .message-content h3 {
    color: #059669 !important;
}

body.howtot-theme .form-message.error .message-content h3 {
    color: #DC2626 !important;
}

/* Contact Form */
body.howtot-theme .contact-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

body.howtot-theme .contact-form .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

body.howtot-theme .contact-form label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2D3748 !important;
}

body.howtot-theme .contact-form input,
body.howtot-theme .contact-form select,
body.howtot-theme .contact-form textarea {
    padding: 16px 20px !important;
    border: 2px solid rgba(78, 205, 196, 0.2) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    background: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    font-family: inherit !important;
}

body.howtot-theme .contact-form input:focus,
body.howtot-theme .contact-form select:focus,
body.howtot-theme .contact-form textarea:focus {
    border-color: #4ECDC4 !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.1) !important;
    transform: translateY(-1px) !important;
}

body.howtot-theme .contact-form textarea {
    resize: vertical !important;
    min-height: 120px !important;
}

body.howtot-theme .form-actions {
    margin-top: 16px !important;
}

body.howtot-theme .contact-form .btn {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 15px rgba(46, 125, 125, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .contact-form .btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.6s !important;
}

body.howtot-theme .contact-form .btn:hover::before {
    left: 100% !important;
}

body.howtot-theme .contact-form .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(46, 125, 125, 0.4) !important;
}

/* Contact Information Section */
body.howtot-theme .contact-info-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

body.howtot-theme .info-header h2 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    margin: 0 0 8px 0 !important;
}

body.howtot-theme .info-header p {
    color: #4A5568 !important;
    margin: 0 !important;
    font-size: 16px !important;
}

/* Contact Methods */
body.howtot-theme .contact-methods {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

body.howtot-theme .contact-method {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

body.howtot-theme .contact-method:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
}

body.howtot-theme .method-icon {
    font-size: 32px !important;
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(78, 205, 196, 0.1) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.howtot-theme .method-content h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    margin: 0 0 4px 0 !important;
}

body.howtot-theme .method-content p {
    font-size: 14px !important;
    color: #718096 !important;
    margin: 0 0 8px 0 !important;
}

body.howtot-theme .method-content a {
    color: #2E7D7D !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

body.howtot-theme .method-content a:hover {
    color: #236565 !important;
}

/* Response Times */
body.howtot-theme .response-times {
    background: rgba(78, 205, 196, 0.05) !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

body.howtot-theme .response-times h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    margin: 0 0 16px 0 !important;
}

body.howtot-theme .response-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.howtot-theme .response-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(78, 205, 196, 0.1) !important;
}

body.howtot-theme .response-item:last-child {
    border-bottom: none !important;
}

body.howtot-theme .response-type {
    font-size: 14px !important;
    color: #2D3748 !important;
    font-weight: 500 !important;
}

body.howtot-theme .response-time {
    font-size: 14px !important;
    color: #2E7D7D !important;
    font-weight: 600 !important;
}

/* Quick Help */
body.howtot-theme .quick-help {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

body.howtot-theme .quick-help h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    margin: 0 0 8px 0 !important;
}

body.howtot-theme .quick-help p {
    color: #4A5568 !important;
    margin: 0 0 16px 0 !important;
    font-size: 14px !important;
}

body.howtot-theme .help-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

body.howtot-theme .help-links a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: rgba(78, 205, 196, 0.05) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #2C3E50 !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

body.howtot-theme .help-links a:hover {
    background: rgba(78, 205, 196, 0.1) !important;
    transform: translateX(4px) !important;
    color: #2E7D7D !important;
}

body.howtot-theme .link-icon {
    font-size: 16px !important;
}

/* Trust Section */
body.howtot-theme .contact-trust {
    max-width: 1200px !important;
    margin: 64px auto !important;
    padding: 0 24px !important;
    text-align: center !important;
}

body.howtot-theme .contact-trust h2 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 0 0 40px 0 !important;
}

body.howtot-theme .trust-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 32px !important;
}

body.howtot-theme .trust-item {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .trust-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
}

body.howtot-theme .trust-icon {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

body.howtot-theme .trust-item h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    margin: 0 0 12px 0 !important;
}

body.howtot-theme .trust-item p {
    color: #4A5568 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Office Information */
body.howtot-theme .office-info {
    background: rgba(78, 205, 196, 0.05) !important;
    padding: 48px 0 !important;
    margin-top: 32px !important;
}

body.howtot-theme .office-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    text-align: center !important;
}

body.howtot-theme .office-content h2 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 0 0 40px 0 !important;
}

body.howtot-theme .office-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 32px !important;
}

body.howtot-theme .office-item {
    background: #ffffff !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .office-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
}

body.howtot-theme .office-icon {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

body.howtot-theme .office-details h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    margin: 0 0 12px 0 !important;
}

body.howtot-theme .office-details p {
    color: #4A5568 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Mobile Responsive for Contact */
@media (max-width: 768px) {
    body.howtot-theme .contact-hero {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center !important;
        padding: 40px 20px !important;
    }
    
    body.howtot-theme .contact-hero .hero-content {
        text-align: center !important;
    }
    
    body.howtot-theme .contact-hero h1 {
        font-size: 32px !important;
    }
    
    body.howtot-theme .contact-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100% !important;
    }
    
    body.howtot-theme .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    body.howtot-theme .contact-form-section,
    body.howtot-theme .quick-help,
    body.howtot-theme .trust-item,
    body.howtot-theme .office-item {
        padding: 24px !important;
    }
    
    body.howtot-theme .trust-grid,
    body.howtot-theme .office-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

body.howtot-theme .homepage-container {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Maximum specificity hero section */
body.howtot-theme.howtot-homepage .hero-section {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    padding: 48px 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
}

body.howtot-theme.howtot-homepage .hero-content {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 48px !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme.howtot-homepage .hero-title {
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin: 0 0 24px 0 !important;
    text-align: left !important;
}

body.howtot-theme.howtot-homepage .hero-subtitle {
    display: block !important;
    font-size: 20px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
}

body.howtot-theme.howtot-homepage .hero-description {
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.8 !important;
    margin: 24px 0 32px 0 !important;
}

body.howtot-theme.howtot-homepage .hero-features {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 24px 0 !important;
}

body.howtot-theme.howtot-homepage .feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
}

body.howtot-theme.howtot-homepage .hero-actions {
    display: flex !important;
    gap: 16px !important;
    margin-top: 32px !important;
    justify-content: flex-start !important;
}

body.howtot-theme.howtot-homepage .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    justify-content: center !important;
}

body.howtot-theme.howtot-homepage .btn-primary {
    background: #2E7D7D !important;
    color: #ffffff !important;
    border-color: #2E7D7D !important;
}

body.howtot-theme.howtot-homepage .btn-secondary {
    background: #4ECDC4 !important;
    color: #ffffff !important;
    border-color: #4ECDC4 !important;
}

body.howtot-theme.howtot-homepage .btn-large {
    padding: 16px 32px !important;
    font-size: 18px !important;
}

body.howtot-theme.howtot-homepage .hero-stats {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important;
}

body.howtot-theme.howtot-homepage .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
}

body.howtot-theme.howtot-homepage .stat-card {
    text-align: center !important;
    padding: 24px !important;
    background: #F8F9FA !important;
    border-radius: 6px !important;
    border: 1px solid #E0E6ED !important;
}

body.howtot-theme.howtot-homepage .stat-number {
    display: block !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #2E7D7D !important;
    line-height: 1 !important;
}

body.howtot-theme.howtot-homepage .stat-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin-top: 4px !important;
}

body.howtot-theme.howtot-homepage .stat-description {
    font-size: 12px !important;
    color: #95A5A6 !important;
    margin-top: 4px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    body.howtot-theme.howtot-homepage .hero-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 32px !important;
    }
    
    body.howtot-theme.howtot-homepage .hero-title {
        font-size: 32px !important;
        text-align: center !important;
    }
    
    body.howtot-theme.howtot-homepage .hero-features {
        grid-template-columns: 1fr !important;
    }
    
    body.howtot-theme.howtot-homepage .hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    body.howtot-theme.howtot-homepage .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Container override */
body.howtot-theme .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* ====================================
   ALL HOMEPAGE SECTIONS STYLING
   ==================================== */

/* Value Proposition Section */
body.howtot-theme .value-proposition {
    background: #F8F9FA !important;
    padding: 48px 0 !important;
}

body.howtot-theme .value-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 32px !important;
    margin-top: 48px !important;
}

body.howtot-theme .value-card {
    background: #ffffff !important;
    padding: 32px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .value-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important;
}

body.howtot-theme .value-icon {
    font-size: 48px !important;
    margin-bottom: 24px !important;
    display: block !important;
}

body.howtot-theme .value-card h3 {
    font-size: 24px !important;
    color: #2C3E50 !important;
    margin-bottom: 16px !important;
    font-weight: 700 !important;
}

body.howtot-theme .value-card p {
    color: #7F8C8D !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

body.howtot-theme .value-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.howtot-theme .value-features li {
    color: #2E7D7D !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

body.howtot-theme .value-features li:before {
    content: "✓ " !important;
    color: #27AE60 !important;
    font-weight: bold !important;
}

/* Featured Tools Section */
body.howtot-theme .featured-tools {
    background: #ffffff !important;
    padding: 48px 0 !important;
}

body.howtot-theme .tools-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 32px !important;
    margin: 48px 0 !important;
}

body.howtot-theme .tool-card {
    background: #ffffff !important;
    border: 1px solid #E0E6ED !important;
    border-radius: 12px !important;
    padding: 32px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .tool-card:hover {
    box-shadow: 0 20px 25px rgba(0,0,0,0.15) !important;
    transform: translateY(-4px) !important;
    border-color: #2E7D7D !important;
}

body.howtot-theme .tool-header {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 24px !important;
    gap: 16px !important;
}

body.howtot-theme .tool-icon {
    font-size: 32px !important;
    line-height: 1 !important;
}

body.howtot-theme .tool-info {
    flex: 1 !important;
}

body.howtot-theme .tool-name {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
}

body.howtot-theme .tool-name a {
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .tool-name a:hover {
    color: #2E7D7D !important;
}

body.howtot-theme .tool-category {
    background: #2E7D7D !important;
    color: #ffffff !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body.howtot-theme .tool-description {
    color: #7F8C8D !important;
    line-height: 1.8 !important;
    margin: 0 0 24px 0 !important;
}

body.howtot-theme .tool-features {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 24px 0 !important;
}

body.howtot-theme .feature-tag {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #F8F9FA !important;
    color: #7F8C8D !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

body.howtot-theme .tool-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid #E0E6ED !important;
}

body.howtot-theme .tool-usage {
    font-size: 14px !important;
    color: #27AE60 !important;
    font-weight: 600 !important;
}

body.howtot-theme .tools-footer {
    text-align: center !important;
    margin-top: 48px !important;
}

/* Tool Categories Section */
body.howtot-theme .tool-categories {
    background: #F8F9FA !important;
    padding: 48px 0 !important;
}

body.howtot-theme .categories-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 32px !important;
    margin-top: 48px !important;
}

body.howtot-theme .category-card {
    background: #ffffff !important;
    border: 1px solid #E0E6ED !important;
    border-radius: 12px !important;
    padding: 32px !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .category-card:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important;
    transform: translateY(-4px) !important;
}

body.howtot-theme .category-icon {
    font-size: 48px !important;
    margin-bottom: 24px !important;
    display: block !important;
}

body.howtot-theme .category-card h3 {
    font-size: 24px !important;
    color: #2C3E50 !important;
    margin-bottom: 16px !important;
    font-weight: 700 !important;
}

body.howtot-theme .category-card p {
    color: #7F8C8D !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

body.howtot-theme .category-tools {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
}

body.howtot-theme .category-tools li {
    color: #7F8C8D !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    position: relative !important;
    padding-left: 20px !important;
}

body.howtot-theme .category-tools li:before {
    content: "•" !important;
    color: #2E7D7D !important;
    font-weight: bold !important;
    position: absolute !important;
    left: 0 !important;
}

body.howtot-theme .category-link {
    color: #2E7D7D !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .category-link:hover {
    color: #236969 !important;
}

/* Educational Content Section */
body.howtot-theme .educational-content {
    background: #ffffff !important;
    padding: 48px 0 !important;
}

body.howtot-theme .content-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 48px !important;
}

body.howtot-theme .education-categories {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 32px !important;
}

body.howtot-theme .education-card {
    display: flex !important;
    gap: 24px !important;
    background: #F8F9FA !important;
    padding: 32px !important;
    border-radius: 12px !important;
    border: 1px solid #E0E6ED !important;
}

body.howtot-theme .education-icon {
    font-size: 48px !important;
    flex-shrink: 0 !important;
}

body.howtot-theme .education-content h3 {
    font-size: 24px !important;
    color: #2C3E50 !important;
    margin-bottom: 16px !important;
    font-weight: 700 !important;
}

body.howtot-theme .education-content p {
    color: #7F8C8D !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

body.howtot-theme .education-topics {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.howtot-theme .education-topics li {
    color: #7F8C8D !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    position: relative !important;
    padding-left: 20px !important;
}

body.howtot-theme .education-topics li:before {
    content: "→" !important;
    color: #2E7D7D !important;
    font-weight: bold !important;
    position: absolute !important;
    left: 0 !important;
}

/* Latest Articles Sidebar */
body.howtot-theme .content-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 48px !important;
}

body.howtot-theme .content-sidebar {
    background: #F8F9FA !important;
    padding: 32px !important;
    border-radius: 12px !important;
    border: 1px solid #E0E6ED !important;
    height: fit-content !important;
}

body.howtot-theme .recent-posts h3 {
    font-size: 24px !important;
    color: #2C3E50 !important;
    margin-bottom: 24px !important;
    font-weight: 700 !important;
}

body.howtot-theme .posts-list {
    margin-bottom: 24px !important;
}

body.howtot-theme .post-preview {
    padding: 16px 0 !important;
    border-bottom: 1px solid #E0E6ED !important;
}

body.howtot-theme .post-preview:last-child {
    border-bottom: none !important;
}

body.howtot-theme .post-preview h4 {
    font-size: 16px !important;
    margin: 0 0 8px 0 !important;
    font-weight: 600 !important;
}

body.howtot-theme .post-preview h4 a {
    color: #2C3E50 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .post-preview h4 a:hover {
    color: #2E7D7D !important;
}

body.howtot-theme .post-excerpt {
    color: #7F8C8D !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 8px 0 !important;
}

body.howtot-theme .post-meta {
    font-size: 12px !important;
    color: #95A5A6 !important;
}

/* Trust Indicators Section */
body.howtot-theme .trust-indicators {
    background: #F8F9FA !important;
    padding: 48px 0 !important;
}

body.howtot-theme .trust-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 32px !important;
    margin-top: 48px !important;
}

body.howtot-theme .trust-item {
    display: flex !important;
    gap: 24px !important;
    background: #ffffff !important;
    padding: 32px !important;
    border-radius: 12px !important;
    border: 1px solid #E0E6ED !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .trust-item:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important;
    transform: translateY(-4px) !important;
}

body.howtot-theme .trust-icon {
    font-size: 48px !important;
    flex-shrink: 0 !important;
}

body.howtot-theme .trust-content h3 {
    font-size: 20px !important;
    color: #2C3E50 !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
}

body.howtot-theme .trust-content p {
    color: #7F8C8D !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
}

body.howtot-theme .trust-metrics {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

body.howtot-theme .trust-metrics .metric {
    background: #2E7D7D !important;
    color: #ffffff !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Call to Action Section */
body.howtot-theme .cta-section {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    padding: 64px 0 !important;
    text-align: center !important;
}

body.howtot-theme .cta-content {
    max-width: 800px !important;
    margin: 0 auto !important;
}

body.howtot-theme .cta-text h2 {
    font-size: 36px !important;
    color: #ffffff !important;
    margin-bottom: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

body.howtot-theme .cta-text p {
    font-size: 20px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.6 !important;
    margin-bottom: 48px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.howtot-theme .cta-actions {
    display: flex !important;
    gap: 24px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

body.howtot-theme .cta-actions .btn {
    padding: 16px 32px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border: 2px solid transparent !important;
}

body.howtot-theme .cta-actions .btn-primary {
    background: #ffffff !important;
    color: #2E7D7D !important;
    border-color: #ffffff !important;
}

body.howtot-theme .cta-actions .btn-primary:hover {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

body.howtot-theme .cta-actions .btn-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

body.howtot-theme .cta-actions .btn-secondary:hover {
    background: #ffffff !important;
    color: #2E7D7D !important;
    border-color: #ffffff !important;
}

/* Section Headers Global Styling */
body.howtot-theme .section-header {
    text-align: center !important;
    margin-bottom: 48px !important;
}

body.howtot-theme .section-header h2 {
    font-size: 32px !important;
    color: #2C3E50 !important;
    margin-bottom: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

body.howtot-theme .section-header p {
    font-size: 18px !important;
    color: #7F8C8D !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* Button Styling for All Sections */
body.howtot-theme .btn-outline {
    background: transparent !important;
    color: #2E7D7D !important;
    border: 2px solid #2E7D7D !important;
}

body.howtot-theme .btn-outline:hover {
    background: #2E7D7D !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Mobile Responsive for All Sections */
@media (max-width: 768px) {
    body.howtot-theme .value-grid,
    body.howtot-theme .tools-grid,
    body.howtot-theme .categories-grid,
    body.howtot-theme .trust-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    body.howtot-theme .content-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    body.howtot-theme .section-header h2 {
        font-size: 28px !important;
    }
    
    body.howtot-theme .section-header p {
        font-size: 16px !important;
    }
    
    body.howtot-theme .education-card,
    body.howtot-theme .trust-item {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    body.howtot-theme .tool-actions {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
    
    body.howtot-theme .trust-metrics {
        justify-content: center !important;
    }
    
    body.howtot-theme .cta-text h2 {
        font-size: 28px !important;
    }
    
    body.howtot-theme .cta-text p {
        font-size: 18px !important;
    }
    
    body.howtot-theme .cta-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }
    
    body.howtot-theme .cta-actions .btn {
        width: 100% !important;
        max-width: 280px !important;
    }
}

/* ================================================
   COMPREHENSIVE TOOL INTERFACE STYLING
   ================================================ */

/* Universal Tool Interface Base Styling */
body.howtot-theme .tool-interface,
body.howtot-theme .password-analyzer-interface,
body.howtot-theme .qr-generator-interface,
body.howtot-theme .storage-calculator-interface,
body.howtot-theme .screen-resolution-interface,
body.howtot-theme .download-time-interface,
body.howtot-theme .wifi-channel-interface,
body.howtot-theme .battery-life-interface,
body.howtot-theme .data-backup-interface,
body.howtot-theme .device-compatibility-interface {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Tool Introduction Section */
body.howtot-theme .tool-intro {
    background: linear-gradient(135deg, #F8F9FA 0%, #ffffff 50%, #F1F8FF 100%) !important;
    border-radius: 20px !important;
    padding: 48px !important;
    margin-bottom: 32px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .tool-intro::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
}

body.howtot-theme .intro-content h3 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.2 !important;
}

body.howtot-theme .intro-content p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #7F8C8D !important;
    margin: 0 0 32px 0 !important;
    max-width: 800px !important;
}

body.howtot-theme .intro-stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 24px !important;
}

body.howtot-theme .intro-stats .stat {
    text-align: center !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(78, 205, 196, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.howtot-theme .intro-stats .stat:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
    background: #ffffff !important;
}

body.howtot-theme .intro-stats .stat .number {
    display: block !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #2E7D7D !important;
    margin-bottom: 8px !important;
}

body.howtot-theme .intro-stats .stat .label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #7F8C8D !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Form Sections */
body.howtot-theme .form-section {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(224, 230, 237, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .form-section:hover {
    border-color: rgba(78, 205, 196, 0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}

body.howtot-theme .section-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 24px 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #F8F9FA !important;
}

body.howtot-theme .step-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Enhanced Form Controls */
body.howtot-theme .form-section .form-group {
    margin-bottom: 24px !important;
}

body.howtot-theme .form-section .form-label {
    display: block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

body.howtot-theme .form-section .form-control {
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    border: 2px solid #E0E6ED !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #2C3E50 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

body.howtot-theme .form-section .form-control:focus {
    outline: none !important;
    border-color: #4ECDC4 !important;
    box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.1) !important;
    background: #ffffff !important;
}

body.howtot-theme .form-section .form-control::placeholder {
    color: #95A5A6 !important;
    opacity: 1 !important;
}

body.howtot-theme .form-section textarea.form-control {
    resize: vertical !important;
    min-height: 120px !important;
    line-height: 1.6 !important;
}

body.howtot-theme .form-section select.form-control {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%232C3E50' d='m0,1 2,2 2-2z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px !important;
    padding-right: 48px !important;
    appearance: none !important;
}

/* Enhanced Button Styling for Tools */
body.howtot-theme .form-section .btn,
body.howtot-theme .form-actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    min-height: 52px !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .form-section .btn-primary,
body.howtot-theme .form-actions .btn-primary {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
}

body.howtot-theme .form-section .btn-primary:hover,
body.howtot-theme .form-actions .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(46, 125, 125, 0.3) !important;
}

body.howtot-theme .form-section .btn-secondary,
body.howtot-theme .form-actions .btn-secondary {
    background: #ffffff !important;
    color: #2E7D7D !important;
    border: 2px solid #E0E6ED !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

body.howtot-theme .form-section .btn[disabled],
body.howtot-theme .form-actions .btn[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Form Actions */
body.howtot-theme .form-actions {
    text-align: center !important;
    padding: 32px 0 16px 0 !important;
    margin-top: 32px !important;
    border-top: 1px solid #F8F9FA !important;
}

/* Results Sections */
body.howtot-theme .analysis-results,
body.howtot-theme .qr-results,
body.howtot-theme .calculation-results,
body.howtot-theme .converter-results {
    background: linear-gradient(135deg, #F8F9FA 0%, #ffffff 100%) !important;
    border-radius: 20px !important;
    padding: 48px !important;
    margin-top: 32px !important;
    border: 1px solid rgba(78, 205, 196, 0.15) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
    position: relative !important;
}

body.howtot-theme .results-header {
    text-align: center !important;
    margin-bottom: 40px !important;
}

body.howtot-theme .results-header h4 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 12px 0 !important;
}

body.howtot-theme .results-header p {
    font-size: 16px !important;
    color: #7F8C8D !important;
    margin: 0 !important;
}

/* Analysis and Results Cards */
body.howtot-theme .analysis-grid,
body.howtot-theme .results-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 24px !important;
    margin-top: 32px !important;
}

body.howtot-theme .analysis-card,
body.howtot-theme .result-card {
    background: #ffffff !important;
    padding: 32px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(224, 230, 237, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .analysis-card:hover,
body.howtot-theme .result-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
}

body.howtot-theme .analysis-card h5,
body.howtot-theme .result-card h5 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Password Analyzer Specific */
body.howtot-theme .password-field-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

body.howtot-theme .password-field {
    flex: 1 !important;
    padding-right: 60px !important;
}

body.howtot-theme .toggle-password {
    position: absolute !important;
    right: 16px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 18px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    transition: background 0.3s ease !important;
}

body.howtot-theme .toggle-password:hover {
    background: rgba(78, 205, 196, 0.1) !important;
}

body.howtot-theme .strength-indicator {
    margin: 24px 0 !important;
    padding: 20px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #E0E6ED !important;
}

body.howtot-theme .strength-bar {
    width: 100% !important;
    height: 12px !important;
    background: #F8F9FA !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
}

body.howtot-theme .strength-fill {
    height: 100% !important;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 6px !important;
}

body.howtot-theme .strength-very-weak .strength-fill { 
    background: linear-gradient(90deg, #E74C3C 0%, #C0392B 100%) !important; 
}
body.howtot-theme .strength-weak .strength-fill { 
    background: linear-gradient(90deg, #F39C12 0%, #E67E22 100%) !important; 
}
body.howtot-theme .strength-moderate .strength-fill { 
    background: linear-gradient(90deg, #F1C40F 0%, #F39C12 100%) !important; 
}
body.howtot-theme .strength-strong .strength-fill { 
    background: linear-gradient(90deg, #27AE60 0%, #2ECC71 100%) !important; 
}

body.howtot-theme .strength-text {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #2C3E50 !important;
    margin-left: 8px !important;
}

body.howtot-theme .char-type {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #F8F9FA !important;
}

body.howtot-theme .char-type:last-child {
    border-bottom: none !important;
}

body.howtot-theme .char-type.missing {
    opacity: 0.5 !important;
}

body.howtot-theme .char-icon {
    font-size: 20px !important;
    width: 24px !important;
    text-align: center !important;
}

body.howtot-theme .char-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #2C3E50 !important;
}

/* QR Code Generator Specific */
body.howtot-theme .content-type-selector {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin: 24px 0 !important;
}

body.howtot-theme .content-type-option {
    cursor: pointer !important;
}

body.howtot-theme .content-type-option input[type="radio"] {
    display: none !important;
}

body.howtot-theme .option-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 32px 24px !important;
    background: #ffffff !important;
    border: 2px solid #E0E6ED !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

body.howtot-theme .content-type-option:hover .option-card {
    border-color: #4ECDC4 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
}

body.howtot-theme .content-type-option input:checked + .option-card {
    border-color: #2E7D7D !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    transform: translateY(-4px) !important;
}

body.howtot-theme .option-icon {
    font-size: 48px !important;
    margin-bottom: 16px !important;
}

body.howtot-theme .option-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

body.howtot-theme .option-desc {
    font-size: 14px !important;
    opacity: 0.8 !important;
    line-height: 1.4 !important;
}

/* Input Groups for Dynamic Display */
body.howtot-theme .input-group {
    margin-bottom: 20px !important;
}

body.howtot-theme .content-inputs .input-group {
    display: block !important;
}

body.howtot-theme .customization-grid,
body.howtot-theme .converter-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 24px !important;
}

/* QR Code Display */
body.howtot-theme .qr-display {
    margin: 32px 0 !important;
}

body.howtot-theme .qr-code-container {
    display: flex !important;
    gap: 32px !important;
    align-items: flex-start !important;
    margin: 32px 0 !important;
    background: #ffffff !important;
    padding: 32px !important;
    border-radius: 16px !important;
    border: 1px solid #E0E6ED !important;
}

body.howtot-theme .qr-code-placeholder {
    background: #ffffff !important;
    border: 2px solid #E0E6ED !important;
    border-radius: 12px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

body.howtot-theme .qr-pattern {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    background: 
        radial-gradient(circle at 20% 20%, #000 20%, transparent 20%),
        radial-gradient(circle at 80% 20%, #000 20%, transparent 20%),
        radial-gradient(circle at 20% 80%, #000 20%, transparent 20%),
        repeating-linear-gradient(45deg, #000 0px, #000 2px, transparent 2px, transparent 6px) !important;
    background-size: 60px 60px, 60px 60px, 60px 60px, 8px 8px !important;
    opacity: 0.1 !important;
}

body.howtot-theme .qr-corner {
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    border: 6px solid #000 !important;
    border-radius: 4px !important;
}

body.howtot-theme .qr-corner.top-left { top: 10px !important; left: 10px !important; }
body.howtot-theme .qr-corner.top-right { top: 10px !important; right: 10px !important; }
body.howtot-theme .qr-corner.bottom-left { bottom: 10px !important; left: 10px !important; }

body.howtot-theme .qr-corner::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 20px !important;
    height: 20px !important;
    background: #000 !important;
    border-radius: 2px !important;
}

body.howtot-theme .qr-center-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    z-index: 2 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    backdrop-filter: blur(4px) !important;
}

body.howtot-theme .qr-content-preview {
    font-size: 12px !important;
    color: #7F8C8D !important;
    margin-top: 8px !important;
    word-break: break-all !important;
    font-family: 'Monaco', 'Menlo', monospace !important;
}

/* Info Items and Metrics */
body.howtot-theme .qr-info,
body.howtot-theme .result-info {
    flex: 1 !important;
}

body.howtot-theme .info-item,
body.howtot-theme .metric-item,
body.howtot-theme .metrics-list .metric-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #F8F9FA !important;
}

body.howtot-theme .info-item:last-child,
body.howtot-theme .metric-item:last-child,
body.howtot-theme .metrics-list .metric-item:last-child {
    border-bottom: none !important;
}

body.howtot-theme .info-label,
body.howtot-theme .metric-label {
    font-weight: 600 !important;
    color: #2C3E50 !important;
    font-size: 14px !important;
}

body.howtot-theme .info-value,
body.howtot-theme .metric-value {
    color: #2E7D7D !important;
    font-family: 'Monaco', 'Menlo', monospace !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Lists and Tips */
body.howtot-theme .recommendations-list,
body.howtot-theme .security-tips,
body.howtot-theme .usage-tips,
body.howtot-theme .qr-usage-tips ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.howtot-theme .recommendations-list li,
body.howtot-theme .security-tips li,
body.howtot-theme .usage-tips li,
body.howtot-theme .qr-usage-tips li {
    padding: 12px 0 12px 32px !important;
    position: relative !important;
    border-bottom: 1px solid #F8F9FA !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    color: #2C3E50 !important;
}

body.howtot-theme .recommendations-list li:last-child,
body.howtot-theme .security-tips li:last-child,
body.howtot-theme .usage-tips li:last-child,
body.howtot-theme .qr-usage-tips li:last-child {
    border-bottom: none !important;
}

body.howtot-theme .recommendations-list li:before {
    content: "⚠️" !important;
    position: absolute !important;
    left: 0 !important;
    font-size: 16px !important;
}

body.howtot-theme .security-tips li:before,
body.howtot-theme .usage-tips li:before,
body.howtot-theme .qr-usage-tips li:before {
    content: "💡" !important;
    position: absolute !important;
    left: 0 !important;
    font-size: 16px !important;
}

body.howtot-theme .no-recommendations {
    text-align: center !important;
    padding: 32px !important;
    color: #27AE60 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    background: rgba(39, 174, 96, 0.1) !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

/* Field Notes and Helpers */
body.howtot-theme .field-note {
    display: block !important;
    font-size: 13px !important;
    color: #7F8C8D !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
    font-style: italic !important;
}

body.howtot-theme .download-note {
    background: linear-gradient(135deg, #FFF3CD 0%, #FCF4DD 100%) !important;
    color: #856404 !important;
    padding: 20px !important;
    border-radius: 12px !important;
    margin: 24px 0 !important;
    border-left: 4px solid #FFC107 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.howtot-theme .simulated-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
}

body.howtot-theme .qr-actions {
    text-align: center !important;
    margin: 32px 0 !important;
}

/* Character Types Display */
body.howtot-theme .character-types {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Mobile Responsive Design for Tools */
@media (max-width: 768px) {
    body.howtot-theme .tool-intro {
        padding: 32px 24px !important;
    }
    
    body.howtot-theme .intro-content h3 {
        font-size: 24px !important;
    }
    
    body.howtot-theme .intro-content p {
        font-size: 16px !important;
    }
    
    body.howtot-theme .intro-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    
    body.howtot-theme .intro-stats .stat .number {
        font-size: 24px !important;
    }
    
    body.howtot-theme .form-section {
        padding: 24px 20px !important;
    }
    
    body.howtot-theme .section-title {
        font-size: 20px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    body.howtot-theme .content-type-selector {
        grid-template-columns: 1fr !important;
    }
    
    body.howtot-theme .customization-grid,
    body.howtot-theme .converter-grid {
        grid-template-columns: 1fr !important;
    }
    
    body.howtot-theme .analysis-grid,
    body.howtot-theme .results-grid {
        grid-template-columns: 1fr !important;
    }
    
    body.howtot-theme .qr-code-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 24px !important;
    }
    
    body.howtot-theme .analysis-results,
    body.howtot-theme .qr-results,
    body.howtot-theme .calculation-results,
    body.howtot-theme .converter-results {
        padding: 32px 24px !important;
    }
    
    body.howtot-theme .simulated-actions {
        flex-direction: column !important;
    }
    
    body.howtot-theme .form-section .btn,
    body.howtot-theme .form-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ================================================
   TOOL PAGE LAYOUT FIXES
   ================================================ */

/* Tool Page Container Layout */
body.howtot-theme .single-app-container,
body.howtot-theme .app-page-container {
    display: flex !important;
    flex-direction: column !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    gap: 32px !important;
}

/* Main Tool Content Area */
body.howtot-theme .app-main-content {
    display: grid !important;
    grid-template-columns: 1fr 350px !important;
    gap: 48px !important;
    align-items: start !important;
}

/* Tool Interface Wrapper */
body.howtot-theme .tool-wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sidebar Styling for Tool Pages */
body.howtot-theme .app-sidebar {
    background: transparent !important;
    padding: 0 !important;
}

body.howtot-theme .sidebar-section {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 32px !important;
    margin-bottom: 32px !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .sidebar-section:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
    border-color: rgba(78, 205, 196, 0.2) !important;
}

/* Tool Stats Cards - Enhanced Integration */
body.howtot-theme .tool-stats-sidebar {
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .tool-stats-sidebar::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%) !important;
    animation: floating 6s ease-in-out infinite !important;
}

@keyframes floating {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    50% { transform: translate(-50%, -50%) rotate(180deg); }
}

body.howtot-theme .tool-stats-sidebar h3 {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .stat-card {
    text-align: center !important;
    padding: 20px 16px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .stat-card:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px) !important;
}

body.howtot-theme .stat-number {
    display: block !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}

body.howtot-theme .stat-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

/* Newsletter Signup Section */
body.howtot-theme .newsletter-section {
    background: linear-gradient(135deg, #4ECDC4 0%, #2E7D7D 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .newsletter-section::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    pointer-events: none !important;
}

body.howtot-theme .newsletter-section h3 {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .newsletter-section p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 24px 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .newsletter-form {
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .newsletter-form input[type="email"] {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    margin-bottom: 16px !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .newsletter-form input[type="email"]:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1) !important;
}

body.howtot-theme .newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.howtot-theme .newsletter-form button {
    width: 100% !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    color: #2E7D7D !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-bottom: 16px !important;
}

body.howtot-theme .newsletter-form button:hover {
    background: #f8f9fa !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

body.howtot-theme .newsletter-note {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-align: center !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Tool Categories Section */
body.howtot-theme .tool-categories {
    background: #ffffff !important;
}

body.howtot-theme .tool-categories h3 {
    color: #2C3E50 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #F8F9FA !important;
}

body.howtot-theme .categories-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.howtot-theme .category-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #F8F9FA !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: #2C3E50 !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .category-item:hover {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(46, 125, 125, 0.05) 100%) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
    transform: translateX(4px) !important;
    color: #2E7D7D !important;
}

body.howtot-theme .category-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.howtot-theme .category-icon {
    font-size: 18px !important;
    width: 24px !important;
    text-align: center !important;
}

body.howtot-theme .category-count {
    background: rgba(78, 205, 196, 0.15) !important;
    color: #2E7D7D !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-width: 32px !important;
    text-align: center !important;
}

body.howtot-theme .category-item:hover .category-count {
    background: #4ECDC4 !important;
    color: #ffffff !important;
}

/* Related Tools Section Enhancement */
body.howtot-theme .related-tools {
    background: #ffffff !important;
}

body.howtot-theme .related-tools h3 {
    color: #2C3E50 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #F8F9FA !important;
}

body.howtot-theme .related-tool-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px !important;
    background: #F8F9FA !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    color: #2C3E50 !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    margin-bottom: 16px !important;
}

body.howtot-theme .related-tool-item:hover {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(46, 125, 125, 0.05) 100%) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}

body.howtot-theme .related-tool-icon {
    font-size: 32px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(78, 205, 196, 0.15) !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
}

body.howtot-theme .related-tool-item:hover .related-tool-icon {
    background: #4ECDC4 !important;
    transform: scale(1.1) !important;
}

body.howtot-theme .related-tool-content h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    color: #2C3E50 !important;
}

body.howtot-theme .related-tool-item:hover h4 {
    color: #2E7D7D !important;
}

body.howtot-theme .related-tool-content p {
    font-size: 13px !important;
    color: #7F8C8D !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Mobile Responsive Improvements */
@media (max-width: 1024px) {
    body.howtot-theme .app-main-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    body.howtot-theme .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    body.howtot-theme .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    body.howtot-theme .stat-card {
        padding: 16px 12px !important;
    }
    
    body.howtot-theme .stat-number {
        font-size: 24px !important;
    }
    
    body.howtot-theme .sidebar-section {
        padding: 24px !important;
        margin-bottom: 24px !important;
    }
    
    body.howtot-theme .related-tool-item {
        padding: 16px !important;
    }
    
    body.howtot-theme .related-tool-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
    }
}

/* ================================================
   ACTUAL TEMPLATE STRUCTURE FIXES
   ================================================ */

/* Tool Page Container */
body.howtot-theme .tool-page-container {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Tool Layout - Main Grid */
body.howtot-theme .tool-layout {
    display: grid !important;
    grid-template-columns: 1fr 350px !important;
    gap: 48px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    align-items: start !important;
}

/* Tool Header Enhancement */
body.howtot-theme .tool-header {
    background: linear-gradient(135deg, #F8F9FA 0%, #ffffff 50%, #F1F8FF 100%) !important;
    border-radius: 20px !important;
    padding: 48px !important;
    margin-bottom: 32px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .tool-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
}

body.howtot-theme .tool-header-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
}

body.howtot-theme .tool-icon-header {
    font-size: 64px !important;
    flex-shrink: 0 !important;
    background: rgba(78, 205, 196, 0.1) !important;
    width: 96px !important;
    height: 96px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    border: 1px solid rgba(78, 205, 196, 0.2) !important;
}

body.howtot-theme .tool-title {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.2 !important;
}

body.howtot-theme .tool-description-header {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #7F8C8D !important;
    margin: 0 0 24px 0 !important;
}

/* Trust Signals Enhancement */
body.howtot-theme .trust-signals {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
}

body.howtot-theme .trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(78, 205, 196, 0.15) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .trust-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    background: #ffffff !important;
}

body.howtot-theme .trust-icon {
    font-size: 24px !important;
}

body.howtot-theme .trust-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
}

/* Tool Stats in Header */
body.howtot-theme .tool-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

body.howtot-theme .tool-stats .stat-item {
    text-align: center !important;
    padding: 24px 16px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .tool-stats .stat-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(46, 125, 125, 0.3) !important;
}

body.howtot-theme .tool-stats .stat-number {
    display: block !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}

body.howtot-theme .tool-stats .stat-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

/* Content Sections */
body.howtot-theme .content-section {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(224, 230, 237, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .content-section:hover {
    border-color: rgba(78, 205, 196, 0.3) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}

body.howtot-theme .content-section h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 24px 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #F8F9FA !important;
}

/* Tool Interface Section */
body.howtot-theme .tool-interface-section {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 32px !important;
    border: none !important;
    box-shadow: none !important;
}

body.howtot-theme .interface-container {
    background: transparent !important;
    padding: 0 !important;
}

/* Step-by-Step Guide */
body.howtot-theme .step-by-step-guide {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

body.howtot-theme .guide-step {
    display: flex !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #F8F9FA !important;
    border-radius: 16px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .guide-step:hover {
    border-color: rgba(78, 205, 196, 0.3) !important;
    background: rgba(78, 205, 196, 0.05) !important;
}

body.howtot-theme .step-number {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, #2E7D7D 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

body.howtot-theme .step-content h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 12px 0 !important;
}

/* Benefits Grid */
body.howtot-theme .benefits-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

body.howtot-theme .benefit-card {
    display: flex !important;
    gap: 16px !important;
    padding: 20px !important;
    background: #F8F9FA !important;
    border-radius: 12px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .benefit-card:hover {
    border-color: rgba(78, 205, 196, 0.3) !important;
    background: rgba(78, 205, 196, 0.05) !important;
    transform: translateY(-2px) !important;
}

body.howtot-theme .benefit-icon {
    font-size: 32px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Sidebar Enhancement */
body.howtot-theme .tool-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

body.howtot-theme .sidebar-widget {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 32px !important;
    border: 1px solid rgba(78, 205, 196, 0.1) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .sidebar-widget:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
    border-color: rgba(78, 205, 196, 0.2) !important;
}

body.howtot-theme .widget-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #F8F9FA !important;
}

body.howtot-theme .widget-icon {
    font-size: 24px !important;
}

/* Newsletter Widget Special Treatment */
body.howtot-theme .newsletter-widget {
    background: linear-gradient(135deg, #4ECDC4 0%, #2E7D7D 100%) !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
}

body.howtot-theme .newsletter-widget::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    pointer-events: none !important;
}

body.howtot-theme .newsletter-widget .widget-title,
body.howtot-theme .newsletter-widget h3 {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .newsletter-widget p {
    color: rgba(255, 255, 255, 0.9) !important;
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .newsletter-form {
    position: relative !important;
    z-index: 2 !important;
}

body.howtot-theme .newsletter-form input[type="email"] {
    width: 100% !important;
    padding: 16px 20px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    margin-bottom: 16px !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .newsletter-form input[type="email"]:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1) !important;
}

body.howtot-theme .newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.howtot-theme .newsletter-btn {
    width: 100% !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    color: #2E7D7D !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .newsletter-btn:hover {
    background: #f8f9fa !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* Quick Tools List */
body.howtot-theme .quick-tools-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.howtot-theme .quick-tool-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    background: #F8F9FA !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: #2C3E50 !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .quick-tool-item:hover {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(46, 125, 125, 0.05) 100%) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
    transform: translateX(4px) !important;
    color: #2E7D7D !important;
}

body.howtot-theme .quick-tool-icon {
    font-size: 24px !important;
    width: 32px !important;
    text-align: center !important;
}

body.howtot-theme .quick-tool-name {
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Categories in Sidebar */
body.howtot-theme .categories-widget .categories-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.howtot-theme .categories-widget .category-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #F8F9FA !important;
    border-radius: 12px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

body.howtot-theme .categories-widget .category-item:hover {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(46, 125, 125, 0.05) 100%) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
    transform: translateX(4px) !important;
}

body.howtot-theme .categories-widget .category-icon {
    font-size: 18px !important;
    margin-right: 12px !important;
}

body.howtot-theme .categories-widget .category-name {
    flex: 1 !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
}

body.howtot-theme .categories-widget .category-count {
    color: #7F8C8D !important;
    font-size: 12px !important;
}

/* Mobile Responsive for Tool Template */
@media (max-width: 1024px) {
    body.howtot-theme .tool-layout {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    body.howtot-theme .tool-header-content {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    body.howtot-theme .tool-title {
        font-size: 32px !important;
    }
    
    body.howtot-theme .tool-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    body.howtot-theme .trust-signals {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    body.howtot-theme .tool-header {
        padding: 32px 24px !important;
    }
    
    body.howtot-theme .tool-title {
        font-size: 28px !important;
    }
    
    body.howtot-theme .tool-stats {
        grid-template-columns: 1fr !important;
    }
    
    body.howtot-theme .trust-signals {
        grid-template-columns: 1fr !important;
    }
    
    body.howtot-theme .benefits-grid {
        grid-template-columns: 1fr !important;
    }
    
    body.howtot-theme .content-section {
        padding: 24px 20px !important;
    }
    
    body.howtot-theme .sidebar-widget {
        padding: 24px !important;
    }
    
    body.howtot-theme .guide-step {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}