:root{ --bg:#111827; --surface:#1f2937; --text:#e5e7eb; --muted:#9ca3af; --brand:#0ea5e9; }
*{box-sizing:border-box}
body{margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial; background:var(--bg); color:var(--text)}
.header{display:flex; gap:12px; align-items:center; padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), transparent)}
.header img{width:40px; height:40px; border-radius:10px}
.header h1{font-size:1.1rem; margin:0}
.container{max-width:960px; margin:0 auto; padding:24px}
.card{background:var(--surface); border-radius:20px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.player{display:grid; gap:12px; align-items:center}
.controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.play-btn{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; background:var(--brand); color:white; font-weight:700; font-size:1.1rem; box-shadow:0 6px 20px rgba(14,165,233,.35)}
.volume-wrap{display:flex; align-items:center; gap:8px}
.volume-wrap input[type=range]{width:180px}
.status{font-size:.95rem; color:var(--muted)}
.meta{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.badge{background:#0b1324; color:#93c5fd; padding:6px 10px; border-radius:999px; font-size:.8rem}
a{color:#93c5fd; text-decoration:none}
.footer{opacity:.8; font-size:.85rem; text-align:center; padding:24px}

/* Social buttons */
.social{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px}
.social a{display:inline-flex; align-items:center; gap:6px; background:#0b1324; border:1px solid #1f2a44; color:#cfe1ff; padding:8px 12px; border-radius:999px; font-size:.9rem; transition:transform .08s ease}
.social a:hover{transform:translateY(-1px)}

/* Install modal */
#installModal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:9999}
#installModal .box{background:var(--surface); border-radius:18px; max-width:420px; width:calc(100% - 32px); padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
#installModal h3{margin:.2rem 0 .4rem}
#installModal p{margin:.2rem 0 .6rem; color:var(--muted)}
#installModal .actions{display:flex; gap:10px; margin-top:12px}
#installModal button{flex:1}
#installModal .ghost{background:#374151}
.close-x{position:absolute; right:14px; top:10px; font-size:1.1rem; opacity:.7; cursor:pointer}

/* Slider (ads) */
.slider-wrap{position:relative; width:100%; margin:0 0 16px 0}
.slider-viewport{position:relative; width:100%; border-radius:20px; overflow:hidden; background:#0b1324; height:0; padding-bottom:45%}
.slider-track{display:flex; height:100%; width:100%; position:absolute; inset:0; transition:transform .4s ease}
.slide{min-width:100%; height:100%; position:relative}
.slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.slider-controls{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
.slider-btn{pointer-events:auto; background:rgba(17,24,39,.7); border:1px solid #1f2a44; color:#e5e7eb; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; margin:0 8px}
.slider-dots{position:absolute; bottom:8px; left:0; right:0; display:flex; gap:6px; justify-content:center}
.slider-dot{width:8px; height:8px; border-radius:999px; background:#334155; opacity:.7}
.slider-dot.active{background:#93c5fd; opacity:1}

/* Admin modern */
input[type=text], input[type=url], input[type=password], input[type=color], input[type=file]{width:100%; padding:10px 12px; border-radius:12px; border:1px solid #374151; background:#0b1020; color:#e5e7eb}
label{font-size:.9rem; color:#cbd5e1}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }