/* ═══════════════════════════════════════════════════════════════════════════
   Yatzar — o sistema visual, num arquivo só.

   A fonte é o **aplicativo**: `apps/mobile/src/theme` — cores, raios, escala de
   letra e materiais de vidro. É onde a plataforma vive, e por isso é ele que
   manda; o site, o painel e o editor são a mesma marca vista de outros ângulos.

   Antes daqui os valores tinham sido tirados do site, que é uma aproximação do
   app — perto o bastante para enganar, longe o bastante para não pertencer: a
   borda era translúcida em vez de sólida, o verde era vivo em vez de sálvia, e
   os raios eram 14 em vez de 20.

   Os nomes levam prefixo `--y-`. Sem ele, `--muted` significaria texto
   secundário para quem veio do site e superfície de fundo para quem veio do
   shadcn — o mesmo nome com dois sentidos é como uma tela fica com o cinza
   errado sem ninguém entender por quê.

   Aparência em três estados, não dois: claro, escuro, e o silêncio de quem não
   escolheu — que é quando vale o sistema. Por isso o media query fica guardado
   contra a escolha clara, e o escuro explícito repete os mesmos valores: a
   escolha ganha do sistema nos dois sentidos. Quem confere prova de miolo
   precisa do claro mesmo com o sistema no escuro, porque papel é branco.

   Ao mexer: o par correspondente está em `apps/mobile/src/theme/colors.ts`,
   `radius.ts`, `spacing.ts` e `typography.ts`. Mudou lá, muda aqui.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Superfícies e tinta — `colorThemes.light` */
  --y-canvas: #F4F4F1;
  --y-canvas-subtle: #EFEFEB;
  --y-surface: #FFFFFF;
  --y-ink: #11110F;
  --y-muted: #6B6A64;
  --y-black: #090909;
  --y-paper: #FBF8F1;
  /* Borda sólida, e não translúcida: é assim no app, e translúcida sobre cartão
     branco somia contra o papel. */
  --y-border: #D8D8D2;
  /* Fundo de campo de formulário — `editorial.response` no app. */
  --y-field: #E7E7E1;

  /* O latão da marca. Marca o lugar em que se está, e nada mais. */
  --y-brass: #967742;
  --y-brass-soft: #B39A70;
  --y-gold: #B89A5E;
  --y-focus: #967742;

  /* Estado. O app tem dois: sucesso e erro — e o sucesso dele é sálvia, um verde
     que não comemora. O aviso não existe lá; aqui existe, porque o editor tem o
     "falta revisar" que o app não precisa nomear, e sai do ouro da marca para
     não inventar uma sexta cor. */
  --y-ok: #65705E;
  --y-warn: #967742;
  --y-bad: #9B2C2C;

  /* Vidro — `material` no app. É o que faz a barra flutuar. */
  --y-glass: rgba(255, 255, 255, .42);
  --y-glass-elevated: rgba(255, 255, 255, .44);
  --y-glass-border: rgba(255, 255, 255, .82);
  --y-glass-highlight: rgba(255, 255, 255, .96);
  --y-glass-mist: rgba(150, 119, 66, .055);
  --y-shadow-sm: 0 1px 2px rgba(9, 9, 9, .06);
  --y-shadow: 0 8px 20px rgba(0, 0, 0, .14);

  /* Letra. Georgia é a voz; a interface usa a do sistema. Sem webfont: a CSP do
     editor e o build sem dependência do site não carregam fonte de fora, e fonte
     que não chega é fallback silencioso. */
  --y-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --y-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --y-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Forma — `radius.ts`. */
  --y-round: 999px;
  --y-radius: 20px;
  --y-radius-control: 16px;
  --y-radius-sm: 10px;

  /* Espaço — `spacing.ts`. */
  --y-xs: 6px;
  --y-sm: 10px;
  --y-md: 16px;
  --y-lg: 24px;
  --y-xl: 32px;
  --y-xxl: 48px;
  --y-section: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --y-canvas: #090909;
    --y-canvas-subtle: #111111;
    --y-surface: #111111;
    --y-ink: #F2EDE3;
    --y-muted: #A8A095;
    --y-black: #050505;
    --y-paper: #FBF8F1;
    --y-border: #2A2824;
    --y-field: #1B1B18;
    --y-brass: #C2A66B;
    --y-brass-soft: #D8C49B;
    --y-gold: #D8C49B;
    --y-focus: #D8C49B;
    --y-ok: #87917D;
    --y-warn: #C2A66B;
    --y-bad: #D78484;
    --y-glass: rgba(12, 12, 11, .58);
    --y-glass-elevated: rgba(30, 30, 28, .58);
    --y-glass-border: rgba(242, 237, 227, .16);
    --y-glass-highlight: rgba(255, 255, 255, .10);
    --y-glass-mist: rgba(194, 166, 107, .06);
    --y-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --y-shadow: 0 8px 20px rgba(0, 0, 0, .42);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --y-canvas: #090909;
  --y-canvas-subtle: #111111;
  --y-surface: #111111;
  --y-ink: #F2EDE3;
  --y-muted: #A8A095;
  --y-black: #050505;
  --y-paper: #FBF8F1;
  --y-border: #2A2824;
  --y-field: #1B1B18;
  --y-brass: #C2A66B;
  --y-brass-soft: #D8C49B;
  --y-gold: #D8C49B;
  --y-focus: #D8C49B;
  --y-ok: #87917D;
  --y-warn: #C2A66B;
  --y-bad: #D78484;
  --y-glass: rgba(12, 12, 11, .58);
  --y-glass-elevated: rgba(30, 30, 28, .58);
  --y-glass-border: rgba(242, 237, 227, .16);
  --y-glass-highlight: rgba(255, 255, 255, .10);
  --y-glass-mist: rgba(194, 166, 107, .06);
  --y-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --y-shadow: 0 8px 20px rgba(0, 0, 0, .42);
}

