.cynkel-wb{ display:flex; flex-direction:column; gap:8px; width:100%; }
.cynkel-wb .wb-toolbar{ position:absolute; top:8px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:rgba(15,23,42,0.92); backdrop-filter:blur(6px); color:#e2e8f0; border:1px solid rgba(255,255,255,0.12); padding:8px; border-radius:14px; box-shadow:0 6px 22px -4px rgba(0,0,0,0.45); z-index:10005; }
.cynkel-wb .wb-toolbar.drag-floating{ left:120px; top:80px; }
.cynkel-wb .wb-toolbar.dragging{ opacity:.85; cursor:grabbing; }
.wb-toolbar-handle{ width:14px; height:24px; background:linear-gradient(90deg,rgba(255,255,255,0.15) 40%, transparent 40%); background-size:4px 4px; border-radius:6px; cursor:grab; }
.wb-collapse-btn{ background:#334155 !important; font-size:12px; }
body.wb-collapsed-toolbar .wb-toolbar{ pointer-events:none; opacity:0; }
.wb-menu-toggle{ position:fixed; z-index:10006; background:#2563eb; color:#fff; padding:10px 14px; border-radius:30px; font-size:13px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.35); user-select:none; }
.wb-board-picker-btn{ background:#1e3a8a !important; font-size:12px; }
.wb-board-dropdown{ position:fixed; z-index:10020; background:#0f172a; color:#e2e8f0; border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:8px 10px 10px; box-shadow:0 10px 28px rgba(0,0,0,0.55); display:none; max-height:60vh; overflow:auto; }
.wb-board-dropdown.open{ display:block; }
.wb-board-dropdown .wb-bd-head{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; margin:0 0 6px; }
.wb-board-dropdown .wb-bd-head button.close{ background:none; border:0; color:#94a3b8; font-size:16px; cursor:pointer; }
.wb-board-dropdown ul.wb-board-list{ list-style:none; margin:0 0 8px; padding:0; }
.wb-board-dropdown ul.wb-board-list li{ padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px; line-height:1.1; }
.wb-board-dropdown ul.wb-board-list li.active{ background:#1e40af; color:#fff; }
.wb-board-dropdown ul.wb-board-list li:hover{ background:#1e293b; }
.wb-board-dropdown ul.wb-board-list li.empty{ opacity:.55; cursor:default; }
.wb-board-dropdown ul.wb-img-list li{ cursor:default; }
.wb-board-dropdown ul.wb-img-list li button.wb-small{ margin-left:auto; }
.wb-board-dropdown .wb-board-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.wb-board-dropdown .wb-board-actions button.wb-small{ background:#1f2937; padding:6px 10px; font-size:12px; border:1px solid rgba(255,255,255,0.15); border-radius:6px; cursor:pointer; }
.wb-board-dropdown .wb-board-actions button.wb-small:hover{ background:#334155; }
.cynkel-wb .wb-toolbar .spacer{ display:none; flex:0 0 auto; width:0; }
.cynkel-wb .wb-toolbar .divider{ width:1px; height:22px; background:rgba(255,255,255,0.12); margin:0 4px; }
.cynkel-wb .wb-toolbar button{ background:#1f2937; color:#e5e7eb; border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:6px 10px; cursor:pointer; }
.cynkel-wb .wb-toolbar button.active{ background:#2563eb; border-color:#1d4ed8; }
.cynkel-wb .wb-toolbar label.pen-only{ display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:4px 6px; background:#1f2835; border:1px solid rgba(255,255,255,0.08); border-radius:6px; }
.cynkel-wb .wb-toolbar select#wb-brush{ background:#0f172a; color:#e2e8f0; border:1px solid rgba(255,255,255,0.2); border-radius:6px; font-size:12px; padding:4px 6px; }
.wb-nib input[type="number"]{ width:60px; background:#0f172a; color:#e2e8f0; border:1px solid rgba(255,255,255,0.2); border-radius:4px; }
.cynkel-wb .wb-toolbar button#wb-fullscreen, .cynkel-wb .wb-toolbar button#wb-export{ font-size:12px; }
.cynkel-wb .wb-toolbar .wb-users{ display:inline-flex; align-items:center; gap:6px; font-size:12px; background:#1f2835; padding:4px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.08); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cynkel-wb .wb-toolbar .wb-users span{ background:#2563eb; color:#fff; padding:2px 6px; border-radius:12px; font-size:11px; }
.cynkel-wb .wb-toolbar .wb-username{ background:#334155; border:1px solid rgba(255,255,255,0.15); color:#f1f5f9; font-size:12px; }
.wb-board-fab{ position:fixed; top:70px; left:12px; z-index:10001; background:#2563eb; color:#fff; padding:10px 14px; border-radius:30px; font-size:13px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.35); user-select:none; }
.wb-board-fab.menu-mode{ background:#0ea5e9; }
.wb-toolbar{ transition:opacity .25s ease, transform .25s ease; }
.wb-toolbar-collapsed .wb-toolbar{ opacity:0; pointer-events:none; transform:translate(-50%,-160%); }
.wb-board-fab.dragging{ opacity:.7; }
.wb-board-panel{ position:fixed; top:120px; left:12px; background:#0f172a; color:#e2e8f0; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,0.15); box-shadow:0 8px 28px rgba(0,0,0,0.5); width:240px; z-index:10002; display:none; }
.wb-board-panel.open{ display:block; }
.wb-board-panel h4{ margin:0 0 8px; font-size:14px; }
.wb-board-panel button.close{ position:absolute; top:4px; right:6px; background:none; color:#94a3b8; border:0; font-size:16px; cursor:pointer; }
.wb-users-detail{ position:fixed; bottom:20px; right:20px; background:#0f172a; color:#e2e8f0; padding:10px 12px; border-radius:10px; font-size:12px; border:1px solid rgba(255,255,255,0.12); box-shadow:0 10px 28px rgba(0,0,0,0.5); z-index:10002; display:none; max-width:260px; }
.wb-users-detail.open{ display:block; }
.wb-users-detail ul{ list-style:none; margin:0; padding:0; max-height:180px; overflow:auto; }
.wb-users-detail li{ padding:4px 0; display:flex; justify-content:space-between; gap:6px; border-bottom:1px solid rgba(255,255,255,0.08); }
.wb-users-detail li:last-child{ border-bottom:0; }
.wb-pages{ display:flex; align-items:center; gap:6px; background:#1e293b; padding:4px 8px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); }
.wb-pages button{ background:#334155; border:1px solid rgba(255,255,255,0.15); color:#e2e8f0; padding:4px 8px; border-radius:6px; cursor:pointer; font-size:12px; }
.wb-pages select{ background:#0f172a; color:#e2e8f0; border:1px solid rgba(255,255,255,0.2); border-radius:6px; font-size:12px; padding:2px 4px; }
.wb-page-boundary{ position:absolute; left:0; right:0; border:2px dashed rgba(37,99,235,0.35); pointer-events:none; }
@media (max-width: 800px){
	.cynkel-wb .wb-toolbar{ flex-wrap:wrap; }
	.cynkel-wb .wb-toolbar select{ max-width:140px; }
	.cynkel-wb .wb-toolbar button, .cynkel-wb .wb-toolbar label{ flex:0 0 auto; }
	.cynkel-wb canvas{ margin:10px; }
}
.cynkel-wb .wb-stage-wrap{ position:relative; width:100%; flex:1 1 auto; min-height:60vh; background:#0b1220; border:1px solid rgba(255,255,255,0.08); border-radius:10px; overflow:hidden; }
/* Canvas now scales dynamically via JS; width/height attributes are set in script for correct drawing resolution */
.cynkel-wb canvas{ display:block; background:#fff; margin:0; box-shadow:0 10px 30px rgba(0,0,0,0.35); }
/* Fullscreen fixed mode */
.wb-fixed{ position:fixed !important; inset:0; z-index:9999; background:#0b1220; padding:0; margin:0; display:flex; flex-direction:column; }
.wb-fixed, .wb-fixed *{ box-sizing:border-box; }
.wb-fixed{ max-width:none !important; width:100vw !important; height:100vh !important; }
html, body{ height:100%; }
body.wb-fullscreen-active{ margin:0 !important; padding:0 !important; }
.wb-fixed body{ overflow:hidden; }
.wb-fixed .wb-toolbar{ border-radius:14px; }
.wb-fixed .wb-stage-wrap{ flex:1 1 auto; height:100%; overflow:hidden; padding:0; }
.wb-fixed canvas{ margin:0; box-shadow:none; border-radius:0; }
body.wb-fullscreen-active{ overflow:hidden; }
.cynkel-wb canvas{ touch-action:none; }
.cynkel-wb, .cynkel-wb *{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
/* History panel */
.wb-history{ position:fixed; top:0; right:-260px; width:240px; height:100%; background:#111a26; color:#cbd5e1; z-index:10000; box-shadow:-4px 0 12px rgba(0,0,0,0.4); transition:right .25s ease; display:flex; flex-direction:column; }
.wb-history.open{ right:0; }
.wb-history .wb-history-head{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:#1e293b; font-weight:600; }
.wb-history .wb-history-head button{ background:none; color:#94a3b8; border:0; font-size:16px; cursor:pointer; }
.wb-history ul{ list-style:none; margin:0; padding:6px 10px; flex:1 1 auto; overflow:auto; font-size:12px; }
.wb-history li{ padding:4px 4px; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; gap:4px; align-items:center; }
.wb-history li .h-user{ background:#2563eb; color:#fff; border-radius:4px; padding:2px 4px; font-size:10px; }
.wb-history li .h-type{ opacity:.85; }
/* Zoom buttons inherit toolbar styling already */
/* Resize handles */
.wb-resize-handle{position:absolute;background:rgba(255,255,255,0.4);z-index:10002;}
.wb-resize-handle:hover{background:rgba(255,255,255,0.7);} 
.wb-resize-e{top:50%;right:0;transform:translateY(-50%);width:6px;height:60%;cursor:ew-resize;border-radius:3px;}
.wb-resize-s{left:50%;bottom:0;transform:translateX(-50%);width:60%;height:6px;cursor:ns-resize;border-radius:3px;}
/* Remove unused handles previously defined */
/* Ball shape styles removed */

/* Image selection tools (rotate/crop/opacity) */
.wb-img-tools{ display:inline-flex; align-items:center; gap:6px; margin-right:6px; }
.wb-img-tools button{ padding:2px 6px; font-size:12px; line-height:1.2; }
.wb-img-tools .wb-img-op{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#94a3b8; }
.wb-img-tools .wb-img-op input[type="range"]{ width:90px; }
/* Degree input for rotation */
.wb-img-tools .wb-deg{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#94a3b8; background:#1f2835; border:1px solid rgba(255,255,255,0.08); padding:2px 6px; border-radius:6px; }
.wb-img-tools .wb-deg input[type="number"]{ width:56px; background:#0f172a; color:#e2e8f0; border:1px solid rgba(255,255,255,0.2); border-radius:4px; padding:2px 4px; }

/* Touch-friendly floating delete button near selected image */
.wb-img-del{ position:fixed; z-index:10030; background:#dc2626; color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:10px 12px; font-size:14px; box-shadow:0 6px 18px rgba(0,0,0,0.45); display:none; touch-action:manipulation; }
.wb-img-del:active{ transform:translateY(1px); }