:root {
  color-scheme: light;
  --ink: #2a1d17;
  --muted: #725f52;
  --paper: #fffdf8;
  --paper-warm: #f7f0e5;
  --line: #dccbb8;
  --brown: #4a2b18;
  --brown-2: #6b4226;
  --gold: #c49032;
  --gold-light: #f2dfad;
  --green: #2d6b4e;
  --red: #a43e34;
  --shadow: 0 20px 60px rgba(62, 38, 24, .12);
  --recitation-size: 42px;
  font-family: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #efe6d8; }
body { margin: 0; min-height: 100%; color: var(--ink); background: radial-gradient(circle at 20% 0%, #fffaf0 0, #f1e7d9 48%, #e8dccb 100%); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; background: white; color: var(--brown); border-radius: 8px; }
.skip-link:focus { top: 12px; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(520px, 100%); padding: clamp(28px, 5vw, 52px); background: rgba(255, 253, 248, .97); border: 1px solid rgba(133, 92, 50, .24); border-radius: 24px; box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 8px; color: var(--brown-2); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.login-card h1, .site-header h1 { margin: 0; font-weight: 800; letter-spacing: .04em; }
.login-card h1 { font-size: clamp(30px, 7vw, 44px); }
.login-lead { margin: 18px 0 26px; color: var(--muted); line-height: 1.8; }
.login-card form { display: grid; gap: 10px; }
.login-card label, .search-form label, .recitation-filter label, .form-grid label { font-weight: 800; }
.login-card input, .search-row input, .recitation-filter input, .form-grid input, .form-grid textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); padding: 12px 14px; outline: none;
}
.login-card input:focus, .search-row input:focus, .recitation-filter input:focus, .form-grid input:focus, .form-grid textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196, 144, 50, .17); }
.privacy-note { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 16px 0 0; }
.setup-warning { margin: 0 0 20px; padding: 12px 14px; border-radius: 12px; background: #fff0d4; color: #6d4614; line-height: 1.6; }

.button { border: 1px solid transparent; border-radius: 12px; padding: 11px 16px; min-height: 44px; color: var(--ink); background: white; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: .62; transform: none; }
.button.primary { background: var(--brown); color: white; box-shadow: 0 7px 18px rgba(74, 43, 24, .2); }
.button.primary:hover { background: #5b3420; }
.button.secondary { border-color: var(--line); background: #fffaf1; }
.button.ghost { border-color: rgba(255,255,255,.34); color: white; background: rgba(255,255,255,.08); }
.button.wide { width: 100%; margin-top: 8px; }
.button.large { min-width: 150px; font-size: 18px; }
.status-line { min-height: 24px; margin: 12px 0 0; color: var(--green); font-weight: 700; }
.status-line.error { color: var(--red); }

.app-shell { min-height: 100vh; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px clamp(18px, 4vw, 56px); color: white; background: linear-gradient(120deg, #3b2317, #684126); box-shadow: 0 5px 22px rgba(52, 31, 20, .22); }
.site-header .eyebrow { color: var(--gold-light); }
.site-header h1 { font-size: clamp(26px, 4vw, 38px); }
.sync-meta { margin: 7px 0 0; color: #eadfce; font-size: 14px; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.operator-badge { padding: 9px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: 13px; background: rgba(0,0,0,.14); }

.mode-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; padding: 12px clamp(18px, 4vw, 56px); background: rgba(255, 253, 248, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.mode-tab { border: 0; border-radius: 999px; padding: 10px 20px; color: var(--brown); background: transparent; font-weight: 800; }
.mode-tab.active { color: white; background: var(--brown); }
main { width: min(1380px, 100%); margin: 0 auto; padding: 24px clamp(16px, 3vw, 36px) 44px; }

.toolbar-card, .recitation-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.94); box-shadow: 0 8px 30px rgba(74,43,24,.07); }
.search-form { flex: 1; }
.search-form label, .recitation-filter label { display: block; margin: 0 0 8px; }
.search-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px; }
.toolbar-actions, .recitation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.result-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 24px 4px 12px; }
.result-heading h2 { margin: 0; font-size: 24px; }
.result-heading p { margin: 0; color: var(--muted); }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; }
.record-card { position: relative; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 6px 20px rgba(74,43,24,.06); }
.record-number { display: inline-block; margin: 0 0 10px; padding: 5px 9px; border-radius: 999px; color: var(--brown); background: var(--gold-light); font-size: 13px; font-weight: 900; }
.record-card h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.55; overflow-wrap: anywhere; }
.record-card dl { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.record-card dt { color: var(--muted); font-weight: 800; }
.record-card dd { margin: 0; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.record-card dd.blank { color: #a69587; }
.record-actions { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid #eadfce; }
.empty-state { grid-column: 1 / -1; padding: 54px 22px; text-align: center; border: 1px dashed #ccb99f; border-radius: 18px; color: var(--muted); background: rgba(255,255,255,.5); }

.recitation-toolbar { align-items: end; }
.recitation-filter { flex: 1; }
.ceremony-planner { padding: 24px; margin-bottom: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.ceremony-planner h2 { margin-top: 0; }
.ceremony-title-label { display: grid; gap: 8px; font-weight: 800; }
.ceremony-title-label input { padding: 12px; border: 1px solid var(--line); border-radius: 10px; width: 100%; background: white; }
.ceremony-note { color: var(--muted); line-height: 1.7; }
.ceremony-candidates { max-height: 300px; overflow: auto; }
.ceremony-candidate { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ceremony-candidate span { min-width: 0; overflow-wrap: anywhere; }
.ceremony-candidate button { flex-shrink: 0; }
.ceremony-selection { margin: 18px 0; padding-top: 18px; border-top: 2px solid var(--line); }
.ceremony-selection summary { font-weight: 800; cursor: pointer; }
.ceremony-selection ol { padding-left: 26px; max-height: 330px; overflow: auto; }
.ceremony-selection li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ceremony-selection li div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ceremony-selection .button { min-height: 32px; padding: 5px 10px; font-size: 14px; }
.ceremony-planner-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.recitation-stage { width: min(794px, 100%, calc((100dvh - 160px) * 210 / 297)); margin: 24px auto 18px; outline: none; scroll-margin-top: 80px; }
.recitation-stage:focus-visible { box-shadow: 0 0 0 4px rgba(196,144,50,.28), var(--shadow); }
.recitation-sheet { width: 100%; aspect-ratio: 210 / 297; padding: 24px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; border: 1px solid #d2b882; background: var(--paper); box-shadow: var(--shadow); }
.recitation-sheet-header { text-align: center; padding-bottom: 18px; border-bottom: 2px solid var(--brown); }
.recitation-sheet-header h2 { margin: 0; font-size: 26px; letter-spacing: .08em; }
.recitation-sheet-header p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.recitation-page-content { min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; column-gap: 20px; }
.recitation-household { min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.recitation-household:last-child { border-bottom: 0; }
.recitation-position { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 14px; font-weight: 800; }
.recitation-serial { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 800; }
.recitation-names { display: flex; flex-wrap: wrap; align-items: center; gap: 2px .5em; font-size: var(--recitation-size); font-weight: 900; line-height: 1.35; letter-spacing: .04em; }
.recitation-name { max-width: 100%; overflow-wrap: anywhere; }
.recitation-wish { margin: 4px 0 0; color: var(--brown-2); font-size: 16px; line-height: 1.4; font-weight: 800; overflow-wrap: anywhere; }
.recitation-help { margin: 14px 0; text-align: center; color: var(--muted); font-size: 14px; }
.recitation-navigation { position: sticky; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 12px; background: rgba(255,253,248,.96); border-top: 1px solid var(--line); }
#exitReadingButton { display: none; }

.record-dialog { width: min(760px, calc(100% - 24px)); max-height: calc(100vh - 36px); padding: 0; border: 0; border-radius: 20px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 90px rgba(31,18,10,.32); }
.record-dialog::backdrop { background: rgba(37,24,17,.66); backdrop-filter: blur(3px); }
.record-dialog form { padding: 24px; overflow: auto; }
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dialog-header h2 { margin: 0; }
.icon-button { width: 42px; height: 42px; border: 0; border-radius: 50%; color: var(--brown); background: var(--paper-warm); font-size: 28px; line-height: 1; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid label { display: grid; gap: 7px; }
.form-grid .span-two { grid-column: 1 / -1; }
.form-grid textarea { resize: vertical; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.site-footer { padding: 20px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); background: rgba(255,253,248,.8); }
.site-footer p { margin: 0; }
.recitation-print-area { display: none; }

body.recitation-fullscreen .site-header,
body.recitation-fullscreen .mode-tabs,
body.recitation-fullscreen .recitation-toolbar,
body.recitation-fullscreen .ceremony-planner,
body.recitation-fullscreen .recitation-help,
body.recitation-fullscreen .site-footer { display: none; }
body.recitation-fullscreen main { width: 100%; max-width: none; padding: 14px 16px 0; }
body.recitation-fullscreen .recitation-stage { width: min(794px, 100%, calc((100dvh - 100px) * 210 / 297)); margin-top: 0; scroll-margin-top: 14px; }
body.recitation-fullscreen #exitReadingButton { display: inline-block; }

@media (max-width: 760px) {
  .site-header, .toolbar-card, .recitation-toolbar, .result-heading { align-items: stretch; flex-direction: column; }
  .header-actions { justify-content: flex-start; }
  .search-row { grid-template-columns: 1fr 1fr; }
  .search-row input { grid-column: 1 / -1; }
  .toolbar-actions .button, .recitation-actions .button { flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-two { grid-column: auto; }
  .recitation-sheet { gap: 10px; }
  .recitation-sheet-header { padding-bottom: 10px; }
  .recitation-sheet-header h2 { font-size: 20px; }
  .recitation-household { padding: 10px 0; }
  .recitation-navigation .button.large { min-width: 110px; }
}
@media (max-width: 480px) {
  .recitation-page-content { grid-template-columns: 1fr; }
  .ceremony-planner { padding: 16px; }
}

@media print {
  @page { size: A4 portrait; margin: 0; }
  body { background: white; }
  body.print-recitation > *:not(.recitation-print-area) { display: none !important; }
  body.print-recitation .recitation-print-area { display: block !important; }
  .recitation-print-area .recitation-sheet { width: 210mm; height: 297mm; aspect-ratio: auto; padding: 12mm; border: 0; box-shadow: none; break-after: page; }
  .recitation-print-area .recitation-sheet:last-child { break-after: auto; }
  .recitation-print-area .recitation-page-content { overflow: visible; }
  .recitation-print-area .recitation-page-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(.print-recitation) .site-header,
  body:not(.print-recitation) .mode-tabs,
  body:not(.print-recitation) .toolbar-card,
  body:not(.print-recitation) .result-heading p,
  body:not(.print-recitation) .record-actions,
  body:not(.print-recitation) .site-footer { display: none !important; }
  body:not(.print-recitation) main { width: 100%; padding: 13mm; }
  body:not(.print-recitation) .record-grid { display: block; }
  body:not(.print-recitation) .record-card { box-shadow: none; page-break-inside: avoid; margin-bottom: 8mm; }
}