/* ── primitivas da marca ────────────────────────────────────────────────────
   As formas que o app e as páginas de degustação usam, e que valem em qualquer
   tela nossa: o rótulo, o fio de ouro, a pílula. */

/* `typography.label` do app: 12px, peso 800, entreletra 1.4. */
.y-eyebrow {
  color: var(--y-brass-soft);
  font-weight: 800;
  letter-spacing: 1.4px;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
}

/* O fio de ouro separa sem pesar — nas páginas de degustação ele vem sempre
   entre o título e o texto. */
.y-rule {
  width: 58px;
  height: 1px;
  background: var(--y-brass);
  border: 0;
  margin: var(--y-lg) 0;
}

.y-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--y-round);
  background: var(--y-brass);
  color: var(--y-black);
  font-weight: 800;
  padding: 12px 20px;
}

:focus-visible {
  outline: 2px solid var(--y-focus);
  outline-offset: 3px;
}

  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Source+Serif+4:ital,wght@0,400;1,400;0,600&family=JetBrains+Mono:wght@400;500&display=swap');

  /* aviso de ambiente publicado — mesmo princípio do apps/editor: quem escreve numa cópia
     efêmera do container precisa saber disso toda vez que olha pra tela, não só na primeira. */
  .env-banner {
    display: flex; align-items: center; gap: .8rem; padding: .5rem 1rem;
    background: #ff3b30; color: #fff; font: 600 .76rem 'Manrope'; position: relative; z-index: 100;
  }
  .env-banner[hidden] { display: none; }
  .env-banner button {
    appearance: none; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff;
    font: 700 .7rem 'Manrope'; padding: .3rem .6rem; border-radius: .4rem; cursor: pointer; flex-shrink: 0;
  }
  .env-banner button:hover { background: rgba(255,255,255,.15); }

  /* Paleta "clean" estilo Apple — branco/cinza/azul, mesma lógica de system colors da HIG
     (systemBlue, systemGray, system background), não um acento inventado. */
  :root {
    --bg: #f5f5f7; --panel: #ffffff; --workspace: #e8e8ed; --ink: #1d1d1f; --muted: #6e6e73;
    --accent: #0071e3; --accent-ink: #ffffff; --border: #d2d2d7; --space: #b5700f;
    --critical: #ff3b30; --success: #0088a3; --warning: #c77700;
    --ruler: #ffffff; --ruler-tick: #c7c7cc; --ruler-text: #86868b;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #000000; --panel: #1c1c1e; --workspace: #000000; --ink: #f5f5f7; --muted: #8e8e93;
      --accent: #0a84ff; --accent-ink: #ffffff; --border: #38383a;
      --space: #f2a354; --critical: #ff453a; --success: #40c8e0; --warning: #ff9f0a;
      --ruler: #1c1c1e; --ruler-tick: #48484a; --ruler-text: #8e8e93;
    }
  }
  :root[data-theme="dark"] {
    --bg: #000000; --panel: #1c1c1e; --workspace: #000000; --ink: #f5f5f7; --muted: #8e8e93;
    --accent: #0a84ff; --accent-ink: #ffffff; --border: #38383a;
    --space: #f2a354; --critical: #ff453a; --success: #40c8e0; --warning: #ff9f0a;
    --ruler: #1c1c1e; --ruler-tick: #48484a; --ruler-text: #8e8e93;
  }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Manrope', system-ui, sans-serif; }
  .app { display: flex; flex-direction: column; height: 100vh; }
  button, select { font-family: inherit; }

  /* ---------- toolbar ---------- */
  /* z-index alto + position:relative: o desfoque de vidro (backdrop-filter) cria um novo
     contexto de empilhamento — sem isso, qualquer popover daqui dentro (margens, banco de
     dados, adicionar) fica PRESO atrás da área de trabalho onde a barra quebra linha e o
     popover desce além da própria altura da barra. */
  .toolbar { position: relative; z-index: 30; display: flex; align-items: center; gap: .7rem; padding: .55rem 1rem; border-bottom: 1px solid var(--border); background: var(--panel); flex-wrap: wrap; }
  .book-id { display: flex; flex-direction: column; gap: 0; margin-right: .4rem; min-width: 0; }
  .book-id .eyebrow { font: 700 .62rem 'Manrope'; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .book-id h1 { font: 800 .92rem 'Manrope'; margin: 0; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

  .seg { display: inline-flex; background: var(--workspace); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
  .seg button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 700 .74rem 'Manrope'; padding: .38rem .8rem; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
  .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
  .seg button:hover:not([aria-pressed="true"]) { color: var(--ink); }

  select.trim { font: 600 .74rem 'Manrope'; color: var(--ink); background: var(--workspace); border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .55rem; cursor: pointer; }

  .save-state { display: inline-flex; align-items: center; gap: .35rem; font: 500 .7rem 'JetBrains Mono'; color: var(--success); white-space: nowrap; }
  .save-state .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

  /* "Adicionar camada" compactado num botão só + menu — em vez de 4 botões sempre visíveis
     pra algo que se usa ocasionalmente (pedido explícito: menos espaço pro secundário). */
  .icon-btn-outline {
    appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--ink);
    width: 30px; height: 30px; border-radius: .65rem; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; position: relative; transition: background .15s ease;
  }
  .icon-btn-outline:hover { background: var(--workspace); }
  .icon-btn-outline svg { width: 15px; height: 15px; }
  .db-btn { appearance: none; border: 1px dashed var(--border); background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font: 600 .72rem 'Manrope'; padding: .38rem .6rem; border-radius: .5rem; }
  .db-btn:hover { color: var(--ink); border-color: var(--muted); }
  .db-btn svg { width: 13px; height: 13px; }

  .zoom { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font: 500 .74rem 'JetBrains Mono'; color: var(--muted); }
  .zoom button { appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--ink); width: 22px; height: 22px; border-radius: .4rem; cursor: pointer; }

  .btn-primary {
    appearance: none; border: 0; border-radius: .7rem; cursor: pointer; background: var(--accent); color: var(--accent-ink);
    font: 700 .76rem 'Manrope'; padding: .5rem .95rem; display: inline-flex; align-items: center; gap: .4rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.08); transition: filter .12s ease;
  }
  .btn-primary:hover { filter: brightness(1.06); }
  button:focus-visible, [tabindex]:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ---------- workbench ---------- */
  .workbench { display: grid; grid-template-columns: 250px minmax(0,1fr) 260px; flex: 1; min-height: 0; }

  /* left: estrutura + camadas empilhados */
  .left-panel { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
  .panel-title { font: 700 .64rem 'Manrope'; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: .8rem .9rem .4rem; }

  .structure { flex: 0 0 auto; max-height: 46%; overflow-y: auto; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
  .structure.templates-nav { max-height: none; flex: 0 0 auto; padding: 0 0 .5rem; }
  .structure.templates-nav .chapter-row { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .template-filter { display: flex; flex-wrap: wrap; gap: .3rem; padding: .6rem .9rem .5rem; }
  .template-filter button {
    appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer;
    font: 700 .64rem 'Manrope'; padding: .25rem .6rem; border-radius: 999px;
  }
  .template-filter button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .part-title { font: 700 .62rem 'Manrope'; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: .5rem .9rem .25rem; }
  .chapter-row { width: 100%; text-align: left; appearance: none; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; gap: .25rem; padding: .4rem .9rem; color: var(--ink); }
  .chapter-row:hover { background: var(--workspace); }
  .chapter-row[aria-current="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
  .chapter-row[draggable="true"] { cursor: grab; }
  .chapter-row.is-dragging { opacity: .4; }
  .chapter-row.is-drop-target { box-shadow: inset 0 2px 0 var(--accent); }
  .chapter-head { display: flex; align-items: center; gap: .4rem; min-width: 0; }
  .chapter-name { font: 700 .76rem 'Manrope'; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .drag-handle { flex-shrink: 0; color: var(--muted); cursor: grab; display: inline-flex; opacity: .55; }
  .drag-handle svg { width: 10px; height: 14px; }
  .chapter-meta { display: flex; align-items: center; gap: .4rem; font: 500 .64rem 'JetBrains Mono'; color: var(--muted); }
  .chip { display: inline-flex; align-items: center; font: 700 .58rem 'Manrope'; letter-spacing: .03em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 999px; }
  .chip.reviewed { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); }
  .chip.draft { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }
  .side-pills { display: flex; gap: .3rem; margin-top: .15rem; }
  .side-pill { font: 700 .58rem 'JetBrains Mono'; padding: .08rem .35rem; border-radius: .3rem; border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
  .side-pill:hover { border-color: var(--muted); color: var(--ink); }
  .side-pill.is-active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

  .layer-list { flex: 1; overflow-y: auto; padding: 0 .5rem .5rem; display: flex; flex-direction: column-reverse; gap: 2px; min-height: 0; }
  .layer-row { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: .5rem; cursor: pointer; border: 1px solid transparent; transition: background .12s ease; }
  .layer-row:hover { background: var(--workspace); }
  .layer-row.is-selected { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .layer-row .swatch { width: 17px; height: 17px; border-radius: .35rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
  .layer-row .swatch svg { width: 10px; height: 10px; }
  .layer-row .name { font: 600 .74rem 'Manrope'; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .layer-row .icon-btn { appearance: none; border: 0; background: transparent; color: var(--muted); width: 20px; height: 20px; border-radius: .35rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .layer-row .icon-btn:hover { background: var(--bg); color: var(--ink); }
  .layer-row .icon-btn svg { width: 12px; height: 12px; }
  .layer-row.is-hidden .name { opacity: .4; }
  .layer-row.is-locked { opacity: .65; }
  .layer-row[draggable="true"] { cursor: grab; }
  .layer-row.is-dragging { opacity: .4; }
  .layer-row.is-drop-target { box-shadow: inset 0 2px 0 var(--accent); }
  .layer-row .name-input { font: 600 .74rem 'Manrope'; flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--accent); border-radius: .3rem; padding: .1rem .3rem; color: var(--ink); }
  .zorder { display: flex; flex-direction: column; }
  .zorder button svg { width: 10px; height: 10px; }

  /* réguas — alinhadas à página ativa do spread, pra precisão de posicionamento */
  .ruler-h, .ruler-v {
    position: absolute; background: var(--ruler); border: 1px solid var(--border); z-index: 3;
    pointer-events: none; overflow: hidden;
  }
  .ruler-h { height: 18px; border-bottom: 0; }
  .ruler-v { width: 18px; border-right: 0; }
  .tick { position: absolute; background: var(--ruler-tick); }
  .ruler-h .tick { bottom: 0; width: 1px; }
  .ruler-v .tick { right: 0; height: 1px; }
  .tick.major { background: var(--ruler-text); }
  .tick-label { position: absolute; font: 500 .56rem 'JetBrains Mono'; color: var(--ruler-text); white-space: nowrap; }
  .ruler-h .tick-label { top: 1px; }
  .ruler-v .tick-label { left: 2px; writing-mode: vertical-rl; transform: rotate(180deg); }
  .ruler-mark {
    position: absolute; background: color-mix(in srgb, var(--accent) 22%, transparent);
    border: 1px solid var(--accent); pointer-events: none;
  }
  .ruler-h .ruler-mark { top: 0; bottom: -1px; border-left: 0; border-right: 0; }
  .ruler-v .ruler-mark { left: 0; right: -1px; border-top: 0; border-bottom: 0; }

  /* barra flutuante de ferramentas — modo da ferramenta, não menu de ação única */
  /* a barra cresceu (select/desenhar/forma/texto/imagem/duplicar/alinhar/cancelar) — numa
     janela estreita ela não cabe numa linha só. Um elemento ABSOLUTAMENTE posicionado com
     width:auto + flex-wrap colapsa pra 1 botão por linha em vez de quebrar direito (bug real
     de sizing, não só estética) — por isso a barra em si não é mais a posicionada: uma "doca"
     invisível de largura total é que fica presa no rodapé do canvas, e centraliza a barra
     dentro de si via flexbox normal, onde quebra de linha funciona como esperado. */
  .float-toolbar-dock {
    position: absolute; left: 0; right: 0; bottom: 1.1rem; z-index: 15;
    display: flex; justify-content: center; padding: 0 1rem; pointer-events: none;
  }
  .float-toolbar {
    pointer-events: auto; max-width: 420px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; row-gap: 4px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: .75rem; padding: 4px; box-shadow: 0 10px 28px -8px rgba(0,0,0,.35);
  }
  .float-toolbar .ft-btn {
    appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer;
    width: 34px; height: 34px; border-radius: .55rem; display: inline-flex; align-items: center; justify-content: center;
    position: relative;
  }
  .float-toolbar .ft-btn:hover { background: var(--workspace); color: var(--ink); }
  .float-toolbar .ft-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
  .float-toolbar .ft-btn { gap: 1px; }
  .float-toolbar .ft-btn > svg:first-child { width: 16px; height: 16px; }
  .float-toolbar .ft-btn .ft-chevron { width: 9px; height: 9px; opacity: .6; margin-left: -1px; }
  .float-toolbar .ft-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
  /* menu de opções — o MESMO componente serve Desenhar, Forma e Texto: cada botão com
     chevron tem o seu próprio conjunto, não só um dos cinco. */
  .ft-menu {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: .4rem; width: 150px;
    background: var(--panel); border: 1px solid var(--border); border-radius: .6rem; box-shadow: 0 10px 28px -8px rgba(0,0,0,.35);
    padding: .3rem; display: none; z-index: 16;
  }
  .ft-menu.is-open { display: block; }
  .ft-menu button { width: 100%; appearance: none; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: .55rem; font: 600 .76rem 'Manrope'; padding: .4rem .5rem; border-radius: .4rem; }
  .ft-menu button:hover { background: var(--workspace); }
  .ft-menu svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
  .ft-menu-t { width: 14px; text-align: center; flex-shrink: 0; font-family: 'Manrope'; color: var(--ink); }
  .el.is-armed-target { cursor: crosshair !important; }

  /* canvas workspace — spread (esquerda + direita) */
  .canvas-wrap { background: var(--workspace); display: flex; align-items: center; justify-content: center; overflow: auto; padding: 2.5rem 2rem 2rem 2.5rem; position: relative; }
  .app.is-previewing .toolbar, .app.is-previewing .left-panel, .app.is-previewing .inspector-wrap,
  .app.is-previewing .statusbar, .app.is-previewing .float-toolbar-dock, .app.is-previewing .page-strip { display: none !important; }
  .app.is-previewing .workbench { grid-template-columns: 1fr; }
  .app.is-previewing .canvas-wrap { padding: 3rem; }
  .exit-preview {
    display: none; position: fixed; top: 1.1rem; right: 1.1rem; z-index: 50;
    appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--ink);
    font: 600 .78rem 'Manrope'; padding: .5rem .8rem; border-radius: .6rem; cursor: pointer;
    align-items: center; gap: .4rem; box-shadow: 0 8px 20px -6px rgba(0,0,0,.4);
  }
  .app.is-previewing .exit-preview { display: inline-flex; }
  .rulers-off .ruler-h, .rulers-off .ruler-v { display: none !important; }
  .spread { display: flex; gap: 2px; position: relative; }
  .spread::before { content: ""; position: absolute; left: calc(50% - 7px); top: -10px; bottom: -10px; width: 14px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.14), transparent); pointer-events: none; }
  .page {
    position: relative; width: 266px; aspect-ratio: 1 / 1.3; background: #fff; overflow: hidden;
    padding-top: var(--pm-top, 24px); padding-bottom: var(--pm-bottom, 24px);
  }
  .page.side-left { border-radius: 3px 0 0 3px; padding-left: var(--pm-left, 24px); padding-right: calc(var(--pm-right, 24px) - 8px); }
  .page.side-right { border-radius: 0 3px 3px 0; padding-left: calc(var(--pm-left, 24px) - 8px); padding-right: var(--pm-right, 24px); }
  /* paisagem — mesmo formato de trim, só deitado; independente de dupla/única */
  .canvas-wrap.landscape .page { width: 346px; aspect-ratio: 1.3 / 1; }
  .page-shadow { box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 20px 48px -20px rgba(0,0,0,.55); }
  .page-surface { position: absolute; inset: 0; }
  .side-label { position: absolute; bottom: -1.5rem; font: 600 .66rem 'JetBrains Mono'; color: var(--muted); }
  .side-left .side-label { left: 0; } .side-right .side-label { right: 0; }

  .el { position: absolute; }
  .el[data-selectable] { cursor: grab; }
  .el[data-selectable]:active { cursor: grabbing; }
  .el.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 4; }
  .handle { position: absolute; width: 9px; height: 9px; background: var(--accent); border: 1.5px solid #fff; border-radius: 2px; z-index: 5; }
  .handle.nw { top: -5px; left: -5px; cursor: nwse-resize; } .handle.ne { top: -5px; right: -5px; cursor: nesw-resize; }
  .handle.sw { bottom: -5px; left: -5px; cursor: nesw-resize; } .handle.se { bottom: -5px; right: -5px; cursor: nwse-resize; }

  /* a div de conteúdo PRECISA ocupar 100% da caixa de tamanho fixo pra o overflow:hidden
     valer — sem isso ela cresce com o texto e vaza por cima da camada seguinte. */
  .el-text, .el-prose, .el-scripture, .el-tags, .el-space { height: 100%; overflow: hidden; }
  .el-text { font-family: 'Manrope'; font-weight: 800; color: #14151a; line-height: 1.08; user-select: none; }
  .el-eyebrow { font-family: 'JetBrains Mono'; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; user-select: none; }
  .el-prose { font-family: 'Source Serif 4', serif; color: #2a2a2e; line-height: 1.55; user-select: none; overflow: hidden; }
  .el-prose.is-italic { font-style: italic; }
  .el-shape { border-radius: 50%; }
  .el-rule { background: currentColor; }
  .el-space { border: 1.5px dashed color-mix(in srgb, var(--space) 70%, transparent); background: color-mix(in srgb, var(--space) 6%, transparent); border-radius: 6px; padding: .5rem .6rem; overflow: hidden; }
  .el-space .prompt { font: 700 .68rem 'Manrope'; color: var(--space); margin: 0 0 .4rem; }
  .el-space .rule { height: 1px; background: color-mix(in srgb, var(--space) 35%, transparent); margin-bottom: .5rem; }

  .el-scripture { border-left: 3px solid #2b6ca8; padding: .2rem 0 .2rem .6rem; overflow: hidden; }
  .el-scripture .ref { font: 700 .62rem 'JetBrains Mono'; letter-spacing: .04em; text-transform: uppercase; color: #2b6ca8; margin: 0 0 .25rem; }
  .el-scripture .quote { font-family: 'Source Serif 4', serif; font-style: italic; color: #2a2a2e; line-height: 1.45; }

  .el-image { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, var(--workspace), var(--workspace) 8px, color-mix(in srgb, var(--workspace) 60%, var(--border)) 8px, color-mix(in srgb, var(--workspace) 60%, var(--border)) 16px); border: 1px solid var(--border); border-radius: 4px; color: var(--muted); overflow: hidden; }
  .el-image svg { width: 28%; height: 28%; }
  .el-tags { display: flex; flex-wrap: wrap; gap: .3rem; align-content: flex-start; overflow: hidden; }
  .el-tags .tag { font: 600 .62rem 'Manrope'; padding: .18rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: color-mix(in srgb, var(--accent) 70%, #14151a); white-space: nowrap; }

  /* comentário em margem — reaproveitado do Miolo, agora preso a uma camada em vez de um
     parágrafo de manuscrito */
  /* cartão de comentário no estilo das anotações do próprio Claude Code — escuro sempre
     (não segue o tema claro/escuro da página, é um "post-it" sobreposto), pílula azul pro
     autor, breadcrumb de contexto em cima (capítulo › camada), igual a uma referência real. */
  .comment-marker { position: absolute; right: -16px; top: -6px; width: 16px; height: 16px; border-radius: 50%; border: 0; background: #0a84ff; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 6; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
  .comment-popover {
    position: absolute; right: -14px; top: 14px; width: 220px; z-index: 7;
    background: #1c1c1e; border: 1px solid #38383a; border-radius: .85rem;
    box-shadow: 0 16px 36px -10px rgba(0,0,0,.55); padding: .7rem .75rem; display: none;
  }
  .comment-popover.is-open { display: block; }
  .comment-popover .breadcrumb { font: 500 .6rem 'Manrope'; color: #8e8e93; margin: 0 0 .45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .comment-popover .who { display: inline-flex; align-items: center; font: 700 .64rem 'Manrope'; color: #fff; background: #0a84ff; padding: .15rem .55rem; border-radius: 999px; margin: 0 0 .45rem; }
  .comment-popover .note { font: 400 .72rem/1.45 'Manrope'; color: #e5e5e7; margin: 0; }
  .comments-off .comment-marker, .comments-off .comment-popover { display: none !important; }

  .bleed-guide { position: absolute; inset: -10px; border: 1px dashed color-mix(in srgb, var(--critical) 55%, transparent); pointer-events: none; opacity: 0; }
  .page.is-grafica .bleed-guide { opacity: 1; }

  /* right: inspector */
  .inspector-wrap { position: relative; min-width: 0; min-height: 0; }
  .inspector-close { position: absolute; top: .6rem; right: .6rem; z-index: 5; width: 24px; height: 24px; }
  .inspector { background: var(--panel); border-left: 1px solid var(--border); overflow-y: auto; height: 100%; }
  .workbench.inspector-closed { grid-template-columns: 250px minmax(0,1fr) 0; }
  .workbench.inspector-closed .inspector-wrap { display: none; }
  .inspector .empty { padding: 1.2rem .9rem; font: 500 .78rem 'Manrope'; color: var(--muted); }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0 .9rem .7rem; }
  .field { display: flex; flex-direction: column; gap: .25rem; }
  .field label { font: 600 .6rem 'Manrope'; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .field input[type="number"], .field input[type="text"], .field textarea, .field select {
    font: 500 .78rem 'JetBrains Mono'; color: var(--ink); background: var(--workspace); border: 1px solid var(--border);
    border-radius: .4rem; padding: .35rem .5rem; width: 100%;
  }
  .field textarea { font-family: 'Manrope'; resize: vertical; min-height: 3.6rem; }
  .inspector-section-title { font: 700 .64rem 'Manrope'; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .9rem .9rem .4rem; border-top: 1px solid var(--border); margin-top: .3rem; }

  .inspector-tabs { display: flex; gap: .2rem; padding: 0 .9rem .7rem; border-bottom: 1px solid var(--border); margin-bottom: .7rem; }
  .inspector-tabs button {
    appearance: none; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted);
    cursor: pointer; font: 700 .68rem 'Manrope'; padding: .3rem .1rem; margin-right: .8rem;
  }
  .inspector-tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
  .field input:disabled, .field textarea:disabled { opacity: .5; cursor: not-allowed; }
  .add-comment-btn {
    appearance: none; border: 1px dashed var(--border); background: transparent; color: var(--muted); cursor: pointer;
    font: 600 .76rem 'Manrope'; padding: .5rem; border-radius: .5rem; width: calc(100% - 1.8rem); margin: 0 .9rem;
  }
  .add-comment-btn:hover { color: var(--ink); border-color: var(--muted); }

  .token-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
  .token-chip {
    appearance: none; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent); cursor: pointer; font: 700 .62rem 'JetBrains Mono'; padding: .22rem .5rem; border-radius: .4rem;
  }
  .token-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
  .token-chip:active { transform: translateY(1px); }

  /* popover: inserir texto do banco — dois níveis, item depois campo */
  .db-popover { position: absolute; top: 100%; margin-top: .4rem; width: 300px; max-height: 420px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: .7rem; box-shadow: 0 12px 32px -10px rgba(0,0,0,.4); z-index: 20; display: none; }
  .db-popover.is-open { display: block; }
  .db-popover .panel-title { padding-top: .7rem; }
  .db-source { font: 700 .6rem 'Manrope'; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: .6rem .9rem .2rem; }
  .db-item-head { width: 100%; text-align: left; appearance: none; border: 0; background: transparent; cursor: pointer; padding: .5rem .9rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); }
  .db-item-head:hover { background: var(--workspace); }
  .db-item-head .t { font: 700 .76rem 'Manrope'; }
  .db-item-head svg { width: 12px; height: 12px; color: var(--muted); transition: transform .15s ease; }
  .db-item-head[aria-expanded="true"] svg { transform: rotate(90deg); }
  .db-fields { display: none; padding: 0 .9rem .5rem 1.1rem; flex-direction: column; gap: 2px; }
  .db-fields.is-open { display: flex; }
  .db-field { appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left; padding: .35rem .5rem; border-radius: .4rem; display: flex; align-items: baseline; gap: .4rem; }
  .db-field:hover { background: var(--workspace); }
  .db-field .k { font: 700 .66rem 'Manrope'; color: var(--accent); flex-shrink: 0; }
  .db-field .v { font: 400 .66rem 'Manrope'; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .icon-btn-outline[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  .template-bar { display: inline-flex; align-items: center; gap: .4rem; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: .6rem; padding: .25rem .5rem; }
  .template-bar[hidden] { display: none; }
  .template-bar #tpl-label { font: 600 .7rem 'Manrope'; color: var(--accent); white-space: nowrap; padding: 0 .2rem; }

  /* tira de páginas — navegação rápida tipo slide sorter, uma pastilha por página real do
     livro (não por capítulo — spread dupla vira 2 pastilhas, página única vira 1) */
  .page-strip { display: flex; gap: .45rem; padding: .55rem .9rem; border-top: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
  .page-strip[hidden] { display: none; }
  .page-tile {
    flex: 0 0 auto; width: 56px; appearance: none; border: 1px solid var(--border); background: var(--workspace);
    border-radius: .5rem; padding: .4rem .3rem; cursor: pointer; display: flex; flex-direction: column;
    align-items: center; gap: .18rem; color: var(--ink); transition: border-color .12s ease;
  }
  .page-tile:hover { border-color: var(--muted); }
  .page-tile.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .page-tile .pt-num { font: 700 .68rem 'JetBrains Mono'; }
  .page-tile .pt-label { font: 500 .52rem 'Manrope'; line-height: 1.15; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; color: var(--muted); }

  /* rodapé — informação secundária que não precisa competir por espaço lá em cima */
  .statusbar {
    display: flex; align-items: center; gap: 1.1rem; padding: .4rem 1rem; border-top: 1px solid var(--border);
    background: var(--panel); font: 500 .68rem 'JetBrains Mono'; color: var(--muted); flex-shrink: 0;
  }
  .statusbar .sep { width: 1px; height: 13px; background: var(--border); }
  .statusbar .sel { color: var(--ink); font-weight: 600; }
  .statusbar .zoom { margin: 0 0 0 auto; gap: .4rem; }
  .statusbar .zoom button { width: 18px; height: 18px; border-radius: .3rem; font-size: .75rem; }

  /* estrutura — partes colapsáveis nativamente, só a corrente fica aberta por padrão */
  .part-block summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .3rem; }
  .part-block summary::-webkit-details-marker { display: none; }
  .part-block summary svg { width: 10px; height: 10px; color: var(--muted); transition: transform .15s ease; flex-shrink: 0; }
  .part-block[open] summary svg { transform: rotate(90deg); }

  .app.is-previewing .ruler-h, .app.is-previewing .ruler-v, .app.is-previewing .handle,
  .app.is-previewing .comment-marker, .app.is-previewing .comment-popover, .app.is-previewing .bleed-guide { display: none !important; }
  .app.is-previewing .el.is-selected { outline: none; }

  /* abas Estrutura / Templates — dois conceitos diferentes competindo pelo mesmo espaço fixo
     do painel esquerdo; abas evitam que Templates cresça e empurre a Estrutura pra fora. */
  .panel-tabs { display: flex; gap: 1rem; padding: .7rem .9rem 0; border-bottom: 1px solid var(--border); }
  .panel-tabs button { appearance: none; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; color: var(--muted); font: 700 .64rem 'Manrope'; letter-spacing: .07em; text-transform: uppercase; padding: 0 0 .55rem; }
  .panel-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }

  /* menu de contexto (botão direito) — duplicar camada ou capítulo sem passar pela barra */
  .ctx-menu {
    position: fixed; z-index: 60; min-width: 150px; background: var(--panel); border: 1px solid var(--border); border-radius: .6rem;
    box-shadow: 0 14px 34px -10px rgba(0,0,0,.45); padding: .3rem;
  }
  .ctx-menu button { width: 100%; appearance: none; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: .55rem; font: 600 .76rem 'Manrope'; padding: .45rem .55rem; border-radius: .4rem; }
  .ctx-menu button:hover { background: var(--workspace); }
  .ctx-menu svg { width: 13px; height: 13px; color: var(--muted); }

  /* página única — mesmo formato de página, sem o par verso/recto lado a lado */
  .canvas-wrap.single-page .spread::before { display: none; }
  .canvas-wrap.single-page .page.side-left { display: none; }
  .canvas-wrap.single-page .page.side-right { border-radius: 3px; padding-left: var(--pm-left, 24px); padding-right: var(--pm-right, 24px); }

  /* cabeçalho e rodapé padrão da página — posição e cor vêm inline de MASTER_CHROME (editável
     pelo inspetor, aba "Padrão global"); aqui só a tipografia-base de cada um. */
  .page-chrome-header, .page-chrome-footer {
    position: absolute; pointer-events: none; z-index: 2;
    font: 600 .56rem 'Manrope'; letter-spacing: .05em; text-transform: uppercase;
  }
  .page-chrome-footer { font-family: 'JetBrains Mono'; letter-spacing: 0; text-transform: none; }
  .canvas-wrap.chrome-off .page-chrome-header, .canvas-wrap.chrome-off .page-chrome-footer { display: none; }

  /* vidro estilo Apple — só nos elementos que FLUTUAM sobre o canvas (barra flutuante, menus,
     popovers): desfoque real, não opacidade lisa. Os painéis estruturais (esquerda/direita)
     continuam sólidos — são chão, não flutuam, e precisam de legibilidade constante. */
  .toolbar, .statusbar, .page-strip {
    background: color-mix(in srgb, var(--panel) 86%, transparent);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .float-toolbar, .ft-menu, .db-popover, .template-bar, .ctx-menu {
    background: color-mix(in srgb, var(--panel) 74%, transparent);
    backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%);
    border-color: color-mix(in srgb, var(--border) 65%, transparent);
  }
  .float-toolbar { box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 12px 32px -10px rgba(0,0,0,.4); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .float-toolbar { box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 12px 32px -10px rgba(0,0,0,.6); }
  }
  :root[data-theme="dark"] .float-toolbar { box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 12px 32px -10px rgba(0,0,0,.6); }

  /* dica rápida ao pairar — reaproveita o aria-label que todo botão de ícone já carrega (é
     exigido pra acessibilidade de qualquer forma), então cobre a ferramenta inteira sem
     precisar anotar cada botão duas vezes. Some rápido, aparece só depois de meio segundo
     parado — não é pra competir com clique duplo. */
  [aria-label] { position: relative; }
  [aria-label]::after {
    content: attr(aria-label);
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #1d1d1f; color: #fff; font: 600 .66rem 'Manrope'; white-space: nowrap;
    padding: .35rem .6rem; border-radius: .4rem; box-shadow: 0 8px 20px -6px rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 90;
  }
  [aria-label]:hover::after, [aria-label]:focus-visible::after { opacity: 1; transition-delay: .5s; }
  .float-toolbar [aria-label]::after, .statusbar [aria-label]::after {
    top: auto; bottom: calc(100% + 8px);
  }
  svg { display: block; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
  @media (max-width: 960px) {
    .workbench { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; }
    .left-panel, .inspector { border: 0; border-bottom: 1px solid var(--border); max-height: 260px; }
    .spread { flex-direction: column; }
  }