/* ===========================================================
   格林影像 · 爱婴上门 —— 选衣系统
   视觉：暖白 + 浅焦糖棕，细圆体，厚卡纸装裱感
   =========================================================== */

:root {
  --bg:        #FCF4F2;   /* 粉调暖白底（更粉嫩） */
  --bg-soft:   #F7EDE9;
  --card:      #FFFFFF;   /* 厚卡纸 */
  --primary:   #8A6242;   /* 深棕：按钮/强调字 */
  --primary-d: #6E4C32;
  --primary-l: #F0E3D8;
  --accent:    #D9A85F;   /* 更亮的金 */
  --accent-l:  #F9F0E4;
  --gold-rgb:  217,168,95; /* 金线统一色值，改这里全站生效 */
  --text:      #3B322B;   /* 暖褐黑 */
  --text-2:    #7A6B5D;
  --text-3:    #B0A292;
  --line:      #EDDFD8;
  /* 小星点（纯 CSS，不增加 DOM） */
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D9A85F'%3E%3Cpath d='M12 1.5 L13.7 9.3 L21.5 11 L13.7 12.7 L12 20.5 L10.3 12.7 L2.5 11 L10.3 9.3 Z'/%3E%3C/svg%3E");
  --danger:    #A65B4B;
  --ok:        #7D8F6E;
  --radius:    14px;
  --radius-s:  10px;
  --shadow:    0 6px 20px rgba(120, 88, 60, .10);
  --shadow-s:  0 3px 12px rgba(120, 88, 60, .08);
  --shadow-mount: 0 10px 26px rgba(120, 88, 60, .13);
  --safe-b:    env(safe-area-inset-bottom, 0px);
  /* 圆体：iOS 用圆体-简，其余回退无衬线 */
  --round:     "Yuanti SC", "YuanTi SC", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--round);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body { overscroll-behavior-y: none; }

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input  { font-family: inherit; }

/* ⛔ 曾在这里做过「两层错位小星点」星空纹理，用户嫌太密集，已移除；不要再加回来 */
#app {
  max-width: 560px; margin: 0 auto; min-height: 100vh; position: relative;
  background-color: var(--bg);
}

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(251,246,240,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 15px 16px 13px;
  display: flex; align-items: center; gap: 10px;
}
/* 顶栏底边中央一小段金线 */
.topbar::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: 42px; height: 2px; border-radius: 1px;
  background: var(--accent);
}
.topbar .brand {
  flex: 1; text-align: center;
  font-family: var(--round);
  font-size: 17px; font-weight: 500; letter-spacing: .2em;
  color: var(--text);
}
.topbar .brand small {
  display: block; font-family: var(--round);
  font-size: 9px; font-weight: 400;
  letter-spacing: .4em; text-indent: .4em; color: var(--accent);
  margin-bottom: 4px;
}
.topbar .brand-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.topbar .brand-mark { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------------- 顶部色块头图 ---------------- */
.hero {
  position: relative; overflow: hidden;
  height: 32vh; min-height: 224px; max-height: 286px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(var(--gold-rgb),.20) 0%, rgba(var(--gold-rgb),0) 62%),
    linear-gradient(158deg, #FEFBF7 0%, #F8F1E6 46%, #F0E1CC 100%);
  border-bottom: 1px solid rgba(var(--gold-rgb),.30);
}
/* 极淡斜纹纹理，替代原先的大铺底英文 */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* 只保留极淡斜纹（星点已按用户要求去掉） */
  background:
    repeating-linear-gradient(
      45deg,
      rgba(var(--gold-rgb),.055) 0 1px,
      rgba(var(--gold-rgb),0) 1px 10px
    );
}
/* 四角细金线角饰 —— 画框感 */
.hero .cnr {
  position: absolute; width: 18px; height: 18px; z-index: 2;
  pointer-events: none;
}
.hero .cnr.tl { top: 15px; left: 15px;  border-top: 1px solid var(--accent);    border-left: 1px solid var(--accent); }
.hero .cnr.tr { top: 15px; right: 15px; border-top: 1px solid var(--accent);    border-right: 1px solid var(--accent); }
.hero .cnr.bl { bottom: 15px; left: 15px;  border-bottom: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.hero .cnr.br { bottom: 15px; right: 15px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }

.hero .inner {
  position: relative; z-index: 1;
  text-align: center;
  width: 100%;
  padding: 6px 112px 0 14px;
}
.hero .lockup {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hero .mark { width: 30px; height: 30px; flex: 0 0 auto; }
.hero .zh {
  font-family: var(--round);
  font-size: 28px; font-weight: 500; letter-spacing: .18em;
  text-indent: .18em; line-height: 1.2;
  color: #2E2721;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.hero .mascot {
  position: absolute; z-index: 2; right: 8px; bottom: 4px;
  width: 96px; height: 152px;
  object-fit: contain; object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(90, 60, 30, .16));
}
/* 分隔线：— ◆ — */
.hero .rule {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; margin: 15px 0 13px;
}
.hero .rule i {
  display: block; width: 34px; height: 1px;
  background: linear-gradient(to right, rgba(var(--gold-rgb),0), var(--accent));
}
.hero .rule i:last-child {
  background: linear-gradient(to left, rgba(var(--gold-rgb),0), var(--accent));
}
.hero .rule b {
  display: block; width: 5px; height: 5px;
  background: var(--accent); transform: rotate(45deg);
}
.hero .en {
  font-family: var(--round);
  font-size: 10px; font-weight: 400; letter-spacing: .52em;
  text-indent: .52em; color: #C79A5C;
  line-height: 1.6;
}
.hero .sub {
  margin-top: 7px;
  font-size: 11px; font-weight: 400; letter-spacing: .3em;
  text-indent: .3em; color: var(--text-2);
}
.hero .gear {
  position: absolute; z-index: 3; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-2); opacity: .32;
}
.hero .gear:active { background: rgba(255,255,255,.5); }
/* 头图下沿与内容柔和衔接 */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 1;
  background: linear-gradient(to bottom, rgba(251,246,240,0), var(--bg));
  pointer-events: none;
}
.iconbtn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text); flex: 0 0 auto;
  transition: background .18s;
}
.iconbtn:active { background: var(--bg-soft); }

