
.hb-block{margin:18px 0 24px}
.hb-block__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.hb-block__head h2{margin:0;font-size:1.4rem;font-weight:900}
.hb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.hb-card{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden;text-decoration:none;transition:transform .2s ease, box-shadow .2s ease}
.hb-card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.25)}
.hb-card__thumb{position:relative;aspect-ratio:16/9;background:#0b1020}
.hb-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hb-live-badge{position:absolute;top:10px;left:10px;background:#e8002a;color:#fff;border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:900}
.hb-live-badge--inline{position:static;display:inline-flex;align-items:center}
.hb-access-badge{position:absolute;top:10px;right:10px;color:#fff;border-radius:999px;padding:5px 9px;font-size:.68rem;font-weight:900;background:rgba(0,0,0,.65)}
.hb-access-badge--members{background:#123b8a}
.hb-access-badge--login{background:#10162b}
.hb-access-badge--public{background:#136f2d}
.hb-card__body{padding:12px}
.hb-card__title{font-weight:900;line-height:1.2;margin-bottom:4px}
.hb-card__meta{opacity:.75;font-size:.9rem}

.hb-slider{position:relative}
.hb-slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,28%);gap:16px;overflow:auto;scroll-behavior:smooth;padding-bottom:4px}
.hb-slider__nav{position:absolute;top:42%;transform:translateY(-50%);z-index:3;border:0;border-radius:999px;width:42px;height:42px;background:rgba(0,0,0,.65);color:#fff;font-size:28px;cursor:pointer}
.hb-slider__nav--prev{left:-4px}.hb-slider__nav--next{right:-4px}

.hb-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.hb-toolbar input,.hb-toolbar select{min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;padding:0 12px}
.hb-toolbar button,.hb-btn,.hb-favorite-btn{min-height:44px;border-radius:12px;border:0;background:#123b8a;color:#fff;padding:0 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.hb-btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.16)}
.hb-favorite-btn.is-active{background:#e8002a}

.hb-player-shell{display:grid;gap:12px}
.hb-player__topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hb-player__status{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hb-player__label{font-size:.94rem;opacity:.82}
.hb-player{background:#000;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);margin:0;position:relative}
.hb-player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.hb-player-notes{display:flex;flex-wrap:wrap;gap:8px}
.hb-player-notes span{display:inline-flex;align-items:center;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.82rem}
.plyr{border-radius:18px;overflow:hidden}
.plyr--full-ui input[type=range]{color:#123b8a}

.hb-player-gate{border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04)}
.hb-player-gate__media{position:relative;aspect-ratio:16/9;background:#08101e}
.hb-player-gate__media img{width:100%;height:100%;object-fit:cover;display:block}
.hb-player-gate__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.65))}
.hb-player-gate__content{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2}
.hb-player-gate__content h3{margin:8px 0;font-size:1.5rem}
.hb-player-gate__content p{margin:0;max-width:760px;opacity:.92}
.hb-gate-pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);font-size:.78rem;font-weight:900}
.hb-gate-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.hb-auth-box,.hb-empty,.hb-pricing{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:20px}
.hb-pricing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hb-plan{padding:18px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.hb-plan--pro{outline:2px solid rgba(18,59,138,.9)}
.hb-membership-note{font-size:.95rem;line-height:1.5}
.hb-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}
.hb-account-card{padding:16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.hb-account-list{margin:12px 0 0;padding-left:18px}
.hb-account-list li+li{margin-top:6px}
.hb-ad-slot{margin:14px 0;padding:12px 14px;border:1px dashed rgba(255,255,255,.18);border-radius:14px;opacity:.8}
.hb-empty{margin:16px 0}

@media (max-width:820px){
  .hb-slider__track{grid-auto-columns:minmax(220px,70%)}
  .hb-pricing,.hb-account-grid{grid-template-columns:1fr}
  .hb-player__topbar{align-items:flex-start}
  .hb-player-gate__content{padding:16px}
  .hb-player-gate__content h3{font-size:1.2rem}
}

.hb-auth-box--dashboard{display:grid;gap:18px}
.hb-account-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hb-stat-card{padding:16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);display:grid;gap:6px}
.hb-stat-card__label{font-size:.82rem;opacity:.72;text-transform:uppercase;letter-spacing:.08em}
.hb-account-list a{text-decoration:none}
.hb-account-list a:hover{text-decoration:underline}
.hb-ad-slot script{max-width:100%}
.hb-ad-slot iframe,.hb-ad-slot img{max-width:100%}
@media (max-width:820px){.hb-account-stats{grid-template-columns:1fr}}

/* ===== 3.3 Mobile responsive fix ===== */
.hb-grid,.hb-slider__track,.hb-pricing,.hb-account-grid,.hb-account-stats{min-width:0}
.hb-card,.hb-plan,.hb-account-card,.hb-stat-card,.hb-auth-box,.hb-empty{min-width:0}
.hb-card__title,.hb-card__meta,.hb-plan h3,.hb-account-card h3,.hb-auth-box h2{overflow-wrap:anywhere}
.hb-card__body{display:grid;gap:4px}

.hb-slider__track{scroll-padding-left:6px;-webkit-overflow-scrolling:touch}
@media (max-width:1024px){
  .hb-slider__track{grid-auto-columns:minmax(220px,42%)}
}
@media (max-width:820px){
  .hb-slider__nav{display:none}
  .hb-slider__track{grid-auto-columns:minmax(220px,68%);gap:12px}
  .hb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:560px){
  .hb-grid{grid-template-columns:1fr 1fr}
  .hb-card{border-radius:16px}
  .hb-card__body{padding:10px}
  .hb-card__title{font-size:14px;line-height:1.25}
  .hb-card__meta{font-size:.82rem}
  .hb-slider__track{grid-auto-columns:minmax(220px,82%)}
  .hb-block__head{align-items:flex-start;gap:10px}
  .hb-block__head h2{font-size:1.1rem;line-height:1.15}
}
@media (max-width:400px){
  .hb-grid{grid-template-columns:1fr}
}

.hb-toolbar{align-items:stretch}
.hb-toolbar input,.hb-toolbar select,.hb-toolbar button{width:100%}
@media (min-width:700px){
  .hb-toolbar input{flex:1 1 260px}
  .hb-toolbar select{flex:0 1 180px}
  .hb-toolbar button{width:auto}
}

.hb-player__topbar > *{min-width:0}
.hb-player__status{min-width:0}
.hb-player__label{overflow-wrap:anywhere}
.hb-player video{height:auto}
@media (max-width:640px){
  .hb-player{border-radius:14px}
  .plyr{border-radius:14px}
  .hb-player__topbar{display:grid;grid-template-columns:1fr;gap:10px}
  .hb-player__status{display:grid;grid-template-columns:1fr;gap:8px}
  .hb-player-notes{display:grid;grid-template-columns:1fr;gap:8px}
  .hb-player-notes span{width:100%;justify-content:flex-start}
}

.hb-gate-actions{display:flex;gap:10px;flex-wrap:wrap}
.hb-gate-actions .hb-btn,.hb-gate-actions .hb-btn--ghost{min-width:0}
@media (max-width:560px){
  .hb-auth-box,.hb-empty,.hb-pricing{padding:16px;border-radius:16px}
  .hb-plan,.hb-account-card,.hb-stat-card{padding:14px;border-radius:14px}
  .hb-gate-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hb-gate-actions .hb-btn,.hb-gate-actions .hb-btn--ghost{width:100%}
}

.hb-account-list{padding-left:18px}
.hb-account-list li{overflow-wrap:anywhere}
.hb-ad-slot{overflow:hidden}
.hb-ad-slot iframe,.hb-ad-slot img,.hb-ad-slot ins{max-width:100% !important}

.hb-live-count{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:.82rem;font-weight:800;line-height:1}
@media (max-width:640px){
  .hb-live-count{justify-content:flex-start;width:max-content;max-width:100%}
}


/* ===== 3.5 analytics admin UI ===== */
.hb-admin-wrap{max-width:1280px}
.hb-admin-intro{margin:6px 0 18px;color:#4b5563}
.hb-admin-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.hb-admin-kpi,.hb-admin-card,.hb-admin-mini-stat{background:#fff;border:1px solid #dcdcde;border-radius:16px;box-shadow:0 2px 8px rgba(16,24,40,.04)}
.hb-admin-kpi{padding:18px}
.hb-admin-kpi__label,.hb-admin-mini-stat__label{display:block;font-size:12px;line-height:1.2;color:#667085;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.hb-admin-kpi strong{font-size:28px;line-height:1.1}
.hb-admin-kpi__small{font-size:16px !important}
.hb-admin-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px}
.hb-admin-card{padding:18px}
.hb-admin-card--wide{grid-column:1/-1}
.hb-admin-card__head{margin-bottom:14px}
.hb-admin-card__head h2{margin:0 0 4px;font-size:20px}
.hb-admin-card__head p{margin:0;color:#667085}
.hb-admin-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;align-items:end;min-height:220px;padding-top:12px}
.hb-admin-bar{text-align:center}
.hb-admin-bar__track{height:150px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,#f8fafc,#eef2f7);border-radius:14px;padding:8px}
.hb-admin-bar__track span{display:block;width:100%;max-width:48px;background:linear-gradient(180deg,#2563eb,#123b8a);border-radius:10px;min-height:8px}
.hb-admin-bar strong{display:block;margin-top:8px;font-size:14px}
.hb-admin-bar small{display:block;margin-top:3px;color:#667085}
.hb-admin-list{margin:0;padding-left:18px}
.hb-admin-list li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #eef2f7}
.hb-admin-list li:last-child{border-bottom:0}
.hb-admin-list__main{font-weight:700}
.hb-admin-list__meta{color:#667085;text-align:right}
.hb-admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hb-admin-form-grid label span{display:block;font-weight:700;margin-bottom:6px}
.hb-admin-form-grid textarea{width:100%;min-height:140px}
.hb-admin-mini-stats{display:grid;gap:10px}
.hb-admin-mini-stat{padding:12px 14px}
.hb-admin-mini-stat strong{font-size:18px}
@media (max-width:1100px){
  .hb-admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-admin-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:782px){
  .hb-admin-kpis,.hb-admin-grid,.hb-admin-form-grid{grid-template-columns:1fr}
  .hb-admin-bars{grid-template-columns:repeat(7,minmax(42px,1fr));overflow-x:auto;padding-bottom:6px}
  .hb-admin-list li{display:grid}
  .hb-admin-list__meta{text-align:left}
}

.hb-social-login{display:grid;gap:12px;margin:12px 0 16px}
.hb-social-login__label{font-weight:800;opacity:.9}
.hb-auth-note{margin:10px 0 0;color:rgba(255,255,255,.72);font-size:14px}
.hb-social-login > *:last-child{display:block;width:100%}


/* v4.2 login form fix */
.hb-auth-form-wrap{margin:16px 0 10px}
.hb-auth-form-wrap form{display:grid;gap:12px}
.hb-auth-form-wrap label{display:block;font-weight:600;margin:0 0 6px}
.hb-auth-form-wrap input[type="text"],
.hb-auth-form-wrap input[type="password"],
.hb-auth-form-wrap input[type="email"]{width:100%;min-height:46px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff}
.hb-auth-form-wrap .login-remember{display:flex;align-items:center;gap:8px;font-size:14px}
.hb-auth-form-wrap .login-submit{margin:0}
.hb-auth-form-wrap .button,
.hb-auth-form-wrap input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;border:0;border-radius:14px;background:#fff;color:#111;font-weight:700;cursor:pointer;width:100%}
.hb-auth-form-wrap input[type="submit"]:hover{opacity:.95}
