/* ============================================================
   Nexlab mini-apps — app-level styles layered on the vendored
   design tokens (nexlab-tokens.css). Never edit the tokens file;
   everything project-specific lives here.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Enforce the hidden attribute over component display rules (e.g. .nx-btn is inline-flex). */
[hidden] { display: none !important; }

body {
    font-family: var(--nx-font-body);
    background: var(--nx-bg-page);
    color: var(--nx-fg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.nx-container { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--nx-sp-4); }
.nx-container--wide { max-width: 1200px; }

.nx-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--nx-border);
    padding: var(--nx-sp-4) 0;
    position: sticky;
    top: 0;
    z-index: 20;
}
.nx-nav .nx-container { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; gap: var(--nx-sp-4); }
.nx-nav__brand { display: flex; align-items: center; gap: var(--nx-sp-2); text-decoration: none; }
.nx-nav__logo { height: 28px; width: auto; display: block; }
.nx-nav__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--nx-radius-pill);
    background: var(--nx-purple-50);
    color: var(--nx-purple-700);
    font-family: var(--nx-font-body);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nx-nav__links { display: flex; align-items: center; gap: var(--nx-sp-6); }
.nx-nav__link { font-family: var(--nx-font-body); font-size: var(--nx-text-sm); font-weight: 500; color: var(--nx-fg-2); text-decoration: none; }
.nx-nav__link:hover { color: var(--nx-purple-600); }

main { flex: 1; padding: var(--nx-sp-10) 0; }
main.nx-main--flush { padding: 0; }

.nx-card {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-sm);
    padding: var(--nx-sp-6);
}

.nx-input {
    width: 100%;
    font-family: var(--nx-font-body);
    font-size: var(--nx-text-base);
    padding: 12px 16px;
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-md);
    background: var(--nx-white);
    color: var(--nx-fg);
}
.nx-input:focus { outline: none; border-color: var(--nx-purple-500); box-shadow: 0 0 0 3px rgba(90, 24, 154, 0.18); }
.nx-input:disabled { opacity: 0.5; cursor: not-allowed; }

.nx-error { color: var(--nx-danger); font-size: var(--nx-text-sm); margin-top: var(--nx-sp-2); }

.nx-success-box {
    background: var(--nx-success-soft);
    border: 1px solid var(--nx-success);
    border-radius: var(--nx-radius-md);
    padding: var(--nx-sp-4);
    margin-bottom: var(--nx-sp-5);
}

.nx-warning-box {
    background: var(--nx-danger-soft);
    border: 1px solid var(--nx-danger);
    border-radius: var(--nx-radius-md);
    padding: var(--nx-sp-4);
    margin-bottom: var(--nx-sp-5);
}

/* ── Shared primitives ──────────────────────────────────────── */
.nx-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--nx-radius-pill);
    font-family: var(--nx-font-body);
    font-weight: 600;
    font-size: var(--nx-text-xs);
    letter-spacing: 0.02em;
}
.nx-badge--soft { background: var(--nx-purple-50); color: var(--nx-purple-700); }
.nx-badge--dark { background: var(--nx-ink); color: var(--nx-white); }

.nx-band { padding: var(--nx-sp-11) 0; }
.nx-band--white { background: var(--nx-white); }

.nx-btn--icon { padding: 12px; }
.nx-btn--disabled { opacity: 0.4; pointer-events: none; }

/* The tokens' base .nx-btn:hover forces the primary dark-purple background
   onto every variant, leaving their own dark text unreadable. Variants keep
   their own surface on hover instead (same specificity, later load → wins). */
.nx-btn--secondary:hover { background: var(--nx-gray-100); color: var(--nx-ink); box-shadow: var(--nx-shadow-sm); }
.nx-btn--ghost:hover { background: var(--nx-purple-50); color: var(--nx-purple-700); box-shadow: none; }
.nx-btn--on-dark:hover { background: var(--nx-purple-100); color: var(--nx-ink); box-shadow: none; }
.nx-btn--outline-dark:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.45); color: var(--nx-white); box-shadow: none; }
.nx-btn--accent:hover { background: var(--nx-btn-accent-bg); filter: brightness(1.08); }

