:root {
  --bg: #faf9f6;
  --card: #ffffff;
  --ink: #2b2b2b;
  --sub: #6b6b6b;
  --accent: #b03a2e;
  --accent-dark: #8e2f25;
  --line: #e8e4dd;
  --ok: #2e7d32;
  --warn: #b26a00;
  --err: #c62828;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.65;
}
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header { background: var(--card); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.logo:hover { text-decoration: none; }
nav { display: flex; align-items: center; gap: 18px; }
nav a { color: var(--sub); }
nav a:hover { color: var(--ink); text-decoration: none; }
.user-badge { color: var(--ink); font-weight: 600; }
.vip-tag { font-style: normal; background: linear-gradient(135deg,#d4af37,#f5d76e); color:#5c4400; font-size:.72rem; padding:1px 7px; border-radius: 10px; font-weight: 700; }

main { min-height: calc(100vh - 180px); padding: 32px 20px 48px; }

.hero { text-align: center; padding: 40px 0 24px; }
.hero h1 { font-size: 2.2rem; margin-bottom: 12px; }
.hero p { color: var(--sub); max-width: 640px; margin: 0 auto 24px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 30px 0; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 16px; text-align: center; }
.step .num { display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: var(--accent); color: #fff; margin-bottom: 8px; }
.step h3 { font-size: 1rem; margin-bottom: 4px; }
.step p { font-size: .85rem; color: var(--sub); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.card h2 { font-size: 1.2rem; margin-bottom: 14px; }

form label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=email], input[type=number], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  font-size: .95rem; background: #fff; color: var(--ink);
}
textarea { min-height: 140px; font-size: 1.2rem; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(176,58,46,.25); border-color: var(--accent); }
.hint { font-size: .82rem; color: var(--sub); margin-top: 4px; }

.btn {
  display: inline-block; background: var(--accent); color: #fff !important; border: none;
  padding: 10px 22px; border-radius: 6px; font-size: .95rem; cursor: pointer; text-decoration: none !important;
}
.btn:hover { background: var(--accent-dark); }
.btn-sm { padding: 6px 14px; font-size: .85rem; }
.btn-ghost { background: transparent; color: var(--accent) !important; border: 1px solid var(--accent); }
.btn-ghost:hover { background: rgba(176,58,46,.06); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.flash { padding: 12px 16px; border-radius: 8px; margin-top: 18px; font-size: .92rem; }
.flash-success { background: #e8f5e9; color: var(--ok); border: 1px solid #c8e6c9; }
.flash-warning { background: #fff8e1; color: var(--warn); border: 1px solid #ffe082; }
.flash-error   { background: #ffebee; color: var(--err); border: 1px solid #ffcdd2; }

table.list { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.list th, table.list td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
table.list th { color: var(--sub); font-weight: 600; }

.status { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: .8rem; font-weight: 600; }
.status-pending    { background: #fff8e1; color: var(--warn); }
.status-processing { background: #e3f2fd; color: #1565c0; }
.status-done       { background: #e8f5e9; color: var(--ok); }
.status-failed     { background: #ffebee; color: var(--err); }

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plan-card { border: 2px solid var(--line); border-radius: 12px; padding: 26px; background: var(--card); }
.plan-card.vip { border-color: #d4af37; }
.plan-card h3 { margin-bottom: 8px; }
.plan-card .price { font-size: 1.6rem; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.plan-card ul { list-style: none; margin-bottom: 18px; }
.plan-card li { padding: 4px 0; }
.plan-card li::before { content: "✓ "; color: var(--ok); font-weight: 700; }

.preview-box {
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  padding: 30px; font-size: 1.6rem; white-space: pre-wrap; line-height: 2;
}
.muted { color: var(--sub); font-size: .88rem; }
.site-footer { border-top: 1px solid var(--line); padding: 24px 0; color: var(--sub); font-size: .85rem; text-align: center; }
@media (max-width: 640px) { .plan-grid { grid-template-columns: 1fr; } nav { gap: 10px; } }

/* ===== 管理后台 ===== */
.admin-nav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.admin-nav a { padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--sub); font-size:.88rem; }
.admin-nav a:hover { color:var(--ink); text-decoration:none; border-color:var(--sub); }
.admin-nav a.active { background:var(--accent); border-color:var(--accent); color:#fff; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:14px; }
.stat { border:1px solid var(--line); border-radius:10px; padding:16px; background:var(--card); }
.stat .n { font-size:1.7rem; font-weight:700; color:var(--ink); line-height:1.2; }
.stat .l { font-size:.82rem; color:var(--sub); margin-top:2px; }
.stat.warn .n { color:var(--warn); }
.stat.err .n { color:var(--err); }
.stat.ok .n { color:var(--ok); }

.btn-danger { background:var(--err); }
.btn-danger:hover { background:#a51f1f; }
.btn-danger-ghost { background:transparent; color:var(--err) !important; border:1px solid var(--err); }
.btn-danger-ghost:hover { background:rgba(198,40,40,.06); }

table.list td.actions { white-space:nowrap; }
table.list tr:hover td { background:rgba(0,0,0,.012); }
.table-wrap { overflow-x:auto; }

.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.filters .f { min-width:130px; }
.filters .f label { font-size:.8rem; color:var(--sub); display:block; margin-bottom:2px; }
.filters input, .filters select { padding:7px 10px; font-size:.88rem; }

.pager { display:flex; gap:8px; align-items:center; margin-top:14px; font-size:.88rem; }
.pager a, .pager span { padding:5px 10px; border:1px solid var(--line); border-radius:6px; }
.pager .cur { background:var(--accent); color:#fff; border-color:var(--accent); }

.code-box { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.9rem; background:#fbfaf8;
  border:1px solid var(--line); border-radius:8px; padding:12px; white-space:pre-wrap; word-break:break-all; max-height:280px; overflow:auto; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:.75rem; background:#eef0f2; color:var(--sub); }
.tag-vip { background:linear-gradient(135deg,#d4af37,#f5d76e); color:#5c4400; font-weight:700; }
.tag-admin { background:#e3f2fd; color:#1565c0; font-weight:700; }
@media (max-width:640px) { .form-row { grid-template-columns:1fr; } }

/* ===== 批量选择删除 ===== */
.batch-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0 12px; }
.col-check { width:30px; text-align:center; }
table.list td.col-check { text-align:center; }

/* ===== 生成参数滑块 ===== */
.tuning-box { border:1px dashed var(--line); border-radius:10px; padding:12px 14px; background:#fbfaf8; }
.slider-row { margin-bottom:14px; }
.slider-row:last-of-type { margin-bottom:6px; }
.slider-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.slider-name { font-size:.9rem; font-weight:600; color:var(--ink); }
.slider-pct { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.88rem; color:var(--accent); font-weight:700; }
.tuning-slider { width:100%; accent-color:var(--accent); padding:0; margin:0 0 2px; height:auto; border:none; background:none; }
.slider-row .hint { display:block; margin:0; }

/* ===== AI 智能在线写字 ===== */
.hw-sets { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 14px; }
.hw-set { display:flex; align-items:center; gap:8px; padding:10px 14px; border:1.5px solid var(--line);
  border-radius:10px; cursor:pointer; background:#fff; }
.hw-set input { margin:0; accent-color:var(--accent); }
.hw-set.cur { border-color:var(--accent); background:#f2f8ff; }
.hw-set .hint { margin:0; }
.hw-topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.hw-progress { font-weight:700; color:var(--accent); font-size:1.05rem; }
.hw-curchar { font-size:1.2rem; color:var(--ink); }
.hw-canvas-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; }
.hw-grid { position:relative; width:380px; height:380px; max-width:92vw; height:auto; aspect-ratio:1;
  border:2px solid var(--accent); border-radius:8px; background:
  linear-gradient(to right, transparent calc(50% - .5px), #f3d9d9 calc(50% - .5px), #f3d9d9 calc(50% + .5px), transparent calc(50% + .5px)),
  linear-gradient(to bottom, transparent calc(50% - .5px), #f3d9d9 calc(50% - .5px), #f3d9d9 calc(50% + .5px), transparent calc(50% + .5px)),
  #fffdf9; }
.hw-grid canvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; border-radius:6px; }
.hw-guide-char { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:300px; line-height:1; color:rgba(0,0,0,.09); pointer-events:none; user-select:none;
  font-family:"Kaiti SC","STKaiti","KaiTi","Noto Serif SC",serif; }
.hw-nav { display:flex; gap:12px; }
.hw-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.hw-chip { width:38px; height:38px; border:1.5px solid var(--line); border-radius:8px; background:#fff;
  font-size:1.05rem; cursor:pointer; color:var(--sub); }
.hw-chip.ok { color:var(--ink); border-color:var(--accent); background:#f2f8ff; }
.hw-chip.cur { box-shadow:0 0 0 2px var(--accent); }
.hw-thumb { width:76px; height:76px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.hw-bar { height:10px; background:#e8eaed; border-radius:6px; overflow:hidden; margin:4px 0 2px; }
.hw-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),#7db4e8); border-radius:6px; transition:width .4s; }

/* ===== 字帖模板扩充 ===== */
.hw-tips { margin:14px 0; padding:12px 14px; background:#f7f9fc; border:1px solid var(--line); border-radius:10px; }
.hw-tips > b { display:block; margin-bottom:6px; }
.hw-tips ol { margin:0; padding-left:20px; color:var(--sub); line-height:1.7; }
.hw-tips li { margin:2px 0; }