/* A topic-first library: one clear overview, then a compact lesson path. */
.library-redesign { width:calc(100% - 32px); max-width:min(1000px,calc(100vw - 48px)); margin-inline:auto; min-width:0; }
.library-redesign .search-wrap { margin:24px 0 14px; }
.library-redesign .chips { margin-bottom:28px; padding-bottom:8px; }
.library-redesign .section__header { margin-bottom:18px; }
.library-redesign .section__header h2 { font-size:20px; color:var(--ink); letter-spacing:-.02em; }
.library-area-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.library-area { display:flex; align-items:center; gap:16px; padding:20px; min-width:0; text-align:left; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:24px; box-shadow:var(--shadow-sm); transition:background .18s,border-color .18s; }
.library-area:hover,.library-lesson:hover { background:var(--surface-2); border-color:var(--primary); }
.library-area__symbol,.library-path__symbol { display:grid; place-items:center; flex:none; width:50px; height:50px; border-radius:17px; background:var(--primary-3); color:var(--primary); }
.library-area__copy { min-width:0; flex:1; }
.library-area strong { display:block; font-size:16px; line-height:1.4; }
.library-area small { display:block; color:var(--muted); margin-top:6px; font-size:12px; }
.library-area > .icon { color:var(--muted); flex:none; }
.library-note { display:flex; align-items:flex-start; gap:12px; padding:20px 4px; margin-top:14px; color:var(--muted); font-size:13px; line-height:1.6; }
.library-note .icon { flex:none; width:19px; margin-top:2px; }
.library-path { padding:24px; border:1px solid var(--line); border-radius:26px; background:var(--surface); box-shadow:var(--shadow-sm); margin-bottom:28px; }
.library-path__top { display:flex; gap:14px; align-items:center; }
.library-path__top > div { flex:1; min-width:0; }
.library-path h2 { font-size:21px; line-height:1.3; margin:4px 0 0; color:var(--ink); }
.library-path__top small { font-size:10px; letter-spacing:.08em; color:var(--muted); }
.library-path__top > strong { color:var(--primary); font-size:23px; white-space:nowrap; }
.library-path__top > strong small { font-size:13px; }
.library-path p { color:var(--muted); font-size:14px; line-height:1.6; margin:18px 0; }
.library-path__progress { height:6px; border-radius:6px; overflow:hidden; background:var(--surface-2); }
.library-path__progress > span { display:block; height:100%; background:var(--primary); border-radius:inherit; }
.library-path__next { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:16px; margin-top:20px; text-align:left; background:var(--primary-3); color:var(--ink); border:1px solid var(--line); border-radius:17px; }
.library-path__next > span { min-width:0; }
.library-path__next small { display:block; color:var(--muted); font-size:10px; letter-spacing:.08em; margin-bottom:5px; }
.library-path__next strong { font-size:14px; line-height:1.5; display:block; }
.library-path__next .icon { flex:none; color:var(--primary); }
.library-path__complete { display:flex; gap:10px; margin-top:18px; font-size:14px; color:var(--ink); }
.library-lessons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.library-lesson { display:flex; gap:14px; align-items:center; min-width:0; width:100%; padding:14px; text-align:left; border-radius:21px; border:1px solid var(--line); background:var(--surface); color:var(--ink); transition:background .18s,border-color .18s; }
.library-lesson__image { position:relative; flex:none; width:76px; height:84px; }
.library-lesson img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
.library-lesson__image > small { position:absolute; bottom:5px; left:5px; min-width:22px; padding:3px 5px; text-align:center; border-radius:7px; background:var(--surface); color:var(--ink); font-size:10px; font-weight:700; }
.library-lesson__copy { min-width:0; flex:1; }
.library-lesson__copy > small { display:block; color:var(--primary); font-size:10px; margin-bottom:5px; }
.library-lesson__copy > strong { display:block; font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
.library-lesson__copy > span { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; margin-top:8px; }
.library-lesson > .icon { flex:none; color:var(--muted); }
.library-lesson.is-locked img { filter:saturate(.55); }
.library-redesign button:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
@media(max-width:700px) { .library-lessons { grid-template-columns:minmax(0,1fr); } .library-area { flex-wrap:wrap; gap:12px; padding:16px; border-radius:21px; } .library-area__symbol { width:40px; height:40px; border-radius:14px; } .library-area__copy { flex-basis:100%; order:2; } .library-area > .icon { margin-left:auto; } .library-area strong { font-size:14px; } .library-area small { font-size:11px; } .library-path { padding:18px; } .library-path h2 { font-size:18px; } .library-redesign .section__header h2 { font-size:18px; } }
@media(max-width:360px) { .library-area-grid { gap:9px; } .library-area { padding:13px; } .library-lesson { padding:11px; gap:11px; } .library-lesson__image { width:64px; height:78px; } .library-lesson__copy > strong { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .library-area,.library-lesson { transition:none; } }