@font-face{
  font-family:'Elsie';
  font-weight:900;
  font-style:normal;
  font-display:swap;
  src:url('fonts/Elsie-Black.ttf') format('truetype');
}

:root{
  --bg-void:#080d0a;
  --bg-deep:#0a120c;
  --bg-panel:#0e1a14;
  --bg-panel-2:#122019;
  --bg-card:#0c130f;
  --bg-card-hover:#101a14;
  --gold:#c9a24a;
  --gold-bright:#e8c874;
  --gold-dim:rgba(201,162,74,.28);
  --gold-faint:rgba(201,162,74,.12);
  --parchment:#f3ead8;
  --parchment-dim:#cabfa8;
  --ink-muted:#8f8a78;
  --sage:#7f9a6b;
  --sage-dim:rgba(127,154,107,.18);
  --teal:#4a8489;
  --teal-dim:rgba(74,132,137,.18);
  --rose:#c1786f;
  --rose-dim:rgba(193,120,111,.18);
  --azul:#6f93c1;
  --azul-dim:rgba(111,147,193,.18);
  --roxo:#9b7fc1;
  --roxo-dim:rgba(155,127,193,.18);
  --bordo:#a23b52;
  --bordo-bright:#c9556e;
  --bordo-dim:rgba(122,36,54,.32);
  --bordo-faint:rgba(122,36,54,.14);
  /* Cores extras dos cadernos — mesma família (tons dessaturados, escuros),
     só pra dar mais opção de categorização (ver NOTEBOOK_COLORS). */
  --laranja:#c98a52; --laranja-dim:rgba(201,138,82,.18);
  --oliva:#a3a15c; --oliva-dim:rgba(163,161,92,.18);
  --verde:#6ba374; --verde-dim:rgba(107,163,116,.18);
  --turquesa:#4fab9a; --turquesa-dim:rgba(79,171,154,.18);
  --ciano:#5a9cb8; --ciano-dim:rgba(90,156,184,.18);
  --indigo:#6b7fc4; --indigo-dim:rgba(107,127,196,.18);
  --violeta:#a674b8; --violeta-dim:rgba(166,116,184,.18);
  --magenta:#bd6a9a; --magenta-dim:rgba(189,106,154,.18);
  --terracota:#a8735a; --terracota-dim:rgba(168,115,90,.18);
  --grafite:#7891a0; --grafite-dim:rgba(120,145,160,.18);
  --border:rgba(201,162,74,.16);
  --radius-lg:20px;
  --radius-md:13px;
  --radius-sm:8px;
  --font-serif:'Playfair Display', serif;
  --font-sans:'Lato', sans-serif;
  --font-reading:'Lora', 'Playfair Display', serif;
  --shadow-soft:0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-deep:0 24px 60px -20px rgba(0,0,0,.65);
  --transition:all .28s cubic-bezier(.4,0,.2,1);
  --paper:#f8f1e0;
  --paper-deep:#efe2c3;
  --paper-ink:#332715;
  --paper-ink-soft:#6b5a3f;
  --paper-border:#d9c69a;
  --font-display:'Elsie', var(--font-serif);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font-sans);
  background:
    radial-gradient(ellipse 1000px 560px at 12% -8%, rgba(201,162,74,.08), transparent 58%),
    radial-gradient(ellipse 800px 560px at 105% 0%, rgba(74,132,137,.07), transparent 55%),
    radial-gradient(ellipse 900px 700px at 50% 115%, rgba(127,154,107,.05), transparent 60%),
    var(--bg-void);
  color:var(--parchment);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ============ Logo, títulos e subtítulos — Elsie dourada ============ */
/* Texto de leitura e cadernos de anotação ficam de fora de propósito;
   só a identidade visual (logo/títulos/subtítulos) usa esse tratamento. */
.brand-title, .brand-title-sub,
.hero-title-top, .hero-title-sub,
.hero h1, .page-title,
.section-title, .month-header-bar h1{
  font-family:var(--font-display); font-weight:900;
  text-transform:uppercase; letter-spacing:.03em;
  color:#ffd873;
  text-shadow:0 1px 1px rgba(0,0,0,.6);
}
.hero h1 em{ color:var(--gold-bright); font-style:italic; }
/* Menu: cor sólida (não gradiente-clip) de propósito — .nav-link já usa a
   propriedade "background" pra pintar o realce do botão (hover/atual), então
   um "background:gradient + background-clip:text" aqui entraria em conflito
   direto com esse realce e apagaria um dos dois dependendo da ordem no CSS
   (foi exatamente o bug anterior). Cor sólida com brilho não tem esse conflito. */
.nav-link, .nav-link-brand-top, .nav-link-brand-bottom{
  font-family:var(--font-display); font-weight:900;
  text-transform:uppercase; letter-spacing:.03em;
  color:#ffd873;
  text-shadow:0 1px 1px rgba(0,0,0,.6), 0 0 8px rgba(255,200,80,.55);
}
.nav-link:hover, .nav-link.current, .nav-link.nav-gold{ color:#fff2c4; filter:brightness(1.15); }
a{ color:inherit; text-decoration:none; }

/* ============ Profundidade e entrada — sistema compartilhado ============ */
/* Sombra em 3 camadas (ambiente difusa + direcional + friso de luz no topo),
   pra dar peso físico real aos cartões em vez de uma sombra plana única. */
:root{
  --depth-1: 0 1px 0 0 rgba(255,255,255,.03) inset, 0 10px 22px -12px rgba(0,0,0,.55), 0 28px 54px -30px rgba(0,0,0,.5);
  --depth-2: 0 1px 0 0 rgba(255,255,255,.04) inset, 0 16px 32px -16px rgba(0,0,0,.6), 0 40px 72px -34px rgba(0,0,0,.55);
  --depth-hover: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 22px 44px -18px rgba(0,0,0,.65), 0 52px 90px -32px rgba(0,0,0,.6);
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(14px) scale(.99); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: no-preference){
  /* fill-mode "backwards" (não "both"): precisa segurar o estado inicial
     durante o animation-delay do stagger, mas NÃO reter transform depois
     de terminar — "both" deixava um transform residual (mesmo que
     visualmente idêntico a "none") em .notebook-acc-item, o que vira sem
     querer um "containing block" pra qualquer position:fixed nascido lá
     dentro (ex: o editor de anotações expandido pra tela cheia) — o fixed
     fica preso no card em vez de cobrir a janela inteira. */
  .hero, .lantern-card, .menu-card, .month-card, .today-card-solo, .stat-card, .info-card,
  .notebook-acc-item, .delay-banner, .catchup-confirm{
    animation:riseIn .55s cubic-bezier(.16,1,.3,1) backwards;
  }
  .menu-grid > .menu-card:nth-child(1){ animation-delay:.02s; }
  .menu-grid > .menu-card:nth-child(2){ animation-delay:.08s; }
  .menu-grid > .menu-card:nth-child(3){ animation-delay:.14s; }
  .menu-grid > .menu-card:nth-child(4){ animation-delay:.2s; }
  .menu-grid > .menu-card:nth-child(5){ animation-delay:.26s; }
  .menu-grid > .menu-card:nth-child(6){ animation-delay:.32s; }
  .menu-grid > .menu-card:nth-child(n+7){ animation-delay:.36s; }
  .notebook-accordion > .notebook-acc-item:nth-child(1){ animation-delay:.02s; }
  .notebook-accordion > .notebook-acc-item:nth-child(2){ animation-delay:.07s; }
  .notebook-accordion > .notebook-acc-item:nth-child(3){ animation-delay:.12s; }
  .notebook-accordion > .notebook-acc-item:nth-child(4){ animation-delay:.17s; }
  .notebook-accordion > .notebook-acc-item:nth-child(n+5){ animation-delay:.2s; }
}
::selection{ background:var(--gold-dim); color:var(--parchment); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--gold-dim); border-radius:10px; }

/* ============ CABEÇALHO (todas as páginas) ============ */
.site-header{
  background:linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel) 70%, #0a140f);
  border-bottom:1px solid var(--border);
}
.site-header-inner{
  max-width:1600px; margin:0 auto; padding:22px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:72px; flex-wrap:nowrap;
}
/* ============ Navegação hierárquica (menu com submenus) ============ */
.site-nav{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; flex:1 1 auto; min-width:0; gap:12px; }
.nav-left{ display:flex; align-items:center; gap:6px; }
.nav-menu{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
/* Abre um espaço antes deste item, empurrando-o (e os que vêm depois) pra
   direita do menu — separa "Buscar"/"Backup e Configurações" dos itens
   clássicos do menu, sem precisar de um wrapper à parte. */
.nav-link-separate{ margin-left:auto; }
/* Rótulo de link cruzado em duas linhas, miniatura do mesmo modelo do
   cabeçalho do app irmão (.brand-top/.brand-bottom): serifada em negrito
   em cima, itálico maiúsculo menor embaixo. */
.nav-link-brand{ display:flex; flex-direction:column; align-items:center; line-height:1.2; gap:1px; }
.nav-link-brand-top{ font-size:.86rem; }
.nav-link-brand-bottom{ letter-spacing:1.6px; font-size:.6rem; opacity:.85; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem;
  padding:10px 18px; border-radius:999px; border:1px solid transparent; transition:var(--transition);
  background:none; cursor:pointer;
}
.nav-link:hover{ background:var(--gold-faint); }
.nav-link.current{ border-color:var(--gold-dim); background:var(--gold-faint); }
.nav-link.nav-gold{ border-color:var(--gold-dim); background:var(--gold-faint); }
.nav-link.nav-gold:hover{ background:var(--gold-dim); box-shadow:0 8px 20px -8px rgba(201,162,74,.55); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:38px; height:38px; background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; flex-shrink:0;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--parchment-dim); border-radius:2px; transition:var(--transition); }
.nav-backdrop{ display:none; }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  /* Sem isso, home/voltar + hambúrguer + pílula de armazenamento ficavam
     espremidos numa linha só ao lado da logo (sem espaço, "invadindo" ela)
     — agora o que não couber quebra pra uma segunda linha, sob a logo. */
  .site-nav{ flex-wrap:wrap; row-gap:8px; }
  .nav-menu{
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw);
    background:var(--bg-panel-2); border-left:1px solid var(--border); box-shadow:var(--shadow-deep);
    padding:90px 20px 30px; overflow-y:auto; z-index:120;
    transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .site-nav.nav-is-open .nav-menu{ display:flex; transform:translateX(0); }
  .nav-backdrop{
    display:none; position:fixed; inset:0; background:rgba(4,7,5,.6); z-index:110;
  }
  .site-nav.nav-is-open .nav-backdrop{ display:block; }
  .nav-menu .nav-link{ width:100%; justify-content:flex-start; padding:13px 14px; }
}

.storage-pill{
  all:unset; cursor:pointer; display:flex; align-items:center; gap:7px; font-size:.68rem;
  font-weight:700; letter-spacing:.03em; color:var(--sage); padding:8px 13px; border-radius:999px;
  border:1px solid var(--border); transition:var(--transition); white-space:nowrap;
}
.storage-pill:hover{ border-color:var(--gold-dim); background:var(--gold-faint); }
.storage-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--sage); box-shadow:0 0 6px var(--sage); flex-shrink:0; }
.storage-pill.warn{ color:#e0b57a; }
.storage-pill.warn .dot{ background:#d99a4e; box-shadow:0 0 6px #d99a4e; }
.storage-pill.linked{ color:var(--gold-bright); }
.storage-pill.linked .dot{ background:var(--gold-bright); box-shadow:0 0 6px var(--gold-bright); }

/* ============ Painel flutuante de armazenamento ============ */
.storage-overlay{
  display:none; position:fixed; inset:0; background:rgba(4,7,5,.72); backdrop-filter:blur(2px); z-index:90;
  align-items:flex-start; justify-content:center; padding:80px 20px;
}
.storage-overlay.show{ display:flex; }
.storage-modal{
  width:100%; max-width:440px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px 30px; box-shadow:var(--shadow-deep);
}
.storage-modal h3{ font-family:var(--font-serif); font-size:1.2rem; color:var(--parchment); margin-bottom:6px; }
.storage-modal p.desc{ font-size:.8rem; color:var(--ink-muted); line-height:1.7; margin-bottom:18px; }
.storage-status-full{ font-size:.75rem; line-height:1.7; color:var(--sage); display:flex; gap:8px; margin-bottom:18px; }
.storage-status-full .dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; background:var(--sage); box-shadow:0 0 6px var(--sage); }
.storage-status-full.warn{ color:#e0b57a; }
.storage-status-full.warn .dot{ background:#d99a4e; box-shadow:0 0 6px #d99a4e; }
.storage-status-full.linked{ color:var(--gold-bright); }
.storage-status-full.linked .dot{ background:var(--gold-bright); box-shadow:0 0 6px var(--gold-bright); }
.reconnect-btn{ display:none; width:100%; margin-bottom:10px; }
.backup-actions{ display:flex; gap:8px; margin-bottom:10px; }
.backup-btn{
  all:unset; cursor:pointer; flex:1; text-align:center; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; padding:11px 8px; border-radius:var(--radius-sm); border:1px solid var(--border);
  color:var(--parchment-dim); transition:var(--transition);
}
.backup-btn:hover{ border-color:var(--gold-dim); color:var(--gold-bright); background:var(--gold-faint); }
.backup-btn.primary{ border-color:var(--gold-dim); background:var(--gold-faint); color:var(--gold-bright); }
.backup-btn.primary:hover{ background:var(--gold-dim); }
.backup-fallback{ font-size:.72rem; margin-top:6px; }
.backup-fallback summary{ cursor:pointer; color:var(--ink-muted); padding:4px 0; list-style:none; }
.backup-fallback summary::-webkit-details-marker{ display:none; }
.backup-fallback summary::before{ content:'▸ '; }
.backup-fallback[open] summary::before{ content:'▾ '; }

.danger-zone{ border-top:1px solid var(--border); margin-top:18px; padding-top:16px; }
.backup-btn.danger{ border-color:rgba(196,92,68,.4); color:#e08a72; }
.backup-btn.danger:hover{ background:rgba(196,92,68,.12); border-color:rgba(196,92,68,.6); }
.reset-confirm{
  display:none; margin-top:10px; padding:14px 16px; border:1px solid rgba(196,92,68,.35);
  border-radius:var(--radius-sm); background:rgba(196,92,68,.07);
}
.reset-confirm p{ font-size:.74rem; color:var(--parchment-dim); line-height:1.65; margin-bottom:12px; }
.storage-modal-close{
  all:unset; cursor:pointer; position:absolute; top:18px; right:20px; color:var(--ink-muted);
  font-size:1.1rem; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:var(--transition);
}
.storage-modal-close:hover{ color:var(--gold-bright); background:var(--gold-faint); }
.storage-modal{ position:relative; }

/* ============ Layout genérico de página ============ */
.page{ max-width:1400px; margin:0 auto; padding:44px 32px 90px; }
.page-narrow{ max-width:900px; }
.breadcrumb{ font-size:.74rem; color:var(--ink-muted); margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.breadcrumb a{ color:var(--gold); }
.breadcrumb a:hover{ color:var(--gold-bright); }
.page-title{ font-size:2.1rem; margin-bottom:10px; }
.page-subtitle{ font-size:.95rem; color:var(--parchment-dim); margin-bottom:34px; max-width:640px; line-height:1.7; }
/* Painel de anotações da Home: barra lateral compacta (tipos) + conteúdo à
   direita, dentro de um card só — altura fixa não importa quantos tipos de
   anotação existam (troca de aba só alterna visibilidade, nunca empilha). */
.notes-dashboard{
  display:flex; align-items:stretch; min-height:380px;
  border-radius:var(--radius-lg); border:1px solid var(--border);
  background:var(--bg-card); margin-top:32px; box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.notes-dashboard-nav{
  flex:0 0 232px; display:flex; flex-direction:column; gap:4px;
  padding:22px 14px; background:var(--bg-panel-2); border-right:1px solid var(--border);
}
.notes-dashboard-nav-item{
  display:flex; align-items:center; gap:11px; padding:13px 14px;
  border-radius:var(--radius-sm); border:1px solid transparent; background:none;
  color:var(--parchment-dim); font-family:var(--font-sans); font-size:.9rem; font-weight:700;
  text-align:left; cursor:pointer; transition:var(--transition);
}
.notes-dashboard-nav-item:hover{ background:var(--gold-faint); color:var(--parchment); }
.notes-dashboard-nav-item.is-active{
  background:var(--gold-faint); border-color:var(--gold-dim); color:var(--gold-bright);
}
.notes-dashboard-nav-icon{ font-size:1.15rem; line-height:1; flex-shrink:0; }
.notes-dashboard-content{ flex:1; min-width:0; padding:32px 36px; }
.notes-dashboard-panel{ display:none; }
.notes-dashboard-panel.is-active{ display:block; }
.notes-dashboard-nav-item{ position:relative; }
.notes-dashboard-nav-remove{
  margin-left:auto; flex-shrink:0; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
  color:var(--ink-muted); opacity:0; transition:var(--transition);
}
.notes-dashboard-nav-item:hover .notes-dashboard-nav-remove{ opacity:1; }
.notes-dashboard-nav-remove:hover{ background:rgba(196,68,68,.22); color:#f4a48f; }
.notes-dashboard-nav-add{
  display:flex; align-items:center; gap:9px; margin-top:10px; padding:12px 14px;
  border-radius:var(--radius-sm); border:1px dashed var(--border); background:none;
  color:var(--parchment-dim); font-size:.85rem; font-weight:700; cursor:pointer; transition:var(--transition);
}
.notes-dashboard-nav-add:hover{ border-style:solid; border-color:var(--gold-dim); color:var(--gold-bright); background:var(--gold-faint); }
.notes-dashboard-add-form{
  margin-top:10px; padding:14px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); display:flex; flex-direction:column; gap:10px;
}
.notes-dashboard-add-form input[type=text]{
  width:100%; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; color:var(--parchment); font:inherit; font-size:.85rem;
}
.notes-dashboard-add-form input[type=text]:focus{ outline:none; border-color:var(--gold-dim); }
.notes-dashboard-add-actions{ display:flex; gap:8px; justify-content:flex-end; }
.back-link{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; color:var(--parchment-dim);
  border:1px solid var(--border); padding:10px 18px; border-radius:999px; transition:var(--transition);
}
.back-link:hover{ border-color:var(--gold-dim); color:var(--gold-bright); background:var(--gold-faint); }

.page-top-row{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.reset-inline{ position:relative; }
.btn-reset-visible{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  background:rgba(196,68,68,.16); border:1.5px solid rgba(214,86,86,.55); color:#f4a48f;
  font-weight:800; font-size:.8rem; letter-spacing:.02em; padding:11px 20px; border-radius:999px;
  transition:var(--transition); box-shadow:0 0 0 0 rgba(214,86,86,0);
}
.btn-reset-visible:hover{ background:rgba(196,68,68,.28); border-color:#e08a72; box-shadow:0 6px 20px -6px rgba(196,68,68,.5); }

.backup-inline{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-backup-visible{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  background:var(--gold-faint); border:1.5px solid var(--gold-dim); color:var(--gold-bright);
  font-weight:800; font-size:.8rem; letter-spacing:.02em; padding:11px 20px; border-radius:999px;
  transition:var(--transition);
}
.btn-backup-visible:hover{ background:var(--gold-dim); box-shadow:0 6px 20px -6px rgba(201,162,74,.4); }
.btn-backup-visible.outline{ background:transparent; color:var(--parchment-dim); border-color:var(--border); }
.btn-backup-visible.outline:hover{ border-color:var(--gold-dim); color:var(--gold-bright); background:var(--gold-faint); }
.reset-inline .reset-confirm{
  position:absolute; top:calc(100% + 10px); right:0; width:330px; z-index:40;
  box-shadow:var(--shadow-deep);
}
@media (max-width:640px){
  .reset-inline .reset-confirm{ position:static; width:100%; margin-top:10px; }
}

/* ============ Rodapé ============ */
.site-footer{ text-align:center; padding:40px 20px 60px; font-size:.72rem; color:var(--ink-muted); font-style:italic; }

/* ============ HERO (index) ============ */
.hero{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:44px;
  background:
    radial-gradient(circle at 15% 20%, rgba(201,162,74,.10), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(74,132,137,.09), transparent 55%),
    linear-gradient(160deg, #101b14, #070c08 75%);
  border:1px solid var(--border); box-shadow:var(--shadow-deep);
  padding:52px 48px;
}
.hero-eyebrow{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:14px; }
.hero h1{ font-size:2.6rem; line-height:1.2; max-width:680px; }
/* Título da Home: mesmo modelo tipográfico da logo do cabeçalho
   (.brand-title/.brand-title-sub) — "Nascente Prime" em negrito em cima,
   "REFUGE" menor, itálico e maiúsculo embaixo. Classe própria (não altera
   ".hero h1" puro, usado sem estrutura em duas linhas noutras páginas). */
.hero h1.hero-title-stacked{ display:flex; flex-direction:column; }
.hero-title-top{ font-size:2.6rem; }
.hero-title-sub{ font-size:1.3rem; letter-spacing:.16em; opacity:.82; margin-top:6px; }
.hero p.lede{ font-size:1.02rem; color:var(--parchment-dim); max-width:560px; margin-top:16px; line-height:1.8; }
/* Cartão da lanterna (motivo em latim) fundido dentro do próprio .hero na
   Home, em vez de uma segunda caixa separada — recuada, alinhada à direita
   e mais pro rodapé da caixa, em vez de seguir o fluxo à esquerda. */
.hero .lantern-text-wrap{ margin-top:44px; margin-left:auto; text-align:right; }
.hero .lantern-credit{ text-align:right; }
.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:9px; font-size:.85rem; font-weight:800; letter-spacing:.02em;
  padding:14px 26px; border-radius:999px; transition:var(--transition); cursor:pointer; border:1px solid transparent;
  background:none; font-family:inherit;
}
.btn-primary{ background:linear-gradient(135deg, var(--gold), #a8843a); color:#171207; box-shadow:0 10px 26px -8px rgba(201,162,74,.5); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 32px -8px rgba(201,162,74,.6); }
.btn-ghost{ border-color:var(--gold-dim); color:var(--gold-bright); }
.btn-ghost:hover{ background:var(--gold-faint); }
.btn-bordo{ background:var(--bordo-faint); border-color:var(--bordo-dim); color:var(--bordo-bright); }
.btn-bordo:hover{ background:var(--bordo-dim); box-shadow:0 6px 20px -6px rgba(122,36,54,.45); }

/* Cartão "Leitura de Hoje" + selo de progresso, lado a lado (eco do Versículo/Pensamento do Dia) */
.today-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; margin-top:34px; }
@media (max-width:820px){ .today-grid{ grid-template-columns:1fr; } }
.today-card-solo{ grid-column:1 / -1; max-width:560px; }
.today-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 32px; box-shadow:var(--shadow-soft); position:relative; overflow:hidden;
}
.today-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% -10%, rgba(201,162,74,.10), transparent 55%); pointer-events:none; }
.today-card .label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); font-weight:700; margin-bottom:14px; }
.today-card .reading{ font-family:var(--font-serif); font-size:1.7rem; color:var(--parchment); font-weight:600; margin-bottom:8px; }
.today-card .meta{ font-size:.8rem; color:var(--ink-muted); }
.today-card .cta{ margin-top:20px; }

.progress-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px;
}
.seal-ring{
  width:104px; height:104px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--gold-bright) 0deg, rgba(255,255,255,.05) 0deg);
  box-shadow:0 0 30px -4px rgba(201,162,74,.35);
  transition:background 1s ease;
}
.seal-inner{
  width:86px; height:86px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #12201a, #070b08 78%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(201,162,74,.3);
}
.seal-pct{ font-family:var(--font-serif); font-weight:700; font-size:1.25rem; color:var(--gold-bright); }
.progress-card .caption{ font-size:.78rem; color:var(--parchment-dim); }

/* ============ Cartões de menu (Início) ============ */
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-bottom:10px; }
.menu-card{
  display:block; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px 26px; box-shadow:var(--depth-1); transition:var(--transition); position:relative; overflow:hidden;
}
.menu-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 100% 0%, rgba(201,162,74,.08), transparent 60%); pointer-events:none; }
.menu-card:hover{ transform:translateY(-4px); border-color:var(--gold-dim); box-shadow:var(--depth-hover); }
.menu-card .icon{ width:42px; height:42px; border-radius:11px; background:var(--gold-faint); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--gold-bright); }
.materia-card-cover{
  margin:-28px -26px 16px; height:120px; background-size:cover; background-position:center;
  border-bottom:1px solid var(--border);
}
.menu-card h3{ font-family:var(--font-serif); font-size:1.2rem; color:var(--parchment); font-weight:600; margin-bottom:8px; }
.menu-card p{ font-size:.82rem; color:var(--ink-muted); line-height:1.6; }
.menu-card .go{ margin-top:16px; font-size:.72rem; font-weight:800; color:var(--gold); letter-spacing:.03em; }

.materia-card{ display:flex; flex-direction:column; }
.materia-card-link{ display:block; }
.materia-card-actions{ display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }
.materia-card.is-hidden{ opacity:.55; border-style:dashed; }
.hidden-tag, .doc-row-hidden-tag{
  font-size:.62rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#e0b57a;
  background:rgba(217,154,78,.12); border:1px solid rgba(217,154,78,.4); border-radius:999px; padding:2px 7px;
  vertical-align:middle;
}
.materia-add-card{
  cursor:pointer; font:inherit; color:var(--parchment-dim); text-align:center;
  border-style:dashed; border-color:var(--gold-dim); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px;
}
.materia-add-card:hover{ border-style:solid; background:var(--gold-faint); }
.materia-add-card .icon{ margin:0 auto 12px; }
.materia-add-card h3{ color:var(--gold-bright); }

/* ============ Grade de meses (Roteiro) ============ */
.month-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.month-card{
  display:block; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px 24px; transition:var(--transition); position:relative; box-shadow:var(--depth-1);
}
.month-card:hover{ border-color:var(--gold-dim); background:var(--bg-card-hover); transform:translateY(-3px); box-shadow:var(--depth-hover); }
.month-card.is-current{ border-color:var(--gold-bright); box-shadow:0 0 0 1px var(--gold-dim), 0 0 22px -8px rgba(201,162,74,.45); }
.month-card .m-label{ font-family:var(--font-serif); font-size:1.15rem; color:var(--parchment); font-weight:600; margin-bottom:6px; }
.month-card .m-frac{ font-size:.76rem; color:var(--ink-muted); margin-bottom:12px; }
.month-card .m-track{ height:5px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.month-card .m-fill{ height:100%; background:linear-gradient(90deg, var(--sage), var(--gold)); }
.month-card .m-current-badge{
  position:absolute; top:0; right:14px; background:var(--gold-bright); color:#151005; font-size:.58rem;
  font-weight:900; letter-spacing:.06em; padding:3px 8px; border-radius:0 0 6px 6px; text-transform:uppercase;
}

/* ============ Stats (Painel) ============ */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:34px; }
.stat-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px 22px; box-shadow:var(--depth-1); position:relative; overflow:hidden; transition:var(--transition);
}
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--depth-hover); }
.stat-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 100% 0%, rgba(201,162,74,.08), transparent 60%); }
.stat-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-muted); font-weight:700; margin-bottom:8px; }
.stat-value{ font-family:var(--font-serif); font-size:1.7rem; color:var(--gold-bright); font-weight:600; }

