:root{
  --bg:#6b63f1;
  --bg2:#7b6cff;

  --paper:#ffffff;
  --paper2:#f6f7fb;

  --text:#101225;
  --muted:#62657a;
  --muted2:#7a7f99;

  --line: rgba(16,18,37,.10);
  --line2: rgba(16,18,37,.14);

  --p1:#6b63f1;
  --p2:#8a5cff;
  --grad: linear-gradient(135deg, var(--p1), var(--p2));
  --green:#22c55e;

  --shadow: 0 28px 90px rgba(0,0,0,.22);
  --shadow2: 0 16px 44px rgba(0,0,0,.14);

  --r:22px;
  --r2:16px;
  --max:1180px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  color: var(--text);
}

.container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

.header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(107,99,241,.88);
  border-bottom: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 16px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
}
.mark{
  width:34px; height:34px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), rgba(255,255,255,.10) 45%, rgba(255,255,255,.06) 72%),
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.brandText b{ display:block; font-weight: 900; letter-spacing:-.02em; }
.brandText small{ display:block; margin-top:2px; font-weight: 800; opacity:.88; }

.nav{
  display:flex;
  gap:16px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: 13px;
}
.nav a:hover{ color:#fff; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(.99); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn.primary{
  background: var(--grad);
  border-color: rgba(255,255,255,.25);
  color:#fff;
  box-shadow: 0 16px 30px rgba(0,0,0,.16);
}
.btn.ghost{
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.28);
  color:#fff;
}
.btn.block{ width:100%; }

.hero{ padding: 22px 0 10px; }
.heroMedia{
  position:relative;
  border-radius: 26px;
  overflow:hidden;
  height: 420px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.28);
  background:#000;
}
.heroMedia img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.03);
}
.heroOverlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.66), rgba(0,0,0,.18) 60%, rgba(0,0,0,.08)),
    radial-gradient(600px 300px at 85% 50%, rgba(138,92,255,.40), transparent 65%);
}
.heroContent{
  position:absolute;
  left: 22px;
  bottom: 22px;
  right: 22px;
  max-width: 680px;
  color:#fff;
}
.pillRow{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 900;
  font-size: 12px;
}
.pill.soft{ opacity:.92; }
.dot{
  width:9px; height:9px; border-radius:99px;
  background:#fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.16);
}

h1{
  margin: 0 0 10px;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.heroLead{
  margin:0;
  color: rgba(255,255,255,.86);
  font-weight: 650;
  line-height: 1.6;
  max-width: 70ch;
}
.heroActions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

.section{ padding: 34px 0 54px; }

.layout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:start;
}

.main{ display:grid; gap:16px; }
.stack{ margin-top: 6px; }

.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 12px;
  color:#fff;
}
.sectionHead h2{ margin:0; font-size: 22px; letter-spacing:-.02em; }
.sectionHead p{ margin:0; color: rgba(255,255,255,.88); font-weight: 650; }

.card{
  background: var(--paper);
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--shadow2);
}

.cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.infoCard{
  padding: 14px;
}
.kicker{
  display:block;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted2);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.infoCard b{
  display:block;
  margin-top: 6px;
  font-size: 15px;
  letter-spacing:-.01em;
}
.infoCard p{
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 650;
  font-size: 12px;
  line-height:1.5;
}

.blockCard{ padding: 16px; }
.blockHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.blockHead h2{ margin:0; font-size: 18px; letter-spacing:-.01em; }
.chip{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(107,99,241,.12);
  border: 1px solid rgba(107,99,241,.20);
  color: #2b2f55;
}
.chip.purple{
  background: rgba(138,92,255,.12);
  border-color: rgba(138,92,255,.20);
}

.text{
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.7;
}

.highlights{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.highlight{
  background: var(--paper2);
  border: 1px solid rgba(16,18,37,.08);
  border-radius: var(--r2);
  padding: 12px;
}
.highlight b{ display:block; font-size: 13px; }
.highlight span{ display:block; margin-top:4px; color: var(--muted2); font-weight: 800; font-size: 12px; }

.grid{ display:grid; gap:12px; }
.lineup{ grid-template-columns: repeat(2, 1fr); }
.artist{
  padding: 14px;
  display:flex;
  gap:12px;
  align-items:center;
}
.avatar{
  width:46px; height:46px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(107,99,241,.22), rgba(138,92,255,.16));
  border: 1px solid rgba(107,99,241,.22);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}
