/* ═══════════════ TurnOut - Global Styles ═══════════════ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0a;
  color: #e0e0e0;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

#root, .main {
  overflow-x: hidden;
  max-width: 100vw;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

/* Hide scrollbar on horizontal scroll rows */
.home-scroll-row::-webkit-scrollbar {
  display: none;
}
.home-scroll-row {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ═══════════════ Forms ═══════════════ */

input,
textarea,
select {
  background: #252525;
  border: 1px solid #333;
  color: #e0e0e0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px; /* Prevents iOS zoom on focus */
  width: 100%;
  outline: none;
  transition: border 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #6366f1;
}

button {
  cursor: pointer;
  border: none;
  font-size: 14px;
  transition: all 0.2s;
}

/* ═══════════════ Layout ═══════════════ */

.sidebar {
  width: 260px;
  background: #111;
  border-right: 1px solid #222;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
}

.main {
  flex: 1;
  margin-left: 260px;
  min-height: 100vh;
}

.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #111;
  border-top: 1px solid #222;
  z-index: 100;
}

/* ═══════════════ Components ═══════════════ */

.card {
  background: #1a1a1a;
  border-radius: 16px;
  border: 1px solid #222;
  overflow: hidden;
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-2px);
}

.btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.btn-primary {
  background: #6366f1;
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: #6366f1;
  border: 1px solid #6366f1;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.btn-success {
  background: #22c55e;
  color: #fff;
}

.badge {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  border-radius: 10px;
  padding: 1px 6px;
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  margin: 2px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-weight: 500;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.08));
  color: #c4b5fd;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.3);
}

.nav-item:not(.active) {
  color: #aaa;
}
.nav-item:not(.active):hover {
  background: #1a1a1a;
  color: #fff;
}

/* ═══════════════ Toast ═══════════════ */

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  left: 20px;
  max-width: 400px;
  margin: 0 auto;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease;
  text-align: center;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ═══════════════ Grid ═══════════════ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* ═══════════════ Filter Buttons ═══════════════ */

.cat-btn {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #999;
  cursor: pointer;
}

.cat-btn.active {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}

/* ═══════════════ Tabs ═══════════════ */

.tab-btn {
  padding: 10px 16px;
  background: none;
  color: #666;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.tab-btn.active {
  color: #6366f1;
  font-weight: 700;
  border-bottom-color: #6366f1;
}

.stat-box {
  background: #252525;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

/* ═══════════════ Mobile Responsive ═══════════════ */

/* Tablet */
@media (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }
  .main {
    margin-left: 200px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .sidebar {
    display: none !important;
  }

  .main {
    margin-left: 0 !important;
    padding: 12px 12px 80px 12px !important;
  }

  .mobile-nav {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    padding: 6px 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  .mobile-signout {
    display: flex !important;
  }

  .mobile-logo {
    display: block !important;
  }

  /* Grid goes single column on small screens */
  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Cards - full width, no hover effect on touch */
  .card {
    border-radius: 12px;
  }
  .card:hover {
    transform: none;
  }

  /* Buttons - larger tap targets */
  .btn {
    padding: 12px 20px;
    font-size: 14px;
    min-height: 44px;
  }

  /* Filter buttons - scrollable row */
  .cat-btn {
    padding: 8px 14px;
    font-size: 12px;
  }

  /* Tabs - scrollable */
  .tab-btn {
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Toast - full width on mobile */
  .toast {
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
    font-size: 13px;
    padding: 10px 16px;
  }

  /* Form inputs - proper mobile sizing */
  input, textarea, select {
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 10px;
  }

  /* Stat boxes */
  .stat-box {
    padding: 10px;
    font-size: 13px;
  }

  /* Images in cards - proper aspect ratio */
  .card img {
    max-width: 100%;
    height: auto;
  }
}

/* Small phones */
@media (max-width: 375px) {
  .main {
    padding: 8px 8px 80px 8px !important;
  }

  .grid {
    gap: 10px;
  }

  .btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .cat-btn {
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* ═══════════════ Create Event Page ═══════════════ */

.create-page {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.create-form {
  flex: 1;
  min-width: 0;
}

.create-header {
  margin-bottom: 24px;
}

.create-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.create-subtitle {
  font-size: 13px;
  color: #666;
}

.create-section {
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}

.create-section-label {
  font-size: 13px;
  font-weight: 700;
  color: #a5a5a5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.create-section-icon {
  font-size: 15px;
}

.create-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.create-field {
  display: flex;
  flex-direction: column;
}

.create-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
  font-weight: 500;
}

.create-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.create-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.create-tag-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #333;
  background: #252525;
  color: #999;
  transition: all 0.15s;
}

.create-tag-btn.active {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

.create-img-upload {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.create-img-btn {
  padding: 10px 20px;
  background: #6366f1;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.create-img-status {
  font-size: 13px;
  color: #666;
}

.create-share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.create-share-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  color: #ccc;
  transition: border-color 0.2s;
}

.create-share-opt:has(input:checked) {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.06);
}

/* Share chip buttons on create page */
.share-chip {
  cursor: pointer;
  user-select: none;
}
.share-chip-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  transition: all 0.2s;
}
.share-chip:has(input:checked) .share-chip-inner {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.12);
  color: #c4c6ff;
}

.create-submit {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  margin-top: 6px;
  border-radius: 12px;
}

/* Preview - desktop: sticky sidebar */
.create-preview {
  flex: 0 0 300px;
  position: sticky;
  top: 20px;
}

.create-preview-toggle {
  display: none;
}

.create-preview-content {
  display: block;
}

.preview-chevron {
  font-size: 12px;
  color: #666;
  transition: transform 0.2s;
}

.preview-chevron.collapsed {
  transform: rotate(180deg);
}

/* ── Mobile overrides for Create page ── */
@media (max-width: 768px) {
  .create-page {
    flex-direction: column;
    gap: 14px;
  }

  .create-form {
    order: 1;
    width: 100%;
  }

  .create-preview {
    order: 0;
    flex: none;
    width: 100%;
    position: relative;
    top: 0;
  }

  .create-preview-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #141414;
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    cursor: pointer;
  }

  .create-preview-content {
    margin-top: 8px;
  }

  .create-preview-content.collapsed {
    display: none;
  }

  .create-title {
    font-size: 20px;
  }

  .create-section {
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 12px;
  }

  .create-section-label {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .create-share-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .create-share-opt {
    padding: 8px 10px;
    font-size: 11px;
  }

  .create-submit {
    padding: 14px;
    font-size: 15px;
    position: sticky;
    bottom: 70px;
    z-index: 10;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 375px) {
  .create-share-grid {
    grid-template-columns: 1fr;
  }

  .create-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════ Utility Classes for Mobile ═══════════════ */

/* Use these in JS for responsive inline styles */
.flex-wrap-mobile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.overflow-x-auto::-webkit-scrollbar {
  display: none;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Safe area for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FRAMEWORK — Reusable Classes for All Pages
   ═══════════════════════════════════════════════════════════════
   Rules for new features:
   1. Never hard-code heights on banners / hero images — use .hero-banner
   2. Carousel cards should use .mini-card class, not inline min-width
   3. Main page content goes in .page-container
   4. Section wrappers use .section-block
   5. Filter chip rows use .filter-row
   6. Side-by-side 2-col layouts use .row-2 (collapses on mobile)
   7. Anything with fixed widths must add a responsive breakpoint
   =============================================================== */

/* Page container — consistent max-width & margin, collapses nicely */
.page-container {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Hero / Featured banner — responsive height */
.hero-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  cursor: pointer;
  height: 220px;
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-banner-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

/* Section block wrapper */
.section-block {
  margin-bottom: 20px;
}

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

.section-title {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Page title (h1/h2 at top of screens) */
.page-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Mini card for horizontal carousels */
.mini-card {
  min-width: 220px;
  max-width: 220px;
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
}

.mini-card-image {
  height: 120px;
  position: relative;
  border-radius: 12px 12px 0 0;
  background-size: cover;
  background-position: center;
}

/* Main grid event cards */
.grid-card {
  cursor: pointer;
}

.grid-card-image {
  height: 160px;
  position: relative;
  background-size: cover;
  background-position: center;
}

/* Filter / chip rows — horizontal scroll on narrow screens */
.filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.filter-row-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.filter-row-scroll::-webkit-scrollbar { display: none; }
.filter-row-scroll > * {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 2-column row that collapses on mobile */
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Chip group (wraps nicely on mobile) */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Modal/panel card (used for editor panels like preferences) */
.panel-card {
  background: #1a1a1a;
  border-radius: 16px;
  border: 1px solid #222;
  padding: 20px;
  margin-bottom: 20px;
}

/* ─────── Legal / Policy pages ─────── */
.policy-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 4px;
  color: #d0d0d0;
  line-height: 1.6;
}
.policy-page .back-btn {
  margin-bottom: 20px;
}
.policy-header {
  text-align: center;
  padding: 20px 0 28px;
  border-bottom: 1px solid #222;
  margin-bottom: 20px;
}
.policy-icon {
  font-size: 46px;
  margin-bottom: 10px;
  line-height: 1;
}
.policy-title {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.policy-meta {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.policy-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #1c1c1c;
}
.policy-tab {
  flex: 1 1 auto;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #2a2a2a;
  background: #151515;
  color: #bbb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-align: center;
  min-width: 0;
}
.policy-tab:hover {
  background: #1c1c1c;
  color: #fff;
  border-color: #3a3a3a;
}
.policy-tab.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}
.policy-body {
  font-size: 15px;
}
.policy-h2 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
  padding-top: 8px;
  border-top: 1px solid #1a1a1a;
}
.policy-h2:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.policy-p {
  margin: 0 0 14px;
  color: #c8c8c8;
}
.policy-p strong {
  color: #fff;
}
.policy-ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.policy-ul li {
  margin-bottom: 8px;
  color: #c8c8c8;
}
.policy-ul li strong {
  color: #fff;
}
.policy-p a,
.policy-ul a {
  color: #6366f1;
  text-decoration: none;
  font-weight: 600;
}
.policy-p a:hover,
.policy-ul a:hover {
  text-decoration: underline;
}
.policy-callout {
  background: #141414;
  border: 1px solid #222;
  border-left: 4px solid #6366f1;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 18px 0;
}
.policy-callout-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.policy-callout-text {
  font-size: 14px;
  color: #ddd;
  line-height: 1.55;
}
.policy-footer {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #1c1c1c;
  text-align: center;
  color: #666;
  font-size: 13px;
}
.policy-footer a { color: #6366f1; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) {
  .policy-title { font-size: 24px; }
  .policy-icon { font-size: 40px; }
  .policy-tab { font-size: 11px; padding: 8px 10px; flex: 1 1 45%; }
  .policy-body { font-size: 14px; }
  .policy-h2 { font-size: 17px; }
}

/* ─────── Sidebar footer legal links ─────── */
.sidebar-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px 20px 8px;
  font-size: 10px;
  color: #555;
  border-top: 1px solid #1c1c1c;
  background: #0d0d0d;
  line-height: 1.5;
}
.sidebar-legal a {
  color: #777;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.sidebar-legal a:hover {
  color: #6366f1;
}
.sidebar-legal .dot {
  color: #333;
  user-select: none;
}

/* ─────── Acceptance checkbox (auth + create event) ─────── */
.accept-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #aaa;
  line-height: 1.5;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Custom checkbox — much more visible checked state */
.accept-box input[type="checkbox"] {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid #555;
  border-radius: 6px;
  background: #0a0a0a;
  cursor: pointer;
  position: relative;
  transition: all 0.18s ease;
}
.accept-box input[type="checkbox"]:hover {
  border-color: #8b8dff;
}
.accept-box input[type="checkbox"]:checked {
  background: #6366f1;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25),
              0 0 12px rgba(99, 102, 241, 0.5);
}
.accept-box input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.accept-box input[type="checkbox"]:focus-visible {
  outline: 2px solid #8b8dff;
  outline-offset: 2px;
}
/* Entire box lights up when accepted */
.accept-box:has(input[type="checkbox"]:checked) {
  background: rgba(99, 102, 241, 0.08);
  border-color: #6366f1;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
  color: #e5e5ff;
}
.accept-box label {
  cursor: pointer;
  flex: 1;
  padding-top: 2px;
}
.accept-box a {
  color: #6366f1;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.accept-box:has(input[type="checkbox"]:checked) a {
  color: #a5a7ff;
}
.accept-box a:hover { text-decoration: underline; }

/* ─────── Unified filter bar (home page) ─────── */
.unified-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 4px;
  flex-wrap: wrap;
}
.uf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #2a2a2a;
  background: #151515;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.uf-pill:hover {
  background: #1c1c1c;
  border-color: #3a3a3a;
  color: #fff;
}
.uf-pill .uf-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.uf-pill .uf-arrow {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 2px;
}
.uf-pill .uf-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 10px;
  line-height: 1;
  margin-left: 2px;
  transition: background 0.15s ease;
}
.uf-pill .uf-clear:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* Active states — color-coded by filter type */
.uf-pill.active {
  color: #fff;
  font-weight: 700;
}
.uf-pill.uf-cat.active {
  background: #6366f1;
  border-color: #6366f1;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
}
.uf-pill.uf-tag.active {
  background: #a855f7;
  border-color: #a855f7;
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.35);
}
.uf-pill.uf-loc.active {
  background: #22c55e;
  border-color: #22c55e;
  box-shadow: 0 2px 12px rgba(34, 197, 94, 0.35);
}
@media (max-width: 480px) {
  .uf-pill {
    font-size: 12px;
    padding: 7px 12px;
  }
  .uf-pill .uf-label {
    max-width: 90px;
  }
}

/* ─────── Filter popup modal (home page More buttons) ─────── */
.filter-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: fadeIn 0.18s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.filter-popup-panel {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.22s ease-out;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0.8; }
  to { transform: translateY(0); opacity: 1; }
}
.filter-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #222;
}
.filter-popup-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.filter-popup-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #ccc;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.filter-popup-close:hover {
  background: #222;
  color: #fff;
  border-color: #3a3a3a;
}
@media (min-width: 640px) {
  .filter-popup-overlay {
    align-items: center;
    padding: 20px;
  }
  .filter-popup-panel {
    border-radius: 20px;
  }
}

