﻿/* ============================================================
   Orecord · 产业版 / 升级 / 经纪人 共享样式 v1.0
   复用主站设计 token：印章红 #9A2415 · 米白底 #FCFBF8 · 棕字 #141311
   ============================================================ */

:root {
  --bg: #FCFBF8;
  --bg-card: #FFFFFF;
  --bg-soft: #F6EBD7;
  --bg-deep: #141311;
  --bg-side: #F3F1EA;
  --line: #E5E1D8;
  --line-strong: #cfc9bc;
  --ink: #141311;
  --ink-2: #46413a;
  --ink-3: #7e776b;
  --ink-4: #b0aca4;
  --seal: #9A2415;
  --seal-2: #b42b1b;
  --gold: #C97B2A;
  --gold-soft: #e0c083;
  --olive: #5A7D4F;
  --olive-soft: #C9D6C2;
  --serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  --shadow-sm: 0 1px 2px rgba(20,19,17,.04), 0 2px 6px rgba(20,19,17,.04);
  --shadow-md: 0 2px 6px rgba(20,19,17,.06), 0 8px 24px rgba(20,19,17,.08);
  --shadow-lg: 0 8px 30px rgba(20,19,17,.10), 0 24px 80px rgba(20,19,17,.10);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --maxw: 1200px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--seal); }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
em { font-style: normal; }
.serif { font-family: var(--serif); }

/* ===== 顶栏 ===== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252,251,248,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: var(--maxw); margin: 0 auto;
  height: 56px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .seal { width: 28px; height: 28px; flex: 0 0 28px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.brand-slogan {
  font-size: 11px; color: var(--ink-3);
  letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 360px;
  margin-top: 2.6px;
}
.bar-spacer { flex: 1; }
.bar-actions { display: flex; align-items: center; gap: 4px; }
/* tb99-two-row-nav (P1) 第 99 轮规格统一：base .bar-link 对齐 rail 项的
   「36px 高 + 999px 胶囊 + 13.5px 字」—— 同一行里不再出现胶囊与小方片混排。
   ⚠ 只改 base：.industry 本就是 999px；.broker 有自己的 padding，
      继续做「描边小方片」的操作语义（line 98 覆盖）。 */
.bar-link {
  padding: 0 14px; height: 36px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  font-size: 13.5px; color: var(--ink-2);
  position: relative;
}
.bar-link:hover { background: var(--bg-soft); color: var(--ink); }
.bar-link.industry {
  background: var(--bg-deep); color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
}
.bar-link.industry:hover { background: var(--ink); color: var(--gold-soft); }
.bar-link.industry .lock {
  width: 12px; height: 12px;
  display: inline-block;
  background: var(--gold-soft);
}
.bar-link.broker {
  background: transparent;
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px;
}
.bar-link.broker:hover { border-color: var(--ink); }
.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  background: var(--bg-card);
}
.user-chip .avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--seal); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.user-chip.role-signed { border-color: var(--gold); background: #fdf6e3; }
.user-chip.role-signed .avatar { background: var(--gold); }

/* dvn-inline-nav:81 */
/* 顶栏内联导航（第 81 轮）。
   .dvn-rail 默认（移动端）不显示，PC 由**各页内联样式**打开 ——
   各页顶栏底色/字色不同，共享文件里没法给出一套好看的配色，故这里只管结构与「让位」。
   .dvn-acts 只是把右侧操作区包起来，让居中导航的栅格三栏稳定。
   ⚠ .bar-spacer 的 flex:1 会在 PC 上把全部空档吃光，导航列因此永远偏左 ——
     所以这里默认（PC 也生效）就把它按「不参与伸展」处理，窄屏直接退场。
     真要「左侧导航 + 右推空白」的老形态（本页项目里没有这样的页）才需要 flex:1 回来。 */
.bar-spacer-w { display: flex; flex: 0 0 auto; }
.bar-spacer-w .bar-spacer { flex: 0 0 auto; }
@media (max-width: 600px) { .bar-spacer-w { display: none; } }
/* tb98-spacer-601-900 (第 98 轮·方案 A) 601–900px 的真空带：.dvn-rail 在此区间
   display:none，没人吃富余 → .dvn-acts 被顶到品牌旁边、右侧留大空带
   （实测 @900 距内容盒右沿 433.4px / @720 253.4px / @601 134.4px）。
   只在这一段把「让位件」放权吃富余，操作区即贴回内容盒右沿。
   🔴 绝不可全局放权：≥901 靠 .dvn-rail 的 auto 左边距吃富余（第 97 轮），
      空档件同时吃会「auto 对 auto 平分」把导航列拽走，违反 _tab_sync 不变量；
      ≤600 空档件已 display:none。故此区间是唯一可安全放权的地带。 */
@media (min-width: 601px) and (max-width: 900px) {
  .bar-spacer-w { flex: 1 1 auto; }
  .bar-spacer-w .bar-spacer { flex: 1 1 auto; }
}
.dvn-rail { display: none; }
.dvn-acts { display: flex; align-items: center; gap: 4px;margin-left: auto; }

/* ===== Footer ===== */
.site-foot {
  margin-top: 60px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 28px 0;
}
.site-foot-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.site-foot-links {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 12px;
}
.site-foot-links a { color: var(--ink-3); }
.site-foot-legal {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11px; color: var(--ink-4);
}

/* ===== 通用 ===== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all .2s;
  white-space: nowrap;
}
.btn-primary { background: var(--seal); color: #fff; border-color: var(--seal); }
.btn-primary:hover { background: var(--seal-2); border-color: var(--seal-2); color: #fff; }
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold:hover { background: #a85b18; color: #fff; }
.btn-dark { background: var(--bg-deep); color: #fff; border-color: var(--bg-deep); }
.btn-dark:hover { background: #000; color: var(--gold-soft); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); background: var(--bg-card); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover { color: var(--seal); }
.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-soft);
  color: var(--ink-2);
  border: 1px solid transparent;
}
.badge-seal { background: #fdf7f5; color: var(--seal); border-color: #f3cdd5; }
.badge-gold { background: #fdf6e3; color: var(--gold); border-color: var(--gold-soft); }
.badge-olive { background: #f5f8f3; color: var(--olive); border-color: var(--olive-soft); }
.badge-ink { background: var(--bg-deep); color: var(--gold-soft); }
.badge-private {
  background: var(--bg-deep); color: var(--gold-soft);
  letter-spacing: .12em;
  padding: 3px 9px;
}
.kicker {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--seal);
  font-weight: 600;
  text-transform: uppercase;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .2em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--ink-4);
}
.h1 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 16px;
}
.h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 12px;
}
.h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
}
.lead { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }
.divider {
  height: 1px; background: var(--line);
  border: none; margin: 24px 0;
}
/* ============================================================
   产业版 Hero / 服务目录 / 价值主张
   ============================================================ */
.ind-hero {
  position: relative;
  background: linear-gradient(135deg, #141311 0%, #2a241d 50%, #1a1814 100%);
  color: #FCFBF8;
  padding: 80px 0 60px;
  overflow: hidden;
}
.ind-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,123,42,.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(154,36,21,.15) 0%, transparent 45%);
  pointer-events: none;
}
.ind-hero-in {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.ind-hero h1 {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 12px 0 18px;
  color: #FCFBF8;
}
.ind-hero h1 em { color: var(--gold-soft); font-style: normal; }
.ind-hero .lead {
  font-size: 17px; color: rgba(252,251,248,.78);
  margin-bottom: 28px; max-width: 560px;
}
.ind-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(252,251,248,.15);
}
.ind-hero-stat .v {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--gold-soft);
  letter-spacing: -.01em;
}
.ind-hero-stat .l { font-size: 12px; color: rgba(252,251,248,.6); letter-spacing: .04em; }
.ind-hero-card {
  background: rgba(252,251,248,.04);
  border: 1px solid rgba(252,251,248,.12);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(8px);
}
.ind-hero-card h3 {
  font-family: var(--serif);
  font-size: 20px; margin: 0 0 8px;
  color: #FCFBF8;
}
.ind-hero-card p { color: rgba(252,251,248,.7); font-size: 13px; margin: 0 0 20px; }
.ind-hero-card .gate-input {
  width: 100%; padding: 12px 14px;
  background: rgba(252,251,248,.08);
  border: 1px solid rgba(252,251,248,.18);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14px;
  margin-bottom: 12px;
  font-family: inherit;
}
.ind-hero-card .gate-input:focus { outline: none; border-color: var(--gold-soft); }
.ind-hero-card .gate-input::placeholder { color: rgba(252,251,248,.4); }
.ind-hero-card .row { display: flex; gap: 8px; }
.ind-hero-card .row .btn { flex: 1; }