.artist b{ display:block; }
.artist span{ display:block; margin-top:3px; color: var(--muted2); font-weight: 800; font-size: 12px; }

.schedule{ padding: 12px; }
.row{
  display:grid;
  grid-template-columns: 80px 1fr 110px;
  gap:12px;
  align-items:center;
  padding: 12px;
  border-radius: var(--r2);
  border: 1px solid rgba(16,18,37,.08);
  background: var(--paper2);
}
.row + .row{ margin-top: 10px; }
.time{
  font-weight: 950;
  color: #2b2f55;
}
.slot b{ display:block; }
.slot span{ display:block; margin-top:3px; color: var(--muted); font-weight: 650; font-size: 12px; }
.stage{
  justify-self:end;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color:#2b2f55;
  background: rgba(107,99,241,.10);
  border: 1px solid rgba(107,99,241,.18);
}
.s1{ background: rgba(107,99,241,.10); border-color: rgba(107,99,241,.18); }
.s2{ background: rgba(138,92,255,.10); border-color: rgba(138,92,255,.18); }
.s3{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.18); }

.locGrid{ grid-template-columns: 1fr 1fr; }
.locCard{ padding: 16px; }
.locCard h3{ margin:0 0 6px; }
.muted{ color: var(--muted); font-weight: 650; line-height:1.6; }
.small{ font-size: 12px; }

.miniGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.mini{
  background: var(--paper2);
  border: 1px solid rgba(16,18,37,.08);
  border-radius: var(--r2);
  padding: 12px;
}
.mini b{ display:block; font-size: 13px; }
.mini span{ display:block; margin-top:4px; color: var(--muted2); font-weight: 800; font-size: 12px; }

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

.mapCard{ padding:0; overflow:hidden; }
.mapBox{
  height: 260px;
  display:grid;
  place-items:center;
  text-align:center;
  padding: 16px;
  background: linear-gradient(135deg, rgba(107,99,241,.14), rgba(138,92,255,.10));
}
.pin{
  width:46px; height:46px;
  border-radius: 18px;
  background: var(--grad);
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
  margin-bottom: 10px;
}
.mapBox span{ display:block; margin-top:6px; color: var(--muted); font-weight: 700; font-size: 12px; }

.faqGrid{ grid-template-columns: repeat(2, 1fr); }
.faq{ padding: 14px 16px; }
.faq summary{
  cursor:pointer;
  font-weight: 950;
  color: var(--text);
}
.faq p{
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 650;
  line-height:1.6;
}

.sidebar{ display:grid; gap:12px; position: sticky; top: 92px; height: fit-content; }
.ticketBox{ padding: 16px; }
.ticketTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.ticketTop h3{ margin: 6px 0 0; font-size: 16px; letter-spacing:-.01em; }

