/* V22 isolated word-card preview. Scoped strictly to the card view. */
#studentLibrary[data-view="card"]{
  --card-gold:#e7c783;
  --card-ink:#4f385b;
  --card-deep:#1a0f4f;
  background:#1a0f4f url('starfield_bg.webp') center/cover no-repeat;
  color:#f6e7bd;
  position:fixed;inset:0;display:flex;flex-direction:column;
  height:100dvh;overflow:hidden;
  padding:env(safe-area-inset-top) 0 calc(10px + env(safe-area-inset-bottom));
}
#studentLibrary[data-view="card"]::after{
  content:"";position:absolute;inset:calc(env(safe-area-inset-top) + 5px) 9px calc(env(safe-area-inset-bottom) + 7px);
  border:1px solid rgba(224,190,122,.68);border-radius:29px;pointer-events:none;z-index:0;
}
#studentLibrary[data-view="card"] .sl-brand{z-index:2;flex:none;min-height:75px;padding:8px 76px 5px;text-align:center;display:flex;flex-direction:column;justify-content:center;border:0;background:transparent;color:#f1d798}
#studentLibrary[data-view="card"] .sl-brand>b{font:700 clamp(18px,5.5vw,24px)/1.05 Georgia,'Songti SC','STSong',serif;letter-spacing:3px;text-shadow:0 1px 0 #5b3a39,0 0 10px #d8a95b55;white-space:nowrap}
#studentLibrary[data-view="card"] .sl-brand>small{margin-top:6px;font:600 clamp(7px,2vw,9px)/1 Georgia,serif;letter-spacing:3.2px;white-space:nowrap;color:#e3cfaa}
#studentLibrary[data-view="card"] .sl-main{z-index:2;flex:1;min-height:0;overflow:hidden;padding:0 17px 8px}
#studentLibrary[data-view="card"] .v22-card-page{height:100%;min-height:0;display:flex;flex-direction:column;gap:7px}
#studentLibrary[data-view="card"] .v22-card-top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:9px;align-items:center;flex:none}
#studentLibrary[data-view="card"] .v22-round{width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;border:1px solid #d8b96f;background:linear-gradient(145deg,#4c2d73,#281946);color:#f7df9b;display:grid;place-items:center;font-size:27px;box-shadow:inset 0 0 0 2px #d5ae5e35,0 3px 10px #09051a88}
#studentLibrary[data-view="card"] .v22-round.v22-reset{font-size:22px}
#studentLibrary[data-view="card"] .v22-progress{min-width:0}
#studentLibrary[data-view="card"] .v22-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#f2dfad;font-size:12px;line-height:1.2;margin-bottom:5px}
#studentLibrary[data-view="card"] .v22-progress-meta b{font-size:13px;letter-spacing:.5px}
#studentLibrary[data-view="card"] .v22-progress-track{height:7px;border-radius:10px;background:#6d5586aa;border:1px solid #bd985f66;overflow:hidden;box-shadow:inset 0 1px 2px #09031e99}
#studentLibrary[data-view="card"] .v22-progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b98e65,#efd08e,#fff0bd);border-radius:inherit;transition:width .2s ease}
#studentLibrary[data-view="card"] .v22-mode-bar{display:flex;justify-content:center;gap:6px;flex:none}
#studentLibrary[data-view="card"] .v22-mode-bar button{min-height:34px;padding:5px 11px;border-radius:8px;border:1px solid #c49c64;background:#35204c;color:#f8e6bc;font-size:12px;white-space:nowrap}
#studentLibrary[data-view="card"] .v22-mode-bar [aria-pressed="true"]{background:#684687;border-color:#e3c37a;box-shadow:inset 0 0 0 1px #f2dca033}
#studentLibrary[data-view="card"] .v22-mode-bar button:disabled{opacity:.45}
#studentLibrary[data-view="card"] .v22-book-stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:0 2px}
#studentLibrary[data-view="card"] .v22-book{position:relative;flex:none;width:min(92vw,410px,calc((100dvh - 260px) * .6667));min-width:min(260px,86vw);aspect-ratio:2/3;background:url('wordcard_book_v22.webp') center/contain no-repeat;filter:drop-shadow(0 8px 9px #08031973)}
#studentLibrary[data-view="card"] .v22-book-content{position:absolute;left:14.2%;right:14.9%;top:11.1%;bottom:12.5%;display:flex;min-height:0}
#studentLibrary[data-view="card"] .v22-book-scroll{flex:1;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;text-align:center;padding:2px 2px 9px;scrollbar-width:none;color:var(--card-ink)}
#studentLibrary[data-view="card"] .v22-book-scroll::-webkit-scrollbar{display:none}
#studentLibrary[data-view="card"] .v22-source{font-size:10px;line-height:1.3;color:#8d6b7c;min-height:13px;margin-top:3px}
#studentLibrary[data-view="card"] .v22-word{font:700 clamp(27px,7.7vw,38px)/1.08 Georgia,'Times New Roman',serif;color:#34214d;margin:5px 0 6px;overflow-wrap:anywhere}
#studentLibrary[data-view="card"] .v22-word.is-hidden{color:transparent;text-shadow:0 0 12px #7d6595;background:linear-gradient(90deg,#e7d8be,#f5e7cc,#e7d8be);border-radius:9px;user-select:none}
#studentLibrary[data-view="card"] .v22-ipa{display:flex;justify-content:center;align-items:center;gap:5px;color:#506889;font-size:clamp(13px,3.8vw,17px);min-height:28px;margin:0 0 2px;overflow-wrap:anywhere}
#studentLibrary[data-view="card"] .v22-ipa button{border:0;background:transparent;color:#725589;min-height:28px;padding:0 4px;font-size:18px}
#studentLibrary[data-view="card"] .v22-meaning{font:700 clamp(14px,4vw,17px)/1.4 Georgia,'Songti SC','STSong',serif;color:#4e3658;margin:2px 0 4px;overflow-wrap:anywhere}
#studentLibrary[data-view="card"] .v22-divider{height:14px;margin:1px 20%;position:relative}
#studentLibrary[data-view="card"] .v22-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,#b88c5c,#b88c5c,transparent)}
#studentLibrary[data-view="card"] .v22-divider::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font-size:8px;color:#b88c5c;background:#f7e8c9;padding:0 7px}
#studentLibrary[data-view="card"] .v22-segments{display:flex;justify-content:center;align-items:stretch;gap:5px;flex-wrap:wrap;margin:4px 0 6px}
#studentLibrary[data-view="card"] .v22-segment{min-width:47px;max-width:96px;min-height:48px;padding:8px 8px 6px;border:0;background:transparent center/100% 100% no-repeat;color:#3f3154;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.05;filter:drop-shadow(0 2px 2px #725d6e33)}
#studentLibrary[data-view="card"] .v22-segment:nth-child(4n+1){background-image:url('wordcard_seg_cream_v22.webp')}
#studentLibrary[data-view="card"] .v22-segment:nth-child(4n+2){background-image:url('wordcard_seg_pink_v22.webp')}
#studentLibrary[data-view="card"] .v22-segment:nth-child(4n+3){background-image:url('wordcard_seg_mint_v22.webp')}
#studentLibrary[data-view="card"] .v22-segment:nth-child(4n){background-image:url('wordcard_seg_lavender_v22.webp')}
#studentLibrary[data-view="card"] .v22-segment b{font-size:clamp(15px,4.6vw,20px);font-family:Georgia,'Times New Roman',serif}
#studentLibrary[data-view="card"] .v22-segment small{font-size:10px;margin-top:4px;color:#5f5365;white-space:nowrap}
#studentLibrary[data-view="card"] .v22-note-panel{width:100%;border:0;background:transparent center/100% 100% no-repeat;color:#58405f;text-align:left;display:block;position:relative;margin:6px 0;padding:12px 16px 11px;min-height:64px;overflow-wrap:anywhere}
#studentLibrary[data-view="card"] .v22-note-panel.tip{background-image:url('wordcard_tip_strip_v22.webp')}
#studentLibrary[data-view="card"] .v22-note-panel.memo{background-image:url('wordcard_memo_strip_v22.webp')}
#studentLibrary[data-view="card"] .v22-note-panel.is-open{min-height:132px;padding:20px 18px 18px;background-size:100% 100%}
#studentLibrary[data-view="card"] .v22-note-panel.tip.is-open{background-image:url('wordcard_tip_open_v22.webp')}
#studentLibrary[data-view="card"] .v22-note-panel.memo.is-open{background-image:url('wordcard_memo_open_v22.webp')}
#studentLibrary[data-view="card"] .v22-note-panel h3{margin:0 0 2px;text-align:center;font:italic 700 17px/1.15 Georgia,serif;color:#5a405f}
#studentLibrary[data-view="card"] .v22-note-panel p{margin:0;font-size:12px;line-height:1.55;text-align:center;white-space:pre-wrap}
#studentLibrary[data-view="card"] .v22-note-panel .v22-note-hint{font-size:11px;color:#876c84}
#studentLibrary[data-view="card"] .v22-note-panel button.v22-panel-toggle{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0}
#studentLibrary[data-view="card"] .v22-note-panel textarea{display:block;width:100%;min-height:72px;margin:7px 0 5px;padding:7px 8px;border:1px solid #aa8a9e;border-radius:7px;background:#fffaf0d9;color:#4f385b;font:16px/1.45 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;resize:vertical}
#studentLibrary[data-view="card"] .v22-memo-actions{display:flex;justify-content:flex-end;gap:6px}
#studentLibrary[data-view="card"] .v22-memo-actions button{min-height:32px;padding:4px 9px;border:1px solid #9a7490;border-radius:7px;background:#fff7e9;color:#5b4462;font-size:11px}
#studentLibrary[data-view="card"] .v22-rules{margin:5px 0 2px;text-align:left;color:#624b70}
#studentLibrary[data-view="card"] .v22-rules h3{margin:0 0 4px;font-size:11px;letter-spacing:.5px}
#studentLibrary[data-view="card"] .v22-rule-chip{display:block;width:100%;min-height:34px;margin-top:4px;padding:5px 8px;border:1px solid #c7a570;border-radius:8px;background:#fff7e6;color:#624b70;font-size:11px;text-align:left}
#studentLibrary[data-view="card"] .v22-guess{margin:7px 0;text-align:left;color:#5c4365}
#studentLibrary[data-view="card"] .v22-guess label{font-size:11px;display:block;margin-bottom:4px}
#studentLibrary[data-view="card"] .v22-guess input{width:100%;height:40px;padding:7px 9px;border:1px solid #b99464;border-radius:8px;background:#fffaf0;color:#3f2f46;font-size:16px}
#studentLibrary[data-view="card"] .v22-guess-actions{display:flex;gap:5px;margin-top:5px}
#studentLibrary[data-view="card"] .v22-guess-actions button{flex:1;min-height:34px;padding:5px;border:1px solid #b99464;border-radius:7px;background:#fff7e5;color:#5b4363;font-size:11px}
#studentLibrary[data-view="card"] .v22-guess-result{margin:5px 0 0;text-align:center;font-size:12px;min-height:18px;color:#765281}
#studentLibrary[data-view="card"] .v22-bookmarks{position:absolute;right:1.2%;top:13.8%;bottom:14.5%;width:11.6%;display:grid;grid-template-rows:repeat(4,1fr);gap:3.5%;align-content:start;pointer-events:none}
#studentLibrary[data-view="card"] .v22-bookmarks button{pointer-events:auto;align-self:center;justify-self:center;width:88%;min-width:0;height:66%;min-height:40px;padding:0 2px;border:0;border-radius:5px;background:transparent;color:#58415e;font:700 10px/1.1 'Songti SC','STSong',serif;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:1px;filter:none}
#studentLibrary[data-view="card"] .v22-bookmarks button[aria-pressed="false"]{opacity:.55}
#studentLibrary[data-view="card"] .v22-bookmarks button:disabled{opacity:.22}
#studentLibrary[data-view="card"] .v22-card-actions{display:grid;grid-template-columns:1fr 1.22fr 1fr;gap:7px;flex:none;padding:0 3px}
#studentLibrary[data-view="card"] .v22-card-actions button{min-height:43px;padding:7px 7px;border-radius:12px;border:1px solid #c8a66b;background:#f0dfbb;color:#59426a;font-weight:700;font-size:12px;box-shadow:inset 0 0 0 2px #fff4cf70}
#studentLibrary[data-view="card"] .v22-card-actions .v22-middle{background:#65467f;color:#f7e5bd;border-color:#d3af6d}
#studentLibrary[data-view="card"] .v22-card-actions button:disabled{opacity:.42;box-shadow:none}
#studentLibrary[data-view="card"] [hidden]{display:none!important}

