:root{
  --bg:#0A0908; --bg2:#14110C; --card:#1A1610; --card2:#221D14; --line:#2E271B;
  --ink:#F4EFE4; --soft:#ADA28D; --faint:#7E7666;
  --gold:#D4A24A; --gold-hi:#EFC26A; --copper:#8A5A33; --teal:#3EC7CC;
  --grad-purple:#7B4DC9; --grad-magenta:#E0509F; --grad-orange:#F5A03C;
  --rail-w:340px; --topbar-h:60px;
  --wash: linear-gradient(120deg, var(--grad-purple), var(--grad-magenta) 55%, var(--grad-orange));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif; font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}
button{font-family:inherit; cursor:pointer}
input,textarea{font-family:inherit}
::selection{background:var(--gold); color:var(--bg)}

.is-hidden{display:none !important}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(10,9,8,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; height:var(--topbar-h);
  display:flex; align-items:center; gap:18px; padding:0 20px;
}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
.wordmark{
  font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:.28em;
  font-size:14px; color:var(--gold); white-space:nowrap;
}
.pill-backstage{
  font-family:'Archivo',sans-serif; font-weight:700; letter-spacing:.18em; font-size:10px;
  color:var(--bg); background:var(--teal); padding:3px 9px; border-radius:3px; white-space:nowrap;
}
.tabs{display:flex; gap:2px; margin-left:auto}
.tab{
  background:none; border:none; color:var(--soft);
  font-weight:700; letter-spacing:.14em; font-size:12px; padding:8px 12px;
  border-bottom:2px solid transparent; transition:color .15s;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--gold); border-bottom-color:var(--gold)}
.topbar-right{margin-left:14px; display:flex; align-items:center; gap:10px}

.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--wash); color:var(--bg);
  display:grid; place-items:center; font-weight:900; font-size:13px;
  border:1.5px solid var(--gold); user-select:none;
}
.btn-gold{
  background:var(--gold); color:var(--bg); border:none; border-radius:3px;
  font-weight:700; letter-spacing:.06em; font-size:13px; padding:9px 16px;
  transition:background .15s, transform .05s;
}
.btn-gold:hover{background:var(--gold-hi)}
.btn-gold:active{transform:translateY(1px)}
.btn-ghost{
  background:none; color:var(--gold); border:1px solid var(--gold); border-radius:3px;
  font-weight:700; letter-spacing:.05em; font-size:13px; padding:8px 14px;
}
.btn-ghost:hover{background:rgba(212,162,74,.1)}
.btn-block{width:100%; padding:12px; font-size:14px}
.link-btn{background:none; border:none; color:var(--gold); font-weight:700; text-decoration:underline; padding:0; font-size:inherit}

/* ---------- Shell / columns ---------- */
.shell{
  max-width:1180px; margin:0 auto; padding:22px 20px 120px;
  display:grid; grid-template-columns:1fr var(--rail-w); gap:26px; align-items:start;
}
.col-main{min-width:0}
.col-rail{position:sticky; top:calc(var(--topbar-h) + 22px); display:flex; flex-direction:column; gap:16px}

/* ---------- Section labels (gold spaced caps + rule) ---------- */
.section-label{
  display:flex; align-items:center; gap:12px;
  font-weight:700; letter-spacing:.22em; font-size:11px; color:var(--gold);
  margin:0 0 12px; text-transform:uppercase;
}
.section-label .rule{width:34px; height:1px; background:var(--gold); flex-shrink:0}

/* ---------- Composer ---------- */
.composer{
  background:var(--card); border:1px solid var(--line); border-radius:5px;
  padding:14px; margin-bottom:18px;
}
.composer-row{display:flex; gap:12px; align-items:flex-start}
.composer textarea{
  flex:1; background:transparent; border:none; color:var(--ink); resize:none;
  font-size:15px; line-height:1.5; min-height:44px; outline:none;
}
.composer textarea::placeholder{color:var(--faint)}
.composer-foot{display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.char-count{font-family:'Space Grotesk',monospace; font-size:12px; color:var(--faint)}
.char-count.over{color:var(--grad-magenta)}
.composer.locked{cursor:pointer}
.composer-locked-cta{
  display:flex; align-items:center; gap:10px; color:var(--soft); font-size:14px;
}
.composer-locked-cta .btn-gold{margin-left:auto}

/* ---------- Feed / posts ---------- */
.feed-list{display:flex; flex-direction:column; gap:14px}
.skeleton-note,.empty-note{color:var(--faint); font-size:14px; padding:24px 4px; text-align:center}
.post{
  background:var(--card); border:1px solid var(--line); border-radius:5px; padding:15px 16px;
}
.post-head{display:flex; align-items:center; gap:11px; margin-bottom:9px}
.post-avatar{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; font-size:14px; color:var(--bg);
  background:var(--copper); flex-shrink:0; user-select:none;
}
.post-avatar.band{background:var(--wash); border:1.5px solid var(--gold)}
.post-name-wrap{display:flex; flex-direction:column; min-width:0}
.post-name{font-weight:700; font-size:14px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.badge-band{
  font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--bg);
  background:var(--gold); padding:2px 6px; border-radius:3px;
}
.post-handle{color:var(--faint); font-size:12px; font-weight:400}
.post-time{color:var(--faint); font-size:12px; margin-left:auto; font-family:'Space Grotesk',monospace}
.post-body{font-size:15px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere}
.post-img{
  margin-top:11px; border-radius:5px; border:1px solid var(--line); overflow:hidden;
}
.post-img img{display:block; width:100%; height:auto; max-height:440px; object-fit:cover}
.post-actions{display:flex; align-items:center; gap:18px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line)}
.act{
  display:flex; align-items:center; gap:7px; background:none; border:none; color:var(--soft);
  font-weight:600; font-size:13px; padding:2px 0; transition:color .12s;
}
.act:hover{color:var(--ink)}
.act .ico{font-size:16px; line-height:1}
.act.liked{color:var(--grad-magenta)}
.act.liked .ico{transform:scale(1.05)}
.act .n{font-family:'Space Grotesk',monospace; min-width:8px}

/* comments */
.comments{margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:none; flex-direction:column; gap:10px}
.comments.open{display:flex}
.comment{display:flex; gap:9px; align-items:flex-start}
.c-avatar{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:11px; color:var(--bg); background:var(--copper); flex-shrink:0}
.c-avatar.band{background:var(--wash); border:1px solid var(--gold)}
.c-body{font-size:13.5px; line-height:1.45; min-width:0}
.c-name{font-weight:700; margin-right:6px}
.c-name .badge-band{margin-left:5px}
.comment-form{display:flex; gap:8px; margin-top:4px}
.comment-form input{
  flex:1; background:var(--bg2); border:1px solid var(--line); border-radius:4px;
  color:var(--ink); padding:8px 10px; font-size:13.5px; outline:none;
}
.comment-form input:focus{border-color:var(--gold)}
.comment-form button{padding:8px 12px; font-size:12px}

/* ---------- Drops ---------- */
.drops-list{display:flex; flex-direction:column; gap:14px}
.drop{
  background:var(--card); border:1px solid var(--line); border-radius:6px; padding:16px;
  display:flex; gap:15px; align-items:center;
}
.drop.unlocked{border-color:rgba(62,199,204,.35)}
.drop.event{background:linear-gradient(120deg, rgba(123,77,201,.16), rgba(224,80,159,.12) 55%, rgba(245,160,60,.14)); border-color:rgba(224,80,159,.3)}
.drop-art{
  width:74px; height:74px; border-radius:5px; flex-shrink:0; overflow:hidden;
  background:var(--card2); display:grid; place-items:center; border:1px solid var(--line);
}
.drop-art img{width:100%; height:100%; object-fit:cover}
.drop-art .lock-ico{font-size:26px; color:var(--faint)}
.drop-art .evt-ico{font-size:26px}
.drop-main{flex:1; min-width:0}
.drop-title{font-weight:700; font-size:16px}
.drop-sub{color:var(--soft); font-size:13px; margin-top:2px}
.drop-meta{margin-top:8px; display:flex; align-items:center; gap:10px}
.chip{
  font-size:10px; font-weight:700; letter-spacing:.1em; padding:3px 8px; border-radius:3px;
  font-family:'Space Grotesk',monospace;
}
.chip.teal{background:rgba(62,199,204,.16); color:var(--teal); border:1px solid rgba(62,199,204,.4)}
.chip.locked{background:var(--card2); color:var(--faint); border:1px solid var(--line)}
.chip.event{background:rgba(224,80,159,.16); color:var(--grad-magenta); border:1px solid rgba(224,80,159,.4)}
.drop-when{color:var(--faint); font-size:12px; font-family:'Space Grotesk',monospace}
.play-btn{
  width:44px; height:44px; border-radius:50%; background:var(--teal); color:var(--bg);
  border:none; display:grid; place-items:center; font-size:16px; flex-shrink:0;
  transition:transform .08s;
}
.play-btn:hover{transform:scale(1.06)}

