:root{
  --purple:#DC2626;
  --purple-deep:#991B1B;
  --purple-light:#EF4444;
  --purple-tint:#FEF2F2;
  --purple-tint-2:#FEE2E2;
  --ink:#1C1526;
  --muted:#726C7E;
  --muted-2:#948FA0;
  --line:#E8E4EF;
  --line-strong:#D8D2E4;
  --paper:#FDFCFE;
  --surface:#FFFFFF;
  --shadow:0 2px 6px rgba(28,21,38,0.05), 0 22px 48px -26px rgba(28,21,38,0.22);
  --shadow-lg:0 30px 70px -26px rgba(28,21,38,0.30);
  --inset-hi:rgba(255,255,255,0.75);
  --radius:16px;
  --danger:#B3261E;
  --danger-bg:#FDECEA;
  --danger-border:#F3C8C4;
  --warn:#8A6100;
  --warn-bg:#FDF3DA;
  --warn-border:#F0DDA0;
  --success:#1B7A3D;
  --success-bg:#E8F6EC;
  --success-border:#BFE5CB;
  --ease:cubic-bezier(.16,.8,.24,1);
  --ease-back:cubic-bezier(.2,1.4,.4,1);
}

*{box-sizing:border-box;}
/* The public footer's own background is the dark #17110F at its bottom
   edge, but the page background is the pale --paper tone — so overscroll
   (trackpad rubber-banding, iOS Safari's bounce) past the footer exposed a
   mismatched white gap underneath it. Matching html's background to that
   same color makes the bounce blend into the footer instead of showing a
   gap; admin/organizer dashboards don't have this footer at all, so they
   get their own near-white --admin-bg back here instead. */
html{scroll-behavior:smooth; background:#17110F; overscroll-behavior-y:none;}
html:has(body.admin-body){background:var(--admin-bg, #FAFAFB);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Plus Jakarta Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;}
h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; margin:0; letter-spacing:-0.02em; text-wrap:balance;}
p{margin:0; color:var(--muted); line-height:1.65;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.28rem; flex:none; letter-spacing:-0.02em;}
.logo-mark{width:32px; height:32px; flex:none;}

.site-nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .4s var(--ease);}
.site-nav.scrolled{box-shadow:0 10px 30px -22px rgba(28,21,38,0.35);}
.nav-row{display:flex; align-items:center; gap:36px; height:78px;}
.nav-links{display:flex; align-items:center; gap:28px; margin-left:auto; font-size:0.93rem; font-weight:600;}
.nav-links a.ghost{color:var(--ink); opacity:0.78;}
.nav-links a.ghost:hover{opacity:1;}

.nav-toggle{position:relative; display:none; align-items:center; justify-content:center; width:40px; height:40px; margin-left:auto; border-radius:10px; background:transparent; flex:none; transition:background .25s var(--ease);}
.nav-toggle:hover{background:var(--purple-tint);}
.nav-burger{position:relative; width:19px; height:13px;}
.nav-burger span{position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:var(--ink); transition:transform .35s var(--ease-back), opacity .2s var(--ease), top .35s var(--ease-back);}
.nav-burger span:nth-child(1){top:0;}
.nav-burger span:nth-child(2){top:5.5px;}
.nav-burger span:nth-child(3){top:11px;}
.nav-toggle.open .nav-burger span:nth-child(1){top:5.5px; transform:rotate(45deg);}
.nav-toggle.open .nav-burger span:nth-child(2){opacity:0;}
.nav-toggle.open .nav-burger span:nth-child(3){top:5.5px; transform:rotate(-45deg);}

.nav-backdrop{position:fixed; inset:0; background:rgba(20,10,35,0.45); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .4s var(--ease); z-index:90;}
.nav-backdrop.open{opacity:1; pointer-events:auto;}

.nav-drawer{position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); background:var(--surface); box-shadow:-20px 0 60px -20px rgba(28,21,38,0.35); z-index:100; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .45s var(--ease); overflow:hidden;}
.nav-drawer.open{transform:translateX(0);}
.nav-drawer-accent{height:4px; background:linear-gradient(90deg, var(--purple-light), var(--purple), var(--purple-deep)); flex:none;}
.nav-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px; border-bottom:1px solid var(--line); flex:none;}
.nav-drawer-close{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:var(--muted); background:transparent; flex:none; transition:background .2s var(--ease), color .2s var(--ease);}
.nav-drawer-close:hover{background:var(--purple-tint); color:var(--ink);}
.nav-drawer-links{display:flex; flex-direction:column; padding:10px 12px; gap:2px; flex:1; overflow-y:auto;}
.nav-drawer-row{display:flex; align-items:center; gap:13px; padding:12px 10px; border-radius:12px; font-weight:700; font-size:0.95rem; color:var(--ink); opacity:0; transform:translateX(14px); transition:background .18s ease, opacity .45s var(--ease), transform .45s var(--ease);}
.nav-drawer.open .nav-drawer-row{opacity:1; transform:translateX(0);}
.nav-drawer-row:hover{background:var(--purple-tint);}
.nav-drawer-row .ic{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--purple-tint); color:var(--purple); flex:none;}
.nav-drawer-row .label{flex:1;}
.nav-drawer-row .chev{color:var(--muted-2); flex:none;}
.nav-drawer-row.current{background:var(--purple-tint);}
.nav-drawer-row.current .ic{background:var(--purple); color:#fff;}
.nav-drawer-row.current .label{color:var(--purple-deep);}
.nav-drawer-div{height:1px; background:var(--line); margin:8px 14px; flex:none;}
.nav-drawer-cta{margin:6px 14px 4px; padding:14px; text-align:center; font-weight:700; font-size:0.95rem; color:#fff; background:var(--purple); border-radius:12px; box-shadow:0 14px 28px -14px rgba(220,38,38,0.6); opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .25s var(--ease);}
.nav-drawer.open .nav-drawer-cta{opacity:1; transform:translateY(0);}
.nav-drawer-cta:hover{box-shadow:0 18px 34px -14px rgba(220,38,38,0.7); transform:translateY(-2px);}
.nav-drawer-foot{padding:16px 24px 22px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.03em; color:var(--muted-2); border-top:1px solid var(--line); flex:none;}

.nav-drawer.open .nav-drawer-links a:nth-of-type(1){transition-delay:.05s;}
.nav-drawer.open .nav-drawer-links a:nth-of-type(2){transition-delay:.1s;}
.nav-drawer.open .nav-drawer-links a:nth-of-type(3){transition-delay:.15s;}
.nav-drawer.open .nav-drawer-links a:nth-of-type(4){transition-delay:.2s;}
.nav-drawer.open .nav-drawer-links a:nth-of-type(5){transition-delay:.25s;}
.nav-drawer.open .nav-drawer-links a:nth-of-type(6){transition-delay:.3s;}
.nav-drawer.open .nav-drawer-links a:nth-of-type(7){transition-delay:.35s;}

body.nav-open{overflow:hidden;}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; font-weight:700; font-size:0.9rem; border:1px solid transparent; padding:11px 22px; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; white-space:nowrap;}
.btn:active{transform:scale(0.98);}
.btn-purple{background:var(--purple); color:#fff;}
.btn-purple:hover{transform:translateY(-1px);}
.btn-line{border-color:var(--line-strong); color:var(--ink); background:var(--surface);}
.btn-line:hover{border-color:var(--purple-light);}
.btn-block{width:100%;}
.btn-lg{padding:15px 28px; font-size:0.98rem; border-radius:14px;}

.search-bar{
  margin:34px auto 0; max-width:560px; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:100px; padding:7px 8px 7px 24px;
  box-shadow:0 1px 2px rgba(28,21,38,0.04), 0 20px 44px -28px rgba(28,21,38,0.28);
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.search-bar:hover{transform:translateY(-1px); box-shadow:0 1px 2px rgba(28,21,38,0.05), 0 22px 46px -22px rgba(220,38,38,0.24);}
.search-bar:focus-within{border-color:var(--purple-light); transform:translateY(-1px); box-shadow:0 0 0 4px var(--purple-tint), 0 22px 46px -22px rgba(220,38,38,0.3);}
.search-bar svg{flex:none; color:var(--muted-2); transition:color .3s var(--ease);}
.search-bar:focus-within svg{color:var(--purple);}
.search-bar input{border:none; outline:none; background:none; flex:1; font:inherit; font-size:0.96rem; color:var(--ink); padding:12px 0; min-width:0;}
.search-bar input::placeholder{color:var(--muted-2);}
.search-bar button{background:linear-gradient(135deg, var(--purple-light), var(--purple)); color:#fff; border:none; border-radius:100px; padding:12px 26px; font-weight:700; font-size:0.9rem; flex:none; cursor:pointer; transition:box-shadow .25s var(--ease), transform .2s var(--ease-back), filter .2s var(--ease);}
.search-bar button:hover{box-shadow:0 12px 24px -10px rgba(220,38,38,0.55); transform:translateY(-1px);}
.search-bar button:active{transform:translateY(0); filter:brightness(0.96);}

/* ---------- SEARCH / BROWSE ---------- */
.search-cats{display:flex; gap:10px; flex-wrap:nowrap; overflow-x:auto; margin-top:26px; padding-bottom:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.search-cats::-webkit-scrollbar{display:none;}
.search-cats .cat-chip{flex:none;}
.search-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px;}

/* ---------- dark photo banner with a breadcrumb (search.php) ---------- */
.page-hero{position:relative; height:320px; overflow:hidden; display:flex; align-items:center;}
.page-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kenburns 18s ease-in-out infinite alternate;}
@keyframes kenburns{0%{transform:scale(1);} 100%{transform:scale(1.08);}}
.page-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,10,35,0.92) 10%, rgba(20,10,35,0.5) 60%, rgba(153,27,27,0.35) 100%);}
.page-hero-glow{position:absolute; z-index:1; width:340px; height:340px; border-radius:50%; top:-140px; right:60px; background:radial-gradient(circle, rgba(239,68,68,0.45), transparent 70%); filter:blur(10px); animation:floaty 8s ease-in-out infinite; pointer-events:none;}
.page-hero-content{position:relative; z-index:2;}
.page-hero-content h1{color:#fff; font-size:clamp(2rem,4vw,2.8rem);}
.page-hero-crumb{margin-top:14px; display:flex; gap:8px; align-items:center; font-size:0.82rem; font-family:'JetBrains Mono',monospace; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.03em;}
.page-hero-crumb a{color:rgba(255,255,255,0.8);}
.page-hero-crumb a:hover{color:#fff;}

/* ---------- premium empty state (search.php, no results) ---------- */
.empty-state{display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 40px; background:linear-gradient(180deg, var(--surface), #FDF5F5); border:1px solid var(--line); border-radius:24px;}
.empty-badge{width:88px; height:88px; border-radius:50%; background:linear-gradient(150deg, var(--purple-tint), var(--purple-tint-2)); color:var(--purple); display:flex; align-items:center; justify-content:center; animation:floaty 3.6s ease-in-out infinite, ringPulse 3.2s ease-in-out infinite;}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0.28), 0 0 0 10px rgba(220,38,38,0.08);} 50%{box-shadow:0 0 0 6px rgba(220,38,38,0.14), 0 0 0 20px rgba(220,38,38,0);}}
.empty-state h3{margin-top:26px; font-size:1.5rem;}
.empty-state p{margin-top:12px; max-width:420px;}
.empty-actions{margin-top:28px;}
.empty-actions .btn svg{transition:transform .25s var(--ease-back);}
.empty-actions .btn:hover svg{transform:translateX(3px);}
.empty-suggestions{display:flex; gap:10px; margin-top:34px; flex-wrap:wrap; justify-content:center; align-items:center;}
.empty-suggestions-label{font-size:0.78rem; font-weight:700; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.05em; margin-right:2px;}
.sugg-chip{display:inline-flex; align-items:center; gap:7px; padding:8px 16px 8px 8px; border-radius:100px; background:var(--surface); border:1.5px solid var(--line); font-weight:700; font-size:0.85rem; color:var(--ink); transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);}
.sugg-chip:hover{border-color:var(--purple-light); background:var(--purple-tint); transform:translateY(-2px);}
.sugg-chip-ic{width:26px; height:26px; border-radius:50%; background:var(--purple-tint); color:var(--purple); display:flex; align-items:center; justify-content:center; flex:none;}

/* ---------- event tile grid (search.php results) — card pattern
   adapted from a competing Ugandan ticketing site: a date badge
   overlaid on the poster instead of a category pill, and a real
   full-width "Get tickets" button on every card instead of a plain
   price/date row. ---------- */
.event-tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 28px;}
.event-tile{display:flex; flex-direction:column; border-radius:18px; transition:transform .35s var(--ease-back), box-shadow .35s var(--ease);}
.event-tile-grid .event-tile:hover{transform:translateY(-8px); box-shadow:0 30px 50px -24px rgba(153,27,27,0.35);}
a.event-tile-art{position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:4/5;}
.event-tile-art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);}
.event-tile:hover .event-tile-art img{transform:scale(1.08);}
.event-tile-art::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(20,10,35,0.35) 100%); opacity:0; transition:opacity .35s var(--ease);}
.event-tile:hover .event-tile-art::after{opacity:1;}
.event-tile-art-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.6rem; background:var(--purple-tint-2);}
.event-tile-date{position:absolute; top:14px; left:14px; z-index:2; background:var(--purple); color:#fff; border-radius:10px; padding:7px 12px; text-align:center; line-height:1.15; box-shadow:0 10px 22px -10px rgba(153,27,27,0.65); transition:transform .3s var(--ease-back);}
.event-tile:hover .event-tile-date{transform:scale(1.06);}
.event-tile-date .d{display:block; font-family:'JetBrains Mono',monospace; font-size:1.1rem; font-weight:700;}
.event-tile-date .m{display:block; font-size:0.6rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; opacity:0.85;}
.event-tile-body{padding-top:16px; flex:1;}
.event-tile-body h3{font-size:1.08rem; line-height:1.3;}
.event-tile-body h3 a{transition:color .2s var(--ease);}
.event-tile:hover .event-tile-body h3 a{color:var(--purple);}
.event-tile-meta{display:flex; align-items:center; gap:6px; font-size:0.83rem; color:var(--muted); margin-top:8px;}
.event-tile-meta svg{opacity:0.6; flex:none;}
.event-tile-price{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--purple-deep); font-size:0.95rem; margin-top:10px;}
.event-tile .btn{width:100%; justify-content:center; margin-top:14px; transition:box-shadow .25s var(--ease), background .25s var(--ease);}
.event-tile .btn-arrow{transition:transform .25s var(--ease-back);}
.event-tile:hover .btn-arrow{transform:translateX(3px);}
.event-tile:hover .btn{box-shadow:0 16px 30px -12px rgba(220,38,38,0.6);}

