/* =========================================================
   RESET HEADER
========================================================= */

.onplix-header,
.onplix-header *{
  box-sizing: border-box;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
}

/* =========================================================
   VARIABLES GLOBALES ? DARK PREMIUM
========================================================= */

:root{
  --onplix-font-family: "Roboto", system-ui, -apple-system, sans-serif;
  --onplix-text-primary: #f1f1f1;
  --onplix-text-secondary: #aaaaaa;
  --onplix-text-muted: #888888;
  --onplix-title-size: 15px;
  --onplix-body-size: 13px;
  --onplix-small-size: 12px;
}

body.onplix-free-limit-blocked #onplix-prev,
body.onplix-free-limit-blocked #onplix-next,
body.onplix-free-limit-blocked #onplix-mobile-prev,
body.onplix-free-limit-blocked #onplix-mobile-next,
.onplix-free-action-disabled{
  opacity:.45 !important;
  filter:saturate(.55) brightness(.8);
  cursor:not-allowed !important;
}

body.onplix-free-library-locked [data-onplix-library-tab="smart"],
body.onplix-free-library-locked [data-onplix-library-tab="artists"],
.onplix-free-locked{
  opacity:.48 !important;
  filter:saturate(.55) brightness(.85);
  cursor:pointer !important;
}

body.onplix-free-limit-blocked #onplix-queue .onplix-item,
.onplix-free-drag-disabled{
  cursor:default !important;
}

body.onplix-visitor-role .onplix-tab[data-tab="queue"],
body.onplix-visitor-role .onplix-tab[data-tab="recommended"],
body.onplix-visitor-role #onplix-queue,
body.onplix-visitor-role #onplix-recommended,
body.onplix-visitor-role .onplix-mobile-nav .onplix-nav-btn[data-view="library"]{
  display:none !important;
}

body.onplix-visitor-role .onplix-tab[data-tab="shared"]{
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex:1 1 100% !important;
  width:100% !important;
}

body.onplix-visitor-role #onplix-shared{
  display:block !important;
}


body.onplix-visitor-access #onplix-playlists,
body.onplix-visitor-access #onplix-smart-playlists,
body.onplix-visitor-access #onplix-artists,
body.onplix-visitor-access #onplix-recommended,
body.onplix-visitor-access #onplix-queue{
  position:relative;
  overflow:hidden;
  user-select:none;
  min-height:160px;
  border-radius:8px;
  isolation:isolate;
}

body.onplix-visitor-access #onplix-recommended,
body.onplix-visitor-access #onplix-queue{
  margin-top:12px;
  overflow:hidden !important;
}

body.onplix-visitor-access #onplix-playlists > *,
body.onplix-visitor-access #onplix-smart-playlists > *,
body.onplix-visitor-access #onplix-artists > *,
body.onplix-visitor-access #onplix-recommended > *,
body.onplix-visitor-access #onplix-queue > *{
  filter:blur(2.6px) saturate(.72) brightness(.78);
  opacity:.54;
  pointer-events:none;
}

body.onplix-visitor-access #onplix-playlists::after,
body.onplix-visitor-access #onplix-smart-playlists::after,
body.onplix-visitor-access #onplix-artists::after,
body.onplix-visitor-access #onplix-recommended::after,
body.onplix-visitor-access #onplix-queue::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  background:
    linear-gradient(135deg, rgba(192,132,252,.055), rgba(99,102,241,.025)),
    rgba(5,5,10,.08);
  border:1px solid rgba(192,132,252,.055);
  border-radius:8px;
  box-shadow:inset 0 0 44px rgba(168,85,247,.035);
  backdrop-filter:blur(1.8px);
  -webkit-backdrop-filter:blur(1.8px);
  pointer-events:auto;
  cursor:pointer;
}

body.onplix-visitor-access #onplix-shared{
  overflow-y:auto !important;
  user-select:auto;
}

body.onplix-visitor-access #onplix-shared > *{
  filter:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

body.onplix-visitor-access #onplix-shared::after{
  content:none !important;
  display:none !important;
}

body.onplix-visitor-access #onplix-add-screens,
body.onplix-visitor-access #onplix-smart-save,
body.onplix-visitor-access #onplix-randomize-queue{
  opacity:.58 !important;
  filter:blur(.2px) saturate(.7) brightness(.82);
  cursor:pointer !important;
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.055) !important;
}

body.onplix-visitor-access #onplix-add-screens svg,
body.onplix-visitor-access #onplix-randomize-queue svg{
  opacity:.55;
}

body.onplix-visitor-access .onplix-library-panels::after,
body.onplix-visitor-access #onplix-playlists::after,
body.onplix-visitor-access #onplix-smart-playlists::after,
body.onplix-visitor-access #onplix-artists::after{
  display:none !important;
  content:none !important;
}

body.onplix-visitor-access .onplix-library-panels{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.onplix-visitor-access .onplix-library-panel > *,
body.onplix-visitor-access #onplix-playlists > *,
body.onplix-visitor-access #onplix-smart-playlists > *,
body.onplix-visitor-access #onplix-artists > *{
  display:none !important;
  filter:none !important;
  opacity:1 !important;
}

body.onplix-visitor-access #onplix-playlists,
body.onplix-visitor-access #onplix-smart-playlists,
body.onplix-visitor-access #onplix-artists{
  min-height:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

@media (min-width:769px){
  .onplix-main{
    overflow:hidden;
  }

  .onplix-created-playlists{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }

  .onplix-library-shell{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
  }

  .onplix-library-panels{
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    margin-bottom:0;
    overflow:visible;
  }

  .onplix-library-panel.is-active{
    height:100%;
    min-height:0;
    overflow:visible;
  }

  #onplix-playlists,
  #onplix-smart-playlists,
  #onplix-artists{
    max-height:100%;
    align-content:start;
  }

  body.onplix-visitor-access .onplix-library-panels{
    position:relative;
    overflow:visible;
    min-height:0;
    max-height:100%;
    border-radius:0;
    isolation:isolate;
  }

  body.onplix-visitor-access .onplix-library-panels::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:40;
    background:
      linear-gradient(135deg, rgba(192,132,252,.055), rgba(99,102,241,.025)),
      rgba(5,5,10,.08);
    border:0;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:blur(1.8px);
    -webkit-backdrop-filter:blur(1.8px);
    pointer-events:auto;
    cursor:pointer;
  }

  body.onplix-visitor-access .onplix-library-panels > .onplix-library-panel > *{
    filter:blur(2.6px) saturate(.72) brightness(.78);
    opacity:.54;
    pointer-events:none;
  }

  body.onplix-visitor-access #onplix-playlists,
  body.onplix-visitor-access #onplix-smart-playlists,
  body.onplix-visitor-access #onplix-artists{
    min-height:auto;
    overflow:hidden;
    border-radius:0;
    isolation:auto;
  }

  body.onplix-visitor-access .onplix-library-panels #onplix-playlists > *,
  body.onplix-visitor-access .onplix-library-panels #onplix-smart-playlists > *,
  body.onplix-visitor-access .onplix-library-panels #onplix-artists > *{
    filter:none;
    opacity:1;
  }

  body.onplix-visitor-access #onplix-playlists::after,
  body.onplix-visitor-access #onplix-smart-playlists::after,
  body.onplix-visitor-access #onplix-artists::after{
    display:none;
    content:none;
  }
}
/* T?tulo */
.onplix-left .t{
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: var(--onplix-title-size);
  color: var(--onplix-text-primary);
  line-height: 1.25;
  letter-spacing: -0.2px;
}

/* Metadata */
.onplix-left .m{
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: var(--onplix-body-size);
  color: var(--onplix-text-secondary);
}


/* =========================================================
   HEADER
========================================================= */

.onplix-header{
  display:grid;
  grid-template-columns:240px minmax(400px,1fr) auto;
  align-items:center;
  height:90px;
  padding:0 40px;
  background:#010007;
  border-bottom:none;

  position:sticky;
  top:0;
  z-index:500;

  width:100%;
  left:0;
  right:0;
  margin:0;
  overflow:visible !important;
}

.onplix-header-left { 
    justify-content:flex-start; 
    display:flex;
  align-items:center;
}

.onplix-header-center{
  justify-content:center;
  min-width:0;
  display:flex;
  overflow:visible !important;
}

.onplix-header-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0; 
  justify-content:flex-end;
  min-width:0;
}



/* =========================================================
   TIME LEFT HEADER
========================================================= */

.onplix-time-left{
  display:flex;
  align-items:center;
  justify-content:center;

  height:42px;
  padding:0 18px;

  font-size:13px;
  font-weight:500;
  letter-spacing:.4px;

  color:#e9d5ff; /* lila mas elegante */
  text-transform:capitalize;

  background:rgba(192,132,252,.08);
  border:1px solid rgba(192,132,252,.25);
  border-radius:999px;

  backdrop-filter:blur(6px);

  white-space:nowrap;
  transition:.2s ease;
}

.onplix-time-left:hover{
  background:rgba(192,132,252,.15);
  border-color:rgba(192,132,252,.45);
}

.onplix-time-btn{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;
  background:#121212;
  border:1px solid rgba(255,255,255,.06);

  cursor:pointer;
  transition:.2s ease;
}

.onplix-time-btn:hover{
  background:#1f2633;
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

.onplix-time-btn svg{
  width:26px;
  height:26px;
  stroke:#ffffff; /* ?? mejor blanco que morado */
}

.onplix-time-btn:hover{
  background:#1f2633;
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

.onplix-time-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}

.onplix-time-slide{
  position:absolute;
  right:40px;
  height:42px;
  display:flex;
  align-items:center;
  padding:0 16px;


  font-size:13px;
  font-weight:500;
  color:#fff;

  white-space:nowrap;

  opacity:0;
  transform:translateX(10px);
  pointer-events:none;
  transition:.25s ease;
}

.onplix-time-wrapper.show-time .onplix-time-slide{
  opacity:1;
  transform:translateX(0);
}

/* =========================================================
   MODAL (PREMIUM ONPLIX)
========================================================= */

.onplix-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.onplix-modal.is-open{
  display: block;
}

/* Backdrop premium + fade */
.onplix-modal-backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 600px at 50% 45%, rgba(168,85,247,.16), transparent 55%),
    rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .18s ease;
}

.onplix-modal.is-open .onplix-modal-backdrop{
  opacity: 1;
}

/* Card premium: borde lila, vidrio, sombra */
.onplix-modal-card{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(460px, calc(100vw - 36px));

  transform: translate(-50%, -50%) scale(.98);
  opacity: 0;

  background:
    linear-gradient(180deg, rgba(18,18,18,.92), rgba(12,12,12,.92));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;

  padding: 18px 18px 16px;
  box-shadow:
    0 30px 120px rgba(0,0,0,.75),
    0 0 0 1px rgba(168,85,247,.18);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: transform .18s ease, opacity .18s ease;
}

/* Borde gradiente premium (tipo tus cards) */
.onplix-modal-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:2px;
  background: linear-gradient(135deg, rgba(168,85,247,.95), rgba(147,51,234,.85));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.55;
  pointer-events:none;
}

/* Glow suave */
.onplix-modal-card::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:22px;
  background: radial-gradient(circle at 30% 20%, rgba(168,85,247,.22), transparent 55%);
  filter: blur(18px);
  opacity:.8;
  pointer-events:none;
}

.onplix-modal.is-open .onplix-modal-card{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.onplix-modal-card,
.onplix-modal-title,
.onplix-modal-body,
.onplix-modal-input,
.onplix-modal-btn{
  font-family:"Roboto", system-ui, -apple-system, sans-serif;
}

/* Tipografia */
.onplix-modal-title{
  color: #fff;
  font-weight: 750;
  letter-spacing: .2px;
  margin-bottom: 6px;
  font-size: 15px;
}

.onplix-modal-body{
  color: rgba(209,213,219,.78);
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.35;
}

.onplix-activation-success-message p{
  margin:0 0 10px;
}

.onplix-activation-refresh-note{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(168,85,247,.35);
  border-radius:12px;
  background:rgba(124,58,237,.16);
  color:#ede9fe;
  font-weight:800;
  line-height:1.35;
}

/* Input premium */
.onplix-modal-input{
  display:block;
  width: 100%;
  box-sizing:border-box;
  height: 46px;
  margin: 8px 0 0;
  border-radius: 14px;

  background: rgba(11,11,11,.9);
  border: 1px solid rgba(255,255,255,.10);

  font-family:'Roboto', sans-serif;
  font-size:13px;
  color: #fff;
  padding: 0 14px;
  outline: none;

  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.onplix-modal-input::placeholder{
  color: rgba(255,255,255,.25);
}

.onplix-modal-input:focus{
  border-color: rgba(168,85,247,.60);
  box-shadow:
    0 0 0 4px rgba(168,85,247,.18),
    0 10px 30px rgba(168,85,247,.10);
  transform: translateY(-1px);
}

/* Acciones */
.onplix-modal-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* Bot?n base pro */
.onplix-modal-btn{
  height: 40px;
  width: auto;
  min-width: 104px;
  padding: 0 18px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(26,26,26,.75);

  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;

  cursor: pointer;

  transition: transform .15s ease, box-shadow .18s ease, opacity .15s ease, border-color .18s ease;
}

.onplix-modal-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.onplix-modal-btn:active{
  transform: translateY(0) scale(.98);
  box-shadow: none;
}

/* Primario lila premium */
.onplix-modal-btn.primary{
  border: none;
  background: linear-gradient(135deg, #a855f7, #9333ea);
  box-shadow:
    0 10px 28px rgba(168,85,247,.22),
    0 0 0 1px rgba(168,85,247,.25);
}

.onplix-modal-btn.primary:hover{
  box-shadow:
    0 14px 34px rgba(168,85,247,.32),
    0 0 0 1px rgba(168,85,247,.32);
}

@media (max-width: 768px){
  .onplix-modal-card{
    width: min(380px, calc(100vw - 28px));
    padding: 16px 16px 14px;
    border-radius: 16px;
  }

  .onplix-modal-actions{
    gap: 8px;
  }

  .onplix-modal-btn{
    height: 42px;
    min-width: 96px;
    border-radius: 12px;
    font-size: 12px;
    padding: 0 10px;
  }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .onplix-modal-backdrop,
  .onplix-modal-card,
  .onplix-modal-btn,
  .onplix-modal-input{
    transition: none !important;
  }
}

/* =========================================================
   RESOLUCI?N FIJA 1366x768 ? CENTRADO PERFECTO
========================================================= */

.onplix-scale{
  width:100vw;
  height:100vh;
  background:#010007;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow: hidden;
}

.onplix-scale .onplix-app{
  width:1366px;
  height:768px;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) scale(1);
  opacity:0;
  transition: opacity .15s ease;
}


/* =========================================================
   LOGO
========================================================= */

.onplix-top-logo {
  display: flex;
  align-items: center;
  height:100%;
  padding:8px 0;
  cursor:pointer;
  border-radius:12px;
}

.onplix-logo-img {
  height: 70px;
  max-height: calc(100% - 16px);
  width: auto;
  max-width: 210px;
  display: block;
  object-fit: contain;
}


/* =========================================================
   SEARCHBAR
========================================================= */

.onplix-searchbar{
  position:relative !important;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(560px,100%);
  height:46px;
  padding:0 20px;
  border-radius:999px;
  background:#121212;
  border:1px solid rgba(255,255,255,.06);
  transition:.2s ease;
  min-width:0;
  overflow:visible !important;
  z-index:2147483002 !important;
}

.onplix-searchbar:focus-within{
  background:#161616;
  border-color:rgba(255,255,255,.12);
}

.onplix-search-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.75); 
}

.onplix-search-icon svg{
  stroke:rgba(255,255,255,.75);
}



.onplix-searchbar input{
  flex:1;
  height:100%;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  font-family:var(--onplix-font-family);
  font-size:16px;
  font-weight:400;
  color:#ffffff !important;
  caret-color:#ffffff !important;
  padding:0;
  margin:0;
  min-width:0;
}

.onplix-searchbar input::placeholder{
  color:rgba(255,255,255,.55) !important; /* Mucho mas visible */
  font-weight:400;
}

.onplix-searchbar input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #141a24 inset !important;
  -webkit-text-fill-color:#ffffff !important;
}


/* =========================================================
   CLEAR BUTTON
========================================================= */

.onplix-q-clear{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:0 !important;
  cursor:pointer;

  opacity:1;               /* ?? siempre visible */
  pointer-events:auto;     /* ?? siempre clickeable */

  transition:opacity .15s ease, transform .15s ease;
}

.onplix-q-clear:hover{
  transform:scale(1.1);
}

.onplix-q-clear svg{
  display:block !important;
  width:16px !important;
  height:16px !important;
  color:#ffffff !important;
  fill:none !important;
  stroke:#ffffff !important;
}


/* =========================================================
   ICON BUTTONS
========================================================= */

.onplix-top-iconbtn{
  width:46px;
  height:46px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#121212;
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  transition:.2s ease;
  margin:0;
}

.onplix-top-iconbtn svg{
  width:22px;
  height:22px;
  pointer-events:none;
  stroke:#ffffff;
}


#onplix-add-screens svg{
  width:28px;
  height:28px;
  stroke-width:2.1;

}


.onplix-top-iconbtn:hover svg{
  transform:scale(1.05);
}

.onplix-top-iconbtn:hover{
  background:#1f2633;
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

.onplix-profile-top{
  position:relative;
  flex:0 0 auto;
}

.onplix-profile-dropdown{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:min(380px, calc(100vw - 28px));
  height:min(590px, calc(100vh - 110px));
  max-height:min(590px, calc(100vh - 110px));
  display:none;
  flex-direction:column;
  gap:12px;
  padding:12px;
  overflow-y:auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  color:#ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,85,247,.18), transparent 34%),
    rgba(12,12,16,.96);
  box-shadow:0 22px 65px rgba(0,0,0,.48);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:100001;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.onplix-profile-dropdown::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.onplix-profile-dropdown.is-open{
  display:flex;
}

.onplix-profile-hero-compact{
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:12px;
  box-shadow:none;
}

.onplix-profile-hero-compact .onplix-profile-avatar-badge{
  width:42px;
  height:42px;
  border-radius:13px;
  font-size:18px;
}

.onplix-profile-hero-compact .onplix-profile-title{
  font-size:15px;
}

.onplix-profile-hero-compact .onplix-profile-subtitle{
  font-size:11px;
}

.onplix-profile-dropdown .onplix-profile-auth-actions,
.onplix-profile-dropdown .onplix-profile-auth-panel,
.onplix-profile-dropdown .onplix-profile-session-card,
.onplix-profile-dropdown .onplix-code-card,
.onplix-profile-dropdown .onplix-profile-section{
  border-radius:14px;
}

.onplix-profile-dropdown .onplix-profile-section,
.onplix-profile-dropdown .onplix-code-card,
.onplix-profile-dropdown .onplix-profile-auth-panel{
  padding:12px;
}

.onplix-profile-dropdown .onplix-profile-form-grid{
  grid-template-columns:1fr;
}

.onplix-profile-dropdown .onplix-profile-form-title{
  font-size:16px;
}

.onplix-profile-dropdown .onplix-profile-dropdown-plans{
  margin:0;
}


.onplix-top-iconbtn:hover svg{
  transform:scale(1.05);
}

.onplix-top-iconbtn:hover{
  background:#1f2633;
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}


/* ========================================================= 
   AUTOCOMPLETE DROPDOWN ? ONPLIX (YOUTUBE / SPOTIFY HYBRID)
========================================================= */

/* ===============================
   CONTENEDOR PRINCIPAL
=============================== */

.onplix-ac{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#111111;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 18px 54px rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:2147483002 !important;
  display:none;
  overflow:hidden;
  pointer-events:auto !important;
  isolation:isolate;
}

.onplix-ac.is-open{
  display:block;
  animation:dropFade .16s ease;
}

@keyframes dropFade{
  from{ opacity:0; transform:translateY(-6px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ===============================
   INNER / SCROLL
=============================== */

.onplix-ac-inner{
  max-height:min(420px, calc(100vh - 150px));
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px 0;
  pointer-events:auto !important;
}

.onplix-ac-inner::-webkit-scrollbar{
  width:3px;
}

.onplix-ac-inner::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(124,58,237,.66), rgba(168,85,247,.74));
  border-radius:999px;
}

.onplix-ac-inner::-webkit-scrollbar-track{
  background:transparent;
}

/* ===============================
   ITEM
=============================== */

.onplix-ac-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:7px 14px;
  border-radius:0;
  cursor:pointer;
  position:relative;
  transition:background .12s ease;
  animation:fadeItem .25s ease;
  pointer-events:auto !important;
  z-index:1;
}

.onplix-ac-row > *{
  pointer-events:none;
}

.onplix-ac-remove{
  pointer-events:auto !important;
}

/* Hover estilo moderno */

.onplix-ac-row:hover,
.onplix-ac-row.is-active,
.onplix-ac-row.is-hovered{
  background:rgba(168,85,247,.11);
}

/* Glow suave */

.onplix-ac-row::after{
  display:none;
}

.onplix-ac-row:hover::after{
  opacity:0;
}

/* ===============================
   ICONO LUPA (IZQUIERDA)
=============================== */

.onplix-ac-icon{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f4f4f5 !important;
  opacity:.78;
  flex-shrink:0;
}

.onplix-ac-icon svg{
  width:100%;
  height:100%;
  color:#f4f4f5 !important;
  stroke:#f4f4f5 !important;
  fill:none !important;
}

.onplix-ac-icon svg *,
.onplix-ac-remove svg *{
  color:#f4f4f5 !important;
  stroke:#f4f4f5 !important;
  fill:none !important;
}

/* ===============================
   COVER (OPCIONAL)
=============================== */

.onplix-ac-cover{
  width:40px;
  height:40px;
  border-radius:6px;
  object-fit:cover;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
}

/* ===============================
   TEXTO
=============================== */

.onplix-ac-text-wrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:1;
}

.onplix-ac-title,
.onplix-ac-artist{
  text-transform:none;
}

.onplix-ac-title{
  font-size:14px;
  font-weight:500;
  color:#fff;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.onplix-ac-artist{
  font-size:12px;
  color:rgba(255,255,255,.55);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Hover texto */

.onplix-ac-row:hover .onplix-ac-title,
.onplix-ac-row.is-active .onplix-ac-title,
.onplix-ac-row.is-hovered .onplix-ac-title{
  color:#fff;
}

.onplix-ac-row:hover .onplix-ac-artist,
.onplix-ac-row.is-active .onplix-ac-artist,
.onplix-ac-row.is-hovered .onplix-ac-artist{
  color:#fff;
  opacity:.85;
}

/* ===============================
   ANIMACI?N ITEMS
=============================== */

@keyframes fadeItem{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

.onplix-ac-remove{
  pointer-events:auto;
  z-index: 2;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  opacity:.6;
  color:#f4f4f5 !important;
  cursor:pointer;
  transition:.2s;
}

.onplix-ac-remove:hover{
  opacity:1;
  transform:scale(1.1);
}




/* =========================================
   BOTON POPUP DESACTIVADO REAL
========================================= */

#onplix-add-screens.is-disabled {

  opacity: 0.4 !important;
  filter: grayscale(70%);
  cursor: not-allowed !important;

  pointer-events: auto !important;

  transform: none !important;
  box-shadow: none !important;
  transition: none !important;

}

#onplix-add-screens.is-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
  background: inherit !important;
}


/* =========================================================
   ONPLIX APP LAYOUT (NO TOCA HEADER)
========================================================= */

.onplix-app *{
  box-sizing: border-box;
}

.onplix-app{
  background:#010007;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:visible;
  min-height:0; /* ?? importante */
}

html,
body{
  height:100%;
  background:#010007;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  overscroll-behavior-y: none;
  overscroll-behavior-x: none;

  user-select:none;
  -webkit-user-select:none;
}

/* Bloquear interferencias Flatsome */
.onplix-app .container,
.onplix-app .row,
.onplix-app .col{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   CONTAINERS
========================================================= */

.onplix-shell{
  flex:1;
  display:grid;
  grid-template-columns:
    minmax(0, 2.0fr)
    minmax(0, 3.5fr)
    minmax(0, 4.5fr);
  gap:15px;
  padding:0px 20px 0px 8px;
  min-height:0;
}

.onplix-left,
.onplix-right,
.onplix-main{
  background:transparent;
  border:none;
  padding:0;

  display:flex;
  flex-direction:column;

  min-height:0;     
}

/* =========================================================
   PANEL IZQUIERDO
========================================================= */

.onplix-left{
  background:transparent !important;
  display: flex;
  flex-direction: column;
}

#onplix-results{
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 10px 10px;
  overflow-x: hidden;
  min-height: 0;
}

.onplix-ac-heading{
  padding:8px 14px 6px;
  color:rgba(255,255,255,.48);
  font-size:11px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.onplix-ac-row.is-loading{
  cursor:default;
  opacity:.68;
}

.onplix-ac-row.is-loading:hover{
  background:transparent;
}

.onplix-results-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:100%;
  padding:0;
}

#onplix-results.is-loading{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#onplix-results.is-loading > :not(.onplix-results-loading){
  display:none !important;
}

@media (max-width:768px){
  #onplix-results.is-loading .onplix-results-loading{
    position:fixed !important;
    top:60px !important;
    right:0 !important;
    bottom:75px !important;
    left:0 !important;
    z-index:20 !important;
    min-height:0 !important;
    pointer-events:none !important;
  }
}

body.mobile-view-results #onplix-results .onplix-results-loading{
  position:fixed !important;
  top:60px !important;
  right:0 !important;
  bottom:75px !important;
  left:0 !important;
  z-index:20 !important;
  min-height:0 !important;
  pointer-events:none !important;
}

.onplix-pull-refresh-indicator{
  position:fixed;
  top:calc(60px + ((100dvh - 60px - 75px) / 2));
  left:50%;
  z-index:100000;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -50%) scale(.72);
  transition:opacity .16s ease, transform .18s ease;
}

.onplix-pull-refresh-indicator::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    conic-gradient(#c084fc calc(var(--onplix-pull-progress, 0) * 1turn), rgba(255,255,255,.16) 0),
    rgba(7,3,15,.92);
  box-shadow:0 12px 28px rgba(0,0,0,.34), 0 0 18px rgba(192,132,252,.18);
}

.onplix-pull-refresh-indicator span{
  position:relative;
  width:30px;
  height:30px;
  border-radius:inherit;
  background:#07030f;
}

.onplix-pull-refresh-indicator span::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:inherit;
  background:#c084fc;
  box-shadow:0 0 14px rgba(192,132,252,.62);
}

body.onplix-pull-refresh-active .onplix-pull-refresh-indicator{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

body.onplix-pull-refresh-ready .onplix-pull-refresh-indicator::before{
  animation:onplixSpin .75s linear infinite;
}

body.onplix-pull-refresh-active.mobile-view-results #onplix-results .onplix-item{
  filter:blur(1.1px);
  opacity:.72;
  transform:translateY(var(--onplix-pull-offset, 0px)) !important;
  transition:filter .14s ease, opacity .14s ease, transform .14s ease;
}

.onplix-results-loader-orbit{
  position:relative;
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(168,85,247,.18), rgba(255,255,255,.04));
}

.onplix-results-loader-orbit::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  border:3px solid rgba(168,85,247,.16);
  border-top-color:#c084fc;
  animation:onplixSpin .82s linear infinite;
}

.onplix-results-loader-orbit span{
  position:absolute;
  inset:16px;
  border-radius:inherit;
  background:#c084fc;
  box-shadow:0 0 18px rgba(192,132,252,.58);
}

.onplix-results-empty{
  padding:22px 12px;
  color:rgba(255,255,255,.68);
  font-size:13px;
  text-align:center;
}

@keyframes onplixSpin{
  to{ transform:rotate(360deg); }
}

/* ================================
   ITEM
================================ */
.onplix-left .onplix-item{
  display:flex !important;
  flex-direction:column !important;
  gap:6px;
  padding:0 !important;
  margin-bottom:18px;
  background:transparent !important;
  position:relative;
  border-radius:8px;
  cursor:pointer;
  transition:.25s ease;
  content-visibility:visible;
  contain:none;
}

.onplix-left .onplix-item::before{
  content:"";
  position:absolute;
  left:-8px;
  top:8px;
  bottom:8px;
  width:4px;
  background:#a855f7;
  border-radius:2px;
  opacity:0;
  transition:.25s ease;
  box-shadow:0 0 8px rgba(168,85,247,.7);
}

.onplix-left .onplix-item.is-selected .onplix-top{
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}

/* ================================
   THUMBNAIL
================================ */

.onplix-left .onplix-top{
  position:relative;
  width:100% !important;
  border-radius:14px;    /* mas premium */
  overflow:hidden;
  background:#000;       /* evita flash gris */
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}

.onplix-left .onplix-top::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  border:1px solid rgba(192,132,252,.34);
  border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(192,132,252,.10), transparent 28%, transparent 70%, rgba(168,85,247,.08));
  box-shadow:
    inset 0 0 0 1px rgba(168,85,247,.10),
    inset 0 0 22px rgba(168,85,247,.16);
  transition:opacity .22s ease;
}

.onplix-left .onplix-top img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
  will-change:transform;
  backface-visibility:hidden;
}

.onplix-left .onplix-top img[data-thumb-loaded="0"],
.onplix-pl-cover img[data-thumb-loaded="0"],
.onplix-right .onplix-item img[data-thumb-loaded="0"],
#onplix-recommended .onplix-item img[data-thumb-loaded="0"]{
  opacity:0 !important;
}

.onplix-left .onplix-top img[data-thumb-loaded="1"],
.onplix-pl-cover img[data-thumb-loaded="1"],
.onplix-right .onplix-item img[data-thumb-loaded="1"],
#onplix-recommended .onplix-item img[data-thumb-loaded="1"]{
  opacity:1 !important;
  transition:opacity .18s ease;
}

/* Hover mas fino y elegante */
.onplix-left .onplix-item:hover .onplix-top{
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(0,0,0,.65);
}

.onplix-left .onplix-top:hover{
  box-shadow:
    0 14px 40px rgba(0,0,0,.65),
    0 0 0 1px rgba(192,132,252,.28),
    0 0 18px rgba(168,85,247,.20),
    0 0 34px rgba(168,85,247,.11);
}

