/* assets/css/main.css */
:root {
  --saffron: #FF6B1A;
  --turmeric: #F5A623;
  --rose: #E84393;
  --teal: #00C9A7;
  --indigo: #3D2B8E;
  --deep: #0D0A1E;
  --cream: #FFF8F0;
  --gold: #FFD700;
  --surface: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--deep);
  color: var(--cream);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── AUTH PAGE ── */
.auth-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: radial-gradient(ellipse 80% 60% at 30% 30%, #3D2B8E55, transparent),
              radial-gradient(ellipse 60% 80% at 70% 70%, #E8439322, transparent), var(--deep);
}
.auth-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem;
  width: 100%; max-width: 400px;
  text-align: center;
}
.auth-logo { font-size: 3rem; margin-bottom: 0.5rem; }
.auth-card h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--saffron), var(--rose));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.auth-sub { color: rgba(255,255,255,.4); font-size:0.78rem; letter-spacing:3px; text-transform:uppercase; margin:.5rem 0 1.5rem; }
.auth-footer { margin-top: 1.5rem; font-size: 0.82rem; color: rgba(255,255,255,.4); }

/* ── FORMS ── */
.field { margin-bottom: 1rem; text-align: left; }
.field label { display: block; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  color: var(--cream);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
}
.field input:focus, .field select:focus { border-color: var(--saffron); }
.field select option { background: #1a1530; }

/* ── BUTTONS ── */
.btn-primary {
  background: linear-gradient(135deg, var(--saffron), var(--rose));
  border: none; border-radius: 10px;
  padding: 0.8rem 1.8rem;
  color: white; cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase;
  transition: all 0.3s; display: inline-block;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,67,147,.4); }
.btn-primary.full-width { width: 100%; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px; padding: 0.7rem 1.4rem;
  color: rgba(255,255,255,.7); cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase;
  transition: all 0.3s; display: inline-block;
}
.btn-outline:hover { border-color: var(--saffron); color: var(--saffron); text-decoration: none; }

/* ── ALERTS ── */
.alert {
  padding: 0.9rem 1.2rem;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}
