/* 后台管理专属皮肤(严格按 design/pencil-new.pen「Admin·界面配置」落地)。
   铁律5 的唯一例外是 admin 本身——这里的 chrome 样式可以硬编码;但「界面配置」表单
   编辑的商户端令牌(theme/copy/layout)仍然全部走 DB 配置,即改即生效。
   复用 /web/styles.css 的 .primary/.pill/.table/.muted/.error/.brand-mark 与色板令牌。 */

.adm-app {
  --a-line: #e2d9c8; --a-card: #fcfaf5; --a-nav: #fbf8f1; --a-topbar: #fcfaf5;
  --a-ink: #26221c; --a-label: #6e6656; --a-hint: #9a9182;
  --a-gold: #b8925a; --a-accent: #7a5c2e; --a-active: #f0e4ce; --a-soft: #ebdcc0;
  --a-green: #4e8c6a;
  --a-goldgrad: linear-gradient(90deg, #cba36b, #ae884f);
  --a-markgrad: linear-gradient(180deg, #cba36b, #b8925a);
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
  background: var(--bg); color: var(--a-ink);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.adm-serif { font-family: "Noto Serif SC", "PingFang SC", serif; }

/* 登录 */
.adm-login { height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(480px circle at 24% 26%, rgba(184,146,90,.12), transparent 60%), var(--bg); }
.adm-login-card { background: var(--panel); border: 1px solid var(--a-line); border-radius: 20px;
  padding: 32px; width: 340px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 40px 90px -55px rgba(33,30,24,.45); }
.adm-login-brand { font-weight: 700; display: flex; align-items: center; gap: 9px; font-size: 16px; margin-bottom: 4px; }
.adm-login-card input { border: 1px solid var(--a-line); border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; }

/* ===== 顶栏 ===== */
.adm-topbar { display: flex; align-items: center; justify-content: space-between;
  height: 56px; flex-shrink: 0; padding: 0 20px; background: var(--a-topbar); border-bottom: 1px solid var(--a-line); }
.adm-brand { display: flex; align-items: center; gap: 9px; }
.adm-brand b { font-size: 14.5px; font-weight: 700; }
.adm-topbar-r { display: flex; align-items: center; gap: 10px; }
.adm-search { display: flex; align-items: center; gap: 7px; width: 240px; height: 32px;
  border: 1px solid var(--a-line); border-radius: 999px; background: #fff; padding: 0 12px; }
.adm-search svg { width: 13px; height: 13px; color: var(--a-hint); flex-shrink: 0; }
.adm-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 12px; color: var(--a-ink); }
.adm-search input::placeholder { color: var(--a-hint); }
.adm-env { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border-radius: 999px; background: #e6f0ea; color: var(--a-green); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.adm-env i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-green); }
.adm-env.dev { background: #fbf1df; color: #a5691b; }
.adm-env.dev i { background: #c8862f; }
.adm-avatar { width: 28px; height: 28px; border-radius: 999px; background: #f4f0e7; border: 1px solid var(--a-line);
  display: grid; place-items: center; font-size: 12px; color: var(--a-label); }

/* ===== 主体:左导航 + 内容 ===== */
.adm-body { flex: 1; display: flex; min-height: 0; }
.adm-nav { width: 196px; flex-shrink: 0; background: var(--a-nav); border-right: 1px solid var(--a-line);
  padding: 16px 10px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.adm-navgroup-t { font-size: 10.5px; color: var(--a-hint); letter-spacing: 2px; padding: 10px 8px 4px; }
.adm-navitem { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  border-radius: 8px; font-size: 12.5px; color: var(--a-label); text-align: left; width: 100%; }
.adm-navitem .ico { width: 16px; text-align: center; font-size: 13px; line-height: 1; flex-shrink: 0; }
.adm-navitem:hover { background: #f5edda; }
.adm-navitem.active { background: var(--a-active); color: var(--a-accent); font-weight: 700; }
.adm-navitem[hidden] { display: none; }

.adm-main { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; overflow-y: auto; min-width: 0; }
.adm-head { display: flex; align-items: flex-end; gap: 10px; }
.adm-head h1 { font-size: 21px; font-weight: 700; }
.adm-head span { font-size: 12px; color: var(--a-hint); }
.adm-panel { flex: 1; min-width: 0; }

/* 老视图沿用的通用容器(用户/订单/看板等 15 个视图靠这些类渲染) */
.adm-panel .card { background: var(--card); border: 1px solid var(--a-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.adm-panel .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-panel .row input, .adm-panel .row select, .adm-panel input[type=text], .adm-panel textarea, .adm-panel select {
  border: 1px solid var(--a-line); border-radius: 8px; padding: 6px 10px; font: inherit; background: #fff; color: var(--a-ink); }
.adm-panel h3 { font-size: 14px; font-weight: 700; }

/* ===== 底部保存条(仅「界面配置」显示) ===== */
.adm-savebar { display: flex; align-items: center; justify-content: space-between; height: 54px; flex-shrink: 0;
  padding: 0 22px; background: var(--a-topbar); border-top: 1px solid var(--a-line); }
.adm-savebar-l { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--a-label); }
.adm-savebar-l i { width: 8px; height: 8px; border-radius: 50%; background: var(--a-gold); }
.adm-savebar-r { display: flex; align-items: center; gap: 10px; }
.adm-btn-ghost { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--a-line); font-size: 12.5px; color: var(--a-label); }
.adm-btn-ghost:hover { border-color: var(--a-gold); color: var(--a-accent); }
.adm-btn-gold { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 18px; border-radius: 999px;
  background: var(--a-goldgrad); color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: var(--glow); }
.adm-btn-gold:hover { filter: brightness(1.05); }
.adm-btn-gold:disabled { opacity: .55; filter: none; cursor: default; }

/* ===== 界面配置:表单 + 实时预览 ===== */
.uc2-cols { display: flex; gap: 14px; align-items: flex-start; }
.uc2-form { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.uc2-preview { width: 400px; flex-shrink: 0; }
@media (max-width: 1180px) { .uc2-cols { flex-direction: column; } .uc2-preview { width: 100%; } }

.uc2-card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; }
.uc2-card-h { display: flex; align-items: center; justify-content: space-between; }
.uc2-card-h .t { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--a-ink); }
.uc2-card-h .t .ico { font-size: 15px; }
.uc2-card-h .back { font-size: 11.5px; color: var(--a-hint); }
.uc2-card-h .back:hover { color: var(--a-accent); }
.uc2-more { font-size: 12px; color: var(--a-accent); }

/* 品牌 */
.uc2-brandrow { display: flex; gap: 12px; }
.uc2-logo { width: 120px; flex-shrink: 0; border: 1px solid var(--a-gold); border-radius: 10px; background: var(--panel);
  padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.uc2-logo:hover { background: var(--a-soft); }
.uc2-logo-img { width: 44px; height: 44px; border-radius: 12px; background: var(--a-markgrad); color: #fff;
  display: grid; place-items: center; font-size: 19px; font-weight: 700; font-family: "Noto Serif SC", serif;
  object-fit: cover; overflow: hidden; }
.uc2-logo-hint { font-size: 11px; color: var(--a-hint); }
.uc2-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.uc2-field { display: flex; align-items: center; gap: 10px; }
.uc2-field-l { width: 88px; flex-shrink: 0; font-size: 12px; color: var(--a-label); }
.uc2-input { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--a-line); border-radius: 8px; background: #fff;
  padding: 0 11px; font: inherit; font-size: 12.5px; color: var(--a-ink); }
.uc2-input:focus { outline: none; border-color: var(--a-gold); }

/* 主题 */
.uc2-presetrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uc2-presetrow > .l { font-size: 12px; color: var(--a-label); }
.uc2-preset { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--a-line); font-size: 12px; color: var(--a-label); }
.uc2-preset i { width: 12px; height: 12px; border-radius: 50%; }
.uc2-preset.active { background: var(--a-soft); border: 1.5px solid var(--a-gold); color: var(--a-accent); font-weight: 700; }
.uc2-colorrow { display: flex; gap: 14px; flex-wrap: wrap; }
.uc2-color { display: flex; align-items: center; gap: 7px; }
.uc2-swatch { position: relative; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--a-line); overflow: hidden; cursor: pointer; }
.uc2-swatch input { position: absolute; inset: -4px; width: 40px; height: 40px; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.uc2-color-c { display: flex; flex-direction: column; gap: 1px; }
.uc2-color-c .t { font-size: 11px; color: var(--a-hint); }
.uc2-color-c .v { font-size: 11.5px; font-weight: 700; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.uc2-sliderrow { display: flex; gap: 20px; flex-wrap: wrap; }
.uc2-slider { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.uc2-slider-h { display: flex; align-items: center; justify-content: space-between; }
.uc2-slider-h .t { font-size: 11.5px; color: var(--a-label); }
.uc2-slider-h .v { font-size: 11.5px; font-weight: 700; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.uc2-range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: var(--a-line); outline: none; }
.uc2-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--a-gold); cursor: pointer; }
.uc2-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--a-gold); cursor: pointer; }

/* 文案 */
.uc2-copyblock { display: flex; flex-direction: column; gap: 5px; }
.uc2-copyblock .h { display: flex; align-items: center; gap: 6px; }
.uc2-copyblock .h .l { font-size: 12px; color: var(--a-label); }
.uc2-copyblock .h .w { font-size: 10.5px; color: var(--a-hint); }
.uc2-textarea { width: 100%; border: 1px solid var(--a-line); border-radius: 8px; background: #fff; padding: 9px 11px;
  font: inherit; font-size: 12.5px; line-height: 1.6; color: var(--a-ink); resize: vertical; }
.uc2-textarea:focus { outline: none; border-color: var(--a-gold); }
.uc2-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.uc2-chip { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--a-line); font-size: 11.5px; color: var(--a-ink); }
.uc2-chip .x { color: var(--a-hint); cursor: pointer; font-size: 12px; line-height: 1; }
.uc2-chip .x:hover { color: var(--danger); }
.uc2-chip-add { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: transparent; border: 1px solid var(--a-gold); font-size: 11.5px; font-weight: 700; color: var(--a-accent); }
.uc2-fieldlist { display: none; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--a-line); }
.uc2-fieldlist.open { display: flex; }
.uc2-fieldlist .grp-t { font-size: 11px; color: var(--a-hint); letter-spacing: 1px; margin-top: 4px; }
.uc2-frow { display: flex; align-items: flex-start; gap: 10px; }
.uc2-frow .k { width: 168px; flex-shrink: 0; font-size: 11.5px; color: var(--a-label); padding-top: 6px; word-break: break-all; }
.uc2-frow .fv { flex: 1; min-width: 0; }

/* 布局开关 */
.uc2-swgrid { display: flex; gap: 18px; flex-wrap: wrap; }
.uc2-sw { display: flex; align-items: center; gap: 8px; }
.uc2-toggle { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #d9d2c5; flex-shrink: 0; transition: background .15s; }
.uc2-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.uc2-toggle.on { background: var(--a-gold); }
.uc2-toggle.on::after { transform: translateX(14px); }
.uc2-sw .l { font-size: 12px; color: var(--a-ink); }

/* 通用行(banner/download/legal/export_specs 卡沿用) */
.uc2-hint { font-size: 11.5px; color: var(--a-hint); line-height: 1.6; }

/* 发布台敏感操作统一自绘确认层；Admin 是配置层例外，但仍禁用浏览器原生 confirm。 */
.release-dialog { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  padding: 24px; background: rgba(33,30,24,.38); backdrop-filter: blur(3px); }
.release-dialog-card { width: min(520px, 100%); padding: 24px; border: 1px solid var(--a-line);
  border-radius: 16px; background: var(--a-card); box-shadow: 0 24px 80px rgba(35,30,20,.2); }
.release-dialog-kicker { color: var(--a-accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.release-dialog-card h2 { margin: 8px 0; font-size: 20px; }
.release-dialog-card p, .release-dialog-detail { color: var(--a-label); line-height: 1.65; overflow-wrap: anywhere; }
.release-dialog-detail { margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: var(--a-soft); font-size: 12px; }
.release-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ===== 实时预览 ===== */
.uc2-pv-h { display: flex; align-items: center; justify-content: space-between; }
.uc2-pv-h .t { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.uc2-pv-tabs { display: flex; gap: 4px; }
.uc2-pv-tab { height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; color: var(--a-label);
  background: transparent; border: 1px solid var(--a-line); display: inline-flex; align-items: center; }
.uc2-pv-tab.active { background: var(--a-soft); border-color: var(--a-gold); color: var(--a-accent); font-weight: 700; }
.uc2-mock { height: 460px; border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; background: #f4f0e7; }
.uc2-pv-note { font-size: 11px; color: var(--a-hint); text-align: center; }

/* 预览内的迷你工作台(令牌用内联 style 注入 draft 值,这里只管骨架) */
.pvm { display: flex; flex-direction: column; height: 100%; font-size: 12px; }
.pvm-top { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px;
  background: #fcfaf5; border-bottom: 1px solid var(--a-line); flex-shrink: 0; }
.pvm-brand { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.pvm-mark { width: 15px; height: 15px; border-radius: 4px; color: #fff; display: grid; place-items: center; font-size: 8px; }
.pvm-pts { height: 10px; width: 46px; border-radius: 4px; background: var(--a-soft); }
.pvm-body { flex: 1; display: flex; min-height: 0; }
.pvm-rail { width: 54px; flex-shrink: 0; background: #fbf8f1; border-right: 1px solid var(--a-line); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.pvm-rail i { display: block; height: 30px; border-radius: 6px; background: #fff; border: 1px solid var(--a-line); }
.pvm-chat { flex: 1; display: flex; flex-direction: column; padding: 10px; gap: 7px; min-width: 0; }
.pvm-bubble { align-self: flex-start; max-width: 88%; border-radius: 4px 12px 12px 12px; background: #fff; border: 1px solid var(--a-line);
  padding: 8px 10px; font-size: 11px; line-height: 1.55; color: var(--a-ink); }
.pvm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pvm-chip { border: 1px solid var(--a-line); background: #fff; font-size: 10px; padding: 3px 8px; }
.pvm-chip.p0 { color: #fff; border: none; }
.pvm-sp { flex: 1; }
.pvm-input { height: 30px; border: 1px solid var(--a-line); background: #fff; display: flex; align-items: center; padding: 0 10px;
  font-size: 10px; color: var(--a-hint); }
/* 登录页预览 */
.pvl { height: 100%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(300px circle at 30% 30%, rgba(184,146,90,.12), transparent 60%), #f4f0e7; }
.pvl-card { width: 200px; background: #fbf8f1; border: 1px solid var(--a-line); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.pvl-mark { width: 40px; height: 40px; border-radius: 12px; color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 700; font-family: "Noto Serif SC", serif; }
.pvl-title { font-size: 14px; font-weight: 700; }
.pvl-slogan { font-size: 10px; opacity: .6; margin-top: -8px; text-align: center; }
.pvl-field { width: 100%; height: 30px; border: 1px solid var(--a-line); background: #fff; }
.pvl-btn { width: 100%; height: 32px; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }