* { box-sizing: border-box; }
:root {
  font-family: "Leelawadee UI", "Thonburi", "Noto Sans Thai", Tahoma, system-ui, sans-serif;
  color: #262b25;
  background: #f7f4ed;
  font-size: 17px;
  line-height: 1.6;
  --accent: #3b5143;
  --line: #e7e1d5;
  --muted: #62685d;
  --white: #fffefa;
  --soft: #edf0e8;
  --focus: #60886c;
}
body { margin: 0; }
[hidden] { display: none !important; }
.layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 16px 20px;
  border-right: 1px solid var(--line);
  background: var(--white);
}
.brand { display: flex; align-items: center; gap: 10px; line-height: 1.35; }
.brand strong { display: block; font-size: 18px; letter-spacing: -.025em; }
.brand small { display: block; font-size: 14px; margin-top: 3px; }
.brand-logo { width: 50px; height: 50px; object-fit: contain; border-radius: 10px; background: white; flex: none; }
nav { display: grid; gap: 6px; }
nav button { display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; color: var(--muted); }
nav button:hover, nav button[aria-current] { background: var(--soft); color: #284737; }
nav svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#logout { margin-top: auto; align-self: flex-start; }
.shell { width: 100%; max-width: 1300px; margin-inline: auto; padding: clamp(24px, 4vw, 56px); min-width: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.25; letter-spacing: -.025em; }
h2 { font-size: 23px; }
h3 { font-size: 18px; }
.muted, small { color: var(--muted); }
small { font-size: 0.875rem; }
.row, .heading, .actions { display: flex; align-items: center; gap: 12px; }
.heading { justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 24px; }
.heading p:not(:empty) { margin-top: 6px; }
.heading p:empty { display: none; }
.heading button, .row button { flex-shrink: 0; }
form.row { align-items: end; flex-wrap: wrap; }
form.row label { flex: 1 1 220px; min-width: 0; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 2.5vw, 26px); margin: 0 0 16px; box-shadow: 0 2px 8px #493c2510; min-width: 0; }
.narrow { max-width: 500px; margin: 44px auto; }
.grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.full { grid-column: 1/-1; }
.stack { display: grid; gap: 16px; min-width: 0; }
#wizard h2 { margin-bottom: 16px; }
button, input, select, textarea { font: inherit; }
button { min-height: 44px; border: 1px solid transparent; border-radius: 10px; padding: 8px 15px; background: var(--accent); color: white; cursor: pointer; font-weight: 700; }
button:hover { filter: brightness(.95); }
button:disabled { opacity: .55; cursor: default; }
.secondary { background: white; border-color: var(--line); color: var(--accent); }
.danger { background: #fff9f7; color: #973935; border-color: #efd6d1; white-space: nowrap; }
label { display: grid; gap: 6px; font-size: 16px; font-weight: 700; min-width: 0; }
input, select, textarea { background: white; color: inherit; border: 1px solid #d3d4ca; border-radius: 10px; padding: 9px 11px; width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; }
textarea { resize: vertical; min-height: 84px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.table { overflow-x: auto; }
.table:focus-visible { outline-offset: -3px; }
table { border-collapse: collapse; width: 100%; text-align: left; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { white-space: nowrap; color: var(--muted); font-size: 15px; background: #f2f2e9; }
td small { display: block; overflow-wrap: anywhere; }
td input { min-width: 104px; }
.pill { display: inline-block; border-radius: 20px; padding: 4px 10px; background: var(--soft); color: var(--accent); font-size: 15px; }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { text-align: center; padding: 25px; color: var(--muted); }
.steps { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.step { color: var(--muted); background: #efebe1; padding: 8px 14px; border-radius: 20px; font-size: 1rem; font-weight: 600; }
.step.active { color: white; background: var(--accent); }
.work { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,310px); gap: 16px; align-items: start; }
.actions { flex-wrap: wrap; margin-top: 20px; }
.end { justify-content: space-between; }
.end .row { flex-wrap: wrap; }
.line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.total { font-size: 20px; font-weight: 700; }
.items { display: grid; gap: 9px; }
.item { padding: 12px; border: 1px solid var(--line); border-radius: 11px; overflow-wrap: anywhere; }
.item small { display: block; }
.item .row { flex-wrap: wrap; margin-top: 8px; }
.item button { padding-inline: 12px; }
.warning, #notice { background: #f7ecd7; color: #694923; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
#notice.ok { background: #e5efe4; color: #284737; }
.group { background: #f6f5ee; padding: 14px; border-radius: 12px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.check input { width: 18px; min-height: 18px; accent-color: var(--accent); }
.link { background: transparent; color: var(--accent); padding: 4px; }
@media (max-width: 1100px) {
  .work { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .layout { display: block; }
  .rail { position: static; height: auto; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand strong { font-size: 16px; }
  .brand-logo { width: 42px; height: 42px; }
  #logout { margin: 0; align-self: center; }
  .rail:has(nav:not([hidden])) + .shell { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  nav { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 6px max(12px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px #493c2514; }
  nav button { flex-direction: column; justify-content: center; gap: 2px; min-height: 54px; padding: 4px; font-size: 15px; }
  .shell { padding: 20px 16px; }
  .heading { align-items: flex-start; }
  th, td { padding: 10px; }
}
@media (max-width: 500px) {
  .grid { grid-template-columns: minmax(0,1fr); }
  .heading { flex-wrap: wrap; gap: 12px; }
  .heading button { width: 100%; }
  .panel.table { padding: 8px; }
  table { min-width: 440px; }
  .table td input { min-width: 86px; }
}
.filter-panel { padding: 18px 22px; }
.case-filters { display: grid; grid-template-columns: minmax(160px, 1.25fr) minmax(280px, 1fr) auto; align-items: end; gap: 16px; }
.date-range { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; min-width: 0; border: 0; padding: 0; margin: 0; }
.date-range legend { padding: 0; margin-bottom: 2px; font-size: 16px; font-weight: 700; }
.date-range label { color: var(--muted); font-size: 14px; gap: 4px; }
.filter-actions { display: flex; gap: 8px; }
.filter-actions button { white-space: nowrap; }
.case-results { overflow: hidden; padding: 0; }
.case-results-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 22px; }
.result-count { color: var(--muted); background: #f3efe5; padding: 2px 10px; border-radius: 999px; font-size: 15px; }
.case-table th { background: #f3f1e9; }
.case-table td, .case-table th { padding-inline: 16px; }
.case-table :is(td, th):first-child { padding-left: 22px; }
.case-table :is(td, th):last-child { padding-right: 22px; text-align: right; }
.case-table tr:last-child td { border-bottom: 0; }
.case-table tbody tr:hover { background: #faf8f2; }
.case-table td strong { font-weight: 700; }
.case-id strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.case-table .amount { font-weight: 700; }
.case-state .pill { display: inline-flex; align-items: center; gap: 7px; }
.case-state .pill::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.case-state [data-stage="-1"] { color: #765320; background: #f8ecd5; }
.case-state [data-stage="0"] { color: #355374; background: #e7eff8; }
.case-state [data-stage="1"] { color: #5e487e; background: #eee8f6; }
.case-state [data-stage="2"] { color: #285d63; background: #e1f0ee; }
.case-state [data-stage="3"] { color: #31563a; background: #e5f0e4; }
@media (max-width: 1120px) {
  .case-filters { grid-template-columns: minmax(0,1fr) minmax(275px,1fr); }
  .filter-actions { grid-column: 1/-1; justify-content: flex-end; }
}
@media (max-width: 900px) {
  .case-table { display: block; min-width: 0; }
  .case-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .case-table tbody { display: grid; gap: 10px; padding: 0 14px 14px; }
  .case-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 6px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  .case-table tr td, .case-table tr td:first-child, .case-table tr td:last-child { padding: 0; border: 0; overflow-wrap: anywhere; }
  .case-id { grid-column: 1; grid-row: 1; }
  .case-customer { grid-column: 1/-1; grid-row: 2; }
  .case-state { grid-column: 1; grid-row: 3; align-self: center; }
  .case-table .amount { grid-column: 2; grid-row: 3; align-self: center; text-align: right; }
}
@media (max-width: 600px) {
  .filter-panel { padding: 14px; }
  .case-filters { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .filter-actions button { flex: 1; }
  .case-results-heading { padding: 14px; }
  .date-range input { padding-inline: 7px; }
}

.case-table tbody tr[data-action] { cursor: pointer; }
.case-table tbody tr:focus-within { background: #faf8f2; }
.case-link { min-height: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.case-pagination { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.workflow-scroll { overflow-x: auto; padding-bottom: 6px; }
.workflow { display: grid; grid-template-columns: repeat(4,minmax(152px,1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.workflow li { position: relative; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.workflow li:not(:last-child)::after { content: "→"; position: absolute; right: -17px; top: 14px; color: var(--muted); }
.workflow li[aria-current="step"] { border-color: var(--focus); background: var(--soft); }
.workflow-title { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 8px; }
.workflow-number { flex: none; color: var(--accent); font-weight: 700; }
.workflow small { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.workflow form { margin-top: 10px; gap: 8px; }
.detail-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr)); gap: 10px 16px; margin: 0; }
.detail-fields dt { color: var(--muted); font-size: 15px; }
.detail-fields dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.item .detail-fields:not(:empty) { margin-top: 8px; }
@media (max-width: 900px) {
  .case-customer { grid-column: 2; grid-row: 1; text-align: right; }
  .case-state { grid-row: 2; }
  .case-table .amount { grid-row: 2; }
}
@media (max-width: 500px) {
  .detail-actions { width: 100%; }
  .detail-actions button { width: auto; flex: 1; }
}

:root { --accent: #234c36; }
.rail { background: #19392d; color: #fffdf5; border-color: #254638; }
.rail .brand small { color: #d2e2d7; }
.rail nav button { color: #eff7ec; }
.rail nav button:hover, .rail nav button[aria-current] { background: #386348; color: #fff; }
.stage-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.stage-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; text-align: left; padding: 12px 16px; color: #244936; background: #e5eee1; border-color: #d6e4d3; border-radius: 13px; }
.stage-card strong { font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stage-card span:last-child { grid-column: 1/-1; margin-top: 4px; }
.stage-symbol { font-size: 20px; line-height: 1; }
.stage-card[data-index="1"] { background: #faf0d8; color: #72531c; border-color: #eee1c1; }
.stage-card[data-index="2"] { background: #f7e7e3; color: #813f3e; border-color: #ecd7d4; }
.stage-card[data-index="3"] { background: #ede8f7; color: #553e77; border-color: #dfd5ed; }
.stage-card[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: -3px; }
.stage-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.case-results .filter-panel { border-bottom: 1px solid var(--line); }
.case-state [data-stage="-1"], .workflow-done { color: #244936; background: #e5eee1; }
.case-state [data-stage="0"] { color: #72531c; background: #faf0d8; }
.case-state [data-stage="1"] { color: #813f3e; background: #f7e7e3; }
.case-state [data-stage="2"] { color: #553e77; background: #ede8f7; }
.contact-strip { display: flex; flex-wrap: wrap; gap: 5px 18px; border: 1px solid var(--line); background: #efede3; border-radius: 11px; margin-bottom: 16px; padding: 10px 16px; overflow-wrap: anywhere; }
.contact-strip:empty { display: none; }
.contact-strip span { min-width: 0; }
.workflow li { background: #f5f3ed; }
.workflow li.workflow-done { background: #e5eee1; }
.workflow li[aria-current="step"] { background: #e1efdd; border-color: #487958; }
.workflow-number { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: #e7e5dc; }
.workflow-done .workflow-number, .workflow li[aria-current="step"] .workflow-number { color: white; background: var(--accent); }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; align-items: start; }
.detail-price { grid-column: 1/-1; }
.detail-price .total { background: #e5eee1; color: var(--accent); border: 0; border-radius: 8px; margin-top: 10px; padding: 10px 12px; }
@media (max-width: 760px) {
  .rail nav { background: #19392d; border-color: #254638; }
  .stage-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .detail-grid { grid-template-columns: minmax(0,1fr); }
}

.dashboard-dates { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 18px; }
.dashboard-dates fieldset { flex: 0 1 360px; }
.dashboard-dates .filter-actions { justify-content: flex-start; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.dashboard-metric { display: grid; align-content: start; text-align: left; gap: 4px; padding: 14px 16px; background: var(--white); color: var(--accent); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.dashboard-metric strong { font-size: clamp(18px, 2.2vw, 28px); line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dashboard-value { background: #e5eee1; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.dashboard-stage { text-align: left; background: #f5f3eb; color: var(--accent); padding: 8px 12px; }
.dashboard-bar-label, .dashboard-section-heading, .dashboard-order { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-bar { display: block; width: 100%; height: 8px; margin-top: 5px; accent-color: var(--accent); }
.dashboard-latest { list-style: none; margin: 8px 0 0; padding: 0; }
.dashboard-latest li + li { border-top: 1px solid var(--line); }
.dashboard-order { width: 100%; text-align: left; padding: 10px 4px; background: transparent; color: var(--accent); }
.dashboard-order:hover { background: #f5f3eb; }
.dashboard-customer, .dashboard-order small { display: block; overflow-wrap: anywhere; }
.dashboard-order small, .dashboard-order .pill { font-weight: 400; }
.dashboard-section-heading { flex-wrap: wrap; }
@media (max-width: 960px) {
  .dashboard-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  #nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-metric { padding: 12px; }
}

.stage-cards { grid-template-columns: repeat(5,minmax(0,1fr)); }
.stage-card[data-index="4"] { background: #e0eee5; color: #234c36; border-color: #aac7b3; }
.rate-form { min-width: 0; }
.rate-scroll-controls { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.rate-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; scrollbar-color: #668271 #f0ece3; }
.rate-table th, .rate-table td { min-width: 128px; }
.rate-table th:first-child, .rate-table td:first-child { position: sticky; left: 0; z-index: 1; min-width: 110px; max-width: 150px; white-space: normal; overflow-wrap: anywhere; box-shadow: 1px 0 var(--line); }
.rate-table td:first-child { background: var(--white); }
.rate-table th:last-child, .rate-table td:last-child { min-width: 0; }
@media (max-width: 760px) { .stage-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.order-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(16px, 2.5vw, 28px); margin-bottom: 16px; border: 1px solid #c8d8c6; border-radius: 18px; background: linear-gradient(115deg,#edf3e7,#deeadd); }
.order-hero::before { content: "A \21c4  \0e01"; position: absolute; z-index: -1; inset-inline-end: 22%; top: -8px; color: #345a43; opacity: .15; font-size: clamp(56px, 8vw, 108px); font-weight: 700; white-space: nowrap; transform: rotate(-10deg); }
.order-hero .heading { margin-bottom: 12px; }
.order-hero .contact-strip { margin-bottom: 0; background: #f8fbf3; }
.detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.detail-sidebar { min-width: 0; }
.detail-price .line:not(.total) { font-size: .9rem; }
@media (max-width: 760px) {
  .detail-grid { display: flex; flex-direction: column; }
  .detail-grid > section { order: -1; }
  .detail-grid > * { width: 100%; }
  .order-hero::before { inset-inline-end: 8%; top: 4px; }
}

.shell { position: relative; isolation: isolate; }
.translation-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: #315940; }
.translation-backdrop span { position: absolute; transform: translate(-50%, -50%) rotate(var(--angle)); font-weight: 600; line-height: 1; opacity: .12; white-space: nowrap; }
.translation-backdrop span:nth-child(1) { left: 66%; top: 8%; font-size: 62px; --angle: -12deg; }
.translation-backdrop span:nth-child(2) { left: 1.5%; top: 10%; font-size: 32px; --angle: -18deg; }
.translation-backdrop span:nth-child(3) { left: 98%; top: 16%; font-size: 30px; --angle: 14deg; }
.translation-backdrop span:nth-child(4) { left: 2%; top: 23%; font-size: 28px; --angle: 13deg; }
.translation-backdrop span:nth-child(5) { left: 98%; top: 29%; font-size: 28px; --angle: -11deg; }
.translation-backdrop span:nth-child(6) { left: 1.5%; top: 37%; font-size: 30px; --angle: 15deg; }
.translation-backdrop span:nth-child(7) { left: 98%; top: 43%; font-size: 24px; --angle: 12deg; }
.translation-backdrop span:nth-child(8) { left: 2%; top: 50%; font-size: 30px; --angle: -15deg; }
.translation-backdrop span:nth-child(9) { left: 98%; top: 56%; font-size: 31px; --angle: -16deg; }
.translation-backdrop span:nth-child(10) { left: 1.5%; top: 63%; font-size: 28px; --angle: 11deg; }
.translation-backdrop span:nth-child(11) { left: 98%; top: 69%; font-size: 32px; --angle: 13deg; }
.translation-backdrop span:nth-child(12) { left: 2%; top: 76%; font-size: 24px; --angle: -12deg; }
.translation-backdrop span:nth-child(13) { left: 98%; top: 82%; font-size: 32px; --angle: 10deg; }
.translation-backdrop span:nth-child(14) { left: 1.5%; top: 91%; font-size: 30px; --angle: 16deg; }
.translation-backdrop span:nth-child(15) { left: 98%; top: 95%; font-size: 28px; --angle: -15deg; }
@media (max-width: 760px) {
  .translation-backdrop span { transform: translate(-50%, -50%) rotate(var(--angle)) scale(.65); }
  .translation-backdrop span:first-child { left: 76%; top: 64px; }
}
.translation-backdrop span:nth-child(16) { left: 4.1%; top: 5%; font-size: 23px; --angle: 12deg; }
.translation-backdrop span:nth-child(17) { left: 96.4%; top: 4%; font-size: 24px; --angle: -12deg; }
.translation-backdrop span:nth-child(18) { left: 2.3%; top: 16%; font-size: 24px; --angle: -9deg; }
.translation-backdrop span:nth-child(19) { left: 96.2%; top: 10%; font-size: 21px; --angle: 11deg; }
.translation-backdrop span:nth-child(20) { left: 1.8%; top: 29%; font-size: 22px; --angle: 14deg; }
.translation-backdrop span:nth-child(21) { left: 96.8%; top: 22%; font-size: 25px; --angle: -11deg; }
.translation-backdrop span:nth-child(22) { left: 2.1%; top: 44%; font-size: 22px; --angle: -15deg; }
.translation-backdrop span:nth-child(23) { left: 97.4%; top: 35%; font-size: 24px; --angle: 10deg; }
.translation-backdrop span:nth-child(24) { left: 1.7%; top: 56%; font-size: 24px; --angle: 12deg; }
.translation-backdrop span:nth-child(25) { left: 96.7%; top: 49%; font-size: 23px; --angle: -11deg; }
.translation-backdrop span:nth-child(26) { left: 2.2%; top: 70%; font-size: 23px; --angle: 12deg; }
.translation-backdrop span:nth-child(27) { left: 97.2%; top: 62%; font-size: 22px; --angle: -9deg; }
.translation-backdrop span:nth-child(28) { left: 1.7%; top: 84%; font-size: 24px; --angle: -12deg; }
.translation-backdrop span:nth-child(29) { left: 97.4%; top: 75%; font-size: 24px; --angle: 14deg; }
.translation-backdrop span:nth-child(30) { left: 2.1%; top: 97%; font-size: 23px; --angle: 9deg; }
.translation-backdrop span:nth-child(31) { left: 97.1%; top: 88%; font-size: 22px; --angle: -11deg; }
.translation-backdrop span:nth-child(32) { left: 17%; top: 98%; font-size: 24px; --angle: 10deg; }
.translation-backdrop span:nth-child(33) { left: 37%; top: 99%; font-size: 23px; --angle: -13deg; }
.translation-backdrop span:nth-child(34) { left: 73%; top: 98%; font-size: 26px; --angle: 12deg; }
.translation-backdrop span:nth-child(35) { left: 88%; top: 98%; font-size: 23px; --angle: -15deg; }

.customer-inline h3 { scroll-margin-block: 20px 96px; }


.document-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.document-option { display: grid; grid-template-columns: minmax(0,1fr) 76px; align-content: start; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.document-option:not(:has(input:checked)) .check { grid-column: 1/-1; }
.document-option:has(input:checked) { background: var(--soft); border-color: var(--focus); }
.document-option .check { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .document-picker { grid-template-columns: minmax(0,1fr); }
}

.customer-setup { max-width: 840px; margin-inline: auto; }
.customer-setup .heading { margin-bottom: 18px; }
.customer-start { gap: 16px; }
.customer-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.customer-choice { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; text-align: start; color: var(--accent); background: var(--white); border-color: var(--line); border-radius: 13px; }
.customer-choice[aria-pressed="true"] { background: #e7efe3; border-color: #60886c; box-shadow: inset 0 0 0 1px #60886c; }
.customer-choice-copy { min-width: 0; }
.customer-choice-copy strong, .customer-choice-copy small { display: block; }
.customer-choice-copy small { margin-top: 2px; font-weight: 400; }
.choice-indicator { flex: none; width: 18px; height: 18px; border: 1px solid #788679; border-radius: 50%; }
.customer-choice[aria-pressed="true"] .choice-indicator { border: 5px solid var(--accent); background: white; }
.customer-fields { display: grid; gap: 10px; padding: 14px 16px; background: #f5f5ee; border-radius: 12px; }
.customer-footer { display: flex; justify-content: space-between; gap: 10px; }
.customer-footer button[type="submit"] { min-width: 104px; }
@media (max-width: 500px) {
  .customer-choices { gap: 8px; }
  .customer-choice { padding: 10px; }
  .choice-indicator { width: 15px; height: 15px; }
  .customer-fields { padding: 12px; }
}