*{box-sizing:border-box}
:root{
  --bg:#0b0b0c;
  --panel:#15161a;
  --ink:#e9edf1;
  --muted:#9aa4b2;
  --accent:#56a2d9;
  --btn:#22252b;
  --btnHover:#2b3037;
}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:linear-gradient(180deg,#0b0b0c, #0f1115 50%, #0b0b0c 100%);
}
#topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:rgba(15,17,21,0.9); backdrop-filter: blur(10px); border-bottom:1px solid #222;
}
.brand{font-weight:700; letter-spacing:.2px}
.controls{display:flex; gap:10px}
.button{
  background:var(--btn); color:var(--ink); border:1px solid #2a2f36; border-radius:12px;
  padding:10px 14px; cursor:pointer; font-weight:600;
}
.button:hover{background:var(--btnHover)}
#overlay-root{
  max-width: 980px; margin: 20px auto; padding: 12px; 
}
#hud{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; padding: 10px; border:1px solid #222; border-radius: 14px; background: var(--panel);
  position:sticky; top:64px; z-index:10;
}
#hud button{
  background:var(--btn); color:var(--ink); border:1px solid #2a2f36; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600;
}
#hud button:hover{background:var(--btnHover)}
#titleArea{color:var(--muted); text-align:center; flex:1}
#reader{
  margin-top: 14px; border:1px solid #222; background:#0e0f13; border-radius:16px; overflow: hidden;
  min-height: 600px;
}
/* The container epub.js will render into */
#reader .epub-container, #reader iframe{
  width: 100% !important; height: 80vh !important; border: none;
}
#help{color:var(--muted); margin-top:14px; font-size:14px}
.note{opacity:.8}
/* Slightly larger UI for AR overlay readability */
@media (min-width: 800px){
  #hud button{font-size: 18px; padding:10px 16px}
  #titleArea{font-size: 18px}
}