/* MMPronHub — PREMIUM mobile app style */
:root {
  --bg: #07070d;
  --panel: rgba(20,22,34,.75);
  --card: #141626;
  --gold: #f0b90b;
  --gold2: #ffd75e;
  --amber: #ff9f43;
  --red: #ff3b5c;
  --txt: #f2f4fa;
  --dim: #8b91a7;
  --line: rgba(255,255,255,.08);
  --safe-b: env(safe-area-inset-bottom);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--txt);
  min-height:100vh; padding-bottom:calc(76px + var(--safe-b));
  overflow-x:hidden;
}
/* animated aurora background */
body::before {
  content:''; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40% 30% at 80% 0%, rgba(240,185,11,.16), transparent 60%),
    radial-gradient(35% 30% at 0% 30%, rgba(255,59,92,.10), transparent 60%),
    radial-gradient(45% 35% at 50% 100%, rgba(90,80,255,.12), transparent 60%);
  animation:aurora 14s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform:translate(0,0) scale(1); }
  50% { transform:translate(-3%,2%) scale(1.05); }
  100% { transform:translate(3%,-2%) scale(1.02); }
}
body::after {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.6) 3px 4px);
}
.gold { color:var(--gold); background:linear-gradient(135deg,var(--gold2),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ── APP BAR ─────────────────────────────── */
.appbar {
  position:sticky; top:0; z-index:60;
  background:rgba(7,7,13,.75); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--line);
  padding-top:calc(8px + env(safe-area-inset-top));
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.appbar-inner { display:flex; align-items:center; justify-content:space-between; padding:10px 16px 6px; }
.logo { display:flex; align-items:center; gap:8px; font-weight:900; letter-spacing:1.5px; font-size:19px; }
.logo-ico { width:26px; height:26px; color:var(--gold); filter:drop-shadow(0 0 10px rgba(240,185,11,.5)); }
.live-pill { display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:800; color:#3ddc84; background:rgba(61,220,132,.08); border:1px solid rgba(61,220,132,.25); padding:4px 11px; border-radius:99px; letter-spacing:1.5px; }
.live-pill i { width:6px; height:6px; border-radius:50%; background:#3ddc84; animation:blink 1.3s infinite; box-shadow:0 0 8px #3ddc84; }
@keyframes blink { 50% { opacity:.15; } }

/* chips */
.chips { display:flex; gap:8px; padding:8px 14px 11px; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip {
  flex-shrink:0; border:1px solid var(--line); background:var(--panel); color:var(--dim);
  padding:8px 18px; border-radius:99px; font-size:13px; font-weight:700; cursor:pointer; transition:.22s;
  backdrop-filter:blur(8px); letter-spacing:.3px;
}
.chip:active { transform:scale(.92); }
.chip.active {
  background:linear-gradient(135deg,#f0b90b,#ff9f43); color:#171204; border-color:transparent;
  box-shadow:0 6px 22px rgba(240,185,11,.4), inset 0 1px 0 rgba(255,255,255,.4); font-weight:900;
}

/* ── HERO BANNER ─────────────────────────── */
.banner { position:relative; padding:30px 20px 24px; overflow:hidden; }
.banner::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(240,185,11,.10), transparent 65%);
  clip-path:polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
.banner-glow { position:absolute; inset:0; background:radial-gradient(420px 200px at 60% 0%, rgba(240,185,11,.22), transparent 70%); filter:blur(8px); animation:glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 50% { opacity:.6; } }
.banner-content { position:relative; }
.banner-badge {
  display:inline-flex; align-items:center; gap:7px; font-size:9.5px; letter-spacing:2.5px;
  color:var(--gold2); border:1px solid rgba(240,185,11,.4); padding:5px 13px; border-radius:99px;
  font-weight:900; background:rgba(240,185,11,.06);
}
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--red); animation:blink 1.1s infinite; box-shadow:0 0 10px var(--red); }
.banner-title { font-size:clamp(26px,8vw,38px); font-weight:900; margin-top:13px; line-height:1.18; letter-spacing:.3px; }
.banner-sub { color:var(--dim); font-size:12.5px; margin-top:9px; letter-spacing:.5px; font-weight:500; }
.banner-actions { margin-top:18px; }
.btn-gold {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#f0b90b,#ff9f43); color:#171204; border:none;
  padding:13px 28px; border-radius:99px; font-size:14px; font-weight:900; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; letter-spacing:.5px;
  box-shadow:0 10px 30px rgba(240,185,11,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold::after {
  content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); animation:shine 3.2s infinite;
}
@keyframes shine { 0%,60% { left:-80%; } 100% { left:130%; } }
.btn-gold:active { transform:scale(.96); }

/* ── CONTENT ────────────────────────────── */
#main { padding:4px 12px 24px; }
.sec-head { display:flex; align-items:center; justify-content:space-between; padding:10px 6px 13px; }
.sec-title { font-size:20px; font-weight:900; letter-spacing:.3px; display:flex; align-items:center; gap:9px; }
.sec-title::before { content:''; width:4px; height:20px; border-radius:4px; background:linear-gradient(180deg,var(--gold),var(--amber)); box-shadow:0 0 12px rgba(240,185,11,.6); }
.sec-count { font-size:10.5px; color:var(--dim); background:var(--panel); border:1px solid var(--line); padding:5px 13px; border-radius:99px; font-weight:700; backdrop-filter:blur(8px); }

.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }

/* skeleton */
.skel { aspect-ratio:3/4; border-radius:16px; background:linear-gradient(110deg,var(--card) 30%,#1d2035 50%,var(--card) 70%); background-size:200% 100%; animation:shim 1.3s infinite; }
@keyframes shim { to { background-position:-200% 0; } }

/* cards — premium */
.m-card {
  position:relative; border-radius:16px; overflow:hidden; cursor:pointer;
  background:var(--card); border:1px solid var(--line);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  aspect-ratio:3/4; animation:cardIn .5s backwards;
}
@keyframes cardIn { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
.m-card::after {
  content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  border:1px solid transparent;
  background:linear-gradient(135deg, rgba(240,185,11,.5), rgba(255,59,92,.3)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out; mask-composite:exclude;
  opacity:0; transition:.3s;
}
.m-card:hover, .m-card:active { transform:translateY(-4px) scale(1.02); box-shadow:0 14px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(240,185,11,.25); }
.m-card:hover::after, .m-card:active::after { opacity:1; }
.m-card .thumb { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.m-card:hover .thumb, .m-card:active .thumb { transform:scale(1.1); }
.m-card .m-tag {
  position:absolute; top:9px; left:9px; font-size:9px; font-weight:900; letter-spacing:1px;
  padding:3px 9px; border-radius:7px; background:rgba(8,8,14,.65); color:var(--gold2);
  backdrop-filter:blur(6px); border:1px solid rgba(240,185,11,.3);
}
.m-card .m-dur {
  position:absolute; bottom:9px; right:9px; font-size:9px; font-weight:800; color:#fff;
  background:rgba(8,8,14,.7); padding:3px 8px; border-radius:7px; backdrop-filter:blur(4px);
}
.m-card .m-play {
  position:absolute; inset:0; margin:auto; width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding-left:3px;
  background:rgba(240,185,11,.95); color:#171204;
  box-shadow:0 0 30px rgba(240,185,11,.55), inset 0 1px 0 rgba(255,255,255,.5);
  opacity:0; transform:scale(.6) rotate(-20deg); transition:.3s cubic-bezier(.2,.8,.2,1);
}
.m-card .m-play svg { width:22px; height:22px; }
.m-card:hover .m-play, .m-card:active .m-play { opacity:1; transform:scale(1) rotate(0); }
.m-title {
  position:absolute; left:0; right:0; bottom:0; padding:30px 10px 9px;
  font-size:11.5px; font-weight:600; line-height:1.35; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.9));
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* load more */
.load-more { display:flex; justify-content:center; padding:20px 0 4px; }
.lm-btn {
  background:linear-gradient(135deg, rgba(240,185,11,.14), rgba(255,159,67,.08));
  border:1px solid rgba(240,185,11,.35); color:var(--gold2);
  padding:13px 36px; border-radius:99px; font-size:13px; font-weight:800; cursor:pointer;
  transition:.25s; letter-spacing:.4px;
}
.lm-btn:active { transform:scale(.95); background:rgba(240,185,11,.2); }
.lm-btn:disabled { opacity:.35; }

/* ── PLAYER ─────────────────────────────── */
.player {
  position:fixed; inset:0; z-index:100; display:none; flex-direction:column;
  background:#000; padding-top:env(safe-area-inset-top);
}
.player.open { display:flex; animation:slideUp .3s cubic-bezier(.2,.8,.2,1); }
@keyframes slideUp { from { transform:translateY(60px); opacity:0; } to { transform:none; opacity:1; } }
.player-head { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; background:linear-gradient(180deg,#101019,#0a0a12); border-bottom:1px solid var(--line); }
.ph-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.ph-back { background:none; border:none; color:var(--gold2); cursor:pointer; padding:4px 6px; }
.ph-title { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#dfe3ef; }
.ph-x { background:rgba(255,255,255,.09); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.ph-x:active { background:var(--red); transform:rotate(90deg); }
.player-box { position:relative; flex:1; background:#000; display:flex; align-items:center; justify-content:center; }
.player-box video { width:100%; height:100%; }
.player-load { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:13px; color:var(--dim); font-size:12px; background:rgba(0,0,0,.6); }
.player-load.show { display:flex; }
.spin { width:42px; height:42px; border-radius:50%; border:3px solid rgba(240,185,11,.18); border-top-color:var(--gold); animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── BOTTOM NAV ─────────────────────────── */
.tabbar {
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(10,10,18,.88); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(240,185,11,.14);
  padding:9px 6px calc(9px + var(--safe-b));
  box-shadow:0 -12px 40px rgba(0,0,0,.4);
}
.tab {
  background:none; border:none; color:var(--dim); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:9.5px; font-weight:800; padding:5px 16px; border-radius:14px; transition:.2s; position:relative; letter-spacing:.3px;
}
.t-ico { width:22px; height:22px; opacity:.7; transition:.25s; }
.tab:active { transform:scale(.88); }
.tab.active { color:var(--gold2); }
.tab.active .t-ico { opacity:1; transform:translateY(-2px); filter:drop-shadow(0 0 8px rgba(240,185,11,.6)); }
.tab.active::before {
  content:''; position:absolute; top:-9px; width:28px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,#f0b90b,#ff9f43); box-shadow:0 0 10px rgba(240,185,11,.6);
}

/* ── CATEGORY VIEW ───────────────────────── */
.catview { padding:4px 12px 24px; }
.cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.cat-card {
  position:relative; border-radius:16px; overflow:hidden; cursor:pointer; padding:22px 16px;
  min-height:96px; display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid var(--line); transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  animation:cardIn .45s backwards;
}
.cat-card:active { transform:scale(.94); }
.cat-card .cc-name { font-size:15px; font-weight:900; letter-spacing:.4px; position:relative; z-index:1; }
.cat-card .cc-sub { font-size:10px; color:rgba(255,255,255,.65); font-weight:600; margin-top:3px; position:relative; z-index:1; }
.cat-card .cc-arrow {
  position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px); z-index:1;
}
.cat-card .cc-arrow svg { width:13px; height:13px; color:#fff; }
.cat-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(140px 80px at 80% 0%, rgba(255,255,255,.25), transparent 70%);
}

.foot { text-align:center; padding:16px; color:var(--dim); font-size:11px; opacity:.7; }

@media (min-width:700px) { .grid { grid-template-columns:repeat(3,1fr); } .banner { padding:44px 30px; } .banner-title { font-size:40px; } }
@media (min-width:1000px) { .grid { grid-template-columns:repeat(4,1fr); } #main { max-width:1000px; margin:0 auto; } }