/* ---------- trust badges strip ---------- */
.trust-badges{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:32px; background:var(--purple-tint); border-radius:20px;}
.trust-item{display:flex; align-items:center; gap:12px; font-size:0.88rem; font-weight:600; color:var(--purple-deep); border-radius:14px; padding:6px; transition:transform .3s var(--ease-back);}
.trust-item:hover{transform:translateY(-3px);}
.trust-ic{width:38px; height:38px; border-radius:11px; background:var(--surface); color:var(--purple); display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 8px 18px -12px rgba(153,27,27,0.35); transition:background .3s var(--ease), color .3s var(--ease);}
.trust-item:hover .trust-ic{background:var(--purple); color:#fff;}

@media (max-width:900px){
  .event-tile-grid{grid-template-columns:repeat(2,1fr);}
  .page-hero{height:260px;}
  .trust-badges{grid-template-columns:1fr; gap:16px;}
}
@media (max-width:640px){
  .event-tile-grid{grid-template-columns:1fr;}
  .page-hero{height:220px;}
}

/* ---------- sections ---------- */
.sec{padding:64px 0;}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:26px;}
.sec-head h2{font-size:1.4rem;}
.sec-head .more{font-size:0.86rem; font-weight:700; color:var(--purple-deep); flex:none;}

/* the original red/purple full-bleed carousel hero and its floating
   search panel were replaced by the classic-page system below (first
   the split hero, now the magazine-cover hero) — no page references
   the original one any more. */

/* ---------- category strip (homepage) ---------- */
.cat-strip{max-width:1120px; margin:0 auto 8px; padding:44px 32px 8px; display:flex; flex-wrap:nowrap; overflow-x:auto; gap:12px; box-sizing:border-box; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.cat-strip::-webkit-scrollbar{display:none;}
.cat-chip{flex:none; display:flex; align-items:center; gap:10px; padding:7px 20px 7px 7px; border-radius:100px; background:#fff; border:1.5px solid var(--line); text-decoration:none; transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease-back), box-shadow .22s var(--ease);}
.cat-chip:hover{background:var(--purple-tint); border-color:var(--purple-light); transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(220,38,38,0.35);}
.cat-chip:hover .cat-chip-ic{background:var(--purple); color:#fff;}
.cat-chip-ic{width:34px; height:34px; border-radius:50%; background:var(--purple-tint); color:var(--purple); display:flex; align-items:center; justify-content:center; flex:none; transition:background .22s var(--ease), color .22s var(--ease);}
.cat-chip-label{font-weight:700; font-size:0.9rem; color:var(--ink);}
.cat-chip.active{background:var(--purple); border-color:var(--purple);}
.cat-chip.active .cat-chip-ic{background:rgba(255,255,255,0.2); color:#fff;}
.cat-chip.active .cat-chip-label{color:#fff;}

/* ---------- event cards (homepage grid) ---------- */
.event-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:24px; perspective:900px;}
.event-card{display:block; border-radius:20px; background:var(--surface); border:1px solid var(--line); transition:transform .25s var(--ease-back, ease), box-shadow .4s var(--ease, ease), border-color .4s ease; will-change:transform; transform-style:preserve-3d;}
.event-card:hover{box-shadow:var(--glow-soft, var(--shadow-lg)); border-color:var(--line-strong);}
.event-art{position:relative; height:190px; border-radius:20px 20px 0 0; overflow:hidden; background:var(--purple-tint-2);}
.event-art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease, ease);}
.event-card:hover .event-art img{transform:scale(1.08);}
.event-art-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.6rem;}
.event-cat{position:absolute; top:13px; left:13px; z-index:2; font-size:0.7rem; font-weight:700; padding:6px 12px; border-radius:100px; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); color:#fff;}
.event-date{position:absolute; top:13px; right:13px; z-index:2; background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; text-align:center; width:46px; padding:5px 0 6px;}
.event-date .mo{font-size:0.6rem; font-weight:700; color:var(--purple-deep); letter-spacing:0.03em;}
.event-date .day{font-size:1.05rem; font-weight:800; line-height:1.1;}
.event-body{padding:18px 20px 20px;}
.event-body h3{font-size:1.04rem; line-height:1.3;}
.event-meta{display:flex; align-items:center; gap:7px; font-size:0.82rem; color:var(--muted); margin-top:8px; font-weight:600;}
.event-meta svg{opacity:0.6; flex:none;}
.event-foot{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.event-price{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.9rem; color:var(--purple-deep);}
.event-cta{display:flex; align-items:center; gap:5px; font-size:0.82rem; font-weight:700; color:var(--purple-light);}
.see-more-wrap{display:flex; justify-content:center; margin-top:36px;}

/* ---------- big-number CTA (homepage, dark-page) ---------- */
.cta-stat{position:relative; text-align:center; border-radius:28px; overflow:hidden; padding:70px 40px; background:var(--surface); border:1px solid var(--line); max-width:700px; margin:0 auto;}
.cta-stat::before{content:''; position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:700px; height:400px; background:radial-gradient(circle, rgba(239,68,68,0.26), transparent 65%); animation:drift 10s ease-in-out infinite alternate;}
.cta-stat-inner{position:relative; z-index:2;}
.cta-stat .eyebrow{font-size:0.8rem; font-weight:700; color:var(--purple-deep); letter-spacing:0.06em; font-family:'JetBrains Mono',monospace; text-transform:uppercase;}
.cta-stat .num{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:clamp(2.6rem,6vw,3.6rem); background:linear-gradient(135deg, var(--purple-deep), var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; margin-top:14px;}
.cta-stat .sub{margin-top:10px; font-size:0.95rem;}
.cta-stat h2{margin-top:22px; font-size:1.8rem; color:var(--ink);}
.cta-stat .btn{margin-top:24px;}

/* ---------- "after-hours" concept — shared by any page that opts in ----------
   body.dark-page no longer overrides any color token (the platform is red
   + white only now, everywhere) — it's kept purely as a marker class for
   the motion/interaction polish below (shine-sweep buttons, tilt cards,
   curtain wipes, reveals), so About/Pricing/Contact/Help/Refunds/Team/
   Auth/Homepage keep that treatment without also going dark. */
body.dark-page .btn{border-radius:100px; transition:box-shadow .4s var(--ease), border-color .3s ease, transform .25s var(--ease-back);}
body.dark-page .btn:active{transform:scale(0.94);}
body.dark-page .btn-purple{background:linear-gradient(135deg, var(--purple-light), var(--purple)); box-shadow:0 12px 28px -12px rgba(239,68,68,0.55); position:relative; overflow:hidden;}
body.dark-page .btn-purple::before{content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); transform:translateX(-130%); transition:transform .8s var(--ease);}
body.dark-page .btn-purple:hover::before{transform:translateX(130%);}
body.dark-page .btn-purple:hover{box-shadow:0 20px 44px -14px rgba(239,68,68,0.8);}
body.dark-page .btn-line{background:transparent;}
body.dark-page .btn-line:hover{border-color:var(--purple-light); background:rgba(239,68,68,0.1);}
.magnetic{display:inline-flex;}

@media (prefers-reduced-motion: reduce){
  body.dark-page .reveal, body.dark-page .word, body.dark-page .curtain{opacity:1 !important; transform:none !important;}
  body.dark-page *{animation:none !important; transition:none !important;}
}

/* ---------- "classic" concept — opt-in per page, serif + warm cream ----------
   Colors now come from the shared :root tokens like every other page; this
   scope only swaps in a warm cream background and serif headings. */
body.classic-page{
  --paper:#FAF8F3;
}
body.classic-page h1, body.classic-page h2, body.classic-page h3{font-family:'Outfit',serif; font-weight:600; letter-spacing:-0.01em;}
body.classic-page .logo{font-family:'Outfit',serif; font-weight:600;}
body.classic-page .btn{border-radius:3px; transition:box-shadow .3s ease, transform .18s ease, border-color .18s ease, background .18s ease;}
body.classic-page .btn-purple:hover{box-shadow:0 14px 30px -12px rgba(153,27,27,0.55);}
body.classic-page .btn-line{border-color:var(--purple); color:var(--purple); background:transparent;}
body.classic-page .btn-line:hover{background:var(--purple-tint); border-color:var(--purple-deep);}

.masthead-bar{background:var(--purple-deep); color:#fff; text-align:center; padding:8px 0; font-size:0.78rem; font-weight:600; letter-spacing:0.03em;}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--purple);}

/* ---------- homepage hero v2: split layout, headline+search left / tilted
   poster collage right (momoticketing.com-inspired) — warm cream ground
   instead of a full-bleed photo, so the collage's real event art is what
   carries the color/energy instead of a background wash. The collage is a
   3-card stack that auto-rotates (see the inline script after it): each
   card holds a data-pos of 0/1/2 (front/mid/back) and glides between the
   three positions below, cycling every 3s — same idea as MoMo Ticketing's
   hero. ---------- */
.home-hero-v2{background:var(--paper); padding:64px 0 48px;}
.home-hero-v2-inner{display:flex; align-items:center; gap:48px;}
.home-hero-v2-copy{flex:1.1; min-width:0;}
.home-hero-v2-copy h1{color:var(--ink); font-size:clamp(2.1rem,4.2vw,3.2rem); line-height:1.06; max-width:12ch; text-wrap:balance;}
.home-hero-v2-copy p{color:var(--muted); margin-top:16px; font-size:1.02rem; max-width:40ch;}
.home-hero-v2-collage{flex:1; position:relative; height:420px; min-width:0;}
.home-hero-v2-collage-item{position:absolute; top:20px; left:180px; display:block; border-radius:16px; cursor:pointer; opacity:0; transform:translate(0,16px) scale(.9); transition:transform 1.1s cubic-bezier(.22,.68,0,1.01), opacity 1.1s cubic-bezier(.22,.68,0,1.01);}
.home-hero-v2-collage-item[data-pos="0"]{opacity:1; z-index:3; transform:translate(-95px,54px) scale(1) rotate(-3deg);}
.home-hero-v2-collage-item[data-pos="1"]{opacity:0.82; z-index:2; transform:translate(27px,-14px) scale(0.9) rotate(4deg);}
.home-hero-v2-collage-item[data-pos="2"]{opacity:0.5; z-index:1; transform:translate(128px,-74px) scale(0.8) rotate(9deg);}
.home-hero-v2-collage-item[data-pos="0"]:hover{transform:translate(-95px,40px) scale(1.04) rotate(-3deg);}
.home-hero-v2-collage-item[data-pos="1"]:hover{transform:translate(27px,-22px) scale(0.94) rotate(4deg);}
.home-hero-v2-collage-item[data-pos="2"]:hover{transform:translate(128px,-80px) scale(0.84) rotate(9deg);}
.home-hero-v2-collage-item:focus-visible{outline:2px solid var(--purple); outline-offset:4px; border-radius:16px;}
.home-hero-v2-collage-img{width:260px; height:340px; object-fit:cover; border-radius:16px; box-shadow:0 30px 50px -20px rgba(28,21,38,0.35); border:6px solid var(--surface); display:block; transition:box-shadow .4s var(--ease);}
.home-hero-v2-collage-img.poster-card-fallback{display:flex; align-items:center; justify-content:center; font-size:2.6rem; background:var(--purple-tint-2);}
.home-hero-v2-collage-item[data-pos="0"]:hover .home-hero-v2-collage-img{box-shadow:0 40px 70px -18px rgba(28,21,38,0.5);}
@media (max-width:920px){
  .home-hero-v2-inner{flex-direction:column; align-items:stretch; gap:32px;}
  .home-hero-v2-copy h1{max-width:none;}
  .home-hero-v2-collage{flex:none; height:280px;}
  .home-hero-v2-collage-item{top:12px; left:120px;}
  .home-hero-v2-collage-img{width:170px; height:220px;}
  .home-hero-v2-collage-item[data-pos="0"]{transform:translate(-62px,34px) scale(1) rotate(-3deg);}
  .home-hero-v2-collage-item[data-pos="1"]{transform:translate(18px,-8px) scale(0.9) rotate(4deg);}
  .home-hero-v2-collage-item[data-pos="2"]{transform:translate(83px,-49px) scale(0.8) rotate(9deg);}
}
@media (max-width:640px){
  .home-hero-v2-collage{display:none;}
}
.home-search{display:flex; align-items:center; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:8px; margin-top:28px; box-shadow:var(--shadow); transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);}
.home-search:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.home-search:focus-within{transform:translateY(-2px); border-color:var(--purple-light); box-shadow:0 0 0 4px var(--purple-tint), var(--shadow-lg);}
.home-search-field{display:flex; align-items:center; gap:10px; padding:8px 16px; border-radius:100px; transition:background .25s var(--ease);}
.home-search-field-q{flex:1; min-width:0; color:var(--muted-2); transition:color .25s var(--ease);}
.home-search-field-q svg{flex:none; transition:color .25s var(--ease);}
.home-search:focus-within .home-search-field-q svg{color:var(--purple);}
.home-search-field-q input{flex:1; min-width:0; border:none; background:none; outline:none; font:inherit; font-size:0.94rem; color:var(--ink);}
.home-search-field-cat{position:relative;}
.home-search-field-cat:hover{background:var(--purple-tint);}
.home-search-field select{border:none; background:none; outline:none; font:inherit; font-size:0.9rem; color:var(--ink); max-width:150px; appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:18px;}
.home-search-field-cat .field-chevron{position:absolute; right:14px; top:50%; margin-top:-6px; color:var(--muted-2); pointer-events:none; transition:color .25s var(--ease), transform .25s var(--ease);}
.home-search-field-cat:hover .field-chevron{color:var(--purple);}
.home-search-div{width:1px; align-self:stretch; margin:6px 0; background:var(--line);}
.home-search .btn{border-radius:100px; flex:none; transition:box-shadow .25s var(--ease), transform .2s var(--ease-back), filter .2s var(--ease);}
.home-search .btn:hover{box-shadow:0 14px 28px -12px rgba(220,38,38,0.55); transform:translateY(-1px);}
.home-search .btn:active{transform:translateY(0); filter:brightness(0.96);}

/* ---------- homepage poster cards: image-forward, minimal caption
   (momoticketing.com-inspired) — shared by the "Our picks" scroll row and
   the "More events" grid below it. ---------- */
.evt-section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px;}
.section-sub{color:var(--muted); font-size:0.92rem; margin-top:6px;}
.poster-card{display:block; color:inherit;}
.poster-card-img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; display:block; background:var(--purple-tint-2); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.poster-card-fallback{display:flex; align-items:center; justify-content:center; font-size:2.6rem;}
.poster-card:hover .poster-card-img{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.poster-card-title{margin-top:12px; font-size:0.94rem; font-weight:800; color:var(--ink); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.poster-card-meta{margin-top:4px; font-size:0.8rem; color:var(--muted-2); font-weight:600;}
.poster-card-venue{font-weight:400;}

.picks-section{padding:48px 0 8px;}
.picks-row{display:flex; gap:18px; overflow-x:auto; padding:4px 32px 12px; margin:0 -32px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.picks-row::-webkit-scrollbar{display:none;}
.picks-row .poster-card{flex:none; width:200px; scroll-snap-align:start;}
@media (min-width:768px){ .picks-row .poster-card{width:260px;} }

/* 3 columns (was 4) — momoticketing.com-sized cards, big enough that the
   poster art actually reads instead of shrinking into a thumbnail. */
.poster-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px 22px;}
@media (max-width:640px){ .poster-grid{grid-template-columns:repeat(2,1fr); gap:20px 14px;} }

@media (max-width:900px){
  .home-hero-v2{padding:48px 0 40px;}
}
@media (max-width:640px){
  .home-hero-v2{padding:36px 0 32px;}
  .home-search{flex-wrap:wrap; border-radius:22px; padding:12px;}
  .home-search-field-q{width:100%; padding:8px 10px;}
  .home-search-div{display:none;}
  .home-search-field{flex:1; padding:8px 10px;}
  .home-search .btn{width:100%; margin-top:4px;}
  .cat-strip{gap:10px; padding:32px 18px 8px; margin-bottom:0;}
}

/* ---------- word-by-word text reveal ---------- */
.split-heading{overflow:hidden; display:block;}
.split-heading .line{display:block; overflow:hidden; padding-bottom:0.08em;}
.word{display:inline-block; transform:translateY(115%) rotate(4deg); opacity:0; transition:transform .85s var(--ease), opacity .7s ease; transition-delay:calc(var(--i) * 55ms);}
.split-heading.in .word{transform:translateY(0) rotate(0); opacity:1;}

/* ---------- generic scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(40px) scale(.98); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0) scale(1);}
.reveal-delay-1{transition-delay:.1s;} .reveal-delay-2{transition-delay:.2s;} .reveal-delay-3{transition-delay:.3s;}

/* ---------- curtain image reveal ---------- */
.curtain{position:relative; overflow:hidden;}
.curtain::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, var(--purple-light), var(--purple) 60%); z-index:3; transform-origin:left; transform:scaleX(1); transition:transform .95s var(--ease-back);}
.curtain.in::after{transform:scaleX(0);}
.curtain img{transform:scale(1.25); transition:transform 1.6s var(--ease);}
.curtain.in img{transform:scale(1);}

.ah-hero{position:relative; padding:110px 0 70px; overflow:hidden; perspective:1000px;}
.hero-glow{position:absolute; top:-200px; left:50%; width:900px; height:600px; background:radial-gradient(circle, rgba(239,68,68,0.32), transparent 65%); pointer-events:none; will-change:transform; transform:translate(-50%,0);}
.orb{position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; opacity:0.5;}
.orb1{width:8px; height:8px; background:var(--purple-light); top:18%; left:8%; animation:floaty 7s ease-in-out infinite;}
.orb2{width:5px; height:5px; background:var(--purple-deep); top:65%; left:4%; animation:floaty 9s ease-in-out infinite reverse;}
.orb3{width:6px; height:6px; background:var(--purple-light); top:30%; left:96%; animation:floaty 8s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0) translateX(0);} 50%{transform:translateY(-26px) translateX(10px);}}
.ah-hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.kicker{display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--purple-deep);}
.kicker i{width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,0.2); flex:none; animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(74,222,128,0.2);} 50%{box-shadow:0 0 0 9px rgba(74,222,128,0.04);}}
.ah-hero h1{font-size:clamp(2.5rem,4.6vw,3.7rem); line-height:1.1; margin-top:22px;}
.ah-hero .dek{font-size:1.08rem; max-width:460px; margin-top:20px;}
.ah-hero-btns{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;}
.hero-in{opacity:0; transform:translateY(22px); animation:heroIn .9s var(--ease) forwards;}
.hero-in.d1{animation-delay:.05s;} .hero-in.d3{animation-delay:.9s;} .hero-in.d4{animation-delay:1.05s;} .hero-in.d5{animation-delay:.35s;}
@keyframes heroIn{to{opacity:1; transform:translateY(0);}}

.tilt-wrap{transform-style:preserve-3d; will-change:transform;}
.glow-frame{position:relative; border-radius:24px; padding:10px; background:linear-gradient(160deg, rgba(239,68,68,0.35), rgba(239,68,68,0.02)); box-shadow:0 0 0 1px rgba(239,68,68,0.18), 0 30px 70px -26px rgba(153,27,27,0.55); transition:box-shadow .5s var(--ease);}
.glow-frame .frame-inner{border-radius:18px; overflow:hidden;}
.glow-frame img{width:100%; height:420px; object-fit:cover; display:block; transition:transform .6s var(--ease); transform:scale(1.25);}
.glow-frame.in img{transform:scale(1.06);}
.tilt-wrap:hover .glow-frame img{transform:scale(1.12) !important;}
.glow-frame .badge{position:absolute; bottom:-16px; left:26px; background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:12px 18px; box-shadow:0 20px 50px -24px rgba(153,27,27,0.45); display:flex; gap:12px; align-items:center; transform:translateZ(40px);}
.glow-frame .badge .n{font-weight:700; font-size:1.15rem; color:var(--purple-deep);}
.glow-frame .badge .l{font-size:0.72rem; color:var(--muted-2); font-weight:600;}

.ah-section{padding:100px 0;}
.ah-section-head{text-align:center; max-width:560px; margin:0 auto 50px;}
.ah-section-head .kicker{justify-content:center;}
.ah-section-head h2{font-size:2rem; margin-top:16px;}
.ah-section-head p{margin-top:16px; font-size:1rem;}

.story-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;}
.story-media{border-radius:20px; box-shadow:0 0 0 1px rgba(239,68,68,0.18), 0 30px 70px -26px rgba(153,27,27,0.55); will-change:transform;}
.story-media img{width:100%; height:340px; object-fit:cover; display:block;}
.story-text h3{font-size:1.7rem; line-height:1.2; margin-top:14px;}
.story-text p{margin-top:16px; font-size:1rem;}
.story-text p + p{margin-top:12px;}

.principle-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; perspective:900px;}
.principle-grid-2{grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto;}
.principle-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px 26px; transition:box-shadow .5s var(--ease), border-color .5s var(--ease), transform .25s var(--ease-back); transform-style:preserve-3d; will-change:transform;}
.principle-card:hover{box-shadow:0 30px 60px -20px rgba(153,27,27,0.6); border-color:var(--line-strong);}
.principle-ic{width:46px; height:46px; border-radius:13px; background:var(--purple-tint); color:var(--purple); display:flex; align-items:center; justify-content:center; transition:transform .45s var(--ease-back), background .45s var(--ease); animation:iconFloat 3.4s ease-in-out infinite; transform:translateZ(30px);}
.principle-card:nth-child(2) .principle-ic{animation-delay:.5s;}
.principle-card:nth-child(3) .principle-ic{animation-delay:1s;}
@keyframes iconFloat{0%,100%{transform:translateZ(30px) translateY(0);} 50%{transform:translateZ(30px) translateY(-6px);}}
.principle-card:hover .principle-ic{background:var(--purple-tint-2);}
.principle-card h3{font-size:1.08rem; margin-top:18px; transform:translateZ(20px);}
.principle-card p{margin-top:10px; font-size:0.9rem; transform:translateZ(10px);}

.moment-strip{display:grid; grid-template-columns:1.2fr 1fr; gap:20px;}
.moment-strip .big{border-radius:22px; box-shadow:0 0 0 1px rgba(239,68,68,0.18), 0 30px 70px -26px rgba(153,27,27,0.55); will-change:transform;}
.moment-strip .big img{width:100%; height:100%; min-height:380px; object-fit:cover; display:block;}
.moment-strip .stack{display:flex; flex-direction:column; gap:20px;}
.moment-strip .stack .thumb{border-radius:18px; box-shadow:0 20px 50px -24px rgba(153,27,27,0.45); will-change:transform;}
.moment-strip .stack img{width:100%; height:180px; object-fit:cover; display:block;}

.stat-band{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; perspective:900px;}
.stat-tile{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; text-align:center; transition:transform .25s var(--ease-back), box-shadow .4s var(--ease); transform-style:preserve-3d;}
.stat-tile:hover{box-shadow:0 20px 50px -24px rgba(153,27,27,0.45);}
.stat-tile .n{font-weight:700; font-size:2.3rem; background:linear-gradient(135deg, var(--purple-deep), var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block;}
.stat-tile .l{margin-top:8px; font-size:0.85rem; color:var(--muted);}

.ah-cta{position:relative; text-align:center; border-radius:28px; overflow:hidden; padding:84px 40px; background:var(--surface); border:1px solid var(--line);}
.cta-ring{position:absolute; inset:-2px; border-radius:28px; padding:2px; background:conic-gradient(from var(--ang,0deg), transparent, var(--purple-light), transparent 40%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 6s linear infinite; opacity:.7; pointer-events:none;}
@keyframes spin{to{--ang:360deg;}}
@property --ang{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.ah-cta::before{content:''; position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:700px; height:400px; background:radial-gradient(circle, rgba(239,68,68,0.24), transparent 65%); animation:drift 10s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translateX(-54%) translateY(0) scale(1);} to{transform:translateX(-46%) translateY(24px) scale(1.1);}}
.ah-cta-inner{position:relative; z-index:2; max-width:520px; margin:0 auto;}
.ah-cta h2{font-size:2.1rem; margin-top:16px;}
.ah-cta p{margin-top:14px;}
.ah-cta-btns{display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap;}

/* ---------- pricing page (shares the dark-page/cinematic system above) ---------- */
.price-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.price-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:40px 36px; transition:box-shadow .5s var(--ease), border-color .5s var(--ease), transform .25s var(--ease-back); transform-style:preserve-3d; will-change:transform;}
.price-card:hover{box-shadow:0 30px 60px -20px rgba(153,27,27,0.6); border-color:var(--line-strong);}
.price-card-ic{width:46px; height:46px; border-radius:13px; background:var(--purple-tint); color:var(--purple); display:flex; align-items:center; justify-content:center; transform:translateZ(30px);}
.price-card h3{font-size:1.15rem; margin-top:20px; transform:translateZ(20px);}
.price-num{position:relative; z-index:2; font-weight:700; font-size:3rem; background:linear-gradient(135deg, var(--purple-deep), var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; margin-top:10px; transform:translateZ(20px);}
.price-num .u{font-size:1.1rem; font-weight:600; -webkit-text-fill-color:var(--muted-2); color:var(--muted-2);}
.price-card p{margin-top:12px; font-size:0.95rem; transform:translateZ(10px);}
.price-list{margin-top:22px; display:flex; flex-direction:column; gap:12px; transform:translateZ(10px);}
.price-list li{display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:var(--muted); list-style:none;}
.price-list li svg{flex:none; margin-top:3px; color:var(--purple-light);}

.price-example{max-width:520px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:36px 40px;}
.price-example h3{font-size:1.05rem; text-align:center;}
.price-example .checkout-line{border-color:var(--line);}
.price-example .checkout-line.total{border-color:var(--line-strong);}

@media (max-width:900px){
  .price-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .price-card{padding:30px 26px;}
  .price-example{padding:28px 24px;}
}

/* ---------- contact page (shares the dark-page palette above) ---------- */
.contact-hero{position:relative; padding:64px 0 20px; text-align:center; overflow:hidden;}
.contact-hero::before{content:''; position:absolute; top:-220px; left:50%; transform:translateX(-50%); width:800px; height:520px; background:radial-gradient(circle, rgba(239,68,68,0.22), transparent 65%); pointer-events:none;}
.contact-hero-inner{position:relative; z-index:2;}
.contact-hero .kicker{justify-content:center;}
.contact-hero h1{font-size:clamp(2.2rem,4vw,3rem); margin-top:18px;}
.contact-hero p{max-width:480px; margin:16px auto 0; font-size:1.05rem;}
.contact-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:start;}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:36px;}
.contact-card h3{font-size:1.2rem;}
.contact-info-list{display:flex; flex-direction:column; gap:22px; margin-top:22px;}
.contact-info-item{display:flex; gap:14px; align-items:flex-start;}
.contact-info-item .ic{width:38px; height:38px; border-radius:11px; background:var(--purple-tint); color:var(--purple); display:flex; align-items:center; justify-content:center; flex:none;}
.contact-info-item h4{font-size:0.92rem; font-weight:700;}
.contact-info-item p{margin-top:3px; font-size:0.86rem;}
.contact-info-item a{color:var(--purple-deep); font-weight:600;}
.contact-map{margin-top:22px; border-radius:14px; overflow:hidden; border:1px solid var(--line); height:220px;}
.contact-map iframe{width:100%; height:100%; border:0; display:block;}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .contact-hero{padding:44px 0 10px;}
  .contact-card{padding:26px 22px;}
}

