:root {
      --bg: #0e1020;
      --panel: #171a2f;
      --panel-2: #20243d;
      --text: #f7f7fb;
      --muted: #a9afc8;
      --border: #303651;
      --accent: #78ffd6;
      --accent-2: #ff7ad9;
      --danger: #ffb4b4;
      --shadow: 0 14px 40px rgba(0,0,0,.32);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at 20% 0%, #28305c 0%, var(--bg) 38%, #070812 100%);
      color: var(--text);
      min-height: 100vh;
    }
    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(14px);
      background: rgba(14,16,32,.86);
      border-bottom: 1px solid var(--border);
    }
    .wrap { max-width: 1800px; margin: 0 auto; padding: 18px; }
    h1 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 42px); letter-spacing: -.04em; }
    .subtitle { margin: 0; color: var(--muted); font-size: 14px; }
    .controls {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }
    .top-controls {
      display: grid;
      grid-template-columns: minmax(180px, 280px) auto auto auto 1fr;
      gap: 12px;
      align-items: end;
    }
    .top-controls > .clear-btn,
    .top-controls > .filter-toggle {
      align-self: end;
      height: 46px;
      box-sizing: border-box;
      margin-bottom: 0;
    }
    .filter-controls {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(220px, 360px) minmax(220px, 300px);
      gap: 12px;
      align-items: end;
    }
    label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
    input[type="text"], select, .dropdown-button {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      color: var(--text);
      padding: 12px 13px;
      font-size: 14px;
      outline: none;
    }
    input[type="text"]:focus, select:focus, .dropdown-button:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120,255,214,.14); }
    .clear-btn {
      border: 1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: var(--text);
      border-radius: 14px;
      padding: 12px 14px;
      cursor: pointer;
      white-space: nowrap;
    }
    .clear-btn:hover { border-color: var(--accent); }
    details.dropdown { position: relative; }
    details.dropdown summary { list-style: none; cursor: pointer; }
    details.dropdown summary::-webkit-details-marker { display: none; }
    .dropdown-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      width: min(360px, 92vw);
      max-height: 380px;
      overflow: auto;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #14172b;
      box-shadow: var(--shadow);
      z-index: 40;
    }
    .venue-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      border-radius: 10px;
      color: var(--text);
      cursor: pointer;
      font-size: 13px;
    }
    .venue-option:hover { background: rgba(255,255,255,.07); }
    .venue-actions { display: flex; gap: 8px; padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
    .mini-btn { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 999px; padding: 5px 9px; font-size: 12px; cursor: pointer; }
    main.wrap { padding-top: 18px; }
    .header-meta {
      margin-top: 12px;
    }
    .stats {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 10px;
    }
    .desktop-day-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      align-items: stretch;
    }
    .desktop-day-headers {
      display: grid;
      grid-template-columns: repeat(var(--visible-day-count, 4), minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
    }
    .desktop-day-header {
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(32,36,61,.92);
      box-shadow: 0 8px 22px rgba(0,0,0,.18);
      font-size: 15px;
      font-weight: 900;
      text-transform: capitalize;
      letter-spacing: -.01em;
      text-align: center;
    }
    .tablet-day-arrow {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      min-height: 44px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(255,255,255,.06);
      color: var(--text);
      font-size: 26px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(0,0,0,.14);
    }
    .tablet-day-arrow:hover:not(:disabled) { border-color: var(--accent); }
    .tablet-day-arrow:disabled { opacity: .35; cursor: default; }
    .columns {
      display: grid;
      grid-template-columns: repeat(var(--visible-day-count, 4), minmax(0, 1fr));
      gap: 14px;
      align-items: start;
    }
    .day {
      background: rgba(255,255,255,.045);
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 12px;
      min-height: 70vh;
    }
    .day h2 {
      display: none;
    }
    .event {
      display: block;
      width: 100%;
      text-align: left;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: rgba(23,26,47,.88);
      color: var(--text);
      padding: 12px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
      position: relative;
      overflow: hidden;
    }
    .event.event-day {
      border-color: rgba(251, 191, 36, .34);
      background: linear-gradient(135deg, rgba(251, 191, 36, .18), rgba(249, 115, 22, .10) 42%, rgba(23,26,47,.88) 72%);
    }
    .event.event-night {
      border-color: rgba(99, 102, 241, .32);
      background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(88, 28, 135, .15) 48%, rgba(12,14,28,.94) 78%);
    }
    .event.event-afterhours {
      border-color: rgba(236, 72, 153, .36);
      background: linear-gradient(135deg, rgba(236, 72, 153, .14), rgba(88, 28, 135, .18) 44%, rgba(12,14,28,.94) 76%);
    }
    .event:hover { transform: translateY(-1px); border-color: rgba(120,255,214,.6); }
    .event.has-votes {
      border-color: hsla(var(--heat-hue, 46), 100%, 58%, calc(.36 + var(--vote-heat, 0) * .48));
      background:
        linear-gradient(135deg,
          hsla(var(--heat-hue, 46), 100%, 55%, calc(.045 + var(--vote-heat, 0) * .13)),
          rgba(23,26,47,.88) 54%);
      box-shadow:
        0 0 0 1px hsla(var(--heat-hue, 46), 100%, 61%, calc(.08 + var(--vote-heat, 0) * .24)),
        0 8px calc(14px + var(--vote-heat, 0) * 18px) hsla(var(--heat-hue, 46), 100%, 52%, calc(.04 + var(--vote-heat, 0) * .16));
    }
    .event.event-day.has-votes {
      background:
        linear-gradient(135deg,
          hsla(var(--heat-hue, 46), 100%, 55%, calc(.05 + var(--vote-heat, 0) * .14)),
          rgba(251, 191, 36, .10) 34%,
          rgba(249, 115, 22, .07) 58%,
          rgba(23,26,47,.88) 82%);
    }
    .event.event-night.has-votes {
      background:
        linear-gradient(135deg,
          hsla(var(--heat-hue, 46), 100%, 55%, calc(.04 + var(--vote-heat, 0) * .12)),
          rgba(79, 70, 229, .13) 38%,
          rgba(30, 27, 75, .34) 76%);
    }
    .event.event-afterhours.has-votes {
      background:
        linear-gradient(135deg,
          hsla(var(--heat-hue, 46), 100%, 55%, calc(.04 + var(--vote-heat, 0) * .12)),
          rgba(236, 72, 153, .13) 38%,
          rgba(88, 28, 135, .30) 76%);
    }
    .event > * {
      position: relative;
      z-index: 1;
    }
    .event.has-votes::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 6px;
      border-radius: 18px 0 0 18px;
      background: hsl(var(--heat-hue, 46), 100%, calc(58% + var(--vote-heat, 0) * 6%));
      box-shadow: 0 0 calc(7px + var(--vote-heat, 0) * 15px) hsla(var(--heat-hue, 46), 100%, 55%, calc(.28 + var(--vote-heat, 0) * .26));
      z-index: 0;
      pointer-events: none;
    }
    .event.voted { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(120,255,214,.38), 0 10px 28px rgba(120,255,214,.10); }
    .event-top { display: flex; justify-content: space-between; align-items: start; gap: 10px; min-height: 18px; }
    .event-title { font-weight: 800; line-height: 1.1; font-size: 14px; padding-right: 4px; }
    .fire-tier { flex: 0 0 auto; min-width: 72px; text-align: right; line-height: 1; letter-spacing: -4px; font-size: 28px; transform: translateY(-4px); filter: drop-shadow(0 0 12px rgba(255, 126, 40, .58)); }
    .event-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; min-height: 30px; }
    .vote-cluster { display: inline-flex; align-items: center; gap: 6px; }
    .badge { flex: 0 0 auto; min-width: 28px; padding: 5px 8px; border-radius: 999px; background: var(--panel-2); color: var(--accent); font-weight: 800; font-size: 12px; text-align: center; border: 1px solid rgba(120,255,214,.22); }
    .event.has-votes .badge {
      background: hsla(var(--heat-hue, 46), 100%, calc(48% + var(--vote-heat, 0) * 8%), calc(.22 + var(--vote-heat, 0) * .44));
      color: #fffaf0;
      border-color: hsla(var(--heat-hue, 46), 100%, 70%, calc(.42 + var(--vote-heat, 0) * .38));
      box-shadow: 0 0 calc(8px + var(--vote-heat, 0) * 15px) hsla(var(--heat-hue, 46), 100%, 52%, calc(.10 + var(--vote-heat, 0) * .25));
    }
    .meta { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.35; }
    .type-pill {
      display: inline-flex;
      align-items: center;
      margin-left: 6px;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      vertical-align: 1px;
      border: 1px solid rgba(255,255,255,.12);
    }
    .type-day { background: rgba(251, 191, 36, .19); color: #ffe8a3; border-color: rgba(251, 191, 36, .42); }
    .type-night { background: rgba(79, 70, 229, .22); color: #dce3ff; border-color: rgba(129, 140, 248, .38); }
    .type-afterhours { background: rgba(236, 72, 153, .20); color: #ffd0ea; border-color: rgba(236, 72, 153, .40); }
    .lineup-pill {
      display: inline-flex;
      align-items: center;
      margin-left: 6px;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      vertical-align: 1px;
      color: #ffe0a3;
      background: rgba(251, 191, 36, .13);
      border: 1px solid rgba(251, 191, 36, .28);
    }
    .artists { margin-top: 8px; font-size: 12px; line-height: 1.35; color: #d8dcf0; }
    .my-check { flex: 0 0 auto; font-size: 20px; line-height: 1; filter: drop-shadow(0 0 8px rgba(120,255,214,.42)); transform: translateY(1px); }
    .filter-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: var(--text);
      border-radius: 14px;
      padding: 11px 14px;
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
      font-size: 14px;
      margin-bottom: 0;
      box-sizing: border-box;
    }
    .filter-toggle:hover { border-color: var(--accent); }
    .filter-toggle input { accent-color: var(--accent); }
    .filter-toggle.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120,255,214,.12); }
    .empty { color: var(--muted); border: 1px dashed var(--border); border-radius: 16px; padding: 18px; text-align: center; }
    .warning { color: var(--danger); font-size: 12px; margin-top: 7px; display: none; }
    .vote-cutoff {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 46px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.04);
      border-radius: 14px;
      color: var(--text);
      font-size: 13px;
      user-select: none;
    }
    .vote-cutoff-controls { display: flex; align-items: center; gap: 8px; }
    .vote-cutoff button {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: var(--text);
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
    }
    .vote-cutoff button:hover { border-color: var(--accent); }
    #voteCutoffValue {
      min-width: 24px;
      text-align: center;
      font-weight: 900;
      color: var(--accent);
    }

    .mobile-day-nav {
      display: none;
    }

    .mobile-day-nav a {
      color: var(--text);
      text-decoration: none;
    }
    @media (max-width: 1180px) and (min-width: 701px) {
      .top-controls { grid-template-columns: minmax(180px, 280px) auto; }
      .filter-controls { grid-template-columns: 1fr 1fr; }
      .desktop-day-row { grid-template-columns: auto 1fr auto; }
      .tablet-day-arrow { display: flex; }
      .columns, .desktop-day-headers { grid-template-columns: repeat(var(--visible-day-count, 2), minmax(0, 1fr)); }
    }
    @media (max-width: 700px) {
      .top-controls, .filter-controls, .columns { grid-template-columns: 1fr; }
      header { position: static; }
      .desktop-day-row { display: none; }
      .day h2 {
        display: block;
        margin: -12px -12px 12px;
        padding: 14px 12px 12px;
        background: linear-gradient(rgba(23,26,47,.98), rgba(23,26,47,.92));
        border-bottom: 1px solid var(--border);
        border-radius: 22px 22px 0 0;
        font-size: 17px;
        text-transform: capitalize;
      }
      .mobile-day-nav {
        position: sticky;
        top: 0;
        z-index: 15;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 10px 12px;
        background: rgba(14,16,32,.94);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--border);
      }
      .mobile-day-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 6px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        font-size: 13px;
        font-weight: 800;
        color: var(--text);
        text-decoration: none;
      }
      .mobile-day-nav a:active,
      .mobile-day-nav a:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(120,255,214,.14);
      }
      .day {
        min-height: auto;
        scroll-margin-top: 66px;
      }
    }
  
    .sync-status { margin-top: 10px; font-size: 12px; color: var(--muted); }
    .setup-box {
      margin: 14px 0;
      padding: 12px;
      border: 1px solid rgba(255,180,180,.45);
      background: rgba(255,180,180,.08);
      color: var(--danger);
      border-radius: 16px;
      font-size: 13px;
      line-height: 1.45;
    }

    .event.pending { opacity: .72; cursor: wait; }
    .badge.vote-badge-button {
      cursor: pointer;
      appearance: none;
      font-family: inherit;
    }
    .badge.vote-badge-button:hover,
    .badge.vote-badge-button:focus {
      outline: none;
      transform: translateY(-1px);
      box-shadow: 0 0 0 3px rgba(120,255,214,.16), 0 0 calc(8px + var(--vote-heat, 0) * 15px) hsla(var(--heat-hue, 46), 100%, 52%, calc(.10 + var(--vote-heat, 0) * .25));
    }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(4, 6, 18, .68);
      backdrop-filter: blur(8px);
    }
    .modal-backdrop.open { display: flex; }
    .modal-card {
      width: min(460px, 100%);
      max-height: min(720px, calc(100vh - 36px));
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: #15182c;
      box-shadow: 0 24px 90px rgba(0,0,0,.48);
      padding: 18px;
    }
    .modal-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 10px;
    }
    .modal-title {
      margin: 0;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -.02em;
    }
    .modal-close {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.06);
      color: var(--text);
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
    }
    .modal-close:hover { border-color: var(--accent); }
    .modal-meta { color: var(--muted); font-size: 13px; line-height: 1.4; margin-bottom: 14px; }
    .modal-count { font-weight: 900; color: var(--accent); margin-bottom: 10px; }
    .voter-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .voter-pill {
      border: 1px solid rgba(120,255,214,.22);
      background: rgba(120,255,214,.08);
      color: var(--text);
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 13px;
      font-weight: 800;
    }


