/* ══════════════════════════════════════════════
   Text Editor → PDF  |  PixelTools
   ══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── DESIGN TOKENS ── */
:root {
  --bg:             #f0f2f5;
  --surface:        #ffffff;
  --card:           #f8f9fa;
  --border:         #e1e4e8;
  --border-light:   #ebedf0;
  --text:           #1a1d23;
  --text-secondary: #5c6370;
  --text-muted:     #9ba3af;
  --accent:         #2563eb;
  --accent-light:   #dbeafe;
  --accent-dark:    #1d4ed8;
  --success:        #16a34a;
  --success-light:  #dcfce7;
  --warning:        #d97706;
  --danger:         #dc2626;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:      0 4px 12px rgba(0,0,0,.1),  0 2px 4px rgba(0,0,0,.06);
  --shadow-page:    0 4px 24px rgba(0,0,0,.14), 0 1px 6px rgba(0,0,0,.08);
  --radius:         8px;
  --radius-sm:      5px;
  --radius-lg:      12px;
  --font-ui:        'Inter', system-ui, sans-serif;
  --font-doc:       'IBM Plex Sans', 'Times New Roman', serif;
  /* FIX: altura do header e ribbon como variáveis para cálculos dinâmicos */
  --header-h:       52px;
  --ribbon-h:       93px; /* ribbon-tabs + ribbon-bar */
  --statusbar-h:    28px;
}

/* ── BASE ── */
body {
  font-family: var(--font-ui);
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
  overflow-x:  hidden;
  font-size:   14px;
}

/* Acessibilidade: visually-hidden para labels de screen reader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ══ APP HEADER ══ */
.app-header {
  height:        var(--header-h);
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  padding:       0 16px;
  gap:           0;
  position:      sticky;
  top:           0;
  z-index:       200;
  box-shadow:    var(--shadow-sm);
}

.app-logo {
  display:       flex;
  align-items:   center;
  gap:           8px;
  text-decoration: none;
  color:         var(--text);
  font-weight:   700;
  font-size:     15px;
  letter-spacing: -.3px;
  padding-right: 20px;
  border-right:  1px solid var(--border);
  margin-right:  16px;
  flex-shrink:   0;
}
.app-logo span { color: var(--accent); }

.app-title {
  font-size:   13px;
  color:       var(--text-secondary);
  display:     flex;
  align-items: center;
  gap:         6px;
  flex:        1;
}
.app-title strong { color: var(--text); font-weight: 600; }
.app-title .sep   { color: var(--text-muted); }

.header-actions {
  display:     flex;
  align-items: center;
  gap:         6px;
}

/* Status inline no header */
.statusbar-inline {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   11px;
  color:       var(--text-muted);
  background:  none;
  border:      none;
  padding:     0;
}
.statusbar-inline strong { color: var(--accent); font-weight: 600; }
#saved-indicator { color: var(--success); font-weight: 500; display: none; }

/* ══ RIBBON / TOOLBAR TABS ══ */
.ribbon {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  position:      sticky;
  top:           var(--header-h);
  z-index:       150;
}

.ribbon-tabs {
  display:     flex;
  align-items: center;
  padding:     0 16px;
  gap:         0;
  border-bottom: 1px solid var(--border-light);
  overflow-x:  auto; /* FIX: scroll horizontal em telas estreitas */
}
.ribbon-tabs::-webkit-scrollbar { height: 0; }

.ribbon-tab {
  padding:       8px 14px;
  font-size:     12px;
  font-weight:   500;
  color:         var(--text-secondary);
  cursor:        pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:    color .15s, border-color .15s;
  user-select:   none;
  white-space:   nowrap;
  flex-shrink:   0;
}
.ribbon-tab:hover  { color: var(--text); }
.ribbon-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.ribbon-bar {
  display:     none;
  align-items: center;
  padding:     6px 16px;
  gap:         2px;
  flex-wrap:   wrap;
  min-height:  46px;
  overflow-x:  auto; /* FIX: ribbon não quebra o layout ao diminuir tela */
}
.ribbon-bar.active { display: flex; }

.rb-sep {
  width:      1px;
  height:     28px;
  background: var(--border);
  margin:     0 4px;
  flex-shrink: 0;
}

.rb-group {
  display:     flex;
  align-items: center;
  gap:         1px;
}
.rb-group-label {
  font-size:  10px;
  color:      var(--text-muted);
  text-align: center;
  display:    block;
  padding-top: 2px;
}
.rb-group-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        0 6px;
  border-right:   1px solid var(--border-light);
}
.rb-group-wrap:last-child { border-right: none; }

