:root{
  --reader-max-width: 100%;
  --container-width: 100;
  --brightness: 1;
}

.reader-container{max-width:1000px;margin:0 auto;padding:1rem 1rem 0;min-height:50vh}
.reader-container.single .page-wrapper{max-width:800px;margin:0 auto}
.reader-container.longstrip .page-wrapper{max-width:800px;margin:0 auto;display:flex;flex-direction:column;}
.page-wrapper{width:calc(var(--container-width,100) * 1%);margin:0 auto;transition:width .3s ease}
.page-slot{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.reader-container.longstrip .page-slot{
  background:#262626;
  overflow:hidden;
}
.reader-container.single .page-slot{
  background:transparent;
  aspect-ratio:auto;
}
.page-slot img{
  width:100%;
  max-width:var(--reader-max-width,100%);
  height:auto;
  display:block;
  filter:brightness(var(--brightness,1));
  background:transparent;
}
.reader-container.single .page-wrapper img{max-height:85vh;object-fit:contain;margin:0 auto}

.reader-controls{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 0;flex-wrap:wrap}
.reader-controls button{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem 1.1rem;color:var(--text);font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.35rem;transition:border-color .15s}
.reader-controls button:hover:not(:disabled){border-color:var(--blue)}
.reader-controls button:disabled{opacity:.35;cursor:not-allowed}
.page-indicator{font-size:.8rem;color:var(--text-dim);min-width:60px;text-align:center}

.reader-bottom{max-width:1000px;margin:1.5rem auto 0;padding:0 1rem}
.reader-title{font-size:1.05rem;font-weight:700;line-height:1.35;margin-bottom:.35rem;word-break:break-word;color:var(--text)}
.reader-meta{font-size:.8rem;color:var(--text-dim);display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.25rem}
.reader-meta i{margin-right:.25rem;color:var(--text-faint)}

/* ===== tags ===== */
.reader-tags{max-width:1000px;margin:1rem auto 0;padding:0 1rem;display:flex;flex-wrap:wrap;gap:.3rem}
.reader-tags .tag{padding:.15rem .5rem;border-radius:20px;font-size:.6rem;color:#fff;background:var(--bg-elev);border:1px solid var(--border);text-decoration:none}
.reader-tags .tag .type{opacity:.6;font-size:.5rem;margin-right:2px}

/* ===== related ===== */
.reader-related{max-width:1000px;margin:2rem auto 0;padding:0 1rem}
.reader-related .header{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.reader-related .header h3{font-size:1rem;font-weight:700}
.reader-related .header i{color:var(--blue)}
.reader-related .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}

.reader-fab{position:fixed;right:16px;bottom:20px;z-index:600;display:flex;flex-direction:column;gap:.5rem}
.reader-fab-btn{width:44px;height:44px;border-radius:50%;background:var(--bg-elev);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.reader-fab-btn:hover{border-color:var(--blue)}
.reader-fab-btn.active{background:var(--blue);border-color:var(--blue)}
.reader-fab-btn.hidden{display:none}

.settings-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.settings-overlay.active{display:flex}
.settings-modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;max-width:420px;width:95%;max-height:90vh;overflow-y:auto}
.settings-modal .header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.settings-modal .header h2{font-size:1.1rem;font-weight:700}
.settings-modal .header .close{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer}
.settings-group{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.settings-group:last-child{border-bottom:none}
.settings-group .label{font-size:.7rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;display:block}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.25rem 0}
.settings-row .name{font-size:.8rem;color:var(--text)}
.settings-row .value{font-size:.7rem;color:var(--text-dim);min-width:40px;text-align:right}
.settings-row input[type=range]{flex:1;accent-color:var(--blue);max-width:140px}
.settings-row select{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.2rem .5rem;color:var(--text);font-size:.75rem}
.settings-row .mode-btns{display:flex;gap:.3rem}
.settings-row .mode-btns button{padding:.2rem .6rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elev-2);color:var(--text-dim);font-size:.65rem;cursor:pointer}
.settings-row .mode-btns button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.reset-btn{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem 1rem;color:var(--text);font-size:.7rem;cursor:pointer;width:100%;margin-top:.5rem}
.reset-btn:hover{border-color:#ef4444;color:#ef4444}

/* ===== mobile ===== */
@media(max-width:768px){
  .reader-container{padding:inherit}
  .reader-container.single .page-wrapper img{max-height:100%}
  .reader-related .related-grid{grid-template-columns:repeat(2,1fr)}
  .reader-title{font-size:.95rem}
  .reader-fab{right:10px;bottom:14px}
  .reader-fab-btn{width:40px;height:40px}
  .reader-controls button{padding:.4rem .8rem;font-size:.75rem}
}
.page-slot img{transition:opacity .15s ease}
.page-slot img.is-loading{opacity:.45}

button{-webkit-tap-highlight-color:transparent}
button:active,button:focus{outline:none}
button:active{box-shadow:none}