/* ═══════════════════════════════════════════════════════════════════
   NPolls — v2. Vivid, animated, maximal.
   Deep-space ground, an aurora that never stops moving, glass surfaces,
   glow instead of shadow, motion on nearly everything.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Ground is deep navy rather than neutral black — the blues in the
     palette need a blue-biased ground or they read as grey. */
  --bg:      #060A16;
  --bg-2:    #0B1224;
  --glass:   rgba(16,26,50,.55);
  --glass-2: rgba(255,255,255,.05);
  --edge:    rgba(255,255,255,.08);
  --edge-2:  rgba(255,255,255,.18);

  --txt:   #EEF2FA;
  --txt-2: #7C88A6;
  --txt-3: #6B7794;

  /* Scrim: the veil laid over a photo so type sitting on it stays
     legible. Three stops, opaque at the text end. */
  --scrim-1: rgba(6,10,22,.95);
  --scrim-2: rgba(6,10,22,.72);
  --scrim-3: rgba(6,10,22,.18);

  /* Gold against navy and deep blue. Gold is the single warm note and
     carries emphasis; the blues carry everything structural. */
  --c1: #F4C047;   /* gold        */
  --c2: #D9A32E;   /* antique gold */
  --c3: #5FA8FF;   /* azure       */
  --c4: #FF5A6E;   /* coral — errors only, never decoration */
  --c5: #2F5AE8;   /* deep blue   */
  --live: #F4C047;

  /* Channel forms of the three accents. Every translucent use derives
     from these, so retinting the site is an edit to the tokens alone
     rather than a hunt through thirty rgba() literals. */
  --c1-rgb: 244,192,71;
  --c3-rgb: 95,168,255;
  --c5-rgb: 47,90,232;
  --c5-lite: #7EA0FF;  /* the light end of the blue, for gradients */
  /* Success is semantic, not decorative — it stays green and is
     deliberately outside the gold/blue accent set. */
  --ok: #2FBF71;
  --ok-rgb: 47,191,113;

  --side-a: #F4C047;
  --side-b: #2F5AE8;

  --grad:   linear-gradient(135deg, var(--c1), var(--c5) 50%, var(--c3));
  --grad-2: linear-gradient(135deg, var(--c1), var(--c2));

  /* Filled controls use the gold plate on its own, never the full
     spectrum: text spanning gold-to-blue cannot be one colour and stay
     legible at both ends. White on this gold is 1.7:1 — unreadable — so
     the plate carries navy lettering, which is the gold convention
     anyway. --on-cta flips per theme because the light theme darkens
     the gold to a bronze that needs white back on top. */
  --grad-cta: linear-gradient(135deg, var(--c1), var(--c2));
  --on-cta:   #0B1224;

  --glow-a: 0 0 30px rgba(var(--c1-rgb),.40);
  --glow-c: 0 0 30px rgba(var(--c3-rgb),.35);
  --glow-r: 0 0 30px rgba(var(--c5-rgb),.35);
  --lift:   0 30px 60px -20px rgba(0,0,0,.6);

  --r: 16px; --r-2: 24px; --r-3: 32px;

  --ease:   cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --fast: .18s; --mid: .38s; --slow: .8s;

  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body:    "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --page: 1200px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:      #F6F8FC;
  --bg-2:    #E9EFF9;
  --glass:   rgba(255,255,255,.80);
  --glass-2: rgba(10,18,38,.035);
  --edge:    rgba(10,18,38,.10);
  --edge-2:  rgba(10,18,38,.20);
  --txt:   #0A1226;
  --txt-2: #4C5875;
  --txt-3: #66728F;
  --scrim-1: rgba(246,248,252,.95);
  --scrim-2: rgba(246,248,252,.76);
  --scrim-3: rgba(246,248,252,.24);
  /* Gold at full brightness fails contrast on a light ground, so the
     light theme uses a darker bronze in the same hue family. */
  --c1: #8A6309; --c2: #6E4F07; --c3: #1858C9; --c4: #C62839; --c5: #16368F;
  --live:#8A6309;
  --c1-rgb: 138,99,9;
  --c3-rgb: 24,88,201;
  --c5-rgb: 22,54,143;
  --c5-lite: #3E63C9;
  --on-cta: #FFFFFF;
  --ok: #157A44;
  --ok-rgb: 30,143,82;
  --side-a: #8A6309; --side-b: #16368F;
  --glow-a: 0 0 0 1px rgba(var(--c1-rgb),.22), 0 10px 30px -8px rgba(var(--c1-rgb),.30);
  --glow-c: 0 0 0 1px rgba(var(--c3-rgb),.22), 0 10px 30px -8px rgba(var(--c3-rgb),.28);
  --glow-r: 0 0 0 1px rgba(var(--c5-rgb),.22), 0 10px 30px -8px rgba(var(--c5-rgb),.28);
  color-scheme: light;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ── Background layers ──────────────────────────────────────────────
   Four fixed layers, from the reference: a masked grid, three drifting
   colour orbs, film grain, and slow-rising dots. Together they give the
   page depth without any of it being content. */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
