/* PostsViewer premium design system (theme 1.10.0). Loaded after every other stylesheet, so it re-themes the whole site
   (dark midnight, violet / blue / cyan / pink gradients, glass cards, glow, motion) without touching any markup logic or URL.
   Motion uses transform/opacity only and is switched off by prefers-reduced-motion. */

/* ---------- 1. Tokens ---------- */
:root {
  --background: #050816;
  --background-2: #0b1224;
  --foreground: #f8fafc;
  --muted: #a9b5d0;
  --accent: #8b5cf6;
  --accent-dark: #c4b5fd;      /* used for links and hover text: light lavender on dark */
  --accent-soft: rgba(139, 92, 246, 0.16);
  --border: rgba(148, 163, 184, 0.2);
  --surface: rgba(15, 23, 42, 0.62);
  --surface-solid: #0e1630;
  --violet: #a855f7;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --pink: #ec4899;
  --grad: linear-gradient(120deg, #8b5cf6 0%, #3b82f6 55%, #22d3ee 100%);
  --grad-text: linear-gradient(90deg, #c4b5fd, #60a5fa, #22d3ee, #f472b6, #c4b5fd);
  --glow: 0 0 0 1px rgba(139, 92, 246, 0.45), 0 12px 40px -12px rgba(139, 92, 246, 0.65);
  --shadow: 0 18px 50px -20px rgba(2, 6, 23, 0.9);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
html { background: var(--background); }
html body { background-color: var(--background); color: var(--foreground); } /* beats WordPress global-styles printed later on non-theme pages (404) */
body {
  background: var(--background);
  color: var(--foreground);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
/* animated aurora behind everything */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  will-change: transform;
}
body::before { top: -30vmax; left: -20vmax; background: radial-gradient(circle, rgba(139, 92, 246, 0.55), transparent 62%); animation: pv-drift-a 26s ease-in-out infinite alternate; }
body::after { bottom: -35vmax; right: -25vmax; background: radial-gradient(circle, rgba(34, 211, 238, 0.35), rgba(236, 72, 153, 0.18) 45%, transparent 66%); animation: pv-drift-b 32s ease-in-out infinite alternate; }
@keyframes pv-drift-a { to { transform: translate3d(14vmax, 8vmax, 0) scale(1.08); } }
@keyframes pv-drift-b { to { transform: translate3d(-12vmax, -9vmax, 0) scale(1.1); } }
::selection { background: rgba(139, 92, 246, 0.55); color: #fff; }

/* ---------- 2. Typography and gradient headings ---------- */
main h1 {
  background: var(--grad-text);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -0.03em;
  animation: pv-shift 12s linear infinite;
}
@keyframes pv-shift { to { background-position: 250% 0; } }
main h2 { letter-spacing: -0.02em; background: linear-gradient(90deg, #f8fafc, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
main h3 { letter-spacing: -0.01em; }
main a:not([class]) { color: var(--accent-dark); text-decoration-color: rgba(196, 181, 253, 0.45); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
main a:not([class]):hover { color: #fff; text-decoration-color: var(--cyan); }

/* ---------- 3. Glass surfaces (every former white card) ---------- */
.bg-white,
.pvt-card, .pvt-profile, .pvt-album, .pvt-privacy, .pvt-unavailable, .pvt-btn-ghost,
.pv-acct-switch, .pv-acct-tablewrap, .pvb-card, .pva-skel-card,
.pv-panel, .pv-nav {
  background-color: var(--surface);
}
.bg-white, .pvt-card, .pvt-profile, .pvt-album, .pvt-privacy, .pvt-unavailable, .pv-acct-tablewrap, .pvb-card {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.bg-accent-soft { background-color: var(--accent-soft); }
.text-foreground { color: var(--foreground); }
.border-border { border-color: var(--border); }
.shadow-sm { box-shadow: var(--shadow); }
table thead.bg-accent-soft, .pv-acct-table thead th { background: rgba(139, 92, 246, 0.14); }
.pvt-media, .pvt-avatar, .pvt-bigavatar, .pvt-cover { background: rgba(139, 92, 246, 0.14); }
.pvt-avatar { box-shadow: 0 0 0 3px var(--background), 0 0 0 5px transparent; background-image: var(--grad); padding: 0; border: 3px solid transparent; background-clip: padding-box; outline: 2px solid rgba(139, 92, 246, 0.6); outline-offset: 2px; }

/* cards lift and glow on hover */
.group.relative, .pvt-card, .pvt-album, .pvb-card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s; }
.group.relative:hover, .pvt-card:hover, .pvt-album:hover, .pvb-card:hover { transform: translateY(-4px); border-color: rgba(139, 92, 246, 0.6); box-shadow: var(--glow); }
.group.relative .rounded-xl.bg-accent-soft { transition: transform 0.35s var(--ease), background 0.25s; }
.group.relative:hover .rounded-xl.bg-accent-soft { transform: rotate(-6deg) scale(1.08); background: var(--grad); color: #fff; }

/* ---------- 4. Buttons and inputs ---------- */
.bg-accent, .pvt-btn, .pv-acct-btn.is-on, .pva-btn, .pvb-pagination .page-numbers.current {
  background-image: var(--grad);
  background-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.85);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s;
  position: relative;
  overflow: hidden;
}
.bg-accent:hover, .pvt-btn:hover, .hover\:bg-accent-dark:hover, .pva-btn:hover {
  background-color: var(--accent);
  background-image: var(--grad);
  filter: brightness(1.12) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 14px 38px -10px rgba(34, 211, 238, 0.55);
}
.bg-accent:active, .pvt-btn:active { transform: translateY(0) scale(0.985); }
.bg-accent::after, .pvt-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%); transform: translateX(-120%); }
.bg-accent:hover::after, .pvt-btn:hover::after { transform: translateX(120%); transition: transform 0.8s var(--ease); }
.pvt-btn-ghost, .pva-tone { background-image: none; color: var(--foreground); border: 1px solid var(--border); box-shadow: none; }
.pvt-btn-ghost:hover { background-color: var(--accent-soft); background-image: none; filter: none; box-shadow: none; }
form .focus-within\:border-accent:focus-within, form .rounded-2xl:focus-within { border-color: rgba(139, 92, 246, 0.8); box-shadow: var(--glow); }
form .rounded-2xl { transition: box-shadow 0.3s var(--ease), border-color 0.25s; }
input, textarea, select { color: var(--foreground); caret-color: var(--cyan); }
input::placeholder, textarea::placeholder { color: rgba(169, 181, 208, 0.75); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pvt-status, [data-pvt-status], [data-pv-status] { color: var(--muted); }

/* ---------- 5. Header: glass bar, logo mark, animated dropdowns ---------- */
.pv-header { background: transparent; border-bottom: 1px solid var(--border); isolation: isolate; }
.pv-header::before { /* blur on a pseudo-element so the fixed mobile panel is not trapped inside the header */
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(5, 8, 22, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.pv-header.is-scrolled::before { background: rgba(5, 8, 22, 0.9); }
.pv-header.is-scrolled { box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.9); }
.pv-logo { gap: 0.6rem; color: var(--foreground); font-weight: 800; letter-spacing: -0.02em; font-size: 1.2rem; }
.pv-logo-mark { display: inline-flex; width: 2rem; height: 2rem; border-radius: 0.7rem; background: var(--grad); align-items: center; justify-content: center; box-shadow: 0 6px 22px -6px rgba(139, 92, 246, 0.9); transition: transform 0.4s var(--ease); }
.pv-logo:hover .pv-logo-mark { transform: rotate(-8deg) scale(1.08); }
.pv-logo-word { background: linear-gradient(90deg, #f8fafc, #c4b5fd 60%, #67e8f9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pv-trigger, .pv-link { color: var(--muted); transition: color 0.2s, background 0.2s; }
.pv-trigger:hover, .pv-link:hover, .pv-item[data-open] > .pv-trigger { color: #fff; background: rgba(139, 92, 246, 0.18); }
.pv-item[data-active] > .pv-trigger, .pv-item[data-active] > .pv-link { color: #fff; }
.pv-panel { border-color: var(--border); background: rgba(11, 18, 36, 0.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(139, 92, 246, 0.15); transform: translateY(8px) scale(0.98); transform-origin: top; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s; }
.pv-item[data-open] > .pv-panel, .pv-item > .pv-panel:focus-within { transform: none; }
@media (hover: hover) and (min-width: 900px) { .pv-item:hover > .pv-panel { transform: none; } }
.pv-mi, .pv-hub { color: var(--foreground); transition: background 0.2s, transform 0.2s var(--ease); }
.pv-mi:hover, .pv-mi:focus-visible { background: rgba(139, 92, 246, 0.18); transform: translateX(3px); }
.pv-mi-icon { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; transition: transform 0.3s var(--ease), background 0.2s; }
.pv-mi:hover .pv-mi-icon { transform: scale(1.1) rotate(-5deg); background: var(--grad); color: #fff; }
.pv-hub { border-color: rgba(139, 92, 246, 0.4); background: linear-gradient(120deg, rgba(139, 92, 246, 0.22), rgba(34, 211, 238, 0.12)); }
.pv-hub .pv-mi-icon { background: var(--grad); color: #fff; }
.pv-mi-desc { color: var(--muted); }
.pv-cta { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 1.1rem; border-radius: 9999px; font-weight: 700; font-size: 0.9rem; color: #fff; background-image: var(--grad); box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.9); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); white-space: nowrap; }
.pv-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(34, 211, 238, 0.7); }
.pv-burger, .pv-close { color: var(--foreground); }
.pv-burger:hover { background: rgba(139, 92, 246, 0.18); }
.pv-scrim { background: rgba(2, 6, 23, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (max-width: 899.98px) {
  .pv-nav { background: rgba(8, 13, 30, 0.97); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6); transition: transform 0.35s var(--ease), visibility 0.35s; }
  .pv-nav-top { border-bottom-color: var(--border); }
  .pv-cta { margin: 0.75rem 1rem; justify-content: center; min-height: 48px; }
  .pv-menu .pv-item .pv-panel { background: transparent; box-shadow: none; }
}
@media (min-width: 900px) { .pv-cta-wrap { margin-left: 0.5rem; } }

/* ---------- 6. Hero ---------- */
.pv-hero { position: relative; padding: 4.5rem 1rem 3rem; overflow: hidden; }
.pv-hero-inner { position: relative; z-index: 1; margin: 0 auto; max-width: 72rem; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .pv-hero-inner { grid-template-columns: 1.15fr 0.85fr; } }
.pv-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; border: 1px solid var(--border); border-radius: 9999px; background: rgba(139, 92, 246, 0.12); color: #ddd6fe; font-size: 0.8125rem; font-weight: 600; }
.pv-eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pv-pulse 2.4s ease-in-out infinite; }
@keyframes pv-pulse { 50% { opacity: 0.4; transform: scale(0.8); } }
.pv-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.04; font-weight: 800; margin: 1rem 0 0; }
.pv-hero-lead { margin: 1.25rem 0 0; max-width: 38rem; font-size: 1.15rem; line-height: 1.65; color: var(--muted); }
.pv-search { margin-top: 2rem; max-width: 40rem; }
.pv-search-box { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 1.25rem; background: rgba(15, 23, 42, 0.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); transition: box-shadow 0.3s var(--ease), border-color 0.25s; }
.pv-search-box:focus-within { border-color: rgba(139, 92, 246, 0.85); box-shadow: var(--glow); }
@media (min-width: 640px) { .pv-search-box { flex-direction: row; align-items: center; } }
.pv-search-box input { flex: 1; min-width: 0; height: 3.25rem; padding: 0 1rem; border: 0; background: transparent; color: var(--foreground); font-size: 1.0625rem; outline: none; }
/* Phones: in the column layout "flex: 1" collapsed the field to its text line (22px), so only the text was tappable. Keep the full 3.25rem height. */
@media (max-width: 639.98px) { .pv-search-box input { flex: 0 0 auto; height: 3.25rem; min-height: 3.25rem; } }
.pv-paste { min-height: 44px; padding: 0 1rem; border: 1px solid var(--border); border-radius: 0.9rem; background: rgba(139, 92, 246, 0.12); color: #ddd6fe; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.2s var(--ease); }
.pv-paste:hover { background: rgba(139, 92, 246, 0.28); transform: translateY(-1px); }
.pv-go { min-height: 52px; padding: 0 1.6rem; border: 0; border-radius: 0.9rem; font-size: 1.0625rem; font-weight: 700; color: #fff; cursor: pointer; background-image: var(--grad); box-shadow: 0 12px 34px -10px rgba(99, 102, 241, 0.95); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); animation: pv-glow 3.5s ease-in-out infinite; }
.pv-go:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -10px rgba(34, 211, 238, 0.8); }
@keyframes pv-glow { 50% { box-shadow: 0 12px 44px -6px rgba(168, 85, 247, 0.95); } }
.pv-search-hint { margin: 0.75rem 0 0; min-height: 1.25rem; font-size: 0.875rem; color: var(--muted); }
.pv-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.pv-chips li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 9999px; background: rgba(15, 23, 42, 0.55); font-size: 0.8125rem; font-weight: 600; color: #e2e8f0; }
.pv-chips svg { color: var(--cyan); }
.pv-hero-extra { margin-top: 2rem; max-width: 40rem; }
.pv-hero-extra > p { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--muted); }
/* product illustration: floating glass cards, pure CSS */
.pv-art { position: relative; min-height: 22rem; display: none; }
@media (min-width: 960px) { .pv-art { display: block; } }
.pv-card-float { position: absolute; border: 1px solid var(--border); border-radius: 1.4rem; background: linear-gradient(160deg, rgba(30, 41, 80, 0.75), rgba(15, 23, 42, 0.7)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow), 0 0 0 1px rgba(139, 92, 246, 0.15); padding: 1rem; }
.pv-cf-main { inset: 1rem 2.5rem 3rem 0.5rem; animation: pv-float 9s ease-in-out infinite; }
.pv-cf-a { width: 10.5rem; right: 0; top: 0; animation: pv-float 7s ease-in-out -2s infinite; }
.pv-cf-b { width: 11.5rem; left: 0; bottom: 0; animation: pv-float 8s ease-in-out -4s infinite; }
@keyframes pv-float { 50% { transform: translateY(-14px); } }
.pv-ring { width: 3.6rem; height: 3.6rem; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #f472b6, #a855f7, #3b82f6, #22d3ee, #f472b6); }
.pv-ring::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6d4bdb, #1e1b4b); border: 3px solid #0b1224; }
.pv-skel { display: block; height: 0.6rem; border-radius: 0.4rem; background: linear-gradient(90deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.36), rgba(148, 163, 184, 0.18)); background-size: 200% 100%; animation: pv-skel 2.4s linear infinite; }
@keyframes pv-skel { to { background-position: -200% 0; } }
.pv-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1rem; }
.pv-art-grid span { aspect-ratio: 1; border-radius: 0.7rem; background: linear-gradient(135deg, rgba(139, 92, 246, 0.55), rgba(59, 130, 246, 0.35)); }
.pv-art-grid span:nth-child(3n+2) { background: linear-gradient(135deg, rgba(34, 211, 238, 0.45), rgba(139, 92, 246, 0.4)); }
.pv-art-grid span:nth-child(4n) { background: linear-gradient(135deg, rgba(236, 72, 153, 0.5), rgba(168, 85, 247, 0.4)); }
.pv-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.8; animation: pv-float 10s ease-in-out infinite; }
.pv-orb-1 { width: 0.9rem; height: 0.9rem; left: 45%; top: 8%; background: var(--cyan); box-shadow: 0 0 24px var(--cyan); }
.pv-orb-2 { width: 0.6rem; height: 0.6rem; right: 8%; bottom: 30%; background: var(--pink); box-shadow: 0 0 22px var(--pink); animation-delay: -3s; }

/* ---------- 7. Sections ---------- */
main > section { position: relative; }
main > section:nth-of-type(even)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(11, 18, 36, 0.55), transparent); }
main > section:nth-of-type(3n)::after { content: ""; position: absolute; left: 50%; top: 0; width: min(60rem, 90%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), rgba(34, 211, 238, 0.5), transparent); }
.pv-section-head { max-width: 44rem; margin: 0 auto 2.25rem; text-align: center; }
.pv-latest { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.5rem; }
.pv-latest a { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: 1.2rem; background: var(--surface); color: var(--foreground); text-decoration: none; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s; }
.pv-latest a:hover { transform: translateY(-4px); border-color: rgba(139, 92, 246, 0.6); box-shadow: var(--glow); }
.pv-latest strong { font-size: 1.05rem; line-height: 1.35; }
.pv-latest span { font-size: 0.85rem; color: var(--muted); }
.pv-final { max-width: 56rem; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; border: 1px solid rgba(139, 92, 246, 0.4); border-radius: 2rem; background: radial-gradient(120% 140% at 50% 0%, rgba(139, 92, 246, 0.28), rgba(15, 23, 42, 0.7) 60%); box-shadow: var(--glow); }
.pv-final h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.pv-final p { margin: 0.9rem auto 1.5rem; max-width: 34rem; color: var(--muted); }

/* scroll reveal (class added by premium.js only to elements below the fold) */
.pv-js .pv-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--pv-d, 0ms); }
.pv-js .pv-reveal.is-in { opacity: 1; transform: none; }

/* ---------- 8. Footer ---------- */
footer.bg-white, .pv-footer { margin-top: 5rem; border-top: 1px solid transparent; background: linear-gradient(180deg, rgba(11, 18, 36, 0.4), rgba(5, 8, 22, 0.95)); position: relative; -webkit-backdrop-filter: none; backdrop-filter: none; }
footer.bg-white::before, .pv-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #8b5cf6, #22d3ee, #ec4899, transparent); }
.pv-brandcol { display: flex; flex-direction: column; gap: 0.9rem; max-width: 20rem; }
.pv-brandcol p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
footer a.text-muted, footer a { transition: color 0.2s, transform 0.2s var(--ease); }
footer a:hover { color: #fff !important; transform: translateX(3px); }
footer .text-foreground { color: #fff; }

/* ---------- 9. Legacy blocks re-themed ---------- */
.pvb-content { color: #dbe3f4; }
.pvb-content details { background: var(--surface); }
.pvb-chip { background: var(--surface); color: var(--foreground); }
.pva-report, .pva-skel { color: var(--foreground); }
.pva-sub, .pva-note, .pva-ring-n span, .pva-k, .pva-ct em, .pva-hook, .pva-stat span, .pva-formats span, .pva-wait { color: var(--muted); }
.pva-ring::before { background: var(--surface-solid); }
.pva-chip, .pva-tag { background: rgba(139, 92, 246, 0.22); color: #ddd6fe; }
.pva-tags { color: #c4b5fd; }
.pva-skel-card, .pva-opt, .pva-day, .pva-stat { background: var(--surface); border-color: var(--border); }
.pva-error { background: rgba(127, 29, 29, 0.25); border-color: rgba(248, 113, 113, 0.4); }
.pva-err { color: #fca5a5; }
.pv-consent { background: #0e1630; color: #e2e8f0; border: 1px solid var(--border); box-shadow: var(--shadow); }
.pv-consent-more { color: #c4b5fd; }
.pv-consent-btn:first-child { background: transparent; color: #ddd6fe; border-color: #8b5cf6; }
.pv-consent-btn { background: var(--grad); border-color: transparent; color: #fff; }
.pv-acct-switch { border-color: var(--border); background: rgba(15, 23, 42, 0.7); }
.pv-acct-btn { color: var(--foreground); }
.pv-acct-btn:hover:not(.is-on) { background: rgba(139, 92, 246, 0.2); }
.pv-acct-table th, .pv-acct-table td { border-bottom-color: var(--border); }
.pv-acct-supported { background: rgba(34, 197, 94, 0.16); color: #86efac; border-color: rgba(34, 197, 94, 0.4); }
.pv-acct-provider { background: rgba(248, 113, 113, 0.14); color: #fca5a5; border-color: rgba(248, 113, 113, 0.4); }
.pv-acct-na { background: rgba(139, 92, 246, 0.16); color: #ddd6fe; border-color: rgba(139, 92, 246, 0.4); }
.pv-acct-auth { background: rgba(251, 191, 36, 0.14); color: #fde68a; border-color: rgba(251, 191, 36, 0.4); }
.pvt-unavailable { border-style: dashed; }
.pvt-profile .pvt-badge { background: rgba(139, 92, 246, 0.25); color: #ddd6fe; }
.pvt-dl-error { color: #fca5a5; }
/* result entrance */
.pvt-out > *, .pvt-grid > * { animation: pv-pop 0.55s var(--ease) both; }
.pvt-grid > *:nth-child(2) { animation-delay: 0.05s; } .pvt-grid > *:nth-child(3) { animation-delay: 0.1s; } .pvt-grid > *:nth-child(4) { animation-delay: 0.15s; }
@keyframes pv-pop { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
button[disabled][data-label], .pvt-btn:disabled { animation: pv-busy 1.4s ease-in-out infinite; }
@keyframes pv-busy { 50% { opacity: 0.55; } }

/* ---------- 10. Reduced motion and small screens ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .pv-js .pv-reveal { opacity: 1; transform: none; }
  main h1 { background-size: 100% 100%; }
}
@media (max-width: 639.98px) {
  body::before, body::after { filter: blur(60px); opacity: 0.32; }  /* lighter aurora on phones */
  .pv-hero { padding-top: 3rem; }
  .pv-go { width: 100%; }
}

/* ---------- 11. DEMO MODE (1.10.1, staging only) ---------- */
.pv-demo-banner { position: relative; z-index: 60; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: center; justify-content: center; padding: 0.5rem 1rem; background: repeating-linear-gradient(135deg, #f59e0b 0 14px, #d97706 14px 28px); color: #1c1305; font-size: 0.8125rem; line-height: 1.4; text-align: center; }
.pv-demo-banner strong { padding: 0.1rem 0.5rem; border-radius: 0.35rem; background: #1c1305; color: #fde68a; letter-spacing: 0.08em; }
.pv-demo-banner code { padding: 0 0.3rem; border-radius: 0.3rem; background: rgba(28, 19, 5, 0.15); font-size: 0.78rem; }
body.pv-demo .pv-header { top: 0; }
.pv-demo-tag { display: inline-block; margin: 0 auto 1rem; padding: 0.3rem 0.8rem; border: 1px dashed #f59e0b; border-radius: 9999px; background: rgba(245, 158, 11, 0.12); color: #fde68a; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; }
.pvt-out > .pv-demo-tag { display: block; width: fit-content; }

/* ---------- 12. Animated hero scene (home, 1.10.5 final) ----------
   One 10-second loop: a username is typed, the public profile opens (counts, posts, reels), a post gets likes and a reel is
   saved, then the same card shows the honest "Private" state. Stories are labelled "Coming soon". CSS only, transform/opacity
   only; prefers-reduced-motion (section 10 and the end of this section) stops it and leaves the public state visible. */
.pv-h1-soon { display: inline-block; vertical-align: middle; margin-left: 0.35rem; padding: 0.3rem 0.75rem; border: 1px dashed rgba(244, 114, 182, 0.6); border-radius: 9999px; background: rgba(236, 72, 153, 0.1); color: #f9a8d4; -webkit-text-fill-color: #f9a8d4; font-size: 0.32em; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; }
@property --pv-n1 { syntax: "<integer>"; inherits: false; initial-value: 128; }
@property --pv-n2 { syntax: "<integer>"; inherits: false; initial-value: 12; }
@property --pv-n3 { syntax: "<integer>"; inherits: false; initial-value: 310; }
.pv-scene { display: flex; flex-direction: column; gap: 0.75rem; overflow: hidden; }
.pv-sc-search { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.45rem 0.45rem 0.8rem; border: 1px solid rgba(139, 92, 246, 0.45); border-radius: 9999px; background: rgba(15, 23, 42, 0.7); font: 600 0.8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e2e8f0; }
.pv-sc-at { color: #c084fc; }
.pv-sc-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 8ch; border-right: 2px solid #22d3ee; animation: pv-sc-type 10s steps(8) infinite, pv-sc-caret 0.8s step-end infinite; }
.pv-sc-go { margin-left: auto; padding: 0.35rem 0.75rem; border-radius: 9999px; background: linear-gradient(90deg, #8b5cf6, #22d3ee); color: #0b1224; font-family: inherit; font-size: 0.72rem; animation: pv-sc-press 10s ease-in-out infinite; }
@keyframes pv-sc-type { 0%, 3% { width: 0; } 14%, 92% { width: 8ch; } 97%, 100% { width: 0; } }
@keyframes pv-sc-caret { 50% { border-color: transparent; } }
@keyframes pv-sc-press { 0%, 15% { transform: none; } 16.5% { transform: scale(0.9); } 18%, 100% { transform: none; } }
.pv-sc-profile { display: flex; align-items: center; gap: 0.8rem; }
.pv-sc-ring { position: relative; flex: none; animation: pv-sc-spin 6s linear infinite; }
@keyframes pv-sc-spin { to { transform: rotate(360deg); } }
.pv-sc-id { flex: 1; display: grid; gap: 0.5rem; }
.pv-sc-badges { position: relative; height: 1.35rem; }
.pv-sc-badges b { position: absolute; left: 0; top: 0; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.pv-sc-pub { background: rgba(34, 197, 94, 0.16); border: 1px solid rgba(34, 197, 94, 0.55); color: #86efac; animation: pv-sc-pubk 10s ease-in-out infinite; }
.pv-sc-priv { background: rgba(245, 158, 11, 0.16); border: 1px solid rgba(245, 158, 11, 0.55); color: #fcd34d; opacity: 0; animation: pv-sc-privk 10s ease-in-out infinite; }
@keyframes pv-sc-pubk { 0%, 15% { opacity: 0; transform: translateY(6px); } 19%, 56% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes pv-sc-privk { 0%, 58% { opacity: 0; transform: translateY(6px); } 62%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
.pv-sc-stats { animation: pv-sc-tilef 10s ease-in-out infinite; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; text-align: center; font-size: 0.68rem; color: #94a3b8; }
.pv-sc-stats b { display: block; font-size: 0.95rem; color: #f1f5f9; }
.pv-sc-n1 { counter-reset: n var(--pv-n1); animation: pv-sc-c1 10s ease-out infinite; }
.pv-sc-n2 { counter-reset: n var(--pv-n2); animation: pv-sc-c2 10s ease-out infinite; }
.pv-sc-n3 { counter-reset: n var(--pv-n3); animation: pv-sc-c3 10s ease-out infinite; }
.pv-sc-n1::after { content: counter(n); }
.pv-sc-n2::after { content: counter(n) "K"; }
.pv-sc-n3::after { content: counter(n); }
@keyframes pv-sc-c1 { 0%, 17% { --pv-n1: 0; } 32%, 100% { --pv-n1: 128; } }
@keyframes pv-sc-c2 { 0%, 17% { --pv-n2: 0; } 32%, 100% { --pv-n2: 12; } }
@keyframes pv-sc-c3 { 0%, 17% { --pv-n3: 0; } 32%, 100% { --pv-n3: 310; } }
.pv-sc-grid { position: relative; margin-top: 0; }
.pv-sc-grid span { position: relative; display: flex; align-items: center; justify-content: center; animation: pv-sc-tile 10s ease-out infinite; }
.pv-sc-grid span:nth-child(2) { animation-delay: 0.07s; }
.pv-sc-grid span:nth-child(3) { animation-delay: 0.14s; }
.pv-sc-grid span:nth-child(4) { animation-delay: 0.21s; }
.pv-sc-grid span:nth-child(5) { animation-delay: 0.28s; }
.pv-sc-grid span:nth-child(6) { animation-delay: 0.35s; }
.pv-sc-grid span:nth-child(7) { animation-delay: 0.42s; }
.pv-sc-grid span:nth-child(8) { animation-delay: 0.49s; }
.pv-sc-grid span:nth-child(9) { animation-delay: 0.56s; }
@keyframes pv-sc-tile { 0%, 18% { opacity: 0; transform: scale(0.6); } 24%, 57% { opacity: 1; transform: none; } 61%, 92% { opacity: 0.18; transform: scale(0.96); } 97%, 100% { opacity: 0; transform: scale(0.6); } }
.pv-sc-grid i { font-style: normal; font-size: 0.8rem; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.pv-sc-multi i { position: absolute; top: 0.3rem; right: 0.35rem; font-size: 0.7rem; }
.pv-sc-reel:nth-child(2) i { animation: pv-sc-play 10s ease-in-out infinite; }
@keyframes pv-sc-play { 0%, 30% { transform: scale(1); } 34% { transform: scale(1.6); } 38% { transform: scale(1); } 42% { transform: scale(1.6); } 46%, 100% { transform: scale(1); } }
.pv-sc-lock { position: absolute; left: 1rem; right: 1rem; bottom: 1.2rem; display: grid; justify-items: center; gap: 0.25rem; padding: 0.9rem; border: 1px solid rgba(245, 158, 11, 0.45); border-radius: 1rem; background: rgba(11, 18, 36, 0.9); text-align: center; color: #fde68a; font-size: 0.85rem; font-weight: 700; opacity: 0; animation: pv-sc-lockk 10s ease-in-out infinite; }
.pv-sc-lock b { font-size: 1.4rem; }
.pv-sc-lock small { max-width: 15rem; font-size: 0.7rem; font-weight: 500; color: #cbd5e1; line-height: 1.4; }
@keyframes pv-sc-lockk { 0%, 59% { opacity: 0; transform: translateY(12px); } 64%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
.pv-sc-views { position: absolute; top: 46%; left: 34%; padding: 0.3rem 0.65rem; border-radius: 9999px; background: linear-gradient(90deg, #ec4899, #8b5cf6); color: #fff; font-size: 0.72rem; font-weight: 700; box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45); opacity: 0; animation: pv-sc-viewk 10s ease-out infinite; }
@keyframes pv-sc-viewk { 0%, 33% { opacity: 0; transform: translateY(10px) scale(0.8); } 37%, 52% { opacity: 1; transform: none; } 57%, 100% { opacity: 0; transform: translateY(-12px); } }
.pv-sc-stories { display: grid; gap: 0.5rem; justify-items: start; }
.pv-sc-label { font-size: 0.75rem; font-weight: 700; color: #e2e8f0; }
.pv-sc-rings { display: flex; gap: 0.4rem; }
.pv-sc-rings .pv-ring { width: 2.1rem; height: 2.1rem; padding: 2px; animation: pv-sc-pulse 2.4s ease-in-out infinite; }
.pv-sc-rings .pv-ring:nth-child(2) { animation-delay: 0.3s; }
.pv-sc-rings .pv-ring:nth-child(3) { animation-delay: 0.6s; }
.pv-sc-rings .pv-ring::after { border-width: 2px; }
@keyframes pv-sc-pulse { 50% { transform: scale(1.1); } }
.pv-sc-soon { padding: 0.15rem 0.55rem; border: 1px dashed rgba(244, 114, 182, 0.6); border-radius: 9999px; color: #f9a8d4; font-size: 0.68rem; font-weight: 700; }
.pv-sc-saved { display: flex; align-items: center; gap: 0.65rem; animation: pv-float 8s ease-in-out -4s infinite, pv-sc-savek 10s ease-out infinite; }
.pv-sc-saved b { display: block; font-size: 0.8rem; color: #f1f5f9; }
.pv-sc-saved small { font-size: 0.68rem; color: #94a3b8; }
.pv-sc-dl { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.6rem; background: linear-gradient(135deg, #22c55e, #22d3ee); color: #0b1224; font-weight: 800; }
@keyframes pv-sc-savek { 0%, 44% { opacity: 0.35; } 48%, 58% { opacity: 1; } 64%, 100% { opacity: 0.35; } }
/* Phones and tablets: the scene is shown under the search box, smaller. */
@media (max-width: 959.98px) {
  .pv-art { display: block; min-height: 21rem; max-width: 24rem; width: 100%; margin: 0 auto; }
  .pv-cf-main { inset: 1.5rem 1.5rem 2.6rem 0; }
  .pv-cf-a { width: 8.5rem; top: 0; }
  .pv-cf-b { width: 10rem; }
  .pv-h1-soon { font-size: 0.42em; margin: 0.4rem 0 0; }
  /* order on phones: headline, text, search box, the four ticks, then the scene, then the link box and the date */
  .pv-hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .pv-hero-inner > div:first-child { display: contents; }
  .pv-hero-inner > div:first-child > * { order: 0; }
  .pv-hero-inner > .pv-art { order: 1; margin: 2rem auto 0.5rem; }
  .pv-hero-inner > div:first-child > .pv-hero-extra, .pv-hero-inner > div:first-child > p:last-child { order: 2; }
}
/* Reduced motion (for example Windows "Animation effects" off): no movement at all, only a calm cross-fade of the same
   states (typing, Public, counts, likes, Saved, Private). Opacity-only changes are acceptable for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .pv-art .pv-sc-type { animation: pv-sc-type 10s steps(8) infinite !important; }
  .pv-art .pv-sc-pub { animation: pv-sc-pubf 10s ease-in-out infinite !important; }
  .pv-art .pv-sc-priv { animation: pv-sc-privf 10s ease-in-out infinite !important; }
  .pv-art .pv-sc-lock { animation: pv-sc-privf 10s ease-in-out infinite !important; transform: none; }
  .pv-art .pv-sc-views { animation: pv-sc-viewf 10s ease-in-out infinite !important; }
  .pv-art .pv-sc-grid span { animation: pv-sc-tilef 10s ease-in-out infinite !important; transform: none; }
  .pv-art .pv-sc-stats { animation: pv-sc-tilef 10s ease-in-out infinite !important; }
  .pv-art .pv-sc-saved { animation: pv-sc-savek 10s ease-in-out infinite !important; }
  .pv-art .pv-sc-n1 { animation: pv-sc-c1 10s ease-out infinite !important; }
  .pv-art .pv-sc-n2 { animation: pv-sc-c2 10s ease-out infinite !important; }
  .pv-art .pv-sc-n3 { animation: pv-sc-c3 10s ease-out infinite !important; }
}
@keyframes pv-sc-pubf { 0%, 15% { opacity: 0; } 19%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes pv-sc-privf { 0%, 59% { opacity: 0; } 64%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes pv-sc-viewf { 0%, 33% { opacity: 0; } 37%, 52% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes pv-sc-tilef { 0%, 18% { opacity: 0; } 24%, 57% { opacity: 1; } 61%, 92% { opacity: 0.18; } 97%, 100% { opacity: 0; } }