.shelf-card.library{width:min(960px,100%);max-height:100%;padding:0;overflow:hidden;background:#fff9e9;gap:0}
.library .library-header{display:flex;gap:14px;align-items:center;padding:14px 20px;border-bottom:3px solid var(--ink);background:#fff0c5;flex-shrink:0}
.library-header>span{font:700 20px var(--f-body);margin-right:auto}.library .sx{position:static;flex:none}
.library-back,.library-grade select,.library-pager button{min-height:44px;padding:6px 12px;background:#fff;border:3px solid var(--ink);border-radius:13px;font:700 16px var(--f-body);cursor:pointer}
.library-grade{font-size:14px;display:flex;align-items:center;gap:5px}.library-heading{padding:20px 26px 12px;flex-shrink:0}.library-heading h3{font-size:30px}.library-heading p{margin:5px 0 0;color:#776651;font-size:16px}
.library-pages{padding:8px 26px 26px;overflow:auto;min-height:0;display:grid;gap:16px;align-content:start;overscroll-behavior:contain}
.library-pages.books{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:14px;gap:32px}
.library-book{border:0;background:none;padding:6px;display:grid;gap:9px;text-align:left;cursor:pointer;font-size:17px;color:var(--ink)}
.library-cover{position:relative;min-height:240px;border:4px solid var(--ink);border-radius:10px 22px 22px 10px;background:var(--cover);box-shadow:7px 7px 0 #dacba7;display:flex;flex-direction:column;padding:20px 24px 24px 36px;overflow:hidden}
.library-cover::before{content:'';position:absolute;left:13px;top:0;bottom:0;border-left:3px solid #2b1d1444}.library-cover b{font:400 clamp(30px,4vw,48px) var(--f-display);margin:24px 0 12px}.library-cover small{font-size:15px}.library-cover em{font-style:normal;margin-top:auto;font-size:16px}.cover-bookmark{position:absolute;top:0;right:24px;padding:9px 8px 17px;background:#fff4c7;border:2px solid var(--ink);border-top:0;border-radius:0 0 12px 12px}
.library-book:disabled{opacity:.55;cursor:default}.library-book:not(:disabled):hover .library-cover{transform:translateY(-3px)}
.library-pages.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.library-chapter,.library-lesson{display:flex;align-items:center;gap:16px;min-height:102px;text-align:left;padding:15px;background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 #d2c3a2;cursor:pointer}
.library-number{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#ffdf88;border:2px solid var(--ink);font:800 25px var(--f-num);flex:none}
.library-chapter>span:nth-child(2),.library-lesson>span:nth-child(2){display:grid;gap:5px;min-width:0}.library-chapter b,.library-lesson b{font-size:20px;line-height:1.4}.library-chapter small{font-size:14px;color:#76644f}.library-chapter em,.library-lesson em{font-size:14px;font-style:normal;color:#76644f}.library-chapter i{margin-left:auto;font-size:32px;font-style:normal}.library-lesson small{font-size:14px;color:#956128}.library-state{margin-left:auto;white-space:nowrap;font-size:16px;color:#218354}
.library-pager{display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 20px 18px;border-top:2px solid #eadfca;flex-shrink:0}.library-pager button:disabled{opacity:.4;cursor:default}
@media(max-width:650px){.library .library-header{padding:9px;gap:8px;flex-wrap:wrap}.library-header>span{font-size:17px}.library-grade{margin-left:auto}.library-heading{padding:14px}.library-heading h3{font-size:25px}.library-pages{padding:8px 14px 20px}.library-pages.books{gap:14px}.library-cover{min-height:210px;padding:14px 14px 18px 24px}.library-cover b{font-size:30px}.library-cover small,.library-cover em{font-size:13px}.cover-bookmark{right:9px;padding:3px 4px 8px}.library-pages.chapters{grid-template-columns:1fr}.library-chapter,.library-lesson{min-height:92px;padding:10px;gap:10px}.library-chapter b,.library-lesson b{font-size:18px}.library-state{font-size:13px}.library-number{width:38px;height:42px}.library-pager{gap:10px;padding:10px}.library-pager button{font-size:14px}}
@media(prefers-reduced-motion:reduce){.library *{animation:none!important;transition:none!important}}

.shelf-card.library{animation:none;transform:none}

@media(max-width:420px){.library-cover b{font-size:25px;line-height:1.6;word-break:keep-all;overflow-wrap:normal}.library-cover{padding-left:22px;padding-right:10px}}

.library{background:var(--topic-paper,#fff9e9)!important}
.library .library-header{background:var(--topic-accent,#fff0c5)}
.library-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(110deg,#fff9,transparent)}
.library-heading>div{min-width:0}.library-heading>.course-art{width:170px;height:104px;flex:none}
.course-art text{fill:var(--ink);stroke:none;text-anchor:middle;font:800 22px var(--f-num)}
.course-art .ic{width:110px;height:110px}
.library-cover>.course-art{width:100%;height:130px;flex:none;margin:0 auto 8px}
.library-cover b{margin:12px 0 0}.library-cover{min-height:300px}
.library-thumbnail{width:108px;height:76px;position:relative;flex:none;border-radius:13px;background:var(--topic-paper)}
.library-thumbnail>.course-art{width:100%;height:100%}.library-thumbnail>b{position:absolute;top:-5px;left:-5px;background:#fff3cc;border:2px solid var(--ink);border-radius:50%;width:26px;height:26px;text-align:center;font:800 15px/22px var(--f-num)}
.library-pager small{display:block;font-size:12px;text-align:center;color:#79664a}
.library-lesson,.library-chapter{min-width:0}.library-chapter b,.library-lesson b{overflow-wrap:anywhere}
@media(max-width:650px){.library-heading>.course-art{width:95px;height:64px}.library-heading{gap:7px}.library-heading h3{font-size:23px}.library-cover>.course-art{height:95px}.library-cover{min-height:275px}.library-thumbnail{width:78px;height:62px}.library-heading p{font-size:14px}}
/* Let bilingual labels determine card height instead of squeezing rows into the viewport. */
.library-pages.chapters,.library-pages.lessons{grid-auto-rows:max-content}

/* ---- one scrolling book page (no paging) ---- */
.library.scrolling{display:flex;flex-direction:column;height:min(100%,900px)}
.lib-top{flex-shrink:0;padding:14px 22px 0;display:grid;gap:10px;background:linear-gradient(#fffdf6,var(--topic-paper,#fff9e9));border-bottom:3px solid var(--ink);position:relative;z-index:2;box-shadow:0 6px 10px -8px #2b1d1466}
.lib-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.lib-title h3{font:400 28px/1.15 var(--f-display);margin:0}
.lib-prog{display:flex;align-items:center;gap:8px;font:700 14px var(--f-body);color:#6d5a43;margin-left:auto}
.lib-bookbar{display:inline-block;width:120px;height:12px;border:2px solid var(--ink);border-radius:8px;background:#fff;overflow:hidden;vertical-align:middle}.lib-bookbar i{display:block;height:100%;background:linear-gradient(90deg,#5fcf8c,#2fae6a);border-right:2px solid var(--ink)}
.library-book .lib-bookbar{width:100%}
.lib-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lib-seg{display:flex;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff}
.lib-seg button{min-height:40px;padding:0 14px;border:0;border-left:2px solid #e6d8bb;background:none;font:700 15px var(--f-body);cursor:pointer;color:var(--ink)}.lib-seg button:first-child{border-left:0}
.lib-seg button.on{background:#ffd95e}
.lib-search{position:relative;flex:1 1 220px;min-width:180px;z-index:8;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 6px;border:3px solid var(--ink);border-radius:14px;background:#fff;padding:6px 10px 8px;isolation:isolate;touch-action:manipulation;-webkit-user-select:text;user-select:text}
.lib-search>span[aria-hidden]{grid-row:1;align-self:center}
.lib-search-input{grid-column:2;border:0;outline:0;min-width:0;min-height:36px;font:700 16px var(--f-body);background:none;color:var(--ink);touch-action:manipulation;-webkit-user-select:text!important;user-select:text!important;caret-color:var(--ink)}
.lib-search-input:focus{outline:none}
.lib-search:focus-within{outline:3px solid #ef762d;outline-offset:2px;background:#fffef8}
.lib-search-hint{grid-column:1/-1;margin:0;font:700 12px/1.3 var(--f-body);opacity:.7;-webkit-user-select:none;user-select:none}
.lib-search-results{position:absolute;left:-3px;right:-3px;top:calc(100% + 4px);max-height:min(48vh,380px);overflow:auto;overscroll-behavior:contain;border:3px solid var(--ink);border-radius:14px;background:#fff6dd;box-shadow:0 6px 0 var(--ink);padding:10px;display:flex;flex-direction:column;gap:10px;z-index:9}
.lib-search-results[hidden]{display:none!important}
.lib-search-empty{margin:10px 8px;font:700 15px/1.4 var(--f-body);opacity:.75}
.lib-search-hit{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;box-sizing:border-box;padding:12px 76px 12px 14px;border:2.5px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 #dcc89a}
.lib-search-hit>b,.lib-search-hit>span,.lib-search-hit>.lib-search-snip{display:block;width:100%;margin:0;min-width:0;overflow-wrap:anywhere}
.lib-search-hit>b{font:800 13px/1.4 var(--f-num);color:#1f4f9a}
.lib-search-hit>span{font:700 15px/1.45 var(--f-body)}
.lib-search-hit>.lib-search-snip{font:600 13px/1.45 var(--f-body);opacity:.84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-search-hit>em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:800 14px/1 var(--f-body);font-style:normal;color:#9a3f12;white-space:nowrap;pointer-events:none}
.lib-search-hit:hover,.lib-search-hit.is-active{background:#ffe58a;box-shadow:0 3px 0 var(--ink)}
.lib-search-hit mark,.lib-found-banner mark{background:#ffd34a;color:inherit;border-radius:4px;padding:0 .1em}
.lib-row.lib-search-mark{outline:3px solid #ef762d;outline-offset:2px;animation:libFlash 1.1s ease-in-out 2}
.lib-index{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:thin;scroll-snap-type:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.lib-index button{flex:none;scroll-snap-align:center;display:flex;align-items:center;gap:6px;max-width:210px;min-height:40px;padding:3px 10px 3px 4px;border:2px solid var(--ink);border-radius:999px;background:#fff;font:700 14px var(--f-body);cursor:pointer;color:var(--ink);transition:background .2s,transform .2s}
.lib-index button b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff1c4;border:2px solid var(--ink);font:800 15px var(--f-num);flex:none}
.lib-index button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-index button.on{background:var(--topic-accent,#ffd95e);transform:translateY(-2px);box-shadow:0 3px 0 var(--ink)}
.lib-ring{width:18px;height:18px;border-radius:50%;flex:none;background:conic-gradient(#2fae6a calc(var(--p)*1%),#eadfca 0);border:2px solid var(--ink)}
.lib-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 22px 28px;scroll-behavior:auto;overscroll-behavior:contain}
.lib-ch{margin-bottom:22px}
.lib-chhead{position:sticky;top:-16px;z-index:1;display:flex;align-items:center;gap:14px;padding:10px 12px;margin:0 -8px 10px;background:var(--topic-paper,#fff9e9);border-bottom:2px dashed #d8c8a6}
.lib-chtxt{display:grid;gap:2px;min-width:0}.lib-chtxt b{font:400 22px/1.25 var(--f-display)}.lib-chtxt small{font-size:13px;color:#76644f}.lib-chtxt em{font-style:normal;font-size:13px;font-weight:700;color:#8a6a2b}
.lib-medal{margin-left:auto;font-size:30px}
.lib-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lib-row{position:relative;display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 12px;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 #d2c3a2;cursor:pointer;color:var(--ink);transition:transform .15s,box-shadow .15s}
.lib-row:hover{transform:translateY(-2px);box-shadow:0 6px 0 #d2c3a2}.lib-row:active{transform:translateY(2px);box-shadow:0 1px 0 #d2c3a2}
.lib-row.k-lesson{background:#f2fbff}.lib-row.k-boss{background:#fff4ec}.lib-row.k-test{background:#f7f1ff}
.lib-row.done{background:#f3fbef}
.lib-no{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#ffdf88;border:2px solid var(--ink);font:800 18px var(--f-num);flex:none}
.lib-row.done .lib-no{background:#bfeccc}
.lib-txt{display:grid;gap:2px;min-width:0}.lib-txt small{font-size:12px;font-weight:700;color:#956128}.lib-txt b{font-size:17px;line-height:1.35;overflow-wrap:anywhere}.lib-txt em{font-style:normal;font-size:12px;color:#7a6a58}
.lib-go{margin-left:auto;white-space:nowrap;font:700 14px var(--f-body);color:#2f7fbf}
.lib-stars{margin-left:auto;white-space:nowrap;font-size:16px;letter-spacing:-1px}.lib-stars i{font-style:normal;color:#e3d7bf}.lib-stars i.on{color:#ffb800;-webkit-text-stroke:1px #8a5a00}
.lib-row.next{border-color:#ff7a00;box-shadow:0 4px 0 #ff7a00,0 0 0 4px #ffd8a8}
.lib-badge{position:absolute;top:-11px;right:12px;background:#ff7a00;color:#fff;border:2px solid var(--ink);border-radius:999px;padding:0 9px;font:800 12px/20px var(--f-body)}
.lib-row.flash{animation:libFlash 1.2s cubic-bezier(.3,.7,.4,1) 2}
@keyframes libFlash{0%,100%{transform:none}30%{transform:scale(1.03)}60%{transform:scale(.995)}}
.lib-empty{text-align:center;font-weight:700;color:#7a6a58;padding:30px 0}
.lib-end{text-align:center;font-size:13px;color:#a8977d;padding:8px 0 0}
.lib-fab{position:absolute;right:22px;bottom:20px;z-index:3;min-height:48px;padding:0 18px;border:3px solid var(--ink);border-radius:999px;background:#ff7a00;color:#fff;font:800 16px var(--f-body);box-shadow:0 5px 0 var(--ink);cursor:pointer;animation:libBob 2.4s ease-in-out infinite}
@keyframes libBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.library.scrolling{position:relative}
@media(max-width:650px){.lib-top{padding:10px 12px 0;gap:8px}.lib-title h3{font-size:22px}.lib-prog{margin-left:0;font-size:12px}.lib-bookbar{width:80px}.lib-seg button{padding:0 9px;font-size:13px}.lib-scroll{padding:12px 12px 24px}.lib-rows{grid-template-columns:1fr}.lib-chhead{top:-12px;gap:10px}.lib-chtxt b{font-size:18px}.lib-row{min-height:66px}.lib-fab{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.lib-row.flash,.lib-fab{animation:none}}
.library h3[tabindex="-1"]:focus{outline:none}
@media(max-width:650px){.lib-search{min-width:0;flex:1 1 100%;padding:6px 8px}.lib-search-input{font-size:16px;min-height:40px}.lib-search-hint{font-size:11px}.lib-search-results{max-height:36vh}.lib-seg button{padding:0 8px}.library.scrolling .library-header{flex-wrap:nowrap}.library.scrolling .library-header>span{display:none}}
.grabbable{cursor:grab}
.grabbable.dragging{cursor:grabbing;user-select:none}
.grabbable.dragging .lib-row{pointer-events:none}
@media(hover:none){.grabbable{cursor:auto}}

/* Course reservoirs: only the decorative inset clips, so badges keep their shape. */
.lib-water-key{margin:0;font:600 13px/1.5 var(--f-body);color:#456473}
.lib-water-key>span{display:inline-block;color:#278ca6;font:bold 23px/12px var(--f-body);vertical-align:middle;margin-right:4px}
.lib-row{isolation:isolate;min-height:96px}
.lib-row>.lib-no,.lib-row>.lib-txt,.lib-row>.lib-go,.lib-row>.lib-stars{position:relative;z-index:1}
.lib-water{position:absolute;inset:0;overflow:hidden;border-radius:12px;pointer-events:none;z-index:0;background:linear-gradient(120deg,#ffffff60,transparent)}
.lib-water-fill{position:absolute;inset:auto 0 0;height:var(--water-level,0%);background:linear-gradient(180deg,rgb(var(--water-color,112 211 236)/.62),rgb(var(--water-color,112 211 236)/.85));transition:height .8s ease,background .6s ease;color:rgb(var(--water-color,112 211 236)/.62)}
.lib-water-wave{position:absolute;width:200%;height:20px;left:0;top:-19px;fill:currentColor;animation:libWaterFlow 6s linear infinite;animation-play-state:paused}
.lib-water-grains{position:absolute;inset:0;opacity:var(--water-mud,0);background-image:radial-gradient(ellipse at center,#72552c38 0 1px,transparent 2px),radial-gradient(ellipse at center,#72552c20 0 2px,transparent 3px);background-size:29px 23px,47px 37px;background-position:3px 12px,19px 7px}
.lib-water-glints{position:absolute;inset:0;background:radial-gradient(ellipse at 9% 75%,#fff8 0 2px,transparent 3px),radial-gradient(ellipse at 85% 62%,#fff8 0 3px,transparent 4px),linear-gradient(115deg,transparent 14%,#fff3 15% 18%,transparent 19% 82%,#fff2 83% 85%,transparent 86%);opacity:calc(1 - var(--water-mud,0)*.65)}
.lib-row[data-water=empty] .lib-water-fill,.lib-row[data-water=unknown] .lib-water-fill{visibility:hidden}
.lib-row[data-water=full] .lib-water-wave{top:0;opacity:.5;color:#fff;fill:currentColor}
.lib-row.water-visible .lib-water-wave{animation-play-state:running}
.lib-row:nth-child(even) .lib-water-wave{animation-duration:7.5s;animation-delay:-2s}
.lib-water-status{font:700 12px/1.5 var(--f-body);color:#294654;overflow-wrap:anywhere}
.lib-water-status:empty{display:none}
.lib-guest-note{margin:0;padding:10px 22px;border-bottom:2px dashed #d9c6a8;background:#fff8e7;color:#6b4d2b;font:700 14px/1.55 var(--f-body)}
.lib-row .lib-txt{flex:1;text-shadow:0 1px 2px #fffd}
.lib-row .lib-txt small,.lib-row .lib-txt em{color:#5e4933}
.lib-row .lib-go{color:#1d607d}
.lib-row .lib-stars{padding:2px 3px;border-radius:8px;background:#fffc}
@keyframes libWaterFlow{to{transform:translateX(-50%)}}
@media(max-width:650px){.lib-row{min-height:104px;gap:8px;padding:10px}.lib-water-key{font-size:12px}.lib-water-status{font-size:11px}.lib-row .lib-stars{font-size:13px}.lib-row .lib-go{font-size:12px}.lib-guest-note{padding:8px 12px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.lib-water-wave{animation:none!important}.lib-water-fill{transition:none}}

/* 学一学 first, then 练一练 */
.lib-sub{margin:10px 0 14px;padding:10px 10px 12px;border-radius:18px;border:3px dashed transparent}
.lib-sub.learn{background:#eef8ff;border-color:#bfe0f7}
.lib-sub.practice{background:#fff7ea;border-color:#f3d7a6}
.lib-sub h5{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:900 18px var(--f-title,"ZCOOL KuaiLe"),sans-serif;color:var(--ink)}
.lib-sub h5 i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border:3px solid var(--ink);border-radius:50%;background:#fff;font-size:15px}
.lib-sub.learn h5 i{background:#bfe6ff}.lib-sub.practice h5 i{background:#ffd98a}
.lib-sub h5 small{font:700 13px var(--f-body);color:#7a6a55}
.lib-sub.practice.wait .lib-row:not(.done){opacity:.78}
.lib-sub.practice.wait h5 small{color:#d0642a}

/* Focus series heading on the book shelf */
.lib-series{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:18px 0 2px;font:900 20px var(--f-title,"ZCOOL KuaiLe"),sans-serif;color:var(--ink)}
.lib-series b{padding:2px 12px;border:3px solid var(--ink);border-radius:999px;background:#ff7b54;color:#fff;font:800 16px "Baloo 2",sans-serif;letter-spacing:.5px}
.lib-series::after{content:"";flex:1;border-top:3px dashed #d2c3a2}
.library-book.series-focus .library-cover{background-image:linear-gradient(135deg,rgba(255,255,255,.35) 0 20%,transparent 20%)}

/* visible scroll rail (js/scroll-rail.js) */
.srail{position:fixed;z-index:70;width:14px;border-radius:999px;background:rgba(43,29,20,.10);border:2px solid rgba(43,29,20,.18);touch-action:none;cursor:pointer}
.srail-thumb{position:absolute;left:-2px;right:-2px;top:0;border-radius:999px;background:#ffb020;border:3px solid var(--ink,#2b1d14);box-shadow:0 2px 0 rgba(43,29,20,.35);cursor:grab;touch-action:none}
.srail.on .srail-thumb,.srail-thumb:hover{background:#ff9100;cursor:grabbing}
#shelf .lib-scroll,#shelf .library-pages{padding-right:34px;scrollbar-width:none}
#shelf .lib-scroll::-webkit-scrollbar,#shelf .library-pages::-webkit-scrollbar{display:none}
@media(max-width:650px){.srail{width:12px}#shelf .lib-scroll,#shelf .library-pages{padding-right:26px}}

/* the book list scrolls inside the shelf card instead of being cut off at the bottom */
#shelf .shelf-card.library>.library-pages{flex:1 1 auto;flex-shrink:1;min-height:0}

/* Course and question labels must remain readable over the progress water. */
.lib-kind44{display:inline-block;padding:5px 11px;border:2px solid var(--ink);border-radius:10px;background:#ffe094;color:var(--ink);font:900 18px/1.35 var(--f-body);box-shadow:0 3px 0 #2b1d1429}
.k-lesson .lib-kind44{background:#bceeff}
@media(max-width:600px){.lib-kind44{font-size:16px;padding:4px 8px}}