/* ── Header ─────────────────────────────────────────────────────────────────── */
#hdr{height:52px;background:rgba(7,12,20,.9);border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:8px;padding:0 14px;flex-shrink:0;backdrop-filter:blur(12px);z-index:20;}
.hdr-logo{display:flex;align-items:center;flex-shrink:0;}
.hdr-brand{flex-shrink:0;}
.hdr-brand h1{font-size:13px;font-weight:700;color:var(--accent);line-height:1.2;}
.hdr-brand p{font-size:8px;color:var(--muted);opacity:.55;letter-spacing:.3px;margin-top:1px;}
.hdr-brand .hdr-contact{font-size:8px;color:var(--muted);opacity:.7;letter-spacing:.2px;margin-top:2px;}
.hdr-tools{display:flex;gap:8px;align-items:center;margin-left:auto;flex-shrink:1;min-width:0;}
.hdr-scroll{display:flex;gap:4px;align-items:center;flex-shrink:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.hdr-scroll::-webkit-scrollbar{display:none;}
.hdr-tools>.btn.green,.hdr-tools>#user-area{flex-shrink:0;}
.hdr-sep{width:1px;height:20px;background:rgba(255,255,255,.08);margin:0 3px;flex-shrink:0;}

/* ── Context bar (draw / edit mode banner) ─────────────────────────────────── */
#ctx-bar{background:rgba(17,29,46,.9);border-bottom:1px solid var(--b1);padding:8px 14px;display:flex;align-items:center;gap:10px;font-size:12px;flex-shrink:0;backdrop-filter:blur(8px);}
#ctx-bar.hidden{display:none;}
.ctx-pill{background:rgba(56,189,248,.12);color:var(--accent);border:1px solid rgba(56,189,248,.2);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.ctx-hint{color:var(--muted);font-style:italic;margin-left:auto;}

/* ── Overall layout ─────────────────────────────────────────────────────────── */
.app-body{display:flex;flex:1;overflow:hidden;min-height:0;}