/* Estante: cabeçalho simples, filtros à esquerda + lista à direita (empilha no celular), leitura em coluna estreita de serifa. */
:root{
  --bg:#f7f5f6; --surface:#ffffff; --line:#ddd6db; --ink:#241c22; --ink2:#665963;
  --accent:#8a1c3c; --accent-ink:#ffffff; --accent-soft:#f4e1e8; --chip:#efeaed;
  --g:#2b6a4c; --g-bg:#dcefe4; --t:#7a5b00; --t-bg:#f6ebc8; --m:#99470f; --m-bg:#fadfc8; --e:#a3202f; --e-bg:#f8d9dd;
  --font-ui:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-read:'Literata',Georgia,'Times New Roman',serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16111a; --surface:#201a25; --line:#3a2f40; --ink:#f1e9ef; --ink2:#ab9ca8;
  --accent:#e58aa6; --accent-ink:#2a0f19; --accent-soft:#3a2230; --chip:#2b2330;
  --g:#86d3ab; --g-bg:#1e3a2d; --t:#e8c766; --t-bg:#3b3215; --m:#f0a671; --m-bg:#41281a; --e:#f19aa4; --e-bg:#47202a; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#16111a; --surface:#201a25; --line:#3a2f40; --ink:#f1e9ef; --ink2:#ab9ca8;
  --accent:#e58aa6; --accent-ink:#2a0f19; --accent-soft:#3a2230; --chip:#2b2330;
  --g:#86d3ab; --g-bg:#1e3a2d; --t:#e8c766; --t-bg:#3b3215; --m:#f0a671; --m-bg:#41281a; --e:#f19aa4; --e-bg:#47202a; color-scheme:dark;}
:root[data-theme="light"]{
  --bg:#f7f5f6; --surface:#ffffff; --line:#ddd6db; --ink:#241c22; --ink2:#665963;
  --accent:#8a1c3c; --accent-ink:#ffffff; --accent-soft:#f4e1e8; --chip:#efeaed;
  --g:#2b6a4c; --g-bg:#dcefe4; --t:#7a5b00; --t-bg:#f6ebc8; --m:#99470f; --m-bg:#fadfc8; --e:#a3202f; --e-bg:#f8d9dd; color-scheme:light}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font-ui);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));min-height:100vh}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
h1,h2,h3{font-family:var(--font-read);line-height:1.2;text-wrap:balance;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.top{max-width:1080px;margin:0 auto;padding:18px 0 14px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;border-bottom:2px solid var(--accent)}
.brand{display:flex;align-items:center;gap:10px;font:700 24px var(--font-read);color:var(--ink)}
.brand:hover{text-decoration:none}
.top nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.top nav a{padding:6px 12px;border-radius:6px;color:var(--ink);font-weight:500}
.top nav a:hover{background:var(--chip);text-decoration:none}
.top nav a.on{background:var(--accent-soft);color:var(--accent)}
.who{font-size:13px;color:var(--ink2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wrap{max-width:1080px;margin:0 auto;padding-top:24px}
.banner{background:var(--accent-soft);border-left:3px solid var(--accent);padding:10px 14px;margin-bottom:20px;border-radius:0 6px 6px 0}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);padding:7px 14px;border-radius:6px;cursor:pointer;font-weight:600;font-size:14px;color:var(--ink)}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.dng{color:var(--e);border-color:var(--e)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.sm{padding:3px 9px;font-size:13px}
.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.muted{color:var(--ink2)}

/* lista */
.cols{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:800px){.cols{grid-template-columns:minmax(0,1fr)}}
.side{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px}
.side label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.side h2,.form h2{font:700 13px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
textarea{resize:vertical;min-height:90px;line-height:1.55}
.checks{display:flex;flex-direction:column;gap:6px}
.checks label{flex-direction:row;align-items:center;gap:8px;font-weight:400;font-size:14px}
.cloud{display:flex;flex-wrap:wrap;gap:6px}
.tag{border:0;background:var(--chip);padding:2px 10px;border-radius:99px;font-size:13px;cursor:pointer;color:var(--ink)}
.tag:hover{background:var(--accent-soft);color:var(--accent)}
.tag.on{background:var(--accent);color:var(--accent-ink)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:14px}
.head h1{font-size:26px}
.work{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:12px}
.work h3{font-size:19px}
.work .by{font:400 14px var(--font-ui);color:var(--ink2)}
.key{display:grid;grid-template-columns:repeat(2,26px);gap:3px;align-content:start}
.rt{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:4px;font:700 12px var(--font-ui)}
.r-G{background:var(--g-bg);color:var(--g)} .r-T{background:var(--t-bg);color:var(--t)}
.r-M{background:var(--m-bg);color:var(--m)} .r-E{background:var(--e-bg);color:var(--e)} .r-NR{background:var(--chip);color:var(--ink2)}
.stc{grid-column:span 2;display:grid;place-items:center;height:26px;border-radius:4px;font-size:11px;font-weight:700;background:var(--chip);color:var(--ink2)}
.stc.done{background:var(--g-bg);color:var(--g)}
.pills,.tags{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.pill{font-size:12.5px;padding:1px 9px;border-radius:4px;font-weight:600;background:var(--chip);color:var(--ink2)}
.pill.bad{background:var(--e-bg);color:var(--e)} .pill.warn{background:var(--t-bg);color:var(--t)}
.fandom{margin:2px 0 0;font-weight:600;font-size:14px}
.summary{margin:10px 0 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--font-read);font-size:15px}
.stats{margin:10px 0 0;font-size:13px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:4px 16px;font-variant-numeric:tabular-nums}
.empty{border:2px dashed var(--line);border-radius:8px;padding:36px 20px;text-align:center}
.empty h2{font-size:20px;margin-bottom:6px}

/* obra */
.paper{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px}
.stack>*+*{margin-top:14px}
.meta{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:16px 0}
.meta dt{font-weight:600;color:var(--ink2);font-size:13px;padding-top:2px}
.meta dd{margin:0}
.prose{font-family:var(--font-read);font-size:var(--fs,18px);line-height:1.75;max-width:66ch;overflow-wrap:anywhere}
.prose p{margin:0 0 1em} .prose hr{border:0;border-top:1px solid var(--ink2);opacity:.55;margin:2.2em 0}
.prose img{max-width:100%;height:auto}
.prose blockquote{margin:1em 0;padding-left:1em;border-left:3px solid var(--line);color:var(--ink2)}
.prose.small{font-size:15px;line-height:1.6}
.chlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.chlist li{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.chlist .ti{font-family:var(--font-read);font-weight:600}
.chnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:14px 0}
.chnav select{width:auto;max-width:100%}
.reader{max-width:720px;margin:0 auto}
.reader h1{font-size:28px;margin:34px 0 0}
.note{padding:0}
.note strong{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px}
.note .prose{margin:0}
.sep{border:0;border-top:1px solid var(--line);margin:36px 0}
.sep.wide{margin:56px 0}
.reader .prose:not(.small){margin:0}
.gate{max-width:560px;margin:30px auto;text-align:center}
.gate h1{font-size:24px;margin-bottom:12px}
.likebar{display:flex;gap:12px;align-items:center;justify-content:center;margin:26px 0}
.heart{font-size:17px;line-height:1}
.comments h2{font-size:20px;margin-bottom:12px}
.cm{border-top:1px solid var(--line);padding:12px 0}
.cm header{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--ink2)}
.cm header strong{color:var(--ink);font-size:14px}
.cm p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}

/* formulários */
.form{max-width:760px;display:flex;flex-direction:column;gap:22px}
.form section{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:14px}
.form label.f{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:14px}
.form .hint{font-weight:400;font-size:13px;color:var(--ink2)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.chipbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.chipbox input{border:0;background:transparent;flex:1;min-width:140px;padding:4px;outline:0}
.chipbox:focus-within{border-color:var(--accent)}
.chip{display:inline-flex;gap:6px;align-items:center;background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:2px 4px 2px 10px;font-size:13px;font-weight:600}
.chip button{border:0;background:transparent;cursor:pointer;color:inherit;font-size:15px;line-height:1;padding:0 4px}
.body-ta{font-family:var(--font-read);font-size:17px;line-height:1.7;min-height:340px}
.toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.preview{border:1px dashed var(--line);border-radius:6px;padding:16px}
.drop{border:2px dashed var(--line);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:6px}
.batch{margin:0;padding-left:20px}
.err{color:var(--e);font-weight:600;min-height:1.2em}
.ok{color:var(--g);font-weight:600}
.card{max-width:420px;margin:30px auto}
.card form{display:flex;flex-direction:column;gap:14px}
.card label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:14px}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.sticky-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
footer{max-width:1080px;margin:40px auto 0;color:var(--ink2);font-size:12.5px}
.ic{display:inline-flex;align-items:center;gap:5px}
.stats .ic svg,.meta .ic svg{flex:none}
.side label.notify{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400;font-size:13px}
.dl{margin-top:14px;gap:8px}
#printroot{display:none}
@media print{
  html,body{background:#fff!important;color:#000!important;padding:0!important;min-height:0!important}
  body>#app{display:none!important}
  #printroot{display:block;color:#000;background:#fff;font-family:Georgia,'Times New Roman',serif;font-size:12pt;line-height:1.6}
  #printroot h1,#printroot h2{color:#000;font-family:Georgia,serif}
  #printroot hr{border:0;border-top:1px solid #444;margin:1.6em 0}
  #printroot .nota{border-top:1px solid #999;border-bottom:1px solid #999;padding:.5em 0;margin:1.2em 0;font-size:11pt}
  #printroot .pchap{break-before:page}
}