/* =============================================================
   NowPlaying 2.0 — component styles (Blade port of the prototype)
   Depends on tokens.css (variables, type scale, keyframes).
   Class names align with responsive.css breakpoints.
   ============================================================= */

body { display: flex; flex-direction: column; min-height: 100vh; }
.np-app { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100%; }
main { flex: 1 1 auto; }

/* ---------------- Layout helpers ---------------- */
.np-section { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.np-section--bleed { max-width: none; }
/* Centered content wrapper (pages may override max-width inline). */
.np-container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; width: 100%; }

/* Numbered pager (‹ 1 2 … ›) */
.np-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.np-pager__btn { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-surface-raised); color: var(--color-text-secondary); font-size: 14px; font-weight: 600; transition: background 120ms var(--ease-default), color 120ms var(--ease-default), border-color 120ms var(--ease-default); }
.np-pager__btn:hover { color: var(--color-text-primary); border-color: var(--color-border-strong, var(--color-text-tertiary)); }
.np-pager__btn--active { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-brand); }
.np-pager__btn--disabled { opacity: 0.4; cursor: not-allowed; }
.np-pager__gap { color: var(--color-text-tertiary); padding: 0 2px; }

/* ---------------- Logo ---------------- */
.np-logo { display: inline-flex; align-items: center; gap: 9px; line-height: 1; background: none; border: none; padding: 0; cursor: pointer; }
.np-logo__mark { width: 30px; height: 30px; border-radius: calc(var(--radius-md) + 1px); background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.np-logo__mark svg { fill: #fff; margin-left: 1px; }
.np-logo__word { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; color: var(--color-text-primary); }
.np-logo__word b { color: var(--color-brand-primary); font-weight: 700; }
/* Custom uploaded logo: swap the dark/light variants with the active theme.
   Default (dark): show the dark variant, hide the light one. In light theme,
   flip them. */
[data-logo-dark] { display: block; }
[data-logo-light] { display: none; }
[data-theme="light"] [data-logo-dark] { display: none; }
[data-theme="light"] [data-logo-light] { display: block; }

/* ---------------- Buttons ---------------- */
.np-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; line-height: 1; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: transform var(--duration-fast) var(--ease-default), background var(--duration-normal) var(--ease-default), filter var(--duration-fast); text-decoration: none; }
.np-btn:hover { filter: brightness(1.1); }
.np-btn:active { transform: scale(0.98); filter: brightness(0.92); }
.np-btn--sm { height: 32px; padding: 0 12px; font-size: 14px; min-width: 64px; }
.np-btn--md { height: 40px; padding: 0 16px; font-size: 15px; min-width: 80px; }
.np-btn--lg { height: 48px; padding: 0 20px; font-size: 17px; min-width: 96px; }
.np-btn--primary { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.np-btn--secondary { background: var(--color-surface-raised); color: var(--color-text-primary); border-color: var(--color-border-default); }
.np-btn--ghost { background: transparent; color: var(--color-text-primary); }
.np-btn--destructive { background: var(--color-error-500); color: #fff; }
.np-btn--on-brand { background: #fff; color: var(--color-brand-strong); }
.np-btn--link { background: transparent; color: var(--color-brand-primary); border: none; padding: 0; height: auto; min-width: 0; }
.np-btn--link:hover { text-decoration: underline; filter: none; }
.np-btn svg { flex-shrink: 0; }

/* ---------------- Badge ---------------- */
.np-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; font-family: var(--font-body); white-space: nowrap; background: var(--color-surface-overlay); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); }
.np-badge svg { stroke-width: 2.4; }

/* ---------------- Card ---------------- */
.np-card { background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); padding: 24px; transition: box-shadow var(--duration-normal), transform var(--duration-normal), border-color var(--duration-normal); }
.np-card--danger { border-color: color-mix(in srgb, var(--color-error-500) 40%, transparent); }
.np-card__title { font-size: 18px; font-weight: 600; margin-bottom: 20px; }

/* ---------------- Badge variants ---------------- */
.np-badge--success { background: var(--color-success-50); color: var(--color-success-500); border-color: transparent; }
.np-badge--warning { background: var(--color-warning-50); color: var(--color-warning-500); border-color: transparent; }
.np-badge--error { background: var(--color-error-50); color: var(--color-error-500); border-color: transparent; }
.np-badge--info { background: var(--color-info-50); color: var(--color-info-500); border-color: transparent; }
.np-badge--partner { background: color-mix(in srgb, var(--color-platform-twitch) 15%, transparent); color: var(--color-platform-twitch); border-color: var(--color-platform-twitch); }

/* Collaboration-partner tier tag */
.np-tier-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--tier, #B9C2CC); border: 1px solid color-mix(in srgb, var(--tier, #B9C2CC) 55%, transparent); background: color-mix(in srgb, var(--tier, #B9C2CC) 14%, transparent); }
.np-tier-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tier, #B9C2CC); box-shadow: 0 0 6px var(--tier, #B9C2CC); }

/* Collaboration-partner logo strip (home) */
.np-logos { width: 100%; overflow: hidden; }
.np-logos__track { display: flex; gap: 16px; justify-content: center; }
.np-logos__group { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; min-width: 0; }
/* Scrolling marquee when there are more than 5 logos */
.np-logos--scroll .np-logos__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: np-logos-scroll 90s linear infinite; animation-play-state: running; will-change: transform; backface-visibility: hidden; }
.np-logos--scroll .np-logos__group { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; }
.np-logos--scroll:hover .np-logos__track { animation-play-state: paused; }
@keyframes np-logos-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 8px), 0, 0); } }
@media (prefers-reduced-motion: reduce) {
    /* Keep the requested marquee slow; tokens.css otherwise forces it to 0.01ms. */
    .np-logos--scroll .np-logos__track { animation-duration: 90s !important; }
}

.np-logo { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 12px 18px 12px 12px; border-radius: var(--radius-lg); border: 1px solid var(--color-border-default); background: var(--color-surface-raised); text-decoration: none; color: inherit; transition: border-color var(--duration-normal), transform var(--duration-normal); }
a.np-logo:hover { border-color: var(--color-brand-primary); transform: translateY(-2px); }
/* When a custom image logo is set, drop the framed "pill" box and just show
   the (larger) logo. */
