*{box-sizing:border-box}
.hidden{display:none!important}

.legalLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:.35rem;
  color:var(--muted);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  opacity:.78;
}

.legalLink:hover,
.legalLink:focus-visible{
  color:#fff;
  opacity:1;
}

.legalPage{
  width:min(920px,calc(100vw - 28px));
  margin:0 auto;
  padding:24px 0 44px;
}

.legalCard{
  background:rgba(7,14,26,.76);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  border-radius:24px;
  padding:clamp(18px,4vw,34px);
}

.legalCard h1{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(1.8rem,6vw,3rem);
  line-height:1;
  letter-spacing:-.05em;
}

.legalCard h2{
  margin:28px 0 10px;
  color:#fff;
  font-size:1.05rem;
  line-height:1.25;
}

.legalCard p,
.legalCard li{
  color:var(--muted);
  font-size:.96rem;
  line-height:1.58;
}

.legalCard ul{
  display:grid;
  gap:8px;
  margin:10px 0 0;
  padding-left:1.2rem;
}

.legalCard a{
  color:#fff;
  font-weight:800;
}

.legalMeta{
  color:rgba(255,255,255,.66);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.legalBack{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin:0 0 14px;
  color:#fff;
  font-size:.88rem;
  font-weight:900;
  text-decoration:none;
}
:root{
  --bg:#050816;
  --panel:rgba(13,19,34,.88);
  --panel2:rgba(22,32,52,.76);
  --line:rgba(158,177,205,.22);
  --text:#f8fafc;
  --muted:#d2dceb;
  --accent:#2d6cff;
  --accent2:#16d6df;
  --good:#22c55e;
  --warn:#f59e0b;
  --gold:#f5c46b;
  --glass:rgba(255,255,255,.055);
}
body{
  margin:0;
  min-height:100vh;
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",ui-sans-serif,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% -8%,rgba(45,108,255,.38),transparent 34%),
    radial-gradient(circle at 84% 10%,rgba(22,214,223,.20),transparent 30%),
    radial-gradient(circle at 50% 115%,rgba(245,196,107,.10),transparent 35%),
    linear-gradient(140deg,#050816 0%,#0b1223 52%,#05070f 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 18%,black,transparent 72%);
}
.app{position:relative;width:min(1040px,100%);margin:0 auto;padding:24px}
.hero{position:relative;padding:26px 2px 14px}
.hero::after{
  content:"";
  position:absolute;
  right:0;
  top:18px;
  width:min(360px,54vw);
  height:170px;
  opacity:.20;
  background:
    radial-gradient(ellipse at center,transparent 42%,rgba(32,200,210,.55) 43%,transparent 45%),
    linear-gradient(14deg,transparent 42%,rgba(255,255,255,.35) 43%,rgba(255,255,255,.35) 44%,transparent 45%);
  border-radius:50%;
  filter:blur(.2px);
}
.badge{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid rgba(125,211,252,.34);border-radius:999px;color:#dbeafe;background:linear-gradient(180deg,rgba(15,23,42,.70),rgba(2,6,23,.48));font-size:12px;font-weight:900;letter-spacing:.02em;box-shadow:0 0 34px rgba(47,109,246,.18)}
h1{margin:14px 0 8px;font-size:46px;line-height:1;letter-spacing:-.055em;font-weight:900}
h2{margin:0;font-size:24px;letter-spacing:-.02em}
.sub{max-width:680px;color:#cbd5e1;font-size:18px;line-height:1.45;margin:0}
.installPanel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:10px 12px;border:1px solid rgba(125,170,255,.24);background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(14,165,233,.08));border-radius:18px;box-shadow:0 14px 34px rgba(0,0,0,.20)}
.installPanel strong{display:block;font-size:13px;color:var(--text)}
.installPanel span{display:block;margin-top:2px;font-size:11px;line-height:1.25;color:#9fb0ca}
.installPanel button{max-width:118px;min-height:36px;padding:8px 12px;font-size:12px}
.card{background:linear-gradient(180deg,rgba(22,32,52,.88),rgba(9,14,27,.82));border:1px solid var(--line);border-radius:28px;padding:18px;margin:16px 0;box-shadow:0 30px 100px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.05) inset;backdrop-filter:blur(18px)}
.intakeCard{position:relative;overflow:hidden}
.intakeCard::before{content:"";position:absolute;right:-96px;top:-100px;width:300px;height:300px;border:1px solid rgba(32,200,210,.22);border-radius:50%;box-shadow:0 0 0 24px rgba(32,200,210,.04),0 0 0 54px rgba(47,109,246,.025);pointer-events:none}
.navigatorIntro{position:relative;margin:0 0 14px;padding:13px 15px;border:1px solid rgba(125,211,252,.26);border-radius:18px;background:linear-gradient(135deg,rgba(2,6,23,.50),rgba(14,32,56,.42));color:#dbeafe;font-weight:900;box-shadow:0 12px 36px rgba(0,0,0,.18)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fourGrid{grid-template-columns:repeat(4,1fr)}
.vinPanel,.vehicleHelperPanel{position:relative;margin:12px 0 14px;padding:12px;border:1px solid rgba(125,211,252,.16);border-radius:20px;background:linear-gradient(135deg,rgba(2,6,23,.48),rgba(14,32,56,.30));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.vehicleHelperPanel{margin-top:8px;padding:10px 12px;border-radius:16px}
.vehicleHelperPanel button[hidden]{display:none!important}
.vinRow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:end}
.optionalTag{display:inline-flex;margin-left:5px;padding:2px 7px;border-radius:999px;border:1px solid rgba(148,163,184,.22);color:#bae6fd;background:rgba(14,165,233,.10);font-size:11px;text-transform:uppercase;letter-spacing:.06em;vertical-align:middle}
.secondaryBtn{background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(20,31,52,.86));border-color:rgba(125,211,252,.24);color:#dff7ff;white-space:nowrap}
.vinScanBtn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
label{display:block;margin:11px 0 6px;color:#eaf2ff;font-weight:900;font-size:14px;letter-spacing:.01em}
input,textarea,select{
  width:100%;
  border:1px solid rgba(148,163,184,.25);
  background:linear-gradient(180deg,rgba(2,6,23,.84),rgba(6,12,25,.76));
  color:#fff;
  border-radius:16px;
  padding:12px 14px;
  font-size:16px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 1px 0 rgba(255,255,255,.02);
}
input::placeholder,textarea::placeholder{color:#c0ccdc;opacity:1}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#93c5fd 50%),linear-gradient(135deg,#93c5fd 50%,transparent 50%);background-position:calc(100% - 18px) 53%,calc(100% - 12px) 53%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:34px}
input:focus,textarea:focus,select:focus{border-color:rgba(22,214,223,.82);box-shadow:0 0 0 4px rgba(22,214,223,.12),0 0 34px rgba(45,108,255,.12)}
input.fieldLoading{
  border-color:rgba(22,214,223,.72);
  background:
    linear-gradient(90deg,rgba(22,214,223,.08),rgba(45,108,255,.18),rgba(22,214,223,.08)),
    linear-gradient(180deg,rgba(2,6,23,.84),rgba(6,12,25,.76));
  background-size:220% 100%,100% 100%;
  animation:fieldLoad 1.1s ease-in-out infinite;
}
@keyframes fieldLoad{0%{background-position:0 0,0 0}100%{background-position:220% 0,0 0}}
textarea{resize:vertical}
.inlineSelect{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.lookupPanel{position:relative;margin:14px 0;padding:14px;border:1px solid rgba(125,211,252,.18);border-radius:22px;background:linear-gradient(180deg,rgba(6,20,39,.54),rgba(2,6,23,.36));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.calibrationPicker.hidden{display:none}
.calibrationPicker{margin-top:12px;padding-top:12px;border-top:1px solid rgba(148,163,184,.14)}
.calibrationQueue{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.calibrationSlot{padding:10px;border:1px solid rgba(148,163,184,.18);border-radius:17px;background:rgba(2,6,23,.34)}
.calibrationSlot label{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#7dd3fc}
.calibrationMeta{display:inline-flex;margin-top:8px;padding:5px 9px;border-radius:999px;border:1px solid rgba(125,211,252,.22);background:rgba(14,165,233,.10);color:#dffafe;font-size:12px;font-weight:900;letter-spacing:.02em}
.calibrationMeta.empty{display:none}
.calibrationMeta[data-type="static"]{border-color:rgba(34,197,94,.34);background:rgba(34,197,94,.12);color:#bbf7d0}
.calibrationMeta[data-type="dynamic"]{border-color:rgba(245,158,11,.36);background:rgba(245,158,11,.12);color:#fde68a}
.calibrationMeta[data-type="static-or-dynamic"]{border-color:rgba(22,214,223,.34);background:rgba(22,214,223,.11);color:#cffafe}
.calibrationMeta[data-type="reset-initialization"]{border-color:rgba(191,219,254,.30);background:rgba(96,165,250,.10);color:#dbeafe}
.loadOptions{width:100%;margin-top:10px;background:linear-gradient(135deg,rgba(22,214,223,.92),rgba(45,108,255,.96));box-shadow:0 14px 36px rgba(45,108,255,.22);color:#f8fbff}
.checkRow{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid rgba(34,197,94,.38);border-radius:20px;background:linear-gradient(135deg,rgba(5,46,22,.46),rgba(2,6,23,.36));font-weight:900;box-shadow:0 16px 48px rgba(34,197,94,.08),inset 0 1px 0 rgba(255,255,255,.05)}
.checkRow input{position:absolute;opacity:0;pointer-events:none}
.checkVisual{flex:0 0 auto;width:30px;height:30px;border-radius:10px;border:2px solid rgba(134,239,172,.72);background:rgba(2,6,23,.48);box-shadow:0 0 0 4px rgba(34,197,94,.09)}
.checkRow input:checked + .checkVisual{background:linear-gradient(135deg,#22c55e,#16d6df);border-color:rgba(255,255,255,.68)}
.checkRow input:checked + .checkVisual::after{content:"✓";display:grid;place-items:center;width:100%;height:100%;color:#052e16;font-weight:900;font-size:20px}
.checkRow strong{display:block;color:#ecfdf5;font-size:16px;line-height:1.15}
.checkRow small{display:block;color:#a7f3d0;font-size:12px;line-height:1.35;margin-top:3px}
button,.fileBtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid rgba(148,163,184,.16);border-radius:13px;padding:0 13px;background:linear-gradient(180deg,rgba(37,47,63,.96),rgba(23,31,44,.94));color:white;font-weight:850;font-size:14px;letter-spacing:.01em;line-height:1.05;text-align:center;cursor:pointer;transition:transform .14s ease,filter .14s ease,background .14s ease,box-shadow .14s ease,border-color .14s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px rgba(0,0,0,.13)}
button:hover,.fileBtn:hover{filter:brightness(1.06);transform:translateY(-1px);border-color:rgba(191,219,254,.24);box-shadow:0 9px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.primary{width:100%;margin-top:14px;min-height:46px;background:linear-gradient(135deg,var(--accent),#1746c8);font-size:15px;box-shadow:0 12px 30px rgba(37,99,235,.22)}
.smallPrimary{margin-top:10px;min-height:44px}
.row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px;align-items:stretch}
.feedbackRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;align-items:stretch}
.row button,.row .fileBtn,.feedbackRow button{width:100%;min-width:0;padding-left:8px;padding-right:8px}
.feedbackHint{font-size:12px;line-height:1.35;color:#cad5e4;margin-top:7px;min-height:16px}
.fileBtn input{display:none}
.muted{color:var(--muted);font-size:14px;margin-top:8px}
.outputHeader{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px}
#conversation{display:flex;flex-direction:column;gap:8px}
.msg{padding:11px 12px;border-radius:15px;line-height:1.34;white-space:pre-wrap;font-size:16px;background:linear-gradient(180deg,rgba(2,6,23,.70),rgba(5,10,21,.66));border:1px solid rgba(148,163,184,.18)}
.msg.you{align-self:flex-end;max-width:86%;background:linear-gradient(135deg,rgba(37,99,235,.34),rgba(20,57,130,.32));font-size:15px;color:#dbeafe;border-color:rgba(96,165,250,.28)}
.msg.ai{align-self:flex-start;max-width:95%}
.photoThumbGrid{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.photoThumb{display:block;width:64px;height:64px;border-radius:12px;overflow:hidden;border:1px solid rgba(191,219,254,.34);background:rgba(2,6,23,.50);box-shadow:0 8px 20px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .15s ease,filter .15s ease,border-color .15s ease}
.photoThumb:hover{transform:translateY(-1px) scale(1.03);filter:brightness(1.08);border-color:rgba(125,211,252,.78)}
.photoThumb img{width:100%;height:100%;object-fit:cover;display:block}
.source{margin-top:6px;color:#7dd3fc;font-size:11px;font-weight:800}
.tipBox{margin:10px 0 2px;padding:10px 12px;border-radius:16px;border:1px solid rgba(32,200,210,.30);background:linear-gradient(135deg,rgba(8,47,73,.38),rgba(2,6,23,.34));color:#dffafe;font-size:14px;line-height:1.35}
.tipBox.hidden{display:none}
.tipLabel{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#67e8f9;font-weight:900;margin-bottom:5px}
.followupBox{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.followupBox.hidden{display:none}
.fieldHint{display:block;color:#cad5e4;font-size:12px;font-weight:700;margin:-2px 0 6px}
button:disabled,.primary:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
#status{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 10px;border-radius:999px;border:1px solid transparent;line-height:1.15}
#status.loading::before{content:"⏳ "}
#status.statusInfo{color:#bfdbfe;border-color:rgba(96,165,250,.28);background:rgba(37,99,235,.12)}
#status.statusSuccess{color:#bbf7d0;border-color:rgba(34,197,94,.34);background:rgba(22,163,74,.14)}
#status.statusError{color:#fecaca;border-color:rgba(248,113,113,.34);background:rgba(185,28,28,.16)}
body.dragging::after{content:"Drop scanner screen image to attach";position:fixed;inset:18px;display:grid;place-items:center;z-index:99;border:2px dashed #6ea8ff;border-radius:24px;background:rgba(7,11,20,.82);color:#f8fafc;font-weight:900;font-size:20px;pointer-events:none}
body.introOpen{overflow:hidden}
.introVideoModal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:clamp(14px,3vw,34px);background:radial-gradient(circle at 50% 12%,rgba(22,214,223,.16),transparent 34%),rgba(2,6,23,.82);backdrop-filter:blur(18px)}
.introVideoModal.hidden{display:none!important}
.introVideoCard{width:min(960px,100%);max-height:calc(100vh - 32px);overflow:auto;border:1px solid rgba(191,219,254,.20);border-radius:28px;background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(3,7,18,.98));box-shadow:0 32px 90px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08);padding:18px}
.introVideoHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.introEyebrow{color:#67e8f9;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.14em;margin-bottom:5px}
#introVideoTitle{margin:0;color:#f8fafc;font-size:clamp(20px,3vw,30px);line-height:1.05;letter-spacing:-.04em}
.introClose{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border-radius:14px;font-size:26px;line-height:1;background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.22)}
#introVideo{display:block;width:100%;aspect-ratio:16/9;border-radius:20px;background:#020617;border:1px solid rgba(148,163,184,.18);box-shadow:0 18px 50px rgba(0,0,0,.34)}
.introVideoFooter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.introDisableRow{display:flex;align-items:center;gap:10px;color:#dbeafe;font-size:14px;font-weight:850;line-height:1.25}
.introDisableRow input{width:22px;height:22px;accent-color:#16d6df;flex:0 0 auto}
.secondaryBtn{min-width:190px;background:linear-gradient(135deg,rgba(22,214,223,.92),rgba(45,108,255,.94));border-color:rgba(191,219,254,.24);box-shadow:0 14px 34px rgba(45,108,255,.22)}
.introVideoNote{margin:10px 2px 0;color:#d0dae8;font-size:12px;line-height:1.35}
@media(max-width:780px){.fourGrid{grid-template-columns:1fr 1fr}.hero::after{opacity:.12}.inlineSelect,.calibrationQueue{grid-template-columns:1fr}}
@media(max-width:620px){.app{padding:16px}h1{font-size:36px}.grid,.fourGrid,.vinRow{grid-template-columns:1fr}.row{grid-template-columns:repeat(2,minmax(0,1fr))}.row #clearBtn{grid-column:1/-1}.feedbackRow{grid-template-columns:1fr}.outputHeader{display:block}.msg{font-size:16px}.introVideoCard{padding:13px;border-radius:22px}.introVideoFooter{align-items:stretch;flex-direction:column}.secondaryBtn{width:100%;min-width:0}.introDisableRow{padding:4px 2px}}
@media(max-width:480px){.app{padding:12px}h1{font-size:30px}.badge{font-size:12px}.card{padding:12px;border-radius:18px}.feedbackRow button{min-width:0;width:100%}.msg{font-size:15px;padding:10px 11px}.msg.you{max-width:95%}.photoThumb{width:58px;height:58px}}