@font-face  {
  font-family:"DM Sans";
  src:url("assets/fonts/dm-sans-latin-variable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 1000;
  font-display:swap;
}

:root{
  --ink:#fff;
  --paper:#000;
  --card:#000;
  --muted:#979797;
  --accent:#00ff09;
  --interaction-accent:#684cff;
  --interaction-accent-soft:rgba(104,76,255,.1);
  --line:#353535;
  --radius:20px;
}
*{
  box-sizing:border-box;
}
html{
  background:var(--paper);
}
body{
  margin:0;
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
}
a{
  color:inherit;
  text-decoration:none;
}
button,
input{
  font:inherit;
}
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  gap:16px;
  max-width:760px;
  margin:auto;
  padding:0 20px;
}
.topbar-city{
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  white-space:nowrap;
}
.brand{
  font-weight:700;
}

.brand i,
.hero h1,
.page-head h1,
.activity-hero h1,
.section-head h2,
.place-card h3,
.cover h1,
.reviews p,
.empty h1,
.empty h2{
  font-family:"DM Sans",sans-serif;
}
.brand i{
  font-weight:600;
}
.hero{
  min-height:0;
  padding:34px 24px 18px;
  background:var(--ink);
  color:#fff;
}
.hero>*{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
.eyebrow{
  margin:0 0 12px;
}
.hero h1,
.page-head h1,
.activity-hero h1{
  margin:0;
  font-size:clamp(40px,8vw,64px);
  font-weight:600;
  line-height:.97;
  letter-spacing:-.055em;
}
.hero h1{
  max-width:520px;
  font-size:clamp(28px,6vw,42px);
  line-height:1.02;
}
.hero h1 em{
  font-style:italic;
}
.hero>p:not(.eyebrow),
.page-head>p{
  max-width:410px;
  margin:22px auto 0;
  color:#cbc8c1;
  font-size:17px;
  line-height:1.5;
}
.hero>p:not(.eyebrow){
  margin-top:12px;
  font-size:14px;
}
.primary{
  display:inline-block;
  margin-top:16px;
  padding:14px 18px;
  border-radius:99px;
  font-weight:700;
}
section{
  max-width:760px;
  margin:0 auto;
  padding:44px 20px;
}
.section-head{
  position:relative;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
}
.section-head .eyebrow{
  position:absolute;
  top:0;
  left:0;
  margin:0;
}
.section-head h2{
  margin:0;
}
.section-head>a{
  flex:none;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;
}
.section-head>a:hover{
  color:var(--accent);
}


.guide-grid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 24px)/3);
  grid-template-columns:none;
  gap:12px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  padding:6px 0 10px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.guide-grid::-webkit-scrollbar{
  display:none;
}
.guide-card{
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  aspect-ratio:1/1;
  min-height:0;
  padding:18px;
  border:1px solid #1d1d1d;
  border-radius:var(--radius);
  background-color:#1d1d1d;
  background-position:center;
  background-size:cover;
  overflow:hidden;
  scroll-snap-align:center;
}
.guide-card small{
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.guide-card strong{
  align-self:end;
  margin-top:0;
  color:#fff;
  font-size:24px;
  line-height:1.02;
  letter-spacing:-.045em;
  text-shadow:0 2px 18px #000;
}
.guide-card span{
  margin-top:12px;
  color:#d7d7d7;
  font-size:13px;
  line-height:1.35;
  text-shadow:0 1px 14px #000;
}
/* Night Card detail owner buttons: one clean brand layer only. */


.place-card{
  display:flex;
  align-items:end;
  height:195px;
  padding:17px;
  border-radius:var(--radius);
  background-position:center;
  background-size:cover;
  color:#fff;
}
.place-card span{
  font-size:12px;
}
.place-card h3{
  margin:5px 0 0;
  font-size:25px;
  font-weight:600;
  line-height:1.05;
}
.list,
.place-results,
.schedule{
  border-top:1px solid var(--line);
}
.place-row{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 2px;
  border-bottom:1px solid var(--line);
}
.place-row>div:first-child,
.schedule div{
  display:grid;
  gap:3px;
}
.place-row span,
.schedule small{
  color:var(--muted);
  font-size:13px;
}


.pulse-label,
.pulse-marquee,
.pulse-track,
.pulse-more{
  position:relative;
  z-index:1;
}
.pulse-label{
  display:grid;
  gap:2px;
  min-width:104px;
}
.pulse-label small{
  color:var(--accent);
  font-size:9px;
  font-weight:950;
  letter-spacing:.16em;
}
.pulse-label strong{
  color:#fff;
  font-size:22px;
  line-height:.95;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.pulse-marquee{
  min-width:0;
  overflow:hidden;
}
.pulse-track{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:max-content;
  gap:14px;
  animation:pulse-marquee 22s linear infinite;
}

@keyframes pulse-marquee  {
  from  {
    transform:translateX(0);
  }
  to  {
    transform:translateX(-50%);
  }
}
.pulse-track > i{
  flex:0 0 auto;
  color:rgba(255,255,255,.24);
  font-size:28px;
  font-style:normal;
  font-weight:200;
}
.pulse-item{
  display:grid;
  gap:4px;
  min-width:max-content;
  color:#fff;
}
.pulse-item b{
  color:var(--luca-purple);
  font-size:clamp(21px,2.5vw,34px);
  line-height:.88;
  letter-spacing:-.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pulse-item span{
  color:#aaa;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pulse-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:32px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.16);
  color:#f4f4f6;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}
.pulse-more b{
  font-size:14px;
  line-height:1;
}

.guide-intro{
  display:grid;
  gap:14px;
  padding-top:28px;
  padding-bottom:24px;
}
.guide-intro>p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.5;
}
.guide-intro article{
  display:grid;
  gap:8px;
  padding:18px;
  border:1px solid #1d1d1d;
  border-radius:var(--radius);
  background:#1d1d1d;
}
.guide-intro small{
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.guide-intro strong{
  color:#fff;
  font-size:18px;
  line-height:1.35;
}
.guide-place-list{
  display:grid;
  gap:10px;
}
.guide-place-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:17px;
  border:1px solid #1d1d1d;
  border-radius:var(--radius);
  background:#1d1d1d;
}
.guide-place-row>b{
  color:var(--accent);
  font-size:12px;
  letter-spacing:.12em;
}
.guide-place-row div{
  display:grid;
  gap:5px;
}
.guide-place-row strong{
  color:#fff;
  font-size:18px;
  line-height:1.1;
}
.guide-place-row span{
  color:#fff;
  font-size:13px;
  line-height:1.35;
}
.guide-place-row small{
  color:var(--muted);
  font-size:12px;
}
.guide-place-row i{
  color:var(--muted);
  font-style:normal;
  font-size:20px;
}
.notes,
.reviews{
  display:grid;
  gap:12px;
}
.notes article{
  padding:20px;
  border-radius:var(--radius);
}
.notes b{
  color:var(--accent);
}
.notes h3{
  margin:22px 0 6px;
  font-size:21px;
  line-height:1.05;
}
.notes p{
  margin:0;
  line-height:1.45;
}
.radar-quiet{
  --radar-color:#2589ef;
}
.radar-normal{
  --radar-color:#43c89a;
}
.radar-busy{
  --radar-color:#ff633f;
}
.radar-packed{
  --radar-color:#f0444b;
}
.radar-queue{
  --radar-color:#99143f;
}
.radar-unavailable{
  --radar-color:#b8bac0;
}


.radar-meter-wrap{
  display:grid;
  gap:5px;
}


@media (max-width:600px){
  
  
  
  .radar-meter-wrap{
    grid-column:2 / 4;
    grid-row:2;
  }
  
  
}
.night-card-photo{
  position:relative;
  overflow:hidden;
}
.night-card-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  color:#fff;
}
.night-card-author{
  display:flex;
}
.night-card-author img,
.night-card-author > span{
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  font-weight:900;
}
.night-card-author img{
  object-fit:cover;
}
.night-card-author div{
  display:grid;
  min-width:0;
  text-shadow:0 1px 8px #000;
}

.night-card-overlay small{
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
}
.night-card-overlay strong{
  margin-top:1px;
  font-size:48px;
  line-height:.84;
  letter-spacing:-.08em;
}
.night-card-overlay b{
  font-style:italic;
  line-height:.9;
}
.night-card-overlay em{
  font-style:normal;
  font-weight:900;
  line-height:.95;
  letter-spacing:-.06em;
}


.night-card-author[href]{
  color:inherit;
  text-decoration:none;
}
.night-card-author[href]:hover b,
.night-card-author[href]:focus-visible b{
  color:var(--interaction-accent);
}


/* Ordered My Night feeds: DOM order always reads left-to-right,
then top-to-bottom. */


.page-head{
  max-width:none;
  padding:54px 20px 44px;
  text-align:center;
  background:#e5ded2;
}
.page-head .eyebrow{
  margin:0 auto 12px;
  text-align:center;
}
.page-head h1{
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  text-align:center;
}
.page-head>p:not(.eyebrow){
  color:#5d5a55;
  margin-left:auto;
  margin-right:auto;
}
.page-head input{
  display:block;
  width:100%;
  max-width:520px;
  margin:26px auto 0;
  padding:15px;
  border:1px solid #c7c0b5;
  border-radius:14px;
  outline-color:var(--accent);
  text-align:left;
}
.filters .eyebrow:not(:first-child){
  margin-top:27px;
}
.chips,
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chips button,
.chip-link{
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:99px;
  font-size:14px;
  cursor:pointer;
}
.chips small{
  margin-left:3px;
  color:var(--muted);
}
.place-row strong{
  font-size:17px;
}
.place-row .time{
  display:grid;
  gap:4px;
  margin-left:auto;
  font-size:13px;
  text-align:right;
}
.place-row .time small,
.schedule b{
  color:var(--accent);
}
.arrow{
  margin-left:auto;
  color:var(--muted);
  font-size:26px;
}
.text-button{
  border:0;
  background:none;
  text-decoration:underline;
  cursor:pointer;
}
.activity-hero{
  background:#252a3b;
  color:#fff;
}
.activity-hero>span{
  display:block;
  margin-bottom:26px;
  font-size:48px;
}
.activity-hero>p:last-child{
  max-width:520px;
  color:#d5d8e3;
  font-size:17px;
  line-height:1.55;
}
.good-to-know{
  max-width:none;
  background:#e5ded2;
}
.good-to-know>*{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.good-to-know>p:not(.eyebrow){
  display:flex;
  gap:18px;
  margin-top:0;
  padding:15px 0;
  line-height:1.45;
}
.good-to-know b{
  color:var(--accent);
  font-size:12px;
}
.other{
  padding-top:10px;
}
.back{
  display:inline-block;
  margin-top:28px;
  text-decoration:underline;
}
.activity-hero.has-poster{
  background-image:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.48)),var(--activity-hero-poster);
  background-size:cover;
  background-position:center;
}
.day-mode .activity-hero.has-poster{
  color:#fff;
  background-image:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.36)),var(--activity-hero-poster);
}
.day-mode .activity-hero.has-poster h1,
.day-mode .activity-hero.has-poster>p:last-child{
  color:#fff;
}
.cover{
  position:relative;
  display:flex;
  align-items:end;
  justify-content:space-between;
  height:355px;
  max-width:760px;
  margin:auto;
  padding:22px;
  background-position:center;
  background-size:cover;
  color:#fff;
}
.cover h1{
  margin:5px 0;
  font-size:44px;
  line-height:1;
  letter-spacing:-.05em;
}
.cover p{
  margin:0;
  font-size:13px;
}

.place-intro{
  margin:0 0 17px;
  padding:13px 14px;
  border-radius:14px;
  background:#080808;
  color:#979797;
  font-size:13px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:.01em;
}
.quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.quick-grid div,
.quick-grid a{
  display:grid;
  gap:5px;
  padding:14px;
  border-bottom:1px solid var(--line);
}
.quick-grid small{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.1em;
}
.quick-grid b{
  font-size:14px;
}
.tags{
  margin-top:16px;
}
.tags span{
  padding:8px 10px;
  border-radius:99px;
  font-size:12px;
}
.schedule a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.schedule a>span{
  font-size:22px;
}
.schedule b{
  margin-left:auto;
  font-size:11px;
}
.reviews article{
  padding:17px;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.reviews strong{
  letter-spacing:.1em;
}
.reviews p{
  margin:10px 0;
  font-size:19px;
  font-weight:600;
  line-height:1.25;
}
.reviews small,
.muted{
  color:var(--muted);
}
.empty{
  max-width:760px;
  margin:auto;
  padding:80px 20px;
  text-align:center;
}
.live-status-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:12px;
  padding-bottom:0;
}
.live-status{
  display:inline-grid;
  gap:4px;
  width:fit-content;
  max-width:100%;
  padding:7px 10px;
  border:1px solid #202020;
  border-radius:10px;
  background:#060606;
}
.live-status[data-crowd-open]{
  cursor:pointer;
  text-align:left;
}