/* ============ Aviso de atraso (Início) ============ */
.delay-banner{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(217,154,78,.14), rgba(201,162,74,.05));
  border:1px solid rgba(217,154,78,.35); border-radius:var(--radius-lg);
  padding:22px 52px 22px 26px; margin-bottom:32px; box-shadow:var(--shadow-soft);
}
.delay-banner::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 6% 20%, rgba(217,154,78,.20), transparent 55%); pointer-events:none; }
.delay-banner-icon{ font-size:1.9rem; flex-shrink:0; filter:drop-shadow(0 0 12px rgba(217,154,78,.55)); }
.delay-banner-body{ flex:1; min-width:220px; }
.delay-banner-title{ font-family:var(--font-serif); font-size:1.08rem; font-weight:600; color:#f0c893; margin-bottom:5px; }
.delay-banner-text{ font-size:.85rem; color:var(--parchment-dim); line-height:1.6; max-width:520px; }
.delay-banner .btn{ flex-shrink:0; white-space:nowrap; }
.delay-banner-close{
  all:unset; cursor:pointer; position:absolute; top:14px; right:16px; color:var(--ink-muted);
  width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  transition:var(--transition); font-size:.95rem;
}
.delay-banner-close:hover{ color:var(--gold-bright); background:rgba(255,255,255,.07); }
.catchup-confirm{
  display:none; flex-basis:100%; margin-top:2px; padding:16px 18px;
  border:1px solid var(--bordo-dim); border-radius:var(--radius-md);
  background:var(--bordo-faint); position:relative; z-index:1;
}
.catchup-confirm p{ font-size:.83rem; color:var(--parchment-dim); line-height:1.65; margin:0 0 12px; }
.catchup-confirm p b{ color:var(--bordo-bright); }

/* Espelho do aviso de atraso, pra quando a leitura está adiantada — mesmo
   formato e peso visual, só trocando o tom âmbar/urgente pelo sage (o mesmo
   verde já usado pra "concluído"), já que aqui a notícia é boa, não um alerta. */
.delay-banner.is-advance{
  background:linear-gradient(135deg, rgba(127,154,107,.14), rgba(127,154,107,.05));
  border-color:rgba(127,154,107,.35);
}
.delay-banner.is-advance::before{ background:radial-gradient(circle at 6% 20%, rgba(127,154,107,.20), transparent 55%); }
.delay-banner.is-advance .delay-banner-icon{ filter:drop-shadow(0 0 12px rgba(127,154,107,.55)); }
.delay-banner.is-advance .delay-banner-title{ color:var(--sage); }
.catchup-confirm.is-advance{ border-color:var(--sage-dim); background:var(--sage-dim); }
.catchup-confirm.is-advance p b{ color:var(--sage); }

/* ============ Nota de abertura — cartão "lanterna" (Início) ============ */
.lantern-card{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:var(--bg-card); padding:36px 40px; margin-bottom:40px; box-shadow:var(--shadow-soft);
}
.lantern-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 90% -10%, rgba(201,162,74,.08), transparent 55%); pointer-events:none; }
.lantern-glow{
  position:absolute; width:480px; height:480px; border-radius:50%;
  left:var(--mx, 30%); top:var(--my, 30%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(232,200,116,.34), rgba(232,200,116,.11) 42%, transparent 70%);
  pointer-events:none; opacity:.27; filter:blur(6px); transition:opacity .5s ease;
  animation:lantern-breathe 7s ease-in-out infinite;
}
/* [data-lantern] em vez de .lantern-card: o mesmo efeito também roda dentro
   do .hero na Home, onde o cartão da lanterna foi fundido na mesma caixa. */
[data-lantern].is-active .lantern-glow{ opacity:1; transition:opacity .25s ease; animation:none; }
@keyframes lantern-breathe{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.18); } }
.lantern-text-wrap{ position:relative; max-width:680px; }
.lantern-text-base, .lantern-text-bright{
  font-family:var(--font-serif); font-style:italic; font-size:1.2rem; line-height:1.75; margin:0;
}
.lantern-text-base{ color:var(--parchment-dim); }
.lantern-text-bright{
  position:absolute; inset:0; color:var(--gold-bright); text-shadow:0 0 18px rgba(232,200,116,.5);
  -webkit-mask-image:radial-gradient(circle 190px at var(--mx,30%) var(--my,30%), black 0%, black 30%, transparent 74%);
  mask-image:radial-gradient(circle 190px at var(--mx,30%) var(--my,30%), black 0%, black 30%, transparent 74%);
  opacity:.1; transition:opacity .5s ease; pointer-events:none;
}
[data-lantern].is-active .lantern-text-bright{ opacity:1; transition:opacity .25s ease; }
.lantern-credit{ display:block; margin-top:16px; font-size:.78rem; font-style:normal; color:var(--ink-muted); letter-spacing:.03em; }
@media (prefers-reduced-motion:reduce){ .lantern-glow{ animation:none; } }

/* ============ Cartão de introdução às anotações (Painel) ============ */
.notes-intro-card{
  display:flex; gap:18px; align-items:flex-start; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:26px 28px; margin-bottom:22px; max-width:560px; box-shadow:var(--shadow-soft);
}
.notes-intro-icon{
  width:42px; height:42px; border-radius:11px; background:var(--gold-faint); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.notes-intro-card h3{ font-family:var(--font-serif); font-size:1.05rem; color:var(--parchment); font-weight:600; margin-bottom:8px; }
.notes-intro-card p{ font-size:.84rem; color:var(--ink-muted); line-height:1.7; }
.notes-intro-card p a{ color:var(--gold); }
.notes-intro-card p a:hover{ color:var(--gold-bright); }

/* ============ Backup & Configurações ============ */
.section-title{ font-size:1.15rem; margin:38px 0 16px; }
.info-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 28px; margin-bottom:20px; box-shadow:var(--shadow-soft); max-width:720px;
}
.info-card h2{ font-family:var(--font-serif); font-size:1.1rem; color:var(--parchment); font-weight:600; margin-bottom:10px; }
.info-card-desc{ font-size:.84rem; color:var(--ink-muted); line-height:1.7; margin-bottom:4px; }
.info-card .storage-status-full{ margin-bottom:16px; }
.storage-tiers{ display:flex; flex-direction:column; gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.storage-tier{ display:flex; gap:14px; align-items:flex-start; }
.storage-tier .tier-num{
  width:22px; height:22px; border-radius:50%; background:var(--gold-faint); color:var(--gold-bright);
  font-size:.72rem; font-weight:800; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.storage-tier b{ font-size:.85rem; color:var(--parchment); }
.storage-tier p{ font-size:.78rem; color:var(--ink-muted); line-height:1.6; margin-top:2px; }

.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.settings-row-text h4{ font-size:.9rem; color:var(--parchment); font-weight:700; margin-bottom:5px; }
.settings-row-text p{ font-size:.78rem; color:var(--ink-muted); line-height:1.6; max-width:420px; }
.switch{ position:relative; display:inline-flex; cursor:pointer; flex-shrink:0; }
.switch input{ position:absolute; opacity:0; width:44px; height:24px; margin:0; cursor:pointer; z-index:1; }
.switch-track{ width:44px; height:24px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--border); transition:var(--transition); display:flex; align-items:center; padding:2px; box-sizing:border-box; }
.switch-thumb{ width:18px; height:18px; border-radius:50%; background:var(--parchment-dim); transition:var(--transition); }
.switch input:checked ~ .switch-track{ background:var(--sage-dim); border-color:var(--sage); }
.switch input:checked ~ .switch-track .switch-thumb{ transform:translateX(20px); background:var(--sage); }

.danger-card{ border-color:rgba(196,92,68,.3); }
.danger-card h2{ color:#e0a389; }
.danger-card .btn-reset-visible{ margin-top:14px; }

.modal-more-link{ display:block; text-align:center; margin-top:6px; font-size:.74rem; font-weight:700; color:var(--gold); }
.modal-more-link:hover{ color:var(--gold-bright); }

/* ============ Três passos de orientação (Início) ============ */
.path-steps{ margin-top:52px; padding-top:40px; border-top:1px solid var(--border); }
.path-steps-title{ font-family:var(--font-serif); font-size:1.05rem; font-weight:600; color:var(--parchment-dim); letter-spacing:.02em; margin-bottom:26px; }
.path-steps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px; }
.path-step{ display:block; }
.path-step-num{ display:block; font-family:var(--font-serif); font-size:.85rem; font-weight:700; color:var(--gold); letter-spacing:.08em; margin-bottom:10px; }
.path-step h3{ font-family:var(--font-serif); font-size:1.08rem; font-weight:600; color:var(--parchment); margin-bottom:8px; }
.path-step p{ font-size:.84rem; color:var(--ink-muted); line-height:1.7; }
.path-step p b{ color:var(--parchment-dim); font-weight:700; }
a.path-step p b{ color:var(--gold); }
a.path-step{ transition:var(--transition); }
a.path-step:hover h3{ color:var(--gold-bright); }

/* ============ Workspace de anotações (Painel / Mês) ============ */
.workspace{ display:flex; align-items:flex-start; gap:32px; }
.workspace-main{ flex:1; min-width:0; }
textarea{
  width:100%; resize:vertical; box-sizing:border-box;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.55), transparent 42%),
    linear-gradient(175deg, var(--paper), var(--paper-deep));
  color:var(--paper-ink); border:1px solid var(--paper-border);
  border-radius:var(--radius-md); padding:22px 26px;
  font-family:var(--font-reading); font-size:1rem; line-height:1.9;
  text-align:justify; text-justify:inter-word;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 7px 0 20px -16px rgba(60,42,10,.55),
    0 16px 32px -20px rgba(0,0,0,.55);
  transition:var(--transition);
}
textarea:focus{
  outline:none; border-color:#c2a35c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 7px 0 20px -16px rgba(60,42,10,.55),
    0 0 0 3px rgba(201,162,74,.22),
    0 16px 32px -20px rgba(0,0,0,.55);
}
textarea::placeholder{ color:var(--paper-ink-soft); font-style:italic; opacity:.8; }
textarea::selection{ background:rgba(201,162,74,.38); color:var(--paper-ink); }

/* ---- Editor rico (contenteditable) da doca de notas — mesmo visual da textarea ---- */
.notes-dock-editor{
  width:100%; box-sizing:border-box; overflow-y:auto;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.55), transparent 42%),
    linear-gradient(175deg, var(--paper), var(--paper-deep));
  color:var(--paper-ink); border:1px solid var(--paper-border);
  border-radius:var(--radius-md); padding:22px 26px;
  font-family:var(--font-reading); font-size:1rem; line-height:1.9;
  text-align:justify; text-justify:inter-word;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 7px 0 20px -16px rgba(60,42,10,.55),
    0 16px 32px -20px rgba(0,0,0,.55);
  transition:var(--transition);
}
.notes-dock-editor:focus{
  outline:none; border-color:#c2a35c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 7px 0 20px -16px rgba(60,42,10,.55),
    0 0 0 3px rgba(201,162,74,.22),
    0 16px 32px -20px rgba(0,0,0,.55);
}
.notes-dock-editor:empty::before{ content:attr(data-placeholder); color:var(--paper-ink-soft); font-style:italic; opacity:.8; }
.notes-dock-editor::selection{ background:rgba(201,162,74,.38); color:var(--paper-ink); }
.notes-dock-editor img{ max-width:100%; height:auto; border-radius:8px; margin:6px 0; cursor:pointer; box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
.notes-dock-editor img.img-align-left{ float:left; margin:4px 18px 10px 0; max-width:46%; }
.notes-dock-editor img.img-align-right{ float:right; margin:4px 0 10px 18px; max-width:46%; }
.notes-dock-editor img.img-align-center{ display:block; float:none; margin:14px auto; max-width:80%; }
.notes-dock-editor img.img-selected{ outline:3px solid var(--gold); outline-offset:2px; }

.notes-dock-toolbar{ display:flex; gap:8px; margin-bottom:10px; flex-shrink:0; }

/* Barra flutuante de alinhamento sobre a imagem selecionada no editor */
.img-float-toolbar{
  position:fixed; display:none; gap:4px; background:var(--bg-panel-2); border:1px solid var(--gold-dim);
  border-radius:999px; padding:5px; box-shadow:0 14px 30px -12px rgba(0,0,0,.7); z-index:300;
}
.img-float-toolbar.show{ display:flex; }
.img-float-toolbar button{
  all:unset; cursor:pointer; width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:var(--parchment-dim); font-size:.9rem; transition:var(--transition);
}
.img-float-toolbar button:hover{ background:var(--gold-faint); color:var(--gold-bright); }
.img-float-toolbar button.danger:hover{ color:#e08a72; background:rgba(196,92,68,.12); }

/* Modal de escolha de imagem (Inserir imagem na nota) */
.image-picker-overlay{
  position:fixed; inset:0; background:rgba(4,7,5,.86); display:none; align-items:center; justify-content:center;
  z-index:250; padding:26px; backdrop-filter:blur(3px);
}
.image-picker-overlay.is-active{ display:flex; }
.image-picker-modal{
  width:min(720px, 100%); max-height:82vh; overflow-y:auto; background:var(--bg-panel-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px 26px; box-shadow:var(--shadow-soft); position:relative;
}
.image-picker-modal h3{ font-family:var(--font-serif); color:var(--parchment); margin-bottom:14px; font-size:1.1rem; }
.image-picker-close{
  all:unset; cursor:pointer; position:absolute; top:16px; right:18px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink-muted); font-size:1.2rem;
}
.image-picker-close:hover{ background:var(--gold-faint); color:var(--gold-bright); }
.image-picker-upload{ margin-bottom:18px; }
.image-picker-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; }
.image-picker-tile{
  aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; border:1px solid var(--border);
  transition:var(--transition);
}
.image-picker-tile:hover{ border-color:var(--gold-dim); transform:translateY(-2px); }
.image-picker-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.image-picker-empty{ color:var(--ink-muted); font-size:.86rem; text-align:center; padding:20px; }

.save-indicator{ font-size:.68rem; letter-spacing:.06em; color:var(--sage); opacity:0; transition:opacity .4s; text-transform:uppercase; font-weight:700; white-space:nowrap; }
.save-indicator.show{ opacity:1; }
.save-indicator.saving{ color:var(--gold); }

.notes-dock{
  width:440px; flex-shrink:0; position:sticky; top:88px; align-self:flex-start;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px 26px 22px; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; min-height:0;
  max-height:calc(100vh - 100px); overflow-y:auto;
}
.notes-dock-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; flex-shrink:0; }
.notes-dock-head h3{ font-family:var(--font-serif); font-size:1.1rem; color:var(--parchment); font-weight:600; }
.notes-dock-head-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.expand-btn{
  all:unset; cursor:pointer; display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:7px; color:var(--ink-muted); font-size:.85rem; transition:var(--transition); flex-shrink:0;
}
.expand-btn:hover{ background:var(--gold-faint); color:var(--gold-bright); }
.notes-dock-meta{ font-size:.76rem; color:var(--gold); margin-bottom:14px; min-height:1.1em; flex-shrink:0; }
.notes-dock textarea, .notes-dock .notes-dock-editor{ flex:1 1 0; min-height:280px; }
.notes-dock-hint{ font-size:.78rem; color:var(--ink-muted); font-style:italic; line-height:1.7; padding-top:6px; flex-shrink:0; }
.dock-backdrop{ display:none; position:fixed; inset:0; background:rgba(4,7,5,.72); backdrop-filter:blur(2px); z-index:75; }
.dock-backdrop.show{ display:block; }