a.np-logo:has(.np-logo__inner--image) { padding: 0; border: none; background: none; }
a.np-logo:has(.np-logo__inner--image):hover { transform: translateY(-2px); border: none; }
.np-logo__img { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; background: var(--color-surface-overlay) center/cover no-repeat; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); }
.np-logo__meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; white-space: nowrap; }
.np-logo__name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }

/* Partners page polish */
.np-partners-section { margin-bottom: 8px; }
.np-partners-divider { height: 1px; background: var(--color-border-default); margin: 36px 0 32px; }
.np-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-error-500); box-shadow: 0 0 8px var(--color-error-500); margin-right: 6px; vertical-align: middle; animation: np-pulse-glow 1.6s infinite; }

/* Collaboration-partner grid + cards */
.np-collab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.np-collab-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-lg); border: 1px solid var(--color-border-default); background: var(--color-surface-raised); text-decoration: none; color: inherit; transition: border-color var(--duration-normal), transform var(--duration-normal); }
a.np-collab-card:hover { border-color: var(--color-brand-primary); transform: translateY(-2px); }
.np-collab-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.np-collab-card__img { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; background: var(--color-surface-overlay) center/cover no-repeat; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); }
.np-collab-card__name { font-size: 17px; font-weight: 700; color: var(--color-text-primary); }
.np-collab-card__body { font-size: 14px; color: var(--color-text-secondary); line-height: 1.55; }
/* Compact card: short teaser (3 lines max) + a Read-more affordance */
.np-collab-card__excerpt { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.np-collab-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--color-brand-primary); }
a.np-collab-card:hover .np-collab-card__more { gap: 8px; }

/* Partner detail page */
.np-partner-detail { max-width: 820px; }
.np-partner-hero { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; flex-wrap: wrap; }
.np-partner-hero__img { width: 96px; height: 96px; border-radius: 18px; flex-shrink: 0; background: var(--color-surface-overlay) center/cover no-repeat; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); border: 1px solid var(--color-border-default); }
.np-partner-hero__text { flex: 1; min-width: 220px; }
.np-partner-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border-default); background: var(--color-surface-raised); transition: border-color var(--duration-fast), transform var(--duration-fast); }
.np-partner-social:hover { border-color: var(--color-brand-primary); transform: translateY(-1px); }
.np-partner-detail__body { padding: 24px 28px; font-size: 15px; line-height: 1.7; }

/* Minimal markdown rendering */
.np-md > :first-child { margin-top: 0; } .np-md > :last-child { margin-bottom: 0; }
.np-md p { margin: 0 0 8px; } .np-md a { color: var(--color-brand-primary); }
.np-md ul, .np-md ol { margin: 0 0 8px; padding-left: 20px; } .np-md li { margin: 2px 0; }
.np-md strong { color: var(--color-text-primary); } .np-md code { font-family: var(--font-mono); font-size: .9em; background: var(--color-surface-overlay); padding: 1px 5px; border-radius: 4px; }
.np-md h1, .np-md h2, .np-md h3 { font-size: 15px; margin: 10px 0 6px; color: var(--color-text-primary); }

/* ---------------- Avatar ---------------- */
.np-avatar { position: relative; display: inline-flex; flex-shrink: 0; }
.np-avatar__img { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-brand-primary); color: #fff; font-weight: 700; font-family: var(--font-display); overflow: hidden; background-size: cover; background-position: center; }

/* ---------------- Account (Shell B) ---------------- */
.np-acct-layout { max-width: var(--content-max); margin: 0 auto; padding: 40px 24px 80px; display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 40px; align-items: start; }
.np-acct-aside { position: sticky; top: 88px; }
.np-acct-main { min-width: 0; max-width: 820px; }
.np-acct-side button, .np-acct-side a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--radius-md); border: none; cursor: pointer; font-size: 14px; font-weight: 500; font-family: inherit; text-align: left; background: transparent; color: var(--color-text-secondary); white-space: nowrap; text-decoration: none; transition: color var(--duration-fast) var(--ease-default); }
.np-acct-side a:hover { background: var(--color-surface-raised); }
.np-acct-side a[data-active="true"] { font-weight: 600; background: var(--color-brand-tint); color: var(--color-brand-primary); }
.np-acct-side a.np-acct-side--danger { color: var(--color-error-500); }
.np-ministat { flex: 1; min-width: 120px; padding: 16px; background: var(--color-surface-sunken); border-radius: var(--radius-lg); }
.np-ministat__value { font-size: 32px; font-weight: 700; font-family: var(--font-display); color: var(--color-brand-primary); }
.np-ministat__label { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.np-signin-method { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-surface-sunken); }
.np-input { width: 100%; height: 40px; padding: 0 12px; background: var(--color-surface-sunken); color: var(--color-text-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-body); outline: none; transition: border-color var(--duration-normal); }
.np-input:focus { border-color: var(--color-brand-primary); border-width: 2px; }
textarea.np-input { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.6; }

/* Markdown bio editor: toolbar + textarea/preview + counter, framed as one control. */
.np-bio-editor { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-sunken); overflow: hidden; transition: border-color var(--duration-normal); }
.np-bio-editor:focus-within { border-color: var(--color-brand-primary); }
.np-bio-editor__bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--color-border-default); background: var(--color-surface-raised); flex-wrap: wrap; }
.np-bio-editor__btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 13px; cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.np-bio-editor__btn:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
.np-bio-editor__btn[aria-pressed="true"] { background: var(--color-brand-tint); color: var(--color-brand-primary); }
.np-bio-editor__sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--color-border-default); }
.np-bio-editor__spacer { flex: 1; }
.np-bio-editor textarea { display: block; width: 100%; box-sizing: border-box; min-height: 120px; max-height: 420px; padding: 12px 14px; border: 0; background: transparent; color: var(--color-text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.6; resize: vertical; outline: none; }
.np-bio-editor__preview { min-height: 120px; padding: 12px 14px; font-size: 15px; line-height: 1.6; color: var(--color-text-primary); }
.np-bio-editor__preview:empty::before { content: attr(data-empty); color: var(--color-text-tertiary); }
.np-bio-editor__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--color-border-default); background: var(--color-surface-raised); font-size: 12px; color: var(--color-text-tertiary); }
.np-bio-editor__count.is-limit { color: var(--color-error-500); }
/* Radio-segment active styling (widget type picker) */
label:has(input:checked) > .np-btn--secondary { border-color: var(--color-brand-primary); background: var(--color-brand-tint); color: var(--color-brand-primary); }

