* {
  box-sizing: border-box;
}

:root {
  --text: #eef3fb;
  --muted: #a8b2c5;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
  --accent-3: #ffd66d;
  --danger: #ff7384;
}

body[data-theme="midnight"] {
  --panel: rgba(18, 26, 38, 0.9);
  --accent: #c39bff;
  --accent-2: #67cfff;
  --bg-grad-1: #081018;
  --bg-grad-2: #111927;
  --bg-grad-3: #060b11;
}

body[data-theme="neon"] {
  --panel: rgba(26, 17, 36, 0.9);
  --accent: #ff6adf;
  --accent-2: #68f3ff;
  --bg-grad-1: #120819;
  --bg-grad-2: #190f2a;
  --bg-grad-3: #090611;
}

body[data-theme="sunset"] {
  --panel: rgba(38, 22, 18, 0.9);
  --accent: #ff9b6b;
  --accent-2: #ffd36d;
  --bg-grad-1: #1a0d0a;
  --bg-grad-2: #25140f;
  --bg-grad-3: #0d0908;
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 28%),
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 24%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 45%, var(--bg-grad-3) 100%);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0, rgba(255,255,255,0.012) 2px, transparent 2px, transparent 8px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 5px);
}

img {
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.screen {
  display: none;
  min-height: 100vh;
  position: relative;
}

.screen.active {
  display: block;
}

.animated-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 28%),
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 24%),
    radial-gradient(circle at 50% 84%, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 28%);
  animation: drift 14s ease-in-out infinite alternate;
}

@keyframes drift {
  0% { transform: scale(1) translateY(0px); }
  100% { transform: scale(1.08) translateY(-10px); }
}

#login-screen.active {
  display: grid;
  place-items: center;
  padding: 18px;
}

.login-wrap {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.brand-panel h1 {
  margin: 0;
  font-size: clamp(3rem, 10vw, 5rem);
  letter-spacing: -2px;
}

.brand-kicker,
.section-kicker,
.mini-kicker {
  margin: 0 0 8px;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
}

.brand-kicker,
.section-kicker {
  font-size: 1.34rem;
}

.mini-kicker {
  font-size: 0.68rem;
}

.brand-sub,
.modal-copy,
.menu-copy,
.helper-text,
.login-message,
.hero-meta {
  color: var(--muted);
  line-height: 1.55;
}

.brand-logo-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.logo-mark {
  width: 84px;
  height: 84px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
    linear-gradient(145deg, #1f2633, #10151f);
  border: 1px solid rgba(255,255,255,0.14);
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: 16px;
}

.logo-mark.small {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  margin: 0;
}

.logo-g {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  z-index: 2;
}

.logo-mark.small .logo-g {
  font-size: 1.25rem;
}

.logo-ring {
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 2px solid rgba(103, 207, 255, 0.45);
}

.logo-mark.small .logo-ring {
  inset: 8px;
  border-radius: 10px;
}

.sticker-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03)),
    linear-gradient(180deg, rgba(22,28,40,0.95), rgba(15,20,30,0.96));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}

.sticker-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, rgba(255,255,255,0.06), transparent 28%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012), rgba(255,255,255,0.012) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}

.sticker-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06));
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: 0.45;
  pointer-events: none;
}

.field-label {
  display: block;
  margin: 14px 0 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
}

.text-input,
.concert-note-input,
.sort-select {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 12, 18, 0.86);
  color: var(--text);
  padding: 13px 14px;
  border-radius: 14px;
  outline: none;
}

.text-input:focus,
.concert-note-input:focus,
.sort-select:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.big-btn,
.small-btn,
.menu-link,
.menu-btn,
.rating-star,
.performer-chip {
  border: 0;
  cursor: pointer;
}

.big-btn,
.small-btn {
  border-radius: 16px;
  font-weight: 800;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.big-btn:hover,
.small-btn:hover,
.menu-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.big-btn {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 45%, #8ea0ff));
  color: white;
  padding: 14px 18px;
}

.full-btn {
  width: 100%;
}

.small-btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07));
  color: white;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,0.12);
}

.danger-btn {
  background: linear-gradient(135deg, rgba(255,115,132,0.2), rgba(255,115,132,0.1));
  border-color: rgba(255,115,132,0.22);
}

#app-screen.active {
  display: block;
  padding: 12px;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 0;
  backdrop-filter: blur(10px);
}

.topbar-left,
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-lockup h1 {
  margin: 0;
  font-size: 1.65rem;
}

.topbar-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.top-stat {
  min-width: 88px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: rgba(16, 22, 31, 0.82);
}

.top-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  margin-bottom: 4px;
}

.menu-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(16, 22, 31, 0.9);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
}

.menu-btn span {
  height: 2px;
  border-radius: 2px;
  background: white;
  display: block;
}

.side-menu {
  position: fixed;
  top: 0;
  left: -340px;
  width: min(320px, 88vw);
  height: 100vh;
  z-index: 30;
  transition: left 0.25s ease;
}

.side-menu.open {
  left: 0;
}

.side-menu-inner {
  height: 100%;
  background: linear-gradient(180deg, rgba(18,23,33,0.98), rgba(11,15,22,0.99));
  border-right: 1px solid var(--line);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu-nav {
  display: grid;
  gap: 8px;
}

.menu-link {
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  color: white;
  font-weight: 700;
}

.menu-link.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
}

.menu-footer {
  margin-top: auto;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(5, 8, 13, 0.6);
}

.hidden {
  display: none !important;
}

.view-section {
  display: none;
}

.view-section.active {
  display: block;
}

.section-header {
  margin-bottom: 12px;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-header h2,
.featured-event-copy h2 {
  margin: 0 0 8px;
  font-size: 1.55rem;
}

.home-hero,
.home-panels,
.profile-grid,
.artist-modal-layout,
.concert-modal-layout,
.festival-modal-layout {
  display: grid;
  gap: 14px;
}

.featured-event-panel {
  display: grid;
  gap: 12px;
}

.featured-event-image-wrap {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
}

.featured-event-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-mode-pill {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  font-size: 0.74rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.home-hero-stats,
.profile-grid {
  display: grid;
  gap: 12px;
}

.home-hero-stats {
  grid-template-columns: repeat(2, 1fr);
}

.hero-stat,
.meta-chip,
.section-tile,
.event-card,
.artist-sticker,
.modal-concert-item,
.badge-vhs {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
}

.hero-stat {
  border-radius: 18px;
  padding: 14px;
}

.hero-stat span,
.meta-chip span,
.sub-meta {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.hero-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 1.25rem;
}

.mini-list,
.mini-sticker-grid,
.sticker-grid,
.event-grid,
.section-grid,
.modal-concert-list,
.badge-vhs-grid,
.performer-chip-row {
  display: grid;
  gap: 10px;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-grid,
.section-grid,
.profile-grid {
  grid-template-columns: 1fr;
}

.mini-sticker-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.artist-sticker {
  border-radius: 18px;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
  aspect-ratio: 0.78 / 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03)),
    rgba(255,255,255,0.04);
}

.artist-sticker::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 12%,
      rgba(255,255,255,0.02) 18%,
      rgba(255,255,255,0.18) 28%,
      rgba(255,255,255,0.04) 36%,
      rgba(255,255,255,0.12) 44%,
      transparent 56%
    );
  transform: translateX(-130%) rotate(10deg);
  animation: stickerShineSweep 5.5s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.75;
}

.artist-sticker::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,0.12), transparent 24%),
    radial-gradient(circle at 80% 25%, rgba(255,255,255,0.08), transparent 20%),
    radial-gradient(circle at 76% 82%, rgba(255,255,255,0.08), transparent 22%),
    linear-gradient(
      135deg,
      rgba(255, 102, 196, 0.06),
      rgba(103, 207, 255, 0.04),
      rgba(255, 214, 109, 0.05),
      rgba(103, 207, 255, 0.03),
      rgba(255, 102, 196, 0.04)
    );
  mix-blend-mode: screen;
  opacity: 0.55;
}

.artist-sticker > * {
  position: relative;
  z-index: 1;
}

@keyframes stickerShineSweep {
  0% {
    transform: translateX(-130%) rotate(10deg);
    opacity: 0;
  }
  10% {
    opacity: 0.25;
  }
  35% {
    opacity: 0.7;
  }
  52% {
    transform: translateX(125%) rotate(10deg);
    opacity: 0.45;
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: translateX(125%) rotate(10deg);
    opacity: 0;
  }
}

.artist-sticker.locked .artist-sticker-image,
.artist-visual.locked .artist-modal-image {
  filter: grayscale(1) contrast(1.02);
}

.artist-sticker-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.06);
}

.artist-sticker-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sticker-shine {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 20%),
    linear-gradient(315deg, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 20%);
  pointer-events: none;
}

.memorial-mark {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  font-size: 1.1rem;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 4px 6px;
  line-height: 1;
  pointer-events: none;
}

.artist-sticker h3,
.event-card h3,
.section-tile h3 {
  margin: 0 0 4px;
}

.artist-sticker p,
.event-card p,
.tile-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 0.82rem;
}

.artist-link,
.inline-link {
  cursor: pointer;
}

.artist-link:hover,
.inline-link:hover {
  text-decoration: underline;
}

.artist-sticker-support .artist-badge-row {
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.artist-sticker-support .artist-badge-row::-webkit-scrollbar {
  display: none;
}

.artist-sticker-support .artist-badge-row > * {
  flex: 0 0 auto;
}

.artist-badge-row::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}
.artist-badge-row {
  scroll-snap-type: x mandatory;
}

.artist-badge-row > * {
  flex: 0 0 auto;                 /* ❗ prevents shrinking */
  scroll-snap-align: start;
}

.artist-sticker .artist-badge-row {
  margin-top: auto;
  padding-top: 8px;
}

.attended-pill,
.tier-pill,
.event-badge,
.performer-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 800;
}

.performer-chip {
  background: rgba(255,255,255,0.07);
  color: white;
  text-align: center;
}

.performer-chip-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.attended-pill.not-attended {
  background: rgba(255,255,255,0.07);
  color: #dde4f2;
}

.attended-pill.attended {
  background: linear-gradient(135deg, #a2f3c7, #6eddb7);
  color: #062615;
}

.tier-locked {
  border-color: rgba(255,255,255,0.08);
}

.tier-bronze {
  border-color: #a56a3d;
  background:
    linear-gradient(180deg, rgba(181,111,61,0.5), rgba(120,67,35,0.22)),
    linear-gradient(145deg, rgba(255,220,180,0.1), rgba(255,255,255,0.02)),
    rgba(64,35,20,0.42);
  box-shadow:
    inset 0 0 0 1px rgba(181,111,61,0.46),
    inset 0 12px 20px rgba(255,196,120,0.08),
    0 0 28px rgba(181,111,61,0.18);
}

.tier-silver {
  border-color: #b9c2cf;
  background:
    linear-gradient(180deg, rgba(185,194,207,0.24), rgba(185,194,207,0.08)),
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.04);
  box-shadow:
    inset 0 0 0 1px rgba(185,194,207,0.35),
    0 0 18px rgba(185,194,207,0.1);
}

.tier-gold {
  border-color: #d9b34b;
  background:
    linear-gradient(180deg, rgba(217,179,75,0.24), rgba(217,179,75,0.08)),
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.04);
  box-shadow:
    inset 0 0 0 1px rgba(217,179,75,0.38),
    0 0 20px rgba(217,179,75,0.12);
}

.tier-platinum {
  border-color: #8fd3ff;
  background:
    linear-gradient(180deg, rgba(143,211,255,0.24), rgba(143,211,255,0.08)),
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.04);
  box-shadow:
    inset 0 0 0 1px rgba(143,211,255,0.4),
    0 0 20px rgba(143,211,255,0.12);
}

.tier-diamond {
  border-color: #8de9ff;
  background:
    linear-gradient(180deg, rgba(141,233,255,0.26), rgba(141,233,255,0.09)),
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    rgba(255,255,255,0.04);
  box-shadow:
    inset 0 0 0 1px rgba(141,233,255,0.42),
    0 0 22px rgba(141,233,255,0.15);
}

.artist-sticker.tier-bronze .artist-sticker-image-wrap {
  box-shadow:
    0 0 0 1px rgba(181,111,61,0.48),
    0 0 18px rgba(181,111,61,0.2);
}

.artist-sticker.tier-silver .artist-sticker-image-wrap {
  box-shadow: 0 0 0 1px rgba(185,194,207,0.35), 0 0 14px rgba(185,194,207,0.12);
}

.artist-sticker.tier-gold .artist-sticker-image-wrap {
  box-shadow: 0 0 0 1px rgba(217,179,75,0.4), 0 0 16px rgba(217,179,75,0.14);
}

.artist-sticker.tier-platinum .artist-sticker-image-wrap {
  box-shadow: 0 0 0 1px rgba(143,211,255,0.4), 0 0 16px rgba(143,211,255,0.14);
}

.artist-sticker.tier-diamond .artist-sticker-image-wrap {
  box-shadow: 0 0 0 1px rgba(141,233,255,0.42), 0 0 18px rgba(141,233,255,0.16);
}

.tier-pill.tier-bronze { background: #9a6b43; color: white; }
.tier-pill.tier-silver { background: #b9c2cf; color: #0d1118; }
.tier-pill.tier-gold { background: #d9b34b; color: #1b1404; }
.tier-pill.tier-platinum { background: #8fd3ff; color: #071622; }
.tier-pill.tier-diamond { background: #8de9ff; color: #071622; }
.tier-pill.tier-locked { background: rgba(255,255,255,0.07); color: white; }

.event-card,
.section-tile,
.modal-concert-item {
  border-radius: 18px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.16s ease;
  position: relative;
  z-index: 2;
}

.event-card:hover,
.section-tile:hover,
.modal-concert-item:hover,
.badge-vhs:hover {
  transform: translateY(-2px);
}

.artist-sticker:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
}

.artist-sticker.tier-locked::before,
.artist-sticker.tier-locked::after {
  opacity: 0.25;
}

.event-card-inner {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: start;
}

.poster-mini {
  width: 74px;
  height: 96px;
  border-radius: 12px;
  object-fit: cover;
  pointer-events: none;
}

.section-tile-row,
.modal-concert-item-top,
.list-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.sub-meta {
  margin-top: 6px;
  line-height: 1.4;
}

.section-count {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.badge-vhs-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.badge-vhs {
  border-radius: 16px;
  padding: 12px;
  position: relative;
  min-height: 88px;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
}

.badge-vhs::before,
.badge-vhs::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(255,255,255,0.14);
  pointer-events: none;
}

.badge-vhs::before { left: 12px; }
.badge-vhs::after { right: 12px; }

.badge-vhs-body {
  margin-top: 18px;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  text-align: center;
}

.profile-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.82);
  backdrop-filter: blur(8px);
}

/* =========================
   MODAL = TRADING CARD BASE
========================= */

.modal-panel {
  position: relative;
  z-index: 2;
  width: min(420px, 92vw);
  height: min(88vh, 760px);
  margin: 0;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;

  display: grid;
  grid-template-rows: auto 1fr;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(12,18,28,0.96), rgba(8,12,18,0.98));

  border: 2px solid rgba(255,255,255,0.22);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* MOBILE */
@media (max-width: 700px) {
  .modal {
    padding: 12px;
  }

  .modal-panel {
    width: 92vw;
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 20px;
  }
}

/* CLOSE BUTTON */
.modal-close-btn {
  position: fixed !important;
  top: 16px;
  right: 16px;
  z-index: 200;

  width: 42px;
  height: 42px;
  border-radius: 999px;

  background: rgba(10,14,22,0.82);
  border: 1px solid rgba(255,255,255,0.14);
}


.concert-poster,
.festival-banner {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

/* =========================
   CONTENT AREA
========================= */
/* TITLES */
.artist-modal-copy h2,
.concert-modal-layout h2,
.festival-modal-layout h2,
.badge-modal-content h2 {
  margin: 0 0 10px;
  font-size: 1.55rem;
}

.strong-copy {
  color: white;
  font-weight: 700;
}

/* =========================
   FACT GRID (COMPACT)
========================= */

.artist-facts-grid,
.concert-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.meta-chip {
  border-radius: 12px;
  padding: 8px 10px;
}

.meta-chip span {
  font-size: 0.72rem;
  color: var(--muted);
}

.meta-chip strong {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  line-height: 1.18;
}

/* MOBILE FIX */
@media (max-width: 700px) {
  .artist-facts-grid,
  .concert-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .meta-chip {
    padding: 8px 9px;
  }

  .meta-chip strong {
    font-size: 0.84rem;
  }
}

/* =========================
   ALBUMS (HORIZONTAL SCROLL)
========================= */

#artist-albums {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

#artist-albums > * {
  flex: 0 0 auto;
}

/* =========================
   EVENTS (SCROLL INSIDE CARD)
========================= */
#artist-modal-events {
  display: grid;
  gap: 8px;
}

.artist-facts-grid,
.concert-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
  align-items: start;
}

.meta-chip {
  border-radius: 14px;
  padding: 8px 10px;
  height: auto;
}

.meta-chip span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.2;
}

.meta-chip strong {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  line-height: 1.18;
  word-break: break-word;
}
@media (max-width: 700px) {
  .artist-facts-grid,
  .concert-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .meta-chip {
    padding: 9px 11px;
    border-radius: 13px;
  }

  .meta-chip span {
    font-size: 0.72rem;
  }

  .meta-chip strong {
    font-size: 0.95rem;
  }

  .artist-modal-image {
    height: clamp(160px, 24vh, 220px);
  }
}
.setlist {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
}

.rating-stars {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.rating-star {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  font-size: 1.2rem;
}

.rating-star.active {
  color: var(--accent-3);
  border-color: color-mix(in srgb, var(--accent-3) 55%, transparent);
  background: color-mix(in srgb, var(--accent-3) 14%, transparent);
}

.concert-note-input {
  min-height: 92px;
  resize: vertical;
}

.note-counter {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

.concert-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.empty-state {
  color: var(--muted);
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.12);
}

.list-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}

.list-row:last-child {
  border-bottom: 0;
}

.list-row-main {
  min-width: 0;
}

.list-row-title {
  font-weight: 700;
}

.list-row-sub {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 3px;
}

.list-row-count {
  font-weight: 800;
  color: var(--accent-2);
}

@media (min-width: 520px) {
  .login-wrap {
    grid-template-columns: 1fr 1fr;
  }

  .compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-grid,
  .section-grid,
  .profile-grid,
  .home-panels,
  .mini-sticker-grid,
  .performer-chip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .featured-event-panel {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
  }
}

@media (min-width: 700px) {
  .compact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .event-grid,
  .section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#featured-event-image {
  height: 240px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.featured-event-image-wrap {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  overflow: hidden;
}
.artists-view-toggle {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.artists-view-btn {
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: white;
  font-weight: 800;
}

.artists-view-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.artists-by-event {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

.artists-event-header {
  display: flex;
  justify-content: space-between;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.artists-event-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  .artists-event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .artists-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.artists-event-title {
  font-size: 1.2rem;
  font-weight: 900;
}

.artists-event-seen {
  font-weight: 900;
  color: var(--accent-2);
}
/* HEADLINER BOOST (Sort by Event) */
.artist-sticker.event-headliner {
  border-width: 2px;
  border-color: rgba(217, 179, 75, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255, 223, 140, 0.28),
    0 0 0 1px rgba(217, 179, 75, 0.55),
    0 0 18px rgba(217, 179, 75, 0.35),
    0 0 34px rgba(255, 214, 109, 0.18);
}
.artists-event-group {
  display: grid;
  gap: 10px;
}

.artists-group-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  color: var(--accent-2);
}
.global-search-wrap {
  margin-bottom: 14px;
  z-index: 5;
}

.global-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.global-search-recent-block {
  margin-top: 14px;
}

.search-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.search-chip-row::-webkit-scrollbar {
  display: none;
}

.search-chip {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: white;
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 800;
  cursor: pointer;
}

.global-search-results {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.search-result-row {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: white;
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
}

.search-result-row:hover {
  transform: translateY(-1px);
}
.search-result-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
}

.search-result-image-wrap {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  flex: 0 0 auto;
}

.search-result-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.artist-event-share-row {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.artist-share-btn {
  flex: 0 0 auto;
}

.social-row {
  display: flex;
  gap: 12px;
  margin: 10px 0;
}

.social-row a {
  font-size: 1.3rem;
}

.location-sticker-image-wrap {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-sticker-image {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
  padding: 12px;
  color: white;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    rgba(255,255,255,0.04);
}

.location-modal-card {
  display: grid;
  gap: 14px;
}

.location-event-card {
  border-radius: 18px;
  padding: 10px;
  cursor: pointer;
}

.location-event-image-wrap {
  aspect-ratio: 16 / 9;
  margin-bottom: 10px;
}

.location-unattended {
  filter: grayscale(1);
  opacity: 0.62;
}

.locations-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .locations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .locations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .locations-grid {
    grid-template-columns: 1fr;
  }
}

.artist-sticker-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.location-event-card {
  padding: 10px;
  border-radius: 18px;
  overflow: hidden;
}

.location-event-poster-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.05);
}

.location-event-poster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.location-event-card {
  padding: 10px;
  border-radius: 18px;
  overflow: hidden;
}

.location-event-poster-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.05);
}

.location-event-poster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.artists-event-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.artists-event-grid-support {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.artist-sticker-support {
  padding: 12px;
  border-radius: 20px;
}

.artist-sticker-support .artist-sticker-image-wrap {
  border-radius: 16px;
  aspect-ratio: 1 / 1;
}

.artist-sticker-support .artist-sticker-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-sticker-support h3 {
  font-size: 0.95rem;
  margin: 10px 0 4px;
}

.artist-sticker-support p {
  font-size: 0.82rem;
  margin: 0 0 8px;
}

.artist-sticker-support .artist-badge-row {
  gap: 6px;
  flex-wrap: wrap;
}

.artist-sticker-support .tier-pill,
.artist-sticker-support .event-badge {
  font-size: 0.68rem;
  padding: 6px 9px;
}

@media (max-width: 900px) {
  .artists-event-grid-support {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .artists-event-grid,
  .artists-event-grid-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#artist-social-row {
  margin: 10px 0 18px;
}
.venue-hero-image-wrap {
  width: 100%;
  min-height: 220px;
  aspect-ratio: 16 / 7;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  margin-bottom: 14px;
}

.venue-hero-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.venue-map-wrap {
  width: 100%;
  aspect-ratio: 1.35 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  margin-bottom: 14px;
}

.venue-links-row {
  gap: 10px;
  margin: 6px 0 20px;
}

.venue-social-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 1.3rem;
  text-decoration: none;
}

.venue-badge-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 18px;
}

.venue-badge-chip {
  display: inline-flex;
}

.venue-badge-locked {
  filter: grayscale(1);
  opacity: 0.52;
}

.location-event-card {
  padding: 10px;
  border-radius: 18px;
  overflow: hidden;
}

.location-event-poster-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.05);
}

.location-event-poster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.artists-event-grid-support {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.artist-sticker-support {
  padding: 10px;
  border-radius: 18px;
}

.artist-sticker-support .artist-sticker-image-wrap {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
}

.artist-sticker-support .artist-sticker-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-sticker-support h3 {
  font-size: 0.95rem;
  margin: 8px 0 4px;
}

.artist-sticker-support p {
  font-size: 0.8rem;
  margin: 0 0 6px;
}

.artist-sticker-support .tier-pill,
.artist-sticker-support .event-badge {
  font-size: 0.66rem;
  padding: 5px 8px;
}

@media (max-width: 900px) {
  .artists-event-grid-headliner{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .artists-event-grid-headliner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.profile-header-centered {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 16px;
}

.profile-avatar-wrap-large {
  width: 264px;
  height: 264px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}

.profile-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 6rem;
  font-weight: 900;
  color: white;
}

.profile-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@media (max-width: 600px) {
  .profile-avatar-wrap-large {
    width: 180px;
    height: 180px;
  }

  .profile-avatar-fallback {
    font-size: 4.2rem;
  }
}

.login-wrap-stacked {
  width: min(920px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.login-top-brand {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 6px;
}

.login-top-brand .brand-panel,
.login-brand-button {
  text-align: center;
}

.login-card-main {
  width: 100%;
  min-height: 68vh;
  display: grid;
  align-content: start;
  gap: 14px;
}

.login-avatar-wrap-large {
  width: 150px;
  height: 150px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}

.login-avatar-block {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.login-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.login-terms-row {
  display: grid;
  gap: 10px;
}

.login-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}

.login-checkbox-row input {
  margin-top: 4px;
}

@media (max-width: 700px) {
  .login-card-main {
    min-height: auto;
  }

  .login-avatar-wrap-large {
    width: 124px;
    height: 124px;
  }
}

/* FORCE support cards to stay purple */
.artist-sticker-support:not(.event-headliner) {
  border-color: rgba(168, 139, 255, 0.5);
  box-shadow:
    0 0 0 1px rgba(168, 139, 255, 0.25),
    0 0 18px rgba(168, 139, 255, 0.18);
}
.artist-sticker.event-headliner {
  border-width: 2px;
  border-color: rgba(217, 179, 75, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255, 223, 140, 0.28),
    0 0 0 1px rgba(217, 179, 75, 0.55),
    0 0 18px rgba(217, 179, 75, 0.35),
    0 0 34px rgba(255, 214, 109, 0.18);
}


.artists-event-grid-headliners {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.artists-event-grid-support {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.artist-sticker.event-headliner {
  border-width: 2px;
  border-color: rgba(217, 179, 75, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255, 223, 140, 0.28),
    0 0 0 1px rgba(217, 179, 75, 0.55),
    0 0 18px rgba(217, 179, 75, 0.35),
    0 0 34px rgba(255, 214, 109, 0.18);
}

.artist-sticker-support:not(.event-headliner) {
  border-color: rgba(168, 139, 255, 0.5);
  box-shadow:
    0 0 0 1px rgba(168, 139, 255, 0.25),
    0 0 18px rgba(168, 139, 255, 0.18);
}


/* ===== FINAL artists-by-event overrides ===== */

.artists-event-grid-headliners {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.artists-event-grid-support {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.artist-sticker.event-headliner {
  border-width: 2px;
  border-color: rgba(217, 179, 75, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255, 223, 140, 0.28),
    0 0 0 1px rgba(217, 179, 75, 0.55),
    0 0 18px rgba(217, 179, 75, 0.35),
    0 0 34px rgba(255, 214, 109, 0.18);
}

.artist-sticker-support:not(.event-headliner) {
  border-color: rgba(168, 139, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(168, 139, 255, 0.28),
    0 0 18px rgba(168, 139, 255, 0.2);
}

.artist-sticker-support .artist-badge-row > * {
  flex: 0 0 auto;
}

.artist-sticker-support .artist-badge-row::-webkit-scrollbar {
  display: none;
}

.artist-sticker-support .artist-badge-row > * {
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .artists-event-grid-headliners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .artists-event-grid-support {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .artists-event-grid-headliners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .artists-event-grid-support {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* brighter neon outline when artist is marked seen at that event */
.artist-sticker-support.seen-at-event {
  border-width: 3px;
}

.artist-sticker-support.event-headliner.seen-at-event {
  border-color: rgba(255, 215, 90, 1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 160, 0.42),
    0 0 0 2px rgba(255, 215, 90, 0.92),
    0 0 14px rgba(255, 215, 90, 0.65),
    0 0 28px rgba(255, 200, 70, 0.42),
    0 0 44px rgba(255, 200, 70, 0.24);
}

.artist-sticker-support.seen-at-event:not(.event-headliner) {
  border-color: rgba(174, 120, 255, 1);
  box-shadow:
    inset 0 0 0 1px rgba(220, 190, 255, 0.24),
    0 0 0 2px rgba(174, 120, 255, 0.88),
    0 0 14px rgba(174, 120, 255, 0.62),
    0 0 28px rgba(174, 120, 255, 0.4),
    0 0 44px rgba(174, 120, 255, 0.22);
}

.dashboard-quick-nav {
  margin-bottom: 14px;
}

.dashboard-quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-quick-nav-grid .menu-link {
  width: 100%;
  justify-content: center;
}

@media (min-width: 700px) {
  .dashboard-quick-nav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.topbar-profile-btn {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(16, 22, 31, 0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.topbar-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topbar-profile-fallback {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
}

.app-quick-nav {
  margin-bottom: 14px;
}

.app-quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.app-quick-nav-grid .menu-link,
.app-quick-nav-grid .small-btn {
  width: 100%;
  justify-content: center;
}

#view-back-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

@media (min-width: 700px) {
  .app-quick-nav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.qr-scan-link {
  padding: 10px 12px;
  font-size: 0.85rem;
  opacity: 0.85;
}

.qr-scan-link:hover {
  opacity: 1;
}

#qr-scan-btn {
  display: none !important;
}

.topbar-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  backdrop-filter: blur(10px);
}

.topbar-icon-btn:active {
  transform: scale(0.95);
}

.qr-camera-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  margin: 16px 0;
}

.qr-camera-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.topbar-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-camera-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: black;
  border-radius: 16px;
  overflow: hidden;
}
.album-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.album-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.album-card {
  min-width: 130px;
  max-width: 130px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.album-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.album-card {
  min-width: 120px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  overflow: hidden;
}

.album-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.album-info {
  padding: 6px;
  font-size: 0.8rem;
}
/* === Dashboard refresh === */
#app-screen.active {
  max-width: 1220px;
  padding: 14px;
}

.app-content {
  display: grid;
  gap: 16px;
}

.global-search-wrap {
  margin-bottom: 0;
}

.dashboard-shell {
  display: grid;
  gap: 16px;
}

.dashboard-hero {
  display: grid;
  gap: 18px;
  padding: 20px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 32%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    linear-gradient(180deg, rgba(22,28,40,0.96), rgba(15,20,30,0.98));
}

.dashboard-hero-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-hero-heading h2,
.dashboard-panel-card h3,
.dashboard-quick-nav h3 {
  margin: 0;
}

.dashboard-feature-panel {
  gap: 16px;
  align-items: stretch;
}

.dashboard-feature-art {
  min-height: 420px !important;
  height: 420px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    rgba(255,255,255,0.04) !important;
}

#featured-event-image.featured-event-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}
.dashboard-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.dashboard-feature-copy h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.02;
}

.dashboard-feature-extra {
  color: var(--text);
  opacity: 0.92;
}

.dashboard-stat-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hero-stat-glow {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 28px rgba(0,0,0,0.16);
}

.hero-stat-glow strong {
  font-size: clamp(1.4rem, 4vw, 2rem);
}

.dashboard-content-grid {
  display: grid;
  gap: 16px;
}

.dashboard-quick-nav {
  padding: 20px;
}

.dashboard-quick-nav-grid-upgraded {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.dashboard-nav-link.menu-link {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04)),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.dashboard-side-stack {
  display: grid;
  gap: 16px;
}

.dashboard-panel-card {
  min-height: 100%;
}

.dashboard-panel-card .mini-list,
.dashboard-panel-card .mini-sticker-grid {
  margin-top: 12px;
}

@media (min-width: 780px) {
  .topbar {
    margin-bottom: 16px;
  }

  .dashboard-content-grid {
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.45fr);
    align-items: start;
  }

  .dashboard-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .dashboard-hero {
    grid-template-columns: minmax(0, 1.55fr) 320px;
    align-items: stretch;
  }

  .dashboard-stat-rail {
    grid-template-columns: 1fr;
  }

  .dashboard-quick-nav-grid-upgraded {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .topbar-right {
    gap: 6px;
  }

  .top-stat {
    min-width: 74px;
    padding: 9px 10px;
  }

  .topbar-profile-btn {
    width: 50px;
    height: 50px;
  }

  .dashboard-hero,
  .dashboard-quick-nav,
  .dashboard-panel-card {
    padding: 16px;
  }

  .dashboard-hero-heading {
    flex-direction: column;
  }

  .dashboard-feature-art {
    min-height: 220px;
  }

  .dashboard-nav-link.menu-link {
    min-height: 64px;
    font-size: 0.94rem;
  }
}
.quick-menu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  color: white;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.dashboard-quick-nav {
  padding: 14px 16px;
}

.dashboard-quick-nav-grid {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-nav-link {
  padding: 10px 12px;
  font-size: 0.92rem;
  border-radius: 14px;
}

#quick-menu-chevron {
  font-size: 1.2rem;
  font-weight: 800;
  opacity: 0.8;
}
.artists-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
  align-items: start;
}

.artists-search-card,
.artists-quick-card {
  padding: 14px;
}

.artists-search-card .global-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.artists-quick-card .dashboard-quick-nav-grid {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 720px) {
  .artists-top-row {
    grid-template-columns: 1fr 1fr;
  }

  .artists-search-card .global-search-row {
    grid-template-columns: 1fr;
  }

  .artists-search-card .small-btn {
    width: 100%;
  }
}
.dashboard-side-stack {
  display: grid;
  gap: 12px;
}

.global-search-wrap {
  margin-bottom: 14px;
  z-index: 5;
  opacity: 1;
  max-height: 420px;
  overflow: hidden;
  transform: translateY(0);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    max-height 0.32s ease,
    margin 0.28s ease,
    padding 0.28s ease;
}

.search-panel-hidden {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
}

.search-panel-visible {
  opacity: 1;
  transform: translateY(0);
}

.dashboard-quick-nav-grid {
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  max-height: 520px;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    max-height 0.32s ease,
    margin-top 0.28s ease;
}

.dashboard-quick-nav-grid.hidden {
  display: grid !important;
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  margin-top: 0;
  pointer-events: none;
}

.quick-menu-open {
  opacity: 1;
  transform: translateY(0);
  max-height: 520px;
  margin-top: 12px;
}

.quick-menu-closing {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  margin-top: 0;
  pointer-events: none;
}
.album-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.album-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.album-card {
  min-width: 130px;
  max-width: 130px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.album-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.album-card {
  min-width: 140px;
  max-width: 140px;
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 auto;
}

.album-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: rgba(255,255,255,0.05);
}

.album-info {
  padding: 8px;
  font-size: 0.8rem;
}

.album-info strong,
.album-info span {
  display: block;
}
/* =========================
   ARTIST CARD MODAL
========================= */

body.modal-open {
  overflow: hidden;
  touch-action: none;
}

.artist-card-modal {
  width: min(400px, 92vw);
  aspect-ratio: 2 / 3;
  height: auto;
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  position: relative;
}

@media (max-width: 700px) {
  .artist-card-modal {
    width: min(400px, 94vw);
    max-height: calc(100vh - 20px);
    border-radius: 20px;
  }
}

.artist-card {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 1600px;
  overflow: hidden;
}

.artist-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}

.artist-card.is-flipped .artist-card-inner {
  transform: rotateY(180deg);
}

.artist-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.artist-card-front,
.artist-card-back {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    linear-gradient(180deg, rgba(10,16,25,0.96), rgba(7,11,18,0.985));
}

.artist-card-back {
  transform: rotateY(180deg);
}

.artist-card-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.artist-modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.artist-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
}

.artist-card-body::-webkit-scrollbar,
.artist-events-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.artist-card-body::-webkit-scrollbar-thumb,
.artist-events-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
}

.artist-facts-grid-front,
.artist-facts-grid-back {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.meta-chip {
  border-radius: 12px;
  padding: 8px 10px;
}

.meta-chip span {
  display: block;
  font-size: 0.72rem;
  line-height: 1.15;
}

.meta-chip strong {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  line-height: 1.18;
  word-break: break-word;
}

.artist-back-header {
  margin-bottom: 10px;
}

.artist-back-section {
  margin-top: 12px;
}

.artist-back-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.artist-albums-row {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.artist-albums-row > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.artist-albums-row .album-scroll {
  display: contents;
}

.artist-albums-row .album-card {
  min-width: 132px;
  max-width: 132px;
}

.artist-events-list {
  display: grid;
  gap: 8px;
  max-height: 170px;
  overflow-y: auto;
  padding-right: 2px;
}

..artist-flip-btn {
  position: static;
  display: grid;
  place-items: center;

  width: 100px;
  height: 42px;

  margin: 10px auto 0;

  border-radius: 999px;
  background: rgba(10,14,22,0.78);
  border: 1px solid rgba(255,255,255,0.14);

  color: white;
}

.modal-close-btn {
  top: 12px;
  right: 12px;
  z-index: 6;
}

@media (max-width: 700px) {
  .artist-facts-grid-front,
  .artist-facts-grid-back {
    grid-template-columns: 1fr 1fr;
  }

  .meta-chip {
    padding: 8px 9px;
  }

  .meta-chip strong {
    font-size: 0.84rem;
  }

  .artist-card-body {
    padding: 12px;
  }

  .artist-events-list {
    max-height: 150px;
  }
}

/* =========================
   TIER THEMES FOR CARD
========================= */

.artist-card.tier-locked .artist-card-front,
.artist-card.tier-locked .artist-card-back {
  border: 1px solid rgba(255,255,255,0.10);
}

.artist-card.tier-bronze .artist-card-front,
.artist-card.tier-bronze .artist-card-back {
  box-shadow:
    inset 0 0 0 1px rgba(181,111,61,0.42),
    0 0 18px rgba(181,111,61,0.18);
  border: 1px solid rgba(181,111,61,0.68);
}

.artist-card.tier-silver .artist-card-front,
.artist-card.tier-silver .artist-card-back {
  box-shadow:
    inset 0 0 0 1px rgba(185,194,207,0.42),
    0 0 18px rgba(185,194,207,0.16);
  border: 1px solid rgba(185,194,207,0.75);
}

.artist-card.tier-gold .artist-card-front,
.artist-card.tier-gold .artist-card-back {
  box-shadow:
    inset 0 0 0 1px rgba(217,179,75,0.42),
    0 0 20px rgba(217,179,75,0.22);
  border: 1px solid rgba(217,179,75,0.82);
}

.artist-card.tier-platinum .artist-card-front,
.artist-card.tier-platinum .artist-card-back {
  box-shadow:
    inset 0 0 0 1px rgba(143,211,255,0.42),
    0 0 20px rgba(143,211,255,0.18);
  border: 1px solid rgba(143,211,255,0.8);
}

.artist-card.tier-diamond .artist-card-front,
.artist-card.tier-diamond .artist-card-back {
  box-shadow:
    inset 0 0 0 1px rgba(141,233,255,0.45),
    0 0 24px rgba(141,233,255,0.24);
  border: 1px solid rgba(141,233,255,0.88);
}
/* ===== Artist card premium override patch ===== */
.artist-card-modal {
  width: min(430px, 94vw);
  overflow: visible;
}

@media (max-width: 700px) {
  .artist-card-modal {
    width: min(430px, 95vw);
  }
}

.artist-card {
  overflow: visible;
}

.artist-card-face {
  border-radius: 22px;
}

.artist-card-art {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: visible;
  border-bottom: 0;
  padding: 12px 12px 0;
  background: transparent;
}

.artist-modal-image {
  width: 100%;
  height: auto;
  max-height: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin: 0;
  border: 2px solid rgba(255,255,255,0.16);
  box-shadow:
    0 0 0 2px rgba(103,207,255,0.08),
    0 10px 26px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.artist-card-art::before {
  content: "";
  position: absolute;
  inset: 12px 12px auto 12px;
  height: calc(100% - 12px);
  border-radius: 16px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), transparent 24%),
    linear-gradient(315deg, rgba(103,207,255,0.12), transparent 24%),
    linear-gradient(120deg, transparent 8%, rgba(255,255,255,0.04) 18%, rgba(255,105,180,0.10) 32%, rgba(103,207,255,0.11) 46%, rgba(255,214,109,0.08) 58%, transparent 74%);
  mix-blend-mode: screen;
  animation: artistImageHoloSweep 5.2s linear infinite;
}

.artist-card-art::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 16px;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 18px 24px rgba(255,255,255,0.04);
}

.artist-card-body {
  padding: 8px 14px 14px;
}

.artist-card-body > *:first-child {
  margin-top: 8px;
}

.artist-albums-row {
  display: flex;
  gap: 10px;
  padding: 0 0 8px;
}

.artist-albums-row .album-scroll {
  display: flex;
  gap: 10px;
}

.artist-albums-row .album-card {
  min-width: 136px;
  max-width: 136px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  overflow: hidden;
}

.artist-albums-row .album-info {
  padding: 10px 8px;
  font-size: 0.82rem;
  line-height: 1.3;
}

.artist-share-card-btn,
.artist-flip-btn {
  width: 88px;
  min-width: 88px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
}

.artist-flip-btn {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: -54px;
  transform: translateX(-50%);
  z-index: 7;
  background: rgba(10,14,22,0.88);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}

.artist-back-section-header {
  justify-content: flex-start;
}

.artist-back-section-header .artist-flip-btn,
.artist-card-body .artist-flip-btn {
  margin: 0;
}

@media (max-width: 700px) {
  .artist-modal-image {
    max-height: 200px;
  }

  .artist-card-body {
    padding: 8px 12px 14px;
  }

  .artist-flip-btn {
    bottom: -50px;
  }
}

@keyframes artistImageHoloSweep {
  0% {
    transform: translateX(-18%);
    opacity: 0.28;
  }
  50% {
    transform: translateX(18%);
    opacity: 0.72;
  }
  100% {
    transform: translateX(-18%);
    opacity: 0.28;
  }
}

.modal-concert-item {
  transition: all 0.2s ease;
}

.modal-concert-item[data-badge="festival"] {
  background: linear-gradient(135deg, rgba(103,207,255,0.2), rgba(8,12,18,0.8));
}

.modal-concert-item[data-badge="tour"] {
  background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(8,12,18,0.8));
}
/* ===== Artist card image frame ===== */
.artist-card-art {
  padding: 12px;
  position: relative;
}

.artist-card-art img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 220px;
  object-fit: cover;
  border-radius: 16px;

  border: 2px solid rgba(255,255,255,0.18);

  box-shadow:
    0 0 0 2px rgba(103,207,255,0.08),
    0 10px 26px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* holo shine */
.artist-card-art::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 16px;
  pointer-events: none;

  background:
    linear-gradient(120deg,
      transparent 10%,
      rgba(255,255,255,0.06) 18%,
      rgba(255,105,180,0.10) 32%,
      rgba(103,207,255,0.12) 46%,
      rgba(255,214,109,0.10) 58%,
      transparent 72%
    );

  mix-blend-mode: screen;
  animation: holoSweep 5s linear infinite;
}

@keyframes holoSweep {
  0% { transform: translateX(-20%); opacity: 0.2; }
  50% { transform: translateX(20%); opacity: 0.7; }
  100% { transform: translateX(-20%); opacity: 0.2; }
}
.artist-card-body {
  margin-top: -14px;
  padding-top: 0;
  overflow-y: auto;
  flex: 1;
}
.artist-card-art img {
  max-height: 180px;
}
.artist-flip-btn {
  position: static;
  display: block;

  width: 120px;
  height: 42px;

  margin: 10px auto 0;

  border-radius: 999px;
  background: rgba(10,14,22,0.78);
  border: 1px solid rgba(255,255,255,0.14);

  color: white;
}
.modal-concert-item {
  padding: 16px;
  border-radius: 18px;
  font-size: 0.95rem;
}
/* square image, less zoom, text higher */
.artist-card-art {
  aspect-ratio: auto;
  padding: 12px 12px 0;
}

.artist-modal-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 170px;
  object-fit: contain;
  object-position: center top;
  background: rgba(255,255,255,0.04);
}

.artist-card-art::before,
.artist-card-art::after {
  inset: 12px 12px auto 12px;
  height: 170px;
}

.artist-card-body {
  margin-top: -28px;
  padding: 0 14px 14px;
}

.artist-card-body > *:first-child {
  margin-top: 0;
}
/* final flip button position */
.artist-flip-btn {
  position: static;

  display: block;
  width: 120px;
  height: 42px;

  margin: 10px auto;

  border-radius: 999px;
  background: rgba(10,14,22,0.88);
  border: 1px solid rgba(255,255,255,0.16);
}
.artist-card {
  display: flex;
  flex-direction: column;
}

/* center flip button BELOW image */
.artist-flip-btn {
  position: static;

  display: block;
  width: 120px;
  height: 42px;

  margin: 12px auto 6px; /* centers + spacing */

  border-radius: 999px;
  background: rgba(10,14,22,0.88);
  border: 1px solid rgba(255,255,255,0.16);
}

/* ensure layout stacks correctly */
.artist-card {
  display: flex;
  flex-direction: column;
}

/* make sure image area doesn't trap the button */
.artist-card-art {
  display: block;
}
/* FORCE flip button placement */
.artist-flip-btn {
  position: relative !important;
  display: block !important;

  margin: 10px auto 12px !important;

  width: 120px;
  height: 42px;

  border-radius: 999px;
  background: rgba(10,14,22,0.88);
  border: 1px solid rgba(255,255,255,0.16);

  transform: none !important;
  left: auto !important;
  top: auto !important;
}
.artist-card-art {
  display: flex;
  flex-direction: column;
}
/* force close icon visible */
.modal-close-btn {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 200 !important;

  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;

  display: grid !important;
  place-items: center !important;

  color: #fff !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;

  background: rgba(10,14,22,0.82) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

.modal-close-btn::before {
  content: "×";
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
}
/* force flip button below image */
.artist-flip-btn {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  display: block !important;
  width: 120px !important;
  height: 42px !important;
  margin: 10px auto 12px !important;
  z-index: 8 !important;

  border-radius: 999px !important;
  background: rgba(10,14,22,0.88) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28) !important;
}

.artist-card-art,
.artist-card-body,
.artist-back-section-header {
  position: static !important;
}
/* --- artist modal tidy-up --- */

/* button sits above the card, centered */
.artist-card-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.artist-flip-btn {
  position: static !important;
  display: block !important;
  order: 1;
  margin: 8px auto 12px !important;
  width: 110px !important;
  height: 40px !important;
  border-radius: 999px !important;
  z-index: 20 !important;
}

/* card sits under the button */
#artist-card,
.artist-card {
  order: 2;
  width: 100%;
}

/* make image area squarer */
.artist-card-art {
  padding: 12px 12px 0 !important;
}

.artist-modal-image {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: 220px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 18px !important;
}

/* keep glow frame matched to the image */
.artist-card-art::before,
.artist-card-art::after {
  inset: 12px 12px auto 12px !important;
  height: min(220px, calc(100vw - 72px)) !important;
}

/* make the text under the image/title smaller */
#artist-modal-info,
#artist-modal-desc {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}

/* tighten body spacing a touch */
.artist-card-body {
  margin-top: -12px !important;
  padding: 0 14px 14px !important;
}
/* =========================
   NEW GLOBAL ARTIST TIERS
========================= */

.artist-sticker.tier-common,
.artist-card.tier-common,
.artist-card-modal.tier-common {
  --tier-border: #b77a4c;
  --tier-glow: rgba(201, 132, 74, 0.34);
  --tier-bg:
    linear-gradient(135deg, rgba(86, 48, 26, 0.96), rgba(36, 20, 12, 0.97)),
    repeating-linear-gradient(
      135deg,
      rgba(255, 218, 170, 0.08) 0 10px,
      rgba(120, 70, 35, 0.08) 10px 20px
    );
  --tier-text: #ffe7cc;
  --tier-kicker: #ffd7a6;
  --tier-chip-bg: rgba(88, 48, 24, 0.7);
}

.artist-sticker.tier-rare,
.artist-card.tier-rare,
.artist-card-modal.tier-rare {
  --tier-border: #c6ccd8;
  --tier-glow: rgba(220, 228, 245, 0.28);
  --tier-bg:
    linear-gradient(135deg, rgba(56, 61, 74, 0.96), rgba(21, 25, 34, 0.98)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  --tier-text: #f4f7ff;
  --tier-kicker: #dfe6f4;
  --tier-chip-bg: rgba(55, 62, 78, 0.72);
}

.artist-sticker.tier-super,
.artist-card.tier-super,
.artist-card-modal.tier-super {
  --tier-border: #52e8ff;
  --tier-glow: rgba(82, 232, 255, 0.3);
  --tier-bg:
    linear-gradient(135deg, rgba(13, 51, 66, 0.97), rgba(6, 20, 29, 0.98)),
    radial-gradient(circle at 20% 10%, rgba(82,232,255,0.15), transparent 35%);
  --tier-text: #e9fcff;
  --tier-kicker: #8bf2ff;
  --tier-chip-bg: rgba(10, 53, 66, 0.72);
}

.artist-sticker.tier-ultra,
.artist-card.tier-ultra,
.artist-card-modal.tier-ultra {
  --tier-border: #8fd3ff;
  --tier-glow: rgba(143, 211, 255, 0.34);
  --tier-bg:
    linear-gradient(135deg, rgba(18, 48, 74, 0.97), rgba(8, 17, 32, 0.98)),
    radial-gradient(circle at 82% 14%, rgba(143,211,255,0.18), transparent 30%);
  --tier-text: #eef8ff;
  --tier-kicker: #9eddff;
  --tier-chip-bg: rgba(16, 44, 68, 0.72);
}

.artist-sticker.tier-epic,
.artist-card.tier-epic,
.artist-card-modal.tier-epic {
  --tier-border: #b88cff;
  --tier-glow: rgba(184, 140, 255, 0.34);
  --tier-bg:
    linear-gradient(135deg, rgba(43, 20, 77, 0.97), rgba(14, 7, 28, 0.98)),
    radial-gradient(circle at 16% 12%, rgba(184,140,255,0.18), transparent 32%);
  --tier-text: #f7efff;
  --tier-kicker: #d5b7ff;
  --tier-chip-bg: rgba(51, 24, 86, 0.72);
}

.artist-sticker.tier-legendary,
.artist-card.tier-legendary,
.artist-card-modal.tier-legendary {
  --tier-border: #f0c86a;
  --tier-glow: rgba(240, 200, 106, 0.38);
  --tier-bg:
    linear-gradient(135deg, rgba(86, 61, 10, 0.97), rgba(31, 20, 5, 0.98)),
    repeating-linear-gradient(
      115deg,
      rgba(255, 221, 130, 0.12) 0 8px,
      rgba(168, 120, 35, 0.08) 8px 16px
    );
  --tier-text: #fff3cf;
  --tier-kicker: #ffe08c;
  --tier-chip-bg: rgba(92, 64, 12, 0.72);
}

.artist-sticker.tier-ruby,
.artist-card.tier-ruby,
.artist-card-modal.tier-ruby {
  --tier-border: #ff5b74;
  --tier-glow: rgba(255, 91, 116, 0.4);
  --tier-bg:
    linear-gradient(135deg, rgba(95, 8, 28, 0.97), rgba(28, 4, 11, 0.98)),
    radial-gradient(circle at 20% 18%, rgba(255,120,144,0.18), transparent 34%);
  --tier-text: #fff0f3;
  --tier-kicker: #ffb5c0;
  --tier-chip-bg: rgba(92, 11, 29, 0.72);
}

.artist-sticker.tier-sapphire,
.artist-card.tier-sapphire,
.artist-card-modal.tier-sapphire {
  --tier-border: #4eb6ff;
  --tier-glow: rgba(78, 182, 255, 0.42);
  --tier-bg:
    linear-gradient(135deg, rgba(6, 37, 84, 0.97), rgba(3, 12, 28, 0.98)),
    radial-gradient(circle at 78% 18%, rgba(118,210,255,0.18), transparent 34%);
  --tier-text: #eef8ff;
  --tier-kicker: #a7dbff;
  --tier-chip-bg: rgba(11, 42, 93, 0.72);
}

.artist-sticker.tier-diamond,
.artist-card.tier-diamond,
.artist-card-modal.tier-diamond {
  --tier-border: #9cf4ff;
  --tier-glow: rgba(156, 244, 255, 0.48);
  --tier-bg:
    linear-gradient(135deg, rgba(14, 54, 66, 0.97), rgba(4, 12, 18, 0.98)),
    linear-gradient(120deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  --tier-text: #f3feff;
  --tier-kicker: #c7fbff;
  --tier-chip-bg: rgba(19, 62, 78, 0.72);
}

.artist-sticker[class*="tier-"],
.artist-card[class*="tier-"],
.artist-card-modal[class*="tier-"] {
  border-color: var(--tier-border) !important;
}

.artist-sticker[class*="tier-"],
.artist-card[class*="tier-"] {
  background: var(--tier-bg) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tier-border) 42%, transparent),
    0 0 28px var(--tier-glow) !important;
}

.artist-sticker[class*="tier-"] .artist-sticker-image-wrap,
.artist-card[class*="tier-"] .artist-card-art {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tier-border) 55%, transparent),
    0 0 24px var(--tier-glow) !important;
}

.artist-card[class*="tier-"] #artist-modal-name,
.artist-card[class*="tier-"] #artist-back-name {
  color: var(--tier-text) !important;
}

.artist-card[class*="tier-"] #artist-modal-genre,
.artist-card[class*="tier-"] .section-kicker {
  color: var(--tier-kicker) !important;
}

.artist-card[class*="tier-"] #artist-modal-info,
.artist-card[class*="tier-"] #artist-modal-desc {
  color: color-mix(in srgb, var(--tier-text) 78%, #b6c2d6) !important;
}

.artist-card[class*="tier-"] .meta-chip {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tier-chip-bg) 100%, transparent),
    rgba(10, 14, 22, 0.72)
  ) !important;
  border-color: color-mix(in srgb, var(--tier-border) 30%, rgba(255,255,255,0.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.artist-card[class*="tier-"] .meta-chip span {
  color: color-mix(in srgb, var(--tier-text) 55%, #9fb0c9) !important;
}

.artist-card[class*="tier-"] .meta-chip strong {
  color: var(--tier-text) !important;
}

.tier-pill.tier-common { background: #b77a4c; color: #fff6ea; }
.tier-pill.tier-rare { background: #c6ccd8; color: #101824; }
.tier-pill.tier-super { background: #52e8ff; color: #07212c; }
.tier-pill.tier-ultra { background: #8fd3ff; color: #071a29; }
.tier-pill.tier-epic { background: #b88cff; color: #17071f; }
.tier-pill.tier-legendary { background: #f0c86a; color: #2e1d00; }
.tier-pill.tier-ruby { background: #ff5b74; color: #2a0610; }
.tier-pill.tier-sapphire { background: #4eb6ff; color: #061b2e; }
.tier-pill.tier-diamond { background: #9cf4ff; color: #06222b; }
.tier-pill.tier-locked { background: rgba(255,255,255,0.08); color: #fff; }

/* full popup card gets stronger styling */
.artist-card[class*="tier-"] {
  overflow: hidden;
}

.artist-card.tier-common::before,
.artist-card.tier-rare::before,
.artist-card.tier-super::before,
.artist-card.tier-ultra::before,
.artist-card.tier-epic::before,
.artist-card.tier-legendary::before,
.artist-card.tier-ruby::before,
.artist-card.tier-sapphire::before,
.artist-card.tier-diamond::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.artist-card.tier-common::before {
  background:
    repeating-linear-gradient(135deg, rgba(255,220,180,0.08) 0 8px, transparent 8px 16px);
}

.artist-card.tier-rare::before {
  background:
    linear-gradient(140deg, rgba(255,255,255,0.08), transparent 30%);
}

.artist-card.tier-super::before,
.artist-card.tier-ultra::before,
.artist-card.tier-sapphire::before,
.artist-card.tier-diamond::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), transparent 24%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08), transparent 30%);
}

.artist-card.tier-epic::before,
.artist-card.tier-ruby::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 28%),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.06), transparent 34%);
}

.artist-card.tier-legendary::before {
  background:
    repeating-linear-gradient(
      120deg,
      rgba(255, 223, 120, 0.12) 0 7px,
      transparent 7px 14px
    );
}

/* cutout headliner code on top-right of the popup image */
#artist-modal-visual {
  position: relative;
  overflow: hidden;
}

#artist-modal-visual::after {
  content: "HL " attr(data-headliners);
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 76px;
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  border: 1px solid color-mix(in srgb, var(--tier-border, #fff) 55%, transparent);
  background:
    linear-gradient(135deg, rgba(9, 13, 21, 0.92), rgba(18, 24, 36, 0.88));
  color: var(--tier-text, #fff);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  z-index: 4;
}
/* ===== FINAL ARTIST MODAL LAYOUT OVERRIDE ===== */

#artist-modal .artist-card-modal {
  width: min(430px, 94vw) !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#artist-modal #artist-card {
  width: 100% !important;
  order: 2 !important;
}

#artist-modal .artist-flip-btn {
  position: absolute !important;
  left: 50% !important;
  top: -58px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 40 !important;

  display: grid !important;
  place-items: center !important;

  width: 112px !important;
  height: 44px !important;
  margin: 0 !important;

  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(16,22,34,0.96), rgba(7,10,16,0.96)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.32) !important;
}

#artist-modal #artist-modal-visual {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 18px 18px 0 !important;
  aspect-ratio: auto !important;
  border-bottom: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#artist-modal .artist-card-art::before,
#artist-modal .artist-card-art::after {
  inset: 18px auto auto 50% !important;
  width: min(300px, calc(100% - 36px)) !important;
  height: min(300px, calc(100vw - 120px)) !important;
  transform: translateX(-50%) !important;
}

#artist-modal .artist-modal-image {
  width: min(300px, calc(100% - 8px)) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
  display: block !important;
}

#artist-modal .artist-genre-overlay {
  position: absolute !important;
  top: 28px !important;
  right: 26px !important;
  z-index: 8 !important;
  margin: 0 !important;

  font-size: clamp(1.6rem, 6vw, 2.15rem) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;

  color: var(--tier-border, #d08a58) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
}

#artist-modal .artist-card-body {
  margin-top: 0 !important;
  padding: 12px 18px 18px !important;
  overflow-y: visible !important;
}