/* ─────── Crews Page Components ─────── */
/* Page header block with title, subtitle, and CTA */
.section-hero {
  margin-bottom: 20px;
}
.section-hero-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.section-hero-subtitle {
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
  max-width: 520px;
}

/* Toolbar (search + filter + sort + new button) */
.toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search-input {
  flex: 1;
  min-width: 180px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #e0e0e0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  transition: border-color .15s;
}
.search-input:focus {
  outline: none;
  border-color: #6366f1;
}
.toolbar-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #e0e0e0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s;
}
.toolbar-btn:hover {
  background: #252525;
  border-color: #6366f1;
}
.toolbar-btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #fff;
}
.toolbar-btn.primary:hover {
  filter: brightness(1.1);
}

/* Tabs (used on Crews list, can be reused) */
.tabs-row {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid #222;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-row::-webkit-scrollbar { display: none; }
.tab-btn {
  background: none;
  border: none;
  color: #888;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s;
}
.tab-btn:hover { color: #bbb; }
.tab-btn.active {
  color: #fff;
}
.tab-btn.active::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 3px 3px 0 0;
}
.tab-btn .count {
  background: #252525;
  color: #aaa;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
}
.tab-btn.active .count {
  background: rgba(99,102,241,.25);
  color: #c4b5fd;
}

/* New crew card (v2) — tighter, side layout */
.crew-card {
  background: #141414;
  border: 1px solid #222;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
.crew-card:hover {
  border-color: #3a3a3a;
  transform: translateY(-1px);
}
.crew-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, #6366f1);
  opacity: .5;
}
.crew-card-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.crew-card-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #252525;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  border: 1px solid #333;
}
.crew-card-main {
  flex: 1;
  min-width: 0;
}
.crew-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.crew-card-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.crew-card-desc {
  font-size: 13px;
  color: #999;
  margin-bottom: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.crew-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #777;
  margin-bottom: 10px;
}
.crew-card-meta .dot { color: #444; }
.crew-card-meta .location { color: #aaa; }

/* Badges (Public/Private/Owner/Verified etc.) */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge-owner { background: #6366f1; color: #fff; }
.badge-public { background: rgba(34,197,94,.15); color: #4ade80; border-color: rgba(34,197,94,.3); }
.badge-private { background: rgba(245,158,11,.15); color: #fbbf24; border-color: rgba(245,158,11,.3); }
.badge-verified { background: rgba(56,189,248,.15); color: #38bdf8; border-color: rgba(56,189,248,.3); }
.badge-active { background: rgba(34,197,94,.15); color: #4ade80; border-color: rgba(34,197,94,.3); }
.badge-new { background: rgba(168,85,247,.15); color: #c4b5fd; border-color: rgba(168,85,247,.3); }

/* Tag chips (within a crew card) */
.tag-mini {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,.25);
  text-transform: none;
  font-weight: 600;
}

/* Avatar stack (overlapping circles) */
.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-stack-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #141414;
  margin-left: -8px;
  background: #252525;
}
.avatar-stack-img:first-child { margin-left: 0; }
.avatar-stack-more {
  margin-left: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #252525;
  border: 2px solid #141414;
  color: #aaa;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-stack-owner {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 1px #141414;
}

/* Bottom row of crew card: avatar stack on left, actions on right */
.crew-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #1f1f1f;
}
.crew-card-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.crew-card-footer-text {
  font-size: 11px;
  color: #777;
  line-height: 1.3;
  min-width: 0;
}
.crew-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.btn-outline {
  background: transparent;
  border: 1px solid #333;
  color: #e0e0e0;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-outline:hover {
  background: #1a1a1a;
  border-color: #6366f1;
  color: #c4b5fd;
}
.btn-sm {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
}
.status-pending {
  background: rgba(245,158,11,.1);
  color: #fbbf24;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(245,158,11,.3);
}

/* Featured crews section */
.featured-crew-card {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(168,85,247,.08));
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 14px;
  padding: 16px;
  min-width: 260px;
  max-width: 260px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform .2s, border-color .2s;
  scroll-snap-align: start;
}
.featured-crew-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99,102,241,.5);
}
.featured-badge {
  display: inline-block;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  background: #141414;
  border: 1px dashed #2a2a2a;
  border-radius: 14px;
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: .6;
}
.empty-state-title {
  font-size: 16px;
  font-weight: 700;
  color: #aaa;
  margin-bottom: 6px;
}
.empty-state-text {
  font-size: 13px;
  color: #666;
  max-width: 360px;
  margin: 0 auto 16px;
}

/* Mobile adjustments for crew components */
@media (max-width: 768px) {
  .section-hero-title { font-size: 22px; }
  .section-hero-subtitle { font-size: 13px; }
  .toolbar-row { gap: 8px; }
  .search-input { padding: 9px 12px; font-size: 13px; min-width: 120px; }
  .toolbar-btn { padding: 9px 12px; font-size: 12px; }
  .crew-card { padding: 14px; }
  .crew-card-body { gap: 12px; }
  .crew-card-logo { width: 48px; height: 48px; font-size: 24px; border-radius: 12px; }
  .crew-card-name { font-size: 15px; }
  .crew-card-desc { font-size: 12px; }
  .crew-card-footer-text { font-size: 11px; }
  .btn-outline, .btn-sm { padding: 6px 10px; font-size: 11px; }
  .featured-crew-card { min-width: 220px; max-width: 220px; }
  .tab-btn { padding: 10px 10px; font-size: 13px; }
}

/* Back button — visible pill used on all detail pages (event, crew, user) */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  padding: 10px 16px;
  border: 1px solid #333;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: background .15s, border-color .15s, transform .1s;
}
.back-btn:hover {
  background: #252525;
  border-color: #6366f1;
}
.back-btn:active {
  transform: scale(.97);
}
.back-btn .arrow {
  font-size: 18px;
  line-height: 1;
}

/* ── Mobile overrides (≤ 768px) ── */
@media (max-width: 768px) {
  .page-container {
    padding: 0 12px;
  }

  /* Featured banner shrinks */
  .hero-banner {
    height: 160px;
    border-radius: 14px;
    margin-bottom: 14px;
  }
  .hero-banner-title {
    font-size: 16px;
  }

  /* Section spacing tightens */
  .section-block {
    margin-bottom: 16px;
  }
  .section-title {
    font-size: 14px;
  }

  /* Page title shrinks */
  .page-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  /* Mini cards get smaller so 1.5 visible (swipeable hint) */
  .mini-card {
    min-width: 170px;
    max-width: 170px;
  }
  .mini-card-image {
    height: 100px;
  }

  /* Grid card image shorter */
  .grid-card-image {
    height: 140px;
  }

  /* Filter scroll row scrolls horizontally on mobile */
  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row > * { flex-shrink: 0; white-space: nowrap; }

  /* 2-col rows stack on mobile */
  .row-2 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Panel card tighter padding */
  .panel-card {
    padding: 16px;
    border-radius: 12px;
  }
}

/* Small phones (≤ 375px) */
@media (max-width: 375px) {
  .hero-banner {
    height: 140px;
  }
  .mini-card {
    min-width: 150px;
    max-width: 150px;
  }
  .mini-card-image {
    height: 90px;
  }
  .grid-card-image {
    height: 130px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERFLOW SAFETY NET — do not remove
   This block prevents new features from breaking mobile layout.
   All global containers clip horizontal overflow, and inline widths
   get overridden so a forgotten max-width:900px won't push the page
   wider than the viewport.
   =============================================================== */
@media (max-width: 768px) {
  html, body, #root, .main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .main > * {
    max-width: 100%;
  }
  /* Override any inline max-width containers on mobile to use full width.
     Covers all common container widths used across pages so we don't have
     to refactor every page — new features inherit this safety net too. */
  .main [style*="max-width:900px"],
  .main [style*="max-width: 900px"],
  .main [style*="max-width:800px"],
  .main [style*="max-width: 800px"],
  .main [style*="max-width:700px"],
  .main [style*="max-width: 700px"],
  .main [style*="max-width:600px"],
  .main [style*="max-width: 600px"],
  .main [style*="max-width:500px"],
  .main [style*="max-width: 500px"],
  .main [style*="max-width:400px"],
  .main [style*="max-width: 400px"] {
    max-width: 100% !important;
  }
  /* Catch inline min-width that would force pages wider than viewport */
  .main [style*="min-width:900px"],
  .main [style*="min-width: 900px"],
  .main [style*="min-width:800px"],
  .main [style*="min-width: 800px"],
  .main [style*="min-width:700px"],
  .main [style*="min-width: 700px"],
  .main [style*="min-width:600px"],
  .main [style*="min-width: 600px"],
  .main [style*="min-width:500px"],
  .main [style*="min-width: 500px"],
  .main [style*="min-width:400px"],
  .main [style*="min-width: 400px"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Images and long text should never force horizontal scroll */
  .main img, .main video, .main iframe {
    max-width: 100%;
    height: auto;
  }
  /* Force long word-breaks so pasted URLs or tokens don't blow out cards */
  .card, .panel-card, .section-block, .page-container {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Tables force horizontal scroll inside a wrapper instead of blowing layout */
  .main table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Any flex/grid container that has inline "display:flex" won't overflow */
  .main [style*="display:flex"],
  .main [style*="display: flex"],
  .main [style*="display:grid"],
  .main [style*="display: grid"] {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TURNOUT MOBILE-FIRST CHECKLIST — READ BEFORE ADDING NEW FEATURES
   ═══════════════════════════════════════════════════════════════
   Every new page/component MUST follow these rules so we never
   have to "fix mobile" again. The safety net above catches mistakes,
   but do it right the first time.

   LAYOUT CLASSES (use these, not inline styles):
   1.  <div class="page-container">    — page wrapper w/ auto padding
   2.  <div class="section-block">     — content section spacing
   3.  <h2 class="page-title">         — page-level headings
   4.  <h3 class="section-title">      — section headings
   5.  <div class="chip-group">        — pill/chip groups (wrap)
   6.  <div class="filter-row">        — filter pills (scroll on mobile)
   7.  <div class="filter-row-scroll"> — always-horizontal-scroll row
   8.  <div class="row-2">             — 2-col grid (stacks on mobile)
   9.  <div class="panel-card">        — editor/modal panels
   10. <div class="hero-banner">       — featured banner (responsive h)
   11. <div class="card mini-card">    — carousel card (bg on .mini-card-image)
   12. <div class="card grid-card">    — grid card (bg on .grid-card-image)
   13. <button class="back-btn"><span class="arrow">&larr;</span> Back</button>
       — visible pill-style back button on every detail page

   MOBILE OVERFLOW RULES (the bugs we fought — don't repeat):
   A. NEVER hardcode widths in pixels over 400px on elements.
      Use max-width + width:100% if you need a cap.
   B. NEVER use inline min-width: 500px+ on anything. Breaks iOS.
   C. Horizontal scroll rows MUST be wrapped in .filter-row-scroll
      or have their own overflow-x:auto + flex-shrink:0 on children.
   D. html AND body both have overflow-x:hidden — never change this.
      iOS Safari ignores body overflow if html is visible.
   E. Banners/hero images: use .hero-banner class, never hard heights.
   F. Any element going inside .page-container gets automatic gutters.
   G. Test every new page at 375px viewport in Chrome DevTools
      (iPhone SE / iPhone 13 mini) before calling it done.
   H. If you inline max-width: 900px/800px/etc, the safety-net above
      will override it on mobile — but prefer .page-container class.

   GOLDEN RULE: If you catch yourself writing <div style="width:...px">
   STOP and use a class instead, or percentage/rem/vw units.
   =============================================================== */

/* ═══════════════════════════════════════════════════════════════
   PHOTO FEED / GRID / COMPOSE — Instagram-style photo feature
   ═══════════════════════════════════════════════════════════════ */

/* 3-column photo grid (used on profile) */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  margin-top:10px;
}
.photo-grid-item{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0a0a0a;
  cursor:pointer;
  border-radius:2px;
}
.photo-grid-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .2s ease, opacity .2s ease;
}
.photo-grid-item:hover img{
  transform:scale(1.04);
  opacity:.92;
}
.photo-grid-star{
  position:absolute;
  top:6px;
  right:6px;
  font-size:14px;
  background:rgba(0,0,0,.55);
  padding:2px 6px;
  border-radius:999px;
  color:#f59e0b;
  pointer-events:none;
}

/* Profile photo tabs (All / Garage) */
.profile-photo-tabs{
  display:flex;
  gap:6px;
  margin-top:12px;
  border-bottom:1px solid #222;
  padding-bottom:0;
}
.ppt-tab{
  background:transparent;
  border:none;
  color:#888;
  font-size:13px;
  font-weight:600;
  padding:10px 14px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s ease, border-color .15s ease;
}
.ppt-tab:hover{color:#ddd;}
.ppt-tab.active{
  color:#fff;
  border-bottom-color:#6366f1;
}

/* Feed container tweaks */
.feed-container{
  padding-bottom:80px;
}

/* Horizontal garage highlights strip */
.feed-highlights{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.feed-highlights::-webkit-scrollbar{height:6px;}
.feed-highlights::-webkit-scrollbar-thumb{background:#222;border-radius:4px;}
.feed-highlight-card{
  flex:0 0 auto;
  width:120px;
  height:160px;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  background:#0a0a0a;
  border:1px solid rgba(245,158,11,.3);
}
.feed-highlight-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.feed-highlight-meta{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:6px 8px;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));
  display:flex;
  align-items:center;
  gap:6px;
  color:#fff;
  font-size:11px;
  font-weight:600;
}
.feed-highlight-meta img{
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
}
.feed-highlight-meta span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* Feed card (Instagram-style) */
.feed-card{
  background:#111;
  border:1px solid #222;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:18px;
}
.feed-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}
.feed-card-head img{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  cursor:pointer;
  flex:0 0 auto;
}
.feed-card-author{
  flex:1;
  cursor:pointer;
  min-width:0;
}
.feed-card-name{
  font-size:13px;
  font-weight:700;
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.feed-card-time{
  font-size:11px;
  color:#888;
}
.feed-card-garage{
  font-size:11px;
  color:#f59e0b;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.3);
  padding:2px 8px;
  border-radius:999px;
  flex:0 0 auto;
}
.feed-card-img-wrap{
  background:#0a0a0a;
  cursor:pointer;
  display:block;
  max-height:80vh;
  overflow:hidden;
}
.feed-card-img{
  width:100%;
  display:block;
  object-fit:cover;
  max-height:80vh;
}
.feed-card-video{
  background:#000;
  object-fit:contain;
}
.feed-card-video::-webkit-media-controls-panel{background:rgba(0,0,0,.35);}
.feed-card-actions{
  display:flex;
  gap:6px;
  padding:8px 10px;
  align-items:center;
  border-top:1px solid #1a1a1a;
}
.feed-action-btn{
  background:transparent;
  border:none;
  color:#ccc;
  font-size:20px;
  padding:6px 10px;
  cursor:pointer;
  border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.feed-action-btn:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}
.feed-card-caption{
  padding:4px 14px 14px;
  font-size:13px;
  line-height:1.45;
  color:#ddd;
  word-wrap:break-word;
}
.feed-card-caption strong{
  color:#fff;
  margin-right:6px;
}

/* Mobile overrides */
@media (max-width:768px){
  .photo-grid{gap:2px;}
  .feed-highlight-card{width:100px;height:140px;}
  .feed-card{border-radius:10px;margin-bottom:14px;}
  .feed-card-img{max-height:70vh;}
}

/* ═══════════════════════════════════════════════════════════════════
   Event Detail — Dark industrial redesign
   #111 hero, #E24B4A red accent, Barlow Condensed headings, Barlow body
   Flat cards, 0.5px borders, no gradients or shadows.
   ═══════════════════════════════════════════════════════════════════ */
.ev-page{max-width:760px;margin:0 auto;font-family:'Barlow',system-ui,sans-serif;color:#e6e6e6;}
.ev-page *{box-sizing:border-box;}
.ev-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;color:#999;font-family:'Barlow',sans-serif;font-size:13px;font-weight:500;padding:10px 0;cursor:pointer;letter-spacing:.02em;}
.ev-back:hover{color:#E24B4A;}

/* Hero */
.ev-hero{background:#111;padding:28px 22px 24px;border:.5px solid #222;}
.ev-hero-image{margin:-28px -22px 22px;height:280px;overflow:hidden;border-bottom:.5px solid #222;background:#0a0a0a;cursor:pointer;position:relative;}
.ev-hero-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.ev-hero-image:hover img{transform:scale(1.02);}
.ev-hero-image::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(to bottom,rgba(17,17,17,0),#111);pointer-events:none;}
@media (max-width:640px){.ev-hero-image{margin:-22px -16px 18px;height:200px;}}
.ev-hero-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.ev-hero-tag{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border:.5px solid #2d2d2d;color:#bbb;background:transparent;}
.ev-hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.ev-hero-badge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border:.5px solid;}
.ev-hero-badge.green{color:#6ee09a;border-color:#2a4d38;background:rgba(46,90,60,.12);}
.ev-hero-badge.red{color:#E24B4A;border-color:#4d2424;background:rgba(226,75,74,.1);}
.ev-hero-badge.live{color:#E24B4A;border-color:#4d2424;background:rgba(226,75,74,.1);}
.ev-hero-badge.ended{color:#E24B4A;border-color:#4d2424;background:rgba(226,75,74,.08);}
.ev-hero-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:40px;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;color:#fff;margin-bottom:20px;}
.ev-hero-meta{display:flex;flex-direction:column;gap:10px;}
.ev-hero-row{display:flex;align-items:flex-start;gap:12px;font-family:'Barlow',sans-serif;font-size:14px;color:#ccc;line-height:1.4;}
.ev-hero-row .ev-icon{width:18px;flex-shrink:0;color:#777;font-size:14px;line-height:1.5;text-align:center;}
.ev-hero-row .ev-link{color:#E24B4A;cursor:pointer;text-decoration:none;}
.ev-hero-row .ev-link:hover{text-decoration:underline;}
.ev-hero-row .ev-sub{color:#888;}

/* Generic flat card */
.ev-card{background:#141414;border:.5px solid #242424;padding:20px;margin-top:14px;}
.ev-card h3,.ev-card h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin:0 0 14px;}
.ev-card h3{font-size:17px;}
.ev-card h4{font-size:14px;color:#E24B4A;}
.ev-card p{font-family:'Barlow',sans-serif;}

/* Stats row */
.ev-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
.ev-stat{background:#141414;border:.5px solid #242424;padding:16px;text-align:center;}
.ev-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1;}
.ev-stat-lbl{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#888;margin-top:6px;}

/* Action buttons */
.ev-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.ev-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;border:.5px solid transparent;cursor:pointer;text-decoration:none;background:transparent;color:#e6e6e6;transition:background .12s,color .12s,border-color .12s;min-height:40px;white-space:nowrap;}
.ev-btn:hover{background:#1c1c1c;}
.ev-btn.red{background:#E24B4A;border-color:#E24B4A;color:#fff;}
.ev-btn.red:hover{background:#c43c3b;border-color:#c43c3b;}
.ev-btn.green{background:#1f3a28;border-color:#2c5138;color:#6ee09a;}
.ev-btn.green:hover{background:#254832;}
.ev-btn.dark{background:#141414;border-color:#2a2a2a;color:#ccc;}
.ev-btn.dark:hover{background:#1c1c1c;border-color:#3a3a3a;}
.ev-btn.outline{border-color:#2a2a2a;color:#ccc;}
.ev-btn.outline:hover{border-color:#3a3a3a;color:#fff;}
.ev-btn.danger-text{color:#E24B4A;border-color:transparent;background:transparent;}
.ev-btn.danger-text:hover{background:rgba(226,75,74,.08);}
.ev-btn.disabled,.ev-btn[disabled]{opacity:.45;cursor:not-allowed;}
.ev-btn-sub{display:block;font-family:'Barlow',sans-serif;font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:none;color:#888;margin-top:4px;}
.ev-btn-note{font-family:'Barlow',sans-serif;font-size:11px;color:#888;margin-left:4px;text-transform:none;letter-spacing:0;}

/* Tabs */
.ev-tabs{display:flex;gap:4px;border-bottom:.5px solid #242424;margin-top:18px;overflow-x:auto;}
.ev-tab{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;background:transparent;border:none;color:#888;cursor:pointer;position:relative;white-space:nowrap;}
.ev-tab:hover{color:#ccc;}
.ev-tab.active{color:#fff;}
.ev-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-.5px;height:2px;background:#E24B4A;}

/* 2-col grids */
.ev-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.ev-grid-2 .ev-card{margin-top:0;}
@media (max-width:640px){.ev-grid-2{grid-template-columns:1fr;}}

.ev-meetup-cell{background:#0e0e0e;border:.5px solid #242424;padding:14px;}
.ev-meetup-lbl{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E24B4A;margin-bottom:6px;}
.ev-meetup-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:4px;}
.ev-meetup-desc{font-family:'Barlow',sans-serif;font-size:12px;color:#999;line-height:1.4;}

/* Schedule timeline */
.ev-schedule{display:flex;flex-direction:column;gap:14px;}
.ev-schedule-row{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:flex-start;padding-bottom:14px;border-bottom:.5px solid #1f1f1f;}
.ev-schedule-row:last-child{border-bottom:none;padding-bottom:0;}
.ev-schedule-time{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#E24B4A;line-height:1.2;}
.ev-schedule-body h5{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em;}
.ev-schedule-body p{font-size:13px;color:#aaa;line-height:1.45;}

/* Rules list */
.ev-rules{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.ev-rules li{font-family:'Barlow',sans-serif;font-size:13px;color:#ccc;line-height:1.45;padding-left:16px;position:relative;}
.ev-rules li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;background:#E24B4A;border-radius:50%;}

/* Weather / Rating */
.ev-weather-big{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;color:#fff;letter-spacing:.02em;}
.ev-weather-sub{font-family:'Barlow',sans-serif;font-size:13px;color:#999;margin-top:4px;}
.ev-rating-big{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;color:#fff;letter-spacing:.02em;}
.ev-rating-stars{color:#444;font-size:16px;margin-top:4px;letter-spacing:2px;}
.ev-rating-stars .on{color:#E24B4A;}
.ev-rating-sub{font-family:'Barlow',sans-serif;font-size:12px;color:#888;margin-top:4px;}

/* Organizer */
.ev-org-row{display:flex;align-items:center;gap:14px;}
.ev-org-avatar{width:54px;height:54px;border-radius:50%;background:#E24B4A;color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;border:.5px solid #3a1a1a;text-transform:uppercase;flex-shrink:0;}
.ev-org-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.04em;}
.ev-org-sub{font-family:'Barlow',sans-serif;font-size:13px;color:#999;margin-top:2px;}
.ev-coorg-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#888;margin-top:18px;margin-bottom:10px;}
.ev-coorg-empty{font-family:'Barlow',sans-serif;font-size:12px;color:#777;margin-bottom:10px;}
.ev-coorg-add{display:flex;align-items:center;justify-content:center;width:100%;padding:10px;background:transparent;border:1px dashed #3a3a3a;color:#999;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}
.ev-coorg-add:hover{border-color:#E24B4A;color:#E24B4A;}
.ev-coorg-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}

/* Announcement */
.ev-announce-row{display:flex;gap:8px;align-items:stretch;}
.ev-announce-row input{flex:1;background:#0e0e0e;border:.5px solid #2a2a2a;color:#eee;padding:10px 14px;font-family:'Barlow',sans-serif;font-size:14px;}
.ev-announce-row input:focus{outline:none;border-color:#E24B4A;}

/* Location card */
.ev-loc-map{height:180px;background:#1a1a1a;border:.5px solid #242424;position:relative;display:flex;align-items:center;justify-content:center;color:#555;font-size:28px;}
.ev-loc-map #event-map{width:100%;height:100%;}
.ev-loc-addr{font-family:'Barlow',sans-serif;font-size:13px;color:#ccc;margin-top:12px;line-height:1.4;}
.ev-loc-link{display:inline-block;margin-top:10px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#E24B4A;text-decoration:none;}
.ev-loc-link:hover{text-decoration:underline;}

/* Vehicles */
.ev-veh-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.ev-veh-tile{flex:0 0 140px;background:#0e0e0e;border:.5px solid #242424;padding:14px 10px;text-align:center;}
.ev-veh-icon{font-size:30px;margin-bottom:6px;}
.ev-veh-thumb{width:100%;height:72px;object-fit:cover;margin-bottom:6px;border:.5px solid #242424;cursor:pointer;}
.ev-veh-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.04em;}
.ev-veh-user{font-family:'Barlow',sans-serif;font-size:11px;color:#E24B4A;margin-top:2px;cursor:pointer;}

/* Share */
.ev-share-grid{display:flex;gap:10px;flex-wrap:wrap;}
.ev-share-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:64px;background:transparent;border:none;color:inherit;cursor:pointer;padding:4px;text-decoration:none;}
.ev-share-ico{width:44px;height:44px;border:.5px solid #2a2a2a;background:#0e0e0e;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:17px;}
.ev-share-item:hover .ev-share-ico{border-color:#E24B4A;color:#E24B4A;}
.ev-share-lbl{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#888;}

/* Footer line */
.ev-footer{font-family:'Barlow',sans-serif;font-size:12px;color:#666;text-align:center;margin-top:22px;padding:16px 20px;line-height:1.55;border-top:.5px solid #1f1f1f;}

/* Countdown / status pill row */
.ev-status-row{display:flex;align-items:center;gap:10px;background:#0e0e0e;border:.5px solid #242424;padding:12px 14px;margin-top:14px;}
.ev-status-row .ev-status-lbl{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#888;}
.ev-status-row .ev-status-val{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:#E24B4A;letter-spacing:.02em;}

/* Description */
.ev-desc{font-family:'Barlow',sans-serif;font-size:14px;color:#bbb;line-height:1.55;margin-top:14px;}

/* Inputs inside event redesign (tab content overrides) */
.ev-input{background:#0e0e0e;border:.5px solid #2a2a2a;color:#eee;padding:10px 14px;font-family:'Barlow',sans-serif;font-size:14px;width:100%;}
.ev-input:focus{outline:none;border-color:#E24B4A;}

@media (max-width:640px){
  .ev-hero{padding:22px 16px;}
  .ev-hero-title{font-size:32px;}
  .ev-card{padding:16px;}
  .ev-stat-num{font-size:24px;}
  .ev-schedule-row{grid-template-columns:80px 1fr;gap:10px;}
}

/* ─── Event redesign: additions to cover tab content + cards ─── */
.ev-card-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#bbb;margin-bottom:12px;}
.ev-muted{font-family:'Barlow',sans-serif;font-size:13px;color:#777;}
.ev-center{text-align:center;padding:16px 0;}
.ev-btn-sm{padding:6px 12px !important;font-size:11px !important;}

/* Meet-up cell extras */
.ev-meetup-cell{margin-bottom:8px;}
.ev-meetup-cell:last-child{margin-bottom:0;}
.ev-meetup-addr{font-family:'Barlow',sans-serif;font-size:13px;color:#aaa;line-height:1.4;margin-top:2px;}
.ev-meetup-time{font-family:'Barlow Condensed',sans-serif;font-size:13px;color:#E24B4A;letter-spacing:.08em;text-transform:uppercase;margin-top:4px;}

/* Schedule row simple text */
.ev-schedule-text{font-family:'Barlow',sans-serif;font-size:13px;color:#ddd;line-height:1.45;}

/* 2-col stacked weather/rating column */
.ev-stack-2{display:flex;flex-direction:column;gap:12px;}
.ev-stack-2 .ev-card{margin-top:0;}
.ev-weather-big{font-size:14px;font-weight:600;color:#bbb;}
.ev-weather-big-val{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;color:#fff;margin-top:4px;letter-spacing:.02em;}
.ev-rating-big-row{display:flex;align-items:center;gap:10px;}
.ev-rating-big-num{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:800;color:#fff;letter-spacing:.02em;}
.ev-rating-big-stars{color:#E24B4A;font-size:16px;letter-spacing:2px;}
.ev-rating-big-sub{font-family:'Barlow',sans-serif;font-size:12px;color:#888;margin-top:2px;}

/* Organizer row details */
.ev-org-info{flex:1;}
.ev-org-rate{display:flex;align-items:center;gap:4px;margin-top:8px;flex-wrap:wrap;}
.ev-org-rate-lbl{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#888;margin-right:4px;}
.ev-org-rate-btn{background:none;border:none;color:#E24B4A;cursor:pointer;font-size:18px;padding:2px;transition:transform .15s;}
.ev-org-rate-btn:hover{transform:scale(1.15);}
.ev-org-rate-avg{font-family:'Barlow',sans-serif;font-size:12px;color:#888;margin-left:6px;}

/* Co-orgs inside organizer card */
.ev-coorg-section{margin-top:18px;padding-top:14px;border-top:.5px solid #1f1f1f;}
.ev-coorg-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#888;margin-bottom:10px;}
.ev-coorg-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:.5px solid #1f1f1f;}
.ev-coorg-row:last-child{border-bottom:none;}
.ev-coorg-main{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer;}
.ev-coorg-avatar{width:32px;height:32px;border-radius:50%;background:#1a1a1a;border:.5px solid #333;flex-shrink:0;}
.ev-coorg-name{font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;color:#ccc;}
.ev-coorg-badge{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#E24B4A;padding:8px 0;margin-top:10px;border-top:.5px solid #1f1f1f;}

/* Announcements list */
.ev-ann-item{position:relative;padding:12px 0;border-bottom:.5px solid #1f1f1f;}
.ev-ann-item:last-child{border-bottom:none;}
.ev-ann-text{font-family:'Barlow',sans-serif;font-size:13px;color:#ddd;line-height:1.4;}
.ev-ann-time{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.1em;color:#666;margin-top:4px;text-transform:uppercase;}
.ev-ann-del{position:absolute;top:10px;right:0;background:transparent;border:.5px solid #3a1a1a;color:#E24B4A;font-size:10px;padding:2px 6px;cursor:pointer;opacity:.5;}
.ev-ann-del:hover{opacity:1;}

/* Location foot row */
.ev-loc-map{margin-bottom:12px;}
.ev-loc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.ev-loc-text{font-family:'Barlow',sans-serif;font-size:13px;color:#ccc;flex:1;min-width:0;}

/* Vehicles grid */
.ev-veh-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.ev-veh-img{width:100%;height:90px;object-fit:cover;border-bottom:.5px solid #242424;}
.ev-veh-img-blank{height:90px;background:#1a1a1a;display:flex;align-items:center;justify-content:center;font-size:28px;border-bottom:.5px solid #242424;}
.ev-veh-tile{padding:0;overflow:hidden;}
.ev-veh-body{padding:10px;}
.ev-veh-body .ev-veh-title{margin-bottom:2px;}

/* Share grid (new) */
.ev-share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;}
.ev-share-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 8px;background:#0e0e0e;border:.5px solid #242424;color:#ccc;cursor:pointer;text-decoration:none;transition:border-color .15s, color .15s;}
.ev-share-btn:hover{border-color:#E24B4A;color:#E24B4A;}
.ev-share-icon{font-size:20px;}
.ev-share-lbl{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.ev-qr-section{text-align:center;padding:16px;background:#fff;margin-top:12px;}
.ev-qr-img{width:160px;height:160px;margin:0 auto 8px;display:block;}
.ev-qr-cap{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;color:#333;letter-spacing:.1em;text-transform:uppercase;}

/* Chat */
.ev-chat-list{max-height:380px;overflow-y:auto;margin-bottom:14px;display:flex;flex-direction:column;gap:10px;}
.ev-chat-row{display:flex;}
.ev-chat-row.mine{justify-content:flex-end;}
.ev-chat-bubble{background:#1a1a1a;border:.5px solid #242424;padding:8px 12px;max-width:78%;position:relative;}
.ev-chat-bubble.mine{background:#2a1212;border-color:#3a1a1a;}
.ev-chat-name{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#E24B4A;margin-bottom:3px;cursor:pointer;}
.ev-chat-text{font-family:'Barlow',sans-serif;font-size:13px;color:#e0e0e0;line-height:1.4;}
.ev-chat-time{font-family:'Barlow',sans-serif;font-size:10px;color:#666;margin-top:3px;}
.ev-chat-del{position:absolute;top:3px;right:3px;background:transparent;border:none;color:#E24B4A;font-size:10px;cursor:pointer;opacity:0;padding:2px 4px;}
.ev-chat-bubble:hover .ev-chat-del{opacity:.7;}
.ev-chat-del:hover{opacity:1 !important;}

/* Photos */
.ev-photos-head{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.ev-photo-upload-lbl{padding:8px 14px !important;display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.ev-photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.ev-photo-tile{position:relative;overflow:hidden;cursor:pointer;border:.5px solid #242424;}
.ev-photo-img{width:100%;height:150px;object-fit:cover;display:block;}
.ev-photo-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;}
.ev-photo-del{background:rgba(226,75,74,.85);border:none;padding:4px 8px;cursor:pointer;color:#fff;font-size:11px;}
.ev-photo-like{background:rgba(0,0,0,.7);border:none;padding:4px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;color:#fff;font-size:12px;font-weight:600;}
.ev-photo-like .liked{color:#E24B4A;}
.ev-photo-cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:6px 10px;}
.ev-photo-cap p{font-family:'Barlow',sans-serif;font-size:11px;color:#eee;cursor:pointer;margin:0;}

/* Reviews */
.ev-star-picker{display:flex;gap:6px;margin-bottom:12px;}
.ev-star{cursor:pointer;color:#3a1a1a;font-size:22px;transition:color .15s;}
.ev-star.on,.ev-star:hover,.ev-star:hover ~ .ev-star{color:#E24B4A;}
.ev-review-row{position:relative;padding:12px 0;border-bottom:.5px solid #1f1f1f;}
.ev-review-row:last-child{border-bottom:none;}
.ev-review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:10px;}
.ev-review-name{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#E24B4A;cursor:pointer;}
.ev-review-stars{color:#E24B4A;font-size:13px;letter-spacing:1px;}
.ev-review-text{font-family:'Barlow',sans-serif;font-size:13px;color:#ccc;line-height:1.45;}
.ev-review-time{font-family:'Barlow Condensed',sans-serif;font-size:10px;color:#666;margin-top:4px;letter-spacing:.1em;text-transform:uppercase;}
.ev-review-del{position:absolute;top:10px;right:0;background:transparent;border:.5px solid #3a1a1a;color:#E24B4A;font-size:10px;padding:2px 6px;cursor:pointer;opacity:.5;}
.ev-review-del:hover{opacity:1;}

/* Vibes */
.ev-vibes-grid{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.ev-vibe-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 18px;background:#0e0e0e;border:.5px solid #242424;min-width:80px;cursor:pointer;transition:border-color .15s, background .15s;}
.ev-vibe-btn:hover{border-color:#E24B4A;}
.ev-vibe-btn.mine{border-color:#E24B4A;background:#1a0d0d;}
.ev-vibe-btn.disabled{opacity:.5;cursor:not-allowed;}
.ev-vibe-btn.disabled:hover{border-color:#242424;}
.ev-vibe-emoji{font-size:26px;}
.ev-vibe-lbl{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#888;}
.ev-vibe-count{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;color:#E24B4A;}

/* Recommendations */
.ev-recs-section{margin-top:28px;padding-top:20px;border-top:.5px solid #1f1f1f;}
.ev-recs-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:14px;}
.ev-recs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.ev-rec-card{background:#0e0e0e;border:.5px solid #242424;cursor:pointer;overflow:hidden;transition:border-color .15s;}
.ev-rec-card:hover{border-color:#E24B4A;}
.ev-rec-img{height:110px;background-size:cover;background-position:center;position:relative;}
.ev-rec-cat{position:absolute;top:8px;left:8px;background:#E24B4A;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;}
.ev-rec-cd{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.85);color:#E24B4A;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;letter-spacing:.08em;padding:2px 6px;}
.ev-rec-body{padding:10px 12px;}
.ev-rec-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ev-rec-meta{font-family:'Barlow',sans-serif;font-size:11px;color:#999;margin-top:3px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ev-rec-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
.ev-rec-followers{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#E24B4A;}
.ev-rec-tag{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#888;border:.5px solid #2a2a2a;padding:2px 6px;}

/* ─── Report Event row ─── */
.ev-report-row{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:22px;padding:14px 16px;border-top:.5px solid #1f1f1f;text-align:center;}
.ev-report-btn{background:transparent;border:.5px solid #3a1a1a;color:#E24B4A;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;cursor:pointer;transition:background .15s, color .15s;}
.ev-report-btn:hover{background:#E24B4A;color:#fff;border-color:#E24B4A;}
.ev-report-sub{font-family:'Barlow',sans-serif;font-size:11px;color:#666;}
.ev-report-done{font-family:'Barlow',sans-serif;font-size:12px;color:#888;}

/* ─── Report Modal ─── */
.ev-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
.ev-modal{background:#111;border:.5px solid #2a2a2a;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;padding:24px;}
.ev-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.ev-modal-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:#fff;}
.ev-modal-close{background:transparent;border:none;color:#888;font-size:20px;cursor:pointer;padding:4px 8px;}
.ev-modal-close:hover{color:#E24B4A;}
.ev-modal-sub{font-family:'Barlow',sans-serif;font-size:13px;color:#aaa;line-height:1.5;margin-bottom:16px;}
.ev-modal-sub strong{color:#fff;font-weight:600;}
.ev-modal-label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#888;margin-top:14px;margin-bottom:6px;}
.ev-report-reasons{display:flex;flex-direction:column;gap:6px;}
.ev-report-reason{display:flex;align-items:flex-start;gap:12px;text-align:left;width:100%;padding:12px 14px;background:#0e0e0e;border:.5px solid #242424;color:#ddd;cursor:pointer;transition:border-color .15s, background .15s;}
.ev-report-reason:hover{border-color:#3a2222;background:#141010;}
.ev-report-reason.selected{border-color:#E24B4A;background:#1a0d0d;}
.ev-report-reason-dot{flex-shrink:0;width:14px;height:14px;border-radius:50%;border:.5px solid #444;background:transparent;margin-top:3px;position:relative;}
.ev-report-reason-dot.on{border-color:#E24B4A;}
.ev-report-reason-dot.on::after{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;background:#E24B4A;border-radius:50%;}
.ev-report-reason-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.ev-report-reason-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;color:#fff;text-transform:uppercase;}
.ev-report-reason-desc{font-family:'Barlow',sans-serif;font-size:12px;color:#888;line-height:1.4;}
.ev-report-textarea{width:100%;min-height:90px;resize:vertical;background:#0e0e0e;border:.5px solid #2a2a2a;color:#eee;padding:10px 14px;font-family:'Barlow',sans-serif;font-size:13px;line-height:1.4;}
.ev-report-textarea:focus{outline:none;border-color:#E24B4A;}
.ev-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
.ev-modal-actions .ev-btn{padding:10px 18px;}
.ev-btn:disabled{opacity:.4;cursor:not-allowed;}
@media (max-width:640px){
  .ev-modal{padding:18px;}
  .ev-modal-actions{flex-direction:column-reverse;}
  .ev-modal-actions .ev-btn{width:100%;}
}