:root {
  --profile-scroll-thumb: #b08a50;
  --profile-scroll-hover: #d4ae70;
  scrollbar-color: var(--profile-scroll-thumb) transparent;
}
:root[data-content-profile="nsfw"] {
  --profile-scroll-thumb: #f472b6;
  --profile-scroll-hover: #f9a8d4;
}
/* Shared desktop/phone defaults; individual views keep their widths and tracks. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--profile-scroll-thumb); border-radius: 6px; border: 3px solid var(--bg); }

.media-profile-switch { display: inline-flex; flex: 0 0 auto; }
/* An account without personal libraries gets no switch at all, and its fixed
   host in the top bar must not hold a gap open for one. */
[data-media-profile-control]:empty { display: none; }
.media-profile-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 5px; box-sizing: border-box; border: 1px solid #96774770; border-radius: 10px; background: linear-gradient(#3b342b, #211e1b); box-shadow: inset 0 1px #fff1, 0 2px 5px #0005; color: #ead8b5; cursor: pointer; touch-action: manipulation; }
.media-profile-button img { width: 32px; height: 32px; object-fit: contain; }
/* The hanging tag belongs to the desktop top bar (below); a phone has no hover. */
.media-profile-tag { display: none; }
/* Hover is a POINTER state. On a phone it latches onto the last thing tapped and
   stays there, so the control reads as still-selected. Guarded here; the
   :focus half stays outside, because that is real state. */
@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover { background: var(--profile-scroll-hover); }
  .media-profile-button:hover { border-color: #c79e63; background: #41372b; }
}
.media-profile-button:disabled { opacity: .65; cursor: wait; }
.media-profile-button:active { background: #55442e; }
.media-profile-button:focus-visible { outline: 2px solid #f1c47e; outline-offset: 2px; }

/* ── In the desktop top bar the switch is one of the bar's capsules ──
   (renderer/topbar.css: .tb-group around a .tb-btn.tb-reveal). It used to keep
   the phone's 44px brass square here, the one control in the bar with its own
   shape, size and colour. Same tokens as its neighbours, so it cannot drift:
   38px glass capsule, 32px control, 22px painted icon, a label that slides out
   on hover and keyboard focus. */
.topbar .media-profile-switch {
  align-items: center; height: var(--tb-h, 38px); padding: 2px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: calc(var(--tb-h, 38px) / 2);
  background: var(--tb-glass, rgba(255, 255, 255, .028));
  -webkit-app-region: no-drag;
}
.topbar .media-profile-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: var(--tb-inner, 32px); height: var(--tb-inner, 32px); padding: 0 5px;
  border: 0; border-radius: calc(var(--tb-inner, 32px) / 2);
  background: transparent; box-shadow: none; color: var(--text-dim);
  font: inherit; transition: background .18s, color .18s, transform .05s;
}
.topbar .media-profile-button img {
  width: 22px; height: 22px; flex: 0 0 auto; pointer-events: none; user-select: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55));
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), filter .22s;
}
.topbar .media-profile-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--tb-glass-hover, rgba(255, 255, 255, .07)); color: var(--text); }
.topbar .media-profile-button:active { background: var(--tb-glass-hover, rgba(255, 255, 255, .07)); transform: translateY(1px); }
@media (hover: hover) {
  .topbar .media-profile-button:hover { background: var(--tb-glass-hover, rgba(255, 255, 255, .07)); color: var(--text); }
  .topbar .media-profile-button:hover img {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)) drop-shadow(0 0 6px rgba(245, 158, 11, .28));
  }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .media-profile-button, .topbar .media-profile-button img { transition: none; }
  .topbar .media-profile-button:hover img { transform: none; }
}

/* ── The hanging tag ──
   Hover or keyboard-focus the switch and a little walnut shelf label drops
   from the capsule on two cords: where you are, an arrow, where a press takes
   you. It is this control's own tooltip, on purpose unlike the bar's generic
   card: nothing else in the bar is a two-way swap. Pointer decoration only
   (pointer-events: none, aria-hidden), so it can never be in the way of the
   click it describes. */