/* ---------- Player card (rail) ---------- */
.player-card{}
.player-body{display:flex; flex-direction:column; gap:12px}
.player-top{display:flex; gap:12px; align-items:center}
.player-art{width:56px; height:56px; border-radius:4px; overflow:hidden; flex-shrink:0; background:var(--card2); border:1px solid var(--line)}
.player-art img{width:100%; height:100%; object-fit:cover}
.player-meta{min-width:0}
.player-title{font-weight:700; font-size:14px}
.player-sub{color:var(--soft); font-size:12px; margin-top:1px}
.player-controls{display:flex; align-items:center; gap:12px}
.waveform{
  flex:1; height:36px; display:flex; align-items:center; gap:2px; overflow:hidden;
}
.waveform .bar{
  flex:1; min-width:2px; background:var(--copper); border-radius:2px; opacity:.55;
  transition:height .2s, background .2s, opacity .2s;
}
.waveform.playing .bar{background:var(--teal); animation:wv 1s ease-in-out infinite alternate}
.player-time{font-family:'Space Grotesk',monospace; font-size:11px; color:var(--faint); white-space:nowrap}
@keyframes wv{from{opacity:.4}to{opacity:1}}

/* ---------- Shows ---------- */
.shows-list{display:flex; flex-direction:column; gap:12px}
.show{
  background:var(--card); border:1px solid var(--line); border-radius:6px; padding:15px 16px;
  display:flex; gap:15px; align-items:flex-start;
}
.show-date{
  flex-shrink:0; width:58px; text-align:center; border:1px solid var(--line); border-radius:5px;
  padding:8px 4px; background:var(--bg2);
}
.show-mon{font-weight:700; letter-spacing:.1em; font-size:11px; color:var(--gold)}
.show-day{font-family:'Space Grotesk',monospace; font-weight:700; font-size:22px; line-height:1}
.show-main{flex:1; min-width:0}
.show-city{font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.show-venue{color:var(--soft); font-size:13px; margin-top:2px}
.tag-sample{
  font-size:9px; font-weight:700; letter-spacing:.08em; color:var(--faint);
  border:1px solid var(--line); padding:1px 6px; border-radius:3px;
}
.presale{
  margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(62,199,204,.08); border:1px solid rgba(62,199,204,.3); border-radius:4px; padding:8px 10px;
}
.presale-label{font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--teal)}
.presale-code{font-family:'Space Grotesk',monospace; font-weight:700; font-size:14px; color:var(--teal); letter-spacing:.06em}
.presale-copy{margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--teal); background:none; border:1px solid var(--teal); border-radius:3px; padding:5px 9px}
.presale.locked{background:var(--card2); border-color:var(--line)}
.presale.locked .presale-label,.presale.locked .presale-code{color:var(--faint)}
/* Sample/illustrative shows: muted "coming when confirmed" state, no live code */
.presale.pending{background:var(--card2); border-color:var(--line)}
.presale.pending .presale-label{color:var(--faint)}
.presale-note{font-size:12.5px; color:var(--faint); font-style:italic}
/* Real show, signed out: compact inline chip (not a full-width bar) */
.presale-chip{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--soft);
  background:var(--card2); border:1px solid var(--line); border-radius:20px; padding:4px 11px;
  transition:border-color .12s, color .12s;
}
.presale-chip:hover{border-color:var(--teal); color:var(--teal)}
/* Single join prompt for signed-out Shows tab */
.shows-join{
  margin-top:4px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--card); border:1px solid rgba(62,199,204,.3); border-radius:6px; padding:13px 16px; cursor:pointer;
}
.shows-join-copy{flex:1; color:var(--soft); font-size:13.5px; min-width:0}
.shows-join .btn-gold{flex-shrink:0}
.meetup{margin-top:9px; display:flex; align-items:center; gap:8px; color:var(--soft); font-size:12.5px}
.meetup .dot{width:6px; height:6px; border-radius:50%; background:var(--gold)}

/* ---------- Ask ---------- */
.ama-banner{
  background:var(--card); border:1px solid rgba(212,162,74,.3); border-radius:6px; padding:16px 18px; margin-bottom:16px;
}
.ama-kicker{font-weight:700; letter-spacing:.16em; font-size:12px; color:var(--gold)}
.ama-copy{color:var(--soft); font-size:13.5px; margin-top:6px}
.ask-composer{margin-bottom:16px}
.questions-list{display:flex; flex-direction:column; gap:14px}
.question{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:15px 16px}
.q-head{display:flex; gap:12px; align-items:flex-start}
.q-upvote{
  display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0;
  background:var(--bg2); border:1px solid var(--line); border-radius:5px; padding:6px 9px; min-width:44px;
  color:var(--soft); transition:border-color .12s, color .12s;
}
.q-upvote:hover{border-color:var(--gold); color:var(--ink)}
.q-upvote.upvoted{border-color:var(--gold); color:var(--gold); background:rgba(212,162,74,.1)}
.q-upvote .arr{font-size:13px; line-height:1}
.q-upvote .n{font-family:'Space Grotesk',monospace; font-weight:700; font-size:14px}
.q-content{flex:1; min-width:0}
.q-topline{display:flex; gap:7px; margin-bottom:5px; flex-wrap:wrap}
.q-topline:empty{display:none}
.q-mine{
  font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--bg);
  background:var(--gold); padding:2px 7px; border-radius:3px;
}
.q-pinned{
  font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--teal);
  background:rgba(62,199,204,.14); border:1px solid rgba(62,199,204,.4); padding:1px 7px; border-radius:3px;
}
.question.just-asked{border-color:rgba(62,199,204,.5); box-shadow:0 0 0 1px rgba(62,199,204,.25)}
.question.mine{border-color:rgba(212,162,74,.4)}
.q-body{font-size:15px; line-height:1.5; word-wrap:break-word; overflow-wrap:anywhere}
.q-by{color:var(--faint); font-size:12px; margin-top:6px}
.q-answer{
  margin-top:12px; border-left:3px solid var(--gold); background:var(--bg2);
  border-radius:0 5px 5px 0; padding:11px 14px;
}
.q-answer-head{display:flex; align-items:center; gap:8px; margin-bottom:5px}
.q-answer-by{font-weight:700; font-size:13px}
.q-answer-body{font-size:14px; line-height:1.5; color:var(--ink)}
.q-pending{margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--faint)}