/* ---------------- Navigation ---------------- */
.np-nav { position: sticky; top: 0; z-index: 500; height: var(--nav-height); background: var(--color-surface-base); border-bottom: 1px solid transparent; transition: all var(--duration-normal) var(--ease-default); }
.np-nav[data-scrolled] { background: color-mix(in srgb, var(--color-surface-raised) 85%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--color-border-default); box-shadow: var(--shadow-sm); }
.np-nav-inner { max-width: var(--content-max); margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.np-nav-links { display: flex; gap: 4px; flex: 1; }
.np-nav-link { padding: 8px 14px; border-radius: var(--radius-full); border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; background: transparent; color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease-default); }
.np-nav-link:hover { color: var(--color-text-primary); }
.np-nav-link[aria-current="page"] { font-weight: 600; background: var(--color-brand-tint); color: var(--color-brand-primary); }
/* Navbar dropdown (e.g. Style → Style Builder / Style gallery) */
.np-navdrop { position: relative; }
.np-navdrop__trigger { display: inline-flex; align-items: center; gap: 5px; }
.np-navdrop__menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 180px; background: var(--color-surface-overlay); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 100; display: none; }
.np-navdrop__menu[data-open="true"] { display: block; }
.np-navdrop__item { display: block; padding: 9px 12px; border-radius: var(--radius-md); color: var(--color-text-primary); text-decoration: none; font-size: 14px; font-weight: 500; }
.np-navdrop__item:hover { background: var(--color-surface-raised); }
.np-nav-trailing { display: flex; align-items: center; gap: 8px; }
.np-hamburger { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: transparent; cursor: pointer; color: var(--color-text-primary); align-items: center; justify-content: center; }

/* Icon button (theme toggle / lang trigger) */
.np-iconbtn { width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--duration-fast); }
.np-iconbtn:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }

/* Language selector */
.np-lang { position: relative; }
.np-lang__trigger { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 14px; font-family: inherit; }
.np-lang__current { display: inline-flex; align-items: center; gap: 6px; }
.np-lang__flag { display: block; width: 20px; height: 14px; flex: 0 0 20px; border: 1px solid color-mix(in srgb, var(--color-text-primary) 18%, transparent); border-radius: 2px; overflow: hidden; }
.np-lang__menu { position: absolute; right: 0; top: 48px; min-width: 190px; background: var(--color-surface-overlay); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 100; display: none; }
.np-lang__menu[data-open="true"] { display: block; }
.np-lang__option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--color-text-primary); cursor: pointer; font-size: 14px; font-family: inherit; text-align: left; }
.np-lang__option:hover { background: var(--color-surface-raised); }

/* ---------------- Account dropdown ---------------- */
.np-acctmenu { position: relative; }
.np-acctmenu__trigger { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 4px; border-radius: var(--radius-full); border: 1px solid var(--color-border-default); background: transparent; cursor: pointer; color: var(--color-text-primary); font-family: inherit; }
.np-acctmenu__menu { position: absolute; right: 0; top: 48px; width: 258px; background: var(--color-surface-overlay); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; z-index: 100; display: none; }
.np-acctmenu__menu[data-open="true"] { display: block; }
.np-acctmenu__head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; }
.np-acctmenu__div { height: 1px; background: var(--color-border-default); margin: 4px 0; }
.np-acctmenu__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-tertiary); padding: 6px 10px 2px; }
/* The menu grew with grouped sections; cap the height and scroll the middle so
   the header, danger action and sign-out stay reachable on short screens. */
.np-acctmenu__scroll { max-height: min(60vh, 420px); overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.np-acctmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-md); background: transparent; color: var(--color-text-primary); cursor: pointer; font-size: 14px; font-family: inherit; text-align: left; text-decoration: none; }
.np-acctmenu__item:hover { background: var(--color-surface-raised); }
.np-acctmenu__item--danger { color: var(--color-error-500); }

/* ---------------- Mobile drawer ---------------- */
.np-drawer { position: fixed; inset: 0; height: 100dvh; z-index: 600; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity var(--duration-normal) var(--ease-default); overscroll-behavior: contain; }
.np-drawer[data-open="true"] { opacity: 1; }
.np-drawer__panel { position: absolute; right: 0; top: 0; bottom: 0; height: 100dvh; width: min(300px, 86vw); background: var(--color-surface-raised); padding: 20px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-xl); transform: translateX(100%); transition: transform var(--duration-moderate) var(--ease-out); }
.np-drawer[data-open="true"] .np-drawer__panel { transform: translateX(0); }
.np-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.np-drawer__link { text-align: left; padding: 12px 8px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--color-text-primary); font-size: 17px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; }
.np-drawer__link[aria-current="page"] { background: var(--color-brand-tint); color: var(--color-brand-primary); }
.np-drawer__row { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 10px; }
.np-drawer__divider { height: 1px; background: var(--color-border-default); margin: 10px 0; }

/* ---------------- Footer ---------------- */
.np-footer { background: var(--color-surface-raised); border-top: 1px solid var(--color-border-default); margin-top: auto; }
.np-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: 56px 24px 40px; display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.np-footer__brand { display: flex; flex-direction: column; gap: 12px; max-width: 300px; }
/* Social links: brand-coloured icons, left-aligned under the blurb. Plain links
   show icon + label; "icon only" links render as a tidy round icon button. */
/* Monochrome glyphs: recolour every part (incl. inner <path fill>) to the
   inherited text colour — CSS beats the SVG presentation fills. */
svg[data-mono], svg[data-mono] * { fill: currentColor !important; }
.np-footer__socials { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 4px; }
.np-footer__social { display: inline-flex; align-items: center; gap: 8px; color: var(--color-brand-primary); text-decoration: none; font-size: 13px; font-weight: 500; transition: opacity var(--duration-normal); }
.np-footer__social:hover { opacity: 0.75; }
.np-footer__social svg { flex-shrink: 0; }
.np-footer__social--icon { justify-content: center; width: 36px; height: 36px; gap: 0; border-radius: 50%; border: 1px solid var(--color-border-default); background: var(--color-surface-raised); }
.np-footer__social--icon:hover { opacity: 1; border-color: var(--color-brand-primary); }
.np-footer__cols { display: flex; flex-wrap: wrap; gap: 48px; }
.np-footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 120px; }
.np-footer__col-title { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 2px; }
.np-footer__col a { font-size: 14px; color: var(--color-text-secondary); transition: color 120ms var(--ease-default); }
.np-footer__col a:hover { color: var(--color-text-primary); }
.np-footer__bar { max-width: var(--content-max); margin: 0 auto; padding: 20px 24px; border-top: 1px solid var(--color-border-default); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--color-text-tertiary); }
.np-footer__bar-links { display: flex; gap: 18px; }
.np-footer__bar-links a { color: inherit; }
.np-footer__bar-links a:hover { color: var(--color-text-primary); }
.np-footer__cookie-settings { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.np-footer__cookie-settings:hover { color: var(--color-text-primary); }

/* ---------------- Cookie consent ---------------- */
.np-cookie-consent { position: fixed; z-index: 2500; right: 24px; bottom: 24px; left: 24px; width: min(760px, calc(100% - 48px)); margin-left: auto; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-overlay); box-shadow: var(--shadow-xl); }
.np-cookie-consent[hidden] { display: none; }
.np-cookie-consent__body { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.np-cookie-consent__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--radius-md); background: var(--color-brand-tint); color: var(--color-brand-primary); }
.np-cookie-consent h2 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; }
.np-cookie-consent p { margin: 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; }
.np-cookie-consent p a { color: var(--color-brand-primary); font-weight: 600; }
.np-cookie-consent__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ---------------- Hero ---------------- */
.np-hero-wrap { position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border-default); }
.np-hero-bg { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% -10%, var(--color-brand-glow), transparent 70%); pointer-events: none; }
.np-hero { position: relative; padding-top: 96px; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: 48px; align-items: center; }
.np-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.np-hero-copy h1 { max-width: 600px; }
.np-hero-copy h1 span { color: var(--color-brand-primary); }
.np-hero-lead { font-size: 20px; color: var(--color-text-secondary); max-width: 480px; line-height: 1.5; }
.np-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.np-hero-trust { font-size: 13px; color: var(--color-text-tertiary); }
.np-hero-art { display: flex; justify-content: center; }

