:root {
  --surface-page: #f4f4f1;
  --surface-card: #ffffff;
  --surface-active: #fff0eb;
  --text-primary: #11110f;
  --text-secondary: #55554f;
  --border-subtle: #d8d8d2;
  --accent-orange: #e84a2a;
  --accent-orange-soft: #fff0eb;
  --action-dark: #11110f;
  --status-success: #287a4b;
  --v3-danger: #a12727;
}
body.sop-v3-active *, body.sop-v3-active *::before, body.sop-v3-active *::after { box-sizing: border-box; }
body.sop-v3-active {
  margin: 0;
  overflow-x: hidden;
  background: linear-gradient(180deg, #fafaf8, var(--surface-page));
  color: var(--text-primary);
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}
.sop-v3-shell { width: min(920px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 72px; }
.sop-v3-head { padding: 22px 0 14px; }
.sop-v3-kicker { margin: 0; color: var(--accent-orange); font-weight: 800; letter-spacing: .08em; }
.sop-v3-head h1 { margin: .4rem 0; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.2; }
.sop-v3-head p:last-child { max-width: 720px; margin-bottom: 0; color: var(--text-secondary); }
.sop-v3-boot-status {
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-orange);
  border-radius: 8px;
  padding: 18px 20px;
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: 0 8px 22px rgba(17, 17, 15, .05);
}
.sop-v3-boot-status[hidden] { display: none; }
.sop-v3-boot-status p { margin: 6px 0 0; color: var(--text-secondary); }
.sop-v3-boot-status[data-state="error"] { border-left-color: var(--v3-danger); }
.sop-v3-noscript { margin-top: 18px; }
.sop-v3-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.sop-v3-progress span {
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 10px;
  background: #ecece8;
  color: var(--text-secondary);
  text-align: center;
  font-size: .9rem;
}
.sop-v3-progress .active {
  border-color: var(--accent-orange);
  border-left: 4px solid var(--accent-orange);
  background: var(--surface-active);
  color: var(--text-primary);
  font-weight: 800;
}
.sop-v3-progress-short { display: none; }
.sop-v3-card {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: clamp(18px, 4vw, 32px);
  background: var(--surface-card);
  box-shadow: 0 8px 22px rgba(17, 17, 15, .07);
}
.sop-v3-card > h2 { margin: 0 0 22px; }
.sop-v3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sop-v3-contact-grid .sop-v3-contact-full { grid-column: 1 / -1; }
.sop-v3-field { display: grid; gap: 7px; margin: 14px 0; min-width: 0; font-weight: 700; }
.sop-v3-field small, .sop-v3-help, .sop-v3-file-summary { color: var(--text-secondary); font-weight: 400; }
.sop-v3-field input, .sop-v3-field select, .sop-v3-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 12px 13px;
  background: #fff;
  color: inherit;
  font: inherit;
}
.sop-v3-field textarea { resize: vertical; }
.sop-v3-field-core textarea { min-height: 168px; }
.sop-v3-field-direction textarea { min-height: 104px; }
.sop-v3-field input:focus, .sop-v3-field select:focus, .sop-v3-field textarea:focus {
  border-color: var(--accent-orange);
  outline: 3px solid rgba(232, 74, 42, .2);
  outline-offset: 1px;
}
.sop-v3-form-section { margin-top: 28px; border-top: 1px solid var(--border-subtle); padding-top: 24px; }
.sop-v3-form-section:first-of-type { margin-top: 0; }
.sop-v3-section-heading { margin: 0 0 14px; font-size: 1.15rem; }
.sop-v3-section-kicker { display: block; margin-bottom: 5px; color: var(--accent-orange); font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.sop-v3-upload-section { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 20px; background: #fafaf8; }
.sop-v3-upload-section .sop-v3-field { margin-bottom: 0; }
.sop-v3-field input[type="file"] { padding: 8px; background: #fff; }
.sop-v3-field input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-right: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 12px;
  background: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
.sop-v3-field input[type="file"]::file-selector-button:hover { border-color: var(--accent-orange); background: var(--surface-active); }
.sop-v3-file-summary { min-height: 1.5em; margin: 0; overflow-wrap: anywhere; }
.sop-v3-file-summary-label { display: block; margin-bottom: 7px; }
.sop-v3-file-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sop-v3-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid var(--border-subtle);
  padding: 7px 0 0;
}
.sop-v3-file-name { min-width: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-v3-file-remove {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  padding: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
}
.sop-v3-file-remove:hover { color: #a33b2b; }
.sop-v3-file-remove:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.sop-v3-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 6px 0;
  padding: 8px 0;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
}
.sop-v3-check input[type="checkbox"] {
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  align-self: center;
  background: #fff;
  accent-color: var(--accent-orange);
  cursor: pointer;
}
.sop-v3-check span { min-width: 0; overflow-wrap: anywhere; }
.sop-v3-check:focus-within { outline: 3px solid rgba(232, 74, 42, .2); outline-offset: 2px; }
.sop-v3-conditional { margin: 4px 0 16px 32px; }
.sop-v3-inline-note { margin: 10px 0 0; border-left: 3px solid var(--accent-orange); padding: 10px 12px; background: var(--accent-orange-soft); color: var(--text-secondary); }
.sop-v3-anonymous-note { margin-bottom: 0; }
.sop-v3-submit-reminders { margin: 14px 0 0; padding-left: 1.25rem; color: var(--text-secondary); }
.sop-v3-submit-reminders li + li { margin-top: 5px; }
.sop-v3-job {
  margin: 18px 0;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-orange);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface-active);
}
.sop-v3-job-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.sop-v3-plan { margin: 12px 0; border-left: 4px solid var(--accent-orange); padding: 14px; background: var(--surface-active); }
.sop-v3-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.sop-v3-submit-actions { justify-content: flex-end; }
.sop-v3-secondary-actions { display: flex; align-items: center; gap: 16px; margin-right: auto; flex-wrap: wrap; }
.sop-v3-clear-draft { color: var(--text-secondary); font-size: .9rem; }
.sop-v3-button {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 12px 20px;
  background: var(--accent-orange);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s ease;
}
.sop-v3-button:hover { border-color: transparent; background: #d94325; box-shadow: none; }
.sop-v3-button:focus-visible { outline: 3px solid rgba(232, 74, 42, .3); outline-offset: 3px; }
.sop-v3-button.secondary { border-color: var(--border-subtle); background: #fff; color: var(--text-primary); }
.sop-v3-button.secondary:hover { border-color: var(--accent-orange); box-shadow: none; }
.sop-v3-button:disabled, .sop-v3-button:disabled:hover { border-color: transparent; background: #d9d9d4; color: #5e5e58; cursor: not-allowed; opacity: 1; box-shadow: none; }
.sop-v3-help { border-left: 4px solid var(--accent-orange); padding: 12px 14px; background: var(--accent-orange-soft); }
.sop-v3-error { margin: 10px 0 0; color: var(--v3-danger); font-weight: 700; }
.sop-v3-section-error:empty, .sop-v3-form-error:empty { display: none; }
.sop-v3-success { border-left: 4px solid var(--status-success); background: #e8f4ed; }
.sop-v3-hidden { display: none !important; }
@media (max-width: 640px) {
  .sop-v3-shell { width: min(100% - 20px, 920px); padding-top: 8px; }
  .sop-v3-head { padding-top: 14px; }
  .sop-v3-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sop-v3-contact-grid .sop-v3-contact-full { grid-column: auto; }
  .sop-v3-progress span { padding: 9px 4px; font-size: .78rem; }
  .sop-v3-progress-full { display: none; }
  .sop-v3-progress-short { display: inline; }
  .sop-v3-card { border-radius: 8px; padding: 18px 16px; }
  .sop-v3-upload-section { padding: 16px; }
  .sop-v3-form-section { margin-top: 24px; padding-top: 20px; }
  .sop-v3-field-core textarea { min-height: 150px; }
  .sop-v3-conditional { margin-left: 0; }
  .sop-v3-actions .sop-v3-button { width: 100%; }
  .sop-v3-secondary-actions { width: 100%; margin-right: 0; }
  .sop-v3-secondary-actions .sop-v3-button { width: auto; }
}

/* 冷靜視覺收口：平面容器、文字進度與低刺激互動。 */
.sop-v3-shell { width: min(820px, calc(100% - 28px)); padding-bottom: 88px; }
.sop-v3-progress { gap: 28px; margin: 26px 0 42px; border-bottom: 1px solid var(--border-subtle); }
.sop-v3-progress span { position: relative; border: 0; border-radius: 0; padding: 11px 0 13px; background: transparent; text-align: left; }
.sop-v3-progress .active { border: 0; background: transparent; color: var(--accent-orange); }
.sop-v3-progress .active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent-orange); }
.sop-v3-card { border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; }
.sop-v3-card > h2 { margin-bottom: 34px; font-size: clamp(1.45rem, 3.5vw, 2rem); }
.sop-v3-field input, .sop-v3-field select, .sop-v3-field textarea { min-height: 48px; border-radius: 6px; }
.sop-v3-field input:focus, .sop-v3-field select:focus, .sop-v3-field textarea:focus { border-color: var(--accent-orange); outline: 1px solid var(--accent-orange); outline-offset: 0; box-shadow: none; }
.sop-v3-form-section { margin-top: 42px; padding-top: 30px; }
.sop-v3-upload-section { border: 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); border-radius: 0; padding: 24px 0; background: transparent; }
.sop-v3-field input[type="file"] { background: #fafaf8; }
.sop-v3-field input[type="file"]::file-selector-button:hover { border-color: #b9b9b2; background: #f3f3ef; }
.sop-v3-check:hover, .sop-v3-check:focus-within { margin-right: -8px; margin-left: -8px; padding-right: 8px; padding-left: 8px; background: rgba(232, 74, 42, .035); outline: 0; }
.sop-v3-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.sop-v3-conditional { margin: 4px 0 18px 32px; border-left: 1px solid var(--border-subtle); padding-left: 12px; }
.sop-v3-inline-note, .sop-v3-help { border-left-width: 2px; background: #faf8f4; }
.sop-v3-job { margin: 32px 0 0; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; padding: 28px 0 0; background: transparent; }
.sop-v3-plan { margin: 18px 0; border: 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 16px 0; background: transparent; }
.sop-v3-button { border-color: transparent; background: var(--accent-orange); box-shadow: none; }
.sop-v3-button:hover { border-color: transparent; background: #d94325; box-shadow: none; }
.sop-v3-button:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; }
.sop-v3-button.secondary { border-color: transparent; background: transparent; color: var(--text-secondary); }
.sop-v3-button.secondary:hover { border-color: transparent; background: #ecece8; color: var(--text-primary); box-shadow: none; }
.sop-v3-button:disabled, .sop-v3-button:disabled:hover { border-color: transparent; background: #d9d9d4; color: #5e5e58; }
.sop-v3-button[data-submit] { min-height: 50px; }
.sop-v3-button[data-state="sending"], .sop-v3-button[data-state="sending"]:disabled { border-color: transparent; background: #c94125; color: #fff; cursor: progress; }
.sop-v3-success { border: 0; border-top: 2px solid var(--status-success); padding-top: 24px; background: transparent; }
.sop-v3-completion { padding: clamp(26px, 5vw, 48px) 0 12px; }
.sop-v3-completion h2 { max-width: 680px; margin: 10px 0 18px; font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.25; }
.sop-v3-completion h2:focus { outline: none; }
.sop-v3-completion-lead { max-width: 680px; margin: 0; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; }
.sop-v3-partial-notice { margin-top: 30px; border-left: 3px solid var(--accent-orange); padding: 14px 16px; background: var(--accent-orange-soft); }
.sop-v3-partial-notice p { margin: 6px 0 0; color: var(--text-secondary); }
.sop-v3-case-number { margin-top: 34px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 22px 0; }
.sop-v3-case-number > span { display: block; color: var(--text-secondary); font-size: .85rem; font-weight: 800; letter-spacing: .08em; }
.sop-v3-case-number strong { display: block; margin-top: 8px; }
.sop-v3-case-number strong { min-width: 0; color: var(--accent-orange); font-size: clamp(1.35rem, 4vw, 2rem); overflow-wrap: anywhere; }
.sop-v3-copy-action { display: contents; }
.sop-v3-copy-button { display: block; min-width: 0; min-height: 44px; margin-top: 14px; border: 1px solid var(--border-subtle); padding: 10px 14px; background: #fff; color: var(--text-primary); text-align: left; box-shadow: none; }
.sop-v3-copy-button:hover { border-color: #a7a7a0; background: #f6f6f2; box-shadow: none; }
.sop-v3-copy-button:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.sop-v3-copy-status { min-height: 1.4em; margin: 0; color: var(--text-secondary); font-size: .875rem; }
.sop-v3-next-step { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 32px; align-items: center; margin-top: 42px; }
.sop-v3-next-step-content { min-width: 0; }
.sop-v3-next-step h3 { margin: 5px 0 18px; font-size: 1.35rem; }
.sop-v3-next-step ol { margin: 0 0 24px; padding-left: 1.45rem; line-height: 1.8; }
.sop-v3-line-qr { width: 170px; max-width: 100%; margin: 0; justify-self: end; text-align: center; }
.sop-v3-line-qr img { display: block; width: 100%; max-width: 100%; height: auto; }
.sop-v3-line-qr figcaption { margin-top: 9px; color: var(--text-secondary); font-size: .8rem; line-height: 1.5; }
.sop-v3-required { color: var(--accent-orange); font-weight: 900; }
.sop-v3-line-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-color: var(--accent-orange); background: var(--accent-orange); }
.sop-v3-completion-reminders { margin: 42px 0 0; border-top: 1px solid var(--border-subtle); padding: 24px 0 0 1.25rem; color: var(--text-secondary); line-height: 1.75; }
@media (max-width: 640px) {
  .sop-v3-shell { width: min(100% - 24px, 820px); }
  .sop-v3-progress { gap: 12px; margin: 18px 0 32px; }
  .sop-v3-progress span { padding: 9px 0 11px; }
  .sop-v3-card { padding: 0; }
  .sop-v3-upload-section { padding: 20px 0; }
  .sop-v3-conditional { margin-left: 22px; }
  .sop-v3-completion { padding-top: 18px; }
  .sop-v3-completion-lead br { display: none; }
  .sop-v3-case-number strong { max-width: 100%; }
  .sop-v3-case-number .sop-v3-copy-button { width: auto; min-height: 44px; align-self: flex-start; }
  .sop-v3-line-button { width: 100%; min-height: 48px; }
  .sop-v3-next-step { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sop-v3-line-qr { width: 130px; justify-self: center; }
}
/* 流程受控重置：沿用既有視覺，只支援精簡欄位與單一方案摘要。 */
.sop-v3-plan h3 { margin: 5px 0 18px; font-size: 1.35rem; }
.sop-v3-price { color: var(--accent-orange); white-space: nowrap; }
.sop-v3-plan dl { display: grid; gap: 16px; margin: 0; }
.sop-v3-plan dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.sop-v3-plan dt { font-weight: 800; }
.sop-v3-plan dd { margin: 0; color: var(--text-secondary); line-height: 1.7; }
.sop-v3-step-one-actions { align-items: center; }
.sop-v3-text-link { border: 0; padding: 0; background: transparent; color: var(--text-secondary); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sop-v3-text-link:hover { color: var(--text-primary); }
.sop-v3-text-link:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 4px; }
.sop-v3-case-link { color: var(--text-primary); font-size: .95rem; font-weight: 700; text-decoration: none; }
.sop-v3-case-link:hover { color: var(--accent-orange); text-decoration: none; }
.sop-v3-case-link:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 4px; }
.sop-v3-modal[hidden] { display: none; }
.sop-v3-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; }
.sop-v3-modal-backdrop { position: absolute; z-index: 0; inset: 0; background: rgba(17, 17, 15, .68); pointer-events: auto; }
.sop-v3-modal-panel { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(760px, 100%); max-height: calc(100dvh - 48px); overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 8px; background: #fafaf8; pointer-events: auto; }
.sop-v3-modal-header { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border-subtle); padding: 22px 24px 18px; background: #fff; }
.sop-v3-modal-header h2 { margin: 5px 0 0; font-size: clamp(1.45rem, 4vw, 2rem); }
.sop-v3-modal-x { position: relative; z-index: 3; display: grid; place-items: center; flex: 0 0 auto; width: 44px; min-width: 44px; height: 44px; min-height: 44px; border: 1px solid var(--border-subtle); border-radius: 6px; background: #fff; color: var(--text-primary); font: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.sop-v3-modal-x svg { display: block; width: 18px; height: 18px; }
.sop-v3-modal-x svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sop-v3-modal-x:hover { border-color: #a7a7a0; background: #f4f4f1; }
.sop-v3-modal-x:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.sop-v3-modal-scroll { position: relative; z-index: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
.sop-v3-modal-intro { max-width: 620px; margin: 0 0 26px; color: var(--text-secondary); line-height: 1.75; }
.sop-v3-featured-case { border-top: 2px solid var(--accent-orange); border-bottom: 1px solid var(--border-subtle); padding: 24px 0; }
.sop-v3-featured-case h3, .sop-v3-case-list h3 { margin: 7px 0 18px; font-size: 1.3rem; line-height: 1.45; }
.sop-v3-featured-case dl, .sop-v3-case-panel dl { display: grid; gap: 16px; margin: 0; }
.sop-v3-featured-case dl div, .sop-v3-case-panel dl div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; }
.sop-v3-featured-case dt, .sop-v3-case-panel dt { font-weight: 800; }
.sop-v3-featured-case dd, .sop-v3-case-panel dd { min-width: 0; margin: 0; color: var(--text-secondary); line-height: 1.7; overflow-wrap: anywhere; }
.sop-v3-case-consent { margin: 20px 0 0; border-left: 2px solid var(--accent-orange); padding: 10px 12px; background: var(--accent-orange-soft); color: var(--text-secondary); font-size: .925rem; line-height: 1.65; }
.sop-v3-case-list { padding-top: 30px; }
.sop-v3-case-list > p { margin: -8px 0 18px; color: var(--text-secondary); }
.sop-v3-case-item { border-top: 1px solid var(--border-subtle); }
.sop-v3-case-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.sop-v3-case-item h4 { margin: 0; }
.sop-v3-case-item h4 button { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; border: 0; padding: 17px 2px; background: transparent; color: var(--text-primary); font: inherit; font-weight: 800; line-height: 1.5; text-align: left; cursor: pointer; }
.sop-v3-case-item h4 button:hover { color: var(--accent-orange); }
.sop-v3-case-item h4 button:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: -2px; }
.sop-v3-case-item h4 button[aria-expanded="true"] [data-case-icon] { color: var(--accent-orange); }
.sop-v3-case-item h4 button [data-case-icon] { flex: 0 0 auto; min-width: 1.25rem; font-size: 1.25rem; line-height: 1; text-align: center; }
.sop-v3-case-panel { padding: 0 2px 22px; }
.sop-v3-case-image-button { display: block; width: 100%; margin-top: 20px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 0; background: #11110f; cursor: zoom-in; }
.sop-v3-case-image-button:hover { border-color: #a7a7a0; }
.sop-v3-case-image-button:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.sop-v3-case-image-button img { display: block; width: 100%; max-width: 100%; height: auto; }
.sop-v3-image-preview[hidden] { display: none; }
.sop-v3-image-preview { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 24px; pointer-events: auto; }
.sop-v3-image-preview-backdrop { position: absolute; z-index: 0; inset: 0; background: rgba(17, 17, 15, .9); pointer-events: auto; }
.sop-v3-image-preview-panel { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1000px, 100%); max-height: calc(100dvh - 48px); overflow: hidden; border: 1px solid #4a4a46; border-radius: 8px; background: #11110f; }
.sop-v3-image-preview-panel > header { display: flex; justify-content: flex-end; border-bottom: 1px solid #4a4a46; padding: 10px; background: #11110f; }
.sop-v3-image-preview-x { position: relative; z-index: 2; min-width: 44px; min-height: 44px; pointer-events: auto; touch-action: manipulation; }
.sop-v3-image-preview-media { min-width: 0; overflow: auto; overscroll-behavior: contain; }
.sop-v3-image-preview-media img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.sop-v3-modal-footer { position: relative; z-index: 1; border-top: 1px solid var(--border-subtle); padding: 16px 24px; background: #fff; }
.sop-v3-modal-footer .sop-v3-button { width: 100%; }
.sop-v3-consent-row { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 10px 0; }
.sop-v3-consent-stack { display: grid; align-items: start; gap: 8px; margin: 18px 0; }
.sop-v3-consent-summary { margin: 0; color: var(--text-secondary); line-height: 1.7; }
.sop-v3-consent-stack .sop-v3-consent-check { display: flex; align-items: flex-start; gap: 9px; }
.sop-v3-consent-check { flex: 0 0 auto; margin: 0; }
.sop-v3-consent-check:hover, .sop-v3-consent-check:focus-within { margin: 0; }
.sop-v3-notice-link { min-width: 0; border: 0; padding: 8px 2px; background: transparent; color: var(--accent-orange); font: inherit; font-weight: 800; text-align: left; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; touch-action: manipulation; }
.sop-v3-notice-link:hover { color: #c53b20; }
.sop-v3-notice-link:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.sop-v3-notice-readiness { margin: 0 0 22px; border-left: 3px solid var(--accent-orange); padding: 12px 14px; background: var(--accent-orange-soft); color: var(--text-primary); font-weight: 800; line-height: 1.65; }
.sop-v3-notice-body { color: var(--text-secondary); line-height: 1.8; }
.sop-v3-notice-body > :first-child { margin-top: 0; }
.sop-v3-notice-body h3 { margin: 30px 0 12px; color: var(--text-primary); font-size: 1.2rem; }
.sop-v3-notice-body ol, .sop-v3-notice-body ul { padding-left: 1.5rem; }
.sop-v3-notice-body li { margin: 8px 0; }
.sop-v3-notice-body li > ul { margin-top: 8px; }
.sop-v3-notice-body strong { color: var(--text-primary); }
.sop-v3-notice-body a { color: var(--accent-orange); overflow-wrap: anywhere; }
.sop-v3-notice-body [data-pending] { color: var(--accent-orange); font-weight: 800; }
.sop-v3-notice-source { margin: 30px 0 0; border-top: 1px solid var(--border-subtle); padding-top: 18px; color: var(--text-secondary); font-size: .875rem; line-height: 1.65; }
body.sop-v3-modal-open { position: fixed; right: 0; left: 0; width: 100%; overflow: hidden; }
.sop-v3-job-fallback { margin-top: 14px; color: var(--text-secondary); }
.sop-v3-job-fallback summary { width: fit-content; cursor: pointer; font-weight: 700; text-underline-offset: 4px; }
.sop-v3-document-needs { margin-top: 16px; }
.sop-v3-document-needs > legend { margin-bottom: 8px; font-weight: 800; }
.sop-v3-submit-reminder { margin: 20px 0 0; border-top: 1px solid var(--border-subtle); padding-top: 18px; color: var(--text-secondary); line-height: 1.7; }
.sop-v3-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.sop-v3-turnstile-block { width: min(100%, 420px); min-width: 0; margin: 24px 0 0; }
.sop-v3-turnstile-label { display: block; margin-bottom: 7px; color: var(--text-secondary); font-size: .8rem; font-weight: 700; }
.sop-v3-turnstile-widget { width: 100%; min-height: 65px; overflow: hidden; }
.sop-v3-turnstile-widget iframe { max-width: 100%; }
.sop-v3-turnstile-status { margin: 7px 0 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.5; }
@media (max-width: 640px) {
  .sop-v3-plan dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sop-v3-step-one-actions { align-items: stretch; }
  .sop-v3-text-link { padding: 10px 0; text-align: center; }
  .sop-v3-modal { align-items: stretch; padding: 8px; }
  .sop-v3-modal-panel { width: 100%; max-height: calc(100dvh - 16px); border-radius: 6px; }
  .sop-v3-modal-header { padding: 17px 16px 14px; }
  .sop-v3-modal-scroll { padding: 18px 16px 22px; }
  .sop-v3-modal-footer { padding: 12px 16px 16px; }
  .sop-v3-featured-case dl div, .sop-v3-case-panel dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sop-v3-case-item h4 button { gap: 12px; padding: 15px 0; }
  .sop-v3-turnstile-block { width: 100%; margin-right: 0; margin-left: 0; }
  .sop-v3-image-preview { padding: 8px; }
  .sop-v3-image-preview-panel { width: 100%; max-height: calc(100dvh - 16px); border-radius: 6px; }
  .sop-v3-image-preview-media img { width: 100%; }
  .sop-v3-job-head { flex-wrap: nowrap; }
  .sop-v3-job-head > legend { flex: 0 0 auto; margin: 0; white-space: nowrap; word-break: keep-all; }
  .sop-v3-job-head .sop-v3-button { width: auto; min-width: 0; flex: 0 0 auto; margin-left: auto; }
}

/* 方案式漸進揭露與逐份附件加入 */
.sop-v3-file-picker { position: relative; cursor: pointer; }
.sop-v3-file-picker input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.sop-v3-file-picker-label { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; margin: 8px 0 4px; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 9px 14px; background: #fff; color: var(--text-primary); font-weight: 800; }
.sop-v3-file-picker:hover .sop-v3-file-picker-label { border-color: var(--accent-orange); background: var(--surface-active); }
.sop-v3-file-picker:focus-within .sop-v3-file-picker-label { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.sop-v3-file-limit { margin: 10px 0; border-left: 3px solid var(--accent-orange); padding: 10px 12px; background: var(--accent-orange-soft); line-height: 1.65; }
.sop-v3-file-empty { display: block; color: var(--text-secondary); }
.sop-v3-progressive-control, .sop-v3-progressive-group { margin-top: 22px; border-top: 1px solid var(--border-subtle); padding-top: 18px; }
.sop-v3-document-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
.sop-v3-document-needs > legend { grid-column: 1 / -1; }
.sop-v3-notice-link { text-decoration: none; }
.sop-v3-notice-link:hover { text-decoration: none; }
.sop-v3-notice-summary { margin: 0 0 26px; border-bottom: 1px solid var(--border-subtle); padding: 0 0 22px; color: var(--text-primary); line-height: 1.75; }
.sop-v3-notice-summary p { margin: 8px 0; }
.sop-v3-clear-draft { border: 0; padding: 8px 2px; background: transparent; color: var(--text-secondary); font-weight: 400; text-decoration: none; }
.sop-v3-clear-draft:hover { color: #8f3023; text-decoration: none; }
.sop-v3-clear-draft:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; }
.sop-v3-flow-utility { display: flex; justify-content: flex-start; margin-top: 18px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.sop-v3-flow-utility .sop-v3-clear-draft { min-height: 44px; }
@media (max-width: 640px) {
  .sop-v3-document-needs { grid-template-columns: minmax(0, 1fr); }
  .sop-v3-file-picker-label { width: 100%; }
  .sop-v3-step-one-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sop-v3-step-one-actions [data-next] { order: 1; width: 100%; }
  .sop-v3-step-one-actions .sop-v3-case-link { order: 2; justify-self: start; }
  .sop-v3-step-two-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
  .sop-v3-step-two-actions .sop-v3-button { width: 100%; white-space: nowrap; }
  .sop-v3-submit-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sop-v3-submit-actions [data-submit] { order: 1; width: 100%; }
  .sop-v3-submit-actions [data-prev] { order: 2; width: auto; justify-self: start; white-space: nowrap; }
  .sop-v3-flow-utility { margin-top: 22px; }
  .sop-v3-flow-utility .sop-v3-clear-draft { padding: 10px 0; text-align: left; }
}