:root {
  /* Lumen semantic color tokens: monochrome surfaces and neutral brand. */
  --canvas: 0 0% 97%;
  --surface: 0 0% 100%;
  --surface-muted: 0 0% 95%;
  --surface-strong: 0 0% 90%;
  --line: 0 0% 84%;
  --ink: 0 0% 14%;
  --ink-soft: 0 0% 31%;
  --ink-muted: 0 0% 45%;
  --brand: 0 0% 24%;
  --brand-solid: 0 0% 17%;
  --brand-soft: 0 0% 92%;
  --on-brand: 0 0% 100%;
  --accent: 0 0% 56%;
  --success: 151 52% 34%;
  --warning: 38 88% 31%;
  --danger: 0 65% 49%;
  --on-danger: 0 0% 100%;
  --bg: hsl(var(--canvas));
  --card: hsl(var(--surface));
  --fg: hsl(var(--ink));
  --muted: hsl(var(--ink-muted));
  --ok: hsl(var(--success));
  --bad: hsl(var(--danger));
  font-family: "PingFang HK", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }

button {
  font: inherit; color: inherit; cursor: pointer; line-height: 1.25;
  border: 1px solid hsl(var(--line)); background: var(--card); border-radius: 11px; padding: .56em .95em;
  font-weight: 650; touch-action: manipulation;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
button:hover:not(:disabled) { border-color: hsl(var(--brand) / .35); box-shadow: 0 3px 12px hsl(var(--ink) / .08); }
button.primary { background: hsl(var(--brand)); border-color: hsl(var(--brand)); color: hsl(var(--on-brand)); }
button.primary:hover:not(:disabled) { background: hsl(var(--brand-solid)); border-color: hsl(var(--brand-solid)); }
button.danger { color: var(--bad); border-color: hsl(var(--danger) / .28); background: hsl(var(--danger) / .04); }
button.big { font-size: 1.08em; padding: .72em 1.25em; }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid hsl(var(--brand) / .55); outline-offset: 2px;
}
input, textarea, select { font: inherit; color: inherit; padding: .55em .7em; border: 1px solid hsl(var(--line)); border-radius: 9px; background: hsl(var(--surface)); }

.muted { color: var(--muted); }
.ok { color: var(--ok); font-weight: 700; }
.bad { color: var(--bad); font-weight: 700; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2em;
  padding: .15em .5em; border-radius: 8px; background: var(--hc); color: var(--hf); font-weight: 700;
}
.q-text { white-space: pre-wrap; }
.q-img img { display: block; max-width: 100%; max-height: 40vh; margin: 8px auto 0; border-radius: 10px; }
.img-missing { color: var(--bad); font-size: .9em; }
.urgent { color: var(--bad); }

.mode-tag { font-size: .8em; padding: .25em .7em; border-radius: 99px; background: hsl(var(--warning) / .16); color: hsl(var(--warning)); }
.mode-tag.cloud { background: hsl(var(--success) / .12); color: hsl(var(--success)); }

/* 密碼登入 */
.pw-card { background: hsl(var(--surface)); color: var(--fg); border: 1px solid hsl(var(--line)); border-radius: 22px; padding: 28px 30px; width: min(420px, 92vw); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px hsl(var(--ink) / .18); border-top: 5px solid var(--hc, hsl(var(--brand))); }
.pw-card h2 { margin: 0; }
.pw-card input { font-size: 1.2em; padding: .6em .8em; }
.pw-card .pw-msg { margin: 0; min-height: 1.2em; }
.pw-row { display: flex; gap: 10px; justify-content: flex-end; }
.pin-card { align-items: center; text-align: center; width: min(360px, 92vw); }
.pin-dots { display: flex; gap: 18px; margin: 6px 0; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--hc, hsl(var(--brand))); }
.pin-dots i.on { background: var(--hc, hsl(var(--brand))); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; }
.pin-pad button { height: 64px; font-size: 1.6em; font-weight: 700; border-radius: 14px; background: hsl(var(--surface-muted)); border: 1px solid transparent; }
.pin-pad button:active { background: hsl(var(--surface-strong)); }
.pin-pad .pin-back { font-size: 1em; font-weight: 500; }
.shake { animation: pinshake .4s; }
@keyframes pinshake { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

/* 六社畫布格（大屏幕、主控台共用） */
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; min-height: 0; }
.dcell { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--hc); border-radius: 12px; padding: 4px 6px 6px; }
.dname { color: var(--hf); font-weight: 800; padding: 2px 6px; }
.dbox { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.dbox canvas { background: #fff; border-radius: 8px; display: block; }
.dgrid.focus { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.dgrid.focus .dcell:not(.f) { display: none; }