.priceRow{
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--r2);
  background: var(--paper2);
  border: 1px solid rgba(16,18,37,.08);
}
.price{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.price span{ color: var(--muted2); font-weight: 900; font-size: 12px; text-transform: uppercase; }
.price b{ font-size: 22px; letter-spacing:-.02em; }

.ticketTypes{ margin-top: 12px; display:grid; gap:10px; }
.type{
  display:grid;
  grid-template-columns: 18px 1fr auto;
  gap:10px;
  align-items:center;
  padding: 12px;
  border-radius: var(--r2);
  background: var(--paper2);
  border: 1px solid rgba(16,18,37,.08);
  cursor:pointer;
}
.type input{ margin:0; }
.type b{ display:block; font-size: 13px; }
.type span{ display:block; margin-top:3px; color: var(--muted2); font-weight: 800; font-size: 12px; }
.tPrice{ font-weight: 950; color:#2b2f55; }

.qty{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px;
  border-radius: var(--r2);
  background: var(--paper2);
  border: 1px solid rgba(16,18,37,.08);
}
.qty span{ font-weight: 950; color:#2b2f55; }
.qty select{
  border:0;
  outline:none;
  background: transparent;
  font-weight: 900;
  color: var(--text);
}

.finePrint{
  margin-top: 12px;
  display:grid;
  gap:8px;
}
.check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}
.check::before{
  content:"✓";
  font-weight: 950;
  color: rgba(107,99,241,.90);
}

.sideNote{ padding: 14px 16px; }
.sideNote b{ display:block; margin-bottom: 6px; }

.footer{
  padding: 28px 0 50px;
}
.footerInner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  color:#fff;
}
.footBrand b{ display:block; font-weight: 950; }
.footBrand small{ display:block; margin-top:4px; opacity:.88; font-weight: 800; }

.footLinks{ display:flex; gap:14px; flex-wrap:wrap; }
.footLinks a{
  color: rgba(255,255,255,.88);
  text-decoration:none;
  font-weight: 950;
  font-size: 13px;
}
.footLinks a:hover{ color:#fff; }

@media (max-width: 1050px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position: static; }
  .cards3{ grid-template-columns: 1fr; }
  .highlights{ grid-template-columns: repeat(2, 1fr); }
  .locGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  .nav{ display:none; }
  .heroMedia{ height: 380px; }
  .lineup{ grid-template-columns: 1fr; }
  .faqGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .container{ width: calc(100% - 28px); }
  .heroMedia{ height: 340px; border-radius: 22px; }
  .heroContent{ left: 16px; right: 16px; bottom: 16px; }
  h1{ font-size: 36px; }
  .row{ grid-template-columns: 1fr; }
  .stage{ justify-self:start; }
}
body{
  margin:0;
  min-height:100vh;
  font-family: Inter, sans-serif;
  color:white;

  background:
    radial-gradient(900px 600px at 15% 20%, rgba(0,180,255,0.25), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(140,0,255,0.25), transparent 60%),
    radial-gradient(900px 700px at 50% 90%, rgba(255,0,200,0.12), transparent 70%),
    linear-gradient(180deg, #05060a 0%, #06070d 40%, #020308 100%);

  background-attachment: fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(600px 400px at 10% 30%, rgba(0,200,255,0.15), transparent 60%),
    radial-gradient(600px 400px at 90% 20%, rgba(170,0,255,0.18), transparent 60%);

  mix-blend-mode: screen;
}

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;

  padding: 0;
  border-radius:0;

  background: rgba(5,5,8,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-bottom:1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.85),
    0 0 30px rgba(120,0,255,0.15);

  transition: all .35s ease;
}

.topbar{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
}

.header::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  height:1px;
  width:100%;

  background: linear-gradient(
    90deg,
    transparent,
    #00e1ff,
    #7a00ff,
    transparent
  );

  opacity:.7;
  animation: glowMove 6s linear infinite;
}

@keyframes glowMove{
  0%{ filter:hue-rotate(0deg); }
  100%{ filter:hue-rotate(360deg); }
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:white;
}

