/* Danflix "Browse" theme: the site header. One stylesheet and one markup for
   both the viewer pages (templates/browse/_base.html) and every admin page
   (static/topbar.js), so the two can't drift apart. Self-contained: it
   carries its own tokens and sets every property it relies on, so neither
   browse.css nor the admin skin is needed for it to look the same. */

.bx-header {
  --hd-bg: #121212; --hd-s1: #1c1c1c; --hd-s2: #262626; --hd-border: #333333;
  --hd-text: #f5f5f5; --hd-muted: #b3b3b3; --hd-red: #e50914;
  box-sizing: border-box; height: 64px; display: flex; align-items: center; gap: 36px; padding: 0 40px; margin: 0;
  background: var(--hd-bg); border-bottom: 1px solid var(--hd-s2); position: sticky; top: 0; z-index: 600;
  font-family: 'Red Hat Display', system-ui, sans-serif; font-size: 15px; line-height: 1.4; color: var(--hd-text);
  letter-spacing: normal; text-transform: none; font-variant-numeric: normal;
}
.bx-header *, .bx-header *::before, .bx-header *::after { box-sizing: border-box; font-family: inherit; letter-spacing: inherit; text-transform: inherit; }
.bx-header .bx-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 26px; line-height: 1; color: var(--hd-red); letter-spacing: 1px; white-space: nowrap; }
.bx-header .bx-logo .bx-pill { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; padding: 3px 7px; border-radius: 3px; background: var(--hd-s2); color: var(--hd-muted); }
.bx-header .bx-nav { display: flex; gap: 26px; align-self: stretch; }
.bx-header .bx-nav > a, .bx-header .bx-nav > .bx-dd > button { display: inline-flex; align-items: center; gap: 4px; height: 100%; margin: 0; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; color: var(--hd-muted); text-decoration: none; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; }
.bx-header .bx-nav > a:hover, .bx-header .bx-nav > .bx-dd > button:hover { color: #ffffff; background: none; }
.bx-header .bx-nav > a.active, .bx-header .bx-nav > .bx-dd.active > button { color: #ffffff; box-shadow: inset 0 -2px 0 var(--hd-red); }
.bx-header .bx-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bx-header .bx-dd { position: relative; display: flex; }
.bx-header .bx-dd.bx-navdd { display: none; }
.bx-header .bx-navdd > .bx-menu { flex-direction: column; min-width: 200px; }
.bx-header .bx-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--hd-s1); border: 1px solid var(--hd-border); border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); padding: 6px; display: none; z-index: 60; }
.bx-header .bx-nav > .bx-dd > .bx-menu { top: calc(100% - 4px); }
.bx-header .bx-menu.right { left: auto; right: 0; }
.bx-header .bx-dd.open > .bx-menu { display: block; }
.bx-header .bx-menu a, .bx-header .bx-menu button { display: block; width: 100%; margin: 0; text-align: left; padding: 9px 12px; border-radius: 6px; border: none; background: none; box-shadow: none; color: var(--hd-text); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.4; cursor: pointer; }
.bx-header .bx-menu a:hover, .bx-header .bx-menu button:hover, .bx-header .bx-menu a.active { background: var(--hd-s2); color: #ffffff; }
.bx-header .bx-menu .danger { color: #ff8a8a; }
.bx-header .bx-menu small { display: block; font-weight: 500; color: var(--hd-muted); font-size: 12px; }
.bx-header .bx-menu hr { border: none; border-top: 1px solid var(--hd-s2); margin: 6px 0; }
.bx-header .bx-avatar { width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 6px; border: none; box-shadow: none; background: #3b6fb6; color: #ffffff; font-weight: 800; font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bx-header .bx-icon { width: 44px; height: 44px; flex: none; margin: 0; padding: 0; border-radius: 50%; border: none; box-shadow: none; background: transparent; color: var(--hd-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.bx-header .bx-icon:hover { background: rgba(255, 255, 255, .12); }
.bx-header .bx-link { color: var(--hd-muted); text-decoration: none; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bx-header .bx-link:hover { color: #ffffff; }
.bx-header svg { width: 20px; height: 20px; flex: none; }
.bx-header .bx-nav svg, .bx-header .bx-link svg { width: 16px; height: 16px; }
.bx-header :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (max-width: 860px) {
  .bx-header { gap: 16px; padding: 0 16px; }
  .bx-header .bx-link .lbl { display: none; }
  .bx-header .bx-nav { gap: 16px; }
}
/* Phones: the viewer nav collapses into a hamburger menu (the admin nav
   keeps its own horizontal layout; this only targets the viewer header). */
@media (max-width: 600px) {
  .bx-header .bx-logo { font-size: 22px; }
  .bx-header .bx-nav[aria-label="Main"] { display: none; }
  .bx-header .bx-dd.bx-navdd { display: flex; }
  .bx-header .bx-right { margin-left: auto; gap: 4px; }
}
/* Donate (browse.js shows it when the owner has set a link). Gold, matching the
   site's social accent. */
.bx-header .bx-donate, .bx-topbar .bx-donate { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid rgba(245, 197, 24, .55); color: #f5c518; text-decoration: none; font-family: 'Red Hat Display', system-ui, sans-serif; font-weight: 800; font-size: 14px; white-space: nowrap; margin-right: 6px; }
.bx-header .bx-donate:hover, .bx-topbar .bx-donate:hover { background: #f5c518; color: #121212; border-color: #f5c518; }
.bx-header .bx-donate[hidden], .bx-topbar .bx-donate[hidden] { display: none; }
@media (max-width: 600px) { .bx-header .bx-donate { height: 30px; padding: 0 10px; font-size: 13px; } }
.bx-header [hidden] { display: none !important; }