/* Revisor de Livros: a base visual. Cores, letras, botões, janelas e menus vêm do Editor de Livros (v33),
   para os dois apps parecerem da mesma família. */
:root{
  --paper:#faf9f6; --panel:#f4f2ec; --panel2:#efece4; --card:#fff;
  --line:#e3e0d6; --line2:#d6d2c6;
  --ink:#2b2823; --ink2:#524d44; --muted:#8b8579; --faint:#b4ae9f; --dim:#9a9384;
  --accent:#9a5b18; --accent-ink:#7c4a12; --accent-bg:#f6eede; --accent-line:#e7d6b8;
  --add:#1f7a4d; --add-line:#8fd0ad; --add-bg:#e3f4ea; --del:#b23a2e; --del-line:#e6b0a8; --del-bg:#fbe7e4;
  --tint-rgb:214,210,198; --on-accent:#fff; --code-bg:rgba(214,210,198,.5);
  --radius:9px; --shadow:0 1px 2px rgba(40,34,24,.06),0 6px 20px rgba(40,34,24,.06);
  --sys:#2f5d8a; --sys-bg:#eaf1f8; --sys-line:#c4d6e8;
  --hl-amarelo:#fff0a3;--hl-azul:#d2e7ff;--hl-vermelho:#ffd3cd;--hl-verde:#d4f2d8;--hl-roxo:#e8dcfb;
  --top-h:54px;
}
body.dark{
  --paper:#1c1a16; --panel:#151310; --panel2:#242019; --card:#221f1a;
  --line:#332f27; --line2:#433d32;
  --ink:#ece7dc; --ink2:#c9c2b3; --muted:#948c7c; --faint:#6b6355; --dim:#a49c8c;
  --accent:#e0a55c; --accent-ink:#f0bd7d; --accent-bg:#2e2416; --accent-line:#4a3a22;
  --add:#5cc98f; --add-line:#2c5c42; --add-bg:rgba(92,201,143,.12); --del:#e3776a; --del-line:#6b332c; --del-bg:rgba(227,119,106,.12);
  --tint-rgb:255,255,255; --on-accent:#2b2823; --code-bg:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
  --sys:#8db8ee; --sys-bg:#18212c; --sys-line:#2c3d52;
  --hl-amarelo:rgba(255,214,0,.28);--hl-azul:rgba(80,160,255,.3);--hl-vermelho:rgba(255,90,80,.3);--hl-verde:rgba(70,200,110,.28);--hl-roxo:rgba(150,110,240,.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--panel);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased;transition:background-color .2s ease,color .2s ease}
