/* SIDEBAR */
#sb{width:320px;flex-shrink:0;background:var(--surf);border-left:1px solid var(--b1);display:flex;flex-direction:column;overflow:hidden}

#tools{padding:7px 8px 6px;border-bottom:1px solid var(--b1);display:flex;flex-wrap:wrap;gap:4px;flex-shrink:0;position:relative}
.tbtn{display:flex;align-items:center;gap:5px;padding:5px 9px;background:transparent;border:1px solid var(--b1);border-radius:var(--rs);color:var(--sub);font-size:11px;cursor:pointer;white-space:nowrap;transition:all .12s;user-select:none;position:relative;flex:1 1 76px;min-width:0;justify-content:center;height:30px}
/* Icon-only square (e.g. Ruler): fixed small width, no flex grow */
.tbtn.icon-only{flex:0 0 36px;padding:0;min-width:36px;width:36px}
.tbtn:hover{border-color:var(--bg);color:var(--text)}
.tbtn.on{background:var(--gold-faint);border-color:var(--gold-dim);color:var(--gold)}
.tbtn .tbtsub{font-family:var(--font);font-size:9px;color:var(--gold);margin-left:3px;opacity:.85}

/* Toolbar popups — fixed-positioned via JS so they always stay on screen */
.tpop{position:fixed;background:var(--surf);border:1px solid var(--bg);border-radius:var(--r);padding:6px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.6);min-width:180px;max-width:min(300px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;display:none}
.tbtn.poplock{position:relative;z-index:121}
.tbtn.poplock .tpop{display:block}
.tpop .tpitem{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:var(--rs);cursor:pointer;font-size:11px;color:var(--text)}
.tpop .tpitem:hover{background:var(--gold-faint);color:var(--gold)}
.tpop .tpitem.sel{background:var(--gold-faint);color:var(--gold);border:1px solid var(--gold-dim)}
.tpop .tpitem .tpicn{width:16px;text-align:center;flex-shrink:0;font-size:13px}
.tpop .tpitem .tpinfo{font-family:var(--font);font-size:10px;color:var(--sub);margin-left:auto}

#newRow{padding:8px 10px;border-bottom:1px solid var(--b1);flex-shrink:0}
.inp{width:100%;padding:6px 9px;background:var(--panel);border:1px solid var(--b1);border-radius:var(--rs);color:var(--text);font-size:12px;outline:none;transition:border-color .12s;margin-bottom:5px}
.inp:focus{border-color:var(--bg)}
.inp::placeholder{color:var(--dim)}
.row{display:flex;gap:5px;align-items:center}
.smbt{padding:5px 8px;background:transparent;border:1px solid var(--b1);border-radius:var(--rs);color:var(--sub);font-size:11px;cursor:pointer;white-space:nowrap;transition:all .12s}
.smbt:hover{border-color:var(--bgh);color:var(--text)}

/* COLOR DOT — locked aspect ratio */
.crow{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;align-items:center}
.cdot{width:18px;height:18px;min-width:18px;min-height:18px;max-width:18px;max-height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;flex-grow:0;display:inline-block;aspect-ratio:1/1;padding:0;box-sizing:border-box}
.cdot:hover{transform:scale(1.25)}
.cdot.sel{border-color:#fff}