.onplix-left .onplix-top:hover::after{
  opacity:1;
}

.onplix-left .onplix-item:hover .onplix-top img{
  transform:scale(1.05);
}

/* Mas aire entre cards */
.onplix-left .onplix-item{
  margin-bottom:22px;
}

/* ================================
   BOTONES FLOTANTES
================================ */
.onplix-left .actions{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  display:flex;
  gap:8px;
  opacity:1 !important;
  transition:none !important;
}

/* Ocultar bot?n play solo en resultados */
#onplix-results .onplix-action-play{
  display:none !important;
}

/* ================================
   BOTON ADD PREMIUM
================================ */
#onplix-results .onplix-action-btn.onplix-action-add{
  width:35px !important;
  height:35px !important;
  border-radius:8px;
  background:#1a1a1a !important;
  border:1px solid rgba(255,255,255,.12) !important;
  position:relative !important;
  transition:.18s ease !important;
}

#onplix-results .onplix-action-btn.onplix-action-add:hover{
  background:#1a1a1a !important;
  border-color:#a855f7 !important;
  box-shadow:0 0 0 1px rgba(168,85,247,.6);
}

/* Icono + */
#onplix-results .onplix-action-add::before,
#onplix-results .onplix-action-add::after{
  content:"" !important;
  position:absolute !important;
  background:#ffffff !important;
  border-radius:2px !important;
}

#onplix-results .onplix-action-add::before{
  width:12px !important;
  height:2px !important;
}

#onplix-results .onplix-action-add::after{
  width:2px !important;
  height:12px !important;
}

/* ================================
   TEXTO
================================ */
.onplix-left .t{
  font-size:15px;
  font-weight:600;
  color:#ffffff;
  line-height:1.3;
  margin-top:2px;
  transition:.25s ease;
}

.onplix-left .m{
  font-size:13px;
  color:#aaaaaa;
  margin-top:2px;
}








/* =========================================================
   BASE
========================================================= */

.onplix-video{
     display:flex;
  flex-direction:column;
  background:transparent;
  border:none;
  padding:0;
  flex:0 0 auto;
}

/* =========================================================
   VIDEO STAGE
========================================================= */

.onplix-stage,
.onplix-yt-wrapper{
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  position:relative;
  overflow:hidden;
  border-radius:13px;
  background:#000;
}

.onplix-video-blackout{
  position:absolute;
  inset:0;
  z-index:38;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  opacity:1;
  visibility:visible;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

.onplix-video-blackout img{
  width:min(168px, 34%);
  max-height:92px;
  object-fit:contain;
  opacity:1;
  image-rendering:auto;
  transform:translateZ(0);
  filter:drop-shadow(0 14px 30px rgba(168,85,247,.24));
}

body.onplix-has-song .onplix-video-blackout{
  opacity:0;
  visibility:hidden;
}

.onplix-stage iframe,
.onplix-yt-wrapper iframe{
  width:100%;
  height:100%;
  display:block;
}

@media (min-width:769px){
  html:fullscreen,
  body:fullscreen,
  html:-webkit-full-screen,
  body:-webkit-full-screen{
    width:100vw !important;
    height:100vh !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  body.onplix-desktop-video-cinema{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  body.onplix-desktop-video-cinema .control-wrapper{
    position:fixed !important;
    inset:0 !important;
    width:var(--onplix-cinema-vw, 100vw) !important;
    height:var(--onplix-cinema-vh, 100dvh) !important;
    max-width:none !important;
    max-height:none !important;
    overflow:visible !important;
    transform:none !important;
    background:#000 !important;
  }

  body.onplix-desktop-video-cinema .onplix-scale{
    position:fixed !important;
    inset:0 !important;
    width:var(--onplix-cinema-vw, 100vw) !important;
    height:var(--onplix-cinema-vh, 100dvh) !important;
    max-width:none !important;
    max-height:none !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    overflow:visible !important;
    transform:none !important;
    background:#000 !important;
  }

  body.onplix-desktop-video-cinema .onplix-scale .onplix-app{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:var(--onplix-cinema-vw, 100vw) !important;
    height:var(--onplix-cinema-vh, 100dvh) !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
    opacity:1 !important;
  }

  body.onplix-desktop-video-cinema .onplix-yt-wrapper.onplix-desktop-video-cinema-active{
    position:fixed !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;
    left:0 !important;
    z-index:999999 !important;
    width:var(--onplix-cinema-vw, 100vw) !important;
    height:var(--onplix-cinema-vh, 100dvh) !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
    background:#000 !important;
    transform:none !important;
  }

  body.onplix-desktop-video-cinema .onplix-yt-wrapper.onplix-desktop-video-cinema-active #onplix-yt,
  body.onplix-desktop-video-cinema .onplix-yt-wrapper.onplix-desktop-video-cinema-active iframe{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
  }

  .onplix-yt-wrapper:fullscreen,
  .onplix-yt-wrapper:-webkit-full-screen{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
    background:#000 !important;
    overflow:hidden !important;
    transform:none !important;
  }

  .onplix-yt-wrapper:fullscreen #onplix-yt,
  .onplix-yt-wrapper:fullscreen iframe,
  .onplix-yt-wrapper:-webkit-full-screen #onplix-yt,
  .onplix-yt-wrapper:-webkit-full-screen iframe{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
  }

}

.onplix-yt-overlay{
  position:absolute;
  inset:0;
  z-index:5;

  pointer-events:none;
  touch-action:manipulation;
  background:transparent;
  backdrop-filter:none;

  opacity:0;
  transition:opacity .25s ease;
}

#onplix-expand-video-btn{
  display:none !important;
}

/* cuando se muestra */
.onplix-yt-overlay.show{
  opacity:1;
}

#onplix-yt{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

@media (min-width:769px){
  .onplix-yt-wrapper #onplix-yt,
  .onplix-yt-wrapper iframe{
    pointer-events:none !important;
  }

  .onplix-yt-wrapper .onplix-yt-overlay{
    z-index:2147482000 !important;
    pointer-events:auto !important;
    cursor:default !important;
  }
}

/* =========================================================
   PLAYLIST CONTAINER
========================================================= */

.onplix-created-playlists{
  margin-top:10px;
  padding-top:0;
  font-family:'Roboto', sans-serif;
}

.onplix-left-title{
  font-size:var(--onplix-title-size);
  font-weight:600;
  letter-spacing:.15px;
  color:var(--onplix-text-primary);
  margin-bottom:6px;
}

.onplix-library-shell{
  margin-top:10px;
}

.onplix-library-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:13px;
  min-width:0;
}

.onplix-library-head > .onplix-section-title{
  flex:0 0 auto;
  white-space:nowrap;
}

.onplix-library-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex:0 1 360px;
  --onplix-library-tabs-width:315px;
  min-width:0;
  max-width:100%;
}

.onplix-library-tabs{
  display:inline-flex;
  align-items:center;
  flex:0 1 var(--onplix-library-tabs-width);
  gap:3px;
  width:var(--onplix-library-tabs-width);
  max-width:calc(100% - 39px);
  height:38px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  box-sizing:border-box;
  background:rgba(255,255,255,.052);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 20px rgba(0,0,0,.12);
  scrollbar-width:none;
}

.onplix-library-tabs::-webkit-scrollbar{
  display:none;
}

.onplix-library-tab{
  appearance:none;
  position:relative;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.68);
  cursor:pointer;
  font:700 12px/1 'Roboto', sans-serif;
  flex:1 1 0;
  min-width:max-content;
  min-height:28px;
  padding:0 11px;
  white-space:nowrap;
  text-align:center;
  letter-spacing:0;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.onplix-library-search-toggle{
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.052);
  color:rgba(255,255,255,.74);
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 18px rgba(0,0,0,.12);
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.onplix-library-search-toggle:hover,
.onplix-library-search-toggle:focus-visible{
  color:#fff;
  outline:none;
  border-color:rgba(192,132,252,.24);
  background:rgba(168,85,247,.16);
  box-shadow:
    inset 0 0 0 1px rgba(192,132,252,.18),
    0 10px 24px rgba(0,0,0,.18);
}

.onplix-library-search-toggle svg,
.onplix-library-inline-search svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.onplix-library-inline-search{
  display:none;
  align-items:center;
  gap:9px;
  width:100%;
  min-width:0;
  height:34px;
  padding:0 8px 0 12px;
  border:1px solid rgba(192,132,252,.24);
  border-radius:999px;
  background:rgba(255,255,255,.065);
  color:rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 24px rgba(0,0,0,.16);
}

.onplix-library-inline-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  color:#fff;
  font-family:var(--onplix-font-family);
  font-size:13px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:0;
}

.onplix-library-inline-search input::placeholder{
  color:rgba(255,255,255,.48);
}

.onplix-library-inline-search input::-webkit-search-cancel-button{
  display:none;
}

.onplix-library-inline-search button{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.64);
  cursor:pointer;
  font:800 16px/1 'Roboto', sans-serif;
  width:22px;
  height:22px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .18s ease, color .18s ease;
}

.onplix-library-inline-search button:hover,
.onplix-library-inline-search button:focus-visible{
  color:#fff;
  outline:none;
  background:rgba(255,255,255,.08);
}

.onplix-library-shell.is-searching .onplix-library-search-toggle{
  display:none;
}

.onplix-library-shell.is-searching .onplix-library-tabs{
  display:inline-flex;
  flex:1 1 100%;
  width:100%;
  max-width:100%;
  height:38px;
  padding:4px;
  border-color:rgba(192,132,252,.26);
  background:rgba(255,255,255,.062);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 12px 26px rgba(0,0,0,.18);
}

.onplix-library-shell.is-searching .onplix-library-tab{
  display:none;
}

.onplix-library-shell.is-searching .onplix-library-inline-search{
  display:flex;
  width:100%;
  height:28px;
  border:0;
  background:transparent;
  box-shadow:none;
}

.onplix-library-tab:hover,
.onplix-library-tab:focus-visible{
  color:#fff;
  outline:none;
  background:rgba(255,255,255,.055);
}

.onplix-library-tab.is-active{
  color:#fff;
  background:rgba(168,85,247,.24);
  box-shadow:
    inset 0 0 0 1px rgba(192,132,252,.28),
    0 8px 18px rgba(0,0,0,.16);
}

.onplix-library-panel{
  display:none;
}

.onplix-library-panel.is-active{
  display:block;
  min-height:0;
  overflow:visible;
}

.onplix-library-shell.is-filtering .onplix-library-panels{
  overflow:visible;
}

.onplix-library-shell.is-filtering .onplix-library-panel{
  display:none;
}

.onplix-library-panel-title{
  display:none;
}

/* =========================================================
   PLAYLIST SLIDER
========================================================= */

#onplix-playlists,
#onplix-smart-playlists,
#onplix-artists,
#onplix-library-search-results{
  margin-top:0;
  display:grid;
  min-height:0;

  grid-auto-flow:column;
  grid-template-rows:repeat(2, auto);

  grid-auto-columns:calc((100% - (16px * 4)) / 5);
  /* 5 visibles reales */

  gap:10px 16px;

  overflow-x:auto;
  overflow-y:hidden;

  padding-top:8px;
  padding-bottom:8px;
  scrollbar-gutter:stable;
  overflow-clip-margin:12px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(168,85,247,.45) transparent;
}

#onplix-playlists::-webkit-scrollbar,
#onplix-smart-playlists::-webkit-scrollbar,
#onplix-artists::-webkit-scrollbar,
#onplix-library-search-results::-webkit-scrollbar{
  height:3px;
  display:block;
}

#onplix-playlists::-webkit-scrollbar-track,
#onplix-smart-playlists::-webkit-scrollbar-track,
#onplix-artists::-webkit-scrollbar-track,
#onplix-library-search-results::-webkit-scrollbar-track{
  background:transparent;
}

#onplix-playlists::-webkit-scrollbar-thumb,
#onplix-smart-playlists::-webkit-scrollbar-thumb,
#onplix-artists::-webkit-scrollbar-thumb,
#onplix-library-search-results::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, rgba(124,58,237,.66), rgba(168,85,247,.74));
  border-radius:999px;
}

.onplix-library-section{
  display:none;
}

#onplix-library-search-results{
  display:none;
}

.onplix-library-shell.is-filtering #onplix-library-search-results{
  display:grid;
}

.onplix-smart-card .onplix-pl-cover{
  cursor:pointer;
}

.onplix-library-empty{
  grid-column:1/-1;
  color:var(--onplix-text-secondary);
  font-size:12px;
  line-height:1.35;
  padding:10px 2px;
}

.onplix-pl-placeholder{
  display:flex;
  pointer-events:none;
  opacity:.82;
}

.onplix-playlists-empty{
  color:#888;
  font-size:13px;
}

/* =========================================================
   PLAYLIST CARD
========================================================= */

.onplix-pl-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
}

.onplix-pl-name{
  margin-top:6px;
  font-size:13px;
  font-weight:500;
  color:var(--onplix-text-primary);
  text-align:center;
  line-height:1.2;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.onplix-pl-count{
  margin-top:2px;
  font-size:11px;
  color:var(--onplix-text-secondary);
  text-align:center;
  width:100%;
}

/* =========================================================
   COVER
========================================================= */

.onplix-pl-cover{
  position:relative;
  width:100%;          /* ?? ocupa la columna */
  aspect-ratio:1/1;    /* ?? siempre cuadrada */
  border-radius:16px;
  overflow:hidden;
  background:#1a1a1a;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}

@media (min-width:769px){
  .onplix-library-panel .onplix-pl-cover{
    width:92%;
    margin:0 auto;
  }

  .onplix-library-panel .onplix-pl-name,
  .onplix-library-panel .onplix-pl-count{
    width:92%;
  }
}

.onplix-artist-card .onplix-pl-cover,
.onplix-library-artists .onplix-library-placeholder .onplix-library-cover{
  border-radius:999px;
}

.onplix-pl-placeholder .onplix-pl-cover{
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(168,85,247,.08)),
    rgba(18,18,24,.96);
  border:1px solid rgba(255,255,255,.08);
}

.onplix-pl-placeholder .onplix-pl-cover::after{
  display:none;
  content:none;
}

.onplix-pl-placeholder .onplix-pl-name{
  display:none;
}

.onplix-pl-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
  will-change:transform;
  backface-visibility:hidden;
}

.onplix-pl-cover::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border:1px solid rgba(192,132,252,.34);
  border-radius:inherit;
  background:
    linear-gradient(135deg, rgba(192,132,252,.10), transparent 28%, transparent 70%, rgba(168,85,247,.08));
  box-shadow:
    inset 0 0 0 1px rgba(168,85,247,.10),
    inset 0 0 22px rgba(168,85,247,.16);
  opacity:0;
  transition:opacity .22s ease;
}

.onplix-pl-card:hover .onplix-pl-cover::before{
  opacity:1;
}

.onplix-pl-card:hover .onplix-pl-cover{
  transform:none;
  box-shadow:
    0 14px 40px rgba(0,0,0,.54),
    0 0 0 1px rgba(192,132,252,.28),
    0 0 18px rgba(168,85,247,.20),
    0 0 34px rgba(168,85,247,.11);
}

.onplix-pl-card:hover .onplix-pl-cover img{
  transform:scale(1.05);
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.onplix-pl-wrapper{
  position:relative;
  overflow:visible;   /* ?? CLAVE */
}

.onplix-pl-menu-btn{
  position:absolute;
  top:6px;         /* ?? dentro del cover */
  right:6px;       /* ?? ya no negativo */
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:none;
  cursor:pointer;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
}

.onplix-pl-menu-btn:hover{
  background:rgba(0,0,0,.8);
  transform:scale(1.05);
}

/* Los 3 puntos */
.onplix-pl-menu-btn::before{
  content:"";
  width:4px;
  height:4px;
  background:#fff;
  border-radius:50%;
  box-shadow:
    0 -6px 0 #fff,
    0 6px 0 #fff;
}

.onplix-pl-menu{
  position:fixed;
  background:#121212;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:4px 0;
  min-width:100px;
  box-shadow:0 10px 200px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:.15s ease;
}

.onplix-pl-menu.is-open{
  opacity:1;
  pointer-events:auto;
}

.onplix-pl-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  font-family:'Roboto', sans-serif;
  font-size:12px;
  font-weight:500;
  color:#e5e7eb;
  cursor:pointer;
  transition:.15s ease;
}

.onplix-pl-menu-icon{
  width:16px;
  height:16px;
  min-width:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
}

.onplix-pl-menu-icon svg{
  width:16px;
  height:16px;
  display:block;
}

.onplix-pl-menu-label{
  line-height:1.1;
}

.onplix-pl-menu-item:hover{
  background:rgba(124,58,237,.12);
}

.onplix-pl-menu-item.danger:hover{
  background:rgba(239,68,68,.12);
  color:#ef4444;
}

/* =========================================================
   GRID (MULTI COVER)
========================================================= */

.onplix-pl-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  width:100%;
  height:100%;
}

.onplix-pl-empty{
  background:#2a2a2a;
}













/* =========================================================
   PANEL DERECHO
========================================================= */

.onplix-right{
  background:#121212;
  border-radius:14px;
  padding:14px;

  display:flex;
  flex-direction:column;

  min-height:0;
  overflow:hidden;
  gap:0;
}

/* Ocultar bot?n nativo de limpiar en Chrome */
#onplix-q::-webkit-search-cancel-button{
  display:none;
}

/* Tambi?n para Edge */
#onplix-q::-webkit-search-decoration{
  display:none;
}

#onplix-queue,
#onplix-recommended,
#onplix-shared{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  -webkit-overflow-scrolling: touch;
  padding-top:8px;
}

.onplix-item.is-next {
  position: relative;
  background: rgba(140, 82, 255, 0.10);
  border-radius: 12px;
  transition: all .25s ease;
}

.onplix-item.is-next::after {
  content: "Siguiente";
  position: absolute;
  right: 10px;
  top: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #8c52ff;
  letter-spacing: .5px;
}





/* =========================================================
   TABS PREMIUM NAVIGATION
========================================================= */

.onplix-tabs-wrapper{
  position:relative;
  margin-top:10px;
}

.onplix-right > .onplix-tabs-wrapper{
  margin-top:10px !important;
}

.onplix-tabs{
  display:inline-flex;
  align-items:center;
  gap:3px;
  position:relative;
  width:100%;
  height:38px;
  padding:4px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  box-sizing:border-box;
  background:rgba(255,255,255,.052);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 8px 20px rgba(0,0,0,.12);
}

/* Tab base */
.onplix-tab{
  position:relative;
  background:transparent;
  border:0;
  border-radius:999px;

  font-family:'Roboto', sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0;

  color:rgba(255,255,255,.68);
  cursor:pointer;

  flex:1 1 0;
  min-height:28px;
  padding:0 11px;
  white-space:nowrap;
  text-align:center;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

@media (max-width:768px){
  .onplix-tabs-wrapper{
    margin-top:8px !important;
  }

  .onplix-tabs{
    width:100% !important;
    height:36px !important;
    gap:2px !important;
    padding:3px !important;
    margin-top:0 !important;
    overflow:hidden;
  }

  .onplix-tab{
    flex:1 1 0 !important;
    min-width:0 !important;
    min-height:30px !important;
    padding:0 4px !important;
    font-size:11px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .onplix-right-top .onplix-section-title{
    font-size:14px !important;
  }
}

/* Hover premium */
.onplix-tab:hover{
  color:#fff;
  background:rgba(255,255,255,.055);
  transform:none;
}

/* Activo */
.onplix-tab.active{
  color:#fff;
  background:rgba(168,85,247,.24);
  box-shadow:inset 0 0 0 1px rgba(192,132,252,.28), 0 8px 18px rgba(0,0,0,.16);
}

/* L?nea activa con glow */
.onplix-tab::after{
  content:none;
  position:absolute;
  left:0;
  bottom:0px;
  width:0%;
  height:2px;
  background:linear-gradient(90deg,#a855f7,#9333ea);
  border-radius:2px;
  transition:width .25s ease;
}

/* Glow elegante */
.onplix-tab.active::after{
  width:100%;
  box-shadow:0 0 12px rgba(168,85,247,.6);
}

.onplix-shared-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  margin-top:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.032));
}

.onplix-shared-status-row,
.onplix-shared-access,
.onplix-shared-join{
  display:flex;
  align-items:center;
  gap:10px;
}

.onplix-shared-access{
  align-items:flex-start;
  flex-wrap:wrap;
}

.onplix-shared-status-row{
  justify-content:space-between;
}

.onplix-shared-actions-row{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  gap:8px;
  flex:1 1 100%;
  min-width:0;
  margin-left:0;
}

.onplix-shared-actions-row .onplix-save-pill{
  margin-left:0;
}

.onplix-shared-create{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border:1px solid rgba(168,85,247,.16);
  border-radius:8px;
  background:rgba(168,85,247,.08);
}

.onplix-shared-create span,
.onplix-shared-join-title{
  color:#f5f3ff;
  font:800 13px/1.25 'Roboto', sans-serif;
}

.onplix-shared-create .onplix-save-pill{
  flex:0 0 156px;
  width:156px;
  min-width:156px;
  height:36px;
  padding:0 16px;
}

.onplix-shared-join-title{
  margin-top:2px;
  color:#c4b5fd;
}

.onplix-shared-action-buttons{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.onplix-shared-action-buttons .onplix-save-pill{
  grid-column:1 / -1;
}

.onplix-shared-details{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.onplix-shared-details.is-collapsed{
  display:none;
}

.onplix-shared-details-toggle{
  width:30px;
  height:30px;
  padding:0;
  margin-left:auto;
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.82);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}

.onplix-shared-details-toggle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translate(-50%, -62%) rotate(45deg);
  transition:transform .18s ease;
}

.onplix-shared-details-toggle.is-open::before{
  transform:translate(-50%, -38%) rotate(225deg);
}

.onplix-shared-details-toggle:hover{
  background:rgba(168,85,247,.18);
  border-color:rgba(192,132,252,.30);
  color:#fff;
}

.onplix-shared-leave{
  width:100%;
  min-width:74px;
  height:34px;
  padding:0 16px;
  border:1px solid rgba(248,113,113,.22);
  border-radius:999px;
  background:rgba(239,68,68,.10);
  color:#fecaca;
  font:800 12px/1 'Roboto', sans-serif;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}

.onplix-shared-leave:hover{
  background:rgba(239,68,68,.14);
  border-color:rgba(248,113,113,.32);
  color:#fff;
}

.onplix-shared-kicker,
.onplix-shared-codebox span,
.onplix-shared-controls span{
  display:block;
  color:#cbd5e1;
  font:700 12px/1.15 'Roboto', sans-serif;
}

.onplix-shared-codebox > span{
  color:#cbd5e1;
  font:700 12px/1.15 'Roboto', sans-serif;
}

.onplix-shared-state{
  margin-top:4px;
  font:800 18px/1 'Roboto', sans-serif;
  color:#ef4444;
}

.onplix-shared-state.is-active{
  color:#c084fc;
  text-shadow:0 0 16px rgba(168,85,247,.24);
}

.onplix-shared-qrbox{
  width:96px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 96px;
  border-radius:10px;
  background:#fff;
  padding:5px;
  box-sizing:border-box;
  overflow:hidden;
}

.onplix-shared-qrbox img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.onplix-shared-codebox{
  min-width:0;
  flex:1 1 auto;
  padding-top:2px;
}

.onplix-shared-codebox strong{
  display:block;
  margin-top:2px;
  color:#fff;
  font:900 26px/1 'Roboto', sans-serif;
  letter-spacing:2px;
}

.onplix-shared-codebox small{
  display:block;
  margin-top:5px;
  color:#cbd5e1;
  font:700 12px/1.15 'Roboto', sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.onplix-shared-codebox .onplix-shared-switch-row{
  margin-top:6px;
}

.onplix-shared-codebox .onplix-shared-help{
  margin-top:5px;
}

.onplix-shared-controls{
  display:grid;
  width:min(100%, 520px);
  grid-template-columns:minmax(0, 244px) minmax(0, 260px);
  gap:10px;
  align-items:center;
}

.onplix-shared-controls label{
  display:grid;
  grid-template-columns:auto 92px;
  align-items:center;
  gap:10px;
  flex:1 1 0;
  min-width:0;
  min-height:36px;
  padding:3px 5px 3px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.045);
}

.onplix-shared-controls label:nth-child(2){
  grid-template-columns:auto 132px;
}

.onplix-shared-controls span{
  white-space:nowrap;
}

.onplix-shared-controls input,
.onplix-shared-controls select,
.onplix-shared-join input{
  width:100%;
  height:30px;
  margin-top:0;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(3,1,10,.82);
  color:#fff;
  padding:0 10px;
  font:600 13px/1 'Roboto', sans-serif;
}

.onplix-shared-limit-box{
  display:grid;
  grid-template-columns:46px 30px;
  align-items:center;
  gap:6px;
}

.onplix-shared-controls input{
  text-align:center;
}

.onplix-shared-controls input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}

.onplix-shared-controls input[type="number"]::-webkit-outer-spin-button,
.onplix-shared-controls input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.onplix-shared-code-row input{
  text-transform:uppercase;
}

.onplix-shared-join input{
  height:36px;
}

.onplix-shared-action-buttons .onplix-shared-leave,
.onplix-shared-action-buttons .onplix-shared-clear-items{
  min-width:66px;
}

.onplix-shared-action-buttons #onplix-shared-leave{
  width:auto;
  justify-self:end;
}

body.onplix-shared-guest .onplix-shared-action-buttons{
  display:flex;
  justify-content:flex-end;
}

body.onplix-shared-guest .onplix-shared-action-buttons #onplix-shared-leave{
  flex:0 0 auto;
  min-width:74px;
}

.onplix-shared-join{
  flex-direction:row;
  align-items:stretch;
  gap:10px;
}

.onplix-shared-join button{
  height:36px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#a855f7,#9333ea);
  color:#fff;
  font:700 12px/1 'Roboto', sans-serif;
  cursor:pointer;
}

.onplix-shared-join > #onplix-shared-scan-btn{
  flex:0 0 156px;
  width:156px;
  min-width:156px;
  margin:0;
  white-space:nowrap;
}

.onplix-shared-code-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 156px;
  flex:1 1 auto;
  gap:10px;
  align-items:center;
}

.onplix-shared-code-row #onplix-shared-join-btn{
  margin:0;
  width:156px;
  min-width:156px;
}

.onplix-shared-reset-quota{
  width:30px;
  min-width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(34,197,94,.26);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(20,184,166,.10));
  color:#bbf7d0;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}

.onplix-shared-reset-quota svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.onplix-shared-reset-quota:hover{
  background:linear-gradient(135deg, rgba(34,197,94,.26), rgba(20,184,166,.18));
  border-color:rgba(74,222,128,.44);
  color:#ecfdf5;
}

.onplix-shared-clear-items{
  min-width:74px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border:1px solid rgba(250,204,21,.24);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(250,204,21,.16), rgba(168,85,247,.08));
  color:#fde68a;
  font:800 12px/1 'Roboto', sans-serif;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}

.onplix-shared-clear-items:hover{
  background:linear-gradient(135deg, rgba(250,204,21,.23), rgba(168,85,247,.13));
  border-color:rgba(253,224,71,.42);
  color:#fff7c2;
}

.onplix-shared-scanner{
  display:none;
  position:relative;
  flex:1 0 100%;
  min-height:180px;
  overflow:hidden;
  border:1px solid rgba(192,132,252,.25);
  border-radius:8px;
  background:#05030a;
}

.onplix-shared-scan-close{
  display:none;
}

.onplix-shared-scan-zoom{
  display:none;
}

.onplix-shared-scanner.is-visible{
  display:block;
}

.onplix-shared-scanner video{
  width:100%;
  height:220px;
  display:block;
  object-fit:cover;
}

body.onplix-shared-scanning{
  overflow:hidden !important;
}

body.onplix-shared-scanning .onplix-video,
body.onplix-shared-scanning .onplix-yt-wrapper,
body.onplix-shared-scanning #onplix-yt,
body.onplix-shared-scanning .onplix-yt-wrapper iframe,
body.onplix-shared-scanning .onplix-mobile-video-player,
body.onplix-shared-scanning .onplix-player,
body.onplix-shared-scanning .onplix-mini-player,
body.onplix-shared-scanning .onplix-mobile-nav{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.onplix-shared-scanning .onplix-shared-scanner.is-visible{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:block !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  border:0 !important;
  border-radius:0 !important;
  background:#000 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  contain:layout paint;
}

body.onplix-shared-scanning .onplix-shared-scanner.is-visible::before{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:min(72vw, 420px);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border:2px solid rgba(192,132,252,.85);
  border-radius:18px;
  box-shadow:0 0 0 999px rgba(0,0,0,.36), 0 0 28px rgba(168,85,247,.24);
  pointer-events:none;
  z-index:2;
}

body.onplix-shared-scanning .onplix-shared-scanner.is-visible::after{
  content:"Escanea el QR de Compartida";
  position:absolute;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 34px);
  transform:translateX(-50%);
  z-index:3;
  width:max-content;
  max-width:calc(100vw - 32px);
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(0,0,0,.62);
  color:#fff;
  font:800 13px/1 'Roboto', sans-serif;
}

body.onplix-shared-scanning .onplix-shared-scan-zoom.is-visible{
  position:absolute !important;
  left:50% !important;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 86px) !important;
  transform:translateX(-50%) !important;
  z-index:4 !important;
  width:min(380px, calc(100vw - 34px)) !important;
  min-height:46px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px 14px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.62) !important;
  color:#fff !important;
  font:800 13px/1 'Roboto', sans-serif !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

body.onplix-shared-scanning .onplix-shared-scan-zoom input{
  width:100% !important;
  accent-color:#a855f7;
}

body.onplix-shared-scanning .onplix-shared-scanner.is-visible video{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  width:100vw !important;
  height:100dvh !important;
  display:block !important;
  object-fit:cover !important;
  background:#000 !important;
}

body.onplix-shared-scanning .onplix-shared-scan-close{
  position:absolute !important;
  top:calc(env(safe-area-inset-top, 0px) + 14px) !important;
  right:14px !important;
  z-index:4 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.62) !important;
  color:#fff !important;
  font:900 26px/1 'Roboto', sans-serif !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

.onplix-shared-switch-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin-right:0;
  min-width:0;
  color:#cbd5e1;
}

.onplix-shared-switch-row span{
  color:#cbd5e1;
  font:700 12px/1.15 'Roboto', sans-serif;
}

.onplix-shared-switch-row input[type="checkbox"]{
  width:40px;
  height:22px;
  flex:0 0 40px;
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  padding:0;
  cursor:pointer;
  position:relative;
}

.onplix-shared-switch-row input[type="checkbox"]::before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  transition:transform .18s ease, background .18s ease;
}

.onplix-shared-switch-row input[type="checkbox"]:checked{
  background:linear-gradient(135deg,#a855f7,#7c3aed);
}

.onplix-shared-switch-row input[type="checkbox"]:checked::before{
  transform:translateX(18px);
}

.onplix-shared-help{
  color:#c4b5fd;
  font:500 12px/1.35 'Roboto', sans-serif;
}

@media (max-width:760px){
  .onplix-shared-panel{
    padding:12px;
  }

  .onplix-shared-status-row{
    align-items:flex-start;
  }

  .onplix-shared-create{
    flex-direction:column;
    align-items:stretch;
    gap:9px;
  }

  .onplix-shared-create .onplix-save-pill{
    width:100%;
    min-width:0;
    flex-basis:auto;
  }

  .onplix-shared-controls{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:8px;
  }

  .onplix-shared-controls label{
    grid-template-columns:1fr auto;
    gap:8px;
    padding-left:9px;
  }

  .onplix-shared-controls label:nth-child(2){
    grid-template-columns:1fr 126px;
  }

  .onplix-shared-access{
    align-items:flex-start;
    gap:10px;
  }

  .onplix-shared-qrbox{
    width:96px;
    height:96px;
    flex-basis:96px;
  }

  .onplix-shared-codebox strong{
    font-size:24px;
  }

  .onplix-shared-codebox small{
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .onplix-shared-actions-row{
    flex:1 1 100%;
    min-width:0;
    margin-left:0;
    gap:8px;
  }

  .onplix-shared-switch-row{
    min-width:0;
    margin-right:0;
  }

  .onplix-shared-switch-row span{
    max-width:none;
  }

  .onplix-shared-actions-row .onplix-save-pill,
  .onplix-shared-leave,
  .onplix-shared-clear-items{
    height:34px;
    padding:0 13px;
  }

  .onplix-shared-join{
    flex-direction:column;
  }

  .onplix-shared-join > #onplix-shared-scan-btn{
    flex-basis:auto;
    width:100%;
  }

  .onplix-shared-code-row{
    grid-template-columns:minmax(0, 1fr) 156px;
    gap:8px;
  }
}

@media (max-width:420px){
  .onplix-shared-controls{
    grid-template-columns:1fr;
  }

  .onplix-shared-controls label{
    grid-template-columns:1fr auto;
  }

  .onplix-shared-access{
    display:grid;
    grid-template-columns:88px minmax(0, 1fr);
    align-items:start;
  }

  .onplix-shared-code-row{
    grid-template-columns:minmax(0, 1fr) 136px;
  }

  .onplix-shared-code-row #onplix-shared-join-btn{
    width:136px;
    min-width:136px;
  }

  .onplix-shared-qrbox{
    width:88px;
    height:88px;
    flex-basis:88px;
  }

  .onplix-shared-actions-row{
    grid-column:1 / -1;
  }
}

.onplix-shared-list{
  padding-top:8px;
}

#onplix-shared-list .onplix-shared-item{
  grid-template-columns:60px minmax(0, 1fr) auto !important;
}

body.onplix-shared-guest #onplix-shared-list .onplix-shared-item{
  grid-template-columns:60px minmax(0, 1fr) 42px !important;
}

body.onplix-shared-guest.mobile-view-player #onplix-shared-list .onplix-shared-item{
  grid-template-columns:60px minmax(0, 1fr) 42px !important;
}

.onplix-shared-item.is-pending .t{
  color:#facc15;
}

.onplix-shared-item.is-pending .m{
  color:#fbbf24;
  font-weight:700;
}

.onplix-shared-item.is-rejected{
  opacity:.52;
}

.onplix-shared-item.dragging{
  opacity:.45;
}

.onplix-shared-item .actions{
  margin-left:auto;
  grid-column:3;
  justify-content:flex-end;
  justify-self:end;
  min-width:112px;
}

.onplix-shared-item .onplix-action-delete{
  margin-left:auto;
}

body.onplix-shared-guest .onplix-shared-item .actions{
  display:flex !important;
  grid-template-columns:none !important;
  min-width:42px;
  width:42px;
  margin-left:auto !important;
  justify-self:end !important;
  justify-content:flex-end !important;
  align-items:center !important;
  column-gap:0 !important;
}

body.onplix-shared-guest.mobile-view-player #onplix-shared-list .onplix-shared-item .actions{
  display:flex !important;
  grid-template-columns:none !important;
  width:42px !important;
  min-width:42px !important;
  margin-left:auto !important;
  justify-content:flex-end !important;
  transform:none !important;
}

body.onplix-shared-guest .onplix-shared-item .duration{
  display:none !important;
}

body.onplix-shared-guest .onplix-shared-item .onplix-action-delete{
  margin-left:0 !important;
  justify-self:end !important;
}

.onplix-shared-item.is-playing{
  border-color:rgba(192,132,252,.42) !important;
  background:linear-gradient(90deg, rgba(168,85,247,.24), rgba(168,85,247,.07)) !important;
  box-shadow:inset 4px 0 0 #a855f7, 0 10px 28px rgba(168,85,247,.14) !important;
}

.onplix-shared-item.is-playing .t,
.onplix-shared-item.is-playing .duration{
  color:#c084fc;
  font-weight:700;
}
.onplix-shared-item.is-last-shared{
  border-color:rgba(192,132,252,.22) !important;
  background:linear-gradient(90deg, rgba(168,85,247,.10), rgba(255,255,255,.035)) !important;
  box-shadow:inset 3px 0 0 rgba(168,85,247,.46) !important;
}

.onplix-shared-item.is-last-shared .t,
.onplix-shared-item.is-last-shared .duration{
  color:#d8b4fe;
  font-weight:600;
}

.onplix-shared-item.is-revealed{
  animation:onplixSharedReveal 1.15s ease;
}

@keyframes onplixSharedReveal{
  0%{
    border-color:rgba(192,132,252,.56);
    background:linear-gradient(90deg, rgba(168,85,247,.28), rgba(168,85,247,.08));
    box-shadow:inset 4px 0 0 #a855f7, 0 0 0 1px rgba(168,85,247,.42), 0 12px 28px rgba(168,85,247,.18);
  }
  100%{
    border-color:rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    box-shadow:none;
  }
}

.onplix-action-approve::before{
  content:"";
  width:13px;
  height:13px;
  display:block;
  background:#a855f7;
  clip-path:polygon(14% 52%, 35% 72%, 84% 20%, 95% 31%, 36% 92%, 4% 62%);
}

.onplix-action-approve:hover::before{
  background:#c084fc;
}

.onplix-shared-video-qr{
  position:absolute;
  left:clamp(10px,1.4vw,18px);
  bottom:clamp(10px,1.4vw,18px);
  z-index:70;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:6px;
  border:1px solid rgba(216,180,254,.28);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(8,3,18,.88), rgba(0,0,0,.74));
  box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.onplix-shared-video-qr.is-visible{
  display:flex;
}

.onplix-yt-wrapper:fullscreen .onplix-shared-video-qr.is-visible,
.onplix-yt-wrapper:-webkit-full-screen .onplix-shared-video-qr.is-visible{
  display:flex !important;
  z-index:2147483000 !important;
  opacity:1 !important;
  visibility:visible !important;
  left:clamp(18px,2vw,34px) !important;
  bottom:clamp(18px,2vw,34px) !important;
  gap:clamp(7px,.9vw,12px) !important;
  padding:clamp(10px,1.1vw,16px) !important;
  border-radius:16px !important;
}

.onplix-shared-video-qr img{
  width:clamp(42px,4vw,62px);
  height:clamp(42px,4vw,62px);
  padding:3px;
  border-radius:6px;
  background:#fff;
  image-rendering:auto;
  box-sizing:border-box;
}

.onplix-yt-wrapper:fullscreen .onplix-shared-video-qr img,
.onplix-yt-wrapper:-webkit-full-screen .onplix-shared-video-qr img{
  width:clamp(92px,8.8vw,154px) !important;
  height:clamp(92px,8.8vw,154px) !important;
  padding:6px !important;
  border-radius:12px !important;
}

.onplix-shared-video-qr span{
  color:#fff;
  font:900 clamp(8px,.72vw,11px)/1.05 'Roboto', sans-serif;
  text-align:center;
  white-space:nowrap;
}

.onplix-yt-wrapper:fullscreen .onplix-shared-video-qr span,
.onplix-yt-wrapper:-webkit-full-screen .onplix-shared-video-qr span{
  font:900 clamp(13px,1.15vw,19px)/1.08 'Roboto', Arial, sans-serif !important;
}

.onplix-shared-video-qr strong{
  display:inline-flex;
  padding:3px 5px;
  border:1px solid rgba(216,180,254,.24);
  border-radius:999px;
  background:rgba(168,85,247,.16);
  color:#c4b5fd;
  font:900 clamp(10px,.85vw,14px)/1 'Roboto', sans-serif;
  letter-spacing:1.1px;
}

.onplix-yt-wrapper:fullscreen .onplix-shared-video-qr strong,
.onplix-yt-wrapper:-webkit-full-screen .onplix-shared-video-qr strong{
  padding:5px 9px !important;
  font:900 clamp(17px,1.65vw,28px)/1 'Roboto', Arial, sans-serif !important;
}

.onplix-toast{
  position:fixed;
  left:50%;
  bottom:96px;
  z-index:1000000;
  max-width:min(420px, calc(100vw - 32px));
  padding:10px 14px;
  border:1px solid rgba(192,132,252,.28);
  border-radius:999px;
  background:rgba(10,5,18,.94);
  color:#fff;
  font:700 12px/1.25 'Roboto', sans-serif;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
  opacity:0;
  transform:translate(-50%, 12px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

.onplix-toast.show{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}
/* =========================================================
   AUTOPLAY 
========================================================= */

.onplix-autoplay-block{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:10px 0;
  position:relative;
  min-height:34px;
}

.onplix-active-playlist-shell{
  padding:0 !important;
  min-height:10px !important;
  margin:0 !important;
}

.onplix-active-playlist-shell.has-active-source{
  margin-top:8px !important;
  margin-bottom:8px !important;
  min-height:auto !important;
}

.onplix-active-playlist-shell.has-playlist-source,
.onplix-active-playlist-shell.has-generic-source{
  padding-top:0 !important;
}

.onplix-active-playlist-shell .onplix-active-block.is-hidden{
  display:none;
}

.onplix-tabs-wrapper:not(.queue-active) .onplix-autoplay-block{
  display:none;
}

.onplix-autoplay-block::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
}

.onplix-autoplay-title{
  font-size:12px;
  font-weight:500;
  color:#aaaaaa;
  letter-spacing:.2px;
}

.onplix-randomize-group{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:9px;
  z-index:2;
}

.onplix-randomize-btn{
  position:relative;
  left:auto;
  top:auto;
  width:22px;
  height:22px;
  min-width:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  color:#a855f7;
  cursor:pointer;
  transform:none;
  transition:transform .15s ease, color .18s ease, opacity .18s ease, filter .18s ease;
  opacity:.95;
  appearance:none;
  -webkit-appearance:none;
}

.onplix-randomize-btn svg{
  width:22px;
  height:22px;
}

.onplix-randomize-label{
  font-family:'Roboto', sans-serif;
  font-size:14px !important;
  font-weight:450;
  color:#ffffff;
  letter-spacing:0;
  white-space:nowrap;
  line-height:1.05;
}

.onplix-randomize-btn:hover{
  transform:scale(1.08);
  color:#c084fc;
  filter:drop-shadow(0 0 8px rgba(168,85,247,.45));
}

.onplix-randomize-btn:active{
  transform:scale(.96);
}

/* Switch mas premium */

.onplix-switch{
  position:relative;
  width:42px;
  height:22px;
}

.onplix-slider{
  position:absolute;
  inset:0;
  background:#1e1e1e;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  transition:.25s ease;
}

.onplix-slider::before{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  left:3px;
  top:50%;
  transform:translateY(-50%);
  background:#7c7c7c;
  border-radius:50%;
  transition:.25s ease;
}

.onplix-switch input:checked + .onplix-slider{
  background:linear-gradient(135deg,#a855f7,#9333ea);
  border-color:transparent;
}

.onplix-switch input:checked + .onplix-slider::before{
  transform:translate(19px,-50%);
  background:#ffffff;
}


/* =========================================================
   HEADER COLA
========================================================= */

.onplix-right-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom:0;
  min-height:30px;
}

.onplix-section-title{
  font-family:'Roboto', sans-serif;
  font-size:16px;
  font-weight:500;
  color:#ffffff;
  letter-spacing:0;
  margin-bottom:0;
}

.onplix-separator{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:15px 0 10px;
}

/* =========================================================
   ITEMS COLA + RECOMENDADOS (BASE DESKTOP)
========================================================= */

.onplix-right .onplix-item,
#onplix-recommended .onplix-item{
  transform: translateX(6px);

  display:grid;
  grid-template-columns:60px 1fr 140px; /* desktop */

  align-items:center;
  min-height:52px;

  padding:6px 10px;

  border-radius:10px;
  border-bottom:1px solid rgba(255,255,255,.04);

  position:relative;

  cursor:pointer;

  transition:transform .12s ease;
}

.onplix-right .onplix-item:hover,
#onplix-recommended .onplix-item:hover{
  background:transparent;
  transform: translateX(5px);
}

/* miniatura */

.onplix-right .onplix-item img,
#onplix-recommended .onplix-item img{

  width:60px;
  height:34px;

  border-radius:6px;

  object-fit:cover;
}

/* bloque texto */

.onplix-right .onplix-item > div:first-of-type,
#onplix-recommended .onplix-item > div:first-of-type{

  display:flex;
  flex-direction:column;

  justify-content:center;

  min-width:0;

  padding-left:8px;
}

/* t?tulo */

.onplix-right .t{

  font-family:'Roboto', sans-serif;

  font-size:14px;
  font-weight:500;

  color:#ffffff;

  line-height:1.4;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.onplix-ac-row[data-kind="artist"] .onplix-ac-title{
  font-weight:700;
}

.onplix-ac-row[data-kind="artist"] .onplix-ac-artist{
  color:#c084fc !important;
  font-weight:700;
}

.onplix-ac-row[data-kind="artist"]:hover .onplix-ac-artist,
.onplix-ac-row[data-kind="artist"].is-active .onplix-ac-artist{
  color:#c084fc !important;
  opacity:1;
}

#onplix-recommended .t{

  font-family:'Roboto', sans-serif;

  font-size:14px;
  font-weight:500;

  color:#ffffff;

  line-height:1.4;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* metadata */

.onplix-right .m{
  font-family:'Roboto', sans-serif;

  font-size:12px;
  font-weight:400;

  color:#9ca3af;

  margin-top:4px;
}

#onplix-recommended .m{
  font-family:'Roboto', sans-serif;

  font-size:12px;
  font-weight:400;

  color:#9ca3af;

  margin-top:4px;
}

.onplix-item.onplix-empty{
  display:block !important;
  grid-template-columns:none !important;
  transform:none !important;
  cursor:default !important;
  padding:10px 12px !important;
}

.onplix-item.onplix-empty:hover{
  transform:none !important;
  background:transparent !important;
}

.onplix-empty > div:first-of-type{
  display:block !important;
  min-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
}

.onplix-empty .onplix-empty-text{
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  display:block !important;
  width:100% !important;
  text-align:center !important;
}



/* =========================================================
   HOVER FONDO EXPANDIDO
========================================================= */

.onplix-right .onplix-item::before,
#onplix-recommended .onplix-item::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0px;
  right:-10px;
  background:rgba(168,85,247,.08);
  border-radius:10px;
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}

.onplix-right .onplix-item:hover::before,
#onplix-recommended .onplix-item:hover::before{
  opacity:1;
}


/* =========================================================
   BOTON GUARDAR (PILL AJUSTADO)
========================================================= */

.onplix-save-pill{
  font-family:'Roboto', sans-serif;

  height:34px;          /* antes 28px */
  padding:0 24px;       /* antes 14px */

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:linear-gradient(135deg,#a855f7,#9333ea);
  border:none;

  color:#ffffff;
  font-size:13px;       /* antes 11px */
  font-weight:500;
  letter-spacing:.4px;

  cursor:pointer;

  transition:
    transform .15s ease,
    box-shadow .2s ease;
}

.onplix-save-pill:hover{
  transform:translateY(-2px);
}

.onplix-save-pill:active{
  transform:scale(.96);
  box-shadow:none;
}





/* =========================================================
   PLAYLIST ACTIVA
========================================================= */

.onplix-active-block{
  margin-bottom:0;
  display:none;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:0 !important;
}

.onplix-right.has-queue .onplix-active-block:not(.is-hidden){
  display:block;
}


.onplix-active-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.onplix-active-texts{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.onplix-active-from{
  font-family:'Roboto', sans-serif;
  font-size:13px;
  font-weight:400;
  color:#aaaaaa;
  letter-spacing:0;
}

.onplix-active-name{
  font-family:'Roboto', sans-serif;
  font-size:16px;
  font-weight:500;
  color:#ffffff;
  line-height:1.3;
  letter-spacing:0;
}


/* =========================================================
   PIN "AHORA SONANDO" ? COMPACTO PRO
========================================================= */


.onplix-now-pin{
    
  margin:14px 0 8px 0;
  padding:6px 10px;

  border-radius:10px;

  background:linear-gradient(
    135deg,
    rgba(168,85,247,.10),
    rgba(168,85,247,.04)
  );

  border:1px solid rgba(168,85,247,.25);

  box-shadow:0 6px 18px rgba(168,85,247,.12);
  backdrop-filter:blur(8px);
}




.onplix-now-pin .onplix-now-label{
    
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:'Roboto', sans-serif;
  font-size:10px;
  letter-spacing:.8px;
  font-weight:600;
  color:#c084fc;
  text-transform:uppercase;
}

.onplix-now-pin .onplix-now-close{
  all:unset;
  cursor:pointer;
  font-size:10px;
  color:#9ca3af;

  padding:6px 6px;
  border-radius:6px;
  transition:.15s ease;
}

.onplix-clear-x{
  all:unset;
  margin-right:6px;
  margin-top:15px;
  flex-shrink:0;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:600;
  line-height:1;
  color:#ef4444;
  cursor:pointer;
  border-radius:6px;
  transition: color .18s ease, background .18s ease, transform .15s ease;

  display:none;
  pointer-events:none;
}


.onplix-right.has-queue .onplix-clear-x{
  display:flex;
  pointer-events:auto;
}



/* =========================================================
   AUTOPLAY
========================================================= */


.onplix-autoplay-title{
  font-family:'Roboto', sans-serif;
  font-size:14px;
  font-weight:450;
  color:#ffffff;
  letter-spacing:0;
}

.onplix-switch{
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.onplix-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.onplix-slider{
  position: absolute;
  inset: 0;
  background: #2a2a2a;
  border-radius: 20px;
  transition: .2s ease;
}

.onplix-slider::before{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: #9ca3af;
  border-radius: 50%;
  transition: .2s ease;
}

.onplix-switch input:checked + .onplix-slider{
  background: #a855f7;
}

.onplix-switch input:checked + .onplix-slider::before{
  transform: translate(18px,-50%);
  background: #fff;
}

#onplix-mobile-search{
  display:none !important;
}


/* =========================================================
   BOTON ACCION UNIVERSAL (PLAY / ADD / DELETE)
========================================================= */

.onplix-action-btn{
  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:8px;

  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);

  cursor:pointer;
  position:relative;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .12s ease,
    box-shadow .18s ease;
}

/* Hover SOLO borde */
.onplix-action-btn:hover{
  background:rgba(168,85,247,.12);
  border-color:#a855f7;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(168,85,247,.25);
}

.onplix-action-btn:active{
  transform:scale(.92);
}

.onplix-action-play::before{
  content:"";
  width:0;
  height:0;
  border-left:13px solid #a855f7;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}

.onplix-action-add::before,
.onplix-action-add::after{
  content:"";
  position:absolute;
  background:#a855f7;
  border-radius:2px;
}

.onplix-action-add::before{
  width:12px;
  height:2px;
}

.onplix-action-add::after{
  width:2px;
  height:12px;
}

.onplix-action-delete:hover{
  background:rgba(239,68,68,.12);
  border-color:#ef4444;
}

.onplix-action-delete svg{
  width:16px;
  height:16px;
  stroke:#b3b3b3;
  transition:.2s ease;
}

.onplix-action-delete:hover svg{
  stroke:#ef4444;
}

/* DELETE ICON PREMIUM LILA */
.onplix-action-delete::before{
  content:"";
  width:18px;
  height:18px;
  background:currentColor;

  mask:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='3 6 5 6 21 6'/>\
<path d='M19 6l-1 14H6L5 6'/>\
<path d='M10 11v6'/>\
<path d='M14 11v6'/>\
<path d='M9 6V4h6v2'/>\
</svg>") no-repeat center;

  -webkit-mask:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='3 6 5 6 21 6'/>\
<path d='M19 6l-1 14H6L5 6'/>\
<path d='M10 11v6'/>\
<path d='M14 11v6'/>\
<path d='M9 6V4h6v2'/>\
</svg>") no-repeat center;

  mask-size:contain;
  -webkit-mask-size:contain;

  background-color:#a855f7;
  opacity:.85;
  transition:.2s ease;
}

.onplix-action-delete:hover::before{
  background-color:#c084fc;
  opacity:1;
  transform:scale(1.1);
}


/* =========================================================
   ACCIONES
========================================================= */

.onplix-right .actions,
/* ?? Base igual para ambos */
.onplix-right .actions{
  display:grid;
  grid-template-columns:50px 32px 32px;

  align-items:center;
  justify-content:end;

  column-gap:12px;
}

.onplix-right .duration,
#onplix-recommended .duration{

  width:50px;
  text-align:right;

  font-family:'Roboto', sans-serif;
  font-size:12px;
  font-weight:400;
  color:#9ca3af;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  padding-right:10px;

}

.onplix-right .actions button{
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #b3b3b3 !important;
  font-size: 14px !important;
  cursor: pointer;
  opacity: .75;
  transition: .15s ease;
}

.onplix-right .actions button:hover{
  opacity: 1;
  color: #fff !important;
}


/* =========================================================
   ITEM ACTIVO
========================================================= */

.onplix-right .onplix-item.is-playing{
  background:linear-gradient(
    90deg,
    rgba(168,85,247,.18),
    rgba(168,85,247,.05)
  );

  box-shadow:
    inset 3px 0 0 #a855f7,
    0 4px 12px rgba(168,85,247,.15);

  backdrop-filter:blur(4px);
}

.onplix-right .onplix-item.is-playing,
#onplix-recommended .onplix-item.is-playing{
  transform:translateX(10px);
}

.onplix-right .onplix-item.is-playing .t,
.onplix-right .onplix-item.is-playing .duration,
#onplix-recommended .onplix-item.is-playing .t,
#onplix-recommended .onplix-item.is-playing .duration{
  color: #a855f7;
  font-weight: 600;
}

.onplix-right .onplix-item.is-playing:hover,
#onplix-recommended .onplix-item.is-playing:hover{
  background: rgba(168,85,247,.20);
  transform:translateX(10px);
}


/* =========================================================
   DRAG & DROP
========================================================= */

.onplix-right .onplix-item.dragging{
  opacity: .4;
}

.onplix-right .onplix-item::before,
.onplix-right .onplix-item::after{
  opacity: 0;
  transition: .15s ease;
}

.onplix-right .onplix-item.drag-over-top::before,
.onplix-right .onplix-item.drag-over-bottom::after{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  height: 3px;
  background: #a855f7;
  border-radius: 3px;
  opacity: 1;
}

.onplix-right .onplix-item.drag-over-top::before{
  top: -3px;
}

.onplix-right .onplix-item.drag-over-bottom::after{
  bottom: -3px;
}


/* =========================================================
   SCROLL PREMIUM GLOBAL ONPLIX (CLASE REUTILIZABLE)
========================================================= */

.onplix-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(168,85,247,.45) transparent;
}

/* WebKit */
.onplix-scroll::-webkit-scrollbar{
  width:3px;
  height:3px;
}

.onplix-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.onplix-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(124,58,237,.66), rgba(168,85,247,.74));
  border-radius:999px;
  opacity:.72;
  transition:.2s ease;
}

.onplix-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(192,132,252,.86), rgba(168,85,247,.9));
  box-shadow:0 0 5px rgba(168,85,247,.42);
  opacity:1;
}








/* =========================================================
   REPRODUCTOR ? BASE FLEX
========================================================= */

.onplix-app .onplix-player{
      font-family: 'Roboto', sans-serif;

    margin-top:0 !important;
  height:98px;
  position:relative;
bottom:auto;
  background:transparent !important;
  border:none !important;
  outline:none !important;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 36px;
  flex-shrink:0;

  position:relative;
  z-index:1;
}

/* =========================================================
   MARCO LATERAL LILA
========================================================= */

.onplix-app .onplix-player::before,
.onplix-app .onplix-player::after{
  content:"";
  position:absolute;
  top:10px;
  bottom:10px;
  width:35%;
  max-width:380px;
  border-radius:12px;
  pointer-events:none;
  z-index:0;
  will-change:opacity;
}

.onplix-app .onplix-player::before{
  left:10px;
  background:linear-gradient(
    to right,
    rgba(168,85,247,.16) 0%,
    rgba(168,85,247,.08) 10%,
    rgba(168,85,247,.04) 20%,
    rgba(168,85,247,.02) 30%,
    transparent 100%
  );
  border-left:6px solid #a855f7;
}

.onplix-app .onplix-player::after{
  right:10px;
  background:linear-gradient(
    to left,
    rgba(168,85,247,.16) 0%,
    rgba(168,85,247,.08) 10%,
    rgba(168,85,247,.04) 20%,
    rgba(168,85,247,.02) 30%,
    transparent 100%
  );
  border-right:6px solid #a855f7;
}

/* =========================================================
   LEFT ? CAR?TULA + INFO
========================================================= */

.onplix-app .onplix-p-left{
  width:320px;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.onplix-cover{
  width:67px;
  height:67px;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
  border:none;
  box-shadow:none;
  opacity:0;
  transform:scale(.9);
  transition:opacity .25s ease, transform .25s ease, width .25s ease;
}

.onplix-player.playing .onplix-cover{
  opacity:1;
  transform:scale(1);
}

#onplix-now-thumb{
  width:100%;
  height:100%;
}

.onplix-app .onplix-meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  min-width:0;
}

.onplix-app .onplix-title{
  font-size:14px;
  font-weight:500;
  letter-spacing:.2px;
  color:#ffffff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.2;
  max-height:2.4em;
}

.onplix-app .onplix-sub{
  font-size:12px;
  color:#9ca3af;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.onplix-player:not(.playing) .onplix-p-left{
  opacity:0;
  transform:scale(.9);
}

/* =========================================================
   CENTER ? CONTROLES
========================================================= */

.onplix-app .onplix-p-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.onplix-app .onplix-controls{
  display:flex;
  align-items:center;
  gap:24px;
}

/* =========================================================
   BOTONES GENERALES
========================================================= */

.onplix-player button{
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#b3b3b3;
  transition:.2s ease;
}

.onplix-player button:hover{
  transform:scale(1.08);
}

.onplix-player button svg{
  width:18px;
  height:18px;
}

/* =========================================================
   PREV / NEXT
========================================================= */

#onplix-prev,
#onplix-next{
  width:32px;
  height:32px;
}

#onplix-prev svg,
#onplix-next svg{
  width:20px;
  height:20px;
}

/* =========================================================
   PLAY PRINCIPAL
========================================================= */

.onplix-player .onplix-play{
  width:55px;
  height:55px;
  border-radius:50%;
  background:#ffffff;
  color:#000000;
}

.onplix-player .onplix-play svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

/* =========================================================
   SHUFFLE / REPEAT PREMIUM ACTIVE ANIMATION
========================================================= */

#onplix-shuffle,
#onplix-repeat{
  width:28px;
  height:28px;
  position:relative;
  color:#b3b3b3;
  transition:
    color .25s ease,
    transform .18s ease,
    filter .25s ease;
}

#onplix-shuffle:hover,
#onplix-repeat:hover{
  color:#ffffff;
  transform:scale(1.08);
}

#onplix-shuffle.active,
#onplix-repeat.active{
  color:#a855f7;
  filter:drop-shadow(0 0 6px rgba(168,85,247,.6));
  animation:onplixPulse .6s ease;
}

#onplix-shuffle.active::after,
#onplix-repeat.active::after{
  display:none;
  content:none;
}

@keyframes onplixPulse{
  0%{
    transform:scale(1);
    filter:drop-shadow(0 0 0 rgba(168,85,247,0));
  }
  50%{
    transform:scale(1.15);
    filter:drop-shadow(0 0 12px rgba(168,85,247,.9));
  }
  100%{
    transform:scale(1);
    filter:drop-shadow(0 0 6px rgba(168,85,247,.6));
  }
}

/* =========================================================
   PROGRESS BAR PREMIUM ? SIN THUMB
========================================================= */

.onplix-app .onplix-progress{
  width:100%;
  max-width:520px;
  display:flex;
  align-items:center;
  gap:12px;
}

.onplix-app .onplix-time{
  font-size:12px;
  font-weight:500;
  letter-spacing:.3px;
  color:#b3b3b3;
  width:36px;
  text-align:center;
}

#onplix-seek{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  height:4px;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  transition:background .2s ease;

  background:linear-gradient(
    to right,
    #a855f7 0%,
    #9333ea var(--seek-percent,0%),
    #2a2a2a var(--seek-percent,0%),
    #2a2a2a 100%
  );
}

