/* ============================================================
   WHITEBOARD MODULE
   ============================================================ */

#pills-whiteboard.tab-pane {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Loading Overlay ──────────────────────────────────────── */
.wb-loading-overlay {
  position: absolute; inset: 0; z-index: 1000;
  background: rgba(10,10,20,0.72);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: opacity 0.2s;
}
.wb-loading-box {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 30px 44px;
  background: rgba(22,22,38,0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.wb-loading-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(59,130,246,0.2);
  border-top-color: #3b82f6;
  animation: wb-spin 0.7s linear infinite;
}
.wb-loading-msg { font-size: 0.82rem; color: #9ca3af; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
.wb-loading-sub { font-size: 0.7rem; color: #4b5563; }

/* ── No Board Overlay ─────────────────────────────────────── */
.wb-no-board-overlay {
  position: absolute; inset: 0; z-index: 500;
  background: rgba(10,10,20,0.55);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.wb-no-board-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #6b7280;
  text-align: center;
}
.wb-no-board-box > .bi { font-size: 2.2rem; opacity: .3; }
.wb-no-board-title { font-size: 1rem; font-weight: 600; color: #9ca3af; }
.wb-no-board-sub   { font-size: 0.78rem; color: #6b7280; max-width: 240px; line-height: 1.4; }

/* ── Board Selector ───────────────────────────────────────── */
.wb-board-selector { flex-shrink: 0; }

.wb-board-current-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px; min-width: 120px; max-width: 240px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #e2e8f0;
  cursor: pointer; font-size: 0.8rem; font-weight: 500;
  transition: all 0.12s;
}
.wb-board-current-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); }
.wb-board-current-btn.open { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.5); }
.wb-board-current-btn i:first-child { color: #3b82f6; flex-shrink: 0; }
#wbCurrentBoardName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-board-chevron { font-size: 0.6rem; flex-shrink: 0; transition: transform 0.15s; color: #6b7280; }
.wb-board-current-btn.open .wb-board-chevron { transform: rotate(180deg); }

.wb-board-menu {
  position: fixed; /* escapes overflow:hidden stacking contexts */
  width: 290px;
  background: #131320; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.65);
  z-index: 5000; overflow: hidden;
  animation: wb-menu-in 0.14s ease;
}
@keyframes wb-menu-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

.wb-board-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.wb-board-menu-title { font-size: 0.65rem; font-weight: 700; color: #4b5563; text-transform: uppercase; letter-spacing: 0.08em; }
.wb-board-new-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: rgba(59,130,246,0.18); border: 1px solid rgba(59,130,246,0.3);
  border-radius: 6px; color: #60a5fa; font-size: 0.7rem; font-weight: 600;
  cursor: pointer; transition: all 0.12s;
}
.wb-board-new-btn:hover { background: rgba(59,130,246,0.3); color: #93c5fd; }

/* Board search */
.wb-board-search-wrap { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.wb-board-search-icon { color: #4b5563; font-size: 0.72rem; flex-shrink: 0; }
.wb-board-search-input { flex: 1; background: transparent; border: none; outline: none; color: #d1d5db; font-size: 0.78rem; }
.wb-board-search-input::placeholder { color: #374151; }

/* Board tabs */
.wb-board-tabs { display: flex; gap: 2px; padding: 6px 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.wb-board-tab { flex: 1; font-size: 0.64rem; font-weight: 600; padding: 3px 6px; border-radius: 5px; border: none; background: transparent; color: #4b5563; cursor: pointer; transition: all 0.12s; }
.wb-board-tab:hover { color: #9ca3af; background: rgba(255,255,255,0.05); }
.wb-board-tab.active { background: rgba(59,130,246,0.18); color: #60a5fa; }

/* Board icon color row (in form) */
.wb-board-icon-row { display: flex; align-items: center; gap: 6px; }
.wb-board-icon-label { font-size: 0.62rem; color: #6b7280; flex-shrink: 0; }
.wb-icon-colors { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.wb-icon-color-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; transition: transform 0.1s, border-color 0.1s; }
.wb-icon-color-dot:hover { transform: scale(1.3); }
.wb-icon-color-dot.active { border-color: rgba(255,255,255,0.7); transform: scale(1.15); }
.wb-icon-custom-color { width: 14px; height: 14px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.35); cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; }
.wb-icon-custom-color input[type=color] { position: absolute; width: 200%; height: 200%; top:-50%; left:-50%; opacity:0; cursor:pointer; border:none; padding:0; }

.wb-board-section-label {
  font-size: 0.6rem; font-weight: 700; color: #374151;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 8px 14px 4px;
}
.wb-board-empty { font-size: 0.72rem; color: #374151; text-align: center; padding: 16px 0; }

.wb-board-list { padding: 4px 6px 6px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
.wb-board-list::-webkit-scrollbar { width: 4px; }
.wb-board-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.wb-board-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 8px;
  cursor: pointer; transition: background 0.1s;
  position: relative;
}
.wb-board-item:hover { background: rgba(255,255,255,0.05); }
.wb-board-item.active { background: rgba(59,130,246,0.12); }

.wb-board-item-icon { font-size: 0.82rem; flex-shrink: 0; }
.wb-board-item-icon.shared  { color: #3b82f6; }
.wb-board-item-icon.private { color: #8b5cf6; }

.wb-board-item-info { flex: 1; min-width: 0; }
.wb-board-item-name {
  font-size: 0.78rem; color: #d1d5db;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.2;
}
.wb-board-item.active .wb-board-item-name { color: #60a5fa; font-weight: 600; }
.wb-board-protected-icon  { font-size: 0.56rem; color: #f59e0b; margin-left: 4px; vertical-align: middle; }
.wb-board-pinned-icon     { font-size: 0.56rem; color: #60a5fa; margin-left: 4px; vertical-align: middle; }
.wb-board-default-icon    { font-size: 0.56rem; color: #4ade80; margin-left: 4px; vertical-align: middle; }
.wb-board-restricted-icon { font-size: 0.56rem; color: #8b5cf6; margin-left: 4px; vertical-align: middle; }

/* Pinned / default item tints */
.wb-board-item.is-pinned  { border-left: 2px solid rgba(96,165,250,0.4); padding-left: 6px; }
.wb-board-item.is-default { border-left: 2px solid rgba(74,222,128,0.4); padding-left: 6px; }
.wb-board-item.is-pinned.is-default { border-left: 2px solid rgba(74,222,128,0.6); }

/* Favorite star button */
.wb-board-fav-btn {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 4px;
  border: none; background: transparent; color: #4b5563;
  font-size: 0.68rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.1s; opacity: 0;
}
.wb-board-item:hover .wb-board-fav-btn,
.wb-board-fav-btn.active { opacity: 1; }
.wb-board-fav-btn.active { color: #f59e0b; }
.wb-board-fav-btn:hover  { background: rgba(245,158,11,0.15); color: #fbbf24; }

/* ··· button + submenu */
.wb-board-item-menu-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; }
.wb-board-item-more {
  width: 22px; height: 22px; border-radius: 4px;
  border: none; background: transparent; color: #4b5563;
  font-size: 0.78rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.1s; opacity: 0;
}
.wb-board-item:hover .wb-board-item-more,
.wb-board-item-more.open { opacity: 1; }
.wb-board-item-more:hover,
.wb-board-item-more.open { background: rgba(255,255,255,0.08); color: #e2e8f0; }

.wb-board-item-submenu {
  position: fixed; z-index: 9999;
  background: #1e293b; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 4px;
  min-width: 170px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.wb-board-submenu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 10px;
  border: none; background: transparent; color: #9ca3af;
  font-size: 0.73rem; cursor: pointer; border-radius: 5px;
  text-align: left; white-space: nowrap; transition: all 0.1s;
}
.wb-board-submenu-item i { font-size: 0.7rem; width: 14px; text-align: center; flex-shrink: 0; }
.wb-board-submenu-item:hover { background: rgba(255,255,255,0.07); color: #e2e8f0; }
.wb-board-submenu-item.danger:hover { background: rgba(239,68,68,0.15); color: #f87171; }
.wb-board-submenu-item.active { color: #60a5fa; }
.wb-board-submenu-item.is-default-btn.active { color: #4ade80; }
.wb-board-submenu-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 3px 4px; }

/* Inline action buttons (rename / delete confirm) */
.wb-board-item-action {
  width: 24px; height: 24px; border-radius: 5px;
  border: none; background: transparent; color: #6b7280;
  font-size: 0.7rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.1s;
}
.wb-board-item-action:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.wb-board-item-action.danger:hover { background: rgba(239,68,68,0.2); color: #f87171; }

/* Inline rename */
.wb-board-inline-wrap { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.wb-board-inline-input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px; color: #e2e8f0; font-size: 0.78rem;
  padding: 3px 7px; outline: none;
}
.wb-board-inline-input:focus { border-color: #3b82f6; background: rgba(59,130,246,0.1); }
.wb-board-inline-input.wb-input-error { border-color: #ef4444; animation: wb-shake 0.3s; }
@keyframes wb-shake { 0%,100%{transform:none} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* Inline delete */
.wb-del-label { font-size: 0.68rem; color: #f87171; white-space: nowrap; margin-right: 2px; }

/* New board form */
.wb-board-form {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 10px 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.wb-board-form-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px; color: #e2e8f0; font-size: 0.8rem;
  padding: 7px 10px; outline: none; transition: border-color 0.15s, background 0.15s;
}
.wb-board-form-input:focus { border-color: #3b82f6; background: rgba(59,130,246,0.08); }
.wb-board-form-input.wb-input-error { border-color: #ef4444; animation: wb-shake 0.3s; }
.wb-board-form-input::placeholder { color: #4b5563; }

.wb-board-type-row { display: flex; gap: 5px; }
.wb-type-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 8px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: #6b7280;
  font-size: 0.72rem; cursor: pointer; transition: all 0.12s; font-weight: 500;
}
.wb-type-btn:hover { background: rgba(255,255,255,0.08); color: #9ca3af; }
.wb-type-btn.active[data-t="shared"]  { background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.4); color: #60a5fa; }
.wb-type-btn.active[data-t="private"] { background: rgba(139,92,246,0.18); border-color: rgba(139,92,246,0.4); color: #a78bfa; }

.wb-board-form-actions { display: flex; gap: 5px; justify-content: flex-end; align-items: center; }
.wb-board-form-cancel {
  padding: 5px 12px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #6b7280;
  font-size: 0.72rem; cursor: pointer; transition: all 0.12s;
}
.wb-board-form-cancel:hover { color: #9ca3af; border-color: rgba(255,255,255,0.2); }
.wb-board-form-save {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 14px; border-radius: 6px;
  border: none; background: #3b82f6; color: #fff;
  font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: background 0.12s;
}
.wb-board-form-save:hover:not(:disabled) { background: #2563eb; }
.wb-board-form-save:disabled { opacity: 0.5; cursor: default; }

/* ── Shell ─────────────────────────────────────────────────── */
.wb-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  min-height: 500px;
  overflow: hidden;
  background: #0f0f17;
  border-radius: 10px;
  position: relative;
}

/* ── Top bar ──────────────────────────────────────────────── */
.wb-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  flex-shrink: 0;
  flex-wrap: wrap;
  z-index: 400;
}

.wb-mode-group {
  display: flex;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.wb-mode-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  border: none; border-radius: 6px;
  font-size: 0.78rem; font-weight: 500;
  cursor: pointer; background: transparent; color: #aaa;
  transition: all 0.15s; white-space: nowrap;
}
.wb-mode-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.wb-mode-btn.active { background: #3b82f6; color: #fff; }
.wb-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: wb-pulse 2s infinite; flex-shrink: 0; }
@keyframes wb-pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* Save indicator */
.wb-save-indicator {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: #4b5563;
  transition: color 0.2s; white-space: nowrap;
}
.wb-save-indicator .wb-save-ok,
.wb-save-indicator .wb-save-saving,
.wb-save-indicator .wb-save-err { display: none; font-size: 0.9rem; }
.wb-save-indicator[data-state="saving"] { color: #60a5fa; }
.wb-save-indicator[data-state="saving"] .wb-save-saving { display: inline; animation: wb-save-pulse 0.9s ease-in-out infinite; }
.wb-save-indicator[data-state="ok"]     { color: #4ade80; }
.wb-save-indicator[data-state="ok"]     .wb-save-ok { display: inline; }
.wb-save-indicator[data-state="err"]    { color: #f87171; }
.wb-save-indicator[data-state="err"]    .wb-save-err { display: inline; }
.wb-save-indicator[data-state="idle"]   { opacity: 0; pointer-events: none; }
.wb-save-label { font-size: 0.68rem; }
@keyframes wb-save-pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.wb-presence { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.wb-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: #fff;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: default; flex-shrink: 0;
  transition: transform 0.15s;
}
.wb-avatar:hover { transform: scale(1.15); z-index: 2; }
.wb-active-count { font-size: 0.7rem; color: #9ca3af; white-space: nowrap; }
.wb-topbar-spacer { flex: 1; }
.wb-manual-save-btn { padding: 4px 8px !important; }
.wb-manual-save-btn:hover { background: rgba(74,222,128,.12) !important; color: #4ade80 !important; border-color: rgba(74,222,128,.3) !important; }
.wb-ls-pending-badge { display: flex; align-items: center; font-size: 0.75rem; color: #fbbf24; gap: 3px; cursor: default; }
.wb-ls-pending-badge i { font-size: 0.8rem; }
.wb-top-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
  font-size: 0.75rem; background: transparent; color: #9ca3af;
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap;
}
.wb-top-btn i.bi { font-size: 0.85rem; flex-shrink: 0; }
.wb-top-btn:hover { background: rgba(255,255,255,0.09); color: #e2e8f0; border-color: rgba(255,255,255,0.22); }
.wb-top-btn.active { background: rgba(59,130,246,0.16); color: #93c5fd; border-color: rgba(59,130,246,0.35); }
.wb-top-btn.danger:hover { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); }

/* ── Topbar options dropdown ────────────────────────────────── */
.wb-top-dropdown-wrap { position: relative; }
.wb-top-dropdown {
  position: absolute; top: calc(100% + 5px); right: 0; z-index: 99999;
  background: #131320; border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px; padding: 5px 0; min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
}
.wb-top-dd-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 14px; background: none; border: none;
  color: #9ca3af; font-size: 0.78rem; cursor: pointer;
  text-align: left; transition: background 0.1s, color 0.1s; white-space: nowrap;
}
.wb-top-dd-item i.bi { font-size: 0.85rem; flex-shrink: 0; width: 1em; text-align: center; }
.wb-top-dd-item:hover { background: rgba(255,255,255,0.09); color: #e2e8f0; }
.wb-top-dd-item.active { color: #60a5fa; }
.wb-top-dd-item.danger { color: #9ca3af; }
.wb-top-dd-item.danger:hover { background: rgba(239,68,68,0.15); color: #f87171; }
.wb-top-dd-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }

/* ── Global text formatter (above toolbar) ─────────────────── */
.wb-fmt-global {
  display: flex; align-items: center; gap: 1px;
  padding: 3px 10px; height: 36px; flex-shrink: 0;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.wb-fmt-global::-webkit-scrollbar { display: none; }
.wb-fmt-g-btn {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid transparent; background: transparent; color: #9ca3af;
  font-size: 0.78rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s; padding: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.wb-fmt-g-btn i.bi { font-size: 0.82rem; }
.wb-fmt-g-btn:hover { background: rgba(255,255,255,0.09); color: #e2e8f0; }
.wb-fmt-g-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.08); margin: 0 3px; flex-shrink: 0; }
.wb-fmt-g-color {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: #6b7280; font-size: 0.72rem; cursor: pointer;
  padding: 3px 5px; border-radius: 4px; transition: all 0.1s;
  position: relative; min-width: 22px;
}
.wb-fmt-g-color:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.wb-fmt-g-color input[type=color] {
  position: absolute; width: 100%; height: 100%; top:0; left:0; opacity:0; cursor:pointer; border:none; padding:0;
}
.wb-fmt-g-color-bar {
  display: block; width: 16px; height: 3px; border-radius: 2px; pointer-events: none; flex-shrink: 0;
}

/* Font family / size selects — compact, same token color */
.wb-fmt-g-family,
.wb-fmt-g-ptsize {
  font-size: 0.72rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: #9ca3af; border-radius: 6px; padding: 2px 6px; cursor: pointer; outline: none;
  flex-shrink: 0; height: 24px;
}
.wb-fmt-g-family { max-width: 110px; }
.wb-fmt-g-family option,
.wb-fmt-g-ptsize option { background: #1a1a2e; color: #e2e8f0; }
.wb-fmt-g-family:hover, .wb-fmt-g-family:focus,
.wb-fmt-g-ptsize:hover, .wb-fmt-g-ptsize:focus { background: rgba(255,255,255,0.08); color: #e2e8f0; border-color: rgba(255,255,255,0.2); }

/* Border radius control */
.wb-fmt-g-radius {
  display: flex; align-items: center; gap: 4px;
  color: #6b7280; font-size: 0.62rem; padding: 2px 5px; flex-shrink: 0; white-space: nowrap;
}
.wb-fmt-g-radius input[type=range] {
  width: 50px; height: 4px; cursor: pointer; accent-color: #3b82f6; flex-shrink: 0;
}
#wbTextRadiusVal { font-size: 0.6rem; color: #4b5563; min-width: 14px; text-align: right; }

/* Active state for any format button */
.wb-fmt-g-btn.active {
  background: rgba(96,165,250,0.2) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96,165,250,0.3) !important;
}
.wb-sticky-fmt-btn.active, .wb-card-fmt-btn.active {
  background: rgba(96,165,250,0.2) !important;
  color: #60a5fa !important;
}

/* ── Horizontal toolbar (top, always visible) ─────────────── */
.wb-toolbar {
  display: flex; flex-direction: row; align-items: center; gap: 2px;
  padding: 4px 10px; height: 44px;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  overflow-x: auto; overflow-y: hidden;
  flex-shrink: 0; flex-wrap: nowrap;
  scrollbar-width: none; transition: height 0.2s, padding 0.2s, opacity 0.2s;
}
.wb-toolbar::-webkit-scrollbar { display: none; }
.wb-toolbar.collapsed { height: 0; padding: 0; opacity: 0; pointer-events: none; overflow: hidden; }

/* ── Main layout ──────────────────────────────────────────── */
.wb-main { display: flex; flex: 1; overflow: hidden; }

/* ── Shared icon token: 0.85 rem, color #9ca3af ─────────────
   Applied consistently to toolbar, topbar buttons, and ctx menu icons.
   ──────────────────────────────────────────────────────────── */
.wb-tool {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #9ca3af;
  cursor: pointer; font-size: 0.85rem;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wb-tool:hover { background: rgba(255,255,255,0.09); color: #e2e8f0; }
.wb-tool.active { background: #3b82f6; color: #fff; border-color: rgba(59,130,246,0.5); box-shadow: 0 0 8px rgba(59,130,246,0.3); }
.wb-tool:disabled { opacity: 0.28; cursor: default; pointer-events: none; }
.wb-tool--danger:hover { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.25); }
.wb-tool-label { display: none; }
.wb-tool-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.08); margin: 0 3px; flex-shrink: 0; }

.wb-color-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; }
.wb-color-swatch input[type=color] { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; opacity: 0; cursor: pointer; border: none; padding: 0; }
/* Background theme dropdown */
.wb-bg-wrap { position: relative; }
.wb-bg-trigger { display: flex; align-items: center; gap: 4px; }
.wb-bg-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,.25); background: #1e1e2e; flex-shrink: 0; }
.wb-bg-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #0f1a2e; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: .65rem .75rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  z-index: 200001; min-width: 200px;
}
.wb-bg-section-lbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #4b5563; margin-bottom: .4rem; }
.wb-bg-themes { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; margin-bottom: .2rem; }
.wb-bg-theme { background: none; border: none; padding: 0; cursor: pointer; border-radius: 5px; overflow: hidden; }
.wb-bg-theme span { display: block; width: 100%; aspect-ratio: 1; border-radius: 5px; transition: transform .1s, box-shadow .1s; }
.wb-bg-theme:hover span { transform: scale(1.12); box-shadow: 0 0 0 2px #60a5fa; }
.wb-bg-custom-row { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: .25rem 0; }
.wb-bg-custom-input { width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2); cursor: pointer; }
.wb-bg-custom-row span { font-size: .76rem; color: #94a3b8; }
.wb-stroke-label { display: none; }

.wb-stroke-range {
  -webkit-appearance: none; appearance: none;
  width: 64px; height: 4px;
  border-radius: 2px; outline: none; cursor: pointer;
  writing-mode: horizontal-tb; direction: ltr;
  background: linear-gradient(to right, #3b82f6 var(--val,10%), rgba(255,255,255,0.15) var(--val,10%));
  flex-shrink: 0;
}
.wb-stroke-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }

.wb-fill-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 18px; border-radius: 9px; background: rgba(255,255,255,0.1); cursor: pointer; transition: background 0.15s; border: 1px solid rgba(255,255,255,0.15); position: relative; }
.wb-fill-toggle.on { background: #3b82f6; }
.wb-fill-toggle-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; position: absolute; left: 2px; transition: left 0.15s; }
.wb-fill-toggle.on .wb-fill-toggle-dot { left: 14px; }

/* ── Canvas wrap ──────────────────────────────────────────── */
.wb-canvas-wrap {
  flex: 1; position: relative; overflow: hidden;
  cursor: crosshair;
  background-color: #1e1e2e;
}
.wb-canvas-wrap.tool-select  { cursor: default; }
.wb-canvas-wrap.tool-path    { cursor: crosshair; }
.wb-canvas-wrap.tool-rect,
.wb-canvas-wrap.tool-circle,
.wb-canvas-wrap.tool-line,
.wb-canvas-wrap.tool-arrow,
.wb-canvas-wrap.tool-diamond,
.wb-canvas-wrap.tool-hexagon,
.wb-canvas-wrap.tool-parallelogram,
.wb-canvas-wrap.tool-cylinder,
.wb-canvas-wrap.tool-triangle,
.wb-canvas-wrap.tool-star5,
.wb-canvas-wrap.tool-rounded_rect,
.wb-canvas-wrap.tool-process,
.wb-canvas-wrap.tool-terminator,
.wb-canvas-wrap.tool-callout  { cursor: crosshair; }
/* All DOM elements show move cursor on hover when not locked */
.wb-card:not(.wb-card--locked):hover,
.wb-text-el:hover,
.wb-dnode:hover,
.wb-file-card:hover,
.wb-sector:hover { cursor: move; }
.wb-canvas-wrap.tool-pan    { cursor: grab; }
.wb-canvas-wrap.tool-pan.panning, .wb-canvas-wrap.wb-mmb-panning { cursor: grabbing !important; }
.wb-canvas-wrap.tool-eraser { cursor: cell; }
#wbCanvas { display: block; }

/* Grid canvas must stay behind ALL canvas objects — use z-index: 0 and DOM order */
.wb-grid-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; }

/* ── Zoom badge (top-right, unobstructed) ─────────────────── */
.wb-zoom-badge {
  font-size: 0.65rem; color: #4b5563; min-width: 36px;
  text-align: center; flex-shrink: 0; pointer-events: none;
}

/* ── Sticky layer (DOM overlay) ───────────────────────────── */
#wbStickyLayer {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  transform-origin: 0 0;
}

/* ── Remote cursors ───────────────────────────────────────── */
.wb-remote-cursor { position: absolute; pointer-events: none; z-index: 500; transition: left 0.12s linear, top 0.12s linear; }
.wb-remote-cursor-icon { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.wb-remote-cursor-label { position: absolute; top: 14px; left: 4px; font-size: 0.62rem; font-weight: 600; white-space: nowrap; padding: 1px 5px; border-radius: 4px; color: #fff; }

/* ── Toast ────────────────────────────────────────────────── */
.wb-toast-wrap { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.wb-toast { padding: 7px 16px; border-radius: 20px; font-size: 0.78rem; font-weight: 500; color: #fff; background: rgba(20,20,40,0.92); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); animation: wb-toast-in 0.18s ease; white-space: nowrap; }
.wb-toast.ok   { background: rgba(34,197,94,0.88); }
.wb-toast.warn { background: rgba(234,179,8,0.88); }
.wb-toast.err  { background: rgba(239,68,68,0.88); }
@keyframes wb-toast-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }

/* ── Context menu ─────────────────────────────────────────── */
.wb-ctx-menu { display: none; position: fixed; z-index: 99999; background: #1a1a2e; border: 1px solid rgba(255,255,255,0.13); border-radius: 10px; padding: 5px 0; min-width: 210px; box-shadow: 0 8px 32px rgba(0,0,0,0.65); }
.wb-ctx-item { padding: 6px 14px; font-size: 0.78rem; color: #9ca3af; cursor: pointer; display: flex; align-items: center; gap: 9px; transition: background 0.1s, color 0.1s; }
.wb-ctx-item i.bi { font-size: 0.85rem; flex-shrink: 0; width: 1em; text-align: center; }
.wb-ctx-item:hover { background: rgba(255,255,255,0.09); color: #e2e8f0; }
.wb-ctx-item.danger { color: #f87171; }
.wb-ctx-item.danger:hover { background: rgba(239,68,68,0.15); color: #f87171; }
.wb-ctx-item .wb-ctx-shortcut { margin-left: auto; font-size: 0.65rem; color: #4b5563; }
.wb-ctx-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
/* Category labels inside submenus */
.wb-ctx-label {
  padding: 3px 14px 2px; font-size: 0.65rem; font-weight: 600;
  color: #4b5563; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: default; pointer-events: none;
}
/* Disabled whole submenu group (readonly board) */
.wb-ctx-disabled { opacity: 0.38; pointer-events: none; }

/* ── Element details popover ─────────────────────────────── */
.wb-el-details {
  position: fixed; z-index: 99998;
  background: #131320; border: 1px solid rgba(255,255,255,0.13);
  border-radius: 12px; padding: 0; min-width: 260px; max-width: 340px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7); color: #ccc; font-size: 0.78rem;
  overflow: hidden;
}
.wb-el-details-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 10px; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.wb-el-details-title { font-weight: 600; color: #e2e8f0; font-size: 0.82rem; display:flex; align-items:center; gap:7px; }
.wb-el-details-type-badge {
  font-size: 0.62rem; padding: 1px 7px; border-radius: 99px;
  background: rgba(59,130,246,0.2); color: #93c5fd; font-weight:500;
}
.wb-el-details-close { background: none; border: none; color: #555; cursor: pointer; font-size: 0.85rem; padding: 0; line-height:1; }
.wb-el-details-close:hover { color: #e2e8f0; }
.wb-el-details-body { padding: 10px 14px 12px; }
.wb-el-details-row { display: flex; gap: 8px; margin-bottom: 7px; line-height: 1.5; align-items: flex-start; }
.wb-el-details-label { color: #4b5563; min-width: 78px; flex-shrink: 0; padding-top: 1px; }
.wb-el-details-val { color: #d1d5db; word-break: break-word; flex: 1; }
.wb-el-details-val.mine { color: #60a5fa; font-weight: 500; }
.wb-el-details-tag {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  background: rgba(59,130,246,0.18); color: #93c5fd;
  font-size: 0.68rem; margin: 1px 3px 2px 0; line-height: 1.5;
}
.wb-el-details-preview {
  font-style: italic; color: #6b7280; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 180px; display: inline-block; vertical-align: bottom;
}
.wb-el-details-sep { height: 1px; background: rgba(255,255,255,0.06); margin: 8px 0; }

/* ── Read-only mode ──────────────────────────────────────── */
.wb-readonly-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; color: #f59e0b; flex-shrink: 0;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 99px; padding: 2px 9px;
  pointer-events: none; white-space: nowrap;
}

/* Hide entire toolbar and format bars */
.wb--readonly .wb-toolbar          { display: none !important; }
.wb--readonly #wbFmtGlobal         { display: none !important; }
.wb--readonly .wb-te-fmtbar        { display: none !important; }

/* Block all interaction on text elements (prevents dblclick → edit) */
.wb--readonly .wb-text-el          { pointer-events: none !important; cursor: default !important; }

/* Default cursor on canvas area */
.wb--readonly #wbCanvasWrap        { cursor: default !important; }

/* Topbar: hide edit-specific controls */
.wb--readonly #wbBgWrap       { display: none !important; }
.wb--readonly #wbDiagPanelBtn { display: none !important; }
.wb--readonly #wbGridToggle   { display: none !important; }
.wb--readonly #wbClearBtn     { display: none !important; }

/* Context menu: hide all edit actions; keep fit/zoom and card comments */
.wb--readonly #wbCtxOpenDiagPanel { display: none !important; }
.wb--readonly #wbCtxTrash         { display: none !important; }
.wb--readonly #wbCtxClearAll      { display: none !important; }
.wb--readonly #wbCtxTextEdit      { display: none !important; }
.wb--readonly #wbCtxSepText       { display: none !important; }
.wb--readonly #wbCtxDetails       { display: none !important; }
.wb--readonly #wbCtxSepDetails    { display: none !important; }
.wb--readonly #wbCtxSepFile       { display: none !important; }

/* Cards: disable all editing controls but keep content viewable */
.wb--readonly .wb-card-title       { pointer-events: none; user-select: text; }
.wb--readonly .wb-card-body-text   { pointer-events: none; user-select: text; }
.wb--readonly .wb-card-add-task,
.wb--readonly .wb-card-add-tag,
.wb--readonly .wb-card-add-link    { display: none !important; }
.wb--readonly .wb-card-task-del,
.wb--readonly .wb-card-tag-del,
.wb--readonly .wb-card-link-del    { display: none !important; }
.wb--readonly .wb-card-task input[type=checkbox] { pointer-events: none; }
.wb--readonly .wb-card-color-dot,
.wb--readonly .wb-card-custom-color { display: none !important; }
.wb--readonly [data-act="delete"]  { display: none !important; }
.wb--readonly .wb-card-att-del     { display: none !important; }
.wb--readonly .wb-card-editors [data-act="assign"] { display: none !important; }
.wb--readonly .wb-card-assignee-del { display: none !important; }
/* Keep card resize handles hidden */
.wb--readonly .wb-resize-se,
.wb--readonly .wb-resize-sw,
.wb--readonly .wb-resize-ne,
.wb--readonly .wb-resize-nw,
.wb--readonly .wb-resize-n,
.wb--readonly .wb-resize-s,
.wb--readonly .wb-resize-e,
.wb--readonly .wb-resize-w         { display: none !important; }

/* Stickies */
.wb--readonly .wb-sticky-title,
.wb--readonly .wb-sticky-body      { pointer-events: none; user-select: text; }
.wb--readonly .wb-sticky-color-dot,
.wb--readonly .wb-sticky-custom-color { display: none !important; }
.wb--readonly .wb-sticky-resize    { display: none !important; }

/* Text elements: hide resize handles */
.wb--readonly .wb-te-h             { display: none !important; }

/* Sectors/groups: hide all editing controls */
.wb--readonly .wb-sector-actions   { display: none !important; }
.wb--readonly .wb-sector-del       { display: none !important; }
.wb--readonly .wb-sector-rz        { display: none !important; }
.wb--readonly .wb-sector-title     { pointer-events: none; user-select: text; }
.wb--readonly .wb-sector-desc      { pointer-events: none; user-select: text; }

/* Smart lines: hide endpoint handles and toolbar */
.wb--readonly .wb-sl-ep            { display: none !important; }
.wb--readonly .wb-sl-toolbar       { display: none !important; }

/* File card: keep viewable, hide delete */
.wb--readonly .wb-file-del,
.wb--readonly .wb-file-card-del    { display: none !important; }

/* Hide toolbar toggle button (toolbar itself is hidden) */
.wb--readonly #wbToolbarToggle     { display: none !important; }

/* Failsafe: hide create items in context menu */
.wb--readonly #wbCtxAddText,
.wb--readonly #wbCtxAddCard,
.wb--readonly #wbCtxAddSector,
.wb--readonly #wbCtxAddWbLine,
.wb--readonly #wbCtxSepCreate      { display: none !important; }

/* Task grip: no reordering */
.wb--readonly .wb-task-grip        { pointer-events: none; cursor: default; opacity: 0.3; }

/* Card: hide collapse, assign buttons; hide description formatter */
.wb--readonly .wb-card-collapse-btn { display: none !important; }
.wb--readonly .wb-card-assign       { display: none !important; }
.wb--readonly .wb-card-fmt-bar      { display: none !important; }

/* Card task text, tag, link: no editing interactions */
.wb--readonly .wb-card-task-text    { pointer-events: none !important; user-select: text; }
.wb--readonly .wb-card-tag          { pointer-events: none !important; cursor: default; }
.wb--readonly .wb-card-link         { pointer-events: none !important; cursor: default; }
.wb--readonly .wb-card-link-row     { pointer-events: none !important; }
.wb--readonly .wb-card-link-edit    { display: none !important; }

/* Card attachments: no drag-move; keep view/download */
.wb--readonly .wb-card-attachment   { pointer-events: none !important; }
.wb--readonly .wb-card-attachment a { pointer-events: auto; }

/* Dnode: block all interaction in readonly */
.wb--readonly .wb-dnode             { pointer-events: none !important; }
.wb--readonly .wb-dnode::after      { pointer-events: none !important; }

/* Card resize: disable via pointer-events (handles already hidden) */
.wb--readonly .wb-card-body-resize-handle { display: none !important; }

/* UC composer in card comments panel: hide in readonly (read only, no replies) */
.wb--readonly .wb-cs-uc-shell .uc-composer { display: none !important; }
.wb--readonly .wb-cs-uc-shell .uc-reply-btn { display: none !important; }

/* ── Export format dialog ────────────────────────────────── */
.wb-export-overlay {
  position: fixed; inset: 0; z-index: 500001;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
}
.wb-export-modal {
  background: #1e2130; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 24px; width: 380px; max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.wb-export-modal-title {
  font-size: 0.95rem; font-weight: 600; color: #e2e8f0;
  margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
}
.wb-export-modal-title i { color: #60a5fa; }
.wb-export-formats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;
}
.wb-export-fmt {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: #e2e8f0; cursor: pointer; transition: all 0.15s;
}
.wb-export-fmt:hover { background: rgba(96,165,250,0.12); border-color: #3b82f6; color: #93c5fd; }
.wb-export-fmt i { font-size: 1.4rem; color: #60a5fa; }
.wb-export-fmt-name { font-weight: 700; font-size: 0.9rem; }
.wb-export-fmt-desc { font-size: 0.68rem; color: #6b7280; text-align: center; line-height: 1.3; }
.wb-export-cancel {
  width: 100%; padding: 8px; border-radius: 6px;
  background: transparent; border: 1px solid rgba(255,255,255,0.1);
  color: #6b7280; cursor: pointer; font-size: 0.82rem; transition: all 0.15s;
}
.wb-export-cancel:hover { border-color: rgba(255,255,255,0.25); color: #9ca3af; }

/* ── Delete confirmation ─────────────────────────────────── */
.wb-del-confirm-overlay {
  position: fixed; inset: 0; z-index: 500000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45);
}
.wb-del-confirm-box {
  background: #131320; border: 1px solid rgba(239,68,68,0.35);
  border-radius: 12px; padding: 20px 24px; min-width: 280px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; gap: 14px;
  animation: wb-del-confirm-in 0.12s ease-out;
}
@keyframes wb-del-confirm-in {
  from { opacity:0; transform:scale(0.94); }
  to   { opacity:1; transform:scale(1); }
}
.wb-del-confirm-title {
  font-size: 0.9rem; font-weight: 600; color: #f87171;
  display: flex; align-items: center; gap: 7px;
}
.wb-del-confirm-msg { font-size: 0.78rem; color: #9ca3af; margin-top: -4px; }
.wb-del-confirm-btns { display: flex; gap: 8px; justify-content: flex-end; }
.wb-del-confirm-no {
  padding: 6px 14px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); color: #9ca3af; font-size: 0.8rem;
  cursor: pointer; transition: all 0.1s;
}
.wb-del-confirm-no:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.wb-del-confirm-yes {
  padding: 6px 14px; border-radius: 7px; border: none;
  background: #dc2626; color: #fff; font-size: 0.8rem;
  font-weight: 500; cursor: pointer; transition: background 0.1s;
}
.wb-del-confirm-yes:hover { background: #b91c1c; }
.wb-del-confirm-yes.danger { background: #dc2626; }
.wb-del-confirm-yes.danger:hover { background: #b91c1c; }
/* 3-button layout for sector delete dialog */
.wb-del-confirm-btns--3 { justify-content: space-between; }
.wb-del-confirm-alt {
  padding: 6px 14px; border-radius: 7px;
  border: 1px solid rgba(96,165,250,0.4);
  background: rgba(96,165,250,0.1); color: #60a5fa; font-size: 0.8rem;
  font-weight: 500; cursor: pointer; transition: all 0.1s; white-space: nowrap;
}
.wb-del-confirm-alt:hover { background: rgba(96,165,250,0.2); border-color: #60a5fa; }

/* ── Element search panel ─────────────────────────────────── */
/* ── Trash panel ──────────────────────────────────────── */
/* ── Smart Line (wbline) ────────────────────────────────────── */
.wb-smart-line { pointer-events: none; }
.wb-sl-svg     { pointer-events: none; }
.wb-sl-preview .wb-sl-path { opacity: .55; }
/* Endpoint handles (shown when selected) */
.wb-sl-handle {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid #3b82f6;
  position: absolute; pointer-events: all; cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  transition: transform .1s; z-index: 1;
  display: none;
}
.wb-el--selected .wb-sl-handle { display: block; }
.wb-sl-handle:hover { transform: scale(1.35); }
.wb-canvas-wrap.tool-wbline { cursor: crosshair; }
/* Smart line floating toolbar */
.wb-sl-toolbar {
  position: fixed; z-index: 300000;
  display: flex; align-items: center; gap: 2px;
  background: #0f172a; border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 4px 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
  pointer-events: all;
}
.wb-sl-tb-group { display: flex; align-items: center; gap: 1px; }
.wb-sl-tb-sep   { width: 1px; height: 18px; background: rgba(255,255,255,.1); margin: 0 4px; flex-shrink:0; }
.wb-sl-tb-lbl   { font-size: .6rem; color: #4b5563; margin-right: 2px; }
.wb-sl-tb-btn {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  padding: 3px 6px; border-radius: 5px; font-size: .8rem; line-height: 1;
  transition: all .1s; white-space: nowrap;
}
.wb-sl-tb-btn:hover  { background: rgba(255,255,255,.1); color: #e2e8f0; }
.wb-sl-tb-btn.active { background: rgba(96,165,250,.2); color: #60a5fa; }
.wb-sl-tb-color {
  width: 24px; height: 24px; border-radius: 4px; border: none; cursor: pointer;
  padding: 1px; background: none;
}
.wb-sl-tb-width { width: 60px; cursor: pointer; accent-color: #3b82f6; }
/* Line style preview swatches */
.wb-sl-ps, .wb-sl-pd, .wb-sl-pdt {
  display: inline-block; width: 20px; height: 2px; vertical-align: middle;
  background: currentColor;
}
.wb-sl-pd  { background: none; border-top: 2px dashed currentColor; }
.wb-sl-pdt { background: none; border-top: 2px dotted currentColor; }

/* ── Trash panel ────────────────────────────────────────────── */
.wb-trash-panel {
  position: fixed; z-index: 250000; top: 58px; right: 12px;
  width: 340px; max-width: calc(100vw - 24px); max-height: calc(100vh - 80px);
  background: #0d1526; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; box-shadow: 0 16px 56px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
  display: flex; flex-direction: column; overflow: hidden;
  animation: wb-trash-in .15s ease;
}
@keyframes wb-trash-in { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }

/* Header */
.wb-trash-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1rem; background: rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.wb-trash-head-title {
  display: flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 600; color: #e2e8f0;
}
.wb-trash-head-title > i { color: #f87171; font-size: .9rem; }
.wb-trash-count { font-size: .72rem; font-weight: 400; color: #4b5563; }
.wb-trash-close {
  background: none; border: none; color: #4b5563; cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s;
}
.wb-trash-close:hover { background: rgba(255,255,255,.08); color: #e2e8f0; }

/* Toolbar (search + vaciar) */
.wb-trash-toolbar {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .7rem; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.wb-trash-search-wrap {
  flex: 1; position: relative; display: flex; align-items: center;
}
.wb-trash-search-icon { position: absolute; left: 8px; color: #4b5563; font-size: .78rem; pointer-events: none; }
.wb-trash-search {
  width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px; color: #e2e8f0; font-size: .78rem;
  padding: .3rem .5rem .3rem 1.8rem; outline: none; transition: border-color .15s;
}
.wb-trash-search::placeholder { color: #374151; }
.wb-trash-search:focus { border-color: rgba(96,165,250,.4); }
.wb-trash-empty-btn {
  display: flex; align-items: center; gap: .3rem; white-space: nowrap;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2);
  color: #f87171; border-radius: 7px; font-size: .75rem; padding: .3rem .6rem;
  cursor: pointer; transition: background .12s, border-color .12s; flex-shrink: 0;
}
.wb-trash-empty-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35); }
.wb-trash-empty-btn:disabled { opacity: .5; cursor: default; }

/* Hint */
.wb-trash-hint {
  font-size: .64rem; color: #374151; padding: .35rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04); flex-shrink: 0; display: flex; align-items: center; gap: .35rem;
}
.wb-trash-hint i { color: #4b5563; }

/* List */
.wb-trash-list { flex: 1; overflow-y: auto; padding: .35rem .45rem; scrollbar-width: thin; }
.wb-trash-loading { padding: 1.8rem; text-align: center; color: #4b5563; font-size: .78rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.wb-trash-error  { padding: 1.2rem 1rem; text-align: center; color: #f87171; font-size: .78rem; display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.wb-trash-retry-btn { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25); color: #f87171; border-radius: 5px; padding: 2px 8px; font-size: .72rem; cursor: pointer; }
.wb-trash-retry-btn:hover { background: rgba(239,68,68,.2); }

/* Empty state */
.wb-trash-empty-state {
  padding: 2.2rem 1rem; text-align: center; color: #374151;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.wb-trash-empty-state > i    { font-size: 2rem; color: #1f2937; }
.wb-trash-empty-state > span { font-size: .8rem; color: #4b5563; font-weight: 500; }
.wb-trash-empty-state > small { font-size: .7rem; color: #374151; }

/* Items */
.wb-trash-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .45rem; border-radius: 8px;
  transition: background .1s, opacity .22s, transform .22s;
}
.wb-trash-item:hover { background: rgba(255,255,255,.05); }
.wb-trash-item:hover .wb-trash-item-actions { opacity: 1; }
.wb-trash-item--out { opacity: 0; transform: translateX(12px); pointer-events: none; }

.wb-trash-item-icon-wrap {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  background: rgba(96,165,250,.1); color: #60a5fa;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.wb-trash-item-info { flex: 1; min-width: 0; }
.wb-trash-item-title { font-size: .76rem; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-trash-item-meta  { display: flex; align-items: center; gap: .4rem; margin-top: 1px; }
.wb-trash-type-badge {
  font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  background: rgba(255,255,255,.07); color: #6b7280; border-radius: 4px; padding: 0 4px; line-height: 1.6;
}
.wb-trash-item-date { font-size: .63rem; color: #374151; }

/* Days-left badges */
.wb-trash-days-left {
  font-size: .58rem; font-weight: 600; border-radius: 4px;
  padding: 0 4px; line-height: 1.6; white-space: nowrap;
  background: rgba(251,191,36,.12); color: #fbbf24;
}
.wb-trash-days-left.danger { background: rgba(239,68,68,.15); color: #f87171; }
.wb-trash-days-left.warn   { background: rgba(251,146,60,.13); color: #fb923c; }

/* Children count badge */
.wb-trash-child-count {
  font-size: .58rem; color: #6b7280;
  display: flex; align-items: center; gap: 2px; white-space: nowrap;
}
.wb-trash-child-count i { font-size: .6rem; }

/* Position indicator */
.wb-trash-pos {
  font-size: .58rem; color: #374151; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Type filter chips */
.wb-trash-filters {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: .35rem .7rem; border-bottom: 1px solid rgba(255,255,255,.05); flex-shrink: 0;
}
.wb-trash-filters:empty { display: none; }
.wb-trash-filter-chip {
  font-size: .63rem; padding: 2px 8px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.1); background: transparent; color: #4b5563;
  cursor: pointer; transition: all .12s;
}
.wb-trash-filter-chip:hover { border-color: rgba(255,255,255,.2); color: #9ca3af; }
.wb-trash-filter-chip.active { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.35); color: #60a5fa; }

.wb-trash-item-actions {
  display: flex; gap: .2rem; flex-shrink: 0;
  opacity: 0; transition: opacity .12s;
}
.wb-trash-restore, .wb-trash-purge {
  background: none; border: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
  transition: background .12s, color .12s;
}
.wb-trash-restore { color: #4b5563; }
.wb-trash-restore:hover { background: rgba(96,165,250,.14); color: #60a5fa; }
.wb-trash-restore:disabled { opacity: .5; cursor: default; }
.wb-trash-purge { color: #374151; }
.wb-trash-purge:hover { background: rgba(239,68,68,.12); color: #f87171; }

.wb-search-panel {
  position: fixed; z-index: 250000;
  top: 58px; left: 50%; transform: translateX(-50%);
  width: 500px; max-width: calc(100vw - 32px);
  background: #131320; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; box-shadow: 0 10px 44px rgba(0,0,0,0.75);
  overflow: hidden;
}
.wb-search-input-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wb-search-input-wrap i { color: #4b5563; font-size: 0.9rem; flex-shrink: 0; }
.wb-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: #e2e8f0; font-size: 0.9rem;
}
.wb-search-input::placeholder { color: #4b5563; }
.wb-search-close {
  background: none; border: none; color: #4b5563; cursor: pointer;
  font-size: 0.85rem; padding: 2px 4px; border-radius: 4px;
}
.wb-search-close:hover { color: #e2e8f0; }
.wb-search-results { max-height: 360px; overflow-y: auto; padding: 5px 0; }
.wb-search-result {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 14px; cursor: pointer; transition: background 0.1s;
}
.wb-search-result:hover, .wb-search-result:focus { background: rgba(59,130,246,0.1); outline: none; }
.wb-search-result-icon { font-size: 0.82rem; color: #4b5563; flex-shrink: 0; margin-top: 1px; }
.wb-search-result-body { flex: 1; min-width: 0; }
.wb-search-result-title { font-size: 0.83rem; color: #d1d5db; font-weight: 500; line-height: 1.3; }
.wb-search-result-title mark { background: rgba(250,204,21,0.25); color: #fde047; border-radius: 2px; padding: 0 1px; }
.wb-search-result-snippet {
  font-size: 0.72rem; color: #6b7280; line-height: 1.4; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-search-result-type {
  font-size: 0.6rem; color: #60a5fa; flex-shrink: 0; margin-top: 2px;
  background: rgba(59,130,246,0.12); border-radius: 3px; padding: 1px 5px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.wb-search-empty, .wb-search-hint {
  padding: 22px 14px; text-align: center; color: #374151; font-size: 0.8rem;
}

/* ── Board access config modal ───────────────────────────── */
.wb-access-modal-bg {
  position: fixed; inset: 0; z-index: 200000;
  background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center;
}
/* Skeleton loader for access modal */
.wb-access-loading { padding: .75rem 1rem; }
.wb-access-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 75%);
  background-size: 200% 100%;
  animation: wb-sk-shimmer 1.4s infinite;
  border-radius: 6px; margin-bottom: .65rem;
}
@keyframes wb-sk-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.wb-sk-title { height: 14px; width: 60%; }
.wb-sk-row   { height: 36px; width: 100%; }
.wb-access-modal {
  background: #131320; border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px; width: 480px; max-width: calc(100vw - 32px); max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
.wb-access-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  background: linear-gradient(135deg, rgba(59,130,246,0.14) 0%, rgba(59,130,246,0.05) 100%);
  border-bottom: 1px solid rgba(59,130,246,0.28);
  border-radius: 14px 14px 0 0;
}
.wb-access-modal-title { font-size: 0.95rem; font-weight: 600; color: #93c5fd; display:flex;align-items:center;gap:8px; }
.wb-access-modal-close { background: none; border: none; color: #3b82f6; cursor: pointer; font-size: 1rem; opacity: 0.7; }
.wb-access-modal-close:hover { color: #93c5fd; opacity: 1; }
.wb-access-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.wb-access-owner-row { display:flex; align-items:center; gap:10px; padding:8px 10px; background:rgba(59,130,246,0.08); border-radius:8px; margin-bottom:12px; font-size:0.82rem; color:#93c5fd; }
.wb-access-owner-row i { font-size:1rem; }
.wb-access-section { font-size:0.65rem; color:#4b5563; text-transform:uppercase; letter-spacing:.07em; margin:12px 0 6px; }
.wb-access-user-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; margin-bottom:3px; transition:background 0.1s; font-size:0.82rem; }
.wb-access-user-row:hover { background:rgba(255,255,255,0.04); }
.wb-access-avatar { width:30px; height:30px; border-radius:50%; background:#3b82f6; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:600; color:#fff; flex-shrink:0; }
.wb-access-name { flex:1; color:#d1d5db; }
.wb-access-role-select { background:#1a1a2e; border:1px solid rgba(255,255,255,0.12); border-radius:6px; color:#9ca3af; font-size:0.75rem; padding:2px 6px; cursor:pointer; }
.wb-access-role-select:focus { outline:none; border-color:rgba(59,130,246,0.5); }
.wb-access-remove-btn { background:none; border:none; color:#4b5563; cursor:pointer; font-size:0.85rem; padding:2px 4px; }
.wb-access-remove-btn:hover { color:#f87171; }
.wb-access-add-section { border-top:1px solid rgba(255,255,255,0.08); padding-top:14px; margin-top:10px; }
.wb-access-search { width:100%; background:#0d0d1a; border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:#d1d5db; font-size:0.82rem; padding:7px 10px; outline:none; box-sizing:border-box; }
.wb-access-search:focus { border-color:rgba(59,130,246,0.5); }
.wb-access-dropdown { background:#1a1a2e; border:1px solid rgba(255,255,255,0.12); border-radius:8px; margin-top:4px; max-height:160px; overflow-y:auto; }
.wb-access-option { padding:7px 12px; font-size:0.82rem; color:#d1d5db; cursor:pointer; display:flex; align-items:center; gap:8px; }
.wb-access-option:hover { background:rgba(59,130,246,0.12); color:#93c5fd; }
.wb-access-role-pick { display:flex; gap:6px; margin-top:8px; }
.wb-access-role-btn { flex:1; padding:6px; border-radius:7px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:#9ca3af; font-size:0.75rem; cursor:pointer; transition:all 0.12s; }
.wb-access-role-btn.active { background:rgba(59,130,246,0.2); border-color:rgba(59,130,246,0.5); color:#93c5fd; }
.wb-access-add-btn { width:100%; margin-top:8px; padding:8px; border-radius:8px; border:none; background:#3b82f6; color:#fff; font-size:0.82rem; font-weight:500; cursor:pointer; transition:background 0.12s; }
.wb-access-add-btn:hover { background:#2563eb; }
.wb-access-add-btn:disabled { opacity:0.4; cursor:default; }
.wb-access-readonly-notice { font-size:0.75rem; color:#4b5563; text-align:center; padding:8px 0 0; }
.wb-access-mode-section { border-top:1px solid rgba(255,255,255,0.07); padding-top:12px; margin-top:8px; }
.wb-access-mode-btns { display:flex; gap:8px; margin-top:6px; }
.wb-access-mode-btn {
  flex:1; padding:9px 8px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04); color:#6b7280;
  font-size:0.77rem; cursor:pointer; text-align:center;
  transition:all 0.15s; display:flex; flex-direction:column;
  align-items:center; gap:4px; line-height:1.2;
}
.wb-access-mode-btn i { font-size:1rem; }
.wb-access-mode-btn.active { background:rgba(59,130,246,0.14); border-color:rgba(59,130,246,0.45); color:#93c5fd; }
.wb-access-mode-btn:hover:not(.active) { background:rgba(255,255,255,0.07); color:#d1d5db; }
.wb-access-mode-hint { font-size:0.62rem; opacity:0.65; }
.wb-board-restricted-icon { font-size:0.58rem; color:#f59e0b; margin-left:4px; vertical-align:middle; }
.wb-ctx-header { padding: 4px 14px 2px; font-size: 0.62rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.08em; }
/* Submenus */
.wb-ctx-sub { position: relative; }
.wb-ctx-submenu {
  /* display controlled by JS — not CSS hover — for permissive mouse movement */
  display: none; position: fixed;
  background: #1a1a2e; border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px; padding: 5px 0; min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65); z-index: 100001;
  animation: wb-ctx-sub-in 0.1s ease;
}
@keyframes wb-ctx-sub-in { from { opacity:0; transform:scale(0.97); } to { opacity:1; transform:none; } }
.wb-ctx-arrow { margin-left: auto; font-size: 0.6rem; opacity: 0.6; }
.wb-ctx-has-sub { display: flex; align-items: center; gap: 6px; }
/* Lock badge for DOM elements */
.wb-te-lock-badge { position: absolute; top: 4px; right: 4px; color: rgba(255,200,0,0.9); font-size: 0.7rem; pointer-events: none; z-index: 10; }

/* ════════════════════════════════════════════════════════════
   UNIFIED CARDS (postit + card merged)
   ════════════════════════════════════════════════════════════ */
/* No body scroll when whiteboard is active */
body.wb-active { overflow: hidden; }

/* Legacy sticky selector — now maps to card (keeps old DOM working) */
.wb-sticky {
  position: absolute;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  cursor: move; z-index: 100; pointer-events: auto;
  min-width: 280px; min-height: 240px;
  overflow: hidden;
  transition: box-shadow 0.15s;
  background: #1e2130;
  color: #e2e8f0;
}
.wb-sticky:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.3);
}
.wb-sticky.selected { outline: 2px solid #3b82f6; outline-offset: 1px; }

/* ── Header ── */
.wb-sticky-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 7px;
  flex-shrink: 0;
}
.wb-sticky-title {
  flex: 1; min-width: 0;
  font-size: 0.85rem; font-weight: 700; line-height: 1.2;
  border: none; background: transparent; outline: none;
  color: #fff; cursor: text; pointer-events: auto;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-sticky-title:focus { white-space: normal; overflow: visible; text-overflow: clip; }
.wb-sticky-title::placeholder { color: rgba(255,255,255,0.4); font-weight: 400; font-style: italic; }
.wb-sticky-del {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; border: none;
  background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.7);
  font-size: 0.62rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: 0; transition: opacity 0.15s, background 0.1s;
}
.wb-sticky:hover .wb-sticky-del { opacity: 1; }
.wb-sticky-del:hover { background: rgba(239,68,68,0.6); color: #fff; }

/* ── Formatting toolbar ── */
.wb-sticky-fmt-bar {
  display: flex; align-items: center; gap: 1px;
  padding: 0 8px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  height: 0; overflow: hidden; opacity: 0;
  transition: height 0.15s, opacity 0.15s, padding 0.15s;
  pointer-events: none;
}
.wb-sticky:focus-within .wb-sticky-fmt-bar {
  height: 32px; padding: 3px 8px; opacity: 1; pointer-events: auto;
}
.wb-sticky-fmt-btn {
  width: 26px; height: 26px; border-radius: 4px; flex-shrink: 0;
  border: none; background: transparent; color: #9ca3af;
  font-size: 0.72rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.1s; padding: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.wb-sticky-fmt-btn:hover { background: rgba(255,255,255,0.12); color: #e2e8f0; }
.wb-sticky-fmt-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.1); margin: 0 3px; flex-shrink: 0; }
.wb-sticky-fmt-color {
  width: 26px; height: 26px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  background: transparent; border: none; color: #9ca3af;
  transition: all 0.1s; font-size: 0.8rem;
}
.wb-sticky-fmt-color:hover { background: rgba(255,255,255,0.12); color: #e2e8f0; }
.wb-sticky-fmt-color-input {
  position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; border: none; padding: 0;
}

/* ── Body ── */
.wb-sticky-body-wrap { flex: 1; display: flex; padding: 8px 10px 6px; min-height: 60px; overflow-y: auto; }
.wb-sticky-body {
  flex: 1; width: 100%;
  font-size: 0.82rem; line-height: 1.5; color: #e2e8f0;
  background: transparent; border: none; outline: none;
  cursor: text; pointer-events: auto;
  font-family: 'Segoe UI', system-ui, sans-serif;
  word-break: break-word; min-height: 60px;
}
.wb-sticky-body:empty::before {
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.25); font-style: italic; pointer-events: none;
}
.wb-sticky-body ul { margin: 0 0 4px; padding-left: 1.3em; }
.wb-sticky-body ol { margin: 0 0 4px; padding-left: 1.4em; }
.wb-sticky-body li { margin: 1px 0; }

/* ── Footer: paleta + meta ── */
.wb-sticky-footer {
  padding: 6px 10px 7px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0;
}

/* Color palette — hidden, revealed on hover */
.wb-sticky-colors {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
  height: 0; overflow: hidden; opacity: 0;
  transition: height 0.15s, opacity 0.15s;
  pointer-events: none;
}
.wb-sticky:hover .wb-sticky-colors,
.wb-sticky:focus-within .wb-sticky-colors {
  height: 20px; opacity: 1; pointer-events: auto;
}
.wb-sticky-color-dot {
  width: 15px; height: 15px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent; flex-shrink: 0;
  transition: transform 0.12s, border-color 0.12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.wb-sticky-color-dot:hover { transform: scale(1.35); }
.wb-sticky-color-dot.active { border-color: rgba(255,255,255,0.8); transform: scale(1.1); }
.wb-sticky-custom-color {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.4);
  cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0;
  transition: transform 0.12s;
}
.wb-sticky-custom-color:hover { transform: scale(1.35); }
.wb-sticky-custom-color input[type=color] {
  position: absolute; width: 200%; height: 200%; top:-50%; left:-50%; opacity:0; cursor:pointer; border:none; padding:0;
}

/* Meta row */
.wb-sticky-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.57rem; color: rgba(255,255,255,0.3); line-height: 1;
}
.wb-sticky-creator { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.wb-sticky-date { white-space: nowrap; flex-shrink: 0; }

/* Resize handle */
.wb-sticky-resize {
  position: absolute; right: 4px; bottom: 4px;
  cursor: se-resize; color: rgba(255,255,255,0.2);
  font-size: 0.58rem; width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.12s;
}
.wb-sticky:hover .wb-sticky-resize { color: rgba(255,255,255,0.5); }

/* ════════════════════════════════════════════════════════════
   CARDS (unified — postit + card merged)
   ════════════════════════════════════════════════════════════ */
.wb-card {
  position: absolute; pointer-events: auto; z-index: 2;
  border-radius: 8px; background: #1e2130;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  min-width: 280px; min-height: 200px;
  display: flex; flex-direction: column;
  overflow: hidden; transition: box-shadow 0.15s;
  color: #e2e8f0;
}
.wb-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.3); }
.wb-card.selected { outline: 2px solid #3b82f6; outline-offset: 1px; }

/* ── Header (colored, cursor = grab) ── */
.wb-card-header {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 8px 6px 10px; flex-shrink: 0;
  cursor: grab; min-height: 36px;
}
.wb-card-header:active { cursor: grabbing; }
.wb-card-drag-grip { color: inherit; opacity: 0.55; font-size: 0.85rem; flex-shrink: 0; cursor: grab; line-height: 1; margin-right: 2px; }
.wb-card-drag-grip:active { cursor: grabbing; }

/* ── Format toolbar (fixed above description) ── */
.wb-card-fmt-bar {
  display: flex; align-items: center; gap: 1px;
  padding: 3px 10px; flex-shrink: 0;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wb-card-fmt-btn {
  width: 24px; height: 24px; border-radius: 4px; flex-shrink: 0;
  border: none; background: transparent; color: #6b7280;
  font-size: 0.7rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.1s; padding: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.wb-card-fmt-btn:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.wb-card-fmt-sep { width: 1px; height: 12px; background: rgba(255,255,255,0.08); margin: 0 2px; flex-shrink: 0; }
.wb-card-fmt-color {
  width: 24px; height: 24px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  background: transparent; border: none; color: #6b7280; font-size: 0.72rem;
  transition: all 0.1s;
}
.wb-card-fmt-color:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.wb-card-fmt-color-input { position: absolute; width: 100%; height: 100%; top:0; left:0; opacity:0; cursor:pointer; border:none; padding:0; }
.wb-card-title {
  flex: 1; min-width: 0;
  font-size: 0.85rem; font-weight: 700; line-height: 1.2;
  border: none; background: transparent; outline: none;
  color: inherit; cursor: default; pointer-events: auto;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.wb-card-title[contenteditable="true"] {
  cursor: text; white-space: normal; overflow: visible; text-overflow: clip;
  background: rgba(0,0,0,0.15); border-radius: 3px; padding: 0 3px;
}
.wb-card-title:empty::before {
  content: 'Título...';
  opacity: 0.45; font-weight: 400; font-style: italic; pointer-events: none;
}
.wb-card-actions {
  display: flex; gap: 3px; flex-shrink: 0; align-items: center;
}
.wb-card-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 2px; min-width: 28px; height: 28px; padding: 0 5px;
  border-radius: 6px; border: none;
  background: rgba(0,0,0,0.22); color: inherit;
  font-size: 0.82rem; cursor: pointer;
  transition: background 0.12s, color 0.12s, opacity 0.12s;
  opacity: 0.78; white-space: nowrap; flex-shrink: 0;
}
.wb-card-btn:hover { background: rgba(0,0,0,0.42); opacity: 1; }
.wb-card-btn i { font-size: 0.82rem; flex-shrink: 0; }
/* Delete button: distinct danger coloring on hover */
.wb-card-btn--del { opacity: 0.55; }
.wb-card-btn--del:hover { background: rgba(239,68,68,0.6); color: #fff; opacity: 1; }
/* Comment count badge always visible */
.wb-card-comments-btn:has(.wb-card-comment-count:not(:empty)) { opacity: 1 !important; }
/* Lock button — always fully visible, never hidden by any rule */
.wb-card-lock-btn {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}
/* Lock button active (locked): dark bg + amber icon so it ALWAYS contrasts
   regardless of the card header color */
.wb-card-lock-btn--active {
  background: rgba(0,0,0,0.35) !important;
  color: #fbbf24 !important;
  box-shadow: inset 0 0 0 1.5px rgba(251,191,36,0.55) !important;
  opacity: 1 !important;
}
.wb-card-lock-btn--active:hover {
  background: rgba(0,0,0,0.48) !important;
  box-shadow: inset 0 0 0 1.5px rgba(251,191,36,0.8) !important;
}

/* ── Collapsed card ── */
.wb-card.wb-card--collapsed { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.wb-card.wb-card--collapsed .wb-card-inner,
.wb-card.wb-card--collapsed .wb-card-fmt-bar,
.wb-card.wb-card--collapsed .wb-card-footer {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* Catch-all: any child not in the header or resize handles has no pointer events */
.wb-card.wb-card--collapsed > *:not(.wb-card-header):not(.wb-resize-sw):not(.wb-resize-se):not(.wb-resize-w):not(.wb-resize-e) {
  pointer-events: none !important;
}
.wb-card.wb-card--collapsed .wb-resize-nw,
.wb-card.wb-card--collapsed .wb-resize-ne,
.wb-card.wb-card--collapsed .wb-resize-n,
.wb-card.wb-card--collapsed .wb-resize-s  { display: none !important; }
.wb-card.wb-card--collapsed .wb-resize-sw,
.wb-card.wb-card--collapsed .wb-resize-se {
  display: flex !important;
  cursor: ew-resize;
  top: 50%; bottom: auto;
  transform: translateY(-50%);
  width: 8px; height: 24px;
  border-radius: 4px;
  background: rgba(255,255,255,0.18);
  opacity: 0;
  transition: opacity 0.15s;
}
.wb-card.wb-card--collapsed:hover .wb-resize-sw,
.wb-card.wb-card--collapsed:hover .wb-resize-se { opacity: 1; }
/* E/W edge handles on collapsed cards span the full height */
.wb-card.wb-card--collapsed .wb-resize-e,
.wb-card.wb-card--collapsed .wb-resize-w {
  top: 0 !important; bottom: 0 !important;
  cursor: ew-resize;
}


/* ── Inner scrollable content ── */
.wb-card-inner { padding: 8px 12px 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; overflow-y: auto; }

/* ── Body (contenteditable + resize) ── */
.wb-card-body-text {
  font-size: 0.8rem; color: #e2e8f0; line-height: 1.5;
  background: transparent; border: none; outline: none;
  cursor: text; pointer-events: auto; word-break: break-word;
  font-family: 'Segoe UI', system-ui, sans-serif;
  height: 90px; min-height: 28px; flex-shrink: 0;
  overflow-y: auto; resize: none;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.wb-card-body-text:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,0.3); font-style: italic; pointer-events: none; }
.wb-card-body-text ul { margin: 0 0 4px; padding-left: 1.3em; }
.wb-card-body-text ol { margin: 0 0 4px; padding-left: 1.4em; }
.wb-card-body-text li { margin: 1px 0; }

/* Body resize handle */
.wb-body-resize-handle {
  height: 6px; cursor: ns-resize; flex-shrink: 0;
  color: transparent; font-size: 0; /* icon hidden, hit area intact */
  margin-bottom: 2px;
}

/* ── Tasks ── */
.wb-card-progress { display: flex; align-items: center; gap: 6px; }
.wb-card-progress-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.wb-card-progress-fill { height: 100%; border-radius: 2px; background: #3b82f6; transition: width 0.3s; }
.wb-card-progress-text { font-size: 0.62rem; color: #9ca3af; white-space: nowrap; }

.wb-card-tasks { display: flex; flex-direction: column; gap: 3px; }
.wb-card-tasks:not(:empty)::before {
  content: 'Tareas';
  display: block; font-size: 0.6rem; font-weight: 700;
  color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 3px; padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wb-card-task { display: flex; align-items: flex-start; gap: 6px; pointer-events: auto; border-radius: 4px; padding: 2px 4px; transition: background 0.1s; }
.wb-card-task:hover { background: rgba(255,255,255,0.04); }
.wb-card-task input[type=checkbox] { margin-top: 3px; cursor: pointer; accent-color: #3b82f6; flex-shrink: 0; }
.wb-card-task-text { font-size: 0.73rem; color: #e2e8f0; flex: 1; background: transparent; border: none; outline: none; cursor: text; font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.3; padding: 0; resize: none; overflow: hidden; min-height: 1.3em; }
.wb-card-task-text.done { text-decoration: line-through; color: #6b7280; }
.wb-card-task-del { opacity: 1; border: none; background: transparent; color: #6b7280; cursor: pointer; font-size: 0.72rem; padding: 2px 4px; flex-shrink: 0; border-radius: 3px; transition: all 0.1s; }
.wb-card-task-del:hover { background: rgba(239,68,68,0.2); color: #f87171; }
.wb-card-add-task { background: transparent; border: 1px dashed rgba(255,255,255,0.15); color: #6b7280; font-size: 0.68rem; padding: 3px 8px; border-radius: 5px; cursor: pointer; text-align: left; transition: all 0.12s; width: 100%; }
.wb-card-add-task:hover { border-color: rgba(255,255,255,0.3); color: #9ca3af; }

/* ── Tags ── */
.wb-card-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wb-card-tag { padding: 1px 7px; border-radius: 20px; font-size: 0.62rem; font-weight: 600; cursor: default; }
.wb-card-tag-del { font-size: 0.55rem; cursor: pointer; margin-left: 2px; opacity: 0.7; }
.wb-card-tag-del:hover { opacity: 1; }
.wb-card-tags-row { display: flex; align-items: center; }
.wb-card-add-tag { background: transparent; border: 1px dashed rgba(255,255,255,0.15); color: #6b7280; font-size: 0.62rem; padding: 1px 7px; border-radius: 20px; cursor: pointer; transition: all 0.12s; }
.wb-card-add-tag:hover { border-color: rgba(255,255,255,0.3); color: #9ca3af; }

/* Inline tag form */
.wb-card-tag-form { display: flex; align-items: center; gap: 4px; }
.wb-tag-input { flex: 1; font-size: 0.68rem; color: #e2e8f0; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 2px 6px; outline: none; font-family: 'Segoe UI', system-ui, sans-serif; }
.wb-tag-input:focus { border-color: rgba(255,255,255,0.3); }
.wb-tag-save, .wb-tag-cancel { width: 22px; height: 22px; border-radius: 4px; border: none; background: rgba(255,255,255,0.07); color: #9ca3af; font-size: 0.65rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wb-tag-save:hover { background: rgba(74,222,128,0.2); color: #4ade80; }
.wb-tag-cancel:hover { background: rgba(239,68,68,0.2); color: #f87171; }

/* ── Links ── */
.wb-card-links { display: flex; flex-direction: column; gap: 2px; }
.wb-card-link-row { display: flex; align-items: center; gap: 4px; border-radius: 4px; padding: 1px 2px; transition: background 0.1s; }
.wb-card-link-row:hover { background: rgba(255,255,255,0.04); }
.wb-card-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; font-size: 0.68rem; color: #60a5fa; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-card-link:hover { text-decoration: underline; color: #93c5fd; }
.wb-card-link-btns { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; flex-shrink: 0; }
.wb-card-link-row:hover .wb-card-link-btns { opacity: 1; }
.wb-card-link-edit, .wb-card-link-del { width: 18px; height: 18px; border-radius: 3px; border: none; background: transparent; color: #6b7280; cursor: pointer; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; padding: 0; }
.wb-card-link-edit:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.wb-card-link-del:hover { background: rgba(239,68,68,0.2); color: #f87171; }
.wb-card-add-link { background: transparent; border: none; color: #6b7280; font-size: 0.68rem; cursor: pointer; padding: 0; text-align: left; transition: color 0.12s; }
.wb-card-add-link:hover { color: #9ca3af; }

/* Inline link form */
.wb-card-link-form { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.wb-link-url, .wb-link-label { font-size: 0.68rem; color: #e2e8f0; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 4px 8px; outline: none; width: 100%; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
.wb-link-url:focus, .wb-link-label:focus { border-color: rgba(255,255,255,0.3); }
.wb-link-form-btns { display: flex; gap: 4px; justify-content: flex-end; }
.wb-link-save, .wb-link-cancel { width: 22px; height: 22px; border-radius: 4px; border: none; background: rgba(255,255,255,0.06); color: #9ca3af; font-size: 0.65rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wb-link-save:hover { background: rgba(74,222,128,0.2); color: #4ade80; }
.wb-link-cancel:hover { background: rgba(239,68,68,0.2); color: #f87171; }

/* Attachments */
.wb-card-att-header { padding: 2px 14px 1px; font-size: .62rem; font-weight: 700; color: #4b5563; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 4px; }
.wb-card-att-header i { font-size: .7rem; }
.wb-card-attachments { display: flex; flex-direction: column; gap: 3px; padding: 0 14px; }
.wb-card-attachments:not(:empty) { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 6px; padding-bottom: 4px; }
.wb-card-attachment { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 5px; padding: 4px 6px; transition: background 0.1s; cursor: grab; user-select: none; }
.wb-card-attachment:hover { background: rgba(255,255,255,0.07); }
/* Ghost shown while dragging an attachment out of a card */
.wb-att-drag-ghost {
  position: fixed; z-index: 99999; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: #1e293b; border: 1.5px solid rgba(96,165,250,.55);
  border-radius: 8px; padding: 5px 12px; color: #e2e8f0; font-size: .77rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.7); transform: rotate(2deg);
  white-space: nowrap; max-width: 220px;
}
.wb-att-drag-ghost span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-card-att-icon { font-size: 0.9rem; flex-shrink: 0; line-height: 1; }
.wb-card-att-name { flex: 1; min-width: 0; font-size: 0.65rem; color: #d1d5db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-card-att-size { font-size: 0.58rem; color: #4b5563; flex-shrink: 0; }
.wb-card-att-btns { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; flex-shrink: 0; }
.wb-card-attachment:hover .wb-card-att-btns { opacity: 1; }
.wb-card-att-btn { width: 18px; height: 18px; border-radius: 3px; border: none; background: transparent; color: #4b5563; cursor: pointer; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; padding: 0; text-decoration: none; }
.wb-card-att-btn:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
.wb-card-att-del:hover { background: rgba(239,68,68,0.2); color: #f87171; }

/* Footer: color palette + meta inline */
.wb-card-footer {
  padding: 6px 10px 7px;
  background: rgba(0,0,0,0.18);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 5px;
  flex-shrink: 0;
}
/* Color palette */
.wb-card-colors { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.wb-card-color-dot { width: 13px; height: 13px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; transition: transform 0.12s, border-color 0.12s; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.wb-card-color-dot:hover { transform: scale(1.4); }
.wb-card-color-dot.active { border-color: rgba(255,255,255,0.85); transform: scale(1.15); }
.wb-card-custom-color { width: 13px; height: 13px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.35); cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; transition: transform 0.12s; }
.wb-card-custom-color:hover { transform: scale(1.4); }
.wb-card-custom-color input[type=color] { position: absolute; width: 200%; height: 200%; top:-50%; left:-50%; opacity:0; cursor:pointer; border:none; padding:0; }

/* Meta row (creator + date + editors) */
.wb-card-meta { display: flex; align-items: center; gap: 5px; font-size: 0.57rem; color: rgba(255,255,255,0.45); }
.wb-card-creator { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-card-date { flex-shrink: 0; }
.wb-card-editors { display: flex; gap: 2px; margin-left: auto; }

.wb-card-editor-avatar { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,0.2); }

/* Task grip handle */
.wb-task-grip { color: rgba(255,255,255,0.15); font-size: 0.65rem; cursor: grab; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.wb-task-grip:hover { color: rgba(255,255,255,0.4); }

/* SortableJS states */
.wb-sort-ghost { opacity: 0.35; background: rgba(59,130,246,0.15); border-radius: 4px; }
.wb-sort-chosen { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.wb-sort-drag   { opacity: 0.95; }

/* Card drop target (file card hovering) */
.wb-card.wb-drop-target { border-color: #22c55e !important; box-shadow: 0 0 0 2px rgba(34,197,94,0.35), 0 8px 30px rgba(0,0,0,0.65); }

/* File drag overlay */
.wb-drop-overlay {
  position: absolute; inset: 0; z-index: 500;
  background: rgba(59,130,246,0.12);
  border: 3px dashed rgba(59,130,246,0.6);
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #60a5fa; font-size: 1rem; font-weight: 600;
  pointer-events: none;
}
.wb-drop-overlay i { font-size: 2.5rem; }

/* ── User assignment picker ── */
.wb-assign-picker {
  position: fixed; z-index: 9999;
  background: #131320; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.6);
  overflow: hidden; min-width: 220px;
}
.wb-assign-search-wrap { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.wb-assign-search { width: 100%; background: transparent; border: none; outline: none; color: #d1d5db; font-size: 0.78rem; }
.wb-assign-search::placeholder { color: #374151; }
.wb-assign-list { max-height: 200px; overflow-y: auto; padding: 4px; }
.wb-assign-user { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; transition: background 0.1s; }
.wb-assign-user:hover { background: rgba(255,255,255,0.06); }
.wb-assign-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.wb-assign-name { font-size: 0.75rem; color: #d1d5db; }
.wb-assign-empty, .wb-assign-loading { font-size: 0.72rem; color: #4b5563; text-align: center; padding: 12px 0; }
.wb-assign-user.assigned { opacity: 0.6; cursor: default; }
.wb-assign-check { margin-left: auto; color: #4ade80; font-size: 0.8rem; }

/* ── Card assignees panel ─────────────────────────────────── */
.wb-card-assignees {
  padding: 0 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.wb-card-assignees:empty { display: none; }
.wb-card-assignees-label {
  font-size: 0.6rem; font-weight: 600; color: #4b5563;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 6px 0 2px; display: flex; align-items: center; gap: 4px;
}
.wb-card-assignee-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  transition: background 0.1s;
}
.wb-card-assignee-row:hover { background: rgba(255,255,255,0.09); }
.wb-card-assignee-avatar {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 700; color: #fff;
}
.wb-card-assignee-name { font-size: 0.72rem; color: #d1d5db; flex: 1; }
.wb-card-assignee-del {
  background: none; border: none; color: #4b5563; cursor: pointer;
  padding: 0 2px; font-size: 0.75rem; line-height: 1;
  transition: color 0.1s; flex-shrink: 0;
}
.wb-card-assignee-del:hover { color: #ef4444; }

/* ── Element highlight flash (on notification navigate) ───── */
@keyframes wb-highlight-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
  40%      { box-shadow: 0 0 0 8px rgba(96,165,250,0.55); }
}
.wb-element-highlight {
  animation: wb-highlight-pulse 0.55s ease 4;
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px;
}

/* ── Element appear / remove animations ─────────────────── */
@keyframes wb-el-appear {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}
.wb-el-appear {
  animation: wb-el-appear 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transform-origin: center center;
}
@keyframes wb-el-remove {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.88); }
}
.wb-el-removing {
  animation: wb-el-remove 0.15s ease forwards;
  pointer-events: none !important;
}

/* ── Sidebar (toolbar) repositionable ── */
/* Default: left (no class) */
.wb-main { display: flex; flex: 1; overflow: hidden; }
.wb-main .wb-toolbar { order: 0; }


/* ── Resize handles — corners ── */
.wb-resize-se, .wb-resize-sw, .wb-resize-ne, .wb-resize-nw {
  position: absolute; width: 20px; height: 20px;
  color: transparent; font-size: 0;
  border-radius: 4px; z-index: 10;
}
.wb-resize-se { right: 0; bottom: 0; cursor: se-resize; }
.wb-resize-sw { left: 0;  bottom: 0; cursor: sw-resize; }
.wb-resize-ne { right: 0; top: 0;    cursor: ne-resize; }
.wb-resize-nw { left: 0;  top: 0;    cursor: nw-resize; }

/* ── Resize handles — edges ── */
.wb-resize-n, .wb-resize-s {
  position: absolute; left: 20px; right: 20px; height: 7px;
  cursor: ns-resize; z-index: 10;
}
.wb-resize-n { top: 0; }
.wb-resize-s { bottom: 0; }
.wb-resize-e, .wb-resize-w {
  position: absolute; top: 20px; bottom: 20px; width: 7px;
  cursor: ew-resize; z-index: 10;
}
.wb-resize-e { right: 0; }
.wb-resize-w { left: 0; }

/* Subtle visual hints on hover */
.wb-card:hover .wb-resize-se,
.wb-sticky:hover .wb-resize-se {
  border-right: 2px solid rgba(255,255,255,0.22);
  border-bottom: 2px solid rgba(255,255,255,0.22);
  border-bottom-right-radius: 3px;
}
.wb-card:hover .wb-resize-n  { border-top:    1px solid rgba(255,255,255,0.1); }
.wb-card:hover .wb-resize-s  { border-bottom: 1px solid rgba(255,255,255,0.1); }
.wb-card:hover .wb-resize-e  { border-right:  1px solid rgba(255,255,255,0.1); }
.wb-card:hover .wb-resize-w  { border-left:   1px solid rgba(255,255,255,0.1); }

/* ── Locked card state ─────────────────────────────────────── */
/* Amber border and header tint to show lock state clearly */
.wb-card--locked { border-color: #fbbf24 !important; }
.wb-card--locked .wb-card-header { box-shadow: inset 0 -1px 0 rgba(251,191,36,0.25); }
/* Block editable areas */
.wb-card--locked .wb-card-body-text,
.wb-card--locked .wb-card-title { pointer-events: none; }
/* Disable mutating actions */
.wb-card--locked .wb-card-add-task,
.wb-card--locked .wb-card-add-tag,
.wb-card--locked .wb-card-add-link,
.wb-card--locked .wb-card-tag-del,
.wb-card--locked .wb-card-link-btns,
.wb-card--locked .wb-card-task-del,
.wb-card--locked .wb-card-task-text,
.wb-card--locked .wb-card-fmt-bar,
.wb-card--locked .wb-body-resize-handle,
.wb-card--locked .wb-resize-nw,
.wb-card--locked .wb-resize-ne,
.wb-card--locked .wb-resize-sw,
.wb-card--locked .wb-resize-se,
.wb-card--locked .wb-resize-n,
.wb-card--locked .wb-resize-s,
.wb-card--locked .wb-resize-e,
.wb-card--locked .wb-resize-w  { pointer-events: none; opacity: 0.3; }
/* Always interactive when locked */
.wb-card--locked .wb-card-task input[type=checkbox] { pointer-events: auto; opacity: 1; }
.wb-card--locked .wb-card-comments-btn,
.wb-card--locked .wb-card-assign,
.wb-card--locked .wb-card-collapse-btn { pointer-events: auto; opacity: 1; }
/* Lock button: never hidden, never dimmed — critical always-on control */
.wb-card--locked .wb-card-lock-btn {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}
/* Delete: accessible but dim */
.wb-card--locked .wb-card-btn--del { pointer-events: auto; opacity: 0.55; }

/* ── Card comment button ───────────────────────────────────── */
.wb-card-comment-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.25); color: inherit;
  border-radius: 8px; font-size: 0.6rem; font-weight: 700;
  min-width: 14px; height: 14px; padding: 0 3px;
  line-height: 1;
}
.wb-card-comment-count:empty { display: none; }

/* ── Comment panel (card-tied, positioned in sticky layer) ──── */
.wb-cs-panel {
  position: absolute; width: 320px; min-height: 260px;
  background: color-mix(in srgb, var(--cs-accent,#1e2130) 8%, #080c1a 92%);
  border: 1.5px solid color-mix(in srgb, var(--cs-accent,#3b82f6) 35%, transparent);
  border-radius: 0 12px 12px 12px;
  box-shadow: 4px 8px 40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);
  display: flex; flex-direction: column; overflow: hidden;
  pointer-events: auto;
  opacity: 0; transform: translateX(-14px);
  transition: opacity .2s ease, transform .2s cubic-bezier(.25,0,.5,1);
}
.wb-cs-panel.wb-cs-open { opacity: 1; transform: translateX(0); }
/* Connector bridge between card right edge and panel left edge */
.wb-cs-panel::before {
  content: '';
  position: absolute; left: -8px; top: 0; bottom: 0; width: 8px;
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 9%, #080c1a 91%);
  border-top: 1.5px solid color-mix(in srgb, var(--cs-accent,#3b82f6) 28%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--cs-accent,#3b82f6) 28%, transparent);
  pointer-events: none;
}
/* Card visual when panel is open — right edge accent */
.wb-card--has-panel {
  border-right-width: 3px;
  border-right-color: var(--card-accent, color-mix(in srgb, currentColor 60%, transparent));
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transition: border-radius .2s, border-right-width .2s;
}
/* Detached: hide connector bridge when panel has been moved from default position */
.wb-cs-panel.wb-cs-detached::before { display: none; }

/* Header — drag handle */
.wb-cs-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px 8px;
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 14%, #080c1a 86%);
  border-bottom: 1px solid color-mix(in srgb, var(--cs-accent,#3b82f6) 25%, transparent);
  flex-shrink: 0; cursor: grab; user-select: none;
}
.wb-cs-head:active { cursor: grabbing; }

/* Resize handles */
.wb-cs-rz-r {
  position: absolute; top: 0; right: -4px; width: 8px; height: 100%;
  cursor: ew-resize; z-index: 10;
}
.wb-cs-rz-br {
  position: absolute; bottom: 0; right: 0; width: 20px; height: 20px;
  cursor: se-resize; z-index: 11;
}
/* Subtle SE corner indicator so user knows they can resize */
.wb-cs-rz-br::after {
  content: '';
  position: absolute; right: 3px; bottom: 3px;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(255,255,255,0.2);
  border-bottom: 2px solid rgba(255,255,255,0.2);
  border-bottom-right-radius: 2px;
  pointer-events: none; transition: border-color .12s;
}
.wb-cs-rz-br:hover::after { border-color: rgba(255,255,255,0.5); }
.wb-cs-head-info { flex: 1; min-width: 0; }
.wb-cs-head-lbl {
  font-size: .57rem; font-weight: 700; color: color-mix(in srgb, var(--cs-accent,#3b82f6) 80%, #fff);
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1px;
}
.wb-cs-head-lbl i { margin-right: 3px; }
.wb-cs-head-card {
  font-size: .74rem; font-weight: 600;
  color: color-mix(in srgb, var(--cs-accent,#3b82f6) 60%, #e2e8f0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-cs-x {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: color-mix(in srgb, var(--cs-accent,#3b82f6) 40%, #4b5563);
  font-size: .8rem; padding: 3px 5px; border-radius: 5px; transition: all .12s; line-height: 1;
}
.wb-cs-x:hover { background: rgba(255,255,255,.08); color: #e2e8f0; }
/* Body — scrollable (legacy, kept for backwards compat) */
.wb-cs-body {
  flex: 1; overflow-y: auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.06) transparent;
}
/* UnifiedComments shell inside the card comment panel */
.wb-cs-uc-shell { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Accent color overrides for UC inside card panel */
.wb-cs-panel .uc-composer {
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 5%, #080c1a 95%);
  border-top-color: color-mix(in srgb, var(--cs-accent,#3b82f6) 22%, transparent);
}
.wb-cs-panel .uc-editor:focus {
  border-color: color-mix(in srgb, var(--cs-accent,#3b82f6) 55%, transparent);
}
.wb-cs-panel .btn.btn-primary {
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 85%, #1e40af);
  border-color: color-mix(in srgb, var(--cs-accent,#3b82f6) 80%, transparent);
}
.wb-cs-panel .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 100%, transparent);
}
.wb-cs-panel .fv2c-reply-btn:hover {
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 12%, transparent);
  color: color-mix(in srgb, var(--cs-accent,#3b82f6) 70%, #93c5fd);
}
.wb-cs-panel .fv2-reply-form, .wb-cs-panel .uc-edit-form {
  border-color: color-mix(in srgb, var(--cs-accent,#3b82f6) 20%, rgba(148,163,184,.18));
}
/* States */
.wb-cs-spinner {
  display: flex; justify-content: center; align-items: center;
  padding: 32px 0;
}
.wb-cs-spinner::after {
  content: ''; display: block;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(59,130,246,.18);
  border-top-color: #3b82f6;
  animation: wb-spin .75s linear infinite;
  flex-shrink: 0;
}
.wb-cs-state {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 32px 14px; color: #374151; font-size: .68rem; text-align: center; line-height: 1.5;
}
.wb-cs-state i { font-size: 1.5rem; opacity: .2; }
/* Comments */
.wb-cs-c {
  padding: 8px 11px 5px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.wb-cs-c:last-child { border-bottom: none; }
.wb-cs-row { display: flex; gap: 8px; }
.wb-cs-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: #fff;
}
.wb-cs-con { flex: 1; min-width: 0; }
.wb-cs-meta { display: flex; align-items: baseline; gap: 5px; margin-bottom: 3px; }
.wb-cs-nm { font-size: .7rem; font-weight: 600; color: #e2e8f0; }
.wb-cs-ts { font-size: .58rem; color: #4b5563; }
.wb-cs-txt {
  font-size: .7rem; color: #9ca3af; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.wb-cs-txt .wb-mention { color: #60a5fa; font-weight: 600; }
.wb-cs-txt .wb-cs-link {
  color: color-mix(in srgb, var(--cs-accent,#3b82f6) 80%, #93c5fd);
  text-decoration: underline; text-underline-offset: 2px; word-break: break-all;
}
.wb-cs-txt .wb-cs-card-link {
  display: inline-flex; align-items: center; gap: 3px;
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 12%, transparent);
  color: color-mix(in srgb, var(--cs-accent,#3b82f6) 70%, #e2e8f0);
  border: 1px solid color-mix(in srgb, var(--cs-accent,#3b82f6) 20%, transparent);
  border-radius: 4px; padding: 0 5px; font-size: .67rem; text-decoration: none;
  transition: all .1s;
}
.wb-cs-txt .wb-cs-card-link:hover { background: color-mix(in srgb, var(--cs-accent,#3b82f6) 22%, transparent); }
.wb-cs-acts { display: flex; margin-top: 3px; }
.wb-cs-reply-btn {
  background: none; border: none; color: #4b5563; font-size: .6rem;
  cursor: pointer; padding: 1px 5px; border-radius: 4px; font-family: inherit;
  display: flex; align-items: center; gap: 3px; transition: all .1s;
}
.wb-cs-reply-btn:hover { background: color-mix(in srgb, var(--cs-accent,#3b82f6) 12%, transparent); color: #93c5fd; }
/* Nested replies */
.wb-cs-replies {
  margin-top: 5px; margin-left: 34px;
  border-left: 2px solid color-mix(in srgb, var(--cs-accent,#3b82f6) 15%, transparent);
  padding-left: 8px;
}
.wb-cs-nest { padding: 5px 0 2px; border-bottom: none; }
.wb-cs-nest .wb-cs-av { width: 20px; height: 20px; font-size: .6rem; }
.wb-cs-nest .wb-cs-txt { font-size: .67rem; }
/* Highlight referenced card */
.wb-cs-hl { animation: wb-cs-hl .9s ease; }
@keyframes wb-cs-hl {
  0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.5);}
  35%{box-shadow:0 0 0 3px var(--cs-accent,#60a5fa),0 4px 20px rgba(0,0,0,.5);}
}
/* ── Chips in rendered comments (read-only look) ─────────────── */
.wb-cs-chip-rd {
  display: inline-flex; align-items: center; gap: 3px;
  vertical-align: middle; line-height: 1.3; cursor: default;
}
.wb-cs-chip-rd i { font-size: .62em; }
/* File chip in read mode */
.wb-cs-txt .wb-cs-file-chip.wb-cs-chip-rd { cursor: pointer; }
/* Card chip in read mode */
.wb-cs-txt .wb-cs-card-chip.wb-cs-chip-rd { cursor: pointer; }
/* ── Collaborative QoL ───────────────────────────────────────── */
/* Smooth position transition for remote element updates — applies to all DOM element types */
.wb-card--transitioning,
.wb-el--remote-move {
  transition: left 0.38s cubic-bezier(.4,0,.2,1), top 0.38s cubic-bezier(.4,0,.2,1) !important;
}
/* Smooth size transition for remote resize updates */
.wb-el--remote-resize {
  transition: width 0.38s cubic-bezier(.4,0,.2,1), height 0.38s cubic-bezier(.4,0,.2,1) !important;
}
/* Flash when a remote user updates a card */
.wb-card--remote-update,
.wb-el--remote-update {
  animation: wb-remote-flash 0.7s ease;
}
@keyframes wb-remote-flash {
  0%   { outline: 2px solid transparent; outline-offset: 1px; }
  25%  { outline: 2px solid rgba(96,165,250,.55); outline-offset: 2px; }
  100% { outline: 2px solid transparent; outline-offset: 1px; }
}
/* SVG connector remote update flash */
.wb-dconn--remote-update {
  animation: wb-dconn-flash 0.7s ease;
}
@keyframes wb-dconn-flash {
  0%   { stroke: inherit; filter: none; }
  25%  { filter: drop-shadow(0 0 4px rgba(96,165,250,0.9)); }
  100% { filter: none; }
}
/* ── Unified DOM element selection highlight ─────────────────── */
.wb-el--selected {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 3px;
}
.wb-dnode.wb-el--selected {
  outline-offset: 4px; /* slightly more for nodes with their own border */
}
/* Selected + has-panel: use accent color for selection ring */
.wb-card.wb-el--selected {
  outline-color: var(--card-accent, #3b82f6) !important;
}
/* Sector selection ring + grab cursor on draggable areas */
.wb-sector.wb-el--selected {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px;
}
.wb-sector.wb-el--selected .wb-sector-body { cursor: grab; }
.wb-sector.wb-el--selected .wb-sector-hdr  { cursor: grab; }
/* Global drag feedback */
body.wb-drag-active, body.wb-drag-active * { cursor: grabbing !important; }
.wb-dragging {
  opacity: 0.82;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55) !important;
  transition: none !important;
  pointer-events: none;
}
/* Footer — fixed */
.wb-cs-footer {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 8px 10px 10px; flex-shrink: 0;
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 5%, #080c1a 95%);
  position: relative;
}
.wb-cs-reply-bar {
  display: flex; align-items: center; gap: 5px; margin-bottom: 6px;
  padding: 4px 7px; border-radius: 5px;
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 10%, transparent);
  border-left: 2px solid var(--cs-accent,#3b82f6);
}
.wb-cs-reply-lbl { flex: 1; font-size: .62rem; color: color-mix(in srgb, var(--cs-accent,#3b82f6) 70%, #e2e8f0); }
.wb-cs-reply-x { background:none;border:none;color:#4b5563;cursor:pointer;font-size:.72rem;padding:0 2px;line-height:1; }
.wb-cs-reply-x:hover { color:#e2e8f0; }
/* Contenteditable input */
.wb-cs-ta {
  width: 100%; min-height: 58px; max-height: 110px; box-sizing: border-box;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; color: #e2e8f0; font-size: .7rem; font-family: inherit;
  padding: 7px 9px; outline: none; line-height: 1.5; overflow-y: auto;
  transition: border-color .15s; scrollbar-width: thin; cursor: text;
  word-break: break-word;
}
.wb-cs-ta:focus { border-color: color-mix(in srgb, var(--cs-accent,#3b82f6) 60%, transparent); }
.wb-cs-ta:empty::before {
  content: attr(data-ph); color: #374151; pointer-events: none;
}
/* Mention chip — non-editable, colored by accent */
.wb-cs-mention-chip {
  display: inline-flex; align-items: center;
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 18%, transparent);
  color: color-mix(in srgb, var(--cs-accent,#3b82f6) 75%, #e2e8f0);
  border: 1px solid color-mix(in srgb, var(--cs-accent,#3b82f6) 30%, transparent);
  border-radius: 4px; padding: 0 5px; font-size: .72rem; font-weight: 600;
  user-select: none; cursor: default; vertical-align: baseline; line-height: 1.4;
}
/* File chip — clickable */
.wb-cs-file-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,.09);
  color: #d1d5db; border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px; padding: 0 6px; font-size: .68rem;
  text-decoration: none; user-select: none; cursor: pointer;
  vertical-align: baseline; line-height: 1.4; transition: background .1s;
}
.wb-cs-file-chip:hover { background: rgba(255,255,255,.16); color: #fff; }
.wb-cs-file-chip i { font-size: .65rem; }
/* Card reference chip — clickable, highlights card */
.wb-cs-card-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: color-mix(in srgb, var(--cs-accent,#3b82f6) 12%, transparent);
  color: color-mix(in srgb, var(--cs-accent,#3b82f6) 65%, #e2e8f0);
  border: 1px solid color-mix(in srgb, var(--cs-accent,#3b82f6) 22%, transparent);
  border-radius: 4px; padding: 0 6px; font-size: .68rem;
  cursor: pointer; user-select: none; vertical-align: baseline; line-height: 1.4;
  transition: background .1s;
}
.wb-cs-card-chip:hover { background: color-mix(in srgb, var(--cs-accent,#3b82f6) 22%, transparent); }
/* Board reference chip — any board object, usable in comments and card body */
.wb-board-ref-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(99,102,241,.13); color: #a5b4fc;
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 4px; padding: 0 6px; font-size: .68rem;
  cursor: pointer; user-select: none; vertical-align: baseline;
  line-height: 1.4; transition: background .1s; white-space: nowrap;
}
.wb-board-ref-chip:hover { background: rgba(99,102,241,.24); color: #c7d2fe; }
.wb-board-ref-chip i { font-size: .62em; flex-shrink: 0; }
.wb-cs-txt .wb-board-ref-chip.wb-cs-chip-rd { cursor: pointer; }
/* Floating picker dropdown for card body (/ trigger) */
.wb-bref-drop {
  position: fixed; z-index: 500000;
  background: #0e1628; border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.75);
  overflow: hidden; max-height: 220px; overflow-y: auto;
  scrollbar-width: thin; min-width: 220px;
}
.wb-cs-frow { display: flex; align-items: center; margin-top: 6px; gap: 6px; }
.wb-cs-hint { font-size: .58rem; color: #374151; flex: 1; }
.wb-cs-btn {
  background: var(--cs-accent,#2563eb); border: none; color: #fff;
  font-size: .68rem; font-weight: 600; padding: 5px 13px; border-radius: 6px;
  cursor: pointer; font-family: inherit; transition: filter .12s;
  display: flex; align-items: center; gap: 4px; min-width: 72px; justify-content: center;
}
.wb-cs-btn:hover:not(:disabled) { filter: brightness(1.15); }
.wb-cs-btn:disabled { opacity: .4; cursor: default; }
.wb-cs-ref-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px; color: #6b7280; cursor: pointer;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; transition: background .1s, color .1s; flex-shrink: 0;
}
.wb-cs-ref-btn:hover { background: rgba(99,102,241,.18); color: #a5b4fc; border-color: rgba(99,102,241,.35); }
/* Autocomplete dropdown */
.wb-cs-drop {
  position: absolute; bottom: calc(100% + 2px); left: 10px; right: 10px;
  background: #0e1628; border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px; box-shadow: 0 -6px 24px rgba(0,0,0,.7);
  overflow: hidden; max-height: 190px; overflow-y: auto; scrollbar-width: thin;
}
.wb-cs-di {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; transition: background .09s;
}
.wb-cs-di:hover, .wb-cs-di.active { background: rgba(59,130,246,.15); }
.wb-cs-dico { width: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #4b5563; font-size: .8rem; }
.wb-cs-dav { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; color: #fff; }
.wb-cs-dinfo { flex: 1; min-width: 0; }
.wb-cs-dlbl { display: block; font-size: .7rem; color: #d1d5db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-cs-dsub { display: block; font-size: .58rem; color: #4b5563; }

/* ════════════════════════════════════════════════════════════
   IMAGE ELEMENTS
   ════════════════════════════════════════════════════════════ */
.wb-img-uploading {
  position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
  background: rgba(30,30,50,0.85); border: 1px solid rgba(59,130,246,0.4);
  border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: #60a5fa; font-size: 0.75rem; padding: 20px;
  min-width: 120px; min-height: 80px;
}
.wb-img-spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(59,130,246,0.3); border-top-color: #3b82f6; animation: wb-spin 0.8s linear infinite; }
@keyframes wb-spin { to { transform: rotate(360deg); } }

/* Image lightbox (legacy — kept for compatibility) */
.wb-lightbox {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.wb-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 12px 48px rgba(0,0,0,0.8); object-fit: contain; }
.wb-lightbox-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.15); border: none; border-radius: 50%; color: #fff; width: 36px; height: 36px; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }

/* ── Unified file / image viewer ─────────────────────────────── */
.wb-viewer-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(6,8,18,.95);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .22s ease;
}
.wb-viewer-modal.wb-viewer-open { opacity: 1; }
/* Top bar */
.wb-viewer-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0; backdrop-filter: blur(12px);
}
.wb-viewer-bar-name {
  flex: 1; color: #e2e8f0; font-size: .82rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.wb-viewer-bar-name i { color: #60a5fa; }
.wb-viewer-bar-acts { display: flex; gap: 4px; }
.wb-viewer-btn {
  background: rgba(255,255,255,.1); border: none; color: #e2e8f0;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: .88rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s; text-decoration: none;
}
.wb-viewer-btn:hover { background: rgba(255,255,255,.18); }
/* Body */
.wb-viewer-body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; min-height: 0;
}
/* Image viewer with zoom/pan */
.wb-viewer-img-wrap {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: zoom-in; outline: none;
  position: relative;
}
.wb-viewer-img {
  max-width: 94%; max-height: 94%;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
  transition: transform 0s; /* transitions off — instant zoom/pan */
  transform-origin: center center;
  user-select: none; pointer-events: none;
}
.wb-viewer-zoom-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: .62rem; color: rgba(255,255,255,.3);
  background: rgba(0,0,0,.4); padding: 3px 10px; border-radius: 20px;
  pointer-events: none; transition: opacity .3s;
}
.wb-viewer-img-wrap:hover .wb-viewer-zoom-hint { opacity: 0; }
/* Video viewer */
.wb-viewer-video {
  max-width: 94%; max-height: 94%; border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.7); outline: none;
}
/* Audio viewer */
.wb-viewer-audio-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  color: #60a5fa;
}
.wb-viewer-audio-wrap i { font-size: 4rem; opacity: .5; }
.wb-viewer-audio-wrap p { color: #9ca3af; font-size: .85rem; margin: 0; }
.wb-viewer-audio-wrap audio { width: 340px; max-width: 90vw; }
/* PDF / iframe */
.wb-viewer-iframe {
  width: 100%; height: 100%; border: none; background: #fff;
}
/* Fallback + download */
.wb-viewer-fallback {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: #4b5563; font-size: .85rem; text-align: center;
}
.wb-viewer-dl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #2563eb; color: #fff; border: none; border-radius: 8px;
  padding: 9px 20px; font-size: .8rem; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background .12s;
}
.wb-viewer-dl-btn:hover { background: #3b82f6; }

/* ════════════════════════════════════════════════════════════
   FILE CARDS
   ════════════════════════════════════════════════════════════ */
.wb-file-card {
  position: absolute; z-index: 100; pointer-events: auto; cursor: move;
  background: #1e2130; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 200px; max-width: 280px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: box-shadow 0.15s;
}
.wb-file-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.18); }
.wb-file-card-head { display: flex; align-items: center; gap: 8px; }
.wb-file-card-icon { font-size: 1.8rem; flex-shrink: 0; }
.wb-file-card-info { flex: 1; min-width: 0; }
.wb-file-card-name { font-size: 0.78rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-file-card-size { font-size: 0.62rem; color: #6b7280; }
.wb-file-card-actions { display: flex; gap: 5px; }
.wb-file-card-btn { padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #ccc; cursor: pointer; transition: all 0.12s; }
.wb-file-card-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.wb-file-card-del { position: absolute; top: 6px; right: 6px; background: transparent; border: none; color: #4b5563; cursor: pointer; font-size: 0.7rem; opacity: 0; transition: opacity 0.15s; }
.wb-file-card:hover .wb-file-card-del { opacity: 1; }

/* File preview modal */
.wb-file-modal { position: fixed; inset: 0; z-index: 99998; background: rgba(0,0,0,0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wb-file-modal-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(0,0,0,0.7); width: 100%; box-sizing: border-box; flex-shrink: 0; }
.wb-file-modal-title { color: #fff; font-size: 0.85rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-file-modal-iframe { flex: 1; width: 100%; border: none; background: #fff; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .wb-toolbar { width: 44px; }
  .wb-tool { width: 34px; height: 34px; font-size: 0.85rem; }
  .wb-tool-label { display: none; }
}

/* ── DOM Text Element ── */
.wb-text-el {
  position: absolute; box-sizing: border-box; z-index: 2;
  cursor: default; user-select: none;
  min-width: 60px; min-height: 30px;
  pointer-events: auto;
}
.wb-text-el.wb-te-selected {
  outline: 2px solid rgba(96,165,250,0.85);
  outline-offset: 0px;
}
.wb-text-el.wb-te-editing {
  outline: 2px solid rgba(96,165,250,0.5);
  outline-offset: 0px;
}

/* Vertical alignment: flex on the CONTAINER, not on the text body.
   This preserves inline element rendering inside contenteditable. */
.wb-text-el[data-vertical-align="middle"] {
  display: flex; flex-direction: column; justify-content: center;
}
.wb-text-el[data-vertical-align="bottom"] {
  display: flex; flex-direction: column; justify-content: flex-end;
}
.wb-text-el[data-vertical-align="middle"] .wb-text-body,
.wb-text-el[data-vertical-align="bottom"] .wb-text-body {
  height: auto; /* don't force 100% when parent is a flex container */
}

.wb-text-body {
  width: 100%; height: 100%; padding: 6px 10px;
  box-sizing: border-box; outline: none;
  overflow: hidden; word-break: break-word;
  white-space: pre-wrap; line-height: 1.45;
  cursor: default; pointer-events: none;
}
.wb-text-el.wb-te-editing .wb-text-body {
  cursor: text; user-select: text; overflow: auto; pointer-events: auto;
}
.wb-text-body a[data-wbl] {
  pointer-events: auto; color: inherit;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; opacity: 0.85;
}
.wb-text-body a[data-wbl]:hover { opacity: 1; }

.wb-text-body:empty::before {
  content: 'Doble clic para editar...';
  color: rgba(255,255,255,0.25); font-style: italic; pointer-events: none;
}
.wb-text-el.wb-te-editing .wb-text-body:empty::before { content: 'Escribí aquí...'; }

/* 8 resize handles */
.wb-te-h {
  position: absolute; width: 9px; height: 9px;
  background: #ffffff; border: 2px solid #3b82f6;
  border-radius: 2px; z-index: 2;
  display: none; box-sizing: border-box;
  transition: background 0.1s;
}
.wb-te-h:hover { background: #3b82f6; }
.wb-text-el.wb-te-selected .wb-te-h { display: block; }
.wb-text-el.wb-te-editing  .wb-te-h { display: none; }
.wb-te-nw { top:-5px;  left:-5px;  cursor:nw-resize; }
.wb-te-n  { top:-5px;  left:calc(50% - 4px); cursor:n-resize; }
.wb-te-ne { top:-5px;  right:-5px; cursor:ne-resize; }
.wb-te-w  { top:calc(50% - 4px); left:-5px;  cursor:w-resize; }
.wb-te-e  { top:calc(50% - 4px); right:-5px; cursor:e-resize; }
.wb-te-sw { bottom:-5px; left:-5px;  cursor:sw-resize; }
.wb-te-s  { bottom:-5px; left:calc(50% - 4px); cursor:s-resize; }
.wb-te-se { bottom:-5px; right:-5px; cursor:se-resize; }

/* ── Floating text format toolbar ── */
.wb-te-fmtbar {
  position: fixed; z-index: 300000;
  display: flex; align-items: center; gap: 1px; flex-wrap: wrap;
  max-width: min(95vw, 860px);
  background: #12121f; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 4px 7px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.85);
  pointer-events: auto; user-select: none;
  transition: opacity 0.12s, transform 0.12s;
}
.wb-te-fmtbar.wb-te-fmtbar--hidden { opacity:0; pointer-events:none; transform:translateY(6px); }
.wb-te-fmtbar-btn {
  width:26px; height:26px; border-radius:5px;
  border:none; background:transparent; color:#6b7280;
  font-size:0.78rem; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.1s, color 0.1s;
}
.wb-te-fmtbar-btn:hover { background:rgba(255,255,255,0.09); color:#e2e8f0; }
.wb-te-fmtbar-btn.active { background:rgba(59,130,246,0.2); color:#60a5fa; }
.wb-te-fmtbar-sep { width:1px; height:15px; background:rgba(255,255,255,0.1); margin:0 3px; flex-shrink:0; align-self:center; }

/* Font family select */
.wb-te-fmtbar-family {
  background:#0c0c1c; border:1px solid rgba(255,255,255,0.1);
  border-radius:4px; color:#9ca3af; font-size:0.68rem;
  padding:2px 4px; cursor:pointer; outline:none; height:24px;
  max-width:96px; flex-shrink:0;
  transition:border-color 0.1s, color 0.1s;
}
.wb-te-fmtbar-family:hover, .wb-te-fmtbar-family:focus { border-color:rgba(255,255,255,0.22); color:#e2e8f0; }
.wb-te-fmtbar-family option { background:#1a1a2e; color:#e2e8f0; }

/* Size group: − [input] + */
.wb-te-fmtbar-sizegroup {
  display:flex; align-items:center; gap:0; flex-shrink:0;
  border:1px solid rgba(255,255,255,0.1); border-radius:5px; overflow:hidden;
}
.wb-te-fmtbar-size-dec,
.wb-te-fmtbar-size-inc {
  width:20px; height:24px; border:none;
  background:rgba(255,255,255,0.04); color:#6b7280;
  cursor:pointer; font-size:0.95rem; line-height:1;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background 0.1s, color 0.1s;
}
.wb-te-fmtbar-size-dec:hover,
.wb-te-fmtbar-size-inc:hover { background:rgba(255,255,255,0.12); color:#e2e8f0; }
.wb-te-fmtbar-size {
  background:#0c0c1c; border:none; border-left:1px solid rgba(255,255,255,0.08); border-right:1px solid rgba(255,255,255,0.08);
  color:#9ca3af; font-size:0.7rem;
  padding:2px 2px; cursor:text; outline:none; height:24px; width:36px;
  -moz-appearance:textfield; text-align:center;
}
.wb-te-fmtbar-size::-webkit-inner-spin-button,
.wb-te-fmtbar-size::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.wb-te-fmtbar-size:focus { color:#e2e8f0; background:#14142a; }

/* Color labels */
.wb-te-fmtbar-color {
  width:26px; height:26px; border-radius:5px; border:none;
  background:transparent; color:#9ca3af; font-size:0.78rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; position:relative;
  flex-shrink:0; transition:background 0.1s;
}
.wb-te-fmtbar-color:hover { background:rgba(255,255,255,0.09); }
.wb-te-fmtbar-color input[type=color] {
  position:absolute; width:200%; height:200%; top:-50%; left:-50%;
  opacity:0; cursor:pointer;
}
.wb-te-fmtbar-color-bar {
  position:absolute; bottom:3px; left:4px; right:4px;
  height:2px; border-radius:1px; background:#fff; pointer-events:none;
}

/* ── Connector format select ── */
.wb-fmt-g-size {
  font-size: 0.65rem; background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1);
  color: #9ca3af; border-radius: 4px; padding: 2px 6px; cursor: pointer; outline: none;
  flex-shrink: 0; height: 24px;
}
.wb-fmt-g-size option { background: #1a1a2e; color: #e2e8f0; }
.wb-fmt-g-size:hover, .wb-fmt-g-size:focus { background: #22223a; color: #e2e8f0; border-color: rgba(255,255,255,0.2); }

/* ── Connector anchor dots ── */
.wb-conn-anchor {
  width: 14px; height: 14px; border-radius: 50%;
  background: #1e3a5f; border: 2px solid #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
  cursor: crosshair; z-index: 9999;
  transition: transform 0.12s, background 0.1s, box-shadow 0.12s;
  user-select: none; -webkit-user-select: none;
}
.wb-conn-anchor:hover, .wb-conn-anchor.active {
  background: #3b82f6; transform: scale(1.6);
  box-shadow: 0 0 0 6px rgba(59,130,246,0.3);
}

/* ── Connector (wire) ── */
.wb-connector-selected { filter: drop-shadow(0 0 3px rgba(96,165,250,0.7)); }

/* ── Shape picker panel ── */
.wb-shapes-wrap { position: relative; }
.wb-shapes-toggle { gap: 2px !important; }
.wb-shapes-caret  { font-size: 0.4rem; opacity: 0.7; }
.wb-shapes-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 5000;
  background: #131320; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 10px; min-width: 290px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
}
.wb-sp-section {
  font-size: 0.58rem; color: #4b5563;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 0 2px 5px; border-top: 1px solid rgba(255,255,255,.06);
}
.wb-sp-section:first-child { border-top: none; padding-top: 0; }
.wb-sp-grid { display: flex; flex-wrap: wrap; gap: 3px; }
.wb-sp-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.05); border: 1px solid transparent;
  color: #9ca3af; font-size: 0.68rem; cursor: pointer;
  transition: all 0.1s; white-space: nowrap;
}
.wb-sp-btn:hover { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.35); color: #93c5fd; }
.wb-sp-btn.active { background: rgba(59,130,246,0.25); border-color: rgba(59,130,246,0.5); color: #60a5fa; }
.wb-zoom-badge {
  font-size: 0.65rem; color: #555; min-width: 36px;
  text-align: center; flex-shrink: 0; pointer-events: none;
}

/* ── Connector endpoint handles ── */
.wb-conn-ep {
  width: 18px; height: 18px; border-radius: 50%;
  background: #3b82f6; border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.35);
  position: absolute; z-index: 10000;
  cursor: grab; transition: transform 0.1s;
  user-select: none;
}
.wb-conn-ep:hover { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(59,130,246,0.4); }

/* ── Diagram Nodes — Modern Design ─────────────────────────── */
.wb-dnode {
  position: absolute; box-sizing: border-box; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Segoe UI', system-ui, sans-serif;
  cursor: default; user-select: none; pointer-events: auto;
  overflow: visible;
  transition: box-shadow 0.15s, transform 0.12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
}
/* Diagonal highlight for depth */
.wb-dnode::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 38%, transparent 68%);
  border-radius: inherit;
  pointer-events: none;
  clip-path: inherit;
}
.wb-dnode:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
}
.wb-dnode:hover .wb-dna  { opacity: 0.85 !important; }
.wb-dnode:hover .wb-dn-rz { opacity: 0.8; }
/* Expand pointer-events area around dnode so anchors appear slightly before cursor touches the border */
.wb-dnode::after {
  content: ''; position: absolute;
  inset: -12px; pointer-events: auto; border-radius: inherit;
}

.wb-dn-sel {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px #60a5fa, 0 0 0 5px rgba(96,165,250,0.22), 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.wb-dn-sel .wb-dn-rz { opacity: 0.9; }
.wb-dn-associated { animation: wb-dn-assoc 0.8s ease; }
@keyframes wb-dn-assoc {
  0%   { box-shadow: 0 0 0 4px rgba(74,222,128,0.8); }
  100% { box-shadow: none; }
}

/* Node label */
.wb-dn-label {
  position: relative; z-index: 1;
  width: 100%; padding: 7px 10px;
  text-align: center; line-height: 1.35; font-weight: 500;
  font-size: 0.78rem; font-family: inherit;
  outline: none; word-break: break-word; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  letter-spacing: 0.01em;
}
.wb-dnode-editing .wb-dn-label { pointer-events: auto; cursor: text; }
.wb-dn-label:empty::before { content: 'Etiqueta...'; opacity: 0.28; font-style: italic; pointer-events: none; font-weight: 400; }
.wb-dnode-decision .wb-dn-label,
.wb-dnode-diamond  .wb-dn-label  { font-style: italic; font-size: 0.72rem; padding: 4px 18%; }
.wb-dnode-fork .wb-dn-label      { display: none; }

/* Corner icon (db, doc, note, gear) */
.wb-dn-icon {
  position: absolute; top: 5px; left: 7px;
  font-size: 0.7rem; opacity: 0.5; pointer-events: none; z-index: 1;
}

/* Icon-centric nodes (server, cloud, email, agent…) */
.wb-dnode-iconic {
  flex-direction: column; gap: 2px; padding-bottom: 6px;
}
.wb-dn-main-icon {
  position: relative; z-index: 1;
  font-size: 1.55rem; margin-top: 6px;
  opacity: 0.88; pointer-events: none;
}
.wb-dnode-iconic .wb-dn-label {
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.025em; padding: 0 8px 4px;
}

/* Shape variants */
.wb-dnode-start, .wb-dnode-end, .wb-dnode-gear { border-radius: 50% !important; }
.wb-dnode-rounded  { border-radius: 32px !important; }
.wb-dnode-rect     { border-radius: 8px; }

/* Anchor dots */
.wb-dna {
  position: absolute; width: 14px; height: 14px;
  background: #0d1117; border: 2px solid #3b82f6;
  border-radius: 50%; z-index: 5;
  opacity: 0; transition: opacity 0.1s, transform 0.12s, background 0.1s;
  cursor: crosshair; pointer-events: auto;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
}
.wb-dna:hover, .wb-dna-near {
  background: #3b82f6 !important; transform: scale(1.5) !important;
  opacity: 1 !important; box-shadow: 0 0 0 6px rgba(59,130,246,0.35);
}
.wb-dna[data-a="n"] { top:-8px;    left: calc(50% - 7px); }
.wb-dna[data-a="s"] { bottom:-8px; left: calc(50% - 7px); }
.wb-dna[data-a="e"] { right:-8px;  top:  calc(50% - 7px); }
.wb-dna[data-a="w"] { left:-8px;   top:  calc(50% - 7px); }

/* Database top ellipse */
.wb-dn-db-top {
  position: absolute; top:-8px; left:-1px; right:-1px; height:16px;
  border-radius:50%; z-index:1; pointer-events:none;
}

/* Resize handle */
.wb-dn-rz {
  position: absolute; right:-5px; bottom:-5px;
  width:12px; height:12px; border-radius:3px;
  background:#3b82f6; cursor:se-resize;
  opacity:0; transition:opacity 0.12s; pointer-events:auto; z-index:6;
}
.wb-dn-rz:hover { opacity:1 !important; background:#93c5fd; }

/* SVG connectors */
.wb-dconn-path { transition: filter 0.1s; }
.wb-dconn-path.wb-dconn-hover { filter: drop-shadow(0 0 5px rgba(96,165,250,0.8)); }
.wb-dc-sel { filter: drop-shadow(0 0 6px rgba(96,165,250,0.95)) !important; }
/* Legacy fallback for shared _dnSVG paths */
#wbDnodeSVG path:not(.wb-dc-sel) { transition: filter 0.1s; }
#wbDnodeSVG path:hover { filter: drop-shadow(0 0 4px rgba(96,165,250,0.7)); }

/* ── Diagram Panel ─────────────────────────────────────────── */
.wb-diag-panel {
  position: fixed; z-index: 9000;
  background: #0f1122;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 14px;
  box-shadow: 0 12px 44px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.5);
  width: 272px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  padding: 0;
}
.wb-diag-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 9px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  cursor: grab; user-select: none; flex-shrink: 0;
}
.wb-diag-panel-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700;
  color: #93c5fd; letter-spacing: 0.04em; text-transform: uppercase;
}
.wb-diag-panel-title i { color: #3b82f6; font-size: 0.88rem; }
.wb-diag-panel-close {
  background: none; border: none; color: #4b5563;
  cursor: pointer; font-size: 0.78rem; padding: 3px 5px;
  border-radius: 4px; transition: all .12s;
}
.wb-diag-panel-close:hover { color: #e2e8f0; background: rgba(255,255,255,.08); }

/* Tabs */
.wb-diag-tabs {
  display: flex; gap: 0;
  padding: 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.wb-diag-tab {
  flex: 1; padding: 7px 4px 5px;
  background: none; border: none;
  color: #4b5563; font-size: 0.61rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: color 0.12s;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-family: inherit;
}
.wb-diag-tab:hover { color: #9ca3af; }
.wb-diag-tab.active { color: #60a5fa; border-bottom-color: #3b82f6; }
.wb-diag-tab i { font-size: 0.72rem; }

/* Scrollable body wrapping all tab panes */
.wb-diag-tab-body {
  flex: 1; overflow-y: auto; min-height: 0;
  max-height: calc(88vh - 80px);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent;
  padding-bottom: 8px;
}

/* Tab panes */
.wb-diag-tab-pane { padding-top: 2px; }

.wb-diag-section-label {
  font-size: 0.54rem; font-weight: 700; color: #374151;
  text-transform: uppercase; letter-spacing: .09em;
  padding: 5px 10px 2px;
}

/* Node picker grid */
.wb-diag-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 0 8px 2px;
}
.wb-diag-grid.cols-1 { grid-template-columns: 1fr; }
.wb-diag-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; gap: 2px; }

.wb-dn-pick {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  color: #9ca3af; font-size: 0.65rem;
  cursor: pointer; transition: all .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: inherit;
}
.wb-diag-grid.cols-3 .wb-dn-pick {
  padding: 4px 5px; gap: 3px; font-size: 0.62rem; border-radius: 5px;
}
.wb-dn-pick:hover { background: rgba(59,130,246,.13); border-color: rgba(59,130,246,.28); color: #93c5fd; }
.wb-dn-pick i   { font-size: 0.78rem; flex-shrink: 0; }
.wb-diag-grid.cols-3 .wb-dn-pick i { font-size: 0.72rem; }
.wb-dn-pick svg { flex-shrink: 0; }

/* Shape mini-preview in picker */
.wb-dnp-sh {
  width: 13px; height: 13px; flex-shrink: 0;
  display: inline-block; border: 1.5px solid;
}
.wb-dnp-sh.start    { width:11px;height:11px;border-radius:50%;background:#15803d;border-color:#4ade80; }
.wb-dnp-sh.end      { width:11px;height:11px;border-radius:50%;background:#991b1b;border-color:#f87171; }
.wb-dnp-sh.rect     { border-radius:2px;background:#1e3a5f;border-color:#3b82f6; }
.wb-dnp-sh.rounded  { border-radius:7px;background:#312e81;border-color:#818cf8; }
.wb-dnp-sh.decision { border-radius:0;background:#92400e;border-color:#fbbf24;transform:rotate(45deg);width:10px;height:10px; }
.wb-dnp-sh.fork     { width:22px;height:5px;border-radius:1px;background:#1e293b;border-color:#64748b; }
.wb-dnp-sh.manual   { background:#1e3a5f;border-color:#60a5fa;clip-path:polygon(0% 0%,100% 0%,88% 100%,12% 100%); }
.wb-dnp-sh.prep     { background:#164e63;border-color:#22d3ee;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); }
.wb-dnp-sh.offpage  { background:#312e81;border-color:#818cf8;clip-path:polygon(0% 0%,100% 0%,100% 65%,50% 100%,0% 65%); }
.wb-dnp-sh.para     { background:#164e63;border-color:#22d3ee;clip-path:polygon(15% 0%,100% 0%,85% 100%,0% 100%); }

/* Connector hint text */
.wb-diag-hint {
  font-size: 0.59rem; color: #374151; padding: 3px 12px 4px; line-height: 1.5;
}

/* Properties tab — empty state */
.wb-diag-props-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 28px 16px 20px;
  color: #374151; font-size: 0.68rem; text-align: center; line-height: 1.5;
}
.wb-diag-props-empty i { font-size: 1.7rem; opacity: 0.35; }

/* Node color themes */
.wb-dn-themes {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 2px 12px 6px;
}
.wb-dn-theme-sw {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  flex-shrink: 0;
}
.wb-dn-theme-sw:hover { transform: scale(1.2); }
.wb-dn-theme-sw.active {
  box-shadow: 0 0 0 2px #0f1122, 0 0 0 4px currentColor;
  transform: scale(1.15);
}

/* Property rows */
.wb-diag-prop-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 12px; font-size: 0.67rem; color: #6b7280;
}
.wb-diag-prop-row label { min-width: 68px; flex-shrink: 0; color: #4b5563; }
.wb-diag-prop-row input[type=text],
.wb-diag-prop-row input[type=number] {
  flex: 1; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 5px; color: #d1d5db; font-size: 0.67rem; padding: 3px 7px; outline: none;
}
.wb-diag-prop-row select {
  flex: 1; background: #131828;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px; color: #d1d5db; font-size: 0.67rem; padding: 3px 7px; outline: none;
  color-scheme: dark;
}
.wb-diag-prop-row input:focus,
.wb-diag-prop-row select:focus { border-color: rgba(59,130,246,.5); background: rgba(255,255,255,.09); }
.wb-diag-prop-row input[type=range] { flex: 1; accent-color: #3b82f6; }
.wb-diag-prop-row input[type=color] {
  width: 28px; height: 22px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; padding: 1px; background: none; cursor: pointer;
}
.wb-diag-act-btn {
  flex: 1; padding: 5px 10px; border-radius: 6px; border: none;
  font-size: 0.67rem; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}

/* Connector endpoint handles */
.wb-dc-ep {
  width:22px; height:22px; border-radius:50%;
  background:#60a5fa; border:2px solid #fff;
  box-shadow:0 0 0 4px rgba(96,165,250,.35);
  position:absolute; cursor:grab; z-index:10001;
  transition:transform .1s; user-select:none;
}
.wb-dc-ep:hover { transform: scale(1.3); background:#93c5fd; }

/* ── Sectors (organizer containers) ──────────────────────── */
.wb-sector {
  position: absolute; box-sizing: border-box;
  border-radius: 8px; pointer-events: none;
  transition: box-shadow 0.15s;
}
.wb-sector--remote-resize {
  transition: width 0.38s cubic-bezier(.4,0,.2,1), height 0.38s cubic-bezier(.4,0,.2,1), box-shadow 0.15s !important;
}
.wb-sector-hdr, .wb-sector-rz, .wb-sector-color, .wb-sector-del,
.wb-sector-title, .wb-sector-desc-wrap, .wb-sector-desc, .wb-sector-body { pointer-events: auto; }
.wb-sector:hover { box-shadow: 0 0 0 2px rgba(148,163,184,0.15); }
.wb-sector-hdr {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  cursor: grab; user-select: none; border-radius: 7px 7px 0 0;
  position: relative; z-index: 2;
}
.wb-sector-desc-wrap { position: relative; z-index: 2; }
.wb-sector-body {
  position: absolute; inset: 0; z-index: 1;
  cursor: crosshair;
}
.wb-sector-rb {
  position: fixed; z-index: 400000; pointer-events: none;
  border: 1.5px solid rgba(96,165,250,0.75);
  background: rgba(59,130,246,0.07);
  border-radius: 3px;
}
.wb-sector-hdr:active { cursor: grabbing; }
.wb-sector-drag-grip {
  color: rgba(255,255,255,0.35); cursor: grab; font-size: 0.85rem;
  flex-shrink: 0; display: flex; align-items: center;
}
.wb-sector-drag-grip:active { cursor: grabbing; }
.wb-sector-icon { font-size: 1rem; flex-shrink: 0; }
.wb-sector-title {
  flex: 1; font-size: 0.78rem; font-weight: 600;
  color: #d1d5db; outline: none; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-sector-title[contenteditable="true"] {
  color: #f1f5f9; cursor: text; white-space: normal;
  background: rgba(255,255,255,0.07); border-radius: 3px; padding: 0 4px;
}
.wb-sector-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.wb-sector-color {
  width: 10px; height: 10px; border-radius: 50%; cursor: pointer;
  opacity: 0.45; transition: opacity .12s, transform .12s; flex-shrink: 0;
}
.wb-sector-color:hover { opacity: 1; transform: scale(1.35); }
.wb-sector-color.active { opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,0.45); }
.wb-sector-custom-color {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,0.4); cursor: pointer;
  flex-shrink: 0; position: relative; overflow: hidden;
  transition: transform .12s; display: inline-flex;
}
.wb-sector-custom-color:hover { transform: scale(1.35); }
.wb-sector-custom-color input[type=color] {
  position: absolute; width: 200%; height: 200%; top: -50%; left: -50%;
  opacity: 0; cursor: pointer; border: none; padding: 0;
}
.wb-sector-del {
  background: rgba(0,0,0,0.22); border: none;
  color: rgba(255,255,255,0.7); font-size: 0.75rem;
  cursor: pointer; padding: 3px 6px; border-radius: 5px; line-height: 1;
  transition: all .12s; flex-shrink: 0;
}
.wb-sector-del:hover { background: rgba(239,68,68,0.35); color: #fff; }
.wb-sector-desc-wrap { padding: 3px 10px 5px; }
.wb-sector-desc {
  display: block; font-size: 0.67rem; color: rgba(148,163,184,0.55);
  outline: none; line-height: 1.45; min-height: 1em;
  white-space: pre-wrap; word-break: break-word;
}
.wb-sector-desc:empty::before {
  content: attr(data-placeholder);
  color: rgba(148,163,184,0.22); font-style: italic; pointer-events: none;
}
.wb-sector-desc[contenteditable="true"] {
  color: #94a3b8; cursor: text;
  background: rgba(255,255,255,0.04); border-radius: 4px; padding: 2px 5px;
}
/* Sector resize handles — base */
.wb-sector-rz {
  position: absolute; pointer-events: auto; z-index: 4;
}
/* Corners: 16×16 hit area */
.wb-sector-rz--se, .wb-sector-rz--sw,
.wb-sector-rz--ne, .wb-sector-rz--nw { width: 16px; height: 16px; }
.wb-sector-rz--se { right: 2px; bottom: 2px; cursor: se-resize;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; color: rgba(255,255,255,0.22); }
.wb-sector-rz--sw { left: 2px;  bottom: 2px; cursor: sw-resize; }
.wb-sector-rz--ne { right: 2px; top: 2px;    cursor: ne-resize; }
.wb-sector-rz--nw { left: 2px;  top: 2px;    cursor: nw-resize; }
.wb-sector-rz--se:hover { color: rgba(255,255,255,0.6); }
/* Edges: thin strips between corners */
.wb-sector-rz--n, .wb-sector-rz--s { left: 18px; right: 18px; height: 6px; cursor: n-resize; }
.wb-sector-rz--n { top: 0; cursor: n-resize; }
.wb-sector-rz--s { bottom: 0; cursor: s-resize; }
.wb-sector-rz--e, .wb-sector-rz--w { top: 18px; bottom: 18px; width: 6px; }
.wb-sector-rz--e { right: 0; cursor: e-resize; }
.wb-sector-rz--w { left: 0;  cursor: w-resize; }