.alert-error   { background: rgba(255,50,50,.1); border: 1px solid rgba(255,50,50,.3); color: #ff8080; }
.alert-success { background: rgba(0,201,167,.1); border: 1px solid rgba(0,201,167,.3); color: var(--teal); }

/* ── CARDS ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

/* ── BADGES ── */
.badge {
  display: inline-block;
  padding: 3px 10px; border-radius: 20px;
  font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase;
}
.badge-public   { background: rgba(0,201,167,.15); color: var(--teal); border: 1px solid rgba(0,201,167,.3); }
.badge-private  { background: rgba(255,107,26,.15); color: var(--turmeric); border: 1px solid rgba(255,107,26,.3); }
.badge-band     { background: rgba(61,43,142,.3); color: #a78bfa; border: 1px solid rgba(61,43,142,.5); }
.badge-admin    { background: rgba(232,67,147,.15); color: var(--rose); border: 1px solid rgba(232,67,147,.3); }
.badge-friend   { background: rgba(0,201,167,.15); color: var(--teal); border: 1px solid rgba(0,201,167,.3); }
.badge-upcoming { background: rgba(0,201,167,.15); color: var(--teal); border: 1px solid rgba(0,201,167,.3); }
.badge-past     { background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); border: 1px solid var(--border); }
.badge-active   { background: rgba(0,201,167,.15); color: var(--teal); border: 1px solid rgba(0,201,167,.3); }
.badge-inactive { background: rgba(255,50,50,.1); color: #ff8080; border: 1px solid rgba(255,50,50,.2); }

/* ════════════════════════════════════════════════════════════
   INDEX PAGE STYLES
   ════════════════════════════════════════════════════════════ */

/* ── BG & PETALS ── */
.bg-canvas {
  position:fixed;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 20% 20%,#3D2B8E55,transparent),
             radial-gradient(ellipse 60% 80% at 80% 80%,#E8439322,transparent),#0D0A1E;
}
.petals{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.petal{position:absolute;border-radius:50% 0 50% 0;opacity:0;animation:floatUp linear infinite;}
@keyframes floatUp{0%{transform:translateY(110vh) rotate(0deg);opacity:0}10%{opacity:.5}90%{opacity:.3}100%{transform:translateY(-10vh) rotate(720deg);opacity:0}}

/* ── LAYOUT ── */
.wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 1.5rem;}

/* ── TOPBAR ── */
.topbar{display:flex;align-items:center;justify-content:flex-end;padding:1rem 0;gap:1rem;font-size:.78rem;}
.topbar a{color:rgba(255,255,255,.5);letter-spacing:1px;}
.topbar a:hover{color:var(--saffron);text-decoration:none;}
.user-pill{background:rgba(255,107,26,.15);border:1px solid rgba(255,107,26,.3);border-radius:20px;padding:4px 14px;color:var(--turmeric);}

/* ── HERO ── */
header{text-align:center;padding:4rem 0 2rem;}
.hero-icon{font-size:3rem;display:block;animation:pulse 3s ease-in-out infinite;filter:drop-shadow(0 0 20px var(--saffron));}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
h1.title{font-family:'Playfair Display',serif;font-size:clamp(3rem,8vw,5.5rem);font-weight:700;
  background:linear-gradient(135deg,var(--saffron),var(--turmeric),var(--rose),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:-2px;line-height:1;animation:shimmer 4s ease-in-out infinite;background-size:200% auto;}
@keyframes shimmer{0%,100%{background-position:0% center}50%{background-position:100% center}}
.devnagari{font-family:'Noto Serif Devanagari',serif;font-size:1.3rem;color:var(--turmeric);opacity:.65;margin:.3rem 0;}
.subtitle{font-size:.78rem;letter-spacing:6px;text-transform:uppercase;color:var(--teal);}

/* ── TABS ── */
.tabs{display:flex;justify-content:center;gap:0;
  margin:2.5rem auto 0;
  background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:50px;
  padding:5px;width:fit-content;}
.tab{background:none;border:none;color:rgba(255,255,255,.45);
  font-family:'Josefin Sans',sans-serif;font-size:.75rem;letter-spacing:3px;text-transform:uppercase;
  padding:.65rem 1.6rem;border-radius:50px;cursor:pointer;transition:all .3s;}
.tab:hover{color:rgba(255,255,255,.8);}
.tab.active{background:linear-gradient(135deg,var(--saffron),var(--rose));color:#fff;
  box-shadow:0 4px 18px rgba(232,67,147,.4);}

/* ── SECTIONS ── */
.section{display:none;padding:3rem 0 5rem;animation:fadeUp .45s ease;}
.section.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.sec-title{font-family:'Playfair Display',serif;font-size:2rem;font-style:italic;}
.sec-line{width:50px;height:3px;background:linear-gradient(90deg,var(--saffron),var(--rose));border-radius:3px;margin:.3rem 0 2rem;}

/* ══════════════════════════════════════════════════════════
   YOUTUBE-STYLE PLAYER BAR
   ══════════════════════════════════════════════════════════ */
.player-bar {
  background: linear-gradient(135deg, rgba(61,43,142,.35), rgba(13,10,30,.9));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 1.2rem 1.5rem 1rem;
  margin-bottom: 1.8rem;
  display: none;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.player-bar.on { display: block; animation: fadeUp .3s ease; }

/* Top row: album art placeholder + track info + controls */
.player-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.player-thumb {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--saffron), var(--rose));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  animation: thumbPulse 2s ease-in-out infinite;
}
@keyframes thumbPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(232,67,147,.4)}
  50%{box-shadow:0 0 0 8px rgba(232,67,147,0)}
}
.player-info { flex: 1; min-width: 0; }
.now-label { font-size:.6rem;letter-spacing:4px;text-transform:uppercase;color:var(--teal);margin-bottom:2px; }
.now-title {
  font-family:'Playfair Display',serif;font-size:1.05rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.now-raga { font-size:.68rem;color:var(--turmeric);letter-spacing:1px;margin-top:2px;opacity:.8; }

/* Control buttons cluster */
.player-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.ctrl-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  transition: all .2s;
  position: relative;
}
.ctrl-btn:hover { background: rgba(255,255,255,.14); color: #fff; transform: scale(1.1); }
.ctrl-btn.ctrl-play {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--saffron), var(--rose));
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(232,67,147,.35);
}
.ctrl-btn.ctrl-play:hover { transform: scale(1.12); box-shadow: 0 6px 20px rgba(232,67,147,.55); }
.ctrl-btn.active { color: var(--teal); }
/* Tooltip */
.ctrl-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: .6rem;
  letter-spacing: 1px;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 5px;
  pointer-events: none;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
}

