/* ── Boards module styles ───────────────────────────────────────────── */
  /* Shell: 2-col when right panel is visible, otherwise full-bleed main */
#boardsShell { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 0;
  overflow: hidden;
  height: 91vh;
}
#boardsShell.show-info { 
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); 
}
#boardsMain { 
  grid-column: 1; 
  display:flex; 
  flex-direction: column; 
  height: 100%;
  background: transparent !important;
}
#boardsRightPanel { grid-column: 2; }
#boardSvg { touch-action: none; }
.selected { outline: 1.5px dashed var(--primary); outline-offset: 2px; }
.guide-line { stroke: var(--primary); stroke-opacity: .35; stroke-dasharray: 4 4; pointer-events: none; }
.comment-pin { fill: var(--primary); opacity:.8; cursor: pointer; }
.locked { filter: saturate(.5); }
.stroke { stroke: var(--text); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Resize handles */
.resize-box { pointer-events: none; }
.resize-handle { r: 5.5; fill: var(--bg); stroke: var(--primary); stroke-width: 1.5; pointer-events: all; cursor: crosshair; }
.resize-edge   { r: 4.5; fill: var(--surface); stroke: var(--primary); stroke-width: 1.2; pointer-events: all; cursor: crosshair; }

/* Right-click dragging affordance */
.draggable { cursor: grab; }
.draggable:active { cursor: grabbing; }

/* Top-edge bin zone */
.bin-zone { position:absolute; top:0; left:0; right:0; height:42px; display:grid; place-items:center; pointer-events:none; }
.bin-zone i { opacity:.0; transition: opacity .12s ease; }
.bin-zone.active { background: rgba(255,0,0,.12); outline: 1px solid rgba(255,0,0,.28); }
.bin-zone.active i { opacity:.9; }

/* Eraser cursor ring */
#eraserRing { pointer-events:none; }
.eraser-dab { fill: #000; }

.boards-header { border-bottom: var(--line); padding: .5rem; position:relative; }
.boards-header .row { display:flex; justify-content: space-between; align-items: center; gap: .75rem; margin: 0 0 3px 0; }
.boards-header .row-1 .left { display:flex; align-items:center; gap:.75rem; }
.boards-header .row-1 .section-title { margin:0; font-size: 1.1rem; }
.boards-header .row-2 .center{flex:1;display:flex;justify-content: flex-start;}
.boards-header input[type="text"] { background: transparent; border: var(--line); border-radius: 20px; padding: .25rem .3rem; color: var(--text); outline: none; }
.boards-header .title-input {font-size:1rem; width:min(200px, 30vw); top:0; left:-5px; position:relative;}
.boards-header .actions { display:flex; gap:.35rem; }
.collabs { display:flex; align-items:center; gap:.5rem; min-width: 140px; justify-content:flex-end; }
.collabs .avatars { display:flex; align-items:center; gap:.25rem; max-width: 220px; overflow:hidden; }
.collab-avatar { width: 28px; height: 28px; border-radius: 50%; display:grid; place-items:center; font-weight:700; font-size:.8rem; background: rgba(255,255,255,.12); color: var(--text); border: var(--line); }
.collab-avatar[title] { cursor: pointer; }

.board-stage {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: radial-gradient(var(--dots) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04));
  background-position: 0 0, 10px 10px, 0 0;
  background-size: 20px 20px, auto;
  border-radius: 10px;
  margin-top: .5rem;
}
#boardSvg { width:100%; height:100%; touch-action: none; user-select: none; }

.boards-fab {
  position: absolute; top: 18px;
  width: 35px; height: 35px; border-radius: 50%;
  display:grid; place-items:center; border: var(--line);
  background: var(--bg); box-shadow: var(--shadow);
  cursor: grab;
  transition: transform .12s ease, right .22s ease, left .22s ease, top .22s ease, bottom .22s ease;
  z-index: 10;
}
.boards-fab:active { cursor: grabbing; transform: scale(.98); }
.boards-tool-panel {
  position: absolute; min-width: 260px; max-width: 480px;
  background: var(--bg); border: var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: .5rem; z-index: 9;
  transform-origin: center center;
}
.boards-tool-panel .categories-row { display:flex; gap:.5rem; overflow-x:auto; }
.boards-tool { display:flex; flex-direction:column; align-items:center;
    border: var(--line); border-radius:10px; padding:.5rem; background: var(--surface);
    cursor:pointer; font-size:.75rem; }
.boards-tool i { font-size: 1.1rem; }
.boards-tool-panel .categories-row .boards-tool { min-width: 50px; user-select:none; }

/* Elements sub-panel (separate floating panel, placed under the board panel) */
.boards-sub-panel {
  position: absolute; min-width: 260px; max-width: 520px;
  background: var(--bg); border: var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: .5rem; z-index: 9; transform-origin: center center;
}
/* PATCH: Data editor */
dialog.data-modal, dialog.data-modal::backdrop { animation: none; }
.data-form { min-width: min(520px, 90vw); }
.data-form h3 { margin: 0 0 .5rem; }
.data-form .hint{ font-size:.85rem; opacity:.8; margin-bottom:.35rem; }
.data-grid{ width:100%; border-collapse: collapse; margin-bottom:.5rem; }
.data-grid th, .data-grid td{ border: var(--line); padding:.35rem; }
.data-grid input[type="text"], .data-grid input[type="number"]{
  width:100%; box-sizing:border-box; background:transparent; border: var(--line);
  border-radius:6px; padding:.25rem .35rem; color:var(--text);
}
.data-form textarea{
  width:100%; box-sizing:border-box; background:transparent; border: var(--line);
  border-radius:8px; padding:.5rem; color:var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.data-form .row{ display:flex; gap:.35rem; justify-content:flex-end; align-items:center; }
.data-form .row .sp{ flex:1; }
.draggable { cursor: default; }
.board-dragging .draggable { cursor: grabbing; }
.boards-sub-panel .boards-sublist { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap:.35rem; }
.boards-sub-panel .header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem; gap:.5rem; }
.boards-sub-panel .title { font-weight:600; }

/* Right panel list */
#boardsRightPanel .boards-list { padding: .5rem; display:flex; flex-direction: column; gap:.5rem; }
.board-card { border: var(--line); border-radius: 10px; padding:.5rem; background: var(--surface); display:grid; grid-template-columns: 1fr auto; gap:.25rem; }
.board-card .name { font-weight: 600; }
.board-card .meta { font-size:.8rem; color: var(--text-muted); }
.board-card .row-actions { display:flex; gap:.25rem; align-items:center; }

/* SVG basics */
.node { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.node.selected { outline: 2px solid var(--primary); }
.edge { stroke: rgba(255,255,255,.6); stroke-width: 2; fill: none; }
.edge.arrow { marker-end: url(#arrowhead); }
.edge { stroke-linecap: butt; stroke-linejoin: miter; }
.node { shape-rendering: crispEdges; }
.label { font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: var(--text-size); fill: var(--text); }

/* Simple selection box */
.marquee { fill: rgba(84,132,255,.12); stroke: rgba(84,132,255,.45); stroke-dasharray: 4 3; }

/* Rolling in/out animations (axis-aware) */
@keyframes rollInY { from { transform: scaleY(.82); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes rollOutY { from { transform: scaleY(1); opacity: 1; } to { transform: scaleY(.82); opacity: 0; } }
@keyframes rollInX { from { transform: scaleX(.82); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes rollOutX { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(.82); opacity: 0; } }
.anim-in.axis-y { animation: rollInY .22s ease; }
.anim-out.axis-y { animation: rollOutY .16s ease forwards; }
.anim-in.axis-x { animation: rollInX .22s ease; }
.anim-out.axis-x { animation: rollOutX .16s ease forwards; }
/* Tool Pill (docks under FAB) */
.boards-tool-pill{
  position:static;
  z-index:11;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  min-width:230px;
  max-width: 600px;
  min-height: 35px;
  padding: 0 .25rem;
  background:var(--bg);
  border:var(--line);
  border-radius: 50px;
  box-shadow:var(--shadow);
}
.boards-tool-pill .row{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;}
.boards-tool-pill label{font-size:.8rem; opacity:.8; margin:0; margin-right:.15rem;}
.boards-tool-pill input[type="color"]{width: 25px;height: 25px;padding:0;background:none;}
.boards-tool-pill input[type="range"]{width:9vw; accent-color: var(--primary);}
.boards-tool-pill .seg{
  display:inline-flex; border:var(--line); border-radius:999px; overflow:hidden;
}
.boards-tool-pill .seg > button{
  padding:.25rem .5rem; border:0; background:var(--surface);
}
.boards-tool-pill .seg > button.active{ background:var(--primary-weak, rgba(84,132,255,.12)); }
.boards-tool-pill .sp{ width:10px; height:1px; }
.boards-tool.active{ border-color: var(--primary); box-shadow: 0 0 0 1.5px var(--primary) inset; }
.axis-point { r: 4.5; fill: var(--bg); stroke: var(--primary); stroke-width: 1.4; pointer-events: all; cursor: crosshair; }
.axis-point:hover { transform: scale(1.1); }

.node{ pointer-events:all; }
.edge, .stroke{ pointer-events:stroke; vector-effect: non-scaling-stroke; }