#onplix-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:0;
  height:0;
  background:transparent;
  border:none;
}

#onplix-seek::-moz-range-thumb{
  width:0;
  height:0;
  background:transparent;
  border:none;
}

/* =========================================================
   RIGHT ? VOLUME CLEAN PREMIUM
========================================================= */

.onplix-app .onplix-p-right{
  width:360px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
}

.onplix-volume-block{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  height:44px;
  overflow:visible;
}

#onplix-vol{
  position:relative;
  top:0;
  align-self:center;
  -webkit-appearance:none;
  appearance:none;
  width:130px;
  height:4px;
  border-radius:10px;
  cursor:pointer;
  outline:none;

  background:linear-gradient(
    to right,
    #a855f7 0%,
    #9333ea var(--vol-percent,100%),
    #2a2a2a var(--vol-percent,100%),
    #2a2a2a 100%
  );
}

#onplix-mute{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

#onplix-mute svg{
  width:26px;
  height:26px;
  overflow:visible;
}

#onplix-vol::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:0;
  height:0;
  background:transparent;
  border:none;
}

#onplix-vol::-moz-range-thumb{
  width:0;
  height:0;
  background:transparent;
  border:none;
}


/* =========================================================
   PERFIL
========================================================= */

.onplix-profile-screen{

  display:none;

  padding:20px;
  width:100%;

}

.onplix-profile-woocommerce{
  width:100%;
  padding:0;
  background:transparent;
  border-radius:0;
}

.onplix-profile-woocommerce .woocommerce{
  width:100%;
}

.onplix-profile-woocommerce .woocommerce-MyAccount-navigation{
  margin-bottom:20px;
}

.onplix-profile-woocommerce .woocommerce-MyAccount-navigation ul{
  margin:0;
  padding:0;
  list-style:none;
}

.onplix-profile-woocommerce .woocommerce-MyAccount-navigation-link{
  margin:0 0 10px;
}

.onplix-profile-woocommerce .woocommerce-MyAccount-navigation-link a{
  display:block;
}

.onplix-profile-woocommerce .woocommerce form .form-row input.input-text,
.onplix-profile-woocommerce .woocommerce form .form-row textarea,
.onplix-profile-woocommerce .woocommerce form .password-input,
.onplix-profile-woocommerce .woocommerce-EditAccountForm input,
.onplix-profile-woocommerce .woocommerce-address-fields input,
.onplix-profile-woocommerce .woocommerce-address-fields select{
  color:inherit;
}

.onplix-profile-woocommerce .woocommerce table.shop_table{
  width:100%;
}

.onplix-profile-avatar{

  font-size:36px;

}

.onplix-profile-name{

  font-size:18px;
  font-weight:600;

}

.onplix-profile-sub{

  font-size:13px;

  color:#9ca3af;

  text-align:center;

}

.onplix-profile-hub{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-family:'Roboto', sans-serif;
  color:#ffffff;
}

.onplix-profile-hero{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:
    linear-gradient(135deg, rgba(168,85,247,.16), rgba(255,255,255,.035)),
    rgba(12,12,16,.86);
  box-shadow:0 16px 36px rgba(0,0,0,.24);
}

.onplix-profile-edit-menu{
  position:absolute;
  right:12px;
  bottom:10px;
  z-index:8;
}

.onplix-profile-edit-toggle{
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#ffffff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.onplix-profile-edit-toggle svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s ease;
}

.onplix-profile-edit-menu.is-open .onplix-profile-edit-toggle svg{
  transform:rotate(180deg);
}

.onplix-profile-edit-toggle:hover{
  background:rgba(168,85,247,.16);
  border-color:rgba(192,132,252,.34);
  transform:translateY(-1px);
}

.onplix-profile-edit-dropdown{
  position:absolute;
  top:32px;
  right:0;
  min-width:104px;
  display:none;
  padding:6px;
  background:rgba(12,12,18,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  box-shadow:0 16px 34px rgba(0,0,0,.38);
}

.onplix-profile-edit-menu.is-open .onplix-profile-edit-dropdown{
  display:block;
}

.onplix-profile-edit-dropdown button{
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:8px;
  color:#ffffff;
  background:transparent;
  font-size:12px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}

.onplix-profile-edit-dropdown button:hover{
  background:rgba(168,85,247,.16);
}

.onplix-profile-avatar-badge{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  color:#ffffff;
  font-size:21px;
  font-weight:800;
  background:linear-gradient(145deg, #a855f7, #6d28d9);
  box-shadow:0 12px 24px rgba(168,85,247,.28);
}

.onplix-profile-identity{
  min-width:0;
}

.onplix-library-searchbar{
  display:none !important;
}

.onplix-profile-eyebrow{
  margin-bottom:3px;
  color:#c4b5fd;
  font-size:11px;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
}

.onplix-profile-title{
  color:#ffffff;
  font-size:17px;
  font-weight:800;
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.onplix-profile-subtitle{
  margin-top:4px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:400;
  line-height:1.35;
}

.onplix-profile-status{
  align-self:start;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#d8b4fe;
  font-size:10px;
  font-weight:900;
  line-height:1;
  background:rgba(255,255,255,.06);
}

.onplix-profile-status.is-premium{
  color:#ffffff;
  border-color:rgba(192,132,252,.46);
  background:linear-gradient(135deg, rgba(168,85,247,.92), rgba(124,58,237,.76));
}

.onplix-profile-auth-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:4px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.045);
}

.onplix-profile-btn,
.onplix-plan-action,
.onplix-profile-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  background:rgba(255,255,255,.055);
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.onplix-profile-btn.primary,
.onplix-profile-btn.is-active,
.onplix-plan-action{
  border-color:rgba(168,85,247,.62);
  background:linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow:0 12px 26px rgba(168,85,247,.22);
}

.onplix-profile-btn:active,
.onplix-plan-action:active,
.onplix-profile-link:active{
  transform:scale(.98);
}

.onplix-profile-session-card,
.onplix-profile-section,
.onplix-code-card,
.onplix-profile-auth-panel,
.onplix-profile-woocommerce{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(13,13,18,.82);
}

.onplix-profile-session-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  padding:13px;
}

.onplix-profile-card-label{
  color:#c4b5fd;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.onplix-profile-card-value{
  margin-top:3px;
  color:#ffffff;
  font-size:15px;
  font-weight:800;
}

.onplix-profile-card-meta{
  margin-top:4px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:600;
  line-height:1.35;
}

.onplix-profile-time-left{
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.35;
  text-align:right;
}

.onplix-profile-session-card .onplix-profile-link{
  grid-column:1 / -1;
  min-height:38px;
  color:#d8b4fe;
}

.onplix-account-session-modal{
  display:grid;
  gap:10px;
}

.onplix-account-session-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 11px;
  border:1px solid rgba(192,132,252,.24);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(8,145,178,.06));
}

.onplix-account-session-kicker{
  color:#f5d0fe;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}

.onplix-account-session-head strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:25px;
  border:1px solid rgba(216,180,254,.42);
  border-radius:999px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  background:rgba(124,58,237,.20);
}

.onplix-account-session-modal p{
  margin:0;
  color:#f4efff;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.onplix-account-session-limit{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  gap:6px;
  padding:6px 9px;
  border:1px solid rgba(216,180,254,.18);
  border-radius:999px;
  color:rgba(255,255,255,.72);
  font-size:10.5px;
  font-weight:750;
  background:transparent;
}

.onplix-account-session-limit strong{
  color:#f5d0fe;
  font-size:11px;
  font-weight:900;
}

.onplix-account-session-list{
  display:grid;
  gap:8px;
  margin-top:1px;
}

.onplix-account-session-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:52px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.onplix-account-session-row.is-current{
  border-color:rgba(216,180,254,.42);
  background:linear-gradient(135deg,rgba(168,85,247,.13),rgba(255,255,255,.025));
}

.onplix-account-session-copy{
  min-width:0;
}

.onplix-account-session-copy strong,
.onplix-account-session-copy small,
.onplix-account-session-copy em{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.onplix-account-session-copy strong{
  color:#fff;
  font-size:12.5px;
  font-weight:850;
}

.onplix-account-session-copy small{
  margin-top:2px;
  color:rgba(255,255,255,.62);
  font-size:10.5px;
  font-weight:650;
}

.onplix-account-session-copy em{
  margin-top:3px;
  color:#f0abfc;
  font-size:9.5px;
  font-style:normal;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.onplix-account-session-close,
.onplix-account-session-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  border-radius:9px;
  padding:0 12px;
  font-size:10.5px;
  font-weight:850;
  white-space:nowrap;
}

.onplix-account-session-close{
  border:1px solid rgba(216,180,254,.50);
  color:#fff;
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  box-shadow:0 8px 16px rgba(124,58,237,.20);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.onplix-account-session-close:hover{
  transform:translateY(-1px);
  border-color:rgba(245,208,254,.90);
  box-shadow:0 12px 20px rgba(124,58,237,.28);
}

.onplix-account-session-close:disabled{
  opacity:.72;
  cursor:wait;
  transform:none;
}

.onplix-account-session-badge{
  border:1px solid rgba(216,180,254,.36);
  color:#f5d0fe;
  background:rgba(168,85,247,.16);
}

@media (max-width:520px){
  .onplix-account-session-row{
    grid-template-columns:minmax(0,1fr);
    gap:7px;
  }
  .onplix-account-session-close,
  .onplix-account-session-badge{
    width:max-content;
  }
}

.onplix-profile-support-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid rgba(192,132,252,.24);
  border-radius:16px;
  color:#ffffff;
  text-decoration:none;
  background:
    linear-gradient(135deg, rgba(168,85,247,.16), rgba(192,132,252,.055)),
    rgba(13,13,18,.82);
  box-shadow:0 16px 36px rgba(0,0,0,.22);
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}

.onplix-profile-support-card:hover,
.onplix-profile-support-card:focus-visible{
  border-color:rgba(192,132,252,.46);
  background:
    linear-gradient(135deg, rgba(168,85,247,.22), rgba(192,132,252,.085)),
    rgba(13,13,18,.92);
  transform:translateY(-1px);
  outline:none;
}

.onplix-profile-support-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#c084fc;
  background:rgba(168,85,247,.13);
  box-shadow:inset 0 0 0 1px rgba(192,132,252,.24), 0 10px 22px rgba(168,85,247,.12);
}

.onplix-profile-support-icon svg{
  width:26px;
  height:26px;
  display:block;
  fill:currentColor;
  stroke:none;
}

.onplix-profile-support-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.onplix-profile-support-copy span{
  color:#c4b5fd;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.onplix-profile-support-copy strong{
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.onplix-profile-support-action{
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid rgba(192,132,252,.36);
  border-radius:999px;
  color:#f3e8ff;
  font-size:12px;
  font-weight:900;
  background:rgba(168,85,247,.16);
}

.onplix-profile-section,
.onplix-code-card{
  padding:14px;
}

.onplix-profile-section-title{
  margin-bottom:11px;
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  line-height:1.1;
}

.onplix-plan-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.onplix-plan-card{
  position:relative;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}

.onplix-plan-card.featured{
  border-color:rgba(168,85,247,.48);
  background:
    linear-gradient(135deg, rgba(168,85,247,.16), rgba(255,255,255,.04)),
    rgba(255,255,255,.045);
}

.onplix-plan-tag{
  width:max-content;
  margin-bottom:8px;
  padding:5px 8px;
  border-radius:999px;
  color:#ffffff;
  font-size:10px;
  font-weight:900;
  line-height:1;
  background:rgba(168,85,247,.72);
}

.onplix-plan-name{
  color:#ffffff;
  font-size:16px;
  font-weight:900;
  line-height:1.1;
}

.onplix-plan-copy{
  margin-top:6px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.42;
}

.onplix-plan-action{
  margin-top:12px;
  min-height:38px;
  width:100%;
  cursor:pointer;
}

.onplix-install-section{
  margin-top:0;
}

.onplix-install-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.onplix-install-btn{
  min-width:0;
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  color:#ffffff;
  font:800 11px/1 'Roboto', sans-serif;
  background:rgba(255,255,255,.055);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}

.onplix-install-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(192,132,252,.42);
  background:rgba(168,85,247,.14);
}

.onplix-install-btn svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.onplix-install-btn[data-onplix-install-app="ios"] svg{
  fill:currentColor;
  stroke:none;
}

.onplix-install-btn span{
  overflow:hidden;
  max-width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.onplix-plans-modal{
  position:fixed;
  inset:0;
  z-index:100010;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  font-family:'Roboto', sans-serif;
}

.onplix-plans-modal.is-open{
  display:flex;
}

.onplix-plans-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,3,7,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.onplix-plans-card{
  position:relative;
  width:min(430px, 94vw);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  color:#ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,85,247,.22), transparent 36%),
    rgba(12,12,16,.96);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}

.onplix-plans-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#ffffff;
  font-size:24px;
  line-height:1;
  background:rgba(255,255,255,.07);
  cursor:pointer;
}

.onplix-plans-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px 52px 12px 18px;
}

.onplix-plans-kicker{
  margin-bottom:4px;
  color:#c4b5fd;
  font-size:11px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
}

.onplix-plans-title{
  color:#ffffff;
  font-size:22px;
  font-weight:900;
  line-height:1.1;
}

.onplix-plans-price-note{
  flex:0 0 auto;
  margin-top:3px;
  padding:6px 8px;
  border-radius:999px;
  color:#ffffff;
  font-size:10px;
  font-weight:900;
  background:rgba(168,85,247,.18);
  border:1px solid rgba(192,132,252,.22);
}

.onplix-plans-slider{
  overflow:hidden;
  padding:0 18px 14px;
}

.onplix-plans-track{
  display:flex;
  gap:14px;
  transition:transform .24s ease;
  will-change:transform;
}

.onplix-plan-slide{
  flex:0 0 100%;
  min-width:100%;
  box-sizing:border-box;
  padding:16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(168,85,247,.16), rgba(255,255,255,.045)),
    rgba(255,255,255,.045);
}

.onplix-plan-slide-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:24px;
  color:#ffffff;
  font-size:15px;
  font-weight:900;
}

.onplix-plan-slide-top strong{
  flex:0 0 auto;
  padding:6px 8px;
  border-radius:999px;
  color:#ffffff;
  font-size:10px;
  font-weight:900;
  background:rgba(168,85,247,.76);
}

.onplix-plan-slide-term{
  margin-top:4px;
  color:#c4b5fd;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}

.onplix-plan-slide-price{
  margin-top:10px;
  color:#ffffff;
  font-size:36px;
  font-weight:900;
  line-height:1;
}

.onplix-plan-slide-price-note{
  margin-top:5px;
  color:#c4b5fd;
  font-size:11px;
  font-weight:900;
  line-height:1.2;
  text-transform:uppercase;
}

.onplix-plan-slide-copy{
  min-height:42px;
  margin-top:9px;
  color:rgba(255,255,255,.68);
  font-size:13px;
  line-height:1.42;
}

.onplix-plan-term-picker{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}

.onplix-plan-term-picker button{
  min-width:0;
  min-height:36px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  color:rgba(255,255,255,.78);
  font-family:var(--onplix-font-family);
  font-size:12px;
  font-weight:900;
  line-height:1;
  background:rgba(255,255,255,.055);
  cursor:pointer;
}

.onplix-plan-term-picker button.is-selected{
  color:#ffffff;
  border-color:rgba(192,132,252,.58);
  background:linear-gradient(135deg, rgba(168,85,247,.88), rgba(124,58,237,.74));
  box-shadow:0 10px 20px rgba(168,85,247,.18);
}

.onplix-plan-benefits{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}

.onplix-plan-benefits li{
  position:relative;
  min-height:18px;
  padding-left:20px;
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:700;
  line-height:1.32;
}

.onplix-plan-benefits li::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg, #a855f7, #c084fc);
  box-shadow:0 0 0 3px rgba(168,85,247,.14);
}

.onplix-plan-buy{
  width:100%;
  min-height:44px;
  margin-top:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  background:linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow:0 14px 28px rgba(168,85,247,.24);
}

.onplix-plan-buy.is-loading{
  pointer-events:none;
  opacity:.76;
}

.onplix-plan-buy.is-loading::after{
  content:"";
  width:15px;
  height:15px;
  margin-left:9px;
  border:2px solid rgba(255,255,255,.36);
  border-top-color:#ffffff;
  border-radius:999px;
  animation:onplixSpin .72s linear infinite;
}

.onplix-plans-controls{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:12px;
  padding:0 18px 18px;
}

.onplix-plans-controls button{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#ffffff;
  background:rgba(255,255,255,.07);
  cursor:pointer;
}

.onplix-plans-controls svg{
  width:20px;
  height:20px;
}

.onplix-plans-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.onplix-plans-dots button{
  width:7px;
  height:7px;
  min-width:7px;
  min-height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.28);
}

.onplix-plans-dots button.is-active{
  width:20px;
  background:#c084fc;
}

body.onplix-checkout-modal-open{
  overflow:hidden !important;
}

.onplix-checkout-modal{
  position:fixed;
  inset:0;
  z-index:100020;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  font-family:var(--onplix-font-family);
}

.onplix-checkout-modal.is-open{
  display:flex;
}

.onplix-checkout-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,3,7,.76);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.onplix-checkout-card{
  position:relative;
  width:min(520px, 94vw);
  max-height:min(720px, 92vh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  color:#ffffff;
  background:
    radial-gradient(circle at 16% 0%, rgba(168,85,247,.24), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(34,211,238,.14), transparent 28%),
    rgba(10,10,14,.97);
  box-shadow:0 28px 86px rgba(0,0,0,.58);
}

.onplix-checkout-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#ffffff;
  font-size:25px;
  line-height:1;
  background:rgba(255,255,255,.08);
  cursor:pointer;
}

.onplix-checkout-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 58px 10px 18px;
}

.onplix-checkout-kicker{
  margin-bottom:5px;
  color:#c4b5fd;
  font-size:11px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
}

.onplix-checkout-title{
  color:#ffffff;
  font-size:22px;
  font-weight:900;
  line-height:1.08;
}

.onplix-checkout-summary-shell{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:center;
  gap:8px;
  margin:0 18px 12px;
}

.onplix-checkout-summary{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:78px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:
    radial-gradient(circle at 92% 8%, rgba(34,211,238,.12), transparent 32%),
    radial-gradient(circle at 8% 95%, rgba(168,85,247,.12), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.onplix-checkout-plan-arrow{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#ffffff;
  background:rgba(255,255,255,.07);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.onplix-checkout-plan-arrow:hover{
  transform:translateY(-1px);
  border-color:rgba(168,85,247,.42);
  background:rgba(168,85,247,.18);
}

.onplix-checkout-plan-arrow svg{
  width:16px;
  height:16px;
}

.onplix-checkout-plan-copy{
  display:grid;
  gap:3px;
  color:rgba(255,255,255,.76);
  font-size:13px;
  font-weight:800;
}

.onplix-checkout-plan-label{
  color:rgba(255,255,255,.56);
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.onplix-checkout-plan-copy em{
  color:#ffffff;
  font-size:15px;
  font-style:normal;
  font-weight:900;
  line-height:1.1;
}

.onplix-checkout-term-picker{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:3px;
}

.onplix-checkout-term-picker button{
  min-height:24px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:rgba(255,255,255,.68);
  font-family:var(--onplix-font-family);
  font-size:10px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  background:rgba(255,255,255,.055);
  cursor:pointer;
}

.onplix-checkout-term-picker button.is-selected{
  color:#ffffff;
  border-color:rgba(192,132,252,.56);
  background:linear-gradient(135deg, rgba(168,85,247,.88), rgba(124,58,237,.72));
  box-shadow:0 8px 16px rgba(168,85,247,.16);
}

.onplix-checkout-session-badge{
  width:max-content;
  max-width:100%;
  margin-top:2px;
  padding:5px 9px;
  border:1px solid rgba(192,132,252,.32);
  border-radius:999px;
  color:#ffffff;
  font-size:10px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(34,211,238,.10));
  box-shadow:0 8px 18px rgba(168,85,247,.14);
}

.onplix-checkout-plan-copy small{
  color:rgba(255,255,255,.56);
  font-size:11px;
  font-weight:800;
}

.onplix-checkout-price-box{
  display:grid;
  justify-items:end;
  gap:1px;
  min-width:108px;
}

.onplix-checkout-price-box small{
  color:rgba(255,255,255,.5);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.onplix-checkout-price-box del{
  color:rgba(255,255,255,.46);
  font-size:11px;
  font-weight:800;
}

.onplix-checkout-price-box strong{
  color:#ffffff;
  font-size:19px;
  font-weight:900;
}

.onplix-checkout-price-skeleton{
  width:82px;
  height:20px;
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08));
  background-size:180% 100%;
  animation:onplixPricePulse 1.05s ease-in-out infinite;
}

.onplix-checkout-price-box b{
  padding:3px 8px;
  border-radius:999px;
  color:#ffffff;
  font-size:10px;
  font-weight:900;
  background:linear-gradient(135deg,#a855f7,#22d3ee);
}

.onplix-checkout-summary.is-sale{
  border-color:rgba(168,85,247,.24);
  background:
    radial-gradient(circle at 92% 8%, rgba(34,211,238,.14), transparent 34%),
    radial-gradient(circle at 8% 95%, rgba(168,85,247,.16), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.078), rgba(255,255,255,.035));
}

@keyframes onplixPricePulse{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}

.onplix-checkout-panel,
.onplix-checkout-frame-wrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  margin:0 14px 14px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(168,85,247,.72) transparent;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(5,5,8,.88);
}

.onplix-checkout-panel::-webkit-scrollbar{
  width:5px;
}

.onplix-checkout-panel::-webkit-scrollbar-track{
  border-radius:999px;
  background:transparent;
}

.onplix-checkout-panel::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:linear-gradient(180deg,#a855f7,#22d3ee);
  box-shadow:0 0 12px rgba(168,85,247,.35);
}

.onplix-checkout-panel{
  padding:14px;
}

.onplix-checkout-frame{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#050508;
}

.onplix-checkout-form{
  display:grid;
  width:min(100%,390px);
  margin:0 auto;
  gap:13px;
}

.onplix-checkout-form.is-hidden{
  display:none;
}

.onplix-checkout-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.onplix-checkout-grid label{
  display:grid;
  gap:6px;
}

.onplix-checkout-grid span,
.onplix-checkout-section-title{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}

.onplix-checkout-section-title{
  color:#ffffff;
  text-transform:uppercase;
}

.onplix-checkout-modal:not(.is-guest) .onplix-checkout-guest-title{
  display:none;
}

.onplix-checkout-grid input{
  width:100%;
  height:40px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#ffffff;
  background:rgba(255,255,255,.065);
  padding:0 13px;
  font-size:13px;
  box-sizing:border-box;
  outline:0;
}

.onplix-checkout-password{
  position:relative;
  display:block;
}

.onplix-checkout-password input{
  padding-right:44px;
}

.onplix-checkout-password button{
  position:absolute;
  top:50%;
  right:7px;
  width:30px;
  height:30px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.045);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}

.onplix-checkout-password button svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.onplix-checkout-password button.is-visible{
  color:#ffffff;
  border-color:rgba(168,85,247,.34);
  background:rgba(168,85,247,.18);
}

.onplix-checkout-grid input:focus{
  border-color:rgba(168,85,247,.72);
  box-shadow:0 0 0 3px rgba(168,85,247,.16);
}

.onplix-checkout-modal:not(.is-guest) .onplix-checkout-guest-field{
  display:none;
}

.onplix-checkout-modal:not(.is-guest):not(.needs-customer-details) .onplix-checkout-grid{
  display:none;
}

.onplix-checkout-modal.needs-customer-details .onplix-checkout-grid{
  display:grid;
}

.onplix-checkout-modal.needs-customer-details .onplix-checkout-guest-title{
  display:block;
}

.onplix-checkout-customer{
  display:none;
  gap:8px;
}

.onplix-checkout-customer.is-visible{
  display:grid;
}

.onplix-checkout-customer-card{
  display:grid;
  gap:4px;
  padding:13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
}

.onplix-checkout-customer-card strong{
  color:#ffffff;
  font-size:15px;
  font-weight:900;
  line-height:1.15;
}

.onplix-checkout-customer-card span{
  color:rgba(255,255,255,.58);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.onplix-checkout-payments{
  display:grid;
  width:min(100%,430px);
  margin:0 auto;
  gap:10px;
}

#onplix-checkout-payments{
  display:grid;
  gap:9px;
}

.onplix-checkout-payment-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  cursor:pointer;
}

.onplix-checkout-payment-option input{
  margin-top:3px;
  accent-color:#a855f7;
}

.onplix-checkout-payment-option span{
  display:grid;
  gap:4px;
}

.onplix-checkout-payment-option strong{
  color:#ffffff;
  font-size:13px;
  font-weight:900;
}

.onplix-checkout-payment-option em,
.onplix-checkout-empty-payment{
  color:rgba(255,255,255,.58);
  font-size:12px;
  font-style:normal;
  line-height:1.4;
}

.onplix-paypal-button-shell{
  width:min(100%,430px);
  margin:2px auto 0;
}

.onplix-paypal-button-shell[hidden]{
  display:none!important;
}
.onplix-checkout-error{
  display:none;
  padding:10px 12px;
  border:1px solid rgba(248,113,113,.28);
  border-radius:12px;
  color:#fecaca;
  background:rgba(127,29,29,.22);
  font-size:12px;
  font-weight:800;
}

.onplix-checkout-error.is-visible{
  display:block;
}

.onplix-checkout-submit,
.onplix-order-received button{
  justify-self:center;
  width:min(100%,260px);
  min-height:44px;
  border:0;
  border-radius:999px;
  color:#ffffff;
  font-family:var(--onplix-font-family);
  font-size:var(--onplix-body-size);
  font-weight:800;
  letter-spacing:0;
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  box-shadow:0 14px 30px rgba(168,85,247,.28);
  cursor:pointer;
}

.onplix-checkout-result{
  display:none;
}

.onplix-checkout-result.is-visible{
  display:block;
}

.onplix-order-received{
  display:grid;
  justify-items:center;
  gap:14px;
  padding:22px 10px;
  text-align:center;
}

.onplix-order-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#ffffff;
  font-size:30px;
  font-weight:900;
  background:linear-gradient(135deg,#22c55e,#14b8a6);
  box-shadow:0 14px 30px rgba(34,197,94,.24);
}

.onplix-order-received.is-pending .onplix-order-mark{
  background:linear-gradient(135deg,#f59e0b,#a855f7);
}

.onplix-order-received.needs-redirect .onplix-order-mark{
  background:linear-gradient(135deg,#f59e0b,#a855f7);
  box-shadow:0 14px 30px rgba(245,158,11,.22);
}

.onplix-order-received h3{
  margin:0;
  color:#ffffff;
  font-size:24px;
  font-weight:900;
}

.onplix-order-received p{
  max-width:460px;
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}

.onplix-order-received dl{
  width:min(100%,520px);
  display:grid;
  gap:0;
  margin:4px 0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.035);
}

.onplix-order-received dl div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 13px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.onplix-order-received dl div:last-child{
  border-bottom:0;
}

.onplix-order-received dt,
.onplix-order-received dd{
  margin:0;
  color:#ffffff;
  font-size:13px;
  font-weight:900;
}

.onplix-order-received dt{
  color:rgba(255,255,255,.56);
}

.onplix-order-received dl div.is-alert-state{
  background:rgba(245,158,11,.12);
}

.onplix-order-received dl div.is-alert-state dt,
.onplix-order-received dl div.is-alert-state dd{
  color:#fbbf24;
}

.onplix-order-pay-link,
.onplix-order-received button{
  min-width:180px;
}

.onplix-order-pay-link{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:999px;
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  box-shadow:0 14px 30px rgba(168,85,247,.28);
}

.onplix-order-pay-link.needs-attention{
  animation:onplixPulseGlow 1.15s ease-in-out infinite;
}

.onplix-order-received button.is-secondary-finish{
  width:auto;
  min-width:170px;
  min-height:38px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  background:rgba(255,255,255,.08);
  box-shadow:none;
  border:1px solid rgba(255,255,255,.12);
}

@keyframes onplixPulseGlow{
  0%,100%{box-shadow:0 14px 30px rgba(168,85,247,.28)}
  50%{box-shadow:0 0 0 4px rgba(168,85,247,.2),0 18px 38px rgba(168,85,247,.36)}
}

.onplix-checkout-actions{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 18px 16px;
}

.onplix-checkout-actions span{
  color:rgba(255,255,255,.58);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.onplix-checkout-actions button{
  flex:0 0 auto;
  min-width:118px;
  min-height:40px;
  border:0;
  border-radius:999px;
  color:#ffffff;
  font-size:13px;
  font-weight:900;
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  box-shadow:0 12px 28px rgba(168,85,247,.26);
  cursor:pointer;
  opacity:.72;
  display:none;
}

.onplix-checkout-modal.is-complete .onplix-checkout-actions span{
  color:#ffffff;
}

.onplix-checkout-modal.is-complete .onplix-checkout-actions button{
  opacity:1;
  display:block;
}

.onplix-checkout-loader{
  position:absolute;
  inset:0;
  z-index:3;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  color:#ffffff;
  background:
    radial-gradient(circle at 50% 30%, rgba(168,85,247,.2), transparent 34%),
    rgba(5,5,8,.92);
}

.onplix-checkout-modal.is-loading .onplix-checkout-loader{
  display:flex;
}

.onplix-checkout-loader span{
  width:42px;
  height:42px;
  border:3px solid rgba(255,255,255,.16);
  border-top-color:#a855f7;
  border-radius:999px;
  animation:onplixSpin .76s linear infinite;
}

.onplix-checkout-loader strong{
  font-size:13px;
  font-weight:900;
  color:rgba(255,255,255,.82);
}

@media (max-width:760px){
  body.onplix-checkout-modal-open .onplix-mobile-nav{
    display:none !important;
  }

  .onplix-checkout-modal{
    align-items:center;
    padding:12px;
    z-index:1000002;
  }

  .onplix-checkout-card{
    width:min(100%, 430px);
    height:auto;
    max-height:calc(100dvh - 24px);
    border-radius:22px;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 24px 70px rgba(0,0,0,.68);
  }

  .onplix-checkout-head{
    padding:18px 58px 10px 16px;
  }

  .onplix-checkout-title{
    font-size:20px;
  }

  .onplix-checkout-summary-shell{
    margin:0 12px 12px;
    grid-template-columns:30px minmax(0,1fr) 30px;
  }

  .onplix-checkout-summary{
    grid-template-columns:1fr;
    align-items:start;
    border-radius:16px;
  }

  .onplix-checkout-price-box{
    justify-items:start;
    min-width:0;
  }

  .onplix-checkout-panel,
  .onplix-checkout-frame-wrap{
    margin:0 12px 12px;
    max-height:calc(100dvh - 258px);
    border-radius:16px;
    border:1px solid rgba(255,255,255,.1);
  }

  .onplix-checkout-panel{
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }

  .onplix-checkout-submit{
    margin-bottom:env(safe-area-inset-bottom);
  }

  .onplix-checkout-actions{
    padding:0 12px 12px;
    align-items:stretch;
    flex-direction:column;
  }

  .onplix-checkout-actions button{
    width:100%;
  }

  .onplix-checkout-grid{
    grid-template-columns:1fr;
  }
}

.onplix-code-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}

.onplix-code-row input{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  outline:none;
  color:#ffffff;
  font:600 13px/1 'Roboto', sans-serif;
  letter-spacing:0;
  background:rgba(255,255,255,.06);
}

body:not(.logged-in) .onplix-code-card{
  display:none !important;
}

.onplix-code-row input::placeholder{
  color:rgba(255,255,255,.46);
}

.onplix-code-row input:focus{
  border-color:rgba(192,132,252,.72);
  box-shadow:0 0 0 3px rgba(168,85,247,.14);
}

.onplix-code-row button{
  height:42px;
  padding:0 14px;
  border:0;
  border-radius:12px;
  color:#ffffff;
  font:800 13px/1 'Roboto', sans-serif;
  background:linear-gradient(135deg, #a855f7, #7c3aed);
  cursor:pointer;
}

.onplix-code-help{
  margin-top:8px;
  color:rgba(255,255,255,.58);
  font-size:12px;
  line-height:1.35;
}

.onplix-profile-woocommerce{
  padding:14px;
}

.onplix-profile-auth-panel{
  padding:14px;
}

.onplix-profile-auth-panel:not(.is-login-active) .onplix-profile-login-form,
.onplix-profile-auth-panel:not(.is-register-active) .onplix-profile-register-form,
.onplix-profile-auth-panel:not(.is-lost-active) .onplix-profile-lost-form{
  display:none !important;
}

.onplix-profile-auth-message{
  display:none;
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid rgba(192,132,252,.32);
  border-radius:12px;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  background:rgba(168,85,247,.12);
}

.onplix-profile-auth-message.is-visible{
  display:block;
}

.onplix-profile-auth-message.is-error{
  border-color:rgba(248,113,113,.38);
  background:rgba(248,113,113,.12);
}

.onplix-profile-form{
  display:flex;
  flex-direction:column;
  gap:11px;
  font-family:'Roboto', sans-serif;
}

.onplix-profile-form-title{
  margin-bottom:2px;
  color:#ffffff;
  font-size:18px;
  font-weight:900;
  line-height:1.15;
}

.onplix-profile-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.onplix-profile-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:rgba(255,255,255,.74);
  font-size:12px;
  font-weight:800;
  line-height:1.25;
}

.onplix-profile-form input,
.onplix-profile-form select{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  outline:none;
  color:#ffffff;
  font:600 13px/1 'Roboto', sans-serif;
  letter-spacing:0;
  background:rgba(255,255,255,.06);
  box-shadow:none;
}

.onplix-profile-form select option{
  color:#111827;
}

.onplix-phone-country-field{
  display:grid;
  grid-template-columns:34px minmax(58px,auto) 1fr;
  align-items:stretch;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.055);
}

