:root{
  --bg-0:#0e1013; --bg-1:#15181c; --panel:#1c2126; --panel-2:#252b32;
  --accent:#3b6ef6; --accent-2:#5f8bff; --text-0:#f2f4f7; --text-1:#b7c0cc;
  --text-dim:#7b8592; --border:#2c333b; --shadow: rgba(0,0,0,.55);
  --page-bg:#fdfdfb; --danger:#e0524a; --flip-ms: 780ms;
}
:root:not([data-theme="light"]) { color-scheme: dark; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg-0:#eef1f5; --bg-1:#e4e8ee; --panel:#ffffff; --panel-2:#f3f5f8;
    --accent:#2f5fe0; --accent-2:#4a75f0; --text-0:#1a1e24; --text-1:#454e59;
    --text-dim:#6b7480; --border:#d7dce2; --shadow: rgba(20,25,35,.25);
    --page-bg:#ffffff;
  }
}
:root[data-theme="light"]{
  --bg-0:#eef1f5; --bg-1:#e4e8ee; --panel:#ffffff; --panel-2:#f3f5f8;
  --accent:#2f5fe0; --accent-2:#4a75f0; --text-0:#1a1e24; --text-1:#454e59;
  --text-dim:#6b7480; --border:#d7dce2; --shadow: rgba(20,25,35,.25);
  --page-bg:#ffffff;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg-0); color:var(--text-0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow:hidden;
}
#app{ display:flex; flex-direction:column; height:100vh; }

/* ---------- top bar ---------- */
#topbar{
  height:56px; flex:0 0 auto; display:flex; align-items:center; gap:16px;
  background:var(--panel); border-bottom:1px solid var(--border); padding:0 16px;
  z-index:20;
}
#logo-wrap{ display:flex; align-items:center; gap:8px; height:32px; }
#logo-img{ height:28px; max-width:160px; object-fit:contain; display:block; }
#logo-fallback{
  font-weight:700; letter-spacing:.04em; font-size:15px; color:var(--text-0);
  display:flex; align-items:center; gap:6px;
}
#logo-fallback .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
#title-wrap{ flex:1 1 auto; min-width:0; }
#course-title{
  font-size:14px; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:block; max-width:100%;
}
#search-wrap{ position:relative; flex:0 0 auto; width:260px; }
#search-input{
  width:100%; height:34px; border-radius:17px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--text-0); padding:0 36px 0 14px; font-size:13px; outline:none;
}
#search-input:focus{ border-color:var(--accent); }
#search-btn{
  position:absolute; right:4px; top:4px; width:26px; height:26px; border-radius:50%;
  border:none; background:transparent; color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#search-btn:hover{ color:var(--text-0); }
#search-results{
  position:absolute; top:42px; right:0; width:320px; max-height:360px; overflow:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 30px var(--shadow);
  padding:6px; z-index:40;
}
#search-results .sr-empty{ padding:12px; color:var(--text-dim); font-size:13px; }
#search-results .sr-item{
  padding:9px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--text-1);
  display:flex; justify-content:space-between; gap:8px;
}
#search-results .sr-item:hover{ background:var(--panel-2); color:var(--text-0); }
#search-results .sr-idx{ color:var(--text-dim); font-size:12px; }
#search-status{ padding:6px 10px; font-size:11px; color:var(--text-dim); border-top:1px solid var(--border); margin-top:4px; }

#theme-toggle-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--panel-2);
  color:var(--text-1); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
#theme-toggle-btn:hover{ color:var(--text-0); }

/* ---------- viewer ---------- */
#viewer{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 36%, rgba(59,110,246,.16), transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(0,0,0,.30), transparent 70%),
    var(--bg-0);
}
#viewer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 150% 130% at 50% 45%, transparent 58%, rgba(10,12,18,.20) 100%);
}
#empty-state{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:24px;
}
#empty-state h2{ margin:0; font-size:20px; color:var(--text-0); }
#empty-state p{ margin:0; max-width:460px; color:var(--text-1); font-size:14px; line-height:1.5; }
#empty-state code{ background:var(--panel-2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:12.5px; }
#empty-loading{ display:none; align-items:center; gap:10px; color:var(--text-1); font-size:13px; }
.spinner{
  width:18px; height:18px; border-radius:50%; border:2.5px solid var(--border);
  border-top-color:var(--accent); animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

#drive-fallback{
  position:absolute; inset:0; padding:22px 70px 64px;
}
#drive-fallback-iframe{ width:100%; height:100%; border:0; border-radius:8px; background:var(--page-bg); }

