/* Final headbar artifact fix: one solid layer, no pseudo gradients/blur. */
.watch-topbar{
  background:rgba(24,24,24,.96) !important;
  background-color:rgba(24,24,24,.96) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:hidden !important;
}

.watch-topbar::before,
.watch-topbar::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html[data-watch-theme="light"] .watch-topbar{
  background:rgba(246,247,249,.96) !important;
  background-color:rgba(246,247,249,.96) !important;
}

/* Prevent Material Icons ligature text from flashing before icon CSS is parsed. */
.watch-topbar .watch-mi,
.watch-burgermenu .watch-mi{
  font-size:0 !important;
  line-height:0 !important;
  letter-spacing:0 !important;
  text-indent:0 !important;
  overflow:hidden !important;
}

/* Hide occasional 1px browser/extension artifact crossing the fixed headbar. */
html::before{
  content:"";
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:2px;
  z-index:2147483646;
  background:#050505;
  pointer-events:none;
}

html[data-watch-theme="light"]::before{
  background:#F3F4F6;
}
/* ==========================================================================
   Watch toasts (bottom-right). Used by settings save, etc.
   z-index above all modals (settings=20000, search=30000, auth=32000).
   ========================================================================== */
.watch-toast-wrap--bl{
  position:fixed;
  right:24px;
  bottom:24px;
  left:auto;
  top:auto;
  z-index:40000;
  display:flex;
  flex-direction:column-reverse; /* newest at bottom, older stack upwards */
  gap:10px;
  pointer-events:none;
  max-width:calc(100vw - 32px);
}
.watch-toast-wrap--bl .watch-toast{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:260px;
  max-width:380px;
  padding:14px 18px 14px 14px;
  border-radius:16px;
  background:rgba(var(--w-bg-rgb,14,14,16),.82);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(var(--w-ink-rgb,255,255,255),.10);
  color:var(--w-text,#fff);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.35;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  transform:translate(16px,0) scale(.98);
  opacity:0;
  transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  will-change:transform,opacity;
}
.watch-toast-wrap--bl .watch-toast.is-show{
  transform:translate(0,0) scale(1);
  opacity:1;
}
.watch-toast-wrap--bl .watch-toast__icon{
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}
.watch-toast-wrap--bl .watch-toast__icon .material-icons-outlined{
  font-size:22px;
  line-height:1;
}
.watch-toast-wrap--bl .watch-toast__text{
  flex:1 1 auto;
  min-width:0;
}
.watch-toast-wrap--bl .watch-toast--ok .watch-toast__icon{
  background:transparent;
  color:#4ace90;
}
.watch-toast-wrap--bl .watch-toast--error .watch-toast__icon{
  background:transparent;
  color:#ff7b7b;
}

/* Light theme */
html[data-watch-theme="light"] .watch-toast-wrap--bl .watch-toast{
  background:rgba(255,255,255,.92);
  color:#1a1a1a;
  border-color:rgba(0,0,0,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06);
}
html[data-watch-theme="light"] .watch-toast-wrap--bl .watch-toast__icon{
  background:transparent;
}
html[data-watch-theme="light"] .watch-toast-wrap--bl .watch-toast--ok .watch-toast__icon{
  color:#14885a;
}
html[data-watch-theme="light"] .watch-toast-wrap--bl .watch-toast--error .watch-toast__icon{
  color:#b93838;
}

/* Reduced motion: skip transitions, just fade */
@media (prefers-reduced-motion: reduce){
  .watch-toast-wrap--bl .watch-toast{
    transition:opacity .16s ease;
    transform:none;
  }
}

html.watch-settings-page::-webkit-scrollbar,
body.watch-settings-page::-webkit-scrollbar{
  width:0!important;
  height:0!important;
}
html.watch-settings-page, body.watch-settings-page{
  scrollbar-width:none;
}
html.watch-settings-page .watch-header,
html.watch-settings-page .watch-footer,
html.watch-settings-mode .watch-header,
html.watch-settings-mode .watch-footer{
  display:none !important;
}
html.watch-settings-page .watch-page > :not(.watch-settings-root),
html.watch-settings-mode .watch-page > :not(.watch-settings-root){
  display:none !important;
}
html.watch-settings-page .watch-settings-root,
html.watch-settings-mode .watch-settings-root{
  display:block !important;
}
      /* unify right filters panel color (header + body) without touching search logic */
      #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight,
      #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{
        background:#12161f !important;
        background-image:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
      }
      #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__topRight{
        border-bottom-color:transparent !important;
        box-shadow:none !important;
      }
      #watchSearchModal.watch-searchmodal--modern .watch-searchmodal__filters{
        border-top-color:transparent !important;
      }

      /* Settings modal: dark solid background + animated tab transitions */
      #watchSettingsModal .watch-settingsmodal__overlay{
        background:rgba(6,10,16,.10) !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        opacity:0 !important;
        transition:opacity var(--watch-search-blur-dur,.28s) cubic-bezier(.22,1,.36,1) !important;
        transition-delay:0s !important;
        will-change:opacity;
      }
      /* Use the same blur layer as search modal for identical effect/performance */
      body.watch-settingsmodal-open #watchSearchBgBlurFx{
        visibility:visible !important;
        opacity:1 !important;
        z-index:31998 !important;
      }
      body.watch-settingsmodal-open #watchSearchBgBlurFx.is-closing{
        opacity:1 !important;
      }
      body.watch-settingsmodal-open #watchSettingsModal{
        z-index:32000 !important;
      }
      body.watch-settingsmodal-open #watchSettingsModal .watch-settingsmodal__overlay{
        z-index:1 !important;
      }
      body.watch-settingsmodal-open #watchSettingsModal .watch-settingsmodal__panel{
        z-index:2 !important;
      }
      #watchSettingsModal.watch-settingsmodal{
        display:block !important;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:
          opacity .56s cubic-bezier(.22,1,.36,1),
          visibility 0s linear .56s !important;
        will-change:opacity;
      }
      #watchSettingsModal.watch-settingsmodal.is-open{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transition:opacity .56s cubic-bezier(.22,1,.36,1) !important;
      }
      #watchSettingsModal.watch-settingsmodal.is-open .watch-settingsmodal__overlay{
        opacity:1 !important;
      }
      #watchSettingsModal .watch-settingsmodal__panel{
        position:fixed !important;
        top:50% !important;
        left:50% !important;
        right:auto !important;
        bottom:auto !important;
        background:#121212 !important;
        box-shadow:0 28px 70px rgba(0,0,0,.52) !important;
        border-radius:10px !important;
        width:min(1040px, calc(100vw - 24px)) !important;
        height:min(680px, calc(100vh - 38px)) !important;
        max-height:min(680px, calc(100vh - 38px)) !important;
        margin:0 !important;
        opacity:0 !important;
        transform:translate(-50%, -50%) translateY(10px) scale(.988) translateZ(0) !important;
        transition:
          transform .56s cubic-bezier(.22,1,.36,1),
          opacity .56s cubic-bezier(.22,1,.36,1),
          box-shadow .56s cubic-bezier(.22,1,.36,1) !important;
        will-change:opacity, transform;
        overflow:hidden !important;
      }
      #watchSettingsModal.watch-settingsmodal.is-open .watch-settingsmodal__panel{
        opacity:1 !important;
        transform:translate(-50%, -50%) translateY(0) scale(1) translateZ(0) !important;
      }
      #watchSettingsModal .watch-settingsmodal__body{
        background:#121212 !important;
        border:0 !important;
        box-shadow:none !important;
        padding:18px !important;
        overflow:hidden !important;
      }
      #watchSettingsModal .watch-settings,
      #watchSettingsModal .watch-settings__card,
      #watchSettingsModal .watch-settings__grid,
      #watchSettingsModal .watch-settings__panes{
        background:#121212 !important;
        border:0 !important;
        box-shadow:none !important;
      }
      #watchSettingsModal .watch-settings{
        padding:0 !important;
        max-width:none !important;
        margin:0 !important;
      }

      /* Settings modal controls/buttons in search-modal style */
      #watchSettingsModal .watch-settings__tab{
        background:#0f0f0f !important;
        color:#f2f2f2 !important;
        border:1px solid rgba(255,255,255,.08) !important;
        transition:background-color .2s ease, color .2s ease, transform .2s ease !important;
      }
      #watchSettingsModal .watch-settings__tab:hover{
        background:#232323 !important;
        transform:translateY(-1px) !important;
      }
      #watchSettingsModal .watch-settings__tab.is-active{
        background:#232323 !important;
        color:#fff !important;
      }
      #watchSettingsModal .watch-settings__section{
        background:#161616 !important;
        border:1px solid rgba(255,255,255,.06) !important;
        padding:14px !important;
      }
      #watchSettingsModal .watch-settings__input,
      #watchSettingsModal .watch-settings__textarea{
        background:#151515 !important;
        color:#f2f2f2 !important;
        border:1px solid rgba(255,255,255,.10) !important;
      }
      #watchSettingsModal .watch-settings__textarea{
        min-height:116px !important;
        max-height:116px !important;
        resize:none !important;
      }
      #watchSettingsModal .watch-settings__input:focus,
      #watchSettingsModal .watch-settings__textarea:focus{
        background:#1a1a1a !important;
        border-color:rgba(255,255,255,.18) !important;
      }
      #watchSettingsModal select.watch-settings__input{
        -webkit-appearance:none !important;
        appearance:none !important;
        padding-right:42px !important;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23F0F2F7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat:no-repeat !important;
        background-size:12px 12px !important;
        background-position:right 18px center !important;
      }
      #watchSettingsModal select.watch-settings__input::-ms-expand{
        display:none !important;
      }
      #watchSettingsModal .watch-btn{
        background:#0f0f0f !important;
        color:#f2f2f2 !important;
        border:1px solid rgba(255,255,255,.12) !important;
        transition:background-color .2s ease, border-color .2s ease, transform .2s ease !important;
      }
      #watchSettingsModal .watch-btn:hover{
        background:#232323 !important;
        border-color:rgba(255,255,255,.18) !important;
        transform:translateY(-1px) !important;
      }
      #watchSettingsModal .watch-btn--ghost{
        background:transparent !important;
        color:rgba(255,255,255,.86) !important;
      }
      #watchSettingsModal .watch-btn--ghost:hover{
        color:#fff !important;
      }
      #watchSettingsModal .watch-settings__muted{
        color:rgba(255,255,255,.58) !important;
      }

      /* Settings: no borders at all */
      #watchSettingsModal .watch-settingsmodal__panel,
      #watchSettingsModal .watch-settings__top,
      #watchSettingsModal .watch-settings__tabs,
      #watchSettingsModal .watch-settings__tab,
      #watchSettingsModal .watch-settings__section,
      #watchSettingsModal .watch-settings__input,
      #watchSettingsModal .watch-settings__textarea,
      #watchSettingsModal .watch-settings__avatar,
      #watchSettingsModal .watch-settings__mediaBtn,
      #watchSettingsModal .watch-settings__note,
      #watchSettingsModal .watch-switch__ui,
      #watchSettingsModal .watch-btn,
      #watchSettingsModal .watch-btn--ghost,
      #watchSettingsModal .watch-btn--primary,
      #watchSettingsModal .watch-btn--danger,
      #watchSettingsModal .watch-settings__sysinfo,
      #watchSettingsModal .watch-settings__row,
      #watchSettingsModal .watch-settings__row--switch{
        border:0 !important;
        box-shadow:none !important;
      }

      @media (max-width:980px){
        #watchSettingsModal .watch-settingsmodal__panel{
          width:calc(100vw - 16px) !important;
          top:calc(var(--watch-topbar-h,72px) + 16px) !important;
          height:calc(100vh - var(--watch-topbar-h,72px) - 22px) !important;
          max-height:calc(100vh - var(--watch-topbar-h,72px) - 22px) !important;
          transform:translate(-50%, 0) translateY(10px) scale(.988) translateZ(0) !important;
        }
        #watchSettingsModal.watch-settingsmodal.is-open .watch-settingsmodal__panel{
          transform:translate(-50%, 0) translateY(0) scale(1) translateZ(0) !important;
        }
        #watchSettingsModal .watch-settingsmodal__body{
          padding:12px !important;
        }
      }

      /* Animated switching between settings categories */
      #watchSettingsModal .watch-settings__pane{
        transform-origin:50% 50%;
        will-change:opacity, transform;
      }
      #watchSettingsModal .watch-settings__pane.is-active{
        animation:watchSettingsPaneIn .16s cubic-bezier(.22,1,.36,1) both;
      }
      #watchSettingsModal .watch-settings__pane.is-active.is-pane-back{
        animation:watchSettingsPaneInBack .16s cubic-bezier(.22,1,.36,1) both;
      }
      #watchSettingsModal .watch-settings__pane.is-active .watch-settings__section{
        animation:none !important;
      }
      #watchSettingsModal .watch-settings__pane.is-active .watch-settings__row{
        animation:none !important;
      }
      #watchSettingsModal .watch-settings__pane.is-active .watch-settings__actions{
        animation:none !important;
      }
      @keyframes watchSettingsPaneIn{
        from{opacity:0;transform:translateX(10px) scale(.992);}
        to{opacity:1;transform:translateX(0) scale(1);}
      }
      @keyframes watchSettingsPaneInBack{
        from{opacity:0;transform:translateX(-10px) scale(.992);}
        to{opacity:1;transform:translateX(0) scale(1);}
      }
      @keyframes watchSettingsSectionIn{
        from{opacity:0;transform:translateY(8px);}
        to{opacity:1;transform:translateY(0);}
      }
      @keyframes watchSettingsRowIn{
        from{opacity:0;transform:translateY(6px);}
        to{opacity:1;transform:translateY(0);}
      }
      @keyframes watchSettingsActionsIn{
        from{opacity:0;transform:translateY(10px);}
        to{opacity:1;transform:translateY(0);}
      }

      /* Light theme: same search-modal light palette */
      html[data-watch-theme="light"] #watchSettingsModal .watch-settingsmodal__overlay{
        background:rgba(255,255,255,.18) !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settingsmodal__panel,
      html[data-watch-theme="light"] #watchSettingsModal .watch-settingsmodal__body,
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings,
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__card,
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__grid,
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__panes{
        background:#F4F5F7 !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settingsmodal__panel{
        border:1px solid rgba(0,0,0,.08) !important;
        box-shadow:0 22px 52px rgba(20,24,32,.16) !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__tab{
        background:#ffffff !important;
        color:#1a1f27 !important;
        border:1px solid rgba(22,27,36,.12) !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__tab:hover{
        background:#f0f2f6 !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__tab.is-active{
        background:#e3e8ee !important;
        color:#11151b !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__section{
        background:#ffffff !important;
        border:1px solid rgba(22,27,36,.10) !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__input,
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__textarea{
        background:#ffffff !important;
        color:#121720 !important;
        border:1px solid rgba(22,27,36,.14) !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal select.watch-settings__input{
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23222A35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__input option{
        background:#fff !important;
        color:#121720 !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-btn{
        background:#11151b !important;
        color:#fff !important;
        border:1px solid rgba(17,21,27,.12) !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-btn:hover{
        background:#0d1016 !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-btn--ghost{
        background:transparent !important;
        color:#1a1f27 !important;
        border:0 !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__hint,
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__muted{
        color:rgba(22,27,36,.62) !important;
      }
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__title,
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__label,
      html[data-watch-theme="light"] #watchSettingsModal .watch-settings__sectionTitle{
        color:#161b23 !important;
      }

      /* Final borderless pass (must stay last to beat theme-specific rules) */
      #watchSettingsModal .watch-settingsmodal__panel,
      #watchSettingsModal .watch-settings__top,
      #watchSettingsModal .watch-settings__tabs,
      #watchSettingsModal .watch-settings__tab,
      #watchSettingsModal .watch-settings__section,
      #watchSettingsModal .watch-settings__input,
      #watchSettingsModal .watch-settings__textarea,
      #watchSettingsModal .watch-settings__avatar,
      #watchSettingsModal .watch-settings__mediaBtn,
      #watchSettingsModal .watch-settings__note,
      #watchSettingsModal .watch-switch__ui,
      #watchSettingsModal .watch-btn,
      #watchSettingsModal .watch-btn--ghost,
      #watchSettingsModal .watch-btn--primary,
      #watchSettingsModal .watch-btn--danger,
      #watchSettingsModal .watch-settings__sysinfo,
      #watchSettingsModal .watch-settings__row,
      #watchSettingsModal .watch-settings__row--switch{
        border:0 !important;
        box-shadow:none !important;
      }