.onplix-phone-country-flag{
  min-height:40px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 16px;
  background-color:rgba(168,85,247,.14);
  border-right:1px solid rgba(255,255,255,.1);
}

.onplix-phone-country-field select{
  min-height:40px;
  width:100%;
  border:0!important;
  border-right:1px solid rgba(255,255,255,.1)!important;
  border-radius:0!important;
  background:rgba(168,85,247,.14)!important;
  color:#fff!important;
  font-weight:700;
  padding:0 8px!important;
}

.onplix-phone-country-field input[type=tel]{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

.onplix-phone-country-field:focus-within{
  border-color:rgba(192,132,252,.72);
  box-shadow:0 0 0 3px rgba(168,85,247,.14);
}

.onplix-profile-form input:focus,
.onplix-profile-form select:focus{
  border-color:rgba(192,132,252,.72);
  box-shadow:0 0 0 3px rgba(168,85,247,.14);
}

.onplix-profile-phone-row{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:8px;
}

.onplix-profile-check{
  flex-direction:row !important;
  align-items:center;
  gap:8px !important;
  margin:1px 0 2px;
  color:rgba(255,255,255,.68) !important;
  font-size:12px !important;
  font-weight:700 !important;
}

.onplix-profile-check input{
  width:16px;
  height:16px;
  min-width:16px;
  padding:0;
  accent-color:#a855f7;
}

.onplix-profile-privacy-note{
  margin:-2px 0 0;
  color:rgba(255,255,255,.62);
  font-family:var(--onplix-font-family);
  font-size:11.5px;
  font-weight:600;
  line-height:1.45;
  text-align:center;
}

.onplix-profile-privacy-note a{
  color:#c084fc !important;
  font-family:var(--onplix-font-family);
  font-weight:800;
  text-decoration:none;
}

.onplix-profile-privacy-note a:hover{
  color:#e9d5ff;
  text-decoration:underline;
}

.onplix-profile-form button{
  width:100%;
  min-height:42px;
  border:0;
  border-radius:12px;
  color:#ffffff;
  font:800 13px/1 'Roboto', sans-serif;
  background:linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow:0 12px 26px rgba(168,85,247,.22);
  cursor:pointer;
}

.onplix-profile-social-slot{
  width:100%;
  min-height:44px;
  margin-top:4px;
}

.onplix-google-auth-button{
  width:100%;
  min-height:46px;
  padding:0 14px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid rgba(168,85,247,.35) !important;
  border-radius:14px;
  color:#26143d !important;
  text-decoration:none !important;
  font:900 13px/1 'Roboto', sans-serif;
  letter-spacing:0;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,242,255,.96)) !important;
  box-shadow:0 14px 30px rgba(18,8,33,.18), inset 0 1px 0 rgba(255,255,255,.82);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.onplix-google-auth-button:hover,
.onplix-google-auth-button:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(192,132,252,.78) !important;
  color:#1b102d !important;
  background:linear-gradient(180deg, #ffffff, #f1e7ff) !important;
  box-shadow:0 18px 34px rgba(124,58,237,.24), 0 0 0 3px rgba(168,85,247,.15);
  outline:0;
}

.onplix-google-auth-button .nsl-button-svg-container{
  width:30px;
  height:30px;
  min-width:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#ffffff;
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}

.onplix-google-auth-button .nsl-button-svg-container svg{
  width:22px;
  height:22px;
  display:block;
}

.onplix-google-auth-button .nsl-button-label-container{
  flex:1;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.onplix-profile-text-link{
  width:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin-top:-2px;
  align-self:center;
  color:#c084fc !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.4;
  cursor:pointer;
}

.onplix-profile-text-link:hover{
  color:#e9d5ff !important;
  text-decoration:underline;
}

.onplix-profile-form button:disabled{
  cursor:wait;
  opacity:.68;
}

.onplix-profile-form-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.onplix-profile-form .onplix-profile-secondary-btn{
  color:#e9d5ff !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}

.onplix-profile-form .onplix-profile-secondary-btn:hover{
  background:rgba(168,85,247,.12) !important;
  border-color:rgba(192,132,252,.28) !important;
}

@media (max-width:420px){
  .onplix-profile-form-grid{
    grid-template-columns:1fr;
  }

  .onplix-profile-phone-row{
    grid-template-columns:88px 1fr;
  }
}

.onplix-profile-woocommerce .woocommerce{
  font-family:'Roboto', sans-serif;
}

.onplix-profile-woocommerce .woocommerce .col2-set,
.onplix-profile-woocommerce .woocommerce .u-columns{
  display:block;
  width:100%;
}

.onplix-profile-woocommerce .woocommerce .col2-set .col-1,
.onplix-profile-woocommerce .woocommerce .col2-set .col-2,
.onplix-profile-woocommerce .woocommerce .u-column1,
.onplix-profile-woocommerce .woocommerce .u-column2{
  float:none;
  width:100%;
  margin:0;
}

.onplix-profile-woocommerce.is-login-active .woocommerce .u-column2,
.onplix-profile-woocommerce.is-login-active .woocommerce .col-2,
.onplix-profile-woocommerce.is-login-active .woocommerce .woocommerce-form-register,
.onplix-profile-woocommerce.is-register-active .woocommerce .u-column1,
.onplix-profile-woocommerce.is-register-active .woocommerce .col-1,
.onplix-profile-woocommerce.is-register-active .woocommerce .woocommerce-form-login{
  display:none !important;
}

.onplix-profile-woocommerce .woocommerce h2,
.onplix-profile-woocommerce .woocommerce h3{
  margin:0 0 12px;
  color:#ffffff;
  font-family:'Roboto', sans-serif;
  font-size:18px;
  font-weight:900;
  line-height:1.15;
}

.onplix-profile-woocommerce .woocommerce form .form-row label,
.onplix-profile-woocommerce .woocommerce,
.onplix-profile-woocommerce .woocommerce p{
  color:rgba(255,255,255,.74);
  font-family:'Roboto', sans-serif;
}

.onplix-profile-woocommerce .woocommerce form.login,
.onplix-profile-woocommerce .woocommerce form.register,
.onplix-profile-woocommerce .woocommerce form.woocommerce-form-login,
.onplix-profile-woocommerce .woocommerce form.woocommerce-form-register{
  margin:0;
  padding:0;
  border:0;
  color:#ffffff;
  background:transparent;
}

.onplix-profile-woocommerce .woocommerce form .form-row{
  margin:0 0 11px;
  padding:0;
}

.onplix-profile-woocommerce .woocommerce form .form-row label{
  margin-bottom:6px;
  color:rgba(255,255,255,.74);
  font-size:12px;
  font-weight:800;
  line-height:1.25;
}

.onplix-profile-woocommerce .woocommerce button.button,
.onplix-profile-woocommerce .woocommerce a.button,
.onplix-profile-woocommerce .woocommerce input.button{
  width:100%;
  min-height:42px;
  border:0;
  border-radius:12px;
  color:#ffffff;
  font-family:'Roboto', sans-serif;
  font-size:13px;
  font-weight:800;
  background:linear-gradient(135deg, #a855f7, #7c3aed);
}

.onplix-profile-woocommerce .woocommerce form .form-row input.input-text,
.onplix-profile-woocommerce .woocommerce form .form-row textarea,
.onplix-profile-woocommerce .woocommerce form .password-input input,
.onplix-profile-woocommerce .woocommerce-EditAccountForm input,
.onplix-profile-woocommerce .woocommerce-address-fields input,
.onplix-profile-woocommerce .woocommerce-address-fields select{
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#ffffff;
  background:rgba(255,255,255,.06);
}

.onplix-profile-woocommerce .woocommerce form .password-input{
  display:block;
}

.onplix-profile-woocommerce .woocommerce form .show-password-input{
  color:#c4b5fd;
}

.onplix-profile-woocommerce .woocommerce .woocommerce-form-login__rememberme{
  display:flex;
  align-items:center;
  gap:8px;
  margin:2px 0 12px;
  color:rgba(255,255,255,.68);
  font-size:12px;
}

.onplix-profile-woocommerce .woocommerce .woocommerce-LostPassword{
  margin:10px 0 0;
  text-align:center;
}

.onplix-profile-woocommerce .woocommerce a{
  color:#c4b5fd;
}
















/* =========================================================
   ONPLIX MOBILE
========================================================= */


@media (max-width:768px){
    
    img,
a,
button{
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
}

*{
  -webkit-tap-highlight-color: transparent;
}

/* ================= BASE ================= */

body{
    touch-action: manipulation;
}

body,
html{
    background:#010007 !important;
}

/* ?? QUITAR FLASH AZUL TOUCH */

.onplix-item,
.onplix-item *,
button,
button *,
a,
a *{
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}


/* ================= RESET ================= */

.onplix-scale{
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
}

.onplix-scale .onplix-app{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    opacity:1 !important;
    padding-bottom:20px !important;
}

.control-wrapper{
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

/* ================= HEADER ================= */

.onplix-header{
    height:60px !important;
    padding:0 12px !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:10px !important;
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;
    background:#010007 !important;
}

.onplix-logo-img{
    height:44px !important;
    max-height:44px !important;
    width:auto !important;
    max-width:136px !important;
    object-fit:contain !important;
}

.onplix-header-center{
    display:none !important;
}

#onplix-fullscreen-control,
#onplix-add-screens,
#onplix-profile-trigger,
.onplix-profile-top,
.onplix-time-wrapper,
.onplix-time-left{
    display:none !important;
}


/* ================= SEARCH OPEN ================= */

.onplix-header.search-open{
    grid-template-columns:1fr auto !important;
    z-index:2147483001 !important;
    overflow:visible !important;
}

.onplix-header.search-open .onplix-header-left,
.onplix-header.search-open .onplix-header-right{
    display:none !important;
}

.onplix-header.search-open .onplix-header-center{
    display:flex !important;
    width:100% !important;
}

.onplix-header.search-open .onplix-searchbar{
    width:100% !important;
    height:42px !important;
    position:relative !important;
    z-index:2147483002 !important;
    overflow:visible !important;
}

#onplix-mobile-search{
    display:flex !important;
    width:38px !important;
    height:38px !important;
    border-radius:10px !important;
    background:#121212 !important;
    border:1px solid rgba(255,255,255,.08) !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
}

.onplix-time-btn{
    width:38px !important;
    height:38px !important;
    border-radius:10px !important;
}

.onplix-time-btn svg{
    width:28px !important;
    height:28px !important;
}


/* ================= CONTAINERS ================= */

.onplix-shell{
    display:flex !important;
    flex-direction:column !important;
}

.onplix-main{
    display:contents !important;
}

.onplix-app{
    display:flex !important;
    flex-direction:column !important;
}

.onplix-left,
.onplix-right{
    width:100% !important;
}

body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile){
  width:100% !important;
  height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .control-wrapper,
body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-scale,
body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-app,
body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-shell{
  height:100dvh !important;
  max-height:100dvh !important;
  min-height:0 !important;
  overflow:hidden !important;
}

body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-video,
body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-right,
body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-created-playlists,
body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-profile-screen,
body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-player{
  display:none !important;
}

body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-left{
  display:block !important;
  height:calc(100dvh - 60px - 75px) !important;
  max-height:calc(100dvh - 60px - 75px) !important;
  min-height:0 !important;
  overflow:hidden !important;
}

body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) #onplix-results{
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
}


/* ================= RESULTADOS ================= */

.onplix-shell,
.onplix-app,
.onplix-left{
    padding:0 !important;
}

#onplix-results{
    padding:0 12px !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
}

#onplix-results::-webkit-scrollbar{
    display:none !important;
}

body.mobile-view-results,
body.mobile-view-results .onplix-left,
body.mobile-view-results #onplix-results{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
}

body.mobile-view-results::-webkit-scrollbar,
body.mobile-view-results .onplix-left::-webkit-scrollbar,
body.mobile-view-results #onplix-results::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
}

body:not(.mobile-playing) .onplix-left{
  height:auto !important;
  min-height:100vh !important;
}

.onplix-left .onplix-top{
    width:100% !important;
    aspect-ratio:16/9 !important;
    border-radius:8px;
    overflow:hidden;
}

.onplix-left .onplix-top img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.onplix-top img,
.onplix-item img{
    object-fit:cover;
    filter:none !important;
}

.onplix-left .onplix-item.is-selected::after{
    opacity:0;
}


/* ================= VIDEO ================= */

/* ================= VIDEO SIN BORDES ================= */

.onplix-video{
    order:1 !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    margin-bottom:0 !important;

    border-radius:0 !important;
    overflow:visible !important;
}

/* contenedor stage */
.onplix-stage{
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:flex;
    justify-content:center;

    border-radius:0 !important;
    overflow:visible !important;
}

/* wrapper del video */
.onplix-yt-wrapper{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;

    aspect-ratio:16/9 !important;

    position:relative !important;
    display:block !important;

    border-radius:0 !important;
    overflow:hidden !important; /* ?? importante para evitar bordes internos */
}

/* iframe */
.onplix-stage iframe,
.onplix-yt-wrapper iframe{
    display:block !important;

    border-radius:0 !important;
}

/* video */
#onplix-yt{
    position:absolute !important;
    inset:0 !important;

    border-radius:0 !important;
}

/* =========================================================
   ORDEN CORRECTO MOBILE (VIDEO ARRIBA)
========================================================= */

/* ?? contenedor principal en columna */
.onplix-app{
    display:flex !important;
    flex-direction:column !important;
}

/* ?? VIDEO SIEMPRE ARRIBA */
.onplix-video{
    order:1 !important;
    width:100% !important;
}

/* ?? PLAYER DEBAJO */
.onplix-player{
    opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
    order:2 !important;
    width:100% !important;
}

/* cuando est? activo */
.onplix-player.show{
  opacity:1;
  visibility:visible;
}

/* ?? eliminar fondo y bordes del player */
.onplix-player{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

/* ?? eliminar pseudo-elementos (l?neas laterales) */
.onplix-player::before,
.onplix-player::after{
    display:none !important;
    content:none !important;
}

/* ?? ocultamos SOLO el volumen */
#onplix-vol,
#onplix-mute,
.onplix-volume-block{
    display:none !important;
}

/* ?? overlay para extremos */
.onplix-player .onplix-p-right{
    position:absolute !important;
    left:0;
    right:0;
    top:0;
    bottom:0;
    pointer-events:none;
}

/* ?? activar clicks */
#onplix-shuffle,
#onplix-repeat{
    pointer-events:auto;
}

/* =========================================================
   ?? ELIMINAR SALTOS Y EFECTOS
========================================================= */

#onplix-shuffle,
#onplix-repeat{
    transform:translateY(-50%) !important;
    transition:none !important;
    outline:none !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
}

/* ?? sin hover */
#onplix-shuffle:hover,
#onplix-repeat:hover{
    transform:translateY(-50%) !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
}

/* ?? sin active */
#onplix-shuffle:active,
#onplix-repeat:active{
    transform:translateY(-50%) !important;
    background:transparent !important;
    box-shadow:none !important;
}

/* ?? eliminar punto */
#onplix-shuffle::before,
#onplix-shuffle::after,
#onplix-repeat::before,
#onplix-repeat::after{
    display:none !important;
    content:none !important;
}

/* ?? estado activo solo color */
#onplix-shuffle.active,
#onplix-repeat.active,
#onplix-shuffle.is-active,
#onplix-repeat.is-active{
    color:#a855f7 !important;
    transform:translateY(-50%) !important;
}

/* =========================================================
   BOTONES GENERALES ? SPOTIFY STYLE
========================================================= */

.onplix-player button{
  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(8px);

  cursor:pointer;

  color:#ffffff;
  overflow:visible;

  transition:
    transform .18s ease,
    background .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.onplix-player button:hover{
  transform:scale(1.08);
  background:rgba(0,0,0,.68);
  box-shadow:0 10px 26px rgba(0,0,0,.52);
}

body.onplix-has-song.mobile-view-results #onplix-results{
    padding-bottom:154px !important;
}

/* iconos base */
.onplix-player button svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  overflow:visible;
}


/* =========================================================
   PLAY PRINCIPAL (FOCO VISUAL)
========================================================= */

.onplix-player .onplix-play{
  width:70px;
  height:70px;
  margin:0 6px;

  background:linear-gradient(135deg,#a855f7,#9333ea);
  border:none;

  box-shadow:
    0 10px 40px rgba(168,85,247,.45),
    0 0 0 2px rgba(255,255,255,.08);
}

.onplix-player .onplix-play:hover{
  transform:scale(1.12);
  box-shadow:
    0 14px 50px rgba(168,85,247,.6),
    0 0 0 2px rgba(255,255,255,.12);
}

.onplix-player .onplix-play svg{
  width:30px;
  height:30px;
  fill:#ffffff;
}

#onplix-shuffle{
  position:absolute !important;
  left:40px; /* antes 20px */
  top:50%;
  transform:translateY(-50%);
}

#onplix-repeat{
  position:absolute !important;
  right:40px; /* antes 10px */
  top:50%;
  transform:translateY(-50%);
}

/* =========================================================
   BARRA DE PROGRESO FIJA DEBAJO DEL VIDEO
========================================================= */

body.mobile-view-player .onplix-progress{
  position:fixed !important;

  left:0;
  right:0;

  top:calc(36.8vw); /* ?? altura exacta 16:9 */

  width:100%;

  z-index:9999;
}





/* ================= PANEL DERECHO ================= */

.onplix-right{
    order:3 !important;
    padding:8px 8px 8px 12px !important;
}

.onplix-created-playlists{
    order:4 !important;
}

.onplix-player .onplix-p-left{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
}


/* ================= SCROLL DESPU?S DE 6 ITEMS ================= */

#onplix-queue,
#onplix-recommended,
#onplix-shared{
    max-height:380px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding-bottom:100px !important; /* espacio para mini player + footer */
}

/* ================= TABS ================= */

.onplix-tabs{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:2px !important;
    margin-top:0 !important;
}

.onplix-tab{
    font-size:11px !important;
    padding:0 4px !important;
    flex:1 1 0 !important;
    min-width:0 !important;
}


/* ================= PLAYLISTS MOBILE ================= */

body.mobile-view-library .onplix-created-playlists{
  --onplix-mobile-library-cover:58px;
}

body.mobile-view-library .onplix-library-shell{
  margin-top:0 !important;
}

body.mobile-view-library .onplix-library-head{
  display:none !important;
}

body.mobile-view-library .onplix-library-panel,
body.mobile-view-library .onplix-library-panel.is-active{
  display:block !important;
}

body.mobile-view-library .onplix-library-panel-title{
  display:block !important;
}

body.mobile-view-library #onplix-playlists{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-rows:repeat(3, auto) !important;
  grid-auto-columns:calc((100% - 20px) / 3) !important;
  grid-template-columns:none !important;
  gap:8px 10px !important;
  width:100% !important;
  padding:8px 2px 10px !important;
  margin:0 auto !important;
  justify-items:stretch !important;
  align-items:start !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  -webkit-overflow-scrolling:touch;
}

#onplix-playlists::-webkit-scrollbar{
  display:none;
}

body.mobile-view-library #onplix-playlists{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

body.mobile-view-library .onplix-playlists-empty{
  display:none !important;
}

/* tarjeta */

body.mobile-view-library .onplix-pl-card{
  width:100%;
  min-width:0;
  align-items:flex-start;
  scroll-snap-align:start;
}

body.mobile-view-library .onplix-pl-placeholder{
  display:flex !important;
  pointer-events:none;
  opacity:.82;
}

body.mobile-view-library .onplix-pl-placeholder.is-mobile-hidden{
  display:none !important;
}

/* cover */

body.mobile-view-library .onplix-pl-cover{
  width:var(--onplix-mobile-library-cover) !important;
  max-width:100%;
  box-sizing:border-box;
  aspect-ratio:1/1;
  border-radius:12px;
  margin:0;
}

body.mobile-view-library .onplix-pl-placeholder .onplix-pl-cover{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(168,85,247,.08)),
    rgba(18,18,24,.96);
  border:1px solid rgba(255,255,255,.08);
}

body.mobile-view-library .onplix-pl-placeholder .onplix-pl-cover::after{
  display:none;
  content:none;
}

/* texto mas compacto */

body.mobile-view-library .onplix-pl-name{
  margin-top:5px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.16;
  width:min(100%, var(--onplix-mobile-library-cover));
  text-align:left;
}

body.mobile-view-library .onplix-pl-placeholder .onplix-pl-name{
  display:none;
}

body.mobile-view-library .onplix-pl-count{
  display:block;
  width:min(100%, var(--onplix-mobile-library-cover));
  margin-top:3px;
  font-size:11px;
  line-height:1.12;
  text-align:left;
}

body.mobile-view-library .onplix-library-section{
  display:block;
  margin-top:8px;
}

body.mobile-view-library .onplix-created-playlists > .onplix-section-title,
body.mobile-view-library .onplix-library-section > .onplix-section-title,
body.mobile-view-library .onplix-library-panel > .onplix-section-title{
  margin:0 0 6px !important;
  padding:0 2px !important;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.15 !important;
}

body.mobile-view-library .onplix-library-grid{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-rows:repeat(3, auto) !important;
  grid-auto-columns:calc((100% - 20px) / 3) !important;
  grid-template-columns:none !important;
  gap:8px 10px !important;
  width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:8px 2px 6px !important;
}

body.mobile-view-library .onplix-library-smart .onplix-library-grid,
body.mobile-view-library .onplix-library-artists .onplix-library-grid{
  justify-items:center !important;
  align-items:start !important;
}

body.mobile-view-library .onplix-library-grid::-webkit-scrollbar{
  display:none;
}

body.mobile-view-library .onplix-library-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100%;
  min-width:0;
  scroll-snap-align:start;
}

body.mobile-view-library .onplix-library-cover{
  position:relative;
  width:74px !important;
  max-width:100%;
  min-width:74px !important;
  box-sizing:border-box;
  aspect-ratio:1/1;
  margin:0 auto !important;
  border-radius:12px;
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(168,85,247,.08)),
    rgba(18,18,24,.96);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}

body.mobile-view-library .onplix-library-cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  display:block;
  border:1px solid rgba(192,132,252,.34);
  border-radius:inherit;
  opacity:0;
  background:
    linear-gradient(135deg, rgba(192,132,252,.10), transparent 28%, transparent 70%, rgba(168,85,247,.08));
  box-shadow:
    inset 0 0 0 1px rgba(168,85,247,.10),
    inset 0 0 22px rgba(168,85,247,.16);
  transition:opacity .22s ease;
}

body.mobile-view-library .onplix-library-placeholder:hover .onplix-library-cover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 40px rgba(0,0,0,.54),
    0 0 0 1px rgba(192,132,252,.28),
    0 0 18px rgba(168,85,247,.20),
    0 0 34px rgba(168,85,247,.11);
}

body.mobile-view-library .onplix-library-placeholder:hover .onplix-library-cover::after{
  opacity:1;
}

body.mobile-view-library .onplix-library-cover img{
  transition:transform .35s ease;
}

body.mobile-view-library .onplix-library-placeholder:hover .onplix-library-cover img{
  transform:scale(1.05);
}

body.mobile-view-library .onplix-library-placeholder.is-artist .onplix-library-cover{
  border-radius:999px;
}

body.mobile-view-library .onplix-artist-card{
  width:100% !important;
  min-width:0 !important;
  align-items:center !important;
  justify-content:flex-start !important;
  scroll-snap-align:start;
}

body.mobile-view-library #onplix-artists{
  grid-auto-flow:column !important;
  grid-template-rows:repeat(3, auto) !important;
  grid-template-columns:none !important;
  grid-auto-columns:calc((100% - 24px) / 3) !important;
  gap:12px !important;
  padding:16px 0 24px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  justify-items:stretch !important;
  align-items:start !important;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

body.mobile-view-library #onplix-artists::-webkit-scrollbar{
  display:none;
}

body.mobile-view-library .onplix-artist-card .onplix-pl-cover{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  border-radius:999px;
  overflow:hidden;
}

body.mobile-view-library .onplix-artist-card .onplix-pl-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

body.mobile-view-library .onplix-artist-card .onplix-pl-name,
body.mobile-view-library .onplix-artist-card .onplix-pl-count{
  text-align:center;
}

@media (max-width:380px), (pointer:coarse){
  body.mobile-view-library .onplix-library-cover{
    width:68px !important;
    min-width:68px !important;
  }
}

body.mobile-view-library .onplix-library-name{
  display:none;
}


/* ================= AUTOPLAY ================= */

.onplix-right-top{
    padding-left:0 !important;
    margin-top:2px !important;
}

body.mobile-view-player .onplix-right .onplix-item,
body.mobile-view-player #onplix-recommended .onplix-item{
    transform:none !important;
    padding-left:2px !important;
    padding-right:8px !important;
}

body.mobile-view-player .onplix-right .onplix-item:hover,
body.mobile-view-player #onplix-recommended .onplix-item:hover{
    transform:none !important;
}

body.mobile-view-player .onplix-right .onplix-item > div:first-of-type,
body.mobile-view-player #onplix-recommended .onplix-item > div:first-of-type{
    padding-left:6px !important;
}

body.mobile-view-player .onplix-right .actions,
body.mobile-view-player #onplix-recommended .actions{
    transform:none !important;
    grid-template-columns:32px 32px !important;
    column-gap:10px !important;
    justify-content:end !important;
    margin-left:10px !important;
}

body.mobile-view-player #onplix-queue,
body.mobile-view-player #onplix-recommended,
body.mobile-view-player #onplix-shared{
    padding-left:0 !important;
    padding-right:0 !important;
}

body.mobile-view-player #onplix-queue .onplix-item.is-playing{
    transform:translateX(4px) !important;
}

body.mobile-view-player #onplix-queue .onplix-item.is-playing:hover{
    transform:translateX(4px) !important;
}

body.mobile-view-player .onplix-right .duration,
body.mobile-view-player #onplix-recommended .duration{
    display:none !important;
}

body.mobile-view-player .onplix-right .onplix-item,
body.mobile-view-player #onplix-recommended .onplix-item{
    grid-template-columns:60px minmax(0, 1fr) auto !important;
}

body.mobile-view-player .onplix-right .t,
body.mobile-view-player #onplix-recommended .t{
    white-space:nowrap !important;
    display:block !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.25 !important;
}

body.mobile-view-player .onplix-right .m,
body.mobile-view-player #onplix-recommended .m{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.onplix-autoplay-block{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:10px 0;
  position:relative;
}