.live-status strong{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:none;
  font-size:12px;
  font-weight:600;
  line-height:1;
}
.live-status strong i{
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.live-status span{
  min-width:0;
  color:var(--muted);
  font-size:10px;
  line-height:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.live-quiet strong{
  color:#bae6fd;
}
.live-normal strong{
  color:#60a5fa;
}
.live-unknown strong{
  color:#d1d1d6;
}
.live-busy strong{
  color:#ff633f;
}
.live-packed strong{
  color:#ef4444;
}
.live-queue strong{
  color:#8b1e3f;
}
.live-unavailable strong{
  color:#d1d1d6;
}
.live-expected strong{
  color:#d1d1d6;
}
.live-expected strong i{
  animation:none;
  box-shadow:none;
}

.venue-open{
  color:#25d6c8;
}
.venue-closed{
  color:#979797;
}
.quick-grid b.venue-open,
.day-mode .quick-grid b.venue-open{
  color:#00bfae;
}
.quick-grid b.venue-closed,
.day-mode .quick-grid b.venue-closed{
  color:#ff6545;
}
.stacked-lines{
  display:grid;
  gap:3px;
}
.stacked-lines span{
  display:block;
}
.footer-brand{
  font-weight:700;
  letter-spacing:-.04em;
}
.footer-brand i{
  font-family:"DM Sans",sans-serif;
  font-style:italic;
  font-weight:600;
  color:var(--accent);
}


.transit-list,
.notes-list{
  display:grid;
  gap:0;
  padding:8px 12px;
  border:1px solid #1d1d1d;
  border-radius:var(--radius);
  background:#080808;


  width:100%;
  min-width:0
}
.transit-list div,
.notes-list div{
  display:grid;
  grid-template-columns:minmax(86px,120px) 1fr;
  gap:14px;
  padding:13px 0;
}
.transit-list>div,
.notes-list>div{
  width:100%;
  min-width:0
}
.transit-list div + div,
.notes-list div + div{
  border-top:1px solid #141414;
}
.transit-list small,
.notes-list small{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
}
.transit-list b,
.notes-list b{
  color:#fff;
  font-size:14px;
  line-height:1.35;
}
.rail-lines{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}
.rail-pill{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:21px;
  padding:4px 8px;
  border-radius:999px;
  color:#050505;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.rail-transit-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.rail-transit-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.rail-dot{
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  display:inline-block;
}
.day-mode{
  background:#f4f1eb;
  color:#171715;
}
.day-mode .hero h1,
.day-mode .page-head h1,
.day-mode .activity-hero h1,
.day-mode .section-head h2,
.day-mode .cover h1{
  color:#171715;
}
.day-mode .hero>p:not(.eyebrow),
.day-mode .page-head>p,
.day-mode .activity-hero>p:last-child{
  color:#5d5a55;
}
.day-mode .activity-venue-list .place-row,
.day-mode .schedule a,
.day-mode .reviews article,
.day-mode .quick-grid,
.day-mode .transit-list,
.day-mode .notes-list{
  background:#fffdfa;
  border-color:#dfdbd2;
  color:#171715;
}
.day-mode .quick-grid b,
.day-mode .transit-list b,
.day-mode .notes-list b,
.day-mode .schedule a{
  color:#171715;
}
.day-mode .quick-grid small,
.day-mode .transit-list small,
.day-mode .notes-list small,
.day-mode .topbar-city{
  color:#77736c;
}

.day-mode .guide-intro article,
.day-mode .guide-place-row{
  background:#fffdfa;
  border-color:#dfdbd2;
  color:#171715;
}

.day-mode .guide-place-row strong{
  color:#171715;
}

.day-mode .guide-place-row span,
.day-mode .guide-place-row small{
  color:#77736c;
}


.day-mode .notes p{
  color:#5d5a55;
}
.day-mode .chips button,
.day-mode .chip-link{
  background:#fffdfa;
  border-color:#c7c0b5;
  color:#171715;
}
.day-mode .chips button.active{
  background:#e9f5e9;
  border-color:#00a800;
  color:#087508;
}
.day-mode .live-status,
.day-mode .transit-list,
.day-mode .notes-list{
  background:#fffdfa;
  border-color:#dfdbd2;
}


.day-mode .event-notes-section{
  background:#f4f1eb;
}
.day-mode .schedule a{
  border-color:#dfdbd2;
}
.day-mode,
.day-mode .site-footer{
  background:#f5f5f7;
  color:#1d1d1f;
}
.day-mode section{
  color:#1d1d1f;
}
.day-mode .topbar{
  background:rgba(245,245,247,.82);
  border-bottom-color:rgba(60,60,67,.16);
  backdrop-filter:blur(18px);
}

.day-mode .guide-intro article,
.day-mode .guide-place-row,
.day-mode .schedule a,
.day-mode .reviews article,
.day-mode .quick-grid,
.day-mode .transit-list,
.day-mode .notes-list{
  border:0;
  border-radius:18px;
}

.day-mode .section-head h2,
.day-mode .page-head h1,
.day-mode .activity-hero h1,
.day-mode .cover h1,
.day-mode .reviews p{
  font-family:"DM Sans",sans-serif;
  font-weight:700;
  letter-spacing:-.035em;
  color:#1d1d1f;
}
.day-mode .place-card,
.day-mode .guide-card{
  border-radius:18px;
}

.day-mode .notes article,
.day-mode .good-to-know{
  border:0;
  border-radius:18px;
}

.day-mode .primary{
  border-radius:999px;
}

.day-mode .hero>p:not(.eyebrow),
.day-mode .page-head>p,
.day-mode .activity-hero>p:last-child,
.day-mode .notes p{
  color:#6e6e73;
}
.day-mode .quick-grid{
  overflow:hidden;
}
.day-mode .quick-grid div,
.day-mode .transit-list div,
.day-mode .notes-list div{
  border-color:rgba(60,60,67,.12);
}
.rail-sukhumvit{
  background:#78be20;
}
.rail-silom{
  background:#00843d;
  color:#fff;
}
.rail-blue{
  background:#1f4aa8;
  color:#fff;
}
.rail-yellow{
  background:#ffd200;
  color:#050505;
}
.rail-red{
  background:#d71920;
  color:#fff;
}
.rail-generic{
  background:#979797;
  color:#050505;
}
@media (min-width:720px){
  body{
    padding-bottom:0;
  }
  .topbar{
    position:sticky;
    top:0;
    z-index:20;
  }
  .hero>p:not(.eyebrow){
    max-width:640px;
  }
  .hero h1{
    font-size:clamp(32px,3.4vw,46px);
  }
  .notes{
    grid-template-columns:1fr 1fr;
  }
}
/* LUCA Choice monochrome + signal-green visual system */
html,
body{
  background:#000;
  color:#fff;
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:#000;
  border-bottom:1px solid var(--line);
}
.topbar-city,
.place-row span,
.schedule small,
.reviews small,
.quick-grid small,
.chips small{
  color:var(--muted);
}
.brand i,
.notes b,
.good-to-know b,
.schedule b,
.place-row .time small{
  color:var(--accent);
}
.eyebrow{
  color:var(--accent);
}
.hero,
.activity-hero{
  background:#000;
}
.hero{
  border-bottom:1px solid var(--line);
}
.hero h1 em{
  color:var(--accent);
}
.hero>p:not(.eyebrow),
.page-head>p,
.activity-hero>p:last-child{
  color:var(--muted);
}

.primary{
  background:var(--accent);
  color:#000;
}

.section-head h2,
.page-head h1,
.activity-hero h1{
  color:#fff;
}

.page-head,
.good-to-know,
.notes article{
  background:#000;
}
.page-head input{
  border-color:#555;
  background:#0a0a0a;
  color:#fff;
}
.page-head input::placeholder{
  color:#777;
}
.place-card{
  border:1px solid #3e3e3e;
}
.notes article{
  border-color:#1d1d1d;
  background:#1d1d1d;
}
.reviews article{
  border-color:var(--line);
  background:#080808;
}

.notes p{
  color:var(--muted);
}
.chips button,
.chip-link{
  border-color:#555;
  background:#050505;
  color:#fff;
}
.chips button:hover,
.chip-link:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.chips button.active{
  border-color:var(--accent);
  background:#0f1f0f;
  color:var(--accent);
}
.chips button.active small{
  color:var(--accent);
}

.schedule a>span{
  filter:saturate(.9);
}
.activity-venue-list .place-row,
.schedule a{
  margin-bottom:10px;
  padding:17px;
  border:1px solid #1d1d1d;
  border-radius:var(--radius);
  background:#1d1d1d;
}
.activity-venue-list,
.schedule{
  border-top:0;
}
.quick-grid{
  border-color:var(--line);
}
.quick-grid div{
  border-color:var(--line);
}
.topbar,
.list,
.place-results,
.schedule,
.quick-grid{
  border-top:0;
  border-bottom:0;
}
.place-row,
.schedule a,
.good-to-know>p:not(.eyebrow),
.quick-grid div,
.quick-grid a{
  border-bottom:0;
}
.quick-grid{
  border-left:0;
}
.quick-grid div,
.quick-grid a{
  border-right:0;
}
.tags span{
  border:1px solid #454545;
  background:#0a0a0a;
  color:#fff;
}
.reviews strong{
  color:var(--accent);
}
.empty{
  color:#fff;
}
.hero,
.page-head,
.activity-hero{
  text-align:left;
}
.hero>*,
.page-head>*,
.activity-hero>*{
  width:100%;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.page-head .eyebrow,
.page-head h1,
.page-head>p:not(.eyebrow){
  width:100%;
  max-width:720px;
  text-align:left;
}
.page-head h1{
  padding-left:0;
}
.page-head input{
  margin-left:auto;
  margin-right:auto;
}
.hero{
  max-width:760px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}
.hero .primary{
  width:fit-content;
  max-width:100%;
  margin-left:0;
  margin-right:0;
}
.page-head,
.page-head .eyebrow,
.page-head h1,
.page-head>p:not(.eyebrow){
  text-align:center;
}
.page-head .eyebrow,
.page-head h1,
.page-head>p:not(.eyebrow){
  margin-left:auto;
  margin-right:auto;
}
.inside>div:last-child{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.inside span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:40px;
  padding:10px 13px;
  border:1px solid #242424;
  border-radius:10px;
  background:#1d1d1d;
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
}


.quick{
  padding-top:4px;
  padding-bottom:18px;
}
.quick .place-intro{
  margin-bottom:12px;
  padding:7px 12px 9px;
  font-size:18px;
  line-height:1.45;
}
.quick .quick-grid div,
.quick .quick-grid a{
  gap:3px;
  min-height:48px;
  padding:10px 12px;
}
.quick .quick-grid small{
  font-size:9px;
  line-height:1;
}
.quick .quick-grid b{
  font-size:13px;
  line-height:1.25;
}


.event-notes-list{
  display:grid;
  gap:10px;
}
.event-notes-list article{
  padding:16px;
  border:1px solid #1d1d1d;
  border-radius:var(--radius);
  background:#1d1d1d;
}
.event-notes-list small{
  display:block;
  margin-bottom:7px;
  color:#ff6b3d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.event-notes-list strong{
  display:block;
  color:#fff;
  font-size:16px;
  line-height:1.2;
}
.event-notes-list p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.topbar-fade{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  max-width:none;
  height:86px;
  padding:0 max(20px,calc((100% - 720px)/2));
  border-bottom:0;
}
.topbar-fade .brand,
.topbar-fade .topbar-city{
  text-shadow:0 1px 16px #000;
}
.topbar-fade + .page-head,
.topbar-fade + .activity-hero,
.topbar-fade + .empty{
  padding-top:118px;
}

.topbar-overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  max-width:none;
  height:86px;
  padding:0 max(20px,calc((100% - 720px)/2));
  border-bottom:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.96) 0%,rgba(0,0,0,.68) 48%,rgba(0,0,0,0) 100%);
}
.topbar-overlay .brand,
.topbar-overlay .topbar-city{
  text-shadow:0 1px 16px #000;
}

.cover>div:last-child{
  padding-right:0;
}


.toast{
  position:fixed;
  z-index:360;
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  opacity:0;
  transform:translate(-50%,10px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}
@media (max-width:719px){
  .guide-grid{
    grid-auto-flow:column;
    grid-template-columns:none;
  }
  .guide-card{
    transform-origin:center center;
  }
  
  .live-status-wrap{
    align-items:flex-start;
  }
  
}


.day-mode .place-card{
  color:#fff;
}
/* Day mode: keep every content label readable,
including cards that use
   component-specific markup rather than the shared card selectors above. */
.day-mode main,
.day-mode main h1,
.day-mode main h2,
.day-mode main h3,
.day-mode main p,
.day-mode main a,
.day-mode main strong,
.day-mode main em,
.day-mode main small,
.day-mode main time{
  color:#1d1d1f;
}
.day-mode main a span,
.day-mode main a small,
.day-mode main a em{
  color:#6e6e73;
}
.day-mode .guide-card,
.day-mode .guide-card strong,
.day-mode .guide-card span,
.day-mode .guide-card .eyebrow{
  color:#fff;
}
.guide-head{
  min-height:300px;
  display:grid;
  align-content:end;
  background-position:center;
  background-size:cover;
  color:#fff
}
.guide-head .eyebrow{
  color:#00ff09
}
.guide-head h1,
.guide-head p{
  position:relative;
  text-shadow:0 2px 16px #000
}
.guide-head h1{
  color:#fff
}
.guide-head>p:last-child{
  color:#eee
}
.guide-head.hero-light h1,
.guide-head.hero-light>p:last-child{
  color:#111;
  text-shadow:0 1px 10px #fff
}
.guide-head.hero-light{
  background-image:linear-gradient(0deg,rgba(255,255,255,.72),rgba(255,255,255,.08)),var(--guide-cover)
}
.guide-head:not(.hero-light) h1,
.guide-head:not(.hero-light)>p:last-child,
.day-mode .guide-head:not(.hero-light) h1,
.day-mode .guide-head:not(.hero-light)>p:last-child{
  color:#fff;
  text-shadow:0 2px 16px #000
}
.day-mode .guide-head.hero-light h1,
.day-mode .guide-head.hero-light>p:last-child{
  color:#111;
  text-shadow:0 1px 10px #fff
}
.guide-head{
  position:relative;
}
.night-mode .brand-logo{
  filter:invert(1) hue-rotate(180deg)
}
.topbar-overlay .brand-logo{
  filter:invert(1) hue-rotate(180deg)
}


/* Detail page alignment and readable activity labels in both themes. */


/* Keep the weekly activity cards calm and uniform;no decorative edge gradients. */


/* Responsive global navigation */
body{
  padding-bottom:0;
}
#app{
  width:100%;
  min-height:100vh;
  margin:0;
  overflow:visible;
  box-shadow:none;
}
.topbar,
.topbar-fade,
.topbar-overlay{
  position:sticky;
  top:0;
  right:auto;
  left:auto;
  width:100%;
  max-width:none;
  height:72px;
  padding:0;
  transform:none;
  border-bottom:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
  transition:background-color .25s ease,border-color .25s ease;
}
.topbar-fade,
.topbar-overlay{
  position:fixed;
  background:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.3));
}
.day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay{
  border-bottom-color:rgba(29,29,31,.11);
}
.brand{
  font-size:19px;
  letter-spacing:-.055em;
  white-space:nowrap;
}
.topbar-city{
  font-size:9px;
  letter-spacing:.16em;
}

.topbar-fade ~ .page-head,
.topbar-fade ~ .activity-hero,
.topbar-fade ~ .empty{
  padding-top:150px;
}
@media (min-width:720px) and (max-width:1023px){
  .topbar-city{
    display:none;
  }
}
@media (max-width:719px){
  .topbar,
.topbar-fade,
.topbar-overlay{
    height:64px;
  }
  .brand{
    font-size:17px;
  }
  .brand-logo{
    max-width:124px;
    height:24px;
  }
  .topbar-city{
    display:none;
  }
  .topbar-fade ~ .page-head,
.topbar-fade ~ .activity-hero,
.topbar-fade ~ .empty{
    padding-top:118px;
  }
}

