@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";
*{box-sizing:border-box;margin:0;padding:0}:root{--cream:#f5f0e8;--warm-white:#faf8f4;--aluminium:#d4d0c8;--aluminium-dark:#b8b4ac;--charcoal:#2c2c2c;--graphite:#4a4a4a;--slate:#6b6b6b;--amber:#d4830a;--amber-glow:#e8940b;--amber-dim:#c47a09;--inset-shadow:inset 0 1px 3px #0000001f;--equipment-shadow:0 2px 12px #00000014, 0 0 0 1px #0000000a;--radius:4px}body{background:var(--cream);color:var(--charcoal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:center;align-items:flex-start;min-height:100vh;padding:4rem 1.5rem 3rem;font-family:Inter,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;display:flex}.container{width:100%;max-width:900px}h1{text-transform:uppercase;letter-spacing:.2em;color:var(--slate);border-bottom:1px solid var(--aluminium);max-width:440px;margin-bottom:2.5rem;margin-left:auto;margin-right:auto;padding-bottom:.75rem;font-size:.7rem;font-weight:500}.panel{background:var(--warm-white);box-shadow:var(--equipment-shadow);border-radius:6px;max-width:440px;margin-left:auto;margin-right:auto;padding:1.75rem}form{flex-direction:column;gap:.875rem;display:flex}input{border:1px solid var(--aluminium);border-radius:var(--radius);color:var(--charcoal);box-shadow:var(--inset-shadow);background:#fff;outline:none;padding:.8rem 1rem;font-family:inherit;font-size:.9rem;font-weight:400;transition:border-color .2s,box-shadow .2s}input:focus{border-color:var(--amber);box-shadow:var(--inset-shadow), 0 0 0 2px #d4830a1f}input::placeholder{color:var(--aluminium-dark);font-weight:300}input:disabled{opacity:.6;cursor:not-allowed}button{background:var(--charcoal);color:var(--cream);border-radius:var(--radius);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;margin-top:.25rem;padding:.8rem 1rem;font-family:inherit;font-size:.8rem;font-weight:500;transition:background-color .2s}button:hover{background:var(--graphite)}button:disabled{background:var(--aluminium-dark);color:var(--warm-white);cursor:not-allowed}button:disabled .spinner{border-color:#ffffff40;border-top-color:var(--amber-glow)}.error{color:#8b3a3a;border-radius:var(--radius);background:#fdf2f2;border:1px solid #e5c7c7;max-width:440px;margin-top:1.25rem;margin-left:auto;margin-right:auto;padding:.75rem 1rem;font-size:.825rem;line-height:1.5}.result{background:var(--warm-white);box-shadow:var(--equipment-shadow);border-radius:6px;max-width:440px;margin-bottom:1.5rem;margin-left:auto;margin-right:auto;overflow:hidden}.result img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.result-info{padding:1.25rem 1.5rem 1.5rem}.result-info h2{color:var(--charcoal);letter-spacing:-.01em;margin-bottom:.1rem;font-size:1rem;font-weight:600}.result-info h3{color:var(--slate);margin-bottom:1rem;font-size:.9rem;font-weight:400}.result-info .genre{color:var(--amber);text-transform:uppercase;letter-spacing:.12em;border:1px solid var(--amber);border-radius:2px;margin-bottom:.75rem;padding:.2rem .5rem;font-size:.65rem;font-weight:500;display:inline-block}.result-info .notes{color:var(--graphite);margin-bottom:1rem;font-size:.85rem;line-height:1.65}.result-info a{color:var(--slate);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--aluminium);border-radius:var(--radius);align-items:center;gap:.35rem;padding:.4rem .75rem;font-size:.75rem;font-weight:500;text-decoration:none;transition:border-color .2s,color .2s;display:inline-flex}.result-info a:hover{border-color:var(--charcoal);color:var(--charcoal)}.spinner{border:2px solid #ffffff40;border-top-color:var(--amber-glow);vertical-align:middle;border-radius:50%;width:14px;height:14px;margin-right:.5rem;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.sheet-row{color:var(--aluminium-dark);border-top:1px solid var(--aluminium);letter-spacing:.02em;margin-top:1rem;padding-top:.75rem;font-size:.65rem;font-weight:400}.indicator{background:var(--amber);vertical-align:middle;border-radius:50%;width:6px;height:6px;margin-right:.5rem;display:inline-block;box-shadow:0 0 4px #d4830a66}.added-label{text-transform:uppercase;letter-spacing:.1em;color:var(--slate);align-items:center;margin-bottom:1rem;font-size:.7rem;font-weight:500;display:flex}.editing{border:2px solid var(--amber)}.edit-fields{flex-direction:column;gap:.75rem;padding:1.25rem 1.5rem 1.5rem;display:flex}.edit-fields label{text-transform:uppercase;letter-spacing:.08em;color:var(--slate);flex-direction:column;gap:.25rem;font-size:.65rem;font-weight:500;display:flex}.edit-fields input,.edit-fields textarea{border:1px solid var(--aluminium);border-radius:var(--radius);color:var(--charcoal);box-shadow:var(--inset-shadow);resize:vertical;background:#fff;outline:none;width:100%;padding:.6rem .75rem;font-family:inherit;font-size:.85rem;font-weight:400;transition:border-color .2s}.edit-fields input:focus,.edit-fields textarea:focus{border-color:var(--amber)}.edit-row{grid-template-columns:100px 1fr;gap:.75rem;display:grid}.edit-actions{gap:.75rem;margin-top:.5rem;display:flex}.edit-actions button{flex:1}.edit-cancel{background:var(--warm-white);color:var(--slate);border:1px solid var(--aluminium)}.edit-cancel:hover{background:var(--cream);color:var(--charcoal)}.edit-btn{border:1px solid var(--aluminium);border-radius:var(--radius);letter-spacing:.06em;text-transform:uppercase;color:var(--slate);cursor:pointer;background:0 0;margin-left:auto;padding:.2rem .5rem;font-size:.6rem;font-weight:500;transition:border-color .15s,color .15s}.edit-btn:hover{border-color:var(--amber);color:var(--amber);background:0 0}.overlay-actions{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.grid-controls{border-bottom:1px solid var(--aluminium);justify-content:space-between;align-items:center;margin-top:2.5rem;margin-bottom:1.25rem;padding-bottom:1rem;display:flex}.sort-group{gap:0;display:flex}.sort-btn{color:var(--aluminium-dark);border:1px solid var(--aluminium);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;border-right:none;border-radius:0;margin-top:0;padding:.4rem .7rem;font-size:.65rem;font-weight:500;transition:color .15s,background .15s}.sort-btn:first-child{border-radius:var(--radius) 0 0 var(--radius)}.sort-btn:last-child{border-right:1px solid var(--aluminium);border-radius:0 var(--radius) var(--radius) 0}.sort-btn:hover{color:var(--charcoal);background:#00000008}.sort-btn.active{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)}.sort-btn.active+.sort-btn{border-left-color:var(--charcoal)}.filter-group{align-items:center;gap:.5rem;display:flex}.fav-filter-btn{border:1px solid var(--aluminium);border-radius:var(--radius);color:var(--aluminium-dark);cursor:pointer;text-transform:none;letter-spacing:0;background:0 0;margin:0;padding:.3rem .5rem;font-size:.85rem;line-height:1;transition:color .15s,border-color .15s}.fav-filter-btn:hover{color:var(--amber);border-color:var(--amber);background:0 0}.fav-filter-btn.active{color:var(--amber);border-color:var(--amber);background:#d4830a14}.year-filter{appearance:none;background:var(--warm-white);border:1px solid var(--aluminium);border-radius:var(--radius);letter-spacing:.04em;text-transform:uppercase;color:var(--slate);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6b6b' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");background-position:right .6rem center;background-repeat:no-repeat;padding:.4rem 1.8rem .4rem .6rem;font-family:inherit;font-size:.65rem;font-weight:500}.year-filter:focus{border-color:var(--amber);outline:none}.grid-section{margin-top:0}.grid{grid-template-columns:repeat(4,1fr);gap:1.25rem;display:grid}.grid-item{color:inherit;background:var(--warm-white);box-shadow:var(--equipment-shadow);border-radius:6px;text-decoration:none;transition:transform .2s,box-shadow .2s;display:block;overflow:hidden}.grid-item:hover{transform:translateY(-2px);box-shadow:0 4px 20px #0000001f,0 0 0 1px #0000000f}.grid-cover{aspect-ratio:1;background:var(--aluminium);cursor:pointer;overflow:hidden}.grid-cover img{object-fit:cover;width:100%;height:100%;display:block}.grid-cover-empty{background:var(--aluminium);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.grid-cover-empty span{color:var(--aluminium-dark);font-size:1.5rem;font-weight:600}.grid-meta{align-items:flex-start;gap:.25rem;padding:.5rem .6rem .55rem;display:flex}.grid-meta-text{cursor:pointer;flex:1;min-width:0}.grid-artist{color:var(--charcoal);text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;font-weight:600;line-height:1.3;overflow:hidden}.grid-album{color:var(--slate);text-overflow:ellipsis;white-space:nowrap;margin-top:.1rem;font-size:.65rem;font-weight:400;line-height:1.3;overflow:hidden}.fav-btn{color:var(--aluminium-dark);cursor:pointer;text-transform:none;letter-spacing:0;background:0 0;border:none;flex-shrink:0;margin:0;padding:0;font-size:.85rem;line-height:1;transition:color .15s,transform .15s}.fav-btn:hover{color:var(--amber);background:0 0;transform:scale(1.15)}.fav-active{color:var(--amber)}.fav-btn-lg{font-size:1.25rem}.sentinel{min-height:1px}.grid-loading{justify-content:center;padding:1.5rem 0;display:flex}.spinner-small{border:2px solid var(--aluminium);border-top-color:var(--amber);width:16px;height:16px;margin-right:0}.overlay-backdrop{z-index:100;background:#00000080;justify-content:center;align-items:center;padding:2rem;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.overlay-card{background:var(--warm-white);border-radius:8px;width:100%;max-width:440px;max-height:90vh;animation:.25s slideUp;position:relative;overflow:hidden auto;box-shadow:0 8px 40px #00000040}.overlay-card img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.overlay-close{color:#fff;cursor:pointer;z-index:1;text-transform:none;letter-spacing:0;background:#00000073;border:none;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;margin:0;padding:0;font-size:1.1rem;line-height:1;display:flex;position:absolute;top:.75rem;right:.75rem}.overlay-close:hover{background:#000000a6}.overlay-title-row{justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex}.overlay-title-row>div{min-width:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.grid{grid-template-columns:repeat(3,1fr);gap:1rem}}@media (max-width:520px){body{padding:2.5rem 1rem 2rem}.grid{grid-template-columns:1fr;gap:.875rem;max-width:280px;margin-left:auto;margin-right:auto}.grid-controls{flex-direction:column;align-items:stretch;gap:.75rem}.sort-group{justify-content:center}.year-filter{text-align:center}.overlay-backdrop{padding:1rem}}