/* =========================================================
   心笺 · 用户中心 —— 「夜色信笺」设计系统
   - 深梅夜色 + 玻璃质感 + 玫瑰主色 / 香槟金点缀
   - 全站 rem：手机按 390 设计稿等比缩放；≥1200 宽屏按 1440×900 等比缩放
     （1K / 2K / 4K 观感一致，矢量与字体始终清晰）
   ========================================================= */
[v-cloak] { display: none !important; }

:root {
  --ink: #0c0710;
  --ink-2: #140b17;
  --plum: #2a0f24;
  --rose: #ff6f9f;
  --rose-2: #e86f93;
  --violet: #9d7bff;
  --gold: #ffd9a8;
  --ivory: #fff6f1;
  --muted: rgba(255, 236, 240, 0.64);
  --faint: rgba(255, 236, 240, 0.38);
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.16);
  --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  --glass-solid: rgba(28, 14, 28, 0.72);
  --grad: linear-gradient(135deg, #ff6f9f 0%, #e05a9a 45%, #9d7bff 100%);
  --ok: #6fe3b4;
  --warn: #ffb36b;
  --bad: #ff7b8f;
  --serif: 'Songti SC', 'STSongti-SC-Regular', 'Noto Serif CJK SC', 'Noto Serif SC', 'Source Han Serif SC', 'STSong', 'SimSun', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  --latin: 'Avenir Next', 'Helvetica Neue', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --r: 1.1rem;
  --sb: 15.5rem;
}

/* 等比缩放 */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (max-width: 767.98px) { html { font-size: clamp(13px, 4.1026vw, 19px); } }
@media (min-width: 1200px) { html { font-size: min(calc(100vw / 90), calc(100vh / 56.25)); } }
@media (min-width: 1200px) and (max-height: 640px) { html { font-size: calc(100vw / 90); } }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--ink); }
body {
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ivory);
  background:
    radial-gradient(70rem 40rem at 85% -10%, rgba(157, 123, 255, 0.16), transparent 60%),
    radial-gradient(60rem 40rem at -10% 10%, rgba(255, 111, 159, 0.16), transparent 60%),
    radial-gradient(80rem 50rem at 50% 120%, rgba(110, 30, 80, 0.45), transparent 65%),
    var(--ink);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#night-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; min-height: 100vh; }