/* ── Toolbar buttons ── */
.tb {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  height:         28px;
  min-width:      28px;
  padding:        0 5px;
  background:     none;
  border:         1px solid transparent;
  border-radius:  var(--radius-sm);
  color:          var(--text);
  font-family:    var(--font-ui);
  font-size:      12px;
  font-weight:    500;
  cursor:         pointer;
  transition:     background .1s, border-color .1s, color .1s;
  white-space:    nowrap;
  gap:            4px;
}
.tb:hover              { background: var(--card); border-color: var(--border); }
.tb.active             { background: var(--accent-light); border-color: #93c5fd; color: var(--accent); }
/* FIX: focus-visible para navegação por teclado */
.tb:focus-visible      { outline: 2px solid var(--accent); outline-offset: 1px; }
.tb svg                { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; }
.tb-wide               { padding: 0 10px; }

.tb-select {
  height:       28px;
  background:   var(--surface);
  border:       1px solid var(--border);
  border-radius: var(--radius-sm);
  color:        var(--text);
  font-family:  var(--font-ui);
  font-size:    12px;
  padding:      0 6px;
  cursor:       pointer;
  outline:      none;
  transition:   border-color .15s;
}
.tb-select:focus { border-color: var(--accent); }

.tb-color-btn {
  position:     relative;
  height:       28px;
  width:        28px;
  border:       1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:     hidden;
  cursor:       pointer;
  display:      flex;
  align-items:  center;
  justify-content: center;
  transition:   border-color .1s;
}
.tb-color-btn:hover { border-color: var(--accent); }
.tb-color-btn input[type=color] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); opacity: 0; cursor: pointer; }
.tb-color-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); pointer-events: none; }

/* ══ STATUS BAR ══ */
.statusbar {
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  padding:       3px 16px;
  gap:           20px;
  font-size:     11px;
  color:         var(--text-muted);
  height:        var(--statusbar-h);
  overflow-x:    auto;
}
.statusbar::-webkit-scrollbar { height: 0; }
.statusbar strong { color: var(--accent); font-weight: 600; }
.statusbar .sb-right { margin-left: auto; display: flex; align-items: center; gap: 16px; white-space: nowrap; }

/* FIX: editor-shell usa as variáveis CSS para calcular a altura corretamente */
/* ══ MAIN LAYOUT ══ */
.editor-shell {
  display:  flex;
  /* FIX: usa variáveis e não valores fixos, evitando quebra quando ribbon muda de tamanho */
  height:   calc(100vh - var(--header-h) - var(--ribbon-h) - var(--statusbar-h));
  overflow: hidden;
}

/* ══ LEFT PANEL ══ */
.left-panel {
  width:          230px;
  flex-shrink:    0;
  background:     var(--surface);
  border-right:   1px solid var(--border);
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
}
.left-panel::-webkit-scrollbar        { width: 4px; }
.left-panel::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 4px; }

.panel-section { padding: 12px 14px; border-bottom: 1px solid var(--border-light); }
.panel-section:last-child { border-bottom: none; }

.panel-title {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:          var(--text-muted);
  margin-bottom:  10px;
  display:        flex;
  align-items:    center;
  gap:            6px;
}

.panel-row {
  display:     grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap:         6px;
  margin-bottom: 7px;
}
.panel-row:last-child { margin-bottom: 0; }
.panel-label { font-size: 11px; color: var(--text-secondary); }