@media (max-height:760px){
  #studentLibrary[data-view="card"] .sl-brand{min-height:58px;padding-top:5px;padding-bottom:2px}
  #studentLibrary[data-view="card"] .sl-brand>small{margin-top:3px}
  #studentLibrary[data-view="card"] .sl-main{padding-bottom:4px}
  #studentLibrary[data-view="card"] .v22-card-page{gap:4px}
  #studentLibrary[data-view="card"] .v22-mode-bar button{min-height:30px;padding:3px 8px}
  #studentLibrary[data-view="card"] .v22-book{width:min(90vw,355px,calc((100dvh - 210px) * .6667));min-width:min(245px,82vw)}
  #studentLibrary[data-view="card"] .v22-card-actions button{min-height:39px}
  #studentLibrary[data-view="card"] .v22-note-panel{margin:4px 0;padding-top:10px;padding-bottom:9px}
}
@media (max-width:350px){
  #studentLibrary[data-view="card"] .sl-main{padding-left:12px;padding-right:12px}
  #studentLibrary[data-view="card"] .v22-mode-bar button{font-size:11px;padding:4px 7px}
  #studentLibrary[data-view="card"] .v22-book{min-width:236px}
}
@media (prefers-reduced-motion:reduce){
  #studentLibrary[data-view="card"] .v22-progress-track i{transition:none}
}
#studentLibrary[data-view="card"] .v22-ipa .stage-sound-glyph{width:20px;height:20px;display:block}
#studentLibrary[data-view="card"] .sl-brand.mw-info-brand{display:flex!important}