.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(14px, 3vw, 28px);
  background: rgba(11, 11, 18, 0.72);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(139,92,246,0.35), rgba(236,72,153,0.3), transparent) 1;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The mark carries its own gradient, so it no longer sits on a coloured tile — it is
   the same artwork as the browser-tab icon, which keeps the two in step. The glow is
   a drop-shadow on the shape itself rather than a box-shadow on a square. */
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  filter: drop-shadow(0 4px 14px rgba(139, 92, 246, 0.45));
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}
/* The sidebar's link is .side-brand, so the old .brand-only rule never fired there
   and the logo had no hover at all. */
.brand:hover .brand-mark,
.side-brand:hover .brand-mark {
  transform: scale(1.07);
  filter: drop-shadow(0 6px 20px rgba(139, 92, 246, 0.75));
}
.brand-mark svg { width: 36px; height: 36px; display: block; }
.brand-name {
  font-size: 20px; font-weight: 750; letter-spacing: -0.02em;
  color: #db2777;
}

.search {
  position: relative;
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  min-width: 120px;
}
.search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--faint); pointer-events: none;
}
#search-input {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s var(--ease);
}
#search-input::-webkit-search-decoration,
#search-input::-webkit-search-cancel-button,
#search-input::-webkit-search-results-button,
#search-input::-webkit-search-results-decoration { display: none; }
#search-input::placeholder { color: var(--faint); }
#search-input:focus {
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 4px var(--accent-soft);
  transform: translateY(-1px);
}
#search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted); line-height: 1;
  transition: background 0.18s, color 0.18s, transform 0.18s var(--ease);
}
.search-clear svg { width: 15px; height: 15px; }
.search-clear:hover { background: var(--accent); color: #fff; transform: translateY(-50%) rotate(90deg); }

.quick-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden auto; max-height: min(68vh, 460px); z-index: 60; padding: 6px;
  animation: qDrop 0.18s var(--ease);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.quick-results.open { opacity: 1; transform: translateY(0) scale(1); }
.quick-results[hidden] { display: none; }
.quick-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm); transition: background 0.15s, transform 0.15s var(--ease); }
.quick-item:hover, .quick-item.active { background: var(--surface-2); transform: translateX(2px); }
.quick-item img { width: 38px; height: 54px; object-fit: cover; border-radius: var(--radius-xs); flex-shrink: 0; background: var(--surface-3); }
.quick-item .qi-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.quick-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
/* Genre shortcuts inside the search dropdown (replaces the home "browse by genre") */
.quick-head { padding: 8px 8px 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }
.quick-genres { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 8px 8px; }
.quick-genres .chip { padding: 6px 12px; font-size: 12.5px; }
/* No pointless lift here — just a colour change on hover. */
.quick-genres .chip:hover { transform: none; box-shadow: none; }

