/* V50 — U21 word-card View on top of the existing R17 controller.
   No query/grade/memo/stat algorithms live here. */
#studentLibrary[data-view="card"]{background:#1b1739 url("bg_info.b6a3105a39430cc5b.webp") center/cover no-repeat}
#studentLibrary[data-view="card"] .sl-main{padding:0 12px 6px;overflow:hidden}
#studentLibrary[data-view="card"] .sl-nav{display:none!important}
#studentLibrary[data-view="card"] .sl-brand{min-height:72px;padding:10px 62px 6px;text-align:center;align-items:center;border-bottom:0;background:transparent}
#studentLibrary[data-view="card"] .sl-brand>b{font-size:21px;letter-spacing:3px;color:#ffdda0;text-shadow:0 2px 4px #110923}
#studentLibrary[data-view="card"] .sl-brand>small{font:9px Georgia,serif;letter-spacing:3px;color:#dbc7c5;margin-top:4px}

#studentLibrary .u21-card{position:relative;height:100%;min-height:0;display:flex;flex-direction:column;gap:4px;color:#f5e8cb;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}
#studentLibrary .u21-card-head{flex:0 0 34px;display:flex;align-items:center;gap:7px;padding:0 7px;color:#eee0cd;font-size:11px}
#studentLibrary .u21-back{width:36px;height:36px;min-height:36px;padding:0!important;flex:0 0 36px;border:1px solid #d7b274!important;border-radius:50%!important;background:radial-gradient(circle at 40% 30%,#604d82,#2b2041 72%)!important;color:#ffe0a0!important;font-size:28px!important;line-height:1!important;display:grid!important;place-items:center;box-shadow:inset 0 0 0 2px #4d385f,0 3px 8px #10091e99!important}
#studentLibrary .u21-task-label{white-space:nowrap;font-size:11px;color:#e9dbcd}
#studentLibrary .u21-progress-track{height:6px;flex:1;min-width:32px;border-radius:99px;overflow:hidden;background:#392746;border:1px solid #806b8d;box-shadow:inset 0 1px 3px #090610}
#studentLibrary .u21-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b88865,#ffe5ab)}
#studentLibrary .u21-card-head>b{white-space:nowrap;font:700 12px Georgia,serif;color:#fff0cd}
#studentLibrary .u21-undo{width:29px;height:29px;min-height:29px;padding:0!important;border-radius:9px!important;border:1px solid #b79570!important;background:#433052d6!important;color:#f8d9a8!important;font-size:18px!important;display:grid!important;place-items:center}

#studentLibrary .u21-mode-tools{flex:0 0 29px;display:flex;justify-content:center;gap:5px;align-items:center;margin-top:1px}
#studentLibrary .u21-mode-tools button{min-height:27px!important;padding:3px 11px!important;border-radius:13px!important;border:1px solid #846b91!important;background:#2b203fbd!important;color:#d8c9dc!important;font-size:10px!important;letter-spacing:.4px}
#studentLibrary .u21-mode-tools button[aria-pressed="true"]{background:linear-gradient(#fff0ca,#d6b47c)!important;border-color:#ffe8ad!important;color:#4e3457!important;font-weight:700;box-shadow:0 0 7px #e0c79266!important}
#studentLibrary .u21-session-warning{flex:none;margin:0 12px;padding:4px 8px;border:1px solid #b99362;border-radius:8px;background:#392747d8;color:#ffe0b2;font-size:10px;line-height:1.4}

