/* Preznta editor top bar. One row, three zones; the document's name owns the centre.
   Tokens follow the editor theme (classic, studio, paper, night). */
#editor-view > header.pz-topbar {
  --tb-surface: #ffffff; --tb-line: #e6eaed; --tb-ink: #1d2a32; --tb-muted: #6f7f89; --tb-hover: #f1f4f6; --tb-press: #e8edf0;
  --tb-accent: var(--brand-primary, #0f766e); --tb-on-accent: var(--desktop-on-accent, #fff);
  display: grid !important; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; column-gap: 16px;
  height: 62px !important; min-height: 62px; flex-shrink: 0; padding: 0 18px !important; margin: 0;
  background: var(--tb-surface) !important; border: 0 !important; border-bottom: 1px solid var(--tb-line) !important; box-shadow: none !important;
  color: var(--tb-ink); position: relative;
}
html[data-editor-theme=paper] #editor-view > header.pz-topbar { --tb-surface: #fffdf9; --tb-line: #e6e0d6; --tb-hover: #f5f1e9; --tb-press: #ece6db; }
html[data-editor-theme=midnight] #editor-view > header.pz-topbar { --tb-surface: #1c2730; --tb-line: #33414c; --tb-ink: #e3e9ee; --tb-muted: #9aaab5; --tb-hover: #26333d; --tb-press: #2f3d48; }

#editor-view > header.pz-topbar > .pz-start,
#editor-view > header.pz-topbar > .pz-end { display: flex !important; align-items: center; gap: 6px !important; min-width: 0; padding: 0 !important; border: 0 !important; flex: initial !important; }
#editor-view > header.pz-topbar > .pz-start { justify-self: start; }
#editor-view > header.pz-topbar > .pz-end { justify-self: end; }
#editor-view > header.pz-topbar .pz-rule { width: 1px; height: 22px; background: var(--tb-line); margin: 0 6px; flex: none; }

/* Start: the organization's mark, its name and Preznta's quiet signature. */
#editor-view > header.pz-topbar .pz-brand { display: flex !important; align-items: center; gap: 10px !important; min-width: 0; flex: none; }
#editor-view > header.pz-topbar #brand-logo-mark { width: 38px; height: 38px; padding: 0 !important; display: grid; place-items: center; flex: none;
  border-radius: 11px; box-shadow: none !important; color: var(--tb-on-accent); overflow: hidden; }
#editor-view > header.pz-topbar #brand-logo-mark.pz-has-mark { background: transparent !important; border-radius: 0; }
#editor-view > header.pz-topbar #brand-logo-mark img { width: 38px !important; height: 38px !important; object-fit: contain; }
#editor-view > header.pz-topbar #brand-logo-mark .pz-initial { font-size: 17px; font-weight: 700; line-height: 1; color: var(--tb-on-accent); }
#editor-view > header.pz-topbar #brand-logo-mark svg { width: 19px; height: 19px; }
#editor-view > header.pz-topbar #brand-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#editor-view > header.pz-topbar .pz-brand-text { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
#editor-view > header.pz-topbar .pz-brand-name { font-size: 13.5px; font-weight: 700; color: var(--tb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
#editor-view > header.pz-topbar .pz-by { font-size: 10.5px; font-weight: 500; color: var(--tb-muted); white-space: nowrap; }
#editor-view > header.pz-topbar .pz-by[hidden] { display: none; }

#editor-view > header.pz-topbar .pz-back { display: inline-flex !important; align-items: center; gap: 7px; height: 36px; padding: 0 11px !important;
  border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--tb-muted) !important; box-shadow: none !important;
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; flex: none; transition: background .15s, color .15s; }
#editor-view > header.pz-topbar .pz-back:hover { background: var(--tb-hover) !important; color: var(--tb-ink) !important; }
#editor-view > header.pz-topbar .pz-back svg { width: 17px; height: 17px; }

#editor-view > header.pz-topbar .pz-history { display: flex !important; align-items: center; gap: 2px !important; padding: 0 !important; margin-inline-start: 2px; border: 0 !important; flex: none; }

/* Icon buttons, one size everywhere. */
#editor-view > header.pz-topbar :is(.history-btn, .appearance-trigger, [id=editor-designer-entry]) {
  width: 36px; height: 36px; padding: 0 !important; display: inline-grid; place-items: center; flex: none;
  border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--tb-muted) !important; box-shadow: none !important; opacity: 1;
  cursor: pointer; transition: background .15s, color .15s; }
#editor-view > header.pz-topbar :is(.history-btn, .appearance-trigger, [id=editor-designer-entry]):hover { background: var(--tb-hover) !important; color: var(--tb-ink) !important; }
#editor-view > header.pz-topbar :is(.history-btn, .appearance-trigger, [id=editor-designer-entry]):active { background: var(--tb-press) !important; }
#editor-view > header.pz-topbar :is(.history-btn, .appearance-trigger, [id=editor-designer-entry]) svg { width: 18px !important; height: 18px !important; }
#editor-view > header.pz-topbar :is(.appearance-trigger, [id=editor-designer-entry]) > span { display: none; }
#editor-view > header.pz-topbar :is(#undo-btn, #redo-btn):not(.active) { color: var(--tb-muted) !important; opacity: .45; }
#editor-view > header.pz-topbar #editor-designer-entry[hidden] { display: none !important; }

