*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:#080d18;color:#eef2f8}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}:root{--bg:#080d18;--panel:#111a2a;--panel2:#151f31;--line:#26334a;--text:#eef2f8;--muted:#94a0b5;--pink:#ff4d82;--purple:#8b5cf6;--green:#48d597}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,5vw,70px);border-bottom:1px solid var(--line);background:#0b1120;gap:16px}.brand{font-weight:800;font-size:22px}.heart{color:var(--pink)}.nav-links{display:flex;gap:22px;color:var(--muted);font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:10px;border:0;font-weight:700;cursor:pointer}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--pink),var(--purple))}.btn-dark{color:#fff;background:#182338;border:1px solid var(--line)}.hero{min-height:580px;padding:70px max(18px,7vw);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:48px;align-items:center}.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.04;margin:16px 0}.gradient{background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;color:transparent}.muted{color:var(--muted);line-height:1.7}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.video-frame{width:min(390px,100%);justify-self:center;overflow:hidden;border-radius:28px;border:1px solid var(--line);background:var(--panel)}.video-frame img{width:100%;height:480px;object-fit:cover}.section{padding:55px max(18px,7vw)}.section-title{font-size:30px}.card{background:linear-gradient(145deg,#151f31,#0f1726);border:1px solid var(--line);border-radius:16px}.host-grid,.grid-hosts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.host-card{overflow:hidden}.host-card img{width:100%;height:230px;object-fit:cover}.host-info{padding:14px}.online{font-size:11px;color:var(--green);margin:5px 0}.rate{font-size:12px;color:var(--muted)}.auth-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 30% 20%,#2a154d,transparent 35%),var(--bg)}.auth-card{width:min(460px,100%);padding:28px;background:#111a2a;border:1px solid var(--line);border-radius:20px}.auth-card h1{text-align:center}.input{width:100%;height:48px;margin:8px 0;padding:0 14px;border-radius:10px;background:#172237;border:1px solid #2c3a52;color:#fff}.notice{padding:12px;border-radius:10px;background:#14243a;color:#a9cdf4;margin:10px 0}
.dashboard{display:flex;min-height:100vh}.sidebar{width:250px;flex:0 0 250px;padding:18px 12px;background:#0c1321;border-right:1px solid var(--line)}.sidebar .brand{padding:12px}.menu{margin-top:20px}.menu-label{padding:12px 14px 6px;color:#647089;font-size:10px;font-weight:800}.menu a{display:flex;gap:11px;padding:12px 14px;border-radius:10px;color:#9da8ba;margin:4px 0;font-size:13px}.menu a.active,.menu a:hover{background:linear-gradient(90deg,#743fd2,#ed3f75);color:#fff}.main{min-width:0;flex:1;padding:26px;background:radial-gradient(circle at 90% 0,rgba(112,76,210,.16),transparent 30%),var(--bg)}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.topbar h1,.topbar h2{margin:0}.top-actions{display:flex;gap:10px;align-items:center}.search{width:220px;height:42px;border-radius:10px;background:#121d30;border:1px solid var(--line);color:#fff;padding:0 12px}.wallet-top{padding:8px 12px;background:#121d30;border:1px solid var(--line);border-radius:10px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stat{padding:18px}.stat small{color:var(--muted)}.stat h2{margin:9px 0;font-size:26px}.trend{font-size:11px;color:var(--green)}.panel{padding:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}.grid-main,.bottom-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:16px;margin-top:16px}.chart{height:260px;border-radius:12px;background:linear-gradient(180deg,rgba(139,92,246,.14),transparent)}.table-wrap{width:100%;overflow-x:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}.table th{color:#758198}.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}.user-cell{display:flex;align-items:center;gap:8px}.revenue-list{display:grid;gap:10px}.revenue-item{display:flex;justify-content:space-between;padding:13px;border-radius:10px;background:#101827}.status{padding:5px 9px;border-radius:20px;font-size:10px;background:#123126;color:var(--green)}.status.offline{background:#351827;color:#ff789b}
@media(max-width:1050px){.host-grid,.grid-hosts{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-main,.bottom-grid{grid-template-columns:1fr}.hero{grid-template-columns:1fr}}
@media(max-width:760px){.nav-links{display:none}.dashboard{display:block}.sidebar{display:none}.main{padding:16px}.topbar{align-items:flex-start;flex-wrap:wrap}.top-actions{width:100%;justify-content:space-between}.search{flex:1;min-width:0}.hero{padding:45px 18px}.video-frame{margin-top:10px}.host-grid,.grid-hosts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.stats,.host-grid,.grid-hosts{grid-template-columns:1fr}.host-card img{height:260px}.top-actions .wallet-top{display:none}.section{padding:40px 16px}.auth-card{padding:22px}.main{padding:12px}.stat h2{font-size:24px}}


/* ===== v9 Dashboard CSS Fix ===== */
.app-shell{display:flex;min-height:100vh;width:100%}
.app-shell .sidebar{position:sticky;top:0;height:100vh;overflow-y:auto}
.app-shell .sidebar .brand small{display:block;font-size:9px;color:#71809a;letter-spacing:1.1px;margin-top:5px}
.app-shell .sidebar nav{display:block;margin-top:22px}
.app-shell .sidebar nav a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:11px;margin:5px 0}
.app-shell .main{width:calc(100% - 250px)}
.two-col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr);gap:16px;margin-top:16px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hamburger,.close-side{display:none;border:1px solid var(--line);background:#182338;color:#fff;border-radius:10px;font-size:20px;width:42px;height:42px;cursor:pointer}
.mobile-backdrop{display:none}
.phone{width:min(400px,100%);justify-self:center;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 25px 70px rgba(0,0,0,.3)}
.phone img{width:100%;height:520px;object-fit:cover}
.video-area{padding:20px}
.video-frame iframe{display:block;width:100%;height:520px;border:0;border-radius:16px}
.call-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:100vh}
.call-side{padding:24px;background:#111a2a;border-left:1px solid var(--line)}
.gift-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gift{padding:12px;color:#fff;text-align:center;cursor:pointer}
.emoji{font-size:28px}

@media(max-width:760px){
  .app-shell{display:block}
  .app-shell .sidebar{display:block;position:fixed;left:0;top:0;bottom:0;width:270px;height:100dvh;z-index:100;transform:translateX(-105%);transition:transform .25s ease;box-shadow:25px 0 70px rgba(0,0,0,.35)}
  body.sidebar-open .app-shell .sidebar{transform:translateX(0)}
  .app-shell .main{width:100%}
  .hamburger{display:inline-grid;place-items:center;flex:0 0 auto}
  .close-side{display:block;position:absolute;right:12px;top:12px}
  .mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90}
  body.sidebar-open .mobile-backdrop{display:block}
  .two-col{grid-template-columns:1fr}
  .call-shell{grid-template-columns:1fr}
  .call-side{border-left:0;border-top:1px solid var(--line)}
  .phone img{height:430px}
}