/* 服务目录 */
.svc-section { padding: 72px 0; background: var(--bg); }
.svc-section .head { text-align: center; margin-bottom: 48px; }
.svc-section .head .kicker { display: inline-block; margin-bottom: 12px; }
.svc-section .head .h2 { max-width: 720px; margin: 0 auto 12px; }
.svc-section .head .lead { max-width: 640px; margin: 0 auto; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.svc-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: all .25s;
  position: relative;
}
.svc-card:hover {
  border-color: var(--seal);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.svc-card.core { border-color: var(--gold); background: #fefcf6; }
.svc-card .pri {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; padding: 2px 8px;
  border-radius: 999px;
  background: var(--seal); color: #fff;
  letter-spacing: .08em;
}
.svc-card.core .pri { background: var(--gold); }
.svc-card .ico {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  color: var(--seal);
}
.svc-card.core .ico { background: #fdf6e3; color: var(--gold); }
.svc-card h3 {
  font-family: var(--serif);
  font-size: 17px; font-weight: 600;
  margin: 0 0 4px;
}
.svc-card .sub { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.svc-card .desc { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.6; }
.svc-card .fee {
  font-size: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--ink-3);
}
.svc-card .fee b { color: var(--seal); font-weight: 600; }

/* 价值主张 */
.value-band { background: var(--bg-soft); padding: 60px 0; }
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.value-item .n {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--seal);
  line-height: 1;
  margin-bottom: 8px;
}
.value-item h4 { margin: 0 0 6px; font-size: 15px; }
.value-item p { font-size: 13px; color: var(--ink-3); margin: 0; line-height: 1.6; }

/* 资源池 */
.tp-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.tp-toolbar .filter {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.tp-toolbar .filter.on { background: var(--bg-deep); color: #fff; border-color: var(--bg-deep); }
.tp-toolbar .filter:hover { border-color: var(--ink); }
.tp-toolbar .spacer { flex: 1; }
.tp-toolbar .sort {
  font-size: 12px;
  color: var(--ink-3);
}
.tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.tp-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: all .2s;
  cursor: pointer;
  display: block;
}
.tp-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}
.tp-card .hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.tp-card .pi { display: flex; gap: 12px; align-items: center; }
.tp-card .pi .ava {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--seal);
  font-weight: 600;
}
.tp-card .pi h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-family: var(--serif);
}
.tp-card .pi .aff { font-size: 12px; color: var(--ink-3); }
.tp-card .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 14px;
}
.tp-card .break {
  background: #fdf7f5;
  border-left: 3px solid var(--seal);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tp-card .meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.tp-card .meta .v {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1;
}
.tp-card .meta .l {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
/* ============================================================
   详情页 / 撮合 / 订单
   ============================================================ */
.td-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  margin-top: 24px;
}
.td-main {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.td-aside { position: sticky; top: 80px; align-self: start; }
.td-profile {
  display: flex; gap: 20px; align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.td-profile .ava-lg {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 36px;
  color: var(--seal);
}
.td-profile h1 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 4px;
}
.td-profile .aff { color: var(--ink-3); font-size: 14px; margin-bottom: 8px; }
.td-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.td-stats .item .v {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--seal);
  line-height: 1.1;
}
.td-stats .item .l { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.td-section { margin-bottom: 28px; }
.td-section h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.td-section h3::before {
  content: ""; width: 4px; height: 16px;
  background: var(--seal);
  border-radius: 2px;
}
.td-paper {
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.td-paper:last-child { border-bottom: none; }
.td-paper .ttl { font-size: 14px; font-weight: 500; line-height: 1.5; margin-bottom: 4px; }
.td-paper .meta { font-size: 12px; color: var(--ink-3); }
.td-svc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.td-svc-list .chip {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: var(--bg-card);
  text-align: center;
}
.td-side-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.td-side-card h4 {
  font-family: var(--serif);
  font-size: 16px;
  margin: 0 0 8px;
}
.td-side-card .price {
  background: var(--bg-soft);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-2);
  margin: 12px 0 16px;
}
.td-side-card .price b { color: var(--seal); font-size: 18px; }
.td-side-card .btn { width: 100%; margin-bottom: 8px; }
.td-side-card .nda-hint {
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 8px;
}
.td-side-card .broker-card {
  background: var(--bg-deep);
  color: #fff;
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 14px;
}
.td-side-card .broker-card .role {
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--gold-soft);
  margin-bottom: 4px;
}
.td-side-card .broker-card .nm {
  font-family: var(--serif);
  font-size: 16px;
}
.td-side-card .broker-card .desc {
  font-size: 11px;
  color: rgba(252,251,248,.6);
  margin-top: 6px;
}

/* 撮合 */
.match-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  margin-top: 24px;
}
.match-form {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.match-form h2 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 6px;
}
.match-form .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 28px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.field label .req { color: var(--seal); }
.field input, .field select, .field textarea {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--seal);
}
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: 11px; color: var(--ink-3); }
.match-side .preview-card {
  background: var(--bg-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky; top: 80px;
}
.match-side .preview-card h4 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold-soft);
  margin: 0 0 8px;
}
.match-side .preview-card p { font-size: 12px; color: rgba(252,251,248,.6); margin: 0 0 16px; }
.match-side .preview-card ul { padding-left: 20px; font-size: 13px; color: rgba(252,251,248,.85); margin: 0; }
.match-side .preview-card li { margin-bottom: 6px; }

