/* 响应式设计 */
@media (max-width: 768px) {
    .controls {
        flex-direction: column;
    }
    
    .buttons {
        width: 100%;
    }
    
    button {
        flex: 1;
    }
    
    iframe {
        height: 300px;
    }
    
    .table-container {
        max-height: 400px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    th, td {
        padding: 12px 8px;
        font-size: 14px;
    }
    
    .smart-nav {
        top: auto;
        bottom: 0;
        transform: none;
        flex-direction: row;
        width: 100%;
        height: 50px;
        border-radius: 15px 15px 0 0;
        padding: 5px;
        opacity: 0.9;
    }
    
    .smart-nav:hover {
        height: auto;
        width: 100%;
        transform: none;
        padding: 10px;
    }
    
    .nav-link {
        flex-direction: column;
        font-size: 0.7rem;
        padding: 5px;
        gap: 5px;
    }
    
    .nav-link i {
        font-size: 1.1rem;
    }
    
    .nav-text {
        display: none;
    }
    
    .smart-nav:hover .nav-text {
        display: block;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 15px;
    }
    
    iframe {
        height: 250px;
    }
    
    .table-container {
        max-height: 350px;
    }
    
    button {
        padding: 0 15px;
        font-size: 14px;
    }
    
    .result-card {
        width: 90%;
        padding: 20px;
    }
}