#studentLibrary .u21-book-stage{flex:1;min-height:0;overflow:hidden!important;display:flex;align-items:center;justify-content:center;padding:0 2px}
#studentLibrary .u21-book{position:relative;flex:none;aspect-ratio:2/3;max-width:100%;max-height:100%;background:url("../../assets/shared/3151cd9c76efff5b468122af.webp") center/contain no-repeat!important;filter:drop-shadow(0 8px 12px #080619a6)!important;transition:transform .24s ease}
#studentLibrary .u21-book-content{position:absolute!important;left:18.1%!important;right:15.8%!important;top:19.4%!important;bottom:12.8%!important;display:block!important;min-height:0}
#studentLibrary .u21-page-reading{height:100%;overflow-y:auto!important;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;text-align:center;padding:0!important;color:#493348}
#studentLibrary .u21-page-reading::-webkit-scrollbar{width:0}
#studentLibrary .u21-page-core{min-height:100%;display:flex;flex-direction:column;align-items:stretch;padding:2px 3px 8px;color:#493348}
#studentLibrary .u21-source-label{min-height:12px;margin:0 0 8px;color:#9c856f;font:10px/1.2 Georgia,'PingFang SC',serif;overflow-wrap:anywhere}
#studentLibrary .u21-word-full{display:block;width:max-content;max-width:100%;align-self:center;margin-inline:auto;position:relative;isolation:isolate;color:#3a2339;font:700 clamp(24px,7.5vw,37px)/1.14 Georgia,'Times New Roman',serif;letter-spacing:-.7px;white-space:nowrap}
#studentLibrary .u21-word-full.long{font-size:clamp(20px,5.8vw,28px)}
#studentLibrary .u21-word-full.extra-long{font-size:clamp(17px,5vw,24px)}
#studentLibrary .u21-word-full.covered{color:transparent;min-height:1.2em}
#studentLibrary .u21-word-full.covered::after{content:'✦';position:absolute;inset:0 -4px -1px;display:grid;place-items:center;color:#94758c;font:15px Georgia,serif;background:radial-gradient(ellipse at 20% 65%,#f0debd 0 57%,transparent 90%),radial-gradient(ellipse at 80% 30%,#fff1d5 0 59%,transparent 92%),linear-gradient(172deg,#f5e3c1,#fff1d3 49%,#eed2ab);border-radius:44% 56% 48% 52%/54% 46% 58% 42%;box-shadow:0 1px 2px #7d62543d;pointer-events:none}
#studentLibrary .u21-ipa-line{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:8px;color:#6d6071;font:16px Georgia,serif;overflow-wrap:anywhere}
#studentLibrary .u21-ipa-line button{min-height:28px!important;padding:0 4px!important;border:0!important;background:transparent!important;color:#78639b!important;font-size:17px!important}
#studentLibrary .u21-card[data-card-mode="check"] .u21-ipa-line{opacity:.58}
#studentLibrary .u21-translation{margin:8px 0 1px;color:#554451;font:400 15px/1.45 -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;overflow-wrap:anywhere}
#studentLibrary .u21-divider{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 9px;color:#a4876a;font-size:11px}
#studentLibrary .u21-divider span{width:27px;height:1px;background:linear-gradient(90deg,transparent,#b89976)}
#studentLibrary .u21-divider span+span{transform:rotate(180deg)}

#studentLibrary .u21-split-section{width:100%;padding:0 0 5px}
#studentLibrary .u21-split-blocks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
#studentLibrary .u21-split-block{min-width:0;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 6px!important;border:1px solid #deccae!important;border-radius:8px!important;background:#fff9e8b5!important;color:#3e2f4e!important;box-shadow:0 1px 2px #8b705a36!important}
#studentLibrary .u21-split-block .u21-segment{font:700 clamp(14px,3.8vw,19px) Georgia,serif;white-space:nowrap}
#studentLibrary .u21-split-block small{color:#705d74;font:11px Georgia,serif;white-space:nowrap}
#studentLibrary .u21-split-block[data-covered="true"] .u21-segment{color:#aa9ba3;letter-spacing:1px;font-size:15px}

#studentLibrary .u21-guess-form{display:flex;flex-direction:column;gap:5px;margin:7px 3px 3px;color:#65466c;text-align:left;font-size:11px}
#studentLibrary .u21-guess-form>div:first-of-type{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px}
#studentLibrary .u21-guess-form input{min-height:37px;width:100%;padding:6px 8px;border:1px solid #bb9c6c;border-radius:8px;background:#fff9e9;color:#4d3624;font-size:15px}
#studentLibrary .u21-guess-form button{min-height:35px!important;padding:5px 8px!important;background:#5a436f!important;color:#ffdf9f!important;border-color:#c7a26f!important;font-size:11px!important}
#studentLibrary .u21-guess-result{margin:0;color:#765582;font-size:11px;line-height:1.45}
#studentLibrary .u21-guess-tools{display:flex!important;justify-content:center;gap:5px!important}
#studentLibrary .u21-guess-tools button{background:#fff4dc!important;color:#624b70!important}

