/* ============================================================================
 * 房好用官网 —— 共享样式（全站唯一一份）
 * 依赖：无。不引任何外部 CDN（国内访问 + 避免第三方字体阻塞）。
 * ⚠️ 改品牌色的位置只有 :root 里那 3 个变量，其它地方一律引用变量。
 * ========================================================================== */

:root {
  --brand: #1565c0;
  --brand-deep: #0d47a1;
  --brand-soft: #e8f1fb;
  --brand-ring: rgba(21, 101, 192, .12);
  --accent: #ff8f3d;

  --ink: #0f172a;
  --ink-2: #45536b;
  --ink-3: #7d8aa1;
  --line: #e2e8f0;
  --bg: #ffffff;
  --bg-soft: #f5f8fc;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow: 0 6px 20px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-lg: 0 18px 50px rgba(13, 71, 161, .14);

  --wrap: 1120px;
  --header-h: 64px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ── 顶栏 ───────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(15, 23, 42, .05);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .3px;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand:hover { color: var(--ink); }
.brand .mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(21, 101, 192, .28);
}
.brand .mark svg { width: 17px; height: 17px; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  flex: 1 1 auto;
}
.nav a {
  position: relative;
  padding: 8px 13px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { color: var(--ink); background: var(--bg-soft); }
.nav a.is-active { color: var(--brand); font-weight: 600; }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* ── 按钮 ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(21, 101, 192, .26);
}
.btn-primary:hover { background: var(--brand-deep); color: #fff; box-shadow: 0 8px 22px rgba(13, 71, 161, .3); }

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { color: var(--brand); border-color: #bcd4ef; background: #fff; }

.btn-sm { padding: 8px 16px; font-size: 14px; border-radius: 9px; }

.btn[aria-disabled="true"] {
  background: #eef2f7;
  color: var(--ink-3);
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── 移动端菜单 ─────────────────────────────────────────────────────────── */

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.menu-toggle span {
  display: block;
  position: relative;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.menu-toggle span::before { top: -5px; }
.menu-toggle span::after { top: 5px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ── 首页 Hero ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 56px;
  text-align: center;
  background:
    radial-gradient(900px 380px at 50% -80px, var(--brand-soft), transparent 70%),
    linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(21, 101, 192, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21, 101, 192, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d6e5f7;
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 143, 61, .18);
}

.hero h1 {
  margin: 20px auto 0;
  max-width: 780px;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.28;
  letter-spacing: -.4px;
  font-weight: 800;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--brand), #2f8ae0 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  margin: 18px auto 0;
  max-width: 620px;
  color: var(--ink-2);
  font-size: 17px;
}
.hero-cta {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 13px;
}

.hero-stats {
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 860px;
}
.hero-stats div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  box-shadow: var(--shadow-sm);
}
.hero-stats b { display: block; font-size: 20px; line-height: 1.3; }
.hero-stats span { color: var(--ink-3); font-size: 13px; }

/* ── 区块标题 ───────────────────────────────────────────────────────────── */

.section { padding: 64px 0; }
.section.tint { background: var(--bg-soft); }

.section-head { text-align: center; max-width: 660px; margin: 0 auto 36px; }
.section-head .kicker {
  display: inline-block;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.section-head h2 {
  margin: 10px 0 0;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.34;
  letter-spacing: -.3px;
}
.section-head p { margin: 12px 0 0; color: var(--ink-2); }

/* ── 瀑布流 ─────────────────────────────────────────────────────────────── */

/*
 * ⭐ 真正的瀑布流用 CSS 多列：卡片不等高时，浏览器按列填充，天然错落。
 *    · column-count 控制列数，卡片必须 break-inside: avoid 才不会被劈开；
 *    · 想加卡片只管往 HTML 里加 <article>，不需要改任何布局代码。
 *    ⚠️ 多列是"先填满第一列再填第二列"，所以**视觉顺序 ≠ 源码顺序**；
 *       要严格按阅读顺序就不该用多列（那是 grid 的活）。
 */
.masonry {
  column-count: 3;
  column-gap: 18px;
}
.masonry > * {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 18px;
  display: block;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: #cfe1f5;
}

.card .icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  background: var(--brand-soft);
  margin-bottom: 14px;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.45;
}
.card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.card ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.card ul li {
  font-size: 12.5px;
  color: var(--brand-deep);
  background: var(--brand-soft);
  border-radius: 7px;
  padding: 3px 9px;
  line-height: 1.5;
}

.card.hl {
  background: linear-gradient(160deg, #12539f, #0d47a1);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.card.hl h3 { color: #fff; }
.card.hl p { color: rgba(255, 255, 255, .84); }
.card.hl .icon { background: rgba(255, 255, 255, .16); }
.card.hl ul li { background: rgba(255, 255, 255, .16); color: #fff; }

.card.quote {
  background: #fffaf3;
  border-color: #ffe2c4;
}
.card.quote p { color: #7a5230; font-size: 15px; }
.card.quote .who { margin-top: 12px; color: #a9743f; font-size: 13px; }

/* ── 三步开始 ───────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -14px;
  left: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 4px 12px rgba(21, 101, 192, .3);
}
.step h3 { margin: 10px 0 6px; font-size: 16px; }
.step p { margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* ── 价格预告 ───────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 860px;
  margin: 0 auto;
}
.plan {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.plan.featured {
  border-color: #bcd4ef;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.plan .tag {
  position: absolute;
  top: -11px;
  right: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.plan h3 { margin: 0; font-size: 17px; }
.plan .price {
  margin: 12px 0 4px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.5px;
}
.plan .price small { font-size: 14px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.plan .desc { margin: 0 0 16px; color: var(--ink-3); font-size: 13.5px; }
.plan ul { margin: 0 0 20px; padding: 0; list-style: none; }
.plan ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--ink-2);
  font-size: 14.5px;
}
.plan ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* ── 通用：占位页 ───────────────────────────────────────────────────────── */

.page-head {
  padding: 52px 0 34px;
  background:
    radial-gradient(700px 300px at 30% -60px, var(--brand-soft), transparent 72%),
    #fff;
  border-bottom: 1px solid var(--line);
}
.page-head .kicker {
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.page-head h1 {
  margin: 10px 0 0;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.32;
  letter-spacing: -.3px;
}
.page-head p { margin: 12px 0 0; color: var(--ink-2); max-width: 680px; }

.notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fffaf3;
  border: 1px solid #ffe2c4;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 30px auto;
  /* ⭐ 与下面 860 宽的两栏卡片对齐；页面上有 .faq(820) 时也仍然居中，不会左边一截。 */
  max-width: 860px;
}
.notice .n-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ffe9d3;
  display: grid;
  place-items: center;
  font-size: 17px;
}
.notice h3 { margin: 0 0 4px; font-size: 15.5px; }
.notice p { margin: 0; color: #7a5230; font-size: 14.5px; }

.todo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.todo {
  background: #fff;
  border: 1px dashed #cbd8e8;
  border-radius: var(--radius-sm);
  padding: 18px;
}
.todo .t-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}
.todo .t-head .pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  background: #eef2f7;
  border-radius: 999px;
  padding: 1px 8px;
}
.todo ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.todo ul li { margin-bottom: 4px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.faq details[open] { border-color: #cfe1f5; }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--brand);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; }

/* ── 页脚 ───────────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: 0;
  padding: 48px 0 26px;
  background: #0e1726;
  color: #93a3b8;
  font-size: 14px;
}
.site-footer a { color: #c3d0e0; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-footer .brand { color: #fff; }
.site-footer .about { margin: 14px 0 0; color: #8fa0b6; max-width: 300px; line-height: 1.75; }
.footer-col h4 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: #75869c;
  font-size: 13px;
}
.footer-bottom .ph { color: #ffb98a; }

/* ── 滚动进场（JS 加 .reveal，无 JS 时不隐藏）──────────────────────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover { transform: none; }
}

/* ── 响应式 ─────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .masonry { column-count: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-toggle { display: grid; }
  .site-header .wrap { gap: 12px; }
  .brand { margin-right: auto; }

  /* 展开后的移动菜单：绝对定位贴在顶栏下方 */
  .nav.is-open {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(15, 23, 42, .1);
  }
  .nav.is-open a { padding: 12px 10px; font-size: 15.5px; }
  .nav.is-open a.is-active::after { display: none; }

  .hero { padding: 52px 0 44px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .plans { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
}

@media (max-width: 620px) {
  .masonry { column-count: 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; }
}

/* ============================================================================
 * 账号中心（/account/）—— 登录 / 注册 / 忘记密码表单
 * ========================================================================== */

.auth-card {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 24px 24px;
}

.auth-tabs {
  display: flex;
  gap: 5px;
  background: var(--bg-soft);
  padding: 5px;
  border-radius: 12px;
  margin-bottom: 22px;
}
.auth-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 9px 0;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.auth-tabs button:hover { color: var(--ink); }
.auth-tabs button.is-active {
  background: #fff;
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.form-row { margin-bottom: 14px; }
.form-row > label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.form-row .opt {
  font-weight: 500;
  color: var(--ink-3);
  font-size: 12.5px;
  margin-left: 4px;
}

.input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #a9b4c4; }
.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.input:disabled { background: #f6f8fb; color: var(--ink-3); }

.form-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.btn-block { width: 100%; margin-top: 6px; }

.auth-msg {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
}
.auth-msg.is-err { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.auth-msg.is-ok { background: #ecfdf5; color: #067647; border: 1px solid #a7f3d0; }

.auth-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.8;
}

/* 凭据二选一（身份证 / 邮箱）切换 */
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 12px;
}
.seg button {
  border: 0;
  background: #fff;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
}
.seg button.is-active { background: var(--brand); color: #fff; }

/* 已登录面板 */
.account-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 26px;
}
.account-head { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  flex: 0 0 auto;
}
.account-head h2 { margin: 0; font-size: 19px; }
.account-head p { margin: 3px 0 0; color: var(--ink-3); font-size: 13.5px; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }
.pill-tag {
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.pill-tag.muted { background: #eef2f7; color: var(--ink-2); }

.account-rows { margin: 20px 0 0; border-top: 1px solid var(--line); }
.account-rows div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.account-rows span:first-child { color: var(--ink-3); }
.account-rows span:last-child { color: var(--ink); font-weight: 500; text-align: right; word-break: break-all; }

.account-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 520px) {
  .grid-2 { grid-template-columns: 1fr; }
  .auth-card, .account-card { padding: 22px 18px; }
}

/* ============================================================================
 * 账号中心 · 左右两栏（6.4.50：左侧导航 工作台/房源/客源/记账/消息/我的）
 *
 * ⚠️ 只加新类，**不动上面任何既有规则** —— site.css 是全站共用的一份，
 *    /account/ 之外的页面（首页/下载/价格/帮助）绝不能因为这些改动变样。
 * ========================================================================== */

/* 仅供屏幕阅读器：保留 h1 但视觉上不占位（两栏布局不需要再压一个大标题） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.acct-section { padding: 30px 0 68px; background: var(--bg-soft); }

.acct-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ⭐ 未登录：**不显示左侧导航**，只留右侧登录卡居中。
   ⚠️ 用 `display:none` 而不是隐藏面板 —— 侧栏里的用户块/下载按钮在未登录时没有意义，
      留着反而让人以为"登录后这里会有东西"却点不动。 */
.acct-shell.is-guest { grid-template-columns: minmax(0, 1fr); }
.acct-shell.is-guest .acct-side { display: none; }

/* ── 左：导航 ──────────────────────────────────────────────────────────── */

.acct-side {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  /* ⚠️ 必须显式 min-width:0 —— 栅格子项默认 min-width:auto，
     窄屏下横向导航条（nowrap + overflow-x）会把整个页面撑出横向滚动。 */
  min-width: 0;
}

.acct-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.acct-user .ava {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  flex: 0 0 auto;
}
.acct-user .who { min-width: 0; }
.acct-user .who b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-user .who span { font-size: 12.5px; color: var(--ink-3); }

.acct-nav { display: flex; flex-direction: column; gap: 2px; }
.acct-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, color .15s ease;
}
.acct-nav button svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .7; }
.acct-nav button:hover { background: var(--bg-soft); color: var(--ink); }
.acct-nav button.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.acct-nav button.is-active svg { opacity: 1; }
.acct-nav button .lock { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-weight: 500; }

.acct-side-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.acct-side-foot .btn { width: 100%; justify-content: center; }

/* ── 右：内容 ──────────────────────────────────────────────────────────── */

.acct-main { min-width: 0; }

.acct-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 24px 26px;
}
.acct-panel[hidden] { display: none; }
.acct-panel h2 { margin: 0 0 5px; font-size: 19px; letter-spacing: .2px; }
.acct-panel .sub { margin: 0 0 20px; color: var(--ink-3); font-size: 13.5px; }

/* 面板内的小节标题 */
.panel-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.panel-h:first-of-type { margin-top: 0; }
.panel-h .hint { font-weight: 400; font-size: 12.5px; color: var(--ink-3); }

/* 三格统计 */
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  background: var(--bg-soft);
}
.stat .k { font-size: 12.5px; color: var(--ink-3); }
.stat .v { margin-top: 3px; font-size: 17px; font-weight: 700; color: var(--ink); }
.stat .v.is-warn { color: #c2410c; }
.stat .v.is-off { color: var(--ink-3); }

/* 功能开关清单（12 项，来自服务端 features） */
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.feat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 13.5px;
  color: var(--ink-3);
}
.feat .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 16px;
  background: #e2e8f0;
  color: #94a3b8;
}
.feat.on { color: var(--ink); }
.feat.on .dot { background: var(--brand); color: #fff; }

/* 占位面板（房源/客源/记账/消息 网页版暂未开放） */
.ph-box {
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
  padding: 22px 20px;
  text-align: center;
}
.ph-box .ph-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand);
}
.ph-box h3 { margin: 0 0 6px; font-size: 16px; }
.ph-box p { margin: 0 auto 14px; max-width: 420px; color: var(--ink-2); font-size: 13.5px; }

.ph-list { margin: 0 0 18px; padding: 0; list-style: none; text-align: left; max-width: 460px; margin-inline: auto; }
.ph-list li {
  position: relative;
  padding: 6px 0 6px 20px;
  font-size: 13.5px;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
}
.ph-list li:last-child { border-bottom: 0; }
.ph-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .55;
}

/* 账号信息行（复用既有 .account-rows 的观感，但去掉外面那层卡片） */
.acct-rows { margin: 0; border-top: 1px solid var(--line); }
.acct-rows div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.acct-rows span:first-child { color: var(--ink-3); }
.acct-rows span:last-child { color: var(--ink); font-weight: 500; text-align: right; word-break: break-all; }

.acct-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* 「请先登录」提示条（未登录时点左侧导航出现） */
.auth-tip {
  margin: 0 auto 14px;
  max-width: 460px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 13.5px;
  text-align: center;
}
.auth-tip[hidden] { display: none; }

/* ── 响应式：窄屏左栏折成横向可滑动的导航条 ───────────────────────────── */

@media (max-width: 860px) {
  .acct-section { padding: 20px 0 52px; }
  .acct-shell { grid-template-columns: 1fr; gap: 14px; }
  .acct-side { position: static; padding: 10px; }
  .acct-user { padding: 4px 4px 10px; margin-bottom: 6px; }
  .acct-nav {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .acct-nav button {
    flex: 0 0 auto;
    width: auto;
    padding: 8px 13px;
    font-size: 14px;
    white-space: nowrap;
  }
  .acct-nav button .lock { display: none; }
  .acct-side-foot { margin-top: 10px; padding-top: 10px; }
}

@media (max-width: 620px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .acct-panel { padding: 20px 16px 22px; }
}

/* ============================================================================
 * ⭐ 6.4.55 记账（/account/ → 记账）：二级导航 + 表单/表格
 * ⚠️ 全部为**追加**，不改动上面任何既有选择器（记账页以外的页面零影响）。
 * ⚠️ 栅格子项一律显式 `min-width: 0`：否则表格一宽就把整页撑出横向滚动条
 *    （`/account/` 之前就在左侧导航上踩过同一个坑）。
 * ========================================================================== */

/* ⭐ 6.4.56 二级导航**上移到左侧一级导航下面**（挂在「记账」这一项之后）：
   · 默认 `display:none` 收起，`.is-open` 才展开 —— 展开与否由 account-acc.js 跟着
     「记账」面板的 hidden 状态切换（点「记账」= 展开，切到别的面板 = 收起）；
   · 左侧那道 1px 竖线 + 缩进是**层级提示**：让它读起来是「记账」的子项，而不是另一组一级导航。
   ⚠️ 不要再给它套 `.acc-layout` 那种两栏栅格 —— 内容区现在只剩一个容器。 */
.acc-subnav {
  display: none;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin: 2px 0 6px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
.acc-subnav.is-open { display: flex; }
.acc-subnav-item {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 6px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.acc-subnav-item:hover { background: var(--bg-soft); color: var(--ink); }
.acc-subnav-item.is-active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.acc-body { min-width: 0; }

/* ⭐ 6.4.56 记账内容区**高度跟左侧导航对齐**，超出的部分在内部滚动。
   ── 为什么不是让页面自己滚 ────────────────────────────────────────────────
   原来流水一多，整页就越拉越长，左侧导航跟着被"顶"在顶上、右边也没有明确的
   可滚区域 —— 用户要一遍遍滚到底才能看到下面还有没有东西。现在把可滚区域
   收进内容区：高度 = 「一级导航 + 展开的二级导航」的实测高度，多的在内部滚，
   页面本身基本不增高（滚动条就出现在内容区右侧）。
   ⚠️ 具体像素值由 account-acc.js 写进 `--acc-body-max-h`（CSS 量不到别人的高度）；
      这里的 72vh 只是 JS 还没跑起来时的兜底，避免先闪一下"超长页面"。 */
.acc-body {
  max-height: var(--acc-body-max-h, 72vh);
  overflow-y: auto;
  /* ⚠️ 必须禁掉横向滚动：`overflow-y:auto` + `overflow-x:visible` 会被浏览器算成 `auto`，
     于是内容区自己也会长出一条横向滚动条 —— 和表格内层那条打架（滚完内层接着滚外层）。 */
  overflow-x: hidden;
  /* 滚到底别把滚动传给整页（否则内层滚完，外层接着滚，手感很怪） */
  overscroll-behavior: contain;
}
/* 细一点的滚动条（Chromium/Edge）；Firefox 走 scrollbar-* 标准属性 */
.acc-body { scrollbar-width: thin; scrollbar-color: #cfd8e3 transparent; }
.acc-body::-webkit-scrollbar { width: 8px; }
.acc-body::-webkit-scrollbar-track { background: transparent; }
.acc-body::-webkit-scrollbar-thumb {
  background: #cfd8e3;
  border-radius: 999px;
}
.acc-body::-webkit-scrollbar-thumb:hover { background: #b6c2d2; }

/* 「记账」这一项右侧的展开箭头（纯 CSS ::after，**不往按钮里塞节点** ——
   account.js 的 `navLabel()` 取 `textContent` 做提示文案，塞节点会把箭头也带进提示语） */
.acct-nav button[data-panel="accounting"]::after {
  content: '›';
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-3);
  transition: transform .16s ease;
}
.acct-nav button[data-panel="accounting"].is-expanded::after {
  transform: rotate(90deg);
  color: var(--brand);
}

.acc-h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.acc-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.65; }

/* 记一笔：收 / 支 / 转账 */
.acc-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.acc-tab {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 15px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.acc-tab:hover { border-color: var(--brand); color: var(--brand); }
.acc-tab.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* 表单 —— ⭐ 6.4.55 改成**两项一行**（此前一项一行，10 个字段要滚很长一屏）
   ⚠️ 用 grid 而不是 flex-wrap：flex 换行靠宽度算，字段宽度一变就参差不齐；
      grid 的 `minmax(0,1fr)` 保证两列等宽，且**子项不会把列撑破**（min-width 必须显式给 0）。
   ⚠️ 窄屏（≤760px）单列，见文件末尾的媒体查询。 */
.acc-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  max-width: 760px;
  align-items: start;
}
.acc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.acc-field-label { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.acc-field-hint { font-size: 11.5px; color: var(--ink-3); }
.acc-form input,
.acc-form select,
.acc-dialog input,
.acc-dialog select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}
.acc-form input:focus,
.acc-form select:focus,
.acc-dialog input:focus,
.acc-dialog select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
/* 按钮行要横跨两列，否则会被挤进右边那一格 */
.acc-form-actions {
  display: flex;
  gap: 9px;
  margin: 4px 0 6px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}
.btn.is-danger { color: #b42318; }
.btn.is-danger:hover { background: #fef3f2; }

/* 统计卡 */
.acc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}
.acc-stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.acc-stat-label { font-size: 12.5px; color: var(--ink-3); }
.acc-stat-value { font-size: 17px; font-weight: 700; color: var(--ink); }
.acc-stat-value.is-in { color: #067647; }
.acc-stat-value.is-out { color: #b42318; }
.acc-stat-sub { font-size: 11.5px; color: var(--ink-3); }

/* 表格 */
.acc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
  /* ⭐ 6.4.58 隐藏**自身**的横向滚动条：它长在表格最下沿，流水一多就得先滚到底才摸得到。
     改由下面 .acc-hscroll 那条「钉在内容区底部」的代理条承担（两条同步 scrollLeft）。 */
  scrollbar-width: none;
}
.acc-table-wrap::-webkit-scrollbar { height: 0; }

/* ⭐ 6.4.58 代理横向滚动条：`position: sticky; bottom: 0` 让它**始终停在内容区可视底部**，
   不管流水有多少行，横向拖动都随手可及（不用先滚到表格末尾）。
   ⚠️ 用 sticky 而不是 fixed：fixed 会脱离内容区去贴浏览器底部，滚动时和表格脱节；
      sticky 留在正常流里，只做「视觉上的吸附」，滚到表格末尾时它会自然归位。
   ⚠️ 内部 pad 的宽度 = 表格 scrollWidth ⇒ 滑块长度比例与真表格一致，手感一致。 */
.acc-hscroll {
  position: sticky;
  bottom: 0;
  z-index: 5;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
}
.acc-hscroll-pad { height: 1px; }
.acc-hscroll::-webkit-scrollbar { height: 10px; }
.acc-hscroll::-webkit-scrollbar-track { background: transparent; }
.acc-hscroll::-webkit-scrollbar-thumb {
  background: #cfd8e3;
  border-radius: 999px;
}
.acc-hscroll::-webkit-scrollbar-thumb:hover { background: #b6c2d2; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.acc-table th,
.acc-table td {
  padding: 9px 11px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.acc-table th {
  background: var(--bg-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.acc-table tbody tr:last-child td { border-bottom: 0; }
.acc-table tbody tr:hover { background: #fafcff; }
.acc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.acc-table td.num.is-in { color: #067647; font-weight: 600; }
.acc-table td.num.is-out { color: #b42318; font-weight: 600; }
.acc-cell-text {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-ops { display: flex; gap: 6px; align-items: center; }

/* 设置页：分组 + 列表 */
.acc-group-title {
  margin: 16px 0 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: .4px;
}
.acc-group-title:first-child { margin-top: 4px; }
.acc-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.acc-list-item {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: left;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.acc-list-item:last-child { border-bottom: 0; }
.acc-list-item:hover { background: var(--bg-soft); }
.acc-chev { color: var(--ink-3); font-size: 16px; line-height: 1; }

.acc-backbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.acc-back {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.acc-back:hover { border-color: var(--brand); color: var(--brand); }
.acc-backbar .acc-h3 { margin: 0; }
/* ⭐ 6.4.112 名单页右上「+」（添加员工社保 / 公积金） */
.acc-back-plus { padding: 3px 10px 4px; font-size: 15px; line-height: 1; font-weight: 700; }
.acc-back-plus:hover { border-color: var(--brand); color: var(--brand); }

/* 空态 */
.acc-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 22px 18px;
  background: var(--bg-soft);
  text-align: center;
}
.acc-empty h3 { margin: 0 0 6px; font-size: 14.5px; }
.acc-empty p { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.acc-empty .acc-hint { margin-bottom: 0; }

/* 弹窗（新增/编辑名称） */
.acc-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 60;
}
.acc-dialog {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.acc-dialog h4 { margin: 0 0 2px; font-size: 15px; }

/* 轻提示 */
.acc-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  z-index: 70;
  box-shadow: var(--shadow);
  background: #ecfdf5;
  color: #067647;
  border: 1px solid #a7f3d0;
  max-width: calc(100vw - 32px);
}
.acc-toast[hidden] { display: none; }
.acc-toast.is-err { background: #fef3f2; color: #b42318; border-color: #fecdca; }

@media (max-width: 760px) {
  /* 窄屏：折叠后的一级导航本来就是横排滚动，二级导航塞进去会更挤 ⇒
     让一级导航允许换行、二级导航独占一整行（再来一条横排子导航）。 */
  .acct-nav { flex-wrap: wrap; overflow-x: visible; }
  .acc-subnav.is-open {
    flex: 1 0 100%;
    flex-direction: row;
    overflow-x: auto;
    margin: 0 0 4px;
    padding: 0 0 0 8px;
    border-left: 0;
    -webkit-overflow-scrolling: touch;
  }
  .acc-subnav-item { flex: 0 0 auto; }
  /* 窄屏回到一项一行（两列在手机上每格只剩 ~150px，金额/日期都会挤） */
  .acc-form { grid-template-columns: minmax(0, 1fr); max-width: none; }
}

/* ============================================================================
 * ⭐ 6.4.59 记账 → 算薪（网页端）
 * 三段式：① 收入/支出两栏（分类来自「设置 → 算薪设置」） ② 筛选 ③ 算薪流水
 * ⚠️ 全部为**追加**，不改上面任何既有选择器。
 * ========================================================================== */

/* ① 收入 / 支出 两栏 */
.acc-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 16px;
}
.acc-side-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg-soft);
  min-width: 0;                 /* 栅格子项必须显式给 0，否则长名字把列撑破 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acc-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.acc-side-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.acc-side-title.is-in { color: #067647; }
.acc-side-title.is-out { color: #b42318; }
.acc-side-count { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.acc-side-items { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.acc-chip.is-in { border-color: #a7f3d0; background: #ecfdf5; color: #067647; }
.acc-chip.is-out { border-color: #fecdca; background: #fef3f2; color: #b42318; }
.acc-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .65; }
.acc-side-empty { font-size: 12.5px; color: var(--ink-3); }

/* ② 筛选：两行 5 列栅格（6.4.61 重排）
   行1 = 算薪月 / 到账月 / 业务类型 / 角色人 / 角色类型；
   行2 = 合同号（占 2 格）/ 物业地址（占 2 格）/ 重置（1 格）。
   ⭐ 宽屏铺满内容区（把 `.acc-form` 的 760px 上限撤掉），7 个条件从 4 行压到 2 行 ——
      内容区高度被左侧导航钉死（见 `.acc-body` 的 `--acc-body-max-h`），这里每省一行，
      下面「算薪流水」就多一行可见。窄屏由 `.acc-form` 的媒体查询回单列。 */
.acc-filters { margin: 4px 0 8px; max-width: none; }
@media (min-width: 900px) {
  .acc-filters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.acc-filters .acc-span2 { grid-column: span 2; }
/* 「重置」只占最后一格，不再横跨整行（`.acc-form-actions` 默认 grid-column: 1 / -1） */
.acc-filters .acc-form-actions {
  grid-column: auto;
  margin: 0;
  justify-content: flex-end;
  align-self: center;
}
/* 筛选标题行：左「筛选」，右「导入 / 清空导入 / 已导入 N 行」 */
.acc-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}
.acc-filter-head .acc-h3 { margin: 0; }
.acc-filter-summary {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 6px 0 10px;
}

/* ③ 算薪流水表：列多且窄，统一小字号 + 表头不换行 */
.acc-pay-table { font-size: 12.5px; }
.acc-pay-table th,
.acc-pay-table td { padding: 8px 10px; }
.acc-pay-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.acc-pay-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 20px 16px;
  background: var(--bg-soft);
  text-align: center;
}
.acc-pay-empty h4 { margin: 0 0 6px; font-size: 14px; }
.acc-pay-empty p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.7; }

@media (max-width: 760px) {
  .acc-sides { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
 * ⭐ 6.4.60 算薪页第二版：导入按钮 / 内联标签筛选 / 月份翻页 / 双层单元格
 * ⚠️ 全部为**追加**。
 * ========================================================================== */

/* 操作行：6.4.61 去掉左侧「算薪」标题后只剩「导入 / 清空导入」，靠右 */
.acc-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 4px;
}
.acc-title-row .acc-h3 { margin: 0; }
.acc-title-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acc-import-note { font-size: 12px; color: var(--ink-3); }

/* ── 标签放进框里：不再单独占一行 ──────────────────────────────────────────
 * 做法：外层 flex 容器画边框和底色，里面 [标签][控件] 并列；控件自身去掉边框。
 * ⚠️ 不能用 placeholder 冒充标签：单选/日期/月份框在**有值**时要能看见字段名，
 *    placeholder 一有值就消失，用户会忘记这格是什么。
 */
.acc-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0 6px 0 8px;
  min-width: 0;
  /* ⚠️ 6.4.61 高度 38 → 34：一排要放 5 个，太高会把第二行和表格挤下去 */
  height: 34px;
}
.acc-inline:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.acc-inline-label {
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
  flex: 0 0 auto;
}
/* 标签外面那对尖括号：`<算薪月>`。比字段名更浅，读起来是"这格填什么"，不抢控件 */
.acc-inline-label .acc-lb {
  font-style: normal;
  color: var(--ink-3);
  opacity: .7;
  margin: 0 1px;
}
.acc-inline > input,
.acc-inline > select {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: 100%;
  font-size: 13px;
  color: var(--ink);
}
.acc-inline > input:focus,
.acc-inline > select:focus { outline: none; }
/* 6.4.61 第二版：不再单独画 `<标签>` —— 空值时字段名由控件自己显示（浅灰、略小） */
.acc-inline > input::placeholder { color: var(--ink-3); font-size: 12px; }
.acc-inline > select.is-empty { color: var(--ink-3); font-size: 12px; }
.acc-inline > select.is-empty option { color: var(--ink); font-size: 13px; }

/* ── 月份翻页：标签 + ‹ 月份 ›（跨年自动进位） ──────────────────────────── */
.acc-month-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  /* ⚠️ 必须够大够粗：`‹` `›` 在小字号下会被看成小括号，用户根本认不出那是"翻页" */
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  /* ⚠️ 6.4.61 左右各收 2px：5 个筛选挤一行时，箭头这点留白就是「全部」被截断的主因 */
  padding: 0 3px;
  cursor: pointer;
  flex: 0 0 auto;
  border-radius: 6px;
}
.acc-month-btn:hover { color: var(--brand); background: var(--brand-soft); }
.acc-month > input[type="month"] { text-align: center; }

/* 隐藏的原生 file input */
.acc-file-hidden { display: none; }

/* ── 算薪流水：一格两行 ──────────────────────────────────────────────────
 * 12 列压到 7 列后，每格放"主值 + 副值"上下两行。表头也照样两行，
 * 这样"到账月 / 业务类型"这类合并列一眼能看出下半行是什么。
 */
.acc-pay-table th .acc-th-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 2px;
}
.acc-cell2 { line-height: 1.35; }
.acc-cell2 .acc-c2-main { display: block; color: var(--ink); }
.acc-cell2 .acc-c2-sub {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.acc-pay-table td.num .acc-c2-main,
.acc-pay-table td.num .acc-c2-sub { text-align: right; }

/* ── 第一部分改成「类型：金额 元」逐行展示（6.4.60） ───────────────────────
 * 原来是 chip 流式排列，只能显示类型名；加了金额后要右对齐对齐到同一条线，
 * 所以改成「名称 ……… 金额」的逐行布局（flex space-between）。
 */
.acc-side-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 4px;
}
.acc-side-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line);
}
.acc-side-row:last-child { border-bottom: 0; }
.acc-side-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-side-amount {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}
.acc-side-amount.is-in { color: #067647; }
.acc-side-amount.is-out { color: #b42318; }
.acc-side-extra {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 1px 6px;
}
.acc-side-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}
.acc-side-total-num {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.acc-side-total-num.is-in { color: #067647; }
.acc-side-total-num.is-out { color: #b42318; }

/* 月份框：`‹ 2026-10 ›` 三者要排得开。
 * ⚠️ Chromium/Edge 的 `input[type=month]` 自带日历图标 + `----年--月` 占位，
 *    在 3 列栅格里会被挤成两行 —— 缩图标、压字号、给 input 一个明确的最小宽度。 */
.acc-month > input[type="month"] {
  flex: 1 1 104px;
  min-width: 104px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* ⚠️ 直接**隐藏**原生日历图标：它 + `----年--月` 占位 + 左右箭头 在 3 列栅格里排不下，
 *    会挤成 `算薪月 （ ‹ ----年--月 › 📅` 这种读不出顺序的样子。
 *    左右箭头本来就够用（±1 月、自动跨年），图标是冗余的。 */
.acc-month > input[type="month"]::-webkit-calendar-picker-indicator {
  display: none;
}
.acc-month > input[type="month"] {
  flex: 1 1 92px;
  min-width: 92px;
}
/* 空值时别显示 `----年--月` 这种半截占位，给个干净的提示 */
.acc-month > input[type="month"]:not(:focus):invalid::-webkit-datetime-edit { color: var(--ink-3); }

/* 月份显示：文本居中 + 原生控件视觉隐藏（保留 showPicker） */
.acc-inline.acc-month { position: relative; }
.acc-month-val {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-month-val:hover { color: var(--brand); }
/* 空值（没选月份）时中间显示的是字段名，用浅色表示"这只是提示" */
.acc-month-val.is-empty { color: var(--ink-3); font-size: 12px; }
.acc-month-val.is-empty:hover { color: var(--brand); }

/* ── 年月选择弹层（6.4.61 第三版）──────────────────────────────────────────
 * 结构：第一行 `<< 2026 >>`（点箭头切年份），下面 4×3 的 1–12 月，底部「不限」。
 * ⚠️ position: fixed 且挂在 body 上 —— 筛选区在 `.acc-body`（overflow:hidden）里，
 *    绝对定位会被裁掉。
 */
.acc-month-pop {
  position: fixed;
  z-index: 3000;
  width: 212px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .18);
}
.acc-mp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  padding: 0 2px;
}
.acc-mp-year-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.acc-mp-year-btn:hover { background: var(--brand-soft); }
.acc-mp-year {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.acc-mp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.acc-mp-month {
  appearance: none;
  border: 1px solid transparent;
  background: #f4f7fb;
  border-radius: 8px;
  height: 30px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.acc-mp-month:hover { border-color: var(--brand); color: var(--brand); }
.acc-mp-month.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
}
.acc-mp-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.acc-mp-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 11.5px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.acc-mp-clear:hover { color: var(--brand); background: var(--brand-soft); }

/* ============================================================================
 * ⭐ 6.4.62 网页「我的」：个人中心 / 职务管理 / 组织架构 / 社保公积金 / 会员中心
 * ⚠️ 全部为**追加**：chip 类都限定在 `.mine-chipbox` 里，不碰记账页的 `.acc-chip`。
 * ========================================================================== */

.mine-body {
  min-width: 0;
  max-width: none;
  /* 与记账内容区同一思路：上限跟视口走，超出的在内部滚动，别把整页拉长 */
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

/* 顶部个人卡片 */
.mine-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f7faff 0%, #ffffff 62%);
}
.mine-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
}
.mine-profile-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mine-profile-name { font-size: 16.5px; color: var(--ink); }
.mine-profile-sub { font-size: 13px; color: var(--ink-3); }
.mine-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.mine-badge {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
}
.mine-badge.is-plan { background: var(--brand-soft); border-color: transparent; color: var(--brand); font-weight: 600; }

/* 段落标题 + 右侧操作 */
.mine-sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 7px;
}
.mine-sec-title .acc-h3 { margin: 0; }
.mine-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.is-disabled { opacity: .42; cursor: not-allowed; }

/* chips：只影响「我的」里的 .acc-chip */
.mine-chipbox { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.mine-chipbox .acc-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.3;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
}
.mine-chipbox .acc-chip.is-on {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.mine-chipbox .acc-chip.is-off { color: var(--ink-3); }
.mine-chip-main { font-weight: 600; }
.mine-chip-sub { font-size: 11px; color: var(--ink-3); }

/* 晋级规则 / 方案卡片 */
.mine-rules { display: flex; flex-direction: column; gap: 8px; }
.mine-rule {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.mine-rule.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.mine-rule-path { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mine-rule-sub { font-size: 12px; color: var(--ink-3); }

/* ⭐ 6.4.112 「缴纳名单」按钮挂在面包屑 `我的---社保公积金` 文字右侧（6.4.111 在「险种」标题里） */
.acct-crumb-act { display: flex; align-items: center; margin-left: 12px; }
.acct-crumb-act .btn-sm { padding: 4px 12px; font-size: 12.5px; font-weight: 500; border-radius: 9px; }

/* ⭐ 6.4.111 缴纳名单页（我的 → 社保公积金 → 险种 → 缴纳名单） */
.mine-count { margin-left: auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.mine-member-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mine-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.mine-member-av {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
}
.mine-member.is-quit .mine-member-av { color: var(--ink-3); background: var(--bg-soft); }
/* 🔴 栅格子项必须 min-width:0，否则下面的 text-overflow 省略号永远不生效 */
.mine-member-main { flex: 1 1 auto; min-width: 0; }
.mine-member-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.mine-member.is-quit .mine-member-name { color: var(--ink-3); }
.mine-quit-tag { font-size: 11px; font-weight: 600; color: #d64545; }
.mine-member-sub {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mine-member-right { flex: 0 0 auto; text-align: right; }
.mine-member-plan {
  font-size: 13px; color: var(--brand);
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
}
/* ⭐ 6.4.117 方案来自「职务管理」时的角标（人级没设方案才会出现） */
.mine-plan-post {
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 5px; padding: 0 4px; line-height: 15px;
}
/* 只填了基数、没选方案的人：方案位写「未选方案」，弱化成灰色，别和服务名一个观感 */
.mine-member-plan.is-none { color: var(--ink-3); font-weight: 400; }
.mine-member.is-quit .mine-member-plan { color: var(--ink-2); }
.mine-member-base { font-size: 12px; color: var(--ink-3); }
/* ⭐ 6.4.114 「✎」单独一列：竖线分隔 + 垂直居中，缴纳比例 / 基数两行仍右对齐（不跟图标挤一行） */
.mine-member-ops {
  flex: 0 0 auto; align-self: stretch;
  display: flex; align-items: center;
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--line);
}
.mine-member-edit {
  border: none; background: none; padding: 2px 5px; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--ink-2); border-radius: 6px;
  transition: color .12s, background .12s;
}
.mine-member-edit:hover { color: var(--brand); background: var(--brand-ring); }
.mine-member-edit:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* 工具条 / 状态筛选 / 回收站条目 */
.mine-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 2px;
}
.mine-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 9px; }
.mine-trash-item { display: inline-flex; align-items: center; gap: 5px; }

/* 弹窗表单 */
.mine-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 80;
}
.mine-dialog { max-width: 660px; max-height: 84vh; overflow: auto; }
.mine-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.mine-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mine-field-label { font-size: 11.5px; color: var(--ink-3); }
.mine-span2 { grid-column: 1 / -1; min-width: 0; }
.mine-confirm-text { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

/* 职务多选（按分类分列） */
.mine-post-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.mine-post-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 132px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.mine-post-cat { font-size: 11.5px; color: var(--ink-3); }
.mine-post-col .acc-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
}
.mine-post-col .acc-chip.is-on {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}
.mine-readout { margin-top: 2px; }

/* ⭐ 6.4.66 员工职务转变：变更提示 + 记录列表 */
.mine-warn {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 2px 0 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.55;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.mine-warn.is-off { display: none; }
.mine-chg { margin-top: 4px; }
.mine-chg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  min-width: 0;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--line);
}
.mine-chg-date {
  flex: 0 0 86px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mine-chg-post {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mine-chg-pct { flex: 0 0 auto; color: var(--brand); }
.mine-chg-row .btn { flex: 0 0 auto; }

/* 晋级条件行 */
.mine-cond { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mine-cond-label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 106px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.mine-cond input[type="text"] { flex: 1 1 96px; min-width: 0; }
.mine-mode { display: flex; gap: 6px; }

/* 会员中心 */
.mine-plan-card {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f4f8ff 0%, #fff 65%);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mine-plan-name { font-size: 18px; font-weight: 700; color: var(--ink); }
.mine-plan-state { font-size: 13px; }
.mine-plan-state.is-ok { color: #067647; }
.mine-plan-state.is-off { color: #b42318; }
.mine-plan-exp { font-size: 12.5px; color: var(--ink-3); }
.mine-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mine-feat {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 12.5px;
  color: var(--ink-3);
}
.mine-feat.is-on { border-color: #a7f3d0; background: #f6fefb; color: var(--ink-2); }
.mine-feat-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #cbd5e1;
}
.mine-feat.is-on .mine-feat-dot { background: #12b76a; }
.mine-feat-name { flex: 1 1 auto; min-width: 0; }
.mine-feat-state { flex: 0 0 auto; font-size: 11.5px; }

/* ============================================================================
 * ⭐ 6.4.63 一级 / 二级导航合并成一行面包屑：`记账---应收 / 应付`
 * 原来面板顶部是「一级大标题 + 一句通用说明」，子页里再来一个同名 h3 —— 三行说同一件事。
 * 现在只留这一行（通用说明删掉，子页那句业务说明保留在下面）。
 * ========================================================================== */
.acct-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  min-width: 0;
}
.acct-crumb-1 { color: var(--ink); }
.acct-crumb-sep {
  margin: 0 3px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: -.5px;
}
.acct-crumb-2 { color: var(--brand); }
@media (max-width: 560px) {
  .acct-crumb { font-size: 15.5px; }
}

/* ============================================================================
 * ⭐ 6.4.64 记账-算薪 → 分账汇总（第四部分）
 * 两个汇总卡 + 每人提成表。口径：提成 = 到账金额 × 员工个人提成%；可分配 = 实收业绩 − 冻结。
 * ========================================================================== */
.acc-alloc { margin-top: 18px; min-width: 0; }
.acc-alloc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  flex-wrap: wrap;
}
.acc-alloc-head .acc-h3 { margin: 0; }
.acc-freeze-input {
  width: 96px;
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #fff;
}
.acc-freeze-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.acc-alloc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.acc-alloc-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  background: #fff;
  min-width: 0;
}
.acc-alloc-card.is-in { border-color: #a7f3d0; background: #f6fefb; }
.acc-alloc-card.is-out { border-color: #fecdca; background: #fffaf9; }
.acc-alloc-card-t { font-size: 12px; color: var(--ink-3); }
.acc-alloc-card-v {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 3px 0 2px;
}
.acc-alloc-card.is-in .acc-alloc-card-v { color: #067647; }
.acc-alloc-card.is-out .acc-alloc-card-v { color: #b42318; }
.acc-alloc-card-s { font-size: 11.5px; color: var(--ink-3); }

.acc-alloc-table { width: 100%; }
.acc-alloc-table td, .acc-alloc-table th { white-space: nowrap; }
.acc-alloc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.acc-alloc-table td.is-miss { color: #b42318; }
.acc-alloc-table tr.acc-alloc-total td {
  font-weight: 700;
  color: var(--ink);
  background: #f8fafc;
  border-top: 1px solid var(--line);
}
.acc-hint.is-warn { color: #b42318; }

/* 6.4.65 分账：手工参数行 + 子标题 + 行内比例输入 */
.acc-alloc-params {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: #fcfdff;
}
.acc-param { display: flex; align-items: center; gap: 6px; min-width: 0; }
.acc-param-t { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.acc-param-i {
  width: 92px;
  padding: 4px 7px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #fff;
}
.acc-param-i:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.acc-alloc-sub { margin: 16px 0 7px; font-size: 13.5px; }
.acc-pct-input {
  width: 52px;
  padding: 3px 5px;
  font-size: 12.5px;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #fff;
}
.acc-pct-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-ring);
}
.acc-pct-unit { font-size: 11.5px; color: var(--ink-3); margin-left: 3px; }
.acc-alloc-table tr.acc-alloc-other td { color: var(--ink-3); background: #fbfcfe; }

/* 6.4.66 算薪明细：签约时间缺失 / 比例来自职务转变 */
.acc-alloc-table td.is-nosign {
  color: #b45309;
  background: #fffbeb;
  font-weight: 600;
  text-align: center;
}
.acc-alloc-table td.is-changed { color: var(--brand); }
.acc-pct-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 15px;
  border-radius: 4px;
  color: var(--brand);
  background: var(--brand-soft);
  vertical-align: 1px;
}
@media (max-width: 720px) {
  .acc-alloc-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .mine-form { grid-template-columns: minmax(0, 1fr); }
  .mine-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mine-feat-grid { grid-template-columns: minmax(0, 1fr); }
}

.acc-inline > input.acc-month-native {
  position: absolute;
  right: 10px;
  bottom: 2px;
  width: 1px;
  height: 1px;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   ⭐ 6.4.67 记账-算薪改版
   ① 「导入」搬到面包屑行右侧
   ② 第一部分换成「收入 / 支出 / 利润」三行文本式（每个数都带 ①②③… 序号）
   ③ 筛选三行压成两行（第一行 4 个等分；第二行 合同号/物业地址 + 重置贴右）
   ══════════════════════════════════════════════════════════════════════════ */

/* ① 面包屑右侧操作区 */
.acct-crumb-ops {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* ⚠️ 必须重置字重：`.acct-crumb` 是 700，不还原的话按钮和「已导入 N 行」会粗一圈 */
  font-weight: 400;
}
.acct-crumb-ops:empty { display: none; }

/* ② 收入 / 支出 / 利润 —— ⭐ 6.4.68 两列 grid（标签 | 项目区）+ 项目区 4 列
   🔴 对齐靠 grid 而不是 padding：「收入：」「支出：」字宽不同，flex + 固定 padding
      两个冒号位置对不齐；用 `auto` 第一列 + 右对齐，冒号天然落在同一竖线，
      换行后的项目也正好从那条线开始（用户要的「在冒号下方对齐」）。 */
.acc-sum {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fcfdff;
}
.acc-sum-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 6px;
  padding: 3px 0;
  min-width: 0;
}
.acc-sum-row + .acc-sum-row { border-top: 1px dashed var(--line); }
.acc-sum-lab {
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}
.acc-sum-lab.is-in { color: #0e7a4a; }
.acc-sum-lab.is-out { color: #b42318; }
.acc-sum-lab.is-profit { color: var(--brand); }
.acc-sum-items {
  display: grid;
  /* 4 列自动宽：列宽取该列最宽项，第 5 项自动落到第二行第 1 列 —— 正是要的对齐 */
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  align-items: center;
  gap: 2px 16px;
  min-width: 0;
}
.acc-sum-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.acc-sum-no { font-style: normal; color: var(--ink-3); font-size: 11px; }
.acc-sum-nm { color: var(--ink-2); }
.acc-sum-val {
  margin-left: 1px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.acc-sum-val.is-strong { font-size: 13px; }
.acc-sum-item.is-total .acc-sum-nm { color: var(--ink); font-weight: 600; }
.acc-sum-item.is-total .acc-sum-val { color: var(--brand); }
/* ⑤ 本月冻结 / 未归类：不参与合计，退一档 */
.acc-sum-item.is-muted { opacity: .6; }
/* 输入框做成**无边框纯文本**，鼠标移上去才显出可编辑 —— 用户要的是"文本式"一行，
   常驻边框会让 ①②③ 这排看起来像表单而不是对账行。 */
.acc-sum-in {
  margin-left: 1px;
  /* ⭐ 6.4.80 框里现在放的是**本项合计**（可达 5 位数 + 两位小数），54px 会被裁掉尾数 */
  width: 68px;
  padding: 1px 3px;
  font-size: 12px;
  text-align: right;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.acc-sum-in:hover {
  border-color: var(--line);
  background: #fff;
}
.acc-sum-in:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.acc-sum-auto { font-size: 10.5px; color: var(--ink-3); margin-left: 3px; }
.acc-sum-row.is-profit { align-items: center; }
.acc-sum-row.is-profit .acc-hint { margin: 0; font-size: 11.5px; }
.acc-sum-ops { justify-self: start; }
.acc-sum-tip { margin: 2px 0 0; }

/* 面包屑上的「算薪月」（6.4.68 需求 A） */
.acc-month-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.acc-month-chip:hover { border-color: var(--brand); color: var(--brand); }
.acc-month-chip-t { color: var(--ink-3); }
.acc-month-chip-v {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .acc-sum-items { grid-template-columns: repeat(2, auto); }
}

/* ③ 筛选：`筛选：| 项目区` 两列栅格（与「收入 / 支出」同一套对齐方式）
   🔴 对齐靠 grid 的 `auto` 第一列 + 标签右对齐 —— 冒号贴在列边，
      项目区两行都从同一条竖线起排。用 padding 缩进做不到：窄屏字号一变就错位。 */
.acc-fwrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 6px;
  margin: 0 0 10px;
}
.acc-flab {
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  /* 与第一行控件（34px）垂直居中，冒号才和月份框在同一条中线 */
  line-height: 34px;
}
.acc-fbody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.acc-frow {
  display: grid;
  /* ⭐ 6.4.81 一行 6 项：算薪月 / 业务类型 / 角色人 / 角色类型 / 收入类型 / 支出类型 */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  /* ⚠️ 行间距交给 `.acc-fbody` 的 gap；这里再留 margin 会让两行不齐 */
  margin: 0;
}
.acc-frow-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) auto; }
/* ⚠️ `.acc-form-actions` 默认 `grid-column: 1 / -1`，在 3 列栅格里会把「重置」挤到下一行 */
.acc-frow-2 .acc-form-actions {
  grid-column: auto;
  margin: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .acc-frow, .acc-frow-2 { grid-template-columns: minmax(0, 1fr); }
  .acc-frow-2 .acc-form-actions { justify-content: flex-start; }
  /* 窄屏标签不再钉在左侧一行高，退回顶部对齐（34px 行高会把它压到中间） */
  .acc-flab { line-height: 22px; }
}

/* ⭐ 6.4.69 算薪流水：物业地址收窄 + 自动换行；新增「提成比例 / 提成」两列 */
/* ⭐ 6.4.74 列宽统一在这里给。
   🔴 为什么每列都要给宽度：只给「物业地址」加宽的话，auto 布局会把多出来的宽度
      摊到**其余每一列**（实测地址 +45px 后 7 列各被压掉 5~9px），
      做不到"只让角色人 / 业绩比例两格吐出来"。
   ⚠️ 用 `width` 不用 `table-layout: fixed`：fixed 下内容超宽会**溢出压到邻列**，
      而 auto 布局下宽度只是"期望值"，内容实在放不下它会自己长——宁可地址少几像素，
      也不能让角色类型糊到业绩比例上。
   基准（1340 视口、内容区 976px）：91 / 100 / 149 / 150 / 117 / 169 / 100 / 100 */
.acc-pay-table .acc-col-addr {
  /* ⭐ 6.4.103 收窄到 **8 个汉字**宽：本表字号 12.5px ⇒ 8em = 100px，加左右 padding 10×2
     = 120px。用户口径「物业地址超过 8 个汉字自动换行」。
     （历史：6.4.74 150 → 195；6.4.75 234；6.4.76 缩到 187；本轮按 8 汉字重算） */
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  /* ⚠️ `.acc-table td` 是 `white-space: nowrap`，不覆盖这里地址永远不换行、把表格撑到无限宽 */
  white-space: normal;
}
/* 🔴 角色人 / 业绩比例两列合计让出 45px（= 物业地址 6.4.74 加宽的量），按原宽 117 : 169 摊：
   角色人 117 → 98、业绩比例 169 → 143。
   ⭐ 6.4.75 「业绩比例」表头拆三行后不被长文字撑着 ⇒ 143 → 104，让出 39px 给地址（195 → 234）。
   ⭐ 6.4.76 地址缩 20%（234 → 187）⇒ 这 47px 归还：角色人 98 → 125、业绩比例 104 → 124
   （角色人那列是纯文字，给它多一点更实用；业绩比例右对齐数字 124px 足够）。
   8 列合计仍 976px = 内容区宽，不会多出横向滚动。 */
.acc-pay-table .acc-col-role { width: 125px; max-width: 125px; }
.acc-pay-table .acc-col-ratio { width: 124px; max-width: 124px; }
/* ⭐ 6.4.120 「角色人姓名 / 角色类型」与「业绩比例 / 到账金额」两列之间的留白收一半：
   单元格左右各 10px ⇒ 交界处 20px，改成各 5px ⇒ 10px（缩小 50%） */
.acc-pay-table th.acc-col-role,
.acc-pay-table td.acc-col-role { padding-right: 5px; }
.acc-pay-table th.acc-col-ratio,
.acc-pay-table td.acc-col-ratio { padding-left: 5px; }
/* 表头副标允许折行：长标签由 `sub2` 显式断，这里兜住极端窄屏 */
.acc-pay-table .acc-col-ratio .acc-th-sub { white-space: normal; line-height: 1.3; }
/* 其余列钉住原宽，别让它们跟着被压 */
.acc-pay-table .acc-col-mon { width: 91px; }
.acc-pay-table .acc-col-contract { width: 100px; }
.acc-pay-table .acc-th-line { display: block; }
/* ⭐ 6.4.77 签约(成销)时间 拆两行后，这一列不再被那 8 个字撑着 ⇒ 149 → 120，
   让出的 29px 给最后一列「支出类型/备注」（备注文字长，一直最挤）。 */
.acc-pay-table .acc-col-sign { width: 120px; }
.acc-pay-table .acc-col-pct { width: 100px; }
/* ⭐ 6.4.105 支出列改「按人支出汇总」后要放「标签 + 金额」两段，129 太挤 ⇒ 168 */
.acc-pay-table .acc-col-exp { width: 168px; }
.acc-pay-table .acc-col-addr .acc-cell2.is-wrap .acc-c2-main {
  display: block;
  /* 🔴 6.4.103 光改列宽不够：`.acc-table` 是 `width:100%` + 自动布局，缩了一列后
     省下的宽度会被浏览器按比例摊回其它列（地址列实际仍可能 >120px）⇒
     这里把**内容**也锁死 8 个汉字宽（8em @ 12.5px = 100px），折行位置才真按 8 字走。 */
  max-width: 8em;
  white-space: normal;
  word-break: break-all;
  line-height: 1.35;
}
/* 缺签约时间 ⇒ 比例是按档案当前值算的，标黄提示（与分账明细里的「缺」同一套颜色） */
.acc-pay-table .acc-c2-main.is-nosign-txt { color: #b45309; }

/* ⭐ 6.4.70 算薪流水：收入类目（合同号上方）+ 铅笔编辑 */
.acc-income-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.acc-income-edit {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.acc-income-edit:hover {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand-ring);
}
/* 收入类目选择弹层（复用年月面板的外壳，只换内容） */
.acc-pick-pop { min-width: 140px; padding: 6px; }
.acc-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.acc-pick-item {
  padding: 6px 10px;
  font-size: 12.5px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.acc-pick-item:hover { background: var(--brand-soft); color: var(--brand); }
.acc-pick-item.is-on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* ══ ⭐ 6.4.83 股本设置（记账 → 设置 → 算薪设置 → 股本设置） ══════════════════
   第一行：总股本（跨 1~2 列）+ 占比列头 + 「设置」；数据行：股东名 / 股金 / 占比%。
   四列固定：`名称 1fr | 股金 140 | 占比 96 | 操作 88` —— 表头和数据行同一套栅格，
   占比才会落在同一条竖线上。 */
.acc-eq {
  margin: 4px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.acc-eq-row {
  display: grid;
  /* 股东名 / 股金（认缴）/ 占比（实际）/ 赠送（±pp）/ 操作（6.4.84 加了第 4 列） */
  grid-template-columns: minmax(0, 1fr) 140px 104px 96px 148px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}
.acc-eq-row:first-child { border-top: 0; }
.acc-eq-row.is-head { background: #fcfdff; }
.acc-eq-total {
  grid-column: 1 / 3;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.acc-eq-total-t { font-size: 12.5px; color: var(--ink-3); }
.acc-eq-total-v { font-size: 15px; font-variant-numeric: tabular-nums; }
.acc-eq-warn { font-size: 11.5px; color: #b42318; }
.acc-eq-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-eq-amt { text-align: right; font-variant-numeric: tabular-nums; }
.acc-eq-pct { text-align: right; font-size: 12.5px; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.acc-eq-row.is-head .acc-eq-pct { font-size: 13px; font-weight: 700; color: var(--ink); }
/* 有赠送时占比格变成两行：上行实际占比、下行「认缴 x%」 */
.acc-eq-pct.is-stack { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.acc-eq-pct-v { font-weight: 600; color: var(--ink); }
.acc-eq-sub { font-size: 11px; color: var(--ink-3); font-weight: 400; }
/* 赠送列：单位是百分点，+ 获赠（品牌蓝）/ - 送出（同「支出」红） */
.acc-eq-gift-c { text-align: right; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.acc-eq-row.is-head .acc-eq-gift-c { font-size: 13px; font-weight: 700; color: var(--ink); }
.acc-eq-gift-c.is-in { color: var(--brand); font-weight: 600; }
.acc-eq-gift-c.is-out { color: #b42318; font-weight: 600; }
.acc-eq-ops { display: flex; justify-content: flex-end; gap: 6px; }
/* 「缓存与明细对不上」的红条：出现在表头下方、只在不一致时才有 */
.acc-eq-drift {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 14px 8px;
  padding: 7px 10px;
  border: 1px solid #fecdca;
  border-radius: var(--radius-sm);
  background: #fef3f2;
  font-size: 12.5px;
  color: #b42318;
}
.acc-eq-drift-t { min-width: 0; }

/* 「设置」弹窗：勾股东 + 填股金 */
.acc-dialog-wide { max-width: 560px; }
.acc-eq-pick {
  max-height: 44vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acc-eq-pick-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 96px;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
}
.acc-eq-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-eq-pick-row .acc-sum-in { width: 100%; border-color: var(--line); background: #fff; }
.acc-eq-pick-row .acc-sum-in:disabled { opacity: .45; border-color: transparent; background: transparent; }

/* 「赠送」弹窗：占比输入 + 双方占比变化的实时预览 */
.acc-gift-in { max-width: 160px; }
.acc-gift-prev {
  margin: 2px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}
.acc-gift-prev.is-err { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.acc-gift-prev-cash { font-weight: 600; color: var(--ink); }
.acc-gift-prev-pair.is-out { color: #b42318; }
.acc-gift-prev-pair.is-in { color: var(--brand); }

/* 「赠送明细」弹窗 */
.acc-dialog-list { max-width: 680px; }
.acc-gift-list {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
/* 表头与数据行共用同一套列宽（备注列给足，否则「2026 股权调整」会被截成「2026 股…」） */
.acc-gift-head-row,
.acc-gift-row {
  display: grid;
  grid-template-columns: 84px minmax(0, .9fr) 72px 92px minmax(0, 1fr) 68px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
}
.acc-gift-head-row { background: #fcfdff; font-size: 12px; font-weight: 700; color: var(--ink); }
.acc-gift-head-row > div:nth-child(3),
.acc-gift-head-row > div:nth-child(4) { text-align: right; }
.acc-gift-row { border-top: 1px solid var(--line); }
.acc-gift-when { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.acc-gift-pair { display: flex; align-items: center; gap: 6px; min-width: 0; }
.acc-gift-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-gift-arrow { color: var(--ink-3); }
.acc-gift-pct { text-align: right; color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-gift-amt { text-align: right; font-variant-numeric: tabular-nums; }
.acc-gift-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.acc-gift-ops { display: flex; justify-content: flex-end; }
/* 「撤销」不能被挤成竖排两个字：按钮不许换行、不许压缩 */
.acc-gift-ops .btn { white-space: nowrap; flex: none; }

/* ══ ⭐ 6.4.88 特殊情况 ══════════════════════════════════════════════════════
   第一行 = 6 个筛选项（时间 / 合同编号 / 物业地址 / 特殊情况 / 角色人 / 金额）
   + 右侧「重置」「新增」；第二行起才是流水表。
   ⚠️ 不要把「新增」塞进 `.acc-frow`（它只有 6 列，按钮会掉到下一行）；
      单独一个 7 列变体，末列 auto —— 按钮按内容宽度，不参与等分。 */
.acc-frow-sp {
  /* ⭐ 6.4.89 第一行 5 个筛选项（时间 / 合同编号 / 物业地址 / 特殊情况 / 角色人）+ 右侧按钮组 */
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}
.acc-frow-sp .acc-form-actions {
  grid-column: auto;
  margin: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
}
.acc-frow-sp .acc-form-actions .btn { white-space: nowrap; }
@media (max-width: 900px) {
  .acc-frow-sp { grid-template-columns: minmax(0, 1fr); }
  .acc-frow-sp .acc-form-actions { justify-content: flex-start; }
}

/* ⭐ 6.4.95 备注列 + 「导入算薪」按钮（按钮住在备注下方，已导过就变灰的「已导入算薪」）
   ⭐ 6.4.97 已导入后**并排**多一个「撤回」，所以按钮统一放进 .acc-sp-imp-acts 这一行里 */
.acc-sp-remark { min-width: 96px; }
/* ⭐ 6.4.109 备注文字超过 **8 个汉字**自动换行（同物业地址的做法，不截省略号） */
.acc-sp-remark .acc-c2-main {
  max-width: 8em;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 20px;
}
.acc-sp-imp-acts {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.acc-sp-imp-btn {
  margin-top: 0;
  padding: 3px 9px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
}
.acc-sp-imp-btn:hover { background: #e6f0ff; }
.acc-sp-imp-btn.is-done {
  border-color: var(--line);
  background: var(--bg-soft);
  color: var(--ink-3);
  cursor: default;
}
.acc-sp-imp-btn[disabled] { cursor: default; }
.acc-sp-imp-btn.is-undo {
  border-color: var(--line);
  background: #fff;
  color: var(--ink-2);
}
.acc-sp-imp-btn.is-undo:hover {
  border-color: #fecdca;
  background: #fef3f2;
  color: #b42318;
}

/* 流水表：点行 = 改/删，所以要给手指一个提示 */
.acc-sp-table th,
.acc-sp-table td { vertical-align: top; }
/* ⭐ 6.4.105 「支出类型/备注」列 = 按人支出汇总（同一个人的多行合并成一格，竖排 9 项）。
   行序（用户口径）：分红 → 垫付 → 提成 → 推荐人 → 小组长 → 个税 → 预支 → 社保公积金 → 汇总。
   没有数据来源/没有数据的项**整行不渲染**；个税是手填输入框；最后一行是汇总。 */
.acc-pay-table td.acc-col-expsum { padding: 6px 8px; vertical-align: top; }
.acc-exp-sum { display: flex; flex-direction: column; gap: 1px; }
.acc-exp-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  line-height: 18px;
}
.acc-exp-k {
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.acc-exp-v {
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 个税：手填输入框（窄一点，别把整列撑开） */
.acc-exp-tax {
  width: 62px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: #fff;
}
.acc-exp-tax:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(26, 111, 214, .12);
}
.acc-exp-line.is-total {
  border-top: 1px dashed var(--line);
  margin-top: 3px;
  padding-top: 3px;
}
.acc-exp-line.is-total .acc-exp-k,
.acc-exp-line.is-total .acc-exp-v { font-weight: 700; color: var(--ink); }

/* ⭐ 6.4.102 物业地址列：约 **8 个汉字**宽，超出自动换行。
   原来借用 `.acc-cell-text`（单行 + text-overflow:ellipsis）⇒ 地址被截成
   「阳光小区 1-1…」，看不全楼层房号。 */
.acc-sp-table td.acc-sp-addr { min-width: calc(8em + 12px); }
.acc-sp-addr-txt {
  max-width: 8em;              /* 8 个汉字 = 8em（14px 字号 → 112px） */
  white-space: normal;         /* 覆盖 .acc-cell-text 的 nowrap */
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 20px;
}
.acc-sp-row { cursor: pointer; }
.acc-sp-row:hover { background: #f7fbff; }
/* 合计行：和上面数据行视觉上分开，金额加粗 */
.acc-sp-total td {
  background: #fcfdff;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ⭐ 6.4.91 新增/修改特殊情况弹窗：两两一行的字段对
   （时间｜特殊情况、角色人｜金额），窄屏退回单列。
   ⚠️ 子项必须显式 min-width:0，否则 grid 会按内容撑宽、把另一列挤没。 */
.acc-sp-row2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.acc-sp-row2 > * { min-width: 0; }
@media (max-width: 520px) {
  .acc-sp-row2 { grid-template-columns: minmax(0, 1fr); }
}

/* ⭐ 6.4.92「特殊情况」类型的两级选择：左列 收入/支出、右列二级项目。
   外层复用 .acc-month-pop 的定位（z-index 3000 > 弹窗 mask 的 60）。
   🔴 6.4.94 **必须覆盖 .acc-month-pop 的 `width: 212px`**：两列（72+168+间隔+竖线）
      最少 253px，固定在 212 里会让右列的选项溢出面板，看起来就是
      "选项背景色超过了选项框的宽度"。这里改成按内容自适应 + 兜底上下限。 */
.acc-cascade {
  width: auto;
  min-width: 224px;
  max-width: min(92vw, 360px);
  padding: 6px;
}
.acc-cascade-body { display: flex; gap: 6px; align-items: stretch; }
.acc-cascade-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 264px;
  overflow-y: auto;
  flex: 0 0 auto;
}
.acc-cascade-col.is-side {
  min-width: 64px;
  padding-right: 6px;
  border-right: 1px solid var(--line);
}
.acc-cascade-col.is-item { min-width: 132px; max-width: 280px; }
.acc-cascade-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-cascade-item:hover { background: var(--brand-soft); color: var(--brand); }
.acc-cascade-item.is-on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.acc-cascade-item.is-side { font-weight: 600; }
.acc-cascade-empty {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  padding: 8px 9px;
  max-width: 190px;
}
/* 只读的类型框：手指点它是选项目的，给个可点光标 */
.acc-sp-type-pick { cursor: pointer; background: #fff; }
.acc-sp-type-pick:hover { border-color: var(--brand); }
/* ⭐ 6.4.93 只在聚焦时压掉那圈 3px 光环：它是只读选择器，点开就走弹层，
   留着光环会像"背景色条溢出输入框"（用户报的就是这个）。
   ⚠️ 选择器要写到 `.acc-dialog input.xxx:focus` 才压得住 `.acc-dialog input:focus`。 */
.acc-dialog input.acc-sp-type-pick:focus {
  border-color: var(--line);
  box-shadow: none;
  background: #fff;
}

/* ⭐ 6.4.98 标签入框：标签浮在控件内部左侧（不再单独占一行），控件用 padding-left 让开。
   ⚠️ padding-left 由 JS 按标签实际宽度算（`fieldIn()`）—— 写死一个值会一边留白太多、
      一边压到输入值。这里只管定位，别在这里再加 padding。 */
.acc-field-in { position: relative; }
/* ⭐ 6.4.99 同行两格必须等高：`<select>` 和只读 `<input>` 在浏览器里的默认高度差 1~2px，
   不写死高度的话「特殊情况」和「角色人」会一高一矮，看着就是"框高不一致"。 */
.acc-field-in { --acc-field-h: 38px; }
.acc-field-in > input,
.acc-field-in > select {
  height: var(--acc-field-h);
  line-height: 20px;
}
/* 提示文字改成绝对定位：不参与高度计算，否则带提示的那格会比其他格高，
   同行的两个框底部就对不齐了。 */
.acc-field-in > .acc-field-hint {
  position: absolute;
  left: 2px;
  /* ⚠️ 不能用 `top:100%`：那是"父级底边之外"，会压到下一行；
     贴在 padding 区（has-hint 给的 18px）里才是对的。 */
  bottom: 1px;
  margin: 0;
}
.acc-field-in.has-hint { padding-bottom: 18px; }
.acc-field-in > .acc-field-label {
  position: absolute;
  left: 10px;
  /* 🔴 6.4.101 不能用 `top: 50%`：那是相对**父级**算的，而带提示小字的格子
     （`.has-hint`）父级多了 18px 的 padding-bottom ⇒ 标签整体下沉 9px，
     和框里的值底部就对不上了（「特殊情况」正是带提示的那格）。
     改成按输入框自身高度算中心，有没有提示小字都一样。 */
  top: calc(var(--acc-field-h) / 2);
  transform: translateY(-50%);
  z-index: 1;
  /* ⭐ 6.4.101 字号/行高必须和框里的值**完全一致**（输入框是 14px / line-height 20px）。
     之前用的是 12.5px：两段文字都靠"垂直居中"排布，小字号的行盒更矮，
     底部自然比 14px 的值高一截 —— 用户看到的就是"四个字和值底部没对齐"。
     同字号 + 同行高 ⇒ 居中的结果必然是同一基线，顶部底部一起齐。 */
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink-3);
  pointer-events: none;
  white-space: nowrap;
}
/* 「需要垫付」是 radio 组，不是输入框 —— 也套一层框，让标签同样住在框里 */
.acc-field-boxed {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 6px 11px;
  gap: 12px;
  min-height: 38px;
}
.acc-field-boxed .acc-field-label {
  position: static;
  transform: none;
  margin-right: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-3);
}

/* ⭐ 6.4.93 「需要垫付」（否/是）+ 垫付人 —— 平时整行隐藏，选到含「折佣」的项目才出现 */
.acc-sp-adv-row { display: none; --acc-field-h: 38px; }
.acc-sp-adv-row.is-on { display: grid; }
/* 🔴 6.4.102 「需要垫付」那格必须和「垫付人」下拉**同高**：它是个 radio 组不是输入框，
   所以得自己按 --acc-field-h 锁高；上下 padding 归零、改用 flex 垂直居中，
   否则 `.acc-radio-row` 的 padding:9px 会把高度顶到 38+ 上面一格更高。 */
.acc-sp-adv-row .acc-field-boxed.acc-radio-row {
  box-sizing: border-box;
  height: var(--acc-field-h);
  min-height: var(--acc-field-h);
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 11px;
  gap: 12px;
}
.acc-radio-row { display: flex; align-items: center; gap: 14px; padding: 9px 2px; min-height: 38px; }
.acc-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.acc-radio-row input[type="radio"] { width: auto; padding: 0; margin: 0; cursor: pointer; }