:root {
  --bg: #08080b;
  --panel: #15151b;
  --panel-2: #21121d;
  --text: #ffffff;
  --muted: #b9b9c8;
  --red: #ed1c24;
  --magenta: #ff2ca7;
  --yellow: #ffd21f;
  --cyan: #32d3ff;
  --line: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 20% 0%, rgba(237,28,36,.34), transparent 34rem), radial-gradient(circle at 80% 20%, rgba(255,44,167,.22), transparent 28rem), var(--bg);
  color: var(--text);
  letter-spacing: 0;
  padding-bottom: 92px;
}
a { color: inherit; }
.fw-black { font-weight: 900; }
.page-shell { min-height: 70vh; padding-top: 76px; }
.glass-nav { background: rgba(8,8,11,.82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.navbar-brand, .nav-link { color: #fff; }
.brand-logo img { width: 210px; max-height: 58px; object-fit: contain; display: block; }
.nav-social .nav-link {
  width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255,255,255,.05); padding: 0;
}
.nav-social .bi-instagram { color: #ff2ca7; }
.nav-social .bi-facebook { color: #57a4ff; }
.navbar-toggler { border-color: rgba(255,255,255,.22); }
.navbar-toggler-icon { filter: invert(1); }
.nav-link:hover { color: var(--yellow); }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; margin-right: .55rem;
  border-radius: 8px; background: linear-gradient(135deg, var(--red), var(--magenta) 55%, var(--yellow));
  color: #08080b; font-weight: 900;
}
.hero, .festival-hero {
  min-height: calc(100vh - 76px);
  display: flex; align-items: center;
  background: linear-gradient(120deg, rgba(0,0,0,.45), rgba(0,0,0,.1));
}
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; }
.hero h1, .festival-hero h1 { font-size: clamp(2.5rem, 8vw, 6.8rem); line-height: .92; font-weight: 900; max-width: 920px; }
.hero p, .festival-hero p { color: var(--muted); font-size: 1.2rem; max-width: 720px; }
.eyebrow { color: var(--yellow); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .8rem; }
.hero-panel, .winner-card, .cta-panel, .form-panel, .auth-card, .admin-panel {
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border-radius: 8px; padding: 1.5rem; box-shadow: 0 24px 80px rgba(0,0,0,.24);
}
.hero-panel h2 { font-size: 2.6rem; font-weight: 900; }
.equalizer { display: flex; align-items: end; gap: .35rem; height: 130px; margin-bottom: 1.2rem; }
.equalizer span { width: 18%; border-radius: 6px 6px 0 0; background: linear-gradient(var(--yellow), var(--red), var(--magenta)); animation: pulse 1.2s ease-in-out infinite alternate; }
.equalizer span:nth-child(1){height:55%;animation-delay:.1s}.equalizer span:nth-child(2){height:85%;animation-delay:.2s}.equalizer span:nth-child(3){height:40%;animation-delay:.3s}.equalizer span:nth-child(4){height:100%;animation-delay:.4s}.equalizer span:nth-child(5){height:65%;animation-delay:.5s}
@keyframes pulse { to { transform: scaleY(.62); filter: hue-rotate(28deg); } }
.section { padding-top: 5rem; padding-bottom: 2rem; }
.section-head { margin-bottom: 1.5rem; }
.section-head h1, .section-head h2 { font-weight: 900; margin: .25rem 0 0; }
.feature-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.feature-strip div, .dash-card, .admin-cards div {
  display: grid; gap: .35rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.055);
}
.feature-strip i, .dash-card i { color: var(--cyan); font-size: 1.7rem; }
.feature-strip span, .dash-card span, .admin-head span { color: var(--muted); }
.cover-lg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin: 1rem 0; }
.ranking-list { display: grid; gap: .75rem; }
.rank-row {
  display: grid; grid-template-columns: 48px 64px 1fr auto; gap: 1rem; align-items: center;
  padding: .75rem; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.rank-row:hover { transform: translateY(-2px); border-color: rgba(255,210,31,.55); background: rgba(255,255,255,.1); }
.rank-num { color: var(--yellow); font-weight: 900; font-size: 1.3rem; text-align: center; }
.rank-row img, .table-cover { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.rank-title { display: grid; min-width: 0; }
.rank-title strong, .rank-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-title small, .rank-votes, .empty-state { color: var(--muted); }
.rank-votes { font-weight: 800; }
.band-section { margin-top: 4rem; padding: 5rem 0; background: linear-gradient(100deg, var(--red), #141414 52%, var(--magenta)); }
.band-section h2 { font-weight: 900; font-size: clamp(2rem, 5vw, 4rem); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery-grid div { min-height: 180px; border-radius: 8px; background: linear-gradient(135deg, rgba(255,210,31,.9), rgba(237,28,36,.9), rgba(50,211,255,.65)); }
.radio-player {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1040;
  width: min(920px, calc(100% - 24px)); display: grid; grid-template-columns: 54px 1fr 48px minmax(90px, 160px); gap: .9rem; align-items: center;
  padding: .75rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(15,15,18,.92); backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.player-cover { width: 54px; height: 54px; border-radius: 8px; display: grid; place-items: center; color: #09090b; font-weight: 900; background: linear-gradient(135deg, var(--yellow), var(--magenta)); }
.logo-cover { overflow: hidden; background: #fff; }
.logo-cover img { width: 100%; height: 100%; object-fit: cover; }
.player-meta { display: grid; min-width: 0; }
.player-meta strong, .player-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-meta small { color: var(--muted); }
.icon-btn { border: 0; width: 44px; height: 44px; border-radius: 8px; background: var(--yellow); color: #09090b; font-size: 1.45rem; }
.volume { accent-color: var(--yellow); }
.site-footer { border-top: 1px solid var(--line); padding: 3rem 0 7rem; color: var(--muted); }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.auth-page { padding-top: 4rem; padding-bottom: 4rem; }
.auth-card { max-width: 940px; margin: 0 auto; }
.auth-card.compact { max-width: 460px; }
.form-control, .form-select, textarea.form-control {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; border-radius: 8px;
}
.form-control:focus, .form-select:focus { background: rgba(255,255,255,.12); color: #fff; border-color: var(--yellow); box-shadow: 0 0 0 .2rem rgba(255,210,31,.16); }
.form-select option { color: #111; }
.song-page { display: grid; grid-template-columns: minmax(240px, 420px) 1fr minmax(220px, 320px); gap: 1.5rem; padding-top: 5rem; padding-bottom: 4rem; }
.song-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.song-detail h1 { font-size: clamp(2.2rem, 5vw, 5rem); font-weight: 900; }
.vote-box, .artist-box { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.06); padding: 1rem; display: grid; gap: .7rem; }
.artist-photo, .preview-img { width: 100%; border-radius: 8px; object-fit: cover; }
.artist-photo { aspect-ratio: 1; }
.socials { display: flex; gap: .6rem; flex-wrap: wrap; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.dashboard-grid, .admin-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.dash-card { text-decoration: none; min-height: 150px; }
.upload-box {
  display: grid; gap: .8rem; place-items: center; min-height: 150px; padding: 1rem; border: 1px dashed rgba(255,255,255,.32); border-radius: 8px; background: rgba(255,255,255,.05); cursor: pointer; text-align: center;
}
.upload-box span { color: var(--muted); }
.upload-box progress { width: 100%; accent-color: var(--yellow); }
.status-pill { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .6rem; border-radius: 8px; background: rgba(255,210,31,.14); color: var(--yellow); font-size: .82rem; font-weight: 800; }
.admin-body { padding-bottom: 0; background: #0b0b10; }
.admin-layout { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; padding: 1.5rem; background: #121218; border-right: 1px solid var(--line); }
.admin-sidebar .nav-link { display: flex; gap: .6rem; align-items: center; border-radius: 8px; }
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,.08); }
.admin-main { padding: 2rem; }
.admin-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.5rem; }
.admin-head h1 { font-weight: 900; margin: 0; }
.admin-cards { grid-template-columns: repeat(4,1fr); margin-bottom: 1.5rem; }
.admin-cards strong { font-size: 2rem; color: var(--yellow); }
.admin-inline-form { display: grid; grid-template-columns: 110px 130px 1fr auto; gap: .4rem; min-width: 430px; }
.manifest-example { color: var(--yellow); background: rgba(0,0,0,.28); border-radius: 8px; padding: 1rem; }

.radio-hero {
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(237, 28, 36, .28), transparent 34rem),
    radial-gradient(circle at 88% 76%, rgba(255, 44, 167, .24), transparent 34rem),
    linear-gradient(120deg, #09080a 0%, #050509 54%, #160713 100%);
}
.radio-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,210,31,.08), transparent 18%, transparent 82%, rgba(237,28,36,.1));
  pointer-events: none;
}
.radio-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .62fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 8rem;
}
.hero-logo { width: min(360px, 78vw); margin-bottom: 2rem; filter: drop-shadow(0 12px 30px rgba(0,0,0,.36)); }
.radio-hero h1 {
  font-size: clamp(3.2rem, 8vw, 7.8rem);
  line-height: .9;
  font-weight: 900;
  max-width: 980px;
}
.radio-hero p { color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); max-width: 760px; }
.onair-card {
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,44,167,.08));
  border-radius: 8px;
  padding: 1.35rem;
  box-shadow: 0 28px 90px rgba(0,0,0,.34);
  display: grid;
  gap: .8rem;
  position: relative;
}
.onair-card img { width: 100%; aspect-ratio: 1.35; object-fit: contain; background: rgba(255,255,255,.04); border-radius: 8px; padding: 1rem; }
.onair-card h2 { font-weight: 900; font-size: clamp(2rem, 4vw, 3.5rem); margin: 0; }
.onair-card p { margin: 0; color: var(--muted); }
.onair-card small, .rome-clock { color: #fff; font-weight: 800; }
.live-dot {
  position: absolute; top: 1rem; right: 1rem; width: 14px; height: 14px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 8px rgba(237,28,36,.12), 0 0 30px rgba(237,28,36,.8);
}
.radio-strip {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  padding: 1.5rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.06);
}
.radio-strip h2 { font-weight: 900; margin: 0; }
.radio-strip-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.radio-strip-actions a {
  text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.06);
}
.program-section {
  background: #f8f7f3;
  color: #141418;
  padding: 4.5rem 0;
  border-top: 4px solid var(--yellow);
  border-bottom: 4px solid var(--yellow);
}
.program-section .eyebrow { color: #f05a28; }
.section-head.centered {
  display: flex; align-items: center; justify-content: center; gap: 2rem; text-align: center; margin-bottom: 2rem;
}
.section-head.centered h2 {
  font-family: Oswald, Inter, sans-serif;
  color: #f05a28;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: .12em;
  font-size: clamp(2.1rem, 4.8vw, 3.9rem);
}
.section-head.centered p { color: #45454d; margin: .4rem 0 0; }
.program-diamond {
  width: 54px; height: 54px; display: inline-block;
  background: conic-gradient(from 45deg, #f05a28 0 25%, transparent 0 50%, #f05a28 0 75%, transparent 0);
}
.today-lineup {
  display: flex; gap: .75rem; overflow-x: auto; padding: .35rem .1rem 1.5rem; margin-bottom: 1rem;
}
.time-chip {
  flex: 0 0 auto; display: grid; gap: .15rem; min-width: 170px; padding: .75rem .9rem;
  border: 1px solid rgba(20,20,24,.12); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.time-chip strong { color: #f05a28; font-size: 1.2rem; }
.time-chip span { font-weight: 800; line-height: 1.1; }
.time-chip.active { background: #111116; color: #fff; border-color: #111116; }
.program-grid { display: grid; gap: 2rem; max-width: 1120px; margin: 0 auto; }
.program-card {
  display: grid; grid-template-columns: 280px 1fr; gap: 1.4rem; align-items: center;
  padding: 1.4rem 1.6rem;
  background: #fff;
  border: 3px solid var(--program-color);
  border-radius: 28px 28px 8px 28px;
  box-shadow: 0 18px 34px rgba(0,0,0,.14);
}
.program-card:nth-child(even) { transform: translateX(2.5rem); }
.program-image {
  margin-left: -5rem;
  filter: drop-shadow(0 18px 16px rgba(0,0,0,.22));
}
.program-image img {
  width: 100%; aspect-ratio: 1.08; object-fit: cover; border-radius: 4px; background: linear-gradient(135deg, #ffd21f, #ff2ca7);
}
.program-card h3 {
  font-family: Oswald, Inter, sans-serif; color: var(--program-color); font-size: clamp(2.2rem, 5vw, 4rem);
  text-transform: uppercase; margin: 0;
}
.program-card strong { display: block; font-size: 1.15rem; margin-bottom: .45rem; }
.program-card p { color: #16161b; font-size: 1.05rem; margin-bottom: .8rem; }
.program-card span { font-weight: 900; font-size: 1.15rem; }
.schedule-admin-list { display: grid; gap: 1rem; }
.schedule-edit-row {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1rem;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.045);
}
.schedule-thumb { width: 148px; flex: 0 0 148px; display: grid; gap: .5rem; }
.schedule-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: rgba(255,255,255,.08); }
.compact-upload { min-height: 74px; padding: .65rem; }
.compact-upload span { font-size: .88rem; }
.studio-section {
  padding: 5rem 0;
  background:
    linear-gradient(100deg, rgba(0,0,0,.88), rgba(0,0,0,.56)),
    radial-gradient(circle at 15% 20%, rgba(255,210,31,.28), transparent 25rem),
    linear-gradient(100deg, #ed1c24, #ff2ca7);
}
.studio-section h2 { max-width: 1050px; font-weight: 900; font-size: clamp(2.2rem, 5vw, 5rem); line-height: .95; }
.studio-section p { color: rgba(255,255,255,.75); max-width: 760px; font-size: 1.15rem; }
.radio-gallery div:nth-child(1) { background: linear-gradient(135deg, #ffd21f, #ed1c24); }
.radio-gallery div:nth-child(2) { background: linear-gradient(135deg, #5aa09a, #fff, #f05a28); }
.radio-gallery div:nth-child(3) { background: linear-gradient(135deg, #ff2ca7, #101016); }
.radio-gallery div:nth-child(4) { background: linear-gradient(135deg, #f05a28, #ffd21f, #ff2ca7); }
.radio-cta { background: linear-gradient(135deg, rgba(237,28,36,.22), rgba(255,210,31,.12)); }
@media (max-width: 991px) {
  .hero-grid, .song-page, .admin-layout, .radio-hero-grid, .program-card { grid-template-columns: 1fr; }
  .schedule-edit-row { flex-direction: column; }
  .schedule-thumb { width: 100%; max-width: 220px; }
  .hero, .festival-hero { min-height: auto; padding: 5rem 0 3rem; }
  .radio-hero { min-height: auto; }
  .radio-hero-grid { padding-bottom: 4rem; }
  .program-card, .program-card:nth-child(even) { transform: none; }
  .program-image { margin-left: 0; }
  .radio-strip { align-items: flex-start; flex-direction: column; }
  .feature-strip, .dashboard-grid, .admin-cards { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-main { padding: 1rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-logo img { width: 178px; }
}
@media (max-width: 640px) {
  body { padding-bottom: 118px; }
  .radio-player { grid-template-columns: 46px 1fr 42px; bottom: 10px; }
  .radio-player .volume { grid-column: 1 / -1; width: 100%; }
  .rank-row { grid-template-columns: 36px 54px 1fr; }
  .rank-votes { grid-column: 3; }
  .admin-inline-form { grid-template-columns: 1fr; min-width: 240px; }
}