:root{
  --erp-bg: #ffffff;
  --erp-text: #111827;
  --erp-accent: #2563eb;
  --erp-font-size: 18px;
}

[data-erp-theme="dark"]{
  --erp-bg: #0b1220;
  --erp-text: #e6eef8;
  --erp-accent: #60a5fa;
}
[data-erp-theme="sepia"]{
  --erp-bg: #fbf2e6;
  --erp-text: #4b2e1e;
  --erp-accent: #b87333;
}

*{box-sizing:border-box}
.epubreader-pro-simple{ background:var(--erp-bg); color:var(--erp-text); min-height:80vh; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; display:flex; flex-direction:column; border-radius:10px; box-shadow:0 6px 22px rgba(15,23,42,0.08); overflow:hidden;}

/* Topbar */
.erp-topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,0.06); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.erp-left, .erp-center, .erp-right{ display:flex; align-items:center; gap:10px; }
.erp-upload{ background:var(--erp-accent); color:white; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600; }
.erp-title{ font-weight:700; font-size:16px; color:var(--erp-text); }
.erp-btn{ background:transparent; border:1px solid rgba(0,0,0,0.06); padding:6px 10px; border-radius:8px; cursor:pointer; }

/* Main area */
.erp-main{ display:flex; gap:16px; padding:16px; }
.erp-sidebar{ width:280px; background:rgba(0,0,0,0.02); padding:12px; border-radius:8px; display:block; }
.erp-cover img{ width:100%; height:auto; border-radius:6px; box-shadow:0 6px 16px rgba(16,24,40,0.06); }
.erp-meta{ margin-top:8px; font-size:14px; color:var(--erp-text); }
.erp-toc{ margin-top:12px; max-height:60vh; overflow:auto; }
.erp-toc-list{ list-style:none; padding:0; margin:0; }
.erp-toc-list li{ margin:6px 0; }
.erp-toc-list a{ color:var(--erp-accent); text-decoration:none; font-weight:600; }

/* Reader */
.erp-reader{ flex:1; display:flex; flex-direction:column; gap:12px; min-height:60vh; }
.erp-viewer{ flex:1; background:var(--erp-bg); color:var(--erp-text); padding:22px; border-radius:10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); font-size:var(--erp-font-size); line-height:1.6; overflow:auto; }
.erp-bottombar{ display:flex; align-items:center; gap:12px; }
.erp-progress-wrap{ flex:1; }
.erp-progress-wrap input[type="range"]{ width:100%; }

/* Settings modal */
.erp-settings{ position:fixed; right:20px; top:80px; width:260px; background:var(--erp-bg); color:var(--erp-text); padding:14px; border-radius:10px; box-shadow:0 12px 40px rgba(2,6,23,0.2); z-index:9999; }
.hidden{ display:none; }

/* Responsive */
@media(max-width:900px){
  .erp-main{ flex-direction:column; padding:12px; }
  .erp-sidebar{ width:100%; order:2; }
  .erp-reader{ order:1; }
}