:root{
  --black:#111;--copper:#a65a16;--brown:#5a2c0b;--cream:#f3e2d0;
  --paper:#fff;--bg:#f5f1ed;--border:#d8c9bd;--text:#2a201a;--muted:#776a61;
  --ok:#4f6b23;--warn:#9a5b00;--danger:#9c1c2c;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
#appShell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:var(--black);color:white;padding:22px 16px;display:flex;flex-direction:column;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:72px;height:72px;object-fit:contain}
.brand strong{display:block;letter-spacing:2px}
.brand span{font-size:12px;letter-spacing:1.8px;color:var(--cream)}
#mainNav{display:grid;gap:6px}
#mainNav button{border:0;background:transparent;color:#ddd;text-align:left;padding:12px 14px;border-radius:8px}
#mainNav button.active,#mainNav button:hover{background:var(--copper);color:white}
.tagline{margin-top:auto;font-size:12px;color:var(--cream);line-height:1.5}
.main{min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;background:white;border-bottom:1px solid var(--border)}
.topbar h1{margin:0}.topbar p{margin:4px 0 0;color:var(--muted)}
.view{display:none;padding:24px 28px}.view.active{display:block}
.primary,.secondary,.danger,.link-btn{border:0;border-radius:8px;padding:10px 14px;font-weight:700}
.primary{background:var(--copper);color:white}.secondary{background:#eadfd5;color:var(--brown)}
.danger{background:#f6d9dc;color:var(--danger)}.link-btn{background:transparent;color:var(--copper);padding:4px}
.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.span-2{grid-column:span 2}
.card{background:white;border:1px solid var(--border);border-radius:14px;padding:18px}
.card h2,.card h3{margin-top:0}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.metric{background:white;border:1px solid var(--border);border-radius:12px;padding:16px}
.metric small{color:var(--muted)}.metric strong{display:block;font-size:24px;color:var(--brown);margin-top:5px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.section-head h2{margin:0}.section-head p{margin:4px 0 0;color:var(--muted)}
label{display:block;font-weight:700;margin-bottom:12px}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #bcaea3;border-radius:8px;background:white}
.checks{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}.checks label{font-weight:500}.checks input{display:inline;width:auto;margin:0 6px 0 0}
.toolbar{display:flex;gap:12px;margin-bottom:16px}.toolbar input{flex:1}.toolbar select{max-width:220px}
.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.client-card,.estimate-row{background:white;border:1px solid var(--border);border-radius:12px;padding:16px}
.client-card h3{margin:0 0 8px}.muted{color:var(--muted)}.small{font-size:13px}
.status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}
.status.Draft{background:#eee;color:#555}.status.Sent{background:#e6eef8;color:#2f5f91}
.status.Accepted{background:#e7f0d8;color:var(--ok)}.status.Declined{background:#f6d9dc;color:var(--danger)}
.wizard{display:grid;gap:16px}.wizard-steps{display:flex;flex-wrap:wrap;gap:8px}
.wizard-steps button{border:1px solid var(--border);background:white;padding:9px 12px;border-radius:999px}
.wizard-steps button.active{background:var(--copper);color:white;border-color:var(--copper)}
.wizard-step{display:none}.wizard-step.active{display:block}.wizard-actions{display:flex;justify-content:space-between}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.photo-card{border:1px solid var(--border);padding:10px;border-radius:10px;background:white}
.photo-card img{width:100%;height:180px;object-fit:cover;border-radius:8px}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{border:1px solid var(--border);padding:9px;text-align:left}
th{background:#f0e7df}.proposal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.proposal{background:white;border:1px solid var(--border);padding:30px;max-width:900px;margin:auto}
.proposal-header{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--copper);padding-bottom:14px}
.proposal-header img{width:100px;height:100px;object-fit:contain}.proposal h1,.proposal h2{color:var(--brown)}
.proposal h2{border-bottom:1px solid var(--copper);padding-bottom:5px;margin-top:26px}
.proposal-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.proposal-photo{border:1px solid var(--border);border-radius:8px;overflow:hidden}.proposal-photo img{width:100%;height:220px;object-fit:cover}
.proposal-photo div{padding:8px}.price{font-size:28px;font-weight:800;color:var(--copper)}
dialog{border:0;border-radius:14px;padding:0;max-width:520px;width:90%}.dialog-card{padding:20px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.danger-zone{margin-top:16px}
.empty{padding:24px;text-align:center;color:var(--muted)}
@media(max-width:900px){
  #appShell{grid-template-columns:1fr}.sidebar{position:static}.brand{justify-content:center}
  #mainNav{grid-template-columns:repeat(5,1fr)}#mainNav button{text-align:center;padding:10px 6px;font-size:13px}
  .tagline{display:none}.grid.two,.grid.three,.cards-grid{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .topbar{align-items:flex-start;gap:12px}.topbar .primary{display:none}.view{padding:16px}
  .grid.two,.grid.three,.cards-grid,.metrics,.photo-grid,.proposal-photo-grid{grid-template-columns:1fr}.span-2{grid-column:auto}
  #mainNav{grid-template-columns:1fr 1fr}.wizard-steps button{font-size:12px}
}
@media print{
  .sidebar,.topbar,.wizard-steps,.wizard-actions,.proposal-actions{display:none!important}
  #appShell{display:block}.view{display:none!important;padding:0}
  #newEstimateView{display:block!important}.wizard-step{display:none!important}#step7{display:block!important}
  .proposal{border:0;max-width:none;padding:0}
}

.field-help{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--muted)}
.rate-factor-note{background:#f8efe7;border-left:4px solid var(--copper);padding:11px 12px;border-radius:8px;margin-bottom:14px;font-size:13px}
.rate-factor-grid label{background:#faf8f6;border:1px solid var(--border);padding:10px;border-radius:9px}
.profit-callout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.profit-callout>div{background:#f8efe7;border:1px solid #d7b693;border-radius:10px;padding:14px}
.profit-callout span{display:block;color:var(--muted);font-size:13px}
.profit-callout strong{display:block;color:var(--brown);font-size:22px;margin-top:5px}
.scope-frequency{min-width:150px}
@media(max-width:620px){.profit-callout{grid-template-columns:1fr}}

.proposal-contact{margin-top:5px;max-width:520px}
.proposal-section{break-inside:avoid;margin-top:18px}
.proposal-cover-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.proposal-cover-summary>div{border:1px solid var(--border);border-radius:10px;padding:15px;background:#faf7f4}
.proposal-cover-summary span,.proposal-cover-summary small{display:block;color:var(--muted)}
.proposal-cover-summary strong{display:block;font-size:21px;color:var(--brown);margin:4px 0}
.proposal-highlight-grid,.guarantee-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.proposal-highlight-grid>div,.guarantee-grid>div{border:1px solid var(--border);border-radius:9px;padding:12px;background:#faf8f6}
.proposal-highlight-grid strong,.guarantee-grid strong{display:block;color:var(--brown);margin-bottom:4px}
.proposal-highlight-grid span,.guarantee-grid span{font-size:13px;color:var(--muted)}
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.process-grid>div{border-top:3px solid var(--copper);padding:10px;background:#faf8f6}
.process-grid b{font-size:22px;color:var(--copper);display:block}.process-grid strong,.process-grid span{display:block}
.process-grid span{font-size:12px;color:var(--muted);margin-top:5px}
.service-chip-grid{display:flex;flex-wrap:wrap;gap:8px}.service-chip-grid span{background:#f2e7dd;border:1px solid #d7b693;border-radius:999px;padding:7px 10px;font-size:13px}
.testimonial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.testimonial-grid blockquote{margin:0;background:#faf8f6;border-left:4px solid var(--copper);padding:13px;font-size:13px}
.testimonial-grid cite{display:block;margin-top:8px;color:var(--muted);font-style:normal;font-weight:700}
.faq-list details{border:1px solid var(--border);border-radius:8px;padding:10px;margin-bottom:8px;background:#faf8f6}
.faq-list summary{font-weight:700;color:var(--brown);cursor:pointer}.faq-list p{margin-bottom:0}
.proposal-footer{text-align:center;border-top:2px solid var(--copper);margin-top:28px;padding-top:14px;color:var(--brown);line-height:1.5}
.proposal-toggle-list{display:grid;gap:10px}.proposal-toggle-list label{font-weight:500}.proposal-toggle-list input{display:inline;width:auto;margin:0 8px 0 0}
@media(max-width:700px){
  .proposal-cover-summary,.proposal-highlight-grid,.guarantee-grid,.testimonial-grid,.process-grid{grid-template-columns:1fr}
}
@media print{
  .faq-list details{display:block}.faq-list details:not([open]) p{display:block}.faq-list summary{list-style:none}
}

.visual-counter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.visual-counter{border:1px solid var(--border);background:#faf8f6;border-radius:12px;padding:14px;text-align:center}.visual-counter-icon{font-size:28px}.counter-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:10px}.counter-controls span{min-width:34px;font-size:22px;font-weight:800;color:var(--brown)}.live-quote-panel{background:#111;color:white;padding:10px 14px;border-radius:10px;text-align:right;min-width:210px}.live-quote-panel span,.live-quote-panel small{display:block;color:var(--cream)}.live-quote-panel strong{display:block;font-size:24px}.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.why-grid>div{border:1px solid var(--border);border-radius:10px;padding:13px;background:#faf8f6}.why-grid strong{display:block;color:var(--brown);margin-bottom:5px}.why-grid span{font-size:13px;color:var(--muted)}.why-closing{margin-top:14px;background:#f2e7dd;border-left:4px solid var(--copper);padding:13px;border-radius:8px}.status.Under\ Review{background:#f5ead6;color:#8a5a00}.status.Expired{background:#eee;color:#666}@media(max-width:900px){.visual-counter-grid,.why-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.visual-counter-grid,.why-grid{grid-template-columns:1fr}.live-quote-panel{width:100%;text-align:left}}


.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(166,90,22,.22), transparent 34%),
    linear-gradient(135deg,#0b0b0b,#1b120d 58%,#32170a);
}
.login-card{
  width:min(440px,100%);
  background:white;
  border:1px solid #d8c9bd;
  border-radius:18px;
  padding:28px;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.login-logo{
  width:132px;
  height:132px;
  object-fit:contain;
  margin-bottom:10px;
}
.login-card h1{
  margin:0;
  color:var(--brown);
}
.login-card>p{
  margin:6px 0 24px;
  color:var(--muted);
}
.login-card label{
  text-align:left;
}
.login-button{
  width:100%;
  margin-top:4px;
  padding:12px 16px;
}
.login-message{
  min-height:24px;
  margin-top:10px;
  color:var(--danger);
  font-weight:700;
}
.login-footer{
  border-top:1px solid var(--border);
  margin-top:20px;
  padding-top:16px;
  color:var(--brown);
  font-size:13px;
  font-weight:700;
}
.app-locked{
  display:none!important;
}
body.authenticated .login-screen{
  display:none;
}
body.authenticated #appShell{
  display:grid;
}
@media(max-width:900px){
  body.authenticated #appShell{display:grid}
}