#studentLibrary .u21-note-stack{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:8px;flex-shrink:0}
#studentLibrary .u21-note-entry{position:relative;display:block;width:91%;min-height:55px;max-height:76px;aspect-ratio:3.25/1;margin-inline:auto;padding:0!important;border:0!important;background:transparent!important;color:#6c4e50!important;text-align:left;overflow:visible;filter:drop-shadow(0 2px 2px #604b3f55);transform:rotate(-1.15deg)}
#studentLibrary .u21-note-entry:active{transform:rotate(-1.15deg) translateY(2px)}
#studentLibrary .u21-note-entry>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
#studentLibrary .u21-note-entry>span{position:absolute;inset:20% 15% 17% 17%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;overflow:hidden;text-align:left}
#studentLibrary .u21-note-entry b{font-size:14px;line-height:1.08;white-space:nowrap}
#studentLibrary .u21-note-entry small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;overflow:hidden;color:inherit;font-size:10px;line-height:1.25;overflow-wrap:anywhere}
#studentLibrary .u21-memo-entry>span{color:#625481}

#studentLibrary .u21-rule-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:5px auto 0;width:91%}
#studentLibrary .u21-rule-links button{min-height:28px!important;padding:3px 7px!important;border:0!important;background:transparent!important;color:#76558a!important;font-size:10px!important;text-decoration:underline;text-underline-offset:2px;box-shadow:none!important}
#studentLibrary .u21-rule-links-all{margin-top:0}

#studentLibrary .u21-bookmarks{position:absolute;inset:0;z-index:7;pointer-events:none}
#studentLibrary .u21-bookmark{position:absolute;right:0;width:10.3%;height:7.8%;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;pointer-events:auto;color:#583a60!important;font:800 11px Georgia,'PingFang SC',serif!important;text-shadow:0 1px #fff8e3;box-shadow:none!important}
#studentLibrary .u21-bookmark span{display:grid;place-items:center;width:64%;height:60%;margin-left:auto}
#studentLibrary .u21-bookmark[aria-pressed="true"] span{color:#68406f;filter:drop-shadow(0 0 3px #fff1c7) drop-shadow(0 0 4px #d8a85f)}
#studentLibrary .u21-bookmark.b1{top:10.2%}
#studentLibrary .u21-bookmark.b2{top:20.1%}
#studentLibrary .u21-bookmark.b3{top:29.9%}
#studentLibrary .u21-bookmark.b4{top:65.3%}

#studentLibrary .u21-grade-rail{position:absolute;left:2.4%;bottom:15.5%;z-index:8;display:flex;flex-direction:column;align-items:center;gap:0;filter:drop-shadow(0 2px 4px #180f2c)}
#studentLibrary .u21-grade-quill{width:31px;height:51px;object-fit:contain;transform:rotate(18deg);margin-bottom:-7px;pointer-events:none}
#studentLibrary .u21-grade-rail button{position:relative;width:48px;height:48px;min-height:48px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#573c61!important}
#studentLibrary .u21-grade-rail button img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#studentLibrary .u21-grade-rail button span{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;font:bold 19px Georgia,serif;text-shadow:0 1px #fff6d9}
#studentLibrary .u21-grade-rail button[aria-pressed="true"]{filter:drop-shadow(0 0 6px #ffe4a7)}
#studentLibrary .u21-grade-stamp{position:absolute;left:19%;bottom:16%;z-index:5;color:#448a63;font:bold 31px Georgia,serif;transform:rotate(-12deg);text-shadow:1px 2px #fff8d5}
#studentLibrary .u21-grade-stamp.bad{color:#a44657}

#studentLibrary .u21-page-buttons{flex:0 0 48px;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:7px;align-items:center;padding:2px 7px 3px}
#studentLibrary .u21-page-buttons button{height:41px;min-height:41px!important;min-width:0;padding:0 7px!important;border:1px solid #c09a6e!important;border-radius:14px!important;background:radial-gradient(ellipse at 17% 14%,#fff4d9b5,transparent 55%),linear-gradient(160deg,#fff0d2,#dec6a4 72%,#e2c6a1)!important;color:#59416a!important;font-size:12px!important;font-weight:700;white-space:nowrap;box-shadow:inset 0 0 0 2px #fff7e18a,inset 0 0 0 3px #a8815680,0 3px 7px #0d0921a8!important;text-shadow:0 1px #fff1cf}
#studentLibrary .u21-page-buttons .u21-middle{background:linear-gradient(160deg,#59436f,#322444)!important;border-color:#dcb677!important;color:#ffdf9f!important;box-shadow:inset 0 0 0 2px #aa8ac3aa,0 3px 7px #0d0921a8!important;font-weight:500;letter-spacing:.4px}
#studentLibrary .u21-card-message{flex:0 0 13px;min-height:13px;text-align:center;font-size:10px;line-height:1.2;color:#ffe3a7;margin:0}

