/* ═════════ PWC Rep — high-contrast professional theme ═════════ */
:root{
  --navy:#0F1B2D; --navy-2:#1A2C47; --ink:#141C2B;
  --orange:#F97316; --orange-dark:#C2570C;
  --bg:#F2F5F9; --card:#FFFFFF; --line:#D8DFE8;
  --blue:#2563EB; --amber:#B45309; --violet:#7C3AED; --red:#DC2626; --green:#15803D;
  --muted:#5A6B82; --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.45;
  min-height:100dvh; padding-bottom:calc(78px + env(safe-area-inset-bottom));
}
b{font-weight:700;}
.small{font-size:13.5px;}
.muted{color:var(--muted);}
.center{text-align:center;}
.hidden{display:none !important;}
code{background:#E8EDF4; padding:2px 6px; border-radius:6px; font-size:12.5px;}
button{font:inherit; cursor:pointer;}
input,select{font:inherit; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:11px 12px; width:100%;}
input:focus,select:focus{outline:3px solid rgba(37,99,235,.35); border-color:var(--blue);}

/* ── top bar ── */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--navy); color:#fff; padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand img{border-radius:9px; flex:none;}
.brand-name{font-weight:800; letter-spacing:.06em; font-size:15px;}
.brand-sub{font-size:11.5px; color:#AFC0D8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw;}
.topbar-right{display:flex; align-items:center; gap:8px;}
.net-dot{width:11px; height:11px; border-radius:50%; display:inline-block;}
.net-dot.online{background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.25);}
.net-dot.offline{background:#F59E0B; box-shadow:0 0 0 3px rgba(245,158,11,.25);}
.btn-ghost{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.3);
  border-radius:10px; padding:7px 12px; font-size:13.5px; font-weight:600;
}
.btn-ghost:active{background:rgba(255,255,255,.25);}

