:root{
  --blue:#0084FF; --blue2:#0EA1FD; --accent:#009CFF;
  --navy:#0b1f3a; --ink:#1c2b45; --muted:#5b6b85;
  --line:#e4e9f2; --bg:#eef4fb; --card:#ffffff;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626;
  --light:#22c55e; --moderate:#f59e0b; --heavy:#dc2626;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5;
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit}

/* ---- Layout ---- */
.app{max-width:900px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
header.top{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;padding:16px 20px;position:sticky;top:0;z-index:20;
}
header.top .brand{font-weight:800;letter-spacing:.4px;font-size:13px;text-transform:uppercase;opacity:.95}
header.top h1{margin:2px 0 0;font-size:20px;font-weight:800}
.steps{display:flex;gap:6px;padding:10px 20px 0;flex-wrap:wrap;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.stepchip{font-size:12px;font-weight:700;color:var(--muted);padding:8px 4px 12px;border-bottom:3px solid transparent;flex:1 1 auto;text-align:center;white-space:nowrap}
.stepchip.active{color:var(--blue);border-color:var(--blue)}
.stepchip.done{color:var(--ok)}
main{flex:1;padding:20px}
.step{display:none}
.step.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- Cards / typography ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,40,80,.04)}
h2.step-h{font-size:20px;color:var(--navy);margin:0 0 4px;font-weight:800}
p.step-sub{color:var(--muted);margin:0 0 16px;font-size:14px}
.section-h{font-weight:800;color:var(--navy);margin:18px 0 8px;font-size:15px}
.muted{color:var(--muted)}
.opt{font-weight:400;color:var(--muted);font-size:12px}

/* ---- Forms ---- */
label.fld{display:block;font-weight:700;color:var(--navy);margin:12px 0 6px;font-size:14px}
input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;font-size:16px;color:var(--ink);background:#fff;
}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,132,255,.15)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>div{flex:1 1 200px}

/* ---- Buttons ---- */
.nav{display:flex;gap:12px;margin-top:8px}
button.primary{flex:1;padding:16px;border:none;border-radius:12px;background:var(--blue);color:#fff;font-size:17px;font-weight:800;cursor:pointer;transition:.15s}
button.primary:disabled{background:#b7cdea;cursor:not-allowed}
button.primary:not(:disabled):active{transform:translateY(1px)}
button.ghost{padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);font-size:16px;font-weight:700;cursor:pointer}
button.small{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--blue);font-weight:700;font-size:14px;cursor:pointer}
.err-msg{color:var(--err);font-weight:600;margin-top:10px;font-size:14px;display:none}

