/* Menu and floating-palette layout. Existing painting controls stay intact. */
:root { --paint-menu-height: 34px; --paint-dock-width: 356px; }
body { background: #b9b9b9; }
.app.menu-layout { display: block; position: relative; height: 100vh; height: 100dvh; padding: 0; overflow: hidden; }
.menu-layout > .stage { position: absolute; inset: var(--paint-menu-height) 0 0 var(--paint-dock-width); width: calc(100% - var(--paint-dock-width)); height: auto; display: flex; padding: 6px; gap: 0; border: 0; border-radius: 0; background: #b9b9b9; box-shadow: none; }
.menu-layout.dock-disabled > .stage { left: 0; width: 100%; }
.menu-layout .stage-canvas-scroll { width: 100%; max-width: 100%; margin: 0; padding: 0; background: #808080; border: 1px solid; border-color: #606060 #fff #fff #606060; }
.menu-layout #paint { min-height: 0; min-width: 0; border: 0; border-radius: 0; box-shadow: 1px 1px 2px #555; }
.menu-layout > .stage > .mobile-topbar-toggles,
.menu-layout > .stage > .stage-topbar { display: none !important; }
.menu-layout > .panel,
.menu-layout.panel-hidden > .panel { display: block; position: fixed; inset: var(--paint-menu-height) 0 0; z-index: 20; width: 100%; max-width: none; height: auto; max-height: none; padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; visibility: visible; pointer-events: none; transform: none; }
.menu-layout > .panel > .panel-title { display: none; }

.paint-menu-bar { position: fixed; inset: 0 0 auto; z-index: 1000; height: var(--paint-menu-height); display: flex; align-items: center; gap: 1px; padding: 2px 7px; border: 1px solid; border-color: #fff #777 #777 #fff; background: #c0c0c0; color: #111; font: 12px Tahoma, 'Segoe UI', sans-serif; }
.paint-dock-toggle { display: block; margin: 0 4px 0 0; padding: 3px 6px; border: 2px solid; border-color: #fff #555 #555 #fff; border-radius: 0; background: #c0c0c0; color: #111; font: inherit; box-shadow: none; }
.paint-dock-toggle[aria-expanded="true"] { border-color: #555 #fff #fff #555; }
.paint-menu { position: relative; flex: 0 0 auto; }
.paint-menu > summary { display: block; padding: 5px 7px; border: 1px solid transparent; cursor: default; list-style: none; user-select: none; }
.paint-menu > summary::-webkit-details-marker { display: none; }
.paint-menu > summary:hover, .paint-menu[open] > summary { border-color: #fff #777 #777 #fff; background: #d0d0d0; }
.paint-menu > summary:focus-visible { outline: 1px dotted #111; outline-offset: -4px; }
.paint-menu-popup { position: absolute; top: calc(100% - 1px); left: 0; min-width: 190px; max-width: calc(100vw - 12px); max-height: calc(100dvh - 42px); overflow: auto; padding: 3px; border: 2px solid; border-color: #fff #555 #555 #fff; background: #c0c0c0; box-shadow: 2px 2px 0 #0005; }
.paint-menu-popup > button, .paint-menu-popup > a { display: block; position: relative; width: 100%; min-height: 26px; margin: 0; padding: 5px 12px 5px 25px; border: 0; border-radius: 0; background: transparent; color: #111; box-shadow: none; font: inherit; font-weight: normal; line-height: 1.25; text-align: left; text-decoration: none; white-space: nowrap; cursor: default; }
.paint-menu-popup > button:hover, .paint-menu-popup > a:hover,
.paint-menu-popup > button:focus-visible, .paint-menu-popup > a:focus-visible { background: #000080; color: #fff; outline: none; }
.paint-menu-popup > [aria-checked="true"]::before,
.paint-menu-popup > a[aria-current="page"]::before { position: absolute; left: 8px; content: '✓'; }
.paint-menu-popup hr { height: 2px; margin: 4px 2px; border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; }
.paint-menu-note { max-width: 210px; padding: 6px 10px; font-size: 11px; color: #444; line-height: 1.3; white-space: normal; }
.paint-menu-bar .save-status-live { position: static; margin-left: auto; font: inherit; color: #333; }
.paint-about-dialog { width: 320px; max-width: calc(100vw - 24px); margin: auto; padding: 2px; border: 2px solid; border-color: #fff #555 #555 #fff; border-radius: 0; background: #c0c0c0; color: #111; box-shadow: 3px 4px 0 #0004; font: 12px Tahoma, 'Segoe UI', sans-serif; }
.paint-about-dialog::backdrop { background: #0003; }
.paint-about-dialog h2 { margin: 0; padding: 5px 7px; background: #000080; color: #fff; font: bold 12px Tahoma, 'Segoe UI', sans-serif; }
.paint-about-body { padding: 8px 12px 12px; line-height: 1.5; }
.paint-about-body p { margin: 4px 0 12px; }
.paint-about-body button { display: block; min-width: 72px; height: 26px; margin-left: auto; padding: 2px 12px; border: 2px solid; border-color: #fff #555 #555 #fff; border-radius: 0; background: #c0c0c0; color: #111; box-shadow: none; font: inherit; }
.paint-about-body button:active { border-color: #555 #fff #fff #555; }
.paint-about-body button:hover { outline: none; }
.paint-about-body button:focus-visible { outline: 1px dotted #111; outline-offset: -5px; }

.menu-layout .paint-palette { position: absolute; width: 344px; max-width: calc(100vw - 12px); margin: 0; padding: 2px; border: 2px solid; border-color: #fff #555 #555 #fff; border-radius: 0; background: #c0c0c0; box-shadow: 2px 3px 0 #0004; visibility: visible; pointer-events: auto; color: #202020; }
.menu-layout .paint-palette[hidden] { display: none !important; }
.paint-palette-titlebar { display: flex; min-height: 24px; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 3px 2px 6px; background: #808080; color: #fff; font: bold 12px Tahoma, 'Segoe UI', sans-serif; cursor: move; touch-action: none; user-select: none; }
.paint-palette.is-active > .paint-palette-titlebar { background: #000080; }
.paint-palette-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paint-palette-order { position: relative; flex: 0 0 20px; box-sizing: border-box; width: 20px; height: 20px; min-width: 0; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #e1e1e1; box-shadow: none; font-size: 0; line-height: 0; cursor: default; }
.paint-palette-order::before { content: ''; position: absolute; inset: 0; margin: auto; width: 7px; height: 5px; background: currentColor; clip-path: polygon(0 75%, 50% 0, 100% 75%, 86% 100%, 50% 45%, 14% 100%); }
.paint-palette-order[data-dock-move="down"]::before { transform: rotate(180deg); }
.paint-palette-order[hidden] { display: none !important; }
.paint-palette-order[data-dock-move="up"] { margin-left: auto; }
.paint-palette-order:not(:disabled):hover { background: #ffffff1a; border-color: #ffffff40; color: #fff; }
.paint-palette-order:not(:disabled):active { background: #0002; }
.paint-palette-order:disabled { opacity: 0.35; }
.paint-palette-order:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }
.paint-palette-dock { flex: 0 0 auto; min-width: 35px; height: 20px; margin: 0 2px 0 auto; padding: 0 3px; border: 2px solid; border-color: #fff #555 #555 #fff; border-radius: 0; background: #c0c0c0; color: #111; box-shadow: none; font: 10px Tahoma, 'Segoe UI', sans-serif; line-height: 14px; cursor: default; }
.paint-palette-dock:active { border-color: #555 #fff #fff #555; }
.paint-palette.is-docked .paint-palette-dock { margin-left: 0; }
.paint-palette-minimize, .paint-palette-close { flex: 0 0 20px; width: 20px; height: 20px; min-width: 0; margin: 0; padding: 0; border: 2px solid; border-color: #fff #555 #555 #fff; border-radius: 0; background: #c0c0c0; color: #111; box-shadow: none; font: bold 14px Arial, sans-serif; line-height: 14px; cursor: default; }
.paint-palette-minimize:active, .paint-palette-close:active { border-color: #555 #fff #fff #555; }
.paint-palette-minimize { position: relative; font-size: 0; line-height: 0; }
.paint-palette-minimize::before { content: ''; position: absolute; inset: 0; margin: auto; width: 7px; height: 1px; background: currentColor; }
.paint-palette.is-minimized .paint-palette-minimize::before { box-sizing: border-box; height: 6px; border: 1px solid currentColor; background: transparent; }
.paint-palette-minimize:focus-visible { outline: 1px dotted #111; outline-offset: -4px; }
.paint-palette-body { max-height: calc(100vh - 82px); max-height: calc(100dvh - 82px); padding: 8px; overflow: auto; }
.paint-palette-body[hidden] { display: none !important; }
.paint-palette .control-frame { width: 100%; margin: 0; padding: 5px 3px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.paint-palette .control-frame > .control-frame-label,
.paint-palette .frame-collapse-btn { display: none !important; }
.paint-palette .control-frame.collapsed::after { display: none; }
.paint-palette .stage-current-sample-frame,
.paint-palette .stage-swatches,
.paint-palette .stage-filament,
.paint-palette .stage-test { width: 320px !important; max-width: 100% !important; margin: 0 !important; grid-area: auto !important; }
.paint-palette .stage-swatches { height: auto !important; transform: none !important; display: flex; flex-direction: column; gap: 5px; padding-bottom: 4px; }
.paint-palette .stage-swatches .stage-gradient-mini { position: relative; top: auto; left: auto; width: 100%; margin-top: 0; flex: 0 0 18px; }
.paint-palette .stage-swatches .stage-gradient-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; width: 100%; }
.paint-palette .stage-swatches .stage-gradient-row .stage-gradient-mini { width: 100% !important; max-width: 100% !important; min-width: 0; height: 18px; }
.paint-palette .stage-gradient-row > .paint-tool-link { height: 22px; }
.paint-palette .stage-test { height: 78px !important; }
.paint-palette[data-palette-key="test"] .paint-palette-body { padding-bottom: 19px; }
.paint-palette .stage-palette-menu { z-index: 2000; border-radius: 0; border: 2px solid; border-color: #fff #555 #555 #fff; background: #c0c0c0; }
.paint-palette .stage-palette-menu button { border-radius: 0; font-size: 11px; }
.paint-palette .stage-palette-menu button.active { background: #000080; }
.paint-palette .stage-palette-btn.active { background: #202020; border-color: #202020; color: #fff; }
/* Keep explicit action names readable inside the existing tool widths. */
.paint-palette .stage-current-sample-frame { height: 78px; grid-template-columns: 54px 63px minmax(52px,66px) minmax(42px,54px) minmax(40px,48px) !important; grid-template-rows: 78px; gap: 0 !important; justify-content: space-between !important; }
.paint-palette .stage-current-sample-frame .paint-quick-brush-link { width: 100%; max-width: 48px; height: 34px; padding: 2px; white-space: normal; line-height: 1.15; }
.paint-palette .brush-helper-buttons.stage-sample-controls { width: 100%; max-width: 66px; height: 72px; grid-template-rows: 10px 28px 26px; gap: 4px; }
.paint-palette .stage-sample-controls .mode-radio { height: 100%; }
.paint-palette .stage-brush-sliders { width: 100%; max-width: 54px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.paint-palette .stage-brush-slider-wrap { width: 100%; max-width: 24px; }
.paint-palette .stage-side-actions, .paint-palette .stage-side-action-btn { width: 72px; }
.paint-palette .stage-side-actions { height: 28px; grid-template-rows: 28px !important; gap: 0 !important; }
.paint-palette .stage-swatches .swatches-toolbar { display: flex; width: 100%; height: auto; min-height: 28px; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px !important; }
.paint-palette .paint-related-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.paint-palette .paint-tool-link { width: auto; min-width: 0; height: 26px; padding: 0 6px; border: 1px solid #8f8778; border-radius: 7px; background: #f2efe7; color: #202020; font-size: 10px; font-weight: normal; white-space: nowrap; }
.paint-palette .paint-tool-link[aria-pressed="true"] { background: #d2cab9; border-color: #777; box-shadow: inset 1px 1px 1px #7778; }
.paint-palette .paint-tool-link:focus-visible { outline: 1px dotted #111; outline-offset: -3px; }
.paint-palette .stage-model-button { display: grid; grid-template-rows: 48px 12px; gap: 3px; align-items: center; justify-items: center; width: 54px; height: 66px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #777; font-size: 10px; font-weight: normal; line-height: 1; cursor: pointer; }
.paint-palette .stage-model-button img { display: block; width: 44px; height: 44px; border-radius: 7px; object-fit: cover; }
.paint-palette .stage-model-button:hover, .paint-palette .stage-model-button:focus, .paint-palette .paint-color-button:hover { outline: none; }
.paint-palette .stage-model-button:hover img, .paint-palette .stage-model-button[aria-pressed="true"] img { box-shadow: 0 0 0 1px #7778; }
.paint-palette .stage-model-button:focus-visible img { outline: 1px dotted #111; outline-offset: 2px; box-shadow: none; }
.paint-palette .paint-color-button { cursor: pointer; }
.paint-palette .paint-color-button:focus-visible { outline: 2px solid #000080; outline-offset: 2px; }
.paint-palette .palette-map-body button { box-sizing: border-box; min-width: 0; min-height: 24px; height: 24px; padding: 2px 6px; border-radius: 4px; font: 11px Tahoma, 'Segoe UI', sans-serif; line-height: 18px; white-space: nowrap; }
.paint-palette .palette-file-actions, .paint-palette .palette-export-actions { display: grid; grid-template-columns: auto repeat(2,minmax(0,1fr)); align-items: center; gap: 4px; font-size: 11px; }
.paint-palette .palette-file-actions { margin-bottom: 4px; }
.paint-palette .palette-file-actions button, .paint-palette .palette-export-actions button { width: 100%; }
.paint-palette .palette-related-tools { gap: 4px; margin: 6px 0 0; }
.paint-palette .palette-related-tools button { min-height: 22px; height: 22px; font-size: 10px; line-height: 16px; }
.paint-palette .palette-edit-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; }
.paint-palette .palette-edit-actions { grid-template-columns: 26px 26px 62px; gap: 4px; }
.paint-palette .palette-edit-row .mode-radio { min-width: 60px; }
.paint-palette .palette-export-actions { margin: 0 0 6px; }
.paint-palette .palette-load-btn { background: #f2efe7; border-color: #8f8778; }
.paint-palette .stage-filament .brush-palette-row, .paint-palette .stage-filament .filament-label-row { grid-template-columns: 78px minmax(0,1fr); }
.paint-palette .draw-frame .brush-control-row, .paint-palette .draw-frame .gradient-speed-control { grid-template-columns: 118px minmax(52px,1fr) 86px; }
.paint-palette .draw-frame .brush-reset-btn { width: 86px; }
.paint-palette .brush-mode-switch { grid-template-columns: repeat(3,minmax(0,1fr)); }
.paint-palette .smooth-pickup-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; }
.paint-palette .smooth-pickup-row label { flex: 0 0 auto; }
.paint-palette .smooth-pickup-row select { flex: 1; min-width: 0; height: 26px; padding: 2px 4px; border: 1px solid #8f8778; border-radius: 4px; background: #f2efe7; color: #202020; font: inherit; }
.paint-palette .draw-frame .brush-control-row input[type="range"], .paint-palette .draw-frame .gradient-speed-control input[type="range"] { width: 100%; min-width: 0; left: 0; }
.paint-palette #setBtn { width: 80px; }
.paint-palette .gradients-frame .gradient-param-row { grid-template-columns: 82px minmax(0,1fr) 82px; gap: 5px; font-size: 11px; }
.paint-palette .gradients-frame .gradient-param-row input[type="number"] { box-sizing: border-box; width: 100%; min-width: 0; height: 26px; font-size: 11px; text-align: right; }
.paint-palette .torsion-endpoints { margin: 0 0 4px; text-align: center; color: #555; font: 10px Tahoma, 'Segoe UI', sans-serif; }
.paint-palette .torsion-option-row { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 5px; align-items: center; font: 11px Tahoma, 'Segoe UI', sans-serif; color: #444; }
.paint-palette .torsion-option-row select { box-sizing: border-box; width: 100%; min-width: 0; height: 26px; padding: 2px 4px; border: 1px solid #8f8778; border-radius: 4px; background: #f2efe7; color: #202020; font: inherit; }
.paint-palette .gradient-advanced-body.path-inactive .torsion-endpoints { opacity: .42; }
.paint-palette .gradient-advanced-body.path-inactive .torsion-option-row select { cursor: not-allowed; }
.paint-palette .gradient-main-row, .paint-palette .gradient-playback-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 5px; margin-bottom: 6px; font: 11px Tahoma, 'Segoe UI', sans-serif; }
.paint-palette .gradient-main-row select, .paint-palette .gradient-playback-row select { box-sizing: border-box; min-width: 0; width: 100%; height: 26px; padding: 2px 4px; border: 1px solid #8f8778; border-radius: 4px; background: #f2efe7; color: #202020; font: inherit; }
.paint-palette .gradient-check { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.paint-palette .gradient-check input { width: 13px; height: 13px; margin: 0; accent-color: #000080; }
.paint-palette .gradient-use-button { box-sizing: border-box; width: 92px; min-width: 0; height: 26px; margin: 0; padding: 2px 5px; border: 2px solid; border-color: #fff #777 #777 #fff; border-radius: 2px; background: #f2efe7; color: #202020; box-shadow: none; font: 11px Tahoma, 'Segoe UI', sans-serif; white-space: nowrap; }
.paint-palette .gradient-use-button[aria-pressed="true"] { border-color: #00004d #7585c4 #7585c4 #00004d; background: #000080; color: #fff; }
.paint-palette .gradient-use-button:focus-visible { outline: 1px dotted currentColor; outline-offset: -5px; }
.paint-palette .gradients-speed-row { margin-bottom: 6px; }
.paint-palette .gradients-frame .path-gradient-picker { width: 100%; margin: 0 0 7px; }
.paint-palette #pathGradientBar { display: block; box-sizing: border-box; width: 100%; height: 38px; border: 1px solid #666; border-radius: 2px; cursor: crosshair; }
.paint-palette #pathGradientSlider { display: block; width: 100%; margin: 3px 0 0; }
.paint-palette .gradient-path-model { margin: -2px 0 7px; color: #555; font: 10px Tahoma, 'Segoe UI', sans-serif; }
.paint-palette #gradientStopsControls[hidden], .paint-palette #gradientTorsionControls[hidden] { display: none !important; }
.paint-palette .gradient-stop-heading { display: flex; justify-content: space-between; margin: 0 2px 3px; font: 10px Tahoma, 'Segoe UI', sans-serif; color: #444; }
.paint-palette .gradient-stop-list { display: grid; gap: 3px; max-height: 145px; padding: 3px; overflow-y: auto; border: 1px solid; border-color: #777 #fff #fff #777; background: #d5d5d5; }
.paint-palette .gradient-stop-row { display: grid; grid-template-columns: minmax(0,1fr) 67px; gap: 5px; align-items: center; }
.paint-palette .gradient-stop-color { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: 26px; padding: 2px 5px; border: 1px solid #999; border-radius: 2px; background: #efefef; color: #222; font: 11px Tahoma, 'Segoe UI', sans-serif; text-align: left; box-shadow: none; }
.paint-palette .gradient-stop-color[aria-pressed="true"] { border-color: #000080; background: #e1e5f4; box-shadow: inset 0 0 0 1px #000080; }
.paint-palette .gradient-stop-chip { flex: 0 0 25px; height: 16px; border: 1px solid #777; }
.paint-palette .gradient-stop-position { box-sizing: border-box; width: 100%; min-width: 0; height: 26px; padding: 2px 3px; border: 1px solid #999; border-radius: 2px; font: 11px Tahoma, 'Segoe UI', sans-serif; text-align: right; }
.paint-palette .gradient-stop-actions { display: flex; gap: 4px; margin-top: 5px; }
.paint-palette .gradient-stop-actions button, .paint-palette .gradient-from-swatches, .paint-palette .gradient-output-row button { box-sizing: border-box; min-width: 0; height: 25px; padding: 2px 6px; border: 1px solid #8f8778; border-radius: 3px; background: #f2efe7; color: #202020; font: 11px Tahoma, 'Segoe UI', sans-serif; box-shadow: none; }
.paint-palette .gradient-stop-actions #gradientSetStopBtn { margin-left: auto; }
.paint-palette .gradient-from-swatches { margin-top: 5px; }
.paint-palette .gradient-gamut-row { margin-top: 7px; }
.paint-palette .gradient-stop-toolbar { display: grid; grid-template-columns: auto auto minmax(0,1fr) minmax(0,1fr); gap: 4px; }
.paint-palette .gradient-stop-toolbar button { width: 100%; height: 24px; padding: 1px 4px; font-size: 10px; line-height: 10px; white-space: normal; }
.paint-palette .gradient-stop-toolbar #gradientSetStopBtn { margin-left: 0; }
.paint-palette .gradient-stop-toolbar .gradient-from-swatches { margin-top: 0; }
.paint-palette .gradient-output-row { grid-template-columns: 40px minmax(0,1fr) auto; }
.paint-palette .gradient-output-row select, .paint-palette .gradient-output-row button { height: 24px; }
.paint-palette .gradient-output-row button { font-size: 10px; white-space: nowrap; }
.paint-palette .gradient-related-tools { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 6px; }
.paint-palette .gradient-related-tools .paint-tool-link { min-width: 0; height: 23px; padding: 0 5px; font-size: 10px; }
.paint-palette .gradient-stop-actions button:disabled { color: #777; }
.paint-palette .gradient-stop-color:focus-visible, .paint-palette .gradient-stop-actions button:focus-visible, .paint-palette .gradient-from-swatches:focus-visible, .paint-palette .gradient-output-row button:focus-visible { outline: 1px dotted #111; outline-offset: -4px; }
.paint-palette .stage-filament .filament-top-action.paint-tool-link { height: 20px; padding: 0 1px; border-radius: 6px; font-size: 9px; }
.paint-palette .file-panel-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 6px; }
.paint-palette .file-load-stack, .paint-palette .file-run-stack { width: 100%; }
.paint-palette .file-load-stack button, .paint-palette .file-run-stack button { width: 100%; min-width: 0; }
.paint-palette .file-load-stack { display: grid; grid-template-columns: auto repeat(2,minmax(0,1fr)); align-items: center; gap: 4px; grid-column: 1 / -1; grid-row: 1; font-size: 11px; }
.paint-palette .file-load-stack button { box-sizing: border-box; min-height: 24px; height: 24px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; font: 11px Tahoma, 'Segoe UI', sans-serif; line-height: 18px; text-transform: none; }
.paint-palette .auto-match-options { display: flex; flex-wrap: wrap; grid-column: 1 / -1; grid-row: 2; column-gap: 10px; row-gap: 2px; }
.paint-palette .auto-match-option { display: flex; align-items: center; gap: 5px; min-height: 18px; font: 11px Tahoma, 'Segoe UI', sans-serif; }
.paint-palette .auto-match-option input { flex: 0 0 13px; width: 13px; height: 13px; margin: 0; accent-color: #000080; }
.paint-palette .file-run-stack { grid-column: 2; grid-row: 3; }
.paint-palette .canvas-background-controls { margin: 7px 5px 3px; padding-top: 6px; border-top: 1px solid #999; font: 11px Tahoma, 'Segoe UI', sans-serif; }
.paint-palette .canvas-background-heading { margin-bottom: 5px; }
.paint-palette .canvas-background-load-row { display: grid; grid-template-columns: auto repeat(2,minmax(0,1fr)); align-items: center; gap: 4px; }
.paint-palette .canvas-background-controls button { box-sizing: border-box; min-width: 0; height: 24px; padding: 2px 5px; font: inherit; white-space: nowrap; }
.paint-palette .canvas-background-info-row { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.paint-palette #canvasBackgroundName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #444; }
.paint-palette .canvas-background-status { margin-top: 4px; color: #444; line-height: 1.3; }
.paint-palette .canvas-background-status:empty { display: none; }
.paint-palette .canvas-background-opacity-row { display: grid; grid-template-columns: auto minmax(0,1fr) 34px; align-items: center; gap: 5px; margin-top: 6px; }
.paint-palette .canvas-background-opacity-row input { width: 100%; min-width: 0; margin: 0; }
.paint-palette .canvas-background-opacity-row output { text-align: right; }
.paint-palette .auto-palette-select-wrap { grid-column: 1; grid-row: 3; }
.paint-dock { display: flex; position: fixed; top: var(--paint-menu-height); bottom: 0; left: 0; z-index: 15; width: var(--paint-dock-width); padding: 0; border: 0; border-right: 2px solid #808080; background: #b9b9b9; flex-direction: column; }
.menu-layout.dock-disabled > .paint-dock, .paint-dock[hidden] { display: none; }
.paint-dock-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px 0; overflow: auto; scrollbar-gutter: stable; scrollbar-width: thin; align-items: center; }
.menu-layout .paint-dock .paint-palette.is-docked { position: relative; top: auto !important; left: auto !important; flex: 0 0 auto; width: 344px; max-width: 100%; margin: 0; box-shadow: 1px 1px 0 #0003; }
.paint-dock .paint-palette.is-docked .paint-palette-body { max-height: none; }
.paint-dock .paint-palette-titlebar { cursor: grab; }
.paint-dock.is-drop-target { outline: 2px solid #000080; outline-offset: -3px; }
.menu-layout .paint-palette.is-dragging { opacity: 0.92; }
@media(max-width: 700px) {
  .menu-layout > .stage { left: 0; width: 100%; }
  .menu-layout > .panel, .menu-layout.panel-hidden > .panel { z-index: 60; }
  .paint-dock-toggle { display: block; }
  .paint-dock { display: none; z-index: 50; width: min(var(--paint-dock-width),calc(100vw - 12px)); box-shadow: 3px 0 0 #0004; }
  .dock-open:not(.dock-disabled) > .paint-dock { display: flex; }
}
@media(max-width: 560px) {
  .paint-menu-bar { gap: 0; padding-left: 3px; padding-right: 3px; font-size: 11px; }
  .paint-menu > summary { padding-left: 3px; padding-right: 3px; }
  .paint-menu-bar .save-status-live { position: absolute; top: 36px; right: 8px; background: #c0c0c0; }
}
@media(max-width: 380px) {
  .paint-menu-bar { gap: 0; font-size: 11px; }
  .paint-menu > summary { padding-left: 2px; padding-right: 2px; }
  .paint-dock-toggle { margin-right: 2px; padding-left: 3px; padding-right: 3px; }
}