/* =====================================================
   手机端精致化升级（全局，仅移动端生效）
   由 server-prod.js 注入 /mobile-beauty.css 托管
   桌面端（>768px）完全不受影响
   ===================================================== */

@media (max-width: 768px) {

  /* ---- 顶部头部：渐变 + 柔和阴影 ---- */
  .mobile-header {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #43A047 100%) !important;
    box-shadow: 0 4px 18px rgba(27, 94, 32, 0.25);
  }

  /* ---- 底部导航：白色毛玻璃浮层 ---- */
  .mobile-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.09);
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-nav-item {
    color: #8492a6;
  }
  .mobile-nav-item:hover,
  .mobile-nav-item.active {
    color: #1B5E20;
    background: rgba(46, 125, 50, 0.10);
    box-shadow: none;
  }
  .mobile-nav-item.active .mobile-nav-icon {
    transform: translateY(-2px) scale(1.15);
  }
  .mobile-nav-icon {
    font-size: 1.3rem;
  }

  /* ---- 主内容卡片质感 ---- */
  .card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 60, 25, 0.06);
  }

  /* ---- 表格横向滚动保护，防止破版溢出 ---- */
  .table-wrapper, .table-container, .data-table-wrapper, .el-table, .table-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 弹窗：底部抽屉式（更符合手机操作习惯） ---- */
  .dialog-overlay {
    align-items: flex-end;
  }
  .dialog-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    animation: mobileDialogUp 0.28s ease-out;
  }
  @keyframes mobileDialogUp {
    from { transform: translateY(60%); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* ---- 按钮与输入框圆角更柔和 ---- */
  .btn {
    border-radius: 10px;
  }
  input, select, textarea {
    border-radius: 10px;
  }
}