body{font-family:Inter,system-ui,sans-serif;background:#0f1115;color:#f5f5f5;margin:0}
.container{max-width:1200px;margin:0 auto;padding:20px}
.muted{color:#a8adb7}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0}
button{background:#2d6cdf;color:white;border:none;border-radius:10px;padding:10px 12px;cursor:pointer}
button:hover{opacity:.9}
input[type=text]{background:#1a1e26;color:#fff;border:1px solid #2a3140;border-radius:10px;padding:10px 12px;min-width:280px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.grid.square-mode{width:min(88vh,88vw);height:min(88vh,88vw);margin:8px auto;grid-template-columns:repeat(var(--sq-cols,8),1fr);grid-template-rows:repeat(var(--sq-rows,8),1fr);gap:0;overflow:hidden;border:0;border-radius:0;background:#0b0d11;padding:0}
.card{background:#171b22;border:1px solid #2a3140;border-radius:12px;overflow:hidden}
.grid.square-mode .card{border:none;border-radius:0;display:block;background:#0b0d11;position:relative;overflow:hidden;height:100%}
.grid.square-mode .square-tile .tile-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.card .img-wrap{position:relative}
.card .img-wrap::before{content:"";display:block;width:100%;aspect-ratio:1/1}
.card .img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0d11}
.grid.square-mode .card .img-wrap{width:100%;height:100%}
.grid.square-mode .card .img-wrap::before{display:none}
.grid.square-mode .card .img-wrap::after{content:none}
.grid.square-mode .card .img-wrap img{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;z-index:1}
.card .meta{padding:8px}
.card .title{font-size:13px;font-weight:600;line-height:1.2}
.card .artist{font-size:12px;color:#a8adb7;margin-top:4px}
.grid.square-mode .meta{display:none}