:root { --nova-blue:#0b66c3; --nova-blue-soft:#eef5ff; }
body { font-family: system-ui, sans-serif; background: #f7f7f8; margin: 0; }
.container { max-width: 760px; margin: 12px auto; background: #fff; padding: 14px; border-radius: 10px; box-sizing: border-box; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.page-header h1 { flex: 1 1 0; min-width: 0; font-size: clamp(20px, 6vw, 30px); margin: 0; word-break: keep-all; line-height: 1.4; display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
.brand-corner { flex: 0 0 auto; }
.brand-logo { width: 96px; max-width: 26vw; height: auto; object-fit: contain; display: block; }
.lead { color: #444; }
section { margin: 18px 0; padding-bottom: 12px; border-bottom: 1px solid #ececec; }
.step h2 { border-left: 6px solid var(--nova-blue); padding: 8px 10px; background: var(--nova-blue-soft); border-radius: 4px; }
label { display: block; margin: 8px 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--nova-blue); }
label.confirm-line { display:flex; align-items:flex-start; gap:8px; }
label.confirm-line input[type="checkbox"] { margin-top:2px; }
input[type="text"], input[type="email"], input[type="date"], input:not([type]), select { width: 100%; padding: 8px; box-sizing: border-box; font-size: 16px; }
.box { background: #f3f7ff; border: 1px solid #dbe8ff; padding: 10px; border-radius: 8px; margin-top: 10px; }
.content-panel {
  max-height: 280px;
  overflow: auto;
  border: 1px solid #cfe1f4;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
}
.form-panel { max-height: unset; overflow: visible; }
.step[data-step="7"] .content-panel { max-height: 280px; overflow: auto; }
.step[data-step="8"] .content-panel { max-height: unset; overflow: visible; }
.item-block { padding: 10px 0; border-bottom: 1px dashed #d9e3f0; }
.item-block:last-child { border-bottom: 0; }

/* Separate signature area from review scrolling */
.step[data-step="8"] .content-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#touchSignArea {
  flex-shrink: 0; /* Don't shrink signature area */
  position: relative;
}
.item-block p { margin: 0 0 8px 0; line-height: 1.6; }
.comp-image { width: 100%; border: 1px solid #d9e3f0; border-radius: 6px; margin: 8px 0; }
.hidden { display: none; }
.actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
button { padding: 10px 14px; border: 0; border-radius: 8px; background: var(--nova-blue); color: white; cursor: pointer; }
.backBtn, #clearSign { background: #777; }
.store-sign-btn { background: #4a7c4e; color: #fff; }
#signCanvas { border: 1px dashed #aaa; background: #fff; width: 100%; max-width: 100%; height: 220px; touch-action: none; }
.sign-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
#status { margin-top: 10px; color: #136f2d; }
#reviewSummaryWrap { margin-top: 10px; border:1px solid #d9e3f0; border-radius:6px; background:#fff; max-height: 320px; overflow:auto; }
#reviewSummaryBody { padding: 10px 12px; line-height: 1.6; }
#reviewSummaryBody ul { margin: 6px 0 8px 18px; }

/* Ensure review area can scroll independently */
.review-container {
  flex: 1;
}
.prefix-input { display:flex; align-items:center; }
.prefix-input span { background:#eee; border:1px solid #ccc; border-right:0; padding:8px 10px; border-radius:6px 0 0 6px; }
.prefix-input input { border-radius:0 6px 6px 0; }
.prefix-input.short input { max-width: 110px; }
small { color:#666; }
ul, ol { margin: 6px 0 10px 18px; padding-left: 10px; }
.qr { width: 180px; max-width: 100%; border:1px solid #ddd; background:#fff; padding:6px; }
.qr-note { color:#666; margin-top:6px; }
.inline-qr { margin: 10px 0; }
input.invalid { border: 1px solid #d11; background: #fff4f4; }
label:has(input:disabled) { color:#888; }
.wa-qr-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.wa-qr-row p { margin:0; flex:1; }
.wa-qr { width: 130px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .container { margin: 0; border-radius: 0; max-width: 100%; }
  .wa-qr-row { flex-direction: column; }
  .wa-qr { width: 160px; }
}