#artist-modal #artist-modal-name {
  margin: 0 0 12px !important;
  font-size: 2rem !important;
  line-height: 1.05 !important;
}

#artist-modal #artist-modal-info {
  margin: 0 0 10px !important;
  font-size: 0.98rem !important;
  line-height: 1.45 !important;
}

#artist-modal #artist-modal-desc {
  margin: 0 0 16px !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

#artist-modal .artist-facts-grid-front {
  margin-top: 8px !important;
  gap: 10px !important;
}

#artist-modal .meta-chip {
  padding: 9px 12px !important;
  border-radius: 14px !important;
}

#artist-modal .meta-chip span {
  font-size: 0.8rem !important;
}

#artist-modal .meta-chip strong {
  font-size: 0.86rem !important;
}

#artist-modal .artist-social-row-bottom {
  position: absolute !important;
  left: 50% !important;
  bottom: -78px !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  width: auto !important;
}

#artist-modal .artist-social-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 45%),
    linear-gradient(180deg, rgba(20,34,58,0.96), rgba(7,14,28,0.96)) !important;
  border: 1px solid rgba(103, 207, 255, 0.28) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.32),
    0 0 18px rgba(103,207,255,0.18) !important;
}

#artist-modal .artist-social-icon {
  font-size: 1.1rem !important;
  color: #67cfff !important;
  line-height: 1 !important;
}

@media (max-width: 700px) {
  #artist-modal .artist-flip-btn {
    top: -52px !important;
  }

  #artist-modal .artist-modal-image {
    width: min(280px, calc(100% - 8px)) !important;
  }

  #artist-modal .artist-genre-overlay {
    top: 26px !important;
    right: 24px !important;
    font-size: clamp(1.45rem, 7vw, 1.95rem) !important;
  }

  #artist-modal .artist-social-row-bottom {
    gap: 18px !important;
    bottom: -72px !important;
  }
}
/* --- socials beside artist name --- */

#artist-modal .artist-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 10px !important;
}

#artist-modal .artist-title-row #artist-modal-name {
  margin: 0 !important;
  flex: 1 1 auto !important;
}

#artist-modal .artist-social-row-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#artist-modal .artist-social-btn-small {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 45%),
    linear-gradient(180deg, rgba(20,34,58,0.92), rgba(7,14,28,0.96)) !important;
  border: 1px solid rgba(103, 207, 255, 0.22) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,0.22),
    0 0 10px rgba(103,207,255,0.10) !important;
  padding: 0 !important;
}

#artist-modal .artist-social-btn-small .artist-social-icon {
  font-size: 0.88rem !important;
  line-height: 1 !important;
  color: #8fdcff !important;
}

@media (max-width: 700px) {
  #artist-modal .artist-title-row {
    gap: 10px !important;
  }

  #artist-modal .artist-social-row-inline {
    gap: 6px !important;
  }

  #artist-modal .artist-social-btn-small {
    width: 32px !important;
    height: 32px !important;
  }

  #artist-modal .artist-social-btn-small .artist-social-icon {
    font-size: 0.82rem !important;
  }
}
#artist-modal .artist-social-row-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#artist-modal .artist-social-btn-small {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

#artist-modal .artist-social-btn-small .artist-social-icon {
  font-size: 0.82rem !important;
  line-height: 1 !important;
}
/* --- topbar circle controls --- */

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.topbar-circle-btn,
.topbar-profile-circle-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(20,28,42,0.94), rgba(9,13,22,0.96));
  box-shadow: 0 10px 24px rgba(0,0,0,0.24);
}

.topbar-qr-circle-btn {
  color: #67cfff;
  border-color: rgba(103, 207, 255, 0.26);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 16px rgba(103,207,255,0.16);
}

.topbar-search-circle-btn {
  color: #5cff5c;
  border-color: rgba(92, 255, 92, 0.28);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 16px rgba(92,255,92,0.14);
}

.topbar-search-circle-btn.is-active {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.topbar-profile-circle-btn {
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.24),
    0 0 16px rgba(255,255,255,0.10);
}

.topbar-profile-circle-btn .topbar-profile-label {
  display: none !important;
}

.topbar-profile-circle-btn .topbar-profile-image,
.topbar-profile-circle-btn .topbar-profile-fallback {
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

/* search panel starts hidden until button opens it */
.global-search-wrap.search-panel-hidden {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
  overflow: hidden;
}

.global-search-wrap.search-panel-visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 420px;
  pointer-events: auto;
}

/* quick menu removed */
.dashboard-quick-nav,
.quick-menu-toggle,
#quick-menu-body,
#quick-menu-chevron {
  display: none !important;
}

@media (max-width: 699px) {
  .topbar-right {
    gap: 8px;
  }

  .topbar-circle-btn,
  .topbar-profile-circle-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .top-stat {
    min-width: 74px;
    padding: 9px 10px;
  }
}


/* ===== slightly smaller artist modal text + fact boxes ===== */

#artist-modal #artist-modal-name {
  font-size: 1.75rem !important;
  line-height: 1.05 !important;
  margin-bottom: 10px !important;
}

#artist-modal #artist-modal-info {
  font-size: 0.93rem !important;
  line-height: 1.42 !important;
  margin-bottom: 8px !important;
}

#artist-modal #artist-modal-desc {
  font-size: 0.91rem !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}

#artist-modal .artist-facts-grid {
  gap: 9px !important;
}

#artist-modal .meta-chip {
  padding: 8px 11px !important;
  border-radius: 13px !important;
}

#artist-modal .meta-chip span {
  font-size: 0.76rem !important;
}

#artist-modal .meta-chip strong {
  font-size: 0.82rem !important;
}

@media (max-width: 700px) {
  .topbar-right {
    gap: 10px !important;
  }

  .topbar-circle-btn,
  .topbar-profile-circle-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .app-brand-image {
    width: 48px !important;
    height: 48px !important;
  }
}
/* ===== popup menu right-shift hotfix ===== */
:root {
  --menu-shift-x: clamp(88px, 12vw, 152px);
  --menu-popup-top: clamp(76px, calc(env(safe-area-inset-top, 0px) + 68px), 104px);
  --menu-popup-max-height: calc(100dvh - var(--menu-popup-top) - 12px);
}

.side-menu {
  position: fixed !important;
  top: var(--menu-popup-top) !important;
  left: 50% !important;
  right: auto !important;
  width: min(720px, calc(100vw - 18px)) !important;
  max-width: calc(100vw - 18px) !important;
  height: auto !important;
  max-height: var(--menu-popup-max-height) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(calc(-50% + var(--menu-shift-x)), -24px) scale(0.985) !important;
  transform-origin: top center !important;
  clip-path: inset(0 0 100% 0 round 30px) !important;
  transition:
    opacity 0.32s ease,
    transform 0.38s cubic-bezier(.2,.8,.2,1),
    clip-path 0.42s cubic-bezier(.2,.8,.2,1) !important;
  z-index: 55 !important;
}

.side-menu.open {
  left: 50% !important;
  right: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(calc(-50% + var(--menu-shift-x)), 0) scale(1) !important;
  clip-path: inset(0 0 0 0 round 30px) !important;
}

.side-menu::before {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.side-menu-inner {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  gap: 12px !important;
  height: auto !important;
  max-height: var(--menu-popup-max-height) !important;
  overflow: hidden !important;
}

.side-menu .menu-copy,
.side-menu .menu-nav {
  min-height: 0 !important;
}

.side-menu .menu-copy {
  max-height: 5.2em !important;
  overflow: auto !important;
}

.side-menu .menu-nav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: auto !important;
  align-content: start !important;
  padding-right: 2px !important;
}

.side-menu #view-back-btn,
.side-menu .qr-scan-link,
.side-menu .menu-footer {
  grid-column: 1 / -1 !important;
}

