/* Responsive Design */
@media (max-width: 768px) {
    .container {
        min-width: auto;
        padding: 15px;
    }
    
    .editor-section {
        grid-template-columns: 1fr;
        height: auto;
        gap: 15px;
    }
    
    .resize-bar {
        display: none;
    }
    
    .input-panel, .output-panel {
        height: 400px;
    }
    
    .controls-section {
        gap: 10px;
        padding: 12px;
    }
    
    .control-group {
        gap: 5px;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    .header-content {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .header-nav {
        align-self: stretch;
        justify-content: center;
    }
    
    .content-page {
        padding: 0 10px;
    }
    
    .content-section {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .sitemap-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .features-overview {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .quick-nav {
        flex-direction: column;
        gap: 10px;
    }
    
    .quick-nav-btn {
        justify-content: center;
    }
    
    .site-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .privacy-info {
        gap: 15px;
    }
    
    .privacy-point {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .tech-stack {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    .controls-section {
        flex-direction: column;
        gap: 8px;
    }
    
    .control-group {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-small {
        min-width: 50px;
        padding: 5px 8px;
        font-size: 11px;
    }
    
    .input-panel, .output-panel {
        height: 350px;
        padding: 10px;
    }
    
    header h1 {
        font-size: 1.5rem;
    }
    
    header p {
        font-size: 0.75rem;
    }
    
    .header-nav {
        gap: 8px;
    }
    
    .nav-link {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .nav-link i {
        font-size: 12px;
    }
    
    .content-section {
        padding: 15px;
    }
    
    .content-section h2 {
        font-size: 1.5rem;
    }
    
    .feature-card {
        padding: 20px;
    }
    
    .feature-icon {
        font-size: 2rem;
    }
    
    .sitemap-card {
        padding: 20px;
    }
    
    .feature-group {
        padding: 15px;
    }
    
    .quick-nav-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .privacy-point {
        padding: 15px;
    }
    
    .CodeMirror {
        min-height: 300px;
        max-height: 400px !important;
    }
}

@media (max-width: 320px) {
    .container {
        padding: 8px;
    }
    
    header {
        padding: 10px;
    }
    
    header h1 {
        font-size: 1.3rem;
    }
    
    .content-section {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .content-section h2 {
        font-size: 1.3rem;
    }
    
    .feature-card, .sitemap-card, .feature-group {
        padding: 15px;
    }
    
    .nav-link {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .btn-small {
        padding: 4px 6px;
        font-size: 10px;
        min-width: 45px;
    }
    
    .quick-nav-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Print Styles */
@media print {
    .header-nav,
    .controls-section,
    .floating-buttons,
    .quick-nav {
        display: none !important;
    }
    
    .container {
        min-width: auto;
        padding: 0;
    }
    
    .content-section {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
    
    .editor-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .resize-bar {
        display: none;
    }
    
    body {
        background: white;
    }
    
    header {
        background: #667eea !important;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}