/* ---- Booking list ---- */
.searchbar{display:flex;gap:10px;margin-bottom:12px}
.searchbar input{flex:1}
.booking{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;background:#fff}
.booking:active{border-color:var(--blue);background:#f5faff}
.booking .who{font-weight:700;color:var(--navy)}
.booking .meta{font-size:13px;color:var(--muted)}
.booking .time{font-weight:700;color:var(--blue);font-size:14px}
.emptyhint{color:var(--muted);font-size:14px;padding:8px 2px}

/* ---- Condition rating ---- */
.ratewrap{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 4px}
.rate{flex:1 1 auto;min-width:90px;padding:12px 8px;border:1px solid var(--line);border-radius:11px;background:#fff;text-align:center;font-weight:700;color:var(--muted);cursor:pointer;font-size:14px}
.rate.sel{border-color:var(--blue);color:var(--blue);background:#f0f7ff;box-shadow:0 0 0 2px rgba(0,132,255,.15)}

/* ---- Damage map ---- */
.mapwrap{position:relative;width:100%;max-width:520px;margin:0 auto;touch-action:manipulation}
.mapwrap svg{width:100%;height:auto;display:block;background:#f7fafe;border:1px solid var(--line);border-radius:14px}
.mapwrap .marker{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}
.maphint{text-align:center;color:var(--muted);font-size:13px;margin:8px 0 0}
.dmg-list{margin-top:14px}
.dmg-item{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px}
.dmg-num{width:26px;height:26px;border-radius:50%;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.dmg-body{flex:1}
.dmg-body .t{font-weight:700;color:var(--navy)}
.dmg-body .s{font-size:13px;color:var(--muted)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.chip{padding:9px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer}
.chip.sel{border-color:var(--blue);color:var(--blue);background:#f0f7ff}
.chip.sev-light.sel{border-color:var(--light);color:#15803d;background:#f0fdf4}
.chip.sev-moderate.sel{border-color:var(--moderate);color:#b45309;background:#fffbeb}
.chip.sev-heavy.sel{border-color:var(--heavy);color:#b91c1c;background:#fef2f2}
.linkbtn{background:none;border:none;color:var(--err);font-weight:700;cursor:pointer;font-size:13px;padding:2px 4px}

/* ---- Photos ---- */
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:6px}
.phototile{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;position:relative}
.phototile .ph{aspect-ratio:4/3;background:#f0f4fa;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:8px;cursor:pointer}
.phototile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.phototile .cap{padding:8px 10px;font-size:12px;font-weight:700;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:6px}
.phototile.done .cap{color:var(--ok)}
.phototile .retake{color:var(--blue);font-weight:700;font-size:12px;cursor:pointer;background:none;border:none;padding:0}
.phototile.extra .capinput{width:100%;border:none;border-top:1px solid var(--line);padding:8px 10px;font-size:13px}
.reqbadge{position:absolute;top:6px;left:6px;background:var(--warn);color:#fff;font-size:10px;font-weight:800;padding:3px 7px;border-radius:6px;letter-spacing:.3px}
.phototile.done .reqbadge{background:var(--ok)}
.addphoto{border:2px dashed #b9cdea;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:800;cursor:pointer;aspect-ratio:4/3;font-size:15px}

/* ---- Terms panel ---- */
.terms-scroll{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:16px;background:#fcfdff;font-size:13.5px}
.terms-scroll h3{font-size:14.5px;color:var(--navy);margin:16px 0 6px;font-weight:800}
.terms-scroll h3:first-child{margin-top:0}
.terms-scroll p{margin:0 0 8px}
.terms-scroll .cl{margin:0 0 8px}
.terms-scroll .cn{font-weight:700;color:var(--navy)}
.toggle-row{display:flex;gap:12px;align-items:flex-start;margin:16px 0;background:#f0f7ff;border:1px solid #d7e8ff;border-radius:12px;padding:14px}
.toggle-row input{width:22px;height:22px;margin-top:1px;flex:none;accent-color:var(--blue)}
.toggle-row label{font-weight:600;color:var(--ink);margin:0}
.agree{display:flex;gap:12px;align-items:flex-start;margin:14px 0 4px;background:#eefaf1;border:1px solid #bfe6cb;border-radius:12px;padding:14px}
.agree input{width:24px;height:24px;margin-top:1px;flex:none;accent-color:var(--ok)}
.agree label{margin:0;font-weight:700;color:var(--ink)}

/* ---- Signature ---- */
.pad-wrap{position:relative;margin-top:6px}
canvas#pad{width:100%;height:210px;background:#fff;border:2px dashed #b9cdea;border-radius:12px;touch-action:none;display:block}
.pad-hint{position:absolute;left:14px;top:14px;color:#9db3d4;font-size:14px;pointer-events:none}
.pad-tools{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.link-btn{background:none;border:none;color:var(--blue);font-weight:700;cursor:pointer;font-size:14px;padding:4px}

/* ---- Summary / success ---- */
.summary dt{font-weight:700;color:var(--navy);font-size:13px;margin-top:10px}
.summary dd{margin:2px 0 0;color:var(--ink)}
.success{text-align:center;padding:24px 10px}
.success .tick{width:72px;height:72px;border-radius:50%;background:var(--ok);color:#fff;font-size:40px;line-height:72px;margin:0 auto 14px}
.success h2{color:var(--navy);margin:0 0 8px}
.success p{color:var(--muted);margin:0 auto 14px;max-width:480px}
.success a.dl,.success button.dl{display:inline-block;margin-top:6px;color:var(--blue);font-weight:800;text-decoration:none;background:none;border:none;font-size:15px;cursor:pointer}
.fineprint{font-size:12px;color:var(--muted);margin:8px 20px 28px;text-align:center}
.spin{display:inline-block;width:16px;height:16px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}