/* ---- v13 "pretty" polish: Apple Books / Kindle restraint ---- */
:root{--bg:#f6f3ee;--fg:#1c1a17;--muted:#787166;--card:#fffdfa;--line:#e8e2d8;--acc:#b4552d;--acc2:#f6ebe2;--paper:#fbf9f5;--ink:#1f1c18;
 --shadow:0 1px 1px rgba(60,40,20,.04),0 2px 6px rgba(60,40,20,.05),0 12px 32px -8px rgba(60,40,20,.12);--r:16px;--ease:cubic-bezier(.22,.8,.24,1);
 --serif:"New York","Iowan Old Style","Charter","Source Serif Pro","Palatino Linotype",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif}
[data-theme=sepia]{--bg:#efe6d2;--fg:#4a3a28;--muted:#8a7660;--card:#f8f0de;--line:#e0d3b8;--acc:#9c4f22;--acc2:#ecdcc0;--paper:#f8f1e3;--ink:#5b4636}
[data-theme=dark]{--bg:#0f0f10;--fg:#ece8e1;--muted:#8f8a82;--card:#1a1a1c;--line:#2a2a2d;--acc:#e3956a;--acc2:#2a211b;--paper:#121213;--ink:#d8d2c8;--shadow:0 1px 2px rgba(0,0,0,.5),0 14px 36px -10px rgba(0,0,0,.6)}
html,body{font:16px/1.5 var(--sans);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;transition:background-color .35s var(--ease),color .35s var(--ease)}
button{border-radius:12px;transition:background-color .18s var(--ease),transform .12s var(--ease),box-shadow .18s,border-color .18s}
button:active{transform:scale(.97)}
button.primary{background:var(--acc);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 14px -6px var(--acc)}
button.primary:hover{filter:brightness(1.06)}
input,textarea{border-radius:12px;transition:border-color .18s,box-shadow .18s}
input:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent)}
.card{border-color:color-mix(in srgb,var(--line) 70%,transparent)}
/* login */
.login{padding:40px 32px;gap:14px;animation:rise .5s var(--ease)}.login h1{font-size:38px;letter-spacing:-.02em;font-weight:600}
.logo{font-size:0;width:64px;height:64px;margin:0 auto 4px;border-radius:18px;background:linear-gradient(145deg,var(--acc),color-mix(in srgb,var(--acc) 55%,#2b1408));box-shadow:0 10px 24px -10px var(--acc)}
.logo:after{content:"";display:block;width:26px;height:32px;margin:16px auto;border-radius:2px 5px 5px 2px;background:#fff;opacity:.92;box-shadow:inset 3px 0 0 rgba(0,0,0,.15)}
/* bars */
.bar{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px)}
#library>.bar{border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));min-height:56px}
.brand{font-size:26px;font-weight:600;letter-spacing:-.025em}
.tabs{background:color-mix(in srgb,var(--fg) 6%,transparent);border-radius:11px}
.tab{border-radius:9px;font-weight:500;transition:color .2s,background-color .2s,box-shadow .2s}
.tab.on{box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 8px -2px rgba(0,0,0,.08)}
button.icon{color:color-mix(in srgb,var(--fg) 80%,transparent)}button.icon:hover{background:color-mix(in srgb,var(--fg) 7%,transparent)}
/* library */
.wrap{max-width:1120px;padding:26px 20px calc(48px + env(safe-area-inset-bottom));animation:fade .4s var(--ease)}
.upload{border:1.5px dashed color-mix(in srgb,var(--fg) 16%,transparent);background:transparent;padding:18px 20px;gap:16px}
.upload:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 5%,transparent)}
.upload .big{width:44px;height:44px;border-radius:12px;background:var(--acc2);display:grid;place-items:center;font-size:24px}
.sectionhead{margin:34px 0 16px}.sectionhead h2{font-size:26px;font-weight:600;letter-spacing:-.02em}
.sectionhead input{border-radius:999px;background:color-mix(in srgb,var(--fg) 5%,transparent);border-color:transparent;padding-left:16px}
.books{grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:34px 26px}
@media (max-width:520px){.books{gap:26px 18px}.wrap{padding:18px 16px 48px}}
.book{gap:10px;animation:rise .5s var(--ease) both}
.books .book:nth-child(2){animation-delay:.04s}.books .book:nth-child(3){animation-delay:.08s}.books .book:nth-child(4){animation-delay:.12s}.books .book:nth-child(5){animation-delay:.16s}.books .book:nth-child(n+6){animation-delay:.2s}
.cover{border-radius:3px 8px 8px 3px;box-shadow:0 1px 1px rgba(0,0,0,.08),0 6px 14px -4px rgba(40,25,10,.22),0 22px 40px -18px rgba(40,25,10,.35);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.cover:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.18) 0,rgba(255,255,255,.18) 2.5%,rgba(0,0,0,.06) 5%,transparent 9%),linear-gradient(180deg,rgba(255,255,255,.10),transparent 30%)}
.book:hover .cover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 2px 2px rgba(0,0,0,.08),0 14px 24px -8px rgba(40,25,10,.28),0 34px 50px -20px rgba(40,25,10,.4)}
.book:active .cover{transform:scale(.98)}
.cover .ph{padding:18px 14px 14px 18px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.cover .pbar{height:3px;background:rgba(0,0,0,.28);z-index:3}.cover .pbar i{background:#fff;opacity:.9}
.book .t{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:-.01em}
.book .meta{font-size:12px}.tag{border:0;background:color-mix(in srgb,var(--fg) 7%,transparent);border-radius:5px;padding:1px 6px;font-weight:600}
.book .more{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(20,15,10,.45);z-index:4}
.menu{border-radius:14px;padding:6px;animation:pop2 .14s var(--ease);backdrop-filter:blur(20px)}
.continue{gap:22px;padding:20px 22px;border-radius:20px;background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--acc2) 70%,var(--card)));transition:transform .3s var(--ease),box-shadow .3s;animation:rise .45s var(--ease)}
.continue:hover{transform:translateY(-2px)}
.continue .cover{width:96px}.continue h3{font-size:24px;letter-spacing:-.02em;font-weight:600}
.continue .eyebrow{letter-spacing:.12em;font-size:11px}
.continue .prog{height:5px;background:color-mix(in srgb,var(--fg) 9%,transparent)}.continue .prog i{border-radius:5px;transition:width .8s var(--ease)}
.empty{padding:64px 10px;font-family:var(--serif);font-size:18px}
/* all highlights */
.hlgroup h3{font-size:20px;letter-spacing:-.01em;margin:30px 0 10px}
.chip{border-color:color-mix(in srgb,var(--line) 80%,transparent)}.chip.on{outline-width:2px}
/* reader chrome */
.rbar,.rfoot{background:color-mix(in srgb,var(--paper) 80%,transparent);border-color:color-mix(in srgb,var(--line) 55%,transparent);backdrop-filter:saturate(1.6) blur(22px);-webkit-backdrop-filter:saturate(1.6) blur(22px);transition:transform .35s var(--ease),opacity .3s var(--ease),background-color .35s}
#rTitle{font-family:var(--serif);font-size:16px;letter-spacing:-.01em}
#rChapter{font-size:12px;letter-spacing:.01em}
.progress{height:3px;background:color-mix(in srgb,var(--fg) 9%,transparent)}.progress i{transition:width .5s var(--ease)}
.footrow{font-size:12px;color:var(--muted);letter-spacing:.01em}
#reader{transition:background-color .35s var(--ease);animation:fade .3s var(--ease)}
.page{border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px -12px rgba(40,25,10,.25)}
.page .pno{font-variant-numeric:tabular-nums}
.nav{opacity:.2;font-weight:300}.nav:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.fab{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:opacity .25s,transform .2s var(--ease);animation:pop2 .2s var(--ease)}
/* highlight bars */
.selbar{gap:6px;padding:7px 8px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--card) 86%,transparent);backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px);box-shadow:0 2px 6px rgba(0,0,0,.08),0 18px 40px -12px rgba(0,0,0,.35)}
.floatbar{animation:barIn .2s var(--ease)}
@keyframes barIn{from{opacity:0;transform:translateY(6px) scale(.96)}}
.sw{border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.12);transition:transform .16s var(--ease),box-shadow .16s}
.sw:hover{transform:scale(1.08)}.sw:active{transform:scale(.88)}
.sw.def{box-shadow:0 0 0 2.5px var(--card),0 0 0 4.5px var(--acc)}
.selbar .pill{border:0;background:transparent;font-weight:500;font-size:14px}.selbar .pill:hover{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.floatbar .sep{background:color-mix(in srgb,var(--fg) 12%,transparent)}
.hlLayer i{border-radius:3px;transition:opacity .2s}
/* panel & sheets */
.scrim{background:rgba(10,8,5,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:fade .25s var(--ease)}
.panel{transition:transform .38s var(--ease);border-left-color:color-mix(in srgb,var(--line) 60%,transparent);box-shadow:-20px 0 50px -20px rgba(0,0,0,.25)}
.sheet{transition:transform .4s var(--ease);border-radius:24px 24px 0 0;border-color:color-mix(in srgb,var(--line) 60%,transparent);box-shadow:0 -20px 50px -16px rgba(0,0,0,.3);gap:16px;padding-top:8px}
.grab{width:36px;background:color-mix(in srgb,var(--fg) 18%,transparent)}
.toclist li button{border-radius:10px;font-family:var(--serif);font-size:16px}
.toclist li button.cur{background:var(--acc2)}
.hllist{gap:12px}
.hl,.hl.swipe .swfg{background:var(--card);border-left-width:3px;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .2s var(--ease),box-shadow .2s}
.hl:not(.swipe):hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.hl blockquote{font-size:16.5px;line-height:1.55}
.hl .note{background:color-mix(in srgb,var(--fg) 4%,transparent);font-style:italic}
.hllist .grp{border-bottom:0;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-family:var(--sans);padding-top:14px}
.panel .ptab{background:var(--bg)}
.ptab.on{animation:fade .25s var(--ease)}
.seg{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.seg button{transition:background-color .2s,box-shadow .2s}
.setrow>span{font-weight:500}
#setTheme button[data-v=light]{background:#fbf9f5;color:#1f1c18}#setTheme button[data-v=sepia]{background:#f8f1e3;color:#5b4636}#setTheme button[data-v=dark]{background:#1a1a1c;color:#ece8e1}
#setTheme{gap:6px}#setTheme button{flex:1;border:1px solid rgba(0,0,0,.08)}#setTheme button.on{box-shadow:0 0 0 2px var(--acc)}
.switch i,.switch i:after{transition:.25s var(--ease)}
.toast{border-radius:999px;padding:10px 18px;animation:toastIn .3s var(--ease);box-shadow:0 10px 30px -8px rgba(0,0,0,.4)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}}
.notesheet{z-index:58}.nsquote{border-left-width:3px;background:color-mix(in srgb,var(--fg) 4%,transparent);font-size:17px;line-height:1.5}
.loading{background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--fg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.spin{border-color:color-mix(in srgb,var(--fg) 15%,transparent);border-top-color:var(--acc)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media (max-width:700px),(hover:none){
  .pbtn{font-size:18px;color:color-mix(in srgb,var(--fg) 82%,transparent);transition:background-color .15s,transform .12s}
  .pbtn small{font-size:10.5px;font-weight:500;letter-spacing:.01em}
  .pbtn.mark.on{color:var(--acc)}
  .rfoot{gap:6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}