/* ============================================================
   reader.web.css — full-screen desktop EPUB reader
   Ported from the desktop prototype; device-frame removed (the .frame fills
   the viewport), demo prose replaced by an epub.js mount (#epubView).
   ============================================================ */

:root{ --accent:#E3B318; --accent-soft:#FBEFC0; }
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* backdrop behind the contained reader (web); mobile overrides to full-bleed */
  background:#E9E6DF;
  display:flex;align-items:center;justify-content:center;
}
body[data-theme="dark"]{background:#121212;}

/* ============ FRAME (contained card on web) ============ */
.frame{
  position:relative;
  width:min(1440px, 92vw);
  height:min(1280px, 96vh);
  border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(60,52,38,.45), 0 8px 24px -8px rgba(60,52,38,.18);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--app-bg);

  /* light chrome defaults (Original) */
  --app-bg:#FFFDF8;--toolbar-bg:#FFFDF8;--text:#201C14;--secondary:#7A756D;--muted:#A39D94;
  --panel-bg:#FFFDF8;--border-light:#E6E2DA;--border-med:#D8D2C8;--hover:#F1EFEA;--active-bg:#F5F1E8;
  --reader-bg:#FFFDF8;--reader-text:#201C14;
  --reader-shadow:0 18px 50px -20px rgba(70,60,40,.30), 0 4px 14px -6px rgba(70,60,40,.12);
  --divider:#C9A84B;
  color:var(--text);
}
.frame[data-theme="paper"]{--app-bg:#F7F1E3;--toolbar-bg:#F7F1E3;--panel-bg:#F7F1E3;--reader-bg:#F7F1E3;--text:#2C241B;--reader-text:#2C241B;--secondary:#7C7367;--muted:#A39884;--border-light:#DED4C2;--border-med:#D0C4AC;--hover:#EFE7D4;--active-bg:#ECE3CD;--accent:#D9B24C;--accent-soft:rgba(217,178,76,.30);--divider:#C2A258;}
.frame[data-theme="sepia"]{--app-bg:#EEDFC4;--toolbar-bg:#EEDFC4;--panel-bg:#EEDFC4;--reader-bg:#EEDFC4;--text:#3B2E22;--reader-text:#3B2E22;--secondary:#7B6855;--muted:#9C8870;--border-light:#D8C2A2;--border-med:#CBB38C;--hover:#E7D6B6;--active-bg:#E5D2AE;--accent:#C89A4A;--accent-soft:rgba(200,154,74,.30);--divider:#B08D3F;}
.frame[data-theme="focus"]{--app-bg:#ECEFE8;--toolbar-bg:#ECEFE8;--panel-bg:#ECEFE8;--reader-bg:#ECEFE8;--text:#243027;--reader-text:#243027;--secondary:#6F786F;--muted:#9AA096;--border-light:#D8DED4;--border-med:#C8CFC2;--hover:#E2E6DD;--active-bg:#DFE4DA;--accent:#A8B88A;--accent-soft:rgba(168,184,138,.34);--divider:#8FA07A;}
.frame[data-theme="dark"]{
  --app-bg:#151515;--toolbar-bg:#151515;--text:#F4F1EA;--secondary:#B8B2A8;--muted:#7E786E;
  --panel-bg:#1F1F1F;--border-light:rgba(255,255,255,.12);--border-med:rgba(255,255,255,.16);
  --hover:rgba(255,255,255,.06);--active-bg:rgba(255,255,255,.09);
  --reader-bg:#1F1F1F;--reader-text:#F4F1EA;--accent:#E3B318;--accent-soft:rgba(227,179,24,.22);
  --reader-shadow:0 18px 50px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  --divider:#C9A84B;
}

/* ============ TOOLBAR ============ */
.toolbar{
  height:84px;flex:none;display:flex;align-items:center;padding:0 30px;
  background:var(--toolbar-bg);border-bottom:1px solid var(--border-light);position:relative;z-index:30;
}
.tb-left{flex:1;display:flex;align-items:center;}
.tb-center{flex:0 0 auto;text-align:center;min-width:0;padding:0 12px;}
.tb-right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.back-btn{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  background:none;border:none;cursor:pointer;color:var(--text);
  font-family:inherit;font-size:16px;font-weight:500;padding:10px 12px;border-radius:10px;
}
.back-btn:hover{background:var(--hover);}
.back-btn svg{width:22px;height:22px;}
.back-ico-mob{display:none;}   /* desktop: left-arrow; mobile: down-chevron */
.book-title{font-size:18px;font-weight:600;color:var(--text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw;}
.book-author{font-size:13.5px;color:var(--secondary);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw;}
.hdr-mob{display:none;}   /* desktop shows the book (hdr-web); mobile shows the epub (hdr-mob) */

.tool-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;color:var(--text);
  font-family:inherit;font-size:12px;font-weight:500;padding:8px 14px 7px;border-radius:12px;position:relative;min-width:64px;
}
.tool-btn:hover{background:var(--hover);}
.tool-btn svg{width:24px;height:24px;}
.tool-btn .aa{font-size:23px;line-height:24px;font-weight:500;letter-spacing:-.02em;}
.tool-btn span{white-space:nowrap;}
.tool-btn.active::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-7px;width:34px;height:3px;border-radius:3px;background:var(--accent);
}

/* ============ BODY ============ */
.body{flex:1;display:flex;min-height:0;position:relative;}

/* reader area */
.reader-area{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:16px 52px;overflow:hidden;position:relative;}
.page-nav{
  position:absolute;top:0;bottom:0;width:54px;border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:.45;z-index:20;
  transition:opacity .2s,color .2s;
}
.page-nav.prev{left:8px;}
.page-nav.next{right:8px;}
.page-nav:hover{opacity:1;color:var(--text);}
.page-nav svg{width:30px;height:30px;}
.page-nav:active svg{transform:scale(.86);}
.reader-card{
  background:var(--reader-bg);border:1px solid var(--border-light);border-radius:14px;
  box-shadow:var(--reader-shadow);
  width:100%;max-width:820px;height:100%;overflow:hidden;position:relative;
  /* NO max-width transition: on a resize the card must snap to its final width
     BEFORE the debounced re-mount measures it. Animating it left the re-mount
     reading a mid-transition width → epub.js paginated wrong and went blank. */
}
.reader-area[data-layout="two"] .reader-card{max-width:1320px;}
/* Two-page spread: the breathing room (prototype card padding) is applied as the
   epub BODY padding in registerThemes (pre-layout), NOT as an epub-view inset —
   insetting the iframe after epub.js measured threw off its page translation and
   bled the previous page's column in on the left. The centre divider is epub.js's
   own column-rule, painted by the column engine exactly in the gutter. */

/* epub.js mount */
.epub-view{position:absolute;inset:0;width:100%;height:100%;}
.epub-view iframe{border:0;}

/* loader overlay */
.epub-loader{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:var(--reader-bg);z-index:4;color:var(--secondary);font-size:14px;
}
.epub-loader.hidden{display:none;}
.epub-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border-med);border-top-color:var(--accent);animation:rspin .8s linear infinite;}
@keyframes rspin{to{transform:rotate(360deg);}}