@media (max-width: 900px) {
  :root {
    --menu-shift-x: clamp(72px, 11vw, 112px);
    --menu-popup-top: clamp(74px, calc(env(safe-area-inset-top, 0px) + 66px), 98px);
  }

  .side-menu {
    width: min(660px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --menu-shift-x: clamp(60px, 10vw, 88px);
    --menu-popup-top: clamp(72px, calc(env(safe-area-inset-top, 0px) + 64px), 92px);
  }

  .side-menu {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    border-radius: 24px !important;
  }

  .side-menu::before {
    width: 88px !important;
    height: 24px !important;
    top: -12px !important;
  }

  .side-menu .menu-nav {
    gap: 10px !important;
  }
}

/* ===== restored theme + menu + customise styles ===== */

body[data-theme="aurora"] {
  --panel: rgba(14, 24, 34, 0.9);
  --accent: #74f0dd;
  --accent-2: #68c4ff;
  --bg-grad-1: #04131b;
  --bg-grad-2: #0a2230;
  --bg-grad-3: #020911;
}

body[data-theme="ocean"] {
  --panel: rgba(9, 22, 36, 0.92);
  --accent: #53d7ff;
  --accent-2: #0fd2ff;
  --bg-grad-1: #03101b;
  --bg-grad-2: #072033;
  --bg-grad-3: #010911;
}

body[data-theme="ember"] {
  --panel: rgba(32, 17, 13, 0.92);
  --accent: #ff8d57;
  --accent-2: #ffb36c;
  --bg-grad-1: #170806;
  --bg-grad-2: #2b100d;
  --bg-grad-3: #090403;
}

body[data-theme="forest"] {
  --panel: rgba(12, 24, 18, 0.92);
  --accent: #7be59d;
  --accent-2: #4fd68b;
  --bg-grad-1: #05120b;
  --bg-grad-2: #0a2014;
  --bg-grad-3: #030a06;
}

body[data-theme="ultraviolet"] {
  --panel: rgba(18, 15, 36, 0.92);
  --accent: #b072ff;
  --accent-2: #7d5cff;
  --bg-grad-1: #0d0720;
  --bg-grad-2: #170d34;
  --bg-grad-3: #060312;
}

body[data-theme="monochrome"] {
  --panel: rgba(18, 23, 33, 0.92);
  --accent: #d8e2f1;
  --accent-2: #90a4c8;
  --bg-grad-1: #070d16;
  --bg-grad-2: #121b29;
  --bg-grad-3: #04070d;
}

body[data-theme="goldrush"] {
  --panel: rgba(31, 19, 7, 0.92);
  --accent: #ffd06a;
  --accent-2: #ffb84d;
  --bg-grad-1: #130903;
  --bg-grad-2: #261306;
  --bg-grad-3: #090402;
}

:root {
  --menu-popup-top: clamp(74px, calc(env(safe-area-inset-top, 0px) + 66px), 104px);
  --menu-popup-width: min(640px, calc(100vw - 24px));
  --menu-popup-max-height: calc(100dvh - var(--menu-popup-top) - 14px);
}

.topbar {
  position: sticky !important;
  top: 0 !important;
  min-height: 74px;
  padding: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0;
}

.menu-btn {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(16, 22, 31, 0.9) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.24) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  overflow: visible !important;
}

.menu-btn span {
  display: block !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #fff !important;
}

..menu-btn::before {
  content: none !important;
}
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.95;
  position: relative;
  z-index: 1;
}

.menu-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.18), transparent 42%),
    linear-gradient(130deg, rgba(255,255,255,0.12), transparent 46%, transparent 54%, rgba(255,255,255,0.08));
  pointer-events: none;
}

.side-menu {
  position: fixed !important;
  top: var(--menu-popup-top) !important;
  left: 50% !important;
  right: auto !important;
  width: var(--menu-popup-width) !important;
  max-width: var(--menu-popup-width) !important;
  height: auto !important;
  max-height: var(--menu-popup-max-height) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -22px) scale(0.975) !important;
  transform-origin: top center !important;
  clip-path: inset(0 0 100% 0 round 30px) !important;
  transition:
    opacity 0.26s ease,
    transform 0.34s cubic-bezier(.2,.8,.2,1),
    clip-path 0.38s cubic-bezier(.2,.8,.2,1) !important;
  z-index: 60 !important;
}

.side-menu.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) scale(1) !important;
  clip-path: inset(0 0 0 0 round 30px) !important;
}

.side-menu::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 96px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--accent-2) 34%, rgba(255,255,255,0.15)), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  filter: blur(0.5px);
  opacity: 0.9;
}

.side-menu-inner {
  position: relative;
  height: auto !important;
  max-height: var(--menu-popup-max-height) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  gap: 14px !important;
  overflow: hidden !important;
  padding: 18px !important;
  border-radius: 30px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,0.14)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 82%, black), color-mix(in srgb, var(--bg-grad-2) 82%, black)) !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,0.42),
    0 0 44px color-mix(in srgb, var(--accent) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.side-menu-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 24%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015), rgba(255,255,255,0.015) 1px, transparent 1px, transparent 4px);
}

.side-menu .menu-profile {
  padding: 18px 18px 16px !important;
  border-radius: 24px !important;
  min-height: 132px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, black), color-mix(in srgb, var(--bg-grad-1) 78%, black)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-2) 20%, rgba(255,255,255,0.14)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 14px 32px rgba(0,0,0,0.18) !important;
}

.side-menu .menu-profile h3 {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  letter-spacing: -0.04em;
}

.side-menu .menu-copy {
  color: color-mix(in srgb, var(--text) 84%, var(--muted)) !important;
  max-height: 5.4em !important;
  overflow: auto !important;
}

.side-menu .menu-nav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  min-height: 0 !important;
  overflow: auto !important;
  align-content: start !important;
  padding-right: 2px !important;
}

.side-menu .menu-link,
.side-menu #view-back-btn,
.side-menu .qr-scan-link,
.side-menu #logout-btn {
  min-height: 70px;
  border-radius: 22px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.14)) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 72%, black), color-mix(in srgb, var(--bg-grad-2) 80%, black)) !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 14px 16px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 24px rgba(0,0,0,0.14) !important;
  transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease !important;
}

.side-menu .menu-link:hover,
.side-menu #view-back-btn:hover,
.side-menu .qr-scan-link:hover,
.side-menu #logout-btn:hover,
.side-menu .menu-link.active {
  transform: translateY(-1px);
  filter: brightness(1.04);
  border-color: color-mix(in srgb, var(--accent-2) 44%, rgba(255,255,255,0.18)) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.22), transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 18%, rgba(255,255,255,0.08)), rgba(255,255,255,0.03)),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 64%, black), color-mix(in srgb, var(--bg-grad-2) 76%, black)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 14px 28px rgba(0,0,0,0.18),
    0 0 18px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

.side-menu #view-back-btn,
.side-menu .qr-scan-link,
.side-menu .menu-footer {
  grid-column: 1 / -1 !important;
}

.side-menu .menu-footer {
  margin-top: 0 !important;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background:
    radial-gradient(circle at 50% 14%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 28%),
    rgba(3, 6, 10, 0.52);
  backdrop-filter: blur(4px);
}

#view-customise .sticker-card,
.customise-panel,
.customise-card {
  position: relative;
  overflow: hidden;
}

#customise-theme-grid,
#customise-border-grid,
.customise-theme-grid,
.customise-border-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.theme-pick-btn,
.border-pick-btn {
  appearance: none;
  width: 100%;
  min-height: 136px;
  border-radius: 24px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.14));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 78%, black), color-mix(in srgb, var(--bg-grad-2) 82%, black));
  color: var(--text);
  text-align: left;
  display: grid;
  gap: 14px;
  align-content: start;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 32px rgba(0,0,0,0.14);
  transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.theme-pick-btn:hover,
.border-pick-btn:hover,
.theme-pick-btn.active,
.border-pick-btn.active {
  transform: translateY(-2px);
  filter: brightness(1.03);
  border-color: color-mix(in srgb, var(--accent-2) 44%, rgba(255,255,255,0.22));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 34px rgba(0,0,0,0.18),
    0 0 24px color-mix(in srgb, var(--accent-2) 18%, transparent);
}

.theme-pick-btn > span:last-child,
.border-pick-btn > span:last-child {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.theme-pick-swatch,
.border-preview {
  display: block;
  width: 100%;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 24px rgba(0,0,0,0.16);
}

.theme-pick-swatch {
  background-size: 180% 180%;
  position: relative;
  overflow: hidden;
}

.theme-pick-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.12), transparent 34%, transparent 62%, rgba(255,255,255,0.08)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 5px);
}

