/* ============================================================
 * 手机版统一门户组件（首页 / 资讯 / 联系 / 我的卡片）
 * 三端共用（官网 /site、客户端 /web、员工端 /staff）
 * 主题：浅绿科技动漫风（薄荷绿→青蓝渐变、发光、饱满圆角）
 * 类名统一 ph- 前缀，颜色变量带兜底值，不依赖各端 app.css
 * ============================================================ */
.ph-root {
  --ph-brand-700: var(--brand-700, #0f766e);
  --ph-brand-600: var(--brand-600, #0d9488);
  --ph-brand-500: var(--brand-500, #10b981);
  --ph-brand-400: var(--brand-400, #34d399);
  --ph-brand-100: var(--brand-100, #d3f7e8);
  --ph-brand-50:  var(--brand-50,  #effcf7);
  --ph-line:      var(--line, #d9efe6);
  --ph-text-900:  var(--text-900, #123b33);
  --ph-text-700:  var(--text-700, #2f5b50);
  --ph-text-500:  var(--text-500, #47685e);
  --ph-text-400:  var(--text-400, #557369);
  --ph-paper:     #ffffff;
  --ph-grad:      linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
  --ph-grad-soft: linear-gradient(150deg, #d6faec 0%, #cffafe 100%);
  --ph-r: 18px;
  --ph-shadow: 0 8px 24px rgba(13, 148, 136, .12);
  display: flex; flex-direction: column; gap: 14px;
}
.ph-card {
  background: var(--ph-paper); border-radius: var(--ph-r);
  border: 1px solid rgba(52, 211, 153, .18); box-shadow: var(--ph-shadow);
  padding: 14px;
}
.ph-sec-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--ph-text-900);
}
.ph-sec-title::before {
  content: ""; width: 5px; height: 15px; border-radius: 3px; background: var(--ph-grad);
}
.ph-sec-title .ph-more {
  margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ph-brand-600);
}
.ph-empty { padding: 22px 10px; text-align: center; color: var(--ph-text-400); font-size: 14px; }

/* ---------- 幻灯片 ---------- */
.ph-slides { position: relative; overflow: hidden; border-radius: var(--ph-r); height: 168px; background: var(--ph-grad-soft); }
.ph-slide-track { display: flex; height: 100%; transition: transform .5s ease; }
.ph-slide { position: relative; flex: 0 0 100%; height: 100%; }
.ph-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-slide .ph-slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 10px;
  color: #fff; font-size: 14px; font-weight: 600;
  background: linear-gradient(transparent, rgba(6, 46, 40, .62));
}
.ph-slide-dots {
  position: absolute; right: 10px; bottom: 8px; display: flex; gap: 5px;
}
.ph-slide-dots i {
  width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .55);
  transition: width .3s, background .3s;
}
.ph-slide-dots i.active { width: 16px; background: #fff; }

/* ---------- 通知公告（单条滚动） ---------- */
.ph-notice {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  background: var(--ph-paper); border-radius: 14px;
  border: 1px solid rgba(52, 211, 153, .18); box-shadow: var(--ph-shadow);
}
.ph-notice-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
  background: var(--ph-grad-soft); color: var(--ph-brand-700);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.ph-notice-view { flex: 1; overflow: hidden; height: 22px; position: relative; }
.ph-notice-item {
  position: absolute; left: 0; right: 0; line-height: 22px;
  font-size: 14px; color: var(--ph-text-700); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: opacity .45s, transform .45s;
}
.ph-notice-item.ph-out { opacity: 0; transform: translateY(-100%); }
.ph-notice-item.ph-in { opacity: 0; transform: translateY(100%); transition: none; }
.ph-notice-date { flex: 0 0 auto; font-size: 11px; color: var(--ph-text-400); }

/* ---------- 资讯（首页 2 条 / 资讯页列表） ---------- */
.ph-news-item {
  display: flex; gap: 11px; padding: 11px 4px; cursor: pointer;
}
.ph-news-item + .ph-news-item { border-top: 1px dashed var(--ph-line); }
.ph-news-cover {
  flex: 0 0 84px; height: 60px; border-radius: 12px; overflow: hidden;
  background: var(--ph-grad-soft); color: var(--ph-brand-700);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.ph-news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.ph-news-title {
  font-size: 14px; font-weight: 600; color: var(--ph-text-900); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-news-meta { font-size: 11px; color: var(--ph-text-400); display: flex; gap: 8px; align-items: center; }
.ph-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  background: var(--ph-brand-50); color: var(--ph-brand-700); border: 1px solid var(--ph-brand-100);
}
.ph-tag.announce { background: #fff1e2; color: #ea6a12; border-color: #ffd9b8; }
.ph-tag.news { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }

/* 资讯分类药丸（无下拉框，横向滑动） */
.ph-cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px; }
.ph-cat {
  flex: 0 0 auto; padding: 7px 16px; border-radius: 999px; font-size: 14px;
  background: var(--ph-paper); color: var(--ph-text-500);
  border: 1px solid var(--ph-line); cursor: pointer;
}
.ph-cat.active {
  background: var(--ph-grad); color: var(--ph-text-900); font-weight: 600; border-color: transparent;
  box-shadow: 0 6px 14px rgba(52, 211, 153, .35);
}

/* 资讯详情 */
.ph-detail h1 { font-size: 20px; line-height: 1.5; color: var(--ph-text-900); }
.ph-detail .ph-detail-meta { margin: 10px 0 14px; font-size: 12px; color: var(--ph-text-400); }
.ph-detail .ph-detail-content { font-size: 14px; line-height: 1.9; color: var(--ph-text-700); white-space: pre-wrap; word-break: break-word; }
.ph-detail img.ph-detail-cover { width: 100%; border-radius: 14px; margin-bottom: 12px; }

/* ---------- 商品（一排 2 个） ---------- */
.ph-goods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ph-goods-item {
  background: var(--ph-paper); border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(52, 211, 153, .18); box-shadow: var(--ph-shadow);
}
.ph-goods-item:active { transform: scale(.97); }
.ph-goods-thumb {
  height: 92px; background: var(--ph-grad-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--ph-brand-700); font-size: 26px; font-weight: 700;
  overflow: hidden;
}
.ph-goods-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ph-goods-info { padding: 9px 10px 11px; }
.ph-goods-name {
  font-size: 14px; font-weight: 600; color: var(--ph-text-900); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-goods-sub { margin-top: 3px; font-size: 11px; color: var(--ph-text-400); }
.ph-goods-price { margin-top: 6px; font-size: 16px; font-weight: 800; color: #ea6a12; }
.ph-goods-price small { font-size: 11px; font-weight: 500; color: var(--ph-text-400); }

/* ---------- 联系 ---------- */
.ph-contact-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; }
.ph-contact-row + .ph-contact-row { border-top: 1px dashed var(--ph-line); }
.ph-contact-ico {
  flex: 0 0 38px; height: 38px; border-radius: 13px; background: var(--ph-grad-soft);
  color: var(--ph-brand-700); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.ph-contact-label { font-size: 11px; color: var(--ph-text-400); }
.ph-contact-value { font-size: 14px; color: var(--ph-text-900); word-break: break-all; }
.ph-contact-value a { color: var(--ph-brand-600); font-weight: 600; }

/* ---------- 我的 · 模块功能卡片（参考：模块名 + N 项功能 + 4 列宫格） ---------- */
.ph-func-group {
  background: var(--ph-paper); border-radius: var(--ph-r);
  border: 1px solid rgba(52, 211, 153, .18); box-shadow: var(--ph-shadow);
  padding: 13px 12px 8px;
}
.ph-func-head { display: flex; align-items: center; gap: 8px; }
.ph-func-head b { font-size: 16px; color: var(--ph-text-900); }
.ph-func-count {
  padding: 1px 9px; border-radius: 999px; font-size: 11px;
  background: var(--ph-brand-50); color: var(--ph-brand-700); border: 1px solid var(--ph-brand-100);
}
.ph-func-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; margin-top: 8px; }
.ph-func-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 2px 11px; border-radius: 14px; cursor: pointer; text-align: center;
}
.ph-func-item:active { background: var(--ph-brand-50); transform: scale(.95); }
.ph-func-ico {
  width: 46px; height: 46px; border-radius: 15px;
  background: var(--ph-grad-soft); border: 1px solid rgba(52, 211, 153, .3);
  display: flex; align-items: center; justify-content: center; color: var(--ph-brand-700);
}
.ph-func-ico svg { width: 23px; height: 23px; }
.ph-func-name { font-size: 12px; color: var(--ph-text-700); line-height: 1.35; }

/* 未登录锁定态：可见不可点 */
.ph-locked .ph-func-item { cursor: not-allowed; filter: grayscale(.55); opacity: .62; }
.ph-locked .ph-func-item:active { transform: none; background: none; }
.ph-lock-tip {
  margin: 2px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 12px;
  background: var(--ph-brand-50); color: var(--ph-brand-700);
  border: 1px dashed var(--ph-brand-100);
}

/* ---------- 底部标签栏（首页 / 资讯 / 联系 / 我的） ---------- */
.ph-tabbar {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--ph-line, #d9efe6);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: blur(10px);
}
.ph-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 0; border-radius: 12px; color: var(--ph-text-400); font-size: 11px;
}
.ph-tab svg { width: 21px; height: 21px; }
.ph-tab.active {
  color: var(--ph-brand-600, #0d9488); font-weight: 700;
}
.ph-tab.active .ph-tab-ico { filter: drop-shadow(0 4px 9px rgba(52, 211, 153, .55)); }