.topbar .media-profile-switch { position: relative; }
.topbar .media-profile-tag {
  position: absolute; top: calc(100% + 13px); left: 50%; z-index: 30;
  display: flex; align-items: center; gap: 7px; width: max-content; padding: 6px 9px;
  border: 1px solid #c79e63; border-radius: 9px;
  background: linear-gradient(#3b342b, #24211d);
  box-shadow: inset 0 1px #fff2, inset 0 -2px #0004, 0 10px 24px #000a;
  color: #ead8b5; font-size: 12px; font-weight: 600; letter-spacing: .1px; line-height: 1;
  pointer-events: none; opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-10px) rotate(-5deg); transform-origin: 50% -13px;
  transition: opacity .14s ease, visibility 0s .2s, transform .2s ease-in;
}
/* the two cords it hangs from */
.topbar .media-profile-tag::before, .topbar .media-profile-tag::after {
  content: ""; position: absolute; bottom: 100%; width: 1.5px; height: 12px;
  background: linear-gradient(#c79e6300, #c79e63);
}
.topbar .media-profile-tag::before { left: 26%; transform: rotate(9deg); transform-origin: 50% 100%; }
.topbar .media-profile-tag::after { right: 26%; transform: rotate(-9deg); transform-origin: 50% 100%; }
.media-profile-tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 4px; border-radius: 6px; }
.media-profile-tag-chip img { width: 18px; height: 18px; object-fit: contain; }
.media-profile-tag-chip.is-here { background: #c89b5430; box-shadow: inset 0 0 0 1px #c79e6380; color: #f6e2bb; }
.media-profile-tag-chip.is-next { color: #b9ab94; }
.media-profile-tag-chip.is-next img { filter: grayscale(.5) brightness(.85); }
/* a simple arrow: shaft and head, drawn in CSS */
.media-profile-tag-arrow { position: relative; width: 14px; height: 1.5px; border-radius: 1px; background: #c79e63; }
.media-profile-tag-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px;
  border: solid #c79e63; border-width: 1.5px 1.5px 0 0; transform: translateY(-50%) rotate(45deg);
}
.topbar .media-profile-button:focus-visible + .media-profile-tag {
  opacity: 1; visibility: visible; transform: translateX(-50%);
  transition: opacity .14s ease, visibility 0s, transform .5s cubic-bezier(.3, 1.9, .5, 1);
}
@media (hover: hover) {
  .topbar .media-profile-button:hover:not(:disabled) + .media-profile-tag {
    opacity: 1; visibility: visible; transform: translateX(-50%);
    transition: opacity .14s ease .25s, visibility 0s .25s, transform .5s cubic-bezier(.3, 1.9, .5, 1) .25s;
  }
  .topbar .media-profile-button:hover:not(:disabled) + .media-profile-tag .media-profile-tag-arrow { animation: media-profile-nudge 1.1s ease-in-out .8s infinite; }
}
@keyframes media-profile-nudge { 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .topbar .media-profile-tag, .topbar .media-profile-button:hover + .media-profile-tag, .topbar .media-profile-button:focus-visible + .media-profile-tag { transform: translateX(-50%); transition: opacity .1s, visibility 0s; }
  .topbar .media-profile-tag .media-profile-tag-arrow { animation: none !important; }
}

/* ── In the browser's own bar the switch is one of its pills ──
   The browser hides Hearth's top bar, and the switch above went with it: from
   a general-library browser there was no way across. Here it sits beside
   Routes and VPN in their shape (30px pill, 22px painted icon, a word), on the
   browser chrome's own --wbc-* tokens. Only while the top bar is hidden, so
   there are never two switches on screen. No hanging tag: in the shell the
   page is a native view painted above the DOM and would cover it, so the pill
   says where you are in words and its title says where a press goes. */
.media-profile-word { display: none; }
#browser-bar [data-media-profile-control] { display: none; }
body.browser-nav-hidden #browser-bar [data-media-profile-control]:not(:empty) { display: inline-flex; flex: 0 0 auto; }
#browser-bar .media-profile-button {
  display: inline-flex; align-items: center; gap: 5px; width: auto; height: 30px; padding: 0 10px 0 5px;
  border: 1px solid var(--wbc-line); border-radius: 999px;
  background: rgba(255, 228, 196, .035); box-shadow: none; color: var(--wbc-dim);
  font: inherit; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
#browser-bar .media-profile-button img {
  width: 22px; height: 22px; flex: none; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
  transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
#browser-bar .media-profile-word { display: inline; line-height: 1; }
#browser-bar .media-profile-button:active { background: var(--wbc-press); }
#browser-bar .media-profile-button:active img { transform: scale(.92); }
#browser-bar .media-profile-button:focus-visible { outline: 2px solid var(--wbc-ember); outline-offset: 1px; }
/* Personal libraries are open: the pill is lit, as VPN is when it is on. */
[data-content-profile="nsfw"] #browser-bar .media-profile-button {
  background: rgba(255, 154, 60, .1); border-color: rgba(255, 154, 60, .38); color: var(--wbc-ember-hi);
}
@media (hover: hover) {
  #browser-bar .media-profile-button:hover { background: var(--wbc-hover); border-color: var(--wbc-line-hi); color: var(--wbc-text); }
  #browser-bar .media-profile-button:hover:not(:disabled) img { transform: translateY(-1px) scale(1.08); }
}
@media (max-width: 720px) {
  #browser-bar .media-profile-word { display: none; }
  #browser-bar .media-profile-button { padding: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
  #browser-bar .media-profile-button, #browser-bar .media-profile-button img { transition: none; }
  #browser-bar .media-profile-button:hover img { transform: none; }
}

/* ── The password prompt: the lock screen's card, and only the card ──
   The form inside is a `.lock-card` and everything on it (mark, wordmark, cream
   field, coral sticker button, error, links, the head-shake) is drawn by
   renderer/lock/lock.css. What is here is what the lock screen gives that card
   from outside: the --lk-* tokens (lock.css scopes them to .lock-screen, which
   this is not: no scene, no cover, the app stays behind a dim) and room around
   it for the mark that pokes over its top edge and the hard shadow under it. */
.media-profile-unlock {
  --lk-ink: #1b0f24; --lk-card: #3b2350; --lk-card-2: #2e1a40; --lk-cream: #fff4e4; --lk-lilac: #cbb6e6;
  --lk-pink: #ff6f9f; --lk-coral: #ff8a5b; --lk-sun: #ffc857; --lk-error: #ffb3c7;
  --lk-bounce: cubic-bezier(.34, 1.56, .64, 1); --lk-ease: cubic-bezier(.2, .8, .2, 1);
  --lk-font: 'Hearth Fredoka', 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  width: max-content; max-width: 100vw; max-height: 100dvh; margin: auto; padding: 64px 16px 48px; box-sizing: border-box;
  overflow: visible; border: 0; background: none; color: var(--lk-cream); font-family: var(--lk-font);
}
.media-profile-unlock::backdrop { background: rgba(27, 15, 36, .74); }
.media-profile-unlock .lock-card { margin: 0; }
.media-profile-unlock .lock-card > .media-profile-unlock-sub { animation-delay: .26s; }
.media-profile-unlock .lock-card > :is(input, .btn, .lock-error, .media-profile-unlock-links) { animation-delay: .32s; }
.media-profile-unlock .lock-card > .btn { animation-delay: .4s; }
/* #lock-subtitle's rule, for a card that cannot reuse the id. */
.media-profile-unlock-sub { margin: 4px 0 14px !important; color: var(--lk-lilac); font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center; text-wrap: balance; }
/* The phone UI has no `.btn` of its own; the desktop one already matches. */
.media-profile-unlock .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; cursor: pointer; touch-action: manipulation; }
/* Until the account says it has (or may set) a shape, the mark is the picture
   it looks like: no pointer, no "Pattern" tag, no promise it cannot keep. */