/* Volume row */
.player-vol-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}
.vol-icon { font-size: .85rem; color: rgba(255,255,255,.4); cursor: pointer; flex-shrink:0; user-select:none; }
.vol-icon:hover { color: rgba(255,255,255,.8); }
.vol-slider {
  -webkit-appearance: none;
  width: 80px; height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.15);
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,201,167,.5);
}
.vol-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
  border: none;
}
.speed-select {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: rgba(255,255,255,.6);
  font-family: 'Josefin Sans', sans-serif;
  font-size: .65rem;
  letter-spacing: 1px;
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
  margin-left: auto;
}
.speed-select:hover { border-color: var(--teal); color: var(--teal); }
.speed-select option { background: #1a1530; }

/* Progress / scrub bar */
.prog-wrap {
  position: relative;
  margin-bottom: .35rem;
  height: 18px;        /* tall hit area */
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.prog-bg {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  overflow: visible;
}
.prog-loaded {
  position: absolute;
  left: 0;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 4px;
  width: 0%;
  transition: width .5s ease;
}
.prog-fill {
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--saffron), var(--rose));
  width: 0%;
  transition: width .1s linear;
}
.prog-thumb {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(232,67,147,.8);
  left: 0%;
  transform: translate(-50%, 0);
  top: 50%;
  margin-top: -7px;
  opacity: 0;
  transition: opacity .2s, left .1s linear;
  pointer-events: none;
}
.prog-wrap:hover .prog-fill { height: 6px; }
.prog-wrap:hover .prog-bg   { height: 6px; }
.prog-wrap:hover .prog-loaded { height: 6px; }
.prog-wrap:hover .prog-thumb { opacity: 1; }
.prog-wrap.dragging .prog-fill  { height: 6px; transition: none; }
.prog-wrap.dragging .prog-thumb { opacity: 1; transition: none; }
.prog-wrap.dragging .prog-bg    { height: 6px; }

.prog-times {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: rgba(255,255,255,.3);
  margin-top: .1rem;
}

/* ── TRACK CARDS ── */
.tracks { display: grid; gap: .85rem; }
.track-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 1rem;
  align-items: center;
  transition: background .25s, transform .25s;
  position: relative;
  overflow: hidden;
}
.track-card::before {
  content: '';
  position: absolute; left:0;top:0;bottom:0;width:3px;
  background: linear-gradient(180deg,var(--saffron),var(--rose));
  opacity: 0; transition: opacity .25s;
}
.track-card:hover { background: rgba(255,255,255,.07); transform: translateX(3px); }
.track-card:hover::before { opacity: 1; }
.track-card.is-playing {
  background: rgba(61,43,142,.2);
  border-color: rgba(61,43,142,.5);
}
.track-card.is-playing::before { opacity: 1; }

.play-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--saffron), var(--rose));
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff; flex-shrink: 0;
  transition: all .25s;
  box-shadow: 0 4px 14px rgba(232,67,147,.3);
}
.play-btn:hover  { transform: scale(1.1); box-shadow: 0 6px 22px rgba(232,67,147,.5); }
.play-btn.playing { background: linear-gradient(135deg, var(--teal), var(--indigo)); }

.track-info { min-width: 0; }
.track-name { font-family:'Playfair Display',serif;font-size:1rem;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.track-meta { display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; }
.track-raga {
  display:inline-block;font-size:.6rem;letter-spacing:2px;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;
  background:rgba(255,107,26,.12);color:var(--turmeric);
  border:1px solid rgba(255,107,26,.25);
}
.track-dur { font-size:.72rem;color:rgba(255,255,255,.3); }

/* Track action buttons (delete) — shown on hover or for uploader/admin */
.track-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.track-action-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.25);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  transition: all .2s;
  opacity: 0;
}
.track-card:hover .track-action-btn { opacity: 1; }
.track-action-btn.del-btn:hover {
  background: rgba(255,50,50,.15);
  border-color: rgba(255,50,50,.35);
  color: #ff8080;
}

.loading-tracks{text-align:center;padding:3rem;color:rgba(255,255,255,.3);font-size:.85rem;letter-spacing:2px;}

/* ── UPLOAD ── */
.upload-zone{border:2px dashed rgba(255,107,26,.3);border-radius:14px;padding:2.5rem;
  text-align:center;background:rgba(255,107,26,.03);cursor:pointer;transition:all .3s;margin-bottom:1.5rem;}