/* ── Hero + generator ───────────────────────────────────────── */
.nx-hero { padding: var(--nx-sp-11) 0 var(--nx-sp-10); background: var(--nx-gradient-dawn); }
.nx-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--nx-sp-9); align-items: center; }
.nx-hero__title {
    font-family: var(--nx-font-display);
    font-weight: 700;
    font-size: var(--nx-h1-fluid);
    line-height: 1.05;
    letter-spacing: var(--nx-tracking-tight);
    color: var(--nx-fg);
}
.nx-hero__accent { color: var(--nx-purple-500); }
.nx-hero__trust { display: flex; flex-wrap: wrap; gap: var(--nx-sp-5); margin-top: var(--nx-sp-6); }
.nx-hero__trust-item { display: inline-flex; align-items: center; gap: var(--nx-sp-2); font-family: var(--nx-font-body); font-size: var(--nx-text-sm); font-weight: 500; color: var(--nx-fg-2); }

.nx-generator { box-shadow: var(--nx-shadow-md); }
.nx-generator__actions { display: flex; gap: var(--nx-sp-3); margin-top: var(--nx-sp-5); }
.nx-generator__actions .nx-btn { flex: 1; justify-content: center; text-decoration: none; }

.nx-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--nx-gray-100);
    border-radius: var(--nx-radius-md);
    margin-bottom: var(--nx-sp-5);
}
.nx-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-fg-2);
    font-family: var(--nx-font-body);
    font-weight: 600;
    font-size: var(--nx-text-sm);
    cursor: pointer;
    transition: background var(--nx-dur-base) var(--nx-ease), color var(--nx-dur-base) var(--nx-ease);
}
.nx-tab[aria-selected="true"] { background: var(--nx-purple-500); color: var(--nx-white); }
.nx-tab:not([aria-selected="true"]):hover { background: var(--nx-white); color: var(--nx-fg); }

.nx-field { display: flex; flex-direction: column; gap: var(--nx-sp-2); margin-bottom: var(--nx-sp-4); }

.nx-generator__preview {
    margin-top: var(--nx-sp-4);
    padding: var(--nx-sp-5);
    background: var(--nx-gray-100);
    border-radius: var(--nx-radius-lg);
}
.nx-phone {
    width: 220px;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--nx-sp-3) var(--nx-sp-3) var(--nx-sp-5);
    background: var(--nx-ink);
    border-radius: var(--nx-radius-2xl);
    box-shadow: var(--nx-shadow-lg);
}
.nx-phone__notch { width: 60px; height: 6px; margin: 0 auto var(--nx-sp-3); background: rgba(255, 255, 255, 0.25); border-radius: var(--nx-radius-pill); }
.nx-phone__screen { background: var(--nx-white); border-radius: var(--nx-radius-lg); padding: var(--nx-sp-3); display: flex; align-items: center; justify-content: center; }
.nx-phone__screen canvas { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
.nx-phone__screen canvas[data-qr-ghost="true"] { opacity: 0.35; }

/* ── QR editor & thumbnails ─────────────────────────────────── */
.nx-qr-editor { display: grid; grid-template-columns: 240px 1fr; gap: var(--nx-sp-6); align-items: start; }
.nx-qr-frame svg { display: block; width: 100%; height: auto; }
.nx-qr-thumb {
    width: 56px;
    flex-shrink: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    overflow: hidden;
    background: var(--nx-white);
}

.nx-shortener-result { text-align: center; }
.nx-shortener-result code.nx { word-break: break-all; }
.nx-shortener-result--ghost { opacity: 0.45; }
.nx-shortener-result__row { display: flex; align-items: center; justify-content: center; gap: var(--nx-sp-3); flex-wrap: wrap; }

/* ── Pricing ────────────────────────────────────────────────── */
.nx-plan { display: flex; flex-direction: column; position: relative; }
.nx-plan--pro { border-color: var(--nx-purple-300); box-shadow: var(--nx-shadow-md); }
.nx-plan__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--nx-sp-2); margin-bottom: var(--nx-sp-5); }
.nx-plan__ribbon {
    position: absolute;
    top: 0;
    right: var(--nx-sp-5);
    transform: translateY(-50%);
    background: var(--nx-purple-500);
    color: var(--nx-white);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--nx-radius-pill);
}
.nx-plan__price { font-family: var(--nx-font-display); font-weight: 700; font-size: var(--nx-text-3xl); color: var(--nx-fg); }
.nx-plan__features { list-style: none; display: grid; gap: var(--nx-sp-3); }
.nx-plan__features li { display: flex; align-items: center; gap: var(--nx-sp-2); }
.nx-plan__feature-icon { flex-shrink: 0; color: var(--nx-purple-500); }
.nx-plan__feature-icon--check { color: var(--nx-success); }
.nx-plan .nx-btn { margin-top: auto; }
.nx-plan__active {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--nx-radius-pill);
    background: var(--nx-success-soft);
    color: var(--nx-success);
    font-weight: 600;
}