/* ── layout ── */
main{max-width:600px; margin:0 auto; padding:14px 14px 20px;}
.tab{animation:fade .18s ease;}
@keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:14px;
}
.card-title{font-weight:800; font-size:16.5px; margin-bottom:10px; color:var(--navy);}

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:#E9EEF5; color:var(--ink); border:1.5px solid var(--line);
  border-radius:11px; padding:12px 14px; font-weight:700; font-size:15px;
}
.btn:active{transform:scale(.98);}
.btn-small{padding:8px 12px; font-size:13.5px; border-radius:9px;}
.btn-primary{background:var(--orange); border-color:var(--orange-dark); color:#fff;}
.btn-primary:active{background:var(--orange-dark);}
.btn-danger{background:#FDECEC; border-color:#F3B4B4; color:var(--red); width:100%;}
.file-btn{width:100%;}
.stack{display:flex; flex-direction:column; gap:10px;}
.row2{display:flex; gap:10px;} .row2>*{flex:1; min-width:0;}
.stack label, label{display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:700; color:var(--navy);}
details.card summary{list-style:none;}
details.card summary::-webkit-details-marker{display:none;}
.summary-btn{
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15.5px; color:var(--blue); padding:6px 0 14px;
}
details[open] .summary-btn{padding:6px 0 12px; border-bottom:1.5px dashed var(--line); margin-bottom:12px;}

/* ── stats ── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 6px; text-align:center;}
.stat b{display:block; font-size:20px; line-height:1.1;}
.stat span{font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.stat.new b{color:var(--blue);} .stat.contacted b{color:var(--amber);}
.stat.survey b{color:var(--violet);} .stat.closed b{color:var(--red);}

/* ── webhook ── */
.webhook-card{border-left:5px solid var(--orange);}
.webhook-url-row{display:flex; gap:8px; align-items:center; margin:10px 0;}
.webhook-url{
  flex:1; min-width:0; background:var(--navy); color:#9FE8C1; font-size:11.5px;
  padding:10px 10px; border-radius:9px; overflow-x:auto; white-space:nowrap;
  word-break:break-all; -webkit-overflow-scrolling:touch;
}

/* ── lead list ── */
.lead-list{display:flex; flex-direction:column; gap:11px;}
.lead-card{
  background:var(--card); border:1px solid var(--line); border-left:6px solid var(--blue);
  border-radius:var(--radius); padding:12px 13px; position:relative;
  transition:transform .12s ease;
}
.lead-card.st-contacted{border-left-color:var(--amber);}
.lead-card.st-survey{border-left-color:var(--violet);}
.lead-card.st-closed{border-left-color:var(--red); opacity:.82;}
.lead-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline;}
.lead-name{font-weight:800; font-size:16.5px; color:var(--navy);}
.lead-badge{font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:99px; letter-spacing:.03em;}
.lead-badge.web{background:#FDEAD2; color:var(--orange-dark);}
.lead-info{margin:7px 0 9px; font-size:14px; color:#33415C;}
.lead-info div{display:flex; gap:7px; margin-top:3px;}
.lead-info .k{flex:none; width:58px; color:var(--muted); font-size:12.5px; font-weight:700;}
.lead-actions{display:flex; gap:7px; flex-wrap:wrap; align-items:center;}
.status-btn{
  border:1.5px solid var(--line); background:#F3F6FA; color:#415271;
  font-size:12.5px; font-weight:800; border-radius:99px; padding:8px 11px;
}
.status-btn.on{color:#fff;}
.status-btn.on.st-new{background:var(--blue); border-color:var(--blue);}
.status-btn.on.st-contacted{background:#D97706; border-color:#D97706;}
.status-btn.on.st-survey{background:var(--violet); border-color:var(--violet);}
.status-btn.on.st-closed{background:var(--red); border-color:var(--red);}
.call-btn{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  background:var(--navy); color:#fff; border:none; border-radius:10px;
  padding:9px 13px; font-weight:800; font-size:13.5px;
}
.call-btn:active{background:var(--navy-2);}
.swipe-hint{position:absolute; right:10px; top:50%; transform:translateY(-50%) translateX(60px); color:var(--green); font-weight:800; font-size:13px; opacity:0; pointer-events:none;}
.lead-quote{margin-top:9px; background:#F0F6FF; border:1px solid #C9DBF7; border-radius:10px; padding:8px 10px; font-size:13px; color:#1E3A5F;}

/* ── calculator ── */
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.calc-grid label:nth-child(3){grid-column:1 / -1;}
.calc-results{border-top:1.5px dashed var(--line); padding-top:10px; margin-bottom:12px;}
.calc-row{display:flex; justify-content:space-between; padding:6.5px 2px; font-size:14.5px; color:#33415C;}
.calc-row b{color:var(--ink); font-variant-numeric:tabular-nums;}
.calc-row-total{background:#FFF7ED;} .calc-row-total b{color:var(--orange-dark); font-size:15.5px;}
.calc-row-grand{background:var(--navy); color:#fff; border-radius:10px; padding:10px 10px; font-weight:800; margin-top:4px;}
.calc-row-grand b{color:#FFD9B0; font-size:20px;}
.pay-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px;}
.pay-card{
  background:#F6F9FC; border:1.5px solid var(--line); border-radius:12px;
  padding:10px 6px; text-align:center;
}
.pay-k{display:block; font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.pay-card b{display:block; font-size:17.5px; color:var(--navy); margin:4px 0 2px; font-variant-numeric:tabular-nums;}
.pay-n{display:block; font-size:10.5px; color:var(--muted);}
.quote-actions{border-top:1.5px dashed var(--line); padding-top:12px;}

/* ── route ── */
.route-day-label{font-weight:800; color:var(--navy); margin:2px 2px 10px; font-size:15px; text-transform:uppercase; letter-spacing:.04em;}
.survey-list{display:flex; flex-direction:column; gap:11px;}
.survey-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 13px;}
.survey-card.done{opacity:.65;}
.survey-slot{display:inline-block; background:#EEF2FF; color:var(--violet); font-weight:800; font-size:12.5px; border-radius:99px; padding:4px 10px; margin-bottom:8px;}
.survey-name{font-weight:800; font-size:16px; color:var(--navy);}
.survey-addr{font-size:14px; color:#33415C; margin:5px 0 10px;}
.survey-btns{display:flex; gap:8px; flex-wrap:wrap;}
.survey-btns .btn{padding:10px 12px; font-size:13.5px;}
.btn-nav{background:#E7F6EE; border-color:#A7D8BC; color:var(--green); font-weight:800;}
.btn-sms{background:#FFF3E0; border-color:#F2C98A; color:#9A5B00; font-weight:800;}

/* ── lookbook ── */
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin-bottom:10px; -webkit-overflow-scrolling:touch;}
.chip{
  flex:none; border:1.5px solid var(--line); background:var(--card); color:#415271;
  border-radius:99px; padding:9px 15px; font-weight:800; font-size:14px;
}
.chip.on{background:var(--navy); color:#fff; border-color:var(--navy);}
.product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:11px;}
.product-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; text-align:left; padding:0;
}
.product-card img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.product-body{padding:10px 11px;}
.product-cat{font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.product-name{font-weight:800; font-size:14.5px; color:var(--navy); margin:2px 0 4px;}
.product-price{font-weight:800; color:var(--orange-dark); font-size:14.5px;}
.product-price span{font-size:11.5px; color:var(--muted); font-weight:600;}

/* ── modal ── */
.modal{position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center;}
.modal-backdrop{position:absolute; inset:0; background:rgba(10,16,28,.62);}
.modal-card{
  position:relative; width:100%; max-width:560px; background:#fff;
  border-radius:20px 20px 0 0; padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  animation:slideup .22s ease;
}
@keyframes slideup{from{transform:translateY(40px); opacity:.4;} to{transform:none; opacity:1;}}
.modal-close{position:absolute; top:10px; right:12px; background:rgba(15,27,45,.75); color:#fff; border:none; width:36px; height:36px; border-radius:50%; font-size:16px;}
.modal-card img{width:100%; border-radius:12px; display:block;}
.modal-name{font-weight:800; font-size:18px; color:var(--navy); margin-top:10px;}
.modal-price{font-weight:800; color:var(--orange-dark); font-size:16px;}
.modal-card .btn{width:100%; margin-top:12px;}

/* ── signature ── */
.sig-canvas{
  width:100%; height:190px; background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, #E3E9F1 40px), #fff;
  border:2px dashed var(--line); border-radius:12px; touch-action:none; margin:10px 0;
}
.sig-saved{margin-top:10px;}
.sig-saved img{width:100%; max-width:340px; border:1.5px solid var(--line); border-radius:10px; background:#fff;}
.sig-saved p{font-size:12.5px; color:var(--muted); margin-top:5px;}

/* ── tally ── */
.tally-today{display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:8px; margin-bottom:12px;}
.tally-box{background:#F6F9FC; border:1.5px solid var(--line); border-radius:12px; padding:10px 6px; text-align:center;}
.tally-box span{display:block; font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.02em;}
.tally-box b{display:block; font-size:19px; color:var(--navy); margin-top:3px;}
.tally-box.gold{background:var(--navy); border-color:var(--navy);}
.tally-box.gold span{color:#AFC0D8;} .tally-box.gold b{color:#FFD9B0; font-size:21px;}
.tally-list{margin-top:12px; display:flex; flex-direction:column; gap:6px;}
.tally-item{display:flex; justify-content:space-between; font-size:13.5px; background:#F6F9FC; border-radius:9px; padding:8px 10px;}
.tally-item b{font-variant-numeric:tabular-nums;}
.tally-history{margin-top:14px; border-top:1.5px dashed var(--line); padding-top:10px;}
.tally-history h4{margin:0 0 8px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.th-row{display:flex; justify-content:space-between; font-size:14px; padding:5px 2px; color:#33415C;}

/* ── bottom nav ── */
.bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:flex; background:var(--navy);
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid rgba(255,255,255,.08);
}
.bottomnav button{
  flex:1; background:none; border:none; color:#8FA3C0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 2px 8px; font-size:10.5px; font-weight:700;
}
.bottomnav button.active{color:#fff;}
.bottomnav button.active svg{color:var(--orange);}

/* ── toast ── */
.toast{
  position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:200;
  background:var(--ink); color:#fff; border-radius:12px; padding:12px 18px;
  font-weight:700; font-size:14.5px; box-shadow:0 8px 24px rgba(0,0,0,.3);
  max-width:88vw; text-align:center;
}
.empty{
  text-align:center; color:var(--muted); padding:26px 10px; font-size:14.5px;
  border:1.5px dashed var(--line); border-radius:var(--radius); background:#FAFBFD;
}