#book-stage{
  position:absolute; inset:0; display:flex; align-items:safe center; justify-content:safe center;
  padding:22px 70px 64px; overflow:auto;
}
#book{
  position:relative; display:flex; height:100%; max-height:100%; perspective:2400px;
  filter:drop-shadow(0 22px 46px var(--shadow)) drop-shadow(0 0 60px rgba(59,110,246,.10));
  transform:scale(1); transform-origin:center top; transition:transform .22s ease;
  flex:0 0 auto;
}
.page-panel{
  position:relative; height:100%; background:var(--page-bg); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.page-panel.left{ border-radius:6px 0 0 6px; }
.page-panel.right{ border-radius:0 6px 6px 0; }
.page-panel canvas{ max-width:100%; max-height:100%; display:block; }
.page-panel canvas.annot-canvas{
  position:absolute; pointer-events:none; touch-action:none; max-width:none; max-height:none;
}
.page-panel.single{ border-radius:6px; }
.spine{ width:3px; background:linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.05), rgba(0,0,0,.25)); }

body.annot-mode .page-panel canvas.annot-canvas{ pointer-events:auto; }
body.annot-mode.tool-pencil .page-panel canvas.annot-canvas{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'><g fill='none' stroke='%231a1e24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l1-5L15 5l4 4L8 20z'/><path d='M13 7l4 4'/></g></svg>") 3 21, crosshair;
}
body.annot-mode.tool-marker .page-panel canvas.annot-canvas{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'><g fill='none' stroke='%231a1e24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m2 22 1-1h3l9-9'/><path d='M3 21v-3l9-9'/><path d='m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l-3-3Z'/></g></svg>") 3 21, crosshair;
}
body.annot-mode.tool-eraser .page-panel canvas.annot-canvas{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='white' stroke='%231a1e24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7 21-4.3-4.3a1 1 0 0 1 0-1.4l9.6-9.6a1 1 0 0 1 1.4 0l5.7 5.7a1 1 0 0 1 0 1.4L13 19'/><path d='M22 21H7'/></g></svg>") 12 12, cell;
}
body.annot-mode.tool-line .page-panel canvas.annot-canvas{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><line x1='5' y1='19' x2='19' y2='5' stroke='%231a1e24' stroke-width='2' stroke-linecap='round'/><circle cx='5' cy='19' r='2.5' fill='%233b6ef6'/></svg>") 5 19, crosshair;
}
body.annot-mode.tool-rect .page-panel canvas.annot-canvas{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><rect x='4' y='6' width='16' height='12' rx='1.5' fill='none' stroke='%231a1e24' stroke-width='2'/><circle cx='4' cy='6' r='2.5' fill='%233b6ef6'/></svg>") 4 6, crosshair;
}
body.annot-mode.tool-circle .page-panel canvas.annot-canvas{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8' fill='none' stroke='%231a1e24' stroke-width='2'/><circle cx='12' cy='12' r='2.5' fill='%233b6ef6'/></svg>") 12 12, crosshair;
}

.flip-leaf{
  position:absolute; z-index:5; backface-visibility:hidden;
  box-shadow:-6px 0 18px rgba(0,0,0,.45);
  transition: transform var(--flip-ms) cubic-bezier(.61,.06,.4,.95), opacity var(--flip-ms) ease;
}
.flip-leaf.from-right{ transform-origin:left center; }
.flip-leaf.from-right.go{ transform:rotateY(-165deg); opacity:.65; }
.flip-leaf.from-left{ transform-origin:right center; }
.flip-leaf.from-left.go{ transform:rotateY(165deg); opacity:.65; }

.nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); color:var(--text-1); font-size:20px; cursor:pointer;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow:0 6px 16px var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; z-index:10;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-arrow:hover:not(:disabled){
  background:linear-gradient(180deg, var(--accent-2), var(--accent)); color:#fff; border-color:var(--accent);
  transform:translateY(-50%) scale(1.07);
  box-shadow:0 10px 22px rgba(59,110,246,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.nav-arrow:active:not(:disabled){ transform:translateY(-50%) scale(0.97); }
.nav-arrow:disabled{ opacity:.3; cursor:default; }
#prev-btn{ left:14px; }
#next-btn{ right:14px; }

#fs-toggle-corner{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); color:var(--text-1); cursor:pointer; z-index:10;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow:0 4px 12px var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease, color .15s ease;
}
#fs-toggle-corner:hover{ color:var(--text-0); transform:scale(1.08); box-shadow:0 8px 18px var(--shadow), inset 0 1px 0 rgba(255,255,255,.1); }

/* ---------- overlays: grid / outline / settings ---------- */
.overlay-panel{
  position:absolute; inset:0; background:rgba(6,8,10,.72); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:30;
}
.overlay-card{
  width:min(880px, 92%); height:min(620px, 86%); background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:18px; position:relative; display:flex; flex-direction:column;
}
.overlay-card.settings-card{ width:min(420px, 92%); height:auto; }
.overlay-card h3{ margin:0 0 12px; font-size:15px; color:var(--text-0); }
.overlay-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; border:none;
  background:var(--panel-2); color:var(--text-1); cursor:pointer; font-size:14px;
}
#grid-container{
  flex:1; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:14px;
  padding-right:4px;
}
.thumb-cell{ cursor:pointer; text-align:center; }
.thumb-cell canvas{ width:100%; border-radius:5px; border:2px solid var(--border); background:var(--page-bg); display:block; }
.thumb-cell:hover canvas{ border-color:var(--accent); }
.thumb-cell.current canvas{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-2); }
.thumb-cell span{ display:block; margin-top:6px; font-size:11px; color:var(--text-dim); }

#outline-container{ flex:1; overflow:auto; }
#outline-container ul{ list-style:none; margin:0; padding-left:14px; }
#outline-container > ul{ padding-left:0; }
#outline-container li{ margin:2px 0; }
#outline-container .ol-row{
  padding:8px 10px; border-radius:7px; cursor:pointer; color:var(--text-1); font-size:13.5px;
}
#outline-container .ol-row:hover{ background:var(--panel-2); color:var(--text-0); }

.settings-row{ padding:6px 2px 2px; }
.settings-row label{ display:block; font-size:13px; color:var(--text-1); margin-bottom:10px; }
.settings-slider-row{ display:flex; align-items:center; gap:10px; }
.settings-slider-row input[type=range]{ flex:1; accent-color: var(--accent); }
.settings-hint{ font-size:11px; color:var(--text-dim); }
.settings-value{ text-align:center; margin-top:6px; font-size:12px; color:var(--text-dim); }

/* ---------- pdf error banner ---------- */
#pdf-error-banner{
  position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:35; max-width:min(560px,90%);
  background:var(--panel); border:1px solid var(--danger); border-radius:10px; padding:10px 14px;
  display:flex; align-items:center; gap:12px; box-shadow:0 12px 30px var(--shadow); font-size:12.5px; color:var(--text-1);
}
#pdf-error-close{ border:none; background:transparent; color:var(--text-dim); cursor:pointer; font-size:13px; flex:0 0 auto; }

/* ---------- footer toolbar ---------- */
#toolbar{
  flex:0 0 auto; height:52px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg, var(--panel), var(--bg-1)); border-top:1px solid var(--border); padding:0 16px; z-index:20;
}
#toolbar button{
  width:36px; height:36px; border-radius:9px; border:1px solid transparent; background:transparent;
  color:var(--text-1); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
#toolbar button:hover:not(:disabled){
  background:var(--panel-2); color:var(--text-0); transform:translateY(-1px);
  box-shadow:0 4px 10px var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