/* ── Funnel: the page's one brand-gradient moment ──────────── */
.nx-funnel { background: linear-gradient(135deg, var(--nx-purple-700) 0%, var(--nx-purple-900) 100%); color: var(--nx-white); padding: var(--nx-sp-11) 0; }
.nx-funnel__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--nx-sp-9); align-items: start; }
.nx-funnel__badge {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: var(--nx-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--nx-tracking-caps);
    margin-bottom: var(--nx-sp-5);
}
.nx-funnel__display {
    font-family: var(--nx-font-display);
    font-weight: 700;
    font-size: var(--nx-display-fluid);
    line-height: 1.05;
    letter-spacing: var(--nx-tracking-tight);
    margin-bottom: var(--nx-sp-4);
}
.nx-funnel__lead { font-size: var(--nx-text-md); line-height: 1.55; color: var(--nx-purple-100); margin-bottom: var(--nx-sp-6); max-width: 44ch; }
.nx-funnel__highlight {
    display: flex;
    align-items: center;
    gap: var(--nx-sp-3);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--nx-radius-lg);
    padding: var(--nx-sp-4) var(--nx-sp-5);
    font-weight: 600;
    margin-bottom: var(--nx-sp-5);
    max-width: 46ch;
}
.nx-funnel__highlight-icon {
    display: inline-flex;
    flex-shrink: 0;
    padding: 10px;
    border-radius: var(--nx-radius-md);
    background: var(--nx-white);
    color: var(--nx-ink);
}
.nx-funnel__chips { display: flex; flex-wrap: wrap; gap: var(--nx-sp-2); }
.nx-funnel__chip {
    padding: 6px 14px;
    border-radius: var(--nx-radius-pill);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: var(--nx-text-sm);
    font-weight: 500;
    color: inherit;
    text-decoration: none;
}
.nx-funnel__chip:hover { background: rgba(255, 255, 255, 0.2); }
.nx-funnel__chip--active { background: var(--nx-white); color: var(--nx-ink); border-color: var(--nx-white); }
.nx-funnel__chip--active:hover { background: var(--nx-white); }

.nx-funnel__stack { display: flex; flex-direction: column; gap: var(--nx-sp-3); }
.nx-funnel__minis { display: flex; gap: var(--nx-sp-3); }
.nx-funnel__mini {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--nx-radius-lg);
    padding: var(--nx-sp-5);
}
.nx-funnel__mini-num { font-size: var(--nx-text-xs); color: var(--nx-purple-200); margin-bottom: var(--nx-sp-2); text-transform: uppercase; letter-spacing: 0.06em; }
.nx-funnel__mini-title { font-family: var(--nx-font-display); font-weight: 600; font-size: var(--nx-text-lg); line-height: 1.25; }

.nx-funnel__offer { background: var(--nx-white); color: var(--nx-fg); border-radius: var(--nx-radius-lg); padding: var(--nx-sp-7); }
.nx-funnel__offer-title { font-family: var(--nx-font-display); font-weight: 700; font-size: var(--nx-text-xl); margin-bottom: var(--nx-sp-2); }
.nx-funnel__offer-desc { font-size: var(--nx-text-sm); color: var(--nx-fg-2); line-height: 1.5; margin-bottom: var(--nx-sp-4); }
.nx-funnel__offer .nx-btn { font-size: var(--nx-text-sm); padding: 10px 18px; }
.nx-funnel__offer--glass { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--nx-white); }
.nx-funnel__offer--glass .nx-funnel__offer-desc { color: var(--nx-purple-100); }

