/* 响应式设计 - 赛博朋克模板 */

/* 大屏幕 (1400px+) */
@media (min-width: 1400px) {
    .cyberpunk-container {
        max-width: 1600px;
        margin: 0 auto;
    }
    
    .main-title {
        font-size: 4rem;
    }
    
    .content-grid {
        grid-template-columns: 300px 1fr 300px;
        gap: 3rem;
    }
}

/* 中等屏幕 (1024px - 1399px) */
@media (max-width: 1399px) {
    .cyber-main {
        padding: 1.5rem;
    }
    
    .content-grid {
        grid-template-columns: 220px 1fr 220px;
        gap: 1.5rem;
    }
    
    .main-title {
        font-size: 2.5rem;
    }
}

/* 平板屏幕 (768px - 1023px) */
@media (max-width: 1023px) {
    .cyber-header {
        padding: 1rem;
    }
    
    .header-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    
    .status-section {
        justify-content: center;
    }
    
    .cyber-main {
        padding: 1rem;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .side-panel {
        position: static;
        order: 2;
    }
    
    .side-panel.right {
        order: 3;
    }
    
    .main-content {
        order: 1;
    }
    
    .main-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    
    .subtitle {
        font-size: 1rem;
        letter-spacing: 1px;
    }
    
    .function-panels {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .auth-card {
        padding: 1.5rem;
    }
    
    .card-title {
        font-size: 1.2rem;
    }
}

/* 手机屏幕 (480px - 767px) */
@media (max-width: 767px) {
    .cyber-header {
        padding: 0.8rem;
    }
    
    .cyber-logo .logo-text {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    
    .status-indicator {
        padding: 0.3rem 0.8rem;
    }
    
    .status-text {
        font-size: 0.7rem;
    }
    
    .cyber-main {
        padding: 0.8rem;
    }
    
    .content-grid {
        gap: 1.5rem;
    }
    
    .main-title {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }
    
    .subtitle {
        font-size: 0.9rem;
    }
    
    .auth-card {
        padding: 1rem;
    }
    
    .card-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .cyber-input {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    .cyber-button {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .function-panels {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .function-panel {
        padding: 1.5rem;
    }
    
    .panel-icon {
        font-size: 2.5rem;
    }
    
    .panel-title {
        font-size: 1rem;
    }
    
    .panel-desc {
        font-size: 0.8rem;
    }
    
    .side-panel {
        padding: 1rem;
    }
    
    .info-block {
        padding: 0.8rem;
    }
    
    .info-value {
        font-size: 1rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* 小屏手机 (320px - 479px) */
@media (max-width: 479px) {
    .cyber-header {
        padding: 0.5rem;
    }
    
    .cyber-logo .logo-text {
        font-size: 1.2rem;
    }
    
    .cyber-main {
        padding: 0.5rem;
    }
    
    .main-title {
        font-size: 1.5rem;
    }
    
    .subtitle {
        font-size: 0.8rem;
    }
    
    .auth-card {
        padding: 0.8rem;
    }
    
    .card-title {
        font-size: 0.9rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .title-icon {
        font-size: 1.5rem;
    }
    
    .cyber-input {
        padding: 0.6rem;
        font-size: 0.8rem;
    }
    
    .cyber-button {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }
    
    .function-panel {
        padding: 1rem;
    }
    
    .panel-icon {
        font-size: 2rem;
    }
    
    .panel-title {
        font-size: 0.9rem;
    }
    
    .panel-desc {
        font-size: 0.7rem;
    }
    
    .side-panel {
        padding: 0.8rem;
    }
    
    .panel-header h3 {
        font-size: 0.8rem;
    }
    
    .info-block {
        padding: 0.6rem;
    }
    
    .info-label {
        font-size: 0.6rem;
    }
    
    .info-value {
        font-size: 0.9rem;
    }
    
    .log-entry {
        padding: 0.3rem;
        font-size: 0.7rem;
    }
    
    .log-time {
        font-size: 0.6rem;
    }
}

/* 横屏模式优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .cyber-header {
        padding: 0.5rem 1rem;
    }
    
    .cyber-main {
        padding: 1rem;
    }
    
    .main-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .content-header {
        margin-bottom: 1rem;
    }
    
    .auth-card {
        padding: 1rem;
    }
    
    .function-panels {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .function-panel {
        padding: 1rem;
    }
    
    .panel-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .side-panel {
        padding: 1rem;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .cyber-input,
    .cyber-button,
    .auth-card,
    .function-panel,
    .side-panel {
        border-width: 0.5px;
    }
    
    .scan-lines {
        background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(0, 255, 255, 0.03) 1px,
            rgba(0, 255, 255, 0.03) 2px
        );
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .cyber-button {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    .cyber-input {
        padding: 1rem;
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    .function-panel {
        padding: 1.5rem;
    }
    
    .function-panel:hover {
        transform: none;
    }
    
    .function-panel:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .cyber-button:hover {
        transform: none;
    }
    
    .cyber-button:active {
        transform: scale(0.98);
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    .scan-lines {
        animation: none;
    }
    
    .glitch,
    .glitch::before,
    .glitch::after {
        animation: none;
    }
    
    .status-dot {
        animation: none;
        opacity: 1;
    }
    
    .auth-card::before {
        animation: none;
    }
    
    .cyber-grid {
        animation: none;
    }
    
    #matrix-rain {
        display: none;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-bg: #000000;
        --secondary-bg: #111111;
        --accent-bg: #222222;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    :root {
        --neon-color: #ffffff;
        --text-primary: #ffffff;
        --text-secondary: #ffffff;
        --border-color: #ffffff;
    }
    
    .cyber-input {
        border-width: 2px;
    }
    
    .auth-card,
    .function-panel,
    .side-panel {
        border-width: 2px;
    }
}

/* 打印样式 */
@media print {
    .scan-lines,
    #matrix-rain,
    .cyber-grid {
        display: none;
    }
    
    .cyberpunk-container {
        background: white;
        color: black;
    }
    
    .cyber-header,
    .auth-card,
    .function-panel,
    .side-panel {
        background: white;
        border: 1px solid black;
        box-shadow: none;
    }
    
    .main-title,
    .card-title,
    .panel-title {
        color: black;
        text-shadow: none;
    }
}