/* ====================================================================
   FireGuard 多端响应式样式
   断点：手机 ≤600 / 平板 601-1024 / 桌面 ≥1025 / 大屏 ≥1440
   含：安全区适配、横屏、触控放大、动效降级
   ==================================================================== */

/* ============ 手机 ≤600px ============ */
@media (max-width: 600px) {
  .login-shell { flex-direction: column; border-radius: 20px; }
  .login-hero { padding: 28px 24px 16px; text-align: center; }
  .hero-logo { font-size: 44px; }
  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 14px; margin-bottom: 8px; }
  .hero-features { display: none; }
  .hero-tip { display: none; }
  .login-card { padding: 20px 22px 28px; }

  /* 顶部栏 */
  .topbar { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0)); }
  .brand-name { font-size: 16px; }
  .model-pill { max-width: 130px; font-size: 11px; }
  #logout-btn { padding: 8px 12px; font-size: 12px; }

  /* 桌面标签页隐藏，改用底部导航 */
  #desktop-tabs { display: none; }
  .bottom-nav { display: flex; }

  /* 工作区单列 */
  .workspace { flex-direction: column; gap: 12px; padding: 12px 12px calc(70px + env(safe-area-inset-bottom, 0)); }
  .canvas-holder { min-height: 300px; }
  #main-canvas { max-height: 55vh; }

  /* 右侧面板在移动端隐藏，内容移入抽屉 */
  .panel { display: none; }

  /* 工具条触控放大 */
  .toolbar { gap: 8px; }
  .btn-primary, .btn-secondary, .btn-ghost { padding: 12px 16px; font-size: 14px; }

  /* 快捷键提示在移动端隐藏 */
  .hotkey-hint { display: none; }
}

/* ============ 平板 601-1024px ============ */
@media (min-width: 601px) and (max-width: 1024px) {
  .workspace { gap: 14px; padding: 16px 18px; }
  .panel { width: 260px; }
  .canvas-holder { min-height: 420px; }
  .topbar { padding: 12px 20px; }
  .tabs { padding: 10px 20px 0; }
  .btn-primary, .btn-secondary, .btn-ghost { padding: 12px 18px; }
  .stat-grid { gap: 8px; }
  .stat { padding: 10px; }
  .stat-value { font-size: 20px; }
}

/* ============ 桌面 ≥1025px（现有默认样式已覆盖） ============ */
@media (min-width: 1025px) {
  .workspace { max-width: 1400px; }
}

/* ============ 大屏 ≥1440px ============ */
@media (min-width: 1440px) {
  .workspace { max-width: 1600px; }
  .panel { width: 360px; }
  #main-canvas { max-height: 78vh; }
  .canvas-holder { min-height: 560px; }
}

/* ============ 横屏适配（移动端） ============ */
@media (max-width: 900px) and (orientation: landscape) {
  .canvas-holder { min-height: 60vh; }
  #main-canvas { max-height: 60vh; }
  .workspace { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
}

/* ============ 触控设备：控件放大 ============ */
@media (pointer: coarse) {
  .btn-primary, .btn-secondary, .btn-ghost,
  .auth-tab, .bn-item, .link-btn, .pw-toggle,
  .hotkey-toggle { min-height: 44px; }
  .field input { font-size: 16px; } /* 防 iOS 自动缩放 */
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
  input[type="range"] { height: 8px; }
  .tab { padding: 14px 18px; }
}

/* ============ 动效降级 ============ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .drawer { transition: none; }
  .alert-banner { animation: none; }
  .btn-primary:hover { transform: none; }
}