/* Centre: the name is the one bold thing; its state sits right beside it. */
#editor-view > header.pz-topbar > .pz-center { display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 40vw; }
#editor-view > header.pz-topbar .project-title-wrap { display: flex !important; align-items: center; gap: 8px; min-width: 0 !important; max-width: 100% !important; flex: none !important; }
#editor-view > header.pz-topbar #project-name-input {
  field-sizing: content; width: auto; min-width: 8ch; max-width: min(34vw, 420px) !important; height: 36px; padding: 0 10px !important;
  border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important;
  font-size: 15px; font-weight: 700; line-height: 1; font-family: inherit; color: var(--tb-ink) !important; text-align: center; text-overflow: ellipsis; transition: background .15s, border-color .15s; }
#editor-view > header.pz-topbar #project-name-input:hover { background: var(--tb-hover) !important; }
#editor-view > header.pz-topbar #project-name-input:focus { outline: none; background: var(--tb-surface) !important; border-color: color-mix(in srgb, var(--tb-accent) 45%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-accent) 14%, transparent) !important; text-align: start; }
#editor-view > header.pz-topbar :is(.project-save-meta, #editor-file-state) { display: none !important; }
#editor-view > header.pz-topbar .pz-doc-state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; flex: none;
  font-size: 11px; font-weight: 600; color: var(--tb-muted); background: var(--tb-hover); white-space: nowrap; }
#editor-view > header.pz-topbar .pz-doc-state > i { width: 7px; height: 7px; border-radius: 50%; background: #2f9e6f; }
#editor-view > header.pz-topbar .pz-doc-state[data-state=dirty] { color: #8a5a12; background: #fdf3e2; }
#editor-view > header.pz-topbar .pz-doc-state[data-state=dirty] > i { background: #e09a2b; }
#editor-view > header.pz-topbar .pz-doc-state[data-state=saving] > i { background: var(--tb-accent); animation: pz-pulse 1s ease-in-out infinite; }
html[data-editor-theme=midnight] #editor-view > header.pz-topbar .pz-doc-state[data-state=dirty] { color: #f0c47c; background: #3a3020; }
@keyframes pz-pulse { 50% { opacity: .3; } }
#editor-view > header.pz-topbar .dm-format-badge { margin: 0; height: 24px; border-color: var(--tb-line); background: var(--tb-surface); }

/* End: tools, then file actions, then the show. */
#editor-view > header.pz-topbar .pz-tools, #editor-view > header.pz-topbar .pz-file { display: flex; align-items: center; gap: 4px; flex: none; }
#editor-view > header.pz-topbar .pz-file { gap: 8px; }
#editor-view > header.pz-topbar .assistant-launch { height: 36px; margin-inline-end: 4px; padding: 0 13px; font-size: 12.5px; }
#editor-view > header.pz-topbar .studio-actions { display: none !important; }
#editor-view > header.pz-topbar :is(.studio-save-group, .studio-export-group) { position: relative; display: flex !important; align-items: stretch; }
#editor-view > header.pz-topbar .studio-save-group { height: 36px; border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-surface); }
#editor-view > header.pz-topbar :is(.studio-save, .studio-save-more) { padding: 0 11px; color: var(--tb-ink); font-size: 12.5px; font-weight: 600; background: transparent; }
#editor-view > header.pz-topbar .studio-save-more { padding: 0 7px; border-inline-start: 1px solid var(--tb-line); }
#editor-view > header.pz-topbar .studio-save svg { width: 16px; height: 16px; } #editor-view > header.pz-topbar .studio-save-more svg { width: 13px; height: 13px; }
#editor-view > header.pz-topbar :is(.studio-save, .studio-save-more):hover { background: var(--tb-hover); }
#editor-view > header.pz-topbar .studio-export { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 10px; box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--tb-accent) 38%, var(--tb-line)); background: color-mix(in srgb, var(--tb-accent) 7%, var(--tb-surface)); color: var(--tb-ink); font-size: 12.5px; font-weight: 650; }
#editor-view > header.pz-topbar .studio-export:hover, #editor-view > header.pz-topbar .studio-export[aria-expanded=true] { background: color-mix(in srgb, var(--tb-accent) 13%, var(--tb-surface)); filter: none; }
#editor-view > header.pz-topbar .studio-export svg { width: 16px; height: 16px; color: var(--tb-accent); }
#editor-view > header.pz-topbar .studio-export .pz-caret { width: 13px !important; margin: 0 !important; color: var(--tb-muted) !important; }
#editor-view > header.pz-topbar .editor-action-menu { top: calc(100% + 8px); width: 286px; }
#editor-view > header.pz-topbar .editor-action-menu button[hidden] { display: none; }
#editor-view > header.pz-topbar.pz-has-export :is(.classic-export, #dm-image-export) { display: none !important; }
#editor-view > header.pz-topbar.pz-has-save .desktop-file-actions { display: none !important; }

