:root {
  --bg: #f6f7fb;
  --ink: #1c2430;
  --muted: #657083;
  --line: #dfe5ef;
  --red: #e23d4f;
  --amber: #f6b44b;
  --green: #29a36a;
  --t-dark: #0b1324;
  --t-dark2: #16213e;
  --t-accent: #3b5bdb;
  --t-accent-light: #eef1ff;
  --t-cta-from: #caa356;
  --t-cta-to: #dcb878;
  --t-cta-text: #2a1f0a;
  --blue: var(--t-accent);
  font-family: "Segoe UI", Tahoma, sans-serif;
}
[data-theme="skygold"] { --t-dark:#0b4b57; --t-dark2:#12697a; --t-accent:#35a9c2; --t-accent-light:#e6f7fa; --t-cta-from:#78cde0; --t-cta-to:#a9e4ef; --t-cta-text:#07343e; }
[data-theme="navy"] { --t-dark:#0b1730; --t-dark2:#172b50; --t-accent:#355b9e; --t-accent-light:#edf2fa; --t-cta-from:#caa356; --t-cta-to:#e2c47d; --t-cta-text:#2a1f0a; }
[data-theme="pine"] { --t-dark:#123b2b; --t-dark2:#1e5a42; --t-accent:#3e9469; --t-accent-light:#e9f6ef; --t-cta-from:#7acfa1; --t-cta-to:#b4e7ca; --t-cta-text:#0e3b25; }
[data-theme="blue"] { --t-dark:#10377b; --t-dark2:#1956b4; --t-accent:#2f72df; --t-accent-light:#eaf2ff; --t-cta-from:#8bb8f0; --t-cta-to:#c7ddfa; --t-cta-text:#0e3470; }
[data-theme="steel"] { --t-dark:#22282e; --t-dark2:#3b444c; --t-accent:#e56a2f; --t-accent-light:#fff0e8; --t-cta-from:#f07b3c; --t-cta-to:#ffa66f; --t-cta-text:#331408; }
[data-theme="terracotta"] { --t-dark:#641d32; --t-dark2:#8b2c49; --t-accent:#c25070; --t-accent-light:#fbeaf0; --t-cta-from:#e7a0b5; --t-cta-to:#f3c5d2; --t-cta-text:#531326; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, #fff0f1, transparent 32%), linear-gradient(135deg, #f8fbff, #f2f4f8);
  color: var(--ink);
}
.phone-shell { max-width: 560px; margin: 0 auto; padding: 22px 14px 36px; }
.desktop-shell { max-width: 1180px; margin: 0 auto; padding: 28px 18px 44px; }
.panel {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(25,38,66,.10);
  padding: 20px;
}
.wide { margin-bottom: 18px; }
.hidden { display: none; }
.brand-mark {
  width: 58px; height: 58px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--t-dark), var(--t-accent));
  color: white; border-radius: 8px; font-weight: 800; margin-bottom: 14px;
}
.eyebrow { margin: 0 0 4px; color: var(--blue); font-size: 13px; font-weight: 700; }
h1 { margin: 0 0 18px; font-size: clamp(26px, 7vw, 42px); letter-spacing: 0; }
h2 { margin: 0 0 14px; font-size: 22px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
label { display: grid; gap: 7px; margin: 13px 0; color: var(--muted); font-weight: 700; }
input, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px;
  font: inherit; color: var(--ink); background: #fff;
}
select {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px;
  font: inherit; color: var(--ink); background: #fff;
}
textarea { resize: vertical; }
button, .secondary {
  border: 0; border-radius: 8px; min-height: 46px; padding: 0 16px; font: inherit; font-weight: 800;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.primary { width: 100%; background: linear-gradient(135deg, var(--t-dark2), var(--t-accent)); color: white; }
.confirm-entry {
  width: 100%; background: linear-gradient(135deg, #14895d, var(--green)); color: white;
}
.ghost { background: var(--t-accent-light); color: var(--t-accent); }
.secondary { background: #edf8f2; color: var(--green); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.actions .primary { width: auto; }
.full-link { width: 100%; margin: 8px 0 10px; }
.msg { min-height: 24px; color: #bd2b3b; font-weight: 700; }
.msg.good { color: var(--green); }
.create-shop-link {
  align-items: center; border: 1px solid #f3b2b9; border-radius: 8px; color: var(--red);
  display: flex; font-weight: 800; justify-content: center; min-height: 46px;
  margin-top: 8px; text-decoration: none;
}
.create-shop-link:hover { background: #fff4f5; }
.login-links { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 10px; }
.sub-link { display: inline-block; color: var(--blue); font-weight: 700; text-decoration: none; }
.admin-link { color: var(--red); }
.password-wrap { position: relative; width: 100%; }
.password-wrap input { padding-right: 56px; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; min-height: 38px; padding: 0; background: #f2f5f9; color: var(--muted);
  font-size: 20px;
}
.password-toggle.is-visible { color: var(--blue); background: #e7f0ff; }
.login-heading { color: var(--ink); font-size: 20px; margin: 8px 0 4px; }
.login-credential {
  background: #fff; border: 2px solid #8793a5; color: var(--ink); font-weight: 700;
}
.login-credential::placeholder { color: #8a95a5; }
.login-credential:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(41,163,106,.18); outline: 0; }
.login-password .password-toggle { background: #eef2f7; color: var(--muted); }
.login-password .password-toggle.is-visible { background: #e2f2ea; color: var(--green); }
.remember-login {
  align-items: center; color: var(--muted); display: flex; font-size: 14px; gap: 8px;
  margin: 14px 0; user-select: none;
}
.remember-login input { height: 18px; padding: 0; width: 18px; }
.signup-action {
  align-items: center; background: linear-gradient(135deg, var(--red), #ff7043); border-radius: 8px; color: #fff;
  display: flex; font-weight: 800; justify-content: center; min-height: 46px; margin-top: 9px; text-decoration: none; width: 100%;
}
.signup-action:hover { background: linear-gradient(135deg, #ca3042, #f06036); }
.quick-id-panel {
  background: #f6f8fc;
  border: 1px solid #d7dfeb;
  border-radius: 8px;
  margin-top: 12px;
  padding: 14px;
}
.quick-id-panel h2 {
  color: var(--ink);
  font-size: 18px;
  margin: 0 0 10px;
}
.quick-id-panel label { margin: 10px 0; }
.quick-id-cancel {
  margin-top: 8px;
  width: 100%;
}
.shop-user-header { align-items: start; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 18px; }
.shop-user-header h1 { font-size: 27px; line-height: 1.25; margin: 0 0 5px; }
.shop-code-line { color: var(--blue); font-size: 14px; font-weight: 800; margin: 0; }
.logout-corner {
  background: #eef3fb; color: var(--blue); flex-shrink: 0; font-size: 13px; min-height: 38px; padding: 0 11px;
}
.trial-signup-panel { margin-top: 12px; }
.trial-signup-panel h1 { font-size: 32px; margin-top: 9px; }
.trial-signup-panel input {
  background: #f9fbfe;
  border: 2px solid #738196;
  color: var(--ink);
  font-weight: 700;
}
.trial-signup-panel input::placeholder { color: #687588; }
.trial-signup-panel input:focus {
  background: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(41,163,106,.18);
  outline: 0;
}
.trial-signup-panel .password-toggle {
  border: 1px solid #d9e0eb;
}
.created-accounts {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 18px;
}
.created-accounts h2 {
  font-size: 18px;
  margin-bottom: 12px;
}
.created-accounts-list {
  display: grid;
  gap: 10px;
}
.created-account-card {
  background: #f5f8fc;
  border: 1px solid #ccd6e3;
  border-radius: 8px;
  padding: 12px;
}
.created-account-card p {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
}
.created-account-card strong { color: var(--blue); }
.created-account-card .confirm-entry {
  margin-top: 9px;
  min-height: 40px;
  text-decoration: none;
}
.created-accounts-empty {
  background: #f5f8fc;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
}
.back-link { color: var(--blue); display: inline-block; font-weight: 800; margin-bottom: 20px; text-decoration: none; }
.public-header {
  align-items: center; background: #fff; border-bottom: 1px solid var(--line); display: flex;
  height: 68px; justify-content: space-between; padding: 0 max(calc((100% - 1120px) / 2), 18px);
}
.wordmark { color: var(--red); font-size: 25px; font-weight: 800; text-decoration: none; }
.header-link { color: var(--blue); font-weight: 800; text-decoration: none; }
.signup-shell {
  display: grid; gap: 30px; grid-template-columns: .8fr 1fr; margin: 0 auto;
  max-width: 1120px; padding: 48px 18px 60px;
}
.signup-intro { padding-top: 22px; }
.signup-intro h1 { font-size: 46px; line-height: 1.15; margin: 10px 0 18px; }
.signup-intro > p:not(.eyebrow) { color: var(--muted); font-size: 18px; font-weight: 700; line-height: 1.6; }
.trust-lines { display: grid; gap: 10px; margin-top: 28px; }
.trust-lines span { border-left: 4px solid var(--red); color: var(--ink); font-weight: 800; padding: 9px 14px; }
.signup-panel { padding: 26px; }
.signup-grid { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
.form-separator { border: 0; border-top: 1px solid var(--line); margin: 22px 0 18px; }
.account-heading { font-size: 19px; margin-bottom: 3px; }
.field-note { color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.45; margin: 4px 0 10px; }
.consent-line { align-items: start; display: flex; font-size: 14px; gap: 9px; line-height: 1.45; margin: 18px 0; }
.consent-line input { flex: 0 0 auto; height: 18px; margin-top: 1px; width: 18px; }
.website-field { left: -10000px; position: absolute; }
.public-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 700; padding: 22px 18px; text-align: center; }
.notice { border-left: 5px solid var(--amber); background: #fff8e8; padding: 12px; border-radius: 8px; color: #76521b; font-weight: 700; }
.vehicle-gallery-panel { border-bottom: 1px solid var(--line); margin: 14px 0; padding-bottom: 16px; }
.mobile-home-actions { display: grid; gap: 14px; margin-top: 18px; }
.mobile-home-card { align-items: center; background: #fff; border: 2px solid var(--t-accent); color: var(--ink); display: grid; gap: 14px; grid-template-columns: 54px 1fr; min-height: 112px; padding: 18px; text-align: left; }
.mobile-home-card.search { border-color: var(--t-dark2); }
.mobile-home-card strong { font-size: 22px; }
.mobile-home-card small { color: var(--muted); display: block; font-size: 14px; font-style: normal; font-weight: 700; margin-top: 5px; }
.home-action-icon { align-items: center; background: var(--t-accent-light); border-radius: 8px; display: flex; font-size: 28px; font-style: normal; height: 54px; justify-content: center; width: 54px; }
.mobile-home-card.search .home-action-icon { background: var(--t-accent-light); color: var(--t-dark2); font-family: Arial, sans-serif; font-size: 38px; font-weight: 800; }
.vehicle-gallery-panel h2 { font-size: 20px; margin: 0 0 8px; }
.vehicle-search-row { display: grid; gap: 8px; grid-template-columns: 1fr auto; }
.vehicle-search-row button { width: auto; }
.vehicle-gallery-results { display: grid; gap: 12px; margin-top: 10px; }
.vehicle-gallery-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.vehicle-gallery-card strong, .vehicle-gallery-card small { display: block; }
.vehicle-gallery-card small { color: var(--muted); margin: 3px 0 8px; }
.vehicle-photo-grid { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.vehicle-photo-grid img { aspect-ratio: 1; border-radius: 6px; object-fit: cover; width: 100%; }
.file-box {
  border: 2px dashed #f0a2aa; min-height: 86px; border-radius: 8px; place-items: center; text-align: center;
  background: #fff7f8; color: var(--red);
}
.file-box input { display: none; }
.camera-panel { margin: 12px 0; }
.camera-frame {
  position: relative; min-height: 220px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: #18202b; display: grid; place-items: center;
}
.camera-frame video { width: 100%; max-height: 52vh; object-fit: contain; display: block; }
#cameraHint { position: absolute; color: #fff; font-weight: 800; text-align: center; padding: 14px; }
.photo-source-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.photo-source-actions > button { width: 100%; }
.camera-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.camera-capture-chrome { display: none; }
html.camera-capture-open,
html.camera-capture-open body { background: #000; }
body.camera-capture-open { overflow: hidden; overscroll-behavior: none; touch-action: none; }
.camera-frame.camera-capture-active {
  position: fixed; inset: 0; z-index: 2500;
  min-height: 0; max-height: none; border: 0; border-radius: 0; background: #000; box-shadow: none;
  touch-action: none;
}
.camera-frame.camera-capture-active::after { display: none; }
.camera-frame.camera-capture-active.camera-shutter-feedback::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #000; opacity: 0; animation: roopdd-camera-shutter-blink .16s ease-out;
}
@keyframes roopdd-camera-shutter-blink {
  0% { opacity: 0; }
  38% { opacity: .94; }
  100% { opacity: 0; }
}
.camera-frame.camera-capture-active video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center center; background: #000;
}
.camera-frame.camera-capture-active .camera-capture-chrome {
  position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none;
  color: #fff; font-family: "Segoe UI",Tahoma,sans-serif;
}
.camera-capture-top {
  position: absolute; inset: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  min-height: 92px; padding: max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 26px max(14px,env(safe-area-inset-left));
  background: linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,0)); pointer-events: none;
}
.camera-capture-heading { min-width: 0; padding-top: 2px; text-shadow: 0 2px 8px #000; }
.camera-capture-heading strong,.camera-capture-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camera-capture-heading strong { font-size: 16px; }
.camera-capture-heading small { color: rgba(255,255,255,.82); font-size: 13px; margin-top: 3px; }
.camera-capture-top-actions { display: flex; flex: 0 0 auto; gap: 8px; pointer-events: none; }
.camera-capture-close,.camera-done,.camera-latest,.camera-shutter,.camera-diagnostic-toggle { pointer-events: auto; touch-action: manipulation; }
.camera-capture-close,.camera-done {
  width: auto; min-width: 62px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px; color: #fff; background: rgba(0,0,0,.48); backdrop-filter: blur(8px); font-size: 15px; font-weight: 900;
}
.camera-diagnostic-toggle {
  width: auto; min-width: 82px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px; color: #fff; background: rgba(0,0,0,.48); backdrop-filter: blur(8px); font-size: 13px; font-weight: 900;
}
.camera-diagnostic-panel {
  position: absolute; z-index: 4; inset: 0; overflow: auto;
  padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  border: 0; border-radius: 0; color: #fff; background: #000; pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}
.camera-diagnostic-header,.camera-diagnostic-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.camera-diagnostic-header strong { font-size: 16px; }
.camera-diagnostic-panel > p { margin: 7px 0 12px; color: rgba(255,255,255,.72); font-size: 12px; }
.camera-diagnostic-grid { display: grid; gap: 7px; margin: 0; }
.camera-diagnostic-grid > div { padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.08); }
.camera-diagnostic-grid dt { color: rgba(255,255,255,.68); font-size: 11px; font-weight: 800; }
.camera-diagnostic-grid dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 800; line-height: 1.4; }
.camera-diagnostic-close,.camera-diagnostic-refresh,.camera-diagnostic-zoom-button {
  width: auto; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; color: #fff; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 900;
}
.camera-diagnostic-zoom-proof { margin-top: 12px; padding: 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.06); }
.camera-diagnostic-zoom-proof > strong { font-size: 13px; }
.camera-diagnostic-zoom-proof > p { margin: 5px 0 9px; color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.45; }
.camera-diagnostic-zoom-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.camera-diagnostic-zoom-button { min-height: 40px; touch-action: manipulation; }
.camera-diagnostic-zoom-button:disabled { opacity: .45; }
.camera-diagnostic-zoom-proof > .camera-diagnostic-zoom-status { margin: 9px 0 0; color: #fff; font-weight: 800; white-space: pre-line; }
.camera-diagnostic-footer { margin-top: 12px; }
.camera-diagnostic-footer small { color: rgba(255,255,255,.68); font-size: 11px; }
.camera-capture-bottom {
  position: absolute; inset: auto 0 0; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 16px;
  min-height: 150px; padding: 26px max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background: linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,0)); pointer-events: none;
}
.camera-latest {
  width: 58px; height: 58px; min-height: 58px; padding: 0; overflow: hidden; justify-self: start;
  border: 2px solid #fff; border-radius: 8px; color: #fff; background: rgba(0,0,0,.48);
}
.camera-latest img { width: 100%; height: 100%; object-fit: contain; background: #111; }
.camera-latest span { display: grid; width: 100%; height: 100%; place-items: center; font-size: 17px; font-weight: 900; }
.camera-latest:disabled { opacity: .65; }
.camera-shutter {
  position: relative; justify-self: center; width: 78px; height: 78px; min-height: 78px; padding: 0;
  border: 4px solid #fff; border-radius: 50%; background: rgba(0,0,0,.18); box-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.camera-shutter span { position: absolute; inset: 6px; border-radius: 50%; background: #fff; transition: transform .08s,background .12s; }
.camera-shutter:active span { transform: scale(.88); }
.camera-shutter:disabled span { background: #9aa0a6; }
.camera-done { justify-self: end; }
.camera-pending-count {
  grid-column: 1 / -1; min-height: 20px; margin: 0; color: #fff; font-size: 14px; font-weight: 900; text-align: center;
  text-shadow: 0 2px 8px #000;
}
.file-fallback-button {
  align-items: center;
  background: #edf8f2;
  border: 0;
  border-radius: 8px;
  color: var(--green);
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 46px;
  padding: 0 12px;
  position: relative;
  text-align: center;
}
.file-fallback-button span { font-size: 15px; font-weight: 900; }
.file-fallback-button:focus-within { outline: 3px solid var(--t-accent); outline-offset: 2px; }
.file-fallback-button:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.file-fallback-button input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.compact { width: auto; }
button:disabled { opacity: .5; cursor: not-allowed; }
.preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.photo-status { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 20px)); z-index: 1000; display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 12px; border: 1px solid #8ca9bd; border-radius: 9px; background: #eaf3fa; color: #163346; box-shadow: 0 2px 10px rgba(0,0,0,.12); pointer-events: none; }
.photo-status.hidden { display: none; }
.photo-status strong { font-size: 14px; line-height: 1.35; }
.photo-status-icon { font-size: 11px; flex: 0 0 auto; }
.photo-status.is-error { border-color: #d27678; background: #fff0ef; color: #8c2029; }
.photo-status.is-error .photo-status-icon { font-size: 18px; font-weight: 900; }
.photo-status.is-good { border-color: #61a47f; background: #e8f6ed; color: #175b3b; }
.preview-item { position: relative; }
.preview img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #e8eef1; border-radius: 8px; border: 1px solid var(--line); display: block; cursor: zoom-in; }
.preview-item.is-decoding img,.preview.is-uploading .preview-item img { opacity: .42; filter: blur(2px); }
.preview-item.is-decoding::after,.preview.is-uploading .preview-item::after {
  content: ""; position: absolute; top: calc(50% - 17px); left: calc(50% - 17px); z-index: 2;
  width: 34px; height: 34px; border: 4px solid rgba(255,255,255,.92); border-top-color: var(--t-accent);
  border-radius: 50%; box-shadow: 0 2px 12px rgba(0,0,0,.35); pointer-events: none;
  animation: photo-loading-spin .8s linear infinite;
}
@keyframes photo-loading-spin { to { transform: rotate(360deg); } }
.preview-item.is-preview-error::after { content: "แสดงภาพไม่ได้"; position: absolute; inset: 36% 8px auto; color: #fff; background: rgba(0,0,0,.7); text-align: center; font-size: 12px; padding: 5px; border-radius: 5px; pointer-events: none; }
.preview img:focus-visible { outline: 3px solid color-mix(in srgb,var(--accent) 72%,#fff); outline-offset: 2px; }
.preview-item span {
  position: absolute; top: 6px; left: 6px; min-width: 24px; height: 24px; display: grid; place-items: center;
  color: #fff; background: rgba(28,36,48,.78); border-radius: 999px; font-size: 12px; font-weight: 800;
}
.preview-item .sent-before-badge {
  left: auto; right: 6px; z-index: 3; background: #16734a; color: #fff;
  border: 1px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45); pointer-events: none;
}
.preview-item.is-send-attention img { border: 2px solid #b94726; }
.preview-item .send-attention-badge {
  position: absolute; top: 6px; right: 6px; z-index: 4; width: 28px; height: 28px;
  padding: 0; border-radius: 999px; font-size: 18px; font-weight: 900; line-height: 1;
  background: #a73521; color: #fff; border: 1px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: pointer;
}
.preview-item .send-attention-action {
  position: absolute; top: 39px; right: 6px; z-index: 5;
  max-width: calc(100% - 12px); min-height: 32px; padding: 3px 8px;
  border: 1px solid #fff; border-radius: 7px; background: #a73521; color: #fff;
  font-size: 12px; font-weight: 800; box-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.preview-item .send-attention-action[hidden] { display: none; }
.sent-photo-legend { margin: 0 0 8px; color: #16734a; font-size: 12px; font-weight: 700; line-height: 1.5; }
.remove-photo {
  position: absolute; right: 6px; bottom: 6px; min-height: 30px; padding: 0 10px;
  border-radius: 999px; background: rgba(226,61,79,.92); color: #fff; font-size: 12px;
}
.upload-progress { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border: 1px solid var(--t-accent); border-radius: 8px; background: color-mix(in srgb,var(--t-accent) 12%,#fff); color: #182838; }
.upload-progress.hidden { display: none; }
.upload-progress strong,.upload-progress small { display: block; line-height: 1.5; }
.post-login-screen .upload-progress strong,.post-login-screen .upload-progress small { color: #182838; }
.upload-progress small { font-size: 12px; font-weight: 700; }
.upload-progress-ring { flex: 0 0 auto; width: 28px; height: 28px; border: 4px solid #c9d8e5; border-top-color: var(--t-accent); border-radius: 50%; animation: photo-loading-spin .8s linear infinite; }
.upload-limit-note { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .preview-item.is-decoding::after,.preview.is-uploading .preview-item::after,.upload-progress-ring { animation-duration: 2s; }
}
body.photo-viewer-open { overflow: hidden; }
.photo-viewer {
  position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-rows: auto minmax(0,1fr) auto;
  padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  color: #fff; background: rgba(5,12,16,.96);
}
.photo-viewer.hidden { display: none; }
.photo-viewer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.photo-viewer-top p { margin: 0; overflow: hidden; font-size: 15px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.photo-viewer-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.photo-viewer-close,.photo-viewer-delete {
  min-height: 44px; width: auto; padding: 0 16px; color: #fff;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.16);
}
.photo-viewer-delete { border-color: rgba(255,118,128,.62); background: rgba(166,30,45,.55); }
.photo-viewer-stage { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; min-height: 0; }
.photo-viewer-stage img { width: 100%; height: 100%; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); object-fit: contain; }
.photo-viewer-arrow {
  min-height: 58px; padding: 0; color: #fff; font-size: 40px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.14);
}
.photo-viewer-arrow:disabled { opacity: 0; pointer-events: none; }
.photo-viewer-count { min-height: 22px; margin: 0; color: rgba(255,255,255,.84); font-size: 14px; font-weight: 900; text-align: center; }
@media (max-width: 420px) {
  .photo-viewer-stage { grid-template-columns: 42px minmax(0,1fr) 42px; }
  .photo-viewer-arrow { min-height: 52px; font-size: 34px; }
}
.confirm-box {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
  background: rgba(15,22,32,.52); padding: 18px;
}

@media (orientation: landscape) and (max-height: 600px) {
  .camera-frame.camera-capture-active video {
    object-fit: cover;
    object-position: center center;
  }
  .camera-capture-top { padding-right: calc(max(14px,env(safe-area-inset-right)) + 116px); }
  .camera-capture-bottom {
    inset: 0 0 0 auto; width: 126px; min-height: 0; padding: max(62px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) 28px;
    grid-template-columns: 1fr; grid-template-rows: 58px 86px 48px auto; align-content: center; gap: 10px;
    background: linear-gradient(270deg,rgba(0,0,0,.92),rgba(0,0,0,0));
  }
  .camera-latest,.camera-shutter,.camera-done { justify-self: center; }
  .camera-pending-count { grid-column: 1; font-size: 12px; line-height: 1.3; }
}
.confirm-box.hidden { display: none; }
.confirm-card {
  width: min(360px, 100%); background: #fff; border-radius: 8px; padding: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.confirm-card h2 { margin-bottom: 6px; }
.confirm-card p { color: var(--muted); font-weight: 800; margin: 0 0 16px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 14px;
  color: var(--muted); font-weight: 800;
}
.small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; }
.pending-list { display: grid; gap: 10px; }
.pending-card { display: grid; grid-template-columns: minmax(240px, .9fr) 1.1fr; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pending-card h3 { margin: 0 0 5px; font-size: 20px; }
.pending-card h3 span { color: var(--red); }
.pending-card p { margin: 0 0 5px; color: var(--muted); font-weight: 700; }
.pending-card small { color: var(--muted); }
.file-chips { display: flex; gap: 6px; flex-wrap: wrap; align-content: start; }
.file-chips span { background: #f3f6fa; border: 1px solid var(--line); padding: 6px 8px; border-radius: 999px; font-size: 12px; color: var(--muted); }
.empty { padding: 18px; color: var(--muted); background: #f7f9fc; border-radius: 8px; }
.download-hero h1 { max-width: 760px; }
.download-copy { color: var(--muted); font-weight: 700; max-width: 760px; }
.download-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.download-button { width: auto; min-width: 230px; text-decoration: none; }
.version-note { color: var(--muted); font-size: 13px; font-weight: 800; margin-top: 12px; }
.steps { color: var(--ink); display: grid; gap: 10px; font-weight: 700; margin: 0; padding-left: 24px; }
.download-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.download-grid div { border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.download-grid strong, .download-grid span { display: block; }
.download-grid span { color: var(--muted); font-size: 14px; font-weight: 700; margin-top: 4px; }
.admin-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.shop-list { display: grid; gap: 10px; }
.application-list { display: grid; gap: 12px; margin-top: 12px; }
.application-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid;
  gap: 12px; grid-template-columns: minmax(260px, 1fr) minmax(280px, .9fr); padding: 16px;
}
.application-card h3 { margin: 0 0 7px; }
.application-card p { color: var(--muted); font-weight: 700; line-height: 1.55; margin: 0; }
.application-status { color: var(--blue); font-size: 13px; font-weight: 800; margin-bottom: 5px; }
.application-actions { align-content: start; display: grid; gap: 8px; }
.application-actions label { margin: 0; }
.application-buttons { display: flex; gap: 8px; }
.application-buttons .primary { flex: 1; width: auto; }
.danger-outline { background: #fff2f4; color: var(--red); }
.shop-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid;
  gap: 12px; grid-template-columns: minmax(220px, .7fr) 1.3fr; padding: 14px;
}
.shop-card h3 { margin: 0 0 4px; }
.shop-card h3 span { color: var(--red); font-size: 14px; }
.shop-card p { color: var(--muted); font-weight: 800; }
.user-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.user-chips span { background: #f3f6fa; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 800; padding: 6px 8px; }
@media (max-width: 720px) {
  .grid-2, .pending-card, .admin-grid, .shop-card, .signup-shell, .signup-grid, .application-card { grid-template-columns: 1fr; }
  .topbar { align-items: center; }
  .camera-actions { grid-template-columns: 1fr; }
  .download-grid { grid-template-columns: 1fr; }
  .signup-shell { padding-top: 24px; }
  .signup-intro { padding-top: 0; }
  .signup-intro h1 { font-size: 34px; }
}


/* Connector status and search workflow; colors inherit the active RoopDD theme. */
.connector-state { border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 800; margin: 10px 0; padding: 10px 12px; }
.connector-state.online { border-color: var(--success, #1f9d6b); }
.connector-state.offline { border-color: var(--danger, #d23b3b); }
.search-progress { display: grid; gap: 8px; list-style: none; margin: 14px 0 8px; padding: 0; }
.search-progress li { align-items: center; display: grid; gap: 10px; grid-template-columns: 30px 1fr; opacity: .5; }
.search-progress li span { align-items: center; border: 2px solid currentColor; border-radius: 50%; display: flex; font-size: 13px; height: 30px; justify-content: center; width: 30px; }
.search-progress li.active, .search-progress li.done, .search-progress li.failed { opacity: 1; }
.search-progress li.done span { background: var(--success, #1f9d6b); border-color: var(--success, #1f9d6b); color: #fff; }
.search-progress li.failed span { background: var(--danger, #d23b3b); border-color: var(--danger, #d23b3b); color: #fff; }


/* Shop-wide theme picker. Semantic success/danger colors remain unchanged. */
.topbar-actions { display: flex; gap: 8px; }
.topbar-actions button { min-height: 38px; padding: 0 12px; }
.theme-options { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 14px 0 18px; }
.theme-option { background: #fff; border: 2px solid var(--line); color: var(--ink); display: grid; gap: 3px; grid-template-columns: 40px 1fr; min-height: 72px; padding: 10px; text-align: left; }
.theme-option:hover { border-color: var(--t-accent); }
.theme-option.selected { border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-light); }
.theme-option strong, .theme-option small { grid-column: 2; }
.theme-option strong { align-self: end; }
.theme-option small { color: var(--muted); font-weight: 700; }
.theme-swatch { align-self: center; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; grid-row: 1 / 3; height: 36px; width: 36px; }
.theme-swatch.skygold { background: linear-gradient(135deg,#0b4b57 50%,#78cde0 50%); }
.theme-swatch.navy { background: linear-gradient(135deg,#0b1730 50%,#caa356 50%); }
.theme-swatch.pine { background: linear-gradient(135deg,#123b2b 50%,#7acfa1 50%); }
.theme-swatch.blue { background: linear-gradient(135deg,#10377b 50%,#8bb8f0 50%); }
.theme-swatch.steel { background: linear-gradient(135deg,#22282e 50%,#f07b3c 50%); }
.theme-swatch.terracotta { background: linear-gradient(135deg,#641d32 50%,#e7a0b5 50%); }
@media (max-width: 420px) { .theme-options { grid-template-columns: 1fr; } }


/* Mockup-aligned mobile shell, menu and per-ID theme picker. */
body { background: #e9ecf3; }
.phone-shell { max-width: 440px; padding: 18px 12px 36px; }
.app-screen { min-height: min(760px, calc(100vh - 36px)); overflow: hidden; padding: 0; }
.appbar {
  align-items: center; background: linear-gradient(135deg,var(--t-dark),var(--t-dark2));
  color: #fff; margin: 0; min-height: 82px; padding: 16px 18px;
}
.appbar h1 { color: #fff; font-size: 19px; margin: 0; }
.appbar .eyebrow { color: #d6dbef; }
.appbar-titles { flex: 1; min-width: 0; }
.appbar-sub { align-items: center; color: #d6dbef; display: flex; font-size: 12px; font-weight: 700; gap: 6px; margin: 5px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-dot { background: #54d38a; border-radius: 50%; box-shadow: 0 0 0 3px rgba(84,211,138,.15); flex: 0 0 auto; height: 7px; width: 7px; }
.appbar-button { background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.24); color: #fff; min-height: 36px; padding: 0 12px; }
.back-button { font-size: 27px; padding: 0; width: 38px; }
.screen-content { padding: 20px; }
.screen-heading { font-size: 16px; margin-bottom: 12px; }
.mobile-home-actions { gap: 10px; margin-top: 0; }
.mobile-home-card, .mobile-home-card.search {
  background: #fff; border: 1px solid var(--line); box-shadow: 0 3px 12px rgba(26,37,59,.06);
  gap: 12px; grid-template-columns: 46px 1fr 18px; min-height: 78px; padding: 12px 13px;
}
.mobile-home-card:active { transform: scale(.99); }
.mobile-home-card strong { font-size: 15px; }
.mobile-home-card small { font-size: 12px; margin-top: 3px; }
.home-action-icon, .mobile-home-card.search .home-action-icon {
  background: linear-gradient(135deg,var(--t-dark),var(--t-dark2)); border-radius: 8px;
  color: var(--t-cta-to); height: 44px; width: 44px;
}
.home-action-icon svg { height: 23px; width: 23px; }
.menu-chevron { color: #b7bdc9; font-size: 24px; font-weight: 400; }
.theme-icon { display: flex; gap: 2px; }
.theme-icon span { background: currentColor; border-radius: 50%; height: 7px; width: 7px; }
.settings-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.settings-card h2 { font-size: 17px; margin-bottom: 4px; }
.settings-card > p { color: var(--muted); font-size: 13px; font-weight: 700; margin: 0; }
.theme-options { align-items: center; display: flex; gap: 10px; grid-template-columns: none; justify-content: space-between; margin: 18px 0 12px; }
.theme-option { background: transparent; border: 0; display: block; min-height: 42px; padding: 3px; width: 42px; }
.theme-option:hover { border: 0; }
.theme-option.selected { border: 0; box-shadow: none; }
.theme-swatch { display: block; height: 34px; width: 34px; }
.theme-option.selected .theme-swatch { box-shadow: 0 0 0 2px #fff,0 0 0 4px var(--t-dark),0 3px 8px rgba(0,0,0,.2); transform: scale(1.05); }
.theme-choice-name { color: var(--t-accent) !important; text-align: center; }
.theme-save-button { background: linear-gradient(135deg,var(--t-cta-from),var(--t-cta-to)); color: var(--t-cta-text); margin-top: 14px; width: 100%; }
#sendBtn { background: linear-gradient(135deg,var(--t-cta-from),var(--t-cta-to)); color: var(--t-cta-text); }
@media (max-width: 460px) {
  .phone-shell { max-width: none; padding: 0; }
  .app-screen { border: 0; border-radius: 0; min-height: 100vh; }
  .theme-options { gap: 5px; }
}


/* Final public login from roopdd-login-final.html. Fixed skygold before user identity is known. */
.login-screen {
  --login-dark:#0c3a4a; --login-dark2:#155068; --login-accent:#3aa8c1;
  --login-gold-from:#d9b35c; --login-gold-to:#ecd28f; --login-gold-text:#3a2606;
  background: linear-gradient(165deg,var(--login-dark) 0%,var(--login-dark2) 55%,var(--login-dark) 130%);
  color:#fff; display:flex; flex-direction:column; min-height:min(780px,calc(100vh - 36px)); overflow:hidden; padding:28px 20px 18px;
  position:relative;
}
.login-brand { text-align:center; }
.login-emblem { align-items:center; background:linear-gradient(150deg,var(--login-gold-from),var(--login-gold-to)); border-radius:18px; color:var(--login-gold-text); display:flex; height:60px; justify-content:center; margin:0 auto 14px; width:60px; }
.login-emblem svg { height:27px; width:27px; }
.login-wordmark { background:linear-gradient(120deg,#fff 20%,var(--login-gold-to) 95%); background-clip:text; color:transparent; font-size:23px; font-weight:800; letter-spacing:.12em; }
.login-brand > p { color:rgba(255,255,255,.62); font-size:12px; font-weight:700; margin:7px 0 0; }
.login-glass-card { backdrop-filter:blur(18px); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:8px; box-shadow:0 20px 40px rgba(0,0,0,.25); flex:1; margin-top:22px; padding:20px; }
.login-step-label { background:rgba(0,0,0,.28); border-radius:7px; display:inline-block; font-size:10px; font-weight:800; margin-bottom:14px; padding:4px 10px; }
.login-tabs { background:rgba(255,255,255,.07); border-radius:8px; display:flex; margin-bottom:20px; padding:4px; }
.login-tab { background:transparent; color:rgba(255,255,255,.8); flex:1; font-size:14px; min-height:42px; padding:0 6px; }
.login-tab.active { background:linear-gradient(135deg,var(--login-gold-from),var(--login-gold-to)); color:var(--login-gold-text); }
.login-tab-panel { display:none; }
.login-tab-panel.active { display:block; }
.login-field { margin-bottom:14px; }
.login-field > label { color:rgba(255,255,255,.94); display:block; font-size:12.5px; font-weight:700; margin:0 0 7px; }
.login-field-wrap { position:relative; }
.login-field input { background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.18); border-radius:8px; color:#fff; font-size:15px; outline:0; padding:13px 44px 13px 14px; width:100%; }
.login-field > input { padding-right:14px; }
.login-field input::placeholder { color:rgba(255,255,255,.46); }
.login-field input:focus { background:rgba(255,255,255,.1); border-color:var(--login-gold-to); box-shadow:none; }
.login-field input.invalid { border-color:#ff8883; box-shadow:0 0 0 3px rgba(255,107,102,.14); }
.login-eye { background:transparent; color:rgba(255,255,255,.65); min-height:38px; padding:0; position:absolute; right:5px; top:50%; transform:translateY(-50%); width:38px; }
.login-eye svg { height:18px; width:18px; }
.login-eye.is-visible { background:transparent; color:#fff; }
.login-remember { align-items:center; color:rgba(255,255,255,.74); display:flex; font-size:12.5px; gap:9px; margin:3px 0 18px; }
.login-remember input { height:1px; opacity:0; position:absolute; width:1px; }
.login-switch { background:rgba(255,255,255,.14); border-radius:18px; height:18px; position:relative; width:32px; }
.login-switch::after { background:#fff; border-radius:50%; content:""; height:14px; left:2px; position:absolute; top:2px; transition:left .15s; width:14px; }
.login-remember input:checked + .login-switch { background:linear-gradient(135deg,var(--login-gold-from),var(--login-gold-to)); }
.login-remember input:checked + .login-switch::after { left:16px; }
.login-primary { background:linear-gradient(135deg,var(--login-gold-from),var(--login-gold-to)); box-shadow:0 14px 28px rgba(0,0,0,.3); color:var(--login-gold-text); min-height:49px; width:100%; }
.login-secondary-link { background:transparent; color:rgba(255,255,255,.82); margin-top:8px; min-height:38px; width:100%; }
.login-hint { color:rgba(255,255,255,.58); font-size:12px; font-weight:700; line-height:1.5; margin:12px 0 0; text-align:center; }
.login-message { background:rgba(255,107,102,.13); border:1px solid rgba(255,107,102,.4); border-radius:8px; color:#ffd4d2; margin:12px 0 0; min-height:0; padding:10px; }
.login-message.good { background:rgba(84,211,138,.12); border-color:rgba(84,211,138,.38); color:#c8f4d9; }
.login-message:empty { display:none; }
.login-secure { align-items:center; color:rgba(255,255,255,.5); display:flex; font-size:10.5px; gap:6px; justify-content:center; padding-top:16px; }
.login-secure svg { height:12px; width:12px; }
.confirmed-shop-chip { align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:8px; display:flex; justify-content:space-between; margin-bottom:18px; padding:10px 11px; }
.confirmed-shop-chip strong,.confirmed-shop-chip small { display:block; }
.confirmed-shop-chip small { color:rgba(255,255,255,.62); font-size:11px; margin-top:2px; }
.confirmed-shop-chip button { background:transparent; color:var(--login-gold-to); font-size:12px; min-height:32px; padding:0 6px; }
.login-screen .quick-id-panel { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); }
.login-screen .quick-id-panel h2 { color:#fff; }
.employee-login-step .login-brand { transform:scale(.82); transform-origin:top center; margin-bottom:-16px; }
@media (max-width:460px) {
  .login-screen { min-height:100vh; padding:26px 20px 16px; }
  .login-glass-card { margin-top:18px; }
}


/* Screen navigation invariant: exactly one full-page view is visible. */
.phone-shell > .app-screen { display: none !important; }
.phone-shell > .app-screen.active {
  display: flex !important;
  flex-direction: column;
  min-height: min(780px, calc(100vh - 36px));
}
.post-login-screen {
  background: linear-gradient(165deg, var(--t-dark) 0%, var(--t-dark2) 58%, var(--t-dark) 130%);
  border: 0;
  color: #fff;
}
.post-login-screen .screen-content { flex: 1; }
.post-login-screen .screen-heading,
.post-login-screen h2,
.post-login-screen label,
.post-login-screen strong { color: #fff; }
.post-login-screen p,
.post-login-screen small { color: rgba(255,255,255,.68); }
.post-login-screen .mobile-home-card,
.post-login-screen .settings-card,
.post-login-screen .vehicle-gallery-card,
.post-login-screen .quick-id-panel,
.post-login-screen .photo-card,
.post-login-screen .notice {
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.post-login-screen input,
.post-login-screen textarea,
.post-login-screen select {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.post-login-screen input::placeholder,
.post-login-screen textarea::placeholder { color: rgba(255,255,255,.5); }
.post-login-screen input:focus,
.post-login-screen textarea:focus,
.post-login-screen select:focus { border-color: var(--t-cta-to); }
.post-login-screen .ghost,
.post-login-screen .secondary {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
.post-login-screen .mobile-home-card small,
.post-login-screen .settings-card > p { color: rgba(255,255,255,.68); }
.post-login-screen .menu-chevron { color: rgba(255,255,255,.55); }
@media (max-width: 460px) {
  .phone-shell > .app-screen.active { min-height: 100vh; }
}


/* Per-ID screen style picker: concepts 1, 2 and 9. */
.screen-style-options { display: grid; gap: 10px; margin: 16px 0 12px; }
.screen-style-option {
  align-items: center; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.13);
  color: #fff; display: grid; gap: 12px; grid-template-columns: 86px 1fr; min-height: 78px;
  padding: 9px; text-align: left; width: 100%;
}
.screen-style-option.selected { border-color: var(--t-cta-to); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.screen-style-option > span:last-child { display: grid; gap: 3px; }
.screen-style-option small { color: rgba(255,255,255,.64); font-size: 12px; }
.style-preview {
  border: 1px solid rgba(255,255,255,.22); display: grid; gap: 4px; grid-template-columns: 1fr;
  height: 58px; overflow: hidden; padding: 7px; width: 86px;
}
.style-preview i { display: block; height: 9px; }
.style-preview b { display: block; height: 8px; }
.style-one .style-preview { background: #f5f7fa; border-color: #cbd5df; }
.style-one .style-preview i { background: #183f4e; }
.style-one .style-preview b { background: #fff; border: 1px solid #cfdae3; }
.style-two .style-preview { background: linear-gradient(160deg,#0b2630,#164b5d); }
.style-two .style-preview i { background: #d8b55d; }
.style-two .style-preview b { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.style-nine .style-preview { background: linear-gradient(160deg,#15191e,#343b42); border-color: #75808a; }
.style-nine .style-preview i { background: linear-gradient(90deg,#aab3ba,#e3e7ea); }
.style-nine .style-preview b { background: #252b31; border-left: 3px solid #d74a3c; }

/* Style 1: bright professional workshop. */
[data-screen-style="style1"] .post-login-screen { background: #f3f6f8; color: #18232c; }
[data-screen-style="style1"] .appbar { background: var(--t-dark); }
[data-screen-style="style1"] .post-login-screen .screen-heading,
[data-screen-style="style1"] .post-login-screen h2,
[data-screen-style="style1"] .post-login-screen label,
[data-screen-style="style1"] .post-login-screen strong { color: #18232c; }
[data-screen-style="style1"] .post-login-screen p,
[data-screen-style="style1"] .post-login-screen small { color: #64717c; }
[data-screen-style="style1"] .post-login-screen .mobile-home-card,
[data-screen-style="style1"] .post-login-screen .settings-card,
[data-screen-style="style1"] .post-login-screen .vehicle-gallery-card,
[data-screen-style="style1"] .post-login-screen .quick-id-panel,
[data-screen-style="style1"] .post-login-screen .photo-card,
[data-screen-style="style1"] .post-login-screen .notice {
  backdrop-filter: none; background: #fff; border-color: #ccd7df; box-shadow: 0 4px 14px rgba(29,47,61,.07); color: #18232c;
}
[data-screen-style="style1"] .post-login-screen input,
[data-screen-style="style1"] .post-login-screen textarea,
[data-screen-style="style1"] .post-login-screen select { background: #fff; border-color: #bfcbd5; color: #18232c; }
[data-screen-style="style1"] .post-login-screen input::placeholder,
[data-screen-style="style1"] .post-login-screen textarea::placeholder { color: #84909a; }
[data-screen-style="style1"] .post-login-screen .ghost,
[data-screen-style="style1"] .post-login-screen .secondary { background: #e7eef2; border-color: #c4d0d9; color: var(--t-dark); }
[data-screen-style="style1"] .screen-style-option { background: #fff; border-color: #cbd5df; color: #18232c; }
[data-screen-style="style1"] .screen-style-option small { color: #64717c; }

/* Style 9: automotive graphite dashboard. */
[data-screen-style="style9"] .post-login-screen { background: linear-gradient(165deg,#111519,#30363c 58%,#171b20); color: #f4f6f7; }
[data-screen-style="style9"] .appbar { background: linear-gradient(180deg,#111419,#252b31); border-bottom: 1px solid #626c75; }
[data-screen-style="style9"] .post-login-screen .mobile-home-card,
[data-screen-style="style9"] .post-login-screen .settings-card,
[data-screen-style="style9"] .post-login-screen .vehicle-gallery-card,
[data-screen-style="style9"] .post-login-screen .quick-id-panel,
[data-screen-style="style9"] .post-login-screen .photo-card,
[data-screen-style="style9"] .post-login-screen .notice {
  backdrop-filter: none; background: linear-gradient(180deg,#2b3137,#20252a); border-color: #59636c;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 14px rgba(0,0,0,.2); color: #fff;
}
[data-screen-style="style9"] .home-action-icon { background: linear-gradient(145deg,#555f68,#1b2025); color: #f07162; }
[data-screen-style="style9"] .mobile-home-card { border-left: 3px solid #d45143; }
[data-screen-style="style9"] .post-login-screen input,
[data-screen-style="style9"] .post-login-screen textarea,
[data-screen-style="style9"] .post-login-screen select { background: #171b1f; border-color: #67727c; color: #fff; }
[data-screen-style="style9"] .post-login-screen .primary,
[data-screen-style="style9"] #sendBtn,
[data-screen-style="style9"] .theme-save-button { background: linear-gradient(135deg,#bfc6cb,#f1f3f4); color: #15191d; }
[data-screen-style="style9"] .screen-style-option { background: #252b30; border-color: #59636c; }


/* Full home workflow shared by styles 1, 2 and 9. */
.home-dashboard-content { padding: 14px 16px 20px; }
.home-appbar { min-height: 74px; }
.home-appbar h1 { font-size: 19px; letter-spacing: .08em; }
.home-quick-grid { display: grid; gap: 7px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 12px; }
.home-quick-action {
  align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  color: inherit; display: flex; flex-direction: column; gap: 5px; min-height: 70px; padding: 8px 4px;
}
.home-quick-action svg { height: 18px; width: 18px; }
.home-quick-action strong { color: var(--t-cta-to) !important; font-size: 17px; line-height: 1; }
.home-quick-action span { font-size: 10px; font-weight: 800; line-height: 1.2; text-align: center; }
.repair-stage-list { display: grid; gap: 9px; position: relative; }
.repair-stage-list::before {
  background: linear-gradient(#81cbe0,#e1c46f,#78d39b,#54b99b); content: ""; left: 25px;
  opacity: .3; position: absolute; top: 28px; bottom: 28px; width: 2px;
}
.repair-stage {
  align-items: center; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.15);
  color: inherit; display: grid; gap: 11px; grid-template-columns: 50px minmax(0,1fr) 14px;
  min-height: 70px; padding: 8px 12px; text-align: left; width: 100%;
}
.repair-stage > b,.document-action > b { color: currentColor; font-size: 22px; font-weight: 400; opacity: .38; }
.repair-stage-icon {
  align-items: center; background: #fff; border: 1px solid rgba(0,0,0,.1); display: flex; height: 48px;
  justify-content: center; overflow: hidden; position: relative; width: 48px; z-index: 1;
}
.repair-stage-icon img { height: 100%; object-fit: contain; width: 100%; }
.repair-stage-icon.hammer-icon { background: linear-gradient(145deg,#43a86f,#86d8a7); color: #103c24; }
.repair-stage-icon.hammer-icon svg { height: 25px; width: 25px; }
.repair-stage-icon.additional-photo-icon { background: linear-gradient(145deg,#5e8fd8,#a9c8f2); color: #132e58; }
.repair-stage-icon.additional-photo-icon svg { height: 26px; width: 26px; }
.repair-stage-copy { display: grid; gap: 4px; min-width: 0; }
.repair-stage-copy strong { font-size: 14px; line-height: 1.2; }
.repair-stage-copy small { align-items: center; display: flex; font-size: 10px; font-weight: 800; gap: 5px; }
.stage-live-dot { background: #8be2aa; border-radius: 50%; box-shadow: 0 0 0 4px rgba(139,226,170,.12); height: 7px; width: 7px; }
.stage-intake { border-color: rgba(128,207,230,.65); }
.stage-additional { border-color: rgba(111,157,222,.68); }
.stage-around { border-color: rgba(229,198,105,.65); }
.stage-repair { border-color: rgba(93,194,130,.62); }
.stage-finished { border-color: rgba(49,139,92,.75); }
.document-action {
  align-items: center; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.14);
  color: inherit; display: grid; gap: 11px; grid-template-columns: 44px minmax(0,1fr) 14px;
  margin-top: 12px; min-height: 64px; padding: 9px 12px; text-align: left; width: 100%;
}
.document-action-icon {
  align-items: center; background: linear-gradient(145deg,#8171d1,#b6a9ec); color: #241a55;
  display: flex; height: 42px; justify-content: center; width: 42px;
}
.document-action-icon svg { height: 21px; width: 21px; }
.document-action span:nth-child(2) { display: grid; gap: 2px; }
.document-action strong { font-size: 14px; }
.document-action small { font-size: 10px; }

/* Style 1: bright workshop layout. */
[data-screen-style="style1"] .home-quick-action { background: #fff; border-color: #cbd7df; color: #26343e; }
[data-screen-style="style1"] .repair-stage,
[data-screen-style="style1"] .document-action { background: #fff; box-shadow: 0 3px 10px rgba(25,45,58,.06); color: #1d2b35; }
[data-screen-style="style1"] .repair-stage-copy small,
[data-screen-style="style1"] .document-action small { color: #687783; }
[data-screen-style="style1"] .stage-intake { border-left: 4px solid #4caeca; }
[data-screen-style="style1"] .stage-additional { border-left: 4px solid #5e8fd8; }
[data-screen-style="style1"] .stage-around { border-left: 4px solid #d4a936; }
[data-screen-style="style1"] .stage-repair { border-left: 4px solid #43a86f; }
[data-screen-style="style1"] .stage-finished { border-left: 4px solid #237a4a; }

/* Style 2: premium dark glass layout. */
[data-screen-style="style2"] .home-quick-action,
[data-screen-style="style2"] .repair-stage,
[data-screen-style="style2"] .document-action {
  backdrop-filter: blur(14px); background: rgba(255,255,255,.07); box-shadow: inset 0 1px rgba(255,255,255,.05);
}
[data-screen-style="style2"] .stage-intake { background: rgba(81,169,197,.1); }
[data-screen-style="style2"] .stage-additional { background: rgba(85,126,193,.13); }
[data-screen-style="style2"] .stage-around { background: rgba(205,170,72,.1); }
[data-screen-style="style2"] .stage-repair { background: rgba(65,155,99,.14); }
[data-screen-style="style2"] .stage-finished { background: rgba(35,117,73,.16); }

/* Style 9: graphite automotive dashboard layout. */
[data-screen-style="style9"] .home-quick-action {
  background: linear-gradient(180deg,#333a40,#22272c); border-color: #626c74; box-shadow: inset 0 1px rgba(255,255,255,.08);
}
[data-screen-style="style9"] .home-quick-action strong { color: #ef6a5b !important; }
[data-screen-style="style9"] .repair-stage,
[data-screen-style="style9"] .document-action {
  background: linear-gradient(180deg,#2e343a,#20252a); border-color: #555f68; border-left: 4px solid #d45143;
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 5px 12px rgba(0,0,0,.18);
}
[data-screen-style="style9"] .repair-stage-list::before { background: #d45143; opacity: .35; }
[data-screen-style="style9"] .repair-stage-icon { border-color: #747d85; }
[data-screen-style="style9"] .repair-stage-copy small,
[data-screen-style="style9"] .document-action small { color: #aeb7be; }

@media (max-width: 360px) {
  .home-dashboard-content { padding-left: 11px; padding-right: 11px; }
  .repair-stage { grid-template-columns: 46px minmax(0,1fr) 12px; }
  .repair-stage-icon { height: 44px; width: 44px; }
}


.fixed-steel-notice { border-left: 4px solid #d45143 !important; }
[data-screen-style="style9"] .theme-save-button {
  background: linear-gradient(135deg,#bfc6cb,#f1f3f4);
  color: #15191d;
}


/* Search and capture screens inherit the selected per-ID palette and layout. */
.work-screen { overflow-y: auto !important; }
.work-appbar { flex: 0 0 auto; }
.work-appbar h1 { font-size: 19px; margin: 0; }
.work-appbar .eyebrow { color: var(--t-cta-to); font-size: 11px; margin-bottom: 3px; }
.work-screen-content { flex: 1; padding: 14px 16px 24px; }
.work-form-card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  padding: 13px;
}
.work-form-card label { margin: 0 0 11px; }
.work-form-card label:last-child { margin-bottom: 0; }
.work-field-grid { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.work-screen input,.work-screen textarea { outline: none; transition: border-color .15s,box-shadow .15s,background .15s; }
.work-screen input:focus,.work-screen textarea:focus {
  border-color: var(--t-cta-to); box-shadow: 0 0 0 3px color-mix(in srgb,var(--t-accent) 22%,transparent);
}
.work-screen .notice {
  background: color-mix(in srgb,var(--t-accent) 15%,rgba(255,255,255,.06));
  border: 1px solid color-mix(in srgb,var(--t-accent) 55%,rgba(255,255,255,.1));
  border-left: 4px solid var(--t-cta-to); color: inherit; margin-bottom: 11px;
}
.work-screen .primary {
  background: linear-gradient(135deg,var(--t-cta-from),var(--t-cta-to));
  box-shadow: 0 8px 18px color-mix(in srgb,var(--t-dark) 35%,transparent); color: var(--t-cta-text);
}
.work-screen .secondary {
  background: color-mix(in srgb,var(--t-accent) 28%,rgba(255,255,255,.08));
  border: 1px solid color-mix(in srgb,var(--t-accent) 58%,rgba(255,255,255,.16)); color: #fff;
}
.work-screen .ghost {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); color: #fff;
}
.camera-frame {
  background: color-mix(in srgb,var(--t-dark) 82%,#000); border-color: color-mix(in srgb,var(--t-accent) 48%,#56616d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.camera-frame::after {
  border: 1px solid color-mix(in srgb,var(--t-cta-to) 55%,transparent); content: ""; inset: 11px;
  opacity: .32; pointer-events: none; position: absolute;
}
#cameraHint { color: #fff; text-shadow: 0 2px 8px #000; }
.photo-actions {
  background: color-mix(in srgb,var(--t-accent) 12%,rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12); color: inherit; padding: 8px 10px;
}
.preview img { border-color: color-mix(in srgb,var(--t-accent) 65%,rgba(255,255,255,.2)); }
.preview-item span { background: var(--t-dark); color: #fff; }
.preview-item .sent-before-badge { background: #16734a; color: #fff; }
.connector-state {
  background: color-mix(in srgb,var(--t-accent) 12%,rgba(255,255,255,.05));
  border-color: color-mix(in srgb,var(--t-accent) 45%,rgba(255,255,255,.14)); color: inherit;
}
.connector-state.online { background: rgba(41,163,106,.13); color: #a9efca; }
.connector-state.offline { background: rgba(210,59,59,.12); color: #ffd0d0; }
.search-progress li.active { color: var(--t-cta-to); }
.search-progress li.active span { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }
.vehicle-gallery-card {
  background: rgba(255,255,255,.07); border-color: color-mix(in srgb,var(--t-accent) 45%,rgba(255,255,255,.13));
  box-shadow: 0 5px 14px rgba(0,0,0,.12);
}
.vehicle-photo-grid img { border: 1px solid color-mix(in srgb,var(--t-accent) 45%,rgba(255,255,255,.12)); }

/* Bright professional treatment for capture and search. */
[data-screen-style="style1"] .work-form-card,
[data-screen-style="style1"] .vehicle-gallery-card {
  background: #fff; border-color: color-mix(in srgb,var(--t-accent) 38%,#d2dbe2); color: #18232c;
  box-shadow: 0 4px 14px rgba(29,47,61,.07);
}
[data-screen-style="style1"] .work-screen .notice {
  background: color-mix(in srgb,var(--t-accent-light) 75%,#fff); color: #263640;
}
[data-screen-style="style1"] .work-screen .ghost {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff;
}
[data-screen-style="style1"] .work-screen .secondary {
  background: var(--t-accent-light); border-color: color-mix(in srgb,var(--t-accent) 45%,#cbd6de); color: var(--t-dark);
}
[data-screen-style="style1"] .photo-actions,
[data-screen-style="style1"] .connector-state {
  background: #fff; border-color: color-mix(in srgb,var(--t-accent) 32%,#d2dbe2); color: #34434e;
}
[data-screen-style="style1"] .connector-state.online { background: #e9f8f0; color: #176a46; }
[data-screen-style="style1"] .connector-state.offline { background: #fff0f0; color: #a42d2d; }
[data-screen-style="style1"] .search-progress { color: #4f5e69; }
[data-screen-style="style1"] .vehicle-gallery-card small { color: #687783; }

/* Style 9 remains fixed graphite/red regardless of palette. */
[data-screen-style="style9"] .work-form-card,
[data-screen-style="style9"] .vehicle-gallery-card {
  background: linear-gradient(180deg,#2e343a,#20252a); border-color: #59636c; border-left: 4px solid #d45143;
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.2);
}
[data-screen-style="style9"] .work-screen .notice {
  background: #292f34; border-color: #626c74; border-left-color: #d45143; color: #e9edef;
}
[data-screen-style="style9"] .work-screen input,
[data-screen-style="style9"] .work-screen textarea { background: #15191d; border-color: #66717a; color: #fff; }
[data-screen-style="style9"] .work-screen input:focus,
[data-screen-style="style9"] .work-screen textarea:focus { border-color: #e06455; box-shadow: 0 0 0 3px rgba(224,100,85,.18); }
[data-screen-style="style9"] .work-screen .primary,
[data-screen-style="style9"] #sendBtn { background: linear-gradient(135deg,#bfc6cb,#f1f3f4); color: #15191d; }
[data-screen-style="style9"] .work-screen .secondary { background: #353d44; border-color: #707b84; color: #fff; }
[data-screen-style="style9"] .camera-frame { border-color: #d45143; }
[data-screen-style="style9"] .camera-frame::after { border-color: rgba(224,100,85,.65); }
[data-screen-style="style9"] .photo-actions,
[data-screen-style="style9"] .connector-state { background: #252b30; border-color: #59636c; }
[data-screen-style="style9"] .search-progress li.active { color: #ef6a5b; }
[data-screen-style="style9"] .search-progress li.active span { background: #d45143; border-color: #d45143; }

@media (max-width: 430px) {
  .work-field-grid { grid-template-columns: 1fr; gap: 0; }
  .work-screen-content { padding-left: 13px; padding-right: 13px; }
}


/* Cleaner mobile gallery: no capture timestamp and larger three-column photos. */
.vehicle-gallery-heading {
  align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 9px;
}
.vehicle-gallery-heading strong { font-size: 14px; min-width: 0; }
.vehicle-gallery-heading small {
  flex: 0 0 auto; margin: 0 !important; padding: 3px 7px;
  background: color-mix(in srgb,var(--t-accent) 18%,transparent);
  border: 1px solid color-mix(in srgb,var(--t-accent) 38%,transparent);
}
.vehicle-gallery-card { padding: 8px; }
.vehicle-photo-grid { gap: 4px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.vehicle-photo-grid img {
  aspect-ratio: 1 / 1; border-radius: 5px; display: block; min-width: 0; width: 100%;
}
.recent-jobs-section { margin-bottom: 14px; }
.recent-jobs-heading { align-items: end; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 9px; }
.recent-jobs-heading h2 { font-size: 17px; margin: 0; }
.recent-jobs-heading p { color: inherit; font-size: 11px; font-weight: 700; margin: 3px 0 0; opacity: .72; }
.recent-jobs-heading > span { font-size: 10px; font-weight: 800; opacity: .66; }
.additional-job-results { display: grid; gap: 9px; }
.additional-job-card {
  align-items: center; background: rgba(255,255,255,.07); border: 1px solid color-mix(in srgb,var(--t-accent) 45%,rgba(255,255,255,.13));
  border-radius: 8px; display: grid; gap: 9px; grid-template-columns: 62px minmax(0,1fr); padding: 8px;
}
.additional-job-thumbnail {
  align-items: center; aspect-ratio: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px; display: flex; font-size: 9px; font-weight: 800; justify-content: center; overflow: hidden; text-align: center;
}

.additional-job-thumbnail.missing {
  padding: 8px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
  text-align: center;
}
.additional-job-thumbnail img { height: 100%; object-fit: cover; width: 100%; }
.additional-job-copy { display: grid; gap: 3px; min-width: 0; }
.additional-job-copy strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.additional-job-copy span { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.additional-job-copy small { font-size: 10px; font-weight: 700; opacity: .72; }
.additional-job-choose { grid-column: 1 / -1; margin: 0; width: 100%; }
#loadMoreRecentJobsBtn { margin-top: 9px; width: 100%; }
.additional-job-banner {
  align-items: center; background: color-mix(in srgb,var(--t-accent) 18%,rgba(255,255,255,.06));
  border: 1px solid color-mix(in srgb,var(--t-accent) 52%,rgba(255,255,255,.16)); border-radius: 8px;
  display: flex; gap: 10px; justify-content: space-between; margin: 12px 0; padding: 11px;
}
.additional-job-banner.hidden { display: none; }
.additional-job-banner > div { display: grid; gap: 2px; min-width: 0; }
.additional-job-banner small { font-size: 10px; font-weight: 800; opacity: .72; }
.additional-job-banner strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.additional-job-banner span { font-size: 11px; font-weight: 700; opacity: .78; }
.job-type-picker.locked { opacity: .78; }
.upload-form-card input[readonly] { cursor: default; opacity: .8; }
[data-screen-style="style1"] .additional-job-card,
[data-screen-style="style1"] .additional-job-banner { background: #fff; border-color: color-mix(in srgb,var(--t-accent) 38%,#d2dbe2); color: #18232c; }
[data-screen-style="style1"] .additional-job-thumbnail { background: #eef4f8; border-color: #cfdae2; }
[data-screen-style="style9"] .additional-job-card,
[data-screen-style="style9"] .additional-job-banner { background: linear-gradient(180deg,#2e343a,#20252a); border-color: #59636c; border-left: 4px solid #d45143; }
@media (max-width: 430px) {
  .vehicle-gallery-results { gap: 9px; margin-left: -5px; margin-right: -5px; }
  .vehicle-gallery-card { padding: 7px; }
  .vehicle-photo-grid { gap: 3px; }
}


/* Prevent login flash while session routing initializes. */
.app-booting .phone-shell { visibility: hidden; }


/* Keep plate and insurer compact on the same mobile row. */
.vehicle-id-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.vehicle-id-row label {
  min-width: 0;
}
@media (max-width: 420px) {
  .vehicle-id-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
}


.upload-auto-result { margin-top: 12px; }
.job-type-picker {
  border: 0;
  margin: 0 0 14px;
  padding: 0;
}
.job-type-picker legend {
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 7px;
}
.job-type-options {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.job-type-choice {
  background: color-mix(in srgb, var(--t-soft) 72%, #fff);
  border: 2px solid color-mix(in srgb, var(--t-accent) 28%, #d7e0e7);
  border-radius: 12px;
  color: inherit;
  font-weight: 900;
  min-height: 48px;
  padding: 9px;
}
.job-type-choice.selected {
  background: var(--t-accent);
  border-color: var(--t-accent);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 20%, transparent);
}
.job-type-picker small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 7px;
}
.auto-folder-card {
  align-items: center;
  background: color-mix(in srgb, var(--t-soft) 68%, #fff);
  border: 1px solid color-mix(in srgb, var(--t-accent) 36%, #d9e2ea);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}
.auto-folder-card strong,
.auto-folder-card small { display: block; }
.auto-folder-card strong { color: var(--ink); font-size: 14px; }
.post-login-screen .photo-status strong { color: inherit; }
.auto-folder-card small { color: var(--muted); font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.auto-folder-count {
  background: var(--t-accent);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 9px;
  white-space: nowrap;
}
.auto-folder-card button { grid-column: 1 / -1; }


/* Polished equal-width plate/insurer row on capture screens. */
.upload-form-card .vehicle-id-row {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}
.upload-form-card .vehicle-id-row label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 0 10px !important;
  min-width: 0;
}
.upload-form-card .vehicle-id-row input {
  box-sizing: border-box;
  min-height: 44px;
  width: 100%;
}
@media (max-width: 430px) {
  .upload-form-card .vehicle-id-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .upload-form-card .vehicle-id-row label {
    font-size: 13px;
    line-height: 1.2;
  }
  .upload-form-card .vehicle-id-row input {
    min-height: 42px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
.account-directory { margin-top: 16px; }
.account-directory-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-directory-head h2 { margin: 0; }
.account-directory-head .login-secondary-link { width: auto; margin: 0; padding: 6px 10px; }
.account-directory-list { display: grid; gap: 8px; margin-top: 10px; }
.account-directory-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 12px; }
.account-directory-copy { min-width: 0; display: grid; gap: 2px; }
.account-directory-copy strong { overflow-wrap: anywhere; }
.account-directory-copy small { opacity: .72; }
.account-directory-delete { flex: 0 0 auto; border: 1px solid #d96b6b; color: #ffb3b3; background: transparent; border-radius: 9px; padding: 7px 10px; }
.membership-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #39a9ff) 35%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface, #ffffff) 92%, var(--accent, #39a9ff));
}
.membership-card strong { display: block; margin-bottom: 4px; }
.membership-card p { margin: 4px 0 12px; }
.membership-card label { display: grid; gap: 6px; margin-bottom: 10px; }