.car-inspection .brand-bar { min-height:54px; padding-top:6px; padding-bottom:6px; margin-bottom:16px; }
.car-inspection .brand-divider { display:none; }
.car-inspection .brand-bar .logo-zyntra { width:48px; height:38px; }
.car-inspection .brand-bar .logo-sds { width:82px; height:36px; }
.car-inspection .brand-title strong { font-size:14px; }
.car-inspection #clientTitle { font-size:20px; line-height:1.3; overflow-wrap:anywhere; }
.car-inspection #clientSubtitle { font-size:13px; margin-bottom:12px; }
.car-inspection .step-card h2 { font-size:20px; }
.car-inspection #startLiveCamera { width:100%; min-height:48px; }
body.camera-open { overflow:hidden; }
.live-camera { position:fixed; inset:0; z-index:1000; background:#080d11; color:#fff; height:100dvh; overflow:hidden; font-family:system-ui,sans-serif; }
.live-camera video,.camera-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#080d11; }
.camera-guide { position:absolute; left:calc(env(safe-area-inset-left,0px) + 64px); top:17%; width:calc(100% - 190px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); height:66%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 1px 2px #001522) drop-shadow(0 0 3px #a1dcff80); }
.live-camera button { color:#fff; font-family:inherit; font-size:14px; }
.camera-instruction { position:absolute; top:max(12px,env(safe-area-inset-top,0px)); left:80px; right:120px; margin:0 auto; width:fit-content; max-width:calc(100% - 200px); padding:9px 18px; border-radius:28px; background:#0009; text-align:center; font-size:14px; }
.camera-close { position:absolute; left:max(14px,env(safe-area-inset-left,0px)); top:max(12px,env(safe-area-inset-top,0px)); width:44px; height:44px; padding:0; border-radius:50%; background:#0009; font-size:34px !important; }
.camera-controls { position:absolute; right:0; top:0; bottom:0; width:calc(98px + env(safe-area-inset-right,0px)); padding-right:env(safe-area-inset-right,0px); background:#0005; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; }
.camera-shutter { width:72px; height:72px; min-height:72px; border:4px solid #fff; outline:2px solid #fff; outline-offset:4px; border-radius:50%; padding:0; background:#fff; box-shadow:inset 0 0 0 2px #172431; }
.camera-shutter.ready { outline-color:#84dab0; }
.camera-shutter:disabled { opacity:.4; cursor:not-allowed; }
.camera-torch { position:absolute; top:max(14px,env(safe-area-inset-top,0px)); border-radius:50%; width:44px; padding:0; font-size:28px !important; background:#0009; }
.camera-step { position:absolute; bottom:max(20px,env(safe-area-inset-bottom,0px)); text-align:center; padding:0 6px; font-size:10px; max-width:96px; }
.camera-status { position:absolute; bottom:max(12px,env(safe-area-inset-bottom,0px)); left:65px; right:115px; margin:0; padding:6px 10px; text-align:center; font-size:12px; background:#0009; border-radius:12px; pointer-events:none; }
.camera-rotate { position:absolute; inset:35% 15%; display:grid; place-items:center; border-radius:18px; padding:18px; margin:0; background:#071b2feb; text-align:center; z-index:3; font-size:20px; }
.camera-review { position:absolute; right:max(12px,env(safe-area-inset-right,0px)); top:30%; display:grid; gap:12px; max-width:130px; }
.camera-review button { padding:12px; background:#18354bea; }
.camera-review .camera-use { background:#168950; }
.camera-review button:disabled { opacity:.6; }
.camera-retry { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#168950; }
@media (orientation:portrait) {
  .camera-guide { left:8%; width:84%; top:22%; height:48%; }
  .camera-instruction { left:68px; right:12px; max-width:calc(100% - 84px); font-size:12px; }
  .camera-controls { top:auto; width:100%; height:120px; bottom:0; }
  .camera-step { display:none; }
  .camera-torch { left:20px; top:36px; }
  .camera-status { left:16px; right:16px; bottom:140px; }
  .camera-review { top:auto; bottom:35px; left:16px; right:16px; display:flex; max-width:none; justify-content:center; }
}

/* Original artwork occupies the usable camera area without distortion. */
@media (orientation:landscape) { .camera-guide { left:max(8px,env(safe-area-inset-left,0px)); top:5%; width:calc(100% - 110px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); height:90%; filter:none; } .camera-instruction { z-index:1; top:6px; padding:6px 14px; } .camera-status { bottom:5px; padding:4px 8px; font-size:11px; } }