:root { --command-height:calc(80px + env(safe-area-inset-bottom)); }
.board-topbar { z-index:8; display:flex; align-items:center; flex:0 0 48px; height:48px; padding:0 12px; border-bottom:1px solid #e0e3e8; background:#f8f9fb; }
.board-identity { display:flex; align-items:center; gap:7px; min-width:0; max-width:420px; }
.board-mark { display:grid; place-items:center; color:var(--accent); }
.board-mark svg { width:24px; height:24px; }
.board-topbar .icon-button { width:40px; min-width:40px; height:40px; padding:0; }
#sessionTitle { width:210px; max-width:50vw; min-width:50px; border:1px solid transparent; border-radius:6px; padding:7px 5px; background:transparent; color:var(--ink); font-size:14px; font-weight:600; text-overflow:ellipsis; }
#sessionTitle:focus { border-color:var(--line); background:white; outline-color:var(--accent); }
.board-workspace { position:relative; display:flex; flex:1; min-height:0; overflow:hidden; }
.board-viewport { background:#f3f4f6; }
.board-paper { box-shadow:0 1px 5px #26324712,0 10px 36px #26324710; }
.command-bar { position:relative; z-index:15; display:flex; align-items:center; justify-content:space-between; gap:12px; flex:0 0 var(--command-height); height:var(--command-height); padding:8px 12px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #b8bec8; background:linear-gradient(#f0f1f3,#e1e4e9); box-shadow:0 -2px 9px #2632470c; }
.bar-drawing,.bar-advanced,.view-actions { display:flex; align-items:center; min-width:0; gap:2px; }
.bar-drawing { order:1; gap:10px; flex:0 0 auto; }
.bar-command { display:contents; }
.stylus-toggle-group { order:0; flex:0 0 auto; }
.bar-advanced { order:2; }
.view-actions { order:3; padding-left:10px; border-left:1px solid #bbc1cb; }
.command-bar .icon-button { width:44px; min-width:44px; height:48px; padding:11px; border-radius:7px; color:#4e596c; }
.command-bar .icon-button:is(:hover,[aria-expanded=true]):not(:disabled) { color:var(--accent); background:#fff9; }
.bar-group { display:flex; align-items:center; gap:0; padding:3px; border:1px solid #bdc3cd; border-radius:6px; background:#ffffff65; box-shadow:inset 0 1px 2px #26324707; }
.quick-color,.quick-width,.quick-eraser { display:grid; place-items:center; width:40px; min-width:40px; height:46px; border:1px solid transparent; border-radius:4px; padding:6px; color:var(--ink); background:transparent; }
.quick-color span { display:block; width:25px; height:25px; border-radius:3px; background:var(--swatch); box-shadow:inset 0 0 0 1px #26324735; pointer-events:none; }
.quick-width svg { width:28px; height:24px; }
.quick-eraser span { display:block; width:var(--diameter); height:var(--diameter); border-radius:50%; background:#3e4859; pointer-events:none; }
:is(.quick-color,.quick-width,.quick-eraser):hover { background:#fff9; }
:is(.quick-color,.quick-width,.quick-eraser)[aria-pressed=true] { background:white; border-color:#9b91d9; box-shadow:0 1px 3px #26324715; }
.command-bar .more-colors { width:40px; min-width:40px; height:46px; padding:9px; }
.dock-separator { flex:0 0 1px; width:1px; height:26px; margin-inline:5px; background:#bfc5ce; }
.page-counter { min-width:46px; max-width:72px; height:44px; padding:0 4px; border:1px solid transparent; border-radius:5px; color:#586478; background:transparent; font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.page-counter:is(:hover,:focus-visible) { color:var(--accent); background:#fff9; }
.tool-dock { position:fixed; z-index:13; display:flex; align-items:center; gap:1px; left:50%; bottom:calc(var(--command-height) + 14px); transform:translateX(-50%); max-width:calc(100vw - 28px); padding:5px; overflow-x:auto; scrollbar-width:thin; border:1px solid #abb2bf; border-radius:9px; background:linear-gradient(#f5f6f8,#dfe3e9); box-shadow:0 3px 12px #26324718; backdrop-filter:none; }
.tool-dock .icon-button { width:44px; min-width:44px; height:44px; padding:10px; border-radius:6px; color:#536076; }
.tool-dock .icon-button[aria-pressed=true] { color:var(--accent); background:#fff; border-color:#a89ee3; box-shadow:0 1px 3px #26324715; }
.edge-tab { position:fixed; z-index:11; top:43%; display:grid; place-items:center; width:30px; height:64px; padding:5px; color:#667084; background:linear-gradient(#f0f1f3,#dfe3e9); border:1px solid #b9c0cc; box-shadow:0 2px 6px #2632470c; }
.edge-tab svg { width:20px; height:24px; pointer-events:none; }
.edge-tab:is(:hover,[aria-expanded=true]) { color:var(--accent); background:#eeecff; }
.pages-tab { left:0; border-left:0; border-radius:0 7px 7px 0; }
.library-tab { right:0; border-right:0; border-radius:7px 0 0 7px; }
body:has(#pageSidebar:not([hidden])) .pages-tab { left:168px; }
body:has(#instrumentsPanel:not([hidden])) .library-tab { right:212px; }
.page-sidebar { position:relative; z-index:5; width:168px; min-width:168px; overflow:auto; scrollbar-width:thin; background:#f7f8fa; border-right:1px solid #cdd2db; }
.page-actions { position:sticky; z-index:1; top:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:8px; margin-bottom:8px; background:#f0f2f6f5; border-bottom:1px solid var(--line); }
.page-actions .icon-button { width:100%; min-width:0; height:44px; padding:10px; border-radius:6px; }
.page-list { padding-bottom:24px; }
.settings-panel,.shape-panel,.background-panel { position:fixed; z-index:14; left:50%; bottom:calc(var(--command-height) + 84px); transform:translateX(-50%); padding:14px; max-width:calc(100vw - 24px); border-radius:12px; }
.settings-panel { width:350px; max-height:calc(100dvh - var(--command-height) - 144px); overflow:auto; scrollbar-width:thin; }
.file-panel { position:fixed; z-index:16; right:12px; bottom:calc(var(--command-height) + 12px); width:266px; max-width:calc(100vw - 24px); max-height:calc(100dvh - var(--command-height) - 72px); overflow:auto; padding:12px; border-radius:12px; }
.file-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.file-actions .icon-button { width:100%; height:64px; min-width:0; padding:17px; background:#f3f5f9; border-radius:9px; }
.file-actions .icon-button:hover { color:var(--accent); background:var(--accent-soft); }
.instruments-panel { position:fixed; z-index:10; display:block; top:48px; right:0; bottom:var(--command-height); left:auto; width:212px; max-width:calc(100vw - 40px); transform:none; overflow:auto; padding:12px; border:0; border-left:1px solid #cdd2db; border-radius:0; background:#f5f6f9; box-shadow:-4px 0 15px #26324709; }
.resource-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.resource-group + .resource-group { margin-top:16px; border-top:1px solid #d5dae3; padding-top:16px; }
.resource-group .icon-button { width:100%; min-width:0; height:72px; padding:17px; background:white; border:1px solid #e1e5ec; border-radius:9px; }
.resource-group .icon-button svg { width:34px; height:34px; }
.selection-actions { position:fixed; z-index:12; display:flex; align-items:center; gap:3px; top:60px; left:50%; transform:translateX(-50%); padding:5px; border-radius:11px; }
.board-toast { position:fixed; z-index:40; top:58px; left:50%; transform:translateX(-50%); max-width:min(540px,calc(100vw - 30px)); margin:0; padding:12px 20px; border-radius:10px; background:#263247; color:white; font-size:14px; line-height:1.5; box-shadow:var(--shadow); }
body[data-dock=left] .tool-dock,body[data-dock=right] .tool-dock { top:50%; bottom:auto; flex-direction:column; max-height:calc(100dvh - var(--command-height) - 90px); overflow-y:auto; overflow-x:hidden; transform:translateY(-50%); }
body[data-dock=left] .tool-dock { left:38px; }
body[data-dock=right] .tool-dock { left:auto; right:38px; }
body[data-dock=left]:has(#pageSidebar:not([hidden])) .tool-dock { left:206px; }
body[data-dock=right]:has(#instrumentsPanel:not([hidden])) .tool-dock { right:250px; }
body[data-dock=left] .tool-dock .dock-separator,body[data-dock=right] .tool-dock .dock-separator { width:25px; height:1px; margin-block:4px; }
@media (max-width:1150px) {
  :root { --command-height:calc(112px + env(safe-area-inset-bottom)); }
  .command-bar { flex-direction:column; justify-content:center; gap:4px; padding:5px 10px calc(5px + env(safe-area-inset-bottom)); }
  .bar-drawing { order:0; justify-content:center; }
  .bar-command { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
  .bar-advanced { flex:1; justify-content:center; }
  .view-actions { margin-left:auto; }
  .bar-group { padding:1px 3px; }
  .quick-color,.quick-width,.quick-eraser,.command-bar .more-colors { height:44px; }
  .command-bar .icon-button { height:44px; }
}
@media (max-width:650px) {
  .board-topbar { padding:0 6px; }
  .board-mark { display:none; }
  #sessionTitle { width:180px; max-width:56vw; }
  .command-bar { padding-inline:6px; }
  .bar-drawing { gap:8px; width:100%; }
  .quick-erasers { display:none; }
  .bar-group { padding:1px; }
  .quick-color,.quick-width,.command-bar .more-colors { width:36px; min-width:36px; }
  .quick-color span { width:24px; height:24px; }
  .bar-command { gap:4px; }
  .bar-command .icon-button { width:36px; min-width:36px; height:44px; padding:8px; }
  .bar-advanced { flex:1; justify-content:flex-start; overflow-x:auto; scrollbar-width:thin; }
  .view-actions { flex:0 0 auto; gap:0; padding-left:3px; }
  .page-counter { min-width:40px; padding:0 2px; }
  .tool-dock { gap:0; padding:4px; max-width:calc(100vw - 20px); }
  .tool-dock .icon-button { width:44px; min-width:44px; }
  .page-sidebar { position:absolute; inset:0 auto 0 0; width:160px; min-width:160px; box-shadow:5px 0 16px #26324712; }
  body:has(#pageSidebar:not([hidden])) .pages-tab { left:160px; }
  .settings-panel { padding:12px; }
  .selection-actions { top:56px; max-width:calc(100vw - 20px); }
  body[data-dock] .tool-dock { top:auto; right:auto; left:50%; bottom:calc(var(--command-height) + 14px); flex-direction:row; max-height:none; overflow-x:auto; transform:translateX(-50%); }
  body[data-dock] .tool-dock .dock-separator { width:1px; height:26px; margin:0 5px; }
  body[data-dock=left]:has(#pageSidebar:not([hidden])) .tool-dock { left:50%; }
  body[data-dock=right]:has(#instrumentsPanel:not([hidden])) .tool-dock { right:auto; }
}
@media (max-height:500px) { .tool-dock { bottom:calc(var(--command-height) + 5px); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation:none; } .icon-button,.color-swatch { transition:none; } }