#ebody { flex: 1; min-height: 0; display: flex; position: relative; }
  #ebody #estage { flex: 1; min-width: 0; }
  #esidebar { flex: none; width: 196px; overflow-y: auto; overflow-x: hidden; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
  #eworkspace.sb-off #esidebar { display: none; }
  .sbhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 10px 8px; background: var(--card); border-bottom: 1px solid var(--border); font-size: .88rem; }
  .sbhead .ghost { padding: 5px 8px; font-size: .78rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
  .sbhead svg { width: 13px; height: 13px; }
  #sblist { padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .sbhint { margin: 0; padding: 4px 12px 14px; font-size: .74rem; color: var(--muted); text-align: center; }
  .sbitem { position: relative; width: 112px; outline: none; cursor: pointer; border-radius: 6px; }
  .sbthumb { border: 2px solid transparent; border-radius: 6px; padding: 0; background: var(--desk); line-height: 0; overflow: hidden; box-shadow: 0 1px 4px rgba(16,24,40,.2); }
  .sbthumb canvas { display: block; min-height: 40px; background: #fff; }
  .sbitem.is-active .sbthumb { border-color: var(--accent); }
  .sbitem:focus-visible .sbthumb { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sbnum { text-align: center; font-size: .74rem; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
  .sbitem.is-active .sbnum { color: var(--text); font-weight: 600; }
  .sbacts { position: absolute; left: 2px; right: 2px; top: 2px; display: flex; justify-content: center; gap: 2px; padding: 3px; border-radius: 7px; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 2px 8px rgba(16,24,40,.28); opacity: 0; pointer-events: none; transition: opacity .12s; }
  .sbitem:hover .sbacts, .sbitem:focus-within .sbacts { opacity: 1; pointer-events: auto; }
  @media (hover: none) { .sbacts { opacity: 1; pointer-events: auto; top: auto; bottom: 22px; } }
  .sbacts button { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--text); cursor: pointer; }
  .sbacts button:hover:not(:disabled) { background: var(--desk); }
  .sbacts button:disabled { opacity: .3; cursor: default; }
  .sbacts svg { width: 14px; height: 14px; }
  .sbitem.dragging { opacity: .4; }
  .sbitem.drop-before::before, .sbitem.drop-after::after { content: ""; position: absolute; left: -4px; right: -4px; height: 3px; border-radius: 2px; background: var(--accent); z-index: 3; }
  .sbitem.drop-before::before { top: -8px; } .sbitem.drop-after::after { bottom: 12px; }
  .zoom .sbpos { min-width: 0; padding: 0 12px; white-space: nowrap; color: var(--muted); border-right: 1px solid var(--border); align-self: stretch; display: inline-flex; align-items: center; }
  .zoom #esbtoggle[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .zoom #esbtoggle, .zoom #ezfit { display: inline-flex; align-items: center; } .zoom #esbtoggle svg, .zoom #ezfit svg { width: 16px; height: 16px; }
  @media (max-width: 700px) {
    #esidebar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 6; box-shadow: 6px 0 24px rgba(16,24,40,.3); }
    .zoom .sbpos { display: none; }
  }