/* Variante para docas embutidas no fluxo da página (Dia, Capítulo) — em vez de sticky lateral */
.notes-dock.full-width{ width:100%; position:static; max-height:none; }

/* Expandido: cobre a janela inteira, de ponta a ponta — sem margem, sem dúvida de que está "tela cheia" */
.notes-dock.expanded,
.notes-dock.full-width.expanded{
  position:fixed; inset:0; top:0; right:0; bottom:0; left:0;
  width:100vw; height:100vh; max-width:none; max-height:none; margin:0; z-index:80;
  border-radius:0; border:none; box-shadow:none;
  padding:34px clamp(20px, 6vw, 64px) 30px; overflow:hidden;
  display:flex; flex-direction:column;
}
.notes-dock.expanded .notes-dock-head h3{ font-size:1.5rem; }
.notes-dock.expanded .notes-dock-head-actions{ padding-right:4px; }
.notes-dock.expanded textarea, .notes-dock.expanded .notes-dock-editor{
  flex:1 1 0; min-height:0; width:100%; max-width:800px; margin:0 auto;
  font-size:1.12rem; line-height:2; padding:38px clamp(24px, 4vw, 56px);
}
.notes-dock.expanded .notes-dock-hint{ display:none; }
.expand-btn .icon-collapse{ display:none; }
.notes-dock.expanded .expand-btn .icon-expand{ display:none; }
.notes-dock.expanded .expand-btn .icon-collapse{ display:block; }

/* ============ Mês: cabeçalho + lista de dias ============ */
.month-header-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:14px; flex-wrap:wrap; }
.month-header-bar h1{ font-size:1.9rem; }
.month-nav-btn{
  display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; letter-spacing:.03em;
  color:var(--parchment-dim); border:1px solid var(--border); padding:9px 16px; border-radius:999px; transition:var(--transition);
}
.month-nav-btn:hover{ border-color:var(--gold-dim); color:var(--gold-bright); background:var(--gold-faint); }
.month-nav-btn.disabled{ opacity:.25; pointer-events:none; }
.month-progress-track{ height:6px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden; margin-bottom:26px; }
.month-progress-fill{ height:100%; background:linear-gradient(90deg, var(--sage), var(--gold)); transition:width .5s ease; }

.day-list{ display:flex; flex-direction:column; gap:10px; }
.day-row{
  background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--gold-dim);
  border-radius:var(--radius-md); overflow:hidden; transition:var(--transition); position:relative;
}
.day-row:hover{ background:var(--bg-card-hover); }
.day-row.is-done{ border-left-color:var(--sage); }
.day-row.is-today{ border-left-color:var(--gold-bright); box-shadow:0 0 0 1px var(--gold-dim), 0 0 24px -6px rgba(201,162,74,.4); }
.day-row.is-selected{ border-color:var(--gold-dim); background:var(--bg-card-hover); box-shadow:0 0 0 1px var(--gold-dim), 0 0 20px -8px rgba(201,162,74,.5); }
.today-ribbon{
  position:absolute; top:0; right:14px; background:var(--gold-bright); color:#151005; font-size:.6rem;
  font-weight:900; letter-spacing:.08em; padding:3px 9px; border-radius:0 0 6px 6px; text-transform:uppercase;
}
/* Divisor "Hoje" — marca onde hoje cai na lista quando nenhum dia bate exato
   (ver todayGapInMonth). Discreto de propósito: uma linha fina + um selo
   pequeno, não uma barra cheia — não compete com a faixa "Hoje" de sempre. */
.today-divider{ display:flex; align-items:center; gap:14px; margin:4px 0; }
.today-divider-line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-dim) 15%, var(--gold-dim) 85%, transparent); }
.today-divider-label{
  font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-bright); white-space:nowrap; padding:4px 13px; border:1px solid var(--gold-dim);
  border-radius:999px; background:var(--gold-faint); flex-shrink:0;
}
.day-row-head{ cursor:pointer; display:flex; align-items:center; gap:16px; width:100%; padding:15px 18px; box-sizing:border-box; }
.day-num{ font-family:var(--font-serif); font-weight:600; color:var(--gold-bright); font-size:.98rem; width:64px; flex-shrink:0; position:relative; }
.day-row.has-note .day-num::after{
  content:''; position:absolute; top:-2px; right:-8px; width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.day-date{ font-size:.72rem; color:var(--ink-muted); width:78px; flex-shrink:0; }
.day-reading{ flex:1; font-size:.9rem; color:var(--parchment); min-width:150px; }
.day-testament{ font-size:.62rem; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:999px; flex-shrink:0; }
.tag-AT{ background:var(--sage-dim); color:var(--sage); }
.tag-NT{ background:var(--teal-dim); color:var(--teal); }
.day-check{ position:relative; display:flex; align-items:center; cursor:pointer; flex-shrink:0; }
.day-check input{ position:absolute; opacity:0; width:22px; height:22px; cursor:pointer; margin:0; }
.checkmark{ width:22px; height:22px; border-radius:6px; border:1.5px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; transition:var(--transition); flex-shrink:0; }
.day-check input:checked ~ .checkmark{ background:var(--sage); border-color:var(--sage); }
.checkmark::after{ content:''; width:11px; height:6px; border-left:2px solid #08150c; border-bottom:2px solid #08150c; transform:rotate(-45deg) translateY(-1px); opacity:0; }
.day-check input:checked ~ .checkmark::after{ opacity:1; }
.row-arrow{ color:var(--ink-muted); font-size:1.1rem; flex-shrink:0; transition:var(--transition); }
.day-row:hover .row-arrow{ color:var(--gold-bright); transform:translateX(2px); }

/* ============ Lista de capítulos (página de dia) ============ */
.chapter-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:36px; }
.chapter-row{
  display:flex; align-items:center; gap:14px; background:var(--bg-card); border:1px solid var(--border);
  border-left:3px solid var(--gold-dim); border-radius:var(--radius-md); padding:14px 18px; transition:var(--transition);
  position:relative;
}
.chapter-row:hover{ background:var(--bg-card-hover); border-color:var(--gold-dim); }
.chapter-row.has-note{ border-left-color:var(--sage); }
.chapter-label{ font-family:var(--font-serif); font-size:1rem; color:var(--parchment); font-weight:600; flex:1; position:relative; }
.chapter-row.has-note .chapter-label::after{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-left:9px; vertical-align:middle;
}

@media (max-width:1100px){
  .workspace{ flex-direction:column; }
  .notes-dock{ width:100%; position:static; max-height:none; }
  .notes-dock textarea, .notes-dock .notes-dock-editor{ min-height:220px; }
}
@media (max-width:720px){
  .site-header-inner{ padding:14px 18px; gap:12px; }
  .page{ padding:26px 16px 70px; }
  .hero{ padding:30px 22px; }
  .hero h1{ font-size:1.7rem; }
  .hero-title-top{ font-size:1.7rem; }
  .hero-title-sub{ font-size:1rem; letter-spacing:.1em; }
  .hero p.lede{ font-size:.92rem; }
  .day-reading{ min-width:110px; font-size:.82rem; }
  .day-date{ display:none; }
  .site-nav{ gap:5px; }
  .site-nav .nav-link{ padding:8px 12px; font-size:.74rem; }
  .page-title{ font-size:1.6rem; }
  .month-header-bar h1{ font-size:1.4rem; }

  .lantern-card{ padding:26px 24px; }
  .notes-dashboard{ flex-direction:column; min-height:0; }
  .notes-dashboard-nav{
    flex-direction:row; flex:0 0 auto; overflow-x:auto; border-right:none;
    border-bottom:1px solid var(--border); padding:14px;
  }
  .notes-dashboard-nav-item{ flex:0 0 auto; white-space:nowrap; }
  .notes-dashboard-content{ padding:24px; }
  .lantern-text-base, .lantern-text-bright{ font-size:1.05rem; }
  .delay-banner{ padding:18px 42px 18px 20px; }
  .notes-intro-card{ flex-direction:column; }
  .settings-row{ flex-direction:column; align-items:flex-start; gap:14px; }
}

@media (max-width:480px){
  /* Pílula de armazenamento (também é a porta de entrada do login): em vez de
     esconder o texto, ela ganha a linha inteira própria, abaixo do menu —
     assim continua legível e fácil de encontrar em telas pequenas. */
  .site-nav{ justify-content:center; }
  .storage-pill{ flex-basis:100%; justify-content:center; margin-top:6px; padding:10px 13px; }

  .site-header-inner{ padding:12px 14px; gap:8px; }
  .site-nav .nav-link{ padding:7px 10px; font-size:.68rem; }

  .page{ padding:20px 14px 60px; }
  .hero{ padding:24px 18px; border-radius:var(--radius-md); }
  .notes-dashboard{ border-radius:var(--radius-md); }
  .notes-dashboard-content{ padding:20px; }
  .notes-dashboard-nav-item{ font-size:.82rem; padding:11px 12px; }
  .hero h1{ font-size:1.4rem; }
  .hero-title-top{ font-size:1.4rem; }
  .hero-title-sub{ font-size:.85rem; letter-spacing:.08em; }
  .hero-eyebrow{ font-size:.64rem; }
  .hero-actions .btn{ width:100%; justify-content:center; padding:13px 18px; }
  .hero-actions{ flex-direction:column; }
  .today-card, .progress-card{ padding:20px; }
  .today-card .reading{ font-size:1.3rem; }

  .menu-grid, .stats-grid, .month-grid{ grid-template-columns:1fr; }

  .page-title{ font-size:1.4rem; }
  .page-subtitle{ font-size:.85rem; }

  /* Linha de cada dia: mais compacta, sem a etiqueta AT/NT (a cor da borda esquerda já indica lido/não lido) */
  .day-row-head{ gap:10px; padding:13px 12px; }
  .day-num{ width:auto; font-size:.86rem; }
  .day-reading{ font-size:.8rem; min-width:0; }
  .day-testament{ display:none; }
  .day-check{ padding:6px; margin:-6px; }
  .row-arrow{ font-size:1rem; }
  .chapter-row{ padding:12px 14px; gap:10px; }

  .month-header-bar{ gap:8px; }
  .month-header-bar h1{ font-size:1.2rem; order:-1; flex-basis:100%; text-align:center; }
  .month-nav-btn{ font-size:.68rem; padding:8px 12px; flex:1; text-align:center; justify-content:center; }
  .back-link{ font-size:.72rem; padding:9px 14px; }

  .btn-reset-visible{ font-size:.74rem; padding:9px 14px; }
  .btn-backup-visible{ font-size:.74rem; padding:9px 14px; }
  .backup-inline{ width:100%; }
  .backup-inline .btn-backup-visible{ flex:1; justify-content:center; }
  .reset-inline .reset-confirm{ width:min(320px, calc(100vw - 32px)); }

  .notes-dock{ padding:18px 16px 16px; }
  .notes-dock.expanded{ padding:18px 14px 16px; }
  .notes-dock.expanded textarea, .notes-dock.expanded .notes-dock-editor{ padding:20px 18px; font-size:.98rem; }
}


/* ========================================================
   CABEÇALHO — brasão em cima, nome embaixo (logo compacta em coluna,
   à esquerda), com o menu na mesma linha, recuado à direita — em vez
   de brasão+nome numa linha e o menu inteiro numa segunda linha abaixo.
======================================================== */
.brand-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.crest-mark {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  position: relative;
  -webkit-touch-callout: none; /* impede o menu nativo de "toque longo" do celular no link */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* remove o flash azul padrão, que mascarava o anel de feedback */
}

.secret-hold-ring{
  position:absolute; inset:-5px; border-radius:50%; pointer-events:none; opacity:0;
  box-shadow:0 0 0 0 var(--gold-bright);
}
.secret-hold-ring.charging{ opacity:1; box-shadow:0 0 0 3px var(--gold-bright); transition:box-shadow 1.5s linear, opacity .15s ease; }
.secret-hold-ring.done{ opacity:1; box-shadow:0 0 0 3px var(--sage); transition:none; }
.secret-hold-ring.denied{ opacity:1; box-shadow:0 0 0 3px #c45c44; transition:none; }

.secret-progress{
  position:fixed; right:16px; bottom:16px; z-index:998; display:none; gap:5px; align-items:center;
  padding:7px 9px; border-radius:999px; background:rgba(4,7,5,.55); backdrop-filter:blur(2px);
}
.secret-progress.show{ display:flex; }
.secret-progress span{ width:6px; height:6px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 4px var(--gold-bright); flex:none; transition:width .1s ease, height .1s ease; }
.secret-progress span.big{ width:11px; height:11px; }

.crest-logo {
  width: 219.45px; /* 199.5px + 10% */
  height: 219.45px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 20px -4px rgba(0,0,0,.6), 0 0 0 1px var(--gold-dim);
}

.brand-text { line-height: 1.22; display: flex; flex-direction: column; align-items: center; }
.brand-title {
  font-size: 1.6rem; letter-spacing: .05em; display: block;
}
.brand-title-sub {
  font-size: .95rem; letter-spacing: .2em; opacity: .82; margin-top: 4px;
}

@media (max-width: 640px) {
  .crest-logo { width: 150.15px; height: 150.15px; } /* 136.5px + 10% */
  .brand-title { font-size: 1.2rem; }
  .brand-title-sub { font-size: .8rem; letter-spacing: .12em; }
  .brand-row { gap: 6px; }
}

/* ============ Barra do Portal Nascente (2026-08-25) ============
   Único caminho de volta pro Portal Nascente (a nova página central do
   ecossistema, em https://nascente-prime-refuge.web.app) — substitui o
   antigo item de menu "Nascente Prime / Refuge" (removido de NAV_ITEMS em
   app-shared.js) e o "Nascente Prime" que aparecia junto do brasão
   (.brand-title agora é só "Casa Editorial"). Mesma receita já usada nos
   repositórios irmãos refuge e ai-experience. */
.portal-topbar{
  text-align:center; padding:16px 20px 13px; border-bottom:1px solid var(--gold-dim);
  background:rgba(0,0,0,.18);
}
.portal-topbar a{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; color:inherit; transition:var(--transition);
}
/* Precisa ser o MAIOR título da página — Portal Nascente é o título
   principal de todo o ecossistema, "Casa Editorial" (.brand-title, junto
   do brasão) é só o secundário. Corrigido em 2026-08-25 depois do dono
   reportar a hierarquia invertida (Portal Nascente saindo menor que
   "Casa Editorial") — mesma correção replicada nos repos irmãos. */
.portal-topbar-title{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  letter-spacing:.14em; font-size:2.1rem; color:#ffd873;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 16px rgba(255,216,115,.35);
}
.portal-topbar a:hover .portal-topbar-title{
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 22px rgba(255,216,115,.75), 0 0 40px rgba(255,216,115,.4);
}
@media (max-width:640px){
  .portal-topbar{ padding:12px 14px 10px; }
  .portal-topbar-title{ font-size:1.55rem; letter-spacing:.1em; }
}
/* Telas bem estreitas: a logo encolhe mais uma vez pra sobrar espaço de
   verdade pro hambúrguer/pílula de armazenamento ao lado dela. */
@media (max-width: 480px) {
  .crest-logo { width: 101.2px; height: 101.2px; } /* 92px + 10% */
  .brand-title { font-size: 1.02rem; }
  .brand-title-sub { font-size: .68rem; letter-spacing: .1em; }
}

/* ============ Efeito cortina (entrada na Agenda Nascente) ============ */
.curtain-overlay{ position:fixed; inset:0; z-index:300; pointer-events:none; }
.curtain-panel{
  position:absolute; top:0; bottom:0; width:50%;
  background:linear-gradient(160deg, #101b14, #070c08 75%);
  transition:transform .65s cubic-bezier(.65,0,.35,1);
}
.curtain-panel-left{ left:0; transform:translateX(-100%); box-shadow:30px 0 70px -10px rgba(0,0,0,.7); }
.curtain-panel-right{ right:0; transform:translateX(100%); box-shadow:-30px 0 70px -10px rgba(0,0,0,.7); }
.curtain-panel-left::after{
  content:''; position:absolute; top:0; bottom:0; right:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--gold-dim) 15%, var(--gold-dim) 85%, transparent);
}
.curtain-panel-right::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--gold-dim) 15%, var(--gold-dim) 85%, transparent);
}
.curtain-overlay.is-active{ pointer-events:auto; }
.curtain-overlay.is-active .curtain-panel{ transform:translateX(0); }
body.curtain-closed-on-load .curtain-overlay{ pointer-events:auto; }
body.curtain-closed-on-load .curtain-panel-left,
body.curtain-closed-on-load .curtain-panel-right{ transform:translateX(0); }
@media (prefers-reduced-motion:reduce){ .curtain-panel{ transition:none; } }