:root[data-theme="light"] .bg-grid{
  background-image:
    linear-gradient(rgba(10,18,38,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,18,38,.04) 1px, transparent 1px);
}

.bg-orb{ position:fixed; border-radius:50%; filter:blur(100px); opacity:.25; pointer-events:none; z-index:0; will-change:transform; }
.bg-orb-1{ width:600px; height:600px; background:var(--c1); top:-200px; left:-200px; animation:orbFloat 20s ease-in-out infinite; }
.bg-orb-2{ width:500px; height:500px; background:var(--c5); bottom:-150px; right:-150px; animation:orbFloat 25s ease-in-out infinite reverse; }
.bg-orb-3{ width:400px; height:400px; background:var(--c3); top:50%; left:50%; opacity:.1; animation:orbFloat 30s ease-in-out infinite; }
:root[data-theme="light"] .bg-orb{ opacity:.14; }
@keyframes orbFloat{
  0%,100%{ transform:translate(0,0); }
  33%{ transform:translate(80px,-40px); }
  66%{ transform:translate(-40px,80px); }
}

.bg-noise{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.floating-dot{
  position:fixed; width:2px; height:2px; border-radius:50%;
  background:var(--txt); opacity:.2; pointer-events:none; z-index:1;
  animation:floatDot 25s linear infinite;
}
@keyframes floatDot{
  0%{ transform:translateY(100vh); opacity:0; }
  10%,90%{ opacity:.25; }
  100%{ transform:translateY(-100px); opacity:0; }
}

/* Everything above the background layers. */
.np-nav, main, .np-foot{ position:relative; z-index:10; }

/* Reading progress across the top of the viewport. */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:200;
  background:linear-gradient(90deg,var(--c1),var(--c5),var(--c3));
  box-shadow:0 0 10px var(--c1); transition:width .1s linear;
}

/* Toast, bottom centre. */
.np-toast{
  position:fixed; bottom:30px; left:50%; z-index:200;
  transform:translateX(-50%) translateY(140px);
  background:color-mix(in srgb, var(--bg-2) 95%, transparent);
  border:1px solid var(--edge-2); backdrop-filter:blur(20px);
  padding:14px 24px; border-radius:100px; font-size:14px; font-weight:500;
  box-shadow:0 20px 40px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  display:flex; align-items:center; gap:10px;
}
.np-toast.show{ transform:translateX(-50%) translateY(0); }

/* The live indicator, used in several places. */
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--live); position:relative; flex-shrink:0; }
.live-dot::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background:var(--live); opacity:.4; animation:livePulse 1.5s ease-out infinite;
}
@keyframes livePulse{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(2.5); opacity:0 } }

/* ── Type ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.03; margin:0; text-wrap:balance; }
h1{ font-size:clamp(29px,4.4vw,52px); }
h2{ font-size:clamp(21px,2.6vw,30px); }
h3{ font-size:clamp(17px,1.9vw,21px); letter-spacing:-.02em; }
p{ margin:0 0 1.05em; }

/* Gradient text that keeps moving. Reserved for the largest headline on
   a page; anywhere else it is noise. */
.grad-text{
  background:linear-gradient(100deg,var(--c3),var(--c1) 30%,var(--c4) 60%,var(--c5) 85%,var(--c3));
  background-size:260% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sweep 9s linear infinite;
}
@keyframes sweep{ to{ background-position:260% center; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-2); padding:7px 15px; border-radius:99px;
  background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(10px);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c3);
  box-shadow:0 0 12px var(--c3); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }

.dek{ font-size:clamp(15px,1.5vw,17px); color:var(--txt-2); max-width:58ch; margin:0; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap{ max-width:var(--page); margin:0 auto; padding:0 24px; position:relative; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 24px; }
main{ display:block; min-height:60vh; }
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
/* The hidden attribute must actually hide.
 *
 * `[hidden]` is only `display:none` in the user-agent stylesheet, so ANY
 * author rule that sets display beats it. .pf-cover-tools and
 * .pf-repos-bar both set display:flex, which is why the owner-only
 * "Reposition" and "Change cover" controls rendered for logged-out
 * visitors on member profiles: the markup said hidden, the CSS said
 * flex, and the CSS won.
 *
 * The endpoints behind those controls were never exposed — they require
 * a session and a CSRF token and answer 401/403 without one — but the
 * page had no business showing them.
 *
 * !important because the attribute selector and a class selector have
 * the same specificity, so source order would otherwise decide it, and
 * every later stylesheet would need to remember this rule exists.
 */
[hidden] { display: none !important; }

::selection{ background:var(--c1); color:var(--on-cta); }
:focus-visible{ outline:2px solid var(--c3); outline-offset:3px; border-radius:6px; }
*{ scrollbar-width:thin; scrollbar-color:var(--edge-2) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--edge-2); border-radius:99px; }

/* ── Glass ──────────────────────────────────────────────────────── */
.glass{
  position:relative; background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r-2);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  transition:transform var(--mid) var(--spring), box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
/* A gradient rim that lights up on hover, masked so it outlines the card
   rather than filling it. */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad); opacity:0; transition:opacity var(--mid) var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.glass:hover::before{ opacity:.9; }
.glass:hover{ transform:translateY(-6px); box-shadow:var(--glow-a); border-color:transparent; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:600; font-size:15px; padding:13px 26px;
  border-radius:99px; border:1px solid var(--edge-2); background:var(--glass);
  color:var(--txt); text-decoration:none; cursor:pointer; overflow:hidden;
  backdrop-filter:blur(12px);
  transition:transform var(--fast) var(--spring), box-shadow var(--mid) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--glow-a); }
.btn:active{ transform:translateY(-1px) scale(.97); }
/* A highlight sweeps across on hover. */
.btn::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:transform .7s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn-accent{ background:var(--grad-cta); border-color:transparent; color:var(--on-cta); box-shadow:var(--glow-a); }
.btn-accent:hover{ box-shadow:0 0 0 1px rgba(124,58,237,.6), 0 14px 44px -8px rgba(124,58,237,.7); }
.btn-lg{ padding:16px 34px; font-size:16.5px; }
.btn-block{ width:100%; }

/* ── Header ─────────────────────────────────────────────────────── */
.np-skip{ position:absolute; left:-9999px; }
.np-skip:focus{ left:0; top:0; z-index:200; background:var(--c1); color:var(--on-cta); padding:10px 16px; }

.np-nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid var(--edge);
}
.np-nav-in{ max-width:var(--page); margin:0 auto; padding:0 24px; height:74px; display:flex; align-items:center; gap:28px; }

.np-logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.np-word{
  font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:-.035em;
  background:var(--grad); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sweep 7s linear infinite;
}
/* The mark is an equaliser: three bars, always moving. */
.np-mark{ display:inline-flex; align-items:flex-end; gap:3px; height:22px; }
.np-mark i{ width:4px; border-radius:99px; display:block; background:var(--grad); animation:eq 1.5s ease-in-out infinite; }
.np-mark i:nth-child(1){ height:9px;  animation-delay:0s; }
.np-mark i:nth-child(2){ height:20px; animation-delay:.2s; }
.np-mark i:nth-child(3){ height:14px; animation-delay:.4s; }
@keyframes eq{ 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.45)} }