/* ---------- team page (shares the dark-page palette above) ---------- */
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:680px; margin:0 auto;}
.team-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:36px 30px; text-align:center; transition:box-shadow .4s var(--ease), border-color .4s var(--ease);}
.team-card:hover{box-shadow:0 24px 54px -22px rgba(153,27,27,0.5); border-color:var(--line-strong);}
.team-avatar{width:84px; height:84px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.5rem; letter-spacing:0.02em; background:linear-gradient(135deg, var(--purple-deep), var(--purple)); color:#fff;}
.team-card h3{margin-top:20px; font-size:1.15rem;}
.team-card .role{margin-top:4px; font-size:0.82rem; font-weight:600; color:var(--purple-light);}
.team-card p{margin-top:14px; font-size:0.92rem; color:var(--muted); line-height:1.6;}

@media (max-width:640px){
  .team-grid{grid-template-columns:1fr;}
  .team-card{padding:28px 24px;}
}

/* ---------- legal documents: Terms of Use, Purchase Terms, Privacy Policy —
   plain long-form prose, comfortable reading width, reuses .contact-hero for
   the page header like refunds.php already does. ---------- */
.legal-doc{max-width:740px; margin:0 auto;}
.legal-doc .updated{color:var(--muted-2); font-size:0.85rem; margin-bottom:32px;}
.legal-doc h2{font-size:1.25rem; margin-top:38px; margin-bottom:14px;}
.legal-doc h2:first-of-type{margin-top:0;}
.legal-doc p{margin-bottom:14px; line-height:1.7; color:var(--muted);}
.legal-doc ul{margin:0 0 14px 22px; line-height:1.7; color:var(--muted);}
.legal-doc li{margin-bottom:6px;}
.legal-doc strong{color:var(--ink);}
.legal-doc a{color:var(--purple-deep); font-weight:600;}

.pay-badge{display:inline-flex; align-items:center; justify-content:center; height:36px; border-radius:9px; overflow:hidden; line-height:0; transition:transform .25s var(--ease-back), box-shadow .25s var(--ease);}
.pay-badge:hover{transform:translateY(-2px);}
.pay-logo{height:36px; width:auto; display:block;}

/* ============ EVENT PAGE — sticky poster + plain editorial column ============ */
.crumb{font-size:0.85rem; color:var(--muted); padding:22px 0 0; display:flex; gap:8px; align-items:center;}
.crumb a{color:var(--muted);} .crumb a:hover{color:var(--ink);}

.event-layout{display:grid; grid-template-columns:1fr 380px; gap:48px; padding:52px 0 80px; align-items:flex-start;}

/* ---------- event hero v2: full-bleed poster/photo, bottom-anchored overlay
   content (momoticketing.com-inspired) — the title/date/venue sit ON the
   image again, so a portrait flyer's own artwork IS the page, not a boxed
   frame above it. The whole banner still shows uncropped (contain), with a
   blurred cover copy filling the letterbox behind it, same technique as
   before — never crop what an organizer uploaded. ---------- */
.event-hero-compact{position:relative; background:#150D1C; color:#fff; padding:28px 0 40px;}
.event-hero-compact-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px;}
.event-hero-compact-tag{display:inline-flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:rgba(255,255,255,0.75);}
.event-hero-compact .icon-btn{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.16); color:#fff;}
.event-hero-compact .icon-btn:hover{background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.3); color:#fff; transform:translateY(-1px);}

.event-hero-compact-row{display:flex; gap:36px; align-items:flex-start;}
/* The banner is the headline of the page: shown big, at the uploaded
   image's own proportions (square, portrait or landscape) — no fixed
   aspect box, so nothing is letterboxed into bars or cropped. */
.event-hero-compact-media{flex:none; width:min(520px,46%); cursor:zoom-in;}
.event-hero-compact-media img{width:100%; height:auto; max-height:900px; object-fit:contain; border-radius:18px; box-shadow:0 30px 70px -24px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.08); display:block;}
.event-hero-compact-fallback{flex:none; width:min(520px,46%); aspect-ratio:1/1; border-radius:14px; background:var(--purple-tint-2); display:flex; align-items:center; justify-content:center; font-size:4rem;}
.event-hero-compact-text{flex:1; min-width:0; padding-top:4px;}
.event-title-row{display:flex; align-items:center; gap:14px;}
.event-title-row .share-wrap{flex:none;}
.event-hero-compact-text h1{font-size:clamp(1.8rem,3.2vw,2.5rem); color:#fff; line-height:1.14; max-width:20ch; text-wrap:balance;}
.event-hero-compact-org{display:block; margin-top:16px; font-size:0.86rem; color:rgba(255,255,255,0.55);}
.event-hero-compact-org b{display:block; margin-top:4px; font-size:1rem; font-weight:700; color:var(--purple-light);}
.event-hero-compact-date{margin-top:16px; font-size:1.02rem; font-weight:700; color:#fff;}
.event-hero-compact-venue{margin-top:6px; font-size:0.92rem; color:rgba(255,255,255,0.6);}
.event-hero-compact-badges{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap;}
.event-hero-compact-badge{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:100px; padding:8px 16px; font-size:0.82rem; font-weight:700; color:#fff; font-family:inherit;}
.event-hero-compact-badge .tk{font-size:0.95rem;}
.event-hero-compact-badge#likeBtn svg{color:#fff;}
.event-hero-compact-badge.liked{background:var(--purple); border-color:var(--purple); color:#fff;}
/* The countdown badge gets the accent treatment (matches the brand color
   the way momoticketing.com's own "In N days" pill uses its gold accent),
   so it reads as the one badge worth a second glance. */
.event-hero-compact-badge:has(#cd-text){border-color:rgba(239,68,68,0.4); color:var(--purple-light);}
.event-hero-compact-badge:has(#cd-text) .tk{filter:none;}
#cd-text{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; color:var(--purple-light);}

@media (max-width:720px){
  .event-hero-compact-row{flex-direction:column; align-items:center; text-align:center;}
  .event-hero-compact-media, .event-hero-compact-fallback{width:100%; max-width:560px;}
  .event-hero-compact-media img{max-height:none;}
  .event-hero-compact-text{width:100%;}
  .event-title-row{flex-direction:column; gap:10px;}
  .event-hero-compact-text h1{max-width:100%;}
  .event-hero-compact-badges{justify-content:center;}
}

/* ---------- mobile sticky buy bar: always-visible price + CTA while
   scrolling the event page on a phone (momoticketing.com-style) — links
   down to the real, already-functional ticket panel rather than
   duplicating its logic. Desktop already shows that panel sticky in the
   sidebar, so this stays mobile-only. ---------- */
.mobile-buy-bar{display:none;}
@media (max-width:920px){
  body.event-page{padding-bottom:78px;}
  .mobile-buy-bar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:#150D1C; border-top:1px solid rgba(255,255,255,0.1);
    padding:14px 20px; box-shadow:0 -20px 40px -20px rgba(0,0,0,0.6);
  }
  .mobile-buy-bar .lbl{display:block; font-size:0.66rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.42);}
  .mobile-buy-bar .amt{display:block; font-family:'JetBrains Mono',monospace; font-size:1.05rem; font-weight:800; color:#fff; margin-top:2px;}
  .mobile-buy-bar .btn{flex:none; padding:12px 22px;}
}

/* ---------- dark shell: everything from "About" through the buy panel and
   gallery sits on a dark surface, echoing the hero — same token-swap
   mechanism used by the site's other theme variants (dark-page/classic-page):
   every shared component below already reads var(--ink)/var(--surface)/etc,
   so redefining them here re-skins tier rows, the buy panel, the gallery and
   the organizer row automatically. ---------- */
.event-dark-shell{
  --ink:#fff; --muted:rgba(255,255,255,0.62); --muted-2:rgba(255,255,255,0.42);
  --line:rgba(255,255,255,0.10); --line-strong:rgba(255,255,255,0.18);
  --surface:#1B1224; --paper:#150D1C;
  background:var(--paper); color:#fff;
}
.event-dark-shell .event-content h2::before{content:''; display:inline-block; width:3px; height:16px; background:var(--purple); border-radius:2px; margin-right:10px; vertical-align:-2px;}
.event-dark-shell .icon-btn:hover, .event-dark-shell .follow-btn:hover{border-color:var(--purple); color:var(--purple-light);}
.event-dark-shell .buy-panel{box-shadow:0 30px 70px -26px rgba(0,0,0,0.5);}
.event-dark-shell .qty button{background:#241A34; color:#fff;}
.event-dark-shell .alert-error{background:rgba(220,38,38,0.16); color:#FF9B8F; border-color:rgba(220,38,38,0.35);}

/* ---------- lightbox: full-size banner/gallery preview ---------- */
.lightbox-overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:32px; background:rgba(8,5,14,0.94); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s linear .3s;}
.lightbox-overlay.open{opacity:1; visibility:visible; transition:opacity .3s var(--ease), visibility 0s linear;}
.lightbox-overlay img, .lightbox-overlay video{max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 40px 90px -20px rgba(0,0,0,0.6); transform:scale(0.94); transition:transform .35s var(--ease);}
.lightbox-overlay.open img, .lightbox-overlay.open video{transform:scale(1);}
.lightbox-close{position:absolute; top:28px; right:32px; width:32px; height:32px; border:none; background:none; color:rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .3s var(--ease);}
.lightbox-close:hover{color:#fff;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; z-index:1; border:none; background:none; color:rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .3s var(--ease);}
.lightbox-nav:hover{color:#fff;}
.lightbox-prev{left:8px;}
.lightbox-next{right:8px;}
.lightbox-counter{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.05em; color:rgba(255,255,255,0.4);}
.lightbox-overlay:not(.is-gallery) .lightbox-nav, .lightbox-overlay:not(.is-gallery) .lightbox-counter{display:none;}
@media (max-width:640px){
  .lightbox-nav{width:44px; height:44px;}
  .lightbox-prev{left:2px;}
  .lightbox-next{right:2px;}
}

/* ---------- ticket bottom-sheet: on narrow screens (see the .buy-panel
   media query below) the same #buyPanel form used inline on desktop is
   toggled into a modal via body.ticket-sheet-open; these base rules stay
   inert (display:none / invisible) above that breakpoint. ---------- */
.sheet-backdrop{position:fixed; inset:0; z-index:79; background:rgba(8,5,14,0.6); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s var(--ease), visibility 0s linear .3s;}
body.ticket-sheet-open .sheet-backdrop{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s var(--ease), visibility 0s linear;}
.sheet-handle{display:none;}
.sheet-close{display:none; position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; align-items:center; justify-content:center; border:1px solid var(--line-strong); background:var(--paper); color:var(--muted); cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease);}
.sheet-close:hover{border-color:var(--purple); color:var(--purple-light);}

.buy-panel{position:sticky; top:96px; background:var(--surface); border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);}
.buy-head{padding:22px 26px; border-bottom:1px solid var(--line);}
.buy-head .lbl{font-size:0.7rem; font-weight:700; letter-spacing:0.08em; color:var(--muted-2); text-transform:uppercase;}
.buy-head h3{font-size:1.05rem; color:var(--ink); margin-top:6px; line-height:1.3;}
.poster-tiers{padding:6px 26px 0;}
.tier{padding:16px 0; margin:0; border-bottom:1px solid var(--line);}
.tier:last-of-type{border-bottom:none;}
.tier-row{display:flex; justify-content:space-between; align-items:center; gap:14px;}
.tier .tn{font-weight:700; font-size:0.92rem;}
.tier .td{font-size:0.76rem; color:var(--muted-2); margin-top:2px;}
.tier .tp{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.86rem; color:var(--ink); white-space:nowrap; margin-top:6px;}
.qty{display:flex; align-items:center; gap:0; flex:none; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden;}
.qty button{width:28px; height:28px; border:none; background:var(--paper); font-weight:700; font-size:0.95rem; line-height:1; cursor:pointer;}
.qty .n{font-family:'JetBrains Mono',monospace; font-weight:700; width:30px; text-align:center; font-size:0.86rem; border-left:1px solid var(--line-strong); border-right:1px solid var(--line-strong); height:28px; display:flex; align-items:center; justify-content:center;}
.poster-summary{padding:18px 26px; background:var(--paper); margin:12px 0 0; font-size:0.88rem; border-top:1px solid var(--line);}
.poster-summary .r{display:flex; justify-content:space-between; padding:3px 0; color:var(--muted);}
.poster-summary .r.total{color:var(--ink); font-weight:800; font-size:1.05rem; padding-top:10px; margin-top:6px; border-top:1px solid var(--line-strong);}
.poster-summary .r.total .v{font-family:'JetBrains Mono',monospace;}
.poster-foot{padding:20px 26px 24px;}
.secure-note{display:flex; align-items:center; gap:7px; justify-content:center; font-size:0.76rem; color:var(--muted-2); margin-top:14px;}
.pay-icons{display:flex; gap:10px; justify-content:center; margin-top:14px;}

.event-full-section{margin-top:44px;}
.event-content h2, .event-full-section h2{font-size:1.3rem; margin-bottom:18px;}
.about-text{font-size:1.02rem; max-width:64ch;}
.about-text + .about-text{margin-top:14px;}
.tag-list{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.tag-pill{font-size:0.78rem; font-weight:600; padding:6px 13px; border-radius:100px; background:var(--purple-tint); color:var(--purple-deep);}

/* ---------- content column: plain editorial text, hairline divider, no card chrome ---------- */
.content-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px;}
.icon-row{display:flex; gap:6px;}
.divider{height:1px; background:var(--line); margin:40px 0;}
.organizer-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.organizer-avatar{width:44px; height:44px; border-radius:10px; background:linear-gradient(150deg,var(--purple-light),var(--purple-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.92rem; flex:none;}
.organizer-avatar-lg{width:76px; height:76px; border-radius:18px; font-size:1.4rem;}
.organizer-row h3{font-size:0.96rem;}
.organizer-row p{font-size:0.82rem; margin-top:2px;}
.organizer-link{color:inherit; text-decoration:none; transition:opacity .2s var(--ease);}
.organizer-link:hover{opacity:0.75;}
.follow-btn{margin-left:auto; padding:8px 18px; border-radius:10px; border:1px solid var(--line-strong); font-weight:700; font-size:0.82rem; background:var(--paper); transition:all .25s var(--ease); flex:none;}
.follow-btn:hover{border-color:var(--purple); color:var(--purple);}

/* ---------- reviews & ratings (event.php) — the star picker is a classic
   CSS-only radio trick: options run 5..1 in the DOM (flex row-reverse
   redraws them 1..5 on screen) so a plain ~ sibling selector can light up
   a star and everything visually to its left without any JS. ---------- */
.review-stars{display:inline-flex; gap:2px; color:#FFC107; font-size:1rem; letter-spacing:1px;}
.review-stars .empty{color:var(--line-strong);}
.review-summary{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.review-summary .avg{font-size:1.5rem; font-weight:800;}
.review-summary .review-stars{font-size:1.2rem;}
.star-picker{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px;}
.star-picker input{position:absolute; opacity:0; pointer-events:none;}
.star-picker label{font-size:1.9rem; line-height:1; color:var(--line-strong); cursor:pointer; transition:color .12s var(--ease);}
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label{color:#FFC107;}
.review-form{margin-bottom:28px; max-width:460px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px;}
.review-row{padding:18px 0; border-top:1px solid var(--line);}
.review-row:first-of-type{border-top:none;}
.review-row-head{display:flex; align-items:center; gap:12px;}
.review-row-head .who{font-weight:700; font-size:0.92rem;}
.review-row-head .when{margin-left:auto; font-size:0.78rem; color:var(--muted-2);}
.review-comment{margin-top:8px; color:var(--muted); font-size:0.92rem; max-width:64ch;}

/* ---------- waitlist (event.php) — sits where a sold-out tier's qty
   stepper would be. The buttons are submit buttons inside the checkout form
   (see the formaction note in event.php), so they're styled like the small
   pill buttons rather than as full-width form actions. ---------- */
.waitlist-box{display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; flex:none; max-width:55%;}
.waitlist-state{font-size:0.76rem; font-weight:700; color:var(--purple-light);}
.waitlist-btn{font:inherit; font-size:0.78rem; font-weight:700; padding:6px 13px; border-radius:100px; border:1px solid var(--line-strong); background:transparent; color:var(--muted); cursor:pointer; transition:all .2s var(--ease);}
.waitlist-btn:hover{border-color:var(--purple); color:var(--purple-light);}
.waitlist-btn.primary{background:var(--purple); border-color:var(--purple); color:#fff;}
.waitlist-btn.primary:hover{background:var(--purple-deep); border-color:var(--purple-deep); color:#fff;}
.event-dark-shell .alert-success{background:rgba(220,38,38,0.12); color:#FFB4AA; border-color:rgba(220,38,38,0.3);}

/* ---------- event gallery: photos and videos in their own separate,
   labeled sections (event.php) — both feed into the same lightbox's
   Prev/Next via [data-gallery-index], in this same page order. A
   featured lead photo (2x2) plus a smaller supporting grid reads as
   curated rather than a flat uniform grid; Outfit on the sub-headers
   matches the serif touch already used for headings elsewhere on the
   site (see the classic-page pages) instead of another plain sans h3. ---------- */
.gallery-section{margin-bottom:36px;}
.gallery-section:last-child{margin-bottom:0;}
.gallery-section-head{display:flex; align-items:baseline; gap:12px; margin-bottom:18px;}
.gallery-section-head h3{font-family:'Outfit',serif; font-weight:600; font-size:1.1rem; margin:0; letter-spacing:-0.01em;}
.gallery-section-head .count{font-size:0.76rem; color:var(--muted-2); font-family:'JetBrains Mono',monospace; letter-spacing:0.03em;}

.photo-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:100px; gap:10px;}
.photo-item{display:block; position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); padding:0; margin:0; cursor:zoom-in; width:100%; transition:border-color .4s var(--ease);}
.photo-item.featured{grid-column:span 2; grid-row:span 2;}
.photo-item img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.92); transition:transform .7s var(--ease), filter .5s var(--ease);}
.photo-item:hover{border-color:var(--line-strong);}
.photo-item:hover img{transform:scale(1.035); filter:saturate(1.05);}
.photo-item .expand-ic{position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; background:rgba(8,5,14,0.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transform:translateY(-4px); transition:opacity .3s var(--ease), transform .3s var(--ease);}
.photo-item:hover .expand-ic{opacity:1; transform:translateY(0);}

.video-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px;}
.video-item{display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface); border:1px solid var(--line); padding:0; margin:0; cursor:pointer; width:100%; transition:border-color .4s var(--ease);}
.video-item:hover{border-color:var(--line-strong);}
.video-item video{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; filter:saturate(0.92) brightness(0.92); transition:transform .7s var(--ease);}
.video-item:hover video{transform:scale(1.035);}
.video-item::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.5) 100%); pointer-events:none;}
.video-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);}
.video-play svg{margin-left:2px;}
.video-item:hover .video-play{transform:translate(-50%,-50%) scale(1.08); background:var(--purple); border-color:var(--purple);}
.video-duration{position:absolute; bottom:12px; right:12px; font-family:'JetBrains Mono',monospace; font-size:0.68rem; font-weight:600; letter-spacing:0.03em; color:rgba(255,255,255,0.85);}
@media (max-width:600px){
  .photo-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:130px;}
  .photo-item.featured{grid-column:span 2; grid-row:span 1;}
}

.lineup-row{display:flex; gap:24px; flex-wrap:wrap;}
.lineup-item{display:flex; align-items:center; gap:10px;}
.avatar{width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; background:var(--purple-tint-2); color:var(--purple-deep);}
.lineup-item .n{font-size:0.9rem; font-weight:700;}
.lineup-item .r{font-size:0.76rem; color:var(--muted-2);}

.plain-row{display:flex; align-items:flex-start; gap:16px;}
.plain-row .ic{width:40px; height:40px; border-radius:10px; background:var(--purple-tint); color:var(--purple); display:flex; align-items:center; justify-content:center; flex:none;}
.plain-row .ic.mono{font-weight:700; font-size:1.05rem; border-radius:50%;}
.plain-row h3{font-size:1rem;}
.plain-row p{margin-top:3px; font-size:0.9rem;}
.plain-row .side{margin-left:auto; flex:none;}

.faq-item{border-bottom:1px solid var(--line); padding:16px 0;}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-q{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:0.94rem; cursor:pointer;}
.faq-a{font-size:0.9rem; margin-top:10px; max-width:60ch;}
.faq-item:not(.open) .faq-a{display:none;}
.faq-item.open .faq-q svg{transform:rotate(90deg);}

.review{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.review:last-child{border-bottom:none;}
.review .body{flex:1;}
.review .head{display:flex; align-items:center; gap:10px;}
.review .name{font-weight:700; font-size:0.9rem;}
.stars{color:var(--purple); font-size:0.82rem; letter-spacing:1px;}
.review p{font-size:0.9rem; margin-top:6px;}

.icon-btn{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:var(--muted); border:1px solid var(--line-strong); background:var(--surface); transition:all .25s var(--ease);}
.icon-btn:hover{border-color:var(--purple); color:var(--purple); transform:translateY(-2px); box-shadow:var(--shadow);}
.icon-btn:hover{background:var(--purple-tint); color:var(--purple-deep);}
.icon-btn:disabled{opacity:0.6; cursor:default; transform:none;}

/* ---------- like button: pill-shaped so the count sits beside the heart ---------- */
.icon-btn.like-btn{width:auto; padding:0 14px; gap:6px; border-radius:100px;}
.like-count{font-family:'JetBrains Mono',monospace; font-size:0.82rem; font-weight:700;}
.like-btn.liked{color:var(--purple-deep); border-color:var(--purple); background:var(--purple-tint);}
.like-btn.liked svg path{fill:currentColor;}

/* ---------- share popover: desktop fallback when the native share sheet isn't available ---------- */
.share-wrap{position:relative;}
.share-popover{position:absolute; top:calc(100% + 8px); right:0; z-index:20; min-width:180px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;}
.share-popover.open{opacity:1; visibility:visible; transform:translateY(0); transition:opacity .2s var(--ease), transform .2s var(--ease);}
.share-option{display:block; width:100%; text-align:left; padding:9px 12px; border-radius:8px; border:none; background:none; font-size:0.86rem; font-weight:600; color:var(--ink); cursor:pointer; font-family:inherit;}
.share-option:hover{background:var(--purple-tint); color:var(--purple-deep);}

/* ============ CHECKOUT ============ */
.checkout-card{border:1px solid var(--line); border-radius:16px; padding:20px 22px;}
.checkout-line{display:flex; justify-content:space-between; padding:9px 0; font-size:0.92rem; color:var(--muted); border-bottom:1px solid var(--line);}
.checkout-line:last-child{border-bottom:none;}
.checkout-line.total{color:var(--ink); font-weight:700; font-size:1rem; padding-top:14px; margin-top:4px; border-top:1px solid var(--line-strong); border-bottom:none;}
.hidden{display:none !important;}

/* ---------- checkout mobile-money payment widget ---------- */
.pay-waiting{text-align:center; padding:32px 0;}
.pay-spinner{width:36px; height:36px; margin:0 auto 18px; border-radius:50%; border:3px solid var(--line-strong); border-top-color:var(--purple); animation:pay-spin 0.8s linear infinite;}
@keyframes pay-spin{to{transform:rotate(360deg);}}

/* issued ticket (order confirmation / my-tickets) */
.ticket-issued{border:1px solid var(--line); border-radius:16px; padding:18px 20px; background:var(--surface);}
.ticket-issued-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;}
.ticket-issued-tier{font-weight:700; font-size:0.98rem;}
.ticket-issued-event{font-size:0.84rem; color:var(--muted-2); margin-top:2px;}
.ticket-issued-divider{border-top:2px dashed var(--line-strong); margin:16px 0;}
.ticket-issued-qr{display:flex; justify-content:center; padding:6px; background:#fff; border-radius:10px; width:140px; margin:0 auto 14px;}
.ticket-issued-code{font-size:1.1rem; font-weight:600; letter-spacing:0.06em; text-align:center;}
.ticket-issued-hint{font-size:0.8rem; color:var(--muted-2); margin-top:6px; text-align:center;}

/* ============ CHECK-IN DESK ============ */
.checkin-stat{text-align:center; padding:24px; margin-top:18px; background:var(--purple-tint); border-radius:16px;}
.checkin-stat .num{display:block; font-size:2.2rem; font-weight:700; color:var(--purple);}
.checkin-stat .lbl{display:block; margin-top:4px; font-size:0.85rem; color:var(--muted);}
.checkin-ticket-card{border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:12px;}
#code{text-transform:uppercase;}
.checkin-scan-view{margin-top:12px;}
.checkin-scan-view video{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; background:#000; display:block;}

/* ============ ADMIN ============ */
.sec-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap;}

.admin-tabs{display:inline-flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:4px; margin-bottom:28px;}
.admin-tab{padding:9px 20px; border-radius:100px; font-size:0.86rem; font-weight:600; color:var(--muted);}
.admin-tab:hover{color:var(--ink);}
.admin-tab.active{background:var(--purple); color:#fff; font-weight:700;}

.admin-head{margin-bottom:26px;}
.admin-head .kicker{margin-bottom:8px;}
.admin-head h1{font-size:2rem;}
.admin-head p{margin-top:8px; font-size:0.98rem;}
.admin-head.sec-top h1{margin:8px 0 0;}

.admin-stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-top:0;}
.admin-stat{border:1px solid var(--line); border-radius:16px; padding:24px 20px; background:var(--surface); box-shadow:var(--shadow); transition:transform .2s var(--ease-back,ease), box-shadow .3s ease;}
.admin-stat:hover{transform:translateY(-2px); box-shadow:0 20px 40px -20px rgba(28,21,38,0.28);}
.admin-stat .num{display:block; font-size:1.9rem; font-weight:700; font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; background:linear-gradient(135deg, var(--purple-deep), var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.admin-stat .num .of{font-size:1.1rem; color:var(--muted-2); -webkit-text-fill-color:var(--muted-2);}
.admin-stat .lbl{display:block; margin-top:6px; font-size:0.82rem; color:var(--muted); font-weight:600;}

.admin-revenue-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px;}
.admin-revenue-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px 30px;}
.admin-revenue-card h3{font-size:1.02rem; margin:0;}
.admin-revenue-card .sub{margin:4px 0 18px; font-size:0.84rem; color:var(--muted-2);}

.admin-table-wrap{overflow-x:auto; margin-top:0; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);}
.admin-table{width:100%; border-collapse:collapse; font-size:0.88rem; white-space:nowrap;}
.admin-table th{text-align:left; padding:13px 16px; background:var(--purple-tint); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted-2); font-weight:700;}
.admin-table td{padding:12px 16px; border-top:1px solid var(--line); vertical-align:middle; white-space:normal;}
.admin-table select{padding:6px 10px; border-radius:8px; border:1.5px solid var(--line-strong); font-size:0.85rem; background:var(--paper); color:var(--ink);}
.admin-table .row-user{display:flex; align-items:center; gap:12px; font-weight:700;}

.tag-pill-muted{background:var(--line); color:var(--muted);}
.tag-pill-dark{background:var(--ink); color:#fff;}

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

/* ============ AUTH PAGES (signup / login / password reset) ============ */
.auth-section{position:relative; padding:56px 0 96px; display:flex; justify-content:center;}
/* ambient glow only where this section opts into the dark-page treatment
   (login/signup/forgot/reset) — every other .auth-section reuse (event.php's
   "not found" state, checkin.php, order.php, ...) stays untouched, since
   none of those set body.dark-page. */
body.dark-page .auth-section::before{content:''; position:absolute; top:-180px; left:50%; transform:translateX(-50%); width:700px; height:460px; background:radial-gradient(circle, rgba(239,68,68,0.24), transparent 65%); pointer-events:none; animation:drift 10s ease-in-out infinite alternate; z-index:0;}
.auth-card{position:relative; z-index:2; width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:36px 32px; box-shadow:var(--shadow-lg), inset 0 1px 0 var(--inset-hi);}
.auth-card .logo{justify-content:center; margin-bottom:2px;}
.auth-card h1{font-size:1.5rem; text-align:center; margin-top:18px;}
.auth-card .sub{text-align:center; margin-top:8px; font-size:0.92rem;}
.field{margin-top:18px;}
.field label{display:block; font-size:0.82rem; font-weight:700; margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; padding:11px 14px; border:1.5px solid var(--line-strong); border-radius:10px; font:inherit; font-size:0.95rem; background:var(--paper); color:var(--ink);}
.field textarea{resize:vertical; min-height:90px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--purple);}
.field-hint{font-size:0.78rem; color:var(--muted-2); margin-top:5px;}
.field-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field input[type="file"]{border:1.5px dashed var(--line-strong); border-radius:10px; padding:12px; background:var(--paper); font-size:0.86rem; color:var(--muted); cursor:pointer;}
.field input[type="file"]::file-selector-button{margin-right:12px; padding:8px 14px; border-radius:8px; border:none; background:var(--purple); color:#fff; font-weight:600; font-size:0.85rem; cursor:pointer;}
.banner-preview{margin-bottom:10px;}
.banner-preview img{width:100%; max-height:160px; object-fit:cover; border-radius:10px; border:1px solid var(--line); display:block;}
.banner-preview .remove-banner{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:0.85rem; color:var(--muted); cursor:pointer;}
.banner-preview .remove-banner input{accent-color:var(--purple);}

/* organizer event form — existing gallery items, each removable via checkbox */
.gallery-manage-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-bottom:12px;}
.gallery-manage-item{position:relative; display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line); aspect-ratio:1; cursor:pointer;}
.gallery-manage-item img, .gallery-manage-item video{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-manage-badge{position:absolute; top:6px; left:6px; font-size:0.65rem; font-weight:700; padding:3px 8px; border-radius:100px; background:rgba(0,0,0,0.55); color:#fff;}
.gallery-manage-remove{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; font-size:0.78rem; font-weight:600; color:#fff; background:rgba(28,21,38,0); opacity:0; transition:opacity .15s ease, background .15s ease;}
.gallery-manage-item:hover .gallery-manage-remove{opacity:1; background:rgba(28,21,38,0.6);}
.gallery-manage-remove input{accent-color:var(--danger);}
.gallery-manage-item:has(.gallery-manage-remove input:checked){outline:2px solid var(--danger);}
.gallery-manage-item:has(.gallery-manage-remove input:checked) .gallery-manage-remove{opacity:1; background:rgba(179,38,30,0.55);}

/* organizer event form — repeatable ticket type rows */
.tier-form-row{display:grid; grid-template-columns:1.2fr 1.2fr 0.8fr 0.8fr auto; gap:10px; align-items:end; margin-top:18px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.tier-form-row .field{margin-top:0;}
.tier-form-row .remove-tier{align-self:center; width:34px; height:34px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); font-size:1.1rem; line-height:1;}
.tier-form-row .remove-tier:hover{color:var(--danger); border-color:var(--danger-border); background:var(--danger-bg);}

/* organizer "my events" list */
.my-events-list{display:flex; flex-direction:column; gap:14px;}
.my-event-row{display:flex; align-items:center; gap:18px; border:1px solid var(--line); border-radius:16px; padding:18px 20px;}
.my-event-icon{width:48px; height:48px; border-radius:12px; background:var(--purple-tint); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex:none;}
.my-event-info{flex:1; min-width:0;}
.my-event-info h3{font-size:1.02rem;}
.my-event-info p{margin-top:3px; font-size:0.88rem;}

/* organizer withdrawal card (my-events.php) */
.payout-card{border:1px solid var(--line); border-radius:18px; padding:22px 24px; background:var(--surface); box-shadow:var(--shadow);}
.payout-card-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.payout-balance .lbl{display:block; font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-2);}
.payout-balance .num{display:block; margin-top:4px; font-family:'JetBrains Mono',monospace; font-size:1.7rem; font-weight:700; color:var(--purple-deep);}
.payout-balance .sub{display:block; margin-top:3px; font-size:0.8rem; color:var(--warn);}
.payout-pending-list{margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px;}
.payout-pending-row{display:flex; align-items:center; justify-content:space-between; font-size:0.88rem; gap:12px;}
.payout-withdraw-form{overflow:hidden; max-height:0; opacity:0; margin-top:0; transition:max-height .4s var(--ease), opacity .3s var(--ease), margin-top .4s var(--ease);}
.payout-withdraw-form.open{max-height:340px; opacity:1; margin-top:20px; padding-top:20px; border-top:1px solid var(--line);}
.payout-withdraw-form .field{margin-bottom:14px;}
.payout-withdraw-form .field:last-of-type{margin-bottom:18px;}
.alert{padding:12px 16px; border-radius:10px; font-size:0.88rem; margin-top:18px;}
.alert-error{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-border);}
.alert-success{background:var(--purple-tint); color:var(--purple-deep); border:1px solid var(--purple-tint-2);}
.alert-warn{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-border);}
.auth-foot{text-align:center; margin-top:22px; font-size:0.9rem; color:var(--muted);}
.auth-foot a{color:var(--purple-deep); font-weight:700;}
.auth-foot + .auth-foot{margin-top:8px;}

@media (max-width:980px){
  .event-layout{grid-template-columns:1fr;}
  .buy-panel{position:static;}
  .event-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
  .ah-hero-grid{grid-template-columns:1fr;}
  .glow-frame img{height:300px;}
  .story-grid{grid-template-columns:1fr; gap:32px;}
  .principle-grid{grid-template-columns:1fr;}
  .moment-strip{grid-template-columns:1fr;}
  .moment-strip .stack{flex-direction:row;}
  .stat-band{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 18px;}
  .picks-row{padding:4px 18px 12px; margin:0 -18px;}
  .event-hero{min-height:240px;}
  .event-hero-inner{padding:22px;}
  .event-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .field-grid-2{grid-template-columns:1fr;}
  .tier-form-row{grid-template-columns:1fr; gap:12px;}
  .tier-form-row .remove-tier{justify-self:end;}
  .my-event-row{flex-wrap:wrap;}
  .ah-hero{padding:44px 0 10px;}
  .ah-section{padding:56px 0;}
  .moment-strip .stack{flex-direction:column;}
}

/* placed after the 980px/640px blocks above so it wins the cascade over
   the 980px query's ".buy-panel{position:static}" at equal specificity */
@media (max-width:920px){
  /* !important throughout defeats .reveal's own opacity/transform/transition
     (scroll-reveal animation, applied to this same element) exactly like the
     dark-page override above does for the same clash. The transition itself
     must be forced too, not just the transform value — a still-active
     .reveal transition outranks even an !important transform declaration
     (CSS transitions sit above !important in the cascade), which otherwise
     leaves the sheet stuck between its open/closed positions. */
  .buy-panel{
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    max-height:88vh; overflow-y:auto; border-radius:20px 20px 0 0;
    opacity:1 !important;
    transform:translateY(100%) !important;
    transition:transform .32s cubic-bezier(.16,1,.3,1) !important;
  }
  body.ticket-sheet-open .buy-panel, .buy-panel:target{transform:translateY(0) !important;}
  body.ticket-sheet-open{overflow:hidden;}
  .sheet-handle{display:block; width:36px; height:4px; border-radius:4px; background:var(--line-strong); margin:10px auto 0;}
  .buy-head{padding-top:16px; padding-right:56px;}
  .sheet-close{display:flex;}
}

/* =====================================================================
   ADMIN DASHBOARD SHELL — deliberately separate visual language from the
   public marketing site: dense, sans-only, data-focused, restrained.
   ===================================================================== */
.admin-body{margin:0; background:var(--admin-bg); color:var(--ink); font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
.admin-shell{display:flex; min-height:100vh;}

/* Admin-specific token refinements — layered on the site tokens, not replacing them */
:root{
  --admin-bg:#FAFAFB;
  --admin-sidebar-bg:#1C1113;
  --admin-sidebar-line:rgba(255,255,255,0.08);
  --admin-radius:14px;
  --admin-shadow:0 1px 2px rgba(20,10,35,0.04), 0 8px 24px -14px rgba(20,10,35,0.12);
  --admin-shadow-lifted:0 4px 10px rgba(20,10,35,0.06), 0 20px 40px -20px rgba(20,10,35,0.22);
  --admin-ease:cubic-bezier(.16,.8,.24,1);
}

/* Progress bar (perceived-speed cue on navigation) */
.admin-progress{position:fixed; top:0; left:0; height:2.5px; width:0; background:linear-gradient(90deg, var(--purple-light), var(--purple)); z-index:200; opacity:0; pointer-events:none;}

/* Whole-page entrance — a load-time settle, not a scroll-gated reveal */
@keyframes adminContentIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.admin-content{animation:adminContentIn .28s var(--admin-ease) both;}

.admin-sidebar{width:264px; flex:none; background:var(--admin-sidebar-bg); color:rgba(255,255,255,0.82); display:flex; flex-direction:column; padding:16px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden; transition:width .28s var(--admin-ease);}
.admin-sidebar.collapsed{width:76px;}
.admin-logo-row{display:flex; align-items:center; gap:4px; padding:6px 6px 18px;}
.admin-logo{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:1.0rem; text-decoration:none; min-width:0; flex:1;}
.admin-logo-mark, .admin-logo svg{flex:none;}
.admin-logo-text{white-space:nowrap; overflow:hidden; transition:opacity .2s var(--admin-ease), width .28s var(--admin-ease); opacity:1;}
.admin-logo em{font-style:normal; font-weight:600; color:rgba(255,255,255,0.5); margin-left:2px;}
.admin-collapse-toggle{flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.65); transition:background .18s ease, color .18s ease, transform .28s var(--admin-ease);}
.admin-collapse-toggle:hover{background:rgba(255,255,255,0.14); color:#fff;}
.admin-sidebar.collapsed .admin-collapse-toggle svg{transform:rotate(180deg);}
.admin-sidebar.collapsed .admin-logo-text{opacity:0; width:0;}

.admin-nav{flex:1; display:flex; flex-direction:column; gap:1px;}
.admin-nav-label{font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:rgba(255,255,255,0.34); padding:16px 12px 7px; white-space:nowrap; overflow:hidden;}
.admin-nav-label span{transition:opacity .15s ease;}
.admin-sidebar.collapsed .admin-nav-label{padding-left:0; text-align:center;}
.admin-sidebar.collapsed .admin-nav-label span{opacity:0;}
.admin-nav-item{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px; font-size:0.865rem; font-weight:600; color:rgba(255,255,255,0.72); text-decoration:none; transition:background .16s ease, color .16s ease; position:relative;}
.admin-nav-item svg{flex:none; opacity:0.75; transition:opacity .16s ease, color .16s ease;}
.admin-nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
.admin-nav-item:hover svg{opacity:1;}
.admin-nav-item.active{background:rgba(239,68,68,0.16); color:#fff; box-shadow:inset 2.5px 0 0 var(--purple-light);}
.admin-nav-item.active svg{opacity:1; color:var(--purple-light);}
.admin-nav-item-label{white-space:nowrap; overflow:hidden; transition:opacity .15s ease;}
.admin-sidebar.collapsed .admin-nav-item{justify-content:center; padding:9px;}
.admin-sidebar.collapsed .admin-nav-item{box-shadow:none;}
.admin-sidebar.collapsed .admin-nav-item.active{background:rgba(239,68,68,0.22);}
.admin-sidebar.collapsed .admin-nav-item-label, .admin-sidebar.collapsed .admin-nav-badge{display:none;}
.admin-nav-badge{margin-left:auto; background:rgba(255,255,255,0.16); color:#fff; font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:100px; font-family:'JetBrains Mono',monospace; flex:none;}
.admin-nav-item.active .admin-nav-badge{background:rgba(255,255,255,0.24);}
.admin-nav-exit{margin-top:8px; border-top:1px solid var(--admin-sidebar-line); padding-top:14px;}
.admin-sidebar-backdrop{display:none;}

.admin-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.admin-topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px; padding:13px 28px; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.admin-sidebar-toggle{display:none; flex:none; width:38px; height:38px; align-items:center; justify-content:center; border-radius:10px; background:transparent; color:var(--ink); transition:background .16s ease;}
.admin-sidebar-toggle:hover{background:var(--purple-tint);}
.admin-breadcrumb{display:flex; align-items:center; gap:7px; font-size:0.92rem; font-weight:700; color:var(--muted-2); white-space:nowrap;}
.admin-breadcrumb .current{color:var(--ink);}
.admin-breadcrumb-sep{color:var(--line-strong); flex:none;}
.admin-search{flex:1; max-width:420px; display:flex; align-items:center; gap:10px; padding:8px 16px; border-radius:100px; background:var(--paper); border:1px solid var(--line); transition:border-color .18s ease, box-shadow .18s ease;}
.admin-search:focus-within{border-color:var(--purple-light); box-shadow:0 0 0 3px var(--purple-tint);}
.admin-search svg{color:var(--muted-2); flex:none;}
.admin-search input{border:none; outline:none; background:none; flex:1; font:inherit; font-size:0.86rem; color:var(--ink);}

.admin-profile{margin-left:auto; position:relative;}
.admin-profile-btn{display:flex; align-items:center; gap:10px; padding:6px 8px 6px 6px; border-radius:100px; background:transparent; border:1px solid transparent; transition:background .16s ease, border-color .16s ease;}
.admin-profile-btn:hover, .admin-profile.open .admin-profile-btn{background:var(--paper); border-color:var(--line);}
.admin-avatar{width:32px; height:32px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.76rem; font-weight:700; flex:none;}
.admin-profile-text{display:flex; flex-direction:column; align-items:flex-start; line-height:1.3;}
.admin-topbar-name{font-weight:700; font-size:0.85rem; color:var(--ink);}
.admin-topbar-role{font-size:0.72rem; color:var(--muted-2); font-weight:600;}
.admin-profile-chev{color:var(--muted-2); flex:none; transition:transform .2s var(--admin-ease);}
.admin-profile.open .admin-profile-chev{transform:rotate(180deg);}
.admin-profile-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:180px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--admin-shadow-lifted); padding:6px; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .18s var(--admin-ease), transform .18s var(--admin-ease); z-index:30;}
.admin-profile.open .admin-profile-menu{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.admin-profile-menu a{display:block; padding:9px 12px; border-radius:8px; font-size:0.86rem; font-weight:600; color:var(--ink); text-decoration:none; transition:background .14s ease;}
.admin-profile-menu a:hover{background:var(--purple-tint);}

.admin-content{flex:1; padding:26px 32px 60px;}

.admin-page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap;}
.admin-page-head h1{font-size:1.5rem;}
.admin-page-head p{margin-top:5px; font-size:0.9rem; color:var(--muted);}

/* Compact clickable status-count strip (Events, etc.) — doubles as filter + summary */
.admin-mini-stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:20px;}
.admin-mini-stat{display:block; border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; background:var(--surface); text-decoration:none; transition:border-color .18s ease, background .18s ease, transform .18s var(--admin-ease); opacity:0; animation:adminRowIn .35s var(--admin-ease) both;}
.admin-mini-stat:nth-child(1){animation-delay:.02s;} .admin-mini-stat:nth-child(2){animation-delay:.05s;} .admin-mini-stat:nth-child(3){animation-delay:.08s;}
.admin-mini-stat:nth-child(4){animation-delay:.11s;} .admin-mini-stat:nth-child(5){animation-delay:.14s;} .admin-mini-stat:nth-child(6){animation-delay:.17s;}
.admin-mini-stat:nth-child(7){animation-delay:.20s;}
.admin-mini-stat:hover{border-color:var(--purple-light); transform:translateY(-2px); background:var(--purple-tint);}
.admin-mini-stat.active{border-color:var(--purple); background:var(--purple-tint);}
.admin-mini-stat .n{display:block; font-family:'JetBrains Mono',monospace; font-size:1.3rem; font-weight:800; color:var(--ink);}
.admin-mini-stat .l{display:block; margin-top:2px; font-size:0.76rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em;}
.admin-mini-stat.active .n{color:var(--purple-deep);}

.admin-kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;}
.admin-kpi-card{border:1px solid var(--line); border-radius:var(--admin-radius); padding:20px 22px; background:var(--surface); box-shadow:var(--admin-shadow); transition:box-shadow .25s var(--admin-ease), border-color .25s var(--admin-ease), transform .25s var(--admin-ease); opacity:0; animation:adminRowIn .4s var(--admin-ease) both;}
.admin-kpi-card:hover{box-shadow:var(--admin-shadow-lifted); border-color:var(--line-strong); transform:translateY(-2px);}
.admin-kpi-grid .admin-kpi-card:nth-child(1){animation-delay:.04s;} .admin-kpi-grid .admin-kpi-card:nth-child(2){animation-delay:.08s;}
.admin-kpi-grid .admin-kpi-card:nth-child(3){animation-delay:.12s;} .admin-kpi-grid .admin-kpi-card:nth-child(4){animation-delay:.16s;}
.admin-kpi-grid .admin-kpi-card:nth-child(5){animation-delay:.20s;} .admin-kpi-grid .admin-kpi-card:nth-child(6){animation-delay:.24s;}
.admin-kpi-grid .admin-kpi-card:nth-child(7){animation-delay:.28s;} .admin-kpi-grid .admin-kpi-card:nth-child(8){animation-delay:.32s;}
.admin-kpi-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.admin-kpi-ic{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none; transition:transform .3s var(--admin-ease-back, var(--admin-ease));}
.admin-kpi-card:hover .admin-kpi-ic{transform:scale(1.08) rotate(-4deg);}
.admin-kpi-card .lbl{font-size:0.74rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em;}
.admin-kpi-card .num{display:block; margin-top:14px; font-size:1.68rem; font-weight:800; font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; color:var(--ink);}
.admin-kpi-card .sub{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:0.78rem; color:var(--muted-2); flex-wrap:wrap;}
.admin-kpi-trend{display:inline-flex; align-items:center; gap:3px; font-weight:700; font-family:'JetBrains Mono',monospace; font-size:0.76rem; padding:1px 7px 1px 5px; border-radius:100px;}
.admin-kpi-trend svg{flex:none;}
.admin-kpi-trend.up{color:var(--success); background:var(--success-bg);}
.admin-kpi-trend.down{color:var(--danger); background:var(--danger-bg);}
.admin-kpi-trend.down svg{transform:rotate(180deg);}

.admin-card{border:1px solid var(--line); border-radius:var(--admin-radius); background:var(--surface); box-shadow:var(--admin-shadow); padding:22px;}
.admin-grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:start;}

.admin-filter-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px;}
.admin-filter-bar input[type=text], .admin-filter-bar select{padding:9px 14px; border-radius:10px; border:1.5px solid var(--line-strong); background:var(--surface); font:inherit; font-size:0.85rem; color:var(--ink); transition:border-color .16s ease, box-shadow .16s ease;}
.admin-filter-bar input[type=text]:focus, .admin-filter-bar select:focus{outline:none; border-color:var(--purple-light); box-shadow:0 0 0 3px var(--purple-tint);}
.admin-filter-bar .spacer{flex:1;}

.admin-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--admin-radius); box-shadow:var(--admin-shadow); background:var(--surface);}
.admin-table{width:100%; border-collapse:collapse; font-size:0.86rem;}
.admin-table th{text-align:left; padding:12px 16px; background:var(--paper); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted-2); font-weight:700; white-space:nowrap; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1;}
.admin-table td{padding:12px 16px; border-top:1px solid var(--line); vertical-align:middle;}
.admin-table tbody tr{transition:background .12s ease;}
.admin-table tbody tr:hover td{background:var(--paper);}
.admin-table select{padding:6px 10px; border-radius:8px; border:1.5px solid var(--line-strong); font-size:0.83rem; background:var(--paper); color:var(--ink);}
.admin-table .row-user{display:flex; align-items:center; gap:10px; font-weight:700;}
.admin-table .muted{color:var(--muted-2);}
.admin-table a.link{color:var(--purple); font-weight:700; transition:color .14s ease;}
.admin-table a.link:hover{color:var(--purple-deep);}