.mark{
  width:34px;
  height:34px;
  border-radius:12px;
  background: linear-gradient(135deg,#00e1ff,#7a00ff);
  box-shadow:0 0 18px rgba(140,0,255,.7);
}

.brandText b{
  font-weight:900;
  letter-spacing:-0.5px;
}

.brandText small{
  display:block;
  font-size:12px;
  opacity:.7;
}

.nav{
  display:flex;
  gap:26px;
}

.nav a{
  color:rgba(255,255,255,0.75);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  transition:.3s;
}

.nav a:hover{
  color:#fff;
  text-shadow:0 0 12px rgba(140,0,255,0.7);
}

.btn.primary{
  background: linear-gradient(135deg,#7a00ff,#00e1ff);
  border:none;
  color:white;
  padding:11px 18px;
  border-radius:999px;
  font-weight:700;

  box-shadow:0 0 20px rgba(140,0,255,.6);
  transition:.3s;
}

.btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 35px rgba(140,0,255,1);
}

.header.scrolled{
  background: rgba(5,5,8,0.95);
  box-shadow:
    0 15px 60px rgba(0,0,0,0.95),
    0 0 40px rgba(120,0,255,0.25);
}

.card,
.infoCard,
.blockCard,
.artist,
.schedule,
.row,
.type,
.qty,
.faq,
.ticketBox,
.sideNote,
.locCard,
.mapCard{
  background: rgba(8,8,14,0.75) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    0 0 30px rgba(120,0,255,0.15);

  position:relative;
  overflow:hidden;
  transition:.35s;
}

.card::before,
.infoCard::before,
.blockCard::before,
.ticketBox::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:22px;
  padding:1px;

  background: linear-gradient(120deg,
    #00e1ff,
    #7a00ff,
    #ff00c8,
    #00e1ff
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity:.18;
  animation: borderMove 8s linear infinite;
  pointer-events:none;
}

@keyframes borderMove{
  0%{ filter:hue-rotate(0deg); }
  100%{ filter:hue-rotate(360deg); }
}

.card:hover,
.infoCard:hover,
.blockCard:hover,
.artist:hover,
.type:hover{
  transform: translateY(-6px) scale(1.01);

  box-shadow:
    0 20px 60px rgba(0,0,0,0.95),
    0 0 40px rgba(140,0,255,0.35),
    0 0 60px rgba(0,225,255,0.2);
}

.card h2,
.card h3,
.card b{
  color:white;
}

.card p,
.card span,
.card small{
  color:rgba(255,255,255,0.75);
}

select,
input{
  background: rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.1);
  color:white;
  border-radius:10px;
  padding:8px;
}


.ticketBox .btn.primary{
  background: linear-gradient(135deg,#7a00ff,#00e1ff);
  border:none;
  color:white;
  font-weight:700;

  box-shadow:
    0 0 25px rgba(140,0,255,0.6),
    0 0 40px rgba(0,225,255,0.4);

  transition:.3s;
}

.ticketBox .btn.primary:hover{
  transform:scale(1.04);
  box-shadow:
    0 0 40px rgba(140,0,255,1),
    0 0 80px rgba(0,225,255,0.6);
}

.priceRow,
.ticketBox .priceRow{
  background: rgba(10,10,16,0.75) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 25px rgba(140,0,255,0.15);
}

.highlight,
.mini{
  background: rgba(10,10,18,0.65) !important;
  backdrop-filter: blur(12px);

  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 18px rgba(120,0,255,0.15);

  color:white;
}

.highlight span,
.mini span{
  color:rgba(255,255,255,0.7);
}

.highlight:hover,
.mini:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 30px rgba(140,0,255,0.4),
    0 0 60px rgba(0,225,255,0.2);
}

.type .tPrice,
.type .price,
.type b:last-child{
  color: #ffffff !important;
  font-weight: 800;
}

.type{
  color: white;
}

.type input:checked ~ .tPrice{
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(140,0,255,0.6);
}

select{
  color: white !important;
}

select option{
  color: black; 
}

.qty select{
  color: white !important;
  font-weight: 700;
}

select{
  background-color: transparent;
}

.faq,
.faq summary,
.faq p{
  color: white !important;
}

.faq summary{
  font-weight:700;
  font-size:15px;
}

.faq summary::marker{
  color:white;
}


.faq:hover{
  box-shadow:
    0 0 25px rgba(140,0,255,0.35),
    0 0 40px rgba(0,225,255,0.15);
}

.qty{
  margin-bottom: 18px;
}

.ticketBox .btn.primary{
  margin-top: 10px;
}

.ticketBox .btn{
  margin-top: 12px;
}

.ticketBox{
  padding-bottom: 22px;
}

.calMain{
  padding-top: 110px;
  padding-bottom: 70px;
}

.calLayout{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
}

.calCard{
  padding: 18px;
}

.calHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 12px;
}
.calTitle{
  margin:0;
  font-size: 26px;
  letter-spacing:-.02em;
  color:#fff;
}
.calSub{
  margin:6px 0 0;
  color: rgba(255,255,255,.74);
  font-weight: 650;
}

