/**
 * 移动端优化样式
 * 适用于所有页面的响应式设计
 */

/* 基础响应式 */
@media (max-width: 768px) {
    /* 容器优化 */
    .container {
        padding: 0 15px;
        margin: 15px auto;
    }
    
    /* 页头优化 */
    .header {
        padding: 12px 15px;
    }
    
    .logo {
        font-size: 18px;
    }
    
    .page-header {
        padding: 20px;
    }
    
    .page-header h1 {
        font-size: 22px;
    }
    
    .page-header p {
        font-size: 13px;
    }
    
    /* 区块优化 */
    .section {
        padding: 20px;
        margin-bottom: 15px;
    }
    
    .section-title {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    /* 统计卡片优化 */
    .stats, .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-label {
        font-size: 12px;
    }
    
    .stat-value {
        font-size: 24px;
    }
    
    /* 功能卡片优化 */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .feature-card {
        padding: 20px;
    }
    
    .feature-icon {
        font-size: 36px;
    }
    
    .feature-name {
        font-size: 16px;
    }
    
    .feature-desc {
        font-size: 12px;
    }
    
    /* 表单优化 */
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-label {
        font-size: 13px;
    }
    
    .form-input, .form-textarea, .form-select {
        padding: 10px;
        font-size: 14px;
    }
    
    .form-textarea {
        min-height: 100px;
    }
    
    /* 按钮优化 */
    .btn {
        padding: 10px 20px;
        font-size: 14px;
        width: 100%;
    }
    
    .actions {
        flex-direction: column;
    }
    
    .actions .btn {
        width: 100%;
    }
    
    /* 历史记录卡片优化 */
    .history-card {
        padding: 15px;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .card-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .card-title {
        font-size: 16px;
    }
    
    .card-content {
        font-size: 14px;
        max-height: 80px;
    }
    
    .card-meta {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .card-time {
        font-size: 12px;
        flex-direction: column;
        gap: 5px;
    }
    
    /* 筛选器优化 */
    .filters {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .filter-select {
        width: 100%;
    }
    
    /* 分页优化 */
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .page-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    /* 图表优化 */
    .bar-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .bar-label {
        min-width: auto;
        font-size: 13px;
    }
    
    .bar-track {
        height: 28px;
    }
    
    .bar-value {
        font-size: 11px;
    }
    
    /* 对比视图优化 */
    .comparison-view {
        flex-direction: column;
    }
    
    .original-content, .rewritten-content {
        width: 100%;
    }
    
    /* AI参数面板优化 */
    .ai-params-panel {
        width: 95%;
        max-width: none;
    }
    
    .params-header {
        padding: 16px;
    }
    
    .params-header h3 {
        font-size: 18px;
    }
    
    .params-body {
        padding: 16px;
        max-height: 70vh;
    }
    
    .param-group {
        margin-bottom: 24px;
    }
    
    .param-label {
        font-size: 14px;
    }
    
    .param-desc {
        font-size: 12px;
        padding: 10px;
    }
    
    /* 批量创作优化 */
    .url-count {
        font-size: 12px;
    }
    
    .result-item {
        padding: 15px;
    }
    
    .result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .result-title {
        font-size: 15px;
    }
    
    .result-content {
        font-size: 13px;
        max-height: 80px;
    }
    
    .result-actions {
        flex-direction: column;
    }
    
    .result-actions .btn {
        width: 100%;
    }
    
    /* Toast优化 */
    .toast {
        left: 15px;
        right: 15px;
        top: 15px;
        padding: 12px 15px;
        font-size: 14px;
    }
    
    /* 模态框优化 */
    .modal, .overlay {
        padding: 15px;
    }
    
    .modal-content {
        width: 100%;
        max-width: none;
        padding: 20px;
    }
    
    .modal-title {
        font-size: 18px;
    }
    
    /* 表格优化 */
    table {
        font-size: 13px;
    }
    
    table th, table td {
        padding: 8px;
    }
    
    /* 隐藏不必要的元素 */
    .hide-mobile {
        display: none !important;
    }
}

/* 小屏幕手机 */
@media (max-width: 480px) {
    .header {
        padding: 10px 12px;
    }
    
    .logo {
        font-size: 16px;
    }
    
    .page-header {
        padding: 15px;
    }
    
    .page-header h1 {
        font-size: 20px;
    }
    
    .section {
        padding: 15px;
    }
    
    .stat-value {
        font-size: 20px;
    }
    
    .feature-icon {
        font-size: 32px;
    }
    
    .stats, .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
    /* 增大可点击区域 */
    .btn, .icon-btn, .page-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 移除悬停效果 */
    .feature-card:hover {
        transform: none;
    }
    
    .material-card:hover {
        transform: none;
    }
    
    .history-card:hover {
        transform: none;
    }
    
    /* 优化触摸反馈 */
    .btn:active {
        opacity: 0.7;
    }
    
    .feature-card:active {
        background: #f5f5f5;
    }
}

/* 横屏优化 */
@media (max-width: 768px) and (orientation: landscape) {
    .page-header {
        padding: 15px 20px;
    }
    
    .page-header h1 {
        font-size: 20px;
    }
    
    .section {
        padding: 15px 20px;
    }
    
    .stats, .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 打印优化 */
@media print {
    .header, .back-btn, .btn, .actions, .toast {
        display: none !important;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    
    .section {
        box-shadow: none;
        border: 1px solid #e0e0e0;
        page-break-inside: avoid;
    }
}

/* 辅助类 */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
}

/* 改进的滚动条（移动端隐藏） */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}