.admin-badge{display:inline-flex; align-items:center; gap:5px; font-size:0.74rem; font-weight:700; padding:4px 11px; border-radius:100px; text-transform:uppercase; letter-spacing:0.02em;}
.admin-badge-success{background:var(--success-bg); color:var(--success); border:1px solid var(--success-border);}
.admin-badge-warn{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-border);}
.admin-badge-danger{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-border);}
.admin-badge-muted{background:var(--line); color:var(--muted);}
.admin-badge-purple{background:var(--purple-tint); color:var(--purple-deep); border:1px solid var(--purple-tint-2);}
.admin-badge-dot{width:6px; height:6px; border-radius:50%; background:var(--warn); animation:adminPulseDot 1.8s ease-in-out infinite;}
@keyframes adminPulseDot{0%,100%{box-shadow:0 0 0 0 rgba(138,97,0,0.35);} 50%{box-shadow:0 0 0 4px rgba(138,97,0,0);}}
.admin-row-attention td{background:linear-gradient(90deg, var(--warn-bg) 0%, transparent 14%);}
.admin-card.admin-row-attention{background:linear-gradient(90deg, var(--warn-bg) 0%, var(--surface) 22%); border-color:var(--warn-border);}

/* Table rows settle in on load, staggered — a subtle "the data just arrived" cue */
@keyframes adminRowIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.admin-table tbody tr{animation:adminRowIn .32s var(--admin-ease) both;}
.admin-table tbody tr:nth-child(1){animation-delay:.02s;} .admin-table tbody tr:nth-child(2){animation-delay:.05s;}
.admin-table tbody tr:nth-child(3){animation-delay:.08s;} .admin-table tbody tr:nth-child(4){animation-delay:.11s;}
.admin-table tbody tr:nth-child(5){animation-delay:.14s;} .admin-table tbody tr:nth-child(6){animation-delay:.17s;}
.admin-table tbody tr:nth-child(7){animation-delay:.20s;} .admin-table tbody tr:nth-child(8){animation-delay:.23s;}
.admin-table tbody tr:nth-child(9){animation-delay:.26s;} .admin-table tbody tr:nth-child(10){animation-delay:.29s;}
.admin-table tbody tr:nth-child(n+11){animation-delay:.3s;}