/* ============ Sistema universal de cadernos (Agenda Nascente / Estudos Gerais) ============ */
.notebook-color-gold{ --nb:var(--gold); --nb-bright:var(--gold-bright); --nb-dim:var(--gold-dim); --nb-faint:var(--gold-faint); }
.notebook-color-sage{ --nb:var(--sage); --nb-bright:var(--sage); --nb-dim:var(--sage-dim); --nb-faint:var(--sage-dim); }
.notebook-color-teal{ --nb:var(--teal); --nb-bright:var(--teal); --nb-dim:var(--teal-dim); --nb-faint:var(--teal-dim); }
.notebook-color-rose{ --nb:var(--rose); --nb-bright:var(--rose); --nb-dim:var(--rose-dim); --nb-faint:var(--rose-dim); }
.notebook-color-azul{ --nb:var(--azul); --nb-bright:var(--azul); --nb-dim:var(--azul-dim); --nb-faint:var(--azul-dim); }
.notebook-color-roxo{ --nb:var(--roxo); --nb-bright:var(--roxo); --nb-dim:var(--roxo-dim); --nb-faint:var(--roxo-dim); }
.notebook-color-bordo{ --nb:var(--bordo); --nb-bright:var(--bordo-bright); --nb-dim:var(--bordo-dim); --nb-faint:var(--bordo-faint); }
.notebook-color-laranja{ --nb:var(--laranja); --nb-bright:var(--laranja); --nb-dim:var(--laranja-dim); --nb-faint:var(--laranja-dim); }
.notebook-color-oliva{ --nb:var(--oliva); --nb-bright:var(--oliva); --nb-dim:var(--oliva-dim); --nb-faint:var(--oliva-dim); }
.notebook-color-verde{ --nb:var(--verde); --nb-bright:var(--verde); --nb-dim:var(--verde-dim); --nb-faint:var(--verde-dim); }
.notebook-color-turquesa{ --nb:var(--turquesa); --nb-bright:var(--turquesa); --nb-dim:var(--turquesa-dim); --nb-faint:var(--turquesa-dim); }
.notebook-color-ciano{ --nb:var(--ciano); --nb-bright:var(--ciano); --nb-dim:var(--ciano-dim); --nb-faint:var(--ciano-dim); }
.notebook-color-indigo{ --nb:var(--indigo); --nb-bright:var(--indigo); --nb-dim:var(--indigo-dim); --nb-faint:var(--indigo-dim); }
.notebook-color-violeta{ --nb:var(--violeta); --nb-bright:var(--violeta); --nb-dim:var(--violeta-dim); --nb-faint:var(--violeta-dim); }
.notebook-color-magenta{ --nb:var(--magenta); --nb-bright:var(--magenta); --nb-dim:var(--magenta-dim); --nb-faint:var(--magenta-dim); }
.notebook-color-terracota{ --nb:var(--terracota); --nb-bright:var(--terracota); --nb-dim:var(--terracota-dim); --nb-faint:var(--terracota-dim); }
.notebook-color-grafite{ --nb:var(--grafite); --nb-bright:var(--grafite); --nb-dim:var(--grafite-dim); --nb-faint:var(--grafite-dim); }

.notebook-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:28px; }

/* Sanfona de cadernos — cada um é um cartão independente, recolhido por padrão */
.notebook-accordion{ display:flex; flex-direction:column; gap:14px; }
.notebook-acc-item{
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-card);
  box-shadow:var(--depth-1); overflow:hidden; transition:var(--transition);
}
.notebook-acc-item:hover{ border-color:var(--nb-dim); transform:translateY(-1px); }
.notebook-acc-item.is-open{
  border-color:var(--nb); transform:none;
  box-shadow:0 20px 46px -20px var(--nb-dim), 0 6px 18px -10px rgba(0,0,0,.6);
}
.notebook-acc-head{
  all:unset; cursor:pointer; width:100%; box-sizing:border-box; display:flex; align-items:center; gap:12px;
  padding:16px 20px; font-size:.88rem; font-weight:700; color:var(--parchment-dim); transition:var(--transition);
}
.notebook-acc-item.is-open .notebook-acc-head{ color:var(--nb-bright); background:var(--nb-faint); }
.notebook-acc-dot{ width:11px; height:11px; border-radius:50%; background:var(--nb); box-shadow:0 0 8px var(--nb); flex-shrink:0; }
.notebook-acc-name{ flex:1; font-family:var(--font-serif); font-size:1.02rem; }
.notebook-acc-type{ font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
.notebook-acc-item.is-open .notebook-acc-type{ color:var(--nb); }
.notebook-acc-chevron{ transition:transform .3s ease; color:var(--nb); }
.notebook-acc-item.is-open .notebook-acc-chevron{ transform:rotate(180deg); }
/* Altura animada via max-height calculado em JS (PLC.initNotebookSystem), não
   via grid-template-rows: o truque de "0fr/1fr" tem um bug conhecido no
   WebKit/Safari (motor de praticamente todo navegador mobile, inclusive no
   iOS) que trava a faixa em altura ~0 mesmo com o item marcado como aberto —
   sanfona parecia abrir (seta girava, cor mudava) mas o conteúdo ficava
   inacessível. max-height em pixels não sofre desse bug. */
.notebook-acc-body-wrap{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.notebook-acc-body-inner{
  min-height:0; padding:0 20px 22px; border-top:1px solid transparent; transition:var(--transition);
}
.notebook-acc-item.is-open .notebook-acc-body-inner{ border-top-color:var(--border); padding-top:4px; }
.notebook-add-btn{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  border-radius:999px; border:1.5px dashed var(--gold-dim); color:var(--gold); font-size:.82rem; font-weight:800;
  transition:var(--transition);
}
.notebook-add-btn:hover{ background:var(--gold-faint); border-style:solid; color:var(--gold-bright); }

/* Formulário inline de criação de caderno */
.notebook-create-form{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft); padding:20px; margin-bottom:24px; display:flex; flex-direction:column; gap:16px;
}
.notebook-create-form input[type=text]{
  width:100%; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--parchment); font:inherit; font-size:.9rem;
}
.notebook-create-form input[type=text]:focus{ outline:none; border-color:var(--gold-dim); }
.notebook-field-label{ font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px; display:block; }
.notebook-color-picker{ display:flex; flex-wrap:wrap; gap:10px; max-width:400px; }
.notebook-color-swatch{
  all:unset; cursor:pointer; width:30px; height:30px; border-radius:50%; background:var(--nb);
  border:2px solid transparent; transition:var(--transition); box-shadow:0 4px 10px -4px rgba(0,0,0,.5);
}
.notebook-color-swatch:hover{ transform:scale(1.12); }
.notebook-color-swatch.selected{ border-color:var(--parchment); box-shadow:0 0 0 3px var(--nb-dim); }
.notebook-type-picker{ display:flex; flex-wrap:wrap; gap:10px; }
.notebook-type-option{
  all:unset; cursor:pointer; padding:11px 16px; border-radius:var(--radius-sm); border:1px solid var(--border);
  color:var(--parchment-dim); font-size:.8rem; font-weight:700; transition:var(--transition);
}
.notebook-type-option:hover{ border-color:var(--gold-dim); color:var(--gold-bright); }
.notebook-type-option.selected{ border-color:var(--gold-dim); background:var(--gold-faint); color:var(--gold-bright); }
.notebook-create-actions{ display:flex; gap:10px; justify-content:flex-end; }