a { color: var(--rose-ink, #ffb3cc); text-decoration: none; }
svg { width: 1.15em; height: 1.15em; flex: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
::selection { background: rgba(255, 111, 159, 0.4); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(var(--hl, 255, 255, 255), 0.12); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 基础组件 ---------- */
.eyebrow { font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--rose-ink, #ffadc8); opacity: 0.9; }
.display { font-family: var(--serif); font-weight: 600; font-size: 3.4rem; line-height: 1.28; letter-spacing: 0.04em; color: var(--fg-strong, #fff); }
.display em { font-style: normal; background: linear-gradient(120deg, #ff8fb5, #ffd9a8 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.display-sm { font-family: var(--serif); font-weight: 600; font-size: 2rem; line-height: 1.3; letter-spacing: 0.06em; color: var(--fg-strong, #fff); margin-top: 0.3rem; }
.sub { color: var(--muted); font-size: 0.9rem; margin-top: 0.35rem; }
.tip { color: var(--faint); font-size: 0.8rem; line-height: 1.6; margin: 0.35rem 0 0.6rem; }
.mono { font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; letter-spacing: 0.02em; }
.glass, .panel, .card, .notice, .plan, .modal-body {
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: 0 1.2rem 3rem rgba(var(--sh, 0, 0, 0), calc(0.28 * var(--sh-k, 1))), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.btn-primary, .btn-ghost, .btn-sm, .btn-dashed, .card-actions button, .editor-nav button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.25s, opacity 0.2s;
}
.btn-primary {
  position: relative; overflow: hidden; padding: 0.72rem 1.3rem; border-radius: 999px;
  color: #fff; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.04em;
  background: var(--grad);
  box-shadow: 0 0.5rem 1.6rem rgba(255, 90, 150, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.8s var(--ease); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0.8rem 2.2rem rgba(255, 90, 150, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-ghost { padding: 0.68rem 1.15rem; border-radius: 999px; font-size: 0.9rem; color: var(--ivory); background: rgba(var(--hl, 255, 255, 255), 0.06); border: 1px solid var(--line-2); }
.btn-ghost:hover:not(:disabled) { background: rgba(var(--hl, 255, 255, 255), 0.11); border-color: rgba(var(--hl, 255, 255, 255), 0.26); }
.btn-primary.sm, .btn-ghost.sm { padding: 0.45rem 0.9rem; font-size: 0.8rem; }
.btn-block { width: 100%; }
.btn-sm { padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.76rem; color: var(--rose-ink, #ffc2d6); background: rgba(255, 111, 159, 0.1); border: 1px solid rgba(255, 111, 159, 0.25); }
.btn-sm:hover { background: rgba(255, 111, 159, 0.18); }
.ai-btn { color: var(--gold-ink, #ffe1b8); background: rgba(255, 217, 168, 0.1); border-color: rgba(255, 217, 168, 0.3); }
.btn-dashed { width: 100%; margin-top: 0.4rem; padding: 0.7rem; border-radius: 0.9rem; font-size: 0.85rem; color: var(--muted); border: 1px dashed rgba(var(--hl, 255, 255, 255), 0.2); background: rgba(var(--hl, 255, 255, 255), 0.02); }
.btn-dashed:hover { color: var(--fg-strong, #fff); border-color: rgba(255, 111, 159, 0.5); background: rgba(255, 111, 159, 0.06); }
.btn-del-sm { flex: none; padding: 0.4rem 0.7rem; border-radius: 0.7rem; font-size: 0.75rem; color: var(--bad-ink, #ffadb9); background: rgba(255, 123, 143, 0.08); border: 1px solid rgba(255, 123, 143, 0.2); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: var(--ivory); background: rgba(var(--hl, 255, 255, 255), 0.06); border: 1px solid var(--line); transition: background 0.2s; }
.icon-btn:hover { background: rgba(var(--hl, 255, 255, 255), 0.12); }
.icon-btn .dot { position: absolute; top: 0.45rem; right: 0.5rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0.5rem var(--rose); }
.tag { display: inline-flex; align-items: center; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; color: #2a1406; background: linear-gradient(135deg, #ffe2b8, #f3b77e); vertical-align: middle; }
.tag.soft { color: var(--muted); background: rgba(var(--hl, 255, 255, 255), 0.07); border: 1px solid var(--line); font-weight: 500; }
.tag.ok { color: #0d2b20; background: var(--ok); }
.tag.bad { color: #2b0d12; background: var(--bad); }
.tag-gf { color: #fff; background: var(--grad); }

/* 表单 */
input, textarea, select {
  width: 100%; padding: 0.72rem 0.95rem; border-radius: 0.85rem;
  font: inherit; font-size: 0.92rem; color: var(--fg-strong, #fff);
  background: rgba(var(--sf, 0, 0, 0), 0.26); border: 1px solid var(--line-2); outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
textarea { resize: vertical; line-height: 1.7; }
input::placeholder, textarea::placeholder { color: rgba(255, 236, 240, 0.3); }
input:focus, textarea:focus, select:focus { border-color: rgba(255, 111, 159, 0.6); background: rgba(var(--sf, 0, 0, 0), 0.34); box-shadow: 0 0 0 3px rgba(255, 111, 159, 0.16); }
select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23ffb3cc' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1rem; }
select option, select optgroup { background: #1c0f1c; color: var(--fg-strong, #fff); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--rose); }
input[type=file] { padding: 0.55rem; font-size: 0.8rem; color: var(--muted); background: rgba(var(--hl, 255, 255, 255), 0.03); border-style: dashed; }
input[type=file]::file-selector-button { margin-right: 0.8rem; padding: 0.35rem 0.8rem; border: 0; border-radius: 999px; color: var(--fg-strong, #fff); background: rgba(255, 111, 159, 0.25); font: inherit; font-size: 0.78rem; cursor: pointer; }
input[type=color] { width: 2.6rem; height: 2.6rem; padding: 0.2rem; border-radius: 50%; cursor: pointer; }
input[type=date], input[type=datetime-local] { color-scheme: dark; }
.field { margin-bottom: 1rem; }
.field > label, .field-label-row label { display: block; margin-bottom: 0.4rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.field-label-row label { margin: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.7rem; margin-bottom: 0.8rem; }
.field-row .field { margin-bottom: 0; }
.counter { text-align: right; margin-bottom: 0; }
.inline-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.6rem; }
.inline-row input[type=file] { flex: 1; min-width: 12rem; }
.audio { width: 100%; margin-top: 0.6rem; filter: invert(0.88) hue-rotate(180deg); border-radius: 999px; }

/* 开关 */
.switch { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; cursor: pointer; font-size: 0.9rem; color: var(--ivory); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch > i { position: relative; flex: none; width: 2.5rem; height: 1.45rem; border-radius: 999px; background: rgba(var(--hl, 255, 255, 255), 0.12); border: 1px solid var(--line-2); transition: background 0.3s; }
.switch > i::after { content: ''; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(var(--sh, 0, 0, 0), calc(0.35 * var(--sh-k, 1))); transition: transform 0.35s var(--ease); }
.switch input:checked + i { background: var(--grad); border-color: transparent; box-shadow: 0 0 1rem rgba(255, 111, 159, 0.35); }
.switch input:checked + i::after { transform: translateX(1.05rem); }
.switch input:disabled + i { opacity: 0.4; }
.switch em { font-style: normal; color: var(--faint); font-size: 0.8rem; }
.toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1.2rem; margin-bottom: 0.8rem; padding: 0.4rem 1rem; border-radius: var(--r); background: rgba(var(--hl, 255, 255, 255), 0.03); border: 1px solid var(--line); }

/* ---------- 登录 ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 4rem; width: min(100%, 76rem); margin: 0 auto; padding: 4rem 4rem; }
.auth-hero { animation: rise 1.2s var(--ease) both; }
.auth-hero .display { margin: 1.2rem 0 1.4rem; }
.lead { max-width: 34rem; font-size: 1.05rem; line-height: 1.85; color: var(--muted); }
.auth-points { list-style: none; margin-top: 2.2rem; display: grid; gap: 0.9rem; }
.auth-points li { display: flex; align-items: baseline; gap: 1rem; color: var(--ivory); font-size: 0.95rem; }
.auth-points b { font-family: var(--latin); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.1em; color: var(--gold); min-width: 1.8rem; }
.auth-card { padding: 2rem 1.8rem 1.6rem; border-radius: 1.6rem; animation: rise 1.2s 0.12s var(--ease) both; box-shadow: 0 2rem 5rem rgba(var(--sh, 0, 0, 0), calc(0.45 * var(--sh-k, 1))), inset 0 1px 0 rgba(255, 255, 255, 0.1); background: linear-gradient(160deg, rgba(var(--hl, 255, 255, 255), 0.1), rgba(var(--hl, 255, 255, 255), 0.03)); }
.seg { position: relative; display: flex; padding: 0.25rem; margin-bottom: 1.4rem; border-radius: 999px; background: rgba(var(--sf, 0, 0, 0), 0.3); border: 1px solid var(--line); }
.seg button { position: relative; z-index: 1; flex: 1; padding: 0.6rem; font-size: 0.92rem; color: var(--muted); transition: color 0.3s; }
.seg button.active { color: var(--fg-strong, #fff); font-weight: 600; }
.seg-ink { position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0.25rem; width: calc(50% - 0.25rem); border-radius: 999px; background: var(--grad); box-shadow: 0 0.3rem 1.2rem rgba(255, 90, 150, 0.35); transition: transform 0.5s var(--ease); }
.seg-ink.register { transform: translateX(100%); }
.fl { display: block; margin-bottom: 0.85rem; }
.fl span { display: block; margin-bottom: 0.35rem; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--faint); }
.auth-card .btn-primary { margin-top: 0.6rem; padding: 0.9rem; font-size: 1rem; }
.auth-foot { margin-top: 1rem; text-align: center; font-size: 0.75rem; color: var(--faint); }

/* ---------- 应用框架 ---------- */
.app { display: flex; min-height: 100vh; }
.nav { position: sticky; top: 0; height: 100vh; width: var(--sb); flex: none; display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 0.9rem 1rem; background: rgba(var(--sf, 14, 7, 15), 0.55); border-right: 1px solid var(--line); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.nav-brand { display: flex; align-items: center; gap: 0.7rem; padding: 0 0.4rem; }
.nav-brand b { display: block; font-family: var(--serif); font-size: 1.02rem; letter-spacing: 0.06em; color: var(--fg-strong, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; }
.nav-brand small { display: block; font-size: 0.68rem; letter-spacing: 0.2em; color: var(--faint); }
.brand-mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 0.75rem; color: #fff; background: var(--grad); box-shadow: 0 0.4rem 1.2rem rgba(255, 90, 150, 0.4); }
.brand-mark svg { width: 1.1rem; height: 1.1rem; fill: rgba(var(--hl, 255, 255, 255), .25); }
.nav-create { width: 100%; padding: 0.75rem; }
.nav-groups { flex: 1; overflow-y: auto; margin: 0 -0.3rem; padding: 0 0.3rem; }
.nav-group + .nav-group { margin-top: 1rem; }
.nav-title { padding: 0 0.7rem 0.35rem; font-size: 0.66rem; letter-spacing: 0.3em; color: var(--faint); }
.nav a { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.58rem 0.75rem; border-radius: 0.8rem; font-size: 0.9rem; color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s; }
.nav a svg { opacity: 0.8; }
.nav a:hover { color: var(--fg-strong, #fff); background: rgba(var(--hl, 255, 255, 255), 0.05); }
.nav a.active { color: var(--fg-strong, #fff); background: linear-gradient(90deg, rgba(255, 111, 159, 0.2), rgba(255, 111, 159, 0.04)); }
.nav a.active::before { content: ''; position: absolute; left: -0.3rem; top: 0.55rem; bottom: 0.55rem; width: 3px; border-radius: 3px; background: var(--rose); box-shadow: 0 0 0.8rem var(--rose); }
.nav a.active svg { color: #ff9cbf; opacity: 1; }
.nav-badge { margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; display: grid; place-items: center; border-radius: 999px; font-size: 0.68rem; font-weight: 700; color: var(--fg-strong, #fff); background: var(--rose); box-shadow: 0 0 0.6rem rgba(255, 111, 159, 0.6); }
.nav-user { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem; border-radius: 1rem; background: rgba(var(--hl, 255, 255, 255), 0.04); border: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; font-family: var(--serif); font-weight: 600; color: #2a1406; background: linear-gradient(135deg, #ffe2b8, #ff9cbf); }
.nu-text { flex: 1; min-width: 0; }
.nu-text b { display: block; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nu-text small { font-size: 0.7rem; color: var(--faint); }
.vip-badge { display: inline-block; padding: 0 0.45rem; border-radius: 999px; font-weight: 700; color: #2a1406 !important; background: linear-gradient(135deg, #ffe2b8, #f3b77e); }
.nav-logout { width: 2rem; height: 2rem; }
.m-top, .tabbar, .sheet-mask, .m-only { display: none; }

.main { flex: 1; min-width: 0; padding: 2.2rem 2.6rem 4rem; }
.page { max-width: 72rem; margin: 0 auto; animation: page-in 0.7s var(--ease) both; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.page-head > .btn-primary, .page-head > .btn-ghost { flex: none; }

/* 统计条 */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.6rem; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); overflow: hidden; }
.stat-strip > div { padding: 1rem 1.2rem; }
.stat-strip > div + div { border-left: 1px solid var(--line); }
.stat-strip b { display: block; font-family: var(--latin); font-size: 1.9rem; font-weight: 300; letter-spacing: 0.02em; line-height: 1.1; color: var(--fg-strong, #fff); }
.stat-strip span { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--faint); }
.stat-strip.compact { grid-template-columns: repeat(2, 1fr); margin: 0.8rem 0; }

/* 卡片网格 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1.1rem; }
.card { position: relative; padding: 1.3rem 1.3rem 1.1rem; border-radius: 1.3rem; overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s; animation: rise 0.8s var(--ease) both; }
.card:hover { transform: translateY(-3px); border-color: rgba(var(--hl, 255, 255, 255), 0.18); box-shadow: 0 1.6rem 3.6rem rgba(var(--sh, 0, 0, 0), calc(0.38 * var(--sh-k, 1))), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.letter-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 7rem; pointer-events: none; background: radial-gradient(80% 100% at 15% 0%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%); }
.letter-card::after { content: ''; position: absolute; right: -2.5rem; top: -2.5rem; width: 8rem; height: 8rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); pointer-events: none; }
.lc-top, .card-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.lc-to { font-family: var(--latin); font-size: 0.72rem; letter-spacing: 0.3em; color: var(--faint); }
.card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.06em; color: var(--fg-strong, #fff); }
.desc { position: relative; margin: 0.5rem 0 0.7rem; font-family: var(--serif); font-size: 0.92rem; line-height: 1.75; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.78rem; color: var(--faint); }
.meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.creds { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.3rem 1.2rem; margin: 0.9rem 0; padding: 0.75rem 0.9rem; border-radius: 0.9rem; background: rgba(var(--sf, 0, 0, 0), 0.25); border: 1px solid var(--line); }
.creds > div { min-width: 0; }
.creds span { display: block; font-size: 0.66rem; letter-spacing: 0.16em; color: var(--faint); }
.creds b { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold); word-break: break-all; }
.card-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.card-actions.minor { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); gap: 0.2rem; }
.card-actions.minor button { padding: 0.3rem 0.6rem; border-radius: 0.6rem; font-size: 0.78rem; color: var(--muted); }
.card-actions.minor button:hover { color: var(--fg-strong, #fff); background: rgba(var(--hl, 255, 255, 255), 0.06); }
.card-actions.minor .btn-del { margin-left: auto; color: #ff9aaa; }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0 0.9rem; }

/* 模板卡封面 */
.tpl-card { padding-top: 0; }
.tc-cover { position: relative; height: 7.5rem; margin: 0 -1.3rem 1rem; display: grid; place-items: center; overflow: hidden; background: radial-gradient(60% 90% at 30% 20%, hsl(calc(330 + var(--h) * 0.15) 90% 65% / 0.55), transparent 70%), radial-gradient(60% 90% at 80% 80%, hsl(calc(260 + var(--h) * 0.1) 80% 60% / 0.45), transparent 70%), linear-gradient(160deg, #1b0b1a, #0d0610); border-bottom: 1px solid var(--line); }
.tc-cover::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #ffd9a8, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 10% 80%, #fff, transparent); opacity: 0.7; }
.tc-cover span { position: relative; font-family: var(--serif); font-size: 2.2rem; font-weight: 600; letter-spacing: 0.2em; color: rgba(var(--hl, 255, 255, 255), 0.92); text-shadow: 0 0 1.6rem rgba(255, 140, 180, 0.8); }

/* 空状态 */
.empty-state { margin: 1rem auto; padding: 3.2rem 1.5rem; max-width: 30rem; text-align: center; border-radius: 1.4rem; border: 1px dashed rgba(var(--hl, 255, 255, 255), 0.14); background: rgba(var(--hl, 255, 255, 255), 0.02); }
.empty-state.small { padding: 2rem 1rem; }
.es-art { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; margin: 0 auto 1rem; border-radius: 50%; color: var(--rose-ink, #ffb3cc); background: radial-gradient(circle, rgba(255, 111, 159, 0.25), transparent 70%); border: 1px solid rgba(255, 111, 159, 0.3); animation: float 4s ease-in-out infinite; }
.es-art svg { width: 1.8rem; height: 1.8rem; }
.empty-state h3 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--fg-strong, #fff); }
.empty-state p { margin: 0.4rem 0 1.2rem; font-size: 0.85rem; color: var(--faint); }
.empty-state.small p { margin-bottom: 0; }
.empty-line { padding: 0.8rem 0; font-size: 0.82rem; color: var(--faint); }

/* ---------- 编辑器 ---------- */
.editor-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.draft-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.draft-state { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--faint); }
.draft-state i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0.5rem var(--ok); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-bottom: 1.4rem; counter-reset: s; }
.steps li { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; border-radius: 0.9rem; cursor: pointer; color: var(--faint); background: rgba(var(--hl, 255, 255, 255), 0.025); border: 1px solid var(--line); transition: all 0.35s var(--ease); }
.steps li b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none; border-radius: 50%; font-family: var(--latin); font-size: 0.8rem; font-weight: 600; background: rgba(var(--hl, 255, 255, 255), 0.06); border: 1px solid var(--line-2); }
.steps li span { font-size: 0.88rem; letter-spacing: 0.08em; }
.steps li.on { color: var(--muted); }
.steps li.on b { color: var(--fg-strong, #fff); background: rgba(255, 111, 159, 0.3); border-color: transparent; }
.steps li.cur { color: var(--fg-strong, #fff); background: linear-gradient(135deg, rgba(255, 111, 159, 0.18), rgba(157, 123, 255, 0.1)); border-color: rgba(255, 111, 159, 0.4); box-shadow: 0 0.6rem 1.6rem rgba(255, 90, 150, 0.15); }
.steps li.cur b { background: var(--grad); box-shadow: 0 0 1rem rgba(255, 111, 159, 0.5); }
.editor-body { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.4rem; align-items: start; }
.editor-form { min-width: 0; }
.panel { padding: 1.4rem; border-radius: 1.3rem; margin-bottom: 1rem; animation: rise 0.6s var(--ease) both; }
.panel h3, .sec-title { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0.8rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; color: var(--fg-strong, #fff); }
.panel h3:first-child { margin-top: 0; }
.panel .panel { padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
.sec-title { margin-top: 0; }
.sec-title ~ .sec-title { margin-top: 1.4rem; }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.7rem; }
.tpl, .heart, .theme, .open-chip { position: relative; cursor: pointer; border-radius: 1rem; border: 1px solid var(--line); background: rgba(var(--hl, 255, 255, 255), 0.035); transition: transform 0.3s var(--ease), border-color 0.25s, background 0.25s, box-shadow 0.3s; }
.tpl:hover, .heart:hover, .theme:hover, .open-chip:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(var(--hl, 255, 255, 255), 0.22); }
.tpl.sel, .heart.sel, .theme.sel, .open-chip.sel { border-color: rgba(255, 111, 159, 0.75); background: linear-gradient(160deg, rgba(255, 111, 159, 0.16), rgba(157, 123, 255, 0.06)); box-shadow: 0 0 0 1px rgba(255, 111, 159, 0.4), 0 0.8rem 2rem rgba(255, 90, 150, 0.18); }
.tpl { padding: 1rem 1rem 0.9rem; min-height: 6.4rem; }
.tpl b { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--fg-strong, #fff); margin-bottom: 0.25rem; padding-right: 2.6rem; }
.tpl small { font-size: 0.78rem; line-height: 1.55; color: var(--faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sel-check { position: absolute; right: 0.7rem; bottom: 0.7rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; color: #fff; background: var(--grad); opacity: 0; transform: scale(0.5); transition: all 0.35s var(--ease); }
.sel-check svg { width: 0.85rem; height: 0.85rem; }
.tpl.sel .sel-check { opacity: 1; transform: none; }
.vip-tag { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; color: #2a1406; background: linear-gradient(135deg, #ffe2b8, #f3b77e); }

.heart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.7rem; margin-bottom: 1.4rem; }
.heart { padding: 0 0 0.8rem; overflow: hidden; }
.heart .heart-name { display: block; padding: 0.65rem 0.8rem 0.1rem; font-size: 0.92rem; color: var(--fg-strong, #fff); }
.heart small { display: block; padding: 0 0.8rem; font-size: 0.72rem; line-height: 1.5; color: var(--faint); }
.fx-tag { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; color: var(--fg-strong, #fff); background: rgba(var(--sf, 0, 0, 0), 0.45); border: 1px solid rgba(var(--hl, 255, 255, 255), 0.2); }
.fx-tag-3d { background: linear-gradient(135deg, rgba(255, 111, 159, 0.85), rgba(157, 123, 255, 0.85)); border: 0; }
/* 氛围小样 */
.fx-swatch { position: relative; height: 5rem; overflow: hidden; background: radial-gradient(80% 100% at 50% 110%, color-mix(in srgb, var(--heart-color) 45%, #1a0816), #0d0610 70%); border-bottom: 1px solid var(--line); }
.fx-swatch i { position: absolute; left: calc(var(--n) * 9.5% - 4%); top: 110%; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0.5rem var(--heart-color), 0 0 1rem var(--heart-color); animation: sw-rise calc(2.6s + var(--n) * 0.23s) linear calc(var(--n) * -0.47s) infinite; }
.sw-cascade i, .sw-rain3d i { top: -10%; width: 0.45rem; height: 0.32rem; border-radius: 60% 40% 60% 40%; background: color-mix(in srgb, var(--heart-color) 70%, #fff); animation-name: sw-fall; }
.sw-nebula i, .sw-galaxy3d i { left: 50%; top: 50%; animation: sw-orbit calc(3s + var(--n) * 0.4s) linear calc(var(--n) * -0.6s) infinite; }
.sw-warp i, .sw-tunnel3d i { left: 50%; top: 50%; width: 0.15rem; height: 0.15rem; animation: sw-warp 1.6s ease-in calc(var(--n) * -0.16s) infinite; }
.sw-led_wall::before, .sw-stage::before { content: ''; position: absolute; inset: 45% -30% -40%; background-image: linear-gradient(color-mix(in srgb, var(--heart-color) 50%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--heart-color) 50%, transparent) 1px, transparent 1px); background-size: 0.9rem 0.9rem; transform: perspective(8rem) rotateX(60deg); opacity: 0.5; }
.sw-holo::before, .sw-dimension::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--heart-color) 50%, transparent), transparent 30%); animation: spin 6s linear infinite; opacity: 0.6; }
.sw-screen_burst i { left: 50%; top: 55%; animation: sw-burst 2.2s var(--ease) calc(var(--n) * -0.22s) infinite; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.7rem; margin-bottom: 1.4rem; }
.theme { height: 5.4rem; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.theme b { font-size: 0.88rem; color: var(--fg-strong, #fff); text-shadow: 0 1px 6px rgba(var(--sh, 0, 0, 0), calc(0.6 * var(--sh-k, 1))); }
.th-dots { position: absolute; top: 0.7rem; left: 0.8rem; display: flex; gap: 0.25rem; }
.th-dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; box-shadow: 0 0 0.5rem currentColor; }
.open-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.open-chip { padding: 0.75rem 0.85rem; text-align: left; }
.open-chip small { display: block; font-size: 0.62rem; letter-spacing: 0.2em; color: var(--faint); }
.open-chip b { display: block; margin: 0.15rem 0; font-size: 0.92rem; color: var(--fg-strong, #fff); }
.open-chip span { font-size: 0.72rem; color: var(--faint); }
.color-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.color-row span { font-family: 'SF Mono', Menlo, monospace; font-size: 0.8rem; color: var(--muted); margin-right: 0.4rem; }
.color-row i { width: 1.5rem; height: 1.5rem; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s; }
.color-row i:hover { transform: scale(1.12); }
.color-row i.on { border-color: #fff; box-shadow: 0 0 0.8rem currentColor; }

.timeline-item, .capsule-item, .quiz-item { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; padding: 0.75rem; border-radius: 0.95rem; background: rgba(var(--sf, 0, 0, 0), 0.2); border: 1px solid var(--line); }
.timeline-item > input:not([type=date]), .timeline-item > textarea { flex: 1 1 12rem; }
.timeline-item > input[type=date] { flex: 0 0 10.5rem; }
.timeline-item > select { flex: 0 0 6.5rem; }
.emoji-in { flex: 0 0 3.4rem !important; text-align: center; }
.ti-no { flex: none; font-family: var(--latin); font-size: 0.85rem; color: var(--gold); width: 1.6rem; }
.capsule-item { display: block; }
.capsule-item .field-row { grid-template-columns: 1fr 10.5rem auto; margin-bottom: 0.5rem; }
.quiz-item { display: block; }
.quiz-item > input { margin-bottom: 0.5rem; }
.quiz-opt { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.quiz-opt input[type=radio] { width: 1.1rem; height: 1.1rem; flex: none; }
.preset-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; margin-bottom: 0.6rem; }
.photo-item { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem; border-radius: 0.9rem; background: rgba(var(--sf, 0, 0, 0), 0.22); border: 1px solid var(--line); }
.photo-item img, .ph-empty { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.6rem; }
.ph-empty { display: grid; place-items: center; font-size: 0.75rem; color: var(--faint); border: 1px dashed var(--line-2); }
.photo-item input { padding: 0.45rem 0.6rem; font-size: 0.8rem; }
.photo-add { margin: 0; min-height: 8rem; }
.bgm-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.6rem; }
.bgm-grid span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 999px; font-size: 0.82rem; cursor: pointer; color: var(--muted); background: rgba(var(--hl, 255, 255, 255), 0.05); border: 1px solid var(--line); transition: all 0.25s; }
.bgm-grid span.sel { color: var(--fg-strong, #fff); border-color: rgba(255, 111, 159, 0.7); background: rgba(255, 111, 159, 0.16); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.8rem; }
.eq b { width: 2px; height: 40%; background: currentColor; border-radius: 2px; }
.bgm-grid span.sel .eq b { animation: eq 0.9s ease-in-out infinite; }
.bgm-grid span.sel .eq b:nth-child(2) { animation-delay: -0.3s; }
.bgm-grid span.sel .eq b:nth-child(3) { animation-delay: -0.6s; }
.rec { animation: pulse-rec 1.4s ease-in-out infinite; }

.delivery-check { margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: 1rem; border: 1px solid rgba(255, 179, 107, 0.35); background: rgba(255, 179, 107, 0.08); }
.delivery-check b { font-size: 0.92rem; color: #ffd1a1; }
.delivery-check ul { margin: 0.4rem 0 0 1.1rem; font-size: 0.82rem; color: var(--muted); line-height: 1.8; }
.delivery-check p { font-size: 0.82rem; color: var(--muted); }
.delivery-check.ready { border-color: rgba(111, 227, 180, 0.4); background: rgba(111, 227, 180, 0.07); }
.delivery-check.ready b { color: var(--ok); }
.play-block { padding: 1rem 0; border-top: 1px solid var(--line); }
.play-block:first-of-type { border-top: 0; }
.play-title { display: flex; align-items: center; gap: 0.6rem; font-size: 0.98rem; font-weight: 600; color: var(--fg-strong, #fff); }
.play-block > select { margin: 0.2rem 0 0.6rem; }

/* 实时预览 */
.live-preview { position: sticky; top: 1.5rem; }
.phone { position: relative; width: 100%; aspect-ratio: 9 / 18.5; border-radius: 2.2rem; overflow: hidden; border: 1px solid rgba(var(--hl, 255, 255, 255), 0.18); box-shadow: 0 2.4rem 5rem rgba(var(--sh, 0, 0, 0), calc(0.55 * var(--sh-k, 1))), inset 0 0 0 0.45rem rgba(var(--sh, 0, 0, 0), calc(0.85 * var(--sh-k, 1))), inset 0 0 0 0.52rem rgba(255, 255, 255, 0.08); transition: background 0.8s ease; }
.ph-notch { position: absolute; top: 0.85rem; left: 50%; width: 4.6rem; height: 1.15rem; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 3; }
.ph-dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ph-dust i { position: absolute; left: calc(var(--n) * 5.4%); top: 105%; width: 0.22rem; height: 0.22rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0.4rem var(--pa, #ff6f9f), 0 0 0.9rem var(--pa, #ff6f9f); opacity: 0.8; animation: sw-rise calc(5s + var(--n) * 0.37s) linear calc(var(--n) * -0.83s) infinite; }
.ph-dust i:nth-child(3n) { width: 0.14rem; height: 0.14rem; box-shadow: 0 0 0.4rem var(--pb, #ffb3cc); }
.ph-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.4rem 1.3rem 1.5rem; text-align: center; }
.ph-eyebrow { font-size: 0.5rem; letter-spacing: 0.32em; color: var(--pb, var(--rose-ink, #ffb3cc)); }
.ph-pre { margin-top: 0.5rem; font-family: var(--serif); font-size: 0.7rem; letter-spacing: 0.3em; color: rgba(var(--hl, 255, 255, 255), 0.7); }
.phone h4 { margin: 0.2rem 0 0.9rem; font-family: var(--serif); font-size: 1.9rem; font-weight: 600; letter-spacing: 0.1em; color: var(--fg-strong, #fff); text-shadow: 0 0 1.4rem var(--pa, #ff6f9f), 0 0 0.4rem var(--pa, #ff6f9f); word-break: break-all; }
.ph-letter { width: 100%; padding: 0.9rem 0.85rem; border-radius: 0.9rem; text-align: left; background: rgba(var(--sf, 20, 8, 20), 0.45); border: 1px solid rgba(var(--hl, 255, 255, 255), 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ph-title { font-family: var(--serif); font-size: 0.78rem; color: var(--fg-strong, #fff); text-align: center; margin-bottom: 0.4rem; letter-spacing: 0.12em; }
.ph-msg { font-family: var(--serif); font-size: 0.7rem; line-height: 1.85; color: rgba(255, 246, 241, 0.9); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.ph-sign { margin-top: 0.4rem; text-align: right; font-family: var(--serif); font-size: 0.65rem; color: var(--pb, var(--rose-ink, #ffb3cc)); }
.lp-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.8rem; }
.lp-meta span { padding: 0.45rem 0.55rem; border-radius: 0.7rem; font-size: 0.72rem; color: var(--fg-strong, #fff); background: rgba(var(--hl, 255, 255, 255), 0.04); border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-meta small { display: block; font-size: 0.6rem; letter-spacing: 0.16em; color: var(--faint); }

/* 底部操作栏 */
.editor-nav { position: sticky; bottom: 1rem; z-index: 20; display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; padding: 0.65rem; border-radius: 999px; background: rgba(var(--sf, 22, 10, 22), 0.78); border: 1px solid var(--line-2); box-shadow: 0 1rem 2.6rem rgba(var(--sh, 0, 0, 0), calc(0.5 * var(--sh-k, 1))); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
.editor-nav .btn-primary { margin-left: auto; padding: 0.72rem 1.6rem; }
.en-dots { display: flex; gap: 0.3rem; margin-left: auto; }
.en-dots + .btn-primary { margin-left: 0.6rem; }
.en-dots i { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: rgba(var(--hl, 255, 255, 255), 0.2); transition: all 0.4s var(--ease); }
.en-dots i.on { width: 1.3rem; background: var(--rose); box-shadow: 0 0 0.6rem var(--rose); }

/* ---------- 列表型页面 ---------- */
.feed { display: grid; gap: 0.6rem; }
.notice { position: relative; display: flex; gap: 0.9rem; padding: 1rem 1.15rem; border-radius: 1.05rem; margin-bottom: 0.6rem; animation: rise 0.6s var(--ease) both; }
.feed .notice { margin-bottom: 0; }
.n-dot { flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.45rem; border-radius: 50%; background: rgba(var(--hl, 255, 255, 255), 0.15); }
.notice.unread { border-color: rgba(255, 111, 159, 0.35); background: linear-gradient(160deg, rgba(255, 111, 159, 0.1), rgba(var(--hl, 255, 255, 255), 0.02)); }
.notice.unread .n-dot { background: var(--rose); box-shadow: 0 0 0.6rem var(--rose); }
.n-body { flex: 1; min-width: 0; }
.notice h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--fg-strong, #fff); }
.notice p { margin: 0.25rem 0; font-size: 0.88rem; line-height: 1.7; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.notice small { font-size: 0.72rem; color: var(--faint); }
.notice .btn-ghost { margin-top: 0.4rem; }
.voice-note { width: 100%; max-width: 22rem; margin: 0.4rem 0; filter: invert(0.88) hue-rotate(180deg); }
.d-date { display: block; margin-bottom: 0.15rem; font-family: var(--latin); letter-spacing: 0.08em; }
.two-col { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 1.2rem; align-items: start; }
.two-col .panel .btn-primary, .two-col .panel .btn-ghost { margin-top: 0.4rem; }
.two-col .switch { margin-bottom: 0.4rem; }

.invite-card { max-width: 32rem; padding: 2rem; text-align: center; }
.invite-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 0%, rgba(255, 217, 168, 0.18), transparent 70%); }
.ic-label { position: relative; font-size: 0.75rem; letter-spacing: 0.3em; color: var(--faint); }
.ic-code { position: relative; margin: 0.6rem 0 0.8rem; font-family: var(--latin); font-size: 2.8rem; font-weight: 600; letter-spacing: 0.2em; color: var(--gold); text-shadow: 0 0 2rem rgba(255, 217, 168, 0.45); }
.ic-desc { position: relative; margin-bottom: 1.3rem; font-size: 0.9rem; color: var(--muted); }
.ic-desc b { color: var(--fg-strong, #fff); }

.vip-status { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; padding: 0.6rem 1.1rem; border-radius: 999px; color: #2a1406; font-weight: 600; font-size: 0.88rem; background: linear-gradient(135deg, #ffe2b8, #f3b77e); box-shadow: 0 0.6rem 1.6rem rgba(243, 183, 126, 0.3); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.plan { position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.4rem 1.4rem; border-radius: 1.3rem; animation: rise 0.7s var(--ease) both; }
.plan.featured { border-color: rgba(255, 217, 168, 0.55); background: linear-gradient(160deg, rgba(255, 217, 168, 0.12), rgba(255, 111, 159, 0.06)); box-shadow: 0 1.6rem 3.6rem rgba(var(--sh, 0, 0, 0), calc(0.4 * var(--sh-k, 1))), 0 0 0 1px rgba(255, 217, 168, 0.25); }
.plan-flag { position: absolute; top: -0.7rem; left: 1.4rem; padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: #2a1406; background: linear-gradient(135deg, #ffe2b8, #f3b77e); }
.plan h3 { font-family: var(--serif); font-size: 1.2rem; color: var(--fg-strong, #fff); }
.price { margin: 0.6rem 0 1rem; font-family: var(--latin); font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--fg-strong, #fff); }
.price small { font-size: 1.1rem; margin-right: 0.1rem; color: var(--gold); }
.price s { font-size: 0.95rem; color: var(--faint); font-weight: 400; }
.plan ul { list-style: none; flex: 1; margin-bottom: 1.2rem; }
.plan li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.85rem; color: var(--muted); }
.plan li svg { margin-top: 0.2rem; color: var(--ok); width: 0.95rem; height: 0.95rem; }
.plan button { width: 100%; }
.coupon-box { display: flex; gap: 0.6rem; max-width: 26rem; }
.coupon-box input { flex: 1; }

.table-wrap { border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--line); background: var(--glass); }
.table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.table th { padding: 0.8rem 1rem; text-align: left; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; color: var(--faint); background: rgba(var(--sf, 0, 0, 0), 0.2); }
.table td { padding: 0.85rem 1rem; border-top: 1px solid var(--line); color: var(--ivory); }
.table tr:hover td { background: rgba(var(--hl, 255, 255, 255), 0.025); }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(var(--sf, 6, 3, 8), 0.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal-body { position: relative; width: min(100%, 28rem); max-height: 90vh; overflow-y: auto; padding: 1.8rem 1.6rem 1.3rem; border-radius: 1.6rem; background: linear-gradient(160deg, rgba(var(--sf, 48, 22, 44), 0.92), rgba(var(--sf, 22, 10, 22), 0.94)); border-color: var(--line-2); box-shadow: 0 2.4rem 6rem rgba(var(--sh, 0, 0, 0), calc(0.6 * var(--sh-k, 1))), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.modal-body h2, .modal-body h3 { display: flex; align-items: center; gap: 0.5rem; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.06em; color: var(--fg-strong, #fff); margin-bottom: 0.6rem; padding-right: 2rem; }
.modal-x { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; }
.modal-close { margin-top: 1rem; }
.modal-body pre { max-height: 14rem; overflow: auto; padding: 0.8rem; border-radius: 0.8rem; font-size: 0.75rem; color: var(--muted); background: rgba(var(--sf, 0, 0, 0), 0.35); border: 1px solid var(--line); }
.modal-body .field { margin-bottom: 0.8rem; }
.h-ico { color: var(--gold); }
.success-box { text-align: center; }
.success-box h2 { justify-content: center; padding: 0; font-size: 1.6rem; }
.sb-burst { position: relative; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; margin: 0.4rem auto 0.9rem; border-radius: 50%; color: #fff; background: var(--grad); box-shadow: 0 0 0 0.5rem rgba(255, 111, 159, 0.12), 0 0 3rem rgba(255, 111, 159, 0.6); animation: pop 0.9s var(--ease) both; }
.sb-burst svg { width: 2rem; height: 2rem; fill: rgba(var(--hl, 255, 255, 255), 0.35); }
.sb-burst::before, .sb-burst::after { content: ''; position: absolute; inset: -0.6rem; border-radius: 50%; border: 1px solid rgba(255, 111, 159, 0.5); animation: ring 2.2s ease-out infinite; }
.sb-burst::after { animation-delay: 1.1s; }
.creds.big { grid-template-columns: 1fr; gap: 0; margin: 1rem 0; padding: 0; text-align: left; overflow: hidden; }
.creds.big > div { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; }
.creds.big > div + div { border-top: 1px solid var(--line); }
.creds.big b { font-size: 1.05rem; }
.ia-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0.8rem 0; }
.ia-stats span { padding: 0.7rem 0.8rem; border-radius: 0.9rem; font-size: 0.95rem; font-weight: 600; color: var(--fg-strong, #fff); background: rgba(var(--hl, 255, 255, 255), 0.04); border: 1px solid var(--line); }
.ia-stats span small { display: block; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; color: var(--faint); }
.ia-stats span.on { border-color: rgba(255, 111, 159, 0.55); background: rgba(255, 111, 159, 0.12); }
.ia-list { list-style: none; max-height: 16rem; overflow-y: auto; }
.ia-list li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ivory); }
.ia-list small { flex: none; color: var(--faint); font-size: 0.72rem; }
.poster-box { text-align: center; }
.poster { position: relative; margin: 0.2rem 0 0.8rem; padding: 1.6rem 1.2rem 1.3rem; border-radius: 1.2rem; overflow: hidden; background: radial-gradient(80% 60% at 50% 0%, rgba(255, 111, 159, 0.35), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(157, 123, 255, 0.3), transparent 70%), #12070f; border: 1px solid var(--line-2); }
.poster h3 { justify-content: center; padding: 0; margin: 0.6rem 0 1rem; font-size: 1.3rem; }
.qr { display: inline-block; padding: 0.6rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 2.4rem rgba(255, 111, 159, 0.35); }
.qr img { display: block; width: 11rem; height: 11rem; }
.p-to { margin-top: 0.9rem; font-family: var(--serif); font-size: 0.95rem; color: var(--ivory); }
.m-preview, .m-tpl-preview { width: min(100%, 26rem); }
.draft-stage { position: relative; min-height: 22rem; padding: 2rem 1.3rem; border-radius: 1.2rem; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line-2); }
.stage-kicker { position: relative; font-size: 0.62rem; letter-spacing: 0.34em; color: var(--pb, var(--rose-ink, #ffb3cc)); }
.draft-stage h4 { position: relative; margin: 0.4rem 0 1rem; font-family: var(--serif); font-size: 2.2rem; letter-spacing: 0.1em; color: var(--fg-strong, #fff); text-shadow: 0 0 1.6rem var(--pa, #ff6f9f); }
.stage-message { position: relative; width: 100%; padding: 1rem; border-radius: 0.9rem; text-align: left; white-space: pre-wrap; font-family: var(--serif); font-size: 0.9rem; line-height: 1.9; color: var(--ivory); background: rgba(var(--sf, 20, 8, 20), 0.45); border: 1px solid rgba(var(--hl, 255, 255, 255), 0.12); }
.stage-sign { position: relative; align-self: flex-end; margin-top: 0.7rem; font-family: var(--serif); font-size: 0.85rem; color: var(--pb, var(--rose-ink, #ffb3cc)); }
.iframe-phone { width: 100%; aspect-ratio: 9 / 16; max-height: 64vh; border-radius: 1.4rem; overflow: hidden; border: 1px solid var(--line-2); background: #0b0610; box-shadow: inset 0 0 0 0.3rem rgba(var(--sh, 0, 0, 0), calc(0.6 * var(--sh-k, 1))); }
.iframe-phone iframe { width: 100%; height: 100%; border: 0; display: block; }
.pay-amount { font-family: var(--latin); font-size: 3rem; font-weight: 300; line-height: 1.1; color: var(--fg-strong, #fff); }
.pay-amount small { font-size: 1.2rem; color: var(--gold); }
.form-modal .sub { margin-bottom: 1rem; }
.form-modal.center { text-align: center; }
.form-modal.center h3 { justify-content: center; padding: 0; }

/* 轻提示 */
.toasts { position: fixed; z-index: 300; left: 50%; top: 1.2rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.6rem; max-width: min(90vw, 30rem); padding: 0.7rem 1.15rem; border-radius: 999px; font-size: 0.88rem; color: var(--fg-strong, #fff); background: rgba(var(--sf, 30, 14, 28), 0.9); border: 1px solid var(--line-2); box-shadow: 0 1rem 2.6rem rgba(var(--sh, 0, 0, 0), calc(0.5 * var(--sh-k, 1))); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.toast i { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #9db4ff; box-shadow: 0 0 0.6rem #9db4ff; }
.toast.ok i { background: var(--ok); box-shadow: 0 0 0.6rem var(--ok); }
.toast.warn i { background: var(--warn); box-shadow: 0 0 0.6rem var(--warn); }
.toast-enter-active, .toast-leave-active { transition: all 0.45s var(--ease); }
.toast-enter-from { opacity: 0; transform: translateY(-0.8rem) scale(0.96); }
.toast-leave-to { opacity: 0; transform: translateY(-0.4rem); }
.modal-enter-active, .modal-leave-active { transition: opacity 0.3s ease; }
.modal-enter-active .modal-body, .modal-leave-active .modal-body { transition: transform 0.45s var(--ease), opacity 0.3s; }
.modal-enter-from, .modal-leave-to { opacity: 0; }
.modal-enter-from .modal-body { transform: translateY(1.2rem) scale(0.97); }
.modal-leave-to .modal-body { transform: translateY(0.6rem) scale(0.98); }

/* ---------- 动画 ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } }
@keyframes page-in { from { opacity: 0; transform: translateY(0.8rem); filter: blur(6px); } }
@keyframes float { 50% { transform: translateY(-0.4rem); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.1); } }
@keyframes ring { from { transform: scale(0.9); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
@keyframes eq { 50% { height: 100%; } }
@keyframes pulse-rec { 50% { box-shadow: 0 0 0 0.5rem rgba(255, 111, 159, 0.15), 0 0.5rem 1.6rem rgba(255, 90, 150, 0.4); } }
@keyframes sw-rise { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-34rem); opacity: 0; } }
@keyframes sw-fall { from { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(7rem) translateX(1rem) rotate(260deg); opacity: 0; } }
@keyframes sw-orbit { from { transform: rotate(0) translateX(calc(0.5rem + var(--n) * 0.32rem)) scale(0.8); } to { transform: rotate(360deg) translateX(calc(0.5rem + var(--n) * 0.32rem)) scale(0.8); } }
@keyframes sw-warp { from { transform: rotate(calc(var(--n) * 36deg)) translateX(0); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(calc(var(--n) * 36deg)) translateX(6rem) scaleX(6); opacity: 0; } }
@keyframes sw-burst { from { transform: rotate(calc(var(--n) * 36deg)) translateX(0); opacity: 1; } 70% { opacity: 1; } to { transform: rotate(calc(var(--n) * 36deg)) translateX(3.2rem) translateY(1rem); opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ---------- 平板 ---------- */
@media (max-width: 1199.98px) {
  .editor-body { grid-template-columns: minmax(0, 1fr) 16rem; }
  .main { padding: 1.8rem 1.8rem 4rem; }
}
@media (max-width: 1023.98px) {
  .editor-body { grid-template-columns: 1fr; }
  .live-preview { display: none; }
  .live-preview.show-m { display: block; position: static; max-width: 17rem; margin: 0 auto 1rem; }
  .two-col { grid-template-columns: 1fr; }
  .auth-wrap { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 2rem; max-width: 34rem; }
}

/* ---------- 手机 ---------- */
@media (max-width: 767.98px) {
  body { font-size: 0.92rem; }
  .auth-wrap { min-height: 100svh; padding: max(2.6rem, env(safe-area-inset-top)) 1.3rem 2rem; gap: 1.8rem; }
  .display { font-size: 2.15rem; line-height: 1.35; }
  .auth-hero .display { margin: 0.9rem 0 1rem; }
  .lead { font-size: 0.92rem; }
  .auth-points { margin-top: 1.2rem; gap: 0.55rem; }
  .auth-points li { font-size: 0.85rem; }
  .auth-card { padding: 1.4rem 1.2rem 1.2rem; }

  .nav { display: none; }
  .app { display: block; }
  .m-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 0.6rem) 1.1rem 0.6rem; background: rgba(var(--sf, 12, 7, 16), 0.72); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .m-top .nav-brand { padding: 0; gap: 0.55rem; }
  .m-top .brand-mark { width: 1.9rem; height: 1.9rem; border-radius: 0.65rem; }
  .m-top .nav-brand b { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.06em; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main { padding: 1.2rem 1rem calc(6.2rem + env(safe-area-inset-bottom)); }
  .page-head { flex-direction: column; align-items: stretch; gap: 0.9rem; margin-bottom: 1.2rem; }
  .page-head > .btn-primary, .page-head > .btn-ghost { align-self: flex-start; }
  .hero-head > .btn-primary { display: none; }
  .display-sm { font-size: 1.65rem; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip > div:nth-child(3) { border-left: 0; }
  .stat-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat-strip b { font-size: 1.6rem; }
  .grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .card { padding: 1.15rem 1.1rem 1rem; }
  .tc-cover { margin: 0 -1.1rem 0.9rem; height: 6rem; }
  .creds { grid-template-columns: 1fr 1fr; }
  .card-actions .btn-primary.sm { flex: 1 1 100%; padding: 0.6rem; font-size: 0.85rem; }
  .card-actions .btn-ghost.sm { flex: 1; }

  .editor-title-row { flex-direction: column; align-items: stretch; gap: 0.6rem; margin-bottom: 0.9rem; }
  .draft-tools { justify-content: flex-start; }
  .steps { display: flex; gap: 0.3rem; margin: 0 -1rem 1rem; padding: 0 1rem; overflow-x: auto; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .steps li { flex: 0 0 auto; padding: 0.4rem; gap: 0.4rem; border-radius: 999px; }
  .steps li.cur { flex: 1 0 auto; padding: 0.4rem 0.9rem 0.4rem 0.4rem; }
  .steps li b { width: 1.4rem; height: 1.4rem; font-size: 0.7rem; }
  .steps li span { font-size: 0.8rem; }
  .steps li:not(.cur) span { display: none; }
  .panel { padding: 1.1rem 1rem; border-radius: 1.1rem; }
  .tpl-grid { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .tpl { min-height: 5.6rem; padding: 0.8rem; }
  .tpl b { font-size: 0.95rem; padding-right: 2rem; }
  .heart-grid { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .theme-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .theme { height: 4.4rem; padding: 0.55rem 0.6rem; }
  .theme b { font-size: 0.78rem; }
  .open-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .toggles { grid-template-columns: 1fr; padding: 0.2rem 0.85rem; }
  .field-row { grid-template-columns: 1fr; }
  .capsule-item .field-row { grid-template-columns: 1fr 1fr auto; }
  .capsule-item .field-row input:first-child { grid-column: 1 / -1; }
  .timeline-item > input[type=date] { flex: 1 1 100%; }
  .editor-nav { position: fixed; left: 0.7rem; right: 0.7rem; bottom: calc(0.7rem + env(safe-area-inset-bottom)); z-index: 45; margin: 0; padding: 0.5rem; gap: 0.4rem; }
  .editor-nav .btn-ghost { padding: 0.62rem 0.85rem; font-size: 0.82rem; }
  .editor-nav .btn-primary { padding: 0.66rem 1.1rem; font-size: 0.88rem; }
  .en-dots { display: none; }
  .editor ~ .tabbar, .app:has(.editor) .tabbar { display: none; }

  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom)); background: rgba(var(--sf, 14, 7, 15), 0.82); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.3rem 0; font-size: 0.66rem; color: var(--faint); cursor: pointer; transition: color 0.2s; }
  .tabbar a svg { width: 1.35rem; height: 1.35rem; }
  .tabbar a.active { color: var(--fg-strong, #fff); }
  .tabbar a.active svg { color: var(--rose-ink, #ff8fb5); filter: drop-shadow(0 0 0.4rem rgba(255, 111, 159, 0.7)); }
  .tab-create i { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-top: -1.3rem; border-radius: 50%; color: #fff; background: var(--grad); box-shadow: 0 0.5rem 1.6rem rgba(255, 90, 150, 0.55), 0 0 0 0.3rem rgba(var(--sh, 14, 7, 15), calc(0.9 * var(--sh-k, 1))); }
  .tab-create i svg { width: 1.5rem; height: 1.5rem; }
  .tb-badge { position: absolute; top: 0; left: 55%; min-width: 1rem; height: 1rem; padding: 0 0.25rem; display: grid; place-items: center; border-radius: 999px; font-size: 0.58rem; color: var(--fg-strong, #fff); background: var(--rose); }
  .sheet-mask { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: rgba(var(--sf, 6, 3, 8), 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .sheet { width: 100%; padding: 0.6rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); border-radius: 1.6rem 1.6rem 0 0; background: linear-gradient(180deg, rgba(var(--sf, 44, 20, 40), 0.97), rgba(var(--sf, 20, 9, 20), 0.98)); border-top: 1px solid var(--line-2); box-shadow: 0 -1rem 3rem rgba(var(--sh, 0, 0, 0), calc(0.5 * var(--sh-k, 1))); }
  .sheet-handle { display: block; width: 2.6rem; height: 0.28rem; margin: 0 auto 0.9rem; border-radius: 999px; background: rgba(var(--hl, 255, 255, 255), 0.2); }
  .sheet-user { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
  .sheet-user b { display: block; font-size: 1rem; }
  .sheet-user small { font-size: 0.75rem; color: var(--faint); }
  .sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
  .sheet-grid a { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.8rem 0.2rem; border-radius: 1rem; font-size: 0.75rem; color: var(--muted); background: rgba(var(--hl, 255, 255, 255), 0.04); border: 1px solid var(--line); cursor: pointer; }
  .sheet-grid a svg { width: 1.4rem; height: 1.4rem; color: var(--rose-ink, #ffadc8); }
  .sheet-grid a.active { color: var(--fg-strong, #fff); border-color: rgba(255, 111, 159, 0.5); background: rgba(255, 111, 159, 0.12); }
  .sheet-enter-active, .sheet-leave-active { transition: opacity 0.3s; }
  .sheet-enter-active .sheet, .sheet-leave-active .sheet { transition: transform 0.45s var(--ease); }
  .sheet-enter-from, .sheet-leave-to { opacity: 0; }
  .sheet-enter-from .sheet, .sheet-leave-to .sheet { transform: translateY(100%); }
  .m-only { display: inline-flex; }
  .logout-row { width: 100%; margin-top: 0.8rem !important; }

  .plan-grid { grid-template-columns: 1fr; }
  .coupon-box { max-width: none; }
  .table-wrap { background: none; border: 0; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { margin-bottom: 0.6rem; padding: 0.4rem 0.9rem; border-radius: 1rem; background: var(--glass); border: 1px solid var(--line); }
  .table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-top: 0; text-align: right; word-break: break-all; }
  .table td + td { border-top: 1px solid var(--line); }
  .table td::before { content: attr(data-label); flex: none; font-size: 0.75rem; color: var(--faint); }

  .modal { align-items: flex-end; padding: 0; }
  .modal-body { width: 100%; max-height: 92vh; border-radius: 1.6rem 1.6rem 0 0; padding: 1.5rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom)); }
  .modal-enter-from .modal-body { transform: translateY(100%); }
  .modal-leave-to .modal-body { transform: translateY(100%); }
  .m-preview, .m-tpl-preview { width: 100%; }
  .iframe-phone { max-height: 60vh; }
  .toasts { top: calc(env(safe-area-inset-top) + 0.8rem); }
}

@media (hover: none) {
  .card:hover, .tpl:hover, .heart:hover, .theme:hover, .open-chip:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* 细节修正 */
.card.tpl-card { padding-top: 0; }
.tpl-card .card-actions > * { flex: 1; }
.poster-box, .interactions-box, .preview-box { padding-top: 1.4rem; }
.m-poster .modal-x, .m-preview .modal-x, .m-tpl-preview .modal-x { top: 0.7rem; right: 0.7rem; }
.phone { aspect-ratio: auto; height: min(calc(100vh - 14rem), 33rem); }
.live-preview { top: 1.2rem; }
@media (max-width: 1023.98px) { .live-preview.show-m .phone { height: 30rem; } }

/* ================= v2：回执 / 邮件贺卡 / 时光胶囊 / 海报视频 / AI 助手 ================= */
.lc-badges { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.rc-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem 0.22rem 0.5rem; border-radius: 999px; font-size: 0.72rem; color: var(--muted); background: rgba(var(--hl, 255, 255, 255), .06); border: 1px solid var(--line); cursor: pointer; transition: transform .3s var(--ease), background .3s; }
.rc-badge:hover { transform: translateY(-1px); background: rgba(var(--hl, 255, 255, 255), .1); }
.rc-badge i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(var(--hl, 255, 255, 255), .3); }
.rc-badge small { color: var(--faint); font-size: 0.66rem; }
.rc-opened { color: var(--gold-ink, #ffe2b8); border-color: rgba(255,217,168,.35); }
.rc-opened i { background: var(--gold); box-shadow: 0 0 0.5rem var(--gold); }
.rc-finished { color: #d9ccff; border-color: rgba(157,123,255,.45); }
.rc-finished i { background: #a98bff; box-shadow: 0 0 0.5rem #a98bff; }
.rc-accepted { color: #fff; border-color: transparent; background: var(--grad); box-shadow: 0 0 1rem rgba(255,111,159,.4); }
.rc-accepted i { background: #fff; animation: rcPulse 1.4s ease-in-out infinite; }
.rc-accepted small { color: rgba(var(--hl, 255, 255, 255), .8); }
@keyframes rcPulse { 50% { box-shadow: 0 0 0 0.3rem rgba(255,255,255,.25); } }
.card-actions svg { width: 0.95rem; height: 0.95rem; vertical-align: -0.15rem; margin-right: 0.15rem; }

.rc-timeline { list-style: none; margin: 1rem 0 0.4rem; padding: 0; position: relative; }
.rc-timeline::before { content: ''; position: absolute; left: 0.55rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: linear-gradient(var(--line-2), transparent); }
.rc-timeline li { position: relative; display: flex; gap: 0.9rem; padding: 0.7rem 0; }
.rc-dot { position: relative; z-index: 1; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; border-radius: 50%; border: 2px solid var(--line-2); background: #1d0d1a; }
.rc-timeline li.done .rc-dot { border-color: transparent; background: var(--grad); box-shadow: 0 0 0.9rem rgba(255,111,159,.6); }
.rc-timeline li.done .rc-dot::after { content: ''; position: absolute; left: 0.32rem; top: 0.16rem; width: 0.26rem; height: 0.48rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rc-timeline b { display: block; font-family: var(--serif); font-size: 1rem; color: var(--fg-strong, #fff); font-weight: 600; letter-spacing: 0.04em; }
.rc-timeline li:not(.done) b { color: var(--muted); font-weight: 400; }
.rc-timeline p { margin-top: 0.25rem; font-size: 0.8rem; color: var(--gold); }
.rc-timeline p.muted { color: var(--faint); }

.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.4rem 0 0.9rem; }
.seg2 button { padding: 0.75rem 0.6rem; border-radius: 1rem; text-align: left; font-size: 0.95rem; font-weight: 600; color: var(--muted); background: rgba(var(--hl, 255, 255, 255), .04); border: 1px solid var(--line); transition: all .35s var(--ease); }
.seg2 button small { display: block; margin-top: 0.2rem; font-size: 0.72rem; font-weight: 400; color: var(--faint); }
.seg2 button.on { color: var(--fg-strong, #fff); border-color: rgba(255,111,159,.6); background: linear-gradient(160deg, rgba(255,111,159,.22), rgba(157,123,255,.14)); box-shadow: 0 0 1.2rem rgba(255,111,159,.2), inset 0 1px 0 rgba(255,255,255,.12); }
.seg2 button.on small { color: rgba(255,236,240,.75); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips.sm { margin-top: 0.5rem; }
.chip { padding: 0.38rem 0.85rem; border-radius: 999px; font-size: 0.82rem; color: var(--muted); background: rgba(var(--hl, 255, 255, 255), .05); border: 1px solid var(--line); transition: all .3s var(--ease); }
.chips.sm .chip { padding: 0.25rem 0.7rem; font-size: 0.75rem; }
.chip:hover { color: var(--fg-strong, #fff); border-color: var(--line-2); }
.chip.on { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 0.2rem 0.9rem rgba(255,111,159,.35); }
.field-hint { display: block; margin-top: 0.35rem; font-size: 0.72rem; color: var(--faint); line-height: 1.5; }
.warn-box { margin-bottom: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 0.8rem; font-size: 0.82rem; color: #ffd2a8; background: rgba(255,170,90,.1); border: 1px solid rgba(255,170,90,.3); }
.mail-history { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.mh-title { font-size: 0.75rem; letter-spacing: 0.16em; color: var(--faint); margin-bottom: 0.5rem; }
.mail-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.mail-history li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.8rem; background: rgba(var(--hl, 255, 255, 255), .04); border: 1px solid var(--line); }
.mail-history li > div { flex: 1; min-width: 0; }
.mail-history b { display: block; font-size: 0.82rem; color: var(--ivory); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mail-history small { font-size: 0.7rem; color: var(--faint); }
.mh-kind { flex: none; padding: 0.15rem 0.45rem; border-radius: 0.4rem; font-size: 0.68rem; color: var(--gold); background: rgba(255,217,168,.1); }
.mail-history em { flex: none; font-style: normal; font-size: 0.72rem; }
.st-sent { color: #8fe3b0; } .st-pending, .st-sending { color: var(--gold); } .st-failed { color: #ff9aaa; } .st-cancelled { color: var(--faint); }
.mh-cancel { flex: none; font-size: 0.72rem; color: var(--muted); padding: 0.2rem 0.5rem; border-radius: 0.5rem; border: 1px solid var(--line); }

.modal-body.m-poster2 { width: min(100%, 30rem); }
.p2-stage { position: relative; margin: 0.6rem auto 0.8rem; width: min(100%, 17rem); aspect-ratio: 9 / 16; border-radius: 1.2rem; overflow: hidden; background: #160912; box-shadow: 0 1.4rem 3rem rgba(var(--sh, 0, 0, 0), calc(.5 * var(--sh-k, 1))), 0 0 0 1px var(--line-2); }
.p2-stage img, .p2-stage video { display: block; width: 100%; height: 100%; object-fit: cover; }
.p2-loading { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.8rem; color: var(--muted); font-size: 0.85rem; }
.p2-loading i { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--rose); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.p2-progress { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; height: 1.6rem; border-radius: 999px; background: rgba(var(--sf, 0, 0, 0), .55); overflow: hidden; backdrop-filter: blur(6px); }
.p2-progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--grad); transition: width .2s; }
.p2-progress span { position: relative; display: block; text-align: center; line-height: 1.6rem; font-size: 0.72rem; color: var(--fg-strong, #fff); }
.p2-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.p2-actions > * { flex: 1 1 45%; }
.poster2-box .tip { word-break: break-all; }

.ai-modal textarea { resize: vertical; }
.ai-results { margin-top: 1rem; display: grid; gap: 0.7rem; }
.ai-src { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--faint); }
.ai-src span { flex: none; padding: 0.12rem 0.5rem; border-radius: 0.4rem; font-size: 0.7rem; font-weight: 600; }
.src-ai { color: #fff; background: var(--grad); }
.src-template { color: var(--gold); background: rgba(255,217,168,.12); }
.ai-opt { position: relative; padding: 1rem 1rem 0.8rem; border-radius: 1rem; background: linear-gradient(160deg, rgba(var(--hl, 255, 255, 255), .08), rgba(var(--hl, 255, 255, 255), .02)); border: 1px solid var(--line); animation: aiIn .7s var(--ease) both; animation-delay: calc(var(--i) * 0.12s); }
.ai-opt p { font-family: var(--serif); font-size: 0.95rem; line-height: 1.85; color: var(--ivory); }
.ai-opt div { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
@keyframes aiIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .ai-opt, .rc-accepted i { animation: none; } }

/* v2 创作页实时预览：极光丝绸 + 手写名字 + 液态玻璃信纸 */
.ph-aurora { position: absolute; inset: -20%; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .6; }
.ph-aurora i { position: absolute; width: 80%; height: 45%; border-radius: 50%; }
.ph-aurora i:nth-child(1) { left: -10%; top: 10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pa, #ff6f9f) 55%, transparent), transparent); animation: phSilkA 16s ease-in-out infinite alternate; }
.ph-aurora i:nth-child(2) { right: -20%; top: 35%; background: radial-gradient(closest-side, rgba(120, 110, 255, .35), transparent); animation: phSilkB 21s ease-in-out infinite alternate; }
.ph-aurora i:nth-child(3) { left: 10%; bottom: -5%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pb, #ffb3cc) 40%, transparent), transparent); animation: phSilkA 25s ease-in-out infinite alternate-reverse; }
@keyframes phSilkA { to { transform: translate3d(30%, 15%, 0) scale(1.3) rotate(18deg); } }
@keyframes phSilkB { to { transform: translate3d(-28%, -18%, 0) scale(1.2); } }
.ph-hand { width: 100%; height: 3.6rem; margin: 0.1rem 0 -0.4rem; overflow: visible; }
.ph-hand text { font-family: var(--serif); font-size: 46px; font-weight: 600; letter-spacing: .08em; fill: transparent; stroke: #fff; stroke-width: 1; stroke-dasharray: 500; stroke-dashoffset: 500; animation: phHand 2.2s cubic-bezier(.55, .1, .3, 1) forwards; }
@keyframes phHand { 70% { stroke-dashoffset: 0; fill: transparent; } 100% { stroke-dashoffset: 0; fill: #fff; stroke-width: .3; filter: drop-shadow(0 0 8px var(--pa, #ff6f9f)); } }
.ph-flourish { width: 62%; height: 1.4rem; margin-bottom: 0.7rem; overflow: visible; }
.ph-flourish path { fill: none; stroke: var(--pb, #ffb3cc); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: phFlourish 1.6s ease 1.4s forwards; filter: drop-shadow(0 0 3px var(--pa, #ff6f9f)); }
@keyframes phFlourish { to { stroke-dashoffset: 0; } }
.ph-letter { position: relative; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1rem 2rem rgba(var(--sh, 0, 0, 0), calc(.3 * var(--sh-k, 1))); }
.ph-letter > :not(.ph-shine) { position: relative; z-index: 1; }
.ph-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(160px circle at var(--lx, 20%) var(--ly, -10%), rgba(var(--hl, 255, 255, 255), .18), transparent 65%); }
@media (prefers-reduced-motion: reduce) { .ph-aurora i, .ph-hand text, .ph-flourish path { animation: none; } .ph-hand text { fill: #fff; stroke-dashoffset: 0; } .ph-flourish path { stroke-dashoffset: 0; } }

/* ============ v3：头像 / Logo / 登录背景 / 模板封面 ============ */
.nu-avatar { cursor: pointer; }
.brand-mark.has-logo { background: rgba(var(--hl, 255, 255, 255), .06); overflow: hidden; padding: 0; }
.brand-mark.has-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-top-actions { display: flex; align-items: center; gap: .55rem; }
.m-avatar-btn { padding: 0; border: 0; background: none; border-radius: 50%; line-height: 0; cursor: pointer; }
.sheet-user .la { margin-right: .2rem; }

.auth-wrap.has-bg { position: relative; isolation: isolate; }
.auth-bg { position: fixed; inset: 0; z-index: -1; background: var(--auth-bg) center / cover no-repeat; animation: authBgIn 1.2s var(--ease) both; }
.auth-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 30%, rgba(var(--sf, 12, 7, 16), .35), rgba(var(--sf, 12, 7, 16), .82) 70%), linear-gradient(180deg, rgba(var(--sf, 12, 7, 16), .15), rgba(var(--sf, 12, 7, 16), .7)); }
@keyframes authBgIn { from { opacity: 0; transform: scale(1.06); } }
.is-auth:has(.auth-wrap.has-bg) ~ #night-fx, body:has(.auth-wrap.has-bg) #night-fx { opacity: .35; }
.auth-hero-img { display: block; max-width: min(100%, 26rem); max-height: 12rem; object-fit: contain; margin: 0 0 1rem; border-radius: 1rem; filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.45)); }

.avatar-editor { display: flex; gap: 1.1rem; align-items: center; padding: 1rem; margin: .2rem 0 1.1rem; border-radius: 1.1rem; background: linear-gradient(140deg, rgba(255,111,159,.09), rgba(157,123,255,.05)); border: 1px solid var(--line); }
.ae-pic { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; line-height: 0; transition: transform .3s var(--ease); }
.ae-pic:hover { transform: scale(1.04); }
.ae-pic.busy { animation: aeBusy 1.1s ease-in-out infinite; }
@keyframes aeBusy { 50% { opacity: .55; } }
.ae-cam { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: #fff; background: var(--grad); box-shadow: 0 0 0 3px #1a0d17; }
.ae-cam svg { width: .95rem; height: .95rem; }
.ae-text { min-width: 0; display: grid; gap: .3rem; }
.ae-text b { font-family: var(--serif); font-size: 1.05rem; color: var(--fg-strong, #fff); }
.ae-text small { font-size: .76rem; line-height: 1.6; color: var(--faint); }
.ae-actions { display: flex; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; }

.tpl.has-cover { padding-top: 0; overflow: hidden; }
.tpl-cover { display: block; height: 4.6rem; margin: 0 -1rem .7rem; background: center / cover no-repeat; border-bottom: 1px solid var(--line); }
.tc-cover.has-img { background-size: cover; background-position: center; }
.tc-cover.has-img::before { background: linear-gradient(180deg, transparent 40%, rgba(var(--sf, 10, 5, 12), .65)); opacity: 1; }
@media (max-width: 760px) { .avatar-editor { align-items: flex-start; } .tpl-cover { margin: 0 -1rem .6rem; height: 3.8rem; } }

/* =========================================================
   v4 · 浅色「晨光信笺」——奶油米纸 + 腮红粉 + 玫瑰金 + 柔光
   深色样式完全不变（未定义的 --hl / --sf / --sh 回落到原值）
   ========================================================= */
html[data-mode="light"] {
  --ink: #fbf3ee; --ink-2: #fff8f3; --plum: #f5e2da;
  --rose: #d4577f; --rose-2: #c45a7c; --violet: #8a6bd8; --gold: #b0793d;
  --ivory: #3d2430; --fg-strong: #2b1520;
  --muted: rgba(77, 43, 56, 0.7); --faint: rgba(77, 43, 56, 0.48);
  --line: rgba(140, 76, 92, 0.12); --line-2: rgba(140, 76, 92, 0.2);
  --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 250, 246, 0.68));
  --glass-solid: rgba(255, 250, 246, 0.94);
  --grad: linear-gradient(135deg, #ec8ea6 0%, #d4577f 48%, #c3896f 100%);
  --ok: #2a9a70; --warn: #b7701f; --bad: #d4475f;
  --hl: 120, 56, 74; --sf: 255, 252, 249; --sh: 150, 80, 90; --sh-k: 0.42;
  --rose-ink: #b8456b; --gold-ink: #94622a; --bad-ink: #c23a55;
}
html[data-mode="light"] body {
  background:
    radial-gradient(64rem 38rem at 88% -12%, rgba(255, 210, 186, 0.6), transparent 62%),
    radial-gradient(56rem 40rem at -12% 6%, rgba(255, 188, 206, 0.5), transparent 60%),
    radial-gradient(70rem 46rem at 50% 118%, rgba(230, 198, 255, 0.32), transparent 62%),
    var(--ink);
  background-attachment: fixed;
}
html[data-mode="light"] ::selection { background: rgba(212, 87, 127, 0.22); }
html[data-mode="light"] .glass, html[data-mode="light"] .panel, html[data-mode="light"] .card, html[data-mode="light"] .notice, html[data-mode="light"] .plan, html[data-mode="light"] .modal-body {
  box-shadow: 0 1rem 2.4rem -0.8rem rgba(150, 80, 90, 0.18), 0 1px 2px rgba(150, 80, 90, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
html[data-mode="light"] .btn-primary { box-shadow: 0 0.5rem 1.4rem rgba(196, 90, 120, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
html[data-mode="light"] .display em { background: linear-gradient(120deg, #d4577f, #c3896f 75%); -webkit-background-clip: text; background-clip: text; }
html[data-mode="light"] input, html[data-mode="light"] textarea, html[data-mode="light"] select { background: rgba(255, 255, 255, 0.78); }
html[data-mode="light"] input:focus, html[data-mode="light"] textarea:focus, html[data-mode="light"] select:focus { background: #fff; }
html[data-mode="light"] select option { background: #fffaf7; color: #3d2430; }
html[data-mode="light"] #night-fx { mix-blend-mode: multiply; opacity: 0.95; }

/* v4 · 外观切换的位置 */
.auth-mode { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: 1rem; z-index: 20; }
.nav-mode { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.4rem 0 0.6rem; padding: 0.35rem 0.35rem 0.35rem 0.8rem; border-radius: 999px; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--faint); background: rgba(var(--hl, 255, 255, 255), 0.03); border: 1px solid var(--line); }
.m-mode { margin-right: 0.15rem; }
.m-mode .lms-opt { min-height: 1.9rem; }
.mode-panel { grid-column: 1 / -1; }
.mode-panel .love-mode-switch { margin: 0.3rem 0 1rem; }
.mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.mode-card { display: grid; gap: 0.2rem; padding: 0.7rem 0.7rem 0.8rem; border-radius: 1rem; text-align: left; background: rgba(var(--hl, 255, 255, 255), 0.03); border: 1px solid var(--line); transition: border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s; }
.mode-card:hover { transform: translateY(-2px); }
.mode-card.on { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(212, 87, 127, 0.15); }
.mode-card b { font-family: var(--serif); font-size: 0.95rem; color: var(--fg-strong, #fff); margin-top: 0.35rem; }
.mode-card small { font-size: 0.72rem; color: var(--faint); }
.mc-art { position: relative; height: 4.6rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--line); }
.mc-art i { position: absolute; border-radius: 0.35rem; }
.mc-art i:nth-child(1) { left: 10%; top: 18%; width: 46%; height: 0.5rem; }
.mc-art i:nth-child(2) { left: 10%; top: 42%; width: 70%; height: 0.35rem; opacity: 0.6; }
.mc-art i:nth-child(3) { right: 9%; bottom: 14%; width: 1.4rem; height: 1.4rem; border-radius: 50%; }
.mode-card.light .mc-art { background: radial-gradient(80% 90% at 85% 0%, #ffd9c4, transparent 60%), radial-gradient(80% 90% at 0% 100%, #ffd0dc, transparent 60%), #fbf3ee; }
.mode-card.light .mc-art i { background: #b8456b; } .mode-card.light .mc-art i:nth-child(3) { background: linear-gradient(135deg, #ec8ea6, #c3896f); }
.mode-card.dark .mc-art { background: radial-gradient(80% 90% at 85% 0%, rgba(157, 123, 255, 0.45), transparent 60%), radial-gradient(80% 90% at 0% 100%, rgba(255, 111, 159, 0.35), transparent 60%), #0c0710; }
.mode-card.dark .mc-art i { background: #ffd9e4; } .mode-card.dark .mc-art i:nth-child(3) { background: linear-gradient(135deg, #ff6f9f, #9d7bff); }
.mode-card.system .mc-art { background: linear-gradient(105deg, #fbf3ee 0 50%, #0c0710 50% 100%); }
.mode-card.system .mc-art i { background: linear-gradient(90deg, #b8456b 0 50%, #ffd9e4 50%); } .mode-card.system .mc-art i:nth-child(3) { right: calc(50% - 0.7rem); background: linear-gradient(135deg, #ec8ea6, #9d7bff); }
@media (max-width: 767.98px) {
  .mode-cards { gap: 0.5rem; } .mc-art { height: 3.4rem; } .mode-card small { display: none; }
  .m-mode { font-size: 0.7rem; } .m-mode .lms-opt { padding: 0.3rem 0.42rem; min-width: 1.8rem; min-height: 1.8rem; }
}
html[data-mode="light"] input::placeholder, html[data-mode="light"] textarea::placeholder { color: rgba(120, 72, 88, 0.42); }
html[data-mode="light"] .seg button.active { color: #fff; text-shadow: 0 1px 2px rgba(120, 40, 70, .25); }
html[data-mode="light"] .nav a.active svg { color: var(--rose); }
html[data-mode="light"] .nav a.active { background: linear-gradient(90deg, rgba(212, 87, 127, 0.14), rgba(212, 87, 127, 0.02)); }
@media (max-width: 430px) { .m-top .nav-brand b { max-width: 6.6rem; } }

/* ===== v4 信笺配色：手机预览独立于创作者界面外观 ===== */
.phone { --hl: 255, 255, 255; --sf: 20, 8, 20; --sh: 0, 0, 0; --sh-k: 1; --fg-strong: #fff; --rose-ink: #ffb3cc; }
.phone.ph-light { --hl: 120, 56, 74; --sf: 255, 252, 249; --sh: 150, 80, 90; --sh-k: .42; --fg-strong: #2b1520; --rose-ink: #b8456b; box-shadow: 0 2rem 4rem rgba(150, 80, 90, .22), inset 0 0 0 1px rgba(140, 76, 92, .14); }
.phone.ph-light .ph-aurora { mix-blend-mode: multiply; opacity: .32; }
.phone.ph-light .ph-dust i { background: var(--pa, #d4577f); box-shadow: none; opacity: .55; }
.phone.ph-light .ph-eyebrow, .phone.ph-light .ph-sign { color: color-mix(in srgb, var(--pa, #d4577f) 75%, #3d2430); }
.phone.ph-light .ph-pre { color: rgba(77, 43, 56, .7); }
.phone.ph-light .ph-hand text { stroke: #b8456b; animation-name: phHandL; }
@keyframes phHandL { 70% { stroke-dashoffset: 0; fill: transparent; } 100% { stroke-dashoffset: 0; fill: #8f3456; stroke-width: .3; } }
.phone.ph-light .ph-flourish path { filter: none; stroke: color-mix(in srgb, var(--pa, #d4577f) 70%, #c3896f); }
.phone.ph-light .ph-letter { background: rgba(255, 252, 249, .78); border-color: rgba(140, 76, 92, .14); box-shadow: inset 0 1px 0 #fff, 0 .8rem 1.6rem rgba(150, 80, 90, .14); }
.phone.ph-light .ph-msg { color: rgba(61, 36, 48, .88); }
.cm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.6rem; }
.cm-chip { position: relative; padding: .8rem .85rem; text-align: left; border-radius: 1rem; border: 1px solid var(--line); background: rgba(var(--hl, 255, 255, 255), .035); cursor: pointer; transition: border-color .25s, background .25s, box-shadow .3s, transform .3s var(--ease); min-height: 44px; }
.cm-chip:hover { transform: translateY(-2px); }
.cm-chip.sel { border-color: rgba(255, 111, 159, .75); box-shadow: 0 0 0 1px rgba(255, 111, 159, .4), 0 .8rem 2rem rgba(255, 90, 150, .16); }
.cm-chip b { display: block; margin: .45rem 0 .1rem; font-size: .9rem; color: var(--fg-strong, #fff); }
.cm-chip span { font-size: .72rem; color: var(--faint); }
.cm-sw { display: block; height: 1.6rem; border-radius: .55rem; border: 1px solid var(--line); }
.cm-auto .cm-sw { background: linear-gradient(115deg, #fbefe8 0 49%, #1a0d1c 51% 100%); }
.cm-light .cm-sw { background: linear-gradient(135deg, #fff8f3, #f6dcdc 60%, #e9b9a6); }
.cm-dark .cm-sw { background: radial-gradient(60% 90% at 30% 20%, rgba(255, 111, 159, .45), transparent 70%), linear-gradient(180deg, #1a0d1c, #0b0610); }
@media (max-width: 640px) { .cm-grid { grid-template-columns: 1fr; } .cm-chip { display: grid; grid-template-columns: 3rem 1fr; column-gap: .7rem; align-items: center; } .cm-sw { grid-row: span 2; height: 2.2rem; } .cm-chip b { margin: 0; } }
/* 视觉主题卡始终是深色夜景底，文字保持浅色 */
html[data-mode="light"] .theme b { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
html[data-mode="light"] .theme.sel { box-shadow: 0 0 0 2px #d4577f, 0 .8rem 2rem rgba(212, 87, 127, .25); }
/* v4 确认框（替代原生 confirm） */
.cfm-mask { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1.2rem; background: rgba(var(--sf, 8, 4, 12), .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cfm { width: min(22rem, 100%); padding: 1.5rem 1.4rem 1.2rem; border-radius: 1.3rem; animation: rise .35s var(--ease) both; }
.cfm-t { font-family: var(--serif); font-size: 1.08rem; color: var(--fg-strong, #fff); line-height: 1.6; }
.cfm-s { margin-top: .4rem; font-size: .85rem; color: var(--muted); line-height: 1.6; }
.cfm-a { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.3rem; }
.cfm-a button { min-height: 44px; min-width: 5.5rem; }
.btn-primary.cfm-danger { background: linear-gradient(135deg, #f0607a, #c8334f); }
.fade-enter-active, .fade-leave-active { transition: opacity .25s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.cfm-a button:focus { outline: none; } .cfm-a button:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }