:root{
  --nav:#0d1730;
  --bg:#070e1d;
  --card:#111827;
  --muted:#9ca3af;
  --green:#16a34a;
  --purple1:#a855f7;
  --pink1:#ec4899;
  --btnGrad: linear-gradient(90deg,#00e5a8,#00c2ff);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;color:#111;background:#fff}
/* Top bar (Home) */
.topbar-home{
  height:64px;
  background:var(--nav);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:sticky; top:0; z-index:10;
}
.topbar-home .title{font-weight:700; font-size:20px; letter-spacing:.2px;}
/* Home layout */
.home-wrap{max-width:820px;margin:0 auto;padding:28px 16px 40px;text-align:center;}
.avatar{
  width:120px;height:120px;border-radius:50%;
  margin:8px auto 14px;
  background:#ddd center/cover no-repeat;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  border:6px solid #fff;
}
.name-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px;}
.name-row h1{margin:0;font-size:42px;font-weight:800;letter-spacing:.2px;}
.vbadge{
  width:26px;height:26px;border-radius:50%;
  background:#1d9bf0;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:900;
}
.flag{font-size:20px;opacity:.95}
.small-note{color:#6b7280;margin:0 0 18px;font-size:14px;}
.btn-big{
  width:min(640px,95%);
  border:none;border-radius:999px;
  padding:18px 22px;
  margin:10px auto;
  display:flex;gap:10px;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;
  color:#0b1b2b;
  background:var(--btnGrad);
  box-shadow:0 14px 30px rgba(0,194,255,.20);
  cursor:pointer;
}
.btn-big .emoji{font-size:22px}
.btn-big.secondary{
  background:linear-gradient(90deg,#00e5a8,#00c2ff);
}
/* Home preview grid */
.preview-grid{
  margin:18px auto 0;
  width:min(820px,98%);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.preview-grid img{
  width:100%; height:auto; object-fit:cover;
  border-radius:4px;
  background:#eee;
}
@media(max-width:520px){
  .name-row h1{font-size:34px}
  .preview-grid img{height:180px}
}

/* Dark pages (Access/Livestream) */
body.dark{background:var(--bg);color:#fff}
.topbar{
  background:#070c18;
  padding:18px 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px;}
.verified{background:var(--green);padding:4px 10px;border-radius:999px;font-size:12px;}
.right-small{font-size:14px;color:var(--muted);}
.container{max-width:1500px;margin:auto;padding:60px;text-align:center;}
.container.left{text-align:left}
h1.dark-title{font-size:56px;margin:0 0 12px;font-weight:800;}
.subtitle{color:var(--muted);font-size:18px;margin-bottom:10px;}
.online{color:#22c55e;font-size:14px;margin-bottom:35px;}
.pills{display:flex;justify-content:center;gap:12px;margin-bottom:40px;flex-wrap:wrap;}
.pill{padding:8px 18px;border-radius:999px;background:#1f2937;font-size:14px;cursor:pointer;}
.pill.active{background:linear-gradient(90deg,var(--purple1),var(--pink1));}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;text-align:left;}
.card{
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
  transition:.2s;
  cursor:pointer;
}
.card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.6);}
.media{position:relative}
.card img,.card video{width:100%;height:350px;object-fit:cover;display:block;background:#0b1220;}
.badge-available{position:absolute;top:10px;left:10px;background:var(--green);font-size:11px;padding:4px 8px;border-radius:999px;}
.badge-free{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:11px;padding:4px 8px;border-radius:8px;}
.badge-live{position:absolute;top:10px;left:10px;background:#ef4444;font-size:11px;padding:5px 10px;border-radius:999px;font-weight:800;color:#fff;}
.card-content{padding:14px;}
.name{font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.name .dotv{width:16px;height:16px;border-radius:50%;background:#1d9bf0;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.tag{font-size:11px;background:rgba(255,255,255,.10);padding:4px 8px;border-radius:6px;}
.chat-btn{
  margin-top:8px;
  padding:10px;
  text-align:center;
  border-radius:12px;
  background:linear-gradient(90deg,var(--purple1),var(--pink1));
  font-size:14px;
  font-weight:700;
}
.info-bar{display:flex;justify-content:space-between;align-items:center;color:#cbd5e1;font-size:13px;margin-top:4px;}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}