#studentLibrary .u21-today-draft{flex:none;margin:0 8px;padding:6px 8px;border:1px solid #b99362;border-radius:9px;background:#f5e4c8;color:#5f435f;font-size:10px;line-height:1.35}
#studentLibrary .u21-today-draft p{margin:2px 0}
#studentLibrary .u21-today-draft>div{display:flex;justify-content:flex-end;gap:5px}
#studentLibrary .u21-today-draft button{min-height:30px!important;padding:4px 8px!important;font-size:10px!important}
#studentLibrary .u21-today-readonly{flex:none;text-align:center;color:#ffe1b3;font-size:10px;margin:0}

/* Watercolor Tip / Memo papers. They are View-only overlays; data still comes from R17. */
#studentLibrary .u21-paper-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#100a24b8;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:calc(env(safe-area-inset-top) + 18px) 12px calc(env(safe-area-inset-bottom) + 18px)}
#studentLibrary .u21-paper-modal>img,#studentLibrary .u21-paper-modal>.u21-paper-content{grid-area:1/1}
#studentLibrary .u21-paper-modal>img{display:block;max-width:100%;max-height:82dvh;object-fit:contain;filter:drop-shadow(0 12px 22px #08051199);pointer-events:none}
#studentLibrary .u21-paper-content{position:relative;z-index:1;display:flex;flex-direction:column;min-height:0;color:#5b435f}
#studentLibrary .u21-tip-paper>img,#studentLibrary .u21-tip-paper>.u21-paper-content{width:min(84vw,360px);aspect-ratio:1122/1402}
#studentLibrary .u21-tip-paper .u21-paper-content{padding:13.5% 15% 12.5% 16%}
#studentLibrary .u21-memo-paper>img,#studentLibrary .u21-memo-paper>.u21-paper-content{width:min(94vw,420px);aspect-ratio:1618/970}
#studentLibrary .u21-memo-paper .u21-paper-content{padding:12.5% 16% 13% 16%}
#studentLibrary .u21-paper-title{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;min-height:28px}
#studentLibrary .u21-paper-title b{font:700 20px Georgia,'PingFang SC',serif;color:#654864}
#studentLibrary .u21-paper-title button{width:27px;height:27px;min-height:27px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#fff4dcbb!important;color:#6b4d70!important;font-size:20px!important;line-height:1;box-shadow:none!important}
#studentLibrary .u21-paper-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 2px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
#studentLibrary .u21-paper-scroll p{margin:4px 0 8px}
#studentLibrary .u21-paper-scroll small{display:block;color:#8b7384;font-size:11px;margin-bottom:7px}
#studentLibrary .u21-paper-scroll article{border-top:1px solid #b9966a55;padding:7px 0}
#studentLibrary .u21-paper-scroll article b{font-size:12px}
#studentLibrary .u21-paper-scroll button,#studentLibrary .u21-paper-rules button{display:block;width:100%;min-height:32px!important;margin-top:4px;padding:4px 7px!important;background:#fff4dcb8!important;color:#674b70!important;border:1px solid #c2a477!important;font-size:11px!important}
#studentLibrary .u21-paper-rules{border-top:1px solid #b9966a55;padding-top:7px;margin-top:7px}
#studentLibrary .u21-paper-actions{display:flex;justify-content:flex-end;gap:6px;flex:none;padding-top:3px}
#studentLibrary .u21-paper-actions button{min-height:32px!important;padding:5px 9px!important;background:#5a436f!important;color:#ffe0a0!important;border:1px solid #c8a26e!important;font-size:11px!important}
#studentLibrary .u21-memo-read{font-size:13px;line-height:1.45;padding:5px 2px;color:#5c4a72}
#studentLibrary .u21-memo-read.is-empty{color:#9785a5;font-style:italic}
#studentLibrary .u21-memo-edit{display:flex;flex:1;min-height:0;flex-direction:column;gap:4px;font-size:11px;color:#765f7d}
#studentLibrary .u21-memo-edit textarea{flex:1;min-height:62px;width:100%;resize:none;padding:7px;border:1px solid #c2a477;border-radius:8px;background:#fff8ec;color:#503a55;font-size:14px;line-height:1.5}

