/* Studio tokens and global scrollbar behavior belong to packages/ui/studio.css. */
.wb-precision-canvas{background-image:none}.wb-precision{border:1px solid var(--line);border-radius:10px;padding:12px;margin:0 0 16px;min-width:0;display:flex;flex-direction:column;gap:10px}.wb-precision legend{font-size:12px;font-weight:600}.wb-precision label{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.5}.wb-precision input{accent-color:var(--accent)}.wb-precision select{width:100%;font-size:11px}.wb-measure{font-size:11px;line-height:1.7;color:var(--accent);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.wb-align-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.wb-align-actions button{font-size:11px;padding:6px;line-height:1.4}.wb-align-actions button:last-child{grid-column:1/-1}.wb-precision .wb-muted{font-size:10px;margin:0;line-height:1.7}#canvas [data-resize]{cursor:nwse-resize}
#canvas[data-tool=pan]{cursor:grab}#canvas[data-tool=pan][data-dragging=true]{cursor:grabbing}#canvas[data-tool=pen],#canvas[data-tool=arrow],#canvas[data-tool=rect],#canvas[data-tool=ellipse]{cursor:crosshair}#canvas[data-tool=text]{cursor:text}#canvas[data-tool=select] [data-id]{cursor:move}
.wb-pen-settings{border:1px solid var(--line);border-radius:10px;margin:0 0 18px;padding:12px;min-width:0}.wb-pen-settings legend{font-size:11px;font-weight:600}.wb-pen-settings label{display:block;font-size:11px;margin:8px 0 4px}.wb-pen-settings input[type=color]{width:100%;height:36px;padding:3px}.wb-pen-settings>div{display:flex;gap:6px;align-items:center}.wb-pen-settings input[type=range]{width:100%;padding:0;accent-color:var(--accent)}.wb-pen-settings output{font-size:10px;white-space:nowrap}#arrow-links label{margin:8px 0 4px}#wb-print{display:none}
@page{size:A4 landscape;margin:12mm}
@media print{body>*{display:none!important}#wb-print{display:block!important;color:#000;background:#fff;width:270mm;font-family:'Segoe UI',sans-serif}#wb-print h1{font-size:18pt;margin:0 0 3mm;letter-spacing:0}#wb-print p{font-size:9pt;margin:2mm 0;color:#333}#wb-print svg{width:270mm;height:150mm;display:block;break-inside:avoid}html,body{background:#fff!important;margin:0!important;padding:0!important;overflow:visible!important}#wb-print *{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
body{font-size:14px}.wb-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh}button,a.primary{border:1px solid var(--line);border-radius:9px;padding:10px 14px;min-height:42px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}button.primary,a.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}button.primary:hover,a.primary:hover{background:color-mix(in srgb,var(--accent) 88%,black)}button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
input,select,textarea{font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:10px;min-width:0}textarea{resize:none}select{cursor:pointer}a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:650;color:var(--accent)}.wb-muted{color:var(--muted);font-size:12px;line-height:1.7}.wb-sidebar{background:var(--surface);border-right:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:18px}.wb-logo{width:204px;height:50px;display:block;margin-bottom:28px}.wb-sidebar h1{font-size:30px}.wb-sidebar label{font-size:12px;display:block;margin-bottom:6px}.wb-sidebar select{width:100%;margin-bottom:12px}.wb-sidebar #new-board{width:100%;margin:4px 0 26px}.wb-list-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0 12px}.wb-list-heading h2{font-size:14px}.wb-list-heading span{color:var(--muted);font-size:12px}#boards{display:grid;gap:7px}#boards button{justify-content:start;text-align:left;overflow-wrap:anywhere;font-size:12px}.wb-pages{display:flex;justify-content:space-between;margin:14px 0 24px}.wb-pages button{font-size:11px;padding:5px 10px}.wb-sidebar-bottom{margin-top:auto;padding-top:35px;font-size:12px;font-weight:650}.wb-sidebar-bottom span{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:5px}
.wb-main{min-width:0;display:flex;flex-direction:column}.wb-header{padding:26px 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:var(--surface)}.wb-title-label{display:block;font-size:11px;color:var(--muted);margin-top:10px}#title{font:600 25px var(--display);padding:5px 0;width:min(350px,100%);border:0;border-radius:0}.wb-header-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.wb-header-actions button{font-size:12px}#status{font-size:11px;color:var(--muted);max-width:220px;margin-right:12px}.wb-error{background:#fff2ee;color:#a52d20;border:1px solid #a52d20;padding:14px 20px;margin:12px 24px;border-radius:10px;font-size:13px}.wb-error a{color:inherit;text-decoration:underline}.wb-welcome{margin:auto;padding:65px 30px;text-align:center}.wb-welcome h2{font-size:38px;margin-bottom:22px}.wb-welcome p{color:var(--muted);line-height:1.8;margin:18px 0 28px}.wb-welcome-mark{font-size:60px;color:var(--brand);margin-bottom:25px}.wb-welcome button{margin-left:8px}
.wb-workspace{display:grid;grid-template-columns:84px minmax(200px,1fr) 220px;grid-template-rows:minmax(430px,calc(100dvh - 210px)) auto;gap:0;flex:1;min-width:0}.wb-tools{display:flex;flex-direction:column;gap:6px;padding:14px 8px;background:var(--surface);border-right:1px solid var(--line);overflow:auto}.wb-tools button{flex-direction:column;font-size:21px;padding:7px 3px;gap:2px;min-height:55px;flex-shrink:0;border-color:transparent}.wb-tools button span{font-size:9px}.wb-canvas-wrap{position:relative;min-width:0;background-color:var(--bg);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;overflow:hidden}#canvas{width:100%;height:100%;touch-action:none;display:block}#canvas:focus-visible{outline-offset:-5px}.wb-empty{pointer-events:none;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;color:var(--muted)}.wb-empty strong{font:600 26px var(--display);color:var(--text)}.wb-empty span{font-size:12px;line-height:1.8}.wb-inspector{background:var(--surface);padding:18px 14px;overflow:auto;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.wb-inspector .wb-muted{margin-bottom:10px}#elements{max-height:44%;min-height:60px;overflow:auto;display:grid;gap:5px;margin-bottom:14px}#elements button{font-size:11px;justify-content:start;overflow-wrap:anywhere;text-align:left;padding:8px}.wb-inspector>button{font-size:11px}.wb-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 18px;background:var(--surface);border-top:1px solid var(--line)}.wb-footer>div{display:flex;align-items:center;gap:6px}.wb-footer>span{font-size:10px;color:var(--muted)}.wb-footer button{padding:7px 10px;font-size:11px}#zoom-level{font-size:11px;min-width:45px;text-align:center}
.wb-dialog{width:980px;height:720px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:auto;border-radius:18px}.wb-dialog form{height:100%;display:flex;flex-direction:column}.wb-dialog header,.wb-dialog footer{display:flex;align-items:center;gap:10px;padding:18px 24px;flex-shrink:0}.wb-dialog header{border-bottom:1px solid var(--line)}.wb-dialog header>div{margin-right:auto}.wb-dialog header h2{font-size:24px;margin-top:8px}.wb-dialog footer{border-top:1px solid var(--line)}.wb-dialog footer>span{margin-right:auto;color:var(--muted);font-size:11px}.wb-dialog-body{display:grid;grid-template-columns:240px minmax(0,1fr);overflow:auto;min-height:0;flex:1}.wb-dialog-context{background:var(--accent-soft);padding:32px 24px}.wb-dialog-context h3{font-size:27px;margin-bottom:20px}.wb-dialog-context p{font-size:12px;line-height:1.8;color:var(--muted)}.wb-fields{padding:24px;display:flex;flex-direction:column;gap:10px}.wb-fields label{font-size:12px;display:block}.wb-fields input:not([type=checkbox]),.wb-fields textarea,.wb-fields select{width:100%}.wb-fields input[type=color]{height:42px;padding:4px}.wb-fields input[type=checkbox]{accent-color:var(--accent)}.wb-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wb-pair input{display:block;margin-top:5px}#property-error{min-height:20px;color:#a52d20;font-size:12px}.wb-dialog.wb-max{width:calc(100vw - 24px);height:calc(100dvh - 24px)}.wb-decision{margin:auto;width:500px;max-width:calc(100vw - 24px);border-radius:16px;padding:28px}.wb-decision h2{font-size:25px;margin-bottom:18px}.wb-decision p{margin-bottom:24px;line-height:1.8}.wb-decision>div{display:flex;justify-content:flex-end;gap:10px}
@media(max-width:1150px){.wb-shell{grid-template-columns:210px minmax(0,1fr)}.wb-logo{width:170px;height:42px}.wb-sidebar{padding:20px 16px}.wb-workspace{grid-template-columns:70px minmax(150px,1fr) 175px}.wb-header{padding:20px}.wb-inspector{padding:14px 10px}.wb-footer>span{width:100%;order:3}}
@media(max-width:780px){.wb-shell{display:block}.wb-sidebar{border-right:0;border-bottom:1px solid var(--line)}.wb-logo{margin:0}.wb-sidebar>p,.wb-sidebar>h1,.wb-sidebar-bottom{display:none}.wb-sidebar #new-board{margin:8px 0}#boards{max-height:130px;overflow:auto}.wb-header{padding:16px}.wb-header-actions{width:100%}.wb-workspace{grid-template-columns:60px minmax(0,1fr);grid-template-rows:480px auto auto}.wb-inspector{grid-column:1/-1;border-top:1px solid var(--line);border-left:0}#elements{max-height:160px}.wb-footer{grid-column:1/-1}.wb-dialog-body{grid-template-columns:1fr}.wb-dialog-context{display:none}.wb-dialog footer{flex-wrap:wrap}.wb-dialog footer>span{width:100%}.wb-fields{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){button,a.primary,input,textarea,select{border:1px solid ButtonText}.wb-canvas-wrap{background-image:none}#canvas{border:1px solid CanvasText}}

.wb-selection-row{display:flex;align-items:center;gap:8px}.wb-selection-row input{flex:none;width:24px;height:24px;accent-color:var(--accent)}.wb-selection-row button{min-width:0;flex:1;text-align:left;overflow-wrap:anywhere}

.wb-version-dialog{width:760px;max-height:calc(100dvh - 32px);overflow:auto}.wb-version-dialog header,.wb-version-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.wb-version-dialog [data-versions]{display:grid;gap:8px;margin:20px 0;max-height:40dvh;overflow:auto}.wb-version-dialog [data-version-error]{color:#a52d20}.wb-version-dialog p{margin:12px 0;line-height:1.6}

.wb-inspector>[data-precision],.wb-inspector>#elements{flex-shrink:0}.wb-selection-row button{min-height:44px}

#canvas [data-connect],#canvas[data-tool=connect]{cursor:crosshair}#canvas [data-connect]:hover{fill:var(--accent-soft);stroke-width:3}

/* Shared Studio motion: Souverän, approved by Michael. */
:root{--wb-motion-short:160ms;--wb-motion-layout:210ms;--wb-motion-window:180ms;--wb-motion-ease:cubic-bezier(.22,1,.36,1)}
.wb-tools button,.dg-shapes button,.wb-footer button,.wb-inspector>button,.wb-header-actions button,.dg-document-header button{transition:background-color var(--wb-motion-short),border-color var(--wb-motion-short),box-shadow var(--wb-motion-short),transform 120ms}
.wb-tools button:hover:not(:disabled),.dg-shapes button:hover:not(:disabled),.wb-inspector>button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 10px rgb(35 39 61 / 7%)}
.wb-tools button:active:not(:disabled),.dg-shapes button:active:not(:disabled),.wb-inspector>button:active:not(:disabled){transform:translateY(1px)}
#canvas [data-layer=objects]>[data-id]{transition:filter var(--wb-motion-short)}
#canvas[data-tool=select] [data-layer=objects]>[data-id]:hover,#canvas [data-layer=objects]>[data-lifted=true]{filter:drop-shadow(0 2px 3px rgb(35 39 61 / 14%))}
#canvas .wb-selection,#canvas .wb-port,#canvas .wb-connect-target{animation:wb-reveal var(--wb-motion-short) ease-out}
#canvas .wb-guides{transition:opacity var(--wb-motion-short);pointer-events:none}
#canvas circle.wb-port{transform-box:fill-box;transform-origin:center;transition:transform var(--wb-motion-short),fill var(--wb-motion-short)}
#canvas circle.wb-port:hover{transform:scale(1.08)}
.wb-dialog[open]:not([data-closing]){animation:wb-window-in var(--wb-motion-window) var(--wb-motion-ease)}
.wb-dialog::backdrop{animation:wb-reveal var(--wb-motion-short) ease-out}
@keyframes wb-reveal{from{opacity:0}to{opacity:1}}
@keyframes wb-window-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#canvas [data-layer=objects]>[data-id]{filter:none!important}.wb-tools button:hover,.dg-shapes button:hover,.wb-inspector>button:hover,#canvas circle.wb-port:hover{transform:none}.wb-dialog[open],.wb-dialog::backdrop{animation:none!important}}

@media print{#wb-print h1{color:var(--document-heading,#23273d);border-bottom:1pt solid var(--document-line,#b8c3ce);padding-bottom:3mm}}