@media (max-width: 768px) {
    .header-content {
        padding: 8px 0;
        gap: var(--spacing-sm);
    }
    .logo {
        font-size: 1.5rem;
    }
    .logo img {
        max-width: 35px;
        max-height: 35px;
    }
    .theme-toggle {
        margin: 0;
    }
    .theme-toggle-label {
        font-size: 0.8rem;
    }
    .switch {
        width: 40px;
        height: 20px;
    }
    .slider:before {
        height: 14px;
        width: 14px;
    }
    input:checked + .slider:before {
        transform: translateX(20px);
    }
}

@media (max-width: 480px) {
    header {
        padding: var(--spacing-xs);
    }
    .header-content {
        padding: 4px 0;
    }
}

@media (min-width: 1440px) {
    html {
        font-size: 18px;
    }
    main {
        max-width: 1000px;
    }
}