/* OBS widget preview chrome */
.np-preview { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.np-preview__frame { background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.np-preview__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--color-border-default); background: var(--color-surface-sunken); }
.np-preview__dot { width: 10px; height: 10px; border-radius: 99px; }
.np-preview__label { margin-left: 8px; font-size: 11px; color: var(--color-text-tertiary); font-family: var(--font-mono); }
.np-preview__stage { padding: 20px; background: repeating-conic-gradient(#1a1a1a 0% 25%, #161616 0% 50%) 50% / 24px 24px; }
.np-preview__live { display: flex; justify-content: center; gap: 6px; align-items: center; font-size: 12px; color: var(--color-text-tertiary); }
.np-preview__live span:first-child { width: 7px; height: 7px; border-radius: 99px; background: var(--color-success-500); animation: np-pulse-glow 2s infinite; }

/* The widget itself (font-size on the root drives the text-scale control) */
.np-widget { display: flex; flex-direction: column; gap: 8px; padding: 12px; width: 100%; box-sizing: border-box; font-size: 16px; border-radius: 10px; transition: background var(--duration-normal); }
.np-widget__anim { display: flex; flex-direction: column; gap: 8px; }
.np-widget__main { display: flex; align-items: center; gap: 12px; }
.np-widget__art { width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; animation: np-art-pulse 2000ms var(--ease-default) infinite; --np-accent: var(--color-brand-primary); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: width var(--duration-normal), height var(--duration-normal), border-radius var(--duration-normal); }
.np-widget__art svg { color: rgba(255,255,255,0.85); }
.np-widget__meta { flex: 1; min-width: 0; overflow: hidden; }
.np-widget__title { color: #fff; font-weight: 700; font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.np-widget__artist { color: #9CA3AF; font-size: 0.875em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.np-widget__album { color: #9CA3AF; font-size: 0.75em; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.np-widget__track-meta { color: #FF0000; flex-shrink: 0; display: inline-flex; }
.np-widget__progress { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.18); overflow: hidden; }
.np-widget__bar { height: 100%; background: var(--color-brand-primary); border-radius: 99px; transition: width 1s linear; }
/* Light colour scheme variant (Style Builder control) */
.np-widget--light .np-widget__title { color: #111827; text-shadow: none; }
.np-widget--light .np-widget__artist, .np-widget--light .np-widget__album { color: #6B7280; text-shadow: none; }
.np-widget--light .np-widget__progress { background: rgba(0,0,0,0.12); }
/* RGB preview (mirrors widget.css .npw--rgb) */
@keyframes np-rgb-bar { to { filter: hue-rotate(360deg); } }
@keyframes np-rgb-glow {
  0% { box-shadow: 0 0 10px 1px hsl(0 100% 55%); } 25% { box-shadow: 0 0 10px 1px hsl(90 100% 55%); }
  50% { box-shadow: 0 0 10px 1px hsl(180 100% 55%); } 75% { box-shadow: 0 0 10px 1px hsl(270 100% 55%); }
  100% { box-shadow: 0 0 10px 1px hsl(360 100% 55%); }
}
.np-widget--rgb .np-widget__bar { background: #ff0000 !important; animation: np-rgb-bar 6s linear infinite; }
.np-widget--rgb .np-widget__art { animation: np-rgb-glow 6s linear infinite; }
.np-widget--rgb { border-image: linear-gradient(90deg,#ff0000,#ffea00,#00ff66,#00e5ff,#7c4dff,#ff00d4,#ff0000) 1; }

/* ---------------- Platform bar ---------------- */
.np-platbar-label { text-align: center; font-size: 13px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; }
.np-logobar { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; align-items: center; margin-bottom: 36px; }
.np-graylogo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-text-primary); opacity: 0.85; cursor: pointer; transition: opacity var(--duration-normal); font-size: 16px; }
.np-graylogo:hover { opacity: 1; }
.np-lastfm-note { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--color-border-default); padding-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.np-lastfm-note p { text-align: center; font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }
.np-lastfm-note b { color: var(--color-platform-lastfm); font-weight: 700; }
.np-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.np-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border-default); background: var(--color-surface-raised); transition: background var(--duration-fast); }
.np-chip:hover { background: var(--color-surface-overlay); }
.np-chip span { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }

/* ---------------- How it works ---------------- */
.np-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.np-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.np-step__icon { width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--color-brand-tint); color: var(--color-brand-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.np-step__num { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-tertiary); }
.np-step h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.np-step p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.5; }

/* ---------------- Feature rows ---------------- */
.np-feat-row { display: flex; gap: 40px; }
.np-feat-row--flip { flex-direction: row-reverse; }
.np-feat-text { flex: 1; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.np-feat-text h3 { }
.np-feat-text p { font-size: 17px; color: var(--color-text-secondary); line-height: 1.6; max-width: 420px; }
.np-feat-visual { flex: 1; min-height: 220px; border-radius: var(--radius-2xl); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px; }
.np-feat-visual--checker { background: repeating-conic-gradient(#1a1a1a 0% 25%, #161616 0% 50%) 50% / 20px 20px; }
.np-feat-visual__inner { width: 100%; max-width: 320px; }
.np-feat-visual--checker .np-feat-visual__inner { background: repeating-conic-gradient(#1a1a1a 0% 25%, #161616 0% 50%) 50% / 20px 20px; padding: 16px; border-radius: var(--radius-lg); }
.np-feat-icon { color: var(--color-brand-primary); opacity: 0.4; }

/* ---------------- Partners ---------------- */
.np-partners-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.np-partner { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-raised); border: 1px solid var(--color-border-default); transition: box-shadow var(--duration-normal); cursor: pointer; text-decoration: none; }
.np-partner:hover { box-shadow: var(--shadow-lg); }
.np-partner__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.np-partner__art-img { position: absolute; inset: 0; transition: transform var(--duration-moderate); }
.np-partner:hover .np-partner__art-img { transform: scale(1.04); }
.np-partner__live { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--color-error-500); color: #fff; font-size: 11px; font-weight: 700; }
.np-partner__live span { width: 6px; height: 6px; border-radius: 99px; background: #fff; animation: np-pulse-glow 1.6s infinite; }
.np-partner__live--off { background: rgba(15,15,15,0.7); color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); }
.np-partner__stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.np-partner__stat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); }
.np-partner__plat { position: absolute; top: 10px; right: 10px; }
.np-partner__body { padding: 16px; }
.np-partner__body h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-partner__stream-title { font-size: 13px; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.np-partner__game { font-size: 13px; color: var(--color-text-secondary); }
.np-partner__viewers { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); margin-top: 8px; }
.np-badge--platform { color: #fff; border: 1px solid; }

/* ---------------- CTA banner ---------------- */
.np-cta-wrap { padding: 0 24px 80px; }
.np-cta { max-width: var(--content-max); margin: 0 auto; border-radius: var(--radius-2xl); padding: 64px 32px; text-align: center; background: linear-gradient(135deg, var(--color-brand-strong), var(--color-brand-primary) 60%, var(--color-brand-secondary)); position: relative; overflow: hidden; }
.np-cta h2 { color: #fff; margin-bottom: 24px; max-width: 560px; margin-inline: auto; }

/* ---------------- Reveal ---------------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
[data-reveal][data-revealed="true"] { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 100ms; }
[data-reveal][data-delay="2"] { transition-delay: 200ms; }

/* Section vertical rhythm helpers */
.np-pt-96 { padding-top: 96px; } .np-pt-80 { padding-top: 80px; } .np-pt-64 { padding-top: 64px; }
.np-pb-80 { padding-bottom: 80px; } .np-pb-64 { padding-bottom: 64px; } .np-pb-56 { padding-bottom: 56px; } .np-pb-40 { padding-bottom: 40px; }
.np-center { text-align: center; }
.np-mb-48 { margin-bottom: 48px; } .np-mb-56 { margin-bottom: 56px; }
.np-feat-list { display: flex; flex-direction: column; gap: 56px; }

.skip-link { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%); background: var(--color-brand-primary); color: #fff; padding: 8px 16px; border-radius: var(--radius-md); z-index: 2000; transition: transform var(--duration-normal) var(--ease-out); }
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------------- Page header (internal pages) ---------------- */
.np-page-header { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.np-page-header__text { display: flex; flex-direction: column; gap: 8px; }
.np-page-header__sub { font-size: 18px; color: var(--color-text-secondary); }

/* ---------------- Filter bar (partners) ---------------- */
.np-filterbar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 28px; }
.np-segment { display: flex; gap: 6px; background: var(--color-surface-raised); padding: 4px; border-radius: var(--radius-full); border: 1px solid var(--color-border-default); }
.np-segment a { padding: 6px 14px; border-radius: var(--radius-full); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); transition: color var(--duration-fast); }
.np-segment a[aria-current="true"] { background: var(--color-brand-primary); color: #fff; }
.np-segment a:not([aria-current="true"]):hover { color: var(--color-text-primary); }
.np-toggle-link { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--color-text-primary); }
.np-toggle-link__track { width: 40px; height: 24px; border-radius: var(--radius-full); padding: 2px; background: var(--color-border-strong); transition: background var(--duration-normal) var(--ease-default); flex-shrink: 0; }
.np-toggle-link[aria-pressed="true"] .np-toggle-link__track { background: var(--color-brand-primary); }
.np-toggle-link__thumb { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; transform: translateX(0); transition: transform var(--duration-normal) var(--ease-default); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.np-toggle-link[aria-pressed="true"] .np-toggle-link__thumb { transform: translateX(16px); }

/* Form switch: a real <input type="checkbox"> styled as a toggle so it still
   submits with the form. Label wraps the input; the track is drawn on ::before. */
.np-switch { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--color-text-primary); }
.np-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.np-switch__control { position: relative; flex-shrink: 0; width: 40px; height: 24px; border-radius: var(--radius-full); background: var(--color-border-strong); transition: background var(--duration-normal) var(--ease-default); margin-top: 1px; }
.np-switch__control::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform var(--duration-normal) var(--ease-default); }
.np-switch input:checked + .np-switch__control { background: var(--color-brand-primary); }
.np-switch input:checked + .np-switch__control::after { transform: translateX(16px); }
.np-switch input:focus-visible + .np-switch__control { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.np-switch input:disabled + .np-switch__control { opacity: .5; }
.np-switch--disabled { cursor: not-allowed; opacity: .6; }

/* Range slider (used for e.g. history-limit). Themed to the brand accent with a
   consistent track/thumb across browsers, replacing the raw default control. */
.np-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--radius-full); background: var(--color-border-strong); outline: none; cursor: pointer; }
.np-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-brand-primary); border: 2px solid var(--color-surface-raised); box-shadow: 0 1px 3px rgba(0,0,0,0.35); cursor: pointer; transition: transform var(--duration-fast) var(--ease-default); }
.np-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.np-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-brand-primary); border: 2px solid var(--color-surface-raised); box-shadow: 0 1px 3px rgba(0,0,0,0.35); cursor: pointer; }
.np-range::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--color-border-strong); }
.np-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