.calControls{
  display:flex;
  align-items:center;
  gap:10px;
}
.iconBtn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color:#fff;
  font-size: 18px;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.iconBtn:hover{
  box-shadow: 0 0 22px rgba(122,0,255,.22);
}
.monthPill{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.88);
  font-weight: 900;
}

.weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;
  padding: 10px 2px;
  color: rgba(255,255,255,.62);
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.gridCal{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;
}

.day{
  height: 64px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
  position:relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.day:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 26px rgba(122,0,255,.22),
    0 0 18px rgba(0,225,255,.12),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.day .num{
  position:absolute;
  top:10px;
  left:12px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}

.mutedDay{
  background: rgba(0,0,0,.12);
  border: 1px dashed rgba(255,255,255,.08);
  cursor:default;
}

.day.isToday{
  border-color: rgba(0,225,255,.35);
  box-shadow: 0 0 0 1px rgba(0,225,255,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.day.isToday::after{
  content:"";
  position:absolute;
  bottom:10px;
  left:12px;
  width:10px;
  height:10px;
  border-radius:99px;
  background: rgba(0,225,255,.95);
  box-shadow: 0 0 18px rgba(0,225,255,.65);
}

.day.isEvent{
  border-color: rgba(122,0,255,.35);
}
.day.isEvent::before{
  content:"";
  position:absolute;
  bottom:10px;
  right:12px;
  width:10px;
  height:10px;
  border-radius:99px;
  background: rgba(122,0,255,.95);
  box-shadow: 0 0 18px rgba(122,0,255,.65);
}

.day.isSelected{
  border-color: rgba(255,0,200,.35);
  box-shadow:
    0 0 0 1px rgba(255,0,200,.18),
    0 0 26px rgba(255,0,200,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.calLegend{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.72);
  font-weight: 750;
}
.leg{ display:flex; align-items:center; gap:10px; }
.dot{
  width:10px; height:10px; border-radius:99px;
  background:#fff;
}
.dot.event{ background: rgba(122,0,255,.95); box-shadow: 0 0 18px rgba(122,0,255,.65); }
.dot.today{ background: rgba(0,225,255,.95); box-shadow: 0 0 18px rgba(0,225,255,.65); }
.dot.selected{ background: rgba(255,0,200,.95); box-shadow: 0 0 18px rgba(255,0,200,.55); }

.calSide{
  display:grid;
  gap:16px;
  position: sticky;
  top: 110px;
  height: fit-content;
}
.sideCard{ padding: 16px; }

.sideTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
.sideTop h2{
  margin: 6px 0 0;
  color:#fff;
  letter-spacing:-.01em;
}

.sideList{ display:grid; gap:10px; margin-top: 8px; }
.miniRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.miniIcon{ font-size: 16px; }

.sideActions{ display:grid; gap:10px; margin-top: 12px; }

.upList{ display:grid; gap:10px; }
.upItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  text-decoration:none;
  color:#fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.upItem:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(122,0,255,.22), 0 0 16px rgba(0,225,255,.10);
}
.upDate{
  width: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.24);
  text-align:center;
  padding: 8px 6px;
}
.upDate b{ display:block; font-size: 18px; }
.upDate span{ display:block; font-size: 11px; color: rgba(255,255,255,.70); font-weight: 900; }

.upInfo b{ display:block; }
.upInfo span{ display:block; margin-top:3px; color: rgba(255,255,255,.70); font-weight: 700; font-size: 12px; }

.upTag{
  margin-left:auto;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(122,0,255,.18);
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
}

@media (max-width: 980px){
  .calLayout{ grid-template-columns: 1fr; }
  .calSide{ position: static; }
}

.gridCal{
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 10px !important;

  min-height: 320px !important;
  padding: 8px 2px !important;
}

.day{
  display: block !important;
  height: 64px !important;
  width: 100% !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.25) !important;
  color: #fff !important;

  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

.day .num{
  position: absolute !important;
  top: 10px !important;
  left: 12px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,.92) !important;
}

.mutedDay{
  height: 64px !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.12) !important;
  border: 1px dashed rgba(255,255,255,.10) !important;
}

.calHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.calHeader h1{ margin:0; color:#fff; font-size:56px; letter-spacing:-.03em; }
.calHeader p{ margin:10px 0 0; color:rgba(255,255,255,.70); font-weight:650; }

.calControls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 8px;
}

.calControls button{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color:#fff;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition:.25s;
}

.calControls button:hover{
  box-shadow:
    0 0 18px rgba(122,0,255,.28),
    0 0 10px rgba(0,225,255,.12);
  transform: translateY(-1px);
}

#monthLabel{
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing:.02em;
}

.weekdays{
  margin-top: 12px;
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);

  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;

  color: rgba(255,255,255,.70);
  font-weight: 950;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .14em;
}
.weekdays span{ text-align:center; }

.calMain{ padding-top: 110px; padding-bottom: 70px; }

.calLayout{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
}

.calCard{ padding: 18px; }

.calH1{
  margin:0;
  font-size: 56px;
  letter-spacing: -.04em;
  color:#fff;
}
.calP{
  margin: 12px 0 0;
  color: rgba(255,255,255,.70);
  font-weight: 650;
}

.calControls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 8px;
}
.calControls button{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color:#fff;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition:.25s;
}
.calControls button:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(122,0,255,.28), 0 0 10px rgba(0,225,255,.12);
}

#monthLabel{
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: .02em;
}

.weekdays{
  margin-top: 14px;
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);

  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;

  color: rgba(255,255,255,.70);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .14em;
}
.weekdays span{ text-align:center; }

