body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  height: 100dvh;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--toolbar-h);
  min-width: 0;
  padding: 0 var(--space-3);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--border);
  position: relative;
  z-index: var(--z-sticky);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .toolbar { background: var(--surface); }
}

.tb-group { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.tb-left { flex: 1 1 auto; }
.tb-center { flex: 0 1 auto; }
.tb-right { flex: 0 1 auto; justify-content: flex-end; }
.tb-left .file-meta { flex: 1 1 0; }

.tb-btn {
  height: var(--h-sm);
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  font: 500 13px/18px var(--font-sans);
}
.tb-btn:hover:not(:disabled) { background: var(--surface-hover); }
.tb-btn:disabled { background: transparent; border-color: transparent; }
.tb-btn.icon { width: var(--h-sm); padding: 0; font-size: 16px; }
.tb-btn.icon svg { display: block; }
.tb-btn[aria-pressed="true"] { background: var(--surface-active); }
.tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 var(--space-1); flex-shrink: 0; }

.file-meta { display: flex; flex-direction: column; justify-content: center; min-width: 0; margin-left: var(--space-1); }
.file-meta strong { font: 500 13px/17px var(--font-sans); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta small { font: 400 11px/15px var(--font-sans); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.page-input {
  width: 44px;
  height: 28px;
  padding: 0 4px;
  text-align: center;
  font: 400 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  border-color: transparent;
  background: var(--surface-hover);
  -moz-appearance: textfield;
}
.page-input::-webkit-outer-spin-button, .page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-input:hover { border-color: transparent; background: var(--surface-active); }
.page-total { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zoom-label { min-width: 52px; font-variant-numeric: tabular-nums; color: var(--ink-muted); font-weight: 400; }

.status-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--gray-600);
  margin-right: var(--space-2);
  flex-shrink: 0;
}
.status-dot.ok { background: var(--green-700); }
.status-dot.partial { background: var(--amber-700); }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px var(--sidebar-w);
  min-height: 0;
  height: 100%;
  position: relative;
}
.workspace.collapsed { grid-template-columns: minmax(0, 1fr) 0 0; }
.workspace.collapsed .splitter, .workspace.collapsed .sidebar { display: none; }
.workspace.resizing { user-select: none; cursor: col-resize; }
.workspace.resizing canvas, .workspace.resizing iframe { pointer-events: none; }

.splitter {
  position: relative;
  background: var(--border);
  cursor: col-resize;
  transition: background .15s;
}
.splitter::after { content: ""; position: absolute; inset: 0 -4px; }
.splitter:hover, .splitter:focus-visible, .workspace.resizing .splitter { background: var(--focus-ring); outline: none; }

@media (max-width: 959px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: hidden;
    overflow-x: clip;
  }
  .splitter { display: none; }
  .sidebar {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(92vw, 440px);
    z-index: var(--z-menu);
    box-shadow: var(--material-menu);
    transform: translateX(0);
    transition: transform .2s cubic-bezier(.32, .72, 0, 1);
  }
  .workspace.collapsed { grid-template-columns: minmax(0, 1fr); }
  .workspace.collapsed .sidebar { display: flex; transform: translateX(101%); box-shadow: none; }
  .workspace:not(.collapsed)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-menu) - 1);
    background: var(--overlay);
    animation: fade .2s var(--ease);
  }
}
@keyframes fade { from { opacity: 0; } }

@media (max-width: 639px) {
  .toolbar { flex-wrap: wrap; padding: var(--space-1) var(--space-2); row-gap: var(--space-1); }
  .tb-left { order: 1; flex: 1 1 60%; }
  .tb-right { order: 2; flex: 0 0 auto; }
  .tb-center {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tb-center::-webkit-scrollbar { display: none; }
  .file-meta small { display: none; }
  .sidebar { width: 100%; }
}