/* ============================================================================
 * 小说工坊 · 视觉润色层（polish.css）
 * ----------------------------------------------------------------------------
 * 定位：只做「外观与动效」，不碰任何业务逻辑。
 *   在 index.html 的 </head> 前、mvp.css 之后引入。
 *
 * 设计原则
 *   1. 结构线更轻、控件描边保留 —— 页面立刻显得更透气，但不丢可点性
 *   2. 圆角 / 阴影 / 时长收敛成少量刻度，全站节奏统一
 *   3. 动效只做「进入」和「反馈」，时长 140–340ms，全部可被
 *      prefers-reduced-motion 关掉；不用会晃眼的持续动画
 *   4. 不新增 DOM、不改 JS：视图是整体 innerHTML 重绘的，
 *      所以 CSS 动画天然会在每次切换视图时重放，不需要任何钩子
 *
 * 想撤销：删掉 index.html 里那一行 <link href="/polish.css"> 即可。
 * ========================================================================== */

/* ============================ 1. 令牌收敛 ============================ */
:root{
  /* 中性色：结构线更轻，层次靠阴影而不是靠描边 */
  --bg:#f1f4f8;
  --panel:#ffffff;
  --ink:#171b21;
  --muted:#69707d;
  --line:#e5eaf1;        /* 结构分隔（卡片、顶栏、区块） */
  --line-2:#d6dde7;      /* 表单控件描边：保持可辨识度 */
  --brand:#2f6fed;
  --brand-dark:#1e50bd;
  --brand-soft:#eaf1ff;
  --danger:#d93b3b;
  --ok:#1f9d55;

  /* 圆角刻度 */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;

  /* 阴影刻度：越高的层越"浮"，但都克制 */
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.07);
  --sh-3:0 4px 12px rgba(16,24,40,.08),0 24px 60px rgba(16,24,40,.16);
  --shadow:var(--sh-2);

  /* 时长与缓动 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:.14s; --t:.22s; --t-slow:.34s;
}

body{ color:var(--ink); }

/* ============================ 2. 可访问性与细节 ============================ */
/* 键盘导航才显示焦点环，鼠标点击不显示 —— 少一层视觉噪音 */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:6px; }
::selection{ background:rgba(47,111,237,.16); }

/* 细一点的滚动条，和整体气质一致 */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(16,24,40,.16); border-radius:999px;
  border:3px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(16,24,40,.28); background-clip:content-box; }