/* ---------------- 装饰元素（新生儿风格点缀） ---------------- */
/* ⛔ 飘带（厚版 .ribbon / 简约版 .ribbon-s）用户都不要了，第 9 版全删，别再加 */

/* 选衣页装饰标题 */
.pick-deco {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 2px 0 14px;
}
.pick-deco .dl {
  height: 1px; max-width: 92px; flex: 1;
  background: linear-gradient(to right, rgba(var(--gold-rgb),0), var(--accent));
}
.pick-deco .dl.r { background: linear-gradient(to left, rgba(var(--gold-rgb),0), var(--accent)); }
.pick-deco .dt {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; letter-spacing: .22em; text-indent: .22em;
  color: var(--primary-d);
}
.pick-deco .dt svg { width: 13px; height: 13px; opacity: .9; }

/* 页脚装饰 */
.pick-foot {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  margin: 30px 0 6px; color: var(--text-3);
}
.pick-foot svg { width: 26px; height: 30px; opacity: .45; }
.pick-foot .foot-sprite { width: 46px; height: 50px; object-fit: contain; }
.pick-foot span { font-size: 11px; letter-spacing: .24em; text-indent: .24em; }
/* 版本号（打包时自动递增，页面角落极淡显示，不干扰视觉） */
.ver {
  margin: 10px 0 2px; text-align: center;
  font-size: 10px; letter-spacing: .1em; color: var(--text-3); opacity: .55;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 通用 ---------------- */
.wrap { padding: 16px 16px calc(96px + var(--safe-b)); }
.page { animation: fade .26s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.section-title {
  font-size: 13px; color: var(--text-2); letter-spacing: .1em;
  margin: 4px 2px 12px; display: flex; align-items: center; gap: 8px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.btn {
  width: 100%; height: 50px; border-radius: 25px;
  background: linear-gradient(135deg, #9A7050 0%, var(--primary) 48%, var(--primary-d) 100%);
  color: #fff; font-size: 16px; font-weight: 500; letter-spacing: .12em;
  border: 1px solid rgba(var(--gold-rgb),.5);
  box-shadow: 0 8px 20px rgba(138, 98, 66, .26), inset 0 0 0 2px rgba(255,255,255,.10);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.btn:active { transform: scale(.985); box-shadow: 0 4px 12px rgba(138, 98, 66, .20); }
.btn:disabled { opacity: .45; box-shadow: none; }
.btn.ghost {
  background: #fff; color: var(--primary-d);
  border: 1px solid var(--primary-l); box-shadow: none;
}
.btn.small { height: 42px; font-size: 14px; }

/* ---------------- 选衣页 ---------------- */
.toolbar {
  display: flex; align-items: center; gap: 10px; margin: 0 2px 14px;
}
.count-chip {
  font-size: 12px; color: var(--text-2); letter-spacing: .07em;
  background: linear-gradient(to bottom, #FFFFFF, #FBF4EA);
  border: 1px solid #EBDCC7;
  border-radius: 20px; padding: 6px 14px;
  box-shadow: 0 1px 3px rgba(120,88,60,.06);
}
.count-chip b { color: var(--primary-d); font-weight: 600; }

.grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px 15px;
}
/* 装裱相框：外细线 + 内衬金线 + 白卡纸 + 柔和投影 */
.card {
  background-color: var(--card);
  border: 1px solid #E7D6BF;
  border-radius: 16px;   /* 外框也圆（与封面圆角呼应） */
  padding: 9px 9px 0;
  box-shadow:
    inset 0 0 0 3px #FFFFFF,
    inset 0 0 0 4px rgba(var(--gold-rgb),.32),
    0 1px 2px rgba(120,88,60,.06),
    0 10px 24px rgba(120,88,60,.13);
  position: relative;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s;
}
.card:active {
  transform: translateY(2px) scale(.985);
  box-shadow:
    inset 0 0 0 3px #FFFFFF,
    inset 0 0 0 4px rgba(var(--gold-rgb),.32),
    0 1px 2px rgba(120,88,60,.06),
    0 4px 12px rgba(120,88,60,.10);
}
.card .thumb {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 16px; background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.16);
}
/* 主题名：图下方居中，名字上方一条金线，字重加粗 */
.card .name {
  position: relative;
  padding: 0 4px 14px;
  text-align: center;
  font-family: var(--round);
  font-size: 14px; font-weight: 500; color: #3A3129;
  letter-spacing: .09em; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .name::before {
  content: ""; display: block;
  width: 16px; height: 1px; margin: 11px auto 9px;
  background: var(--accent);
}
.card .name::after {
  content: ""; display: block;
  width: 4px; height: 4px; margin: 8px auto 0;
  background: rgba(var(--gold-rgb),.6);
  transform: rotate(45deg);
}

/* 已选：右上角焦糖棕圆形小勾 */
.card .check {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 25px; height: 25px; border-radius: 50%;
  background: linear-gradient(135deg, #D2A876 0%, #A97644 100%);
  color: #fff;
  font-size: 12px; line-height: 1; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,.92);
  box-shadow: 0 3px 9px rgba(150, 105, 62, .42);
}
.card.mine { border-color: var(--accent); }
.card.mine .name { color: var(--primary-d); font-weight: 600; }
.card.mine .name::before { width: 28px; background: var(--primary); }

.card .badge {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  background: rgba(255,253,249,.94); color: var(--primary-d);
  font-size: 10px; padding: 3px 9px; border-radius: 20px;
  letter-spacing: .1em; font-weight: 500;
  border: 1px solid rgba(var(--gold-rgb),.6);
  box-shadow: 0 2px 6px rgba(120,88,60,.14);
}

/* ---------------- 底部悬浮条 ---------------- */
.selbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + var(--safe-b)); z-index: 40;
  width: min(528px, calc(100% - 32px));
  background: linear-gradient(135deg, #9A7050 0%, var(--primary) 45%, var(--primary-d) 100%);
  color: #fff; border-radius: 28px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 0 9px 0 22px;
  border: 1px solid rgba(var(--gold-rgb),.55);
  box-shadow:
    0 10px 26px rgba(138, 98, 66, .32),
    inset 0 0 0 2px rgba(255,255,255,.09);
  transition: transform .22s, opacity .22s;
}
.selbar .lbl {
  font-size: 14.5px; letter-spacing: .07em; font-weight: 400;
  white-space: nowrap; flex: 0 1 auto; min-width: 0;
}
.selbar .lbl b { font-size: 19px; font-weight: 600; margin: 0 2px; }
/* 「查看已选」装饰框：金线描边白胶囊，文字必须完整在框内 */
.selbar .go {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  height: 40px; min-width: 122px;
  padding: 0 15px;
  background: linear-gradient(to bottom, #FFFDF9 0%, #FCF5EA 100%);
  color: var(--primary-d);
  border: 1px solid rgba(var(--gold-rgb),.7);
  border-radius: 20px;
  font-size: 14px; font-weight: 500; letter-spacing: .06em;
  white-space: nowrap; text-align: center;
  box-shadow: 0 2px 8px rgba(80,52,30,.20), inset 0 0 0 2px rgba(255,255,255,.85);
}
.selbar .go i {
  font-style: normal; font-size: 15px; line-height: 1;
  opacity: .8; margin-top: -1px;
}
.selbar.hide { transform: translate(-50%, 120%); opacity: 0; pointer-events: none; }

/* ---------------- 详情弹层 ---------------- */
.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(58,48,44,.5);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .2s ease both;
}
.sheet .panel {
  width: min(560px, 100%); max-height: 92vh;
  background: var(--bg); border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  animation: slideUp .3s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet .ph {
  position: relative;
  padding: 16px 18px 12px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.sheet .ph h3 {
  margin: 0; flex: 1; font-size: 16px; font-weight: 600; letter-spacing: .06em;
}
.sheet .ph .sub { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 6px; }
.sheet .pbody { flex: 1; overflow-y: auto; padding: 14px 16px 20px; }
.sheet .swipe {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 10px; align-items: center;
  background: linear-gradient(to bottom, #FFFDFA, #FCF6EC);
  outline: 1px solid #EBDCC7;
  border-radius: 12px;
  box-shadow: inset 0 0 22px rgba(176,140,96,.07);
  -webkit-overflow-scrolling: touch;
}
.sheet .swipe::-webkit-scrollbar { display: none; }
/* 不规定尺寸：横图竖图都按原比例完整显示，绝不裁切 */
.sheet .swipe img {
  width: 100%; flex: 0 0 100%; scroll-snap-align: center;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 10px; background: var(--bg-soft);
  border: 1px solid #E7D6BF;
}
.sheet .dots {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin: 14px 0 4px;
}
.sheet .dots i {
  width: 6px; height: 6px; border-radius: 50%; background: #E4D6C2;
  transition: all .2s;
}
.sheet .dots i.on { background: var(--primary); width: 18px; border-radius: 4px; }
.sheet .pf {
  padding: 12px 16px calc(14px + var(--safe-b));
  border-top: 1px solid var(--line); background: var(--bg);
}
.sheet .pf .note {
  font-size: 12px; color: var(--text-2); text-align: center; margin-bottom: 10px;
}

/* ---------------- 已选页 ---------------- */
.picked-list { display: flex; flex-direction: column; gap: 13px; }
.pitem {
  display: flex; gap: 13px; align-items: center;
  background: var(--card); border: 1px solid #EDDFCB;
  border-radius: 14px;
  padding: 11px; box-shadow: 0 1px 2px rgba(120,88,60,.05), 0 6px 16px rgba(120,88,60,.09);
}
/* 缩略图：圆角 + 金边 */
.pitem .pthumb { position: relative; flex: 0 0 auto; }
.pitem .pthumb img {
  width: 76px; height: 76px; border-radius: 12px; display: block;
  object-fit: cover; background: var(--bg-soft);
  border: 1px solid rgba(var(--gold-rgb), .55);
}
.pitem .info { flex: 1; min-width: 0; }
.pitem .info .nm {
  font-size: 14.5px; font-weight: 500; letter-spacing: .09em; color: #3A3129;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pitem .info .tm { font-size: 11px; color: var(--text-3); margin-top: 4px; letter-spacing: .04em; }
.pitem .rm {
  flex: 0 0 auto; font-size: 12px; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 16px; padding: 6px 12px;
  transition: all .18s;
}
.pitem .rm:active { background: var(--bg-soft); }
.pitem .rm.on { color: var(--danger); border-color: #EFD8CF; }

.empty {
  text-align: center; padding: 70px 20px; color: var(--text-3);
}
.empty .big { font-size: 44px; margin-bottom: 14px; opacity: .5; }
.empty p { margin: 0 0 20px; font-size: 14px; }

.summary-card {
  position: relative;
  background: linear-gradient(135deg, #FEFBF6 0%, #F6E9D7 100%);
  border: 1px solid #E9DAC3;
  border-radius: 3px; padding: 18px 20px; margin-bottom: 18px;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.72),
    inset 0 0 0 4px rgba(var(--gold-rgb),.26),
    0 6px 18px rgba(120,88,60,.10);
  display: flex; align-items: center; justify-content: space-between;
}
.summary-card .l { font-size: 13px; color: var(--text-2); letter-spacing: .1em; font-weight: 400; }
.summary-card .l b {
  display: block; font-size: 30px; color: var(--primary-d);
  font-weight: 600; line-height: 1.2; margin-top: 4px;
}
.summary-card .l b i { font-size: 15px; font-style: normal; color: var(--text-2); font-weight: 400; }
.summary-card .r { text-align: right; font-size: 12px; color: var(--text-2); line-height: 1.85; letter-spacing: .04em; }
.summary-card .r b { color: var(--text); font-weight: 500; }

.screenshot-tip {
  margin-top: 18px;
  background: linear-gradient(to bottom, #FDF7EE, #F8EEE0);
  border: 1px solid #ECDFC9; border-radius: 3px;
  padding: 13px 16px; font-size: 12.5px; color: #7A6B5D; line-height: 1.75;
  display: flex; gap: 9px; align-items: flex-start;
}
.screenshot-tip .ic { font-size: 15px; line-height: 1.4; }

/* ---------------- 管理页 ---------------- */
.admin-lock { padding-top: 40px; }
.tabs {
  display: flex; background: var(--bg-soft); border-radius: 14px;
  padding: 4px; margin-bottom: 16px;
}
.tabs button {
  flex: 1; height: 38px; border-radius: 11px; font-size: 14px;
  color: var(--text-2); letter-spacing: .06em; transition: all .2s;
}
.tabs button.on {
  background: #fff; color: var(--primary-d); font-weight: 600;
  box-shadow: var(--shadow-s);
}
.acard {
  background: var(--card);
  border: 1px solid #EDDFCB;
  border-radius: 3px;
  padding: 15px 16px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(120,88,60,.05), 0 6px 16px rgba(120,88,60,.08);
}
.acard .hd {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line);
}
.acard .hd .nm { font-size: 15.5px; font-weight: 600; letter-spacing: .04em; }
.acard .hd .ph { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.acard .hd .cnt { margin-left: auto; font-size: 12px; color: var(--primary-d); font-weight: 600; }
.acard .thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.acard .thumbs .t { width: 58px; text-align: center; }
.acard .thumbs .t img {
  width: 58px; height: 58px; border-radius: 9px; object-fit: cover;
  background: var(--bg-soft);
}
.acard .thumbs .t span {
  display: block; font-size: 10px; color: var(--text-2); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acard .empty-line { font-size: 12.5px; color: var(--text-3); }
.admin-tools { display: flex; gap: 10px; margin-top: 4px; }
.admin-tools .btn { flex: 1; }
.hint {
  font-size: 12px; color: var(--text-3); line-height: 1.75;
  margin: 14px 2px 0; letter-spacing: .02em;
}

/* ---------------- 提示条 ---------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(92px + var(--safe-b));
  transform: translateX(-50%) translateY(10px);
  background: rgba(59,50,43,.92); color: #fff;
  padding: 11px 22px; border-radius: 22px; font-size: 13.5px;
  letter-spacing: .04em; z-index: 90; opacity: 0;
  transition: all .25s; pointer-events: none; max-width: 80%; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.loading { text-align: center; padding: 60px 0; color: var(--text-3); font-size: 13px; }
.spin {
  width: 26px; height: 26px; border: 2px solid var(--line);
  border-top-color: var(--primary); border-radius: 50%;
  margin: 0 auto 12px; animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------------- 提示条 ---------------- */
.notice {
  background: #FDF3E7; border: 1px solid #F3E2CB; border-radius: var(--radius-s);
  padding: 11px 13px; margin: 0 2px 12px; display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; color: #8A6B4A; line-height: 1.6;
}
.notice .ic { font-size: 14px; line-height: 1.4; }
.notice span:nth-child(2) { flex: 1; }
.notice button {
  flex: 0 0 auto; color: #B9A48A; font-size: 13px; padding: 0 2px; line-height: 1.4;
}

/* ---------------- 已选页操作区 ---------------- */
.act-row { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.summary-card .r button {
  display: block; margin-left: auto; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------------- 日期切换 ---------------- */
.datebar {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px;
}
.datebar::-webkit-scrollbar { display: none; }
.dchip {
  flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2); letter-spacing: .04em; transition: all .18s;
}
.dchip.on {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}

/* ---------------- 主题上架管理 ---------------- */
.irow {
  display: flex; gap: 11px; align-items: center; background: var(--card);
  border: 1px solid #EDDFCB; border-radius: 3px;
  padding: 10px 12px; margin-bottom: 9px;
  box-shadow: 0 1px 2px rgba(120,88,60,.05), 0 5px 14px rgba(120,88,60,.08);
  transition: opacity .18s;
}
.irow.off { opacity: .5; }
.irow img {
  width: 52px; height: 52px; border-radius: 10px; object-fit: cover;
  flex: 0 0 auto; background: var(--bg-soft);
}
.irow .info { flex: 1; min-width: 0; }
.irow .info .nm {
  font-size: 14px; font-weight: 600; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.irow .info .tm { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.tag {
  display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 10px;
  background: var(--accent-l); color: #7A6B5D; margin-left: 6px; font-weight: 400;
  vertical-align: middle;
}
.tag.off { background: #F2EAE0; color: var(--text-3); }
.irow .ops {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: flex-end; max-width: 138px;   /* 4 个操作排成两列，行高不失控 */
}
.irow .ops button {
  font-size: 11.5px; color: var(--text-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 4px 9px; transition: all .18s; white-space: nowrap;
}
.irow .ops button:active { background: var(--bg-soft); }

/* ---------------- 表单（密码 / 改名都用这套） ---------------- */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12px; color: var(--text-2);
  letter-spacing: .1em; margin-bottom: 7px;
}
.field input {
  width: 100%; height: 44px; padding: 0 13px;
  font-size: 15px; color: var(--text); letter-spacing: .04em;
  background: #FFFDFA; border: 1px solid #E7D6BF; border-radius: 12px;
  outline: none; -webkit-appearance: none; transition: border-color .18s, box-shadow .18s;
}
.field input:focus {
  border-color: rgba(var(--gold-rgb), .75);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .12);
}
.field .err { display: none; font-size: 11.5px; color: #B4553C; margin-top: 6px; }
.field.invalid input { border-color: #C97B63; }
.field.invalid .err { display: block; }

/* ---------------- 主题改名 ---------------- */
.rename-box { padding: 2px 0 4px; }
.rename-box .rnow {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 12px; margin-bottom: 14px;
  background: linear-gradient(to bottom, #FFFDFA, #FBF4EC);
  border: 1px solid #EDDFCB; border-radius: 12px;
}
.rename-box .rnow img {
  width: 54px; height: 54px; border-radius: 10px; object-fit: cover;
  flex: 0 0 auto; background: var(--bg-soft); border: 1px solid #E7D6BF;
}
.rename-box .rnow .rt { flex: 1; min-width: 0; }
.rename-box .rnow .rl { font-size: 11px; color: var(--text-3); letter-spacing: .08em; }
.rename-box .rnow .rv {
  font-size: 15px; font-weight: 600; color: var(--text); margin-top: 3px;
  letter-spacing: .04em; word-break: break-all;
}
.rename-box .rnow .ro {
  font-size: 11px; color: var(--text-3); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rename-box .rtip { font-size: 11.5px; color: var(--text-3); line-height: 1.7; margin-top: 10px; }
.sheet .pf.row { display: flex; gap: 9px; }
.sheet .pf.row .btn { flex: 1; min-width: 0; padding-left: 6px; padding-right: 6px; }

/* ---------------- 选封面 ---------------- */
.cover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.citem { position: relative; border-radius: 10px; overflow: hidden; border: 2px solid transparent; }
.citem img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--bg-soft); }
.citem span {
  position: absolute; right: 5px; bottom: 5px; background: rgba(74,64,58,.7); color: #fff;
  font-size: 10px; padding: 1px 7px; border-radius: 10px;
}
.citem:active { border-color: var(--primary); }

/* ---------------- 释放按钮 / 状态 ---------------- */
.thumbs .t.owner {
  width: auto; display: flex; align-items: center; gap: 6px;
  background: var(--bg-soft); border-radius: 14px; padding: 5px 8px 5px 11px;
}
.thumbs .t.owner span { font-size: 12px; color: var(--text); white-space: nowrap; margin: 0; }
.thumbs .t.owner button {
  font-size: 11px; color: var(--danger); border: 1px solid #EFD8CF;
  border-radius: 12px; padding: 2px 8px; background: #fff;
}
.acard .hd .cnt.done { color: var(--ok); }

/* 分享图弹层 */
.sheet.full .panel { max-height: 96vh; }

/* ---------------- 专属客户码 ---------------- */
.guest-bar {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 2px 14px; padding: 11px 14px;
  background: linear-gradient(to bottom, #FFFDFA, #FBF4EC);
  border: 1px solid #E7D6BF; border-radius: 14px;
}
.guest-bar b {
  color: var(--primary-d); font-size: 15px; letter-spacing: .08em; font-weight: 600;
}
.guest-bar span { font-size: 12px; color: var(--text-2); letter-spacing: .04em; }
.guest-bar.preview { background: #FDF3E7; }

.code-form { margin-bottom: 12px; }
.code-form input[type="file"] { width: 100%; font-size: 13px; color: var(--text-2); }
.code-tools {
  display: flex; gap: 8px; align-items: center; margin: 0 0 12px;
}
.code-tools input {
  flex: 1; min-width: 0; height: 36px; padding: 0 12px;
  border: 1px solid #E7D6BF; border-radius: 18px; background: #FFFDFA;
  font-size: 13px; color: var(--text); outline: none;
}
.code-tools button {
  flex: 0 0 auto; height: 36px; padding: 0 12px;
  border-radius: 18px; border: 1px solid var(--line); background: #fff;
  font-size: 12.5px; color: var(--text-2); letter-spacing: .04em;
}
.crow .pickline { display: flex; gap: 10px; align-items: center; }
.crow .pickline img {
  width: 52px; height: 52px; border-radius: 10px; object-fit: cover;
  background: var(--bg-soft); border: 1px solid #E7D6BF; flex: 0 0 auto;
}
.crow .pn { font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.crow .pt { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.crow .linkline {
  margin-top: 10px; padding: 8px 10px;
  background: var(--bg-soft); border-radius: 8px;
  font-size: 12px; color: var(--text-2); line-height: 1.5;
  word-break: break-all; user-select: text; -webkit-user-select: text;
}
.crow .logline {
  margin-top: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.65;
}
.crow .ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.crow .ops button {
  font-size: 12px; color: var(--text-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 5px 10px; background: #fff;
}

/* 小屏微调 */
@media (max-width: 360px) {
  .grid { gap: 16px 12px; }
  .card .name { font-size: 13px; letter-spacing: .06em; }
  .hero .inner { padding-right: 92px; }
  .hero .zh { font-size: 24px; letter-spacing: .12em; text-indent: .12em; }
  .hero .mark { width: 24px; height: 24px; }
  .hero .mascot { width: 78px; height: 128px; right: 6px; }
  .selbar .go { min-width: 108px; padding: 0 12px; font-size: 13px; letter-spacing: .03em; }
  .selbar .lbl { font-size: 13.5px; }
}
@media (min-width: 561px) {
  body { background: #F6EEEC; }
  #app { background: var(--bg); box-shadow: 0 0 40px rgba(120, 88, 60, .10); }
}