/* ---------------- Platforms (source toggle) ---------------- */
.np-plat-head { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); margin-bottom: 14px; }
.np-source-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border-default); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.np-source-seg { display: inline-flex; background: var(--color-surface-sunken); border-radius: var(--radius-full); padding: 3px; border: 1px solid var(--color-border-default); }
.np-source-seg button { padding: 6px 14px; border-radius: var(--radius-full); border: none; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; background: transparent; color: var(--color-text-secondary); white-space: nowrap; transition: background var(--duration-fast); }
.np-source-seg button[data-active="true"] { background: var(--color-brand-primary); color: #fff; }

/* ---------------- Empty state ---------------- */
.np-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; }
.np-empty__icon { width: 64px; height: 64px; border-radius: var(--radius-2xl); background: var(--color-brand-tint); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; color: var(--color-brand-primary); }
.np-empty h3 { font-size: 18px; font-weight: 600; }
.np-empty p { font-size: 14px; color: var(--color-text-secondary); max-width: 360px; line-height: 1.5; }

/* ---------------- Platform button ---------------- */
.np-platform-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 600; color: #fff; cursor: pointer; text-decoration: none; border: 1px solid var(--pb-color); background: color-mix(in srgb, var(--pb-color) 10%, transparent); transition: background var(--duration-normal) var(--ease-default); }
.np-platform-btn:hover { background: color-mix(in srgb, var(--pb-color) 20%, transparent); }
.np-platform-btn--full { width: 100%; }