/* Cabeçalho de detalhe do caderno ativo (renderizado dentro do corpo aberto da sanfona) */
.notebook-detail-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.notebook-detail-title{ display:flex; align-items:center; gap:12px; }
.notebook-detail-title .dot{ width:14px; height:14px; border-radius:50%; background:var(--nb); box-shadow:0 0 10px var(--nb); flex-shrink:0; }
.notebook-detail-title h2{ font-family:var(--font-serif); font-size:1.4rem; color:var(--parchment); font-weight:600; }
.notebook-detail-title input[type=text]{
  font-family:var(--font-serif); font-size:1.4rem; color:var(--parchment); font-weight:600; background:none;
  border:none; border-bottom:1px dashed var(--gold-dim); padding:2px 4px;
}
.notebook-detail-title input[type=text]:focus{ outline:none; border-color:var(--gold-bright); }
.notebook-detail-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.notebook-icon-btn{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:9px 14px;
  border-radius:999px; border:1px solid var(--border); color:var(--parchment-dim); font-size:.74rem; font-weight:700;
  transition:var(--transition);
}
.notebook-icon-btn:hover{ border-color:var(--gold-dim); color:var(--gold-bright); background:var(--gold-faint); }
.notebook-icon-btn.danger:hover{ border-color:rgba(196,92,68,.5); color:#e08a72; background:rgba(196,92,68,.12); }

/* Lista de compras */
.shopping-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.shopping-item{
  display:flex; align-items:center; gap:14px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:14px 16px; box-shadow:0 8px 20px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.02);
  transition:var(--transition);
}
.shopping-item:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,.65); border-color:var(--gold-dim); }
.shopping-item-marker{
  all:unset; cursor:pointer; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--transition); position:relative;
}
.shopping-item-marker::after{ content:''; width:12px; height:7px; border-left:2px solid #08150c; border-bottom:2px solid #08150c; transform:rotate(-45deg) translateY(-1px); opacity:0; }
.shopping-item[data-state="comprado"] .shopping-item-marker{ background:var(--sage); border-color:var(--sage); }
.shopping-item[data-state="comprado"] .shopping-item-marker::after{ opacity:1; }
.shopping-item[data-state="cancelado"] .shopping-item-marker{ background:var(--rose); border-color:var(--rose); }
.shopping-item[data-state="cancelado"] .shopping-item-marker::after{ opacity:1; border-left-color:#1a0d0a; border-bottom-color:#1a0d0a; transform:rotate(45deg) translateY(0); width:2px; height:12px; border-left-width:2px; border-bottom:none; box-shadow:2px 0 0 0 #1a0d0a; }
.shopping-item-text{
  flex:1 1 auto; background:none; border:none; color:var(--parchment); font:inherit; font-size:.92rem; padding:4px 0;
}
.shopping-item-text:focus{ outline:none; }
.shopping-item[data-state="cancelado"] .shopping-item-text{ text-decoration:line-through; opacity:.55; }
.shopping-item[data-state="comprado"] .shopping-item-text{ color:var(--parchment-dim); }
.shopping-item-qty{
  width:44px; text-align:center; background:var(--bg-panel); border:1px solid var(--border); border-radius:999px;
  color:var(--parchment-dim); font-size:.76rem; font-weight:800; padding:5px 0;
}
.shopping-item-del{ all:unset; cursor:pointer; color:var(--ink-muted); padding:6px; border-radius:50%; transition:var(--transition); flex-shrink:0; }
.shopping-item-del:hover{ color:#e08a72; background:rgba(196,92,68,.12); }
.shopping-add-row{ display:flex; gap:10px; }
.shopping-add-row input{
  flex:1 1 auto; background:var(--bg-card); border:1px solid var(--border); border-radius:999px;
  padding:12px 18px; color:var(--parchment); font:inherit; font-size:.88rem;
}
.shopping-add-row input:focus{ outline:none; border-color:var(--gold-dim); }

/* Compromissos (tarefas com data/hora) */
.compromisso-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.compromisso-item{
  display:flex; align-items:center; gap:14px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:14px 16px; box-shadow:0 8px 20px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.02);
  transition:var(--transition);
}
.compromisso-item:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,.65); border-color:var(--gold-dim); }
.compromisso-item[data-overdue="1"]{ border-color:var(--bordo-dim); background:var(--bordo-faint); }
.compromisso-item[data-state="concluido"] .shopping-item-marker{ background:var(--sage); border-color:var(--sage); }
.compromisso-item[data-state="concluido"] .shopping-item-marker::after{ opacity:1; }
.compromisso-item[data-state="concluido"] .compromisso-title{ text-decoration:line-through; opacity:.55; }
.compromisso-fields{ flex:1 1 auto; display:flex; flex-direction:column; gap:4px; min-width:0; }
.compromisso-title{ background:none; border:none; color:var(--parchment); font:inherit; font-size:.92rem; padding:2px 0; }
.compromisso-title:focus{ outline:none; }
.compromisso-when{ display:flex; gap:8px; }
.compromisso-date, .compromisso-time{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:999px;
  color:var(--parchment-dim); font-size:.72rem; font-weight:700; padding:5px 12px; width:auto;
}
.compromisso-item[data-overdue="1"] .compromisso-date{ color:var(--bordo-bright); border-color:var(--bordo-dim); }
.compromisso-date{ width:96px; } .compromisso-time{ width:64px; }
.compromisso-add-row{ display:flex; gap:10px; flex-wrap:wrap; }
.compromisso-add-row input[data-new-title]{ flex:1 1 200px; }
.compromisso-add-row input{
  background:var(--bg-card); border:1px solid var(--border); border-radius:999px;
  padding:12px 18px; color:var(--parchment); font:inherit; font-size:.88rem;
}
.compromisso-add-row input:focus{ outline:none; border-color:var(--gold-dim); }
.compromisso-add-row input[data-new-date]{ width:120px; } .compromisso-add-row input[data-new-time]{ width:90px; }

/* Cadernos de links */
.link-entries{ display:flex; flex-direction:column; gap:16px; margin-bottom:18px; }
.link-entry-card{
  background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--nb);
  border-radius:var(--radius-md); box-shadow:0 10px 26px -16px rgba(0,0,0,.6); overflow:hidden; transition:var(--transition);
}
.link-entry-card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(0,0,0,.65); }
.link-entry-top{ padding:16px 18px 14px; }
.link-entry-title{
  width:100%; background:none; border:none; color:var(--parchment); font-family:var(--font-serif);
  font-size:1.05rem; font-weight:600; margin-bottom:12px; padding:2px 0;
}
.link-entry-title:focus{ outline:none; }
.link-entry-open{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px;
  border:1px solid var(--gold-dim); background:var(--gold-faint); color:var(--gold-bright); font-size:.82rem; font-weight:800;
  transition:var(--transition);
}
.link-entry-open:hover{ background:var(--gold-dim); box-shadow:0 8px 20px -8px rgba(201,162,74,.5); }
.link-entry-divider{ height:1px; background:var(--border); box-shadow:inset 0 8px 14px -12px rgba(0,0,0,.6); }
.link-entry-note-zone{ padding:14px 18px 16px; background:rgba(0,0,0,.14); }
.link-entry-note-static{ font-size:.84rem; color:var(--ink-muted); font-style:italic; line-height:1.6; cursor:text; min-height:1.4em; }
.link-entry-note-static.empty::before{ content:'Toque para anotar sobre este link...'; }
.link-entry-note-textarea{
  width:100%; min-height:80px; background:none; border:none; color:var(--parchment-dim); font:inherit;
  font-size:.84rem; line-height:1.6; resize:vertical;
}
.link-entry-note-textarea:focus{ outline:none; }
.link-entry-actions{ display:flex; justify-content:flex-end; gap:8px; padding:0 18px 14px; }
.link-add-form{ display:flex; flex-direction:column; gap:10px; background:var(--bg-card); border:1px dashed var(--gold-dim); border-radius:var(--radius-md); padding:16px 18px; }
.link-add-form input{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:11px 14px; color:var(--parchment); font:inherit; font-size:.86rem;
}
.link-add-form input:focus{ outline:none; border-color:var(--gold-dim); }

@media (max-width:640px){
  .notebook-detail-head{ flex-direction:column; align-items:flex-start; }
  .shopping-item{ flex-wrap:wrap; }
  .shopping-add-row{ flex-direction:column; }
}

/* ---- Hero SVG (página Imagens) ---- */
.media-hero{
  display:flex; align-items:center; gap:32px; margin-bottom:34px; flex-wrap:wrap;
}
.media-hero-art{ width:150px; height:150px; flex:none; filter:drop-shadow(0 12px 26px rgba(201,162,74,.22)); }
.media-hero-text{ flex:1; min-width:240px; }

/* ---- Barra de ferramentas (galeria / documentos) ---- */
.media-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-bottom:26px; padding:14px 18px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
}
.media-toolbar-info{ font-size:.82rem; color:var(--parchment-dim); }
.thumb-size-control{ display:flex; align-items:center; gap:10px; color:var(--gold); }
.thumb-size-control svg{ width:18px; height:18px; flex:none; color:var(--gold-bright); }
.thumb-size-control input[type="range"]{
  width:140px; accent-color:var(--gold);
}
.upload-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px;
  border:1px solid var(--gold-dim); background:var(--gold-faint); color:var(--gold-bright); font-size:.82rem; font-weight:800;
  cursor:pointer; transition:var(--transition);
}
.upload-btn:hover{ background:var(--gold-dim); box-shadow:0 8px 20px -8px rgba(201,162,74,.5); }
.upload-btn input[type="file"]{ display:none; }
.upload-btn.is-uploading{ pointer-events:none; opacity:.8; }
.upload-spinner{
  width:14px; height:14px; border-radius:50%; flex:none;
  border:2px solid var(--gold-dim); border-top-color:var(--gold-bright);
  animation:plc-spin .7s linear infinite;
}
@keyframes plc-spin{ to{ transform:rotate(360deg); } }
.doc-filter-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1 1 320px; }
.doc-search-input{
  flex:1 1 180px; min-height:40px; background:var(--bg-panel); border:1px solid var(--border); border-radius:999px;
  padding:0 16px; color:var(--parchment); font:inherit; font-size:.82rem;
}
.doc-search-input:focus{ outline:none; border-color:var(--gold-dim); }
.doc-sort-select{
  min-height:40px; background:var(--bg-panel); border:1px solid var(--border); border-radius:999px;
  padding:0 14px; color:var(--parchment-dim); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
}
.doc-sort-select:focus{ outline:none; border-color:var(--gold-dim); }

/* ============ Busca unificada ============ */
.search-bar{
  display:flex; align-items:center; gap:12px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:999px; padding:6px 22px; margin-bottom:32px; box-shadow:var(--depth-1); transition:var(--transition);
}
.search-bar:focus-within{ border-color:var(--gold-dim); box-shadow:var(--depth-hover), 0 0 0 3px var(--gold-faint); }
.search-bar-icon{ font-size:1rem; opacity:.7; flex-shrink:0; }
.search-bar input{
  flex:1; background:none; border:none; color:var(--parchment); font:inherit; font-size:1rem; padding:14px 0;
}
.search-bar input:focus{ outline:none; }
.search-group{ margin-bottom:32px; }
.search-group h2{
  font-family:var(--font-serif); font-size:1rem; font-weight:600; color:var(--gold-bright);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.search-group h2 .count{
  font-family:var(--font-sans); font-size:.68rem; font-weight:800; color:var(--ink-muted);
  background:var(--bg-panel); border-radius:999px; padding:2px 9px;
}
.search-result{
  display:block; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 18px; margin-bottom:10px; transition:var(--transition); box-shadow:var(--depth-1);
}
.search-result:hover{ border-color:var(--nb-dim, var(--gold-dim)); transform:translateY(-2px); box-shadow:var(--depth-hover); }
.search-result-title{ display:flex; align-items:center; gap:9px; font-weight:700; color:var(--parchment); font-size:.92rem; }
.search-result-title .dot{ width:10px; height:10px; border-radius:50%; background:var(--nb, var(--gold)); box-shadow:0 0 7px var(--nb, var(--gold)); flex-shrink:0; }
.search-result-snippet{ font-size:.8rem; color:var(--ink-muted); margin-top:6px; line-height:1.6; }

/* ---- Grade de imagens ---- */
.image-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--thumb-size, 160px), 1fr)); gap:14px;
}
.image-tile{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; cursor:pointer;
  border:1px solid var(--border); background:var(--bg-card); transition:var(--transition);
}
.image-tile:hover{ border-color:var(--gold-dim); transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(0,0,0,.6); }
.image-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.image-tile-name{
  position:absolute; left:0; right:0; bottom:0; padding:6px 9px; font-size:.68rem; color:var(--parchment);
  background:linear-gradient(0deg, rgba(0,0,0,.72), transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.image-tile.is-hidden{ opacity:.5; }
.image-tile-hide{
  all:unset; position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; cursor:pointer;
  background:rgba(4,7,5,.72); color:var(--parchment); display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.image-tile-hide:hover{ background:rgba(4,7,5,.9); color:var(--gold-bright); }
.image-empty, .doc-empty{
  padding:40px 20px; text-align:center; color:var(--ink-muted); font-size:.88rem; border:1px dashed var(--border); border-radius:var(--radius-md);
}

/* ---- Lightbox ---- */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(4,7,5,.92); display:none; align-items:center; justify-content:center;
  z-index:200; padding:26px; backdrop-filter:blur(4px);
}
.lightbox-overlay.is-active{ display:flex; }
.lightbox-img{ max-width:min(88vw, 1100px); max-height:80vh; border-radius:var(--radius-md); box-shadow:0 30px 70px -20px rgba(0,0,0,.8); }
.lightbox-caption{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:var(--parchment-dim); font-size:.85rem; }
.lightbox-actions{ position:absolute; top:20px; right:24px; display:flex; gap:10px; }
.lightbox-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--gold-dim); background:var(--bg-panel-2);
  color:var(--parchment); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition);
  font-size:1.1rem;
}
.lightbox-btn:hover{ background:var(--gold-faint); color:var(--gold-bright); }
.lightbox-move-select{
  height:42px; padding:0 14px; border-radius:999px; border:1px solid var(--gold-dim); background:var(--bg-panel-2);
  color:var(--parchment); font-size:.8rem; font-weight:700; cursor:pointer; transition:var(--transition); max-width:170px;
}
.lightbox-move-select:hover{ background:var(--gold-faint); color:var(--gold-bright); }
.lightbox-btn.danger:hover{ border-color:rgba(196,92,68,.5); color:#e08a72; background:rgba(196,92,68,.12); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  border:1px solid var(--gold-dim); background:var(--bg-panel-2); color:var(--parchment);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition);
  font-size:1.3rem; z-index:1;
}
.lightbox-nav:hover{ background:var(--gold-faint); color:var(--gold-bright); }
.lightbox-nav-prev{ left:20px; }
.lightbox-nav-next{ right:20px; }
@media (max-width:640px){
  .lightbox-nav{ width:38px; height:38px; font-size:1.05rem; }
  .lightbox-nav-prev{ left:8px; }
  .lightbox-nav-next{ right:8px; }
}

/* ---- Lista de documentos, agrupada por tipo ---- */
.doc-group{ margin-bottom:30px; }
.doc-group-title{
  display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-size:1.05rem; color:var(--gold-bright);
  margin-bottom:14px; font-weight:600;
}
.doc-group-title .count{ font-family:var(--font-body, inherit); font-size:.74rem; color:var(--ink-muted); font-weight:600; }
.doc-row{
  display:flex; align-items:flex-start; gap:14px; padding:13px 16px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); margin-bottom:10px; transition:var(--transition);
}
.doc-row:hover{ border-color:var(--gold-dim); }
.doc-row.is-hidden{ opacity:.55; border-style:dashed; }
.doc-row-icon{ font-size:1.4rem; flex:none; width:34px; text-align:center; margin-top:2px; }
.doc-row-main{ flex:1 1 260px; min-width:0; }
.doc-row-name{ color:var(--parchment); font-weight:600; font-size:.9rem; white-space:normal; overflow-wrap:break-word; word-break:break-word; }
.doc-row-meta{ font-size:.74rem; color:var(--ink-muted); margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.doc-row-type-tag{
  font-size:.66rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--gold-bright);
  background:var(--gold-faint); border:1px solid var(--gold-dim); border-radius:999px; padding:2px 8px;
}
.doc-row-actions{ display:flex; gap:6px; flex-wrap:wrap; flex:none; }