/* ============ LEFT DRAWER (Contents / Search) ============ */
.drawer{flex:none;width:0;overflow:hidden;background:var(--panel-bg);border-right:1px solid var(--border-light);display:flex;flex-direction:column;position:relative;z-index:25;}
.frame[data-left-open="1"] .drawer{width:360px;box-shadow:18px 0 40px -18px rgba(40,34,22,.18);}
.drawer-inner{width:360px;flex:1;display:flex;flex-direction:column;min-height:0;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px 22px 18px;border-bottom:1px solid var(--border-light);}
.drawer-head h2{font-size:18px;font-weight:600;color:var(--text);}
.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:none;background:none;cursor:pointer;color:var(--secondary);}
.icon-btn:hover{background:var(--hover);color:var(--text);}
.icon-btn svg{width:20px;height:20px;}
/* panel close buttons (Reading Settings / Contents-Search) = a filled light-grey
   circle, like a dismiss button */
.settings-head .icon-btn,.drawer-head .icon-btn{background:var(--border-light);border-radius:50%;}
.settings-head .icon-btn:hover,.drawer-head .icon-btn:hover{background:var(--border-med);color:var(--text);}
.drawer-body{flex:1;overflow-y:auto;padding:10px 16px 20px;}
.drawer-body::-webkit-scrollbar{width:8px;}
.drawer-body::-webkit-scrollbar-thumb{background:var(--border-med);border-radius:8px;}