.upload-zone:hover{border-color:var(--saffron);background:rgba(255,107,26,.07);}
.upload-zone input{display:none;}
.upload-icon{font-size:2rem;display:block;margin-bottom:.6rem;}
.upload-zone p{color:rgba(255,255,255,.45);font-size:.82rem;}
.upload-zone strong{color:var(--saffron);}

/* ── UPLOAD FORM ── */
.upload-form{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:1.5rem;margin-bottom:1.5rem;display:none;}
.upload-form.show{display:block;animation:fadeUp .3s ease;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}

/* ── GATE ── */
.gate{max-width:380px;margin:3rem auto;text-align:center;}
.gate-icon{font-size:2.8rem;margin-bottom:.8rem;}
.gate-title{font-family:'Playfair Display',serif;font-size:1.7rem;margin-bottom:.3rem;}
.gate-sub{color:rgba(255,255,255,.4);font-size:.75rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:1.5rem;}
.protected{display:none;}.protected.open{display:block;animation:fadeUp .5s ease;}

/* ── SETLIST ── */
.concert-hdr{background:linear-gradient(135deg,rgba(61,43,142,.4),rgba(232,67,147,.2));
  border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.8rem;margin-bottom:1.2rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.concert-name{font-family:'Playfair Display',serif;font-size:1.4rem;}
.concert-meta{font-size:.75rem;color:rgba(255,255,255,.45);letter-spacing:2px;text-transform:uppercase;margin-top:3px;}
.setlist{list-style:none;}
.set-item{display:grid;grid-template-columns:32px 1fr auto;gap:1rem;align-items:center;
  padding:.9rem 1.1rem;border-radius:11px;margin-bottom:.5rem;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);transition:all .3s;}
.set-item:hover{background:rgba(255,255,255,.06);}
.set-num{font-size:.72rem;color:rgba(255,255,255,.2);text-align:center;font-weight:600;}
.set-song{font-size:.92rem;}
.set-raga{font-size:.65rem;color:var(--turmeric);letter-spacing:1px;margin-top:2px;opacity:.75;}
.set-dur{font-size:.72rem;color:rgba(255,255,255,.3);}

/* ── COMMENTS ── */
.discussion{margin-top:2rem;}
.disc-title{font-family:'Playfair Display',serif;font-size:1.1rem;font-style:italic;
  color:rgba(255,255,255,.5);margin-bottom:1rem;}
.comment{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:13px;padding:1.1rem;margin-bottom:.8rem;
  display:grid;grid-template-columns:40px 1fr;gap:.9rem;}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:700;background:linear-gradient(135deg,var(--indigo),var(--rose));flex-shrink:0;}
.c-author{font-size:.75rem;color:var(--teal);letter-spacing:1px;margin-bottom:3px;}
.c-body{font-size:.85rem;line-height:1.55;color:rgba(255,255,255,.75);}
.c-time{font-size:.68rem;color:rgba(255,255,255,.25);margin-top:4px;}
.comment-form{display:flex;gap:.9rem;margin-top:1.2rem;}
.comment-form input{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--border);
  border-radius:11px;padding:.75rem 1rem;color:var(--cream);font-family:'Josefin Sans',sans-serif;
  font-size:.85rem;outline:none;transition:border-color .3s;}
.comment-form input:focus{border-color:var(--saffron);}
.comment-form button{background:linear-gradient(135deg,var(--teal),var(--indigo));border:none;border-radius:11px;
  padding:.75rem 1.3rem;color:#fff;cursor:pointer;font-family:'Josefin Sans',sans-serif;
  font-size:.75rem;letter-spacing:2px;text-transform:uppercase;transition:all .3s;}
.comment-form button:hover{transform:scale(1.04);}

.notice{background:rgba(255,215,0,.06);border:1px solid rgba(255,215,0,.2);border-radius:9px;
  padding:.7rem 1.1rem;font-size:.75rem;color:rgba(255,215,0,.7);letter-spacing:1px;margin-bottom:1.2rem;}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .player-controls { gap:.35rem; }
  .ctrl-btn { width:30px;height:30px;font-size:.75rem; }
  .ctrl-btn.ctrl-play { width:38px;height:38px; }
  .vol-slider { width:55px; }
  .speed-select { display:none; }
  .now-title { font-size:.9rem; }
  .track-action-btn { opacity:1; }  /* always visible on touch */
}