:root{
  --primary:#00E0FF;
  --accent:#8a5cff;
  --neon:#39ff14;
  --bg:#0b0f1a;
  --card:#141b2d;
  --text:#e6f1ff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(1200px 800px at 10% 0%, #0d1630, #0b0f1a 60%) no-repeat, var(--bg);
  color:var(--text);
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; position:sticky; top:0; z-index:20;
  background: rgba(20,27,45,.7); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--primary)); box-shadow:0 0 20px rgba(0,224,255,.3)}
.title{font-weight:800; letter-spacing:.5px}

.radio-player .btn{margin-left:8px}

.social{
  display:flex; gap:14px; padding:10px 18px; font-family: 'Poppins';
}
.social a{color:#9bb2d1; text-decoration:none; font-weight:600}

.menu{
  display:flex; flex-wrap:wrap; gap:10px; padding:10px 18px 20px;
}
.menu a{
  color:#d7e8ff; text-decoration:none; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
}
.menu a:hover{background:rgba(255,255,255,.06)}

.container{padding: 0 18px 60px; max-width:1200px; margin:0 auto}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:16px; box-shadow:0 10px 40px rgba(0,0,0,.25);
  margin-bottom:18px;
}

.btn{
  background:#1b2340; border:1px solid rgba(255,255,255,.1);
  color:#d7e8ff; padding:10px 14px; border-radius:12px; cursor:pointer;
}
.btn.primary{background: linear-gradient(90deg,var(--primary),var(--accent)); color:#02121f; font-weight:700}

.hero .slider{position:relative; overflow:hidden; border-radius:18px}
.hero .slide{display:none; position:relative}
.hero .slide.active{display:block}
.hero img{width:100%; display:block; height:300px; object-fit:cover}
.hero .caption{position:absolute; bottom:12px; left:12px; background:rgba(0,0,0,.5); padding:6px 10px; border-radius:8px}
.hero .nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); border:none; color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer}
.hero .nav.prev{left:10px}
.hero .nav.next{right:10px}

.two-col{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px}
@media (max-width:980px){.two-col{grid-template-columns:1fr}}

.tv-wrap{aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden}

.locutor .onair{display:flex; gap:12px; align-items:flex-start}
.onair-img img{width:96px; height:96px; border-radius:14px; object-fit:cover; border:2px solid rgba(255,255,255,.1)}

.carousel{position:relative}
.car-track{display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; padding:6px}
.car-item{min-width:260px; height:120px; scroll-snap-align:start; display:block; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.car-item img{width:100%; height:100%; object-fit:cover}
.car-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); border:none; color:#fff; padding:6px 10px; border-radius:10px; cursor:pointer}
.car-btn.prev{left:6px}
.car-btn.next{right:6px}

.mural.two-col{grid-template-columns:1fr 1fr}
.form input,.form textarea{width:100%; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:#0f172a; color:#d7e8ff}
.form textarea{min-height:100px; resize:vertical}
.mural-list ul{list-style:none; padding:0; margin:0}
.mural-list li{padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.08)}

.ouvinte-app.two-col{grid-template-columns:1fr 1fr}
.ouvinte-wrap{display:flex; gap:12px; align-items:center}
.ouvinte-wrap img{width:96px; height:96px; border-radius:14px; object-fit:cover; border:2px solid rgba(255,255,255,.1)}
.qrcode{margin-top:12px; width:128px; height:128px; background:#fff; border-radius:12px; display:inline-block}

.footer{padding:24px; text-align:center; color:#9db3d6; opacity:.9}