#toolbar button:active:not(:disabled){ transform:translateY(0); box-shadow:inset 0 2px 5px rgba(0,0,0,.3); }
#toolbar button:disabled{ opacity:.3; cursor:default; transform:none; box-shadow:none; }
#toolbar button.active{
  background:linear-gradient(180deg, var(--accent-2), var(--accent)); color:#fff;
  box-shadow:0 6px 14px rgba(59,110,246,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
#page-indicator{ display:flex; align-items:center; gap:6px; margin:0 10px; color:var(--text-1); font-size:13px; }
#page-count-label{ min-width:64px; text-align:center; }
.tb-sep{ width:1px; height:22px; background:var(--border); margin:0 4px; flex:0 0 auto; }

/* ---------- screenshot / crop tool ---------- */
#screenshot-overlay{ position:absolute; inset:0; z-index:16; cursor:crosshair; }
#screenshot-selection{
  position:fixed; border:2px dashed var(--accent); background:rgba(59,110,246,.15);
  pointer-events:none; z-index:17; border-radius:3px;
}
#screenshot-hint{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:7px 14px; font-size:12px; color:var(--text-1); box-shadow:0 8px 20px var(--shadow);
  pointer-events:none; white-space:nowrap;
}

/* ---------- annotation mini toolbar ---------- */
#annot-toolbar{
  position:absolute; left:50%; bottom:66px; transform:translateX(-50%); z-index:25;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:6px 10px;
  display:flex; align-items:center; gap:8px; box-shadow:0 14px 34px var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  max-width:min(94vw, 640px); overflow-x:auto; scrollbar-width:none;
}
#annot-toolbar::-webkit-scrollbar{ display:none; }
.annot-tool{
  width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:transparent;
  color:var(--text-1); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.annot-tool:hover{ background:var(--panel-2); color:var(--text-0); transform:translateY(-1px); }
.annot-tool.active{
  background:linear-gradient(180deg, var(--accent-2), var(--accent)); color:#fff;
  box-shadow:0 4px 12px rgba(59,110,246,.4);
}
#annot-colors{ display:flex; gap:5px; flex:0 0 auto; }
.annot-swatch{
  width:18px; height:18px; border-radius:50%; border:2px solid var(--border); cursor:pointer; padding:0;
}
.annot-swatch.active{ border-color:var(--text-0); box-shadow:0 0 0 2px var(--accent); }
#annot-color-custom{ width:24px; height:24px; padding:0; border:none; background:none; cursor:pointer; flex:0 0 auto; }
#annot-size{ width:80px; accent-color: var(--accent); flex:0 0 auto; }
#annot-toolbar button#annot-undo, #annot-toolbar button#annot-redo, #annot-toolbar button#annot-clear-page{
  width:30px; height:30px; border-radius:7px; border:none; background:transparent; color:var(--text-1); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition: background .12s ease, color .12s ease, opacity .12s ease;
}
#annot-toolbar button#annot-undo:hover, #annot-toolbar button#annot-redo:hover, #annot-toolbar button#annot-clear-page:hover{
  background:var(--panel-2); color:var(--text-0);
}
#annot-toolbar button#annot-undo:disabled, #annot-toolbar button#annot-redo:disabled{ opacity:.3; cursor:default; }

/* ---------- admin ---------- */
#admin-toggle{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:50%; z-index:50;
  background:linear-gradient(145deg, var(--accent-2), var(--accent)); color:#fff; border:none; cursor:pointer;
  box-shadow:0 10px 24px rgba(59,110,246,.45), inset 0 1px 0 rgba(255,255,255,.25);
  font-size:18px; display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
