/* ============================================================
 * 茶寿山管理后台样式
 *
 * 全部颜色走 CSS 变量（皮肤令牌），变量集与服务端 lib/theme.php、
 * 小程序端 app.wxss 完全一致。
 *
 * :root 里的值是「茶寿山绿 · 浅色」默认皮肤；页面加载后由 js/theme.js
 * 从 /api/theme 拉取后台配置的皮肤，覆盖 :root 上的同名变量即可整体换肤。
 *
 * 切换皮肤只改变量值，不改任何规则，因此后台界面结构零改动。
 * ============================================================ */
:root {
  /* ---- 中性色 ---- */
  --bg-color: #f5f5f0;
  --bg-soft: #faf9f4;
  --surface: #ffffff;
  --surface-2: #f7f7f2;
  --border-color: #e8e8e2;
  --divider: #f0f0ea;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-light: #999999;
  --text-inverse: #ffffff;

  /* ---- 品牌主色系 ---- */
  --primary-color: #2d5a3d;
  --primary-dark: #193121;
  --primary-hover: #20412c;
  --primary-light: #458a5d;
  --primary-soft: rgba(45, 90, 61, 0.10);
  --primary-fade: rgba(45, 90, 61, 0.06);
  --secondary-color: #3e7c54;
  --on-primary: #ffffff;

  /* ---- 强调色系（金） ---- */
  --accent-color: #d4a574;
  --accent-dark: #c68745;
  --accent-light: #e0be9b;
  --accent-soft: rgba(212, 165, 116, 0.15);
  --on-accent: #1a1a1a;

  /* ---- 状态色 ---- */
  --success-color: #2e7d43;
  --success-soft: rgba(46, 125, 67, 0.12);
  --warning-color: #b07a1f;
  --warning-soft: rgba(176, 122, 31, 0.12);
  --danger-color: #c0392b;
  --danger-soft: rgba(192, 57, 43, 0.10);
  --info-color: #29648d;
  --info-soft: rgba(41, 100, 141, 0.12);

  /* ---- 渐变 ---- */
  --gradient-brand: linear-gradient(135deg, #152a1d 0%, #3b754f 100%);
  --gradient-accent: linear-gradient(135deg, #c98b5f 0%, #e0be9b 100%);
  --gradient-success: linear-gradient(135deg, #246338 0%, #3f9d57 100%);
  --gradient-info: linear-gradient(135deg, #21537a 0%, #3278a8 100%);
  --gradient-danger: linear-gradient(135deg, #a63024 0%, #d44536 100%);

  /* ---- 后台侧栏（由主色派生，保持一贯的深色导航） ---- */
  --sidebar-bg: #20412c;
  --sidebar-text: rgba(255, 255, 255, 0.88);
  --sidebar-muted: rgba(255, 255, 255, 0.45);
  --sidebar-active: #d4a574;
  --sidebar-hover: rgba(255, 255, 255, 0.07);
  --sidebar-line: rgba(255, 255, 255, 0.09);

  /* ---- 阴影（后台用 px，独立于小程序的 rpx 阴影） ---- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-panel: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg-color); color: var(--text-primary); transition: background 0.2s, color 0.2s; }
.hidden { display: none !important; }
button { cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ===== 登录 ===== */
#login-screen { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--gradient-brand); }
.login-box { background: var(--surface); border-radius: 16px; padding: 48px 40px; width: 400px; text-align: center; box-shadow: var(--shadow-float); }
.login-box h1 { font-size: 22px; margin-bottom: 28px; color: var(--primary-color); }
.login-box input { width: 100%; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 14px; font-size: 14px; background: var(--surface); color: var(--text-primary); }
.login-box button { width: 100%; padding: 12px; background: var(--primary-color); color: var(--on-primary); border: none; border-radius: 8px; font-size: 15px; }
.login-box button:hover { background: var(--primary-hover); }
.login-hint { margin-top: 16px; color: var(--text-light); font-size: 12px; }
.login-msg { margin-top: 12px; font-size: 13px; }
.login-msg.err { color: var(--danger-color); }

/* ===== 布局 ===== */
#admin-app { display: flex; min-height: 100vh; }
.sidebar { width: 200px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 10; }
.logo { padding: 22px 20px; font-size: 16px; font-weight: 600; color: var(--sidebar-text); border-bottom: 1px solid var(--sidebar-line); }
#side-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.nav-group { padding: 14px 20px 6px; font-size: 11px; color: var(--sidebar-muted); }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 11px 20px; font-size: 14px; color: var(--sidebar-text); cursor: pointer; border-left: 3px solid transparent; }
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active { background: var(--sidebar-hover); color: #fff; border-left-color: var(--sidebar-active); }
.nav-badge { margin-left: auto; background: var(--accent-color); color: var(--on-accent); font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; font-weight: 600; }
.side-footer { padding: 14px 20px; font-size: 12px; color: var(--sidebar-muted); border-top: 1px solid var(--sidebar-line); }
.main-content { flex: 1; margin-left: 200px; padding: 20px 26px 40px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.topbar h2 { font-size: 20px; color: var(--primary-color); display: inline; }
.page-sub { color: var(--text-light); font-size: 12px; margin-left: 10px; }
.user-info { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-color); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.page-container { display: flex; flex-direction: column; gap: 16px; }

/* ===== 卡片 / 表格 ===== */
.panel { background: var(--surface); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-panel); }
.panel h3 { font-size: 15px; color: var(--primary-color); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.panel h3::before { content: ""; width: 4px; height: 15px; background: var(--primary-color); border-radius: 2px; }
.panel .panel-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; font-weight: 400; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 10px 8px; color: var(--text-light); font-weight: 500; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
td { padding: 11px 8px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
tr:hover td { background: var(--surface-2); }
.num { font-variant-numeric: tabular-nums; }

/* 徽章 */
.badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.badge-success { background: var(--success-soft); color: var(--success-color); }
.badge-warning { background: var(--warning-soft); color: var(--warning-color); }
.badge-danger { background: var(--danger-soft); color: var(--danger-color); }
.badge-info { background: var(--info-soft); color: var(--info-color); }
.badge-gold { background: var(--accent-soft); color: var(--accent-dark); }
.badge-gray { background: var(--surface-2); color: var(--text-light); }

/* 按钮 */
.btn { border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; background: var(--surface-2); color: var(--text-secondary); }
.btn:hover { background: var(--border-color); }
.btn-primary { background: var(--primary-color); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-gold { background: var(--accent-color); color: var(--on-accent); }
.btn-gold:hover { background: var(--accent-dark); }
.btn-danger { background: var(--danger-soft); color: var(--danger-color); }
.btn-danger:hover { filter: brightness(0.95); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.link-btn { background: none; border: none; color: var(--success-color); font-size: 12px; padding: 2px 4px; }
.link-btn.red { color: var(--danger-color); }
.link-btn.gray { color: var(--text-light); }
.link-btn:hover { text-decoration: underline; }

/* 统计卡 */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.stat-card { background: var(--surface); border-radius: 14px; padding: 18px 20px; display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow-panel); }
.stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.stat-card .label { font-size: 12px; color: var(--text-light); }
.stat-card .value { font-size: 24px; font-weight: 700; color: var(--primary-color); font-variant-numeric: tabular-nums; }
.stat-card .value small { font-size: 13px; font-weight: 400; }
.stat-card .change { font-size: 12px; color: var(--success-color); }
.stat-card .change.down { color: var(--danger-color); }

/* 工具栏 */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input, .toolbar select { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text-primary); }
.toolbar input { width: 200px; }

/* 标签页 */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-chip { padding: 7px 16px; border-radius: 18px; border: 1px solid var(--border-color); background: var(--surface); font-size: 13px; color: var(--text-secondary); }
.tab-chip.active { background: var(--primary-color); color: var(--on-primary); border-color: var(--primary-color); }
.tab-chip b { color: var(--danger-color); }
.tab-chip.active b { color: var(--accent-light); }

/* 图片缩略 */
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface-2); display: block; }

/* ===== 图表 ===== */
.chart-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
@media (max-width: 1100px) { .chart-grid { grid-template-columns: 1fr; } }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 4px; }

/* ===== 侧栏抽屉 ===== */
.drawer-mask, .modal-mask { position: fixed; inset: 0; background: rgba(20, 30, 25, 0.4); z-index: 40; }
.drawer { position: fixed; top: 0; right: -460px; width: 440px; max-width: 92vw; bottom: 0; background: var(--surface); z-index: 41; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15); transition: right 0.25s; padding: 22px; overflow-y: auto; }
.drawer.open { right: 0; }
.drawer h3 { font-size: 16px; color: var(--primary-color); margin-bottom: 16px; }
.dl { font-size: 13px; }
.dl-row { display: flex; margin-bottom: 10px; }
.dl-row .k { width: 88px; color: var(--text-light); flex-shrink: 0; }
.dl-row .v { flex: 1; color: var(--text-primary); }
.drawer .section { border-top: 1px solid var(--divider); margin-top: 14px; padding-top: 14px; }
.drawer .section h4 { font-size: 13px; color: var(--primary-color); margin-bottom: 10px; }

/* ===== 弹窗 ===== */
.modal-mask { display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: var(--surface); border-radius: 14px; width: 560px; max-width: 94vw; max-height: 88vh; overflow-y: auto; padding: 24px; }
.modal h3 { color: var(--primary-color); font-size: 16px; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-item { display: flex; flex-direction: column; gap: 5px; }
.form-item.full { grid-column: 1 / -1; }
.form-item label { font-size: 12px; color: var(--text-light); }
.form-item input, .form-item select, .form-item textarea { padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text-primary); }
.form-item textarea { resize: vertical; min-height: 64px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ===== Toast ===== */
.toast { position: fixed; top: 26px; left: 50%; transform: translateX(-50%); background: var(--primary-dark); color: var(--on-primary); padding: 10px 22px; border-radius: 22px; font-size: 13px; z-index: 99; }
.toast.err { background: var(--danger-color); }

/* 优惠券卡片 */
.coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.coupon-card { border-radius: 14px; color: var(--on-primary); padding: 16px 18px; position: relative; overflow: hidden; }
.coupon-card.green { background: var(--gradient-brand); }
.coupon-card.gold { background: var(--gradient-accent); }
.coupon-card .amt { font-size: 30px; font-weight: 700; }
.coupon-card .nm { font-size: 14px; font-weight: 600; margin: 4px 0 2px; }
.coupon-card .meta { font-size: 11px; opacity: 0.85; }
.coupon-card .bar { height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; margin-top: 10px; }
.coupon-card .bar i { display: block; height: 100%; background: #fff; border-radius: 2px; }
.coupon-card .ops { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin: -2px 0 10px; position: relative; z-index: 2; }
.coupon-card .ops button { background: rgba(255, 255, 255, 0.2); border: none; color: #fff; font-size: 11px; border-radius: 5px; padding: 3px 8px; flex-shrink: 0; cursor: pointer; }
.coupon-card .ops button:hover { background: rgba(255, 255, 255, 0.35); }

/* 设置页 */
.settings-layout { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; }
.settings-menu { background: var(--surface); border-radius: 14px; padding: 10px; box-shadow: var(--shadow-panel); }
.settings-menu .s-item { padding: 11px 16px; border-radius: 9px; font-size: 13px; cursor: pointer; color: var(--text-secondary); }
.settings-menu .s-item.active { background: var(--primary-soft); color: var(--primary-color); font-weight: 600; }
.setting-row { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
.setting-row .k { width: 130px; color: var(--text-secondary); flex-shrink: 0; }
.setting-row .v { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setting-row .v input, .setting-row .v select { padding: 8px 11px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; width: 240px; background: var(--surface); color: var(--text-primary); }
.setting-row .hint { color: var(--text-light); font-size: 12px; }
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-group label { display: flex; gap: 5px; align-items: center; font-size: 13px; cursor: pointer; color: var(--text-secondary); }
.switch { position: relative; width: 42px; height: 23px; background: var(--border-color); border-radius: 12px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.switch.on { background: var(--success-color); }
.switch::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: left 0.2s; }
.switch.on::after { left: 21px; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; }
.role-card .r-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.role-card .r-head b { font-size: 14px; color: var(--primary-color); }
.perm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip { font-size: 11px; background: var(--primary-soft); color: var(--success-color); padding: 3px 9px; border-radius: 9px; }
.perm-chip.off { background: var(--surface-2); color: var(--text-light); }

/* 待办 */
.todo-row { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
.todo-row:last-child { border-bottom: none; }
.todo-tag { font-size: 11px; padding: 2px 9px; border-radius: 8px; margin-right: 12px; }
.todo-row .t-num { margin-left: auto; font-weight: 700; color: var(--danger-color); font-size: 15px; }
.todo-row .t-num.green { color: var(--success-color); }

/* 分页 */
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light); padding-top: 12px; }
.pager button { min-width: 26px; height: 26px; border: 1px solid var(--border-color); background: var(--surface); border-radius: 6px; font-size: 12px; color: var(--text-secondary); }
.pager button.cur { background: var(--primary-color); color: var(--on-primary); border-color: var(--primary-color); }

.empty-tip { text-align: center; color: var(--text-light); font-size: 13px; padding: 30px 0; }
.money { color: var(--danger-color); font-weight: 600; }
.text-muted { color: var(--text-light); font-size: 12px; }

/* 角色权限管理 */
.role-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-color); }
.perm-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; margin-top: 4px; }
.perm-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; background: var(--surface-2); border-radius: 8px; padding: 7px 10px; }
.perm-check:hover { background: var(--border-color); }
.perm-check input { accent-color: var(--primary-color); }

/* ============================================================
 * 皮肤外观（系统设置 → 皮肤外观）
 * ============================================================ */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.skin-card { border: 2px solid var(--border-color); border-radius: 14px; padding: 14px; cursor: pointer; background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; position: relative; }
.skin-card:hover { border-color: var(--accent-color); box-shadow: var(--shadow-card); }
.skin-card.active { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-soft); }
.skin-card.active::after { content: "使用中"; position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--primary-color); font-weight: 600; }
.skin-preview { display: flex; height: 44px; border-radius: 9px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border-color); }
.skin-preview i { flex: 1; }
.skin-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.skin-desc { font-size: 12px; color: var(--text-light); }
.skin-custom { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.skin-color-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.skin-color-field input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface); cursor: pointer; }
.skin-color-field input[type="text"] { width: 100px; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; font-family: ui-monospace, Consolas, monospace; background: var(--surface); color: var(--text-primary); }
.mode-switch { display: inline-flex; border: 1px solid var(--border-color); border-radius: 9px; overflow: hidden; }
.mode-switch button { border: none; background: var(--surface); color: var(--text-secondary); font-size: 13px; padding: 8px 18px; }
.mode-switch button.on { background: var(--primary-color); color: var(--on-primary); }
.skin-swatches { display: flex; gap: 6px; margin-top: 8px; }
.skin-swatches i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border-color); }
.skin-live { margin-top: 4px; border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; background: var(--bg-soft); }
.skin-live .demo-title { font-size: 13px; color: var(--text-light); margin-bottom: 12px; }

