:root{--bg:#16181f;--fg:#f2f3f7;--mut:#9aa0b4;--card:#222633;--acc:#6b86ff;--bad:#ff6e5a;--ok:#4fd18b;
 --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 -apple-system,system-ui,Segoe UI,Roboto,sans-serif}
main{padding:calc(12px + var(--sat)) calc(14px + var(--sar)) calc(76px + var(--sab)) calc(14px + var(--sal));max-width:980px;margin:0 auto}
h1{font-size:1.35rem;margin:.2rem 0 .8rem}h2{font-size:1.05rem;margin:1rem 0 .4rem}
a{color:var(--acc);text-decoration:none}
input,select,button{font:inherit;color:inherit}
input[type=text],input[type=password],input[type=url],input[type=search],select{width:100%;padding:12px;border-radius:10px;border:1px solid #343a4d;background:#1d2029;min-height:44px}
button,.btn{background:var(--acc);color:#fff;border:0;border-radius:10px;padding:11px 16px;min-height:44px;font-weight:600;cursor:pointer;display:inline-block}
button.sec,.btn.sec{background:#2b3042}button.bad{background:var(--bad)}button:disabled{opacity:.5}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:.5rem 0}.grow{flex:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.card{background:var(--card);border-radius:12px;overflow:hidden;position:relative;display:block;color:var(--fg)}
.card img,.card .ph{width:100%;aspect-ratio:2/3;object-fit:cover;background:#2b3042;display:block}
.card{display:flex;flex-direction:column;min-width:0}
.card>a:not(.go){display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.card .t{padding:6px 8px 6px;font-size:.8rem;line-height:1.25;min-height:calc(2.5em + 12px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;text-overflow:ellipsis}
.badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);padding:2px 7px;border-radius:99px;font-size:.72rem}
.list>*{display:flex;gap:10px;align-items:center;padding:12px;background:var(--card);border-radius:10px;margin:6px 0;min-height:48px}
.mut{color:var(--mut);font-size:.85rem}.err{color:var(--bad)}.ok{color:var(--ok)}
.bar{height:6px;background:#2b3042;border-radius:4px;overflow:hidden;width:100%}.bar>i{display:block;height:100%;background:var(--acc)}
nav#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:#10121a;border-top:1px solid #2b3042;padding-bottom:var(--sab);z-index:5}
nav#tabs a{flex:1;text-align:center;padding:12px 4px;color:var(--mut);font-size:.8rem;min-height:48px}nav#tabs a.on{color:var(--fg);font-weight:700}
#net{position:fixed;top:var(--sat);left:0;right:0;background:#7a4b00;color:#fff;padding:6px 12px;font-size:.8rem;z-index:20}
/* leitor */
body.reading{overflow:hidden}
#reader{position:fixed;inset:0;background:#000;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;overflow-anchor:none;z-index:30}
#reader .pg{position:relative;margin:0 auto;background:#111;width:var(--col,100%);max-width:100%;overflow:hidden}
#reader .pg img{display:block;width:100%;height:auto}
#rbar{position:fixed;left:0;right:0;z-index:31;background:rgba(16,18,26,.92);padding:8px calc(10px + var(--sar)) 8px calc(10px + var(--sal));display:flex;gap:8px;align-items:center;transition:transform .2s}
#rbar.top{top:0;padding-top:calc(8px + var(--sat))}#rbar.bot{bottom:0;padding-bottom:calc(8px + var(--sab))}
#rbar.hide.top{transform:translateY(-110%)}#rbar.hide.bot{transform:translateY(110%)}
#banner{position:fixed;left:10px;right:10px;bottom:calc(70px + var(--sab));background:#3a2f12;border:1px solid #c9a227;padding:10px;border-radius:10px;z-index:40}

/* transição estável: o conteúdo anterior fica até o novo estar pronto; só esmaece se demorar */
#view{transition:opacity .15s ease}
body.busy #view{opacity:.55;transition:opacity .15s ease .25s;pointer-events:none}
body.busy::before{content:"";position:fixed;left:0;top:0;height:2px;width:100%;background:var(--ac,#6aa9ff);transform-origin:left;animation:mbmprog 1.2s ease-in-out .25s infinite;z-index:50;opacity:0}
@keyframes mbmprog{0%{transform:scaleX(.05);opacity:1}100%{transform:scaleX(.95);opacity:1}}
@media (prefers-reduced-motion:reduce){body.busy::before{animation:none;opacity:1;transform:none}}

/* leitor em tela larga: coluna centralizada; botões de zoom só aparecem onde há folga (celular usa a tela toda e o pinça do sistema) */
#rbar .zoom{display:flex;gap:6px;align-items:center}#rbar .zoom button{padding:4px 10px;min-width:34px}#rbar .zoom .zl{min-width:3.2em;text-align:center}
@media (max-width:820px){#rbar .zoom{display:none}}

#diag h2{margin-top:18px}pre.diag{white-space:pre-wrap;word-break:break-word;font:12px/1.45 ui-monospace,Menlo,monospace;background:#0e1016;border:1px solid #2a2f3d;border-radius:8px;padding:10px;margin:6px 0 10px;user-select:text;-webkit-user-select:text}

/* Offline discreto: pílula pequena no canto; aviso de HTTPS continua como faixa */
#offpill{position:fixed;top:calc(var(--sat) + 6px);right:10px;z-index:20;font-size:.7rem;letter-spacing:.02em;color:#cfd5e6;background:rgba(58,63,82,.92);padding:2px 9px;border-radius:99px;pointer-events:none}
body.reading #offpill{display:none}
.card .go{display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin:2px 8px 8px;padding:6px 6px;min-height:40px;font-size:.74rem;line-height:1.2;text-align:center;border-radius:8px;position:static;white-space:normal;overflow-wrap:anywhere}
.card a:not(.go){color:var(--fg)}
details#diag{margin-top:18px}details#diag summary{cursor:pointer;color:var(--mut,#9aa3b8);padding:8px 0;min-height:44px}

textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #343a4d;background:#1d2029;color:var(--fg);font:inherit;resize:vertical}textarea.mono{font:13px/1.35 ui-monospace,Menlo,Consolas,monospace}
.note{background:#1d2540;border:1px solid #34406b;border-radius:10px;padding:10px 12px;margin:.6rem 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:.5rem 0}.chip{background:#2b3042;border-radius:99px;padding:6px 12px;min-height:34px;font-size:.8rem;font-weight:500}.chip.on{background:var(--acc)}
.blist>.brow{display:flex;gap:10px;align-items:flex-start;padding:10px;background:var(--card);border-radius:10px;margin:6px 0;content-visibility:auto;contain-intrinsic-size:auto 120px}
.brow .bt{font-weight:600;overflow-wrap:anywhere}.brow .burl{overflow-wrap:anywhere;font-size:.75rem}.brow img,.brow .cvph{width:46px;height:66px;object-fit:cover;border-radius:6px;background:#2b3042;flex:none}
.brow .cbph{width:20px;flex:none}.brow input[type=checkbox]{width:22px;height:22px;flex:none;margin-top:4px}
.edit{margin-top:8px;display:grid;gap:8px}.edit input[type=text],.edit select{min-height:40px}.chlist{max-height:260px;overflow:auto}.chk{display:block;padding:6px 0;font-size:.9rem}
a.item{color:var(--fg)}

.mut.sm{font-size:.72rem;line-height:1.3;margin-top:3px}
button:disabled[title]{cursor:not-allowed}