/* ── Footer ─────────────────────────────────────────────────── */
.nx-footer { background: var(--nx-ink); color: var(--nx-gray-300); padding: var(--nx-sp-11) 0 var(--nx-sp-6); }
.nx-footer__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--nx-sp-9); padding-bottom: var(--nx-sp-8); }
.nx-footer__ctas { display: flex; gap: var(--nx-sp-3); flex-wrap: wrap; }
.nx-footer__ctas .nx-btn { text-decoration: none; }
.nx-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nx-sp-6); }
.nx-footer__col-title { font-size: var(--nx-text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-gray-500); margin-bottom: var(--nx-sp-3); }
.nx-footer__link { display: block; font-size: var(--nx-text-sm); color: var(--nx-gray-300); text-decoration: none; margin-bottom: var(--nx-sp-2); }
.nx-footer__link:hover { color: var(--nx-white); }
.nx-footer__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nx-sp-4);
    padding-top: var(--nx-sp-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.nx-footer__logo { display: block; height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: var(--nx-sp-4); }
.nx-footer__ig { font-size: var(--nx-text-sm); color: var(--nx-gray-400); text-decoration: none; }
.nx-footer__ig:hover { color: var(--nx-white); }

/* ── Accessibility ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .nx-hero__grid { grid-template-columns: 1fr; }
    .nx-funnel__grid { grid-template-columns: 1fr; }
    .nx-funnel__minis { flex-direction: column; }
}

@media (max-width: 768px) {
    .nx-nav__links { display: none; }
    .nx-footer__grid { grid-template-columns: 1fr; }
    .nx-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .nx-tabs { flex-wrap: wrap; }
    .nx-qr-editor { grid-template-columns: 1fr; }
    .nx-footer__bottom { flex-direction: column; text-align: center; }
    .nx-footer__cols { grid-template-columns: 1fr; }
}

/* ── Bio (link-in-bio) ──────────────────────────────────────── */
/* Handle-claim input group (home + create card). */
.nx-bio-claim { display: flex; gap: var(--nx-sp-3); flex-wrap: wrap; align-items: stretch; }
.nx-bio-claim__field {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 240px;
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-md);
    background: var(--nx-white);
    overflow: hidden;
}
.nx-bio-claim__field:focus-within { border-color: var(--nx-purple-500); box-shadow: 0 0 0 3px rgba(90, 24, 154, 0.18); }
.nx-bio-claim__prefix { padding-left: 14px; color: var(--nx-fg-3); font-size: var(--nx-text-sm); white-space: nowrap; }
.nx-bio-claim__input { border: none; background: transparent; padding-left: 4px; }
.nx-bio-claim__input:focus { outline: none; box-shadow: none; border: none; }

/* Editor layout. */
.nx-bio-editor { display: grid; grid-template-columns: 320px 1fr; gap: var(--nx-sp-6); align-items: start; }
.nx-bio-editor__preview { position: sticky; top: 96px; }
.nx-bio-editor__share { margin-top: var(--nx-sp-4); text-align: center; }
.nx-bio-editor__share code.nx { word-break: break-all; }
.nx-bio-appearance { border-top: 1px solid var(--nx-border); padding-top: var(--nx-sp-4); margin-bottom: var(--nx-sp-4); }
.nx-bio-appearance--locked { opacity: 0.65; }

/* Draggable link rows. */
.nx-bio-link-row { cursor: default; }
.nx-bio-link-row.is-dragging { opacity: 0.5; }
.nx-bio-link-row__head { display: flex; align-items: center; gap: var(--nx-sp-2); flex-wrap: wrap; }
[data-bio-drag-handle] { cursor: grab; color: var(--nx-fg-3); user-select: none; letter-spacing: -2px; }
[data-bio-link] { touch-action: none; }

/* Phone with a live iframe preview (the QR .nx-phone__screen canvas rule is
   QR-only, so bio gets its own screen + iframe sizing). */
.nx-phone--bio { width: 300px; max-width: 100%; }
.nx-phone__screen--bio { padding: 0; display: block; overflow: hidden; }
.nx-phone__screen--bio iframe { width: 100%; height: 560px; border: 0; display: block; background: var(--nx-white); border-radius: var(--nx-radius-lg); }

