/* 自包含視覺 tokens（參考正式站深藍＋金方向，複製為獨立變數，未改正式站源碼） */
:root{
  --bg:#f7f5ef; --card:#ffffff; --ink:#1f2937; --muted:#52625b;
  --brand:#1e3a5f; --brand-ink:#ffffff; --gold:#c9a227; --gold-soft:#f5e9c8;
  --line:#e5e0d2; --err:#b91c1c; --ok:#166534;
  --radius:14px; --max:640px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.65;font-size:16px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}
.hero{background:linear-gradient(180deg,var(--brand),#152a45);color:var(--brand-ink);padding:28px 0 24px;border-bottom:4px solid var(--gold)}
.eyebrow{margin:0;color:var(--gold-soft);letter-spacing:.15em;font-size:13px}
.hero h1{margin:6px 0;font-size:26px;line-height:1.3}
.sub{margin:0;color:#e8e2cf}
.langrow{margin-top:12px;display:flex;gap:8px}
.langbtn{border:1px solid var(--gold);background:transparent;color:#fff;border-radius:999px;padding:6px 14px;font-size:14px}
.langbtn[aria-pressed="true"]{background:var(--gold);color:#222}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:16px 0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.card.fallback{border-color:var(--gold);background:#fffdf4}
h2{margin:0 0 10px;font-size:19px;color:var(--brand)}
.info{display:grid;grid-template-columns:96px 1fr;gap:6px 10px;margin:0}
.info dt{color:var(--muted);font-size:14px}
.info dd{margin:0}
.tbc{color:#8a6d00;background:var(--gold-soft);display:inline-block;padding:0 8px;border-radius:6px}
.note{color:var(--muted);font-size:14px}
.field{margin:12px 0}
label{display:block;font-weight:700;margin-bottom:4px}
.req{color:var(--err);margin-left:4px}
input,textarea,select{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:16px;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:3px solid var(--gold-soft);border-color:var(--brand)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.row{grid-template-columns:1fr}}
.err{color:var(--err);font-size:14px;margin:4px 0 0}
.btn{display:block;width:100%;border:0;border-radius:12px;background:var(--brand);color:#fff;font-size:18px;font-weight:700;padding:13px;margin-top:8px}
.btn[disabled]{opacity:.55}
.btn:not([disabled]):active{transform:translateY(1px)}
button{border:1px solid var(--brand);border-radius:10px;background:#fff;color:var(--brand);padding:8px 14px;font-size:15px}
button[disabled]{opacity:.5}
button:active{transform:translateY(1px)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.done{border:2px solid var(--ok);border-radius:var(--radius);padding:14px;margin-top:14px;background:#f0fdf4}
.done h3{color:var(--ok);margin:0 0 6px}
.confirm dt{font-weight:700;color:var(--brand)}
.confirm dd{margin:0 0 8px}
.foot{color:var(--muted);font-size:13px;padding:8px 16px 32px}
table.admin{width:100%;border-collapse:collapse;font-size:14px}
table.admin th,table.admin td{border:1px solid var(--line);padding:6px;text-align:left;word-break:break-all}
.privacy h2{margin-top:18px}
.privacy .pending{background:var(--gold-soft);border-radius:6px;padding:0 8px}

[hidden]{display:none!important}
input[type="checkbox"]{width:20px;min-height:20px;margin:0 8px 0 0;vertical-align:middle}
.utility-nav{max-width:760px;margin:0 auto;padding:20px 16px;display:flex;gap:20px;flex-wrap:wrap;font:14px system-ui}.utility-nav a{color:#123e39;min-height:44px;display:inline-flex;align-items:center}

/* JOIN2 final accessibility polish */
body:not(.event-page) .langbtn[aria-pressed="false"]{color:#123e39}

.care-details{margin:1rem 0}.care-details summary{cursor:pointer;padding:.75rem 0}.care-details .field{margin-top:1rem}dialog{max-width:min(90vw,680px);border:1px solid #c3cfda;border-radius:12px;padding:24px}dialog::backdrop{background:#0008}.receipt-preview{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.8}.admin select{max-width:180px}

/* Care dashboard: reuse existing layout, readable on mobile. */
.care-summary{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}.care-summary p{margin:.4rem 0}.care-table-scroll{max-width:100%;overflow-x:auto}.care-table-scroll:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Keep the original roster usable on narrow screens as well. */
#out{max-width:100%;overflow-x:auto}

/* Full-width administrative tables; no compressed letter-by-letter columns. */
.admin-page .wrap{max-width:1120px}.admin-page table.admin{min-width:760px}.admin-page table.admin th,.admin-page table.admin td{word-break:normal;overflow-wrap:anywhere}

/* Private self-service uses the existing visual system. */
#reference{overflow-wrap:anywhere}#fields{border:0;padding:0;margin:1rem 0;min-width:0}#fields legend{font-weight:700;color:var(--brand)}#cancelArea{margin-top:1.5rem}#cancelArea summary{cursor:pointer;padding:.75rem 0}#cancel{border-color:var(--err);color:var(--err)}

#video{width:100%;max-width:520px}#passQr{max-width:100%;height:auto}#eventOperations label{display:block;margin-top:1rem}#eventOperations input{max-width:16rem}#passText{width:100%;overflow-wrap:anywhere}

.qr-preview{display:block;width:100%;max-width:640px;margin:1rem 0}.qr-preview[hidden]{display:none}#qrImage{max-width:100%;margin:.6rem 0 1rem}