/* ============================================================
 * 首页布局可视化编辑（系统设置 → 首页布局与标题）
 * ============================================================ */
.hl-layout { display: flex; gap: 26px; align-items: flex-start; margin-top: 8px; }
.hl-left { flex: 1; min-width: 320px; }
.hl-right { width: 280px; flex-shrink: 0; position: sticky; top: 16px; }
/* 手机预览：固定机身比例，屏幕内部滚动，杜绝内容溢出变形 */
.hl-phone { width: 260px; height: 540px; border: 9px solid #1c1c1c; border-radius: 32px; background: var(--bg-color); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; margin: 0 auto; }
.hl-phone-head { background: var(--gradient-brand); color: #fff; padding: 12px 8px; font-size: 14px; text-align: center; font-weight: 600; flex-shrink: 0; }
#hl-preview { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.pv-sec { background: var(--surface); border-radius: 10px; padding: 8px; box-shadow: var(--shadow-panel); }
.pv-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }
.pv-banner { height: 76px; border-radius: 8px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 3px; }
.pv-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pv-cat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pv-cat img, .pv-cat i { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; display: block; }
.pv-cat span { font-size: 10px; color: var(--text-secondary); max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-scene { display: flex; gap: 5px; flex-wrap: wrap; }
.pv-scene span { font-size: 10px; padding: 4px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dark); }
.pv-notice { font-size: 10px; color: var(--text-secondary); padding: 5px 7px; border-radius: 7px; background: var(--surface-2); }
.pv-acts { display: flex; gap: 6px; }
.pv-act { flex: 1; border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 8px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; }
.pv-act span { color: var(--danger-color); }
.pv-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pv-prod { border: 1px solid var(--border-color); border-radius: 8px; padding: 5px; font-size: 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-prod img, .pv-prod .pv-noimg { width: 100%; height: 52px; border-radius: 6px; object-fit: cover; background: var(--primary-soft); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 14px; font-style: normal; }
.pv-prod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.pv-prod b { color: var(--danger-color); font-weight: 600; }
.pv-empty { font-size: 10px; color: var(--text-light); text-align: center; padding: 8px 0; }
@media (max-width: 1080px) { .hl-layout { flex-direction: column; } .hl-right { position: static; width: 100%; } }

/* ============================================================
 * 图片库选择器（模态内）
 * ============================================================ */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.ip-item { position: relative; border: 2px solid var(--border-color); border-radius: 10px; padding: 5px; cursor: pointer; background: var(--surface); overflow: hidden; }
.ip-item:hover { border-color: var(--accent-color); }
.ip-item.sel { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-soft); }
.ip-item.sel::after { content: "✓"; position: absolute; top: 6px; right: 8px; color: var(--primary-color); font-weight: 700; }
.ip-item img { width: 100%; height: 76px; object-fit: cover; border-radius: 7px; display: block; background: var(--surface-2); }
.ip-item.broken img { visibility: hidden; }
.ip-name { font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.ip-cat { font-size: 10px; color: var(--text-light); }
.ip-del { position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 13px; line-height: 18px; padding: 0; display: none; }
.ip-item:hover .ip-del { display: block; }
.ip-drop { border: 2px dashed var(--border-color); border-radius: 12px; padding: 34px 20px; text-align: center; cursor: pointer; color: var(--text-secondary); transition: border-color 0.15s, background 0.15s; }
.ip-drop.over, .ip-drop:hover { border-color: var(--primary-color); background: var(--primary-fade); }

/* 文章预览抽屉里的富文本（清洗后仅保留白名单标签） */
.article-preview img { max-width: 100%; border-radius: 8px; }
.article-preview table { border-collapse: collapse; }
.article-preview td, .article-preview th { border: 1px solid var(--border-color); padding: 4px 8px; }
.article-preview h1, .article-preview h2, .article-preview h3, .article-preview h4, .article-preview h5 { margin: 10px 0 6px; color: var(--text-primary); }
.article-preview p { margin: 6px 0; }
.article-preview ul, .article-preview ol { padding-left: 20px; }

/* 富文本编辑器内的图片自适应 */
#modal [contenteditable] img { max-width: 100%; border-radius: 6px; }

/* ============ 溯源时间线编辑器 ============ */
.tl-edit { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg-soft); }
.tl-edit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.tl-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tl-edit-grid input { min-width: 0; }
.tl-edit-grid .tl-detail { grid-column: 1 / -1; }
@media (max-width: 640px) { .tl-edit-grid { grid-template-columns: 1fr; } }