.admin-empty{text-align:center; padding:44px 24px; color:var(--muted);}
.admin-empty-ic{width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:linear-gradient(150deg, var(--purple-tint), var(--purple-tint-2)); color:var(--purple); display:flex; align-items:center; justify-content:center; animation:adminFloat 3.6s ease-in-out infinite;}
@keyframes adminFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
.admin-empty svg{color:var(--muted-2); margin-bottom:14px;}
.admin-empty h3{font-size:1.02rem; color:var(--ink);}
.admin-empty p{margin-top:6px; font-size:0.86rem; max-width:340px; margin-left:auto; margin-right:auto;}
.admin-empty .btn{margin-top:18px;}

/* Revenue line chart draws itself in on load (dasharray/offset set from JS via getTotalLength) */
.admin-line-chart{display:block; overflow:visible;}
.admin-line-path{transition:none;}
.admin-line-path.is-drawn{animation:adminLineDraw 1s var(--admin-ease) forwards;}
@keyframes adminLineDraw{to{stroke-dashoffset:0;}}
.admin-line-chart circle{animation:adminRowIn .4s var(--admin-ease) both; animation-delay:.6s;}

.admin-pagination{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:20px;}
.admin-pagination a, .admin-pagination span{min-width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:9px; font-size:0.84rem; font-weight:700; color:var(--ink); text-decoration:none; transition:background .14s ease;}
.admin-pagination a:hover{background:var(--purple-tint);}
.admin-pagination .current{background:var(--purple); color:#fff;}

.admin-activity{display:flex; flex-direction:column; gap:2px;}
.admin-activity-row{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line);}
.admin-activity-row:first-child{border-top:none;}
.admin-activity-ic{width:32px; height:32px; border-radius:9px; background:var(--purple-tint); color:var(--purple); display:flex; align-items:center; justify-content:center; flex:none;}
.admin-activity-body{flex:1; font-size:0.86rem;}
.admin-activity-body .who{font-weight:700;}
.admin-activity-time{font-size:0.76rem; color:var(--muted-2); font-family:'JetBrains Mono',monospace; white-space:nowrap;}

.admin-detail-row{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--line); font-size:0.88rem;}
.admin-detail-row:first-child{border-top:none;}
.admin-detail-row .k{color:var(--muted);}
.admin-detail-row .v{font-weight:700; text-align:right;}

@keyframes adminResultIn{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.admin-checkin-result{animation:adminResultIn .35s var(--admin-ease) both;}
.admin-checkin-result-ic{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; box-shadow:var(--admin-shadow);}
.admin-stat-mini{text-align:center;}
.admin-stat-mini .num{display:block; font-size:1.5rem; font-weight:800; font-family:'JetBrains Mono',monospace;}
.admin-stat-mini .lbl{display:block; font-size:0.76rem; color:var(--muted-2); margin-top:2px;}

.admin-tabs-line{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px;}
.admin-tabs-line a{padding:10px 4px; margin-right:20px; font-size:0.88rem; font-weight:700; color:var(--muted); border-bottom:2px solid transparent; text-decoration:none;}
.admin-tabs-line a.active{color:var(--purple); border-color:var(--purple);}

.admin-form-row{margin-bottom:16px;}
.admin-form-row label{display:block; font-size:0.82rem; font-weight:700; margin-bottom:6px; color:var(--ink);}
.admin-form-row input[type=text], .admin-form-row input[type=number], .admin-form-row input[type=date], .admin-form-row input[type=email], .admin-form-row select, .admin-form-row textarea{width:100%; padding:10px 14px; border-radius:10px; border:1.5px solid var(--line-strong); background:var(--surface); font:inherit; font-size:0.9rem; color:var(--ink); transition:border-color .16s ease, box-shadow .16s ease;}
.admin-form-row input:focus, .admin-form-row select:focus, .admin-form-row textarea:focus{outline:none; border-color:var(--purple-light); box-shadow:0 0 0 3px var(--purple-tint);}
.admin-form-row .hint{font-size:0.78rem; color:var(--muted-2); margin-top:5px;}
.admin-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

.admin-search-results{display:flex; flex-direction:column; gap:2px;}
.admin-search-result{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); text-decoration:none; color:var(--ink); transition:background .14s ease, border-color .14s ease;}
.admin-search-result:hover{background:var(--purple-tint); border-color:var(--purple-tint-2);}

