/* Flow — árvore de listas aninhadas. Azul-marinho + dourado (mesma paleta do Notas). */

:root{
  --navy:#12294b;
  --navy-deep:#0b1c36;
  --navy-soft:#1d3a63;
  --gold:#c8a24a;
  --gold-soft:#e3cd93;
  --gold-pale:#f5ecd7;

  --bg:#f6f4ef;
  --surface:#fffdf9;
  --surface-2:#efeade0;
  --ink:#1c2636;
  --ink-dim:#5a6779;
  --line:#e6e1d4;
  --accent:var(--navy);
  --accent-ink:#ffffff;
  --focus-bg:var(--gold-pale);
  --danger:#b3372e;
  --prazo:#b3372e;
  --prazo-bg:#fbe7e5;
  --tarefa:#2a5ea8;
  --tarefa-bg:#e4edf9;
  --cobranca:#8a6a1d;
  --cobranca-bg:#fdf1dc;
  --ideia:#5b3f8a;
  --ideia-bg:#f1eaf9;
  --ok:#2e7d4f;
  --ok-bg:#e3f1e8;
  --shadow: 0 1px 2px rgba(18,41,75,.08), 0 8px 24px rgba(18,41,75,.10);
  --serif: Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14.5px;
  line-height:1.45;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}

#app.app{
  display:flex;
  height:100vh;
  width:100%;
}
/* A barra fica sempre na borda mais CURTA da tela: à esquerda em paisagem
   (onde a altura é a dimensão menor), em cima em retrato (onde a largura é
   a menor) — nunca consome a dimensão mais generosa da tela. */
