/* ===== CanvasBoard 协作白板样式 ===== */
.cb-root { position: absolute; inset: 0; display: grid; grid-template-rows: 50px 1fr; background: #fff; user-select: none; -webkit-user-select: none; }

/* ── 顶栏 ── */
.cb-topbar { background: #18181B; color: #FAFAFA; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px; gap: 8px; position: relative; z-index: 20; }
.cb-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cb-logo { width: 24px; height: 24px; border-radius: 7px; flex: none; background: linear-gradient(150deg, #3C83F6, #2E6BE0); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.cb-title { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.cb-saved { font-size: 11px; color: #A1A1AA; white-space: nowrap; padding-left: 2px; font-variant-numeric: tabular-nums; }

/* ── 工具栏 ── */
.cb-tools { display: flex; align-items: center; gap: 2px; background: #27272A; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.cb-tool { width: 32px; height: 30px; border: 0; background: transparent; cursor: pointer; border-radius: 8px; color: #D4D4D8; display: grid; place-items: center; transition: background .16s cubic-bezier(.16,1,.3,1), color .16s, transform .16s; }
.cb-tool svg { width: 17px; height: 17px; display: block; }
.cb-tool:hover { background: rgba(255,255,255,.08); color: #FAFAFA; }
.cb-tool:active { transform: scale(.94); }
.cb-tool.on { background: #3C83F6; color: #fff; box-shadow: 0 1px 6px rgba(60,131,246,.5), inset 0 1px 0 rgba(255,255,255,.2); }
.cb-div { width: 1px; height: 18px; background: rgba(255,255,255,.10); margin: 0 3px; }
.cb-ro { font-size: 12px; color: #A1A1AA; padding: 0 12px; }

/* ── 右侧：协作者 + 关闭 ── */
.cb-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.cb-stack { display: flex; align-items: center; position: relative; }
.cb-stack.cb-offline::after { content: ''; position: absolute; right: -5px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 2px #18181B; }
.cb-av { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #18181B; margin-left: -7px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: #fff; overflow: hidden; transition: transform .18s cubic-bezier(.16,1,.3,1); cursor: default; background: #52525B; }
.cb-av:first-child { margin-left: 0; }
.cb-av:hover { transform: translateY(-2px) scale(1.06); z-index: 2; }
.cb-av img { width: 100%; height: 100%; object-fit: cover; }
.cb-av-more { background: #3F3F46; font-size: 9.5px; }
.cb-x { width: 28px; height: 28px; border: 0; background: transparent; color: #A1A1AA; cursor: pointer; border-radius: 8px; display: grid; place-items: center; transition: background .16s, color .16s; }
.cb-x svg { width: 16px; height: 16px; }
.cb-x:hover { background: rgba(255,255,255,.09); color: #FAFAFA; }

/* ── 舞台 ── */
.cb-stage { position: relative; overflow: hidden; background: #fff; }
.cb-board { position: absolute; inset: 0; display: block; touch-action: none; cursor: default; }

/* ── 上下文属性条 ── */
.cb-ctxbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%) translateY(-8px); background: #18181B; border-radius: 12px; padding: 6px 8px; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 24px rgba(24,24,27,.14), 0 24px 64px rgba(24,24,27,.10); opacity: 0; pointer-events: none; transition: opacity .2s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1); z-index: 30; }
.cb-ctxbar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.cb-ctxbar .cb-sep { width: 1px; height: 18px; background: rgba(255,255,255,.12); }
.cb-ctx-label { font-size: 11px; color: #A1A1AA; letter-spacing: .3px; padding: 0 2px; white-space: nowrap; }
.cb-swatches { display: flex; gap: 5px; }
.cb-sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; outline: 2px solid transparent; outline-offset: 1px; transition: transform .16s cubic-bezier(.16,1,.3,1), outline-color .16s; }
.cb-sw:hover { transform: scale(1.14); }
.cb-sw.on { outline-color: #fff; }
.cb-widths { display: flex; gap: 3px; }
.cb-wd { width: 24px; height: 24px; border-radius: 7px; border: 0; cursor: pointer; background: transparent; display: grid; place-items: center; transition: background .16s; }
.cb-wd:hover { background: rgba(255,255,255,.08); }
.cb-wd i { display: block; background: #D4D4D8; border-radius: 99px; }
.cb-wd.on { background: rgba(255,255,255,.14); }
.cb-wd.on i { background: #fff; }
.cb-ib { width: 25px; height: 25px; border: 0; border-radius: 7px; cursor: pointer; background: transparent; color: #D4D4D8; display: grid; place-items: center; transition: background .16s, color .16s; }
.cb-ib svg { width: 15px; height: 15px; }
.cb-ib:hover { background: rgba(255,255,255,.09); color: #fff; }
.cb-ib.danger:hover { background: rgba(220,38,38,.22); color: #FCA5A5; }

/* ── 缩放条 ── */
.cb-zoombar { position: absolute; left: 14px; bottom: 14px; z-index: 30; background: #fff; border: 1px solid #E4E4E7; border-radius: 11px; box-shadow: 0 1px 2px rgba(24,24,27,.06), 0 2px 8px rgba(24,24,27,.05); display: flex; align-items: center; height: 32px; padding: 0 3px; }
.cb-zoombar button { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; border-radius: 7px; color: #71717A; display: grid; place-items: center; transition: background .16s, color .16s; }
.cb-zoombar button svg { width: 14px; height: 14px; }
.cb-zoombar button:hover { background: #F4F4F5; color: #18181B; }
.cb-zval { min-width: 48px; text-align: center; font-size: 11.5px; font-weight: 550; color: #18181B; font-variant-numeric: tabular-nums; }

/* ── 小地图 ── */
.cb-mini-wrap { position: absolute; right: 14px; bottom: 14px; z-index: 30; width: 148px; height: 100px; background: #FAFAFA; border: 1px solid #E4E4E7; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(24,24,27,.06); }
.cb-mini { width: 100%; height: 100%; display: block; }

/* ── 提示条 ── */
.cb-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(6px); background: rgba(24,24,27,.86); color: #FAFAFA; font-size: 11.5px; padding: 6px 13px; border-radius: 8px; opacity: 0; transition: opacity .22s, transform .22s; pointer-events: none; z-index: 30; white-space: nowrap; }
.cb-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 便签/文字内联编辑器 ── */
.cb-editor { position: absolute; z-index: 25; display: none; border: 1px solid var(--accent); border-radius: 3px; outline: 0; resize: none; overflow: hidden; font-family: inherit; font-weight: 450; color: #18181B; background: var(--surface); caret-color: #3C83F6; line-height: 1.34; user-select: text; -webkit-user-select: text; padding: 1px 4px; margin: 0; box-shadow: 0 0 0 3px var(--accent-soft); white-space: pre; overflow-x: auto; }

/* ── 只读模式 ── */
.cb-readonly .cb-board { cursor: grab; }