[data-theme="carlens"] {
  color-scheme: dark;
  --color-primary: #33c99a;
  --color-primary-content: #081b17;
  --color-secondary: #eab96b;
  --color-base-100: #17232e;
  --color-base-200: #101923;
  --color-base-300: #31404b;
  --color-base-content: #eef5f3;
  --radius-box: .9rem;
  --radius-field: .65rem;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.flat-icon { display: inline-block; width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.flat-icon-feature { width: 2rem; height: 2rem; color: var(--color-primary); }
.flat-icon-empty { width: 2.5rem; height: 2.5rem; margin: 0 auto; color: var(--color-primary); }
.flat-icon-chevron { color: var(--color-base-content); opacity: .55; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
[v-cloak] { display: none; }
.brand-logo { display: block; width: 4.5rem; height: auto; flex: none; }
@media (min-width: 640px) { .brand-logo { width: 5.25rem; } }
.brand-logo-large { width: 6rem; }
.eyebrow { color: #33c99a; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Guided capture fills the screen so the framing marks remain readable outdoors. */
.camera-modal { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: #080d12; color: #fff; }
.camera-top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 8px 14px; }
.camera-top small { display: block; font-size: .7rem; opacity: .7; }
.camera-frame { position: relative; width: 100%; aspect-ratio: 4/3; max-height: 65vh; margin: auto 0; overflow: hidden; background: #19232a; }
.camera-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.camera-grid, .camera-guide, .camera-center { position: absolute; pointer-events: none; }
.camera-grid { inset: 0; background: linear-gradient(to right, transparent 33.2%, #ffffff66 33.33%, transparent 33.5%, transparent 66.5%, #ffffff66 66.67%, transparent 66.8%), linear-gradient(to bottom, transparent 33.2%, #ffffff66 33.33%, transparent 33.5%, transparent 66.5%, #ffffff66 66.67%, transparent 66.8%); }
.camera-guide { inset: 14% 9%; }
.camera-guide span { position: absolute; width: 13%; height: 22%; border-color: #33e9b2; border-style: solid; border-width: 0; filter: drop-shadow(0 1px 3px #000); }
.camera-guide span:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.camera-guide span:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
.camera-guide span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
.camera-guide span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }
.camera-center { left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; text-shadow: 0 1px 3px #000; font-size: 24px; }
.camera-angle-label { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); max-width: 90%; padding: 7px 14px; border-radius: 999px; background: #080d12d9; color: #fff; font-size: .95rem; font-weight: 800; text-align: center; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px #000; }
.camera-bottom { text-align: center; padding: 12px 20px max(24px, env(safe-area-inset-bottom)); }
.camera-bottom p { max-width: 32rem; margin: 0 auto 6px; font-size: .85rem; line-height: 1.3; }
.camera-bottom .camera-hint { color: #a9c3be; font-size: .75rem; }
.camera-shutter { display: grid; place-items: center; width: 74px; height: 74px; margin: 16px auto 0; border: 3px solid #fff; border-radius: 50%; }
.camera-shutter span { width: 58px; height: 58px; border-radius: 50%; background: #fff; }
.camera-shutter:disabled { opacity: .4; }

.camera-failure { display: grid; align-content: center; justify-items: center; flex: 1; padding: 24px; text-align: center; }
.camera-failure p { max-width: 28rem; font-size: 1rem; line-height: 1.5; }

/* Keep long vehicle names, VINs, and status text inside narrow screens. */
html, body, #app { max-width: 100%; }
body { overflow-x: hidden; }
#app main, #app main section, .card, .card-body { min-width: 0; }
#app h1, #app h2, #app .alert, #app .card-title { overflow-wrap: anywhere; }
#app .input { min-width: 0; max-width: 100%; }
.camera-modal { height: 100dvh; min-height: 0; overflow: hidden; }
.camera-top { flex: none; padding-top: max(8px, env(safe-area-inset-top)); }
.camera-frame { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none; margin: 0; }
.camera-bottom { flex: none; }
@media (max-width: 399px) {
  .camera-top { min-height: 52px; }
  .camera-bottom { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
  .camera-shutter { width: 62px; height: 62px; margin-top: 8px; }
  .camera-shutter span { width: 48px; height: 48px; }
}
@media (max-height: 620px) {
  .camera-bottom .camera-hint { display: none; }
  .camera-bottom { padding-top: 6px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .camera-shutter { width: 58px; height: 58px; margin-top: 6px; }
  .camera-shutter span { width: 44px; height: 44px; }
}