@media (orientation:landscape){ #app.app{ flex-direction:row; } }
@media (orientation:portrait){ #app.app{ flex-direction:column; } }

/* ---------------- autenticação ---------------- */
.auth-wrap{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%);
  padding:20px;
}
.auth-card{
  width:100%; max-width:380px; background:var(--surface);
  border-radius:16px; padding:28px 26px; box-shadow:0 10px 40px rgba(0,0,0,.35);
  border-top:4px solid var(--gold);
}
.auth-brand{
  font-family:var(--serif); font-size:26px; color:var(--navy);
  text-align:center; margin-bottom:16px; font-weight:700;
}
.auth-brand .tm{ color:var(--gold); }
.auth-card h1{ font-size:16px; color:var(--navy); margin:0 0 14px; text-align:center; font-weight:600; }
.auth-card input[type=password]{
  width:100%; border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; font-size:15px; margin-bottom:12px; font:inherit;
}
.auth-card input:focus{ outline:2px solid var(--gold); }
.auth-err{
  background:var(--prazo-bg); color:var(--danger); border-radius:8px;
  padding:9px 12px; margin:0 0 12px; font-size:12.5px;
}
.auth-hint{ color:var(--ink-dim); font-size:12px; margin:0 0 14px; text-align:center; }
.btn-gold{
  width:100%; background:var(--gold); color:var(--navy-deep); border:none;
  border-radius:9px; padding:11px; font-size:14.5px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.btn-gold:hover{ background:var(--gold-soft); }

/* ---------------- barra (lateral em paisagem, superior em retrato) ----------------
   Fica sempre na borda mais curta — nunca consome a dimensão mais generosa
   da tela (altura no laptop, largura no celular). Mesmo HTML nas duas
   orientações; só o CSS decide a direção via @media (orientation). */
.sidebar{
  display:flex; align-items:center; background:var(--navy); box-shadow:var(--shadow); z-index:70;
}
.sidebar-title{
  font-family:var(--serif); font-weight:700; color:#fff; letter-spacing:.5px;
}
.sidebar-title .tm{ color:var(--gold); }
.sidebar-actions{ display:flex; gap:10px; }
.sidebar-btn{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--gold); flex-shrink:0;
  background:transparent; color:var(--gold-soft); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.sidebar-btn:hover{ background:var(--navy-soft); }
.sidebar-btn.active{ background:var(--gold); color:var(--navy-deep); }
#helpFab.sidebar-btn{ font-family:var(--serif); font-weight:700; }

@media (orientation:landscape){
  .sidebar{
    flex:0 0 52px; width:52px; flex-direction:column; justify-content:space-between;
    gap:22px; padding:16px 0; overflow-y:auto; overflow-x:hidden;
  }
  .sidebar-title{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:17px; }
  .sidebar-actions{ flex-direction:column; }
}
@media (orientation:portrait){
  .sidebar{
    flex:0 0 52px; height:52px; width:100%; flex-direction:row; justify-content:space-between;
    gap:12px; padding:0 16px; overflow-x:auto; overflow-y:hidden;
  }
  .sidebar-title{ writing-mode:horizontal-tb; transform:none; font-size:19px; }
  .sidebar-actions{ flex-direction:row; }
}

/* ---------------- body split ---------------- */
.body{ flex:1; display:flex; min-height:0; }
.viewer-pane{
  position:relative;
  flex:0 0 0; overflow:hidden; border-right:1px solid var(--line);
  background:var(--surface-2);
  display:flex; flex-direction:column;
}
.body.split .viewer-pane{ flex-basis:50%; }
.viewer-close{
  display:none;
  position:absolute; top:10px; right:10px; z-index:10;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-dim);
  border-radius:6px; padding:4px 10px; font-size:11px; cursor:pointer; box-shadow:var(--shadow);
}
.body.split .viewer-close{ display:inline-block; }
.viewer-body{ flex:1; overflow:auto; display:flex; align-items:stretch; justify-content:center; position:relative; }
.viewer-body .photo{ align-self:center; max-width:calc(100% - 36px); max-height:calc(100% - 36px); width:auto; height:auto; object-fit:contain; border-radius:6px; box-shadow:var(--shadow); margin:auto; }
.viewer-body .pdf-frame{ width:100%; height:100%; border:0; background:#fff; display:block; }
.file-card{
  background:var(--surface); box-shadow:var(--shadow); border-radius:10px;
  border-top:4px solid var(--gold); padding:32px 28px; text-align:center; margin:auto;
  align-self:center;
}
.file-card .file-ico{ font-size:40px; margin-bottom:10px; }
.file-card .file-name{ font-weight:600; color:var(--navy); margin-bottom:16px; overflow-wrap:anywhere; }
.file-card a.btn-gold{ display:inline-block; width:auto; padding:9px 20px; text-decoration:none; }

/* ---------------- painel de texto do anexo (tecla x) ---------------- */
.text-panel{
  flex:1; display:flex; flex-direction:column; min-height:0;
  padding:44px 16px 16px; gap:10px; box-sizing:border-box;
}
.text-panel-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  color:var(--navy); flex-wrap:wrap;
}
.text-panel-head strong{ overflow-wrap:anywhere; }
.text-panel-origin{ font-size:11.5px; color:var(--ink-dim); white-space:nowrap; }
.text-panel-draft{
  flex:1; width:100%; resize:none; font:inherit; font-size:13.5px; line-height:1.5;
  border:1px solid var(--line); border-radius:8px; padding:12px; box-sizing:border-box;
  background:var(--surface); color:var(--ink);
}
.text-panel-draft:focus{ outline:2px solid var(--gold); }
.text-panel-draft:disabled{ opacity:.6; }
.text-panel-note{ font-size:12px; color:var(--danger); }
.text-panel-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.text-panel-actions .btn-gold, .text-panel-actions .btn-ghost{
  width:auto; padding:8px 14px; font-size:13px; border-radius:8px; cursor:pointer; font-family:inherit;
}
.btn-ghost{
  background:var(--surface); color:var(--ink-dim); border:1px solid var(--line);
}
.btn-ghost:hover{ background:var(--surface-2); }

/* ---------------- lista / árvore ---------------- */
.list-pane{ flex:1; min-width:0; overflow-y:auto; padding:14px 16px 90px; position:relative; }
.list-pane.drop-file-hint{ outline:2px dashed var(--gold); outline-offset:-6px; background:var(--gold-pale); }
ul.tree, ul.tree ul{ list-style:none; margin:0; padding:0; }
.row-text.bold-item{ font-family:var(--serif); font-weight:700; color:var(--navy); font-size:15px; }
.row-text.done-item{ text-decoration:line-through; color:var(--ink-dim); }
ul.tree ul{ margin-left:20px; padding-left:14px; border-left:1px solid var(--line); }
li.node{ position:relative; }
.row{
  display:flex; align-items:flex-start; gap:6px; padding:6px 8px;
  border-radius:8px; cursor:default; user-select:none; position:relative;
}
.row.mark-prazo{ background:var(--prazo-bg); }
.row.mark-tarefa{ background:var(--tarefa-bg); }
.row.mark-cobranca{ background:var(--cobranca-bg); }
.row.mark-ideia{ background:var(--ideia-bg); }
.row:hover{ background:var(--surface-2); }
.row.focused{ background:var(--focus-bg); outline:1px solid var(--gold); }
/* Marcador único (caret, ícone de tipo ou bullet) — sempre no mesmo lugar e
   tamanho, qualquer que seja o que o item mostra ali. */
.marker{
  width:20px; height:22px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:15px; transition:transform .12s ease;
}
.marker.caret{ color:var(--ink-dim); cursor:pointer; }
.marker.caret.collapsed{ transform:rotate(-90deg); }
.marker.mark-icon.bullet-icon{ color:var(--ink-dim); font-size:20px; }
.marker.tag-hit{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }
.row-main{ flex:1; min-width:0; padding-top:1px; }
.row-text{ overflow-wrap:anywhere; }
.row-text a{ color:var(--tarefa); text-decoration:underline; text-underline-offset:2px; }
.row-text a:hover{ color:var(--navy); }
.draft{
  display:block; width:100%; font:inherit; color:inherit; background:var(--surface);
  border:1px solid var(--accent); border-radius:6px; padding:5px 7px; resize:none; box-sizing:border-box;
}
.badges{ display:inline-flex; gap:4px; margin-left:7px; vertical-align:middle; }
.chip{
  display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:650;
  padding:1.5px 6px 2px; border-radius:999px; letter-spacing:.2px; white-space:nowrap;
}
.chip.prazo{ background:var(--prazo-bg); color:var(--prazo); }
.chip.tarefa{ background:var(--tarefa-bg); color:var(--tarefa); }
.chip.cobranca{ background:var(--cobranca-bg); color:var(--cobranca); }
.chip.ideia{ background:var(--ideia-bg); color:var(--ideia); }
.chip.prazo_ok, .chip.tarefa_ok, .chip.cobranca_ok{ background:var(--ok-bg); color:var(--ok); text-decoration:line-through; }
.chip.tag-hit{ outline:2px solid var(--gold); outline-offset:1px; }
/* Todo o texto do item marcado ganha a mesma cor da marca — mais visível que
   só o ícone/chip no fim da linha. Vem depois de bold-item/done-item para
   ganhar a cascata mesmo quando essas classes também estão presentes. */
.row-text.mark-prazo, .row-text.mark-prazo *{ color:var(--prazo); }
.row-text.mark-tarefa, .row-text.mark-tarefa *{ color:var(--tarefa); }
.row-text.mark-cobranca, .row-text.mark-cobranca *{ color:var(--cobranca); }
.row-text.mark-ideia, .row-text.mark-ideia *{ color:var(--ideia); }
/* Concluído (prazo_ok/tarefa_ok/cobranca_ok): já foi resolvido, não deve se
   destacar — mantém a cor discreta de done-item (não sobrepõe com --ok). */
.row-text mark{
  background:var(--gold-pale); color:var(--navy); padding:0 2px; border-radius:2px;
  box-shadow:0 0 0 1px var(--gold-soft) inset;
}
.copy-snippet{
  display:inline-flex; align-items:center; gap:3px; font-family:"Courier New", monospace; font-size:12.5px;
  background:var(--gold-pale); border:1px solid var(--gold-soft); color:var(--navy);
  padding:0 3px 0 5px; border-radius:5px;
}
.copy-snippet-btn{
  border:none; background:transparent; cursor:pointer; font-size:11px; line-height:1;
  padding:2px 2px; border-radius:4px; color:inherit; font-family:inherit;
}
.copy-snippet-btn:hover{ background:var(--gold-soft); }
.attach-chip{
  display:inline-flex; align-items:center; gap:4px; margin-left:7px; font-size:11px;
  color:var(--ink-dim); background:var(--surface-2); border:1px solid var(--line);
  padding:1.5px 7px 2px; border-radius:999px; cursor:pointer;
}
.attach-chip .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.attach-name.no-text{ color:var(--danger); }
.petition-chip{ background:var(--gold-pale); border-color:var(--gold); color:var(--navy); }
.petition-chip .dot{ background:var(--gold); }
.rename-input{
  font:inherit; font-size:11px; margin-left:7px; padding:1.5px 8px 2px;
  border:1px solid var(--gold); border-radius:999px; background:var(--surface);
  color:var(--ink); width:220px; max-width:60vw; box-sizing:border-box;
}
.rename-input:focus{ outline:2px solid var(--gold); }

/* ---------------- toast ---------------- */
.toast{
  position:fixed; left:50%; bottom:26px;
  background:var(--navy-deep); color:var(--gold-soft); padding:9px 16px; border-radius:8px;
  font-size:12.5px; box-shadow:var(--shadow); z-index:80;
  transform:translate(-50%, 16px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
.toast.show{
  transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .2s ease, opacity .2s ease;
}
.toast.err{ background:var(--danger); color:#fff; }

/* ---------------- confirmação de exclusão ---------------- */
.confirm-overlay{
  position:fixed; inset:0; background:rgba(20,26,38,.45); z-index:120;
  display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box;
}
.confirm-box{
  background:var(--surface); border-radius:10px; box-shadow:var(--shadow);
  padding:22px 24px; max-width:360px; width:100%;
}
.confirm-box p{ margin:0 0 18px; font-size:14px; color:var(--ink); line-height:1.45; }
.confirm-actions{ display:flex; justify-content:flex-end; gap:10px; }
.confirm-actions button{
  padding:8px 16px; font-size:13px; border-radius:8px; cursor:pointer; font-family:inherit; border:none;
}
.confirm-actions .btn-ghost{ border:1px solid var(--line); }
.confirm-actions .btn-ghost:focus{ outline:2px solid var(--gold); }
.confirm-actions .btn-gold{ width:auto; padding:8px 16px; font-size:13px; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:#962c24; }

.password-box{ text-align:left; max-width:320px; }
.password-box h2{ font-size:15px; color:var(--navy); margin:0 0 14px; }
.password-box label{ display:block; font-size:12px; color:var(--ink-dim); margin-bottom:12px; }
.password-box input[type=password]{
  display:block; width:100%; font:inherit; font-size:14px; margin-top:4px;
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; box-sizing:border-box;
}
.password-box input:focus{ outline:2px solid var(--gold); border-color:var(--gold); }
.password-box .auth-err{ margin-bottom:14px; }

/* ---------------- botões flutuantes ---------------- */
.fab{
  position:fixed; right:20px; z-index:60; width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:var(--gold-soft); border:2px solid var(--gold);
  font-size:17px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); cursor:pointer;
}
.fab:hover{ background:var(--navy-soft); }
.fab.active{ background:var(--gold); color:var(--navy-deep); }

/* Botões flutuantes exclusivos do celular — no laptop o teclado já cobre
   editar (e), marcar (p/t/c/i/f) etc.; mostrar essa pilha ali seria redundante. */
.mobile-fab{ display:none; }

/* A pilha começa no canto inferior direito (excluir) e cresce para cima —
   antes começava mais alto porque dividia a coluna com anexar/buscar/ajuda,
   que se mudaram para a barra lateral; sem eles, volta a ocupar o canto. */
.delete-fab{ bottom:20px; background:var(--danger); color:#fff; border-color:var(--danger); }
.delete-fab:hover{ background:#962c24; }
.edit-fab{ bottom:74px; }
.marks-toggle-fab{ bottom:128px; }
.arrows-toggle-fab{ bottom:182px; font-size:20px; }
.marks-toggle-fab.active, .arrows-toggle-fab.active{ background:var(--gold); color:var(--navy-deep); }

/* Confirmar/cancelar reaproveitam os lugares de excluir/editar — nunca
   aparecem ao mesmo tempo (edição x seleção sem editar), então não competem
   por espaço com o resto da pilha. */
.confirm-edit-fab{ bottom:20px; background:var(--tarefa); color:#fff; border-color:var(--tarefa); }
.confirm-edit-fab:hover{ background:#1f7a63; }
.cancel-edit-fab{ bottom:74px; background:var(--surface); color:var(--danger); border-color:var(--danger); }
.cancel-edit-fab:hover{ background:var(--surface-2); }

/* Marcar e mover são mutuamente exclusivos (abrir um fecha o outro), então
   os dois painéis dividem o mesmo lugar acima da pilha de botões fixos. */
.marks-menu{
  position:fixed; right:20px; bottom:236px; z-index:59;
  flex-direction:column; gap:8px; /* display vem de .mobile-fab — nunca mostrar no laptop */
  transform:translateY(8px) scale(.98); opacity:0; pointer-events:none;
  transition:transform .14s ease, opacity .14s ease;
}
.marks-menu.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.mark-btn{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  background:var(--surface); color:var(--ink-dim); border:2px solid var(--line);
  box-shadow:var(--shadow); cursor:pointer;
}
.mark-btn.prazo{ border-color:var(--prazo); color:var(--prazo); }
.mark-btn.tarefa{ border-color:var(--tarefa); color:var(--tarefa); }
.mark-btn.cobranca{ border-color:var(--cobranca); color:var(--cobranca); }
.mark-btn.ideia{ border-color:var(--ideia); color:var(--ideia); }
.mark-btn.done{ border-color:var(--ok); color:var(--ok); }
.mark-btn.prazo.on{ background:var(--prazo); color:#fff; }
.mark-btn.tarefa.on{ background:var(--tarefa); color:#fff; }
.mark-btn.cobranca.on{ background:var(--cobranca); color:#fff; }
.mark-btn.ideia.on{ background:var(--ideia); color:#fff; }
.mark-btn.done.on{ background:var(--ok); color:#fff; }

/* Setas em formato de D-pad (cruz): topo = subir, meio = desaninhar/aninhar,
   baixo = descer — casa com as teclas ctrl+seta do laptop. */
.arrows-menu{
  position:fixed; right:20px; bottom:236px; z-index:59;
  grid-template-columns:repeat(3, 44px); grid-template-rows:repeat(2, 44px);
  grid-template-areas: ".    up    ." "left down right";
  gap:6px; /* display:grid vem do seletor mais específico abaixo — nunca mostrar no laptop */
  transform:translateY(8px) scale(.98); opacity:0; pointer-events:none;
  transition:transform .14s ease, opacity .14s ease;
}
.arrows-menu.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.arrow-btn{
  display:flex; align-items:center; justify-content:center; font-size:18px;
  border-radius:10px; background:var(--surface); color:var(--ink-dim); border:2px solid var(--line);
  box-shadow:var(--shadow); cursor:pointer;
}
.arrow-btn.up{ grid-area:up; }
.arrow-btn.down{ grid-area:down; }
.arrow-btn.left{ grid-area:left; }
.arrow-btn.right{ grid-area:right; }
.arrow-btn:active{ background:var(--gold-pale); border-color:var(--gold); }

.help-panel{
  position:fixed; z-index:69;
  border-radius:12px; box-shadow:var(--shadow); padding:14px 18px;
  opacity:0; pointer-events:none;
  transition:transform .14s ease, opacity .14s ease;
  background:var(--navy); border:1px solid var(--gold);
}
.help-panel.open{ opacity:1; pointer-events:auto; }

/* Paisagem: painel pende à direita da barra lateral, perto do botão de ajuda. */
@media (orientation:landscape){
  .help-panel{
    left:62px; top:164px; max-width:min(560px, calc(100vw - 78px));
    max-height:calc(100vh - 180px); overflow-y:auto;
    transform:translateX(-8px) scale(.98);
  }
  .help-panel.open{ transform:translateX(0) scale(1); }
}
/* Retrato: painel desce da barra superior. */
@media (orientation:portrait){
  .help-panel{
    right:16px; top:62px; max-width:min(560px, calc(100vw - 32px));
    max-height:calc(100vh - 78px); overflow-y:auto;
    transform:translateY(-8px) scale(.98);
  }
  .help-panel.open{ transform:translateY(0) scale(1); }
}

/* Busca: sempre na margem inferior da tela, independente da orientação —
   não compete de posição com o painel de ajuda nem com os botões flutuantes
   do celular (que ficam do lado direito). */
.search-panel{
  position:fixed; bottom:20px; z-index:69;
  width:min(360px, calc(100vw - 32px));
  border-radius:12px; box-shadow:var(--shadow); padding:14px 18px;
  background:var(--surface); border:1px solid var(--gold);
  opacity:0; pointer-events:none;
  transition:transform .14s ease, opacity .14s ease;
}
.search-panel.open{ opacity:1; pointer-events:auto; }

/* Paisagem: abaixo e à esquerda, alinhado com a barra lateral. */
@media (orientation:landscape){
  .search-panel{ left:62px; transform:translateY(8px) scale(.98); }
  .search-panel.open{ transform:translateY(0) scale(1); }
}
/* Retrato: abaixo e centralizado. */
@media (orientation:portrait){
  .search-panel{ left:50%; transform:translateX(-50%) translateY(8px) scale(.98); }
  .search-panel.open{ transform:translateX(-50%) translateY(0) scale(1); }
}

.search-panel input{
  width:100%; font:inherit; font-size:13.5px; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:var(--ink); box-sizing:border-box;
}
.search-panel input:focus{ outline:2px solid var(--gold); border-color:var(--gold); }
.tag-filters{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag-btn{
  font-size:11.5px; font-weight:650; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-dim);
  cursor:pointer; letter-spacing:.2px;
}
.tag-btn.prazo.on{ background:var(--prazo-bg); color:var(--prazo); border-color:var(--prazo); }
.tag-btn.tarefa.on{ background:var(--tarefa-bg); color:var(--tarefa); border-color:var(--tarefa); }
.tag-btn.cobranca.on{ background:var(--cobranca-bg); color:var(--cobranca); border-color:var(--cobranca); }
.tag-btn.ideia.on{ background:var(--ideia-bg); color:var(--ideia); border-color:var(--ideia); }
.search-status{ margin-top:10px; font-size:11.5px; color:var(--ink-dim); }

.helpbar{ display:flex; flex-wrap:wrap; gap:12px 16px; font-size:11.5px; color:#b9c3d4; }
.helpbar kbd{
  font-family:inherit; background:rgba(255,255,255,.08); border:1px solid rgba(227,205,147,.35);
  border-radius:4px; padding:1px 5px; font-size:10.5px; color:var(--gold-soft); margin-right:4px;
}
.helpbar .grp{ display:flex; align-items:center; }
.help-footer{
  margin-top:12px; padding-top:10px; border-top:1px solid rgba(227,205,147,.25);
  display:flex; align-items:center; gap:10px;
}
.footer-sep{ color:rgba(227,205,147,.4); font-size:11px; }
.link-btn{
  background:none; border:none; color:var(--gold-soft); font-size:12px;
  cursor:pointer; padding:0; font-family:inherit; text-decoration:underline;
}

.mobile-hint{ display:none; font-size:12px; color:#b9c3d4; line-height:1.6; }
.mcp-info{
  margin-top:10px; font-size:12px; color:#b9c3d4;
}
.mcp-info code{
  color:var(--gold); font-family:inherit; user-select:all;
}

@media (max-width:720px), (pointer:coarse){
  body{ font-size:15.5px; }
  .helpbar{ display:none; }
  .mobile-hint{ display:block; }
  .body.split{ flex-direction:column; }
  .body.split .viewer-pane{ flex-basis:46%; border-right:none; border-bottom:1px solid var(--line); }
  /* Indentação mínima: só a borda esquerda + um respiro pequeno — no celular
     a largura é curta demais para o recuo generoso do laptop. */
  ul.tree ul{ margin-left:2px; padding-left:7px; }
  .row{ padding:9px 8px; }

  .mobile-fab{ display:flex; }
  /* .arrows-menu quer grid (D-pad), não flex — seletor de 2 classes vence o
     genérico acima por especificidade, sem depender da ordem no arquivo. */
  .arrows-menu.mobile-fab{ display:grid; }
}

::selection{ background:color-mix(in srgb, var(--accent) 35%, transparent); }