:root{
  --bg:#f4f6fb;
  --card:#fff;
  --text:#121827;
  --muted:#667085;
  --line:#e6e8ef;
  --primary:#6d28d9;
  --primary2:#2563eb;
  --green:#22c55e;
  --red:#ef4444;
  --orange:#f59e0b;
  --dark:#070b14;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font-family:inherit}
button{border:0;cursor:pointer}
.topbar{height:66px;display:flex;justify-content:space-between;align-items:center;padding:0 34px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo{width:40px;height:40px;display:grid;place-items:center;background:#ede9fe;border-radius:13px}
.brand strong{display:block;font-size:20px}
.brand small{color:var(--muted);font-size:12px}
nav{display:flex;gap:8px}
nav button,.secondary{background:#f3f4f6;color:#111827;padding:11px 15px;border-radius:10px;font-weight:700}
nav button:hover,.secondary:hover{background:#e5e7eb}
.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border-radius:11px;padding:12px 18px;font-weight:900}
.danger{background:#fee2e2;color:#991b1b;border-radius:9px;padding:9px 12px;font-weight:800}
.hero{min-height:340px;background:linear-gradient(90deg,rgba(7,11,20,.92),rgba(7,11,20,.35)),url("https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?auto=format&fit=crop&w=1800&q=80");background-size:cover;background-position:center;color:#fff;display:flex;align-items:center}
.hero-inner{max-width:1180px;margin:auto;width:100%;padding:42px 24px}
.pill{display:inline-flex;background:rgba(109,40,217,.92);color:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900;letter-spacing:.04em}
.hero h1{font-size:46px;line-height:1.05;margin:18px 0 10px}
.hero p{font-size:18px;color:#e5e7eb;max-width:650px}
.searchbar{display:grid;grid-template-columns:1fr 210px 130px;max-width:880px;background:#fff;border-radius:16px;overflow:hidden;margin-top:24px;box-shadow:0 20px 55px rgba(0,0,0,.25)}
.searchbar input,.searchbar select{border:0;padding:17px;outline:none;border-right:1px solid var(--line)}
.searchbar button{border-radius:0}
.container{max-width:1180px;margin:0 auto;padding:30px 24px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card,.panel,.side-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(20,24,39,.06)}
.card{overflow:hidden}
.card-img{height:165px;background-size:cover;background-position:center;position:relative}
.badge{position:absolute;left:13px;top:13px;background:rgba(109,40,217,.94);padding:7px 10px;border-radius:9px;color:#fff;font-size:12px;font-weight:900}
.card-body{padding:17px}
.card-body h3{margin:0 0 10px}
.meta{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:14px}
.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:15px}
.status{font-weight:900;font-size:13px}
.ok{color:var(--green)} .warn{color:var(--orange)} .bad{color:var(--red)}
.details-hero{min-height:350px;color:#fff;background-size:cover;background-position:center;position:relative;display:flex;align-items:end}
.details-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,11,20,.94),rgba(7,11,20,.28))}
.details-inner{position:relative;max-width:1180px;margin:auto;width:100%;padding:32px 24px}
.details-inner h1{font-size:48px;margin:12px 0}
.two-col{max-width:1180px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:1fr 370px;gap:24px}
.panel{padding:22px}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}
.info{border:1px solid var(--line);border-radius:13px;padding:13px}
.info small{display:block;color:var(--muted);margin-bottom:5px}
.price{display:flex;justify-content:space-between;font-size:22px;font-weight:900;border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.seat-layout{max-width:1280px;margin:auto;padding:26px 24px;display:grid;grid-template-columns:1fr 370px;gap:24px}
.seat-map{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;overflow:auto}
.stage{width:330px;max-width:100%;margin:12px auto 24px;background:#111827;color:#fff;padding:18px;border-radius:9px;text-align:center;font-weight:900;letter-spacing:.08em}
.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:16px 0}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:6px}
.seats-grid{display:grid;gap:8px;justify-content:center}
.seat{width:25px;height:25px;border-radius:50%;transition:.13s;border:2px solid transparent}
.seat:hover{transform:scale(1.18)}
.available{background:#7bd957}
.reserved{background:#cfd3da;cursor:not-allowed}
.blocked{background:#ef4444;cursor:not-allowed}
.vip{background:#f59e0b}
.selected{background:#2563eb!important;border-color:#111827}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.form-group label{font-size:13px;font-weight:800}
.form-group input,.form-group select,.form-group textarea{border:1px solid var(--line);border-radius:10px;padding:13px;outline:none}
.form-group textarea{min-height:110px}
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 66px)}
.sidebar{background:#070b14;color:#fff;padding:22px}
.sidebar button{width:100%;text-align:left;background:transparent;color:#e5e7eb;padding:12px;border-radius:10px;margin-bottom:6px}
.sidebar button:hover{background:#4c1d95}
.admin-main{padding:26px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.stat strong{display:block;font-size:30px;color:var(--primary)}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.table th,.table td{padding:13px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.table th{background:#f8fafc}
.notice{background:#eef2ff;border:1px solid #c7d2fe;color:#312e81;padding:13px;border-radius:12px;margin:12px 0}
.confirm{max-width:780px;margin:44px auto;padding:24px}
.footer{display:flex;justify-content:space-between;gap:20px;padding:28px 34px;background:#fff;border-top:1px solid var(--line);color:var(--muted)}
@media(max-width:950px){.grid,.two-col,.seat-layout,.admin-layout,.stats{grid-template-columns:1fr}.searchbar{grid-template-columns:1fr}.topbar{padding:0 16px}nav{display:none}.info-grid{grid-template-columns:1fr}}

/* ===== UPGRADE FULL ===== */

.actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.details-hero.concert:before {
  background: linear-gradient(0deg, rgba(4,5,15,.96), rgba(109,40,217,.35));
}

.classic-panel {
  border-left: 5px solid var(--primary2);
}

.concert-panel {
  background: #0b1020;
  color: #fff;
  border-color: #1f2a44;
}

.concert-panel .meta,
.concert-panel p {
  color: #cbd5e1;
}

.concert-panel .info {
  background: #111827;
  border-color: #263249;
}

.balcony {
  background: #a855f7;
}

.admin-seat-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 10px;
}

.admin-seat {
  height: 44px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 900;
  color: #111;
  background: #e5e7eb;
}

.admin-seat.available {
  background: #bbf7d0;
}

.admin-seat.reserved {
  background: #e5e7eb;
}

.admin-seat.blocked {
  background: #fecaca;
}

.admin-seat.vip {
  background: #fde68a;
}

.admin-seat.balcony {
  background: #ddd6fe;
}

/* =======================================================
   COMMIT 2: VENUE LAYOUT VARIANTS
   ======================================================= */

.venue-layout-info {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin: 14px 0 18px;
  color: var(--muted);
}

.venue-layout-info b {
  color: var(--text);
}

.venue-layout-wrapper {
  margin-top: 10px;
}

.venue-layout-wrapper.concert-layout .stage,
.venue-layout-wrapper.theatre-layout .stage {
  width: 330px;
  max-width: 100%;
  margin: 12px auto 24px;
  background: #111827;
  color: #fff;
  padding: 18px;
  border-radius: 9px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .08em;
}

.venue-layout-wrapper.sport-layout {
  display: grid;
  grid-template-columns: 1fr 280px 1fr;
  gap: 22px;
  align-items: center;
  justify-content: center;
}

.sport-arena {
  min-height: 260px;
  border: 3px solid #111827;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, transparent 49%, rgba(17,24,39,.28) 50%, transparent 51%),
    linear-gradient(0deg, rgba(34,197,94,.14), rgba(34,197,94,.05));
  color: #111827;
  font-weight: 900;
  text-align: center;
}

.sport-arena span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 5px;
}

.sport-side {
  display: flex;
  justify-content: center;
}

.sport-side .seats-grid {
  justify-content: center;
}

.venue-layout-wrapper.conference-layout {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 22px;
  align-items: center;
}

.conference-stage {
  min-height: 260px;
  background: #111827;
  color: #fff;
  border-radius: 16px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  font-weight: 900;
  letter-spacing: .05em;
}

.conference-stage small {
  display: block;
  color: #cbd5e1;
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0;
}

.venue-layout-wrapper.theatre-layout .stage {
  background: linear-gradient(135deg, #3b0764, #111827);
}

.venue-layout-wrapper.workshop-layout {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 22px;
  align-items: center;
}

.workshop-zone {
  min-height: 230px;
  border: 2px dashed #7c3aed;
  border-radius: 18px;
  background: #f5f3ff;
  display: grid;
  place-items: center;
  text-align: center;
  color: #4c1d95;
  font-weight: 900;
  padding: 18px;
}

@media(max-width:950px) {
  .venue-layout-wrapper.sport-layout,
  .venue-layout-wrapper.conference-layout,
  .venue-layout-wrapper.workshop-layout {
    grid-template-columns: 1fr;
  }

  .sport-arena,
  .conference-stage,
  .workshop-zone {
    min-height: 160px;
  }
}

/* =======================================================
   COMMIT 3: UX AND ADMIN POLISH
   ======================================================= */

.toast-box {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  display: grid;
  gap: 10px;
}

.toast {
  background: #111827;
  color: #fff;
  padding: 13px 16px;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  font-weight: 800;
  max-width: 360px;
}

.toast.success {
  background: #166534;
}

.toast.error {
  background: #991b1b;
}

.toast.warning {
  background: #92400e;
}

.admin-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}

.quick-status {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.quick-status button {
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
}

.form-hint {
  color: var(--muted);
  font-size: 13px;
  margin-top: -6px;
  margin-bottom: 12px;
}

.preview-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-top: 10px;
  background: #f3f4f6;
}

.selected-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  color: #155e75;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  margin: 8px 0 12px;
}

.project-note {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  margin-top: 22px;
  color: var(--muted);
}

.project-note b {
  color: var(--text);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: #e5e7eb;
}

.status-pill.active {
  background: #dcfce7;
  color: #166534;
}

.status-pill.draft {
  background: #fef3c7;
  color: #92400e;
}

.status-pill.cancelled,
.status-pill.ended,
.status-pill.sold_out {
  background: #fee2e2;
  color: #991b1b;
}

.admin-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 14px;
  padding: 13px;
  margin: 12px 0;
  font-weight: 700;
}

.empty-state {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.empty-state h3 {
  color: var(--text);
  margin-top: 0;
}

/* =======================================================
   WOW UPDATE: ANIMATIONS, TRANSITIONS, MICROINTERACTIONS
   ======================================================= */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

#app {
  animation: pageFadeIn .38s ease both;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.page-transition-out {
  animation: pageFadeOut .18s ease both;
}

@keyframes pageFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(2px);
  }
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero:after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 20% 30%, rgba(109,40,217,.32), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(37,99,235,.22), transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(245,158,11,.16), transparent 34%);
  animation: auroraMove 10s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes auroraMove {
  from {
    transform: translate3d(-2%, -2%, 0) rotate(0deg) scale(1);
  }
  to {
    transform: translate3d(2%, 3%, 0) rotate(6deg) scale(1.06);
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  animation: heroEnter .8s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translateY(26px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pill {
  animation: pillPulse 2.8s ease-in-out infinite;
}

@keyframes pillPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(109,40,217,0);
  }
  50% {
    box-shadow: 0 0 28px rgba(109,40,217,.48);
  }
}

.card,
.panel,
.info,
.stat,
.event-card,
.summary-card {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.card:hover,
.panel:hover,
.stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 50px rgba(20,24,39,.12);
  border-color: rgba(109,40,217,.24);
}

.card-img {
  transition: transform .35s ease, filter .35s ease;
}

.card:hover .card-img {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.03);
}

.card {
  animation: cardPop .45s ease both;
}

.card:nth-child(1) { animation-delay: .04s; }
.card:nth-child(2) { animation-delay: .08s; }
.card:nth-child(3) { animation-delay: .12s; }
.card:nth-child(4) { animation-delay: .16s; }
.card:nth-child(5) { animation-delay: .20s; }
.card:nth-child(6) { animation-delay: .24s; }

@keyframes cardPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

button {
  position: relative;
  overflow: hidden;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

button:active {
  transform: translateY(1px) scale(.98);
}

.primary {
  box-shadow: 0 10px 25px rgba(109,40,217,.26);
}

.primary:hover {
  box-shadow: 0 16px 36px rgba(109,40,217,.34);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleEffect .55s linear;
  background: rgba(255,255,255,.55);
  pointer-events: none;
}

@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.seat {
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}

.seat:hover:not(:disabled) {
  transform: scale(1.28);
  box-shadow: 0 0 0 5px rgba(37,99,235,.12);
}

.seat.selected {
  animation: selectedSeatPulse 1.2s ease-in-out infinite;
}

@keyframes selectedSeatPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37,99,235,.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(37,99,235,0);
  }
}

.stage,
.conference-stage,
.workshop-zone,
.sport-arena {
  animation: stageGlow 3.5s ease-in-out infinite;
}

@keyframes stageGlow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(109,40,217,0);
  }
  50% {
    box-shadow: 0 0 28px rgba(109,40,217,.22);
  }
}

.notice {
  animation: noticeEnter .3s ease both;
}

@keyframes noticeEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.table tbody tr {
  transition: background .18s ease, transform .18s ease;
}

.table tbody tr:hover {
  background: #f8fafc;
  transform: scale(1.005);
}

input,
select,
textarea {
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(109,40,217,.55) !important;
  box-shadow: 0 0 0 4px rgba(109,40,217,.10);
  transform: translateY(-1px);
}

.topbar {
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.88);
}

.logo {
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-3px) rotate(2deg);
  }
}

.status-pill,
.badge {
  transition: transform .18s ease, box-shadow .18s ease;
}

.status-pill:hover,
.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(244,246,251,.72);
  backdrop-filter: blur(8px);
  z-index: 9998;
  display: grid;
  place-items: center;
  animation: fadeIn .18s ease both;
}

.loader {
  width: 54px;
  height: 54px;
  border: 5px solid #ddd6fe;
  border-top-color: #6d28d9;
  border-radius: 50%;
  animation: spin .85s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.revealed {
  animation: revealUp .5s ease both;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.confirm.panel {
  animation: successPop .55s cubic-bezier(.2, .9, .25, 1.2) both;
}

@keyframes successPop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.94);
  }
  70% {
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.confetti-piece {
  position: fixed;
  width: 9px;
  height: 14px;
  top: -20px;
  z-index: 9999;
  opacity: .95;
  animation: confettiFall 1.7s ease-out forwards;
  pointer-events: none;
}

@keyframes confettiFall {
  to {
    transform: translateY(110vh) rotate(620deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* =======================================================
   PREMIUM UI POLISH: GLASS, TICKET, STEPS, SEAT MODAL
   ======================================================= */

.glass-panel {
  background: rgba(255,255,255,.76) !important;
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 24px 80px rgba(15,23,42,.14) !important;
}

.dark-glass {
  background: rgba(7,11,20,.72) !important;
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff;
}

.progress-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0 22px;
}

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  position: relative;
  overflow: hidden;
}

.step.active {
  background: linear-gradient(135deg, rgba(109,40,217,.12), rgba(37,99,235,.10));
  border-color: rgba(109,40,217,.35);
  color: var(--primary);
}

.step.done {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
}

.step strong {
  display: block;
  font-size: 18px;
  margin-bottom: 3px;
}

.ticket-wrap {
  max-width: 860px;
  margin: 42px auto;
  padding: 24px;
}

.ticket {
  display: grid;
  grid-template-columns: 1fr 230px;
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 28px 90px rgba(15,23,42,.16);
  position: relative;
}

.ticket:before,
.ticket:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  background: var(--bg);
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.ticket:before {
  left: -18px;
}

.ticket:after {
  right: -18px;
}

.ticket-main {
  padding: 28px;
  position: relative;
}

.ticket-main:after {
  content: "";
  position: absolute;
  right: 0;
  top: 24px;
  bottom: 24px;
  border-right: 2px dashed #d1d5db;
}

.ticket-side {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.20), transparent 35%),
    linear-gradient(160deg, #6d28d9, #2563eb);
  color: white;
  padding: 26px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.ticket-code {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: .06em;
  margin: 12px 0;
}

.fake-qr {
  width: 116px;
  height: 116px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, #111 50%, transparent 50%) 0 0/22px 22px,
    linear-gradient(#111 50%, transparent 50%) 0 0/22px 22px,
    #fff;
  border: 8px solid #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.ticket-title {
  font-size: 34px;
  margin: 8px 0 10px;
  line-height: 1.05;
}

.ticket-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 20px 0;
}

.ticket-meta div {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
}

.ticket-meta small {
  display: block;
  color: var(--muted);
  margin-bottom: 4px;
}

.ticket-seats {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 16px;
  padding: 14px;
  color: #4c1d95;
  font-weight: 800;
}

.seat-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(8px);
  z-index: 9997;
  display: grid;
  place-items: center;
  padding: 18px;
  animation: fadeIn .18s ease both;
}

.seat-modal {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 100px rgba(0,0,0,.32);
  animation: modalPop .26s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.seat-modal h3 {
  margin-top: 0;
  font-size: 26px;
}

.seat-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin: 14px 0;
}

.seat-modal-grid div {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
}

.seat-modal-grid small {
  display: block;
  color: var(--muted);
  margin-bottom: 4px;
}

.floating-summary {
  position: sticky;
  top: 88px;
}

.premium-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin: 18px 0;
}

.premium-stat {
  background:
    radial-gradient(circle at 80% 20%, rgba(109,40,217,.18), transparent 34%),
    #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 35px rgba(15,23,42,.08);
}

.premium-stat strong {
  display: block;
  font-size: 28px;
  color: var(--primary);
}

.premium-stat span {
  color: var(--muted);
  font-weight: 700;
}

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

  .ticket-main:after {
    display: none;
  }

  .ticket-meta,
  .progress-steps,
  .premium-stat-grid {
    grid-template-columns: 1fr;
  }
}