#admin-toggle:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 14px 30px rgba(59,110,246,.55), inset 0 1px 0 rgba(255,255,255,.3); }
#admin-toggle:active{ transform:translateY(0) scale(.97); }
#admin-panel{
  position:fixed; right:18px; bottom:70px; width:320px; z-index:50;
  background:var(--panel);
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 100%, white 5%), var(--panel));
  border:1px solid var(--border); border-radius:14px; padding:16px;
  box-shadow:0 20px 46px var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  max-height:80vh; overflow:auto;
}
#admin-panel h3{ margin:0 0 4px; font-size:14px; color:var(--text-0); }
#admin-panel p.hint{ margin:0 0 12px; font-size:12px; color:var(--text-dim); line-height:1.5; }
#admin-panel p.hint a{ color:var(--accent-2); }
#admin-panel label{ display:block; font-size:12px; color:var(--text-1); margin:10px 0 4px; }
#admin-panel .hint-inline{ color:var(--text-dim); font-weight:400; }
#admin-panel input[type=text], #admin-panel input[type=password]{
  width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:7px; color:var(--text-0);
  padding:8px 10px; font-size:13px;
}
#admin-panel input[type=file]{ font-size:12px; color:var(--text-1); width:100%; margin-bottom:6px; }
#admin-panel .link-btn{
  background:none; border:none; color:var(--accent-2); font-size:11.5px; cursor:pointer; padding:4px 0 0; text-decoration:underline;
}
#local-file-info{ font-size:11.5px; color:var(--text-dim); margin-top:4px; line-height:1.5; }
#local-file-info.err{ color:var(--danger); }
#owner-file-warn{ font-size:11px; color:#e0a832; margin-top:4px; display:none; }
#admin-panel .secondary-btn{
  margin-top:12px; width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text-1);
  padding:9px; border-radius:8px; font-weight:600; cursor:pointer; font-size:12.5px;
}
#admin-panel .secondary-btn:hover{ color:var(--text-0); border-color:var(--text-dim); }
#publish-btn{
  margin-top:14px; width:100%; background:var(--accent); color:#fff; border:none; padding:10px; border-radius:8px;
  font-weight:600; cursor:pointer; font-size:13px;
}
#publish-btn:disabled{ opacity:.5; cursor:default; }
#publish-status{ margin-top:10px; font-size:12px; color:var(--text-dim); min-height:16px; line-height:1.5; white-space:pre-wrap; }

#owner-setup{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
}
#owner-setup summary{
  cursor:pointer; font-size:12px; color:var(--text-dim); list-style:none; user-select:none;
  display:flex; align-items:center; gap:6px;
}
#owner-setup summary::-webkit-details-marker{ display:none; }
#owner-setup summary::before{ content:"⚙"; font-size:11px; }
#owner-setup summary:hover{ color:var(--text-1); }
#owner-setup[open] summary{ margin-bottom:2px; color:var(--text-1); }

[hidden]{ display:none !important; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:5px; }

/* ---------- responsive ---------- */
@media (max-width: 860px){
  #topbar{ gap:10px; padding:0 10px; height:52px; }
  #logo-img{ max-width:110px; height:24px; }
  #logo-fallback{ font-size:13.5px; }
  #search-wrap{ width:190px; }
  #course-title{ font-size:12.5px; }
  #book-stage{ padding:14px 44px 58px; }
  .nav-arrow{ width:38px; height:38px; font-size:18px; }
  #prev-btn{ left:6px; } #next-btn{ right:6px; }
  #toolbar{
    gap:3px; padding:0 8px; justify-content:flex-start;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #toolbar::-webkit-scrollbar{ display:none; }
  #toolbar button{ width:34px; height:34px; flex:0 0 auto; }
  #page-indicator{ margin:0 4px; flex:0 0 auto; }
  #admin-panel{ width:min(340px, calc(100vw - 24px)); }
}

@media (max-width: 560px){
  #search-wrap{ width:118px; }
  #search-input{ padding:0 30px 0 10px; font-size:12.5px; }
  #topbar{ gap:6px; }
  #title-wrap{ min-width:0; }
  #book-stage{ padding:8px 6px 54px; }
  #prev-btn{ left:4px; } #next-btn{ right:4px; }
  .nav-arrow{ width:32px; height:32px; font-size:16px; }
  #fs-toggle-corner{ top:8px; right:8px; width:28px; height:28px; }
  #annot-toolbar{ left:6px; right:6px; bottom:60px; transform:none; max-width:none; justify-content:flex-start; padding:6px 8px; }
  #admin-toggle{ right:12px; bottom:12px; width:40px; height:40px; }
  #admin-panel{ left:10px; right:10px; bottom:60px; width:auto; max-height:78vh; }
  #screenshot-hint{ font-size:11px; padding:6px 10px; top:8px; }
}

@media (max-width: 380px){
  #search-wrap{ display:none; }
}