/* Compact desktop notch, attached to the top edge like an iPhone cutout. */
@media (min-width: 1101px) {
  :root { --desktop-topbar-height: 64px; }

  html body[class] :is(.topbar, .premium-nav),
  html body[class] :is(.topbar, .premium-nav).scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    width: max-content !important;
    max-width: calc(100% - 64px) !important;
    height: var(--desktop-topbar-height) !important;
    min-height: var(--desktop-topbar-height) !important;
    display: grid !important;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 20px;
    padding: 0 18px !important;
    border: 1px solid transparent !important;
    border-top: 0 !important;
    border-radius: 0 0 20px 20px !important;
    background: rgba(8,8,8,.16) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
    transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease !important;
  }
  html body[class] :is(.topbar, .premium-nav).scrolled {
    background: #080808 !important;
    border-color: rgba(255,255,255,.2) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 2px 14px rgba(255,255,255,.09), inset 0 -1px 0 rgba(255,255,255,.06) !important;
  }
  html body[class] :is(.topbar, .premium-nav)::before,
  html body[class] :is(.topbar, .premium-nav)::after {
    content: '' !important;
    position: absolute;
    top: 0;
    bottom: auto;
    width: 18px;
    height: 18px;
    opacity: .16 !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
    transition: opacity .4s ease !important;
  }
  html body[class] :is(.topbar, .premium-nav).scrolled::before,
  html body[class] :is(.topbar, .premium-nav).scrolled::after { opacity: 1 !important; }
  html body[class] :is(.topbar, .premium-nav)::before {
    left: -18px;
    right: auto;
    background: radial-gradient(circle at 0 100%, transparent 17.5px, #080808 18px);
  }
  html body[class] :is(.topbar, .premium-nav)::after {
    left: auto;
    right: -18px;
    background: radial-gradient(circle at 100% 100%, transparent 17.5px, #080808 18px);
  }
  html body[class] :is(.topbar, .premium-nav) > .left {
    justify-self: start;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  html body[class] :is(.topbar, .premium-nav) .logo img,
  html body[class] :is(.topbar, .premium-nav):not(.scrolled) .logo img,
  html body[class] :is(.topbar, .premium-nav).scrolled .logo img,
  html body.watch-page.search-open :is(.topbar, .premium-nav) .logo img,
  html body.watch-page.search-open :is(.topbar, .premium-nav):not(.scrolled) .logo img,
  html body.watch-page.search-open :is(.topbar, .premium-nav).scrolled .logo img {
    width: 128px !important;
    height: 64px !important;
    object-position: center 47%;
  }
  html body[class] :is(.topbar, .premium-nav) > .center {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 3px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none !important;
  }
  html body[class] :is(.topbar, .premium-nav) > .center > .nav-item {
    min-height: 36px;
    justify-content: center;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #939393 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
    transform: none !important;
  }
  html body[class] :is(.topbar, .premium-nav) > .center > .nav-item .icon,
  html body[class] :is(.topbar, .premium-nav) > .center > .nav-item::after { display: none !important; }
  html body[class] :is(.topbar, .premium-nav) > .center > .nav-item:hover {
    color: #fff !important;
    background: #161616 !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.65), inset 0 -1px 0 rgba(255,255,255,.04);
  }
  html body[class] :is(.topbar, .premium-nav) > .center > .nav-item.is-current-page {
    color: #fff !important;
    border-color: #282828 !important;
    background: #191919 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
  }
  html body[class] :is(.topbar, .premium-nav) > .right {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body[class] :is(.topbar, .premium-nav) > .right > .btn {
    min-height: 34px;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #b7b7b7 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body[class] :is(.topbar, .premium-nav) > .right > .btn .icon,
  html body[class] :is(.topbar, .premium-nav) > .right > .btn::before,
  html body[class] :is(.topbar, .premium-nav) > .right > .btn::after { display: none !important; }
  html body[class] :is(.topbar, .premium-nav) > .right > .register {
    color: #111 !important;
    border-color: #fff !important;
    background: #f2f2f2 !important;
    box-shadow: inset 0 1px 0 #fff !important;
  }
  html body[class] :is(.topbar, .premium-nav) > .right > .btn:hover { color: #fff !important; background: linear-gradient(180deg, #191919, #2b2b2b) !important; }
  html body[class] :is(.topbar, .premium-nav) > .right > .register:hover { color: #000 !important; background: #fff !important; }
  html body[class] :is(.topbar, .premium-nav) > .center > .nav-item:active,
  html body[class] :is(.topbar, .premium-nav) > .right > .btn:active {
    background: #121212 !important;
    box-shadow: inset 0 4px 8px #000, inset 0 -1px 0 rgba(255,255,255,.04) !important;
  }
  html body[class] :is(.topbar, .premium-nav) > .right > .register:active {
    color: #111 !important;
    background: #d8d8d8 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.2) !important;
  }
  html body[class] :is(.topbar, .premium-nav) > .right > .search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    font-size: 0;
  }
  html body[class] :is(.topbar, .premium-nav) > .right > .search-toggle .icon { width: 18px; height: 18px; }
  html body[class] :is(.topbar, .premium-nav) :is(.nav-item, .btn):focus-visible {
    outline: 2px solid #c8c8c8;
    outline-offset: 3px;
  }
}

/* Premium uses the same desktop shell with its own subscription/account flow. */
@media (min-width: 1101px) {
  html body.premium-page .premium-nav .brand img {
    display: block;
    width: 128px;
    height: 64px;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center 47%;
  }
  html body.premium-page .premium-nav .nav-login { display: inline-flex; align-items: center; }
}
@media (max-width: 1100px) {
  .premium-nav .premium-desktop-link { display: none; }
}

@media (min-width: 1101px) and (max-width: 1250px) {
  html body[class] :is(.topbar, .premium-nav) { gap: 14px; padding-inline: 16px !important; }
  html body[class] :is(.topbar, .premium-nav) > .center > .nav-item { padding-inline: 12px !important; }
  html body[class] :is(.topbar, .premium-nav) > .right { gap: 6px !important; }
  html body[class] :is(.topbar, .premium-nav) > .right > .btn { padding-inline: 13px !important; }
}

@media (min-width: 1101px) and (prefers-reduced-motion: reduce) {
  html body[class] :is(.topbar, .premium-nav),
  html body[class] :is(.topbar, .premium-nav)::before,
  html body[class] :is(.topbar, .premium-nav)::after,
  html body[class] :is(.topbar, .premium-nav) > .center > .nav-item { transition: none !important; }
}