.trip-entry-card {
  width: min(560px, 100%);
  margin: 42px auto;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(23,26,47,.86);
  box-shadow: var(--shadow);
}
.trip-entry-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -.03em;
}
.trip-entry-card p {
  margin: 0 0 18px;
  color: var(--muted);
}
.trip-entry-form label {
  margin-bottom: 8px;
}
.trip-entry-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.trip-entry-row input {
  flex: 1;
  min-width: 0;
}
.trip-entry-row button {
  border: 1px solid rgba(120,255,214,.55);
  background: rgba(120,255,214,.12);
  color: var(--text);
  border-radius: 14px;
  padding: 0 18px;
  font-weight: 800;
  cursor: pointer;
}
.trip-entry-row button:hover {
  border-color: var(--accent);
}
.trip-entry-error {
  margin-top: 12px;
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
}
@media (max-width: 520px) {
  .trip-entry-row { flex-direction: column; }
  .trip-entry-row button { min-height: 46px; }
}


/* Trip gate / homepage */
body.trip-gate-mode header,
body.trip-gate-mode .mobile-day-nav {
  display: none;
}
body.trip-gate-mode main.wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body.trip-gate-mode .columns {
  display: flex;
  width: min(520px, 100%);
  justify-content: center;
}
body.trip-gate-mode .trip-entry-card {
  margin: 0;
}
.trip-entry-row button:disabled {
  opacity: .65;
  cursor: wait;
}