/* ============================================================================
   bizu.cn —— 条款与规则页共享版式（服务协议 / 合伙人协议 / 行为准则 / 佣金规则 / 隐私政策）

   🔴 设计令牌不在这里声明：每页同时引入 ../assets/css/site.css，
      颜色、字号、圆角、阴影全部沿用主站 :root，避免两处各写一份橙/蓝而漂移。
      本文件**只放协议页专属版式**。

   🔴 本次新增页面时，别把协议正文写成图片或 PDF：必须是可选中、可搜索的 HTML 文本，
      否则「发布为网页」后搜索引擎与读屏都拿不到内容，也不符合无障碍要求。
   ========================================================================== */

/* ------------------------------------------------------------------ 骨架 */
body.ag {
  background: var(--bg);
  line-height: 1.85;
}

.ag-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  /* 刘海屏横屏时左右留出安全区，别让内容被圆角/刘海切掉 */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.ag-bar-in {
  height: 56px; display: flex; align-items: center; gap: 12px;
  max-width: 880px; margin: 0 auto; padding: 0 20px;
}
.ag-bar .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 13.5px; }
.ag-bar .brand-name { font-size: 14.5px; }
.ag-bar .ag-bar-name { font-size: 13.5px; color: var(--ink-3); margin-left: auto; }
.ag-print {
  flex: none; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--navy);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.ag-print:hover { border-color: var(--brand); color: var(--brand-deep); }

.ag-wrap {
  max-width: 880px; margin: 0 auto;
  padding: 26px 20px calc(56px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------------ 卡片 */
.ag-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: 34px 34px 30px;
}

.ag-head { display: flex; align-items: center; gap: 11px; }
.ag-head .mark {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff; display: grid; place-items: center;
  font: 800 14px/1 var(--ff-num); letter-spacing: -.4px;
}
.ag-head .t { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.ag-head .s { font-size: 11px; color: var(--ink-4); letter-spacing: .06em; }

.ag-title { margin: 20px 0 8px; font-size: 25px; letter-spacing: -.4px; }
.ag-sub {
  margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--brand-deep);
  letter-spacing: .03em;
}
.ag-date { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-4); }
.ag-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 0 26px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--brand-tint); border: 1px solid var(--brand-tint-2);
  color: var(--brand-deep);
}

/* -------------------------------------------------------------- 正文版式 */
.ag-body { font-size: 14.5px; color: var(--ink-2); }
.ag-body h2 {
  font-size: 15.5px; font-weight: 700; color: var(--navy);
  margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--line);
}
.ag-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ag-body h3 { font-size: 14.5px; font-weight: 700; color: var(--navy); margin: 20px 0 7px; }
.ag-body p { margin: 0 0 10px; }
.ag-body ul, .ag-body ol { margin: 0 0 12px; padding-left: 22px; }
.ag-body li { margin-bottom: 6px; }
.ag-body p + ul, .ag-body p + ol { margin-top: -2px; }
.ag-body b, .ag-body strong { color: var(--ink); font-weight: 700; }
.ag-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; color: var(--navy);
}
.ag-body a { color: var(--brand-deep); font-weight: 600; }
.ag-body a:hover { text-decoration: underline; }

/* 条款里需要用户特别注意的段落 */
.ag-strong-note {
  margin: 12px 0; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--brand-tint); border: 1px solid var(--brand-tint-2);
  font-size: 13.5px; color: #8a4a06;
}
.ag-strong-note b { color: var(--brand-deep); }

/* 表格（等级 / 比例 / 期限这类结构化信息） */
.ag-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; }
.ag-body table {
  width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.ag-body th, .ag-body td {
  padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top;
}
.ag-body thead th { background: var(--bg); color: var(--navy); font-size: 12.5px; white-space: nowrap; }
.ag-body tbody tr:last-child td { border-bottom: 0; }

/* 表格下方的补充说明（比正文低一档） */
.ag-body .ag-small { margin: -6px 0 12px; font-size: 12.5px; color: var(--ink-4); }

/* 🔴 未知事实占位：必须显眼，别让「待补」悄悄发到线上。
   填真值后把这个 span 换成纯文本即可（保留类名无害）。 */
.todo {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  background: #fff4d6; border: 1px dashed var(--brand);
  color: #8a4a06; font-weight: 700; font-size: 13px;
}
.todo::after { content: " ⚠"; }

/* 底部草案提示（与主站 .note 同语义，但用中性灰避免被当成正式条款） */
.ag-draft {
  margin: 30px 0 0; padding: 14px 16px; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid var(--line-2);
  font-size: 12.8px; line-height: 1.8; color: var(--ink-3);
}
.ag-draft b { color: var(--ink-2); }
.ag-draft ul { margin: 8px 0 0; padding-left: 19px; }

.ag-foot {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  font-size: 13px;
}
.ag-foot a { color: var(--brand-deep); font-weight: 600; }
.ag-foot .sp { margin-left: auto; font-size: 12.5px; color: var(--ink-4); }

/* ------------------------------------------------------------- 响应式 */
@media (max-width: 768px) {
  .ag-bar-in { padding: 0 14px; gap: 9px; }
  /* 窄屏隐藏中间那行名字，把位置让给「打印」按钮；
     🔴 名字隐藏后它身上的 margin-left:auto 也没了，必须在这里给按钮补一个，
        否则按钮会紧贴品牌名（看起来像被挤到左边）。 */
  .ag-bar .ag-bar-name { display: none; }
  .ag-print { margin-left: auto; }
  .ag-wrap { padding: 16px 14px calc(44px + env(safe-area-inset-bottom)); }
  .ag-card { padding: 22px 17px 20px; border-radius: var(--r); }
  .ag-title { font-size: 21px; }
  .ag-body { font-size: 14px; }
  .ag-body h2 { margin-top: 24px; padding-top: 15px; }
  .ag-print { height: 32px; padding: 0 12px; font-size: 12.5px; }
}

@media (max-width: 380px) {
  .ag-bar-in { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .ag-card { padding: 18px 14px 16px; }
  .ag-title { font-size: 19.5px; }
  .ag-foot { font-size: 12.5px; }
  .ag-foot .sp { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------- 打印 */
@media print {
  body.ag { background: #fff; }
  .ag-bar, .ag-foot, .ag-draft .no-print { display: none !important; }
  .ag-wrap { max-width: none; padding: 0; }
  .ag-card { border: 0; box-shadow: none; padding: 0; }
  .ag-body h2 { break-after: avoid; }
  .ag-body p, .ag-body li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}