:root {
  --bg: #fdf7fb; --surface: #fff; --fg: #2a2140; --muted: #786f8f; --line: #ecdff0;
  --accent: #e0479e; --accent-fg: #fff; --accent2: #6d5bd0; --drop: #fdeaf5;
  --glow: radial-gradient(1200px 400px at 80% -10%, #ffd6ec 0%, transparent 60%),
          radial-gradient(900px 400px at 0% 0%, #e2dcff 0%, transparent 55%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15121f; --surface: #1f1a2e; --fg: #efeaff; --muted: #a59cbf; --line: #352d4a;
    --accent: #ff6fbf; --accent-fg: #1a0d16; --accent2: #a497ff; --drop: #2c1f3a;
    --glow: radial-gradient(1200px 400px at 80% -10%, #4a1d3b 0%, transparent 60%),
            radial-gradient(900px 400px at 0% 0%, #2b2357 0%, transparent 55%);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--glow), var(--bg); background-repeat: no-repeat; color: var(--fg);
  font: 15px/1.7 "M PLUS Rounded 1c", system-ui, -apple-system, "Noto Sans TC", "Hiragino Sans", sans-serif;
}
a { color: var(--accent2); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 24px; padding-bottom: 64px; min-height: 70vh; }

.top { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }
.top-in { display: flex; align-items: center; gap: 16px; height: 56px; }
.logo { font-weight: 800; font-size: 20px; color: var(--fg); text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.logo b { color: var(--accent); }
.logo-mark { color: var(--accent2); margin-right: 4px; }
.nav { display: flex; gap: 14px; flex: 1; }
.nav a { color: var(--fg); text-decoration: none; font-weight: 700; font-size: 14px; }
.nav a:hover { color: var(--accent); }
.langs { display: flex; gap: 2px; font-size: 13px; }
.langs a { padding: 2px 8px; border-radius: 999px; color: var(--muted); text-decoration: none; }
.langs a[aria-current] { background: var(--accent); color: var(--accent-fg); }
@media (max-width: 560px) {
  .top-in { flex-wrap: wrap; height: auto; padding: 8px 16px; gap: 6px 14px; }
  .nav { order: 3; flex-basis: 100%; }
}

.hero { padding: 40px 0 20px; }
.eyebrow { color: var(--accent); font-weight: 800; letter-spacing: .08em; margin: 0; font-size: 13px; }
h1 { font-size: clamp(24px, 5vw, 36px); line-height: 1.3; margin: 4px 0 8px; font-weight: 800; }
.lead { color: var(--muted); margin: 0 0 24px; max-width: 46em; }
.sec { font-size: 18px; margin: 32px 0 12px; display: flex; align-items: center; gap: 8px; }
.sec::before { content: "✦"; color: var(--accent); }
.muted { color: var(--muted); }
.crumb { font-size: 13px; color: var(--muted); margin: 0; }
.crumb a { color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card {
  display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: var(--fg); transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 45%, transparent); }
.card-icon { font-size: 28px; }
.card span:last-child { color: var(--muted); font-size: 13.5px; }

.prose { margin-top: 40px; max-width: 46em; }
.prose h2 { font-size: 18px; margin: 28px 0 8px; }
.prose li { margin: 4px 0; }

.foot { border-top: 1px solid var(--line); padding: 20px 0 32px; font-size: 13px; color: var(--muted); }
.foot .wrap { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--muted); }

/* 工具共用 */
.drop {
  display: block; border: 2px dashed var(--line); border-radius: 18px; background: var(--surface);
  padding: 36px 16px; text-align: center; cursor: pointer; transition: background .15s, border-color .15s;
}
.drop.over { background: var(--drop); border-color: var(--accent); }
.drop strong { display: block; font-size: 17px; }
.drop span { color: var(--muted); font-size: 13px; }
.drop input { display: none; }
.opts { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 18px 0; align-items: center; }
.opts fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.opts legend { float: left; margin-right: 8px; font-size: 13px; color: var(--muted); }
.opts label { border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; cursor: pointer; background: var(--surface); font-size: 14px; }
.opts input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.opts input[type=radio]:checked + span { color: var(--accent); font-weight: 700; }
.opts label:has(input:checked) { border-color: var(--accent); }
.opts input[type=radio]:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.opts input[type=color] { width: 32px; height: 26px; border: 1px solid var(--line); border-radius: 6px; padding: 0; background: none; }
.bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
button { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 8px 18px; cursor: pointer; background: var(--accent); color: var(--accent-fg); }
button.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
button:disabled { opacity: .45; cursor: default; }
.status { color: var(--muted); font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: repeating-conic-gradient(#8881 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.tile .meta { padding: 8px 10px; font-size: 12.5px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.tile .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile a { color: var(--accent); white-space: nowrap; }
.tile .err { padding: 10px; font-size: 13px; color: #c2410c; }
.note { margin-top: 20px; font-size: 13px; color: var(--muted); }

/* 表單欄位 */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
textarea {
  font: inherit; font-size: 15px; color: var(--fg); background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; width: 100%; resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.check { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; font-size: 14px; }
.opts input[type=range] { accent-color: var(--accent); }

/* QR */
.qr-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.qr-box { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; place-items: center; min-height: 300px; }
.qr-box canvas, .qr-box img { width: 100%; max-width: 264px; height: auto; image-rendering: pixelated; }
.qr-box canvas { display: none !important; }
@media (max-width: 680px) { .qr-wrap { grid-template-columns: 1fr; } }

/* 字數 */
.bigtext { min-height: 220px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; }
.stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.stats b { display: block; font-size: 24px; color: var(--accent); }
.stats span { font-size: 12.5px; color: var(--muted); }

/* 轉盤 */
.wheel-wrap { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 24px; align-items: start; }
.wheel-stage { position: relative; text-align: center; }
.wheel-stage canvas { width: 100%; height: auto; display: block; }
.wheel-pin { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); color: var(--accent); font-size: 30px; z-index: 1; text-shadow: 0 2px 4px #0003; }
.wheel-result { font-size: 22px; font-weight: 800; min-height: 1.6em; margin: 10px 0 0; color: var(--accent); }
@media (max-width: 680px) { .wheel-wrap { grid-template-columns: 1fr; } }

/* 遊戲 */
.hud { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.hud b { color: var(--fg); font-size: 18px; }
.hud button { margin-left: auto; }
.mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 440px; }
.mcard {
  aspect-ratio: 1; border-radius: 16px; padding: 0; font-size: clamp(28px, 9vw, 44px); position: relative;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; transition: background .2s;
}
.mcard .face { display: none; }
.mcard.up { background: var(--surface); border: 2px solid var(--line); }
.mcard.up .face { display: inline; }
.mcard.up .back { display: none; }
.mcard.done { border-color: var(--accent); }
.win { font-size: 20px; font-weight: 800; color: var(--accent); min-height: 1.5em; }
.react {
  width: 100%; max-width: 560px; aspect-ratio: 4 / 3; border-radius: 24px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; font-size: 20px; touch-action: manipulation;
  background: var(--accent2); color: #fff; user-select: none; -webkit-user-select: none;
}
.react span { font-size: 72px; line-height: 1; }
.react[data-s=wait] { background: #3b3263; }
.react[data-s=go] { background: #16a34a; }
.react[data-s=early] { background: #dc2626; }
.stage { max-width: min(480px, 62vh); }
.stage canvas { width: 100%; height: auto; display: block; border-radius: 20px; touch-action: none; cursor: none; }

/* 魔物合成 */
.m2048 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 440px; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--accent2) 18%, var(--surface)); touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.mcell { aspect-ratio: 1; border-radius: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mcell span { font-size: clamp(26px, 8vw, 40px); line-height: 1.1; }
.mcell small { font-size: clamp(9px, 2.4vw, 12px); font-weight: 700; color: #2a2140; }
.mcell.t1 { background: #d9f7d0 } .mcell.t2 { background: #e2dcff } .mcell.t3 { background: #ffe1c2 } .mcell.t4 { background: #d3e6ff }
.mcell.t5 { background: #f0f0f0 } .mcell.t6 { background: #cfe8d8 } .mcell.t7 { background: #ffd0d0 } .mcell.t8 { background: #ffc4e6 }
.mcell.t9 { background: #d8b8ff } .mcell.t10 { background: linear-gradient(135deg, #ffe27a, #ff9ccf) } .mcell.t11 { background: linear-gradient(135deg, #9ed4ff, #d8b8ff, #ff9ccf) }
.mcell.pop { animation: pop .18s ease-out } .mcell.bump { animation: bump .2s ease-out }
@keyframes pop { from { transform: scale(.3) } to { transform: scale(1) } }
@keyframes bump { 50% { transform: scale(1.12) } }

/* 召喚 */
.gacha-out, .gacha-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; min-height: 40px; }
.gcard {
  position: relative; aspect-ratio: 3 / 4; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--el) 55%, #fff), color-mix(in srgb, var(--el) 85%, #000));
  color: #fff; text-align: center; padding: 6px; border: 3px solid #fff8; animation: reveal .45s ease-out both; text-shadow: 0 1px 3px #0007;
}
.gcard b { font-size: 13px; letter-spacing: .05em; }
.gcard span { font-size: 34px; line-height: 1.2; }
.gcard small { font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.gcard i { position: absolute; right: 6px; bottom: 4px; font-size: 11px; font-style: normal; }
.gcard.r-SR { border-color: #cfd8ff; box-shadow: 0 0 12px #a9b8ff; }
.gcard.r-SSR { border-color: #ffe27a; box-shadow: 0 0 18px #ffd54a, 0 0 4px #fff inset; }
.gcard.r-SSR b { color: #fff3a8; }
.gcard.locked { filter: grayscale(1) brightness(.55); }
@keyframes reveal { from { transform: rotateY(90deg) scale(.8); opacity: 0 } to { transform: none; opacity: 1 } }

/* 居合斬 */
.duel {
  width: 100%; max-width: 600px; aspect-ratio: 16 / 10; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(#f6c48b, #c75b5b 70%, #3b2244); color: #fff; touch-action: manipulation; user-select: none; -webkit-user-select: none; padding: 16px;
}
.duel-stage { font-size: 14px; opacity: .85; }
.duel-row { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: clamp(48px, 13vw, 84px); }
.duel-row #me { transform: scaleX(-1); }
.sig { font-size: clamp(48px, 14vw, 96px); font-weight: 800; color: #fff; text-shadow: 0 0 20px #fff; min-width: 1em; }
.duel b { font-size: 17px; min-height: 1.5em; text-shadow: 0 1px 4px #0008; }
.duel[data-s=wait] { background: linear-gradient(#2b2357, #3b2244); }
.duel[data-s=go] { background: linear-gradient(#fff, #ffd0e8); color: #2a2140; }
.duel[data-s=go] .sig { color: #e0479e; }
.duel[data-s=lose] { background: linear-gradient(#5a1d2b, #20101a); }
.duel[data-s=win] { background: linear-gradient(#ffe27a, #ff9ccf); color: #2a2140; }

/* 勇者練功 */
.idle { max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
.idle-top { display: flex; justify-content: space-between; font-size: 17px; }
.idle-foe {
  position: relative; overflow: hidden; border-radius: 22px; padding: 20px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(#3a6b4a, #1f3b2b); color: #fff; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.idle-foe.boss { background: linear-gradient(#5a1d4b, #1f0d2b); box-shadow: 0 0 0 3px #ffd54a inset; }
#foeIcon { font-size: 96px; line-height: 1.1; display: inline-block; }
#foeIcon.shake { animation: shake .15s; }
@keyframes shake { 30% { transform: translateX(-6px) rotate(-6deg) } 60% { transform: translateX(6px) rotate(6deg) } }
.hp { width: 80%; height: 12px; border-radius: 999px; background: #0006; overflow: hidden; }
.hp i { display: block; height: 100%; background: linear-gradient(90deg, #ff6fbf, #ffd54a); transition: width .1s; }
.idle-foe small { font-size: 13px; opacity: .9; }
.idle-foe em { font-style: normal; font-weight: 800; color: #ffd54a; min-height: 1.2em; }
.dmg { position: absolute; pointer-events: none; font-weight: 800; color: #ffe27a; text-shadow: 0 2px 4px #000a; animation: rise .7s ease-out forwards; transform: translate(-50%, -50%); }
@keyframes rise { to { margin-top: -50px; opacity: 0 } }
.idle-ups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.idle-ups button { border-radius: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; }
.idle-ups small { font-weight: 400; font-size: 12px; opacity: .9; }
.idle > .ghost { align-self: flex-start; font-size: 13px; }

/* 連結當按鈕 */
a.btn { display: inline-block; font-weight: 700; border-radius: 999px; padding: 8px 18px; background: var(--accent); color: var(--accent-fg); text-decoration: none; }

/* 轉生診斷 */
.quiz { max-width: 560px; }
.quiz-step { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.quiz-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 18px; }
.quiz-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s; }
.quiz-q { font-size: 20px; margin: 0 0 14px; }
.quiz-a { display: block; width: 100%; text-align: left; margin-bottom: 10px; border-radius: 16px; padding: 14px 18px; background: var(--surface); color: var(--fg); border: 2px solid var(--line); font-weight: 700; }
.quiz-a:hover { border-color: var(--accent); color: var(--accent); }
.quiz-result { text-align: center; border-radius: 24px; padding: 24px 20px; margin-bottom: 16px; color: #fff; background: linear-gradient(135deg, #ff7ac6, #6d5bd0); text-shadow: 0 1px 3px #0005; }
.quiz-result.r0 { background: linear-gradient(135deg, #ffb35c, #e0479e); } .quiz-result.r1 { background: linear-gradient(135deg, #6cc6ff, #6d5bd0); }
.quiz-result.r2 { background: linear-gradient(135deg, #ffe9a8, #ff9ccf); color: #3a2440; text-shadow: none; } .quiz-result.r3 { background: linear-gradient(135deg, #5b6b7a, #2a2140); }
.quiz-result.r4 { background: linear-gradient(135deg, #7a1d4b, #1b0d2b); } .quiz-result.r5 { background: linear-gradient(135deg, #8fe0a0, #3fb6a8); }
.quiz-result h2 { font-size: 34px; margin: 0 0 8px; }
.quiz-result p { margin: 4px 0; }
.quiz-icon { display: block; font-size: 72px; line-height: 1.3; }

/* 魔法陣 */
.circle { position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 50%; margin: 10px 0; background: radial-gradient(circle, #2b2357 0 45%, #1b1440 46% 100%); box-shadow: 0 0 0 3px #b9a4ff55 inset, 0 0 40px #6d5bd055; }
.circle::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed #b9a4ff66; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.circle.fail { animation: shake .4s; }
.rune {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; padding: 0; border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-150%) rotate(calc(-1 * var(--a)));
  background: #3b2f6b; color: #b9a4ff; font-size: clamp(22px, 7vw, 36px); border: 2px solid #b9a4ff66; transition: background .1s, box-shadow .1s, color .1s;
  touch-action: manipulation;
}
.rune.on { background: #ffe27a; color: #2a2140; box-shadow: 0 0 30px #ffe27a, 0 0 60px #ff7ac6; }
.circle-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40%; text-align: center; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; line-height: 1.4; }

/* 工程師工具 */
.io { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .io { grid-template-columns: 1fr; } }
.mono, .code, code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK TC", monospace; font-size: 13.5px; }
.inp { font: inherit; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; }
.inp:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.num { width: 90px; font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.code { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; white-space: pre-wrap; word-break: break-all; min-height: 2.6em; color: var(--fg); }
.hl mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; }
.status.ok { color: #16a34a; } .status.bad { color: #dc2626; }
.kv { border-collapse: collapse; width: 100%; margin-bottom: 12px; }
.kv td { border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: top; word-break: break-all; }
.kv td:first-child { color: var(--muted); white-space: nowrap; width: 1%; font-size: 13px; }
.kv td:last-child:has(button) { width: 1%; }
button.sm { padding: 3px 10px; font-size: 12.5px; }
.bigclock { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; margin-bottom: 16px; }
.bigclock small { color: var(--muted); }
.bigclock b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 28px; color: var(--accent); }
.rx { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.color-top { display: flex; gap: 14px; align-items: end; }
.color-top input[type=color] { width: 64px; height: 64px; border: 0; border-radius: 14px; padding: 0; background: none; margin-bottom: 12px; }
.color-top .field { flex: 1; }
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.swatches div { border-radius: 14px; padding: 18px; font-weight: 800; font-size: 18px; border: 1px solid var(--line); }
.pwlist { display: flex; flex-direction: column; gap: 8px; }
.pw { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.pw code { flex: 1; font-size: 16px; word-break: break-all; }
.diff div { white-space: pre-wrap; padding: 0 6px; border-radius: 4px; }
.diff .add { background: #16a34a26; color: #15803d; }
.diff .del { background: #dc262626; color: #b91c1c; text-decoration: line-through; text-decoration-color: #b91c1c66; }
@media (prefers-color-scheme: dark) { .diff .add { color: #4ade80; } .diff .del { color: #f87171; } }
.card-icon { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; color: var(--accent2); }

/* 排行榜 */
#lb { max-width: 520px; }
.lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.lb-tabs button { padding: 4px 14px; font-size: 13px; }
.lb-tabs button[aria-pressed=true] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.lb-list { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.lb-list li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 14.5px; }
.lb-list li:first-child { border-top: 0; }
.lb-list li.me { background: var(--drop); }
.lb-r { width: 2em; text-align: center; color: var(--muted); font-weight: 700; }
.lb-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-n i { font-style: normal; color: var(--accent2); margin-left: 4px; font-size: 12px; }
.lb-mine { font-size: 13px; margin: 8px 2px; }
.lb-who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.lb-who button { padding: 3px 12px; font-size: 13px; }
.lb-form { margin-top: 12px; padding: 14px; border-radius: 16px; border: 2px solid var(--accent); background: var(--surface); }
.lb-form .lb-msg { margin: 0 0 8px; font-weight: 800; color: var(--accent); }
.lb-form input { font: inherit; font-size: 16px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); width: min(100%, 15em); margin: 0 6px 8px 0; }
.lb-gbtn { margin-top: 4px; min-height: 0; }
.lb-note { font-size: 12px; margin: 8px 0 0; }
.lb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 700; z-index: 50; box-shadow: 0 8px 24px #0004; }

/* 廣告 */
.ad { margin: 28px 0; min-height: 100px; }