/* ============================================================================
 * yzy-ui.css · 于振源工具/内容页「统一设计系统」单一真源
 * ----------------------------------------------------------------------------
 * 用法（新页面只做两件事，就天生和全站一致）：
 *   1) <link rel="stylesheet" href="/lib/yzy-ui.css">
 *   2) 直接用下面的类：.container / .card / .btn / 表单元素，颜色一律用 var(--…)
 *   页面自己的 <style> 只写「这一页独有」的东西，不要再复制一份 :root/.container/.card。
 *
 * 想统一调整全站风格？只改这个文件一处，所有引用它的页面一起变。
 * ⚠️ 改完记得 ./deploy.sh；微信缓存狠，可给 <link> 加 ?v=日期 逼刷新。
 * 配套规则见 skill「振源官网-视觉规范」。
 * ========================================================================== */

/* ── 设计 Token（颜色 / 阴影 / 圆角 / 间距 / 字体）───────────────────────────
 * 断点：桌面默认；≤640px 进入手机紧凑档（下面的媒体查询统一处理边距）。          */
:root{
  /* 品牌金 + 暖米底（全站主色，勿逐页另调） */
  --brand:#EF9F27; --brand-soft:#FBE5BE; --brand-deep:#B6741A;
  --ink:#1A1A1A; --ink-2:#4A4A4A; --ink-3:#8A8A8A;
  --line:#ECE6DC; --bg:#FBF8F2; --card:#FFFFFF;
  --danger:#B84B3A; --success:#2F7D56;
  --shadow:0 8px 32px rgba(28,20,8,.08);
  --radius:14px;            /* 卡片圆角 */
  --radius-sm:11px;         /* 按钮 / 输入框圆角 */

  /* 间距标准（手机端「边距一致」的唯一出处，别再各页写死）：
   *   --edge     外层卡片离屏幕边的距离
   *   --card-pad 卡片内边距（外卡→内容），--edge + --card-pad = 内容离屏 = 28px  */
  --edge:10px;
  --card-pad:18px;
  --gap:14px;

  /* 字体：正文用系统无衬线；标题/金句可切 serif */
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-serif:"Noto Serif SC","Songti SC",Georgia,serif;
}

/* ── 基础重置 ─────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{overflow-x:hidden;max-width:100%;}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
img{max-width:100%;}

/* ── 布局：容器 + 卡片 ─────────────────────────────────────────────────────── */
.container{max-width:1300px;margin:0 auto;padding:22px 22px 56px;}
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;
}

/* ── 表单：输入框 / 文本域 / 字段 ─────────────────────────────────────────── */
.field{margin-bottom:18px;}
.field-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:7px;}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
label{font-size:14px;font-weight:650;color:var(--ink);}
input,textarea,select{
  width:100%;font:inherit;color:inherit;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#FFFDFC;padding:12px 14px;outline:none;
  min-height:46px;font-size:16px;             /* 16px：iOS 聚焦不自动放大 */
  transition:border-color .2s,box-shadow .2s;
}
textarea{resize:vertical;min-height:116px;line-height:1.7;}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(239,159,39,.14);}

/* ── 按钮 ─────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:var(--radius-sm);padding:13px 18px;min-height:48px;
  font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;
  transition:transform .18s,box-shadow .18s,filter .18s;}
.btn:active{transform:scale(.99);}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 8px 22px rgba(26,26,26,.18);}   /* 主操作：墨黑 */
.btn-brand{background:var(--brand);color:#fff;}                                            /* 品牌金实心 */
.btn-ghost{background:var(--card);border:1px solid var(--brand);color:var(--brand-deep);}  /* 描边金 */
.btn-soft{background:var(--brand-soft);color:var(--brand-deep);}                            /* 浅金填充 */
.btn-line{background:var(--card);border:1px solid var(--line);color:var(--ink-3);}          /* 次要/取消 */
.btn:disabled{opacity:.55;cursor:default;}
.btn-block{display:flex;width:100%;}

/* ── 顶栏（返回工作台）——各工具页统一的头 ─────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;}
.topbar .logo{display:inline-flex;align-items:center;text-decoration:none;}
.topbar .logo img{height:42px;width:auto;display:block;opacity:.82;}

/* ── 小组件 ───────────────────────────────────────────────────────────────── */
.hint{background:var(--brand-soft);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--brand-deep);}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--brand-deep);
  background:var(--brand-soft);border-radius:999px;padding:4px 11px;font-weight:600;white-space:nowrap;}

/* ── 手机端紧凑档（≤640px）：全站「边距一致」的唯一出处 ─────────────────────────
 * 标准：外层卡离屏 = --edge(10px)；内容离屏 = --edge + --card-pad = 28px。
 * 若页面卡片里还套了一层（如 .composer-body），把那层横向 padding 收到 8px，
 * 让「10(container)+10(card)+8 = 28」对齐，别让嵌套层数把内容越推越里。            */
@media(max-width:640px){
  .container{padding:16px var(--edge) 44px;}         /* 外层：离屏 --edge(10px) */
  .card{padding:16px var(--card-pad);}               /* 卡片内边距 --card-pad(18px) → 内容离屏 = 10+18 = 28px（与批量生图面板、大师系两层相加后完全一致） */
  input,textarea,select{font-size:16px;}             /* 保持防 iOS 放大 */
}