/* [project]/src/app/clubs/[slug]/page.css [app-client] (css) */
#windowResizer {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
}

:root, :host {
  --background: #050509;
  --foreground: #f5f5f7;
  --card: #12121a;
  --border: #2a2a35;
  --primary: #7f5bff;
  --primary-foreground: #fff;
  --accent: #38bdf8;
  --muted: #181822;
  --muted-foreground: #8b8b99;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

* {
  box-sizing: border-box;
}

.app-spotnight {
  color: var(--foreground);
  background: radial-gradient(circle at top, #07070f, #050509);
  padding-bottom: 110px;
  position: relative;
  overflow-x: hidden;
}

.sn-club-header-nav {
  z-index: 10;
  background: linear-gradient(#000000b3, #0000);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.sn-header-actions {
  gap: 12px;
  display: flex;
}

.sn-icon-btn {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  background: #00000073;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.sn-club-hero {
  width: 100%;
  height: 250px;
  min-height: 250px;
  position: relative;
}

.sn-club-hero img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.sn-hero-overlay {
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to top, #07070e 0%, #07070ecc 20%, #07070e66 50%, #0000 100%);
  width: 100%;
  height: 70%;
  position: absolute;
  bottom: -1px;
  left: 0;
}

.sn-logo-block {
  z-index: 20;
  pointer-events: auto;
  position: absolute;
  bottom: -77px;
  left: 50%;
  transform: translateX(-50%);
}

.sn-logo-ring {
  cursor: pointer;
  background: linear-gradient(135deg, #7f5bff 0%, #9f7aea 50%, #38bdf8 100%);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 155px;
  height: 155px;
  padding: 3px;
  display: flex;
  position: relative;
  box-shadow: 0 12px 32px #0009, 0 0 0 1px #ffffff0d;
}

.sn-club-logo {
  object-fit: cover;
  background-color: #050509;
  border: 4px solid #050509;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.sn-club-content {
  flex-direction: column;
  gap: 24px;
  margin-top: 96px;
  padding: 0 24px 24px;
  display: flex;
}

.sn-club-header-left {
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  display: flex;
  position: relative;
}

.sn-header-top-line {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.sn-title-group {
  align-items: center;
  gap: 8px;
  display: flex;
}

.sn-club-name {
  color: #fff;
  text-shadow: 0 0 16px #7f5bff80;
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}

.sn-verified-badge-small {
  justify-content: center;
  align-items: center;
  display: flex;
}

.sn-info-line {
  color: #fff;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.sn-tag-text {
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: .5px;
  font-size: 11px;
}

.sn-city-text {
  color: #ffffffb3;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 11px;
}

.sn-rating-box {
  color: #fff;
  background: #ffffff1a;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.sn-sep {
  color: #fff3;
  font-size: 10px;
}

.sn-actions-line {
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  display: flex;
}

.sn-subscribe-btn {
  color: #000;
  background: #fff;
  border-radius: 99px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  box-shadow: 0 4px 12px #ffffff26;
}

.sn-actions-divider {
  background: #ffffff26;
  width: 1px;
  height: 24px;
}

.sn-header-socials {
  align-items: center;
  gap: 16px;
  display: flex;
}

.sn-social-link {
  color: #fff;
  opacity: 1;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sn-contact-block {
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  display: flex;
}

.sn-contact-row {
  color: #ffffffd9;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  display: flex;
}

.sn-status-open {
  color: #fff;
  font-weight: 600;
}

.sn-tags-row {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  display: flex;
}

.sn-tag-pill {
  color: #ffffffe6;
  white-space: nowrap;
  background: #ffffff0f;
  border: 1px solid #ffffff14;
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
}

.sn-section {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.sn-section-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.sn-section-title {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 13px;
  font-weight: 800;
}

.sn-section-link {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.sn-description {
  color: #ffffffd9;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.sn-gallery-mosaic {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  width: 100%;
  height: auto;
  display: grid;
  overflow: hidden;
}

.sn-mosaic-item-main {
  border-radius: var(--radius-md);
  border: 1px solid #ffffff1a;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px #00000080;
}

.sn-mosaic-col {
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  display: flex;
}

.sn-mosaic-item-small {
  border-radius: var(--radius-md);
  border: 1px solid #ffffff1a;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.sn-gallery-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.sn-mosaic-label {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  background: #0009;
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  bottom: 12px;
  left: 12px;
}

.sn-mosaic-more-overlay {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #0009;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.sn-mosaic-more-overlay span {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.sn-vip-plan-section {
  gap: 8px;
}

.sn-vip-toggle-container {
  background: #ffffff1a;
  border-radius: 99px;
  padding: 2px;
  display: flex;
}

.sn-vt-option {
  color: #fff9;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
}

.sn-vt-option.active {
  color: #000;
  background: #fff;
}

.sn-vip-creative-box {
  background: #12121a;
  border: 1px solid #ffffff14;
  border-radius: 24px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.sn-vip-top-bar {
  background: #181822;
  border-bottom: 1px solid #ffffff0d;
  padding: 12px;
}

.sn-date-pills-scroll {
  scrollbar-width: none;
  gap: 8px;
  display: flex;
  overflow-x: auto;
}

.sn-date-pills-scroll::-webkit-scrollbar {
  display: none;
}

.sn-date-pill {
  background: #ffffff05;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  height: 44px;
  transition: all .2s;
  display: flex;
}

.sn-date-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 4px 12px #7f5bff66;
}

.sn-dp-day {
  color: #fff9;
  font-size: 9px;
  font-weight: 700;
}

.sn-date-pill.active .sn-dp-day {
  color: #ffffffe6;
}

.sn-dp-num {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.sn-vip-map-area {
  background: radial-gradient(circle at top, #1e1e2d 0%, #0d0d12 80%);
  flex-direction: column;
  align-items: center;
  height: 300px;
  padding: 20px;
  display: flex;
  position: relative;
}

.sn-map-grid-bg {
  opacity: .5;
  pointer-events: none;
  background-image: linear-gradient(#ffffff08 1px, #0000 1px), linear-gradient(90deg, #ffffff08 1px, #0000 1px);
  background-size: 20px 20px;
  position: absolute;
  inset: 0;
}

.sn-stage-indicator {
  color: #ffffff80;
  letter-spacing: 1px;
  background: #0000004d;
  border: 1px solid #ffffff1a;
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 24px;
  padding: 6px 16px;
  font-size: 10px;
  font-weight: 800;
  transform: perspective(300px)rotateX(20deg);
  box-shadow: 0 10px 20px #00000080;
}

.sn-tables-layout {
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  display: flex;
}

.sn-tbl-row {
  justify-content: center;
  gap: 14px;
  display: flex;
}

.sn-t-spot {
  color: #fff;
  cursor: pointer;
  background: #ffffff14;
  border: 1px solid #fff3;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  position: relative;
}

.sn-t-spot.premium {
  background: #7f5bff1a;
  border-color: #7f5bff80;
  box-shadow: 0 0 10px #7f5bff1a;
}

.sn-t-spot.occupied {
  opacity: .3;
  color: #555;
  cursor: not-allowed;
  background: #222;
  border-color: #333;
}

.sn-t-spot.selected {
  color: #000;
  z-index: 10;
  background: #fff;
  border: none;
  transform: scale(1.1);
  box-shadow: 0 0 20px #fff6;
}

.sn-t-pulse {
  border: 2px solid #ffffff80;
  border-radius: 12px;
  animation: 2s infinite pulse;
  position: absolute;
  inset: -4px;
}

@keyframes pulse {
  0% {
    opacity: .8;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

.sn-map-legend {
  flex-direction: column;
  gap: 4px;
  display: flex;
  position: absolute;
  top: 16px;
  right: 16px;
}

.sn-l-item {
  color: #fff6;
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 600;
  display: flex;
}

.sn-l-dot {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.sn-l-dot.occ {
  background: #333;
  border: 1px solid #555;
}

.sn-l-dot.free {
  border: 1px solid #fff;
}

.sn-booking-overlay {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 20;
  background: #14141ef2;
  border: 1px solid #ffffff26;
  border-radius: 16px;
  padding: 14px;
  animation: .3s ease-out slideUp;
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  box-shadow: 0 10px 30px #0009;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sn-bo-content {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.sn-bo-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.sn-bo-title {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.sn-bo-badge {
  color: #000;
  background: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
}

.sn-bo-specs {
  color: #fff9;
  font-size: 12px;
}

.sn-bo-divider {
  background: #ffffff1a;
  width: 100%;
  height: 1px;
}

.sn-bo-footer {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.sn-bo-price {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.sn-bo-lbl {
  color: #ffffff80;
  text-transform: uppercase;
  font-size: 10px;
}

.sn-bo-val {
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.sn-bo-btn {
  background: var(--primary);
  color: #fff;
  border-radius: 99px;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  box-shadow: 0 4px 12px #7f5bff66;
}

.sn-contact-card {
  border-radius: var(--radius-lg);
  background: #ffffff08;
  border: 1px solid #ffffff1a;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.sn-contact-main {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.sn-contact-lines {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.sn-contact-label {
  font-size: 13px;
  font-weight: 600;
}

.sn-contact-helper {
  color: #ffffffbf;
  font-size: 12px;
}

.sn-contact-status {
  color: var(--accent);
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
}

.sn-contact-actions {
  justify-content: flex-start;
  display: flex;
}

.sn-cta-message {
  background: radial-gradient(circle at top, #7f5bffd9, #08080e);
  border: 1px solid #7f5bff99;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 0 18px #7f5bffb3;
}

.sn-cta-message-icon {
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: flex;
}

.sn-faq-list {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.sn-faq-card {
  border-radius: var(--radius-md);
  background: #ffffff08;
  border: 1px solid #ffffff0f;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  display: flex;
}

.sn-faq-top {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.sn-faq-question {
  font-size: 12px;
  font-weight: 500;
}

.sn-faq-icon {
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
}

.sn-faq-answer {
  color: #ffffffc7;
  margin: 2px 0 0;
  font-size: 11px;
}

.sn-review-card {
  border-radius: var(--radius-lg);
  background: #ffffff08;
  border: 1px solid #ffffff14;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  display: flex;
}

.sn-review-header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.sn-review-user {
  align-items: center;
  gap: 8px;
  display: flex;
}

.sn-avatar {
  object-fit: cover;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.sn-review-user-text {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.sn-review-name {
  font-size: 13px;
  font-weight: 600;
}

.sn-review-meta-line {
  color: var(--muted-foreground);
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: flex;
}

.sn-review-tag-verified {
  text-transform: uppercase;
  letter-spacing: .3px;
  background: #ffffff1a;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
}

.sn-review-dot {
  color: #fff6;
}

.sn-review-date {
  font-size: 11px;
}

.sn-review-rating {
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.sn-review-text {
  color: #ffffffdb;
  margin: 0;
  font-size: 13px;
}

.sn-bottom-bar {
  z-index: 100;
  background: linear-gradient(to top, #050509 85%, #0000);
  width: 100%;
  padding: 12px 18px 24px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sn-bottom-inner {
  align-items: center;
  gap: 10px;
  display: flex;
}

.sn-bottom-left {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.sn-bottom-line1 {
  color: var(--muted-foreground);
  font-size: 11px;
}

.sn-bottom-line2 {
  font-size: 13px;
  font-weight: 600;
}

.sn-cta-button {
  color: #fff;
  cursor: pointer;
  background: radial-gradient(circle at top, #7f5bff, #5032c8);
  border: 1px solid #fff3;
  border-radius: 99px;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 52px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 18px #7f5bff;
}

.sn-btn-glow {
  pointer-events: none;
  background: linear-gradient(#ffffff40, #0000);
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.sn-alcohol-grid {
  scrollbar-width: none;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 10px;
  margin: 0 -24px;
  padding: 0 24px 10px;
  display: grid;
  overflow-x: auto;
}

.sn-alcohol-grid::-webkit-scrollbar {
  display: none;
}

.sn-bottle-card {
  background: linear-gradient(to right, #ffffff08, #ffffff03);
  border: 1px solid #ffffff0f;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  width: 180px;
  padding: 8px 10px;
  display: flex;
}

.sn-bottle-img {
  background: #000;
  border-radius: 8px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
}

.sn-bottle-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.sn-bottle-info {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.sn-bottle-name {
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
}

.sn-bottle-type {
  color: var(--muted-foreground);
  font-size: 11px;
}

.sn-events-scroll {
  scrollbar-width: none;
  gap: 12px;
  margin: 0 -24px;
  padding: 0 24px 16px;
  display: flex;
  overflow-x: auto;
}

.sn-events-scroll::-webkit-scrollbar {
  display: none;
}

.sn-event-card {
  background: #000;
  border: 1px solid #ffffff14;
  border-radius: 16px;
  flex-shrink: 0;
  width: 220px;
  height: 280px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px #00000080;
}

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

.sn-event-overlay {
  background: linear-gradient(to top, #000 0%, #00000080 40%, #0003 100%);
  position: absolute;
  inset: 0;
}

.sn-event-date {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  line-height: 1;
  display: flex;
  position: absolute;
  top: 12px;
  left: 12px;
}

.sn-date-day {
  font-size: 18px;
  font-weight: 800;
}

.sn-date-month {
  text-transform: uppercase;
  margin-top: 1px;
  font-size: 9px;
  font-weight: 700;
}

.sn-event-content {
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 16px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sn-event-tag {
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .5px;
  background: #fff3;
  border: 1px solid #ffffff4d;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 700;
}

.sn-event-title {
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

.sn-event-artist {
  color: #ffffffb3;
  margin-bottom: 8px;
  font-size: 12px;
}

.sn-event-footer {
  border-top: 1px solid #ffffff26;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 8px;
  display: flex;
}

.sn-event-price {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

.sn-event-btn {
  color: #000;
  text-transform: uppercase;
  background: #fff;
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
}

.sn-event-btn.disabled {
  color: #fff9;
  cursor: not-allowed;
  background: #fff3;
}

.sn-tonight-hero {
  border: 1px solid #ffffff1a;
  border-radius: 20px;
  width: 100%;
  height: 240px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px #0006;
}

.sn-tonight-bg {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.sn-tonight-overlay {
  background: linear-gradient(to top, #050509 0%, #07070e99 40%, #0000 100%);
  position: absolute;
  inset: 0;
}

.sn-tonight-top {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
}

.sn-live-badge {
  color: #ff5c5c;
  text-transform: uppercase;
  letter-spacing: .5px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ff323240;
  border: 1px solid #ff323266;
  border-radius: 99px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  box-shadow: 0 2px 8px #0003;
}

.sn-live-dot {
  background: #ff5c5c;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.sn-weather-badge {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  background: #ffffff1f;
  border: 1px solid #ffffff26;
  border-radius: 99px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.sn-tonight-content {
  background: linear-gradient(to top, #000c, #0000);
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding: 20px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sn-tonight-main {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.sn-tonight-subtitle {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  opacity: .9;
  font-size: 10px;
  font-weight: 700;
}

.sn-tonight-artist {
  color: #fff;
  text-shadow: 0 2px 10px #00000080;
  margin: 2px 0 4px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.sn-tonight-meta-row {
  color: #ffffffd9;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.sn-music-tag {
  color: #fff;
  background: #ffffff26;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.sn-meta-dot {
  color: #ffffff4d;
}

.sn-tonight-right {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 2px;
  display: flex;
}

.sn-tonight-price {
  color: #fff;
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.sn-from {
  color: #fff9;
  font-size: 10px;
}

.sn-val {
  font-size: 18px;
  font-weight: 700;
}

.sn-arrow-btn {
  color: #000;
  background: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
  box-shadow: 0 0 15px #fff3;
}

.sn-ticket-creative {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px #0006;
}

.sn-ticket-notch-l {
  z-index: 2;
  background: #07070e;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
}

.sn-ticket-notch-r {
  z-index: 2;
  background: #07070e;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
}

.sn-ticket-body {
  background: radial-gradient(circle at 0 0, #2d2545, #12121a);
  border: 1px solid #7f5bff4d;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  display: flex;
}

.sn-ticket-left-col {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.sn-ticket-tag-row {
  align-items: center;
  gap: 6px;
  display: flex;
}

.sn-ticket-icon-box {
  background: #7f5bff33;
  border: 1px solid #7f5bff66;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: flex;
}

.sn-ticket-tag {
  color: var(--accent);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}

.sn-ticket-info-main {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.sn-ticket-name {
  color: #fff;
  letter-spacing: -.3px;
  font-size: 17px;
  font-weight: 800;
}

.sn-ticket-desc {
  color: #ffffffa6;
  font-size: 11px;
}

.sn-ticket-divider-dashed {
  border-left: 2px dashed #ffffff26;
  width: 1px;
  height: 40px;
  margin: 0 8px;
}

.sn-ticket-right-col {
  align-items: center;
  gap: 12px;
  display: flex;
}

.sn-ticket-price-box {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  display: flex;
}

.sn-price-val {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.sn-price-unit {
  color: #ffffff80;
  font-size: 9px;
}

.sn-ticket-buy-icon {
  background: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
  box-shadow: 0 0 12px #fff3;
}