/* contents list */
.toc-item{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:11px;cursor:pointer;color:var(--text);position:relative;}
.toc-item:hover{background:var(--active-bg);}
.toc-item .ic{color:var(--muted);display:flex;flex:none;}
.toc-item .ic svg{width:19px;height:19px;}
.toc-item .t{font-size:15px;font-weight:500;flex:1;}
.toc-item.active{background:var(--active-bg);}
.toc-item.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent);}
.toc-item.active .ic{color:var(--accent);}
.toc-item.active .t{font-weight:600;}

/* list item (search results) */
.list-item{display:flex;align-items:flex-start;gap:13px;padding:15px 30px 15px 14px;border-radius:11px;cursor:pointer;position:relative;}
.list-item:hover{background:var(--hover);}
.list-item .ic{color:var(--muted);flex:none;margin-top:1px;}
.list-item .ic svg{width:20px;height:20px;}
.list-item:hover .ic{color:var(--accent);}
.list-item .body-col{flex:1;min-width:0;}
.list-item .li-title{font-size:14.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.list-item .li-snippet{font-size:13.5px;color:var(--secondary);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.list-item .li-snippet mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px;}
.list-item .chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted);flex:none;pointer-events:none;}
.list-item .chev svg{width:18px;height:18px;}
.li-divider{height:1px;background:var(--border-light);margin:0 14px;}

/* search input */
.search-input-wrap{display:flex;align-items:center;gap:10px;margin:8px 0 6px;padding:0 14px;height:46px;background:var(--app-bg);border:1.5px solid var(--border-med);border-radius:11px;}
.search-input-wrap.focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.search-input-wrap svg{width:19px;height:19px;color:var(--muted);flex:none;}
.search-input-wrap input{flex:1;border:none;background:none;outline:none;font-family:inherit;font-size:15px;color:var(--text);}
.search-clear{border:none;background:var(--border-med);cursor:pointer;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:var(--panel-bg);}
.search-clear svg{width:13px;height:13px;}
.search-count{font-size:13px;color:var(--secondary);padding:14px 4px 4px;}
.search-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 28px;color:var(--muted);}
.search-empty svg{width:38px;height:38px;margin-bottom:14px;color:var(--border-med);}
.search-empty .se-title{font-size:15px;font-weight:600;color:var(--secondary);margin-bottom:6px;}
.search-empty .se-sub{font-size:13px;color:var(--muted);line-height:1.5;}

/* ============ RIGHT SETTINGS PANEL ============ */
.settings{flex:none;width:0;overflow:hidden;background:var(--panel-bg);border-left:1px solid var(--border-light);position:relative;z-index:25;}
.frame[data-right-open="1"] .settings{width:360px;box-shadow:-18px 0 40px -18px rgba(40,34,22,.18);}
.settings-inner{width:360px;height:100%;overflow-y:auto;padding:26px 24px 30px;}
.settings-inner::-webkit-scrollbar{width:8px;}
.settings-inner::-webkit-scrollbar-thumb{background:var(--border-med);border-radius:8px;}
.settings-head{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--border-light);}
.settings-head h2{font-size:19px;font-weight:600;color:var(--text);}
.sec-title{font-size:14px;font-weight:600;color:var(--text);margin:28px 0 14px;}
.sec-title-main{font-size:16px;font-weight:600;margin:24px 0 4px;}
.sec-sub{font-size:13px;color:var(--secondary);margin-bottom:16px;}

