@layer views {
.wb-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; background-color: var(--bg-1); background-image: radial-gradient(circle, var(--bg-4) 1px, transparent 1.3px); background-size: 22px 22px; cursor: default; touch-action: none; }
.wb-viewport.panning { cursor: grabbing; }
.wb-canvas { position: absolute; left: 0; top: 0; width: 4000px; height: 3000px; transform-origin: 0 0; }
.wb-tools { position: absolute; top: 14px; left: 14px; z-index: var(--z-local-5); display: inline-flex; flex-direction: column; gap: 2px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-12); padding: 4px; box-shadow: var(--shadow-card); }
.wb-tools button { width: 34px; height: 34px; border-radius: var(--r-8); display: grid; place-items: center; color: var(--fg-2); }
.wb-tools button:hover { background: var(--bg-5); color: var(--fg); }
.wb-tools button.on { background: var(--sel); color: var(--fg); }
.wb-zoom { position: absolute; right: 14px; bottom: 14px; z-index: var(--z-local-5); display: flex; gap: 2px; align-items: center; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-10); padding: 3px; }

.sticky { position: absolute; padding: 14px 14px 12px; border-radius: var(--r-4) var(--r-4) var(--r-14) var(--r-4); font-family: var(--f-hand); font-size: var(--fs-21); line-height: 1.15; color: var(--sticky-ink); box-shadow: 0 14px 24px -12px rgb(var(--black-rgb) / 0.7); cursor: grab; user-select: none; touch-action: none; overflow: hidden; }
.sticky small { display: block; font-family: var(--f-ui); font-size: var(--fs-10-5); opacity: 0.6; margin-top: 8px; }
.sticky.yellow { background: var(--sticky-yellow); }
.sticky.pink { background: var(--sticky-pink); }
.sticky.blue { background: var(--sticky-blue); }
.sticky.green { background: var(--sticky-green); }
.sticky textarea { width: 100%; height: 100%; background: none; border: 0; outline: none; resize: none; font: inherit; color: inherit; }
.wb-text { position: absolute; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-18); color: var(--fg); cursor: grab; user-select: none; touch-action: none; }
.wb-card { position: absolute; width: 250px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-11); padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; cursor: grab; user-select: none; touch-action: none; box-shadow: var(--shadow-card); }
.wb-card .cm { display: flex; gap: 8px; align-items: center; font-size: var(--fs-11); color: var(--fg-3); }
.wb-frame { position: absolute; border: 1.5px dashed var(--line-2); border-radius: var(--r-18); }
.wb-frame .ft { position: absolute; top: -12px; left: 16px; background: var(--bg-1); padding: 0 8px; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-14); color: var(--fg-2); }
.wb-item.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.wb-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wb-links path { fill: none; stroke: var(--fg-4); stroke-width: 1.6; stroke-dasharray: 5 4; }
.wb-cursor { position: absolute; pointer-events: none; display: flex; align-items: flex-start; gap: 2px; z-index: var(--z-local-6); transition: left 120ms linear, top 120ms linear; }
.wb-cursor span { font-size: var(--fs-10-5); font-weight: 600; color: var(--fg-on-accent); background: var(--c); padding: 1px 6px; border-radius: var(--r-5); margin-top: 12px; }

/* Tools in use */
.scroll.wb-host { overflow: hidden; display: flex; flex-direction: column; }
.wb-viewport[data-tool="sticky"], .wb-viewport[data-tool="text"], .wb-viewport[data-tool="frame"], .wb-viewport[data-tool="ticket"] { cursor: copy; }
.wb-viewport[data-tool="draw"] { cursor: crosshair; }
.wb-viewport[data-tool="connector"] .wb-item { cursor: alias; }
.wb-item.dragging { z-index: var(--z-local-4); opacity: 0.92; }
.wb-hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: var(--z-local-5); font-size: var(--fs-12); color: var(--fg-2); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 4px 12px; }
.wb-colors { position: absolute; top: 14px; left: 64px; z-index: var(--z-local-5); display: flex; gap: 6px; align-items: center; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-10); padding: 5px 8px; }
.wb-colors .sw { width: 20px; height: 20px; border-radius: var(--r-6); border: 2px solid transparent; }
.wb-colors .sw.on { border-color: var(--fg); }
.wb-colors .sw.yellow { background: var(--sticky-yellow); }
.wb-colors .sw.pink { background: var(--sticky-pink); }
.wb-colors .sw.blue { background: var(--sticky-blue); }
.wb-colors .sw.green { background: var(--sticky-green); }
.wb-zoom button { width: 30px; height: 30px; border-radius: var(--r-7); display: grid; place-items: center; color: var(--fg-2); }
.wb-zoom button:hover { background: var(--bg-5); color: var(--fg); }
.wb-zoom .pct { width: auto; padding: 0 8px; font-family: var(--f-mono); font-size: var(--fs-10-5); }

/* Items */
.wb-card .tt { font-weight: 500; line-height: 1.3; }
.wb-card.gone { border-style: dashed; }
.wb-frame { pointer-events: auto; }
.wb-edit { width: 100%; background: none; border: 0; outline: none; font: inherit; color: inherit; }
.wb-text .wb-edit { min-width: 200px; }
.wb-frame input.ft { width: auto; min-width: 160px; }
.wb-draw { position: absolute; overflow: visible; cursor: grab; }
.wb-draw path, .wb-ink path { fill: none; stroke: var(--fg-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wb-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wb-links path.on { stroke: var(--accent); stroke-dasharray: none; }
.wb-cursor svg path { fill: var(--c); stroke: var(--bg-0); stroke-width: 1; }
}