.main-grid { grid-template-columns: minmax(0, 1fr); }
.form-card { width: min(780px, 100%); margin-inline: auto; }
.mode-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-tabs button { min-width: 0; }
.hand-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hand-playback { display: grid; grid-template-columns: minmax(0, 440px) minmax(210px, 1fr); align-items: center; gap: 40px; width: min(860px, 100%); margin: 18px auto 0; }
.hand-wrap { width: 100%; margin: 0 auto; }
.hand-svg { filter: drop-shadow(0 10px 14px rgba(86, 54, 32, .08)); }
.hand-caption { margin-top: 8px; padding: 0 20px; }
.hand-node { fill: #fff9ef; fill-opacity: .91; stroke: #98684d; stroke-width: 3; }
.node-id { font-size: 25px; fill: #996d51; }
.node-name { font-size: 37px; fill: #35251c; font-weight: 800; }
.node-active .hand-node { fill: #941f1f; fill-opacity: 1; stroke: #6f1315; stroke-width: 5; }
.node-active text { fill: white; }
.pulse-ring { stroke-width: 4; }
.playback-progress .empty-hint { text-align: left; padding: 0; margin: 0 0 16px; }
.round-status { grid-template-columns: 1fr; gap: 12px; }
.round { padding: 18px; gap: 7px; font-size: 13px; }
.round strong { font-size: 16px; }
.round.complete { border-color: #cdcbb8; background: #f4f4e9; }
.round.complete span { color: #707544; }
.ai-output h4 { margin: 0 0 6px; color: var(--red); font-size: 15px; }
.ai-output p + h4 { margin-top: 18px; }
.ai-output p:last-child { margin-bottom: 0; }
.assessment-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; margin: 0 auto 20px; }
.assessment-icon span { font-family: "Noto Serif TC", "PMingLiU", serif; font-size: 30px; font-weight: 800; line-height: 1; }
.assessment-icon.auspicious { color: #287044; background: #e7f3e9; }
.assessment-icon.mixed { color: #946510; background: #fff2d5; }
.assessment-icon.inauspicious { color: #a32a2a; background: #fbe8e5; }
.ai-question { grid-column: 1 / -1; padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fffaf3; }
.ai-question h4 { margin: 0 0 7px; color: var(--red); font-size: 14px; }
.ai-question p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; color: var(--ink); }
.export-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.export-status { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); }
.text-export-dialog { width: min(760px, calc(100% - 28px)); max-height: 90vh; max-height: 90dvh; overflow-y: auto; border: 1px solid var(--line); border-radius: 22px; padding: 24px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.text-export-dialog::backdrop { background: rgba(36, 26, 22, .58); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dialog-heading h2 { margin: 0; font-size: 23px; }
.dialog-heading form { margin: 0; }
.text-export-notice { margin: 15px 0 0; padding: 12px 14px; border-radius: 12px; color: #785222; background: #fff0d4; font-size: 14px; line-height: 1.65; }
#text-export-content { height: min(45vh, 440px); min-height: 180px; background: #fffdf9; line-height: 1.7; font-size: 14px; }
.dialog-actions { display: flex; align-items: center; gap: 14px; margin-top: 15px; }
.dialog-actions p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
@media (max-width: 480px) {
  .text-export-dialog { padding: 18px; border-radius: 17px; }
  .dialog-actions { align-items: stretch; flex-direction: column; }
  .export-actions button { flex: 1; }
}
@media (max-width: 700px) {
  .hand-playback { grid-template-columns: 1fr; gap: 24px; }
  .hand-wrap { max-width: 360px; }
  .hand-heading .section-heading h2 { font-size: 18px; }
  .hand-heading .step-mark { width: 36px; height: 36px; }
  .hand-heading { gap: 8px; align-items: flex-start; }
  .hand-heading .ghost { white-space: nowrap; }
  .round-status { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .round { padding: 12px 9px; font-size: 11px; }
  .round strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-ring { animation: none; }
  .hand-node { transition: none; }
}