.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.theme-card{cursor:pointer;text-align:center;}
.theme-swatch{height:92px;border-radius:13px;border:2px solid var(--border-light);display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .15s, box-shadow .15s;}
.theme-card.active .theme-swatch{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.theme-card .check{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--accent);display:none;align-items:center;justify-content:center;color:#fff;}
.theme-card.active .check{display:flex;}
.theme-card.active .check svg{width:13px;height:13px;}
.theme-name{font-size:13px;font-weight:500;color:var(--secondary);margin-top:16px;}
.theme-card.active .theme-name{color:var(--text);}
.theme-swatch .sw-inner{display:flex;flex-direction:column;align-items:center;gap:10px;}
.theme-swatch .sw-aa{font-family:'Literata',Georgia,serif;font-size:28px;font-weight:500;line-height:1;}
.theme-swatch .sw-name{display:none;}   /* desktop shows the name below; mobile shows it inside the card */
.theme-swatch .sw-lines{display:flex;flex-direction:column;gap:5px;align-items:center;}
.theme-swatch .sw-lines i{display:block;height:3px;border-radius:2px;background:currentColor;opacity:.5;}
.theme-swatch .sw-lines i:nth-child(1){width:42px;}
.theme-swatch .sw-lines i:nth-child(2){width:34px;}
.theme-swatch .sw-lines i:nth-child(3){width:40px;}
.sw-dark .sw-lines i{opacity:.85;}
.sw-focus .sw-lines i{opacity:.7;}
.sw-original{background:#FFFDF8;color:#201C14;}
.sw-paper{background:#F7F1E3;color:#2C241B;}
.sw-sepia{background:#EEDFC4;color:#3B2E22;}
.sw-dark{background:#1F1F1F;color:#E3B318;}
.sw-focus{background:#ECEFE8;color:#6F786F;}

.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;}
.fontsize-control{display:flex;align-items:stretch;background:var(--app-bg);border:1px solid var(--border-med);border-radius:13px;height:62px;overflow:hidden;}
.fontsize-control .fs-btn{flex:1;border:none;background:none;cursor:pointer;color:var(--text);font-family:inherit;display:flex;align-items:center;justify-content:center;line-height:1;}
.fontsize-control .fs-btn:hover{background:var(--hover);}
.fontsize-control .fs-btn:active{background:var(--active-bg);}
.fontsize-control .fs-divider{width:1px;background:var(--border-med);flex:none;}
.fontsize-control .fs-a-sm{font-size:17px;font-weight:600;}
.fontsize-control .fs-a-lg{font-size:30px;font-weight:600;}
.fs-dots{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;padding:0 4px;}
.fs-dots i{width:6px;height:6px;border-radius:50%;background:var(--border-med);transition:background .15s,transform .15s;}
.fs-dots i.on{background:var(--accent);}
.fs-dots i.cur{transform:scale(1.5);background:var(--accent);}

.segmented{flex:1;display:flex;background:var(--app-bg);border:1px solid var(--border-med);border-radius:10px;padding:4px;gap:4px;}
.segmented button{flex:1;border:none;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--secondary);padding:9px 4px;border-radius:7px;}
.segmented button.active{background:var(--active-bg);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.frame[data-theme="dark"] .segmented button.active{background:rgba(255,255,255,.14);}

/* ============ PROGRESS BAR ============ */
.progress{height:78px;flex:none;display:flex;align-items:center;gap:26px;padding:0 38px;background:var(--toolbar-bg);border-top:1px solid var(--border-light);z-index:30;}
.progress .pg-chapter{font-size:13.5px;color:var(--secondary);flex:none;font-weight:500;max-width:30%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.progress .pg-info{font-size:13.5px;color:var(--secondary);flex:none;font-weight:500;}
.pg-track{flex:1;height:5px;border-radius:5px;background:var(--border-med);position:relative;cursor:pointer;}
.pg-tooltip{position:absolute;bottom:20px;left:0;transform:translateX(-50%);background:#3a362e;color:#fff;font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;}
.frame[data-theme="dark"] .pg-tooltip{background:#2a2a2a;border:1px solid rgba(255,255,255,.12);}
.pg-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#3a362e;}
.frame[data-theme="dark"] .pg-tooltip::after{border-top-color:#2a2a2a;}
.pg-track:hover .pg-tooltip{opacity:1;}
.pg-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--accent);width:0;}
.pg-knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.3);left:0;}

/* ============ MORE POPOVER ============ */
.popover{position:absolute;top:78px;right:30px;z-index:50;background:var(--panel-bg);border:1px solid var(--border-light);border-radius:14px;box-shadow:0 24px 50px -16px rgba(40,34,22,.30),0 6px 16px -8px rgba(40,34,22,.2);padding:8px;width:262px;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;}
.popover.open{opacity:1;transform:none;pointer-events:auto;}
.pop-item{display:flex;align-items:center;gap:15px;width:100%;border:none;background:none;cursor:pointer;font-family:inherit;font-size:15px;color:var(--text);padding:13px 14px;border-radius:10px;text-align:left;text-decoration:none;}
.pop-item:hover{background:var(--hover);}
.pop-item svg{width:20px;height:20px;color:var(--secondary);flex:none;}
.pop-sep{height:1px;background:var(--border-light);margin:6px 12px;}

/* scrim */
#scrim{position:absolute;inset:0;z-index:15;display:none;}
#scrim.open{display:block;}

/* toast */
#toast{position:absolute;bottom:96px;left:50%;transform:translateX(-50%) translateY(20px);min-width:280px;max-width:440px;background:#3a362e;color:#fff;font-size:14.5px;font-weight:500;padding:15px 20px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;box-shadow:0 14px 34px -8px rgba(0,0,0,.45);text-align:center;}
.frame[data-theme="dark"] #toast{background:#2e2e2e;border:1px solid rgba(255,255,255,.12);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}

/* ============ SELECTION MENU ============ */
#selMenu{position:absolute;z-index:80;background:var(--panel-bg);border:1px solid var(--border-light);border-radius:16px;box-shadow:0 24px 50px -16px rgba(40,34,22,.32),0 6px 16px -8px rgba(40,34,22,.2);padding:8px;width:212px;opacity:0;transform:translateY(6px) scale(.97);transform-origin:top center;pointer-events:none;}
#selMenu.open{opacity:1;transform:none;pointer-events:auto;}
#selMenu .sm-item{display:flex;align-items:center;gap:14px;width:100%;border:none;background:none;cursor:pointer;font-family:inherit;font-size:14.5px;color:var(--text);padding:11px 12px;border-radius:10px;text-align:left;}
#selMenu .sm-item:hover{background:var(--hover);}
#selMenu .sm-item svg{width:19px;height:19px;color:var(--secondary);flex:none;}

/* contents "finished/read" check */
.toc-item .toc-check{flex:none;display:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--reader-bg);margin-left:auto;}
.toc-item.done .toc-check{display:flex;}
.toc-item.done .ic{color:var(--accent);}
.toc-item .toc-check svg{width:12px;height:12px;}

/* search result chapter label */
.list-item .li-meta{font-size:12.5px;color:var(--muted);margin-top:6px;}

/* ============================================================
   MOBILE (<900px) — same DOM, responsive: the top toolbar compacts to an
   icon bar and the side drawer / settings / more panels become bottom sheets,
   matching the mobile reader prototype. Works on a live desktop↔mobile resize.
   ============================================================ */
@media (max-width:899px){
  /* mobile: full-screen reader (no backdrop card) — fixed inset:0 guarantees
     it fills the whole viewport regardless of body layout/device. */
  body{display:block;background:var(--app-bg);}
  .frame{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;border-radius:0;box-shadow:none;}

  /* compact top bar: fixed-width sides, the title shrinks so all tools fit */
  .toolbar{height:58px;padding:0 2px;}
  .tb-left{flex:0 0 auto;}
  .tb-center{flex:1 1 auto;min-width:0;text-align:left;padding:0 6px;}
  .tb-right{flex:0 0 auto;gap:0;}
  .back-btn{padding:7px;gap:0;}
  .back-btn svg{width:22px;height:22px;}
  .back-btn span{display:none;}
  .back-ico-web{display:none;}              /* mobile back = down-chevron (dismiss) */
  .back-ico-mob{display:inline;}
  .hdr-web{display:none;}
  .hdr-mob{display:block;}
  .book-title{font-size:14.5px;max-width:none;}
  .book-author{display:block;font-size:11.5px;margin-top:1px;max-width:none;}  /* epub author under the title */
  .tool-btn{min-width:0;padding:6px;}
  .tool-btn svg{width:22px;height:22px;}
  .tool-btn span:not(.aa){display:none;}   /* hide text labels, keep the "Aa" icon */
  .tool-btn .aa{display:inline;font-size:21px;line-height:21px;}
  .tool-btn.active::after{bottom:-3px;}
  /* touch: kill the native tap flash on every control, and drop the :hover/:active
     press backgrounds (they "stick" after a tap on touch). Selected states use the
     .active CLASS, so they are unaffected. */
  .frame *{-webkit-tap-highlight-color:transparent;}
  .tool-btn:hover, .tool-btn:active, .back-btn:hover, .back-btn:active,
  .icon-btn:hover, .icon-btn:active, .pop-item:hover, .pop-item:active,
  .list-item:hover, .list-item:active, .toc-item:hover, .toc-item:active,
  .fs-btn:hover, .fs-btn:active{background:none;}
  .list-item:hover .ic{color:var(--muted);}

  /* reader fills the screen edge-to-edge */
  .reader-area{padding:0;}
  .reader-card{max-width:100%;height:100%;border:none;border-radius:0;box-shadow:none;}
  .reader-area[data-layout="two"] .reader-card{max-width:100%;}
  /* mobile renders single full-screen even when the saved layout is "two" — no
     inset (the column-rule simply has no gutter to paint in single flow) */
  .reader-area[data-layout="two"] .epub-view{inset:0;width:100%;height:100%;}
  /* wide edge tap zones (~30% each) for thumb page-turns; NO visible arrows and
     NO press effect on mobile */
  .page-nav{width:30%;opacity:0;}
  .page-nav svg{display:none;}
  .page-nav:hover,.page-nav:active{opacity:0;background:none;}
  .page-nav:active svg{transform:none;}

  /* left drawer + right settings → bottom sheets */
  .drawer,.settings{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;max-height:84%;
    border:none;border-radius:22px 22px 0 0;
    transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
    z-index:60;box-shadow:0 -16px 50px -16px rgba(40,34,22,.4);
  }
  .frame[data-left-open="1"] .drawer,
  .frame[data-right-open="1"] .settings{width:100%;transform:translateY(0);box-shadow:0 -16px 50px -16px rgba(40,34,22,.4);}
  .drawer-inner{width:100%;max-height:84vh;}
  .settings-inner{width:100%;}
  .drawer::before,.settings::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:38px;height:5px;border-radius:5px;background:var(--border-med);z-index:3;}
  .drawer-head,.settings-head{padding-top:22px;}

  /* the #scrim lives inside .body and only dims the reader; make it cover
     the whole frame on mobile so sheets read as modal */
  #scrim{position:fixed;}

  /* More popover → bottom sheet */
  .popover{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;border-radius:22px 22px 0 0;padding:18px 10px 26px;transform:translateY(100%);opacity:1;transform-origin:bottom;}
  .popover.open{transform:translateY(0);opacity:1;}
  .popover::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:38px;height:5px;border-radius:5px;background:var(--border-med);}
  .pop-item{font-size:16px;padding:15px 16px;}

  /* two-column layout is desktop-only */
  .set-layout{display:none;}

  /* Appearance theme cards (match prototype): 3 per row, Dark/Focus centred,
     name INSIDE the rounded card, no check badge, dark border on the active one */
  .theme-grid{grid-template-columns:repeat(6,1fr);gap:14px;}
  .theme-card{grid-column:span 2;}
  .theme-card:nth-child(4){grid-column:2 / span 2;}
  .theme-card:nth-child(5){grid-column:4 / span 2;}
  .theme-swatch{height:auto;aspect-ratio:1 / 1.04;border-radius:22px;border-width:2.5px;}
  .theme-swatch .sw-inner{gap:4px;}
  .theme-swatch .sw-lines{display:none;}
  .theme-swatch .sw-aa{font-size:40px;}
  .theme-swatch .sw-name{display:block;font-size:15px;font-weight:500;}
  .theme-card.active .theme-swatch{border-color:var(--text);box-shadow:none;}
  .theme-card .check, .theme-card.active .check{display:none;}   /* no check badge on mobile */
  .theme-name{display:none;}          /* name is shown inside the card */

  /* Appearance order on mobile (like the prototype): Font Size first, then the
     theme cards; the "Page Theme" sub-description is dropped. */
  .settings-inner{display:flex;flex-direction:column;}
  .settings-inner .settings-head{order:0;}
  .settings-inner .sec-sub{display:none;}
  /* hide the "Font Size" + "Page Theme" sub-headings on mobile (match the image) */
  .settings-inner .sec-title{display:none;}
  .settings-inner .fontsize-control{order:2;}
  .settings-inner .fs-dots{order:3;}
  /* space between the font-size area and the theme cards (the hidden headings
     used to provide this gap) */
  .settings-inner #themeGrid{order:5;margin-top:26px;}
  .settings-inner .set-layout{order:6;}

  /* progress: full-width track on top, "X / N" centred, "% left" pinned right */
  .progress{flex-direction:column;align-items:stretch;height:auto;gap:0;padding:12px 24px 20px;}
  .progress .pg-chapter{display:none;}
  /* flex:none + explicit height — in a flex COLUMN the desktop flex:1 (basis 0)
     would collapse the track to 0 height (it was invisible on mobile). */
  .progress .pg-track{flex:none;height:5px;width:100%;}
  .progress .pg-info{position:relative;display:flex;justify-content:center;width:100%;margin-top:13px;font-size:13px;}
  .progress .pg-sep{display:none;}
  .progress #pgTime{position:absolute;right:0;top:0;color:var(--muted);}

  #selMenu{width:200px;}

  /* ---- immersive reading: tap the page centre to fade the header + progress
     away and give the text the whole screen; tap again to bring them back. The
     frame is a flex column, so collapsing these lets the reader (flex:1) grow;
     the JS re-paginates once the transition settles. ---- */
  .toolbar{transition:height .3s ease, opacity .24s ease;}
  .progress{max-height:130px;transition:max-height .3s ease, opacity .24s ease, padding .3s ease;}
  .frame[data-immersive="1"] .toolbar{height:0;opacity:0;overflow:hidden;border:none;pointer-events:none;}
  .frame[data-immersive="1"] .progress{max-height:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;border:none;pointer-events:none;}
}