.media-profile-unlock .lock-mark-wrap:disabled { cursor: default; pointer-events: none; }
.media-profile-unlock-links { display: flex; align-items: center; justify-content: center; gap: 4px 12px; flex-wrap: wrap; width: 100%; }
.media-profile-unlock-links .lock-pw-link { width: auto; min-height: 44px; padding: 6px 10px; touch-action: manipulation; }
.media-profile-unlock-links .lock-pw-link[hidden] { display: none; }
/* "Open with the pattern next time": the one setting this card has. A real
   checkbox (role="switch") under a painted track, in the card's own ink, cream
   and sun. Shown only to an account that has a shape. */
.media-profile-unlock-first {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; margin-top: 2px; padding: 6px 10px; border-radius: 14px;
  color: var(--lk-lilac); font-family: var(--lk-font); font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  animation-delay: .46s;
}
.media-profile-unlock-first[hidden] { display: none; }
.media-profile-unlock .lock-card .media-profile-unlock-first input {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0; background: none; box-shadow: none; opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.media-profile-unlock-first-track {
  position: relative; flex: none; width: 40px; height: 24px; border: 2px solid var(--lk-ink); border-radius: 999px;
  background: rgba(27, 15, 36, .55); box-shadow: 0 2px 0 var(--lk-ink);
  transition: background .18s var(--lk-ease);
}
.media-profile-unlock-first-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--lk-lilac); box-shadow: inset 0 -2px 0 rgba(27, 15, 36, .22);
  transition: transform .24s var(--lk-bounce), background .18s var(--lk-ease);
}
.media-profile-unlock-first input:checked + .media-profile-unlock-first-track { background: var(--lk-sun); }
.media-profile-unlock-first input:checked + .media-profile-unlock-first-track::after { transform: translateX(16px); background: var(--lk-cream); }
.media-profile-unlock-first:has(input:checked) { color: var(--lk-cream); }
.media-profile-unlock-first:has(input:focus-visible) { outline: 2px solid var(--lk-sun); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .media-profile-unlock-first-track, .media-profile-unlock-first-track::after { transition: none; } }
@media (max-height: 560px) { .media-profile-unlock { padding-top: 16px; padding-bottom: 28px; } }
[data-profile-changing] body > :not(script):not(style) { visibility: hidden !important; }
[data-profile-changing] .topbar, [data-profile-changing] .topbar * { visibility: visible !important; }
.media-profile-mobile { margin-left: auto; }
[data-content-profile="sfw"] [data-nsfw-only],
[data-content-profile="nsfw"] [data-sfw-only] { display: none !important; }
[data-content-profile="sfw"] .media-section:has(.media-star-filters),
[data-content-profile="sfw"] [data-media-manage-stars],
[data-content-profile="sfw"] #videos-detect-stars-btn,
[data-content-profile="sfw"] #videos-aitag-btn,
[data-content-profile="sfw"] #videos-autotag-btn,
[data-content-profile="sfw"] #hentai-autotag-btn,
[data-content-profile="sfw"] [data-bulk="detect"] { display: none !important; }