@media (max-width:720px){
  .media-hero{ flex-direction:column; align-items:flex-start; text-align:left; }
  .media-hero-art{ width:110px; height:110px; }
  .media-toolbar{ flex-direction:column; align-items:stretch; }
  .doc-row{ flex-wrap:wrap; }
  .doc-row-actions{ width:100%; justify-content:flex-end; }
}

/* ============ Preview inline de arquivos (abre dentro do app, sem download) ============ */
.preview-overlay{
  display:none; position:fixed; inset:0; background:rgba(4,7,5,.78); backdrop-filter:blur(2px); z-index:95;
  align-items:center; justify-content:center; padding:32px 20px;
}
.preview-overlay.show{ display:flex; }
.preview-modal{
  width:100%; max-width:1000px; height:min(86vh, 900px); background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-deep); display:flex; flex-direction:column; overflow:hidden;
  transition:width .18s ease, height .18s ease, max-width .18s ease;
}
.preview-modal.expanded{ max-width:none; width:97vw; height:95vh; }
.preview-modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--border); flex:none;
}
.preview-modal-title{
  display:flex; align-items:center; gap:10px; min-width:0; font-family:var(--font-serif); color:var(--parchment);
  font-size:1rem; font-weight:600;
}
.preview-modal-title .icon{ font-size:1.3rem; flex:none; }
.preview-modal-title .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-modal-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.preview-modal-close{
  all:unset; cursor:pointer; color:var(--ink-muted); font-size:1.2rem; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; border-radius:50%; transition:var(--transition);
}
.preview-modal-close:hover{ color:var(--gold-bright); background:var(--gold-faint); }
.preview-modal-body{ flex:1; min-height:0; overflow:auto; position:relative; background:var(--bg-deep, #0c120e); }
.preview-frame{ width:100%; height:100%; border:0; display:block; }
.preview-image-wrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:20px; }
.preview-image-wrap img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--radius-sm); }
.preview-text{
  padding:26px 32px; color:var(--parchment-dim); font-family:var(--font-body, inherit); font-size:.92rem; line-height:1.8;
  white-space:pre-wrap; word-break:break-word;
}
.preview-markdown{ padding:26px 32px; color:var(--parchment-dim); font-size:.92rem; line-height:1.8; max-width:760px; }
.preview-markdown h1, .preview-markdown h2, .preview-markdown h3{ font-family:var(--font-serif); color:var(--gold-bright); margin:20px 0 10px; }
.preview-markdown h1:first-child, .preview-markdown h2:first-child, .preview-markdown h3:first-child{ margin-top:0; }
.preview-markdown p{ margin:0 0 14px; }
.preview-markdown ul, .preview-markdown ol{ margin:0 0 14px 22px; }
.preview-markdown li{ margin-bottom:6px; }
.preview-markdown code{ background:var(--gold-faint); color:var(--gold-bright); padding:1px 6px; border-radius:4px; font-size:.85em; }
.preview-markdown a{ color:var(--gold); }
.preview-markdown strong{ color:var(--parchment); }
.preview-link{ color:inherit; text-decoration:none; cursor:text; }
.preview-modal-body.ctrl-active .preview-link{ color:var(--gold-bright); text-decoration:underline; cursor:pointer; }
.preview-link-open{
  display:inline-block; color:var(--gold); text-decoration:none; margin-left:2px; font-size:.85em;
  cursor:pointer; vertical-align:1px;
}
.preview-link-open:hover{ color:var(--gold-bright); }
.preview-link-hint{ padding:8px 32px 0; font-size:.72rem; color:var(--ink-muted); }
.preview-table-wrap{ padding:20px 24px; overflow:auto; height:100%; }
.preview-table{ border-collapse:collapse; width:100%; font-size:.82rem; }
.preview-table th, .preview-table td{ border:1px solid var(--border); padding:7px 10px; text-align:left; color:var(--parchment-dim); }
.preview-table th{ color:var(--gold-bright); background:var(--gold-faint); font-weight:700; }
.preview-status{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  color:var(--ink-muted); font-size:.85rem; text-align:center; padding:20px;
}
.preview-status .icon{ font-size:2.4rem; }

/* ============ Calendário (Agenda Nascente / Calendário) ============ */
.calendar-card{
  position:relative; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:var(--bg-card); padding:30px 32px; margin-bottom:36px; box-shadow:var(--shadow-soft);
}
.calendar-head{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
.cal-month-title{
  font-family:var(--font-serif); font-size:1.5rem; font-weight:600; color:var(--parchment);
  min-width:220px; text-align:center; text-transform:capitalize;
}
.cal-nav-btn{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--border); color:var(--parchment-dim); font-size:1rem; transition:var(--transition);
}
.cal-nav-btn:hover{ border-color:var(--gold-dim); color:var(--gold-bright); background:var(--gold-faint); }
.cal-today-btn{
  font-size:.76rem; font-weight:700; letter-spacing:.03em; color:var(--parchment-dim);
  border:1px solid var(--border); padding:9px 16px; border-radius:999px; transition:var(--transition);
}
.cal-today-btn:hover{ border-color:var(--gold-dim); color:var(--gold-bright); background:var(--gold-faint); }
.cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px;
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); text-align:center;
}
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell{
  all:unset; box-sizing:border-box; cursor:pointer; aspect-ratio:1/1; min-height:64px;
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:8px;
  border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-panel);
  transition:var(--transition); overflow:hidden;
}
.cal-cell:hover{ border-color:var(--gold-dim); background:var(--bg-card-hover); }
.cal-cell-empty{ all:unset; box-sizing:border-box; aspect-ratio:1/1; min-height:64px; }
.cal-cell-num{ font-family:var(--font-serif); font-size:.92rem; font-weight:600; color:var(--parchment-dim); }
.cal-cell.is-weekend .cal-cell-num{ color:var(--ink-muted); }
.cal-cell.is-today{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-dim), 0 6px 16px -8px rgba(201,162,74,.5); }
.cal-cell.is-today .cal-cell-num{ color:var(--gold-bright); font-weight:800; }
.cal-cell.is-holiday{ background:var(--bordo-faint); border-color:var(--bordo-dim); }
.cal-cell-holiday{
  font-size:.6rem; line-height:1.25; color:var(--bordo-bright); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
/* Cada item vira uma "pilulazinha" com horário + título (o que couber),
   colorida por TIPO (não pelo caderno) — é isso que deixa Tarefa e
   Compromisso visualmente diferentes de verdade, não só a forma do pontinho. */
.cal-cell-item{
  display:block; width:100%; font-size:.62rem; line-height:1.35; font-weight:600;
  padding:2px 5px; border-radius:4px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-align:left; flex-shrink:0;
}
.cal-cell-item-compromisso{ background:var(--azul-dim); color:var(--azul); }
.cal-cell-item-tarefa{ background:var(--sage-dim); color:var(--sage); }
.cal-cell-more{ font-size:.58rem; color:var(--ink-muted); font-weight:700; margin-top:1px; }

.section-divider-title{
  font-family:var(--font-serif); font-size:1.3rem; font-weight:600; color:var(--parchment);
  margin:8px 0 18px; padding-top:8px; border-top:1px solid var(--border);
}

/* ---- Modal do dia ---- */
.cal-day-backdrop{
  display:none; position:fixed; inset:0; z-index:200; background:rgba(4,7,5,.72); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:24px;
}
.cal-day-backdrop.show{ display:flex; }
.cal-day-modal{
  width:min(480px,100%); max-height:min(640px,86vh); overflow-y:auto;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 26px 22px; box-shadow:var(--shadow-deep);
  animation:calModalIn .28s cubic-bezier(.16,1,.3,1);
}
@keyframes calModalIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
.cal-day-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.cal-day-modal-head h3{ font-family:var(--font-serif); font-size:1.25rem; font-weight:600; color:var(--gold-bright); }
.cal-day-modal-close{ all:unset; cursor:pointer; font-size:1.3rem; line-height:1; color:var(--ink-muted); padding:4px 8px; border-radius:6px; }
.cal-day-modal-close:hover{ color:var(--gold-bright); background:var(--gold-faint); }
[data-cal-day-list] .cal-day-empty{ font-size:.88rem; color:var(--ink-muted); font-style:italic; margin:0 0 16px; }
.cal-day-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.cal-day-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--bg-panel); border:1px solid var(--border); border-left:3px solid var(--nb,var(--gold));
}
.cal-day-item-check{
  all:unset; cursor:pointer; flex-shrink:0; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--nb,var(--border)); transition:var(--transition);
}
.cal-day-item-check.is-done{ background:var(--nb,var(--gold)); }
.cal-day-item-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cal-day-item-title{ font-size:.88rem; color:var(--parchment); font-weight:600; overflow-wrap:break-word; }
.cal-day-item-check.is-done ~ .cal-day-item-body .cal-day-item-title{ text-decoration:line-through; color:var(--parchment-dim); }
.cal-day-item-meta{ font-size:.72rem; color:var(--ink-muted); }
.cal-day-item-del{ all:unset; cursor:pointer; flex-shrink:0; font-size:1.1rem; line-height:1; color:var(--ink-muted); padding:2px 6px; border-radius:6px; }
.cal-day-item-del:hover{ color:var(--bordo-bright); background:var(--bordo-faint); }
.cal-day-item-body{ cursor:pointer; }

/* ---- Modal de detalhe/edição de um único item (aberto pelo painel lateral) ---- */
.cal-item-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.cal-item-title-input{
  width:100%; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--parchment); font:inherit; font-size:1rem; font-weight:600; margin-bottom:14px;
}
.cal-item-title-input:focus{ outline:none; border-color:var(--gold-dim); }
.cal-item-fields{ display:flex; gap:10px; margin-bottom:14px; }
.cal-item-fields label{ flex:1 1 auto; display:flex; flex-direction:column; gap:5px; font-size:.7rem; color:var(--ink-muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.cal-item-fields input[type=text]{
  width:100%; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; color:var(--parchment); font:inherit; font-size:.85rem;
}
.cal-item-fields input[type=text]:focus{ outline:none; border-color:var(--gold-dim); }
.cal-item-notes{
  width:100%; min-height:110px; resize:vertical; background:var(--bg-panel); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 14px; color:var(--parchment-dim); font:inherit; font-size:.85rem;
  line-height:1.6; margin-bottom:16px; box-sizing:border-box;
}
.cal-item-notes:focus{ outline:none; border-color:var(--gold-dim); }
.cal-item-modal-foot{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.cal-item-state-label{ font-size:.8rem; color:var(--parchment-dim); font-weight:600; }
.cal-item-nb-label{ font-size:.72rem; color:var(--ink-muted); margin-left:auto; }
.cal-item-modal-actions{ display:flex; justify-content:flex-end; gap:10px; }
.cal-day-add{ display:flex; gap:8px; flex-wrap:wrap; }
.cal-day-add input[type=text]{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:11px 13px; color:var(--parchment); font:inherit; font-size:.88rem;
}
.cal-day-add input[data-cal-new-title]{ flex:1 1 200px; }
.cal-day-add input[data-cal-new-time]{ flex:0 1 90px; }
.cal-day-add input[type=text]:focus{ outline:none; border-color:var(--gold-dim); }
.cal-day-add .backup-btn{ flex-shrink:0; }

/* Seletor Tarefa/Compromisso no formulário de criação — mesmo padrão do
   .notebook-type-option (criar caderno), pra ficar familiar. */
.cal-new-kind-picker{ display:flex; gap:8px; margin-bottom:14px; }
.cal-kind-option{
  all:unset; cursor:pointer; padding:9px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  color:var(--parchment-dim); font-size:.78rem; font-weight:700; transition:var(--transition);
}
.cal-kind-option:hover{ border-color:var(--gold-dim); color:var(--gold-bright); }
.cal-kind-option.selected{ border-color:var(--gold-dim); background:var(--gold-faint); color:var(--gold-bright); }
/* Etiqueta pequena dentro de cada item da lista do dia. */
.cal-kind-tag{
  display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; margin-right:6px; vertical-align:middle;
}
.cal-kind-tag.cal-kind-compromisso{ background:var(--azul-dim); color:var(--azul); }
.cal-kind-tag.cal-kind-tarefa{ background:var(--sage-dim); color:var(--sage); }
/* Pontinho de cor por TIPO (não pelo caderno) — reaproveitado no painel
   lateral e na legenda; compromisso = azul, tarefa = verde (mesmas cores dos
   "chips" de texto na grade e das etiquetas da lista do dia). */
.cal-kind-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cal-kind-dot-compromisso{ background:var(--azul); }
.cal-kind-dot-tarefa{ background:var(--sage); border-radius:3px; }
.cal-legend{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cal-legend-row{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--parchment-dim); font-weight:600; }
.cal-legend-hint{ color:var(--ink-muted); font-weight:400; font-size:.72rem; }

/* ---- Layout com barra lateral (filtro Todos/Compromissos/Tarefas) ---- */
.calendar-layout{ display:flex; align-items:flex-start; gap:24px; margin-bottom:36px; }
.calendar-layout .calendar-card{ flex:1 1 auto; min-width:0; margin-bottom:0; }
.calendar-sidebar{
  flex:0 0 260px; position:sticky; top:24px;
  border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-card);
  padding:20px; box-shadow:var(--shadow-soft); max-height:calc(100vh - 48px); display:flex; flex-direction:column;
}
.cal-filter-tabs{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; flex-shrink:0; }
.cal-filter-tab{
  all:unset; cursor:pointer; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid transparent;
  color:var(--parchment-dim); font-size:.82rem; font-weight:700; transition:var(--transition);
}
.cal-filter-tab:hover{ background:var(--gold-faint); color:var(--gold-bright); }
.cal-filter-tab.active{ border-color:var(--gold-dim); background:var(--gold-faint); color:var(--gold-bright); }
.cal-sidebar-list{ display:flex; flex-direction:column; gap:6px; overflow-y:auto; flex:1 1 auto; }
[data-cal-sidebar-list] .cal-day-empty{ font-size:.82rem; color:var(--ink-muted); font-style:italic; margin:0; }
.cal-sidebar-item{
  all:unset; cursor:pointer; display:flex; align-items:flex-start; gap:9px; padding:9px 10px;
  border-radius:var(--radius-sm); border-left:3px solid var(--nb,var(--gold)); background:var(--bg-panel); transition:var(--transition);
}
.cal-sidebar-item:hover{ background:var(--bg-card-hover); }
.cal-sidebar-item.is-done{ opacity:.55; }
.cal-sidebar-item.is-done .cal-sidebar-item-title{ text-decoration:line-through; }
.cal-sidebar-item .cal-kind-dot{ margin-top:4px; }
.cal-sidebar-item-body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.cal-sidebar-item-title{ font-size:.82rem; color:var(--parchment); font-weight:600; overflow-wrap:break-word; }
.cal-sidebar-item-date{ font-size:.7rem; color:var(--ink-muted); }

@media (max-width:1100px){
  .calendar-layout{ flex-direction:column; }
  .calendar-sidebar{ flex:1 1 auto; width:100%; position:static; max-height:none; }
  .cal-filter-tabs{ flex-direction:row; }
  .cal-sidebar-list{ max-height:280px; }
}
@media (max-width:720px){
  .calendar-card{ padding:22px 18px; }
  .cal-cell{ min-height:52px; padding:6px; }
  .cal-cell-holiday{ display:none; }
  .cal-month-title{ font-size:1.2rem; min-width:0; }
  .calendar-sidebar{ padding:16px; }
  .cal-filter-tabs{ flex-wrap:wrap; }
}
@media (max-width:480px){
  .calendar-head{ gap:10px; }
  .cal-weekdays{ font-size:.6rem; }
  .cal-cell{ min-height:40px; padding:4px; border-radius:6px; }
  .cal-cell-num{ font-size:.78rem; }
  .cal-day-modal{ padding:20px 18px 16px; }
  .cal-new-kind-picker{ flex-wrap:wrap; }
}

/* ============================================================
   ADIÇÕES — Nascente Casa Editorial (não existiam no Refuge)
   O Refuge não tem tela de login do lado do cliente (autoriza só
   pelas regras do servidor) — o Casa Editorial usa o mesmo padrão do
   A.I. Experience (gate visível, mesmo UID travado), então essas
   poucas classes precisaram ser criadas aqui, usando os MESMOS tokens
   de cor/espaçamento/raio já definidos acima (--gold, --bg-card,
   --border, --depth-hover etc.) — nada de paleta nova.
   ============================================================ */
.gate-screen{
  max-width:440px; margin:64px auto; padding:40px 32px; text-align:center;
  background:var(--bg-card); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--depth-hover);
}
.gate-screen h2{ font-family:var(--font-serif); color:var(--parchment); font-size:1.4rem; margin:14px 0 10px; }
.gate-screen p{ color:var(--parchment-dim); font-size:.9rem; line-height:1.7; margin-bottom:22px; }
.gate-screen .icon-inline{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px; background:var(--gold-faint); color:var(--gold-bright);
}
.gate-screen .icon-inline svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; }
.gate-spinner svg{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ícone inline genérico dentro de qualquer elemento que não seja .menu-card
   (esse já tem sua própria regra, .menu-card .icon, mais acima) — trava o
   tamanho pra não herdar o tamanho intrínseco "gigante" default do SVG. */
.icon-inline{ display:inline-flex; width:1.1em; height:1.1em; }
.icon-inline svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; }

