:root{
  --urock-bg:#0b0b0e;
  --urock-surface:#121219;
  --urock-surface-2:#161824;
  --urock-accent:#ff3b30;
  --urock-accent-2:#ff8a00;
  --urock-text:#f5f5f7;
  --urock-muted:#a1a1aa;
  --urock-green:#16a34a;
  --urock-red:#ef4444;
  --radius:16px;
}
*{box-sizing:border-box}
body{background:var(--urock-bg); color:var(--urock-text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,'Noto Sans',sans-serif; line-height:1.6;}
a{color:var(--urock-accent-2); text-decoration:none}
a:hover{text-decoration:underline}
.header{display:flex; align-items:center; gap:16px; padding:12px 16px; background:var(--urock-surface); position:sticky; top:0; z-index:20; border-bottom:1px solid #222}
.header .brand{display:flex; align-items:center; gap:12px; font-weight:700}
.header nav ul{list-style:none; display:flex; gap:16px; margin:0; padding:0}
.container{max-width:1180px; margin:0 auto; padding:0 16px}
.hero{padding:32px 0; display:grid; gap:16px; grid-template-columns:1.2fr 0.8fr}
.card{background:var(--urock-surface-2); border:1px solid #23252e; border-radius:var(--radius); padding:16px; box-shadow:0 6px 30px rgba(0,0,0,.35)}
.ua-player{display:grid; grid-template-columns:1fr; gap:10px}
.ua-player__controls{display:flex; gap:10px; align-items:center}
.ua-btn{background:#1c2030; border:1px solid #2b2f43; color:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; text-decoration:none}
.ua-btn:hover{background:#232742}
.ua-vol{width:160px}
.ua-player__meta{display:flex; align-items:center; justify-content:space-between}
.ua-np--on{color:var(--urock-green)}
.ua-np--off{color:var(--urock-red)}
.ua-np--loading{color:var(--urock-muted)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.button{display:inline-block; padding:10px 14px; border-radius:10px; background:linear-gradient(135deg,var(--urock-accent),var(--urock-accent-2)); color:white; font-weight:600}
.footer{margin-top:40px; padding:24px 0; border-top:1px solid #222; color:var(--urock-muted)}
.post-list .post{padding:14px 0; border-bottom:1px solid #222}
.post-list .post:last-child{border-bottom:none}

.ua-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ua-grid--tight .ua-card__text{display:none}
.ua-card{display:flex; flex-direction:column; background:#10131c; border:1px solid #22263a; border-radius:var(--radius); overflow:hidden}
.ua-card__img{background-size:cover; background-position:center; padding-top:56%}
.ua-card__body{padding:12px}
.ua-card__title{font-weight:700; margin-bottom:6px}

.section-title{display:flex; align-items:center; justify-content:space-between; margin:0 0 10px 0}
.section-title h2{margin:0}

.slider{position:relative; overflow:hidden; border-radius:var(--radius)}
.slider__track{display:grid; grid-auto-flow:column; gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
.slider__item{scroll-snap-align:start; min-width:80%; background:#0f1118; border:1px solid #22263a; border-radius:var(--radius); overflow:hidden}
.slider__item img{width:100%; height:auto; display:block}

@media (max-width:900px){ .hero{grid-template-columns:1fr;} }