/* Mi Ami — riso print / zine：奶油紙、洋紅油墨、梅紫、半色調網點、顆粒、剪貼字、口紅印 */
:root, :root[data-theme="light"] {
  --paper: #f3eadf;
  --paper2: #fbf6ef;
  --ink: #2b0a1e;
  --plum: #6b1340;
  --magenta: #e2347f;
  --pink: #ff86ba;
  --blush: #f5cadb;
  --teal: #8dbbb4;
  --text: #2b0a1e;
  --muted: #8b6577;
  --line: rgba(43,10,30,.16);
  --dot: rgba(226,52,127,.22);
  --bubble-me: #e2347f;
  --bubble-me-text: #fff7fb;
  --bubble-them: #fbf6ef;
  --tab-bg: rgba(243,234,223,.94);
  --shade: 4px 4px 0 var(--ink);
  --shade-m: 5px 5px 0 var(--magenta);
  --grain-op: .22;
  /* 舊變數別名（保留相容） */
  --cherry: var(--magenta); --cherry2: var(--pink); --cherry-deep: var(--plum); --silver: var(--blush); --surface: var(--paper2); --surface2: var(--paper2); --bg: var(--paper);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #1b0913;
  --paper2: #2a0f1f;
  --ink: #f6dce8;
  --plum: #ff9fc8;
  --magenta: #ff4f98;
  --pink: #ff9cc6;
  --blush: #4a1934;
  --teal: #6fa7a0;
  --text: #f8e6ee;
  --muted: #b98aa0;
  --line: rgba(255,170,205,.18);
  --dot: rgba(255,79,152,.18);
  --bubble-me: #e2347f;
  --bubble-me-text: #fff;
  --bubble-them: #2a0f1f;
  --tab-bg: rgba(27,9,19,.94);
  --shade: 4px 4px 0 #000;
  --shade-m: 5px 5px 0 var(--magenta);
  --grain-op: .35;
  color-scheme: dark;
}
:root[data-theme="sepia"] {
  --paper: #f1e7d2;
  --paper2: #f8f1e1;
  --ink: #3a2a1f;
  --plum: #6d3a33;
  --magenta: #a8455a;
  --pink: #c9808d;
  --blush: #e8d3c5;
  --teal: #8aa69c;
  --text: #3a2a1f;
  --muted: #7d6a58;
  --line: rgba(58,42,31,.16);
  --dot: rgba(168,69,90,.12);
  --bubble-me: #a8455a;
  --bubble-me-text: #fbf3e6;
  --bubble-them: #f8f1e1;
  --tab-bg: rgba(241,231,210,.96);
  --shade: 3px 3px 0 rgba(58,42,31,.7);
  --shade-m: 4px 4px 0 var(--magenta);
  --grain-op: .14;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--text); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang TC", "PingFang SC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 15px; line-height: 1.5; overscroll-behavior: none;
}
:root[data-theme="sepia"] body { font-family: "Songti TC", "Songti SC", "Noto Serif TC", Georgia, serif; }
button, input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.display { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Heavy", "Helvetica Neue", "PingFang SC", sans-serif; font-weight: 900; letter-spacing: .3px; }
.serif { font-family: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, "Songti TC", "Songti SC", serif; font-style: italic; }

/* 整頁顆粒 */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: var(--grain-op); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.04  0 0 0 0 0.12  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root[data-theme="dark"] body::after { mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .5  0 0 0 0 .7  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

#app {
  position: relative; max-width: 480px; margin: 0 auto; height: 100vh;
  display: flex; flex-direction: column; overflow: hidden; background: var(--paper);
}
@supports (height: 100dvh) { #app { height: 100dvh; } }
/* 角落網點 */
#app::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(var(--dot) 1.3px, transparent 1.8px) 0 0 / 8px 8px;
  -webkit-mask-image: radial-gradient(120% 60% at 110% -5%, #000 0%, transparent 55%), radial-gradient(90% 50% at -10% 105%, #000 0%, transparent 55%);
  mask-image: radial-gradient(120% 60% at 110% -5%, #000 0%, transparent 55%), radial-gradient(90% 50% at -10% 105%, #000 0%, transparent 55%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
#app > * { position: relative; z-index: 1; }

/* ---------- 剪貼字 Logo ---------- */
.cut { display: inline-flex; align-items: center; gap: 1px; line-height: 1; white-space: nowrap; }
.cut i {
  font-style: normal; display: inline-block; padding: .06em .12em .02em; font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Helvetica Neue", sans-serif; font-weight: 900;
  box-shadow: 1px 1px 0 rgba(43,10,30,.35);
}
.cut i.sp { background: none !important; box-shadow: none; width: .28em; padding: 0; }
.cut i.k0 { background: var(--magenta); color: var(--paper2); transform: rotate(-4deg); }
.cut i.k1 { background: var(--paper2); color: var(--magenta); transform: rotate(3deg) translateY(1px); outline: 1px solid var(--line); }
.cut i.k2 { background: var(--ink); color: var(--pink); transform: rotate(-2deg) translateY(-1px); }
.cut i.k3 { background: var(--teal); color: var(--ink); transform: rotate(5deg); }
.cut i.k4 { background: var(--pink); color: var(--ink); transform: rotate(-6deg) translateY(1px); }
:root[data-theme="dark"] .cut i.k2 { background: #000; }
.logo { font-size: 19px; }

/* ---------- 導覽列 ---------- */
.nav {
  flex: none; display: grid; grid-template-columns: 90px 1fr 90px; align-items: center;
  padding: calc(env(safe-area-inset-top) + 6px) 8px 6px; min-height: 50px;
  background: var(--tab-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink); z-index: 5;
}
.nav .title { text-align: center; font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .back { justify-self: start; background: none; border: 0; color: var(--magenta); font-size: 17px; padding: 6px 4px; display: flex; align-items: center; gap: 2px; cursor: pointer; font-weight: 600; }
.nav .back svg { width: 22px; height: 22px; }
.nav .right { justify-self: end; display: flex; gap: 4px; }
.icon-btn { background: none; border: 0; color: var(--magenta); padding: 6px 8px; font-size: 20px; cursor: pointer; line-height: 1; }

#view { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; }
.page { padding: 14px 14px 28px; }

/* ---------- 分頁列 ---------- */
.tabbar {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px);
  background: var(--tab-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 2px solid var(--ink);
}
.tabbar button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 4px 0; cursor: pointer; position: relative; font-weight: 600; letter-spacing: 1px; }
.tabbar button .ic { font-size: 20px; line-height: 1; filter: grayscale(1); opacity: .55; transition: .2s; }
.tabbar button.on { color: var(--magenta); }
.tabbar button.on .ic { filter: none; opacity: 1; transform: rotate(-6deg) scale(1.12); }
.tabbar button.on::after { content: ""; position: absolute; bottom: -2px; width: 22px; height: 3px; background: var(--magenta); transform: rotate(-3deg); }
.dot { position: absolute; top: 2px; right: calc(50% - 18px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--magenta); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }

/* ---------- 按鈕 ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid var(--ink); border-radius: 999px; padding: 9px 18px; cursor: pointer;
  background: var(--magenta); color: var(--paper2); font-weight: 800; letter-spacing: .5px;
  box-shadow: var(--shade); transition: transform .08s, box-shadow .08s;
}
:root[data-theme="dark"] .btn { border-color: #000; color: #fff; }
.btn.silver { background: var(--paper2); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--magenta); border-color: var(--magenta); box-shadow: none; border-style: dashed; }
.btn.small { padding: 5px 12px; font-size: 13px; box-shadow: 2px 2px 0 var(--ink); }
.btn.ghost.small { box-shadow: none; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- 表單 ---------- */
.group { background: var(--paper2); border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 14px; margin: 0 0 14px; box-shadow: var(--shade); }
:root[data-theme="dark"] .group { border-color: rgba(255,170,205,.35); }
.group-title { font-size: 12px; color: var(--plum); margin: 20px 4px 8px; letter-spacing: 1.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.group-title::before { content: "✦"; color: var(--magenta); }
.field { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.field:last-child { border-bottom: 0; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; letter-spacing: .5px; }
.field input[type=text], .field input[type=number], .field input[type=password], .field input[type=url], .field textarea, .field select, .row input {
  width: 100%; border: 1.5px solid var(--line); border-radius: 4px; padding: 9px 11px; background: var(--paper); outline: none; resize: vertical;
}
.field textarea { min-height: 80px; line-height: 1.55; }
.field textarea.tall { min-height: 260px; font-size: 13px; }
.field input:focus, .field textarea:focus, .field select:focus, .row input:focus { border-color: var(--magenta); box-shadow: 2px 2px 0 var(--magenta); }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }
.row > .none { flex: none; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed var(--line); gap: 12px; }
.switch-row:last-child { border-bottom: 0; }
.switch-row small { display: block; color: var(--muted); font-size: 12px; }
.switch { position: relative; width: 50px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 30px; background: var(--paper); border: 2px solid var(--ink); transition: .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: .2s; }
.switch input:checked + span { background: var(--magenta); }
.switch input:checked + span::after { transform: translateX(22px); background: var(--paper2); }
.hint { font-size: 12px; color: var(--muted); margin: 6px 4px; line-height: 1.6; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { border: 1.5px solid var(--ink); background: var(--paper); border-radius: 3px; padding: 4px 11px; font-size: 13px; cursor: pointer; transform: rotate(-1deg); }
.chip:nth-child(even) { transform: rotate(1.2deg); }
.chip.on { background: var(--magenta); color: var(--paper2); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- 列表 ---------- */
.list { background: var(--paper2); border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; box-shadow: var(--shade); margin-bottom: 14px; }
:root[data-theme="dark"] .list { border-color: rgba(255,170,205,.35); }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px dashed var(--line); cursor: pointer; }
.li:last-child { border-bottom: 0; }
.li:active { background: var(--blush); }
.li .ic { width: 30px; height: 30px; border-radius: 3px; display: grid; place-items: center; background: var(--blush); font-size: 16px; flex: none; transform: rotate(-4deg); border: 1px solid var(--line); }
.li .main { flex: 1; min-width: 0; }
.li .main b { display: block; font-weight: 700; }
.li .main small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .chev { color: var(--magenta); font-weight: 800; }
.ava { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--blush); border: 2px solid var(--ink); }
.ava.sm { width: 36px; height: 36px; }
.badge { min-width: 20px; height: 20px; border-radius: 10px; background: var(--magenta); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 6px; }

/* ---------- 分段 ---------- */
.seg { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; border: 1.5px solid var(--ink); background: var(--paper2); border-radius: 3px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--pink); font-weight: 800; transform: rotate(-2deg); }
:root[data-theme="dark"] .seg button.on { background: var(--magenta); color: #fff; }

/* ---------- 口紅印 ---------- */
.kiss { display: inline-block; width: 1.6em; height: 1em; color: var(--magenta); }
.kiss svg { width: 100%; height: 100%; display: block; }
.kisses { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kisses .kiss { position: absolute; opacity: .55; }

/* ---------- 滑卡 ---------- */
.swipe-page { height: 100%; display: flex; flex-direction: column; padding: 14px 16px 10px; }
.stack { position: relative; flex: 1; min-height: 360px; }
.pcard {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: var(--plum);
  border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--magenta); touch-action: none; user-select: none; will-change: transform;
}
.pcard.back { transform: rotate(3deg) translate(6px, 4px); box-shadow: 5px 5px 0 var(--ink); filter: saturate(.5) brightness(.95); }
.pcard img.photo { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pcard .noimg, .noimg { width: 100%; height: 100%; display: grid; place-items: center; font-size: 60px; background: radial-gradient(var(--dot) 1.6px, transparent 2px) 0 0 / 9px 9px, var(--blush); }
/* 印刷網點覆蓋層 */
.pcard .shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .35;
  background: radial-gradient(rgba(107,19,64,.55) .9px, transparent 1.3px) 0 0 / 5px 5px; -webkit-mask-image: linear-gradient(180deg, transparent 35%, #000 100%); mask-image: linear-gradient(180deg, transparent 35%, #000 100%); }
.pcard .info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 16px 16px; color: #fff7fb;
  background: linear-gradient(180deg, rgba(43,10,30,0) 0%, rgba(43,10,30,.6) 40%, rgba(30,5,20,.94) 100%);
}
.pcard .name { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Helvetica Neue", "PingFang SC", sans-serif; font-size: 32px; line-height: 1.05; letter-spacing: .5px; text-shadow: 3px 3px 0 var(--magenta); }
.pcard .name small { font-size: 22px; opacity: .95; color: var(--pink); text-shadow: none; }
.pcard .meta { font-size: 12.5px; opacity: .92; margin: 4px 0 9px; letter-spacing: .5px; }
.pcard .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pcard .tags span { font-size: 12px; padding: 2px 8px; background: var(--paper2); color: var(--ink); transform: rotate(-2deg); box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.pcard .tags span:nth-child(2n) { background: var(--pink); transform: rotate(2deg); }
.pcard .tags span:nth-child(3n) { background: var(--teal); transform: rotate(-1deg); }
.pcard .bio { font-family: "Didot", "Bodoni 72", "Bodoni MT", Georgia, "Songti TC", "Songti SC", serif; font-style: italic; font-size: 15px; opacity: .96; }
.pcard .stamp { position: absolute; top: 30px; opacity: 0; pointer-events: none; }
.pcard .stamp.like { left: 18px; transform: rotate(-12deg); text-align: center; color: var(--magenta); }
.pcard .stamp.like .kiss { width: 120px; height: 76px; color: #ff2f86; filter: drop-shadow(0 0 1px rgba(255,255,255,.6)); }
.pcard .stamp.like b { display: block; font-family: Impact, sans-serif; font-size: 18px; letter-spacing: 3px; color: #fff; background: var(--magenta); padding: 1px 8px; margin-top: -6px; }
.pcard .stamp.nope { right: 18px; transform: rotate(10deg); font-family: Impact, sans-serif; font-size: 42px; color: var(--paper2); border: 4px solid var(--paper2); padding: 0 12px; letter-spacing: 2px; background: rgba(43,10,30,.35); }
.pcard .fav-mark { position: absolute; top: 12px; right: 12px; font-size: 22px; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.4)); }
.actions { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 18px 0 6px; }
.round {
  width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper2); cursor: pointer; color: var(--ink);
  display: grid; place-items: center; font-size: 24px; box-shadow: var(--shade); transition: transform .08s, box-shadow .08s; font-weight: 800;
}
.round.sm { width: 46px; height: 46px; font-size: 18px; box-shadow: 3px 3px 0 var(--ink); }
.round.like { background: var(--magenta); color: var(--paper2); }
.round:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
:root[data-theme="dark"] .round { border-color: #000; }

/* ---------- 生成動畫 ---------- */
.gen {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(var(--dot) 1.4px, transparent 1.9px) 0 0 / 9px 9px, var(--paper2);
  border: 2px dashed var(--ink);
}
.gen .stars { position: absolute; inset: -20%; pointer-events: none; }
.gen .stars span { position: absolute; font-size: 120px; line-height: 1; color: var(--magenta); filter: blur(7px); opacity: .55; animation: drift 7s ease-in-out infinite; }
.gen .stars span:nth-child(2) { color: var(--pink); font-size: 170px; animation-duration: 9s; animation-delay: -3s; }
.gen .stars span:nth-child(3) { color: var(--plum); font-size: 90px; animation-duration: 6s; animation-delay: -1s; opacity: .4; }
.gen .stars span:nth-child(4) { color: #fff; font-size: 150px; animation-duration: 8s; animation-delay: -5s; opacity: .7; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(30px, -40px) rotate(45deg) scale(1.15); } }
.gen .orb { position: relative; width: 150px; height: 150px; }
.gen .orb b { position: absolute; inset: 25px; border-radius: 42% 58% 51% 49%; background: radial-gradient(var(--plum) 1.6px, transparent 2.2px) 0 0 / 7px 7px, var(--magenta); border: 2px solid var(--ink); animation: spin 5s linear infinite, morph 6s ease-in-out infinite; box-shadow: 6px 6px 0 var(--ink); }
.gen .orb i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; color: var(--magenta); font-style: normal; font-size: 16px; line-height: 14px; text-align: center; animation: orbit 3.2s linear infinite; }
.gen .orb i::before { content: "✦"; }
.gen .orb i:nth-child(3) { animation-duration: 4.4s; animation-direction: reverse; color: var(--teal); }
.gen .orb i:nth-child(4) { animation-duration: 2.6s; color: var(--ink); font-size: 11px; }
.gen .orb i:nth-child(5) { animation-duration: 5.2s; animation-direction: reverse; color: var(--pink); }
@keyframes orbit { from { transform: rotate(0deg) translateX(72px) rotate(0deg); } to { transform: rotate(360deg) translateX(72px) rotate(-360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes morph { 50% { border-radius: 58% 42% 40% 60%; inset: 18px; } }
.gen .outline { position: absolute; inset: 18px; border-radius: 4px; border: 2px solid transparent; transition: all 1.2s; }
.gen.s4 .outline { border-color: var(--magenta); box-shadow: 7px 7px 0 var(--ink); background: rgba(255,255,255,.15); }
.gen.s4 .orb b { animation-duration: 1.2s, 2s; }
.gen .stage { position: relative; margin-top: 24px; font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "PingFang SC", sans-serif; font-size: 22px; letter-spacing: 3px; color: var(--paper2); background: var(--ink); padding: 3px 14px; transform: rotate(-2deg); animation: pulse 1.6s ease-in-out infinite; }
.gen .sub { position: relative; margin-top: 10px; font-size: 13px; color: var(--plum); font-family: "Didot", "Bodoni 72", Georgia, serif; font-style: italic; }
.gen .steps { position: relative; display: flex; gap: 6px; margin-top: 14px; }
.gen .steps span { width: 26px; height: 6px; background: var(--paper); border: 1.5px solid var(--ink); }
.gen .steps span.on { background: var(--magenta); }
@keyframes pulse { 50% { opacity: .55; } }
.reveal { animation: reveal .9s cubic-bezier(.2,.8,.2,1); }
@keyframes reveal { from { opacity: 0; transform: rotate(-4deg) scale(.9); filter: blur(10px) contrast(1.6); } to { opacity: 1; transform: none; filter: none; } }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); position: relative; }
.empty .big { font-size: 50px; margin-bottom: 10px; }

/* ---------- 聊天 ---------- */
.chat-page { display: flex; flex-direction: column; height: 100%; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 12px 12px 6px; }
.msg { display: flex; margin: 4px 0; gap: 8px; align-items: flex-end; }
.msg.me { justify-content: flex-end; }
.msg .bub { max-width: 76%; padding: 8px 13px; border-radius: 16px; word-break: break-word; white-space: pre-wrap; position: relative; border: 1.5px solid var(--ink); }
.msg.them .bub { background: var(--bubble-them); border-bottom-left-radius: 3px; box-shadow: 2px 2px 0 var(--line); }
.msg.me .bub { background: var(--bubble-me); color: var(--bubble-me-text); border-bottom-right-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
:root[data-theme="dark"] .msg .bub { border-color: rgba(255,170,205,.35); }
.msg .bub.photo { padding: 4px; max-width: 64%; background: var(--paper2); transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink); }
.msg .bub.photo img { border-radius: 2px; width: 100%; cursor: zoom-in; }
.msg .bub.photo .ph { padding: 18px 14px; font-size: 13px; text-align: center; color: var(--muted); }
.msg .tiny { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: var(--blush); border: 1.5px solid var(--ink); }
.msg .tiny.ghost { visibility: hidden; }
.ts { text-align: center; font-size: 11px; color: var(--muted); margin: 14px 0 6px; letter-spacing: 1px; }
.sys { text-align: center; font-size: 12px; color: var(--ink); margin: 12px auto; padding: 4px 12px; background: var(--blush); width: fit-content; max-width: 86%; transform: rotate(-1deg); box-shadow: 2px 2px 0 var(--ink); }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px !important; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .25; } }
.composer { flex: none; padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); background: var(--tab-bg); border-top: 2px solid var(--ink); }
.composer .topics { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; }
.composer .topics .chip { flex: none; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--paper2); }
.composer .bar { display: flex; gap: 6px; align-items: flex-end; }
.composer textarea { flex: 1; border: 1.5px solid var(--ink); border-radius: 18px; padding: 9px 14px; background: var(--paper2); resize: none; max-height: 120px; min-height: 40px; outline: none; }
.composer .round { width: 40px; height: 40px; font-size: 16px; flex: none; box-shadow: 2px 2px 0 var(--ink); }
.chat-head { display: flex; align-items: center; gap: 8px; justify-content: center; min-width: 0; cursor: pointer; }
.chat-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); }
.chat-head div { min-width: 0; text-align: left; }
.chat-head b { display: block; font-size: 15px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 線下 ---------- */
.story { padding: 16px 18px; }
.story .para { margin: 0 0 18px; line-height: 1.95; white-space: pre-wrap; font-size: 15.5px; }
.story .para.me { padding: 10px 14px; border-left: 4px solid var(--magenta); background: var(--paper2); font-size: 14px; }
:root[data-theme="sepia"] .story .para { font-size: 16.5px; }
.offline-banner { margin: 14px 16px 0; padding: 10px 14px; background: var(--ink); color: var(--paper2); font-size: 13px; text-align: center; transform: rotate(-1deg); box-shadow: 4px 4px 0 var(--magenta); }
.offline-banner small { color: var(--pink) !important; }

/* ---------- 詳情 ---------- */
.hero { position: relative; border-radius: 6px; overflow: hidden; border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--magenta); margin: 4px 6px 18px 0; aspect-ratio: 3/4; background: var(--blush); }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 16px 14px; color: #fff7fb; background: linear-gradient(180deg, transparent, rgba(30,5,20,.92)); }
.hero .info .display { font-size: 30px; text-shadow: 3px 3px 0 var(--magenta); }
.md { font-size: 14px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.md.blur { filter: blur(6px); user-select: none; cursor: pointer; }
.status-pill { display: inline-block; font-size: 12px; padding: 2px 9px; background: var(--paper2); border: 1.5px solid var(--ink); transform: rotate(-1deg); margin: 0 4px 4px 0; }

/* ---------- 角色卡網格 ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
.gcard { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 3/4; background: var(--blush); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; }
.gcard:nth-child(odd) { transform: rotate(-1.2deg); }
.gcard:nth-child(even) { transform: rotate(1deg); box-shadow: 4px 4px 0 var(--magenta); }
.gcard img { width: 100%; height: 100%; object-fit: cover; }
.gcard .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px; color: #fff; background: linear-gradient(180deg, transparent, rgba(30,5,20,.88)); font-size: 12px; }
.gcard .cap b { display: block; font-size: 16px; font-family: Impact, "Arial Narrow Bold", "PingFang SC", sans-serif; letter-spacing: .5px; }
.gcard .fv { position: absolute; top: 8px; right: 8px; }

/* ---------- 覆蓋層 ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(43,10,30,.45); animation: fade .2s; }
.overlay.center { align-items: center; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 480px; background: var(--paper2); border-top: 2px solid var(--ink); border-radius: 14px 14px 0 0; padding: 10px 14px calc(env(safe-area-inset-bottom) + 14px); animation: up .25s cubic-bezier(.2,.8,.2,1); max-height: 85vh; overflow-y: auto; }
@keyframes up { from { transform: translateY(100%); } }
.sheet .grab { width: 40px; height: 4px; background: var(--ink); margin: 0 auto 10px; opacity: .4; }
.sheet h3 { margin: 4px 4px 10px; font-size: 16px; }
.sheet .opt { display: block; width: 100%; text-align: left; padding: 13px 12px; border: 0; background: none; border-bottom: 1px dashed var(--line); cursor: pointer; font-size: 15px; }
.sheet .opt:last-child { border-bottom: 0; }
.sheet .opt.danger { color: #d0213f; }
.modal { width: calc(100% - 40px); max-width: 380px; background: var(--paper2); border: 2px solid var(--ink); border-radius: 6px; padding: 20px; box-shadow: 6px 6px 0 var(--magenta); animation: pop .25s; }
@keyframes pop { from { transform: scale(.9) rotate(-3deg); opacity: 0; } }

.match {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--paper2); overflow: hidden;
  background: radial-gradient(rgba(43,10,30,.35) 1.6px, transparent 2.2px) 0 0 / 9px 9px, var(--magenta);
}
.match .small-cap { font-family: "Didot", "Bodoni 72", Georgia, serif; font-style: italic; font-size: 22px; margin-bottom: 8px; }
.match .cut { font-size: 52px; animation: pop .6s; }
.match .pair { display: flex; margin: 28px 0; position: relative; z-index: 1; }
.match .pair img, .match .pair .ph { width: 116px; height: 140px; object-fit: cover; border: 5px solid var(--paper2); box-shadow: 5px 5px 0 var(--ink); background: var(--blush); display: grid; place-items: center; font-size: 40px; }
.match .pair > :first-child { transform: rotate(-8deg) translateX(10px); }
.match .pair > :last-child { transform: rotate(7deg) translateX(-10px); }
.match .btn { position: relative; z-index: 1; }
.match .kisses .kiss { color: var(--ink); opacity: .35; }

.toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 62px); transform: translateX(-50%) rotate(-1deg); z-index: 80; background: var(--ink); color: var(--paper2); padding: 9px 16px; font-size: 13px; max-width: 86vw; box-shadow: 4px 4px 0 var(--magenta); animation: fade .2s; white-space: pre-wrap; }
.banner {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); transform: translateX(-50%); z-index: 90; width: calc(100% - 20px); max-width: 460px;
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer;
  background: var(--paper2); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--magenta); animation: drop .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes drop { from { transform: translate(-50%, -130%); } }
.banner img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); }
.banner div { min-width: 0; flex: 1; }
.banner b { display: block; font-size: 14px; }
.banner small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 占卜 ---------- */
.draw { display: flex; justify-content: center; gap: 12px; margin: 22px 0; perspective: 800px; }
.tcard { width: 92px; height: 148px; position: relative; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.tcard.flip { transform: rotateY(180deg); }
.tcard > div { position: absolute; inset: 0; border-radius: 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 6px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.tcard .bk { background: radial-gradient(var(--plum) 1.4px, transparent 1.9px) 0 0 / 6px 6px, var(--magenta); color: var(--paper2); font-size: 28px; }
.tcard .fr { transform: rotateY(180deg); background: var(--paper2); font-weight: 900; color: var(--magenta); font-size: 17px; }
.tcard .fr small { font-weight: 500; font-size: 11px; color: var(--muted); margin-top: 6px; }
.dice { display: flex; justify-content: center; gap: 12px; margin: 22px 0; }
.die { width: 96px; min-height: 96px; border-radius: 10px; background: var(--paper2); border: 2px solid var(--ink); display: grid; place-items: center; text-align: center; padding: 8px; font-weight: 900; color: var(--magenta); box-shadow: 4px 4px 0 var(--ink); font-size: 14px; }
.die.roll { animation: roll .7s ease-out; }
@keyframes roll { 0% { transform: rotate(0) scale(.6); } 60% { transform: rotate(400deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }

/* ---------- 歡迎頁 ---------- */
.welcome { position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; overflow: hidden; }
.welcome .cut { font-size: 62px; position: relative; z-index: 1; }
.welcome .mimi { position: relative; z-index: 1; font-family: "Didot", "Bodoni 72", Georgia, serif; font-style: italic; color: var(--plum); font-size: 22px; letter-spacing: 4px; margin: 18px 0 22px; }
.welcome p, .welcome .btn { position: relative; z-index: 1; }
.welcome .blob { position: absolute; width: 320px; height: 320px; right: -110px; top: -60px; border-radius: 50%; background: radial-gradient(var(--magenta) 2px, transparent 2.6px) 0 0 / 10px 10px; opacity: .45; transform: rotate(12deg); }
.welcome .blob.b2 { left: -140px; right: auto; top: auto; bottom: -90px; width: 300px; height: 300px; background: radial-gradient(var(--teal) 2px, transparent 2.6px) 0 0 / 10px 10px; }
.welcome .stars span { position: absolute; color: var(--magenta); font-size: 90px; filter: blur(5px); opacity: .45; animation: drift 9s ease-in-out infinite; }
.progress { display: flex; gap: 6px; justify-content: center; margin: 4px 0 16px; }
.progress span { width: 24px; height: 6px; border: 1.5px solid var(--ink); background: var(--paper2); }
.progress span.on { background: var(--magenta); }

.stat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.stat > div { background: var(--paper2); border: 1.5px solid var(--ink); border-radius: 4px; padding: 12px; box-shadow: 3px 3px 0 var(--ink); }
.stat > div:nth-child(2n) { box-shadow: 3px 3px 0 var(--magenta); }
.stat small { display: block; color: var(--muted); font-size: 12px; }
.stat b { font-size: 22px; font-family: Impact, "Arial Narrow Bold", sans-serif; letter-spacing: .5px; font-weight: 400; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th, table.t td { padding: 8px 6px; border-bottom: 1px dashed var(--line); text-align: right; }
table.t th:first-child, table.t td:first-child { text-align: left; }
table.t th { color: var(--muted); font-weight: 500; font-size: 12px; }
.img-full { position: fixed; inset: 0; z-index: 70; background: rgba(20,4,12,.94); display: grid; place-items: center; }
.img-full img { max-width: 100%; max-height: 100%; }

/* ---------- 修正 ---------- */
.ava.noimg { width: 52px; height: 52px; font-size: 22px; }
.ava.sm.noimg { width: 36px; height: 36px; font-size: 16px; }
.pcard .tags span { background: #fbf6ef; color: #2b0a1e; }
.pcard .tags span:nth-child(2n) { background: #ff86ba; color: #2b0a1e; }
.pcard .tags span:nth-child(3n) { background: #8dbbb4; color: #2b0a1e; }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .round { border-color: rgba(255,170,205,.55); box-shadow: 4px 4px 0 #000; }
:root[data-theme="dark"] .btn.small, :root[data-theme="dark"] .composer .round { box-shadow: 2px 2px 0 #000; }
:root[data-theme="dark"] .round { background: #3a1529; }
:root[data-theme="dark"] .round.like { background: var(--magenta); }
:root[data-theme="dark"] .btn.silver { background: #3a1529; color: #fbe6ef; }
:root[data-theme="dark"] .chip { border-color: rgba(255,170,205,.45); }