/* ============================ 3. 顶栏 ============================ */
.topbar{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(16,24,40,.03);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{ background:#fff; }
}
.brand{ font-size:16.5px; letter-spacing:.2px; }
.nav a{ transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav a.active{ background:var(--brand-soft); }
.avatar{ box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(47,111,237,.25); }

/* ============================ 4. 按钮与表单 ============================ */
.btn{
  border-color:var(--line-2);
  border-radius:var(--r-sm);
  min-height:34px;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover{ box-shadow:var(--sh-1); }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn.primary{
  box-shadow:0 1px 2px rgba(47,111,237,.28);
}
.btn.primary:hover{ box-shadow:0 2px 8px rgba(47,111,237,.30); }
.btn.sm{ min-height:28px; border-radius:7px; }

.input{
  border-color:var(--line-2);
  border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.input:hover{ border-color:#c3ccda; }
.input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,111,237,.13); }

/* 下拉：去掉系统外观，换成统一的细箭头 */
select.input,
.mvp-form select,
.mvp-member select{
  -webkit-appearance:none; appearance:none;
  padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8 9.5 4.5' fill='none' stroke='%2369707d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:12px 12px;
}

/* 原生文件选择框：默认那副样子和整站气质不搭 */
input[type=file]{
  width:100%; font-size:13px; color:var(--muted);
  padding:5px 0;
}
input[type=file]::file-selector-button{
  font:inherit; font-size:13px; margin-right:12px;
  padding:7px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:#fff; color:var(--ink);
  cursor:pointer;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
input[type=file]::file-selector-button:hover{ background:#f6f8fb; border-color:#b9c2d0; }

/* 详情/资料页：收窄版心，读起来不费劲，右侧不再空一大片 */
.mvp-form{ max-width:620px; }
.mvp-form h1{ font-size:22px; letter-spacing:.2px; }
.mvp-form fieldset{ border-color:var(--line); border-radius:var(--r); }
.mvp-member select{ width:150px; }

/* ============================ 5. 作品卡片 ============================ */
.grid{ gap:18px; }

.card{
  border-color:var(--line);
  border-radius:var(--r-lg);
  padding:16px 17px 15px;
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#ccd7e6; }

/* 封面：hover 时轻微推近，给出"可点"的手感 */
.mvp-book-cover{
  border-radius:var(--r-sm);
  margin-bottom:0;                       /* 交给 .card 的 gap 统一控制 */
}
.mvp-book-cover img{ transition:transform var(--t-slow) var(--ease); }
.card:hover .mvp-book-cover img{ transform:scale(1.045); }

/* ★ 对齐修复：状态徽章原来占一行，一出现就把标签/标题/简介整体下推，
   于是同排卡片内容高低不齐。这里把它们移到封面左上角浮层，
   彻底脱离文档流 —— 所有卡片从此共用同一套纵向节奏。 */
.card > span.pill{
  position:absolute; left:26px; z-index:2;
  background:rgba(17,24,39,.58);
  color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  letter-spacing:.2px;
}
.card > span.pill:nth-of-type(1){ top:26px; }
.card > span.pill:nth-of-type(2){ top:26px; left:auto; right:26px; }

/* 标签行：固定占一行高度（即使没有标签也占位）。
   这样"有标签 / 没标签"的卡片，标题与简介都落在同一条基线上 ——
   之前的做法是隐藏空行，结果没标签的卡片标题反而偏高。 */
.mvp-tags{
  margin-bottom:0; gap:6px;
  min-height:22px; max-height:22px;
  flex-wrap:nowrap; overflow:hidden;
}
.mvp-tags span{
  background:#f2f5f9; color:#54637a;
  padding:3px 9px; border-radius:999px; font-size:11.5px;
  transition:background var(--t-fast) var(--ease);
}
.card:hover .mvp-tags span{ background:#e9eff7; }

.card h3{ font-size:16.5px; letter-spacing:.1px; }
.card .summary{ min-height:44px; }

.card .actions{
  gap:7px; padding-top:12px;
  border-top-color:#f1f4f9;
}
/* 读者视角：整张卡只有一个「阅读」，做成通栏主按钮更果断 */
.card .actions > .btn.primary:only-child{ width:100%; }

/* 危险操作（删除）在作者视角里独立成色，别再和编辑/设置同级 */
.card .actions button.btn{ color:var(--danger); border-color:#f2d4d4; }
.card .actions button.btn:hover{ background:#fdf4f4; border-color:#e7b6b6; box-shadow:none; }

/* ============================ 6. 登录 / 注册 ============================ */
/* 让认证卡片真正居中，而不是贴在顶部下面留一大片空白 */
main#view:has(> .auth){
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 56px); padding:28px 20px;
}
main#view:has(> .auth) > .auth{ margin:0; }

.auth{
  border-color:var(--line);
  border-radius:var(--r-xl);
  padding:30px 28px;
  box-shadow:var(--sh-2);
}
.auth .input{ padding:11px 13px; }

/* 用户名的规则说明太长，塞在输入框里会被截成半句（"2–24 位，可用汉字、字…"）。
   挪到标签右侧当小字提示，输入框留给用户自己填。
   用 @supports 包住：不支持 :has() 的浏览器保持原样，不会丢信息。 */
@supports selector(:has(*)){
  #username::placeholder{ color:transparent; }
  .auth .field:has(> #username) label::after{
    content:"· 2–24 位汉字 / 字母 / 数字 / 下划线";
    font-weight:400; color:var(--muted); margin-left:7px; letter-spacing:0;
  }
}

/* ============================ 7. 空状态 / 载入 ============================ */
.empty{
  border-color:#dbe2ec;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff,#fbfcfe);
}
.loading{ color:var(--muted); }

/* ============================ 8. 弹层 ============================ */
.modal-root{ background:rgba(18,24,33,.42); }
.modal{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:24px 26px;
}
.toast{
  border-radius:var(--r);
  padding:12px 20px;
  box-shadow:0 10px 32px rgba(0,0,0,.24);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease-spring);
}

/* ============================ 9. 编辑器：给密集工具栏分层 ============================ */
.toolbar{
  padding:8px 14px;
  gap:7px;
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(16,24,40,.03);
}
.tb-row{ gap:5px; }
.tb-sep{ background:#e9eef5; height:20px; margin:0 7px; }
.tb-btn{
  height:30px; min-width:30px;
  border-radius:var(--r-sm);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.tb-btn:hover{ background:#f2f5fa; }
.tb-btn.on{ background:var(--brand-soft); border-color:#cfe0ff; }

/* ============================ 10. 动效层 ============================ */
/*
 * 关键点：视图切换是整体 innerHTML 重绘，所以新建出来的元素
 * 会自动重新播放 CSS 动画 —— 不需要任何 JS 钩子。
 */

@keyframes nsViewIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
@keyframes nsFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes nsCardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes nsPopIn{
  from{ opacity:0; transform:translateY(12px) scale(.975); }
  to{ opacity:1; transform:none; }
}

/* 主要页面容器淡入上浮（认证页、作品库、发现、字体库、资料、通知…） */
#view > .wrap,
#view > .auth{ animation:nsViewIn var(--t) var(--ease) both; }

/* 弹窗：.modal-root 用 hidden 属性切换 display，
   从 none 变回 flex 会重新触发动画，因此每次打开都会重放 */
.modal-root:not([hidden]){ animation:nsFadeIn var(--t-fast) var(--ease) both; }
.modal-root:not([hidden]) > .modal{ animation:nsPopIn var(--t) var(--ease-spring) both; }

/* 卡片错峰入场：只做前 12 张，后面的直接跟随，避免长列表"爬行" */
.grid > .card{ animation:nsCardIn var(--t-slow) var(--ease) both; }
.grid > .card:nth-child(1){ animation-delay:.02s }
.grid > .card:nth-child(2){ animation-delay:.05s }
.grid > .card:nth-child(3){ animation-delay:.08s }
.grid > .card:nth-child(4){ animation-delay:.11s }
.grid > .card:nth-child(5){ animation-delay:.14s }
.grid > .card:nth-child(6){ animation-delay:.17s }
.grid > .card:nth-child(7){ animation-delay:.20s }
.grid > .card:nth-child(8){ animation-delay:.23s }
.grid > .card:nth-child(9){ animation-delay:.26s }
.grid > .card:nth-child(10){ animation-delay:.29s }
.grid > .card:nth-child(11){ animation-delay:.32s }
.grid > .card:nth-child(n+12){ animation-delay:.35s }

/* 章节列表 / 目录项：淡入，带一点点位移 */
.toc-list li,
.font-card,
.mvp-comment,
.notif{ animation:nsFadeIn var(--t) var(--ease) both; }

/* 尊重系统的"减少动态效果"设置：全部关掉，只保留状态变化 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================ 11. 窄屏微调 ============================ */
@media (max-width:720px){
  .wrap{ padding:20px 14px 60px; }
  .grid{ gap:14px; }
  .card{ padding:14px 14px 13px; border-radius:var(--r); }
  .card > span.pill{ left:22px; }
  .card > span.pill:nth-of-type(1){ top:22px; }
  .card > span.pill:nth-of-type(2){ top:22px; left:auto; right:22px; }
  .page-head h1{ font-size:20px; }
  .mvp-form{ max-width:100%; }
  main#view:has(> .auth){ min-height:calc(100vh - 110px); }
  .auth{ padding:24px 20px; border-radius:var(--r-lg); }
}

/* ============================ 12. 阅读设置抽屉 ============================ */
/*
 * 问题：抽屉里三处左内边距各不相同 —— 工具行 12px、「行间距」行 0、色彩/翻页 16px，
 * 所以「行间距」那一行的文字顶着抽屉边缘，和上下两节对不齐。这里统一到 16px。
 */
.rm-drawer-tools{ padding:8px 16px; }

.mvp-reader-setting{
  padding:16px;                                    /* 原来是 16px 0 */
  border-bottom:1px solid var(--rm-line,#e5e8ee);  /* 补上，与上下两节节奏一致 */
  font-size:12.5px;
  color:var(--rm-muted,var(--muted));
}

/* 「行间距」的下拉没有 .input 类，所以没吃到统一外观，长得像系统控件。
   这里按抽屉自身的语言（细描边 + 主题色）重新塑形。 */
.mvp-reader-setting select{
  -webkit-appearance:none; appearance:none;
  font:inherit; font-size:12.5px;
  padding:6px 30px 6px 11px;
  border:1px solid var(--rm-line,#e5e8ee);
  border-radius:var(--r-sm);
  background-color:var(--rm-bg,#fff);
  color:var(--rm-ink,#22262c);
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8 9.5 4.5' fill='none' stroke='%238b919b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px 12px;
}
.mvp-reader-setting select:hover{ background-color:var(--rm-hl,#eef3fd); }
.mvp-reader-setting select:focus-visible{ outline:2px solid var(--rm-ink,#22262c); outline-offset:2px; }

/* ============================ 13. 阅读页强调色（跟随 5 套纸色主题） ============================ */
/*
 * 原来「发表评论」是一颗写死的绿 #497c70：
 *   1) 5 套纸色主题换背景，它却永远不变；
 *   2) 更麻烦的是它只改了 background，border-color 还留着 .btn.primary 的品牌蓝
 *      #2f6fed —— 绿底贴一圈 1px 蓝边，看着发脏；
 *   3) 我上一轮加的蓝色投影也一并落在它身上。
 * 这里给阅读页一套自己的强调色，并在各主题下微调。
 */
.rm{
  --rm-accent:#497c70;        /* 底色 */
  --rm-accent-line:#3d6a5f;   /* 描边 / hover（比底色略深） */
  --rm-accent-ink:#ffffff;    /* 文字 */
}
.rm[data-theme="paper"]{ --rm-accent:#3f7266; --rm-accent-line:#345f55; }
.rm[data-theme="sepia"]{ --rm-accent:#3a6a5e; --rm-accent-line:#30594f; }
.rm[data-theme="green"]{ --rm-accent:#2f5c50; --rm-accent-line:#274c42; }
/* 夜间底色深，按钮要更亮一档才立得住，文字相应转深 */
.rm[data-theme="night"]{ --rm-accent:#5f9484; --rm-accent-line:#7cb2a2; --rm-accent-ink:#10161a; }

/* ---- 章末「本章交流」 ---- */
.mvp-social{ padding-top:26px; }

/* 标题原来用 system-ui，和正文（站点中文栈 + 作品样式）不是一套；
   margin:12px 0 叠在 padding-top 上，上方 36px、下方 18px，节奏也不均。 */
.mvp-social h3{
  font-family:inherit;
  font-size:19px;
  font-weight:600;
  line-height:1.5;
  margin:0 0 16px;
  letter-spacing:.2px;
}

/* 表单控件换到阅读色彩系：原来描边是冷灰 --line-2、聚焦是蓝色光晕 */
.mvp-social .input{
  background:var(--rm-bg,#fff);
  color:var(--rm-ink,#22262c);
  border:1px solid var(--rm-line,#e5e8ee);
  border-radius:var(--r-sm);
}
.mvp-social .input::placeholder{ color:var(--rm-muted,#6d737b); }
.mvp-social .input:hover{ border-color:var(--rm-muted,#6d737b); }
.mvp-social .input:focus{
  border-color:var(--rm-accent,#497c70);
  box-shadow:0 0 0 3px var(--rm-hl,#eef3fd);
}

/* 次级按钮（点赞）：描边也用 --rm-line，别再用站点冷灰 */
.mvp-social .btn{
  border-color:var(--rm-line,#e5e8ee);
  color:var(--rm-ink,#22262c);
  background:transparent;
}
.mvp-social .btn:hover{
  background:var(--rm-hl,#eef3fd);
  border-color:var(--rm-line,#e5e8ee);
  box-shadow:none;
}
/* 点赞按钮初始文案是「加载点赞…」，数据回来后变宽会跳一下 —— 给个最小宽度稳住 */
#chapterLike{ min-width:104px; justify-content:center; }

/* 主按钮：底色、描边、投影全部跟着主题走 */
.mvp-social .primary{
  background:var(--rm-accent,#497c70);
  border-color:var(--rm-accent-line,#3d6a5f);
  color:var(--rm-accent-ink,#fff);
  box-shadow:none;
}
.mvp-social .primary:hover{
  background:var(--rm-accent-line,#3d6a5f);
  border-color:var(--rm-accent-line,#3d6a5f);
  color:var(--rm-accent-ink,#fff);
  box-shadow:none;
}

/* 通栏主按钮分量过重：章评是"读完随手说一句"的次级动作，
   改成按内容宽度、靠右对齐。 */
.mvp-social form > .btn{ justify-self:end; min-width:124px; }

/* 「本章完」夹在上下两条分隔线中间，略微收紧一点 */
.rm-end{ margin:20px 0 0; }

@media (max-width:720px){
  /* 窄屏下右对齐的小按钮不好点，恢复通栏 */
  .mvp-social form > .btn{ justify-self:stretch; }
  .mvp-social h3{ font-size:17.5px; }
}

/* ============================ 14. 阅读页统一强调色（A 方案） ============================ */
/*
 * 背景：阅读页里原本是「蓝绿各管一摊」——
 *   章评按钮是绿（#497c70），而抽屉里选中的翻页方式、划线入口激活态、
 *   划线浮动按钮、底部进度条、以及「返回编辑作品」都还是站点品牌蓝。
 * 这里把**阅读器外壳**统一到 --rm-accent，并跟随 5 套纸色主题。
 *
 * 刻意不动的地方：划线高亮（mark.ns-hl*）与段评气泡（.ns-*）。
 *   那是**功能语义色**（自己的线 vs 别人的线），不是装饰色，
 *   换掉会破坏"自己的蓝 / 别人的暖黄"这套已经写在 README 里的颜色语言。
 */
.rm{
  --rm-accent-soft:#e9f1ed;   /* 选中态底色：主题色的浅色调 */
}
.rm[data-theme="paper"]{ --rm-accent-soft:#e9efe6; }
.rm[data-theme="sepia"]{ --rm-accent-soft:#eaece0; }
.rm[data-theme="green"]{ --rm-accent-soft:#dce9de; }
.rm[data-theme="night"]{ --rm-accent-soft:#22332c; }

/* 顶栏按钮的激活态（原来是 --rm-hl 冷蓝底 + 品牌蓝字） */
.rm-btn.on{ background:var(--rm-accent-soft,#e9f1ed); color:var(--rm-accent,#497c70); }
.rm[data-theme="night"] .rm-btn.on{ color:var(--rm-accent,#5f9484); }

/* 「划线」入口进入激活态（原来是整块品牌蓝） */
.rm-pick.on{
  background:var(--rm-accent,#497c70);
  border-color:var(--rm-accent,#497c70);
  color:var(--rm-accent-ink,#fff);
}
.rm-pick.on svg{ color:var(--rm-accent-ink,#fff); }
.rm[data-theme="night"] .rm-pick.on{ color:var(--rm-accent-ink,#10161a); }

/* 抽屉里选中的翻页方式（就是你截图里那个蓝框蓝字的「上下」） */
.rm-turn-options button.on{
  border-color:var(--rm-accent-line,#3d6a5f);
  background:var(--rm-accent-soft,#e9f1ed);
  color:var(--rm-accent,#497c70);
}

/* 划线浮动按钮的激活态 */
.rm-fab.on{
  background:var(--rm-accent,#497c70);
  border-color:var(--rm-accent,#497c70);
  color:var(--rm-accent-ink,#fff);
}

/* 底部阅读进度条 */
.rm-pbar i{ background:var(--rm-accent,#497c70); }

/* 阅读页里的普通按钮（如抽屉底部的「返回编辑作品」）：
   原来底色是站点白 #fff、文字继承 a 的品牌蓝 —— 在纸色/夜间主题上都不对。
   排除 .primary，避免盖掉章评主按钮的白字。 */
.rm .btn:not(.primary){
  color:var(--rm-ink,#22262c);
  border-color:var(--rm-line,#e5e8ee);
  background:var(--rm-bg,#fff);
}
.rm .btn:not(.primary):hover{ background:var(--rm-hl,#eef3fd); }

/* ============================ 15. 作品设置页的操作行 ============================ */
/*
 * 根因：全站只有 `.card .actions` 一条规则，而作品设置页的
 * `<div class="actions">` 在卡片外面，所以它**完全没有样式** ——
 * 「保存设置」和「返回编辑」是两个相邻的 inline-flex，
 * HTML 里又没有空白字符，于是零间距贴在一起。
 * 这里给它补上行内布局与间距（作用域限定在 .mvp-form，绝不碰卡片里的 .actions）。
 */
.mvp-form .actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}