/* Top bar, breadcrumbs and text-format toolbar */
/* top bar */
#bar{height:48px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--bar);border-bottom:1px solid var(--bd);z-index:5}
#crumbs{flex:1;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;color:var(--muted)}
.cr{border:0;background:none;padding:4px 6px;border-radius:5px;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.cr:not(.last):hover{background:var(--hover);color:var(--ink)}
.cr.last{color:var(--ink);font-weight:650;cursor:default}
.btn{border:1px solid var(--bd);background:var(--surface);border-radius:6px;padding:6px 12px;display:inline-block}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.main{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.main:hover{background:var(--accent-hover);color:#fff}
/* format bar */
#fmt{position:absolute;z-index:30;display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--bd);border-radius:8px;box-shadow:0 4px 14px var(--shadow)}
#fmt button{width:28px;height:28px;border:1px solid transparent;background:none;border-radius:5px;padding:0;font-size:13px}
#fmt button:hover{background:var(--hover)}
#fmt button.on{background:var(--sel);color:var(--accent);border-color:var(--sel-bd)}
#rb{background:#d99b00;color:#fff;border-radius:9px;padding:0 6px;font-size:12px;margin-left:4px}

/* drawing toolbar */
#inkbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--bd);border-radius:8px;box-shadow:0 4px 14px var(--shadow)}
#inkbar button{min-width:28px;height:28px;padding:0 7px;border:1px solid transparent;border-radius:5px;background:none;font-size:13px}
#inkbar button:hover{background:var(--hover)}
#inkbar button.on{background:var(--sel);color:var(--accent);border-color:var(--sel-bd)}
#inkbar i{display:block;width:16px;height:16px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--bd);background:var(--k)}
#inkbar .sep{width:1px;height:18px;margin:0 4px;background:var(--bd)}
#sws{display:flex;align-items:center}
#inkbar button.sw{min-width:20px;width:20px;height:20px;margin:0 2px;padding:0;border:2px solid var(--surface);border-radius:50%;background:var(--k);box-shadow:0 0 0 1px var(--bd)}
#inkbar button.sw:hover:not(:disabled){background:var(--k)}
#inkbar button.sw.on{background:var(--k);border-color:var(--surface);box-shadow:0 0 0 2px var(--ink)}