body.dark ::selection{background:#4a3a22;color:#fff}
::selection{background:#f0e2c6}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:20px;border:3px solid var(--panel)}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}
*{scrollbar-color:var(--line2) transparent;scrollbar-width:thin}
button{font-family:inherit;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}
a{color:var(--accent-ink)}
.serif{font-family:Lora,Georgia,serif}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.hidden{display:none!important}
.hint{font-size:13.5px;color:var(--faint);line-height:1.55;padding:2px}

/* carregando (antes de saber quem está logado) */
.inicio{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--panel)}
.inicio i{width:34px;height:34px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--accent);animation:gira 0.9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---- estrutura ---- */
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
#vista{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
header#top{display:flex;align-items:center;gap:8px;height:var(--top-h);padding:0 12px;background:var(--paper);border-bottom:1px solid var(--line2);flex:none;position:relative;z-index:50}
header#top.hidden{display:none}
.divv{width:1px;height:22px;background:var(--line2);margin:0 4px;flex:none}

/* o seletor de app (Editor de Livros | Revisor de Livros) */
.appSel{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border:none;background:none;border-radius:10px;flex:none;min-width:0}
.appSel:hover{background:var(--panel2)}
.appIc{width:30px;height:30px;border-radius:7px;background:linear-gradient(150deg,var(--accent),#c07a2c);display:flex;align-items:center;justify-content:center;color:var(--on-accent);flex:none;box-shadow:var(--shadow)}
body.pal .appIc{background:linear-gradient(150deg,var(--accent),var(--accent-ink))}
.appIc svg{width:17px;height:17px}
.appNome{font-family:Lora,Georgia,serif;font-size:15.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.appSel>svg{width:14px;height:14px;color:var(--muted);flex:none}
/* o nome da tela no topo (ex.: Biblioteca): mesma letra e mesma linha do nome do app */
.topoNome{font-family:Lora,Georgia,serif;font-size:15.5px;font-weight:600;line-height:1.2;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* botões do topo */
.topbtns{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.tbtn{position:relative;display:flex;align-items:center;gap:6px;padding:7px 9px;border:none;background:none;border-radius:8px;color:var(--ink2);font-size:14px;white-space:nowrap}
.tbtn:hover{background:var(--panel2)}
.tbtn.on{background:var(--accent-bg);color:var(--accent-ink)}
.tbtn svg{width:17px;height:17px;flex:none}
.tbtn .lbl{display:none}
.tbtn.comLbl .lbl{display:inline}
.tbtn .badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--del);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}
/* a foto da conta: o realce do mouse também é um círculo, em volta dela */
.tbtn.conta{padding:3px;border-radius:50%}
.tbtn.conta .av{--av:28px}
#mobMais{display:none}

/* ---- botões ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:9px;border:1px solid transparent;font-size:14px;line-height:1.2;text-decoration:none}
.btn svg{width:16px;height:16px;flex:none}
.btn.fill{background:var(--accent);color:var(--on-accent)}
.btn.fill:hover{background:var(--accent-ink)}
.btn.fill:disabled{opacity:.55;cursor:default}
.btn.ghost{background:none;color:var(--ink2);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.leve{background:none;color:var(--muted)}
.btn.leve:hover{background:var(--panel2);color:var(--ink2)}
.btn.perigo{background:none;color:var(--del);border-color:var(--del-line)}
.btn.perigo:hover{background:var(--del-bg)}
.btn.carregando{pointer-events:none;opacity:.7}
.btn.carregando::after{content:"";width:13px;height:13px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .8s linear infinite}
.lnk{background:none;border:none;padding:0;color:var(--accent-ink);font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.btn.icone{padding:0;width:42px;flex:none}
/* autor: Enviar para revisão, com o ponto quando o editor tem mudanças que os revisores ainda não veem */
.tbtn.enviarRev{border:1px solid var(--line2);padding:6px 11px;margin-right:2px}
.tbtn.enviarRev.pendente{border-color:var(--accent);color:var(--accent-ink)}
.tbtn.enviarRev.pendente::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--paper)}

/* ---- campos ---- */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>label,.rot{font-size:12.5px;font-weight:500;color:var(--ink2)}
.campo small,.dica{font-size:12px;color:var(--faint);line-height:1.45}
.ent{width:100%;height:40px;padding:8px 11px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink);font-size:14.5px;outline:none;transition:border-color .15s,box-shadow .15s}
textarea.ent{height:auto;min-height:74px;resize:vertical;line-height:1.5}
.ent:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.ent:disabled,.ent[readonly]{background:var(--panel2);color:var(--muted)}
/* o preenchimento automático do navegador não pinta o campo de claro (no modo escuro destoava) */
.ent:-webkit-autofill,.ent:-webkit-autofill:hover{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--card) inset;caret-color:var(--ink);transition:background-color 99999s ease-out}
.ent:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--card) inset,0 0 0 3px var(--accent-bg)}
.ent.erro{border-color:var(--del)}
.entGrupo{position:relative;display:flex;gap:6px}
.entGrupo .ent{flex:1}
.entGrupo .entBtn{flex:none;display:flex;align-items:center;gap:6px;padding:0 11px;height:40px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink2);font-size:13px}
.entGrupo .entBtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.entGrupo .entBtn svg{width:16px;height:16px}
.msgErro{font-size:13px;color:var(--del);line-height:1.45}
.msgErro:empty{display:none}

/* ---- janelas (como as da Livraria do editor) ---- */
.dlgOv{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,16,10,0);transition:background-color .2s}
.dlgOv.on{background:rgba(20,16,10,.48)}
.dlg{position:relative;width:min(94vw,440px);max-height:calc(100dvh - 32px);overflow:auto;display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--paper);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s ease-out,transform .28s cubic-bezier(.22,1,.36,1)}
.dlgOv.on .dlg{opacity:1;transform:none}
.dlg.largo{width:min(96vw,640px)}
.dlg h3{margin:0;font-family:Lora,Georgia,serif;font-size:19px;font-weight:600;color:var(--ink);padding-right:30px}
.dlg .sub{margin:-8px 0 0;font-size:13.5px;color:var(--muted)}
.dlg p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2)}
.dlg .btns{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:2px}
.dlgX{position:absolute;top:14px;right:14px;display:flex;padding:5px;border:none;background:none;border-radius:7px;color:var(--muted)}
.dlgX:hover{background:var(--panel2);color:var(--ink)}
.dlgX svg{width:18px;height:18px}

