:root{
  --bg:#0b0e13;
  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.14);
  --border: rgba(255,255,255,.12);
  --text:#e8ecf2;
  --muted:#a7b0c3;
  --gold:#f2c94c;
  --accent:#39ff14;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 800px at 10% 10%, rgba(242,201,76,.08), transparent), radial-gradient(900px 600px at 90% 20%, rgba(57,255,20,.06), transparent), var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; }
a{color:var(--gold); text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:16px}
.header{
  display:flex; align-items:center; gap:16px; padding:16px; margin:16px 0;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:20px; backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
}
.header .brand{display:flex; align-items:center; gap:12px}
.header img.logo{width:56px;height:56px;border-radius:14px; border:1px solid var(--border)}
.header .title{font-weight:700; font-size:1.2rem; letter-spacing:.3px}
.playbar{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  background:var(--glass); padding:10px 12px; border-radius:14px; border:1px solid var(--border);
}
.play-btn{
  border:none; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer;
  background:linear-gradient(135deg, var(--gold), #f5d77f); color:#1a1200;
  box-shadow: 0 8px 22px rgba(242,201,76,.35);
}
.play-btn[data-state="pause"]{ background:linear-gradient(135deg, #ff7070, #ff9a9a) }
.stream-label{font-size:.9rem; color:var(--muted)}

.socials{
  display:flex; gap:12px; padding:12px; margin:12px 0 18px;
  background:var(--glass); border:1px solid var(--border); border-radius:16px;
}
.socials a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:10px; background:var(--glass-2); border:1px solid var(--border); transition:.2s transform;
}
.socials a:hover{ transform: translateY(-2px) scale(1.05) }

nav.menu{
  display:flex; flex-wrap:wrap; gap:8px; padding:12px; margin-bottom:18px;
  background:var(--glass); border:1px solid var(--border); border-radius:16px;
}
nav.menu a{
  padding:10px 14px; border-radius:10px; background:var(--glass-2); border:1px solid var(--border);
  color:var(--text); font-weight:600; font-size:.95rem
}
nav.menu a:hover{ background:rgba(255,255,255,.18) }

.slider{
  position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--border);
  background:#0a0c10; aspect-ratio: 14/6; margin-bottom:20px;
}
.slides{ display:flex; width:100%; height:100%; transition: transform .6s ease}
.slides img{ width:100%; height:100%; object-fit:cover; flex: 0 0 100% }
.slider .arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--border);
  background:var(--glass); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.slider .arrow:hover{ background:var(--glass-2) }
.slider .prev{ left:12px } .slider .next{ right:12px }

.section{
  background:var(--glass); border:1px solid var(--border); border-radius:18px;
  padding:16px; margin: 0 0 20px;
}
.section h2{ margin:0 0 10px; font-size:1.2rem }
.section .row{ display:flex; gap:16px; flex-wrap:wrap }
.card{
  flex:1 1 360px; min-width:320px; background:var(--glass-2); border:1px solid var(--border); border-radius:16px; padding:16px
}

.footer{
  text-align:center; color:var(--muted); padding:28px 16px
}

.btn-download{
  display:inline-block; padding:12px 16px; border-radius:12px; font-weight:700;
  background:linear-gradient(135deg, var(--accent), #a1ff9f); color:#002a00; border:1px solid rgba(57,255,20,.4);
  box-shadow: 0 8px 22px rgba(57,255,20,.35);
}
.qr-box{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.qr{ width:140px; height:140px; border-radius:12px; border:1px dashed var(--border); background:#0f1218; display:flex; align-items:center; justify-content:center }
.qr img{ width:100%; height:100%; object-fit:contain }

video#tvPlayer{
  width:100%; border-radius:16px; border:1px solid var(--border); background:#000
}

@media (max-width: 640px){
  .header{ flex-direction:column; align-items:flex-start }
  .playbar{ width:100%; justify-content:space-between }
}

/* === AURORA GLASS PRO — Player Premium === */
.aurora-pro-player{
  position: sticky; top:0; z-index:120;
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:16px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
.aurora-pro-player .agp-bg{
  position:absolute; inset:0; pointer-events:none; border-radius:0;
  background:
    radial-gradient(800px 200px at 10% -40%, rgba(242,201,76,.18), transparent),
    radial-gradient(700px 200px at 90% -30%, rgba(57,255,20,.12), transparent);
  z-index:0;
}
.aurora-pro-player > *{ position:relative; z-index:1 }

.agp-cover img{
  width:58px;height:58px;border-radius:14px;object-fit:cover;
  border:1px solid var(--border); box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transform: translateZ(0);
}
.agp-cover img.agp-rot.playing{ animation: agp-rotate 14s linear infinite; }
@keyframes agp-rotate{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

.agp-info{ display:flex; flex-direction:column; gap:4px }
.agp-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.agp-title #agpName{ font-weight:800; letter-spacing:.2px }
.agp-live{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-weight:700; font-size:.78rem;
  color:#1a1200; background:linear-gradient(135deg, var(--gold), #ffe493);
  box-shadow:0 6px 16px rgba(242,201,76,.35);
}
.agp-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#ff3b3b; box-shadow:0 0 10px #ff3b3b;
  animation: agp-pulse 1.3s ease-in-out infinite;
}
@keyframes agp-pulse{
  0%,100%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.5); opacity:.6 }
}
.agp-sub{ color:var(--muted); font-size:.9rem }

.agp-controls{ display:flex; align-items:center; gap:12px }
.agp-btn{
  width:52px; height:52px; border-radius:50%; border:2px solid var(--gold);
  background:linear-gradient(145deg, rgba(242,201,76,.22), rgba(242,201,76,.06));
  color:var(--gold); cursor:pointer; display:grid; place-items:center;
  box-shadow: 0 0 0 0 rgba(242,201,76,.35); transition: box-shadow .2s, transform .2s;
}
.agp-btn:hover{ transform: scale(1.04); box-shadow: 0 0 18px rgba(242,201,76,.35) }
.agp-icon{ fill: currentColor; display:none }
.agp-btn.playing .agp-icon-pause{ display:block }
.agp-btn:not(.playing) .agp-icon-play{ display:block }

.agp-vol{ width:120px; accent-color: var(--gold) }

.agp-vu{
  grid-column: 1 / -1; height:30px; display:flex; align-items:flex-end; gap:4px; padding:0 2px;
}
.agp-vu span{
  flex:1; max-width: 10px; height:8px; border-radius:4px;
  background: linear-gradient(180deg, var(--gold), #ffd979);
  opacity:.85; transform-origin: bottom center;
  animation: agp-bar 1s ease-in-out infinite alternate;
}
.agp-vu span:nth-child(odd){ animation-duration: 1.25s }
@keyframes agp-bar{
  from{ transform: scaleY(.2) } to{ transform: scaleY(1) }
}
.aurora-pro-player.playing .agp-vu span{ animation-duration: .9s }

@media (max-width: 640px){
  .aurora-pro-player{ grid-template-columns: auto 1fr auto; gap:10px }
  .agp-vol{ width:90px }
}