.panel-select,
.panel-input {
  width:        100%;
  height:       28px;
  background:   var(--card);
  border:       1px solid var(--border);
  border-radius: var(--radius-sm);
  color:        var(--text);
  font-family:  var(--font-ui);
  font-size:    11px;
  padding:      0 8px;
  outline:      none;
  transition:   border-color .15s;
}
.panel-select:focus,
.panel-input:focus    { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.panel-input::placeholder { color: var(--text-muted); }

/* Template grid */
.tpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.tpl-btn {
  padding:        8px 6px;
  background:     var(--card);
  border:         1px solid var(--border);
  border-radius:  var(--radius-sm);
  cursor:         pointer;
  text-align:     left;
  transition:     border-color .12s, background .12s, transform .1s;
  display:        flex;
  flex-direction: column;
  gap:            3px;
}
.tpl-btn:hover       { border-color: var(--accent); background: var(--accent-light); transform: translateY(-1px); }
.tpl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tpl-icon { font-size: 14px; line-height: 1; }
.tpl-name { font-size: 10px; font-weight: 600; color: var(--text); line-height: 1.2; }

/* Export buttons */
.btn-primary {
  width:         100%;
  padding:       9px;
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: var(--radius);
  font-family:   var(--font-ui);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           6px;
  transition:    background .15s, transform .1s, box-shadow .15s;
  box-shadow:    0 2px 8px rgba(37,99,235,.3);
  margin-bottom: 6px;
}
.btn-primary:hover    { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.35); }
.btn-primary:active   { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.btn-secondary {
  width:         100%;
  padding:       8px;
  background:    var(--card);
  color:         var(--text);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-family:   var(--font-ui);
  font-size:     12px;
  font-weight:   500;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           6px;
  transition:    border-color .15s, background .15s;
  margin-bottom: 5px;
}
.btn-secondary:hover         { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.btn-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Small icon buttons used in header */
.icon-btn {
  height:         32px;
  min-width:      32px;
  padding:        0 10px;
  background:     none;
  border:         1px solid var(--border);
  border-radius:  var(--radius-sm);
  color:          var(--text-secondary);
  font-family:    var(--font-ui);
  font-size:      12px;
  font-weight:    500;
  cursor:         pointer;
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            5px;
  transition:     all .12s;
  white-space:    nowrap;
}
.icon-btn:hover         { background: var(--card); color: var(--text); border-color: #c8cdd5; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn.accent        { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 1px 4px rgba(37,99,235,.3); }
.icon-btn.accent:hover  { background: var(--accent-dark); }

/* ══ EDITOR AREA ══ */
.editor-main {
  flex:      1;
  display:   flex;
  flex-direction: column;
  overflow:  hidden;
  position:  relative;
}

.editor-canvas {
  flex:           1;
  overflow-y:     auto;
  overflow-x:     auto;
  background:     #dde1e7;
  padding:        28px 0;
  display:        flex;
  flex-direction: column;
  align-items:    center;
}
.editor-canvas::-webkit-scrollbar       { width: 8px; }
.editor-canvas::-webkit-scrollbar-track { background: #d0d4da; }
.editor-canvas::-webkit-scrollbar-thumb { background: #b0b6bf; border-radius: 4px; }
.editor-canvas::-webkit-scrollbar-thumb:hover { background: #9aa0ab; }

/* Wrapper que recebe o zoom via JS */
.page-scale-wrapper {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            20px;
  /* zoom é aplicado pelo JS — reduz layout inteiro proporcionalmente */
}

.page-shadow {
  width:      794px;
  background: transparent;
  position:   relative;
}
.page-margin-line { display: none; }

.page-header-preview {
  font-size:   10px;
  color:       var(--text-muted);
  text-align:  center;
  padding:     4px 0 6px;
  border-bottom: 1px solid var(--border-light);
  display:     none;
}
.page-footer-preview {
  font-size:  10px;
  color:      var(--text-muted);
  text-align: center;
  padding:    6px 0 4px;
  border-top: 1px solid var(--border-light);
  display:    none;
}

/* ══ MULTIPAGE EDITOR ══ */
#editor-pages {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            20px;
}

/* Folha A4 visual */
.page {
  width:         794px;
  height:        1123px;
  background:    #fff;
  box-shadow:    0 4px 18px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07);
  border-radius: 1px;
  overflow:      hidden;
  box-sizing:    border-box;
  flex-shrink:   0;
  position:      relative;
}

/* Área editável real */
.page-content {
  position:      absolute;
  top:           72px;
  left:          80px;
  right:         80px;
  bottom:        72px;
  outline:       none;
  font-family:   Georgia, 'Times New Roman', serif;
  font-size:     13px;
  line-height:   1.8;
  color:         #1a1a2e;
  caret-color:   var(--accent);
  word-wrap:     break-word;
  overflow-wrap: break-word;
  overflow:      hidden;
}

/* Número da página */
.page::after {
  content:       attr(data-page-num);
  position:      absolute;
  bottom:        24px;
  right:         80px;
  font-size:     10px;
  color:         #94a3b8;
  font-family:   var(--font-ui);
  pointer-events: none;
}

/* Placeholder agora fica na área editável */
.page-content:not([data-placeholder])::before,
.page-content[data-placeholder]:empty::before {
  content:        attr(data-placeholder);
  color:          #b0b6bf;
  pointer-events: none;
  display:        block;
}

.page-content[data-placeholder] > br:only-child {
  display: none;
}

/* Estilos de documento */
.page-content h1 {
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -.3px;
}

.page-content h2 {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  margin: 20px 0 8px;
  color: #1e293b;
  line-height: 1.3;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 4px;
}

.page-content h3 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 6px;
  color: #334155;
}

.page-content h4 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 4px;
  color: #475569;
}

.page-content p  { margin-bottom: 10px; }
.page-content ul,
.page-content ol { padding-left: 28px; margin-bottom: 10px; }
.page-content li { margin-bottom: 4px; }

.page-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 12.5px;
}

.page-content td,
.page-content th {
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
}

.page-content th {
  background: #f1f5f9;
  font-weight: 600;
  color: #334155;
}

.page-content tr:nth-child(even) td {
  background: #f8fafc;
}

.page-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 8px 16px;
  margin: 12px 0;
  background: #f0f7ff;
  color: #334155;
  border-radius: 0 4px 4px 0;
  font-style: italic;
}

