/* reels-feed: shared mobile vertical feed. Theme per site with the --rf-* variables (see README). */
:root {
  --rf-accent: #3b82f6;          /* focus/progress accents only; buttons are neutral */
  --rf-on-accent: #fff;
  --rf-bg: #000;
  --rf-fg: #fff;
  --rf-muted: rgba(255,255,255,.78);
  --rf-sheet-bg: #15171c;
  --rf-sheet-fg: #f2f3f5;
  --rf-sheet-muted: #a7adb8;
  --rf-line: rgba(255,255,255,.14);
  --rf-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rf-radius: 14px;
  --rf-focus: #fff;
  --rf-z: 2147482000;
  --rf-top-h: 60px;              /* docked branding bar (plus the top safe area) */
  --rf-nav-h: 80px;              /* docked bottom nav (plus the bottom safe area) */
  --rf-nav-bg: var(--rf-bg);
}
html.rf-lock, html.rf-lock body { overflow: hidden !important; overscroll-behavior: none; }
.rf-root[hidden], .rf-top[hidden], .rf-nav[hidden], .rf-rail[hidden], .rf-panel[hidden] { display: none !important; }
html.rf-grid-nav body { padding-bottom: calc(var(--rf-nav-h) + env(safe-area-inset-bottom)) !important; }
.rf-root {
  position: fixed; inset: 0; z-index: var(--rf-z);
  background: var(--rf-bg); color: var(--rf-fg);
  font-family: var(--rf-font); font-size: 16px; line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}
.rf-root *, .rf-panel *, .rf-nav *, .rf-boot *, .rf-prof * { box-sizing: border-box; }
/* The feed fills the screen between the top edge and the docked bottom nav; the branding bar floats over it. */
.rf-feed {
  position: absolute; top: 0; left: 0; right: 0; bottom: calc(var(--rf-nav-h) + env(safe-area-inset-bottom));
  overflow-y: scroll; overflow-x: hidden;
  scroll-snap-type: y mandatory; overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  touch-action: none;            /* touch is driven by feed.js for a fast one-item lock */
  overflow-anchor: none;         /* items are inserted before the end card; never let the browser shift the view */
}
.rf-feed.rf-driving { scroll-snap-type: none; }
.rf-feed::-webkit-scrollbar { display: none; }
.rf-item {
  position: relative; height: 100%; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; background: var(--rf-bg);
  contain: strict;
}
.rf-media { position: absolute; inset: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.rf-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(28px) brightness(.45); transform: translateZ(0); }
.rf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rf-shade { position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.5) 50%, transparent); pointer-events: none; }
.rf-heart { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; pointer-events: none; color: #fff; opacity: 0; filter: drop-shadow(0 4px 18px rgba(0,0,0,.45)); }
.rf-heart.rf-go { animation: rf-heart .8s ease-out forwards; }
@keyframes rf-heart { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1.15); } 30% { transform: scale(.95); } 45% { transform: scale(1); opacity: 1; } 100% { opacity: 0; transform: scale(1) translateY(-40px); } }


/* Right-side action rail (fixed: items snap underneath it, only counts change). Like, Share, Save, Similar.
   Vertically centered on the image area (the feed, above the bottom nav) so it never sits on the caption's Copy. */
.rf-rail {
  position: absolute; right: max(4px, env(safe-area-inset-right));
  top: calc((100% - var(--rf-nav-h) - env(safe-area-inset-bottom)) / 2); bottom: auto; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 4;
}
/* Short screens: centering would reach the caption, so stand the rail just above it instead */
@media (max-height: 660px) {
  .rf-rail { top: auto; transform: none; bottom: calc(var(--rf-nav-h) + env(safe-area-inset-bottom) + 124px); }
}
.rf-act {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none;
  min-width: 64px; min-height: 48px; padding: 2px; border: 0; border-radius: 12px;
  background: transparent; color: var(--rf-fg); font: inherit; font-size: 16px; line-height: 1.2; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rf-act .rf-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.42); }