/* ---- menus suspensos ---- */
.menuSusp{position:fixed;z-index:96;min-width:230px;max-width:calc(100vw - 16px);padding:4px;background:var(--card);border:1px solid var(--line2);border-radius:11px;box-shadow:var(--shadow);opacity:0;transform:translateY(-4px);transition:opacity .14s ease-out,transform .18s cubic-bezier(.22,1,.36,1)}
.menuSusp.on{opacity:1;transform:none}
.menuSusp .mT{padding:7px 10px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.menuSusp .mSep{height:1px;background:var(--line);margin:4px 6px}
.menuOp{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;border-radius:7px;background:none;text-align:left;color:var(--ink2);font-size:13.5px;text-decoration:none}
.menuOp:hover,.menuOp:focus-visible{background:var(--accent-bg);color:var(--accent-ink);outline:none}
.menuOp svg{width:16px;height:16px;flex:none;color:var(--muted)}
.menuOp:hover svg{color:var(--accent-ink)}
.menuOp .n{flex:1;min-width:0}
.menuOp .d{display:block;font-size:12px;color:var(--faint);margin-top:1px}
.menuOp.atual{background:var(--panel2)}
.menuOp.atual .ok{color:var(--accent)}
.menuOp.perigo:hover{background:var(--del-bg);color:var(--del)}
.menuOp.perigo:hover svg{color:var(--del)}
.menuApp .appIc{width:34px;height:34px}
.menuApp .appIc svg,.menuApp .menuOp:hover .appIc svg{width:18px;height:18px;color:var(--on-accent)}
.menuOp .ok{margin-left:auto;display:flex}
.menuOp .ok svg,.menuOp:hover .ok svg{color:var(--accent)}
.menuApp .menuOp{padding:9px 10px}
.menuApp .menuOp .n{font-weight:600;color:var(--ink)}
.menuApp .menuOp .d{font-weight:400}
.menuConta .quem{display:flex;align-items:center;gap:10px;padding:10px 10px 8px}
.menuConta .quem .av{--av:38px}
.menuConta .quem b{display:block;font-size:14px;color:var(--ink)}
.menuConta .quem span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}

/* ---- avatar (foto, um dos 10 desenhos ou as iniciais) ---- */
.av{--av:32px;width:var(--av);height:var(--av);border-radius:50%;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);color:#fff;font-size:calc(var(--av) * .4);font-weight:600;letter-spacing:.02em;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.av img,.av svg{width:100%;height:100%;object-fit:cover;display:block}
.rostos{display:flex;align-items:center}
.rostos .av{--av:24px;box-shadow:0 0 0 2px var(--paper)}
.rostos .av+.av{margin-left:-7px}

/* chip de papel */
.papel{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.02em;background:var(--panel2);color:var(--ink2);white-space:nowrap}
.papel.editor{background:var(--accent);color:var(--on-accent)}
.papel.admin{background:var(--sys-bg);color:var(--sys);box-shadow:inset 0 0 0 1px var(--sys-line)}
.papel.revisor{background:var(--accent-bg);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
.papel.revogado{background:none;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line2)}

/* barra de progresso */
.barra{height:5px;border-radius:5px;background:var(--panel2);overflow:hidden}
.barra i{display:block;height:100%;border-radius:5px;background:var(--accent);transition:width .5s cubic-bezier(.22,1,.36,1)}

/* caixas de marcar no estilo do app (a do navegador ficava branca no modo escuro) */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:17px;height:17px;margin:0;flex:none;display:inline-grid;place-content:center;border:1.5px solid var(--line2);border-radius:5px;background:var(--card);cursor:pointer;transition:background-color .15s,border-color .15s}
input[type=checkbox]:hover{border-color:var(--accent)}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border:2px solid var(--on-accent);border-top:none;border-right:none;transform:translate(0,-1px) rotate(-45deg)}
input[type=checkbox]:indeterminate{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:indeterminate::after{content:"";width:8px;height:2px;border-radius:1px;background:var(--on-accent)}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=checkbox]:disabled{opacity:.45;cursor:default}

/* aviso rápido */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#2b2823;color:#fff;padding:10px 16px;border-radius:9px;font-size:13.5px;box-shadow:var(--shadow);z-index:120;opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{opacity:1}

/* listas de escolha (select) no estilo do app, como no editor */
@supports (appearance: base-select){
  select,::picker(select){appearance:base-select}
  select{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
  select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
  ::picker(select){border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);padding:4px;margin-block:4px;max-height:320px}
  select option{padding:7px 10px;border-radius:6px;font-size:13.5px;color:var(--ink2)}
  select option:hover,select option:focus-visible{background:var(--accent-bg);color:var(--accent-ink);outline:none}
  select option:checked{color:var(--accent-ink);font-weight:600}
  select optgroup{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding-top:6px}
  select optgroup option{text-transform:none;letter-spacing:normal;font-size:13.5px;color:var(--ink2)}
}