.library{max-width:1160px;margin:0 auto;padding:clamp(1rem,4vw,3.5rem) clamp(.25rem,2vw,1rem) 4rem;color:var(--color-base-content)}
.library-header{max-width:680px;margin-bottom:clamp(2rem,5vw,3.5rem)}
.library-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--color-primary);margin:0 0 .45rem}
.library-header h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;letter-spacing:-.045em;font-weight:700;margin:0 0 .85rem}
.library-header>p:last-child,.library-description,.library-book-title p,.library-empty{color:color-mix(in srgb,var(--color-base-content) 70%,transparent);line-height:1.55}
.library-header>p:last-child{font-size:1.05rem}
.library-group{background:var(--color-base-100);border:1px solid var(--color-base-300);border-radius:1.25rem;margin:0 0 1.25rem;padding:clamp(1.1rem,3vw,2rem);box-shadow:0 12px 36px -28px color-mix(in srgb,var(--color-base-content) 35%,transparent)}
.library-group-header{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.library-group h2{font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.15;font-weight:700;letter-spacing:-.025em}
.library-description{margin-top:.4rem;max-width:42rem}
.library-group-actions,.library-book-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.library-group-actions a,.library-book-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.5rem .85rem;border:1px solid var(--color-base-300);border-radius:.65rem;font-size:.875rem;font-weight:600;line-height:1.2;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.library-group-actions a{color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-base-300));gap:.35rem}
.library-group-actions a:hover,.library-book-actions a:hover{background:var(--color-base-200);border-color:var(--color-primary)}
.library a:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px}
.library-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:.5rem}
.library-book{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.5rem .5rem .5rem .85rem;border:1px solid var(--color-base-300);border-radius:.75rem;background:var(--color-base-200)}
.library-book-title{flex:1 1 4rem;min-width:0}.library-book-title h3{overflow-wrap:anywhere;font-size:1rem;font-weight:700;line-height:1.3}.library-book-title p{font-size:.85rem;margin-top:.1rem;line-height:1.3}
.library-book-actions{gap:.35rem}.library-book-actions a{background:var(--color-base-100);min-height:2.5rem;padding:.35rem .65rem;font-size:.8rem}
.library-book-actions a:first-child{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-content)}
.library-book-actions a:first-child:hover{filter:brightness(.92)}
.library-empty{font-size:.9rem}
@media(max-width:540px){.library-group-header{align-items:flex-start}.library-group-actions{width:100%}.library-group-actions a{flex:1 1 auto}}
.library-back{display:inline-block;margin-bottom:1.25rem;font-size:.875rem;font-weight:600;color:var(--color-primary);text-decoration:none}
.library-back:hover{text-decoration:underline}
.library-search{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:1rem}
.library-search input{flex:1 1 16rem;max-width:28rem;min-height:2.75rem}
.library-count{font-size:.875rem;color:color-mix(in srgb,var(--color-base-content) 70%,transparent)}
.library-songs{display:flex;flex-direction:column;gap:.4rem}
.library-songs .library-book-title{flex-basis:12rem}
.library-badge{display:inline-block;margin-left:.25rem;padding:0 .4rem;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.4;background:var(--color-base-300);vertical-align:middle}
.login{max-width:30rem}
.login-form{display:grid;gap:1rem}
.login-form label{display:grid;gap:.35rem;font-size:.8rem;font-weight:700;color:color-mix(in srgb,var(--color-base-content) 75%,transparent)}
.login-form input{width:100%;min-height:2.75rem;font-size:1rem;font-weight:400}
.login-form .btn{justify-self:start}
.login-error{color:var(--color-error);font-size:.9rem}
.library-logout{float:right;font-size:.875rem;font-weight:600;color:var(--color-primary);text-decoration:none}