@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    
    .header h1 {
        font-size: 1.3rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .radio-button {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
    
    .radio-button span {
        display: none;
    }
    
    .radio-button svg {
        width: 24px;
        height: 24px;
    }
    
    .controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .reset-button {
        width: 100%;
        justify-content: center;
    }
    
    .article-body-wrapper {
        flex-direction: column;
    }
    
    .article-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .article-title {
        font-size: 1rem;
    }
    
    .expand-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 0.75rem;
    }
    
    .main-content {
        padding: 0.75rem;
    }
    
    .news-article {
        border-radius: 8px;
    }
    
    .article-header {
        padding: 0.75rem;
    }
    
    .article-content {
        padding: 0 0.75rem 0.75rem;
    }
    
    .article-summary {
        font-size: 0.95rem;
    }
}

@media (hover: none) {
    .news-article:hover {
        transform: none;
    }
    
    .radio-button:hover,
    .reset-button:hover,
    .expand-button:hover {
        transform: none;
    }
    
    .radio-button:active {
        transform: scale(0.95);
    }
    
    .reset-button:active {
        transform: scale(0.95);
    }
    
    .expand-button:active {
        transform: scale(0.95);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --light-bg: #121212;
        --text-primary: #e0e0e0;
        --text-secondary: #9e9e9e;
        --border-color: #424242;
    }
    
    body {
        background-color: var(--light-bg);
    }
    
    .news-article {
        background: #1e1e1e;
    }
    
    .article-title {
        color: var(--light-teal);
    }
    
    .full-article-content h2,
    .full-article-content h3 {
        color: var(--light-teal);
    }
}