.onplix-tabs-wrapper:not(.queue-active) .onplix-autoplay-block{
  display:none !important;
}

.onplix-tabs-wrapper.queue-active .onplix-autoplay-block{
  display:flex !important;
}

.onplix-autoplay-title{
    font-size:13px !important;
}

.onplix-switch{
    transform:scale(.85);
    transform-origin:left center !important;
}

#onplix-queue .onplix-top span,
#onplix-recommended .onplix-top span{
    display:none !important;
}

@media (max-width:768px) and (orientation:portrait){
  .onplix-modal-card{
    width:calc(100vw - 44px) !important;
    max-width:360px !important;
    padding:16px 16px 14px !important;
    border-radius:16px !important;
  }
}


/* =========================================================
   FOOTER NAVIGATION 
========================================================= */

.onplix-mobile-nav{
  display:flex !important;
  position:fixed !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
  height:75px; /* ?? antes 64 */
  justify-content:space-around;
  align-items:center;
  background:#010007;
  border-top:1px solid rgba(255,255,255,.08);
  z-index:999999 !important;
  pointer-events:auto;
}

body.onplix-mobile-portrait-lock{
  overflow-x:hidden !important;
  background:#010007 !important;
}

body.onplix-mobile-portrait-lock .onplix-scale{
  width:100% !important;
  min-height:var(--onplix-mobile-lock-height, 100dvh) !important;
  overflow-x:hidden !important;
}

body.onplix-mobile-portrait-lock .onplix-app,
body.onplix-mobile-portrait-lock .onplix-header,
body.onplix-mobile-portrait-lock .onplix-shell,
body.onplix-mobile-portrait-lock .onplix-left,
body.onplix-mobile-portrait-lock .onplix-right,
body.onplix-mobile-portrait-lock .onplix-video,
body.onplix-mobile-portrait-lock .onplix-player,
body.onplix-mobile-portrait-lock .onplix-created-playlists{
  width:var(--onplix-mobile-lock-width, 100vw) !important;
  max-width:var(--onplix-mobile-lock-width, 100vw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

body.onplix-mobile-portrait-lock .onplix-app,
body.onplix-mobile-portrait-lock .onplix-shell{
  min-height:var(--onplix-mobile-lock-height, 100dvh) !important;
}

body.onplix-mobile-portrait-lock .onplix-yt-wrapper{
  width:var(--onplix-mobile-lock-width, 100vw) !important;
  max-width:var(--onplix-mobile-lock-width, 100vw) !important;
}

body.onplix-mobile-portrait-lock.mobile-view-player .onplix-player{
  height:calc(var(--onplix-mobile-lock-width, 100vw) * 9 / 16) !important;
}

body.onplix-mobile-portrait-lock .onplix-mobile-nav{
  left:50% !important;
  right:auto !important;
  width:var(--onplix-mobile-lock-width, 100vw) !important;
  max-width:var(--onplix-mobile-lock-width, 100vw) !important;
  transform:translateX(-50%) !important;
}

/* Botones */
.onplix-nav-btn{
  flex:1;
  height:100%;
  gap:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform: translateY(-5px); 
  font-size:10px;
  color:#9ca3af;
  background:none;
  border:none;
  cursor:pointer;
  transition:.2s ease;
}
.onplix-nav-btn svg{
  width:25px; 
  height:25px;
  stroke:currentColor;
}
.onplix-nav-btn span{
  font-size:11px; 
  letter-spacing:.2px;
}
.onplix-nav-btn.active{
  color:#a855f7;
}
.onplix-nav-btn.active svg{
  filter:drop-shadow(0 0 6px rgba(168,85,247,.6));
}

/* Navegaci?n Footer */
body:not(.mobile-playing) .onplix-mobile-nav,
body.mobile-playing .onplix-mobile-nav,
body.mobile-view-results .onplix-mobile-nav,
body.mobile-view-library .onplix-mobile-nav,
body.mobile-view-profile .onplix-mobile-nav{
  display:flex !important;
}
body[class*="mobile-view"] .onplix-left,
body[class*="mobile-view"] .onplix-video,
body[class*="mobile-view"] .onplix-right,
body[class*="mobile-view"] .onplix-created-playlists,
body[class*="mobile-view"] .onplix-profile-screen,
body[class*="mobile-view"] .onplix-player{
  display:none !important;
}

/* Resultados */
body.mobile-view-results .onplix-left{
display:block !important;
}

/* Player */
body.mobile-view-player .onplix-video,
body.mobile-view-player .onplix-right{
  display:block !important;
}
body.mobile-view-player .onplix-player{
  display:flex !important;
}

body.mobile-view-player .onplix-header{
  display:none !important;
}

body.mobile-view-player .onplix-player{
  position:absolute !important;
  left:0;
  right:0;
  top:0;
  height:56.25vw !important;
  width:100% !important;
  display:block !important;
  justify-content:center;
  align-items:center;
  z-index:30;
  pointer-events:none;
}

body.mobile-view-player .onplix-player .onplix-p-center,
body.mobile-view-player .onplix-player .onplix-p-right,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-p-center,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-p-right{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

body.mobile-view-player .onplix-player .onplix-controls,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-controls{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none;
}

body.mobile-view-player .onplix-player button,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player button{
  position:absolute !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  color:#ffffff !important;
  opacity:.92;
  pointer-events:auto !important;
}

body.mobile-view-player .onplix-player button:hover,
body.mobile-view-player .onplix-player button:active,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player button:hover,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player button:active{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

body.mobile-view-player .onplix-player button svg,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player button svg{
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}

body.mobile-view-player #onplix-shuffle,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-shuffle{
  left:calc(50% - 150px) !important;
  width:42px !important;
  height:42px !important;
  background:rgba(0,0,0,.44) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  backdrop-filter:blur(8px) !important;
}

body.mobile-view-player #onplix-prev,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-prev{
  left:calc(50% - 64px) !important;
  width:40px !important;
  height:40px !important;
  background:rgba(0,0,0,.44) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  backdrop-filter:blur(8px) !important;
}

body.mobile-view-player #onplix-playpause,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-playpause{
  left:50% !important;
  width:64px !important;
  height:64px !important;
  background:rgba(0,0,0,.44) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  backdrop-filter:blur(8px) !important;
}

body.mobile-view-player #onplix-next,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-next{
  left:calc(50% + 76px) !important;
  width:40px !important;
  height:40px !important;
  background:rgba(0,0,0,.44) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  backdrop-filter:blur(8px) !important;
}

body.mobile-view-player #onplix-repeat,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-repeat{
  left:calc(50% + 120px) !important;
  right:auto !important;
  width:42px !important;
  height:42px !important;
  background:rgba(0,0,0,.44) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  backdrop-filter:blur(8px) !important;
}

body.mobile-view-player #onplix-expand-video-btn,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-expand-video-btn{
  top:auto !important;
  left:auto !important;
  right:6px !important;
  bottom:10px !important;
  transform:none !important;
  width:42px !important;
  height:42px !important;
  display:flex !important;
  background:rgba(0,0,0,.44) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  backdrop-filter:blur(8px) !important;
}

body.mobile-view-player #onplix-prev svg,
body.mobile-view-player #onplix-next svg,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-prev svg,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-next svg{
  width:34px !important;
  height:34px !important;
  fill:#ffffff !important;
}

body.mobile-view-player #onplix-shuffle svg,
body.mobile-view-player #onplix-repeat svg,
body.mobile-view-player #onplix-expand-video-btn svg,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-shuffle svg,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-repeat svg,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-expand-video-btn svg{
  width:22px !important;
  height:22px !important;
  stroke:currentColor !important;
}

body.mobile-view-player #onplix-playpause svg,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-playpause svg{
  width:44px !important;
  height:44px !important;
  fill:#ffffff !important;
}

body.mobile-view-player #onplix-shuffle.active,
body.mobile-view-player #onplix-repeat.active,
body.mobile-view-player #onplix-shuffle.is-active,
body.mobile-view-player #onplix-repeat.is-active,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-shuffle.active,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-repeat.active,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-shuffle.is-active,
.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-repeat.is-active{
  color:#c084fc !important;
  opacity:1 !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-active{
  position:relative !important;
  width:var(--onplix-mobile-video-fs-w, 100vw) !important;
  height:100vh !important;
  height:-webkit-fill-available !important;
  height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  background:#000 !important;
  overflow:hidden !important;
}

body.onplix-mobile-video-fs-fallback{
  overflow:hidden !important;
}

body.onplix-mobile-video-fs-fallback .onplix-video,
body.onplix-mobile-video-fs-fallback .onplix-shell,
body.onplix-mobile-video-fs-fallback .onplix-app,
body.onplix-mobile-video-fs-fallback .control-wrapper{
  overflow:visible !important;
}

  body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active{
    position:fixed !important;
    inset:0 !important;
    z-index:1000001 !important;
  width:var(--onplix-mobile-video-fs-w, 100vw) !important;
  height:100vh !important;
  height:-webkit-fill-available !important;
  height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
  max-width:none !important;
  max-height:none !important;
    transform:none !important;
  }

  body.onplix-iphone-video-fs{
    width:100% !important;
    height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
    max-height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    background:#000 !important;
  }

  body.onplix-iphone-video-fs .control-wrapper,
  body.onplix-iphone-video-fs .onplix-scale,
  body.onplix-iphone-video-fs .onplix-app,
  body.onplix-iphone-video-fs .onplix-shell{
    width:100% !important;
    height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
    max-height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding-bottom:0 !important;
    background:#000 !important;
  }

  body.onplix-iphone-video-fs .onplix-header,
  body.onplix-iphone-video-fs .onplix-mini-player,
  body.onplix-iphone-video-fs .onplix-mobile-nav,
  body.onplix-iphone-video-fs .onplix-orientation-guard{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.onplix-iphone-video-fs .onplix-left,
  body.onplix-iphone-video-fs .onplix-right,
  body.onplix-iphone-video-fs .onplix-created-playlists,
  body.onplix-iphone-video-fs .onplix-profile-screen{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.onplix-iphone-video-fs .onplix-main,
  body.onplix-iphone-video-fs .onplix-video{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    background:#000 !important;
  }

  body.onplix-iphone-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    width:var(--onplix-mobile-video-fs-w, 100vw) !important;
    height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:0 !important;
    background:#000 !important;
    transform:none !important;
  }

  body.onplix-iphone-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
  body.onplix-iphone-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    min-height:100% !important;
  }

  body.onplix-iphone-video-fs .onplix-mobile-video-controls{
    z-index:2147483001 !important;
  }

  body.onplix-iphone-video-fs #onplix-mobile-expand-video-btn{
    right:max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  body.onplix-iphone-video-fs .onplix-mobile-video-progress{
    bottom:calc(env(safe-area-inset-bottom, 0px) - 13px) !important;
  }

  body.onplix-iphone-video-fs-landscape .onplix-yt-wrapper.onplix-mobile-video-fs-active{
    width:var(--onplix-mobile-video-fs-w, 100vw) !important;
    height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
  }

  body.onplix-iphone-video-fs-landscape .onplix-mobile-video-player{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body.onplix-iphone-video-fs-landscape .onplix-mobile-video-controls{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    width:auto !important;
    max-width:calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 28px) !important;
  }

  body.onplix-iphone-video-fs-landscape #onplix-mobile-expand-video-btn{
    right:calc(env(safe-area-inset-right, 0px) + 10px) !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }

  body.onplix-iphone-video-fs-landscape .onplix-mobile-video-progress{
    left:env(safe-area-inset-left, 0px) !important;
    right:env(safe-area-inset-right, 0px) !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) - 10px) !important;
    width:auto !important;
  }

  .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-yt-overlay{
    inset:0 !important;
    z-index:44 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  background:transparent !important;
  backdrop-filter:none !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-active.show-player-overlay .onplix-yt-overlay{
  opacity:1 !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
.onplix-yt-wrapper.onplix-mobile-video-fs-active iframe{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  inset:0 !important;
  display:block !important;
  object-fit:cover !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:45 !important;
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-active.show-player-overlay .onplix-player,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player.show{
  opacity:1 !important;
  visibility:visible !important;
}

body.mobile-view-player .onplix-player .onplix-progress,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-progress{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
  z-index:35 !important;
  pointer-events:none;
}

body.mobile-view-player .onplix-player .onplix-time,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-time{
  display:none !important;
}

body.mobile-view-player .onplix-player .onplix-seek,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-seek{
  width:100% !important;
  margin:0 !important;
  pointer-events:auto !important;
}

body.mobile-view-player .onplix-player .onplix-seek::-webkit-slider-runnable-track,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-seek::-webkit-slider-runnable-track{
  height:3px !important;
  background:linear-gradient(
    to right,
    #a855f7 0%,
    #c084fc var(--seek-percent,0%),
    rgba(255,255,255,.22) var(--seek-percent,0%),
    rgba(255,255,255,.22) 100%
  ) !important;
  border-radius:999px !important;
}

body.mobile-view-player .onplix-player .onplix-seek::-moz-range-track,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-seek::-moz-range-track{
  height:3px !important;
  background:linear-gradient(
    to right,
    #a855f7 0%,
    #c084fc var(--seek-percent,0%),
    rgba(255,255,255,.22) var(--seek-percent,0%),
    rgba(255,255,255,.22) 100%
  ) !important;
  border-radius:999px !important;
}

body.mobile-view-player .onplix-player .onplix-seek::-webkit-slider-thumb,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-seek::-webkit-slider-thumb{
  opacity:0 !important;
}

body.mobile-view-player .onplix-player .onplix-seek::-moz-range-thumb,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player .onplix-seek::-moz-range-thumb{
  opacity:0 !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  z-index:45 !important;
  pointer-events:none !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape .onplix-p-center,
.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape .onplix-p-right{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape .onplix-controls{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-shuffle,
.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-prev,
.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-playpause,
.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-next,
.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-repeat{
  top:50% !important;
  bottom:auto !important;
  transform:translate(-50%, -50%) !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-shuffle{
  left:calc(50% - 150px) !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-prev{
  left:calc(50% - 64px) !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-playpause{
  left:50% !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-next{
  left:calc(50% + 76px) !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-repeat{
  left:calc(50% + 120px) !important;
  right:auto !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape #onplix-expand-video-btn{
  left:auto !important;
  right:6px !important;
  bottom:10px !important;
  transform:none !important;
}

.onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player.onplix-player-mobile-fs-landscape .onplix-progress{
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
}

/* Biblioteca */
body.mobile-view-library .onplix-created-playlists{
  display:block !important;
  padding-left:12px !important;
  padding-right:12px !important;
  height:calc(100dvh - 60px - 75px) !important;
  max-height:calc(100dvh - 60px - 75px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  padding-bottom:84px !important;
}

body.mobile-view-library .onplix-created-playlists::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

body.onplix-has-song.mobile-view-library .onplix-created-playlists{
  height:calc(100dvh - 60px - 75px) !important;
  max-height:calc(100dvh - 60px - 75px) !important;
  padding-bottom:152px !important;
}

body.onplix-has-song.mobile-view-profile .onplix-profile-screen{
  padding-bottom:164px !important;
}

/* Perfil */
body.mobile-view-profile .onplix-profile-screen{
  display:block !important;
  height:calc(100dvh - 60px - 75px) !important;
  max-height:calc(100dvh - 60px - 75px) !important;
  padding:14px 12px 94px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

body.mobile-view-profile .onplix-profile-screen::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

body.mobile-view-profile .onplix-created-playlists{
  display:block !important;
  padding-left:12px !important;
  padding-right:12px !important;
  height:calc(100dvh - 60px) !important;
  max-height:calc(100dvh - 60px) !important;
  overflow:hidden !important;
}

body.mobile-view-profile .onplix-created-playlists > .onplix-section-title,
body.mobile-view-profile .onplix-created-playlists > #onplix-playlists{
  display:none !important;
}

body.mobile-view-profile .onplix-library-shell{
  display:none !important;
}

body.mobile-view-profile .onplix-profile-woocommerce{
  width:100% !important;
}

body.mobile-view-profile .onplix-profile-woocommerce .woocommerce-MyAccount-navigation,
body.mobile-view-profile .onplix-profile-woocommerce .woocommerce-MyAccount-content{
  float:none !important;
  width:100% !important;
}



/* ========================================================= 
   MINI PLAYER SONANDO AHORA
========================================================= */

  /* Activa al Reproducir canci?n */
  body.onplix-has-song .onplix-mini-player{
    display:grid !important;
  }
  
  /* Mini Player */
  .onplix-mini-player{
   animation:onplixMiniIn .35s ease;
   position:fixed;
   bottom:75px;
   left:0;
   right:0;
   height:58px;
   display:grid;
   grid-template-columns:1fr auto;
   align-items:center;
   gap:10px;
   padding:6px 12px;
   font-family:'Roboto', sans-serif;
   background:linear-gradient(
     90deg,
     rgba(168,85,247,.18),
     rgba(168,85,247,.05)
   );
   border-left:4px solid #a855f7;
   box-shadow:0 4px 12px rgba(168,85,247,.15);
   backdrop-filter:blur(8px);
   border-radius:12px;
   z-index:9999;
   overflow:hidden;
  }

  .onplix-mini-player::after{
   content:"";
   position:absolute;
   left:0;
   bottom:0;
   height:3px;
   width:var(--mini-progress, 0%);
   background:linear-gradient(90deg,#a855f7,#c084fc);
   border-radius:0 999px 999px 0;
   z-index:2;
   pointer-events:none;
  }
  
  /* Mini Control */
  .onplix-mini-controls{
   display:flex;
   align-items:center;
   gap:10px;
   margin-left:auto;
   flex-shrink:0;
   min-width:90px;
   justify-content:flex-end;
  }

  .onplix-mini-left{
   display:flex;
   align-items:center;
   gap:10px;
   flex:1;
   min-width:0;
  }

  .onplix-mini-left img{
   width:45px;
   height:45px;
   border-radius:8px;
   object-fit:cover;
  }

  /* Bot?n Play y Agregar */
  .onplix-mini-play,
  .onplix-mini-add{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    cursor:pointer;
    color:#a855f7;
    flex:0 0 40px;
  }

  body.onplix-has-song .onplix-mini-add{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .onplix-mini-play svg{
    width:30px;
    height:30px;
    fill:currentColor;
  }

  .onplix-mini-add svg{
    width:30px;
    height:30px;
    stroke:currentColor;
  }
  
  /* T?tulo y Texto */
  .onplix-mini-meta{
   display:flex;
   flex-direction:column;
   flex:1;
   min-width:0;
  }

  #onplix-mini-title{
   font-size:14px;
   font-weight:600;
   color:#ffffff;
   line-height:1.2;
   display:-webkit-box;
   -webkit-line-clamp:2;
   -webkit-box-orient:vertical;
   overflow:hidden;
  }

  #onplix-mini-artist{
   font-size:12px;
   color:#c4b5fd;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
  }

}

/* ========================================================= 
========================================================= */

/* Ocultar en Dekstop */
.onplix-mobile-nav,
.onplix-mini-player{
  display:none !important;
}
.onplix-now-pin{
    display:none !important;
}

.onplix-orientation-guard{
  display:none;
}

@media (pointer:coarse) and (orientation:landscape){
  body.onplix-browser-landscape-guard{
    overflow:hidden !important;
  }

  body.onplix-browser-landscape-guard .onplix-orientation-guard{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483647 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px !important;
    background:
      radial-gradient(circle at 50% 20%, rgba(168,85,247,.22), transparent 34%),
      rgba(4,4,7,.88) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    font-family:'Roboto', sans-serif !important;
    color:#ffffff !important;
  }

  .onplix-orientation-card{
    width:min(360px, 88vw) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:12px !important;
    text-align:center !important;
    padding:22px 24px 24px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:18px !important;
    background:rgba(12,12,16,.72) !important;
    box-shadow:0 18px 50px rgba(0,0,0,.42) !important;
  }

  .onplix-orientation-icon{
    width:58px !important;
    height:58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#c084fc !important;
    border-radius:999px !important;
    background:rgba(168,85,247,.12) !important;
    border:1px solid rgba(192,132,252,.22) !important;
  }

  .onplix-orientation-icon svg{
    width:34px !important;
    height:34px !important;
  }

  .onplix-orientation-title{
    font-size:20px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    color:#ffffff !important;
  }

  .onplix-orientation-text{
    max-width:300px !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.45 !important;
    color:rgba(255,255,255,.76) !important;
  }

  body.onplix-player-landscape-fs-pending.onplix-browser-landscape-guard .onplix-orientation-guard{
    align-items:stretch !important;
    justify-content:stretch !important;
    padding:0 !important;
    background:rgba(4,4,7,.58) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
  }

  body.onplix-player-landscape-fs-pending.onplix-browser-landscape-guard .onplix-orientation-card{
    display:none !important;
  }
}

/* =========================================================
   MOBILE VIDEO PLAYER - INDEPENDENT FROM DESKTOP FOOTER
========================================================= */
.onplix-mobile-video-player{
  display:none;
}

@media (max-width:932px), (pointer:coarse){
  body[class*="mobile-view"] .onplix-player,
  body.onplix-mobile-video-fs .onplix-player,
  .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player,
  .onplix-yt-wrapper.onplix-mobile-video-fs-landscape .onplix-player{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.mobile-view-player .onplix-yt-wrapper .onplix-yt-overlay{
    z-index:44 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  body.mobile-view-player .onplix-yt-wrapper .onplix-mobile-video-player,
  .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-mobile-video-player{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:45 !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
  }

  body.mobile-view-player:not(.onplix-has-song) .onplix-yt-wrapper .onplix-mobile-video-player,
  body.mobile-view-player:not(.onplix-has-song) .onplix-mobile-video-controls,
  body.mobile-view-player:not(.onplix-has-song) .onplix-mobile-video-progress,
  body.mobile-view-player:not(.onplix-has-song) #onplix-mobile-expand-video-btn{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.mobile-view-player:not(.onplix-has-song) .onplix-video-blackout{
    opacity:1 !important;
    visibility:visible !important;
    z-index:80 !important;
    display:flex !important;
  }

  body.mobile-view-player:not(.onplix-has-song) .onplix-video-blackout img{
    width:min(150px, 42vw);
    max-height:82px;
  }

  .onplix-yt-wrapper.onplix-mobile-video-fs-active:not(.onplix-mobile-video-fs-landscape) .onplix-mobile-video-player{
    inset:0 !important;
    height:100% !important;
    max-width:none !important;
    transform:none !important;
  }

  body.mobile-view-player .onplix-yt-wrapper.show-player-overlay .onplix-mobile-video-player,
  body.mobile-view-player .onplix-mobile-video-player.show,
  .onplix-yt-wrapper.onplix-mobile-video-fs-active.show-player-overlay .onplix-mobile-video-player,
  .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-mobile-video-player.show{
    opacity:1 !important;
    visibility:visible !important;
  }

  .onplix-mobile-video-controls{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:clamp(12px, 3.5vw, 22px) !important;
    width:auto !important;
    height:64px !important;
    pointer-events:none !important;
  }

  .onplix-mobile-video-player button{
    position:absolute !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#fff !important;
    background:rgba(0,0,0,.44) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:999px !important;
    box-shadow:none !important;
    backdrop-filter:blur(8px) !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    opacity:.94;
    transition:color .18s ease, opacity .18s ease, transform .18s ease;
    -webkit-appearance:none !important;
    appearance:none !important;
    -webkit-tap-highlight-color:transparent !important;
    -webkit-touch-callout:none !important;
    user-select:none !important;
    touch-action:manipulation !important;
    outline:none !important;
  }

  .onplix-mobile-video-player button:focus,
  .onplix-mobile-video-player button:focus-visible,
  .onplix-mobile-video-player button:active{
    outline:none !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .onplix-mobile-video-player button:active{
    transform:translate(-50%, -50%) scale(.96) !important;
  }

  .onplix-mobile-video-player button svg{
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
  }

  .onplix-mobile-video-controls button{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
  }

  .onplix-mobile-video-controls button:active{
    transform:scale(.96) !important;
  }

  #onplix-mobile-shuffle{
    width:42px !important;
    height:42px !important;
  }

  #onplix-mobile-prev{
    width:40px !important;
    height:40px !important;
  }

  #onplix-mobile-playpause{
    width:64px !important;
    height:64px !important;
  }

  #onplix-mobile-next{
    width:40px !important;
    height:40px !important;
  }

  #onplix-mobile-repeat{
    right:auto !important;
    width:42px !important;
    height:42px !important;
  }

  #onplix-mobile-expand-video-btn{
    top:auto !important;
    left:auto !important;
    right:6px !important;
    bottom:10px !important;
    transform:none !important;
    width:42px !important;
    height:42px !important;
  }

  .onplix-yt-wrapper.onplix-mobile-video-fs-active:not(.onplix-mobile-video-fs-landscape) #onplix-mobile-expand-video-btn{
    right:8px !important;
    bottom:8px !important;
  }

  #onplix-mobile-expand-video-btn:active{
    transform:scale(.96) !important;
  }

  #onplix-mobile-prev svg,
  #onplix-mobile-next svg{
    width:34px !important;
    height:34px !important;
    fill:#ffffff !important;
  }

  #onplix-mobile-shuffle svg,
  #onplix-mobile-repeat svg,
  #onplix-mobile-expand-video-btn svg{
    width:22px !important;
    height:22px !important;
    stroke:currentColor !important;
  }

  #onplix-mobile-playpause svg{
    width:44px !important;
    height:44px !important;
    fill:#ffffff !important;
  }

  #onplix-mobile-shuffle.active,
  #onplix-mobile-shuffle.is-active,
  #onplix-mobile-repeat.active,
  #onplix-mobile-repeat.is-active{
    color:#c084fc !important;
    opacity:1 !important;
  }

  .onplix-mobile-video-progress{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:-13px !important;
    width:100% !important;
    height:30px !important;
    z-index:35 !important;
    pointer-events:none !important;
    overflow:visible !important;
  }

  .onplix-yt-wrapper.onplix-mobile-video-fs-active:not(.onplix-mobile-video-fs-landscape) .onplix-mobile-video-progress{
    bottom:-13px !important;
  }

  .onplix-mobile-video-seek{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    display:block !important;
    width:100% !important;
    height:30px !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:auto !important;
    background:transparent !important;
    accent-color:#a855f7;
    -webkit-appearance:none !important;
    appearance:none !important;
    line-height:0 !important;
  }

  .onplix-mobile-video-seek::-webkit-slider-runnable-track{
    height:3px !important;
    background:linear-gradient(
      to right,
      #a855f7 0%,
      #c084fc var(--seek-percent,0%),
      rgba(255,255,255,.22) var(--seek-percent,0%),
      rgba(255,255,255,.22) 100%
    ) !important;
    border-radius:999px !important;
  }

  .onplix-mobile-video-seek::-moz-range-track{
    height:3px !important;
    background:linear-gradient(
      to right,
      #a855f7 0%,
      #c084fc var(--seek-percent,0%),
      rgba(255,255,255,.22) var(--seek-percent,0%),
      rgba(255,255,255,.22) 100%
    ) !important;
    border-radius:999px !important;
  }

  .onplix-mobile-video-seek::-webkit-slider-thumb{
    -webkit-appearance:none !important;
    appearance:none !important;
    width:0 !important;
    height:0 !important;
    margin-top:13.5px !important;
    border:0 !important;
    border-radius:999px !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:0 !important;
    transition:opacity .14s ease, width .14s ease, height .14s ease, margin .14s ease !important;
  }

  .onplix-mobile-video-seek::-moz-range-thumb{
    width:0 !important;
    height:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:0 !important;
    transition:opacity .14s ease, width .14s ease, height .14s ease !important;
  }

  .onplix-mobile-video-seek:active::-webkit-slider-thumb,
  .onplix-mobile-video-seek:focus::-webkit-slider-thumb,
  .onplix-mobile-video-seek.is-seeking::-webkit-slider-thumb{
    width:17px !important;
    height:17px !important;
    margin-top:6px !important;
    background:#c084fc !important;
    border:3px solid #ffffff !important;
    box-shadow:0 0 0 5px rgba(168,85,247,.24), 0 4px 12px rgba(0,0,0,.35) !important;
    opacity:1 !important;
  }

  .onplix-mobile-video-seek:active::-moz-range-thumb,
  .onplix-mobile-video-seek:focus::-moz-range-thumb,
  .onplix-mobile-video-seek.is-seeking::-moz-range-thumb{
    width:17px !important;
    height:17px !important;
    background:#c084fc !important;
    border:3px solid #ffffff !important;
    box-shadow:0 0 0 5px rgba(168,85,247,.24), 0 4px 12px rgba(0,0,0,.35) !important;
    opacity:1 !important;
  }
}

/* =========================================================
   DESKTOP PLAYER ICONS - MATCH MOBILE VIDEO CONTROLS
========================================================= */
@media (min-width:769px) and (pointer:fine){
  .onplix-app .onplix-controls{
    gap:18px !important;
  }

  .onplix-app .onplix-p-right{
    gap:16px !important;
  }

  .onplix-app .onplix-player button{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#ffffff !important;
    background:transparent !important;
    border:0 !important;
    border-radius:999px !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    cursor:pointer !important;
    opacity:.94;
    transform:none !important;
    transition:color .18s ease, opacity .18s ease, transform .18s ease, background .18s ease !important;
  }

  .onplix-app .onplix-player button:hover{
    color:#ffffff !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    transform:scale(1.04) !important;
  }

  .onplix-app .onplix-player button:active{
    transform:scale(.96) !important;
  }

  .onplix-app .onplix-player button:focus,
  .onplix-app .onplix-player button:focus-visible{
    outline:none !important;
    box-shadow:none !important;
  }

  .onplix-app #onplix-prev,
  .onplix-app #onplix-next{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }

  .onplix-app #onplix-playpause{
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
    min-height:64px !important;
    margin:0 !important;
    background:rgba(0,0,0,.44) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
  }

  .onplix-app #onplix-playpause:hover{
    background:rgba(0,0,0,.58) !important;
  }

  .onplix-app #onplix-shuffle,
  .onplix-app #onplix-repeat,
  .onplix-app #onplix-mute{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }

  .onplix-app #onplix-prev svg,
  .onplix-app #onplix-next svg{
    width:34px !important;
    height:34px !important;
    fill:#ffffff !important;
  }

  .onplix-app #onplix-playpause svg{
    width:44px !important;
    height:44px !important;
    fill:#ffffff !important;
  }

  .onplix-app #onplix-shuffle svg,
  .onplix-app #onplix-repeat svg,
  .onplix-app #onplix-mute svg{
    width:22px !important;
    height:22px !important;
    stroke:currentColor !important;
    stroke-width:2.15 !important;
    fill:none !important;
  }

  .onplix-app #onplix-shuffle.active,
  .onplix-app #onplix-repeat.active,
  .onplix-app #onplix-shuffle.is-active,
  .onplix-app #onplix-repeat.is-active{
    color:#c084fc !important;
    opacity:1 !important;
    filter:none !important;
    animation:none !important;
  }

  .onplix-app #onplix-shuffle::before,
  .onplix-app #onplix-shuffle::after,
  .onplix-app #onplix-repeat::before,
  .onplix-app #onplix-repeat::after{
    display:none !important;
    content:none !important;
  }

  .onplix-app .onplix-progress{
    transform:translateY(-6px) !important;
  }
}