.theme-midnight {
  background: linear-gradient(120deg, #050d16, #0b1a2a 46%, #66d4ff 100%);
}

.theme-neon {
  background: linear-gradient(120deg, #10041e, #25093c 48%, #ff67da 100%);
}

.theme-sunset {
  background: linear-gradient(120deg, #210702, #3c1309 48%, #f7ca63 100%);
}

.theme-aurora {
  background: linear-gradient(120deg, #02141a, #0a2d3b 48%, #72f2dc 100%);
}

.theme-ocean {
  background: linear-gradient(120deg, #02111c, #04253e 48%, #4edcff 100%);
}

.theme-ember {
  background: linear-gradient(120deg, #190805, #34110d 48%, #ff8f58 100%);
}

.theme-forest {
  background: linear-gradient(120deg, #06150a, #10311a 48%, #6fe694 100%);
}

.theme-ultraviolet {
  background: linear-gradient(120deg, #0a0420, #1e0c42 48%, #b16bff 100%);
}

.theme-monochrome {
  background: linear-gradient(120deg, #06101b, #1a2738 48%, #dbe7f8 100%);
}

.theme-goldrush {
  background: linear-gradient(120deg, #140803, #2a1607 48%, #ffd064 100%);
}

.border-preview {
  position: relative;
  background: linear-gradient(180deg, rgba(16,22,31,0.96), rgba(8,12,20,0.98));
}

.border-preview::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
}

.border-preview-glow::after {
  border: 2px solid rgba(103, 207, 255, 0.75);
  box-shadow: 0 0 18px rgba(103, 207, 255, 0.32), inset 0 0 10px rgba(103, 207, 255, 0.14);
}

.border-preview-chrome::after {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(17,22,31,0.98), rgba(10,14,22,0.98)) padding-box,
    linear-gradient(135deg, #f5fbff, #8899aa 46%, #f5fbff 100%) border-box;
}

.border-preview-prism::after {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(17,22,31,0.98), rgba(10,14,22,0.98)) padding-box,
    linear-gradient(135deg, #67cfff, #ff6adf 36%, #ffd76b 62%, #78f1c8 100%) border-box;
  box-shadow: 0 0 18px rgba(163, 127, 255, 0.24);
}

body[data-profile-border="glow"] .profile-avatar-wrap,
body[data-profile-border="glow"] .login-avatar-wrap,
body[data-profile-border="glow"] #topbar-profile-btn {
  border: 1px solid rgba(103, 207, 255, 0.42) !important;
  box-shadow: 0 0 20px rgba(103, 207, 255, 0.18), inset 0 0 10px rgba(103, 207, 255, 0.10) !important;
}

body[data-profile-border="chrome"] .profile-avatar-wrap,
body[data-profile-border="chrome"] .login-avatar-wrap,
body[data-profile-border="chrome"] #topbar-profile-btn {
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 12px 24px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}

body[data-profile-border="prism"] .profile-avatar-wrap,
body[data-profile-border="prism"] .login-avatar-wrap,
body[data-profile-border="prism"] #topbar-profile-btn {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(17,22,31,0.98), rgba(10,14,22,0.98)) padding-box,
    linear-gradient(135deg, #67cfff, #ff6adf 36%, #ffd76b 62%, #78f1c8 100%) border-box !important;
  box-shadow: 0 0 20px rgba(163, 127, 255, 0.18), 0 12px 24px rgba(0,0,0,0.18) !important;
}

@media (max-width: 900px) {
  :root {
    --menu-popup-width: min(612px, calc(100vw - 18px));
  }
}

@media (max-width: 700px) {
  .menu-btn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
  }

  .side-menu .menu-nav {
    grid-template-columns: 1fr !important;
  }

  .side-menu .menu-link,
  .side-menu #view-back-btn,
  .side-menu .qr-scan-link,
  .side-menu #logout-btn {
    min-height: 64px;
  }

  #customise-theme-grid,
  #customise-border-grid,
  .customise-theme-grid,
  .customise-border-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  :root {
    --menu-popup-width: calc(100vw - 12px);
    --menu-popup-top: clamp(70px, calc(env(safe-area-inset-top, 0px) + 62px), 92px);
  }

  .menu-btn {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 17px !important;
  }

  .menu-btn::before {
    width: 24px;
    height: 24px;
  }

  .side-menu::before {
    width: 84px;
    height: 24px;
    top: -11px;
  }

  .side-menu-inner {
    padding: 14px !important;
    border-radius: 24px !important;
  }
}
/* --- top-left logo cleanup --- */

.app-brand-lockup {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 0 !important;
}

.app-brand-lockup h1,
.brand-lockup h1 {
  display: none !important;
}

.app-brand-image {
  width: 210px !important;
  height: 170px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
}

.logo-mark,
.logo-mark.small,
.logo-ring,
.logo-g {
  display: none !important;
}
.dashboard-feature-panel {
  grid-template-columns: 1.2fr 0.9fr !important;
  align-items: stretch !important;
}

@media (max-width: 900px) {
  .dashboard-feature-panel {
    grid-template-columns: 1fr !important;
  }

  .dashboard-feature-art {
    min-height: 320px !important;
    height: 320px !important;
  }
}


.topbar {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: flex-start !important;
}

.topbar-left,
.topbar-right,
.brand-lockup {
  align-items: flex-start !important;
}

.menu-btn,
.topbar-circle-btn,
.topbar-profile-circle-btn,
.app-brand-lockup,
.app-brand-image {
  margin-top: 0 !important;
}

.app-brand-lockup {
  align-self: flex-start !important;
}

.app-brand-image {
  display: block !important;
}

@media (max-width: 699px) {
  #app-screen.active {
    padding-top: 0 !important;
  }

  .topbar {
    padding-top: 0 !important;
  }
}
/* --- top row: fix giant logo spacing --- */

.topbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: start !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.topbar-left {
  display: contents !important;
}

#menu-btn {
  grid-column: 1 !important;
  align-self: start !important;
  margin-top: 0 !important;
}

.app-brand-lockup {
  grid-column: 2 !important;
  justify-self: start !important;
  align-self: start !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.app-brand-image {
  width: 288px !important;
  height: auto !important;
  max-width: 42vw !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topbar-right {
  grid-column: 3 !important;
  align-self: start !important;
  margin-top: 0 !important;
}

.brand-lockup h1,
.logo-mark,
.logo-mark.small,
.logo-ring,
.logo-g {
  display: none !important;
}

#app-screen.active {
  padding-top: 0 !important;
}

/* ===== header + featured event fix from latest layout ===== */

/* top row uses the new 3-part layout cleanly */
.topbar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: start !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

.topbar-left {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: start !important;
  display: flex !important;
  align-items: flex-start !important;
}

.topbar-center {
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: start !important;
  display: flex !important;
  align-items: flex-start !important;
}

.topbar-right {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: start !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* logo */
.app-brand-lockup {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.app-brand-image {
  width: 220px !important;
  height: auto !important;
  max-width: 42vw !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* make all top controls sit right at the top */
#menu-btn,
.topbar-circle-btn,
.topbar-profile-circle-btn,
.app-brand-lockup,
.app-brand-image {
  margin-top: 0 !important;
  align-self: start !important;
}

/* featured event panel */
.dashboard-feature-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.dashboard-feature-art,
.featured-event-image-wrap {
  min-height: 320px !important;
  height: 320px !important;
  padding: 0 !important;
  display: block !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.04) !important;
}

#featured-event-image,
#featured-event-image.featured-event-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}

.dashboard-feature-copy {
  gap: 12px !important;
}

.dashboard-feature-copy h2 {
  font-size: clamp(2rem, 6vw, 3rem) !important;
  line-height: 1.02 !important;
}

.dashboard-feature-extra,
.hero-meta {
  font-size: 0.98rem !important;
  line-height: 1.5 !important;
}

/* cleaner hero spacing */
.dashboard-hero {
  gap: 16px !important;
}

.dashboard-hero-heading {
  margin-bottom: 8px !important;
}

/* mobile tune */
@media (max-width: 699px) {
  .app-brand-image {
    width: 180px !important;
    max-width: 46vw !important;
  }

  .dashboard-feature-art,
  .featured-event-image-wrap {
    min-height: 260px !important;
    height: 260px !important;
  }

  .topbar-right {
    gap: 8px !important;
  }
}
/* ===== unify top header control sizes + alignment ===== */

:root {
  --header-control-size: 72px;
}

.topbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  backdrop-filter: none !important;
}

.topbar-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  min-height: var(--header-control-size) !important;
}

.topbar-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--header-control-size) !important;
}

.topbar-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  min-height: var(--header-control-size) !important;
}

/* make every visible top control share the same visual height */
.app-brand-lockup,
.topbar-circle-btn,
.topbar-profile-circle-btn,
.menu-btn {
  height: var(--header-control-size) !important;
  min-height: var(--header-control-size) !important;
  align-self: center !important;
  margin: 0 !important;
}

/* logo scales to same control height */
.app-brand-lockup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.app-brand-image {
  height: var(--header-control-size) !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* center button and right-side buttons all match */
.topbar-circle-btn,
.topbar-profile-circle-btn,
.menu-btn {
  width: var(--header-control-size) !important;
  min-width: var(--header-control-size) !important;
  border-radius: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* keep old text/logo leftovers hidden */
.brand-lockup h1,
.logo-mark,
.logo-mark.small,
.logo-ring,
.logo-g {
  display: none !important;
}

@media (max-width: 699px) {
  :root {
    --header-control-size: 58px;
  }

  .topbar {
    column-gap: 12px !important;
  }

  .topbar-left {
    gap: 12px !important;
  }

  .topbar-right {
    gap: 10px !important;
  }

  .app-brand-image {
    max-width: 160px !important;
  }
}
/* ===== FINAL HEADER LAYOUT FIX ===== */

:root {
  --header-control-size: 64px;
}

/* true 3-position header:
   far-left menu | true center logo | far-right actions */
.topbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto 1fr auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  backdrop-filter: none !important;
}

/* kill older conflicting layout rules */
.topbar-left,
.topbar-center,
.topbar-right {
  display: flex !important;
  align-items: center !important;
  min-height: var(--header-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.topbar-left {
  grid-column: 1 !important;
  justify-self: start !important;
  justify-content: flex-start !important;
}

.topbar-center {
  grid-column: 3 !important;
  justify-self: center !important;
  justify-content: center !important;
}

.topbar-right {
  grid-column: 5 !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* reset old "display: contents" / grid-column hacks */
.topbar-left {
  display: flex !important;
}
#menu-btn,
.app-brand-lockup,
.topbar-right {
  grid-column: auto !important;
  justify-self: auto !important;
  align-self: center !important;
}

/* same visual scale for all top controls */
.menu-btn,
.topbar-circle-btn,
.topbar-profile-circle-btn,
.app-brand-lockup {
  height: var(--header-control-size) !important;
  min-height: var(--header-control-size) !important;
  margin: 0 !important;
}

/* menu button */
.menu-btn {
  width: var(--header-control-size) !important;
  min-width: var(--header-control-size) !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* centered logo */
.app-brand-lockup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.app-brand-image {
  height: var(--header-control-size) !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* right-side action buttons */
.topbar-circle-btn,
.topbar-profile-circle-btn {
  width: var(--header-control-size) !important;
  min-width: var(--header-control-size) !important;
  height: var(--header-control-size) !important;
  min-height: var(--header-control-size) !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* hide old leftover text/logo pieces */
.brand-lockup h1,
.logo-mark,
.logo-mark.small,
.logo-ring,
.logo-g {
  display: none !important;
}

@media (max-width: 699px) {
  :root {
    --header-control-size: 56px;
  }

  .topbar {
    column-gap: 8px !important;
  }

  .topbar-right {
    gap: 8px !important;
  }

  .app-brand-image {
    max-width: 110px !important;
  }
}
/* ===== CLEAN HEADER RESET ===== */

.topbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  backdrop-filter: none !important;
}

.topbar-left,
.topbar-center,
.topbar-right {
  display: flex !important;
  align-items: center !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.topbar-left {
  justify-content: flex-start !important;
}

.topbar-center {
  justify-content: center !important;
}

.topbar-right {
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* kill old conflicting hacks */
.topbar-left {
  display: flex !important;
}
#menu-btn,
.app-brand-lockup,
.topbar-right {
  grid-column: auto !important;
  justify-self: auto !important;
  align-self: center !important;
}

/* menu button */
.menu-btn {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 14px !important;
}

/* centered logo */
.app-brand-lockup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.app-brand-image {
  width: 96px !important;
  height: auto !important;
  max-width: 96px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* right buttons */
.topbar-circle-btn,
.topbar-profile-circle-btn {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* hide any leftover old logo/text */
.brand-lockup h1,
.logo-mark,
.logo-mark.small,
.logo-ring,
.logo-g {
  display: none !important;
}

@media (max-width: 699px) {
  .topbar {
    column-gap: 10px !important;
  }

  .topbar-left,
  .topbar-center,
  .topbar-right {
    min-height: 52px !important;
  }

  .menu-btn,
  .topbar-circle-btn,
  .topbar-profile-circle-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  .app-brand-image {
    max-width: 84px !important;
    width: 84px !important;
  }
}

/* ===== final header alignment ===== */

.topbar {
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}

.topbar-left,
.topbar-center,
.topbar-right {
  display: flex !important;
  align-items: center !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.topbar-left {
  justify-content: flex-start !important;
}

.topbar-center {
  justify-content: center !important;
  min-width: 0 !important;
}

.topbar-right {
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.app-brand-lockup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.app-brand-image {
  width: 96px !important;
  height: auto !important;
  max-width: 96px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topbar-circle-btn,
.topbar-profile-circle-btn {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.brand-lockup h1,
.logo-mark,
.logo-mark.small,
.logo-ring,
.logo-g,
.menu-btn-image {
  display: none !important;
}
/* ===== REALLY FINAL HEADER FIX ===== */

.topbar {
  display: grid !important;
  grid-template-columns: 56px 1fr auto 1fr auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  backdrop-filter: none !important;
}

.topbar-left {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.topbar-center {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.topbar-right {
  grid-column: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* stop older hacks from moving things around */
#menu-btn,
.app-brand-lockup,
.topbar-right {
  grid-column: auto !important;
  justify-self: auto !important;
  align-self: center !important;
}

.menu-btn {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.menu-btn span {
  display: none !important;
}

.menu-btn-image {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
}

.app-brand-lockup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.app-brand-image {
  display: block !important;
  width: auto !important;
  height: 162px !important;
  max-width: 240px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topbar-circle-btn,
.topbar-profile-circle-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* hide old leftovers */
.brand-lockup h1,
.logo-mark,
.logo-mark.small,
.logo-ring,
.logo-g {
  display: none !important;
}

@media (max-width: 699px) {
  .topbar {
    grid-template-columns: 52px 1fr auto 1fr auto !important;
    column-gap: 8px !important;
  }

  .topbar-left,
  .topbar-center,
  .topbar-right {
    min-height: 52px !important;
  }

  .menu-btn,
  .menu-btn-image,
  .topbar-circle-btn,
  .topbar-profile-circle-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  .app-brand-lockup {
    height: 52px !important;
    min-height: 52px !important;
  }

  .app-brand-image {
    height: 238px !important;
    max-width: 500px !important;
  }

  .topbar-right {
    gap: 8px !important;
  }
}

/* ===== STABLE RESPONSIVE HEADER + FEATURED CARD ===== */

:root {
  --header-size: clamp(52px, 7vw, 64px);
  --logo-height: clamp(34px, 5vw, 48px);
  --logo-max-width: clamp(78px, 16vw, 130px);
  --header-gap: clamp(8px, 1.8vw, 14px);
}

/* keep all 5 top controls on one level:
   menu | spacer | logo center | spacer | qr/search/profile */
.topbar {
  display: grid !important;
  grid-template-columns: var(--header-size) 1fr auto 1fr auto !important;
  align-items: center !important;
  column-gap: var(--header-gap) !important;
  row-gap: 0 !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  backdrop-filter: none !important;
}

.topbar-left {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: var(--header-size) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.topbar-center {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--header-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.topbar-right {
  grid-column: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(8px, 1.6vw, 12px) !important;
  flex-wrap: nowrap !important;
  min-height: var(--header-size) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* neutralise older layout hacks */
.topbar-left {
  display: flex !important;
}
#menu-btn,
.app-brand-lockup,
.topbar-right {
  grid-column: auto !important;
  justify-self: auto !important;
  align-self: center !important;
}

/* menu button */
.menu-btn {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: var(--header-size) !important;
  height: var(--header-size) !important;
  min-width: var(--header-size) !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: calc(var(--header-size) * 0.32) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  background: rgba(16, 22, 31, 0.9) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.24) !important;
}

.menu-btn::before {
  content: none !important;
}

.menu-btn span {
  display: block !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #fff !important;
}

.menu-btn-image {
  display: none !important;
}

/* centered landscape logo: do NOT force a square box */
.app-brand-lockup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--header-size) !important;
  min-height: var(--header-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.app-brand-image {
  display: block !important;
  width: auto !important;
  height: var(--logo-height) !important;
  max-width: var(--logo-max-width) !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* right-side action buttons */
.topbar-circle-btn,
.topbar-profile-circle-btn {
  width: var(--header-size) !important;
  height: var(--header-size) !important;
  min-width: var(--header-size) !important;
  min-height: var(--header-size) !important;
  margin: 0 !important;
  border-radius: calc(var(--header-size) * 0.32) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* hide old leftover logo/text pieces */
.brand-lockup h1,
.logo-mark,
.logo-mark.small,
.logo-ring,
.logo-g {
  display: none !important;
}

/* ===== featured event: stable across sizes ===== */

.dashboard-feature-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.dashboard-feature-art,
.featured-event-image-wrap {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.04) !important;
}

#featured-event-image,
#featured-event-image.featured-event-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}

.dashboard-feature-copy h2 {
  font-size: clamp(2rem, 5.6vw, 3rem) !important;
  line-height: 1.03 !important;
}

.dashboard-feature-extra,
.hero-meta {
  font-size: clamp(0.95rem, 2.2vw, 1rem) !important;
  line-height: 1.5 !important;
}

/* tighter small-screen tune */
@media (max-width: 699px) {
  .topbar {
    margin-bottom: 10px !important;
  }

  .dashboard-feature-art,
  .featured-event-image-wrap {
    aspect-ratio: 16 / 10 !important;
  }
}

/* ===== FINAL SINGLE HEADER SYSTEM ===== */

:root {
  --header-btn-size: clamp(52px, 6vw, 58px);
  --logo-height: clamp(58px, 7vw, 66px);
  --logo-max-width: clamp(92px, 14vw, 138px);
  --header-gap: clamp(8px, 1.5vw, 12px);
}

.topbar {
  display: grid !important;
  grid-template-columns: var(--header-btn-size) 1fr auto 1fr auto !important;
  align-items: center !important;
  column-gap: var(--header-gap) !important;
  row-gap: 0 !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  backdrop-filter: none !important;
}

.topbar-left {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: var(--header-btn-size) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.topbar-center {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--logo-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.topbar-right {
  grid-column: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--header-gap) !important;
  flex-wrap: nowrap !important;
  min-height: var(--header-btn-size) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* menu / qr / search / profile all equal squares */
.menu-btn,
.topbar-circle-btn,
.topbar-profile-circle-btn {
  width: var(--header-btn-size) !important;
  height: var(--header-btn-size) !important;
  min-width: var(--header-btn-size) !important;
  min-height: var(--header-btn-size) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

/* menu button */
.menu-btn {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: translateY(10px) !important;
  width: var(--header-btn-size) !important;
  height: var(--header-btn-size) !important;
  min-width: var(--header-btn-size) !important;
  min-height: var(--header-btn-size) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 5px !important;
  background: rgba(16, 22, 31, 0.9) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.24) !important;
}

.menu-btn::before {
  content: none !important;
}

.menu-btn span {
  display: block !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #fff !important;
}

.menu-btn-image {
  display: none !important;
}

/* logo slightly taller than the buttons */
.app-brand-lockup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--logo-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 0 !important;
}

.app-brand-image {
  display: block !important;
  width: auto !important;
  height: var(--logo-height) !important;
  max-width: var(--logo-max-width) !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* right-side buttons */
.topbar-circle-btn,
.topbar-profile-circle-btn {
  padding: 0 !important;
}

/* hide old leftovers */
.brand-lockup h1,
.logo-mark,
.logo-mark.small,
.logo-ring,
.logo-g {
  display: none !important;
}

@media (max-width: 699px) {
  :root {
    --header-btn-size: clamp(48px, 7vw, 54px);
    --logo-height: clamp(52px, 7.2vw, 60px);
    --logo-max-width: clamp(82px, 16vw, 122px);
  }

  .topbar {
    margin-bottom: 10px !important;
  }
}
.menu-btn-image,
.topbar-btn-art {
  width: 66% !important;
  height: 66% !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.menu-btn span {
  display: none !important;
}
.menu-btn-image,
.topbar-btn-art {
  width: 66% !important;
  height: 66% !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
}

.menu-btn span {
  display: none !important;
}
/* ===== top button icon cleanup ===== */

.menu-btn span,
.menu-btn::before,
.menu-btn::after,
.topbar-qr-circle-btn::before,
.topbar-qr-circle-btn::after,
.topbar-search-circle-btn::before,
.topbar-search-circle-btn::after,
.topbar-circle-btn::before,
.topbar-circle-btn::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.menu-btn-image,
.topbar-btn-art {
  display: block !important;
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
}

.menu-btn,
.topbar-qr-circle-btn,
.topbar-search-circle-btn {
  background: transparent !important;
}
/* ===== TOP ICON FIX ===== */

.menu-btn-image {
  display: block !important;
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;
}

.topbar-btn-art {
  display: block !important;
  width: 70% !important;
  height: 70% !important;
  object-fit: contain !important;
}

.menu-btn span,
.menu-btn::before,
.menu-btn::after {
  display: none !important;
  content: none !important;
}

.topbar-qr-circle-btn::before,
.topbar-qr-circle-btn::after,
.topbar-search-circle-btn::before,
.topbar-search-circle-btn::after,
.topbar-circle-btn::before,
.topbar-circle-btn::after {
  display: none !important;
  content: none !important;
}

/* ===== clean topbar image buttons ===== */

.topbar {
  display: grid;
  grid-template-columns: 56px 1fr auto 1fr auto;
  align-items: center;
  column-gap: 10px;
}

.topbar-left {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.topbar-center {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-right {
  grid-column: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

.menu-btn,
.topbar-qr-btn,
.topbar-search-btn,
.topbar-profile-btn,
.topbar-circle-btn,
.topbar-profile-circle-btn {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.menu-btn span,
.menu-btn::before,
.menu-btn::after {
  display: none;
  content: none;
}

.menu-btn-image,
.topbar-btn-art {
  display: block;
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.app-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  line-height: 0;
}

.app-brand-image {
  display: block;
  width: auto;
  height: 60px;
  max-width: 140px;
  object-fit: contain;
}

@media (max-width: 699px) {
  .topbar {
    grid-template-columns: 52px 1fr auto 1fr auto;
    column-gap: 8px;
  }

  .menu-btn,
  .topbar-qr-btn,
  .topbar-search-btn,
  .topbar-profile-btn,
  .topbar-circle-btn,
  .topbar-profile-circle-btn {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }

  .app-brand-image {
    height: 54px;
    max-width: 124px;
  }
}
/* remove visible boxes behind menu / qr / search only */
#menu-btn,
#topbar-qr-btn,
#topbar-search-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

/* keep only the PNG art visible */
#menu-btn .menu-btn-image,
#topbar-qr-btn .topbar-btn-art,
#topbar-search-btn .topbar-btn-art {
  display: block !important;
  width: 140% !important;
  height: 140% !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* hide old fallback bits */
#menu-btn span,
#menu-btn::before,
#menu-btn::after,
#topbar-qr-btn::before,
#topbar-qr-btn::after,
#topbar-search-btn::before,
#topbar-search-btn::after {
  display: none !important;
  content: none !important;
}
/* menu a bit bigger */
#menu-btn {
  width: 6
  84px !important;
  height: 84px !important;
  min-width: 84px !important;
  min-height: 84px !important;
}

#menu-btn .menu-btn-image {
  width: 150% !important;
  height: 150% !important;
}

/* move search left */
#topbar-search-btn {
  margin-right: 84px !important;
}

/* ===== header alignment tweak ===== */

/* keep logo truly centered regardless of left/right icon widths */
.topbar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: start !important;
}

.topbar-left {
  grid-column: 1 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: start !important;
  gap: 6px !important;
}

.topbar-center {
  grid-column: 2 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: start !important;
}

.topbar-right {
  grid-column: 3 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: start !important;
  gap: 8px !important;
}

/* menu still a bit bigger */
#menu-btn {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
}

#menu-btn .menu-btn-image {
  width: 150% !important;
  height: 150% !important;
}

/* logo */
.app-brand-lockup {
  margin: 0 auto !important;
}

.app-brand-image {
  display: block !important;
  margin: 0 auto !important;
}

/* search icon: a bit lower and more left */
#topbar-search-btn {
  transform: translate(-10px, 8px) !important;
}
.dashboard-hero .section-kicker {
  text-align: center !important;
}
.dashboard-hero-copy {
  text-align: center !important;
}
.profile-top-songs-editor {
  display: grid;
  gap: 14px;
}

.profile-song-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.profile-song-thumb-wrap {
  width: 120px;
}

.profile-song-thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
}

.profile-song-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  padding: 10px;
}

.profile-song-fields {
  display: grid;
  gap: 6px;
  align-content: start;
}

@media (max-width: 640px) {
  .profile-song-card {
    grid-template-columns: 1fr;
  }

  .profile-song-thumb-wrap,
  .profile-song-thumb {
    width: 100%;
    height: 160px;
  }
}
/* ===== bigger event modal / stop cut-off ===== */

#event-modal .modal-panel {
  width: min(980px, 96vw) !important;
  height: min(94vh, 980px) !important;
  max-height: 94vh !important;
  padding: 18px !important;
  overflow: hidden !important;
  display: block !important;
  border-radius: 24px !important;
}

#event-modal .concert-modal-layout {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  overflow-y: auto !important;
  padding-top: 34px !important; /* room for close button */
  padding-right: 4px !important;
}

#event-modal .concert-modal-layout::-webkit-scrollbar {
  width: 8px;
}

#event-modal .concert-modal-layout::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

#event-modal .poster-panel {
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#event-modal .concert-poster {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 18px !important;
}

#event-modal #event-modal-title {
  font-size: clamp(1.8rem, 3.8vw, 2.6rem) !important;
  line-height: 1.05 !important;
  margin-bottom: 10px !important;
}

#event-modal .concert-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#event-modal .detail-block,
#event-modal .review-block {
  margin-top: 16px !important;
}

#event-modal .concert-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  padding-top: 12px !important;
  margin-top: 18px !important;
  background: linear-gradient(180deg, rgba(8,12,18,0), rgba(8,12,18,0.96) 28%) !important;
}

#event-modal .upload-preview,
#event-modal .upload-gallery-grid {
  margin-top: 10px !important;
}

@media (max-width: 820px) {
  #event-modal .modal-panel {
    width: 96vw !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 14px !important;
  }

  #event-modal .concert-modal-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-top: 34px !important;
  }

  #event-modal .poster-panel {
    position: relative !important;
    top: auto !important;
  }

  #event-modal .concert-poster {
    aspect-ratio: 16 / 10 !important;
  }

  #event-modal .concert-meta-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* ===== event modal cleanup ===== */

/* 1) kill duplicate close icon */
#event-modal-close::before,
#event-modal-close::after,
#event-modal .modal-close-btn::before,
#event-modal .modal-close-btn::after {
  content: none !important;
  display: none !important;
}

#event-modal-close,
#event-modal .modal-close-btn {
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  text-indent: 0 !important;
  overflow: hidden !important;
}

/* 2) stop event text from looking clipped */
#event-modal .concert-modal-layout {
  align-items: start !important;
}

#event-modal .concert-modal-layout > div:last-child {
  margin-top: 0 !important;
  padding-top: 14px !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

#event-modal #event-modal-year,
#event-modal #event-modal-title,
#event-modal #event-modal-type,
#event-modal #event-modal-extra,
#event-modal .detail-block,
#event-modal .review-block {
  overflow: visible !important;
}

/* keep poster from causing awkward overlap on mobile */
@media (max-width: 820px) {
  #event-modal .poster-panel {
    position: relative !important;
    top: auto !important;
  }

  #event-modal .concert-modal-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-top: 42px !important;
  }

  #event-modal .concert-modal-layout > div:last-child {
    padding-top: 8px !important;
  }
}
/* ===== event modal hard reset: stop poster/content overlap ===== */

#event-modal .modal-panel {
  width: min(980px, 96vw) !important;
  height: min(94vh, 980px) !important;
  max-height: 94vh !important;
  padding: 16px !important;
  overflow: hidden !important;
}

/* force normal vertical flow */
#event-modal .concert-modal-layout {
  display: block !important;
  height: 100% !important;
  overflow-y: auto !important;
  padding-top: 36px !important; /* room for close button */
}