/* Clean nav (Crunchyroll-style): no container, active tab is an animated pill. */
.top-nav {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.top-nav a {
  position: relative; z-index: 0;
  padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted);
  text-align: center; transition: color 0.25s var(--ease);
}
/* The gradient pill scales + fades in when a tab becomes active. */
.top-nav a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: linear-gradient(100deg, #7c3aed, #db2777);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
  opacity: 0; transform: scale(0.75);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.top-nav a:hover { color: var(--text); }
.top-nav a.active { color: #fff; }
.top-nav a.active:hover { color: #fff; }
.top-nav a.active::before { opacity: 1; transform: scale(1); }
.top-nav #auth-slot { margin-left: 8px; display: inline-flex; }
/* read2gether feature pill — stands out from the plain nav links */
.nav-r2g {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; font-weight: 650; font-size: 14px;
  color: #eadcff; background: var(--accent-soft); border: 1px solid var(--accent); cursor: pointer;
  transition: background 0.2s var(--ease);
}
.nav-r2g svg { width: 17px; height: 17px; }
.nav-r2g:hover { background: rgba(139, 92, 246, 0.24); }

/* Bottom nav is mobile-only. On desktop it must stay hidden (the responsive.css
   media query switches it to flex on small screens). Without this it rendered
   full-height with giant icons. */
.bottomnav { display: none; }

/* ===== Left icon rail (desktop) ===== */
/* Width of the fixed icon rail. Published as a variable so a full-bleed element can
   work out how far left it has to reach to clear it. Zero on phones (see responsive). */
.app-shell { display: flex; align-items: flex-start; --rail: 76px; }
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
  width: 76px; display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 16px; gap: 6px;
  background: rgba(13, 13, 20, 0.86); backdrop-filter: blur(18px) saturate(1.4);
  border-right: 1px solid var(--border-soft);
}
/* No tile behind the logo any more: the mark brings its own gradient, and putting a
   gradient shape on a gradient square made both of them muddy. The hover lives on
   .brand-mark inside, so the two don't stack up into a double scale. */
.side-brand {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 14px;
}
.side-brand svg { width: 40px; height: 40px; }
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.side-bottom { margin-top: auto; }
/* The bottom group (status, profile) is pushed down once, by its first item. */
.side-bottom + .side-bottom { margin-top: 0; }
.side-link {
  position: relative; width: 52px; height: 52px; border: 0; background: transparent; cursor: pointer; padding: 0;
  display: grid; place-items: center; border-radius: var(--radius); color: var(--muted);
  transition: color 0.18s, background 0.18s, transform 0.14s var(--ease);
}
.side-ic { display: grid; place-items: center; }
.side-ic svg { width: 24px; height: 24px; }
.side-link:hover { color: #fff; background: var(--surface-2); }
.side-link:active { transform: scale(0.92); }
.side-link.active { color: #fff; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.side-link.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 24px; border-radius: 0 4px 4px 0; background: var(--accent-grad);
}
.side-tip {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-6px);
  padding: 6px 11px; border-radius: var(--radius-xs); background: var(--surface-3); color: #fff;
  font-size: 13px; font-weight: 650; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.15s, transform 0.15s var(--ease); z-index: 70; box-shadow: var(--shadow);
}
.side-link:hover .side-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

.main-col { flex: 1 1 auto; min-width: 0; margin-left: 76px; }
.brand-mobile { display: none; }

/* ===== Buttons (shared) — the base styles the whole app builds on ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-weight: 650; font-size: 14.5px;
  transition: background 0.2s, transform 0.2s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s;
  white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--surface-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn:disabled { opacity: 0.58; cursor: wait; transform: none; }
.btn svg { width: 18px; height: 18px; }
/* Gradient primary — oversized gradient that glides on hover (no colour jump). */
.btn-primary {
  background: linear-gradient(100deg, #7c3aed, #db2777 50%, #7c3aed);
  background-size: 220% 100%; background-position: 0% 50%;
  border: none; padding: 13px 23px; color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4);
  backface-visibility: hidden; transform: translateZ(0);
  transition: background-position 0.45s var(--ease), transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-primary:hover { background-position: 100% 50%; box-shadow: 0 10px 26px rgba(219, 39, 119, 0.45); transform: translateY(-1px); }
.btn.active-fav { background: var(--accent-soft); border-color: var(--accent); color: #d9c9ff; }
.load-more { margin: 12px auto 0; }

/* ===== Search overlay (command-palette style) ===== */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(64px, 13vh, 140px) 20px 20px;
  background: rgba(6, 6, 12, 0.62); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity 0.2s;
}
.search-overlay.open { opacity: 1; }
.search-overlay[hidden] { display: none; }
.search-overlay-box { width: min(640px, 100%); transform: translateY(-14px); transition: transform 0.24s var(--ease); }
.search-overlay.open .search-overlay-box { transform: translateY(0); }
/* The reused .search fills the overlay box (it was sized for the old top bar). */
.search-overlay .search { max-width: none; margin: 0; width: 100%; }
.search-overlay #search-input { height: 54px; font-size: 16px; border-radius: var(--radius); padding-left: 48px; }
.search-overlay .search-icon { left: 17px; width: 20px; height: 20px; }
.search-overlay .search-clear { right: 12px; }
.search-overlay .quick-results { top: calc(100% + 10px); max-height: min(60vh, 460px); }


/* Install button — one item at the bottom of the rail, only present when the browser
   says the site actually qualifies for installing. Hidden by default so nothing
   flickers into view on the browsers that never fire the event. */
.side-install[hidden] { display: none; }
.side-install .side-ic { color: var(--accent-2); }

/* Sign-in screen shown inside an INSTALLED window instead of silently navigating the
   app off to the HUB's origin. Deliberately bare: a mark, a line, a button. */
.gate {
  min-height: 100vh; display: grid; place-items: center; place-content: center;
  gap: 22px; padding: 32px; text-align: center;
}
.gate::before {
  content: ""; position: fixed; inset: -20%; pointer-events: none;
  background:
    radial-gradient(38% 30% at 42% 42%, rgba(139, 92, 246, 0.18), transparent 70%),
    radial-gradient(32% 26% at 60% 60%, rgba(236, 72, 153, 0.14), transparent 70%);
}
.gate > * { position: relative; }
.gate-mark { width: clamp(76px, 14vw, 104px); }
.gate-mark svg { width: 100%; height: auto; display: block; }
.gate-title { margin: 0; font-size: clamp(19px, 3vw, 23px); font-weight: 750; letter-spacing: -0.02em; }
.gate-sub { margin: 0; max-width: 36ch; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.gate-btn { margin-top: 4px; padding: 12px 24px; }