:root {
  --blush: #F5CEC7;
  --rose: #E79796;
  --apricot: #FFC988;
  --peach: #FFB284;
  --sage: #C6C09C;
  --ink: #413838;
  --muted: #766b68;
  --paper: #fffaf7;
  --line: rgba(65, 56, 56, .12);
  font-family: "Noto Sans TC", system-ui, sans-serif;
  color: var(--ink);
  background: #fff9f4;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 12% 5%, rgba(245,206,199,.65), transparent 27rem), #fff9f4; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(231,151,150,.55); outline-offset: 2px; }
.loading-card, .empty { margin: 12vh auto; max-width: 24rem; padding: 2.2rem; text-align: center; border-radius: 28px; background: rgba(255,255,255,.8); box-shadow: 0 16px 44px rgba(91,63,54,.12); }
.flower { color: var(--rose); font-size: 2rem; }
.shell { width: min(1160px, calc(100% - 2rem)); margin: 0 auto; padding: 1rem 0 4rem; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0 1.35rem; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; font-weight: 700; }
.brand-mark { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 18px 18px 7px 18px; background: var(--rose); color: white; box-shadow: 0 8px 16px rgba(231,151,150,.35); }
.admin-area { display: flex; align-items: center; gap: .55rem; }
.identity { color: var(--muted); font-size: .82rem; }
.hero { padding: clamp(1.4rem, 5vw, 3.6rem); border-radius: 32px; background: linear-gradient(130deg, var(--blush), #fffaf7 62%, rgba(255,201,136,.45)); box-shadow: 0 18px 46px rgba(112,76,65,.12); }
.eyebrow { margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .13em; color: #9b6764; font-weight: 700; }
h1, h2, h3 { margin: 0; line-height: 1.35; }
h1 { max-width: 18ch; font-family: "Playfair Display", "Noto Sans TC", serif; font-size: clamp(2rem, 7vw, 4.7rem); letter-spacing: -.04em; }
.hero p { max-width: 42rem; line-height: 1.85; color: var(--muted); }
.button, .subtle-button, .danger-button { min-height: 44px; border: 0; border-radius: 999px; padding: .68rem 1rem; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button { background: var(--ink); color: white; box-shadow: 0 8px 18px rgba(65,56,56,.18); font-weight: 700; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 21px rgba(65,56,56,.22); }
.button.peach { background: #b86745; }
.subtle-button { background: rgba(255,255,255,.72); color: var(--ink); border: 1px solid var(--line); }
.subtle-button:hover, .card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(92,68,58,.12); }
.button:active, .subtle-button:active, .danger-button:active, .card:active { transform: translateY(0) scale(.985); }
.danger-button { color: #a03e3e; background: #fff0ef; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 2.7rem 0 1rem; }
.section-head p { margin: .35rem 0 0; color: var(--muted); }
.meeting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { position: relative; display: block; padding: 1.15rem; border: 1px solid rgba(65,56,56,.08); border-radius: 22px; background: rgba(255,255,255,.84); color: inherit; text-align: left; text-decoration: none; box-shadow: 0 8px 20px rgba(92,68,58,.07); transition: transform .18s ease, box-shadow .18s ease; }
.card h3 { margin: .3rem 0 .55rem; font-size: 1.08rem; }
.card time, .card .status { color: var(--muted); font-size: .82rem; }
.status { display: inline-flex; align-items: center; gap: .28rem; }
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 100%; background: var(--sage); }
.status.draft::before { background: var(--apricot); }
.reader-hero { padding: 1.6rem 0 1rem; }
.reader-hero h1 { max-width: 24ch; font-size: clamp(2.2rem, 5.2vw, 4rem); overflow-wrap: anywhere; }
.reader-meta { display: flex; flex-wrap: wrap; gap: .55rem; color: var(--muted); font-size: .9rem; }
.reader-layout { display: grid; gap: 1rem; }
.content-card, .matrix-card, .editor-card { border: 1px solid transparent; border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 10px 26px rgba(92,68,58,.08); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.content-card p, .content-card li, .editor-card p { line-height: 1.8; }
.content-card ul { padding-left: 1.35rem; }
.action-list { display: grid; gap: .65rem; }
.action-row { padding: .75rem .9rem; border-radius: 14px; background: #fff5ef; }
.action-row strong { color: #a65e55; }
.collapsible-card { overflow: clip; }
.collapsible-card:hover { transform: translateY(-1px); border-color: rgba(231,151,150,.22); box-shadow: 0 14px 30px rgba(92,68,58,.1); }
.collapsible-card[open] { border-color: rgba(231,151,150,.16); }
.card-summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 3vw, 1.35rem); cursor: pointer; color: #8f5b57; font-weight: 700; list-style: none; transition: background .18s ease, color .18s ease; }
.card-summary::-webkit-details-marker { display: none; }
.card-summary::after { content: "⌄"; flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: #fff1eb; color: #9b6764; transition: transform .18s ease, background .18s ease; }
.collapsible-card[open] > .card-summary::after { transform: rotate(180deg); }
.card-summary:hover { background: rgba(255,241,235,.58); }
.card-summary:active { background: rgba(245,206,199,.34); }
.collapsible-body { padding: 0 clamp(1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.6rem); }
.collapsible-body > :first-child { margin-top: 0; }
.transcript-text { white-space: normal; word-break: break-word; }
.matrix-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.matrix-title p { color: var(--muted); margin: .4rem 0 0; }
.matrix-scroll { overflow-x: auto; margin-top: 1rem; padding-bottom: .45rem; }
.matrix { min-width: 780px; width: 100%; border-collapse: separate; border-spacing: 0 .42rem; }
.matrix th, .matrix td { padding: .75rem; background: #fffaf7; text-align: center; }
.matrix thead th { border-radius: 14px; background: #fce4db; color: #7f5150; font-size: .88rem; }
.matrix thead th:first-child { text-align: left; }
.matrix tbody th { min-width: 240px; border-radius: 14px 0 0 14px; text-align: left; font-size: .92rem; }
.matrix tbody td:last-child { border-radius: 0 14px 14px 0; }
.matrix small { display: block; margin-top: .22rem; color: var(--muted); font-weight: 400; }
.matrix-state { display: inline-flex; width: 44px; height: 44px; justify-content: center; align-items: center; border: 0; border-radius: 50%; font-weight: 800; font-size: 1.05rem; transition: transform .18s ease, box-shadow .18s ease; }
.matrix-state.yes { background: #e7f0de; color: #56753d; }
.matrix-state.no { background: #fae3e0; color: #a85652; }
.matrix-state.optional { background: #fff0cf; color: #9a6b28; }
.matrix-state.pending { background: #ece9e6; color: #776f68; }
.matrix-state.editable:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 7px 15px rgba(92,68,58,.13); }
.matrix-state.editable:active { transform: scale(.96); }
.drag-handle { min-width: 44px; min-height: 44px; color: #ae9991; background: none; border: 0; padding: .2rem; cursor: grab; font-size: 1rem; transition: transform .18s ease, color .18s ease; }
.drag-handle:hover { color: #8f5b57; transform: translateY(-1px); }
.drag-handle:active { transform: scale(.94); }
.matrix tr[draggable="true"] { cursor: grab; }
.matrix tr.dragging { opacity: .4; }
.matrix-cards { display: none; gap: .75rem; margin-top: 1rem; }
.matrix-tier { padding: 1rem; border-radius: 18px; background: #fff7f1; }
.matrix-tier h3 { font-size: 1rem; }
.matrix-tier p { margin: .25rem 0 .75rem; color: var(--muted); font-size: .82rem; }
.tier-field { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid rgba(65,56,56,.08); font-size: .9rem; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: 1rem; align-items: start; }
.editor-stack { display: grid; gap: 1rem; }
.editor-card h2 { margin: 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
label { display: grid; gap: .35rem; color: #735b58; font-size: .86rem; font-weight: 700; }
input, textarea { width: 100%; border: 1px solid rgba(65,56,56,.16); border-radius: 13px; padding: .68rem .75rem; background: #fffdfb; color: var(--ink); }
textarea { min-height: 7rem; resize: vertical; line-height: 1.65; }
.transcript-input { min-height: 24rem; }
.wide { grid-column: 1 / -1; }
.editor-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.editor-note { padding: .9rem; border-radius: 15px; background: #fff1df; color: #765b42; font-size: .88rem; line-height: 1.7; }
.matrix-editor-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.share-box { margin-top: 1rem; padding: .8rem; border-radius: 14px; background: #f1f4e8; font-size: .86rem; word-break: break-all; }
.editor-command-bar { position: sticky; z-index: 4; bottom: .65rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid rgba(65,56,56,.08); border-radius: 20px; background: rgba(255,250,247,.94); box-shadow: 0 14px 34px rgba(92,68,58,.14); backdrop-filter: blur(12px); }
.editor-command-bar .editor-actions { margin-top: 0; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 1rem; background: rgba(47,37,35,.36); }
.modal { width: min(620px, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.25rem; border-radius: 24px; background: white; box-shadow: 0 25px 70px rgba(0,0,0,.23); }
.modal h2 { margin-bottom: 1rem; }
.modal .editor-actions { justify-content: end; }
.toast { position: fixed; z-index: 20; right: 1rem; bottom: 1rem; max-width: min(26rem, calc(100% - 2rem)); padding: .9rem 1rem; border-radius: 14px; background: var(--ink); color: white; box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.toast.error { background: #9b4545; }
@media (max-width: 720px) {
  .shell { width: min(100% - 1rem, 620px); }
  .topbar { padding-top: .5rem; }
  .hero { border-radius: 25px; }
  .editor-layout { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .matrix-scroll { display: none; }
  .matrix-cards { display: grid; }
  .reader-hero h1 { font-size: 2rem; }
  .card-summary { min-height: 52px; padding: .95rem 1rem; }
  .collapsible-body { padding: 0 1rem 1rem; }
  .editor-command-bar { bottom: .35rem; }
}
@media (hover: none) {
  .card:hover, .subtle-button:hover, .collapsible-card:hover, .matrix-state.editable:hover, .drag-handle:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}