/* Guestlist Shanghai — dark theme (loaded after styles.css + site.css), phone tab bar, and the Tonight page. */
:root{
  --paper:#0E0E10; --paper-2:#18181B; --paper-3:#222226; --line:#27272C; --line-2:#3B3B42;
  --ink:#F5F3EF; --ink-2:#C2C0BB; --ink-3:#8A8884;
  --accent:#EDC06A; --accent-2:#F6D48E;
  --free:#62D597; --free-bg:#10261A; --cover:#F5F3EF; --cover-bg:#222226; --closed:#7E7C79; --closed-bg:#1B1B1E; --unknown:#8A8884;
  --blue:#93B2FF; --blue-bg:#131C33;
  --r-card:16px;
  color-scheme:dark;
}
html,body{background:var(--paper)}
::selection{background:var(--accent);color:var(--paper)}

/* ---------- chrome ---------- */
.top{background:rgba(14,14,16,.86);border-bottom-color:var(--line)}
.nav .cta{background:var(--accent);color:var(--paper)}
.nav .cta:hover{background:var(--accent-2);color:var(--paper)}
.btn{border-color:var(--ink)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.dark-on{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn.dark-on:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--paper)}
.box.dark{background:var(--paper-3);color:var(--ink);border-color:var(--line-2)}
.box.dark p,.box.dark li{color:var(--ink-2)}
.box.dark h3{color:var(--ink)}
.ecard .pic .pill{background:rgba(14,14,16,.9)}
.hero .pic .cap{background:linear-gradient(transparent,rgba(0,0,0,.8))}
.banner.bad{background:#3A1A1E;color:#F2B8B8;border-color:#7A3440}
.qty select,.reqform input,.reqform select,.reqform textarea,.sheet input,.sheet select,.sheet textarea{background:var(--paper-2);color:var(--ink)}
.sendbox pre,.sheet pre{background:var(--paper-2)}
.ph-art{background:radial-gradient(120% 90% at 85% 10%,#5A4528 0,#241D14 45%,#0E0E10 100%);color:var(--ink)}
.pill.ticket{background:var(--accent);color:var(--paper)}
.pill.after{background:var(--blue-bg);color:var(--blue);border:1px solid #2A3A66}
.day.on .pip{background:rgba(14,14,16,.35)}.day.on .pip.free{background:#1E6A42}.day.on .pip.unknown{border-color:rgba(14,14,16,.5)}
.day .dn,.day .dd{display:block}
.modal{background:rgba(0,0,0,.6)}

/* phone tab bar */
.tabbar{display:none}
@media (max-width:700px){
  .nav a:not(.cta){display:none}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(18,18,20,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11px;color:var(--ink-3)}
  .tabbar svg{width:23px;height:23px}
  .tabbar a.on{color:var(--accent)}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ---------- Tonight: header + night picker ---------- */
.night-head{padding-top:28px}
.nh-row{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.night-head h1{font-size:clamp(40px,7vw,64px);letter-spacing:-.02em;line-height:1}
.nh-date{color:var(--ink-3);font-size:15px}
.nights{display:flex;gap:8px;overflow-x:auto;margin:18px -24px 0;padding:0 24px 2px;scrollbar-width:none}
.nights::-webkit-scrollbar{display:none}
.nights a{flex:none;padding:9px 15px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap}
.nights a:hover{color:var(--ink)}
.nights a.on{background:var(--ink);color:var(--paper)}

/* tabs */
.tabs-wrap{position:sticky;top:64px;z-index:15;background:rgba(14,14,16,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-top:22px;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:4px}
.tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:14px 14px 13px;font-size:15px;font-weight:500;color:var(--ink-3)}
.tab:first-child{margin-left:-14px}
.tab i{font-style:normal;font-size:12px;font-weight:600;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--paper-3);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink)}
.tab.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.tab.on i{background:var(--accent);color:var(--paper)}

/* panels: all visible without JS, one at a time with it */
.panels{padding-top:22px}
.panel+.panel{margin-top:40px}
.panel-h{font-size:26px;margin-bottom:14px}
.js .panel[data-off]{display:none}
.js .panel+.panel{margin-top:0}
.js .panel-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.panel .sub{font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink-3);margin:30px 0 12px}
.none{color:var(--ink-3);font-size:15.5px;padding:22px 0}

/* event cards */
.evs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ev{display:flex;flex-direction:column;background:var(--paper-2);border-radius:var(--r-card);overflow:hidden;transition:background .15s}
.ev:hover{background:var(--paper-3)}
.ev-pic{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden}
.ev-pic img,.ev-pic video,.ev-pic .ph-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-tag{position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:rgba(14,14,16,.78);color:var(--ink);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ev-tag.now{background:var(--accent);color:var(--paper)}
.ev-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.ev-when{font-size:13.5px;color:var(--ink-3)}
.ev h3{font-size:24px;line-height:1.12}
.ev-where{font-size:14px;color:var(--ink-2)}
.ev-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.ev-price{display:flex;flex-direction:column;font-size:14px;color:var(--ink-3)}
.ev-price b{font-size:19px;font-weight:600;color:var(--ink)}
.ev-price small{font-size:12.5px}
.ev-cta{padding:10px 20px;border-radius:999px;background:var(--accent);color:var(--paper);font-weight:600;font-size:14.5px}
.ev-cta.off{background:var(--paper-3);color:var(--ink-2)}

@media (min-width:761px){
  .evs.solo .ev{grid-column:1/-1;flex-direction:row}
  .evs.solo .ev-pic{flex:0 0 58%;aspect-ratio:16/10}
  .evs.solo .ev-body{padding:28px 30px}
  .evs.solo .ev h3{font-size:34px}
  .evs.solo .ev-where{font-size:15px}
}

/* club cards */
.ccs{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}
.cc{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px;background:var(--paper-2);border-radius:14px;transition:background .15s}
.cc:hover{background:var(--paper-3)}
.cc-pic{width:60px;height:60px;border-radius:10px;overflow:hidden;background:var(--paper-3)}
.cc-pic img{width:100%;height:100%;object-fit:cover}
.cc-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.cc-name{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-sub{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-deal{font-size:13.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px}
.badge{align-self:start;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--paper-3);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.badge.free{background:var(--free-bg);color:var(--free)}
.badge.blue{background:var(--blue-bg);color:var(--blue)}
.badge.dim{color:var(--ink-3)}

.codebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;margin-bottom:14px;border-radius:14px;background:var(--free-bg);color:var(--ink-2);font-size:14.5px}
.codebar b{color:var(--free);font-weight:700;letter-spacing:.04em}
.codebar-b{flex:none;padding:8px 16px;border-radius:999px;background:var(--free);color:var(--paper);font-weight:600;font-size:14px}

.more{margin-top:18px}
.more summary{cursor:pointer;list-style:none;font-size:14.5px;color:var(--ink-2);padding:10px 0;display:flex;align-items:center;gap:8px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--paper-3);align-items:center;justify-content:center;font-size:15px}
.more[open] summary::before{content:"–"}
.more .ccs{margin-top:8px}

/* below the panels */
.home-foot{padding-top:56px}
.tablecta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-radius:var(--r-card);background:var(--paper-2);flex-wrap:wrap}
.tablecta:hover{background:var(--paper-3)}
.tablecta b{display:block;font-family:var(--display);font-weight:400;font-size:22px}
.tablecta small{display:block;color:var(--ink-3);font-size:14px;margin-top:2px}
.tablecta .go{padding:10px 18px;border-radius:999px;border:1px solid var(--line-2);font-size:14.5px;font-weight:500}
.faq-mini{margin-top:48px;max-width:760px}
.faq-mini h2{font-size:28px;margin-bottom:10px}
.faq-mini details{border-bottom:1px solid var(--line)}
.faq-mini summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;font-weight:500;font-size:15.5px;position:relative}
.faq-mini summary::-webkit-details-marker{display:none}
.faq-mini summary::after{content:"+";position:absolute;right:4px;top:14px;color:var(--ink-3);font-size:20px}
.faq-mini details[open] summary::after{content:"–"}
.faq-mini p{color:var(--ink-2);font-size:15px;line-height:1.6;padding:0 0 18px}
.aboutline{margin-top:40px;color:var(--ink-3);font-size:14px;line-height:1.6;max-width:760px}
.aboutline a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

@media (max-width:560px){
  .wrap{padding:0 16px}
  .nights{margin:16px -16px 0;padding:0 16px 2px}
  .night-head{padding-top:20px}
  .tabs-wrap{top:56px;margin-top:18px}
  .tabs{gap:0;justify-content:space-between}
  .tab{padding:13px 8px 12px;font-size:14.5px;gap:6px}
  .tab:first-child{margin-left:-8px}
  .tab.on::after{left:8px;right:8px}
  .evs{grid-template-columns:1fr;gap:14px}
  .ccs{grid-template-columns:1fr;gap:8px}
  .cc{grid-template-columns:52px minmax(0,1fr);gap:12px}
  .cc-pic{width:52px;height:52px}
  .cc .badge{grid-column:2;justify-self:start;margin-top:2px}
  .ev h3{font-size:22px}
  .home-foot{padding-top:40px}
}
@media (max-width:520px){.top .wrap{height:56px}}
@media (prefers-reduced-motion:reduce){.ev-pic video{display:none}}

/* ---- currency picker + list form (payments launch) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.curpick{margin-left:auto;flex:none}
.top .nav + .curpick{margin-left:0}
.curpick select{appearance:none;-webkit-appearance:none;background:var(--paper-2);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font:600 12.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;cursor:pointer}
.curpick select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tt-price small + small{margin-top:2px}
.feenote{margin-top:10px}
.listform{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-card,14px);background:var(--paper-2);margin-bottom:16px}
.listform .listrow{display:grid;grid-template-columns:1fr 96px;gap:10px}
.listform label{display:grid;gap:6px}
.listform input,.listform select{width:100%;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit}
.listform .ok{color:var(--free)}
@media (max-width:520px){.curpick select{padding:6px 9px;font-size:11.5px}}
/* pay on WeChat through the promoter */
.wxpay{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.wxpay .wxlead{margin:0}
.wxform{display:grid;gap:10px;margin-top:12px}
.wxform label{display:grid;gap:6px}
.wxform input{width:100%;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit}
.wxid{display:flex;gap:10px;align-items:center;margin:6px 0 16px}
.wxid .mono{font-size:22px;color:var(--ink);word-break:break-all}
.wxsteps{padding-left:20px;line-height:1.6;margin:0 0 14px}