.np-links{ display:flex; gap:6px; margin-right:auto; }
.np-links a{
  position:relative; padding:9px 15px; border-radius:99px; font-size:14.5px; font-weight:500;
  color:var(--txt-2); text-decoration:none; white-space:nowrap;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.np-links a:hover{ color:var(--txt); background:var(--glass); }
.np-links a.on{ color:var(--txt); background:var(--glass-2); box-shadow:inset 0 0 0 1px var(--edge); }

.np-auth{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.np-hi{ font-size:13.5px; color:var(--txt-2); display:inline-flex; align-items:center; gap:7px; }
.np-hi::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }
.np-auth .btn{ padding:9px 18px; font-size:14px; }

.np-theme-toggle{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--glass); border:1px solid var(--edge); color:var(--txt-2); flex-shrink:0;
  transition:transform var(--mid) var(--spring), color var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.np-theme-toggle:hover{ transform:rotate(-25deg) scale(1.1); color:var(--txt); box-shadow:var(--glow-c); }
.np-theme-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.np-theme-toggle .np-sun{ display:none; }
:root[data-theme="light"] .np-theme-toggle .np-sun{ display:block; }
:root[data-theme="light"] .np-theme-toggle .np-moon{ display:none; }

.np-burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--edge);
  background:var(--glass); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.np-burger span{ width:16px; height:2px; border-radius:2px; background:var(--txt); display:block;
  transition:transform var(--mid) var(--spring), opacity var(--fast) linear; }
.np-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.np-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.np-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.np-drawer{
  position:fixed; inset:74px 0 auto 0; z-index:99; padding:20px 24px 28px;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--edge); animation:drawerIn var(--mid) var(--ease);
}
@keyframes drawerIn{ from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none} }
.np-drawer nav{ display:grid; gap:4px; }
.np-drawer nav a{ padding:14px 16px; border-radius:14px; font-size:17px; font-weight:600; color:var(--txt); text-decoration:none; }
.np-drawer nav a:hover{ background:var(--glass); }
.np-drawer-auth{ display:flex; gap:10px; margin-top:18px; }
.np-drawer-auth .btn{ flex:1; }
.np-drawer-auth .np-hi{ display:none; }

@media (max-width:940px){
  .np-links,.np-auth{ display:none; }
  .np-burger{ display:flex; }
  .np-nav-in{ justify-content:space-between; gap:14px; }
}

/* ── Footer ─────────────────────────────────────────────────────── */
.np-foot{ margin-top:110px; border-top:1px solid var(--edge); position:relative; }
.np-foot-in{ max-width:var(--page); margin:0 auto; padding:64px 24px 44px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:44px; }
.np-foot-brand p{ color:var(--txt-3); font-size:14.5px; max-width:32ch; margin:16px 0 0; }
.np-foot-col h3{ font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-3); margin:0 0 16px; }
.np-foot-col a{ display:block; padding:7px 0; font-size:15px; color:var(--txt-2); text-decoration:none;
  transition:color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.np-foot-col a:hover{ color:var(--txt); transform:translateX(5px); }
.np-foot-sub p{ color:var(--txt-3); font-size:14.5px; margin:0 0 14px; }
.np-sub{ display:flex; gap:9px; }
.np-sub input{ flex:1; min-width:0; }
.np-foot-base{ max-width:var(--page); margin:0 auto; padding:22px 24px 34px; border-top:1px solid var(--edge);
  display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--txt-3); font-size:13.5px; }
.np-top{ background:var(--glass); border:1px solid var(--edge); color:var(--txt-2); cursor:pointer;
  padding:9px 18px; border-radius:99px; font-size:13.5px; font-weight:600; }
.np-top:hover{ color:var(--txt); box-shadow:var(--glow-c); }
@media (max-width:880px){ .np-foot-in{ grid-template-columns:1fr 1fr; } .np-foot-brand,.np-foot-sub{ grid-column:1/-1; } }
@media (max-width:540px){ .np-foot-in{ grid-template-columns:1fr; } .np-sub{ flex-direction:column; } }

