/* 彩泥造物社 · 管理后台 —— 暖陶土主题 */
:root {
  --bg: #FAF7F2;
  --card: #FFFFFF;
  --ink: #3B2F26;
  --ink-2: #8A7A6D;
  --line: #EFE7DD;
  --brand: #E8734A;
  --brand-deep: #D45B32;
  --brand-soft: #FDEEE7;
  --ok: #3D9A6C;
  --danger: #D64545;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.hidden { display: none !important; }
.muted { color: var(--ink-2); font-weight: 400; font-size: 13px; }

/* 登录 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  width: 380px; max-width: 100%;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 36px 32px;
  box-shadow: 0 12px 40px rgba(59, 47, 38, 0.08);
  text-align: center;
}
.login-logo {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #FF7043, #FFD93D);
}
.login-card h1 { font-size: 20px; }
.login-sub { color: var(--ink-2); margin: 4px 0 22px; font-size: 13px; }

/* 表单 */
.field { display: block; text-align: left; margin-bottom: 14px; }
.field > span { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #FFFDFB; color: var(--ink);
  font-size: 14px; font-family: inherit;
  outline: none; transition: border 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); }
.form-error { color: var(--danger); font-size: 13px; margin-top: 10px; }

/* 调色板色值预览：把「#FF7043,#FFD93D」画成一排真实颜色的小圆片 */
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.swatch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px;
  background: #FFFDFB; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--ink-2); font-family: ui-monospace, Menlo, Consolas, monospace;
}
.swatch i { width: 18px; height: 18px; border-radius: 50%; display: block; box-shadow: inset 0 -2px 0 rgba(74, 59, 46, .12); }
.swatch-bad { border-style: dashed; color: var(--danger); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 10px; cursor: pointer;
  padding: 10px 18px; font-size: 14px; font-family: inherit;
  transition: opacity 0.15s, transform 0.05s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); }
.btn-ghost { background: var(--brand-soft); color: var(--brand-deep); }
.btn-danger { background: #FBEAEA; color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* 顶栏 */
.topbar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar-inner {
  max-width: 960px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-dot { width: 14px; height: 14px; border-radius: 5px; background: linear-gradient(135deg, #FF7043, #FFD93D); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.admin-email { color: var(--ink-2); font-size: 13px; }
.editor-title { font-size: 15px; }

.container { max-width: 960px; margin: 0 auto; padding: 20px; }
.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.list-head h2 { font-size: 17px; }

/* 教程列表 */
.tut-list { display: flex; flex-direction: column; gap: 12px; }
.tut-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px;
}
.tut-cover { width: 72px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--brand-soft); flex: none; }
.tut-pick { width: 16px; height: 16px; flex: none; cursor: pointer; }
/* 批量操作条：勾选后浮在列表上方，省得一行行点 */
.batch-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 16px; margin-bottom: 12px;
}
.batch-select {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #FFFDFB; color: var(--ink); font-family: inherit; font-size: 13px;
}
.tut-cover.placeholder { display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-size: 11px; }
.tut-meta { flex: 1; min-width: 0; }
.tut-title { font-weight: 700; }
/* 上架状态：未上架整行压暗，标题旁挂一个小标签，一眼能看出这篇小程序里看不到 */
.tut-off { opacity: 0.62; }
.tut-state { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 7px; vertical-align: middle; }
/* 这两个色值原先写成 var(--green-soft) / var(--yellow-soft)，但 :root 里从没定义过这两个变量，
   结果背景色解析失败 → 状态标签变成透明底、只剩文字，看着像没样式。直接给死值更稳。 */
.tut-state.on { color: #4A8C3A; background: #E4F1DD; }
.tut-state.off { color: #A4701C; background: #FBEBCB; }
.tut-sub { color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.tut-diff { font-size: 12px; color: var(--brand-deep); background: var(--brand-soft); border-radius: 6px; padding: 2px 8px; flex: none; }
.tut-actions { display: flex; gap: 8px; flex: none; }

/* 编辑器 */
.editor-wrap { min-height: 100vh; }
.editor-body { padding-bottom: 80px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
}
.card h3 { font-size: 15px; margin-bottom: 14px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sec-head h3 { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.img-row { display: flex; align-items: center; gap: 10px; }
.img-row input { flex: 1; }
.thumb { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--brand-soft); }
.upload-btn { position: relative; overflow: hidden; flex: none; }

/* 部件编辑 */
.part-block { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #FFFDFB; }
.part-head { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.part-head input[type="text"] { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.part-head input[type="color"] { width: 40px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.step-block { border-top: 1px dashed var(--line); padding: 12px 0 4px; margin-top: 10px; }
.step-row { display: flex; gap: 10px; align-items: flex-start; }
.step-row textarea { flex: 1; resize: vertical; }
.step-img { width: 72px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--brand-soft); flex: none; cursor: pointer; }
.step-ops { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.step-ops .step-ai,
.step-ops .step-split,
.step-ops .step-imgai { background: var(--brand); color: #fff; }
.step-ops .step-ai:hover,
.step-ops .step-split:hover,
.step-ops .step-imgai:hover { background: var(--brand-deep); }
.step-title-input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; font-family: inherit; }
.step-type, .ai-p-type { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-family: inherit; }
.step-no { display: inline-block; font-size: 11px; color: var(--brand-deep); background: var(--brand-soft); border-radius: 6px; padding: 1px 7px; margin-bottom: 6px; }

/* 勾选项（连接表单的出图开关、单步重写的字段勾选） */
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; margin-bottom: 10px; }
.check input { flex: none; margin-top: 3px; }
.check code { background: var(--brand-soft); border-radius: 4px; padding: 0 4px; }
.btn.active { background: var(--brand); color: #fff; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: rgba(59, 47, 38, 0.92); color: #fff;
  padding: 10px 20px; border-radius: 10px; font-size: 13px;
  z-index: 99; max-width: 80vw;
}

/* 弹窗 */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(59, 47, 38, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
.modal-card {
  width: 720px; max-width: 100%;
  background: var(--card); border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 18px 60px rgba(59, 47, 38, 0.22);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h3 { font-size: 16px; }

/* 连接列表 */
.conn-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 8px; background: #FFFDFB;
}
.conn-item.active { border-color: var(--brand); background: var(--brand-soft); }
.conn-main { flex: 1; min-width: 0; }
.conn-name { font-weight: 700; font-size: 14px; }
.conn-meta { color: var(--ink-2); font-size: 12px; margin-top: 2px; word-break: break-all; }
.conn-badge {
  font-size: 11px; border-radius: 6px; padding: 2px 8px; flex: none;
  background: var(--brand-soft); color: var(--brand-deep);
}
.conn-ops { display: flex; gap: 6px; flex: none; }

/* AI 生成 */
.ai-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ai-thumb { position: relative; width: 76px; height: 60px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.ai-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-thumb .rm {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border: none; border-radius: 50%; background: rgba(59,47,38,0.7); color: #fff;
  font-size: 11px; line-height: 18px; cursor: pointer; padding: 0; text-align: center;
}
.ai-thumb .idx {
  position: absolute; left: 2px; bottom: 2px;
  background: rgba(59,47,38,0.7); color: #fff; border-radius: 4px;
  font-size: 11px; line-height: 16px; padding: 0 5px;
}
#pickimg-list .ai-thumb { cursor: pointer; width: 96px; height: 76px; }
#pickimg-list .ai-thumb:hover { border-color: var(--brand); }

/* 流式进度 */
.ai-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ai-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ai-progress-bar i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width 0.2s; }
.ai-progress .muted { flex: none; min-width: 96px; text-align: right; }

/* 示例描述 */
.ai-examples { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }

/* 生成结果预览（可就地编辑） */
.ai-part-head input[type="text"] { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.ai-part-head input[type="color"] { width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; padding: 0; }
.ai-part-steps { margin-top: 6px; }
.ai-step { display: flex; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--line); }
.ai-step:first-child { border-top: none; }
.ai-step-side { display: flex; flex-direction: column; gap: 4px; flex: none; width: 76px; }
.ai-step-img { width: 76px; height: 58px; border-radius: 8px; object-fit: cover; background: var(--brand-soft); }

/* 步骤图悬停放大：缩略图太小看不清细节，鼠标停上去弹一层大图 */
.zoomable { cursor: zoom-in; }
.zoom-layer {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 41, 31, 0.72);
  pointer-events: none; /* 不挡住下面的点击，移开鼠标即消失 */
}
.zoom-layer.hidden { display: none; }
.zoom-layer img {
  max-width: 84vw;
  max-height: 84vh;
  border-radius: 12px;
  background: #FFFDFB;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.ai-step-side .btn { padding: 4px 6px; font-size: 11px; }
.ai-step-body { flex: 1; min-width: 0; }
.ai-step-body input, .ai-step-body textarea {
  width: 100%; padding: 7px 10px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 8px; background: #FFFDFB;
  color: var(--ink); font-family: inherit; font-size: 13px; resize: vertical;
}
.ai-step-body input:focus, .ai-step-body textarea:focus { border-color: var(--brand); outline: none; }
.ai-step-note { font-size: 11px; }
.ai-basic .field { margin-bottom: 10px; }
.ai-basic .field input, .ai-basic .field textarea, .ai-basic .field select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font-family: inherit; font-size: 13px; resize: vertical;
}
.ai-basic .field input:focus, .ai-basic .field textarea:focus, .ai-basic .field select:focus { border-color: var(--brand); outline: none; }

/* 单步重写：原文 / 改写后对照 */
.ai-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
/* 单步弹窗的模式切换（重写 / 拆步 / 补步） */
.ai-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.ai-modes .ai-mode.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); font-weight: 600; }
/* 拆步 / 补步的预览卡片 */
.ai-step-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: #FFFDFB; }
.ai-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ai-step-no {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); font-size: 12px; font-weight: 600;
}
.ai-step-desc { font-size: 13px; color: var(--ink); }
.ai-step-tip { font-size: 12px; margin-top: 6px; }
.ai-diff-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #FFFDFB; }
.ai-diff-row .check { margin-bottom: 8px; color: var(--ink); font-weight: 600; }
.ai-diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .ai-diff-cols { grid-template-columns: 1fr; } }
.ai-diff-col { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ai-diff-old { color: var(--ink-2); text-decoration: line-through; }
.ai-diff-new { color: var(--ink); }
.ai-status {
  font-size: 13px; color: var(--brand-deep); background: var(--brand-soft);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
}
.ai-part { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #FFFDFB; }
.ai-part-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
/* .ai-part / .ai-step / .ai-basic 的可编辑版样式见上方「生成结果预览」一节 */

/* ===== API Key 管理 ===== */
.modal-card-wide { width: 860px; }
/* 明文只出现一次的提示条：视觉上要跟普通表单区分开，让人知道这里必须动手复制 */
.key-created {
  border: 1px solid var(--brand); background: var(--brand-soft);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.key-created-head { font-size: 13px; margin-bottom: 8px; }
.key-plain-row { display: flex; align-items: center; gap: 8px; }
.key-plain {
  flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; word-break: break-all; line-height: 1.5;
  background: #FFFDFB; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.key-list { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; }
.key-item { display: flex; flex-direction: column; gap: 10px; }
.key-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px;
}
/* 停用/吊销的整行压暗，与教程列表的 .tut-off 同一套观感 */
.key-off { opacity: 0.62; }
.key-main { flex: 1; min-width: 0; }
.key-title { font-weight: 700; }
.key-sub { color: var(--ink-2); font-size: 12px; margin-top: 3px; }
.key-sub code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.key-desc { color: var(--ink-2); font-size: 12px; margin-top: 3px; }
.key-scopes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.key-scopes .tag, .key-scope-row .tag {
  font-size: 11px; color: var(--brand-deep); background: var(--brand-soft);
  border-radius: 6px; padding: 2px 7px;
}
.key-scope-row { display: flex; flex-direction: column; gap: 8px; }
/* 勾选框不能继承 .field input 的 width:100%——那会让复选框撑满整行、把文字挤成竖排 */
.key-scope { align-items: center; margin-bottom: 0; }
.key-scope input[type=checkbox] { width: auto; margin-top: 0; flex: none; }
.key-scope span { display: inline; }