/* poster sits as its own block above everything */
#event-modal .poster-panel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

#event-modal .concert-poster {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 18px !important;
}

/* the text/meta block must not ride up over the image */
#event-modal .concert-modal-layout > div:last-child {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: auto !important;
}

/* remove any accidental pull-up effect */
#event-modal #event-modal-year,
#event-modal #event-modal-title,
#event-modal #event-modal-type,
#event-modal #event-modal-badge-row,
#event-modal .concert-meta-grid,
#event-modal .detail-block,
#event-modal .review-block {
  position: static !important;
  margin-top: 0 !important;
}
/* ===== event modal bottom overlap fix ===== */

/* keep the event content scrollable */
#event-modal .concert-modal-layout {
  overflow-y: auto !important;
}

/* reserve room for the sticky button bar */
#event-modal .concert-modal-layout > div:last-child {
  padding-bottom: 120px !important;
}

/* sticky footer buttons */
#event-modal .concert-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-top: 12px !important;
  margin-top: 18px !important;
  background: linear-gradient(
    180deg,
    rgba(8, 12, 18, 0) 0%,
    rgba(8, 12, 18, 0.92) 28%,
    rgba(8, 12, 18, 0.98) 100%
  ) !important;
}

/* on smaller screens give even more room */
@media (max-width: 700px) {
  #event-modal .concert-modal-layout > div:last-child {
    padding-bottom: 150px !important;
  }

  #event-modal .concert-actions {
    gap: 8px !important;
  }
}
/* featured event title above image and centered */
.dashboard-feature-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.featured-event-top {
  text-align: center !important;
}

.featured-event-top .mini-kicker {
  margin-bottom: 8px !important;
}

.featured-event-top #featured-event-title {
  margin: 0 !important;
  text-align: center !important;
}

.dashboard-feature-copy {
  text-align: center !important;
}

.dashboard-feature-copy .hero-meta,
.dashboard-feature-copy .dashboard-feature-extra {
  text-align: center !important;
}

.dashboard-feature-copy #featured-event-open-btn {
  margin: 0 auto !important;
}