/* 订单 */
.orders-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  overflow-x: auto;
}
.orders-tabs .tab {
  padding: 10px 18px;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.orders-tabs .tab.on {
  color: var(--seal);
  border-bottom-color: var(--seal);
  font-weight: 500;
}
.orders-tabs .tab .cnt {
  font-size: 11px;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  color: var(--ink-3);
}
.order-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.order-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-soft);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.order-table td {
  padding: 14px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.order-table tr:last-child td { border-bottom: none; }
.order-table tr:hover { background: #fafaf5; }
.order-table .no { font-family: var(--sans); color: var(--ink-3); font-size: 12px; }
.order-table .amt { font-family: var(--serif); color: var(--seal); font-weight: 600; }
.status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pending { background: #fdf6e3; color: #a9701a; }
.status-signed { background: #eaf6ee; color: var(--olive); }
.status-active { background: #eaf6ee; color: var(--olive); }
.status-done { background: #eaeef2; color: #46413a; }
.status-settled { background: var(--bg-soft); color: var(--ink-2); }
.status-cancel { background: #fdf7f5; color: var(--seal); }
.status-paid { background: #eaf6ee; color: var(--olive); }
/* ============================================================
   升级签约页
   ============================================================ */
.up-hero {
  background: linear-gradient(135deg, #fdf7f5 0%, #fdf6e3 100%);
  padding: 64px 0 48px;
  text-align: center;
}
.up-hero .h1 { font-size: 44px; max-width: 760px; margin: 0 auto 16px; }
.up-hero .lead { max-width: 600px; margin: 0 auto 24px; }
.up-stats {
  display: flex; justify-content: center; gap: 48px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.up-stats .v {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--seal);
}
.up-stats .l { font-size: 12px; color: var(--ink-3); }
.up-steps {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: -36px auto 0;
  max-width: 920px;
  position: relative; z-index: 3;
  box-shadow: var(--shadow-md);
}
.up-steps .steps-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: start;
}
.up-steps .step { text-align: center; position: relative; }
.up-steps .step .num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  border: 2px solid var(--line);
}
.up-steps .step.done .num {
  background: var(--olive); color: #fff; border-color: var(--olive);
}
.up-steps .step.active .num {
  background: var(--seal); color: #fff; border-color: var(--seal);
  box-shadow: 0 0 0 4px rgba(154,36,21,.15);
}
.up-steps .step .lbl { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.up-section { padding: 64px 0; }
.up-section.alt { background: var(--bg-soft); }
.up-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.up-flow .fc {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
}
.up-flow .fc .n {
  position: absolute; top: 16px; right: 18px;
  font-family: var(--serif);
  font-size: 32px;
  color: var(--bg-soft);
  font-weight: 700;
  line-height: 1;
}
.up-flow .fc h4 {
  font-family: var(--serif);
  font-size: 16px; margin: 0 0 8px;
}
.up-flow .fc p { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.6; }
.up-form-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  max-width: 720px;
  margin: 0 auto;
}
.up-form-card h2 {
  font-family: var(--serif);
  font-size: 24px;
  margin: 0 0 8px;
}
.up-form-card .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 24px; }
.up-checklist {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin: 24px auto 0;
}
.up-checklist .ck {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.up-checklist .ck .ck-ico {
  flex: 0 0 24px; height: 24px;
  border-radius: 50%;
  background: var(--olive-soft);
  color: var(--olive);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.up-checklist .ck .ct { flex: 1; }
.up-checklist .ck .ct h5 { margin: 0 0 4px; font-size: 14px; }
.up-checklist .ck .ct p { margin: 0; font-size: 12px; color: var(--ink-3); }

/* ============================================================
   经纪人后台
   ============================================================ */
.bk-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  margin-top: 24px;
}
.bk-side {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  position: sticky; top: 80px;
  align-self: start;
}
.bk-side .prof {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.bk-side .prof .ava {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--gold-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 8px;
}
.bk-side .prof h4 { margin: 0; font-size: 14px; }
.bk-side .prof .role { font-size: 11px; color: var(--gold); letter-spacing: .15em; }
.bk-side .nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 2px;
  cursor: pointer;
}
.bk-side .nav-item:hover { background: var(--bg-soft); color: var(--ink); }
.bk-side .nav-item.on {
  background: var(--bg-deep);
  color: var(--gold-soft);
}
.bk-side .nav-item .cnt {
  margin-left: auto;
  font-size: 11px;
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--ink-3);
}
.bk-side .nav-item.on .cnt {
  background: rgba(252,251,248,.15);
  color: var(--gold-soft);
}
.bk-main { min-width: 0; }
.bk-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap; gap: 12px;
}
.bk-toolbar h2 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0;
}
.bk-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.bk-stat {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.bk-stat .l { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.bk-stat .v {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 2px;
}
.bk-stat .d { font-size: 11px; color: var(--olive); }
.bk-stat .d.dn { color: var(--seal); }
.bk-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.bk-card-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-soft);
}
.bk-card-h h4 { margin: 0; font-size: 14px; font-family: var(--serif); }
.bk-card-b { padding: 8px 0; }
.bk-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 80px;
  gap: 12px;
  padding: 14px 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.bk-row:last-child { border-bottom: none; }
.bk-row.head {
  background: #fafaf5;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
  padding: 10px 18px;
}
.bk-row .pi { display: flex; align-items: center; gap: 10px; }
.bk-row .pi .ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--seal);
}
.bk-row .nm { font-weight: 500; }
.bk-row .sub { font-size: 11px; color: var(--ink-3); }
/* ============================================================
   IM / NDA / Toast / 响应式
   ============================================================ */
.im-mask {
  position: fixed; inset: 0;
  background: rgba(20,19,17,.5);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
}
.im-mask.on { display: flex; }
.im-box {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 600px;
  max-width: 92vw;
  max-height: 80vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.im-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.im-head h4 { margin: 0; font-size: 14px; }
.im-head .x { background: none; border: none; font-size: 18px; color: var(--ink-3); cursor: pointer; }
.im-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: var(--bg-soft);
}
.im-msg {
  margin-bottom: 14px;
  display: flex; gap: 10px;
}
.im-msg.me { flex-direction: row-reverse; }
.im-msg .ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--seal);
  flex: 0 0 32px;
}
.im-msg.me .ava { background: var(--seal); color: #fff; }
.im-msg .bbl {
  background: #fff;
  padding: 10px 14px;
  border-radius: var(--radius);
  max-width: 70%;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--line);
}
.im-msg.me .bbl { background: var(--seal); color: #fff; border-color: var(--seal); }
.im-msg .meta { font-size: 10px; color: var(--ink-4); margin-top: 4px; }
.im-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px;
}
.im-foot input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
}
.im-foot input:focus { outline: none; border-color: var(--seal); }
.im-warn {
  background: #fdf7f5;
  border: 1px solid #f3cdd5;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--seal);
  margin: 0 18px 8px;
  display: flex; align-items: center; gap: 6px;
}