@media (max-width:932px), (pointer:coarse){
  body.mobile-view-results .onplix-header,
  body.mobile-view-library .onplix-header,
  body.mobile-view-profile .onplix-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    padding:0 10px !important;
    z-index:99999 !important;
  }

body.mobile-view-results #onplix-results{
  padding-bottom:20px !important;
}

body.onplix-mobile-video-fs,
body.onplix-mobile-video-fs-fallback{
  width:100vw !important;
  height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  background:#000 !important;
}

body.onplix-mobile-video-fs .onplix-header,
body.onplix-mobile-video-fs .onplix-mobile-nav,
body.onplix-mobile-video-fs .onplix-mini-player,
body.onplix-mobile-video-fs .onplix-right,
body.onplix-mobile-video-fs .onplix-left,
body.onplix-mobile-video-fs .onplix-created-playlists,
body.onplix-mobile-video-fs .onplix-profile-screen,
body.onplix-mobile-video-fs-fallback .onplix-header,
body.onplix-mobile-video-fs-fallback .onplix-mobile-nav,
body.onplix-mobile-video-fs-fallback .onplix-mini-player,
body.onplix-mobile-video-fs-fallback .onplix-right,
body.onplix-mobile-video-fs-fallback .onplix-left,
body.onplix-mobile-video-fs-fallback .onplix-created-playlists,
body.onplix-mobile-video-fs-fallback .onplix-profile-screen{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.onplix-mobile-video-fs .onplix-video,
body.onplix-mobile-video-fs-fallback .onplix-video{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  width:100vw !important;
  height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  background:#000 !important;
}

body.onplix-mobile-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active,
body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483001 !important;
  width:var(--onplix-mobile-video-fs-w, 100vw) !important;
  height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  background:#000 !important;
}

body.onplix-mobile-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
body.onplix-mobile-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe,
body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
}

body.onplix-mobile-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active > .onplix-player,
body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active > .onplix-player{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.onplix-mobile-video-fs .onplix-mobile-video-player:not(.show),
body.onplix-mobile-video-fs-fallback .onplix-mobile-video-player:not(.show){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.onplix-has-song.mobile-view-results #onplix-results{
  padding-bottom:76px !important;
}

body.mobile-view-library .onplix-created-playlists{
  padding-bottom:20px !important;
}

body.onplix-has-song.mobile-view-library .onplix-created-playlists{
  padding-bottom:76px !important;
}

body.mobile-view-profile .onplix-profile-screen{
  padding:14px 12px 20px !important;
}

body.onplix-has-song.mobile-view-profile .onplix-profile-screen{
  padding-bottom:76px !important;
}

  body.mobile-view-results .onplix-shell,
  body.mobile-view-library .onplix-shell,
  body.mobile-view-profile .onplix-shell{
    padding-top:60px !important;
  }

  body.mobile-view-results .onplix-left,
  body.mobile-view-library .onplix-created-playlists,
  body.mobile-view-profile .onplix-profile-screen{
    scroll-margin-top:60px !important;
  }

  body.mobile-view-results .onplix-logo-img,
  body.mobile-view-library .onplix-logo-img,
  body.mobile-view-profile .onplix-logo-img{
    height:44px !important;
    max-height:44px !important;
  }

  body.mobile-view-results #onplix-mobile-search,
  body.mobile-view-library #onplix-mobile-search{
    width:38px !important;
    height:38px !important;
  }

  #onplix-queue .onplix-item.is-added-focus{
    background:rgba(168,85,247,.18) !important;
    border:1px solid rgba(192,132,252,.38) !important;
    box-shadow:0 0 0 1px rgba(168,85,247,.14), 0 12px 26px rgba(0,0,0,.22) !important;
  }

  body.mobile-view-player{
    width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:pan-x pan-y !important;
  }

  body.mobile-view-results,
  body.mobile-view-library,
  body.mobile-view-profile{
    width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:pan-x pan-y !important;
  }

  body.mobile-view-results .control-wrapper,
  body.mobile-view-results .onplix-scale,
  body.mobile-view-results .onplix-app,
  body.mobile-view-results .onplix-shell,
  body.mobile-view-library .control-wrapper,
  body.mobile-view-library .onplix-scale,
  body.mobile-view-library .onplix-app,
  body.mobile-view-library .onplix-shell,
  body.mobile-view-profile .control-wrapper,
  body.mobile-view-profile .onplix-scale,
  body.mobile-view-profile .onplix-app,
  body.mobile-view-profile .onplix-shell{
    height:100dvh !important;
    max-height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.mobile-view-results .onplix-left{
    height:calc(100dvh - 60px - 75px) !important;
    max-height:calc(100dvh - 60px - 75px) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.mobile-view-results #onplix-results{
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  body.mobile-view-player .control-wrapper,
  body.mobile-view-player .onplix-scale,
  body.mobile-view-player .onplix-app,
  body.mobile-view-player .onplix-shell{
    height:100dvh !important;
    max-height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding-bottom:0 !important;
  }

  body.mobile-view-player .onplix-shell{
    display:flex !important;
    flex-direction:column !important;
  }

  body.mobile-view-player .onplix-video{
    position:relative !important;
    z-index:80 !important;
    flex:0 0 auto !important;
    overflow:visible !important;
  }

  body.mobile-view-player .onplix-yt-wrapper{
    overflow:visible !important;
    z-index:80 !important;
  }

  body.mobile-view-player .onplix-right{
    position:relative !important;
    z-index:1 !important;
    flex:0 0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    height:calc(100dvh - 56.25vw - 75px) !important;
    max-height:calc(100dvh - 56.25vw - 75px) !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding-bottom:0 !important;
  }

  body.mobile-view-player .onplix-right-top,
  body.mobile-view-player .onplix-active-block,
  body.mobile-view-player .onplix-tabs-wrapper{
    flex:0 0 auto !important;
  }

  body.mobile-view-player .onplix-active-playlist-shell.has-active-source{
    margin-top:8px !important;
    margin-bottom:8px !important;
  }

  body.mobile-view-player #onplix-queue,
  body.mobile-view-player #onplix-recommended,
  body.mobile-view-player #onplix-shared{
    flex:1 1 auto !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding-bottom:104px !important;
  }

  body.mobile-view-player .onplix-mobile-video-player{
    overflow:visible !important;
    z-index:120 !important;
  }

  .onplix-mobile-video-progress{
    bottom:-13px !important;
    height:30px !important;
    z-index:160 !important;
    transform:none !important;
    overflow:visible !important;
  }

  .onplix-mobile-video-seek{
    bottom:0 !important;
    height:30px !important;
    z-index:161 !important;
    transform:none !important;
  }

  .onplix-app .onplix-progress{
    transform:none !important;
  }
}

body.onplix-mobile-video-fs.mobile-view-player .onplix-video,
body.onplix-mobile-video-fs-fallback.mobile-view-player .onplix-video,
body.onplix-mobile-video-fs.mobile-playing .onplix-video,
body.onplix-mobile-video-fs-fallback.mobile-playing .onplix-video{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  width:var(--onplix-mobile-video-fs-w, 100vw) !important;
  height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:#000 !important;
  overflow:hidden !important;
  transform:none !important;
}

body.onplix-mobile-video-fs.mobile-view-player .onplix-yt-wrapper.onplix-mobile-video-fs-active,
body.onplix-mobile-video-fs-fallback.mobile-view-player .onplix-yt-wrapper.onplix-mobile-video-fs-active,
body.onplix-mobile-video-fs.mobile-playing .onplix-yt-wrapper.onplix-mobile-video-fs-active,
body.onplix-mobile-video-fs-fallback.mobile-playing .onplix-yt-wrapper.onplix-mobile-video-fs-active{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:2147483001 !important;
  width:var(--onplix-mobile-video-fs-w, 100vw) !important;
  height:var(--onplix-mobile-video-fs-h, 100dvh) !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  border-radius:0 !important;
  background:#000 !important;
  overflow:hidden !important;
  transform:none !important;
}

body.onplix-mobile-video-fs.mobile-view-player .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
body.onplix-mobile-video-fs.mobile-view-player .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe,
body.onplix-mobile-video-fs-fallback.mobile-view-player .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
body.onplix-mobile-video-fs-fallback.mobile-view-player .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe,
body.onplix-mobile-video-fs.mobile-playing .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
body.onplix-mobile-video-fs.mobile-playing .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe,
body.onplix-mobile-video-fs-fallback.mobile-playing .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
body.onplix-mobile-video-fs-fallback.mobile-playing .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  border-radius:0 !important;
  transform:none !important;
}

/* =========================================================
   ONPLIX THEME SURFACES
========================================================= */

:root{
  --onplix-bg-deep:#010007;
  --onplix-surface:#07030f;
  --onplix-surface-2:#0b0614;
  --onplix-surface-3:#10091d;
  --onplix-border-soft:rgba(216,180,254,.12);
  --onplix-border-strong:rgba(192,132,252,.26);
  --onplix-hover-soft:rgba(168,85,247,.11);
  --onplix-shadow-deep:0 22px 60px rgba(0,0,0,.48);
}

html,
body,
.control-wrapper,
.onplix-scale,
.onplix-app{
  background:var(--onplix-bg-deep) !important;
}

.onplix-header,
.onplix-mobile-nav{
  background:rgba(1,0,7,.96) !important;
  border-color:rgba(216,180,254,.08) !important;
}

.onplix-searchbar,
#onplix-mobile-search,
.onplix-top-iconbtn,
.onplix-time-btn{
  background:linear-gradient(180deg, rgba(16,9,29,.94), rgba(7,3,15,.94)) !important;
  border-color:var(--onplix-border-soft) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.onplix-searchbar:focus-within,
.onplix-top-iconbtn:hover,
#onplix-mobile-search:hover{
  border-color:var(--onplix-border-strong) !important;
  background:linear-gradient(180deg, rgba(21,12,38,.96), rgba(9,4,19,.96)) !important;
}

.onplix-q-clear,
.onplix-pl-menu,
.onplix-ac-dropdown,
.onplix-profile-dropdown,
.onplix-right,
.onplix-profile-session-card,
.onplix-profile-support-card,
.onplix-profile-section,
.onplix-code-card,
.onplix-profile-auth-panel,
.onplix-profile-woocommerce,
.onplix-plans-card{
  border-color:var(--onplix-border-soft) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,85,247,.105), transparent 38%),
    linear-gradient(180deg, rgba(11,6,20,.96), rgba(5,2,11,.96)) !important;
  box-shadow:var(--onplix-shadow-deep) !important;
}

.onplix-right{
  background:linear-gradient(180deg, rgba(10,5,18,.94), rgba(4,2,10,.96)) !important;
}

.onplix-profile-hero,
.onplix-plan-card,
.onplix-plan-slide,
.onplix-install-btn,
.onplix-profile-auth-actions{
  border-color:var(--onplix-border-soft) !important;
  background:
    linear-gradient(135deg, rgba(168,85,247,.105), rgba(255,255,255,.025)),
    rgba(7,3,15,.88) !important;
}

.onplix-plan-card.featured,
.onplix-plan-slide.is-active{
  border-color:rgba(192,132,252,.34) !important;
  background:
    linear-gradient(135deg, rgba(168,85,247,.18), rgba(255,255,255,.035)),
    rgba(9,4,19,.94) !important;
}

.onplix-right .onplix-item,
#onplix-recommended .onplix-item,
.onplix-ac-row,
.onplix-pl-menu-item{
  background:transparent !important;
}

.onplix-right .onplix-item:hover,
#onplix-recommended .onplix-item:hover,
.onplix-ac-row:hover,
.onplix-ac-row.is-active,
.onplix-ac-row.is-hovered,
.onplix-pl-menu-item:hover{
  background:var(--onplix-hover-soft) !important;
}

.onplix-right .onplix-item.is-playing,
#onplix-recommended .onplix-item.is-playing,
#onplix-queue .onplix-item.is-added-focus{
  border-color:rgba(192,132,252,.34) !important;
  background:linear-gradient(90deg, rgba(168,85,247,.22), rgba(168,85,247,.07)) !important;
  box-shadow:inset 4px 0 0 #a855f7, 0 10px 28px rgba(168,85,247,.12) !important;
}

.onplix-profile-form input,
.onplix-profile-form select,
.onplix-code-row input,
.onplix-profile-woocommerce .woocommerce form .form-row input.input-text,
.onplix-profile-woocommerce .woocommerce form .form-row textarea,
.onplix-profile-woocommerce .woocommerce form .password-input input,
.onplix-profile-woocommerce .woocommerce-EditAccountForm input,
.onplix-profile-woocommerce .woocommerce-address-fields input,
.onplix-profile-woocommerce .woocommerce-address-fields select{
  border-color:rgba(216,180,254,.13) !important;
  background:rgba(3,1,10,.82) !important;
}

.onplix-profile-form input:focus,
.onplix-profile-form select:focus,
.onplix-code-row input:focus{
  border-color:rgba(192,132,252,.58) !important;
  box-shadow:0 0 0 3px rgba(168,85,247,.16) !important;
}

.onplix-plans-backdrop{
  background:rgba(1,0,7,.78) !important;
}

.onplix-plans-close,
.onplix-plans-controls button{
  background:rgba(16,9,29,.88) !important;
  border-color:var(--onplix-border-soft) !important;
}

.onplix-mini-player{
  background:linear-gradient(90deg, rgba(168,85,247,.18), rgba(7,3,15,.82)) !important;
  border-color:rgba(192,132,252,.48) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.36) !important;
}

.onplix-player button,
body.mobile-view-player .onplix-player button,
.onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-player button{
  background:rgba(7,3,15,.62) !important;
  border-color:rgba(216,180,254,.12) !important;
}

.onplix-player button:hover{
  background:rgba(16,9,29,.72) !important;
}

.onplix-stage,
.onplix-yt-wrapper,
#onplix-yt{
  background:#01010C !important;
}

/* Header movil compacto para Resultados y Biblioteca. */
body.mobile-view-results .onplix-header,
body.mobile-view-library .onplix-header,
body.mobile-view-profile .onplix-header{
  height:60px !important;
  min-height:60px !important;
  max-height:60px !important;
  padding:0 10px !important;
}

body.mobile-view-results .onplix-shell,
body.mobile-view-library .onplix-shell,
body.mobile-view-profile .onplix-shell{
  padding-top:60px !important;
}

body.mobile-view-results .onplix-logo-img,
body.mobile-view-library .onplix-logo-img,
body.mobile-view-profile .onplix-logo-img{
  height:44px !important;
  max-height:44px !important;
}

body.mobile-view-results #onplix-mobile-search,
body.mobile-view-library #onplix-mobile-search{
  width:38px !important;
  height:38px !important;
}

body.mobile-view-profile #onplix-mobile-search{
  display:none !important;
}

body.mobile-view-results,
body.mobile-view-library,
body.mobile-view-profile{
  height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body.mobile-view-results .control-wrapper,
body.mobile-view-results .onplix-scale,
body.mobile-view-results .onplix-app,
body.mobile-view-results .onplix-shell,
body.mobile-view-library .control-wrapper,
body.mobile-view-library .onplix-scale,
body.mobile-view-library .onplix-app,
body.mobile-view-library .onplix-shell,
body.mobile-view-profile .control-wrapper,
body.mobile-view-profile .onplix-scale,
body.mobile-view-profile .onplix-app,
body.mobile-view-profile .onplix-shell{
  height:100dvh !important;
  max-height:100dvh !important;
  min-height:0 !important;
  overflow:hidden !important;
}

body.mobile-view-results .onplix-left,
body.mobile-view-library .onplix-created-playlists,
body.mobile-view-profile .onplix-profile-screen{
  height:calc(100dvh - 60px - 75px) !important;
  max-height:calc(100dvh - 60px - 75px) !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
}

body.mobile-view-results #onplix-results{
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
}

body.mobile-view-library .onplix-header.library-search-open .onplix-searchbar:not(.onplix-library-searchbar){
  display:none !important;
}

.onplix-header.search-open .onplix-library-searchbar{
  display:none !important;
}

body.mobile-view-library .onplix-header.library-search-open .onplix-library-searchbar{
  display:flex !important;
  width:100% !important;
  height:42px !important;
}

body.mobile-view-library .onplix-header.library-search-open .onplix-header-center{
  display:flex !important;
  width:100% !important;
}

body.mobile-view-library .onplix-header.library-search-open #onplix-library-q-clear{
  display:flex !important;
}

/* Ajuste final de respiracion inferior movil: el alto ya descuenta menu y mini player. */
body.mobile-view-results #onplix-results{
  padding-bottom:20px !important;
}

body.onplix-has-song.mobile-view-results #onplix-results,
body.onplix-has-song.mobile-view-library .onplix-created-playlists,
body.onplix-has-song.mobile-view-profile .onplix-profile-screen{
  padding-bottom:76px !important;
}

body.mobile-view-library .onplix-created-playlists{
  padding-bottom:20px !important;
}

body.mobile-view-profile .onplix-profile-screen{
  padding:14px 12px 20px !important;
}

.onplix-ac .onplix-ac-inner .onplix-ac-row:hover,
.onplix-ac .onplix-ac-inner .onplix-ac-row.is-active,
.onplix-ac .onplix-ac-inner .onplix-ac-row.is-hovered{
  background:rgba(168,85,247,.14) !important;
}

.onplix-ac .onplix-ac-inner .onplix-ac-row:hover .onplix-ac-title,
.onplix-ac .onplix-ac-inner .onplix-ac-row.is-active .onplix-ac-title,
.onplix-ac .onplix-ac-inner .onplix-ac-row.is-hovered .onplix-ac-title,
.onplix-ac .onplix-ac-inner .onplix-ac-row:hover .onplix-ac-artist,
.onplix-ac .onplix-ac-inner .onplix-ac-row.is-active .onplix-ac-artist,
.onplix-ac .onplix-ac-inner .onplix-ac-row.is-hovered .onplix-ac-artist{
  color:#fff !important;
}
.onplix-ad-overlay{
  position:absolute;
  inset:0;
  z-index:80;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:18px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease;
}
.onplix-ad-overlay.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.onplix-ad-panel{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.onplix-ad-skip{
  --ad-progress:0%;
  width:58px;
  height:58px;
  min-width:58px;
  min-height:58px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.08);
  color:#fff;
  box-shadow:none;
  cursor:pointer;
  backdrop-filter:none;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.onplix-ad-skip::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:conic-gradient(rgba(167,139,250,.82) var(--ad-progress), rgba(255,255,255,.16) 0);
  -webkit-mask:radial-gradient(circle, transparent 0 62%, #000 64% 71%, transparent 73%);
  mask:radial-gradient(circle, transparent 0 62%, #000 64% 71%, transparent 73%);
  pointer-events:none;
}
.onplix-ad-count{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  text-shadow:0 1px 6px rgba(0,0,0,.75);
}
.onplix-ad-skip:disabled{
  cursor:not-allowed;
}
body.onplix-ad-playing .onplix-player button:not(#onplix-mute),
body.onplix-ad-playing .onplix-player input:not(#onplix-vol),
body.onplix-ad-playing .onplix-yt-overlay,
body.onplix-ad-playing .onplix-video-overlay-player,
body.onplix-ad-playing #onplix-expand-video-btn,
body.onplix-ad-playing #onplix-mobile-expand-video-btn,
body.onplix-ad-playing .onplix-mobile-video-seek{
  opacity:.46!important;
  pointer-events:none!important;
  cursor:not-allowed!important;
}
body.onplix-ad-playing .onplix-ad-overlay{
  opacity:1;
  visibility:visible!important;
}
body.onplix-ad-playing .onplix-volume-block,
body.onplix-ad-playing #onplix-mute,
body.onplix-ad-playing #onplix-vol{
  opacity:1!important;
  pointer-events:auto!important;
  visibility:visible!important;
  cursor:auto!important;
}
.onplix-ad-skip.is-ready{
  background:rgba(124,58,237,.2);
  box-shadow:0 10px 24px rgba(124,58,237,.18);
}
.onplix-ad-skip.is-ready::before{
  background:conic-gradient(rgba(216,180,254,.9) 100%, rgba(255,255,255,.12) 0);
}
.onplix-ad-skip.is-ready .onplix-ad-count{
  font-size:10px;
  text-transform:uppercase;
}
.onplix-ad-skip.is-ready:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(124,58,237,.24);
}
@media(max-width:768px){
  .onplix-ad-overlay{z-index:9999;padding:12px}
  .onplix-ad-skip{width:58px;height:58px;min-width:58px;min-height:58px}
  .onplix-ad-count{font-size:16px}
  .onplix-ad-skip.is-ready .onplix-ad-count{font-size:10px}
  body.onplix-ad-playing .onplix-yt-overlay,
  body.onplix-ad-playing .onplix-video-overlay-player,
  body.onplix-ad-playing .onplix-mobile-video-player,
  body.onplix-ad-playing .onplix-mobile-video-controls,
  body.onplix-ad-playing .onplix-mobile-video-progress,
  body.onplix-ad-playing #onplix-shared-video-qr,
  body.onplix-ad-playing #onplix-mobile-shuffle,
  body.onplix-ad-playing #onplix-mobile-prev,
  body.onplix-ad-playing #onplix-mobile-playpause,
  body.onplix-ad-playing #onplix-mobile-next,
  body.onplix-ad-playing #onplix-mobile-repeat,
  body.onplix-ad-playing #onplix-mobile-expand-video-btn,
  body.onplix-ad-playing .onplix-mobile-video-seek{
    opacity:0!important;
    pointer-events:none!important;
    visibility:hidden!important;
  }
  .onplix-mobile-video-player.is-ad-hidden{
    opacity:0!important;
    pointer-events:none!important;
    visibility:hidden!important;
  }
  body.onplix-ad-playing .onplix-mini-player{
    opacity:0!important;
    pointer-events:none!important;
    visibility:hidden!important;
  }
}

body.onplix-ad-playing .onplix-mobile-video-player,
body.onplix-ad-playing .onplix-mobile-video-controls,
body.onplix-ad-playing .onplix-mobile-video-progress,
body.onplix-ad-playing #onplix-shared-video-qr,
body.onplix-ad-playing #onplix-mobile-shuffle,
body.onplix-ad-playing #onplix-mobile-prev,
body.onplix-ad-playing #onplix-mobile-playpause,
body.onplix-ad-playing #onplix-mobile-next,
body.onplix-ad-playing #onplix-mobile-repeat,
body.onplix-ad-playing #onplix-mobile-expand-video-btn,
body.onplix-ad-playing .onplix-mobile-video-seek,
.onplix-mobile-video-player.is-ad-hidden{
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
}

/* Respeta la zona segura superior en moviles con camara/notch/barra del sistema. */
@media (max-width:932px), (pointer:coarse){
  body.mobile-view-player{
    --onplix-mobile-safe-top:env(safe-area-inset-top, 0px);
    --onplix-mobile-safe-bottom:env(safe-area-inset-bottom, 0px);
  }

  body.onplix-mobile-video-fs .onplix-video,
  body.onplix-mobile-video-fs-fallback .onplix-video,
  body.onplix-iphone-video-fs .onplix-video{
    top:var(--onplix-mobile-safe-top) !important;
    bottom:var(--onplix-mobile-safe-bottom) !important;
    height:calc(var(--onplix-mobile-video-fs-h, 100dvh) - var(--onplix-mobile-safe-top) - var(--onplix-mobile-safe-bottom)) !important;
  }

  body.onplix-mobile-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active,
  body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active,
  body.onplix-iphone-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active{
    top:var(--onplix-mobile-safe-top) !important;
    bottom:var(--onplix-mobile-safe-bottom) !important;
    height:calc(var(--onplix-mobile-video-fs-h, 100dvh) - var(--onplix-mobile-safe-top) - var(--onplix-mobile-safe-bottom)) !important;
  }
}

/* Production fixes: mobile safe video offset and results below fixed header. */
@media (max-width:932px), (pointer:coarse){
  body.mobile-view-player{
    --onplix-mobile-safe-top: 0px;
    --onplix-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.mobile-view-player:not(.onplix-mobile-video-fs):not(.onplix-mobile-video-fs-fallback):not(.onplix-iphone-video-fs) .onplix-video{
    padding-top:var(--onplix-mobile-safe-top) !important;
    box-sizing:border-box !important;
  }

  body.mobile-view-player:not(.onplix-mobile-video-fs):not(.onplix-mobile-video-fs-fallback):not(.onplix-iphone-video-fs) .onplix-yt-wrapper{
    position:relative !important;
    top:auto !important;
  }

  body.mobile-view-results #onplix-results{
    padding-top:10px !important;
    scroll-padding-top:74px !important;
  }

  body.mobile-view-results .onplix-left{
    margin-top:0 !important;
    padding-top:0 !important;
  }
}
/* Mobile results layout guard after playback transitions. */
@media (max-width:932px), (pointer:coarse){
  body.mobile-view-results{
    --onplix-results-header-space:72px;
  }

  body.mobile-view-results .onplix-header{
    top:0 !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
  }

  body.mobile-view-results .onplix-shell{
    padding-top:var(--onplix-results-header-space) !important;
  }

  body.mobile-view-results .onplix-left{
    height:calc(100dvh - var(--onplix-results-header-space) - 75px) !important;
    max-height:calc(100dvh - var(--onplix-results-header-space) - 75px) !important;
    margin-top:0 !important;
    padding-top:0 !important;
    overflow:hidden !important;
  }

  body.mobile-view-results #onplix-results,
  body.onplix-has-song.mobile-view-results #onplix-results{
    height:100% !important;
    max-height:100% !important;
    padding-top:0 !important;
    scroll-padding-top:var(--onplix-results-header-space) !important;
    overflow-y:auto !important;
  }
}
/* Strong mobile results placement after returning from playback. */
@media (max-width:932px), (pointer:coarse){

  body.mobile-view-results .onplix-shell{
    padding-top:0 !important;
  }

  body.mobile-view-results .onplix-left{
    position:fixed !important;
    top:var(--onplix-results-header-space, 72px) !important;
    left:0 !important;
    right:0 !important;
    bottom:75px !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:1 !important;
  }

  body.mobile-view-results #onplix-results,
  body.onplix-has-song.mobile-view-results #onplix-results{
    height:100% !important;
    max-height:100% !important;
    padding-top:8px !important;
    padding-bottom:76px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }
}
/* Final mobile layout baseline: Results header equals Profile; player video keeps safe top. */
@media (max-width:932px), (pointer:coarse){
  body.mobile-view-results,
  body.mobile-view-profile{
    --onplix-results-header-space:60px;
  }

  body.mobile-view-results .onplix-header,
  body.mobile-view-profile .onplix-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    margin:0 !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
    transform:none !important;
    z-index:99999 !important;
  }

  body.mobile-view-results .onplix-shell,
  body.mobile-view-profile .onplix-shell{
    padding-top:60px !important;
  }

  body.mobile-view-results .onplix-left{
    position:fixed !important;
    top:60px !important;
    left:0 !important;
    right:0 !important;
    bottom:75px !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:1 !important;
  }

  body.mobile-view-results #onplix-results,
  body.onplix-has-song.mobile-view-results #onplix-results{
    height:100% !important;
    max-height:100% !important;
    padding-top:8px !important;
    padding-bottom:76px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  body.mobile-view-player{
    --onplix-mobile-safe-top: 0px;
  }

  body.mobile-view-player:not(.onplix-mobile-video-fs):not(.onplix-mobile-video-fs-fallback):not(.onplix-iphone-video-fs) .onplix-video{
    padding-top:var(--onplix-mobile-safe-top) !important;
    margin-top:0 !important;
    box-sizing:border-box !important;
    transform:none !important;
  }

  body.mobile-view-player:not(.onplix-mobile-video-fs):not(.onplix-mobile-video-fs-fallback):not(.onplix-iphone-video-fs) .onplix-yt-wrapper{
    position:relative !important;
    top:auto !important;
    margin-top:0 !important;
    transform:none !important;
  }
}
/* Shared add stability: prevent browser scroll anchoring from moving the player/video. */
.onplix-app,
.onplix-shell,
.onplix-video,
.onplix-yt-wrapper,
.onplix-right,
#onplix-shared,
#onplix-shared-list{
  overflow-anchor:none !important;
}

