/* 响应式断点变量 */
:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* 移动设备优先的响应式设计 */

/* 超小屏幕 (手机竖屏) */
@media (max-width: 639px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    .page-title {
        font-size: var(--font-size-2xl);
    }
    
    .timeline::before {
        left: 15px;
    }
    
    .timeline-item {
        padding-left: var(--spacing-xl);
    }
    
    .timeline-dot {
        left: 8px;
        width: 16px;
        height: 16px;
        border-width: 3px;
    }
    
    .product-card {
        margin-bottom: var(--spacing-lg);
    }
    
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .result-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-wrapper {
        height: 300px;
    }
    
    .stat-card {
        padding: var(--spacing-lg);
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
        font-size: var(--font-size-xl);
    }
    
    .stat-value {
        font-size: var(--font-size-2xl);
    }
    
    .steps {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .steps::before {
        display: none;
    }
    
    .notification {
        left: var(--spacing-md);
        right: var(--spacing-md);
        max-width: none;
    }
    
    .fab {
        bottom: var(--spacing-lg);
        right: var(--spacing-md);
        width: 48px;
        height: 48px;
        font-size: var(--font-size-lg);
    }
    
    /* 移动端导航隐藏 */
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    /* 表单调整 */
    .form-input,
    .btn {
        font-size: 16px; /* 防止iOS放大 */
    }
    
    /* 搜索区域调整 */
    .scan-area {
        padding: var(--spacing-lg);
    }
    
    .scan-icon {
        width: 60px;
        height: 60px;
        font-size: var(--font-size-2xl);
    }
}

/* 小屏幕 (手机横屏) */
@media (min-width: 640px) and (max-width: 767px) {
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .result-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mobile-only {
        display: none !important;
    }
}

/* 中等屏幕 (平板) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 0 var(--spacing-xl);
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .timeline::before {
        left: 25px;
    }
    
    .timeline-item {
        padding-left: var(--spacing-2xl);
    }
    
    .chart-wrapper {
        height: 350px;
    }
    
    .mobile-only {
        display: none !important;
    }
    
    /* 侧边栏样式 */
    .sidebar {
        width: 280px;
    }
    
    /* 内容区域调整 */
    .main-content {
        margin-left: 280px;
    }
}

/* 大屏幕 (桌面) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .container {
        max-width: 1024px;
    }
    
    .timeline::before {
        left: 30px;
    }
    
    .timeline-item {
        padding-left: 60px;
    }
    
    .chart-wrapper {
        height: 400px;
    }
    
    /* 两列布局 */
    .two-column {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: var(--spacing-2xl);
    }
}

/* 超大屏幕 (大桌面) */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
    
    .chart-wrapper {
        height: 450px;
    }
    
    /* 三列布局 */
    .three-column {
        display: grid;
        grid-template-columns: 280px 1fr 320px;
        gap: var(--spacing-2xl);
    }
}

/* 超超大屏幕 */
@media (min-width: 1536px) {
    .container {
        max-width: 1400px;
    }
    
    .chart-wrapper {
        height: 500px;
    }
}

/* 特殊情况处理 */

/* 横屏模式 */
@media (orientation: landscape) and (max-height: 500px) {
    .timeline-item {
        margin-bottom: var(--spacing-lg);
    }
    
    .stat-card {
        padding: var(--spacing-md);
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-lg);
    }
}

/* 打印样式 */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .no-print {
        display: none !important;
    }
    
    .page-break {
        page-break-before: always;
    }
    
    .timeline::before {
        background: black !important;
    }
    
    .timeline-dot {
        border-color: black !important;
    }
    
    .card {
        border: 1px solid black !important;
        break-inside: avoid;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-secondary: #000000;
        --bg-color: #ffffff;
    }
    
    .btn {
        border-width: 2px;
    }
    
    .card {
        border-width: 2px;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .timeline-item {
        opacity: 1;
        transform: none;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #f3f4f6;
        --text-secondary: #d1d5db;
        --text-muted: #9ca3af;
        --border-color: #374151;
        --bg-color: #111827;
        --card-bg: #1f2937;
    }
    
    .timeline::before {
        background: linear-gradient(to bottom, var(--primary-light), var(--secondary-color));
    }
    
    .scan-area {
        background: rgba(31, 41, 55, 0.5);
    }
    
    .result-item {
        background: rgba(31, 41, 55, 0.5);
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .product-card,
    .timeline-content,
    .stat-card {
        min-height: 44px; /* 最小触摸目标 */
    }
    
    .timeline-item:hover .timeline-dot,
    .timeline-item:hover .timeline-content,
    .product-card:hover,
    .stat-card:hover {
        transform: none; /* 禁用hover变换 */
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .timeline-dot {
        border-width: 2px; /* 更细的边框 */
    }
    
    .card {
        border-width: 0.5px;
    }
}

/* 可访问性增强 */
@media (max-width: 480px) {
    .btn {
        min-height: 48px; /* 更大的触摸目标 */
    }
    
    .form-input {
        min-height: 48px;
        font-size: 16px; /* 防止缩放 */
    }
}

/* 容器查询支持 */
@supports (container-type: inline-size) {
    .responsive-container {
        container-type: inline-size;
    }
    
    @container (max-width: 300px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
    }
    
    @container (min-width: 301px) and (max-width: 600px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    }
    
    @container (min-width: 601px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    }
}

/* 焦点可见性增强 */
@media (prefers-reduced-motion: no-preference) {
    .btn:focus-visible,
    .nav-link:focus-visible,
    .search-tab:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
}

/* 滚动条样式 */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--bg-color);
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: var(--radius-sm);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
    }
}