:root{
 --bg:#090d16;--panel:#111827;--panel2:#172033;--text:#f8fafc;--muted:#9ca3af;
 --line:#ffffff20;--accent:#e5e7eb;--yellow:#facc15;--red:#991b1b
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#0b1220 0,#090d16 260px)}
button,input,select{font:inherit}
.topbar{padding:20px 16px 8px;max-width:1180px;margin:auto}
.topbar h1{margin:0;font-size:clamp(1.6rem,6vw,2.5rem)}
.topbar p{margin:5px 0 0;color:var(--muted)}
.shell{max-width:1180px;margin:auto;padding:10px 16px 40px}
.controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;align-items:center}
.controls input,.controls select{
 width:100%;border:1px solid var(--line);border-radius:12px;background:var(--panel);
 color:var(--text);padding:12px 13px;outline:none
}
.mappedCheck{display:flex;align-items:center;gap:7px;color:var(--muted);white-space:nowrap}
.libraryTabs{display:flex;gap:8px;margin-top:14px}
.libraryTab{
 border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);
 padding:10px 13px;font-weight:800
}
.libraryTab.active{background:var(--accent);color:#111827}
.favTabStar{color:var(--yellow)}
.statusbar{display:flex;justify-content:space-between;align-items:center;margin:16px 2px 10px;color:var(--muted);font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:11px}
.card{
 display:flex;flex-direction:column;min-height:175px;border:1px solid var(--line);border-radius:16px;
 background:linear-gradient(180deg,var(--panel2),var(--panel));overflow:hidden;box-shadow:0 5px 20px #0004
}
.cardBody{padding:14px;flex:1}
.tagRow{display:flex;justify-content:space-between;gap:8px;min-height:22px}
.regionTag{font-size:.75rem;font-weight:800;background:#ffffff13;border:1px solid var(--line);padding:3px 7px;border-radius:999px}
.titleRow{display:flex;align-items:flex-start;gap:7px;margin:11px 0 7px}
.title{flex:1;margin:2px 0 0;font-size:1.05rem;line-height:1.23;overflow-wrap:anywhere}
.filename{margin:0;color:var(--muted);font-size:.73rem;overflow-wrap:anywhere}
.play{
 border:0;border-top:1px solid var(--line);background:#e5e7eb;color:#111827;padding:12px;font-weight:900
}
.play:disabled{background:#252d3d;color:#7b8496}
.favourite,.removeFavourite{
 flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;
 border:1px solid var(--line);background:#0f172a;color:#fff;font-size:25px;line-height:1;padding:0;
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none
}
.favourite.on{color:var(--yellow)}
.removeFavourite{background:#7f1d1d;color:#fff;border-color:#991b1b;font-size:26px}
.loadSave{
 flex:0 0 auto;display:none;align-items:center;border:1px solid #ffffff33;border-radius:9px;
 background:#263246;color:#fff;padding:7px 9px;font-weight:800;font-size:.78rem;
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none
}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:35px}
@media(max-width:700px){
 .controls{grid-template-columns:1fr 1fr}
 .controls #search{grid-column:1/-1}
 .mappedCheck{justify-content:flex-end}
}
@media(max-width:520px){
 .shell,.topbar{padding-left:10px;padding-right:10px}
 .grid{grid-template-columns:1fr}
 .libraryTabs{display:grid;grid-template-columns:1fr 1fr}
 .libraryTab{font-size:.86rem}
 .titleRow{gap:5px}
 .favourite,.removeFavourite{width:34px;height:34px}
 .loadSave{padding:7px 8px}
}