/* ==========================================================================
   FinGraph 用户系统 · 页面样式
   复用 app.css 的设计令牌（--brand / --ink / --line …），只补 app.css 没有的部件：
   表单、按钮、提示条、列表、模态框等。
   ========================================================================== */

/* ---------- 容器 ---------- */
.fg-wrap { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; }
.fg-wrap.narrow { max-width: 460px; padding-top: 56px; }
.fg-page-h { font-size: 24px; font-weight: 700; margin: 0 0 6px; letter-spacing: .2px; }
.fg-page-d { color: var(--ink-3); font-size: 13.5px; margin: 0 0 24px; }

/* ---------- 卡片 ---------- */
.fg-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 1px 2px rgba(16,26,43,.04);
  margin-bottom: 18px; overflow: hidden;
}
.fg-card-hd {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; background: var(--surface-2);
}
.fg-card-hd h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
.fg-card-hd .step {
  width: 22px; height: 22px; border-radius: 7px; background: var(--brand-50);
  color: var(--brand-600); font-size: 12px; font-weight: 700;
  display: grid; place-items: center; flex: none;
}
.fg-card-bd { padding: 18px 20px; }

/* ---------- 表单 ---------- */
.fg-field { margin-bottom: 16px; }
.fg-field:last-child { margin-bottom: 0; }
.fg-label {
  display: block; font-size: 12.5px; font-weight: 650; color: var(--ink-2);
  margin-bottom: 6px;
}
.fg-label .req { color: var(--up); margin-left: 2px; }
.fg-label .hint { font-weight: 400; color: var(--ink-4); margin-left: 6px; font-size: 11.5px; }

.fg-input, .fg-select, .fg-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 9px 12px; font-size: 13.5px; font-family: inherit;
  color: var(--ink); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.fg-input:focus, .fg-select:focus, .fg-textarea:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(37,99,168,.12);
}
.fg-input:disabled { background: var(--surface-3); color: var(--ink-3); }
.fg-textarea { resize: vertical; min-height: 90px; line-height: 1.7; }
.fg-input.err, .fg-textarea.err { border-color: var(--up); }

.fg-help { font-size: 11.5px; color: var(--ink-4); margin-top: 5px; line-height: 1.6; }
.fg-help.warn { color: var(--gold); }
.fg-help.bad { color: var(--up); }
.fg-help.good { color: var(--down); }