.user-chip{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; color:var(--parchment-dim); }
.user-chip img{ width:24px; height:24px; border-radius:50%; }
.btn-signout{
  background:none; border:1px solid var(--border); color:var(--parchment-dim);
  border-radius:999px; padding:5px 12px; font-size:.75rem; cursor:pointer; transition:var(--transition);
}
.btn-signout:hover{ border-color:var(--gold-dim); color:var(--gold-bright); }

/* ---- Compositor (Fase 4) — reaproveita .workspace/.workspace-main/
   .notes-dock (o layout de duas colunas já existe pronto no Refuge, ver
   sua definição mais acima) e o `textarea{}` global (fundo "papel"). Só o
   que é específico do compositor (campos do dock, barra de marcações,
   grade de divisões, barra de ações) entra aqui, mesmos tokens de sempre. */
.field-label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.03em; color:var(--ink-muted); text-transform:uppercase; margin:14px 0 6px; }
.field-label:first-child{ margin-top:0; }
.field-hint{ font-size:.74rem; color:var(--ink-muted); line-height:1.6; margin-bottom:10px; }
.field-input{
  width:100%; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; color:var(--parchment); font:inherit; font-size:.85rem; box-sizing:border-box;
}
.field-input:focus{ outline:none; border-color:var(--gold-dim); }
textarea.field-input{ resize:vertical; font-family:var(--font-sans); line-height:1.6; text-align:left; min-height:96px; box-shadow:none; background:var(--bg-panel); padding:10px 12px; }
.dock-section{ padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.dock-section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.dock-section h4{ font-family:var(--font-serif); font-size:.98rem; color:var(--parchment); font-weight:600; margin-bottom:2px; }

.divisoes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.divisoes-grid .backup-btn{ font-size:.68rem; padding:9px 6px; }

/* Barra de marcações do editor — flex-wrap, de propósito: o achado da
   auditoria forense do app de mesa (DOCUMENTACAO-TECNICA.md, seção 37) foi
   uma QHBoxLayout de linha única cuja largura MÍNIMA somada (13 botões)
   passava da própria janela e esmagava a coluna ao lado. Aqui não existe
   esse risco por construção: flex-wrap deixa os botões quebrarem linha
   livremente em vez de forçar uma largura mínima só crescente. */
.marking-toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.marking-toolbar .backup-btn{ flex:0 0 auto; padding:9px 14px; }
.marking-toolbar .toolbar-spacer{ flex:1 1 auto; }

.composer-editor{ min-height:420px; margin-bottom:14px; }

/* ---- Prévia (Fase 5) — PDF real num <iframe>, não aproximação HTML (mesma
   lição já registrada no histórico do app de mesa, DOCUMENTACAO-TECNICA.md
   seção 26: uma prévia aproximada engana mais do que ajuda). No navegador
   isso é mais simples que no desktop -- não precisa rasterizar via
   pdftoppm, o próprio navegador sabe renderizar um PDF de um blob URL. */
.composer-preview-bar{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.composer-preview{
  position:relative; height:520px; margin-bottom:14px; border:1px solid var(--paper-border);
  border-radius:var(--radius-md); overflow:hidden; background:var(--paper-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 16px 32px -20px rgba(0,0,0,.55);
}
.composer-preview-frame{ width:100%; height:100%; border:0; display:block; background:#fff; }
.composer-preview-frame.is-empty{ display:none; }
.composer-preview-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:24px; text-align:center; color:var(--paper-ink-soft); font-style:italic; font-size:.88rem;
}
.composer-preview-empty.is-hidden{ display:none; }

/* Tela cheia da prévia -- mesmo botão/comportamento do desktop
   (b_tela_cheia/_alternar_tela_cheia): cobre a viewport inteira, um botão
   ✕ fixo pra voltar, Esc também funciona (wiring em compositor.js). */
.composer-preview.is-fullscreen{
  position:fixed; inset:16px; height:auto; z-index:200;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.75);
}
.composer-preview-close{
  display:none; position:absolute; top:10px; right:10px; z-index:5;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--paper-border);
  background:rgba(255,255,255,.85); color:var(--paper-ink); font-size:16px; cursor:pointer;
  align-items:center; justify-content:center; transition:var(--transition);
}
.composer-preview-close:hover{ background:#fff; }
.composer-preview.is-fullscreen .composer-preview-close{ display:flex; }

.composer-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 18px;
}
.composer-status{ font-size:.78rem; color:var(--ink-muted); flex:1 1 160px; min-width:0; }
.composer-status.is-busy{ color:var(--gold); }
.composer-status.is-error{ color:#e08a72; }
.composer-status.is-ok{ color:var(--sage); }
.composer-versao-select{
  min-height:40px; background:var(--bg-panel); border:1px solid var(--border); border-radius:999px;
  padding:0 14px; color:var(--parchment-dim); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
}

/* ---- Modal de inserir imagem — reaproveita .image-picker-overlay/-modal
   (já existiam no Refuge para outro fim) só com um conteúdo novo (upload +
   controle deslizante de tamanho, em vez da grade de imagens já salvas). */
.image-percent-row{ display:flex; align-items:center; gap:12px; margin:18px 0; }
.image-percent-row input[type=range]{ flex:1; accent-color:var(--gold); }
.image-percent-value{ font-family:var(--font-serif); color:var(--gold-bright); font-weight:600; min-width:44px; text-align:right; }
.image-picker-modal .field-hint{ margin-bottom:0; }
.image-picker-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* ---- Chat com a IA (Fase 6) — reaproveita .image-picker-overlay/-modal de
   novo (mesmo modal genérico, conteúdo diferente). Balões coloridos por tipo
   de mensagem, mesmo espírito de _acrescentar()/CORES_MENSAGEM do desktop
   (usuário e IA deslocados para lados opostos, erro/sistema centralizados). */
.ia-chat-modal{ max-width:680px; width:92vw; display:flex; flex-direction:column; max-height:82vh; }
.ia-chat-transcript{
  flex:1; min-height:280px; max-height:46vh; overflow-y:auto; margin:14px 0;
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px; display:flex; flex-direction:column; gap:10px;
}
.ia-chat-bubble{ max-width:82%; padding:10px 14px; border-radius:var(--radius-sm); font-size:.86rem; line-height:1.6; white-space:pre-wrap; }
.ia-chat-bubble.is-user{ align-self:flex-end; background:var(--gold-faint); color:var(--parchment); }
.ia-chat-bubble.is-ia{ align-self:flex-start; background:var(--bg-card); border:1px solid var(--border); color:var(--parchment); }
.ia-chat-bubble.is-erro{ align-self:center; color:#e08a72; font-style:italic; font-size:.8rem; }
.ia-chat-status-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.ia-chat-input-row{ display:flex; gap:10px; align-items:flex-end; }
.ia-chat-input-row textarea{ flex:1; }

/* ---- Abas do compositor em telas estreitas (Fase 8) — pedido explícito
   do usuário ("responsividade para meu POCO X6"): telas estreitas usam
   ABAS (Dados/Texto/Prévia), não empilhamento vertical longo -- rolar por
   três painéis grandes empilhados (campos + editor + prévia) seria pior
   que trocar de aba com um toque. Em telas largas .composer-tabs fica
   escondida e as três colunas aparecem lado a lado como sempre --
   data-active-pane só tem efeito dentro do @media abaixo. */
.composer-tabs{ display:none; gap:8px; margin-bottom:16px; }
.composer-tab{
  all:unset; cursor:pointer; flex:1; text-align:center; font-size:.78rem; font-weight:700;
  letter-spacing:.02em; padding:11px 8px; border-radius:999px; border:1px solid var(--border);
  color:var(--parchment-dim); transition:var(--transition);
}
.composer-tab.is-active{ border-color:var(--gold-dim); background:var(--gold-faint); color:var(--gold-bright); }

@media (max-width:920px){
  .composer-tabs{ display:flex; }
  .workspace{ display:block; }
  .workspace-main{ display:block; }
  .notes-dock{ width:100%; position:static; max-height:none; }
  .composer-editor{ min-height:320px; }
  .composer-preview{ height:60vh; min-height:360px; }
  .composer-preview-bar{ flex-wrap:wrap; }
  .composer-preview-bar [data-previa-status]{ margin-left:0 !important; flex-basis:100%; }
  .composer-actions{ flex-wrap:wrap; }

  /* Cada painel só é visível quando data-active-pane bate com o seu
     data-pane -- os dois seletores continuam existindo o tempo todo no
     DOM (nada é recriado ao trocar de aba, então o texto digitado, o
     scroll da prévia etc. nunca se perdem trocando de aba e voltando). */
  [data-pane]{ display:none; }
  .workspace[data-active-pane="dados"] [data-pane="dados"],
  .workspace[data-active-pane="texto"] [data-pane="texto"],
  .workspace[data-active-pane="previa"] [data-pane="previa"]{ display:block; }
}

/* ---- Rodapé do site (site/Instagram) — mesmo par site/Instagram já usado
   na assinatura do PDF (nucleo/compositor.py, ASSINATURA_PADRAO: "site à
   esquerda / instagram à direita, cada um do seu lado"), agora no rodapé
   de cada página do site. .site-footer (só texto, centralizado) já
   existia no CSS copiado do Refuge mas nunca tinha sido usada aqui de
   verdade -- pedido do usuário: link real pro site e pro Instagram. */
.site-footer-links{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  max-width:1400px; margin:0 auto; padding:40px 32px 50px;
  font-size:.74rem; color:var(--ink-muted);
}
.site-footer-credit{ font-style:italic; text-align:center; flex:1 1 auto; }
.site-footer-link{
  display:inline-flex; align-items:center; gap:7px; color:var(--ink-muted);
  letter-spacing:.02em; white-space:nowrap; transition:var(--transition);
}
.site-footer-link:hover{ color:var(--gold-bright); }
.site-footer-link .icon-inline{ width:1em; height:1em; }
@media (max-width:640px){
  .site-footer-links{ flex-direction:column; text-align:center; padding:32px 20px 40px; }
}