/* ============================================================
 * FS · 协议组件样式（PC 官网）
 * ------------------------------------------------------------
 * 1) .ag-box / .ag-item：注册 / 登录 / 签约 / 授权场景的协议勾选区
 *    （由 static/js/agreement.js 渲染）
 * 2) .ag-doc-page：协议全文页（/agreement.html）版式
 * ============================================================ */

/* ---------- 1) 协议勾选区 ---------- */
.ag-box{margin:2px 0 14px;display:flex;flex-direction:column;gap:8px}
.ag-item{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.7;color:var(--ink-2,#5b6472);cursor:pointer}
.ag-item input.ag-check{margin:3px 0 0;flex:none;width:15px;height:15px;accent-color:#1677ff;cursor:pointer}
.ag-item .ag-text{flex:1;min-width:0}
.ag-item .ag-link{color:#1677ff;text-decoration:none}
.ag-item .ag-link:hover{text-decoration:underline}
.ag-item .ag-req{color:#e5484d;font-style:normal;margin-left:3px}
.ag-item-link{font-size:13px;line-height:1.8;color:var(--ink-2,#5b6472)}
.ag-item-link .ag-sum{margin-left:8px;color:#98a1af}
.ag-err{color:#e5484d;font-size:12.5px;margin:0 0 10px;display:none}
.ag-err.show{display:block}
/* 提交被协议校验拦下时的高亮（抖动 + 红框）——
   2026-10-04：原先只显示一行 12.5px 小红字，用户点「注册」视觉上"没反应"。 */
@keyframes ag-attn-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.ag-attn{animation:ag-attn-shake .5s ease-in-out 2;outline:2px solid #e5484d;outline-offset:4px;border-radius:8px}

/* ---------- 2) 协议全文页 ---------- */
.ag-page{max-width:1500px;margin:0 auto;padding:28px 32px 56px;box-sizing:border-box}
.ag-crumb{font-size:13px;color:#98a1af;margin-bottom:14px}
.ag-crumb a{color:#5b6472;text-decoration:none}
.ag-crumb a:hover{color:#1677ff}
.ag-layout{display:flex;gap:28px;align-items:flex-start}
.ag-side{width:220px;flex:none;position:sticky;top:86px;border:1px solid #e6eaf0;border-radius:10px;background:#fff;overflow:hidden}
.ag-side h3{margin:0;padding:13px 16px;font-size:14px;font-weight:600;border-bottom:1px solid #eef1f5;background:#fafbfc}
.ag-side a{display:block;padding:10px 16px;font-size:13.5px;color:#1f2733;text-decoration:none;border-bottom:1px solid #f4f6f9}
.ag-side a:last-child{border-bottom:0}
.ag-side a:hover{background:#f0f6ff;color:#1677ff}
.ag-side a.on{color:#1677ff;font-weight:600;background:#f0f6ff}
.ag-main{flex:1;min-width:0;border:1px solid #e6eaf0;border-radius:10px;background:#fff;padding:28px 32px 36px}
.ag-main h1{font-size:22px;margin:0 0 6px;color:#0b0f19}
.ag-meta{font-size:12.5px;color:#98a1af;margin-bottom:18px}
.ag-doc{font-size:14px;line-height:2;color:#1f2733;white-space:pre-wrap;word-break:break-word}
.ag-empty-doc{color:#98a1af;font-size:13.5px}
@media (max-width:900px){
  .ag-page{padding:20px 16px 40px}
  .ag-layout{flex-direction:column;gap:16px}
  .ag-side{width:100%;position:static;display:flex;flex-wrap:wrap}
  .ag-side h3{width:100%}
  .ag-side a{border-bottom:0;border-right:1px solid #f4f6f9}
  .ag-main{padding:20px 18px 26px}
}