/* 杭湾会AI获客 · 内容创作平台 —— 米白底 + 暗金主色 */
:root {
  --bg: #faf8f3;
  --panel: #ffffff;
  --ink: #2b2620;
  --muted: #8a8177;
  --gold: #b8860b;
  --gold-dark: #96700a;
  --line: #e8e2d6;
  --ok: #2e7d32;
  --warn: #e07b00;
  --danger: #c0392b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overscroll-behavior-y: none; }  /* 禁手机下拉刷新：防误触终止生成（刷新用浏览器菜单） */
body { background: var(--bg); color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 14px; line-height: 1.6; }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 2px solid var(--gold); background: var(--panel); }
.brand { display: flex; gap: 12px; align-items: center; }
.logo { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--gold); color: #fff; font-size: 22px; font-weight: 700; border-radius: 10px; }
.topbar h1 { font-size: 18px; }
.slogan { font-size: 12px; color: var(--muted); }
.model-pick { display: flex; align-items: center; gap: 8px; }
.model-pick select { min-width: 220px; }

.tabs { display: flex; gap: 4px; padding: 10px 24px 0; }
.tab { border: 1px solid var(--line); border-bottom: none; background: #f2ede2; padding: 8px 20px; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 14px; color: var(--muted); }
.tab.active { background: var(--panel); color: var(--gold-dark); font-weight: 700; border-color: var(--gold); }

main { padding: 16px 24px 40px; }
.panel { display: none; }
.panel.active { display: block; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 980px) { .grid2 { grid-template-columns: 1fr; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(60, 48, 20, .06); }
.card h2 { font-size: 15px; margin-bottom: 12px; color: var(--gold-dark); display: flex; align-items: center; }

/* 选题例题 chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 2px 0 10px; }
.chips .lbl { font-size: 12px; color: var(--muted); }
.chip { cursor: pointer; border: 1px solid var(--line); border-radius: 14px; padding: 3px 12px; font-size: 12px; background: #f7f3ea; color: #6b6353; transition: all .15s; }
.chip:hover { border-color: var(--gold); color: var(--gold-dark); background: #fdf7e7; }

/* 生成计时 */
.meta.live { color: var(--gold-dark); font-variant-numeric: tabular-nums; }
.meta.live::before { content: "●"; color: var(--gold); margin-right: 5px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* 正文排版 */
.draft { line-height: 1.9; font-size: 14px; letter-spacing: .2px; }
.draft:empty::before { content: attr(data-placeholder); color: #b9b0a0; font-size: 13px; }
.card h3 { font-size: 13px; margin-bottom: 8px; }
.feat { font-size: 11px; background: #f5ecd8; color: var(--gold-dark); border: 1px solid #e5d5ac; border-radius: 10px; padding: 1px 8px; margin-left: 6px; font-weight: 400; }
.subcard { border: 1px dashed var(--line); border-radius: 8px; padding: 12px; margin-bottom: 12px; }

.fld { display: block; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.fld select, .fld textarea { display: block; width: 100%; margin-top: 4px; }
input, textarea, select { border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 13px; font-family: inherit; background: #fffdf9; color: var(--ink); }
textarea { width: 100%; resize: vertical; margin-bottom: 8px; }
input { margin-bottom: 8px; }
.row input { flex: 1; margin-bottom: 0; }
.row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }

.btn { border: 1px solid var(--gold); background: #fff; color: var(--gold-dark); border-radius: 7px; padding: 7px 16px; cursor: pointer; font-size: 13px; }
.btn:hover { background: #faf3e0; }
.btn.primary { background: var(--gold); color: #fff; }
.btn.primary:hover { background: var(--gold-dark); }
.btn.ghost { border-color: var(--line); color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.draft { border: 1px solid var(--line); background: #fffdf9; border-radius: 8px; padding: 12px; min-height: 260px; white-space: pre-wrap; font-size: 13px; overflow-y: auto; max-height: 480px; }
.draft.small { min-height: 160px; max-height: 320px; }
.meta { font-size: 12px; color: var(--muted); }
.status { font-size: 12px; color: var(--muted); }
.verdict { font-weight: 700; }
.verdict.PASS { color: var(--ok); }
.verdict.WARN { color: var(--warn); }
.verdict.DANGER { color: var(--danger); }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

.mini-list { margin-top: 8px; }
.mini-list.tall { max-height: 420px; overflow-y: auto; }
/* 通知公告：卡片内滚动，长列表不平铺撑高页面（2026-11-08） */
.notice-scroll { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.notice-scroll::-webkit-scrollbar { width: 6px; }
.notice-scroll::-webkit-scrollbar-thumb { background: #d9d0b9; border-radius: 3px; }
.notice-scroll::-webkit-scrollbar-thumb:hover { background: #c4b996; }
.notice-scroll::-webkit-scrollbar-track { background: transparent; }
.notice-scroll > .item:last-child { margin-bottom: 0; }
.item { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; margin-bottom: 8px; background: #fffdf9; }
.item .t { font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.item .d { font-size: 12px; color: var(--muted); margin-top: 3px; }
.item .c { font-size: 12px; margin-top: 5px; color: #55503f; max-height: 66px; overflow: hidden; }
.item .ops { display: flex; gap: 6px; align-items: center; }
.item .ops button { font-size: 11px; padding: 2px 8px; }
.item .d.ok { color: var(--ok); }
.item .d.bad { color: var(--danger); }
.switch { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.daypicks { display: flex; gap: 8px; flex-wrap: wrap; }
.daypicks label { font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.item.excluded { opacity: .55; border-style: dashed; }
.badge { font-size: 11px; border-radius: 9px; padding: 1px 8px; white-space: nowrap; }
.badge.use { background: #e5f2e6; color: var(--ok); }
.badge.excluded { background: #f7e3e0; color: var(--danger); }
.badge.weak { background: #f1ede2; color: var(--muted); }
.badge.rw { background: #fbeecb; color: var(--gold-dark); font-weight: 700; }

/* 管理后台·用户行表头：桌面四列（用户名｜身份｜状态｜到期），窄屏两行避免用户名被挤成「g…」 */
.item .t.adm-urow { display: grid; grid-template-columns: minmax(0, 1fr) 54px 46px auto; gap: 8px; align-items: center; justify-content: initial; }
.adm-urow .adm-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-urow > .badge { justify-self: start; }
.adm-urow > .badge.adm-exp { justify-self: end; font-weight: 400; color: var(--muted); }
.item .row.adm-ops { flex-wrap: wrap; }   /* 桌面端：一行放不下就换行（手机端另用两列网格） */

.ptabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ptabs button { border: 1px solid var(--line); background: #f2ede2; border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 12px; }
.ptabs button.active { background: var(--gold); color: #fff; border-color: var(--gold); }

.foot { display: flex; justify-content: space-between; padding: 12px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--panel); }
.covers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cover-item { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.cover-item img { width: 100%; display: block; }
.form .fld textarea { min-height: 64px; }

/* ============ 手机端全功能适配（≤720px） ============ */
@media (max-width: 720px) {
  /* 顶栏：品牌+模型选择纵向 */
  .topbar { flex-direction: column; gap: 8px; padding: 10px 12px; align-items: flex-start; }
  .topbar h1 { font-size: 16px; }
  .model-pick { width: 100%; }
  .model-pick select { min-width: 0; width: 100%; height: 40px; font-size: 15px; }

  /* 标签页：横向滑动条 */
  .tabs { overflow-x: auto; padding: 8px 10px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; padding: 10px 14px; font-size: 14px; border-radius: 8px 8px 0 0; flex: 0 0 auto; }

  /* 主区与卡片 */
  main { padding: 10px 10px 40px; }
  .card { padding: 14px 12px; }
  .card h2 { font-size: 15.5px; line-height: 1.5; flex-wrap: wrap; }

  /* 表单行全部纵向堆叠，触控目标加大 */
  .notice-scroll { max-height: 300px; }
  .row { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  .row > * { width: 100% !important; min-width: 0 !important; flex: none !important; }
  .row label { flex-direction: column; align-items: stretch; gap: 4px; }
  input, select, textarea { font-size: 16px !important; }  /* 16px防iOS聚焦自动放大 */
  button, .btn { min-height: 44px; font-size: 15px; }
  .fld { margin-bottom: 10px; }
  .fld select, .fld input { height: 42px; }

  /* 迷你列表与草稿框高度自适应 */
  #tab-cards .mini-list.tall { max-height: none !important; }  /* 子标签模式下卡列表整页自然滚动 */

  /* 管理后台用户行：用户名独占一行，身份/状态/到期换到第二行，不再被挤成「g…」 */
  .item .t.adm-urow { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
  .adm-urow .adm-name { flex: 1 1 100%; font-size: 15.5px; line-height: 1.35; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
  .adm-urow > .badge.adm-exp { margin-left: auto; font-size: 11.5px; }
  /* 管理后台操作区：两列网格（否则 8 个按钮各占一整行，一张卡 700px 高） */
  .item .row.adm-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .item .row.adm-ops > * { width: 100% !important; min-width: 0 !important; flex: none !important; }
  .adm-ops > .adm-wide { grid-column: 1 / -1; }
  .adm-ops > button.adm-danger { color: var(--danger); border-color: #e3c3bd; }
  /* 素材卡库：手机上子标签切换（卡列表/蒸馏建卡，方案B） */
  .m-tabbar { display: flex !important; gap: 8px; margin-bottom: 10px; }
  .m-tab { flex: 1; min-height: 44px; border: 1px solid var(--line); background: #f2ede2; border-radius: 8px; font-size: 15px; color: var(--muted); }
  .m-tab.active { background: var(--gold); color: #fff; font-weight: 700; border-color: var(--gold-dark); }
  #tab-cards .card.m-collapsed { display: none; }
  .draft { min-height: 260px; max-height: 55vh; overflow-y: auto; font-size: 15.5px; }
  .item .ops button { min-height: 36px; padding: 6px 12px; }
  .item .ops { flex-wrap: wrap; gap: 6px; }

  /* chips 换行自然 */
  .chips { gap: 6px; }

  /* grid2 在手机上强制单列（覆盖内联格式的兜底） */
  .grid2 { grid-template-columns: 1fr !important; }
}

/* 期限提示隐藏（仅手机；信息在用户中心完整保留，避免撑坏标签栏） */
@media (max-width: 720px) { #userExpire { display: none; } }

/* 超窄屏（≤380px）微调 */
@media (max-width: 380px) {
  .tab { padding: 9px 10px; font-size: 13.5px; }
  .card { padding: 12px 10px; }
}

/* 手机编辑态：草稿框全屏化（进入编辑时body加draft-full类） */
body.draft-full .topbar, body.draft-full .tabs { display: none; }
body.draft-full main { padding: 8px; }
body.draft-full .draft {
  position: fixed; inset: 8px; z-index: 999;
  min-height: 0; max-height: none; height: calc(100vh - 118px);
  font-size: 17px; line-height: 1.9; background: #fff;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
body.draft-full .draft-edit-bar { display: flex; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 1000; }
body.draft-full .draft-edit-bar .btn { min-height: 48px; font-size: 16px; }
body.draft-full #btnEditDraft,
body.draft-full #btnSaveDraft { display: none; }
.draft-edit-bar { display: none; gap: 8px; }
.draft-edit-bar .btn { flex: 1; }

/* 桌面端隐藏手机子标签栏 */
.m-tabbar { display: none; }

/* 公众号贴图：整页限宽，避免控件和列表操作按钮被拉到屏幕最右（2026-11-06） */
@media (min-width: 981px) {
  #tab-paste { max-width: 1080px; }
  /* 记录行的「查看/删除」跟在标题后面，不再贴到卡片最右 */
  #pasteList .item .t { justify-content: flex-start; }
  #pasteList .item .ops { margin-left: 10px; }
}

/* 贴图记录筛选：选中的 chip 高亮（2026-11-06） */
.chip.on { background: #fbeecb; border-color: var(--gold); color: var(--gold-dark); font-weight: 700; }

/* 爆款改写：模式分段控件（2026-11-08） */
.mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: #f7f3ea; }
.mode-switch button { border: 0; background: transparent; padding: 7px 18px; font-size: 13px; color: var(--muted); cursor: pointer; font-family: inherit; }
.mode-switch button.on { background: var(--gold); color: #fff; font-weight: 700; }
/* 改写闸门结果条：跟判定色走，一眼看出能不能用 */
.rw-gates { margin-top: 10px; border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 8px; padding: 10px 12px; background: #fffdf9; font-size: 12px; line-height: 1.7; }
.rw-gates.PASS { border-left-color: var(--ok); background: #f4faf4; }
.rw-gates.WARN { border-left-color: var(--warn); background: #fdf8ee; }
.rw-gates.DANGER { border-left-color: var(--danger); background: #fdf3f1; }
.rw-gates .rwg-head { font-weight: 700; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rw-gates .rwg-frag { margin-top: 6px; color: #6b6353; word-break: break-all; }
.rw-gates .rwg-frag b { background: #f2ede2; padding: 1px 5px; border-radius: 4px; margin-right: 4px; font-weight: 400; }

/* 标题候选：出5个不同钩子公式的标题，点一个替换首行（2026-11-10） */
.title-opts { margin-top: 10px; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; background: #fffdf9; }
.title-opts .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--line); border-radius: 16px; padding: 6px 14px; font-size: 13px; background: #fff; color: var(--ink); text-align: left; line-height: 1.4; }
.title-opts .chip:hover { border-color: var(--gold); background: #fdf7e7; }
.title-opts .chip.on { border-color: var(--gold); background: #fbeecb; box-shadow: inset 0 0 0 1px var(--gold); }
.title-opts .chip.on::after { content: "✓ 已采用"; font-size: 11px; font-weight: 600; color: #fff; background: var(--gold); border-radius: 8px; padding: 1px 6px; white-space: nowrap; flex: none; }
.title-opts .chip .f { font-size: 11px; color: var(--gold-dark); background: #f5ecd8; border-radius: 8px; padding: 0 6px; white-space: nowrap; }

@media (max-width: 720px) {
  .title-opts { padding: 10px; }
  .title-opts .chip { width: 100%; border-radius: 10px; padding: 10px 12px; font-size: 15px; }
}