/* ---------- Rail cards ---------- */
.rail-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:15px 16px}
.nextup-list{display:flex; flex-direction:column; gap:12px}
.nextup{display:flex; gap:11px; align-items:center}
.nextup-date{
  flex-shrink:0; width:44px; text-align:center; border:1px solid var(--line); border-radius:4px; padding:5px 2px; background:var(--bg2);
}
.nextup-mon{font-weight:700; font-size:9px; letter-spacing:.08em; color:var(--gold)}
.nextup-day{font-family:'Space Grotesk',monospace; font-weight:700; font-size:16px; line-height:1}
.nextup-info{min-width:0}
.nextup-city{font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nextup-venue{color:var(--faint); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.leaderboard{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; counter-reset:lb}
.lb-row{display:flex; align-items:center; gap:11px}
.lb-rank{
  font-family:'Space Grotesk',monospace; font-weight:700; font-size:13px; color:var(--faint);
  width:22px; text-align:center; flex-shrink:0;
}
.lb-row.top .lb-rank{color:var(--gold)}
.lb-name{flex:1; font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-pts{font-family:'Space Grotesk',monospace; font-size:12.5px; color:var(--soft)}

/* ---------- Bottom tab bar (mobile) ---------- */
.tabbar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:45;
  background:rgba(10,9,8,.94); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar-btn{
  flex:1; background:none; border:none; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 0 8px;
}
.tabbar-btn .tb-ico{font-size:18px; line-height:1}
.tabbar-btn .tb-lbl{font-size:10px; font-weight:600; letter-spacing:.04em}
.tabbar-btn.is-active{color:var(--gold)}

/* ---------- Concept banner + toast ---------- */
.concept-banner{
  position:fixed; bottom:8px; right:10px; z-index:30;
  font-size:10px; color:var(--faint); background:rgba(10,9,8,.82);
  border:1px solid var(--line); border-radius:20px; padding:5px 12px; letter-spacing:.02em;
  pointer-events:none; max-width:min(92vw,460px);
}
.toast{
  position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(20px);
  z-index:60; background:var(--card2); color:var(--ink); border:1px solid var(--gold);
  border-radius:6px; padding:11px 18px; font-size:13.5px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- Auth modal ---------- */
.modal-scrim{
  position:fixed; inset:0; z-index:100; background:rgba(6,5,4,.82); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:20px;
}
.modal{
  position:relative; width:100%; max-width:400px; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:30px 26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modal::before{
  content:''; position:absolute; inset:0; border-radius:10px; padding:1px;
  background:var(--wash); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none;
}
.modal-x{position:absolute; top:12px; right:14px; background:none; border:none; color:var(--faint); font-size:24px; line-height:1; padding:2px 6px}
.modal-x:hover{color:var(--ink)}
.modal-wordmark{font-weight:900; letter-spacing:.26em; font-size:13px; color:var(--gold); text-align:center}
.modal-pill{display:inline-block; margin:8px auto 0; text-align:center}
.modal .modal-pill{display:block; width:max-content; margin:8px auto 0}
.modal-title{font-family:'Abril Fatface',serif; font-weight:400; font-size:28px; text-align:center; margin:16px 0 6px}
.modal-sub{color:var(--soft); font-size:13.5px; text-align:center; margin:0 0 20px; line-height:1.45}
.auth-form{display:flex; flex-direction:column; gap:13px}
.field{display:flex; flex-direction:column; gap:5px}
.field-lbl{font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--soft); text-transform:uppercase}
.field input{
  background:var(--bg2); border:1px solid var(--line); border-radius:5px; color:var(--ink);
  padding:11px 12px; font-size:14.5px; outline:none; transition:border-color .12s;
}
.field input:focus{border-color:var(--gold)}
.field input::placeholder{color:var(--faint)}
.auth-error{color:var(--grad-magenta); font-size:13px; font-weight:600; text-align:center}
.auth-toggle{text-align:center; margin-top:16px; font-size:13.5px; color:var(--soft)}
.auth-toggle .link-btn{margin-left:5px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  /* Leave room for the tab bar + the docked concept strip above it so neither overlaps the last card. */
  .shell{grid-template-columns:1fr; gap:0; padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  .col-rail{display:none}
  .tabs{display:none}
  .tabbar{display:flex}
  .topbar-inner{gap:12px}
  .topbar-right{margin-left:auto}
  /* Dock as a full-width opaque strip directly above the tab bar — never a floating pill over cards.
     Sits on the tabbar's top edge; tabbar height ~47px + iOS safe-area inset. */
  .concept-banner{
    left:0; right:0; bottom:calc(47px + env(safe-area-inset-bottom));
    transform:none; max-width:none; width:100%; text-align:center;
    background:var(--bg); border:none; border-top:1px solid var(--line); border-radius:0;
    padding:7px 14px; opacity:1;
  }
}
@media (max-width:420px){
  .wordmark{font-size:12px; letter-spacing:.2em}
  .shell{padding:16px 14px calc(120px + env(safe-area-inset-bottom))}
  .post,.drop,.show,.question,.rail-card{padding:13px 14px}
  .modal{padding:26px 20px 22px}
}

/* Rail also visible on wide mobile? No — rail is desktop only. On mobile, drops/shows/leaderboard
   live inside their own tabs, so nothing is lost. */