:root {
  --color-bg:          #f0f2f5;
  --color-card-bg:     #fff;
  --color-fg:          #333;
  --color-accent:      #0d6efd;
  --color-accent-hover:#0b5ed7;
  --color-border:      #e0e0e0;
  --color-shadow:      rgba(0,0,0,0.05);
  --color-favorite:    #e20074;
  --space:        1rem;
  --gap:          1rem;
  --radius:       0.5rem;
  --transition:   0.3s ease;
  --font-system:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-theme="dark"] {
  --color-bg:          #121212;
  --color-card-bg:     #1e1e1e;
  --color-fg:          #e4e4e4;
  --color-border:      #2e2e2e;
  --color-shadow:      rgba(0,0,0,0.5);
  --color-favorite:    #ff6b81;
}
.hidden { display:none; }
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--font-system);
  background: var(--color-bg);
  color: var(--color-fg);
  display:flex; flex-direction:column; min-height:100vh;
  transition: background var(--transition), color var(--transition);
}
header, footer {
  background: var(--color-accent);
  color:#fff;
  padding:var(--space);
  display:flex; align-items:center; justify-content:space-between;
}
.header-actions { display:flex; align-items:center; gap:var(--gap); }
.controls {
  background: var(--color-card-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space);
  display:flex; flex-wrap:wrap; gap:var(--gap);
}
.controls input, .controls select {
  padding:.75em 1em;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  background:var(--color-bg);
  color:var(--color-fg);
  transition: border-color var(--transition);
}
.controls input:focus, .controls select:focus {
  outline:none; border-color: var(--color-accent);
}
.map { width:100%; height:300px; transition:opacity var(--transition); }
.events-grid {
  display:inline;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:var(--gap); padding:var(--space); flex:1;
}
.event-card {
  position:relative;
  background:var(--color-card-bg);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 2px 8px var(--color-shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  margin: 10px;
  padding: 5px;
}
.event-card:hover {
  /*transform:translateY(-4px);*/
  box-shadow:0 4px 16px var(--color-shadow);
}
.card-header {
  position:absolute; top:var(--space); right:var(--space); z-index:1;
}
.favorite-btn {
  font-size:1.25rem;
  background:none; border:none; cursor:pointer;
  color:var(--color-border);
  transition: color var(--transition);
}
.favorite-btn.favorited { color:var(--color-favorite); }
.event-card img {
  width:100%; height:180px; object-fit:cover;
}
.event-details {
  padding:var(--space);
  display:flex; flex-direction:column; flex:1;
}
.event-details h3 {
  font-size:1.25rem; margin-bottom:.5rem;
}
.event-meta {
  font-size:.875rem; opacity:.7; margin-bottom:.5rem;
}
.cal-links {
  margin-top:auto; display:flex; gap:var(--gap);
}
.cal-links a {
  color:var(--color-accent); text-decoration:none;
  padding:.5em .75em; border-radius:var(--radius);
  font-size:.875rem;
  transition: background var(--transition), color var(--transition);
}
.cal-links a:hover {
  background:var(--color-accent-hover); color:#fff;
}
.ticket-btn {
  background:var(--color-accent);
  color:#fff; text-decoration:none;
  padding:.5em .75em; border-radius:var(--radius);
  font-size:.875rem;
  transition: background var(--transition), transform var(--transition);
}
.ticket-btn:hover {
  background:var(--color-accent-hover);
  transform:translateY(-2px);
}
.loading, footer {
  text-align:center; padding:var(--space);
}