.gridCal{
  display:grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap:10px !important;
  padding: 10px 2px !important;
  min-height: 320px !important;
}
.day{
  height: 64px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.25) !important;
  color:#fff !important;
  cursor:pointer !important;
  position:relative !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.day:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(122,0,255,.22), 0 0 18px rgba(0,225,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.day .num{
  position:absolute;
  top:10px; left:12px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}
.mutedDay{
  background: rgba(0,0,0,.12) !important;
  border: 1px dashed rgba(255,255,255,.10) !important;
  cursor:default !important;
}

.day.isToday{ border-color: rgba(0,225,255,.35) !important; }
.day.isEvent{ border-color: rgba(122,0,255,.35) !important; }
.day.isSelected{
  border-color: rgba(255,0,200,.35) !important;
  box-shadow: 0 0 0 1px rgba(255,0,200,.18), 0 0 26px rgba(255,0,200,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.day.isEvent::after{
  content:"";
  position:absolute;
  bottom:10px; right:12px;
  width:10px; height:10px;
  border-radius:99px;
  background: rgba(122,0,255,.95);
  box-shadow: 0 0 18px rgba(122,0,255,.65);
}

.calSide{
  display:grid;
  gap:16px;
  position: sticky;
  top: 110px;
  height: fit-content;
}
.sideCard{ padding: 16px; }

.sideTopRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.addCalBox{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.addCalGrid{
  display:grid;
  gap:10px;
  margin-top: 10px;
}

.plannedTitle{ margin: 6px 0 0; color:#fff; }
.plannedSub{ margin: 8px 0 0; }

.plannedList{
  margin-top: 14px;
  display:grid;
  gap:10px;
}

.plannedItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  text-decoration:none;
  color:#fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.plannedItem:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(122,0,255,.22), 0 0 16px rgba(0,225,255,.10);
}

.plannedDate{
  width: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.24);
  text-align:center;
  padding: 8px 6px;
}
.plannedDate b{ display:block; font-size: 18px; }
.plannedDate span{ display:block; font-size: 11px; color: rgba(255,255,255,.70); font-weight: 900; }

.plannedInfo b{ display:block; }
.plannedInfo span{ display:block; margin-top:3px; color: rgba(255,255,255,.70); font-weight: 700; font-size: 12px; }

.plannedTag{
  margin-left:auto;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(122,0,255,.18);
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
}

@media (max-width: 980px){
  .calLayout{ grid-template-columns: 1fr; }
  .calSide{ position: static; }
  .calH1{ font-size: 40px; }
}
.coMain{
  padding-top: 110px; 
  padding-bottom: 70px;
}

.coLayout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:start;
}

.coCard{ padding: 18px; }
.coHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 10px;
}
.coTitle{
  margin:0;
  font-size: clamp(34px, 3.8vw, 54px);
  letter-spacing:-.04em;
  color:#fff;
}
.coSub{
  margin:10px 0 0;
  color: rgba(255,255,255,.72);
  font-weight: 650;
  line-height:1.5;
}

.coBlock{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.coBlockTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.coH2{
  margin: 6px 0 0;
  color:#fff;
  font-size: 18px;
  letter-spacing:-.01em;
}

.field{ display:grid; gap:8px; }
.field label{
  color: rgba(255,255,255,.72);
  font-weight: 850;
  font-size: 12px;
  letter-spacing:.06em;
  text-transform: uppercase;
}
.field input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color:#fff;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.field input::placeholder{ color: rgba(255,255,255,.45); }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top: 12px;
}

.ticketTypes{ margin-top: 12px; display:grid; gap:10px; }
.type{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.type:hover{
  box-shadow: 0 0 22px rgba(122,0,255,.22), 0 0 14px rgba(0,225,255,.10) !important;
}

.qty{
  margin-top: 12px;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.qty select{
  background: transparent !important;
  color: #fff !important;
  font-weight: 900;
  border: 0;
  outline: none;
}

.couponRow{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
}
#coupon{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color:#fff;
  outline:none;
}

.payGrid{
  margin-top: 12px;
  display:grid;
  gap:10px;
}
.payOpt{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.payOpt b{ color:#fff; }
.payOpt span{ color: rgba(255,255,255,.70); font-weight: 700; font-size: 12px; }
.payOpt:hover{
  box-shadow: 0 0 22px rgba(122,0,255,.22), 0 0 14px rgba(0,225,255,.10);
}
.payOpt input{ margin:0; }

.coNote{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:#fff;
}
.coNote summary{ cursor:pointer; font-weight: 850; }
.coNote p{ margin:10px 0 0; color: rgba(255,255,255,.70); font-weight: 650; }

.sumBox{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.sumLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 2px;
  color: rgba(255,255,255,.78);
  font-weight: 800;
}
.sumLine b{ color:#fff; }
.sumTotal{
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  font-weight: 950;
  color:#fff;
  letter-spacing:-.01em;
}
.sumTotal b{
  text-shadow: 0 0 14px rgba(0,225,255,.18);
}
.discount b{ color: rgba(0,225,255,.92); }

.coModal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background: rgba(0,0,0,.55);
  z-index: 99999;
  padding: 18px;
}
.coModal.open{ display:grid; }

.coModalInner{
  width: min(560px, 100%);
  padding: 16px;
}
.coModalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.iconX{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color:#fff;
  cursor:pointer;
}
.coModalInner h2{ margin: 10px 0 0; color:#fff; }
.coModalInner p{ margin: 10px 0 0; }
.coModalActions{ margin-top: 14px; display:grid; gap:10px; }

@media (max-width: 980px){
  .coLayout{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
}

.header .topbar{
  flex-wrap: nowrap;
  overflow: hidden;
}

.brand{
  min-width: 0;
}

.brandText{
  min-width: 0;
}
.brandText b,
.brandText small{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav{
  white-space: nowrap;
}

@media (max-width: 900px){
  .nav{ display:none !important; }

  .topbar{
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .btn.primary{
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .mark{
    width: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 520px){
  .brandText small{ display:none !important; }
  .brandText b{ font-size: 14px !important; }
}

@media (max-width: 720px){
  .calHeader{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .calControls{
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 0 !important;
  }

  #monthLabel{
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .calControls button{
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .calH1{
    font-size: 38px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 420px){
  #monthLabel{ max-width: 115px; font-size: 12px; padding: 8px 10px; }
  .calH1{ font-size: 32px !important; }
  .weekdays{ font-size: 11px; letter-spacing: .10em; }
  .day{ height: 58px !important; border-radius: 14px !important; }
}