/* The phone's shelf screens place the switch in their own header row
   (web/src/mobile-ui/styles.css `.gt-head`): in the flow, never over a panel. */

[data-profile-changing] * { transition: none !important; animation: none !important; }

/* The wait behind the curtain, on the desktop UI (profiles.js showCover). It
   sits in the window under the top bar, which the curtain leaves on screen.
   The curtain stops every animation on the page, so this layer re-asserts its
   own. The fade-in is delayed past a preloaded switch (about a quarter of a
   second, profiles.js Preload): only a wait worth explaining shows it. */
.media-profile-cover {
  position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 72px 24px 24px; box-sizing: border-box; pointer-events: none; text-align: center;
  background: radial-gradient(60% 46% at 50% 52%, #c79e6316, transparent 70%);
}
[data-profile-changing] body > .media-profile-cover, [data-profile-changing] .media-profile-cover * { visibility: visible !important; }
[data-profile-changing] .media-profile-cover { animation: media-profile-cover-in .22s ease-out .32s both !important; }
.media-profile-cover img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55)); }
.media-profile-cover p { margin: 0; color: #f6e2bb; font-size: 17px; font-weight: 700; letter-spacing: .01em; text-wrap: balance; }
.media-profile-cover-bar { display: block; width: min(220px, 60vw); height: 4px; border-radius: 999px; background: #c79e6326; overflow: hidden; }
.media-profile-cover-bar i { display: block; width: 38%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c79e63, #f1c47e); }
[data-profile-changing] .media-profile-cover-bar i { animation: media-profile-cover-run 1.1s ease-in-out infinite !important; }
@keyframes media-profile-cover-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes media-profile-cover-run { from { transform: translateX(-110%); } to { transform: translateX(275%); } }
@media (prefers-reduced-motion: reduce) {
  [data-profile-changing] .media-profile-cover { animation: media-profile-cover-in .01s linear .32s both !important; }
  [data-profile-changing] .media-profile-cover-bar i { width: 100%; animation: none !important; }
}