.rf-act svg { width: 28px; height: 28px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.rf-act[aria-pressed="true"] .rf-ico { background: rgba(255,255,255,.22); }
/* Each toolbar icon has its own subtle pastel; labels and counts keep the shared text color */
.rf-act-like { --rf-ico-c: #FFB4C8; }
.rf-act-share { --rf-ico-c: #A8D4FF; }
.rf-act-save { --rf-ico-c: #FFE08A; }
.rf-act-more { --rf-ico-c: #D7C0FF; }
.rf-act-copy { --rf-ico-c: #B8F0D4; }
.rf-act-like[aria-pressed="true"] { --rf-ico-c: #FF97B4; }
.rf-act-save[aria-pressed="true"] { --rf-ico-c: #FFD666; }
.rf-act .rf-ico { color: var(--rf-ico-c, var(--rf-fg)); }
.rf-act .rf-lbl { color: var(--rf-fg); }
.rf-act:active .rf-ico { transform: scale(.92); }
.rf-act[aria-busy="true"] { opacity: .6; cursor: progress; }

/* Bottom overlay: caption (creator + 2-line prompt) with Copy right next to it; a thin top edge marks the box */
.rf-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; gap: 4px;
  padding: 6px max(4px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
  border-top: 1px solid rgba(255,255,255,.22);
}
.rf-meta-btn {
  flex: 1 1 auto; min-width: 0; display: block; text-align: left; border: 0; background: transparent; color: var(--rf-fg);
  font: inherit; font-size: 16px; padding: 8px 4px; min-height: 48px; border-radius: 10px; cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* Copy: stacked like the rail buttons (icon above label, same size) in the same right-hand column */
.rf-meta .rf-act-copy { flex: none; flex-direction: column; margin: 0 0 6px; }
.rf-creator { font-weight: 700; display: block; margin-bottom: 4px; }
.rf-prompt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Docked top branding: logo left, muted settings gear right, vertically centered */
.rf-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
  height: calc(var(--rf-top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.42) 70%, transparent);
  font-family: var(--rf-font);
}
.rf-brand {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 6px; border-radius: 10px;
  color: var(--rf-fg); text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* Logo: the site's base width (--rf-logo-w, its old rendered width) plus --rf-logo-grow (100px), height follows the aspect. */
.rf-logo { width: calc(var(--rf-logo-w, 150px) + var(--rf-logo-grow, 100px)); height: auto; max-height: 64px; max-width: calc(100vw - 112px); display: block; object-fit: contain; }
.rf-brand.rf-has-logo .rf-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rf-gear {
  pointer-events: auto; flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px;
  color: var(--rf-muted); opacity: .7; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* Same size as the action-rail icons on the right (28px) */
.rf-gear svg { width: var(--rf-gear-ico, 28px); height: var(--rf-gear-ico, 28px); fill: currentColor; display: block; }
.rf-gear:hover, .rf-gear:active { opacity: 1; background: rgba(255,255,255,.08); }

/* Progress bar under the logo bar whenever more prompts are being fetched */
.rf-fetchbar { position: absolute; left: 0; right: 0; top: calc(var(--rf-top-h) + env(safe-area-inset-top)); height: 3px; z-index: 5; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; }
.rf-fetchbar::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: var(--rf-fg); opacity: .75; border-radius: 2px; animation: rf-indet 1.1s ease-in-out infinite; }
.rf-root.rf-fetching .rf-fetchbar { opacity: 1; }
@keyframes rf-indet { 0% { left: -40%; } 100% { left: 100%; } }

/* End of the feed: loading / error + retry / all caught up */
.rf-end { position: relative; height: 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; padding: calc(var(--rf-top-h) + env(safe-area-inset-top)) 20px 20px; color: var(--rf-fg); overflow: hidden; }
.rf-end-box { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 320px; margin: 0 auto; }
.rf-end-box p { margin: 0; font-size: 16px; color: var(--rf-fg); }
.rf-end-box .rf-btn { flex: none; min-width: 200px; gap: 8px; padding: 0 18px; }
.rf-btn svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.rf-btn svg.rf-stroke, .rf-nav-btn svg.rf-stroke { fill: none !important; stroke: currentColor; }
/* Loader: a large rainbow ring (conic gradient masked to a ring), turning smoothly. No words. */
.rf-spin { --rf-spin-size: 72px; width: var(--rf-spin-size); height: var(--rf-spin-size); border-radius: 50%; display: inline-block; flex: none;
  background: conic-gradient(from 0deg, #ff4d4d, #ff9a1f, #ffe14a, #3dff9a, #2ee6ff, #4d7cff, #c44dff, #ff4d8d, #ff4d4d);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  animation: rf-rot 1.1s linear infinite; filter: drop-shadow(0 0 10px rgba(196,77,255,.35)); }
.rf-loading-row .rf-spin { --rf-spin-size: 56px; }
@keyframes rf-rot { to { transform: rotate(360deg); } }
.rf-skel { position: absolute; inset: 0; }
.rf-skel-media { position: absolute; inset: calc(var(--rf-top-h) + env(safe-area-inset-top) + 8px) 12px 120px; border-radius: 16px; background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 70%) 0 0 / 300% 100%; animation: rf-shimmer 1.4s linear infinite; }
.rf-skel-line { position: absolute; left: 16px; right: 96px; bottom: 64px; height: 16px; border-radius: 8px; background: rgba(255,255,255,.1); }
.rf-skel-line.rf-short { right: 45%; bottom: 36px; }
@keyframes rf-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Docked bottom nav: Home, Search, Random, Tags, Profile as square labeled buttons */
.rf-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--rf-z) + 2);
  height: calc(var(--rf-nav-h) + env(safe-area-inset-bottom)); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-around; gap: 2px; overflow: hidden;
  background: var(--rf-nav-bg); border-top: 1px solid var(--rf-line); font-family: var(--rf-font); margin: 0;
}
.rf-nav-btn {
  flex: 0 1 72px; min-width: 48px; height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px;
  border: 0; border-radius: 12px; background: transparent; color: var(--rf-muted); text-decoration: none; text-align: center;
  font: inherit; font-size: 16px; line-height: 1.1; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rf-nav-lbl { white-space: nowrap; }
/* Six tabs (e.g. Guides + Support): slightly smaller labels so they keep a gap on a 375px phone */
.rf-nav:has(> .rf-nav-btn:nth-child(6)) .rf-nav-lbl { font-size: 13px; letter-spacing: -.01em; }
.rf-nav:has(> .rf-nav-btn:nth-child(6)) .rf-nav-btn { padding: 4px 0; }
.rf-nav-btn .rf-ico { width: 24px; height: 24px; flex: none; display: block; }
.rf-nav-btn svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.rf-nav-btn[aria-current="page"] { color: var(--rf-fg); background: rgba(255,255,255,.12); }
.rf-nav-btn:active { background: rgba(255,255,255,.16); }

/* Full-screen panels (prompt details, search, dialogs): everything below the logo bar, above the bottom nav */
.rf-panel {
  position: fixed; left: 0; right: 0; top: calc(var(--rf-top-h) + env(safe-area-inset-top)); bottom: calc(var(--rf-nav-h) + env(safe-area-inset-bottom));
  z-index: calc(var(--rf-z) + 5); display: flex; flex-direction: column;
  background: var(--rf-sheet-bg); color: var(--rf-sheet-fg); font-family: var(--rf-font); font-size: 16px; line-height: 1.4;
  border-top: 1px solid var(--rf-line); animation: rf-fade .16s ease-out;
}
.rf-panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px max(6px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--rf-line); }
.rf-panel-head h2 { font-size: 18px; margin: 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rf-icon-btn { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; }
.rf-icon-btn svg { width: 24px; height: 24px; fill: currentColor; }
.rf-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left)); -webkit-overflow-scrolling: touch; }
.rf-panel a { color: inherit; }
.rf-sub { color: var(--rf-sheet-muted); margin: 0 0 12px; }
.rf-cmd {
  font-family: var(--rf-mono); font-size: 16px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  background: rgba(255,255,255,.06); border: 1px solid var(--rf-line); border-radius: 12px; padding: 12px; margin: 0 0 12px;
  max-height: 40dvh; overflow-y: auto;
}
.rf-label { font-weight: 700; margin: 14px 0 6px; font-size: 16px; }
.rf-settings { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; }
.rf-settings dt { color: var(--rf-sheet-muted); }
.rf-settings dd { margin: 0; word-break: break-word; }
/* Copy in the details panel uses the same neutral style as the other buttons */
.rf-copy-big {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px;
  border: 1px solid var(--rf-line); border-radius: var(--rf-radius); background: rgba(255,255,255,.1); color: inherit;
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; margin: 6px 0 10px;
}
.rf-copy-big svg { width: 24px; height: 24px; fill: currentColor; }
.rf-sheet-row { display: flex; gap: 10px; margin-top: 8px; }
.rf-btn {
  flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; padding: 0 14px;
  border: 1px solid var(--rf-line); border-radius: var(--rf-radius); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.rf-btn:active { background: rgba(255,255,255,.14); }
.rf-btn.rf-danger { border-color: rgba(255,90,90,.6); color: #ff8a8a; }
.rf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.rf-tags li { border: 1px solid var(--rf-line); border-radius: 999px; padding: 4px 10px; color: var(--rf-sheet-muted); }
.rf-muted { color: var(--rf-sheet-muted); margin: 0; }
.rf-empty { color: var(--rf-sheet-muted); text-align: center; margin: 24px 0; }
.rf-loading-row { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 0; color: var(--rf-sheet-muted); }


/* Prompt cards (search results, profile lists) */
.rf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rf-card { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; border-radius: 12px; min-height: 48px; }
.rf-card-media { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.07); }
.rf-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-card-text { font-size: 16px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--rf-sheet-fg); }
.rf-skel-cards .rf-card-media { animation: rf-pulse 1.2s ease-in-out infinite alternate; }
@keyframes rf-pulse { from { opacity: .5; } to { opacity: 1; } }

/* Confirmation dialog (Clear my data) */
.rf-dialog { display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); border-top: 0; }
.rf-dialog-box { width: 100%; max-width: 420px; background: var(--rf-sheet-bg); border: 1px solid var(--rf-line); border-radius: 18px; padding: 20px; }
.rf-dialog-box h2 { margin: 0 0 8px; font-size: 20px; }
.rf-dialog-box p { margin: 0 0 12px; color: var(--rf-sheet-muted); }

.rf-toast {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + var(--rf-top-h) + 8px);
  z-index: calc(var(--rf-z) + 9); background: rgba(20,20,24,.96); color: #fff; padding: 12px 16px; border-radius: 12px;
  font-family: var(--rf-font); font-size: 16px; width: max-content; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.rf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boot shell: branded chrome + skeleton on phones until the feed script mounts (never a blank screen) */
.rf-boot { display: none; }
@media (max-width: 767px) {
  .rf-boot {
    display: block; position: fixed; inset: 0; z-index: var(--rf-z); background: var(--rf-bg); color: var(--rf-fg);
    font-family: var(--rf-font); font-size: 16px; line-height: 1.4;
    animation: rf-boot-out .3s ease-in 12s forwards;     /* safety net if the script never runs */
  }
  .rf-boot .rf-top { position: absolute; }
  .rf-boot-body { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--rf-nav-h) + env(safe-area-inset-bottom)); display: grid; place-items: center; }
}
@keyframes rf-boot-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Profile page (desktop + mobile). Header and bottom nav are the shared site chrome (.rf-site). */
html.rf-prof-html { background: var(--rf-bg); }
body.rf-prof { margin: 0; min-height: 100vh; background: var(--rf-bg); color: var(--rf-fg); font-family: var(--rf-font); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; --rf-sheet-fg: var(--rf-fg); }
.rf-prof-wrap { padding: 12px max(14px, env(safe-area-inset-right)) 20px max(14px, env(safe-area-inset-left)); }
.rf-prof-id { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.rf-prof-id h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.rf-prof-id p { margin: 2px 0 0; }
.rf-prof-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin: 0 0 12px; padding: 4px 4px 4px 14px; border: 1px solid var(--rf-line); border-radius: 14px; }
.rf-prof-lang-label { font-weight: 600; }
.rf-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; background: rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23bbb' d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2c-3.3 0-9 1.65-9 4.95V21h18v-2.05C21 15.65 15.3 14 12 14z'/%3E%3C/svg%3E") center / 60% no-repeat; border: 1px solid var(--rf-line); }
.rf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; position: sticky; top: calc(var(--rf-top-h) + env(safe-area-inset-top)); z-index: 5; background: var(--rf-bg); padding: 6px 0; }
.rf-tab { flex: 1 1 40%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--rf-line); color: var(--rf-muted) !important; text-decoration: none !important; font-weight: 600; font-size: 16px; text-align: center; line-height: 1.15; }
.rf-tab[aria-current="page"] { color: var(--rf-fg) !important; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
/* Phones on Settings: a plain heading replaces the current Settings tab (desktop keeps the tab, see below). */
.rf-tabs .rf-tab.rf-tab-cur-settings { display: none; }
.rf-sec-title { flex: 1 1 100%; margin: 10px 0 0; padding: 0; border: 0; border-radius: 0; background: none; min-height: 0; cursor: default; text-align: left; color: var(--rf-fg); font-size: 22px; font-weight: 700; line-height: 1.2; }
.rf-count { font-size: 16px; font-weight: 700; opacity: .75; }
.rf-empty-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 12px; }
.rf-empty-box h2 { margin: 0; font-size: 20px; }
.rf-empty-box p { margin: 0; color: var(--rf-muted); max-width: 360px; }
.rf-empty-box .rf-btn { flex: none; min-width: 200px; margin-top: 8px; }
.rf-empty-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--rf-muted); }
.rf-empty-ico svg { width: 32px; height: 32px; fill: currentColor; }
.rf-set { border: 1px solid var(--rf-line); border-radius: 16px; padding: 16px; margin: 0 0 14px; }
.rf-set h2 { margin: 0 0 6px; font-size: 18px; }
.rf-set .rf-muted { margin-bottom: 12px; color: var(--rf-muted); }
.rf-set .rf-settings dt { color: var(--rf-muted); }
.rf-set .rf-btn { flex: none; width: 100%; }
.rf-seg { display: flex; gap: 6px; }
.rf-seg-opt { flex: 1 1 0; position: relative; }
.rf-seg-opt input, .rf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rf-seg-opt span { display: flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid var(--rf-line); border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--rf-muted); }
.rf-seg-opt input:checked + span { background: rgba(255,255,255,.14); color: var(--rf-fg); border-color: rgba(255,255,255,.35); }
.rf-seg-opt input:focus-visible + span, .rf-switch input:focus-visible + span { outline: 3px solid var(--rf-focus); outline-offset: 2px; }
.rf-switch { display: flex; align-items: center; min-height: 48px; cursor: pointer; position: relative; }
.rf-switch span { display: flex; align-items: center; gap: 12px; }
.rf-switch span::before { content: ""; flex: none; width: 46px; height: 28px; border-radius: 14px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px var(--rf-line); transition: background .15s; }
.rf-switch input:checked + span::before { background: var(--rf-accent); }
.rf-switch span { position: relative; }
.rf-switch span::after { content: ""; position: absolute; left: 3px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .15s; }
.rf-switch input:checked + span::after { transform: translateX(18px); }
.rf-prof .rf-card-text { color: var(--rf-fg); }
.rf-prof .rf-panel.rf-dialog { top: 0; bottom: 0; z-index: calc(var(--rf-z) + 6); }
@media (min-width: 768px) {
  .rf-prof-wrap { max-width: 1200px; margin: 0 auto; padding: 28px 24px 48px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
  .rf-prof-side { position: sticky; top: 92px; }
  .rf-prof-id { flex-direction: column; align-items: flex-start; }
  .rf-prof-lang { display: none; }            /* on desktop the language selector sits in the header */
  .rf-avatar { width: 72px; height: 72px; }
  .rf-tabs { position: static; flex-direction: column; flex-wrap: nowrap; padding: 0; }
  .rf-tab { flex: none; justify-content: space-between; padding: 0 14px; }
  .rf-tabs .rf-tab.rf-tab-cur-settings { display: flex; }
  .rf-sec-title { display: none; }
  .rf-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
  .rf-card:hover .rf-card-media { outline: 2px solid rgba(255,255,255,.35); }
  .rf-set { max-width: 640px; }
  .rf-set .rf-btn { width: auto; display: inline-flex; }
}

/* Site chrome on every page: one header (desktop) / docked logo bar + bottom nav (phones), same items and icons. */
.rf-site { display: contents; }
.rf-site * { box-sizing: border-box; }
html.rf-lock .rf-site-top, html.rf-lock .rf-site-mnav { display: none !important; }
.rf-site-top {
  position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 12px; height: 64px; margin: 0;
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  background: var(--rf-nav-bg); color: var(--rf-fg); border-bottom: 1px solid var(--rf-line);
  font-family: var(--rf-font); font-size: 16px; line-height: 1.2; text-align: left;
}
a.rf-site-logo, a.rf-site-logo:visited, a.rf-site-logo:hover { display: flex; align-items: center; flex: none; min-height: 48px; color: var(--rf-fg) !important; text-decoration: none !important; font-weight: 800; font-size: 20px; }
.rf-site-logo img { display: block; width: calc(var(--rf-site-logo-w, 180px) + var(--rf-logo-grow, 100px)); height: auto; max-height: 60px; max-width: 40vw; object-fit: contain; }
.rf-site-logo-m { display: none !important; }
.rf-site-logo .rf-site-logo-only { display: block !important; }
.rf-site-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.rf-site-tools { display: flex; align-items: center; gap: 8px; flex: none; }
a.rf-site-link, a.rf-site-link:visited { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 12px; color: var(--rf-muted) !important; text-decoration: none !important; font-weight: 600; font-size: 16px; white-space: nowrap; }
a.rf-site-link:hover { color: var(--rf-fg) !important; background: rgba(255,255,255,.08); }
a.rf-site-link[aria-current="page"] { color: var(--rf-fg) !important; background: rgba(255,255,255,.12); }
.rf-site-link .rf-ico { width: 20px; height: 20px; flex: none; display: block; }
.rf-site-link svg { width: 20px; height: 20px; display: block; }
.rf-site-link svg:not(.rf-stroke), .rf-site-gear svg { fill: currentColor !important; }
.rf-site-link svg.rf-stroke { fill: none !important; stroke: currentColor !important; }
.rf-site-gear, .rf-site-mnav { display: none !important; }
.rf-lang { display: flex; align-items: center; min-height: 48px; position: relative; }
.rf-lang > details { position: relative; }
.rf-lang > details > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; }
.rf-foot-nl { display: block; clear: both; }
@media (max-width: 767px) {
  html.rf-chrome body { padding-top: calc(var(--rf-top-h) + env(safe-area-inset-top)) !important; padding-bottom: calc(var(--rf-nav-h) + env(safe-area-inset-bottom)) !important; }
  .rf-site-top {
    position: fixed; left: 0; right: 0; top: 0; justify-content: space-between; gap: 8px;
    height: calc(var(--rf-top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }
  .rf-site-nav, .rf-site-tools { display: none !important; }
  .rf-site-logo .rf-site-logo-d { display: none !important; }
  .rf-site-logo .rf-site-logo-m { display: block !important; width: calc(var(--rf-logo-w, 150px) + var(--rf-logo-grow, 100px)); height: auto; max-height: 64px; max-width: calc(100vw - 112px); }
  .rf-site-gear { display: grid !important; }
  .rf-site-mnav { display: flex !important; z-index: 1001; }
}

/* Visible focus for keyboard users */
.rf-root :focus-visible, .rf-nav :focus-visible, .rf-panel :focus-visible, .rf-prof :focus-visible {
  outline: 3px solid var(--rf-focus); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0,0,0,.6);
}
.rf-item:focus-visible { outline-offset: -4px; }

@keyframes rf-fade { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion: the device setting, or the override in Profile > Settings (html.rf-reduce is set by feed.js) */
html.rf-reduce .rf-feed { scroll-behavior: auto; }
html.rf-reduce .rf-heart.rf-go { animation: rf-heart-still .7s linear forwards; }
html.rf-reduce .rf-panel, html.rf-reduce .rf-skel-media, html.rf-reduce .rf-skel-cards .rf-card-media { animation: none; }
html.rf-reduce .rf-spin { animation-duration: 3s; }
@media (prefers-reduced-motion: reduce) { html:not(.rf-motion-full) .rf-spin { animation-duration: 3s; } }
html.rf-reduce .rf-fetchbar::before { animation: none; left: 0; width: 100%; opacity: .5; }
html.rf-reduce .rf-act:active .rf-ico { transform: none; }
html.rf-reduce .rf-switch span::before, html.rf-reduce .rf-switch span::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.rf-motion-full) .rf-boot .rf-skel-media { animation: none; }
}
@keyframes rf-heart-still { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* Hardening against site-wide resets (e.g. `* { filter: none !important; text-shadow: none !important }`). */
.rf-root .rf-bg { filter: blur(28px) brightness(.45) !important; }
.rf-root .rf-act, .rf-root .rf-meta-btn { text-shadow: 0 1px 3px rgba(0,0,0,.7) !important; }
.rf-root .rf-act svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) !important; fill: currentColor !important; }
.rf-root .rf-heart { filter: drop-shadow(0 4px 18px rgba(0,0,0,.45)) !important; }
a.rf-brand, a.rf-brand:visited, a.rf-brand:hover { color: var(--rf-fg) !important; text-decoration: none !important; }
.rf-root .rf-brand { text-shadow: 0 1px 3px rgba(0,0,0,.6) !important; }
a.rf-gear, a.rf-gear:visited, a.rf-gear:hover { color: var(--rf-muted) !important; text-decoration: none !important; }
a.rf-nav-btn, a.rf-nav-btn:visited, a.rf-nav-btn:hover { color: var(--rf-muted) !important; text-decoration: none !important; }
.rf-nav-btn[aria-current="page"], a.rf-nav-btn[aria-current="page"] { color: var(--rf-fg) !important; }
.rf-nav svg:not(.rf-stroke), .rf-gear svg { fill: currentColor !important; }
.rf-nav svg.rf-stroke { fill: none !important; stroke: currentColor !important; }
/* Dock icons: each tab's icon gets its own pastel by position (covers site extras like Guides/Support); labels keep muted / current-page fg */
.rf-nav > .rf-nav-btn:nth-child(1) { --rf-nav-ico: #FFC2A8; }
.rf-nav > .rf-nav-btn:nth-child(2) { --rf-nav-ico: #8FDEF0; }
.rf-nav > .rf-nav-btn:nth-child(3) { --rf-nav-ico: #FFC48E; }
.rf-nav > .rf-nav-btn:nth-child(4) { --rf-nav-ico: #C5C8FF; }
.rf-nav > .rf-nav-btn:nth-child(5) { --rf-nav-ico: #F4B6D4; }
.rf-nav > .rf-nav-btn:nth-child(6) { --rf-nav-ico: #A8EBD4; }
.rf-nav .rf-nav-btn .rf-ico { color: var(--rf-nav-ico, currentColor) !important; }
.rf-nav .rf-nav-btn[aria-current="page"] .rf-ico { filter: saturate(1.35) !important; }
.rf-root .rf-act .rf-ico { color: var(--rf-ico-c, var(--rf-fg)) !important; }
.rf-root .rf-act .rf-lbl { color: var(--rf-fg) !important; }
.rf-panel a, .rf-panel a:visited { color: inherit !important; }
a.rf-card, a.rf-card:visited, a.rf-card:hover { color: inherit !important; text-decoration: none !important; }
.rf-root :focus-visible, .rf-nav :focus-visible, .rf-panel :focus-visible { box-shadow: 0 0 0 5px rgba(0,0,0,.6) !important; }
.rf-boot .rf-nav-btn, .rf-boot .rf-top { font-family: var(--rf-font) !important; }


/* Merged search page (Search | Inspire tabs on one URL), rendered by the site's worker */
.rf-sp-tabs { display: flex; gap: 6px; margin: 4px 0 16px; padding: 4px; border: 1px solid var(--rf-line); border-radius: 14px; width: max-content; max-width: 100%; }
a.rf-sp-tab, a.rf-sp-tab:visited { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 120px; padding: 0 18px; border-radius: 10px; color: var(--rf-muted) !important; text-decoration: none !important; font-weight: 700; font-size: 16px; font-family: var(--rf-font); }
a.rf-sp-tab[aria-current="page"] { color: var(--rf-fg) !important; background: rgba(255,255,255,.12); }
a.rf-sp-tab svg { width: 20px; height: 20px; fill: currentColor; }
a.rf-sp-tab svg.rf-stroke { fill: none; stroke: currentColor; }
.rf-sp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 0 0 20px; font-family: var(--rf-font); }
.rf-sp-form input[type="search"], .rf-sp-form select { min-height: 48px; font-size: 16px !important; }
.rf-sp-form input[type="search"] { flex: 1 1 320px; }
.rf-sp-form select { flex: 0 1 200px; }
.rf-sp-form button { min-height: 48px; font-size: 16px; }
.rf-sp-lead { margin: 0 0 12px; color: var(--rf-muted); font-size: 16px; }
@media (max-width: 767px) {
  .rf-sp-tabs { width: 100%; }
  a.rf-sp-tab { flex: 1 1 0; min-width: 0; }
  .rf-sp-form input[type="search"], .rf-sp-form select, .rf-sp-form button { flex: 1 1 100%; }
}
/* Profile section tabs shown on a site page (e.g. Personalize) */
.rf-sub-tabs { position: static; flex-direction: row !important; flex-wrap: wrap; margin: 0 0 20px; background: transparent; font-family: var(--rf-font); }
.rf-sub-tabs .rf-tab { flex: 1 1 40%; justify-content: center; }
@media (min-width: 768px) { .rf-sub-tabs .rf-tab { flex: 0 1 180px; } }

/* Desktop Profile in the site header: the icon only (no label) */
a.rf-site-link.rf-icon-only { padding: 0; width: 48px; justify-content: center; }
a.rf-site-link.rf-icon-only .rf-ico, a.rf-site-link.rf-icon-only svg { width: 24px; height: 24px; }

/* Leaving the feed (Search, Tags, Profile): cover the current card at once so nothing shows through */
html.rf-leaving .rf-feed, html.rf-leaving .rf-rail { visibility: hidden !important; }
html.rf-leaving .rf-root { background: var(--rf-bg) !important; }

html:not(.nd-ag-ok) .rf-boot{display:none!important}

:root{--rf-accent:#ff4fa3;--rf-on-accent:#fff;--rf-bg:#0a0c10;--rf-sheet-bg:#161a24;--rf-sheet-fg:#f2f0ea;--rf-sheet-muted:#9a958c;--rf-line:#2a3140;--rf-logo-w:100px;--rf-site-logo-w:100px}
html.rf-chrome header.nd-top .nd-top-row, html.rf-chrome header.nd-top .nd-menu{display:none!important}

html.rf-chrome .nd-foot .nd-wrap { align-items: center; text-align: center; }
html.rf-chrome .nd-foot-legal { justify-content: center !important; }
/* The age gate stays the only thing on screen until it is passed */
html.rf-chrome:not(.nd-ag-ok):not(.rf-prof-html) .rf-site-top, html.rf-chrome:not(.nd-ag-ok):not(.rf-prof-html) .rf-site-mnav { display: none !important; }
html.rf-chrome .nd-inspire-page .rf-sp-tabs { margin-top: 8px; }
/* Tag bar: the old header's rainbow strip, in the page flow right under the logo header (desktop + phones).
   Not sticky and never slid away, so it can not cover the logo header or the page. Hidden until the age gate is passed. */
html.rf-chrome header.nd-top { position: static !important; transform: none !important; box-shadow: none !important; border-bottom: 0; z-index: auto; }
html.rf-chrome .nd-nav-row { display: block !important; }
html.rf-chrome:not(.nd-ag-ok):not(.rf-prof-html) .nd-nav-row { display: none !important; }
/* Phones, reels feed: the same strip docked under the logo bar; the image starts below it (the action rail sits low, clear of it) */
.rf-root .qd-feed-tags { display: none; }
@media (max-width: 767px) {
  html.nd-ag-ok .rf-root .qd-feed-tags { display: block !important; position: absolute; left: 0; right: 0; top: calc(var(--rf-top-h) + env(safe-area-inset-top)); z-index: 4; }
  .rf-root .qd-feed-tags .nd-wrap { padding: 0 8px; }
  html.qd-feed-tagbar.nd-ag-ok .rf-root .rf-img { top: calc(var(--rf-top-h) + env(safe-area-inset-top) + 40px); height: calc(100% - var(--rf-top-h) - env(safe-area-inset-top) - 40px); }
}