/* Home static demo bio. */
.nx-bio-demo { padding: var(--nx-sp-5) var(--nx-sp-4); text-align: center; background: var(--nx-cream); border-radius: var(--nx-radius-lg); }
.nx-bio-demo__avatar {
    width: 64px; height: 64px; margin: 0 auto var(--nx-sp-3);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--nx-radius-pill);
    background: var(--nx-gradient-brand); color: var(--nx-white);
    font-family: var(--nx-font-display); font-weight: 700; font-size: var(--nx-text-lg);
}
.nx-bio-demo__name { font-family: var(--nx-font-display); font-weight: 700; font-size: var(--nx-text-md); color: var(--nx-ink); }
.nx-bio-demo__handle { font-size: var(--nx-text-xs); color: var(--nx-fg-3); margin-bottom: var(--nx-sp-2); }
.nx-bio-demo__tagline { font-size: var(--nx-text-xs); color: var(--nx-fg-2); margin-bottom: var(--nx-sp-4); }
.nx-bio-demo__link {
    display: block; padding: 10px; margin-bottom: var(--nx-sp-2);
    border-radius: var(--nx-radius-md); background: var(--nx-white);
    border: 1px solid var(--nx-border); font-size: var(--nx-text-sm); font-weight: 600; color: var(--nx-ink);
}
.nx-bio-demo__link--featured { background: var(--nx-purple-500); color: var(--nx-white); border-color: var(--nx-purple-500); }

/* ── Public profile page (standalone document) ─────────────── */
.nx-bio {
    --bio-accent: var(--nx-purple-500);
    --bio-bg: var(--nx-cream);
    --bio-fg: var(--nx-ink);
    --bio-fg-2: var(--nx-gray-600);
    --bio-card: var(--nx-white);
    --bio-border: var(--nx-gray-300);
    align-items: center;
    background: var(--bio-bg);
    color: var(--bio-fg);
    padding: var(--nx-sp-8) 0;
}
.nx-bio--oscuro {
    --bio-bg: var(--nx-ink);
    --bio-fg: var(--nx-gray-100);
    --bio-fg-2: var(--nx-gray-400);
    --bio-card: rgba(255, 255, 255, 0.06);
    --bio-border: rgba(255, 255, 255, 0.18);
}
.nx-bio--arena {
    --bio-bg: #F3E9DD;
    --bio-fg: #3B2F23;
    --bio-fg-2: #7A6A57;
    --bio-card: #FBF5EC;
    --bio-border: #E0D2BE;
}
.nx-bio__page { width: 100%; max-width: 480px; margin: 0 auto; padding: var(--nx-sp-6) var(--nx-sp-5); }
.nx-bio__head { text-align: center; margin-bottom: var(--nx-sp-5); }
.nx-bio__avatar {
    width: 96px; height: 96px; margin: 0 auto var(--nx-sp-3);
    object-fit: cover; border-radius: var(--nx-radius-pill);
    border: 2px solid var(--bio-border); display: block;
}
.nx-bio__avatar--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--bio-accent); color: var(--nx-white);
    font-family: var(--nx-font-display); font-weight: 700; font-size: var(--nx-text-2xl);
}
.nx-bio__name { font-family: var(--nx-font-display); font-weight: 700; font-size: var(--nx-text-xl); color: var(--bio-fg); }
.nx-bio__handle { font-size: var(--nx-text-sm); color: var(--bio-fg-2); margin-top: 2px; }
.nx-bio__tagline { font-size: var(--nx-text-sm); color: var(--bio-fg-2); margin-top: var(--nx-sp-3); line-height: 1.5; }
.nx-bio__socials { display: flex; justify-content: center; gap: var(--nx-sp-3); margin-bottom: var(--nx-sp-5); }
.nx-bio__social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--nx-radius-pill);
    background: var(--bio-card); border: 1px solid var(--bio-border); color: var(--bio-fg);
    text-decoration: none; transition: transform var(--nx-dur-base) var(--nx-ease);
}
.nx-bio__social:hover { transform: translateY(-1px); color: var(--bio-accent); }
.nx-bio__links { display: flex; flex-direction: column; gap: var(--nx-sp-3); }
.nx-bio__link {
    display: flex; align-items: center; justify-content: center; gap: var(--nx-sp-2);
    width: 100%; padding: 14px 18px; border-radius: var(--nx-radius-md);
    font-family: var(--nx-font-body); font-weight: 600; font-size: var(--nx-text-base);
    text-align: center; text-decoration: none;
    transition: transform var(--nx-dur-base) var(--nx-ease), box-shadow var(--nx-dur-base) var(--nx-ease);
}
.nx-bio__link:hover { transform: translateY(-1px); }
.nx-bio__link-icon { display: inline-flex; flex-shrink: 0; }
/* Button styles. */
.nx-bio__links--solid .nx-bio__link { background: var(--bio-card); color: var(--bio-fg); border: 1px solid var(--bio-border); box-shadow: var(--nx-shadow-sm); }
.nx-bio__links--solid .nx-bio__link--featured { background: var(--bio-accent); color: var(--nx-white); border-color: var(--bio-accent); }
.nx-bio__links--outline .nx-bio__link { background: transparent; color: var(--bio-fg); border: 2px solid var(--bio-border); }
.nx-bio__links--outline .nx-bio__link--featured { border-color: var(--bio-accent); color: var(--bio-accent); }
.nx-bio__links--pill .nx-bio__link { background: var(--bio-card); color: var(--bio-fg); border: 1px solid var(--bio-border); border-radius: var(--nx-radius-pill); }
.nx-bio__links--pill .nx-bio__link--featured { background: var(--bio-accent); color: var(--nx-white); border-color: var(--bio-accent); }
.nx-bio__watermark {
    display: block; text-align: center; margin-top: var(--nx-sp-7);
    font-size: var(--nx-text-xs); color: var(--bio-fg-2); text-decoration: none;
}
.nx-bio__watermark strong { color: var(--bio-fg); }