.page-content hr {
  border: none;
  border-top: 1.5px solid #e2e8f0;
  margin: 20px 0;
}

.page-content a {
  color: var(--accent);
  text-decoration: underline;
}

.page-content code {
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #7c3aed;
}

.page-content pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
  font-size: 12px;
}

.page-content .callout {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}

.page-content .callout-warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.page-content .checklist {
  list-style: none;
  padding-left: 0;
}

.page-content .checklist li {
  position: relative;
  padding-left: 28px;
}

.page-content .checklist li::before {
  content: '☐';
  position: absolute;
  left: 0;
}

/* ══ OUTLINE ══ */
.outline-list  { display: flex; flex-direction: column; gap: 2px; }
.outline-empty { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 4px 0; }
.outline-item  {
  display:    block;
  width:      100%;
  text-align: left;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    4px 6px;
  border-radius: var(--radius-sm);
  font-size:  11px;
  color:      var(--text-secondary);
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
  transition: background .1s, color .1s;
}
.outline-item:hover         { background: var(--accent-light); color: var(--accent); }
.outline-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.outline-item.level-h1 { font-weight: 600; padding-left: 6px; }
.outline-item.level-h2 { padding-left: 14px; }
.outline-item.level-h3 { padding-left: 22px; font-size: 10px; }
.outline-item.level-h4 { padding-left: 30px; font-size: 10px; color: var(--text-muted); }

/* ══ FIND/REPLACE PANEL ══ */
.find-replace-bar {
  display:        none;
  align-items:    center;
  gap:            8px;
  padding:        8px 16px;
  background:     var(--surface);
  border-bottom:  1px solid var(--border);
  flex-wrap:      wrap;
}
.find-replace-bar.open { display: flex; }
.find-replace-bar label { font-size: 11px; color: var(--text-secondary); }
.find-replace-bar input {
  height:       28px;
  width:        160px;
  border:       1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:      0 8px;
  font-size:    12px;
  font-family:  var(--font-ui);
  color:        var(--text);
  background:   var(--card);
  outline:      none;
}
.find-replace-bar input:focus { border-color: var(--accent); }
.fr-close { margin-left: auto; }

/* ══ TOAST NOTIFICATION ══ */
.app-toast {
  position:   fixed;
  bottom:     28px;
  left:       50%;
  transform:  translateX(-50%) translateY(12px);
  background: #1e293b;
  color:      #fff;
  padding:    8px 20px;
  border-radius: 999px;
  font-size:  13px;
  font-weight: 500;
  pointer-events: none;
  opacity:    0;
  transition: opacity .2s, transform .2s;
  z-index:    9999;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══ INLINE MODALS ══ */
.app-modal {
  position:   fixed;
  inset:      0;
  display:    none;
  align-items: center;
  justify-content: center;
  padding:    24px;
  background: rgba(15, 23, 42, .42);
  z-index:    1200;
  backdrop-filter: blur(4px);
}
.app-modal.open { display: flex; }

.app-modal-card {
  width:         min(100%, 380px);
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 16px;
  box-shadow:    0 24px 60px rgba(15,23,42,.22);
  overflow:      hidden;
}
.app-modal-head {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        16px 18px 12px;
  border-bottom:  1px solid var(--border-light);
}
.app-modal-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }

.app-modal-close {
  width:       30px;
  height:      30px;
  border:      1px solid var(--border);
  border-radius: 999px;
  background:  var(--surface);
  color:       var(--text-secondary);
  cursor:      pointer;
  font-size:   18px;
  line-height: 1;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background .12s;
}
.app-modal-close:hover         { background: var(--card); color: var(--text); }
.app-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.app-modal-body {
  display:  grid;
  grid-template-columns: 1fr 1fr;
  gap:      12px;
  padding:  16px 18px;
}
.app-modal-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  font-size:      12px;
  color:          var(--text-secondary);
}
.app-modal-field input,
.app-modal-field select {
  height:       36px;
  border:       1px solid var(--border);
  border-radius: 10px;
  padding:      0 10px;
  background:   var(--surface);
  color:        var(--text);
  outline:      none;
  font-family:  var(--font-ui);
  font-size:    13px;
  transition:   border-color .15s;
}
.app-modal-field input:focus,
.app-modal-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.app-modal-field input::placeholder { color: var(--text-muted); }

.app-modal-check {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   13px;
  color:       var(--text-secondary);
  margin-top:  4px;
}
.app-modal-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

.app-modal-actions {
  display:        flex;
  justify-content: flex-end;
  gap:            10px;
  padding:        0 18px 18px;
}

.tb.primary       { background: var(--accent); border-color: var(--accent); color: #fff; }
.tb.primary:hover { filter: brightness(.95); }

/* Page break visual melhorado */
[style*="page-break-before"] {
  border-top: 2px dashed #cbd5e1 !important;
  margin: 20px 0 !important;
  padding-top: 8px !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
  text-align: center !important;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
  .editor-shell {
    flex-direction: column;
    height:         auto;
    overflow:       visible;
  }
  .left-panel {
    width:          100%;
    max-height:     none;
    border-right:   none;
    border-bottom:  1px solid var(--border);
    flex-direction: row;
    flex-wrap:      wrap;
  }
  .panel-section {
    flex:           1;
    min-width:      180px;
    border-bottom:  none;
    border-right:   1px solid var(--border-light);
  }
  .editor-main    { height: auto; }
  .editor-canvas  { background: var(--bg); }
  /* No mobile não escalamos — deixa rolar horizontalmente se necessário */
  .page-scale-wrapper { transform: none !important; width: auto !important; height: auto !important; padding: 16px; }
  .page {
    height: auto;
    min-height: 400px;
    overflow: visible;
  }

  .page-content {
    position: static;
    min-height: 400px;
    margin: 0;
    padding: 72px 80px;
    overflow: visible;
  }
}
@media (max-width: 600px) {
  .app-title     { display: none; }
  .page {
    height: auto;
    min-height: 300px;
    overflow: visible;
  }

  .page-content {
    position: static;
    min-height: 300px;
    padding: 24px 20px;
    overflow: visible;
  }
  .find-replace-bar input { width: 110px; }
}

/* ══ PRINT STYLES ══ */
@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html, body {
    width: 210mm;
    height: 297mm;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .app-header, .ribbon, .statusbar, .left-panel, .find-replace-bar,
  .app-toast, .app-modal, .page-scale-wrapper > .page-shadow { display: none !important; }

  .editor-shell, .editor-main, .editor-canvas {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    padding: 0 !important;
    display: block !important;
  }

  .page-scale-wrapper {
    transform: none !important;
    zoom: 1 !important;
    width: 210mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #editor-pages {
    gap: 0 !important;
  }

  .page {
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 210mm !important;
    min-height: 297mm !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    page-break-after: always;
    break-after: page;
    overflow: hidden !important;
    position: relative !important;
  }

  .page-content {
    position: static !important;
    min-height: auto !important;
    padding: 20mm 18mm !important;
    overflow: visible !important;
  }

  .page:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }
}

/* ── FONT PICKER ── */
.tb-font-picker {
  font-family: var(--font-ui);
  width: 160px !important;
}
/* Cada option renderiza na sua própria fonte (suporte varia por browser) */
.tb-font-picker option[value="Inter"]             { font-family: 'Inter', sans-serif; }
.tb-font-picker option[value="DM Sans"]           { font-family: 'DM Sans', sans-serif; }
.tb-font-picker option[value="Poppins"]           { font-family: 'Poppins', sans-serif; }
.tb-font-picker option[value="Merriweather"]      { font-family: 'Merriweather', serif; }
.tb-font-picker option[value="Lora"]              { font-family: 'Lora', serif; }
.tb-font-picker option[value="Playfair Display"]  { font-family: 'Playfair Display', serif; }
.tb-font-picker option[value="Roboto Slab"]       { font-family: 'Roboto Slab', serif; }
.tb-font-picker option[value="JetBrains Mono"]    { font-family: 'JetBrains Mono', monospace; }
.tb-font-picker option[value="Fira Code"]         { font-family: 'Fira Code', monospace; }