:root { --hn-pink:#ff5c8a; --hn-purple:#7c3aed; }
* { box-sizing:border-box; }
body { background:#f2f3f5; margin:0; font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
.hn-top { position:fixed; top:0; left:0; right:0; height:52px; background:#fff; color:#333; border-bottom:1px solid #eee; display:flex; align-items:center; gap:10px; padding:0 14px; z-index:1000; }
.hn-brand { font-weight:600; }
.hn-top-right { margin-left:auto; display:flex; align-items:center; gap:16px; font-size:13px; }
.hn-user { color:#c2c2c2; }
.hn-top-link { color:#fff; text-decoration:none; }
.hn-side { position:fixed; top:52px; left:0; bottom:0; width:210px; background:#fff; border-right:1px solid #eee; overflow-y:auto; z-index:900; }
.hn-nav { list-style:none; margin:0; padding:8px; }
.hn-nav-ico { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; }
.hn-nav-ico svg { width:18px; height:18px; display:block; }
.hn-nav a { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:6px; color:#333; text-decoration:none; font-size:14px; }
.hn-nav a:hover { background:#f6f6f6; }
.hn-nav a.active { background:var(--hn-pink); color:#fff; }
.hn-main { margin-left:210px; padding:70px 18px 30px; }
.hn-page-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.hn-page-title { font-size:18px; margin:0; }
.hn-top-title { display:none; }
.hn-card { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:16px; }
.hn-card + .hn-card { margin-top:14px; }
.hn-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; background:#eee; vertical-align:middle; }
.hn-avatar-lg { width:80px; height:80px; border-radius:50%; object-fit:cover; background:#eee; }
.hn-thumb { width:62px; height:62px; border-radius:6px; object-fit:cover; background:#eee; margin:2px; }
.hn-thumb-sm { width:38px; height:38px; border-radius:6px; object-fit:cover; background:#eee; margin-right:3px; vertical-align:middle; }
.hn-thumb-more { display:inline-block; width:38px; height:38px; line-height:38px; text-align:center; border-radius:6px; background:#f0f0f0; color:#999; font-size:12px; vertical-align:middle; }
.hn-detail-line { color:#666; font-size:12px; line-height:1.9; }
.hn-cell-user { display:flex; align-items:center; gap:8px; }
.hn-note-cell { max-width:220px; color:#666; font-size:12px; }
.hn-actions { display:flex; gap:4px; flex-wrap:wrap; }
.hn-actions .layui-btn { margin:0; }
.hn-mcard { padding:12px 14px; background:#fff; border-radius:10px; margin:10px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.hn-mcard-head { display:flex; align-items:center; gap:10px; }
.hn-mcard-head a { color:#333; font-weight:600; text-decoration:none; }
.hn-mcard-note { background:#f7f8fa; border-radius:8px; padding:8px 10px; color:#666; font-size:12px; }
.hn-progress { height:6px; background:#eee; border-radius:3px; overflow:hidden; margin-top:6px; }
.hn-progress i { display:block; height:100%; background:linear-gradient(90deg,#ff5c8a,#ff9f9f); }
.hn-peer { display:flex; align-items:center; gap:6px; font-size:12px; padding:2px 0; }
.hn-peer img { width:24px; height:24px; border-radius:50%; object-fit:cover; }
.hn-danger { color:#ff5722; font-weight:600; }
.hn-text-block { color:#444; font-size:13px; line-height:1.8; white-space:pre-wrap; word-break:break-word; }
.hn-stat { font-size:26px; font-weight:600; }
.hn-muted { color:#999; font-size:12px; }
.hn-row { cursor:pointer; }
.hn-badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; color:#fff; background:#999; white-space:nowrap; }
.hn-badge.level-2 { background:var(--hn-purple); }
.hn-badge.level-1 { background:#1e9fff; }
.hn-badge.level-0 { background:#999; }
.hn-badge.bg-green { background:#16b777; }
.hn-badge.bg-blue { background:#1e9fff; }
.hn-badge.bg-cyan { background:#2f9cb9; }
.hn-badge.bg-orange { background:#ffb800; }
.hn-badge.bg-red { background:#ff5722; }
.hn-badge.bg-black { background:#333; }
.hn-badge.bg-gray { background:#999; }
.hn-timeline { list-style:none; margin:0; padding:0; }
.hn-timeline li { position:relative; padding:0 0 14px 18px; border-left:2px solid #e6e6e6; }
.hn-timeline li:last-child { border-left-color:transparent; }
.hn-timeline li::before { content:''; position:absolute; left:-5px; top:3px; width:8px; height:8px; border-radius:50%; background:var(--hn-pink); }
.hn-empty { padding:40px 10px; text-align:center; color:#aaa; }
.hn-flex-between { display:flex; justify-content:space-between; align-items:center; }
.hn-kv { display:flex; flex-wrap:wrap; }
.hn-kv > div { width:33.33%; padding:4px 0; }
.hn-kv .k { color:#999; font-size:12px; }
.hn-desktop { display:block; }
.hn-mobile { display:none; }
@media (max-width:991.98px) {
  .hn-side { display:none; }
  .hn-main { margin-left:0; padding:66px 12px 26px; }
  .hn-desktop { display:none; }
  .hn-mobile { display:block; }
  .hn-kv > div { width:50%; }
}
.hn-realname { color:#999; font-weight:400; font-size:12px; }
.hn-photos .hn-photo { cursor: zoom-in; }
.hn-filter-more { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.hn-filter-more > * { min-width:150px; flex:1; }
.hn-list-sub { color:#999; font-size:12px; }
/* 联系方式按钮与弹窗 */
.hn-contact-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.hn-btn-contact { background:#ff5722 !important; border-color:#ff5722 !important; color:#fff !important; box-shadow:0 2px 6px rgba(255,87,34,.35); font-weight:600; }
.hn-btn-contact:hover { background:#e64a19 !important; border-color:#e64a19 !important; }
.hn-contact-modal { padding:4px 6px; }
.hn-contact-modal .row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px; border-bottom:1px solid #f0f0f0; }
.hn-contact-modal .row:last-child { border-bottom:0; }
.hn-contact-modal .lbl { color:#999; font-size:12px; }
.hn-contact-modal .val { font-size:17px; font-weight:600; color:#333; letter-spacing:.5px; }
.hn-contact-modal .acts { display:flex; gap:6px; white-space:nowrap; }
/* 高级筛选·所属 */
.hn-owner-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:2px;}
.hn-owner-chip{font-size:13px;color:#333;}
.hn-picker-list{border:1px solid #eee;border-radius:8px;max-height:320px;overflow:auto;}
.hn-picker-row{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;border-bottom:1px solid #f2f2f2;}
.hn-picker-row:hover{background:#f7f8fa;}
.hn-picker-row:last-child{border-bottom:0;}
/* 统计块：PC 一行均分，移动端 2 列等宽等距 */
.hn-stat-row { display:flex; flex-wrap:wrap; margin-left:-7.5px; margin-right:-7.5px; }
.hn-stat-row > div { padding:0 7.5px; margin-bottom:15px; box-sizing:border-box; }
.hn-stat-row .layui-card { margin:0; height:100%; }
/* 顶部 Tab（用户页子导航） */
.hn-tabs-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.hn-tabs-row .hn-tabs { margin-bottom:0; flex:1; }
.hn-tabs-back { margin-left:auto; white-space:nowrap; text-decoration:none; font-size:14px;
  display:inline-flex; align-items:center; gap:4px; padding:7px 14px; border-radius:20px;
  color:#666; background:#fff; border:1px solid #ececec; transition:all .18s ease; }
.hn-tabs-back:hover { color:var(--hn-pink); border-color:var(--hn-pink); background:#fff5f8; }
.hn-tabs-back .layui-icon { font-size:14px; }
.hn-tab { padding:8px 16px; border-radius:20px; background:#fff; color:#555; text-decoration:none; font-size:14px; border:1px solid #ececec; }
.hn-tab.active { background:var(--hn-pink); color:#fff; border-color:var(--hn-pink); }
/* 移动端底部导航（空心 -> 选中实心放大） */
.hn-bottomnav { display:none; }
@media (max-width:991.98px) {
  .hn-bottomnav { display:flex; position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid #eee; z-index:1000;
    padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 10px rgba(0,0,0,.04); }
  .hn-bottomnav .hn-bn-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:7px 0 6px; color:#4b5563; text-decoration:none; }
  .hn-bn-ico { width:26px; height:26px; display:flex; align-items:center; justify-content:center; transition:transform .18s ease; }
  .hn-bn-ico svg { width:22px; height:22px; display:block; }
  .hn-bn-txt { font-size:12.5px; font-weight:500; letter-spacing:.3px; }
  .hn-bottomnav .hn-bn-item.active { color:var(--hn-pink); }
  .hn-bottomnav .hn-bn-item.active .hn-bn-ico { transform:scale(1.14); }
  .hn-bottomnav .hn-bn-item.active .hn-bn-txt { font-weight:800; font-size:13px; }
  .hn-main { padding-bottom:68px; }
}

/* PC 端顶栏用品牌粉色，移动端保持白色 */
@media (min-width:992px) {
  .hn-top { background:var(--hn-pink); color:#fff; border-bottom-color:var(--hn-pink); }
  .hn-side { background:var(--hn-pink); border-right-color:var(--hn-pink); }
  .hn-nav a { color:#fff; }
  .hn-nav a:hover { background:rgba(255,255,255,.15); }
  .hn-nav a.active { background:rgba(255,255,255,.28); color:#fff; }
  .hn-brand { color:#fff; }
}
/* 移动端：页面标题在顶栏居中显示，内容区标题隐藏 */
@media (max-width:991.98px) {
  .hn-top-title { display:block; position:absolute; left:50%; transform:translateX(-50%); font-size:16px; font-weight:600; color:#333; max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hn-page-head { display:none; }
}
.hn-back { display:none; color:#333; text-decoration:none; font-size:15px; align-items:center; gap:4px; }
@media (max-width:991.98px) {
  .hn-top-back .hn-brand { display:none; }
  .hn-top-back .hn-back { display:inline-flex; }
}
.hn-pc-back { color:var(--hn-pink); text-decoration:none; font-size:14px; margin-right:8px; }
@media (max-width:991.98px) { .hn-pc-back { display:none; } }
/* 品牌 Logo（遮罩+currentColor，自适应粉/白背景） */
.hn-logo { display:inline-block; width:26px; height:26px; background:currentColor; vertical-align:-5px;
  -webkit-mask:url(logo.svg) center/contain no-repeat; mask:url(logo.svg) center/contain no-repeat; }
.hn-brand { display:inline-flex; align-items:center; text-decoration:none; }
.hn-brand-logo { height:30px; width:auto; display:block; }
@media (max-width:991.98px) { .hn-brand-logo { height:28px; } }
@media (min-width:992px) {
  .hn-top { padding-left:0; }
  .hn-brand { width:210px; height:52px; justify-content:center; }
  .hn-brand-logo { height:30px; width:auto; max-width:170px; object-fit:contain; }
}
.hn-brand-text { font-size:23px; font-weight:700; letter-spacing:1px; color:#fff; }
@media (max-width:991.98px) { .hn-brand-text { display:none; } }
@media (min-width:992px) {
  .hn-brand { width:210px; height:52px; justify-content:center; }
  .hn-brand-logo { display:none; }
  .hn-brand-text { display:inline-block; }
}
/* 小程序内嵌（web-view）：隐藏自带头部与页内标题，内容上移补位，不出现空占位 */
body.hn-embed .hn-top { display: none !important; }
body.hn-embed .hn-side { top: 0 !important; }
body.hn-embed .hn-main { margin-left: 0 !important; padding-top: 12px !important; padding-bottom: 74px !important; }
body.hn-embed .hn-page-head { display: none !important; }
body.hn-embed .hn-bottomnav { padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
/* 内嵌时的悬浮返回键（避免丢失页面级返回能力） */
.hn-float-back { display:none; position:fixed; top:12px; left:12px; z-index:1200; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.94); color:#333; text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.14);
  align-items:center; justify-content:center; font-size:18px; }
body.hn-embed .hn-float-back { display:flex; }
/* iOS：防止聚焦输入框时页面自动放大（字号≥16px 才不触发） */
input, select, textarea, .layui-input, .layui-select, .layui-textarea { font-size: 16px !important; }
input:focus, select:focus, textarea:focus { font-size: 16px !important; }

/* 报表卡片头：移动端自适应，避免长标题/按钮挤压变形 */
.hn-card-head-wrap { flex-wrap:wrap; row-gap:6px; }
.hn-card-title { display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px; min-width:0; max-width:100%; }
.hn-card-title .hn-muted { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hn-title-sub { font-size:12px; }
@media (max-width:991.98px) {
  .hn-card-head-wrap .hn-actions { width:100%; display:flex; gap:6px; }
  .hn-card-head-wrap .hn-actions .layui-btn { flex:1; padding:0 10px; }
  .hn-card-title { width:100%; }
  .layui-card-header { height:auto; min-height:40px; line-height:1.5; padding:10px 15px; white-space:normal; }
}

/* 我的统计：紧凑小卡（移动端2列，PC一行5个） */
.hn-mini-stat { background:#fff; border-radius:8px; padding:8px 10px; box-shadow:0 1px 3px rgba(0,0,0,.05); height:100%; }
.hn-mini-stat .k { color:#999; font-size:11px; line-height:1.4; }
.hn-mini-stat .v { color:#333; font-size:20px; font-weight:700; line-height:1.2; margin-top:2px; }
@media (min-width:992px) {
  /* 5个一排：覆盖 layui-col-md3 的25% */
  #reportStats > .layui-col-md3 { width:20%; }
}
@media (max-width:991.98px) {
  #reportStats { margin-left:-5px; margin-right:-5px; }
  #reportStats > div { padding:0 5px; margin-bottom:8px; }
  .hn-mini-stat { padding:7px 8px; border-radius:7px; }
  .hn-mini-stat .k { font-size:10.5px; }
  .hn-mini-stat .v { font-size:17px; }
}

/* 我的统计：移动端 3+2 布局，PC 5 列 */
.hn-mini-row { display:flex; flex-wrap:wrap; gap:8px; }
.hn-mini-row .hn-mini-item { box-sizing:border-box; }
@media (max-width:991.98px) {
  .hn-mini-row .hn-mini-item { width: calc((100% - 16px) / 3); }
  .hn-mini-row .hn-mini-item:nth-child(n+4) { width: calc((100% - 8px) / 2); }
}
@media (min-width:992px) {
  .hn-mini-row .hn-mini-item { width: calc((100% - 32px) / 5); }
}

/* 认证小徽标：紧凑内联 */
.hn-cert { display:inline-flex; align-items:center; gap:2px; padding:0 7px; height:19px; line-height:19px;
  border-radius:9px; background:#e8f7ef; color:#16a34a; font-size:12px; font-weight:500; white-space:nowrap; vertical-align:middle;
  margin-right:4px; }
.hn-cert .layui-icon { font-size:11px; margin-right:1px; }
@media (max-width:991.98px) {
  .hn-cert { height:17px; line-height:17px; font-size:11px; padding:0 6px; border-radius:8px; }
  .hn-cert .layui-icon { font-size:10px; }
  .hn-idline { gap:4px !important; font-size:11px; }
}

/* ===== PC 端顶栏/侧栏美化（仅 ≥992px，移动端/小程序内嵌不变） ===== */
@media (min-width:992px) {
  .hn-top { background:linear-gradient(135deg,#ff709b 0%,#ff5c8a 55%,#f74b7c 100%); border-bottom:0;
    box-shadow:0 2px 14px rgba(255,92,138,.28); }
  .hn-brand-text { text-shadow:0 1px 3px rgba(150,0,45,.18); }
  .hn-side { background:linear-gradient(180deg,#ff5c8a 0%,#f64877 100%); border-right:0;
    box-shadow:2px 0 16px rgba(255,92,138,.16); }
  .hn-nav { padding:10px; }
  .hn-nav a { color:rgba(255,255,255,.92); border-radius:10px; margin-bottom:3px;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease; }
  .hn-nav a:hover { background:rgba(255,255,255,.16); }
  .hn-nav a.active { background:rgba(255,255,255,.22); color:#fff; font-weight:600;
    box-shadow:inset 3px 0 0 #fff; }
  /* 内容区顶部留白更舒展 */
  .hn-main { padding:74px 22px 34px; }
}