.fg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ---------- 按钮 ---------- */
.fg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); border-radius: 9px; padding: 8px 16px;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: .15s; text-decoration: none; white-space: nowrap;
}
.fg-btn:hover { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand); }
.fg-btn:disabled { opacity: .55; cursor: not-allowed; }
.fg-btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.fg-btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.fg-btn-danger { color: var(--up); border-color: #f0c9c5; background: var(--up-soft); }
.fg-btn-danger:hover { background: #fbe3e1; color: var(--up); }
.fg-btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }
.fg-btn-block { width: 100%; }
.fg-btn-ghost { border-color: transparent; background: transparent; }

/* ---------- 提示条 ---------- */
.fg-alert {
  border-radius: 9px; padding: 10px 14px; font-size: 13px;
  margin-bottom: 16px; line-height: 1.6;
  border-left: 3px solid var(--brand-500); background: var(--brand-50); color: var(--ink-2);
}
.fg-alert.bad { border-color: #e08a82; background: var(--up-soft); color: #8a2a20; }
.fg-alert.warn { border-color: #d9a12b; background: var(--gold-50); color: #6b4d10; }
.fg-alert.good { border-color: #6cc4a0; background: var(--down-soft); color: #0d6b46; }
.fg-alert[hidden] { display: none; }

/* ---------- Toast ---------- */
#fgToast {
  position: fixed; right: 20px; bottom: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.fg-toast {
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 9px; font-size: 13px; box-shadow: 0 6px 20px rgba(14,26,43,.22);
  animation: fgToastIn .22s ease-out; max-width: 380px; line-height: 1.55;
}
.fg-toast-error { background: #8a2a20; }
.fg-toast-ok { background: #0d6b46; }
.fg-toast.out { animation: fgToastOut .25s ease-in forwards; }
@keyframes fgToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fgToastOut { to { opacity: 0; transform: translateY(6px); } }

/* ---------- 头像 ---------- */
.fg-avatar { display: block; }
.fg-avatar-gen { display: grid; }

/* ---------- 密码强度条 ---------- */
.fg-pwbar { display: flex; gap: 4px; margin-top: 7px; }
.fg-pwbar i {
  flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background .2s;
}
.fg-pwbar i.on1 { background: var(--up); }
.fg-pwbar i.on2 { background: #e08a2b; }
.fg-pwbar i.on3 { background: #d9a12b; }
.fg-pwbar i.on4 { background: var(--down); }

/* ---------- 列表 ---------- */
.fg-list { display: flex; flex-direction: column; }
.fg-li {
  display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.fg-li:last-child { border-bottom: 0; }
.fg-li-main { flex: 1; min-width: 0; }
.fg-li-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fg-li-d { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.6; }

/* ---------- 空状态 ---------- */
.fg-empty {
  text-align: center; padding: 40px 20px; color: var(--ink-4); font-size: 13px;
}

/* ---------- 徽标 ---------- */
.fg-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.8;
  background: var(--surface-3); color: var(--ink-3);
}
.fg-badge.brand { background: var(--brand-50); color: var(--brand-600); }
.fg-badge.gold { background: var(--gold-50); color: var(--gold); }
.fg-badge.up { background: var(--up-soft); color: var(--up); }
.fg-badge.down { background: var(--down-soft); color: var(--down); }

/* ---------- 正文块编辑器 ---------- */
.fg-blocks { display: flex; flex-direction: column; gap: 10px; }
.fg-blk {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  padding: 11px 13px; position: relative;
}
.fg-blk-hd {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.fg-blk-type {
  font-size: 11px; font-weight: 700; color: var(--brand-600);
  background: var(--brand-50); border-radius: 5px; padding: 1px 7px;
}
.fg-blk-ops { margin-left: auto; display: flex; gap: 4px; }
.fg-blk-ops button {
  border: 0; background: transparent; color: var(--ink-4); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 5px; line-height: 1;
}
.fg-blk-ops button:hover { background: var(--surface-3); color: var(--ink-2); }
.fg-blk textarea { min-height: 62px; }

.fg-addblk { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- 实体选择器 ---------- */
.fg-picked { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.fg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-50); color: var(--brand-600);
  border: 1px solid var(--brand-100); border-radius: 999px;
  padding: 3px 6px 3px 11px; font-size: 12.5px; font-weight: 600;
}
.fg-chip button {
  border: 0; background: transparent; color: var(--brand-600);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; opacity: .65;
}
.fg-chip button:hover { opacity: 1; }
.fg-chip.warn { background: var(--gold-50); border-color: #ecdcb8; color: var(--gold); }

.fg-sug {
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  margin-top: 6px; max-height: 260px; overflow-y: auto; display: none;
}
.fg-sug.on { display: block; }
.fg-sug div {
  padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line);
}
.fg-sug div:last-child { border-bottom: 0; }
.fg-sug div:hover { background: var(--brand-50); }
.fg-sug .sug-n { font-weight: 600; }
.fg-sug .sug-m { font-size: 11.5px; color: var(--ink-4); }

/* ---------- 导航（登录态） ---------- */
.fg-nav-user {
  display: flex; align-items: center; gap: 9px; margin-left: auto;
  font-size: 13px; flex: none;
}
.fg-nav-user a { color: var(--ink-2); text-decoration: none; }
.fg-nav-user a:hover { color: var(--brand); }

/* API 直出的页面（登录/后台/社区）没有搜索框，只有品牌+导航+账号区三个元素。
   静态站那套四列栅格在这里会空出一列，账号区不是被挤成几像素、就是停在中间。
   单独给一套三列：品牌 / 导航 / 弹性空白 + 账号区靠右。 */
.header-inner-api { grid-template-columns: auto auto minmax(0, 1fr); }
.header-inner-api .fg-nav-user { grid-column: 3; justify-self: end; }

@media (max-width: 1080px) {
  .header-inner-api {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand acct" "nav nav";
  }
  .header-inner-api .fg-nav-user { grid-area: acct; grid-column: auto; }
}

/* ---------- 后台二级筛选（评论审核的 待审/已通过/已隐藏） ---------- */
.fg-tab2.on { color: var(--brand-600); background: var(--brand-50); border-color: var(--brand-100); }
.fg-tab2 .fg-badge { margin-left: 5px; }

/* ---------- 个人主页的内容贡献 tab ---------- */
.fg-ptab.on { color: var(--brand-600); background: var(--brand-50); border-color: var(--brand-100); }

/* ---------- 评论审核卡片里的正文 ---------- */
#modList .fg-li-d { word-break: break-word; }

/* ---------- 窄屏 ---------- */
@media (max-width: 760px) {
  .fg-row2, .fg-row3 { grid-template-columns: 1fr; }
  .fg-wrap { padding: 20px 16px 48px; }
  #modList .fg-li { flex-wrap: wrap; }
}