/* ============================================================
   零工招聘信息管理 · 全新 UI（2026-09 方案落地）
   Design Tokens + 组件库。旧类名全部保留，只增不破坏。
   ============================================================ */
:root {
  /* 颜色令牌 */
  --brand: #2563eb; --brand-d: #1d4ed8; --brand-l: #eff4ff;
  --salary: #f25824; --salary-l: #fff3ed;      /* 薪资专属橙 */
  --ok: #16a34a; --ok-l: #e9f9ef;
  --warn: #dc2626; --gold: #f59e0b;
  --bg: #f5f6f8; --card: #fff; --ink: #1a1d21; --sub: #7a828a;
  --line: #ebedf0; --chip: #f5f6f8;
  /* 圆角 */
  --r-s: 8px; --r-m: 12px; --r-l: 14px; --r-xl: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 全站隐藏滚动条：手机优先无滚动条；电脑用鼠标滚轮滚动 */
* { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
html { background: var(--bg); } /* 内容短于视口时，底部空白也显示灰底（修移动端发白） */

/* ---------- 顶部栏 ---------- */
header.app {
  position: sticky; top: 0; z-index: 10; color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
header.app h1 { font-size: 17px; margin: 0; font-weight: 700; flex: 1; }
header.app .right { font-size: 13px; opacity: .92; }

.wrap { max-width: 720px; margin: 0 auto; padding: 12px; }
/* 底部导航页留出空间 */
body.has-tabbar .wrap { padding-bottom: 86px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border-radius: var(--r-l); padding: 14px; margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(26,29,33,.06);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: none; border-radius: var(--r-m); padding: 12px 16px; min-height: 44px;
  font-size: 15px; font-weight: 700; cursor: pointer; background: var(--brand); color: #fff; width: 100%;
  transition: transform .08s, box-shadow .15s, opacity .15s; font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn.ghost { background: #fff; color: var(--brand); border: 1.5px solid var(--brand); }
.btn.sm { width: auto; min-height: 0; padding: 8px 13px; font-size: 13px; border-radius: 9px; }
/* 我的发布操作行按钮：高度缩至约 1/4 小（34px→25px）；常规按钮收窄+行距加大防误触，塞红包(文字长)保持原宽 */
.row.act-row { gap: 12px; }
.act-row .btn.sm { padding: 4px 6px; font-size: 12px; border-radius: 8px; }
.act-row .btn.sm.rp-wide { padding: 4px 11px; }
.btn.ok { background: var(--ok); }
.btn.ok.ghost { background: #fff; color: var(--ok); border-color: var(--ok); }
.btn.danger { background: var(--warn); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 后台套餐编辑器：表头 + 紧凑行（置顶套餐/佣金兑换套餐） ---------- */
.pkg-head { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--sub); padding: 2px 2px 6px; }
.pkg-head .hg { flex: 1; min-width: 0; }
.pkg-head .hf { flex: 0 0 auto; text-align: center; }
.pkg-row { gap: 8px; margin-bottom: 6px; align-items: center; }
.pkg-row input, .pkg-row select { padding: 6px 8px; font-size: 12px; border-radius: 8px; }
.pkg-row .btn { flex: 0 0 48px; padding: 6px 0; font-size: 12px; }

/* ---------- 表单 ---------- */
.row { display: flex; gap: 8px; }
.row > * { flex: 1; min-width: 0; }
input, textarea, select {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 15px;
  background: #fff; color: var(--ink); font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
textarea { min-height: 120px; resize: vertical; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 13px; color: var(--sub); margin-bottom: 5px; }

/* ---------- 筛选 chips：选中=浅蓝底+描边 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
  border: 1.5px solid transparent; background: var(--chip); color: var(--ink); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; user-select: none; min-height: 33px;
  transition: background .15s, border-color .15s; font-family: inherit;
}
.chip.on { background: var(--brand-l); color: var(--brand); border-color: var(--brand); font-weight: 600; }

/* ---------- 文本 ---------- */
.muted { color: var(--sub); font-size: 13px; }
.salary { color: var(--salary); font-weight: 800; font-size: 16px; }
.tag { display: inline-block; background: var(--brand-l); color: var(--brand); border-radius: 6px; padding: 2.5px 9px; font-size: 12px; margin: 2px 4px 2px 0; font-weight: 500; }
/* 标签语义色：结算=橙 工种=蓝 人群=绿 */
.tag-w, .tag.settle { background: var(--salary-l); color: var(--salary); }
.tag-g, .tag.crowd { background: var(--ok-l); color: var(--ok); }
.tag-warm { background: #fff7e6; color: #b45309; }
.top-badge {
  position: absolute; top: -1px; right: 12px; background: linear-gradient(135deg, #ffb020, var(--gold));
  color: #fff; border-radius: 0 0 7px 7px; padding: 3px 10px; font-size: 11px; font-weight: 700;
}

/* ---------- 置顶：按钮 + 套餐选择卡片 ---------- */
.btn-top { background: #fff7e6; color: #b45309; border: 1.5px solid #f59e0b; }
.pkg-grid { display: flex; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.pkg-card {
  flex: 1 1 100px; min-width: 96px; border: 2px solid var(--line); border-radius: 14px; padding: 14px 8px 10px;
  text-align: center; cursor: pointer; user-select: none; position: relative; background: #fff;
  transition: border-color .15s, background .15s;
}
.pkg-card .pkg-days { font-size: 16px; font-weight: 700; color: #111827; }
.pkg-card .pkg-price { margin-top: 4px; font-size: 18px; font-weight: 800; color: var(--salary); }
.pkg-card .pkg-tag {
  position: absolute; top: -10px; right: 6px; background: var(--salary); color: #fff;
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.pkg-card .pkg-check {
  position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
}
.pkg-card.on { border-color: #d97706; background: #fff7e6; }
.pkg-card.on .pkg-check { border-color: transparent; background: #d97706; }
.pkg-card.on .pkg-check::after { content: '\2713'; color: #fff; font-size: 12px; display: block; text-align: center; line-height: 18px; }
.status-draft { color: var(--warn); font-size: 12px; }
.status-pub { color: var(--ok); font-size: 12px; font-weight: 600; }
.missing { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 9px; padding: 9px 11px; font-size: 13px; margin-top: 10px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); background: rgba(26,29,33,.86); color: #fff;
  padding: 11px 18px; border-radius: 10px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; max-width: 80%;
}
.toast.show { opacity: 1; }
.toast.err { background: #b91c1c; }
.toast.ok { background: #15803d; }

/* ---------- tabs（页内切换） ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.tab { padding: 9px 15px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: 14px; white-space: nowrap; cursor: pointer; user-select: none; }
.tab.on { background: var(--brand-l); color: var(--brand); border-color: var(--brand); font-weight: 700; }

/* ---------- 发布页「招聘信息 / 铺位招商转让」切换：选中保持原大小，未选中缩小一档（按了/没按对比更明显） ---------- */
#p_post #kindTabs .tab { transition: transform .18s ease; }
#p_post #kindTabs .tab:not(.on) { transform: scale(.9); }

/* ---------- 发布者主导航：激活放大+各色彩色实底，未激活缩小+同色系浅底（人性化状态区分） ---------- */
#app > .tabs { padding: 6px 2px; }
#app > .tabs .tab { transition: transform .18s ease, background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
#app > .tabs .tab.on { transform: scale(.9); color: #fff; box-shadow: 0 3px 12px rgba(26,29,33,.16); }
#app > .tabs .tab:not(.on) { transform: scale(.8); }
/* 发布信息：蓝 */
#app > .tabs .tab:nth-child(1) { background: #eff4ff; color: #2563eb; border-color: #c7d9f8; }
#app > .tabs .tab:nth-child(1).on { background: #2563eb; border-color: #2563eb; color: #fff; }
/* 我的发布：橙 */
#app > .tabs .tab:nth-child(2) { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
#app > .tabs .tab:nth-child(2).on { background: #ea580c; border-color: #ea580c; color: #fff; }
/* 我的资料：绿 */
#app > .tabs .tab:nth-child(3) { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
#app > .tabs .tab:nth-child(3).on { background: #16a34a; border-color: #16a34a; color: #fff; }
/* 我的佣金：金 */
#app > .tabs .tab:nth-child(4) { background: #fef9c3; color: #a16206; border-color: #fde68a; }
#app > .tabs .tab:nth-child(4).on { background: #ca8a04; border-color: #ca8a04; color: #fff; }
/* 第 5 个起（后台菜单：费用设置/财务统计/站点设置/浏览日志/通讯录/分享统计）：
   补齐浅底彩字 + 激活实底白字，避免激活时白底白字看不见 */
/* 费用设置：紫 */
#app > .tabs .tab:nth-child(5) { background: #f3e8ff; color: #7c3aed; border-color: #e9d5ff; }
#app > .tabs .tab:nth-child(5).on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
/* 财务统计：玫红 */
#app > .tabs .tab:nth-child(6) { background: #ffe4e6; color: #be123c; border-color: #fecdd3; }
#app > .tabs .tab:nth-child(6).on { background: #e11d48; border-color: #e11d48; color: #fff; }
/* 站点设置：青 */
#app > .tabs .tab:nth-child(7) { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
#app > .tabs .tab:nth-child(7).on { background: #0d9488; border-color: #0d9488; color: #fff; }
/* 浏览日志：天蓝 */
#app > .tabs .tab:nth-child(8) { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
#app > .tabs .tab:nth-child(8).on { background: #0284c7; border-color: #0284c7; color: #fff; }
/* 通讯录：靛蓝 */
#app > .tabs .tab:nth-child(9) { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
#app > .tabs .tab:nth-child(9).on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
/* 分享统计：石墨 */
#app > .tabs .tab:nth-child(10) { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
#app > .tabs .tab:nth-child(10).on { background: #64748b; border-color: #64748b; color: #fff; }

/* ---------- 详情弹层（底部 sheet） ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(26,29,33,.45); display: none; align-items: flex-end; z-index: 40; }
.modal-mask.show { display: flex; }
.modal { background: #fff; width: 100%; max-width: 720px; margin: 0 auto; border-radius: 20px 20px 0 0; max-height: 88vh; overflow-y: auto; padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); }
.grab { width: 38px; height: 4px; border-radius: 4px; background: var(--line); margin: 6px auto 12px; }
.modal h2 { margin: 0 0 8px; font-size: 18px; padding-right: 24px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modal .big-sal { color: var(--salary); font-weight: 800; font-size: 21px; margin-bottom: 8px; }
.close-x { float: right; font-size: 22px; cursor: pointer; color: var(--sub); margin-top: 4px; }
.mrow { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mrow .k { color: var(--sub); width: 78px; flex: none; }
.mrow .v { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.mrow .pub-date { flex: none; align-self: center; color: var(--sub); font-size: 12.5px; white-space: nowrap; }
.modal h3.sec-t, .modal summary.sec-t { font-size: 14px; margin: 14px 0 4px; display: flex; align-items: center; gap: 7px; }
.modal h3.sec-t::before, .modal summary.sec-t::before { content: ""; width: 3.5px; height: 13px; border-radius: 2px; background: var(--brand); }
.modal summary.sec-t { cursor: pointer; list-style: none; }
.modal summary.sec-t::-webkit-details-marker { display: none; }
.modal summary.sec-t::after { content: "展开 ▸"; margin-left: 6px; font-size: 11.5px; color: var(--sub); flex: none; }
.modal details[open] > summary.sec-t::after { content: "收起 ▴"; }

/* 联系人卡片 + 双按钮 */
.contact-card { background: var(--bg); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.contact-card .av { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-l); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.contact-card .info { flex: 1; min-width: 0; }
.contact-card .info b { font-size: 15px; display: block; }
.contact-card .info span { font-size: 13px; color: var(--sub); letter-spacing: .5px; }
.dact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* ⚠️ 必须先清掉全局 `.btn{width:100%}`：它会让 flex-basis:auto 的基准变成「整行宽」，
   再配 flex-shrink:0 就拒绝收缩 → 同排其它按钮被挤成竖排文字（dr 轮修的就是这个）。
   给文字加 nowrap 是兜底：宁可整行换行，也不让按钮里的字竖起来。 */
.dact .btn { width: auto; white-space: nowrap; padding: 13px; font-size: 15px; }
/* 不加 min-width:0：flex 项的自动最小尺寸 = nowrap 文字宽，保证按钮永远不会比文字窄，
   放不下时由上面的 flex-wrap 整行换行，而不是把文字挤出按钮外。 */
.dact .b1 { flex: 1 1 0; }
.dact .b2 { flex: 1.6 1 0; }
/* 「转给好友」用短文案 + 窄按钮，宽度按内容自然占位、不伸不缩 */
.dact .b3 { flex: 0 0 auto; padding: 13px 14px; font-size: 13.5px; }

/* ---------- 首页 ---------- */
.home-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%); color: #fff;
  padding: 22px 16px 48px; border-radius: 0 0 22px 22px; margin: -12px -12px 0;
}
/* 装饰高光圆（右上大圆 + 右下小圆，纯 CSS 零图片） */
.home-hero::before { content: ''; position: absolute; right: -38px; top: -46px; width: 138px; height: 138px; border-radius: 50%; background: rgba(255,255,255,.10); }
.home-hero::after { content: ''; position: absolute; right: 30px; bottom: -34px; width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.07); }
.home-hero h4, .home-hero .sub, .hh-greet, .hh-date, .hh-float { position: relative; z-index: 2; }
/* 日期徽章（右上角） */
.hh-date { position: absolute; top: 14px; right: 14px; font-size: 11px; background: rgba(255,255,255,.16); padding: 3px 9px; border-radius: 999px; letter-spacing: .5px; }
/* 漂浮点缀 emoji（主题 JS 动态填充，缓慢上下浮动） */
.hh-float { position: absolute; font-size: 26px; opacity: .5; pointer-events: none; user-select: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)); animation: hhfloat 4s ease-in-out infinite alternate; }
.hh-float.fa { right: 118px; top: 12px; }
.hh-float.fb { right: 40px; bottom: 12px; font-size: 20px; opacity: .38; animation-duration: 5s; animation-delay: 1.3s; }
@keyframes hhfloat { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-9px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .hh-float { animation: none; } }
/* 随机欢迎语行 */
.home-hero .hh-greet { font-size: 12.5px; margin-top: 7px; opacity: .92; }
/* 每日焕新主题变体（JS 按随机/每日/固定切换 data-t；文字均在渐变深端，白字对比达标） */
.home-hero[data-t="dusk"]   { background: linear-gradient(135deg, #312e81 0%, #7c3aed 100%); }
.home-hero[data-t="amber"]  { background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%); }
.home-hero[data-t="green"]  { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
.home-hero[data-t="night"]  { background: linear-gradient(135deg, #0f172a 0%, #334155 100%); }
.home-hero[data-t="rose"]   { background: linear-gradient(135deg, #be123c 0%, #f43f5e 100%); }
.home-hero h4 { font-size: 20px; font-weight: 700; margin: 0; }
.home-hero .sub { font-size: 12.5px; opacity: .85; margin-top: 3px; }
/* 老访客（第 2 次及以后打开首页）：横幅收窄，把首屏空间让给「今日最新」。
   只压内边距与装饰性文案，不动后台配置的站点副标题。 */
.home-hero.compact { padding: 13px 16px 30px; border-radius: 0 0 18px 18px; }
.home-hero.compact h4 { font-size: 17.5px; }
.home-hero.compact .sub { margin-top: 2px; opacity: .8; }
.home-hero.compact .hh-greet { display: none; }
.home-hero.compact .hh-float { font-size: 22px; opacity: .42; }
.home-hero.compact .hh-float.fb { display: none; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -28px; }
.entry { background: #fff; border-radius: var(--r-l); padding: 16px 14px; box-shadow: 0 2px 8px rgba(26,29,33,.07); display: block; }
.entry:active { transform: translateY(1px); }
.entry .ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 8px; }
.entry b { font-size: 15px; display: block; }
.entry .d { font-size: 12px; color: var(--sub); margin-top: 2px; }
.hotsec { margin-top: 18px; }
.hotsec .t { font-size: 14px; font-weight: 700; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }
.hotsec .t .more { color: var(--sub); font-weight: 400; font-size: 12px; }
.hotlist { background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 1px 4px rgba(26,29,33,.06); }
.hotitem { display: flex; align-items: center; gap: 9px; padding: 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.hotitem:last-child { border-bottom: none; }
.hotitem .rank { width: 18px; height: 18px; border-radius: 5px; background: var(--brand-l); color: var(--brand); font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.hotitem .rank.top { background: var(--salary-l); color: var(--salary); }
.hotitem .hi-main { flex: 1; min-width: 0; }
/* 首页条目标题字号（dj 轮：在原来继承的 13.5px 基础上增大一个码 → 14.5px）。
   刻意写在 .nm 上而不是 .hotitem 基类上：占位行 `.hotitem.muted`（加载中/暂无信息/加载失败）
   与基类同权重且 .hotitem 定义更靠后，改基类会把占位文案一起放大 —— 那不在本次改动范围内。
   标题内的 💰（.rp-ico）无独立字号，随标题等比放大（本就是标题的一部分）。
   .hotitem 仅 index.html 使用，浏览页/发布页/后台不受影响。 */
.hotitem .nm { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.hotitem .sub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotsec .nt-badge.nt-badge-rp { background: #fee2e2; color: #b91c1c; }
.hotsec .nt-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fff3e0; color: #e07b00; font-size: 11px; font-weight: 600; vertical-align: 1px; }
/* 首页专属微调（df）：条目已是「标题 + 副行」两行块，父级 align-items:center 会把薪资
   竖直居中到两行之间，看起来像跑到了第二行 → 强制顶对齐，让薪资与标题同一行右端。
   .hotitem / .sl 只在 index.html 的 #hotList 使用；浏览页是 .card / .jd-sum，不受影响。 */
.hotitem .sl { color: var(--salary); font-weight: 700; font-size: 13px; flex: none; align-self: flex-start; max-width: 42%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 旧首页菜单卡（保留兼容） ---------- */
.login-box { max-width: 360px; margin: 8vh auto; }
.menu-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.menu-card { background: #fff; border-radius: var(--r-l); padding: 22px 18px; text-align: center; box-shadow: 0 1px 4px rgba(26,29,33,.06); display: block; }
.menu-card .ic { font-size: 30px; }
.menu-card .t { font-size: 17px; font-weight: 700; margin-top: 8px; }
.menu-card .d { font-size: 13px; color: var(--sub); margin-top: 4px; }

/* ---------- 底部 Tab 导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  max-width: 720px; margin: 0 auto;
}
/* 左右分组：中间「发布」精确居中，两侧对称分布 */
.tabbar .tb-side { flex: 1; display: flex; align-items: flex-end; }
.tabbar .tb-side .ti { flex: 1; }
.tabbar .ti { flex: 1; text-align: center; font-size: 10.5px; color: var(--sub); display: block; padding-top: 2px; }
.tabbar .ti .i { font-size: 20px; display: block; line-height: 1.35; }
.tabbar .ti.on { color: var(--brand); font-weight: 700; }
.tabbar .ti.pub { flex: 0 0 96px; position: relative; }
.tabbar .ti.pub .i {
  background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff;
  width: 48px; height: 48px; border-radius: 50%; line-height: 48px;
  margin: -24px auto 0; font-size: 23px; box-shadow: 0 6px 16px rgba(37,99,235,.38);
}
.tabbar .ti.pub.on { color: var(--brand); }

/* ---------- 发布三步指示器 ---------- */
.steps { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; }
.step { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sub); white-space: nowrap; }
.step .n { width: 20px; height: 20px; border-radius: 50%; background: #eceff3; border: 1.5px solid #d8dde3; color: var(--sub); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; box-sizing: border-box; }
.step.on { color: var(--brand); font-weight: 700; }
.step.on .n { background: var(--brand); border-color: var(--brand); color: #fff; }
.step.done .n { background: var(--ok-l); border-color: var(--ok); color: var(--ok); }
/* 未激活步骤的彩色点缀：2 橙色系、3 绿色系（激活/完成态由上方 .on/.done 规则接管） */
.step:not(.on):not(.done)[data-page-node-id="st2"] { color: #b45309; }
.step:not(.on):not(.done)[data-page-node-id="st2"] .n { background: #fef3c7; border-color: #f5a623; color: #d97706; }
.step:not(.on):not(.done)[data-page-node-id="st3"] { color: #15803d; }
.step:not(.on):not(.done)[data-page-node-id="st3"] .n { background: #dcfce7; border-color: #34c38f; color: #15803d; }
.step-line { flex: 1; height: 1.5px; background: var(--line); min-width: 10px; }

/* ---------- 列表卡片（薪资右上） ---------- */
.job-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.job-top .tt { font-size: 15.5px; font-weight: 700; flex: 1; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-top .salary { flex: none; max-width: 46%; font-size: 16px; overflow-wrap: anywhere; }
.job-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--sub); }
.job-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--sub); flex-wrap: wrap; gap: 4px 10px; }
.job-foot .pdate { color: var(--sub); }
.card { position: relative; }

/* ---------- 表格（admin） ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
table.tbl th { background: var(--bg); }

/* 无障碍：键盘焦点可见 */
a:focus-visible, button:focus-visible, .chip:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}

/* ---------- 发布成功「冒出来」立体气泡提示窗 ---------- */
.rpq-mask { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; }
.rpq-mask.show { display: flex; }
.rpq-box { position: relative; width: 100%; max-width: 400px; background: linear-gradient(180deg,#fff 0%,#fff7f8 100%); border-radius: 18px; padding: 26px 20px 18px; box-shadow: 0 24px 60px rgba(15,23,42,.35), 0 3px 0 #e6b3bd inset, 0 -6px 0 #f43f5e inset; animation: rpqpop .5s cubic-bezier(.18,1.35,.4,1); }
@keyframes rpqpop { 0% { transform: scale(.4) translateY(60px); opacity: 0; } 60% { transform: scale(1.06) translateY(-6px); opacity: 1; } 100% { transform: scale(1) translateY(0); } }
/* 气泡尾巴：从窗口底部冒出来的尖角 */
.rpq-box::before { content: ""; position: absolute; bottom: -9px; left: 46px; width: 18px; height: 18px; background: #fff7f8; transform: rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 6px 6px 12px rgba(15,23,42,.12); }
/* 顶部红包徽章：一半悬在窗口外，立体浮起 */
.rpq-badge { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(160deg,#ff6b81,#e11d48); border: 4px solid #fff; box-shadow: 0 8px 18px rgba(225,29,72,.45), 0 2px 0 #9f1239; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.rpq-box h2 { margin: 4px 0 10px; text-align: center; font-size: 18px; color: #0f172a; }
.rpq-box .rpq-body { background: #fff; border: 1px solid #fecdd3; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.9; color: #334155; box-shadow: 0 2px 8px rgba(225,29,72,.08); }
.rpq-box .rpq-body b { color: #e11d48; }
.rpq-box .rpq-q { text-align: center; font-size: 14.5px; font-weight: 700; color: #0f172a; margin: 12px 0 12px; }
.rpq-btns { display: flex; gap: 10px; }
.rpq-btns .btn { flex: 1; margin: 0; }
.rpq-btns .rpq-no { background: #fff; border: 1.5px solid var(--line); color: #64748b; box-shadow: 0 3px 0 #e2e8f0; }
.rpq-btns .rpq-yes { background: linear-gradient(180deg,#ff6b81,#e11d48); border-color: #e11d48; box-shadow: 0 4px 0 #9f1239, 0 8px 16px rgba(225,29,72,.35); font-weight: 800; }
.rpq-btns .rpq-yes:active, .rpq-btns .rpq-no:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }

/* ---------- 可点热区补足（只扩透明热区，不改视觉尺寸、不影响布局） ----------
   实测小屏可点元素视觉高度：☆收藏 28px、我的发布操作行按钮 26px、chip 33px、browse/admin 的 tab 31~38px。
   用 ::after 在元素内部撑透明热区：getBoundingClientRect() 不变 → 既有排版与像素断言全部不受影响。
   ⚠ 外扩量必须 ≤ 相邻元素纵向间隙的一半，否则会抢到隔壁的点击（实测 chip 行距只有 8px，
     44px 热区会在中缝抢走下一行约 3px 的点击；.tabs 是 overflow:auto 横向滚动容器，
     热区会被直接裁剪，故 .tab 无法外扩）。每个选择器的取值都按实测间隙定，不要统一写 44px。 */
.btn { position: relative; }
.btn::after {                       /* 34px 常规小按钮：相邻 .row gap 8~12px → 上下各 5px 安全 */
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; max-height: calc(100% + 10px); transform: translateY(-50%);
}
.act-row .btn.sm::after {            /* 我的发布操作行按钮仅 26px，但上下各有 130px 空间 → 给满 44px */
  max-height: 44px;
}
.chip { position: relative; }
.chip::after {                       /* chip 行距只有 8px → 上下各 3px（39px），再多就抢下一行 */
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 39px; max-height: calc(100% + 6px); transform: translateY(-50%);
}
.fav-btn { position: relative; }
.fav-btn::after {                    /* ☆ 28×28 → 四向各扩 8px 补到 44×44（落在卡片留白里，不压标题） */
  content: ''; position: absolute; left: -8px; right: -8px; top: -8px; bottom: -8px;
}
/* 底部导航 .tabbar .ti 实测 45px，本身已达标，无需补 */

/* ---------- 顶栏「当前登录账号」小徽标（browse 顶栏）：只在已登录时出现 ----------
   未登录时元素保持 display:none，顶栏与登录前完全一致。max-width 让超长账号名省略，不挤走右侧条数。 */
header.app .acct {
  display: none; align-items: center; max-width: 38%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.30);
  padding: 3px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 700; opacity: 1;
  /* 关键：行高必须显式压到 18px（18+6+2=26px），否则默认 18.6px 行盒会让它比 h1(26.34px) 还高，
     顶栏整体被撑高约 0.25px —— 登录前后顶栏高度必须一模一样。 */
  line-height: 18px;
}