:root {
  color-scheme: light;
  --page: #e8e9ed;
  --surface: #f5f5f7;
  --surface-raised: #fdfdfd;
  --surface-muted: #eceef2;
  --ink: #1d1d1f;
  --muted: #5f6368;
  --faint: #73777d;
  --line: #d9dbe0;
  --accent: #0068d4;
  --accent-pressed: #0054ab;
  --accent-soft: #e4f1ff;
  --info-ink: #075aa8;
  --warning: #8b4b08;
  --warning-soft: #fff0d6;
  --success: #176b35;
  --success-soft: #e3f4e8;
  --error: #a02d2d;
  --error-soft: #fde9e7;
  --review: #6c3ca0;
  --review-soft: #f0e8fb;
  --shadow: 0 12px 36px rgba(31, 39, 51, 0.1);
  --radius-card: 16px;
  --radius-control: 12px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--page); }
body { min-width: 320px; min-height: 100%; margin: 0; background: var(--page); }
button, input, textarea, select { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }
.ui-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

:focus-visible {
  outline: 3px solid rgba(0, 104, 212, 0.38);
  outline-offset: 3px;
}

.app-shell {
  position: relative;
  width: min(100%, 460px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.white-shell { background: #fff; }

.login-body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 20px calc(28px + var(--safe-bottom));
  background: #f5f5f7;
}

.login-shell {
  width: min(100%, 420px);
  padding: 34px 28px 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 56px rgba(31, 39, 51, 0.12);
}

.login-brand {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: var(--accent);
  font-size: 28px;
  font-weight: 760;
}

.login-eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.login-shell h1 { margin: 0; font-size: 30px; line-height: 1.18; }
.login-copy { margin: 12px 0 26px; color: var(--muted); line-height: 1.55; }
.login-form { display: grid; gap: 10px; }
.login-form label { font-weight: 680; }
.login-form input {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid #c8cbd1;
  border-radius: 12px;
  background: #fff;
  font-size: 22px;
  letter-spacing: 0.12em;
}
.login-form .primary-button { margin-top: 8px; }
.login-error { margin: 2px 0 0; }
.login-footnote { margin: 22px 0 0; color: var(--faint); font-size: 13px; line-height: 1.5; }

.synthetic-banner {
  min-height: 28px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 16px 6px;
  color: #4f545a;
  background: #e8eaee;
  text-align: center;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.page-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  min-height: 58px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(229, 230, 234, 0.72);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px) saturate(150%);
}

.page-bar > strong { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.page-bar-spacer { width: 72px; }

.page-content,
.dashboard-content {
  padding: 22px 18px calc(112px + var(--safe-bottom));
}

.dashboard-content { padding-top: 28px; }
.dashboard-heading { margin-bottom: 20px; }
.dashboard-heading p { margin: 8px 0 0; color: var(--muted); font-size: 15px; font-weight: 550; }
.dashboard-heading h1 { margin: 0; font-size: 27px; line-height: 1.16; letter-spacing: -0.025em; }

h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { font-size: 27px; line-height: 1.2; letter-spacing: -0.025em; }
h2 { font-size: 21px; line-height: 1.25; letter-spacing: -0.018em; }
p { line-height: 1.55; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.metric-card {
  display: grid;
  min-width: 0;
  min-height: 106px;
  align-content: center;
  gap: 7px;
  border: 0;
  border-radius: 16px;
  padding: 12px 8px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}
.metric-card strong { font-size: 31px; line-height: 1; }
.metric-card span { font-size: 14px; font-weight: 650; white-space: nowrap; }
.metric-blue strong { color: #0670d8; }
.metric-orange strong { color: #b45f06; }
.metric-green strong { color: var(--success); }

.review-nudge {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 66px;
  gap: 10px;
  margin-bottom: 10px;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  color: #075aa8;
  background: #e4f1ff;
  text-align: left;
  cursor: pointer;
}
.review-nudge > .ui-icon { width: 26px; height: 26px; }
.review-nudge span { display: grid; gap: 2px; }
.review-nudge strong { font-size: 15px; }
.review-nudge small { color: #3e6283; font-size: 12px; }

.priority-panel {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px;
  border-radius: var(--radius-card);
  color: #f8fbff;
  background: var(--accent);
  box-shadow: 0 14px 32px rgba(0, 104, 212, 0.2);
}

.priority-panel p { margin: 0; color: #e5f1ff; font-size: 15px; }
.priority-panel .priority-message { margin-bottom: 8px; color: #fdfdfd; font-size: 22px; font-weight: 750; line-height: 1.24; }
.priority-message strong { font-size: 31px; }
.priority-panel.priority-clear { color: var(--ink); background: var(--surface-raised); box-shadow: none; }
.priority-panel.priority-clear p { color: var(--muted); }
.priority-panel.priority-clear .priority-message { color: var(--ink); }
.priority-button {
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--accent);
  background: #fdfdfd;
  font-size: 17px;
  font-weight: 750;
  cursor: pointer;
}

.status-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 26px;
  padding: 4px;
  border-radius: 14px;
  background: #e5e7eb;
}

.status-tab {
  display: grid;
  min-width: 0;
  min-height: 52px;
  place-items: center;
  gap: 1px;
  border: 0;
  border-radius: 11px;
  color: #555a60;
  background: transparent;
  cursor: pointer;
}

.status-tab span { font-size: 13px; font-weight: 650; white-space: nowrap; }
.status-tab strong { font-size: 17px; }
.status-tab.is-selected { color: var(--accent); background: var(--surface-raised); box-shadow: 0 2px 8px rgba(31, 39, 51, 0.08); }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px 12px; }
.section-heading h1, .section-heading h2 { margin: 0; }
.section-heading > span { color: var(--muted); font-size: 14px; }
.compact-heading { margin-top: 26px; }

.work-order-list {
  display: grid;
  gap: 10px;
}

.work-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 88px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: 16px;
  color: var(--ink);
  background: var(--surface-raised);
  text-align: left;
  cursor: pointer;
}

.work-order-copy { display: grid; min-width: 0; gap: 3px; }
.work-order-copy strong { font-size: 16px; letter-spacing: 0.005em; }
.work-order-copy span { overflow: hidden; color: #4f545a; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.work-order-copy small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 122px;
  min-height: 32px;
  border-radius: 999px;
  padding: 6px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.tone-warning { color: var(--warning); background: var(--warning-soft); }
.tone-success { color: var(--success); background: var(--success-soft); }
.tone-info { color: var(--info-ink); background: var(--accent-soft); }
.tone-review { color: var(--review); background: var(--review-soft); }
.tone-neutral { color: #545960; background: #e8eaee; }

.primary-button,
.secondary-button,
.new-order-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  border-radius: var(--radius-control);
  padding: 0 18px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
}

.primary-button { border: 1px solid var(--accent); color: #fdfdfd; background: var(--accent); }
.primary-button:hover { background: var(--accent-pressed); }
.secondary-button { border: 1px solid #bfc3c9; color: var(--accent); background: var(--surface-raised); }
.secondary-button:hover { background: var(--accent-soft); }
.primary-button:active, .secondary-button:active, .priority-button:active, .new-order-fab:active, .work-order-row:active { transform: scale(0.985); }
.primary-button:disabled, .secondary-button:disabled, button:disabled { opacity: 0.48; cursor: not-allowed; transform: none; }

.text-button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  padding: 0;
  color: var(--accent);
  background: transparent;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}

.back-button { display: inline-flex; align-items: center; gap: 3px; text-align: left; }
.back-button .ui-icon { width: 20px; height: 20px; }

.new-order-fab {
  position: fixed;
  z-index: 12;
  right: max(18px, calc((100vw - 460px) / 2 + 18px));
  bottom: calc(76px + var(--safe-bottom));
  width: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: #fdfdfd;
  background: var(--accent);
  box-shadow: 0 10px 24px rgba(0, 104, 212, 0.28);
}

.new-order-fab > .ui-icon { width: 22px; height: 22px; }

.bottom-nav {
  position: fixed;
  z-index: 11;
  bottom: 0;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(100%, 460px);
  min-height: calc(68px + var(--safe-bottom));
  transform: translateX(-50%);
  border-top: 1px solid rgba(211, 214, 220, 0.88);
  padding: 6px 18px var(--safe-bottom);
  background: rgba(252, 252, 253, 0.96);
  backdrop-filter: blur(20px) saturate(160%);
}

.bottom-nav-item {
  display: grid;
  min-width: 76px;
  min-height: 54px;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 0;
  border-radius: 11px;
  color: #666b71;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.bottom-nav-item.is-active { color: #fff; background: var(--accent); }
.nav-icon { width: 21px; height: 21px; }

.empty-state {
  padding: 34px 22px;
  border: 1px dashed #c9ccd2;
  border-radius: var(--radius-card);
  text-align: center;
  background: rgba(253, 253, 253, 0.55);
}

.empty-state strong { font-size: 17px; }
.empty-state p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }

.capture-panel {
  display: grid;
  min-height: calc(100dvh - 220px);
  align-content: center;
  gap: 24px;
}

.capture-copy { text-align: center; }
.capture-copy h1 { margin: 18px 0 8px; }
.capture-copy p { max-width: 300px; margin: 0 auto; color: var(--muted); font-size: 16px; }
.camera-mark { display: grid; width: 74px; height: 74px; margin: 0 auto; place-items: center; border-radius: 22px; color: var(--ink); background: #e7e9ed; }
.camera-icon { width: 40px; height: 40px; stroke-width: 1.7; }
.capture-actions, .stacked-actions { display: grid; gap: 12px; }
.order-camera-tile {
  display: grid;
  min-height: 350px;
  place-content: center;
  gap: 12px;
  border-radius: 24px;
  padding: 30px 22px;
  color: #f4f4f5;
  background: #1d1d1f;
  text-align: center;
  cursor: pointer;
}
.order-camera-tile .camera-mark { color: #fff; background: transparent; }
.order-camera-tile strong { font-size: 18px; }
.order-camera-tile small { color: #c7c7cc; font-size: 13px; }
.gallery-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--accent);
  background: transparent;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  font-weight: 750;
  cursor: pointer;
}
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-button:focus-within {
  outline: 3px solid rgba(0, 104, 212, 0.38);
  outline-offset: 3px;
}
.privacy-copy { max-width: 330px; margin: 20px auto 0; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.55; }

.selected-photo-panel {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.selected-photo-panel img { display: block; width: 100%; height: min(48dvh, 390px); object-fit: contain; background: #252527; }
.photo-file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.photo-file-row span { display: grid; min-width: 0; gap: 3px; }
.photo-file-row strong { font-size: 15px; }
.photo-file-row small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.selected-photo-panel + .stacked-actions, .inline-alert + .stacked-actions { margin-top: 18px; }

.inline-alert {
  margin-bottom: 18px;
  border-radius: var(--radius-control);
  padding: 15px 16px;
}
.compact-alert { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; }
.compact-alert > .ui-icon { width: 18px; height: 18px; margin-top: 1px; }
.compact-alert p { margin: 0; }
.inline-alert strong { font-size: 15px; }
.inline-alert p { margin: 5px 0 0; font-size: 14px; }
.info-alert { color: var(--info-ink); background: var(--accent-soft); }
.warning-alert { color: var(--warning); background: var(--warning-soft); }
.error-alert { color: var(--error); background: var(--error-soft); }
.review-alert { color: var(--review); background: var(--review-soft); }
.neutral-alert { color: #4d535a; background: #e9ebef; }

.form-page form, .worker-page form { display: grid; gap: 20px; }
.field-group { display: grid; gap: 8px; }
.field-group label, .choice-field legend {
  color: #34383d;
  font-size: 15px;
  font-weight: 700;
}
.field-group label span { color: var(--muted); font-size: 12px; font-weight: 550; }
.field-group label em, .choice-field legend em { color: var(--error); font-size: 12px; font-style: normal; }
input, textarea, select {
  width: 100%;
  min-height: 52px;
  border: 1px solid #bfc3c9;
  border-radius: var(--radius-control);
  padding: 13px 14px;
  color: var(--ink);
  background: var(--surface-raised);
  font-size: 16px;
  line-height: 1.4;
}
textarea { min-height: 112px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #6a6f75; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: 3px solid rgba(0, 104, 212, 0.18); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-error { margin: 0; color: var(--error); font-size: 13px; font-weight: 650; }
.has-error input, .has-error textarea, .has-error select, .has-error .choice-list { border-color: var(--error); }
.field-help { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sticky-form-actions { display: grid; gap: 10px; margin-top: 6px; }

.confirmation-page form { gap: 18px; }
.confirmation-list { border-top: 1px solid #ececf0; }
.store-picker {
  display: grid;
  gap: 12px;
  padding: 18px 2px;
  border-bottom: 1px solid #ececf0;
}
.store-picker-heading h2 { margin: 0; font-size: 18px; }
.store-picker-heading p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.store-search-label { color: #34383d; font-size: 15px; font-weight: 700; }
.store-search-input { min-height: 54px; font-size: 17px; }
.store-search-status { min-height: 20px; margin: -4px 0 0; color: var(--muted); font-size: 13px; }
.store-results {
  display: grid;
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  overscroll-behavior: contain;
}
.store-option {
  display: grid;
  min-height: 76px;
  gap: 5px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.store-option:last-child { border-bottom: 0; }
.store-option:hover, .store-option:focus-visible { background: var(--accent-soft); }
.store-option-heading { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; }
.store-option-heading strong { min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.store-option-heading b { flex: 0 0 auto; color: var(--info-ink); font-size: 14px; }
.store-option-detail { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.store-option-states { display: flex; flex-wrap: wrap; gap: 6px; }
.store-state {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  color: #535961;
  background: #e9ebef;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.store-state-pending { color: var(--warning); background: var(--warning-soft); }
.store-state-confirmed { color: var(--success); background: var(--success-soft); }
.store-state-paused { color: var(--error); background: var(--error-soft); }
.selected-store { border-radius: var(--radius-control); padding: 14px; background: var(--success-soft); }
.selected-store-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.selected-store-heading > span:first-child { display: grid; min-width: 0; gap: 3px; }
.selected-store-heading strong { font-size: 16px; overflow-wrap: anywhere; }
.selected-store-heading small { color: #396148; font-size: 13px; font-weight: 650; }
.selected-store p { margin: 8px 0 0; color: #396148; font-size: 13px; }
.store-review-warning { margin-top: 10px; border-radius: 9px; padding: 10px; color: var(--warning); background: var(--warning-soft); font-size: 13px; line-height: 1.45; }
.manual-store-button {
  min-height: 48px;
  border: 0;
  padding: 0 8px;
  color: var(--accent);
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.compact-store-alert { margin: 0; }
.compact-store-alert .text-button { width: auto; margin-top: 4px; }
.store-no-results { padding: 24px 16px; text-align: center; }
.store-no-results strong { font-size: 15px; }
.store-no-results p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.confirmation-row { position: relative; display: grid; gap: 4px; border-bottom: 1px solid #ececf0; padding: 14px 2px; }
.confirmation-row > label { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 650; }
.confirmation-row > label span { font-size: 11px; font-weight: 550; }
.confirmation-control { position: relative; }
.confirmation-control input,
.confirmation-control textarea { min-height: 36px; border: 0; border-radius: 0; padding: 3px 38px 3px 0; background: transparent; font-weight: 650; }
.confirmation-control textarea { min-height: 62px; }
.date-clarifier { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.confirmation-control input:focus,
.confirmation-control textarea:focus { outline: 2px solid rgba(0, 104, 212, 0.22); outline-offset: 3px; }
.edit-icon { position: absolute; top: 7px; right: 2px; width: 20px; height: 20px; color: var(--accent); pointer-events: none; }
.confirmation-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-height: 54px;
  gap: 10px;
  border-radius: 12px;
  padding: 8px 12px;
  background: #f5f5f7;
  cursor: pointer;
}
.confirmation-check input { width: 22px; height: 22px; min-height: 22px; margin: 0; accent-color: var(--accent); }
.confirmation-check span { font-size: 14px; font-weight: 650; }
.confirmation-check .field-error { grid-column: 2; }

.settings-page h1 { margin-top: 0; }
.settings-list { margin-bottom: 24px; border-radius: 16px; padding: 2px 16px; background: #fff; }
.settings-list div { display: grid; gap: 5px; border-bottom: 1px solid var(--line); padding: 15px 0; }
.settings-list div:last-child { border-bottom: 0; }
.settings-list span { color: var(--muted); font-size: 12px; }
.settings-list strong { font-size: 15px; }

.success-seal,
.state-symbol {
  display: grid;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 50%;
  color: var(--success);
  background: var(--success-soft);
  font-size: 38px;
  font-weight: 750;
}
.state-symbol-error { color: var(--error); background: var(--error-soft); }
.success-icon, .state-icon { width: 40px; height: 40px; }
.centered-state { display: grid; min-height: calc(100dvh - 112px); place-items: center; align-content: center; text-align: center; }
.centered-state h1 { margin: 0 0 10px; }
.centered-state > p { max-width: 340px; margin: 0 auto 24px; color: var(--muted); font-size: 16px; }
.centered-state > .primary-button { max-width: 330px; }
.full-width-actions { width: 100%; max-width: 350px; }

.share-page { text-align: center; }
.share-page h1 { margin: 0 0 8px; }
.lead-copy { max-width: 340px; margin: 0 auto 22px; color: var(--muted); font-size: 16px; }
.summary-card { margin: 18px 0; border-radius: var(--radius-card); padding: 5px 16px; background: var(--surface-raised); }
.summary-list { margin: 0; }
.summary-list div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; }
.summary-list div:last-child { border-bottom: 0; }
.summary-list dt { color: var(--muted); font-size: 13px; }
.summary-list dd { margin: 0; font-size: 14px; font-weight: 650; }
.link-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius-control); padding: 7px 8px 7px 13px; background: var(--surface-raised); text-align: left; }
.link-box > span { overflow: hidden; color: #50555b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-button { background: #087b48; border-color: #087b48; }
.whatsapp-button:hover { background: #06653b; }
.whatsapp-button, .icon-text-button { gap: 8px; }
.whatsapp-button .ui-icon { width: 23px; height: 23px; }
.icon-text-button { display: inline-flex; align-items: center; justify-content: center; }
.icon-text-button .ui-icon { width: 19px; height: 19px; }
.link-maintenance { display: flex; justify-content: center; gap: 22px; margin: 10px 0 16px; }
.danger-text-button { color: var(--error); }

.share-summary {
  display: grid;
  gap: 5px;
  margin: 20px 0;
  border-radius: 16px;
  padding: 18px;
  background: #f2f2f5;
  text-align: left;
}
.share-summary strong { font-size: 18px; }
.share-summary span { font-size: 15px; font-weight: 650; }
.share-summary small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.share-summary em { margin-top: 5px; color: var(--muted); font-size: 12px; font-style: normal; }
.share-link-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--accent);
  text-align: left;
}
.share-link-row p { overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.secure-link-recovery {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  margin: 16px 0;
  border-radius: 14px;
  padding: 15px;
  color: var(--warning);
  background: var(--warning-soft);
  text-align: left;
}
.secure-link-recovery strong { font-size: 14px; }
.secure-link-recovery p { margin: 5px 0 0; font-size: 13px; }
.share-safety-note { margin: 4px auto 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.worker-shell { background: #fafafa; }
.worker-masthead {
  display: grid;
  gap: 2px;
  padding: calc(15px + env(safe-area-inset-top, 0px)) 18px 14px;
  color: #fff;
  background: #0877d1;
}
.worker-masthead strong { font-size: 20px; }
.worker-masthead span { color: #dceeff; font-size: 12px; }
.worker-page { padding-top: 16px; padding-bottom: calc(42px + var(--safe-bottom)); }
.worker-store { margin: 0 0 14px; color: var(--muted); font-size: 14px; font-weight: 650; }
.worker-intro { margin-bottom: 18px; }
.worker-intro h1 { margin: 12px 0 4px; font-size: 26px; }
.worker-intro p { margin: 0; color: var(--muted); font-size: 16px; font-weight: 600; }
.locked-order-panel { display: grid; gap: 0; margin-bottom: 0; border-radius: var(--radius-card); padding: 4px 16px; background: var(--surface-muted); }
.locked-order-panel h2 { margin: 11px 0 4px; font-size: 15px; }
.locked-order-panel div { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: start; gap: 10px; padding: 11px 0; border-bottom: 1px solid #d5d8dd; }
.locked-order-panel div:last-child { border-bottom: 0; }
.locked-order-panel span, .review-report span, .invoice-meta dt, .review-block > span { color: var(--muted); font-size: 12px; font-weight: 650; }
.locked-order-panel strong { font-size: 15px; line-height: 1.45; }
.draft-restored, .autosave-note { color: var(--success); font-size: 13px; font-weight: 650; }
.draft-restored { margin-bottom: 18px; border-radius: 10px; padding: 12px; background: var(--success-soft); }
.autosave-note { margin: -4px 0 0; text-align: center; }
.choice-field { min-width: 0; margin: 0; border: 0; padding: 0; }
.choice-field legend { margin-bottom: 9px; }
.choice-list { overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.choice-row { display: flex; align-items: center; min-height: 54px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.choice-row:last-child { border-bottom: 0; }
.choice-row input { width: 22px; min-width: 22px; height: 22px; min-height: 22px; margin: 0; accent-color: var(--accent); }
.choice-row span { color: #303439; font-size: 15px; font-weight: 600; }

.paper-required-notice {
  margin-bottom: 20px;
  border-radius: 14px;
  padding: 16px;
  color: var(--warning);
  background: var(--warning-soft);
}
.paper-required-notice > strong { font-size: 17px; }
.paper-required-notice ol { display: grid; gap: 7px; margin: 12px 0; padding-left: 24px; font-size: 15px; font-weight: 650; line-height: 1.4; }
.paper-required-notice p { margin: 0; font-size: 13px; }
.paper-capture { display: grid; gap: 12px; }
.paper-guide {
  display: grid;
  min-height: 250px;
  place-content: center;
  gap: 10px;
  border: 2px dashed #aeb4bc;
  border-radius: 18px;
  padding: 24px;
  color: #3c4249;
  background: #f0f1f4;
  text-align: center;
}
.paper-guide-icon { width: 44px; height: 44px; margin: 0 auto 5px; color: var(--accent); }
.paper-guide strong { font-size: 17px; }
.paper-guide small { max-width: 280px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sr-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.paper-preview-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.paper-preview-frame { display: grid; min-height: 360px; place-items: center; padding: 14px; background: #2d2e31; }
.paper-preview-frame img { display: block; width: 100%; max-height: 58dvh; object-fit: contain; }
.paper-file-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.paper-file-meta > span { display: grid; min-width: 0; gap: 3px; }
.paper-file-meta strong { font-size: 14px; }
.paper-file-meta small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.paper-file-meta .text-button { flex: 0 0 auto; padding-inline: 8px; }
.paper-preview-card > .field-error { padding: 0 14px 12px; }
.upload-progress-copy { min-height: 44px; margin: 0 0 14px; border-radius: 10px; padding: 11px; color: var(--info-ink); background: var(--accent-soft); font-size: 13px; font-weight: 650; }

.confirm-dialog {
  width: min(calc(100% - 28px), 410px);
  border: 0;
  border-radius: 20px;
  padding: 22px;
  color: var(--ink);
  background: var(--surface-raised);
  box-shadow: 0 28px 80px rgba(31, 39, 51, 0.28);
}
.confirm-dialog::backdrop { background: rgba(29, 29, 31, 0.5); backdrop-filter: blur(2px); }
.confirm-dialog h2 { margin: 0 0 8px; }
.confirm-dialog > form > p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.dialog-summary { margin: 0 0 20px; border-radius: 12px; padding: 4px 14px; background: var(--surface-muted); }
.dialog-summary div { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid #d4d7dc; }
.dialog-summary div:last-child { border-bottom: 0; }
.dialog-summary dt { color: var(--muted); font-size: 12px; }
.dialog-summary dd { margin: 0; font-size: 14px; font-weight: 650; }
.dialog-actions { display: grid; gap: 9px; }

.receipt-card { display: grid; width: 100%; max-width: 350px; gap: 5px; margin: 0 auto 20px; border-radius: var(--radius-card); padding: 18px; background: var(--surface-raised); text-align: left; }
.receipt-card span, .receipt-card small { color: var(--muted); font-size: 13px; }
.receipt-card strong { font-size: 17px; }
.quiet-note { font-size: 13px !important; }

.work-order-title { margin-bottom: 18px; }
.work-order-title > span:first-child { color: var(--muted); font-size: 14px; font-weight: 650; }
.work-order-title h1 { margin: 7px 0; }
.work-order-title p { margin: 0; color: var(--muted); }
.work-order-title .status-badge { margin-top: 8px; }
.verification-banner {
  display: flex;
  align-items: center;
  min-height: 52px;
  gap: 9px;
  margin-bottom: 18px;
  border-radius: 12px;
  padding: 10px 13px;
  color: var(--success);
  background: var(--success-soft);
  font-size: 14px;
}
.verification-banner .ui-icon { width: 22px; height: 22px; }
.review-order-card { margin-bottom: 18px; border-bottom: 1px solid var(--line); padding: 2px 2px 16px; }
.review-order-card div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.review-order-card div span { color: var(--muted); font-size: 12px; font-weight: 650; }
.review-order-card div small { color: var(--accent); font-size: 12px; font-weight: 650; }
.review-order-card > strong { font-size: 16px; line-height: 1.45; }
.review-order-card > p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.review-report { overflow: hidden; margin-bottom: 20px; border-radius: var(--radius-card); background: var(--surface-raised); }
.review-person, .review-block, .review-grid { padding: 17px; border-bottom: 1px solid var(--line); }
.review-report > :last-child { border-bottom: 0; }
.review-person { display: grid; gap: 4px; }
.review-person strong { font-size: 19px; }
.review-person small { color: var(--muted); font-size: 12px; }
.review-block ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.review-block li { position: relative; padding-left: 18px; font-size: 15px; font-weight: 650; }
.review-block li::before { content: ""; position: absolute; top: 0.55em; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.review-block p { margin: 8px 0 0; font-size: 15px; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.review-grid div { display: grid; gap: 5px; }
.review-grid strong { font-size: 15px; }
.review-actions { display: grid; gap: 10px; }
.review-accept-button { background: var(--success); border-color: var(--success); }
.review-accept-button:hover { background: #10552a; border-color: #10552a; }
.secondary-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.review-note-form { display: grid; gap: 12px; margin-top: 8px; border-radius: var(--radius-card); padding: 16px; background: var(--surface-muted); }
.review-note-form .text-button { justify-self: center; }

.original-evidence { margin-bottom: 22px; }
.original-evidence .section-heading h2 { font-size: 21px; }
.paper-image-button {
  display: grid;
  width: 100%;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid #c6c9ce;
  border-radius: 14px;
  padding: 0;
  color: #fff;
  background: #292a2d;
  cursor: zoom-in;
}
.paper-image-button img { display: block; width: 100%; height: min(57dvh, 500px); object-fit: contain; background: #292a2d; }
.paper-image-button > span { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: #202124; font-size: 15px; font-weight: 700; }
.paper-image-button .ui-icon { width: 20px; height: 20px; }
.evidence-meta { margin: 9px 2px 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.ocr-review-form { display: grid; gap: 20px; }
.quality-hints { display: grid; gap: 7px; margin: -8px 0 0; border-radius: 12px; padding: 13px 13px 13px 32px; color: var(--warning); background: #fff7e8; font-size: 13px; line-height: 1.45; }
.ocr-fields, .ocr-work-items, .optional-paper-fields, .stamp-review-gate { display: grid; gap: 12px; }
.ocr-fields h2, .optional-paper-fields h2, .stamp-review-gate h2 { margin: 0; }
.optional-paper-fields > p { margin: -6px 0 2px; color: var(--muted); font-size: 13px; }
.ocr-field { display: grid; gap: 7px; border-radius: 12px; padding: 12px; background: #f2f3f5; }
.ocr-field > label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.ocr-field-meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ocr-field > label small, .confidence-pill { border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 750; }
.confidence-high > label small, .confidence-pill.confidence-high { color: var(--success); background: var(--success-soft); }
.confidence-medium > label small, .confidence-pill.confidence-medium { color: var(--warning); background: var(--warning-soft); }
.confidence-low { background: #fff5e2; }
.confidence-low > label small, .confidence-pill.confidence-low { color: var(--error); background: var(--error-soft); }
.ocr-field input { min-height: 48px; background: #fff; }
.ocr-work-item { display: grid; gap: 11px; min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.ocr-work-item.has-error { border-color: var(--error); background: #fffafa; }
.ocr-work-item legend { display: flex; align-items: center; gap: 9px; padding: 0 4px; font-size: 15px; font-weight: 750; }
.modified-mark { border-radius: 999px; padding: 4px 8px; color: var(--info-ink); background: var(--accent-soft); font-size: 11px; font-style: normal; font-weight: 750; line-height: 1.2; }
.ocr-field.is-modified, .ocr-work-item.is-modified { box-shadow: inset 3px 0 0 var(--accent); }
.work-item-modified { width: max-content; margin: -4px 0 0; }
.ocr-description, .ocr-sub-label, .ocr-completion-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.ocr-work-item textarea { min-height: 82px; }
.ocr-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ocr-action-grid label { display: flex; min-height: 48px; align-items: center; gap: 8px; border-radius: 10px; padding: 7px 9px; background: #f1f2f4; cursor: pointer; }
.ocr-action-grid input { width: 21px; min-width: 21px; height: 21px; min-height: 21px; margin: 0; accent-color: var(--accent); }
.ocr-action-grid span { font-size: 13px; font-weight: 650; }
.completion-gate { margin: 0; }
.review-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; min-height: 66px; gap: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; cursor: pointer; }
.review-check:has(input:disabled) { cursor: not-allowed; opacity: 0.64; }
.review-check input { width: 22px; min-width: 22px; height: 22px; min-height: 22px; margin: 1px 0 0; accent-color: var(--success); }
.review-check > span { display: grid; gap: 4px; }
.review-check strong { font-size: 14px; }
.review-check small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.review-check > .field-error { grid-column: 2; font-style: normal; }
.original-dialog { width: min(calc(100% - 18px), 720px); max-height: calc(100dvh - 18px); border: 0; border-radius: 16px; padding: 0; color: var(--ink); background: #f7f7f8; }
.original-dialog::backdrop { background: rgba(17, 18, 20, 0.78); }
.original-dialog-bar { position: sticky; z-index: 2; top: 0; display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: rgba(253, 253, 253, 0.96); }
.zoom-control { display: grid; grid-template-columns: auto minmax(120px, 1fr) 50px; min-height: 58px; align-items: center; gap: 10px; padding: 8px 14px; color: var(--muted); font-size: 13px; font-weight: 700; }
.zoom-control input { min-height: 44px; padding: 0; }
.zoom-control output { color: var(--ink); text-align: right; }
.original-zoom-stage { overflow: auto; min-height: 65dvh; padding: 12px; background: #252629; touch-action: pinch-zoom; }
.original-zoom-stage img { display: block; width: 100%; max-width: none; margin: 0 auto; }
.amount-confirm-page { text-align: center; }
.amount-confirm-page h1 { margin: 0 0 8px; }
.amount-confirm-page > p { margin: 0 auto 22px; color: var(--muted); }
.amount-confirm-page form { display: grid; gap: 14px; text-align: left; }
.amount-input { display: grid; gap: 8px; }
.amount-input > label { font-size: 15px; font-weight: 700; }
.amount-input > label em { color: var(--error); font-size: 12px; font-style: normal; }
.amount-input > div { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid #bfc3c9; border-radius: 12px; background: #fff; }
.amount-input > div > span { padding-left: 14px; color: var(--muted); font-size: 14px; font-weight: 750; }
.amount-input input { border: 0; border-radius: 0; text-align: right; font-size: 22px; font-weight: 750; }
.amount-input.has-error > div { border-color: var(--error); }

.invoice-page { padding-inline: 12px; background: #f2f2f5; }
.invoice-paper {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 8px;
  padding: 28px 22px;
  background: #fdfdfd;
  box-shadow: 0 10px 28px rgba(31, 39, 51, 0.12);
}
.invoice-paper header { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 18px; }
.invoice-paper header > div:first-child { display: grid; max-width: 48%; gap: 5px; }
.invoice-paper header strong { font-size: 13px; }
.invoice-paper header span { color: var(--muted); font-size: 9px; }
.invoice-title { text-align: right; }
.invoice-title h1 { margin: 3px 0 0; font-size: 21px; }
.draft-watermark { position: absolute; top: 43%; left: 9%; transform: rotate(-28deg); color: rgba(160, 45, 45, 0.09); font-size: 65px; font-weight: 850; letter-spacing: 0.08em; pointer-events: none; }
.invoice-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 20px 0; }
.invoice-meta div { display: grid; gap: 4px; }
.invoice-meta dd { margin: 0; font-size: 11px; font-weight: 650; }
.invoice-line-head, .invoice-line { display: grid; grid-template-columns: minmax(0, 1fr) 42px 76px; gap: 8px; }
.invoice-line-head { border-radius: 5px 5px 0 0; padding: 8px; color: #fdfdfd; background: #34383d; font-size: 9px; font-weight: 700; }
.invoice-line { min-height: 92px; align-items: start; border: 1px solid var(--line); border-top: 0; padding: 11px 8px; font-size: 10px; }
.invoice-line > div { display: grid; gap: 5px; }
.invoice-line small { color: var(--muted); font-size: 9px; }
.invoice-total { display: flex; justify-content: flex-end; gap: 24px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 12px; }
.invoice-draft-note { margin-top: 16px; border-radius: 8px; padding: 9px 12px; color: var(--warning); background: var(--warning-soft); text-align: center; font-size: 10px; font-weight: 750; }
.invoice-paper footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 80px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 10px; }
.invoice-page > .stacked-actions { margin-top: 18px; }
.invoice-boundary { margin: 14px 4px 0; color: var(--muted); text-align: center; font-size: 12px; }
.invoice-page .primary-button .ui-icon, .invoice-page .gallery-button .ui-icon { width: 20px; height: 20px; }

.skeleton { overflow: hidden; border-radius: 12px; background: #e3e5e9; }
.skeleton::after { content: ""; display: block; width: 42%; height: 100%; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(253, 253, 253, 0.72), transparent); animation: skeleton-shift 1.1s ease-in-out infinite; }
.skeleton-heading { width: 56%; height: 34px; margin: 12px 0 24px; }
.skeleton-card { height: 144px; margin-bottom: 18px; }
.skeleton-row { height: 88px; margin-bottom: 10px; }

.toast {
  position: fixed;
  z-index: 50;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 50%;
  width: min(calc(100% - 32px), 400px);
  transform: translateX(-50%);
  border-radius: var(--radius-control);
  padding: 13px 16px;
  color: #fdfdfd;
  background: #30343a;
  box-shadow: 0 14px 36px rgba(31, 39, 51, 0.22);
  text-align: center;
  font-size: 14px;
  font-weight: 650;
}
.toast-error { background: #842727; }
.offline-banner { position: fixed; z-index: 45; right: 12px; bottom: calc(12px + var(--safe-bottom)); left: 12px; max-width: 430px; margin: 0 auto; border-radius: 11px; padding: 12px 14px; color: var(--warning); background: var(--warning-soft); box-shadow: var(--shadow); text-align: center; font-size: 13px; font-weight: 650; }

@keyframes skeleton-shift { to { transform: translateX(300%); } }

@media (max-width: 380px) {
  .page-content, .dashboard-content { padding-inline: 14px; }
  .dashboard-content { padding-top: 24px; }
  .dashboard-heading h1 { font-size: 27px; }
  .metric-grid { gap: 8px; }
  .metric-card { min-height: 98px; padding-inline: 5px; }
  .metric-card strong { font-size: 28px; }
  .metric-card span { font-size: 13px; }
  .priority-panel { padding: 19px; }
  .status-tab span { font-size: 12px; }
  .work-order-row { padding: 14px; }
  .status-badge { max-width: 104px; padding-inline: 8px; }
  .field-pair { grid-template-columns: 1fr; }
  .secondary-action-grid { grid-template-columns: 1fr; }
  .invoice-paper { padding-inline: 17px; }
  .paper-guide { min-height: 220px; padding-inline: 18px; }
  .paper-preview-frame, .paper-image-button { min-height: 310px; }
  .paper-file-meta { align-items: flex-start; }
  .ocr-action-grid { gap: 5px; }
  .ocr-action-grid label { padding-inline: 7px; }
}

@media (min-width: 521px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100dvh - 48px); border-radius: 30px; }
  .bottom-nav { bottom: 24px; border-radius: 0 0 30px 30px; }
  .new-order-fab { bottom: calc(100px + var(--safe-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
  body { padding: 0; background: #fdfdfd; }
  .app-shell { width: 100%; min-height: auto; box-shadow: none; }
  .synthetic-banner, .page-bar, .no-print, .bottom-nav, .new-order-fab { display: none !important; }
  .page-content.invoice-page { padding: 0; }
  .invoice-paper { min-height: 100vh; border-radius: 0; box-shadow: none; }
}
.invoice-wo-reference { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; border-radius: 8px; padding: 10px 12px; background: #f1f1f3; font-size: 11px; }
.invoice-wo-reference span { color: var(--muted); }