/* ---------------- Stepper ---------------- */
.np-stepper { display: flex; align-items: center; width: 100%; }
.np-stepper__step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.np-stepper__dot { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; font-family: var(--font-display); border: 2px solid var(--color-border-default); color: var(--color-text-tertiary); }
.np-stepper__step--done .np-stepper__dot { background: var(--color-success-500); color: #fff; border-color: transparent; }
.np-stepper__step--active .np-stepper__dot { background: var(--color-brand-primary); color: #fff; border-color: transparent; }
.np-stepper__label { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.np-stepper__step--active .np-stepper__label { color: var(--color-text-primary); font-weight: 600; }
.np-stepper__line { flex: 1; height: 2px; margin: 0 8px 22px; background: var(--color-border-default); }
.np-stepper__line--done { background: var(--color-success-500); }

/* ---------------- Alert / inline notice ---------------- */
.np-alert { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius-lg); }
.np-alert__icon { flex-shrink: 0; margin-top: 1px; }
.np-alert__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.np-alert__title { font-weight: 600; font-size: 14px; color: var(--color-text-primary); }
.np-alert__text { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; }
.np-alert__action { align-self: flex-start; margin-top: 4px; background: none; border: none; padding: 0; color: var(--color-brand-primary); font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; text-decoration: none; }
.np-alert--info { background: var(--color-info-50); border: 1px solid color-mix(in srgb, var(--color-info-500) 30%, transparent); }
.np-alert--info .np-alert__icon { color: var(--color-info-500); }
.np-alert--success { background: var(--color-success-50); border: 1px solid color-mix(in srgb, var(--color-success-500) 30%, transparent); }
.np-alert--success .np-alert__icon { color: var(--color-success-500); }
.np-alert--warning { background: var(--color-warning-50); border: 1px solid color-mix(in srgb, var(--color-warning-500) 30%, transparent); }
.np-alert--warning .np-alert__icon { color: var(--color-warning-500); }
.np-alert--error { background: var(--color-error-50); border: 1px solid color-mix(in srgb, var(--color-error-500) 30%, transparent); }
.np-alert--error .np-alert__icon { color: var(--color-error-500); }

/* ---------------- Form field + copy input ---------------- */
.np-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.np-field__label { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.np-copy { display: flex; align-items: stretch; background: var(--color-surface-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; }
.np-copy input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 13px; padding: 0 12px; height: 42px; outline: none; text-overflow: ellipsis; }
.np-copy__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: none; border-left: 1px solid var(--color-border-default); background: var(--color-surface-raised); color: var(--color-text-primary); cursor: pointer; font-weight: 600; font-size: 13px; font-family: inherit; transition: all var(--duration-moderate) var(--ease-spring); }
.np-copy__btn[data-copied="true"] { background: var(--color-success-50); color: var(--color-success-500); }

/* ---------------- Spinner ---------------- */
.np-spinner { display: inline-block; border-radius: 50%; border: 3px solid var(--color-border-default); border-top-color: var(--color-brand-primary); animation: np-spin 700ms linear infinite; width: 48px; height: 48px; }

/* ---------------- Login ---------------- */
.np-auth-wrap { min-height: calc(100vh - var(--nav-height)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 20px; }
.np-auth-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 20px; }
.np-auth-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.np-auth-providers { display: flex; flex-direction: column; gap: 10px; }
.np-auth-foot { border-top: 1px solid var(--color-border-default); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.np-auth-foot p { font-size: 13px; color: var(--color-text-tertiary); line-height: 1.5; }
.np-auth-foot a { color: var(--color-brand-primary); }

/* ---------------- Configure ---------------- */
.np-configure { max-width: 640px; margin: 0 auto; padding: 56px 24px 80px; }
.np-configure__card { display: flex; flex-direction: column; gap: 28px; padding: 32px; }
.np-configure__welcome { display: flex; flex-direction: column; gap: 20px; }

/* ---------------- Docs ---------------- */
.np-docs-grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; padding-top: 48px; padding-bottom: 80px; }
.np-docs-toc { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; }
.np-docs-toc__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); padding: 4px 12px; margin-bottom: 4px; }
.np-docs-toc a { text-align: left; padding: 8px 12px; border-radius: var(--radius-md); font-size: 14px; color: var(--color-text-secondary); border-left: 2px solid transparent; transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast); }
.np-docs-toc a:hover { color: var(--color-text-primary); background: var(--color-surface-sunken); }
.np-docs-toc a[aria-current="true"] { font-weight: 600; background: var(--color-brand-tint); color: var(--color-brand-primary); border-left-color: var(--color-brand-primary); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.np-docs-body { max-width: 720px; display: flex; flex-direction: column; gap: 48px; }
.np-doc-block { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 90px; }
.np-doc-block p { font-size: 16px; color: var(--color-text-secondary); line-height: 1.7; }
.np-doc-block a { color: var(--color-brand-primary); font-weight: 500; }
.np-doc-block ul { font-size: 16px; color: var(--color-text-secondary); line-height: 1.7; padding-left: 20px; margin: 0; }
.np-doc-block code { font-family: var(--font-mono); font-size: 13px; background: var(--color-surface-sunken); padding: 2px 6px; border-radius: 4px; color: var(--color-text-primary); }
.np-doc-steps { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; list-style: none; }
.np-doc-steps li { display: flex; gap: 12px; align-items: flex-start; }
.np-doc-steps__num { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--color-brand-tint); color: var(--color-brand-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: var(--font-display); }
.np-doc-steps li span:last-child { font-size: 16px; color: var(--color-text-secondary); line-height: 1.5; padding-top: 2px; }
.np-faq { border-bottom: 1px solid var(--color-border-default); }
.np-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; }
.np-faq__q span:first-child { font-size: 16px; font-weight: 600; color: var(--color-text-primary); }
.np-faq__chev { color: var(--color-text-secondary); flex-shrink: 0; transition: transform var(--duration-fast); }
.np-faq[open] .np-faq__chev { transform: rotate(180deg); }
.np-faq__a { font-size: 15px; color: var(--color-text-secondary); line-height: 1.6; padding-bottom: 16px; }
.np-doc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ---------------- Legal ---------------- */
.np-legal { max-width: 800px; margin: 0 auto; padding: 48px 24px 80px; display: flex; flex-direction: column; gap: 24px; }
.np-legal__header { display: flex; flex-direction: column; gap: 6px; }
.np-legal__header p { margin: 0; color: var(--color-text-tertiary); font-size: 13px; line-height: 1.5; }
.np-legal__eyebrow { color: var(--color-brand-primary); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.np-legal__tabs { display: flex; gap: 4px; padding-bottom: 14px; overflow-x: auto; border-bottom: 1px solid var(--color-border-default); }
.np-legal__tabs a { padding: 8px 10px; flex: 0 0 auto; border-bottom: 2px solid transparent; color: var(--color-text-secondary); font-size: 14px; font-weight: 600; }
.np-legal__tabs a:hover { color: var(--color-text-primary); }
.np-legal__tabs a[aria-current="page"] { border-bottom-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.np-legal__lead { padding: 4px 0 4px 18px; border-left: 3px solid var(--color-brand-primary); }
.np-legal__lead h2 { margin: 0 0 6px; font-size: 18px; }
.np-legal__lead p { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 1.65; }
.np-legal__section { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 96px; }
.np-legal__section p { font-size: 16px; color: var(--color-text-secondary); line-height: 1.7; }
.np-legal__section ul { margin: 0; padding-left: 22px; color: var(--color-text-secondary); font-size: 15px; line-height: 1.7; }
.np-legal__section code { padding: 2px 5px; border: 1px solid var(--color-border-default); border-radius: 4px; background: var(--color-surface-sunken); color: var(--color-text-primary); overflow-wrap: anywhere; }
.np-legal__section a { color: var(--color-brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.np-legal-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border-default); }
.np-legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.np-legal-table th { text-align: left; padding: 12px; font-weight: 600; border-bottom: 1px solid var(--color-border-default); background: var(--color-surface-sunken); }
.np-legal-table td { padding: 12px; border-bottom: 1px solid var(--color-border-default); color: var(--color-text-secondary); }
.np-legal-table td:first-child { color: var(--color-text-primary); font-family: var(--font-mono); }
.np-legal-table tr:last-child td { border-bottom: 0; }
.np-legal__footer { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 20px; border-top: 1px solid var(--color-border-default); font-size: 13px; }
.np-legal__footer a { color: var(--color-text-tertiary); }
.np-legal__footer a:hover { color: var(--color-text-primary); }

/* ---------------- Error page ---------------- */
.np-error { min-height: calc(100vh - var(--nav-height)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 8px; max-width: 600px; margin: 0 auto; }
.np-error__code { color: var(--color-brand-primary); font-size: 110px; line-height: 1; font-family: var(--font-display); font-weight: 700; }
.np-error p { font-size: 18px; color: var(--color-text-secondary); max-width: 440px; line-height: 1.5; margin-top: 4px; }
.np-error__cta { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.np-success-check { width: 64px; height: 64px; border-radius: 50%; background: var(--color-success-50); color: var(--color-success-500); display: inline-flex; align-items: center; justify-content: center; animation: np-modal-in 400ms var(--ease-spring); }

/* FAQ native disclosure marker hidden */
.np-faq__q { list-style: none; }
.np-faq__q::-webkit-details-marker { display: none; }

/* ---------------- Style Builder ---------------- */
.np-sb { display: grid; grid-template-columns: 360px minmax(0, 1fr); width: 100%; min-height: calc(100vh - var(--nav-height)); }
.np-sb-panel { border-right: 1px solid var(--color-border-default); padding: 24px; display: flex; flex-direction: column; gap: 24px; background: var(--color-surface-base); }
.np-sb-panel__intro p { font-size: 14px; color: var(--color-text-secondary); margin-top: 4px; }
.np-sb-section { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border-default); }
.np-sb-section__head { display: flex; align-items: center; gap: 8px; color: var(--color-text-primary); }
.np-sb-section__head svg { color: var(--color-brand-primary); }
.np-sb-section__head span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.np-sb-hint { font-size: 13px; color: var(--color-text-secondary); margin-top: -4px; }
.np-sb-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.np-sb-swatch { position: relative; height: 44px; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; color: #fff; font-weight: 700; font-size: 14px; font-family: inherit; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.np-sb-swatch[aria-pressed="true"] { border-color: var(--color-text-primary); }
.np-sb-swatch--wide { grid-column: span 2; }
.np-sb-row { display: flex; flex-direction: column; gap: 8px; }
.np-sb-row__label { font-size: 13px; color: var(--color-text-secondary); }
.np-sb-seg { display: flex; gap: 6px; }
.np-sb-seg button { flex: 1; padding: 8px 4px; border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: all var(--duration-fast); }
.np-sb-seg button[aria-pressed="true"] { border-color: var(--color-brand-primary); background: var(--color-brand-tint); color: var(--color-brand-primary); }
.np-sb-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.np-sb-toggle-row span { font-size: 14px; }
.np-sb-color-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.np-sb-color-row > span { font-size: 14px; }
.np-sb-color { width: 44px; height: 30px; padding: 2px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-raised); cursor: pointer; flex-shrink: 0; }
/* Background-image dropzone — themed file picker for the Style Builder. */
.np-sb-drop { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 1px dashed var(--color-border-strong, var(--color-border-default)); border-radius: var(--radius-md); background: var(--color-surface-sunken); color: var(--color-text-secondary); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.np-sb-drop:hover { border-color: var(--color-brand-primary); background: var(--color-surface-raised); }
.np-sb-drop__thumb { width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0; background: var(--color-surface-overlay) center/cover no-repeat; border: 1px solid var(--color-border-default); }
.np-sb-drop__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.np-sb-drop__title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-sb-drop__hint { font-size: 12px; color: var(--color-text-tertiary); }
.np-sb-color::-webkit-color-swatch-wrapper { padding: 0; }
.np-sb-color::-webkit-color-swatch { border: none; border-radius: 4px; }
[data-sb-when-border], [data-sb-when-bg] { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
[data-sb-when-border][hidden], [data-sb-when-bg][hidden] { display: none; }
.np-sb-livehead { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 6px; }
.np-sb-livehead span { width: 6px; height: 6px; border-radius: 99px; background: var(--color-success-500); animation: np-pulse-glow 2s infinite; }
.np-sb-themeprev { border-radius: var(--radius-lg); background: repeating-conic-gradient(#1a1a1a 0% 25%, #161616 0% 50%) 50% / 22px 22px; padding: 8px; border: 1.5px solid var(--color-border-default); }
.np-sb-preview { display: flex; flex-direction: column; padding: 32px; gap: 16px; align-items: center; justify-content: center; background: var(--color-surface-sunken);
                 position: sticky; top: var(--nav-height, 64px); align-self: start; max-height: calc(100vh - var(--nav-height, 64px)); overflow-y: auto; }
/* On stacked/mobile layout the preview shouldn't stick (it sits below the panel). */
@media (max-width: 1024px) {
  .np-sb-preview { position: static; max-height: none; }
}
.np-sb-preview__bgtabs { display: flex; gap: 8px; align-items: center; }
.np-sb-preview__bgtabs > span { font-size: 13px; color: var(--color-text-secondary); margin-right: 4px; }
.np-sb-preview__bgtabs button { padding: 5px 12px; border-radius: var(--radius-full); border: 1px solid var(--color-border-default); cursor: pointer; font-size: 13px; font-family: inherit; background: transparent; color: var(--color-text-secondary); }
.np-sb-preview__bgtabs button[aria-pressed="true"] { background: var(--color-brand-tint); color: var(--color-brand-primary); }
.np-sb-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-error-500); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.np-sb-live span { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: np-pulse-glow 1.6s infinite; }
.np-sb-stage { max-width: 100%; border-radius: 12px; padding: 8px; box-shadow: var(--shadow-lg); }
.np-sb-caption { font-size: 13px; color: var(--color-text-tertiary); text-align: center; max-width: 360px; }

/* Public profile bio: rendered from a safe Markdown subset. */
.np-bio p { margin: 0 0 10px; }
.np-bio p:last-child { margin-bottom: 0; }
.np-bio a { color: var(--color-brand-primary); text-decoration: underline; }
.np-bio ul, .np-bio ol { margin: 0 0 10px; padding-left: 20px; }
.np-bio h1, .np-bio h2, .np-bio h3, .np-bio h4 { margin: 12px 0 6px; font-weight: 700; line-height: 1.3; }
.np-bio code { background: var(--color-surface-2, rgba(127,127,127,.15)); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.np-bio pre { background: var(--color-surface-2, rgba(127,127,127,.15)); padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.np-bio blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--color-border); color: var(--color-text-secondary); }

/* Public Discord card: server tag chip + profile badges. */
.np-dc-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--radius-sm); background: color-mix(in srgb, #5865F2 22%, transparent); color: #c9cdfb; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.np-dc-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-surface-sunken); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); font-size: 11px; font-weight: 600; }
.np-dc-badge-img { display: block; width: 22px; height: 22px; object-fit: contain; }

/* Public profile link chips: favicon + label, subtle hover lift. */
.np-link-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--radius-full); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); color: var(--color-text-primary); font-size: 14px; font-weight: 600; text-decoration: none; transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast); }
.np-link-chip:hover { background: var(--color-surface-sunken); border-color: var(--color-brand-primary); transform: translateY(-1px); }
.np-link-chip__fav { display: block; width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
.np-link-chip__fallback { display: inline-flex; align-items: center; color: var(--color-text-secondary); }