:root{
  --v9-surface:rgba(255,255,255,.035);
  --v9-surface-strong:rgba(255,255,255,.065);
  --v9-line:rgba(255,255,255,.085);
  --v9-focus:rgba(159,119,255,.72);
  --v9-shadow:0 18px 46px rgba(5,3,12,.16);
  --v9-ease:cubic-bezier(.2,.72,.24,1);
}
.app-page:not(.active){
  display:none;
}
.app-page.active{
  display:block;
  content-visibility:visible;
  contain-intrinsic-size:auto;
}
.activity-item,.live-stream-card,.panel{contain:layout paint style}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(143,92,255,.34);color:#fff}
:where(button,a,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--v9-focus);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(143,92,255,.12);
}
:where(button,a){-webkit-tap-highlight-color:transparent}
*{scrollbar-width:thin;scrollbar-color:rgba(145,122,205,.38) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(145,122,205,.32);border:2px solid transparent;border-radius:999px;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(145,122,205,.5);background-clip:padding-box}
.topbar,.app-sidebar,.panel,.live-stream-card{
  border-color:var(--v9-line);
}
.panel{
  box-shadow:var(--v9-shadow);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s var(--v9-ease);
}
.panel:hover{border-color:rgba(154,125,230,.19)}
.sidebar-tab{position:relative;isolation:isolate;overflow:hidden}
.sidebar-tab:before{
  content:"";position:absolute;inset:5px;border-radius:12px;z-index:-1;
  opacity:0;transform:scale(.96);background:linear-gradient(110deg,rgba(139,92,246,.12),rgba(255,92,126,.055));
  transition:opacity .2s ease,transform .2s var(--v9-ease);
}
.sidebar-tab:hover:before,.sidebar-tab.active:before{opacity:1;transform:scale(1)}
.sidebar-tab.active .sidebar-icon{filter:drop-shadow(0 5px 12px rgba(139,92,246,.28))}
.btn,.live-refresh-btn,.activity-filter,.sidebar-tab{
  transform:translateZ(0);
  transition:transform .16s var(--v9-ease),border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.btn:active,.live-refresh-btn:active,.activity-filter:active{transform:scale(.975)}
.btn.primary{position:relative;overflow:hidden}
.btn.primary:after{
  content:"";position:absolute;top:-80%;left:-45%;width:35%;height:260%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:rotate(18deg) translateX(-240%);
  transition:transform .65s var(--v9-ease);
}
.btn.primary:hover:after{transform:rotate(18deg) translateX(520%)}
.activity-item,.live-stream-card{isolation:isolate}
.activity-item:before,.live-stream-card:after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--v9-x,50%) var(--v9-y,0%),rgba(150,105,255,.11),transparent 45%);
  transition:opacity .24s ease;
}
.activity-item:hover:before,.live-stream-card:hover:after{opacity:1}
.activity-item:hover{will-change:transform}
.live-stream-card:hover{will-change:transform}
img{max-width:100%;height:auto}
.live-card-thumb img,.detail-image-wrap img{content-visibility:auto}
img[data-v9-loaded="false"]{opacity:.001}
img[data-v9-loaded="true"]{opacity:1;transition:opacity .28s ease}
:where(input,textarea,select){transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
:where(input,textarea,select):focus{border-color:rgba(149,105,255,.58);box-shadow:0 0 0 4px rgba(139,92,246,.095)}
.toast{box-shadow:0 18px 55px rgba(0,0,0,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.live-dot{will-change:transform,opacity}
.v9-network-status{
  position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;align-items:center;gap:8px;
  padding:9px 12px;border:1px solid rgba(255,255,255,.11);border-radius:999px;
  background:rgba(18,14,27,.88);box-shadow:0 14px 35px rgba(0,0,0,.24);color:#fff;
  font-size:13px;font-weight:800;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .22s ease,transform .22s var(--v9-ease);
}
.v9-network-status.is-visible{opacity:1;transform:none}
.v9-network-status i{width:7px;height:7px;border-radius:50%;background:#ff6177;box-shadow:0 0 0 4px rgba(255,97,119,.14)}
.v9-network-status.is-online i{background:#58d89f;box-shadow:0 0 0 4px rgba(88,216,159,.14)}
html:not(.v9-ready) .app-page.active > *{
  animation:none!important;
}
html.v9-ready .app-page.active > *{
  animation-play-state:running;
}
@media (max-width:760px){:root{--v9-shadow:0 10px 28px rgba(5,3,12,.12)}
html{scroll-behavior:auto}
.app-page.active{
  contain-intrinsic-size:auto;
}
.panel:hover{transform:none}
.activity-item:before,.live-stream-card:after,.btn.primary:after{display:none}
.topbar,.app-sidebar,.toast{backdrop-filter:none;-webkit-backdrop-filter:none}
.v9-network-status{right:10px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:calc(100vw - 20px)}
*::-webkit-scrollbar{width:5px;height:5px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}
*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.feed-toolbar{
  display:grid;
  gap:16px;
}
#page-feed .feed-toolbar{
  display:grid!important;
  grid-template-rows:auto auto auto!important;
  align-items:stretch!important;
  gap:14px!important;
  min-height:340px;
}
@media(max-width:900px){#page-feed .feed-toolbar{min-height:360px}}
@media(max-width:560px){#page-feed .feed-toolbar{min-height:400px}}
#page-feed .feed-toolbar{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:52px 52px 116px 74px!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  gap:14px!important;
  min-height:0!important;
}
#page-feed .feed-toolbar > *{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
  margin:0!important;
}
@media(max-width:900px){#page-feed .feed-toolbar{
    grid-template-rows:78px 52px 116px 96px!important;
  }}
#page-feed .feed-toolbar{
  --feed-head-h:64px;
  --feed-group-h:54px;
  --feed-members-h:136px;
  --feed-type-h:68px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:var(--feed-head-h) var(--feed-group-h) var(--feed-members-h) var(--feed-type-h)!important;
  gap:12px!important;
  padding:18px!important;
  min-height:0!important;
  overflow:hidden!important;
}
@media(max-width:900px){#page-feed .feed-toolbar{
    --feed-head-h:92px;
    --feed-group-h:112px;
    --feed-members-h:136px;
    --feed-type-h:82px;
  }}
@media(max-width:560px){#page-feed .feed-toolbar{
    --feed-head-h:104px;
    padding:14px!important;
  }}
html[data-theme="dark"]{
  --dark-text:#f6f7f9;
  --dark-body:#dfe4ea;
  --dark-muted:#a0a8b3;
  --dark-faint:#788291;
  --dark-panel:#111619;
  --dark-panel-2:#131b27;
  --dark-border:#263242;
}
html[data-theme="dark"] #vodDurationRanking,html[data-theme="dark"] #vodDurationRanking *{
  color:var(--dark-body)!important;
}
html[data-theme="dark"] #vodDurationRanking .rank-item{
  background:transparent!important;
  border-color:var(--dark-border)!important;
}
html[data-theme="dark"] #vodDurationRanking .rank-item b,html[data-theme="dark"] #vodDurationRanking .rank-item strong{
  color:var(--dark-text)!important;
}
html[data-theme="dark"] #vodDurationRanking .rank-item small{
  color:var(--dark-muted)!important;
  opacity:1!important;
}
html[data-theme="dark"] #vodDurationRanking .rank-item em{
  color:#a9dc93!important;
}
html[data-theme="dark"] .admin-empty{
  color:var(--dark-muted)!important;
  opacity:1!important;
}
html[data-theme="dark"] .rank-item,html[data-theme="dark"] .rank-item span,html[data-theme="dark"] .rank-item b,html[data-theme="dark"] .rank-item strong,html[data-theme="dark"] .rank-item small{
  text-shadow:none!important;
}
