/* core/app.css */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
}
body {
  font-family:
    Roboto,
    "Noto Sans",
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--lt_text);
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
img {
  max-width: 100%;
}
[hidden],
.gone {
  display: none !important;
}
#stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
}
.screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
}
.bg-login-gradient {
  background:
    radial-gradient(
      360px 360px at 12% 90%,
      var(--lt_accent_bg),
      rgba(255, 255, 255, 0) 70%),
    linear-gradient(
      135deg,
      var(--lt_card) 0%,
      var(--lt_page) 50%,
      var(--lt_card_alt) 100%);
}
.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo {
  width: 48px;
  height: 48px;
  color: var(--accent_on_light);
  display: inline-flex;
}
.brand-name {
  margin-left: 12px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent_on_light);
}
.accent-rule {
  width: 40px;
  height: 2px;
  margin: 12px auto 18px;
}
.rule-secondary {
  background: var(--blue_accent);
}
.rule-primary {
  background: var(--brand_primary);
}
.ss-content {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ss-tagline {
  font-size: 12px;
  color: var(--lt_text_secondary);
  margin-top: 4px;
}
.ss-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--lt_text);
}
.ss-sub {
  font-size: 12px;
  color: var(--lt_text_muted);
  margin-top: 4px;
  margin-bottom: 22px;
}
.ss-cards {
  display: flex;
}
.ss-hint {
  font-size: 11px;
  color: var(--lt_text_muted);
  margin-top: 24px;
}
.server-card {
  position: relative;
  width: 168px;
  height: 162px;
  border-radius: 16px;
  background: var(--lt_card);
  border: 1px solid #E7E4DC;
  transition: border-color .12s ease, background-color .12s ease;
  outline: none;
}
.server-card .card-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.card-icon {
  width: 44px;
  height: 44px;
  color: var(--lt_text);
  display: inline-flex;
}
.card-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--lt_text);
  margin-top: 12px;
}
.card-desc {
  font-size: 12px;
  color: var(--lt_text_secondary);
  margin-top: 3px;
  white-space: pre-line;
}
.card-rule {
  width: 28px;
  height: 2px;
  margin-top: 10px;
}
.card-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.card-overlay > * + * {
  margin-top: 10px;
}
.card-detecting {
  font-size: 12px;
  text-align: center;
}
.tint-secondary {
  color: var(--blue_accent);
}
.tint-primary {
  color: var(--brand_primary);
}
.server-card.dimmed {
  opacity: .4;
}
.server-card.is-focused,
.server-card.is-selected {
  background: var(--lt_accent_bg);
  border: 3px solid var(--brand_primary);
}
.theme-switcher {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  padding: 4px;
  border-radius: 24px;
}
.seg-btn {
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 18px;
  color: var(--lt_text_secondary);
  border: 1px solid var(--lt_border_strong);
  background: transparent;
  cursor: none;
}
.seg-btn.is-selected {
  background: var(--brand_primary);
  color: var(--on_accent);
  border-color: transparent;
}
.seg-btn.is-focused {
  background: var(--lt_accent_bg);
  border: 2px solid var(--brand_primary);
}
.login-scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-panel {
  width: 420px;
  max-width: 90%;
  background: var(--lt_card);
  border: 1px solid #E7E4DC;
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
  padding: 32px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lt-welcome {
  font-size: 13px;
  color: var(--lt_text_secondary);
  margin-top: 4px;
  margin-bottom: 22px;
}
.lt-field {
  width: 100%;
  margin-top: 10px;
}
.lt-input {
  width: 100%;
  height: 54px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--lt_text);
  background: var(--lt_card_alt);
  border: 1px solid var(--lt_border);
  border-radius: 10px;
  outline: none;
}
.lt-input::placeholder {
  color: var(--lt_text_muted);
}
.lt-input.is-focused,
.lt-input:focus {
  border: 2px solid var(--brand_primary);
}
.lt-password {
  position: relative;
}
.lt-password .lt-input {
  padding-right: 48px;
}
.pass-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--lt_text_secondary);
  border-radius: 50%;
  cursor: none;
}
.pass-toggle.is-focused {
  background: var(--lt_accent_bg);
  outline: 2px solid var(--brand_primary);
}
.lt-error {
  width: 100%;
  color: var(--lt_danger);
  font-size: 12px;
  margin-top: 6px;
}
.lt-signin {
  width: 100%;
  height: 54px;
  margin-top: 18px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  background: var(--brand_primary);
  color: var(--on_accent);
  cursor: none;
}
.lt-signin.is-focused {
  outline: 3px solid var(--brand_primary);
  outline-offset: 2px;
  filter: brightness(1.06);
}
.lt-signin.dimmed,
.lt-input.dimmed {
  opacity: .5;
}
.lt-conn {
  display: flex;
  align-items: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--lt_text_secondary);
}
.dot-green {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2FA36B;
  display: inline-block;
}
.icon-btn {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--lt_text_secondary);
  border-radius: 50%;
  cursor: none;
}
.icon-btn.is-focused {
  background: var(--lt_accent_bg);
  outline: 2px solid var(--brand_primary);
}
.lt-back {
  position: absolute;
  top: 20px;
  left: 14px;
}
.acct-screen {
  background: var(--acct_bg);
  color: #EDEFF4;
}
.acct-glow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background:
    radial-gradient(
      620px 620px at 50% 32%,
      var(--brand_primary),
      rgba(0, 0, 0, 0) 70%);
  opacity: .22;
}
.acct-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 720px;
}
.acct-badge {
  width: 92px;
  height: 92px;
  padding: 22px;
  border-radius: 50%;
  color: var(--brand_primary);
  background: var(--lt_accent_bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acct-title {
  font-size: 38px;
  font-weight: 700;
  margin: 22px 0 0;
  color: #FFFFFF;
}
.acct-rule {
  width: 56px;
  height: 3px;
  background: var(--brand_primary);
  margin: 16px 0 18px;
}
.acct-message {
  font-size: 16px;
  line-height: 1.55;
  color: #B9BECB;
  white-space: pre-line;
  max-width: 560px;
}
.acct-support {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  color: #D6DAE4;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}
.acct-support .pill-ico {
  width: 18px;
  height: 18px;
  color: var(--brand_primary);
  display: inline-flex;
}
.acct-cta {
  margin-top: 26px;
  min-width: 220px;
  height: 54px;
  padding: 0 28px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  background: var(--brand_primary);
  color: var(--on_accent);
  cursor: none;
}
.acct-cta.is-focused {
  outline: 3px solid var(--brand_primary);
  outline-offset: 3px;
  filter: brightness(1.08);
}
.acct-cta[disabled] {
  opacity: .5;
}
.acct-pill {
  position: absolute;
  top: 28px;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  color: #D6DAE4;
  cursor: none;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}
.acct-pill .pill-ico {
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.acct-settings {
  left: 28px;
}
.acct-logout {
  right: 28px;
}
.acct-pill.is-focused {
  background: var(--lt_accent_bg);
  border-color: var(--brand_primary);
  color: #fff;
}
.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(128, 128, 128, .3);
  border-top-color: currentColor;
  color: var(--brand_primary);
  animation: spin .9s linear infinite;
}
.spinner.tint-primary {
  color: var(--brand_primary);
}
.spinner.tint-secondary {
  color: var(--blue_accent);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.toast {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%) translateY(12px);
  max-width: 60%;
  padding: 14px 22px;
  border-radius: 10px;
  background: rgba(20, 22, 28, .95);
  color: #F0F0F5;
  font-size: 15px;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 50;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dialog-scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
.dialog-panel {
  width: 460px;
  max-width: 80%;
  background: #16191f;
  color: #ECEEF2;
  border: 1px solid #262a33;
  border-radius: 16px;
  padding: 26px;
}
.dlg-title {
  font-size: 20px;
  font-weight: 700;
}
.dlg-message {
  font-size: 15px;
  line-height: 1.5;
  color: #AEB6C2;
  margin-top: 12px;
}
.dlg-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}
.dlg-btn {
  height: 46px;
  padding: 0 22px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: none;
}
.dlg-negative {
  background: #2a2e38;
  color: #ECEEF2;
}
.dlg-positive {
  background: var(--brand_primary);
  color: var(--on_accent);
}
.dlg-btn.is-focused {
  outline: 3px solid var(--brand_primary);
  outline-offset: 2px;
}
.pending-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--lt_card);
  border: 1px solid var(--lt_border);
  border-radius: 22px;
  padding: 40px;
}
.pending-box .brand-name {
  color: var(--accent_on_light);
  margin-left: 0;
}
.pending-check {
  color: var(--lt_success_text);
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
}
.pending-msg {
  font-size: 18px;
  color: var(--lt_text);
  margin-top: 16px;
}
.pending-sub {
  font-size: 13px;
  color: var(--lt_text_secondary);
  margin-top: 10px;
  line-height: 1.5;
}
.pending-box .lt-signin {
  margin-top: 24px;
  width: auto;
  padding: 0 32px;
}
.settings-screen {
  background: var(--lt_page);
}
.st-scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  padding: 28px 120px;
}
.st-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.st-title {
  flex: 1;
  font-size: 24px;
  font-weight: 500;
  color: var(--lt_text);
  margin-left: 8px;
}
.st-logout {
  height: 40px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: none;
  color: var(--lt_danger);
  background: transparent;
  border: 1px solid var(--lt_danger);
}
.st-logout.is-focused {
  background: var(--lt_danger_bg);
  outline: 2px solid var(--lt_danger);
}
.st-card {
  background: var(--lt_card);
  border: 1px solid var(--lt_border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.st-account {
}
.st-acct-head {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
}
.st-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lt_accent_bg);
  color: var(--accent_on_light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
}
.st-acct-id {
  flex: 1;
}
.st-uname {
  font-size: 17px;
  font-weight: 500;
  color: var(--lt_text);
}
.st-subtitle {
  font-size: 13px;
  color: var(--lt_text_secondary);
  margin-top: 2px;
}
.st-status-pill {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  background: var(--lt_accent_bg);
  color: var(--lt_text);
}
.st-status-pill.ok {
  background: var(--lt_success_bg);
  color: var(--lt_success_text);
}
.st-status-pill.bad {
  background: var(--lt_danger_bg);
  color: var(--lt_danger);
}
.st-divider {
  height: 1px;
  background: var(--lt_border);
}
.st-divider.inset {
  margin: 0 18px;
}
.st-detail-grid {
  display: flex;
  padding-top: 14px;
}
.st-detail-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.st-detail-col.align-center {
  align-items: center;
}
.st-detail-col.align-end {
  align-items: flex-end;
}
.st-detail-lbl {
  font-size: 12px;
  color: var(--lt_text_muted);
}
.st-detail-val {
  font-size: 14px;
  font-weight: 500;
  color: var(--lt_text);
  margin-top: 2px;
}
.st-section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent_on_light);
  margin: 6px 0;
  text-transform: uppercase;
}
.st-theme {
  display: flex;
  align-items: center;
  padding: 12px 18px;
}
.st-row-label {
  flex: 1;
  font-size: 14px;
  color: var(--lt_text);
}
.st-theme-group {
  display: flex;
}
.st-theme.is-focused {
  background: var(--lt_accent_bg);
  border-color: var(--brand_primary);
}
.st-tiles {
  display: flex;
  margin-bottom: 6px;
}
.st-tile {
  flex: 1;
  height: 116px;
  border-radius: 8px;
  background: var(--lt_card);
  border: 1px solid var(--lt_border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.st-tile.is-focused {
  border: 2px solid var(--brand_primary);
}
.st-tile.empty {
  opacity: .45;
}
.st-tile.locked {
  opacity: .4;
}
.st-tile-icon {
  width: 44px;
  height: 44px;
  color: var(--lt_text);
  display: inline-flex;
  opacity: .9;
}
.st-tile-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--lt_text);
  margin-top: 14px;
  letter-spacing: 0.04em;
}
.st-tile-state {
  font-size: 11px;
  color: var(--lt_text_secondary);
  margin-top: 3px;
}
.st-tile-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 3px;
  background: var(--tile_load_track, rgba(0,0,0,.08));
  border-radius: 3px;
  overflow: hidden;
}
.st-tile-fill {
  width: 40%;
  height: 100%;
  background: var(--brand_primary);
  border-radius: 3px;
  animation: tileslide 1.15s ease-in-out infinite;
}
@keyframes tileslide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}
.st-prefs {
  padding: 0;
}
.st-pref-row {
  display: flex;
  align-items: center;
  padding: 12px 18px;
}
.st-pref-row.is-focused {
  background: var(--lt_accent_bg);
  border-radius: 10px;
  outline: 1.5px solid var(--brand_primary);
}
.st-pref-main {
  flex: 1;
}
.st-row-sub {
  font-size: 12px;
  color: var(--lt_text_secondary);
  margin-top: 2px;
}
.st-check {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 2px solid var(--lt_border_strong);
}
.st-check.on {
  background: var(--brand_primary);
  border-color: var(--brand_primary);
  position: relative;
}
.st-check.on::after {
  content: "\2713";
  color: var(--on_accent);
  font-size: 14px;
  position: absolute;
  left: 3px;
  top: -2px;
}
.st-version {
  text-align: center;
  font-size: 11px;
  color: var(--lt_text_muted);
  margin-top: 8px;
  padding-bottom: 20px;
}
.st-credit {
  text-align: center;
  font-size: 10px;
  color: var(--lt_text_muted);
  opacity: 0.75;
  margin-top: -12px;
  padding-bottom: 24px;
}
.live-screen {
  background: #000;
}
.live-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.live-buffer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.live-buffer .spinner {
  width: 64px;
  height: 64px;
  color: #1E88FF;
  border-width: 4px;
}
.live-hud {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
}
.hud-top {
  display: flex;
  align-items: center;
}
.hud-badge {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .4);
  font-size: 18px;
  font-weight: 700;
}
.hud-quality {
  flex: 1;
  text-align: right;
  font-size: 18px;
  font-weight: 500;
}
.hud-epg {
  height: 6px;
  border-radius: 3px;
  background: var(--brand_primary);
  margin: 14px 0;
  overflow: hidden;
}
.hud-epg-fill {
  height: 100%;
  background: #FFC83D;
  border-radius: 3px;
  width: 0%;
}
.hud-now {
  font-size: 16px;
  font-weight: 500;
  color: #E8E8F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-sep {
  height: 1px;
  background: rgba(255, 255, 255, .2);
  margin: 14px 0;
}
.hud-hint {
  font-size: 11px;
  text-align: center;
  color: rgba(255, 255, 255, .6);
}
.live-wheel {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 460px;
}
.wheel-arc {
  position: absolute;
  right: 0;
  top: 0;
  width: 230px;
  height: 460px;
  background: rgba(6, 6, 16, .72);
  border-radius: 230px 0 0 230px;
}
.wheel-row {
  position: absolute;
  top: 50%;
  left: 30px;
  text-align: left;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #DDDDE8;
}
.wheel-0 {
  left: 170px;
  max-width: 150px;
  transform: translateY(calc(-50% - 156px));
  font-size: 12px;
  color: #C8C8D8;
  opacity: .45;
}
.wheel-1 {
  left: 120px;
  max-width: 185px;
  transform: translateY(calc(-50% - 78px));
  font-size: 15px;
  opacity: .62;
}
.wheel-3 {
  left: 120px;
  max-width: 185px;
  transform: translateY(calc(-50% + 78px));
  font-size: 15px;
  opacity: .62;
}
.wheel-4 {
  left: 170px;
  max-width: 150px;
  transform: translateY(calc(-50% + 156px));
  font-size: 12px;
  color: #C8C8D8;
  opacity: .45;
}
.wheel-row.cur {
  left: 20px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  color: var(--brand_primary);
  background: rgba(12, 13, 20, .93);
  border: 1.5px solid var(--brand_primary);
  border-radius: 26px;
  padding: 9px 14px;
  max-width: 290px;
  opacity: 1;
}
.live-volume {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  padding: 16px 24px;
  background: rgba(0, 0, 0, .8);
  border-radius: 12px;
  text-align: center;
}
.vol-icon {
  font-size: 36px;
}
.vol-bar {
  height: 10px;
  background: #444;
  border-radius: 5px;
  margin: 10px 0 6px;
  overflow: hidden;
}
.vol-fill {
  height: 100%;
  background: #FFC83D;
  width: 70%;
}
.vol-level {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.live-streamdown {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      640px 640px at 50% 46%,
      #16141C,
      #0C0B12 45%,
      #050507);
}
.sd-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(30, 136, 255, .25),
      rgba(30, 136, 255, .12) 50%,
      transparent 72%);
  animation: sdpulse 1.9s ease-in-out infinite alternate;
}
@keyframes sdpulse {
  from {
    transform: scale(.88);
    opacity: .45;
  }
  to {
    transform: scale(1.18);
    opacity: .9;
  }
}
.sd-card {
  position: relative;
  text-align: center;
  padding: 30px 40px;
  border-radius: 20px;
  background: rgba(16, 16, 25, .8);
  border: 1px solid rgba(30, 136, 255, .2);
}
.sd-icon {
  width: 56px;
  height: 56px;
  color: var(--brand_primary);
  display: inline-flex;
  margin-bottom: 18px;
}
.sd-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--brand_primary);
  letter-spacing: .02em;
}
.sd-msg {
  font-size: 14px;
  color: var(--text_secondary);
  max-width: 320px;
  margin: 8px auto 0;
}
.sd-phone {
  font-size: 17px;
  font-weight: 500;
  color: var(--brand_primary);
  letter-spacing: .04em;
  margin-top: 6px;
}
.sd-hint {
  font-size: 12px;
  color: var(--text_hint);
  margin-top: 16px;
}
.live-overlay {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 330px;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, .2),
      rgba(6, 6, 16, .5) 40%,
      rgba(6, 6, 16, .8));
  animation: slidein 220ms cubic-bezier(.2, .7, .3, 1);
}
@keyframes slidein {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.ov-accent {
  height: 2px;
  background: var(--brand_primary);
}
.ov-catbar {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  overflow: hidden;
}
.ov-favwrap {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ov-favdiv {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, .14);
  margin: 0 8px;
}
.ov-catscroll {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
}
.ov-catscroll::-webkit-scrollbar {
  display: none;
}
.ov-catscroll > .ov-chip {
  margin-right: 8px;
}
.ov-chip {
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 14px;
  color: #C8C8D2;
  background: rgba(255, 255, 255, .08);
  white-space: nowrap;
}
.ov-chip.fav {
  border: 1.5px solid var(--brand_primary);
  color: var(--brand_primary);
  background: rgba(255, 255, 255, .08);
}
.ov-chip.active {
  background: var(--brand_primary);
  color: var(--on_accent);
  border-color: transparent;
}
.ov-chip.focus {
  outline: 2px solid #fff;
}
.ov-sep {
  height: 1px;
  background: rgba(255, 255, 255, .15);
}
.ov-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.ov-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  border: none;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 15px;
  cursor: none;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.ov-settings.is-focused,
.ov-settings:hover {
  background: var(--brand_primary);
}
.ov-settings-ico {
  width: 20px;
  height: 20px;
  display: inline-flex;
}
.ov-settings-ico svg {
  width: 20px;
  height: 20px;
}
.ov-row {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin: 2px 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 8px;
}
.ov-row.hl {
  background: rgba(255, 255, 255, .12);
  outline: 1.5px solid var(--brand_primary);
}
.ov-num {
  width: 38px;
  text-align: center;
  color: var(--brand_primary);
  font-size: 14px;
  font-weight: 500;
}
.ov-logo {
  width: 34px;
  height: 34px;
  margin-left: 4px;
  border-radius: 8px;
  background: #20202C;
}
.ov-name {
  flex: 1;
  margin-left: 10px;
  color: #E8E8F0;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-fav {
  color: var(--brand_primary);
  font-size: 15px;
  margin-left: 6px;
}
.ov-hint {
  text-align: center;
  font-size: 11px;
  color: #8A8A95;
  padding: 8px 0;
  background: rgba(0, 0, 0, .13);
}
.live-digit {
  position: absolute;
  top: 28px;
  right: 32px;
  min-width: 90px;
  text-align: center;
  padding: 10px 20px;
  border-radius: 14px;
  background: rgba(12, 13, 20, .9);
  border: 1.5px solid var(--brand_primary);
  color: var(--brand_primary);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .12em;
}
.live-digit.err {
  background: rgba(180, 40, 40, .6);
}
.vod-screen {
  background: var(--lt_page);
  color: var(--lt_text);
}
.vl-header {
  display: flex;
  align-items: center;
  padding: 14px 20px 12px;
}
.vl-title {
  font-size: 18px;
  font-weight: 500;
  margin-left: 12px;
}
.vl-subtitle {
  flex: 1;
  font-size: 13px;
  color: var(--lt_text_muted);
  margin-left: 10px;
}
.vl-searchchip {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--lt_text);
  background: var(--lt_card);
  border: 1px solid var(--lt_border_strong);
}
.vl-searchchip.is-focused {
  background: var(--lt_accent_bg);
  border: 1.5px solid var(--brand_primary);
}
.vl-body {
  position: absolute;
  top: 60px;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: flex;
}
.vl-rail {
  width: 230px;
  background: var(--lt_card);
  border: 1px solid var(--lt_border);
  border-radius: 12px;
  padding: 8px;
  overflow-y: auto;
}
.vl-cat {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  margin: 1px 4px;
  border-radius: 8px;
}
.vl-cat-name {
  flex: 1;
  font-size: 13px;
  color: var(--lt_text_secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vl-cat-count {
  font-size: 11px;
  color: var(--lt_text_muted);
  margin-left: 8px;
}
.vl-cat.sel {
  background: var(--lt_accent_bg);
}
.vl-cat.is-focused {
  background: var(--lt_accent_bg);
  outline: 1.5px solid var(--brand_primary);
}
.vl-pane {
  flex: 1;
  margin-left: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.vl-pane-head {
  display: flex;
  align-items: baseline;
  padding-bottom: 10px;
}
.vl-pane-title {
  font-size: 15px;
  font-weight: 500;
}
.vl-pane-count {
  font-size: 12px;
  color: var(--lt_text_muted);
  margin-left: 8px;
}
.vl-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-content: start;
  padding-right: 10px;
}
.vl-progress {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--brand_primary);
}
.vl-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  color: var(--lt_text_secondary);
}
.vl-poster {
  padding: 6px;
  border-radius: 8px;
  background: var(--lt_card);
  border: 2px solid var(--lt_border);
}
.vl-poster.is-focused {
  border-color: var(--brand_primary);
}
.vl-poster-box {
  position: relative;
}
.vl-poster-art {
  width: 100%;
  height: var(--vl-art, 300px);
  border-radius: 6px;
  background: var(--lt_card_alt) center/cover no-repeat;
}
.vl-resume {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .2);
}
.vl-resume-fill {
  height: 100%;
  background: var(--brand_primary);
}
.vl-poster-title {
  font-size: 11px;
  color: var(--lt_text);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vd-header {
  display: flex;
  align-items: flex-start;
  padding: 16px;
}
.vd-cover {
  width: 90px;
  height: 130px;
  border-radius: 6px;
  background: var(--lt_card_alt) center/cover no-repeat;
}
.vd-headtext {
  flex: 1;
  margin-left: 16px;
}
.vd-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--accent_on_light);
}
.vd-plot {
  font-size: 13px;
  color: var(--lt_text_secondary);
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vd-back {
  margin-left: 10px;
}
.vd-seasons {
  display: flex;
  padding: 0 16px 8px;
  overflow-x: auto;
}
.vd-season {
  padding: 9px 18px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lt_text);
  background: var(--lt_card);
  border: 1px solid var(--lt_border_strong);
  white-space: nowrap;
}
.vd-season.sel {
  background: var(--lt_accent_bg);
  border-color: var(--brand_primary);
}
.vd-season.is-focused {
  background: var(--lt_accent_bg);
  outline: 1.5px solid var(--brand_primary);
}
.vd-body {
  position: absolute;
  top: 210px;
  left: 0;
  right: 0;
  bottom: 0;
}
.vd-episodes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  padding: 0 16px 16px;
}
.vd-ep {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--lt_card);
  border: 2px solid var(--lt_border);
}
.vd-ep.is-focused {
  border-color: var(--brand_primary);
}
.vd-ep-thumb {
  width: 120px;
  height: 68px;
  border-radius: 6px;
  background: var(--lt_card_alt) center/cover no-repeat;
}
.vd-ep-title {
  flex: 1;
  margin-left: 14px;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vd-ep-play {
  color: var(--accent_on_light);
  font-size: 16px;
  margin-left: 10px;
}
.vs-header {
  display: flex;
  align-items: center;
  padding: 14px 20px 12px;
}
.vs-input {
  flex: 1;
  height: 42px;
  margin-left: 12px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 8px;
  color: var(--lt_text);
  background: var(--lt_card);
  border: 1px solid var(--lt_border_strong);
  outline: none;
}
.vs-input.is-focused {
  border: 1.5px solid var(--brand_primary);
  background: var(--lt_accent_bg);
}
.vs-body {
  position: absolute;
  top: 68px;
  left: 20px;
  right: 20px;
  bottom: 16px;
}
.vs-body .vl-grid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.vs-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  color: var(--lt_text_secondary);
}
.vodp-screen {
  background: #000;
}
.vodp-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: #000;
}
.vodp-buffer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.vodp-buffer .spinner {
  width: 56px;
  height: 56px;
  color: #fff;
  border-width: 4px;
}
.vodp-logo {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  color: #fff;
  opacity: .9;
}
.vodc {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.vodc.gone {
  display: none;
}
.vodc-top {
  position: absolute;
  top: 20px;
  left: 88px;
  right: 80px;
  display: flex;
  align-items: center;
}
.vodc-titlewrap {
  min-width: 0;
}
.vodp-back {
  position: absolute;
  top: 18px;
  left: 24px;
  z-index: 40;
  color: #fff;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(2px);
}
.vodp-back.gone {
  display: none;
}
.vodp-back.is-focused {
  background: var(--brand_primary);
  outline: 2px solid #fff;
}
.vodc-title {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 2px 6px rgba(0, 0, 0, .85);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vodc-subtitle {
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  margin-top: 2px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .8);
}
.vodc-bottom {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 22px;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, .65),
      rgba(0, 0, 0, 0));
  padding-top: 60px;
}
.vodc-seekrow {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.vodc-pos,
.vodc-dur {
  color: var(--brand_primary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.vodc-bar {
  position: relative;
  flex: 1;
  height: 3px;
  margin: 0 12px;
  background: var(--vodc_track);
  border-radius: 3px;
}
.vodc-buffered {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--vodc_buffered);
  border-radius: 3px;
  width: 0;
}
.vodc-played {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--brand_primary);
  border-radius: 3px;
  width: 0;
}
.vodc-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand_primary);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .12s ease;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
}
.vodc-bar.is-focused {
  height: 6px;
  outline: 2px solid var(--brand_primary);
  outline-offset: 6px;
}
.vodc-bar.is-focused .vodc-handle {
  opacity: 1;
}
.vodc-ticks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.vodc-tick {
  position: absolute;
  top: 0;
  width: 3.5px;
  height: 100%;
  background: #0D0F13;
  transform: translateX(-50%);
}
.vodc-actionrow {
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.vodc-cluster {
  display: flex;
  align-items: center;
}
.vodc-qwrap {
  flex: 1;
  display: flex;
  justify-content: center;
}
.vodc-quality {
  background: var(--blue_accent);
  color: #0B0B10;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
}
.vodc-btn {
  width: 50px;
  height: 50px;
  padding: 11px;
  border: none;
  background: transparent;
  color: #fff;
  border-radius: 50%;
}
.vodc-btn.is-focused {
  background: rgba(255, 255, 255, .2);
  outline: 2.5px solid var(--blue_accent);
}
.vodc-seekosd {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  font-size: 26px;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.vodp-nextcard {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  padding: 14px;
  border-radius: 14px;
  background: rgba(18, 18, 26, .94);
  border: 1px solid var(--divider);
}
.nc-thumb {
  width: 148px;
  height: 83px;
  border-radius: 8px;
  background: #20202C center/cover no-repeat;
}
.nc-body {
  width: 250px;
  margin-left: 14px;
}
.nc-label {
  font-size: 12px;
  color: var(--text_secondary);
}
.nc-title {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nc-bar {
  height: 4px;
  background: rgba(255, 255, 255, .2);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.nc-fill {
  height: 100%;
  width: 0;
  background: var(--brand_primary);
}
.nc-actions {
  display: flex;
  margin-top: 10px;
}
.nc-btn {
  padding: 8px 16px;
  border: 1px solid var(--divider);
  background: var(--bg_card);
  color: #fff;
  font-size: 13px;
  border-radius: 8px;
}
.nc-btn.is-focused {
  background: var(--brand_primary);
  color: var(--on_accent);
  border-color: transparent;
}
.vodp-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .6);
}
.menu-card {
  position: relative;
  min-width: 300px;
  max-width: 440px;
  max-height: 70%;
  overflow-y: auto;
  background: rgba(18, 18, 26, .96);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 20px;
}
.menu-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--brand_primary);
  margin-bottom: 12px;
}
.menu-row {
  padding: 10px 12px;
  border-radius: 8px;
  color: #ECEEF2;
  font-size: 15px;
}
.menu-row.active {
  color: var(--brand_primary);
}
.menu-row.is-focused {
  background: rgba(255, 255, 255, .12);
  outline: 1.5px solid var(--brand_primary);
}
.adv-screen {
  background: var(--lt_page);
  color: var(--lt_text);
  overflow-y: auto;
}
.adv-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 20px 48px;
}
.adv-head {
  display: flex;
  align-items: center;
}
.adv-dot {
  color: var(--accent_on_light);
  font-size: 12px;
  margin-right: 9px;
}
.adv-title {
  font-size: 23px;
  font-weight: 700;
  color: var(--accent_on_light);
}
.adv-subtitle {
  font-size: 13.5px;
  color: var(--lt_text_secondary);
  line-height: 1.5;
  margin: 6px 0 24px;
}
.adv-card {
  background: var(--lt_card);
  border: 1px solid var(--lt_border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 14px;
}
.adv-card.is-focused {
  border: 1.5px solid var(--brand_primary);
}
.adv-card-label {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--lt_text);
}
.adv-card-desc {
  font-size: 12.5px;
  color: var(--lt_text_secondary);
  margin: 4px 0 12px;
}
.adv-input {
  width: 100%;
  padding: 13px 14px;
  font-size: 15px;
  color: var(--lt_text);
  background: var(--lt_card_alt);
  border: 1px solid var(--lt_border);
  border-radius: 20px;
  outline: none;
}
.adv-input.is-focused {
  border: 2px solid var(--brand_primary);
}
.adv-input::placeholder {
  color: var(--lt_text_muted);
}
.adv-btn {
  width: 100%;
  height: 50px;
  margin-top: 12px;
  border: none;
  border-radius: 12px;
  background: var(--brand_primary);
  color: var(--on_accent);
  font-size: 15px;
  font-weight: 700;
}
.adv-btn.is-focused {
  outline: 3px solid var(--brand_primary);
  outline-offset: 2px;
  filter: brightness(1.06);
}
.adv-or {
  text-align: center;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--lt_text_muted);
  margin: 20px 0 16px;
}
.adv-chips {
  display: flex;
  margin-top: 12px;
}
.adv-chip {
  font-size: 11px;
  color: var(--lt_text_secondary);
  background: #2A2A34;
  color: #C8C8D2;
  padding: 5px 10px;
  border-radius: 6px;
}
.adv-cancel {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 14px;
  background: transparent;
  border: none;
  color: var(--lt_text_secondary);
  font-size: 14px;
}
.adv-cancel.is-focused {
  outline: 2px solid var(--brand_primary);
  border-radius: 10px;
}
.adv-info {
  text-align: center;
  font-size: 11px;
  color: var(--lt_text_muted);
  margin-top: 18px;
}
.ss-cards > * + * {
  margin-left: 28px;
}
.theme-switcher > * + * {
  margin-left: 8px;
}
.lt-conn > * + * {
  margin-left: 8px;
}
.acct-support > * + * {
  margin-left: 8px;
}
.acct-pill > * + * {
  margin-left: 8px;
}
.dlg-actions > * + * {
  margin-left: 12px;
}
.st-acct-head > * + * {
  margin-left: 14px;
}
.st-theme-group > * + * {
  margin-left: 6px;
}
.st-tiles > * + * {
  margin-left: 14px;
}
.ov-catbar > * + * {
  margin-left: 8px;
}
.vd-seasons > * + * {
  margin-left: 8px;
}
.vodc-cluster > * + * {
  margin-left: 6px;
}
.nc-actions > * + * {
  margin-left: 10px;
}
.adv-chips > * + * {
  margin-left: 7px;
}
.eb-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  padding: 24px 22px 20px;
  background: rgba(11, 11, 18, .96);
  display: flex;
  flex-direction: column;
}
.eb-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--brand_primary);
  margin-bottom: 14px;
}
.eb-seasons {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 14px;
  flex: 0 0 auto;
}
.eb-seasons::-webkit-scrollbar {
  display: none;
}
.eb-season {
  padding: 8px 16px;
  margin-right: 8px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 500;
  color: #ECEEF2;
  background: rgba(255, 255, 255, .08);
  white-space: nowrap;
}
.eb-season.sel {
  background: var(--brand_primary);
  color: var(--on_accent);
}
.eb-season.is-focused {
  outline: 2px solid #fff;
}
.eb-list {
  flex: 1;
  overflow-y: auto;
}
.eb-list::-webkit-scrollbar {
  display: none;
}
.eb-ep {
  padding: 12px 12px;
  border-radius: 8px;
  color: #ECEEF2;
  font-size: 14px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-ep.playing {
  color: var(--brand_primary);
}
.eb-ep.is-focused {
  background: rgba(255, 255, 255, .12);
  outline: 1.5px solid var(--brand_primary);
}
.se-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.se-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
}
.se-lockup .brand-name {
  color: var(--lt_text);
}
.se-home .accent-rule {
  margin: 12px auto 16px;
}
.se-card {
  width: 220px;
  height: 172px;
}
.se-wrap {
  position: absolute;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
  width: 760px;
  max-width: 88%;
  text-align: left;
}
.se-head {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.se-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--lt_text);
  margin-left: 12px;
}
.se-status {
  font-size: 14px;
  color: var(--lt_text_secondary);
  padding: 10px 2px;
}
.se-plist {
  display: flex;
  flex-direction: column;
  max-height: 760px;
  overflow-y: auto;
}
.se-plist::-webkit-scrollbar {
  display: none;
}
.se-plist > * + * {
  margin-top: 10px;
}
.se-prow {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--lt_card);
  border: 1px solid var(--lt_border);
  outline: none;
}
.se-prow.is-focused {
  background: var(--lt_accent_bg);
  border: 2px solid var(--brand_primary);
}
.se-prow-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lt_card_alt);
  color: var(--accent_on_light);
}
.se-prow-meta {
  margin-left: 14px;
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
}
.se-prow-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--lt_text);
}
.se-prow-info {
  font-size: 12.5px;
  color: var(--lt_text_secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.se-prow-spin {
  flex: 0 0 auto;
  margin-left: 12px;
}
.se-prow.is-busy {
  opacity: .85;
}
.se-form .adv-card {
  margin-top: 4px;
}
.se-field {
  margin-bottom: 12px;
}
.se-field:last-child {
  margin-bottom: 0;
}
.se-field-label {
  font-size: 12.5px;
  color: var(--lt_text_secondary);
  margin-bottom: 6px;
}
.se-actions {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.se-actions > * + * {
  margin-left: 12px;
}
.se-actions .adv-btn {
  width: auto;
  min-width: 160px;
  margin-top: 0;
  height: 50px;
  padding: 0 22px;
}
.se-note {
  font-size: 12px;
  color: var(--lt_text_muted);
  margin-top: 12px;
}
.vodp-subs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11%;
  text-align: center;
  pointer-events: none;
  z-index: 6;
  padding: 0 8%;
}
.vodp-subline {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 12px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .72);
  color: #FFFFFF;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 500;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    0 0 4px #000;
}