/* 26px controls and 16px icons stay independent of canvas zoom and display resolution. */
.top{height:36px;gap:5px;padding:0 6px;top:10px;left:10px}.brand{font-size:21px;padding:2px 5px 4px}.top #title{width:130px;font-size:11px}.top #status{font-size:8px}.top .divider{height:18px}.top #boardMore{padding:2px;font-size:14px}.top #workspaceSwitcher{padding:3px!important;gap:3px}.top #workspaceSwitcher svg{width:16px;height:16px}.right{height:34px;top:10px;right:10px}.right #topMoreButton{width:30px;height:28px;font-size:15px}.toolbar{left:10px;padding:3px;border-radius:7px}.toolbar .tool{width:30px;height:29px}.toolbar .tool svg{width:17px;height:17px}.bottom,.bottom-left{padding:2px}.bottom button,.bottom-left button{height:25px;min-width:25px;font-size:11px}.bottom-left button{padding:0 7px}.popover{min-width:170px;padding:7px}.popover>button,.popover>a{font-size:11px;padding:7px 6px}.popover>label{font-size:11px;padding:6px}.popover kbd{font-size:9px;margin-left:12px}#topMoreMenu{width:210px;top:52px}#toolOptions{left:53px;width:180px;padding:8px;top:90px}#toolOptions>button{font-size:11px;padding:7px 2px;gap:7px}#toolOptions>button svg{width:17px;height:17px}#toolOptions h3{font-size:11px}.option-grid button{padding:4px 2px;font-size:9px}.option-grid svg{width:25px;height:20px}.icon-choice-grid{gap:3px}.icon-choice-grid button{min-height:40px;font-size:9px;padding:3px}.icon-choice-grid svg,.icon-choice-grid .choice-icon{width:28px;height:20px}#props{height:32px;min-height:32px;padding:3px;gap:0;box-sizing:border-box;overflow:visible;max-width:calc(100vw - 72px);border-radius:7px;flex-wrap:nowrap;align-items:center}#props>button,#props button[id^=myro],#props #changeTypeButton,#props #myroFill{height:26px;min-height:26px;width:26px;min-width:26px;max-width:none;padding:4px;flex:0 0 auto;overflow:visible;box-sizing:border-box}#props>button svg,#props button[id^=myro] svg,#props #changeTypeButton svg{width:17px;height:17px;flex:0 0 auto;overflow:visible}#props #myroLink{width:28px;min-width:28px;padding:4px 5px}#props #myroFont{height:26px;width:80px;max-width:80px;padding:3px;font-size:10px;flex-shrink:0}#props #myroSize{height:26px;width:34px;min-width:34px;font-size:11px;padding:2px;text-align:center;appearance:textfield}#props #myroSize::-webkit-inner-spin-button,#props #myroSize::-webkit-outer-spin-button{appearance:none}#props .context-sep{height:20px;min-width:1px;margin:0 4px}#props .color-dot{width:16px;height:16px}#props .font-size-toggle{width:16px;min-width:16px;padding:0}#props .font-size-toggle svg{width:13px;height:13px}#props .connector-toolbar{white-space:nowrap}#props.connector-toolbar #edgeStart{width:36px;min-width:36px}#props.connector-toolbar #edgeEnd{width:34px;min-width:34px}#props.connector-toolbar #edgeStart svg,#props.connector-toolbar #edgeEnd svg{width:30px;height:20px}#props.connector-toolbar .endpoint-none{font:11px Arial}#props #edgeReverse{width:26px}#props.connector-toolbar .context-sep{margin:0 3px}#props #edgeColor{width:26px;padding:4px}#props #edgeColor .color-dot{width:18px;height:18px;border:0}#stylePopup{width:184px;min-width:150px;padding:8px;border-radius:10px}#stylePopup h3{font-size:10px;margin:4px}#stylePopup .field{font-size:10px;margin:5px 0}#stylePopup select,#stylePopup input:not([type=color]):not([type=range]){font-size:11px;padding:5px}#stylePopup .swatches{grid-template-columns:repeat(5,20px);justify-content:center;gap:9px;padding:7px}#stylePopup .swatch,#toolOptions .swatch{width:20px;height:20px;min-width:20px;border-radius:50%;padding:0;border:1px solid #0002}#stylePopup .sticky-palette{grid-template-columns:repeat(4,22px);width:auto;gap:10px;justify-content:center;margin:7px 0}#stylePopup .sticky-palette button{width:22px;height:22px;border-radius:50%;box-shadow:none}#toolOptions .sticky-palette{grid-template-columns:repeat(4,24px);width:auto;gap:10px;justify-content:center}#toolOptions .sticky-palette button{width:24px;height:24px;border-radius:50%;box-shadow:none}.sticky-sizes button{font-size:11px;padding:6px 12px}#toolOptions #newStickyStack{padding:7px;font-size:11px}#stylePopup.line-settings-popup{width:170px;padding:15px;border-radius:12px}.line-settings{display:flex;flex-direction:column;gap:10px}.line-settings input[type=range]{width:100%;height:20px;margin:0 0 2px;accent-color:#454545}.line-settings-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.line-settings-row button{display:grid;place-items:center;height:30px;padding:5px;border-radius:5px}.line-settings-row svg{width:25px;height:20px}.line-settings-row .chosen{color:#4262ff;background:transparent}.line-settings-row button:hover{background:#f1f3f8}.endpoint-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}.endpoint-grid button{height:29px;display:grid;place-items:center;padding:3px;border-radius:5px}.endpoint-grid svg{width:45px;height:21px}.endpoint-grid span{font-size:10px}.endpoint-grid .chosen{color:#4262ff;background:#edf1ff}#stylePopup.endpoint-popup{width:150px;min-width:150px}.font-size-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.font-size-list button{font:11px Arial;padding:6px}.font-size-list button:hover{background:#edf1ff}#stylePopup.font-size-popup{width:140px;min-width:140px}.line-text-editor{position:absolute;z-index:40;margin:0;padding:5px 8px;font:14px Arial;line-height:20px;text-align:center;border:1px solid #4262ff;border-radius:4px;background:var(--surface);color:var(--ui-text);box-shadow:0 2px 10px #0001;outline:none;user-select:text}.edge-label{font:14px Arial;stroke-width:9px;stroke-linejoin:round;paint-order:stroke;cursor:text}.node.sticky-dispenser{box-shadow:0 5px 0 -1px #0002,0 9px 0 -2px #0003,0 14px 18px #0001;cursor:copy;padding:12px}.node.sticky-dispenser:after{display:block;content:'∞';position:absolute;right:8px;bottom:7px;border:0;font:17px Arial;opacity:.45;pointer-events:none}.sticky-dispenser .label{pointer-events:none}.dispenser-paper{display:block;width:100%;height:100%}.dispenser-grip{position:absolute;left:4px;top:4px;width:22px;height:22px;display:grid;place-items:center;font:17px Arial;line-height:1;padding:0;opacity:.35;cursor:move;border-radius:3px;z-index:4;color:inherit}.sticky-dispenser:hover .dispenser-grip{opacity:.85}.sticky-dispenser .anchor{display:none}#detailsPanel{width:280px;padding:14px;top:58px}#detailsPanel h2{font-size:15px}#detailsPanel label{font-size:10px;margin-bottom:9px}#detailsPanel input:not([type=color]),#detailsPanel textarea,#detailsPanel select{font-size:11px;padding:7px;margin-top:4px}#detailsPanel .detail-top{margin-bottom:12px}#detailsPanel .detail-actions button{font-size:11px;padding:6px 8px}#savedPanel{left:51px;top:53px;width:240px;padding:10px}#workspacePanel{left:53px;top:58px;width:245px;padding:12px}#workspaceBreadcrumbs{left:60px;top:54px;font-size:10px;padding:4px 8px}.format-grid{gap:2px}.format-grid button{padding:7px}.format-grid svg{width:18px;height:18px}.conversion-grid{gap:3px}.conversion-grid button{min-height:45px;font-size:9px;padding:5px 2px;gap:4px}.conversion-grid svg{width:23px;height:18px}.night .line-settings-row button:hover,.night .font-size-list button:hover{background:#394254}.night .line-settings-row .chosen{color:#9eafff}.night .endpoint-grid .chosen{background:#394a76;color:#e3eaff}.night .line-settings input[type=range]{accent-color:#b7c2db}@media(max-width:600px){#props{overflow-x:auto;overflow-y:hidden;max-width:calc(100vw - 66px)}#props .context-sep{margin:0 2px}#props #myroFont{width:64px}#detailsPanel{top:105px;width:255px}#workspaceBreadcrumbs{top:100px}#topMoreMenu{top:100px}}
.edge-label{stroke:var(--canvas-bg,#fff0df)}.night .edge-label{stroke:var(--canvas-bg,#20232c)}.node.sticky-dispenser .label{min-height:100%}.night #props .color-dot{border-color:#ffffff35}.line-settings input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px}.line-settings input[type=range]::-webkit-slider-thumb{margin-top:-5px}.night .line-text-editor{background:#292e39;color:#e8ebf3}#stylePopup .custom-swatch:after{bottom:-4px}

/* Text actions need their intrinsic width; icon-only actions keep their compact size. */
#props>button,#props #changeTypeButton{width:auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;overflow:hidden}
#props .card-dimension{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;margin:0 4px;font-size:10px;color:var(--muted)}
#props .card-dimension input[type=number]{width:52px;min-width:52px;flex:0 0 52px;height:26px;font-size:11px;padding:2px 3px}
#props>button>svg{flex-shrink:0}
#props{scrollbar-width:none}#props::-webkit-scrollbar{display:none}
.contour-swatch{display:block;width:18px;height:18px;border:3px solid var(--contour-color);border-radius:50%;background:transparent;box-sizing:border-box}
.connector-label{cursor:grab;pointer-events:all;user-select:none}.connector-label.editing-label{visibility:hidden}.connector-label:active{cursor:grabbing}
.edge-label,.night .edge-label{stroke:none;paint-order:normal}
.edge-bend{fill:#4262ff;stroke:white;cursor:move;pointer-events:all}#edges .label-tether{pointer-events:none;opacity:.5}
#groupResizeHandle{position:absolute;z-index:5;width:11px;height:11px;padding:0;border:2px solid #4262ff;background:white;cursor:nwse-resize;touch-action:none}
#groupResizeHandle[hidden]{display:none}.multi-selection .node.selected>.handle{display:none}

.label-attachment{pointer-events:all;cursor:grab}

/* Fill stays independent of the frame title and selection controls. */
.node.frame,.night .node.frame{background:var(--frame-fill,#fff)!important;border-style:solid}
.transparent-swatch{position:relative;background:transparent!important;border:1px solid #9b9da6!important;border-radius:50%}
.transparent-swatch::after{content:"";position:absolute;height:1.5px;width:110%;background:#9699a3;left:-5%;top:50%;transform:rotate(-45deg);pointer-events:none}
.node.file{overflow:visible;padding:0}
.file-content{width:100%;height:100%;padding:14px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;overflow:hidden;border-radius:inherit}
.file-content .file-icon,.file-content button,.file-content small{flex-shrink:0}
.file-content strong{flex-shrink:1;min-height:0}
.node.file>.handle{z-index:3;pointer-events:auto}
.range-control{position:relative;display:inline-flex;align-items:center;flex:1;min-width:70px;max-width:100%;height:28px;isolation:isolate}
.range-control input[type=range]{width:100%;margin:0;position:relative;z-index:1;background:transparent}
.range-ticks{position:absolute;left:8px;right:8px;height:4px;top:12px;pointer-events:none;z-index:2}
.range-ticks i{position:absolute;width:3px;height:3px;top:.5px;transform:translateX(-50%);border-radius:50%;background:#9ca0ae;pointer-events:none}
.roundness-field{flex-wrap:wrap}.roundness-field>span:first-child{width:100%}
#stylePopup #shapeRoundnessValue{width:44px;min-width:44px}
#props .font-size-stepper{display:inline-flex;flex-direction:column;width:16px;flex-shrink:0}
#props .font-size-stepper button{width:16px;min-width:16px;height:13px;min-height:13px;padding:0;border-radius:2px}
#props .font-size-stepper svg{width:13px;height:13px}
.font-size-list{display:flex;flex-direction:column;max-height:310px;overflow:auto}
.font-size-list button{font-size:13px;padding:9px 12px;text-align:left}
#stylePopup.font-size-popup{width:90px;min-width:90px}
#canvasPattern{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;contain:strict}
.node.frame>.label{top:auto;bottom:calc(100% + 1px);left:-1px;width:max-content;max-width:none;text-align:left!important;padding:0 0 8px;transform:scale(var(--frame-title-scale,1));transform-origin:left bottom}
#props #selectionTypeFilter{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:94px;width:auto;height:34px;padding:3px 9px;margin-right:4px;background:var(--ui-hover);border-radius:5px}
#selectionTypeFilter small{font-size:9px;line-height:11px}#selectionTypeFilter strong{font-size:11px;line-height:14px}
.selection-type-list button{display:flex;align-items:center;gap:10px;width:100%;padding:9px;border-radius:4px;text-align:left;font-size:12px;white-space:nowrap}
.selection-type-list button svg{width:20px;height:20px;flex-shrink:0}.selection-type-list button span{flex:1}.selection-type-list button small{color:var(--muted)}
.selection-type-list button:hover{background:var(--ui-hover)}.selection-type-list button[aria-pressed=true]{background:#4262ff16}

/* Camera-only changes do not need to rebuild connector SVG. */
#edges .connector-hit{stroke-width:calc(14px * var(--frame-title-scale,1))}
#edges .edge-handle{r:calc(6px * var(--frame-title-scale,1))}
#edges .edge-bend{r:calc(5px * var(--frame-title-scale,1));stroke-width:calc(2px * var(--frame-title-scale,1))}
#edges .edge-bend.label-anchor{r:calc(4px * var(--frame-title-scale,1))}
#edges .label-attachment{r:calc(3.5px * var(--frame-title-scale,1));stroke-width:calc(1.5px * var(--frame-title-scale,1))}
#edges .label-tether{stroke-width:calc(1px * var(--frame-title-scale,1));stroke-dasharray:calc(3px * var(--frame-title-scale,1)) calc(3px * var(--frame-title-scale,1))}
.node.sticky.text-suppressed:not(.editing):not(.sticky-dispenser)>.label{display:none}