/* ==========================================================================
   Papiros — visual
   Base do Salmodiando (papel, DM Sans) com os detalhes do portal Oficina
   Ministerial: borda laranja suave, brilho no canto dos cartões, rótulo com
   traço, abertura escura e cartão "parte do portal". Capas em Cormorant.
   ========================================================================== */

:root {
  --paper: #f4f1ea;
  --surface: #ffffff;
  --soft: #ece7db;
  --ink: #1c1c1c;
  --muted: #6b6b66;
  --line: rgba(28, 28, 28, .12);
  --accent: #ec8800;
  --accent-claro: #ff9200;
  --accent-contrast: #171717;
  --danger: #b23b3b;
  --ok: #3f7d4e;
  --shadow: 0 16px 45px rgba(28, 28, 28, .10);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* Cartões do portal (tema claro): branco descendo para o cinza, brilho laranja no canto */
  --card-borda: rgba(236, 136, 0, .3);
  --card-fundo: radial-gradient(110% 85% at 100% 0%, rgba(236, 136, 0, .2), rgba(236, 136, 0, .06) 45%, transparent 70%),
                linear-gradient(160deg, #ffffff 0%, #f4f4f4 50%, #e4e4e4 100%);
  --mesa: #e6e1d6;
}
body.dark {
  --paper: #161616;
  --surface: #222222;
  --soft: #2b2b2b;
  --ink: #ffffff;
  --muted: #bababa;
  --line: rgba(255, 255, 255, .14);
  --accent: #ff9200;
  --danger: #ef9b96;
  --ok: #8fd19e;
  --shadow: 0 16px 45px rgba(0, 0, 0, .24);
  --card-borda: rgba(255, 152, 0, .24);
  --card-fundo: radial-gradient(120% 90% at 100% 0%, rgba(255, 152, 0, .08), transparent 60%), #1f1f1f;
  --mesa: #101010;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: var(--paper); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.app-shell { width: 100%; min-height: 100vh; background: var(--paper); }
.sidebar { background: var(--soft); color: var(--ink); border-right: 1px solid var(--line); }
.brand-script { font-family: "DM Sans", sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.muted { color: var(--muted); }
.rule { border-color: var(--line); }

/* Rótulo do portal: traço laranja + texto em caixa alta */
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent); flex: none; }
body:not(.dark) main .eyebrow { color: #2c2c2c; }
body:not(.dark) main .eyebrow::before { background: var(--accent); }

/* Cartões no padrão do portal */
.card-surface, .modal-card, .om-card {
  background: var(--card-fundo);
  border: 1px solid var(--card-borda);
  box-shadow: var(--shadow);
}
.om-card { border-radius: 16px; transition: border-color .25s ease, transform .25s ease; }
a.om-card:hover, button.om-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.nav-item { color: var(--muted); transition: .2s ease; }
.nav-item:hover, .nav-item.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
.nav-item.active { box-shadow: inset 3px 0 0 var(--accent); }
.nav-badge { margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--accent-claro); color: var(--accent-contrast); font-size: .72rem; font-weight: 800; text-align: center; line-height: 1.4rem; }
.nav-sep { margin: .75rem 1rem .2rem; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: .8; }
.primary-btn { background: var(--accent-claro); color: var(--accent-contrast); border: 1px solid var(--accent-claro); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.primary-btn:hover { transform: translateY(-2px); background: #ffa426; box-shadow: 0 10px 22px rgba(255,146,0,.22); }
.primary-btn:disabled { opacity: .6; transform: none; cursor: default; }
.secondary-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--line); transition: .18s ease; }
.secondary-btn:hover { border-color: var(--accent); color: var(--accent); }
.danger-btn { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); background: transparent; }
.danger-btn:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.ok-btn { background: var(--ok); color: #fff; border: 1px solid var(--ok); }
.field { width: 100%; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); color: var(--ink); padding: .72rem .85rem; }
.field::placeholder { color: var(--muted); opacity: .8; }
.field:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.view { display: none; }
.view.active { display: block; animation: appear .28s ease both; }
.modal { display: none; }
.modal.open { display: flex; animation: appear .18s ease both; }
.toast { background: var(--ink); color: var(--paper); transform: translate(-50%, 110px); opacity: 0; pointer-events: none; transition: .28s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.sidebar-overlay { display: none; }

body:not(.pode-escrever) .so-escritor { display: none !important; }
body:not(.revisor) .so-revisor { display: none !important; }

/* ---- Abertura (mesmo padrão dos apps do portal) ---- */
#splash { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: #161616; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; transition: opacity .5s ease, visibility .5s ease; }
#splash.oculto { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-conteudo { text-align: center; padding: 0 28px; }
.splash-logo { width: 88px; height: 88px; object-fit: cover; object-position: 0% center; border-radius: 22px; margin: 0 auto 22px; display: block; box-shadow: 0 0 46px rgba(255,146,0,.3); animation: splash-surge .6s cubic-bezier(.22,.75,.3,1) both; }
.splash-titulo { font-weight: 700; font-size: 1.7rem; color: #fff; letter-spacing: -.01em; margin: 0 0 10px; }

.splash-saudacao { font-weight: 600; font-size: 1.05rem; color: #ff9200; margin: 0 0 26px; min-height: 1.5em; }
.splash-portal { font-size: .85rem; color: #9a9a9a; margin: 0; opacity: 0; transition: opacity .7s ease, transform .7s ease; transform: translateY(6px); }
.splash-portal.visivel { opacity: 1; transform: none; }
.splash-portal b { color: #fff; font-weight: 600; }
@keyframes splash-surge { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes splash-linha { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes splash-letra { to { opacity: 1; filter: blur(0); transform: none; } }

/* ---- Cartão "parte do portal" (logo + Oficina Ministerial) ---- */
.portal-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #161616; color: #d2d2d2; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; text-decoration: none; transition: transform .25s ease, border-color .25s ease; position: relative; overflow: hidden; }
.portal-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(255,146,0,.14), transparent 60%); pointer-events: none; }
.portal-card:hover { transform: translateY(-2px); border-color: rgba(255,146,0,.75); }
.portal-logo { width: 40px; height: 40px; object-fit: cover; object-position: 0% center; border-radius: 9px; flex: none; }
.portal-nome { font-weight: 700; font-size: 15px; line-height: 1.15; margin: 0; }
.portal-nome span:first-child { color: #fff; }
.portal-nome span:last-child { color: #ff9200; }
.portal-texto { font-size: 13px; line-height: 1.5; margin: 0; }
.portal-texto b { color: #fff; font-weight: 600; }
.portal-link { font-size: 12px; font-weight: 700; color: #ff9200; margin: 4px 0 0; }
.portal-card--compacto { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
.app-footer { border-top: 1px solid var(--line); }

/* ---- Filtros ---- */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--card-borda); background: var(--surface); color: var(--ink); font-size: .85rem; font-weight: 700; transition: .18s ease; white-space: nowrap; }
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--accent-claro); border-color: var(--accent-claro); color: var(--accent-contrast); }
.chip svg { width: 1rem; height: 1rem; }
.chip-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: thin; }

/* ---- Cartões dos textos ---- */
.papiro-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .papiro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .papiro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .papiro-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 2000px) { .papiro-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.papiro-card { display: flex; flex-direction: column; text-align: left; background: var(--card-fundo); border: 1px solid var(--card-borda); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transition: transform .25s ease, border-color .25s ease; color: inherit; padding: 0; width: 100%; }
.papiro-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.papiro-card:hover .capa { transform: rotate(-1deg) scale(1.02); }
.papiro-card-capa { padding: .9rem .9rem 0; }
.papiro-card-info { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; position: relative; }
.papiro-card-info::before { content: ""; position: absolute; top: 0; left: 1rem; right: 1rem; height: 1px; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .55; }
.papiro-card-tipo { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: .3rem; }
.papiro-card-tipo::before { content: ""; width: 14px; height: 2px; background: var(--accent); }
.papiro-card-titulo { font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.papiro-card-meta { font-size: .8rem; color: var(--muted); font-weight: 600; }
.status-chip { position: absolute; top: -.75rem; right: .8rem; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.status-rascunho { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.status-revisao { background: #ff9200; color: #171717; }
.status-publicado { background: var(--ok); color: #fff; }
.status-recusado { background: var(--danger); color: #fff; }

/* ---- Capas (proporção de livro 3:4) ---- */
.capa { position: relative; aspect-ratio: 3 / 4; border-radius: .7rem .9rem .9rem .7rem; overflow: hidden; display: flex; flex-direction: column; padding: 9% 10% 8%; color: var(--capa-tinta); background: var(--capa-fundo); box-shadow: inset 6px 0 0 rgba(0,0,0,.10), inset 8px 0 14px -6px rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.14); transition: transform .3s ease; container-type: inline-size; isolation: isolate; }
.capa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--capa-textura, none); opacity: .55; }
.capa::after { content: ""; position: absolute; inset: 4.5% 6%; border: 1px solid var(--capa-detalhe); border-radius: .3rem; opacity: .55; pointer-events: none; }
.capa-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.capa.com-imagem { --capa-tinta: #fffaf0 !important; --capa-detalhe: #ffb347 !important; --capa-tag-tinta: #171717 !important; }
.capa.com-imagem::before { background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.15) 40%, rgba(0,0,0,.75)); opacity: 1; }
.capa-tag { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: .3em; padding: .3em .7em; border-radius: 999px; background: var(--capa-detalhe); color: var(--capa-tag-tinta, #171717); font-family: "DM Sans", sans-serif; font-size: max(9px, 5.6cqi); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.capa-tag svg { width: 1.1em; height: 1.1em; }
.capa-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4cqi; min-height: 0; }
.capa-ornamento { width: 22cqi; height: 2px; background: var(--capa-detalhe); position: relative; }
.capa-ornamento::before, .capa-ornamento::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; background: var(--capa-detalhe); transform: translateY(-50%) rotate(45deg); }
.capa-ornamento::before { left: -8px; }
.capa-ornamento::after { right: -8px; }
.capa-titulo { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 13cqi; line-height: 1.02; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.capa-sub { margin: 0; font-family: var(--serif); font-style: italic; font-size: 6.4cqi; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.capa-citacao { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 8.6cqi; line-height: 1.18; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.capa-aspas { font-family: var(--serif); font-size: 30cqi; line-height: .5; height: 12cqi; color: var(--capa-detalhe); }
.capa-autor { margin: 0; text-align: center; font-family: "DM Sans", sans-serif; font-size: max(9px, 5.2cqi); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.capa-papiro  { --capa-fundo: linear-gradient(160deg, #efe2c4, #dcc59a); --capa-tinta: #3b2a17; --capa-detalhe: #b9772a; --capa-tag-tinta: #fff8ec;
                --capa-textura: repeating-linear-gradient(0deg, rgba(120,84,40,.10) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(120,84,40,.08) 0 1px, transparent 1px 11px); }
.capa-areia   { --capa-fundo: linear-gradient(165deg, #fbf8f1, #ece5d4); --capa-tinta: #1c1c1c; --capa-detalhe: #ff9200; }
.capa-grafite { --capa-fundo: linear-gradient(160deg, #2b2b2b, #141414); --capa-tinta: #f4f1ea; --capa-detalhe: #ff9200;
                --capa-textura: radial-gradient(circle at 85% 8%, rgba(255,146,0,.35), transparent 45%); }
.capa-laranja { --capa-fundo: linear-gradient(160deg, #ffa733, #d96a00); --capa-tinta: #1a1208; --capa-detalhe: #1a1208; --capa-tag-tinta: #ffb347;
                --capa-textura: radial-gradient(circle at 15% 90%, rgba(255,255,255,.28), transparent 50%); }
.capa-oliva   { --capa-fundo: linear-gradient(160deg, #66783f, #343f1d); --capa-tinta: #f6f1df; --capa-detalhe: #e2c46f; }
.capa-vinho   { --capa-fundo: linear-gradient(160deg, #7a2432, #3a0d16); --capa-tinta: #fbeee6; --capa-detalhe: #e8b25c; }
.capa-noite   { --capa-fundo: linear-gradient(160deg, #23345a, #0d1424); --capa-tinta: #eef1fa; --capa-detalhe: #ffb347;
                --capa-textura: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 35% 75%, #fff, transparent), radial-gradient(1px 1px at 55% 45%, #fff, transparent); }
.capa-opcao { width: 2.6rem; height: 3.4rem; border-radius: .45rem; border: 2px solid transparent; background: var(--capa-fundo); box-shadow: inset 3px 0 0 rgba(0,0,0,.12); position: relative; }
.capa-opcao.active { border-color: var(--ink); outline: 2px solid var(--accent); outline-offset: 2px; }
.capa-opcao::after { content: ""; position: absolute; left: 25%; right: 25%; top: 45%; height: 2px; background: var(--capa-detalhe); }

/* ---- Autor ---- */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; overflow: hidden; flex: none; background: linear-gradient(150deg, #ffa733, #d96a00); color: #171717; font-weight: 800; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--card-borda); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.autor-links a { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; color: var(--accent); }
.autor-links a:hover { text-decoration: underline; }
.autor-links svg { width: 1rem; height: 1rem; }
.mostrar-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; }
.mostrar-toggle input { appearance: none; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: .2s ease; }
.mostrar-toggle input::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: .2s ease; }
.mostrar-toggle input:checked { background: var(--accent-claro); }
.mostrar-toggle input:checked::after { left: 1.05rem; }

/* ---- Leitura ---- */
.leitura-layout { display: grid; gap: 2rem; }
@media (min-width: 900px) { .leitura-layout { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } .leitura-lado { position: sticky; top: 1.5rem; } }
.leitura-lado .capa { max-width: 260px; margin: 0 auto; }
.texto-leitura { font-family: var(--serif); font-size: 1.32rem; line-height: 1.75; max-width: 46rem; color: var(--ink); overflow-wrap: break-word; }
.texto-leitura p { margin: 0 0 1.1em; }
.texto-leitura h1, .texto-leitura h2, .texto-leitura h3, .texto-leitura h4 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 1.6em 0 .6em; }
.texto-leitura h1 { font-size: 2.2rem; }
.texto-leitura h2 { font-size: 1.85rem; }
.texto-leitura h3 { font-size: 1.5rem; }
.texto-leitura h4 { font-size: 1.3rem; }
.texto-leitura blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--accent); font-style: italic; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); }
.texto-leitura hr, #quillEditor .ql-editor hr { border: 0; height: 6px; width: 90px; margin: 2em auto; background: radial-gradient(circle, var(--accent-claro) 2.5px, transparent 3px) 0 0 / 30px 6px repeat-x; }
.texto-leitura ul, .texto-leitura ol { margin: 0 0 1.1em; padding-left: 1.6em; }
.texto-leitura ul { list-style: disc; }
.texto-leitura ol { list-style: decimal; }
.texto-leitura li[data-list="bullet"] { list-style-type: disc; }
.texto-leitura li[data-list="ordered"] { list-style-type: decimal; }
.texto-leitura .ql-ui { display: none; }
.texto-leitura li[data-list="checked"], .texto-leitura li[data-list="unchecked"] { list-style: none; margin-left: -1.4em; }
.texto-leitura li[data-list="checked"]::before { content: "☑ "; color: var(--accent); }
.texto-leitura li[data-list="unchecked"]::before { content: "☐ "; color: var(--muted); }
.texto-leitura a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.texto-leitura img { max-width: 100%; height: auto; border-radius: .6rem; margin: .6em auto; display: block; }
.texto-leitura pre { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: .85em; background: var(--soft); padding: .8em 1em; border-radius: .6rem; }
.leitura-titulo { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; margin: 0; }
.leitura-sub { font-family: var(--serif); font-style: italic; font-size: 1.4rem; margin: .4rem 0 0; color: var(--muted); }
.aviso { border-radius: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--card-borda); background: var(--surface); font-size: .92rem; }
.aviso-revisao { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.aviso-recusado { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.aviso-publicado { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }

/* Formatos do editor (Quill) — valem no editor e na leitura */
.ql-font-garamond { font-family: "Cormorant Garamond", Georgia, serif; }
.ql-font-dmsans { font-family: "DM Sans", sans-serif; }
.ql-font-georgia { font-family: Georgia, "Times New Roman", serif; }
.ql-font-mono { font-family: ui-monospace, "Courier New", monospace; }
.ql-size-small { font-size: .78em; }
.ql-size-large { font-size: 1.4em; }
.ql-size-huge { font-size: 2em; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.texto-leitura .ql-indent-1 { padding-left: 3em; } .texto-leitura .ql-indent-2 { padding-left: 6em; }
.texto-leitura .ql-indent-3 { padding-left: 9em; } .texto-leitura .ql-indent-4 { padding-left: 12em; }

/* ---- Editor (folha tipo Word / Docs) ---- */
.modal-fullscreen.open { align-items: stretch; justify-content: stretch; padding: 0; }
.editor-header { background: var(--surface); }
.editor-mesa { background: var(--mesa); }
.editor-toolbar-wrap { position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line); }
.editor-folha { background: #fff; color: #1c1c1c; width: 100%; max-width: 816px; min-height: 1056px; margin: 0 auto; padding: 72px clamp(20px, 8%, 80px); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 12px 40px rgba(0,0,0,.12); border-radius: 4px; }
.folha-titulo { width: 100%; border: 0; outline: 0; background: transparent; color: #1c1c1c; font-family: var(--serif); font-weight: 700; font-size: 2.4rem; line-height: 1.1; padding: 0; }
.folha-sub { width: 100%; border: 0; outline: 0; background: transparent; color: #6b6b66; font-family: var(--serif); font-style: italic; font-size: 1.35rem; padding: .3rem 0 0; }
.folha-titulo::placeholder, .folha-sub::placeholder { color: #b9b4a8; }
.folha-divisor { height: 2px; width: 72px; background: #ff9200; margin: 1.4rem 0 1.2rem; }
#quillEditor { font-family: var(--serif); font-size: 1.25rem; color: #1c1c1c; border: 0 !important; }
#quillEditor .ql-editor { padding: 0; min-height: 600px; line-height: 1.7; font-size: inherit; }
#quillEditor .ql-editor p { margin-bottom: .6em; }
#quillEditor .ql-editor.ql-blank::before { left: 0; right: 0; font-style: italic; color: #b9b4a8; }
#quillEditor .ql-editor blockquote { border-left: 3px solid #ff9200; padding-left: 1em; font-style: italic; color: #4a4a46; }
#quillEditor .ql-editor img { max-width: 100%; border-radius: 6px; }
#quillEditor .ql-editor h1, #quillEditor .ql-editor h2, #quillEditor .ql-editor h3 { font-family: var(--serif); font-weight: 700; margin: 1em 0 .4em; }
#quillToolbar.ql-toolbar.ql-snow { border: 0; padding: 6px 10px; font-family: "DM Sans", sans-serif; display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; justify-content: center; }
#quillToolbar .ql-formats { margin-right: 0 !important; padding: 0 6px; border-right: 1px solid var(--line); display: inline-flex; align-items: center; }
#quillToolbar .ql-formats:last-child { border-right: 0; }
#quillToolbar button { width: 30px; height: 30px; padding: 5px; border-radius: 6px; }
#quillToolbar button:hover, #quillToolbar button.ql-active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
#quillToolbar .ql-stroke { stroke: var(--ink); }
#quillToolbar .ql-fill { fill: var(--ink); }
#quillToolbar .ql-picker { color: var(--ink); height: 30px; }
#quillToolbar .ql-picker-label { border-radius: 6px; display: flex; align-items: center; }
#quillToolbar button:hover .ql-stroke, #quillToolbar button.ql-active .ql-stroke, #quillToolbar .ql-picker-label:hover .ql-stroke { stroke: var(--accent); }
#quillToolbar button:hover .ql-fill, #quillToolbar button.ql-active .ql-fill { fill: var(--accent); }
#quillToolbar .ql-picker-options { background: var(--surface); border-color: var(--line) !important; border-radius: 8px; box-shadow: var(--shadow); z-index: 10; }
#quillToolbar .ql-picker.ql-font { width: 118px; }
#quillToolbar .ql-picker.ql-header { width: 100px; }
#quillToolbar .ql-picker.ql-size { width: 88px; }
#quillToolbar .ql-custom svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#quillToolbar .ql-custom:hover svg { stroke: var(--accent); }
.ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "Padrão"; }
.ql-snow .ql-picker.ql-font [data-value="garamond"]::before { content: "Garamond" !important; font-family: "Cormorant Garamond", serif; }
.ql-snow .ql-picker.ql-font [data-value="dmsans"]::before { content: "DM Sans" !important; font-family: "DM Sans", sans-serif; }
.ql-snow .ql-picker.ql-font [data-value="georgia"]::before { content: "Georgia" !important; font-family: Georgia, serif; }
.ql-snow .ql-picker.ql-font [data-value="mono"]::before { content: "Máquina" !important; font-family: ui-monospace, monospace; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "Normal"; }
.ql-snow .ql-picker.ql-size [data-value="small"]::before { content: "Pequeno" !important; }
.ql-snow .ql-picker.ql-size [data-value="large"]::before { content: "Grande" !important; }
.ql-snow .ql-picker.ql-size [data-value="huge"]::before { content: "Enorme" !important; }
.ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "Parágrafo"; }
.ql-snow .ql-picker.ql-header [data-value="1"]::before { content: "Título 1" !important; }
.ql-snow .ql-picker.ql-header [data-value="2"]::before { content: "Título 2" !important; }
.ql-snow .ql-picker.ql-header [data-value="3"]::before { content: "Título 3" !important; }
.ql-snow .ql-tooltip { z-index: 20; border-radius: 10px; box-shadow: var(--shadow); }
.ql-snow .ql-tooltip::before { content: "Abrir:"; }
.ql-snow .ql-tooltip[data-mode="link"]::before { content: "Link:"; }
.ql-snow .ql-tooltip a.ql-action::after { content: "Editar"; }
.ql-snow .ql-tooltip a.ql-remove::before { content: "Remover"; }
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Salvar"; }
.editor-status { position: sticky; bottom: 0; z-index: 4; background: var(--surface); border-top: 1px solid var(--line); }
.editor-painel { background: var(--card-fundo); border: 1px solid var(--card-borda); }

/* ---- Compartilhar ---- */
.share-previa { background: var(--mesa); border-radius: 1rem; display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 280px; }
.share-previa img { max-height: 62vh; max-width: 100%; border-radius: .6rem; box-shadow: 0 14px 40px rgba(0,0,0,.25); }
.share-opcao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: .8rem .4rem; border-radius: .9rem; border: 1px solid var(--card-borda); background: var(--surface); font-size: .78rem; font-weight: 700; color: var(--ink); transition: .18s ease; text-align: center; }
.share-opcao:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.share-opcao:disabled { opacity: .45; cursor: not-allowed; }
.share-opcao .share-ico { width: 2.4rem; height: 2.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.share-opcao .share-ico svg { width: 1.2rem; height: 1.2rem; }
.share-opcao.wa .share-ico { background: #25d366; color: #fff; }
.share-opcao.tg .share-ico { background: #229ed9; color: #fff; }
.share-opcao.fb .share-ico { background: #1877f2; color: #fff; }

/* ---- Tutorial (padrão das páginas de ajuda do portal) ---- */
.doc-secao { scroll-margin-top: 1.5rem; padding-top: 2.2rem; }
.doc-secao h2 { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 700; margin: 0 0 .8rem; letter-spacing: -.01em; }
.doc-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 14px; font-weight: 800; flex: none; }
.doc-secao h3 { margin: 1.4rem 0 .5rem; font-size: 1.05rem; font-weight: 700; }
.doc-secao p, .doc-secao li { color: var(--muted); font-size: .95rem; line-height: 1.75; }
.doc-secao p { margin: 0 0 .8rem; max-width: 76ch; }
.doc-secao strong { color: var(--ink); }
.doc-passos { counter-reset: passo; list-style: none; padding: 0; margin: .8rem 0 1rem; display: grid; gap: 10px; max-width: 76ch; }
.doc-passos li { counter-increment: passo; position: relative; padding: 12px 14px 12px 52px; border: 1px solid var(--card-borda); border-radius: 12px; background: var(--card-fundo); }
.doc-passos li::before { content: counter(passo); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--accent-claro); color: #171717; font-size: 13px; font-weight: 700; }
.doc-dica { display: flex; gap: 10px; max-width: 76ch; margin: 14px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: .9rem; line-height: 1.6; }
.doc-dica svg { color: var(--accent); flex: none; margin-top: 2px; width: 18px; height: 18px; }
.doc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.doc-cartao { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--card-borda); border-radius: 14px; background: var(--card-fundo); color: inherit; text-decoration: none; text-align: left; transition: border-color .2s ease, transform .2s ease; }
.doc-cartao:hover { border-color: var(--accent); transform: translateY(-2px); }
.doc-cartao svg { color: var(--accent); width: 22px; height: 22px; }
.doc-cartao strong { font-size: .95rem; }
.doc-cartao span { color: var(--muted); font-size: .85rem; line-height: 1.55; }
.doc-faq details { max-width: 80ch; border: 1px solid var(--card-borda); border-radius: 12px; background: var(--card-fundo); margin-bottom: 8px; }
.doc-faq summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.doc-faq summary::-webkit-details-marker { display: none; }
.doc-faq summary::after { content: "+"; color: var(--accent); font-size: 20px; line-height: 1; }
.doc-faq details[open] summary::after { content: "−"; }
.doc-faq details > p { padding: 0 16px 14px; margin: 0; color: var(--muted); line-height: 1.7; }

/* ---- Termos ---- */
.termos h3 { font-weight: 800; margin: 0 0 .5rem; display: flex; align-items: center; gap: 10px; }
.termos h3::before { content: ""; width: 14px; height: 2px; background: var(--accent); }
.termos p, .termos li { line-height: 1.8; color: var(--muted); }
.termos ul { padding-left: 1.2rem; list-style: disc; }
@media (min-width: 1100px) { .termos-colunas { columns: 2; column-gap: 3.5rem; } .termos-colunas > div { break-inside: avoid; } }
.termos-colunas > div { padding-bottom: 1.6rem; }
.termos-colunas { margin-top: 2rem !important; }
@media (min-width: 1700px) { .termos-colunas { columns: 3; } }
.doc-secao p, .doc-passos, .doc-dica, .doc-faq details { max-width: none !important; }

@keyframes appear { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 18rem; transform: translateX(-105%); transition: transform .25s ease; overflow-y: auto; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(22,22,22,.5); }
  .papiro-grid { gap: .8rem; }
  .papiro-card-capa { padding: .6rem .6rem 0; }
  .papiro-card-info { padding: .7rem .75rem .85rem; }
  .editor-folha { padding: 36px 20px; min-height: 0; border-radius: 0; }
  .folha-titulo { font-size: 1.8rem; }
}
@media (min-width: 768px) {
  .sidebar.collapsed { width: 4.5rem; }
  .sidebar.collapsed .sidebar-brand, .sidebar.collapsed .portal-card, .sidebar.collapsed .nav-badge, .sidebar.collapsed .nav-sep { display: none; }
  .sidebar.collapsed .sidebar-header { justify-content: center; }
  .sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar.collapsed .nav-item span, .sidebar.collapsed .sidebar-auth-btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } #splash { display: none; } }

/* Imprimir / PDF: capa numa página, texto e autor na seguinte */
@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff !important; color: #000; }
  .sidebar, header, .no-print, .toast, .modal, #splash, .app-footer { display: none !important; }
  .app-shell, main { display: block !important; }
  .view:not(#leituraView) { display: none !important; }
  .leitura-layout { display: block; }
  .leitura-lado { position: static !important; }
  .leitura-lado .capa { max-width: 380px; margin: 40px auto 0; page-break-after: always; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .capa * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .texto-leitura { max-width: none; font-size: 13pt; color: #000; }
  #leituraAutor { break-inside: avoid; box-shadow: none; }
}

/* Painel "capa e detalhes" do editor: ao lado da folha no computador,
   gaveta por cima no celular/tablet. */
.editor-lado { width: 320px; flex: none; }
@media (max-width: 1023px) {
  .editor-lado { position: absolute; inset: 0 0 0 auto; z-index: 6; width: min(340px, 92vw); transform: translateX(105%); transition: transform .25s ease; box-shadow: -20px 0 40px rgba(0,0,0,.18); }
  .editor-lado.aberto { transform: translateX(0); }
}

/* Leitura em tela cheia: sem menu nem cabeçalho, só o texto */
body.modo-leitura .sidebar, body.modo-leitura main > header, body.modo-leitura .sidebar-overlay { display: none !important; }
body.modo-leitura #leituraView { max-width: 1200px; margin: 0 auto; }
body.modo-leitura .texto-leitura { max-width: 52rem; font-size: 1.4rem; }
@media (min-width: 900px) { body.modo-leitura .leitura-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 3.5rem; } body.modo-leitura .leitura-lado .capa { max-width: 300px; } }

.sidebar-brand .eyebrow { font-size: 10px; letter-spacing: .14em; white-space: nowrap; }

/* Sem barra de rolagem visível (a rolagem continua funcionando) */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Abas da Biblioteca */
.aba { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: .8rem; font-size: .88rem; font-weight: 700; color: var(--muted); transition: .18s ease; }
.aba svg { width: 1rem; height: 1rem; }
.aba:hover { color: var(--ink); }
.aba.active { background: var(--accent-claro); color: #171717; }

/* Curtir / comentar / compartilhar */
#leituraInteracoes:not(.hidden) { display: flex; }
.interacao-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--card-borda); background: var(--surface); font-size: .9rem; font-weight: 700; color: var(--ink); transition: .18s ease; }
.interacao-btn:hover { border-color: var(--accent); color: var(--accent); }
.interacao-btn svg { width: 1.1rem; height: 1.1rem; }
.interacao-btn b { font-weight: 800; color: var(--muted); }
.interacao-btn b:empty { display: none; }
.interacao-btn.ativo { background: color-mix(in srgb, #e5484d 10%, var(--surface)); border-color: #e5484d; color: #e5484d; }
.interacao-btn.ativo svg { fill: #e5484d; }
.interacao-btn.pulsar svg { animation: pulsar .4s ease; }
@keyframes pulsar { 50% { transform: scale(1.35); } }

/* Botões do cartão do autor */
.autor-acao { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: .8rem; border: 1px solid var(--card-borda); background: var(--surface); font-size: .85rem; font-weight: 700; color: var(--ink); transition: .18s ease; }
.autor-acao:hover { border-color: var(--accent); color: var(--accent); }
.autor-acao svg { width: 1rem; height: 1rem; }
.autor-acao.seguir { background: var(--accent-claro); border-color: var(--accent-claro); color: #171717; }
.autor-acao.seguindo { background: transparent; border-color: var(--accent); color: var(--accent); }

/* Comentários */
.comentario { display: flex; gap: .8rem; padding: 1rem 1.1rem; border-radius: 1rem; border: 1px solid var(--card-borda); background: var(--card-fundo); }
.comentario-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin-top: .25rem; }
.comentario-apagar { margin-left: auto; color: var(--muted); padding: .2rem; border-radius: .4rem; align-self: flex-start; }
.comentario-apagar:hover { color: var(--danger); }
.comentario-apagar svg { width: 1rem; height: 1rem; }

/* Botão de sair: só o ícone */
.sidebar-auth-btn.so-icone { width: 2.75rem; height: 2.75rem; padding: 0; }
.dialogo-copiar { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; }
.dialogo-copiar code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: .6rem .8rem; border-radius: .7rem; background: var(--soft); color: var(--ink); font-size: .85rem; }

/* Exibição das amostras: grade (padrão), miniaturas ou lista — o leitor escolhe */
.vis-btns { display: inline-flex; gap: 2px; padding: 4px; border-radius: .9rem; border: 1px solid var(--card-borda); background: var(--surface); align-self: stretch; }
.vis-btn { width: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .65rem; color: var(--muted); transition: .18s ease; }
.vis-btn:hover { color: var(--ink); }
.vis-btn svg { width: 1.1rem; height: 1.1rem; }
.vis-btn.active { background: var(--accent-claro); color: #171717; }
.papiro-card-trecho { display: none; }

.papiro-grid.vis-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 768px) { .papiro-grid.vis-mini { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .papiro-grid.vis-mini { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .papiro-grid.vis-mini { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.vis-mini .papiro-card { border-radius: 12px; }
.vis-mini .papiro-card-capa { padding: .45rem .45rem 0; }
.vis-mini .papiro-card-info { padding: .45rem .55rem .6rem; gap: .1rem; }
.vis-mini .papiro-card-info::before, .vis-mini .papiro-card-tipo, .vis-mini .papiro-card-meta, .vis-mini .capa-autor { display: none; }
.vis-mini .papiro-card-titulo { font-size: .76rem; }
.vis-mini .status-chip { top: -.55rem; right: .35rem; padding: .08rem .4rem; font-size: .52rem; }
.vis-mini .capa-tag { font-size: max(7px, 5.6cqi); }

.papiro-grid.vis-lista { grid-template-columns: minmax(0, 1fr) !important; gap: .7rem; }
.vis-lista .papiro-card { flex-direction: row; align-items: center; }
.vis-lista .papiro-card:hover { transform: translateX(4px); }
.vis-lista .papiro-card:hover .capa { transform: none; }
.vis-lista .papiro-card-capa { width: 92px; flex: none; padding: .6rem; }
.vis-lista .capa-autor, .vis-lista .capa-sub, .vis-lista .capa-tag svg { display: none; }
.vis-lista .papiro-card-info { flex: 1; padding: .8rem 1.1rem .8rem .4rem; }
.vis-lista .papiro-card-info::before { display: none; }
.vis-lista .papiro-card-tipo { margin-top: 0; }
.vis-lista .papiro-card-titulo { font-size: 1.05rem; -webkit-line-clamp: 1; }
.vis-lista .status-chip { position: static; order: -1; align-self: flex-start; box-shadow: none; }
.vis-lista .papiro-card-trecho { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 768px) { .vis-lista .papiro-card-capa { width: 110px; } }

/* Ebook no portal: faixa escura no padrão do portal */
.portal-hero { position: relative; overflow: hidden; display: grid; gap: 2rem; padding: clamp(1.6rem, 4vw, 3.5rem); border-radius: 28px; background: #161616; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 26px 26px; border: 1px solid rgba(255,146,0,.35); }
.portal-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 100% 0%, rgba(255,146,0,.22), transparent 60%); pointer-events: none; }
.portal-hero-texto { position: relative; z-index: 1; }
.portal-hero-capas { position: relative; z-index: 1; min-height: 300px; }
.portal-hero-capas .capa { position: absolute; width: 190px; }
.portal-hero-capas .ph1 { left: 50%; top: 10px; transform: translateX(-80%) rotate(-7deg); }
.portal-hero-capas .ph2 { left: 50%; top: 40px; transform: translateX(-5%) rotate(6deg); }
@media (min-width: 1024px) { .portal-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } .portal-hero-capas .capa { width: 220px; } }
.proposta-item { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-radius: 1rem; border: 1px solid var(--card-borda); background: var(--card-fundo); }

/* Abertura (padrão dos apps do portal): ícone do app grande, portal embaixo */
.splash-app { width: 128px; height: 128px; display: block; margin: 0 auto 24px; border-radius: 30px; filter: drop-shadow(0 0 40px rgba(255,146,0,.35)); animation: splash-surge .6s cubic-bezier(.22,.75,.3,1) both; }
.splash-titulo { font-size: 2.1rem; }
.splash-portal { display: inline-flex; align-items: center; gap: 10px; }
.splash-portal-logo { width: 30px; height: 30px; object-fit: cover; object-position: 0% center; border-radius: 7px; }

/* Abertura escrita letra por letra, com cursor */
.digitando::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: #ff9200; animation: cursor .8s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
#splash { cursor: pointer; }

/* Botão de dúvidas e contato (canto inferior direito, como no portal) */
.ajuda-btn { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.05rem; border-radius: 999px; background: #161616; color: #fff; font-weight: 700; font-size: .9rem; border: 1px solid rgba(255,146,0,.55); box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .2s ease, border-color .2s ease; }
.ajuda-btn:hover { transform: translateY(-2px); border-color: #ff9200; }
.ajuda-btn svg { width: 1.15rem; height: 1.15rem; color: #ff9200; }
.ajuda-painel { position: fixed; right: 18px; bottom: 76px; z-index: 46; width: min(360px, calc(100vw - 36px)); padding: 1.2rem 1.2rem 1rem; border-radius: 1.2rem; background: var(--card-fundo); background-color: var(--surface); border: 1px solid var(--card-borda); box-shadow: 0 24px 60px rgba(0,0,0,.25); display: none; }
.ajuda-painel.aberto { display: block; animation: appear .2s ease both; }
.ajuda-itens { margin: .5rem 0 0; padding-left: 1.1rem; list-style: disc; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.ajuda-link { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem .5rem; border-radius: .8rem; border: 1px solid var(--card-borda); background: var(--surface); font-size: .85rem; font-weight: 700; color: var(--ink); }
.ajuda-link:hover { border-color: var(--accent); color: var(--accent); }
.ajuda-link svg { width: 1rem; height: 1rem; }
.ajuda-wa { background: #25d366; border-color: #25d366; color: #fff; }
.ajuda-wa:hover { color: #fff; filter: brightness(1.05); }
body.modo-leitura .ajuda-btn { opacity: .85; }

@media (max-width: 767px) { .ajuda-btn span { display: none; } .ajuda-btn { padding: .75rem; } }

/* Folha larga (padrão): ocupa toda a largura da mesa; o botão volta ao tamanho de página */
.editor-folha.larga { max-width: none; }
/* Setas para ir ao começo/fim do texto no editor */
.rolar-btns { position: absolute; z-index: 5; bottom: 16px; display: flex; flex-direction: column; gap: 6px; right: calc(320px + 16px); }
@media (max-width: 1023px) { .rolar-btns { right: 14px; } }
.rolar-btns button { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #161616; color: #ff9200; border: 1px solid rgba(255,146,0,.5); box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: opacity .2s ease, transform .2s ease; }
.rolar-btns button:hover { transform: translateY(-2px); border-color: #ff9200; }
.rolar-btns button svg { width: 1.15rem; height: 1.15rem; }
.rolar-btns button[hidden] { display: none; }
/* Dúvidas: o painel abre ao lado do menu */
.ajuda-painel { left: 300px; right: auto; bottom: 24px; }
@media (max-width: 767px) { .ajuda-painel { left: 18px; bottom: 18px; } }
.rolar-btns.rolar-lado { right: 14px; }
@media (max-width: 1023px) { .rolar-btns.rolar-lado { display: none; } }

/* Fundo quadriculado, igual ao do portal (linhas finas a cada 44 px) */
.app-shell > main {
  background:
    linear-gradient(rgba(28, 28, 28, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 28, 28, .045) 1px, transparent 1px),
    var(--paper);
  background-size: 44px 44px;
}
body.dark .app-shell > main {
  background:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
    var(--paper);
  background-size: 44px 44px;
}
.editor-mesa {
  background-image: linear-gradient(rgba(28, 28, 28, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 28, 28, .045) 1px, transparent 1px);
  background-size: 44px 44px;
}
body.dark .editor-mesa { background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); }