.app{
  height:100%;
  display:flex;
  flex-direction:column;
  min-width: 980px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 14px;
  background: var(--brand2);
  color:#fff;
}

.topbar-left{
  display:flex;
  align-items:center;
  gap: 12px;
}

.appmark{
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background:#fff;
  color: var(--brand2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
}

.docmeta{
  display:flex;
  align-items:center;
  gap: 12px;
}

.docnamewrap{
  display:flex;
  flex-direction:column;
  gap: 2px;
}

.docname{
  font-size: 16px;
  font-weight: 600;
  outline:none;
  padding: 2px 6px;
  border-radius: 6px;
}
.docname:focus{background: rgba(255,255,255,.14)}

.savestate{
  font-size: 12px;
  opacity: .9;
  padding-left: 6px;
}

.quick{
  display:flex;
  align-items:center;
  gap: 6px;
}
.divider{
  width:1px;
  height:18px;
  background: rgba(255,255,255,.35);
  margin: 0 4px;
}

.pill{
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color:#fff;
  padding: 6px 10px;
  border-radius: 999px;
}

.statusbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
}
.status-left{display:flex; align-items:center; gap: 8px}
.sep{opacity:.7}
.status-right{display:flex; align-items:center; gap: 10px}
#zoomSlider{width: 180px}