/* Mobile video controls only appear after a real tap on the video. */
@media (max-width:932px), (pointer:coarse){
  body.mobile-view-player:not(.onplix-mobile-video-controls-touched) .onplix-yt-wrapper.show-player-overlay .onplix-mobile-video-player,
  body.mobile-view-player:not(.onplix-mobile-video-controls-touched) .onplix-mobile-video-player.show,
  body.mobile-view-player:not(.onplix-mobile-video-controls-touched) .onplix-yt-wrapper.show-player-overlay .onplix-player,
  body.mobile-view-player:not(.onplix-mobile-video-controls-touched) .onplix-player.show,
  body.mobile-view-player:not(.onplix-mobile-video-controls-touched) .onplix-yt-overlay.show{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* Mobile YouTube native controls blocker: all taps go through EAG overlay. */
@media (max-width:932px), (pointer:coarse){
  body.mobile-view-player .onplix-yt-wrapper #onplix-yt,
  body.mobile-view-player .onplix-yt-wrapper iframe,
  .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
  .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe{
    pointer-events:none !important;
    touch-action:none !important;
  }

  body.mobile-view-player .onplix-yt-wrapper .onplix-yt-overlay,
  .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-yt-overlay{
    z-index:2147481000 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
}

/* Mobile EAG controls must sit above the iframe blocker after touch reveal. */
@media (max-width:932px), (pointer:coarse){
  body.mobile-view-player.onplix-mobile-video-controls-touched .onplix-yt-wrapper.show-player-overlay .onplix-mobile-video-player,
  body.mobile-view-player.onplix-mobile-video-controls-touched .onplix-mobile-video-player.show,
  body.onplix-mobile-video-fs.onplix-mobile-video-controls-touched .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-mobile-video-player.show,
  body.onplix-mobile-video-fs-fallback.onplix-mobile-video-controls-touched .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-mobile-video-player.show{
    z-index:2147482000 !important;
    pointer-events:auto !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body.mobile-view-player.onplix-mobile-video-controls-touched .onplix-mobile-video-controls,
  body.mobile-view-player.onplix-mobile-video-controls-touched .onplix-mobile-video-player button,
  body.mobile-view-player.onplix-mobile-video-controls-touched .onplix-mobile-video-progress,
  body.mobile-view-player.onplix-mobile-video-controls-touched .onplix-mobile-video-seek{
    pointer-events:auto !important;
  }
}

/* Mobile video tap layer stays touchable even when EAG controls are hidden. */
@media (max-width:932px), (pointer:coarse){
  body.mobile-view-player:not(.onplix-mobile-video-controls-touched) .onplix-yt-wrapper .onplix-yt-overlay,
  body.mobile-view-player:not(.onplix-mobile-video-controls-touched) .onplix-yt-wrapper .onplix-yt-overlay.show,
  body.onplix-mobile-video-fs:not(.onplix-mobile-video-controls-touched) .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-yt-overlay,
  body.onplix-mobile-video-fs-fallback:not(.onplix-mobile-video-controls-touched) .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-yt-overlay{
    opacity:0 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:2147481000 !important;
    touch-action:manipulation !important;
  }
}

/* Ad layer wins over mobile iframe blocker; YouTube iframe remains untouchable. */
@media (max-width:932px), (pointer:coarse){
  body.onplix-ad-playing .onplix-yt-wrapper #onplix-yt,
  body.onplix-ad-playing .onplix-yt-wrapper iframe,
  body.onplix-ad-playing .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
  body.onplix-ad-playing .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe{
    pointer-events:none !important;
    touch-action:none !important;
  }

  body.onplix-ad-playing .onplix-yt-wrapper .onplix-yt-overlay,
  body.onplix-ad-playing .onplix-yt-wrapper .onplix-yt-overlay.show,
  body.onplix-ad-playing .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-yt-overlay{
    pointer-events:none !important;
    touch-action:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    z-index:1 !important;
  }

  body.onplix-ad-playing .onplix-ad-overlay,
  body.onplix-ad-playing .onplix-ad-overlay.is-visible{
    z-index:2147483000 !important;
    pointer-events:auto !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body.onplix-ad-playing .onplix-ad-panel,
  body.onplix-ad-playing .onplix-ad-skip,
  body.onplix-ad-playing .onplix-ad-skip *{
    pointer-events:auto !important;
  }
}

/* Final mobile native YouTube control lock: iframe never receives touch. */
@media (max-width:932px), (pointer:coarse){
  body.mobile-view-player .onplix-yt-wrapper #onplix-yt,
  body.mobile-view-player .onplix-yt-wrapper #onplix-yt iframe,
  body.mobile-view-player .onplix-yt-wrapper iframe,
  body.mobile-playing .onplix-yt-wrapper #onplix-yt,
  body.mobile-playing .onplix-yt-wrapper #onplix-yt iframe,
  body.mobile-playing .onplix-yt-wrapper iframe,
  body.onplix-mobile-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
  body.onplix-mobile-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt iframe,
  body.onplix-mobile-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe,
  body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt,
  body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active #onplix-yt iframe,
  body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active iframe{
    pointer-events:none !important;
    touch-action:none !important;
    -webkit-user-select:none !important;
    user-select:none !important;
  }

  body.mobile-view-player .onplix-yt-wrapper .onplix-yt-overlay,
  body.mobile-playing .onplix-yt-wrapper .onplix-yt-overlay,
  body.onplix-mobile-video-fs .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-yt-overlay,
  body.onplix-mobile-video-fs-fallback .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-yt-overlay{
    z-index:2147482500 !important;
    pointer-events:auto !important;
    visibility:visible !important;
    touch-action:manipulation !important;
  }

  body.mobile-view-player.onplix-mobile-video-controls-touched .onplix-mobile-video-player.show,
  body.mobile-view-player.onplix-mobile-video-controls-touched .onplix-yt-wrapper.show-player-overlay .onplix-mobile-video-player,
  body.onplix-mobile-video-fs.onplix-mobile-video-controls-touched .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-mobile-video-player.show,
  body.onplix-mobile-video-fs-fallback.onplix-mobile-video-controls-touched .onplix-yt-wrapper.onplix-mobile-video-fs-active .onplix-mobile-video-player.show{
    z-index:2147482600 !important;
    pointer-events:auto !important;
  }

  body.onplix-ad-playing .onplix-yt-wrapper .onplix-yt-overlay{
    pointer-events:none !important;
    z-index:1 !important;
  }

  body.onplix-ad-playing .onplix-ad-overlay,
  body.onplix-ad-playing .onplix-ad-overlay.is-visible{
    z-index:2147483000 !important;
    pointer-events:auto !important;
  }
}

/* Membership and device purchase polish */
.onplix-members-card{
  display:grid;
  gap:10px;
}
.onplix-members-collapsed{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
}
.onplix-members-manage{
  min-height:34px;
  border:0;
  border-radius:12px;
  padding:0 14px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  box-shadow:0 10px 20px rgba(124,58,237,.22);
  cursor:pointer;
}
.onplix-members-manage:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(124,58,237,.30);
}
.onplix-members-section{
  display:grid;
  gap:9px;
}
.onplix-members-section[hidden]{
  display:none !important;
}
.onplix-members-fields{
  display:grid;
  gap:8px;
}
.onplix-members-email-row{
  position:relative;
  display:block;
  margin:0;
}
.onplix-members-email-row input{
  width:100%;
  padding-right:38px;
  min-height:34px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:0 12px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  background:rgba(5,6,10,.62);
  outline:none;
}
.onplix-members-email-row input::placeholder{
  color:rgba(255,255,255,.42);
}
.onplix-members-email-row input:focus{
  border-color:rgba(192,132,252,.58);
  box-shadow:0 0 0 3px rgba(168,85,247,.14);
}
.onplix-members-section [data-onplix-members-save]{
  width:max-content;
  min-width:96px;
  min-height:34px;
  border:0;
  border-radius:12px;
  padding:0 16px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  box-shadow:0 10px 20px rgba(124,58,237,.22);
  cursor:pointer;
}
.onplix-members-section [data-onplix-members-save]:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(124,58,237,.30);
}

.onplix-checkout-device-control{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin-top:7px;
  padding:0;
  border:0;
  border-radius:0;
  color:#fff;
  background:transparent;
  box-shadow:none;
}
.onplix-checkout-device-control > span:first-child{
  color:#f5d0fe;
  font-size:10px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.onplix-checkout-device-stepper{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px;
  border-radius:999px;
  background:transparent;
}
.onplix-checkout-device-stepper button{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border:1px solid rgba(216,180,254,.72);
  border-radius:8px;
  color:#f5d0fe;
  font-size:14px;
  font-weight:950;
  line-height:1;
  background:linear-gradient(180deg, rgba(168,85,247,.22), rgba(88,28,135,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 5px 12px rgba(124,58,237,.20);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.onplix-checkout-device-stepper button:hover{
  border-color:rgba(245,208,254,.96);
  color:#fff;
  background:linear-gradient(135deg, rgba(192,132,252,.48), rgba(124,58,237,.42));
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(168,85,247,.14), 0 9px 18px rgba(124,58,237,.32);
}
.onplix-checkout-device-stepper button:active{
  transform:translateY(0) scale(.96);
}
.onplix-checkout-device-count{
  display:grid;
  place-items:center;
  min-width:26px;
  height:22px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  color:#ffffff;
  font-size:13px;
  font-weight:950;
  line-height:1;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
}
.onplix-checkout-device-extra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:min(260px, 100%);
  margin-top:6px;
  padding:7px 10px;
  border:1px solid rgba(34,211,238,.20);
  border-radius:12px;
  color:#cffafe;
  background:rgba(34,211,238,.075);
}
.onplix-checkout-device-extra small{
  color:#bae6fd;
  font-size:10px;
  font-weight:850;
}
.onplix-checkout-device-extra strong{
  color:#fff;
  font-size:12px;
  font-weight:950;
}
.onplix-checkout-base-price{
  color:rgba(255,255,255,.58);
  font-size:10px;
  font-style:normal;
  font-weight:850;
}

.onplix-checkout-device-picker{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}
.onplix-checkout-device-picker button{
  min-height:34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:0 12px;
  color:#dbeafe;
  font-size:12px;
  font-weight:850;
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.onplix-checkout-device-picker button.is-selected{
  border-color:rgba(34,211,238,.60);
  color:#fff;
  background:linear-gradient(135deg, rgba(34,211,238,.34), rgba(124,58,237,.42));
  box-shadow:0 10px 22px rgba(34,211,238,.16);
}
.onplix-devices-card{
  width:min(390px, 94vw);
}
.onplix-device-offer{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:13px;
  align-items:center;
  margin:14px 0;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.055);
}
.onplix-device-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:16px;
  color:#fff;
  font-size:22px;
  font-weight:950;
  background:linear-gradient(135deg, #22d3ee, #7c3aed);
  box-shadow:0 14px 24px rgba(34,211,238,.18);
}
.onplix-device-offer strong,
.onplix-device-offer span{
  display:block;
}
.onplix-device-offer strong{
  color:#fff;
  font-size:16px;
  font-weight:900;
}
.onplix-device-offer span{
  margin-top:4px;
  color:rgba(255,255,255,.70);
  font-size:12px;
  line-height:1.45;
}
.onplix-device-benefits{
  margin-bottom:14px;
}

.onplix-members-card .onplix-profile-section-title {
  margin-bottom: -4px;
}

.onplix-members-collapsed .onplix-code-help {
  margin-top: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
}

.onplix-members-manage {
  border: 1px solid rgba(167, 88, 255, .55);
  border-radius: 12px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-weight: 900;
  min-height: 34px;
  padding: 0 14px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(124, 58, 237, .22);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.onplix-members-manage:hover {
  transform: translateY(-1px);
  border-color: rgba(216, 180, 254, .9);
  box-shadow: 0 14px 26px rgba(124, 58, 237, .32);
}

.onplix-members-status{
  position:absolute;
  top:50%;
  right:10px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:950;
  line-height:1;
  transform:translateY(-50%);
  pointer-events:none;
}
.onplix-members-status.is-loading{
  border:2px solid rgba(216,180,254,.28);
  border-top-color:#c084fc;
  animation:onplixMembersSpin .8s linear infinite;
}
.onplix-members-status.is-saved{
  background:linear-gradient(135deg,#c084fc,#8b5cf6);
  box-shadow:0 0 0 3px rgba(168,85,247,.18);
}
.onplix-members-status.is-error{
  background:linear-gradient(135deg,#fb7185,#e11d48);
  box-shadow:0 0 0 3px rgba(225,29,72,.14);
}
@keyframes onplixMembersSpin{
  to{ transform:translateY(-50%) rotate(360deg); }
}

.onplix-plan-slide-members{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:3px;
  padding:5px 10px;
  border:1px solid rgba(216,180,254,.36);
  border-radius:999px;
  color:#f5d0fe;
  font-size:10px;
  font-weight:950;
  line-height:1;
  letter-spacing:.045em;
  text-transform:uppercase;
  background:rgba(168,85,247,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* Invitado QR: sin preseleccion por touch/hover en lista compartida */
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing),
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing):hover,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing):active,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing):focus,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing):focus-visible,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing).is-selected,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing).is-next,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing).is-last-shared{
  border-color:rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.04) !important;
  box-shadow:none !important;
  transform:none !important;
}

body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing):hover::before,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing):active::before,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing):focus::before,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing).is-selected::before,
body.onplix-shared-guest #onplix-shared-list .onplix-shared-item:not(.is-playing).is-next::before{
  opacity:0 !important;
  background:transparent !important;
}



.onplix-modal.is-profile-complete .onplix-modal-card{
  width:min(94vw,430px);
}

.onplix-profile-complete-form{
  display:grid;
  gap:12px;
  margin-top:4px;
}

.onplix-profile-complete-form p{
  margin:0 0 2px;
  color:rgba(255,255,255,.70);
  font-size:13px;
  line-height:1.35;
}

.onplix-profile-complete-form label{
  display:grid;
  gap:6px;
  color:#fff;
}

.onplix-profile-complete-form label span{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.onplix-profile-complete-form input{
  width:100%;
  height:42px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.065);
  color:#fff;
  padding:0 13px;
  font-size:14px;
  outline:0;
  box-sizing:border-box;
}

.onplix-profile-complete-form input:focus{
  border-color:rgba(168,85,247,.72);
  box-shadow:0 0 0 3px rgba(168,85,247,.16);
}

.onplix-profile-complete-message{
  min-height:18px;
  color:#c4b5fd;
  font-size:12px;
  font-weight:800;
}

/* Remote device control - phase 1 */
.onplix-remote-control-card{
  display:grid;
  gap:10px;
}
.onplix-remote-control-card[hidden],
.onplix-remote-control-card.is-hidden{
  display:none !important;
}
.onplix-remote-collapse{
  width:100%;
  border:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  color:#fff;
  text-align:left;
  background:transparent;
  cursor:pointer;
}
.onplix-remote-collapse > span:first-child{
  display:grid;
  gap:4px;
}
.onplix-remote-collapse small{
  color:rgba(255,255,255,.58);
  font-size:11px;
  font-weight:750;
  line-height:1.3;
}
.onplix-remote-arrow{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid rgba(216,180,254,.38);
  border-radius:999px;
  color:#d8b4fe;
  font-size:18px;
  line-height:1;
  background:rgba(168,85,247,.12);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.onplix-remote-control-card.is-open .onplix-remote-arrow{
  transform:rotate(180deg);
  border-color:rgba(216,180,254,.68);
  background:rgba(168,85,247,.24);
}
.onplix-remote-control-body{
  display:grid;
  gap:9px;
}
.onplix-remote-control-body[hidden]{
  display:none !important;
}
.onplix-remote-mode-row,
.onplix-remote-device-list{
  display:grid;
  gap:8px;
}
.onplix-remote-mode,
.onplix-remote-device{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.onplix-remote-mode{
  display:grid;
  gap:3px;
  padding:10px 12px;
  text-align:left;
}
.onplix-remote-mode span,
.onplix-remote-device-copy strong{
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
}
.onplix-remote-mode small,
.onplix-remote-device-copy small{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:750;
  line-height:1.25;
}
.onplix-remote-device{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:9px;
  text-align:left;
}
.onplix-remote-device:hover,
.onplix-remote-mode:hover{
  transform:translateY(-1px);
  border-color:rgba(216,180,254,.46);
  background:linear-gradient(135deg, rgba(168,85,247,.16), rgba(34,211,238,.06));
  box-shadow:0 12px 24px rgba(124,58,237,.16);
}
.onplix-remote-device.is-selected,
.onplix-remote-mode.is-selected{
  border-color:rgba(192,132,252,.72);
  background:linear-gradient(135deg, rgba(168,85,247,.28), rgba(8,145,178,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(124,58,237,.20);
}
.onplix-remote-device-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(216,180,254,.24);
  border-radius:11px;
  color:#d8b4fe;
  background:rgba(168,85,247,.12);
}
.onplix-remote-device-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.onplix-remote-device-copy{
  min-width:0;
}
.onplix-remote-device-copy strong,
.onplix-remote-device-copy small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.onplix-remote-device-action{
  min-width:78px;
  border:1px solid rgba(216,180,254,.38);
  border-radius:999px;
  padding:7px 10px;
  color:#f5d0fe;
  font-size:10px;
  font-weight:950;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
  background:rgba(168,85,247,.13);
}
.onplix-remote-device.is-selected .onplix-remote-device-action{
  border-color:rgba(34,211,238,.45);
  color:#cffafe;
  background:rgba(34,211,238,.13);
}
.onplix-remote-empty{
  border:1px dashed rgba(216,180,254,.28);
  border-radius:13px;
  padding:11px 12px;
  color:rgba(255,255,255,.66);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
  background:rgba(255,255,255,.035);
}
/* Remote controller mode: the controller device never plays local video. */
body.onplix-remote-control-active .onplix-yt-wrapper #onplix-yt,
body.onplix-remote-control-active .onplix-yt-wrapper iframe{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.onplix-remote-control-active .onplix-video-blackout,
body.onplix-remote-control-active.onplix-has-song .onplix-video-blackout{
  opacity:1 !important;
  visibility:visible !important;
  z-index:36;
  background:radial-gradient(circle at 50% 42%, rgba(124,58,237,.18), transparent 38%), #050507;
}
body.onplix-remote-control-active .onplix-video-blackout img{
  width:min(150px, 32%);
  max-height:82px;
  opacity:.96;
  filter:drop-shadow(0 16px 30px rgba(168,85,247,.28));
}
body.onplix-remote-control-active .onplix-yt-overlay{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.onplix-remote-control-active .onplix-mobile-video-player,
body.onplix-remote-control-active .onplix-mobile-video-player.show,
body.onplix-remote-control-active .onplix-yt-wrapper.show-player-overlay .onplix-mobile-video-player{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:2147482600 !important;
}
body.onplix-remote-control-active .onplix-mobile-video-controls{
  pointer-events:auto !important;
}
body.onplix-remote-control-active .onplix-mobile-video-player button{
  pointer-events:auto !important;
}
body.onplix-remote-control-active .onplix-mobile-video-player::before{
  content:"CONTROLADOR";
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  z-index:1;
  border:1px solid rgba(216,180,254,.34);
  border-radius:999px;
  padding:6px 10px;
  color:#f5d0fe;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  line-height:1;
  background:rgba(11,11,18,.72);
  backdrop-filter:blur(10px);
}

@media (max-width:932px), (pointer:coarse){
  body.onplix-remote-control-active:not(.mobile-view-player) .onplix-yt-wrapper .onplix-mobile-video-player,
  body.onplix-remote-control-active:not(.mobile-view-player) .onplix-yt-wrapper.show-player-overlay .onplix-mobile-video-player,
  body.onplix-remote-control-active:not(.mobile-view-player) .onplix-mobile-video-player.show{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:2147482600 !important;
  }

  body.onplix-remote-control-active:not(.mobile-view-player) .onplix-video,
  body.onplix-remote-control-active:not(.mobile-view-player) .onplix-yt-wrapper{
    margin-top:0 !important;
    transform:none !important;
  }
}
body.onplix-remote-control-active .onplix-mobile-video-progress{
  opacity:.82;
}

/* Remote controller: keep the logo and playback controls always visible. */
body.onplix-remote-control-active .onplix-video-blackout,
body.onplix-remote-control-active.onplix-has-song .onplix-video-blackout{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
}
body.onplix-remote-control-active .onplix-video-blackout img{
  display:block !important;
  opacity:.96 !important;
  visibility:visible !important;
}
body.onplix-remote-control-active .onplix-mobile-video-player,
body.onplix-remote-control-active .onplix-mobile-video-player.show,
body.onplix-remote-control-active .onplix-yt-wrapper.show-player-overlay .onplix-mobile-video-player,
body.onplix-remote-control-active:not(.onplix-mobile-video-controls-touched) .onplix-mobile-video-player.show,
body.onplix-remote-control-active:not(.onplix-mobile-video-controls-touched) .onplix-yt-wrapper.show-player-overlay .onplix-mobile-video-player{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
body.onplix-remote-control-active .onplix-mobile-video-controls,
body.onplix-remote-control-active .onplix-mobile-video-player button,
body.onplix-remote-control-active .onplix-mobile-video-progress,
body.onplix-remote-control-active .onplix-mobile-video-seek{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
body.onplix-remote-control-active .onplix-mobile-video-controls{
  display:flex !important;
  z-index:2147482700 !important;
}
/* Profile collapsible sections polish */
.onplix-members-card .onplix-profile-section-title,
.onplix-remote-collapse .onplix-profile-section-title{
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
}
.onplix-members-copy{
  display:grid;
  gap:3px;
}
.onplix-members-manage,
.onplix-remote-arrow{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  min-width:30px;
  min-height:30px;
  border:1px solid rgba(216,180,254,.38);
  border-radius:999px;
  padding:0;
  color:#d8b4fe;
  background:rgba(168,85,247,.12);
  box-shadow:none;
}
.onplix-members-manage svg,
.onplix-remote-arrow svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s ease;
}
.onplix-members-card.is-open .onplix-members-manage svg,
.onplix-remote-control-card.is-open .onplix-remote-arrow svg{
  transform:rotate(180deg);
}
.onplix-members-manage:hover,
.onplix-remote-collapse:hover .onplix-remote-arrow{
  transform:translateY(-1px);
  border-color:rgba(216,180,254,.68);
  background:rgba(168,85,247,.22);
}
.onplix-install-note{
  margin:-2px 0 10px;
  color:rgba(255,255,255,.62);
  font-size:11px;
  font-weight:750;
  line-height:1.35;
}

/* Remote controller buttons keep the same visual language as independent mode. */
body.onplix-remote-control-active .onplix-mobile-video-player button{
  color:#fff !important;
  background:rgba(0,0,0,.44) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px) !important;
}
body.onplix-remote-control-active .onplix-mobile-video-player button.active,
body.onplix-remote-control-active .onplix-mobile-video-player button.is-active{
  color:#d8b4fe !important;
  border-color:rgba(216,180,254,.44) !important;
  background:rgba(168,85,247,.18) !important;
}

/* Profile typography sync */
.onplix-profile-card-label,
.onplix-profile-section-title,
.onplix-members-card .onplix-profile-section-title,
.onplix-remote-collapse .onplix-profile-section-title{
  color:#c084fc !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.12 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}
.onplix-profile-section-title,
.onplix-members-card .onplix-profile-section-title{
  margin-bottom:11px !important;
}
.onplix-profile-card-value,
.onplix-plan-name{
  color:#fff !important;
  font-size:16px !important;
  font-weight:900 !important;
  line-height:1.1 !important;
}
.onplix-members-copy .onplix-code-help,
.onplix-install-note{
  color:rgba(255,255,255,.62) !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
}
.onplix-members-collapsed .onplix-code-help{
  margin-top:0 !important;
}
.onplix-members-manage,
.onplix-remote-arrow{
  border-radius:999px !important;
  color:#d8b4fe !important;
  background:rgba(168,85,247,.12) !important;
  box-shadow:none !important;
}

/* Profile helper text sync */
.onplix-profile-screen .onplix-code-help,
.onplix-profile-dropdown .onplix-code-help,
.onplix-profile-screen .onplix-plan-copy,
.onplix-profile-dropdown .onplix-plan-copy,
.onplix-profile-screen .onplix-install-note,
.onplix-profile-dropdown .onplix-install-note,
.onplix-profile-screen .onplix-remote-collapse small,
.onplix-profile-dropdown .onplix-remote-collapse small,
.onplix-members-copy .onplix-code-help{
  color:rgba(255,255,255,.62) !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
}

/* Profile heading labels sync */
.onplix-profile-eyebrow,
.onplix-profile-support-copy span{
  color:#c084fc !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.12 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}


/* Ajuste final: caratulas grandes en biblioteca movil */
body.mobile-view-library #onplix-playlists .onplix-pl-card,
body.mobile-view-library #onplix-smart-playlists .onplix-library-placeholder,
body.mobile-view-library .onplix-library-smart .onplix-library-placeholder{
  width:100% !important;
  min-width:0 !important;
  align-items:center !important;
}

body.mobile-view-library #onplix-playlists .onplix-pl-cover,
body.mobile-view-library #onplix-smart-playlists .onplix-library-cover,
body.mobile-view-library .onplix-library-smart .onplix-library-cover{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  aspect-ratio:1 / 1 !important;
  margin:0 auto !important;
}

body.mobile-view-library #onplix-playlists .onplix-pl-name,
body.mobile-view-library #onplix-playlists .onplix-pl-count,
body.mobile-view-library #onplix-smart-playlists .onplix-library-name,
body.mobile-view-library .onplix-library-smart .onplix-library-name{
  width:100% !important;
  text-align:center !important;
}

/* Ajuste final: caratulas grandes tambien en Para ti/Recomendados movil */
body.mobile-view-library #onplix-smart-playlists .onplix-pl-card,
body.mobile-view-library #onplix-smart-playlists .onplix-smart-card{
  width:100% !important;
  min-width:0 !important;
  align-items:center !important;
}

body.mobile-view-library #onplix-smart-playlists .onplix-pl-cover,
body.mobile-view-library #onplix-smart-playlists .onplix-smart-card .onplix-pl-cover{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  aspect-ratio:1 / 1 !important;
  margin:0 auto !important;
}

body.mobile-view-library #onplix-smart-playlists .onplix-pl-name,
body.mobile-view-library #onplix-smart-playlists .onplix-pl-count{
  width:100% !important;
  text-align:center !important;
}

/* Ajuste final: artistas movil con texto mas legible */
body.mobile-view-library #onplix-artists{
  grid-auto-columns:calc((100% - 12px) / 2) !important;
  gap:12px !important;
}

body.mobile-view-library #onplix-artists .onplix-artist-card{
  width:100% !important;
  min-width:0 !important;
  align-items:center !important;
}

body.mobile-view-library #onplix-artists .onplix-artist-card .onplix-pl-name{
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

body.mobile-view-library #onplix-artists .onplix-artist-card .onplix-pl-count{
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Ajuste final: artistas en 3 columnas y scroll tactil sin barra */
body.mobile-view-library #onplix-artists{
  grid-auto-columns:calc((100% - 24px) / 3) !important;
  gap:12px !important;
}

body.mobile-view-library #onplix-artists .onplix-artist-card .onplix-pl-name,
body.mobile-view-library #onplix-artists .onplix-artist-card .onplix-pl-count{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:center !important;
}

body.mobile-view-library #onplix-playlists,
body.mobile-view-library #onplix-smart-playlists{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  -webkit-overflow-scrolling:touch !important;
}

body.mobile-view-library #onplix-playlists::-webkit-scrollbar,
body.mobile-view-library #onplix-smart-playlists::-webkit-scrollbar,
body.mobile-view-library #onplix-playlists::-webkit-scrollbar-track,
body.mobile-view-library #onplix-smart-playlists::-webkit-scrollbar-track,
body.mobile-view-library #onplix-playlists::-webkit-scrollbar-thumb,
body.mobile-view-library #onplix-smart-playlists::-webkit-scrollbar-thumb{
  width:0 !important;
  height:0 !important;
  display:none !important;
  background:transparent !important;
}

/* Biblioteca inteligente: Para ti y Artistas */
#onplix-smart-playlists .onplix-smart-card,
#onplix-artists .onplix-artist-card{
  cursor:pointer;
}

#onplix-smart-playlists .onplix-pl-count,
#onplix-artists .onplix-pl-count{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#onplix-smart-playlists .onplix-pl-cover{
  background:
    radial-gradient(circle at 30% 20%, rgba(168,85,247,.22), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(10,10,16,.96));
}

#onplix-smart-playlists .onplix-pl-grid img,
#onplix-smart-playlists .onplix-pl-empty{
  min-width:0;
  min-height:0;
}

#onplix-smart-playlists .onplix-pl-empty{
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(168,85,247,.12)),
    rgba(18,18,24,.96);
}

#onplix-artists .onplix-artist-cover{
  background:
    radial-gradient(circle at 50% 30%, rgba(192,132,252,.25), transparent 48%),
    rgba(18,18,24,.96);
}

@media (min-width:769px){
  #onplix-smart-playlists,
  #onplix-artists{
    grid-auto-columns:calc((100% - (16px * 4)) / 5);
  }
}

body.mobile-view-library #onplix-smart-playlists,
body.mobile-view-library #onplix-artists{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-template-rows:repeat(3, auto) !important;
  grid-template-columns:none !important;
  grid-auto-columns:calc((100% - 20px) / 3) !important;
  gap:8px 10px !important;
  width:100% !important;
  padding:8px 2px 12px !important;
  margin:0 auto !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

body.mobile-view-library #onplix-smart-playlists::-webkit-scrollbar,
body.mobile-view-library #onplix-artists::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

body.mobile-view-library #onplix-smart-playlists .onplix-pl-card,
body.mobile-view-library #onplix-artists .onplix-pl-card{
  width:100% !important;
  min-width:0 !important;
  align-items:center !important;
  justify-content:flex-start !important;
  scroll-snap-align:start !important;
}

body.mobile-view-library #onplix-smart-playlists .onplix-pl-cover,
body.mobile-view-library #onplix-artists .onplix-pl-cover{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  aspect-ratio:1 / 1 !important;
  margin:0 auto !important;
}

body.mobile-view-library #onplix-artists .onplix-pl-cover{
  border-radius:999px !important;
}

body.mobile-view-library #onplix-smart-playlists .onplix-pl-name,
body.mobile-view-library #onplix-smart-playlists .onplix-pl-count,
body.mobile-view-library #onplix-artists .onplix-pl-name,
body.mobile-view-library #onplix-artists .onplix-pl-count{
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

body.mobile-view-library #onplix-smart-playlists .onplix-pl-name,
body.mobile-view-library #onplix-artists .onplix-pl-name{
  margin-top:6px !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.14 !important;
}

body.mobile-view-library #onplix-smart-playlists .onplix-pl-count,
body.mobile-view-library #onplix-artists .onplix-pl-count{
  margin-top:2px !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  line-height:1.12 !important;
  color:rgba(255,255,255,.64) !important;
}