/* =====================================================================
 * Carnet · 弹窗与表单   （样式 8 / 16）
 * ---------------------------------------------------------------------
 * ① 通用弹窗（含滚动条美化、吸底操作栏）
 * ② 封面名称、色块网格、模板网格、上传区
 *
 * 说明：样式拆分成多个文件后靠 <link> 顺序层叠，脱离这块上下文单独看时请留意。
 * ===================================================================== */
/* ============ 弹窗 ============ */
.modal-mask{
  position:absolute;inset:0;z-index:100;display:none;place-items:center;
  background:rgba(20,22,38,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:18px
}
.modal-mask.show{display:grid;animation:fadeIn .22s ease}
.modal{
  width:min(560px,100%);max-height:88vh;overflow-y:auto;padding:22px 22px 0;
  /*background:var(--frost);*/border:1px solid var(--frost-bd);
  backdrop-filter:var(--frost-fx);-webkit-backdrop-filter:var(--frost-fx);
  border-radius:22px;box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
  animation:pop .28s cubic-bezier(.2,.9,.3,1.2)
}
@keyframes pop{from{transform:scale(.94) translateY(12px);opacity:0}to{transform:none;opacity:1}}
/* 弹窗右侧滚动条：透明毛玻璃（滑块半透明白 + 内侧高光，轨道只留一层很淡的凹槽） */
.modal{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.34) rgba(255,255,255,.06)}
.modal::-webkit-scrollbar{width:11px}
.modal::-webkit-scrollbar-track{
  border-radius:11px;margin:12px 3px 12px 0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 14px rgba(255,255,255,.05)
}
.modal::-webkit-scrollbar-thumb{
  border:2px solid transparent;background-clip:content-box;border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.14),0 2px 10px rgba(0,0,0,.22)
}
.modal:hover::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.30))}
.modal::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.42))}
.modal::-webkit-scrollbar-corner{background:transparent}
.modal h2{margin:0 0 14px;font-size:17px;letter-spacing:.05em;font-weight:600}
.modal label{display:block;font-size:12.5px;opacity:.72;margin:16px 0 8px;letter-spacing:.05em}
.text-input{
  width:100%;padding:11px 14px;border-radius:12px;font-size:14.5px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;outline:none;
  transition:border .2s,background .2s
}
.text-input:focus{border-color:var(--accent);background:rgba(255,255,255,.13)}
.swatches{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.swatch{width:34px;height:34px;border-radius:10px;border:2px solid rgba(255,255,255,.22);transition:transform .15s,box-shadow .2s;position:relative}
.swatch:hover{transform:scale(1.09)}
.swatch.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
/* 自定义颜色：＋ 色块点开页面自带的取色盘 */
.swatch.custom{overflow:hidden;background:conic-gradient(from 210deg,#f4a9b8,#f3c98b,#cfe3c9,#9fc9b6,#bcd4f0,#c9b8ec,#f4a9b8)}
.swatch.custom .cus-ico{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55);pointer-events:none}
/* 「自动」色块：表示图案颜色跟随底色深浅 */
.swatch.pat-auto{display:grid;place-items:center;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  color:#7d8394;background:linear-gradient(135deg,#ffffff 46%,#c3c7d4 54%)}
.cus-tip{font-size:12px;opacity:.6;letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* 图案颜色：整栏常驻显示（新建时默认没有图案，也要能先挑好颜色）；
   没选图案时整栏压暗并在标题后给出提示，但仍可点，挑好的颜色会在选图案后生效 */
.pc-hint{display:none;margin-left:8px;font-size:11px;opacity:.85;letter-spacing:.03em;font-weight:400}
#edPatColorWrap.pat-off .pc-hint{display:inline}
#edPatColorWrap.pat-off #edPatColors{opacity:.55}