/* Block 23: board.css = block 01 board-core.css (merged) + toolbar. No shadows, radius 18, violet #7703fc. */
.nt-board { position: relative; overflow: hidden; touch-action: none; outline: none; background: #ffffff; border-radius: 18px; }
.nt-board-canvas { display: block; width: 100%; height: 100%; }
.nt-board-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
.nt-board-overlay > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: auto; }
.nt-board[data-tool="select"] .nt-board-canvas { cursor: default; }
.nt-board[data-tool="pan"] .nt-board-canvas { cursor: grab; }
.nt-board[data-tool="eraser"] .nt-board-canvas { cursor: cell; }
.nt-board:not([data-tool="select"]):not([data-tool="pan"]):not([data-tool="eraser"]) .nt-board-canvas { cursor: crosshair; }

/* toolbar */
.nt-tb { position: absolute; z-index: 5; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 8px; background: #ffffff; border: 1px solid #e4e0ee; border-radius: 18px; font-family: Onest, Manrope, system-ui, sans-serif; color: #1a1a1a; box-sizing: border-box; touch-action: manipulation; }
.nt-tb-group { display: flex; align-items: center; gap: 2px; position: relative; }
.nt-tb-group + .nt-tb-group { padding-left: 8px; border-left: 1px solid #e4e0ee; }
.nt-tb-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #1a1a1a; cursor: pointer; font: inherit; }
.nt-tb-btn:hover { background: #f4eeff; }
.nt-tb-btn:focus-visible, .nt-tb-swatch:focus-visible, .nt-tb-chip:focus-visible { outline: 2px solid #7703fc; outline-offset: 1px; }
.nt-tb-btn.is-active, .nt-tb-btn[aria-pressed="true"] { background: #7703fc; color: #ffffff; }
.nt-tb-btn:disabled { opacity: 0.35; cursor: default; }
.nt-tb-btn:disabled:hover { background: transparent; }
.nt-tb-zoomval { min-width: 44px; text-align: center; font-size: 13px; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.nt-tb-pop { position: absolute; top: calc(100% + 14px); left: 0; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #ffffff; border: 1px solid #e4e0ee; border-radius: 18px; min-width: 188px; }
.nt-tb-pop[hidden], .nt-tb-row[hidden], .nt-tb [hidden] { display: none; }
.nt-tb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nt-tb-swatch { width: 28px; height: 28px; padding: 0; border: 2px solid #ffffff; border-radius: 50%; cursor: pointer; outline: 1px solid #e4e0ee; }
.nt-tb-swatch.is-active { outline: 2px solid #7703fc; }
.nt-tb-chip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 32px; padding: 0 8px; border: 1px solid #e4e0ee; border-radius: 12px; background: #ffffff; color: #1a1a1a; cursor: pointer; font: inherit; font-size: 13px; box-sizing: border-box; }
.nt-tb-chip.is-active { border-color: #7703fc; background: #f4eeff; color: #7703fc; }
.nt-tb-wline { display: block; width: 100%; background: currentColor; border-radius: 4px; }
.nt-tb-calc-edit { width: 200px; height: 40px; resize: none; border: 1px solid #7703fc; border-radius: 12px; padding: 6px 8px; font: 16px Onest, Manrope, system-ui, sans-serif; box-sizing: border-box; }

/* phone: compact bottom bar, shape tools hidden */
.nt-tb.nt-tb-phone { top: auto; bottom: 10px; left: 8px; right: 8px; transform: none; max-width: none; justify-content: space-between; gap: 4px; padding: 4px 6px; overflow: visible; }
.nt-tb.nt-tb-phone .nt-tb-desk { display: none; }
.nt-tb.nt-tb-phone .nt-tb-btn { width: 40px; height: 40px; }
.nt-tb.nt-tb-phone .nt-tb-group + .nt-tb-group { padding-left: 4px; }
.nt-tb.nt-tb-phone .nt-tb-zoom { display: none; }
.nt-tb.nt-tb-phone .nt-tb-pop { top: auto; bottom: calc(100% + 14px); }
@media (max-width: 640px) { .nt-tb:not([data-mode="desktop"]) .nt-tb-zoomval { display: none; } }