@media (max-width: 900px) {
    .nx-bio-editor { grid-template-columns: 1fr; }
    .nx-bio-editor__preview { position: static; }
    .nx-phone--bio { margin: 0 auto; }
}

/* Editor: visual icon picker (radio swatches replacing the icon <select>). */
.nx-icon-picker { display: flex; flex-wrap: wrap; gap: var(--nx-sp-2); }
.nx-icon-picker__radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nx-icon-picker__swatch {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--nx-radius-md);
    border: 1px solid var(--nx-border-strong); background: var(--nx-white);
    color: var(--nx-fg-2); cursor: pointer;
    transition: border-color var(--nx-dur-base) var(--nx-ease), color var(--nx-dur-base) var(--nx-ease), background var(--nx-dur-base) var(--nx-ease);
}
.nx-icon-picker__swatch:hover { border-color: var(--nx-purple-500); color: var(--nx-purple-600); }
.nx-icon-picker__radio:checked + .nx-icon-picker__swatch {
    border-color: var(--nx-purple-500); background: var(--nx-purple-50); color: var(--nx-purple-700);
    box-shadow: 0 0 0 1px var(--nx-purple-500) inset;
}
.nx-icon-picker__radio:focus-visible + .nx-icon-picker__swatch { outline: 2px solid var(--nx-purple-500); outline-offset: 2px; }
.nx-icon-picker__none { font-size: var(--nx-text-xs); font-weight: 600; }

/* Editor: social inputs in a compact 2-column grid. */
.nx-bio-socials { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-sp-3) var(--nx-sp-4); }
.nx-bio-social { min-width: 0; }
.nx-bio-social .nx-bio-claim__field { min-width: 0; }

/* Editor: compact, collapsible link rows. */
.nx-bio-link-row__icon { display: inline-flex; flex-shrink: 0; color: var(--nx-fg-2); }
.nx-bio-link-row__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-bio-link-row__clicks { flex-shrink: 0; }
.nx-bio-link-row__actions { display: inline-flex; align-items: center; gap: var(--nx-sp-2); flex-shrink: 0; }
.nx-bio-link-row__body { margin-top: var(--nx-sp-4); padding-top: var(--nx-sp-4); border-top: 1px solid var(--nx-border); }
.nx-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; line-height: 1;
    border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-sm);
    background: var(--nx-white); color: var(--nx-fg-2); cursor: pointer; font-size: 15px;
    transition: border-color var(--nx-dur-base) var(--nx-ease), color var(--nx-dur-base) var(--nx-ease);
}
.nx-icon-btn:hover:not(:disabled) { border-color: var(--nx-purple-500); color: var(--nx-purple-600); }
.nx-icon-btn:disabled { opacity: 0.4; cursor: default; }

/* Wider editor on large screens (see .nx-container--wide on this page). */
@media (min-width: 1100px) {
    .nx-bio-editor { grid-template-columns: 360px 1fr; gap: var(--nx-sp-8); }
    .nx-phone--bio { width: 330px; }
}

/* Stack the social grid on small screens so the prefixed inputs stay usable. */
@media (max-width: 560px) {
    .nx-bio-socials { grid-template-columns: 1fr; }
}