/* =====================================================================
   超声医生派单系统 · 共享设计样式（品牌视觉精修）
   全局覆盖：导航渐变 / 主色令牌 / 页面背景 / 通用质感
   ===================================================================== */
:root {
  /* 品牌色（医疗感：深海蓝 → 湖蓝） */
  --brand-700: #1247b8;
  --brand-600: #1663d8;
  --brand-500: #1989fa;
  --brand-400: #46a9ff;
  --brand-grad: linear-gradient(135deg, #1250c8 0%, #1989fa 62%, #2fa6ff 100%);
  --brand-grad-soft: linear-gradient(135deg, #e8f1ff 0%, #f4f9ff 100%);
  --brand-ink: #0b2a63;
  /* 功能色 */
  --ok: #07c160;
  --warn: #ff9800;
  --danger: #ee0a24;
  --text-1: #1f2329;
  --text-2: #5a6472;
  --text-3: #9aa3b0;
  --line: #eef1f5;
  --page-bg: #eef2f8;
  /* Vant 主题令牌 */
  --van-primary-color: var(--brand-500);
  --van-success-color: var(--ok);
  --van-danger-color: var(--danger);
  --van-warning-color: var(--warn);
  --van-radius-md: 10px;
  --van-radius-lg: 14px;
}

/* 页面底色：细腻的浅蓝灰，避免刺眼纯白灰 */
body { background: var(--page-bg); }
#app { background: var(--page-bg); }

/* ---- 顶部导航：品牌深蓝渐变 + 白字 ---- */
.van-nav-bar {
  background: var(--brand-grad);
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-text-color: #fff;
  --van-nav-bar-title-text-color: #fff;
}
.van-nav-bar .van-nav-bar__title { font-weight: 650; letter-spacing: .3px; }
.van-nav-bar .van-nav-bar__arrow,
.van-nav-bar .van-nav-bar__right,
.van-nav-bar .van-nav-bar__right div,
.van-nav-bar .van-nav-bar__text { color: #fff !important; }
.van-nav-bar .van-nav-bar__right { opacity: .95; }

/* ---- 底部导航：毛玻璃白条 + 品牌激活色 ---- */
/* 桌面宽屏下与 #app 内容区同宽并水平居中（移动端 left/right:0 自然铺满） */
.van-tabbar {
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -2px 14px rgba(20, 50, 100, .08);
  max-width: 480px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.van-tabbar-item--active { color: var(--brand-500); }

/* ---- 通用卡片质感 ---- */
.van-cell-group, 
.van-tabs, 
.vant-card { border-radius: 12px; }

/* 状态文字工具 */
.st-text { font-size: 12px; color: var(--text-2); }

/* 迷你徽章 pill */
.pill-mini { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }

/* 轻盈水平条形（用于迷你图表/占比） */
.bar-wrap { display: flex; align-items: center; gap: 8px; }
.bar-wrap .bar { flex: 1; height: 8px; border-radius: 5px; background: #eef1f6; overflow: hidden; }
.bar-wrap .bar i { display: block; height: 100%; border-radius: 5px; background: var(--brand-grad); }
.bar-wrap .val { flex: none; width: 52px; text-align: right; font-size: 11px; color: var(--text-2); }

/* ---- 通用按钮族（白底/胶囊/危险） ---- */
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 14px; background: #fff; color: #1677ff; border: 1px solid #d6e6ff; border-radius: 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-ghost:active { background: #eef5ff; }
.btn-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 14px; font-size: 12px; cursor: pointer; }
.btn-pill:active { background: rgba(255, 255, 255, .3); }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; background: linear-gradient(135deg, #ee0a24, #ff5a4a); color: #fff; border: none; border-radius: 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn-danger:active { opacity: .92; }