.command-bar { gap:5px; padding-inline:7px; }
.bar-drawing { gap:5px; }
.geometry-actions { display:flex; align-items:center; gap:0; }
.command-bar .icon-button { width:37px; min-width:37px; height:58px; padding:5px 3px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.command-bar .icon-button svg { width:23px; height:23px; }
.bar-group { position:relative; gap:0; padding:0 0 14px; border:0; background:transparent; box-shadow:none; }
.bar-group::before { content:''; position:absolute; inset:0 0 14px; border:1px solid #bfc5d0; border-radius:5px; background:#ffffff75; pointer-events:none; }
.bar-group::after { position:absolute; bottom:0; left:0; right:0; font-size:10px; line-height:13px; text-align:center; color:#5b6677; }
.quick-color,.quick-width,.quick-eraser,.command-bar .more-colors,.bar-group .icon-button { position:relative; width:34px; min-width:34px; height:40px; padding:4px; }
.quick-color span { width:22px; height:22px; }
.quick-eraser span { max-width:22px; max-height:22px; }
.view-actions { padding-left:5px; flex:0 0 auto; }
.view-actions .icon-button { width:45px; min-width:45px; }
.bar-advanced { flex:0 1 auto; }
.page-counter { min-width:35px; font-size:10px; }
.tool-dock { display:flex; flex-direction:column; left:12px; top:80px; right:auto; bottom:auto; transform:none; padding:4px; overflow:auto; max-width:calc(100vw - 16px); border-radius:9px; }
.tool-buttons { display:flex; flex-direction:column; gap:0; }
.tool-dock .icon-button { width:42px; min-width:42px; height:40px; padding:8px; }
.dock-grip { display:grid; place-items:center; flex:0 0 auto; width:42px; height:18px; padding:0; border:0; background:transparent; color:#8791a3; cursor:move; touch-action:none; }
.dock-grip svg { width:16px; height:13px; }
body[data-orientation=horizontal] .tool-dock,body[data-orientation=horizontal] .tool-buttons { flex-direction:row; }
body[data-orientation=horizontal] .dock-grip { width:20px; height:40px; }
body[data-dock=free] .tool-dock { left:12px; right:auto; top:80px; bottom:auto; transform:none; max-height:calc(100dvh - 150px); }
.pages-tab { top:auto; bottom:calc(var(--command-height) + 7px); height:38px; }
.library-tab { display:none; }
.instruments-panel { top:auto; bottom:calc(var(--command-height) + 12px); left:50%; right:auto; transform:translateX(-50%); width:auto; max-width:calc(100vw - 20px); display:grid; grid-template-columns:repeat(4,52px); gap:6px; padding:12px; border:1px solid var(--line); border-radius:12px; }
.instruments-panel .icon-button { width:52px; min-width:52px; height:52px; }
.shape-panel { display:grid; grid-template-columns:repeat(4,52px); gap:6px; }
.shape-panel .icon-button { width:52px; min-width:52px; height:52px; }
.settings-panel { width:420px; }
.large-color-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; }
.large-color-grid button { width:100%; height:28px; padding:0; border:1px solid #26324720; border-radius:3px; }
.large-color-grid button:hover { outline:2px solid var(--accent); outline-offset:1px; }
.size-panel { position:fixed; z-index:14; bottom:calc(var(--command-height) + 14px); left:50%; transform:translateX(-50%); width:350px; max-width:calc(100vw - 24px); max-height:calc(100dvh - var(--command-height) - 72px); overflow:auto; padding:14px; border-radius:12px; }
.panel-heading { display:flex; align-items:center; gap:4px; margin-bottom:8px; font-size:14px; font-weight:600; }
.panel-heading>span { margin-right:auto; }
.panel-heading .icon-button { width:38px; min-width:38px; height:38px; padding:8px; }
.size-current { display:flex; align-items:center; gap:10px; margin:10px 0; font-size:12px; color:var(--muted); }
.size-current input[type=number] { width:76px; margin-left:auto; min-height:40px; border:1px solid var(--line); border-radius:7px; padding:6px; }
.size-current input[type=range],.size-panel>input[type=range] { min-width:0; flex:1; width:100%; accent-color:var(--accent); height:32px; }
.size-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:8px 0 0; padding:8px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:12px; }
.size-presets label { display:grid; gap:4px; }
.size-presets input { min-width:0; width:100%; min-height:40px; border:1px solid var(--line); border-radius:7px; padding:6px; }
.size-current input[type=color] { margin-left:auto; width:62px; height:40px; border:1px solid var(--line); border-radius:6px; background:white; }
.background-panel { width:340px; display:block; }
.background-choices { display:flex; justify-content:space-between; }
.board-paper[data-background=grid] { background-image:linear-gradient(var(--grid-major-color) var(--grid-width),transparent var(--grid-width)),linear-gradient(90deg,var(--grid-major-color) var(--grid-width),transparent var(--grid-width)),linear-gradient(var(--grid-color) var(--grid-width),transparent var(--grid-width)),linear-gradient(90deg,var(--grid-color) var(--grid-width),transparent var(--grid-width));background-size:var(--grid-major-step) var(--grid-major-step),var(--grid-major-step) var(--grid-major-step),var(--grid-step) var(--grid-step),var(--grid-step) var(--grid-step); }
.board-paper[data-background=ruled] { background-image:linear-gradient(var(--grid-color) var(--grid-width),transparent var(--grid-width));background-size:var(--grid-step) var(--grid-step); }
.preferences-dialog header,.library-dialog>header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preferences-dialog h2,.library-dialog h2,#nameTitle { margin:0; font-size:20px; font-weight:600; }
.preferences-dialog fieldset { border:1px solid var(--line); border-radius:10px; margin:15px 0; padding:12px; }
.preferences-dialog legend { color:var(--muted); font-size:13px; }
.board-install-dialog header { display:flex; align-items:center; gap:12px; }
.board-install-dialog h2 { margin:0; font-size:19px; }
.board-install-dialog section { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.board-install-dialog h3 { margin:0 0 6px; font-size:15px; }
.board-install-dialog p { margin:6px 0; line-height:1.5; color:var(--muted); }
.board-install-dialog section a { color:var(--accent); font-weight:700; }
.board-install-dialog .primary { min-height:40px; padding:8px 14px; border-radius:8px; font:inherit; }
.board-update { display:flex; align-items:center; gap:9px; margin-left:auto; padding-left:6px; flex:none; color:var(--muted); font-size:12px; }
.board-update button { min-height:34px; padding:6px 10px; border:1px solid #c9c3ff; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-weight:700; }
.board-update button:disabled { opacity:.6; cursor:wait; }
.board-topbar:has(.board-update:not([hidden])) .board-identity { flex:1; overflow:hidden; }
@media(max-width:580px) {
  .board-update span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .board-topbar:has(.board-update:not([hidden])) .board-mark { display:none; }
  .board-topbar:has(.board-update:not([hidden])) #sessionTitle { flex:1; min-width:0; }
}
.board-paper[data-extensible=true] { box-shadow:none; background:transparent!important; }
.workspace-background { position:absolute; inset:0; pointer-events:none; background-color:#fff; }
.workspace-background[data-background=dark] { background-color:#172131; }
.workspace-background[data-background=grid] { background-image:linear-gradient(var(--grid-major-color) var(--grid-width),transparent var(--grid-width)),linear-gradient(90deg,var(--grid-major-color) var(--grid-width),transparent var(--grid-width)),linear-gradient(var(--grid-color) var(--grid-width),transparent var(--grid-width)),linear-gradient(90deg,var(--grid-color) var(--grid-width),transparent var(--grid-width)); background-size:var(--grid-major-step) var(--grid-major-step),var(--grid-major-step) var(--grid-major-step),var(--grid-step) var(--grid-step),var(--grid-step) var(--grid-step); }
.workspace-background[data-background=ruled] { background-image:linear-gradient(var(--grid-color) var(--grid-width),transparent var(--grid-width)); background-size:var(--grid-step) var(--grid-step); }
.board-paper[data-extensible=true] .annotation-layer { overflow:visible; }
.preferences-dialog label { display:inline-flex; gap:8px; margin:5px 20px 5px 0; font-size:14px; align-items:center; }
#nameInput,#moveFolder { width:100%; margin-top:15px; min-height:44px; border:1px solid var(--line); border-radius:8px; padding:8px; }
.library-dialog { width:calc(100vw - clamp(36px, 6vw, 80px)); max-width:1400px; height:calc(100dvh - clamp(40px, 8dvh, 72px)); max-height:none; padding:16px; overflow:hidden; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:#f8f9fc; }
.library-dialog[open] { display:flex; flex-direction:column; }
.library-dialog::backdrop { background:#26324770; }
.library-dialog > header { flex:none; padding-bottom:12px; border-bottom:1px solid var(--line); }
.library-return { display:flex; align-items:center; gap:8px; min-height:40px; padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); font:inherit; font-size:13px; }
.library-return span { display:flex; }
.library-return svg { width:20px; height:20px; color:var(--accent); }
.library-return:hover { background:var(--accent-soft); }
.library-content { display:flex; flex:1; min-height:0; overflow:hidden; gap:20px; padding-top:14px; }
.library-folder-pane { flex:0 0 216px; display:flex; flex-direction:column; min-height:0; padding-right:12px; border-right:1px solid var(--line); }
.library-folder-pane h3 { margin:2px 8px 8px; color:var(--muted); font-size:13px; font-weight:600; }
.library-folders { min-height:0; overflow:auto; }
.library-folders button { display:flex; width:100%; gap:9px; align-items:center; min-height:44px; border:0; border-radius:7px; padding:8px; background:transparent; color:var(--muted); text-align:left; }
.library-folders svg { width:20px; height:20px; flex:0 0 20px; }
.library-folders span { overflow-wrap:anywhere; font-size:13px; }
.library-folders button:hover { background:#eef0f7; }
.library-folders [aria-current=true] { background:var(--accent-soft); color:var(--accent); }
.library-content>section { flex:1; min-width:0; overflow:auto; }
.library-path { margin:2px 0 14px; overflow-wrap:anywhere; font-size:16px; }
.library-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; align-items:start; }
.library-card { min-width:0; display:flex; flex-direction:column; gap:7px; border:1px solid var(--line); border-radius:12px; padding:9px; background:white; color:var(--ink); text-align:left; }
.library-card:hover { border-color:#b3a8ee; }
.library-card[aria-pressed=true] { border-color:#b3a8ee; background:var(--accent-soft); }
.library-cover { display:grid; place-items:center; width:100%; height:122px; border:1px solid var(--line); border-radius:7px; background:#f4f5fa; overflow:hidden; }
.library-cover svg { width:48px; height:48px; color:var(--accent); }
.library-cover img { width:100%; height:100%; object-fit:contain; }
.library-card strong { width:100%; overflow-wrap:anywhere; font-size:13px; line-height:1.35; font-weight:600; }
.library-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.library-card small { font-size:11px; color:var(--muted); }
.library-card .library-current { padding:2px 6px; border-radius:6px; background:#e0f1e7; color:#24613b; }
.library-empty { padding:18px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); font-size:14px; }
.library-toolbar { display:flex; flex-wrap:wrap; align-items:stretch; gap:4px 10px; flex:none; max-height:40dvh; overflow:auto; padding-top:8px; margin-top:8px; border-top:1px solid var(--line); }
.library-toolbar-group { display:flex; gap:4px; padding-right:10px; border-right:1px solid var(--line); }
.library-toolbar-group:last-child { padding-right:0; border-right:0; }
.library-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:88px; min-height:60px; padding:6px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink); font:inherit; font-size:12px; line-height:1.2; text-align:center; }
.library-button svg { width:22px; height:22px; flex:none; color:var(--accent); }
.library-button:is(:hover,[aria-expanded=true]):not(:disabled) { border-color:#d5cef4; background:var(--accent-soft); }
.library-button:disabled { cursor:default; opacity:.46; }
.library-button[data-library-action=trash] svg { color:#a33b49; }
.library-options { flex:none; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:white; }
.library-option-group { display:flex; flex-wrap:wrap; gap:4px; }
.library-options .library-button { flex-direction:row; width:auto; min-height:38px; padding:6px 10px; }
#libraryStatus { flex:none; color:var(--muted); margin:5px 0; font-size:13px; }
#libraryStatus:empty { display:none; }
#libraryStatus[data-error] { color:#b13d3d; }
.virtual-keyboard { padding-top:12px; display:grid; gap:4px; }
.virtual-keyboard>div { display:flex; gap:3px; justify-content:center; }
.virtual-keyboard button { min-width:0; flex:1; height:36px; padding:0; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#f3f5f9; font-size:14px; }
body[data-bar=top] .board-topbar { order:-2; }
body[data-bar=top] .command-bar { order:-1; border-top:0; border-bottom:1px solid #bdc4ce; }
body[data-bar=top] :is(.settings-panel,.shape-panel,.instruments-panel,.background-panel,.size-panel) { top:calc(48px + var(--command-height) + 10px); bottom:auto; max-height:calc(100dvh - var(--command-height) - 78px); }
body[data-bar=top] .pages-tab { bottom:8px; }
@media (max-width:1150px) { .bar-drawing { gap:5px; } .command-bar .icon-button { height:44px; } .command-bar .icon-button small { font-size:8px; } .bar-group { padding-bottom:11px; } .bar-group::before { bottom:11px; } .bar-group::after { font-size:9px; line-height:10px; } .quick-color,.quick-width,.quick-eraser,.command-bar .more-colors,.bar-group .icon-button { height:32px; } .bar-command { gap:3px; } .bar-advanced { flex:1; justify-content:center; overflow-x:auto; } }
@media (max-width:650px) {
  .board-identity { flex:1; } #sessionTitle { width:120px; max-width:29vw; }
  .bar-drawing { gap:6px; } .quick-color,.quick-width,.quick-eraser,.command-bar .more-colors,.bar-group .icon-button { width:32px; min-width:32px; }
  .geometry-actions { flex:0 0 auto; } .quick-erasers { display:flex; flex:0 0 auto; }
  .view-actions .icon-button { width:38px; min-width:38px; padding:3px; }
  .bar-advanced { justify-content:flex-start; }
  .command-bar .icon-button small { font-size:7px; }
  .large-color-grid { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .settings-panel { width:calc(100vw - 24px); }
  .library-dialog { padding:10px; }
  .library-content { flex-direction:column; gap:10px; padding-top:8px; }
  .library-folder-pane { flex:none; padding:0; border:0; }
  .library-folder-pane h3 { display:none; }
  .library-folders { display:flex; gap:4px; overflow-x:auto; }
  .library-folders button { flex:none; width:auto; max-width:180px; min-height:36px; gap:5px; padding:5px 7px; }
  .library-folders span { font-size:12px; }
  .library-cards { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:7px; }
  .library-cover { height:96px; }
  .library-toolbar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .library-toolbar-group { display:contents; }
  .library-toolbar .library-button { width:100%; min-height:52px; padding:4px; gap:3px; }
  .library-options .library-button { flex:1 1 auto; }
}
.settings-panel { display:flex; flex-direction:column; width:390px; gap:10px; bottom:calc(var(--command-height) + 12px); max-height:calc(100dvh - var(--command-height) - 72px); overflow:hidden; }
.palette-actions { display:flex; align-items:center; flex:0 0 auto; gap:3px; }
.palette-actions .icon-button { width:36px; min-width:36px; height:36px; padding:8px; }
.palette-symbol { margin-right:auto; display:grid; place-items:center; color:var(--accent); }
.palette-symbol svg { width:25px; height:25px; }
.current-color { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.current-color>span { display:grid; place-items:center; color:#3569ad; }
.current-color svg { width:23px; height:23px; }
.current-color input { flex:1; min-width:0; height:35px; padding:2px; border:1px solid var(--line); border-radius:6px; background:white; cursor:pointer; }
.large-color-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:4px; min-height:60px; max-height:240px; overflow:auto; padding:3px; scrollbar-width:thin; }
.large-color-grid button { height:24px; min-height:24px; }
.large-color-grid button[aria-pressed=true] { outline:2px solid var(--accent); outline-offset:1px; }
.primary-color-defaults { display:flex; justify-content:space-evenly; gap:12px; flex:0 0 auto; padding-top:12px; border-top:1px solid var(--line); }
.primary-color-defaults label { position:relative; width:50px; height:46px; }
.primary-color-defaults input { width:100%; height:100%; border:1px solid var(--line); border-radius:8px; padding:4px; background:white; cursor:pointer; }
.primary-color-defaults label>span { position:absolute; pointer-events:none; right:-3px; bottom:-3px; width:19px; height:19px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:white; color:#536076; }
.primary-color-defaults svg { width:12px; height:12px; }
.grid-spacing input[type=range] { min-width:60px; width:0; flex:1; }
.grid-spacing output { min-width:48px; text-align:right; font-variant-numeric:tabular-nums; }
body[data-bar=top] .settings-panel { bottom:auto; }
/* Commandes centrées, accès au stylet et aux documents conservés aux extrémités. */
:root { --command-height:calc(72px + env(safe-area-inset-bottom)); }
.command-bar {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  align-content:start; gap:12px; flex:0 0 auto; height:auto; max-height:calc(100dvh - 140px);
  overflow:auto; scrollbar-width:thin;
}
.command-bar .icon-button { width:44px; min-width:44px; height:44px; padding:9px; justify-content:center; }
.command-bar .icon-button svg { width:25px; height:25px; }
.stylus-toggle-group { grid-column:1; justify-self:start; order:0; padding:0; }
.view-actions { grid-column:3; justify-self:end; order:0; padding-top:0; }
.bar-center { grid-column:2; display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; }
.bar-drawing { order:0; width:auto; flex:0 1 auto; flex-wrap:wrap; justify-content:center; gap:4px 8px; }
.bar-group { position:relative; height:44px; padding:0; flex:0 0 auto; }
.bar-group::before { inset:0; }
.bar-group::after { content:none; }
.bar-group>.icon-button,.quick-color,.quick-width,.quick-eraser { width:34px; min-width:34px; height:44px; padding:4px; }
.bar-group>.icon-button svg { width:20px; height:20px; }
.group-symbol { position:relative; display:grid; place-items:center; flex:0 0 24px; width:24px; height:40px; pointer-events:none; }
.group-symbol svg { width:20px; height:20px; }
.pen-symbol { color:#3569ad; }
.eraser-symbol { color:#9c5879; }
.geometry-actions { height:44px; padding:0; gap:2px; }
.geometry-actions .icon-button { height:44px; }
.bar-advanced { flex:0 0 auto; overflow:visible; padding:0; gap:3px; }
.page-sidebar .page-counter { display:block; margin:0 8px 8px; padding:0; max-width:none; height:24px; line-height:24px; text-align:center; background:transparent; }
@media (max-width:1779px) and (min-width:651px) {
  .command-bar { grid-template-rows:auto auto; gap:4px 8px; padding-inline:10px; }
  .bar-center { display:contents; }
  .bar-drawing { grid-row:1; grid-column:1/-1; justify-content:center; width:100%; gap:6px; }
  .bar-group>.icon-button,.quick-color,.quick-width,.quick-eraser { width:32px; min-width:32px; height:44px; }
  .geometry-actions .icon-button { width:40px; min-width:40px; }
  .stylus-toggle-group,.view-actions { grid-row:2; }
  .view-actions { grid-column:2/-1; justify-self:stretch; justify-content:flex-end; flex-wrap:wrap; }
}
@media (max-width:650px) {
  .command-bar { grid-template-rows:auto auto; gap:5px 6px; padding-inline:6px; }
  .bar-center { display:contents; }
  .bar-drawing { grid-column:1/-1; grid-row:1; flex-wrap:wrap; justify-content:center; width:100%; column-gap:6px; row-gap:4px; }
  .quick-color { width:32px; min-width:32px; height:44px; }
  .quick-width,.quick-eraser,#quickWidths>.icon-button,#quickErasers>.icon-button,#quickMarkers>.icon-button { width:28px; min-width:28px; height:44px; }
  #quickColors>.icon-button { width:32px; min-width:32px; height:44px; }
  .group-symbol { width:20px; flex-basis:20px; }
  .group-symbol svg { width:17px; height:17px; }
  .geometry-actions { gap:0; }
  .geometry-actions .icon-button { width:36px; min-width:36px; height:44px; }
  .quick-erasers { display:flex; }
  .stylus-toggle-group,.view-actions { grid-row:2; }
  .view-actions { grid-column:2/-1; justify-self:stretch; justify-content:flex-end; flex-wrap:wrap; }
  .bar-advanced .icon-button,.view-actions .icon-button,.stylus-toggle-group .icon-button { width:36px; min-width:36px; height:40px; padding:7px; }
  .settings-panel { width:calc(100vw - 24px); }
  .large-color-grid { grid-template-columns:repeat(10,minmax(0,1fr)); }
}

.marker-symbol { color:#a87a24; }
.quick-marker { color:var(--marker-color,var(--ink)); }
.quick-marker svg { stroke-linecap:butt; opacity:.55; }
.quick-tools { gap:0; padding-left:0; border-left:0; }
.quick-tools .icon-button { width:40px; min-width:40px; }
@media (max-width:650px) {
  .quick-tools { padding-left:0; border-left:0; }
  .quick-tools .icon-button { width:32px; min-width:32px; }
}
@media (max-width:383px) {
  .bar-advanced .icon-button,.view-actions .icon-button,.stylus-toggle-group .icon-button { width:32px; min-width:32px; }
}

.instrument-font-control { grid-column:1/-1; display:flex; align-items:center; gap:9px; margin-bottom:5px; color:var(--muted); }
.instrument-font-control svg { width:22px; height:22px; flex:0 0 auto; }
.instrument-font-control input { width:115px; min-width:0; height:32px; accent-color:var(--accent); }
.instrument-font-control output { min-width:44px; font-size:12px; text-align:right; }
.axis-settings { flex:1 0 100%; padding:5px; }
.axis-range { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.axis-range label { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
.axis-range input { min-width:0; width:100%; padding:5px; min-height:34px; border:1px solid var(--line); border-radius:6px; }
.axis-range input[aria-invalid=true] { border-color:#cf586d; }
.axis-slider { display:grid; grid-template-columns:145px minmax(40px,1fr) 48px; align-items:center; gap:7px; font-size:11px; color:var(--muted); margin-top:5px; }
.axis-slider input { width:100%; min-width:0; height:28px; accent-color:var(--accent); }
.axis-slider output { font-variant-numeric:tabular-nums; text-align:right; }
@media (max-width:650px) {
  #geometryActions,#quickTools { display:contents; }
  .axis-slider { grid-template-columns:122px minmax(25px,1fr) 42px; font-size:10px; }
  .axis-range label { flex-direction:column; align-items:flex-start; }
}

/* Les fenêtres suivent leur icône, y compris sur la palette mobile. */
.anchored-panel,body[data-bar=top] .anchored-panel { position:fixed; right:auto; bottom:auto!important; transform:none!important; z-index:50; overflow:auto; overscroll-behavior:contain; }
.dock-quick-panel { display:flex; align-items:center; gap:4px; padding:6px; border-radius:10px; }
.dock-size-choice { display:grid; place-items:center; width:44px; height:44px; padding:5px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ink); }
.dock-size-choice:hover,.dock-size-choice:focus-visible { color:var(--accent); background:var(--accent-soft); }
.dock-size-choice svg { width:30px; height:24px; }
.dock-size-choice>span { border-radius:50%; background:currentColor; }
.dock-quick-panel .icon-button { width:40px; min-width:40px; height:44px; padding:8px; }
.dock-color-dot { display:block; width:22px; height:22px; border:1px solid #52617a55; border-radius:50%; background:var(--current-color,#263247); box-shadow:inset 0 0 0 2px #ffffff35; }
.axis-panel { width:400px; padding:10px; border-radius:12px; }
.axis-panel .panel-heading { margin-bottom:2px; }
.segment-panel { width:280px; padding:12px; border-radius:12px; }
.segment-panel .panel-heading { margin-bottom:4px; }
.segment-panel .panel-heading strong { font-size:14px; }
.segment-preview { display:block; width:100%; height:64px; margin-bottom:8px; border-radius:7px; background:#f2f4fa; color:var(--ink); }
.segment-ends { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px 10px; font-size:13px; }
.segment-ends select { min-width:0; min-height:36px; padding:4px 7px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--ink); font:inherit; }
.segment-size { display:flex; align-items:center; gap:7px; margin-top:10px; min-height:32px; font-size:13px; }
.segment-size input { flex:1; min-width:0; accent-color:var(--accent); }
.segment-size output { min-width:40px; text-align:right; font-variant-numeric:tabular-nums; }
body:has(#segmentPanel:not([hidden])) #selectionActions { visibility:hidden; }
.panel-symbol svg { width:24px; height:24px; }
.axis-confirm { display:flex; justify-content:flex-end; padding-top:8px; }
.axis-confirm .icon-button { width:42px; min-width:42px; height:42px; padding:9px; }
.instrument-properties { grid-column:1/-1; display:flex; align-items:center; justify-content:center; padding-top:4px; gap:7px; }
.instrument-properties:empty { display:none; }
.instrument-properties .icon-button { width:40px; min-width:40px; height:40px; }
.command-toggle { position:fixed; z-index:45; right:8px; bottom:calc(var(--command-height) - 1px); display:grid; place-items:center; width:32px; height:22px; padding:3px; border:1px solid #c5ccd8; border-radius:8px 8px 0 0; background:#f8f9fc; color:var(--muted); box-shadow:0 -2px 7px #26324709; }
.command-toggle::before { content:''; position:absolute; inset:-7px; }
.command-toggle svg { width:18px; height:18px; pointer-events:none; }
.command-toggle:hover { color:var(--accent); background:var(--accent-soft); }
body[data-commands-hidden=true] { --command-height:0px; }
body[data-commands-hidden=true] .command-toggle { top:auto; bottom:calc(8px + env(safe-area-inset-bottom)); border-radius:8px; }
body[data-bar=top]:not([data-commands-hidden=true]) .command-toggle { bottom:auto; top:calc(48px + var(--command-height) - 1px); border-radius:0 0 8px 8px; }
body[data-bar=top][data-commands-hidden=true] .command-toggle { top:56px; bottom:auto; }

#axisPanel input[aria-invalid=true] { outline:1px solid #b42336; border-color:#b42336; }