:root{--rose:#c2185b;--rose-light:#f8bbd0;--rose-pale:#fce4ec;--rose-dark:#880e4f;--plum:#6a1b9a;--plum-light:#e1bee7;--gold:#7a5200;--gold-pale:#fff8e1;--ink:#1a1220;--ink-soft:#3d2b4a;--muted:#7c6880;--muted-on-tint:#6b5470;--border:rgba(194,24,91,0.12);--surface:#fdf6fa;--card:#fff;--shadow:0 2px 20px rgba(106,27,154,0.08);--shadow-hover:0 8px 32px rgba(194,24,91,0.15);--radius:12px;--radius-sm:8px;--green:#2e7d32;--green-pale:#e8f5e9;--font-d:'Playfair Display',Georgia,serif;--font-b:'DM Sans',sans-serif} /* Text size scaling — applied to */ html[data-text-size="md"]{font-size:112%} html[data-text-size="lg"]{font-size:125%} /* ── Extra Large: inline style overrides for static HTML elements ── */ /* "Forgot password?" link: 0.75rem */ html[data-text-size="lg"] #forgot-pw-link{font-size:0.8rem !important} /* ── WCAG 2.5.5 / APCA touch target minimums (44×44px) ───────────────────── All interactive inputs and the "Forgot password?" ghost button must meet the 44px minimum touch target height required by WCAG 2.1 AA (Success Criterion 2.5.5) and the iOS/Android platform HIG guidelines. The forgot-pw-link inline style sets min-height:44px directly on the element. The rule below ensures every text/email/password/url input is at least 44px tall by adjusting vertical padding, without changing the visual border or border-radius. select elements are included for consistency. ────────────── */ input[type=text],input[type=email],input[type=password],input[type=url],select{min-height:44px} textarea{min-height:88px} /* "View all" home button: 0.78rem */ html[data-text-size="lg"] #home-jae-viewall-btn{font-size:0.8rem !important} /* Feedback char counter: 0.72rem */ html[data-text-size="lg"] #fb-char-count{font-size:0.8rem !important} /* Community channels labels: 0.78rem */ html[data-text-size="lg"] .fb-note{font-size:0.85rem} /* Trope selector hint: 0.78rem */ html[data-text-size="lg"] [style*="font-size:.78rem"]{font-size:0.8rem !important} /* Free tile label inline override in preview grid: 0.72rem */ html[data-text-size="lg"] .free-lbl[style]{font-size:0.8rem !important} /* ttrope-plain inline override in preview grid: 0.68rem */ html[data-text-size="lg"] .ttrope-plain[style]{font-size:0.8rem !important} /* ── Extra Large: stat-p / tbkauth / blauth / bltitle adjustments ── */ html[data-text-size="lg"] .stat-p{font-size:0.8rem} html[data-text-size="lg"] .tbkauth{font-size:0.8rem} html[data-text-size="lg"] .blauth{font-size:0.85rem} html[data-text-size="lg"] .btn-approve, html[data-text-size="lg"] .btn-reject{font-size:0.8rem} /* All values below are the minimum needed so that (rem × 20px root) ≥ threshold. Normal size is completely unchanged — these rules only fire at data-text-size="lg". */ /* Avatar email: 0.75rem→15px → raise to 0.8rem→16px */ html[data-text-size="lg"] .avatar-email{font-size:0.8rem} /* Sidebar section labels: 0.75rem→15px 500wt → raise to 0.8rem→16px */ html[data-text-size="lg"] .sb-sect{font-size:0.8rem} /* Tile trope text: clamp floor as low as 0.52rem — clamp is viewport-relative so root scaling doesn't lift it. Override with a fixed rem that scales correctly. */ html[data-text-size="lg"] .ttrope{font-size:0.8rem;padding:3px} html[data-text-size="lg"] .ttrope-plain{font-size:0.8rem;padding:3px} html[data-text-size="lg"] .preview-tile .ttrope{font-size:0.72rem} html[data-text-size="lg"] .preview-tile .ttrope-plain{font-size:0.72rem} /* Free tile label: clamp floor 0.45rem — same fix */ html[data-text-size="lg"] .free-lbl{font-size:0.75rem} /* Book author: 0.75rem→15px → raise to 0.8rem→16px */ html[data-text-size="lg"] .bk-auth{font-size:0.8rem} /* Format pill: 0.68rem→13.6px 700wt — below 14px bold threshold → 0.72rem→14.4px */ html[data-text-size="lg"] .fmt-pill{font-size:0.72rem} /* Trope tags: 0.75rem→15px 500wt → raise to 0.8rem→16px */ html[data-text-size="lg"] .ttag{font-size:0.8rem} /* Form labels: 0.78rem→15.6px 500wt → raise to 0.8rem→16px */ html[data-text-size="lg"] label{font-size:0.8rem} /* Divider "or" text: 0.78rem→15.6px → raise to 0.8rem→16px */ html[data-text-size="lg"] .divider{font-size:0.8rem} /* Footer links/copy/separator: 0.72rem→14.4px → raise to 0.8rem→16px */ html[data-text-size="lg"] .footer-copy, html[data-text-size="lg"] .footer-link, html[data-text-size="lg"] .footer-sep{font-size:0.8rem} /* Filter chips: 0.78rem→15.6px → raise to 0.8rem→16px */ html[data-text-size="lg"] .fchip{font-size:0.8rem} /* Badge text: 0.72rem→14.4px 500wt → raise to 0.8rem→16px */ html[data-text-size="lg"] .badge{font-size:0.8rem} /* ab-trope-badge on assigned book covers: 0.68rem→13.6px 600wt → 0.72rem→14.4px (bold passes) */ html[data-text-size="lg"] .ab-trope-badge{font-size:0.72rem} /* ab-title / ab-author on assigned books: 0.78rem / 0.75rem → raise both to 0.8rem */ html[data-text-size="lg"] .ab-title{font-size:0.8rem} html[data-text-size="lg"] .ab-author{font-size:0.8rem} /* buy-lnk: 0.72rem→14.4px → raise to 0.8rem→16px */ html[data-text-size="lg"] .buy-lnk{font-size:0.8rem} /* bl-date-chip / bl-read-entry / bl-read-again-btn: 0.74–0.76rem → raise to 0.8rem */ html[data-text-size="lg"] .bl-date-chip{font-size:0.8rem} html[data-text-size="lg"] .bl-read-entry{font-size:0.8rem} html[data-text-size="lg"] .bl-read-again-btn{font-size:0.8rem} /* sub-meta / uhint: 0.75 / 0.78rem → raise to 0.8rem */ html[data-text-size="lg"] .sub-meta{font-size:0.8rem} html[data-text-size="lg"] .uhint{font-size:0.8rem} /* status-pill / card-pill: 0.75 / 0.78rem → raise to 0.8rem */ html[data-text-size="lg"] .status-pill{font-size:0.8rem} html[data-text-size="lg"] .card-pill{font-size:0.8rem} /* tchk-l trope checkboxes: 0.78rem → raise to 0.8rem */ html[data-text-size="lg"] .tchk-l{font-size:0.8rem} /* policy-effective date pill: 0.75rem → 0.8rem */ html[data-text-size="lg"] .policy-effective{font-size:0.8rem} /* assigned-books-count: 0.75rem → 0.8rem */ html[data-text-size="lg"] .assigned-books-count{font-size:0.8rem} /* Active state for a11y text-size buttons */ #a11y-text-sm[aria-pressed="true"], #a11y-text-md[aria-pressed="true"], #a11y-text-lg[aria-pressed="true"]{background:var(--rose);color:#fff;border-color:var(--rose)} /* ── A11y Large (112%): scale bingo/gems card wider so tiles have room for bigger text ── */ html[data-text-size="md"] .card-wrap{width:min(100%,min(calc(100vh - 180px),630px));max-width:630px} html[data-text-size="md"] .hcard-wrap{width:min(100%,min(calc(100vh - 160px),540px));max-width:540px} html[data-text-size="md"] #vw-bingo .assigned-books-sect{width:min(100%,min(calc(100vh - 180px),630px));max-width:630px} html[data-text-size="md"] #vw-gems .assigned-books-sect{width:min(100%,min(calc(100vh - 160px),540px));max-width:540px} /* Tile text: override vw-based clamp with a fixed rem that fits the larger tiles */ html[data-text-size="md"] .ttrope{font-size:0.72rem;padding:3px} html[data-text-size="md"] .ttrope-plain{font-size:0.72rem;padding:3px} html[data-text-size="md"] .free-lbl{font-size:0.65rem} html[data-text-size="md"] .bletter{font-size:clamp(1rem,3.5vw,1.7rem)} /* ── A11y Extra Large (125%): scale further so tiles comfortably fit larger text ── */ html[data-text-size="lg"] .card-wrap{width:min(100%,min(calc(100vh - 160px),700px));max-width:700px} html[data-text-size="lg"] .hcard-wrap{width:min(100%,min(calc(100vh - 140px),600px));max-width:600px} html[data-text-size="lg"] #vw-bingo .assigned-books-sect{width:min(100%,min(calc(100vh - 160px),700px));max-width:700px} html[data-text-size="lg"] #vw-gems .assigned-books-sect{width:min(100%,min(calc(100vh - 140px),600px));max-width:600px} /* Tile text at XL: already set to 0.8rem above — ensure padding is generous too */ html[data-text-size="lg"] .ttrope{padding:4px} html[data-text-size="lg"] .ttrope-plain{padding:4px} html[data-text-size="lg"] .free-lbl{font-size:0.72rem} html[data-text-size="lg"] .bletter{font-size:clamp(1.1rem,3.5vw,1.9rem)} *{box-sizing:border-box;margin:0;padding:0} #app-root{display:contents} html{touch-action:pan-x pan-y}body{font-family:var(--font-b);background:var(--surface);color:var(--ink);min-height:100vh;touch-action:pan-x pan-y} nav{background:var(--card);border-bottom:1px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:58px;position:sticky;top:0;z-index:100;will-change:transform} .nav-logo{font-family:var(--font-d);font-size:1.2rem;color:var(--rose-dark);display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap} .nav-logo em{font-style:italic;color:var(--plum)} .nav-links{display:flex;gap:2px;align-items:center} .nav-btn{background:none;border:none;font-family:var(--font-b);font-size:.85rem;color:var(--muted);padding:6px 12px;border-radius:20px;cursor:pointer;transition:all .2s} .nav-btn:hover,.nav-btn.active{color:var(--rose);background:var(--rose-pale)} .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--rose),var(--plum));display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:500;cursor:pointer;position:relative} .avatar-menu{position:absolute;top:40px;right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);min-width:160px;overflow:hidden;display:none;z-index:200} .avatar-menu.open{display:block} .avatar-menu-item{padding:10px 16px;font-size:.85rem;color:var(--ink-soft);cursor:pointer;transition:background .15s;border:none;background:none;width:100%;text-align:left;font-family:var(--font-b)} .avatar-menu-item:hover{background:var(--rose-pale);color:var(--rose)} .avatar-email{padding:10px 16px 6px;font-size:.75rem;color:var(--muted);border-bottom:1px solid var(--border)} .view{display:none;animation:fi .3s ease} .view.active{display:block} @keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:var(--surface)} .hero-wordmark{text-align:center;position:relative;padding:1.4rem 2.4rem;display:inline-block} .hero-wordmark::before,.hero-wordmark::after,.hero-wordmark-bl::before,.hero-wordmark-bl::after{content:'';position:absolute;width:16px;height:16px;border-color:var(--rose);border-style:solid;opacity:.55} .hero-wordmark::before{top:0;left:0;border-width:1.4px 0 0 1.4px} .hero-wordmark::after{top:0;right:0;border-width:1.4px 1.4px 0 0} .hero-wordmark-bl::before{bottom:0;left:0;border-width:0 0 1.4px 1.4px} .hero-wordmark-bl::after{bottom:0;right:0;border-width:0 1.4px 1.4px 0} .hero-wordmark-title{font-family:var(--font-d);font-size:clamp(2rem,6vw,2.6rem);font-weight:600;font-style:italic;color:var(--rose-dark);line-height:1.1} .hero-wordmark-divider{display:block;height:1px;background:var(--rose);opacity:.35;margin:.45rem 0} .hero-wordmark-sub{font-family:var(--font-b);font-size:1rem;letter-spacing:.75rem;color:var(--plum);font-weight:500;padding-left:.75rem} .hero-title{font-family:var(--font-d);font-size:clamp(2.2rem,5vw,3.5rem);color:var(--rose-dark);text-align:center;line-height:1.1;margin-bottom:.5rem} .hero-title em{color:var(--plum)} .auth-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-width:400px;box-shadow:var(--shadow);margin-top:1.5rem} .auth-tabs{display:flex;margin-bottom:1.5rem;border-bottom:1px solid var(--border)} .auth-tab{flex:1;padding:9px;background:none;border:none;font-family:var(--font-b);font-size:.9rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s} .auth-tab.active{color:var(--rose);border-bottom-color:var(--rose);font-weight:500} .fg{margin-bottom:1rem} label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:4px;font-weight:500;letter-spacing:.02em} input[type=text],input[type=email],input[type=password],input[type=url],textarea,select{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-b);font-size:.9rem;color:var(--ink);background:var(--surface);transition:border-color .2s,box-shadow .2s;outline:none} input:focus,textarea:focus,select:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(194,24,91,.08)} .btn-p{width:100%;padding:11px;background:var(--rose);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-b);font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s;margin-top:.5rem;display:flex;align-items:center;justify-content:center;gap:8px} .btn-p:hover:not(:disabled){background:var(--rose-dark);transform:translateY(-1px)} .btn-p:disabled{opacity:.6;cursor:not-allowed;transform:none} .divider{display:flex;align-items:center;gap:10px;color:var(--muted-on-tint);font-size:.78rem;margin:1rem 0} .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)} .sso-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .btn-sso{padding:9px;border:1px solid var(--border);background:var(--card);border-radius:var(--radius-sm);font-family:var(--font-b);font-size:.8rem;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s} .btn-sso:hover:not(:disabled){border-color:var(--rose);color:var(--rose)} .btn-sso:disabled{opacity:.6;cursor:not-allowed} .auth-error{background:#fff0f0;border:1px solid rgba(229,57,53,.25);border-radius:var(--radius-sm);padding:9px 12px;font-size:.82rem;color:#c62828;margin-bottom:1rem;display:none} .auth-error.show{display:block} .auth-success{background:var(--green-pale);border:1px solid rgba(46,125,50,.25);border-radius:var(--radius-sm);padding:9px 12px;font-size:.82rem;color:var(--green);margin-bottom:1rem;display:none} .auth-success.show{display:block} /* loading spinner */ .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0} @keyframes spin{to{transform:rotate(360deg)}} /* loading overlay shown while checking session on page load */ /* Loading screen: fast fade-out so the real page LCP element can paint quickly. The transition + pointer-events:none means the browser can paint beneath it and the SVG text (which waits on font load) is no longer the LCP candidate. */ #loading-screen{position:fixed;inset:0;background:var(--surface);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:12px;transition:opacity 0.15s ease;will-change:opacity} #loading-screen.fade-out{opacity:0;pointer-events:none} #loading-screen .spin{border-color:rgba(194,24,91,.3);border-top-color:var(--rose);width:28px;height:28px;border-width:3px} .main{padding:1.75rem;overflow-y:auto;display:flex;flex-direction:column;min-height:calc(100vh - 58px);will-change:scroll-position;touch-action:pan-x pan-y} .sb-sect{font-size:.75rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;font-weight:500;padding:10px 10px 4px} .sb-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);font-size:.85rem;color:var(--ink-soft);cursor:pointer;transition:all .2s;border:none;background:none;width:100%;text-align:left;font-family:var(--font-b)} .sb-item:hover,.sb-item.active{background:var(--rose-pale);color:var(--rose)} .sb-item.active{font-weight:500} .sb-icon{width:16px;height:16px;opacity:.7;flex-shrink:0} .ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:1rem} .page-title{font-family:var(--font-d);font-size:1.7rem;color:var(--rose-dark)} .page-title small{display:block;font-family:var(--font-b);font-size:.85rem;color:var(--muted);font-weight:400;margin-top:2px} .badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:500} .bg-gold{background:var(--gold-pale);color:var(--gold);border:1px solid rgba(249,168,37,.3)} .bg-rose{background:var(--rose-pale);color:var(--rose);border:1px solid rgba(194,24,91,.2)} .bg-green{background:var(--green-pale);color:var(--green);border:1px solid rgba(46,125,50,.2)} .bg-plum{background:var(--plum-light);color:var(--plum);border:1px solid rgba(106,27,154,.2)} .stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1.25rem} .stat-p{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:.78rem;display:flex;align-items:center;gap:5px} .stat-p strong{color:var(--rose)} .card-wrap{width:min(100%,min(calc(100vh - 220px),560px));max-width:560px} .hcard-wrap{width:min(100%,min(calc(100vh - 200px),480px));max-width:480px} .bcols{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(3px,1.2vw,7px);margin-bottom:4px} .bletter{font-family:var(--font-d);font-size:clamp(.9rem,3.5vw,1.7rem);font-weight:600;text-align:center;line-height:1} .bl-b{color:#e91e63}.bl-i{color:#9c27b0}.bl-n{color:#e91e63}.bl-g{color:#9c27b0}.bl-o{color:#e91e63} .bgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(3px,1.2vw,7px)} .hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(3px,1.2vw,7px)} .btile{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;touch-action:pan-x pan-y} .btile:hover{border-color:var(--rose);box-shadow:var(--shadow-hover);transform:translateY(-2px)} .btile:focus-visible{outline:3px solid var(--rose);outline-offset:2px;border-color:var(--rose);box-shadow:var(--shadow-hover);z-index:1} .btile.filled{border-color:rgba(194,24,91,.35)} .btile.bline{border-color:var(--green);box-shadow:0 0 0 2px var(--green-pale)} .btile.free{background:linear-gradient(135deg,var(--rose-pale),var(--plum-light));border-color:var(--rose)} .tcov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55} .tovl{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,18,32,.85) 40%,transparent 100%)} .ttrope{position:relative;z-index:1;font-size:clamp(.52rem,1.4vw,.72rem);font-weight:500;color:#fff;text-align:center;padding:clamp(2px,0.8vw,5px) 3px;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.5)} .ttrope-plain{font-size:clamp(.52rem,1.4vw,.72rem);font-weight:500;color:var(--muted);text-align:center;padding:clamp(2px,0.8vw,5px) 3px;line-height:1.3} .tchk{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;z-index:2} .free-lbl{font-family:var(--font-d);font-size:clamp(.45rem,1.3vw,.72rem);color:var(--rose-dark);font-style:italic;font-weight:600;text-align:center;line-height:1.25;padding:0 3px} .sbar{display:flex;gap:8px;margin-bottom:1.25rem;align-items:center;flex-wrap:wrap} .siw{flex:1;min-width:200px;position:relative} .siw input{padding-left:34px} .s-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none} .fchip{padding:6px 12px;border:1px solid var(--border);border-radius:20px;background:var(--card);font-size:.78rem;color:var(--muted);cursor:pointer;transition:all .2s;font-family:var(--font-b);white-space:nowrap} .fchip:hover,.fchip.active{border-color:var(--rose);color:var(--rose);background:var(--rose-pale)} .books-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px} .bk-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .25s;position:relative;display:flex;flex-direction:column;touch-action:pan-x pan-y;will-change:transform} .bk-card:hover{border-color:var(--rose);box-shadow:var(--shadow-hover);transform:translateY(-2px)} .bk-card:focus-within{border-color:var(--rose);box-shadow:var(--shadow-hover)} .bk-card-btn{display:flex;flex-direction:column;width:100%;text-align:left;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;flex:1;align-items:stretch} .bk-card-btn:focus-visible{outline:2px solid var(--rose);outline-offset:-2px;border-radius:var(--radius) var(--radius) 0 0} .bk-cov{width:100%;aspect-ratio:2/3;object-fit:cover} .bk-cov-ph{width:100%;aspect-ratio:2/3;background:linear-gradient(135deg,var(--rose-pale),var(--plum-light));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--plum)} .bk-info{padding:9px} .bk-title{font-family:var(--font-d);font-size:.83rem;font-weight:600;color:var(--ink);margin-bottom:2px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bk-auth{font-size:.75rem;color:var(--muted)} .bk-acts{display:flex;gap:4px;padding:0 9px 9px;margin-top:auto;align-items:center} .ibtn{width:28px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--muted);flex-shrink:0} .ibtn:hover{border-color:var(--rose);color:var(--rose);background:var(--rose-pale)} .ibtn.active{background:var(--rose);color:#fff;border-color:var(--rose)} .ibtn svg{width:13px;height:13px} .fmt-badges{display:flex;gap:4px;padding:0 9px 7px;flex-wrap:wrap} .fmt-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:.7rem;font-weight:600;background:var(--rose-pale);color:var(--rose-dark);border:1px solid rgba(194,24,91,.2);white-space:nowrap;pointer-events:none;user-select:none} .fmt-badge svg{width:11px;height:11px;flex-shrink:0} .fmt-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:.68rem;font-weight:700;background:var(--rose);color:#fff;white-space:nowrap;pointer-events:none;user-select:none;flex-shrink:0} .fmt-pill svg{width:13px;height:13px;flex-shrink:0} .ttags{padding:0 9px 7px;display:flex;flex-wrap:wrap;gap:3px} .ttag{font-size:.75rem;padding:2px 7px;background:var(--plum-light);color:var(--plum);border-radius:10px;font-weight:500} .modal-ov{position:fixed;inset:0;background:rgba(26,18,32,.6);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s;will-change:opacity} .modal-ov.open{opacity:1;pointer-events:all} .modal{background:var(--card);border-radius:var(--radius);padding:1.75rem;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);transform:translateY(20px);transition:transform .2s} .modal-ov.open .modal{transform:translateY(0)} .mhdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem} .mtitle{font-family:var(--font-d);font-size:1.3rem;color:var(--rose-dark)} .cbtn{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0} .cbtn:hover{background:var(--rose-pale);color:var(--rose)} .tbklist{display:flex;flex-direction:column;gap:9px;margin-bottom:1.25rem} .tbkrow{display:flex;gap:10px;align-items:center;padding:9px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s} .tbkrow:hover,.tbkrow.sel{border-color:var(--rose);background:var(--rose-pale)} .tbkrow:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-color:var(--rose)} .tbkthumb{width:42px;height:63px;object-fit:cover;border-radius:4px;flex-shrink:0;background:linear-gradient(135deg,var(--rose-pale),var(--plum-light))} .tbkmeta{flex:1} .tbktitle{font-weight:500;font-size:.88rem;color:var(--ink)} .tbkauth{font-size:.78rem;color:var(--muted);margin-top:2px} .list-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.25rem} .lt{padding:9px 18px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:var(--font-b);font-size:.88rem;color:var(--muted);cursor:pointer;transition:all .2s} .lt.active{color:var(--rose);border-bottom-color:var(--rose);font-weight:500} .blrow{display:flex;gap:14px;align-items:flex-start;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:9px;transition:all .2s} .blrow:hover{border-color:var(--rose);box-shadow:var(--shadow-hover)} .blrow:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-color:var(--rose)} .blthumb{width:56px;height:84px;object-fit:cover;border-radius:5px;flex-shrink:0;background:linear-gradient(135deg,var(--rose-pale),var(--plum-light))} .blinfo{flex:1} .bltitle{font-family:var(--font-d);font-size:.95rem;color:var(--ink);margin-bottom:2px} .blauth{font-size:.82rem;color:var(--muted);margin-bottom:6px} .buy-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px} .buy-lnk{font-size:.72rem;padding:3px 9px;border:1px solid var(--border);border-radius:20px;color:var(--plum);background:var(--card);text-decoration:none;transition:all .2s} .buy-lnk:hover{background:var(--plum-light);border-color:var(--plum)} .submit-sec{max-width:680px} .frow{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} .fsect{font-family:var(--font-d);font-size:.95rem;color:var(--plum);margin:1.4rem 0 .7rem;padding-bottom:5px;border-bottom:1px solid var(--border)} .tpicker{display:flex;flex-wrap:wrap;gap:5px} .tchk-l{display:flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--border);border-radius:20px;cursor:pointer;font-size:.78rem;color:var(--muted);transition:all .2s;user-select:none} .tchk-l input{display:none} .tchk-l:has(input:checked){background:var(--rose-pale);color:var(--rose);border-color:var(--rose);font-weight:500} .url-v{border-color:var(--green)!important} .url-x{border-color:#e53935!important} .uhint{font-size:.78rem;margin-top:3px} .uhint.ok{color:var(--green)} .uhint.err{color:#e53935} textarea{min-height:95px;resize:vertical} .cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:1.25rem} .cp{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;cursor:pointer;transition:all .2s} .cp:hover{border-color:var(--rose);box-shadow:var(--shadow-hover)} .cp:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-color:var(--rose);box-shadow:var(--shadow-hover)} .mini-bg{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:10px 0} .mini-hg{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:10px 0} .mt{aspect-ratio:1;border-radius:2px;background:var(--surface);border:1px solid var(--border)} .mt.filled{background:var(--rose-pale);border-color:var(--rose)} .mt.bingo{background:var(--green-pale);border-color:var(--green)} .mt.free{background:linear-gradient(135deg,var(--rose-pale),var(--plum-light));border-color:var(--rose)} .pb-w{height:5px;background:var(--surface);border-radius:3px;overflow:hidden;margin-top:7px} .pb-f{height:100%;background:linear-gradient(90deg,var(--rose),var(--plum));border-radius:3px;transition:width .5s} .card-switcher{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem;align-items:center} .sub-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:9px;transition:border-color .2s} .sub-row:hover{border-color:var(--rose)} .sub-meta{font-size:.75rem;color:var(--muted);margin-top:3px} .sub-tropes{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px} .sub-acts{display:flex;flex-direction:column;gap:6px;flex-shrink:0;min-width:90px} .btn-approve{padding:7px 12px;background:var(--green);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-b);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .2s;width:100%} .btn-approve:hover{background:#1b5e20} .btn-reject{padding:7px 12px;background:none;border:1px solid #e57373;color:#c62828;border-radius:var(--radius-sm);font-family:var(--font-b);font-size:.78rem;cursor:pointer;transition:all .2s;width:100%} .btn-reject:hover{background:#fff0f0} .status-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:.75rem;font-weight:500} .sp-pending{background:var(--gold-pale);color:#5d4037;border:1px solid rgba(249,168,37,.3)} .sp-approved{background:var(--green-pale);color:var(--green);border:1px solid rgba(46,125,50,.2)} .sp-rejected{background:#fff0f0;color:#c62828;border:1px solid rgba(229,57,53,.2)} .sp-requested{background:var(--plum-light);color:var(--plum);border:1px solid rgba(106,27,154,.2)} .sp-completed{background:var(--green-pale);color:var(--green);border:1px solid rgba(46,125,50,.2)} .card-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--border);border-radius:20px;font-size:.78rem;color:var(--muted);background:var(--card);cursor:pointer;transition:all .2s;font-family:var(--font-b);white-space:nowrap} .card-pill:hover{border-color:var(--rose);color:var(--rose)} .card-pill.active{background:var(--rose);color:#fff;border-color:var(--rose);font-weight:500} .card-pill .pill-del{width:14px;height:14px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:.6;flex-shrink:0;background:none;border:none;cursor:pointer;color:inherit;padding:0;line-height:1} .card-pill.active .pill-del{opacity:.8} .card-pill .pill-del:hover{opacity:1} .card-pill .pill-del:focus-visible{outline:2px solid currentColor;outline-offset:2px;opacity:1;border-radius:50%} /* ── Assigned books list ── */ .assigned-books-sect{margin-top:1.75rem} #vw-bingo .assigned-books-sect{width:min(100%,min(calc(100vh - 220px),560px));max-width:560px} #vw-gems .assigned-books-sect{width:min(100%,min(calc(100vh - 200px),480px));max-width:480px} .assigned-books-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)} .assigned-books-title{font-family:var(--font-d);font-size:1rem;color:var(--ink-soft)} .assigned-books-count{font-size:.75rem;color:var(--muted);font-weight:500} .assigned-books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px} .ab-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:all .22s;position:relative} .ab-card:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-color:var(--rose);box-shadow:var(--shadow-hover)} .ab-card:hover{border-color:var(--rose);box-shadow:var(--shadow-hover);transform:translateY(-2px)} .ab-cover-wrap{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;background:linear-gradient(135deg,var(--rose-pale),var(--plum-light))} .ab-cover-wrap img{width:100%;height:100%;object-fit:cover;display:block} .ab-trope-badge{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(26,18,32,.9) 0%,transparent 100%);padding:18px 6px 5px;font-size:.68rem;font-weight:600;color:rgba(255,255,255,.95);line-height:1.25;text-align:center;letter-spacing:.01em} .ab-info{padding:7px 7px 8px} .ab-title{font-family:var(--font-d);font-size:.78rem;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px} .ab-author{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .assigned-empty{padding:1.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;font-size:.82rem;color:var(--muted)} .preview-grid-bingo{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:12px 0} .preview-grid-gems{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:12px 0} .preview-tile{aspect-ratio:1;border-radius:6px;border:1.5px solid var(--border);background:var(--card);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:72px} .preview-tile.filled{border-color:rgba(194,24,91,.35)} .preview-tile.bline{border-color:var(--green);box-shadow:0 0 0 2px var(--green-pale)} .preview-tile.free{background:linear-gradient(135deg,var(--rose-pale),var(--plum-light));border-color:var(--rose)} .preview-tile .tcov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55} .preview-tile .tovl{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,18,32,.85) 40%,transparent 100%)} .preview-tile .ttrope{position:relative;z-index:1;font-size:.68rem;font-weight:500;color:#fff;text-align:center;padding:4px 3px;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.5)} .preview-tile .ttrope-plain{font-size:.68rem;font-weight:500;color:var(--muted);text-align:center;padding:4px 3px;line-height:1.3} .preview-tile .tchk{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;z-index:2} .preview-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px} .toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--radius-sm);font-size:.85rem;z-index:999;transform:translateY(80px);opacity:0;transition:all .3s;box-shadow:0 4px 20px rgba(0,0,0,.3);will-change:transform,opacity} .toast.show{transform:translateY(0);opacity:1} .empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)} .empty svg{width:44px;height:44px;margin-bottom:.75rem;opacity:.4} .empty-t{font-family:var(--font-d);font-size:1rem;color:var(--ink-soft);margin-bottom:.4rem} .btn-s{padding:7px 14px;border:1px solid var(--rose);border-radius:var(--radius-sm);background:none;color:var(--rose);font-family:var(--font-b);font-size:.85rem;cursor:pointer;transition:all .2s} .btn-s:hover{background:var(--rose-pale)} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ── List enhancements ── */ .list-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--rose-pale);color:var(--rose);border-radius:9px;font-size:.72rem;font-weight:600;margin-left:5px;vertical-align:middle} .lt.active .list-count{background:var(--rose);color:#fff} .bl-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px} .bl-date-chip{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2px 9px;cursor:pointer;transition:all .2s;user-select:none;white-space:nowrap} .bl-date-chip:hover{border-color:var(--rose);color:var(--rose)} .bl-date-inp{font-size:.82rem;font-family:var(--font-b);color:var(--ink);border:1px solid var(--rose);border-radius:var(--radius-sm);padding:4px 8px;outline:none;background:var(--card);box-shadow:0 0 0 3px rgba(194,24,91,.08);width:auto;display:none} .bl-date-inp.open{display:inline-block} .bl-read-history{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:3px} .bl-read-entry{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted)} .bl-read-again-btn{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;padding:3px 10px;border:1px dashed var(--plum);border-radius:20px;color:var(--plum);background:none;cursor:pointer;font-family:var(--font-b);transition:all .2s;margin-top:4px;align-self:flex-start} .bl-read-again-btn:hover{background:var(--plum-light);border-style:solid} @media(max-width:720px){.page-layout{grid-template-columns:1fr}.main{padding:1rem;min-height:calc(100vh - 58px)}.frow{grid-template-columns:1fr}} /* ── Global keyboard focus ring (WCAG 2.4.7) ── */ :focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:var(--radius-sm)} /* Override for inputs which have their own focus treatment */ input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none} .nav-logo:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:var(--radius-sm)} .avatar:focus-visible{outline:2px solid var(--rose);outline-offset:3px} /* Home CTA cards — keyboard accessible */ .home-cta-card:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-color:var(--rose);box-shadow:var(--shadow-hover)} /* Home book cards — keyboard accessible */ .home-bk:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-color:var(--rose);box-shadow:var(--shadow-hover)} /* Home rank list rows — keyboard accessible */ .home-rank-row:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:var(--radius-sm)} /* ── Footer ── */ #site-footer{background:var(--card);border-top:1px solid var(--border);padding:14px 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px} .footer-copy{font-size:.72rem;color:var(--muted)} .footer-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .footer-link{background:none;border:none;font-family:var(--font-b);font-size:.72rem;color:var(--muted);cursor:pointer;padding:3px 7px;border-radius:20px;transition:all .18s;text-decoration:none} .footer-link:hover{color:var(--rose);background:var(--rose-pale)} .footer-sep{color:var(--border);font-size:.72rem;user-select:none} /* ── Policy modal ── */ .policy-body{font-size:.88rem;color:var(--ink-soft);line-height:1.8;max-height:65vh;overflow-y:auto;padding-right:4px} .policy-body h2{font-family:var(--font-d);font-size:1.05rem;color:var(--rose-dark);margin:1.4rem 0 .4rem} .policy-body h2:first-child{margin-top:0} .policy-body p{margin-bottom:.75rem} .policy-body ul{padding-left:1.25rem;margin-bottom:.75rem} .policy-body ul li{margin-bottom:.3rem} .policy-body a{color:var(--plum);text-decoration:underline} .policy-effective{display:inline-block;font-size:.75rem;color:var(--muted);margin-bottom:1.1rem;padding:3px 10px;background:var(--surface);border-radius:20px;border:1px solid var(--border)} /* ── Toggle switch ── */ .toggle-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;user-select:none;transition:border-color .2s} .toggle-row:hover{border-color:var(--rose)} .toggle-row input[type=checkbox]{display:none} .toggle-track{width:38px;height:22px;background:#d4c5d9;border-radius:11px;flex-shrink:0;position:relative;transition:background .2s} .toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s} .toggle-row input:checked+.toggle-track{background:var(--rose)} .toggle-row input:checked+.toggle-track::after{transform:translateX(16px)} .toggle-label{font-size:.85rem;color:var(--ink-soft);line-height:1.4} .toggle-label strong{display:block;color:var(--ink);font-weight:500;font-size:.88rem} /* ── Feedback admin card note box ── */ .fb-note{margin-top:8px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.83rem;color:var(--ink-soft);line-height:1.7;white-space:pre-line} /* ── Nav feedback button ── */ .nav-btn-feedback{background:none;border:1px solid var(--border);font-family:var(--font-b);font-size:.82rem;color:var(--ink-soft);padding:5px 13px;border-radius:20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:5px} .nav-btn-feedback:hover{border-color:var(--rose);color:var(--rose);background:var(--rose-pale)} @media(max-width:640px){ .nav-feedback-label{display:none} .nav-btn-feedback{padding:5px 8px} } /* ── Landing page ── */ .home-wrap{max-width:980px;margin:0 auto;padding:2rem 1.75rem 3rem} .home-hero{background:linear-gradient(135deg,var(--rose-pale) 0%,var(--plum-light) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 2rem;margin-bottom:2rem;position:relative} .home-hero::before{display:none} .home-hero-title{font-family:var(--font-d);font-size:clamp(1.6rem,3.5vw,2.4rem);color:var(--rose-dark);margin-bottom:.5rem;line-height:1.15} .home-hero-title em{color:var(--plum)} .home-hero-sub{font-size:.95rem;color:var(--ink-soft);max-width:620px;line-height:1.7;margin-bottom:1.25rem} .home-hero-links{display:flex;gap:9px;flex-wrap:wrap} .home-sect{margin-bottom:2.5rem} .home-sect-hdr{display:flex;align-items:center;gap:10px;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)} .home-sect-title{font-family:var(--font-d);font-size:1.25rem;color:var(--rose-dark)} .home-sect-sub{font-size:.78rem;color:var(--muted)} .home-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2.5rem} @media(max-width:680px){.home-2col{grid-template-columns:1fr}.home-hero-icon{display:none}} .home-cta-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;transition:all .2s;cursor:pointer} .home-cta-card:hover{border-color:var(--rose);box-shadow:var(--shadow-hover);transform:translateY(-2px)} .home-cta-icon{font-size:1.6rem;margin-bottom:.6rem} .home-cta-title{font-family:var(--font-d);font-size:1.05rem;color:var(--rose-dark);margin-bottom:.35rem} .home-cta-body{font-size:.82rem;color:var(--ink-soft);line-height:1.65} .home-books-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px} .home-bk{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:all .22s} .home-bk:hover{border-color:var(--rose);box-shadow:var(--shadow-hover);transform:translateY(-2px)} .home-bk-cov{width:100%;aspect-ratio:2/3;object-fit:cover;display:block} .home-bk-cov-ph{width:100%;aspect-ratio:2/3;background:linear-gradient(135deg,var(--rose-pale),var(--plum-light));display:flex;align-items:center;justify-content:center;color:var(--plum)} .home-bk-info{padding:7px 8px 8px} .home-bk-title{font-family:var(--font-d);font-size:.75rem;font-weight:600;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .home-bk-auth{font-size:.75rem;color:var(--muted);margin-top:2px} .home-bk-badge{font-size:.72rem;font-weight:600;padding:2px 6px;border-radius:10px;display:inline-block;margin-top:3px} .home-loading{text-align:center;padding:2rem;color:var(--muted);font-size:.85rem} /* ── Mobile hamburger & sidebar overlay ── */ .hamburger-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--ink-soft);cursor:pointer;flex-shrink:0;transition:all .2s} .hamburger-btn:hover{border-color:var(--rose);color:var(--rose);background:var(--rose-pale)} /* Sidebar is hoisted to body by JS so position:fixed always works */ .sidebar{background:var(--card);border-right:1px solid var(--border);padding:1.25rem .75rem;display:flex;flex-direction:column;gap:2px;position:fixed;top:58px;left:0;bottom:0;width:210px;z-index:150;overflow-y:auto;will-change:transform} .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(26,18,32,.5);z-index:149;opacity:0;transition:opacity .25s;pointer-events:none;will-change:opacity} .sidebar-backdrop.open{opacity:1;pointer-events:all} @media(min-width:641px){ /* Desktop: sidebar is always visible as a fixed left panel; main gets a left margin */ .sidebar{transform:none !important} .page-layout{display:block;min-height:calc(100vh - 58px)} .main{margin-left:210px} } @media(max-width:640px){ .hamburger-btn{display:flex} .nav-logo-icon{display:none} .page-layout{display:block;min-height:calc(100vh - 58px)} .sidebar{width:240px;transform:translateX(-100%);transition:transform .28s ease;box-shadow:4px 0 24px rgba(26,18,32,.18)} .sidebar.mobile-open{transform:translateX(0)} .sidebar-backdrop{display:block} .main{padding:1.25rem;margin-left:0} /* Bingo / gems grids: tighten gap on small screens */ .bcols,.bgrid,.hgrid{gap:3px} /* Scale bingo tiles font for narrow screens */ .ttrope,.ttrope-plain{font-size:.5rem;padding:2px} .bletter{font-size:clamp(.75rem,4.5vw,1.2rem)} } /* ── REFACTORED: classes replacing inline styles ───────────────────────────── These replace all inline style="" attributes previously in JS templates, allowing style to be removed from DOMPurify's ALLOWED_ATTR. */ /* ── No-card prompts (bingo & gems) ── */ .no-card-prompt{text-align:center;padding:3rem 1rem;max-width:680px} .no-gems-prompt{text-align:center;padding:3rem 1rem;max-width:560px} .prompt-emoji{font-size:3rem;margin-bottom:1rem} .prompt-heading{font-family:var(--font-d);font-size:1.4rem;color:var(--rose-dark);margin-bottom:.5rem} .prompt-sub{font-size:.9rem;color:var(--muted);margin-bottom:1.5rem} .btn-p-auto{width:auto;padding:11px 28px} /* ── Bingo tile inner layouts ── */ .free-tile-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1px,0.5vw,5px);padding:4px} .free-tile-star{font-size:clamp(.8rem,2.5vw,1.4rem);line-height:1} .tile-empty-inner{flex:1;display:flex;align-items:center;justify-content:center;padding:6px} .tile-empty-inner--sm{flex:1;display:flex;align-items:center;justify-content:center;padding:4px;width:100%} /* ── Tile: no-cover background ── */ .btile--no-cover{background:linear-gradient(135deg,var(--rose-pale),var(--plum-light))} /* ── Preview tile (card preview modal) ── */ .preview-tile--center{justify-content:center} .preview-free-inner{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px} .preview-free-star{font-size:1rem} .free-lbl--sm{font-size:.72rem} .ttrope-plain--sm{font-size:.68rem} /* ── Tile modal empty state ── */ .empty--tile{padding:1.5rem 0} /* ── Tile modal tag row ── */ .ttags--modal{padding:0;margin-top:5px} /* ── Book card acts spacer ── */ .bk-acts-spacer{flex:1} .fmt-pill--ku{letter-spacing:.04em} .fmt-badge--ku{letter-spacing:.03em} .fmt-pill--noshrink{flex-shrink:0} /* ── Book grid: empty / load-more ── */ .books-grid-full{grid-column:1/-1} .books-load-more{grid-column:1/-1;text-align:center;padding:1rem} /* ── Book modal: cover/meta layout ── */ .bk-modal-body{display:flex;gap:1.25rem;flex-wrap:wrap} .bk-modal-cover{width:110px;height:165px;object-fit:cover;border-radius:7px;flex-shrink:0} .bk-modal-cover-ph{width:110px;height:165px;background:linear-gradient(135deg,#fce4ec,#e1bee7);border-radius:7px;flex-shrink:0} .bk-modal-meta{flex:1;min-width:180px} .bk-modal-byline{font-size:.88rem;color:var(--muted);margin-bottom:7px} .ttags--mb{padding:0;margin-bottom:10px} .bk-modal-fmt{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px} .bk-modal-synopsis{font-size:.85rem;color:var(--ink-soft);line-height:1.7;margin-bottom:.9rem;white-space:pre-line} .bk-modal-acts{display:flex;gap:7px;margin-top:.9rem} .ibtn--inline{width:auto;padding:0 12px;gap:5px;font-size:.78rem} /* ── My List row ── */ .blrow--clickable{cursor:pointer} .ttags--list{padding:0;margin:4px 0} .list-error{background:#fff0f0;border:1px solid rgba(229,57,53,.3);border-radius:10px;padding:1.25rem;max-width:640px;text-align:left} .list-error-title{font-weight:600;color:#b71c1c;margin-bottom:6px} .list-error-body{font-size:.8rem;color:#7f1010;margin-top:4px} .ibtn--trash{width:20px;height:20px;flex-shrink:0} .read-count-lbl{font-size:.72rem;color:var(--muted);margin-bottom:3px;font-weight:500} /* ── My Cards ── */ .cp-header{display:flex;justify-content:space-between;align-items:flex-start;gap:6px} .cp-type{font-family:var(--font-d);font-size:.88rem;color:var(--rose-dark)} .cp-count{font-size:.72rem;color:var(--muted);margin-top:1px} .cards-year-group{margin-bottom:1.5rem} .cards-year-heading{font-family:var(--font-d);font-size:1.1rem;color:var(--ink-soft);margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)} .cg--flush{margin-top:0} /* ── Home rank list ── */ .home-rank-row--inner{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer} .home-rank-num{font-family:var(--font-d);font-size:1rem;color:var(--muted);min-width:18px;text-align:right} .home-rank-cover{width:34px;height:51px;object-fit:cover;border-radius:3px;flex-shrink:0} .home-rank-cover-ph{width:34px;height:51px;background:linear-gradient(135deg,var(--rose-pale),var(--plum-light));border-radius:3px;flex-shrink:0} .home-rank-text{flex:1;min-width:0} .home-rank-title{font-size:.82rem;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical} .home-rank-author{font-size:.72rem;color:var(--muted)} .home-rank-badge-wrap{flex-shrink:0} .empty--pad{padding:1rem 0} .empty--sm-pad{padding:1.5rem 0} /* ── Home setup message ── */ .setup-msg{background:#fff8e1;border:1px solid rgba(249,168,37,.35);border-radius:8px;padding:.9rem 1rem;font-size:.78rem;color:#5d4037;max-width:480px} .setup-msg a{color:var(--plum)} .setup-msg pre{margin:.5rem 0 0;font-size:.72rem;white-space:pre-wrap;word-break:break-word} /* ── Admin / submit views ── */ .fsect--flush{margin-top:0} .buy-lnk--sm{font-size:.72rem} .sub-row--static{cursor:default} .sub-url{font-size:.85rem;font-weight:500;color:var(--ink);word-break:break-all} .sub-links-col{display:flex;flex-direction:column;gap:4px;align-items:flex-end} .update-row-meta{min-width:0} .update-book-title{font-size:.92rem;font-weight:600;color:var(--ink)} .update-book-author{font-size:.78rem;color:var(--muted);margin-bottom:4px} .update-notes{margin-top:8px;padding:9px 11px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.82rem;color:var(--ink-soft);line-height:1.7;white-space:pre-line} .sub-acts--w{min-width:100px} .status-pill--end{align-self:flex-end} .btn-approve--mt{margin-top:6px} .sub-link-row{display:flex;align-items:baseline;gap:6px;margin-top:5px} .sub-link-label{font-size:.72rem;font-weight:500;color:var(--muted);white-space:nowrap;min-width:76px} .sub-link-url{font-size:.75rem;color:var(--plum);word-break:break-all;line-height:1.4} .sub-gr-url{font-size:.88rem;font-weight:500;color:var(--plum);word-break:break-all} .sub-gr-invalid{font-size:.88rem;color:var(--muted)} .sub-synopsis{font-size:.8rem;color:var(--muted);margin-top:5px;line-height:1.5} .sub-reject{margin-top:6px;font-size:.78rem;color:#c62828} .sub-scrape-err{margin-top:6px;font-size:.78rem;color:#c62828;font-family:monospace} .sub-meta--mt{margin-top:4px} .sub-meta--mt5{margin-top:5px} .sub-status{font-size:.78rem;color:var(--muted);text-align:right} .loading-inline{padding:1rem;color:var(--muted);font-size:.85rem} .fb-name{font-size:.92rem;font-weight:600;color:var(--ink)} .fb-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px} .fb-wants-reply{font-size:.75rem} .fb-no-reply{font-size:.72rem;color:var(--muted)} .fb-email{font-size:.75rem;color:var(--plum);margin-bottom:3px} .fb-userid{font-size:.72rem;color:var(--muted);margin-bottom:3px} .fb-row--static{cursor:default} .fb-meta{min-width:0} .update-req-meta{min-width:100px} .sub-notes-req{font-size:.82rem;color:var(--ink-soft);margin-top:6px;line-height:1.6;white-space:pre-line} /* ── Preview modal loading placeholder ── */ .preview-loading{text-align:center;padding:1.5rem;color:var(--muted);font-size:.85rem}