.nda-mask { position: fixed; inset: 0; background: rgba(20,19,17,.6); display: none; align-items: center; justify-content: center; z-index: 110; }
.nda-mask.on { display: flex; }
.nda-box {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 560px;
  max-width: 92vw;
  padding: 32px;
  max-height: 88vh;
  overflow-y: auto;
}
.nda-box h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; }
.nda-box .body {
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
  max-height: 280px;
  overflow-y: auto;
  margin: 16px 0;
}
.nda-box .ck-row {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 12px 0;
  font-size: 13px;
}
.nda-box .ck-row input { margin-top: 3px; }

.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--bg-deep); color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 200;
  opacity: 0;
  transition: all .3s;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 响应式 */
@media (max-width: 960px) {
  .ind-hero-in { grid-template-columns: 1fr; }
  .ind-hero h1 { font-size: 38px; }
  .td-layout, .match-layout { grid-template-columns: 1fr; }
  .bk-layout { grid-template-columns: 1fr; }
  .bk-side { position: static; }
  .up-steps .steps-row { grid-template-columns: repeat(3, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .bk-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bk-stats { grid-template-columns: repeat(2, 1fr); }
  .td-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .topbar-in { padding: 0 16px; gap: 8px; }
  .brand-slogan { display: none; }
  .wrap { padding: 0 16px; }
  .ind-hero h1 { font-size: 28px; }
  .ind-hero-stats { grid-template-columns: 1fr 1fr; }
  .h1 { font-size: 32px; }
  .up-flow { grid-template-columns: 1fr; }
}