/* Button states — loading spinner + disabled, layered onto the site's existing .btn */
.btn:disabled, .btn[aria-disabled=true]{opacity:0.55; cursor:not-allowed; pointer-events:none;}
.btn.is-loading{color:transparent !important; pointer-events:none; position:relative;}
.btn.is-loading::after{content:''; position:absolute; width:16px; height:16px; top:50%; left:50%; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:adminSpin .6s linear infinite;}
.btn-line.is-loading::after{border-color:var(--line-strong); border-top-color:var(--purple);}
@keyframes adminSpin{to{transform:rotate(360deg);}}

/* Toast notifications */
.admin-toast-stack{position:fixed; top:20px; right:20px; z-index:300; display:flex; flex-direction:column; gap:10px; max-width:360px;}
.admin-toast{display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:12px; background:var(--ink); color:#fff; box-shadow:var(--admin-shadow-lifted); font-size:0.86rem; font-weight:600; opacity:0; transform:translateX(16px); transition:opacity .22s var(--admin-ease), transform .22s var(--admin-ease);}
.admin-toast.in{opacity:1; transform:translateX(0);}
.admin-toast svg{flex:none;}
.admin-toast-success svg{color:var(--success);}
.admin-toast-error svg{color:#ff8a80;}
.admin-toast-warning svg{color:#ffd180;}
.admin-toast-msg{flex:1;}
.admin-toast-close{flex:none; background:none; border:none; color:rgba(255,255,255,0.5); font-size:1.1rem; line-height:1; cursor:pointer; padding:0;}
.admin-toast-close:hover{color:#fff;}

/* Confirm modal — replaces native confirm() for a consistent, on-brand dialog */
.admin-modal-backdrop{position:fixed; inset:0; background:rgba(20,10,35,0.45); z-index:250; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s var(--admin-ease); padding:20px;}
.admin-modal-backdrop.open{opacity:1; pointer-events:auto;}
.admin-modal{background:var(--surface); border-radius:16px; padding:26px; max-width:400px; width:100%; box-shadow:var(--admin-shadow-lifted); transform:scale(.97) translateY(4px); transition:transform .2s var(--admin-ease);}
.admin-modal-backdrop.open .admin-modal{transform:scale(1) translateY(0);}
.admin-modal h3{font-size:1.08rem; margin-bottom:8px;}
.admin-modal p{font-size:0.9rem; color:var(--muted); line-height:1.5;}
.admin-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}

@media (max-width:1024px){
  .admin-sidebar{position:fixed; left:0; top:0; z-index:60; width:264px; transform:translateX(-100%); transition:transform .3s var(--ease); box-shadow:0 0 60px rgba(0,0,0,0.3);}
  .admin-sidebar.open{transform:translateX(0);}
  .admin-sidebar.collapsed{width:264px;}
  .admin-sidebar.collapsed .admin-logo-text, .admin-sidebar.collapsed .admin-nav-item-label, .admin-sidebar.collapsed .admin-nav-label span{opacity:1; width:auto;}
  .admin-sidebar.collapsed .admin-nav-badge{display:inline-flex;}
  .admin-sidebar.collapsed .admin-nav-item{justify-content:flex-start; padding:9px 12px;}
  .admin-collapse-toggle{display:none;}
  .admin-sidebar-toggle{display:flex;}
  .admin-sidebar-backdrop{display:block; position:fixed; inset:0; background:rgba(20,10,35,0.45); z-index:50; opacity:0; pointer-events:none; transition:opacity .3s ease;}
  .admin-sidebar-backdrop.show{opacity:1; pointer-events:auto;}
  .admin-grid-2{grid-template-columns:1fr;}
  .admin-form-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .admin-content{padding:18px 16px 48px;}
  .admin-topbar{padding:12px 16px; gap:10px;}
  .admin-search{display:none;}
  .admin-breadcrumb{font-size:0.86rem; flex:1 1 0; min-width:0; overflow:hidden;}
  .admin-breadcrumb .current{min-width:0; overflow:hidden; text-overflow:ellipsis;}
  .admin-profile-text{display:none;}
  .admin-profile-btn{padding:6px;}
  .admin-revenue-grid{grid-template-columns:1fr;}
  .admin-toast-stack{left:12px; right:12px; top:12px; max-width:none;}
}

/* ---------- past events: archive page + the "ended" state of an event page ---------- */
.past-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 24px; align-items:start;}
@media (max-width:900px){ .past-grid{grid-template-columns:repeat(2,1fr); gap:26px 16px;} }
.past-card{display:block; color:inherit;}
.past-card-art{position:relative; display:block; border-radius:16px; overflow:hidden; background:var(--purple-tint-2); box-shadow:var(--shadow); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.past-card:hover .past-card-art{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.past-card-art img{width:100%; height:auto; max-height:560px; object-fit:contain; display:block;}
.past-card-fallback{display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; font-size:3.4rem;}
.past-card-pill, .event-ended-pill{display:inline-flex; align-items:center; font-size:0.68rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; border-radius:100px; padding:5px 12px; background:rgba(21,13,28,0.82); color:#fff; backdrop-filter:blur(4px);}
.past-card-pill{position:absolute; top:12px; left:12px;}
.past-card-rating{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:0.82rem; color:var(--muted-2);}
.past-card-rating strong{color:var(--ink);}
.past-card-rating .review-stars{font-size:0.9rem;}
.past-pager{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:44px; flex-wrap:wrap;}
.past-pager-count{font-size:0.86rem; color:var(--muted-2); font-weight:600;}
.past-pager-btn{display:inline-flex; align-items:center; padding:10px 22px; border-radius:100px; border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:0.9rem; color:var(--ink); transition:background .22s var(--ease), border-color .22s var(--ease);}
.past-pager-btn:hover{background:var(--purple-tint); border-color:var(--purple-light);}

.event-hero-compact-top .event-ended-pill{background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22);}
.ended-panel{position:sticky; top:96px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px 24px; text-align:center; box-shadow:0 30px 70px -26px rgba(0,0,0,0.5);}
.ended-panel-badge{width:54px; height:54px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); color:var(--purple-light);}
.ended-panel h3{font-size:1.25rem; color:var(--ink);}
.ended-panel p{margin:8px 0 18px; font-size:0.92rem; line-height:1.55; color:var(--muted);}
.ended-panel-rating{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:18px; padding:12px; border-radius:12px; background:rgba(255,255,255,0.05); font-size:0.84rem; color:var(--muted);}
.ended-panel-rating .avg{font-size:1.3rem; font-weight:800; color:var(--ink);}
.ended-panel-link{display:inline-block; margin-top:14px; font-size:0.86rem; font-weight:700; color:var(--purple-light);}
@media (max-width:980px){ .ended-panel{position:static;} }

/* ---------- install-the-app links + iPhone instructions sheet ---------- */
[data-install-app][hidden]{display:none !important;}
.install-sheet{position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center; padding:16px; background:rgba(21,13,28,0.6);}
.install-sheet-card{width:100%; max-width:380px; background:#fff; color:var(--ink); border-radius:20px; padding:26px 22px 22px; text-align:center; box-shadow:0 30px 70px -20px rgba(0,0,0,0.5);}
.install-sheet-card img{border-radius:14px; display:block; margin:0 auto 14px;}
.install-sheet-card h3{font-size:1.1rem; line-height:1.3;}
.install-sheet-card p{margin:8px 0 20px; font-size:0.92rem; line-height:1.55; color:var(--muted);}

/* ---------- "Continue with Google" button + divider on login/sign-up ---------- */
.btn-google{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:14px 20px; margin-top:6px; border-radius:100px; background:#fff; border:1.5px solid var(--line-strong); color:var(--ink); font-weight:700; font-size:0.98rem; text-decoration:none; transition:background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);}
.btn-google:hover{background:#FAFAFB; border-color:var(--muted-2); box-shadow:0 8px 20px -14px rgba(20,10,35,0.35);}
.auth-or{display:flex; align-items:center; gap:14px; margin:20px 0 6px; color:var(--muted-2); font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;}
.auth-or::before, .auth-or::after{content:''; flex:1; height:1px; background:var(--line);}

/* ---------- Event Social (organizer dashboard) ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.social-event-picker{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.social-event-picker label{font-size:0.8rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);}
.social-event-picker select{min-width:260px; max-width:100%; padding:10px 14px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); font:inherit; font-weight:700;}
.social-seg{display:inline-flex; background:#F1EEF5; border-radius:100px; padding:4px;}
.social-seg label{cursor:pointer;}
.social-seg input{position:absolute; opacity:0; pointer-events:none;}
.social-seg span{display:block; padding:8px 16px; border-radius:100px; font-weight:700; font-size:0.84rem; color:var(--muted);}
.social-seg input:checked + span{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(20,10,35,0.18);}
.social-seg input:focus-visible + span{outline:2px solid var(--purple); outline-offset:2px;}
.social-composer textarea{border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; resize:vertical;}
.social-composer-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:10px;}
.social-check{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:0.9rem;}
.social-check small{color:var(--muted); font-weight:500;}
.social-file{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:0.86rem; border:1.5px dashed var(--line-strong); border-radius:100px; padding:8px 14px; cursor:pointer;}
.social-file input{max-width:190px; font-size:0.78rem;}
.social-report, .social-post{padding:14px 0; border-top:1px solid var(--line);}
.social-report:first-of-type{border-top:0;}
.social-quote{margin-top:8px; background:#F7F5FA; border-radius:10px; padding:10px 14px; color:#3D3649; overflow-wrap:anywhere;}
.social-thumb{display:block; margin-top:8px; max-width:200px; max-height:140px; border-radius:10px; object-fit:cover;}
.social-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.social-btn{font:inherit; font-weight:700; font-size:0.84rem; padding:8px 16px; border-radius:100px; border:1.5px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer;}
.social-btn.plain{background:var(--surface); color:var(--ink); border-color:var(--line-strong);}
.social-btn.danger{background:var(--surface); color:var(--danger); border-color:#FCA5A5;}
.social-hidden-head{margin:18px 0 6px; padding-top:14px; border-top:1px solid var(--line); font-size:0.78rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.social-hidden{display:flex; align-items:center; gap:12px; padding:10px 0;}
.social-link-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.social-link-row input[type=text]{flex:1; min-width:0; padding:9px 12px; border:1.5px solid var(--line); border-radius:10px; font:inherit;}
.social-link-ic{width:38px; height:38px; flex:none; border-radius:50%; background:#F1EEF5; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.74rem;}
.social-switch{position:relative; width:42px; height:24px; flex:none; cursor:pointer;}
.social-switch input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer;}
.social-switch span:first-of-type{position:absolute; inset:0; border-radius:100px; background:#D6D1DE; transition:background .18s ease;}
.social-switch span:first-of-type::after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .18s ease;}
.social-switch input:checked + span{background:var(--purple);}
.social-switch input:checked + span::after{transform:translateX(18px);}
.social-switch input:focus-visible + span{outline:2px solid var(--purple); outline-offset:2px;}
.social-preview{background:#150D1C; color:#fff; border-radius:16px; padding:20px 22px;}
.social-preview-label{font-size:0.74rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.64);}
.social-chip{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.28); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:0.74rem;}
.social-link-row input[type=text]:placeholder-shown + .social-switch{opacity:0.35;}

/* ---------- WhatsApp: floating chat button, contact-page card, footer link ---------- */
.wa-float{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:40; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(18,140,70,0.65), 0 2px 6px rgba(0,0,0,0.18); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);}
.wa-float:hover{transform:translateY(-2px) scale(1.04); background:#1fbd5a; box-shadow:0 14px 30px -8px rgba(18,140,70,0.7), 0 2px 6px rgba(0,0,0,0.2);}
.wa-float:focus-visible, .wa-card:focus-visible, .foot-wa:focus-visible{outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 6px #128C46;}
.wa-card{display:flex; align-items:center; gap:14px; margin-top:20px; padding:14px 16px; border-radius:16px; background:#128C46; color:#fff; text-decoration:none; box-shadow:0 12px 26px -14px rgba(18,140,70,0.8); transition:transform .2s var(--ease), background .2s var(--ease);}
.wa-card:hover{background:#0f7a3c; transform:translateY(-1px);}
.wa-card-ic{width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; flex:none;}
.wa-card-tx{display:flex; flex-direction:column; gap:2px; min-width:0;}
.wa-card-tx b{font-size:1rem; font-weight:800; color:#fff;}
.wa-card-tx span{font-size:0.84rem; color:rgba(255,255,255,0.92);}
.wa-card-go{margin-left:auto; flex:none; color:#fff;}
@media (max-width:640px){ .wa-float{right:14px; width:52px; height:52px;} }
@media print{ .wa-float{display:none;} }

/* Event cards show the whole flyer in a 4:5 frame, on a softened copy of itself (no cropping). */
.poster-card-art{position:relative; display:block; aspect-ratio:4/5; border-radius:14px; overflow:hidden; isolation:isolate; background:var(--purple-tint-2); transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.poster-card-art::before{content:""; position:absolute; inset:-14%; z-index:-1; background:var(--art) center/cover no-repeat; filter:blur(22px) saturate(1.15) brightness(.85)}
.poster-card-art .poster-card-img{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:contain; border-radius:0; background:none; box-shadow:none}
.poster-card:hover .poster-card-art{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.poster-card:hover .poster-card-art .poster-card-img{transform:none; box-shadow:none}

/* Round profile picture (or initials) used by the header and the My profile page */
.pf-av{display:inline-block; flex:none; border-radius:50%; object-fit:cover; vertical-align:middle; background:var(--purple-tint-2)}
.pf-av-i{display:inline-grid; place-items:center; font-weight:800; color:var(--purple-deep); letter-spacing:.02em; line-height:1}
.nav-links .nav-me{display:inline-flex; align-items:center; border-radius:50%; transition:transform .25s var(--ease), box-shadow .25s}
.nav-links .nav-me:hover{transform:translateY(-1px); box-shadow:0 0 0 3px var(--purple-tint-2)}

/* the small avatar badge in the admin and organizer dashboards shows the picture when there is one */
.admin-avatar{overflow:hidden}
.admin-avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}