:root{
  --ink:#0d0a13;
  --panel:#16111f;
  --panel-2:#1e1729;
  --text:#f1ece4;
  --muted:#9b91ab;
  --line:#2c2440;
  --rock:#ff3d7f;
  --metal:#ffb347;
  --indie:#5be7c4;
  --electronic:#7aa2ff;
  --pop:#e07aff;
  --other:#8d8a99;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Space Grotesk",system-ui,sans-serif;background:var(--ink);color:var(--text);overflow:hidden}

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto 0;height:58px;z-index:1000;
  display:flex;align-items:center;gap:16px;padding:0 20px;
  background:linear-gradient(to bottom, rgba(13,10,19,.96), rgba(13,10,19,.82));
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px);
}
.logo{font-family:"Bebas Neue",sans-serif;font-size:30px;letter-spacing:.06em;line-height:1}
.logo span{color:var(--rock)}
.tagline{font-size:12px;color:var(--muted)}
.src-badge{
  margin-left:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;
}
.src-badge b{color:var(--electronic);font-weight:700}

/* ---------- layout ---------- */
#map{position:fixed;inset:58px 0 0 0;background:var(--ink)}
aside{
  position:fixed;top:58px;left:0;bottom:0;width:350px;z-index:900;
  background:linear-gradient(to right, rgba(13,10,19,.97), rgba(13,10,19,.92));
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .25s ease;
}
aside.closed{transform:translateX(-100%)}
.side-toggle{
  position:fixed;top:70px;left:362px;z-index:950;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;
  transition:left .25s ease;
}
.side-toggle.shifted{left:12px}

.panel-section{padding:14px 16px;border-bottom:1px solid var(--line)}
.panel-section h2{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;font-weight:500;
}
.row{display:flex;gap:8px;margin-bottom:8px}
.row:last-child{margin-bottom:0}
input[type=text],input[type=month],select{
  flex:1;min-width:0;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font-family:inherit;font-size:13px;
}
input::placeholder{color:#6c6480}
input:focus,select:focus{outline:1.5px solid var(--rock);outline-offset:0}
.btn{
  background:var(--rock);border:none;color:#1a0510;font-weight:700;
  border-radius:8px;padding:8px 16px;font-family:inherit;font-size:13px;cursor:pointer;
}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{background:var(--line);color:var(--muted);cursor:wait}
.hint{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:8px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  padding:5px 11px;border-radius:999px;font-size:12.5px;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:all .15s;
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted))}
.chip.on{border-color:var(--c,var(--text));color:var(--text);background:rgba(255,255,255,.05)}
.chip:focus-visible{outline:2px solid var(--rock);outline-offset:2px}

.status{padding:10px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);min-height:38px;display:flex;align-items:center;gap:8px}
.status strong{color:var(--text)}
.status.error{color:#ff7a7a}
.spinner{
  width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid var(--line);border-top-color:var(--rock);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}

.ad-slot{padding:0 8px;min-height:0}
.ad-slot:not(:empty){padding:8px;border-bottom:1px solid var(--line)}
.show-list{flex:1;overflow-y:auto;padding:8px}
.show-list::-webkit-scrollbar{width:8px}
.show-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
/* stagger first 20 cards so they ripple in top-to-bottom */
.card:nth-child(1) {animation-delay:  0ms}
.card:nth-child(2) {animation-delay: 18ms}
.card:nth-child(3) {animation-delay: 36ms}
.card:nth-child(4) {animation-delay: 54ms}
.card:nth-child(5) {animation-delay: 72ms}
.card:nth-child(6) {animation-delay: 90ms}
.card:nth-child(7) {animation-delay:108ms}
.card:nth-child(8) {animation-delay:126ms}
.card:nth-child(9) {animation-delay:144ms}
.card:nth-child(10){animation-delay:162ms}
.card:nth-child(11){animation-delay:180ms}
.card:nth-child(12){animation-delay:198ms}
.card:nth-child(13){animation-delay:216ms}
.card:nth-child(14){animation-delay:234ms}
.card:nth-child(15){animation-delay:252ms}
.card:nth-child(16){animation-delay:270ms}
.card:nth-child(17){animation-delay:288ms}
.card:nth-child(18){animation-delay:306ms}
.card:nth-child(19){animation-delay:324ms}
.card:nth-child(20){animation-delay:342ms}
@media (prefers-reduced-motion:reduce){.card{animation:none}}

.card{
  width:100%;text-align:left;background:transparent;border:1px solid transparent;
  border-radius:10px;padding:11px 12px 11px 14px;cursor:pointer;color:var(--text);
  font-family:inherit;display:block;position:relative;transition:background .15s;
  animation:card-appear .22s ease backwards;
}
.card::before{
  content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:3px;
  background:var(--c,var(--muted));
}
.card:hover,.card.active{background:var(--panel-2);border-color:var(--line)}
.card .band{font-weight:700;font-size:14.5px}
.card .meta{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.card .date{font-size:11.5px;color:var(--c,var(--muted));margin-top:4px;letter-spacing:.03em}
.empty{padding:28px 18px;color:var(--muted);font-size:13.5px;line-height:1.6}

/* ---------- markers, clusters & popups ---------- */
@keyframes gig-appear{
  from{opacity:0;transform:scale(0.15)}
  70% {opacity:1;transform:scale(1.18)}
  to  {opacity:1;transform:scale(1)}
}
@keyframes card-appear{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:translateY(0)}
}

.gig-dot{
  position:relative;
  animation:gig-appear .38s cubic-bezier(0.34,1.56,0.64,1) backwards;
}
.gig-dot .core{
  width:12px;height:12px;border-radius:50%;background:var(--c);
  box-shadow:0 0 10px 2px var(--c);position:absolute;top:5px;left:5px;
}
.gig-dot .halo{
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--c);
  position:absolute;top:0;left:0;opacity:.7;animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .gig-dot{animation:none}
  .gig-dot .halo{animation:none;opacity:.4}
}

.cluster{
  background:rgba(255,61,127,.18);border:1.5px solid var(--rock);border-radius:50%;
  color:var(--text);font-weight:700;font-size:13px;font-family:"Space Grotesk",sans-serif;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px rgba(255,61,127,.35);
}

.leaflet-popup-content-wrapper{
  background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.leaflet-popup-tip{background:var(--panel);border:1px solid var(--line)}
.leaflet-popup-content{margin:14px 16px;font-family:"Space Grotesk",sans-serif}
.pop{min-width:200px}
.pop .genre{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c);margin-bottom:4px;font-weight:700}
.pop .band{font-family:"Bebas Neue",sans-serif;font-size:23px;letter-spacing:.03em;line-height:1.05}
.pop .venue{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.pop .when{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:13px;display:flex;justify-content:space-between;gap:14px;
}
.pop .when b{color:var(--c);font-weight:700}
.pop .tix{
  display:block;text-align:center;margin-top:10px;background:var(--c);color:#14101c;
  font-weight:700;font-size:13px;border-radius:8px;padding:8px 0;text-decoration:none;
}

.leaflet-control-attribution{background:rgba(13,10,19,.7)!important;color:var(--muted)!important}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-control-zoom a{background:var(--panel-2)!important;color:var(--text)!important;border-color:var(--line)!important}

@media (max-width:720px){
  aside{width:86vw}
  .side-toggle{left:calc(86vw + 10px)}
  .tagline,.src-badge{display:none}
}