:root{font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif;color:#263d30;background:#f5f7f3}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #5d8b57;outline-offset:4px}.books-shell{max-width:720px;margin:auto;padding:22px 20px 130px}header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;margin-bottom:24px}header a{font-size:30px}h1{font-size:23px;text-align:center;font-weight:600;margin:0}#booksStatus{color:#899383;font-size:13px;text-align:center;line-height:1.8}#myBooks{display:grid;gap:18px}.book-card{position:relative;display:flex;gap:20px;align-items:stretch;background:white;border:1px solid #e2e7de;border-radius:23px;padding:22px;box-shadow:0 3px 12px #283d3003}.book-link{display:flex;gap:20px;flex:1;min-width:0}.book-cover{width:102px;aspect-ratio:10/14;flex-shrink:0;border-radius:10px;overflow:hidden;background:linear-gradient(145deg,#e2edda,#a9c39e);display:grid;place-items:center;color:#456c3e}.book-cover img{width:100%;height:100%;object-fit:cover}.book-cover span{font-size:22px;writing-mode:vertical-rl;letter-spacing:5px}.book-copy{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding-top:20px}.book-copy h2{font-size:20px;line-height:1.5;margin:0 0 22px;color:#263d30;overflow-wrap:anywhere}.book-progress{height:9px;background:#f0f3ed;border-radius:20px;overflow:hidden}.book-progress span{display:block;height:100%;border-radius:20px;background:#94b77d}.book-stats{display:flex;justify-content:space-between;gap:8px;color:#8b9585;font-size:12px;line-height:1.6;margin-top:10px;flex-wrap:wrap}.book-stats b{color:#6b855c;font-weight:500}.book-current{position:absolute;right:0;top:0;border-radius:0 22px 0 15px;padding:7px 17px;background:#d9ebc9;color:#53733e;font-size:11px}.book-remove{position:absolute;right:17px;top:15px;color:#96a090;background:transparent;border:0;font-size:11px;padding:4px}.book-current+.book-remove{top:auto;bottom:8px}.add-dock{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(#f5f7f300,#f5f7f3 24%);padding:25px 22px max(22px,env(safe-area-inset-bottom));z-index:2}.add-dock a{display:block;max-width:650px;margin:auto;padding:17px;text-align:center;border-radius:18px;background:#c9dfb5;color:#34562b;font-weight:650;font-size:19px;box-shadow:0 4px #afca98}[hidden]{display:none!important}@media(max-width:440px){.books-shell{padding:18px 14px 130px}.book-card{padding:17px 14px;gap:13px;border-radius:18px}.book-link{gap:13px}.book-cover{width:76px;border-radius:8px}.book-copy h2{font-size:16px;margin-bottom:15px}.book-stats{font-size:10px}.book-current{border-top-right-radius:17px;padding:5px 12px}.book-copy{padding-top:17px}}

.book-copy h2{margin-bottom:5px}.book-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;color:#9aa392;font-size:11px;line-height:1.6;margin:0 0 13px}.book-description:empty{display:none}.book-remove{display:inline-flex;align-items:center;gap:4px}.book-remove svg{flex-shrink:0}.book-stats>span{display:inline-flex;align-items:center;gap:5px}.book-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}.book-dot-light{background:#bed9a8}.book-dot-dark{background:#467644}@media(max-width:440px){.book-copy h2{margin-bottom:4px}.book-description{font-size:10px;margin-bottom:10px}.book-stats>span{gap:4px}.book-dot{width:6px;height:6px}}

/* Reference layout: cover, title and remove, description, progress, statistics. */
.book-card{--cover-width:76px;--cover-height:106.4px;padding:15px 18px;border-radius:23px}
.book-link{align-items:stretch;gap:12px}
.book-cover{width:var(--cover-width);height:var(--cover-height);aspect-ratio:5/7;align-self:center;border-radius:10px}
.book-cover img{object-fit:cover}
.book-cover span{font-size:17px;letter-spacing:3px}
.book-copy{height:var(--cover-height);padding:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:24px 1fr 6px 23px;min-width:0;overflow:hidden;align-content:stretch;justify-content:stretch;justify-items:stretch;text-align:left}
.book-copy h2{font-size:18px;font-weight:650;line-height:24px;margin:0;padding-right:55px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-description{display:flex;align-items:center;height:auto;min-height:0;font-size:13px;line-height:1.4;margin:0;padding:2px 0 5px;overflow:hidden;-webkit-line-clamp:unset}
.book-description-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.4;margin:0;width:100%;font:inherit;color:inherit}
.book-progress{height:6px;margin:0;background:#edf1e9}
.book-stats{margin:0;padding-top:6px;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:6px;font-size:12px;line-height:17px}
.book-stats>span{white-space:nowrap;gap:4px}
.book-dot{width:6px;height:6px}
.book-remove,.book-current+.book-remove{top:15px;bottom:auto;right:18px;min-height:24px;line-height:24px;padding:0;font-size:10px;gap:4px}
.book-remove svg{width:12px;height:12px}
.book-current{display:none}
@media(max-width:440px){
 .books-shell{padding:18px 10px 130px}
 .book-card{--cover-width:72px;--cover-height:100.8px;padding:14px;border-radius:21px}
 .book-link{gap:11px}
 .book-copy{padding:0;grid-template-rows:23px 1fr 5px 22px}
 .book-copy h2{font-size:16px;line-height:23px;margin:0;padding-right:49px}
 .book-description{font-size:11px;line-height:1.4;margin:0;padding:2px 0 4px}
 .book-progress{height:5px}
 .book-stats{font-size:10px;line-height:16px;margin:0;padding-top:5px}
 .book-remove,.book-current+.book-remove{top:14px;right:14px;min-height:23px;line-height:23px;font-size:9px}
}

.book-copy>h2,.book-copy>.book-description,.book-copy>.book-progress,.book-copy>.book-stats{width:100%;min-width:0;justify-self:stretch}
.book-description-text{text-align:left}