/* 中文沒有合成粗體可用：要粗就指名實體粗體字型，並把 font-weight 設回 normal，
   全域關掉 font-synthesis 擋瀏覽器自己拉粗筆畫。 */
* { font-synthesis: none; box-sizing: border-box; }

:root {
  --bg: #fbfaf8;
  --card: #ffffff;
  --ink: #1c1a17;
  --muted: #78706a;
  --line: #e6e1da;
  --accent: #b4552d;
  --answered: #6f8f6a;
  font-family: "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}

h1, h2, h3, strong, b, th, .bold {
  font-family: "PingFang TC Semibold", "Noto Sans TC SemiBold", "PingFang TC", sans-serif;
  font-weight: normal;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 42rem; margin: 0 auto; padding: 1.25rem 1rem 5rem; }

header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
header h1 { font-size: 1.15rem; margin: 0; }
header .hint { color: var(--muted); font-size: .85rem; }

/* ---- 發問框 ---- */
.composer { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-top: .5rem; }
.composer textarea {
  width: 100%; min-height: 5.5rem; resize: vertical; padding: .85rem;
  border: 1px solid var(--line); border-radius: .6rem; background: var(--card);
  font: inherit; color: inherit;
}
.composer textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.composer .row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .5rem; }
.counter { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.counter.over { color: var(--accent); }

button {
  font: inherit; padding: .55rem 1.1rem; border-radius: .5rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: .45; cursor: default; }

.flash { color: var(--accent); font-size: .85rem; min-height: 1.2em; margin-top: .35rem; }

/* ---- 問題列表 ---- */
ul.questions { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .65rem; }

li.q {
  background: var(--card); border: 1px solid var(--line); border-radius: .7rem;
  padding: .85rem 1rem; display: grid; gap: .5rem;
}
li.q.answered { background: #f4f6f3; border-color: #dbe4d8; }
li.q .body { white-space: pre-wrap; overflow-wrap: anywhere; }
li.q .meta { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .82rem; }
li.q .tag { color: var(--answered); }

.like {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem;
  border-radius: 999px; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.like.on { border-color: var(--accent); color: var(--accent); }

.empty { color: var(--muted); text-align: center; padding: 3rem 1rem; }

/* ---- 投影頁：距離幾公尺外要看得清楚 ---- */
body.screen { background: #14120f; color: #f6f1e8; }
body.screen .wrap { max-width: 68rem; padding: 2rem 2.5rem; }
body.screen header h1 { font-size: 1.5rem; }
body.screen header .hint { font-size: 1.05rem; color: #9c9288; }
body.screen ul.questions { gap: 1rem; margin-top: 1.5rem; }
body.screen li.q {
  background: #201d18; border-color: #37312a; border-radius: .9rem;
  padding: 1.2rem 1.5rem; font-size: 1.9rem; line-height: 1.5;
}
body.screen li.q.answered { background: #1a1f19; border-color: #2c3a2b; color: #7f8f7c; }
body.screen li.q .meta { font-size: 1.1rem; color: #9c9288; }
body.screen .empty { color: #9c9288; font-size: 1.6rem; padding: 6rem 1rem; }

/* ---- 管理頁 ---- */
.admin-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
li.q .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
li.q .actions button { padding: .35rem .75rem; font-size: .85rem; }
button.danger { color: var(--accent); }

/* ---- 投影頁的 QR code ---- */
.head-right { display: flex; align-items: center; gap: 1rem; }

body.screen #qr-toggle {
  background: #201d18; border-color: #37312a; color: #cfc6ba;
  display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem;
}
body.screen #qr-toggle:hover { border-color: #5a5147; color: #f6f1e8; }

kbd {
  font-family: ui-monospace, "SF Mono", monospace; font-size: .8em;
  border: 1px solid currentColor; border-radius: .25rem;
  padding: 0 .35em; opacity: .7;
}

.qr-overlay {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(10, 9, 7, .96);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  cursor: pointer;
}
.qr-overlay[hidden] { display: none; }

/* QR 要能讓最後一排用手機掃到，所以尺寸吃視窗高度而不是固定像素。 */
.qr-overlay img {
  width: min(58vh, 58vw); height: auto;
  background: #fff; padding: 1.25rem; border-radius: 1rem;
}
.qr-url {
  margin: 0; font-size: clamp(1.5rem, 3.5vh, 2.75rem); color: #f6f1e8;
  font-family: "PingFang TC Semibold", "Noto Sans TC SemiBold", sans-serif; font-weight: normal;
  letter-spacing: .02em;
}
.qr-close { margin: 0; color: #9c9288; font-size: 1rem; }