/* A one-shot sunrise / nightfall transition,
never a permanent overlay. */
html::before,
html::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  opacity:0;
}
html.theme-to-day::before{
  background:radial-gradient(circle at 76% 12%,rgba(255,243,193,.92),rgba(255,197,91,.46) 24%,rgba(255,155,61,.12) 52%,transparent 74%);
  animation:luca-sunrise 1.35s cubic-bezier(.2,.72,.2,1) both;
}
html.theme-to-day::after{
  background:linear-gradient(155deg,rgba(255,239,194,.62),rgba(255,189,91,.2) 46%,transparent 82%);
  mix-blend-mode:soft-light;
  animation:luca-day-wash 1.4s ease both;
}
html.theme-to-night::before{
  background:linear-gradient(165deg,#607b96 0%,#354e6c 34%,#192a45 70%,#080d18 100%);
  animation:luca-nightfall 1.5s cubic-bezier(.4,0,.25,1) both;
}
html.theme-to-night::after{
  background:radial-gradient(ellipse at 72% 4%,rgba(255,177,125,.34),rgba(114,139,180,.22) 28%,rgba(35,58,91,.12) 54%,transparent 72%);
  mix-blend-mode:screen;
  animation:luca-night-sky 1.25s ease-out both;
}
@keyframes luca-sunrise  {
  0% {
    opacity:0;
    transform:scale(.2);
    transform-origin:76% 12%
  }
  38% {
    opacity:.95
  }
  100% {
    opacity:0;
    transform:scale(1.7);
    transform-origin:76% 12%
  }
}
@keyframes luca-day-wash  {
  0%,100% {
    opacity:0
  }
  36% {
    opacity:.72
  }
}
@keyframes luca-nightfall  {
  0% {
    opacity:.92;
    filter:saturate(.82) brightness(1.08)
  }
  42% {
    opacity:.86;
    filter:saturate(1) brightness(.88)
  }
  72% {
    opacity:.58;
    filter:saturate(1.08) brightness(.66)
  }
  100% {
    opacity:0;
    filter:saturate(1) brightness(.4)
  }
}
@keyframes luca-night-sky  {
  0% {
    opacity:.78
  }
  38% {
    opacity:.42
  }
  72%,100% {
    opacity:0
  }
}
@media (prefers-reduced-motion:reduce){
  html.theme-to-day::before,
html.theme-to-day::after,
html.theme-to-night::before,
html.theme-to-night::after{
    animation:none;
  }
}

.activity-hero h1{
  font-family:"DM Sans",sans-serif;
  font-optical-sizing:auto;
  font-synthesis:none;
  font-weight:750;
  letter-spacing:-.045em;
}

.day-mode .activity-hero h1,
.night-mode .activity-hero h1{
  font-family:"DM Sans",sans-serif;
}


.radar-meter-wrap{
  min-width:0;
}
.radar-hours{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(10px,1fr);
  align-items:end;
  gap:3px;
  width:100%;
  height:49px;
  overflow:hidden;
}
.radar-hour{
  position:relative;
  display:grid;
  align-items:end;
  min-width:0;
  height:49px;
  padding-bottom:14px;
}
.radar-hour i{
  display:block;
  width:100%;
  height:var(--hour-level,12%);
  min-height:3px;
  border-radius:3px 3px 1px 1px;
  background:#393938;
}
.radar-hour small{
  position:absolute;
  bottom:0;
  left:50%;
  color:#777;
  font-size:6px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  transform:translateX(-50%);
}
.radar-hour.is-now i{
  box-shadow:0 0 12px color-mix(in srgb,var(--radar-color) 28%,transparent);
}
.radar-hour.has-live-status i{
  background:linear-gradient(180deg,color-mix(in srgb,var(--radar-color) 72%,#fff),var(--radar-color));
  animation:radar-hour-breathe 2.4s ease-in-out infinite;
}
.radar-hour.is-now small{
  color:var(--radar-color);
}
.radar-hours-unavailable{
  color:#777;
  font-size:9px;
  font-weight:700;
}
.day-mode .radar-hour i{
  background:#dededc;
}
.day-mode .radar-hour.has-live-status i{
  background:linear-gradient(180deg,color-mix(in srgb,var(--radar-color) 66%,#fff),var(--radar-color));
}
@keyframes radar-hour-breathe  {
  0%,100%  {
    opacity:.82;
  }
  50%  {
    opacity:1;
  }
}
@media (prefers-reduced-motion:reduce){
  .radar-hour.has-live-status i{
    animation:none;
  }
}
@media (max-width:719px){
  
  
  
  
  
  
  
  
  .radar-hours{
    height:56px;
    gap:4px;
  }
  .radar-hour{
    height:56px;
  }
}

/* Absolute last pass: stable full-width mobile Night Card detail. */


/* Mobile Night Card detail final composition. */


/* Final mobile Night Card detail width and owner controls. */


/* Final homepage lead carousel lock: three-up desktop/tablet, one-up mobile. */


/* Absolute last pass: stable full-width mobile Night Card detail. */

/* True final mobile Night Card detail: remove the inner popup card constraint. */


/* Global logo scale: keep the brand present without dominating the first viewport. */
.brand-logo,
.day-mode .brand-logo,
.night-mode .brand-logo,
.topbar-overlay .brand-logo,
.topbar-fade .brand-logo,
.day-mode .topbar-overlay .brand-logo,
.day-mode .topbar-fade .brand-logo,
.night-mode .topbar-overlay .brand-logo,
.night-mode .topbar-fade .brand-logo{
  width:auto;
  max-width:260px;
  height:34px;
  max-height:34px;
  object-fit:contain;
  object-position:left center;
}
@media (max-width:1024px){
  .brand-logo,
.day-mode .brand-logo,
.night-mode .brand-logo,
.topbar-overlay .brand-logo,
.topbar-fade .brand-logo,
.day-mode .topbar-overlay .brand-logo,
.day-mode .topbar-fade .brand-logo,
.night-mode .topbar-overlay .brand-logo,
.night-mode .topbar-fade .brand-logo{
    max-width:238px;
    height:32px;
    max-height:32px;
  }
}
@media (max-width:719px){
  .brand-logo,
.day-mode .brand-logo,
.night-mode .brand-logo,
.topbar-overlay .brand-logo,
.topbar-fade .brand-logo,
.day-mode .topbar-overlay .brand-logo,
.day-mode .topbar-fade .brand-logo,
.night-mode .topbar-overlay .brand-logo,
.night-mode .topbar-fade .brand-logo{
    max-width:232px;
    height:30px;
    max-height:30px;
  }
}
/* The navigation surface itself fades;it also paints the phone safe area. */
.topbar,
.topbar-fade,
.topbar-overlay,
.day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay{
  border-bottom:0;
}

.topbar::after,
.topbar-fade::after,
.topbar-overlay::after{
  content:none;
}
.topbar::before,
.topbar-fade::before,
.topbar-overlay::before{
  content:none;
}


.topbar-fade{
  background:linear-gradient(to bottom,rgba(0,0,0,.96) 0%,rgba(0,0,0,.68) 48%,rgba(0,0,0,0) 100%);
}
.brand-logo{
  display:block;
  width:min(48vw,210px);
  max-width:210px;
  height:auto;
  max-height:40px;
  object-fit:contain;
  object-position:left center;
}
.day-mode .topbar-fade{
  background:transparent;


  background-color:transparent;
}
.topbar-fade ~ .page-head{
  padding-top:150px;
}
.topbar-fade ~ .activity-hero{
  padding-top:150px;
}
.good-to-know{
  margin-left:20px;
  margin-right:20px;
  box-sizing:border-box;
}
.good-to-know>p:not(.eyebrow){
  border-top:0;
}
@media (min-width:720px){
  .topbar{
    max-width:760px;
    padding:0 20px;
  }
  .topbar-fade{
    max-width:none;
    padding:0 max(20px,calc((100% - 720px)/2));
  }
  .topbar-overlay{
    max-width:none;
    padding:0 max(20px,calc((100% - 720px)/2));
  }
  .hero{
    padding:42px 20px 20px;
  }
  .hero>*{
    max-width:720px;
  }
}
.place-card,
.guide-card,
.guide-place-row,
.schedule-row,
.chips button,
.chip-link{
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease;
}
.place-card:hover,
.guide-card:hover,
.guide-place-row:hover,
.schedule-row:hover{
  transform:translateY(-2px);
  border-color:#3a3a3a;
}
.place-card:active,
.guide-card:active,
.guide-place-row:active,
.schedule-row:active{
  transform:translateY(0) scale(.99);
}

.schedule-row:hover b{
  color:var(--accent);
}
.live-status strong i{
  animation:status-pulse 1.8s ease-in-out infinite;
}
@keyframes status-pulse  {
  0%,100%  {
    opacity:.65;
    transform:scale(.92);
  }
  50%  {
    opacity:1;
    transform:scale(1.16);
  }
}
@keyframes meter-fill  {
  0%,100%  {
    transform:scaleX(.28);
    opacity:.68;
  }
  50%  {
    transform:scaleX(1);
    opacity:1;
  }
}
@media (prefers-reduced-motion:reduce){
  *,
*::before,
*::after{
    animation:none;
    transition:none;
    scroll-behavior:auto;
  }
}
@media (max-width:719px){
  .guide-card:hover{
    transform:translateY(-2px) scale(.97);
  }
  .guide-card.is-active:hover{
    transform:translateY(-2px) scale(1.03);
  }
  .guide-card:active{
    transform:scale(.96);
  }
  .guide-card.is-active:active{
    transform:scale(1.02);
  }
}
.payment-methods{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px
}
.payment-icon{
  display:grid;
  width:24px;
  height:24px;
  flex:0 0 24px;
  padding:0;
  border:0;
  border-radius:5px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(60,60,67,.14)
}
.payment-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}
.payment-icon-cash img{
  transform:scale(1.38)
}
/* Keep detail-page color corrections independent of the global layout. */

/* Compact detail-page utility bar. */


.address-line{
  display:inline
}
.maps-pill{
  display:inline-flex;
  align-items:center;
  gap:3px;
  width:fit-content;
  margin-left:9px;
  padding:5px 9px;
  border:0;
  border-radius:999px;
  background:#303030;
  color:#ddd;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  vertical-align:middle;
  box-shadow:none
}
.maps-pill span{
  font-size:12px;
  line-height:1
}
.maps-pill:hover,
.maps-pill:focus-visible{
  background:#414141;
  color:#fff
}
.day-mode .maps-pill{
  border:0;
  background:#e5e5e7;
  color:#3a3a3c
}
.day-mode .maps-pill:hover,
.day-mode .maps-pill:focus-visible{
  background:#d8d8dc;
  color:#1d1d1f
}


@keyframes status-marquee  {
  to  {
    transform:translateX(calc(-50% - 16px));
  }
}


/* Give the weekly schedule its own soft signal surface. */


/* Final navigation surface: text-only links and a long,
soft fade. */
.topbar,
.topbar-fade,
.topbar-overlay,
.day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay{
  height:calc(104px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  border:0;
}


/* Detail routes do not decide logo color;the active day/night state does. */
.day-mode .brand-logo,
.day-mode .topbar-overlay .brand-logo,
.day-mode .topbar-fade .brand-logo{
  filter:none;
}
.night-mode .brand-logo,
.night-mode .topbar-overlay .brand-logo,
.night-mode .topbar-fade .brand-logo{
  filter:invert(1) hue-rotate(180deg);
}
/* Day desktop/tablet links are plain text,
never pills or filled buttons. */

/* The status row now contains crowd information only. */


/* Roomier crowd status with a clearer signal and quieter action label. */


/* Crowd level color states. */


/* Animate the active range and soften its position marker. */


@keyframes crowd-meter-load  {
  0%  {
    transform:scaleX(0);
    opacity:.72;
  }
  100%  {
    transform:scaleX(1);
    opacity:1;
  }
}

/* Integrated crowd meter: the text now lives inside the animated bar. */


/* Detail-page polish: calmer first-screen hierarchy and quieter utilities. */


/* Quick Info and crowd status form one stepped card. */


/* Detail cards stay flat;Schedule remains the single elevated module. */


/* Global surface refinement: flatter cards and restrained corners. */
:root{
  --surface-radius:8px;
  --section-radius:12px;
  --image-radius:6px;
}
.place-card,
.guide-card{
  border-radius:var(--image-radius);
}


.guide-place-row,
.guide-intro article,
.notes article,
.reviews article,
.quick-grid,
.transit-list,
.notes-list,
.event-notes-list article{
  border-radius:var(--surface-radius);
}


.guide-place-row,
.guide-intro article,
.notes article,
.reviews article,
.quick-grid,
.transit-list,
.notes-list,
.event-notes-list article,
.day-mode .guide-place-row,
.day-mode .guide-intro article,
.day-mode .reviews article,
.day-mode .quick-grid,
.day-mode .transit-list,
.day-mode .notes-list{
  box-shadow:none;
}
/* Keep the schedule elevated without making its visual edges wider than sibling cards. */


@media (max-width:719px){
  :root{
    --surface-radius:7px;
    --section-radius:10px;
    --image-radius:5px;
  }
}


/* Keep the stepped Quick Info header aligned with the global corner scale. */


/* Crowd strip follows the Quick Info card's top-right corner exactly. */


/* Day and night share one local type system. */
html,
body,
body *,
body *::before,
body *::after,
button,
input,
select,
textarea{
  font-family:"DM Sans",sans-serif;
}
/* Global rhythm and type scale. */
:root{
  --type-xs:10px;
  --type-sm:12px;
  --type-body:15px;
  --type-lead:17px;
  --type-h3:19px;
  --type-h2:28px;
  --type-h1:clamp(40px,7vw,60px);
  --space-section:60px;
  --space-section-compact:40px;
}
body{
  font-size:var(--type-body);
  line-height:1.55;
}
h1,
h2,
h3,
p{
  text-wrap:pretty;
}
h1,
h2,
h3{
  margin-top:0;
  letter-spacing:-.035em;
}
p{
  line-height:1.55;
}
.eyebrow{
  margin-bottom:11px;
  font-size:var(--type-xs);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.14em;
}
.section-head{
  margin-bottom:22px;
  padding-top:23px;
}
.section-head h2{
  font-size:var(--type-h2);
  font-weight:720;
  line-height:1.05;
  letter-spacing:-.04em;
}
.section-head > a,
.text-button{
  font-size:var(--type-sm);
}
.page-head h1,
.activity-hero h1{
  font-size:var(--type-h1);
  line-height:.98;
}
.page-head > p:not(.eyebrow),
.activity-hero > p:last-child{
  max-width:520px;
  font-size:var(--type-lead);
  line-height:1.55;
}
/* Consistent breathing room between primary page chapters. */
#app > section:not(.page-head):not(.hero):not(.activity-hero):not(.filters):not(.good-to-know):not(.home-night-hero):not(.home-entry-cards){
  padding-top:var(--space-section);
  padding-bottom:var(--space-section);
}
.page-head,
.activity-hero{
  padding-top:64px;
  padding-bottom:54px;
}
.filters{
  padding-top:34px;
  padding-bottom:34px;
}
.site-footer{
  padding-top:40px;
  padding-bottom:34px;
}
/* Detail pages: clear hierarchy without oversized labels or dense stacks. */


/* List and live-data pages use the same supporting scale. */


@media (max-width:719px){
  :root{
    --type-body:14px;
    --type-lead:16px;
    --type-h3:18px;
    --type-h2:25px;
    --type-h1:clamp(34px,10vw,44px);
    --space-section:48px;
    --space-section-compact:32px;
  }
  .section-head{
    margin-bottom:18px;
  }
  .page-head,
.activity-hero{
    padding-bottom:44px;
  }
  
  
  
  
  
  
  
}
/* Featured Guides carousel: taller covers,
contained copy,
tighter handoff. */
.guide-card strong,
.guide-card span{
  min-width:0;
  overflow:hidden;
}
.guide-card strong{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
}
.guide-card span{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
@media (max-width:719px){
  .guide-grid{
    grid-auto-columns:min(64vw,260px);
    gap:8px;
    padding:12px 20px 10px;
    scroll-padding-inline:20px;
  }
  .guide-card{
    min-height:0;
    aspect-ratio:1/1;
    padding:14px;
    transform:scale(.99);
  }
  .guide-card.is-active{
    transform:scale(1.01);
  }
  .guide-card strong{
    font-size:20px;
    line-height:1.05;
  }
  .guide-card span{
    margin-top:8px;
    font-size:11px;
    line-height:1.35;
  }
}
/* Fixed topbar clearance must win over the global section rhythm. */

/* Final rail-card surface lock: these modules keep white cards across all devices. */


/* My Cards empty opportunity: a real slot in the card grid. */


/* Deadline row copy lockup: keep the left label to exactly two lines. */


/* Final deadline note: quiet status text, not a numbers module. */


/* Mobile follows the standard Safari layout: an opaque navigation surface
   below the system status bar,
with scrolling content hidden underneath. */
@media (max-width:719px){
  .topbar,
.topbar-fade,
.topbar-overlay{
    top:0;
  }
  .topbar::before,
.topbar-fade::before,
.topbar-overlay::before,
.topbar::after,
.topbar-fade::after,
.topbar-overlay::after{
    content:none;
  }
}
/* Shareable weekly schedule card. */

.schedule-share-trigger{
  position:absolute;
  right:0;
  bottom:1px;
  padding:8px 10px;
  border:1px solid rgba(104,76,255,.3);
  border-radius:999px;
  background:transparent;
  color:var(--interaction-accent);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.schedule-share-trigger:hover,
.schedule-share-trigger:focus-visible{
  border-color:var(--interaction-accent);
  background:var(--interaction-accent-soft);
}
.day-mode .schedule-share-trigger{
  border-color:rgba(104,76,255,.28);
  color:var(--interaction-accent);
}
.schedule-share-modal{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(12px);
}
.schedule-share-modal[hidden]{
  display:none;
}
.schedule-share-sheet{
  position:relative;
  width:min(100%,430px);
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:22px;
  border:1px solid #303030;
  border-radius:24px;
  background:#111;
  color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.58);
}
.schedule-share-close{
  position:absolute;
  top:14px;
  right:16px;
  border:0;
  background:transparent;
  color:#aaa;
  font-size:26px;
  cursor:pointer;
}
.schedule-share-sheet h2{
  margin:0 0 16px;
  font-size:24px;
}
.schedule-share-preview{
  display:grid;
  place-items:center;
  min-height:280px;
  overflow:hidden;
  border-radius:18px;
  background:#080808;
  color:#777;
  font-size:12px;
}
.schedule-share-preview img{
  display:block;
  width:100%;
  height:auto;
}
.schedule-share-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.schedule-share-actions button{
  min-height:42px;
  padding:8px;
  border:1px solid #343434;
  border-radius:12px;
  background:#1c1c1c;
  color:#fff;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.schedule-share-actions button:first-child{
  border-color:#ff633f;
  background:#ff633f;
}
.schedule-share-sheet .form-note{
  min-height:18px;
  margin:10px 0 0;
  color:#aaa;
  font-size:11px;
  text-align:center;
}
.day-mode .schedule-share-sheet{
  border-color:#ddd;
  background:#fff;
  color:#1d1d1f;
}
.day-mode .schedule-share-preview{
  background:#f3f3f5;
}
.day-mode .schedule-share-actions button{
  border-color:#ddd;
  background:#f5f5f7;
  color:#1d1d1f;
}
.day-mode .schedule-share-actions button:first-child{
  border-color:#ff633f;
  background:#ff633f;
  color:#fff;
}
@media (max-width:560px){
  
  .schedule-share-trigger{
    right:auto;
    bottom:0;
    left:0;
  }
  .schedule-share-sheet{
    padding:18px;
    border-radius:20px;
  }
}

/* Quiet metadata and a single soft boundary before article discussions. */
.article-detail-page .article-discussion{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid color-mix(in srgb, var(--account-border) 58%, transparent);
}
/* Tablet and desktop composition: add room without scaling mobile UI up. */
@media (min-width:720px){
  section,
.empty{
    max-width:920px;
    padding-right:30px;
    padding-left:30px;
  }
  .hero,
.cover{
    max-width:920px;
  }
  .hero > *,
.page-head > *,
.activity-hero > *,
.page-head .eyebrow,
.page-head h1,
.page-head > p:not(.eyebrow){
    max-width:860px;
  }
  .guide-grid{
    grid-auto-flow:row;
    grid-auto-columns:minmax(0,1fr);
    grid-template-columns:minmax(0,16fr) repeat(2,minmax(0,9fr));
    align-items:start;
    overflow:visible;
  }
  .guide-card{
    width:100%;
    max-height:none;
    aspect-ratio:3 / 4;
    padding:17px;
  }
  .guide-card:first-child{
    grid-column:auto;
    aspect-ratio:4 / 3;
  }
  .guide-card strong{
    font-size:clamp(20px,2.35vw,24px);
  }
  
  
  
}
@media (min-width:1024px){
  section,
.empty{
    max-width:1080px;
    padding:52px 36px;
  }
  .hero,
.cover{
    max-width:1080px;
  }
  .hero{
    padding-right:36px;
    padding-left:36px;
  }
  .hero > *,
.page-head > *,
.activity-hero > *,
.page-head .eyebrow,
.page-head h1,
.page-head > p:not(.eyebrow){
    max-width:1008px;
  }
  .guide-grid{
    grid-template-columns:minmax(0,16fr) repeat(2,minmax(0,9fr));
    gap:16px;
  }
  .guide-card{
    width:100%;
    height:auto;
    aspect-ratio:3 / 4;
  }
  .guide-card:first-child{
    grid-column:auto;
    aspect-ratio:4 / 3;
  }
  
  .cover{
    height:390px;
  }
  .cover h1{
    font-size:40px;
  }
  .quick-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .notes,
.reviews{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  
  
  
}
/* Night Card typography and Guide-style detail on larger screens. */

.night-card-author b,
.night-card-author small{
  color:#fff;
  font-style:normal;
}


.night-card-overlay small,
.night-card-overlay strong,
.night-card-overlay b,
.night-card-overlay em{
  font-style:normal;
}
.night-card-overlay small{
  color:#fff;
}
.night-card-overlay strong{
  color:#fff;
}
.night-card-overlay b{
  color:#fff;
  letter-spacing:-.05em;
}
.night-card-overlay em{
  color:#fff;
}


.night-own{
  max-width:none;
  margin:0;
  padding:62px 0;
}


.night-card{
  display:grid;
  min-width:0;
  overflow:hidden;
  border:1px solid #262626;
  border-radius:22px;
  background:#0b0b0b;
  color:#fff;
}

.night-card footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.night-card footer small{
  font-size:9px;
}
.night-card-photo{
  background:center/cover;
}
.night-card footer{
  align-items:end;
  border-top:1px solid #222;
}
.night-card footer span{
  font-size:11px;
  font-weight:750;
}


@media (max-width:719px){
  .night-card{
    flex:0 0 min(84vw,340px);
    scroll-snap-align:start;
  }
}
/* Venue detail pages use an editorial lead and a main/aside content grid. */

/* Homepage editorial rows become true columns on larger screens. */


/* Navigation follows the same responsive grid as the page content. */
@media (min-width:720px) and (max-width:1023px){
  .topbar,
.topbar-fade,
.topbar-overlay{
    justify-content:center;
    width:100%;
    max-width:none;
    padding-right:0;
    padding-left:0;
  }
}


.night-card-quick-actions button svg{
  fill:none;
  stroke:currentColor;
}


/* My Night navigation clearance and Guide-style card detail. */


/* Final Night Card detail overrides. */
.night-card-author img,
.night-card-author > span{
  background:rgba(20,20,20,.72);
  color:#fff;
  border-color:rgba(255,255,255,.85);
}
.night-card-author b,
.night-card-author small,
.night-card-overlay small,
.night-card-overlay strong,
.night-card-overlay b,
.night-card-overlay em{
  font-style:normal;
  color:#fff;
}
.night-card-overlay small{
  margin-top:auto;
}
.night-card-overlay b{
  margin-top:18px;
  font-size:24px;
}
.night-card-overlay em{
  font-size:19px;
}

/* My Night starts below the fixed navigation;day mode uses a flat blurred surface. */

@media (min-width:720px){
  .day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay,
body.day-mode .topbar{
    background:rgba(245,245,247,.78);
    color:#1d1d1f;
    -webkit-backdrop-filter:blur(18px) saturate(135%);
    backdrop-filter:blur(18px) saturate(135%);
  }
}
/* Shared desktop navigation follows the compact pill reference. */
@media (min-width:720px){
  .topbar,
.topbar-fade,
.topbar-overlay{
    color:#fff;
  }
  .account-nav-guest{
    padding-left:11px;
  }
}
/* Final My Night overrides keep the plaza layout independent from the public page system. */


.night-masonry{
  column-count:2;
  column-gap:12px;
}
.night-masonry .night-card{
  display:inline-grid;
  width:100%;
  margin:0 0 12px;
  break-inside:avoid;
  border:0;
  border-radius:16px;
  background:#eee;
  color:#111;
  box-shadow:0 4px 12px rgba(0,0,0,.07);
  cursor:pointer;
}
.night-card-photo{
  aspect-ratio:4/5;
}
.night-card footer{
  padding:9px 13px;
  border-color:#ddd;
}
.night-card footer span{
  color:#111;
}
.night-card footer small{
  color:#888;
}


@media (min-width:1024px){
  .night-masonry{
    column-count:3;
  }
}
@media (max-width:719px){
  
  
  
  
  .night-masonry{
    column-gap:8px;
  }
  .night-masonry .night-card{
    margin-bottom:8px;
    border-radius:13px;
  }
  
  
  
  
  
}
/* Editorial footer: wide three-part discovery strip with a compact utility row. */
.site-footer{
  width:100%;
  max-width:none;
  margin-top:var(--space-section-compact);
  padding:0;
  border-top:1px solid #202020;
  background:#080808;
  color:#fff;
}
.footer-feature-row{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(220px,.85fr) minmax(260px,1fr);
  max-width:1200px;
  margin:0 auto;
  padding:44px 36px 38px;
}
.site-footer .footer-feature{
  max-width:none;
  margin:0;
  padding:0 40px;
  border-left:1px solid #262626;
  background:transparent;
}
.site-footer .footer-feature:first-child{
  padding-left:0;
  border-left:0;
}
.site-footer .footer-feature:last-child{
  padding-right:0;
}
.footer-kicker{
  position:relative;
  margin:0 0 14px;
  padding-left:11px;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.12em;
}
.footer-kicker::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent);
  transform:translateY(-50%);
}
.footer-feature > p:not(.footer-kicker),
.footer-explore > div > p:not(.footer-kicker){
  margin:0;
  color:#b5b5b5;
  font-size:14px;
  line-height:1.5;
}
.footer-subscribe{
  display:flex;
  gap:8px;
  margin-top:20px;
}
.footer-subscribe input{
  width:100%;
  min-width:0;
  height:44px;
  padding:0 14px;
  border:1px solid #323232;
  border-radius:10px;
  outline:0;
  background:#151515;
  color:#fff;
  font-size:13px;
}
.footer-subscribe input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.footer-subscribe button{
  flex:none;
  height:44px;
  padding:0 18px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#050505;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.footer-socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.footer-social-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #303030;
  border-radius:50%;
  background:#131313;
  color:#fff;
}
.footer-social-icon svg{
  width:20px;
  height:20px;
  overflow:visible;
}
.footer-social-icon svg *{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.footer-social-icon svg .footer-social-dot{
  fill:currentColor;
  stroke:none;
}
.footer-socials a{
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.footer-socials a:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-2px);
}
.footer-explore{
  display:grid;
  grid-template-columns:minmax(120px,1fr) 145px;
  align-items:center;
  gap:20px;
}
.footer-mini-map{
  position:relative;
  display:block;
  height:104px;
  border:1px solid #303030;
  border-radius:16px;
  background:linear-gradient(145deg,#171717,#0d0d0d);
  overflow:hidden;
}
.footer-mini-map::before,
.footer-mini-map::after{
  content:"";
  position:absolute;
  width:150%;
  height:1px;
  background:#363636;
  transform:rotate(-24deg);
}
.footer-mini-map::before{
  top:29px;
  left:-26px;
}
.footer-mini-map::after{
  top:65px;
  left:-42px;
  transform:rotate(17deg);
}
.footer-map-road{
  position:absolute;
  z-index:1;
  display:block;
  height:1px;
  background:#454545;
  transform-origin:left;
}
.footer-map-road-one{
  top:17px;
  left:42px;
  width:120px;
  transform:rotate(67deg);
}
.footer-map-road-two{
  top:80px;
  left:11px;
  width:125px;
  transform:rotate(-35deg);
}
.footer-map-river{
  position:absolute;
  top:-10px;
  left:77px;
  width:17px;
  height:130px;
  border:5px solid #1e343a;
  border-top:0;
  border-bottom:0;
  border-radius:50%;
  transform:rotate(12deg);
}
.footer-map-pin{
  position:absolute;
  z-index:2;
  width:8px;
  height:8px;
  border:2px solid #080808;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 65%,transparent);
}
.footer-map-pin-one{
  top:24px;
  left:37px;
}
.footer-map-pin-two{
  top:49px;
  right:30px;
}
.footer-map-pin-three{
  bottom:20px;
  left:58px;
}
.footer-mini-map span{
  position:absolute;
  z-index:3;
  right:9px;
  bottom:8px;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
}
.footer-inner{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:28px;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:22px 36px;
  border-top:1px solid #252525;
  text-align:left;
}
.footer-brand{
  margin:0;
  color:#fff;
  font-size:16px;
}
.footer-copy{
  justify-self:end;
  margin:0;
  color:#747474;
  font-size:11px;
  line-height:1.45;
  text-align:right;
}
.footer-copy span{
  display:block;
}
.day-mode .site-footer{
  border-color:#e5e5e5;
  background:#fff;
  color:#1d1d1f;
}
.day-mode .site-footer .footer-feature,
.day-mode .footer-inner{
  border-color:#e6e6e6;
  background:transparent;
}
.day-mode .footer-kicker,
.day-mode .footer-brand,
.day-mode .footer-socials span,
.day-mode .footer-socials a{
  color:#1d1d1f;
}
.day-mode .footer-feature > p:not(.footer-kicker),
.day-mode .footer-explore > div > p:not(.footer-kicker){
  color:#6e6e73;
}
.day-mode .footer-social-icon{
  border-color:#dedede;
  background:#f5f5f7;
}
.day-mode .footer-subscribe input{
  border-color:#e0e0e0;
  background:#f5f5f7;
  color:#1d1d1f;
}
.day-mode .footer-mini-map{
  border-color:#e2e2e2;
  background:linear-gradient(145deg,#fafafa,#efefef);
}
.day-mode .footer-mini-map::before,
.day-mode .footer-mini-map::after,
.day-mode .footer-map-road{
  background:#d2d2d2;
}
.day-mode .footer-mini-map span{
  color:#1d1d1f;
}
@media (min-width:720px) and (max-width:1023px){
  .footer-feature-row{
    grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr) minmax(0,1fr);
    padding:36px 22px 32px;
  }
  .site-footer .footer-feature{
    padding:0 20px;
  }
  .footer-explore{
    grid-template-columns:1fr;
    align-content:start;
    gap:16px;
  }
  .footer-mini-map{
    width:100%;
    height:82px;
  }
  .footer-subscribe{
    flex-direction:column;
  }
  .footer-subscribe button{
    width:100%;
  }
  .footer-inner{
    padding-right:22px;
    padding-left:22px;
  }
  .footer-copy{
    max-width:190px;
  }
}
@media (max-width:719px){
  .footer-feature-row{
    display:block;
    padding:36px 20px 14px;
  }
  .site-footer .footer-feature{
    padding:28px 0;
    border-top:1px solid #262626;
    border-left:0;
  }
  .site-footer .footer-feature:first-child{
    padding-top:0;
    border-top:0;
  }
  .footer-subscribe{
    width:100%;
  }
  .footer-follow{
    text-align:left;
  }
  .footer-socials{
    gap:10px 20px;
  }
  .footer-explore{
    grid-template-columns:1fr 42%;
    gap:18px;
  }
  .footer-mini-map{
    height:112px;
  }
  .footer-inner{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:17px;
    padding:24px 20px 32px;
  }
  .footer-copy{
    justify-self:auto;
    text-align:left;
  }
  .day-mode .site-footer .footer-feature{
    border-color:#e6e6e6;
  }
}


/* Homepage discovery modules. */


.map-road{
  position:absolute;
  width:1px;
  height:140%;
  background:rgba(255,255,255,.09);
  transform:rotate(34deg);
}
.map-road-one{
  top:-20%;
  left:38%;
}
.map-road-two{
  top:-20%;
  right:28%;
  transform:rotate(-28deg);
}


@media (max-width:719px){
  
  
  
  
  
  .pulse-label{
    min-width:0;
    padding-left:0;
  }
  .pulse-label strong{
    font-size:18px;
  }
  .pulse-marquee{
    width:100%;
  }
  .pulse-track{
    width:max-content;
    min-width:max-content;
    gap:10px;
    padding-right:12px;
    padding-left:0;
  }
  .pulse-item b{
    font-size:20px;
  }
  .pulse-track > i{
    font-size:20px;
  }
  .pulse-more{
    width:30px;
    min-width:30px;
    min-height:30px;
    padding:0;
    font-size:20px;
    line-height:1;
  }
  .pulse-more span{
    display:none;
  }
  .pulse-more b{
    font-size:20px;
  }
  
  
  
}
/* Editorial article detail with a persistent,
Xiaohongshu-inspired interaction rail. */
body.article-route{
  padding-bottom:calc(82px + env(safe-area-inset-bottom));
}


.article-discussion{
  scroll-margin-top:110px;
}
.article-comment-list{
  display:grid;
  gap:0;
  margin-top:18px;
  border-top:1px solid var(--account-border);
}
.article-comment{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid var(--account-border);
}
.article-comment > div{
  min-width:0;
}
.article-comment header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.article-comment header strong{
  font-size:13px;
}
.article-comment.is-publisher header strong{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.article-comment.is-publisher header strong::after{
  content:"Author";
  display:inline-flex;
  align-items:center;
  min-height:12px;
  padding:1px 4px;
  border:0;
  border-radius:999px;
  background:#6439fc;
  color:#fff;
  font-size:7px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.article-comment header small{
  color:var(--account-muted);
  font-size:10px;
}
.article-comment > div > p{
  margin:7px 0 0;
  font-size:14px;
  line-height:1.5;
}
.article-comment-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px;
  gap:9px;
  margin-top:0;
}
.article-comment-form textarea{
  min-height:48px;
  padding:12px 14px;
  resize:vertical;
  border:1px solid var(--account-border);
  border-radius:16px;
  background:var(--account-surface);
  color:var(--account-text);
  font-size:16px;
}
.article-comment-form button{
  width:48px;
  min-width:48px;
  height:48px;
  min-height:48px;
  padding:0;
  border:0;
  border-radius:14px;
  background:var(--luca-purple);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.article-comment-signin{
  min-width:72px;
  min-height:46px;
  border:0;
  border-radius:999px;
  background:var(--luca-purple);
  color:#fff;
  font-weight:800;
}
.article-comment-form .form-note{
  grid-column:1 / -1;
  margin:0;
}
.article-action-bar{
  position:fixed;
  z-index:70;
  right:0;
  bottom:0;
  left:0;
  display:grid;
  margin:0 auto;
  border-top:1px solid var(--account-border);
}
.day-mode .article-action-bar{
  color:#1d1d1f;
}
.article-action-bar button{
  position:static;
  place-items:center;
  width:auto;
  height:auto;
  border:0;
  background:transparent;
  color:inherit;
  filter:none;
  cursor:pointer;
}
.article-action-bar button svg{
  width:23px;
  height:23px;
}
.article-action-bar button > span{
  font-size:10px;
  font-weight:700;
}
.article-action-bar .active,
.article-action-bar .saved{
  color:var(--luca-purple);
}
.article-comment-icon{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media (min-width:720px){
  body.article-route{
    padding-bottom:96px;
  }
  
  
  .article-action-bar{
    bottom:22px;
    border:1px solid var(--account-border);
    border-radius:22px;
    padding:7px 14px;
    box-shadow:0 16px 44px rgba(0,0,0,.28);
  }
}
.account-nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.account-modal{
  position:fixed;
  z-index:1000;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:grid;
  place-items:end center;
  width:100vw;
  min-width:100%;
  height:100dvh;
  margin:0;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  overflow-y:auto;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.account-modal[hidden]{
  display:none;
}
.account-sheet{
  position:relative;
  width:min(100%,440px);
  padding:30px 24px 24px;
  border:1px solid #353535;
  border-radius:22px;
}
.account-sheet h2{
  margin:6px 0 10px;
  font-size:30px;
}
.account-sheet form,
.review-form{
  display:grid;
  gap:13px;
  margin-top:20px;
}
.account-sheet label,
.review-form label{
  display:grid;
  gap:6px;
  color:#bbb;
  font-size:13px;
}
.account-sheet input,
.review-form select,
.review-form textarea{
  width:100%;
  border:1px solid #3a3a3a;
  border-radius:10px;
  padding:12px;
  background:#080808;
  color:#fff;
  font:inherit;
}
.account-sheet button,
.review-contribute button{
  min-height:44px;
  border:1px solid var(--luca-purple);
  border-radius:999px;
  padding:11px 18px;
  background:transparent;
  color:var(--luca-purple);
  text-align:center;
  text-decoration:none;
}
.account-sheet .primary,
.review-contribute .primary{
  background:var(--luca-purple);
  color:#fff;
  font-weight:800;
}
.account-close{
  position:absolute;
  top:14px;
  right:14px;
  min-width:38px;
  padding:0;
  border-color:#444;
  color:#fff;
  font-size:25px;
}
.account-email{
  color:#979797;
  margin-bottom:22px;
}
.account-signout{
  width:100%;
  margin-top:12px;
}
.review-contribute{
  margin-top:28px;
  padding:22px;
  border:1px solid #2d2d2d;
  border-radius:16px;
  background:#151515;
}
.review-contribute h3{
  margin:0 0 6px;
}
.review-contribute > p{
  margin:0;
  color:#979797;
}


.review-status{
  border-radius:999px;
  padding:5px 8px;
  background:#303030;
  color:#bbb;
  font-size:10px;
  text-transform:uppercase;
}
.review-status-published{
  background:rgba(0,255,9,.12);
  color:#00ff09;
}


.record-delete{
  margin-top:14px;
  border:0;
}
.record-delete{
  min-height:36px;
  border-radius:999px;
  padding:0 13px;
  background:rgba(255,45,85,.12);
  color:#ff4d6d;
  -webkit-text-fill-color:#ff4d6d;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.record-delete:disabled{
  opacity:.55;
  cursor:wait;
}


@media (min-width:700px){
  .account-modal{
    place-items:center;
  }
}
/* Account UI follows the public day/night visual system. */
.day-mode{
  --account-surface:#fff;
  --account-raised:#f5f5f7;
  --account-field:#fff;
  --account-text:#1d1d1f;
  --account-muted:#6e6e73;
  --account-border:rgba(60,60,67,.18);
  --account-shadow:0 20px 60px rgba(0,0,0,.18);
}
.night-mode{
  --account-surface:#111;
  --account-raised:#1a1a1a;
  --account-field:#080808;
  --account-text:#f5f5f7;
  --account-muted:#979797;
  --account-shadow:0 20px 60px rgba(0,0,0,.48);
}
.account-sheet{
  border-color:var(--account-border);
  background:var(--account-surface);
  color:var(--account-text);
  box-shadow:var(--account-shadow);
}
.account-sheet > p:not(.eyebrow),
.account-sheet label{
  color:var(--account-muted);
}
.account-sheet [data-auth-panel] > p{
  margin:0 0 4px;
  color:var(--account-muted);
  line-height:1.45;
}
.account-sheet [data-auth-panel][hidden]{
  display:none;
}
.auth-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin:8px 0 24px;
  padding:4px;
  border-radius:999px;
  background:var(--account-raised);
}
.auth-mode-tabs button{
  min-height:38px;
  border:0;
  padding:8px 12px;
  color:var(--account-muted);
}
.auth-mode-tabs button.active{
  background:var(--account-text);
  color:var(--account-surface);
}
.account-sheet input{
  border-color:var(--account-border);
  background:var(--account-field);
  color:var(--account-text);
}
.account-sheet input:focus{
  outline:2px solid #00a808;
  outline-offset:1px;
}
/* iOS Safari zooms focused form controls below 16px and can retain that scale after sign-in. */
.account-sheet input{
  font-size:16px;
  line-height:1.25;
}

.reviews blockquote{
  display:grid;
  gap:5px;
  margin:14px 0 0;
  border-left:2px solid var(--accent);
  padding:10px 14px;
  background:var(--account-raised);
  color:var(--account-text);
}
.reviews blockquote small{
  color:var(--accent);
  font-weight:800;
}


/* Guide detail stays image-led on phones and becomes a fixed 3:4 split on larger screens. */

.guide-head[data-article-cover-save]{
  cursor:pointer;
}
@media (min-width:720px){
  
  
  
  
  
  
  
  
  
  
  
  
  /* Desktop/tablet section intros are quieter and left aligned;Explore is unchanged. */
  .activity-hero{
    text-align:left;
  }
  .activity-hero > *{
    width:100%;
    max-width:min(100%,1008px);
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }
  .activity-hero h1{
    font-size:clamp(36px,4.5vw,50px);
  }
}


/* Compact social-style venue comments. */
.comment-section{
  color:var(--account-text);
}
.comment-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:8px;
}
.comment-heading h2{
  margin:0;
  font-size:25px;
  letter-spacing:-.035em;
}
.comment-heading h2 span{
  color:var(--account-muted);
  font-size:13px;
  font-weight:500;
}
.comment-list{
  display:grid;
}
.comment-item{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid var(--account-border);
}
.comment-avatar{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(145deg,#2d2d2f,#111);
  color:#00ff09;
  font-size:13px;
  font-weight:900;
}
.comment-body{
  min-width:0;
}
.comment-body > header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.comment-body > header strong{
  overflow:hidden;
  color:var(--account-text);
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.comment-body > header span{
  flex:none;
  color:#e7a72f;
  font-size:10px;
  letter-spacing:.03em;
}
.comment-body > p{
  margin:7px 0 8px;
  color:var(--account-text);
  font-size:14px;
  line-height:1.48;
}
.comment-body > small{
  color:var(--account-muted);
  font-size:10px;
}
.comment-reply{
  margin-top:11px;
  border-radius:10px;
  padding:10px 12px;
  background:var(--account-raised);
}
.comment-reply b{
  color:var(--account-muted);
  font-size:9px;
  letter-spacing:.12em;
}
.comment-reply p{
  margin:4px 0 0;
  color:var(--account-text);
  font-size:12px;
  line-height:1.45;
}
.comment-section .review-contribute{
  margin-top:20px;
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
}
.comment-section .review-contribute h3{
  margin:0 0 12px;
  font-size:16px;
}
.review-form-compact{
  gap:9px;
  margin-top:0;
}
.review-form-compact > div{
  display:flex;
  align-items:end;
  gap:8px;
}
.review-form-compact > div label{
  flex:1;
  margin:0;
}
.review-form-compact select,
.review-form-compact textarea{
  border-color:var(--account-border);
  background:var(--account-surface);
  color:var(--account-text);
}
.review-form-compact textarea{
  resize:vertical;
}
.review-form-compact > div button{
  flex:none;
  min-width:72px;
  min-height:42px;
  margin:0;
}
.review-form-compact > small{
  color:var(--account-muted);
  font-size:9px;
}
.comment-section .review-signin{
  min-height:40px;
  margin:0;
  border:1px solid var(--account-border);
  background:var(--account-surface);
  color:var(--account-text);
}
.day-mode .comment-avatar{
  background:linear-gradient(145deg,#f0f0f2,#dedee3);
  color:#087f08;
}


/* Opaque Safari status-bar cap: scrolling content must never show behind the Dynamic Island. */
@media (max-width:719px){
  html,
body{
    height:100%;
    overflow:hidden;
  }
  #app{
    height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:none;
    -webkit-overflow-scrolling:touch;
  }
  .topbar,
.topbar-fade,
.topbar-overlay{
    background:rgba(0,0,0,.78);
    color:#fff;
    -webkit-backdrop-filter:blur(18px) saturate(135%);
    backdrop-filter:blur(18px) saturate(135%);
  }
  .day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay{
    background:rgba(245,245,247,.82);
    color:#1d1d1f;
  }
  body::before{
    content:none;
    position:fixed;
    z-index:41;
    top:0;
    right:0;
    left:0;
    height:max(env(safe-area-inset-top),28px);
    background:#000;
    pointer-events:none;
  }
  body.day-mode::before{
    background:#f5f5f7;
  }
  body::after{
    content:none;
    position:fixed;
    z-index:34;
    right:0;
    bottom:0;
    left:0;
    height:max(env(safe-area-inset-bottom),86px);
    background:#000;
    pointer-events:none;
  }
  body.day-mode::after{
    background:#f5f5f7;
  }
}
@media (min-width:1024px){
  .topbar,
.topbar-fade,
.topbar-overlay{
    justify-content:center;
    width:100%;
    max-width:none;
    padding-right:0;
    padding-left:0;
  }
}


/* Keep these final: later legacy responsive rules must not turn the actions into pills. */

@media (min-width:720px){
  .topbar,
.topbar-fade,
.topbar-overlay{
    background:rgba(10,10,10,.72);
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
  }
  .day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay{
    background:rgba(244,241,235,.76);
    color:#1d1d1f;
  }
}
/* Final color contract for Night Card detail — must remain after legacy rules. */

.night-card-quick-actions{
  position:absolute;
}
.night-card-quick-actions button{
  place-items:center;
  color:#fff;
  cursor:pointer;
}

.night-card-quick-actions button.active{
  color:#ff5c68;
}


@media (min-width:720px){
  .topbar,
.topbar-fade,
.topbar-overlay{
    height:48px;
    min-height:48px;
  }
  .brand{
    font-size:17px;
  }
  
  
  
  
  
  
}
@media (max-width:719px){
  .topbar,
.topbar-fade,
.topbar-overlay,
.day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay{
    height:calc(52px + env(safe-area-inset-top));
  }
  
  
  
  
  
  
}

/* Check in is a private location action;Night Card creation starts after Check out. */


.night-global-place-select{
  display:grid;
  gap:6px;
  color:var(--account-muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.night-global-place-select select{
  width:100%;
  min-height:46px;
  border:1px solid var(--account-border);
  border-radius:10px;
  padding:0 38px 0 12px;
  background:var(--account-raised);
  color:var(--account-text);
  font:700 13px/1 "DM Sans",sans-serif;
}


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


@keyframes night-checkin-pop  {
  from  {
    opacity:0;
    transform:scale(.35) rotate(-18deg);
  }
  to  {
    opacity:1;
    transform:scale(1) rotate(0);
  }
}
@keyframes night-checkin-rise  {
  from  {
    opacity:0;
    transform:translateY(12px);
  }
  to  {
    opacity:1;
    transform:none;
  }
}


/* Night Card editor follows the active site theme instead of forcing black fields. */


/* Night Card identity,
always-visible return control,
and single-edit UI. */
.night-card-author img[hidden]{
  display:none;
}
.night-card-author [data-night-avatar-fallback][hidden]{
  display:none;
}


.night-card-edit-form{
  display:grid;
  gap:16px;
  margin-top:20px;
  padding:18px;
  border:1px solid var(--account-border);
  border-radius:18px;
  background:var(--account-raised);
  color:var(--account-text);
}
.night-card-edit-form[hidden]{
  display:none;
}
.night-card-edit-form fieldset{
  margin:0;
  border:0;
  padding:0;
}
.night-card-edit-form label,
.night-card-edit-form legend{
  display:grid;
  gap:7px;
  color:var(--account-text);
  font-size:11px;
  font-weight:750;
}
.night-card-edit-form input:not([type="radio"]):not([type="file"]){
  width:100%;
  min-height:46px;
  border:1px solid var(--account-border);
  border-radius:12px;
  padding:0 12px;
  background:var(--account-field);
  color:var(--account-text);
}


.night-card-edit-form .primary{
  margin:0;
  border:0;
}


.tonight-count-picker{
  grid-column:1/-1;
  margin:0;
  border:0;
  padding:0;
}
.tonight-count-picker legend{
  margin-bottom:9px;
  color:var(--account-text);
  font-size:11px;
  font-weight:800;
}
.tonight-count-picker > div{
  display:grid;
  grid-template-columns:auto auto minmax(100px,1fr);
  gap:8px;
}
.tonight-count-picker label{
  display:block;
}
.tonight-count-picker input[type="radio"]{
  position:absolute;
  opacity:0;
}
.tonight-count-picker label > span{
  display:grid;
  place-items:center;
  min-width:58px;
  min-height:54px;
  border:1px solid var(--account-border);
  border-radius:14px;
  background:var(--account-raised);
  font-size:25px;
  cursor:pointer;
}
.tonight-count-picker input[type="radio"]:checked + span{
  border-color:var(--luca-purple);
  box-shadow:inset 0 0 0 2px var(--luca-purple);
}


@media (max-width:719px){
  
  .tonight-count-picker > div{
    grid-template-columns:1fr 1fr;
  }
  
}
.night-card-visual{
  position:absolute;
  inset:-8px;
  background:center/cover no-repeat;
  transform:scale(1.02);
}


/* My Night stacking contract: account navigation stays usable;filters never cover detail. */
.topbar,
.topbar-fade,
.topbar-overlay{
  z-index:300;
  overflow:visible;
}
.account-nav{
  position:relative;
  z-index:302;
  overflow:visible;
}


/* My Night card hierarchy and global social-action colors. */

.night-card-overlay{
  justify-content:flex-end;
}
.night-card-count{
  position:absolute;
  display:flex;
  align-items:baseline;
  color:#fff;
  text-shadow:0 3px 20px rgba(0,0,0,.92);
}
.night-card-count strong{
  margin:0;
  color:#fff;
  font-weight:900;
  letter-spacing:-.1em;
}
.night-card-count i{
  color:#fff;
  font-style:normal;
  font-weight:900;
  letter-spacing:-.08em;
}
.night-card-author{
  position:absolute;
  top:auto;
  align-items:center;
}
.night-card-author div{
  overflow:hidden;
}
.night-card-author b{
  margin:0;
  color:#fff;
  font-style:normal;
}
.night-card-author small{
  display:block;
  overflow:hidden;
  color:#fff;
  font-style:normal;
  font-weight:700;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.night-card-author small span{
  color:inherit;
  font-size:inherit;
}
.night-card-quick-actions button[data-night-like],
.article-action-bar .article-like,
.save-place{
  color:#f24b8f;
}
.night-card-quick-actions button[data-night-like].active,
.article-action-bar .article-like.active,
.save-place.saved{
  color:#ff2f86;
}
.night-card-quick-actions button{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.night-card-quick-actions button b,
.article-action-bar button b{
  color:currentColor;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
.article-action-bar button svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.article-action-bar button[data-article-comment-scroll]{
  color:var(--account-text);
}
.article-action-bar{
  grid-template-columns:repeat(3,auto);
  justify-content:center;
}
.article-action-bar button{
  display:flex;
  min-width:44px;
  min-height:44px;
  flex-direction:row;
  gap:6px;
  padding:4px;
}
.article-action-bar .save-article{
  color:var(--account-text);
}


/* Final My Night action geometry: one scale and baseline across every feed card. */
.night-card-overlay{
  padding:12px;
}
.night-card-count{
  gap:5px;
}
.night-card-count strong{
  line-height:.82;
}
.night-card-count i{
  line-height:.86;
}
.night-card-author{
  bottom:12px;
  left:12px;
  gap:7px;
}
.night-card-author img,
.night-card-author > span{
  width:34px;
  height:34px;
  flex:0 0 34px;
  font-size:11px;
}
.night-card-author b{
  font-size:11px;
  line-height:1.1;
}
.night-card-author small{
  margin-top:3px;
  font-size:8px;
  line-height:1.15;
}
.night-card-quick-actions{
  align-items:center;
  gap:9px;
}
.night-card-quick-actions button{
  grid-template-columns:18px 10px;
  height:30px;
  padding:0;
}
.night-card-quick-actions button svg{
  width:17px;
  height:17px;
}
.night-card-quick-actions button b{
  font-size:8px;
  line-height:1;
}
@media (max-width:719px){
  .night-card-count{
    left:10px;
  }
  .night-card-author{
    bottom:10px;
    left:10px;
    gap:5px;
  }
  .night-card-author img,
.night-card-author > span{
    width:29px;
    height:29px;
    flex-basis:29px;
  }
  .night-card-author b{
    font-size:9px;
  }
  .night-card-author small{
    font-size:7px;
  }
  .night-card-quick-actions{
    gap:6px;
  }
  .night-card-quick-actions button{
    grid-template-columns:15px 8px;
    height:27px;
  }
  .night-card-quick-actions button svg{
    width:15px;
    height:15px;
  }
  .night-card-quick-actions button b{
    width:8px;
    font-size:7px;
  }
  
  
  
  
  
  
  
}
/* My Night filters are a content control on Pad/desktop,
not a second site navigation bar. */

/* One share symbol everywhere;color follows the surface instead of action state. */
.share-icon{
  display:block;
  width:22px;
  height:22px;
  flex:0 0 auto;
  fill:currentColor;
  stroke:none;
}
.night-card-quick-actions button[data-night-share]{
  color:#fff;
}
.share-place,
[data-share-schedule],
[data-schedule-native-share]{
  color:var(--account-text);
}
.schedule-share-trigger{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.schedule-share-trigger .share-icon{
  width:17px;
  height:17px;
}
/* Likes are solid: white at rest on cards,
rose when selected. */
.night-card-quick-actions button[data-night-like]{
  color:#fff;
}
.night-card-quick-actions button[data-night-like] svg path,
.article-action-bar .article-like svg path{
  fill:currentColor;
}
.night-card-quick-actions button[data-night-like].active,
.article-action-bar .article-like.active{
  color:#f24b8f;
}
.night-card-author b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.night-card-quick-actions{
  display:flex;
  justify-content:center;
}
.night-card-quick-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  min-width:38px;
  gap:4px;
}
.night-card-quick-actions button b{
  display:block;
  width:auto;
  min-width:8px;
  text-align:center;
}
@media (max-width:719px){
  .night-card-quick-actions button{
    width:31px;
    min-width:31px;
    gap:3px;
  }
}
/* Feed cards keep one clear action;sharing remains available in card details. */
.night-card-quick-actions button[data-night-share]{
  display:none;
}
.night-card-author{
  right:62px;
}
.night-card-quick-actions{
  right:12px;
  bottom:12px;
}
@media (max-width:719px){
  .night-card-author{
    right:50px;
  }
  .night-card-quick-actions{
    right:9px;
    bottom:9px;
  }
}
/* Restore the Guide/article action dock. */
.article-action-bar{
  width:min(calc(100% - 32px),520px);
  gap:36px;
  border:1px solid var(--account-border);
  border-radius:22px;
  padding:7px 18px calc(7px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--account-surface) 94%,transparent);
  color:var(--account-text);
  box-shadow:0 16px 44px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.day-mode .article-action-bar{
  background:color-mix(in srgb,var(--account-surface) 94%,transparent);
}
/* Comments use quiet neutral controls and no divider rules anywhere. */
.article-discussion,
.article-comment-list,
.article-comment{
  border-top:0;
  border-bottom:0;
}
.article-comment-form button,
.article-comment-signin{
  border:1px solid var(--account-border);
  box-shadow:none;
}
/* Pad/desktop My Night uses a compact vertical view rail beside the feed. */


/* Comment buttons have explicit contrast in both themes. */
body.day-mode .article-comment-form button,
body.day-mode .article-comment-signin{
  opacity:1;
}
body.night-mode .article-comment-form button,
body.night-mode .article-comment-signin{
  opacity:1;
}
/* Pixel-align the feed like icon and its count around the same center line. */
.night-card-quick-actions button[data-night-like]{
  box-sizing:border-box;
  line-height:0;
}
.night-card-quick-actions button[data-night-like] svg{
  display:block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin:0;
}
.night-card-quick-actions button[data-night-like] b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:8px;
  min-width:8px;
  height:16px;
  margin:0;
  padding:0;
  font-size:8px;
  line-height:16px;
  transform:none;
}
/* Night Card detail is a full-screen route on mobile;never reveal the feed behind it. */

/* My Night keeps both navigation rows opaque across Plaza,
Nearby and Bangkok. */


/* 2026 palette refresh: editorial day neutrals with LUCA night colour signals. */
:root{
  --luca-green:#00ff09;
  --luca-green-ink:#00ff09;
  --luca-purple:#684cff;
  --luca-purple-soft:#eeeaff;
  --luca-warm:#faf6e8;
  --luca-mint:#c4f7af;
  --luca-brown:#b49c9e;
  --luca-day-paper:#fafaf9;
  --luca-day-card:#fff;
  --luca-day-raised:#f4f4f2;
  --luca-day-line:#e5e4e1;
  --luca-day-ink:#191919;
  --luca-day-muted:#6f6d69;
}
/* Day mode stays light and quiet;colour is reserved for information and action. */
html.day-mode,
body.day-mode,
.day-mode .site-footer{
  --ink:var(--luca-day-ink);
  --paper:var(--luca-day-paper);
  --card:var(--luca-day-card);
  --muted:var(--luca-day-muted);
  --accent:var(--luca-green-ink);
  --line:var(--luca-day-line);
  --account-surface:var(--luca-day-card);
  --account-raised:var(--luca-day-paper);
  --account-text:var(--luca-day-ink);
  --account-muted:var(--luca-day-muted);
  --account-border:rgba(25,25,25,.13);
  background:var(--luca-day-paper);
  color:var(--luca-day-ink);
}
.day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay,
body.day-mode .topbar{
  border-bottom-color:rgba(25,25,25,.1);
}
.day-mode .hero,
.day-mode .page-head,
.day-mode .activity-hero{
  background:var(--luca-day-paper);
  color:var(--luca-day-ink);
}


.day-mode .guide-intro article,
.day-mode .guide-place-row,
.day-mode .schedule a,
.day-mode .reviews article,
.day-mode .quick-grid,
.day-mode .transit-list,
.day-mode .notes-list{
  background:var(--luca-day-card);
  border-color:var(--luca-day-line);
  box-shadow:0 7px 22px rgba(34,31,27,.065);
}

.day-mode .notes article,
.day-mode .good-to-know{
  background:var(--luca-warm);
  border-color:#ece5d2;
  box-shadow:none;
}

.day-mode .tags span,
.day-mode .chips button,
.day-mode .chip-link{
  background:var(--luca-day-card);
  border-color:var(--luca-day-line);
  color:var(--luca-day-ink);
}
.day-mode .chips button.active,
.day-mode .chip-link.active{
  border-color:#79c985;
  background:#e8f8e5;
  color:var(--luca-green-ink);
}

.day-mode .primary{
  border-color:var(--luca-purple);
  background:var(--luca-purple);
  color:#fff;
  box-shadow:0 7px 18px rgba(104,76,255,.2);
}
.day-mode .eyebrow,
.day-mode .brand i,
.day-mode .schedule b,
.day-mode .place-row .time small,
.day-mode .footer-brand i{
  color:var(--luca-green-ink);
}
/* Purple identifies the personal/editorial layer without competing with green actions. */

/* Warm and mint tints are supporting surfaces,
never the page background. */
/* Keep the established night canvas,
while sharing the refreshed signal colours. */
.night-mode{
  --account-border:#353535;
}

/* Carry the same day-mode hierarchy through every public route. */

.day-mode .good-to-know,
.day-mode .activity-venues-section,
.day-mode .activity-other-section,
.day-mode .empty{
  border:0;
  border-radius:22px;
  background:var(--luca-day-card);
  box-shadow:none;
}
.day-mode .activity-venues-section,
.day-mode .activity-other-section{
  width:min(calc(100% - 32px),960px);
  max-width:none;
  margin:16px auto 24px;
}

/* Internal cards rely on spacing,
imagery and typography—not outlines or shadows. */

.day-mode .place-card,
.day-mode .place-row{
  border:0;
  box-shadow:none;
}
.day-mode .activity-venue-list .place-row + .place-row{
  border-top:0;
}
@media (min-width:720px){
  .day-mode .activity-venues-section,
.day-mode .activity-other-section{
    width:min(calc(100% - 60px),960px);
    margin-top:24px;
  }
}
/* Article detail: one image card on the left,
one continuous content card on the right. */

/* Compact inner-page heading on tablet and desktop. */

/* Profile content sits directly on the page canvas;cards have no frames. */


/* Night Card detail follows the same two-card system as Guide detail. */


/* One shared public-page grid: homepage and detail pages align to 1280px. */


/* Desktop/tablet navigation aligns with the shared 1280px content grid. */

/* Night Card content height mirrors Guide detail;venue data gets one quiet inset surface. */


/* Shared enlarged detail grid for Guide and Night Card. */


/* Final global navigation palette: purple routes,
green current state. */


/* Latest navigation corrections: natural logo,
stronger avatar,
split theme buttons,
stronger mobile bar. */
.brand-logo,
.day-mode .brand-logo,
.night-mode .brand-logo,
.topbar-overlay .brand-logo,
.topbar-fade .brand-logo,
.day-mode .topbar-overlay .brand-logo,
.day-mode .topbar-fade .brand-logo,
.night-mode .topbar-overlay .brand-logo,
.night-mode .topbar-fade .brand-logo{
  filter:none;
}
.theme-choice-group{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-width:max-content;
  white-space:nowrap;
}
.theme-choice-button{
  display:grid;
  place-items:center;
  width:38px;
  min-width:38px;
  height:38px;
  min-height:38px;
  border:0;
  border-radius:999px;
  padding:0;
  background:transparent;
  color:var(--luca-purple);
  box-shadow:none;
  cursor:pointer;
}
.night-mode .theme-choice-button{
  color:#ae9fff;
}
.theme-choice-button.is-active,
.day-mode .theme-choice-button.is-active,
.night-mode .theme-choice-button.is-active{
  background:var(--luca-purple);
  color:#fff;
}
.theme-choice-button svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.theme-choice-slash{
  display:inline-block;
  color:var(--luca-purple);
  font-weight:900;
  line-height:1;
  opacity:.72;
}
.night-mode .theme-choice-slash{
  color:#ae9fff;
}

/* Final account-menu polish: icon/icon theme toggle,
topbar-colored menu{
  gap:11px;
}


/* Bangkok podium positions are editorial labels,
not framed badges. */


/* My Night loading is a neutral page state,
never a content card. */


@keyframes luca-night-loading  {
  to  {
    transform:rotate(360deg);
  }
}


/* Account dialog header: brand first,
with an unmistakable close control. */
.account-sheet{
  padding-top:24px;
}
.account-brand{
  display:flex;
  min-height:38px;
  align-items:center;
  padding-right:52px;
}
.account-brand-logo{
  display:block;
  width:auto;
  max-width:150px;
  height:28px;
  object-fit:contain;
  object-position:left center;
}
.account-brand-wordmark{
  color:var(--account-text);
  font-size:19px;
  font-weight:900;
  letter-spacing:-.055em;
}
.account-brand-wordmark i{
  color:var(--luca-green);
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:700;
}
.account-sheet .account-close,
.day-mode .account-sheet .account-close,
.night-mode .account-sheet .account-close,
.night-hello-sheet .account-close{
  z-index:3;
  top:16px;
  right:16px;
  display:grid;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  place-items:center;
  border:0;
  border-radius:50%;
  padding:0;
  background:var(--account-text);
  color:var(--account-surface);
  font-size:25px;
  font-weight:400;
  line-height:1;
  box-shadow:none;
  opacity:1;
}
.account-sheet .auth-mode-tabs{
  margin-top:14px;
}
/* Data startup and failure states never collapse into an empty white screen. */
.database-state{
  position:fixed;
  z-index:999;
  inset:0;
  display:grid;
  width:100vw;
  max-width:none;
  min-height:100dvh;
  place-content:center;
  justify-items:center;
  gap:10px;
  margin:0;
  padding:28px;
  box-sizing:border-box;
  background:#fff;
  color:#111;
  text-align:center;
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
}
.night-mode .database-state{
  background:#050505;
  color:#fff;
}
.database-state h1,
.database-state p{
  margin:0;
}
.database-state h1{
  font-size:24px;
}
.database-state p{
  color:#77727f;
  font-size:13px;
}
.night-mode .database-state p{
  color:#a8a3ae;
}
.database-brand-loader{
  position:relative;
  width:min(244px,68vw);
  margin-bottom:10px;
  isolation:isolate;
}
.database-brand-loader img{
  display:block;
  width:100%;
  height:auto;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transform:translateY(7px) scale(.975);
  animation:oonite-logo-reveal .38s cubic-bezier(.2,.78,.24,1) .02s forwards;
}
.database-brand-glow{
  position:absolute;
  z-index:-1;
  top:50%;
  left:9.5%;
  width:22%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(39,251,4,.42);
  filter:blur(18px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.35);
  animation:oonite-logo-pulse .52s cubic-bezier(.2,.78,.24,1) forwards;
}
.database-state-spinner{
  width:22px;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--luca-purple) 18%,transparent);
}
.database-state-spinner::after{
  display:block;
  width:45%;
  height:100%;
  background:var(--luca-purple);
  content:"";
  transform:translateX(-120%);
  border-radius:50%;
  animation:oonite-loading-track .9s ease-in-out infinite;
}
.database-state button{
  margin-top:8px;
}
@keyframes oonite-logo-reveal{
  0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(7px) scale(.975)}
  28%{opacity:1}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0) scale(1)}
}
@keyframes oonite-logo-pulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  34%{opacity:.9;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}
}
@keyframes oonite-loading-track{
  0%{transform:translateX(-120%)}
  50%{transform:translateX(80%)}
  100%{transform:translateX(240%)}
}
@media (prefers-reduced-motion:reduce){
  .database-brand-loader img{
    opacity:1;
    clip-path:none;
    transform:none;
    animation:none;
  }
  .database-brand-glow{
    display:none;
  }
  .database-state-spinner::after{
    width:100%;
    transform:none;
    animation:none;
  }
}
/* Homepage mobile alignment: the row owns the shared 16px page gutter. */

/* Mobile featured guides: one clear hero card with balanced previous/next peeks. */

/* Compact three-line headers on listing and single-purpose inner pages. */
.page-head:not(.guide-head){
  padding-top:76px;
  padding-bottom:24px;
}
.page-head:not(.guide-head) .eyebrow{
  margin-bottom:7px;
}
.page-head:not(.guide-head) h1{
  font-size:clamp(34px,5vw,46px);
  line-height:1;
}
.page-head:not(.guide-head) > p:not(.eyebrow){
  margin-top:10px;
  font-size:14px;
  line-height:1.35;
}
.activity-hero{
  padding-top:76px;
  padding-bottom:24px;
}
.activity-hero .eyebrow{
  margin-bottom:7px;
}
.activity-hero h1{
  font-size:clamp(34px,5vw,46px);
  line-height:1;
}
.activity-hero > p:last-child{
  margin-top:10px;
  font-size:14px;
  line-height:1.35;
}
@media (max-width:719px){
  .page-head:not(.guide-head){
    padding-top:calc(72px + env(safe-area-inset-top));
    padding-bottom:18px;
  }
  .page-head:not(.guide-head) h1{
    font-size:32px;
  }
  .page-head:not(.guide-head) > p:not(.eyebrow){
    max-width:310px;
    margin-top:8px;
    font-size:12px;
    line-height:1.35;
  }
  .activity-hero{
    padding-top:calc(72px + env(safe-area-inset-top));
    padding-bottom:18px;
  }
  .activity-hero h1{
    font-size:32px;
  }
  .activity-hero > p:last-child{
    margin-top:8px;
    font-size:12px;
    line-height:1.35;
  }
}
/* Restore LUCA Choice's original signature green across both themes. */
/* Navigation refresh: solid surface, livelier desktop hover, and account-owned theme controls. */
.topbar,
.topbar-fade,
.topbar-overlay,
.day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay{
  background:#050505;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.day-mode .topbar,
.day-mode .topbar-fade,
.day-mode .topbar-overlay{
  background:#f5f5f7;
}


/* Night mode keeps LUCA green as a restrained signal,
not a neon wash. */
.night-mode{
  --luca-green:#56d861;
  --luca-green-ink:#56d861;
  --accent:#56d861;
}
/* Homepage module hierarchy: keep the second title line compact everywhere. */
body .topbar,
body .topbar-fade,
body .topbar-overlay,
body.day-mode .topbar,
body.day-mode .topbar-fade,
body.day-mode .topbar-overlay,
body.night-mode .topbar,
body.night-mode .topbar-fade,
body.night-mode .topbar-overlay{
  background:#050505;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.day-mode .topbar,
body.day-mode .topbar-fade,
body.day-mode .topbar-overlay{
  background:#f5f5f7;
}
@media (max-width:719px){
  body .topbar,
body .topbar-fade,
body .topbar-overlay,
body.day-mode .topbar,
body.day-mode .topbar-fade,
body.day-mode .topbar-overlay,
body.night-mode .topbar,
body.night-mode .topbar-fade,
body.night-mode .topbar-overlay{
    background:#050505;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  body.day-mode .topbar,
body.day-mode .topbar-fade,
body.day-mode .topbar-overlay{
    background:#f5f5f7;
  }
}


/* Final brand-purple action buttons. */
.article-comment-form button,
.article-comment-signin,
.review-form button.primary,
.review-signin,
.footer-subscribe button,
body.day-mode .article-comment-form button,
body.day-mode .article-comment-signin,
body.day-mode .review-form button.primary,
body.day-mode .review-signin,
body.day-mode .footer-subscribe button,
body.night-mode .article-comment-form button,
body.night-mode .article-comment-signin,
body.night-mode .review-form button.primary,
body.night-mode .review-signin,
body.night-mode .footer-subscribe button{
  border-color:var(--luca-purple);
  background:var(--luca-purple);
  color:#fff;
  -webkit-text-fill-color:#fff;
}

/* My Night access,
Plaza story card,
and brand-purple controls. */


/* My Night top notes are text,
not cards. */


.night-card-edit-chip{
  position:absolute;
  z-index:4;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:var(--luca-purple);
  color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.3);
}
.night-card-edit-chip svg,
.night-card-edit-form button svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.night-card-edit-form button.primary{
  border-color:var(--luca-purple);
  background:var(--luca-purple);
  color:#fff;
  -webkit-text-fill-color:#fff;
}


.night-card-edit-form button.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}


/* My Night mobile feed: keep the local filter out of the cards and simplify card layers. */


@media (max-width:719px){
  input,
textarea,
select,
.account-sheet input,
.account-sheet textarea,
.article-comment-form textarea,
.review-form input,
.review-form textarea,
.review-form select,
[data-night-card-form] input,
[data-night-card-form] textarea,
[data-night-card-form] select,
[data-night-card-edit-form] input,
[data-night-card-edit-form] textarea,
[data-night-card-edit-form] select{
    font-size:16px;
    line-height:1.25;
  }
}

.pull-refresh-indicator{
  position:fixed;
  z-index:220;
  top:calc(8px + env(safe-area-inset-top));
  left:50%;
  display:grid;
  place-items:center;
  min-height:34px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--luca-purple);
  font-size:11px;
  font-weight:900;
  box-shadow:0 12px 30px rgba(38,28,112,.14);
  opacity:0;
  transform:translate(-50%,calc(-46px + var(--pull-distance,0px))) scale(.96);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.pull-refresh-indicator[data-state="pulling"],
.pull-refresh-indicator[data-state="ready"],
.pull-refresh-indicator[data-state="refreshing"]{
  opacity:1;
}
.pull-refresh-indicator[data-state="ready"],
.pull-refresh-indicator[data-state="refreshing"]{
  transform:translate(-50%,calc(-20px + var(--pull-distance,0px))) scale(1);
}
body.night-mode .pull-refresh-indicator{
  background:rgba(16,16,18,.94);
  color:#ae9fff;
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}

/* Night DNA visual system: LUCA editorial report cards,
not generic stats. */


/* Clean Night DNA reset: quiet LUCA editorial cards. */


@media (max-width:719px){
  .topbar .account-nav-guest{
    min-width:44px;
    min-height:44px;
    height:44px;
  }
  
  
}
/* My Night tabs should live in the page,
while the global mobile nav behaves normally. */

/* My Cards is a personal archive: keep it tidy and readable. */


/* Mobile Night Card form sizing: prevent iOS focus zoom while keeping hierarchy. */

/* Final My Night mobile cleanup after live checks. */


/* Keep pending Night Card checkout inside the phone frame. */


/* Repair the frameless pending-card layout: no outer box,
but keep readable spacing. */


/* Pending card hierarchy: smaller info,
stronger primary action. */


/* Final pending tray sizing: show the soft tray around smaller waiting cards. */


/* Detail pages own the bottom interaction area;hide global mobile nav there. */
@media (max-width:719px){
  body.article-route .article-action-bar,
body.day-mode.article-route .article-action-bar,
body.night-mode.article-route .article-action-bar{
    z-index:180;
    right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    left:12px;
    width:auto;
    min-height:58px;
    padding:7px 14px calc(7px + env(safe-area-inset-bottom));
    border:1px solid var(--account-border);
    border-radius:22px;
    background:color-mix(in srgb,var(--account-surface) 94%,transparent);
    box-shadow:0 16px 44px rgba(0,0,0,.22);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
  }
  
}
/* Align My Cards content width with the tabs,
using the same border-box math. */

.route-loading-skeleton{
  display:grid;
  width:min(100% - 32px,720px);
  min-height:calc(100dvh - 140px);
  margin:0 auto;
  align-content:center;
  gap:14px;
}
.route-loading-skeleton span{
  display:block;
  height:18px;
  border-radius:9px;
  background:color-mix(in srgb,currentColor 9%,transparent);
}
.route-loading-skeleton span:first-child{
  width:38%;
  height:34px;
}
.route-loading-skeleton span:nth-child(2){
  width:82%;
}
.route-loading-skeleton span:nth-child(3){
  width:62%;
}
.route-loading-skeleton-compact{
  min-height:240px;
}
.toast{
  top:calc(72px + env(safe-area-inset-top));
  right:auto;
  bottom:auto;
  left:50%;
  width:max-content;
  max-width:calc(100vw - 32px);
  overflow:hidden;
  border:0;
  background:rgba(255,255,255,.94);
  color:#6f35ff;
  box-shadow:0 10px 28px rgba(29,29,31,.14);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.toast.is-success{
  background:rgba(255,255,255,.96);
  color:#087f08;
  box-shadow:0 10px 28px rgba(29,29,31,.14);
}
.toast.is-error{
  background:rgba(255,255,255,.96);
  color:#c9342f;
  box-shadow:0 10px 28px rgba(29,29,31,.14);
}
.toast.is-danger{
  background:rgba(255,255,255,.96);
  color:#c9342f;
}
.toast.is-warning{
  background:rgba(255,255,255,.96);
  color:#b85f00;
}
.toast.is-info{
  background:rgba(255,255,255,.96);
  color:#6f35ff;
}
body.night-mode .toast{
  background:rgba(24,24,28,.95);
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}

/* Shared feedback primitives. Routes own placement and responsive state. */
.ui-hint{
  border:1px solid rgba(29,29,31,.12);
  background:#fff;
  color:#4d4d52;
  -webkit-text-fill-color:#4d4d52;
  text-align:left;
  white-space:normal;
  pointer-events:none;
}
.ui-hint::before{
  content:"";
  position:absolute;
  width:var(--ui-hint-arrow-size,10px);
  height:var(--ui-hint-arrow-size,10px);
  background:#fff;
}
.ui-hint > .ui-hint-close{
  position:absolute;
  display:grid;
  width:28px;
  min-width:28px;
  height:28px;
  min-height:28px;
  place-items:center;
  border:0;
  padding:0;
  background:transparent;
  color:#4d4d52;
  -webkit-text-fill-color:#4d4d52;
  font-size:13px;
  font-style:normal;
  font-weight:950;
  line-height:1;
  box-shadow:none;
  cursor:pointer;
  pointer-events:auto;
}
.ui-badge{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  border-radius:999px;
  padding:0 5px;
  color:#fff;
  -webkit-text-fill-color:#fff;
  background:#ff2d8d;
  font-size:10px;
  font-weight:950;
  line-height:1;
  box-shadow:0 8px 18px rgba(255,45,141,.34);
}
.action-confirm{
  position:fixed;
  z-index:420;
  top:50%;
  left:50%;
  display:grid;
  gap:8px;
  max-width:min(92vw,440px);
  min-height:44px;
  border:0;
  border-radius:14px;
  padding:11px 12px 10px;
  background:rgba(255,255,255,.96);
  color:#1d1d1f;
  box-shadow:0 12px 32px rgba(29,29,31,.16);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.96);
  transition:opacity .16s ease,transform .16s ease;
}
.action-confirm.show{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}
.action-confirm > span{
  min-width:0;
  font-size:12px;
  font-weight:750;
  line-height:1.3;
  white-space:normal;
}
.action-confirm > div{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
}
.action-confirm button,
body.day-mode .action-confirm button,
body.night-mode .action-confirm button{
  min-width:0;
  min-height:32px;
  border:0;
  border-radius:999px;
  padding:7px 11px;
  background:transparent;
  box-shadow:none;
  font-size:11px;
  font-weight:800;
}
.action-confirm [data-action-confirm-cancel]{
  color:#73737a;
}
.action-confirm [data-action-confirm-accept]{
  background:rgba(201,52,47,.1);
  color:#c9342f;
}
.action-confirm button:focus-visible{
  outline:2px solid currentColor;
  outline-offset:1px;
}
button.is-busy,
.primary.is-busy,
.secondary.is-busy{
  cursor:wait;
  opacity:.76;
  transform:translateY(1px);
}
button.is-success,
.primary.is-success,
.secondary.is-success{
  box-shadow:0 0 0 3px rgba(0,255,9,.24),0 14px 32px rgba(0,0,0,.18);
}
.char-counter{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-align:right;
}
.empty-with-actions div{
  display:grid;
  justify-items:center;
  gap:10px;
}
.empty-with-actions div{
  grid-template-columns:repeat(2,minmax(0,auto));
  justify-content:center;
  margin-top:14px;
}
.empty-with-actions .primary,
.empty-with-actions .secondary{
  min-height:42px;
  padding:12px 16px;
  border-radius:999px;
  text-decoration:none;
}
.night-card{
  transition:transform .18s ease, opacity .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.night-card:active{
  transform:scale(.97);
}

@keyframes luca-panel-enter  {
  from  {
    opacity:.7;
    transform:translateY(8px);
  }
  to  {
    opacity:1;
    transform:translateY(0);
  }
}
@media (max-width:719px){
  .toast{
    top:calc(66px + env(safe-area-inset-top));
    bottom:auto;
    max-width:calc(100vw - 28px);
  }
  .action-confirm{
    max-width:calc(100vw - 24px);
    border-radius:12px;
    padding:10px;
  }
  .empty-with-actions div{
    grid-template-columns:1fr;
    width:min(100%,260px);
  }
}
@media (prefers-reduced-motion:reduce){
  .night-card,
.pulse-track{
    transition:none;
    animation:none;
  }
}
/* My Cards should fill the available pad/desktop viewport,
not the mobile card rail width. */


/* Final My Night tab system: neutral segmented controls,
below global nav hierarchy. */


/* Match the homepage lead carousel to the rounded editorial modules. */


/* My Cards empty slot: keep the invitation quiet and app-like. */


/* My Cards empty slot must occupy the exact same grid footprint as a real Night Card. */


/* Editing window: make the deadline useful at a glance. */


/* Final deadline visual: plain white card with blue key information. */


/* Final Bangkok desktop density guard. */


/* Bangkok desktop leaderboard: keep the complete left ranking within one screen. */


/* Places migration owner, 2026-07-26: scoped clean rules for #places. */


/* Homepage mobile lead carousel: full page width with no gray section frame. */

/* Cross-device cleanup for the recent visual direction. */


/* After Midnight article rail: make horizontal swiping explicit and resilient. */


/* From LUCA article cards: never exceed their section on any viewport. */


/* Monthly Awards is a real content card; keep its white surface on every device. */


/* Rail content cards: awards, map, trending, and radar keep white card surfaces on every device. */


/* Mobile FROM LUCA repair: stable list cards that never push the viewport sideways. */

/* Final tablet/desktop My Night layout: outside tabs, local publish action. */


/* Final My Night modal layering: center sheets above local tabs on every viewport. */


/* Final homepage lead carousel lock: three-up desktop/tablet, one-up mobile. */


/* Absolute EOF mobile Night Card detail fix. */


/* Night Card standalone detail page. */


/* Night Card standalone count final. */


/* Night Card standalone UI repair: keep the designed detail layout outside modal state. */


/* Night Card standalone final fixes: owner tools, top alignment, no floating social bar. */


/* Night Card standalone equal top alignment final. */


/* Night Card right column grouped sections. */


/* Night Card standalone owner action colors final. */


/* Night Card owner colors nuclear specificity. */


/* Night Card profile block is unframed. */


/* Night Card post block: only caption is framed. */


/* Night Card responsive layout: desktop and pad two-column, mobile stacked. */


/* Night Card standalone top breathing room. */


/* Night Card image fills its frame. */


/* Night Card final valid responsive and flat buttons. */


/* Final Night Card detail route polish. */


/* Night Card mobile: keep detail content below the fixed topbar. */


/* Night Card mobile: give stacked detail blocks more breathing room. */


/* Night Card edit form: keep controls inside the card on narrow screens. */


/* My Cards deadline: clearer close time and visual countdown. */


/* iPhone-style activity arc: a clear ten-second loading rotation. */


@keyframes night-deadline-spinner {
  to { transform:rotate(360deg); }
}


/* My Cards tab hint auto-dismiss state. */


/* My Cards deadline: stack close label and time on phones. */


/* My Cards deadline ring changes color as the deadline approaches. */


/* My Cards pending card fill action: soft purple. */


/* Plaza rule: compact single-line status. */


/* Plaza rule: return to rule card, with quieter helper text. */


/* Night mode sync for the Plaza rule card and My Cards deadline notices. */


/* My Cards pending checkout uses the same surface as the deadline card. */


/* My Night tabs: night-mode color sync. */


/* My Cards pending item: quieter, tighter shadow. */


/* Night mode deadline readability fix. */


/* Night Card detail route: final night-mode sync. */


/* My Cards pending section title: stronger hierarchy. */


/* My Cards pending card: readable night-mode surface. */


/* My Night desktop: keep the side nav outside the content rail. */


/* My Night side tabs: separate rounded pills in night mode. */


/* My Night publish hint: follows the Check in button. */


/* My Night Plaza locked preview: quieter image-first cards. */


/* City podium: compact on desktop/tablet so the ranking does not dominate the feed. */


/* Primary actions: confirmation, save and sign-in controls use brand purple. */
button.primary,
a.primary,
.primary,
form button[type="submit"],
.article-comment-signin,
.review-signin{
  background:#6d4cff;
  border-color:#6d4cff;
  color:#fff;
  -webkit-text-fill-color:#fff;
  box-shadow:0 10px 24px rgba(109,76,255,.24);
}

button.primary:hover,
a.primary:hover,
.primary:hover,
.day-mode .primary:hover,
form button[type="submit"]:hover,
.article-comment-signin:hover,
.review-signin:hover,
button.primary:focus-visible,
a.primary:focus-visible,
.primary:focus-visible,
.day-mode .primary:focus-visible,
form button[type="submit"]:focus-visible,
.article-comment-signin:focus-visible,
.review-signin:focus-visible{
  background:#5f43f5;
  border-color:#5f43f5;
  color:#fff;
  -webkit-text-fill-color:#fff;
}

button.primary:active,
a.primary:active,
.primary:active,
.day-mode .primary:active,
form button[type="submit"]:active{
  background:#5639ea;
  border-color:#5639ea;
  color:#fff;
  -webkit-text-fill-color:#fff;
  box-shadow:0 5px 14px rgba(86,57,234,.22);
}

button.primary:disabled,
.primary:disabled,
form button[type="submit"]:disabled{
  opacity:.55;
  box-shadow:none;
}

/* City ranking podium: web/tablet gets a compact 2-1-3 stage. */


/* My Night side tabs: inactive hover uses a soft purple state. */


/* City ranking: keep top cards compact and editorial, without the heavy podium block. */


/* Bangkok leaderboard: desktop/tablet split top three and the remaining list. */


/* Bangkok ranking final layout: centered stack, no container wash. */


/* Bangkok list rows: neutral cards, purple only for score pills. */


/* Bangkok top three medal colors. */


/* Bangkok ranking scores: make results the loudest element. */


/* Bangkok ranking desktop insight rail. */


/* Tablet landscape/portrait: preserve the two-column ranking composition. */


/* Final visual override: keep the Bangkok podium visibly premium in every theme. */


/* Bangkok top three: a restrained dark stage to give the leaders presence. */


/* My Cards: keep the full bottom overlay inside the fixed image frame. */


/* Member rows below the podium stay readable and subordinate on every viewport. */


/* Bangkok ranking: compact desktop split with a calm, consistent insight rail. */


/* Bangkok tab: use the full desktop rail so the city overview does not feel sparse. */


/* My Cards empty Check in card must match the real Night Card frame exactly. */


/* My Cards pending title: make the waiting count carry the hierarchy. */


/* Deadline ring: progress and animated arc both start from 12 o'clock. */
@property --deadline-progress {
  syntax:"<angle>";
  inherits:true;
  initial-value:0deg;
}


/* My Night content top aligns with the side Plaza tab on tablet and desktop. */


/* My Cards shares the same desktop rail as Plaza, Nearby, and Bangkok. */


/* My Cards desktop/tablet header: deadline on the left, pending cards on the right. */


/* My Cards pending checkout: fixed queue, modal editor. */


/* My Cards pending tray: fixed module, visible cards, editor only as page modal. */


/* My Cards must keep the same outer content start and side action model as the other My Night tabs. */


/* Final deadline-card layout guard. */


/* Pending Night Card create modal: highlight fixed venue and check-in time. */


/* Pending Night Card editor: keep close/create reachable on short and mobile screens. */


/* My Cards mid-size internal grid. */


/* Pending Night Cards: inviting continuation without a task-warning treatment. */


/* My Night Cards starts on the countdown edge on tablet and desktop. */


/* Minimal deadline treatment: the remaining time is the only accent. */


/* Final deadline visual: plain white card with blue key information. */


/* Final Bangkok desktop density guard. */


/* My Cards deadline: reuse the Inspiration hero figure as a quiet backdrop. */


/* Bangkok podium: share the Inspiration hero's city-at-night atmosphere. */


/* Night-mode parity for the refreshed My Cards surfaces. */


/* The podium is the content; it does not need another card behind it. */


body .article-comment-form{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
}

body .article-comment-form textarea{
  grid-column:1 / -1;
}

body .article-comment-form .char-counter{
  grid-column:1;
  grid-row:2;
  align-self:center;
  margin:0;
}

body .article-comment-form button[type="submit"],
body.day-mode .article-comment-form button[type="submit"],
body.night-mode .article-comment-form button[type="submit"],
body .review-form button[type="submit"],
body.day-mode .review-form button[type="submit"],
body.night-mode .review-form button[type="submit"]{
  width:auto;
  min-width:82px;
  height:36px;
  min-height:36px;
  border-radius:999px;
  padding:0 18px;
}

body .article-comment-form button[type="submit"]{
  grid-column:2;
  grid-row:2;
  justify-self:end;
}

/* Shared threaded discussions: articles, Night Cards and Moments. */
.article-comment.is-reply{
  position:relative;
  margin-left:42px;
  width:calc(100% - 42px);
}
.article-comment.is-reply::before{
  content:none;
}
.comment-reply-to{
  display:block;
  margin:0 0 4px;
  color:#7465d9;
  font-size:11px;
  font-weight:800;
}
.comment-actions{
  display:flex;
  align-items:center;
  min-height:26px;
  margin-top:7px;
}
.article-comment:has(.comment-reply-button){
  cursor:pointer;
  transition:background-color .18s ease, transform .18s ease;
}
.article-comment:has(.comment-reply-button):hover{
  background:rgba(101,80,232,.045);
}
.article-comment:has(.comment-reply-button):active{
  transform:scale(.995);
}
.comment-reply-button,
.article-comment-form .comment-reply-context button{
  appearance:none;
  width:auto;
  min-width:0;
  min-height:28px;
  padding:3px 9px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#6550e8;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
}
.comment-reply-button:hover,
.comment-reply-button:focus-visible{
  background:rgba(101,80,232,.1);
}
.comment-reply-context{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(101,80,232,.09);
  color:inherit;
  font-size:12px;
}
.comment-reply-context[hidden]{ display:none; }
.comment-reply-context strong{ color:#6550e8; }
.article-comment-form .comment-reply-context button{ margin-left:auto; }
body.night-mode .comment-reply-to,
body.night-mode .comment-reply-button,
body.night-mode .comment-reply-context strong,
body.night-mode .article-comment-form .comment-reply-context button{ color:#a995ff; }
body.night-mode .comment-reply-context{ background:rgba(169,149,255,.12); }
@media (max-width:560px){
  .article-comment.is-reply{ margin-left:28px; width:calc(100% - 28px); }
}