/* ── Forms ──────────────────────────────────────────────────────── */
input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{
  width:100%; padding:13px 17px; background:var(--glass); color:var(--txt);
  border:1px solid var(--edge); border-radius:14px; font-size:15px; font-family:var(--body);
  backdrop-filter:blur(10px);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
input:focus,textarea:focus,select:focus{ outline:none; border-color:transparent; box-shadow:var(--glow-a); background:var(--glass-2); }
::placeholder{ color:var(--txt-3); }
label{ display:block; font-size:13px; font-weight:600; color:var(--txt-2); margin-bottom:7px; }

/* ── Motion primitives ──────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px) scale(.985); }
.reveal.in{ opacity:1; transform:none;
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--spring); }
@keyframes floatIn{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none} }
.float-in{ animation:floatIn .7s var(--spring) both; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .aurora i{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  .glass:hover,.btn:hover{ transform:none; }
}


/* ── Icons ──────────────────────────────────────────────────────────
   One inline SVG sprite injected once per page. currentColor means an
   icon always matches the text it sits beside, in either theme. */
.i{ width:1em; height:1em; display:inline-block; vertical-align:-.125em;
    fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.i-lg{ width:1.25em; height:1.25em; }
#np-sprite{ display:none; }

/* ── Filter bar ─────────────────────────────────────────────────── */
.filters{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:16px 18px; margin:0 0 30px; border-radius:99px;
}
.filters form{ display:flex; align-items:center; gap:10px; flex:1; min-width:220px; }
.filters .search{ position:relative; flex:1; display:flex; align-items:center; }
.filters .search .i{ position:absolute; left:16px; color:var(--txt-3); pointer-events:none; }
.filters .search input{ padding-left:44px; border-radius:99px; }
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:99px;
  font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap;
  color:var(--txt-2); background:var(--glass); border:1px solid var(--edge);
  transition:color var(--fast) var(--ease), box-shadow var(--mid) var(--ease), transform var(--fast) var(--ease);
}
.chip:hover{ color:var(--txt); transform:translateY(-2px); }
.chip.on{ color:var(--on-cta); background:var(--grad-cta); border-color:transparent; box-shadow:var(--glow-a); }
@media (max-width:700px){ .filters{ border-radius:var(--r-2); } }

/* ── Section separation ─────────────────────────────────────────────
   Each band gets its own ground so polls, discussion and related do not
   read as one undifferentiated column. */
.band{ position:relative; padding:56px 0; margin:0; }
.band + .band{ margin-top:0; }

/* A soft tinted plate behind the whole band, bleeding past the wrapper. */
.band-tint::before{
  content:""; position:absolute; inset:0 -50vw; z-index:-1;
  background:linear-gradient(180deg, transparent, var(--glass) 18%, var(--glass) 82%, transparent);
}
/* A hairline that fades out at both ends. */
.band-rule::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--edge-2) 22%, var(--edge-2) 78%, transparent);
}
/* A wide colour wash, tinted per section. */
.band-glow::after{
  content:""; position:absolute; left:50%; top:0; width:min(760px,90vw); height:220px;
  transform:translateX(-50%); z-index:-1; pointer-events:none; opacity:.35;
  background:radial-gradient(ellipse at center, var(--c1), transparent 70%); filter:blur(50px);
}
.band-glow.warm::after{ background:radial-gradient(ellipse at center, var(--c4), transparent 70%); }
.band-glow.cool::after{ background:radial-gradient(ellipse at center, var(--c3), transparent 70%); }

/* Section heading with a leading icon. */
.band-head{ display:flex; align-items:center; gap:13px; margin:0 0 26px; }
.band-head .ico{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad-cta); color:var(--on-cta); font-size:17px; box-shadow:var(--glow-a); flex-shrink:0;
}
.band-head h2{ font-size:clamp(18px,2.1vw,24px); margin:0; }
.band-head .count{ margin-left:auto; font-size:13px; color:var(--txt-3); font-variant-numeric:tabular-nums; }

/* ── Retire the legacy chrome ───────────────────────────────────────
   Every legacy page still carries its original navbar, footer, theme
   toggle and auth links in the markup. np_nav()/np_footer() render the
   real ones; these are the leftovers.

   Dropping this rule during the rewrite is what put a bare bulleted
   navigation and a stray "Toggle Theme" button at the top of every
   legacy page. Removing the markup from twenty templates would risk
   far more than hiding it costs.

   Note the np- prefixed classes are separate tokens and are NOT matched
   here: .theme-toggle does not match .np-theme-toggle. */
.navbar, .nav-links, .nav-link,
.header-stack, header.header, header.topnav,
.site-footer, footer.footer, .site-foot,
.footer-wrap, .footer-inner, .footer-bottom, .footer-brand,
.footer-links, .footer-social, .footer-legal,
.theme-toggle, .hamburger, .auth-status, .welcome-user,
.btn-login, .btn-account, .btn-logout,
.promo-bar, .promo-marquee,
body > .logo {
  display: none !important;
}