/* ── TOPBAR ── */
#topbar{min-height:56px;background:var(--s1);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 8px;flex-shrink:0;z-index:300;overflow:hidden}
.topbar-scroll{display:flex;align-items:center;gap:6px;padding:8px 4px;width:100%;overflow-x:auto;overflow-y:hidden}
.topbar-scroll::-webkit-scrollbar{height:4px}
.topbar-scroll::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px}
.logo{font-family:'DM Serif Display',serif;font-size:16px;color:var(--gold);white-space:nowrap;margin-right:4px}
.logo small{font-family:'Instrument Sans',sans-serif;font-size:10px;color:var(--txt3);font-style:normal;margin-left:4px}
#docname{background:transparent;border:1px solid transparent;border-radius:5px;color:var(--txt);font-family:inherit;font-size:12.5px;font-weight:500;padding:6px 9px;outline:none;min-width:260px;text-align:center;transition:.1s;flex:0 0 auto}
#docname:hover{border-color:var(--b2)}
#docname:focus{border-color:var(--blue);background:var(--s2)}
.savestatus{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--txt3)}
.sdot{width:5px;height:5px;border-radius:50%;background:var(--green)}
.sdot.busy{background:var(--gold);animation:blink .8s infinite}
.invnumbadge{display:none;font-family:'DM Mono',monospace;font-size:10.5px;color:var(--gold);background:var(--s2);border:1px solid var(--b2);border-radius:4px;padding:1px 8px;letter-spacing:.3px;flex-shrink:0}
.invnumbadge.on{display:inline}

@media (max-width: 900px){
	#docname{min-width:220px}
}

/* ── LAYOUT ── */
#app{display:flex;flex:1;overflow:hidden;min-height:0}

/* ── LEFT PANEL ── */
#lp{width:206px;background:var(--s1);border-right:1px solid var(--b1);display:flex;flex-direction:column;flex-shrink:0;transition:width .18s;overflow:hidden}
#lp.hide{width:0}
.phead{padding:9px 11px 5px;font-size:9px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:1px;flex-shrink:0}
.pscroll{flex:1;overflow-y:auto;padding:0 7px 14px}
.pscroll::-webkit-scrollbar{width:3px}
.pscroll::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.sec{font-size:8.5px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.8px;padding:9px 4px 5px}
.egrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:2px}
.etile{background:var(--s2);border:1px solid var(--b1);border-radius:6px;padding:9px 4px 7px;cursor:grab;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .12s;user-select:none}
.etile:hover{background:var(--s3);border-color:var(--blue);transform:translateY(-1px)}
.etile:active{cursor:grabbing;opacity:.8}
.etile svg{color:var(--txt2)}
.etile span{font-size:9.5px;color:var(--txt2);text-align:center;line-height:1.2}
.etile.wide{grid-column:1/-1;flex-direction:row;padding:7px 9px;gap:7px}
.etile.wide span{font-size:11px}

/* ── CANVAS AREA ── */
#carea{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;background:var(--bg);padding:16px 16px 48px;min-height:0}
#carea::-webkit-scrollbar{width:5px;height:5px}
#carea::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px}
#ctoolbar{display:flex;align-items:center;gap:5px;margin-bottom:14px;align-self:stretch;justify-content:space-between;flex-shrink:0}
.ztool{display:flex;align-items:center;gap:3px}
.zb{width:22px;height:22px;border-radius:4px;border:1px solid var(--b2);background:var(--s1);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:.1s}
.zb:hover{background:var(--s2)}
.zb.txt{width:auto;padding:0 7px;font-size:10px}
#zlabel{font-size:11px;color:var(--txt2);font-family:'DM Mono',monospace;min-width:32px;text-align:center}
.plabel{font-size:10px;color:var(--txt3)}