@media(max-width:380px){
 #studentLibrary[data-view="card"] .sl-main{padding-left:7px;padding-right:7px}
 #studentLibrary .u21-card-head{gap:5px;padding-inline:4px}
 #studentLibrary .u21-mode-tools{gap:3px}
 #studentLibrary .u21-mode-tools button{padding-inline:8px!important}
 #studentLibrary .u21-book-content{top:18.9%!important;bottom:12.4%!important}
 #studentLibrary .u21-page-buttons{gap:5px;padding-inline:4px}
 #studentLibrary .u21-page-buttons button{font-size:11px!important;padding-inline:4px!important}
}
@media(max-height:760px){
 #studentLibrary[data-view="card"] .sl-brand{min-height:62px;padding-top:6px;padding-bottom:3px}
 #studentLibrary .u21-card-head{flex-basis:31px}
 #studentLibrary .u21-mode-tools{flex-basis:26px}
 #studentLibrary .u21-note-entry{min-height:50px;aspect-ratio:3.55/1}
 #studentLibrary .u21-note-entry>span{inset:19% 16% 17% 17%;gap:1px}
 #studentLibrary .u21-note-entry b{font-size:13px}
 #studentLibrary .u21-note-entry small{font-size:9px;-webkit-line-clamp:1}
 #studentLibrary .u21-page-buttons{flex-basis:44px}
 #studentLibrary .u21-page-buttons button{height:38px;min-height:38px!important}
}
@media(prefers-reduced-motion:reduce){#studentLibrary .u21-book,#studentLibrary .u21-note-entry{transition:none!important}}

/* Directional parchment leaf only; the illustrated book itself stays fixed. */
#studentLibrary .u21-page-turn-leaf{position:absolute;z-index:9;left:18.1%;right:15.8%;top:19.4%;bottom:12.8%;pointer-events:none;background:linear-gradient(100deg,#e9d0aa 0%,#fbedd0 10%,#fff1d9 63%,#e3c9a7 100%);border:1px solid #d4bb92;border-radius:3px 9px 9px 3px;box-shadow:inset 0 0 10px #b28e6259,4px 3px 12px #2d1b244f;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0}
#studentLibrary .u21-page-turn-leaf::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 74%,#b18e6963 96%,#fff5d9ab)}
#studentLibrary .u21-page-turn-leaf.turn-next{transform-origin:0 50%;animation:u21LeafNext 600ms cubic-bezier(.29,.63,.15,1) both}
#studentLibrary .u21-page-turn-leaf.turn-prev{transform-origin:100% 50%;border-radius:9px 3px 3px 9px;animation:u21LeafPrev 600ms cubic-bezier(.29,.63,.15,1) both}
#studentLibrary .u21-page-turn-leaf.turn-prev::after{background:linear-gradient(270deg,transparent 0 74%,#b18e6963 96%,#fff5d9ab)}
@keyframes u21LeafNext{0%{opacity:.96;transform:perspective(800px) rotateY(0)}60%{opacity:.9;transform:perspective(800px) rotateY(-72deg)}100%{opacity:0;transform:perspective(800px) rotateY(-112deg)}}
@keyframes u21LeafPrev{0%{opacity:.96;transform:perspective(800px) rotateY(0)}60%{opacity:.9;transform:perspective(800px) rotateY(72deg)}100%{opacity:0;transform:perspective(800px) rotateY(112deg)}}
@media(prefers-reduced-motion:reduce){#studentLibrary .u21-page-turn-leaf{display:none!important;animation:none!important}}
/* Compatibility classes remain for R17 regression selectors, but V50 owns layout. */
#studentLibrary .sl-mode-bar.u21-mode-tools{display:flex;flex-wrap:nowrap}
#studentLibrary .sl-grade-bar.u21-grade-rail{display:flex;justify-content:flex-start;gap:0;flex:none}
#studentLibrary .sl-card-footer.u21-card-footer{display:flex;flex-direction:column;gap:0;align-items:stretch;justify-content:flex-start;flex:none;width:100%}
#studentLibrary .sl-card-footer.u21-card-footer .u21-card-message{width:100%;font-size:10px;text-align:center;color:#ffe3a7}
#studentLibrary .sl-tip.u21-note-entry,#studentLibrary .sl-memo.u21-note-entry{margin-top:0;border-radius:0;white-space:normal;font-size:inherit;line-height:normal}