/* moments-maker · 奶油 ins 风（沿用 pat-wake tutorial-dual 审美） */
@font-face {
  font-family: "ZCOOL XiaoWei";
  src: url("assets/fonts/xiaowei.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "ZCOOL QingKe HuangYou";
  src: url("assets/fonts/huangyou.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Ma Shan Zheng";
  src: url("assets/fonts/mashanzheng.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Zhi Mang Xing";
  src: url("assets/fonts/zhimangxing.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Long Cang";
  src: url("assets/fonts/longcang.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Math";
  src: url("assets/fonts/noto-math.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Symbols 2";
  src: url("assets/fonts/noto-symbols2.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Egyptian";
  src: url("assets/fonts/noto-egyptian.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "ZCOOL KuaiLe";
  src: url("assets/fonts/zcool-kuaile.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("assets/fonts/noto-sans-sc.woff2") format("woff2");
  font-display: swap;
}
:root {
  --bg: #f7f5f2;
  --card: #ffffff;
  --card-deep: #fbf3e4;
  --ink: #6b5b4a;
  --ink-dim: #97876f;
  --ink-faint: #bfb198;
  --accent: #c08a5a;
  --accent-soft: rgba(192, 138, 90, 0.13);
  --line: #ece0cb;
  --code-bg: #f6efe0;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: "Noto Sans SC", "Yuanti SC", "PingFang SC", sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 520px; margin: 0 auto; padding: 28px 16px 60px; }
h1, h2, .site-title, .card-title, .sec-title {
  font-family: "ZCOOL KuaiLe", "Yuanti SC", "PingFang SC", sans-serif;
  color: #65523e;
  font-weight: 400;
}
a { color: var(--accent); text-decoration: none; }

.site-head { text-align: center; margin-bottom: 26px; }
.site-title { font-size: 34px; letter-spacing: 2px; }
.site-sub { font-size: 13.5px; color: var(--ink-dim); margin-top: 8px; line-height: 1.7; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(160, 130, 90, 0.14);
  padding: 18px;
  margin-bottom: 18px;
}
.card-title { font-size: 18px; }
.card-meta { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.post-card { display: flex; gap: 14px; align-items: center; }
.post-card > div { min-width: 0; }
.post-card .cover {
  width: 76px; height: 76px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--line); flex-shrink: 0; background: var(--code-bg);
}
.post-card .go { margin-left: auto; color: var(--accent); font-size: 13px; flex-shrink: 0; }

.sec-title { font-size: 20px; margin: 26px 0 4px; }
.sec-sub { font-size: 12.5px; color: var(--ink-dim); margin-bottom: 14px; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--code-bg); cursor: zoom-in;
}

.picker-label { font-size: 13px; color: var(--ink-dim); margin: 14px 0 8px; }
.picker { display: flex; gap: 10px; flex-wrap: wrap; }
.picker img {
  width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
  border: 2px solid var(--line); cursor: pointer; background: var(--code-bg);
  transition: border-color .15s, transform .15s;
}
.picker img.sel { border-color: var(--accent); transform: scale(1.06); }

.field { margin-top: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
  font-family: inherit; font-size: 14px; padding: 9px 12px; outline: none;
}
.field textarea { height: 76px; resize: none; line-height: 1.6; }

/* 朋友圈预览卡（页面里看的） */
.moment {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 16px 12px; margin-top: 18px;
}
.moment .row1 { display: flex; gap: 12px; }
.moment .m-avatar {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
  flex-shrink: 0; background: var(--code-bg);
}
.moment .m-nick { font-size: 16px; font-weight: 700; color: #576b95; line-height: 1.3; }
.moment .m-note {
  font-family: "ZCOOL KuaiLe", "Noto Sans Math", "Noto Sans Symbols 2", "Noto Sans Egyptian", "Yuanti SC", sans-serif;
  font-size: 17px; color: #3d3d3d; margin-top: 4px; line-height: 1.6;
  word-break: break-word;
}
.moment .m-cover {
  width: 62%; border-radius: 8px; margin-top: 10px; display: block;
  border: 1px solid var(--line);
}
.moment .m-time { font-size: 11.5px; color: #a8a8a8; margin-top: 10px; }

.btn {
  display: block; width: 100%; margin-top: 16px;
  background: var(--accent); color: #fff; border: none;
  font-family: "ZCOOL KuaiLe", "Noto Sans Math", "Noto Sans Symbols 2", "Noto Sans Egyptian", "Yuanti SC", sans-serif;
  font-size: 18px; letter-spacing: 2px;
  padding: 13px 0; border-radius: 12px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(192, 138, 90, 0.35);
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; }

.shop-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--accent-soft);
  border: 1px dashed rgba(192, 138, 90, 0.55);
  border-radius: 14px; padding: 14px 16px; margin-top: 22px;
}
.shop-card .t { font-size: 15px; font-weight: 600; color: #8a6a44; }
.shop-card .d { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.shop-card .go2 { margin-left: auto; font-size: 13px; color: var(--accent); flex-shrink: 0; }

.sfoot {
  margin-top: 34px; text-align: center;
  font-size: 10.5px; white-space: nowrap; color: var(--ink-faint);
}
.back { font-size: 13px; }