/* The show: the bar's one solid colour. */
#editor-view > header.pz-topbar .presentation-entry { height: 36px; border: 0; border-radius: 10px; background: var(--tb-accent); color: var(--tb-on-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tb-accent) 30%, transparent); margin-inline-start: 2px; }
#editor-view > header.pz-topbar .presentation-entry > button { padding: 0 13px; font-size: 12.5px; color: inherit; }
#editor-view > header.pz-topbar .presentation-entry > button:last-of-type { padding: 0 8px; border-inline-start: 1px solid color-mix(in srgb, var(--tb-on-accent) 28%, transparent); }
#editor-view > header.pz-topbar .presentation-entry > button:hover { background: color-mix(in srgb, #000 10%, transparent); }
#editor-view > header.pz-topbar .presentation-entry svg { width: 16px; height: 16px; }

/* Tooltips for icon buttons. */
#editor-view > header.pz-topbar [data-tip] { position: relative; }
#editor-view > header.pz-topbar [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -3px);
  padding: 5px 9px; border-radius: 7px; background: #1d2a32; color: #fff; font: 600 11px/1.3 var(--brand-font, inherit); white-space: pre; direction: rtl;
  opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 500; }
#editor-view > header.pz-topbar [data-tip]:hover::after, #editor-view > header.pz-topbar [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }
#editor-view > header.pz-topbar [aria-expanded=true][data-tip]::after { display: none; }
#editor-view > header.pz-topbar :is(button, input):focus-visible { outline: 2px solid color-mix(in srgb, var(--tb-accent) 60%, transparent); outline-offset: 2px; }

/* Narrower windows keep every action, with fewer words. */
@media (max-width: 1360px) { #editor-view > header.pz-topbar .pz-back span, #editor-view > header.pz-topbar .pz-by { display: none; } #editor-view > header.pz-topbar .pz-back { width: 36px; padding: 0 !important; justify-content: center; } }
@media (max-width: 1180px) {
  #editor-view > header.pz-topbar { column-gap: 10px; padding: 0 12px !important; }
  #editor-view > header.pz-topbar .pz-brand-text, #editor-view > header.pz-topbar .studio-save > span, #editor-view > header.pz-topbar .assistant-launch span { display: none; }
  #editor-view > header.pz-topbar .pz-doc-state > span { display: none; } #editor-view > header.pz-topbar .pz-doc-state { padding: 0 8px; }
}
@media (max-width: 960px) { #editor-view > header.pz-topbar .presentation-entry > button:first-child span, #editor-view > header.pz-topbar .studio-export > span { display: none; } }
@media (prefers-reduced-motion: reduce) { #editor-view > header.pz-topbar * { transition: none !important; animation: none !important; } }
body.viewer-mode #editor-view > header.pz-topbar .pz-file .studio-save-group { display: none !important; }

/* «المزيد»: theme, identity panel and the tour. */
#editor-view > header.pz-topbar .pz-more { position: relative; display: flex; }
#editor-view > header.pz-topbar #pz-more-button { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--tb-muted); cursor: pointer; }
#editor-view > header.pz-topbar #pz-more-button:hover, #editor-view > header.pz-topbar #pz-more-button[aria-expanded=true] { background: var(--tb-hover); color: var(--tb-ink); }
#editor-view > header.pz-topbar #pz-more-button svg { width: 18px; height: 18px; }
#editor-view > header.pz-topbar .pz-more-menu { width: 220px; inset-inline-end: auto; inset-inline-start: 0; }
#editor-view > header.pz-topbar .pz-more-menu > button { width: 100% !important; height: auto !important; display: flex !important; justify-content: flex-start; gap: 11px; padding: 11px 12px !important; border-radius: 9px !important; color: var(--tb-ink) !important; font-size: 12.5px; font-weight: 600; font-family: inherit; }
#editor-view > header.pz-topbar .pz-more-menu > button::before { content: none; }
#editor-view > header.pz-topbar .pz-more-menu > button > span { display: none !important; }
#editor-view > header.pz-topbar .pz-more-menu > button[data-tip]::after { content: attr(data-label); position: static; transform: none; opacity: 1; padding: 0; background: none; color: inherit; font: inherit; white-space: nowrap; transition: none; }
#editor-view > header.pz-topbar .pz-more-menu > button svg { width: 18px !important; height: 18px !important; color: var(--tb-accent); }
html[data-editor-theme=midnight] #editor-view > header.pz-topbar .pz-more-menu { background: var(--tb-surface); border-color: var(--tb-line); }
#editor-view > header.pz-topbar .pz-more-menu > button:hover { background: var(--tb-hover) !important; }
html[data-editor-theme=midnight] #editor-view > header.pz-topbar .assistant-launch:not([aria-expanded=true]) { background: color-mix(in srgb, var(--tb-accent) 16%, var(--tb-surface)); color: var(--tb-ink); border-color: color-mix(in srgb, var(--tb-accent) 40%, var(--tb-line)); }