:root {
    --bg-color: #fafcff;
    --bg-timebox-color: #f8f8f8;
    --bg-button: #0f9ecdeb;
    --bg-button-hover: #0874a6;
    --bg-footer-color: #eff5f9;
    --bg-header: linear-gradient(#0f2e51, #10506e);
    --box-shadow-header: none;
    --text-color: #333;
    --text-info-color: #66727f;
    --text-hover-color: #5b6167;
    --text-load-more-button-color: #eff5f9;
    --border-search-panel: #cccccc85;
    --box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    --box-catalog-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --bg-filter-btn-active: #78a75a;
    --bg-badge: #e53935;
}

.dark-theme {
    --bg-color: #222;
    --bg-timebox-color: #00000000;
    --bg-button: #085974ed;
    --bg-button-hover: #0b3a4f;
    --bg-footer-color: #2a2a2a73;
    --bg-header: linear-gradient(#141414, #222);
    --box-shadow-header: 0 0.1px;
    --text-color: #e0e0e0;
    --text-info-color: #66727f;
    --text-hover-color: #e0e0e0;
    --text-load-more-button-color: #e0e0e0;
    --border-search-panel: #cccccc38;
    --box-shadow: 0 0 3px rgba(251, 251, 251, 0.1);
    --box-catalog-shadow: 0 1px 3px rgba(251, 251, 251, 0.1);
    --bg-filter-btn-active: #78a75a;
    --bg-badge: #e53935;
}

#theme-toggle, #favorite-button {
    position: relative;
    right: 0;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: white;
    padding: 5px 10px;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

#theme-toggle:hover {
    opacity: 0.7;
}

@media (max-width: 480px) {
    #theme-toggle {
        font-size: 18px;
    }
}