/* =========================================================
 * 电子贺卡 - 全局样式 + 轻量动画（v5，2026-09-02）
 * 加：底部 TabBar、分类 Tab、4大入口、节日倒计时、模板瀑布流、文案Tab、
 *     我的Tab、音乐符号、PPT自动翻页、上下/左右滑动。
 * ========================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f5f6fa;
  color: #222;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input, textarea { font-family: inherit; }

/* ---------- 通用 ---------- */
.hidden { display: none !important; }
.page { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: 80px; }

/* =========================================================
 * 红色 Hero 头部（复刻小程序）
 * ========================================================= */
.hero {
  background: linear-gradient(180deg, #ff5757 0%, #ff7b6e 100%);
  color: #fff;
  padding: 28px 16px 60px;
  position: relative;
}
.hero-title {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.hero-actions {
  position: absolute;
  top: 28px;
  right: 16px;
  display: flex;
  gap: 10px;
}
.hero-dot-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
}
.hero-dot-btn:active { transform: scale(.92); }

/* =========================================================
 * 分类 Tab（横向滚）
 * ========================================================= */
.cat-tabs {
  display: flex; gap: 12px; overflow-x: auto;
  background: #fff;
  padding: 12px 16px;
  margin: -40px 16px 12px;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  -webkit-overflow-scrolling: touch;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 22px;
  background: #f3f4f6;
  color: #555;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.cat-tab.active {
  background: #ff5757;
  color: #fff;
}

/* =========================================================
 * 4 大入口（小程序的圆形图标）
 * ========================================================= */
.entry-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px 16px 16px;
}
.entry-circle {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px;
}
.entry-circle .circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #ff7e7e, #ff5757);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px;
  box-shadow: 0 3px 10px rgba(255,87,87,.25);
}
.entry-circle.vari2 .circle { background: linear-gradient(135deg, #ff9966, #ff6633); }
.entry-circle.vari3 .circle { background: linear-gradient(135deg, #66bb6a, #43a047); }
.entry-circle.vari4 .circle { background: linear-gradient(135deg, #9575cd, #673ab7); }
.entry-circle .name { font-size: 12px; color: #333; font-weight: 500; text-align: center; }

/* =========================================================
 * 节日倒计时（小程序的横滚条）
 * ========================================================= */
.countdown-strip {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 0 16px 14px;
  -webkit-overflow-scrolling: touch;
}
.countdown-strip::-webkit-scrollbar { display: none; }
.countdown-card {
  flex-shrink: 0;
  width: 240px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.countdown-card.mid { background: #fff7e6; }
.countdown-card.left .num { color: #ff5757; }
.countdown-card .glyph { font-size: 36px; }
.countdown-card .info { flex: 1; }
.countdown-card .info .ttl { font-size: 16px; font-weight: 700; color: #333; }
.countdown-card .info .sub { font-size: 12px; color: #999; margin-top: 4px; }
.countdown-card .days-block {
  text-align: center;
  background: rgba(255,87,87,.12);
  border-radius: 8px;
  padding: 6px 10px;
}
.countdown-card .days-block .num { font-size: 18px; font-weight: 700; color: #ff5757; line-height: 1; }
.countdown-card .days-block .lbl { font-size: 10px; color: #ff5757; margin-top: 2px; }

/* =========================================================
 * 模板瀑布流（双列）
 * ========================================================= */
.template-section { padding: 8px 16px; }
.section-title {
  font-size: 16px; font-weight: 700; color: #333;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px;
}
.section-title .more {
  font-size: 12px; color: #999; font-weight: 400;
}

.tpl-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.tpl-card {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  position: relative;
}
.tpl-card .tpl-cover {
  width: 100%; aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 700;
  text-align: center; padding: 14px; white-space: pre-line;
  position: relative; overflow: hidden;
}
.tpl-card .tpl-cover .fx-layer { z-index: 1; }
.tpl-card .tpl-cover .cover-content { position: relative; z-index: 2; }
.tpl-card .tpl-meta { padding: 10px 10px 4px; }
.tpl-card .tpl-name {
  font-size: 13px; font-weight: 600; color: #333;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpl-card .tpl-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 6px 10px 10px;
}
.mini-btn {
  padding: 8px 0; border-radius: 8px;
  font-size: 13px; font-weight: 600; text-align: center;
  background: #eef1f6; color: #333;
}
.mini-btn.use {
  background: #ff5757; color: #fff;
}
.mini-btn:active { transform: scale(.96); }
.mini-btn.del-code { background: #fee2e2; color: #b91c1c; }
.mini-btn.copy-link { background: #10b981; color: #fff; }

/* =========================================================
 * 底部 TabBar（4 个：首页/文案/发现/我的）
 * ========================================================= */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff;
  display: flex;
  border-top: 1px solid #f0f0f0;
  z-index: 60;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 0;
  color: #aaa;
  font-size: 11px;
  gap: 2px;
}
.tabbar-item .ic { font-size: 22px; line-height: 1; }
.tabbar-item.active { color: #ff5757; }
.tabbar-item:active { transform: scale(.96); }

/* =========================================================
 * 右下角搜索 Fab（首页）
 * ========================================================= */
.fab-search {
  position: fixed; right: 16px; bottom: 90px;
  width: 50px; height: 50px; border-radius: 50%;
  background: #3b82f6; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 16px rgba(59,130,246,.45);
  z-index: 75;
}
.fab-search:active { transform: scale(.92); }

/* 搜索弹层 */
.search-overlay {
  position: fixed; inset: 0; background: #f5f6fa;
  z-index: 95; display: flex; flex-direction: column;
}
.search-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.search-head .back {
  padding: 8px 14px; border-radius: 8px;
  background: #eef1f6; color: #555; font-size: 14px;
}
.search-input { flex: 1; padding: 10px 14px; border-radius: 22px; background: #f3f4f6; border: 0; font-size: 14px; }
.search-body { flex: 1; overflow-y: auto; padding: 16px; }

/* =========================================================
 * 文案 Tab（复刻小程序「朋友圈文案」）
 * ========================================================= */
.copy-header {
  background: #fff;
  padding: 20px 16px 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.copy-cat-tabs {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 8px 16px 14px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.copy-cat-tabs::-webkit-scrollbar { display: none; }
.copy-cat-tab {
  flex-shrink: 0;
  padding: 6px 14px; border-radius: 18px;
  background: #f3f4f6; color: #555; font-size: 13px;
}
.copy-cat-tab.active { background: #3b82f6; color: #fff; }

.copy-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 16px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  position: relative;
}
.copy-card .emo { font-size: 14px; color: #555; line-height: 1.7; word-break: break-all; white-space: pre-wrap; }
.copy-card .emo b { color: #ff5757; font-weight: 600; }
.copy-card .img {
  margin-top: 10px;
  border-radius: 10px;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  background: #f3f4f6;
  overflow: hidden;
  background-size: cover; background-position: center;
}
.copy-card .copy-ops {
  display: flex; gap: 14px;
  padding: 14px 0 0;
  border-top: 1px dashed #f0f0f0;
  margin-top: 14px;
  flex-wrap: wrap;
}
.copy-card .copy-ops a {
  font-size: 13px; color: #3b82f6; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.copy-card .copy-ops a:active { opacity: .5; }

/* 右侧浮动按钮列（复刻 ⭐/🔄/🔍/✏️） */
.fab-stack {
  position: fixed; right: 12px; bottom: 90px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 70;
}
.fab-mini {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.fab-mini:active { transform: scale(.92); }
.fab-mini.on { background: #fef3c7; }

/* =========================================================
 * 我的 Tab（用户卡 + VIP 横幅 + 9 列表）
 * ========================================================= */
.my-hero {
  background: linear-gradient(180deg, #ff5757 0%, #ff7b6e 100%);
  padding: 28px 16px 24px;
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.my-hero h2 { font-size: 18px; font-weight: 600; }
.my-user-card {
  background: #fff;
  margin: -8px 16px 14px;
  border-radius: 14px;
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.my-user-card .avatar {
  width: 50px; height: 50px; border-radius: 12px;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #9ca3af;
  flex-shrink: 0;
}
.my-user-card .info { flex: 1; min-width: 0; }
.my-user-card .info .name { font-size: 15px; font-weight: 600; color: #333; }
.my-user-card .info .id { font-size: 12px; color: #999; margin-top: 3px; }
.my-user-card .settings {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #555; background: #f3f4f6;
}

.my-vip {
  margin: 0 16px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a1d2e 0%, #2c2f48 100%);
  color: #fff;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
}
.my-vip .v { font-size: 28px; }
.my-vip .info { flex: 1; }
.my-vip .info .t { font-size: 15px; font-weight: 600; }
.my-vip .info .s { font-size: 11px; color: #fde68a; margin-top: 4px; }
.my-vip button {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #78350f;
  padding: 8px 14px; border-radius: 22px;
  font-weight: 600; font-size: 13px;
}

.my-list { padding: 0 16px; }
.my-list-item {
  background: #fff;
  border-radius: 12px;
  padding: 14px 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
  font-size: 14px; color: #333;
  cursor: pointer;
  transition: transform .06s;
}
.my-list-item:active { transform: scale(.98); background: #fafafa; }
.my-list-item .ic {
  width: 24px; text-align: center; font-size: 18px; color: #ff5757;
}
.my-list-item .ll { flex: 1; }
.my-list-item .arr { color: #ccc; font-size: 14px; }

/* v6 用户统计条 */
.my-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 16px 14px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.stat-item {
  text-align: center;
  border-right: 1px solid #f3f4f6;
}
.stat-item:last-child { border-right: none; }
.stat-item .stat-num {
  font-size: 20px;
  font-weight: 700;
  color: #ff5757;
  line-height: 1.1;
}
.stat-item .stat-lbl {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}

/* v6 微信登录弹层 */
.login-wechat-ic {
  font-size: 60px;
  text-align: center;
  margin: 6px 0;
}

/* v6 模板收藏按钮 */
.fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.fav-btn.active {
  background: #ff5757;
  color: #fff;
}

/* v6 SKU 购买卡片 */
.sku-card {
  background: linear-gradient(135deg, #fff7e6, #fff);
  border-radius: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #fde68a;
}
.sku-ic {
  font-size: 30px;
  text-align: center;
}
.sku-label {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.sku-desc {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}
.sku-price {
  font-size: 12px;
  color: #ff5757;
  font-weight: 700;
  text-align: right;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}
.sku-price .num {
  font-size: 18px;
  margin-left: 2px;
}

/* v6 联系客服 */
.cs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-row {
  background: #f7f8fa;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-lbl {
  color: #999;
  font-size: 13px;
  min-width: 60px;
}
.cs-val {
  flex: 1;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  word-break: break-all;
}
.copy-btn {
  padding: 4px 10px;
  background: #ff5757;
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
}

/* v6 帮助中心 */
.help-item {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.help-item .q {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
}
.help-item .a {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* v6 列表项（用在 modal-my-xxx 中） */
.list-item {
  background: #fafbfc;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.list-item .thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #eee;
  flex-shrink: 0;
}
.list-item .info { flex: 1; min-width: 0; }
.list-item .info .t { font-size: 14px; font-weight: 600; color: #333; }
.list-item .info .s { font-size: 11px; color: #999; margin-top: 2px; word-break: break-all; }
.list-item .ops button {
  padding: 4px 10px;
  background: #ff5757;
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
}
.list-item .badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}
.list-item .badge.unused { background: #dcfce7; color: #166534; }
.list-item .badge.used { background: #fee2e2; color: #b91c1c; }
.list-item .badge.active { background: #dbeafe; color: #1e40af; }

/* v6 文案卡片操作 */
.copy-card .op-copy,
.copy-card .op-draft,
.copy-card .op-img,
.copy-card .op-share {
  display: inline-block;
  font-size: 12px;
  color: #2563eb;
  margin-right: 10px;
  cursor: pointer;
}

/* =========================================================
 * 通用弹层
 * ========================================================= */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-box {
  background: #fff; border-radius: 16px;
  padding: 20px;
  width: 100%; max-width: 420px;
  max-height: 88vh; overflow-y: auto;
}
.modal-box h2 { font-size: 16px; margin-bottom: 14px; text-align: center; }
.modal-box .tip { font-size: 12px; color: #999; margin-top: 6px; line-height: 1.6; }

/* =========================================================
 * 按钮、输入、徽标
 * ========================================================= */
.btn {
  display: block; width: 100%;
  padding: 12px; border-radius: 12px;
  font-size: 16px; font-weight: 600; text-align: center;
  background: #ff5757; color: #fff;
  transition: transform .06s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }
.btn.ghost { background: #eef1f6; color: #333; }
.btn.small { display: inline-block; width: auto; padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn.danger { background: #ef4444; }
.btn.success { background: #10b981; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.input {
  width: 100%; padding: 11px 12px;
  border: 1px solid #e2e5ec; border-radius: 10px;
  font-size: 15px; background: #fafbfc;
}
.input:focus { border-color: #ff5757; background: #fff; }
textarea.input { resize: vertical; min-height: 96px; line-height: 1.6; }
.field { margin-bottom: 12px; }
.field label {
  display: block; font-size: 13px; color: #666;
  margin-bottom: 6px; font-weight: 500;
}

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
.badge.basic { background: #e0e7ff; color: #4338ca; }
.badge.image { background: #cffafe; color: #0e7490; }
.badge.voice { background: #fce7f3; color: #be185d; }
.badge.used { background: #fee2e2; color: #b91c1c; }
.badge.unused { background: #d1fae5; color: #047857; }
.badge.active { background: #fef3c7; color: #b45309; }

/* =========================================================
 * 后台管理端（卖家后台）v6 板块化重排
 * ========================================================= */
/* 顶栏 */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  position: sticky; top: 0; z-index: 50;
}
.topbar .logo { font-size: 16px; font-weight: 700; color: #333; }
.back {
  padding: 8px 14px; border-radius: 8px;
  background: #eef1f6; color: #555; font-size: 13px; font-weight: 600;
}
.back:active { transform: scale(.96); }

/* 面板卡片 */
.panel {
  background: #fff; border-radius: 14px;
  padding: 16px; margin: 0 12px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.panel h2 { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 10px; }
.tip { font-size: 12px; color: #999; line-height: 1.6; }
.panel .tip { margin-bottom: 10px; }
.stat-bar {
  font-size: 12px; color: #666; background: #f7f8fa;
  padding: 8px 12px; border-radius: 8px; margin-bottom: 10px;
}
.stat-bar b { color: #ff5757; }

/* 登录页 */
.login-wrap { padding: 60px 24px; text-align: center; }
.login-logo { font-size: 52px; margin-bottom: 12px; }
.login-title { font-size: 20px; font-weight: 700; color: #333; }
.login-sub { font-size: 13px; color: #999; margin: 6px 0 28px; }
.login-wrap .field { text-align: left; }

/* 导航分组（售卖 / 内容 / 首页） */
.admin-nav { margin-bottom: 4px; }
.nav-group { padding: 0 12px; }
.nav-group-label {
  font-size: 11px; color: #aaa; font-weight: 600;
  margin: 10px 2px 6px; letter-spacing: 1px;
}
.nav-group-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-group-btns button {
  padding: 9px 16px; border-radius: 10px;
  background: #fff; color: #555;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  white-space: nowrap;
}
.nav-group-btns button.active { background: #ff5757; color: #fff; }

/* SKU 批量生成卡片（三版本独立） */
.sku-gen-card {
  background: #fafbfc; border: 1px solid #eef0f4;
  border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.sku-gen-card .sg-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.sku-gen-card .sg-name { font-size: 15px; font-weight: 700; color: #333; }
.sku-gen-card .sg-desc { font-size: 12px; color: #999; }
.sku-gen-card .sg-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.sku-gen-card .sg-actions .sg-count { flex: 1; }
.sku-gen-card .sg-deliver { width: 100%; }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.filter-btn {
  padding: 7px 12px; border-radius: 20px;
  background: #f1f3f7; color: #555;
  font-size: 12px; font-weight: 500;
}
.filter-btn.active { background: #ff5757; color: #fff; }
.pay-range-btn.active { background: #ff5757; color: #fff; border-color: #ff5757; }

.sku-group-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0 8px; padding: 8px 12px;
  background: #f5f6fa; border-radius: 8px;
  border-left: 3px solid #ff5757;
}
.sku-group-head .sgh-title { font-size: 14px; font-weight: 700; color: #333; }
.sku-group-head .sgh-title b { color: #ff5757; }
.sku-group-head .mini-btn { flex: none; padding: 6px 12px; }

.sku-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.sku-tab {
  flex: 1; padding: 9px 0; border-radius: 10px;
  background: #f1f3f7; color: #555;
  font-size: 13px; font-weight: 600; text-align: center;
}
.sku-tab.active { background: #1f2937; color: #fff; box-shadow: 0 2px 6px rgba(31,41,55,.25); }

.batch-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 10px;
  background: #f5f6fa; border-radius: 10px; flex-wrap: wrap;
}
.batch-bar .check-all { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #333; font-weight: 600; cursor: pointer; }
.batch-bar .check-all input { width: 16px; height: 16px; accent-color: #ff5757; }
.batch-bar .batch-count { font-size: 12px; color: #888; }
.batch-bar .mini-btn { flex: none; padding: 6px 12px; }

.code-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fafbfc; border-radius: 12px;
  padding: 12px; margin-bottom: 8px;
  border: 1px solid #eef0f4;
}
.code-item.used { opacity: .75; }
.code-item.active { border-color: #fcd34d; background: #fffbeb; }
.ci-check { flex: none; padding-top: 2px; }
.ci-check input { width: 17px; height: 17px; accent-color: #ff5757; cursor: pointer; }
.ci-body { flex: 1; min-width: 0; }
.ci-ops .mini-btn.reset-code { background: #fef3c7; color: #b45309; }
.ci-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-code { font-size: 16px; font-weight: 700; letter-spacing: 1px; font-family: monospace; }
.ci-dates { display: flex; gap: 16px; margin: 6px 0; font-size: 12px; color: #888; flex-wrap: wrap; }
.ci-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.ci-ops .mini-btn { flex: none; padding: 6px 12px; }

/* =========================================================
 * 列表项（模板/文案/音乐统一）
 * ========================================================= */
.list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 12px;
  background: #fff; margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.list-item .thumb {
  width: 46px; height: 62px; border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fecfef, #ff9a9e);
}
.list-item .info { flex: 1; min-width: 0; }
.list-item .info .t { font-size: 14px; font-weight: 600; }
.list-item .info .s { font-size: 12px; color: #999; margin-top: 3px; word-break: break-all; }
.list-item .ops { display: flex; gap: 6px; flex-shrink: 0; }
.list-item .ops button {
  padding: 6px 10px; border-radius: 8px;
  font-size: 12px; background: #eef1f6; color: #333;
}
.list-item .ops button.del { background: #fee2e2; color: #b91c1c; }
.list-item .ops button.ed { background: #e0e7ff; color: #4338ca; }

.bg-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.swatch {
  width: 40px; height: 40px; border-radius: 10px;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e2e5ec;
}
.swatch:active { transform: scale(.92); }
.swatch.sel { box-shadow: 0 0 0 2px #ff5757; }

/* =========================================================
 * 多页编辑器 / 模板预览（沿用 v4）
 * ========================================================= */
.page-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 8px; }
.nav-btn { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #333; font-size: 22px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.page-dots { display: flex; gap: 6px; justify-content: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #d5d9e0; transition: all .2s; }
.dot.active { background: #ff5757; width: 20px; border-radius: 4px; }
.page-hint { text-align: center; color: #999; font-size: 12px; margin-bottom: 8px; }

.editor-canvas {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 16px; overflow: hidden; background: #333;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  margin-bottom: 12px; touch-action: none;
}
.editor-canvas canvas, .editor-canvas .fx-layer { position: absolute; inset: 0; width: 100%; height: 100%; }

.text-el {
  position: absolute; transform: translate(-50%, -50%);
  white-space: pre-line; text-align: center; z-index: 3;
  cursor: move; touch-action: none; line-height: 1.5; word-break: break-word;
}
.photo-el {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  border-radius: 10px; object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  cursor: move; touch-action: none;
}

.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tool-btn {
  flex: 1; min-width: 70px;
  padding: 11px; border-radius: 10px;
  background: #fff; color: #333;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.tool-btn.locked { opacity: .4; }

.preview-overlay {
  position: fixed; inset: 0; background: #f5f6fa;
  z-index: 90; display: flex; flex-direction: column;
}
.preview-head { display: flex; align-items: center; padding: 12px 16px; gap: 12px; }
.preview-title { font-size: 15px; font-weight: 600; flex: 1; text-align: center; }
.preview-stage {
  position: relative; flex: 1; margin: 0 16px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.12); max-height: 62vh;
}
.preview-foot { padding: 16px; }

/* =========================================================
 * 观看页（贺卡详情）
 * ========================================================= */
.view-page { position: fixed; inset: 0; overflow: hidden; background: #111; }
.view-stage { position: absolute; inset: 0; }
.view-card {
  position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; overflow: hidden;
}
.view-card.on { opacity: 1; }
.view-card canvas, .view-card .fx-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.view-text-el { text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.view-photo-el { box-shadow: 0 6px 30px rgba(0,0,0,.35); }
.view-empty { color: #fff; text-align: center; padding: 60px 30px; font-size: 16px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

.view-dots { position: absolute; bottom: 130px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 20; }
.view-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.v-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.28); color: #fff; font-size: 22px;
  pointer-events: auto;
}
#v-prev { left: 12px; }
#v-next { right: 12px; }

/* =========================================================
 * 详情页：右上角旋转音乐符号（v5 新增）
 * ========================================================= */
.view-music-btn {
  position: absolute; top: 50px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.32); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 25; color: #fff; font-size: 22px;
}
.view-music-btn.playing .note-ic {
  animation: musicSpin 4s linear infinite;
}
.view-music-btn.muted .note-ic {
  animation: none; opacity: .35;
}
@keyframes musicSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* v5：详情页底部操作条（⭐收藏 / 立即制作 / 切换效果） */
.view-foot {
  position: absolute; bottom: 24px; left: 0; right: 0;
  display: flex; gap: 8px; padding: 0 16px;
  z-index: 30; align-items: center; justify-content: center;
}
.view-foot button {
  padding: 10px 16px;
  border-radius: 26px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  color: #fff; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.view-foot button.primary {
  background: linear-gradient(135deg, #ff5757, #ff7b6e);
}
.view-foot button:active { transform: scale(.96); }

/* =========================================================
 * 详情页：PPT 自动翻页模式进度条
 * ========================================================= */
.auto-progress {
  position: absolute; bottom: 96px; left: 16px; right: 16px;
  height: 3px; background: rgba(255,255,255,.2);
  border-radius: 2px; overflow: hidden; z-index: 25;
}
.auto-progress .bar {
  height: 100%; background: linear-gradient(90deg, #ff5757, #ffaf7e);
  width: 0%;
  transition: width linear;
}

/* 录音区 */
.view-voice {
  position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%);
  z-index: 30;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
  border-radius: 30px; padding: 10px 20px; max-width: 88%;
}
.v-voice-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff; font-size: 18px; flex-shrink: 0;
}
.v-voice-msg { color: #fff; font-size: 13px; font-weight: 500; line-height: 1.4; }

/* =========================================================
 * Toast
 * ========================================================= */
#toast {
  position: fixed; left: 50%; bottom: 90px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(17,24,39,.92); color: #fff;
  padding: 11px 20px; border-radius: 24px;
  font-size: 14px; z-index: 999;
  opacity: 0; pointer-events: none; transition: all .25s ease;
  max-width: 84%; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
 * 动画层（4 种基础 + v5 扩充）
 * ========================================================= */
.fx-layer { pointer-events: none; overflow: hidden; }

.balloon {
  position: absolute; bottom: -140px;
  border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
  animation: balloonUp linear infinite; will-change: transform;
}
.balloon::after {
  content: ''; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  border-left: 1px solid rgba(255,255,255,.5); border-right: 1px solid rgba(255,255,255,.5);
  width: 2px; height: 12px;
}
@keyframes balloonUp {
  0%   { transform: translateY(0) translateX(0) rotate(-2deg); }
  25%  { transform: translateY(-30vh) translateX(10px) rotate(2deg); }
  50%  { transform: translateY(-60vh) translateX(-8px) rotate(-2deg); }
  75%  { transform: translateY(-90vh) translateX(6px) rotate(2deg); }
  100% { transform: translateY(-125vh) translateX(0) rotate(-2deg); }
}

.star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle ease-in-out infinite; will-change: opacity, transform;
}
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.15); }
}

.glow {
  position: absolute; border-radius: 50%; filter: blur(2px);
  animation: glowFloat ease-in-out infinite; will-change: transform, opacity;
}
@keyframes glowFloat {
  0%, 100% { opacity: .25; transform: translateY(0) scale(1); }
  50% { opacity: .55; transform: translateY(-18px) scale(1.15); }
}

/* v5：樱花 */
.sakura {
  position: absolute; top: -30px; will-change: transform, opacity;
  animation: sakuraFall linear infinite;
}
@keyframes sakuraFall {
  0%   { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(40px, 110vh) rotate(360deg); opacity: .7; }
}

/* v5：雪花 */
.snow {
  position: absolute; top: -10px; border-radius: 50%;
  background: #fff; will-change: transform;
  animation: snowFall linear infinite;
}
@keyframes snowFall {
  0%   { transform: translate(0,0) rotate(0); opacity: .9; }
  100% { transform: translate(-30px, 110vh) rotate(360deg); opacity: .6; }
}

/* v5：彩带 */
.confetti {
  position: absolute; width: 8px; height: 14px;
  animation: confettiFall linear infinite; will-change: transform;
}
@keyframes confettiFall {
  0%   { transform: translate(0,0) rotate(0); }
  100% { transform: translate(20px, 110vh) rotate(720deg); }
}

/* v5：心形 */
.heart {
  position: absolute; color: #ff6b8a;
  animation: heartFloat linear infinite; will-change: transform, opacity;
}
@keyframes heartFloat {
  0%   { transform: translateY(20vh) scale(.4); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-110vh) scale(1); opacity: 0; }
}

/* v5：烟花 */
.firework {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, transparent 70%);
  animation: fireworkBurst 1.2s ease-out infinite; will-change: transform, opacity;
}
@keyframes fireworkBurst {
  0%   { transform: scale(0); opacity: 1; }
  60%  { transform: scale(2); opacity: .8; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* v5：旗帜 */
.flag {
  position: absolute; width: 12px; height: 18px;
  animation: flagWave 1s ease-in-out infinite; will-change: transform;
}
@keyframes flagWave {
  0%, 100% { transform: skewX(-8deg); }
  50%      { transform: skewX(8deg); }
}

/* =========================================================
 * 加载/空状态
 * ========================================================= */
.loading, .empty { text-align: center; color: #999; padding: 40px 0; font-size: 14px; }

/* =========================================================
 * 文字编辑器（多页编辑器内的元素）
 * ========================================================= */
.edit-inline {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 5;
  min-width: 40px;
}
.edit-text {
  background: rgba(255,255,255,.85);
  border: 1px dashed #ff5757;
  padding: 6px 10px;
  border-radius: 6px;
  min-width: 40px;
  outline: none;
  cursor: text;
  word-break: break-word;
  line-height: 1.5;
}
.edit-inline.selected .edit-text {
  background: #fff;
  border-style: solid;
  box-shadow: 0 0 0 2px rgba(255,87,87,.25);
}

/* 拖拽手柄（PPT 式：点内容直接编辑，拖手柄移动） */
.el-grip {
  position: absolute; top: -13px; left: -13px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #ff5757; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; cursor: move; z-index: 10;
  box-shadow: 0 1px 5px rgba(0,0,0,.3);
  touch-action: none; user-select: none;
}

/* 照片元素（编辑器内包裹层） */
.photo-wrap {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 2; cursor: move;
}
.photo-wrap img { pointer-events: auto; }
.photo-wrap.selected { outline: 2px solid #ff5757; outline-offset: 3px; border-radius: 10px; }
.photo-wrap .el-grip { top: -13px; left: -13px; }

/* 页管理按钮 */
.pg-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: #333; font-size: 15px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* 属性面板（选中元素后出现） */
.props-panel {
  background: #fff; border-radius: 12px;
  padding: 8px 10px; margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.props-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.prop-select {
  flex: 1; min-width: 110px; padding: 7px 8px;
  border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px;
  background: #fff; color: #333;
}
.prop-size { display: flex; align-items: center; gap: 4px; }
.prop-size span { min-width: 24px; text-align: center; font-size: 13px; font-weight: 600; }
.prop-mini {
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 8px; background: #f1f3f7; color: #333;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.prop-mini.bold { font-weight: 900; }
.prop-mini.danger { background: #fee2e2; color: #b91c1c; }
.prop-mini.on { background: #ff5757; color: #fff; }
.prop-colors { display: flex; gap: 4px; flex-wrap: wrap; }
.prop-color {
  width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.prop-color.on { box-shadow: 0 0 0 2px #ff5757, 0 0 0 4px #fff; }
.prop-spacer { flex: 1; }

/* 简易图表式横滚条文字 */
.scroll-hint {
  display: inline-block; padding: 4px 12px; border-radius: 12px;
  background: rgba(0,0,0,.04); font-size: 11px; color: #999;
}

/* Logo + Top */
.admin-hero {
  background: #1f2937; color: #fff;
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
}
.admin-hero .lg { font-size: 17px; font-weight: 700; }
.admin-hero .lk { color: #9ca3af; font-size: 12px; margin-left: auto; }

/* =========================================================
 * v7 支付数据面板 / 支付确认框 / 订单状态徽章
 * ========================================================= */
.pay-stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.pay-stat {
  background: #fff; border-radius: 12px; padding: 16px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  text-align: center;
}
.pay-stat .n { font-size: 22px; font-weight: 800; color: #ff5757; line-height: 1.2; }
.pay-stat .l { font-size: 12px; color: #999; margin-top: 4px; }

.pay-order-item {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 10px;
}
.pay-order-item .po-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #f0f0f0;
}
.po-sku { font-weight: 700; font-size: 14px; color: #333; }
.po-amt { margin-left: auto; font-weight: 800; color: #ff5757; font-size: 15px; }
.pay-order-item .po-row { font-size: 12.5px; color: #666; line-height: 1.7; }
.pay-order-item .po-row code {
  background: #f5f6fa; padding: 1px 6px; border-radius: 4px;
  font-size: 12px; color: #2563eb;
}

/* 订单状态徽章 */
.badge.paid { background: #e7f6ec; color: #1a7f37; }
.badge.pending { background: #fff4e5; color: #c77700; }
.badge.cancelled { background: #f2f3f5; color: #999; }

/* 支付确认框 */
.pay-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 2px; border-bottom: 1px dashed #eee; font-size: 14px; color: #555;
}
.pay-line:last-of-type { border-bottom: none; }
.pay-amt { color: #ff5757; font-size: 18px; }

/* =========================================================
 * 融合版 · 叙事播放器 + 快速制作表单（借鉴同行 4 屏幻灯片）
 * ========================================================= */

:root {
  --narr-bg: linear-gradient(160deg,#ff9a9e 0%,#fecfef 100%);
  --narr-accent: #d6336c;
  --narr-solid: #ff6b81;
  --narr-text: #ffffff;
  --narr-sub: #fff5f5;
}

/* ---- 播放器根容器 ---- */
.narr-root {
  position: fixed; inset: 0;
  background: var(--narr-bg);
  overflow: hidden;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.narr-screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: narrFadeIn .5s ease;
}
@keyframes narrFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- 屏 1 登录 ---- */
.narr-login { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.narr-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.narr-bubble {
  position: absolute; bottom: -40px; border-radius: 50%;
  background: rgba(255,255,255,.28);
  animation: narrBubbleUp linear infinite;
}
@keyframes narrBubbleUp {
  0% { transform: translateY(0) scale(.8); opacity: 0; }
  15% { opacity: .8; }
  100% { transform: translateY(-110vh) scale(1.3); opacity: 0; }
}
.narr-login-card {
  position: relative; z-index: 2; width: 100%; max-width: 340px;
  text-align: center; color: var(--narr-text);
}
.narr-login-icon { font-size: 64px; animation: narrFloat 3s ease-in-out infinite; }
@keyframes narrFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.narr-login-title { font-size: 24px; font-weight: 700; margin-top: 8px; }
.narr-login-sub { font-size: 14px; opacity: .85; margin: 6px 0 22px; }
.narr-input {
  background: rgba(255,255,255,.92); border: none; border-radius: 12px;
  padding: 13px 16px; font-size: 15px; width: 100%; box-sizing: border-box;
  color: #333; outline: none; margin-bottom: 12px;
}
.narr-enter-btn {
  width: 100%; border: none; border-radius: 26px; padding: 14px;
  background: linear-gradient(135deg, #ffffff, #ffe0e6);
  color: var(--narr-accent); font-size: 17px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* ---- 屏 2 粒子字 ---- */
.narr-particle { position: relative; width: 100%; height: 100%; }
#narr-canvas { display: block; width: 100%; height: 100%; }

/* ---- 屏 3 蛋糕/爱心/烟花 ---- */
.narr-cake { text-align: center; color: var(--narr-text); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.narr-cake-title { font-size: 30px; font-weight: 700; letter-spacing: 2px; }
.cake-svg { filter: drop-shadow(0 10px 20px rgba(0,0,0,.15)); }
.flame { transform-origin: 150px 64px; animation: narrFlame 1s ease-in-out infinite; }
@keyframes narrFlame { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.15) rotate(2deg); } }
.heart-beat { font-size: 120px; animation: narrHeart 1.2s ease-in-out infinite; }
@keyframes narrHeart { 0%,100% { transform: scale(1); } 25% { transform: scale(1.2); } 40% { transform: scale(.95); } 60% { transform: scale(1.15); } }
.firework-emojis { font-size: 90px; animation: narrFloat 2s ease-in-out infinite; }
.narr-like-btn {
  border: 2px solid rgba(255,255,255,.8); background: rgba(255,255,255,.15);
  color: var(--narr-text); border-radius: 26px; padding: 12px 34px;
  font-size: 16px; font-weight: 700; cursor: pointer; transition: all .25s;
}
.narr-like-btn.liked { background: #fff; color: #e0245e; border-color: #fff; }
.narr-like-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.narr-like-hint { font-size: 12px; color: var(--narr-text); opacity: .85; letter-spacing: 1px; }

/* ---- 屏 4 回忆 ---- */
.narr-memory { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.narr-mem-scroll {
  width: 100%; max-width: 360px; max-height: 86vh; overflow-y: auto;
  color: var(--narr-text); text-align: center;
}
.narr-mem-sender { font-size: 13px; opacity: .85; margin-bottom: 14px; }
.narr-mem-blessing { font-size: 17px; line-height: 1.9; white-space: pre-wrap; margin-bottom: 20px; font-family: "KaiTi","STKaiti",serif; }
.narr-mem-photos { display: block; margin-bottom: 18px; }
.narr-mem-page { animation: narrFadeIn .4s ease; }
.narr-mem-page-text {
  font-size: 15px; line-height: 1.7; color: var(--narr-sub, #fff);
  background: rgba(255,255,255,.16); border-radius: 12px; padding: 10px 14px;
  margin-bottom: 10px; text-align: center; font-family: "KaiTi","STKaiti",serif;
}
.narr-mem-page-img { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.2); max-width: 78%; margin: 0 auto; }
.narr-mem-page-img img { width: 100%; display: block; }
.narr-mem-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0 4px; }
.narr-mem-nav-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.22); color: #fff; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.narr-mem-idx { font-size: 14px; opacity: .9; min-width: 60px; text-align: center; }
.narr-mem-voice {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,.18); border-radius: 20px; padding: 16px 22px;
  font-size: 14px; margin-bottom: 20px;
}
.narr-voice-play { border: none; background: #fff; color: var(--narr-accent); min-width: 150px; height: 44px; border-radius: 24px; font-size: 15px; font-weight: 700; cursor: pointer; padding: 0 20px; }
.narr-voice-hint { font-size: 12px; opacity: .85; }
.narr-mem-footer { font-size: 12px; opacity: .7; margin-top: 10px; }

/* ---- 页码 + 音乐按钮 ---- */
.narr-dots { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 5; }
.narr-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); transition: all .3s; }
.narr-dot.on { background: #fff; width: 22px; border-radius: 6px; }
.narr-music-btn {
  position: fixed; top: 18px; right: 18px; z-index: 10;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.22); color: #fff; font-size: 20px; cursor: pointer;
  animation: narrSpin 4s linear infinite;
}
.narr-music-btn.muted { animation: none; opacity: .5; }
@keyframes narrSpin { to { transform: rotate(360deg); } }

/* ---- Toast ---- */
#narr-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,.72); color: #fff; padding: 10px 20px; border-radius: 24px;
  font-size: 14px; opacity: 0; transition: all .3s; z-index: 99; pointer-events: none;
}
#narr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
 * 快速制作表单（index.html 弹窗）
 * ========================================================= */
.qm-box { max-width: 420px; padding: 0; overflow: hidden; }
.qm-head { padding: 22px 20px; text-align: center; color: #fff; }
.qm-head-icon { font-size: 42px; }
.qm-head-title { font-size: 20px; font-weight: 700; margin-top: 4px; }
.qm-head-sub { font-size: 13px; opacity: .9; margin-top: 4px; }
.qm-body { padding: 16px 20px; max-height: 58vh; overflow-y: auto; }
.qm-themes { display: flex; gap: 12px; flex-wrap: wrap; }
.qm-theme {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; padding: 2px; min-width: 40px;
}
.qm-theme-dot {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid transparent; transition: all .2s;
}
.qm-theme.on .qm-theme-dot { border-color: #ff5757; transform: scale(1.1); }
.qm-theme-name { font-size: 11px; color: #888; line-height: 1; }
.qm-theme.on .qm-theme-name { color: #ff5757; font-weight: 600; }
.qm-photo-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.qm-add-photo {
  width: 72px; height: 72px; border: 2px dashed #ddd; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #999; font-size: 12px; cursor: pointer;
}
.qm-photo-list { display: flex; flex-wrap: wrap; gap: 8px; }
.qm-photo-item { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; cursor: grab; }
.qm-photo-item.drag-over { outline: 2px dashed #ff5757; outline-offset: -2px; transform: scale(1.05); }
.qm-photo-item.long-press { outline: 2px solid #ff5757; }
.qm-photo-item img { width: 100%; height: 100%; object-fit: cover; }
.qm-photo-del {
  position: absolute; top: 0; right: 0; width: 20px; height: 20px;
  background: rgba(0,0,0,.6); color: #fff; border-radius: 0 0 0 8px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px;
}
.qm-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid #f0f0f0; }
.qm-foot .btn { flex: 1; }
.qm-voice-field .btn { margin-right: 8px; }

/* ---- 高级板块（折叠展开 + 8 段祝福语框） ---- */
.qm-advanced { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #eee; }
.qm-advanced-toggle {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 0; user-select: none;
}
.qm-advanced-toggle:hover { color: #ff5757; }
.qm-advanced-arrow { font-size: 11px; color: #999; transition: transform .2s; display: inline-block; width: 14px; }
.qm-advanced-body { padding: 4px 0 8px; }
.qm-advanced-body.hidden { display: none; }
.qm-adv-text { resize: vertical; }

/* ---- 用户端「快速制作」横幅入口 ---- */
.quick-banner {
  margin: 14px 16px 0; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg,#ff6b81,#ff9a9e);
  color: #fff; display: flex; align-items: center; gap: 12px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(255,107,129,.28);
}
.quick-banner .qb-ic { font-size: 32px; }
.quick-banner .qb-txt { flex: 1; }
.quick-banner .qb-txt .t { font-size: 16px; font-weight: 700; }
.quick-banner .qb-txt .s { font-size: 12px; opacity: .9; margin-top: 2px; }
.quick-banner .qb-go { background: #fff; color: #ff6b81; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 20px; }

/* ---- 叙事模板卡片（用户端 + 后台） ---- */
.narr-tpl-card {
  position: relative; border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.1); transition: transform .2s;
}
.narr-tpl-card:hover { transform: translateY(-3px); }
.narr-tpl-card .ntc-bg { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.narr-tpl-card .ntc-body { padding: 10px 12px; background: #fff; }
.narr-tpl-card .ntc-name { font-size: 14px; font-weight: 700; color: #333; }
.narr-tpl-card .ntc-tag { font-size: 11px; color: #fff; background: #ff6b81; border-radius: 4px; padding: 2px 8px; margin-left: 6px; }

/* ---- 后台叙事模板列表 ---- */
.narr-admin-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border: 1px solid #f0f0f0; border-radius: 12px; margin-bottom: 10px;
  background: #fff;
}
.nai-bg { width: 64px; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.nai-info { flex: 1; min-width: 0; }
.nai-name { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 4px; }
.nai-meta { font-size: 12px; color: #999; line-height: 1.5; }
.narr-badge { background: #ffe0e6; color: #d6336c; flex-shrink: 0; }

/* ============ 浏览成果全屏预览层（内嵌 narrative 播放器） ============ */
.narr-preview-overlay {
  position: fixed; inset: 0; background: #111; z-index: 300;
  display: flex; flex-direction: column;
}
.narr-preview-overlay.hidden { display: none; }
.narr-preview-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: #1f1f1f; color: #fff; flex-shrink: 0;
}
.narr-preview-title { flex: 1; text-align: center; font-size: 14px; color: #fff; }
.narr-preview-bar .btn { background: #3a3a3a; color: #fff; border: none; padding: 6px 12px; }
.narr-preview-frame { flex: 1; width: 100%; border: none; background: #111; }

/* ============ 我的-我制作的贺卡 / 草稿箱 横版行 ============ */
.hb-row-item { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #f0f1f5; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.hb-row-icon { width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.hb-row-body { flex: 1; min-width: 0; }
.hb-row-title { font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-row-sub { font-size: 11px; color: #999; margin-top: 3px; line-height: 1.5; }
.hb-row-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hb-row-ops button { padding: 5px 12px; border-radius: 8px; font-size: 12px; border: none; cursor: pointer; background: #eef1f6; color: #333; }
.hb-row-ops button.pri { background: #ff5757; color: #fff; }
.hb-row-ops button.danger { background: #fee2e2; color: #b91c1c; }
.hb-row-ops button.ed { background: #e0e7ff; color: #4338ca; }
.hb-row-ops button:disabled { opacity: .4; cursor: not-allowed; }
.hb-lock-badge { display: inline-block; font-size: 11px; color: #b45309; background: #fef3c7; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }

/* ===== 批量生成结果：网格胶囊排版 ===== */
.gen-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-height: 260px; overflow-y: auto; }
.gen-chip { background: #f5f6fa; border: 1px solid #e2e6ef; border-radius: 6px; padding: 4px 10px; font-family: Consolas, Menlo, monospace; font-size: 13px; letter-spacing: 0.5px; }

/* ===== 点击当老板（营销推广） ===== */
.boss-sec { margin-bottom: 22px; }
.boss-sec-title {
  font-size: 16px; font-weight: 700; color: #2b2c34; margin-bottom: 12px;
  padding-left: 10px; border-left: 4px solid #ff5757; line-height: 1.4;
}
/* 项目介绍正文：重点排版——舒适行高、字号、段间距、长文本自动换行、首行缩进 */
.boss-intro {
  background: #fafafa; border: 1px solid #f0f1f5; border-radius: 12px;
  padding: 16px 18px;
}
.boss-intro p {
  font-size: 14px; color: #444; line-height: 1.85;
  margin: 0 0 14px 0; word-break: break-word; text-indent: 2em;
}
.boss-intro p:last-child { margin-bottom: 0; }

/* 详细项目介绍文件卡片 */
.boss-file {
  display: flex; align-items: center; gap: 10px;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px;
  padding: 14px 16px; cursor: pointer;
}
.boss-file-icon { font-size: 22px; }
.boss-file-name { flex: 1; min-width: 0; font-size: 14px; color: #333; word-break: break-all; }
.boss-file-btn { flex-shrink: 0; background: #ff5757; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px; }

/* 联系方式 */
.boss-contact-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #f0f1f5; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.boss-contact-label {
  flex-shrink: 0; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  padding: 4px 10px; border-radius: 8px;
}
.boss-contact-value { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: #2b2c34; word-break: break-all; }
.boss-contact-copy {
  flex-shrink: 0; border: 1px solid #ff5757; background: #fff; color: #ff5757;
  font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer;
}
.boss-contact-tip {
  margin-top: 6px; font-size: 12px; color: #999; text-align: center;
  padding: 10px; border-top: 1px dashed #eee;
}