/* ===== 响应式布局 ===== */

/* 平板横屏 / 小桌面 */
@media (max-width: 1100px) {
  .generator-panel {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page { padding: 24px 28px; }
}

/* 平板竖屏 */
@media (max-width: 900px) {
  .tools-grid { grid-template-columns: 1fr; }
  .card-container { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .nav { width: 210px; min-width: 210px; }
  .page { padding: 22px; }
}

/* 手机横屏 / 大手机 */
@media (max-width: 700px) {
  .app { flex-direction: column; }
  .menu-toggle { display: block; }

  .nav {
    position: fixed;
    left: -270px;
    top: 0;
    height: 100vh;
    width: 260px;
    min-width: 260px;
    transition: left var(--transition);
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--border);
  }
  .nav.open { left: 0; }

  .nav-backdrop.open { display: block; }

  .page { padding: 16px; padding-top: 56px; }

  .top { flex-direction: column; align-items: stretch; }

  .card-container { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }

  .contrast-inputs { flex-direction: column; }
  .contrast-result { flex-direction: column; align-items: flex-start; }

  .gen-preview-colors { min-height: 170px; flex-wrap: wrap; }
  .gen-preview-colors .gen-swatch { min-width: 80px; min-height: 100px; }

  .theory-grid { grid-template-columns: 1fr 1fr 1fr; }
  .gen-actions { flex-direction: column; }

  .modal { padding: 20px; max-width: 95vw; }

  /* 移动端减少玻璃模糊以提升性能 */
  .card, .tool-card, .gen-controls, .gen-preview, .modal {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* 小手机 */
@media (max-width: 420px) {
  .page { padding: 12px; padding-top: 52px; }

  .card-container { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-colors { height: 80px; }
  .card-colors .swatch { font-size: 9px; padding: 4px; }
  .card-info { padding: 10px 10px 4px; }
  .card-title { font-size: 13px; }
  .card-operate { padding: 0 10px 10px; flex-direction: column; gap: 4px; }

  .filters { gap: 5px; }
  .filters button { padding: 5px 12px; font-size: 11px; }

  .gen-controls { padding: 16px; gap: 14px; }
  .gen-preview-colors { min-height: 140px; }

  .tool-card { padding: 16px; }
  .tool-card h3 { font-size: 15px; }

  .toast { right: 12px; bottom: 12px; left: 12px; text-align: center; }

  h1 { font-size: 22px; }

  /* 小屏进一步降低玻璃模糊 */
  .card, .tool-card, .gen-controls, .gen-preview, .modal {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}