/* ============================================================
 * style.css —— 参考示意图的浅色极简风格
 * ============================================================ */
:root {
  --bg: #f7f6f4;
  --card: #ffffff;
  --ink: #1a1a1a;
  --ink-2: #666;
  --ink-3: #999;
  --line: #e8e6e2;
  --pill: #ffffff;
  --pill-active: #1a1a1a;
  --top-badge: #f6d276;
  --accent: #2563eb;
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font: inherit; }
.page { max-width: 860px; margin: 0 auto; padding: 16px 20px 60px; }
.hidden { display: none !important; }

/* ---------- 品牌栏 ---------- */
.brand-bar { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.brand-name { font-size: 21px; font-weight: 800; letter-spacing: 1px; }
.brand-slogan { color: var(--ink-2); font-size: 14px; }
.brand-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.hdr-btn { background: var(--pill); border: 1px solid var(--line); border-radius: 9px; padding: 7px 13px; font-size: 13px; }
.hdr-btn:hover { border-color: #ccc; }
.hdr-btn.primary { background: var(--pill-active); color: #fff; border-color: var(--pill-active); font-weight: 600; }

/* ---------- 顶部栏 ---------- */
.topbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.loc-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--pill); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; white-space: nowrap; max-width: 220px;
}
.loc-pill:hover { border-color: #ccc; }
.loc-pill .loc-name { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.loc-pill .loc-edit { color: var(--ink-3); flex: none; }
.searchbox {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--pill); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
}
.searchbox input { border: none; outline: none; flex: 1; background: transparent; }
.searchbox input::placeholder { color: var(--ink-3); }
.filter-btn {
  background: var(--pill); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; flex: none; line-height: 1;
}

/* ---------- 分类标签（两排） ---------- */
.tabs-row { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tabs-row::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pill); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; white-space: nowrap; flex: none;
}
.tab.active { background: var(--pill-active); color: #fff; border-color: var(--pill-active); }
/* +/× 视觉上小巧，但用负 margin 扩出足够大的点击热区，避免误触到标签主体 */
.tab .tab-action {
  color: var(--ink-3); font-size: 14px; line-height: 1; border-radius: 50%;
  padding: 8px 9px; margin: -8px -12px -8px -6px;
}
.tab.active .tab-action { color: #bbb; }
.tab .tab-action:hover { color: var(--accent); }
.tab.tab-more { color: var(--ink-2); border-style: dashed; }
/* 已保存的分类：所有位置（第一排/第二排/更多分类页）统一浅蓝底 */
.tab.saved { background: #e8f0fe; border-color: #c6dafc; color: #1d4ed8; }
.tab.saved .tab-action { color: #7ba3e8; }
.tab.saved .tab-action:hover { color: #1d4ed8; }
.tab.saved.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab.saved.active .tab-action { color: #cfe0fb; }

/* 第二排：已保存的常用分类，可折叠；标签蓝色样式统一走 .tab.saved */
/* 折叠箭头插在第一行末尾，与标签共用 8px 间距；收起/展开位置固定不变 */
.saved-row-wrap { margin-top: 8px; }
.saved-row { display: flex; gap: 8px; flex-wrap: wrap; }
.saved-toggle {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--pill); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink-2);
}
.saved-toggle:hover { border-color: #ccc; }

/* ---------- 区块标题 ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px; }
.section-head h2 { font-size: 19px; font-weight: 700; }
.section-meta { color: var(--ink-3); font-size: 13px; display: flex; gap: 10px; align-items: baseline; }
.link-btn { color: var(--accent); font-weight: 500; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.link-btn:hover { border-color: var(--accent); }

/* ---------- 推荐置顶横向滑动区 ---------- */
/* 横向滑动区：隐藏滚动条（可用鼠标拖拽/滚轮/触摸滑动） */
.pinned-strip {
  display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: none; cursor: grab;
}
.pinned-strip::-webkit-scrollbar { display: none; }
.pinned-strip.dragging { cursor: grabbing; user-select: none; }
/* 细滚动指示条：轨道极细，滑块随滚动移动、可拖动 */
.pinned-scroll {
  position: relative; height: 3px; margin: 10px auto 0; max-width: 240px;
  background: #ededeb; border-radius: 3px; cursor: pointer;
}
.pinned-scroll-thumb {
  position: absolute; top: 0; left: 0; height: 100%; min-width: 28px;
  background: #c7c2ba; border-radius: 3px; transition: background .15s;
}
.pinned-scroll:hover .pinned-scroll-thumb, .pinned-scroll.active .pinned-scroll-thumb { background: #9a948b; }
.pinned-card {
  flex: none; width: 168px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: box-shadow .18s, transform .18s;
}
.pinned-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.10); transform: translateY(-3px); }
.pinned-card:hover .card-top .photo { transform: scale(1.05); }
.pinned-card .card-top { position: relative; height: 96px; background: #efedea; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pinned-card .card-top .photo { transition: transform .3s ease; }
.badge { font-size: 11px; font-weight: 600; border-radius: 5px; padding: 2px 7px; position: absolute; top: 8px; }
.badge-top { background: var(--top-badge); left: 8px; }
.avatar-ph { color: #b9b5af; }
.card-top .photo, .row-avatar .photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.row-avatar { overflow: visible; }
.row-avatar .photo { border-radius: 10px; }
.row-avatar .badge { z-index: 1; }
.pinned-card .card-body { padding: 10px 12px 12px; }
.pinned-card .p-name { font-weight: 700; font-size: 15px; }
.pinned-card .p-sub { color: var(--ink-2); font-size: 12px; margin-top: 2px; height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pinned-card .p-foot { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; margin-top: 8px; }

/* ---------- 两级评分（0-10 星，部分填充） ---------- */
.rate-row { display: flex; align-items: center; gap: 5px; margin-top: 4px; min-width: 0; }
.rate-label {
  flex: none; font-size: 10px; color: var(--ink-3);
  background: #f2f0ec; border-radius: 4px; padding: 1px 4px; line-height: 1.4;
}
.stars { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.star-track {
  position: relative; font-size: 11px; line-height: 1; letter-spacing: 1px;
  color: #e2ddd4; white-space: nowrap;
}
.star-fill {
  position: absolute; left: 0; top: 0; overflow: hidden;
  color: #f0a500; white-space: nowrap;
}
.stars-num { font-size: 11px; font-weight: 700; color: #b07800; }
.rate-count { font-size: 10px; color: var(--ink-3); flex: none; }
.rate-pending { font-size: 11px; color: var(--ink-3); }
/* 评论链接与"N单"共用 rate-row 的 5px 间距，不再顶到行尾 */
.review-link { color: var(--accent); font-size: 11px; flex: none; }
.review-link:hover { text-decoration: underline; }
/* 达人列（窄栏）里的紧凑星星 */
.row-id .star-track { font-size: 8px; letter-spacing: 0; }
.row-id .stars-num { font-size: 10px; }
.row-id .rate-row { margin-top: 5px; }

/* 评价弹窗 */
.review-sub { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 4px; }
.review-item { padding: 10px 0; border-bottom: 1px solid #f2f0ed; }
.review-item:last-child { border-bottom: none; }
.review-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.review-date { color: var(--ink-3); font-size: 11px; margin-left: auto; }
.review-text { margin-top: 4px; font-size: 13px; line-height: 1.5; }
.review-tag { margin-top: 3px; color: var(--ink-3); font-size: 11px; }
/* 发布者回复 + 评价者继续评论 */
.review-reply { margin: 6px 0 0 12px; padding: 6px 10px; background: #f2f6ff; border-radius: 8px; font-size: 12.5px; line-height: 1.5; }
.review-reply b { color: #1d4ed8; margin-right: 5px; }
.review-act-link { margin-top: 5px; color: var(--accent); font-size: 12px; }
.review-act-link:hover { text-decoration: underline; }
.review-reply-form { display: flex; gap: 6px; margin-top: 6px; }
.review-reply-form input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; outline: none; }
.review-reply-form button { flex: none; background: var(--pill-active); color: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12px; }
.review-add { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.review-add-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.rv-stars { font-size: 20px; letter-spacing: 2px; color: #e2ddd4; cursor: pointer; user-select: none; margin-bottom: 6px; }
.rv-stars span { transition: color .1s; }
.rv-stars span.on { color: #f0a500; }
.review-add textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; outline: none; resize: vertical; font: inherit; }
.rv-submit { margin-top: 8px; background: var(--pill-active); color: #fff; border-radius: 8px; padding: 8px 16px; font-weight: 600; }
.pinned-card .p-foot .p-price { color: var(--ink); font-weight: 700; font-size: 13px; }

/* ---------- 全部达人列表 ---------- */
.list-row {
  display: flex; gap: 14px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
}
.list-row:hover { box-shadow: 0 3px 10px rgba(0,0,0,.06); }
.row-avatar { position: relative; flex: none; width: 52px; height: 52px; border-radius: 10px; background: #efedea; display: flex; align-items: center; justify-content: center; }
.row-avatar .badge { position: absolute; top: auto; bottom: -6px; left: -4px; font-size: 10px; padding: 1px 5px; }
.row-avatar.no-avatar { display: none; }
.row-id { flex: none; width: 144px; }
.row-id .r-name { font-weight: 700; }
.row-id .r-price { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.row-main { flex: 1; min-width: 0; }
.row-main .r-title { font-weight: 600; }
.row-main .r-desc { color: var(--ink-2); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-dist { flex: none; font-weight: 700; }

/* ---------- 分页 ---------- */
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 22px; }
.pager button { background: var(--pill); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
.pager button.current { background: var(--pill-active); color: #fff; border-color: var(--pill-active); }
.pager button:disabled { color: var(--ink-3); cursor: default; }
.pager .pager-info { color: var(--ink-3); font-size: 13px; margin-left: 8px; }

/* ---------- 子页面（查看全部 / 更多分类） ---------- */
.subpage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.back-btn { background: var(--pill); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.subpage-head h1 { font-size: 20px; }
.filters-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filters-bar select {
  background: var(--pill); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; outline: none;
}
.pinned-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }

/* 更多分类页 */
.cat-search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.cat-search input { flex: 1; border: none; outline: none; background: transparent; }
.cat-search-hint { color: var(--ink-3); font-size: 12px; margin-bottom: 16px; }
.cat-group { margin-bottom: 20px; }
.cat-group h3 { font-size: 14px; color: var(--ink-2); font-weight: 600; margin-bottom: 10px; }
.cat-group .cat-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-empty { color: var(--ink-3); text-align: center; padding: 30px 0; }

/* ---------- 位置弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(20,20,20,.45);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal {
  background: var(--card); border-radius: 16px; padding: 24px; width: 100%; max-width: 420px;
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
  max-height: calc(100vh - 40px); overflow-y: auto; /* 内容超高（如展开地图）时弹窗内部滚动 */
  overscroll-behavior: contain;
}
/* 内容超高的弹窗：外层不滚动、保留圆角（overflow hidden），滚动交给内层 .modal-scroll，
 * 圆角不再被滚动条切掉 */
.modal.has-scroll { padding: 0; overflow: hidden; }
.modal.has-scroll .modal-scroll {
  padding: 24px; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain;
}
/* 细滚动条：与推荐置顶横向滚动条同样的浅灰细样式 */
.modal, .modal-scroll { scrollbar-width: thin; scrollbar-color: #c7c2ba transparent; }
.modal::-webkit-scrollbar, .modal-scroll::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track, .modal-scroll::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb, .modal-scroll::-webkit-scrollbar-thumb { background: #c7c2ba; border-radius: 3px; }
.modal::-webkit-scrollbar-thumb:hover, .modal-scroll::-webkit-scrollbar-thumb:hover { background: #9a948b; }
.modal h3 { font-size: 17px; margin-bottom: 6px; }
.modal .modal-sub { color: var(--ink-2); font-size: 13px; margin-bottom: 16px; }
.geo-btn {
  width: 100%; background: var(--pill-active); color: #fff; border-radius: 10px;
  padding: 11px; font-weight: 600; margin-bottom: 14px;
}
.modal .divider { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; margin: 4px 0 14px; }
.modal .divider::before, .modal .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mode-switch { display: flex; gap: 6px; margin-bottom: 12px; }
.mode-switch button { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px; color: var(--ink-2); }
.mode-switch button.active { background: #f0efec; color: var(--ink); font-weight: 600; border-color: #d8d5d0; }
.modal select, .modal input[type="text"], .modal input[type="email"], .modal input[type="password"] {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; background: #fff;
}
.auth-field { margin-bottom: 10px; }
.modal .mode-hint { color: var(--ink-3); font-size: 12px; margin-top: 8px; }
.modal .modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal .modal-actions button { flex: 1; border-radius: 10px; padding: 10px; border: 1px solid var(--line); }
.modal .modal-actions .primary { background: var(--pill-active); color: #fff; border-color: var(--pill-active); font-weight: 600; }
.geo-status { color: #b45309; font-size: 12px; margin-bottom: 10px; }

/* 地址实时补全下拉 + 地图选点 */
.addr-suggest {
  border: 1px solid var(--line); border-radius: 10px; margin-top: 6px;
  max-height: 168px; overflow-y: auto; background: #fff;
}
.addr-suggest-item {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  font-size: 13px; line-height: 1.4; border-bottom: 1px solid #f2f0ed;
}
.addr-suggest-item:last-child { border-bottom: none; }
.addr-suggest-item:hover { background: #f0f5ff; color: var(--accent); }
#map-pick { height: 200px; border-radius: 10px; margin-top: 10px; border: 1px solid var(--line); z-index: 0; }
#map-pick.map-unavailable { display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 13px; }

/* 当前正在使用的地址：浅蓝底 + 修改/保存链接 */
.loc-hist-item.current {
  background: #e8f0fe; border: 1px solid #c6dafc; border-radius: 10px;
  padding: 9px 12px; align-items: flex-start;
}
.hist-cur-main { flex: 1; min-width: 0; }
.hist-cur-main .cur-addr { font-weight: 600; color: #1d4ed8; line-height: 1.45; word-break: break-all; }
.hist-cur-main .cur-addr-input {
  width: 100%; border: 1px solid #c6dafc; border-radius: 8px; padding: 6px 10px; outline: none;
}
.hist-cur-main .hist-coords { color: #7ba3e8; font-size: 12px; margin-top: 3px; }
.hist-edit { flex: none; color: var(--accent); font-size: 13px; padding: 2px 4px; }
.hist-edit:hover { text-decoration: underline; }

/* 历史地址列表：一键切回老地址，可删除 */
.loc-history { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.loc-hist-item { display: flex; align-items: center; gap: 6px; }
.loc-hist-item .hist-use {
  flex: 1; text-align: left; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; background: #fafaf8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.loc-hist-item .hist-use:hover { border-color: var(--accent); color: var(--accent); }
.loc-hist-item .hist-del {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  color: var(--ink-3); border: 1px solid transparent; line-height: 1;
}
.loc-hist-item .hist-del:hover { color: #dc2626; border-color: #f3caca; }

/* ---------- 发布服务页 ---------- */
/* 页面宽度规则与达人详情页一致：窄屏 640 居中，宽屏加宽到 980 居中 */
.publish-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; max-width: 640px; margin: 0 auto; }
@media (min-width: 1000px) {
  #view-publish { margin: 0 calc((100% - min(92vw, 980px)) / 2); }
  #view-publish .publish-card, #view-publish .my-service-item { max-width: 100%; }
}
.pub-field { margin-bottom: 14px; }
.pub-field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }
.pub-field input[type="text"], .pub-field input[type="number"], .pub-field textarea, .pub-field select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; outline: none; background: #fff; font: inherit; resize: vertical;
}
.pub-row { display: flex; gap: 14px; }
.pub-row > div { flex: 1; }
.pub-cat-row { display: flex; gap: 10px; align-items: stretch; }
.pub-cat-row select { flex: 1; }
.ai-fill-btn {
  flex: none; white-space: nowrap; border: 1px solid #c6dafc; background: #e8f0fe;
  color: #1d4ed8; border-radius: 10px; padding: 0 14px; font-weight: 600; font-size: 13px;
}
.ai-fill-btn:hover { background: #d9e6fd; }
.ai-fill-btn:disabled { opacity: .6; cursor: default; }
.pub-loc { display: flex; align-items: center; gap: 10px; }
.pub-tier { display: flex !important; align-items: center; gap: 7px; font-size: 13px; color: var(--ink) !important; padding: 6px 0; cursor: pointer; }
/* 发布照片：与详情页相同的等宽瀑布流（宽屏 3 列/窄屏 2 列，原比例，8px 缝） */
.pub-photos { display: flex; gap: 8px; margin-top: 8px; }
.pub-photo-item { position: relative; border-radius: 10px; overflow: hidden; }
.pub-photo-item img { width: 100%; display: block; }
.pub-photo-item .pub-photo-del {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; font-size: 12px; line-height: 1;
}
/* 展示图设置（AI 选图 + 手动调整） */
.pick-blocks { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.pick-block { flex: 1; min-width: 220px; }
.pick-title { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.pick-preview {
  background-size: cover; background-position: center;
  border-radius: 10px; border: 1px solid var(--line); background-color: #f2f0ec;
  cursor: grab; touch-action: none; user-select: none; /* 可拖动选位置 */
}
.pick-preview:active { cursor: grabbing; }
.pick-card { width: 100%; max-width: 280px; aspect-ratio: 7 / 4; }
.pick-thumb { width: 140px; aspect-ratio: 1; }
.pick-block input[type="range"] { width: 100%; max-width: 280px; margin-top: 8px; }
.pick-thumbs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pick-thumbs img {
  width: 44px; height: 44px; object-fit: cover; border-radius: 6px;
  cursor: pointer; border: 2px solid transparent;
}
.pick-thumbs img.sel { border-color: var(--accent); }

.my-service-item {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; max-width: 560px;
}
/* 我的发布：卡片式（多行：标题 / 星星评论 / 操作按钮） */
.my-service-item.mine-card { display: block; }
.mine-card .msi-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
/* 新星星/评论未读提醒徽章 */
.mine-card .msi-new {
  flex: none; background: #fdecec; color: #dc2626; border: 1px solid #f5c6c6;
  border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600; line-height: 1.6;
}
.mine-card .rate-row { margin-top: 4px; }
.mine-card .msi-actions { display: flex; gap: 8px; margin-top: 10px; }
.mine-card .msi-edit, .mine-card .msi-del {
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 16px; font-size: 13px; background: #fff;
}
.mine-card .msi-edit { color: var(--accent); }
.mine-card .msi-edit:hover { border-color: var(--accent); }
.mine-card .msi-del { color: #dc2626; }
.mine-card .msi-del:hover { border-color: #f3caca; }
.my-service-item .msi-del { margin-left: auto; color: #dc2626; font-size: 13px; }
.my-services-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

/* ---------- 达人详情页 ---------- */
/* 窄屏（手机）：内容居中，照片组两列（列数由 JS 按断点决定） */
.detail-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; max-width: 640px; margin: 0 auto;
}
/* 宽屏（电脑）：详情视图突破页面容器加宽到约 980px，保持居中，照片组三列 */
@media (min-width: 1000px) {
  #view-detail { margin: 0 calc((100% - min(92vw, 980px)) / 2); }
  #view-detail .detail-card { max-width: 100%; }
}
.detail-top { display: flex; gap: 18px; }
.detail-photo { position: relative; flex: none; width: 150px; height: 150px; border-radius: 12px; background: #efedea; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.detail-photo .badge { position: absolute; top: 8px; left: 8px; }
.detail-info { flex: 1; min-width: 0; }
.detail-name { font-size: 22px; font-weight: 800; }
.detail-cat { display: inline-block; background: #f2f0ec; border-radius: 6px; padding: 2px 8px; font-size: 12px; color: var(--ink-2); margin: 6px 0; }
.detail-meta { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.detail-meta b { color: var(--ink); font-size: 16px; }
/* 详情页照片组（第二行）：两列等宽瀑布流
 * 一行两张、等宽、合计 = 内容宽度；其余照片按瀑布流补进较短一列；
 * 照片保持原比例（宽度统一、高度自适应），间距 8px，点击进灯箱 */
.detail-thumbs { display: flex; gap: 8px; margin-top: 14px; }
.dt-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dt-col img {
  width: 100%; display: block; border-radius: 10px; cursor: zoom-in;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: transform .15s, box-shadow .15s;
}
.dt-col img:hover { transform: scale(1.015); box-shadow: 0 5px 16px rgba(0,0,0,.15); }

/* ---------- 照片灯箱 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(250, 249, 247, .35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* 毛玻璃 */
}
.lb-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  /* 宽高由 JS 按全组照片的最大宽高设定 → 切换照片时按钮位置保持不变 */
}
.lb-stage > img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none;
}
.lb-stage > img:active { cursor: grabbing; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0, 0, 0, .32); color: #fff; font-size: 24px; line-height: 1; /* 半透明按钮 */
}
.lb-nav:hover { background: rgba(0, 0, 0, .55); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
/* 中间下方的 × 关闭按钮：与左右切换按钮同样式同大小（也可点击页面中间 1/3 关闭） */
.lb-close-btn { top: auto; bottom: 12px; left: 50%; transform: translateX(-50%); }
.detail-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.detail-section h3 { font-size: 14px; margin-bottom: 8px; }
.detail-desc { color: var(--ink-2); line-height: 1.7; }
.contact-btn { width: 100%; margin-top: 18px; padding: 12px; background: var(--pill-active); color: #fff; border-radius: 10px; font-weight: 700; font-size: 15px; }

.footer-note { margin-top: 40px; color: var(--ink-3); font-size: 12px; text-align: center; }
.footer-note a { color: var(--ink-3); text-decoration: underline; }
.footer-note a:hover { color: var(--ink-2); }

/* ---------- 法律页（privacy.html / terms.html） ---------- */
a.back-btn, .brand-link { text-decoration: none; color: inherit; display: inline-block; }
.legal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.legal h2 { font-size: 15px; margin: 22px 0 8px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin: 8px 0; color: var(--ink); }
.legal ul { margin: 8px 0 8px 20px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--accent); }
.legal-meta { color: var(--ink-3); font-size: 12px; margin-bottom: 16px; }
.legal-table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--bg); font-weight: 600; }

/* ---------- Cookie 提示横幅 ---------- */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
  padding: 12px 20px;
}
.cookie-bar-inner {
  max-width: 860px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cookie-bar-text { flex: 1; min-width: 220px; font-size: 13px; color: var(--ink-2); }
.cookie-bar-text a { color: var(--accent); }
.cookie-bar button {
  background: var(--pill-active); color: #fff; border-radius: 9px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; flex: none;
}

@media (max-width: 560px) {
  .page { padding: 12px 12px 50px; }
  .row-id { width: 92px; }
  .row-main .r-desc { display: none; }
}