* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { overflow:hidden; background:radial-gradient(ellipse at 20% 10%,#ffffffb8,transparent 60%),linear-gradient(135deg,#e1e3e6,#c9cdd2); color:#333; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
body.reader-embedded { background:transparent; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
[hidden] { display:none!important; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #555; outline-offset:3px; }
.reader-caption { position:fixed; top:14px; left:16px; max-width:calc(100% - 86px); z-index:5; padding:6px 10px; border-radius:7px; background:#f3f3f2e8; pointer-events:none; transition:opacity .2s; }
h1 { font-size:12px; font-weight:500; line-height:1.5; margin:0; color:#626262; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-close { position:fixed; top:14px; right:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; z-index:10; border:1px solid #d7d7d7; border-radius:8px; background:#fffffff0; color:#333; }
.reader-close:hover { background:#353535; color:#fff; }
.reader-main { position:absolute; inset:0; }
.reader-book { width:100%; height:100%; }
.reader-book>iframe { display:block; }
.reader-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:30px; text-align:center; background:#eef0f2b8; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); z-index:2; }
.reader-status[hidden] { display:none; }
.reader-status p { margin:8px 0; font-size:15px; }
.reader-fallback { color:#555; font-size:13px; text-decoration:underline; }
.reader-spinner { width:30px; height:30px; border:3px solid #d7d7d7; border-top-color:#555; border-radius:50%; animation:reader-spin 1s linear infinite; }
@keyframes reader-spin { to { transform:rotate(360deg); } }
.reader-tools { position:fixed; bottom:max(14px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:6; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px; width:max-content; max-width:calc(100% - 28px); padding:7px; border:1px solid #dedede; border-radius:12px; background:#fffffff0; backdrop-filter:blur(12px); box-shadow:0 4px 20px #00000012; transition:opacity .2s,transform .2s; }
.reader-tools-group { display:flex; align-items:center; justify-content:center; gap:3px; }
.reader-tools button,.reader-download { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:7px; background:transparent; color:#444; text-decoration:none; transition:background-color .15s,color .15s; }
.reader-tools button:hover:not(:disabled),.reader-download:hover { background:#ededed; color:#222; }
.reader-download:hover { background:#353535; color:#fff; }
.reader-tools button:disabled { opacity:.4; cursor:default; }
.reader-tools button[aria-pressed=true] { background:#e5e5e5; border-color:#999; }
.reader-page-label { display:flex; align-items:center; gap:6px; padding:0 3px; font-size:12px; white-space:nowrap; }
.reader-page-label input { width:48px; height:34px; padding:3px; border:1px solid #dedede; border-radius:6px; background:#fff; color:#333; text-align:center; font:inherit; }
.reader-show-tools { position:fixed; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:7; display:flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:7px 12px; border:1px solid #dedede; border-radius:20px; background:#ffffffd9; color:#555; font-size:11px; box-shadow:0 2px 10px #0000000a; }
.reader-show-tools:hover { background:#fff; color:#222; }
.reader-ui-hidden .reader-caption { opacity:0; }
.reader-ui-hidden .reader-tools { opacity:0; pointer-events:none; transform:translate(-50%,8px); }
@media(max-width:600px) {
  .reader-caption { top:14px; left:10px; padding:6px 8px; }
  h1 { font-size:11px; }
  .reader-tools { gap:3px; padding:5px; }
  .reader-tools-group { gap:1px; }
  .reader-tools button,.reader-download { width:44px; height:44px; }
  .reader-tools-group:first-child { width:100%; }
  .reader-tools-group:last-child { flex-wrap:wrap; }
  .reader-show-tools { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .reader-caption,.reader-tools,.reader-download,.reader-tools button { transition:none; } .reader-spinner { animation:none; } }