/* ============================================================
   PDF-Reader — 技術檔案庫 / 閱讀終端
   Palette: graphite base, paper hero, signal amber for state
   ============================================================ */
:root{
  --ink:#0C0E12;
  --surface:#14171D;
  --surface-2:#1A1E26;
  --surface-3:#222731;
  --line:#242A34;
  --line-soft:#1C212A;
  --text:#E6E9EF;
  --text-dim:#98A2B2;
  --text-faint:#5D6878;
  --signal:#E9A93C;          /* 狀態：完成 / 主要動作 */
  --signal-dim:rgba(233,169,60,0.16);
  --signal-line:rgba(233,169,60,0.36);
  --live:#5BC8B8;            /* 狀態：閱讀中 */
  --live-dim:rgba(91,200,184,0.16);
  --paper:#FFFFFF;
  --display:'Space Grotesk', -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0; height:100%;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--signal-dim); color:var(--text);}
button{font-family:inherit;}
.hidden{display:none !important;}
:focus-visible{outline:2px solid var(--signal); outline-offset:2px;}

/* ============ Buttons ============ */
.btn{
  font-size:13px; font-weight:500; border-radius:7px; cursor:pointer;
  padding:8px 14px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text);
  display:inline-flex; align-items:center; gap:7px;
  transition:background .14s, border-color .14s;
}
.btn:hover{background:var(--surface-3); border-color:#2F3644;}
.btn.primary{background:var(--signal); color:#1A1204; border-color:transparent; font-weight:600;}
.btn.primary:hover{background:#F2B750;}
.btn.ghost{background:transparent;}
.btn.ghost:hover{background:var(--surface-2);}
.btn.small{padding:6px 11px; font-size:12px;}
.btn:disabled{opacity:.38; cursor:not-allowed;}
.icon-btn{
  width:32px; height:32px; border-radius:7px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:.14s; flex:none;
}
.icon-btn:hover{color:var(--text); border-color:#2F3644;}
.icon-btn.on{color:var(--signal); border-color:var(--signal-line); background:var(--signal-dim);}

/* ============ Top bar ============ */
.screen{min-height:100vh; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 22px; height:56px; flex:none;
  border-bottom:1px solid var(--line-soft);
  background:var(--surface);
}
.brand{display:flex; align-items:center; gap:9px; flex:none;}
.brand-mark{width:22px; height:22px; display:block;}
.brand-name{
  font-family:var(--display); font-size:15px; font-weight:700;
  letter-spacing:-.01em; color:var(--text);
}
.topbar-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.source-tag{
  font-family:var(--mono); font-size:11px; color:var(--text-faint);
  max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-right:4px;
}
.more-wrap{position:relative;}
.more-menu{
  position:absolute; right:0; top:calc(100% + 7px); z-index:60;
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
  min-width:160px; padding:5px; box-shadow:0 14px 34px rgba(0,0,0,0.55);
}
.menu-item{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--text); font-size:12.5px; padding:9px 11px; border-radius:6px;
}
.menu-item:hover{background:var(--surface-3);}

/* ============ Gate ============ */
.gate{flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px;}
.gate-card{max-width:430px; width:100%;}
.gate-emblem{width:44px; height:44px; margin-bottom:20px;}
.gate h1{
  font-family:var(--display); font-size:25px; font-weight:700; letter-spacing:-.02em;
  margin:0 0 9px; color:var(--text);
}
.gate p{color:var(--text-dim); font-size:13.5px; line-height:1.7; margin:0 0 26px;}
.source-card{
  border:1px solid var(--line); border-radius:11px;
  background:var(--surface); padding:17px;
}
.source-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:12px;
}
.source-card .btn{width:100%; justify-content:center;}
.source-hint{font-size:11.5px; color:var(--text-faint); line-height:1.65; margin-top:11px;}
.source-divider{
  display:flex; align-items:center; gap:12px; margin:14px 0;
  color:var(--text-faint); font-family:var(--mono); font-size:10.5px;
}
.source-divider::before,.source-divider::after{content:""; flex:1; height:1px; background:var(--line-soft);}
.gate-foot{margin-top:22px; font-size:11.5px; color:var(--text-faint); line-height:1.7;}

/* ============ Shelf ============ */
.shelf-wrap{flex:1; padding:0 22px 60px;}
.shelf-header{
  max-width:1240px; margin:0 auto; padding:26px 0 0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.shelf-title{
  font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em;
  margin:0 0 3px; color:var(--text);
}
.shelf-sub{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); margin:0;}
.shelf-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.search-box{
  background:var(--surface); border:1px solid var(--line); border-radius:7px;
  padding:8px 12px; color:var(--text); font-size:13px; min-width:190px; font-family:inherit;
}
.search-box::placeholder{color:var(--text-faint);}
.search-box:focus{outline:none; border-color:#333B4A;}
.filter-chips{display:flex; gap:5px;}
.chip{
  font-size:12px; padding:6px 11px; border-radius:6px; cursor:pointer; user-select:none;
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  transition:.14s;
}
.chip:hover{color:var(--text); border-color:#2F3644;}
.chip.active{background:var(--signal-dim); border-color:var(--signal-line); color:var(--signal);}
.sort-select{
  background:var(--surface); border:1px solid var(--line); border-radius:7px;
  padding:7px 9px; color:var(--text-dim); font-size:12.5px; font-family:inherit; cursor:pointer;
}
.sort-select option{background:var(--surface-2); color:var(--text);}
.view-toggle{display:flex; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:2px;}
.view-btn{
  width:29px; height:26px; border:none; border-radius:5px; cursor:pointer;
  background:transparent; color:var(--text-faint);
  display:flex; align-items:center; justify-content:center;
}
.view-btn svg{fill:currentColor;}
.view-btn:hover{color:var(--text);}
.view-btn.active{background:var(--surface-3); color:var(--signal);}

/* overall bar */
.shelf-overall{max-width:1240px; margin:18px auto 0; display:flex; align-items:center; gap:13px;}
.overall-track{flex:1; height:3px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
.overall-fill{height:100%; background:var(--signal); transition:width .45s cubic-bezier(.4,0,.2,1);}
.overall-label{font-family:var(--mono); font-size:11px; color:var(--text-faint); white-space:nowrap;}

/* continue reading */
.continue-section{max-width:1240px; margin:26px auto 0;}
.section-head{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:11px;
}
.continue-row{display:flex; gap:9px; overflow-x:auto; padding-bottom:5px;}
.continue-row::-webkit-scrollbar{height:5px;}
.continue-row::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:99px;}
.cont-card{
  flex:none; width:236px; display:flex; gap:11px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:10px; color:var(--text); transition:.14s;
}
.cont-card:hover{background:var(--surface-2); border-color:#2F3644;}
.cont-thumb{
  width:31px; height:42px; flex:none; border-radius:2px; overflow:hidden;
  background:var(--surface-3); position:relative;
}
.cont-thumb .thumb-layer{position:absolute; inset:0; background-size:cover; background-position:top center; opacity:0; transition:opacity .3s;}
.cont-card.has-thumb .thumb-layer{opacity:1;}
.cont-main{flex:1; min-width:0;}
.cont-title{
  font-size:12.5px; line-height:1.4; margin-bottom:6px; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cont-meta{font-family:var(--mono); font-size:10px; color:var(--text-faint); margin-bottom:6px;}
.cont-track{height:2px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
.cont-track span{display:block; height:100%; background:var(--live);}

.tag-filter{max-width:1240px; margin:18px auto 0; flex-wrap:wrap;}

/* ============ List view ============ */
.shelf-list{max-width:1240px; margin:20px auto 0; display:flex; flex-direction:column;}
.book-row{
  display:flex; align-items:center; gap:14px; cursor:pointer;
  padding:11px 12px; border-bottom:1px solid var(--line-soft);
  transition:background .12s;
}
.book-row:first-child{border-top:1px solid var(--line-soft);}
.book-row:hover{background:var(--surface);}
.row-dot{width:6px; height:6px; border-radius:50%; flex:none; background:var(--text-faint);}
.book-row.reading .row-dot{background:var(--live); box-shadow:0 0 0 3px var(--live-dim);}
.book-row.done .row-dot{background:var(--signal); box-shadow:0 0 0 3px var(--signal-dim);}
.row-thumb{
  width:30px; height:41px; flex:none; border-radius:2px; overflow:hidden;
  background:var(--surface-2); position:relative; border:1px solid var(--line-soft);
}
.row-thumb .thumb-layer{position:absolute; inset:0; background-size:cover; background-position:top center; opacity:0; transition:opacity .3s;}
.book-row.has-thumb .thumb-layer{opacity:1;}
.row-main{flex:1; min-width:0;}
.row-title{
  font-size:13.5px; line-height:1.45; color:var(--text); margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.book-row.done .row-title{color:var(--text-dim);}
.row-meta{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.row-track{width:104px; height:2px; border-radius:99px; background:var(--surface-3); overflow:hidden; flex:none;}
.row-fill{display:block; height:100%; background:var(--live);}
.row-fill.done{background:var(--signal);}
.row-pages{font-family:var(--mono); font-size:10.5px; color:var(--text-faint);}
.row-bm{font-family:var(--mono); font-size:10.5px; color:var(--signal); flex:none;}
.row-tag{
  font-family:var(--mono); font-size:10px; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--line-soft);
  padding:1px 6px; border-radius:4px; flex:none;
}
.row-pct{
  font-family:var(--mono); font-size:11.5px; color:var(--text-dim);
  flex:none; width:46px; text-align:right;
}
.book-row.done .row-pct{color:var(--signal);}

/* ============ Grid view ============ */
.shelf-grid{
  max-width:1240px; margin:22px auto 0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}
.book{cursor:pointer;}
.book-cover{
  position:relative; border-radius:9px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.book:hover .book-cover{
  transform:translateY(-3px); border-color:#2F3644;
  box-shadow:0 14px 30px rgba(0,0,0,0.5);
}
/* 預覽區：整頁完整顯示，不裁切 */
.book-thumb{
  position:relative; z-index:1; width:100%; aspect-ratio:16/10;
  background-color:#0A0C10;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  opacity:0; transition:opacity .35s ease;
  border-bottom:1px solid var(--line-soft);
}
.book-cover.has-thumb .book-thumb{opacity:1;}
.book-cover:not(.has-thumb) .book-thumb{
  opacity:1;
  background-image:linear-gradient(135deg, var(--surface-2), var(--surface-3));
}
.book-overlay{
  position:relative; z-index:2; padding:12px 14px 13px;
  display:flex; flex-direction:column; gap:9px;
}
.book-title{
  font-size:13.5px; line-height:1.45; font-weight:500; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.book-foot{display:flex; align-items:center; gap:8px;}
.book-dot{width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex:none;}
.book.reading .book-dot{background:var(--live); box-shadow:0 0 0 3px var(--live-dim);}
.book.done .book-dot{background:var(--signal); box-shadow:0 0 0 3px var(--signal-dim);}
.book-pct{font-family:var(--mono); font-size:11px; color:var(--text-dim);}
.book.done .book-pct{color:var(--signal);}
.book-mark{
  position:absolute; top:0; right:16px; width:16px; height:23px; z-index:3;
  background:var(--signal); clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%);
  opacity:0; transform:translateY(-5px); transition:.2s;
}
.book.done .book-mark{opacity:1; transform:translateY(0);}
.shelf-plank{max-width:1240px; margin:0 auto; height:0;}

.empty-state{
  max-width:1240px; margin:36px auto; text-align:center; padding:48px 20px;
  border:1px dashed var(--line); border-radius:11px; color:var(--text-faint); font-size:13px; line-height:1.8;
}
.footer-note{
  max-width:1240px; margin:30px auto 0; font-size:11.5px; color:var(--text-faint);
  text-align:center; line-height:1.7;
}

/* ============ Reader ============ */
.reader{position:fixed; inset:0; z-index:100; background:var(--ink); display:flex; flex-direction:column;}
.reader-top{
  display:flex; align-items:center; gap:10px; padding:0 16px; height:48px; flex:none;
  border-bottom:1px solid var(--line-soft); background:var(--surface);
}
.reader-title{
  flex:1; min-width:0; font-size:13px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mark-done{
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim);
  cursor:pointer; user-select:none; white-space:nowrap;
}
.mark-done input{accent-color:var(--signal);}

.reader-stage{
  position:relative; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.book-open{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.page-face{display:flex; align-items:center; justify-content:center;}
.page-face.flipping{animation:flip .3s ease;}
@keyframes flip{
  0%{opacity:.55; transform:translateX(6px);}
  100%{opacity:1; transform:translateX(0);}
}
@media (prefers-reduced-motion:reduce){ .page-face.flipping{animation:none;} }
.page-inner{position:relative; background:var(--paper); border-radius:2px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);}
.page-inner canvas{display:block;}
.reader-loading{color:var(--text-faint); font-family:var(--mono); font-size:12px;}

/* 側邊翻頁區：大範圍點擊區，滑過才顯示箭頭 */
.nav-zone{
  position:absolute; top:0; bottom:0; width:16%; min-width:64px; z-index:4;
  background:none; border:none; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); opacity:0; transition:opacity .16s;
}
.nav-zone.left{left:0; justify-content:flex-start; padding-left:10px;}
.nav-zone.right{right:0; justify-content:flex-end; padding-right:10px;}
.nav-zone:hover{opacity:1;}
.nav-zone span{
  width:38px; height:38px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:19px;
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
}
.nav-zone:disabled{cursor:default;}
.nav-zone:disabled span{opacity:0;}

.reader-bottom{
  flex:none; padding:9px 18px 13px; border-top:1px solid var(--line-soft); background:var(--surface);
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
/* 招牌元素：頁緣刻度 */
.page-edges{
  display:flex; gap:1.5px; height:16px; width:100%; max-width:620px;
  align-items:stretch; cursor:pointer;
}
.page-edges .tick{
  flex:1; background:var(--surface-3); border-radius:1px;
  transition:background .14s, transform .14s;
}
.page-edges .tick.read{background:var(--signal);}
.page-edges .tick.here{background:var(--paper); transform:scaleY(1.45);}
.page-edges:hover .tick{opacity:.85;}
.page-readout{
  font-family:var(--mono); font-size:11.5px; color:var(--text-dim);
  display:flex; align-items:baseline; gap:5px;
}
.page-readout b{color:var(--text); font-weight:500;}
.page-readout i{color:var(--text-faint); font-style:normal;}

/* text layer */
.textLayer{
  position:absolute; left:0; top:0; overflow:hidden; opacity:.22; line-height:1;
  text-align:initial; transform-origin:0 0;
}
.textLayer span,.textLayer br{color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%;}
.textLayer ::selection{background:rgba(91,160,255,0.4);}

/* bookmarks panel */
.bookmarks-panel{
  position:absolute; left:14px; top:14px; z-index:6;
  width:246px; max-height:calc(100% - 28px); display:flex; flex-direction:column;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,0.6); overflow:hidden;
}
.bm-head{
  padding:11px 13px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint); border-bottom:1px solid var(--line-soft);
}
.bm-list{overflow-y:auto; padding:5px;}
.bm-item{
  width:100%; display:flex; gap:9px; align-items:flex-start; text-align:left;
  background:none; border:none; cursor:pointer; color:var(--text);
  padding:8px 9px; border-radius:6px; font-size:12.5px;
}
.bm-item:hover{background:var(--surface-3);}
.bm-page{font-family:var(--mono); color:var(--signal); flex:none; font-size:11px; padding-top:1px;}
.bm-note{flex:1; min-width:0; color:var(--text-dim); line-height:1.45;}
.bm-empty{padding:20px 12px; text-align:center; color:var(--text-faint); font-size:12px;}

/* ============ Overlays ============ */
.overlay{
  position:fixed; inset:0; z-index:130;
  background:rgba(6,8,11,0.76); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:22px;
}
.browser,.ft-panel{
  width:100%; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 26px 64px rgba(0,0,0,0.6);
}
.browser{max-width:450px; max-height:76vh;}
.ft-panel{max-width:660px; max-height:82vh;}
.browser-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 15px; border-bottom:1px solid var(--line-soft);
}
.browser-roots{display:flex; gap:5px;}
.root-btn{
  font-size:12px; padding:6px 11px; border-radius:6px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim);
}
.root-btn:hover{color:var(--text); border-color:#2F3644;}
.crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:3px;
  padding:10px 15px; border-bottom:1px solid var(--line-soft); font-size:12px;
}
.crumb{background:none; border:none; cursor:pointer; padding:2px 4px; border-radius:4px; color:var(--text-dim); font-size:12px;}
.crumb:hover{color:var(--signal);}
.crumb.current{color:var(--text); font-weight:500;}
.crumb-sep{color:var(--text-faint);}
.browser-list{flex:1; overflow-y:auto; padding:6px;}
.browser-row{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  padding:9px 11px; border-radius:7px; cursor:pointer;
  background:transparent; border:none; color:var(--text); font-size:13px;
}
.browser-row:hover{background:var(--surface-2);}
.folder-ico{fill:var(--signal); flex:none; opacity:.85;}
.browser-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.browser-arrow{color:var(--text-faint); flex:none;}
.browser-empty{padding:26px 14px; text-align:center; color:var(--text-faint); font-size:12.5px;}
.browser-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 15px; border-top:1px solid var(--line-soft);
}
.browser-hint{font-family:var(--mono); font-size:11px; color:var(--text-faint);}

/* full-text search */
.ft-top{display:flex; gap:8px; padding:13px; border-bottom:1px solid var(--line-soft);}
.ft-input{
  flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
  padding:9px 12px; color:var(--text); font-size:13.5px; font-family:inherit;
}
.ft-input::placeholder{color:var(--text-faint);}
.ft-input:focus{outline:none; border-color:#333B4A;}
.ft-indexbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 13px; border-bottom:1px solid var(--line-soft);
}
.index-progress{flex:1; min-width:70px; height:3px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
.index-progress span{display:block; height:100%; width:0%; background:var(--signal); transition:width .2s;}
.index-status{font-family:var(--mono); font-size:10.5px; color:var(--text-faint); flex:1; min-width:150px;}
.ft-results{flex:1; overflow-y:auto; padding:7px;}
.ft-group{margin-bottom:10px;}
.ft-book{
  font-size:11.5px; color:var(--signal); padding:6px 10px; font-weight:500;
}
.ft-item{
  width:100%; display:flex; gap:10px; text-align:left; cursor:pointer;
  background:none; border:none; color:var(--text); padding:8px 10px; border-radius:6px; font-size:12.5px;
}
.ft-item:hover{background:var(--surface-2);}
.ft-page{font-family:var(--mono); color:var(--text-faint); flex:none; font-size:11px; padding-top:1px;}
.ft-snip{flex:1; min-width:0; color:var(--text-dim); line-height:1.55;}
.ft-empty{padding:34px 16px; text-align:center; color:var(--text-faint); font-size:12.5px; line-height:1.9;}
.ft-sub{font-size:11.5px; color:var(--text-faint);}

/* tag modal */
.tag-modal{
  width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:19px;
}
.tag-head{font-family:var(--display); font-size:15px; font-weight:700; margin-bottom:14px;}
.tag-input{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
  padding:9px 12px; color:var(--text); font-size:13.5px; font-family:inherit;
}
.tag-input::placeholder{color:var(--text-faint);}
.tag-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:15px;}

/* toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(6px);
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  padding:9px 16px; border-radius:8px; font-size:12.5px;
  box-shadow:0 12px 30px rgba(0,0,0,0.5);
  z-index:200; opacity:0; pointer-events:none; transition:.22s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* scrollbars */
*::-webkit-scrollbar{width:9px; height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:99px;}
*::-webkit-scrollbar-thumb:hover{background:#2E3541;}

@media (max-width:700px){
  .topbar{height:auto; padding:10px 14px; flex-wrap:wrap; gap:8px;}
  .shelf-wrap{padding:0 14px 50px;}
  .shelf-grid{grid-template-columns:1fr; gap:14px;}
  .bookmarks-panel{left:10px; right:10px; width:auto;}
  .nav-zone{width:22%;}
  .row-track{width:56px;}
  .cont-card{width:190px;}
}


/* ============ Modal shared ============ */
.modal-hint{
  font-size:11.5px; color:var(--text-faint); line-height:1.65; margin:0 0 13px;
}
.note-input{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
  padding:10px 12px; color:var(--text); font-size:13.5px; font-family:inherit;
  resize:vertical; line-height:1.6;
}
.note-input::placeholder{color:var(--text-faint);}
.note-input:focus{outline:none; border-color:#333B4A;}
.panel-title{
  flex:1; font-family:var(--display); font-size:15px; font-weight:700; color:var(--text);
  display:flex; align-items:center;
}

/* ============ Get PDFs ============ */
.src-body{overflow-y:auto; padding:16px 18px 20px;}
.src-lead{font-size:12.5px; color:var(--text-dim); margin:0 0 18px; line-height:1.65;}
.src-group{margin-bottom:20px;}
.src-group:last-child{margin-bottom:0;}
.src-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:9px;
  padding-bottom:7px; border-bottom:1px solid var(--line-soft);
}
.src-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:8px;}
.src-card{
  display:flex; flex-direction:column; gap:3px; text-decoration:none;
  padding:11px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2); transition:.14s;
}
.src-card:hover{background:var(--surface-3); border-color:var(--signal-line);}
.src-name{font-size:13px; font-weight:500; color:var(--text);}
.src-card:hover .src-name{color:var(--signal);}
.src-desc{font-size:11.5px; color:var(--text-faint); line-height:1.5;}

/* ============ Sync state ============ */
.sync-state{
  font-family:var(--mono); font-size:10.5px; color:var(--text-faint);
  background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:5px;
  display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.sync-state::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--text-faint);}
.sync-state.ok{color:var(--live);} .sync-state.ok::before{background:var(--live);}
.sync-state.busy{color:var(--text-dim);} .sync-state.busy::before{background:var(--signal); animation:pulse 1s infinite;}
.sync-state.warn{color:var(--signal);} .sync-state.warn::before{background:var(--signal);}
@keyframes pulse{50%{opacity:.3;}}
@media (prefers-reduced-motion:reduce){ .sync-state.busy::before{animation:none;} }

/* ============ Highlights ============ */
.hl-layer{position:absolute; inset:0; z-index:3; pointer-events:none;}
.hl-rect{
  position:absolute; background:rgba(233,169,60,0.32);
  border-bottom:1.5px solid rgba(233,169,60,0.75);
  border-radius:1px; pointer-events:auto; cursor:pointer;
  transition:background .12s;
}
.hl-rect:hover{background:rgba(233,169,60,0.5);}
.page-edges .tick.marked{box-shadow:inset 0 -6px 0 var(--live);}
.bm-item.is-hl .bm-page{color:var(--live);}

/* ============ Stats ============ */
.stats-panel{
  width:100%; max-width:520px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 26px 64px rgba(0,0,0,0.6);
}
.stats-body{padding:18px;}
.stat-figs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px;}
.stat-fig{
  display:flex; flex-direction:column; gap:5px; align-items:center;
  padding:15px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2);
}
.stat-num{font-family:var(--mono); font-size:24px; font-weight:500; color:var(--signal); line-height:1;}
.stat-cap{font-size:11px; color:var(--text-faint);}
.stat-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:9px;
}
.stat-bars{
  display:flex; align-items:flex-end; gap:3px; height:72px;
  padding:8px 0; border-bottom:1px solid var(--line-soft);
}
.stat-bar{flex:1; background:var(--live); border-radius:2px 2px 0 0; min-height:3px;}
.stat-bar.empty{background:var(--surface-3);}

/* ============ Mobile refinements ============ */
@media (max-width:700px){
  .reader-top{padding:0 10px; gap:6px; height:46px;}
  .reader-title{font-size:12px;}
  .mark-done{font-size:11px;}
  .reader-stage{padding:8px;}
  .reader-bottom{padding:8px 12px 11px;}
  .nav-zone span{display:none;}     /* 手機用滑動翻頁 */
  .stat-figs{gap:7px;}
  .stat-num{font-size:20px;}
  .src-grid{grid-template-columns:1fr;}
  .topbar-actions{gap:6px;}
  .topbar-actions .btn{padding:5px 9px; font-size:11.5px;}
  .shelf-header{padding-top:18px;}
  .shelf-tools{width:100%;}
  .search-box{flex:1; min-width:0;}
}
@media (display-mode: standalone){
  body{overscroll-behavior:none;}
}