/* Editing tools stay with the artwork; project actions stay in the header. */
#topbar { height:64px; min-height:64px; padding:10px 20px; flex-wrap:nowrap; gap:20px; overflow:visible; }
#topbar .tb-left { flex:1 1 auto; gap:10px; min-width:0; }
#topbar .tb-right { flex:0 0 auto; gap:12px; width:auto; margin:0; }
#topbar .tb-name { display:flex; flex:0 1 auto; min-width:60px; max-width:280px; }
#topbar .save-state { display:inline-flex; white-space:nowrap; }
#canvas-workspace { display:flex; flex-direction:column; flex:1 1 0; min-width:0; min-height:0; overflow:hidden; }
#canvas-workspace > #stage { flex:1 1 0; min-height:0; width:100%; }
#canvas-toolbar {
  display:flex; align-items:center; gap:12px; flex:0 0 auto; min-height:64px;
  padding:10px 18px; border-bottom:1px solid var(--line-w); background:var(--space-2);
  color:var(--ink); position:relative; z-index:30; box-sizing:border-box;
}
#canvas-toolbar .canvas-history,#canvas-toolbar .canvas-zoom { display:flex; align-items:center; flex:0 0 auto; gap:3px; }
#canvas-toolbar .canvas-history { padding:3px; border:1px solid var(--line-w); border-radius:11px; background:var(--card); }
#canvas-toolbar .canvas-zoom { padding:3px; border:1px solid var(--line-w); border-radius:11px; }
#canvas-toolbar .tbtn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; min-width:34px; padding:0 10px; margin:0; border:0; border-radius:7px; background:transparent; color:var(--ink-soft); font:600 12px var(--font); white-space:nowrap; }
#canvas-toolbar .tbtn .ic { width:17px; height:17px; flex:none; }
#canvas-toolbar .tbtn:hover:not(:disabled) { background:rgb(var(--on) / .06); color:var(--ink); }
#canvas-toolbar .tbtn:active:not(:disabled) { background:var(--coral-soft); color:var(--coral); }
#canvas-toolbar .tbtn:disabled { opacity:.38; cursor:default; }
#canvas-toolbar .tbtn:focus-visible,#canvas-toolbar .chip:focus-visible,#canvas-toolbar .seg button:focus-visible { outline:2px solid var(--coral); outline-offset:3px; }
#canvas-toolbar #zoom-in,#canvas-toolbar #zoom-out { width:32px; min-width:32px; padding:0; font:500 20px var(--font); }
#canvas-toolbar #zoom-val { min-width:56px; padding:0 5px; font:600 11px var(--mono); font-variant-numeric:tabular-nums; }
.canvas-toolbar-divider { width:1px; height:24px; background:var(--line-w); flex:none; }
#canvas-toolbar .canvas-output { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; flex:1 1 auto; }
#canvas-toolbar #target-nav-wrap { display:flex; min-width:0; max-width:100%; flex:0 1 auto; }
#canvas-toolbar #target-seg { display:flex; min-width:0; overflow-x:auto; scrollbar-width:none; border:1px solid var(--line-w); border-radius:9px; padding:3px; background:transparent; }
#canvas-toolbar #target-seg::-webkit-scrollbar { display:none; }
#canvas-toolbar #target-seg button { flex:none; min-height:32px; padding:0 11px; font-size:11px; border-radius:6px; }
#canvas-toolbar #locale-chip { display:inline-flex; flex:0 0 auto; min-height:40px; padding:0 10px; border:1px solid var(--line-w); border-radius:10px; background:transparent; font-size:11px; }
#canvas-toolbar #theme-toggle { flex:0 0 36px; width:36px; padding:0; }
[data-theme="light"] #canvas-toolbar { background:#fff; }
[data-theme="light"] #canvas-toolbar .canvas-history { background:#f6f6f8; }
@media(max-width:1200px) {
  #topbar { padding-inline:14px; gap:12px; }
  #topbar .tb-name { max-width:220px; }
  #canvas-toolbar { padding-inline:12px; gap:8px; }
  #canvas-toolbar .canvas-output { gap:6px; }
  #canvas-toolbar .canvas-history .tbtn { padding-inline:7px; gap:5px; }
  .canvas-toolbar-divider { display:none; }
}
@media(max-width:900px) {
  #canvas-workspace { order:2; width:100%; }
  #topbar { height:58px; min-height:58px; padding:8px 12px; }
  #topbar .brand-word,#topbar .brand-tag,#topbar .tb-sep,#topbar .template-badge { display:none; }
  #topbar .tb-left { gap:8px; }
  #topbar .tb-name { max-width:200px; }
  #canvas-toolbar { min-height:60px; padding:8px 12px; }
  #canvas-toolbar .tbtn { min-height:40px; }
  #canvas-toolbar .canvas-history,#canvas-toolbar .canvas-zoom { padding:0; }
}
@media(max-width:620px) {
  #topbar .tb-name { max-width:120px; }
  #topbar .save-state,#topbar #new-project-btn span,#topbar #projects-btn span { display:none; }
  #topbar .tb-right { gap:7px; }
  #topbar #ship-btn { min-width:0; padding-inline:12px; }
  #canvas-toolbar { flex-wrap:wrap; gap:8px; padding:8px 10px; }
  #canvas-toolbar .canvas-output { order:4; flex-basis:100%; justify-content:space-between; }
  #canvas-toolbar #target-nav-wrap { flex:1; }
  #canvas-toolbar #theme-toggle { margin-left:auto; }
  #canvas-toolbar .canvas-history .tbtn { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { #canvas-toolbar * { transition:none!important; } }
#canvas-toolbar .canvas-history .tbtn { width:auto; min-width:78px; flex:none; }
#canvas-toolbar .canvas-history .tbtn span { flex:none; }
#canvas-toolbar #target-seg { flex:1 1 0; width:auto; }
#canvas-toolbar #locale-code { display:inline; }
@media(max-width:620px) {
  #app #topbar { padding:8px 10px; gap:8px; }
  #topbar .tb-right { margin-left:auto; }
  #topbar #recovery-btn { width:auto; max-width:132px; min-height:36px; height:auto; padding:7px 9px; font-size:10px; white-space:normal; line-height:1.3; }
  #topbar #recovery-btn span { display:inline; }
}

/* Phone controls retain their appearance with a full touch target. */
@media (max-width:620px) {
  #canvas-toolbar { gap:6px; }
  #canvas-toolbar .tbtn,
  #canvas-toolbar #target-seg button,
  #canvas-toolbar #locale-chip,
  #canvas-toolbar .target-nav-arrow,
  #topbar #recovery-btn { min-height:44px; }
  #canvas-toolbar #zoom-in,
  #canvas-toolbar #zoom-out,
  #canvas-toolbar #theme-toggle,
  #canvas-toolbar .target-nav-arrow { min-width:44px; width:44px; flex:0 0 44px; }
}
@media (max-width:350px) {
  #canvas-toolbar #zoom-val { min-width:44px; width:44px; }
  #canvas-toolbar .canvas-history .tbtn { min-width:44px; width:44px; padding-inline:0; }
  #canvas-toolbar .canvas-history .tbtn span { display:none; }
}