:root {
  --library-ink: #edf3f5;
  --library-muted: #91a2b2;
  --library-line: #22364b;
  --library-paper: #07111f;
  --library-panel: #0d1c2d;
  --library-panel-2: #102236;
  --library-blue: #8097ff;
  --library-orange: #ffc277;
}
body { position: relative; overflow-x: hidden; }
body::before, body::after { content: ''; position: fixed; z-index: 0; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; filter: blur(115px); opacity: .1; }
body::before { top: 10%; left: -170px; background: #8097ff; animation: library-glow-a 21s ease-in-out infinite alternate; }
body::after { right: -180px; bottom: 4%; background: #ffc277; animation: library-glow-b 25s ease-in-out infinite alternate; }
.quiz-app { position: relative; z-index: 1; }
.library-main { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 72px 0 110px; }
.library-hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 60px; min-height: 300px; padding-bottom: 58px; border-bottom: 1px solid var(--library-line); }
.library-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 23px; color: var(--library-blue); font: 500 10px 'DM Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.library-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--library-orange); box-shadow: 0 0 0 5px rgba(255,194,119,.14); }
.library-hero h1 { max-width: 720px; margin: 0 0 22px; color: var(--library-ink); font: 600 clamp(52px, 7vw, 88px)/.93 'Space Grotesk', sans-serif; letter-spacing: -.07em; }
.library-hero h1 em { color: var(--library-blue); font-style: normal; }
.library-hero-copy { max-width: 560px; margin: 0; color: var(--library-muted); font-size: 16px; line-height: 1.7; }
.library-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.library-stat { min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border: 1px solid var(--library-line); border-radius: 15px; background: rgba(13,28,45,.72); transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.library-stat:hover { transform: translateY(-3px); border-color: rgba(128,151,255,.7); background: rgba(16,34,54,.9); }
.library-stat strong { color: var(--library-ink); font: 600 32px 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.library-stat span { color: var(--library-muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.library-controls { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(120px, .6fr)); gap: 9px; align-items: center; margin: 36px 0 24px; }
.library-search-wrap { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--library-line); border-radius: 12px; background: rgba(13,28,45,.78); transition: border-color .22s, box-shadow .22s, background .22s; }
.library-search-wrap:focus-within { border-color: var(--library-blue); box-shadow: 0 0 0 3px rgba(128,151,255,.14); background: var(--library-panel-2); }
.library-search-wrap span { color: var(--library-blue); font-size: 18px; }
.library-search { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--library-ink); font: 14px 'DM Sans', sans-serif; }
.library-search::placeholder { color: #718496; }
.library-select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--library-line); border-radius: 12px; outline: 0; background: rgba(13,28,45,.78); color: var(--library-muted); font: 11px 'DM Mono', monospace; cursor: pointer; transition: border-color .22s, color .22s, background .22s; }
.library-select:hover, .library-select:focus { border-color: var(--library-blue); color: var(--library-ink); background: var(--library-panel-2); }
.library-select option { background: var(--library-panel); color: var(--library-ink); }
.library-filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.library-result-label { color: var(--library-muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.library-reset { padding: 7px 11px; border: 1px solid var(--library-line); border-radius: 9px; background: transparent; color: var(--library-muted); font: 10px 'DM Mono', monospace; cursor: pointer; transition: transform .2s, border-color .2s, color .2s, background .2s; }
.library-reset:hover { transform: translateY(-2px); border-color: var(--library-blue); background: rgba(128,151,255,.1); color: var(--library-ink); }
.quiz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.library-card { --card-accent: var(--library-blue); position: relative; min-height: 136px; display: flex; flex-direction: column; padding: 13px 15px 12px; overflow: hidden; border: 1px solid var(--library-line); border-radius: 14px; background: linear-gradient(145deg, rgba(13,28,45,.96), rgba(9,23,38,.92)); color: var(--library-ink); text-decoration: none; isolation: isolate; opacity: 0; animation: library-card-in .56s var(--card-delay, 0ms) cubic-bezier(.22,1,.36,1) both; transition: transform .24s cubic-bezier(.22,1,.36,1), border-color .24s ease, box-shadow .24s ease, background .3s ease; }
.library-card.theme-organic { --card-accent: #ffc477; }
.library-card.theme-physical { --card-accent: #d39a86; }
.library-card.theme-inorganic { --card-accent: #a8a0d6; }
.library-card.theme-analytical { --card-accent: #79b7a8; }
.library-card.theme-biochem { --card-accent: #d2ad68; }
.library-card.theme-general { --card-accent: #8097ff; }
.library-card::before { content: ''; position: absolute; z-index: -1; right: -55px; bottom: -70px; width: 170px; height: 170px; border: 1px solid var(--card-accent); border-radius: 50%; opacity: .18; transform: rotate(-22deg); transition: transform .3s ease, opacity .3s ease; }
.library-card-accent { position: absolute; top: 0; right: 24px; left: 24px; height: 3px; border-radius: 0 0 5px 5px; background: var(--card-accent); opacity: .85; }
.library-card:hover { transform: translateY(-4px); border-color: var(--card-accent); box-shadow: 0 18px 35px rgba(0,0,0,.28); background: linear-gradient(145deg, rgba(16,34,54,.98), rgba(13,28,45,.96)); }
.library-card:hover::before { opacity: .38; transform: translate(-9px,-9px) rotate(18deg); }
.library-card:active { transform: translateY(-1px) scale(.99); }
.library-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--card-accent) 55%, transparent); outline-offset: 4px; }
.library-card-top, .library-card-meta, .library-card-top { margin-bottom: 8px; }
.quiz-code { color: var(--card-accent); font: 500 12px 'DM Mono', monospace; letter-spacing: .1em; }
.subject-badge { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--card-accent) 48%, var(--library-line)); border-radius: 999px; color: var(--card-accent); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.library-card h3 { max-width: none; margin: 0 0 9px; overflow-wrap: anywhere; font: 600 19px/1.25 'Space Grotesk', 'Noto Sans SC', sans-serif; letter-spacing: -.05em; }
.library-card-meta { justify-content: flex-start; flex-wrap: wrap; margin-top: auto; color: var(--library-ink); font: 10px 'DM Mono', monospace; }
.library-card-meta span + span::before { content: '·'; margin-right: 9px; color: #61778a; }
.library-card:hover .library-empty, .library-error { display: grid; place-items: center; min-height: 300px; padding: 40px; border: 1px dashed var(--library-line); border-radius: 18px; text-align: center; }
.library-empty h2, .library-error h1 { margin: 14px 0 8px; font: 600 30px 'Space Grotesk', 'Noto Sans SC', sans-serif; letter-spacing: -.05em; }
.library-empty p, .library-error p { margin: 0 0 18px; color: var(--library-muted); }
.library-kicker { color: var(--library-blue); font: 10px 'DM Mono', monospace; letter-spacing: .1em; }
.library-loading { min-height: 420px; display: grid; place-content: center; text-align: center; color: var(--library-muted); font: 11px 'DM Mono', monospace; }
.library-loading .loading-orbit { margin: 0 auto 15px; }
.library-load-sentinel { min-height: 96px; display: grid; place-content: center; justify-items: center; gap: 10px; margin-top: 28px; color: var(--library-muted); font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; transition: opacity .2s ease, transform .2s ease; }
.library-load-sentinel[hidden] { display: none; }
.library-load-sentinel .loading-orbit { width: 22px; height: 22px; margin: 0; border-color: rgba(128,151,255,.28); border-top-color: var(--library-blue); animation-duration: .8s; }
.library-load-sentinel:not(.is-loading) .loading-orbit { opacity: .45; animation-duration: 2.4s; }
@keyframes library-card-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes library-glow-a { from { transform: translate(-5vw,-3vh) scale(.8); } to { transform: translate(24vw,15vh) scale(1.25); } }
@keyframes library-glow-b { from { transform: translate(4vw,5vh) scale(1.15); } to { transform: translate(-18vw,-15vh) scale(.82); } }
@media (max-width: 900px) {
  .library-main { width: calc(100% - 36px); padding-top: 52px; }
  .library-hero { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .library-controls { grid-template-columns: 1fr 1fr; }
  .library-search-wrap { grid-column: 1 / -1; }
  .quiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .library-main { width: calc(100% - 28px); padding-top: 35px; }
  .library-hero h1 { font-size: 49px; }
  .library-stats { gap: 6px; }
  .library-stat { min-height: 92px; padding: 12px; }
  .library-stat strong { font-size: 25px; }
  .library-stat span { font-size: 8px; }
  .library-controls { grid-template-columns: 1fr; }
  .library-search-wrap { grid-column: auto; }
  .library-filter-bar { align-items: flex-start; }
  .quiz-grid { grid-template-columns: 1fr; }
  .library-card { min-height: 142px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition-duration: .01ms !important; }
}
.library-card.theme-biochem { --card-accent: #62d2bd; }
.library-card.theme-analytical { --card-accent: #d58caf; }


.library-card-arrow{margin-left:auto;color:var(--card-accent);font-size:17px;font-weight:400}.library-card:hover .library-card-arrow{transform:translate(2px,-2px)}
@media(min-width:1280px){.quiz-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.library-card h3{font-size:21px}.library-card-meta{gap:8px}.library-card-top{margin-bottom:10px}}

/* Progress occupies the card's former arrow slot: no card height change. */
.library-card-progress { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; vertical-align: -3px; }
.library-progress-circle { display: block; box-sizing: border-box; flex: 0 0 13px; width: 13px; height: 13px; border: 1px solid var(--card-accent); border-radius: 50%; background: conic-gradient(var(--card-accent) var(--quiz-progress, 0%), transparent 0); }