:root{
  --paper:#ffffff;
  --ink:#111111;        /* proposed / new — black */
  --existing:#8a8a8a;   /* existing conditions — grey */
  --existing-soft:#bdbdbd;
  --grid:#ededed;
  --grid-major:#dcdcdc;
  --panel:#f4f4f2;
  --panel-edge:#d4d4ce;
  --accent:#1d1d1d;
  --ok:#1f7a34;
  --bad:#9e2b25;
  --warn:#8a6d1a;
  --mono:'SFMono-Regular',ui-monospace,'Consolas','Menlo',monospace;
  --sans:'Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:#e7e7e3;
  overflow:hidden;
}
#app{display:flex;flex-direction:column;height:100vh}

/* ---------- Top bar ---------- */
#topbar{
  display:flex;align-items:center;gap:24px;
  padding:8px 16px;
  background:var(--panel);
  border-bottom:1px solid var(--panel-edge);
  flex:0 0 auto;
}
.brand{display:flex;flex-direction:column;line-height:1.1}
.logo{font-weight:800;letter-spacing:1px;font-size:18px}
.tagline{font-size:11px;color:var(--existing);letter-spacing:.5px}
#project-info{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
#project-name{font-weight:700;font-size:14px}
#project-goal{font-size:12px}
.muted{color:var(--existing)}

#budget-block{display:flex;gap:18px;align-items:center}
.budget-line{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.budget-line .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--existing)}
.budget-line .val{font-family:var(--mono);font-size:15px;font-weight:600}
.budget-line.big .val{font-size:20px}
#budget-remaining.over{color:var(--bad)}
#budget-remaining.ok{color:var(--ok)}

/* ---------- Main layout ---------- */
#main{flex:1 1 auto;display:flex;min-height:0}

#toolbar{
  flex:0 0 184px;
  background:var(--panel);
  border-right:1px solid var(--panel-edge);
  padding:10px;overflow-y:auto;
  display:flex;flex-direction:column;gap:16px;
}
.tool-group{display:flex;flex-direction:column;gap:6px}
.group-title{
  font-size:10px;text-transform:uppercase;letter-spacing:1px;
  color:var(--existing);font-weight:700;margin-bottom:2px;
}
button.tool,button.action,#material-palette .mat{
  text-align:left;font-family:var(--sans);font-size:13px;
  padding:8px 10px;border:1px solid var(--panel-edge);
  background:#fff;border-radius:5px;cursor:pointer;color:var(--ink);
  transition:background .12s,border-color .12s;
}
button.tool:hover,button.action:hover,#material-palette .mat:hover{background:#efefec}
button.tool.active,#material-palette .mat.active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
#material-palette .mat{display:flex;justify-content:space-between;align-items:center;gap:8px}
#material-palette .mat .price{font-family:var(--mono);font-size:11px;opacity:.7}
#material-palette .mat.active .price{opacity:.85}
button.action.validate{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
button.action.validate:hover{background:#000}
button.action.test{background:#2b6cb0;color:#fff;border-color:#2b6cb0;font-weight:700}
button.action.test:hover{background:#21568c}
#live-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:#333;cursor:pointer;padding:2px 2px}
#live-toggle input{margin:0}

/* stress results panel (below cost panel) */
.panel.stress{top:auto;bottom:12px;max-height:46%;overflow-y:auto;width:260px}
.panel.stress .verdict{font-weight:700;margin-bottom:6px}
.panel.stress .verdict.ok{color:var(--ok)}
.panel.stress .verdict.bad{color:var(--bad)}
.panel.stress .li{padding:3px 0;border-top:1px solid #eee;line-height:1.35}
.panel.stress .li.ok{color:var(--ok)}
.panel.stress .li.bad{color:var(--bad)}
.panel.stress .li.warn{color:var(--warn)}
.legend{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:#555}
.legend .bar{flex:1;height:9px;border-radius:5px;background:linear-gradient(90deg,#1f7a34,#b9c11f,#d98a1f,#c2453d)}
button.action.danger{color:var(--bad)}
select#project-select{padding:7px;border:1px solid var(--panel-edge);border-radius:5px;font-size:13px;background:#fff}

/* ---------- Stage / canvas ---------- */
#stage{position:relative;flex:1 1 auto;min-width:0;background:#dadad6}
#board{display:block;width:100%;height:100%;cursor:crosshair}
#hint{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  background:rgba(255,255,255,.9);border:1px solid var(--panel-edge);
  padding:5px 12px;border-radius:20px;font-size:12px;color:#444;
  pointer-events:none;white-space:nowrap;
}

/* ---------- Cost breakdown panel ---------- */
.panel{
  position:absolute;right:12px;top:12px;width:230px;
  background:rgba(255,255,255,.96);border:1px solid var(--panel-edge);
  border-radius:7px;padding:10px 12px;font-size:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.panel h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--existing)}
.panel .row{display:flex;justify-content:space-between;padding:2px 0;font-variant-numeric:tabular-nums}
.panel .row .v{font-family:var(--mono)}
.panel .row.total{border-top:1px solid var(--panel-edge);margin-top:6px;padding-top:6px;font-weight:700}
.hidden{display:none !important}

/* ---------- Status bar ---------- */
#statusbar{
  flex:0 0 auto;display:flex;gap:20px;align-items:center;
  padding:5px 14px;background:var(--panel);border-top:1px solid var(--panel-edge);
  font-size:12px;font-family:var(--mono);color:#444;
}
#statusbar .flex{flex:1 1 auto}
#status-msg{font-family:var(--sans)}
#status-msg.ok{color:var(--ok)}
#status-msg.bad{color:var(--bad)}
#status-msg.warn{color:var(--warn)}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;background:rgba(20,20,20,.45);
  display:flex;align-items:center;justify-content:center;z-index:50;
}
.modal-card{
  background:#fff;border-radius:10px;padding:24px;max-width:520px;width:92%;
  box-shadow:0 18px 60px rgba(0,0,0,.3);
}
.modal-card h2{margin:0 0 12px}
.modal-card #modal-body{font-size:14px;line-height:1.5;color:#222}
.modal-card #modal-body ul{margin:8px 0;padding-left:20px}
.modal-card #modal-body .verdict{font-size:16px;font-weight:700;margin-bottom:8px}
.modal-card #modal-body .verdict.ok{color:var(--ok)}
.modal-card #modal-body .verdict.bad{color:var(--bad)}
.modal-card #modal-close{margin-top:16px}
.modal-card kbd{font-family:var(--mono);background:#eee;border:1px solid #ccc;border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-size:11px}